.container-4 {
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
}

body.light-mode #text,
body.light-mode .book-title,
body.light-mode .text-vetd,
body.light-mode .choose-beyt {
    color: rgba(85, 85, 85, 1) !important;
}
body.light-mode .book-bread .breadcrumb-item.active {
    color: rgba(85, 85, 85, 1) !important;
}

body.light-mode .book-bread .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(85, 85, 85, 1) !important;
}

body.light-mode #toggleButton {
    background: linear-gradient(
        90deg,
        rgb(255 247 247) 80%,
        rgba(255, 255, 255, 0) 100%
    );
}

body.light-mode .book-check-lable {
    background-color: #f1f1f1 !important;
}

body.light-mode .neither {
    color: #555555;
}

body.light-mode .second-container input::placeholder {
    color: #555555;
}

body.light-mode .book-check-lable span {
    color: rgba(85, 85, 85, 1) !important;
}

body.light-mode .band p {
    color: rgba(51, 51, 51, 1) !important;
}

body.light-mode .book-prevnext {
    background-color: rgba(105, 204, 234, 0.2) !important;
    color: black !important;
}

body.light-mode .book-prevnext img {
    filter: invert(1);
}

body.light-mode .concordance {
    background-color: #f1f1f1 !important;
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 9%) !important;
}

body.light-mode .search-box img {
    filter: invert(1);
}

.search-box .next-btn img,
.search-box .prev-btn img {
    filter: unset !important;
}

body.light-mode .active-highlight {
    color: rgba(85, 85, 85, 1) !important;
}

body.light-mode .search-box input {
    background-color: #f1f1f1 !important;
    border: 1px solid rgba(37, 188, 223, 1);
    color: #000000;
}

body.light-mode .book-info-lable {
    background-color: rgba(220, 240, 246, 1) !important;
}

body.light-mode .search-box input::placeholder {
    color: rgba(85, 85, 85, 0.5);
}

.book-title {
    color: #ffffffc5;
    border-bottom: 2px solid #25bcdf;
    font-size: 20px;
}

.book-title-2 {
    color: #ffffffc5;
    border-bottom: 2px solid #25bcdf;
    font-size: 20px;
}

#naving2 {
    background-color: #333333;
}
#offcanvas-search {
    min-height: 90%;
    background-color: #2c2c2c;
}

.neither {
    font-size: 13px;
    color: #ffffff80;
}

.book-bread .breadcrumb-item a {
    color: #25bcdf;
    font-size: 12px !important;
    font-family: sans-light !important;
}

.book-bread .breadcrumb-item.active {
    color: #ffffff !important;
    font-size: 12px !important;
    font-family: sans-light !important;
}

.book-bread .breadcrumb-item + .breadcrumb-item::before {
    opacity: 1 !important;
    color: white !important;
    font-size: 14px;
    float: inherit;
    font-family: sans-light;
}

#text {
    font-size: 18px;
}

.limi-lim-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* تعداد خطوط قابل نمایش */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

#toggleButton {
    text-align: left;
    width: 60px;
    background: linear-gradient(
        90deg,
        rgba(44, 44, 44, 1) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    color: #1ba9e1;
}

.book-prevnext {
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    padding: 7px 14px;
    font-size: 12px;
    font-family: sans-light;
}

.concordance {
    border-radius: 15px;
    background: #353535;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.search-box input {
    background-color: #353535;
    border: 1px solid rgba(255, 255, 255, 0.254);
    color: white;
    caret-color: #d9d9d9;
}

.search-box input:focus {
    background-color: #353535;
    border: 1px solid #25bcdf !important;
    box-shadow: unset !important;
    color: white;
}

.search-box input::placeholder {
    color: #ffffff63;
    font-size: 11px;
    font-family: sans-ultra-light;
}

.search-box input::placeholder {
    color: #ffffff63;
}

.sit-blue {
    color: #25bcdf;
}

.highlight {
    background-color: #2a4950;
    color: #69ccea;
}

.highlight.active {
    background-color: #207dc1;
    color: #2a4950;
}

.btn:active {
    border-color: rgba(245, 222, 179, 0) !important;
}

.book-info-lable {
    background-color: #ffffff26;
    padding: 5px 10px;
}

.book-check-lable {
    background-color: #353535;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    width: 59px;
}

.custom-checkbox {
    display: none;
}

