/* Error Handling */
.messages {
  padding: 0%;
  justify-items: center;
  margin-bottom: -1rem;
  margin-top:0;
}
.error-notification {
  font-size: 1.2rem;
  list-style-type: none;
  background-color: #C62828;
  padding: 5px;
  border: none;
  border-radius: 8px;
  width: 96%;
  margin-left:2%;
  margin-top:10px;
  color:white;
  font-family:'Roboto',sans-serif;
  text-indent: 12px;
}


/* Main Form and Map */
.main-container {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  gap: 1.5rem;
}

/* Main Form */
.routing-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #2E4756;
  width: 32rem;
  padding: 1.2rem;
  padding-top:2.4rem;
  border-radius: 8px;
  color: white;
  gap: 12rem;
}

.form-container {
  display: flex;
  position:relative;
  flex-direction: column;
  height:100%;
  gap: 1.5rem;
  font-family:'Roboto',sans-serif;
}

.last-form-area{
  /* needed to give room for buttons when accordians */
  margin-bottom:80px;
}

.accordion {
  border: 2px solid #779CAB;
  border-radius: 8px;
}

.accordion-header {
  background-color: #779CAB;
  padding: 10px;
  padding-left:15px;
  cursor: pointer;
  color: white;
  font-size: 18px;
  font-weight:600;
  border-radius:1px;
  display:flex;
  justify-content:space-between;
  align-items: center;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.show {
   display: block;
}

.accordion-header.open .dropdown-arrow-up{
  stroke:transparent;
}
.accordion-header.open .dropdown-arrow-down{
  stroke:white;
}
.form-inner-area{
  margin-bottom:6px;
}

.form-inner-text{
  padding-left:3px;
  margin-bottom:3px;
}
.button-container {
  position:absolute;
  bottom:10px;
  width:100%;
  display: flex;
  justify-content: space-between; /* Align items with space between them */
  gap:5px;
}

.form-button {
  width: 175px;
  height: 40px;
  font-size: 20px;
  font-weight:bold;
  border: none;
  border-radius: 8px;
  background-color:#29743E;
  color: white;
  cursor: pointer;
}
#resetButton{
  background-color: #779CAB;
}
.form-location-button {
  width: 175px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #29743E;
  color: white;
  cursor: pointer;
  margin-top: 15px;
}

.form-field {
  width: 100%;
  height: 35px;
  background-color: white; /* Dark grey background */
  color: black; /* White text */
  border: none;
  border-radius: 8px; /* Rounded corners */
  padding-left: 10px; /* Padding for text alignment */
  font-size: 14px; /* Adjust font size for readability */
  outline:none;
}

/* Map */
.map-container {
  min-height:600px;
  min-width:550px;
  /* 100vw - (main-container left/right padding, main-container gap, routing-container width) */
  width:calc(100vw - 36.5rem);
  /* 100vh - (navbar height) - (main-container top/bottom padding) */
  height: calc(100vh - 90px - 3rem);
  border: none;
}

/* Directions Tab */
.container {
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
  flex-wrap: wrap;
  flex-direction:row;
  gap: 1rem;
  padding:1rem;  
}

.route-info-container,
.waypoint-container {
  display: flex;
  flex-direction: column;
  background-color:#F7F7F7;
  min-height: 50vh;
  height:auto;
  width:calc((33.3vw - 1.34rem));
  min-width:330px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 6px #00000035;
}

.directions-container {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  border-radius: 8px;
  background-color:#2E4756;
  position:relative;
  overflow: hidden;
  height:75px;
  padding-right:2%;
}
#directions-container-header{
  font-family:'Roboto',sans-serif;
  font-size:26px;
  color:white;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  background: transparent; /* override .waypoint-container h1 */
  width: auto;
  height: auto;
  z-index: 1;
}
.toggleFSbutton{
  height:44px;
  border:none;
  cursor:pointer;
  padding-top:3px;
  background-color:transparent;
  margin-left:auto;
  position: relative;
  z-index: 2; /* keep toggle above header */
}
.toggleFSbutton:hover svg{
  transform-origin: center center;
  transform: scale(1.1);
}
.panel-border {
  border: none; /* Black border */
  height: 100%;
  overflow: auto;
  margin-left:1rem;
  margin-right:1rem;
}
/* directions tab fullscreened */
.waypoint-container.fullscreened .directions-container{
  border-radius:0;
}
.waypoint-container.fullscreened #panel{
  font-size:2.75vw;
}
.waypoint-container.fullscreened .adp-stepicon{
  width:50px;
  height:50px;
}
.waypoint-container.fullscreened .adp-stepicon .adp-maneuver{
  width:50px;
  height:50px;
  background:white; 
}

/* Waypoint Container and Route Info Container */
.waypoint-container h1,.route-info-container h1{
  font-family:'Roboto',sans-serif;
  font-size:26px;
  color: white;
  background-color:#2E4756;
  width:100%;
  height:75px;
  margin:0;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items: center;
}

.waypoint-container ul {
  list-style-type: none;
  padding: 1rem;
}

.waypoint-container li {
  background-color: #FEFEFE;
  margin-bottom: 10px;
  padding: 10px 15px;
  border:1px solid #2E4756;
  box-shadow: 0 1px 2px #00000024;
  font-family:'Roboto',sans-serif;
}

.route-info-container div{
  font-family:'Roboto',sans-serif;
  font-size:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-left:3rem;
  padding-right:3rem;
}

/* Spinner */
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* screensize */
@media (max-width: 1100px) {
  .main-container {
    padding-left: 0.5rem;
    padding-right:0.5rem;
    gap:0.5rem;
  }

  .routing-container {
    padding-left: 0.8rem;
    padding-right:0.8rem;
  }
  .route-info-container,.waypoint-container {
    width:calc(100% - 1rem);
  }
}
@media (max-width: 800px) {
  .main-container{
    flex-wrap:wrap;
  }
  .routing-container {
    width: 100%;
    max-width: none;
  }
  .map-container{
    width:100%;
    height:500px;
  }
}