:root {
    --purple-hex: #8e44ab;
    --purple-rgb: 142, 68, 171;
    --purple-hs: 283, 43%;
    --purple-l: 47%;
    --bs-light-rgb: 103, 103, 103;
    --bs-primary-rgb: 142, 68, 172;
    --orange-hs: 34, 98%;
    --orange-l: 59%;
    .btn-primary {
        --bs-btn-bg: hsl(var(--purple-hs), var(--purple-l));
        --bs-btn-border-color: hsl(var(--purple-hs), var(--purple-l));
        --bs-btn-hover-bg: hsl(var(--purple-hs),calc(var(--purple-l) - 10%));
        --bs-btn-hover-border-color: hsl(var(--purple-hs),calc(var(--purple-l) - 10%));
        --bs-btn-active-bg: hsl(var(--purple-hs),calc(var(--purple-l) - 15%));
        --bs-btn-active-border-color: hsl(var(--purple-hs),calc(var(--purple-l) - 15%));
        --bs-btn-disabled-bg: hsl(var(--purple-hs),calc(var(--purple-l) + 10%));
        --bs-btn-disabled-border-color: hsl(var(--purple-hs),calc(var(--purple-l) + 10%));
    }
    .btn-secondary {
        --bs-btn-bg: hsl(var(--orange-hs), var(--orange-l));
        --bs-btn-border-color: hsl(var(--orange-hs), var(--orange-l));
        --bs-btn-hover-bg: hsl(var(--orange-hs),calc(var(--orange-l) - 10%));
        --bs-btn-hover-border-color: hsl(var(--orange-hs),calc(var(--orange-l) - 10%));
        --bs-btn-active-bg: hsl(var(--orange-hs),calc(var(--orange-l) - 15%));
        --bs-btn-active-border-color: hsl(var(--orange-hs),calc(var(--orange-l) - 15%));
        --bs-btn-disabled-bg: hsl(var(--orange-hs),calc(var(--orange-l) + 10%));
        --bs-btn-disabled-border-color: hsl(var(--orange-hs),calc(var(--orange-l) + 10%));
    }
    --bs-link-color-rgb: var(--purple-rgb);
    --bs-link-hover-color-rgb: var(--purple-rgb);
    --bs-pagination-color: var(--purple-hex) !important;
}

.page-link {
    color: var(--purple-hex) !important;
}
.active > .page-link {
    color: white !important;
    background: var(--purple-hex) !important;
    border-color: var(--purple-hex) !important;
}

.navbar-brand img {
    width: 240px;
}

.navbar h1 {
    color: white;
    font-size: 1.75rem;
    margin-top: .5rem;
    font-weight: normal;
}

.form-row {
    min-height: 650px;
}

.pseudo-input {
    display: inline-block;
    width: 70%;
    padding: .375rem .75rem;
    margin-left: 5px;
}

.editable-price {
    display: inline-block;
    width: 70%;
    text-align: right;
    border: 1px dashed orange;
    margin-left: 5px;
}

.card-header h5 {
    margin-top: 0.5rem;
}

.toggle-password-button {
    top: .6rem !important;
    right: 2rem !important;
}

.form-label.required::after {
    content: '*';
    color: var(--bs-danger);
}

.ts-dropdown {
    z-index: 1100;
}

.sort {
    width: 15px;
    height: 20px;
    position: relative;
    top: 0;
    float: right;
    z-index: 10;
    margin-top: -26px;
}

.sort-none {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
}

.sort-asc {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
}

.sort-desc {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
}


.ux-table thead th {
    text-decoration: none;
    font-weight: normal;
    color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
    vertical-align: top;
}

.ux-table thead th a div {
    margin-bottom: 5px;
}

dialog {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 10px;
}

.flash-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1100;
    max-width: 50vw;
}

.table-header-no-filter{
    display: block;
    height: 2.375rem;
    min-width: 8rem;
}

.nav-link {
    color: #222222 !important;
}

.tick-column {
    color: green !important;
}

.vertical-column {
    width: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.vertical-label {
    transform: rotate(-90deg);
    bottom: 20px;
    position: relative;
}

/*.ql-editor.ql-blank::before {*/
/*    content: '' !important;*/
/*}*/

/*.fixed-header thead {*/
/*    position: sticky;*/
/*    top: 0;*/
/*    z-index: 1; !* Keep it on top of other rows *!*/
/*}*/
/*.scrollable {*/
/*    display: block;*/
/*    overflow-y: auto;*/
/*    max-height: 300px; !* Adjust based on your design needs *!*/
/*}*/

/*.table-fixed tbody {*/
/*    height: 300px;*/
/*    overflow-y: auto;*/
/*    width: 100%;*/
/*}*/

/*.table-fixed thead,*/
/*.table-fixed tbody,*/
/*.table-fixed tr,*/
/*.table-fixed td,*/
/*.table-fixed th {*/
/*    display: block;*/
/*}*/