@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

:root {
    --primary-color: #4B3000;
}

* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "Vazirmatn", sans-serif;
}

header {
    background: linear-gradient(to bottom, #fffeef 0%,#dedbb8 100%);
    height: 70px;
    display: flex;
    align-items: center;
    font-family: "Amiri", serif;
    font-weight: 700;
    font-size: 14px;
}

.body-content {
    min-height: calc(100vh - 70px);
    position: relative;
    z-index: 1;
}

header .container-fluid {
    max-width: 776px
}

.body-content .container-fluid, .header .navbar {
    padding-left: 60px;
    padding-right: 60px;
    margin: 0 auto
}

    .header .navbar > div {
        padding-left: 3rem;
    }
.header .dropdown-menu {
    min-width: 200px;
}

header select.custom-select {
    height: 28px;
    border: 1px solid #333;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    font-family: "Amiri", serif;
    font-weight: 700;
    font-size: 14px;
}

select.custom-select {
    background: #FFF url("../../images/polygon.png") no-repeat;
    background-position: calc(100% - 7px) center;
}

.juz {
    width: 95px;
    border: none;
    padding: 4px 10px;
    background-color: #FAFAFA;
    border-radius: 5px;
    direction:rtl;
}

.surah {
    border: none;
    padding: 4px 10px;
    background-color: #FAFAFA;
    border-radius: 5px;
    direction: rtl;
}

.safha {
    width: 62px
}

.sidebar {
    width: 350px
}

.nav-tabs {
    border: none;
    /*background: linear-gradient(to bottom, #FCF9D6 0%, #BCB671 100%);*/
    font-family: "Poppins", sans-serif;
    font-weight: 600
}

    .nav-tabs li {
        /*width: 50%;*/
    }

    .nav-tabs .nav-link {
        /*        width: 100%;
        height: 30px;
        padding: 0;
        line-height: 30px;
        font-size: 12px;
        border-radius: 0;
        border: none*/
    }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            /*            color: #FFF;
            background-color: #393838;
            border-color: #393838;*/
        }

.tab-content {
    /*    padding: 12px;
    background: #FFF;
    border: 1px solid #BDB772;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px*/
}

    .tab-content h2 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
    }

    .tab-content ul {
        list-style-type: none;
        padding: 0
    }

    .tab-content li {
        margin-bottom: 20px;
    }

.selection {
    font-size: 12px
}

    .selection select {
        width: 100%;
        height: 33px;
        border: 1px solid #333333;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
    }

.col.con > .form-row {
    /*    gap: 5px;*/
}

.row.main {
    gap: 12px
}

.body-content .form-row .col:nth-child(2) .qpage-con {
    border-radius: 0 0 6px 0;
}

.body-content .form-row .col:nth-child(1) .qpage-con {
    border-radius: 0 0 0 6px;
}

.qpage-con {
    background: #FFF;
    padding: 8px 0;
}

.dir-rtl {
    width: 250px;
    direction: rtl;
    padding: .375rem 0.75rem .375rem 1.75rem;
    background-position: 10px !important;
}

