/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {}

@media screen and (max-height: 428px) {
  #mapDiv {
    position: absolute;
    top: var(--header-height);
    left: 400px;
    height: calc(100% - var(--header-height));
    width: calc(100% - 384px);
  }

  .informationContainer,
  .predictionList,
  .routeInfoList,
  .tripInfo    
  {
    height: calc(100% - var(--header-height));
  }
}

@media screen and (min-width: 768px) {

  .informationContainer,
  .predictionList,
  .routeInfoList,
  .tripInfo,
  .searchContainer,
  .routeListMenu {
    width: 400px;
  }

  .informationContainer
  {
    height: calc(100vh - 3.5rem - var(--header-height));
  }

  .routeInfoList,
  .predictionList 
  {
    height: auto;
  }
  
  #mapDiv {
    position: absolute;
    top: var(--header-height);
    height: calc(100% - var(--header-height));

    /* Move over the width of the trip list and then calc the width */
    width: calc(100% - 400px);
    left: 400px;
  }

  .dropdownMask {
    height: calc(100% - var(--header-height));
    width: 100%;
    top: var(--header-height);
    left: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 100;
  }
}

@media screen and (max-width: 768px) {
  .routesButtonText {
    display: none;
  }

  .predictionList{
    background: white !important;
  }

  .bannerMessagesContainer {
    max-height: 3.9rem;
    overflow: hidden;
  }
}

@media screen and (min-height: 428px) and (min-width: 768px) {
  .geoLocateControl {
    bottom: 125px;
  }
}

@media screen and (max-height: 428px) and (max-width: 768px) {
  #mapDiv,
  .bannerMessage {
    visibility: hidden;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {}