.gray-bg {
    background-color: #e3e3e31d;
}


.badge-success {
    color: #fff;
    background-color: #50cd89;
}

.text-hover-white:hover {
    transition: color .2s ease, background-color .2s ease;
    color: #fff !important;
}

.sa-success {
    color: #005A03;
}

.sa-btn-success {
    background-color: #008000b5;
}

.sa-btn-success,
.sa-btn-success i {
    color: #fff;
}

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

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: #008000;
}

.sa-bg-success {
    background: var(--sa-bg-secondary) !important;
}

.sa-bg-light {
    background: var(--sa-bg-gray) !important;
}

.sa-bg-light-2 {
    background: var(--sa-bg-secondary);
    background: radial-gradient(circle, rgba(9, 121, 27, 0.4853291658460259) 0%, rgba(6, 148, 63, 0.7206232834930848) 100%);
}

.sa-btn-primary {
    background-color: #008000b5;
    color: #fff;
}

.sa-btn-primary:hover {
    background-color: #008000df;
}

.sa-bg-primary {
    background: rgb(0, 154, 228);
    background: radial-gradient(circle, rgba(0, 154, 228, 1) 0%, rgba(1, 97, 170, 1) 100%);
}

.sa-danger {
    color: #b00000;
}

.sa-bg-danger {
    background: #b0000080;
}

.sa-btn-danger {
    background: #ff5b83;
}

.sa-bg-danger-radial {
    background: rgb(242, 4, 4);
    background: radial-gradient(circle, rgba(242, 4, 4, 1) 0%, rgba(74, 0, 0, 1) 100%);
}

.sa-bg-info {
    background: rgb(115, 2, 136);
    background: radial-gradient(circle, rgba(115, 2, 136, 1) 0%, rgba(64, 0, 76, 1) 100%);
}

.sa-btn-info {
    background: rgb(115, 2, 136);
    background: radial-gradient(circle, rgba(115, 2, 136, 1) 0%, rgba(64, 0, 76, 1) 100%);
}

.sa-border {
    background-color: #fff;
    border-left: 7px solid green;
    border-right: 7px solid green;
    border-top: 2px solid green;
    border-bottom: 2px solid green;
}

.triangle-bottom-right {
    height: 0;
    width: 0;
    rotate: 180deg;
    border-bottom: 30px solid #520161;
    border-left: 30px solid transparent;
}

.sa-box-shadow-1 {
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.sa-banana-leaf {
    color: #56ca00
}

.text-bg-success.color {
    background: var(--sa-bg-secondary) !important;
    color: #000 !important;
}

.sa-bg-banana-leaf {
    background-color: #56ca00
}

.sa-banana-leaf-border {
    border: 1px solid #56ca00;
}

.social-icon i {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #13263C;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 1s ease;
}

.social-icon i:hover {
    background-color: #13263C;
    border: 3px solid #39B54A;
    color: #FFF;
}

span.option.me-2 {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
}

span.answer {
    border: 2px solid green;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    position: relative;
}

span.option.me-2 span {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 20%;
}

span.answer span {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 20%;
}


/*Custom Error Design*/
.help-block.with-errors {
    color: #f51515;
    font-size: 12px;
    padding: 5px 0px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Custom Login Modal Design */
#rightLoginCard {
    width: calc(100% - 0rem);
    height: 100%;
    position: fixed;
    right: 0;
    text-align: center;
    border-radius: 2px 0 0 2px;
    z-index: 12;
    background: #f5f6fa;
    bottom: -100%;
    position: fixed;
    z-index: 10000;
    /* top: 69px; */
    padding-top: 70px;
}


.btn_login_modal {
    border: none;
    outline: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ff5353fa;
    color: #fff;
    right: 14px;
    top: 0px;
}

@media(min-width: 768px) {
    #rightLoginCard {
        bottom: 0;
        width: auto;
        height: 100%;
        padding: 20px;
        padding-top: 50px;
    }
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    /* Make sure the overlay is below the modal */
    display: none;
    /* Initially hide the overlay */
}

/* Promotion Start */
#header-promotion-content,
#footer-promotion-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