/* استایل چک باکس سفارشی */
.custom-checkbox-label {
    position: relative;
    display: inline-block;
    width: 23px;
    height: 23px;
    border: 1px solid #1ba9e1;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* SVG تیک */
.custom-checkbox:checked + .custom-checkbox-label img {
    opacity: 1; /* نمایش تیک SVG هنگام انتخاب */
}

/* مخفی کردن SVG در حالت عادی */
.custom-checkbox-label img {
    position: absolute;
    top: -2px;
    left: 4px;
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.3s;
}

.max {
    width: max-content !important;
}

/* تغییر رنگ پس‌زمینه چک باکس هنگام انتخاب */
.custom-checkbox:checked + .custom-checkbox-label {
    background-color: #1ba9e1;
}

.search-input-mod {
    width: 180px;
}

.hide-copy {
    display: none;
}

@keyframes animationforcopy {
    0% {
        transform: translateY(100%); /* پایین صفحه */
        opacity: 0; /* شفافیت صفر */
    }
    100% {
        transform: translateY(0); /* به حالت اولیه یعنی بالا */
        opacity: 1; /* شفافیت کامل */
    }
}

.concordance-container {
    max-width: 75%;
}

.animation-for-copy,
.animation-for-copy2,
.animation-for-english {
    padding: 10px 70px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    background: #10a1c2;
    animation: animationforcopy 0.3s ease-out;
}

.material-symbols-rounded {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
    color: white;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
}

.progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-container input[type="range"] {
    flex-grow: 1;
    accent-color: white;
}

.time {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}

.volume input {
    width: 70px;
    accent-color: white;
}

#offcanvasBottom-mp3 {
    height: max-content;
    background-color: #353535;
    border: 1px solid #616161;
}

.mp3-container {
    max-width: 85%;
}

#seekBar {
    appearance: none;
    height: 4px;
    background-color: #eeeeee;
    accent-color: #eeeeee;
}

.range-mom:hover .volumeBar-parent {
    display: flex;
}

@keyframes sound {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }
    100% {
        transform: translateX(-10px);
        opacity: 1;
    }
}

@keyframes sound2 {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
.volumeBar-parent {
    display: none;
    rotate: 90deg;
    bottom: 155%;
    width: 120px !important;
    right: -33px !important;
    padding: 10px;
    background-color: #353535;
    border-radius: 10px;
    animation: sound 0.5s ease-in-out forwards;
    border: 1px solid #616161;
}

.anime {
    animation: sound 0.5s ease-in-out forwards;
}

.font-16 {
    font-size: 16px;
}

#copy-btn {
    animation: sound 0.5s ease forwards;
}

.speacker {
    border-left: 1px solid #eeeeee;
}

.speacker span {
    color: #eeeeee;
    font-size: 18px;
}

.bakhsh-page-btn {
    width: 100px;
}

#offcanvasRight-command {
    background-color: rgba(53, 53, 53, 1);
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #616161;
}

.section-title {
    color: rgba(145, 145, 145, 1);
    border-bottom: 1.5px solid rgba(37, 188, 223, 1);
}

.mate-end-border::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: #616161;
    margin: auto;
}

#offcanvasBottom-info {
    max-width: 450px;
    margin: auto;
    border-radius: 5px;
    border: 1px solid #616161;
    background-color: #2c2c2c;
}

.founded-beyt-results {
    color: rgba(156, 156, 156, 1);
    font-size: 12px;
}

.border-right-2 {
    border-left: 1px solid rgba(165, 165, 165, 1);
    width: max-content;
}

.border-right-2:last-child {
    border: unset !important;
}

.limited-for-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* محدود به 5 خط */
    overflow: hidden;
    text-overflow: ellipsis; /* نمایش ... در انتهای متن */
}

.limited-for-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* محدود به 5 خط */
    overflow: hidden;
    text-overflow: ellipsis; /* نمایش ... در انتهای متن */
}

.info-offcanvasBottom {
    width: 25px;
    height: 25px;
    border: 1px solid #25bcdf !important;
    border-radius: 50%;
}

.detai-chev {
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.15);
}

.mobile-customize {
    animation: sound2 1s ease-out;
}
/*
#popup {
    position: absolute;
    background-color: rgba(53, 53, 53, 1);
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    bottom: 100%;
    right: -1.5%;
    border: 1px solid #616161;
    border-radius: 5px;
    min-width: 300px;
} */

