:root {
    --base-font-size: 97%;
    --font-size: 0.85rem;
    --text-color-black: #111111;
    --link-color: #6a4bcf;
    --text-color: #454545;

    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;

    --bs-gray-50: #808080;
    --bs-gray-55: #8c8c8c;
    --bs-gray-60: #999999;
    --bs-gray-65: #a6a6a6;
    --bs-gray-70: #b3b3b3;
    --bs-gray-75: #bfbfbf;
    --bs-gray-80: #cccccc;
    --bs-gray-85: #d9d9d9;
    --bs-gray-90: #e6e6e6;
    --bs-gray-95: #f2f2f2;

    --control-border: #cccccc;
    --control-hover-border: hsl(
        var(--primary-h),
        var(--primary-s),
        calc(var(--primary-l) + 8%)
    );
    --control-focus-boxshadow-color: rgba(
        var(--primary-r),
        var(--primary-g),
        var(--primary-b),
        0.3
    );

    --control-button-focus-boxshadow-color: rgba(
        var(--primary-r),
        var(--primary-g),
        var(--primary-b),
        0.6
    );

    --control-button-loading-text: #777777;
    --control-button-loading-bg: rgba(180, 180, 180, 0.5);

    --error: #dc3545;

    --sidebar_no_menu_found_color: #ffc700;
    --checkout-bg-darker: hsl(
        var(--primary-h),
        var(--primary-s),
        calc(var(--primary-l) - 4%)
    );

    --sidebar-menu-text-size: 0.88rem;

    --sidebar_link_color: rgba(255, 255, 255, 0.9);
    --sidebar_linkhover_bgcolor: hsl(
        var(--primary-h),
        var(--primary-s),
        calc(var(--primary-l) + 8%)
    );
    --sidebar_linkselected_color: #ffffff;
    --sidebar_linkselected_bgcolor: hsl(
        var(--primary-h),
        var(--primary-s),
        calc(var(--primary-l) + 8%)
    );
    --sidebar_line_brdrcolor: rgba(255, 255, 255, 0.322);
    --sidebar_sublink_hover_border: rgba(255, 255, 255, 0.7);

    --topbar_notify_bgcolor: #ff6767;
    --topbar_modules_btn_color: #ffffff;
    --topbar_modules_btn_bgcolor: #737373;

    --input-checkbox-color: hsl(
        var(--primary-h),
        calc(var(--primary-s) * 0.6),
        calc(var(--primary-l) + 25%)
    );
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: var(--base-font-size);
    color: var(--text-color);
    scroll-behavior: smooth;
    line-height: 1.5;
}
body {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 0.5rem;
}
::-webkit-scrollbar-track {
    background-color: #f4f4f4;
}
::-webkit-scrollbar-thumb {
    background-color: #cccccc;
}

h1 {
    font-size: clamp(2.441rem, 5vw + 1rem, 3.815rem);
}
h2 {
    font-size: clamp(1.953rem, 4vw + 1rem, 3.052rem);
}
h3 {
    font-size: clamp(1.563rem, 3vw + 1rem, 2.441rem);
}
h4 {
    font-size: clamp(1.25rem, 2vw + 1rem, 1.953rem);
}
h5 {
    font-size: clamp(1rem, 1.5vw + 1rem, 1.563rem);
}
h6 {
    font-size: clamp(0.8rem, 1vw + 0.8rem, 1.25rem);
}

