/* -------------------------
    Basic styling for overlays
------------------------- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1001;
    overflow-y: auto;
}

.overlay .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

body.high-contrast .overlay,
body.white-text-mode .overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

body.high-contrast .overlay .close-button,
body.white-text-mode .overlay .close-button {
    background-color: #BDF24B !important;
    color: #000 !important;
}

#details-content {
    position: relative;
    background-color: white;
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    border-radius: 5px;
}

body.high-contrast #details-content,
body.white-text-mode #details-content {
    background-color: #333 !important;
    color: #FFF !important;
    border: 1px solid #BDF24B !important;
}

.tab-buttons {
    display: flex;
}

.tab-button {
    padding: 10px 20px;
    border: none;
    background-color: #eee;
    color: #333;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
}

body.high-contrast .tab-button,
body.white-text-mode .tab-button {
    background-color: #555 !important;
    color: #BDF24B !important;
    border: 1px solid #BDF24B !important;
}

.tab-button .active {
    background-color: #ddd;
}

body.high-contrast .tab-button.active,
body.white-text-mode .tab-button.active {
    background-color: #BDF24B !important;
    color: #000 !important;
}

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

body.high-contrast .tab-content,
body.white-text-mode .tab-content {
    border: 1px solid #BDF24B !important;
    background-color: #333 !important;
    color: #FFF !important;
}


.tab-content .paragraph-bold {
    padding-top: 2%;
}

.tab-content.active {
    display: block;
}

ul {
    /* Remove default browser indentation */
    padding-left: 0;
    margin-left: 0;
    /* Ensure the bullet is part of the content box */
    list-style-position: inside;
}

 li {
    /* Ensure list items do not inherit or apply extra indentation */
    margin-left: 0;
    padding-left: 0;
}

/* Style for the cookie details list */
#cookie-details-list li {
    margin-bottom: 10px;
}

#cookie-details-list strong {
    font-weight: bold;
}

/* Style for the cookie cookie-settings */
.switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.7rem;
    margin-bottom: 1rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 1.7rem;
}

body.high-contrast .slider,
body.white-text-mode .slider {
    background-color: #555 !important;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.3rem;
    width: 1.3rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: green;
}

body.high-contrast input:checked+.slider,
body.white-text-mode input:checked+.slider {
    background-color: #BDF24B !important;
}


input:focus+.slider {
    box-shadow: 0 0 0.1rem #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(1.5rem);
    -ms-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
}

.switch-label {
    margin-left: 0.8rem;
    vertical-align: middle;
    font-weight: bold;
    font-size: 0.9rem;
}

body.high-contrast .switch-label,
body.white-text-mode .switch-label {
    color: #FFF !important;
}