#popup.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.timing {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.mate-end-border-2 {
    border-bottom: 0.5px solid #616161 !important;
    border-right: 0;
    border-left: 0;
    border-top: 0;
}

.mate-end-border-2:last-child {
    border: unset !important;
}

.mate-end-border:last-child::before {
    content: unset !important;
}

.popop2 {
    bottom: -200px; /* دیو در ابتدا از پایین صفحه مخفی است */
    padding: 20px;
    background-color: rgba(53, 53, 53, 1);
    transition: bottom 0.5s ease-in-out; /* انیمیشن برای حرکت به بالا */
    border: 1px solid #616161;
}

#closePopupBtn {
    background-color: red;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#closePopupBtn:hover {
    background-color: darkred;
}

.choose-wich {
    width: 35px;
}

#content-limit-detail,
.detail-content-2 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.height-174 {
    min-height: 174px;
}

.detail-english-back {
    background-color: #353535;
}

.detail-tabs .nav-link {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.325);
}

.detail-tabs .nav-tabs .nav-link.active {
    color: #f5f3f4 !important;
    opacity: 1 !important;
    border-bottom: 1.5px solid #25bcdf !important;
}

.detail-tabs .tab-pane {
    border: 1px solid #ffffff40;
}

body.light-mode .detail-tabs .tab-pane {
    border: 1px solid rgba(238, 238, 238, 1);
}

.detail-video-after::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00000000 0%, rgba(0, 0, 0, 0.8) 100%);
    border-radius: 5px;
}

.border-6161 {
    border: 1px solid #616161 !important;
}

.detail-accordion .accordion-item button {
    background-color: #2c2c2c;
    color: white;
}

.detail-accordion .accordion-item button::after {
    background-image: url(../images/accordion-chev.svg);
    background-size: 90% 90%;
}

.detail-accordion .accordion-item button:focus-visible,
.detail-accordion .accordion-item button:focus {
    box-shadow: unset !important;
    border: unset !important;
    outline: unset !important;
}

.detail-accordion .accordion-item .accordion-body,
.detail-accordion .accordion-item {
    background-color: #2c2c2c !important;
}

.detail-accordion .accordion-button:not(.collapsed) {
    color: #1ba9e1 !important;
    box-shadow: unset !important;
}

.detail-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-90deg);
    filter: brightness(0) saturate(100%) invert(73%) sepia(48%) saturate(444%)
        hue-rotate(166deg) brightness(96%) contrast(93%);
}

body.light-mode .detail-h1,
body.light-mode .text-vedz-english,
body.light-mode .tab-pane p,
body.light-mode .mate-end-border .text-white {
    color: black !important;
}

body.light-mode .book-title-2 {
    color: #333333be;
}

body.light-mode #content-limit-detail,
body.light-mode .detail-content-2,
body.light-mode .site-black,
body.light-mode .detail-tabs .nav-tabs .nav-link.active,
body.light-mode .tab-pane span {
    color: rgba(51, 51, 51, 1) !important;
}

body.light-mode .detail-accordion .accordion-item button {
    background-color: rgb(255, 255, 255);
    color: rgba(51, 51, 51, 1) !important;
}

body.light-mode .detail-english-back {
    background-color: rgba(238, 238, 238, 1) !important;
}

body.light-mode .detail-tabs .nav-link {
    color: rgba(51, 51, 51, 0.477) !important;
}

body.light-mode .tab-pane,
body.light-mode #naving2,
body.light-mode .detail-accordion .accordion-item .accordion-body,
body.light-mode .detail-accordion .accordion-item {
    background-color: white !important;
}

body.light-mode .detail-tabs .accordion-item {
    border: 1px solid #dddddd !important;
}

body.light-mode .detail-tabs .accordion-item p {
    color: black !important;
}

body.light-mode .detail-accordion .accordion-button:not(.collapsed) {
    color: #1ba9e1 !important;
}

body.light-mode .detail-accordion .accordion-item button::after {
    filter: invert();
}
body.light-mode #section-list .offcanvas-content {
    background-color: white !important;
}

body.light-mode #section-list .text-white {
    color: black !important;
}

body.light-mode #section-list2 .offcanvas-content {
    background-color: white !important;
}

body.light-mode #section-list2 .text-white {
    color: black !important;
}

