@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Luxurious+Script&display=swap');
@import url('../../../font/ArticularCF/articulatcf.css');
@import url('https://fonts.cdnfonts.com/css/open-sans');
@import url('https://fonts.cdnfonts.com/css/public-sans');

/*
font-family: 'Inter', sans-serif;   // use on general
font-family: 'ArticulatCF';         // use for spesific, like title, subtitle
font-family: "Luxurious Script", cursive;;         // use for spesific, like title, subtitle
*/
:root {
    --colorBlack: #2e2e2e;
    --colorBlack2: #000000;
    --colorBlack24: #242424;
    --colorHazeBlack: #2f3237;
    --colorMuted: #949494;
    --colorMutedBF: #bfbfbf;
    --colorMutedLight: #c3c3c3;
    --colorGrey: #f8f8f8;
    --colorGreySimple: #616161;
    --colorExtraLightGrey: #f3f3f3;
    --colorLightGrey: #777777;
    --colorLightGrey2: #9f9f9f;
    --colorDarkGrey: #707070;
    --colorOrange: #dd642c;
    --colorOrangeDarken: #d75417;
    --colorOrangeLight: #ff9344;
    --colorOrangeExtraLight: #ffeee5;
    --colorOrangeModal: #ec6418;
    --colorOrangePricing: #eb692b;
    --colorWhite: #ffffff;
    --colorRed: #ff0b0b;
    --colorRedOrange: #ff6969;
    --colorLightRed: #ff4646;
    --colorExtraLightRed: #FFF7F3;
    --colorDarkRed: #a93215;
    --colorLightBlue: #5a85dc;
    --colorLightBlueAscent: #6284ff;
    --colorBlueDark: #4a7ea1;
    --colorLinkBlue: #32569e;
    --colorPink: #fe467d;
    --colorLightPink: #fffafa;
    --colorPurple: #9988ff;
    --colorLightGreen: #2cdd93;
    --colorGreen: #25c883;
    --colorLightGreen2: #15b270;
    --colorDarkGreen: #157b50;
    --colorDarkGreen: #478000;
    --colorBorderDefault: #e1e1e1;
    --colorYellow: #f2a000;
    --colorSilver: #323232;
    --colorGreyBg: #f6f6f6;
    --colorGray700: #374151;
    --colorPinkLightLow: rgba(255, 224, 178, 0.25);
    --colorYellowVoucher: #9f6000;
    --neutral-300: #f8f8f8;
    --colorDarkBrow: #2e2e2e;
    --colorlightBrow: #4e4e4e;
    --colorBronze: #351608;
}

/* bootstrap 5 replace */
.label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control-lg .selectize-input {
    padding: 0.5rem 1rem;
}

/*end replace bottstrap 5*/

body {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 12px;
    background-color: var(--colorGrey) !important;
}