#header-promotion-content:empty,
.inner-promotion-content:empty,
#footer-promotion-content:empty {
    display: none;
}

@media(min-width: 768px) {

    #header-promotion-content,
    #footer-promotion-content {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

#sidebar-promotion-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 1rem;
}

#header-promotion-content .card,
#footer-promotion-content .card {
    height: 100%;
    /* max-height: 200px; */
    overflow-y: auto;
}

.inner-promotion-content {
    margin-block: 1rem;
}

.promotion-card {
    border: 1px solid #0174be;
}

.offcanvas {
    --bs-offcanvas-height: 70vh;
}

#satt_dynamic_offcanvas {
    container-type: inline-size;
}

.dynamic-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #fff;
    /* padding: 1rem; */
    border-radius: 0.5rem;
}

.dynamic-modal-body:has(a:not(:only-child)) {
    padding: 1rem;
}

#dynamic_offcanvas_body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@container (min-width: 768px) {
    #dynamic_offcanvas_body {
        flex-direction: row;
        justify-content: space-around;
    }
}

.promotion-modal-close-btn {
    margin-left: auto;
    display: block;
    padding: 5px;
    border-radius: 50%;
    margin-bottom: 0.3rem;
}

@media(min-width: 768px) {
    .offcanvas {
        --bs-offcanvas-height: 40vh;
    }

    .promotion-card {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border: none;
    }

    .promotion-modal-close-btn {
        position: relative;
        left: 2.4rem;
        top: 0.4rem;
    }
}

/* Promotion End */

/* sweet alert style */
.swal-height {
    max-height: 100vh;
    /* Limit the maximum height */
    overflow-y: auto;
    /* Add scroll if the content exceeds max height */
}

.swal2-title {
    font-size: 1.5em;
    font-weight: bold;
}

.swal2-content p {
    margin-bottom: 1em;
}

table {
    margin-bottom: 1em;
    /* Ensure spacing around the table */
}


.btn-green {
    background-color: rgb(1, 113, 1) !important;
    color: #fff,
}

.btn-green:hover {
    background-color: rgb(0, 100, 0) !important;
    color: #fff;
}

.btn-details {
    background-color: rgb(0, 108, 101) !important;
    color: #fff,
}

.btn-details:hover {
    background-color: rgb(1, 94, 87) !important;
    color: #fff,
}

.restrict-thead {
    background-color: #d1e3ca !important;
    /* font-weight: bold; */
}

.swal2-popup {
    padding: 0 !important;
}

.restrictCard {
    font-size: 1rem !important;
}

.packageList {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .packageList {
        font-size: 1.5rem;
    }
}


.packageList {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .packageList {
        font-size: 1.5rem;
    }
}

.primary-bg-05 {
    border: 1px solid #50cd8930;
    padding: 5px 10px;
    border-radius: 4px;
    background: #50cd8914;
    display: inline-block;
    font-size: 14px;
}


.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: .475rem
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #3f4254;
    background-color: #f5f8fa;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: .475rem
}

.symbol .symbol-badge {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) !important
}

.symbol>img {
    width: 100%;
    flex-shrink: 0;
    display: inline-block;
    border-radius: .475rem
}

.symbol>img {
    width: 50px;
    height: 50px
}


/* footer css  */
.logo-default {
    max-width: 150px;
}

.logo-default2 {
    max-width: 100px;
}

.social-icon i {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #13263C;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 1s ease;
}

.social-icon i:hover {
    background-color: #13263C;
    border: 3px solid #39B54A;
    color: #FFF;
}


/* course css  */
.academy_title,
.course_title {
    font-size: 1.6rem;
}

.academy-sidebar-item,
.course-sidebar-item {
    padding: 20px;
    padding-bottom: 10px;
    box-shadow: 0 0 2px #80808069;
    margin-bottom: 30px;
    border-radius: 4px;
}

.academy-sidebar-item .academy-search,
.course-sidebar-item .course-search {
    position: relative;
}

.academy-sidebar-item .academy-search i,
.course-sidebar-item .course-search i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.academy-sidebar-item .academy-search input,
.course-sidebar-item .course-search input {
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 12px;
    border: 1px solid #80808029;
}