body.light-mode .detail-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(60%) sepia(48%) saturate(444%)
        hue-rotate(166deg) brightness(96%) contrast(93%);
}

#img-thumbs .modal-content {
    background-color: rgba(0, 0, 0, 0.255) !important;
    backdrop-filter: blur(5px);
}

.swiper-button-prev,
.swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #25bcdf;
    border: 1px solid #ffffff40;
}

.swiper-button-next {
    left: -60px !important;
}
.swiper-button-prev {
    right: -60px !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
}

#section-list .offcanvas-content {
    background-color: #2c2c2c;
}

.tag-p-flow {
    max-height: 400px;
    overflow-y: auto;
}

#section-list2 .offcanvas-content {
    background-color: #2c2c2c;
}

/* #section-list .offcanvas-content::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
background: linear-gradient(0deg,rgba(44, 44, 44, 1) 46%, rgba(0, 0, 0, 0) 100%);

} */

body.light-mode #section-list .offcanvas-content::after {
    content: none;
}

#section-list,
#section-list2 {
    height: max-content;
}

body.light-mode #section-list .offcanvas-header img {
    filter: invert(1);
}

.blu-filter {
    filter: brightness(0) saturate(100%) invert(73%) sepia(48%) saturate(444%)
        hue-rotate(166deg) brightness(96%) contrast(93%);
}

.container-contant-us {
    max-width: 75%;
    margin: auto;
    background-color: #353535;
}

.section-back-grounded:nth-child(odd) {
    background-color: #2c2c2c;
}

/* برای هر بخش که شماره زوج است */
.section-back-grounded:nth-child(even) {
    background-color: #353535;
}

.see-more-btn {
    border: 1px solid #25bcdf !important;
    background-color: transparent;
    color: #25bcdf !important;
}

.footer-child-border:nth-child(3) {
    width: 33.33333333%;
}

.force-empty {
    border: 1px solid red !important;
}

.book-category-detail {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background-color: #353535;
}

.book-category-detail p {
    font-size: 14px;
    color: white;
    font-family: sans-light;
    line-height: 25px;
}

body.light-mode .book-category-detail p {
    color: black !important;
}

.pagination-list .pagination {
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination-list .page-link {
    border-radius: 5px !important;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.254);
    color: white;
}

.pagination-list .page-item.active .page-link {
    background-color: #25bcdf !important;
}

.book-percent-width {
    width: 14.28571429%;
}

.result-button {
    padding: 5px 10px;
    border: 1px solid #25bcdf;
}

body.light-mode .book-category-detail,
body.light-mode .container-contant-us {
    background-color: white !important;
}

body.light-mode .container-contant-us p {
    color: rgba(85, 85, 85, 1) !important;
}

.container-contant-us p {
    color: white;
    font-size: 14px;
    font-family: sans-light;
}

body.light-mode .book-category-detail h1,
body.light-mode .shaer,
body.light-mode .discription {
    color: black !important;
}

body.light-mode .light-disaper {
    color: black !important;
}

body.light-mode .section-back-grounded:nth-child(odd),
body.light-mode #offcanvasBottom-info و body.light-mode .dark-mode-btn,
body.light-mode #offcanvasRight-command,
body.light-mode #offcanvasBottom-info,
body.light-mode .player,
body.light-mode .volumeBar-parent,
body.light-mode #offcanvas-search,
body.light-mode .search-page-box {
    background-color: #ffffff !important;
}

body.light-mode .search-page-box p {
    color: rgba(85, 85, 85, 1) !important;
}
body.light-mode .search-page-box {
    border: 1px solid #6161611a !important;
}

body.light-mode .search-prevnext {
    background-color: #69ccea33;
    color: black !important;
}

body.light-mode .player img {
    filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(182deg)
        brightness(50%) contrast(86%);
}

body.light-mode .player .time {
    color: #555555 !important;
}

body.light-mode .player input[type="range"] {
    accent-color: #555555;
}

body.light-mode .section-back-grounded:nth-child(even) {
    background-color: #fbfbfb;
}

.section-back-grounded {
    border-bottom: 1px solid #ffffff21;
}

body.light-mode .section-back-grounded {
    border-bottom: 1px solid #eee;
}

.section-back-grounded:last-child {
    border-bottom: unset !important;
}

.section-back-grounded:nth-child(odd) {
    background-color: #2c2c2c;
}

.section-back-grounded:nth-child(even) {
    background-color: #353535;
}