.bg-body {
    background-color: var(--colorGrey) !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 0.75rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 0.75rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mt-3 {
    margin-top: 0.75rem !important;
}
.mt-4 {
    margin-top: 1rem !important;
}
.mt-70 {
    margin-top: 70px;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}
.mb-3 {
    margin-bottom: 0.75rem !important;
}
.mb-4 {
    margin-bottom: 1rem !important;
}
.p-20 {
    padding: 20px;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: unset;
}

.text-white { color: var(--colorWhite) !important; }
.text-dark { color: var(--colorBlack) !important; }
.text-muted { color: var(--colorMuted); }
.text-muted-bf { color: var(--colorMutedBF); }
.text-muted-light { color: var(--colorMutedLight); }
.text-underline { text-decoration: underline; }
.text-link { text-decoration: underline; }
.text-link:hover { color: var(--colorOrange) !important; }
.text-warning { color: var(--colorYellow) !important; }
.text-yellow-voucher { color: var(--colorYellowVoucher) !important; }
.text-yellow-star { color: #FAD400 !important; }
.text-accept { color: var(--colorLightGreen2) !important; }
.text-reject { color: var(--colorLightRed) !important; }
.text-light-grey { color: var(--colorLightGrey) !important; }
.text-light-grey-2 { color: var(--colorLightGrey2) !important; }
.text-dark-grey { color: var(--colorDarkGrey) !important; }
.text-dark-green { color: var(--colorDarkGreen) !important; }
.text-grey-simple { color: var(--colorGreySimple) !important; }
.text-grey-700 { color: var(--colorGray700) !important; }
.text-blue-dark { color: var(--colorBlueDark) !important; }
.text-orange-pricing { color: var(--colorOrangePricing) !important; }
.text-purple { color: var(--colorPurple) !important; }
.text-haze-black { color: var(--colorHazeBlack) !important}
.text-warning-light { color: #DE8500; }
.text-gray-700 { color : #374151; }
.text-dark-brow { color: var(--colorDarkBrow) !important; }
.text-light-brow { color: var(--colorlightBrow) !important; }

.content-scale-125 svg {
    transform: scale(1.25);
}

.bg-black-ori { background-color: var(--colorBlack); }
.bg-extra-light-grey { background-color: var(--colorExtraLightGrey); }
.bg-light-pink { background-color: var(--colorLightPink); }
.bg-light-red { background-color: var(--colorExtraLightRed); }
.bg-grey { background-color: var(--colorGrey); }
.bg-light-pink.border-1 { border: 1px solid #ebebeb; }
.bg-gradient-1 {
    background-image: url(../../../img/v3/assets/gradient-bg-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
}
.bg-transparent {
    background: transparent;
}
.bg-transparent-black {
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}
.bg-commission {
    background: linear-gradient(90deg, #492423 20%, #131313 40%);
}
.bg-feature {
    background-image: url(../../../img/v3/assets/lp/bg-supporting-feature-new.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto 298px;
    background-color: #131313;
}
.bg-feature .image img {
    position: absolute;
    width: 467px;
    right: -49px;
    top: -49px;
}
.bg-dashboard-logo {
    position: relative;
    width: 100%; /* Adjust as needed */
    height: 400px; /* Adjust as needed */
    overflow: hidden;
    background-image: url('../../../img/v3/assets/gradient-bg-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 500px 0;
}
.bg-dashboard-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../../img/v3/assets/tribelio-logo-watermark.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 0;
}
.badge .img-badge-product {
    width: 20px;
    height: auto;
}

.bg-feature .image {
    position: sticky;
}
.bg-feature .image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 78%;
    display: block;
    background: linear-gradient(
        180deg,
        rgba(246, 250, 242, 0) 50%,
        #ffffff 90%
    );
}

.bg-get-know {
    background-image: url(../../../img/v3/assets/lp/bg-get-know.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left top;
    position: relative;
    z-index: 1;
}

.bg-get-know:before {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, #ec692d 0%, #ffa47a 100%);
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.14);
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: -1;
}

.bg-white-opacity {
    background: #ffffffd9;
}
.bg-white-to-yellow {
    background-color: #fffdf8;
}

.btn-outline-transparent {
    background-color: transparent;
    color: var(--colorOrange);
}
.sticky-md-top.sticky-sidemenu {
    top: 70px;
}

.modal .modal-content {
    border: none;
}

.modal .modal-content-388 {
    max-width: 388px;
}

.btn:focus {
    box-shadow: none;
}
.btn-light-orange {
    background-color: #ffefea;
}
.btn-show-publish-course {
    cursor: pointer !important;
}
.btn-process-unpowerup {
    border-radius: 8px;
    border: 2px solid #b3b3b3 !important;
    background: #d0d0d0 !important;
    color: #545454 !important;
}
.btn-process-unpowerup svg path {
    fill: #545454 !important;
}
.btn-process-unpowerup.processing-without-draft {
    border-radius: 8px;
    border: 2px solid #25c883 !important;
    background: #2cdd93 !important;
    color: #157b50 !important;
}

.circle-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid;
    text-align: center;
    margin-right: 10px;
    border-color: var(--colorLightGrey);
    color: var(--colorLightGrey);
    font-size: 12px;
    font-weight: 600;
}

.circle-step.active {
    border-color: transparent;
    color: var(--colorDarkGreen);
    background: linear-gradient(180deg, #7cb633 0%, #83e00d 100%);
}

.program-step-wrapper {
    height: 100vh;
}

.detail-step {
    font-size: 16px;
    color: var(--colorLightGrey);
    font-weight: 600;
}

.detail-step.active {
    color: var(--colorBlack);
}

.line-step {
    width: 50px;
    height: 30px;
    border-left: 1px solid;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* start override bootstrap */
.container.container-main {
    max-width: 950px;
}

.container.container-1440 {
    max-width: 1440px;
}

.container-490 {
    max-width: 490px;
}

.container-550 {
    max-width: 550px;
}

.container-575 {
    max-width: 575px;
}

.container-838 {
    max-width: 838px;
}

.container-850 {
    max-width: 850px;
}

.container-1050 {
    max-width: 1050px;
}

.container-1155 {
    max-width: 1155px;
}

.container-1254 {
    max-width: 1254px;
}

.container-1440 {
    max-width: 1440px;
}

.px-32 {
    padding-left: calc(44px - 12px);
    /* 12px is default of bootstrap */
    padding-right: calc(44px - 12px);
}

.text-primary {
    color: var(--colorOrange) !important;
}

.text-primary > svg > path {
    fill: var(--colorOrange) !important;
}

.text-primary-gradient {
    background: -webkit-linear-gradient(45deg, #e8aeb0, #ff2830, #f3e490 125%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-outline-primary {
    color: var(--colorOrange);
    border-color: var(--colorOrange);
    background-color: transparent;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--colorOrange);
    pointer-events: none;
    opacity: 0.65;
}

.btn-new-lesson {
    color: var(--colorOrange);
    border: 2px solid var(--colorOrange);
    background-color: transparent;
    border-radius: 8px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    color: var(--colorOrangeDarken);
    border-color: var(--colorOrangeDarken);
    background-color: transparent;
}

.btn-primary {
    background-color: var(--colorOrange) !important;
    color: var(--colorWhite) !important;
    border-color: var(--colorOrange) !important;
}

.btn-primary:hover {
    background-color: var(--colorOrangeDarken);
    border-color: var(--colorOrangeDarken);
}

.btn-primary.bg-black-2 {
    border-color: var(--colorBlack2) !important;
}
.btn-primary.btn-primary-outline {
    background-color: var(--colorWhite) !important;
    color: var(--colorOrange) !important;
    border-color: var(--colorOrange) !important;
}
.btn-outline-secondary:hover {
    color: black !important;
    background-color: var(--colorWhite);
    border-color: #6c757d;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
    background-color: var(--colorOrangeLight);
    border-color: var(--colorOrange);
}

.btn-primary:disabled {
    opacity: 0.5;
    background-color: var(--colorOrange);
    color: var(--colorWhite);
    border-color: var(--colorOrange);
}

.btn-light-border-grey {
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    background: var(--colorWhite);
}

.badge {
    font-weight: 500;
}

.badge.badge-status {
    font-size: 8px;
    color: #7c7c7c;
    background-color: #dfdfdf;
    padding: 6px;
    border-radius: 6px;
}
.badge.badge-status.badge-outline.bg-success {
    color: #157b50;
    background-color: #fff !important;
    border-color: var(--colorLightGreen) !important;
}
.badge.badge-books {
    background: #dff5fa;
    color: #4a7ea1;
    border-radius: 6px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
    padding: 6px 12px;
    min-width: 64px;
}

.badge.badge-course {
    background: #81edcc;
    color: #17858d;
    border-radius: 6px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
    padding: 6px 12px;
    min-width: 64px;
}

.badge .img-badge-product {
    width: 20px;
    height: auto;
}

.badge.badge-status.bg-success {
    color: #157b50;
    background-color: var(--colorLightGreen) !important;
}

.badge.badge-status.bg-danger {
    color: #a4062c;
    background-color: #ff2b5e !important;
}

.badge.badge-status.bg-rejected {
    color: #5a0e2e;
    background-color: #eb9f95;
}

.badge.badge-status.bg-notvalid {
    color: #EB5757;
    background-color: rgba(235, 87, 87, 0.15);
}

.badge.badge-status.bg-pending {
    color: var(--colorBlack);
    background-color: #b1b1b1;
}
.badge.badge-status.bg-info {
    color: var(--colorWhite);
    background-color: #6284ff !important;
}
.badge.badge-status.bg-success.with-powerup {
    border: 1px solid #272727 !important;
    background-color: #272727 !important;
    color: #2cdd93;
}
.badge-status.bg-success.inreview {
    border: 1px solid #4a7ea1 !important;
    background-color: #99cde2 !important;
    color: #4a7ea1;
}
.badge.badge-course-v2 {
    background-color: #ebebff !important;
    color: #6262c6;
}
.badge.badge-bundle-v2 {
    background-color: #ffdcfa !important;
    color: #e266dc !important;
}
.badge.badge-book-v2 {
    background-color: #fff0f0 !important;
    color: #f75f5f;
}

.badge.badge-digital-v2 {
    background-color: #edf5ff !important;
    color: #99a3b5;
}
.badge.badge-ebook-v2 {
    background-color: #fff2e5 !important;
    color: #d7b677;
}
.badge.badge-merchandise-v2 {
    background-color: #e1f7e3 !important;
    color: #81c17b;
}

.custom-control .custom-control-input {
    width: 18px;
    height: 18px;
    accent-color: var(--colorOrange);
}

/* wrap input group with border */
.input-group.border-wrapper {
    border-radius: 8px;
    border: 1px solid var(--colorBorderDefault);
    overflow: hidden;
}

.input-group.border-wrapper > input {
    border: none;
}

.input-group.border-wrapper > input:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.input-group.border-wrapper > button {
}

.input-group.border-wrapper > .input-group-text {
}

.modal-mw-260 {
    max-width: 260px;
}
.modal-mw-260 .modal-content .modal-header {
    padding: 30px 30px 10px 30px;
}
.modal-mw-388 {
    max-width: 388px;
}
.modal-mw-388 .modal-content .modal-header {
    padding: 30px 30px 10px 30px;
}
.modal-mw-600 {
    max-width: 600px;
}
.modal-mw-600 .modal-content .modal-header {
    padding: 30px 30px 10px 30px;
}
.modal-mw-900 {
    max-width: 900px;
}
.modal-mw-990 {
    max-width: 900px;
}
.modal-mw-900 .modal-content .modal-header {
    padding: 30px 30px 10px 30px;
}
.modal-width-388 .modal-dialog {
    max-width: 388px !important;
}
.modal-content-388 {
    max-width: 388px;
}
.modal-content-900 {
    max-width: 900px;
}

.tooltip.custom-tooltip {
    font-size: 12px;
}
.tooltip.custom-tooltip .tooltip-inner {
    text-align: left;
}
.datepicker-dropdown {
    font-size: 14px;
}
/* end override */
/* start override toastr */
.material-style #toast-container > div {
    border-radius: 10px;
}

#toast-container > .toast.toast-success {
    background-color: #b2e28f;
    color: var(--colorBlack);
}

/* end override toastr */
/* Animate */
.blinked {
    animation: blinked 2s infinite;
}

@keyframes blinked {
    0% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

.animate-elevate-hover {
    transition: all 250ms ease-out;
}

.animate-elevate-hover:hover {
    transform: translateY(-1px);
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* End Animate */
.font-articulat {
    font-family: 'ArticulatCF';
}
.font-luxurious-script {
    font-family: 'Luxurious Script', cursive;
}

/* size helper */
.w-13 { width: 13px; }
.min-w-60 { min-width: 60px; }
.min-w-72 { min-width: 72px; }
.min-w-80 { min-width: 80px; }
.min-w-80 .selectize-input {min-width: 80px;}
.min-w-100 { min-width: 100px; }
.min-w-110 { min-width: 110px; }
.min-w-120 { min-width: 120px; }
.min-w-130 { min-width: 130px; }
.min-w-150 { min-width: 150px; }
.min-w-160 { min-width: 160px; }
.min-w-180 { min-width: 180px; }
.min-w-300 { min-width: 300px; }
.min-w-400 { min-width: 400px; }
.max-w-60 { max-width: 60px; }
.max-w-80 { max-width: 80px; }
.max-w-100 { max-width: 100px; }
.max-w-120 { max-width: 120px; }
.max-w-150 { max-width: 150px; }
.max-w-180 { max-width: 180px; }
.max-w-300 { max-width: 300px; }
.min-h-60 { min-height: 60px; }
.min-h-100 { min-height: 100px; }
.min-h-120 { min-height: 120px; }
.min-h-130 { min-height: 130px; }
.min-h-150 { min-height: 150px; }
.min-h-300 { min-height: 300px; }
.min-h-330 { min-height: 330px; }
.min-h-600 { min-height: 600px; }
.max-h-300 { max-height: 300px; }

.h-10 {
    height: 10px;
}
.h-13 {
    height: 13px;
}
.h-330 {
    height: 330px !important;
}

.rounded-2 {
    border-radius: 2px !important;
}
.rounded-4 {
    border-radius: 4px !important;
}
.rounded-6 {
    border-radius: 6px !important;
}
.rounded-8 {
    border-radius: 8px !important;
}
.rounded-10 {
    border-radius: 10px !important;
}
.rounded-12 {
    border-radius: 12px !important;
}
.rounded-14 {
    border-radius: 14px !important;
}
.rounded-16 {
    border-radius: 16px !important;
}
.rounded-20 {
    border-radius: 20px !important;
}
.rounded-80 {
    border-radius: 80px !important;
}
.rounded-100 {
    border-radius: 100px !important;
}
.rounded-start-16 {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}
.rounded-end-16 {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}
.rounded-end-6 {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}
.rounded-top-20 {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}
.rounded-bottom-10 {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.input-group-prepend .rounded-start-6 .selectize-input {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

/*font weight helper*/
.font-weight-300 {
    font-weight: 300 !important;
}
.font-weight-400 {
    font-weight: 400 !important;
}
.font-weight-500 {
    font-weight: 500 !important;
}
.font-weight-600 {
    font-weight: 600 !important;
}
.font-weight-700 {
    font-weight: 700 !important;
}
.font-weight-800 {
    font-weight: 800 !important;
}
.font-weight-bold {
    font-weight: 700;
}

/* font-size helper */
.font-size-8 {
    font-size: 8px !important;
}
.font-size-10 {
    font-size: 10px !important;
}
.font-size-11 {
    font-size: 11px !important;
}
.font-size-12 {
    font-size: 12px !important;
}
.font-size-13 {
    font-size: 13px;
}
.font-size-14 {
    font-size: 14px !important;
}
.font-size-15 {
    font-size: 15px;
}
.font-size-16 {
    font-size: 16px;
}
.font-size-18 {
    font-size: 18px;
}
.font-size-20 {
    font-size: 20px;
}
.font-size-22 {
    font-size: 22px !important;
}
.font-size-24 {
    font-size: 24px;
}
.font-size-26 {
    font-size: 26px;
}
.font-size-28 {
    font-size: 28px;
}
.font-size-29 {
    font-size: 29px !important;
}
.font-size-30 {
    font-size: 30px;
}
.font-size-32 {
    font-size: 32px !important;
}
.font-size-34 {
    font-size: 34px !important;
}
.font-size-36 {
    font-size: 36px;
}
.font-size-38 {
    font-size: 38px !important;
    line-height: 41.8px;
}
.font-size-53 {
    font-size: 53px;
}
.font-size-68 {
    font-size: 68px;
}

/* letter-spacing helper */
.letter-spacing-0 {
    letter-spacing: 0 !important;
}
.letter-spacing-min-1 {
    letter-spacing: -1px !important;
}
.letter-spacing-min-01 {
    letter-spacing: -0.01em !important;
}
.letter-spacing-4 {
    letter-spacing: -0.02em !important;
}
.letter-spacing-min-04 {
    letter-spacing: -0.04em !important;
}
.letter-spacing-6 {
    letter-spacing: 0.02em !important;
}
.letter-spacing-01 {
    letter-spacing: 0.1em !important;
}
.letter-spacing-04 {
    letter-spacing: 0.04em !important;
}
.letter-spacing-08 {
    letter-spacing: 0.08em !important;
}
.ls-1 {
    letter-spacing: 1px !important;
}

/* line height helper*/
.lh-11 {
    line-height: 11px !important;
}
.lh-12 {
    line-height: 12px !important;
}
.lh-15 {
    line-height: 16px !important;
}
.lh-16 {
    line-height: 16px !important;
}
.lh-17 {
    line-height: 17px !important;
}
.lh-18 {
    line-height: 18px !important;
}
.lh-19 {
    line-height: 19px !important;
}
.lh-20 {
    line-height: 20px !important;
}
.lh-22 {
    line-height: 22px !important;
}
.lh-24 {
    line-height: 24px !important;
}
.lh-27 {
    line-height: 27px !important;
}
.lh-30 {
    line-height: 30px !important;
}
.lh-33 {
    line-height: 33px !important;
}
.lh-35 {
    line-height: 35px !important;
}
.lh-36 {
    line-height: 36px !important;
}
.lh-41 {
    line-height: 42px !important;
}
.lh-42 {
    line-height: 42px !important;
}
.lh-48 {
    line-height: 48px !important;
}
.lh-64 {
    line-height: 64px !important;
}
.lh-81 {
    line-height: 81px !important;
}

/*  text helper */
.text-light-grey {
    color: var(--colorLightGrey);
}
.text-muted {
    color: var(--colorMuted) !important;
}
.text-muted-light {
    color: var(--colorMutedLight);
}
.text-light-grey-3 {
    color: var(--colorLightGrey3);
}
.text-grey-3 {
    color: var(--colorGrey3);
}
.text-black-2 {
    color: var(--colorBlack2);
}
.text-black-24 {
    color: var(--colorBlack24);
}
.text-red-orange,
.text-Red-Orange {
    color: var(--colorRedOrange);
}
.text-b9b9b9 {
    color: #b9b9b9;
}
.text-link-blue {
    color: var(--colorLinkBlue);
}

/*  input helper */
/* The container */
.checkbox-custom {
    display: block;
    position: relative;
    margin-right: 35px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-custom input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #ededed;
}

.checkmark.service {
    top: -5px;
}

/* On mouse-over, add a grey background color */
.checkbox-custom:hover input ~ .checkmark {
    background-color: #ededed;
}

/* When the checkbox is checked, add a blue background */
.checkbox-custom input:checked ~ .checkmark {
    background-color: #ed692c;
}

/* When the checkbox is checked, add a blue background */
.checkbox-custom input:checked ~ .checkmark.instant-payment {
    background-color: #ed692c;
    border: 2px solid #ed692c;
    border-radius: 2px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: '';
    display: none;
}

/* Show the checkmark when checked */
.checkbox-custom input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-custom .checkmark:after {
    content: '\f00c';
    display: none;
    font-family: 'Font Awesome 5 Free';
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}
.selectize-control.plugin-remove_button.hide-remove-button .remove-single {
    display: none;
}

.light-shadow {
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1),
        0px 1px 2px -1px rgba(16, 24, 40, 0.1);
}

.navbar.navbar-dark {
    background-color: var(--colorBlack);
    border-bottom: 1px solid #3d3d3d;
}

.navbar .navbar-brand img ~ span {
    font-family: 'ArticulatCF';
    font-size: 18px;
    font-weight: 600;
}

.nav-profile .dropdown-toggle::after {
    background-color: var(--colorWhite);
    width: 14px;
    height: 14px;
    position: relative;
    right: 12px;
    bottom: -12px;
    border-radius: 50%;
    border: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4.69955C3.90433 4.69955 3.81178 4.68161 3.72233 4.64574C3.63241 4.60986 3.55755 4.56203 3.49776 4.50224L0.197309 1.20179C0.0657695 1.07025 0 0.90284 0 0.699551C0 0.496263 0.0657695 0.328849 0.197309 0.197309C0.328849 0.0657695 0.496263 0 0.699551 0C0.90284 0 1.07025 0.0657695 1.20179 0.197309L4 2.99552L6.79821 0.197309C6.92975 0.0657695 7.09716 0 7.30045 0C7.50374 0 7.67115 0.0657695 7.80269 0.197309C7.93423 0.328849 8 0.496263 8 0.699551C8 0.90284 7.93423 1.07025 7.80269 1.20179L4.50224 4.50224C4.43049 4.57399 4.35277 4.62469 4.26906 4.65435C4.18535 4.68448 4.09566 4.69955 4 4.69955Z' fill='%239B9B9B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.nav-profile .information {
}

.nav-profile .information span:first-child {
    font-size: 10px;
    font-weight: 500;
    color: var(--colorPurple);
}

.nav-profile .information span {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorWhite);
}

.nav-profile .avatar {
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}

.nav-profile .avatar > img {
    max-width: 36px;
    opacity: 0;
}
.nav.custom-nav1 {
}
.nav.custom-nav1 li {
}
.nav.custom-nav1 li.nav-item:first-child {
    padding-right: 30px;
    padding-left: 0px;
}
.nav.custom-nav1 li.nav-item {
    padding-right: 30px;
    padding-left: 30px;
    position: relative;
}
.nav.custom-nav1 li.nav-item::after {
    position: absolute;
    content: '';
    border-right: 1px solid var(--colorMuted);
    width: 1px;
    height: 100%;
    right: 0px;
    top: 0px;
}
.nav.custom-nav1 li.nav-item:last-child {
    padding-right: 0px;
}
.nav.custom-nav1 li.nav-item:last-child::after {
    content: none;
}
.alert.alert-main-page {
    margin-bottom: 40px;
    background-color: var(--colorBlack);
}

.alert.alert-main-page .header-content {
    padding-top: 40px;
    padding-bottom: 40px;
}
.alert.alert-verification {
    background-color: var(--colorExtraLightRed);
    color: #9B6A51;
}
.container-main .section-menu {
    margin-bottom: 30px;
}

.container-main .section-menu .title {
    font-weight: 600;
    color: var(--colorMuted);
}

a > .card.card-main-menu:hover {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    -moz-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.card.card-main-menu {
    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    margin: 12px 0px;
}

.card.card-main-menu .card-body {
    padding: 20px 35px;
    text-align: center;
    position: relative;
}

.card.card-main-menu .card-body .ribbon {
    position: absolute;
    top: 13px;
    right: 18px;
}

.card.card-main-menu .card-body .ribbon > .badge.bg-danger {
    background-color: #fe467d !important;
}

.card.card-main-menu .card-body .icon-menu {
    margin-bottom: 20px;
    width: 100%;
    height: 25px;
}

.card.card-main-menu .card-body .icon-menu img {
    width: 24px;
    height: auto;
}

.card.card-main-menu.with-menu:hover::before {
    content: '';
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--colorWhite);
    position: absolute;
    transition: 200ms ease;
    border-radius: 12px;
}

.card.card-main-menu .card-floating {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: 400ms ease;
    z-index: 1;
}

.card.card-main-menu:hover .card-floating {
    opacity: 1;
}

.card.card-main-menu .btn-submenu-card {
    background-color: var(--colorGrey);
    color: var(--colorBlack);
    border: 1px solid var(--colorGrey);
    font-size: 13px;
    font-weight: 500;
}

.card.card-main-menu .btn-submenu-card:hover {
    background-color: var(--colorOrangeExtraLight);
    border-color: var(--colorOrange);
    border: 1px solid var(--colorOrange);
    color: var(--colorOrange);
}

.card.creator-modal {
    height: 320px;
    border: 2px solid #f2f2f2;
    box-shadow: 0px 4px 52px 0px #0000000a;
    background: linear-gradient(
        242.57deg,
        rgba(221, 100, 44, 0.5) -325.56%,
        rgba(221, 100, 44, 0) 48.42%
    );
}

.card.card-affiliate-program {
    border: 1px solid #f2f2f2;
    background: linear-gradient(
            243deg,
            rgba(221, 100, 44, 0.5) -325.56%,
            rgba(221, 100, 44, 0) 48.42%
        ),
        #fff;
    box-shadow: 0px 4px 52px 0px rgba(0, 0, 0, 0.04);
}

.text-chart-center {
    position: absolute;
    z-index: 10;
    top: 30px;
    font-weight: 700;
    width: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.text-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 58px;
    letter-spacing: -0.02em;
}

.text-title.font-size-44 {
    font-size: 44px;
    line-height: 57px;
}

.text-title.font-size-36 {
    font-size: 36px;
    font-weight: 600;
    line-height: 50px;
}

.text-title.font-size-29 {
    font-size: 29px;
    font-weight: 600;
    line-height: 35px;
}

.text-title.font-size-26 {
    font-size: 26px;
    line-height: 31.2px;
    letter-spacing: -2px;
}

.text-title.font-size-24 {
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: -2px;
}

.text-title.font-size-20 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
}

.text-title.font-size-18 {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.04em;
}

.text-title.font-size-16 {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.2em;
}

.text-left-border {
    border-left: 3px solid #ec692d;
    padding-left: 20px;
}

.text-bottom-border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 35px;
}

.text-top-border {
    border-top: 1px solid #bab6b61a;
}

.label-title {
    text-transform: uppercase;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.16em;
    text-align: center;
    color: #b7b7b7;
}

.section-menu.plan-stats .card.card-main-menu {
    border-radius: 0px;
}

.section-menu.plan-stats .card.card-main-menu.rounded-start {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

.section-menu.plan-stats .card.card-main-menu.rounded-end {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.navbar-nav .nav-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--colorGrey);
}

#navbarMobile .main-navbar.navbar-nav .nav-item {
    margin: 5px 0;
}
#navbarMobile .main-navbar.navbar-nav .nav-link {
    padding: 10px 20px;
}

.dropdown-menu-access li:has(.dropdown-item.active) {
    border-left: 5px solid var(--colorOrange);

}
.dropdown-menu-access li .dropdown-item {
    background-color: transparent !important;
    color: var(--colorWhite);
}

.main-navbar.navbar-nav .nav-link {
    padding-right: 20px;
    padding-left: 20px;
}
.navbar-nav .nav-link.active {
    color: var(--colorWhite);
}

.navbar-nav .dropdown-menu,
.dropdown-menu.dropdown-menu-access {
    background: var(--colorBlack);
    padding: 10px 18px;
    min-width: 130px;
}
.dropdown-menu.dropdown-menu-access .dropdown-item {
    padding: 15px 4px;
}

.navbar-nav .dropdown-menu .dropdown-item {
    color: var(--colorWhite);
    padding: 15px 4px;
    -webkit-transition: background-color 0.8s ease-out;
    -moz-transition: background-color 0.8s ease-out;
    -o-transition: background-color 0.8s ease-out;
    transition: background-color 0.8s ease-out;
}
.dropdown-menu.dropdown-menu-access .dropdown-item.active {
    padding-left: 0px;
}

.main-navbar.navbar-nav .dropdown-menu .dropdown-item.active,
.main-navbar.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: #5a3d35;
    color: #dd642c;
    border-radius: 8px;
}

.main-navbar.navbar-nav .dropdown-menu[data-bs-popper] {
    margin-top: 0.5rem;
}

.navbar-nav .dropdown-menu-end {
    min-width: 253px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    top: 48px;
    right: -8px;
}

.navbar-nav .dropdown-menu-end .dropdown-item {
    padding: 6px 4px;
}

.navbar-nav .dropdown-menu-end .dropdown-item:hover {
    background: unset;
}

.triangle-up {
    position: absolute;
    right: 11px;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 12px solid #2e2e2e;
}

.dropdown-divider {
    border-top: 1px solid #3c3c3c;
}

.navbar-nav .dropdown-menu .profile .text-ellipsis {
    color: var(--colorWhite);
}

.nav-sidemenu .nav-link {
    color: var(--colorBlack);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    border-radius: 8px;
    padding: 12px 15px;
}

.nav-sidemenu .nav-link:hover,
.nav-sidemenu .nav-link.active {
    color: var(--colorOrange) !important;
    background-color: var(--colorOrangeExtraLight) !important;
}

.title-page .breadcrumb-item {
    font-family: 'ArticulatCF';
    font-size: 28px;
    color: var(--colorLightGrey);
}

.title-page .breadcrumb-item.active {
    font-weight: 700;
    color: var(--colorBlack);
}

.table-border-rounded {
    border: 1px solid #ebebeb;
    border-radius: 10px;
}

.table-border-rounded thead tr {
    font-size: 10px;
    color: var(--colorMuted);
    border-bottom: 1px solid #ebebeb;
}

.dropdown-toggle.no-content:after {
    content: none;
}

.table-border-rounded tbody {
    font-size: 12px;
}

.table-border-header-only {
}

.table-border-header-only thead {
}

.table-border-header-only thead tr {
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.08);
}

.table-border-header-only thead tr th {
    color: var(--colorMuted);
    font-weight: 500;
}

.daterange-dropdownbutton {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    height: 32px !important;
    font-size: 12px;
    background-color: var(--colorWhite);
    text-align: left;
}

.selectize-input,
.selectize-input.dropdown-active {
    border-radius: 6px;
}

.selectize-control.rounded-10 .selectize-input,
.selectize-control.rounded-10 .selectize-input.dropdown-active {
    border-radius: 10px;
}
.selectize-control.selectize-ellipsis {
}
.selectize-control.selectize-ellipsis .selectize-input {
    padding-bottom: inherit;
}
.selectize-control.selectize-ellipsis .selectize-input .item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 20px);
}
.selectize-input.focus {
    box-shadow: none;
}

.dashboard-chief-affiliate .card .card-body {
    padding: 20px;
}

.form-check-input.dashboard:checked {
    background-color: #ff6636;
    border-color: #cd4e14;
}

.form-check-input.dashboard:focus {
    box-shadow: none;
}

.page-navigation-icon {
    background-color: var(--colorOrange);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 4px;
}

.page-navigation-icon > img {
    max-width: 20px;
}

.table-v3 {
    border: 1px solid #ebebeb;
    border-radius: 20px;
    background-color: var(--colorWhite);
    /* overflow: hidden; */
}

.table-v3 .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(250, 250, 250, 1);
    --bs-table-accent-bg: none;
}

