.cursor-pointer{
    cursor: pointer;
}

/* for special pages */
button[type=submit]:disabled,
input[type=submit]:disabled{
    border-color: rgb(186,188,189);
    color: rgb(186,188,189);
    background:none ;
    cursor: default ;
}

.multiple-maps .map-title {
    padding: 14px 50px 10px 50px;
    font-size: 0.85rem;
}

.map-legend ul li {
    display: block;
}

.hidden {
    display: none;
}

.mb-6 {
    margin-bottom: 5em;
}

.palette-sample {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 0 0 0;
    border-radius: 3px;
    vertical-align: middle;
}

.palette-color-1 {
    background-color: #ee8308;
}

.palette-color-2 {
    background-color: #c3cad8;
}

.palette-color-3 {
    background-color: #77c7ff;
}

/* changed input arrows */
.custom-number-switch-edited{
    position: relative;
}
.custom-number-switch-edited input[readonly]{
    background-color: #fff;
}
.custom-number-switch-edited a{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #00205a;
    font-size: 30px;
}
.custom-number-switch-edited a.increment {
    right: 1%;
}
.custom-number-switch-edited a.decrement {
    left: 1%;
}

/* other css */
.select2-selection__rendered{
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}
#forecast-on-map-form .custom-control {
    margin-bottom: 0;
}



/* MEDIA */

/*@media screen and ( max-width: 991px ){*/

/*}*/
/*@media screen and ( max-width: 1199px ){*/

/*}*/
/*@media screen and ( max-width: 1500px ){*/
/*    label {*/
/*        font-size: 1.2rem;*/
/*    }*/
/*}*/



/* ===== Keyboard Navigation Styles ===== */
/* Skip link for screen readers */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 4px;
}

.skip-to-main:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.main-navigation {
    position: relative;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
    display: inline-block;
}

.main-navigation > ul > li {
    margin-right: 20px;
}

.main-navigation a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.main-navigation a:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.1);
}

/* Submenu styles */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation ul ul li {
    display: block;
    width: 100%;
}

.main-navigation ul ul a {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
}

.main-navigation ul ul a:last-child {
    border-bottom: none;
}

/* Show submenu on hover (normal behavior) */
.main-navigation li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
    z-index: 10;
}

/* Ensure normal hover behavior works even with existing styles */
.main-header .main-navigation > ul > li:hover > ul {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    z-index: 10;
    display: block;
}

/* Show submenu for keyboard navigation only */
.main-navigation li.keyboard-open > ul,
.main-navigation ul[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: block !important;
    z-index: 10 !important;
}

/* Override existing hover styles only for keyboard navigation */
.main-header .main-navigation > ul > li.keyboard-open > ul,
.main-header .main-navigation > ul > li > ul[role="menu"][aria-hidden="false"] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    z-index: 10 !important;
    display: block !important;
}

/* Even more specific selectors to ensure keyboard navigation works */
body .main-header .main-navigation > ul > li.keyboard-open > ul,
body .main-header .main-navigation > ul > li > ul[role="menu"][aria-hidden="false"] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    z-index: 10 !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* Maximum specificity to override any existing styles - only for keyboard */
html body .main-header .main-navigation > ul > li.keyboard-open > ul,
html body .main-header .main-navigation > ul > li > ul[role="menu"][aria-hidden="false"] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    z-index: 10 !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* Enhanced submenu styling */
.main-navigation ul ul {
    border-radius: 4px;
    overflow: hidden;
}

.main-navigation ul ul li {
    border-bottom: 1px solid #f0f0f0;
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul a {
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: #f8f9fa;
    color: #007bff;
}

/* Focus styles for keyboard navigation */
.main-navigation a[aria-haspopup="true"]:focus {
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 4px;
}

.main-navigation ul[role="menu"] a:focus {
    background-color: #007bff;
    color: #fff;
    outline: none;
}

/* Ensure submenu items are properly styled when visible */
.main-navigation ul[aria-hidden="false"] a {
    opacity: 1;
    visibility: visible;
}

/* Hide submenu items when not accessible */
.main-navigation ul[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

/* Force show when aria-hidden is false */
.main-navigation ul[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        border: none;
        background-color: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    
    .main-navigation ul ul li {
        display: block;
    }
    
    .main-navigation ul ul a {
        padding: 8px 0 8px 20px;
        border-bottom: 1px solid #eee;
    }
}

/*:root {*/
/*    --phone: 576px;*/
/*    --tablet: 768px;*/
/*    --desktop: 992px;*/
/*    --widescreen: 1200px;*/
/*    --color-white: #fff;*/
/*    --color-black: #000;*/
/*    --color-grey: #999;*/
/*    --color-blue: #39f;*/
/*    --main-text-color: dark-blue;*/
/*    --font-sans-serif: "Poppins", sans-serif;*/
/*    --font-serif: "Poppins", serif;*/
/*    --base-background-color: var(--color-white);*/
/*    --base-font-family: var(--font-sans-serif);*/
/*    --base-font-size: 1.6rem;*/
/*    --base-line-height: 1.2;*/
/*    --base-text-color: var(--main-text-color);*/
/*    --base-min-width: 320px;*/
/*    --base-link-color: var(--color-blue);*/
/*    --btn-color: var(--color-white);*/
/*    --btn-background: var(--color-blue);*/
/*    --btn-padding: 0.4em 0.7em;*/
/*    --btn-font-size: 1.6rem;*/
/*    --btn-font-family: var(--font-sans-serif);*/
/*    --form-font-family: var(--font-sans-serif);*/
/*    --form-element-padding: var(--btn-padding);*/
/*    --form-element-border-color: var(--color-grey);*/
/*    --form-element-focus-border-color: var(--main-text-color);*/
/*    --placeholder-color: var(--color-grey);*/
/*    --headings-font-family: var(--font-sans-serif);*/
/*    --headings-color: var(--base-text-color);*/
/*    --headings-sizes-h1: 3rem;*/
/*    --headings-sizes-h2: 2.7rem;*/
/*    --headings-sizes-h3: 2.4rem;*/
/*    --headings-sizes-h4: 2.1rem;*/
/*    --headings-sizes-h5: 1.7rem;*/
/*    --headings-sizes-h6: 1.5rem*/
/*}*/