@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Dancing+Script:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: cairo-semibold;
    src: url(../fonts/Cairo-SemiBold.ttf);
  }
* {
    font-family: "Almarai", sans-serif;
}

:root {
    --color-1: #f4f8fc;
    --color-2: #1D1D1B;
    --color-3: #636262;
    --color-4: #E2ECF5;
    --color-5: #606877;
    --color-6: #232D4B;
    --color-7: #9AA2B1;
    --color-8: #606877;
    --color-9: #666666;
    --color-10: #0AA57C;
    --color-11: rgba(0, 217, 160, 0.08);
    --color-12: #292121;
    --color-13: rgba(41, 33, 33, 0.1);
    --color-14: #BD1515;
    --color-15: rgba(189, 21, 21, 0.1);
    --color-16: #BF967C;
    --color-17: rgba(191, 150, 124, 0.1);
    --color-18: rgba(30, 110, 194, 0.05);
    --color-19: rgba(226, 236, 245, 0.5);
    --color-20: #F48080;
    --color-21: #0065D0;
    --color-22: rgba(0, 101, 208, 0.1);
    --color-23: #FFCA60;
    --color-24: rgba(254, 195, 75, 0.12);
    --color-25: rgba(0, 217, 160, 0.05);
    --color-26: #CCAB96;
    --color-27: #FCFAF8;
    --color-28: #28303F;
    --color-29: #144880;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-blue: #1E6EC2;
    --color-blue-claire: #327BC7;
    --color-red: #FD0000;
    --color-green: #00D9A0;
    --color-brown: #BC9A80;

    --color-green-hover: rgba(0, 217, 160, 0.05);
}

.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

body {
    background-color: var(--color-1);
}

h1 {
    font-size: 32px;
    margin-bottom: 30px;
}

h4 {
    color: var(--color-blue);
    font-size: 20px;
    font-weight: 500;
}

.sidebar {
    background-color: var(--color-white);
    border-radius: 20px;
    margin-top: 20px;
}

.sidebar .nav-item {
    display: contents;
}

.sidebar .nav-item .active.menu-item-present svg path,
.sidebar .nav-item .nav-link.active path {
    stroke: #fff;
}

.sidebar a img.logo-app {
    width: 155px;
    height: 56px;
    margin-bottom: 30px;
    margin-right: 20px;
}

.sidebar .nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-black);
    font-size: 20px;
    padding: 16px 22px 16px 16px;
    margin-right: 20px;
    margin-left: 20px;
    /* width: 80%; */
    border-radius: 15px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
}

.submenu {
    background-color: var(--color-4);
    margin: 15px 20px 0 20px;
    border-radius: 12px;
}

.submenu a {
    padding: 5px 12px 5px 10px !important;
    background: var(--color-white);
    margin: 10px !important;
}

.submenu .masjid-info span:first-child {
    font-size: 15px;
    font-weight: bold;
}

.submenu .masjid-info span:last-child {
    font-size: 14px;
    color: var(--color-8);
    font-weight: 500;
}

.submenu li a:hover span:last-child {
    color: var(--color-white) !important;
}

.prayer-info {
    background: var(--color-green);
    color: var(--color-white);
    margin: 0 15px;
    padding: 4px 12px 5px 16px;
}

.prayer-info span {
    font-size: 14px;
    margin-right: 5px;
}

.left-content .form-check.form-switch {
    margin: 0 15px;
    padding-right: 0;
}

.left-content .form-check-input:checked {
    background-color: #1d6dc1;
    border-color: #1d6dc1;
}

.left-content .form-switch .form-check-input {
    margin: 0 5px;
    height: 1.5em;
    width: 3em;
}

.p-30 {
    padding: 30px !important;
}

.navbar .form-control {
    padding: .75rem 1rem;
}

.left-content,
main {
    padding-top: 20px;
}

.stats {
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 20px;
    padding-bottom: 50px;
}

.stats>div {
    border-left: 1px solid var(--color-4);
}

.stats>div:last-child {
    border-left: none;
}

h2 {
    color: var(--color-black);
    font-size: 24px;
    margin-bottom: 20px;
}

.stat-info .info1 {
    color: var(--color-blue);
    font-size: 30px;
    font-weight: 500;
}

.stat-info .info2 {
    font-size: 13px;
    color: var(--color-2);
    font-weight: BOLD;
}

.stat-info .info3 {
    font-size: 12px;
    color: var(--color-3);
    font-weight: 500;
}

.checking {
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 20px;
    padding-bottom: 50px;
    margin-top: 20px;
}

.checking img {
    display: block;
    margin: 55px auto;
    width: 40%;
}

.checking .checking-info {
    color: var(--color-3);
    font-size: 24px;
    text-align: center;
    font-weight: 500;
}

.calendar {

    border-radius: 24px;

    padding: 20px 20px 20px 0px;

    padding-bottom: 50px;
}

.calendar__header {
    direction: ltr;
}

.calendar__monthyear {
    font-weight: 500 !important;
}

.color-calendar.basic {
    border-radius: 24px;
}

.color-calendar {
    width: 100%;
}

.color-calendar.basic .calendar__weekdays,
.color-calendar .calendar__header,
.color-calendar .calendar__days {
    grid-template-columns: repeat(7, minmax(20px, 64px));
}

.mkc_info {
    display: none;
}

.notif-number {
    display: block;
    width: 35px;
    text-align: center;
    background-color: var(--color-red);
    color: var(--color-white);
}

.color-calendar.basic .calendar__days .calendar__day-selected .calendar__day-box {
    border-radius: 0.5rem;
    background-color: var(--color-blue);
    opacity: 1;
    box-shadow: none;
}

.color-calendar.basic .calendar__days .calendar__day-selected .calendar__day-text {
    border-radius: 0.5rem;
    background-color: var(--color-blue);
    opacity: 1;
    box-shadow: none;
    color: var(--color-white);
}

.color-calendar.basic .calendar__day-text {
    font-weight: 500;
    color: var(--color-2);
}

.sidebar hr {
    width: 64%;
    margin-right: 32px;
    color: var(--color-4);
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}

.bottom-side-menu li:last-child a {
    color: var(--color-red) !important;
    margin-top: 15px;
}

.bottom-side-menu li a.disabled {
    font-size: 20px !important;
}

.bottom-side-menu a {
    color: var(--color-3) !important;
    font-size: 16px !important;
    padding: 10px 22px 11px 16px !important;
    margin-right: 10px !important
}

.bottom-side-menu a:hover {
    color: var(--color-white) !important;
}

.fixed-main {
    padding-top: 20px !important;
}

.content {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 10px;
}

.top-main {
    background: var(--color-6);
    color: var(--color-white);
    font-size: 14px;
    border-radius: 12px;
    padding: 15px 20px 14px 20px;
    font-weight: 500;
}

.top-main .musjd-name {
    font-size: 20px;
    font-weight: bold;
    margin: 0 15px;
}

.top-main .student-count div {
    font-size: 14px;
    color: var(--color-7);
    border-right: 1px solid var(--color-8);
    padding-right: 9px;
}

.top-main .student-count div:first-child {
    border-right: none;
}

.top-main .student-count span {
    color: var(--color-white);
    font-size: 20px;
    margin-left: 3px;
}

.students-list {
    margin-top: 15px;
}

.students-list input {
    border-right: none;
    border-radius: 12px;
    border-color: var(--color-4);
}

.students-list input::placeholder {
    color: var(--color-7);
    opacity: 1;
    /* Firefox */
}

.students-list input::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: var(--color-7);
}

.students-list .input-group span {
    background-color: var(--color-white);
    border-radius: 12px;
    border-color: var(--color-4);
}

.student-filter button {
    font-size: 15px;
    color: var(--color-9);
    padding: 4px 6px 4px 6px;
}

.student-filter button.active {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.student-filter button:hover,
.student-filter button:active {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

.list .student-name {
    font-size: 18px;
    color: var(--color-black);
    font-weight: 500;
    margin-bottom: 8px;
}

.list .mistakes span:first-child,
.list .mistakes span:nth-child(3) {
    font-size: 15px;
    color: var(--color-black);
    font-weight: 500;
    margin-left: 4px;
}

.list .mistakes span:last-child,
.list .mistakes span:nth-child(2) {
    font-size: 15px;
    color: var(--color-7);
    font-weight: 500;
    margin-left: 10px;
}

.student-info .dropdown button,
.dropdown button.green {
    background-color: var(--color-green) !important;
    color: var(--color-white);
    padding: 5px 15px 5px 15px;
    position: relative;
    top: 5px;
}

.dropdown button.green {
    padding: 0px 10px 0px 10px;
    font-size: 13px;
}

.student-info .dropdown button:hover,
.student-info .dropdown button:active {
    border-color: var(--color-green);
}

.student-info .dropdown-item:active {
    background-color: var(--color-green) !important;
}

.student-info {
    border: 1px solid var(--color-4);
    border-radius: 12px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
}

.student-info:hover {
    background-color: var(--color-blue);
    cursor: pointer;
}

.student-info.active {
    background-color: var(--color-blue);
    cursor: pointer;
}

.student-info:hover .student-name,
.student-info.active .student-name,
.student-info:hover .btn-stat,
.student-info.active .btn-stat,
.student-info:hover .mistakes span,
.student-info.active .mistakes span {
    color: var(--color-white) !important;
}

.student-info img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-left: 5%;
}

.nav-tabs .nav-link,
.nav-tabs {
    border: none;
    margin-bottom: 5px;
    margin-top: 5px;
}

.sidebar.offcanvas {
    border-radius: 0;
}

.offcanvas-body::-webkit-scrollbar-track {

    background-color: #E2ECF5;
}

.offcanvas-body::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
    background-color: #E2ECF5;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #232d4bc2;
    border: 2px solid #E2ECF5;
}

.dynamic-field-content .field-form {
    margin-right: 10px;
}

.dynamic-field {
    display: block;
}

.from-to-surah {
    flex-direction: column;
}

