:root {
    --color-navy-blue: #172E36;
    --color-navy-blue-light: #1E3B45;
    --color-blue-light: #C9D9DF;
    --color-teal-blue-ex-light: #538EA1;
    --color-teal-blue-light: #6FB0C5;
    --color-teal-blue: #357A90;
    --color-teal-blue-dark: #34778D;
    --color-crusta: #EF915C;
    --color-black-pearl: #102126;
    --color-beige: #F5DFD3;
    --color-navy-cyan: #214856;
    --color-grayish-blue: #527581;
    --color-onahau: #C7D7DD;
    --color-black: #0D1B1F;
    --color-blue-green: #7EA2AE;
    --color-gray-light: #F5F5F5;
    --color-gray-1x: #EFEFEF;
}

.remove-account {
    margin-top: 50px;
}

body .remove-account button {
    display: block;
    background-color: #8DAA91;
    border-radius: 10px;
    color: #453643;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    width: 100%;
    border: none;
    padding: 15px 0;
}

.theme-mode {
    margin: 0 0;
}

    .theme-mode .left {
        color: #000;
        font-size: 14px;
        padding-left: 0px;
    }

    .theme-mode .right {
    }

    .theme-mode .checkbox {
        opacity: 0;
        position: absolute;
    }

    .theme-mode .checkbox-label {
        background-color: var(--color-blue-light);
        width: 50px;
        height: 26px;
        border-radius: 50px;
        position: relative;
        padding: 5px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .theme-mode .checkbox-label i {
            color: var(--color-navy-blue-light);
        }

        .theme-mode .checkbox-label .ball {
            background-color: var(--color-crusta);
            width: 22px;
            height: 22px;
            position: absolute;
            left: 2px;
            top: 2px;
            border-radius: 50%;
            transition: transform 0.2s linear;
        }


    .theme-mode .checkbox:checked + .checkbox-label {
        background-color: var(--color-teal-blue-dark);
    }

        .theme-mode .checkbox:checked + .checkbox-label .ball {
            transform: translateX(24px);
            background-color: var(--color-crusta);
        }

        .theme-mode .checkbox:checked + .checkbox-label i {
            color: var(--color-onahau);
        }


    /*  Support me if you like it */
    .theme-mode .support {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

        .theme-mode .support a {
            color: #292c35;
            font-size: 32px;
            backface-visibility: hidden;
            display: inline-block;
            transition: transform 0.2s ease;
        }

            .theme-mode .support a:hover {
                transform: scale(1.1);
            }



body .logo {
    padding: 0px 20px 20px 20px !important;
}

    body .logo a {
       
        height: 48px;
        display: flex;
        align-items: start !important;
        -webkit-box-align: start !important;
        justify-content: left;
        border-radius: 10px;
    }

body.dark-theme .logo a {
    border-color: var(--color-teal-blue) !important;
}

.dark-theme, body.dark-theme .navigation #page {
    background-color: var(--color-navy-blue) !important;
}

body.dark-theme #page h1, body.dark-theme #page .page-content, body.dark-theme #voice .modal-content h3, body.dark-theme #voice .modal-content .content p, body.dark-theme #voice .modal-content .close-modal i, body.dark-theme #goto-sura .modal-content h3, body.dark-theme .form-group label, body.dark-theme #goto-sura .modal-content .close-modal i, body.dark-theme .mobile-search-content .search-content .row .title, body.dark-theme .mobile-search-content .search-content .row .close i {
    color: var(--color-gray-light);
}

body.dark-theme #goto-sura .modal-content .content .goto-btn a {
    background: var(--color-teal-blue);
    box-shadow: initial !important;
    color: var(--color-gray-light);
}

body.dark-theme #page .left-menu, body.dark-theme .mobile-search-content .search-content {
    background-color: var(--color-navy-blue-light);
}

    body.dark-theme #page .left-menu .app-markets {
        background: var(--color-navy-cyan) !important;
    }

body.dark-theme #page .right-content .top-menu {
    background-color: var(--color-navy-blue);
}

    body.dark-theme #page .right-content .top-menu h1 {
        color: var(--color-gray-light);
    }

