/* User */

.user-select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Opacity */

.opacity-0 {
    opacity: 0;
}
.hover-opacity-0:hover {
    opacity: 0!important;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-100 {
    opacity: 1!important;
}
.hover-opacity-100:hover {
    opacity: 1!important;
}
.hover-opacity-50:hover {
    opacity: .50!important;
}
.hover-opacity-75:hover {
    opacity: .75!important;
}
.hover-opacity-90:hover {
    opacity: .90!important;
}

.brightness-25 {
    filter: brightness(0.25);
}
.filter-brightness-50 {
    filter: brightness(0.5);
}
.filter-brightness-75 {
    filter: brightness(0.75);
}
.filter-brightness-blur {
    filter: brightness(0.75) blur(1px);
}
.filter-hover-none:hover {
    filter: none!important;
}
.filter-grayscale {
    filter: grayscale(1);
}
.filter-grayscale-0-hover:hover {
    filter: grayscale(0);
}

.visibility-hidden {
    visibility: hidden;
}
.visibility-visible {
    visibility: visible;
}

.bg-hover-after {
    position: relative;
    overflow: hidden;
}
.bg-hover-after:after {
    transition: opacity var(--transition-duration) ease-in-out;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition-duration: var(--transition-duration);
    border-radius: 0;
}
.bg-hover-after:hover:after {
    opacity: 0.15;
    z-index: 1;
} 

/* Position */

.pos-absolute {
    position: absolute;
}
.pos-initial {
    position: initial!important;
}
.pos-relative {
    position: relative;
}
.pos-fixed {
    position: fixed;
}
.pos-sticky {
    position: -webkit-sticky;
    position: sticky;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    /* top: var(--header-height); */
    top: 0;
    z-index: 1;
}

/* Display */

.d-none {
    display: none!important;
}
.d-lg-none {
    display: none!important;
}
.d-block {
    display: block;
}

/* Colors */

.bg-border {
    background-color: var(--color-border);
}
.bg-brand {
    background-color: var(--color-brand)!important;
}
.bg-primary {
    background-color: var(--color-primary-bg)!important;
}
.bg-primary-text {
    background-color: var(--color-primary-text)!important;
}
.bg-danger-text {
    background-color: var(--color-danger-text)!important;
}
.bg-warning-text {
    background-color: var(--color-warning-text)!important;
}
.bg-success-text {
    background-color: var(--color-success-text)!important;
}
.bg-danger {
    background-color: var(--color-danger-bg)!important;
}
.bg-success {
    background-color: var(--color-success-bg)!important;
}
.bg-warning {
    background-color: var(--color-warning-bg)!important;
}
.bg-text {
    background-color: var(--text-dark)!important;
}
.bg-text-hover:hover {
    background-color: var(--text-dark)!important;
}
.bg-secondary-button { 
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.bg-secondary {
    background-color: var(--color-secondary)!important;
}
.bg-secondary-hover:hover {
    background-color: var(--color-secondary)!important;
}
.bg-secondary-active:active {
    background-color: var(--color-secondary)!important;
}
.bg-tertiary-hover:hover {
    background-color: var(--color-tertiary)!important;
}
.bg-danger-hover:hover {
    background-color: var(--color-danger)!important;
}
.bg-success-hover:hover {
    background-color: var(--color-success)!important;
}
.bg-warning-hover:hover {
    background-color: var(--color-warning)!important;
}
.bg-tertiary {
    background-color: var(--color-tertiary);
}
.bg-transparent {
    background-color: transparent;
}
.bg-main {
    background-color: var(--color-main)!important;
}
.bg-main-hover:hover {
    background-color: var(--color-main)!important;
}
.bg-dark {
    background-color: var(--text-dark);
}
.bg-light {
    background-color: var(--text-light);
}
.bg-white {
    background-color: #fff;
}
.bg-black {
    background-color: #000;
}
.bg-backdrop-blur {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.85);
}
.bg-disabled {
    background-color: var(--color-border);
    /* opacity: 0.8; */
    cursor: not-allowed;
    background-size: 6px 6px;
    background-image: repeating-linear-gradient(45deg, var(--color-border) 0, var(--color-border) 1px, var(--text-light) 0, var(--text-light) 50%);
}
.mask-image-100 {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 100%);
}
.mask-image-bottom {
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 50%);
    mask-image: linear-gradient(0deg, transparent, #000 50%);
}
.mask-image-bottom-100 {
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 100%);
    mask-image: linear-gradient(0deg, transparent, #000 100%);
}
.bg-unavailable {
    /* background-color: var(--color-overlay); */
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, var(--color-overlay) 0, var(--color-overlay) 1px, var(--color-overlay) 0, var(--color-overlay) 50%);
}
.mask-right {
    -webkit-mask: linear-gradient(90deg, black 30%, transparent 100%);
            mask: linear-gradient(90deg, black 30%, transparent 100%);
}
.mask-left {
    -webkit-mask: linear-gradient(270deg, black 30%, transparent 100%);
            mask: linear-gradient(270deg, black 30%, transparent 100%);
}
.mask-top {
    -webkit-mask: linear-gradient(0deg, black 30%, transparent 100%);
            mask: linear-gradient(0deg, black 30%, transparent 100%);
}
.mask-bottom {
    -webkit-mask: linear-gradient(180deg, black 30%, transparent 100%);
            mask: linear-gradient(180deg, black 30%, transparent 100%);
}
.tag-brand svg {
    fill: var(--color-brand-text);
}
.tag-brand {
    border-color: var(--color-brand-bg)!important;
    background-color: var(--color-brand-bg);
    color: var(--color-brand-text);
}
.tag-brand-filled svg {
    fill: var(--text-light)!important;
}
.tag-brand-filled {
    border-color: var(--color-brand)!important;
    background-color: var(--color-brand);
    color: var(--text-light)!important;
}
.tag-primary svg {
    fill: rgb(var(--color-general-primary-text))!important;
}
.tag-primary {
    border-color: rgb(var(--color-general-primary-border))!important;
    background-color: rgb(var(--color-general-primary-bg));
    color: rgb(var(--color-general-primary-text));
}
.tag-danger svg {
    fill: rgb(var(--color-general-danger-text))!important;
}
.tag-danger {
    border-color: rgb(var(--color-general-danger-border))!important;
    background-color: rgb(var(--color-general-danger-bg));
    color: rgb(var(--color-general-danger-text));
}
.tag-warning svg {
    fill: rgb(var(--color-general-warning-text))!important;
}
.tag-warning {
    border-color: rgb(var(--color-general-warning-border))!important;
    background-color: rgb(var(--color-general-warning-bg));
    color: rgb(var(--color-general-warning-text));
}
.tag-secondary svg {
    fill: rgb(var(--color-general-secondary-text))!important;
}
.tag-text {
    border-color: var(--text-dark)!important;
    background-color: var(--text-dark);
    color: var(--text-light);
}
.tag-text svg {
    fill: var(--text-light)!important;
}
.tag-secondary {
    border-color: rgb(var(--color-general-secondary-border))!important;
    background-color: rgb(var(--color-general-secondary-bg));
    color: rgb(var(--color-general-secondary-text));
}
.tag-success svg {
    fill: rgb(var(--color-general-success-text))!important;
    color: rgb(var(--color-general-success-text))!important;
}
.tag-success {
    border-color: rgb(var(--color-general-success-text))!important;
    background-color: rgb(var(--color-general-success-bg));
    color: rgb(var(--color-general-success-text));
}
.tag-color-1 svg {
    fill: var(--color-1-text)!important;
}
.tag-color-1 {
    background-color: var(--color-1-bg);
    color: var(--color-1-text);
    border-color: var(--color-1-border)!important;
}
.tag-color-2 svg {
    fill: var(--color-2-text)!important;
}
.tag-color-2 {
    background-color: var(--color-2-bg);
    color: var(--color-2-text);
    border-color: var(--color-2-border)!important;
}
.tag-color-3 svg {
    fill: var(--color-3-text)!important;
}
.tag-color-3 {
    background-color: var(--color-3-bg);
    color: var(--color-3-text);
    border-color: var(--color-3-border)!important;
}
.tag-color-7 svg {
    fill: var(--color-7-text)!important;
}
.tag-color-7 {
    background-color: var(--color-7-bg);
    color: var(--color-7-text);
    border-color: var(--color-7-border)!important;
}
.tag-color-4 svg {
    fill: var(--color-4-text)!important;
}
.tag-color-4 {
    background-color: var(--color-4-bg);
    color: var(--color-4-text);
    border-color: var(--color-4-border)!important;
}
.tag-color-5 svg {
    fill: var(--color-5-text)!important;
}
.tag-color-5 {
    background-color: var(--color-5-bg);
    color: var(--color-5-text);
    border-color: var(--color-5-border)!important;
}
.tag-color-6 svg {
    fill: var(--color-6-text)!important;
}
.tag-color-6 {
    background-color: var(--color-6-bg);
    color: var(--color-6-text);
    border-color: var(--color-6-border)!important;
}
.tag-color-7 svg {
    fill: var(--color-7-text)!important;
}
.tag-color-7 {
    background-color: var(--color-7-bg);
    color: var(--color-7-text);
    border-color: var(--color-7-border)!important;
}
.tag-color-8 svg {
    fill: var(--color-8-text)!important;
}
.tag-color-8 {
    background-color: var(--color-8-bg);
    color: var(--color-8-text);
    border-color: var(--color-8-border)!important;
}
.tag-color-9 svg {
    fill: var(--color-9-text)!important;
}
.tag-color-9 {
    background-color: var(--color-9-bg);
    color: var(--color-9-text);
    border-color: var(--color-9-border)!important;
}
.tag-color-10 svg {
    fill: var(--color-10-text)!important;
}
.tag-color-10 {
    background-color: var(--color-10-bg);
    color: var(--color-10-text);
    border-color: var(--color-10-border)!important;
}
.tag-color-11 svg {
    fill: var(--color-11-text)!important;
}
.tag-color-11 {
    background-color: var(--color-11-bg);
    color: var(--color-11-text);
    border-color: var(--color-11-border)!important;
}
.tag-color-12 svg {
    fill: var(--color-12-text)!important;
}
.tag-color-12 {
    background-color: var(--color-12-bg);
    color: var(--color-12-text);
    border-color: var(--color-12-border)!important;
}