h3.academy-sidebar-title,
h3.course-sidebar-title {
    margin-bottom: 15px;
}

.academy-sidebar-item .instructor-img img,
.course-sidebar-item .instructor-img img {
    width: 35px;
    height: 35px;
    max-width: 35px;
    border-radius: 50%;
}

.academy-sidebar-item .instructor-content h4,
.course-sidebar-item .instructor-content h4 {
    font-size: 16px;
    margin-bottom: 0;
}

.academy-sidebar-item .instructor-content p .course-sidebar-item .instructor-content p {
    font-size: 12px;
    margin-bottom: 0px;
}

.academy-author-img,
.course-author-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
}

.academy-author-img img,
.course-author-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.academy-author-name,
.course-author-name {
    margin-bottom: 2px;
    font-size: 15px;
}

.academy_title a:hover,
.course_title a:hover {
    color: #39B54A;
}

span.academy-author-designation,
span.course-author-designation {
    font-size: 12px;
}

.card.card-shadow {
    box-shadow: 0px 6px 34px rgb(215 216 222 / 62%);
}

.academy-intro-img,
.course-intro-img {
    height: 200px;
    overflow: hidden;
}

.academy-intro-img img,
.course-intro-img img {
    /* object-fit: cover; */
    width: 100%;
    height: 100%;
}

.satt-slider-range p label {
    margin-top: 7px;
    font-size: 15px;
    color: #1C1D1B;
    font-weight: 500;
}

.ui-widget.ui-widget-content {
    border: none;
    cursor: pointer;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider .ui-slider-handle {
    height: 15px;
    width: 15px;
    transition: all 0s linear 0s;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -5px;
}

.ui-slider .ui-slider-range {
    background: #50cd89 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: #50cd89 !important;
    border-radius: 50%;
    border: none !important;
    outline: none !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.004);
    cursor: pointer;
}

.ui-slider .ui-slider-handle::before {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    background: #50cd89;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.satt-slider-range input {
    font-size: 14px;
    font-weight: 400;
    color: #1C1D1B;
    border: none;
    outline: none;
    background: none;
    width: 100px;
}

.ui-widget-content {
    background: gray;
    color: #50cd89;
}

.ui-slider-horizontal {
    height: 6px;
}

.ui-widget-header {
    background: #50cd89;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-radius: 0;
}

.ui-slider-horizontal .ui-slider-range {
    cursor: pointer;
}


.showing-result {
    margin-top: -60px;
}

.nice-select {
    height: 36px;
    line-height: 36px;
}

.max-w-300px {
    max-width: 300px;
}

h4.academy-sidebar-title h4.course-sidebar-title {
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.showing-result h4 {
    font-size: 1.2rem;
}


/* course filter css  */
.academy-filter-buttons,
.course-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.course-filter-buttons button,
.academy-filter-buttons button {
    border: 0;
    border-radius: 4px;
    background-color: var(--sa-bg-secondary);
    padding: 6px 12px;
    color: #000;
    font-weight: 500;
    transition: 0.3s;
}


.business-profile-item {
    display: flex;
    gap: 10px;
    border: 1px solid #8080805c;
    padding: 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.business-profile-item:hover {
   transform: translateY(-4px);
}

.business-profile-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    min-width: 50px;
}

.business-profile-content p {
    margin-bottom: 3px;
}

.business-profile-content h3 {
    margin-bottom: 4px;
}

.counter-item-img img {
    width: 60px;
}

.counter-item-text h2 {
    font-size: 2.5rem;
    margin-bottom: 5px;
    line-height: 1;
}

.counter-item-text .text-span {
    font-size: 1.3rem;
    font-weight: 500;
}

.counter-item {
    align-items: center;
}


@media screen and (max-width: 1199px) {
    .showing-result {
        margin-top: 0px;
    }

    .row.course_item_wrap_area {
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .counter-item-text h2 {
        font-size: 2rem;
    }

    .counter-item-text .text-span {
        font-size: 1.5rem;
    }

    .academy-sidebar-item {
        padding: 11px;
        padding-bottom: 0px;
        box-shadow: none;
        margin-bottom: 0px;
    }

    .academy-sidebar-item .filter-arrow-toggle {
        display: none;
    }
}

@media (max-width: 576px) {
    .counter-item-text h2 {
        font-size: 1.5rem;
    }

    .counter-item-text .text-span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .counter-item-img img {
        width: 41px;
    }

    .counter-item-text h2 {
        font-size: 1.2rem;
    }

    .counter-item-text .text-span {
        font-size: 0.8rem;
    }

    .w-200px {
        width: 180px !important;
    }
}

.shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
}

.border-left-5 {
    border-left-style: solid;
    border-left-width: 5px;
}

.border-red {
    border-color: #BF3326;
}

.st-border-success {
    border-color: #12CE5D;
}

.back_to_top_btn {
    width: 35px;
    height: 35px;
    background: #008000;
    position: fixed;
    bottom: -100px;
    right: 1rem;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 95;
    opacity: 0.4;
    display: grid !important;
    place-items: center;
}

.back_to_top_btn:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .back_to_top_btn {
        bottom: 1rem;
        right: 0.5rem;
    }
}

