.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 #25bcdf !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);
}

.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 {
    filter: invert(1);
}