.nex-prev-disbled {
    opacity: 0.3;
}

body.light-mode .detai-chev {
    background-color: rgba(105, 204, 234, 0.2) !important;
    color: black !important;
}

body.light-mode .detai-chev img {
    filter: invert(1);
}

body.light-mode #offcanvasBottom-info .offcanvas-header img,
body.light-mode .search-prevnext img {
    filter: invert(1);
}

.multi-upload-wrapper .upload-btn {
    background-color: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.254);
}

.multi-upload-wrapper .upload-btn:focus {
    box-shadow: unset !important;
}

body.light-mode .upload-btn {
    background-color: #ffffff !important;
    border: 1px solid rgb(238, 238, 238);
}

body.light-mode .upload-btn svg,
body.light-mode #section-list2 .offcanvas-header img {
    filter: invert(1);
}

body.light-mode .upload-btn .text-white {
    color: black !important;
}

body.light-mode .optinam-dark-btn,
body.light-mode .next-btn,
body.light-mode .prev-btn {
    filter: invert(1);
}

body.light-mode .pagination-list .page-link {
    background-color: transparent !important;
    border: 1px solid #25bcdf !important;
    color: rgba(51, 51, 51, 1) !important;
}

body.light-mode .highlight {
    background-color: #69ccea;
    color: white;
}

.mb-mobi-1 {
    display: block;
}

.founded-red {
    padding-right: 3px;
    color: #25bcdf;
}

.pt-2-3 {
    padding-top: 2.3rem !important;
}

.ps-40 {
    padding-right: 30px !important;
}

body.light-mode .mb-mobi-1 {
    display: none !important;
}

.mb-mobi-2 {
    display: none;
}

body.light-mode .mb-mobi-2 {
    display: block !important;
}

body.light-mode .custumized-filter {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(20%)
        contrast(100%) !important;
}

#mobileMenuCollapse0 .ul a.active {
    color: black !important;
}

.first-page.light-mode {
    background-image: url(../images/tuff-2.svg) !important;
}

.detail-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(161, 161, 160, 1);
    width: 1px;
    height: 50%;
    margin: auto;
}

.ebs-start {
    padding-right: 35px;
}

.font-15 {
    font-size: 15px;
}

.detail-tabs .nav-link {
    position: relative;
}

.detail-tabs .nav-tabs .nav-item:last-child .nav-link::after {
    content: unset !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #2c2c2c inset !important;
    box-shadow: 0 0 0 1000px #2c2c2c inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}

body.light-mode input:-webkit-autofill,
body.light-mode input:-webkit-autofill:hover,
body.light-mode input:-webkit-autofill:focus,
body.light-mode input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000;
}

body.light-mode .textare {
    color: black !important;
}

select:focus {
    border-color: #25bcdf !important;
}

.demo-saerch {
    width: 500px;
    background-color: #353535;
    border: 1px solid rgba(255, 255, 255, 0.254);
    z-index: 1000;
    height: max-content !important;
    transition: opacity 0.5s ease;
    opacity: 0;
    display: none;
}

body.light-mode .demo-saerch,
body.light-mode .divition {
    background-color: white !important;
    border: 1px solid #6161611a !important;
}
body.light-mode .close-demo,
body.light-mode .demo-saerch-b {
    filter: invert(1);
}

body.light-mode .g-key-board {
    background-color: rgb(249 249 249) !important;
}

.demo-saerch .col-xl-5 {
    width: 100% !important;
}

.demo-saerch .bg-main {
    min-height: max-content !important;
}

.demo-collapse {
    background-color: #353535 !important;
    border-radius: 5px;
}

.demo-saerch .col-xl-2,
.demo-saerch .col-lg-3 {
    width: 41.5% !important;
}

.demo-saerch.active {
    opacity: 1;
    display: block;
}

.divition {
    background-color: #353535;
    width: max-content;
}

#demo .btn-close {
    filter: invert(1);
}

body.light-mode #demo .btn-close {
    filter: invert(0);
}

#backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.297);
    display: none;
    z-index: 9;
    transition: opacity 0.5s ease;
    opacity: 0;
}
#backdrop.active {
    display: block;
    opacity: 1;
}

#demo .col-7 {
    width: 100% !important;
    padding-left: 0.5rem !important;
}

#demo .col-5 {
    width: 100% !important;
}