.qpage-foot {
    background: linear-gradient(to bottom, #FFFEEF 0%, #C7C288 100%);
    height: 29px;
    line-height: 29px;
    text-align: center;
    font-family: "Amiri", serif;
    font-weight: 700;
    font-size: 12px;
}

.heading {
    /*    background: linear-gradient(to bottom, #FCF9D6 0%, #BCB671 100%);*/
    background-color: #FFFBF8;
    height: 49px;
    box-shadow: 0px 0px 5px 0px #0000001A;
    padding: 0px 10px;
    display: flex;
    font-family: "Amiri", serif;
    font-weight: 700;
    font-size: 12px;
    align-items: center;
    border-bottom: 1px solid #0000001A
}

.navigation .dropdown-menu {
    background-color: #FAFAFA;
    box-shadow: 0px 0px 5px 0px #00000026;
    top: 50px;
    text-align: right;
    border-radius: 8px;
}

    .navigation .dropdown-menu a {
        font-weight: 400;
        font-size: 14px;
        color: #383433;
    }

.body-content .form-row .col:nth-child(1) .heading {
    border-radius: 6px 0 0;
}

.body-content .form-row .col:nth-child(2) .heading {
    border-radius: 0 6px 0 0;
}

@font-face {
    font-family: 'CoconNextRegular';
    src: url('../../fonts/Cocon/CoconNextRegular.eot');
    src: url('../../fonts/Cocon/CoconNextRegular.eot') format('embedded-opentype'), url('../../fonts/Cocon/CoconNextRegular.woff') format('woff'), url('../../fonts/Cocon/CoconNextRegular.ttf') format('truetype'), url('../../fonts/Cocon/CoconNextRegular.svg#CoconNextRegular') format('svg');
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('../../fonts/Lato-Regular.eot');
    src: url('../../fonts/Lato-Regular.eot') format('embedded-opentype'), url('../../fonts/Lato-Regular.woff') format('woff'), url('../../fonts/Lato-Regular.ttf') format('truetype'), url('../../fonts/Lato-Regular.svg#CoconNextRegular') format('svg');
}

body {
    background-color: #F0F0E6;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    z-index: 0;
    font-size: 14px;
    color: #666666 !important;
    letter-spacing: 0.5px;
    /*    min-height: 100vh;
    background: RGBA(241, 215, 104, 0.60) url("../../images/bg.png") repeat;*/
    font-family: 'Lato-Regular';
}

    body::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background-image: url('../../images/icons/quranexplorer/overlayimage.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
        opacity: 1;
        z-index: 0;
        pointer-events: none;
    }


section.filter {
    background: #C5A43C;
    min-height: 40px;
    margin-bottom: 0px;
    padding: 5px 0;
}

.form-control {
    min-width: 62px;
    font-family: 'CoconNextRegular';
    height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 28px;
    background-color: #FAFAFA;
    border-color: #FAFAFA;
    border-radius: 5px;
}

.filter label {
    color: #FFF;
}

.filter .search button {
    position: absolute;
    top: 7px;
    right: 10px;
    border: none;
    background: none;
    color: #C5A43C;
}

.content .form-row > * {
    padding: 0 !important;
}

.form-row > .con-col {
    display: flex;
    flex-direction: column;
    max-height: 692px
}

span[style="font-weight: bold;"] {
    margin-left: 5px
}

.yellow-box::-webkit-scrollbar {
    width: 10px;
}

.img-col.col-auto .img-con > div.imgarea.small-hidden {
    margin-right: 10px;
}

.imgarea.small-hidden.pg1pg2 {
    margin: 0 !important;
}

.highlightColor {
    background-color: #99E9BA !important;
}
/* Track */
.yellow-box::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.yellow-box::-webkit-scrollbar-thumb {
    background: rgb(197, 164, 60);
}

    /* Handle on hover */
    .yellow-box::-webkit-scrollbar-thumb:hover {
        background: rgb(197, 164, 60);
    }

.yellow-box {
    width: 100%;
    padding: 10px;
    flex-grow: 1;
    overflow: auto
}

    .yellow-box .con-list {
        background: #FFF;
        padding: 5px;
        margin-bottom: 5px
    }

section.content .container-fluid {
    padding: 0 5px
}

.player-area {
    height: 43px;
    width: 100%;
    background: url("../../images/bar.png") repeat-x;
    padding: 2px 0 0;
    position: relative;
    background-position: bottom;
    display: flex;
}

    .player-area > a {
        height: 25px;
        width: 25px;
        line-height: 25px;
        text-align: center;
        background: #F6E7A4;
        border-radius: 50%;
        border: 1px solid #D2B677;
        margin: 5px 10px;
    }

        .player-area > a i {
            color: #936F40;
            font-size: 18px;
            line-height: 25px
        }

    .player-area .d-flex {
        width: calc(100% - 70px)
    }

        .player-area .d-flex .col {
            display: flex;
            color: #F6EFD5;
            justify-content: space-between;
            line-height: 41px;
            padding: 0 25px;
            font-size: 13px;
            font-family: 'CoconNextRegular';
        }

    .player-area select {
        position: absolute;
        left: 15px;
        width: 150px;
        top: 6px;
        height: 30px;
    }

.small-visible {
    display: none
}

.img-col.col-auto {
    width: 890px;
}

    .img-col.col-auto .img-con {
        display: flex;
        background: #FFF;
    }

        .img-col.col-auto .img-con > div {
            flex: 0 0 50%;
            width: 50%;
        }

.topbar-content {
    display: flex;
    flex-wrap: wrap;
    background: #DDC783;
}

.radio-selections {
    width: auto;
    flex: 0 0 auto;
    padding: 5px 15px;
    color: #5A4D24;
    display: flex;
    font-size: 14px;
}

    .radio-selections input, .radio-selections span {
        display: inline-block;
        vertical-align: middle;
        font-weight: 500;
    }

    .radio-selections input {
        margin-right: 5px
    }

    .radio-selections > div {
        position: relative;
    }

    .radio-selections .radio-dropdowns {
        position: absolute;
        width: 400px;
        padding: 15px;
        background: #896237;
        left: 0;
        top: calc(100% + 10px)
    }

.right .radio-selections .radio-dropdowns {
    left: auto;
    right: 0;
}

.radio-selections .radio-dropdowns::before {
    content: "";
    height: 0;
    width: 0;
    border-bottom: 10px solid #896237;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
}

.right .radio-selections .radio-dropdowns::before {
    right: 15px;
}

.radio-selections .radio-dropdowns select {
    width: calc(45% - 10px);
    line-height: 36px;
    height: 36px !important;
    background: #FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23989898' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat;
    background-size: 12px;
    background-position: calc(100% - 11px) 12px;
    font-size: 14px;
    margin-right: 10px;
    display: inline-block;
    color: #968245;
}

    .radio-selections .radio-dropdowns select:last-child {
        margin-right: 0;
        width: 54%
    }

.labels {
    background: #C7AC6C;
    color: #FFF;
    padding: 5px 10px;
    margin: 0;
    font-size: 13px;
    flex-grow: 1;
    flex-basis: 0;
}

    .labels > span {
        display: inline-block
    }

.large-toggle-btn {
    margin-bottom: -32px;
    margin-top: 3px;
}

body .container .player .large-toggle-btn .play-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -14%;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 34px;
    width: 34px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}

    body .container .player .large-toggle-btn .play-btn:before {
        content: "\f04b";
        font: 1em/30px "FontAwesome";
        display: block;
        margin: 0 11px;
    }

