:root {
    --bg-img: url('/images/bg2.png');
    --bg-pos: center top !important; /* remove !important; use top so tiling starts at top edge */
    --bg-size: 100vw auto !important; /* scale image to viewport width, keep aspect ratio */
    --bg-repeat: repeat-y !important; /* repeat vertically */
}

body {
    background: var(--bg-img) var(--bg-repeat) var(--bg-pos);
    background-size: var(--bg-size);
    background-color: #F1F1F1;
    color: #001E57;
    font-family: 'Inter', sans-serif;
    margin: 0;                     /* avoid default body margins creating gaps */
}

.clear-search {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem; /* Make the "X" bigger */
    color: #001E57; /* Make the "X" blue */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 3200; /* Ensure the button stays on top */
}

    .clear-search:focus {
        outline: none;
    }
.select2-selection__clear{
    display:none;
}
.form-switch {
    margin-bottom: 20px;
}
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}



.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* Custom styles for search bar with looking glass */
.input-group {
    position: relative;
}

    .input-group .form-control {
        padding-left: 2.5rem;
        padding-right: 2.5rem; /* Adjust padding to make space for the clear button and search icon */
        border-radius: 24px !important;
        border-color: #001E57;
        transition: box-shadow 0.3s ease;
        z-index: 3; /* Ensure the input stays below the prepend */
    }

        .input-group .form-control:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 3;
        }
        .input-group .form-control:focus {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 3;
        }
    .input-group .input-group-prepend:hover {
        z-index: 7;
    }

    .input-group .input-group-prepend:focus {
        z-index: 7;
    }
    .input-group .input-group-append:hover {
        z-index: 7;
    }

    .input-group .input-group-append:focus {
        z-index: 7;
    }

    .input-group .input-group-prepend {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 7;
    }
    .input-group .input-group-append {
        position: absolute; /* Keep it positioned relative to the input group */
        right: -20px; /* Align it to the right of the input field */
        top: 75%; /* Vertically center it */
        transform: translateY(-50%); /* Adjust for vertical centering */
        z-index: 7; /* Ensure it stays above other elements */
    }
    .input-group .input-group-apend {
        z-index: 7;
    }

        .input-group .input-group-prepend .input-group-text {
            background: transparent;
            border: none;
            padding: 0;
        }

            .input-group .input-group-prepend .input-group-text i {
                font-size: 1.5rem;
                color: #001E57; /* Blue color for the icon */
            }


    
    .header-content {
    text-align: center;
}

    .header-content h1 {
        font-size: 2.5rem;
    }

    .header-content h2 {
        font-size: 1.5rem;
    }

header {
    background-color: #001E57;
}
.header {
    position: relative;
    background-color: #001E57;
    color: white;
    padding: 20px 0;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-img) no-repeat var(--bg-pos);
        background-size: var(--bg-size);
        opacity: 0.05;
        z-index: 1;
    }

    header > * {
        position: relative;
        z-index: 2;
}

.header-top {
    background-color: rgba(2, 22, 57, 0.5); 
    padding: 10px 20px;
    color: white;
}

    .header-top .language-links a {
        font-size: 0.775rem; 
        margin-left: 10px; 
    }


.header-top2 {
    background-color: #CE0003;
    padding: 10px 20px;
    color: white;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
}

    .header-top2 .language-links a {
        font-size: 0.775rem;
        margin-left: 10px;
    }


.header2-background {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
    width: 100%;
    color: white;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}
