_home.scss

.stdcm-v2 {
  /* 
  We set the cursor to default to avoid the pointer cursor that appears due to role="button" on the div.
  The role="button" makes the div appear clickable, which causes the cursor to change to a pointer on hover.
  Using !important ensures that the cursor remains in its default state.
*/
  cursor: default !important;
  .stdcm-v2__body {
    padding: 2rem 2rem 4rem;
    background-color: rgb(239, 243, 245);
    display: flex;

    .stdcm-v2-simulation-settings {
      display: flex;
      gap: 0.813rem;
      width: 55%;

      .stdcm-v2-consist-container {
        width: 45%;

        .stdcm-v2-consist-img {
          overflow: hidden;
          img {
            transform: scaleX(-1);
            max-width: 100%;
            height: 1.25rem;
          }
        }
      }

      .stdcm-v2__separator {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.05);
        width: 6px;
        height: 280px;
        margin: 12px 0;
      }
      .stdcm-v2-simulation-itinerary {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-width: 28.125rem;
        width: 55%;
        position: relative;
        align-items: center;

        > div {
          width: 100%;
        }

        .stdcm-v2-vias-list {
          display: flex;
          flex-direction: column;
          gap: 2rem;
        }

        /*TODO Waiting to fix the button in ui-core...*/
        .stdcm-v2-launch-request {
          button {
            justify-content: center;
            width: 100%;
            font-weight: 500;
          }

          .stdcm-warning-buttons {
            display: flex;
            justify-content: space-between;
            padding-top: 1.125rem;
            button {
              border-radius: 0.31rem;
              border: 0.031rem solid rgba(121, 118, 113, 1);
              box-shadow:
                0rem 0.09rem 0.06rem rgba(255, 255, 255, 0.46) inset,
                0rem -0.09rem 0.06rem rgba(148, 145, 142, 1) inset,
                0rem 0.06rem 0.125rem rgba(0, 0, 0, 0.25);
              background-image: linear-gradient(
                180deg,
                rgba(226, 226, 222, 1) 0%,
                rgba(211, 209, 207, 1) 100%
              );
              color: #494641;
              padding: 0.25rem 0.75rem 0.5rem 0.75rem;
              max-width: fit-content;
            }
          }
        }

        .warning-box {
          border-radius: 0.5rem;
          box-shadow:
            0px 0px 0px 4px rgba(255, 255, 255, 1) inset,
            0px 0px 0px 5px rgba(234, 167, 43, 1) inset,
            0px 3px 7px -3px rgba(125, 82, 30, 0.55);
          background-color: rgba(253, 245, 225, 1);
          color: #7d521e;
          display: flex;
          flex-direction: column;
          padding: 1rem 1.8125rem 2rem 1.8125rem;
          margin-top: 0.75rem;

          span {
            color: #eaa72b;
            align-self: center;
            margin-bottom: 6px;
          }
        }

        .wizz-effect:active {
          .warning-box {
            animation: tilt-shaking 0.25s 0s;
          }
        }

        @keyframes tilt-shaking {
          0% {
            transform: rotate(0deg);
          }
          12% {
            transform: rotate(1deg);
          }
          24% {
            transform: rotate(0eg);
          }
          36% {
            transform: rotate(-1deg);
          }
          47% {
            transform: rotate(0deg);
          }
          59% {
            transform: rotate(1deg);
          }
          70% {
            transform: rotate(0eg);
          }
          85% {
            transform: rotate(-1deg);
          }
          100% {
            transform: rotate(0deg);
          }
        }

        .simulation-status-banner {
          position: absolute;
          bottom: -6.5rem;
          z-index: 1;
          width: 33.125rem;

          .status {
            display: flex;
            font-weight: 400;
            letter-spacing: 0px;
            text-align: center;
            justify-content: center;
            color: rgb(11, 114, 60);
            padding-top: 1.438rem;
            font-size: 1.5rem;
            line-height: 2rem;
            height: 5rem;
            border-radius: 0.5rem;
            background-color: rgb(230, 247, 238);
            box-shadow:
              0px 0px 0px 4px rgba(255, 255, 255, 1) inset,
              0px 0px 0px 5px rgb(60, 202, 128) inset,
              0px 3px 7px -3px rgba(11, 114, 60, 0.4);

            &.failed {
              background-color: rgba(255, 238, 237, 1);
              color: rgba(217, 28, 28);
              box-shadow:
                0px 0px 0px 4px rgba(255, 255, 255, 1) inset,
                0px 0px 0px 5px rgba(255, 104, 104, 1) inset,
                0px 3px 7px -3px rgba(217, 28, 28, 0.4);
            }
          }

          .error-message {
            bottom: -5.875rem;
            position: absolute;
            color: rgba(49, 46, 43, 1);
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: 0;
            text-align: left;
            line-height: 1.5rem;
          }
        }
      }
    }

    .stdcm-v2-map {
      border-radius: 0.5rem;
      border: 0.063rem solid rgba(255, 255, 255, 1);
      box-shadow:
        0px 0px 0px 2px rgba(255, 255, 255, 0.75) inset,
        0px 0px 0px 1px rgba(0, 0, 0, 0.25) inset;
      margin-left: 2rem;
      width: 55%;
      height: 48.7rem;
    }
  }
}