.table-v3 thead tr {
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.08);
}

.table-v3 thead tr:hover {
    background-color: unset;
}

.table-v3 thead tr th {
    color: var(--colorMuted);
    border-bottom-color: #ebebeb !important;
    font-weight: 600;
    font-size: 10px;
    padding-bottom: 14px;
}
.table-v3 thead tr th:first-child {
    padding: 0.5rem;
}
.table-v3 tbody tr.active,
.table-v3 tbody tr.active a {
    background-color: var(--colorBlack) !important;
    color: var(--colorWhite) !important;
    border-radius: 8px;
}

.table-v3 tbody tr.active td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.table-v3 tbody tr.active td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.table-v3 > table.dataTable {
    margin-bottom: 15px !important;
}

.table-v3 > table.dataTable th.transaction-amount-tooltip {
    display: inline-block;
}

.table-filter input.form-control {
    height: 40px;
    border-radius: 8px;
    border-top: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-left: none;
}

.table-filter input.form-control:focus {
    box-shadow: none;
}

.table-filter .btn:focus {
    box-shadow: none;
}

.table-filter .btn-search {
    background-color: var(--colorWhite);
    border: 1px solid #ebebeb;
    border-radius: 8px;
}

.table-filter .selectize-input {
    height: 40px;
    font-weight: 600;
}

.form-program .selectize-input {
    height: 40px;
    border-radius: 10px;
}

.table-filter .selectize-input > *,
.form-program .selectize-input > * {
    vertical-align: -webkit-baseline-middle;
}

.table-filter .filter-date-course-transaction,
.table-filter .filter-date-books-transaction {
    height: 40px !important;
    border-radius: 8px;
    border: 1px solid #ebebeb;
}

.title-page {
    margin-top: 25px;
    margin-bottom: 40px;
}

.affiliate-program .detail-program .card-body {
    padding: 35px 30px;
}

.affiliate-program .detail-program .title {
    color: var(--colorMuted);
    font-weight: 600;
    font-size: 10px;
    margin-bottom: 2px;
}

.affiliate-program .detail-program .content {
    font-weight: 400;
    font-size: 14px;
}

.affiliate-program .detail-program .list-content {
    margin-bottom: 30px;
}

.material-style div.dataTables_wrapper div.dataTables_info {
    font-size: 14px;
}

.dataTables_paginate ul.pagination li.page-item.active a.page-link {
    background-color: var(--colorOrange);
    color: var(--colorWhite);
    font-size: 13px;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    margin-right: 4px;
    font-weight: 600;
}

.dataTables_paginate ul.pagination li.page-item a.page-link {
    background-color: transparent;
    color: var(--colorBlack);
    font-size: 13px;
    border-color: transparent;
    border-radius: 4px;
    text-align: center;
    margin-right: 4px;
    font-weight: 600;
}