body .container .player .large-toggle-btn .large-pause-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -13%;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 34px;
    width: 34px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}

    body .container .player .large-toggle-btn .large-pause-btn:before {
        content: "\f04c";
        font: 0.9em/32px "FontAwesome";
        display: block;
        margin: 0 auto;
    }


body .container .player .controls-box .previous-track-btn {
    cursor: pointer;
    display: inline-block;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 29px;
    width: 29px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
}

    body .container .player .controls-box .previous-track-btn:before {
        content: "\f049";
        font: 0.7em/25px "FontAwesome";
        display: block;
        margin: 0 7px;
    }

body .container .player .controls-box .next-track-btn {
    cursor: pointer;
    display: inline-block;
    background: #eac75a;
    background: -moz-linear-gradient(top, #eac75a 0%, #f2d786 12%, #ecead6 100%);
    background: -webkit-linear-gradient(top, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    background: linear-gradient(to bottom, #eac75a 0%,#f2d786 12%,#ecead6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac75a', endColorstr='#ecead6',GradientType=0 );
    height: 29px;
    width: 29px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #784E1A;
    color: #80541D;
    margin-left: 30px;
}

    body .container .player .controls-box .next-track-btn:before {
        content: "\f050";
        font: 0.7em/25px "FontAwesome";
        display: block;
        margin: 0 7px;
    }

.disabled {
    background: #d2ae63 !important;
    background: -moz-linear-gradient(top, #d2ae63 0%, #e0c278 12%, #b29773 100%) !important;
    background: -webkit-linear-gradient(top, #d2ae63 0%,#e0c278 12%,#b29773 100%) !important;
    background: linear-gradient(to bottom, #d2ae63 0%,#e0c278 12%,#b29773 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ae63', endColorstr='#b29773',GradientType=0 ) !important;
    border-color: #C09F59 !important;
    color: #885F2D !important;
    cursor: default !important;
    pointer-events: none !important;
}

.row.pgDivSelect, .row.pgDivSelectEven {
    position: relative;
    margin: 0;
    padding: 0 5px;
}

    .row.pgDivSelect > span, .row.pgDivSelectEven > span {
        min-width: 66px;
        background: #FFF url("https://dvx.innotech-sa.com/Quran/Master/Web/images/icons/QuranExplorer/angle-down.png") no-repeat;
        background-position: left;
        background-size: 20px;
        text-align:right
    }

    .row.pgDivSelect ul, .row.pgDivSelectEven ul {
        position: absolute;
        bottom: 60%;
        background: #FFF;
        list-style-type: none;
        left: 0;
        z-index: 100;
        border: 1px solid #ccc;
        max-height: 300px;
        overflow-y: auto;
        max-width: 80px;
        width: 160px;
        padding: 0;
    }

        .row.pgDivSelect ul + ul, .row.pgDivSelectEven ul + ul {
            left: 79px;
            width: 40px;
            padding: 0;
            background: #eee;
            text-align: center;
            overflow: unset;
        }

            .row.pgDivSelect ul + ul li + li, .row.pgDivSelectEven ul + ul li + li {
                border-top: 1px solid #ccc;
                padding: 7px 5px 3px;
            }

            .row.pgDivSelect ul + ul li, .row.pgDivSelectEven ul + ul li {
                padding-left: 0;
                padding-right: 0;
            }

        .row.pgDivSelect ul li, .row.pgDivSelectEven ul li {
            cursor: default;
            padding: 7px 15px 3px;
            line-height: 1
        }

            .row.pgDivSelect ul li:hover, .row.pgDivSelectEven ul li:hover {
                background: #1967d2;
                color: #FFF;
            }

.body-content .row, .body-content .form-row {
    /*flex-wrap: nowrap;*/
    /*    max-width: 100%;*/
}

    .body-content .form-row > .col {
        max-width: 50%;
    }

        .body-content .form-row > .col img {
            max-width: 100%
        }

.tab-content .card-header .btn-link.collapsed .angleimg {
    transform: rotateX(0deg);
    transition: transform 0.3s ease;
}

.tab-content .card-header .btn-link:not(.collapsed) .angleimg {
    transform: rotateX(180deg);
    transition: transform 0.3s ease;
}


.tab-content .card-header .btn-link img {
    object-fit: contain;
}

.tab-content .card-header .btn-link span {
    color: var(--primary-color);
    font-weight: 400;
    font-size: 18px;
    flex-grow: 1;
    text-align: left;
}

.sidebar + .col.con {
    width: calc(100% - 656px);
}

@media screen and (max-width:1460px) {
    .sidebar {
        width: 20%;
    }

        .sidebar + .col.con {
            width: calc(60% - 10px);
        }
}

@media screen and (max-width:1280px) {
    .form-control {
        min-width: 100px
    }

    .small-visible {
        display: block;
        margin-top: 5px
    }

    .small-hidden {
        display: none !important;
    }

    .player-area {
        margin: 0 -10px;
        width: calc(100% + 20px)
    }

    .yellow-box > div:nth-child(1) {
        height: 495px
    }

    .yellow-box > div:nth-child(2) {
        height: 93px
    }

    .choose {
        background: #896438;
        display: block;
        padding: 10px
    }

        .choose select {
            position: static;
        }

    .yellow-box {
        height: calc(100% - 10px)
    }

    .player-area select {
        left: 15px;
        width: 230px;
        top: 6px;
        height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 30px;
    }

    .img-col.col-auto {
        width: 440px;
    }

        .img-col.col-auto .img-con > div {
            flex: 0 0 100%;
            width: 100%;
        }

    .filter .form-row .col-auto:first-child, .filter .form-row .col-auto:nth-child(6) {
        width: 165px;
        max-width: 165px !important;
    }

    .filter .form-row label {
        width: 53px;
    }

    .filter .w-100.small-visible ~ .col-auto {
        max-width: 100%;
        flex-basis: 0;
        flex-grow: 1;
    }

    .player-area .d-flex .col {
        padding: 0;
    }
}

.radio-selections {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
    display: flex;
    font-size: 12px;
    background: #fff;
    align-items: center;
    border-radius: 6px 6px 0 0
}

    .radio-selections div + div .tafseer {
        /*        background-color: #F9F4EB;*/
        border-radius: 0
    }

    .radio-selections>div:not(.dropdown) {
        background-color: #F9F4EB;
    }
.btn-tabs-menu::after {
    display: none
}
#tafseerListEven.form-control, #translatorLstEven.custom-select {
    background-color: #FFF8F1;
    height: 47px !important;
    border-radius: 5px;
    padding: 10px;
    text-align: right;
    border: 1px solid #FFF8F1;
}

#translatorLstEven, #tafseerListEven {
    appearance: none; /* Standard */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    background-image: none; /* Remove arrow background in some browsers */
}
.radio-selections > div:not(.dropdown) {
    /*flex-grow: 1;*/
    width: 36%;
    text-align: center;
}

.radio-selections label {
    margin: 0 !important;
    width: 100%;
}

    .radio-selections label input {
        position: absolute;
        opacity: 0;
    }

.radio-selections input + span {
    display: block;
    width: 100%;
    line-height: 29px;
    color: #816225;
    /*font-family: "Poppins", sans-serif;*/
    padding: 5px 10px;
    border-radius: 0 6px 0 0;
}

.radio-selections input:checked + span {
    background: #4B3000;
    color: #FFF;
}

.radio-selections + div {
    padding: 12px;
    background: #FFF;
    /*        border: 1px solid #BDB772;*/
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    height: 250px;
    border-radius: 0 0 6px 6px
}

    .radio-selections + div #evenDiv {
        overflow: auto;
        height: 172px;
    }

body {
    background-color: #F0F0E6;
}

.header {
    background-color: var(--primary-color);
}

    .header .navbar-light .navbar-nav .nav-link {
        color: #fff;
        font-weight: 400;
        font-size: 16px;
        padding: .5rem 1.5rem;
    }

        .header .navbar-light .navbar-nav .active > .nav-link,
        .header .navbar-light .navbar-nav .nav-link.active,
        .header .navbar-light .navbar-nav .nav-link.show,
        .header .navbar-light .navbar-nav .show > .nav-link {
            color: #fff;
        }

        .header .navbar-light .navbar-nav .nav-link:focus,
        .header .navbar-light .navbar-nav .nav-link:hover {
            color: #fff;
        }

    .header .dropdown-item {
        padding: .5rem;
    }

    .header .userInfo p {
        font-weight: 500;
        font-size: 16px;
        color: #fff;
        margin: 0;
    }

    .header .userInfo span {
        font-weight: 400;
        font-size: 12px;
        color: #27B251;
    }

    .header .userInfo img {
        object-fit: contain;
    }

    .header .notificationicon {
        position: relative;
        display: inline-block;
    }

    .header .notification-badge {
        position: absolute;
        top: 0;
        right: 6px;
        background: red;
        color: white;
        border-radius: 50%;
        padding: 4px 6px;
        font-size: 11px;
        line-height: 1;
        font-weight: bold;
    }

    .header .active-status-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background-color: #28a745;
        border: 2px solid white;
        border-radius: 50%;
    }

    .header .searchbox {
        position: relative;
    }

        .header .searchbox input {
            position: absolute;
            max-width: 235px;
            width: 235px;
            top: 0px;
            left: 37px;
            text-align: right
        }

.btn-tabs-menu {
    flex-grow: 1;
    padding-left: 10px;
    color: #383433;
    position: relative;
}

.tabs-menu {
    position: absolute;
    background: #fff;
    left: 5px;
    top: 40px;
    border-radius: 8px;
    padding: 14px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 130px;
    text-align: right;
    z-index: 1000;
}

#sidebar-tabs .tabs {
    /*    margin-top: 20px;*/
}

    #sidebar-tabs .tabs .nav-tabs {
        border: none;
        gap: 1rem
    }

        #sidebar-tabs .tabs .nav-tabs .nav-item {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }

            #sidebar-tabs .tabs .nav-tabs .nav-item .nav-link {
                /*padding: 15px 12px;*/
                color: var(--primary-color);
                text-align: center;
                height: unset;
                background-color: #FBFBFB;
                border-radius: 6px;
                height: 75px;
                padding-top: 12px;
            }

                #sidebar-tabs .tabs .nav-tabs .nav-item .nav-link span {
                    display: block;
                    margin-top: 10px;
                    font-weight: 400;
                    font-size: 1rem;
                }

        #sidebar-tabs .tabs .nav-tabs .nav-link:focus,
        #sidebar-tabs .tabs .nav-tabs .nav-link:hover {
            /*            border-color: var(--primary-color);*/
            border-color: transparent;
            border-radius: 6px;
        }

        #sidebar-tabs .tabs .nav-tabs .nav-item.show .nav-link,
        #sidebar-tabs .tabs .nav-tabs .nav-link.active {
            border: 1px solid var(--primary-color);
            background-color: #FFFBF3;
            border-radius: 6px;
            color: var(--primary-color);
            height: 75px
        }

