#cookieBanner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: rgba(60, 60, 60, 0);
    padding: 10px;
    border-radius: 8px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    color: var(--title-color);
    border: none;
    width: 100%;
}

.cookies {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background-color: var(--header-background-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: fit-content;
    border-radius: 12px;
    padding: 12px;
}

.cookieTitle {
    color: var(--title-color);
}

.cookies>button {
    margin-left: 12px;
}

select {
    color: var(--secondary-title-color);
    /* must be here */
    appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='currentColor'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.75rem;
    background-size: 1em;

    color: var(--secondary-title-color);
    /* must be here */
    padding-right: 2.5rem;
    border: none;
    border-radius: 2px;
    margin-right: 2rem;
    padding: 1rem;
}


.checkbox-wrapper-51 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Ensure the wrapper takes up full width */
}

.checkbox-wrapper-51 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-51 .title {
    margin-right: 10px;
    flex-grow: 1;
    /* Allow label to take up available space */
    white-space: nowrap;
    /* Prevent text wrapping */
}

.checkbox-wrapper-51 .toggle {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkbox-wrapper-51 .toggle:before {
    content: "";
    position: relative;
    top: 0px;
    left: 1px;
    width: 40px;
    height: 22px;
    display: inline-block;
    background: var(--border-color);
    border-radius: 12px;
    transition: background 0.2s ease;
    margin-right: 4px;
}

.checkbox-wrapper-51 .toggle span {
    position: absolute;
    top: -1;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
    background: #f9f9f9;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.checkbox-wrapper-51 .toggle span svg {
    margin: 7px;
    fill: none;
}

.checkbox-wrapper-51 .toggle span svg path {
    stroke: var(--border-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: all 0.5s linear;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle:before {
    background: var(--accent-color);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle span {
    transform: translateX(18px);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle span path {
    stroke: var(--accent-color);
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
}



.dangerZone {
    background-color: var(--danger-zone-background-color);
}

.dangerZone:hover {
    background-color: var(--danger-zone-hover-background-color);
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.modal-content {
    background-color: var(--modal-background-color);
    margin: 15% auto;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    max-width: 90%;
}

.modalDescription {
    color: var(--secondary-title-color);
    margin-bottom: 12px;
    text-align: center;
}

.modalButtons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.modalSettings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--button-background-color);
    padding: 24px;
    margin: 12px;
    border-radius: 8px;

}

.modalSettings>div>div>div {
    margin-top: 12px;
    margin-bottom: 12px;
}

h3>.fa-solid {
    margin-right: 5px;
}

.modalSettings {
    color: var(--secondary-title-color);
}

input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.options,
#language {
    margin-top: 6px;
    margin-bottom: 6px;
}



.blue {
    background-color: #007aff;
}
.green {
    background-color: #4cd964;
}
.red {
    background-color: #ff3b30;
}
.purple {
    background-color: #5856d6;
}

.colorOptions>label>span {
    display: inline-block;
    padding: 0.3em 0.3em;
    margin: auto -5 auto 8;
    border-radius: 50%;
}

.showMenuNoAnimation{
    display: flex;
}










input[type="radio"]:checked+label {
    background-color: var(--background-color);
}