:root {
    --Primary-Main: #5A4C9A;
    --Primary-Hover: #4B3F80;
    --Primary-Pressed: #2D264D;
    --Primary-Border: #C8C3DD;
    --Primary-Focus: #5A4C9A;
    --Primary-Surface: #DEDBEB;
    --Secondary-Main: #FEC260;
    --Success-Main: #43936C;
    --Success-Surface: #D9E9E2;
    --Success-Border: #C0DBCE;
    --Info-Main: #3267E3;
    --Info-Surface: #D6E1F9;
    --Info-Border: #BBCCF6;
    --Info-Hover: #2A56BD;
    --Info-Pressed: #193371;
    --Danger-Main: #CB3A31;
    --Danger-Surface: #F5D8D6;
    --Danger-Border: #EEBDBA;
    --Danger-Hover: #A93029;
    --Danger-Pressed: #651D18;
    --Warning-Main: #CD7B2E;
    --Warning-Surface: #F5E5D5;
    --Warning-Border: #EED3B9;
    --Neutral-10: #FFF;
    --Neutral-20: #F5F5F5;
    --Neutral-30: #EDEDED;
    --Neutral-40: #E0E0E0;
    --Neutral-50: #C2C2C2;
    --Neutral-60: #9E9E9E;
    --Neutral-70: #757575;
    --Neutral-80: #616161;
    --Neutral-90: #404040;
    --Neutral-100: #0A0A0A;
}

body {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

::-moz-selection {
    color: var(--Neutral-10);
    background: var(--Primary-Pressed);
}

::selection {
    color: var(--Neutral-10);
    background: var(--Primary-Pressed);
}

a {
    text-decoration: none;
}

.pointer {
    cursor: pointer;
}

.cursor-move {
    cursor: move;
}


/* font and text */

.font-public-sans {
    font-family: "Public Sans", sans-serif;
}

.fs-12 {
    font-size: 12px!important;
}

.fs-14 {
    font-size: 14px!important;
}

.fs-16 {
    font-size: 16px!important;
}

.fs-18 {
    font-size: 18px!important;
}

.fs-20 {
    font-size: 20px!important;
}

.fs-24 {
    font-size: 24px!important;
}

.fs-28 {
    font-size: 28px!important;
}

.fs-32 {
    font-size: 32px!important;
}

.fs-36 {
    font-size: 36px!important;
}

.fs-48 {
    font-size: 40px!important;
}

.text-hover:hover {
    color: var(--Primary-Hover)!important;
}

.text-hover-light:hover {
    color: var(--Primary-Surface)!important;
}

.text-black {
    color: var(--Neutral-100)!important;
}

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

.text-info {
    color: var(--Info-Main)!important;
}

.text-warning {
    color: var(--Warning-Main)!important;
}

.text-neutral-40 {
    color: var(--Neutral-40)!important;
}

.text-neutral-60 {
    color: var(--Neutral-60)!important;
}

.text-neutral-70 {
    color: var(--Neutral-70)!important;
}

.text-neutral-80 {
    color: var(--Neutral-80)!important;
}

.text-neutral-90 {
    color: var(--Neutral-90)!important;
}

.text-muted {
    color: var(--Neutral-90)!important;
}

.text-yellow {
    color: var(--Secondary-Main);
}

.line-height-20 {
    line-height: 20px!important;
}

.border-radius-4 {
    border-radius: 4px!important;
}

.border-radius-8 {
    border-radius: 8px!important;
}

.border-radius-12 {
    border-radius: 12px!important;
}

.border-neutral-50 {
    border: 1px solid var(--Neutral-50)!important;
}

.border-primary {
    border: 1px solid var(--Primary-Border)!important;
}

.shadow-10 {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}


/* background */

.bg-primary {
    print-color-adjust: exact;
    background: var(--Primary-Main)!important;
}

.bg-warning {
    print-color-adjust: exact;
    background: var(--Warning-Main)!important;
}

.bg-neutral-20 {
    background-color: var(--Neutral-20)!important;
}

.bg-gradient-purple {
    background: var(--Gradient-1, linear-gradient(180deg, #5A4C9A 0%, #1D019C 100%))!important;
}

.bg-gradient-yellow {
    background: var(--Gradient-2, linear-gradient(180deg, #FEC260 0%, #D4A351 100%))!important;
}


/* width */

.width-fit {
    width: fit-content;
}

.width-80px {
    min-width: 80px!important;
    max-width: 80px!important;
}

.min-width-fit {
    min-width: fit-content;
}

.min-width-max {
    min-width: max-content;
}

.min-width-140 {
    min-width: 140px!important;
}

.min-width-200 {
    min-width: 200px!important;
}

.min-width-280 {
    min-width: 280px!important;
}

.max-width-fill {
    max-width: -webkit-fill-available!important;
}

.min-width-300 {
    min-width: 300px!important;
}

.max-width-140 {
    max-width: 140px!important;
}

.max-width-200 {
    max-width: 200px!important;
}

@media(max-width: 991.98px) {
    .max-width-unset {
        max-width: unset!important;
    }
}

@media(min-width: 992px) {
    .w-lg-unset {
        width: unset!important;
    }
}


/* position */

.position-sticky-16 {
    position: sticky;
    top: 16px;
}

.position-sticky-24 {
    position: sticky;
    top: 24px;
}


/* height */

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


/* box scroll */

.box-scroll-400 {
    max-height: 400px;
    overflow-y: scroll;
    padding-right: 10px;
}


/* box */

.box-40 {
    width: 40px;
    height: 40px;
}


/* padding and margin */

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

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

.px-20 {
    padding-left: 20px!important;
    padding-right: 20px!important;
}

.px-32 {
    padding-left: 32px!important;
    padding-right: 32px!important;
}

.py-32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important;
}

.py-40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}

.py-60 {
    padding-top: 60px!important;
    padding-bottom: 60px!important;
}

.pb-20 {
    padding-bottom: 20px!important;
}

.pb-40 {
    padding-bottom: 40px!important;
}

.pb-60 {
    padding-bottom: 60px!important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-28 {
    margin-bottom: 28px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-36 {
    margin-bottom: 36px!important;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-44 {
    margin-bottom: 44px;
}

.mb-48 {
    margin-bottom: 48px!important;
}

.mb-60 {
    margin-bottom: 60px!important;
}

.mb-80 {
    margin-bottom: 80px;
}

.my-0-6px {
    margin-top: .6px;
    margin-bottom: .6px;
}

.my-2px {
    margin-top: 2px;
    margin-bottom: 2px;
}

.my-2-4px {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

.my-2-6px {
    margin-top: 2.6px;
    margin-bottom: 2.6px;
}

.my-4px {
    margin-top: 4px;
    margin-bottom: 4px;
}

.my-4-5px {
    margin-top: 4.5px;
    margin-bottom: 4.5px;
}

.my-6px {
    margin-top: 6px;
    margin-bottom: 6px;
}

.my-6-5px {
    margin-top: 6.5px;
    margin-bottom: 6.5px;
}

.my-7px {
    margin-top: 7px;
    margin-bottom: 7px;
}

.my-12px {
    margin-top: 12px;
    margin-bottom: 12px;
}

.my-28 {
    margin-top: 28px;
    margin-bottom: 28px;
}

.my-32 {
    margin-top: 32px;
    margin-bottom: 32px;
}

.my-36 {
    margin-top: 36px;
    margin-bottom: 36px;
}

.my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mx-18-5px {
    margin-left: 18.5px;
    margin-right: 18.5px;
}

.mx-20-5px {
    margin-left: 20.5px;
    margin-right: 20.5px;
}

.mx-21 {
    margin-left: 21px;
    margin-right: 21px;
}

.mx-22 {
    margin-left: 22px;
    margin-right: 22px;
}

.mx-29-5px {
    margin-left: 29.5px;
    margin-right: 29.5px;
}

.mx-38 {
    margin-left: 38px;
    margin-right: 38px;
}

.mx-39 {
    margin-left: 39px;
    margin-right: 39px;
}

.mx-50 {
    margin-left: 50px;
    margin-right: 50px;
}

.mx-51 {
    margin-left: 51px;
    margin-right: 51px;
}

.mx-61 {
    margin-left: 61px;
    margin-right: 61px;
}

.mx-64 {
    margin-left: 64px;
    margin-right: 64px;
}

.mx-69 {
    margin-left: 69px;
    margin-right: 69px;
}

.mx-90 {
    margin-left: 90px;
    margin-right: 90px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-36 {
    margin-top: 36px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-n4 {
    margin-top: -24px;
}

.mx-gutter-10 {
    margin-right: calc(-.5* 10px);
    margin-left: calc(-.5* 10px);
}

.mx-gutter-16 {
    margin-right: calc(-.5* 16px);
    margin-left: calc(-.5* 16px);
}


/* image */

.img-responsive {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.img-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 100px;
    object-position: center
}

.img-payment-icon {
    width: 100%;
    height: auto;
    min-height: 28px;
    max-height: 28px;
    min-width: 80px;
    max-width: 80px;
    object-fit: contain;
}

.img-topic-icon {
    width: 100%;
    height: auto;
    min-height: 40px;
    max-height: 40px;
    min-width: 40px;
    max-width: 40px;
    object-fit: contain;
}

.img-w-220 {
    min-width: 220px!important;
    max-width: 220px!important;
}

.img-h-180 {
    min-height: 180px!important;
    max-height: 180px!important;
}

.img-h-148 {
    min-height: 148px!important;
    max-height: 148px!important;
}

.img-cover {
    object-fit: cover!important;
}


/* display */

.d-contents {
    display: contents!important;
}


/* flex */

.gap-12 {
    gap: 12px;
}

.gap-20 {
    gap: 20px;
}

.gap-32 {
    gap: 32px;
}

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


/* grid */

.grid-2-column {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-column {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-column {
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width:991.98px) {
    .grid-sm-1-column {
        grid-template-columns: repeat(1, 1fr)!important;
    }
}


/* badge */

.badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    line-height: 16px;
    border-radius: 4px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.badge.text-bg-success {
    color: var(--Success-Main)!important;
    background: var(--Success-Surface)!important;
    border: 1px solid var(--Success-Border)!important;
}

.badge.text-bg-info {
    color: var(--Info-Main)!important;
    background: var(--Info-Surface)!important;
    border: 1px solid var(--Info-Border)!important;
}

.badge.text-bg-warning {
    color: var(--Warning-Main)!important;
    background: var(--Warning-Surface)!important;
    border: 1px solid var(--Warning-Border)!important;
}

.badge.text-bg-danger {
    color: var(--Danger-Main)!important;
    background: var(--Danger-Surface)!important;
    border: 1px solid var(--Danger-Border)!important;
}

.badge.text-bg-secondary {
    color: var(--Primary-Main)!important;
    background: var(--Neutral-20)!important;
    border: 1px solid var(--Neutral-40)!important;
}

.badge.text-bg-dark {
    color: var(--Neutral-80)!important;
    background: var(--Neutral-30)!important;
    border: 1px solid var(--Neutral-40)!important;
}


/* tooltip */

.custom-tooltip {
    --bs-tooltip-font-size: 14px;
    --bs-tooltip-padding-y: 8px;
    --bs-tooltip-padding-x: 8px;
    --bs-tooltip-border-radius: 6px;
    --bs-tooltip-bg: var(--Neutral-10);
    --bs-tooltip-color: var(--Primary-Main);
}

.custom-tooltip .tooltip-inner {
    font-weight: 500;
    font-family: "Public Sans", sans-serif;
    border: 1px solid var(--Primary-Main);
}

.custom-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--Primary-Main)!important;
}

.custom-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--Primary-Main)!important;
}

.custom-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--Primary-Main)!important;
}

.custom-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--Primary-Main)!important;
}


/* spinner */

.spinner-border-60 {
    border: var(--bs-spinner-border-width) solid var(--Neutral-60);
    border-right-color: transparent;
}


/* button */

.btn-close:focus {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}

.btn {
    border-radius: 4px;
}

.btn-transparent {
    background: transparent!important;
    border-color: transparent!important;
}

.btn-link {
    text-decoration: none;
    color: var(--Primary-Main);
}

.btn-link:focus {
    color: var(--Primary-Focus)!important;
}

.btn-link:active {
    color: var(--Primary-Pressed)!important;
}

.btn-link:hover {
    color: var(--Primary-Hover)!important;
}

.btn-primary {
    background: var(--Primary-Main);
    border-color: var(--Primary-Main);
}

.btn-primary:focus {
    background: var(--Primary-Focus)!important;
    border-color: var(--Primary-Focus)!important;
}

.btn-primary:active {
    background: var(--Primary-Pressed)!important;
    border-color: var(--Primary-Pressed)!important;
}

.btn-primary:hover {
    background: var(--Primary-Hover)!important;
    border-color: var(--Primary-Hover)!important;
}

.btn-primary:disabled {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Surface)!important;
}

.btn-info {
    color: var(--Neutral-10);
    background: var(--Info-Main);
    border-color: var(--Info-Main);
}

.btn-info:focus {
    color: var(--Neutral-10)!important;
    background: var(--Info-Hover)!important;
    border-color: var(--Info-Pressed)!important;
}

.btn-info:active {
    color: var(--Neutral-10)!important;
    background: var(--Info-Pressed)!important;
    border-color: var(--Info-Pressed)!important;
}

.btn-info:hover {
    color: var(--Neutral-10)!important;
    background: var(--Info-Hover)!important;
    border-color: var(--Info-Hover)!important;
}

.btn-info:disabled {
    color: var(--Neutral-10)!important;
    background: var(--Info-Surface)!important;
    border-color: var(--Info-Surface)!important;
}

.btn-danger {
    color: var(--Neutral-10);
    background: var(--Danger-Main);
    border-color: var(--Danger-Main);
}

.btn-danger:focus {
    color: var(--Neutral-10)!important;
    background: var(--Danger-Hover)!important;
    border-color: var(--Danger-Pressed)!important;
}

.btn-danger:active {
    color: var(--Neutral-10)!important;
    background: var(--Danger-Pressed)!important;
    border-color: var(--Danger-Pressed)!important;
}

.btn-danger:hover {
    color: var(--Neutral-10)!important;
    background: var(--Danger-Hover)!important;
    border-color: var(--Danger-Hover)!important;
}

.btn-danger:disabled {
    color: var(--Neutral-10)!important;
    background: var(--Danger-Surface)!important;
    border-color: var(--Danger-Surface)!important;
}

.btn-outline-primary {
    color: var(--Primary-Main);
    background: var(--Primary-Surface);
    border-color: var(--Primary-Surface);
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:hover {
    color: var(--Primary-Pressed)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Pressed)!important;
}


/* .btn-outline-primary:disabled {
    color: var(--Neutral-60)!important;
    background: var(--Neutral-30)!important;
    border-color: var(--Neutral-40)!important;
} */

.btn-outline-primary.show {
    color: var(--Primary-Pressed)!important;
}


/* .btn-outline-primary:first-child:active:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-primary.show:focus-visible {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
} */

.btn-outline-danger {
    color: var(--Danger-Main);
    background: var(--Danger-Surface);
    border-color: var(--Danger-Surface);
}

.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger:hover {
    color: var(--Danger-Main)!important;
    background: var(--Danger-Surface)!important;
    border-color: var(--Danger-Main)!important;
}

.btn-outline-danger.show {
    color: var(--Danger-Main)!important;
}

.btn-outline-*:disabled {
    color: var(--Neutral-60)!important;
    background: var(--Neutral-30)!important;
    border-color: var(--Neutral-40)!important;
}

.btn-outline-*:first-child:active:focus-visible,
.btn-outline-*:focus-visible,
.btn-outline-*.show:focus-visible {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.btn-secondary {
    color: var(--Primary-Main);
    background: var(--Primary-Surface);
    border-color: var(--Primary-Surface);
}

.btn-secondary:focus {
    color: var(--Primary-Hover)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Focus)!important;
}

.btn-secondary:active {
    color: var(--Primary-Pressed)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Surface)!important;
}

.btn-secondary:hover {
    color: var(--Primary-Hover)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Surface)!important;
}