body.dark-theme #page .sorting-content .text-button, body.dark-theme #page .sorting-content .text-button i, body.dark-theme #page .sorting-content span {
    color: var(--color-onahau);
}

body.dark-theme #page .right-content .sura-item {
    background-color: var(--color-navy-blue-light);
}

    body.dark-theme #page .right-content .sura-item .sorting {
        color: var(--color-onahau);
    }

    body.dark-theme #page .right-content .sura-item .name {
        color: var(--color-gray-light);
    }

    body.dark-theme #page .right-content .sura-item .verse-count {
        color: var(--color-blue-green);
    }

body.dark-theme .form-btn, body.dark-theme .form-btn i {
    background-color: var(--color-teal-blue) !important;
    color: var(--color-gray-light) !important;
}

    body.dark-theme .form-btn:hover, body.dark-theme .form-btn:hover i {
        background-color: var(--color-navy-cyan) !important;
        color: var(--color-gray-light) !important;
    }


body.dark-theme input {
    border: solid 1px var(--color-teal-blue);
}

body.dark-theme #page .right-content .top-menu .input-icon input, body.dark-theme #page .right-content .top-menu .input-icon input, body.dark-theme #page .right-content .top-menu .input-icon input::placeholder, body.dark-theme #page .right-content .top-menu .input-icon span i, body.dark-theme .form-control, body.dark-theme .form-control::placeholder, .dark-theme .app-header .input-icon input, body.dark-theme .app-form input {
    background: var(--color-navy-blue-light) !important;
    background-color: var(--color-navy-blue-light) !important;
    color: var(--color-gray-light) !important;
}

body.dark-theme .hints-content {
    background-color: var(--color-black-pearl) !important;
    color: var(--color-gray-light) !important;
    border-radius: 25px;
    margin-top: 15px;
}

body.dark-theme input:-webkit-autofill, body.dark-theme input:-webkit-autofill:hover, body.dark-theme input:-webkit-autofill:focus, body.dark-theme input:-webkit-autofill:active {
    background: var(--color-navy-blue-light) !important;
    background-color: var(--color-navy-blue-light) !important;
    color: var(--color-gray-light) !important;
}

body.dark-theme .commentary .col-6:first-child a {
    background-color: var(--color-navy-blue-light) !important;
    color: var(--color-gray-light) !important;
    border: solid 1px var(--color-teal-blue);
}

    body.dark-theme .commentary .col-6:first-child a:hover {
        background-color: var(--color-navy-cyan) !important;
        color: var(--color-gray-light) !important;
    }

body.dark-theme #page .left-menu .menu ul li.active:before {
    background-image: url(/assets/media/img/shape-dark.png);
    background-size: 20px 75px;
    height: 75px;
    width: 20px;
    position: absolute;
    left: -1px;
    top: -30px;
}

body.dark-theme .select2-container--default .select2-dropdown, body.dark-theme .select2-container--default .select2-dropdown input {
    background-color: var(--color-navy-blue-light);
    border: solid 1px var(--color-teal-blue);
    color: var(--color-gray-light);
}

body.dark-theme .select2-container .select2-selection {
    background-color: var(--color-navy-blue-light);
    border: solid 1px var(--color-teal-blue);
    color: var(--color-gray-light);
}

body.dark-theme #sura-detail .app-tools .title h1:after {
    background-color: var(--color-gray-light);
}

body.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered, body.dark-theme #sura-detail .app-tools .back-btn, body.dark-theme #sura-detail .app-tools .back-btn i, body.dark-theme #sura-detail .app-tools .title h1, body.dark-theme #sura-detail .app-tools .title span, body.dark-theme #sign-x .app-subcontent .back-btn, body.dark-theme #sign-x .app-subcontent .back-btn i, body.dark-theme #sign-x .app-subcontent h1, body.dark-theme .main-search-page .tabs-content .tab .title a small, body.dark-theme .main-search-page .tabs-content .tab .content {
    color: var(--color-gray-light);
}


body.dark-theme .select2-container--default .select2-results > .select2-results__options {
    background-color: var(--color-navy-blue-light);
    color: var(--color-gray-light);
}