.form-field-inner {
    align-items: center;
    position: relative;
    justify-content: space-between;
}

.form-field-inner .add-btn {
    /* position: absolute; */
    top: 28px;
    left: 30px;
}

.form-field-inner .remove-btn {
    /* position: absolute; */
    /* top: 28px; */
    /* left: 30px; */
}

.form-field-inner .dynamic-field-content {
    margin-bottom: 20px;
}

.student-details {
    display: none;
    background: var(--color-4);
    border-radius: 12px;
    padding: 15px 8px 15px 20px;
}

.student-presence {
    margin: 0;
}

.student-presence .btn-stat {
    padding: 2px 11px 1px 0;
}

.student-presence,
.listening-type {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 10px;
    position: relative;
}

.listening-type {
    /* min-height: 450px; */
}

.student-presence img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-left: 11px;
}

.student-presence h2 {
    color: var(--color-black);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.student-presence .btn-res {
    background-color: var(--color-blue) !important;
    color: var(--color-white);
    padding: 8px 15px 5px 15px;
    font-size: 12px;
    height: 34px;
}

.presence-details {
    /* background-color: var(--color-18); */
    border-radius: 12px;
    /* margin-top: 15px; */
    /* padding: 10px; */
}

.presence-details div {
    text-align: center;
    color: var(--color-9);
    margin: 1%;
}


.presence-details div.present {
    background-color: var(--color-11) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.present span {
    color: var(--color-10) !important;
    font-size: 10px;
}

.presence-details div.absent {
    background-color: var(--color-15) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.absent span {
    color: var(--color-14) !important;
    font-size: 10px;
}

.presence-details div.absent-permissed {
    background-color: var(--color-17) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.absent-permissed span {
    color: var(--color-16) !important;
    font-size: 10px;
}

.presence-details div.waiting {
    background-color: var(--color-13) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.waiting span {
    color: var(--color-12) !important;
    font-size: 10px;
}

.presence-details div.not-hear {
    background-color: var(--color-22) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.not-hear span {
    color: var(--color-21) !important;
    font-size: 10px;
}

.presence-details div.late {
    background-color: var(--color-24) !important;
    border-radius: 8px;
    padding: 4px 16px 4px 16px;
}

.presence-details div.late span {
    color: var(--color-23) !important;
    font-size: 10px;
}




.presence-details div span:first-child {
    font-size: 10px;
    font-weight: 500;
}

.presence-details div span:last-child {
    font-size: 14px;
    font-weight: 500;
}



/*


span.late, .late .btn-stat{
    color: var(--color-23) !important;
    background-color: var(--color-24) !important;
} */

.listening-type h2 {
    color: var(--color-black);
    font-weight: bold;
    font-size: 17px;
    margin-right: 10px;
}

.type-list div {
    margin-left: 10px;
}

.radio-custom {
    opacity: 0;
    position: absolute;
}

p {
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
    font-size: 14px;
    border: 1px solid var(--color-4);
    border-radius: 24px;
    padding: 5px;
    cursor: pointer;
}

.radio-custom-label:focus-visible {
    outline: none;
}

.radio-custom+.radio-custom-label:before {
    content: '';
    background: var(--color-4);
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    text-align: center;
    margin-left: 5px;
}

.radio-custom+.radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked+.radio-custom-label:before {
    content: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.05762 7.15452L4.57753 9.98379C5.40331 10.6476 6.60345 10.5522 7.31402 9.7663L15.0714 1.18685" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-color: var(--color-green);
    font-family: 'FontAwesome';
    color: #bbb;
}

.radio-custom:focus+.radio-custom-label {
    outline: 1px solid #ddd;
    /* focus style */
}

.add-btn {
    background-color: var(--color-green);
    width: 28px;
    height: 28px;
    border-radius: 50px;
    border: none;
    color: var(--color-white);
    margin-top: 23px;
    margin-right: 14px;
    padding: 3px 6px 3px 3px;
    box-sizing: border-box;
}

.remove-btn {
    background-color: var(--color-20);
    width: 28px;
    height: 28px;
    border-radius: 50px;
    border: none;
    color: var(--color-white);
    margin-top: 10px;
    margin-right: 4px;
}

.fix-size {
    width: 23px;
    height: 23px;
    font-size: 13px;
    padding: 2px 3px 3px 3px;
    margin-bottom: 0 !important;
    margin-right: 18px;
    margin-top: 26px;
}

.from-to-surah {
    border-bottom: 1px solid var(--color-19);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.from-to-surah label,
.custom-counter label {
    font-size: 14px;
    color: var(--color-black);
    font-weight: 500;
}

.add-btn svg {
    position: relative;
    bottom: 1px;
    left: 1px;
}

.edit-button {
    font-size: 18px;
    border-radius: 12px;
    background-color: var(--color-green);
    padding: 10px 15px 11px 15px;
    color: var(--color-white);
    border: none;
    margin-right: 20px;
}

.save-button {
    font-size: 18px;
    border-radius: 12px;
    background-color: var(--color-blue);
    padding: 10px 15px 11px 15px;
    color: var(--color-white);
    border: none;
}

.quran {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-19);
}

.quran img {
    width: 80%;
}

.edit-button:before {
    content: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.05762 7.15452L4.57753 9.98379C5.40331 10.6476 6.60345 10.5522 7.31402 9.7663L15.0714 1.18685" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.save-button:before {
    content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_728_1723)"><path d="M13.4887 3.48919L10.8637 0.864187C10.8228 0.823639 10.7743 0.791559 10.721 0.769787C10.6677 0.748015 10.6106 0.736979 10.5531 0.737312L1.80307 0.737312C1.45497 0.737312 1.12113 0.875593 0.874992 1.12173C0.628851 1.36788 0.49057 1.70172 0.49057 2.04981L0.49057 12.5498C0.49057 12.8979 0.628851 13.2317 0.874992 13.4779C1.12113 13.724 1.45497 13.8623 1.80307 13.8623L12.3031 13.8623C12.6512 13.8623 12.985 13.724 13.2311 13.4779C13.4773 13.2317 13.6156 12.8979 13.6156 12.5498L13.6156 3.79981C13.6159 3.74223 13.6049 3.68516 13.5831 3.63185C13.5613 3.57855 13.5292 3.53007 13.4887 3.48919ZM8.80307 1.61231L8.80307 4.23731L5.30307 4.23731L5.30307 1.61231L8.80307 1.61231ZM3.55307 12.9873L3.55307 9.92481C3.55307 9.80878 3.59916 9.6975 3.68121 9.61545C3.76326 9.53341 3.87454 9.48731 3.99057 9.48731L10.1156 9.48731C10.2316 9.48731 10.3429 9.53341 10.4249 9.61545C10.507 9.6975 10.5531 9.80878 10.5531 9.92481L10.5531 12.9873L3.55307 12.9873ZM12.7406 12.5498C12.7406 12.6658 12.6945 12.7771 12.6124 12.8592C12.5304 12.9412 12.4191 12.9873 12.3031 12.9873L11.4281 12.9873L11.4281 9.92481C11.4281 9.57672 11.2898 9.24288 11.0436 8.99673C10.7975 8.75059 10.4637 8.61231 10.1156 8.61231L3.99057 8.61231C3.64247 8.61231 3.30863 8.75059 3.06249 8.99673C2.81635 9.24288 2.67807 9.57672 2.67807 9.92481L2.67807 12.9873L1.80307 12.9873C1.68704 12.9873 1.57576 12.9412 1.49371 12.8592C1.41166 12.7771 1.36557 12.6658 1.36557 12.5498L1.36557 2.04981C1.36557 1.93378 1.41166 1.8225 1.49371 1.74045C1.57576 1.65841 1.68704 1.61231 1.80307 1.61231L4.42807 1.61231L4.42807 4.23731C4.42807 4.46938 4.52026 4.69194 4.68435 4.85603C4.84845 5.02012 5.07101 5.11231 5.30307 5.11231L8.80307 5.11231C9.03513 5.11231 9.25769 5.02012 9.42179 4.85603C9.58588 4.69194 9.67807 4.46938 9.67807 4.23731L9.67807 1.61231L10.3737 1.61231L12.7406 3.97919L12.7406 12.5498Z" fill="white"/></g><defs><clipPath id="clip0_728_1723"><rect width="14" height="14" fill="white" transform="translate(0.0530701 0.299805)"/></clipPath></defs></svg>')
}

.custom-counter input {
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 10px;
}

.custom-counter input[type="button"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.custom-counter input::-webkit-outer-spin-button,
.custom-counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.custom-counter .input-group {
    clear: both;
    position: relative;
}

.custom-counter .input-group input[type='button'] {
    background-color: #eeeeee;
    min-width: 38px;
    width: auto;
    transition: all 300ms ease;
}

.custom-counter .input-group .button-minus {
    font-weight: bold;
    height: 20px !important;
    width: 20px !important;
    position: absolute;
    z-index: 1;
    background-color: var(--color-8) !important;
    border-radius: 50% !important;
    padding: 7px;
    top: 9px;
    right: 10px;
    color: var(--color-white);
    display: block;
    line-height: 4px;
    text-align: center;
    cursor: pointer;
}

.custom-counter .input-group .button-plus {
    height: 20px !important;
    width: 20px !important;
    position: absolute;
    z-index: 1;
    background-color: var(--color-green) !important;
    border-radius: 50% !important;
    padding: 7px;
    top: 9px;
    left: 0px;
    color: var(--color-white);
    display: block;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    padding-top: 1px !important;
    padding: 0;
    font-weight: bold;
}

.custom-counter .input-group .quantity-field {
    position: relative;
    height: 38px;
    left: -6px;
    text-align: center;
    width: 100%;
    display: inline-block;
    font-size: 13px;
    margin: 0 0 5px;
    resize: vertical;
    border-radius: 6px !important;
}

.custom-counter .button-plus {
    left: -13px;
}

.custom-counter input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

.custom-counter .add-btn {
    position: relative;
    bottom: 6px;
}




.nav-tabs .nav-link {
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-9);
    border-radius: 8px;
    padding: 6px 10px 12px 16px;
}

.nav-tabs .nav-link.active {
    color: var(--color-white);
    background-color: var(--color-blue);
}

.nav-tabs button:first-child:before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.27236 6.12284C6.92718 6.12204 6.64671 6.40122 6.64591 6.74639C6.64512 7.09157 6.92429 7.37204 7.26947 7.37283L7.27236 6.12284ZM13.9361 7.38822C14.2813 7.38902 14.5618 7.10984 14.5626 6.76466C14.5634 6.41949 14.2842 6.13902 13.939 6.13822L13.9361 7.38822ZM7.26466 9.45616C6.91949 9.45536 6.63902 9.73454 6.63822 10.0797C6.63742 10.4249 6.9166 10.7054 7.26178 10.7062L7.26466 9.45616ZM10.5951 10.7139C10.9403 10.7146 11.2207 10.4355 11.2215 10.0903C11.2223 9.74512 10.9432 9.46465 10.598 9.46385L10.5951 10.7139ZM6.41883 14.8709L17.2521 14.8959L17.255 13.6459L6.42171 13.6209L6.41883 14.8709ZM14.7435 18.6401L6.41018 18.6209L6.40729 19.8709L14.7406 19.8901L14.7435 18.6401ZM6.41018 18.6209C5.37464 18.6185 4.53712 17.7771 4.53951 16.7416L3.28951 16.7387C3.28553 18.4646 4.68141 19.8669 6.40729 19.8709L6.41018 18.6209ZM14.7406 19.8901C16.4665 19.8941 17.8688 18.4982 17.8728 16.7723L16.6228 16.7694C16.6204 17.805 15.779 18.6425 14.7435 18.6401L14.7406 19.8901ZM6.42171 13.6209C4.69583 13.6169 3.29349 15.0128 3.28951 16.7387L4.53951 16.7416C4.5419 15.706 5.3833 14.8685 6.41883 14.8709L6.42171 13.6209ZM6.44576 3.20425L14.7791 3.22349L14.782 1.97349L6.44864 1.95426L6.44576 3.20425ZM16.6497 5.10281L16.6228 16.7694L17.8728 16.7723L17.8997 5.10569L16.6497 5.10281ZM4.53951 16.7416L4.56643 5.07492L3.31644 5.07204L3.28951 16.7387L4.53951 16.7416ZM14.7791 3.22349C15.8146 3.22588 16.6521 4.06728 16.6497 5.10281L17.8997 5.10569C17.9037 3.37981 16.5078 1.97747 14.782 1.97349L14.7791 3.22349ZM6.44864 1.95426C4.72276 1.95027 3.32042 3.34615 3.31644 5.07204L4.56643 5.07492C4.56882 4.03939 5.41022 3.20186 6.44576 3.20425L6.44864 1.95426ZM7.26947 7.37283L13.9361 7.38822L13.939 6.13822L7.27236 6.12284L7.26947 7.37283ZM7.26178 10.7062L10.5951 10.7139L10.598 9.46385L7.26466 9.45616L7.26178 10.7062Z" fill="%23606877"/></svg>');
    position: relative;
    top: 6px;
    margin-left: 2px;
}

.nav-tabs button.active:first-child:before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.27236 6.12284C6.92718 6.12204 6.64671 6.40122 6.64591 6.74639C6.64512 7.09157 6.92429 7.37204 7.26947 7.37283L7.27236 6.12284ZM13.9361 7.38822C14.2813 7.38902 14.5618 7.10984 14.5626 6.76466C14.5634 6.41949 14.2842 6.13902 13.939 6.13822L13.9361 7.38822ZM7.26466 9.45616C6.91949 9.45536 6.63902 9.73454 6.63822 10.0797C6.63742 10.4249 6.9166 10.7054 7.26178 10.7062L7.26466 9.45616ZM10.5951 10.7139C10.9403 10.7146 11.2207 10.4355 11.2215 10.0903C11.2223 9.74512 10.9432 9.46465 10.598 9.46385L10.5951 10.7139ZM6.41883 14.8709L17.2521 14.8959L17.255 13.6459L6.42171 13.6209L6.41883 14.8709ZM14.7435 18.6401L6.41018 18.6209L6.40729 19.8709L14.7406 19.8901L14.7435 18.6401ZM6.41018 18.6209C5.37464 18.6185 4.53712 17.7771 4.53951 16.7416L3.28951 16.7387C3.28553 18.4646 4.68141 19.8669 6.40729 19.8709L6.41018 18.6209ZM14.7406 19.8901C16.4665 19.8941 17.8688 18.4982 17.8728 16.7723L16.6228 16.7694C16.6204 17.805 15.779 18.6425 14.7435 18.6401L14.7406 19.8901ZM6.42171 13.6209C4.69583 13.6169 3.29349 15.0128 3.28951 16.7387L4.53951 16.7416C4.5419 15.706 5.3833 14.8685 6.41883 14.8709L6.42171 13.6209ZM6.44576 3.20425L14.7791 3.22349L14.782 1.97349L6.44864 1.95426L6.44576 3.20425ZM16.6497 5.10281L16.6228 16.7694L17.8728 16.7723L17.8997 5.10569L16.6497 5.10281ZM4.53951 16.7416L4.56643 5.07492L3.31644 5.07204L3.28951 16.7387L4.53951 16.7416ZM14.7791 3.22349C15.8146 3.22588 16.6521 4.06728 16.6497 5.10281L17.8997 5.10569C17.9037 3.37981 16.5078 1.97747 14.782 1.97349L14.7791 3.22349ZM6.44864 1.95426C4.72276 1.95027 3.32042 3.34615 3.31644 5.07204L4.56643 5.07492C4.56882 4.03939 5.41022 3.20186 6.44576 3.20425L6.44864 1.95426ZM7.26947 7.37283L13.9361 7.38822L13.939 6.13822L7.27236 6.12284L7.26947 7.37283ZM7.26178 10.7062L10.5951 10.7139L10.598 9.46385L7.26466 9.45616L7.26178 10.7062Z" fill="white"/></svg>');
}

.nav-tabs button:nth-child(2):before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7436 18.1735L10.077 18.1696C8.23601 18.1654 6.74707 16.6696 6.75132 14.8286L6.77055 6.49532C6.7748 4.65437 8.27063 3.16544 10.1116 3.16968L15.1116 3.18122C16.9525 3.18547 18.4414 4.6813 18.4372 6.52224L18.4237 12.3556M1.77057 6.48378L4.27056 6.48955M10.1039 6.50301L15.1039 6.51455M10.0962 9.83633L15.0962 9.84787M10.0885 13.1697L12.5885 13.1754M13.4141 16.5107L14.8721 17.6826C15.2197 17.962 15.7256 17.9182 16.0201 17.5833L18.418 14.8556M2.99364 18.1533L3.57876 17.3769C4.01284 16.8009 4.24838 16.0996 4.25004 15.3784L4.27537 4.40622C4.27696 3.71586 3.71861 3.15493 3.02826 3.15334C2.3379 3.15174 1.77697 3.71009 1.77537 4.40045L1.75005 15.3726C1.74839 16.0939 1.98069 16.7962 2.4121 17.3742L2.99364 18.1533Z" stroke="%23606877" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: relative;
    top: 6px;
    margin-left: 2px;
}

.nav-tabs button:nth-child(3):before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7436 18.1735L10.077 18.1696C8.23601 18.1654 6.74707 16.6696 6.75132 14.8286L6.77055 6.49532C6.7748 4.65437 8.27063 3.16544 10.1116 3.16968L15.1116 3.18122C16.9525 3.18547 18.4414 4.6813 18.4372 6.52224L18.4237 12.3556M1.77057 6.48378L4.27056 6.48955M10.1039 6.50301L15.1039 6.51455M10.0962 9.83633L15.0962 9.84787M10.0885 13.1697L12.5885 13.1754M13.4141 16.5107L14.8721 17.6826C15.2197 17.962 15.7256 17.9182 16.0201 17.5833L18.418 14.8556M2.99364 18.1533L3.57876 17.3769C4.01284 16.8009 4.24838 16.0996 4.25004 15.3784L4.27537 4.40622C4.27696 3.71586 3.71861 3.15493 3.02826 3.15334C2.3379 3.15174 1.77697 3.71009 1.77537 4.40045L1.75005 15.3726C1.74839 16.0939 1.98069 16.7962 2.4121 17.3742L2.99364 18.1533Z" stroke="%23606877" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: relative;
    top: 6px;
    margin-left: 2px;
}

.nav-tabs button.active:nth-child(2):before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7436 18.1735L10.077 18.1696C8.23601 18.1654 6.74707 16.6696 6.75132 14.8286L6.77055 6.49532C6.7748 4.65437 8.27063 3.16544 10.1116 3.16968L15.1116 3.18122C16.9525 3.18547 18.4414 4.6813 18.4372 6.52224L18.4237 12.3556M1.77057 6.48378L4.27056 6.48955M10.1039 6.50301L15.1039 6.51455M10.0962 9.83633L15.0962 9.84787M10.0885 13.1697L12.5885 13.1754M13.4141 16.5107L14.8721 17.6826C15.2197 17.962 15.7256 17.9182 16.0201 17.5833L18.418 14.8556M2.99364 18.1533L3.57876 17.3769C4.01284 16.8009 4.24838 16.0996 4.25004 15.3784L4.27537 4.40622C4.27696 3.71586 3.71861 3.15493 3.02826 3.15334C2.3379 3.15174 1.77697 3.71009 1.77537 4.40045L1.75005 15.3726C1.74839 16.0939 1.98069 16.7962 2.4121 17.3742L2.99364 18.1533Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.nav-tabs button.active:nth-child(3):before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7436 18.1735L10.077 18.1696C8.23601 18.1654 6.74707 16.6696 6.75132 14.8286L6.77055 6.49532C6.7748 4.65437 8.27063 3.16544 10.1116 3.16968L15.1116 3.18122C16.9525 3.18547 18.4414 4.6813 18.4372 6.52224L18.4237 12.3556M1.77057 6.48378L4.27056 6.48955M10.1039 6.50301L15.1039 6.51455M10.0962 9.83633L15.0962 9.84787M10.0885 13.1697L12.5885 13.1754M13.4141 16.5107L14.8721 17.6826C15.2197 17.962 15.7256 17.9182 16.0201 17.5833L18.418 14.8556M2.99364 18.1533L3.57876 17.3769C4.01284 16.8009 4.24838 16.0996 4.25004 15.3784L4.27537 4.40622C4.27696 3.71586 3.71861 3.15493 3.02826 3.15334C2.3379 3.15174 1.77697 3.71009 1.77537 4.40045L1.75005 15.3726C1.74839 16.0939 1.98069 16.7962 2.4121 17.3742L2.99364 18.1533Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.nav-tabs button:last-child:before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.27279 5.40236L5.60611 5.41005M2.26125 10.4023L5.59457 10.41M2.24971 15.4023L5.58303 15.41M15.6061 5.43313L8.93944 5.41774M12.2651 8.75876L8.93174 8.75106M7.242 18.7472L15.5753 18.7664C17.4163 18.7707 18.9121 17.2817 18.9163 15.4408L18.9394 5.44082C18.9437 3.59988 17.4547 2.10405 15.6138 2.0998L7.28047 2.08057C5.43952 2.07632 3.9437 3.56526 3.93945 5.4062L3.91637 15.4062C3.91212 17.2471 5.40106 18.7429 7.242 18.7472Z" stroke="%23606877" stroke-width="1.25" stroke-linecap="round"/></svg>');
    position: relative;
    top: 6px;
    margin-left: 2px;
}
.nav-tabs button:nth-child(4):before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7436 18.1735L10.077 18.1696C8.23601 18.1654 6.74707 16.6696 6.75132 14.8286L6.77055 6.49532C6.7748 4.65437 8.27063 3.16544 10.1116 3.16968L15.1116 3.18122C16.9525 3.18547 18.4414 4.6813 18.4372 6.52224L18.4237 12.3556M1.77057 6.48378L4.27056 6.48955M10.1039 6.50301L15.1039 6.51455M10.0962 9.83633L15.0962 9.84787M10.0885 13.1697L12.5885 13.1754M13.4141 16.5107L14.8721 17.6826C15.2197 17.962 15.7256 17.9182 16.0201 17.5833L18.418 14.8556M2.99364 18.1533L3.57876 17.3769C4.01284 16.8009 4.24838 16.0996 4.25004 15.3784L4.27537 4.40622C4.27696 3.71586 3.71861 3.15493 3.02826 3.15334C2.3379 3.15174 1.77697 3.71009 1.77537 4.40045L1.75005 15.3726C1.74839 16.0939 1.98069 16.7962 2.4121 17.3742L2.99364 18.1533Z" stroke="%23606877" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: relative;
    top: 6px;
    margin-left: 2px;
}
.nav-tabs button.active:last-child:before {
    content: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.27279 5.40236L5.60611 5.41005M2.26125 10.4023L5.59457 10.41M2.24971 15.4023L5.58303 15.41M15.6061 5.43313L8.93944 5.41774M12.2651 8.75876L8.93174 8.75106M7.242 18.7472L15.5753 18.7664C17.4163 18.7707 18.9121 17.2817 18.9163 15.4408L18.9394 5.44082C18.9437 3.59988 17.4547 2.10405 15.6138 2.0998L7.28047 2.08057C5.43952 2.07632 3.9437 3.56526 3.93945 5.4062L3.91637 15.4062C3.91212 17.2471 5.40106 18.7429 7.242 18.7472Z" stroke="white" stroke-width="1.25" stroke-linecap="round"/></svg>');
}