.btn-secondary:disabled {
    color: var(--Primary-Hover)!important;
    background: var(--Primary-Surface)!important;
    border-color: var(--Primary-Surface)!important;
}

.btn-light {
    background: var(--Neutral-10);
    border-color: var(--Neutral-40);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}

.btn-light:focus,
.btn-light:hover {
    background: var(--Neutral-20)!important;
    border-color: var(--Neutral-20)!important;
}

.btn-light:active {
    background: var(--Neutral-30)!important;
    border-color: var(--Neutral-30)!important;
}

.btn-light:disabled {
    color: var(--Neutral-60)!important;
    background: var(--Neutral-30)!important;
    border-color: var(--Neutral-40)!important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0)!important;
}

.btn-icon {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Neutral-10);
    border-color: var(--Neutral-40);
}

.btn-icon:focus {
    background: var(--Neutral-20)!important;
    border-color: var(--Neutral-20)!important;
}

.btn-icon:hover {
    background: var(--Neutral-30)!important;
    border-color: var(--Neutral-30)!important;
}

.btn-primary.bg-facebook {
    background: #4267B2;
    border-color: #4267B2;
}

.btn-primary.bg-facebook:focus {
    background: #668bd4!important;
    border-color: #668bd4!important;
}

.btn-primary.bg-facebook:active {
    background: #1a356b!important;
    border-color: #1a356b!important;
}

.btn-primary.bg-facebook:hover {
    background: #3056a3!important;
    border-color: #3056a3!important;
}

.btn-primary.bg-google {
    background: #DB4437;
    border-color: #DB4437;
}

.btn-primary.bg-google:focus {
    background: #be635b!important;
    border-color: #be635b!important;
}

.btn-primary.bg-google:active {
    background: #a12116!important;
    border-color: #a12116!important;
}

.btn-primary.bg-google:hover {
    background: #bd3529!important;
    border-color: #bd3529!important;
}

.btn-primary.bg-twitter {
    background: #1DA1F2;
    border-color: #1DA1F2;
}

.btn-primary.bg-twitter:focus {
    background: #34aaf3!important;
    border-color: #34aaf3!important;
}

.btn-primary.bg-twitter:active {
    background: #148cd6!important;
    border-color: #148cd6!important;
}

.btn-primary.bg-twitter:hover {
    background: #25abff!important;
    border-color: #25abff!important;
}

.btn-primary.bg-whatsapp {
    background: #25D366;
    border-color: #25D366;
}

.btn-primary.bg-whatsapp:focus {
    background: #21df66!important;
    border-color: #21df66!important;
}

.btn-primary.bg-whatsapp:active {
    background: #1ac057!important;
    border-color: #1ac057!important;
}

.btn-primary.bg-whatsapp:hover {
    background: #2de671!important;
    border-color: #2de671!important;
}

.btn-primary.show {
    background: var(--Primary-Pressed)!important;
    border-color: var(--Primary-Pressed)!important;
}

.btn-md {
    --bs-btn-padding-y: 9px;
    --bs-btn-padding-x: 16px;
    font-size: 14px;
}

.btn-lg {
    --bs-btn-padding-y: .782rem;
    --bs-btn-padding-x: 2rem;
    font-size: 14px;
}

.btn-xl {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 20px;
    font-size: 16px;
}

.btn-link.btn-lg {
    --bs-btn-padding-x: .5rem;
}


/* dropdown */

.dropdown .dropdown-menu {
    padding: 0;
    border-radius: 4px;
}

.dropdown .dropdown-menu .dropdown-item {
    padding: 10px 16px;
}

.dropdown .dropdown-menu li:first-child .dropdown-item {
    border-radius: 4px 4px 0 0;
}

.dropdown .dropdown-menu li:last-child .dropdown-item {
    border-radius: 0 0 4px 4px;
}

.dropdown .dropdown-menu .dropdown-item:focus {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Focus)!important;
    border-color: var(--Primary-Focus)!important;
}

.dropdown .dropdown-menu .dropdown-item:active {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Pressed)!important;
    border-color: var(--Primary-Pressed)!important;
}

.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Hover)!important;
    border-color: var(--Primary-Hover)!important;
}


/* oredered list */

ol {
    padding-left: 24px;
    margin-bottom: 0;
}

ol li {
    padding: 1px 0;
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
}


/* form */

.form-label {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
}

.form-control {
    border-radius: 4px;
    background: var(--Neutral-10);
    border-color: var(--Neutral-50);
}

.form-control.readonly {
    background: var(--Neutral-40);
    border-color: var(--Neutral-50);
}

.form-select {
    border-radius: 4px;
    border-color: var(--Neutral-50);
    background-color: var(--Neutral-10);
}

.form-select:focus,
.form-control:focus {
    border-color: var(--Primary-Focus)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}

.form-textarea-transparant {
    padding: 0;
    border: none;
}

.form-textarea-transparant::placeholder {
    color: var(--Neutral-60);
}

.form-control-lg {
    font-size: 14px;
    padding: .782rem 1rem;
}