#demo .modal-dialog {
    max-width: 1200px;
}

#demo-collap-2 .card-body {
    background-color: #3f3f3f !important;
}

body.light-mode #demo-collap-2 .card-body {
    background-color: rgb(230, 230, 230) !important;
}

body.light-mode .second-container button[type="submit"] {
    color: white !important;
}

.span-font {
    padding: 4px 6px;
}

#ask .modal-content {
    background-color: #353535;
    border-radius: 5px;
}

.curve-clu {
    background-color: #10a1c2;
}

.is-disabled {
    opacity: 0.3 !important;
    background-color: inherit !important;
}

.border-right-2:first-child {
    padding-right: 0 !important;
}

.poem {
    position: relative;
}

#popup {
    position: absolute;
    display: none;
    background: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.254);
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1000;
}

#popup.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

#popup::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ddd;
}

.klkl {
    border-bottom: 1px solid rgba(255, 255, 255, 0.254);
}

.klkl:last-child {
    border: unset !important;
}

body.light-mode #popup,
body.light-mode #vocal .modal-content {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.138);
}

body.light-mode .klkl {
    border-bottom: 1px solid rgba(0, 0, 0, 0.138);
}

#vocal .modal-content {
    background-color: #2c2c2c;
}

#vocal .btn-close {
    filter: brightness(0) invert(1);
}

body.light-mode #vocal .btn-close {
    filter: brightness(0) invert(0);
}

.createdcol-s {
    width: 14.2857%;
}

.modal-content-verse-vi {
    background-color: #353535;
}

body.light-mode .modal-content-verse-vi,
body.light-mode .demo-collapse {
    background-color: white !important;
}

body.light-mode .modal-content-verse-vi span,
body.light-mode .modal-content-verse-vi img,
body.light-mode .keyboard-container svg,
body.light-mode .clear-input-btn svg {
    filter: invert(1);
}

body.light-mode .keyboard-container .key {
    background-color: white;
    color: black;
    border: 1px solid #eeeeee;
}

body.light-mode .keyboard-container {
    background-color: #f9f9f9 !important;
}

body.light-mode #kbd-header .text-white {
    color: black !important;
}

body.light-mode .drag-handle {
    border-color: rgba(0, 0, 0, 0.093) !important;
}

body.light-mode .drag-handle .text-white {
    color: black !important;
}

.section-back-grounded a:hover {
    color: #25bcdf !important;
}

.section-back-grounded a {
    transition: color 0.3s ease;
}
.opacity-40 {
    opacity: 40%;
}

.keybord-svg {
    cursor: pointer;
}

:root {
    --bg-color: rgba(30, 30, 30, 0.95);
    --key-bg: #3a3a3a;
    --key-text: #ffffff;
    --accent-blue: #4fc3f7;
    --key-border: rgba(255, 255, 255, 0.1);
}

.keyboard-container {
    position: fixed;
    background: rgb(34, 34, 34);
    border-radius: 5px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    user-select: none;
    direction: ltr;
    border: 1px solid #444;
    z-index: 10000;
    display: none;
    backdrop-filter: blur(10px);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.drag-handle {
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaa;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.229);
}

.drag-handle .close-x {
    cursor: pointer;
    color: #fff;
}

.key {
    height: 52px;
    background: #353535;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-grow: 1;
    margin: 0.25rem;
    color: var(--key-text);
    transition: background 0.2s, transform 0.1s, color 0.3s;
}

.key span {
    transition: opacity 0.2s ease-in-out;
}

.key.fading span {
    opacity: 0;
}

.key.active {
    background-color: #1ba9e1 !important;
}

.w-enter {
    font-size: 14px;
}

.w-shift,
.w-ctrl,
.w-alt {
    background: #353535;
    font-size: 14px;
}

.w-space {
    width: 400px;
}

