@import url("../../../public/css/third_party/vue-html-editor_custom.css");
@import url("../../../public/css/third_party/dropzone_custom.css");

@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono/JetBrainsMono-ExtraLight.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono/JetBrainsMono-Light.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/public/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer container {
    .container {
        @apply px-4 lg:px-0;
    }
}

@layer utilities { 
    .max-h-0 {
        max-height: 0;
    }

    /* index */
    .index-actions {
        @apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
    }

    .suggestion-buttons a, .suggestion-buttons button {
        @apply mt-2 mb-2;
    }

    [data-dropdown-actions] {
        transform: unset !important;
    }

    table thead a {
        @apply bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize;
    }

    table thead a:hover {
        @apply border-black;
    }

    .tabs-link::before {
        content: '';
        @apply w-full h-0.5 absolute left-0 right-0 bottom-0 bg-purple rounded-tl-md rounded-tr-md opacity-0 invisible transition-all;
    }

    .tabs-link:hover::before {
       @apply opacity-100 visible;
    }

    .notifications-menu ul li a {
        border-bottom: 1px solid;
    }

    .avatar-attachment {
        @apply text-white inline-flex items-center justify-center;
        background-color: #adb5bd;
        border-radius: .375rem;
        font-size: 1rem;
        height: 45px;
        width: 45px;
    }
    /* index */
}

@layer base {
    /* form */
    .has-error input, .has-error select, .has-error textarea {
        border: 1px solid #cc0000 !important;
    }

    .has-error .el-select__tags input {
        border: transparent !important;
    }

    .input-money {
        @apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
    }

    .disabled-money input, .disabled-money {
        background-color:transparent !important;
        border: none !important;
    }

    [type="radio"] {
        @apply text-purple focus:outline-none focus:ring-purple focus:border-purple;
    }
    /* form */

    /* index */
    .active-tabs {
        border-color: transparent !important;
    }

    .active-tabs::before {
        @apply hidden;
    }
    /* index */

    /* menu */
    .menu-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .menu-scroll::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #EEE9DF;
    }

    .menu-scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #B9954F;
    }

    .menu-list ul svg {
        width: 22px;
        height: 24px;
        fill: none;
        stroke: #B9954F;
        stroke-width: 2px;
    }

    details > summary {
        list-style: none;
    }

    summary {
        outline:none;
    }

    details summary::-webkit-details-marker {
        display:none;
    }

    @keyframes details-fade {
        from {
            opacity:0;
            -webkit-transform: translateY(-0.5em);
            transform: translateY(-0.5em);
            -webkit-transform: var(--details-translate, translateY(-0.5em));
            transform: var(--details-translate, translateY(-0.5em));
        }
    }

    .menu-list details[open] > *:not(summary) {
        -webkit-animation: details-fade 500ms ease-out;
        animation: details-fade 500ms ease-out;
    }
    /* menu */

    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    .d-none {
        display: none;
    }

    .d-block {
        display: block;
    }

    .overflow-overlay {
        overflow-x: overlay;
    }

    .overflow-y-overlay {
        overflow-y: overlay;
    }

    .py-top {
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden; 
        height: 1.5rem;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden; 
        height: 3rem;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden; 
        height: 4rem;
    }

    /* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */
    .dashboard .px-12 {
        @apply px-0 lg:pl-12 lg:pr-12;
    }

    .dashboard .px-6 {
        @apply px-0 lg:pl-6 lg:pr-6;
    }
    /* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean  */

    /* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */
    button, input, optgroup, select, textarea {
        @apply font-normal;
    }
    /* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */

    /* changelog modal styling for update center */
    .change-log-modal .badge {
        @apply px-3 py-2 rounded-3xl text-xs font-medium bg-green text-white;
    }

    .change-log-modal h2 {
        @apply text-2xl font-bold text-purple mb-2;
    }

    .change-log-modal h3 {
        @apply text-lg font-bold text-purple mb-2;
    }

    .change-log-modal ul {
        @apply list-disc list-inside mb-2;
    }

    .change-log-modal li {
        @apply text-base text-purple;
    }

    .change-log-modal a {
        @apply text-green underline;
    }
    /* changelog modal styling for update center */

    #button-monthly {
        margin-inline-start: unset !important;
    }

    /* width of container, custom choose */
    [custom-half] {
        @apply sm:col-span-3 !important;
    }
    /* width of container, custom choose */
}