#sidebar-tabs .tab-content .card-header {
    border: none;
    background-color: #fff;
    padding: 12px 10px;
    border-radius: 6px;
}


    #sidebar-tabs .tab-content .card-header .btn-link:hover {
        text-decoration: none;
    }

    #sidebar-tabs .tab-content .card-header .btn-link {
        padding: 0;
        display: flex;
        width: 100%;
        align-items: center;
    }

        #sidebar-tabs .tab-content .card-header .btn-link span {
            color: var(--primary-color);
            font-weight: 400;
            font-size: 1.1rem;
            flex-grow: 1;
            text-align: right;
        }

#sidebar-tabs .accordion .card:not(:first-of-type) .card-header:first-child {
    border-radius: 6px;
}

#sidebar-tabs .accordion .card:not(:first-of-type):not(:last-of-type),
#sidebar-tabs .accordion .card:first-of-type,
#sidebar-tabs .accordion .card:last-of-type {
    border-radius: 6px;
}

.samawork .thead-dark th {
    background-color: #FFF8F1;
    border: none;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    color: #816225
}

.samawork tbody tr td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    font-weight: 400;
    font-size: 12px;
    color: #383433;
    text-align: right;
}

    .samawork tbody tr td .form-check {
        color: #816225;
    }

    .samawork tbody tr td .form-group {
        display: flex;
        justify-content: end;
    }

        .samawork tbody tr td .form-group .form-control {
            min-width: 30px;
            width: 30px;
            text-align: right;
            appearance: none; /* Standard */
            -webkit-appearance: none; /* Safari/Chrome */
            -moz-appearance: none; /* Firefox */
            background-image: none; /* Remove arrow background in some browsers */
        }

