/* ========================================================================== */
/* GLOBAL SETTINGS */
/* ========================================================================== */

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#main {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

/* ========================================================================== */
/* MAIN PANELS */
/* ========================================================================== */
#top-panel {
  /* width: 24rem; */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main-panel {
  flex: 1;

  position: relative;

  padding-top: 1rem;
  padding-bottom: 1rem;
}

.panel {
  padding: 1rem;
}

/* ========================================================================== */
/* MAIN CONTAINERS */
/* ========================================================================== */
#map-container {
  padding: 0;
  margin: 0;
  width: 100%;

  /* Height must be a 'fixed' value for Drupal integration. Using 'vw' rather than vh for better aspect ratio. */
  /* Not using 'aspect-ratio' for better browser support. */
  /* This fixed height allows scrollbar to be visible when there are many mid points. */
  height: 50vw;
}

.major-container {
  padding: 1rem;
}

#location-inputs-container {
  display: flex;
  flex-direction: column;
}

.location-input-container {
  display: flex;
  flex-direction: row;
}

.location-geocoder-container {
  flex: 1;
  width: 100%;

  display: flex;
  flex-direction: column;
}

.location-input-inner-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#start-location-input-container {
  padding-bottom: 0 !important;
}

#mid-points-container {
  padding: 1rem 0;
}

.mid-point-container {
  padding: 0.5rem 0;
}

#end-location-input-container {
  padding-top: 0 !important;
}

.mid-points-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  width: 12rem;

  margin-left: 2rem;

  padding-top: 1rem !important;
  padding-bottom: 0 !important;
}

#start-location-input-container .mid-points-button-container {
  padding-top: 2rem !important;
}

.start-point-label {
  margin-bottom: 1rem;
  font-weight: bold;
}

.end-point-label {
  margin-bottom: 1rem;
  font-weight: bold;
}

.mid-point-label {
  padding-left: 0.5rem;
  margin-bottom: 0px;
}

.mid-point-button {
  display: flex;
  flex-direction: row;
  align-items: center;

  cursor: pointer;
}

.mid-point-button-disabled {
  cursor: initial;
  filter: contrast(0%);
}

.mid-point-button p {
  margin: 0;
}

.mid-point-button img {
  margin-right: 4px;
  width: 1rem;
}

#location-address-panel {
  flex: 1;

  padding: 1rem 1rem 0 1rem;
}

#buttons-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.geocoder-container {
  display: flex;
  flex-direction: row;
  align-items: center;

  flex: 1;

  border: 1px solid #a6a6a6;
  border-radius: 3px;

  margin-left: 0.5rem;

  /* For the initial state before widget is ready. */
  height: 40px;
}

/* ========================================================================== */
/* GEOCODER */
/* ========================================================================== */
.geocoder {
  width: 100%;
  max-width: unset;
  box-shadow: unset;
  height: 100%;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

#start-geocoder-container {
  z-index: 999;
}

#mid-point-1-geocoder-container {
  z-index: 998;
}

#mid-point-2-geocoder-container {
  z-index: 997;
}

#mid-point-3-geocoder-container {
  z-index: 996;
}

#mid-point-4-geocoder-container {
  z-index: 995;
}

#mid-point-5-geocoder-container {
  z-index: 994;
}

#mid-point-6-geocoder-container {
  z-index: 993;
}

#mid-point-7-geocoder-container {
  z-index: 992;
}

#mid-point-8-geocoder-container {
  z-index: 991;
}

#mid-point-9-geocoder-container {
  z-index: 990;
}

#end-geocoder-container {
  z-index: 899;
}

/* ========================================================================== */
/* LOCATION INFO */
/* ========================================================================== */
#location-address-container {
  display: flex;
  flex-direction: column;
}

#location-address-text {
  margin: 0;
}

#location-address-icon {
  width: 2rem;
  height: 2rem;
}

.location-address-hint {
  margin-top: 1rem;
  padding-left: 0.5rem;
}

#location-address-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.location-address-background {
  background-color: #f8f8f8;
  padding: 0.25rem;
}

/* ========================================================================== */
/* MISCELLANEOUS */
/* ========================================================================== */
.gone {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

.mandatory-field::after {
  content: " *";
  color: red;
}

/* ========================================================================== */
/* BUTTONS & ICONS */
/* ========================================================================== */
.pin-button {
  width: 2.5rem;
  height: 2.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  border: 1px solid #a6a6a6;
  border-radius: 3px;

  position: relative;
}

.mid-point-pin-button {
  width: 2.5rem;
  height: 2.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  position: relative;

  /* border: 1px solid #a6a6a6;
  border-radius: 3px; */
}

.mid-point-pin-button-clicked {
  width: 2.5rem;
  height: 2.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  position: relative;
}

.mid-point-pin-button-clicked::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  width: 50%;
  height: 2px;
  background-color: #666666;
}

