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 {
    background: linear-gradient(to bottom, #f0f0db 0%,#f1f1ee 100%);
    min-height: calc(100vh - 70px);
}

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

.body-content .container-fluid {
    max-width: 1460px
}

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: 67px
}

.safha {
    width: 104px
}

.sidebar {
    width: 328px
}

.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
}

.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%);
    height: 29px;
    padding: 0px 10px;
    display: flex;
    font-family: "Amiri", serif;
    font-weight: 700;
    font-size: 12px;
    align-items: center
}

@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 {
    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';
}


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

.form-control {
    border-radius: 0;
    min-width: 70px;
    font-family: 'CoconNextRegular';
    height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 30px;
}

.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;
        z-index: 99
    }

    .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;
    }

.show {
    display: inline-block !important;
}

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 {
    position: relative;
    margin: 0;
    padding: 0 5px;
}

    .row.pgDivSelect > span {
        min-width: 80px;
    }

    .row.pgDivSelect ul {
        position: absolute;
        top: 100%;
        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 {
            left: 79px;
            width: 40px;
            padding: 0;
            background: #eee;
            text-align: center;
            overflow : unset;
        }

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

            .row.pgDivSelect ul + ul li {
                padding: 0;
            }

        .row.pgDivSelect ul li {
            cursor: default;
            padding: 0 15px;
        }

            .row.pgDivSelect ul li:hover {
                background: #C5A43C;
                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%
        }

.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: linear-gradient(to bottom, #FCF9D6 0%, #BCB671 100%);
}

    .radio-selections > div {
        flex-grow: 1;
        width: 50%;
        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: #000;
        font-family: "Poppins", sans-serif;
    }

    .radio-selections input:checked + span {
        background: #393838;
        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;
    }