.form-disable-arrow::-webkit-outer-spin-button,
.form-disable-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


/* form-check */

.form-check-input:checked {
    border-color: var(--Primary-Main);
    background-color: var(--Primary-Main);
}

.form-check-input:focus {
    border-color: var(--Primary-Focus)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}


/* input-group */

.input-group {
    align-items: center;
}

.input-group>.form-control {
    border-radius: 4px!important;
}

.input-group>.form-select {
    border-radius: 4px!important;
}

.input-group .input-group-text {
    z-index: 6;
    right: 2px;
    height: 90%;
    border: none;
    border-radius: 4px;
    position: absolute;
    padding: .375rem 1rem;
    background: var(--Neutral-10);
}

.input-group.left .form-select,
.input-group.left .form-control {
    padding-left: 54px!important;
}

.input-group.left .input-group-text {
    left: 2px;
    right: unset;
    padding: .375rem 1rem;
}


/* input-group quantity */

.input-group.quantity>.form-control {
    padding-left: 0;
    padding-right: 0;
    max-width: 48px;
    border: none;
    font-size: 16px;
    text-align: center;
    border-radius: 0!important;
}

.input-group.quantity>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
}

.input-group.quantity>.form-control::placeholder {
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-50);
}

.input-group.quantity .btn {
    --bs-btn-padding-x: 0.685rem;
    --bs-btn-padding-y: 0.375rem;
    border-radius: 100px!important;
}

.input-group.quantity .btn i {
    font-size: 14px;
}


/* input-group dropdown */

.input-group.dropdown {
    gap: 16px;
    display: flex;
}

.input-group.dropdown .btn {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 4px!important;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
}

.input-group.dropdown .btn.readonly {
    background: var(--Neutral-40);
}

.input-group.dropdown .btn.dropdown-toggle::after {
    border: none;
    content: "\ea5f";
    margin-left: 8px;
    vertical-align: unset;
    font-family: tabler-icons!important;
}


/* .form-switch */

.form-switch {
    gap: 36px;
    width: 100%;
    display: flex;
    padding-left: 0;
    align-items: center;
}

.form-switch .form-check-input {
    margin-left: 0;
    margin-top: 0;
    float: unset;
    width: 44px;
    height: 24px;
}

.form-switch .form-check-label {
    gap: 4px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.form-switch .form-check-label .label {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-100);
    text-transform: capitalize;
}

.form-switch .form-check-label .description {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--Neutral-80);
}


/* .checkbox-custom */

.checkbox-group {
    width: 100%;
    position: relative;
}

.checkbox-custom[type="checkbox"] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 1px;
    margin: auto 0 auto 12px;
}

.checkbox-custom:checked+label,
.checkbox-custom:not(:checked)+label {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    padding: 14px 12px 14px 34px;
    border: 1px solid var(--Primary-Main);
    gap: 4px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.checkbox-custom[type="checkbox"]:checked {
    accent-color: var(--Primary-Main);
}

.checkbox-custom[type="checkbox"]:checked+label {
    color: var(--Neutral-10);
    background-color: var(--Primary-Main);
}

.checkbox-custom:not(:checked)+label .label {
    color: var(--Neutral-100);
}

.checkbox-custom:checked+label .label {
    color: var(--Neutral-10);
}

.checkbox-custom:checked+label .description,
.checkbox-custom:not(:checked)+label .description {
    font-size: 14px;
    line-height: 16px;
    color: var(--Neutral-60);
}

.checkbox-custom:checked+label .description {
    color: var(--Neutral-50);
}


/* .radio-custom */

.radio-group {
    width: 100%;
    position: relative;
}

.radio-custom[type="radio"] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 1px;
    margin: auto 0 auto 12px;
}

.radio-custom:checked+label,
.radio-custom:not(:checked)+label {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    padding: 24px 12px 24px 34px;
    border: 1px solid var(--Primary-Main);
    gap: 4px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.radio-custom[type="radio"]:checked {
    accent-color: var(--Primary-Main);
}

.radio-custom[type="radio"]:checked+label {
    color: var(--Neutral-10);
    background-color: var(--Primary-Main);
}

.radio-custom:not(:checked)+label .label {
    color: var(--Neutral-100);
}

.radio-custom:checked+label .label {
    color: var(--Neutral-10);
}

.radio-custom:checked+label .description,
.radio-custom:not(:checked)+label .description {
    font-size: 14px;
    line-height: 16px;
    color: var(--Neutral-60);
}

.radio-custom:checked+label .description {
    color: var(--Neutral-50);
}


/* select2 */

.select2-container .select2-selection--single {
    height: 48px!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 16px!important;
    font-size: 14px!important;
    padding-top: 10px!important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    padding-top: 12px!important;
    padding-right: 16px!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px!important;
    margin-right: 16px!important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--Primary-Main)!important;
}


/* nav-pills */

.nav-pills {
    gap: 8px;
}

.nav-pills .nav-item .nav-link {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
}

.nav-pills .nav-item .nav-link.active {
    color: var(--Neutral-10);
    background: var(--Primary-Main);
}

@media(max-width: 991.98px) {
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }
    .nav-pills .nav-item {
        min-width: fit-content;
    }
}


/* nav-tabs */

.nav-tabs {
    gap: 24px;
}

.nav-tabs .nav-link {
    padding: 0 12px 12px 12px;
    border-radius: 0;
    border: none;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-60);
}

.nav-tabs .nav-link.active {
    color: var(--Primary-Main);
    background-color: transparent;
    border-bottom: 2px solid var(--Primary-Main);
}


/* swiper nav-pills */

.swiper .nav-pills {
    gap: 0;
    flex-wrap: nowrap;
}

.swiper .nav-pills .nav-item {
    flex-shrink: unset;
}

@media(max-width: 991.98px) {
    .swiper .nav-pills {
        flex-wrap: unset;
        overflow-x: unset;
    }
}


/* container */

@media(max-width: 991.98px) {
    .container-fluid {
        --bs-gutter-x: 36px;
        padding-right: calc(var(--bs-gutter-x)* .5)!important;
        padding-left: calc(var(--bs-gutter-x)* .5)!important;
    }
}

@media(min-width: 992px) {
    .container-fluid {
        --bs-gutter-x: 80px;
        padding-right: calc(var(--bs-gutter-x)* .5)!important;
        padding-left: calc(var(--bs-gutter-x)* .5)!important;
    }
}


/* pagination */

.pagination .page-item .page-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 4px;
    color: var(--Primary-Pressed);
    background: var(--Neutral-10);
    border: 1px solid var(--Primary-Border);
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:hover {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Hover)!important;
    border: 1px solid var(--Primary-Hover)!important;
}

.pagination .page-item .page-link:focus,
.pagination .page-item .page-link:focus {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Focus)!important;
    border: 1px solid var(--Primary-Focus)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
}

.pagination .page-item .page-link:active,
.pagination .page-item .page-link:active {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Pressed)!important;
    border: 1px solid var(--Primary-Pressed)!important;
}

.pagination .page-item.disabled .page-link {
    color: var(--Neutral-60);
}

.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link {
    padding-left: 0;
    padding-right: 0;
    border: none!important;
    border-radius: 0!important;
    background-color: transparent;
}

.pagination .page-item.prev .page-link:hover,
.pagination .page-item.next .page-link:hover {
    color: initial!important;
    border-color: initial!important;
    background-color: initial!important;
}

.pagination .page-item.prev .page-link:focus,
.pagination .page-item.next .page-link:focus {
    color: initial!important;
    border-color: initial!important;
    background-color: initial!important;
}

.pagination .page-item.prev .page-link:active,
.pagination .page-item.next .page-link:active {
    color: initial!important;
    border-color: initial!important;
    background-color: initial!important;
}

.pagination .page-item.active .page-link {
    color: var(--Neutral-10)!important;
    background: var(--Primary-Pressed)!important;
    border: 1px solid var(--Primary-Pressed)!important;
}


/* swiper */

.swiper-custom-navigation {
    gap: 10px;
    display: flex;
    align-items: center;
}

.swiper-custom-navigation .prev,
.swiper-custom-navigation .next {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-40);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-custom-navigation .prev.swiper-button-disabled,
.swiper-custom-navigation .next.swiper-button-disabled {
    background: var(--Neutral-40);
}

.swiper-custom-footer {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 20px;
    z-index: 2;
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.swiper-custom-footer .swiper-custom-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--Primary-Surface);
}

.swiper-custom-footer .swiper-custom-pagination .swiper-pagination-bullet-active {
    background: var(--Neutral-10);
}


/* section */

.section-header {
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-header .section-info .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Neutral-100);
}

.section-header .section-info .description {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-80);
}

@media(max-width: 991.98px) {
    .section-header .section-info .title {
        line-height: 32px;
    }
    .section-header .section-info .description {
        line-height: 24px;
    }
}


/* card */

.card .card-body .card-badges {
    gap: 8px;
    display: flex;
    align-items: center;
}