/* menu */
.menu-list {
    @apply w-64 lg:w-56 py-7 px-5 bg-purple-lighter menu-scroll overflow-y-auto overflow-x-hidden transition-all;
}

:root {
    --vip-rail-bg: #050506;
    --vip-rail-gold: #F2E7C5;
    --vip-sidebar-bg: #1D1D1F;
    --vip-sidebar-gold: #F0E4BF;
    --vip-sidebar-gold-soft: #DDD0AA;
    --vip-sidebar-active: #2A2927;
    --vip-content-bg: #F8F6F1;
    --vip-content-accent: #B9954F;
    --vip-content-accent-soft: #F7F0DE;
    --vip-content-accent-dark: #856632;
    --vip-border: #D8D2C7;
    scrollbar-color: #B9954F #EEE9DF;
    scrollbar-width: thin;
}

body {
    background-color: var(--vip-content-bg);
    color: #171717;
}

.finance-theme-rail {
    background-color: var(--vip-rail-bg) !important;
    border-inline-end: 1px solid rgba(232, 216, 167, 0.18);
}

.finance-theme-rail .text-purple,
.finance-theme-rail .material-icons,
.finance-theme-rail .material-icons-outlined,
.finance-theme-rail .material-icons-round {
    color: var(--vip-rail-gold) !important;
}

.finance-theme-sidebar {
    background-color: var(--vip-sidebar-bg) !important;
    color: var(--vip-sidebar-gold);
}

.finance-theme-sidebar .text-purple,
.finance-theme-sidebar .text-black,
.finance-theme-sidebar a,
.finance-theme-sidebar button,
.finance-theme-sidebar summary {
    color: var(--vip-sidebar-gold) !important;
}

.finance-theme-sidebar .menu__submenu a,
.finance-theme-sidebar .menu__submenu .text-purple {
    color: var(--vip-sidebar-gold) !important;
}

.finance-theme-sidebar .material-icons,
.finance-theme-sidebar .material-icons-outlined,
.finance-theme-sidebar .material-icons-round {
    color: var(--vip-sidebar-gold) !important;
}

.finance-theme-toggle,
.finance-theme-toggle .material-icons {
    color: var(--vip-sidebar-gold) !important;
}

.finance-theme-sidebar .main-menu .menu__submenu a,
.finance-theme-sidebar .main-menu .menu__submenu summary > div {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

.finance-theme-sidebar .main-menu a.font-semibold,
.finance-theme-sidebar .main-menu summary.font-semibold,
.finance-theme-sidebar .main-menu div.font-semibold {
    background-color: var(--vip-sidebar-active);
    box-shadow: inset 2px 0 0 #F6E9C2;
    border-radius: 0.25rem;
}

.finance-theme-sidebar .menu-active-indicator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.35rem;
    border: 1px solid rgba(246, 233, 194, 0.72);
    border-radius: 999px;
    background-color: rgba(246, 233, 194, 0.14);
    color: #F6E9C2 !important;
    font-size: 0.875rem !important;
    line-height: 1rem !important;
}

.finance-theme-sidebar .main-menu a:hover,
.finance-theme-sidebar .main-menu summary:hover > div {
    background-color: rgba(240, 228, 191, 0.10);
    border-radius: 0.25rem;
}

.finance-theme-sidebar ul svg {
    stroke: #F0E4BF;
}

#main-body .text-purple {
    color: var(--vip-content-accent) !important;
}

#main-body .text-indigo-600 {
    color: var(--vip-content-accent) !important;
}

#main-body .border-purple,
#main-body .focus\:border-purple:focus {
    border-color: var(--vip-content-accent) !important;
}

#main-body .bg-purple {
    background-color: var(--vip-content-accent) !important;
}

#main-body .bg-indigo-600 {
    background-color: var(--vip-content-accent) !important;
}

#main-body .after\:bg-purple::after {
    background-color: var(--vip-content-accent) !important;
}

.finance-theme-sidebar .menu__submenu li::before,
.finance-theme-sidebar .menu__submenu details.relative::before {
    background-color: rgba(242, 231, 197, 0.24);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background-color: #EEE9DF;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid #EEE9DF;
    border-radius: 999px;
    background-color: #B9954F;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #A17D3E;
}

.finance-theme-rail,
.finance-theme-sidebar,
.finance-theme-rail .menu-scroll,
.finance-theme-sidebar.menu-scroll {
    scrollbar-color: #D7C58F transparent;
}