a {
    color: var(--link-color);
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    text-decoration: none;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border: none;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

input,
button,
select,
optgroup,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: none;
    outline: none;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

[hidden] {
    display: none;
}

/* Sizing */
.test-border {
    border: 1px solid #ff00007a;
}
.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 {
    width: 15%;
}
.w-17 {
    width: 17%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-33 {
    width: 33.3333%;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-49 {
    width: 49%;
}
.w-50 {
    width: 50%;
}
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-65 {
    width: 65%;
}
.w-66 {
    width: 66.6666%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-87 {
    width: 87%;
}
.w-90 {
    width: 90%;
}
.w-95 {
    width: 95%;
}
.w-100 {
    width: 100%;
}

/* margin */

.m-025 {
    margin: 0.25rem;
}
.m-05 {
    margin: 0.5rem;
}
.m-075 {
    margin: 0.75rem;
}
.m-1 {
    margin: 1rem;
}
.m-1-5 {
    margin: 1.5rem;
}
.m-2 {
    margin: 2rem;
}
.m-3 {
    margin: 3rem;
}

/* margin top and bottom */

.my-025 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-05 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-075 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-1-5 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* margin left and right */

.mx-025 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}
.mx-05 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}
.mx-075 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}
.mx-1 {
    margin-right: 1rem;
    margin-left: 1rem;
}
.mx-1-5 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}
.mx-2 {
    margin-right: 2rem;
    margin-left: 2rem;
}
.mx-3 {
    margin-right: 3rem;
    margin-left: 3rem;
}
.mx-auto {
    margin-right: auto;
    margin-left: auto;
}

/* margin top */

