@import url('./variables.css');

body {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-family: var(--main-font, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.5 !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    /* For Text Break */
    /* word-break: break-all; */
    /* word-break: break-word;
    white-space: normal; */
}
html[data-bs-theme=dark] {
    body {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
:focus,
:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.heading {
    color: rgba(var(--title-color, 23, 23, 23), 1);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5em;
}
html[data-bs-theme=dark] {
    .heading {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.subheading {
    color: rgba(var(--title-color, 23, 23, 23), 1);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5em;
}
html[data-bs-theme=dark] {
    .subheading {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.heading-text {
    font-weight: 600;
    color: rgba(var(--title-color, 23, 23, 23), 1);
    line-height: 1.5em;
}
html[data-bs-theme=dark] {
    .heading-text {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.title {
    color: rgba(var(--title-color, 23, 23, 23), 1);
    font-size: 24px;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
}
html[data-bs-theme=dark] {
    .title {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.sub_title {
    color: rgba(var(--title-color, 23, 23, 23), 1);
    font-size: 20px;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
}
html[data-bs-theme=dark] {
    .sub_title {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.note {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-size: 12px;
}
html[data-bs-theme=dark] {
    .note {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}

/*--------------- Links ---------------*/
.link {
    font-weight: 600;
    color: rgba(var(--link-color, 23, 23, 23), 1);
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
}
html[data-bs-theme=dark] {
    .link {
        color: rgba(var(--link-color, 245, 245, 245), 1);
    }
}
.link:hover,
.link.underline {
    border-bottom: 1px solid rgba(var(--linkborder-color, 23, 23, 23), 1);
}
html[data-bs-theme=dark] {
    .link:hover,
    .link.underline {
        border-bottom: 1px solid rgba(var(--linkborder-color, 245, 245, 245), 1);
    }
}
/*--------------- Links ---------------*/


/*--------------- Buttons ---------------*/
.btn {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.5px;
    height: 48px;
    padding: 8px 12px;
    min-width: 48px;
    border-radius: 12px;
    text-transform: capitalize;
}

.btn.btn-primary {
    background: rgba(var(--primary-button, 78, 202, 194), 1);
    color: rgba(var(--primary-button-text, 255, 255, 255), 1);
    border-color: rgba(var(--primary-button-border, 78, 202, 194), 1);
}
.btn.btn-primary:focus-visible,
.btn.btn-primary:active,
.btn.btn-primary:hover {
    background: rgba(var(--primary-button-hover, 212, 212, 212), 1);
    color: rgba(var(--primary-button-text-hover, 255, 255, 255), 1);
    border-color: rgba(var(--primary-button-border-hover, 212, 212, 212), 1);
}
html[data-bs-theme=dark] {
    /* Set once button are different then primary and secoundry color */
    .btn.btn-primary {
        background: rgba(var(--primary-button, 78, 202, 194), 1);
        color: rgba(var(--primary-button-text, 255, 255, 255), 1);
        border-color: rgba(var(--primary-button-border, 78, 202, 194), 1);
    }
    .btn.btn-primary:focus-visible,
    .btn.btn-primary:active,
    .btn.btn-primary:hover {
        background: rgba(var(--primary-button-hover, 64, 64, 64), 1);
        color: rgba(var(--primary-button-text-hover, 255, 255, 255), 1);
        border-color: rgba(var(--primary-button-border-hover, 64, 64, 64), 1);
    }
}

.btn.btn-outline-primary {
    background: rgba(var(--primary-button-outline, 255, 255, 255), 1);
    color: rgba(var(--primary-button-outline-text, 82, 82, 82), 1);
    border-color: rgba(var(--primary-button-outline-border, 212, 212, 212), 1);
}
.btn.btn-outline-primary:focus-visible,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:hover {
    background: rgba(var(--primary-button-outline-hover, 255, 255, 255), 1);
    color: rgba(var(--primary-button-outline-text-hover, 78, 202, 194), 1);
    border-color: rgba(var(--primary-button-outline-border-hover, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    /* Set once button are different then primary and secoundry color */
    .btn.btn-outline-primary {
        background: rgba(var(--primary-button-outline, 38, 38, 38), 1);
        color: rgba(var(--primary-button-outline-text, 245, 245, 245), 1);
        border-color: rgba(var(--primary-button-outline-border, 64, 64, 64), 1);
    }
    .btn.btn-outline-primary:focus-visible,
    .btn.btn-outline-primary:active,
    .btn.btn-outline-primary:hover {
        background: rgba(var(--primary-button-outline-hover, 38, 38, 38), 1);
        color: rgba(var(--primary-button-outline-text-hover, 245, 245, 245), 1);
        border-color: rgba(var(--primary-button-outline-border-hover, 78, 202, 194), 1);
    }
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-icon .icon {
    max-width: 25px;
    aspect-ratio: 1/1;
}
.btn-icon i {
    color: inherit;
}
/*--------------- Buttons ---------------*/


/*--------------- Layouts Buttons (Grid - list) ---------------*/
.layout_buttons {
    background: rgba(var(--white-color, 255, 255, 255), 1);
    padding: 4px;
    
    border-radius: 12px;
    display: flex;
    gap: 8px;
}
html[data-bs-theme=dark] {
    .layout_buttons {
        background: rgba(var(--white-color, 255, 255, 255), 1);
    }
}
.layout_buttons button {
    border: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
}
.layout_buttons button.active {
    background: rgba(var(--primary-color, 78, 202, 194), 0.1);
    box-shadow: 0 1px 3px 0 rgba(var(--primary-color, 78, 202, 194), 0.1),
    0 1px 2px -1px rgba(var(--primary-color, 78, 202, 194), 0.1) !important;
}
.layout_buttons button.active i {
    color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    /* Set once button are different then primary and secoundry color */
    .layout_buttons button.active {
        background: rgba(var(--primary-color, 78, 202, 194), 0.1);
        box-shadow: 0 1px 3px 0 rgba(var(--primary-color, 78, 202, 194), 0.1),
        0 1px 2px -1px rgba(var(--primary-color, 78, 202, 194), 0.1) !important;
    }
    .layout_buttons button.active i {
        color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
/*--------------- Layouts Buttons (Grid - list) ---------------*/


/*--------------- Dropdown Menu ---------------*/
.dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    border-radius: 12px;
    padding: 2px 8px;
    height: 48px;
    background: transparent;
}
html[data-bs-theme=dark] {
    .dropdown button {
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.dropdown-menu {
    border-radius: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(var(--border-color, 229, 229, 229), 1);
    background-color: rgba(var(--dropdown-background-color, 255, 255, 255), 1);
    padding: 12px;
    box-shadow: 0px 48px 64px -16px rgba(var(--dropdown-box-shadow, 0, 0, 0), 0.25);
    outline-style: none;
    min-width: max-content;
}
html[data-bs-theme=dark] {
    .dropdown-menu {
        border-color: rgba(var(--border-color, 64, 64, 64), 1);
        background-color: rgba(var(--dropdown-background-color, 38, 38, 38), 1);
        box-shadow: 0px 48px 64px -16px rgba(var(--dropdown-box-shadow, 0, 0, 0), 0.25);
    }
}
.dropdown-menu .dropdown-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    column-gap: 8px;
    border-radius: 8px;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    height: 42px;
    padding: 4px 12px;
}
html[data-bs-theme=dark] {
    .dropdown-menu .dropdown-item {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.dropdown-menu .dropdown-item i {
    font-size: 20px !important;
}
.dropdown-menu .dropdown-item.active {
    background: transparent;
}
.dropdown-menu .dropdown-item:hover {
    background: rgba(var(--background-color, 251, 251, 251), 1);
    color: rgba(var(--title-color, 23, 23, 23), 1);
}
html[data-bs-theme=dark] {
    .dropdown-menu .dropdown-item:hover {
        background: rgba(var(--background-color, 10, 10, 10), 1);
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}

.dropdown button .arrow_updown {
    padding-left: 4px !important;
}
.dropdown button .arrow_updown i {
    transform: rotate(0deg);
    font-size: 20px !important;
}
.dropdown button.show .arrow_updown i {
    transform: rotate(180deg);
}

.notifaction-dropdown {
    max-width: 350px;
    min-width: 350px;
}
.notifaction-dropdown .notifaction_box {
    max-height: 250px;
    overflow-y: auto;
}
.notifaction-dropdown .dropdown-item {
    align-items: start;
    min-height: 42px;
    height: auto;
}
.notifaction-dropdown .dropdown-item:not(:last-child) {
    margin: 0 0 4px;
}
.notifaction-dropdown .dropdown-item .message {
    word-break: break-word;
    white-space: normal;
    font-weight: 400;
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notifaction-dropdown .dropdown-item .time {
    font-weight: 400;
    font-size: 12px;
    padding: 4px 0 0;
    text-align: end;
}
.notifaction-dropdown .day_chnage p {
    font-weight: 400;
    font-size: 12px;
}
/*--------------- Dropdown Menu ---------------*/


/*--------------- Icons ---------------*/
.fi {
    font-size: 20px;
    line-height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--icons-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .fi {
        color: rgba(var(--icons-color, 163, 163, 163), 1);
    }
}
/*--------------- Icons ---------------*/


/*--------------- Form Control ---------------*/
.form-label {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-weight: 600;
    align-items: center;
    display: flex;
    text-transform: capitalize;
}
html[data-bs-theme=dark] {
    .form-label {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.form-note {
    font-size: 12px;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    margin: 4px 0 0;
}
html[data-bs-theme=dark] {
    .form-note {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.form-label .star {
    color: rgba(var(--fieldrequiredstars-color, 255, 106, 85), 1);
    padding-left: 4px;
}
html[data-bs-theme=dark] {
    .form-label .star {
        color: rgba(var(--fieldrequiredstars-color, 255, 106, 85), 1);
    }
}
.form-control {
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1);
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0.75rem !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
html[data-bs-theme=dark] {
    .form-control {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1);
    }
}
/* body .form-control {
    -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-bgcolor, 251, 251, 251), 1) inset !important;
    box-shadow: 0 0 0px 1000px rgba(var(--formfield-bgcolor, 251, 251, 251), 1) inset !important;
    -webkit-text-fill-color: rgba(var(--bodyfont-color, 115, 115, 115), 1) !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
html[data-bs-theme=dark] {
    body .form-control {
        -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-bgcolor, 64, 64, 64), 1) inset !important;
        box-shadow: 0 0 0px 1000px rgba(var(--formfield-bgcolor, 64, 64, 64), 1) inset !important;
        -webkit-text-fill-color: rgba(var(--bodyfont-color, 163, 163, 163), 1) !important;
    }
} */
.form-control::placeholder {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 0.5); 
}
html[data-bs-theme=dark] {
    .form-control::placeholder {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 0.5);
    }
}
textarea.form-control {
    height: auto;
}
.form-control:disabled,
.form-control:focus {
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1);
}
html[data-bs-theme=dark] {
    .form-control:disabled,
    .form-control:focus {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1);
    }
}
.form-control.error {
    background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
    -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
    box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
    -webkit-text-fill-color: rgba(var(--bodyfont-color, 115, 115, 115), 1) !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
html[data-bs-theme=dark] {
    .form-control.error {
        background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
        -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
        box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
        -webkit-text-fill-color: rgba(var(--bodyfont-color, 163, 163, 163), 1) !important;
    }
}
.error_msg {
    color: rgba(var(--formfield-errormsg-color, 220, 53, 69), 1);
}
html[data-bs-theme=dark] {
    .error_msg {
        color: rgba(var(--formfield-errormsg-color, 220, 53, 69), 1);
    }
}
.password_field {
    position: relative;
}
.password_field .password_input {
    padding-right: 40px;
}
.password_field .icons {
    position: absolute;
    top: calc(50% - 10px);
    right: 8px;
}

.field_box {
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border: 1px solid rgba(var(--formfield-bordercolor, 245, 245, 245), 1);
}
html[data-bs-theme=dark] {
    .field_box {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border: 1px solid rgba(var(--formfield-bordercolor, 82, 82, 82), 1);
    }
}

.input-group {
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1);
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0.75rem !important;

    padding: .5rem 1rem;
    
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
html[data-bs-theme=dark] {
    .input-group {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1);
    }
}
.input-group-button {
    padding: .5rem 0 .5rem 1rem;
}
.input-group .form-control {
    background: transparent !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height: 46px;
}
.input-group.error {
    background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
html[data-bs-theme=dark] {
    .input-group.error {
        background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
    }
}
/* body .input-group.error .form-control {
    -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
    box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
    -webkit-text-fill-color: rgba(var(--bodyfont-color, 115, 115, 115), 1) !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
html[data-bs-theme=dark] {
    body .input-group.error .form-control {
        -webkit-box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
        box-shadow: 0 0 0px 1000px rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1) inset !important;
        -webkit-text-fill-color: rgba(var(--bodyfont-color, 163, 163, 163), 1) !important;
    }
} */
.input-group span {
    min-width: 19px;
    max-width: fit-content;
}
.input-group input {
    border: none;
    padding: .5rem;
}

.form-control-search {
    padding-right: 40px;
    background-image: url('../icons/field-search.png');
    background-size: 20px;
    background-position: center right 10px;
    background-repeat: no-repeat;
}
html[data-bs-theme=dark] {
    .form-control-search {
        background-image: url('../icons/w-field-search.png');
    }
}

.color_picker {
    max-width: 48px;
    padding: 0;
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1) !important;
    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;
    background: none;
}
html[data-bs-theme=dark] {
    .color_picker {
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1) !important;
    }
}
.color_picker[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color_picker[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0; /* optional */
}
.color_picker[type="color"] {
    border: none;
}

.form-control-imgupload {
    display: flex;
    align-items: center;
    gap: 16px;
}
.form-control-imgupload .imgupload_input {
    width: 1px;
}
.form-control-imgupload .fci_imgupload label {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--border-color, 229, 229, 229), 1);
    cursor: pointer;
    
    background-image: url("../icons/upload.png");
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload label {
        border: 1px dashed rgba(var(--border-color, 64, 64, 64), 1);
    }
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload label {       
        background-image: url("../icons/w-upload.png");
    }
}
.form-control-imgupload .fci_imgupload .uploaded_img {
    width: 100%;
    height: 100%;
    max-width: 78px;
    max-height: 78px;
    object-fit: contain;
    border-radius: 12px;
    background-color: white;
    top: 1px;
    left: 1px;
}
.form-control-imgupload .fci_imgupload button {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload button {
        background: rgba(var(--formfield-error-bgcolor, 252, 218, 212), 1);
    }
}
.form-control-imgupload .fci_imgupload button i {
    color: rgba(var(--white-color, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload button i {
        color: rgba(var(--white-color, 255, 255, 255), 1);
    }
}
.form-control-imgupload .fci_imgupload .download_button,
.form-control-imgupload .fci_imgupload .view_button {
    position: absolute;
    top: calc(50% - 16px);
    right: calc(50% - 16px);
    background: rgba(var(--accent-color, 255, 255, 255), 1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload .download_button,
    .form-control-imgupload .fci_imgupload .view_button {
        background: rgba(var(--accent-color, 38, 38, 38), 1);
    }
}
.form-control-imgupload .fci_imgupload .download_button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.form-control-imgupload .fci_imgupload .download_button i,
.form-control-imgupload .fci_imgupload .view_button i {
    color: rgba(var(--icons-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .form-control-imgupload .fci_imgupload .download_button i,
    .form-control-imgupload .fci_imgupload .view_button i {
        color: rgba(var(--icons-color, 163, 163, 163), 1);
    }
}

.form-switch .form-check-input {
    height: 24px;
    width: 40px;
}
.form-switch .form-check-input:checked {
    background-color: rgba(var(--primary-color, 78, 202, 194), 1);
    border-color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    .form-switch .form-check-input:checked {
        background-color: rgba(var(--primary-color, 78, 202, 194), 1);
        border-color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}

.form-check-box label {
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    /* background: rgba(var(--white-color, 255, 255, 255), 1); */
    background: transparent;
    border-radius: 12px;
    padding: 8px;
}
html[data-bs-theme=dark] {
    .form-check-box label {
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.form-check-box label:has(input:checked) {
    border-color: rgba(var(--primary-color, 78, 202, 194), 1);
    background: rgba(var(--primary-color, 78, 202, 194), 0.1);
}
html[data-bs-theme=dark] {
    .form-check-box label:has(input:checked) {
        border-color: rgba(var(--primary-color, 78, 202, 194), 1);
        background: rgba(var(--primary-color, 78, 202, 194), 0.1);
    }
}

/*------ choicesselect ------*/
.choices__inner {
    color: var(--bs-body-color) !important;
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1) !important;
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1) !important;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center;

    padding: .375rem .75rem !important;
}
html[data-bs-theme=dark] {
    .choices__inner {
        color: var(--bs-body-color) !important;
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1) !important;
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1) !important;
    }
}
.choices__inner .choices__list--single {
    padding: 0 !important;
}
.is-open .choices__list[aria-expanded] {
    border-radius: 16px;
    border:1px solid rgba(var(--border-color, 229, 229, 229), 1) !important;
    background-color: rgba(var(--white-color, 255, 255, 255), 1) !important;
    padding: 12px;
    box-shadow: 0px 48px 64px -16px rgba(var(--black-color, 0, 0, 0), 0.25);
    outline-style: none;
    min-width: max-content;
}
html[data-bs-theme=dark] {
    .is-open .choices__list[aria-expanded] {
        border:1px solid rgba(var(--border-color, 64, 64, 64), 1) !important;
        background-color: rgba(var(--white-color, 255, 255, 255), 1) !important;
        box-shadow: 0px 48px 64px -16px rgba(var(--black-color, 0, 0, 0), 0.25);
    }
}
.choices[data-type*=select-one] .choices__input {
    border-radius: 0.75rem !important;
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1) !important;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 1rem;
    padding-right: 40px;
    background-image: url('../icons/field-search.png');
    background-size: 20px;
    background-position: center right 10px;
    background-repeat: no-repeat;
    margin-bottom: 10px !important;
}
html[data-bs-theme=dark] {
    .choices[data-type*=select-one] .choices__input {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1) !important;
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1) !important;
    }
}
html[data-bs-theme=dark] {
    .choices[data-type*=select-one] .choices__input {
        background-image: url('../icons/w-field-search.png');
    }
}
.choices__list--single .choices__item {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: calc(100% - 20px) !important;
}
.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item {
    border-radius: 8px;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, 
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(var(--background-color, 251, 251, 251), 1) !important;
    color: rgba(var(--title-color, 23, 23, 23), 1) !important;
}
html[data-bs-theme=dark] {
    .choices__list--dropdown .choices__item--selectable.is-highlighted, 
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background: rgba(var(--background-color, 10, 10, 10), 1) !important;
        color: rgba(var(--title-color, 245, 245, 245), 1) !important;
    }
}
.choices__list--dropdown .has-no-results {
    font-style:italic;
}
.choices[data-type*=select-one]::after {
    border:none !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding: 0;
    width: 16px !important;
    height: 12px !important;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    top: calc(50% - 6px) !important;
    margin: 0 !important;
}
html[data-bs-theme=dark] {
    /* Check */
    .choices[data-type*=select-one]::after {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}
.choices[data-type*=select-one].is-open::after {
    transform: rotate(180deg);
}

/*------ Select 2 ------*/
.selecttwo + .select2 {
    width: 100% !important;
}
.selecttwo + .select2 .select2-selection {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1) !important;
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1) !important;
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1) !important;
    border-radius: 0.75rem !important;
    height: 48px;
    display: flex !important;
    align-items: center;
    padding: .375rem .75rem !important;
}
html[data-bs-theme=dark] {
    .selecttwo + .select2 .select2-selection {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1) !important;
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1) !important;
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1) !important;
    }
}
.selecttwo + .select2 .select2-selection .select2-selection__rendered {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1) !important;
}
html[data-bs-theme=dark] {
    .selecttwo + .select2 .select2-selection .select2-selection__rendered {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1) !important;
    }
}
.selecttwo + .select2 .select2-selection .select2-selection__rendered {
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    
    width: calc(100% - 20px) !important;
}
.selecttwo + .select2 .select2-selection .select2-selection__arrow {
    position: absolute;
    right: 12px;
    
    border: none !important;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    padding: 0;
    width: 16px !important;
    height: 12px !important;
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    top: calc(50% - 6px) !important;
    margin: 0 !important;
}
html[data-bs-theme=dark] {
    .selecttwo + .select2 .select2-selection .select2-selection__arrow {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}
.selecttwo + .select2.select2-container--open .select2-selection .select2-selection__arrow {
    transform: rotate(180deg);
}
.selecttwo + .select2 .select2-selection .select2-selection__arrow b {
    display: none;
}

.select2-dropdown {
    min-width: fit-content;
    
    border-radius: 16px !important;
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1) !important;
    background-color: rgba(var(--white-color, 255, 255, 255), 1) !important;
    padding: 12px;
    box-shadow: 0px 48px 64px -16px rgba(var(--black-color, 0, 0, 0), 0.25);
    outline-style: none;
    min-width: max-content;
}
html[data-bs-theme=dark] {
    .select2-dropdown {
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1) !important;
        background-color: rgba(var(--white-color, 255, 255, 255), 1) !important;
        box-shadow: 0px 48px 64px -16px rgba(var(--black-color, 0, 0, 0), 0.25);
    }
}
.select2-dropdown .select2-search--dropdown {
    padding: 0 !important;
}
.select2-dropdown .select2-search--dropdown .select2-search__field {
    border-radius: 0.75rem !important;
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1) !important;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 1rem;
    padding-right: 40px;
    background-image: url('../icons/field-search.png');
    background-size: 20px;
    background-position: center right 10px;
    background-repeat: no-repeat;
    margin-bottom: 10px !important;
}
html[data-bs-theme=dark] {
    .select2-dropdown .select2-search--dropdown .select2-search__field {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1) !important;
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1) !important;
    }
}
html[data-bs-theme=dark] {
    .select2-dropdown .select2-search--dropdown .select2-search__field {
        background-image: url('../icons/w-field-search.png');
    }
}
.select2-dropdown .select2-results li {
    padding: 10px;
    border-radius: 8px;
}
.select2-dropdown .select2-results li:hover,
.select2-dropdown .select2-results li.select2-results__option--selected,
.select2-dropdown .select2-results li.select2-results__option--highlighted {
    background: rgba(var(--background-color, 251, 251, 251), 1) !important;
    color: rgba(var(--title-color, 23, 23, 23), 1) !important;
}
html[data-bs-theme=dark] {
    .select2-dropdown .select2-results li:hover,
    .select2-dropdown .select2-results li.select2-results__option--selected,
    .select2-dropdown .select2-results li.select2-results__option--highlighted {
        background: rgba(var(--background-color, 10, 10, 10), 1) !important;
        color: rgba(var(--title-color, 245, 245, 245), 1) !important;
    }
}

.select2-dropdown .select2-results li.select2-results__message {
    font-style: italic;
}

/*------ Form Control-RTL ------*/
html[dir="rtl"] {
    .form-label .star {
        padding-left: 0px;
        padding-right: 4px;
    }
    .password_field .password_input {
        padding-right: 16px;
        padding-left: 40px;
    }   
    .password_field .icons {
        right: unset;
        left: 8px;
    }
}
/*--------------- Form Control ---------------*/


/*--------------- Border Radius ---------------*/
.border-radius-12 {
    border-radius: 12px;
}
/*--------------- Border Radius ---------------*/


/*--------------- Avatar ---------------*/
.avatar {
    width: 32px;
    height: 32px;
}
.avatar-md {
    width: 40px;
    height: 40px;
}
.avatar-lg {
    width: 80px;
    height: 80px;
}
/*--------------- Avatar ---------------*/


/*--------------- Scroll Bar ---------------*/
/* width */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: rgba(var(--primary-color, 78, 202, 194), 0.1);
    border-radius: 10px;
}
html[data-bs-theme=dark] {
    ::-webkit-scrollbar {
        background: rgba(var(--primary-color, 78, 202, 194), 0.1);
    }
}
/* Track */
/* ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 100px #7246d1; 
  border-radius: 0px;
} */
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-color, 78, 202, 194), 1);
    border-radius: 10px;
}
html[data-bs-theme=dark] {
    ::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--black-color, 0, 0, 0), 1);
} */
/*--------------- Scroll Bar ---------------*/


/*--------------- Loader ---------------*/
.loade-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(var(--white-color, 255, 255, 255), 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-bs-theme=dark] {
    .loade-container {
        background: rgba(var(--black-color, 0, 0, 0), 0.85);
    }
}
.loade-container img {
    width: 100%;
    max-width: 70px;
    max-height: 70px;
}
/*--------------- Loader ---------------*/


/*--------------- Badge ---------------*/
.badge {
    padding: 6px 10px;
    margin: 0;
    color: rgba(var(--black-color, 0, 0, 0), 1);
    border-radius: 100px;
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    background-color: rgba(var(--white-color, 255, 255, 255), 1);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
html[data-bs-theme=dark] {
    .badge {
        color: rgba(var(--black-color, 0, 0, 0), 1);
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
        background-color: rgba(var(--white-color, 255, 255, 255), 1);
    }
}
.badge.success {
    background: rgba(var(--toast-success-background, 235, 247, 238), 1);
    border-color: rgba(var(--toast-success-border, 212, 221, 216), 1);
}
html[data-bs-theme=dark] {
    .badge.success {
        background: rgba(var(--toast-success-background, 235, 247, 238), 1);
        border-color: rgba(var(--toast-success-border, 212, 221, 216), 1);
    }
}
.badge.error {
    background: rgba(var(--toast-error-background, 250, 237, 233), 1);
    border-color: rgba(var(--toast-error-border, 243, 226, 218), 1);
}
html[data-bs-theme=dark] {
    .badge.error {
        background: rgba(var(--toast-error-background, 250, 237, 233), 1);
        border-color: rgba(var(--toast-error-border, 243, 226, 218), 1);
    }
}
.badge.info {
    border: 1px solid rgba(var(--toast-info-border, 202, 214, 223), 1);
    background-color: rgba(var(--toast-info-background, 232, 238, 250), 1);
}
html[data-bs-theme=dark] {
    .badge.info {
        border: 1px solid rgba(var(--toast-info-border, 202, 214, 223), 1);
        background-color: rgba(var(--toast-info-background, 232, 238, 250), 1);
    }
}
.badge.warning {
    border: 1px solid rgba(var(--toast-warning-border, 226, 218, 203), 1);
    background-color: rgba(var(--toast-warning-background, 253, 247, 234), 1);
}
html[data-bs-theme=dark] {
    .badge.warning {
        border: 1px solid rgba(var(--toast-warning-border, 226, 218, 203), 1);
        background-color: rgba(var(--toast-warning-background, 253, 247, 234), 1);
    }
}
/*--------------- Badge ---------------*/


/*--------------- Background ---------------*/
.bg-color {
    background-color: rgba(var(--background-color, 251, 251, 251), 1);
}
html[data-bs-theme=dark] {
    .bg-color {
        background-color: rgba(var(--background-color, 10, 10, 10), 1);
    }
}
/*--------------- Background ---------------*/


/*--------------- Toast ---------------*/
.toast_container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.toast_notifaction {
    border-width: 1px;
    border-style: solid;
    padding: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 300px;
    max-width: fit-content;
    gap: 16px;
}
.toast_notifaction .toast_body {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast_notifaction .toast_close {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50px;
    /* border-width: 1px;
    border-style: solid;
    border-color: #707b78; */
    border:none;
    background: transparent;
}
.toast_notifaction .toast_close i {
    color: rgba(var(--icons-color, 115, 115, 115), 1);
    font-size: 18px;
    line-height: 18px;
}
html[data-bs-theme=dark] {
    .toast_notifaction .toast_close i {
        color: rgba(var(--icons-color, 163, 163, 163), 1);
    }
}
.toast_notifaction .toast_body .toast_text {
    /* color: rgba(var(--black-color, 0, 0, 0), 1); */
    /* Chnage Toast text color black to body color temporary */
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-size: 16px;
}
html[data-bs-theme=dark] {
    .toast_notifaction .toast_body .toast_text {
        /* color: rgba(var(--black-color, 0, 0, 0), 1); */
        /* Chnage Toast text color black to body color temporary */
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.toast_notifaction .icon {
    border-radius: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast_notifaction .icon i {
    font-size: 16px;
}
.toast_notifaction.success {
    background: rgba(var(--toast-success-background, 235, 247, 238), 1);
    border-color: rgba(var(--toast-success-border, 212, 221, 216), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.success {
        background: rgba(var(--toast-success-background, 235, 247, 238), 1);
        border-color: rgba(var(--toast-success-border, 212, 221, 216), 1);
    }
}
.toast_notifaction.success .icon {
    background: rgba(var(--toast-success-icon-background, 84, 173, 84), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.success .icon {
        background: rgba(var(--toast-success-icon-background, 84, 173, 84), 1);
    }
}
.toast_notifaction.success .icon i {
    color: rgba(var(--toast-success-icon, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.success .icon i {
        color: rgba(var(--toast-success-icon, 255, 255, 255), 1);
    }
}
.toast_notifaction.error {
    background: rgba(var(--toast-error-background, 250, 237, 233), 1);
    border-color: rgba(var(--toast-error-border, 243, 226, 218), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.error {
        background: rgba(var(--toast-error-background, 250, 237, 233), 1);
        border-color: rgba(var(--toast-error-border, 243, 226, 218), 1);
    }
}
.toast_notifaction.error .icon {
    background: rgba(var(--toast-error-icon-background, 224, 78, 47), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.error .icon {
        background: rgba(var(--toast-error-icon-background, 224, 78, 47), 1);
    }
}
.toast_notifaction.error .icon i {
    color: rgba(var(--toast-error-icon, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .toast_notifaction.error .icon i {
        color: rgba(var(--toast-error-icon, 255, 255, 255), 1);
    }
}

/*------ Animation ------*/
.toast_container .toast_notifaction {
    position: relative;
    overflow: hidden;
}
.toast_container .toast_notifaction:before{
    content: "";
    position: absolute;
    display: block;
    height: 3px;
    left: 0;
    bottom: 0;
    transition: all 2.5s ease-in-out;
    background-color: transparent;
    z-index: 1;
    width: 100%;
}
.toast_container .toast_notifaction.show::before {
    transition: opacity 10ms,height 2.5s ease-out,width 2.5s ease-out;
    width: 0;
}
.toast_container .toast_notifaction.success.show::before {
    background-color: rgba(var(--toast-success-icon-background, 84, 173, 84), 1);
}
html[data-bs-theme=dark] {
    .toast_container .toast_notifaction.success.show::before {
        background-color: rgba(var(--toast-success-icon-background, 84, 173, 84), 1);
    }
}
.toast_container .toast_notifaction.error.show::before {
    background-color: rgba(var(--toast-error-icon-background, 224, 78, 47), 1);
}
html[data-bs-theme=dark] {
    .toast_container .toast_notifaction.error.show::before {
        background-color: rgba(var(--toast-error-icon-background, 224, 78, 47), 1);
    }
}
/*--------------- Toast ---------------*/


/*--------------- Card ---------------*/
.card {
    border-radius: 1rem;
    background-color: rgba(var(--card-background-color, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .card {
        background-color: rgba(var(--card-background-color, 38, 38, 38), 1);
    }
}
.card-border {
    border-style: solid;
    border-width: 1px;
    border-color: rgba(var(--card-border-color, 229, 229, 229), 1);
}
html[data-bs-theme=dark] {
    .card-border {
        border-color: rgba(var(--card-border-color, 64, 64, 64), 1);
    }
}
.card-body {
    padding: 20px;
}
/*--------------- Card ---------------*/


/*--------------- Table ---------------*/
.st_with_filter {
    position: relative;
}
.st_with_filter .filter_box {
    max-width: calc(100% - 55%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: end;
    gap: 8px;
    flex-wrap: wrap;
    max-height: 48px;
    overflow: hidden;
}
.st_with_filter .filter_box .field {
    min-width: fit-content;
    max-width: fit-content;
}

.shorting_table * {
    text-align: center !important;
}
.shorting_table .gridjs-head {
    margin: 0 0 16px;
    padding: 0 0;
    /* just hide */
    /* display: none; */
}
.shorting_table .gridjs-container {
    padding: 0;
}
.shorting_table .gridjs-footer,
.shorting_table .gridjs-wrapper {
    border: none;
    box-shadow: none;
}
.shorting_table .gridjs-wrapper {
    border: 1px solid rgba(var(--table-border-color, 229, 229, 229), 1);
    border-radius: 8px;
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-wrapper {
        border: 1px solid rgba(var(--table-border-color, 64, 64, 64), 1);
    }
}
.shorting_table .gridjs-footer {
    box-shadow: none;
}
.shorting_table .gridjs-footer {
    padding: 16px 0 0;
}
.shorting_table .gridjs-footer .gridjs-pagination .gridjs-summary {
    color: rgba(var(--title-color, 23, 23, 23), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-footer .gridjs-pagination .gridjs-summary {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button {
    padding: 8px 16px;
    background-color: rgba(var(--primary-button-outline, 255, 255, 255), 1);
    border-color: rgba(var(--border-color, 229, 229, 229), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button {
        background-color: rgba(var(--primary-button-outline, 38, 38, 38), 1);
        border-color: rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button[disabled] {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button[disabled] {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: rgba(var(--primary-color, 78, 202, 194), 1);
    color: rgba(var(--white-color, 255, 255, 255), 1);
    border-color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-footer .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
        background: rgba(var(--primary-color, 78, 202, 194), 1);
        color: rgba(var(--white-color, 255, 255, 255), 1);
        border-color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
.shorting_table .gridjs-search {
    position: relative;
    width: 100%;
    max-width: fit-content;
}
.shorting_table .gridjs-search.gj_search_full {
    max-width: 40%;
}
.shorting_table .gridjs-search:after {
    content: '';
    width: 46px;
    height: 46px;
    position: absolute;
    top: 1px;
    right: 1px;
    background-color: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    background-image: url('../icons/field-search.png');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    cursor: pointer;
    border-radius: 0.75rem;
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-search:after {
        background-color: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
    }
}
.shorting_table .gridjs-search.gj_search_full:after {
    background-image: url('../icons/cross-small.png');
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-search:after {
        background-image: url('../icons/w-field-search.png');
    }
    .shorting_table .gridjs-search.gj_search_full:after {
        background-image: url('../icons/w-cross-small.png');
    }
}
.shorting_table .gridjs-search .gridjs-search-input {
    /* width: 100%; */
    border-radius: 0.75rem;
    background: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border-color: rgba(var(--formfield-bordercolor, 245, 245, 245), 1);
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 1rem;
    padding-right: 46px;
    width: 100%;
    padding-left: 0;
    max-width: 48px;
}
html[data-bs-theme=dark] {
    .shorting_table .gridjs-search .gridjs-search-input {
        background: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border-color: rgba(var(--formfield-bordercolor, 82, 82, 82), 1);
    }
}
.shorting_table .gridjs-search input[type="search"]::-webkit-search-decoration,
.shorting_table .gridjs-search input[type="search"]::-webkit-search-cancel-button,
.shorting_table .gridjs-search input[type="search"]::-webkit-search-results-button,
.shorting_table .gridjs-search input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none; /* Helps ensure all default styling is gone */
    appearance: none;
}
.shorting_table .gridjs-search.gj_search_full .gridjs-search-input {
    padding-left: 1rem;
    max-width: 100%;
}
.shorting_table th.gridjs-th-sort:focus, 
.shorting_table th.gridjs-th-sort:hover {
    background-color: transparent;
}
.shorting_table td.gridjs-td,
.shorting_table th.gridjs-th {
    /* border-left: none;
    border-right: none; */
    border-color: rgba(var(--table-border-color, 229, 229, 229), 1);
}
html[data-bs-theme=dark] {
    .shorting_table td.gridjs-td,
    .shorting_table th.gridjs-th {
        border-color: rgba(var(--table-border-color, 64, 64, 64), 1);
    }
}
html[data-bs-theme=dark] {
    .shorting_table button.gridjs-sort-neutral {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHZpZXdCb3g9IjAgMCA0MDEuOTk4IDQwMS45OTgiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik03My4wOTIgMTY0LjQ1MmgyNTUuODEzYzQuOTQ5IDAgOS4yMzMtMS44MDcgMTIuODQ4LTUuNDI0IDMuNjEzLTMuNjE2IDUuNDI3LTcuODk4IDUuNDI3LTEyLjg0N3MtMS44MTMtOS4yMjktNS40MjctMTIuODVMMjEzLjg0NiA1LjQyNEMyMTAuMjMyIDEuODEyIDIwNS45NTEgMCAyMDAuOTk5IDBzLTkuMjMzIDEuODEyLTEyLjg1IDUuNDI0TDYwLjI0MiAxMzMuMzMxYy0zLjYxNyAzLjYxNy01LjQyNCA3LjkwMS01LjQyNCAxMi44NSAwIDQuOTQ4IDEuODA3IDkuMjMxIDUuNDI0IDEyLjg0NyAzLjYyMSAzLjYxNyA3LjkwMiA1LjQyNCAxMi44NSA1LjQyNHptMjU1LjgxMyA3My4wOTdINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4=");
    }
    .shorting_table button.gridjs-sort-asc {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjEiIHZpZXdCb3g9IjAgMCAyOTIuMzYyIDI5Mi4zNjEiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yODYuOTM1IDE5Ny4yODcgMTU5LjAyOCA2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMgMS44MDctMTIuODUgNS40MjRMNS40MjQgMTk3LjI4N0MxLjgwNyAyMDAuOTA0IDAgMjA1LjE4NiAwIDIxMC4xMzRzMS44MDcgOS4yMzMgNS40MjQgMTIuODQ3YzMuNjIxIDMuNjE3IDcuOTAyIDUuNDI1IDEyLjg1IDUuNDI1aDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwOCAxMi44NDgtNS40MjUgMy42MTMtMy42MTMgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxNC05LjIzLTUuNDI3LTEyLjg0N3oiLz48L3N2Zz4=");
    }
    .shorting_table button.gridjs-sort-desc {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjIiIHZpZXdCb3g9IjAgMCAyOTIuMzYyIDI5Mi4zNjIiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yODYuOTM1IDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIgMC05LjIzMyAxLjgwNy0xMi44NSA1LjQyNEMxLjgwNyA3Mi45OTggMCA3Ny4yNzkgMCA4Mi4yMjhjMCA0Ljk0OCAxLjgwNyA5LjIyOSA1LjQyNCAxMi44NDdsMTI3LjkwNyAxMjcuOTA3YzMuNjIxIDMuNjE3IDcuOTAyIDUuNDI4IDEyLjg1IDUuNDI4czkuMjMzLTEuODExIDEyLjg0Ny01LjQyOEwyODYuOTM1IDk1LjA3NGMzLjYxMy0zLjYxNyA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDcgMC00Ljk0OC0xLjgxNC05LjIyOS01LjQyNy0xMi44NXoiLz48L3N2Zz4=");
    }
}
.shorting_table thead tr th {
    padding: 12px 24px;
    background: transparent;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    /* font-size: 12px; */
    font-size: 14px;
    text-align: left;
    /* line-height: 1.5; */
    line-height: 1.5;
    /* font-weight: 600; */
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* max-width: 200px; */
    
    /* min-width: 150px; */
}
html[data-bs-theme=dark] {
    .shorting_table thead tr th {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.shorting_table thead tr th .gridjs-th-content {
    /*white-space: normal;*/ 
    /* Two line Heading */
}
.shorting_table tbody,
.shorting_table .gridjs-footer,
.shorting_table tbody td {
    background: transparent;
}
.shorting_table tbody tr td {
    padding: 16px 24px;
    
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-size: 14px;
    text-align: left;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .05em;
    
    /* max-width: 200px; */
    /* white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important; */
}
html[data-bs-theme=dark] {
    .shorting_table tbody tr td {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.shorting_table tbody tr td .logo {
    max-width: 40px;
    max-height: 40px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
}
.shorting_table tbody tr td .highlight {
    color: rgba(var(--title-color, 23, 23, 23), 1);
    font-weight: 700;
}
html[data-bs-theme=dark] {
    .shorting_table tbody tr td .highlight {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.shorting_table tbody tr:hover > * {
    background-color: color-mix(in oklab, rgba(var(--black-color, 0, 0, 0), 1) 3%,transparent);
}
html[data-bs-theme=dark] {
    .shorting_table tbody tr:hover > * {
        background-color: color-mix(in oklab, rgba(var(--black-color, 0, 0, 0), 1) 3%,transparent);
    }
}
.shorting_table .actions_icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.shorting_table .actions_icons button {
    padding: 0;
    border: none;
    background: transparent;
}
.shorting_table .actions_icons button.edit {
    color: rgba(var(--table-action-button-edit, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .actions_icons button.edit {
        color: rgba(var(--table-action-button-edit, 163, 163, 163), 1);
    }
}
.shorting_table .actions_icons button.delete {
    color: rgba(var(--table-action-button-delete, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .shorting_table .actions_icons button.delete {
        color: rgba(var(--table-action-button-delete, 163, 163, 163), 1);
    }
}

.shorting_table .actions_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.shorting_table .actions_buttons .btn {
    height: 38px;
    padding: 5px 12px;
    white-space: nowrap;
    min-width: fit-content;
}
.shorting_table .actions_buttons .btn.approve {
    background: rgb(22 163 74);
    border-color: rgb(22 163 74);
}
.shorting_table .actions_buttons .btn.reject {
    background: rgb(234 88 12);
    border-color: rgb(234 88 12);
}
.shorting_table .actions_buttons .btn.cancel {
    background: rgb(219 39 119);
    border-color: rgb(219 39 119);
}
.shorting_table .actions_buttons .btn.goto {
    background: rgb(37 99 235);
    border-color: rgb(37 99 235);
}
.shorting_table .actions_buttons .btn.resend {
    background: rgb(8 145 178);
    border-color: rgb(8 145 178);
}

/*------ Table Tag ------*/
.shorting_table tbody tr td:has(.most_recent) {
    position: relative;
    overflow: hidden;
}
.shorting_table tbody tr td:has(.most_recent)::after {
    content: 'Recent';
    position: absolute;
    top: 10px;
    left: -20px;
    padding: 4px 0;
    width: 80px;
    text-align: center;
    color: rgba(var(--white-color, 255, 255, 255), 1);
    font-size: 10px;
    line-height: 1.2;
    background: rgba(var(--primary-button-border, 78, 202, 194), 1);
    /* transform: rotate(-45deg) translateX(-20%); */
    transform: rotate(-45deg);
}
html[data-bs-theme=dark] {
    .shorting_table tbody tr td:has(.most_recent)::after {
        color: rgba(var(--white-color, 255, 255, 255), 1);
        background: rgba(var(--primary-button-border, 78, 202, 194), 1);
    }
}

/*------ Table Title  ------*/
/* After Two lines..., Word Never Break */
.shorting_table thead th:has(.gridjs-sort) {
    padding: 12px 37px 12px 24px !important;
}
.shorting_table thead th .gridjs-th-content {
    display: block;
    width: 100%;
    position: relative;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-overflow: unset !important;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; 
}
.shorting_table thead th .gridjs-sort {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
/*--------------- Table ---------------*/


/*--------------- Vertical Tab ---------------*/
.vertical_tabs_left {
    display: flex;
}
.vertical_tabs_left .tabs {
    max-width: 280px;
    width: 100%;
}
.vertical_tabs_left .content {
    width: 100%;
    max-width: calc(100% - 280px);
    padding: 8px 0 8px 24px;
}

.vertical_tabs_left .tabs .nav .nav-link {
    padding: 0 12px;
    height: 48px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-weight: 600;
}
html[data-bs-theme=dark] {
    .vertical_tabs_left .tabs .nav .nav-link {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.vertical_tabs_left .tabs .nav .nav-link i {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .vertical_tabs_left .tabs .nav .nav-link i {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.vertical_tabs_left .tabs .nav .nav-link:hover i,
.vertical_tabs_left .tabs .nav .nav-link:hover {
    color: rgba(var(--title-color, 23, 23, 23), 1);
}
html[data-bs-theme=dark] {
    .vertical_tabs_left .tabs .nav .nav-link:hover i,
    .vertical_tabs_left .tabs .nav .nav-link:hover {
        color: rgba(var(--title-color, 245, 245, 245), 1);
    }
}
.vertical_tabs_left .tabs .nav .nav-link:hover,
.vertical_tabs_left .tabs .nav .nav-link.active {
    background: rgba(var(--background-color, 251, 251, 251), 1);
}
html[data-bs-theme=dark] {
    .vertical_tabs_left .tabs .nav .nav-link:hover,
    .vertical_tabs_left .tabs .nav .nav-link.active {
        background: rgba(var(--background-color, 10, 10, 10), 1);
    }
}

.vertical_tabs_left .content .vtl_title {
    margin-bottom: 32px;
}
/*--------------- Vertical Tab ---------------*/


/*--------------- Horizontal Tab ---------------*/
.horizontal_tabs_left .nav-tabs {
    border-bottom: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    gap: 8px;
    padding: 0 0 16px;
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs {
        border-bottom: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.horizontal_tabs_left .nav-tabs .nav-link {
    padding: 11px 20px;
    border: none;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-weight: 700;
    line-height: 1.5;
    border-radius: 12px;
    /* background: rgba(var(--white-color, 255, 255, 255), 1); */
    background-color: rgba(var(--accent-color, 255, 255, 255), 1);
    /* border-bottom: 2px solid transparent; */
    display: flex;
    align-items: center;
    gap: 8px;
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs .nav-link {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
        background-color: rgba(var(--accent-color, 38, 38, 38), 1);
    }
}
.horizontal_tabs_left .nav-tabs .nav-link i {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs .nav-link i {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.horizontal_tabs_left .nav-tabs .nav-link:hover i,
.horizontal_tabs_left .nav-tabs .nav-link:hover {
    color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs .nav-link:hover i,
    .horizontal_tabs_left .nav-tabs .nav-link:hover {
        color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
.horizontal_tabs_left .nav-tabs .nav-link.active {
    color: rgba(var(--white-color, 255, 255, 255), 1);
    background: rgba(var(--primary-color, 78, 202, 194), 1);
    /* border-color: rgba(var(--primary-color, 78, 202, 194), 1); */
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs .nav-link.active {
        color: rgba(var(--white-color, 255, 255, 255), 1);
        background: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
.horizontal_tabs_left .nav-tabs .nav-link.active i {
    color: rgba(var(--white-color, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_left .nav-tabs .nav-link.active i {
        color: rgba(var(--white-color, 255, 255, 255), 1);
    }
}
.horizontal_tabs_left .tab-content {
    padding: 16px 0 0;
}
/*--------------- Horizontal Tab ---------------*/


/*--------------- Horizontal Tab Full ---------------*/
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
}
.horizontal_tabs_full .nav-tabs {
    border-bottom: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    gap: 8px;
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs {
        border-bottom: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.horizontal_tabs_full .nav-tabs .nav-item {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
}
.horizontal_tabs_full .nav-tabs .nav-link {
    padding: 11px 20px;
    border: none;
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
    font-weight: 700;
    line-height: 1.5;
    border-radius: 12px;
    background-color: rgba(var(--accent-color, 255, 255, 255), 1);
    text-align: center;
    /* border-bottom: 2px solid transparent; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs .nav-link {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
        background-color: rgba(var(--accent-color, 38, 38, 38), 1);
    }
}
.horizontal_tabs_full .nav-tabs .nav-link i {
    color: rgba(var(--bodyfont-color, 115, 115, 115), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs .nav-link i {
        color: rgba(var(--bodyfont-color, 163, 163, 163), 1);
    }
}
.horizontal_tabs_full .nav-tabs .nav-link:hover i,
.horizontal_tabs_full .nav-tabs .nav-link:hover {
    color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs .nav-link:hover i,
    .horizontal_tabs_full .nav-tabs .nav-link:hover {
        color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
.horizontal_tabs_full .nav-tabs .nav-link.active {
    color: rgba(var(--white-color, 255, 255, 255), 1);
    background: rgba(var(--primary-color, 78, 202, 194), 1);
    /* border-color: rgba(var(--primary-color, 78, 202, 194), 1); */
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs .nav-link.active {
        color: rgba(var(--white-color, 255, 255, 255), 1);
        background: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}
.horizontal_tabs_full .nav-tabs .nav-link.active i {
    color: rgba(var(--white-color, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .horizontal_tabs_full .nav-tabs .nav-link.active i {
        color: rgba(var(--white-color, 255, 255, 255), 1);
    }
}
.horizontal_tabs_full .tab-content {
    padding: 16px 0 0;
}
/*--------------- Horizontal Tab Full ---------------*/


/*--------------- Modal Design ---------------*/
.modal-backdrop.show {
    opacity: 0.7;
    background-color: rgba(var(--modal-background-color-overlay, 0, 0, 0), 1);
}
html[data-bs-theme=dark] {
    .modal-backdrop.show {
        background-color: rgba(var(--modal-background-color-overlay, 255, 255, 255), 1);
    }
}
.modal .modal-content {
    /* padding: 20px; */
    border-radius: 1rem;
    
    border-style: solid;
    border-width: 1px;
    border-color: rgba(var(--modal-border-color, 229, 229, 229), 1);
    
    background-color: rgba(var(--modal-background-color, 255, 255, 255), 1);
}
html[data-bs-theme=dark] {
    .modal .modal-content {
        border-color: rgba(var(--modal-border-color, 64, 64, 64), 1);
        background-color: rgba(var(--modal-background-color, 0, 0, 0), 1);
    }
}
.modal .modal-content .modal-body {
    padding: 20px;
    position: relative;
}
.modal .modal-content .modal-body .btn-close {
    background-image: none;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px
}
.modal .modal-content .modal-body .btn-close i {
    color: rgba(var(--primary-color, 78, 202, 194), 1);
}
html[data-bs-theme=dark] {
    .modal .modal-content .modal-body .btn-close i {
        color: rgba(var(--primary-color, 78, 202, 194), 1);
    }
}

/*------ Modal Files  ------*/
.view_upload_files .image_file .img_wrapper {
    border-radius: 12px;
    padding: 12px;
    background: rgba(var(--formfield-bgcolor, 251, 251, 251), 1);
    border: 1px solid rgba(var(--border-color, 229, 229, 229), 1);
    position: relative;
    overflow: hidden;
}
html[data-bs-theme=dark] {
    .view_upload_files .image_file .img_wrapper {
        background: rgba(var(--formfield-bgcolor, 64, 64, 64), 1);
        border: 1px solid rgba(var(--border-color, 64, 64, 64), 1);
    }
}
.view_upload_files .image_file .img_wrapper .zoom-image {
    transition: transform 0.3s ease;
    transform-origin: center center;
}
.view_upload_files .image_file .img_wrapper img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.view_upload_files .video_frame {
    border-radius: 12px;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.view_upload_files .video_frame iframe {
    border-radius: 12px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pdf_viewer iframe {
    border-radius: 12px;
}

/*--------------- Modal Design ---------------*/


/*--------------------------------------------- RTL ---------------------------------------------*/
html[dir=rtl] {
    ul {
        padding-right: 0;
    }


    /*--------------- Form Control ---------------*/
    .input-group-button {
        padding: .5rem 1rem .5rem 0;
    }
    .input-group-button button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }
}