body {
    transition: all 0.3s ease;
}

#accessibilityToggle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #ff601e;
    color: white;
    border-radius: 8px 0 0 8px;
    padding: 10px 12px;
    z-index: 1000;
    cursor: pointer;
    text-align: center;
}

    #accessibilityToggle:hover {
        background-color: #005d9c;
    }

   /* #accessibilityToggle span {
        font-size: 12px;
        display: block;
        margin-top: 4px;
    }*/

#accessibilityPanel {
    position: fixed;
    top: 50%;
    right: -410px;
    transform: translateY(-50%);
    max-width: 410px;
    width: 100%;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px 0 0 15px;
    transition: right 0.4s ease;
    z-index: 999;
}

    #accessibilityPanel.active {
        right: 0px;
    }

.option-btn {
    background-color: #f5f6fb;
    border: 2px solid #a7b8c3;
    color: #195c9f;
    border-radius: 15px;
    padding: 5px 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .option-btn i {
        font-size: 18px;
        display: block;
        margin-bottom: 0px;
    }

    .option-btn .check-icon {
        position: absolute;
        top: -4px;
        left: -4px;
        background-color: #7c4dff;
        color: white;
        border-radius: 50%;
        padding: 2px;
        height: 25px;
        width: 24px;
        font-size: 10px;
        display: none;
    }

    .option-btn.active .check-icon {
        display: inline-block;
    }

    .option-btn.active {
        background-color: #efe8ff;
        box-shadow: 0 0 8px rgba(124, 77, 255, 0.4);
    }

    .option-btn small.step-label {
        font-size: 8px;
        /* display: block; */
        color: #555;
        margin-top: 4px;
    }

body.bigger-text-1 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    font-size: 16px !important;
}

body.bigger-text-2 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    font-size: 18px !important;
}

body.bigger-text-3 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    font-size: 20px !important;
}

body.bigger-text-4 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    font-size: 22px !important;
}

body.text-spacing-1 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

body.text-spacing-2 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    letter-spacing: 0.1em !important;
    word-spacing: 0.2em !important;
}

body.text-spacing-3 :not(#accessibilityPanel):not(#accessibilityPanel *) {
    letter-spacing: 0.15em !important;
    word-spacing: 0.3em !important;
}


/*---*/
body.dyslexia-font *:not(#accessibilityPanel *) {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

body.dark-mode {
    background-color: #1e1e1e !important;
    color: #eee !important;
}

    body.dark-mode a {
        color: #90caf9 !important;
    }


    body.dark-mode .top-head {
        background-color: #1e1e1e !important;
        color: #eee !important;
    }

    body.dark-mode .header-bg {
        background-color: #1e1e1e !important;
        color: #eee !important;
        background: none;
    }

    body.dark-mode .main-content, body.dark-mode .bg-wrapper {
        background-color: #1e1e1e !important;
        color: #eee !important;
        background: none;
    }

body.highlight-links a {
    background-color: yellow !important;
    padding: 2px 4px;
    border-radius: 3px;
}
/*---*/
.accessibilityHeader {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    justify-content: space-between;
    background-color: #195c9f;
    color: white;
}

.accessibilityBody {
    padding: 15px;
}

.accessibilityHeader button {
    background: transparent;
    border: 0;
}

.accessibilityHeader > button > i {
    color: white;
    font-size: 21px;
    font-weight: 500;
}

/* Hide Images */
body.hide-images img:not(#accessibilityPanel *) {
    display: none !important;
}

.custom-cursor *:not(#accessibilityPanel *):not(#accessibilityToggle *) {
    cursor: url("data:image/svg+xml,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='29.188px' height='43.625px' viewBox='0 0 29.188 43.625' enable-background='new 0 0 29.188 43.625' xml:space='preserve'><g><polygon fill='%23FFFFFF' stroke='%23D9DAD9' stroke-width='1.1406' stroke-miterlimit='10' points='2.8,4.549 26.847,19.902 16.964,22.701 24.239,37.749 18.278,42.017 9.741,30.724 1.138,35.809 '/><g><g><g><path fill='%23212627' d='M29.175,21.155c0.071-0.613-0.165-1.253-0.635-1.573L2.165,0.258c-0.424-0.32-0.988-0.346-1.435-0.053C0.282,0.497,0,1.03,0,1.617v34.171c0,0.613,0.306,1.146,0.776,1.439c0.471,0.267,1.059,0.213,1.482-0.16l7.482-6.344l6.847,12.155c0.259,0.48,0.729,0.746,1.2,0.746c0.235,0,0.494-0.08,0.706-0.213l6.988-4.585c0.329-0.213,0.565-0.586,0.659-1.013c0.094-0.426,0.024-0.88-0.188-1.226l-6.376-11.382l8.611-2.745C28.705,22.274,29.105,21.768,29.175,21.155z M16.964,22.701c-0.424,0.133-0.776,0.506-0.941,0.96c-0.165,0.48-0.118,1.013,0.118,1.439l6.588,11.781l-4.541,2.985l-6.894-12.315c-0.212-0.373-0.541-0.64-0.941-0.72c-0.094-0.027-0.165-0.027-0.259-0.027c-0.306,0-0.588,0.107-0.847,0.32L2.8,32.59V4.549l21.599,15.806L16.964,22.701z'/></g></g></g></g></svg>") 10 10, auto !important;
}

/* Invert Colors */
html.invert-colors {
    filter: invert(1) !important;
    background-color: inherit !important;
}