:root {
    --white: white;
    --black: black;
    --color: #36395a;
    --muted: #aaaaaa;
    --main: #d52c25;
    --light: #eeeeee;
    --primary: #009ef7;
    --primary-light: #d8ecf8;

    --success: #33cb78;
    --success-light: #ccffe4;
    --success-hover: #018e41;

    --danger: #f1416c;
    --danger-light: #ffdae3;
    --danger-hover: #ac002a;

    --warning: #dfaf00;
    --warning-light: #fff0b5;
    --warning-hover: #907100;

    --info: #7239ea;
    --info-light: #ece8f4;

    --dark: #181c32;
    --dark-light: #dadada;

    --green: #329e18;
    --brown: #695300;
    --bg-default: #fff;
    --bg-secondary: #f8f9fa;
    --bg-info: #00d5ff14;
    --bg-tertiary: #f0f1f2;
    --border-default: #e8ecef;
    --border-form: #d5dadf;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color);
    background-color: #f5f5f5;
    height: 100%;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    font-weight: 500;
    line-height: 1.2;
}

h1, .h1 {font-size: calc(1.375rem + 1.5vw);}
@media (min-width: 1200px) {
    h1, .h1 {font-size: 2.5rem;}
}
h2, .h2 {font-size: calc(1.325rem + 0.9vw);}
@media (min-width: 1200px) {
    h2, .h2 {font-size: 2rem;}
}
h3, .h3 {font-size: calc(1.3rem + 0.6vw);}
@media (min-width: 1200px) {
    h3, .h3 {font-size: 1.75rem;margin-bottom: 1rem;}
}
h4, .h4 {font-size: calc(1.275rem + 0.3vw);}
@media (min-width: 1200px) {
    h4, .h4 {font-size: 1.5rem;}
}
h5, .h5 {font-size: calc(0.85rem + 0.3vw);}
h6, .h6 {font-size: 1rem;}
p {margin-top: 0;}
hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid #dbdbdb;
}

fieldset {
    border: 1px solid var(--border-default);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

legend {
    padding: 0 1rem;
    margin: 0;
    border-radius: 3px;
    background-color: #d7edf1;
}

button {
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    outline: none;
}

b {font-weight: 500;}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

a {
    text-decoration: none;
    color: var(--color);
}

a:hover {color: var(--primary);}

select, input, textarea {
    font-family: var(--font-family);
    border: 1px solid var(--border-form);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    /*width: 100%;*/
    outline: none;
}

select {
    color: var(--color);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    cursor: pointer;
}

option[selected=selected] {
    background: var(--muted);
}

input {
    /*display: flex;*/
    /*align-items: center;*/
    /*cursor: text;*/
    /*overflow: hidden;*/
    /*padding-left: 0.75rem;*/
    /*padding-right: 0.75rem;*/
}
input:disabled {
    cursor: default;
}
input[type=checkbox], input[type=radio], input[type=file] {
    cursor: pointer;
    width: auto;
}

.input.file input[type=file] {
    padding: 0;
    background: var(--white);
}

input[type=file]::-webkit-file-upload-button {
    padding: 0.75rem 1rem;
    margin: 0;
    margin-inline-end: 1rem;
    color: #777;
    background-color: #eeeeee;
    pointer-events: none;
    border: none;
    border-radius: 3px;
}

.input {
    margin-bottom: 1rem;
}
.input.checkbox {
    display: flex;
    align-items: center;
}

.input.checkbox input:checked {
    background-color: var(--success);
    border: 1px solid var(--success);
}
.input.checkbox input {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--danger);
    border: 1px solid var(--danger);
    appearance: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}
.input.checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}


textarea {
    cursor: text;
    padding: 0.75rem;
    overflow: hidden;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}
.label {
    margin-bottom: 0.5rem;
    color: #888888;
}

img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

.modal {
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: #333;
    --bs-modal-bg: #fff;
    --bs-modal-border-color: var(--light);
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: 0.5rem;
    --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-modal-inner-border-radius: calc(0.5rem - 1px);
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--light);
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: #fff;
    --bs-modal-footer-border-color: var(--light);
    --bs-modal-footer-border-width: 1px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none;
}

.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal.fade .modal-dialog-right {
    width: 0;
    transition: all 0.5s ease-out;
}

.modal.show .modal-dialog-right {
    width: 100%;
}

.modal-dialog-right {
    position: fixed;
    right: 0;
    margin: 0;
    height: 100%;
}
.modal-dialog-right .modal-content {
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}
.modal-dialog-right .modal-body {
    overflow-y: auto;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.modal-backdrop, .drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease-out;
}

.drawer-backdrop {
    z-index: 99;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height);
    font-size: 1.75rem;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer > * {
    margin: calc(var(--bs-modal-footer-gap) * 0.5);
}
.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

@media (min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto;
    }
    .modal-dialog-25 {max-width: 25%;}
    .modal-dialog-33 {max-width: 33%;}
    .modal-dialog-50 {max-width: 50%;}
    .modal-dialog-60 {max-width: 60%;}
    .modal-dialog-75 {max-width: 75%;}
    .modal-sm {
        --bs-modal-width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --bs-modal-width: 800px;
    }
}
@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px;
    }
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-md-down .modal-header,
    .modal-fullscreen-md-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-lg-down .modal-header,
    .modal-fullscreen-lg-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto;
    }
    .page {
        width: 100% !important;
    }
}
@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-xl-down .modal-header,
    .modal-fullscreen-xl-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-xxl-down .modal-header,
    .modal-fullscreen-xxl-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto;
    }
}
body {
    padding-top: 70px;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0;
    border-bottom: 1px solid var(--border-default);
    background-color: var(--white);
}