.w-95 {
    width: 95%;
}







.btn-stat {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px 6px 15px;
}


span.present,
.present .btn-stat {
    color: var(--color-10) !important;
    background-color: var(--color-11) !important;
}

span.waiting,
.waiting .btn-stat {
    color: var(--color-12) !important;
    background-color: var(--color-13) !important;
}

span.absent,
.absent .btn-stat {
    color: var(--color-14) !important;
    background-color: var(--color-15) !important;
}

span.absent-permissed,
.absent-permissed .btn-stat {
    color: var(--color-16) !important;
    background-color: var(--color-17) !important;
}


span.not-hear,
.not-hear .btn-stat {
    color: var(--color-21) !important;
    background-color: var(--color-22) !important;
}

span.late,
.late .btn-stat {
    color: var(--color-23) !important;
    background-color: var(--color-24) !important;
}

.add-action,
.add-quran {
    cursor: pointer !important;
}

.d-desktop {
    display: inline-block;
}


/* New code */

.student-result .help {
    float: left;
}

.student-result .nav {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 10px;
}

.student-result .nav-item {}

.student-result .nav-link {
    border: 1px solid var(--color-4);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 10px 5px 10px 0;
}

.student-result .nav-link::before {
    content: url('data:image/svg+xml,<svg width="35" height="42" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="26" cy="26" r="26" fill="%23E9F1F9"/><g clip-path="url(%23clip0_1157_1653)"><path d="M28.1731 37H19.1052C17.4048 37 16.0215 35.6166 16.0215 33.9163V19.0837C16.0215 17.3833 17.4048 16 19.1052 16H26.0381C26.7927 16 27.4998 16.3351 27.9782 16.9194L30.6901 20.2338C31.0562 20.682 31.2563 21.2428 31.2568 21.8215V22.7941C31.2568 23.1352 30.9802 23.4118 30.6391 23.4118C30.298 23.4118 30.0215 23.1352 30.0215 22.7941V21.8215C30.0213 21.528 29.9198 21.2435 29.7341 21.0161L27.0222 17.7018C26.9031 17.5558 26.753 17.4381 26.5828 17.3574C26.4125 17.2768 26.2265 17.235 26.0381 17.2353H19.1052C18.086 17.2353 17.2568 18.0645 17.2568 19.0837V33.9163C17.2568 34.9355 18.086 35.7647 19.1052 35.7647H28.1731C29.0317 35.7647 29.7708 35.1829 29.9706 34.3499C30.0501 34.0183 30.3834 33.814 30.7153 33.8934C31.0469 33.9729 31.2514 34.3063 31.1718 34.6381C30.8383 36.0287 29.6051 37 28.1731 37Z" fill="%231E6EC2"/><path d="M30.2276 22.5884H27.1727C26.019 22.5884 25.0805 21.6498 25.0805 20.4962V19.0884C25.0805 18.7473 25.357 18.4707 25.6981 18.4707C26.0392 18.4707 26.3158 18.7473 26.3158 19.0884V20.4962C26.3158 20.9687 26.7002 21.3531 27.1727 21.3531H30.2276C30.5686 21.3531 30.8452 21.6296 30.8452 21.9707C30.8452 22.3118 30.5686 22.5884 30.2276 22.5884ZM29.5155 31.5241C29.0202 31.5241 28.5288 31.4359 28.0645 31.2635L22.8861 29.3405C22.3864 29.1548 22.0508 28.6719 22.0508 28.1389C22.0508 27.6052 22.3867 27.1223 22.8868 26.9372L28.0646 25.014C29.0006 24.6665 30.0303 24.6665 30.9664 25.014C32.3508 25.5284 34.6023 26.3646 36.1448 26.9374C36.6442 27.1223 36.9801 27.6053 36.9801 28.139C36.9801 28.6719 36.6445 29.1547 36.145 29.3405C35.086 29.7335 33.9175 30.1674 33.9175 30.1674C33.5976 30.2863 33.2422 30.1232 33.1234 29.8034C33.0046 29.4837 33.1676 29.1282 33.4874 29.0094C33.4874 29.0094 34.6561 28.5754 35.7148 28.1825C35.7236 28.1792 35.7312 28.1732 35.7365 28.1654C35.7419 28.1576 35.7448 28.1484 35.7448 28.139C35.7448 28.1296 35.742 28.1204 35.7368 28.1127C35.7315 28.1049 35.724 28.099 35.7152 28.0956C34.1722 27.5226 31.9206 26.6863 30.5362 26.172C29.8776 25.9276 29.1531 25.9276 28.4945 26.172L23.3161 28.0954C23.3073 28.0987 23.2996 28.1047 23.2942 28.1125C23.2889 28.1203 23.286 28.1295 23.286 28.139C23.286 28.1583 23.2982 28.1759 23.3164 28.1826L28.4945 30.1055C29.1532 30.35 29.8777 30.35 30.5363 30.1055L31.8474 29.6188C32.1674 29.5001 32.5227 29.6631 32.6415 29.9828C32.7602 30.3026 32.5972 30.6581 32.2774 30.7769L30.9663 31.2636C30.502 31.4359 30.0107 31.5241 29.5155 31.5241Z" fill="%231E6EC2"/><path d="M29.516 35.1477C28.9094 35.1476 28.3041 35.0938 27.707 34.9868C27.5031 34.9507 27.2932 34.9131 27.0862 34.876C25.7055 34.6297 24.7031 33.4326 24.7031 32.0297V29.7382C24.7031 29.3971 24.9797 29.1206 25.3208 29.1206C25.6619 29.1206 25.9384 29.3971 25.9384 29.7382V32.0297C25.9381 32.4186 26.0747 32.7951 26.3244 33.0933C26.574 33.3914 26.9207 33.5921 27.3036 33.66C27.5105 33.6971 27.7197 33.7345 27.9236 33.7707C28.9765 33.9595 30.0545 33.9595 31.1074 33.7709C31.3125 33.7345 31.5217 33.697 31.728 33.6601C32.1109 33.5922 32.4576 33.3915 32.7073 33.0934C32.957 32.7952 33.0936 32.4186 33.0932 32.0297V29.5884C33.0932 29.2473 33.3698 28.9707 33.7109 28.9707C34.052 28.9707 34.3285 29.2473 34.3285 29.5884V32.0297C34.3285 33.4326 33.3263 34.6297 31.9454 34.8761C31.7388 34.9132 31.5287 34.9507 31.3237 34.987C30.7271 35.0938 30.1221 35.1476 29.516 35.1477Z" fill="%231E6EC2"/><path d="M32.075 31.892C31.7339 31.892 31.4574 31.6155 31.4574 31.2744V29.9522C31.4574 29.2823 30.9787 28.7117 30.3192 28.5956L29.4206 28.437C29.0847 28.3778 28.8604 28.0574 28.9197 27.7215C28.9788 27.3857 29.2989 27.1608 29.6352 27.2206L30.5337 27.3791C31.7846 27.5994 32.6927 28.6817 32.6927 29.9523V31.2744C32.6927 31.6155 32.4161 31.892 32.075 31.892Z" fill="%231E6EC2"/></g><defs><clipPath id="clip0_1157_1653"><rect width="21" height="21" fill="white" transform="translate(16 16)"/></clipPath></defs></svg>');
    margin-left: 5px;
}

