@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
/* add variable */
:root {
    /* modal variables */
    --bs-modal-header-padding: 0.5rem 1rem;
    --bs-modal-header-border-width: 1px;
    --bs-modal-header-border-color: #dee2e6;
    /* button variables */
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #999 !important;
    --bs-btn-active-border-color: transparent !important;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-disabled-border-color: transparent;
    --bs-focus-ring-width: 0.125rem;
    --bs-pagination-font-size: 0.75rem;
    --bs-table-bg: #d8e3f4;
    /* intl-tel-input */
    --iti-arrow-padding: 8px;
    --iti-spacer-horizontal: 12px;
    /* Theme Colors */
    --theme-primary: #212121;
    --theme-secondary: #666666;
    --theme-success: #28a745;
    --theme-danger: #b82a38;
    --theme-warning: #ffc107;
    --theme-info: #17a2b8;
    --theme-light: #f2f4f7;
    --theme-primary-40: #21212166;
    --theme-success-40: #28a74566;
    --theme-warning-40: #ffc10766;
    --theme-danger-40: #b82a3866;
    --theme-light-40: #f2f4f766;
    --theme-info-40: #17a2b866;
    --yellow-100-40: #fff3cd66;
    --yellow-800-40: #664d0366;
    --green-100-40: #d1e7dd66;
    --green-600-40: #146c4366;
    --gray-200-40: #e9ecef66;
    --gray-900-40: #21252966;
    --cyan-100-40: #d0f4f866;
    --cyan-800-40: #05516066;
    --red-100-40: #f8d7da66;
    --red-700-40: #84202966;
    --white-40: #ffffff66;
    /* Text Colors */
    --text-primary: #212121;
    --text-secondary: #666666;
    --text-success: #0a3622;
    --text-info: #055160;
    --text-warning: #664d03;
    --text-danger: #b82a38;
    --text-light: #495057;
    --text-dark: #000;
    /* Background Colors */
    --bg-primary: #e9e9e9;
    --bg-secondary: #e2e3e5;
    --bg-success: #d1e7dd;
    --bg-info: #cff4fc;
    --bg-warning: #fff3cd;
    --bg-danger: #f8d7da;
    --bg-light: #fcfcfd;
    --bg-dark: #ced4da;
    /* Border Colors */
    --border-primary: #dee2e6;
    --border-secondary: #c4c8cb;
    --border-success: #a3cfbb;
    --border-info: #9eeaf9;
    --border-warning: #ffe69c;
    --border-danger: #f1aeb5;
    --border-light: #e9ecef;
    --border-dark: #adb5bd;
    /* Gray colors */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    /* Blue colors */
    --blue-100: #cfe2ff;
    --blue-200: #9ec5fe;
    --blue-300: #6ea8fe;
    --blue-400: #3d8bfd;
    --blue-500: #0d6efd;
    --blue-600: #0a58ca;
    --blue-700: #084298;
    --blue-800: #052c65;
    --blue-900: #031633;
    /* Indigo colors */
    --indigo-100: #e0cffc;
    --indigo-200: #c29ffa;
    --indigo-300: #a370f7;
    --indigo-400: #8540f5;
    --indigo-500: #6610f2;
    --indigo-600: #520dc2;
    --indigo-700: #3d0a91;
    --indigo-800: #290661;
    --indigo-900: #140330;
    /* Purple colors */
    --purple-100: #e2d9f3;
    --purple-200: #c5b3e6;
    --purple-300: #a98eda;
    --purple-400: #8c68cd;
    --purple-500: #6f42c1;
    --purple-600: #59359a;
    --purple-700: #432874;
    --purple-800: #2c1a4d;
    --purple-900: #160d27;
    /* Pink colors */
    --pink-100: #f7d6e6;
    --pink-200: #efadce;
    --pink-300: #e685b5;
    --pink-400: #de5c9d;
    --pink-500: #d63384;
    --pink-600: #ab296a;
    --pink-700: #801f4f;
    --pink-800: #561435;
    --pink-900: #2b0a1a;
    /* Red colors */
    --red-100: #f8d7da;
    --red-200: #f1aeb5;
    --red-300: #ea868f;
    --red-400: #e35d6a;
    --red-500: #dc3545;
    --red-600: #b02a37;
    --red-700: #842029;
    --red-800: #58151c;
    --red-900: #2c0b0e;
    /* Orange colors */
    --orange-100: #ffe5d0;
    --orange-200: #fecba1;
    --orange-300: #feb272;
    --orange-400: #fd9843;
    --orange-500: #fd7e14;
    --orange-600: #ca6510;
    --orange-700: #984c0c;
    --orange-800: #653208;
    --orange-900: #331904;
    /* Yellow colors */
    --yellow-100: #fff3cd;
    --yellow-200: #ffe69c;
    --yellow-300: #ffda6a;
    --yellow-400: #ffcd39;
    --yellow-500: #ffc107;
    --yellow-600: #cc9a06;
    --yellow-700: #997404;
    --yellow-800: #664d03;
    --yellow-900: #332701;
    /* Green colors */
    --green-100: #d1e7dd;
    --green-200: #a3cfbb;
    --green-300: #75b798;
    --green-400: #479f76;
    --green-500: #198754;
    --green-600: #146c43;
    --green-700: #0f5132;
    --green-800: #0a3622;
    --green-900: #051b11;
    /* Teal colors */
    --teal-100: #d2f4ea;
    --teal-200: #a6e9d5;
    --teal-300: #79dfc1;
    --teal-400: #4dd4ac;
    --teal-500: #20c997;
    --teal-600: #1aa179;
    --teal-700: #13795b;
    --teal-800: #0d503c;
    --teal-900: #06281e;
    /* Cyan colors */
    --cyan-100: #d0f4f8;
    --cyan-200: #a0e9f0;
    --cyan-300: #70dee9;
    --cyan-400: #40d3e1;
    --cyan-500: #0dcaf0;
    --cyan-600: #0aa1c0;
    --cyan-700: #087990;
    --cyan-800: #055160;
    --cyan-900: #032830;
    --white: #fff;
    --black: #000;
    /* Font Sizes */
    --fs12: 12px;
    --fs13: 13px;
    --fs14: 14px;
    --fs15: 15px;
    --fs16: 16px;
    --fs17: 17px;
    --fs18: 18px;
    --fs20: 20px;
    --fs24: 24px;
    --fs28: 28px;
    --fs32: 32px;
    --fs40: 40px;
}
.text-primary {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
.text-light {
    color: var(--theme-light) !important;
}
.text-gray-100 {
    color: var(--gray-100) !important;
}
.text-gray-300 {
    color: var(--gray-300) !important;
}
.text-gray-500 {
    color: var(--gray-500) !important;
}
.text-gray-600 {
    color: var(--gray-600) !important;
}
.text-gray-800 {
    color: var(--gray-800) !important;
}
.text-danger {
    color: var(--theme-danger) !important;
}
.text-success {
    color: var(--theme-success) !important;
}
.text-yellow-600 {
    color: var(--yellow-600) !important;
}
.text-theme-info {
    color: var(--theme-info) !important;
}
.bg-pr {
    background-color: var(--bg-primary) !important;
}
.bgg200 {
    background-color: var(--gray-200) !important;
}
.bg-gray900 {
    background-color: var(--gray-900) !important;
}
.bg-3e {
    background-color: #eee;
}
.bg-3fe {
    background-color: #fefefe;
}
.bg3fc {
    background-color: #fcfcfc !important;
}
.bg-info {
    background-color: var(--bg-info) !important;
}
.bg-warning {
    background-color: var(--bg-warning) !important;
}
.border-primary {
    border: 1px solid var(--border-primary) !important;
}
.border-p2 {
    border: 2px solid var(--border-primary) !important;
}
.border-gray-300 {
    border: 1px solid var(--gray-300) !important;
}
.border-black {
    border: 1px solid var(--black) !important;
}
.flex {
    display: flex;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-grow-2 {
    flex-grow: 2 !important;
}
html {
    height: 100%;
    background-color: var(--white);
    font-size: var(--fs20);
    line-height: 1.8em;
}
body {
    font-family: 'Ubuntu', sans-serif;
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
}
hr {
    margin: 2rem 0;
}
ul {
    margin: 0;
}
li {
    margin-bottom: 8px;
}
ul li:last-child {
    margin-bottom: 0;
}
a {
    color: var(--black) !important;
    text-decoration: none;
}
a:hover {
    color: var(--black) !important;
}
table thead th {
    position: sticky !important;
    top: -1px;
    z-index: 1;
    vertical-align: bottom;
    background-color: var(--gray-100) !important;
    font-weight: normal;
}
td,
th {
    padding: 0 !important;
    vertical-align: middle;
    word-wrap: break-word;
    max-width: 200px;
}
input,
select {
    font-size: 1rem;
    border: 1px solid #ccc;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}
textarea {
    outline: none;
}
label {
    white-space: nowrap;
    font-size: 0.8rem;
}
label.required::after {
    content: '*';
    color: red;
    margin-left: 4px;
    font-size: 1em;
}
.form-label {
    margin-bottom: 0.25rem;
}
.fs08rem {
    font-size: 0.8rem !important;
}
.fs-85 {
    font-size: 0.85rem !important;
}
.fs1rem {
    font-size: 1rem !important;
}
.fs15r {
    font-size: 1.5rem !important;
}
.fs17r {
    font-size: 1.7rem !important;
}
.fs2rem {
    font-size: 2rem !important;
}
.fs-12 {
    font-size: var(--fs12) !important;
}
.fs-14 {
    font-size: var(--fs14) !important;
}
.fs-16 {
    font-size: var(--fs16) !important;
}
.fs-18 {
    font-size: var(--fs18) !important;
}
.fs-28 {
    font-size: var(--fs28) !important;
}
.p-6 {
    padding: 6px !important;
}
.p-8 {
    padding: 8px !important;
}
.p-12 {
    padding: 12px !important;
}
.p-14 {
    padding: 14px !important;
}
.p-16 {
    padding: 16px !important;
}
.p-20 {
    padding: 20px !important;
}
.p-24 {
    padding: 24px !important;
}
.p-30 {
    padding: 30px !important;
}
.p-40 {
    padding: 40px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-12 {
    padding-top: 12px !important;
}
.pt-16 {
    padding-top: 16px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-25 {
    padding-top: 25px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pt-40 {
    padding-top: 40px !important;
}
.pt-60 {
    padding-top: 60px !important;
}
.pt-80 {
    padding-top: 80px !important;
}
.pb-16 {
    padding-bottom: 16px !important;
}
.pb-36 {
    padding-bottom: 36px !important;
}
.pb-40 {
    padding-bottom: 40px !important;
}
.pb-60 {
    padding-bottom: 60px !important;
}
.pr-12 {
    padding-right: 12px !important;
}
.pr-30 {
    padding-right: 30px !important;
}
.pr-45 {
    padding-right: 45px !important;
}
.pl-15 {
    padding-left: 15px !important;
}
.pl-20 {
    padding-left: 20px !important;
}
.pl-24 {
    padding-left: 24px !important;
}
.pl-50 {
    padding-left: 50px !important;
}
.px-6 {
    padding-right: 6px !important;
    padding-left: 6px !important;
}
.px-8 {
    padding-right: 8px !important;
    padding-left: 8px !important;
}
.px-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}
.px-12 {
    padding-right: 12px !important;
    padding-left: 12px !important;
}
.px-13 {
    padding-right: 13px !important;
    padding-left: 13px !important;
}
.px-14 {
    padding-right: 14px !important;
    padding-left: 14px !important;
}
.px-16 {
    padding-right: 16px !important;
    padding-left: 16px !important;
}
.px-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
}
.px-24 {
    padding-right: 24px !important;
    padding-left: 24px !important;
}
.py-4px {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.py-14 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.py-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
.py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.mt-16 {
    margin-top: 16px !important;
}
.mb-12 {
    margin-bottom: 12px !important;
}
.mb-25 {
    margin-bottom: 25px !important;
}
.mb2r {
    margin-bottom: 2rem !important;
}
.br-6 {
    border-radius: 6px !important;
}
.br-12 {
    border-radius: 12px !important;
}
.br-16 {
    border-radius: 16px !important;
}
.br-24 {
    border-radius: 24px !important;
}
.gap-2px {
    gap: 2px !important;
}
.gap-4px {
    gap: 4px !important;
}
.gap-8 {
    gap: 8px !important;
}
.gap-10 {
    gap: 10px !important;
}
.gap-12 {
    gap: 12px !important;
}
.gap-16 {
    gap: 16px !important;
}
.gap-20 {
    gap: 20px !important;
}
.gap-24 {
    gap: 24px !important;
}
.gap-30 {
    gap: 30px !important;
}
.gap-35 {
    gap: 35px !important;
}
.gap-40 {
    gap: 40px !important;
}
.gap-48 {
    gap: 48px !important;
}
.gap-50 {
    gap: 50px !important;
}
.g-12 {
    --bs-gutter-x: 12px !important;
    --bs-gutter-y: 12px !important;
}
.g-16 {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 16px !important;
}
.lh-150 {
    line-height: 150% !important;
}
.mnw-40 {
    min-width: 40px !important;
}
.mnw-50 {
    min-width: 50px !important;
}
.mnw-80 {
    min-width: 80px !important;
}
.mnw-100 {
    min-width: 100px !important;
}
.mnw-120 {
    min-width: 120px !important;
}
.mw-50 {
    max-width: 50% !important;
}
.mw64 {
    max-width: 64px !important;
}
.mh64 {
    max-height: 64px !important;
}
.mxw-140 {
    max-width: 140px !important;
}
.mxw-170 {
    max-width: 170px !important;
}
.mxw-200 {
    max-width: 200px !important;
}
.mw-500 {
    max-width: 500px !important;
}
.mw-700 {
    max-width: 700px !important;
}
.mw-800 {
    max-width: 800px !important;
}
.mw-1140 {
    max-width: 1140px !important;
}
h2 {
    font-size: 1.6rem !important;
}
h3 {
    font-size: var(--fs28) !important;
}
h4 {
    font-size: var(--fs24) !important;
}
h6 {
    font-size: var(--fs1rem) !important;
    line-height: 150%;
}
.body-secondary {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 0.35rem;
}
.list-group-item {
    cursor: pointer;
    font-size: 1rem;
}
.list-group-item:hover {
    background-color: var(--gray-200) !important;
    color: var(--black) !important;
}
.list-group-item.active {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}
.list-group-item.active:hover {
    background-color: var(--gray-200) !important;
    color: var(--black) !important;
}
.btn {
    border: none;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: all 0.15s ease-in-out;
}
.btn:disabled {
    cursor: not-allowed !important;
}
.btn:focus-visible {
    box-shadow: none !important;
}
.btn-lg {
    padding: 16px 24px;
}
.btn-md {
    padding: 14px 16px;
}
.btn-sm {
    padding: 8px 12px;
    font-size: var(--fs14);
}
.btn-trs {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--theme-primary);
}
.btn-trs:hover {
    border: 2px solid var(--theme-primary);
    background-color: var(--gray-100);
}
.btn-primary {
    background-color: var(--theme-primary);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--gray-800);
}
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--theme-primary) !important;
    box-shadow: none !important;
}
.btn-primary:disabled {
    background-color: var(--theme-primary-40);
}
.btn-light {
    background-color: var(--gray-200);
    color: var(--text-primary);
}
.btn-light:hover,
.btn-light:active {
    background-color: var(--gray-400);
}
.btn-light:focus {
    background-color: var(--gray-200) !important;
    color: var(--text-primary) !important;
}
.btn-light:disabled {
    background-color: var(--gray-200-40);
}
.btn-light-outline {
    background-color: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}
.btn-light-outline:hover,
.btn-light-outline:active {
    background-color: var(--gray-400);
}
.btn-light-outline:focus {
    background-color: var(--gray-200);
    color: var(--text-primary);
}
.btn-light-outline:disabled {
    background-color: var(--gray-200-40);
}
.btn-light-info {
    background-color: var(--gray-200);
    color: var(--theme-info);
}
.btn-light-info:hover {
    background-color: var(--gray-400);
    color: var(--theme-info);
}
.btn-light-info:active,
.btn-light-info:focus {
    background-color: var(--gray-600) !important;
    box-shadow: none !important;
}
.btn-light-info:disabled {
    background-color: var(--gray-200-40);
}
.btn-secondary {
    background-color: var(--white);
    color: var(--text-primary);
    border: solid var(--theme-primary);
}
.btn-secondary:hover {
    background-color: var(--gray-200);
    border-color: var(--theme-secondary);
    color: var(--text-primary);
}
.btn-secondary:disabled {
    background-color: rgba(242, 244, 247, 0.4);
    color: rgba(33, 33, 33, 0.4);
    border-color: rgba(33, 33, 33, 0.4);
}
.btn-border-lg {
    border-width: 2px !important;
}
.btn-border-md {
    border-width: 1.5px !important;
}
.btn-border-sm {
    border-width: 1px !important;
}
.btn-tertiary {
    background-color: transparent;
    color: var(--text-primary);
    border: none;
}
.btn-tertiary:hover {
    background-color: var(--gray-200);
}
.btn-tertiary:disabled {
    color: rgba(33, 33, 33, 0.4);
    background-color: transparent;
}
.btn-ghost {
    background-color: var(--gray-200);
    color: var(--text-primary);
}
.btn-ghost:hover {
    background-color: var(--theme-primary);
    color: var(--white);
}
.btn-ghost:disabled {
    background-color: var(--gray-200-40) !important;
}
.btn-success {
    background-color: var(--theme-success);
    color: var(--white);
}
.btn-success:hover {
    background-color: var(--green-600);
}
.btn-success:disabled {
    background-color: rgba(40, 167, 69, 0.4);
}
.btn-success-secondary {
    background-color: var(--theme-light);
    color: var(--theme-success);
    border: solid var(--theme-success);
}
.btn-success-secondary:hover {
    background-color: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
}
.btn-success-secondary:disabled {
    background-color: var(--white-40);
    color: var(--theme-success-40);
    border-color: var(--theme-success-40);
}
.btn-success-tertiary {
    background-color: transparent;
    color: var(--green-600);
    border: none;
}
.btn-success-tertiary:hover {
    background-color: var(--green-100);
    color: var(--green-600);
}
.btn-success-tertiary:disabled {
    color: var(--green-600-40);
    background-color: transparent;
}
.btn-success-ghost {
    background-color: var(--green-100);
    color: var(--theme-success);
    border: none;
}
.btn-success-ghost:hover {
    background-color: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
}
.btn-success-ghost:disabled {
    color: var(--green-600-40);
    border-color: var(--green-600-40);
    background-color: var(--green-100-40);
}
.btn-outline-danger {
    border: 1px solid var(--red-500) !important;
}
.btn-danger {
    background-color: var(--theme-danger);
    color: var(--white);
}
.btn-danger:hover {
    background-color: var(--red-600);
}
.btn-danger:disabled {
    background-color: var(--theme-danger-40);
}
.btn-danger-secondary {
    background-color: var(--theme-light);
    color: var(--theme-danger);
    border: solid var(--theme-danger);
}
.btn-danger-secondary:hover {
    background-color: var(--red-600);
    border-color: var(--red-600);
    color: var(--white);
}
.btn-danger-secondary:disabled {
    background-color: var(--theme-light-40);
    border-color: var(--theme-danger-40);
    color: var(--theme-danger-40);
}
.btn-danger-tertiary {
    background-color: transparent;
    color: var(--red-700);
    border: none;
}
.btn-danger-tertiary:hover {
    background-color: var(--red-100);
    color: var(--red-700);
}
.btn-danger-tertiary:disabled {
    color: var(--red-700-40);
    background-color: var(--red-100-40);
}
.btn-danger-ghost {
    background-color: var(--red-100);
    color: var(--red-700);
}
.btn-danger-ghost:hover {
    background-color: var(--red-600);
    color: var(--white);
}
.btn-danger-ghost:disabled {
    background-color: var(--red-100-40);
    color: var(--red-700-40);
}
.btn-info {
    background-color: var(--theme-info);
    color: var(--white);
}
.btn-info:hover {
    background-color: var(--cyan-700);
    color: var(--white);
}
.btn-info:active,
.btn-info:focus,
.btn-info:focus-visible {
    background-color: var(--cyan-700);
    color: var(--white);
}
.btn-info:disabled {
    background-color: var(--theme-info-40);
    color: var(--white);
}
.btn-info-secondary {
    background-color: var(--theme-light);
    color: var(--theme-info);
    border: solid var(--theme-info);
}
.btn-info-secondary:hover {
    background-color: var(--cyan-700);
    border-color: var(--cyan-700);
    color: var(--white);
}
.btn-info-secondary:disabled {
    background-color: var(--theme-light-40);
    border-color: var(--theme-info-40);
    color: var(--theme-info-40);
}
.btn-info-tertiary {
    background-color: transparent;
    color: var(--cyan-800);
}
.btn-info-tertiary:hover {
    background-color: var(--cyan-100);
    color: var(--cyan-800);
}
.btn-info-tertiary:disabled {
    background-color: var(--cyan-100-40);
    color: var(--cyan-800-40);
}
.btn-info-ghost {
    background-color: var(--cyan-100);
    color: var(--cyan-800);
}
.btn-info-ghost:hover {
    background-color: var(--cyan-700);
    color: var(--white);
}
.btn-info-ghost:disabled {
    background-color: var(--cyan-100-40);
    color: var(--cyan-800-40);
}
.btn-warning {
    background-color: var(--theme-warning);
    color: var(--gray-900);
}
.btn-warning:hover {
    background-color: var(--yellow-700);
    color: var(--white);
}
.btn-warning:disabled {
    background-color: var(--theme-warning-40);
    color: var(--gray-900-40);
}
.btn-warning-secondary {
    background-color: var(--theme-light);
    border: solid var(--theme-warning);
    color: var(--theme-warning);
}
.btn-warning-secondary:hover {
    background-color: var(--yellow-700);
    border-color: var(--yellow-700);
    color: var(--white);
}
.btn-warning-secondary:disabled {
    background-color: var(--theme-light-40);
    border-color: var(--theme-warning-40);
    color: var(--theme-warning-40);
}
.btn-warning-tertiary {
    background-color: transparent;
    color: var(--yellow-800);
}
.btn-warning-tertiary:hover {
    background-color: var(--yellow-100);
    color: var(--yellow-800);
}
.btn-warning-tertiary:disabled {
    background-color: transparent;
    color: var(--yellow-800-40);
}
.btn-warning-ghost {
    background-color: var(--yellow-100);
    color: var(--yellow-800);
}
.btn-warning-ghost:hover {
    background-color: var(--yellow-700);
    color: var(--white);
}
.btn-warning-ghost:disabled {
    background-color: var(--yellow-100-40);
    color: var(--yellow-800-40);
}
main {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    background-color: var(--white);
    background-clip: padding-box;
    outline: 0;
}
.hdr {
    min-height: clamp(65px, 10vw, 90px);
    border-bottom: 5px solid;
    padding: 0.5rem 1rem;
}
.modal-fullscreen .modal-body {
    padding: 0;
    background-color: var(--gray-100) !important;
}
.stretch {
    align-items: stretch !important;
}
#onboarding {
    flex: 1 1 auto;
    background-color: var(--gray-100);
}
.dashboard {
    flex: 1 1 auto;
    background-color: var(--gray-100);
    overflow-y: auto;
    display: none;
}
.dashboard-container {
    padding-top: 40px;
    padding-bottom: 100px;
}
.wl-bg {
    width: auto;
    height: 80%;
    bottom: 10px;
    right: 0;
    z-index: 1;
    opacity: 0.75;
    transform-origin: center center;
}
.wl-in {
    pointer-events: none;
}
.wl-in.form-check-input:checked {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
}
.wl-in.form-check-input:focus {
    box-shadow: none !important;
    border: none !important;
}
.bloc,
.bloc-sm {
    background-color: var(--white);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}