.finance-theme-rail::-webkit-scrollbar-track,
.finance-theme-sidebar::-webkit-scrollbar-track,
.finance-theme-rail .menu-scroll::-webkit-scrollbar-track,
.finance-theme-sidebar.menu-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.finance-theme-rail::-webkit-scrollbar-thumb,
.finance-theme-sidebar::-webkit-scrollbar-thumb,
.finance-theme-rail .menu-scroll::-webkit-scrollbar-thumb,
.finance-theme-sidebar.menu-scroll::-webkit-scrollbar-thumb {
    border-color: transparent;
    background-color: #D7C58F;
}

.finance-theme-sidebar .bg-purple {
    background-color: #F6E9C2 !important;
}

.finance-theme-sidebar:focus-within,
.finance-theme-rail:focus-within {
    outline-color: #F6E9C2;
}

.menu-list-hidden {
    @apply w-0 p-0 opacity-0;
}

.menu__submenu li::before {
    @apply h-full absolute bg-gray-200 ltr:-left-4 rtl:-right-4;
    content: '';
    width: 1px;
}

.menu__submenu details.relative:before {
    @apply h-full absolute bg-gray-200 ltr:-left-4 rtl:-right-4;
    content: '';
    width: 1px;
}

.menu__submenu li:last-child::before {
    height: 20px;
}
/* menu */

/* element-ui */
.el-select {
    @apply block;
}

.el-select .el-select__input {
    @apply focus:outline-none focus:ring-transparent focus:border-transparent bg-transparent cursor-pointer;
}

.el-select .el-input .el-input__inner, .un-el-select {
    @apply w-full h-auto text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
    color:#595959 !important;
}

.el-select-group__title {
    @apply text-purple-500 font-bold;
}

.el-select-dropdown .popper__arrow::after {
    display: none;
}

.el-color-picker--mini {
    padding-right: unset !important;
}

html[dir="rtl"] .el-color-picker--mini {
    padding-right: initial !important;
    padding-left: unset !important;
}

.el-color-picker--mini .el-color-picker__trigger {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.el-select-dropdown__item {
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
}

.el-select-dropdown__item span {
    @apply w-full rounded-lg;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.el-select-dropdown__item .new-badge {
    width: 45px !important;
    margin-inline-start: 8px;
    z-index: 99;
}

.el-select-dropdown__item .new-badge:hover {
    background-color: #6ea152;
}

.el-select-dropdown__item .material-icons {
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
}

.el-select-dropdown__item .badge-success {
    @apply absolute bg-green text-white px-2 py-1 ltr:right-8 rtl:left-8 rounded-md text-xs ltr:text-right rtl:text-left m-0;
    width: auto;
}

.el-select-dropdown__item .badge-success:hover {
    background-color: #6ea152;
}

.el-select-dropdown__item span:hover {
    background-color: transparent;
 }

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #F5F7FA;
 }

.el-select__footer {
    background-color: transparent !important;
    border-top: 1px solid #D9D9D9;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer !important;
    margin-top: 8px;
    margin-bottom: -8px !important;
}

.el-select__footer:hover {
    background-color: var(--vip-content-accent) !important;
}

.el-select__footer:hover span {
    color: white !important;
}

.el-select__footer span {
    width: auto;
    padding: 0 !important
}

.el-select__footer span:hover {
    background-color: transparent;
}

.el-select-dropdown__list {
    padding: 8px 0 8px 0;
}

.el-select .el-select__tags {
    top: 54%;
}

html[dir="rtl"] .el-select .el-select__tags {
    padding-right: 6px !important;
}

html[dir="rtl"] .el-select .el-tag__close.el-icon-close {
    right: 0 !important;
}

/* Country select with flag icon: offset tags to avoid overlap with flag */
.el-select-tags-pl-38 .el-select__tags {
    padding-left: 38px;
}

html[dir="rtl"] .el-select-tags-pl-38 .el-select__tags {
    padding-left: 0;
    padding-right: 38px;
}

.el-select .el-select__tags .el-tag {
    @apply bg-purple text-white;
}

.el-select .el-tag__close.el-icon-close {
    @apply bg-transparent text-white;
}

.el-tag.el-tag--info .el-tag__close:hover {
    @apply bg-transparent;
}

.is-focus .el-select__caret {
    transform: rotateZ(0) !important;
}

.el-input.el-input--prefix.el-input--suffix .el-select__caret.el-input__icon.el-icon-:before {
    content: "\e6e1";
}

.no-arrow .el-select__caret {
    display: none;
}

.el-input .el-icon-circle-close {
    transform: unset !important;
    transition: unset !important;
    margin-top: 3px;
}

.el-date-editor input {
    @apply w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple;
    color: #595959 !important;
}

.el-date-editor .el-input__prefix {
    top: 3px;
    color: #595959;
}

html[dir="ltr"] .el-date-editor .el-input__prefix {
    left: 0;
}

html[dir="rtl"] .el-date-editor .el-input__prefix {
    right: 0;
}

.recurring-invoice-data {
    width: 9rem !important;
}

.recurring-invoice-data input {
    padding: 0 25px !important;
}

.el-color-picker__color {
    margin-top: 13px !important;
}

.el-color-picker--mini .el-color-picker__trigger {
    height: 48px !important;
}

.dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
    width: 900px !important;
}