header.drawer-on {
    background: var(--white);
}

header .btn-icon {
    font-size: 20px;
    cursor: pointer;
}

main {
    display: flex;
    flex: 1 0 auto;
    align-items: stretch;
}

.header-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.header-brand {
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 225px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.header-logo img {
    height: 30px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-weight: 600;
    font-size: 1.15rem;
}
@media (max-width: 991.98px) {
    .header-nav {
        display: none;
    }
}

.header-nav.show {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    min-width: 225px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}

.header-buttons {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    gap: 2rem;
}

.header-user .dropdown-toggle {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.header-user .dropdown-toggle img {
    height: 40px;
    border-radius: 0.475rem;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dbdbdb;
    border-radius: 0.475rem;
    box-shadow: 3px 5px 6px 0 #dbdbdb;
}
.dropdown-menu li {
    margin-bottom: 0.5rem;
}
.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.dropdown-menu-end {
    --bs-position: end;
}

.dropdown-menu.show {
    display: block;
}

.aside {
    display: flex;
    width: 280px;
    margin-top: 1rem;
    padding-right: 1.5rem;
}
@media (max-width: 991.98px) {
    .aside {
        display: none;
    }
}

.aside.show {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    min-width: 225px;
    height: 100%;
    display: flex;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    margin: 0;
}

.page {
    margin: 1rem 0 2.5rem;
    width: calc(100% - 225px);
}

.menu-column {
    flex-direction: column;
    width: 100%;
}

.menu {
    display: flex;
    list-style: none;
    background: var(--white);
    border-radius: 0.625rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.menu-name {
    color: var(--color);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0.25rem;
    text-transform: uppercase;
}

.menu-item {
    display: block;
    padding: 0.15rem 0;
}
.menu-item .menu-section {
    padding-bottom: 0.65rem;
    margin-bottom: 0.5rem;
    color: #a1a5b7;
    font-weight: 500;
    font-size: 1.25rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-default);
}
.menu-item .menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    white-space: nowrap;
    padding: 5px 0.5rem;
    border-left: 3px solid #fff;
    border-radius: 3px;
    font-weight: 500;
}
.menu-item .menu-link.selected {
    color: var(--primary);
}

.menu-item .menu-link i {
    font-weight: normal;
}

.menu-item .menu-link.active, .menu-item .menu-link.active:hover {
    color: var(--primary);
    background: #eee;
    border-left: 3px solid var(--primary);
    border-radius: 3px;
}
.menu-item .menu-link.active span {
    color:  var(--color);
}

.menu-item .menu-link:hover {
    color:  var(--color);
    background: #eee;
    border-left: 3px solid #009ef7;
    border-radius: 3px;
}



.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.page-title {
    display: flex !important;
    flex-direction: column !important;

}
.page-title h1 {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: calc(1.3rem + .6vw)!important;
    font-weight: 600;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 0;
    margin-top: 1rem;
    list-style: none;
    font-size: 1rem;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
}
.breadcrumbs li a {
    color: #a1a5b7;
}
.breadcrumbs li::after {
    content: "/";
    padding: 0 0.5rem;
    color: #a1a5b7;
}
.breadcrumbs li:last-child::after {
    content: none;
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);
    margin-right: auto;
    margin-left: auto;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.m-0 {margin: 0 !important;}
.m-1 {margin: 0.25rem !important;}
.m-2 {margin: 0.5rem !important;}
.m-3 {margin: 1rem !important;}
.m-4 {margin: 1.5rem !important;}
.m-5 {margin: 3rem !important;}
.m-auto {margin: auto !important;}
.mx-0 {margin-right: 0 !important;margin-left: 0 !important;}
.mx-1 {margin-right: 0.25rem !important;margin-left: 0.25rem !important;}
.mx-2 {margin-right: 0.5rem !important;margin-left: 0.5rem !important;}
.mx-3 {margin-right: 1rem !important;margin-left: 1rem !important;}
.mx-4 {margin-right: 1.5rem !important;margin-left: 1.5rem !important;}
.mx-5 {margin-right: 3rem !important;margin-left: 3rem !important;}
.mx-auto {margin-right: auto !important;margin-left: auto !important;}
.my-0 {margin-top: 0 !important;margin-bottom: 0 !important;}
.my-1 {margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;}
.my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}
.my-3 {margin-top: 1rem !important;margin-bottom: 1rem !important;}
.my-4 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.my-5 {margin-top: 3rem !important;margin-bottom: 3rem !important;}
.my-auto {margin-top: auto !important;margin-bottom: auto !important;}
.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: 0.25rem !important;}
.mt-2 {margin-top: 0.5rem !important;}
.mt-3 {margin-top: 1rem !important;}
.mt-4 {margin-top: 1.5rem !important;}
.mt-5 {margin-top: 3rem !important;}
.mt-auto {margin-top: auto !important;}
.me-0 {margin-right: 0 !important;}
.me-1 {margin-right: 0.25rem !important;}
.me-2 {margin-right: 0.5rem !important;}
.me-3 {margin-right: 1rem !important;}
.me-4 {margin-right: 1.5rem !important;}
.me-5 {margin-right: 3rem !important;}
.me-auto {margin-right: auto !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: 0.25rem !important;}
.mb-2 {margin-bottom: 0.5rem !important;}
.mb-3 {margin-bottom: 1rem !important;}
.mb-4 {margin-bottom: 1.5rem !important;}
.mb-5 {margin-bottom: 3rem !important;}
.mb-auto {margin-bottom: auto !important;}
.ms-0 {margin-left: 0 !important;}
.ms-1 {margin-left: 0.25rem !important;}
.ms-2 {margin-left: 0.5rem !important;}
.ms-3 {margin-left: 1rem !important;}
.ms-4 {margin-left: 1.5rem !important;}
.ms-5 {margin-left: 3rem !important;}
.ms-auto {margin-left: auto !important;}
.p-0 {padding: 0 !important;}
.p-1 {padding: 0.25rem !important;}
.p-2 {padding: 0.5rem !important;}
.p-3 {padding: 1rem !important;}
.p-4 {padding: 1.5rem !important;}
.p-5 {padding: 3rem !important;}
.px-0 {padding-right: 0 !important;padding-left: 0 !important;}
.px-1 {padding-right: 0.25rem !important;padding-left: 0.25rem !important;}
.px-2 {padding-right: 0.5rem !important;padding-left: 0.5rem !important;}
.px-3 {padding-right: 1rem !important;padding-left: 1rem !important;}
.px-4 {padding-right: 1.5rem !important;padding-left: 1.5rem !important;}
.px-5 {padding-right: 3rem !important;padding-left: 3rem !important;}
.py-0 {padding-top: 0 !important;padding-bottom: 0 !important;}
.py-1 {padding-top: 0.25rem !important;padding-bottom: 0.25rem !important;}
.py-2 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}
.py-3 {padding-top: 1rem !important;padding-bottom: 1rem !important;}
.py-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}
.py-5 {padding-top: 3rem !important;padding-bottom: 3rem !important;}
.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: 0.25rem !important;}
.pt-2 {padding-top: 0.5rem !important;}
.pt-3 {padding-top: 1rem !important;}
.pt-4 {padding-top: 1.5rem !important;}
.pt-5 {padding-top: 3rem !important;}
.pe-0 {padding-right: 0 !important;}
.pe-1 {padding-right: 0.25rem !important;}
.pe-2 {padding-right: 0.5rem !important;}
.pe-3 {padding-right: 1rem !important;}
.pe-4 {padding-right: 1.5rem !important;}
.pe-5 {padding-right: 3rem !important;}
.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: 0.25rem !important;}
.pb-2 {padding-bottom: 0.5rem !important;}
.pb-3 {padding-bottom: 1rem !important;}
.pb-4 {padding-bottom: 1.5rem !important;}
.pb-5 {padding-bottom: 3rem !important;}
.ps-0 {padding-left: 0 !important;}
.ps-1 {padding-left: 0.25rem !important;}
.ps-2 {padding-left: 0.5rem !important;}
.ps-3 {padding-left: 1rem !important;}
.ps-4 {padding-left: 1.5rem !important;}
.ps-5 {padding-left: 3rem !important;}