.dataTables_paginate ul.pagination li.page-item.previous a {
    background-image: url(../../../img/v3/icon/icon-arrow-left-black.png);
    content: '';
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    color: #f8f8f8;
    border-color: transparent;
    text-indent: 100%;
    background-position: center;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.dataTables_paginate ul.pagination li.page-item.next a {
    background-image: url(../../../img/v3/icon/icon-arrow-right-black.png);
    content: '';
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    color: #f8f8f8;
    border-color: transparent;
    text-indent: 100%;
    background-position: center;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.dataTables_paginate ul.pagination li.page-item.first {
    display: none;
}

.dataTables_paginate ul.pagination li.page-item.last {
    display: none;
}

.modal-body.detail-program {
    padding: 0px 30px 30px 30px;
}
.detail-program .form-program .form-control {
    font-size: 14px;
}

.detail-program .form-program .form-control:focus {
    box-shadow: none;
}

.detail-program .form-program input.form-control,
.detail-program .form-program select.form-control {
    height: 40px;
}

.right-panel .card-menu .btn-card-menu {
    padding: 6px;
    font-size: 10px;
}

.right-panel .card-menu .btn-card-menu img {
    width: 10px;
    height: 10px;
}

.footer-page {
    margin-top: 84px;
    padding: 20px 0px;
    background-color: var(--colorExtraLightGrey);
    color: var(--colorLightGrey);
}

.footer-page.transparent {
    background-color: transparent;
}

.form-switch .form-check-input {
    width: 40px;
    height: 22px;
    background-color: #e3e3e3;
    border-color: transparent;
}

.form-switch .form-check-input.label-on-off {
    width: 64px;
    height: 28px;
}

.form-switch .form-check-input:focus {
    box-shadow: none;
}

.form-switch .form-check-input:focus:checked,
.form-switch .form-check-input:checked {
    /* background-position: right -2px top -8px;
    background-image: url('../../../img/v3/icon/icon-switch-on4.svg');
    background-size: 52px 40px; */
    background-position: right 3px center;
    background-image: url('../../../img/v3/icon/icon-switch-on-new.png');
    background-size: 40px 20px;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    background-position: left 3px center;
    background-image: url('../../../img/v3/icon/icon-switch-off-new.svg');
    background-size: 40px 20px;
    background-repeat: no-repeat;
    background-color: #e3e3e3;
}

/* .form-switch .form-check-input.label-on-off:focus:checked,
.form-switch .form-check-input.label-on-off:checked {
    background-image: url('../../../img/v3/icon/icon-switch-on.svg');
}

.form-switch .form-check-input.label-on-off,
.form-switch .form-check-input.label-on-off:focus {
    background-image: url('../../../img/v3/icon/icon-switch-off.svg');
} */

.form-switched.form-switch-tiny {}
.form-switched.form-switch-tiny .form-check-input {
    width: 24px;
    height: 14px;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    float: unset;
    border-radius: 100px;
    border-color: transparent;
    box-shadow: none;
    cursor: pointer;
}
.form-switched.left-label {
    padding-left: 0;
}
.form-switched.left-label .form-check-input {
    margin-left: 0px;
}

.form-switched.form-switch-tiny .form-check-input:focus:checked,
.form-switched.form-switch-tiny .form-check-input:checked {
    background-image: url('data:image/svg+xml,<svg width="24" height="15" viewBox="0 0 24 15" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="1" width="23" height="13" rx="6.5" fill="%23DCFFDF" stroke="%23C0FFC6"/><g filter="url(%23filter0_d_2050_428)"><circle cx="17" cy="7.5" r="6" fill="%233AE24A"/></g><defs><filter id="filter0_d_2050_428" x="11" y="1.5" width="13" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2050_428"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2050_428" result="shape"/></filter></defs></svg>') !important;
}

.form-switched.form-switch-tiny .form-check-input,
.form-switched.form-switch-tiny .form-check-input:focus {
    background-image: url('data:image/svg+xml,<svg width="24" height="15" viewBox="0 0 24 15" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="1" width="23" height="13" rx="6.5" fill="%23FFFFDC" stroke="%23EAEAEA"/><g filter="url(%23filter0_d_2051_472)"><circle cx="7" cy="7.5" r="6" fill="%23D6D6D6"/></g><defs><filter id="filter0_d_2051_472" x="0" y="1.5" width="13" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2051_472"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2051_472" result="shape"/></filter></defs></svg>') !important;
}

.affiliate-program
    .form-program
    .choose-payment-type
    .input-amount
    .input-group-text {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: transparent;
    font-size: 14px;
}

.affiliate-program
    .form-program
    .choose-payment-type
    .input-amount
    .form-control {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.affiliate-program .form-program .choose-payment-type .badge {
    background-color: #e3e3e3;
    color: var(--colorBlack);
    cursor: pointer;
}

.affiliate-program .form-program .choose-payment-type .badge.active {
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}

.dropzone-area {
    padding: 70px 200px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
}

.btn-action-invite-people.active {
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}

.btn-action-invite-people:focus {
    box-shadow: none;
}

.badge.badge-primary-light {
    background-color: var(--colorLightBlueAscent);
}

.badge-card::after {
    content: '+ New WhatsApp Broadcast';
    display: inline-block;
    padding: 8px 24px;
    border-radius: 0 8px 0 8px;
    background: var(--colorOrangeModal);
    color: var(--colorWhite);
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 0;
}

.table-v3 input[type='checkbox'] {
    width: 18px;
    height: 18px;
}

.invite-email input.form-control {
    height: 35px !important;
}

.input-group .input-group-text {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.input-group .form-control {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group.revert .input-group-text {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group.revert .form-control {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.table-v3 tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-invite-email input:hover,
.table-invite-email .input-group .form-control:hover,
.table-invite-email .input-group .input-group-text:hover {
    border-color: var(--colorOrange);
}

.tb-loading-wrapper {
}

.tb-loading-wrapper > img {
    max-width: 100%;
    width: 120px;
}

.badge.badge-audience-tags {
    background: #eef0f8;
    color: #7285d2;
    display: inline;
    margin: 2px;
    font-size: 10px;
    font-weight: 400;
    cursor: pointer;
}

.modal-configure.affiliate-program ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #cbcbcb;
    opacity: 1;
    /* Firefox */
}

.modal-configure.affiliate-program :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cbcbcb;
}

.modal-configure.affiliate-program ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #cbcbcb;
}

.modal-configure.affiliate-program .label.input-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--colorMuted);
}

.modal-configure.affiliate-program .form-control.input-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--colorBlack);
}

.selectize-control.multi .selectize-input > div.active,
.selectize-control.multi .selectize-input > div {
    background-color: var(--colorLightBlueAscent);
    padding: 5px 10px 5px 10px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    border-radius: inherit;
}

.form-group .form-selected-tags .remove {
    color: white;
    padding-left: 3px;
}

#form-course .selectize-dropdown-content,
.modal-configure.affiliate-program .form-group .selectize-dropdown-content {
    display: block !important;
}

.container-program {
    margin-top: unset !important;
    padding-top: 20px;
    background-color: #f8f8f8;
    height: 100vh;
}

.container-program .form-group {
    margin-bottom: 1rem;
}

.container-program .title-text {
    padding-left: 52px;
    padding-right: 52px;
}