.bloc-sm {
    height: 100%;
    padding-left: 0;
}
.sts {
    background-color: var(--white);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sts-bg {
    position: absolute;
    width: auto;
    height: 66% !important;
    bottom: -13%;
    right: -10%;
    z-index: 1;
    opacity: 0.55;
    transform-origin: center center;
    transition: transform 500ms ease;
}
@keyframes slide1Animation {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}
@keyframes slide2Animation {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(-70px) rotate(-20deg);
    }
}
@keyframes slide3Animation {
    0% {
        transform: translateX(-70px) rotate(-20deg);
    }
    100% {
        transform: translateX(-140px) rotate(-30deg);
    }
}
@keyframes slide4Animation {
    0% {
        transform: translateX(-140px) rotate(-30deg);
    }
    100% {
        transform: translateX(-190px) rotate(-40deg);
    }
}
.sts-bg-anim1 {
    animation: slide1Animation 500ms ease forwards;
}
.sts-bg-anim2 {
    animation: slide2Animation 500ms ease forwards;
}
.sts-bg-anim3 {
    animation: slide3Animation 500ms ease forwards;
}
.sts-bg-anim4 {
    animation: slide4Animation 500ms ease forwards;
}
.st-slider {
    width: 100%;
    height: 100%;
    position: relative;
}
.swiper-slide.st-slide {
    background: var(--white);
    padding: 36px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    height: 100%;
    transition-property: transform;
}
.slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
.swiper-pagination {
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}
.swiper-pagination-bullet {
    background: var(--gray-300) !important;
}
.swiper-pagination-bullet-active {
    background: var(--theme-primary) !important;
}
.dash-btn,
.dash-btn-h {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 0;
    align-items: center;
    font-size: var(--fs16);
    color: var(--text-primary);
    background-color: var(--white);
}
.dash-btn {
    justify-content: center;
    flex-direction: column;
    padding: 34px 20px;
}
.dash-btn-img {
    padding: 5px 0;
    justify-content: space-between;
    gap: 0;
}
.dash-btn-h {
    justify-content: start;
    padding: 16px;
    gap: 8px;
}
.dashicon {
    font-size: 1.2rem;
    color: var(--theme-primary);
}
.dashcover {
    overflow: hidden;
    width: 70%;
}
.tiles {
    position: relative;
    flex: 1 1 auto;
    background-color: var(--gray-100);
    overflow-y: auto;
    outline: none;
    padding-bottom: 90px;
}
.brand {
    font-size: 1.5rem;
    font-weight: 500;
    overflow: hidden;
    /* letter-spacing: 0.1rem; */
}
.btn:disabled {
    cursor: not-allowed !important;
}
.wy-dash {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 8px 0;
    align-items: center;
    border-radius: 0;
    background-color: var(--white);
}
.wy-dash:hover {
    background-color: var(--gray-200);
}
.wy-dash:hover * {
    color: var(--black);
}
.wy-flex {
    border: none;
    flex: 1 1 auto;
    border-radius: 0;
    margin: 0;
    font-size: 1.2rem;
    padding: 1em;
}
.wy-over {
    position: fixed;
    bottom: 100px;
    left: 20px;
    right: 20px;
    height: 60px;
}
.wy-back {
    padding: 0 0.25em;
    color: var(--text-primary);
    margin: -0.5rem 0rem -0.5rem -0.5rem;
    font-size: 1.8rem;
}
.wy-add {
    position: fixed;
    bottom: 100px;
    right: 30px;
    border-radius: 50%;
    height: 75px;
    width: 75px;
    padding: 0;
    text-align: center;
    font-size: 2rem;
}
.wy-icn {
    padding: 0;
    font-size: 1.75rem !important;
}
.nav-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--theme-secondary);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.wy-border-top {
    border-top: 2px solid #333;
}
.wy-e-true {
    color: var(--black) !important;
}
.wy-e-false > div {
    color: #aaa !important;
}
.ch-row:has(input[type='checkbox']:checked) {
    border: 2px solid var(--black) !important;
}
.cm-row:has(.cmcb:checked) {
    border: 2px solid var(--black) !important;
}
.cm-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name total"
        "phone debt";
    align-items: center;
    row-gap: 4px;
    width: 100%;
}
.cm-col-name { grid-area: name; }
.cm-col-phone { grid-area: phone; padding-left: 31px; }
.cm-col-total { grid-area: total; }
.cm-col-debt { grid-area: debt; }
@media (min-width: 768px) {
    .cm-grid {
        grid-template-columns: minmax(190px, 1fr) 1fr 1fr auto;
        grid-template-areas: "name phone total debt";
        column-gap: 12px;
        row-gap: 0;
    }
    .cm-col-phone { padding-left: 0; text-align: center; }
    .cm-col-total { justify-content: end; }
}
.pv-row:has(.pvcb:checked) {
    border: 2px solid var(--black) !important;
}
/* TODO */
.onboarding {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.step-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    justify-content: center;
    align-items: center;
}
#demo-status-message {
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
#demo-status-message.show {
    opacity: 1;
    transform: translateY(0);
}
.step-spinner {
    border: 3px solid var(--gray-300);
    border-top: 3px solid var(--blue-500);
    border-radius: 50%;
    min-width: 20px;
    min-height: 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.prd-drd {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
}
.prd-drd li button.dropdown-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.prd-drd li button.dropdown-item i.mdi {
    font-size: 1.2rem;
}
.prd-fs li .dropdown-item.active {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}
.prd-fs li .dropdown-item.active:hover {
    background-color: var(--theme-primary) !important;
    color: white !important;
    opacity: 0.9;
}
.prd-fs li .dropdown-item:hover {
    background-color: var(--gray-200) !important;
    color: var(--black) !important;
}
.btn#tbf::after,
.btn#cbf::after,
.btn#pbf::after {
    display: none;
}
.btn#tbf::before,
.btn#cbf::before,
.btn#pbf::before {
    font-family: 'Material Design Icons';
    color: var(--text-primary);
    margin-left: 5px;
    position: absolute;
    right: 8px;
}
.btn#tbf::before,
.btn#cbf::before,
.btn#pbf::before {
    content: '\F0232';
}
.prd-details .accordion-button::after {
    display: none;
}
.prd-details .accordion-chevron {
    transition: transform 0.2s ease-in-out;
}
.prd-details .accordion-button.collapsed .accordion-chevron {
    transform: rotate(0deg);
}
.prd-details .accordion-button:not(.collapsed) .accordion-chevron {
    transform: rotate(180deg);
}
.img-input:hover {
    background-color: var(--gray-300) !important;
}
.av {
    background-color: var(--gray-200);
    border: 2px solid var(--gray-900);
    color: var(--gray-900);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ntav {
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    color: var(--gray-900);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.av.selected,
.ntav.selected {
    background-color: var(--gray-200);
    border: 2px solid var(--gray-900);
    font-weight: 500;
    cursor: not-allowed;
}
.av:not(.selected),
.ntav:not(.selected) {
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    cursor: pointer;
}
.search {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--white);
}
.search-body {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}
.itch {
    outline: none;
    border: none;
    flex-grow: 1;
    min-width: 20px;
    padding: 15px 10px;
}
.tich {
    outline: none;
    border: none;
    flex-grow: 1;
    min-width: 20px;
    padding: 10px;
    background-color: transparent;
}
.crcl {
    display: none;
    color: #ccc;
    font-weight: bold;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.3);
    padding: 12px;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 64px;
    height: 64px;
}
.ldr {
    display: none;
    color: #999;
    position: absolute;
    white-space: nowrap;
    left: 50%;
    top: 12px;
    transform: translate(-50%, 0%);
    border-radius: 3px;
    z-index: 9999;
    margin-top: 0.75rem;
}
.msg {
    position: fixed;
    z-index: 9999;
    max-width: 450px;
    overflow: hidden;
    left: 50%;
    bottom: 45px;
    transform: translate(-50%, 0%);
}
.ptr {
    cursor: pointer;
}
.crd {
    margin: 1rem 0;
    padding-bottom: 0.5rem;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2);
}
.crdr {
    width: 100%;
    margin-bottom: 1rem;
    padding: 12px 16px 16px;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 4px 4px 12px 12px;
    border: 1px solid var(--border-primary) !important;
    border-left: 5px solid !important;
}
.crdn {
    padding: 16px 20px 20px;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 4px 4px 12px 12px;
    border: 1px solid var(--border-primary);
    border-left: 5px solid;
}
.mh-title {
    font-size: 1.5rem;
    font-weight: 500;
    overflow: hidden;
    text-align: center;
    letter-spacing: 0.1rem;
}
.dashed {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px dashed var(--gray-500);
}
.empty-trs {
    border: 1px solid var(--border-primary);
}
.input-primary,
.select-primary {
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    width: 100%;
    border-radius: 6px;
}
.input-primary {
    height: 50px;
    padding: 14px 16px;
}
.select-primary {
    height: 45px;
}
.textarea-primary {
    background-color: var(--white);
    border: 1px solid var(--gray-300);
    padding: 12px;
    border-radius: 6px;
}
.input-primary:focus {
    border-color: #86b7fe;
    outline: none;
}
input.tri:focus {
    border: 1px solid #86b7fe !important;
    outline: none;
}
.focus-ring:focus {
    box-shadow: none !important;
}
.input-primary::placeholder {
    color: var(--gray-500);
}
input.form-check-input:not([role='switch']) {
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    border: 2px solid #666 !important;
}
input.form-check-input:checked {
    background-color: var(--black) !important;
    border: 2px solid var(--black) !important;
}
input.form-check-input:focus {
    box-shadow: none;
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e") !important;
    border-color: var(--black) !important;
}
.inic {
    color: var(--gray-500);
    position: absolute;
    left: 5px;
    top: 8px;
}
.cpm:hover {
    color: var(--gray-200) !important;
}
.form-control:disabled {
    background-color: var(--white) !important;
}
.yo {
    border-left-color: #198754 !important;
}
.yno {
    border-color: #198754 !important;
}
.yi {
    border-left-color: #ffc107 !important;
}
.yni {
    border-color: #ffc107 !important;
}
.ya {
    border-left-color: #0d6efd !important;
}
.yna {
    border-color: #0d6efd !important;
}
.yt {
    border-left-color: #0dcaf0 !important;
}
.ynt {
    border-color: #0dcaf0 !important;
}
.yn {
    border-left-color: #6f42c1 !important;
}
.ynn {
    border-color: #6f42c1 !important;
}
.ynit {
    border-color: var(--red-500) !important;
}
.crdr .mdi-progress-check,
.crdr .mdi-alarm-check {
    color: var(--yellow-600);
}
.crdr .mdi-check {
    color: var(--theme-info) !important;
}
.crdr .mdi-check-all {
    color: var(--theme-success) !important;
}
.crdr .mdi-undo {
    color: var(--text-secondary) !important;
}
.crd-title {
    font-size: 1.2rem;
    font-weight: 500;
    padding-top: 5px;
    text-align: center;
}
.crd-sub {
    font-size: 0.8rem;
    color: #999999;
    padding-bottom: 9px;
    text-align: center;
}
.bxs {
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
.scr {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--theme-light);
    z-index: 9900;
}
.v-center {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.splash {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pwd {
    background-color: #e6f0ff;
    border: none;
    max-width: 150px;
    letter-spacing: 6px;
    padding-left: 12px;
    height: 100%;
    width: 100%;
}
.lbl {
    color: #666;
    font-size: 0.85em;
    white-space: nowrap;
    padding-left: 0.75rem;
}
.act {
    border-radius: 50%;
    width: 58px;
    height: 58px;
    padding: 0;
    z-index: 9;
}
.isl,
.csl,
.psl {
    margin: 5px 15px 5px 0;
    cursor: pointer;
}
.ie {
    margin: 7px 3px;
    cursor: pointer;
}
.numpad {
    color: #333;
    background-color: unset;
    border-color: #f1f1f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    min-height: 70px;
    border-radius: 0;
    border: 1px solid transparent;
    width: 100%;
    font-size: 1.5rem;
}
.numpad:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--black);
}
#wincode .accordion-button::after {
    display: none !important;
}
#wincode .aic {
    transition: transform 0.2s ease-in-out;
}
#wincode .accordion-button.collapsed .aic {
    transform: rotate(0deg);
}
#wincode .accordion-button:not(.collapsed) .aic {
    transform: rotate(180deg);
}
.lsd input[type='radio'] {
    accent-color: var(--black);
}
.lsd .tsi:has(input:checked) {
    border: 2px solid var(--black) !important;
}
.lsd .tsi:hover {
    background-color: var(--gray-200);
}
#store-name-display {
    letter-spacing: 1px;
    -webkit-text-stroke: 0px var(--text-secondary);
    text-shadow:
        -2px -2px 0 var(--text-secondary),
        2px -2px 0 var(--text-secondary),
        -2px 2px 0 var(--text-secondary),
        2px 2px 0 var(--text-secondary),
        0px -2px 0 var(--text-secondary),
        2px 0px 0 var(--text-secondary),
        0px 2px 0 var(--text-secondary),
        -2px 0px 0 var(--text-secondary);
}
.on {
    color: var(--black);
}
.wy {
    cursor: pointer;
    font-size: 1rem;
}
.wy:active {
    background-color: #e6f0ff;
    color: #005acc;
}
.wy:hover {
    background-color: #e6f0ff;
    color: #005acc;
}
.wy-hi {
    color: #005acc;
}
.wy-ho {
    background-color: #e6f0ff;
    color: #005acc;
}
.def-cursor {
    cursor: default !important;
}
.tri {
    width: 100%;
    /* border: none; */
    outline: none;
    font-size: 1rem;
    background-color: transparent;
    padding-left: 0.1rem !important;
    padding-right: 0.1rem !important;
    margin: 0;
}
.trx {
    position: absolute;
    left: 5px;
    top: 50%;
    color: #999;
    transform: translateY(-50%);
}
.xlh {
    border-bottom: 2px solid #333 !important;
    padding: 5px 11px 5px 1px;
    color: #666;
}
.xlc {
    background-color: #e6e6e6 !important;
    font-weight: normal;
    padding: 0 7px !important;
}
.xli {
    border: none;
    outline: none;
    width: 100%;
    padding: 5px;
}
.xlf {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.xlb {
    cursor: pointer;
}
.stl {
    padding-right: 0.25rem;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8rem;
}
.tile {
    position: relative;
    width: 160px;
    max-width: 220px;
    margin: 2px;
    cursor: pointer;
    overflow: hidden;
    flex: 1 1 auto;
}
.alpha {
    display: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2rem;
    color: #999;
    padding-left: 15px;
    padding-top: 15px;
}
.stf {
    width: 160px;
    max-width: 220px;
    /*margin: 2px;*/
    flex: 1 1 auto;
}
.tpad {
    width: 100%;
    padding-top: 100%;
}
.tback {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    color: rgba(256, 256, 256, 0.4);
    font-size: 8rem;
    font-weight: bold;
    line-height: 160px;
    text-align: center;
    text-transform: uppercase;
}
.tim {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
}
.tcover {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    line-height: 1.5rem;
    letter-spacing: 1px;
    max-height: 100%;
    min-height: 40%;
    overflow: hidden;
    padding: 0 4px 20px 4px;
}
.tdesc {
    font-size: 16px;
    line-height: 24px;
    height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tprice {
    position: absolute;
    right: 6px;
    bottom: 0;
    color: #fff;
    font-size: 0.75rem;
}
.hsh {
    position: absolute;
    top: 0;
    width: 100%;
}
.twitter-typeahead {
    width: 100%;
}
.tt-menu {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    font-size: 20px !important;
    font-weight: normal !important;
}
.tt-selectable {
    cursor: pointer;
    padding: 5px;
    border-top: 1px solid #ccc;
}
.tt-selectable:hover {
    background-color: #e6f0ff;
}
.tt-cursor {
    background-color: #e6f0ff;
}
.se {
    cursor: pointer;
    padding: 15px 5px;
    border-bottom: 1px solid #eee;
}
.se:hover {
    background-color: #e6f0ff;
}
.ses {
    background-color: #e6f0ff;
    font-weight: bold;
}
.iv {
    font-size: 1.2rem;
    padding: 15px 5px;
    border-bottom: 1px solid #eee;
}
.sm {
    margin-top: 8px;
}
.smi {
    width: 100%;
    height: 100%;
    padding: 6px;
}
.siv {
    margin-top: 6px;
}
.mni {
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.mni:hover {
    background-color: #f7f7f7;
}
.dct {
    display: none;
    position: absolute;
    left: 12px;
    top: -8px;
    max-width: 87%;
    max-height: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.ctr {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
}
.ctd {
    min-width: 30px;
    font-size: 1.2rem;
}
.cty,
.ctn {
    min-width: 45px;
    text-decoration: underline;
    color: #0d6efd !important;
}
.crv {
    display: inline-block;
    width: 29%;
    height: 50px;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    background-color: #f1f1f1;
    margin-bottom: 5px;
    text-align: center;
}
.crv:hover {
    background-color: #e6f0ff;
    color: #0d6efd;
}
.pick-color {
    height: 40px;
}
.h16 {
    min-height: 16px;
}
.h20 {
    min-height: 20px;
}
.h25 {
    min-height: 25px;
}
.h30 {
    min-height: 30px;
}
.h50 {
    min-height: 50px;
}
.hm50 {
    max-height: 50px;
}
.h100 {
    min-height: 100px;
}
.h250 {
    min-height: 250px;
}
.h25em {
    min-height: 2.5em;
}
.w100 {
    max-width: 100px !important;
    min-width: 50px !important;
}
.w120 {
    max-width: 120px !important;
    min-width: 60px !important;
}
.w200 {
    max-width: 200px;
}
.w400 {
    max-width: 400px;
    margin: auto;
}
.w300 {
    max-width: 300px;
}
.w440 {
    max-width: 440px;
    margin: auto;
}
.w460 {
    max-width: 460px;
    margin: auto;
}
.w600 {
    max-width: 600px;
    margin: auto;
}
.w720 {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}
.w920 {
    max-width: 920px;
    margin: auto;
}
.w-15 {
    width: 15%;
}
.w25r {
    width: 2.5rem !important;
}
.w-10 {
    width: 10%;
}
.w-30 {
    width: 30%;
}
.w-16 {
    width: 16px;
}
.h-16 {
    height: 16px;
}
.w-18 {
    width: 18px;
}
.h-18 {
    height: 18px;
}
.w-20 {
    width: 20px;
}
.w-30px {
    width: 30px;
}
.h-20 {
    height: 20px;
}
.w-50px {
    width: 50px;
}
.w-46 {
    width: 46px;
}
.h-46 {
    height: 46px;
}
.h-50px {
    height: 50px;
}
.w-64 {
    width: 64px;
}
.h-64 {
    height: 64px;
}
.w-80 {
    width: 80px;
}
.h-80px {
    height: 80px;
}
.w-68 {
    width: 68%;
}
.w-90 {
    width: 90%;
}
.w-full {
    width: 100%;
}
.w-100px {
    width: 100px;
}
.w-110 {
    width: 110px;
}
.w-120 {
    width: 120px;
}
.w-140 {
    width: 140px;
}
.w-250 {
    width: 250px;
}
.h-100px {
    height: 100px;
}
.bold {
    font-weight: bold;
}
.sub {
    margin-top: -0.35rem;
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 400;
}
.oneline,
.modal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.watch {
    display: none;
    position: fixed;
    bottom: 200px;
    left: 15px;
    width: 100px;
    height: 175px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}
.watch span {
    float: right;
    font-weight: bold;
}
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    box-shadow: none;
}
.bpt {
    border: 3px solid #1982c4;
    background-color: rgba(25, 130, 196, 0.1);
    display: inline-block;
    margin-bottom: -2px;
    border-radius: 50%;
    width: 14px;
    height: 14px;
}
.gpt {
    border: 3px solid #50b432;
    background-color: #50b43220;
    display: inline-block;
    margin-bottom: -2px;
    border-radius: 50%;
    width: 14px;
    height: 14px;
}
.sdp {
    display: inline-block;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stable {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1rem;
}
.stable th {
    font-size: 0.7rem;
    font-weight: normal;
}
.stable td {
    font-weight: bold;
}
.scrolled {
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
}
.linethrough {
    transform: translateY(-50%);
}
.pim {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.pim-label {
    margin-bottom: 0px !important;
    cursor: pointer;
}
.iim {
    max-width: 170px;
    max-height: 170px;
    cursor: pointer;
}
.iit {
    position: relative;
    width: 170px;
    height: 170px;
}
.iib {
    cursor: pointer;
    font-size: 8rem !important;
}
.iii,
.iid {
    cursor: pointer;
    margin-top: 12px;
}
.iic {
    position: absolute;
    top: 0;
    left: 0;
}
.it-tile-sm {
    position: relative;
    width: 170px;
    height: 170px;
    min-width: 170px;
    border-radius: 10px;
    overflow: hidden;
}
.it-tile-bg-sm {
    font-size: 5rem !important;
    line-height: 170px;
}
.it-tile-img-sm {
    position: absolute;
    top: 0;
    left: 0;
}
.it-img-sm {
    width: 170px;
    height: 170px;
    object-fit: cover;
}
.upload-bar {
    margin: 10px 0;
    height: 47px;
    background-color: #ccc;
}
.firebaseui-title {
    display: none;
}
.firebaseui-card-header {
    border-bottom: none !important;
}
.floating-label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
table.sortable span.arrow {
    display: inline-block;
    position: absolute;
    top: 50%;
    border-style: solid;
    border-width: 5px;
    font-size: 0;
    border-color: #999 transparent transparent transparent;
    line-height: 0;
    height: 0;
    width: 0;
    margin-left: 1px;
}
table.sortable span.arrow.up,
th.arrow.up:after {
    border-color: transparent transparent #999 transparent;
    top: 35%;
}
.modal-header {
    border-top-right-radius: 12px !important;
    border-top-left-radius: 12px !important;
}
.modal-footer {
    border-bottom-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}
.modal-right .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    height: 100%;
}
.modal-right .modal-content {
    height: 100%;
    min-width: 400px;
    border: 0;
    border-radius: 0.3rem 0 0 0.3rem;
}
.modal-right .modal-body {
    overflow-y: auto;
    position: relative;
    background-color: var(--gray-100);
}
.modal .modal-header {
    background-color: var(--white);
    padding-top: 12px;
    padding-bottom: 12px;
}
#main-header {
    min-height: clamp(56px, 8vw, 64px) !important;
}
.alert {
    border: 0 !important;
}
.alert-dismissible .btn-close {
    background-size: 13px;
    padding-top: 9px;
}
.alert-dismissible {
    padding: 12px 3rem 12px 1rem;
}
.stepper {
    max-width: 460px;
    margin-left: 20px;
    padding-left: 26px;
}
.step::before {
    content: attr(data-step);
    position: absolute;
    left: -45px;
    top: 0;
    width: 28px;
    height: 28px;
    background-color: var(--gray-300);
    color: var(--theme-primary);
    font-size: var(--fs16);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -31px;
    top: 28px;
    height: 100%;
    width: 2px;
    background-color: var(--gray-200);
}
.imp-alert::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #d4f5fc;
}
.btn-close:focus {
    box-shadow: none !important;
}
.btn-close:focus-visible {
    outline: none !important;
}
#nt .modal-footer {
    display: none;
    position: absolute;
    bottom: 0;
}
.wy-close,
.wy-expand {
    height: 42px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 0.25em;
    color: #333;
    background-color: rgba(230, 230, 230, 0.75);
}
.wy-expand {
    background-color: unset;
    margin-right: 0.25em;
}
.wy-close:hover,
.wy-expand:hover {
    color: var(--black);
}
.wy-expand:hover {
    background-color: rgba(230, 230, 230, 0.75);
}
.notif-card {
    border-bottom: 1px solid var(--border-primary) !important;
    background-color: #fff;
    border-radius: 0.25rem;
}
.notif-card.active {
    border-left: 3px solid #93c5fd;
}
.notif-card:hover {
    background-color: #e7f0fe;
    cursor: pointer;
}
.notif-body {
    font-size: 18px;
}
.notif-header {
    font-size: 16px;
}
#nb-nt {
    position: absolute;
    top: -0.3rem;
    right: -0.5rem;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.7rem;
    border-radius: 50%;
    background-color: #0d6efd;
    color: #fff;
}
.nb-nt-badge {
    font-size: 0.7rem;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #0d6efd;
    color: #fff;
    margin-left: auto;
}
.btn-icon {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}
.btn-icon:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-100);
}
.btn-icon i {
    height: 20px;
    width: 20px;
}
.btn-icon i::before {
    width: 20px;
    height: 20px;
}
.brand-wrapper {
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand {
    min-width: 0; 
    flex-shrink: 1;
}
.brand span {
    display: inline;
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    text-overflow: ellipsis;
}
#brand i.mdi-chevron-down {
    font-weight: 500;
    font-size: 28px;
    padding-top: 5px;
}
.text-small {
    font-size: 0.75rem;
}
#ntfl {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
label::after {
    background-color: transparent !important;
}
.border-focus {
    border-color: var(--border-primary) !important;
}
.border-focus:focus {
    border-color: #0d6efd !important;
}
.tt-dataset {
    max-height: 260px;
    overflow-y: auto;
}
.service-container {
    position: relative;
    overflow: hidden;
}
.service {
    position: absolute;
    top: 6px;
    left: -34px;
    color: #ffffff;
    width: 100px;
    height: 22px;
    font-size: 16px;
    transform: rotate(-45deg);
    text-transform: uppercase;
}
.new-service {
    background-color: #28a745;
}
.soon-service {
    background-color: #4077bb;
}
.cropper-container {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.cropper-container img {
    max-width: 100%;
    height: auto;
    display: block;
}
.tt-hint::placeholder {
    color: transparent;
}
.dt-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dt-paging-button {
    margin-bottom: 0;
}
.page-link:not(.first):not(.last):not(.previous):not(.next) {
    color: white !important;
}
.dt-table th {
    background-color: white !important;
}
.dt-info {
    font-size: 14px;
    color: #666;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
    outline: unset;
}
.bdr-b {
    border-bottom: 1px solid #333 !important;
}
#pvlc {
    height: calc(100vh - 360px);
    overflow: auto;
}
.pvli {
    border-bottom: 1px solid var(--border-primary);
}
.pvli:last-child {
    border-bottom: none;
}
.cmli:hover,
.pvli:hover {
    background-color: var(--gray-100);
}
.cmli.selected,
.pvli.selected {
    background-color: #e2eaf769;
    font-weight: bold;
}
.iti {
    --iti-path-flags-1x: url('../img/flags.webp');
    --iti-path-flags-2x: url('../img/flags@2x.webp');
    --iti-path-globe-1x: url('../img/globe.webp');
    --iti-path-globe-2x: url('../img/globe@2x.webp');
    width: 100%;
}
#auth-native .language {
    top: 16px;
    right: 12px;
}
#auth-native .language select {
    color: #0a3622 !important;
    outline: none;
}
#auth-native .welcome-header {
    margin: 28px 0;
    font-size: 28px;
}
#auth-native .auth-label {
    font-size: 1rem;
}
#auth-native .form-control {
    border: 1px solid var(--border-primary);
    color: var(--gray-900);
    font-size: 1rem !important;
    padding: 0.375rem 0.75rem;
    height: 46px;
}
#auth-native .form-control#auth-phone {
    padding: 0.375rem 0.75rem 0.375rem 55px;
}
#auth-native .form-control:focus {
    border: #c7cace 1px solid !important;
}
#auth-native .auth-card {
    border: 1px solid var(--border-primary);
    background: var(--white);
    border-radius: 12px;
    padding: 20px 24px;
    gap: 26px;
}
.auth-link {
    color: var(--text-secondary) !important;
    font-size: 1rem;
    text-decoration: none;
}
.auth-link:hover {
    color: var(--text-secondary) !important;
    text-decoration: underline;
}
.link-btn {
    border: none;
    outline: none;
    background: transparent;
    text-decoration: underline;
}
.reset-pwd-text,
.msg-otp {
    font-size: 16px;
    color: var(--text-secondary);
}
.chabt:hover {
    background: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}