.dashboard-picker .el-picker-panel__sidebar {
    width: 200px !important;
}

html[dir="ltr"] .el-picker-panel__sidebar {
    padding-left: 12px;
}

html[dir="rtl"] .el-picker-panel__sidebar {
    padding-right: 12px;
    right: 0;
}

html[dir="ltr"] .dashboard-picker .el-picker-panel__body {
    width: 700px !important;
    margin-left: 200px !important;
}

html[dir="rtl"] .dashboard-picker .el-picker-panel__body {
    width: 700px !important;
    margin-right: 200px !important;
}

.el-input__suffix[style*="direction:rtl"] {
    left: 0;
    right: unset !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--vip-content-accent) !important;
    border-color: var(--vip-content-accent) !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 #D7C89E !important;
    box-shadow: -10px 0 0 #D7C89E !important;
}

html[dir="rtl"] .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
html[dir="rtl"] .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
html[dir="rtl"] .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: 10px 0 0 #D7C89E !important;
    box-shadow: 10px 0 0 #D7C89E !important;
}

.el-date-editor .el-range-input, .el-date-editor .el-range-input::placeholder {
    color: #424242;
}

.el-picker-panel__shortcut {
    width: auto;
    line-height: 20px;
    border-bottom: 1px solid transparent;
    padding-left: 0;
    margin-bottom: 3px;
}

html[dir="rtl"] .el-picker-panel__shortcut {
    padding-left: revert;
    padding-right: 0;
}

.el-picker-panel__shortcut:hover {
    color: #000000 !important;
    border-bottom: 1px solid black;
    transition: all 0.2s ease-in;
}

html[dir="rtl"] .el-input__suffix {
    left: 5px;
    right: unset;
    text-align: left;
}

html[dir="rtl"] .el-select .el-input .el-input__inner,
html[dir="rtl"] .un-el-select {
    text-align: right;
    padding-left: 30px;
    padding-right: 12px;
}

/* Toggle YES/NO buttons: maintain consistent left-to-right order in RTL mode */
html[dir="rtl"] .toggle-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .el-scrollbar__wrap {
    margin-left: -15px !important;
    margin-right: unset !important;
}

html[dir="ltr"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    right: 15px !important;
}

html[dir="rtl"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    left: 15px !important;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: transparent;
}

@media only screen and (max-width: 480px) {
    .el-range-editor.el-input__inner {
        width: 100%;
    }

    /* apex-chart cash-flow */
    .apex-chart-cash-flow .apexcharts-legend {
        width: 100% !important;
        justify-content: space-around !important;
        padding: 0;
        flex-wrap: nowrap !important;
    }

    .apex-chart-cash-flow .apexcharts-legend-series {
        width: 8rem;
        text-align: center;
        margin: 0 !important;
    }

    .apex-chart-cash-flow  .apexcharts-toolbar {
        top: 45px !important;
    }
    /* apex-chart cash-flow */
}
/* element-ui */

/* apex-chart */
.apexcharts-donut-custom span.apexcharts-legend-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 1rem !important;
}

.apexcharts-donut-custom .apexcharts-legend-series {
    display: flex !important;
    align-items: center !important;
}

.apexcharts-donut-custom .apexcharts-legend {
    padding: 0 !important;
}
/* apex-chart */

/* collapse */
 .active-collapse {
    @apply opacity-100;
    height: auto;
}

.active-collapse-animation {
    height: 62px;
}

.collapse-sub {
    @apply block opacity-0 h-0 overflow-hidden;
}

.collapse-sub-report.collapse-sub {
    @apply hidden;
}
/* collapse */

.none-truncate {
    overflow: initial;
    text-overflow: unset;
}

.disabled-link {
    @apply cursor-default pointer-events-none opacity-50;
}