.header-background {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 440px;
    width: 100%;
    color: white;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

.header-content {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

    .header-content h1 {
        font-size: 2.5rem;
    }

    .header-content h2 {
        font-size: 1.5rem;
    }
.custom-input {
    border-radius: 24px;
    height: 48px;
    transition: box-shadow 0.3s ease;
    z-index:3;
}

    .custom-input:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

.custom-button2 {
    background: url('/images/filter.svg') no-repeat center center;
    background-size: contain; /* Ensure the image fits within the button */
    border: none; /* Remove any border */
    width: 48px; /* Replace with the actual width of filter.png */
    height: 48px; /* Replace with the actual height of filter.png */
    border-radius: 50%; /* Ensure the button is round */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow effect */
    z-index: 3;
}
    .custom-button2:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a subtle shadow on hover */
    }

.custom-button3 {
    background: url('/images/uporedi.svg') no-repeat center center;
    background-size: contain; /* Ensure the image fits within the button */
    width: 129px; /* Match the width of the image */
    height: 48px!important; /* Match the height of the image */
    border: none; /* Remove any border */
    border-radius: 29px; /* Remove rounding to match the image */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
    z-index: 3;
}
.custom-button3:disabled {
    background: url('/images/uporediDisabled.svg') no-repeat center center;
    background-size: contain; /* Ensure the image fits within the button */
    width: 129px; /* Match the width of the image */
    height: 48px!important; /* Match the height of the image */
    border: none; /* Remove any border */
    border-radius: 29px; /* Remove rounding to match the image */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
    z-index: 3;
}
    .custom-button3:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow on hover */
        transition: box-shadow 0.3s ease; /* Smooth transition for the shadow effect */
    }

.pin-icon {
    font-size: 24px;
    cursor: pointer;
}
.nav-buttons {
    position: relative;
    top: -29px; 
    z-index:3;
}

    .nav-buttons .col-auto {
        display: flex;
        justify-content: center;
    }

.custom-button {
    background-color: #F1F1F1;
    border: 1px solid #021639;
    color: #021639;
    border-radius: 48px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 10px; 
}

    .custom-button:hover {
        background-color: #F1F1F1;
        border: 1px solid #021639;
        border-radius: 50px;
        color: #021639;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.divider-text:before,
.divider-text:after {
    color: white;
    content: "";
    flex: 1;
    border-bottom: 1px solid #555;
    margin: auto 0.25rem;
    box-shadow: 0 -2px;
}
.no-padding {
    padding: 0 !important;
}
.accordion-button::after {
    content: url('/images/arrowDown.svg'); /* Replace with the path to your custom arrow SVG */
    transform: rotate(0deg); /* Default rotation */
    transition: transform 0.3s ease; /* Smooth rotation */
    position: relative; /* Ensure positioning is relative */
    right: 20px; /* Move 10px to the left from the right side */
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg); /* Rotate when expanded */
    position: relative; /* Ensure positioning is relative */
    right: 20px; /* Move 10px to the left from the right side */
}
.custom-rect {
    width: 100%;
    background-color: #FFFFFF;
    border: 0.5px solid #001E57;
    border-radius: 20px;
}

.custom-rect-table {
    width: 100%;
    background-color: #FFFFFF;
    border: 0.5px solid #001E57;
    border-radius: 20px;
}
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}



.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

html {
    position: relative;
    min-height: 100%;
}



.badge {
    background-color: rgba(189, 116, 24, 0.6);
    color: white;
}

.text-warning {
    color: #BD7418 !important;
}

.text-secondary {
    color: #425F4B !important;
}

.text-primary {
    color: #192E2F !important;
}

.text-success {
    color: #4b7147 !important;
}

.bg-primary {
    background-color: #192E2F !important;
}

.bg-secondary {
    background-color: #3A595C !important;
}

bg-success {
    background-color: #4b7147 !important;
}



.card {
    border-color: #425F4B !important;
}



/* btn-outline-primary */

.btn-outline-primary {
    color: #192E2F;
    border-color: #192E2F;
}



    .btn-outline-primary:hover {
        color: #fff;
        background-color: #192E2F;
        border-color: #192E2F;
    }



    .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
    }



    .btn-check:checked + .btn-outline-primary,
    .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
        color: #fff;
        background-color: #192E2F;
        border-color: #192E2F;
    }



        .btn-check:checked + .btn-outline-primary:focus,
        .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
        }



    .btn-outline-primary:disabled, .btn-outline-primary.disabled {
        color: #192E2F;
        background-color: transparent;
    }