@media (max-width: 767px) {
    .filter-sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #fff;
        width: 70%;
        padding: 10px 8px;
        display: none;
        bottom: 0;
        overflow-y: scroll;
        height: 100vh;
        max-height: 100vh;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
}


@media (max-width: 450px) {
    .filter-sidebar-wrapper {
        width: 85%;
    }
}


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

.satt-d-none {
    display: none;
}

.page-spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    background: rgba(0, 0, 0, 0.2);
    z-index: 999;
    color: #fff;
}


/* custom bg color  */
.theme-bg {
    background-color: #008000b5;
}

.theme-bg2 {
    background-color: #00800031;
}

.theme-bg2:hover {
    background-color: #0080004b;
}

.bg-theme2 {
    background-color: var(--sa-theme-2);
}

.bg-theme2:hover,
.bg-theme2.btn:first-child:active {
    background-color: var(--sa-theme-3);
}

.bg-theme3 {
    background-color: var(--sa-theme-4);
}

.bg-theme3:hover,
.bg-theme3.btn:first-child:active {
    background-color: var(--sa-theme-6);
}

.heading1 {
    color: var(--sa-heading);
}

.blue-light-bg {
    background-color: var(--sa-badge-blue-light);
    color: blue !important;
}

.bg-red-300 {
    background-color: var(--sa-red-300);
}

bg-red-300.text-white {
    color: #fff !important;
}

/* text color  */
.sa-text-success-500 {
    color: var(--sa-success-500) !important;
}

.text-success-400 {
    color: var(--sa-success-400);
}

/* text red color and background color  */
.bg-red-500 {
    background-color: var(--sa-red-500) !important;
}

.bg-red-400 {
    background-color: var(--sa-red-400) !important;
}

.bg-red-300 {
    background-color: var(--sa-red-300) !important;
}

.text-red-500 {
    color: var(--sa-red-500) !important;
}

.text-red-400 {
    color: var(--sa-red-400) !important;
}

.text-red-300 {
    color: var(--sa-red-300) !important;
}

/* text and bg success  */
.bg-success-500 {
    background-color: var(--sa-success-500) !important;
}

.bg-success-400 {
    background-color: var(--sa-success-400) !important;
}

.bg-success-300 {
    background-color: var(--sa-success-300) !important;
}

.text-success-500 {
    color: var(--sa-success-500) !important;
}

.text-success-400 {
    color: var(--sa-success-400) !important;
}

.text-success-300 {
    color: var(--sa-success-300) !important;
}

.text-success-200 {
    color: var(--sa-success-200) !important;
}

.text-success-100 {
    color: var(--sa-success-100) !important;
}

.gray-bg-200 {
    background-color: var(--bs-gray-200);
}

.bs-green {
    background-color: var(--bs-green);
}

.bg-theme1 {
    background-color: var(--sa-theme-1);
}

.text-gray {
    color: gray;
}

.getDescription {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* .offcanvas-backdrop {
    z-index: 2000;
} */