html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(53, 54, 63);
}

#map { 
    width: 100%;
    height: 100vh; /* Height of the container (80% of viewport height minus 20 pixels for top and bottom space) */
    z-index: 1;
    overflow: hidden;
    /*padding: 10px;  /*Optional padding inside the container */
}
/* Medium screens, typically landscape-oriented phones and small tablets */
/* @media only screen and (min-width: 360px) and (max-width: 932px) {
  #map { 
    width: 100%;
    height: calc(100vh - 50.8px);
    margin-bottom: 50.8px;
    z-index: 1;
  }
} */

.region-labels {
    background-color: rgb(82, 82, 82);
    border: transparent;
    box-shadow: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
}

#ui{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: rgb(53, 54, 63);
  z-index: 2;
}

#segmentCtn{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(19, 21, 22, 0.98);
  z-index: 10;
}

.segmentGallery{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 30px;
  overflow: auto;
}

.segmentThumb{
  flex: 1 1 50%;
  max-width: 500px;
  min-width: 100px;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: transform 0.3s ease; /* Smooth transition */
}

.segmentText{
  max-width: 500px;
  height: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 500; /* Medium weight */
  font-size: 150%;
  color: white;
}

.segmentThumb:hover {
  transform: scale(1.05); /* Scale up to 110% */
}

.segmentClosebutton{
  position: fixed;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  border: none;
  background-color: rgb(19, 21, 22, 0.98);
  transition: transform 0.3s ease;
}

.segmentClosebutton svg {
  fill: white; /* Make the SVG element white */
}

.segmentClosebutton svg path {
  stroke: rgba(255, 255, 255, 0.774); /* Ensure the path inside the SVG is white */
  stroke-width: 2; /* Adjust stroke width if needed */
}

.segmentClosebutton:hover {
  background-color: rgba(38, 38, 39, 0.516); /* Scale up to 110% */
}


/* CSS to style the button */
/* .button-container {
    position: relative;
    bottom: 0px;
    left: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    height: 43px;
    transform: translateX(-50%) scale(1,1);
    column-gap: 10px;
    z-index: 10;
} */

/* .button-container button {
    background-color: #116dcec5; 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    border-radius: 5px; 
    width: 190px;
    max-width: 190px;
    font-size: 12px
} */

.button-container {
  position: absolute;
  bottom: 5px;
  left: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  height: 39px;
  column-gap: 10px;
  transform: translateX(-50%) scale(1,1);
  z-index: 3;
}

.studyArea {
  width: 130px;
  height: 39px;
  background-size: cover;
  cursor: pointer;
  transition: background-image 0.3s ease; /* Smooth transition on hover */
}

#East {
  background-image: url("../Data/ui/btn_30east_off.png"); /* Initial image for image1 */
}

#West {
  background-image: url("../Data/ui/btn_30west_off.png"); /* Initial image for image2 */
}

#North {
  background-image: url("../Data/ui/btn_31north_off.png"); /* Initial image for image3 */
}

#South {
  background-image: url("../Data/ui/btn_31south_off.png"); /* Initial image for image3 */
}