@media screen and (min-width: 1400px) {
    header .container-fluid, section .container-fluid {
        padding: 0 60px;
    }
}

#AsbaabMaaniTabs {
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 6px;
}
    #AsbaabMaaniTabs .tab-content {
        height: 360px;
        overflow: auto;
    }
    .tabtable {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
}

    .tabtable th,
    .tabtable td {
        border: 1px solid #dee2e6; /* re-apply borders cleanly */
    }

#AsbaabMaaniTabs .nav-item:nth-child(3) .nav-link {
    border-radius: 0 6px 0 0
}

#AsbaabMaaniTabs .nav-link.active {
    background-color: #4B3000;
    color: #fff;
}

#AsbaabMaaniTabs .nav-link {
    background-color: #F9F4EB;
    color: #816225;
    border-radius: 0;
    font-weight: 400;
    font-size: 1rem;
    padding: 9px 20px;
}

#AsbaabMaaniTabs .tabtable .thead-dark th {
    background-color: #FFF8F1;
    color: #816225;
    font-weight: 400;
    font-size: 14px;
    border: none
}

#AsbaabMaaniTabs .tabtable tbody tr td {
    border-left: none !important;
    border-bottom: none !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 30px;
    color: #383433
}

#AsbaabMaaniTabs .tabtable tbody tr th {
    border-right: none !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.bottom-bar {
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
}

    .bottom-bar .sideicon:first-child a {
        margin-top: 4px;
        margin-right: 4px;
    }

    .bottom-bar .sideicon:last-child a {
        margin-top: 4px;
        margin-left: 4px;
    }