/* User colors */
.bg-color-1 {
    background-color: var(--color-1-bg);
}
.bg-color-2 {
    background-color: var(--color-2-bg);
}
.bg-color-3 {
    background-color: var(--color-3-bg);
}
.bg-color-4 {
    background-color: var(--color-4-bg);
}
.bg-color-5 {
    background-color: var(--color-5-bg);
}
.bg-color-6 {
    background-color: var(--color-6-bg);
}
.bg-color-7 {
    background-color: var(--color-7-bg);
}
.bg-color-8 {
    background-color: var(--color-8-bg);
}
.bg-color-9 {
    background-color: var(--color-9-bg);
}
.bg-color-10 {
    background-color: var(--color-10-bg);
}
.bg-color-11 {
    background-color: var(--color-11-bg);
}

.text-color-1 {
    color: var(--color-1-text);
}
.text-color-2 {
    color: var(--color-2-text);
}
.text-color-3 {
    color: var(--color-3-text);
}
.text-color-4 {
    color: var(--color-4-text);
}
.text-color-5 {
    color: var(--color-5-text);
}
.text-color-6 {
    color: var(--color-6-text);
}
.text-color-7 {
    color: var(--color-7-text);
}
.text-color-8 {
    color: var(--color-8-text);
}
.text-color-9 {
    color: var(--color-9-text);
}
.text-color-10 {
    color: var(--color-10-text);
}
.text-color-11 {
    color: var(--color-11-text);
}
/* User colors */
.fill-color-1 svg {
    fill: var(--color-1-text)!important;
}
.fill-color-2 svg {
    fill: var(--color-2-text)!important;
}
.fill-color-3 svg {
    fill: var(--color-3-text)!important;
}
.fill-color-4 svg {
    fill: var(--color-4-text)!important;
}
.fill-color-5 svg {
    fill: var(--color-5-text)!important;
}
.fill-color-6 svg {
    fill: var(--color-6-text)!important;
}
.fill-color-7 svg {
    fill: var(--color-7-text)!important;
}
.fill-color-8 svg {
    fill: var(--color-8-text)!important;
}
.fill-color-9 svg {
    fill: var(--color-9-text)!important;
}
.fill-color-10 svg {
    fill: var(--color-10-text)!important;
}
.fill-color-11 svg {
    fill: var(--color-11-text)!important;
}
.fill-brand svg {
    fill: var(--color-brand)!important;
    color: var(--color-brand)!important;
}

.border-color-1 {
    border-color: var(--color-1-border);
}
.border-color-2 {
    border-color: var(--color-2-border);
}
.border-color-3 {
    border-color: var(--color-3-border);
}
.border-color-4 {
    border-color: var(--color-4-border);
}
.border-color-5 {
    border-color: var(--color-5-border);
}
.border-color-6 {
    border-color: var(--color-6-border);
}
.border-color-7 {
    border-color: var(--color-7-border);
}
.border-color-8 {
    border-color: var(--color-8-border);
}
.border-color-9 {
    border-color: var(--color-9-border);
}
.border-color-10 {
    border-color: var(--color-10-border);
}
.border-color-11 {
    border-color: var(--color-11-border);
}


.bg-hover {
    transition-duration: var(--transition-duration);
}
.bg-hover:hover {
    background-color: var(--color-secondary);
}

/* Other */

.outline-none {
    outline: none!important;
}