.btn-outline-warning {
    color: #C07b24;
    border-color: #C07b24;
}



    .btn-outline-warning:hover {
        color: #fff;
        background-color: #C07b24;
        border-color: #C07b24;
    }



    .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
    }

    .btn-check:checked + .btn-outline-warning,
    .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
        color: #fff;
        background-color: #C07b24;
        border-color: #C07b24;
    }



        .btn-check:checked + .btn-outline-warning:focus,
        .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
        }



    .btn-outline-warning:disabled, .btn-outline-warning.disabled {
        color: #C07b24;
        background-color: transparent;
    }



.btn-outline-secondary {
    color: #134b5f;
    border-color: #134b5f;
}



    .btn-outline-secondary:hover {
        color: #fff;
        background-color: #134b5f;
        border-color: #134b5f;
    }



    .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
    }



    .btn-check:checked + .btn-outline-secondary,
    .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
        color: #fff;
        background-color: #134b5f;
        border-color: #134b5f;
    }



        .btn-check:checked + .btn-outline-secondary:focus,
        .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
        }



    .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
        color: #134b5f;
        background-color: transparent;
    }




/* btn-primary */

.btn-primary {
    color: #fff;
    background-color: #192E2F;
    border-color: #192E2F;
}



    .btn-primary:hover {
        color: #fff;
        background-color: #445f5e;
        border-color: #445f5e;
    }



    .btn-check:focus + .btn-primary, .btn-primary:focus {
        color: #fff;
        background-color: #445f5e;
        border-color: #445f5e;
        box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
    }



    .btn-check:checked + .btn-primary,
    .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #445f5e;
        border-color: #445f5e;
    }



        .btn-check:checked + .btn-primary:focus,
        .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
        }



    .btn-primary:disabled, .btn-primary.disabled {
        color: #fff;
        background-color: #445f5e;
        border-color: #445f5e;
    }


.btn-danger {
    color: #fff;
    background-color: #CA1929;
    border-color: #CA1929;
}



    .btn-danger:hover {
        color: #fff;
        background-color: #b84743;
        border-color: #ae423f;
    }



    .btn-check:focus + .btn-danger, .btn-danger:focus {
        color: #fff;
        background-color: #d9534f;
        
        border-color: #d9534f;
        
        box-shadow: 0 0 0 0.25rem rgba(223, 109, 105, 0.5);
    }



    .btn-check:checked + .btn-danger,
    .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active,
    .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #b84743;
        border-color: #b84743;
    }



        .btn-check:checked + .btn-danger:focus,
        .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus,
        .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(223, 109, 105, 0.5);
        }



    .btn-danger:disabled, .btn-danger.disabled {
        color: #fff;
        background-color: #b84743;
        border-color: #b84743;
    }





.btn-secondary {
    color: #fff;
    background-color: #134b5f;
    border-color: #134b5f;
}



    .btn-secondary:hover {
        color: #fff;
        background-color: #1a6985;
        border-color: #1a6985;
    }



    .btn-check:focus + .btn-secondary, .btn-secondary:focus {
        color: #fff;
        background-color: #1a6985;
        border-color: #1a6985;
        box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
    }



    .btn-check:checked + .btn-secondary,
    .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active,
    .show > .btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: #1a6985;
        border-color: #1a6985;
    }



        .btn-check:checked + .btn-secondary:focus,
        .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
        }



    .btn-secondary:disabled, .btn-secondary.disabled {
        color: #fff;
        background-color: #1a6985;
        border-color: #1a6985;
    }