.container-program .title {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.container-program .subtitle {
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
}

.container-program label {
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.container-program .form-control {
    font-size: 14px;
    border-radius: 10px;
    border-color: #b1b1b1 !important;
    margin-bottom: 23px;
}

.container-program .input-group.input-merge {
    border: 1px solid #ededed;
    border-radius: 10px;
    height: 37px;
}

.container-program .input-phone-code {
    width: 80px;
}

.container-program
    .input-phone-code
    .selectize-control.single
    .selectize-input {
    border-radius: 10px 0 0 10px;
    height: 20px !important;
}

#form_personal_information
    .phoneCode
    .selectize-control.single
    .selectize-input {
    border: none !important;
    border-radius: 8px;
    padding-left: 8px;
    text-align: left;
    background: none;
}

#form_personal_information
    .phoneCode
    .selectize-control.single
    .selectize-input:after {
    right: 1px;
}

#form_personal_information .phoneCode .selectize-dropdown-content {
    background: var(--colorWhite);
}

.container-program
    .input-phone-code
    .selectize-control.single
    .filter-product-affiliate
    .selectize-dropdown,
.selectize-dropdown.form-control,
.filter-product-affiliate .form-control.selectize-control {
    width: 300px !important;
}

.container-program .btn-subscribe {
    margin-top: 40px;
    background-color: #ffd9c8 !important;
    border-color: #ffd9c8 !important;
    background: #ffd9c8 !important;
    color: var(--mainColorDark) !important;
    padding: 6px 25px;
    border-radius: 5px;
}

.modal-invite-people.affiliate-program .form-program .btn-remove {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    padding-top: 10px;
    padding-left: 13px;
}

.modal-invite-people.affiliate-program .form-program .btn-remove i {
    font-size: 12px;
}

.border-right {
    border-right: 1px solid #ebebeb !important;
}

.border-left {
    border-left: 1px solid #ebebeb !important;
}

.border-bottom {
    border-bottom: 1px solid #ebebeb !important;
}

.border-bottom-dark {
    border-bottom: 1px solid #c9c9c9;
}
.border-top-dark {
    border-top: 1px solid #c9c9c9;
}

.btn-light-red {
    border: 1px solid var(--colorLightRed);
}

.btn-light-green2 {
    border: 1px solid var(--colorLightGreen2);
}

.btn-outline-dark-red {
    border: 1px solid var(--colorDarkRed);
}

.marketplace-view
    .selectize-dropdown.single
    .selectize-dropdown-content
    .option {
    font-weight: 600;
    font-size: 12px;
    color: var(--colorBlack);
}

.crop-center {
    object-fit: none;
    object-position: center;
}

.cover-center {
    object-fit: cover;
    object-position: center;
}

.marketplace-view .btn-status {
    border: 1px solid var(--colorDarkGrey);
    background-color: #b1b1b1;
    border-radius: 6px;
    padding-top: 3px;
    padding-left: 12px;
    padding-right: 12px;
}

.marketplace-view .content-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.marketplace-view .content-pagination li .page-item {
    width: 30px;
    height: 28px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    background: #ededed;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #2f3237;
    border-radius: 2px;
}

.marketplace-view .content-pagination li .page-item.active {
    background: #ed692c;
    color: #ededed;
}

.marketplace-view .content-pagination li .page-item.bg-no.disabled {
    color: #6666;
}

.btn-outline-green {
    border: 1px solid var(--colorGreen);
}

.btn-outline-warning {
    border: 1px solid #bd4a51;
}
.btn-outline-white {
    border: 1px solid #fff;
}

.btn-outline-warning:hover {
    background: unset;
}

.btn-outline-danger:hover {
    background: unset;
    color: #dc3545;
}

.btn-outline-black {
    border: 1px solid var(--colorBlack);
}

.border-dashed {
    border-style: dashed !important;
    border-width: thin !important;
}

.instant-payment .detail-program .accordion-item {
    border: unset !important;
}

.instant-payment .detail-program .accordion-header .title {
    font-weight: 500;
    font-size: 18px;
    color: var(--colorBlack);
}

.instant-payment .detail-program .accordion-header .desc {
    font-weight: 400;
    font-size: 13px;
    color: var(--colorLightGrey);
}

.instant-payment
    .detail-program
    .accordion-header
    .accordion-button:not(.collapsed) {
    color: transparent;
    box-shadow: none;
    background-color: unset;
}

.instant-payment .detail-program .accordion-header .accordion-button {
    color: transparent;
    padding: unset;
}

.instant-payment .detail-program .accordion-header .accordion-button:focus {
    z-index: unset;
    border-color: transparent;
    outline: unset;
    box-shadow: unset;
}

/* .instant-payment .detail-program .accordion-header .accordion-button:not(.collapsed)::after {
    background-image: url('../../../img/v3/icon/icon-collapse-bottom.svg');

} */
.instant-payment .detail-program .accordion-header .accordion-button::after {
    /* background-image: url('../../../img/v3/icon/icon-collapse-top.svg'); */
    background-image: url('../../../img/v3/icon/icon-collapse-bottom.svg');
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
}

.pac-container {
    z-index: 2000 !important;
}

.instant-payment .transaction table {
    width: 100%;
}

.instant-payment .transaction table tr th {
    width: 20%;
}

.instant-payment .transaction table tr th a {
    color: #929292;
    background-color: #fafafa;
    cursor: pointer;
}

.instant-payment .transaction table tr th.active {
    background-color: #f2f2f2 !important;
    border-bottom: 2px solid var(--colorOrange) !important;
}

.instant-payment .transaction table tr th.active a > div + div {
    color: var(--colorOrange) !important;
}

.btn-outline-orange-extra-light {
    border: 1px solid var(--colorOrangeExtraLight);
}

/* course */
/* padding helper*/
.text-ellipsis {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-ellipsis.one-row {
    white-space: break-spaces;
}

.text-ellipsis.two-row {
    white-space: normal;
    -webkit-line-clamp: 2;
}

.text-ellipsis.three-row {
    white-space: normal;
    -webkit-line-clamp: 3;
}

.text-ellipsis.four-row {
    white-space: normal;
    -webkit-line-clamp: 4;
}

.text-ellipsis-2row {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-ellipsis-1row {
    overflow: hidden;
    display: block;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.table-no-border .table-bordered {
    border: none;
}

.padding-x-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.p-30 {
    padding: 30px;
}

/* row helper*/
.row.row-gap-10 div[class^='col-'] {
    padding-left: 10px;
    padding-right: 10px;
}

/* card helper*/
.card {
    border: 1px solid #ebebeb;
}


/* bg helper*/
.bg-gradient-black-white {
    background: linear-gradient(
        180deg,
        rgba(23, 23, 23, 0) 25.81%,
        rgba(53, 49, 49, 0.2) 394.76%
    );
}

label {
    letter-spacing: 1px;
}

.badge {
    font-weight: 500;
}

.badge.badge-category-course {
    line-height: 130%;
    background: #ec692d;
    box-shadow: 0px 3.19629px 3.19629px 0.799073px rgba(0, 0, 0, 0.04);
    letter-spacing: 0.02em;
    color: #f8f8f8;
}

.badge.badge-status {
    font-size: 8px;
    color: #7c7c7c;
    background-color: #dfdfdf;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #cccccc;
}

.badge.badge-status.bg-success {
    color: #157b50;
    background-color: var(--colorLightGreen);
    border: 1px solid #25c883;
}

.badge.badge-status.bg-active {
    color: #6c1a00;
    background: #ffdcbb;
    border: 1px solid #ffb28e;
    border-radius: 100px;
}

/* button helper */

.btn.btn-outline-primary:hover svg path {
    fill: #ec692d;
}

.btn.btn-grey {
    background: #c0c0bf;
    border: 2px solid #c0c0bf;
}

.btn.btn-grey:hover {
    box-shadow: none;
}

.btn.btn-grey svg path {
    fill: #ffffff;
}

.btn.btn-white {
    color: #ec692d;
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn.btn-outline-black {
    color: #2e2e2e;
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    background-color: white;
}

.btn.position-relative span.absolute-right {
    position: absolute;
    top: 5px;
    /* Atur posisi vertikal sesuai kebutuhan */
    right: 7px;
}
.btn-outline-primary.btn-dropdown-invitation.dropdown-toggle.show:focus {
    box-shadow: none;
    color: var(--colorOrangeDarken);
    border-color: var(--colorOrangeDarken);
    background-color: transparent;
}

/* d-flex helper*/
.d-flex .flex-column.flex-basis-20 {
    flex-basis: 20%;
}

/*  card helper */
.border-light-grey {
    border: 1px solid #ebebeb;
}

.border-light-gray {
    border: 1px solid #E1E1E1;
}

.course-information-sales {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.course-information-sales .course-information-sales-item {
    border-right: 1px solid #eeeeee;
    padding: 1rem;
    min-width: 175px;
}

.course-information-sales .course-information-sales-item:last-child {
    border-right: none;
}

.course-information-sales .course-information-sales-item .item-bottom {
    margin-top: 100px;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
}

.container.with-sticky-bottom {
    min-height: calc(100vh - 95px);
}

.font-family-articulate {
    font-family: 'ArticulatCF';
}

.font-family-inter {
    font-family: 'Inter', sans-serif !important;
}

.font-family-open-sans {
    font-family: 'Open Sans';
}

.bg-orange {
    background-color: var(--colorOrange) !important;
}

.bg-black {
    background-color: var(--colorBlack) !important;
    color: var(--colorWhite);
}

.bg-black-2 {
    background-color: var(--colorBlack2) !important;
    color: var(--colorWhite);
}
.bg-bronze {
    background-color: var(--colorBronze) !important;
    color: var(--colorWhite);
}

.bg-ellipsis-shadow {
    background-image: url('../../../img/course/ellipsis-shadow.png');
    background-repeat: no-repeat;
    background-size: 450px;
    background-position: top left;
}

.bg-image-top-rainbow {
    background-image: url(../../../img/v3/assets/lp/bg-get-know.png);
    background-repeat: no-repeat;
    background-position: top -90px right 0;
}

.bg-card-img-publish {
    /* background: #fef5fa; */
}

.bg-card-img-draft {
    background: var(--colorWhite);
}

.bg-card-body-publish {
    /* background: radial-gradient(circle, rgba(253, 238, 247, 1) 50%, rgba(254, 245, 250, 1) 100%, rgba(255, 255, 255, 1) 95%) */
}

.bg-card-body-draft {
    background: var(--colorWhite);
}

.bg-GreyBg {
    background: var(--colorGreyBg);
}

.image-force-bottom {
    position: relative;
    min-height: 104px;
    background-image: url(../../../img/v3/assets/bg-type.png);
    background-repeat: no-repeat;
    background-position: 42% 0;
    background-size: 200px 100%;
}

.image-force-bottom > img {
    position: absolute;
    width: 120px;
    bottom: 0;
    left: 25%;
}

.bg-bronze .btn.btn-primary-outline,
.bg-black-2 .btn.btn-primary-outline {
    background-color: transparent;
    color: var(--colorWhite);
    border-color: var(--colorWhite);
}

.table.table-version-2 {
    margin: 0px !important;
    font-family: 'Inter', sans-serif;
}

.table.table-version-2 thead {
    border-bottom: 1px solid #ebebeb;
    color: var(--colorMuted);
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.table-version-2 .dataTables_wrapper {
    border-radius: 20px !important;
    border: 1px solid #ededed;
}

.table-version-2 .table.table-version-2 td,
.table th {
    padding: 0.75rem;
    vertical-align: top;
}

.table.table-version-2.table-striped tbody tr:nth-of-type(odd) {
    background-color: inherit;
}

.tab-affiliate {
    margin-right: 20px;
    padding: 10px;
    border-radius: 10px;
    width: 103px;
    height: 57px;
}

.tab-affiliate.active {
    box-shadow: 0px 1px 3px 0px #1018281a;
}

.course-category-preview {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

button.round-button {
    border-radius: 50%;
    border: 1px solid #ebebeb;
}

.header-detail-course {
    background: linear-gradient(180deg, #2e2e2e 0%, #353131 100%);
    box-shadow: inset 0px -28px 28px rgba(0, 0, 0, 0.24);
    position: relative;
    /* margin-left: -15px;
    margin-right: -15px; */
}

.header-detail-course .name-course {
    font-size: 48px;
    color: var(--colorWhite);
    font-weight: 700;
    font-family: 'ArticulatCF';
    line-height: 120%;
}

.header-detail-course .description-course {
    font-size: 22px;
    line-height: 130%;
    letter-spacing: 0.02em;
    color: var(--colorWhite);
    font-weight: 300;
    font-family: 'ArticulatCF';
    margin-top: 8px;
}

.header-detail-course .course-rating-star {
    display: flex;
    align-items: center;
    color: #ffa800;
    margin-left: 20px;
    font-size: 24px;
}

.header-detail-course .course-rating-star .course-star-view {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.header-detail-course .course-rating-star .course-star-view .icon {
    margin-left: 4px;
}

.header-detail-course .card-img-top {
    width: 100%;
    height: 522px;
    object-fit: cover;
    border-radius: 4px;
}

.btn.course-publish-status-draft:disabled {
    background: #c0c0bf;
    border: 2px solid #c0c0bf;
    color: #ffffff;
    opacity: unset;
}

.btn.course-publish-status-draft:disabled svg path {
    fill: #ffffff;
}

.btn.course-publish-status-draft {
    background: #ec692d;
    border: 2px solid #bc4c18;
    color: #ffffff;
}

.btn.course-publish-status-publish,
.btn.product-publish-status-publish {
    background: #ffffff;
    border: 1px solid #25c883;
    color: #157b50;
}

.btn.course-publish-status-publish.inreview {
    border-radius: 8px;
    border: 2px solid var(--secondary-900, #09485e);
    background: var(--info-500, #4a7ea1);
    color: #fff;
}
.btn.btn-publish-without-powerup {
    border-radius: 100px;
    border: 1px solid #25c883;
    color: #157b50;
}
.btn.btn-draft-with-powerup {
    border-radius: 100px;
    border: 1px solid #bd4a51;
    color: #bd4a51;
}
.btn.course-publish-status-publish.inreview svg path {
    fill: #fff;
}
.btn.course-publish-status-publish svg path {
    fill: #157b50;
}
.course-publish-status-publish.with-powerup,
.product-publish-status-publish.with-powerup {
    /* border-radius: 8px;
    border: 2px solid #000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), linear-gradient(180deg, #1E1D1D 0%, #000 50%, #1E1111 100%);
    box-shadow: -8px 1px 20px 0px rgba(254, 255, 208, 0.25) inset;
    color: #FAD400; */
    border-radius: 6px;
    border: 2px solid #ccc;
    background-color: #ccc;
    box-shadow: -8px 1px 20px 0px rgba(254, 255, 208, 0.25) inset;
    color: #716d6d;
}

.course-publish-status-publish.with-powerup svg path,
.product-publish-status-publish.with-powerup svg path {
    fill: #fff;
}

.course-publish-status-publish.with-powerup svg rect,
.product-publish-status-publish.with-powerup svg rect {
    fill: #111827;
    opacity: 0.3;
}
.btn.course-publish-status-draft svg path {
    fill: #bc4c18;
}

.btn.course-publish-status-draft:hover {
    background: #ec692d;
    border: 2px solid #bc4c18;
    border-color: #bc4c18 !important;
}

.btn.product-publish-status-draft:disabled {
    background: #c0c0bf;
    border: 2px solid #c0c0bf;
    color: #ffffff;
    opacity: unset;
}

.btn.product-publish-status-draft:disabled svg path {
    fill: #ffffff;
}

.btn.product-publish-status-draft {
    background: #ec692d;
    border: 2px solid #ec692d;
    color: #ffffff;
}

.btn.product-publish-status-publish.inreview {
    border-radius: 8px;
    border: 2px solid var(--secondary-900, #09485e);
    background: var(--info-500, #4a7ea1);
    color: #fff;
}

.btn.product-publish-status-publish.inreview svg path {
    fill: #fff;
}

.btn.product-publish-status-publish svg path {
    fill: #157b50;
}

.btn.product-publish-status-draft svg path {
    fill: #bc4c18;
}

.btn.product-publish-status-draft:hover {
    background: #ec692d;
    border: 2px solid #bc4c18;
    border-color: #bc4c18 !important;
}

.btn-open-modal-update:disabled {
    color: #949697;
    border: 1px solid #ced4da;
}

#modal-publish-powerup-confirmation {
}
#modal-publish-powerup-confirmation .modal-body {
    padding: 0px 30px;
}
#modal-publish-powerup-confirmation .modal-footer {
    padding-left: 30px;
    padding-right: 30px;
}
#modal-publish-powerup-confirmation .modal-footer {
    background: rgba(255, 242, 233, 0.4);
}

#modal-expired-affiliate {
}

#modal-expired-affiliate .modal-body {
    padding: 30px;
}

.modal .modal-bg-warning {
    background: rgba(255, 242, 233, 0.4);
}
.modal .modal-text-infor {
    color: #070707;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 16px;
}
.modal .modal-title {
    color: #dd2c2c;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 16px;
}
#modal-expired-affiliate .modal-body .modal-title {
    color: #dd2c2c;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 16px;
}

#modal-expired-affiliate .modal-body .modal-description {
    color: #b1b1b1;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 18.48px */
    letter-spacing: 0.28px;
    margin-bottom: 38px;
}
#modal-need-republish .modal-dialog {
    max-width: 900px;
}
#modal-need-republish .modal-content {
    max-width: 900px;
    border-radius: 16px;
    padding: 70px 120px 0px 120px;
}
#modal-need-republish .modal-title {
    color: var(--orange, #dd642c);
    text-align: left;
    font-family: Inter;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}
#modal-need-republish .modal-description {
    color: var(--black, #2e2e2e);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 132%; /* 18.48px */
    letter-spacing: 0.28px;
}
#modal-need-republish .republish-widget {
    text-align: center;
    margin: 50px 0px;
}

.header-detail-course .card-information-course {
    position: absolute;
    top: calc((100% + 1.5rem) - 170px - 0.7rem);
    right: 0px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #ebebeb;
    box-shadow: -16px 12px 44px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    max-width: 376px;
    width: 100%;
}

.header-detail-course .information-detail.border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.header-detail-course .information-detail .border-right {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.header-detail-course .card-information-course .card-information-course-detail {
    border-radius: 10px;
    width: 83%;
    margin: 0 4%;
    bottom: 10px;
    background: rgba(255, 255, 255, 0.88);
}

.card-information-course .added-content-powerup {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 10px 0px;
    font-size: 13px;
    color: #434343;
    font-weight: 600;
    line-height: 130%; /* 16.9px */
    letter-spacing: 0.26px;
}
.card-information-course .swift-off-published {
    color: #ec692d;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 16.9px */
    letter-spacing: 0.26px;
}
.card-information-course .swift-off-published.disabled {
    cursor: no-drop !important;
    color: #434343;
}

.course-click-image {
    width: 50px;
    cursor: pointer;
}

.course-click-image > img {
    width: inherit;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.product-image-repeater-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.product-image-repeater-wrapper .product-image-repeater-group {
    position: relative;
    margin-right: 8px;
    margin-bottom: 8px;
}
.product-image-repeater-wrapper .product-image-repeater-group .repeater-action {
    position: absolute;
    right: -8px;
    top: -10px;
}
.product-image-repeater-wrapper
    .product-image-repeater-group
    .repeater-action
    .repeater-remove {
    background-color: #ff4646;
    border: none;
    border-radius: 50%;
    line-height: 0;
    padding: 3px 4px;
    color: #fff;
    font-size: 8px;
}
.product-image-repeater-wrapper .product-image-repeater-group .repeater-item {
}
.product-image-repeater-wrapper
    .product-image-repeater-group
    .repeater-item
    .img-click {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 8px;
}
.product-image-repeater-wrapper
    .product-image-repeater-group
    .repeater-item
    .image-preview {
}
.product-image-repeater-wrapper .product-image-repeater-add {
}
.preview-image {
    min-height: 323px;
    background-color: #eeeeee;
    background-size: cover;
    background-position: center center;
}
.input-group.rounded {
    border-radius: 8px;
    border: 1px solid #e1e1e1;
}

.input-group.rounded .input-group-prepend {
    background-color: inherit;
}

.input-group.rounded .input-group-append {
    background-color: inherit;
}

.input-group.rounded input {
    border-radius: inherit;
}

.modal.modal-published-course .text-muted {
    color: #a59c9c !important;
}

.list-published-items {
    list-style-type: none;
    padding: 0;
}

.list-published-items .item {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 19.2px;
    color: #363333;
}

.list-published-items .item span {
    margin-right: 10px;
}

.modal.modal-published-course .powerup-content {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    box-shadow: 0px 4px 52px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-sizing: border-box;
}

.modal.modal-published-course .powerup-content .text-include-powerup {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 110%;
    letter-spacing: 0.02em;
    background: linear-gradient(
        265.35deg,
        #e8aeb0 -8.49%,
        #ff2830 53.94%,
        #f3e490 113.82%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0px 4px 36px rgba(255, 230, 183, 0.6);
}

.modal.modal-published-course .powerup-content .btn-activation-powerup {
    background: #fff5f2;
    border: 3px solid #ffcdb7;
    box-shadow: 0px 0px 4px rgba(35, 35, 35, 0.19);
    border-radius: 100px;
}
.modal-published-course .label-benefit {
    margin-top: 40px;
    margin-bottom: 70px;
}

.list-powerup-items {
    margin-top: 30px;
    margin-bottom: 70px;
}

.list-powerup-items .item {
    margin-bottom: 15px;
}

.modal-published-course .list-published-items {
    margin-top: 40px;
    margin-bottom: 70px;
    font-size: 16px;
    font-weight: 500;
}

.modal-published-course .list-published-items .item {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500px;
    line-height: 19.2px;
    color: #363333;
}

.modal-published-course .list-powerup-items {
    list-style-type: none;
    padding: 0;
}

.modal-published-course .list-powerup-items .item {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.2px;
    color: #32569e;
}

.modal-published-course .list-powerup-items .item span {
    margin-right: 10px;
}

.modal-published-course .modal-footer {
    background-color: inherit;
}
.widget-deactivated-powerup {
    padding: 4px 8px 4px 4px;
    justify-content: flex-end;
    border-radius: 100px;
    border: 1px solid #ccc;
    color: #7c7c7c;
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 16.9px */
    letter-spacing: 0.26px;
    cursor: no-drop;
}
.added-content-powerup .btn-add-powerup {
    border-radius: 100px;
    border: 1px solid #25c883;
    color: #157b50;
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 16.9px */
    letter-spacing: 0.26px;
    padding: 4px 8px 4px 4px;
    cursor: pointer;
}
.added-content-powerup {
    display: flex;
    align-items: center;
}
.added-content-powerup .btn-add-powerup span {
    border-radius: 100px;
    margin-right: 4px;
    background: #caffe9;
}
.added-content-powerup .btn-add-powerup span svg {
    margin-left: 2px;
    margin-bottom: 2px;
}

.dropdown-menu.dropdown-menu-bg-light {
    text-align: center;
    background-color: #ffffff;
    padding: 10px;
}

.dropdown-menu.dropdown-menu-bg-light .dropdown-item {
    background-color: #f9f9f9;
    padding: 8px 12px;
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-family: 'ArticulatCF';
    border-radius: 6px;
}

.dropdown-menu.dropdown-menu-bg-light .dropdown-item.border-dark {
    border: 1px solid #1a1b1c;
}

.dropdown-menu.dropdown-menu-bg-light .dropdown-item.border-dagger {
    border: 1px solid #fe4242;
    color: #bb1e1e;
}

#filter-product-dropdown .dropdown-menu .dropdown-item:active {
    background-color: #e9ecef !important;
    color: #1e2125 !important;
}

#mainNavbar .dropdown-menu .dropdown-item.active,
#mainNavbar .dropdown-menu .dropdown-item:active,
#mainNavbar .dropdown-menu .dropdown-item:focus,
#mainNavbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--colorBlack) !important;
}

.navbar.navbar-expand-md {
    height: 52px;
}
.navbar.navbar-expand-md img.tribelio-logo-triangle {
    width: 38px;
}

.navbar.navbar-expand-md.bg-black {
    color: var(--colorWhite);
    background-color: #2e2e2e;
}

.navbar.navbar-expand-md.bg-black a {
    color: var(--colorWhite);
}

.modal.modal-activated-lesson .modal-content {
    min-width: 600px;
}

.modal.modal-activated-lesson .lesson-activated-switch {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fafafa;
    border: 1px solid #ececec;
    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    margin-top: 28px;
    color: #777777;
    font-size: 12px;
    align-items: center;
}

.lesson-activated-switch .switch-activated {
    display: flex;
    align-items: center;
}

.switch-activated .switch {
    position: relative;
    /* display: inline-block; */
    width: 75px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch-activated .form-activated-lesson {
    width: 76px;
    height: 28px;
    padding: 4px;
    border: 1px solid #d6d6d6;
}

.switch-activated
    .form-check-input[type='checkbox']:checked
    ~ .form-check-label::before {
    width: 20px;
    /* Sesuaikan lebar sesuai kebutuhan */
}

.switch-activated .switch .slider {
    position: unset;
}

.switch-activated .switch .slider::before {
    width: 40px;
    height: 20px;
    bottom: 4px;
    left: 4px;
    border-radius: 100px;
    background-color: #2e2e2e;
}

.switch-activated .switch input:checked + .slider::before {
    transform: unset;
    background-color: #2e2e2e;
}

.switch-activated .switch input:checked + .slider {
    background-color: #ccc;
}

.switch-activated .switch.switch-activated input:checked + .slider::before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
    background-color: #2cdd93;
}

.switch-activated .switch.switch-activated input:checked + .slider {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
}

.switch-activated .switch .slider.round {
    width: 75px;
    height: 28px;
}

.switch-activated .switch .slider.round::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.switch-activated .switch.switch-activated input:checked + .slider::after {
    -webkit-transform: translate(41px, -50%);
    -ms-transform: translate(41px, -50%);
    transform: translate(41px, -50%);
    background-color: #2cdd93;
}

.sharer-list {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

.lesson-activated-switch .switch-activated {
    display: flex;
    align-items: center;
}

#form-course input::placeholder,
#form-course textarea::placeholder {
    color: #d2d2d2;
}

#form-course .pixel-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    width: 100%;
    padding: 0 2%;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
}

#form-course .pixel-form .pixel-icon {
    width: 5%;
}

#form-course .pixel-form .pixel-setting {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 7%;
    height: 72%;
    padding-left: 9px;
    border-left: 1px solid #ced4da;
}

#form-course .pixel-form .pixel-input {
    width: 76%;
}