.border-color {
    border-color: var(--color-border)!important;
}
.border-color-primary {
    border-color: var(--color-primary)!important;
}
.border-color-main {
    border-color: var(--color-main)!important;
}
.border-color-text {
    border-color: var(--text-dark)!important;
}
.StripeElement--focus {
    border-color: var(--text-dark)!important;
    box-shadow: 0px 0px 0 1px var(--text-dark)!important;
}
.border-color-brand {
    border-color: var(--color-brand)!important;
}
.border-bottom-radius-lg {
    border-bottom-left-radius: var(--border-radius-lg)!important;
    border-bottom-right-radius: var(--border-radius-lg)!important;
}
.border-top-radius-lg {
    border-top-left-radius: var(--border-radius-lg)!important;
    border-top-right-radius: var(--border-radius-lg)!important;
}
.border-radius-lg {
    border-radius: var(--border-radius-lg)!important;
}
.border-radius-rounded {
    border-radius: 100px!important;
}
.border-radius {
    border-radius: var(--border-radius)!important;
}
.border-radius-sm {
    border-radius: var(--border-radius-sm)!important;
}
.border-radius-md {
    border-radius: var(--border-radius-md)!important;
}
.border-radius-xs {
    border-radius: var(--border-radius-xs)!important;
}
.border-radius-child-none:hover .hover::before {
    border-radius: 0!important;
}
.border-radius-left-lg {
    border-bottom-left-radius: var(--border-radius-lg)!important;
    border-top-left-radius: var(--border-radius-lg)!important;
}
.border-radius-left-md {
    border-bottom-left-radius: var(--border-radius-md)!important;
    border-top-left-radius: var(--border-radius-md)!important;
}
.border-radius-left {
    border-bottom-left-radius: var(--border-radius)!important;
    border-top-left-radius: var(--border-radius)!important;
}
.border-radius-top-left {
    border-top-left-radius: var(--border-radius)!important;
}
.border-radius-right {
    border-bottom-right-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-radius-right-lg {
    border-bottom-right-radius: var(--border-radius-lg)!important;
    border-top-right-radius: var(--border-radius-lg)!important;
}
.border-top-radius {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-bottom-radius {
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.border-radius-bottom {
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.border-radius-bottom-none {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
.border-radius-top {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-radius-top-none {
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
.border-radius-50 {
    border-radius: 50%;
}
.border-children-none * {
    border: none!important;
}
.border-none {
    border: none!important;
}
.border-dashed {
    border-style: dashed!important;
}
.border-bottom-dashed {
    border-bottom-style: dashed!important;
}
.border-radius-none::before,
.border-radius-none {
    border-radius: 0!important;
}
.b-t-l-r {
    border-top-left-radius: var(--border-radius)!important;
}
.b-t-l-r-none {
    border-top-left-radius: 0!important;
}
.b-t-r-r {
    border-top-right-radius: var(--border-radius)!important;
}
.b-t-r-r-none {
    border-top-right-radius: 0!important;
}
.b-b-r-r {
    border-bottom-right-radius: var(--border-radius)!important;
}
.b-b-r-r-none {
    border-bottom-right-radius: 0!important;
}
.b-b-l-r {
    border-bottom-left-radius: var(--border-radius)!important;
}
.border {
    border: var(--border);
}
.border-bottom {
    border-bottom: 1px solid var(--color-border);
}
.border-top {
    border-top: 1px solid var(--color-border);
}
.border-left {
    border-left: 1px solid var(--color-border);
}
.border-right {
    border-right: 1px solid var(--color-border);
}
.border-bottom-lg {
    border-bottom: 5px solid var(--color-border);
}
.border-top-lg {
    border-top: 5px solid var(--color-border);
}
.border-bottom-0 {
    border-bottom: none!important;
}
.border-top-0 {
    border-top: none!important;
}
.border-left-0 {
    border-left: none!important;
}
.border-right-0 {
    border-right: none!important;
}
.border-spacing-0 {
    border-spacing: 0;
}
.color-border-on-hover-primary {
    transition-duration: var(--transition-duration);
    border-color: var(--color-primary)!important;
}
.color-border-on-hover-primary:hover {
    border-color: var(--color-primary)!important;
}
.color-border-on-hover-text:hover {
    border-color: var(--text-dark)!important;
}
.color-border-on-hover:hover {
    border-color: var(--color-border)!important;
}
.color-border-on-hover-brand:hover {
    border-color: var(--color-brand)!important;
}
.color-border-on-hover-secondary:hover {
    border-color: rgb(var(--color-general-secondary-border))!important;
}
.border-main {
    border-color: var(--color-main)!important;
}
.border-secondary {
    border-color: var(--color-border-secondary)!important;
}
.border-secondary-bg {
    border-color: var(--color-secondary)!important;
}
.border-brand {
    border-color: var(--color-brand)!important;
}
.border-primary {
    border-color: rgb(var(--color-general-primary-border))!important;
}
.border-primary-main {
    border-color: var(--color-primary)!important;
}
.border-warning {
    border-color: rgb(var(--color-general-warning-border))!important;
}
.border-success {
    border-color: rgb(var(--color-general-success-border))!important;
}
.border-success-text {
    border-color: var(--color-success-text)!important;
}
.border-danger {
    border-color: var(--color-danger-bg)!important;
}
.outline {
    outline: var(--border);
}
.outline-w-2 {
    outline-width: 2px!important;
}
.outline-w-3 {
    outline-width: 3px!important;
}
.outline-primary {
    outline: 1px solid var(--color-primary);
}
.outline-main {
    outline: 1px solid var(--color-main);
}
.outline-text {
    outline: 1px solid var(--text-dark);
}
.outline-brand {
    outline: 1px solid var(--color-brand);
}
.outline-success {
    outline: 1px solid rgb(var(--color-general-success-text));
}
.outline-white {
    outline-color: #fff;
}
.border-focus-text:focus-within,
.border-focus-text:focus {
    border-color: var(--text-dark)!important;
}
.border-focus-primary:focus-within,
.border-focus-primary:focus {
    border-color: var(--color-primary-bg)!important;
}

.border-color {
    border-color: var(--border-color);
}
.border-transparent {
    border-color: transparent!important;
}
.border-lg
.border-radius {
    border-radius: var(--border-radius);
}
.border-ts-r {
    border-top-left-radius: var(--border-radius);
}
.border-te-r {
    border-top-right-radius: var(--border-radius);
}
.border-bs-r {
    border-bottom-left-radius: var(--border-radius);
}
.border-be-r {
    border-bottom-right-radius: var(--border-radius);
}
.border-b-r {
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.border-t-r {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

.border-w-1 {
    border-width: 1px;
}
.border-w-2 {
    border-width: 2px!important;
}
.border-w-3 {
    border-width: 3px;
}
.border-w-4 {
    border-width: 4px;
}
.border-w-5 {
    border-width: 5px;
}
.border-w-6 {
    border-width: 6px;
}

.section-divider {
    margin-bottom: 24px;
}

/* iframe */

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animation-none-child * {
    animation: none!important;
}


/* Style */
.box-shadow-xs {
    box-shadow: var(--box-shadow-xs);
}
.box-shadow-sm {
    box-shadow: var(--box-shadow-sm);
}
.box-shadow {
    box-shadow: var(--box-shadow);
}
.box-shadow-lg {
    box-shadow: var(--box-shadow-lg);
}
.filter-shadow {
    filter: drop-shadow(var(--box-shadow));
}

.animation-duration {
    animation-duration: var(--transition-duration);
}
.transition-duration {
    transition-duration: var(--transition-duration);
}
.animation-prevent {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}
.animation-bounce-hover-parent:hover .animation-bounce-hover {
    animation: bounce 1s infinite;
}
.transition-slide-right-hover-parent:hover .transition-slide-right-hover {
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: all var(--transition-duration) cubic-bezier(.165,.84,.44,1);
}
.transition-slide-right-hover {
    right: .5rem;
    transform: translate3d(-.3125rem, 0, 0);
    transition: all var(--transition-duration) cubic-bezier(.165,.84,.44,1);
}
.transition-opacity-hover-parent:hover .transition-opacity-hover {
    opacity: 1;
}
.transition-opacity-hover {
    opacity: 0;
    transition-duration: var(--transition-duration);
}

.transform-rotate-45 {
    transform: rotate(45deg);
}
.transform-rotate-90 {
    transform: rotate(90deg);
}

.transform-rotate-180 {
    transform: rotate(180deg);
}
.transform-none {
    transform: none!important;
}
.pointer {
    cursor: pointer;
}
.pointer-events-none {
    pointer-events: none!important;
}
.cursor-default {
    cursor: default;
}
.cursor-disabled {
    cursor: not-allowed!important;
}
.cursor-text {
    cursor: text;
}


/* Actions */
.box-active:active {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 2px, var(--color-primary) 0px 0px 0px 2px;
}
.box-active-danger:active {
    border-color: var(--color-danger-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-danger-bg) 0px 0px 0px 2px;
}
.box-active-success:active {
    border-color: var(--color-success-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-success-bg) 0px 0px 0px 2px;
}
.box-active-warning:active {
    border-color: var(--color-warning-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-warning-bg) 0px 0px 0px 2px;
}
.box-active-primary:active {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-primary) 0px 0px 0px 2px;
}
.box-active-secondary:active {
    border-color: var(--color-secondary-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-secondary) 0px 0px 0px 2px;
}

.box-action-primary {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-primary) 0px 0px 0px 2px;
}
.box-action-success {
    border-color: var(--color-success-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-success) 0px 0px 0px 2px;
}
.box-action-warning {
    border-color: var(--color-warning-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-warning) 0px 0px 0px 2px;
}
.box-action-danger {
    border-color: var(--color-danger-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-danger) 0px 0px 0px 2px;
}

.display-on-hover-parent .display-on-hover {
    opacity: 0;
    visibility: hidden;
    transition-duration: var(--transition-duration);
}
.display-on-hover-parent:active .display-on-hover,
.display-on-hover-parent:hover .display-on-hover {
    opacity: 1;
    visibility: visible;
}
.hide-on-hover-parent:hover .hide-on-hover {
    display: none;
}
.show-on-hover-parent .show-on-hover{
    display: none;
}
.show-on-hover-parent:hover .show-on-hover {
    display: block;
}
.hover-bg {
    transition-duration: var(--transition-duration);
    cursor: pointer;
}
.hover-bg:hover {
    background-color: var(--color-secondary);
}
.hover {
    cursor: pointer;
    transition-duration: var(--transition-duration);
    position: relative;
    z-index: 1;
}
.bg-disabled.hover::before {
    background-color: transparent!important;
}
.bg-disabled.hover:hover {
    cursor: not-allowed;
}
.bg-overlay {
    background-color: var(--color-overlay);
}
.bg-cover {
    background-size: cover;
}
.bg-contain {
    background-size: contain;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.bg-center {
    background-position: center;
}
.bg-translucent {
    background-color: var(--color-translucent);
}
.bg-translucent-3 {
    background-color: var(--color-translucent-3);
}
.bg-translucent-blur {
    background-color: var(--color-translucent-3);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.bg-translucent-blur-lg {
    background-color: var(--color-translucent-3);
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
}
.backdrop-blur {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.object-cover {
    object-fit: cover;
}
.object-contain {
    object-fit: contain;
}
.object-top {
    object-position: top;
}
.object-right {
    object-position: right;
}
.object-left {
    object-position: left;
}
.object-center {
    object-position: center;
}

.hover::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-secondary, rgba(26,26,26,0.1));
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
    z-index: -1;
    transition-duration: var(--transition-duration);
}
.hover.hover-primary::before {
    background-color: var(--color-primary-bg, rgba(26,26,26,0.1));
}
.active-action.hover-primary:active::before {
    background-color: var(--color-primary-bg-hover, rgba(26,26,26,0.1));
}
.hover.hover-success::before {
    background-color: var(--color-success-bg, rgba(26,26,26,0.1));
}
.active-action.hover-success:active::before {
    background-color: var(--color-success-bg-hover, rgba(26,26,26,0.1));
}
.hover.hover-danger::before {
    background-color: var(--color-danger-bg, rgba(26,26,26,0.1));
}
.active-action.hover-danger:active::before {
    background-color: var(--color-danger-bg-hover, rgba(26,26,26,0.1));
}
.active-action:active::before {
    background-color: var(--color-secondary-hover, rgba(26,26,26,0.1));
}
.hover-none::before {
    background-color: transparent!important;
}
.hover:hover::before {
    opacity: 1;
    transform: scale(1);
}
.hover-border-transparent:hover {
    border-color: transparent!important;
}
.box-shadow-hover-xs,
.box-shadow-hover-sm,
.box-shadow-hover {
    transition-duration: var(--transition-duration);
}
.box-shadow-hover:hover {
    box-shadow: var(--box-shadow);
}
.box-shadow-hover-sm:hover {
    box-shadow: var(--box-shadow-sm);
}
.box-shadow-hover-xs:hover {
    box-shadow: var(--box-shadow-xs);
}
.box-shadow-none {
    box-shadow: none!important;
}
.pointer {
    cursor: pointer;
}
.hover-tertiary {
    cursor: pointer;
    transition-duration: var(--transition-duration);
}
.hover-tertiary:hover {
    background-color: var(--color-tertiary);
}
.clickable {
    cursor: pointer;
    transition-duration: var(--transition-duration);
}
.clickable:active {
    transform: scale(0.99);
}
.opacity-75-active:active {
    opacity: 0.75;
}
.opacity-25-active:active {
    opacity: 0.25!important;
}
.opacity-85-active:active {
    opacity: 0.85!important;
}
.opacity-100-active:active {
    opacity: 1!important;
}
.spinner {
    border: 2px solid transparent;
    border-top: 2px solid var(--text-dark);
    border-right: 2px solid var(--color-secondary);
    border-left: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.5s linear infinite;
}

.reset-parent * {
    padding: revert;
    margin: revert;
}
.force-parent-color * {
    color: var(--text-dark)!important;
}

.overscroll-contain {
    overscroll-behavior: contain;
}

.spinner-animation {
    animation: spinRotate 0.5s linear infinite;
}

.spinner-sm {
    width: 12px;
    height: 12px;
    border-width: 1px;
}

.table-column-left::after {
    content: "";
    height: calc(100% + 1px);
    position: absolute;
    top: -1px;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 5px 0 3px rgba(0,0,0,.1);
    right: -8px;
    width: 8px;
}

.badge {
    width: 24px;
    display: flex;
    height: 24px;
    align-items: center;
    justify-content: center;
    left: -12px;
    top: -12px;
    position: absolute;
    background-color: var(--color-main);
    font-size: 12px;
    border-radius: 50%;
}

.max-avatar {
    max-width: 46px;
    max-height: 46px;
    min-height: 46px;
    min-width: 46px;
    width: 46px;
    height: 46px;
}

.animation-fade-in {
    animation: fade-in 0.3s;
    animation-fill-mode: initial; 
}

.animation-slide-in {
    opacity: 0;
    animation-name: slide-in;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.animation-slide-up {
    opacity: 0;
    animation-name: slide-up;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.animation-slide-down {
    opacity: 0;
    animation-name: slide-down;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.table-rounded tr:first-of-type td:first-of-type {
    border-top-left-radius: var(--border-radius)!important;
}
.table-rounded tr:first-child td:last-child {
    border-top-right-radius: var(--border-radius)!important;
}
.table-rounded tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius);
}
.table-rounded tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
}


.divider-sm {
    display: none;
}

.blinking {
    animation: blinking 1s infinite;
}

.bottom-fade-effect::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0,0,0, 0.5));
}
.hover-hue:hover {
    filter: hue-rotate(45deg);
}
.blur-20 {
    filter: blur(20px);
}

.top-fade-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(0,0,0, 0.5));
}

.text-wrap-nowrap {
    text-wrap: nowrap;
}

.arrow-bottom {
    position: relative;
}
.arrow-bottom:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    transform: translateX(calc(-50% - 4px));
    border-top: 8px solid var(--color-primary);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.indicator-danger {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-danger-text);
}

.indicator-success {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-success-text);
}

.indicator-warning {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-warning-text);
}

.text-link-warning {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-warning-text);
}
.text-link-warning:hover {
    color: var(--text-light);
    background-color: var(--color-warning-text);
}

.text-link-danger {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-danger-text);
}
.text-link-danger:hover {
    color: var(--text-light);
    background-color: var(--color-danger-text);
}

.text-link-secondary {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--text-dark);
}
.text-link-secondary:hover {
    color: var(--text-light);
    background-color: var(--text-dark);
}