.student-result .nav-link.active::before {
    content: url('data:image/svg+xml,<svg width="35" height="42" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="26" cy="26" r="26" fill="%2300D9A0"/><g clip-path="url(%23clip0_1157_1638)"><path d="M28.1731 37H19.1052C17.4048 37 16.0215 35.6166 16.0215 33.9163V19.0837C16.0215 17.3833 17.4048 16 19.1052 16H26.0381C26.7927 16 27.4998 16.3351 27.9782 16.9194L30.6901 20.2338C31.0562 20.682 31.2563 21.2428 31.2568 21.8215V22.7941C31.2568 23.1352 30.9802 23.4118 30.6391 23.4118C30.298 23.4118 30.0215 23.1352 30.0215 22.7941V21.8215C30.0213 21.528 29.9198 21.2435 29.7341 21.0161L27.0222 17.7018C26.9031 17.5558 26.753 17.4381 26.5828 17.3574C26.4125 17.2768 26.2265 17.235 26.0381 17.2353H19.1052C18.086 17.2353 17.2568 18.0645 17.2568 19.0837V33.9163C17.2568 34.9355 18.086 35.7647 19.1052 35.7647H28.1731C29.0317 35.7647 29.7708 35.1829 29.9706 34.3499C30.0501 34.0183 30.3834 33.814 30.7153 33.8934C31.0469 33.9729 31.2514 34.3063 31.1718 34.6381C30.8383 36.0287 29.6051 37 28.1731 37Z" fill="white"/><path d="M30.2276 22.5884H27.1727C26.019 22.5884 25.0805 21.6498 25.0805 20.4962V19.0884C25.0805 18.7473 25.357 18.4707 25.6981 18.4707C26.0392 18.4707 26.3158 18.7473 26.3158 19.0884V20.4962C26.3158 20.9687 26.7002 21.3531 27.1727 21.3531H30.2276C30.5686 21.3531 30.8452 21.6296 30.8452 21.9707C30.8452 22.3118 30.5686 22.5884 30.2276 22.5884ZM29.5155 31.5241C29.0202 31.5241 28.5288 31.4359 28.0645 31.2635L22.8861 29.3405C22.3864 29.1548 22.0508 28.6719 22.0508 28.1389C22.0508 27.6052 22.3867 27.1223 22.8868 26.9372L28.0646 25.014C29.0006 24.6665 30.0303 24.6665 30.9664 25.014C32.3508 25.5284 34.6023 26.3646 36.1448 26.9374C36.6442 27.1223 36.9801 27.6053 36.9801 28.139C36.9801 28.6719 36.6445 29.1547 36.145 29.3405C35.086 29.7335 33.9175 30.1674 33.9175 30.1674C33.5976 30.2863 33.2422 30.1232 33.1234 29.8034C33.0046 29.4837 33.1676 29.1282 33.4874 29.0094C33.4874 29.0094 34.6561 28.5754 35.7148 28.1825C35.7236 28.1792 35.7312 28.1732 35.7365 28.1654C35.7419 28.1576 35.7448 28.1484 35.7448 28.139C35.7448 28.1296 35.742 28.1204 35.7368 28.1127C35.7315 28.1049 35.724 28.099 35.7152 28.0956C34.1722 27.5226 31.9206 26.6863 30.5362 26.172C29.8776 25.9276 29.1531 25.9276 28.4945 26.172L23.3161 28.0954C23.3073 28.0987 23.2996 28.1047 23.2942 28.1125C23.2889 28.1203 23.286 28.1295 23.286 28.139C23.286 28.1583 23.2982 28.1759 23.3164 28.1826L28.4945 30.1055C29.1532 30.35 29.8777 30.35 30.5363 30.1055L31.8474 29.6188C32.1674 29.5001 32.5227 29.6631 32.6415 29.9828C32.7602 30.3026 32.5972 30.6581 32.2774 30.7769L30.9663 31.2636C30.502 31.4359 30.0107 31.5241 29.5155 31.5241Z" fill="white"/><path d="M29.516 35.1477C28.9094 35.1476 28.3041 35.0938 27.707 34.9868C27.5031 34.9507 27.2932 34.9131 27.0862 34.876C25.7055 34.6297 24.7031 33.4326 24.7031 32.0297V29.7382C24.7031 29.3971 24.9797 29.1206 25.3208 29.1206C25.6619 29.1206 25.9384 29.3971 25.9384 29.7382V32.0297C25.9381 32.4186 26.0747 32.7951 26.3244 33.0933C26.574 33.3914 26.9207 33.5921 27.3036 33.66C27.5105 33.6971 27.7197 33.7345 27.9236 33.7707C28.9765 33.9595 30.0545 33.9595 31.1074 33.7709C31.3125 33.7345 31.5217 33.697 31.728 33.6601C32.1109 33.5922 32.4576 33.3915 32.7073 33.0934C32.957 32.7952 33.0936 32.4186 33.0932 32.0297V29.5884C33.0932 29.2473 33.3698 28.9707 33.7109 28.9707C34.052 28.9707 34.3285 29.2473 34.3285 29.5884V32.0297C34.3285 33.4326 33.3263 34.6297 31.9454 34.8761C31.7388 34.9132 31.5287 34.9507 31.3237 34.987C30.7271 35.0938 30.1221 35.1476 29.516 35.1477Z" fill="white"/><path d="M32.075 31.892C31.7339 31.892 31.4574 31.6155 31.4574 31.2744V29.9522C31.4574 29.2823 30.9787 28.7117 30.3192 28.5956L29.4206 28.437C29.0847 28.3778 28.8604 28.0574 28.9197 27.7215C28.9788 27.3857 29.2989 27.1608 29.6352 27.2206L30.5337 27.3791C31.7846 27.5994 32.6927 28.6817 32.6927 29.9523V31.2744C32.6927 31.6155 32.4161 31.892 32.075 31.892Z" fill="white"/></g><defs><clipPath id="clip0_1157_1638"><rect width="21" height="21" fill="white" transform="translate(16 16)"/></clipPath></defs></svg>');
}