#form-course .pixel-form .pixel-input.edit {
    width: 86%;
}

#form-course .pixel-form .pixel-btn {
    width: 28%;
    text-align: right;
}

#form-course .form-control[readonly] {
    background-color: var(--colorWhite) !important;
    border: none;
}

#form-course .form-control[readonly]::placeholder {
    color: var(--colorMuted) !important;
    opacity: 1; /* Firefox */
}

#form-course .form-control[readonly]::-ms-input-placeholder {
    /* Edge 12-18 */
    color: var(--colorMuted) !important;
}

#form-course .selectize-control.multi .selectize-input > div {
    font-size: 8px;
    border-radius: 20px;
}

#form-course .btn-check:checked + .btn-link,
.btn-group-custom-inner .btn-check:checked + .btn-link {
    color: var(--colorWhite) !important;
    background-color: var(--colorBlack) !important;
}

#form-course .btn-check + .btn-link,
.btn-group-custom-inner .btn-check + .btn-link {
    text-decoration: none !important;
    font-size: 10px;
    border-radius: 8px !important;
    color: var(--colorLightGrey) !important;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
}
#form-course .btn-group.readonly .btn-check:disabled + .btn,
.btn-group-custom-inner.btn-group.readonly .btn-check:disabled + .btn,
#form-course .btn-group.readonly .btn-check[disabled] + .btn,
.btn-group-custom-inner.btn-group.readonly .btn-check[disabled] + .btn {
    opacity: 1;
}



.form-control:focus {
    box-shadow: none;
}

.switch-activated .switch {
    position: relative;
    /* display: inline-block; */
    width: 75px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch-activated .switch .slider {
    position: unset;
}

.switch-activated .switch .slider::before {
    width: 40px;
    height: 20px;
    bottom: 4px;
    left: 4px;
    border-radius: 100px;
    background-color: #2e2e2e;
}

.switch-activated .switch input:checked + .slider::before {
    transform: unset;
    background-color: #2e2e2e;
}

.switch-activated .switch input:checked + .slider {
    background-color: #ccc;
}

.switch-activated .switch.switch-activated input:checked + .slider::before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
    background-color: #2cdd93;
}

.switch-activated .switch.switch-activated input:checked + .slider {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
}

.switch-activated .switch .slider.round {
    width: 75px;
    height: 28px;
}

.switch-activated .switch .slider.round::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.switch-activated .switch.switch-activated input:checked + .slider::after {
    -webkit-transform: translate(41px, -50%);
    -ms-transform: translate(41px, -50%);
    transform: translate(41px, -50%);
    background-color: #2cdd93;
}

.selecting-lesson-type {
    background: #ffffff;
    border: 1px solid #e7e8e7;
    border-radius: 12px;
    overflow: hidden;
}

.selecting-lesson-type .text-header {
    background: #f7f7f7;
    border-bottom: 1px solid #f2f2f2;
    padding: 8px;
    font-family: 'ArticulatCF';
}

.selecting-lesson-type .text-header.active {
    background: linear-gradient(
            180deg,
            #2cdd93 -750.92%,
            rgba(44, 221, 147, 0) 50%
        ),
        #effff8;
}

.selecting-lesson-type #text-header-active {
    background: linear-gradient(
            180deg,
            #2cdd93 -750.92%,
            rgba(44, 221, 147, 0) 50%
        ),
        #effff8;
}

ul.selection-lesson-items {
    padding: 20px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

ul.selection-lesson-items li.selection-lesson-item {
    font-size: 14px;
    border-bottom: 1px solid #ececec;
    backdrop-filter: blur(14.3556px);
    padding: 8px 0px;
    font-family: 'ArticulatCF';
    margin-bottom: 20px;
}

ul.selection-lesson-items li.selection-lesson-item span {
    margin-right: 10px;
}

.corse-status-draft.btn-group-action-published {
    color: #b9b9b9;
}

.corse-status-publish.btn-group-action-published {
    color: #6c6c6c;
}
.dropdown.dropdown-toggle-arrow-none .dropdown-toggle:after {
    display: none;
}

/* Course Card, available on 2 size (default & small)*/
.course-card-item.small {
    font-size: 10px;
    width: 210px;
    height: 320px;
    border-radius: 16px;
}

.course-card-item.xs-small {
    font-size: 10px;
    width: 200px;
    height: 310px;
    border-radius: 16px;
}

.course-card-item.auto {
    font-size: 12px;
    width: 100%;
    border-radius: 16px;
}

.course-card-item {
    font-size: 12px;
    width: 250px;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    display: inline-block;
    margin-right: 1em;
}

.course-card-item:last-child {
    margin-right: 0;
}

.course-card-item .course-card-item-body {
    position: relative;
    padding: 1.1em;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--colorLightGrey);
}

.course-card-item .course-card-item-body .course-card-item-actions {
    position: absolute;
    width: calc(100% - 2.2em);
    right: 1.1em;
    top: 1.1em;
    text-align: right;
}

.course-card-item .course-card-item-body .course-card-item-actions > span {
    font-size: 0.9em;
    font-family: 'ArticulatCF';
    font-weight: 500;
    color: #f8f8f8;
    background-color: #ec692d;
    border-radius: 100px;
    padding: 0.3em 1em;
    height: 1.8em;
    margin-left: 0.6em;
    min-width: 7em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
}

.course-card-item
    .course-card-item-body
    .course-card-item-actions
    > span:first-child {
    margin-left: 0;
}

.course-card-item .course-card-item-body .course-card-item-image {
    display: none;
}

.course-card-item .course-card-item-body .course-card-item-info {
    position: absolute;
    width: calc(100% - 2.2em);
    left: 1.1em;
    bottom: 1.1em;
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 1.2em;
    padding: 0.9em;
}

.course-card-item .course-card-item-body .course-card-item-info .course-title {
    font-size: 1.3em;
    font-family: 'ArticulatCF';
    font-weight: 700;
    color: #484747;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-lessons {
    font-size: 0.9em;
    font-family: 'ArticulatCF';
    font-weight: 500;
    color: #b9b9b9;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1853_19216)'%3E%3Cpath d='M9.46366 2.86218C8.99348 2.71393 8.47671 2.65039 7.98111 2.65039C7.15512 2.65039 6.26559 2.81983 5.65139 3.28577C5.03719 2.81983 4.14766 2.65039 3.32167 2.65039C2.49567 2.65039 1.60614 2.81983 0.991943 3.28577V9.4913C0.991943 9.5972 1.09784 9.7031 1.20374 9.7031C1.24609 9.7031 1.26727 9.68192 1.30963 9.68192C1.88147 9.40659 2.70747 9.21597 3.32167 9.21597C4.14766 9.21597 5.03719 9.38541 5.65139 9.85135C6.22323 9.49131 7.26102 9.21597 7.98111 9.21597C8.68003 9.21597 9.40013 9.34305 9.99315 9.66074C10.0355 9.68192 10.0567 9.68192 10.099 9.68192C10.2049 9.68192 10.3108 9.57602 10.3108 9.47013V3.28577C10.0567 3.09516 9.78135 2.96808 9.46366 2.86218ZM9.46366 8.5806C8.99772 8.43234 8.48942 8.3688 7.98111 8.3688C7.26102 8.3688 6.22323 8.64413 5.65139 9.00418V4.13294C6.22323 3.77289 7.26102 3.49756 7.98111 3.49756C8.48942 3.49756 8.99772 3.5611 9.46366 3.70936V8.5806Z' fill='%23C0C0C0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1853_19216'%3E%3Crect width='10.1661' height='10.1661' fill='white' transform='translate(0.568237 0.744141)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    padding-left: 1.3em;
    background-position: left center;
    margin-bottom: 0.8em;
}

.course-card-item .course-card-item-body .course-card-item-info .course-author {
    font-size: 1em;
    font-family: 'ArticulatCF';
    font-weight: 500;
    color: #7d7d7d;
    margin-bottom: 0.8em;
}