.auth-error {
    min-height: 16px;
}
.auth-error p {
    color: var(--text-danger);
    position: relative;
    margin-left: 20px;
    line-height: 16px;
    font-size: 14px;
}
.auth-error p::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.33301 11.9997H8.66634V13.333H7.33301V11.9997ZM7.33301 6.66634H8.66634V10.6663H7.33301V6.66634ZM7.99967 3.33301C4.31301 3.33301 1.33301 6.33301 1.33301 9.99967C1.33301 11.7678 2.03539 13.4635 3.28563 14.7137C3.90469 15.3328 4.63961 15.8238 5.44845 16.1589C6.25729 16.4939 7.1242 16.6663 7.99967 16.6663C9.76778 16.6663 11.4635 15.964 12.7137 14.7137C13.964 13.4635 14.6663 11.7678 14.6663 9.99967C14.6663 9.1242 14.4939 8.25729 14.1589 7.44845C13.8238 6.63961 13.3328 5.90469 12.7137 5.28563C12.0947 4.66657 11.3597 4.17551 10.5509 3.84048C9.74206 3.50545 8.87515 3.33301 7.99967 3.33301ZM7.99967 15.333C6.58519 15.333 5.22863 14.7711 4.22844 13.7709C3.22824 12.7707 2.66634 11.4142 2.66634 9.99967C2.66634 8.58519 3.22824 7.22863 4.22844 6.22844C5.22863 5.22824 6.58519 4.66634 7.99967 4.66634C9.41416 4.66634 10.7707 5.22824 11.7709 6.22844C12.7711 7.22863 13.333 8.58519 13.333 9.99967C13.333 11.4142 12.7711 12.7707 11.7709 13.7709C10.7707 14.7711 9.41416 15.333 7.99967 15.333Z' fill='%23B82A38'/%3E%3C/svg%3E");
    position: absolute;
    margin-left: -12px;
    margin-top: -2px;
    left: -7px;
    width: 8px;
    height: 8px;
}
.divider {
    text-align: left;
    font-size: 14px;
    color: var(--gray-600);
    position: relative;
}
.divider::after {
    content: '';
    position: absolute;
    width: 93%;
    height: 1px;
    background-color: #ddd;
    top: 50%;
    right: 0;
}
.tos {
    padding: 0 12px;
    font-size: 14px;
    margin-bottom: 0;
    line-height: 18px;
    text-align: center;
    color: var(--text-secondary);
}
.ob-progress {
    height: 6px;
    background-color: var(--gray-200);
}
.ob-progress .progress-bar {
    background-color: var(--theme-primary);
}
#connection-status {
    position: fixed;
    bottom: -100px;
    opacity: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--white);
    font-size: medium;
    line-height: normal;
    text-align: center;
    padding: 8px;
    transition: bottom 0.5s ease-in-out;
    z-index: 9999;
}
#connection-status.offline {
    bottom: 0;
    opacity: 1;
}
.switch-field {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}
.switch-field label {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-in-out;
}
.switch-field label:hover {
    cursor: pointer;
}
.switch-field input:checked + label {
    background-color: var(--black);
    color: var(--white);
    box-shadow: none;
}
.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}
.error-container {
    height: 16px;
}
.error-container p {
    color: #dd2c00;
    line-height: 16px;
    font-size: 16px;
}
.custom-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid var(--gray-300);
    padding: 0;
    margin-bottom: 0.5rem;
    border-radius: 6px;
}
.custom-switch:has(.form-check-input:checked) {
    border-color: var(--black) !important;
}
.custom-switch .form-check-label {
    cursor: pointer;
    height: 50px;
    padding: 16px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}