.card .card-body .card-info {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: var(--Neutral-90);
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.card .card-body .card-info .item {
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.card .card-body .card-point {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.card .card-body .card-point .item {
    gap: 8px;
    display: flex;
    align-items: center;
}

.card .card-body .card-point .item.location {
    gap: 8px;
    display: flex;
    align-items: start;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-60);
}

.card .card-body .card-point .item i {
    font-size: 20px;
    color: var(--Primary-Main);
}

.card .card-body .card-selected-tickets {
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.card .card-body .card-selected-tickets .item {
    gap: 12px;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--Neutral-40);
}

.card .card-body .card-selected-tickets .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.card .card-body .card-selected-tickets .item .title {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

.card .card-body .card-selected-tickets .info {
    display: flex;
    justify-content: space-between;
}

.card .card-body .card-selected-tickets .info .text,
.card-ticy .card-body .card-selected-tickets .info .text div {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
    gap: 4px;
    display: flex;
    align-items: center;
}

.card .card-body .card-selected-tickets .info .text i {
    color: var(--Primary-Main);
}

.card .card-body .card-summaries .item {
    gap: 16px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin: 6px 0;
}

.card .card-body .card-summaries .item .label {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
    gap: 4px;
    display: flex;
    flex-direction: column;
}

.card .card-body .card-summaries .item .label .description {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: var(--Neutral-60);
}

.card .card-body .card-summaries .item .price {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Primary-Main);
}

@media(max-width: 991.98px) {
    .card .card-body.p-24 {
        padding: 20px!important;
    }
}


/* card-share */

.card-share {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.card-share .socials {
    gap: 14px;
    display: flex;
    align-items: center;
}

.card-share .socials a {
    color: var(--Primary-Main);
}

.card-share.blog .socials a {
    padding: 8px;
    border-radius: 4px;
    color: var(--Neutral-10);
    background-color: var(--Primary-Main);
}


/* .card-border-only */

.card-border-only {
    border-radius: 8px!important;
    background: var(--Neutral-10)!important;
    border: 1px solid var(--Neutral-50)!important;
}

.card-border-only.bg-primary {
    background: var(--Primary-Main)!important;
}

.card-border-only .card-body {
    padding: 20px!important;
}


/* .card-account */

.card-account {
    border: none;
    border-radius: 8px;
    background: var(--Neutral-10);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}

.card-account .card-body .header {
    gap: 8px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.card-account .card-body .header .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Neutral-100);
}

.card-account .card-body .header .description {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-80);
}

@media(max-width: 991.98px) {
    .card-account .card-body.px-32 {
        padding-left: 24px;
        padding-right: 24px;
    }
    .card-account .card-body.p-32 {
        padding: 24px;
    }
}


/* card-categories */

.card-categories {
    border: none;
    position: relative;
    border-radius: 4px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-categories .card-img-top {
    border-radius: 4px 4px 0 0;
}

.card-categories .card-body .card-title {
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}


/* card-events */

.card-events {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--Neutral-40);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-events .card-img-top {
    min-height: 110px;
    max-height: 110px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.card-events .card-body .card-title {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
    text-transform: uppercase;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.card-events .card-body .card-price .label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--Neutral-80);
}

.card-events .card-body .card-price .price {
    color: var(--Primary-Main);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.15px;
    text-transform: capitalize;
}

@media(max-width: 991.98px) {
    .card-events .card-body .card-title {
        font-size: 16px;
    }
}


/* card-placeholder */

.card-placeholder {
    border-radius: 8px;
    border: 1px dashed var(--Neutral-60);
}

.card-placeholder .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Neutral-60);
}

.card-placeholder .card-body i {
    font-size: 24px;
}

.card-placeholder.event {
    min-height: 360px;
}

.card-placeholder.bank {
    min-height: 150px;
}


/* .card-bank */

.card-bank {
    border-radius: 8px;
    background: var(--Neutral-20);
    border: 1px solid var(--Neutral-60);
}

.card-bank .card-body .bank-logo {
    width: 100%;
    height: auto;
    max-width: 76px;
    object-fit: contain;
}

.card-bank .card-body .bank-name {
    color: var(--Neutral-80);
    font-size: 14px;
    line-height: 20px;
}

.card-bank .card-body .bank-number {
    color: var(--Neutral-100);
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
}

.card-bank .card-body .bank-branch {
    color: var(--Primary-Main);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}


/* .card-additional-form */

.card-additional-form {
    border-radius: 8px;
    border: 1px solid var(--Neutral-40);
}

.card-additional-form.readonly {
    background: var(--Neutral-30);
}

.card-additional-form .card-body {
    gap: 16px;
    display: flex;
    align-items: center;
    padding: 32px 32px 32px 8px;
}

.card-additional-form .card-body i {
    font-size: 28px;
}

.card-additional-form:not(.readonly) .card-body .form-control {
    padding-left: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0!important;
}

.card-additional-form .card-body .form-check {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    color: var(--Primary-Main);
}


/* card-event-detail */

.card-event-detail {
    border: none;
    border-radius: 12px;
    background: var(--Neutral-10);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-event-detail .card-body {
    padding: 24px 16px;
}

.card-event-detail .card-body .card-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
    margin-bottom: 20px;
}

.card-event-detail .card-body .card-price {
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-event-detail .card-body .card-price .text .label {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-transform: capitalize;
    color: var(--Neutral-100);
    margin-bottom: 4px;
}

.card-event-detail .card-body .card-price .text .price {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Primary-Main);
}


/* card-ticket */

.card-ticket {
    border-radius: 8px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}

.card-ticket .card-body {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

.card-ticket .card-body .card-point {
    gap: 6px;
    font-size: 14px;
}

.card-ticket .card-body .card-point .item {
    gap: 6px;
}

.card-ticket .card-body .card-point .item i {
    font-size: 16px;
}

.card-ticket .card-body .card-price {
    color: var(--Primary-Main);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}

.card-ticket .card-body .input-group.quantity {
    width: auto;
}


/* card-ticket-summary */

.card-ticket-summary {
    border-radius: 12px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-ticket-summary .card-body {
    padding: 24px 16px;
}

.card-ticket-summary .card-footer {
    border-top: none;
    padding: 0 16px 24px 16px;
    border-radius: 0 0 12px 12px;
    background-color: var(--Neutral-10);
}


/* card-creators */

.card-creators {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--Neutral-40);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

.card-creators .img-fluid {
    width: 100%;
    height: 100%;
    max-width: 110px;
    max-height: 124px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 0 0 12px;
}

.card-creators .card-body {
    padding: 20px 12px;
}

.card-creators .card-body .card-title {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.card-creators .card-body .card-title:hover {
    color: var(--Primary-Main);
}

.card-creators .card-body .card-location {
    color: var(--Neutral-90);
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
    margin-bottom: 14px;
}


/* card-creators-2 */

.card-creators-2 {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--Neutral-40);
}

.card-creators-2 .card-body {
    gap: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.card-creators-2 .card-body .img-fluid {
    width: 100%;
    height: 100%;
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
    object-fit: cover;
    object-position: center;
}

.card-creators-2 .card-body .card-title {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.card-creators-2 .card-body .card-title:hover {
    color: var(--Primary-Main);
}

.card-creators-2 .card-body .card-location {
    color: var(--Neutral-90);
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
    margin-bottom: 14px;
}

.card-creators-2 .card-body .overview {
    gap: 16px;
    display: flex;
    align-items: center;
}

.card-creators-2 .card-body .overview .item {
    width: 100px;
    height: 100px;
    gap: 4px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 24px 12px;
    color: var(--Neutral-10);
    border-radius: 16px;
    background: var(--Gradient-1, linear-gradient(180deg, #5A4C9A 0%, #1D019C 100%));
}

.card-creators-2 .card-body .overview .item .number {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.card-creators-2 .card-body .overview .item .label {
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
}

.card-creators-2 .card-footer {
    border-top: none;
    padding: 0 16px 16px 16px;
    background-color: transparent;
}


/* card-articles */

.card-articles {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--Neutral-40);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-articles .card-img-top {
    border-radius: 12px 12px 0 0;
}

.card-articles .card-body .card-title {
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.card-articles .card-body hr {
    color: var(--Primary-Border);
}


/* card-cities */

.card-cities {
    position: relative;
    border: 4px solid var(--Primary-Border);
}

.card-cities .card-img-top {
    min-height: 240px;
    object-fit: cover;
    border-radius: 4px;
    filter: brightness(.5);
}

.card-cities .card-body {
    z-index: 2;
    left: 16px;
    bottom: 16px;
    position: absolute;
}

.card-cities .card-body .card-badges .badge.text-bg-warning {
    color: var(--Warning-Main)!important;
    background: var(--Warning-Surface)!important;
    border: 1px solid var(--Warning-Border)!important;
}

.card-cities .card-body .card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Neutral-10);
}

@media(max-width: 991.98px) {
    .card-cities .card-img-top {
        min-height: 200px;
    }
    .card-cities .card-body {
        left: 0;
        bottom: 0;
    }
    .card-cities .card-body .card-title {
        font-size: 16px;
    }
}


/* card-auth */

.card-auth {
    border-radius: 12px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-40);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
}

.card-auth .card-body {
    padding: 40px 32px;
    text-align: center;
}

.card-auth .card-body .card-logo {
    width: 100%;
    height: auto;
    max-width: 200px;
}


/* card-information */

.card-information {
    border: none;
    border-radius: 4px;
    background: var(--Neutral-20);
}

.card-information .card-body {
    padding: 12px;
}

.card-information .card-body .card-title {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

.card-information .card-body hr {
    margin: 10px 0;
    color: var(--Neutral-60);
}


/* card-stats-1 */

.card-stats-1 {
    border-radius: 12px;
    background: var(--Neutral-10);
}

.card-stats-1 .card-body {
    gap: 12px;
    display: flex;
    align-items: center;
    padding: 24px 16px;
    justify-content: space-between;
}

.card-stats-1 .card-body .icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    max-width: 54px;
    max-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--Primary-Surface);
    border: 1px solid var(--Primary-Border);
}

.card-stats-1 .card-body .icon i {
    font-size: 28px;
    color: var(--Primary-Main);
}

.card-stats-1 .card-body .info {
    width: 100%;
}

.card-stats-1 .card-body .info .label {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--Primary-Main);
}

.card-stats-1 .card-body .info .value {
    font-size: 20px;
    font-weight: 600;
    color: var(--Primary-Main);
}

.card-stats-1 .card-body .action i {
    font-size: 24px;
    color: var(--Primary-Main);
}


/* card-stats-2 */

.card-stats-2 {
    border-radius: 12px;
    background: var(--Neutral-20);
    border: 1px solid var(--Primary-Main);
}

.card-stats-2 .card-header {
    display: flex;
    align-items: center;
    border-bottom: none;
    padding: 20px 16px 0 16px;
    border-radius: 12px 12px 0 0;
    justify-content: space-between;
    background: var(--Neutral-20);
}

.card-stats-2 .card-header .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Primary-Main);
}

.card-stats-2 .card-header .action select {
    min-width: 140px;
}

.card-stats-2 .card-header .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--Primary-Surface);
    border: 1px solid var(--Primary-Border);
}

.card-stats-2 .card-header .icon i {
    font-size: 20px;
    color: var(--Primary-Main);
}

.card-stats-2 .card-body {
    padding: 20px 16px;
}

.card-stats-2 .card-body .number {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    color: var(--Primary-Main);
    margin-bottom: 8px;
}

.card-stats-2 .card-body .indicator {
    gap: 8px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: fit-content;
}

.card-stats-2 .card-body .indicator.up {
    color: var(--Success-Main);
    background: var(--Success-Surface);
    border: 1px solid var(--Success-Border);
}

.card-stats-2 .card-body .indicator.down {
    color: var(--Danger-Main);
    background: var(--Danger-Surface);
    border: 1px solid var(--Danger-Border);
}


/* .card-stats-2.affiliate */

.card-stats-2.affiliate .card-header {
    gap: 10px;
    align-items: start;
    flex-direction: column;
}

.card-stats-2.affiliate .card-body .share .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Primary-Main);
}