.student-result .nav-link h6 {
    font-size: 11px;
    color: var(--color-2);
    font-weight: 600;
}

.student-result .nav-link span {
    color: var(--color-3);
    display: block;
    font-size: 9px;
}

.student-result .nav-link.active {
    background-color: var(--color-25);
    border: 1px solid var(--color-green);
}

.student-result .student-detail img {
    width: 40px;
    height: 40px;
    margin-left: 15px;
}

.student-result .student-detail h2 {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

.student-result .examen-detail,
.student-result .result-detail {
    background-color: var(--color-white);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 20px 10px 10px 10px;
}

.student-result .examen-detail h5 {
    border-bottom: 1px solid var(--color-4);
    padding-bottom: 10px;
    margin-top: 20px;
    font-weight: bold;
}

.student-result .examen-detail label {
    font-weight: bold;
    padding-left: 0;
}

.student-result .examen-detail input {
    font-weight: bold;
}

.student-result .examen-detail textarea {
    resize: none;
    font-weight: bold;
}

.student-result h3 {
    background-color: var(--color-blue);
    color: var(--color-white);
    width: 100px;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    font-size: 15px;
}

.student-result {}

/* Progress Cercle  */



.progress-block .percent {
    position: relative;
    width: 59px;
    /* Adjusted width */
    margin: 0 auto;
}

.progress-block svg {
    position: relative;
    width: 60px;
    /* Adjusted width */
    height: 60px;
    /* Adjusted height */
    transform: rotate(-90deg);
}

.progress-block svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #B6CDE5;
    stroke-width: 5;
    /* Adjusted stroke width */
    stroke-linecap: round;
}

.progress-block svg circle:last-of-type {
    stroke-dasharray: 157;
    /* Circumference of the circle (2 * π * r) */
    stroke-dashoffset: calc(157 - (157 * var(--percent)) / 100);
    /* Adjusted based on the new circle circumference */
}