.custom-switch .form-check-label:hover {
    background: var(--gray-200);
}
.custom-switch .form-check-input {
    margin-right: 8px;
    cursor: pointer;
}
.features-container {
    box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1);
}
#ticket {
    width: 360px;
    border: 1px solid var(--black);
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    font-size: 16px;
    word-wrap: break-word;
}
#ticket:before,
#ticket:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(90deg, white 0, white 10px, black 10px, black 15px);
    left: 0;
}
#ticket:before {
    top: -10px;
}
#ticket:after {
    bottom: -10px;
}
#ticket header {
    text-align: center;
    align-items: center;
    padding-bottom: 10px;
    font-size: 15px;
}
#ticket footer {
    text-align: center;
    font-size: 13px;
    margin-top: 8px;
}
#ticket-title {
    margin: 0;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: bold;
}
#ticket-type {
    font-size: 16px;
    text-align: center;
    border-top: 2px dashed black !important;
    border-bottom: 2px dashed black !important;
    margin-bottom: 8px;
    padding: 4px 0;
}
#ticket .details {
    margin-bottom: 4px;
    font-size: 15px;
}
#ticket .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
#ticket-total {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    margin: 8px 0;
    padding: 4px 0;
    border-top: 2px dashed var(--black);
}
#ticket-footer {
    margin-top: 8px;
}
#ticket-details {
    border-top: 1px dashed var(--black);
    margin-top: 16px;
    padding-top: 8px;
}
.catalog-img {
    width: fit-content;
    border-radius: 5px;
    overflow: hidden;
}
.catalog-img div {
    width: clamp(40px, 10vw, 64px);
    height: clamp(40px, 10vw, 64px);
}
.tbac {
    font-size: 3rem;
    color: var(--white-40);
}
.linear-background {
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.inter-right--top {
    background: var(--white);
    width: 100%;
    height: 10px;
    position: absolute;
    top: 25px;
    left: 80px;
}
.inter-crop {
    background: var(--white);
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 60px;
}
.thin-scroll {
    overflow-y: auto;
}
.thin-scroll::-webkit-scrollbar {
    width: 10px;
}
.thin-scroll::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.thin-scroll::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.plans.m > .subp-y {
    display: none;
}
.plans.y > .subp-m {
    display: none;
}
.f-m::before,
.f-y::before {
    content: '/';
}
.best-plan {
    position: absolute;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    top: -25px;
    right: 0;
    background: rgb(234 179 8);
    color: var(--white);
    padding: 16px;
    margin-right: 16px;
    border-radius: 50%;
}
.pricing.best {
    background-color: rgba(219 234 254 / 50%);
    border: 2px solid rgb(37 99 235);
}
.status {
    display: inline-block;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    text-align: center;
    color: #333;
}
.status-billed {
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #4caf50;
}
.status-canceled {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #f44336;
}
.status-completed {
    background-color: #e3f2fd;
    border: 1px solid #bbdefb;
    color: #2196f3;
}
.status-past_due {
    background-color: #fff3e0;
    border: 1px solid #ffe0b2;
    color: #ff9800;
}
.status-payment_failed {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #d32f2f;
}
.status-revised {
    background-color: #f3e5f5;
    border: 1px solid #e1bee7;
    color: #9c27b0;
}
.status-active {
    background-color: #ecfcf6;
    border: 1px solid #b3e6d1;
    color: #2db57a;
}
.status-paused {
    background-color: #fff9e6;
    border: 1px solid #ffebcc;
    color: #f0ad4e;
}
.status-trialing {
    background-color: #eaf4fd;
    border: 1px solid #b6d4f5;
    color: #007bff;
}
.status-expired {
    background-color: #f8f2fc;
    border: 1px solid #e9d8f4;
    color: #8e44ad;
}
.watermark-icon {
    font-size: 90px;
    opacity: 0.05;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.sort-asc::before {
    content: '\F04BC' !important;
}
.sort-desc::before {
    content: '\F04BD' !important;
}
.hyphens-auto {
    hyphens: auto;
    overflow-wrap: break-word;
}
.flex-item {
    flex: 0 0 calc(50% - 6px);
}
@media only screen and (min-width: 576px) {
    .mxw-sm-20 {
        max-width: 20% !important;
    }
    .mxw-sm-25 {
        max-width: 25% !important;
    }
    .mxw-sm-50 {
        max-width: 50% !important;
    }
    .mxw-sm-200 {
        max-width: 200px !important;
    }
    .mnw-sm-35 {
        min-width: 35% !important;
    }
    .mnw-sm-120 {
        min-width: 120px !important;
    }
    .mnw-sm-200 {
        min-width: 200px !important;
    }
    .w-md-120 {
        width: 120px !important;
    }
    .w-sm-190 {
        width: 190px !important;
    }
}
@media only screen and (max-width: 576px) {
    html {
        font-size: var(--fs16);
    }
    .tile {
        width: 100px !important;
    }
    .stf {
        width: 100px !important;
    }
    #main-header {
        padding: 12px 16px;
    }
    .modal-right .modal-dialog {
        width: 100%;
        margin: 0;
    }
    .modal-right .modal-content {
        border-radius: 0 !important;
        min-width: 100%;
    }
    .modal-right .modal-content,
    .modal-right .modal-header {
        border-radius: 0 !important;
    }
    .msg {
        width: 90%;
    }
    .btn-icon {
        width: 20px;
        height: 20px;
        aspect-ratio: 1/1;
    }
    #brand span {
        max-width: 200px;
    }
    .tdesc {
        height: 35px;
        font-size: 14px;
        line-height: 18px;
    }
    .dt-bottom {
        flex-direction: column;
    }
    .crdn {
        padding: 12px 12px 16px;
    }
    .crdr {
        padding: 8px 4px 12px;
    }
    .dashboard-container {
        padding: 20px 16px 40px;
    }
    .sts-bg {
        height: 72% !important;
        bottom: -13%;
        right: -10%;
    }
    .dash-btn {
        padding: 20px 20px;
    }
    .mh-title {
        font-size: 1.1rem;
    }
    .p-xs-ig {
        padding: 6px 8px;
    }
    .ps-xs-8 {
        padding-left: 8px !important;
    }
    .ps-xs-31 {
        padding-left: 31px !important;
    }
    .pe-xs-0 {
        padding-right: 0px !important;
    }
    .px-xs-5 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .px-xs-8 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .px-xs-9 {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    .px-xs-12 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
    .px-xs-16 {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
    .py-xs-20 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .pt-xs-12 {
        padding-top: 12px !important;
    }
    .pt-xs-20 {
        padding-top: 20px !important;
    }
    .pt-xs-48 {
        padding-top: 48px !important;
    }
    .pb-xs-36 {
        padding-bottom: 36px !important;
    }
    .pb-xs-40 {
        padding-bottom: 40px !important;
    }
    .py-xs-13 {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
    .gap-xs-5 {
        gap: 5px !important;
    }
    .gap-xs-16 {
        gap: 16px !important;
    }
    .gap-xs-20 {
        gap: 20px !important;
    }
    .w-xs-36 {
        width: 36px !important;
    }
    .w-xs-60 {
        width: 60% !important;
    }
    .w-xs-70 {
        width: 70px !important;
    }
    .w-xs-75 {
        width: 75px !important;
    }
    .w-xs-80 {
        width: 80px !important;
    }
    .h-xs-100 {
        height: 100%;
    }
    .fs-xs-24 {
        font-size: 2.4rem !important;
    }
    .flex-item {
        flex: 0 0 100%;
    }
    .mnw-xs-80 {
        min-width: 80px !important;
    }
    .mnw-xs-94 {
        min-width: 94px !important;
    }
    .w-xs-100 {
        width: 100% !important;
    }
}
@media only screen and (min-width: 768px) {
    #main-header {
        padding-left: 48px;
        padding-right: 48px;
    }
    .mw-md-62 {
        max-width: 62% !important;
    }
    .w-md-90 {
        width: 90% !important;
    }
    .w-md-auto {
        width: auto !important;
    }
}
@media only screen and (max-width: 992px) {
    .wl-bg {
        height: 40%;
    }
    .sts-container {
        width: 100%;
    }
    .swiper-slide.st-slide {
        padding: 20px 20px;
    }
    .sts-bg {
        height: 78% !important;
        bottom: -13%;
        right: -10%;
    }
}
@media only screen and (min-width: 992px) {
    .sts-container {
        width: 29%;
        height: 100%;
    }
    .bloc {
        max-width: 500px;
    }
    .header-nav {
        max-width: 1140px !important;
    }
    .dashboard-container {
        max-width: 1140px;
    }
    .mw-md-600 {
        max-width: 600px !important;
    }
}
.overf-auto {
    overflow-y: auto;
}
@media screen and (min-width: 1200px) {
    .scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100vh - 100px);
    }
    .overf-xl-hidden {
        overflow-y: hidden !important;
    }
    .scroll::-webkit-scrollbar {
        width: 10px;
    }
    .scroll::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
    }
    .scroll::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
    .scroll::-webkit-scrollbar-thumb:hover {
        background-color: #bbb;
    }
    .mw-lg-600 {
        max-width: 600px !important;
    }
}

#acn[contenteditable],
#acp[contenteditable] {
    outline: none;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 0.2s;
}
#acn[contenteditable]:hover,
#acp[contenteditable]:hover { background-color: rgba(0,0,0,0.04); }
#acn[contenteditable]:focus,
#acp[contenteditable]:focus { background-color: rgba(0,0,0,0.06); }

.hs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: #e8f0fe;
    font-size: 0.82rem;
}
.hs-chip .btn-close { font-size: 0.55rem; }