.mt-025 {
    margin-top: 0.25rem;
}
.mt-035 {
    margin-top: 0.35rem;
}
.mt-05 {
    margin-top: 0.5rem;
}
.mt-075 {
    margin-top: 0.75rem;
}
.mt-1 {
    margin-top: 1rem;
}
.mt-1-5 {
    margin-top: 1.5rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mt-3 {
    margin-top: 3rem;
}

/* margin bottom */

.mb-025 {
    margin-bottom: 0.25rem;
}
.mb-05 {
    margin-bottom: 0.5rem;
}
.mb-075 {
    margin-bottom: 0.75rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-1-5 {
    margin-bottom: 1.5rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.mb-3 {
    margin-bottom: 3rem;
}

/* margin left */

.ml-025 {
    margin-left: 0.25rem;
}
.ml-05 {
    margin-left: 0.5rem;
}
.ml-075 {
    margin-left: 0.5rem;
}
.ml-1 {
    margin-left: 1rem;
}
.ml-1-5 {
    margin-left: 1.5rem;
}
.ml-2 {
    margin-left: 2rem;
}
.ml-3 {
    margin-left: 3rem;
}

/* margin right */

.mr-025 {
    margin-right: 0.25rem;
}
.mr-05 {
    margin-right: 0.5rem;
}
.mr-075 {
    margin-right: 0.5rem;
}
.mr-1 {
    margin-right: 1rem;
}
.mr-1-5 {
    margin-right: 1.5rem;
}
.mr-2 {
    margin-right: 2rem;
}
.mr-3 {
    margin-right: 3rem;
}

/* padding */

.p-0 {
    padding: 0;
}
.p-025 {
    padding: 0.25rem;
}
.p-03 {
    padding: 0.3rem;
}
.p-05 {
    padding: 0.5rem;
}
.p-075 {
    padding: 0.75rem;
}
.p-1 {
    padding: 1rem;
}
.p-1-2 {
    padding: 1.2rem;
}
.p-1-3 {
    padding: 1.3rem;
}
.p-1-5 {
    padding: 1.5rem;
}
.p-2 {
    padding: 2rem;
}
.p-3 {
    padding: 3rem;
}

/* padding top & bottom */

.py-025 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-075 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-1-2 {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}
.py-1-5 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* padding right & left */

.px-0 {
    padding-right: 0;
    padding-left: 0;
}
.px-025 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}
.px-05 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-075 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.px-1 {
    padding-right: 1rem;
    padding-left: 1rem;
}
.px-1-2 {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
}
.px-1-5 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.px-2 {
    padding-right: 2rem;
    padding-left: 2rem;
}
.px-3 {
    padding-right: 3rem;
    padding-left: 3rem;
}

/* padding top */

.pt-025 {
    padding-top: 0.25rem;
}
.pt-05 {
    padding-top: 0.5rem;
}
.pt-075 {
    padding-top: 0.75rem;
}
.pt-1 {
    padding-top: 1rem;
}
.pt-1-5 {
    padding-top: 1.5rem;
}
.pt-2 {
    padding-top: 2rem;
}
.pt-3 {
    padding-top: 3rem;
}

/* padding bottom */

.pb-025 {
    padding-bottom: 0.25rem;
}
.pb-05 {
    padding-bottom: 0.5rem;
}
.pb-075 {
    padding-bottom: 0.75rem;
}
.pb-1 {
    padding-bottom: 1rem;
}
.pb-1-5 {
    padding-bottom: 1.5rem;
}
.pb-2 {
    padding-bottom: 2rem;
}
.pb-3 {
    padding-bottom: 3rem;
}

/* padding left */

.pl-025 {
    padding-left: 0.25rem;
}
.pl-05 {
    padding-left: 0.5rem;
}
.pl-075 {
    padding-left: 0.75rem;
}
.pl-1 {
    padding-left: 1rem;
}
.pl-1-5 {
    padding-left: 1.5rem;
}
.pl-2 {
    padding-left: 2rem;
}
.pl-3 {
    padding-left: 3rem;
}

/* padding right */

.pr-025 {
    padding-right: 0.25rem;
}
.pr-05 {
    padding-right: 0.5rem;
}
.pr-075 {
    padding-right: 0.75rem;
}
.pr-1 {
    padding-right: 1rem;
}
.pr-1-5 {
    padding-right: 1.5rem;
}
.pr-2 {
    padding-right: 2rem;
}
.pr-3 {
    padding-right: 3rem;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    background-color: #f7fafc;
    border-radius: 3px;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 500;
    color: #666666;
    background-color: #f7fafc;
    border: 1px solid #d4d4d4;
    border-radius: 100cm;
}
.badge.square {
    border-radius: 0.3rem;
}
.badge.active {
    color: #44ce86;
    background-color: #e9fef4;
    border-color: #ace9c9;
}
.badge.inactive {
    color: #ed9900;
    background-color: #fff6e5;
    border-color: #ffc457;
}
.badge.suspended {
    color: #ed9900;
    background-color: #fff6e5;
    border-color: #ffc457;
}
.badge.delivered-no {
    color: #ed2b00;
    background-color: #ffe5e5;
    border-color: #efa2a2;
}

.input-text,
.drop-box,
.text-area {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    max-width: 100%;
    height: 30px;
    padding-left: 0.5rem;
    color: #666666;
    font-size: 0.9rem;
    background-color: #f6f6f6;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    outline: none;
    z-index: 999;
}

.drop-box {
    max-width: 100%;
    -webkit-padding-end: 22px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='Grey' height='30' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 1px;
}
.text-area {
    height: auto;
    padding: 0.5rem;
    resize: none;
    resize: vertical;
}

.input-text.highlight,
.drop-box.highlight,
.text-area.highlight {
    border-color: #ff0000;
}

.input-text[readonly],
.drop-box[readonly],
.text-area[readonly] {
    background-color: transparent;
}

.input-text:focus,
.drop-box:focus,
.text-area:focus {
    border-color: #dcdcdc;
}

.input-text:not([readonly]):focus,
.drop-box:not([readonly]):focus,
.text-area:not([readonly]):focus {
    background-color: #f0edfa;
    -webkit-box-shadow: 0 0 0 1px #c3b7ec;
    box-shadow: 0 0 0 1px #c3b7ec;
}

.input-text:not([readonly]):focus::-webkit-input-placeholder,
.drop-box:not([readonly]):focus::-webkit-input-placeholder,
.text-area:not([readonly]):focus::-webkit-input-placeholder {
    color: #b2a7d3;
}

input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.85rem;
}

.check-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.check-box input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.check-box input::before {
    position: absolute;
    top: 0;
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ffffff;
    border: 1px solid #c1c1c1;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}
.check-box input:disabled::before {
    opacity: 0.3;
}
.check-box input:checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    font-family: "Font Awesome 7 Pro";
    content: "\f00c";
    font-size: 0.8rem;
    color: #ffffff;
    background-color: #a693e2;
    border-radius: 3px;
}
.check-box span {
    margin-left: 1.6rem;
    line-height: 1.2rem;
    font-size: 0.95rem;
}
.check-box input:disabled ~ span {
    opacity: 0.3;
}

.toggle-btn {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.toggle-btn input {
    width: 0;
}
.toggle-btn .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    height: 30px;
    width: 2.2rem;

    background-color: #f6f6f6;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    opacity: 0.6;
}
.toggle-btn input:checked ~ .box {
    opacity: 1;
    color: #876dd8;
    background-color: #f0edfa;
    border-color: #c3b7ec;
}
.toggle-btn .box::before {
    font-family: "Font Awesome 7 Pro";
    content: "\f234";
    font-weight: 300;
}
.toggle-btn input:checked ~ .box::before {
    content: "\f021";
}

.radio-input-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.radio-input-wrapper .input-radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
}
.radio-input-wrapper .input-radio input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
}
.radio-input-wrapper .input-radio .make-flex {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 100cm;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.radio-input-wrapper .input-radio:hover .make-flex {
    border-color: #a693e2;
    -webkit-box-shadow: 0 0 0 2px #e1dbf5;
    box-shadow: 0 0 0 2px #e1dbf5;
}
.radio-input-wrapper .input-radio input:checked ~ .make-flex {
    border-color: #a693e2;
}
.radio-input-wrapper .input-radio input:checked ~ .make-flex .dot {
    width: 8px;
    height: 8px;
    background-color: #795dd4;
    border-radius: 100cm;
}
.radio-input-wrapper .input-radio .input-label {
    font-size: 0.95rem;
    cursor: pointer;
}

.single-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;

    background-color: #ffffff;
    outline: 1px solid #dcdcdc;
    border-radius: 3px;
}
.single-checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.single-checkbox input::before {
    display: block;
    width: 2rem;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: "Font Awesome 7 Pro";
    content: "\f234";
    font-size: 0.9rem;
    color: var(--text-color);
    cursor: pointer;
}
.single-checkbox input:checked::before {
    content: "\f021";
    color: #876dd8;
    background-color: #f0edfa;
}