body.dark-theme .select2-container--default .select2-results__option {
    background-color: var(--color-navy-blue-light);
    color: var(--color-gray-light);
}

body.dark-theme .select2-container--default .select2-results__option--highlighted {
    background-color: var(--color-teal-blue-ex-light);
    color: var(--color-gray-light);
}


.select2-container--default .select2-results > .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--color-teal-blue) var(--color-gray-light);
}

body.dark-theme .select2-container--default .select2-results > .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--color-teal-blue) var(--color-navy-blue-light);
}

body.dark-theme #sura-detail .app-content .item {
    background: var(--color-navy-blue-light);
    box-shadow: 0px 0px 20px 2px #1e3b45ba;
}

    body.dark-theme #sura-detail .app-content .item .arabic, body.dark-theme #sura-detail .app-content .item .content-text {
        color: var(--color-gray-light);
    }

        body.dark-theme #sura-detail .app-content .item .content-text span.footnote-dot small, body.dark-theme .main-search-page .tabs-content .tab .content span.footnote-dot small {
            background-color: var(--color-crusta);
            color: var(--color-navy-blue);
            font-weight: 700;
        }

body.dark-theme #sura-detail .app-content .back-item .item-1, body.dark-theme #sura-detail .app-content .back-item .item-2 {
    background: var(--color-navy-blue-light);
    box-shadow: 0px 0px 20px 2px #1e3b45ba;
}

body.dark-theme .copyright, body.dark-theme .copyright a {
    color: var(--color-gray-light);
}

body.dark-theme .modal-content {
    background-color: var(--color-black);
    color: var(--color-gray-light);
}

body.dark-theme #foote-note .modal-content h3, body.dark-theme #foote-note .modal-content .content p, body.dark-theme #forgotpass .modal-content h3, body.dark-theme #forgotpass .modal-content .close-modal i {
    color: var(--color-gray-light) !important;
}

body.dark-theme #foote-note .modal-content .close-modal i {
    color: var(--color-gray-light) !important;
}

body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting, body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-share, body.dark-theme .card, body.dark-theme .accordion.accordion-panel .card .card-header .card-title {
    background: var(--color-teal-blue);
    color: var(--color-gray-light) !important;
}

body.dark-theme .main-search-page .tabs-content .tab {
    background: var(--color-navy-blue-light);
    color: var(--color-gray-light) !important;
    box-shadow: initial !important
}

    body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting .word-header .text-left, body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting .word-set-item .text-left, body.dark-theme .main-search-page .tabs-content .tab .title a span, body.dark-theme .widget-modal .modal-content .content p, body.dark-theme .widget-modal .modal-content h3, body.dark-theme .widget-modal .modal-content .close-modal i {
        color: var(--color-gray-light) !important;
    }

body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting .word-set-item .text-right a span, body.dark-theme #st-1 .st-btn {
    background: var(--color-teal-blue-ex-light);
    border-color: var(--color-teal-blue-light);
}

    body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting .word-set-item .text-right a span i, body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-share .word-header .text-left, body.dark-theme .app-form label, body.dark-theme #sign-x .app-content .content .form-content .sign-contract a, body.dark-theme .app-form .underline, body.dark-theme #page .page-content .app-form .sign-contract a, body.dark-theme .text-dark, body.dark-theme #add-note .modal-content h3, body.dark-theme #add-note .modal-content .close-modal i, body.dark-theme .hint-item span, body.dark-theme #update-note .modal-content h3, body.dark-theme #update-note .modal-content .selected-text, body.dark-theme #update-note .modal-content .close-modal i, body.dark-theme #sign-x .verification-succ h1, body.dark-theme #sign-x .verification-succ p {
        color: var(--color-gray-light) !important;
    }

body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-setting:before, body.dark-theme #sura-detail .app-content .detail-menu div.menu-item .word-share:before {
    border-color: transparent transparent transparent var(--color-teal-blue);
}

body.dark-theme #sign-x .app-content .content {
    background-color: var(--color-navy-cyan);
}

body.dark-theme .app-switch {
    background: var(--color-navy-blue-light) !important;
}

body.dark-theme .main-search-page .tabs-content .tab .title .dot {
    background: var(--color-gray-light) !important;
}