.progress-block .number {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-block .number h4 {
    font-size: 14px;
    /* Adjusted font size */
    font-weight: bold;
}


.progress-block h2.title {
    margin: 15px 0 0;
    /* Adjusted top margin */
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.student-result .help {
    float: none;
    margin-right: 5px;
}

.progress-block:nth-child(1) svg circle:last-of-type {
    stroke: #1E6EC2;
}

.progress-block:nth-child(1) svg.greenme circle:last-of-type {
    stroke: var(--color-green);
}


/* END Progress Cercle  */

.excellent-status {
    background-color: var(--color-green);
    color: var(--color-white);
    border-radius: 4px;
    padding: 5px 15px 5px 15px;
    font-weight: bold;
}

.result-detail input {
    font-weight: bold;
    text-align: right;
}


.title-page {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.title-page span {
    font-weight: 600;
    font-size: 32px;
    padding: 0 15px;
}

.bg-transparent {
    background-color: transparent;
}

.examun-sidebar .nav,
.examun-tab-content,
.content-box {
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #E2ECF5;
    padding: 15px 10px 20px;
    width: 36%;
}
.examun-tab-content{
    padding: 20px;
}
.badge-input{
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 8px 20px;
    background-color: #F4F8FC;
}
.examun-tab-content-support {
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #E2ECF5;
    padding: 15px 10px 20px;
    width: 36%;
}
.examun-sidebar.full-tabs .nav{
    width: 100%;
}
.examun-sidebar .nav .nav-link {
    display: flex;
    color: var(--color-9);
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: 10px;
    text-align: right;
    justify-content: flex-end;
    border: 1px solid transparent;
}

.examun-sidebar .nav .nav-link svg {
    margin: 0 8px;
}

.examun-sidebar .nav .nav-link.fill-nav-link svg path {
    fill: var(--color-9);
    stroke: transparent !important;
}

.examun-sidebar .nav .nav-link.fill-nav-link:hover svg path {
    stroke: transparent;
    fill: var(--color-blue)
}

.examun-sidebar .nav-pills .nav-link.active,
.examun-sidebar .nav-pills .show>.nav-link {
    background-color: #E8F0F9;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

.nav-link.active.fill-link svg path,
.nav-link.fill-link:hover svg path {
    fill: var(--color-blue);
}

.nav-link.active.stroke-link svg path,
.nav-link.stroke-link:hover svg path {
    stroke: var(--color-blue);
}

.examun-sidebar .nav .nav-link:hover,
.examun-sidebar .nav .nav-link:active,
.examun-sidebar .nav .nav-link:focus {
    background-color: #E8F0F9;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

.sub-title {
    display: flex;
    align-items: center;
}
.sub-title-and-img {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sub-title h3 {
    margin: 0 10px;
}
.sub-title-and-img p{
    max-width: 350px;
}
.sub-title-and-img h3{
    color: #292121;
    font-weight: 500;
    font-size: 32px;
    line-height:46.72px;
    font-family: "FF Shamel Rounded";
}

.examun-tab-content {
    width: 70%;
}

.examun-tab-content-support {
    width: 100%;
    justify-content: space-between;
}

.btn-primary {
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
    border-radius: 12px;
    padding: 12px 18px;

}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #03C18F !important;
    border-color: #03C18F !important;
    color: var(--color-white);
}

.btn-blue {
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-white);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;

}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active {
    color: var(--color-white) !important;
    background-color: #185ea6 !important;
    border-color: #185ea6 !important;
}


.btn-brown {
    background-color: var(--color-16);
    border: 1px solid var(--color-16);
    color: var(--color-white);
    border-radius: 12px;
    padding: 5px 18px;
    font-size: 14px;

}

.btn-brown:hover,
.btn-brown:focus,
.btn-brown:active {
    color: var(--color-white) !important;
    background-color: #B48B72 !important;
    border-color: #B48B72 !important;
}


.examun-sidebar .sub-nav-pills .nav-link {
    border-radius: 8px;
}

.examun-sidebar .sub-nav-pills .nav-link.active {
    background-color: var(--color-blue);
    color: var(--color-white);
}

table.dataTable th {
    background-color: #E2ECF5 !important;
}

table .btn-blue{
    padding: 5px 10px;
    border-radius: 8px;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: center;
}

table.dataTable th,
table.dataTable td {
    text-align: center;
    font-size: 13px;
}

table {
    border: 1px solid #E2ECF5;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #1e6ec2;
    border-color: #1e6ec2;
}

.page-link {
    color: #1e6ec2;
}

.badge-absent,
.badge-present {
    display: inline-block;
    padding: 5px 25px;
    border-radius: 25px;
}

.new-tab.nav {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.new-tab.nav .nav-link {
    margin-left: 15px;
}

.badge-absent {
    background-color: #F8E8E8;
    color: #BD1515;
}

.badge-present {
    background-color: #E8F0EE;
    color: #196956;
}

.exam-box {
    padding: 15px;
    border: 1px solid #E2ECF5;
    border-radius: 10px;
    background-color: #f4f8fc3b;
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.exam-box:last-child() {
    margin-bottom: 0;
}

.exam-box-info {

    padding: 0 15px;
}

.exam-box-info span {
    font-weight: 500;
}

.exam-box-info p {
    font-size: 13px;
    margin-bottom: 4px;
}

.exam-box-info small {
    font-weight: 600;
}

.images-block {
    display: flex;
}

.quran-block-inner {
    display: flex;
    align-items: center;
}

.btn-arrow {
    border: 0;
    background-color: transparent;
}

.quran-block-inner .arrow {
    padding: 0 15px;
}

.btn-prev,
.btn-next {
    background-color: var(--color-blue) !important;
    color: var(--color-white);
}

.btn-prev:hover,
.btn-next:hover {
    background-color: #175ba2 !important;
    color: var(--color-white);
}

.quran-block-inner button {
    background-color: transparent;
    border: none;
}

.quran-block-inner button img {
    width: 14px;
}

.text-left {
    text-align: left;
}

.label-control {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-control {
    font-size: 14px;
    padding: 12px 18px;
    border: 1px solid #E2ECF5;
    border-radius: 8px;

}

.hr {
    border-color: #d1d4d6
}

.form-group {
    margin-bottom: 10px;
}

select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.modal-header .close {
    background-color: transparent;
    border: 0;
}

.btn-secondary {
    border-radius: 12px;
    padding: 12px 18px;
    background-color: #BC9A80;
    border-color: #BC9A80;
}

.btn-secondary:hover {
    background-color: #bba595;
    border-color: #bba595;
}

.cards .info-card {

    padding: 40px 20px;
    border-radius: 20px;
     margin-bottom: 30px;
}
.shop-card .d-flex.gap-2 img{
    width: 20px;
}
.shop-card .d-flex.gap-2 {
    align-items: center;
}
.shop-card  .handle-counter input{
    font-size: 12px;
    width: 25px;
}
.card-shop-point span,
.card-shop-point strong{
    font-size: 12px;
}
.cards .shop-card {

padding: 10px;

border-radius: 20px;

background-color: #FCFDFE;

border: 1px solid rgba(233, 241, 247, 1);

margin-bottom: 30px;
}
.point-block {
    border: 1px solid #E2ECF5;
    border-radius: 15px;
    padding: 15px;
    background-color: #fff;
}
.point-block span {
    font-size: 20px;
    font-weight: 400;
}
.point-block strong {
    color: var(--color-16);
    font-size: 22px;
    font-weight: 600;
}
.shop-cart-item {
    display: inline-block;
    position: relative;
}
.shop-cart strong {
    background-color: var(--color-16);
    color: #fff;
    width: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 100%;
    height: 45px;
    position: absolute;
    right: -30px;
    bottom: 10px;
}
.cards .shop-card span {

color: rgba(0, 0, 0, 1);

font-weight: 700;

line-height: 20px;

font-size: 14px;

margin-right: 0;

padding-top: 10px;
}

.cards .shop-card p {

    color: rgba(188, 154, 128, 1);
    font-weight: 500;
    line-height: 16.8px;
    font-size: 14px;

    margin-right: 10px;
}

.number {
    display: flex;
    margin-right: 10px;
}

.number input {
    width: 60px;
    text-align: center;
    font-size: 26px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
}

.number span {
    cursor: pointer;
}

.cards .shop-card .number .minus,
.plus {
    width: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 8px 5px 8px 5px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.cards .programes-card {

    padding: 40px 20px;
    border-radius: 20px;
    background-color: #FCFDFE;
    border: 1px solid rgba(233, 241, 247, 1);
    margin-bottom: 30px;
}

.cards .programes-card span {

    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    line-height: 24px;
    font-size: 18px;

    margin-right: 10px;
}

.cards .programes-card p {
    color: #636262;
    font-weight: 500;
    line-height: 21px;
    font-size: 15px;

    margin-right: 10px;
}

.modal-title {
    font-size: 24px;
    font-weight: 600;
}
.modal{
    --bs-modal-width: 700px;
}
.behaviour-item{
    background-color: var(--color-white);
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 12px;
}
.right-behaviour-side{
    display: flex;
    align-items: center;
}
.left-behaviour-side .dte-item{
color: var(--color-3);
}

.settings-cards a{
    text-decoration: none;
    color: var(--color-black);
    font-weight: 600;
}

.w-65{
    width: 65%;
}
.budget-block{
    text-align: center;
}
.budget-block h3{
    margin: 15px 0;
    font-weight: 600;
}
.budget-block h4{
    font-size: 42px;
    color: var(--color-green);
    font-weight: 700;
}
.profile-block{
    border: 1px solid #E2ECF5;
    border-radius: 15px;
    padding: 20px;
}
.list-check {
list-style: none;
padding: 0;
 flex-direction: column;
 display: flex;
}
.list-check  li{
    display: flex;
    color: #636262;
    font-weight: 600;
    align-items: center;
    margin-bottom: 10px;
}
.list-check  li span{
padding-left: 8px;
font-size: 20px;
}
.modal h3{
    font-weight: 700;
}

.handle-counter { overflow: hidden; }

.handle-counter .counter-minus,  .handle-counter .counter-plus,  .handle-counter input {
  float: left;
  text-align: center;
}

.handle-counter .counter-minus,  .handle-counter .counter-plus {text-align: center;font-size: 17px;height: 30px;font-weight: 600;}

.handle-counter input {
  width: 60px;
  font-weight: 600;
  font-size: 16px;
  height: 30px;
  background-color: #fff;
  border:0,
}
.handle-counter{
    border-radius: 8px;
    border: 1px solid #ddd;
}
.counter-plus,
.counter-minus   {
    background: none;
    border: 0;
}
.profile-block{
    width: 100%;
}


#Modal-1 .modal-dialog{
    max-width: 950px;
}

#Modal-1 table td,
#Modal-1 table th{
    font-size: 12px;
}
.contant-box-avatar img{
    margin-left: 15px;
}
.contant-box-avatar span{
    font-size: 18px;
    font-weight: 600;
}
#pills-tab{
    justify-content: center;
margin-top: 20px;
border-bottom: 1px solid #FFF5EE;
}
#pills-tab   li button{
    color:var(--color-16);
    border-radius: 0;
    font-size: 15px;
}

#pills-tab  li button.active{
    background-color: transparent;
    color: var(--color-16);
    font-weight: 700;
    border-bottom: 3px solid var(--color-16);
}
#pills-tab li{
    margin: 0 15px;
}
#pills-tabContent-box{

    padding: 25px;
}

#pills-2 .nav-link{
    color: var(--color-12);
    border-radius: 10px;
}
#pills-2 .nav-link.active{
color: var(--color-white);
background-color: var(--color-blue);
}
.intern-box{

    background-color: #FFFCFA;
    padding: 15px;
    border: 1px solid #F2F2F2;
    border-radius: 15px;
}
.right-intern-box .btn-round-exam,
.intern-box-info .btn-round-exam{
width: 45px;
height: 45px;
line-height: 45px;

}
.right-intern-box .btn-blue,
.intern-box-info .btn-blue{
padding: 8px 14px;
font-size: 12px;
}