.select2-container {
    max-width: 90% !important;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.select2.with-add-btn ~ .select2-container {
    width: calc(100% - 2.5rem) !important;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.select2-container .select2-selection--single {
    height: 30px;
    color: #666666;
    font-size: 0.9rem;
    background-color: #f6f6f6;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    outline: none;
    z-index: 999;
}
.select2-container .select2-selection--single:focus {
    background-color: #f0edfa !important;
    -webkit-box-shadow: 0 0 0 1px #c3b7ec !important;
    box-shadow: 0 0 0 1px #c3b7ec !important;
}
.select2-container .select2-search__field {
    margin: 0.24rem 0;
    height: 30px;
    padding-left: 0.5rem;
    color: #666666;
    font-size: 0.9rem;
    background-color: #f6f6f6;
    border: 1px solid #dcdcdc !important;
    border-radius: 3px;
    outline: none;
}
.select2-container .select2-search__field:focus {
    background-color: #f0edfa !important;
    -webkit-box-shadow: 0 0 0 1px #c3b7ec !important;
    box-shadow: 0 0 0 1px #c3b7ec !important;
}
.select2-selection__rendered {
    font-size: 0.92rem;
    color: #666666 !important;
}
.select2-dropdown {
    border-radius: 3px !important;
    border: 1.5px solid #cccccc !important;
}
.select2-results__option {
    padding: 0.5rem;
    font-size: 0.92rem;
}
.select2-results__option--highlighted {
    background-color: #f0edfa !important;
    color: var(--text-color) !important;
}

select.highlight ~ .select2-container .select2-selection {
    border-color: #ff0000;
}

/* Input Group */

.inputgroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.inputgroup .inputgroup-addon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    color: #888888;
    background-color: #ffffff;
    min-width: 4rem;
    padding: 0 0.6rem;

    border-top: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
.inputgroup .inputgroup-addon:last-child {
    border-right: 1px solid #dcdcdc;
}

.inputgroup .inputgroup-addon:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.inputgroup .inputgroup-addon:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
html[lang="ar"] .inputgroup .inputgroup-addon:last-child {
    border-radius: 3px 0 0 3px;
}

.inputgroup .input-text {
    border-right-width: 0;
    border-radius: 0;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;

    width: calc(100% - 4rem);
}
.inputgroup .input-text:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.inputgroup .input-text:last-child {
    border-right-width: 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.inputgroup .text {
    font-style: normal;
    font-size: 0.85rem;
}

.form-search {
    width: 100%;
}
.form-search .group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
.form-search .drop-box {
    border-left-width: 0;
    border-radius: 0;
}
.form-search .group .drop-box:first-child {
    border-left-width: 1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.form-search .input-text {
    border-left-width: 0;
    border-radius: 0;
}
.form-search .group .input-text:first-child {
    border-left-width: 1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.form-search .clickable {
    width: 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-left-width: 0;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.form-search .clickable:hover {
    background-color: #f0edfa;
}
.form-search.highlight .drop-box,
.form-search.highlight .input-text {
    border-color: #ff0000;
}

.search-result {
    padding: 1rem;
    font-size: 0.9rem;
    background-color: #edfaf7;
    border: 1px solid #d8e8e4;
    border-radius: 3px;
}
.search-result .result-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.3rem;
}
.search-result .result-row:last-child {
    margin-bottom: 0;
}
.search-result .title {
    -ms-flex-preferred-size: 8rem;
    flex-basis: 8rem;
}
.search-result .value {
    -ms-flex-preferred-size: calc(100% - 8rem);
    flex-basis: calc(100% - 8rem);
    font-weight: 500;
}
.search-result .not-found {
    text-align: center;
}

.error {
    margin-top: 4px;
    color: #ff0000;
    font-size: 0.95rem;
    display: none;
}
.error.show {
    display: block;
}
.error::before {
    margin-right: 6px;
    font-family: "Font Awesome 7 Pro";
    content: "\f06a";
}

.suggest-box {
    position: absolute;
    left: 0;
    top: 36px;
    width: 100%;
    max-height: 15rem;
    background-color: #ffffff;
    outline: 1px solid #dcdcdc;
    -webkit-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
    z-index: 1111;
    border-radius: 3px;
    overflow-y: scroll;
    display: none;
}
.suggest-box.show {
    display: inline-block;
}
.suggest-box .fetching {
    padding: 0.5rem 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.9rem;
}
.suggest-box .fetching span {
    margin-left: 0.8rem;
}
.suggest-box .not-found {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.suggest-box a {
    display: block;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}
.suggest-box .suggest-option {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.suggest-box a:nth-child(even) .suggest-option {
    background-color: rgba(233, 233, 233, 0.5);
}
.suggest-box .suggest-option p {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.suggest-box .suggest-option p span {
    /*font-weight: 600;*/
    color: #8b7bc3;
    font-style: italic;
}
.suggest-box .suggest-option p span::after {
    content: " ";
}
.suggest-box .suggest-option .folder-badge {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    border: 1px solid #cccccc;
    border-radius: 0.3rem;
}

.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.input-file + label {
    display: inline-block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.input-file + label svg {
    height: 1rem;
    vertical-align: middle;
    fill: #666666;
    margin-top: -0.25rem;
    margin-right: 0.25rem;
}
.input-file + label {
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
}
.input-file.highlight + label {
    border-color: #ff0000;
}
.input-file + label span,
.input-file + label strong {
    padding: 4px 15px;
}
.input-file + label span {
    width: 70%;
    display: inline-block;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    font-size: 0.9rem;
}
.input-file + label strong {
    height: auto;
    color: #666666;
    background-color: #e9e9e9;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
}
.input-file:focus + label strong,
.input-file.has-focus + label strong,
.input-file + label:hover strong {
    background-color: #cccccc;
    color: #333333;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0 0 0.2rem 0.2rem;

    display: none;
}
.popup-overlay.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.popup-overlay .popup-canvas {
    background-color: #ffffff;
    border-radius: 0 0 0.3rem 0.3rem;
}
.popup-overlay .popup-canvas .popup-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.4rem 1.2rem;
    background-color: #eeeeee;
    border-bottom: 1px solid #cccccc;
}
.popup-overlay .popup-canvas .popup-content {
    padding: 1rem 1.2rem;
}
.popup-overlay .popup-canvas .popup-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid #cccccc;
    border-radius: 0 0 0.3rem 0.3rem;
}
.popup-overlay .popup-canvas .popup-header .title {
    font-size: 1rem;
}
.popup-overlay .popup-canvas .popup-header .close-btn {
    color: var(--error);
    background-color: transparent;
    cursor: pointer;
}
.popup-overlay .popup-canvas .popup-header .close-btn::before {
    font-family: "Font Awesome 7 Pro";
    content: "\f00d";
}
.popup-overlay .popup-canvas .popup-header .make-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}
.popup-overlay .popup-canvas .popup-header .loading {
    font-size: 0.9rem;
    z-index: 9999;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    color: #888888;
    display: none;
}
.popup-overlay .popup-canvas .popup-header .loading.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.popup-overlay .popup-canvas .popup-content.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
}
.popup-overlay .popup-canvas .popup-content.user-roles {
    padding: 1rem 1rem 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.popup-overlay .popup-canvas .popup-content .flex-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}

.popup-overlay .popup-header .btn {
    cursor: pointer;
}
.popup-overlay .popup-header .btn input {
    width: 0;
}
.popup-overlay .popup-header .btn span {
    opacity: 0.6;
}
.popup-overlay .popup-header .btn span::before {
    font-family: "Font Awesome 7 Pro";
    content: "\e5c5";
    font-weight: 400;
}
.popup-overlay .popup-header .btn input:checked ~ span {
    opacity: 1;
    color: #7957e9;
}
.popup-overlay .popup-header .btn input:checked ~ span::before {
    font-weight: 600;
}

.popup-overlay .tax-wrapper {
    font-size: 0.9rem;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
}
.popup-overlay .tax-wrapper .table-row {
    border-bottom: 1px solid #e4e4db;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.popup-overlay .tax-wrapper .table-row:last-child {
    border-bottom: none;
}
.popup-overlay .tax-wrapper .table-row .cave {
    padding: 0 1rem;
    height: 34px;
    line-height: 34px;
    color: #999999;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-left: 1px solid #c5c5c5;
}
.popup-overlay .tax-wrapper .table-row.focus .cave {
    color: #666666;
    font-weight: 600;
}
.popup-overlay .tax-wrapper .cave:first-child {
    border-left: none;
}
.popup-overlay .tax-wrapper .cave.amount {
    -ms-flex-preferred-size: 65%;
    flex-basis: 65%;
}
.popup-overlay .tax-wrapper .cave.value {
    -ms-flex-preferred-size: 35%;
    flex-basis: 35%;
}

.popup-overlay .tax-formula {
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 0.5rem;
    font-size: 0.9rem;
}
.popup-overlay .tax-formula .formula-text {
    font-size: 0.95rem;
    font-weight: 500;
}
.popup-overlay .tax-formula .divide-part {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 25%;
}
.popup-overlay .tax-formula .purchase-amount {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0 0.75rem;
    border: none;
    border-bottom: 1px solid #aaaaaa;
}
.popup-overlay .tax-formula .one-hundred {
    display: block;
}

.popup-overlay .bola-tax-prgrpgh {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    text-align: center;
}
.popup-overlay .local-gov-prgrpgh {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
}

.popup-overlay .tax-amount .input-text {
    flex: 1 0 0%;
    width: 100%;
}

.show-page .view-header .buttons {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.show-page .view-header .buttons .label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 1rem;
    padding: 0 0.8rem;
    background-color: #6a4bcf;
    border-radius: 3px;
    cursor: pointer;
}
.show-page .view-header .buttons .label:hover {
    background-color: #553ca6;
}
.show-page .view-header .buttons .label span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
}
.show-page .view-header .buttons .label .arrow-icon {
    color: #ffffff;
    border-left: 1px solid #ffffff82;
    padding-left: 0.5rem;
}

.dropdown-actions {
    position: absolute;
    width: 220px;
    right: 0;
    top: 34px;
    z-index: 9999;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    cursor: auto;
    display: none;
}
.dropdown-actions .action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.35rem 0.7rem;
    color: #666666;
    font-size: 0.93rem;
    text-decoration: none;
    border-bottom: 1px solid #cccccc;
    cursor: pointer;
}
.dropdown-actions .action:last-child {
    border-bottom: none;
}
.dropdown-actions .action .icon {
    width: 1.5rem;
    text-align: left;
}
.dropdown-actions .action:hover {
    color: #6a4bcf;
}

.swal2-container .swal2-popup {
    padding: 0 0 2rem;
}
.swal2-container .swal2-title {
    margin-top: 0.5rem;
    padding: 0.5rem 1.5rem 0;
    font-size: 1rem;
}
.swal2-container.add-bank .swal2-title {
    text-align: left;
}
.swal2-container .swal2-html-container {
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
}
.swal2-container.add-bank .swal2-html-container {
    text-align: left;
}
.swal2-container .swal2-input {
    margin: 0.5rem 1.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
}
.swal2-container .swal2-input:focus,
.swal2-container .swal2-file:focus,
.swal2-container .swal2-textarea:focus {
    background-color: #f0edfa;
    border-color: #c3b7ec;
    -webkit-box-shadow: 0 0 0 1px #c3b7ec;
    box-shadow: 0 0 0 1px #c3b7ec;
}
.swal2-container .swal2-actions {
    width: calc(100% - 2rem);
    margin: 1rem 1rem 0;
}
.swal2-container.add-bank .swal2-actions {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.swal2-container .swal2-validation-message {
    margin: 1rem 0 0;
    padding: 0.625rem 1rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.swal2-container button.swal2-styled {
    padding: 0.5rem 1.1rem;
    min-width: 5rem;
}

.ql-container {
    font-family: inherit;
}
.ql-container.ql-snow {
    background-color: #f6f6f6;
    border: 1px solid #dcdcdc;
    border-radius: 0 0 3px 3px;
    min-height: 4rem;
    max-height: 50vh;
    overflow-y: scroll;
}
.ql-container.ql-snow.highlight {
    border-color: #ff0000;
}
.ql-toolbar.ql-snow {
    padding: 4px 8px;
    border-radius: 3px 3px 0 0;
}


.ql-snow.ql-toolbar button:hover, 
.ql-snow .ql-toolbar button:hover, 
.ql-snow.ql-toolbar button:focus, 
.ql-snow .ql-toolbar button:focus, 
.ql-snow.ql-toolbar button.ql-active, 
.ql-snow .ql-toolbar button.ql-active, 
.ql-snow.ql-toolbar .ql-picker-label:hover, 
.ql-snow .ql-toolbar .ql-picker-label:hover, 
.ql-snow.ql-toolbar .ql-picker-label.ql-active, 
.ql-snow .ql-toolbar .ql-picker-label.ql-active, 
.ql-snow.ql-toolbar .ql-picker-item:hover, 
.ql-snow .ql-toolbar .ql-picker-item:hover, 
.ql-snow.ql-toolbar .ql-picker-item.ql-selected, 
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #6a4bcf;
}

.ql-snow.ql-toolbar button:hover .ql-stroke, 
.ql-snow .ql-toolbar button:hover .ql-stroke, 
.ql-snow.ql-toolbar button:focus .ql-stroke, 
.ql-snow .ql-toolbar button:focus .ql-stroke, 
.ql-snow.ql-toolbar button.ql-active .ql-stroke, 
.ql-snow .ql-toolbar button.ql-active .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 
.ql-snow.ql-toolbar button:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar button:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar button:focus .ql-stroke-miter, 
.ql-snow .ql-toolbar button:focus .ql-stroke-miter, 
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, 
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    color: #6a4bcf;
}

.ql-snow.ql-toolbar button:hover .ql-stroke, 
.ql-snow .ql-toolbar button:hover .ql-stroke, 
.ql-snow.ql-toolbar button:focus .ql-stroke, 
.ql-snow .ql-toolbar button:focus .ql-stroke, 
.ql-snow.ql-toolbar button.ql-active .ql-stroke, 
.ql-snow .ql-toolbar button.ql-active .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, 
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, 
.ql-snow.ql-toolbar button:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar button:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar button:focus .ql-stroke-miter, 
.ql-snow .ql-toolbar button:focus .ql-stroke-miter, 
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, 
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, 
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, 
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    color: #6a4bcf;
}