#key-popup {
    position: absolute;
    background: var(--accent-blue);
    color: #000;
    width: 50px;
    height: 60px;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    transform: translate(-50%, -120%);
    z-index: 10001;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 992px) {
    .keyboard-container {
        width: 900px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        top: auto;
        display: none;
        animation: slideInUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
}

@media (max-width: 991px) {
    .keyboard-container {
        width: 100%;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        display: block !important;
        visibility: hidden;
    }

    .keyboard-container.show {
        transform: translateY(0);
        visibility: visible;
    }

    .key {
        height: 45px;
        font-size: 16px;
    }

    .w-space {
        width: 35%;
    }

    .key {
        margin: 0.2rem;
    }

    .w-space,
    .c-space {
        flex-grow: 0;
    }

    .w-space {
        width: 140px !important;
    }

    .c-space {
        width: 100px;
    }
}

.span-mini {
    position: absolute;
    top: 0;
    left: 0;
    margin: 4px;
    font-size: 8px;
    color: #969696;
}

.keyboard-container.state-active .span-mini {
    display: none !important;
}

.g-key-board {
    padding-top: 6px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    right: 0;
    margin: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(33 33 33);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    user-select: none;
    padding-bottom: 10px;
    transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.g-key-hidden {
    bottom: -100% !important;
}

.pop2 {
    height: max-content;
    bottom: 70px !important;
    width: 220px;
    flex-wrap: wrap;
}

.pop2 .g-key-popup-item {
    margin: 2px !important;
    width: 14.7% !important;
}

.g-key-board.g-key-alt-mode .alt-none {
    display: none !important;
}

.g-key-board.g-key-alt-mode .alt-block {
    display: block !important;
}

.half-space .g-key-popup-item {
    width: 25% !important;
}

.half-space .g-key-popup {
    flex-wrap: wrap;
}

.g-key-row {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    width: 100%;
}

.g-key-btn {
    flex: 1;
    height: 45px;
    border-radius: 5px;
    border: none;
    background: rgb(66 66 66);
    color: #ffffff;
    font-size: 21px;
    cursor: pointer;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.g-key-btn.is-active {
    opacity: 0.3;
    transform: translateY(2px);
}

.g-key-btn-wide {
    flex-grow: 1;
    max-width: 70px;
    background-color: #464646;
}

.g-key-btn-space {
    flex-grow: 5;
    max-width: 280px;
}

.g-key-btn-enter:active {
    background-color: #1565c0;
}

.g-key-board.g-key-caps-on .g-key-btn[data-g-key-val] {
    text-transform: uppercase;
}

.g-key-popup {
    position: fixed;
    background-color: #353535;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.085);
    border-radius: 5px;
    padding: 8px 5px;
    display: none;
    flex-direction: row;
    z-index: 2000;
    color: rgb(255, 255, 255);
    border: 1px solid #eeeeee4b;
}

.g-key-popup.g-key-visible {
    display: flex;
    animation: popUp 0.1s ease-out;
}

.g-key-popup-item {
    width: 35px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 2px;
    border-radius: 4px;
}

.g-key-popup-item.g-key-selected {
    background-color: #1ba9e1;
    color: #fff;
    transform: scale(1.15);
}

@keyframes popUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.light-mode #gKeyBoard {
    background-color: #f9f9f9 !important;
}

body.light-mode .g-key-btn {
    background-color: white !important;
    color: black;
    box-shadow: 0 2px 1px rgb(0 0 0 / 9%) !important;
}

body.light-mode .justify-content-between .text-white {
    color: black !important;
}

body.light-mode .g-key-btn svg  ,
body.light-mode .justify-content-between svg{
    filter: invert(1);
}

@keyframes opacity-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.highlight-ani {
    animation: opacity-pulse 0.9s infinite ease-in-out;
}

.search-rigtthis-page::placeholder {
    font-size: 10px !important;
}

.search-rigtthis-page {
    padding-right: 35px !important;
}
#part-detail .second-container ,
#verse-detail .second-container {
    max-width: 100%;
}

/* فاصله از پایین وقتی پلیر صوتی جزئیات بیت باز است تا محتوا (مثلاً عنوان English Translation) زیر نوار ثابت نرود */
#verse-detail.verse-detail--player-open {
    padding-bottom: 7rem;
}

@media (max-width: 991.98px) {
    #verse-detail.verse-detail--player-open {
        padding-bottom: 9rem;
    }
}


#part-detail .term .mt-lg-5 ,
#verse-detail .term .mt-lg-5 {
    margin-top: 0rem !important;
}

#part-detail .term  .switch-p ,
#verse-detail .term  .switch-p {
      margin-bottom: -10px !important;
    margin-right: 10px !important;
}



.ply-all-btn {
    padding: 5px 10px;
    background-color: #25bcdf;
}

.invert {
    filter: invert(1) brightness(0);
}



.two-page-search {
    padding: 7px 14px;
        background-color: #25bcdf;

}