@keyframes blinking {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spinRotate {
    100% {
        transform: rotate(1turn);
    }
}

@media (max-width: 600px) {
    .border-radius-md-none {
        border-radius: 0!important;
    }
    .border-md-none {
        border: none!important;
    }
    .d-md-none {
        display: none!important;
    }
}

@media (max-width: 800px) {
    .d-sm-none {
        display: none!important;
    }
    .d-lg-none {
        display: block!important;
    }
    .border-sm-none {
        border: none!important;
    }
    .border-sm-bottom {
        border:  none;
        border-bottom: 1px solid var(--color-border);
    }
    .border-sm-top {
        border:  none;
        border-top: 1px solid var(--color-border);
    }
    .border-radius-sm-none {
        border-radius: 0!important;
    }
    .border-radius-sm-top-none {
        border-top-left-radius: 0!important;
        border-top-right-radius: 0!important;
    }
    .border-radius-sm-lg {
        border-radius: var(--border-radius-lg)!important;
    }
    .border-radius-sm-md {
        border-radius: var(--border-radius)!important;
    }
    .border-sm-x-none {
        border-left: none!important;
        border-right: none!important;
    }
    .border-sm-bottom-none {
        border-bottom: none!important;
    }
    .border-sm-top-none {
        border-top: none!important;
    }
    .bg-sm-tertiary {
        background-color: var(--color-tertiary);
    }
    .section-divider {
        margin-bottom: 0;
        border-bottom: 12px solid var(--color-secondary);
    }
    .border-sm-w-1 {
        border-width: 1px!important;
    }
    .sticky-sm {
        position: -webkit-sticky;
        position: sticky;
        top: var(--header-sm-height);
        z-index: 1;
    }
    .sticky-sm-inital {
        position: initial!important;
        top: unset;
        z-index: unset;
    }

    .bg-sm-main {
        background-color: var(--color-main)!important;
    }
    .bg-sm-secondary {
        background-color: var(--color-secondary)!important;
    }

    .divider-sm {
        display: block;
        height: 12px;
        background-color: var(--color-secondary);
    }

    .pos-sm-absolute {
        position: absolute;
    }
    .pos-sm-initial {
        position: initial!important;
    }
    .pos-sm-relative {
        position: relative;
    }
    .pos-sm-fixed {
        position: fixed;
    }
    .pos-sm-sticky {
        position: -webkit-sticky;
        position: sticky;
    }

    .sm-visible {
        visibility: visible!important;
        opacity: 1!important;
    }

    .box-shadow-sm-none {
        box-shadow: none!important;
    }

    .display-on-hover-parent .display-on-hover.display-on-hover-sm-block {
        opacity: 1;
        visibility: visible;
    }

    .sticky-bottom-sm {
        position: -webkit-sticky;
        position: sticky;
        /* bottom: 52px; */
        bottom: 0;
        z-index: 3;
    }
}
/* Grid */
.grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Flex */

.flex {
    display: flex!important;
}

.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-no-wrap {
    flex-wrap: nowrap;
}

.gap-0 {
    grid-gap: 0rem;
    gap: 0rem;
}
.gap-xs {
    grid-gap: 0.125rem;
    gap: 0.125rem;
}
.gap-1 {
    grid-gap: 0.25rem;
    gap: 0.25rem;
}
.gap-2 {
    grid-gap: 0.5rem;
    gap: 0.5rem;
}
.gap-3 {
    grid-gap: 0.75rem;
    gap: 0.75rem;
}
.gap-4 {
    grid-gap: 1rem;
    gap: 1rem;
}
.gap-5 {
    grid-gap: 1.5rem;
    gap: 1.5rem;
}
.gap-6 {
    grid-gap: 3rem;
    gap: 3rem;
}

.flex-grow-1 {
    flex-grow: 1;
}
.flex-grow-2 {
    flex-grow: 2;
}
.flex-grow-3 {
    flex-grow: 3;
}
.flex-grow-4 {
    flex-grow: 4;
}
.flex-grow-5 {
    flex-grow: 5;
}
.flex-grow-6 {
    flex-grow: 6;
}
.flex-shrink-0 {
    flex-shrink: 0!important;
}
.flex-shrink-1 {
    flex-shrink: 1!important;
}
.flex-shrink-2 {
    flex-shrink: 2;
}

.col-12 {
    max-width: 100%;
    flex: 100% 1;
}
.col-11 {
    max-width: 91.666667%;
    flex: 91.666667% 1;
}
.col-10 {
    max-width: 83.333333%;
    flex: 83.333333% 1;
}
.col-9 {
    max-width: 75%;
    flex: 75% 1;
}
.col-8 {
    max-width: 66.666667%;
    flex: 66.666667% 1;
}
.col-7 {
    max-width: 58.333333%;
    flex: 58.333333% 1;
}
.col-6 {
    max-width: 50%;
    flex: 50% 1;
}
.col-5 {
    max-width: 41.666667%;
    flex: 41.666667% 1;
}
.col-4 {
    max-width: 33.333333%;
    flex: 33.333333% 1;
}
.col-3 {
    max-width: 25%;
    flex: 25% 1;
}
.col-2 {
    max-width: 16.666667%;
    flex: 16.666667% 1;
}
.col-1 {
    max-width: 8.333333%;
    flex: 8.333333% 1;
}

.flex-0 {
    flex: 0 1;
}
.flex-auto {
    flex: auto;
}
.flex-fill {
    flex: 0 0 100%;
}
.flex-1 {
    flex: 1 1;
}
.flex-2 {
    flex: 2 1;
}

/* Align */
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-center {
    justify-content: center!important;
}
.justify-end {
    justify-content: flex-end;
}
.justify-start {
    justify-content: flex-start!important;
}

.align-center {
    align-items: center;
}
.align-base {
    align-items: baseline;
}
.align-end {
    align-items: flex-end;
}
.align-start {
    align-items: flex-start;
}

.self-center {
    align-self: center;
}
.self-end {
    align-self: flex-end;
}

/* Window */

.top-0 {
    top: 0;
}
.top-48px {
    top: 48px;
}
.top-header {
    top: var(--header-height);
}
.bottom-0 {
    bottom: 0;
}
.bottom-container {
    bottom: calc(var(--p-container-content) * 3);
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}

.z-999 {
    z-index: 999!important;
}
.z-99 {
    z-index: 99;
}
.z-10 {
    z-index: 10;
}
.z-9 {
    z-index: 9;
}
.z-8 {
    z-index: 8;
}
.z-7 {
    z-index: 7;
}
.z-4 {
    z-index: 4;
}
.z-3 {
    z-index: 3;
}
.z-2 {
    z-index: 2;
}
.z-1 {
    z-index: 1;
}
.z-0 {
    z-index: 0;
}

.scrollbar-on-hover::-webkit-scrollbar {
    display: none;
}
.scrollbar-on-hover:hover::-webkit-scrollbar {
    display: block;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Overflow */
.overflow-visible {
    overflow: visible;
}
.overflow-unset {
    overflow: unset!important;
}
.overflow-x-scroll {
    overflow-x: scroll;
}
.overflow-hidden {
    overflow: hidden!important;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-y-scroll {
    overflow-y: scroll;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-y-initial {
    overflow-y: initial;
}
.overflow-y-visible {
    overflow-y: visible;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.scrollbar-none::-webkit-scrollbar {
    padding: 0!important;
    height: 0!important;
    max-height: 0!important;
    max-width: 0!important;
}
.scrollbar-lg::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    scroll-padding: 0!important;
}
.scrollbar-lg::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-general-secondary-border))!important;
    border-color: var(--color-border)!important;
    scroll-padding: 0!important;
}

.max-h-order-page {
    max-height: calc(100vh - var(--header-height) - 49px - 70px);
}
*::-webkit-scrollbar-corner {
    background-color: transparent;
}

@media (max-width: 1400px) {
    .grid-xl-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-xl-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-xl-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-xl-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-xl-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-xl-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-xl-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .gap-xl-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-xl-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-xl-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-xl-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-xl-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-xl-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-xl-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-xl-between {
        justify-content: space-between!important;
    }
    .justify-xl-center {
        justify-content: center!important;
    }
    .justify-xl-start {
        justify-content: flex-start!important;
    }
    .justify-xl-end {
        justify-content: flex-end!important;
    }
    .align-xl-between {
        align-content: space-between!important;
    }
    .align-xl-center {
        align-content: center!important;
    }
    .align-xl-start {
        align-content: flex-start!important;
    }
    .align-xl-end {
        align-content: flex-end!important;
    }
}

@media (max-width: 1200px) {
    .grid-lg-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-lg-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-lg-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-lg-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-lg-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-lg-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-lg-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .gap-lg-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-lg-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-lg-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-lg-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-lg-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-lg-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-lg-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-lg-between {
        justify-content: space-between!important;
    }
    .justify-lg-center {
        justify-content: center!important;
    }
    .justify-lg-start {
        justify-content: flex-start!important;
    }
    .justify-lg-end {
        justify-content: flex-end!important;
    }
    .align-lg-between {
        align-content: space-between!important;
    }
    .align-lg-center {
        align-content: center!important;
    }
    .align-lg-start {
        align-content: flex-start!important;
    }
    .align-lg-end {
        align-content: flex-end!important;
    }
}

@media (max-width: 600px) {
    .flex-md-col {
        flex-direction: column;
    }
    .flex-md-grow-1 {
        flex-grow: 1;
    }
    .flex-md-wrap {
        flex-wrap: wrap;
    }
    .order-md-1 {
        order: 1;
    }
    .order-md-2 {
        order: 2;
    }
    .order-md-3 {
        order: 3;
    }
    .grid-md-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-md-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .col-md-12 {
        max-width: 100%!important;
        flex: 100% 1!important;
    }
    .col-md-8 {
        max-width: 66.666667%!important;
        flex: 66.666667% 1!important;
    }
    .col-md-6 {
        max-width: 50%!important;
        flex: 50% 1!important;
    }
    .col-md-4 {
        max-width: 33.333333%!important;
        flex: 33.333333% 1!important;
    }
    .col-md-3 {
        max-width: 25%!important;
        flex: 25% 1!important;
    }

    .gap-md-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-md-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-md-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-md-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-md-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-md-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-md-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-md-between {
        justify-content: space-between!important;
    }
    .justify-md-center {
        justify-content: center!important;
    }
    .justify-md-start {
        justify-content: flex-start!important;
    }
    .justify-md-end {
        justify-content: flex-end!important;
    }
    .align-md-between {
        align-content: space-between!important;
    }
    .align-md-center {
        align-content: center!important;
    }
    .align-md-start {
        align-content: flex-start!important;
    }
    .align-md-end {
        align-content: flex-end!important;
    }

    .grid-md-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-md-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-md-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-md-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-md-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-md-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-md-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .top-sm-unset {
        top: unset!important;
    }
    .top-sm-0 {
        top: 0!important;
    }
    .flex-sm {
        display: flex!important;
    }
    .flex-sm-col {
        flex-direction: column!important;
    }
    .flex-sm-row {
        flex-direction: row;
    }

    .col-sm-12 {
        max-width: 100%!important;
        /* flex: 100%!important; */
    }
    .col-sm-11 {
        max-width: 91.666667%!important;
        /* flex: 91.666667%!important; */
    }
    .col-sm-10 {
        max-width: 83.333333%!important;
        /* flex: 83.333333%!important; */
    }
    .col-sm-9 {
        max-width: 75%!important;
        /* flex: 75%!important; */
    }
    .col-sm-8 {
        max-width: 66.666667%!important;
        /* flex: 66.666667%!important; */
    }
    .col-sm-7 {
        max-width: 58.333333%!important;
        /* flex: 58.333333%!important; */
    }
    .col-sm-6 {
        max-width: 50%!important;
        /* flex: 50%!important; */
    }
    .col-sm-5 {
        max-width: 41.666667%!important;
        /* flex: 41.666667%!important; */
    }
    .col-sm-4 {
        max-width: 33.333333%!important;
        /* flex: 33.333333%!important; */
    }
    .col-sm-3 {
        max-width: 25%!important;
        /* flex: 25%!important; */
    }
    .col-sm-2 {
        max-width: 16.666667%!important;
        /* flex: 16.666667%!important; */
    }
    .col-sm-1 {
        max-width: 8.333333%!important;
        /* flex: 8.333333%!important; */
    }
    .col-sm-unset {
        max-width: unset!important;
        flex: unset!important;
    }

    .order-sm-1 {
        order: 1;
    }
    .order-sm-2 {
        order: 2;
    }
    .order-sm-3 {
        order: 3;
    }

    .gap-sm-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-sm-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-sm-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-sm-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-sm-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-sm-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-sm-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .flex-grow-sm-0 {
        flex-grow: 0!important;
    }
    .flex-grow-sm-1 {
        flex-grow: 1;
    }

    .flex-dir-row-col {
        flex-direction: column;
    }

    .flex-sm-wrap {
        flex-wrap: wrap;
    }
    .flex-sm-no-wrap {
        flex-wrap: nowrap!important;
    }

    .grid-sm-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-sm-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-sm-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-sm-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-sm-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-sm-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-sm-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .justify-sm-between {
        justify-content: space-between;
    }
    .justify-sm-center {
        justify-content: center;
    }
    .justify-sm-end {
        justify-content: flex-end;
    }
    .justify-sm-start {
        justify-content: flex-start!important;
    }

    .align-sm-center {
        align-items: center;
    }
    .align-sm-end {
        align-items: flex-end;
    }
    .align-sm-start {
        align-items: flex-start;
    }
    .z-sm-3 {
        z-index: 3;
    }
    .overflow-y-sm-auto {
        overflow-y: auto!important;
    }
    .overflow-sm-unset {
        overflow: unset!important;
    }

    .max-h-order-page {
        max-height: calc(100vh - var(--header-height));
    }

    .bottom-sm-nav {
        bottom: calc(var(--nav-sm-height) + env(safe-area-inset-bottom)); /* Safe area for iPhone X */
    }
    .bottom-sm-0 {
        bottom: env(safe-area-inset-bottom)!important; /* Safe area for iPhone X */
    }
    .top-header {
        top: var(--header-sm-height);
    }

    .d-sm-block {
        display: block!important;
    }
    .flex-sm-none {
        flex: none;
    }
}

/* Margin */

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-0 {
    margin: 0!important;
}
.m-xs {
    margin: 0.125rem;
}
.m-1 {
    margin: 0.25rem;
}
.m-2 {
    margin: 0.5rem;
}
.m-3 {
    margin: 1rem;
}
.m-4 {
    margin: 1rem;
}
.m-5 {
    margin: 1.5rem;
}
.m-6 {
    margin: 3rem;
}

.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.5rem;
}
.mt-6 {
    margin-top: 3rem;
}