#start-pin-button {
  background-color: white;
}

#end-pin-button {
  background-color: white;
}

#start-pin-button-clicked {
  background-color: white;
}

#end-pin-button-clicked {
  background-color: white;
}

#start-pin-button-clicked::before {
  content: "";
  position: absolute;
  top: 2.7rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #008a07;
}

#end-pin-button-clicked::before {
  content: "";
  position: absolute;
  top: 2.7rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #b81237;
}

.pin-image {
  width: 2.25rem;
  height: 2.25rem;
}

.mid-point-image-container {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mid-point-image {
  width: 1.75rem;
  height: 1.75rem;
}

#reset-button {
  align-self: flex-end;
  padding: 0.45em;
}

.main-button {
  font-size: 1rem;
  font-weight: 700;

  width: 12rem;
  height: 2.5rem;

  background-color: #004375;
  color: white;
  padding: 0.75rem 0;
  border: none;
  border-radius: 3px;

  margin-left: 2rem;

  text-align: center;

  cursor: pointer;
}

.secondary-button {
  font-size: 1rem;
  font-weight: 700;

  height: 2.5rem;

  background-color: white;
  color: #004375;
  padding: 0.75rem;
  border: 1px solid #d5d5d5;
  border-radius: 3px;

  text-align: center;

  cursor: pointer;
}

.start-marker-image {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedlimitsmap/res/pin-start-letter.svg");
  background-size: cover;
  width: 56px;
  height: 64px;
  top: -22px;
  cursor: pointer;
}

.end-marker-image {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedlimitsmap/res/pin-end-letter.svg");
  background-size: cover;
  width: 56px;
  height: 64px;
  top: -22px;
  cursor: pointer;
}

.mid-point-marker-image {
  /* background-image: url("res/iconmonstr-circle-2.svg"); */
  background-image: url("res/pin-mid-point-lighter.svg");
  background-size: cover;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/* ========================================================================== */
/* MAPBOX OVERRIDES */
/* ========================================================================== */
.mapboxgl-ctrl-top-right {
  /* Make sure the start location suggestions dropdown will go over this. */
  z-index: 0;
}

#map-container
  .mapboxgl-ctrl
  button.mapboxgl-ctrl-fullscreen
  .mapboxgl-ctrl-icon {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedlimitsmap/res/maximize-svgrepo-com.svg");
  background-size: 18px 18px;
}

#map-container .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedlimitsmap/res/minimize-svgrepo-com.svg");
  background-size: 18px 18px;
}

.form__error-message.midpoint {
  margin: 0.625rem 3em 0;
}

#speedLimitEndError.hide-error,
#speedLimitStartError.hide-error,
.form__error-message.midpoint.hide-error {
  display: none;
}

#map-container a.mapboxgl-ctrl-logo {
  background-size: auto;
}

/* ========================================================================== */
/* SCREEN RESPONSIVENESS */
/* ========================================================================== */
@media only screen and (max-width: 600px) {
  #main {
    display: flex;
    flex-direction: column;
  }

  #top-panel {
    /* order: 2; */

    width: unset;

    /* flex: 1; */
  }

  #main-panel {
    /* order: 1; */

    height: 50%;

    flex: unset;

    padding: 1rem;
  }

  #map-container {
    height: 50vh;
  }

  .location-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #mid-points-container {
    padding: 1rem;
  }

  .mid-points-button-container {
    margin-left: 0;
  }

  .major-container {
    padding: 0;
  }

  #first-search-widget-container {
    max-width: calc(100% - 2.5rem); /* Fixes overlfow issue with Galaxy Fold. */
  }

  #buttons-container {
    padding: 1rem 0;
  }

  #reset-button {
    width: 100%;
    margin-left: 0;
    margin-top: 2rem;
  }
}

/* ========================================================================== */
/* SMALL DEVICES LANDSCAPE MODE */
/* ========================================================================== */
@media only screen and (max-height: 600px) and (orientation: landscape) {
  .panel {
    padding: 0.5rem;
  }

  .major-container {
    padding: 0.5rem;
  }

  #main-panel {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ========================================================================== */
/* ULTRA WIDE SCREEN */
/* ========================================================================== */
/* Following Drupal's media query for wide screen configuration. */
@media (min-width: 1200px) {
  #map-container {
    height: 800px;
  }
}