.card-stats-2.affiliate .card-body .share .buttons {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.card-stats-2.affiliate .card-body .share .buttons .btn {
    width: max-content;
}

@media(max-width:991.98px) {
    .card-stats-2.affiliate .card-body .share .buttons {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* card-stats-3 */

.card-stats-3 {
    border: none;
    border-radius: 12px;
    background: var(--Gradient-1, linear-gradient(180deg, #5A4C9A 0%, #1D019C 100%));
}

.card-stats-3 .card-header {
    gap: 10px;
    display: flex;
    align-items: start;
    border-bottom: none;
    flex-direction: column;
    padding: 20px 16px 0 16px;
    border-radius: 12px 12px 0 0;
    justify-content: space-between;
}

.card-stats-3 .card-header .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-10);
}

.card-stats-3 .card-header .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--Primary-Surface);
    border: 1px solid var(--Primary-Border);
}

.card-stats-3 .card-header .icon i {
    font-size: 20px;
    color: var(--Primary-Main);
}

.card-stats-3 .card-body {
    padding: 10px 16px 20px 16px;
}

.card-stats-3 .card-body .number {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Neutral-10);
    margin-bottom: 12px;
}

.card-stats-3 .card-body .number span {
    font-weight: 400;
}


/* card-stats-4 */

.card-stats-4 {
    border-radius: 12px;
    color: var(--Neutral-10);
}

.card-stats-4 .card-body {
    gap: 12px;
    display: flex;
    align-items: center;
    padding: 24px 16px;
    justify-content: space-between;
}

.card-stats-4 .card-body .icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    max-width: 54px;
    max-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--Primary-Surface);
    border: 1px solid var(--Primary-Border);
}

.card-stats-4 .card-body .icon i {
    font-size: 28px;
    color: var(--Primary-Main);
}

.card-stats-4 .card-body .info {
    gap: 4px;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column;
}

.card-stats-4 .card-body .info .label {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.card-stats-4 .card-body .info .value {
    gap: 8px;
    display: flex;
    align-items: center;
}

.card-stats-4 .card-body .info .value .number {
    font-size: 20px;
    font-weight: 600;
}

.card-stats-4 .card-body .info .value .indicator {
    gap: 8px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: fit-content;
}

.card-stats-4 .card-body .info .value .indicator.up {
    color: var(--Success-Main);
    background: var(--Success-Surface);
    border: 1px solid var(--Success-Border);
}

.card-stats-4 .card-body .info .value .indicator.down {
    color: var(--Danger-Main);
    background: var(--Danger-Surface);
    border: 1px solid var(--Danger-Border);
}


/* card-chart */

.card-chart {
    border-radius: 8px;
    color: var(--Neutral-10);
    background: var(--Primary-Main);
    border: 1px solid var(--Primary-Main);
}

.card-chart .card-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 0 16px;
    justify-content: space-between;
    border-bottom: none;
}

.card-chart .card-header .title {
    gap: 10px;
    display: flex;
    align-items: center;
    line-height: 24px;
}

.card-chart .card-header .icon {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-10);
    width: fit-content;
}

.card-chart .card-header .icon i {
    font-size: 16px;
    color: var(--Primary-Main);
}

.card-chart .card-header .legends .item {
    gap: 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.card-chart .card-header .legends .item .circle {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: var(--Neutral-10);
}

.card-chart .card-body {
    padding: 16px;
}

.card-chart .card-body canvas {
    height: 100%!important;
}


/* card-blogs */

.card-blogs {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--Neutral-40);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.card-blogs .card-img-top {
    min-height: 160px;
    max-height: 160px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.card-blogs .card-body .card-title {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

@media(max-width: 991.98px) {
    .card-blogs .card-body .card-title {
        font-size: 16px;
    }
}


/* card-highlight-blogs */

.card-highlight-blogs {
    gap: 4px;
    border: none;
    border-radius: 0;
    position: relative;
    flex-direction: row;
    align-items: center;
}

.card-highlight-blogs .card-img-top {
    min-width: 640px;
    max-width: 640px;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
}

.card-highlight-blogs .card-body .card-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.25px;
    color: var(--Neutral-100);
}

.card-highlight-blogs .card-body .card-info {
    color: var(--Neutral-100);
}

.card-highlight-blogs .card-body .card-description {
    line-height: 24px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

@media(max-width: 991.98px) {
    .card-highlight-blogs {
        flex-direction: column;
    }
    .card-highlight-blogs .card-img-top {
        min-width: unset;
        max-width: unset;
        max-height: 420px;
    }
    .card-highlight-blogs .card-body {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .card-highlight-blogs .card-body .card-title {
        font-size: 18px;
        margin-bottom: 0;
    }
    .card-highlight-blogs .card-body .card-description {
        font-size: 14px;
    }
}


/* card-horizontal-blogs */

.card-horizontal-blogs {
    gap: 4px;
    border-radius: 8px;
    border-color: var(--Neutral-40);
    position: relative;
    flex-direction: row;
    align-items: center;
}

.card-horizontal-blogs .card-img-top {
    min-width: 200px;
    max-width: 200px;
    min-height: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.card-horizontal-blogs .card-body .card-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--Neutral-100);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

@media(max-width: 991.98px) {
    .card-horizontal-blogs {
        flex-direction: column;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
    }
    .card-horizontal-blogs .card-img-top {
        min-width: unset;
        max-width: unset;
        max-height: 180px;
        border-radius: 8px 8px 0 0;
    }
    .card-horizontal-blogs .card-body {
        width: 100%;
    }
    .card-horizontal-blogs .card-body .card-title {
        font-size: 16px;
        margin-bottom: 0;
    }
}


/* card-payment-check */

.card-payment-check {
    border: none;
    border-radius: 12px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    flex-direction: row;
}

.card-payment-check .breadcrumb-image {
    width: 100%;
    text-align: start;
    border-radius: 12px;
    padding: 144px 32px;
}

.card-payment-check .breadcrumb-image .title {
    font-size: 34px;
}

.card-payment-check .card-body {
    padding: 20px;
}

@media(max-width: 991.98px) {
    .card-payment-check {
        flex-direction: column;
    }
    .card-payment-check .breadcrumb-image {
        padding: 80px 32px;
    }
    .card-payment-check .breadcrumb-image .title {
        font-size: 28px;
    }
}


/* accordion */

.accordion.general {
    --bs-accordion-btn-color: var(--Neutral-10);
    --bs-accordion-btn-bg: var(--Primary-Main);
    --bs-accordion-border-radius: 0;
    --bs-accordion-btn-icon-width: 16px;
    --bs-accordion-active-bg: var(--Primary-Main);
    --bs-accordion-active-color: var(--Neutral-10);
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.accordion.general .accordion-item {
    border: 1px solid var(--Primary-Border);
    border-radius: var(--bs-accordion-border-radius);
}

.accordion.general .accordion-item:first-child,
.accordion.general .accordion-item:first-child .accordion-header .accordion-button {
    border-radius: 4px 4px 0 0!important;
}

.accordion.general .accordion-item:last-child,
.accordion.general .accordion-item:last-child .accordion-header .accordion-button.collapsed {
    border-radius: 0 0 4px 4px !important;
    margin-bottom: 0;
}

.accordion.general .accordion-item .accordion-header .accordion-button {
    border-radius: var(--bs-accordion-border-radius);
}

.accordion.general .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    font-weight: 500;
    border-radius: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion.general .accordion-item .accordion-header .accordion-button::after {
    filter: invert(1);
}

.accordion.general .accordion-item .accordion-collapse .accordion-body {
    font-size: 14px;
    line-height: 20px;
    color: var(--Primary-Main);
    background-color: var(--Primary-Surface);
}

.accordion.general .accordion-item .accordion-collapse .accordion-body .checkbox-lists {
    gap: 6px;
    display: flex;
    flex-direction: column;
}


/* number-lists */

.number-lists {
    gap: 16px;
    display: flex;
    align-items: start;
    flex-direction: column;
    counter-reset: number-counter;
}

.number-lists .date {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--Neutral-80);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--Neutral-40);
}

.number-lists .item {
    gap: 12px;
    width: 100%;
    display: flex;
    align-items: center;
}

.number-lists .item.active {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--Neutral-40);
}

.number-lists .item .number {
    width: 24px;
    height: 24px;
    font-size: 12px;
    padding: 4px 8px;
    line-height: 16px;
    border-radius: 100px;
    color: var(--Primary-Main);
    background: var(--Primary-Surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-lists .item.active .number {
    color: var(--Neutral-10);
    background: var(--Primary-Main);
}

.number-lists .item img {
    width: 100%;
    height: 60px;
    max-width: 60px;
    object-fit: cover;
    border-radius: 100px;
}

.number-lists .item .number::before {
    counter-increment: number-counter;
    content: counter(number-counter);
}

.number-lists .item .info {
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.number-lists .item .info .title {
    line-height: unset;
    color: var(--Neutral-100);
}

.number-lists .item .info .description {
    width: 100%;
    font-size: 14px;
    line-height: unset;
    color: var(--Neutral-80);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.number-lists .item .info .description .price {
    font-weight: 500;
    color: var(--Primary-Main);
}


/* form */

.form .header {
    gap: 16px;
    display: flex;
    align-items: center;
}

.form .header .icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    max-width: 54px;
    max-height: 54px;
    border-radius: 100px;
    border: 1px solid var(--Primary-Main);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .header .icon i {
    font-size: 24px;
    color: var(--Primary-Main);
}

.form .header .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Neutral-100);
}

.form .header .description {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.4px;
    color: var(--Info-Main);
}

@media (max-width: 767.98px) {
    .form .header .icon {
        display: none;
    }
}


/* table */

.table-custom thead tr td {
    line-height: 24px;
    color: var(--Primary-Main);
}

.table-custom thead tr td .form-check {
    display: flex;
    justify-content: center;
}

.table-custom tbody tr {
    border-top: 1px solid var(--Neutral-40);
}

.table-custom tbody tr td {
    border-bottom: none;
    vertical-align: middle;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--Neutral-100);
}

.table-custom tbody tr td .form-check {
    display: flex;
    justify-content: center;
}

.table-custom tbody tr.active {
    border-top: 1px solid var(--Primary-Main);
    border-right: 1px solid var(--Primary-Main);
    border-left: 1px solid var(--Primary-Main);
}

.table-custom tbody tr.active td i {
    display: block;
    transform: rotate(180deg);
}

.table-custom tbody tr.open {
    border-right: 1px solid var(--Primary-Main);
    border-bottom: 1px solid var(--Primary-Main);
    border-left: 1px solid var(--Primary-Main);
}

.table-custom tbody tr.open td {
    background: var(--Neutral-20);
}


/* table-transparent */

.table-transparent td {
    background-color: transparent!important;
}


/* countdown */

.countdown {
    gap: 32px;
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--Primary-Border);
    background: rgba(222, 219, 235, 0.40);
}

.countdown .item {
    text-align: center;
    color: var(--Primary-Main);
}

.countdown .item .number {
    font-size: 34px;
    font-weight: 500;
    line-height: 36px;
}

.countdown .item .label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}


/* navbar */

.navbar.navbar-links {
    --bs-navbar-padding-y: 16px;
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: end;
    border-bottom: 2px solid var(--Secondary-Main);
    background: var(--Primary-Main);
}

.navbar.navbar-links a {
    color: var(--Neutral-10);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
}

.navbar.navbar-main {
    --bs-navbar-padding-y: 32px;
    gap: 24px;
    border-bottom: 1px solid var(--Neutral-40);
}

.navbar.navbar-main .navbar-toggler {
    border: none;
}

.navbar.navbar-main .navbar-toggler:focus {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.navbar.navbar-main .navbar-search {
    width: 100%;
    position: relative;
}

.navbar.navbar-main .navbar-search .recommendation {
    gap: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.navbar.navbar-main .navbar-search .recommendation .tags {
    gap: 10px;
    display: flex;
    align-items: center;
}

.navbar.navbar-main .navbar-search .recommendation .tags a {
    color: var(--Neutral-80);
}

.navbar.navbar-main .navbar-search .recommendation-dropdown {
    padding: 12px;
    max-height: 240px;
    overflow-y: scroll;
    border-radius: 4px;
    border: 1px solid var(--Neutral-50);
    background-color: var(--Neutral-10);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 60px;
    display: none;
}

.navbar.navbar-main .navbar-search .recommendation-dropdown img {
    width: 100%;
    height: auto;
    min-height: 75px;
    max-height: 75px;
    max-width: 130px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--Primary-Border);
}

.navbar.navbar-main .dropdown .dropdown-menu {
    --bs-dropdown-min-width: 280px;
    margin-top: 16px;
    border-radius: 8px;
}

.navbar.navbar-main .dropdown .dropdown-menu[data-bs-popper] {
    left: unset;
    right: 0;
}

.navbar.navbar-main .dropdown .dropdown-menu li:first-child {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    padding: 20px 16px;
    color: var(--Neutral-10);
    border-radius: 8px 8px 0px 0px;
    background: var(--Gradient-1, linear-gradient(180deg, #5A4C9A 0%, #1D019C 100%));
}

@media(max-width: 991.98px) {
    .navbar.navbar-main {
        --bs-navbar-padding-y: 10px;
        align-items: center;
        justify-content: space-between;
    }
    .navbar.navbar-main .navbar-search {
        display: none;
    }
}


/* account-sidemenu */

.accounts {
    display: grid;
    background: var(--Neutral-20);
    grid-template-columns: 360px 1fr;
}

.account-sidemenu {
    min-height: 100vh;
    padding: 40px 24px;
    background: var(--Neutral-10);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
}

.account-sidemenu .account-information {
    gap: 8px;
    display: flex;
    align-items: center;
}

.account-sidemenu .avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 100px;
    object-position: center;
}

.account-sidemenu .account-information .info {
    gap: 8px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.account-sidemenu .account-information .info .name {
    color: var(--Neutral-100);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}

.account-sidemenu .account-information .info .status {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.25px;
}

.account-sidemenu .card-creators-2 {
    border-radius: 16px;
    border: 1px solid var(--Neutral-50);
}

.account-sidemenu .menus {
    gap: 12px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.account-sidemenu .menus .item {
    width: 100%;
    gap: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.account-sidemenu .menus .item .icon {
    font-size: 28px;
    color: var(--Primary-Main);
}

.account-sidemenu .menus .item .name {
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-90);
}

.account-sidemenu .menus .item.active {
    background: var(--Primary-Main);
}

.account-sidemenu .menus .item.active .icon {
    color: var(--Neutral-10);
}

.account-sidemenu .menus .item.active .name {
    color: var(--Neutral-10);
}

.account-sidemenu .menus .item.has-submenu:not(.collapsed) i:last-child {
    transform: rotate(180deg);
}

.account-sidemenu .menus .submenu .item {
    padding-left: 48px!important;
}

.account-sidemenu .menus .submenu.show .item {
    border-radius: 0;
    color: var(--Primary-Main);
    background: var(--Primary-Surface);
}

.account-sidemenu .menus .submenu.show .item:first-child {
    border-radius: 4px 4px 0 0;
}

.account-sidemenu .menus .submenu.show .item:last-child {
    border-radius: 0 0 4px 4px;
}

.account-sidemenu .menus .submenu .item.active {
    background: var(--Primary-Pressed);
}

@media(max-width: 991.98px) {
    .accounts {
        display: block;
    }
    .account-sidemenu {
        display: none;
    }
}


/* offcanvas */

nav .offcanvas {
    --bs-offcanvas-width: 100%;
    --bs-offcanvas-padding-x: 32px;
    --bs-offcanvas-padding-y: 32px;
}


/* breadcrumb */

nav .breadcrumb {
    --bs-breadcrumb-item-padding-x: 4px;
}

nav .breadcrumb .breadcrumb-item {
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-60);
}

nav .breadcrumb .breadcrumb-item.active {
    font-weight: 500;
    color: var(--Primary-Main);
}

nav .breadcrumb .breadcrumb-item a {
    color: var(--Neutral-60);
}

nav .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "\ea61";
    color: var(--Neutral-50);
    font-family: tabler-icons!important;
}


/* breadcrumb.breadcrumb-lg */

nav .breadcrumb.breadcrumb-lg .breadcrumb-item {
    font-size: 18px;
}

nav .breadcrumb.breadcrumb-lg .breadcrumb-item+.breadcrumb-item::before {
    font-size: 20px;
}


/* breadcrumb-image */

.breadcrumb-image {
    padding: 80px 32px;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0px 0px 16px 16px;
    background: linear-gradient(0deg, rgba(90, 76, 154, 0.90) 0%, rgba(90, 76, 154, 0.90) 100%), url('../img/background/contactus.jpg') lightgray 50% / cover no-repeat;
}

.breadcrumb-image.with-image {
    text-align: start;
    flex-direction: row;
    justify-content: space-between;
}

.breadcrumb-image nav .breadcrumb .breadcrumb-item.active {
    color: var(--Secondary-Main);
}

.breadcrumb-image nav .breadcrumb .breadcrumb-item a {
    color: var(--Neutral-10);
}

.breadcrumb-image nav .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--Neutral-10);
}

.breadcrumb-image .title {
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    color: var(--Neutral-10);
}

.breadcrumb-image .description {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-10);
}