.btn-warning {
    color: #fff;
    background-color: #BD7418;
    border-color: #BD7418;
}



    .btn-warning:hover {
        color: #fff;
        background-color: #c6883a;
        border-color: #c6883a;
    }



    .btn-check:focus + .btn-warning, .btn-warning:focus {
        color: #fff;
        background-color: #c6883a;
        border-color: #c6883a;
        box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
    }



    .btn-check:checked + .btn-warning,
    .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active,
    .show > .btn-warning.dropdown-toggle {
        color: #fff;
        background-color: #c6883a;
        border-color: #c6883a;
    }



        .btn-check:checked + .btn-warning:focus,
        .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus,
        .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
        }



    .btn-warning:disabled, .btn-warning.disabled {
        color: #fff;
        background-color: #c6883a;
        border-color: #c6883a;
    }





.btn-outline-success {
    color: #4b7147;
    border-color: #4b7147;
}



    .btn-outline-success:hover {
        color: #fff;
        background-color: #4b7147;
        border-color: #4b7147;
    }



    .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
    }



    .btn-check:checked + .btn-outline-success,
    .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
        color: #fff;
        background-color: #4b7147;
        border-color: #4b7147;
    }



        .btn-check:checked + .btn-outline-success:focus,
        .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
            box-shadow: 0 0 0 0.25rem rgba(25, 46, 47, 0.5);
        }



    .btn-outline-success:disabled, .btn-outline-success.disabled {
        color: #4b7147;
        background-color: transparent;
    }




/* btn-primary */

.btn-success {
    color: #fff;
    background-color: #4b7147;
    border-color: #4b7147;
}



    .btn-success:hover {
        color: #fff;
        background-color: #578553;
        border-color: #578553;
    }



    .btn-check:focus + .btn-success, .btn-success:focus {
        color: #fff;
        background-color: #578553;
        border-color: #578553;
        box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
    }



    .btn-check:checked + .btn-success,
    .btn-check:active + .btn-success, .btn-success:active, .btn-success.active,
    .show > .btn-success.dropdown-toggle {
        color: #fff;
        background-color: #578553;
        border-color: #578553;
    }



        .btn-check:checked + .btn-success:focus,
        .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus,
        .show > .btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(60, 60, 60, 0.5);
        }



    .btn-success:disabled, .btn-success.disabled {
        color: #fff;
        background-color: #578553;
        border-color: #578553;
    }

.select2-container {
    z-index: 4; /* Adjust the value as needed */
    width:100%!important;
}

    /* Adjust z-index for select2 dropdown */
    .select2-container .select2-dropdown {
        z-index: 3050 !important;
    }

    /* Adjust z-index for select2 results */
    .select2-container .select2-results {
        z-index: 6; /* Adjust the value as needed */
    }

    /* Custom styles for select2 to match search input */