.icon-intern-box{
    width:40px;
    display: inline-block;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color:#00D9A0;
}
.intern-box h3{
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}
.intern-box  p{
    margin: 0;
    margin-top: 10px;
    color: #BF967C;
}
.intern-box-info p{
    color: #606060;
}
.intern-box-info{
    padding-top: 15px;
}
.intern-box-info p strong{
    display: block;
}
.intern-box-info p small{
    font-size: 15px;
}
.intern-box{
    margin-bottom: 30px;
}
.btn-round-exam{
    width:60px;
    display: inline-block;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    background-color:var(--color-16);
}
.examun-sidebar .nav-pills-exam{
    border: 0;
    margin-top: 20px;
    width: 100%;
}
.examun-sidebar .nav-pills-exam .nav-link.active,
.examun-sidebar .nav-pills-exam .show>.nav-link {
    background-color: #1E6EC2;
    border-radius: 10px;
    color: #fff;
    border: 1px solid #1E6EC2;
}
.nav-pills-exam li{
margin-right: 15px;
}


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

 .button-radio label {
    display: inline-block;
    background-color: #F4F8FC;
    padding: 10px 30px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 0;
    margin-left: 15px;
    border-radius: 10px;
}
.button-radio input[type="radio"]:checked + label {
    background-color:#BF967C;
    border-color: #BF967C;
    color: #fff;
}


.radio-block {
    display: flex;
}

.result-content-box #pills-tab{
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #FFF5EE!important;
}
.result-content-box #pills-tab li button:hover,
.result-content-box #pills-tab li button:active,
.result-content-box #pills-tab li button:focus{
    color: #BF967C;
    background-color: transparent;
    border: 0!important;
}
.result-content-box #pills-tab li button.active{
    border: 0;
    border-bottom: 3px solid var(--color-16)!important;
}
.result-content-box #pills-tab li button{
    margin-bottom: 0;
}
/*-----------responsive----------------*/




/* new code */
.content-img-title {
    background-color: var(--color-white);
    border-radius: 24px;
    padding: 15px;
}
.content-img-title span {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}
.stat-box{
    background-color: var(--color-white);
    border-radius: 24px;
}

.quran-view  {
    border-radius: 16px;
    background-color: var(--color-white);
    padding: 16px;
    position: relative;
}

img.quran-page{
    width: 100%;
}
.player-block {
    background-color: var(--color-blue);
    border-radius: 12px;
    padding: 12px;
}

.player-block span{
    color: var(--color-white);
    font-weight: bold;
}
.review-tab-info{
    background-color: var(--color-white);
    border-radius: 12px;
}

.review-tab-info ul.nav{
    background-color: var(--color-16);
    border-radius: 12px;
    padding: 8px;
}


.review-tab-info button.nav-link{
    background-color:var(--color-26)!important;
    color: var(--color-white) !important;
    margin-top: 3px;
}
.review-tab-info button.nav-link.active{
    background-color: var(--color-white) !important;
    color: var(--color-16) !important;
    opacity: 1;
    font-family: cairo-semibold;
}


.review-tab-info{
    font-family: cairo-semibold;
}


#player-container #play-pause {
    cursor: pointer;
    text-indent: -999999px;
    height:40px;
    width: 40px;
    padding: 12px 18px;
    z-index: 2;
       background-repeat: no-repeat!important;
      background-position: center;
      background-size: 16px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:20px;
  }
  .play {
    background-image: url('../images/play.svg');
  }
  .pause {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==)!important;
  }
  .block-from-to {
    background-color: var(--color-27);
    border-radius: 12px;
    padding: 20px;
  }

  .block-from-to  .from-to span:first-child{
    color: var(--color-brown);
    font-size: 21px;
    margin: 10px 0;
    font-family: 'cairo-semibold';
  }
  .block-from-to  .from-to span:last-child{
    font-size: 20px;
    margin: 20px;
    font-family: 'cairo-semibold';
  }
  .cheikh-list{
    background-color: var(--color-blue);
    border-radius: 12px;
    padding: 12px;
  }
  .cheikh-list svg{
    margin-left: 5px;
  }
  .cheikh-list button{
    padding: 0;
    padding-left: 5px;
  }
  .headphone-part{
    background-color: var(--color-white);
    color: var(--color-blue);
    padding: 7px 12px;
    font-family: 'cairo-semibold';
    font-size: 12px;
  }
  .cardpart{
    color: var(--color-white);
    font-family: 'cairo-semibold';
    font-size: 12px;
  }


 .select-with-img {
    margin-top: 22px;
 }
 .select2-container{
    width: 100% !important;
 }
 .select-with-img .select2-container--default .select2-selection--single {
    border-color: #fff;
    height: 53px;
    padding: 7.5px 0;
    border-radius: 8px;
    width: 100%;
  }
  .select-with-img .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 51px;
  }

  .select-with-img .select2-container {
    border-radius: 8px;
  }
  .select-with-img .select2-dropdown {
    border-radius: 0;
    box-shadow: #444 0px 3px 5px;
    border: 0;
  }
.player-actions .block-action button{
    border: 1px solid #E2ECF5;
    padding: 19px 12px;
    border-radius: 12px;
    width: 100%;
}


.player-actions .block-action button:hover{
    background-color: var(--color-blue);
}
.player-actions .block-action button:hover span{
    color: var(--color-white);
}


.player-actions span{
    color: var(--color-28);
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
}

.chart-cercle-box {
    position: relative;
}
.chart-cercle-box .res-value{
    position: absolute;
    top: 29px;
    left: 31px;
    font-size: 23px;
    font-weight: bold;
}

