.textDarkGreen {
  color: #004d33;
}
#mapNavBar {
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
}
#baseMapSelector{
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  bottom: 7rem;
}
#openBtn {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.map {
  width: 100%;
  height: 100vh;
}
.ol-zoom {
  left: auto !important;
  right: 1rem !important;
}

/* style for layer form */
.layerForm {
  position: absolute;
  background: white;
  padding: 0.8rem;
  border-radius: 8px;
  top: 1rem;
  left: 0.8rem;
  width: 20rem;
  min-height: 50vh;
  max-height: 90vh;
  overflow-y: scroll;
}
.chartDataForm {
  display: none;
  position: absolute;
  background: white;
  padding: 0.8rem;
  border-radius: 8px;
  top: 1rem;
  left: 0.8rem;
  width: 20rem;
  min-height: 50vh;
  max-height: 90vh;
  overflow-y: scroll;
}
.chartDataFormWTL {
  /* display: none; */
  position: absolute;
  background: white;
  padding: 0.8rem;
  border-radius: 8px;
  top: 1rem;
  left: 0.8rem;
  width: 20rem;
  min-height: 50vh;
  max-height: 90vh;
  overflow-y: scroll;
}
.reportForm {
  display: none;
  position: absolute;
  background: white;
  padding: 0.8rem;
  border-radius: 8px;
  top: 1rem;
  left: 0.8rem;
  width: 20rem;
  height: 90vh;
  max-height: 90vh;
  overflow-y: scroll;
}
.formHeading {
  font-size: 18px;
  font-weight: 700;
  text-decoration: underline;
}
.atag {
  text-decoration: none;
}

#layerForm {
  display: none;
  accent-color: #004d33 !important;
}
.navActiveBtn {
  background-color: aquamarine !important;
  color: #263238 !important;
  
  border-radius: 4px;
  padding: 1px;
}
/* Rotate the icon */
/* Rotate the icon */
.rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.arrowIcon {
  transition: transform 0.3s ease;
}

/* Smooth transition for opening and closing */
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.content.open {
  max-height: 500px; /* Arbitrary large value, adjust based on your content */
}

/* Custom checkbox */
.custom-checkbox {
  display: inline-block;
  width: 16px;
  height: 16px;
 
  border-radius: 4px;
  margin-right: 10px;
 
  position: relative;
  cursor: pointer;
}

.toggleLegendContainer {
  display: flex;
  align-items: center;
}
.toggleLegendContainer h6 {
  margin: 0px;
  padding: 0px;
}

#optionDiv {
  display: none;
  transition: max-height 0.5s ease-in-out;
}
#optionDiv2 {
  display: none;
  transition: max-height 0.5s ease-in-out;
}
#optionDiv3 {
  display: none;
  transition: max-height 0.5s ease-in-out;
}
/* #optionDiv1 {
  display: none;
  transition: max-height 0.5s ease-in-out;
} */

.hidden {
  display: none;
}

.textSm {
  font-size: 10px;
}
.hr {
  margin: 0.3rem 0 !important;
}
.darkGreenBtn {
  background-color: #263238;
  color: #8dfec4;
  margin: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 4px 0px;
}
.darkGreenBtn:hover {
  background-color: #617076;
    color: #8dfec4;
}
.grayBtn {
  background-color: #617076;
  color: #8dfec4;
  margin: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 4px 0px;
}
.lightGreenBtn {
  color: #263238;
  background-color: #8dfec4;
  margin: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 4px 0px;
  border: 1px solid #263238;
}
.lightGreenBtn:hover{
background-color: #617076;
  color: #8dfec4;
}
.chartDataForm select {
  box-shadow: 0px 1px 3px 1px #00000026;

  box-shadow: 0px 1px 2px 0px #0000004d;
  outline: none !important;
  padding: 4px;
  border-radius: 6px !important;
  color: #37723b;
}
.chartDataFormWTL select {
  box-shadow: 0px 1px 3px 1px #00000026;

  box-shadow: 0px 1px 2px 0px #0000004d;
  outline: none !important;
  padding: 4px;
  border-radius: 6px !important;
  color: #37723b;
}
#indices_select {
  box-shadow: 0px 1px 3px 1px #00000026;

  box-shadow: 0px 1px 2px 0px #0000004d;
  outline: none !important;
  padding: 4px;
  border-radius: 6px !important;
  color: #37723b;
  width: 100%;
}
.reportForm select {
  box-shadow: 0px 1px 3px 1px #00000026;

  box-shadow: 0px 1px 2px 0px #0000004d;
  outline: none !important;
  padding: 4px;
  border-radius: 6px !important;
  color: #37723b;
}
#chartContainer {
  display: none;
  position: absolute;
  background: white;
  padding: 0.8rem;
  border-radius: 8px;
  top: 1rem;
  right: 0;
  width: 35vw;
  height: 90vh;
  max-height: 90vh;
  overflow-y: scroll;
}
.chartSelector {
  width: 100%;
  display: flex;
  justify-content: center;
}
.chartSelector button {
  width: 32%;

  font-weight: 600;
  font-size: 18px;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 1px #00000026;
  margin: 0px 4px;
  padding: 6px 0px;
  box-shadow: 0px 1px 2px 0px #0000004d;
}
.chartSelector button:hover {
  background-color: #004d33;
  color: white;
}
.selectedChatOption {
  background-color: #004d33;
  color: white;
}
#chartDiv {
  border: 1px solid black;
  min-height: 90%;
  margin-top: 8px;
  /* display: none ; */
  overflow-x: scroll !important;
}
#landuseChatDiv{
  border: 1px solid black;
    height: 90%;
    margin-top: 8px;
}
#advSelectionDiv {
  display: none;
}

#hotspotLoader{
  height: 30px;
  width: 30px;
}

#centerLineLoader{
  height: 30px;
  width: 30px;
  display: none;
}
#bankLineLoader {
  height: 30px;
  width: 30px;
  display: none;
}
#landUseLoader{
  height: 30px;
    width: 30px;
    display: none;
}

.yearlyChartWarningDiv{
  width: 100%;
  height: 100%;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.yearlyChartWarningDiv p{
  color: #004d33;
  text-align: center;
  font-weight: bold;
}
.yearlyChartWarningDiv img{
  width: 60px;
  height: 60px;
  margin: #004d33;
}
.yearlyChartWarningDiv h1 {
 font-size: 1rem;
 font-weight: bolder;
 color: #004d33;
 text-align: center;
}

.MonsoonDataDiv{
  width: 100%;
    height: 100%;
  
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 1rem;
}

.MonsoonDataDiv div{
  padding: 1rem;
  width: 100%;
    border: 2px solid #004d33;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bolder;
  color: #004d33;

}
.MonsoonDataDiv span{
  margin-left: 4px;
}

input[type='radio'] {
  accent-color: #004d33;
}

#monthSelectLabel{
  display: none;

}
#monthSelect{
  display: none;
}

#monthlyControlDiv{
  display: none;
}

/* Scrolling text animation */
.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  animation: scroll-left 10s linear infinite;
  /* Adjust duration for speed */
}

@keyframes scroll-left {
  from {
    transform: translateX(100%);
    /* Start from outside the container on the right */
  }

  to {
    transform: translateX(-100%);
    /* Move to outside the container on the left */
  }
}