/* template table border radius control */
html[dir="rtl"] .lines-radius-border thead td:first-child {
    border-radius: 0px 10px 10px 0px;
}

html[dir="rtl"] .lines-radius-border thead td:last-child {
    border-radius: 10px 0px 0px 10px;
}
/* template table border radius control */

/* responsive for role mobile */
.scroll-div-mobile {
    width: 700px;
}

@media only screen and (min-width: 991px) {
    .scroll-div-mobile {
        width: 100%;
    }
}
/* responsive for role mobile */

/* full-width for mobile. Some component use inline styling for width */
@media only screen and (max-width: 991px) {
    .full-width-mobile {
        width: 100% !important;
    }

    .full-height-mobile {
        height: 100% !important;
    }
 }
 /* full-width for mobile. Some component use inline styling for width */

[dir="ltr"] .ltr\:-right-57 {
    right: -14.5rem;
}

[dir="rtl"] .rtl\:-right-59 {
    right: 16.5rem;
}

/* plans page accordion */
.active-accordion .js-accordions-text {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

.active-accordion i {
    transform: rotate(180deg);
}
/* plans page accordion */

/* hidden scroll-bar */
.hide-scroll-bar::-webkit-scrollbar {
    display: none;
}

.hide-scroll-bar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* hidden scroll-bar */

@media only screen and (max-width: 480px) {
    .small-table-width {
        width: 550px;
    }

    .small-col {
        width: auto !important;
    }

    .description-col {
        width: 180px !important
    }

    .amount-col {
        width: 70px !important;
    }

    .name-col {
        width: 6rem !important
    }

    .information-content {
        transform: unset !important;
        margin-top: 70px !important;
    }
}

@media only screen and (min-width: 480px) {
    .large-overflow-unset {
        overflow-x: unset;
    }
}

@media only screen and (max-width: 480px) {
    .dashboard-picker .el-picker-panel__body {
        width: 100% !important;
        margin-left: unset !important;
    }

    html[dir="rtl"] .dashboard-picker .el-picker-panel__body {
        margin-right: unset !important;
    }

    .dashboard-picker.el-date-range-picker.el-popper.has-sidebar {
        width: 100% !important;
    }
}

#nprogress .bar {
    background: #D7C89E !important;
    height: 5px !important;
}

#nprogress .peg {
    box-shadow: none !important;
}

#nprogress .spinner .spinner-icon {
    border-top-color: var(--vip-content-accent) !important;
    border-left-color: var(--vip-content-accent) !important;
}

.swiper-button-prev::after , .swiper-button-next::after {
    @apply hidden;
}

.swiper-pagination-bullet {
    background-color: #7D7D7D !important;
}

.swiper-pagination-bullet-active {
    background-color: #7D7D7D !important;
    border-radius: 1.5rem;
    padding: 4px 15px;
}

/* document body selected */
::-moz-selection { 
    background: var(--vip-content-accent);
    color: #FFFFFF;
}

::selection { 
    background: var(--vip-content-accent);
    color: #FFFFFF;
}
/* document body selected */

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

form {
    margin-block-end: 0;
}

body {
    @apply text-black;
    font-family: "JetBrains Mono", "Microsoft YaHei", "PingFang SC", monospace;
    height: 100%;
}

html[dir="ltr"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.inline-flex.items-center {
    margin-right: 1rem;
}

html[dir="rtl"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.inline-flex.items-center {
    margin-left: 1rem;
}

/* Native <select> arrow direction for RTL */
html[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-right: 0.75rem;
    padding-left: 2.5rem;
}

/* Report tree expand/collapse toggle - flip icon to point left in RTL expanded state */
html[dir="rtl"] button[node^='child'] .material-icons:not(.rotate-90) {
    transform: rotate(180deg);
}

/* Quill editor tooltip button spacing - RTL */
html[dir="rtl"] .ql-tooltip .ql-action,
html[dir="rtl"] .ql-tooltip .ql-remove {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Avatar attachment margin in multi-select tax group dropdown - LTR/RTL */
/*
html[dir="ltr"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.avatar-attachment.items-center {
    margin-right: 1rem;
}

html[dir="ltr"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.inline-flex.avatar-attachment {
    margin-right: 1rem;
}

html[dir="rtl"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.avatar-attachment.items-center {
    margin-left: 1rem;
}

html[dir="rtl"] .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .tax-group span.inline-flex.avatar-attachment {
    margin-left: 1rem;
}
*/
/* End avatar attachment margin */