.text-blue{
    color: var(--color-blue);
}
.text-green{
    color: var(--color-green);
}
.text-brown{
    color: var(--color-brown);
}
.top-blue-box{
    background-color: var(--color-blue);
    border-radius: 12px;
    padding: 31px 11px;
}
.top-blue-box .blue-select{
    width: 90%;
    background-color: var(--color-29);
    color: var(--color-white);
    border: none;
}
.top-blue-box select{
    height: 42px;
    padding: 3px 15px;
    /* font-size: 13px; */
}
.chat-block  .nav{
    width: 100%;
    padding-top: 10px;
}
.chat-block  .examun-tab-content{
    width: 100%;
}
.user-msg{
    border: 1px solid var(--color-4);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
    width: 100%;
}
.user-msg .msg-icon {
    background: url('data:image/svg+xml,<svg width="45" height="45" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 26C52 40.3594 40.3594 52 26 52C11.6406 52 0 40.3594 0 26C0 11.6406 11.6406 0 26 0C40.3594 0 52 11.6406 52 26Z" fill="%23E9F1F9"/><path d="M20.4737 15.6873C19.2059 15.6887 17.9905 16.1935 17.0949 17.0909C16.1992 17.9882 15.6967 19.2046 15.6977 20.4724L15.6886 27.0855C15.688 28.2913 16.145 29.4524 16.9674 30.3344C17.7897 31.2163 18.9161 31.7532 20.119 31.8368V35.9684C20.1192 36.0364 20.1395 36.1027 20.1773 36.1592C20.2152 36.2156 20.2689 36.2596 20.3317 36.2856C20.3945 36.3115 20.4635 36.3184 20.5302 36.3051C20.5968 36.2919 20.6581 36.2593 20.7063 36.2114L25.0366 31.8719H31.5393C32.1671 31.8716 32.7887 31.7475 33.3685 31.5068C33.9483 31.266 34.475 30.9134 34.9184 30.469C35.3619 30.0246 35.7134 29.4971 35.9528 28.9168C36.1923 28.3365 36.315 27.7146 36.314 27.0868V20.4737C36.3166 19.8462 36.1953 19.2244 35.957 18.6439C35.7188 18.0634 35.3683 17.5356 34.9257 17.0908C34.4831 16.6461 33.9571 16.293 33.3777 16.0519C32.7984 15.8109 32.1772 15.6865 31.5497 15.686L20.4737 15.6873ZM22.5616 22.7487C23.128 22.7487 23.5932 23.2151 23.5932 23.7803C23.5932 24.3454 23.128 24.8118 22.5616 24.8118C21.9951 24.8118 21.5313 24.3454 21.5313 23.7803C21.5313 23.2151 21.9964 22.7487 22.5616 22.7487ZM25.9993 22.7487C26.5645 22.7487 27.0296 23.2151 27.0296 23.7803C27.0283 24.0532 26.9193 24.3146 26.7265 24.5077C26.5336 24.7009 26.2723 24.8101 25.9993 24.8118C25.7262 24.8105 25.4646 24.7014 25.2714 24.5082C25.0782 24.315 24.9691 24.0534 24.9678 23.7803C24.9678 23.2151 25.4329 22.7487 25.9993 22.7487ZM29.4371 22.7487C30.0023 22.7487 30.4687 23.2151 30.4687 23.7803C30.4674 24.0534 30.3582 24.315 30.1651 24.5082C29.9719 24.7014 29.7103 24.8105 29.4371 24.8118C29.164 24.8105 28.9024 24.7014 28.7092 24.5082C28.516 24.315 28.4069 24.0534 28.4055 23.7803C28.4055 23.2151 28.872 22.7487 29.4371 22.7487Z" fill="%231E6EC2"/></svg>');

    width: 80px;
    margin-left: 10px;
    height: 45px;
    background-repeat: no-repeat;
}
.user-msg:hover{
    border: 1px solid var(--color-green);
    background-color: var(--color-green-hover);
}
.user-msg:hover  .msg-icon{
    background: url('data:image/svg+xml,<svg width="45" height="45" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 26C52 40.3594 40.3594 52 26 52C11.6406 52 0 40.3594 0 26C0 11.6406 11.6406 0 26 0C40.3594 0 52 11.6406 52 26Z" fill="%2300D9A0"/><path d="M20.7225 14.7185C19.397 14.72 18.1264 15.2478 17.1901 16.1859C16.2537 17.1241 15.7283 18.3957 15.7294 19.7211L15.7199 26.6349C15.7193 27.8955 16.1971 29.1094 17.0568 30.0314C17.9165 30.9534 19.0941 31.5147 20.3517 31.6021V35.9215C20.3519 35.9926 20.3731 36.0619 20.4127 36.1209C20.4522 36.18 20.5084 36.2259 20.574 36.2531C20.6397 36.2802 20.7119 36.2874 20.7816 36.2736C20.8513 36.2598 20.9153 36.2256 20.9656 36.1755L25.4928 31.6388H32.2911C32.9474 31.6385 33.5973 31.5087 34.2034 31.2571C34.8096 31.0054 35.3602 30.6367 35.8238 30.1721C36.2874 29.7075 36.6549 29.1561 36.9052 28.5494C37.1556 27.9427 37.2839 27.2926 37.2828 26.6362V19.7225C37.2855 19.0665 37.1587 18.4164 36.9096 17.8095C36.6606 17.2026 36.2942 16.6509 35.8314 16.1859C35.3687 15.7209 34.8187 15.3518 34.2131 15.0997C33.6074 14.8477 32.958 14.7177 32.302 14.7172L20.7225 14.7185ZM22.9053 22.1009C23.4975 22.1009 23.9838 22.5885 23.9838 23.1794C23.9838 23.7702 23.4975 24.2578 22.9053 24.2578C22.3131 24.2578 21.8281 23.7702 21.8281 23.1794C21.8281 22.5885 22.3144 22.1009 22.9053 22.1009ZM26.4993 22.1009C27.0902 22.1009 27.5764 22.5885 27.5764 23.1794C27.575 23.4647 27.4611 23.738 27.2595 23.9399C27.0578 24.1418 26.7847 24.2561 26.4993 24.2578C26.2137 24.2564 25.9402 24.1423 25.7383 23.9404C25.5363 23.7384 25.4223 23.4649 25.4208 23.1794C25.4208 22.5885 25.9071 22.1009 26.4993 22.1009ZM30.0934 22.1009C30.6842 22.1009 31.1719 22.5885 31.1719 23.1794C31.1704 23.4649 31.0563 23.7384 30.8544 23.9404C30.6524 24.1423 30.379 24.2564 30.0934 24.2578C29.8078 24.2564 29.5343 24.1423 29.3323 23.9404C29.1304 23.7384 29.0163 23.4649 29.0149 23.1794C29.0149 22.5885 29.5025 22.1009 30.0934 22.1009Z" fill="white"/></svg>');
    width: 80px;
    margin-left: 10px;
    background-repeat: no-repeat;
}



.user-msg svg{
    margin-left: 10px;
}
.user-msg h6{
    font-weight: bold;
    margin-bottom: 1px;
    font-size: 15px;
}
.user-msg span{
    color: var(--color-3);
    font-size: 12px;
}
.user-msg p{
    color: var(--color-3);
    font-size: 12px;
    font-weight: 600;
    margin: 5px 0 0 0;
}

.user-msg-content {
    padding: 10px 0;
}
.user-msg-content .msg-header{

padding: 10px 20px;

border-bottom: 1px solid var(--color-4);
}

.user-msg-content h4{
    color: var(--color-2);
    font-weight: 500;
    font-size: 18px;
}
.user-msg-content span{
    color: var(--color-3);
    font-size: 14px;
}
.user-msg-content h5{

font-size: 16px;

margin-top: 20px;
}

.user-msg-content p{
    color: var(--color-3);
    margin-top: 20px;
    line-height: 40px;
}

.user-msg-create select{

}
.chosen-container-multi .chosen-choices {
    border-radius: 12px;
    height: 50px;
    box-shadow: none;
    border: 1px solid var(--color-4)
}
.chosen-rtl .chosen-choices li.search-choice {
    margin: 7px 5px 3px 0;
    padding: 3px 5px 3px 19px;
    height: 35px;
    background: var(--color-1);
    border: none;
    border-radius: 8px;
}
.chosen-container-multi .chosen-choices li.search-choice span {
    color: var(--color-2);
    font-weight: 600;
    top: 7px;
    position: relative;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {

    top: 13px;
}


.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 50px;
}
.br-12 {
    border-radius: 12px;
}
.quran-section img{
    width: 100%;
}

.library-content .player-actions span {
    color: var(--color-brown);
    font-size: 16px;
    font-weight: 400;
    margin-top: 6px;
    margin: 0 auto;
}
.library-content .player-actions .block-action button {
    border: none;
}

.library-content h3 {
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 0;
}
.library-content h3 {
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 0;
}

.library-content h5 {
    font-weight: 700;
}

.library-content .pnumber {
    background-color: var(--color-4);
    color: var(--color-blue);
    width: 50px;
    font-weight: 600;
    padding: 12px;
}
.middle-title {
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.library-content .player-actions .block-action svg,
.library-content .player-actions .block-action img {
    margin: 0 auto;
}
.btn-book{
    position: absolute;
    left: -40px;
    top: -40px;
}

.content-box-student{
    border: 1px solid #E2ECF5;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-box-student-left{
    display: flex;

}
.content-box-student-info{
    padding-right: 15px;
}
.content-box-student-info h4{
    color: var(--color-12);
    font-weight: 600;
}
.content-box-student-info span{
    color: var(--color-3);
    padding-left: 10px;
}
.content-box-student-info span  strong{
    padding-left: 5px;
    color: var(--color-black);
}
.content-box-student{
    margin-bottom: 20px;
}
/* end new code */



@media (min-width: 1700px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1620px;
    }
}

@media (max-width: 1075px) {

    .sidebar .nav-link {
        font-weight: 500;
        color: var(--color-black);
        font-size: 18px;
        padding: 16px 10px 16px 1px;
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
        border-radius: 15px;
    }
}

@media (min-width: 768px) {
    .container  {
        max-width: 95%;
    }
    .left-content,
    main {
        padding: 50px 30px 0 0;
    }

    .sidebar .offcanvas-lg {
        position: -webkit-sticky;
        position: sticky;
        top: 48px;
    }

    .navbar-search {
        display: block;
    }
}


@media only screen and (max-width: 1024px) and (min-width: 768px) {

    main.container {
        max-width: 99%;
    }

    .student-info .dropdown button,
    .dropdown button.green {
        padding: 1px 8px 1px 3px;
        /* width: 51px; */
        font-size: 14px;
        top: 25%;
    }

    .list .student-name {
        font-size: 15px;
    }

    .list .mistakes span:first-child,
    .list .mistakes span:nth-child(3) {
        font-size: 14px;
    }

    .list .mistakes span:last-child,
    .list .mistakes span:nth-child(2) {
        font-size: 13px;
        color: var(--color-7);
        font-weight: 500;
        margin-left: 6px;
    }

    .left-content,
    main {
        padding: 0;
    }

    .students-list {
        padding-left: 0;
    }

    .btn-stat {
        font-size: 12px;
        padding: 3px 8px 5px 7px;
        width: 83px;
        text-align: center;
    }

    .student-info img {
        width: 33px;
        height: 33px;
    }

    .presence-details div.waiting {
        padding: 4px 6px 4px 6px;
    }

    .presence-details div.present {
        padding: 4px 11px 4px 11px;
    }

    .presence-details div.absent-permissed {
        padding: 4px 11px 4px 11px;
    }
}

@media (max-width: 820px) {
    .dropdown-toggle::after {
        margin-right: 0;

    }
    .top-blue-box .blue-select {
        margin-bottom: 10px;
    }
    .d-desktop {
        display: none;
    }

    .add-btn {
        margin-top: auto;
        margin-bottom: 10px !important;
    }

    .remove-btn {
        margin-bottom: 10px !important;
        margin-top: auto;
    }

    .quran img {
        width: 100%;
    }

    .presence-details div {
        margin: 1%;
    }

    .presence-details {
        margin-top: 10px;
    }


    .type-list {
        justify-content: space-between !important;
    }

    .type-list div {
        margin-left: 0px;
    }

    .radio-custom-label {
        font-size: 10px;
    }
}

.button-left, .button-right {
    display: inline-block;
    cursor: pointer;
    font-size: 24px; /* Adjust icon size */
    color: #000; /* Default icon color */
    padding: 10px; /* Add padding for better clickable area */
    border-radius: 50%; /* Make it circular */
    background-color: transparent; /* No background by default */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.button-left:hover, .button-right:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Light background on hover */
    color: #007bff; /* Change icon color on hover */
}


.btn-success {
    background-color: #337cc9;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 16px;
    width:100%
}

.btn-success i {
    margin-right: 5px;
}

.btn-success:hover {
    background-color: #218838;
}