:root {
    --primary-color: rgb(55, 55, 55);
    --secondary-color: rgb(66, 66, 66);
    --accent-green: rgb(0, 128, 64);
    --accent-amber: rgb(195, 131, 1);
    --accent-red: rgb(175, 35, 35);
    --accent-nirail: #1e459f;
    --accent-enterprise: #7E1C9ABF;
  }
  
  body {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
      font-family:Arial, Helvetica, sans-serif;
      background-color: var(--primary-color);
  }
  
  .overlay_container {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 320px;
      height: auto;
      background-color: var(--primary-color);
      border-radius: 10px;
      z-index: 1;
      transition: left 1s;
  }

  @media (max-height: 770px) {
    .overlay_container {
        height: 95%;
    }
  }
  
  #overlay_container::-webkit-scrollbar {
      width: 6px;
  }
  
  #overlay_container::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.3);
      border-radius: 3px;
  }
  
  /* MAIN PAGE */
  
  .overlay_title_container {
      position: sticky;
      top: 0;
      width: 100%;
      height: 9vh;
      background-color: transparent;
  
      border-bottom: 4.5px solid transparent;
      border-image: linear-gradient(
          to right,
          #d62b2bBF 0%,
          #d62b2bBF 100%
        ) 1;
  }
  
  .overlay_title {
      position: absolute;
      top: 20%;
      left: 4%;
  
      width: 100%;
      font-weight: bold;
      font-size: 27px;
      color: whitesmoke;
  }
  
  .overlay_exit_btn {
      position: absolute;
      top: 10px;
      right: 10px;
  
      font-size: 16px;
      color: rgb(181, 181, 181);
      transition: all 0.2s;
  }
  
  .overlay_exit_btn:hover {
      cursor: pointer;
      color: rgb(184, 63, 63);
  }
  
  
  .overlay_time {
      position: absolute;
      top: 57%;
      left: 3.5%;
  
      font-weight: 500;
      font-size: 26px;
      color: whitesmoke;
  }
  
  .overlay_zone {
      position: absolute;
      bottom: 10%;
      right: 3%;
  
      font-weight: 500;
      font-size: 16px;
      padding: 4px;
      background-color: var(--accent-nirail);
      border-radius: 5px;
      color: whitesmoke;
  }
  
  .overlay_options_container {
      position: relative;
      top: 2.5%;
      left: 50%;
      transform: translateX(-50%);
  
      width: 95%;
      height: 4%;
      background-color: var(--primary-color);
  }
  
  .overlay_selector {
      font-size: 18px;
      background-color: var(--secondary-color);
      color: whitesmoke;
      border-radius: 5px;
      border: none;
  }
  
  #selector_platform {
      position: absolute;
      right: 0%;
  
      height: 100%;
      width: 47.5%;
  }
  
  #selector_direction {
      position: absolute;
      left: 0%;
  
      height: 100%;
      width: 47.5%;
  }
  
  .overlay_item {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  
      width: 100%;
      height: 8vh;
      color: whitesmoke;
      background-color: var(--primary-color);
      border-bottom: 3px solid var(--secondary-color);
  
      transition: all 0.2s;
  }

  #overlay_item_last {
    top: 1%;
    border-bottom: none;
    text-align: center;
    font-size: 12px;
    color: rgba(245, 245, 245, 0.349);
    border-radius: 0 0 10px 10px;
  }

   #overlay_item_last:hover {
    cursor: auto;
    background-color: var(--primary-color);
   }

  #overlay_item_9 {
    border-bottom: none;
    border-radius: 0 0 10px 10px;
  }
  
  .overlay_item:hover {
      background-color: var(--secondary-color);
      cursor: pointer;
  }
  
  .overlay_item_destination {
      position: absolute;
      left: 4%;
      top: 40%;
  
      font-size: 16px;
  }
  
  .overlay_item_time {
      position: absolute;
      left: 4%;
      top: 10%;
  
      font-weight: bold;
      font-size: 18px;
  }

  .overlay_item_time_delayed {
      position: absolute;
      left: 21%;
      top: 10%;
  
      font-weight: bold;
      font-size: 18px;
  }

    .time_On-Time {
    }

    .time_Delayed {
        color: var(--accent-amber);
        text-decoration: line-through;
    }

    .time_Cancelled {
        color: var(--accent-red);
        text-decoration: line-through;
    }
  
  .overlay_item_status_container {
      position: absolute;
      right: 3%;
      top: 14%;
      padding: 3px;
      border-radius: 5px;
      border: 1px solid rgba(245, 245, 245, 0.9);
  }
  
  .status_On-Time {
      background-color: var(--accent-green);
      border-color: rgb(0, 64, 32);
  }
  
  .status_Delayed {
      background-color: var(--accent-amber);
      border-color: rgb(137, 91, 0);
  }

   .status_Cancelled {
      background-color: var(--accent-red);
      border-color: rgb(135, 4, 4);
  }

  .status_Unavailable {
    display: none;
  }
  
  .overlay_item_status {
      font-size: 13px;
      color: rgba(245, 245, 245, 0.9);
  }
  
  .overlay_item_platform_container {
      position: absolute;
      right: 23%;
      top: 14%;
  
      
      width: 23px;
      height: 23px;
      border-radius: 5px;
      background-color: var(--secondary-color);
      border: 1px solid rgba(245, 245, 245, 0.5);
  }

  .platform_container_inactive {
    display: none;
  }
  
  .overlay_item_platform {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-weight: bold;
      font-size: 14px;
  }
  
  .overlay_item_calling {
      position: absolute;
      left: 5%;
      bottom: 38%;
  
      width: 20%;
      font-size: 12px;
  }
  
  .overlay_item_marquee_container {
      position: absolute;
      left: 4.5%;
      bottom: 10%;
  
      width: 91%;
      overflow: hidden; /* hides overflow so text appears in a "window" */
      white-space: nowrap;
  }
  
  .overlay_item_marquee_content {
      display: inline-flex; /* place two text copies side by side */
      animation: marquee 20s linear infinite;
  }
  
  .overlay_item_stops {
      font-size: 14px;
      padding-right: 50px; /* space between repetitions */
  }
  
  .overlay_item_no_service {
      text-align: center;
  }
  
  @keyframes marquee {
      0% {
          transform: translateX(0);
      }
      100% {
          transform: translateX(-50%); /* move left by half the total width */
      }
  }
  
  /* SERVICE SUB PAGE */
  
  .overlay_sub_station_container {
      position: relative;
      padding-top: 1%;
      top: 0%;
      left: 0;
      width: 100%;
      
  
      color: whitesmoke;
      background-color: var(--primary-color);
      border-bottom: 3px solid var(--secondary-color);
  }
  
  .origin {
      height: 5vh;
  }
  
  .intermediate {
      height: 4vh;
  }
  
  .destination {
      height: 5vh;
      border-radius: 0 0 10px 10px;
      border-bottom: none;
  }

  .destination .overlay_sub_station_name  {
    top: 47.5%;
    font-size: 16px;
  }

  #station-container-17 {
    border-bottom: none;
  }
  
  .overlay_sub_station_name {
      position: absolute;
      top: 37.5%;
      left: 31%;
  
      font-size: 15px;
      color: rgba(245, 245, 245, 0.8);
      transform: translate(0%, -50%);
  }

  .overlay_sub_station_name_intermediate {
      position: absolute;
      top: 32%;
      left: 31%;
  
      font-size: 15px;
      color: rgba(245, 245, 245, 0.8);
      transform: translate(0%, -50%);
  }
  
  .overlay_sub_station_plat {
      position: absolute;
      top: 74%;
      left: 31%;
  
      font-size: 11px;
      color: rgba(245, 245, 245, 0.8);
      transform: translate(0%, -50%);
  }

  .overlay_sub_station_plat_intermediate {
      position: absolute;
      top: 74%;
      left: 31%;
  
      font-size: 11px;
      color: rgba(245, 245, 245, 0.8);
      transform: translate(0%, -50%);
  }

  .delayExpected {
    color: var(--accent-amber);
  }
  
  .overlay_sub_station_status {
      position: absolute;
      top: 50%;
      right: 3%;
  
      padding: 3px;
      font-size: 12px;
      border-radius: 5px;
      background-color: #2853B5;
  
      transform: translate(0%, -50%);
  }
  
  .overlay_sub_station_status.status_On-Time {
      background-color: var(--accent-green);
  }
  
  .overlay_sub_station_status.status_Early {
      background-color: var(--accent-amber);
  }
  
  .overlay_sub_station_status.status_Delayed {
      background-color: var(--accent-amber);
  }
  
  .overlay_sub_station_status.status_Cancelled {
      background-color: var(--accent-red);
  }
  
  .overlay_sub_station_time {
      position: absolute;
      top: 50%;
      left: 2%;
  
      font-size: 18px;
      transform: translate(0%, -50%);
  }

  .overlay_sub_station_delay {
    position: absolute;
    left: 18%;

    font-size: 12px;
    color: var(--accent-amber);
  }

  .delay_org_dest {
    top: 15%;
  }
  
  .overlay_sub_station_node_container {
      position: absolute;
      left: 60px;
      top: 0%;
  
      width: 30px;
      height: 150%;
  
      z-index: 1;
  }
  
  .overlay_sub_station_node {
      position: absolute;
      left: 50%;
      top: 20%;
  
      background-color: whitesmoke;
      border-radius: 50%;
  
      transform: translate(-50%, 0%);
      z-index: 4;
  }
  
  .overlay_sub_station_node_train {
      position: absolute;
      left: 50%;
      top: 40%;
  
      border: 3px solid var(--accent-nirail);
      border-radius: 50%;          
      background: transparent; 
      width: 20px;
      height: 20px;
  
      transform: translate(-50%, 0%);
      z-index: 5;

      animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 whitesmoke
    }
    70% {
        box-shadow: 0 0 0 5px rgba(255, 204, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
    }
}
  
  .origin_node {
      width: 25px;
      height: 25px;
      top: 16%;
  }
  
  .intermediate_node {
      width: 15px;
      height: 15px;
      top: 20%;
  }
  
  .overlay_sub_station_node_line {
      position: absolute;
      left: 50%;
      top: 32.5%;
  
  
      width: 5px;
      height: 55px;
      background-color: var(--secondary-color);
  
      transform: translate(-50%, 0%);
      z-index: 3;
  }
  
  .overlay_sub_destination {
      position: absolute;
      top: 50%;
      left: 4%;
  
      width: 100%;
      
      font-size: 26px;
      color: whitesmoke;
  }
  
  .overlay_sub_time {
      position: absolute;
      top: 15%;
      left: 3%;
  
      font-weight: bold;
      font-size: 28px;
      color: whitesmoke;
  }
  
  .overlay_sub_train_id {
      position: absolute;
      top: 20%;
      right: 5%;
  
      font-weight: bold;
      font-size: 20px;
      padding: 4px;
      background-color: var(--accent-nirail);
      border-radius: 5px;
      color: rgba(245, 245, 245, 0.9);
  
      transition: padding 0.5s;
  }
  
  .overlay_sub_train_id:hover {
      cursor: pointer;
      padding: 5px;
  }
  
  .overlay_sub_train_node {
      position: absolute;
      right: 30px;
      /*top: -120%;  (Prev) -40% -> +50% (Next) = 2nd last -> Final
                     (Prev) -75% -> +50% (Next) = Intermediates
                     (Prev) -120% -> 50% (Next) = First -> Intermediates
                  */
      transform: translate(0%, -50%);
  
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: rgb(152, 201, 201);
      z-index: 4;
  }
  
  .wrapper {
      height: fit-content;
      width: fit-content;
  }
  
  /* TRAIN PAGE */
  
  .train_seatmap {
      position: absolute;
      top: 12.5%;
      right: 5%;
      height: 77.5%;
      width: 40%;
  
      background-color: rgb(141, 141, 141);
  }
  
  .overlay_sub_train_car_selector_container {
      position: absolute;
      bottom: 2.5%;
      right: 5%;
  
      width: 90%;
      height: 5%;
      background-color: rgb(129, 129, 129);
      border-radius: 5px;
      display: flex; 
  }
  
  .overlay_sub_train_car_selector_item {
      position: relative;
      width: 33.3%;
      height: 100%;
  
      background-color: rgb(129, 129, 129);
      transition: all 0.25s;
  }
  
  .overlay_sub_train_car_selector_item:hover {
      cursor: pointer;
      background-color: rgb(101, 101, 101);
  }
  
  #car_selector_item-1 {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
  }
  
  #car_selector_item-3 {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  
  #car_selector_item-2 {
      border-left: 3px solid rgb(101, 101, 101);
      border-right: 3px solid rgb(101, 101, 101);
  }
  
  .overlay_sub_train_car_selector_item_text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  
      color: whitesmoke;
  }
  
  .overlay_sub_title_number {
      position: absolute;
      top: 7.5%;
      left: 5%;
  
      font-weight: bold;
      font-size: 28px;
      color: whitesmoke;
  }
  
  .overlay_sub_title_cars {
      position: absolute;
      top: 35%;
      left: 5%;
  
      width: 100%;
      font-size: 18px;
      color: whitesmoke;
  }
  
  .overlay_sub_title_year {
      position: absolute;
      top: 55%;
      left: 5%;
  
      width: 100%;
      font-size: 18px;
      color: whitesmoke;
  }
  
  .overlay_sub_title_operator {
      position: absolute;
      top: 75%;
      left: 5%;
  
      width: 100%;
      font-size: 18px;
      color: whitesmoke;
  }
  
  .overlay_sub_title_currently {
      position: absolute;
      top: 7.5%;
      right: 5%;
  
      font-weight: bold;
      font-size: 24px;
      color: whitesmoke;
  }
  
  .overlay_sub_title_location {
      position: absolute;
      top: 32.5%;
      right: 5%;
  
      font-size: 18px;
      color: whitesmoke;
  }
  
  .overlay_sub_services_container {
      position: absolute;
      top: 72.5%;
      right: 5%;
  
      width: 30%;
      height: 20px;
      display: flex;
  }
  
  .overlay_sub_services_item {
      position: relative;
  
      width: 25%;
      height: 100%;
      border-top: 3px solid rgb(101, 101, 101);
      border-bottom: 3px solid rgb(101, 101, 101);
  }
  
  .service_item_img {
      position: absolute;
      left: 50%;
      transform:translateX(-50%);
  
      height: 100%;
      fill: whitesmoke;
  }
  
  #services_item_1 {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-left: 3px solid rgb(101, 101, 101);
  }
  
  #services_item_4 {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-right: 3px solid rgb(101, 101, 101);
  }
  

  /* MOBILE */

  @media (max-width: 720px) {
    .overlay_container {
        width: 100%;
        top: 70%;
        left: 0;
    }
    .overlay_sub_station_node_container {
        left: 20%;
    }
  }


  #overlay_scroll {
    top: 10%;
    height: 90%;

    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding-bottom: 0px;
  }