/* Dropdown Button */
.ProjectType {
  position: relative;
  top: 0px;
  left: 0px;
  width: 131px;
  height: 39px;
  margin-bottom: 5px;
  background-size: cover;
  transition: background-image 0.3s ease; /* Smooth transition on hover */
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown-East{
  position: relative;
  display: inline-block;
}

.dropdown-West{
  position: relative;
  display: inline-block;
}

.dropdown-North{
  position: relative;
  display: inline-block;
}

.dropdown-South{
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content-east{
  display: none;
  position: absolute;
  bottom: 100%;
  min-width: 131px;
  min-height: 80px;
  background-size: cover;
  background-color: rgb(53, 54, 63);
  border-radius: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content-west{
  display: none;
  position: absolute;
  bottom: 100%;
  min-width: 131px;
  min-height: 80px;
  background-size: cover;
  background-color: rgb(53, 54, 63);
  border-radius: 10px;
}

.dropdown-content-north{
  display: none;
  position: absolute;
  bottom: 100%;
  min-width: 131px;
  min-height: 80px;
  background-size: cover;
  background-color: rgb(53, 54, 63);
  border-radius: 10px;
}

.dropdown-content-south{
  display: none;
  position: absolute;
  bottom: 100%;
  min-width: 131px;
  min-height: 80px;
  background-size: cover;
  background-color: rgb(53, 54, 63);
  border-radius: 10px;
}

/* Show the dropdown menu on hover */
.dropdown-East:hover .dropdown-content-east {display: block;}

/* Show the dropdown menu on hover */
.dropdown-West:hover .dropdown-content-west {display: block;}

/* Show the dropdown menu on hover */
.dropdown-North:hover .dropdown-content-north {display: block;}

/* Show the dropdown menu on hover */
.dropdown-South:hover .dropdown-content-south {display: block;}

.Segments {
  background-image: url('../Data/ui/btn_3segments_off.png');
}

.Segments:hover {
  background-image: url('../Data/ui/btn_3segments_ovr.png');
}

.Segments.active{
  background-image: url('../Data/ui/btn_3segments_on.png');
}

.Intersection {
  background-image: url('../Data/ui/btn_2intersection_off.png');
}

.Intersection:hover {
  background-image: url('../Data/ui/btn_2intersection_ovr.png');
}

.Intersection.active{
  background-image: url('../Data/ui/btn_2intersection_on.png');
}

/* #East:hover {
  background-image: url("../Data/ui/btn_30east_on.png"); 
  cursor: pointer; 
}

#West:hover {
  background-image: url("../Data/ui/btn_30west_on.png"); 
  cursor: pointer; 
}

#North:hover {
  background-image: url("../Data/ui/btn_31north_on.png"); 
  cursor: pointer; 
}

#South:hover {
  background-image: url("../Data/ui/btn_31south_on.png");
  cursor: pointer; 
} */

#userGuide {
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: 90px;
  height: 90px;
  background-size: cover;
  transition: background-image 0.3s ease; /* Smooth transition on hover */
  background-image: url("../Data/ui/help_btn_off.png");
  z-index: 10;
  cursor: pointer;
}

/* @media only screen and (max-width: 375px){
  .button-container {
    transform: translate(-50%, -10%)  scale(0.55);
  }

  #userGuide{
    position: absolute;
    transform: translate(-40%, 0%) scale(0.45)
  }
}

@media only screen and (min-width: 428px){
  .button-container {
    transform: translate(-50%, -10%)  scale(0.6,0.6);
  }

  #userGuide{
    position: absolute;
    transform: translate(-20%, 0%) scale(0.5)
  }
}

@media only screen and (min-width: 600px){
  .button-container {
    transform: translate(-50%, -10%)  scale(0.8,0.8);
  }

  #userGuide{
    position: absolute;
    transform: translate(-20%, 0%) scale(0.65)
  }
}*/
@media only screen and (min-width: 50px) and (max-width: 375px){
  .button-container {
    transform: translate(-50%, 40%)  scale(0.45,0.45);
  }
  #userGuide{
    position: absolute;
    transform: translate(-40%, 30%) scale(0.35)
  }
  #ui{
    transform: translate(0%, 40%) scale(1, 0.6);
  }

  .segmentThumb{
    flex: 1 1 30%;
    max-width: 200px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 428px){
  .button-container {
    transform: translate(-50%, 30%)  scale(0.55,0.55);
  }
  #userGuide{
    position: absolute;
    transform: translate(-40%, 25%) scale(0.4)
  }
  #ui{
    transform: translate(0%, 30%) scale(1, 0.6);
  }
  .segmentThumb{
    flex: 1 1 30%;
    max-width: 200px;
  }
} 

@media only screen and (min-width: 428px) and (max-width: 600px){
  .button-container {
    transform: translate(-50%, 20%)  scale(0.7,0.7);
  }
  #userGuide{
    position: absolute;
    transform: translate(-30%, 20%) scale(0.5)
  }
  #ui{
    transform: translate(0%, 20%) scale(1, 0.7);
  }
  .segmentThumb{
    flex: 1 1 45%;
    max-width: 200px;
  }
} 

@media only screen and (min-width: 600px) and (max-width: 768px){
  .button-container {
    transform: translate(-50%, 20%)  scale(0.8,0.8);
  }
  #userGuide{
    position: absolute;
    transform: translate(-20%, 5%) scale(0.8)
  }
  #ui{
    transform: translate(0%, 20%) scale(1, 0.8);
  }
  .segmentThumb{
    flex: 1 1 45%;
    max-width: 250px;
    min-width: 100px;
  }
} 

@media only screen and (min-width: 768px) and (max-width: 992px){
  .button-container {
    transform: translateX(-50%)  scale(0.9,0.9);
  }
  .segmentThumb{
    flex: 1 1 50%;
    max-width: 300px;
  }
}

 @media only screen and (min-width: 992px) and (max-width: 1200px){
  .button-container {
    transform: translateX(-50%)  scale(1, 1);
  }
  .segmentThumb{
    flex: 1 1 50%;
    max-width: 400px;
  }
}

/* @media only screen and (min-width: 275px){
  .button-container {
    transform: translate(-50%, -10%)  scale(0.45);
  }

  #userGuide{
    position: absolute;
    transform: translate(-40%, 0%) scale(0.40)
  }
}  */

/* Change color of dropdown links on hover */
/* .button-container button:hover {background-color:#3e8e41;} */

.driver-popover.driverjs-theme {
  background-color: #fabe57;
  border: solid #104a86;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #104a86;
  z-index: 2;
}

.driver-popover.driverjs-theme button {
    background-color: #104a86;
    text-shadow: none;
    color: #ffffff;
    border: solid #104a86;
}

.driver-popover.driverjs-theme button:hover {
    background-color: #3e8e41;
    border: solid #3e8e41;
  }

  .driver-popover.driverjs-theme .driver-popover-close-btn {
    color: #104a86;
    background-color:  #fabe57;
    border: none;
  }

  .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
    color: #3e8e41;
    background-color:  #fabe57;
    border: none;
  }