.course-card-item .course-card-item-body .course-card-item-info .course-rating {
    font-family: 'ArticulatCF';
    display: flex;
    align-items: center;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-rating
    .rating-average {
    font-size: 1.2em;
    font-weight: 700;
    color: #d08a02;
    margin-right: 0.3em;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-rating
    .rating-star {
    color: #d08a02;
    font-size: 0.7em;
    margin-right: 0.5em;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-rating
    .rating-count {
    font-size: 0.85em;
    font-weight: 300;
    color: #7d7d7d;
}

.course-card-item .course-card-item-body .course-card-item-info .course-price {
    font-size: 1.3em;
    font-family: 'ArticulatCF';
    font-weight: 700;
    color: #484747;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-promotion {
    margin-top: 0.8em;
}

.course-card-item
    .course-card-item-body
    .course-card-item-info
    .course-promotion
    > span {
    font-size: 0.83em;
    font-family: 'ArticulatCF';
    background-color: #fea800;
    color: #000000;
    border-radius: 100px;
    display: inline-block;
    padding: 0.3em 0.8em;
}

.course-card-item
    .course-card-item-body:has(.course-card-item-progress)
    .course-card-item-info {
    bottom: 4.83em;
}

.course-card-item .course-card-item-body .course-card-item-progress {
    position: absolute;
    width: calc(100% - 7.2em);
    left: 3.6em;
    bottom: 0.3em;
    text-align: center;
}

.course-card-item .course-card-item-body .course-card-item-progress .progress {
    height: 13px;
    border-radius: 100px;
    margin-bottom: 0.5em;
    border: 1px solid #ffffff;
}

.course-card-item
    .course-card-item-body
    .course-card-item-progress
    .progress
    .progress-bar {
    background-color: #484747;
}

.course-card-item
    .course-card-item-body
    .course-card-item-progress
    .progress-info {
    font-family: 'ArticulatCF';
    font-size: 1.16em;
    font-weight: 600;
    color: #ffffff;
}

.modal-view-rating-course .course-star-view {
    color: #ffa800;
    font-size: 18px;
}

.modal-view-rating-course .progress {
    height: 8px;
    width: 200px;
    background: #fff2e5;
}

.modal-view-rating-course .progress .progress-bar {
    width: 0%;
    background: #ffa800;
}

.nav-product-books.nav-pills .nav-item {
    position: relative;
}

.nav-product-books.nav-pills .nav-item::after {
    content: '';
    width: 18px;
    height: 100%;
    top: 0;
    right: -9px;
    position: absolute;
    display: inline-block;
    background-image: url('../../../img/v3/assets/books-chevron-right.png');
    background-repeat: no-repeat;
    background-position: right 1px bottom 50%;
    z-index: 2;
}

.nav-product-books.nav-pills .nav-item:last-child:after {
    content: '';
    background-image: none;
}

.nav-product-books.nav-pills .nav-item:first-child .nav-link {
    border-radius: 11px 0 0 0;
}

.nav-product-books.nav-pills .nav-item:last-child .nav-link {
    border-right: none;
    border-radius: 0 11px 0 0;
}

.nav-product-books.nav-pills .nav-link {
    text-align: center;
    padding: 10px 12px 10px 12px;
    background: #fafafa;
    color: var(--colorBlack);
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
}

.nav-product-books.nav-pills .nav-link:hover {
    background-color: var(--colorWhite);
    box-shadow: inset 0 -1px var(--colorOrange);
    border-bottom: 1px solid var(--colorOrange);
}

.nav-product-books.nav-pills .nav-link label {
    color: #929292;
}

.nav-product-books.nav-pills .nav-link.active {
    background: #f2f2f2;
    color: var(--colorOrange);
    box-shadow: inset 0 -1px var(--colorOrange);
    border-bottom: 1px solid;
}

.nav-request-pickup {
    overflow: hidden;
}

.nav-request-pickup input {
    display: none;
}

.nav-request-pickup label {
    color: #2e2e2e;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    margin-right: 2px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    text-align: center;
}

.nav-request-pickup label:last-of-type {
    margin-right: 0;
}

.nav-request-pickup input:checked + label {
    color: #eb692b;
    border: 1px solid #eb692b;
}

.border-bottom-1-grey {
    border-bottom: 1px solid #ebebeb;
}

.voucher-container .selectize-control .selectize-input.disabled {
    opacity: 1;
    background-color: #e9ecef;
}

.voucher-container #toast-container .toast {
    background-image: none !important;
}

.voucher-container .select2-container {
    /* margin-bottom: 9px; */
    height: 39px;
}

.voucher-container .select2-selection {
    border: none !important;
}

.voucher-container #form-filter-voucher .selectize-input .item {
    vertical-align: sub;
}

.voucher-container .select2-container--disabled .select2-selection__rendered {
    background: #e9ecef;
}

.voucher-container .select2-selection__rendered {
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    height: 39px;
    font-size: 12px;
    font-weight: 400 !important;
}

.voucher-container .selectize-control.form-control.form-control-lg {
    height: 39px;
}

.voucher-container .selectize-input .item,
.voucher-container .selectize-dropdown-content {
    font-size: 12px;
}

.voucher-container .select2-selection__arrow b {
    border-color: #000000 transparent transparent transparent !important;
    right: 20px !important;
}

.voucher-container .form-group {
    margin-bottom: 2rem;
}

.voucher-container .form-control:disabled,
.form-control[readonly] {
    background-color: #f5f6fa;
}

.voucher-container ::placeholder {
    text-transform: none;
    text-align: left;
    color: #d2d2d2;
}

.voucher-container .alert {
    background-color: #feefb3;
}

.voucher-container .form-switch .form-check-input {
    width: 78px;
    height: 28px;
    background-color: #e3e3e3 !important;
}
.voucher-container .form-switch .form-check-input,
.voucher-container .form-switch .form-check-input:focus {
    background-image: url('../../../img/v3/switch-off.png');
}
.voucher-container .form-switch .form-check-input:focus:checked,
.voucher-container .form-switch .form-check-input:checked {
    background-image: url('../../../img/v3/switch-on-new.png');
    background-size: 40px 20px;
    background-repeat: no-repeat;
}
.voucher-container .form-group {
    min-height: 64px;
}
/* End Course Card, available on 3 size (default,small, and 100% of container)*/

/* starter */
section#starter {
    padding: 50px 0 200px 0;
    background-color: var(--colorGrey);
}

section#starter .card-switchto {
    background-image: url(../../../img/v3/assets/lp/bg-started.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 290px 228px;
}

/* pricing */
section#pricing {
    padding: 50px 0 200px 0;
    background-color: var(--colorGrey);
}

/* main dashboard */
section#main-dashboard {
    padding: 10px 0 0 0;
    background-color: var(--colorGrey);
}

.card.card-pricing {
    box-shadow: 0px 8px 10px 0px #e5e5e580;
    border: none !important;
    padding: 53px 30px 20px 30px;
    font-family: 'Open Sans';
}

.card.card-pricing.bonus::after {
    content: 'Get New Whatsapp Broadcast!';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 33px;
    display: block;
    padding: 5px;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    background: #ffebe1;
    border-radius: 10px 10px 0 0;
}

.card-started {
    height: 350px;
    border: 4px solid transparent !important;
}

.card-started:has(#card-started:hover) {
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, #fd353c 0%, #ed9295 45.83%, #f7aa72 100%)
            border-box;
}

#card-started:hover label {
    background: -webkit-linear-gradient(
        265.35deg,
        #e8aeb0 -8.49%,
        #ff2830 53.94%,
        #f3e490 113.82%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-banner-marketplace {
    background: linear-gradient(107.47deg, #fffdf8 0%, #fffbf0 100%);
    border: 1px solid #f8f8f8;
    box-shadow: 0px 1px 3px 0px #1018281a;
}

.card-already-parent {
    border-radius: 8px;
    border: 1px solid var(--neutral-300);
    background: #fff6f6;
}

.card-banner-marketplace p {
    width: 310px;
}

.card .div-sum-of-sales {
    min-height: 198px;
}

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

/* Firefox */
.payment-method input[type='number'] {
    -moz-appearance: textfield;
}

.language-options .btn.dropdown-toggle {
    background-color: #242424;
    color: #ffffff;
}
.language-options .dropdown-menu {
    background-color: #242424;
    color: #ffffff;
    font-size: 1em;
}
.language-options .dropdown-menu a.dropdown-item.active,
.language-options .dropdown-menu a.dropdown-item:hover {
    color: #242424 !important;
    background-color: #f8f9fa;
}

#tb-loading {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(255, 255, 255, 0);
    z-index: 9999;
}

#tb-loading > .tb-loading-content {
    color: #f36f28;
    margin: 0 auto;
    max-width: 250px;
    height: auto;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.65);
    padding: 5px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    border-radius: 10px;
    box-shadow: 0px 1px 10px #ccc;
}

.tb-loading-block {
    /* background-image: url('../../img/loading.gif'); */
    /* background-repeat: no-repeat; */
    /* background-size: 100%; */
    max-width: 150px;
    height: auto;
}

/* section footer border */
section#footer-border {
    height: 2px;
    background-image: url(../../../img/v3/assets/lp/bg-start.png);
    background-repeat: no-repeat;
    background-position: bottom -75px right 0;
}

/* footer */
section#footer {
    background-color: #323232;
    color: #d1d4d9;
    padding: 64px 0;
}

#footer a {
    color: #d1d4d9;
    line-height: 1.5;
}

.footer-widget {
    margin-top: 10px;
    font-size: 14px;
}

.footer-widget h5 {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #646464;
    text-transform: uppercase;
}

.footer-widget ul.menu li {
    margin: 16px 0;
}

.footer-widget ul.menu li:first-child {
    margin-top: 0;
}

.footer-widget ul.menu li a {
    font-size: 16px;
    font-weight: 400;
}

.footer-widget ul.menu li a:hover {
    text-decoration: underline;
}

.footer-widget img.logo {
    max-width: 120px;
}

#footer small {
    line-height: 1.5;
    font-size: 14px;
}

#footer .section-contact .icon-social {
    width: 24px;
    height: 24px;
}

#footer .social-media-list {
    margin-bottom: 0px;
}

#footer .social-media-list li {
    display: inline-block;
    margin-right: 24px;
}

#footer .social-media-list li:last-child {
    margin-right: 0;
}

#footer .footer-bottom {
    margin-top: 32px;
    padding: 32px 0 0 0;
    border-top: 1px solid #4b5563;
}
/* affiliate membership */
section#join-affiliate .container {
    height: 100vh;
}

footer#block-affiliate {
    padding-top: 16px;
    padding-bottom: 16px;
    background: #f8f8f8;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset;
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset;
}

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

.btn-collapse-custom.collapsed {
    transform: rotate(180deg);
}

.btn-collapse-custom {
    transform: rotate(0deg);
}

.input-group .btn-sm.btn-configure {
    height: 100%;
    margin: 2px 0px;
}

/*Books*/
.product-information-sales {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.product-information-sales .product-information-sales-item {
    border-right: 1px solid #eeeeee;
    padding: 1rem;
    min-width: 25%;
}

.product-information-sales .product-information-sales-item:last-child {
    border-right: none;
}

.product-information-sales .product-information-sales-item .item-bottom {
    margin-top: 100px;
}
.generate-copy-link {
    border-radius: 10px;
    border: 1px solid #b1b1b1;
    background-color: #f8f8f8;
    font-size: 14px;
}
.generate-copy-link input[readonly] {
    border-radius: inherit;
    background-color: inherit;
    color: #b1b1b1;
}
.generate-copy-link .input-group-append {
    padding: 3px;
    background-color: inherit;
    border-radius: inherit;
}
.generate-copy-link .input-group-append .btn {
    border-radius: 10px;
    font-size: 11px;
}
#fill-data .form-control-lg .selectize-input {
    padding: 8px 16px;
    min-width: 80px;
}

/* #fill-data .form-control-lg .selectize-input {
    min-height: 39px;
    min-width: 80px;
} */

#fill-data .input-group-prepend .rounded-start-6 .selectize-input {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

#fill-data
    .input-merge
    #phoneCode
    .selectize-input.items.full.has-options.has-items
    .item {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

#fill-data
    .input-merge
    #phoneCode
    .selectize-control.single
    .selectize-input:after {
    right: 15px;
}

#fill-data .form-control {
    border-color: #e1e1e1 !important;
}

#modal-cookie-affiliator .form-switch .form-check-input,
.form-switch .form-check-input:focus {
    background-image: url('../../../img/v3/switch-off.png');
    background-size: 40px 20px;
    background-repeat: no-repeat;
}
#modal-cookie-affiliator .form-switch .form-check-input {
    width: 76px;
    height: 28px;
    background-color: #e3e3e3;
    border-color: transparent;
}
#modal-cookie-affiliator .form-switch .form-check-input:checked {
    background-color: #e3e3e3;
    background-image: url('../../../img/v3/switch-on-new.png');
    background-size: 40px 20px;
    background-repeat: no-repeat;
}

.desktop-only {
    display: unset;
}
.desktop-only-block {
    display: block;
}
.desktop-only-flex {
    display: flex;
}
.desktop-only-table-row {
    display: table-row;
}
.desktop-only-table-cell {
    display: table-cell;
}
.mobile-only,
.mobile-only-block,
.mobile-only-flex {
    display: none;
}

.sticky-top {
    z-index: 3;
}

#filter-customer2 + .selectize-control .selectize-dropdown .option {
    padding-top: 10px;
    padding-bottom: 10px;
}

#accordionMobileFilter {
    display: flex;
    justify-content: flex-end;
}
#accordionMobileFilter .accordion-item {
    width: fit-content;
    border: none;
    margin: 0 0 0 6px;
}
#accordionShipment .accordion-item {
    border: none;
    border-radius: unset;
    margin-bottom: 0;
}
#accordionShipment .accordion-item .accordion-button:not(.collapsed) {
    color: #393939;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.h-fit-content {
    height: fit-content;
}

.px-3-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.border-right-desktop {
    border-right: 1px solid #eeeeee !important;
}

.flex-1 {
    flex: 1;
}