.custom-select2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    height: 48px !important; /* Smaller height */
    width: 100% !important;
    display: flex;
    align-items: center;
    border-radius: 24px !important;
    border: 1px solid #001E57 !important; /* Increased border width to 2px */
}
.select2-selection__rendered {
    line-height: 48px !important;
}
.select2-selection__arrow {
    display: none !important;
}
.custom-select2:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

    .custom-select2:focus {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .custom-select2 .select2-selection__rendered {
        line-height: 36px; /* Center the text vertically */
        padding-left: 0; /* Remove default padding */
    }

    .custom-select2 .select2-selection__arrow {
        height: 36px; /* Match the height of the search input */
        right: 10px; /* Adjust the position of the arrow */
    }

/* Switch images when site.js sets data-ui-script on <html> */

/* default (Cyrillic) — keep existing */
.custom-button3 {
    background: url('/images/uporedi.svg') no-repeat center center;
    background-size: contain;
}

/* disabled state (Cyrillic) */
.custom-button3:disabled,
.custom-button3.disabled {
    background: url('/images/uporediDisabled.svg') no-repeat center center;
    background-size: contain;
}

/* Accordion arrow default (Cyrillic) */
.accordion-button::after {
    content: url('/images/arrowDown.svg');
}

/* LATINICA variants: create latin SVG files (examples: uporedi_latn.svg, uporediDisabled_latn.svg, arrowDown_latn.svg)
   and the rules below will automatically apply when site.js sets data-ui-script="latn" on <html>. */
html[data-ui-script="latn"] .custom-button3 {
    background: url('/images/uporediLat.svg') no-repeat center center;
    background-size: contain;
}
html[data-ui-script="latn"] .custom-button3:disabled,
html[data-ui-script="latn"] .custom-button3.disabled {
    background: url('/images/uporediDisabledLat.svg') no-repeat center center;
    background-size: contain;
}
html[data-ui-script="latn"] .accordion-button::after {
    content: url('/images/arrowDown.svg');
}

/* ensure cyrl explicitly if you need (optional) */
html[data-ui-script="cyrl"] .custom-button3 {
    background: url('/images/uporedi.svg') no-repeat center center;
    background-size: contain;
}
html[data-ui-script="cyrl"] .custom-button3:disabled,
html[data-ui-script="cyrl"] .custom-button3.disabled {
    background: url('/images/uporediDisabled.svg') no-repeat center center;
    background-size: contain;
}
html[data-ui-script="cyrl"] .accordion-button::after {
    content: url('/images/arrowDown.svg');
}

/* overrides to ensure interactive elements sit above overlays */
.rounded-table .ustanova-select,
.rounded-table .opstina-filter {
    position: relative; /* needed for z-index to apply */
    z-index: 3000; /* place above most page overlays */
}

/* Ensure select2 dropdown renders above everything (important) */
.select2-container,
.select2-container--open {
    z-index: 3050 !important;
}
.select2-container--open .select2-dropdown {
    z-index: 3100 !important;
}

/* Indicator / details panels should not block clicks on other content when hidden */
#toggleDiv, #indicatorResults, #ustanovaDiv {
    position: relative;
    z-index: 2000;
}

#indicatorResultsTable a,
#indicatorResultsTable a:link,
#indicatorResultsTable a:visited,
#indicatorResultsTable a.btn-link,
#indicatorResultsTable button.btn-link {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

    #indicatorResultsTable a:hover,
    #indicatorResultsTable a:focus,
    #indicatorResultsTable button.btn-link:hover,
    #indicatorResultsTable button.btn-link:focus {
        color: inherit !important;
        text-decoration: none !important;
        outline: none !important;
    }

/* Ensure clickable cursor */
#indicatorResultsTable td a,
#indicatorResultsTable td button {
    cursor: pointer;
}

/* Highlight entire row on hover while preserving existing alternating background */
#indicatorResultsTable tbody tr:hover td {
    background-color: #e9f2ff !important; /* light blue highlight */
}

/* Also slightly emphasize button text on hover without underline */
#indicatorResultsTable button.btn-link:hover {
    font-weight: 600;
}

.form-check-input {
    position: relative; /* enables z-index */
    z-index: 1000;
}

/* If the issue is limited to the indicator panel, scope it */
#toggleDiv .form-check-input {
    position: relative;
    z-index: 2000; /* even higher within the panel */
}

/* Optional: make the label clickable above overlays too */
.form-check-label {
    position: relative;
    z-index: 1000;
}

/* Responsive tables: prevent overflow on small screens, enable horizontal scroll and wrap long content */
#ustanovaDiv, #indicatorResults {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

#ustanovaDiv table, #indicatorResultsTable {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto; /* let columns size naturally */
}

#ustanovaDiv td, #ustanovaDiv th, #indicatorResultsTable td, #indicatorResultsTable th {
    white-space: normal; /* allow wrapping */
    word-break: break-word; /* break long words */
    overflow-wrap: anywhere; /* aggressive wrap for long strings */
    min-width: 0; /* allow cells to shrink in flex/stacking contexts */
}

/* On very small screens make table render as block (works with overflow-x) */
@media (max-width: 576px) {
    #ustanovaDiv table, #indicatorResultsTable {
        display: block;
    }
}