/* 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;
}
/* remove arrows on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.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;  
}

.waypoint-container {
  display: flex;
  flex-direction: column;
  background-color:#F7F7F7;
  min-height: 50vh;
  height:auto;
  width:calc((50vw - 1.5rem));
  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:#f7f7f7; 
}

/* Route Info Container */
.waypoint-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 .route-info-subsection {
  font-family:'Roboto',sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:10px 1rem 10px 1rem;
  border:1px solid #c0c0c0;
}
.waypoint-container .subsection-header {
  width:100%;
  height:50px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:500;
  border-bottom:1px solid #c0c0c0;
  background-color:#eee;
  color:#2c2c2c;
}
.waypoint-container .general-route-info-div{
  width:85%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  margin:0.75rem;
}
.waypoint-container .general-route-info-div p{
  margin:0;
  font-size:20px;
}
.waypoint-container ul {
  width:100%;
  margin:0;
  list-style-type: none;
  padding: 1rem;
}
.waypoint-container li {
  margin-bottom: 20px;
  padding:10px;
  border:1px solid #c0c0c0;
}
.waypoint-container li .waypoint-li-header{
  display:flex;
  align-items:center;
  justify-content:left;
  gap:10px;
}
.waypoint-container li .letter{
  height:30px;
  width:30px;
  border-radius:100%;
  border:1px solid #c5221f;
  background-color:#ea4336;
  color:white;
  font-size:18px;
  font-weight:550;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.waypoint-container li .title{
  font-size:22px;
  font-weight:500;
  margin:0;
}
.waypoint-container li .waypoint-li-info{
  font-size:18px;
  font-weight:400;
  color:#3e3e3e;
  margin-left:45px;
}


/* 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;
  }
}
@media (max-width: 950px) {
  .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;
  }
}