.center-icons {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Gradient border wrapper for all icons */
.gradient-border {
    width: 37px;
    height: 37px;
    padding: 3px;
    background: linear-gradient(180deg, #FFFEE9 0%, #925E16 436.46%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Default icon inside */
    .gradient-border a {
        width: 100%;
        height: 100%;
        background-color: #F3E9D7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #4b3000;
        text-decoration: none;
        font-size: 12px;
        /*margin-top: 4px;*/
    }

/* Special styling for the center icon */
.center-icon {
    width: 44px;
    height: 44px;
}

.sideicon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4B3000 !important;
    border-radius: 50%;
    cursor: pointer;
}

.center-icon a {
    color: #EBE0C1 !important;
    font-size: 16px;
    background-color: #4B3000 !important;
    margin: 0
}
.gradient-border a:has(.disabled) {
    pointer-events: none;
}
.gradient-border i.disabled {
    background: none !important;
}

.sideicon a {
    color: #EBE0C1 !important;
    font-size: 32px;
    color: #fff !important;
    text-decoration: none;
}
.sideicon .fi::before {
    font-size: 22px;
    font-weight: bold !important;
}

    .modal-header {
        background-color: var(--primary-color);
    }

.modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.modal-header button {
    color: #fff;
    opacity: 1;
}

.modal-body {
    background-color: #F3F3F3;
    border-radius: 0 0 6px 6px;
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.modal-header .close span {
    font-size: 24px;
}

@media (min-width: 992px) {
    .popup .modal-lg {
        max-width: 1000px;
    }
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    color: #fff;
    opacity: 1;
}

.modal-content {
    border: none;
}

.header .dropdown-toggle::after {
    display: none
}
/* modal common */
/* btn-primary */
.btn-primary {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
    padding: .375rem 2.1rem;
}

    .btn-primary:hover {
        border-color: var(--primary-color)
    }

.btn-primary-bordered {
    background-color: #F9F2E7 !important;
    border: 1px solid #4B3000;
    color: #4B3000;
    padding: .375rem 2.1rem;
}

    .btn-primary-bordered:hover {
        color: #4B3000;
    }

/* btn-primary */
/* setting modal */
.popup .nav-pills .nav-link.active,
.popup .nav-pills .show > .nav-link {
    color: var(--primary-color);
    background-color: transparent;
    font-weight: bold;
}

.popup .nav-pills .nav-link {
    font-weight: 400;
    padding: 0.75rem 1rem;
    font-size: 14px;
    color: var(--primary-color);
    text-align: right;
}

    .popup .nav-pills .nav-link span {
        padding-right: 10px
    }

.popup .settingsidebar {
    background-color: #fff;
    border-radius: 4px;
    height: 100%;
    padding: 12px;
    box-shadow: 0px 0px 3px 0px #00000026;
    min-height: 500px
}

.popup .settingsidebar {
    padding: 12px 0;
}

.popup .darkcircle {
    position: relative;
}

    .popup .darkcircle::before {
        content: '';
        position: absolute;
        bottom: 10px;
        right: 10px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: #000000;
        border-radius: 50%;
        pointer-events: none;
    }

    .popup .darkcircle select {
        padding-right: 24px;
    }


.popup .lockicon {
    position: relative;
}

    .popup .lockicon i {
        position: absolute;
        bottom: 8px;
        left: 10px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .popup .lockicon input {
        padding-left: 20px;
    }


.popup .bgcolor {
    background: #4B30000D;
    padding: 10px;
    text-align: right;
}

    .popup .bgcolor span {
        font-weight: 400;
        font-size: 12px;
        color: #4B3000;
        padding-right: 10px;
    }

/* inputs */
.popup .form-control {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 2px 0px #0000001A;
    height: 42px !important;
    text-align: right
}

.popup .form-group {
    text-align: right
}

.popup .modal-header .close {
    margin: -1rem auto -1rem -1rem !important;
}

.popup textarea.form-control {
    height: 130px !important;
}

.popup select {
    appearance: none; /* Standard */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    background-image: none; /* Remove arrow background in some browsers */
}

.popup .form-group label {
    font-weight: 400;
    font-size: 14px;
    color: #383433;
}

.popup .settingcontent .tab-pane.alkhat {
}


.mr5 {
    margin-right: -5px
}

    .mr5 label {
        padding-right: 23px;
    }

.tajweed a {
    color: var(--primary-color);
    font-weight: 400;
    font-size: 14px;
    background-color: #C6C6C61A;
    display: block;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

    .tajweed a:hover {
        color: var(--primary-color);
        text-decoration: none;
    }

    .tajweed a img {
        width: 24px;
        height: 24px;
    }

.samaa h6 {
    font-weight: 400;
    font-size: 16px;
    color: #383433;
}

.samaa .form-group lable {
    color: #383433;
    font-weight: 400;
    font-size: 14px;
}

.samaa .form-control {
    background-color: #F1F1F1;
    font-weight: 400;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #F1F1F1;
    height: 41px;
    line-height: 41px;
    padding: 0 .75rem;
}




#VideosPopup .tabtable .thead-dark th,
#AssignmentsPopup .tabtable .thead-dark th,
#MasabqatPopup .tabtable .thead-dark th {
    background-color: #FFF9F3;
    color: #4B3000;
    font-weight: 500;
    letter-spacing: 0px;
    vertical-align: middle;
    text-transform: capitalize;
    border: none;
    text-align: right;
}

#VideosPopup .tabtable tbody tr td,
#AssignmentsPopup .tabtable tbody tr td,
#MasabqatPopup .tabtable tbody tr td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    font-weight: 400;
    font-size: 13px;
    color: #383433;
    text-align: right;
}

#VideosPopup .tabtable tbody tr th,
#AssignmentsPopup .tabtable tbody tr th,
#MasabqatPopup .tabtable tbody tr th {
    border-right: none !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

#VideosPopup .modal-body,
#AssignmentsPopup .modal-body,
#MasabqatPopup .modal-body {
    background-color: #fff
}

.colorCircle {
    margin-bottom: 20px;
    text-align: right;
}

    .colorCircle span {
        font-weight: 400;
        font-size: 16px;
        color: #383433;
        padding: 0 16px;
        position: relative;
        display: inline-block;
    }

        .colorCircle span:after {
            content: '';
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 6px;
        }

        .colorCircle span:nth-child(6):after {
            background-color: #469ADE;
        }

        .colorCircle span:nth-child(5):after {
            background-color: #D9D9D9;
        }

        .colorCircle span:nth-child(4):after {
            background-color: #C2D69B;
        }

        .colorCircle span:nth-child(3):after {
            background-color: #FF831E;
        }

        .colorCircle span:nth-child(2):after {
            background-color: #F6A095;
        }

        .colorCircle span:nth-child(1):after {
            background-color: #777777;
        }


#IndexPopup .modal-header {
    background-color: #4B300012
}

    #IndexPopup .modal-header .modal-title {
        font-weight: 600;
        font-size: 16px;
        color: #4B3000
    }

    #IndexPopup .modal-header span {
        color: #4B3000
    }

