관리-도구
편집 파일: style-extended.css
/* Temp Class */ .bg-primary-light, .btn-primary:disabled, .btn-primary:hover, .switch .slider, .switch_control, .switcher .slider, .switcher_control, .select2-container--default .select2-results__option--selected, .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { --bg-opacity: 0.1; background-color: var(--bg-shade); background-image: linear-gradient(0deg, rgba(var(--bs-primary-rgb), var(--bg-opacity)) 0%, rgba(var(--bs-primary-rgb), var(--bg-opacity)) 100%); } .bg-secondary-light, .btn-secondary:disabled, .btn-secondary:hover { --bg-opacity: 0.1; background-color: var(--bg-shade); background-image: linear-gradient(0deg, rgba(var(--bs-secondary-rgb), var(--bg-opacity)) 0%, rgba(var(--bs-secondary-rgb), var(--bg-opacity)) 100%); } /* Padding */ .p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .px-0 { padding-inline: 0 !important; } .py-0 { padding-block: 0 !important; } .ps-0 { padding-inline-start: 0 !important; } .pe-0 { padding-inline-end: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; } .px-1 { padding-inline: 0.25rem !important; } .py-1 { padding-block: 0.25rem !important; } .ps-1 { padding-inline-start: 0.25rem !important; } .pe-1 { padding-inline-end: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .px-2 { padding-inline: 0.5rem !important; } .py-2 { padding-block: 0.5rem !important; } .ps-2 { padding-inline-start: 0.5rem !important; } .pe-2 { padding-inline-end: 0.5rem !important; } .p-3 { padding: 1rem !important; } .pt-3 { padding-top: 1rem !important; } .pb-3 { padding-bottom: 1rem !important; } .px-3 { padding-inline: 1rem !important; } .py-3 { padding-block: 1rem !important; } .ps-3 { padding-inline-start: 1rem !important; } .pe-3 { padding-inline-end: 1rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .px-4 { padding-inline: 1.5rem !important; } .py-4 { padding-block: 1.5rem !important; } .ps-4 { padding-inline-start: 1.5rem !important; } .pe-4 { padding-inline-end: 1.5rem !important; } .p-5 { padding: 3rem !important; } .pt-5 { padding-top: 3rem !important; } .pb-5 { padding-bottom: 3rem !important; } .px-5 { padding-inline: 3rem !important; } .py-5 { padding-block: 3rem !important; } .ps-5 { padding-inline-start: 3rem !important; } .pe-5 { padding-inline-end: 3rem !important; } .p-10 { padding: 0.625rem !important; } .pt-10 { padding-top: 0.625rem !important; } .pb-10 { padding-bottom: 0.625rem !important; } .px-10 { padding-inline: 0.625rem !important; } .py-10 { padding-block: 0.625rem !important; } .ps-10 { padding-inline-start: 0.625rem !important; } .pe-10 { padding-inline-end: 0.625rem !important; } .p-12 { padding: 0.75rem !important; } .pt-12 { padding-top: 0.75rem !important; } .pb-12 { padding-bottom: 0.75rem !important; } .px-12 { padding-inline: 0.75rem !important; } .py-12 { padding-block: 0.75rem !important; } .ps-12 { padding-inline-start: 0.75rem !important; } .pe-12 { padding-inline-end: 0.75rem !important; } .p-20 { padding: 1.25rem !important; } .pt-20 { padding-top: 1.25rem !important; } .pb-20 { padding-bottom: 1.25rem !important; } .px-20 { padding-inline: 1.25rem !important; } .py-20 { padding-block: 1.25rem !important; } .ps-20 { padding-inline-start: 1.25rem !important; } .pe-20 { padding-inline-end: 1.25rem !important; } .p-30 { padding: 1.875rem !important; } .pt-30 { padding-top: 1.875rem !important; } .pb-30 { padding-bottom: 1.875rem !important; } .px-30 { padding-inline: 1.875rem !important; } .py-30 { padding-block: 1.875rem !important; } .ps-30 { padding-inline-start: 1.875rem !important; } .pe-30 { padding-inline-end: 1.875rem !important; } .p-40 { padding: 2.5rem !important; } .pt-40 { padding-top: 2.5rem !important; } .pb-40 { padding-bottom: 2.5rem !important; } .px-40 { padding-inline: 2.5rem !important; } .py-40 { padding-block: 2.5rem !important; } .ps-40 { padding-inline-start: 2.5rem !important; } .pe-40 { padding-inline-end: 2.5rem !important; } @media (min-width: 576px) { .p-sm-0 { padding: 0 !important; } .pt-sm-0 { padding-top: 0 !important; } .pb-sm-0 { padding-bottom: 0 !important; } .px-sm-0 { padding-inline: 0 !important; } .py-sm-0 { padding-block: 0 !important; } .ps-sm-0 { padding-inline-start: 0 !important; } .pe-sm-0 { padding-inline-end: 0 !important; } .p-sm-1 { padding: 0.25rem !important; } .pt-sm-1 { padding-top: 0.25rem !important; } .pb-sm-1 { padding-bottom: 0.25rem !important; } .px-sm-1 { padding-inline: 0.25rem !important; } .py-sm-1 { padding-block: 0.25rem !important; } .ps-sm-1 { padding-inline-start: 0.25rem !important; } .pe-sm-1 { padding-inline-end: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .pt-sm-2 { padding-top: 0.5rem !important; } .pb-sm-2 { padding-bottom: 0.5rem !important; } .px-sm-2 { padding-inline: 0.5rem !important; } .py-sm-2 { padding-block: 0.5rem !important; } .ps-sm-2 { padding-inline-start: 0.5rem !important; } .pe-sm-2 { padding-inline-end: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .pt-sm-3 { padding-top: 1rem !important; } .pb-sm-3 { padding-bottom: 1rem !important; } .px-sm-3 { padding-inline: 1rem !important; } .py-sm-3 { padding-block: 1rem !important; } .ps-sm-3 { padding-inline-start: 1rem !important; } .pe-sm-3 { padding-inline-end: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .pt-sm-4 { padding-top: 1.5rem !important; } .pb-sm-4 { padding-bottom: 1.5rem !important; } .px-sm-4 { padding-inline: 1.5rem !important; } .py-sm-4 { padding-block: 1.5rem !important; } .ps-sm-4 { padding-inline-start: 1.5rem !important; } .pe-sm-4 { padding-inline-end: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } .pt-sm-5 { padding-top: 3rem !important; } .pb-sm-5 { padding-bottom: 3rem !important; } .px-sm-5 { padding-inline: 3rem !important; } .py-sm-5 { padding-block: 3rem !important; } .ps-sm-5 { padding-inline-start: 3rem !important; } .pe-sm-5 { padding-inline-end: 3rem !important; } .p-sm-10 { padding: 0.625rem !important; } .pt-sm-10 { padding-top: 0.625rem !important; } .pb-sm-10 { padding-bottom: 0.625rem !important; } .px-sm-10 { padding-inline: 0.625rem !important; } .py-sm-10 { padding-block: 0.625rem !important; } .ps-sm-10 { padding-inline-start: 0.625rem !important; } .pe-sm-10 { padding-inline-end: 0.625rem !important; } .p-sm-12 { padding: 0.75rem !important; } .pt-sm-12 { padding-top: 0.75rem !important; } .pb-sm-12 { padding-bottom: 0.75rem !important; } .px-sm-12 { padding-inline: 0.75rem !important; } .py-sm-12 { padding-block: 0.75rem !important; } .ps-sm-12 { padding-inline-start: 0.75rem !important; } .pe-sm-12 { padding-inline-end: 0.75rem !important; } .p-sm-20 { padding: 1.25rem !important; } .pt-sm-20 { padding-top: 1.25rem !important; } .pb-sm-20 { padding-bottom: 1.25rem !important; } .px-sm-20 { padding-inline: 1.25rem !important; } .py-sm-20 { padding-block: 1.25rem !important; } .ps-sm-20 { padding-inline-start: 1.25rem !important; } .pe-sm-20 { padding-inline-end: 1.25rem !important; } .p-sm-30 { padding: 1.875rem !important; } .pt-sm-30 { padding-top: 1.875rem !important; } .pb-sm-30 { padding-bottom: 1.875rem !important; } .px-sm-30 { padding-inline: 1.875rem !important; } .py-sm-30 { padding-block: 1.875rem !important; } .ps-sm-30 { padding-inline-start: 1.875rem !important; } .pe-sm-30 { padding-inline-end: 1.875rem !important; } .p-sm-40 { padding: 2.5rem !important; } .pt-sm-40 { padding-top: 2.5rem !important; } .pb-sm-40 { padding-bottom: 2.5rem !important; } .px-sm-40 { padding-inline: 2.5rem !important; } .py-sm-40 { padding-block: 2.5rem !important; } .ps-sm-40 { padding-inline-start: 2.5rem !important; } .pe-sm-40 { padding-inline-end: 2.5rem !important; } } @media (min-width: 768px) { .p-md-0 { padding: 0 !important; } .pt-md-0 { padding-top: 0 !important; } .pb-md-0 { padding-bottom: 0 !important; } .px-md-0 { padding-inline: 0 !important; } .py-md-0 { padding-block: 0 !important; } .ps-md-0 { padding-inline-start: 0 !important; } .pe-md-0 { padding-inline-end: 0 !important; } .p-md-1 { padding: 0.25rem !important; } .pt-md-1 { padding-top: 0.25rem !important; } .pb-md-1 { padding-bottom: 0.25rem !important; } .px-md-1 { padding-inline: 0.25rem !important; } .py-md-1 { padding-block: 0.25rem !important; } .ps-md-1 { padding-inline-start: 0.25rem !important; } .pe-md-1 { padding-inline-end: 0.25rem !important; } .p-md-2 { padding: 0.5rem !important; } .pt-md-2 { padding-top: 0.5rem !important; } .pb-md-2 { padding-bottom: 0.5rem !important; } .px-md-2 { padding-inline: 0.5rem !important; } .py-md-2 { padding-block: 0.5rem !important; } .ps-md-2 { padding-inline-start: 0.5rem !important; } .pe-md-2 { padding-inline-end: 0.5rem !important; } .p-md-3 { padding: 1rem !important; } .pt-md-3 { padding-top: 1rem !important; } .pb-md-3 { padding-bottom: 1rem !important; } .px-md-3 { padding-inline: 1rem !important; } .py-md-3 { padding-block: 1rem !important; } .ps-md-3 { padding-inline-start: 1rem !important; } .pe-md-3 { padding-inline-end: 1rem !important; } .p-md-4 { padding: 1.5rem !important; } .pt-md-4 { padding-top: 1.5rem !important; } .pb-md-4 { padding-bottom: 1.5rem !important; } .px-md-4 { padding-inline: 1.5rem !important; } .py-md-4 { padding-block: 1.5rem !important; } .ps-md-4 { padding-inline-start: 1.5rem !important; } .pe-md-4 { padding-inline-end: 1.5rem !important; } .p-md-5 { padding: 3rem !important; } .pt-md-5 { padding-top: 3rem !important; } .pb-md-5 { padding-bottom: 3rem !important; } .px-md-5 { padding-inline: 3rem !important; } .py-md-5 { padding-block: 3rem !important; } .ps-md-5 { padding-inline-start: 3rem !important; } .pe-md-5 { padding-inline-end: 3rem !important; } .p-md-10 { padding: 0.625rem !important; } .pt-md-10 { padding-top: 0.625rem !important; } .pb-md-10 { padding-bottom: 0.625rem !important; } .px-md-10 { padding-inline: 0.625rem !important; } .py-md-10 { padding-block: 0.625rem !important; } .ps-md-10 { padding-inline-start: 0.625rem !important; } .pe-md-10 { padding-inline-end: 0.625rem !important; } .p-md-12 { padding: 0.75rem !important; } .pt-md-12 { padding-top: 0.75rem !important; } .pb-md-12 { padding-bottom: 0.75rem !important; } .px-md-12 { padding-inline: 0.75rem !important; } .py-md-12 { padding-block: 0.75rem !important; } .ps-md-12 { padding-inline-start: 0.75rem !important; } .pe-md-12 { padding-inline-end: 0.75rem !important; } .p-md-20 { padding: 1.25rem !important; } .pt-md-20 { padding-top: 1.25rem !important; } .pb-md-20 { padding-bottom: 1.25rem !important; } .px-md-20 { padding-inline: 1.25rem !important; } .py-md-20 { padding-block: 1.25rem !important; } .ps-md-20 { padding-inline-start: 1.25rem !important; } .pe-md-20 { padding-inline-end: 1.25rem !important; } .p-md-30 { padding: 1.875rem !important; } .pt-md-30 { padding-top: 1.875rem !important; } .pb-md-30 { padding-bottom: 1.875rem !important; } .px-md-30 { padding-inline: 1.875rem !important; } .py-md-30 { padding-block: 1.875rem !important; } .ps-md-30 { padding-inline-start: 1.875rem !important; } .pe-md-30 { padding-inline-end: 1.875rem !important; } .p-md-40 { padding: 2.5rem !important; } .pt-md-40 { padding-top: 2.5rem !important; } .pb-md-40 { padding-bottom: 2.5rem !important; } .px-md-40 { padding-inline: 2.5rem !important; } .py-md-40 { padding-block: 2.5rem !important; } .ps-md-40 { padding-inline-start: 2.5rem !important; } .pe-md-40 { padding-inline-end: 2.5rem !important; } } @media (min-width: 992px) { .p-lg-0 { padding: 0 !important; } .pt-lg-0 { padding-top: 0 !important; } .pb-lg-0 { padding-bottom: 0 !important; } .px-lg-0 { padding-inline: 0 !important; } .py-lg-0 { padding-block: 0 !important; } .ps-lg-0 { padding-inline-start: 0 !important; } .pe-lg-0 { padding-inline-end: 0 !important; } .p-lg-1 { padding: 0.25rem !important; } .pt-lg-1 { padding-top: 0.25rem !important; } .pb-lg-1 { padding-bottom: 0.25rem !important; } .px-lg-1 { padding-inline: 0.25rem !important; } .py-lg-1 { padding-block: 0.25rem !important; } .ps-lg-1 { padding-inline-start: 0.25rem !important; } .pe-lg-1 { padding-inline-end: 0.25rem !important; } .p-lg-2 { padding: 0.5rem !important; } .pt-lg-2 { padding-top: 0.5rem !important; } .pb-lg-2 { padding-bottom: 0.5rem !important; } .px-lg-2 { padding-inline: 0.5rem !important; } .py-lg-2 { padding-block: 0.5rem !important; } .ps-lg-2 { padding-inline-start: 0.5rem !important; } .pe-lg-2 { padding-inline-end: 0.5rem !important; } .p-lg-3 { padding: 1rem !important; } .pt-lg-3 { padding-top: 1rem !important; } .pb-lg-3 { padding-bottom: 1rem !important; } .px-lg-3 { padding-inline: 1rem !important; } .py-lg-3 { padding-block: 1rem !important; } .ps-lg-3 { padding-inline-start: 1rem !important; } .pe-lg-3 { padding-inline-end: 1rem !important; } .p-lg-4 { padding: 1.5rem !important; } .pt-lg-4 { padding-top: 1.5rem !important; } .pb-lg-4 { padding-bottom: 1.5rem !important; } .px-lg-4 { padding-inline: 1.5rem !important; } .py-lg-4 { padding-block: 1.5rem !important; } .ps-lg-4 { padding-inline-start: 1.5rem !important; } .pe-lg-4 { padding-inline-end: 1.5rem !important; } .p-lg-5 { padding: 3rem !important; } .pt-lg-5 { padding-top: 3rem !important; } .pb-lg-5 { padding-bottom: 3rem !important; } .px-lg-5 { padding-inline: 3rem !important; } .py-lg-5 { padding-block: 3rem !important; } .ps-lg-5 { padding-inline-start: 3rem !important; } .pe-lg-5 { padding-inline-end: 3rem !important; } .p-lg-10 { padding: 0.625rem !important; } .pt-lg-10 { padding-top: 0.625rem !important; } .pb-lg-10 { padding-bottom: 0.625rem !important; } .px-lg-10 { padding-inline: 0.625rem !important; } .py-lg-10 { padding-block: 0.625rem !important; } .ps-lg-10 { padding-inline-start: 0.625rem !important; } .pe-lg-10 { padding-inline-end: 0.625rem !important; } .p-lg-12 { padding: 0.75rem !important; } .pt-lg-12 { padding-top: 0.75rem !important; } .pb-lg-12 { padding-bottom: 0.75rem !important; } .px-lg-12 { padding-inline: 0.75rem !important; } .py-lg-12 { padding-block: 0.75rem !important; } .ps-lg-12 { padding-inline-start: 0.75rem !important; } .pe-lg-12 { padding-inline-end: 0.75rem !important; } .p-lg-20 { padding: 1.25rem !important; } .pt-lg-20 { padding-top: 1.25rem !important; } .pb-lg-20 { padding-bottom: 1.25rem !important; } .px-lg-20 { padding-inline: 1.25rem !important; } .py-lg-20 { padding-block: 1.25rem !important; } .ps-lg-20 { padding-inline-start: 1.25rem !important; } .pe-lg-20 { padding-inline-end: 1.25rem !important; } .p-lg-30 { padding: 1.875rem !important; } .pt-lg-30 { padding-top: 1.875rem !important; } .pb-lg-30 { padding-bottom: 1.875rem !important; } .px-lg-30 { padding-inline: 1.875rem !important; } .py-lg-30 { padding-block: 1.875rem !important; } .ps-lg-30 { padding-inline-start: 1.875rem !important; } .pe-lg-30 { padding-inline-end: 1.875rem !important; } .p-lg-40 { padding: 2.5rem !important; } .pt-lg-40 { padding-top: 2.5rem !important; } .pb-lg-40 { padding-bottom: 2.5rem !important; } .px-lg-40 { padding-inline: 2.5rem !important; } .py-lg-40 { padding-block: 2.5rem !important; } .ps-lg-40 { padding-inline-start: 2.5rem !important; } .pe-lg-40 { padding-inline-end: 2.5rem !important; } } @media (min-width: 1200px) { .p-xl-0 { padding: 0 !important; } .pt-xl-0 { padding-top: 0 !important; } .pb-xl-0 { padding-bottom: 0 !important; } .px-xl-0 { padding-inline: 0 !important; } .py-xl-0 { padding-block: 0 !important; } .ps-xl-0 { padding-inline-start: 0 !important; } .pe-xl-0 { padding-inline-end: 0 !important; } .p-xl-1 { padding: 0.25rem !important; } .pt-xl-1 { padding-top: 0.25rem !important; } .pb-xl-1 { padding-bottom: 0.25rem !important; } .px-xl-1 { padding-inline: 0.25rem !important; } .py-xl-1 { padding-block: 0.25rem !important; } .ps-xl-1 { padding-inline-start: 0.25rem !important; } .pe-xl-1 { padding-inline-end: 0.25rem !important; } .p-xl-2 { padding: 0.5rem !important; } .pt-xl-2 { padding-top: 0.5rem !important; } .pb-xl-2 { padding-bottom: 0.5rem !important; } .px-xl-2 { padding-inline: 0.5rem !important; } .py-xl-2 { padding-block: 0.5rem !important; } .ps-xl-2 { padding-inline-start: 0.5rem !important; } .pe-xl-2 { padding-inline-end: 0.5rem !important; } .p-xl-3 { padding: 1rem !important; } .pt-xl-3 { padding-top: 1rem !important; } .pb-xl-3 { padding-bottom: 1rem !important; } .px-xl-3 { padding-inline: 1rem !important; } .py-xl-3 { padding-block: 1rem !important; } .ps-xl-3 { padding-inline-start: 1rem !important; } .pe-xl-3 { padding-inline-end: 1rem !important; } .p-xl-4 { padding: 1.5rem !important; } .pt-xl-4 { padding-top: 1.5rem !important; } .pb-xl-4 { padding-bottom: 1.5rem !important; } .px-xl-4 { padding-inline: 1.5rem !important; } .py-xl-4 { padding-block: 1.5rem !important; } .ps-xl-4 { padding-inline-start: 1.5rem !important; } .pe-xl-4 { padding-inline-end: 1.5rem !important; } .p-xl-5 { padding: 3rem !important; } .pt-xl-5 { padding-top: 3rem !important; } .pb-xl-5 { padding-bottom: 3rem !important; } .px-xl-5 { padding-inline: 3rem !important; } .py-xl-5 { padding-block: 3rem !important; } .ps-xl-5 { padding-inline-start: 3rem !important; } .pe-xl-5 { padding-inline-end: 3rem !important; } .p-xl-10 { padding: 0.625rem !important; } .pt-xl-10 { padding-top: 0.625rem !important; } .pb-xl-10 { padding-bottom: 0.625rem !important; } .px-xl-10 { padding-inline: 0.625rem !important; } .py-xl-10 { padding-block: 0.625rem !important; } .ps-xl-10 { padding-inline-start: 0.625rem !important; } .pe-xl-10 { padding-inline-end: 0.625rem !important; } .p-xl-12 { padding: 0.75rem !important; } .pt-xl-12 { padding-top: 0.75rem !important; } .pb-xl-12 { padding-bottom: 0.75rem !important; } .px-xl-12 { padding-inline: 0.75rem !important; } .py-xl-12 { padding-block: 0.75rem !important; } .ps-xl-12 { padding-inline-start: 0.75rem !important; } .pe-xl-12 { padding-inline-end: 0.75rem !important; } .p-xl-20 { padding: 1.25rem !important; } .pt-xl-20 { padding-top: 1.25rem !important; } .pb-xl-20 { padding-bottom: 1.25rem !important; } .px-xl-20 { padding-inline: 1.25rem !important; } .py-xl-20 { padding-block: 1.25rem !important; } .ps-xl-20 { padding-inline-start: 1.25rem !important; } .pe-xl-20 { padding-inline-end: 1.25rem !important; } .p-xl-30 { padding: 1.875rem !important; } .pt-xl-30 { padding-top: 1.875rem !important; } .pb-xl-30 { padding-bottom: 1.875rem !important; } .px-xl-30 { padding-inline: 1.875rem !important; } .py-xl-30 { padding-block: 1.875rem !important; } .ps-xl-30 { padding-inline-start: 1.875rem !important; } .pe-xl-30 { padding-inline-end: 1.875rem !important; } .p-xl-40 { padding: 2.5rem !important; } .pt-xl-40 { padding-top: 2.5rem !important; } .pb-xl-40 { padding-bottom: 2.5rem !important; } .px-xl-40 { padding-inline: 2.5rem !important; } .py-xl-40 { padding-block: 2.5rem !important; } .ps-xl-40 { padding-inline-start: 2.5rem !important; } .pe-xl-40 { padding-inline-end: 2.5rem !important; } } .pt-0 { padding-top: 0 !important; } .pb-60 { padding-bottom: 60px !important; } .pb-80 { padding-bottom: 80px !important; } .pe-10px { padding-inline-end: 10px !important; } .pe-12px { padding-inline-end: 12px !important; } /* Gap */ .gap-10 { gap: 10px !important; } .gap-12 { gap: 12px !important; } .gap-20 { gap: 20px !important; } .gap-30 { gap: 30px !important; } .gap-5px { gap: 5px !important; } /* Margin */ .mt-20 { margin-block-start: 20px !important; } .mt-30 { margin-block-start: 30px !important; } .mt-60 { margin-block-start: 60px !important; } .mt-80 { margin-block-start: 80px !important; } .mt-100 { margin-block-start: 100px !important; } .mb-20 { margin-block-end: 20px !important; } .mb-30 { margin-block-end: 30px !important; } .mb-60 { margin-block-end: 60px !important; } .mb-80 { margin-block-end: 80px !important; } .mb-100 { margin-block-end: 100px !important; } .mt-2px { margin-block-start: 2px !important; } /* Height */ .h-20 { block-size: 20px !important; } .h-30 { block-size: 30px !important; } .h-40 { block-size: 40px !important; } .h-150 { block-size: 150px !important; } .h-200 { block-size: 200px !important; } .h-220 { block-size: 220px !important; } .h-260 { block-size: 260px !important; } .h-350 { block-size: 350px !important; } .h-380 { block-size: 380px !important; } .h-550 { block-size: 550px !important; } .h-100px { block-size: 100px !important; } .h-50px { block-size: 50px !important; } .h-25px { block-size: 25px !important; } .min-h-40 { min-block-size: 40px !important; } .min-h-50 { min-block-size: 50px !important; } .min-h-80 { min-block-size: 80px !important; } .min-h-260 { min-block-size: 260px !important; } .max-h-270 { max-block-size: 270px !important; } .max-h-300 { max-block-size: 300px !important; } .max-h-460 { max-block-size: 460px !important; } /* Width */ .w-20 { inline-size: 20px !important; } .w-45 { inline-size: 45px !important; } .w-60 { inline-size: 60px !important; } .w-80 { inline-size: 80px !important; } .w-95 { inline-size: 95px !important; } .w-120 { inline-size: 120px !important; } .w-130 { inline-size: 130px !important; } .w-140 { inline-size: 140px !important; } .w-155 { inline-size: 155px !important; } .w-160 { inline-size: 160px !important; } .w-170 { inline-size: 170px !important; } .w-180 { inline-size: 180px !important; } .w-200 { inline-size: 200px !important; } .w-260 { inline-size: 260px !important; } .w-280 { inline-size: 280px !important; } .w-325 { inline-size: 325px !important; } .w-50px { inline-size: 50px !important; } .w-100px { inline-size: 100px !important; } .max-w-100px { max-inline-size: 100px !important; } @media screen and (max-width: 767px) { .w-max-md-100 { width: 100%; } } @media screen and (max-width: 575px) { .max-w-100-mobile { max-inline-size: 100% !important; } .fs-12-mobile { font-size: 0.75rem !important; } .fs-18-mobile { font-size: 1.125rem !important; } .min-w-300 { min-width: 280px !important; } .min-w-100-mobile { min-width: 100% !important; } } .min-w-40 { min-inline-size: 40px; } .min-w-75 { min-inline-size: 75px; } .min-w-120 { min-inline-size: 120px; } .min-w-130 { min-inline-size: 130px; } .min-w-165 { min-inline-size: 165px; } .min-w-180 { min-inline-size: 180px; } .min-w-200 { min-inline-size: 200px; } .max-w-50 { max-inline-size: 50px; } .max-w-120 { max-inline-size: 120px; } .max-w-130 { max-inline-size: 130px; } .max-w-180 { max-inline-size: 180px; } .max-w-200 { max-inline-size: 200px; } .max-w-250 { max-inline-size: 250px; } .max-w-280 { max-inline-size: 280px; } .max-w-300 { max-inline-size: 300px; } .max-w-283 { max-inline-size: 283px; } .max-w-360 { max-inline-size: 360px; } .max-w-400 { max-inline-size: 400px; } .max-w-500 { max-inline-size: 500px; } .max-w-655 { max-inline-size: 655px; } /* Radius */ .rounded-5 { border-radius: 5px !important; } .rounded-6 { border-radius: 6px !important; } .rounded-8 { border-radius: 8px !important; } .rounded-10 { border-radius: 10px !important; } .rounded-45 { border-radius: 45px !important; } .rounded-50 { border-radius: 50px !important; } /* Ratios */ .ratio-1-1 { aspect-ratio: 1/1 !important; } .ratio-2-1 { aspect-ratio: 2/1 !important; } .ratio-3-1 { aspect-ratio: 3/1 !important; } .ratio-3-2 { aspect-ratio: 3/2 !important; } .ratio-4-1 { aspect-ratio: 4/1 !important; } .ratio-4-2 { aspect-ratio: 4/2 !important; } .ratio-5-1 { aspect-ratio: 5/1 !important; } .ratio-7-1 { aspect-ratio: 7/1 !important; } .aspect-1 { aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; } /* Text alignments */ .text-start { text-align: start !important; } .text-end { text-align: end !important; } .text-sm-start { text-align: start !important; } .text-sm-end { text-align: end !important; } .text-md-start { text-align: start !important; } .text-md-end { text-align: end !important; } .text-lg-start { text-align: start !important; } .text-lg-end { text-align: end !important; } .avatar-50 { width: 50px !important; min-width: 50px !important; height: 50px !important; } .avatar-60 { width: 60px !important; min-width: 60px !important; height: 60px !important; } .avatar-70 { width: 70px !important; min-width: 70px !important; height: 70px !important; } .avatar-80 { width: 80px !important; min-width: 80px !important; height: 80px !important; } .avatar-170 { width: 170px !important; min-width: 170px !important; height: 170px !important; } .inset-inline-start-0 { inset-inline-start: 0 !important; } .inset-inline-end-0 { inset-inline-end: 0 !important; } .inset-inline-start-50 { inset-inline-start: 50% !important; } .inset-inline-end-50 { inset-inline-end: 50% !important; } .inset-inline-start-100 { inset-inline-start: 100% !important; } .inset-inline-end-100 { inset-inline-end: 100% !important; } .inset-inline-start-auto { inset-inline-start: auto !important; } .inset-inline-end-auto { inset-inline-end: auto !important; } .text-underline { text-decoration: underline !important; } /* float */ .float-start { float: inline-start !important; } .float-end { float: inline-end !important; } .disabled { opacity: 0.5; pointer-events: none; } .ms-auto { margin-left: unset !important; margin-inline-start: auto !important; } .me-auto { margin-right: unset !important; margin-inline-end: auto !important; } .rotate-180deg { transform: rotate(180deg); } .rotate-45deg { transform: rotate(45deg); } .br-inherit { border-radius: inherit !important; } ol li:not(:last-child) { margin-bottom: 7px; } .bg-opacity-90 { --bs-bg-opacity: 0.9; } .word-break { white-space: initial !important; } .shadow-1 { box-shadow: var(--shadow1); } .shadow-2 { box-shadow: var(--shadow2); } .shadow-popup { box-shadow: var(--popup-shadow); } .shadow-toast { box-shadow: var(--toaster-shadow); } .img-fit { max-height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .w-max-content { width: -moz-max-content; width: max-content !important; } .min-w-max-content { min-width: -moz-max-content; min-width: max-content !important; } .w-fit-content { width: -moz-fit-content; width: fit-content !important; } .avatar { position: relative; display: inline-block; width: 2.625rem; height: 2.625rem; border-radius: 0.3125rem; } .avatar-xl { width: 4.92188rem; height: 4.92188rem; } .hover-primary:hover, .text-hover-primary:hover { color: var(--bs-primary) !important; } /* Select2 */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { height: 40px; display: flex; align-items: center; border-color: var(--bs-border-color); } .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--multiple .select2-selection__arrow { height: 100%; position: absolute; top: 0; inset-inline-end: 0; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b, .select2-container--default .select2-selection--multiple .select2-selection__arrow b { border-color: var(--bs-body-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 5px 5px 0 5px; border-radius: 5px; height: 0; left: 50%; margin-left: unset; margin-inline-start: -12px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--bs-dark); font-weight: 500; } .select2-container--default .select2-selection--single .select2-selection__clear, .select2-container--default .select2-selection--multiple .select2-selection__clear { display: none !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__arrow b { border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #888 rgba(0, 0, 0, 0); border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { overflow: hidden; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { margin-bottom: 0; display: flex; align-items: center; overflow: hidden; word-wrap: break-word !important; text-overflow: inherit !important; white-space: normal !important; flex-shrink: 0; } .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background-color: var(--section-bg2); color: var(--bs-dark); font-size: 0.75rem; padding: 0.375rem 0.5rem; border: none; margin-inline-start: 0.5rem; display: flex; align-items: center; flex-direction: row-reverse; gap: 1rem; flex-shrink: 0; } .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__display { padding-inline-end: 1.2rem; line-height: 1; overflow: hidden; } .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove { color: #fff; background-color: var(--border-dark); border-radius: 20px; width: 1rem; height: 1rem; font-size: 15px; line-height: 1; border: none; padding: 0; padding-bottom: 2px; padding-inline-start: 0; font-weight: 300; position: static; display: flex; justify-content: center; align-items: center; } .select2-container--default .select2-selection--multiple.select2-selection--clearable { padding-right: unset; padding-inline-end: 25px; } .select2-container--default .select2-selection--multiple.select2-selection__arrow { height: 100%; position: absolute; top: 0; inset-inline-end: 0; width: 20px; } .select2-container--default .select2-selection--multiple.select2-selection__arrow b { border-color: var(--bs-body-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 5px 5px 0 5px; border-radius: 5px; height: 0; left: 50%; margin-inline-start: -12px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default .select2-selection--multiple.select2-selection__rendered { color: var(--bs-dark); font-weight: 500; } .select2-container--default .select2-selection--multiple.select2-selection__clear { display: none !important; } .select2-container--default .select2-selection--multiple.select2-selection .select2-search.select2-search--inline { overflow: hidden; } .select2-container--default .select2-results__option--selected, .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { color: var(--bs-dark); position: relative; padding-inline-start: 0.65rem; padding-inline-end: 1.5rem; } .select2-container--default .select2-results__option--selected::after { content: "\e35f"; font-family: uicons-solid-rounded; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 5px; font-weight: 600; color: var(--bs-primary); } .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--border-dark); } .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: rgba(var(--bs-dark-rgb), 0.1); } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } .select2-container--default .select2-dropdown { box-shadow: var(--bs-box-shadow); border-color: var(--bs-border-color); border-radius: 0.3125rem; z-index: 1080; } .select2-container--default .select2-search--dropdown .select2-search__field { padding: 0.5rem 1rem; border-color: var(--border-dark); border-radius: 0.3125rem; outline: none; } .select2-container--default .select2-search--inline .select2-search__field { margin-inline-start: 0.5rem; } .select2-container--default .more { background-color: var(--bs-primary); color: var(--bs-white); border-radius: 0.3125rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; display: inline-block; margin-inline-start: 0.5rem; margin-block-start: 0.25rem; } .custom-select.error + .select2-container--default.select2-container--focus .select2-selection--single { border-color: rgba(var(--bs-danger-rgb), 0.4); } /* Switcher */ .switch, .switcher { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; inline-size: 2.25rem; block-size: 1.375rem; margin-bottom: 0; flex-shrink: 0; } .switch .slider, .switch_control, .switcher .slider, .switcher_control { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 2.25rem; block-size: 1.375rem; transition: background-color 0.15s ease-in, box-shadow 0.15s ease-in; border-radius: 1.5rem; --bg-shade: #e8eaed; } .switch .slider::after, .switch_control::after, .switcher .slider::after, .switcher_control::after { content: ""; position: absolute; inset-block-start: 0.125rem; inset-inline-start: 0.125rem; inline-size: 1.125rem; block-size: 1.125rem; transition: left 0.15s ease-in, right 0.15s ease-in; background-color: var(--bs-white); border-radius: 100%; } .switch .slider:hover, .switch_control:hover, .switcher .slider:hover, .switcher_control:hover { box-shadow: 0px 3.75px 10px 0px rgba(var(--shadow-color-rgb), 0.3); } .switch .switcher_input, .switcher .switcher_input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .switch .switcher_input:checked ~ .switcher_control, .switcher .switcher_input:checked ~ .switcher_control { background-color: var(--bs-primary); } .switch .switcher_input:checked ~ .switcher_control::after, .switcher .switcher_input:checked ~ .switcher_control::after { inset-inline-start: calc(2.25rem - 1.125rem - 0.125rem); } .switch .switcher_input:disabled ~ .switcher_control, .switcher .switcher_input:disabled ~ .switcher_control { opacity: 0.4; pointer-events: none; } .switch.switcher-sm, .switcher.switcher-sm { inline-size: 2rem; block-size: 1.25rem; } .switch.switcher-sm .switcher_control, .switcher.switcher-sm .switcher_control { inline-size: 2rem; block-size: 1.25rem; border-radius: 1.875rem; } .switch.switcher-sm .switcher_control::after, .switcher.switcher-sm .switcher_control::after { inset-block-start: 0.125rem; inset-inline-start: 0.125rem; inline-size: 1rem; block-size: 1rem; } .switch.switcher-sm .switcher_input:checked ~ .switcher_control::after, .switcher.switcher-sm .switcher_input:checked ~ .switcher_control::after { inset-inline-start: calc(2rem - 1rem - 0.125rem); } /* Input */ input.form-control, .form-select { height: 40px; background-color: var(--bs-white); } input.form-control:focus, .form-select:focus { box-shadow: none !important; } input.form-control:not(.js-daterangepicker, .js-daterangepicker-with-range)[readonly], textarea.form-control[readonly] { background-color: var(--section-bg2); } .form-control { --bs-body-bg: var(--bs-white); --bs-body-color: var(--bs-dark); padding: 0.5rem 1rem; font-size: 0.875rem; } .form-control::-moz-placeholder { --bs-secondary-color: var(--body-light-color); } .form-control::placeholder { --bs-secondary-color: var(--body-light-color); } .form-control:focus { background-color: var(--bs-white); color: var(--bs-dark); border-color: var(--border-dark); box-shadow: none; } .form-control:disabled { background-color: #f7f8fa !important; } .form-control.warning { border-color: rgba(var(--bs-warning-rgb), 0.4); } .form-control.error { border-color: rgba(var(--bs-danger-rgb), 0.4); } .form-control_color { width: 32px !important; height: 32px !important; padding: 0; border-radius: 3px; } .form-label { font-size: 0.875rem; color: var(--bs-dark); margin-bottom: 0.875rem; } .form-group:not(:last-child) { margin-bottom: 1.875rem; } .select-wrapper { position: relative; } .select-wrapper::after { content: "\e304"; font-family: "uicons-solid-rounded"; position: absolute; inset-inline-end: 0.75rem; inset-block-start: 0; height: 100%; font-weight: 600; font-size: 0.875rem; color: var(--bs-body-color); display: flex; justify-content: center; align-items: center; pointer-events: none; } .select-wrapper .form-select { --bs-form-select-bg-img: unset; background-color: var(--bs-white); font-size: 0.875rem; color: var(--bs-dark); padding: 0.5rem 1rem; margin-inline-end: 1.5rem; border-radius: 0.3125rem; position: relative; } .select-wrapper .form-select:focus { border-color: var(--bs-primary); box-shadow: none; } .select-wrapper .form-select option:hover { color: var(--bs-dark); background-color: var(--section-bg2); } .border-dashed { border-style: dashed !important; } .tooltip-icon { color: var(--body-light-color); cursor: pointer; } .input-group .changePassTarget, .input-group .search-submit, .input-group .select-wrapper { position: absolute; inset-inline-end: 0.75rem; inset-block-start: 50%; transform: translateY(-50%); z-index: 8; } .input-group:has(.changePassTarget) .form-control, .input-group:has(.select-wrapper) .form-control, .input-group input[type=search].form-control { border-radius: var(--bs-border-radius) !important; } .input-group .form-control:focus:not([readonly]) ~ .changePassTarget a { color: var(--bs-body-color) !important; } .input-group .search-submit { inset-inline-end: 1px; } .input-group .search-submit button[type=submit] { background-color: var(--section-bg2); color: var(--bs-dark); border: none; outline: none; padding: 0.25rem 0.6875rem; height: 2.375rem; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .input-group input[type=search]::-webkit-search-cancel-button { margin-inline-end: 2rem; cursor: pointer; } .input-group .select-wrapper { inset-inline-end: 1px; } .input-group .select-wrapper::after { content: "\e304"; font-family: "uicons-solid-rounded"; position: absolute; inset-inline-end: 0.75rem; inset-block-start: 0; height: 100%; font-weight: 600; font-size: 0.875rem; color: var(--bs-body-color); display: flex; justify-content: center; align-items: center; pointer-events: none; } .input-group .select-wrapper .form-select { --bs-form-select-bg-img: unset; background-color: var(--section-bg2); font-size: 0.875rem; color: var(--bs-dark); padding: 0.5rem; margin-inline-end: 1.5rem; border: none; border-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); position: relative; height: calc(100% - 2px); } .input-group .select-wrapper .form-select:focus { border-color: transparent; } .input-group .form-control:disabled + .select-wrapper .form-select, .input-group .form-control[readonly] + .select-wrapper .form-select { pointer-events: none; cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .input-group .form-control:disabled + .select-wrapper::after { opacity: 0.5; } .input-group .form-control:disabled + .select-wrapper .form-select { opacity: 0.5; } .input-group .form-control:disabled + .changePassTarget { pointer-events: none; cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .input-group .input-group-text.custom { padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--bs-dark); white-space: wrap; background-color: var(--section-bg2); border: none !important; border-radius: 0 !important; } .input-group:has(.input-group-text.custom) { overflow: hidden; } .input-group:has(.input-group-text.custom) input.form-control { border: none !important; border-radius: 0 !important; width: -moz-max-content !important; width: max-content !important; } .input-group:has(.input-group-text.custom):has(input.form-control:focus) { border-color: var(--border-dark) !important; } .input-group:has(.changePassTarget) input.form-control { padding-inline-end: 30px; } [dir=rtl] .input-group .search-submit, [dir=rtl] .input-group .input-group-append.select-wrapper { inset-inline-end: 2px; } [dir=rtl] .input-group .search-submit button[type=submit], [dir=rtl] .input-group .search-submit .form-select, [dir=rtl] .input-group .input-group-append.select-wrapper button[type=submit], [dir=rtl] .input-group .input-group-append.select-wrapper .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } [dir=rtl] .input-group .input-group-text.custom { border-radius: 0 !important; } [dir=rtl] .input-group:has(.input-group-text.custom) .form-control { border-radius: 0 !important; } .label-disabled, .label-readonly { pointer-events: none !important; } .label-disabled .switcher, .label-readonly .switcher { opacity: 0.4; } .label-disabled { background-color: var(--bs-body-bg) !important; } .label-disabled .label-text { color: var(--body-light-color) !important; } .label-readonly { background-color: var(--section-bg2) !important; } .radio--input, .checkbox--input { --bs-form-check-bg: transparent; --bs-border-color: var(--border-dark); inline-size: 1rem; block-size: 1rem; position: relative; } .radio--input:focus, .checkbox--input:focus { box-shadow: none; } .radio--input:checked, .checkbox--input:checked { border-color: var(--bs-primary); } .radio--input:checked ~ .form-check-label, .checkbox--input:checked ~ .form-check-label { font-weight: 500; } .radio--input ~ .form-check-label, .checkbox--input ~ .form-check-label { color: var(--bs-body-color); } .radio--input_lg, .checkbox--input_lg { inline-size: 1.25rem; block-size: 1.25rem; --bs-border-width: 2px; } .radio--input:checked { background-color: transparent; } .radio--input:checked::after { content: ""; position: absolute; inset-inline-start: 50%; transform: translate(-50%, -50%); inset-block-start: 50%; background-color: var(--bs-primary); border-radius: 50%; inline-size: calc(100% - 0.25rem); block-size: calc(100% - 0.25rem); } [dir=rtl] .radio--input { margin-left: unset; } [dir=rtl] .radio--input:checked::after { inset-inline-start: unset; inset-inline-end: 50%; } .checkbox--input { border-radius: 0.25rem; } .checkbox--input:checked { background-color: var(--bs-primary); } [dir=rtl] .checkbox--input { margin-left: unset; } .iti { display: block; } .iti__search-input { outline: none; } .iti__selected-flag { background-color: var(--section-bg2); color: var(--body-light-color); padding-block: 0.8125rem; padding-inline-start: 1rem; padding-inline-end: 0.5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; color: var(--bs-dark); } .iti.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: var(--section-bg2); } .iti:has(input.iti__tel-input[readonly]) { pointer-events: none; } .iti:has(input.iti__tel-input[readonly]) .iti__flag-container { display: none !important; } [dir=ltr] .iti--allow-dropdown input.iti__tel-input[type=tel] { padding-inline-start: 4.375rem; } [dir=ltr] .iti--allow-dropdown input.iti__tel-input[type=tel][readonly] { padding-inline-start: 1rem; } [dir=ltr] .iti__selected-flag { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .iti--allow-dropdown .iti__flag-container, [dir=rtl] .iti--show-selected-dial-code .iti__flag-container { right: auto !important; left: 0 !important; direction: ltr !important; } [dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code, .iti__arrow { margin-left: 6px !important; margin-right: 0 !important; } /* Tooltip */ .custom-tooltip { --bs-tooltip-bg: rgba(var(--bs-dark-rgb), 0.9); --bs-tooltip-color: rgba(var(--bs-white-rgb), 0.9); --bs-tooltip-font-size: 0.875rem; --bs-tooltip-max-width: 17.5rem; --bs-tooltip-margin: 0; --bs-tooltip-padding-x: 1rem; --bs-tooltip-padding-y: 0.75rem; --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: 0.625rem; --bs-tooltip-arrow-width: 18px; --bs-tooltip-arrow-height: 9px; text-align: left; } .btn { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.625rem; --bs-btn-font-size: 0.875rem; --bs-btn-font-weight: 600; --bs-btn-line-height: 1; --bs-border-radius: 0.3125rem; --bs-btn-box-shadow: none; --bs-btn-disabled-opacity: 0.65; --bs-btn-focus-box-shadow: none; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; } .btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.53125rem; --bs-btn-font-size: 0.75rem; --bs-btn-line-height: 1.5; } .btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.78125rem; } .btn:hover { box-shadow: var(--bs-box-shadow); } .btn-xs { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3125rem; --bs-btn-font-size: 0.625rem; --bs-btn-line-height: 1; } .btn-primary { --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: transparent; --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: transparent; --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-white); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-opacity: 1; } .btn-primary:hover { --bg-opacity: 0.2; --bs-primary-rgb: 0, 0, 0; background-color: var(--bs-primary); } .btn-primary:disabled { --bg-opacity: 0.4; --bs-primary-rgb: 255, 255, 255; background-color: var(--bs-primary); } .btn-secondary { --bs-btn-color: var(--bs-dark); --bs-btn-bg: #e8eaed; --bs-btn-border-color: #e8eaed; --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: unset; --bs-btn-hover-border-color: transparent; --bs-btn-focus-shadow-rgb: 130, 138, 145; --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: #51585e; --bs-btn-active-border-color: #51585e; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--bs-dark); --bs-btn-disabled-bg: #e8eaed; --bs-btn-disabled-border-color: #e8eaed; --bs-btn-disabled-opacity: 0.5; } .btn-secondary:hover { --bg-opacity: 0.1; --bs-secondary-rgb: 0, 0, 0; background-color: #e8eaed; } .btn-secondary:disabled { --bg-opacity: 0.2; --bs-secondary-rgb: 255, 255, 255; background-color: #e8eaed; } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-white); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-white); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-bg: var(--bs-white); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-box-shadow: none; --bs-gradient: none; background-color: var(--bs-white) !important; } .btn-outline-primary-dark { --bs-primary: var(--panel-sidebar-primary); } .btn-text { color: var(--bs-primary); background-color: transparent; border: none; } .btn-text:hover { background-color: var(--section-bg2); } .btn-text:disabled { color: var(--bs-primary); } /* Icon Button */ .icon-btn { --bs-btn-padding-x: 0.375rem; --bs-btn-padding-y: 0.375rem; --bs-btn-border-radius: 0.3125rem; --bs-border-width: 0.0676rem; --size: 1.875rem; inline-size: var(--size); block-size: var(--size); display: flex; justify-content: center; align-items: center; } .icon-btn.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-primary); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-primary-dark { --bs-primary: var(--panel-sidebar-primary); } .icon-btn.btn-outline-secondary { --bs-btn-color: var(--body-light-color); --bs-btn-border-color: var(--body-light-color); --bs-btn-hover-color: var(--body-light-color); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--body-light-color); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--body-light-color); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--body-light-color); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--body-light-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--body-light-color); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-success); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-success); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-success); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-success); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-success); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-success-dark { --bs-success: var(--success-dark); } .icon-btn.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-danger); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-danger); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-danger); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-danger); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-danger-dark { --bs-danger: var(--danger-dark); } .icon-btn.btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-info); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-info); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-info); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-info); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-info-dark { --bs-info: var(--info-dark); } .icon-btn.btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--bs-warning); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-warning); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-warning); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-warning); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .icon-btn.btn-outline-warning-dark { --bs-warning: var(--warning-dark); } .icon-btn.btn-outline-dark { --bs-btn-color: var(--bs-dark); --bs-btn-border-color: var(--bs-dark); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--bs-dark); --bs-btn-focus-shadow-rgb: unset; --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--bs-dark); --bs-btn-active-shadow: none; --bs-btn-disabled-color: var(--bs-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bs-dark); --bs-btn-focus-box-shadow: none; --bs-gradient: none; } .btn-circle { --size: 2.25rem; inline-size: var(--size); block-size: var(--size); border-radius: 100%; aspect-ratio: 1; padding: 0; filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.08)); } /* Tab Menu */ .nav--tab { --bs-nav-link-color: var(--bs-body-color); --bs-nav-link-hover-color: var(--bs-primary); --bs-nav-pills-link-active-color: var(--bs-white); --bs-nav-pills-link-active-bg: var(--bs-primary); --bs-nav-link-font-size: 0.875rem; --bs-nav-link-font-weight: 500; --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.625rem; --bs-nav-pills-border-radius: 1.25rem; --gradient-deg: 90deg; --gradient-deg-negative: -90deg; scrollbar-width: thin; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; } .nav--tab .nav-link { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; block-size: 36px; cursor: pointer; } .nav--tab__prev, .nav--tab__next { position: absolute; inset-block-start: 50%; transform: translateY(-50%); display: none; } .nav--tab__prev { inset-inline-start: 0; padding-inline-end: 1.5rem; background: linear-gradient(var(--gradient-deg), rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 100%); } .nav--tab__next { inset-inline-end: 0; padding-inline-start: 1.5rem; background: linear-gradient(var(--gradient-deg-negative), rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 100%); } .nav--tab.lang_tab { --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: transparent; --bs-nav-pills-border-radius: 0; --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0; } .nav--tab.lang_tab .nav-item { padding: 0.625rem 0.875rem; } .nav--tab.lang_tab .nav-link.active { border-bottom: 2px solid var(--bs-primary); font-weight: 600; } [dir=rtl] .nav--tab__prev { --gradient-deg: -90deg; } [dir=rtl] .nav--tab__next { --gradient-deg-negative: 90deg; } .nav--tab-wrapper:has(.nav--tab__prev, .nav--tab__next) .nav--tab { scrollbar-width: none; } /* Badge */ .badge { --bs-badge-font-size: 0.75rem; --bs-badge-font-weight: 500; --bs-badge-padding-x: 0.5rem; --bs-badge-padding-y: 0.25rem; --bs-badge-border-radius: 0.25rem; } .badge-success, .badge-warning, .badge-danger, .badge-info { --bs-bg-opacity: 0.1; } .badge-success { color: var(--bs-success) !important; } .badge-warning { color: var(--bs-warning) !important; } .badge-danger { color: var(--bs-danger) !important; } .badge-info { color: var(--bs-info) !important; } .badge-lg { --bs-badge-padding-x: 0.625rem; --bs-badge-padding-y: 0.4375rem; } .badge-sm { --bs-badge-font-size: 0.625rem; --bs-badge-padding-x: 0.375rem; --bs-badge-padding-y: 0.25rem; } /* Card */ .card { --bs-card-border-color: var(--bs-border-color); --bs-card-bg: var(--bs-white); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 20px; --bs-card-spacer-x: 20px; border-radius: 0.625rem; border: none; box-shadow: var(--bs-box-shadow-sm); } .card.shadow-1 { box-shadow: var(--shadow1); } .card.shadow-2 { box-shadow: var(--shadow2); } .card.disabled { pointer-events: none; opacity: 0.5; } .card .card-header { padding: 15px 20px; } @media (max-width: 575px) { .card { --bs-card-border-color: var(--bs-border-color); --bs-card-bg: var(--bs-white); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 12px; --bs-card-spacer-x: 12px; } .card .card-header { padding: 10px 12px !important; } .card.card-sm { box-shadow: none !important; --bs-card-bg: transparent !important; --bs-card-spacer-y: 0 !important; --bs-card-spacer-x: 0 !important ; } .card.card-sm .card-header { padding: 12px !important; margin-bottom: 12px; } .card.card-sm .card-header, .card.card-sm .card-body { border: none !important; } } /* fixed action button */ .action-btn-wrapper { --bs-bg-opacity: 0; transition: all 0.3s ease-in-out; animation: actionFooterShow 0.3s ease-out; } .action-btn-wrapper.fixed { inline-size: -moz-fit-content; inline-size: fit-content; padding: 1.25rem; box-shadow: var(--toaster-shadow); border-top-left-radius: 0.625rem; --bs-bg-opacity: 1; transition: all 0.3s ease-in-out; animation: actionFooterShow 0.3s ease-out; } @keyframes actionFooterShow { 0% { transform: translateY(-0.625rem); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } [dir=rtl] .action-btn-wrapper.fixed { border-top-left-radius: 0; border-top-right-radius: 0.625rem; } @media (max-width: 575px) { .action-btn-wrapper.fixed { border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; padding: 1rem; } } @media (min-width: 576px) { .bg-section-sm { background-color: var(--section-bg); padding: 20px; border-radius: 5px; } } /* Modal */ .modal { --bs-modal-bg: var(--bs-white); --bs-modal-box-shadow: var(--popup-shadow); --bs-modal-border-radius: 20px; } .modal .modal-header .btn-close { padding: 0; font-size: 12px; } [dir=rtl] .modal-header .btn-close, [dir=rtl] .offcanvas-header .btn-close { margin: unset !important; } .offcanvas-header { justify-content: space-between; } /* Table */ .table-responsive { max-height: calc(80vh - 160px); overflow: auto; scrollbar-width: thin; } .table-responsive thead { position: sticky; top: 0; z-index: 1; } .table { --bs-table-color: var(--bs-dark); --bs-table-hover-color: var(--bs-dark); --bs-table-bg: var(--bs-white); --bs-table-hover-bg: var(--bs-body-bg); white-space: nowrap; } .table thead tr { --bs-table-bg: var(--section-bg); } .table > :not(caption) > * > * { padding: 1rem 1.5rem; } .table.td-padding-sm th, .table.td-padding-sm td { padding: 0.75rem 1rem; } .table--primary { --bs-table-bg: rgba(var(--bs-primary-rgb), 0.1); --bs-table-border-color: rgba(var(--bs-primary-rgb), 0.1); --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.1); --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.2); --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.1); } .table--danger { --bs-table-bg: rgba(var(--bs-danger-rgb), 0.1); --bs-table-border-color: rgba(var(--bs-danger-rgb), 0.1); --bs-table-striped-bg: rgba(var(--bs-danger-rgb), 0.1); --bs-table-active-bg: rgba(var(--bs-danger-rgb), 0.2); --bs-table-hover-bg: rgba(var(--bs-danger-rgb), 0.1); } .table--success { --bs-table-bg: rgba(var(--bs-success-rgb), 0.1); --bs-table-border-color: rgba(var(--bs-success-rgb), 0.1); --bs-table-striped-bg: rgba(var(--bs-success-rgb), 0.1); --bs-table-active-bg: rgba(var(--bs-success-rgb), 0.2); --bs-table-hover-bg: rgba(var(--bs-success-rgb), 0.1); } .table--warning { --bs-table-bg: rgba(var(--bs-warning-rgb), 0.1); --bs-table-border-color: rgba(var(--bs-warning-rgb), 0.1); --bs-table-striped-bg: rgba(var(--bs-warning-rgb), 0.1); --bs-table-active-bg: rgba(var(--bs-warning-rgb), 0.2); --bs-table-hover-bg: rgba(var(--bs-warning-rgb), 0.1); } /* Pagination */ .pagination { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.375rem; --bs-pagination-font-size: 0.75rem; --bs-pagination-color: rgba(var(--bs-dark-rgb), 0.4); --bs-pagination-bg: var(--section-bg); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-hover-color: #fff; --bs-pagination-hover-bg: var(--bs-primary); --bs-pagination-border-radius: 0.3125rem; --bs-pagination-border-color: transparent; display: flex; flex-wrap: wrap; gap: 5px; } .pagination .page-item { display: flex; } .pagination .page-item .page-link { border-radius: var(--bs-pagination-border-radius); border: none; box-shadow: none; line-height: 1; min-inline-size: 24px; display: flex; justify-content: center; } .pagination .page-item .page-link:first-child, .pagination .page-item .page-link:last-child { --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--section-bg2); } .d--none { display: none; } /* Toaster */ .toast-container { position: fixed; inset-block-start: 65px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1050; } .toast { --bs-toast-padding-x: 20px; --bs-toast-padding-y: 20px; --bs-toast-spacing: 0.5rem; --bs-toast-max-width: 370px; --bs-toast-font-size: 0.875rem; --bs-toast-bg: var(--bs-white); --bs-toast-border-width: var(--bs-border-width); --bs-toast-border-color: transparent; --bs-toast-border-radius: 10px; --bs-toast-box-shadow: var(--toaster-shadow); --bs-toast-header-color: var(--bs-secondary-color); --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85); --bs-toast-header-border-color: var(--bs-border-color-translucent); position: relative; overflow: hidden; opacity: 0; transform: translateX(-100%); transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } .toast.show { transform: translateX(0); opacity: 1; } .toast.hide { transform: translateX(100%); opacity: 0; } .toast.toast-success::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 4px; background-color: rgba(var(--bs-success), 0.4); } .toast.toast-success::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 0%; height: 4px; background-color: var(--bs-success); transform-origin: right; animation: toastProgress 3s linear forwards; } .toast.toast-danger::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 4px; background-color: rgba(var(--bs-danger), 0.4); } .toast.toast-danger::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 0%; height: 4px; background-color: var(--bs-danger); transform-origin: right; animation: toastProgress 3s linear forwards; } .toast.toast-warning::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 4px; background-color: rgba(var(--bs-warning), 0.4); } .toast.toast-warning::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 0%; height: 4px; background-color: var(--bs-warning); transform-origin: right; animation: toastProgress 3s linear forwards; } .toast.toast-info::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 4px; background-color: rgba(var(--bs-info), 0.4); } .toast.toast-info::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 0%; height: 4px; background-color: var(--bs-info); transform-origin: right; animation: toastProgress 3s linear forwards; } [dir=rtl] .toast.hide { transform: translateX(-100%); } [dir=rtl] .toast .end-0 { right: unset !important; left: 0 !important; } @media (max-width: 575px) { .toast-container { inset-inline-end: 12px; } } @keyframes toastProgress { from { width: 0%; } to { width: 100%; } } /* Image Upload */ .upload-file { position: relative; display: inline-block; margin: auto; max-width: 100%; } .upload-file__input { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 100%; cursor: pointer; opacity: 0; z-index: 9; } .upload-file__wrapper { height: 100px; min-width: 100px; max-width: 100%; border-radius: 5px; background: var(--bs-white); border: 1px dashed var(--bs-border-color); display: flex; justify-content: center; align-items: center; aspect-ratio: 1; position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } .upload-file__wrapper .upload-file-img { inline-size: 100%; block-size: 100%; -o-object-fit: cover; object-fit: cover; display: none; } .upload-file__wrapper .upload-file-textbox { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .upload-file .overlay { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 100%; opacity: 0; border-radius: 5px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%); transition: opacity 0.3s ease-in-out; z-index: 2; } .upload-file .overlay .icon-btn { inline-size: 20px; block-size: 20px; padding: 5px; font-size: 10px; background-color: var(--bs-white); cursor: pointer; } .upload-file:hover .overlay.show { opacity: 1; z-index: 10; } .upload-file .remove_btn { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; z-index: 11; opacity: 0; } .upload-file.input-disabled .single_file_input { pointer-events: none; opacity: 0; } /* Multi Image Picker */ .multi_image_picker { overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .multi_image_picker::-webkit-scrollbar { display: none; } .multi_image_picker .spartan_item_wrapper { margin-bottom: 0 !important; } .multi_image_picker .spartan_item_wrapper:last-child { order: -1 !important; margin-inline-end: -20px !important; } .multi_image_picker .spartan_item_wrapper .file_upload { overflow: unset !important; background-color: var(--bs-white) !important; border: 1px dashed var(--bs-border-color) !important; padding: 0 !important; border-radius: 5px !important; aspect-ratio: 1; } .multi_image_picker .spartan_item_wrapper .file_upload .spartan_remove_row { right: -6px !important; top: -6px !important; background: var(--bs-danger) !important; border-radius: 100% !important; width: 20px !important; height: 20px !important; line-height: 18px !important; z-index: 2; } .multi_image_picker .spartan_item_wrapper .file_upload .spartan_remove_row svg { inline-size: 14px !important; block-size: 14px !important; } .multi_image_picker .spartan_item_wrapper .file_upload .img_ { -o-object-fit: cover; object-fit: cover; aspect-ratio: 1; overflow: hidden; border-radius: 5px !important; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 100%; background-color: inherit; } .multi_image_picker .spartan_item_wrapper .file_upload .spartan_image_placeholder { padding-top: 20px !important; } .multi_image_picker .imageSlide_prev, .multi_image_picker .imageSlide_next { position: absolute; padding-top: 20px; inset-block-start: 0; height: 100%; z-index: 11; display: none; } .multi_image_picker .imageSlide_prev { inset-inline-start: 5px; } .multi_image_picker .imageSlide_next { inset-inline-end: 5px; } .multi_image_picker.overflow .imageSlide_prev, .multi_image_picker.overflow .imageSlide_next { display: block; } .multi_image_picker.design_two .spartan_image_placeholder { width: 34px !important; } /* TagsInput */ .bootstrap-tagsinput { background-color: var(--bs-white); border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); color: var(--bs-dark); padding: 4px 6px; margin: 0; display: flex !important; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-height: 40px !important; overflow-wrap: anywhere; } .bootstrap-tagsinput input { color: var(--bs-dark); height: 100% !important; } .bootstrap-tagsinput .tag { background-color: var(--section-bg2); color: var(--bs-dark); font-size: 0.75rem; padding: 0.25rem 0.5rem; border: none; border-radius: 3px; margin: 0; overflow: hidden; } /* mobile view */ @media (max-width: 575px) { .p-0-mobile { padding: 0 !important; } .m-0-mobile { margin: 0 !important; } .bg-transparent-mobile { background-color: transparent !important; } .shadow-none-mobile { box-shadow: none !important; } .border-0-mobile { border: none !important; } .p-12-mobile { padding: 0.75rem !important; } .w-100-mobile { width: 100% !important; } .mobile-w-100 { width: 100% !important; } .pb-160-mobile { padding-bottom: 160px !important; } } @media (min-width: 576px) { .p-sm-30 { padding: 1.875rem !important; } .p-sm-20 { padding: 1.25rem !important; } .px-sm-20 { padding-inline: 1.25rem !important; } .pb-sm-20 { padding-bottom: 1.25rem !important; } .mb-sm-20 { margin-bottom: 1.25rem !important; } .gap-sm-20 { gap: 20px !important; } .flex-grow-sm-0 { flex-grow: 0 !important; } .w-sm-500 { width: 500px !important; } } /* swipper instruction carousel */ .instruction-pagination-custom { background: var(--bs-primary); border-radius: 5px; width: -moz-max-content; width: max-content; margin: 0 auto; color: #fff; font-weight: 700; padding: 5px; line-height: 1; } .instruction-carousel .swiper-button-prev, .instruction-carousel .swiper-button-next { --swiper-navigation-size: 16px; --swiper-navigation-sides-offset: 0px; --swiper-navigation-color: #000; } #readInstructionModal .modal-dialog { max-width: 440px; } .form-ellipsis { width: 100% !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .spinner-border.extra-small-spinner-border { width: 1rem !important; height: 1rem !important; } /* Inhouse settings */ .admin-inhouse-banner { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; } .admin-inhouse-banner.after_upload_banner_overlay::after { position: absolute; inset: 0; content: ""; border-radius: inherit; background-image: linear-gradient(0deg, rgba(var(--bs-primary-rgb), 0.3) 0%, rgba(var(--bs-primary-rgb), 0.3) 100%); } .icon-absolute-on-right { position: absolute; font-size: 12px; inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; } .theme-active { border: 2px solid var(--bs-info) !important; box-shadow: var(--bs-box-shadow-sm) !important; } /* Multiple file upload view */ .file-view-list_single { position: relative; transition: all 0.5s ease-in-out; } .file-view-list_single .close_btn { position: absolute; inset-block-start: -0.5rem; inset-inline-end: -0.5rem; --size: 1.5rem; } /* Email Template */ .border_middle { position: relative; } .border_middle::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -0.5rem; inline-size: 1px; block-size: 100%; background-color: var(--bs-border-color); } @media (max-width: 1199px) { .border_middle::after { content: none; } } .email-table { border-collapse: collapse; width: 100%; } .email-dl { max-width: 240px; margin-left: auto; display: flex; flex-wrap: wrap; } .email-dl dt, .email-dl dd { margin-bottom: 5px; font-weight: 400; } .flex-1 { flex: 1 0 50%; } /* Datatable */ .dt-container .dt-layout-row { margin: 1rem 0 !important; gap: 0.5rem; } .dt-container .dt-layout-row .dt-layout-cell.dt-layout-start { margin-right: unset !important; margin-inline-end: auto !important; } .dt-container .dt-layout-row .dt-layout-cell.dt-layout-end { margin-left: unset !important; margin-inline-start: auto !important; } .dt-container .dt-layout-row .dt-layout-cell .dt-length label { font-size: 0; } .dt-container .dt-layout-row .dt-layout-cell .dt-length .dt-input { outline: none; border: 1px solid var(--bs-border-color); border-radius: 0.3125rem; background-color: var(--section-bg); color: var(--bs-dark); padding: 0.25rem 0.5rem; font-size: 0.875rem; } .dt-container .dt-layout-row .dt-layout-cell .dt-length .dt-input:focus, .dt-container .dt-layout-row .dt-layout-cell .dt-length .dt-input:focus-visible { border-color: var(--bs-primary); box-shadow: none; } .dt-container .dt-layout-row .dt-layout-cell .dt-search { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .dt-container .dt-layout-row .dt-layout-cell .dt-search label { color: var(--bs-dark); } .dt-container .dt-layout-row .dt-layout-cell .dt-search .dt-input { border: 1px solid var(--bs-border-color); border-radius: 0.3125rem; height: 40px; background-color: var(--bs-white); color: var(--bs-dark); padding: 0.5rem 1rem; font-size: 0.875rem; outline: none; } .dt-container .dt-layout-row .dt-layout-cell .dt-search .dt-input:focus, .dt-container .dt-layout-row .dt-layout-cell .dt-search .dt-input:focus-visible { border-color: var(--border-dark); box-shadow: none; } .dt-container .dt-paging:focus .dt-paging-button.current { color: #fff !important; } .dt-container .dt-paging:focus .dt-paging-button.current:hover { color: #fff !important; } .dt-container .dt-paging .dt-paging-button { border: 1px solid var(--section-bg) !important; border-radius: 0.3125rem !important; background: var(--section-bg) !important; color: var(--bs-body-color) !important; padding: 0.25rem 0.5rem !important; font-size: 0.75rem; outline: none; } .dt-container .dt-paging .dt-paging-button.current { background: rgba(var(--bs-primary-rgb), 0.1) !important; border: 1px solid var(--bs-primary) !important; } .dt-container .dt-paging .dt-paging-button.current:hover, .dt-container .dt-paging .dt-paging-button.current:focus, .dt-container .dt-paging .dt-paging-button.current:focus-visible, .dt-container .dt-paging .dt-paging-button.current:active { background: rgba(var(--bs-primary-rgb), 0.1) !important; border: 1px solid var(--bs-primary) !important; } .dt-container .dt-paging .dt-paging-button:hover, .dt-container .dt-paging .dt-paging-button:focus, .dt-container .dt-paging .dt-paging-button:focus-visible, .dt-container .dt-paging .dt-paging-button:active { background: rgba(var(--bs-primary-rgb), 1) !important; color: #fff !important; font-weight: 600; box-shadow: none; outline: none; border-color: var(--bs-primary) !important; } .dt-container .dt-paging .dt-paging-button.first, .dt-container .dt-paging .dt-paging-button.last { display: none !important; } .dt-container .dt-layout-start > *:not(:last-child) { margin-inline-end: 1rem !important; } @media screen and (max-width: 767px) { div.dt-container div.dt-layout-row:not(.dt-layout-table) { display: flex !important; flex-direction: column; } div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start { margin-inline-end: 0 !important; } div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end { margin-inline-start: 0 !important; } } .color-caribbean-green { background: #00c6ae; } .color-caribbean-green-soft { color: #00c6ae; background-color: rgba(0, 198, 174, 0.05); } .text-cyan-blue { color: #1455ac !important; } .order-track-info { row-gap: 20px; overflow: hidden; } .order-track-info .media-tab-media { display: flex; align-items: center; justify-content: center; background: rgba(20, 85, 172, 0.05); border-radius: 6px; border: none; width: 50px; height: 50px; position: relative; z-index: 3; } .order-track-info .media-tab-media > img { width: 26px; height: 26px; -o-object-fit: contain; object-fit: contain; border-radius: 0; } .order-track-info .nav-item .nav-link { position: relative; } .order-track-info .nav-item .nav-link .badge { position: absolute; top: 5px; right: 0; z-index: 4; font-size: 10px; } .order-track-info .nav-item .nav-link::after { content: ""; position: absolute; width: calc(100% - 50px); inset-inline-end: calc(50% + 25px); top: 41px; border-bottom: 2px dashed #d2d2d2; } .order-track-info .nav-item .nav-link img { opacity: 0.4; } .order-track-info .nav-item .nav-link.active-status img { opacity: 1; } .order-track-info .nav-item .nav-link.active-status::after { border-color: var(--bs-primary); } .order-track-info .nav-item:first-child .nav-link::after { display: none; } @media (max-width: 575px) { .nav-justified .nav-item { flex-basis: auto; } .order-track-info { display: flex; flex-direction: column; row-gap: 11px; } .order-track-info .nav-item .nav-link::after { width: auto; right: auto; inset-inline-start: 40px; top: -40px; border-left: 2px dashed #d2d2d2; height: 56%; } } /* Refund Details page */ .dm-info { display: flex; flex-direction: column; gap: 12px; font-size: 12px; } .dm-info li { display: flex; } .dm-info li .left { width: 135px; } .dm-info li .right { width: 0; flex-grow: 1; padding-inline-start: 10px; } .dm-info.w-l-115 .left { width: 115px; } .width-fit { width: -moz-fit-content; width: fit-content; } .refund-details { display: flex; flex-wrap: wrap; align-items: flex-start; -moz-column-gap: 15px; column-gap: 15px; row-gap: 32px; } .refund-details .--content { width: 200px; flex-grow: 1; } .refund-details .img { width: 30%; max-width: 170px; flex-grow: 1; } .refund-details .dm-info { width: 100%; max-width: 230px; } @media screen and (max-width: 1400px) { .refund-details .img { max-width: 130px; } .refund-details .dm-info { width: 100%; max-width: 200px; } } .text-area-max-min { max-height: 500px; min-height: 100px; } .grid-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); gap: 16px; } /* lightbox */ .lightbox { display: flex; justify-content: center; align-items: center; flex-direction: column-reverse; gap: 10px; } .lb-container { position: relative; } .lb-outerContainer { background-color: transparent !important; } .lb-outerContainer .lb-nav a.lb-prev, .lb-outerContainer .lb-nav a.lb-next { width: 25px; background-size: contain; } .lb-dataContainer .lb-data .lb-close { width: 16px; height: 16px; background-size: contain; } .lightbox .lb-image { border: 0 !important; max-height: calc(100vh - 200px); -o-object-fit: cover; object-fit: cover; } .lb-data .lb-number { padding-bottom: 0; } @media (min-width: 575px) { .lb-container { width: 400px !important; } .lightbox .lb-image { width: 400px !important; height: auto !important; } } .lb-nav a { opacity: 1 !important; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; background-position: center center !important; background-size: 20px !important; background: rgba(255, 255, 255, 0.2); border: 1px solid #ffffff; } .lb-nav a.lb-prev { left: 0 !important; } .lb-nav a.lb-next { right: 0 !important; } @media screen and (min-width: 768px) { .lb-nav a.lb-prev { left: -50px !important; } .lb-nav a.lb-next { right: -50px !important; } } @media screen and (min-width: 1200px) { .lb-nav a.lb-prev { left: -160px !important; } .lb-nav a.lb-next { right: -160px !important; } } .custom-file { cursor: pointer; text-align: start; position: relative; display: inline-block; width: 100%; height: calc(1.6em + 1.21875rem); margin-bottom: 0; } .custom-file .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.6em + 1.21875rem); margin: 0; opacity: 0; } .custom-file .custom-file-input:focus + .custom-file-label { border-color: var(--bs-primary); } .custom-file .custom-file-label { position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 1; height: calc(1.6em + 1.21875rem); padding: 0.54688rem 0.875rem; font-weight: 400; line-height: 1.6; color: var(--bs-dark); background-color: var(--bs-white); border: 0.0625rem solid var(--bs-border-color); border-radius: 0.3125rem; } .custom-file .custom-file-label::after { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; display: block; height: calc(1.6em + 1.09375rem); padding: 0.54688rem 0.875rem; line-height: 1.6; color: var(--bs-dark); content: "Browse"; background-color: transparent; border-inline-start: inherit; border-radius: 0; } .custom-file .custom-control-label::before, .custom-file .custom-file-label, .custom-file .custom-select { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .upload-img-view { block-size: 162px; inline-size: 162px; max-inline-size: 162px; border-radius: 5px; border: 0.5px solid var(--bs-border-color); aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; } .upload-img-view__banner { aspect-ratio: 3/1; inline-size: auto; max-inline-size: 100%; } /* Preloader */ .preloader { position: fixed; inline-size: 100%; block-size: 100%; /*background-color: var(--bs-white);*/ z-index: 9999999; display: grid; place-items: center; } .spinner-grow { background-color: var(--bs-primary); } /* loading */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #073b74; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1450a3; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #337ccf; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Update stock modal */ .update-stock-modal.restock-stock-update .modal-dialog { max-width: 540px; } .update-stock-modal .sku_combination { max-height: 350px; overflow-y: auto; scrollbar-width: thin; } .update-stock-modal .sku_combination thead { position: sticky; top: 0; } .update-stock-modal .sku_combination thead th { background: var(--bs-white); border-bottom: 1px solid rgba(231, 234, 243, 0.7) !important; } /* old file upluad */ .inputDnD .form-control-file { position: relative; inline-size: 100%; block-size: 100%; min-block-size: 8rem; outline: none; /* visibility: hidden; */ cursor: pointer; border-radius: 10px; opacity: 0; } .form-group.input_image { background-repeat: no-repeat; position: relative; overflow: hidden; } .form-group.input_image::before { content: attr(data-title); display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: cover; background-position: center; z-index: 0; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; inset-inline-start: 0; inline-size: 100%; min-block-size: 100%; line-height: 2em; opacity: 1; visibility: visible; text-align: center; border: 1px dashed var(--bs-primary); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: visible; display: flex; justify-content: center; align-items: center; border-radius: 10px; color: var(--bs-primary); } .form-group.input_image .form-control-file { cursor: pointer; position: relative; z-index: 1; background-size: cover; background-position: center; } .input_image_edit { width: 100%; height: auto; background-position: center !important; background-size: contain; background-repeat: no-repeat; } /* Product Details page */ .review-details-popup { position: absolute; top: calc(100% + 5px); inset-inline-start: 50%; transform: translateX(-50%); width: 14rem; background: #fff; border-radius: 0.2857142857rem; z-index: 1; border: 1px solid var(--bs-border-color); padding: 10px; font-size: 0.688rem; transition: all ease 0.3s; } .review-hover:not(:hover) .review-details-popup { opacity: 0; transform: translateY(6px); visibility: hidden; } /* POS hold order popup */ .table-items-popup { position: fixed; opacity: 0; transform: translateY(6px); visibility: visible; pointer-events: none; transition: all 0.3s ease; width: 18rem; background: #fff; border-radius: 5px; z-index: 1055; border: 1px solid var(--bs-border-color); padding: 10px; font-size: 0.688rem; max-block-size: 300px; overflow-y: auto; } .table-items-popup.show { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } .table-items-popup .item.border-bottom:last-child { border-bottom: 0 !important; } .pair-list .key { min-width: 100px; --flex-basis: 100px; flex-basis: var(--flex-basis); } .pair-list .key.custom-flex-basis { --flex-basis: 60px !important; } .pair-list > div { display: flex; gap: 8px; } .pair-list > div:not(:last-child) { margin-bottom: 5px; } .card-top-bg-element { position: relative; z-index: 1; } .card-top-bg-element .pair-list .key { min-width: 100px; --flex-basis: 100px; flex-basis: var(--flex-basis); } .card-top-bg-element::after { position: absolute; z-index: -1; background-color: rgba(233, 243, 255, 0.3); top: 0; left: 0; content: ""; width: 100%; height: 120px; } .extra-images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.7); cursor: pointer; } .progress, .progress-stacked { --bs-progress-height: 0.5rem; --bs-progress-font-size: 0.75rem; --bs-progress-bg: var(--bs-secondary-bg); --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); --bs-progress-bar-color: #fff; --bs-progress-bar-bg: var(--bs-primary); } /* Product Gallery */ .view--more { overflow: hidden; position: relative; } .view-more-collapsable { height: 130px; padding-bottom: 30px; transition: all ease 0.3s; } .expandable-btn { position: absolute; inset-block-end: 0; inset-inline-end: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 80%); padding: 10px 20px; height: 40px; color: var(--bs-primary); cursor: pointer; z-index: 1; width: 100%; border: none; outline: none; box-shadow: none; font-weight: 700; } .no-gutter { border: none; outline: none; box-shadow: none; background: transparent; padding: 0; margin: 0; } @media (min-width: 992px) { .dropdown-w-lg-30 { width: 33.125rem !important; } } .ripple-animation { line-height: 1; box-shadow: 0 0 0px 0px rgba(2, 134, 255, 0.3); cursor: pointer; border-radius: 50%; transition: 250ms color; animation-name: wave; animation-duration: 1.3s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes wave { 0% { box-shadow: 0 0 0px 0px rgba(2, 134, 255, 0.3); } 100% { box-shadow: 0 0 0px 10px rgba(2, 134, 255, 0); } } .border-color-primary-light { border-color: rgba(var(--bs-primary-rgb), 0.1) !important; } .bg-aliceblue { background: aliceblue; } .coupon-details { border-radius: 10px; overflow: hidden; max-width: 522px; } .coupon-details .coupon-details .close { position: absolute; inset-inline-end: 15px; inset-block-start: 15px; color: #fff; z-index: 2; } .coupon__details { display: flex; position: relative; border-radius: inherit; overflow: hidden; } .coupon__details-right { width: 142px; background: #09478a; } .coupon__details-left { width: 0; flex-grow: 1; padding: 30px 29px 45px; border-right: 12px solid #98cbf0; } .coupon__details-left .coupon-info { font-size: 12px; line-height: 15px; margin-top: 47px; text-transform: capitalize; font-weight: 500; color: var(--bs-dark); } .coupon__details-left .coupon-info-item:not(:last-child) { margin-bottom: 10px; } [dir=rtl] .coupon__details-left { border-right: none; border-left: 12px solid #98cbf0; } .coupon__details .coupon { width: 157px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; font-weight: 500; font-size: 16px; line-height: 19px; color: #073b74; border-radius: 50%; position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: 65px; background: #fff; box-shadow: var(--dropdown-shadow); } .coupon__details .coupon h4 { font-weight: 700; font-size: 32px; line-height: 39px; color: #073b74; line-height: 1; } @media (max-width: 575px) { .coupon__details-right { width: 120px; } .coupon__details-right .coupon { width: 125px; inset-inline-end: 55px; } .coupon__details-right .coupon h4 { font-size: 24px; } } @media (max-width: 430px) { .coupon__details-left { padding: 30px 20px 38px; } .coupon__details-right { width: 45px; } .coupon__details-right .coupon { width: 85px; inset-inline-end: 10px; } .coupon__details-right .coupon h4 { font-size: 22px; margin-bottom: 0; } } .input-required-icon { color: var(--bs-danger); vertical-align: middle; margin: 0; padding: 0; } .custom_upload_input { position: relative; } .custom_upload_input input[type=file] { display: block; width: 100%; padding: 0; width: 100%; aspect-ratio: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--bs-white); border: 1px dashed var(--bs-border-color); border-radius: 5px; opacity: 0; z-index: 9; position: relative; cursor: pointer; } .custom_upload_input input[type=file].meta-img { aspect-ratio: 2.5/1; } .custom_upload_input .delete_file_input_css, .custom_upload_input .delete_file_input { content: ""; position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; font-size: 15px; justify-content: center; align-items: center; display: none; cursor: pointer; color: var(--bs-danger); border: 1px solid var(--bs-danger); z-index: 10; } .custom_upload_input .delete_file_input_css:not(.d--none), .custom_upload_input .delete_file_input:not(.d--none) { display: flex; } .custom_upload_input .delete_file_input:hover { color: #fff; border: 1px solid var(--bs-danger); z-index: 10; } .custom-upload-input-file-area { display: block; width: 100%; padding: 0; width: 100%; aspect-ratio: 1; } @media (max-width: 575px) { .custom_upload_input input[type=file].meta-img { aspect-ratio: 1.5/1; } } .img_area_with_preview { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; width: 100%; overflow: hidden; border: 1px solid rgba(170, 170, 170, 0.2117647059); border-radius: 5px; padding: 5px; border: 2px dashed rgba(0, 0, 0, 0.0784313725); } .img_area_with_preview img { width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; } .img_area_with_preview img[src^="data:"] { height: 100% !important; } .image-uploader { --aspect-ratio: 1; --size: 180px; overflow: hidden; position: relative; block-size: var(--size); min-inline-size: var(--size); max-inline-size: 100%; border-radius: 0.5rem; cursor: pointer; aspect-ratio: var(--aspect-ratio); border: 2px dashed var(--bs-border-color); } .image-uploader__zip { position: absolute; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; z-index: 2; inset: 0; } .image-uploader__zip-preview { display: flex; align-items: center; flex-direction: column; justify-content: center; inline-size: 100%; block-size: 100%; background-color: transparent; text-align: center; gap: 10px; padding: 10px; } .image-uploader__zip-preview img { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; } .image-uploader__icon_delete, .image-uploader__icon { border-radius: inherit; } .image-uploader .zip-remove-btn { position: absolute; inset-inline-end: 16px; top: 16px; z-index: 4; padding-top: 7px; } .image-uploader .zip-remove-btn__outside { top: -10px; inset-inline-end: -10px; padding-top: 0; } .image-uploader__file { position: absolute; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; z-index: 2; inset: 0; } .search-form { position: relative; } .search-form:not(:has(.search-submit)) button { position: absolute; inset-block-start: 0; inset-inline-end: 0; background-color: transparent; box-shadow: none; height: 100%; border: none; } .search-result-box { overflow: auto; overflow-x: hidden; max-height: 400px; } .search-result-box.child-border-bottom .select-clearance-product-item:not(:last-child) { border-bottom: 1px solid var(--bs-border-color); } .remove-selected-product { position: absolute; inset-inline-end: -10px; inset-block-start: -10px; background: transparent; cursor: pointer; border: none; outline: none; box-shadow: none; padding: 0; font-size: 16px; color: var(--body-light-color); } .select-product-item .product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .select-product-item .media-body { width: 0; min-width: 120px; } .selected-products .select-product-item { width: 100%; max-width: 350px; } .cursor-pointer { cursor: pointer; } .select-product-search .dropdown-toggle.form-select::after { display: none !important; } .multiple-tags-with-image .select2-container { width: 100% !important; } .multiple-tags-with-image .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { padding: 4px 8px; border-radius: 30px; } .multiple-tags-with-image .select2-selection__choice__remove { display: none !important; } .multiple-tags-with-image .multiple-select2 + .select2-container--default .select2-selection--multiple ul.select2-selection__rendered .select2-search { width: 100% !important; margin-right: 0 !important; } .multiple-tags-with-image .multiple-select2 + .select2-container--default .select2-selection--multiple ul.select2-selection__rendered .name { display: none !important; } .multiple-tags-with-image .multiple-select2 + .select2-container--default .select2-selection--multiple .select2-selection__choice { display: none !important; } .multiple-tags-with-image .select2-container--default .select2-search--inline .select2-search__field { width: 100% !important; } .multiple-tags-with-image .show-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 0; } .multiple-tags-with-image .show-tags li { background: var(--section-bg2); border-radius: 30px; color: var(--bs-dark); font-weight: 500; padding: 5px 7px; list-style: none; display: flex; } .multiple-tags-with-image .tag-image-20px { width: 20px; height: 20px; -o-object-fit: cover; object-fit: cover; } .border-between { display: flex; gap: 0.625rem; flex-wrap: wrap; } .border-between .parent { position: relative; padding-inline-end: 0.625rem; } .border-between .parent:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); width: 0.0625rem; height: 0.9375rem; background-color: rgba(0, 0, 0, 0.1); } .border-between .parent:last-child::after { display: none; } .border-between .parent.last-in-row::after { display: none; } @media (min-width: 576px) { .cat-item.border--end:not(:last-child) { border-inline-end: 1px solid rgba(0, 0, 0, 0.1); padding-inline-end: 0.5rem; } } .remove-selected-clearance-parent { position: relative; } .remove-selected-clearance-parent .right-absolute-btn { position: absolute; inset-block-start: 5px; inset-inline-end: -3px; } .timeline-steps { max-inline-size: 400px; margin: 0 auto; } .timeline-step { max-inline-size: 400px; margin: 0 auto; display: flex; position: relative; } .timeline-step:after { content: ""; position: absolute; inset-inline-start: 15px; inset-block-start: 32px; block-size: 0; inline-size: 2px; background-color: #dcdcdc; } .timeline-step:not(:last-child):after { block-size: 100%; } .timeline-step.completed .timeline-number { background-color: green; } .timeline-step.completed .timeline-number svg, .timeline-step.failed .timeline-number svg { opacity: 1; } .timeline-step.completed .timeline-title, .timeline-step.failed .timeline-title { color: #212b36; } .timeline-step.completed .timeline-text, .timeline-step.failed .timeline-text { color: #666; opacity: 0.5; } .timeline-step.completed:after { background-color: var(--bs-success); } .timeline-step.failed .timeline-number { background-color: -var(--bs-danger); } .timeline-step.failed:after { background-color: -var(--bs-danger); } .timeline-info { margin: 5px 0 20px; } .timeline-title { font-size: 16px; color: #dcdcdc; margin: 0 0 8px; } .timeline-text { margin-block-end: 5px; color: #dcdcdc; } .timeline-number { width: 32px; height: 32px; border-radius: 100%; background-color: #dcdcdc; flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; margin-inline-end: 14px; } .timeline-number svg { inline-size: 16px; block-size: 16px; -o-object-fit: contain; object-fit: contain; opacity: 0; } .timeline-number svg path { fill: #fff; } .custom-control-group { display: block; margin: 0; cursor: pointer; text-align: center; } .custom-control-group .label { border-radius: 5px; border: 1px solid #e3eaef; background: #fff; padding: 10px; display: block; } .custom-control-group input { display: none; } .custom-control-group input:checked + .label { border-color: var(--bs-primary); } .custom-control-group .check-list-group li { list-style: none; } /* Login CSS */ .auth-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } .auth-wrapper * { font-family: "Roboto", sans-serif; } .auth-wrapper-right { width: 100%; max-width: 660px; background: #fff; min-height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px 0; } .auth-wrapper-right .auth-wrapper-form { max-width: 452px; width: 100%; margin: 0 auto; } @media (min-width: 1550px) { .auth-wrapper-right .auth-wrapper-form { transform: translateX(-30px); } } .auth-wrapper-right .auth-header { font-size: 20px; line-height: 1.4; color: #a0a0a0; margin-bottom: 60px; font-weight: 300; } .auth-wrapper-right .auth-header a { font-weight: 700; text-decoration: underline; color: var(--bs-primary); } .auth-wrapper-right .auth-header .title { font-size: 40px; font-weight: 700; margin-bottom: 10px; text-transform: capitalize; } .auth-wrapper-right .auth-header .badge { font-weight: 400; font-size: 14px; color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.1); border-radius: 15px; padding: 7px 13px 6px; } .auth-wrapper-right .auto-fill-data-copy { padding-top: 26px; } .auth-wrapper-right .auto-fill-data-copy .action-btn { width: 45px; height: 45px; } .auth-wrapper-right .btn-block { height: 45px !important; padding-top: 4px; padding-bottom: 4px; border-radius: 10px; } @media (min-width: 1550px) { .auth-wrapper-right { max-width: 718px; } .auth-wrapper-right .input-label { margin-bottom: 12px; } .auth-wrapper-right .form-group { margin-bottom: 35px; } .auth-wrapper-right .auto-fill-data-copy { color: #9b9b9b; font-size: 18px; } .auth-wrapper-right .auto-fill-data-copy strong { color: #111; } .auth-wrapper-right .btn-block, .auth-wrapper-right .form-control { height: 45px !important; border-radius: 10px; } .auth-wrapper-right .btn-block:not(.btn-white) { font-size: 20px; } .auth-wrapper-right .auto-fill-data-copy .action-btn { width: 45px; height: 45px; border-radius: 10px; } .auth-wrapper-right .auto-fill-data-copy .action-btn i { font-size: 24px; } } @media (min-width: 1200px) and (max-width: 1399px) { .auth-wrapper-right .custom-control-label::after, .auth-wrapper-right .custom-control-label::before { top: 0.1rem; } } .auth-wrapper-left { width: 0; flex-grow: 1; /*background: url(../svg/components/login-bg.png) no-repeat -95px bottom/cover;*/ /* background: url(../svg/components/bg.png) no-repeat -95px bottom/cover; */ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .auth-wrapper-left .auth-left-cont { margin-inline-start: auto; margin-inline-end: 172px; } .auth-wrapper-left .auth-left-cont img { max-width: 388px; width: 70%; max-height: 76px; margin-bottom: 20px; -o-object-fit: contain; object-fit: contain; -o-object-position: left center; object-position: left center; } @media (min-width: 1600px) { .auth-wrapper-left .auth-left-cont img { width: 100%; } } .auth-wrapper-left .auth-left-cont .title { font-size: 70px; line-height: 1.3; font-weight: 300; } .auth-wrapper-left .auth-left-cont .title strong { font-weight: 700; } @media (max-width: 1549px) { .auth-wrapper-left .auth-left-cont { margin-inline-end: 134px; } .auth-wrapper-left .auth-left-cont .title { font-size: 55px; } .auth-wrapper-right .auth-header { font-size: 16px; margin-bottom: 35px; } .auth-wrapper-right .auth-header .title { font-size: 36px; margin-bottom: 0; } .auth-wrapper-right .auth-header .badge { margin-top: 10px; } .auth-wrapper .mt-xxl-3 { margin-top: 0 !important; } .auth-wrapper-right .btn--primary { height: 38px; } } @media (max-width: 1300px) { .auth-wrapper-left .auth-left-cont { margin-inline-end: 84px; } .auth-wrapper-left .auth-left-cont .title { font-size: 45px; } .auth-wrapper-right { max-width: 560px; } .auth-wrapper-right .auth-header { font-size: 14px; margin-bottom: 1rem; } .auth-wrapper-right .auth-header .title { font-size: 28px; } .auth-wrapper-right .auth-header .badge { font-size: 11px; } .auth-wrapper-right .form-group { margin-bottom: 1rem; } .auth-wrapper-right .form-control { height: 38px; font-size: 12px; } .auth-wrapper-right .btn-block { height: 38px !important; } .auth-wrapper-right .custom-control-label { font-size: 12px; } .auth-wrapper-right .auto-fill-data-copy { padding-top: 10px; } .auth-wrapper-right .auto-fill-data-copy .action-btn { width: 35px; height: 35px; } } @media (max-width: 1199px) { .auth-wrapper-right { max-width: 450px; padding: 20px 40px; } } .auth-wrapper-right-logo { display: none; } @media (max-width: 991px) { .auth-wrapper-left { display: none; } .auth-wrapper-right-logo { display: block; width: 70%; max-width: 200px; margin: 0 auto; margin-bottom: 20px; } .auth-wrapper-right-logo img { width: 100%; max-height: 70px; -o-object-fit: contain; object-fit: contain; -o-object-position: center center; object-position: center center; } .auth-wrapper-right { padding: 25px 40px; max-width: 100%; text-align: center; } .auth-wrapper-right .form-group { text-align: start; } } @media (max-width: 767px) { .auth-wrapper-right { padding: 15px 30px; max-width: 100%; } } .__inline-2 { z-index: 9; position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; } .btn-number { position: relative; overflow: hidden; min-width: 32px; } .btn-number .btn-number:hover, .btn-number .btn-number:focus { color: var(--bs-primary); } .ripple { position: absolute; border-radius: 50%; transform: translate(-75%, -18%) scale(0); animation: ripple 300ms linear; -webkit-animation: ripple 300ms linear; -moz-animation: ripple 300ms linear; background-color: var(--bs-primary); } .pos-alert-message { position: absolute; inset-inline-start: 36px; bottom: calc(100% - 22px); width: 80vw; max-width: 350px; align-items: center; font-size: 13px; padding: 12px; } .pos-alert-message a i { color: #7d5f00; font-size: 26px; } .pos-alert-message h6 { font-size: 14px; } .pos-alert-message::before { content: ""; position: absolute; top: 100%; inset-inline-start: 30px; background: #fef7d1; clip-path: polygon(0 0, 50% 100%, 100% 0); height: 10px; width: 20px; } @media screen and (max-width: 991px) and (min-width: 768px) { .pos-alert-message { inset-inline-start: -60px; } .pos-alert-message::before { inset-inline-start: 110px; } } @media screen and (max-width: 575px) { .pos-alert-message { inset-inline-start: 0px; } .pos-alert-message::before { inset-inline-start: 60px; } } .product-quantity-group { border: 1px solid var(--bs-border-color); max-inline-size: 96px; border-radius: 5px; display: flex; } .product-quantity-group button { height: 100%; padding: 6px; border: none; } .product-quantity-group input { border: none; height: auto; padding: 2px; } .h-90dvh { height: 90dvh; } /* POS Custom scrollbar */ .custom-scrollbar-pos::-webkit-scrollbar { width: 5px; } .custom-scrollbar-pos::-webkit-scrollbar-track { background: #f1f1f1; } .custom-scrollbar-pos::-webkit-scrollbar-thumb { background: #b3b3b3; } .custom-scrollbar-pos::-webkit-scrollbar-thumb:hover { background: #555; } input.qty { max-width: 60px; height: 30px; text-align: center; } .file-upload-parent { max-width: 420px; margin: auto; } .custom-file-upload { position: relative; display: block; font-family: var(--bs-body-font-family); background-color: var(--bs-white); border: 1px dashed var(--border-dark); padding: 30px; border-radius: 10px; height: 100%; transition: all 0.5s ease; } .custom-file-upload input[type=file] { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 100%; opacity: 0; z-index: -1; pointer-events: none; } .file-preview-list_single { position: relative; } .file-preview-list_single .close_btn { position: absolute; inset-block-start: -0.5rem; inset-inline-end: -0.5rem; --size: 1.5rem; } .file-preview-list_two .file-preview-list_single { background-color: var(--section-bg) !important; } .is-valid { border-color: var(--bs-success) !important; } .is-invalid { border-color: var(--bs-danger) !important; } input[type=tel] { direction: ltr !important; } #locationModal .active-status.nav-link { border: 0 !important; } .custom-scrollable { overflow-x: auto; scrollbar-width: none; } .card-h-100vh { height: calc(100vh - 115px) !important; } #cart-summary { overflow-y: auto; max-height: 64vh; padding: 0 0.5rem; } .bottom-absolute-buttons { position: absolute; inset-block-end: 0; inset-inline-start: 0; padding: 10px; width: 100%; border-radius: 0 0 10px 10px; background-color: var(--bs-white); } .bottom-absolute-buttons .pagination { margin-bottom: 0; } [dir=rtl] input[type=date] { direction: rtl; text-align: right; } [dir=rtl] input[type=date]::-webkit-calendar-picker-indicator { order: -1; } #apex-line-chart { direction: ltr; } .z-10 { z-index: 10 !important; } @media (max-width: 575px) { .gallary-card.hover-wrap .hover-inner .icon-btn { width: 20px; height: 20px; } } .ms-n-6px { margin-inline-start: -6px !important; } .dropdown-cart { max-inline-size: 90vw !important; } .dropdown-cart-image:not(:first-child) .shadow-left { box-shadow: -2px 0px 3px 0px rgba(var(--shadow-color-rgb), 0.08); } [dir=rtl] .dropdown-cart-image:not(:first-child) .shadow-left { box-shadow: 2px 0px 3px 0px rgba(var(--shadow-color-rgb), 0.08); } .max-h-70vh { max-block-size: 70vh !important; } .max-h-65vh { max-block-size: 65vh !important; } .table.bg-transparent { --bs-table-bg: transparent !important; } @media (min-width: 768px) { #offcanvasSectionPreview { width: 50% !important; } } /* Document upload */ .document-upload-wrapper { position: relative; height: 120px; max-width: 280px; background-color: var(--bs-white); color: var(--bs-dark); border-radius: 5px; border: 1px dashed var(--bs-border-color); display: flex; justify-content: center; align-items: center; flex-grow: 1; cursor: pointer; } .document-upload-wrapper.lg { height: 180px; max-width: 100%; } .document-upload-wrapper.lg + .pdf-single { max-width: 100%; } .document-upload-wrapper.lg + .pdf-single .pdf-thumbnail { height: 180px; } .document-upload-wrapper .document_input { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; } .document-upload-wrapper .textbox { -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .pdf-single { position: relative; display: inline-block; width: 100%; max-width: 280px; height: 100%; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; cursor: pointer; flex-grow: 1; } .pdf-single .pdf-frame { overflow: hidden; } .pdf-single .pdf-thumbnail { height: 120px; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; width: 100%; border-radius: 5px; } .pdf-single .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); color: white; display: flex; flex-direction: column; justify-content: end; align-items: center; border-radius: 5px; transition: opacity 0.3s ease; } .pdf-single .remove-btn { position: absolute; inset-block-start: -10px; inset-inline-end: -10px; background: #ff4949; color: #fff; block-size: 26px; inline-size: 26px; display: flex; justify-content: center; align-items: center; border-radius: 100px; display: none !important; } .pdf-single .pdf-info { background-color: #fff; box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 14px 11px; width: 100%; display: flex; align-items: center; gap: 10px; } .pdf-single .file-name-wrapper { color: var(--bs-dark); font-size: 12px; font-weight: 500; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .pdf-single .file-name { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .single_mx-100 .document-upload-wrapper, .single_mx-100 .pdf-single { max-width: 100%; } @media (max-width: 575px) { .document-upload-wrapper, .pdf-single { max-width: 220px; } .single_mx-100 .document-upload-wrapper, .single_mx-100 .pdf-single { max-width: 100%; } } .opacity-50 { opacity: 0.5 !important; } .search-shortcut-key-wrapper { background-color: var(--bs-white); padding: 3px 10px; border-radius: 10px; border: 1px solid var(--bs-border-color); font-size: 10px; font-weight: 600; } @media (min-width: 992px) { .me-lg-n1 { margin-inline-end: -0.25rem; } } .text-body-light { color: var(--body-light-color); } .bg-blur { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } @media (min-width: 768px) { .h-md-350 { block-size: 350px !important; } } #page-add-modal .select2-container--default .select2-results > .select2-results__options { max-height: 110px; } .h-100vh { height: 100vh !important; } .max-h-100vh-350px { max-block-size: calc(100vh - 350px) !important; } .rich-editor-html-content { overflow-wrap: anywhere !important; } .rich-editor-html-content p:has(img) { display: inline-flex; flex-wrap: wrap; margin-bottom: 0; } .rich-editor-html-content img, .rich-editor-html-content iframe.ql-video { width: 100%; max-width: 350px; aspect-ratio: 2/1; -o-object-fit: cover; object-fit: cover; border-radius: 5px; border: 1px solid var(--bs-border-color, #EFF1F4); margin-inline-end: 1rem; margin-bottom: 0; } @media (max-width: 575px) { .rich-editor-html-content table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rich-editor-html-content img, .rich-editor-html-content iframe.ql-video { max-width: 100%; } } #update-quantity #sku_combination .table-responsive { max-height: 100%; } .js-daterangepicker-time-only, .js-daterangepicker-times-sec { padding-right: 40px; } [dir=rtl] .js-daterangepicker-time-only, [dir=rtl] .js-daterangepicker-times-sec { direction: ltr; text-align: right; padding-right: 1rem; padding-left: 40px; } /* Product Details Swiper Slider */ .auto-item-width { --width: 10rem; } .width--4rem { --width: 4rem; } .pd-img-wrap .swiper { inline-size: 100%; block-size: 100%; } .pd-img-wrap .swiper .product { inline-size: 100%; } .pd-img-wrap .swiper-container { overflow: hidden; } .pd-img-wrap .quickviewSliderThumb .swiper-slide, .pd-img-wrap .quickviewSliderThumb2 .swiper-slide { cursor: pointer; } .pd-img-wrap [dir=rtl] .swiper-nav { direction: ltr; } .pd-img-wrap .swiper-slide img { inline-size: 100%; block-size: auto; -o-object-fit: cover; object-fit: cover; display: block; aspect-ratio: 1; border-radius: inherit; } .pd-img-wrap .swiper-button-next, .pd-img-wrap .swiper-button-prev { --size: 1.75rem; inline-size: var(--size); block-size: var(--size); background-color: transparent; color: var(--bs-primary); border: none; margin-block-start: 0; padding: 0.3125rem; position: absolute; z-index: 2; inset-block-start: 50%; transition: all 0.3s ease; pointer-events: auto; font-weight: 700; visibility: hidden !important; } .pd-img-wrap .swiper-button-next.swiper-button-disabled, .pd-img-wrap .swiper-button-prev.swiper-button-disabled { opacity: 0; cursor: not-allowed; pointer-events: none; color: var(--bs-primary); } .pd-img-wrap .swiper-button-next:not(.swiper-button-disabled), .pd-img-wrap .swiper-button-prev:not(.swiper-button-disabled) { background-color: rgba(var(--bs-primary-rgb), 1); color: var(--absolute-white); } .pd-img-wrap .swiper-initialized .swiper-button-next, .pd-img-wrap .swiper-initialized .swiper-button-prev { visibility: visible !important; } .pd-img-wrap .swiper-button-next:not(.position-static), .pd-img-wrap .swiper-button-prev:not(.position-static) { transform: translateY(-50%); } .pd-img-wrap .swiper-button-next:after, .pd-img-wrap .swiper-button-prev:after { font-size: calc(var(--size) / 2.5); } @media only screen and (max-width: 767px) { .pd-img-wrap .swiper-button-next, .pd-img-wrap .swiper-button-prev { --size: 1.5rem; } } .pd-img-wrap .swiper-button-next { inset-inline-end: 0rem; inset-inline-start: auto; } .pd-img-wrap .swiper-button-prev { inset-inline-start: 0rem; inset-inline-end: auto; } .pd-img-wrap .quickviewSliderThumb .swiper-button-next, .pd-img-wrap .quickviewSliderThumb .swiper-button-prev { transform: scale(0.3) translateY(-50%); opacity: 0; } .pd-img-wrap .quickviewSliderThumb:hover .swiper-button-next, .pd-img-wrap .quickviewSliderThumb:hover .swiper-button-prev { transform: scale(1) translateY(-50%); opacity: 1; } .pd-img-wrap .quickviewSliderThumb2 .swiper-slide img { aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; } .pd-img-wrap .auto-item-width .swiper-slide { --size: 50px; max-inline-size: var(--size); min-inline-size: var(--size); } .pd-img-wrap .active-border .swiper-slide-thumb-active { border-color: var(--bs-primary) !important; } .easyzoom { position: relative; display: block; direction: ltr !important; } .easyzoom * { direction: ltr !important; } .easyzoom.is-ready img { cursor: crosshair; } .easyzoom img { vertical-align: bottom; } .easyzoom.is-loading img { cursor: progress; } .easyzoom.is-error img { cursor: not-allowed; } .easyzoom .easyzoom-notice { position: absolute; top: 50%; left: 50%; z-index: 150; width: 10em; margin: -1em 0 0 -5em; line-height: 2em; text-align: center; background: #fff; box-shadow: 0 0 10px #888; } .easyzoom .easyzoom-flyout { position: absolute; z-index: 1000; overflow: hidden; background: #fff; } .easyzoom.easyzoom--overlay .easyzoom-flyout { top: 0; left: 0; width: 100%; height: 100%; } .easyzoom.easyzoom--overlay .easyzoom-flyout img { width: unset !important; max-width: unset !important; inline-size: unset !important; max-inline-size: unset !important; max-block-size: unset !important; block-size: unset !important; min-width: 120% !important; min-inline-size: 120% !important; } .blurry-div { --height: 60px; --color-rgb: 255, 255, 255; min-height: var(--height); bottom: 1rem; inset-inline-start: 0; background: linear-gradient(180deg, rgba(var(--color-rgb), 0) 0%, rgba(var(--color-rgb), 0.9) 50%); display: none; } @media (min-width: 991px) { .w-lg-280 { width: 280px !important; } } @media (min-width: 1199px) { .w-xl-280 { width: 280px !important; } } select.get-customer-list-by-ajax-request + .select2-container { width: 100% !important; } .overflow-wrap-anywhere { overflow-wrap: anywhere !important; } .h-100vh-250 { height: calc(100vh - 250px) !important; } .input-group .input-group-append .product-discount-type { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir=rtl] .input-group .input-group-append .product-discount-type { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .last-child-no-border > *:last-child { border: none !important; } .last-child-no-border > *[class^=pb-]:last-child, .last-child-no-border > *[class*=" pb-"]:last-child { padding-bottom: 0 !important; } .qty-input-group { color: var(--bs-dark); background: var(--bs-white); display: flex; align-items: center; margin: 0; padding: 0; overflow: hidden; } .qty-input-group .product-qty, .qty-input-group .qty-count { background: transparent; color: inherit; font-size: inherit; border: none; display: inline-block; min-width: 0; height: 2.5rem; line-height: 1; } .qty-input-group .product-qty:focus, .qty-input-group .qty-count:focus { outline: none; } .qty-input-group .product-qty { width: 2.5rem; min-width: 0; display: inline-block; text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .qty-input-group .product-qty::-webkit-outer-spin-button, .qty-input-group .product-qty::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .qty-input-group .qty-count { padding: 0; cursor: pointer; width: 2.5rem; font-size: 1.25em; overflow: hidden; position: relative; } .qty-input-group .qty-count:disabled { cursor: not-allowed; border-color: transparent; } /* Price range Slider */ #price_range_slider { width: calc(100% - 16px); height: 4px; border-radius: 12px; position: relative; } [dir=rtl] #price_range_slider { right: 16px; } #price_range_slider::after { content: ""; inset-inline-start: 0; width: calc(100% + 15px); height: 100%; background: #DCE4EA; position: absolute; } [dir=rtl] #price_range_slider::after { right: -15px; } #price_range_slider .slider-thumb { width: 20px; height: 20px; background-color: var(--bs-white); border: 6px solid var(--bs-primary); border-radius: 50%; position: absolute; top: -8px; cursor: pointer; z-index: 2; } #price_range_slider .slider-range { height: 4px; background: var(--bs-primary); position: absolute; top: 0; z-index: 1; } .outline-none { outline: none !important; } .custom_dropdown_wrapper { transition: all 0.3s ease-in-out; cursor: pointer; } .custom_dropdown_menu { position: absolute; top: 100%; width: 100%; height: 100%; z-index: 2; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2); display: none; } .custom_dropdown_list { max-height: 170px; overflow-y: auto; } .custom_dropdown_item { padding: 8px 6px; border-bottom: 1px solid var(--bs-border-color); cursor: pointer; } .custom_dropdown_item:last-child { border-bottom: none; } .tr-border-bottom tr:not(:last-child) { border-bottom: 1px solid var(--bs-border-color) !important; } .qty-input-group { color: var(--bs-dark); background: var(--bs-white); display: flex; align-items: center; margin: 0; padding: 0; overflow: hidden; } .qty-input-group .product-qty, .qty-input-group .qty-count { background: transparent; color: inherit; font-weight: bold; font-size: inherit; border: none; display: inline-block; min-width: 0; height: 2.5rem; line-height: 1; } .qty-input-group .product-qty:focus, .qty-input-group .qty-count:focus { outline: none; } .qty-input-group .product-qty { width: 2.5rem; min-width: 0; display: inline-block; text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .qty-input-group .product-qty::-webkit-outer-spin-button, .qty-input-group .product-qty::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .qty-input-group .qty-count { padding: 0; cursor: pointer; width: 2.5rem; font-size: 1.25em; overflow: hidden; position: relative; } .qty-input-group .qty-count:disabled { color: #ccc; background: #f2f2f2; cursor: not-allowed; border-color: transparent; } .mt-2px { margin-top: 2px; } .rounded-on-collapse.collapsed { border-radius: var(--bs-border-radius) !important; } .form-control.bg-white:disabled { background-color: var(--bs-white) !important; } #customer_id_value + .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bs-dark) !important; } .top-n1 { top: -4px !important; } .inset-inline-end-n1 { inset-inline-end: -4px !important; } .editor-min-h-80.quill-editor .ql-editor { min-height: 80px !important; } .category-has-item, .category-has-sub { display: none; padding-top: 15px; } .category-has-item li:not(:last-child), .category-has-sub li:not(:last-child) { margin-bottom: 20px; } .category-header.active .arrow-icon { transform: rotate(90deg); } .search-with-icon .search-cross { transform: translateY(35%); } .nav-underline { --bs-nav-underline-link-active-color: var(--bs-primary); } .min-h-20 { min-height: 20px !important; } .product-restock-stock-close, .product-stock-limit-close { top: -10px; inset-inline-end: -10px; } .rounded-10 { border-radius: 10px !important; } .dropdown-toggle::after { border-color: var(--bs-body-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 5px 5px 0 5px; border-radius: 5px; }/*# sourceMappingURL=style-extended.css.map */