.breadcrumb-image img.payment {
    width: 100%;
    height: auto;
    max-width: 260px;
    object-fit: contain;
}

@media(max-width: 991.98px) {
    .breadcrumb-image.with-image {
        gap: 24px;
        align-items: start;
        flex-direction: column;
    }
}


/* nav .offcanvas .account-sidemenu */

nav .offcanvas .offcanvas-body.loggedin {
    padding-top: 0!important;
}

nav .offcanvas .account-sidemenu {
    padding: 0;
    display: block;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0);
}


/* home-slider */

.home-slider {
    padding-top: 24px;
    padding-bottom: 60px;
}

.home-slider .swiper .swiper-slide {
    border-radius: 8px;
}

.home-slider .swiper .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.home-slider .swiper .swiper-custom-navigation .prev {
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto 0;
}

.home-slider .swiper .swiper-custom-navigation .next {
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto 0;
}

@media(max-width: 991.98px) {
    .home-slider {
        padding-bottom: 24px;
    }
    .home-slider .swiper .swiper-slide img {
        min-height: 185px;
    }
    .home-slider .swiper .swiper-custom-navigation .prev {
        left: -2px;
        opacity: .8;
    }
    .home-slider .swiper .swiper-custom-navigation .next {
        right: -2px;
        opacity: .8;
    }
    .home-slider .swiper .swiper-custom-footer {
        display: none;
    }
}


/* event-categories */

.event-categories {
    padding-top: 60px;
    padding-bottom: 60px;
    background: var(--Neutral-20);
}

.event-categories .category-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