.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.5rem;
}
.mb-6 {
    margin-bottom: 3rem;
}

.ms-0 {
    margin-left: 0;
}
.ms-1 {
    margin-left: 0.25rem;
}
.ms-2 {
    margin-left: 0.5rem;
}
.ms-3 {
    margin-left: 0.75rem;
}
.ms-4 {
    margin-left: 1rem;
}
.ms-5 {
    margin-left: 1.5rem;
}
.ms-6 {
    margin-left: 3rem;
}

.me-0 {
    margin-right: 0;
}
.me-1 {
    margin-right: 0.25rem;
}
.me-2 {
    margin-right: 0.5rem;
}
.me-3 {
    margin-right: 0.75rem;
}
.me-4 {
    margin-right: 1rem;
}
.me-5 {
    margin-right: 1.5rem;
}
.me-6 {
    margin-right: 3rem;
}

.mx-0 {
    margin-right: 0;
    margin-left: 0;
}
.mx-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}
.mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}
.mx-3 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}
.mx-4 {
    margin-right: 1rem;
    margin-left: 1rem;
}
.mx-5 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}
.mx-6 {
    margin-right: 3rem;
    margin-left: 3rem;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-5 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-6 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.mt-lg-4 {
    margin-top: 1rem;
}
.mt-lg-5 {
    margin-top: 1.5rem;
}
.me-lg-5 {
    margin-right: 1.5rem;
}
.mt-lg-2 {
    margin-top: 0.5rem;
}
.mt-lg-3 {
    margin-top: 0.75rem;
}
.mb-lg-2 {
    margin-bottom: 0.5rem;
}

/* Padding */

.pt-container {
    padding-top: var(--p-container);
}
.pt-header {
    padding-top: var(--header-height);
}
.pt-container {
    padding-top: var(--p-container)
}
.p-0 {
    padding: 0!important;
}
.p-xs {
    padding: 0.125rem;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.5rem;
}
.p-6 {
    padding: 3rem;
}

.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.5rem;
}
.pt-6 {
    padding-top: 3rem;
}

.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-5 {
    padding-bottom: 1.5rem;
}
.pb-6 {
    padding-bottom: 3rem;
}

.ps-0 {
    padding-left: 0;
}
.ps-1 {
    padding-left: 0.25rem;
}
.ps-2 {
    padding-left: 0.5rem;
}
.ps-3 {
    padding-left: 0.75rem;
}
.ps-4 {
    padding-left: 1rem;
}
.ps-5 {
    padding-left: 1.5rem;
}
.ps-6 {
    padding-left: 3rem;
}

.pe-0 {
    padding-right: 0;
}
.pe-1 {
    padding-right: 0.25rem;
}
.pe-2 {
    padding-right: 0.5rem;
}
.pe-3 {
    padding-right: 0.75rem;
}
.pe-4 {
    padding-right: 1rem;
}
.pe-5 {
    padding-right: 1.5rem;
}
.pe-6 {
    padding-right: 3rem;
}

.px-0 {
    padding-right: 0!important;
    padding-left: 0!important;
}
.px-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}
.px-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-3 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.px-4 {
    padding-right: 1rem;
    padding-left: 1rem;
}
.px-5 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.px-6 {
    padding-right: 3rem;
    padding-left: 3rem;
}
.px-lg-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-lg-3 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.px-lg-4 {
    padding-right: 1rem;
    padding-left: 1rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* Width \ Height */

.h-0-px {
    height: 0px;
}
.h-0 {
    height: 0%;
}
.h-25 {
    height: 25%;
}
.h-50 {
    height: 50%;
}
.h-75 {
    height: 75%;
}
.h-100 {
    height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top))!important;
}
.h-100dvh {
    height: 100dvh;
}
.h-fit-content {
    height: -moz-fit-content;
    height: fit-content;
}
.h-auto {
    height: auto;
}
.h-min-100 {
    min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}