.gap-1 {gap: 0.25rem;}
.gap-2 {gap: 0.5rem;}
.gap-3 {gap: 1rem;}
.gap-4 {gap: 1.5rem;}
.gap-5 {gap: 3rem;}

.b-0 {border: none !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-grid {display: grid !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}
.d-none {display: none !important;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.sticky {
    position: sticky;
    background: var(--white);
    overflow: hidden;
    z-index: 1;
}

.align-top {vertical-align: top !important;}
.align-middle {vertical-align: middle !important;}
.align-bottom {vertical-align: bottom !important;}



.flex-wrap {flex-wrap: wrap !important;}
.flex-fill {flex: 1 1 auto!important;}

.w-100 {width: 100% !important;}
.w-75 {width: 75% !important;}
.w-50 {width: 50% !important;}
.w-25 {width: 25% !important;}

.h-100 {height: 100% !important;}
.h-auto {height: auto !important;}

.lh-1 { line-height: 1;}
.lh-14 { line-height: 14px;}
.lh-15 { line-height: 15px;}
.lh-24 { line-height: 24px;}

.bg-white {background: var(--white) !important;}
.bg-none {background: none !important;}
.bg-info-light {background: var(--info-light) !important;}
.bg-warning-light {background: var(--warning-light) !important;}
.bg-danger-light {background: var(--danger-light) !important;}
.bg-light {background: var(--light) !important;}
.bg-success {background: var(--success) !important;}
.bg-light-success {background: var(--success-light) !important;}

.bg-warning {background: var(--warning) !important;}

.bg-status1 {color: #ffffff; background: #000000;}
.bg-status2 {color: #FFFFFF; background: #666666;}
.bg-status3 {color: #333333; background: #dedede;}
.bg-status4 {color: #107600; background: #daffdf;}
.bg-status5 {color: #107600; background: #bbffc1;}
.bg-status6 {color: #107600; background: #96eb96;}
.bg-status7 {color: #107600; background: #96d796;}
.bg-status8 {color: #107600; background: #67f772;}
.bg-status9 {color: #ffffff; background: #009900;}
.bg-status10 {color: #96eb96; background: #107600;}
.bg-status11 {color: #ffffff; background: #738c6d;}
.bg-status12 {color: #0061c8; background: #c2e2ff;}
.bg-status13 {color: #0061c8; background: #a4beff;}
.bg-status14 {color: #ffffff; background: #86a0ff;}
.bg-status15 {color: #9d07eb; background: #e5c3ff;}
.bg-status16 {color: #ffffff; background: #ff6464;}
.bg-status17 {color: #dc0000; background: #ff9696;}
.bg-status18 {color: #ffcc99; background: #ff6600;}
.bg-status19 {color: #ffeddf; background: #e79354;}
.bg-status20 {color: #ffc894; background: #af8d64;}
.bg-status21 {color: #d6ad7c; background: #71553a;}
.bg-status22 {color: #ffffff; background: #750000;}
.bg-status23 {color: #fe8500; background: #fbffcb;}
.bg-status24 {color: #fe8500; background: #ffff90;}
.bg-status25 {color: #dc0000; background: #ebff69;}
.bg-status26 {color: #000000; background: #f3d620;}



.text-start {text-align: start !important;}
.text-end {text-align: right !important;}
.text-center {text-align: center !important;}

.text-primary {color: var(--primary) !important;transition: all 0.5s ease-out;}
a.text-primary:hover {color: #0489d4 !important;}

.text-info {color: var(--info) !important;}
a.text-info:hover {color: var(--black) !important;}

.text-success {color: var(--success) !important;transition: all 0.5s ease-out;}
a.text-success:hover { color: var(--success-hover)!important;}

.text-warning {color: var(--warning) !important;transition: all 0.5s ease-out;}
a.text-warning:hover { color: var(--warning-hover)!important;}

.text-danger {color: var(--danger) !important;transition: all 0.5s ease-out;}
a.text-danger:hover { color: var(--danger-hover)!important;}

.text-muted {color: var(--muted) !important;}
.text-color {color: var(--color) !important;}
.text-main {color: var(--main) !important;}
.text-green {color: var(--green) !important;}
.text-brown {color: var(--brown) !important;}
.text-black {color: var(--black) !important;}

.font-normal {font-weight: normal !important;}
.font-bold {font-weight: bold !important;}
.font-500 {font-weight: 500 !important;}


.italic { font-style: italic !important; }




.ws-normal { white-space: normal !important;}

.jc-start {justify-content: flex-start !important;}
.jc-end {justify-content: flex-end !important;}
.jc-center {justify-content: center !important;}
.jc-between {justify-content: space-between !important;}
.jc-around {justify-content: space-around !important;}
.jc-evenly {justify-content: space-evenly !important;}

.ai-start {align-items: flex-start !important;}
.ai-end {align-items: flex-end !important;}
.ai-center {align-items: center !important;}
.ai-baseline {align-items: baseline !important;}
.ai-stretch {align-items: stretch !important;}
.ac-start {align-content: flex-start !important;}
.ac-end {align-content: flex-end !important;}
.ac-center {align-content: center !important;}
.ac-between {align-content: space-between !important;}
.ac-around {align-content: space-around !important;}
.ac-stretch {align-content: stretch !important;}
.as-auto {align-self: auto !important;}
.as-start {align-self: flex-start !important;}
.as-end {align-self: flex-end !important;}
.as-center {align-self: center !important;}
.as-baseline {align-self: baseline !important;}
.as-stretch {align-self: stretch !important;}

.scrollbar::-webkit-scrollbar {
    width: 6px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-track {
    background: transparent;
    cursor: pointer;
}

.flex-shrink-0 {flex-shrink: 0 !important;}

.fs-1 {font-size: calc(1.3rem + 0.6vw) !important;}
.fs-2 {font-size: calc(1.275rem + 0.3vw) !important;}
.fs-3 {font-size: calc(1.26rem + 0.12vw) !important;}
.fs-4 {font-size: 1.25rem !important;}
.fs-5 {font-size: 1.15rem !important;}
.fs-6 {font-size: 1.075rem !important;}
.fs-7 {font-size: 0.95rem !important;}
.fs-8 {font-size: 0.85rem !important;}
.fs-9 {font-size: 0.75rem !important;}
.fs-10 {font-size: 0.5rem !important;}

@media (min-width: 576px) {
    .container-sm, .container {max-width: 540px;}
    .col-sm {flex: 1 0 0;}
    .col-sm-auto {flex: 0 0 auto;width: auto;}
    .col-sm-1 {flex: 0 0 auto;width: 8.33333333%;}
    .col-sm-2 {flex: 0 0 auto;width: 16.66666667%;}
    .col-sm-3 {flex: 0 0 auto;width: 25%;}
    .col-sm-4 {flex: 0 0 auto;width: 33.33333333%;}
    .col-sm-5 {flex: 0 0 auto;width: 41.66666667%;}
    .col-sm-6 {flex: 0 0 auto;width: 50%;}
    .col-sm-7 {flex: 0 0 auto;width: 58.33333333%;}
    .col-sm-8 {flex: 0 0 auto;width: 66.66666667%;}
    .col-sm-9 {flex: 0 0 auto;width: 75%;}
    .col-sm-10 {flex: 0 0 auto;width: 83.33333333%;}
    .col-sm-11 {flex: 0 0 auto;width: 91.66666667%;}
    .col-sm-12 {flex: 0 0 auto;width: 100%;}
}
@media (min-width: 768px) {
    .container-md, .container-sm, .container {max-width: 720px;}
    .col-md {flex: 1 0 0;}
    .col-md-auto {flex: 0 0 auto;width: auto;}
    .col-md-1 {flex: 0 0 auto;width: 8.33333333%;}
    .col-md-2 {flex: 0 0 auto;width: 16.66666667%;}
    .col-md-3 {flex: 0 0 auto;width: 25%;}
    .col-md-4 {flex: 0 0 auto;width: 33.33333333%;}
    .col-md-5 {flex: 0 0 auto;width: 41.66666667%;}
    .col-md-6 {flex: 0 0 auto;width: 50%;}
    .col-md-7 {flex: 0 0 auto;width: 58.33333333%;}
    .col-md-8 {flex: 0 0 auto;width: 66.66666667%;}
    .col-md-9 {flex: 0 0 auto;width: 75%;}
    .col-md-10 {flex: 0 0 auto;width: 83.33333333%;}
    .col-md-11 {flex: 0 0 auto;width: 91.66666667%;}
    .col-md-12 {flex: 0 0 auto;width: 100%;}
    .d-md-inline {display: inline !important;}
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {max-width: 960px;}
    .col-lg {flex: 1 0 0;}
    .col-lg-auto {flex: 0 0 auto;width: auto;}
    .col-lg-1 {flex: 0 0 auto;width: 8.33333333%;}
    .col-lg-2 {flex: 0 0 auto;width: 16.66666667%;}
    .col-lg-3 {flex: 0 0 auto;width: 25%;}
    .col-lg-4 {flex: 0 0 auto;width: 33.33333333%;}
    .col-lg-5 {flex: 0 0 auto;width: 41.66666667%;}
    .col-lg-6 {flex: 0 0 auto;width: 50%;}
    .col-lg-7 {flex: 0 0 auto;width: 58.33333333%;}
    .col-lg-8 {flex: 0 0 auto;width: 66.66666667%;}
    .col-lg-9 {flex: 0 0 auto;width: 75%;}
    .col-lg-10 {flex: 0 0 auto;width: 83.33333333%;}
    .col-lg-11 {flex: 0 0 auto;width: 91.66666667%;}
    .col-lg-12 {flex: 0 0 auto;width: 100%;}
    .flex-lg-grow-0 {flex-grow: 0;}
    .flex-lg-grow-1 {flex-grow: 1;}
    .menu-lg-row {flex-direction: row;}
    .menu-lg-row > .menu-item {display: flex;align-items: center;}
    .d-lg-inline {display: inline !important;}
    .d-lg-none {display: none !important;}
    .d-lg-block {display: block !important;}
    .d-lg-flex {display: flex !important;}
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px;}
    .col-xl {flex: 1 0 0;}
    .col-xl-auto {flex: 0 0 auto;width: auto;}
    .col-xl-1 {flex: 0 0 auto;width: 8.33333333%;}
    .col-xl-2 {flex: 0 0 auto;width: 16.66666667%;}
    .col-xl-3 {flex: 0 0 auto;width: 25%;}
    .col-xl-4 {flex: 0 0 auto;width: 33.33333333%;}
    .col-xl-5 {flex: 0 0 auto;width: 41.66666667%;}
    .col-xl-6 {flex: 0 0 auto;width: 50%;}
    .col-xl-7 {flex: 0 0 auto;width: 58.33333333%;}
    .col-xl-8 {flex: 0 0 auto;width: 66.66666667%;}
    .col-xl-9 {flex: 0 0 auto;width: 75%;}
    .col-xl-10 {flex: 0 0 auto;width: 83.33333333%;}
    .col-xl-11 {flex: 0 0 auto;width: 91.66666667%;}
    .col-xl-12 {flex: 0 0 auto;width: 100%;}
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px;}
    .col-xxl {flex: 1 0 0;}
    .col-xxl-auto {flex: 0 0 auto;width: auto;}
    .col-xxl-1 {flex: 0 0 auto;width: 8.33333333%;}
    .col-xxl-2 {flex: 0 0 auto;width: 16.66666667%;}
    .col-xxl-3 {flex: 0 0 auto;width: 25%;}
    .col-xxl-4 {flex: 0 0 auto;width: 33.33333333%;}
    .col-xxl-5 {flex: 0 0 auto;width: 41.66666667%;}
    .col-xxl-6 {flex: 0 0 auto;width: 50%;}
    .col-xxl-7 {flex: 0 0 auto;width: 58.33333333%;}
    .col-xxl-8 {flex: 0 0 auto;width: 66.66666667%;}
    .col-xxl-9 {flex: 0 0 auto;width: 75%;}
    .col-xxl-10 {flex: 0 0 auto;width: 83.33333333%;}
    .col-xxl-11 {flex: 0 0 auto;width: 91.66666667%;}
    .col-xxl-12 {flex: 0 0 auto;width: 100%;}
}
.col-min {width: 1%;}
.col {flex: 1 0 0;}
.col-auto {flex: 0 0 auto;width: auto;}
.col-1 {flex: 0 0 auto;width: 8.33333333%;}
.col-2 {flex: 0 0 auto;width: 16.66666667%;}
.col-3 {flex: 0 0 auto;width: 25%;}
.col-4 {flex: 0 0 auto;width: 33.33333333%;}
.col-5 {flex: 0 0 auto;width: 41.66666667%;}
.col-6 {flex: 0 0 auto;width: 50%;}
.col-7 {flex: 0 0 auto;width: 58.33333333%;}
.col-8 {flex: 0 0 auto;width: 66.66666667%;}
.col-9 {flex: 0 0 auto;width: 75%;}
.col-10 {flex: 0 0 auto;width: 83.33333333%;}
.col-11 {flex: 0 0 auto;width: 91.66666667%;}
.col-12 {flex: 0 0 auto;width: 100%;}

.fa-home::before {content: "\f015";}
.fa-user::before {content: "\f007";}
.fa-users::before { content: "\f0c0";}
.fa-user-gear::before {content: "\f4fe";}
.fa-user-tie-hair::before {content: "\e45f";}
.fa-user-headset::before {content: "\f82d";}

.fa-cog::before {content: "\f013";}
.fa-bars::before {content: "\f0c9";}
.fa-bars-staggered::before {content: "\f550";}
.fa-timer::before {content: "\e29e";}
.fa-comment::before {content: "\f075";}
.fa-bell::before {content: "\f0f3";}
.fa-question::before {content: "\3f";}
.fa-plus::before {content: "\2b";}
.fa-minus::before {content: "\f068";}
.fa-trash-alt::before {content: "\f2ed";}
.fa-folder::before {content: "\f07b";}
.fa-folder-tree::before {content: "\f802";}
.fa-pen-to-square::before {content: "\f044";}
.fa-arrow-right-from-bracket::before {content: "\f08b";}
.fa-angle-up::before {content: "\f106";}
.fa-angle-down::before {content: "\f107";}
.fa-angle-left::before {content: "\f104";}
.fa-angle-right::before {content: "\f105";}
.fa-folders::before {content: "\f660";}
.fa-folder-gear::before {content: "\e187";}
.fa-list::before {content: "\f03a";}
.fa-bags-shopping::before {content: "\f847";}
.fa-check::before {content: "\f00c";}
.fa-chalkboard-user::before {content: "\f51c";}
.fa-xmark::before {content: "\f00d"; }
.fa-image::before {content: "\f03e";}
.fa-filter-list::before { content: "\e17c";}
.fa-square-info::before {content: "\f30f";}
.fa-file-signature::before {content: "\f573";}
.fa-cart-shopping::before {content: "\f07a";}
.fa-cart-flatbed-boxes::before {content: "\f475";}
.fa-address-book::before {content: "\f2b9";}
.fa-product-hunt:before {content: "\f288";}
.fa-arrows-rotate::before {content: "\f021";}
.fa-download::before {content: "\f019";}
.fa-file-chart-pie::before {content: "\f65a";}
.fa-eye::before {content: "\f06e";}
.fa-eye-slash::before {content: "\f070";}
.fa-table-columns::before {content: "\f0db";}
.fa-screwdriver-wrench::before {content: "\f7d9";}

.fa-relative {
    font-size: 20px;
    position: relative;
    top: 2px;
    width: 20px;
}

.fal, .far, .fas, .fad, .fab {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    width: 20px;
    margin-right: 0.25rem;
}

.fal {font-family: "FAL", sans-serif;}
.far {font-family: "FAR", sans-serif;}
.fas {font-family: "FAS", sans-serif;}
.fad {font-family: "FAD", sans-serif;}
.fab {font-family: "FAB", sans-serif;}

@font-face{
    font-family:"FAL";
    font-style:normal;
    font-display:block;
    src: local('FAL'), url(/inc/font/fa-light-300.woff2) format("woff2");
}

@font-face{
    font-family:"FAR";
    font-style:normal;
    font-display:block;
    src: local('FAR'), url(/inc/font/fa-regular-400.woff2) format("woff2");
}
@font-face{
    font-family:"FAS";
    font-style:normal;
    font-display:block;
    src: local('FAS'), url(/inc/font/fa-solid-900.woff2) format("woff2");
}
@font-face{
    font-family:"FAB";
    font-style:normal;
    font-display:block;
    src: local('FAB'), url(/inc/font/fa-brands-400.woff2) format("woff2");
}

@font-face{
    font-family:"FAD";
    font-style:normal;
    font-display:block;
    src: local('FAD'), url(/inc/font/fa-duotone-900.woff2) format("woff2");
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--color);
    vertical-align: top;
    border-color:  var(--border-default);
}
.table-responsive {
    overflow-x: auto;
}
.table-nowrap {
    white-space: nowrap;
}
.table-image {
    width: 65px;
    height: 65px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.table-name {
    color: #3f4254;
    font-weight: 600;
    font-size: 1.15rem;
}
.table > :not(caption) > * > * {
    border-bottom: 1px solid var(--border-default);
    padding: 0.5rem 1rem 0.5rem 0.1rem;
    white-space: nowrap;
    vertical-align: middle;
}
.table thead * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: none;
    color: var(--muted);
    text-align: left;
    font-weight: normal;
}

.table.table-extra thead * {
    padding-top: 0;
    padding-bottom: 0;
    font-weight: normal;
    font-size: 11px;
}
.table.table-extra tbody td {
    height: 35px;
}
.table.table-extra tbody td:last-child {
    padding-right: 0;
}
.table > tbody td {
    height: 50px;
}

tr.bb-none td {
    border-bottom: none;
}

.table > thead {vertical-align: bottom;  font-weight: 500;}
.table > tbody {vertical-align: inherit;}

.table.table-valign > :not(caption) > * > * {
    vertical-align: middle;
}

.table.table-propertys thead * {

    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.table.table-propertys > :not(caption) > * > * {

    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
}
.table.table-propertys tbody tr:hover  {
    background: #f0f0f0;
}
.table-propertys select {
    border: 1px solid var(--white);
}
.table-propertys input {
    border: 1px solid var(--white);
}
.table-propertys input:hover, .table-propertys select:hover  {
    border: 1px solid var(--warning);
}

.table-propertys input:focus, .table-propertys select:focus  {
    border: 1px solid var(--white);
}

.badge {
    display: inline-block;
    font-size: 12px;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    white-space: nowrap;
}
.badge-circle {
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.badge-success-light {
    color: var(--success);
    background-color: var(--success-light);
}

.badge-warning-light {
    color: var(--warning);
    background-color: var(--warning-light);
}

.badge-primary-light {
    color: var(--primary);
    background-color: var(--primary-light);
}

.badge-info-light {
    color: var(--info);
    background-color: var(--info-light);
}

.badge-dark-light {
    color: var(--dark);
    background-color: var(--dark-light);
}

.pagination {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    gap: 1rem;
}
.pagination .active * {
    font-weight: bold;
    cursor: default;
}

.pagination .next.disabled, .pagination .prev.disabled {
    display: none;
}

.btn {
    --bs-btn-padding-x: calc(1.5rem + 1px);
    --bs-btn-padding-y: calc(0.775rem + 1px);
    --bs-btn-font-size: 1.1rem;
    --bs-btn-color: #181C32;
    --bs-btn-bg: #fff;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: #e3e3e3;
    --bs-btn-border-radius: 0.475rem;
    --bs-btn-disabled-opacity: 0.65;
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    color: var(--bs-btn-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.925rem;
    --bs-btn-border-radius: 0.5rem;
}
.btn-clear {
    position: absolute;
    right: 1px;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #009ef7;
    --bs-btn-border-color: #009ef7;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #26adf8;
    --bs-btn-hover-border-color: #1aa8f8;
    --bs-btn-focus-shadow-rgb: 0, 134, 210;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #33b1f9;
    --bs-btn-active-border-color: #1aa8f8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #009ef7;
    --bs-btn-disabled-border-color: #009ef7;
}

.btn-primary:hover  {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #fff;
}

.btn-primary-light {
    color: var(--primary);
    border-color: var(--primary-light);
    background-color: var(--primary-light);
}
.btn-primary-light:hover  {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #fff;
}

.btn-warning-light {
    color: var(--warning);
    border-color: var(--warning-light);
    background-color: var(--warning-light);
}
.btn-warning-light:hover  {
    border-color: var(--warning);
    background-color: var(--warning);
    color: #fff;
}

.btn-success-light {
    color: var(--success);
    border-color: var(--success-light);
    background-color: var(--success-light);
}
.btn-success-light:hover  {
    border-color: var(--success);
    background-color: var(--success);
    color: #fff;
}

.btn-danger-light {
    color: var(--danger);
    border-color: var(--danger-light);
    background-color: var(--danger-light);
}
.btn-danger-light:hover  {
    border-color: var(--danger);
    background-color: var(--danger);
    color: #fff;
}

.btn-light {
    border-color: var(--light);
    background-color: var(--light);
    color: #7e8299;
}
.btn-light:hover {
    color: var(--primary);
}



/*.btn-white, .btn-white:disabled:hover, .btn-white:disabled:focus {*/
.btn-white {
    border-color: var(--border-form);
    background-color: var(--white);
    color: var(--black);
}
.btn-white:hover {
    border-color: var(--border-form);
    background-color: var(--border-form);
    color: var(--color);
}

.btn-link {
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    vertical-align: baseline;
    background: none;
    box-shadow: none;
    font-weight: normal;
}
.btn-link:hover, .btn-link:focus  {
    color: var(--primary) !important;
}

.btn-circle {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
}
.btn-circle-success {
    background-color: var(--success);
    border: 1px solid var(--success);
}
.btn-circle-danger {
    background-color: var(--danger-light);
    border: 1px solid var(--danger-light);
}

.circle {
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--white);
    top: 0;
    left: 0;
    opacity: 0.6;
}

.circle-14px {
    width: 14px;
    height: 14px;
    top: -7px;
    left: -7px;
}
.circle-12px {
    width: 12px;
    height: 12px;
    top: -5px;
    left: -5px;
}

.circle-8px {
    width: 8px;
    height: 8px;
}


.form_radio_group .radio_input {
    display: none;
}
.form_radio_group label {
    display: flex;
    gap: 1rem;
    border: 1px solid #e7e9ec;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    user-select: none;
    cursor: pointer;
}

.form_radio_group .radio_input:checked + label, .form_radio_group .radio_input.checked + label {
    border: 1px dashed #009ef7;
    background-color: #d4f0ff;
}

.form_radio_group label:hover {
    border: 1px dashed #009ef7;
    background-color: #d4f0ff;
}
.form_radio_group .radio_input:disabled + label, .form_radio_group .radio_input.disabled + label {
    background: #efefef;
    color: #666;
}

.quantity_block * :disabled, .quantity_block * :disabled:hover {
    opacity: 0.8;
    cursor: initial;
    color: var(--white);
    background-color: var(--white);
}

.quantity_block .radio_input:checked ~ .buttons {
    opacity: 1;
}

.form-label {
    position: relative;
}
.form-label label {
    position: absolute;
    padding: 0 0.5rem;
    background-color: white;
    line-height: 1;
    transition: 0.5s;
}
.form-label .form-control:focus + label {
    font-weight: 600;
    color: var(--primary);
}
.form-label .form-control:not(:placeholder-shown) + label {
    top: -7px;
    left: 1rem;
    z-index: 10;
    font-size: 12px;
}




.card {
    position: relative;
    border: 1px solid #e7e9ec;
    border-radius: 0.625rem;
    padding: 1rem 1.5rem;
    background: var(--white);
}
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.card-title {
    font-size: 1.5rem;
    font-weight: 500;
}
.card-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.5rem 0;
    gap: 0.5rem;
}

.card-image {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    max-width: none;
}




.droparea {
    border: 2px dashed #e7e9ec;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;
}
.droparea label {
    margin: 0;
    cursor: pointer;
    color: #a1a5b7;
    font-size: 1.5rem;
}
.droparea label:hover {
    color: #009ef7;
}
.droparea-gallery {
    margin-top: 10px;
}
.droparea-gallery .drop-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 1rem;
}
.droparea-gallery .drop-image {
    width: 200px;
    height: 200px;
    border-radius: 0.5rem;
    border: 3px solid #ffffff;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
}
.droparea-gallery .drop-delete {
    cursor: pointer;
}


.alert {
    --bs-alert-bg: transparent;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: 1px solid var(--bs-alert-border-color);
    border-radius: 0.475rem;
}
.alert.hidden {
    display: none;
}
.alert-danger {
    --bs-alert-color: #f6003c;
    --bs-alert-bg: #f8d7df;
    --bs-alert-border-color: #ffb0c3;
}
.alert-success {
    --bs-alert-color: #178549;
    --bs-alert-bg: #d5efe1;
    --bs-alert-border-color: #8dd9b0;
}

.alert-info {
    --bs-alert-color: #7239ea;
    --bs-alert-bg: #ece8f4;
    --bs-alert-border-color: #7239ea;
}
.alert-info-light {
    --bs-alert-color: var(--info);
    --bs-alert-bg: var(--info-light);
}
.alert-danger-light {
    --bs-alert-color: var(--danger);
    --bs-alert-bg: var(--danger-light);
}
.alert-warning-light {
    --bs-alert-color: var(--warning);
    --bs-alert-bg: var(--warning-light);
}

.alert-primary-light {
    --bs-alert-color: var(--primary);
    --bs-alert-bg: var(--primary-light);
}

.alert-default-light {
    --bs-alert-color: var(--info);
    --bs-alert-bg: var(--info-light);
}

.alert-default {
    --bs-alert-color: var(--dark);
    --bs-alert-bg: var(--dark-light);
}

.alert-warning {
    --bs-alert-color: #665000;
    --bs-alert-bg: #fff4cc;
    --bs-alert-border-color: #ffeeb3;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
}
.nav-tabs .nav-link {
    display: inline-block;
    padding: 0.5rem 0;
    margin-right: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}
.nav-tabs .nav-link.active {
    transition: color 0.2s ease;
    border-bottom: 2px solid #009ef7;
    color: #009ef7 !important;}

.tab-content {}
.tab-content .tab-pane {
    display: none;
    padding: 1rem 0;
}
.tab-content .tab-pane.active {
    display: block;
}

.props {
    margin-bottom: 1rem;
}
.props-item {
    display: grid;
    grid-template-columns: repeat(1, 25% 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.props-name {
    color: #a1a5b7;
}
.props-value {
    font-size: 14px;
}


.description table {
    width: 100%;
    white-space: nowrap;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.description table  > :not(caption) > * > *  {
    border: 1px solid #e7e9ec;
    padding: 0.25rem 1rem;
    background: #f7f7f7;
}
.description table th {
    background-color: #cae2ef;
    font-size: 16px;
}
.description > ul {
    margin-bottom: 2.5rem;
}

/*.ck-editor__editable_inline {*/
/*    min-height: 300px;*/
/*}*/
textarea.cke_source {
    overflow-y: auto;
}

.symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.symbol-circle > img {
    border-radius: 50%;
    border: 1px solid #ddd;
}
img.symbol-label {
    border: 1px solid #ddd;
    border-radius: 0.475rem;
    max-width: initial;
}

.symbol.symbol-25px  {
    width: 25px;
    height: 25px;
}

.symbol.symbol-35px  {
    width: 35px;
    height: 35px;
}

.symbol.symbol-65px  {
    width: 65px;
    height: 65px;
}

.symbol.symbol-100px {
    width: 100px;
    height: 100px;
}

.symbol-logo {
    color: #3abcd1;
    background: #d2f9ff;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 0.475rem;
    transition: all 0.5s ease-out;
}

.timeline .timeline-item {
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
}
.timeline .timeline-line {
    display: block;
    content: " ";
    justify-content: center;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translate(50%);
    border-left: 1px dashed #d6d6d6;
    width: 40px;
}

.timeline .timeline-icon {
    z-index: 1;
    flex-shrink: 0;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    position: relative;
}

.timeline-icon .symbol-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color);
}
.timeline .timeline-content {
    width: 100%;
    margin-bottom: 1.5rem;
}

.btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
    margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
    font-size: 20px;
    font-family: "FAR", sans-serif;
    background: var(--white);
}
.btn-close::before {
    content: "\f00d";
}

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}
.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0.25;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.toast {
    --bs-toast-padding-x: 1rem;
    --bs-toast-padding-y: 1rem;
    --bs-toast-spacing: 1.5rem;
    width: 350px;
    max-width: 100%;
    color: var(--color);
    pointer-events: auto;
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--border-default);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 4px;

}
.toast.showing {
    opacity: 0;
}
.toast:not(.show) {
    display: none;
}

.toast-container {
    position: fixed;
    z-index: 1090;
    max-width: 370px;
    top: 0; left: 0; right: 0;
    margin: 0 auto;
    pointer-events: none;
}
.toast-container > :not(:last-child) {
    margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-clip: padding-box;
    border-bottom: 1px solid var(--border-default);
}
.toast-header .btn-close {
    margin-left: 1.5rem;
}

.toast-body {
    padding: 0.5rem 1rem;
    word-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: none;
    }
}

.fade {
    transition: opacity .15s linear;
}