@media(max-width: 991.98px) {
    .event-categories .category-lists {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* upcoming-events */

.upcoming-events {
    padding-top: 100px;
}

.upcoming-events .swiper {
    padding-bottom: 20px;
}

@media(max-width: 991.98px) {
    .upcoming-events {
        padding-top: 60px;
    }
}


/* upcoming-events */

.recommendation-events {
    padding-top: 80px;
}

.recommendation-events .event-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media(max-width: 991.98px) {
    .recommendation-events {
        padding-top: 60px;
    }
    .recommendation-events .event-lists {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* cta-register */

.cta-register {
    position: relative;
    padding-top: 160px;
    padding-bottom: 160px;
}

.cta-register .container-fluid {
    gap: 40px;
    display: flex;
    align-items: center;
    padding-left: 0!important;
}

.cta-register img {
    border-radius: 0 0 100px 0;
}

.cta-register .content {
    color: var(--Neutral-100);
}

.cta-register .content .title {
    font-size: 48px;
    font-weight: 500;
    line-height: 56px;
}

.cta-register .content .description {
    line-height: 24px;
    letter-spacing: 0.5px;
}

@media(max-width: 991.98px) {
    .cta-register {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .cta-register .container-fluid {
        padding-right: 0!important;
    }
    .cta-register img {
        width: 100%;
        border-radius: 0;
        min-height: 300px;
        object-fit: cover;
        filter: brightness(.5);
    }
    .cta-register .content {
        padding: 0 18px;
        position: absolute;
        text-align: center;
        color: var(--Neutral-10);
    }
    .cta-register .content .title {
        font-size: 24px;
    }
    .cta-register .content .description {
        font-size: 14px;
    }
}


/* event-preferences */

.event-preferences {
    padding-bottom: 100px;
}

.event-preferences .event-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media(max-width: 991.98px) {
    .event-preferences {
        padding-bottom: 60px;
    }
    .event-preferences .event-lists {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* home-articles */

.home-articles {
    padding-top: 60px;
    padding-bottom: 40px;
    background: var(--Neutral-20);
}

.home-articles .swiper {
    padding-bottom: 20px;
}

@media(max-width: 991.98px) {
    .home-articles {
        padding-bottom: 60px;
    }
}


/* home-cities */

.home-cities {
    padding-top: 100px;
}

.home-cities .city-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media(max-width: 991.98px) {
    .home-cities {
        padding-top: 60px;
    }
    .home-cities .city-lists {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* event-shortcuts */

.event-shortcuts {
    padding-top: 200px;
    padding-bottom: 200px;
}

.event-shortcuts .shortcut-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media(max-width: 991.98px) {
    .event-shortcuts {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .event-shortcuts .shortcut-lists {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* auth */

.auth {
    padding-top: 120px;
    padding-bottom: 120px;
}

.auth .illustration {
    width: 100%;
    height: auto;
    max-width: 740px;
    object-fit: cover;
}


/* event-listings */

.event-listings {
    padding-top: 24px;
    padding-bottom: 200px;
}

.event-listings .swiper .swiper-custom-navigation .prev {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto 0;
}

.event-listings .swiper .swiper-custom-navigation .next {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto 0;
}

.event-listings .form-select {
    min-width: 160px;
    background-color: var(--Neutral-20);
}

.event-listings .event-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width: 991.98px) {
    .event-listings .event-lists {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* .event-listings .event-search-cities */

.event-listings .event-search-cities {
    padding-top: 60px;
    padding-bottom: 60px;
}

.event-listings .event-search-cities .swiper {
    padding-bottom: 20px;
    margin-bottom: -20px;
}


/* .event-listings .event-search-creators */

.event-listings .event-search-creators .swiper-custom-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--Primary-Focus);
}

.event-listings .event-search-creators .swiper-custom-pagination .swiper-pagination-bullet-active {
    background: var(--Primary-Main);
}


/* event-filters */

.event-filters .event-filter-reset {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    background: var(--Primary-Surface);
}

.event-filters .accordion {
    --bs-accordion-border-radius: 4px;
    --bs-accordion-btn-icon-width: 16px;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--Primary-Main);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.event-filters .accordion .accordion-item {
    margin-bottom: 16px;
    border: 1px solid var(--Primary-Border);
    border-radius: var(--bs-accordion-border-radius);
}

.event-filters .accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.event-filters .accordion .accordion-item .accordion-header .accordion-button {
    border-radius: var(--bs-accordion-border-radius);
}

.event-filters .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    font-weight: 500;
    border-radius: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.event-filters .accordion .accordion-item .accordion-collapse .accordion-body {
    padding-top: 10px;
}

.event-filters .accordion .accordion-item .accordion-collapse .accordion-body .checkbox-lists {
    gap: 6px;
    display: flex;
    flex-direction: column;
}


/* event-details */

.event-details {
    padding-top: 60px;
}

.event-details .event-banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 40px;
    max-height: 420px;
}

.event-details .event-description {
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

@media(max-width: 991.98px) {
    .event-details .event-banner {
        max-height: 280px;
    }
}


/* event-booking */

.event-booking {
    padding-top: 60px;
}

.event-booking .img-responsive {
    max-height: 160px;
}

.event-booking .breadcrumb {
    margin-bottom: 50px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--Neutral-50);
}

.event-booking .booking-guests .form {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--Neutral-30);
}

.event-booking .booking-guests .form:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.event-booking .payment-lists .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}

.event-booking .payment-lists .methods {
    display: flex;
    align-items: start;
    flex-direction: column;
}

.event-booking .payment-lists .methods .item {
    width: 100%;
    display: flex;
    cursor: pointer;
    padding: 20px 12px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--Neutral-50);
}

.event-booking .payment-lists .methods .item:last-child {
    border-bottom: none;
}

.event-booking .payment-lists .methods .item.selected {
    border-radius: 8px;
    border: 1px solid var(--Primary-Main);
}

.event-booking .payment-lists .methods .item .detail {
    gap: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.event-booking .payment-lists .methods .item .detail .icon {
    width: 100%;
    height: auto;
    max-width: 54px;
    object-fit: cover;
}

.event-booking .payment-lists .methods .item .detail .info {
    gap: 4px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.event-booking .payment-lists .methods .item .detail .info .name {
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}

.event-booking .payment-lists .methods .item .detail .info .description {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.4px;
}

.event-booking .payment-lists .methods .item i {
    font-size: 24px;
    color: var(--Neutral-100);
}

.event-booking .payment-details {
    gap: 16px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.event-booking .payment-details .card {
    width: 100%;
    border: none;
    border-radius: 4px;
    background: var(--Neutral-20);
}

.event-booking .payment-details .card .card-body {
    padding: 12px;
}

.event-booking .payment-details .card .card-body .information {
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-booking .payment-details .card .card-body .information .detail {
    gap: 4px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.event-booking .payment-details .card .card-body .information .detail .label {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-80);
}

.event-booking .payment-details .card .card-body .information .detail .qrcode {
    width: 100%;
    height: auto;
    max-width: 200px;
}

.event-booking .payment-details .card .card-body .information .detail .text {
    gap: 16px;
    display: flex;
    align-items: center;
}

.event-booking .payment-details .card .card-body .information .detail .text .value {
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}

.event-booking .payment-details .card .card-body .information .detail .text .btn {
    font-size: 14px;
    padding: 4px 6px;
}

.event-booking .payment-details .card .card-body .information img {
    width: 100%;
    height: auto;
    max-width: 54px;
    object-fit: cover;
}

.event-booking .payment-details .card .card-body .description {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.4px;
}

.event-booking .accordion {
    --bs-accordion-border-radius: 4px;
    --bs-accordion-btn-icon-width: 16px;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--Neutral-100);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.event-booking .accordion .accordion-item {
    margin-bottom: 16px;
    border: none;
    border-radius: unset;
}

.event-booking .accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.event-booking .accordion .accordion-item .accordion-header .accordion-button {
    padding: 0;
    border-radius: unset;
}

.event-booking .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    border-radius: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.event-booking .accordion .accordion-item .accordion-collapse .accordion-body {
    padding-top: 10px;
}

.event-booking .accordion .accordion-item .accordion-collapse .accordion-body .checkbox-lists {
    gap: 6px;
    display: flex;
    flex-direction: column;
}


/* blog-lists */

.blog-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

@media(max-width: 991.98px) {
    .blog-lists {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* blog-details */

.blog-details {
    padding-top: 60px;
}

.blog-details .blog-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    color: var(--Neutral-100);
}

.blog-details .blog-banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 400px;
    border-radius: 12px;
}

.blog-details .blog-description {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

.blog-details .blog-description ol li,
.blog-details .blog-description ul li {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

@media(max-width:991.98px) {
    .blog-details {
        padding-top: 20px;
    }
}


/* account-content */

.accounts .account-content .img-responsive {
    /* min-width: 216px;
    min-height: 216px; */
    max-width: 280px;
    /* max-height: 216px; */
}

.accounts .account-content .sorting .form-select {
    min-width: 200px;
    background-color: var(--Neutral-20);
}

.accounts .account-content .social-linked {
    gap: 20px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.accounts .account-content .social-linked .item {
    gap: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accounts .account-content .social-linked .item .brand {
    gap: 12px;
    display: flex;
    align-items: center;
}

.accounts .account-content .social-linked .item .brand .icon {
    width: 44px;
    height: 44px;
    border-radius: 100px;
    background: var(--Neutral-20);
    display: flex;
    align-items: center;
    justify-content: center;
}

.accounts .account-content .social-linked .item .brand .icon img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: cover;
}

.accounts .account-content .social-linked .item .brand .name {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-80);
    text-transform: capitalize;
}

.accounts .account-content .transaction-lists {
    gap: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.accounts .account-content .transaction-lists .transaction-item {
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
}

.accounts .account-content .transaction-lists .transaction-item .header {
    gap: 16px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.accounts .account-content .transaction-lists .transaction-item .content {
    gap: 16px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.accounts .account-content .transaction-lists .transaction-item .content .info {
    gap: 16px;
    display: flex;
    align-items: flex-start;
}

.accounts .account-content .transaction-lists .transaction-item .content .info .img-responsive {
    min-height: 148px;
    max-height: 148px;
    min-width: 220px;
    max-width: 220px;
}

.accounts .account-content .transaction-lists .transaction-item .content .info .detail {
    min-width: fit-content;
}

.accounts .account-content .transaction-lists .transaction-item .content .info .detail .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}

.accounts .account-content .transaction-lists .transaction-item .content .action {
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: end;
}


/* .accounts .account-content .checkin-upload */

.accounts .account-content .checkin-upload {
    position: relative;
    border-radius: 8px;
    border: 1px dashed var(--Neutral-60);
}

.accounts .account-content .checkin-upload img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    max-height: 340px;
}

.accounts .account-content .checkin-upload label.upload {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

.accounts .account-content .checkin-upload label.upload a {
    gap: 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--Neutral-60);
}

.accounts .account-content .checkin-upload label.upload a i {
    font-size: 36px;
}

.accounts .account-content .checkin-upload label.change-upload {
    display: block;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.accounts .account-content .event-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.accounts .account-content .bank-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.accounts .account-content .template-lists {
    gap: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.accounts .account-content .template-lists .template-item {
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
}

.accounts .account-content .template-lists .template-item .content {
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accounts .account-content .template-lists .template-item .content .detail .title {
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

.accounts .account-content .template-lists .template-item .content .detail .card-point {
    gap: 6px;
}

.accounts .account-content .template-lists .template-item .content .detail .card-point .item {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-80);
}

.accounts .account-content .template-lists .template-item .content .action {
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.accounts .account-content .review-lists {
    gap: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.accounts .account-content .review-lists .review-item {
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-50);
}

.accounts .account-content .review-lists .review-item .header {
    gap: 16px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.accounts .account-content .review-lists .review-item .header .date {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--Neutral-80);
}

.accounts .account-content .review-lists .review-item .content {
    gap: 16px;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.accounts .account-content .review-lists .review-item .content .info {
    gap: 16px;
    display: flex;
    align-items: flex-start;
}

.accounts .account-content .review-lists .review-item .content .info .img-responsive {
    min-height: 120px;
    max-width: 210px;
}

.accounts .account-content .review-lists .review-item .content .info .detail .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: var(--Neutral-100);
}

.accounts .account-content .review-lists .review-item .content .review {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-40);
    gap: 16px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.accounts .account-content .review-lists .review-item .content .review .stars {
    gap: 2px;
    display: flex;
    align-items: flex-start;
}

.accounts .account-content .review-lists .review-item .content .review .stars i {
    font-size: 28px;
}

.accounts .account-content .review-lists .review-item .content .review .text {
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Neutral-100);
}

@media(max-width:991.98px) {
    .accounts .account-content .img-responsive {
        max-width: unset;
    }
    .accounts .account-content .bank-lists {
        grid-template-columns: repeat(1, 1fr);
    }
    .accounts .account-content .sorting .form-select {
        min-width: 160px;
    }
    .accounts .account-content .event-lists {
        grid-template-columns: repeat(1, 1fr);
    }
    .accounts .account-content .template-lists .template-item .content {
        flex-wrap: wrap;
    }
}


/* .accounts.creator .account-content */

.accounts.creator .account-content .stats-1 {
    gap: 16px;
    display: flex;
    align-items: center;
    padding: 20px 16px;
    border-radius: 16px;
    background: var(--Neutral-30);
}

.accounts.creator .account-content .stats-1 .card-stats-1 {
    width: 100%;
}


/* .accounts.creator .account-content */

.accounts.creator .account-content .stats-4 {
    gap: 16px;
    display: flex;
    align-items: center;
}

.accounts.creator .account-content .stats-4 .card-stats-4 {
    width: 100%;
}


/* .accounts.creator .account-content .banner-upload */

.accounts.creator .account-content .banner-upload {
    position: relative;
    border-radius: 8px;
    border: 1px dashed var(--Neutral-60);
}

.accounts.creator .account-content .banner-upload img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    max-height: 340px;
}

.accounts.creator .account-content .banner-upload label.upload {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

.accounts.creator .account-content .banner-upload label.upload a {
    gap: 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--Neutral-60);
}

.accounts.creator .account-content .banner-upload label.upload a i {
    font-size: 36px;
}

.accounts.creator .account-content .banner-upload label.change-upload {
    display: block;
    position: absolute;
    right: 16px;
    bottom: 16px;
}


/* .accounts.creator .account-content .avatar-upload */

.accounts.creator .account-content .avatar-upload {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.accounts.creator .account-content .avatar-upload img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 100px;
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
}

.accounts.creator .account-content .avatar-upload label {
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    min-height: 200px;
    border: 1px dashed var(--Neutral-60);
}

.accounts.creator .account-content .avatar-upload label a {
    gap: 16px;
    display: flex;
    font-size: 14px;
    text-align: center;
    align-items: center;
    flex-direction: column;
    color: var(--Neutral-60);
}

.accounts.creator .account-content .avatar-upload label a i {
    font-size: 30px;
}


/* .accounts.creator .accordion */

.accounts.creator .accordion {
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-border-radius: 4px;
    --bs-accordion-btn-icon-width: 16px;
    --bs-accordion-active-bg: var(--Primary-Surface);
    --bs-accordion-active-color: var(--Primary-Main);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.accounts.creator .accordion .accordion-item {
    border: none;
}

.accounts.creator .accordion .accordion-item .accordion-button {
    border-radius: 4px;
    border: 1px solid var(--Primary-Main);
    font-size: 14px;
    line-height: 20px;
}

.accounts.creator .accordion .accordion-item .accordion-header {
    margin-bottom: 8px;
}

.accounts.creator .accordion .accordion-item .accordion-body {
    border-radius: 4px;
    background: var(--Neutral-20);
}


/* .accounts.creator .modal */

.accounts.creator .modal .modal-header {
    padding: 24px 24px 0 24px;
}

.accounts.creator .modal .modal-body {
    gap: 16px;
    display: flex;
    padding: 24px;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.accounts.creator .modal .modal-body img {
    width: 100%;
    height: auto;
    max-width: 260px;
    object-fit: contain;
}

.accounts.creator .modal.images .modal-body img {
    width: 100%;
    height: auto;
    max-width: 500px;
    object-fit: contain;
    border-radius: 6px;
}

.accounts.creator .modal .modal-body .modal-title {
    font-size: 24px;
    line-height: 24px;
    color: var(--Neutral-100);
}

.accounts.creator .modal .modal-body .modal-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--Neutral-80);
}

.accounts.creator .modal .modal-footer {
    padding: 24px;
    padding-top: 0;
    border-top: none;
}


/* .accounts.creator .qrcode-scanner */

.accounts.creator .qrcode-scanner {
    width: 100%;
    height: auto;
}


/* .accounts.creator .event-details */

.accounts.creator .event-details .event-banner {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0;
}


/* e-ticket */

.e-ticket {
    padding: 100px 0;
}

.e-ticket .banner {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 8px;
}

.e-ticket .card-event-detail {
    border-radius: 8px!important;
    background: var(--Neutral-10)!important;
    border: 1px solid var(--Neutral-50)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.e-ticket .card-event-detail .card-body {
    gap: 16px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

.e-ticket .card-qrcode .card-body {
    gap: 8px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.e-ticket .card-qrcode .card-body .code {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--Neutral-100);
}

.e-ticket .card-qrcode .card-body .img {
    width: 100%;
    height: auto;
    max-width: 200px;
    object-fit: cover;
}

.e-ticket .card-qrcode .card-body svg {
    width: 200px;
    height: 200px;
}

.e-ticket .card-qrcode .card-body .info {
    font-size: 14px;
    color: var(--Info-Main);
}

@media(max-width: 991.98px) {
    .e-ticket {
        padding: 60px 0;
    }
}


/* creator-page */

.creator-page {
    padding: 40px 0 100px 0;
}

.creator-page .creator-wrapper {
    padding: 24px;
    border-radius: 4px;
    background: var(--Neutral-10);
}

.creator-page .creator-wrapper .banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    max-height: 240px;
}

.creator-page .creator-wrapper .event-details .event-banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 40px;
    min-height: 320px;
    max-height: 320px;
}

.creator-page .creator-wrapper .event-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width: 991.98px) {
    .creator-page .creator-wrapper {
        padding: 16px;
    }
    .creator-page .creator-wrapper .event-lists {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* general-pages */

.general-pages {
    padding-top: 80px;
}

@media(max-width: 991.98px) {
    .general-pages {
        padding-top: 48px;
    }
}


/* .general-pages.customer-service .topic-lists */

.general-pages.customer-service .topic-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.general-pages.customer-service .topic-lists .item {
    cursor: pointer;
    padding: 24px 16px;
    text-align: center;
    border-radius: 12px;
    color: var(--Neutral-100);
    border: 1px solid var(--Neutral-50);
}

.general-pages.customer-service .topic-lists .item:hover,
.general-pages.customer-service .topic-lists .item.active {
    color: var(--Primary-Main);
    background: var(--Primary-Surface);
    border: 1px solid var(--Primary-Border);
}

.general-pages.customer-service .topic-lists .item img {
    width: 100%;
    height: auto;
    min-height: 80px;
    max-height: 80px;
    min-width: 80px;
    max-width: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}

.general-pages.customer-service .topic-lists .item .title {
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
}

@media(max-width: 991.98px) {
    .general-pages.customer-service .topic-lists .item {
        padding: 16px;
    }
    .general-pages.customer-service .topic-lists .item img {
        min-height: 48px;
        max-height: 48px;
        min-width: 48px;
        max-width: 48px;
    }
    .general-pages.customer-service .topic-lists .item .title {
        font-size: 14px;
        line-height: 16px;
    }
}


/* .general-pages.customer-service.detail .topic-lists */

.general-pages.customer-service.detail .topic-lists {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.general-pages.customer-service.detail .topic-lists .item {
    gap: 40px;
    display: flex;
    text-align: start;
    align-items: center;
    justify-content: space-between;
}

.general-pages.customer-service.detail .topic-lists .item i {
    font-size: 24px;
}

@media(max-width: 991.98px) {
    .general-pages.customer-service.detail .topic-lists .item .title {
        font-size: 14px;
        line-height: 24px;
    }
}


/* .general-pages.customer-service .faq-lists */

.general-pages.customer-service .faq-lists {
    margin-bottom: 32px;
}

.general-pages.customer-service .faq-lists .item {
    gap: 8px;
    display: flex;
    align-items: start;
    flex-direction: column;
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--Neutral-50);
}

.general-pages.customer-service .faq-lists .item:first-child {
    padding-top: 0;
}

.general-pages.customer-service .faq-lists .item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.general-pages.customer-service .faq-lists .item .question,
.general-pages.customer-service .faq-lists .item a.question {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-100);
    text-transform: capitalize;
}

.general-pages.customer-service .faq-lists .item .answer {
    font-size: 14px;
    line-height: 20px;
    color: var(--Neutral-80);
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box!important;
}

.general-pages.customer-service .faq-lists .item .text-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--Primary-Main);
}


/* contact-us */

.contact-us {
    padding-top: 60px;
    padding-bottom: 60px;
    background: linear-gradient(0deg, rgba(90, 76, 154, 0.90) 0%, rgba(90, 76, 154, 0.90) 100%), url('../img/background/contactus.jpg') lightgray 50% / cover no-repeat;
}

.contact-us .section-header .section-info .title {
    font-size: 48px;
    line-height: 48px;
    color: var(--Neutral-10);
}

.contact-us .section-header .section-info .description {
    color: var(--Neutral-10);
}

.contact-us .socials {
    gap: 16px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.contact-us .socials .item {
    gap: 12px;
    display: flex;
    align-items: center;
}

.contact-us .socials .item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 100px;
    border: 1px solid var(--Neutral-10);
}

.contact-us .socials .item .icon i {
    font-size: 24px;
    color: var(--Neutral-10);
}

.contact-us .socials .item .info {
    gap: 10px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.contact-us .socials .item .info .label {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--Neutral-30);
}

.contact-us .socials .item .info .value {
    font-weight: 500;
    line-height: 24px;
    color: var(--Neutral-10);
}


/* error-page */

.error-page {
    padding: 144px 0;
}

.error-page .code {
    font-size: 48px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Primary-Main);
    margin-bottom: 36px;
}

.error-page .message {
    font-size: 30px;
    font-weight: 400;
    line-height: 24px;
    color: var(--Neutral-100);
}


/* footer */

footer {
    padding-top: 60px;
    padding-bottom: 40px;
    color: var(--Neutral-10);
}

footer a {
    color: var(--Neutral-10);
}

footer .footer-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: var(--Secondary-Main);
}

footer hr {
    color: var(--Primary-Border)!important;
}

footer .footer-coyright {
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: var(--Neutral-10);
}

@media(max-width: 991.98px) {
    footer a {
        font-size: 14px;
    }
    footer .fs-28 {
        font-size: 24px;
    }
    footer .footer-title {
        font-size: 18px;
    }
}

@media print {
    body {
        -webkit-print-color-adjust: exact!important;
    }
    nav {
        display: none!important;
    }
}

.page-break-before {
    page-break-before: always;
}

.page-break-after {
    page-break-after: always;
}