#IndexPopup .modal-body {
    background-color: #fff
}


.clipboard p {
    font-weight: 500;
    font-size: 14px;
    color: var(--primary-color);
    margin: 8px 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 26px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #27B251;
}

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

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

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }


.sajjal .gradient-border a {
    background-color: #9E8252;
    margin: 0;
    color: #EBE0C1
}


.sajjal .center-icon a {
    background: linear-gradient(180deg, #FFFEE9 0%, #925E16 436.46%);
}

.ramzan div {
    background-color: #FBFBFB;
    border-radius: 5px;
    margin-bottom: 24px;
    margin-top: 24px;
    width: 105px;
    height: 63px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .ramzan div p {
        color: #4B3000;
        font-weight: 400;
        font-size: 16px;
        margin: 0
    }

    .ramzan div span {
        color: #474747;
        font-weight: 400;
        font-size: 14px;
    }

    .ramzan div + div {
        margin-left: 14px;
    }


#MasabqatPopup label {
    color: #383433;
    font-weight: 600;
    font-size: 16px;
}

.ijtama h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--secondary-color);
    margin-bottom: 14px
}

.ijtama p {
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
}

.ijtama .btn-primary-bordered {
    border-color: #F9F2E7;
    width: 100px;
}

.ijtama .btn-primary {
    color: #fff !important;
    width: 100px;
}

.ijtama .form-group .form-check-label {
    font-size: 11px;
}

.ijtama .form-check {
    padding-left: .5rem !important;
}

.ijtama span {
    font-size: 12px
}

.ijtama .fa-circle {
    padding: 3px;
    color: #F06066;
    border-radius: 50%;
    border: 1px solid #F06066;
    font-size: 7px
}

#sidebar-tabs .card-body {
    background-color: #fff;
    margin-top: 8px;
    border-radius: 6px;
}

#sidebar-tabs .card {
    background-color: transparent;
}

    #sidebar-tabs .card.disabledcard .btn-link {
        opacity: .5;
        pointer-events: none;
        cursor: default;
    }

@media screen and (max-width:1600px) {
    * {
        font-size: 13px;
    }

    .sidebar {
        width: 275px;
    }

    .body-content .container-fluid, .header .navbar {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 992px) {
    #MasabqatPopup .modal-lg {
        max-width: 1200px;
    }
}