.h-100-header {
    height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-min-100-header {
    min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-max-100-header {
    max-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-min-100-vh {
    min-height: 100vh;
}
.h-min-50-vh {
    min-height: 50vh;
}
.h-min-100-pct {
    min-height: 100%;
}
.h-min-100-px {
    min-height: 100px;
}
.h-min-150-px {
    min-height: 150px;
}
.h-min-200-px {
    min-height: 200px;
}
.h-min-300-px {
    min-height: 300px!important;
}
.h-min-350-px {
    min-height: 350px!important;
}
.h-min-400-px {
    min-height: 400px!important;
}
.h-max-100-vh-content {
    max-height: calc(100vh - env(safe-area-inset-bottom));
}
.h-max-100 {
    max-height: 100vh;
}
.h-max-50-vh {
    max-height: 50vh;
}
.h-max-75-vh {
    max-height: 75vh;
}
.h-max-100-px {
    max-height: 100px;
}
.h-max-150-px {
    max-height: 150px;
}
.h-max-200-px {
    max-height: 200px;
}
.h-max-300-px {
    max-height: 300px!important;
}
.h-max-350-px {
    max-height: 350px!important;
}
.h-max-400-px {
    max-height: 400px!important;
}
.h-max-500-px {
    max-height: 500px!important;
}
.h-max-600-px {
    max-height: 600px!important;
}
.h-max-700-px {
    max-height: 700px!important;
}
.h-max-800-px {
    max-height: 800px!important;
}
.h-max-inherit {
    max-height: inherit!important;
}

.h-min-45-px {
    min-height: 45px;
}

.h-set-30-px {
    min-height: 30px;
    max-height: 30px;
    height: 30px;
}
.h-set-45-px {
    min-height: 45px;
    max-height: 45px;
    height: 45px;
}
.h-set-50-px {
    min-height: 50px;
    max-height: 50px;
    height: 50px;
}
.h-set-75-px {
    min-height: 75px;
    max-height: 75px;
    height: 75px;
}
.h-set-100-px {
    min-height: 100px;
    max-height: 100px;
    height: 100px;
}
.h-set-130-px {
    min-height: 130px;
    max-height: 130px;
    height: 130px;
}
.h-set-150-px {
    min-height: 150px;
    max-height: 150px;
    height: 150px;
}
.h-set-20-px {
    min-height: 20px;
    max-height: 20px;
    height: 20px;
}
.h-set-25-px {
    min-height: 25px;
    max-height: 25px;
    height: 25px;
}
.h-set-200-px {
    min-height: 200px;
    max-height: 200px;
    height: 200px;
}
.h-set-250-px {
    min-height: 250px;
    max-height: 250px;
    height: 250px;
}
.h-set-300-px {
    min-height: 300px;
    max-height: 300px;
    height: 300px;
}
.h-set-50-vh {
    min-height: 50vh;
    max-height: 50vh;
    height: 50vh;
}
.h-set-350-px {
    min-height: 350px;
    max-height: 350px;
    height: 350px;
}
.h-set-400-px {
    min-height: 400px;
    max-height: 400px;
    height: 400px;
}

.w-0-px {
    width: 0px;
}
.w-0 {
    width: 0%;
}
.w-25 {
    width: 25%;
}
.w-50 {
    width: 50%;
}
.w-75 {
    width: 75%;
}
.w-100 {
    width: 100%;
}
.w-max-0 {
    width: 0%;
}
.w-max-25 {
    max-width: 25%;
}
.w-max-50 {
    max-width: 50%;
}
.w-max-75 {
    max-width: 75%;
}
.w-max-100 {
    max-width: 100%;
}
.w-max-100vw {
    max-width: 100vw;
}
.w-auto {
    width: auto;
}
.w-min-100 {
    min-width: 100%;
}
.w-min-0 {
    min-width: 0;
}
.w-min-25-px {
    min-width: 25px;
}
.w-min-30-px {
    min-width: 30px;
}
.w-min-45-px {
    min-width: 45px;
}
.w-min-75-px {
    min-width: 75px;
}
.w-min-100-px {
    min-width: 100px;
}
.w-min-150-px {
    min-width: 150px;
}
.w-min-200-px {
    min-width: 200px;
}
.w-min-250-px {
    min-width: 250px;
}
.w-min-300-px {
    min-width: 300px;
}
.w-min-500-px {
    min-width: 500px;
}
.w-min-600-px {
    min-width: 600px;
}
.w-min-700-px {
    min-width: 700px;
}
.w-min-1000-px {
    min-width: 1000px;
}
.w-min-1100-px {
    min-width: 1100px;
}
.w-min-1400-px {
    min-width: 1400px;
}
.w-min-2400-px {
    min-width: 2400px;
}

.w-available {
    width: -webkit-fill-available;
    width: fill-available;
}
.w-max-content {
    width: max-content;
}
.w-fit-content {
    width: -moz-fit-content;
    width: fit-content;
}

.min-w-100 {
    min-width: 100%;
}
.min-w-75 {
    min-width: 75%;
}
.min-w-50 {
    min-width: 50%;
}
.min-w-25 {
    min-width: 25%;
}

.w-min-0 {
    min-width: 0;
}
.h-10 {
    height: 2.5rem;
}
.w-10 {
    width: 2.5rem;
    max-width: 2.5rem;
    min-width: 2.5rem;
}
.w-50-px {
    width: 50px;
}
.w-min-50-px {
    min-width: 50px;
}
.w-max-25-px {
    max-width: 25px;
}
.w-max-50-px {
    max-width: 50px;
}
.w-max-75-px {
    max-width: 75px;
}
.w-max-100-px {
    max-width: 100px!important;
}
.w-max-125-px {
    max-width: 125px;
}
.w-max-150-px {
    max-width: 150px;
}
.w-max-200-px {
    max-width: 200px;
}
.w-max-250-px {
    max-width: 250px;
}
.w-max-300-px {
    max-width: 300px;
}
.w-max-150-px {
    max-width: 150px;
}
.w-200-px {
    width: 200px;
}
.w-min-200-px {
    min-width: 200px;
}
.w-max-200-px {
    max-width: 200px;
}
.w-max-400-px {
    max-width: 400px;
}
.w-max-500-px {
    max-width: 500px;
}
.w-max-600-px {
    max-width: 600px;
}
.w-max-700-px {
    max-width: 700px;
}
.w-max-800-px {
    max-width: 800px;
}
.w-max-1000-px {
    max-width: 1000px;
}
.w-set-0-px {
    width: 0px;
    min-width: 0px;
    max-width: 0px;
}
.w-set-150-px {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}
.w-set-200-px {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}
.w-set-225-px {
    width: 225px;
    min-width: 225px;
    max-width: 225px;
}
.w-set-250-px {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}
.w-set-300-px {
    width: auto;
    min-width: 300px;
    max-width: 300px;
}
.w-set-350-px {
    width: auto;
    min-width: 350px;
    max-width: 350px;
}
.w-set-400-px {
    width: auto;
    min-width: 400px;
    max-width: 400px;
}
.w-set-500-px {
    width: auto;
    min-width: 500px;
    max-width: 500px;
}
.w-max-default {
    max-width: var(--w-max-default, 100%);
    width: 100%;
}
.w-max-md {
    max-width: var(--w-max-md, 100%);
    width: 100%;
}
.w-max-sm {
    max-width: var(--w-max-sm, 100%);
    width: 100%;
}
.w-max-xl {
    max-width: var(--w-max-xl);
}
.w-max-lg {
    max-width: var(--w-max-lg, 100%);
    width: 100%;
}
.w-set-auto {
    width: auto!important;
    min-width: auto!important;
    max-width: unset!important;
}


.w-set-10-px {
    width: 10px;
    max-width: 10px;
    min-width: 10px;
}
.w-set-20-px {
    width: 20px;
    max-width: 20px;
    min-width: 20px;
}
.w-set-25-px {
    width: 25px;
    max-width: 25px;
    min-width: 25px;
}
.w-set-30-px {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
}
.w-set-50-px {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}
.w-set-75-px {
    width: 75px!important;
    max-width: 75px!important;
    min-width: 75px!important;
}
.w-set-100-px {
    width: 100px!important;
    max-width: 100px!important;
    min-width: 100px!important;
}
.w-set-200-px {
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}


/* Icons */
.icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon.icon-2xs {
    width: 10px;
    height: 10px;
}
.icon.icon-2xs svg {
    width: 10px;
    height: 10px;
}
.icon.icon-xs {
    width: 12px;
    height: 12px;
}
.icon.icon-xs svg {
    width: 12px;
    height: 12px;
}
.icon.icon-sm {
    width: 16px;
    height: 16px;
}
.icon.icon-sm svg {
    width: 16px;
    height: 16px;
}
.icon.icon-lg {
    width: 24px;
    height: 24px;
}
.icon.icon-lg svg {
    width: 24px;
    height: 24px;
}
.icon.icon-xl {
    width: 32px;
    height: 32px;
}
.icon.icon-xl svg {
    width: 32px;
    height: 32px;
}
.icon.icon-xxl {
    width: 48px;
    height: 48px;
}
.icon.icon-xxl {
    width: 48px;
    height: 48px;
}
.icon.icon-xxxl {
    width: 64px;
    height: 64px;
}
.icon.icon-xxxl svg {
    width: 64px;
    height: 64px;
}

.fill-primary svg {
    color: var(--color-primary-text)!important;
    fill: var(--color-primary-text)!important;
}
.fill-danger svg {
    color: var(--color-danger-text)!important;
    fill: var(--color-danger-text)!important;
}
.fill-brand svg {
    color: var(--color-brand)!important;
    fill: var(--color-brand)!important;
}
.fill-success svg {
    color: var(--color-success-text)!important;
    fill: var(--color-success-text)!important;
}
.fill-warning svg {
    color: var(--color-warning-text)!important;
    fill: var(--color-warning-text)!important;
}
.fill-secondary svg {
    color: var(--text-secondary)!important;
    fill: var(--text-secondary)!important;
}
.fill-black svg {
    color: #000!important;
    fill: #000!important;
}
.fill-white svg {
    color: #fff!important;
    fill: #fff!important;
}
.fill-text svg,
.fill-text path[fill] {
    color: var(--text-dark)!important;
    fill: var(--text-dark)!important;
}
.fill-light svg,
.fill-light path[fill] {
    color: var(--text-light)!important;
    fill: var(--text-light)!important;
}
.icon svg {
    width: 24px;
    height: 24px;
    fill: var(--text-dark);
}
.icon.icon-xs svg {
    width: 12px;
    height: 12px;
    fill: var(--text-dark);
}
.icon.icon-sm svg {
    width: 16px;
    height: 16px;
    fill: var(--text-dark);
}
.icon.icon-lg svg {
    width: 32px;
    height: 32px;
    fill: var(--text-dark);
}
.icon.icon-xl svg {
    width: 3rem;
    height: 3rem;
    fill: var(--text-dark);
}

.ms-200-px {
    margin-left: 200px;
}

@media (max-width: 600px) {
    .w-set-md-auto {
        width: auto;
        min-width: auto;
        max-width: unset;
    }
    .p-md-0 {
        padding: 0rem!important;
    }
    .m-md-0 {
        margin: 0rem!important;
    }
    .container-md {
        padding-left: 32px;
        padding-right: 32px;
    }

    .max-h-md-unset {
        max-height: unset;
    }
}


@media (max-width: 800px) {
    /* Sizes */
    .w-sm-min-auto {
        min-width: auto;
    }
    .w-sm-100 {
        width: 100%;
    }
    .m-sm-0 {
        margin: 0rem!important;
    }
    .m-sm-1 {
        margin: 0.25rem!important;
    }
    .m-sm-2 {
        margin: 0.5rem!important;
    }
    .m-sm-3 {
        margin: 0.75rem!important;
    }
    .m-sm-4 {
        margin: 1rem!important;
    }
    .mb-sm-0 {
        margin-bottom: 0rem!important;
    }
    .mb-sm-1 {
        margin-bottom: 0.25rem!important;
    }
    .mb-sm-2 {
        margin-bottom: 0.50rem!important;
    }
    .mb-sm-3 {
        margin-bottom: 0.75rem!important;
    }
    .mb-sm-4 {
        margin-bottom: 1rem!important;
    }
    .mb-sm-5 {
        margin-bottom: 1.5rem!important;
    }
    .mt-sm-0 {
        margin-top: 0rem!important;
    }
    .mt-sm-1 {
        margin-top: 0.25rem!important;
    }
    .mt-sm-2 {
        margin-top: 0.50rem!important;
    }
    .mt-sm-3 {
        margin-top: 0.75rem!important;
    }
    .mt-sm-4 {
        margin-top: 1rem!important;
    }
    .mt-sm-5 {
        margin-top: 1.5rem!important;
    }
    .ms-sm-0 {
        margin-left: 0rem!important;
    }
    .ms-sm-1 {
        margin-left: 0.25rem!important;
    }
    .ms-sm-2 {
        margin-left: 0.50rem!important;
    }
    .ms-sm-3 {
        margin-left: 0.75rem!important;
    }
    .ms-sm-4 {
        margin-left: 1rem!important;
    }
    .ms-sm-5 {
        margin-left: 1.5rem!important;
    }
    .pt-sm-0 {
        padding-top: 0!important;
    }
    .pt-sm-1 {
        padding-top: 0.25rem!important;
    }
    .pt-sm-2 {
        padding-top: 0.50rem!important;
    }
    .pt-sm-3 {
        padding-top: 0.75rem!important;
    }
    .pt-sm-4 {
        padding-top: 1rem!important;
    }
    .pt-sm-5 {
        padding-top: 1.5rem!important;
    }
    .pt-sm-6 {
        padding-top: 3rem!important;
    }
    .pb-sm-0 {
        padding-bottom: 0!important;
    }
    .pb-sm-1 {
        padding-bottom: 0.25rem!important;
    }
    .pb-sm-2 {
        padding-bottom: 0.50rem!important;
    }
    .pb-sm-3 {
        padding-bottom: 0.75rem!important;
    }
    .pb-sm-4 {
        padding-bottom: 1rem!important;
    }
    .pb-sm-5 {
        padding-bottom: 1.5rem!important;
    }
    .pb-sm-6 {
        padding-bottom: 3rem!important;
    }
    .me-sm-0 {
        margin-right: 0!important;
    }
    .me-sm-1 {
        margin-right: 0.25rem!important;
    }
    .ms-sm-0 {
        margin-left: 0!important;
    }
    .ms-sm-1 {
        margin-left: 0.25rem!important;
    }

    .mx-sm-0 {
        margin-right: 0!important;
        margin-left: 0!important;
    }
    .mx-sm-1 {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
    }
    .mx-sm-2 {
        margin-right: 0.5rem!important;
        margin-left: 0.5rem!important;
    }
    .mx-sm-3 {
        margin-right: 0.75rem!important;
        margin-left: 0.75rem!important;
    }
    .mx-sm-4 {
        margin-right: 1rem!important;
        margin-left: 1rem!important;
    }

    .my-sm-0 {
        margin-top: 0!important;
        margin-bottom: 0!important;
    }
    .my-sm-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }
    .my-sm-2 {
        margin-top: 0.5rem!important;
        margin-bottom: 0.5rem!important;
    }
    .my-sm-3 {
        margin-top: 0.75rem!important;
        margin-bottom: 0.75rem!important;
    }
    .my-sm-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .px-sm-0 {
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .px-sm-1 {
        padding-right: 0.25rem!important;
        padding-left: 0.25rem!important;
    }
    .px-sm-2 {
        padding-right: 0.5rem!important;
        padding-left: 0.5rem!important;
    }
    .px-sm-3 {
        padding-right: 0.75rem!important;
        padding-left: 0.75rem!important;
    }
    .px-sm-4 {
        padding-right: 1rem!important;
        padding-left: 1rem!important;
    }

    .pe-sm-0 {
        padding-right: 0;
    }
    .pe-sm-1 {
        padding-right: 0.25rem;
    }
    .pe-sm-2 {
        padding-right: 0.5rem;
    }
    .pe-sm-3 {
        padding-right: 0.75rem;
    }
    .pe-sm-4 {
        padding-right: 1rem;
    }
    .pe-sm-5 {
        padding-right: 1.5rem;
    }
    .pe-sm-6 {
        padding-right: 3rem;
    }

    .py-sm-0 {
        padding-top: 0!important;
        padding-bottom: 0!important;
    }
    .py-sm-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .py-sm-2 {
        padding-top: 0.5rem!important;
        padding-bottom: 0.5rem!important;
    }
    .py-sm-3 {
        padding-top: 0.75rem!important;
        padding-bottom: 0.75rem!important;
    }
    .py-sm-4 {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
    }
    .py-sm-5 {
        padding-top: 1.5rem!important;
        padding-bottom: 1.5rem!important;
    }
    .py-sm-6 {
        padding-top: 3rem!important;
        padding-bottom: 3rem!important;
    }
    .px-lg-1,
    .px-lg-2,
    .px-lg-3,
    .px-lg-4,
    .px-lg-5,
    .px-lg-6 {
        padding-right: 0;
        padding-left: 0;
    }
    .p-sm-75 {
        padding: 0.75rem;
    }
    .mt-sm-0 {
        margin-top: 0;
    }
    .mt-sm-5 {
        margin-top: 1.5rem;
    }
    .mb-lg-2 {
        margin-bottom: 0;
    }
    .mt-lg-1,
    .mt-lg-2,
    .mt-lg-3,
    .mt-lg-4,
    .mt-lg-5,
    .mt-lg-6 {
        margin-top: 0;
    }
    .me-lg-5 {
        margin-right: 0;
    }
    .ms-sm-75 {
        margin-left: 0.75rem;
    }

    .p-sm-0 {
        padding: 0!important;
    }
    .p-sm-1 {
        padding: 0.25rem;
    }
    .p-sm-2 {
        padding: 0.5rem;
    }
    .p-sm-3 {
        padding: 0.75rem;
    }
    .p-sm-4 {
        padding: 1rem;
    }
    .p-sm-5 {
        padding: 1.5rem;
    }
    .p-sm-6 {
        padding: 3rem;
    }

    .w-sm-available {
        width: -webkit-fill-available;
        width: fill-available;
    }
    .w-sm-min-auto {
        min-width: auto;
    }

    .w-sm-min-90-pct {
        min-width: 90%;
    }

    .w-sm-min-75-pct {
        min-width: 75%;
    }
    .w-sm-min-60-pct {
        min-width: 60%;
    }
    .w-sm-min-50-pct {
        min-width: 50%;
    }
    .w-sm-min-40-pct {
        min-width: 40%;
    }

    .w-set-sm-150-px {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .w-set-sm-auto {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .w-sm-min-100 {
        min-width: 100%!important;
    }

    .ms-sm-150-px {
        margin-left: 150px;
    }
    .h-sm-100 {
        height: 100%!important;
    }
    .h-sm-100-header {
        height: calc(100% - var(--header-height));
    }
    .h-sm-set-250-px {
        min-height: 250px;
        max-height: 250px;
        height: 250px;
    }
    .h-sm-set-150-px {
        min-height: 150px;
        max-height: 150px;
        height: 150px;
    }
    .h-sm-set-100-px {
        min-height: 100px;
        max-height: 100px;
        height: 100px;
    }
    .h-sm-set-75-px {
        min-height: 75px;
        max-height: 75px;
        height: 75px;
    }

    .pt-container {
        padding-top: 0;
    }

    .w-sm-max-0 {
        width: 0%;
    }
    .w-sm-max-25 {
        max-width: 25%;
    }
    .w-sm-max-50 {
        max-width: 50%;
    }
    .w-sm-max-75 {
        max-width: 75%;
    }
    .w-sm-max-100 {
        max-width: 100%;
    }

    .w-sm-max-25-px {
        max-width: 25px;
    }
    .w-sm-max-50-px {
        max-width: 50px;
    }
    .w-sm-max-75-px {
        max-width: 75px;
    }
    .w-sm-max-100-px {
        max-width: 100px;
    }
    .w-sm-max-125-px {
        max-width: 125px;
    }
    .w-sm-max-150-px {
        max-width: 150px;
    }
    .w-sm-fit-content {
        width: -moz-fit-content;
        width: fit-content;
    }

    .w-sm-set-100-px {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .w-sm-set-75-px {
        width: 75px;
        min-width: 75px;
        max-width: 75px;
    }

    .w-sm-set-50-px {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    .h-sm-max-0 {
        height: 0%;
    }
    .h-sm-min-100 {
        min-height: 100%;
    }
    .h-sm-max-100 {
        max-height: 100%;
    }
    .h-set-sm-auto {
        height: 100%!important;
        min-height: 0!important;
        max-height: none!important;
    }
    .h-min-sm-50-vh {
        min-height: 50vh;
    }

    .h-sm-header {
        height: var(--header-sm-height);
    }

    .h-100-header {
        height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
    .h-min-100-header {
        min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
    .h-max-100-header {
        max-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
}
.monospace {
    font-family: var(--font-family-monospace);
}
.signature {
    font-family: var(--font-family-signature)!important;
}

/* Align */

.text-wrap {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.text-center {
    text-align: center;
}
.text-end {
    text-align: end;
}
.text-start {
    text-align: start;
}

/* Sizes */

.page-title {
    font-size: 25px;
    font-weight: 400;
}
.title-1 {
    font-size: 35px;
    font-weight: 400;
}
.title-2 {
    font-size: 24px;
    font-weight: 400;
}
.title-3 {
    font-size: 20px;
    font-weight: 400;
}

.fs-10 {
    font-size: 10px;
}
.fs-12 {
    font-size: 12px!important;
}
.fs-14 {
    font-size: 14px!important;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
.fs-20 {
    font-size: 20px;
}
.fs-24 {
    font-size: 24px;
}
.fs-28 {
    font-size: 28px;
}
.fs-32 {
    font-size: 32px;
}
.fs-38 {
    font-size: 38px;
}
.fs-54 {
    font-size: 54px;
}
.fs-96 {
    font-size: 96px;
}
.line-height-1 {
    line-height: 1;
}
.line-height-1-3 {
    line-height: 1.3;
}
.line-height-2 {
    line-height: 2;
}

/* Weight */
.weight-100 {
    font-weight: 100;
}
.weight-400 {
    font-weight: 400!important;
}
.weight-500 {
    font-weight: 500!important;
}
.weight-600 {
    font-weight: 600!important;
}
.weight-700 {
    font-weight: 700;
}
.bold {
    font-weight: bold!important;
}

/* line title */

.text-1-line-title {
    max-height: 18px;
    font-size: 16px;
    overflow: hidden;
}
.text-2-line-title {
    max-height: 38px;
    font-size: 16px;
    overflow: hidden;
}

/* Color */
.text-primary {
    color: rgb(var(--color-general-primary-text));
}
.text-brand-hover:hover {
    color: var(--color-brand);
}
.text-primary-hover:hover {
    color: var(--color-primary);
}
.text-danger {
    color: var(--color-danger-text);
}
.text-brand {
    color: var(--color-brand);
}
.text-custom {
    color: var(--color-custom);
}
.text-warning {
    color: var(--color-warning-text);
}
.text-success {
    color: var(--color-success-text);
}
.text-dark {
    color: var(--text-dark);
}
.text-dark-hover:hover {
    color: var(--text-dark);
}
.text-light-hover:hover {
    color: var(--text-light);
}
.text-light {
    color: var(--text-light)!important;
}
.text-white {
    color: #fff!important;
}
.text-black {
    color: #000!important;
}
.text-secondary {
    color: var(--text-secondary);
}
.text-secondary-light {
    color: var(--text-secondary-light);
}
.text-color-initial {
    color: initial;
}
/* Decorations */
.text-capitalize {
    text-transform: capitalize;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-line-through {
    text-decoration: line-through;
}
.text-underlined {
    text-decoration: underline;
}
.text-dashed {
    -webkit-text-decoration: dashed;
            text-decoration: dashed;
}
.text-underlined-hover:hover {
    text-decoration: underline;
}
.text-decoration-none {
    text-decoration: none!important;
}
.text-shadow-hard {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
.text-shadow {
    text-shadow: var(--text-shadow);
}
.text-shadow-sm {
    text-shadow: var(--text-shadow);
}

.weight-normal {
    font-weight: normal;
}
.text-uppercase {
    text-transform: uppercase;
}

.white-space-nowrap {
    white-space: nowrap;
}

/* Other */
.can-select {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}
.disable-select {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.td-no-wrap {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-nowrap {
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
.text-wrap-anywhere {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-ellipsis-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.white-space-nowrap {
    white-space: nowrap;
}
.break-words {
    word-break: break-word;
}
.break-words-all {
    word-break: break-all;
}

.textarea-vertical-resize {
    resize: vertical;
}

@media (max-width: 800px) {
    .title-sm-1 {
        font-size: 35px;
        font-weight: 600;
    }
    .title-sm-2 {
        font-size: 24px;
        font-weight: 600;
    }
    .title-sm-3 {
        font-size: 22px;
        font-weight: 600;
    }
    .title-sm-4 {
        font-size: 18px;
        font-weight: 600;
    }
    
    .fs-sm-10 {
        font-size: 10px!important;
    }
    .fs-sm-12 {
        font-size: 12px!important;
    }
    .fs-sm-14 {
        font-size: 14px!important;
    }
    .fs-sm-16 {
        font-size: 16px!important;
    }
    .fs-sm-18 {
        font-size: 18px!important;
    }
    .fs-sm-20 {
        font-size: 20px!important;
    }
    .fs-sm-24 {
        font-size: 24px!important;
    }
    .fs-sm-28 {
        font-size: 28px!important;
    }
    .fs-sm-32 {
        font-size: 32px!important;
    }
    .fs-sm-48 {
        font-size: 48px!important;
    }
    .fs-sm-54 {
        font-size: 54px!important;
    }

    .text-sm-center {
        text-align: center;
    }
    .text-sm-start {
        text-align: start;
    }
    .text-sm-end {
        text-align: end;
    }
}
.react-datepicker {
    display: flex;
    flex-direction: column;
    background-color: var(--color-main)!important;
    box-shadow: var(--box-shadow);
    animation: drop var(--transition-duration) forwards;
    padding: 12px!important;
    border-radius: var(--border-radius-lg)!important;
}
.react-datepicker__month {
    margin: 0!important;
    padding: 0!important;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.react-datepicker-popper {
    z-index: 9999!important;
}
.react-datepicker__navigation-icon::before {
    border-color: var(--text-dark)!important;
    height: 6px!important;
    width: 6px!important;
}
.react-datepicker .react-datepicker__day-names .react-datepicker__day-name {
    font-size: 10px!important;
    font-weight: 500!important;
    color: var(--text-secondary)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__header {
    background-color: var(--color-main)!important;
    color: var(--text-light)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__children-container {
    margin: 0;
    padding: 4px;
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.dropdown-menu .react-datepicker {
    box-shadow: none!important;
}
.dropdown-mobile-container .react-datepicker {
    padding-left: 0!important;
    padding-right: 0!important;
}
.dropdown-menu:has(.react-datepicker) {
    padding: 0!important;
}
.dropdown-mobile-container:has(.react-datepicker) {
    padding: 8px 0!important;
}
.react-datepicker,
.react-datepicker__header {
    border-color: transparent!important;
}
.react-datepicker__header {
    padding: 0!important;
}
.react-datepicker__day, 
.react-datepicker__time-name {
    color: var(--text-dark)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__current-month {
    font-weight: 400!important;
    font-size: 16px!important;
    opacity: 1!important;
}
.react-datepicker__day-name {
    /* opacity: 0.5!important; */
}
.react-datepicker__day--outside-month {
    opacity: 0.15!important;
}
.react-datepicker__day.react-datepicker__day--range-end:hover,
.react-datepicker__day.react-datepicker__day--today:hover,
.react-datepicker:has(.react-datepicker__day--in-range ):hover  .react-datepicker__week .react-datepicker__day--selected:hover , .react-datepicker__day.react-datepicker__day--selected:hover {
    background-color: rgb(var(--color-general-secondary-bg-hover))!important;
}
.react-datepicker__day:hover {
    /* border-radius: 50%!important; */
    color: rgb(var(--color-general-brand-text))!important;
    background-color: rgb(var(--color-general-secondary-bg-hover))!important;
    border-radius: 50%;
    font-weight: 500;
}
.react-datepicker__day--disabled,
.react-datepicker__day--disabled:hover {
    background-color: var(--color-tertiary)!important;
    color: var(--text-dark)!important;
    opacity: 0.2!important;
}
.modal-open .react-datepicker__portal {
    background-color: transparent!important;
}
.modal-open .react-datepicker__portal .react-datepicker__navigation {
    top: 8px!important;
    margin: 0 8px!important;
}
.react-datepicker__portal {
    background-color: var(--color-overlay)!important;
    width: calc(100% - 24px)!important;
    padding: 0 12px!important;
    height: 100%!important;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.react-datepicker__portal .react-datepicker {
    box-shadow: var(--box-shadow)!important;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
    padding: 4px 0 16px 0;
    color: var(--text-dark);
}
.react-datepicker__navigation {
    top: 0px!important; 
    margin: 16px 12px!important;
    opacity: 0.5!important;
    transition-duration: var(--transition-duration)!important;
}
.react-datepicker:has(.date-select-custom-header) .react-datepicker__navigation {
    top: -2px!important; 
    margin: 0!important;
}
.react-datepicker__navigation:hover {
    opacity: 1!important;
}
.react-datepicker__children-container {
    width: auto!important;
    display: flex!important;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
    border-bottom-color: var(--color-main)!important;
}
.react-datepicker__day--selected,
.react-datepicker__day.react-datepicker__day--selected {
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-top-left-radius: 50%!important;
    border-bottom-left-radius: 50%!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    border-right-color: transparent!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day--keyboard-selected[aria-selected="false"] {
    border-color: transparent!important;
    color: var(--text-dark)!important;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__day.react-datepicker__day--range-end {
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-top-right-radius: 50%!important;
    border-bottom-right-radius: 50%!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    border-left-color: transparent!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
    background-color: var(--color-main)!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-left: none!important;
    border-right: none!important;
    border-radius: 0!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day-name {
    font-weight: 500!important;
    color: var(--text-dark);
}
.react-datepicker__header .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    padding-top: 0!important;
    padding-bottom: 0!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
}
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    /* width: 2rem!important;
    line-height: 2rem!important; */
    margin: 0!important;
    padding: 6px 7px!important;
    font-family: var(--font-family)!important;
}
.inline-calendar.react-datepicker {
    box-shadow: none!important;
    font-size: 12px!important;
}
.inline-calendar .react-datepicker__header {
    background-color: unset!important;
}

.react-datepicker__navigation-icon::before {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px;
    border-radius: 1px;
}
.react-datepicker__day {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    font-size: 14px!important;

}
.react-datepicker__day.react-datepicker__day--today {
    color: var(--text-dark)!important;
    border-radius: 50%!important;
}
.react-datepicker__day--in-range.react-datepicker__day.react-datepicker__day--today.react-datepicker__day--range-end {
    border-top-right-radius: 50%!important;
    border-bottom-right-radius: 50%!important;
}
    .react-datepicker__day--in-range.react-datepicker__day.react-datepicker__day--today {
    border-radius: 0%!important;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
    border-bottom-color: var(--color-border)!important;
}

.react-datepicker:has(.react-datepicker__day--in-range) .react-datepicker__day--range-start.react-datepicker__day--range-end.react-datepicker__day--in-range {
    border-radius: 50%!important;
    border-right: 1px solid rgb(var(--color-general-secondary-border))!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
}
/* .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
    border-top-color: var(--color-border)!important;
} */
.react-datepicker__view-calendar-icon input {
    margin-left: 46px;
    padding: 11px 6px;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
    padding: 15px 16px;
    transition-duration: var(--transition-duration);
    opacity: 0.5;
}
.calendar-container:has(.react-datepicker) .btn-outline {
    border-color: rgb(var(--color-general-secondary-border));
}
.react-datepicker__input-container .react-datepicker__calendar-icon:hover {
    opacity: 1;
}
.react-datepicker__calendar-icon {
    width: 16px;
    cursor: pointer;
    height: 16px;
}
.react-datepicker__triangle {
    display: none!important;
}
.react-datepicker__today-button {
    color: var(--text-dark)!important;
    border: none;
    font-weight: 400;
    padding: 0.75rem 1rem!important;
    transition-duration: var(--transition-duration)!important;
    color: var(--text-secondary)!important;
    background-color: var(--color-secondary)!important;
}
.react-datepicker__today-button:hover {
    opacity: 1!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
}
.react-datepicker:not(:has(.react-datepicker__day--in-selecting-range)) .react-datepicker__day.react-datepicker__day--selected {
    border-radius: 50%!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
}
.react-datepicker:has(.react-datepicker__day--in-range ) .react-datepicker__week .react-datepicker__day--selected, .react-datepicker__day.react-datepicker__day--selected  {
    border-right: transparent!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

/* .react-datepicker:not(.react-datepicker__day--in-range ) .react-datepicker__day--selected,
.react-datepicker__day.react-datepicker__day--selected {
    border-right: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-radius: 50%!important;
} */

@media (max-width: 800px) {
    .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
        width: 2rem!important;
        line-height: 2rem!important;
    }
}