.max-width-truncate {
    max-width: 1000px;
}
.filter-date-capp button[id='filter-date'] {
    height: 40px !important;
}

.container-kyc .step-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
}

.container-kyc .step {
    display: flex;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
}

.container-kyc .step-number {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #478000;
    position: relative;
    z-index: 2;

    color: #478000;
    text-align: center;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px; /* 83.333% */
}

.container-kyc .step.active .step-description {
    color: #2E2E2E
}

.container-kyc .step-description {
    margin-left: 10px;
    color: #CBCBCB;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.container-kyc .step-number::before {
    content: "";
    position: absolute;
    width: 2px;
    background-color: #478000;
    top: 20px; /* Position the line below the step number */
    left: 50%;
    transform: translateX(-50%);
    height: 38px; /* Adjust height as needed */
    z-index: 1;
}

/* Hide the line on the last step */
.container-kyc .step:last-child .step-number::before {
    display: none;
}

.container-kyc #personal-kyc .selectize-control.single {
    height: 35px;
}

.container-kyc #company-kyc .nav-pills {
    background-color: #F6F6F6;
    padding: 8px 7px;
    border-radius: 8px;
}

.container-kyc #company-kyc .nav-pills .nav-link {
    color: rgba(119, 119, 119, 0.60);
}

.container-kyc #company-kyc .nav-pills .nav-link.active {
    color: white;
    border-radius: 8px;
    border: 1px solid var(--black, #2E2E2E);
    background: var(--black, #2E2E2E);
}
.container-kyc #company-kyc .selectize-control.single {
    height: 35px;
}

.ps-2rem {
    padding-left: 2rem;
}

.phone-not-verified {
    border-radius: 6px;
    background-color: #C4B230;
    color: #57551F;
}
.phone-verified {
    border-radius: 6px;
    border: 1px solid #25C883;
    background-color: #2CDD93;
    color: #157B50;
}
#signature-view {
    font-family: 'Luxurious Script', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 90px;
    line-height: 1.4;
    text-align: center;
    padding: 22px;
    color: #2E2E2E;
}
#modal-setting-certificate #signature-view {
    background-color: #F5F6FA;
    color: #2E2E2E80;
    font-weight: 400;
}
#certificate-section-upload .dz-preview,
#certificate-section-upload .dz-image-preview {
    position: relative;
    background-color: #FFECE3;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    margin-bottom: 40px;
}
#certificate-section-upload .dz-preview .dz-image {

}
#certificate-section-upload .dz-preview .dz-image > img,
#certificate-section-upload .dz-image-preview img {
    max-width: 65px;
    object-fit: cover;
    border-radius: 8px;
}
#certificate-section-upload .dz-preview .dz-filename,
#certificate-section-upload .dz-image-preview .dz-filename {
    margin-top: 10px;
}
#certificate-section-upload .dz-preview .dz-success-mark,
#certificate-section-upload .dz-preview .dz-error-mark,
#certificate-section-upload .dz-preview .dz-size {
    display: none;
    height: 112px;
    width: 112px;
}
#certificate-section-upload .dz-preview .dz-remove,
#certificate-section-upload .dz-image-preview .dz-remove {
    font-size: 14px;
    border: 1px dashed #2E2E2E;
    background-color: #FFEFEA;
    min-width: 220px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    min-height: 30px;
    color: #2E2E2E;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-voucher-upload .preview-area-file {
    position: relative;
}

.modal-voucher-upload .preview-area-file:hover .area-button-file {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 6px;
}
.modal-voucher-upload .preview-area-file:hover .button-delete-file {
    display: inline-block;
}

.modal-voucher-upload .preview-area-file .button-delete-file {
    position: absolute;
    top: calc(50% - 16px);
    left: 18px;
    display: none;
}
@media (max-width: 768px) {
    .border-left,
    .border-right {
        border-left: none !important;
        border-right: none !important;
    }

    .course-information-sales {
        overflow: auto;
    }
    .course-card-item {
        height: 245px !important;
    }
    section#starter .card-switchto {
        background: unset;
    }

    .text-title {
        font-size: 30px;
        line-height: 32px;
    }
    .text-title.font-size-44 {
        font-size: 28px;
        line-height: 30px;
    }
    .text-title.font-size-36 {
        font-size: 20px;
        line-height: 22px;
    }
    .text-title.font-size-16 {
        font-size: 11px;
    }
    .bg-get-know:before {
        width: 100%;
        height: 40%;
        right: 0;
        top: unset;
        bottom: 0;
    }
    .navbar > .container {
        padding: 0;
    }
    .navbar-dark .navbar-brand {
        margin-left: 1rem;
    }
    .navbar-dark .navbar-toggler {
        margin-right: 1rem;
        z-index: 3;
    }
    .navbar-collapse {
        z-index: 2;
        background-color: var(--colorBlack);
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .card-banner-marketplace p {
        width: 100%;
    }
    .card .div-sum-of-sales {
        min-height: 99px;
    }
    .header-detail-course .card-information-course {
        position: unset !important;
        margin: 30px auto;
    }
    .navbar.navbar-expand-md {
        height: auto;
    }
    .font-size-53 {
        font-size: 27px !important;
    }
    .lh-64 {
        line-height: 32px !important;
    }
    #form-course .pixel-form .pixel-btn {
        width: 49%;
    }
    #form-course .pixel-form .pixel-setting {
        width: 13%;
    }
    .modal-width-388 .modal-dialog {
        width: unset !important;
    }
    .course-information-sales .course-information-sales-item {
        min-width: 105px;
    }
    .modal-view-rating-course .progress {
        width: 120px;
    }
    .font-size-68 {
        font-size: 11vmin;
    }

    .desktop-only,
    .desktop-only-block,
    .desktop-only-flex,
    .desktop-only-table-row,
    .desktop-only-table-cell {
        display: none;
    }
    .mobile-only {
        display: unset;
    }
    .mobile-only-block {
        display: block;
    }
    .mobile-only-flex {
        display: flex;
    }
    .mobile-flex-column {
        display: flex;
        flex-direction: column;
    }

    .mobile-filter {
        overflow: auto;
        padding: 0;
    }

    .mobile-filter-div.active {
        display: unset;
    }

    .mobile-filter-div {
        display: none;
        padding: 10px;
        top: 0;
        left: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        position: fixed;
        z-index: 3;
        background: white;
    }

    .mobile-filter-div.preview {
        top: 60px;
        max-width: unset !important;
        height: unset !important;
        background: none;
    }

    #accordionMobileFilter {
        display: block;
    }
    #accordionMobileFilter .accordion-item {
        width: 100%;
        margin: 0;
    }
    #accordionMobileFilter .accordion-item .accordion-button:not(.collapsed) {
        color: #000000;
        background-color: transparent;
        box-shadow: unset;
    }
    #accordionShipment .accordion-item {
        border: 1px solid #e9e9e9;
        border-radius: 12px;
    }

    .px-12 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .w-100-mobile {
        width: 100%;
    }
    .w-100-px-mobile {
        width: 100px;
    }
    .w-47-persen-mobile {
        width: 47% !important;
    }
    .w-89-persen-mobile {
        width: 89% !important;
    }

    .min-w-auto-mobile {
        min-width: auto;
    }
    .min-w-100-persen-mobile {
        min-width: 100%;
    }
    .min-w-47 {
        min-width: 47%;
    }
    .min-w-100-mobile {
        min-width: 100px;
    }
    .min-w-120-mobile {
        min-width: 120px;
    }
    .min-w-200-mobile {
        min-width: 200px;
    }

    .rounded-8-mobile {
        border-radius: 8px !important;
    }
    .rounded-12-mobile {
        border-radius: 12px !important;
    }
    .rounded-16-mobile {
        border-radius: 16px !important;
    }

    .font-size-10-mobile {
        font-size: 10px !important;
    }
    .font-size-12-mobile {
        font-size: 12px !important;
    }
    .font-size-14-mobile {
        font-size: 14px !important;
    }
    .font-size-16-mobile {
        font-size: 16px !important;
    }
    .font-size-18-mobile {
        font-size: 18px !important;
    }

    .lh-12-mobile {
        line-height: 12px !important;
    }
    .lh-16-mobile {
        line-height: 16px !important;
    }
    .lh-21-mobile {
        line-height: 21px !important;
    }

    .border-mobile {
        border: 1px solid #ebebeb;
    }
    .border-bottom-mobile {
        border-bottom: 1px solid #f0f0f04d;
    }
    .border-bottom-0-mobile {
        border-bottom: none !important;
    }

    .mt-0-mobile {
        margin-top: 0 !important;
    }
    .mx-0-mobile {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .scroll-x-mobile {
        overflow-x: auto;
        white-space: nowrap;
    }

    .image-force-bottom {
        background-image: url(../../../img/v3/assets/bg-type-mobile.png);
        background-position: 0 0;
        background-size: 100% 100%;
        border-radius: 12px;
    }
    .image-force-bottom > img {
        width: 77px;
        bottom: 12px;
        left: 10px;
    }
    .alert-description .col-8.col-md-10 .row.g-0 {
        position: relative;
    }
    .alert-description .col-12.col-md-8 {
        position: absolute;
        left: 100px;
    }

    .bg-dashboard-logo {
        height: 100%;
        background-position: right 0;
    }
    .bg-dashboard-logo::before {
        content: unset;
    }

    .affiliate-program .detail-program .card-body {
        padding: 10px;
    }
    .affiliate-program .detail-program .list-content {
        margin-bottom: 18px;
    }

    .flex-reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .header-detail-course .name-course {
        font-size: 24px;
        line-height: 28px;
    }
    .header-detail-course .description-course {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.02em;
    }
    .header-detail-course .course-rating-star {
        font-size: 18px;
        line-height: 21px;
    }
    .header-detail-course .course-rating-star .rating-items {
        margin-top: 6px;
    }
    .header-detail-course .information-detail.border-top {
        border-top: none !important;
    }

    .no-data-lesson .table-borderless > :not(caption) > * > * {
        padding: 0.5rem 6px !important;
    }
    .no-data-lesson .text-ellipsis.one-row {
        white-space: nowrap;
    }

    .mobile-only .navbar .dropup .dropdown-menu[data-bs-popper] {
        top: 44px;
        bottom: unset;
        left: -132px;
        margin: 0;
    }

    .px-3-1 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .border-right-desktop {
        border: unset !important;
    }

    .box-banner-create-new {
        background-color: #351608;
        border-radius: 15px;
        max-width: 700px;
    }
    .box-banner-create-new .box-banner-create-new-icon {
        background-color: #61280f;
        max-width: 100px;
        border-top-right-radius: 85px;
        border-bottom-right-radius: 85px;
        padding: 10px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        /* max-height: 104px; */
    }

    .mb-2-mobile {
        margin-bottom: 0.5rem !important;
    }
    .overflow-x-scroll-unset-mobile {
        overflow-x: unset !important;
    }

    .bg-none-mobile {
        background-color: unset !important;
    }

    .max-width-truncate {
        max-width: 600px;
    }

    .mb-6-mobile {
        margin-bottom: 6rem !important;
    }
    .pt-1-mobile {
        padding-top: 1rem !important;
    }
    .justify-content-between-mobile {
        justify-content: space-between !important;
    }
    .table-list-mobile thead {
        display: none;
    }
    .circle-grey-mobile {
        width: 6px;
        height: 6px;
        background-color: #d9d9d9;
        border-radius: 10px;
    }
    .table-list-mobile
        .table-version-2.table-list-mobile-no-border
        .dataTables_wrapper {
        border: unset !important;
    }
    .table-list-mobile tbody .no-padding {
        padding: unset !important;
    }
    .table-list-mobile tbody .table-list-mobile-hidden {
        display: none;
    }
    .table .mobile-flex-column tr {
        display: flex;
        margin: 12px 12px 0 12px;
        padding: 5px;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        flex-direction: column;
    }
    .border-edit {
        border: 1px solid #dd642c;
        border-radius: 6px;
        padding: 5px 12px;
    }

    .books-order-result-item .dropdown {
        position: absolute;
        top: 12px;
        right: 8px;
    }
    .w-75-mobile {
        width: 75%;
    }
    .links-direction {
        overflow: hidden;
        text-align: left;
        direction: rtl;
        padding-right: 1px !important;
        unicode-bidi: plaintext;
    }
    .accordionFilterMobileShow .dropdown-menu.show {
        transform: unset !important;
        top: 40px !important;
        right: 10px !important;
    }
    .justify-content-end-mobile {
        justify-content: end !important;
    }
    .desktop-display-none {
        display: none !important;
    }
    .mobile-filter .mobile-filter-center {
        display: block;
        align-content: center;
        text-align: -webkit-center;
    }
    .px-5-mobile {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (max-width: 590px) {
    .max-width-truncate {
        max-width: 400px;
    }
}
@media (max-width: 490px) {
    .max-width-truncate {
        max-width: 300px;
    }
}
@media (max-width: 390px) {
    .max-width-truncate {
        max-width: 200px !important;
    }
}
@media (max-width: 290px) {
    .max-width-truncate {
        max-width: 100px;
    }
}
@media (max-width: 992px) {
    .font-size-53 {
        font-size: 34px;
    }
    .lh-64 {
        line-height: 1 !important;
    }
    .col-md-8 .max-width-truncate {
        max-width: 300px;
    }
}