:root {
    --font-display: 'Abril Fatface', 'Segoe UI', serif;
    --font-regular: 'Noto Sans Lao Looped', sans-serif;
    --font-code: 'Consolas', monospace;
    --primary-dark: #997500;
    --primary-strong: #F6BE00;
    --primary-weak: #f8e4a1;
    --primary-text-light: #fff9e3;
    --surface00: #eaeaea;
    --surface05: #eeeeee;
    --surface10: #f2f2f2;
    --surface16: #fafafa;
    --surface18: #fdfdfd;
    --surface20: #ffffff;
    --outline00: #ccc;
    --outline10: #777;
    --onSurface: #000000;
    --onSurface05: #000000;
    --selection-blue: #0066FF;
    --selection-blue-weak: #CCDDFF;
    --even-table-row-background: #E8E8E8;
}
@media (prefers-color-scheme: dark) {
    :root {
        --primary-dark: #997500;
        --primary-strong: #cd8e00;
        --primary-weak: #876b40;
        --primary-text-light: #fff9e3;
        --surface00: #222222;
        --surface05: #292929;
        --surface10: #333333;
        --surface16: #3c3c3c;
        --surface18: #404040;
        --surface20: #444444;
        --outline00: #444444;
        --outline10: #AAA;
        --onSurface: #ffffff;
        --onSurface05: #AAAAAA;
        --selection-blue: #0066FF;
        --selection-blue-weak: #CCDDFF;
        --even-table-row-background: #252525;
    }
    input {
        color: inherit;
    }
}
* {
    margin: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    position: relative;
    background-color: var(--surface10);
    color: var(--onSurface);
    height: 100%;
}
body.custom-dragging {
    cursor: grabbing !important;
}
body.custom-dragging * {
    cursor: inherit !important;
}
.font-display {
    font-family: var(--font-display);
}
.font-regular {
    font-family: var(--font-regular);
}
.font-code {
    font-family: var(--font-code);
}
.ta-r {
    text-align: right;
}
.flex {
    display: flex;
}
.justify-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}
button {
    font-family: var(--font-regular);
    font-size: initial;
}

@keyframes notif-enter {
    0% {
        opacity: 0;
        /* transform: translateY(2rem); */
        /* bottom: 0rem;
        margin-top: 0rem; */
    }
    100% {
        opacity: 1;
        /* bottom: 3rem;
        margin-top: 1rem; */
        /* transform: translateY(0); */
    }
}
.notifs-container {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    z-index: 50000;
}
.notif {
    pointer-events: all;
    bottom: 2rem;
    position: relative;
    box-shadow: 0 4px 20px 5px rgba(0, 0, 0, .05);
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    max-width: min(600px, calc(100vw - 2rem));
    flex-wrap: wrap;
    color: #fff;
    justify-content: space-between;
    width: 600px;
    padding-bottom: 4px;
    max-width: calc(100% - 4rem);
    animation: notif-enter .4s;
    animation-fill-mode: both;
    transition: transform .4s;
}
/* .notif:nth-last-child(1) {
    transform: translateY(0);
}
.notif:nth-last-child(2) {
    transform: translateY(calc(-2rem - 100%));
}
.notif:nth-last-child(3) {
    transform: translateY(calc(-2rem - 100%));
} */
.notif > p {
    margin: .4rem 0 .4rem 1rem;
    max-width: calc(100% - 4rem);
    word-break: break-word;
    transition: opacity .3s;
}
.notif:has(.progress) > p {
    margin: 1rem 0 .4rem 1rem;
}
.notif.notif-info {
    background-color: #488a95;
}
.notif.notif-warn {
    background-color: #df901b;
}
.notif.notif-error {
    background-color: #df3f1b;
}
.notif.notif-success {
    background-color: #1cbd64;
}
.notif .close-btn::before {
    content: 'x';
    color:rgba(0, 0, 0, .4);
}
.notif:has(.close-btn:hover) > p {
    opacity: .5;
}
.notif .close-btn {
    user-select: none;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    line-height: 1em;
    margin-left: 1rem;
    margin-right: .4rem;
    text-align: center;
    cursor: pointer;
}
.notif .break {
    flex: 100% 0 0;
    height: 0;
}
.notif .progress {
    width: 0;
    background-color: #fffa;
    height: 5px;
    /* border-radius: 0 4px 4px 0; */
    border-radius: 4px;
    margin: 4px;
}


.box-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.header-box {
    margin-bottom: 3rem;
    background-color: var(--primary-strong);
    color: #000;
    user-select: none;
    letter-spacing: 2px;
    padding: 2rem 4rem;
    clip-path: polygon(0 1rem, 100% 0, 100% calc(100% - 1rem), 0 100%);
}
.input-group {
    /* background-color: #fffC; */
    /* border: 1px solid transparent;
    border-bottom-color: #ccc;
    border-right-color: #ccc; */
    /* box-shadow: 8px 8px 10px -6px rgba(0, 0, 0, .1); */
    margin-bottom: 2rem;
    /* padding: 1rem; */
    /* padding-top: 0; */
}
.input-box {
    margin-bottom: 1rem;
    /* margin: .6rem 0; */
    background-color: var(--surface20);
    /* border: 1px solid transparent;
    border-bottom-color: #ccc;
    border-right-color: #ccc; */
    box-shadow: 8px 8px 10px -6px rgba(0, 0, 0, .1);
    color: #555;
    letter-spacing: 2px;
    /* padding: 1rem 1rem; */
    display: flex;
    flex-direction: column;
}
.input-group>.input-box:last-child {
    margin-bottom: 0;
}
.input-group>.input-box {
    box-shadow: none;
    background-color: transparent;
    border: none;
}
.input-box label {
    user-select: none;
    margin-left: .5rem;
    transition: transform .3s, opacity .3s;
}
.input-box input[type="text"], .input-box input[type="password"] {
    flex-grow: 1;
    /* background-color: transparent; */
    color: #000;
    /* border: none; */
    border: 2px solid #00000011;
    padding: .6rem;
    outline: none;
    font-size: 1.2rem;
}
.toggle-text-security {
    display: flex;
    
}
.toggle-text-security-btn {
    display: inline-flex;
    align-self: flex-end;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    margin: auto 0 auto .5rem;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
}
.toggle-text-security-btn .feather {
    width: 100%;
}
.visible .toggle-text-security-show, .toggle-text-security-hide {
    display: none;
}
.visible .toggle-text-security-hide, .toggle-text-security-show {
    display: block;
}
.input-box:has(input:placeholder-shown)>label {
    opacity: 0;
    transform: translateY(50%);
}
/* .input-box:has(input:placeholder-shown)>label {
    opacity: 0;
    transform: translateY(50%);
} */

.btn {
    position: relative;
    display: inline-block;
    background-color: var(--primary-strong);
    font-size: 1.1rem;
    padding: .5rem 1.4rem .8rem 1.4rem;
    /* color: var(--primary-text-light); */
    color: #fff;
    font-family: var(--font-regular);
    cursor: pointer;
    /* box-shadow: 8px 8px 10px -6px rgba(0, 0, 0, .1); */
    user-select: none;
    transition: background-color .2s, padding .2s;
}
.btn .feather {
    position: relative;
    height: 1.2em;
    top: .1em;
    left: .3em;
}
.btn-no-bg {
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}
.btn-no-bg:hover {
    text-decoration: underline;
}
.btn-small {
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
}
.btn-arrow:before {
    position: absolute;
    top: 50%;
    right: 2rem;
    content: '>';
    transform: translate(50%, -60%);
    color: transparent;
    transition: color .2s;
}
.btn-arrow:not(.disabled):hover {
    padding-right: 3rem;
}
.btn-arrow:not(.disabled):hover:before {
    color: inherit;
}
.btn-grow-width:not(.disabled):hover {
    padding-right: 2rem;
    padding-left: 2rem;
}
.btn-icon {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.btn.disabled {
    background-color: #999;
    cursor: not-allowed;
}


.page-container {
    padding: 1rem;
}
.page-header {
    width: calc(100% - 2rem);
    display: flex;
    margin: 0 0 1rem 0;
    align-items: center;
    flex-wrap: wrap;
}
.page-header .btn {
    white-space: nowrap;
    margin: .1rem .4rem;
}
.page-header h2 {
    font-family: var(--font-regular);
    margin-right: 2rem;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    position: relative;
    border: none;
    table-layout: auto;
    width: auto;
}
thead {
    position: sticky;
    top: 60px;
    z-index: 10;
}
th {
    position: relative;
    background-color: var(--primary-weak);
    padding: .8rem 1rem;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}
th .resizer {
    position: absolute;
    top: 0;
    right: -5px;
    width: 9px;
    height: 100%;
    background-color: rgba(0,0,0,0);
    cursor: col-resize;
    user-select: none;
    z-index: 2;
    transition: background-color .2s;
}
th:last-child .resizer {
    right: 0;
}
th .resizer:hover {
    background-color: rgba(0,0,0,.2);
    /* background-color: var(--primary-strong); */
}
th::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    height: calc(100% + 2px);
    width: calc(100% + 2px);
    background-color: var(--primary-strong);
    z-index: -1;
}
th .sortable {
    cursor: pointer;
    padding-right: 1rem;
    position: relative;
}
th.sortedBy {
    background-color: var(--selection-blue-weak);
}
th.sortedBy::before {
    background-color: var(--selection-blue);
}
th.sortedBy .sortable::after {
    content: '';
    position: absolute;
    display: inline-block;
    height: .4rem;
    top: 50%;
    width: .4rem;
    right: 0;
    border: 2px solid currentColor;
    border-top: transparent;
    border-left: transparent;
    transition: transform .3s;
    transform: translateY(-50%) rotate(225deg);
}
.sort-descending th.sortedBy .sortable::after {
    transform: translateY(-50%) rotate(45deg);
}
tbody {
    border-collapse: collapse;
}
table.selectable {
    user-select: none;
}
table.selectable > tbody > tr {
    position: relative;
    user-select: none;
}
@keyframes border-dance {
  /* 0% {
    background-position:    left top 1px,
                            right 1px bottom,
                            left bottom,
                            right 1px top 1px;
  }
  100% {
    background-position:    left 15px top 1px,
                            right 16px bottom,
                            left bottom 15px,
                            right 1px top 16px;
  } */
  0% {
    background-position:    left top,
                            right bottom,
                            left bottom,
                            right top;
  }
  100% {
    background-position:    left 15px top,
                            right 15px bottom,
                            left bottom 15px,
                            right top 15px;
  }
}
table.selectable > tbody > tr:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    /* border: 2px dashed transparent; */
    box-sizing: border-box;
    background-color: transparent;
    pointer-events: none;
}
table.selectable > tbody > tr.selected {
    background-color: var(--selection-blue-weak);
}
table.selectable > tbody > tr.selected:after {
    /* border-color: var(--primary-strong); */
    background-image:   linear-gradient(90deg, var(--selection-blue) 50%, transparent 50%), 
                        linear-gradient(90deg, var(--selection-blue) 50%, transparent 50%),
                        linear-gradient( 0deg, var(--selection-blue) 50%, transparent 50%),
                        linear-gradient( 0deg, var(--selection-blue) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right   top;
    animation: border-dance 1s infinite linear;
}
table.selectable > tbody > tr > td:hover {
    background-color: #fffa;
}
table.row-clickable > tbody > tr {
    cursor: pointer;
}
table.row-clickable > tbody > tr:hover {
    background-color: var(--selection-blue-weak);
}
td {
    padding: .5rem 1rem;
    border: 1px solid #aaa;
    font-size: .9em;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 300px;
}
/* td:not(:first-child) {
    max-width: 0;
} */
tr:nth-child(even) {
    background-color: var(--even-table-row-background);
}
.has-default-value {
    opacity: .5;
}
.data-page-selector {
    margin: .5rem 1rem;
    display: flex;
}
input[type="number"] {
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 1.3em;
    border-bottom: 1px solid #0001;
    text-align: center;
}
.data-page-selector > div {
    position: relative;
    font-size: 1.3em;
    width: 1em;
    height: 1.3em;
    background-color: #0001;
    margin: 0 .2rem;
    border-radius: 6px;
    cursor: pointer;
}
/* .data-page-selector > div */
.data-page-selector > div::before {
    position: absolute;
    top: -.3em;
    left: 50%;
    transform: translateX(-50%);
}
.data-page-selector > div.prev::before {
    content: '\2039';
}
.data-page-selector > div.first::before {
    content: '\00ab';
}
.data-page-selector > div.next::before {
    content: '\203a';
}
.data-page-selector > div.last::before {
    content: '\00bb';
}
.drawer {
    overflow: hidden;
    opacity: 1;
    transition: opacity .2s .2s;
}
.drawer[data-drawer-closed] {
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s 0s;
}
.drawer > div {
    overflow: auto;
}
.drawer > div > div {
    width: max-content;
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    background: var(--surface16);
    /* box-shadow: 5px 0 5px -5px #0005 inset; */
}
.table-filter-input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.table-filter-input.inactive>*:not(.square-toggle-btn) {
    opacity: .5;
    pointer-events: none;
    user-select: none;
}
.filter-name {
    user-select: none;
}
.table-filter-input>* {
    margin: .2rem 1rem .2rem 0;
}
.table-filter-input >* {
    display: inline-block;
}
.table-filter-input select {
    outline: none;
    padding: .2rem;
    border: 1px solid #ccc;
}
.square-toggle-btn {
    position: relative;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    cursor: pointer;
}
.square-toggle-btn::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #000;
    transform: scale(1);
    transition: transform .2s;
}
.inactive .square-toggle-btn::before {
    transform: scale(0);
}





.card-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.card-grid > .card {
    position: relative;
    display: flex;
    text-align: center;
    box-shadow: 0 0 20px -10px rgba(0, 0, 0, .1);
    background-color: #fff;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card-title {
    font-size: 1.2em;
    margin: 0 1rem;
    color: rgba(0, 0, 0, .4);
    font-weight: 600;
}
.card-btn {
    cursor: pointer;
    user-select: none;
}
.hover-color {
    transition: background-color .2s;
}
.card.hover-color:hover {
    background-color: var(--primary-strong);
}
.hover-up {
    transition: transform .2s;
    transform: translateY(0);
}
.hover-up:hover {
    transform: translateY(-10px);
}
.hover-scale {
    transition: transform .2s;
    transform: scale(1);
}
.hover-scale:hover {
    transform: scale(1.1);
}


.form {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}
.form-control {
    display: block;
    border-radius: 0;
    outline: none;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-clip: padding-box;
    border: 2px solid #ced4da;
    background-color: #ffffff;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
.form-control:focus {
    border-color: var(--primary-strong);
    background-color: var(--primary-text-light);
}
.form-control.has-error {
    border-color: #ce747a;
    background-color: #ffd0d0;
}
.form-control:focus~label {
    color: var(--primary-dark);
}
.form-control~label {
    order: -1;
    transition: transform .3s, opacity .3s, color .3s;
}
.form-control:placeholder-shown~label {
    opacity: 0;
    transform: translateY(50%);
    pointer-events: none;
}
.input-id:not(:placeholder-shown) {
    font-family: var(--font-code);
}
.invalid-feedback {
    display: block;
    overflow: hidden;
    height: fit-content;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
    transition: height .2s;
}
.invalid-feedback:empty {
    height: 0;
}
.form .btn-primary {
    margin: 2rem auto;
}

.col-6 {
    flex-basis: calc(50% - 1rem);
    margin: 0 .5rem;
}
@keyframes loadSpinnerAnim {
    0% {
        transform: translateX(-50%) scale(100%) rotate(120deg);
    }
    50% {
        transform: translateX(-50%) scale(80%) rotate(600deg);
    }
    100% {
        transform: translateX(-50%) scale(100%) rotate(1200deg);
    }
}
.spinnerPositioner {
    position: relative;
    width: 0;
    height: 0;
}
.loadSpinner {
    position: relative;
    width: 0;
    height: 0;
}
.loadSpinner::before {
    content: '';
    animation: 2s ease-in-out 0s infinite normal both running loadSpinnerAnim;
    pointer-events: none;
    position: absolute;
    width: 80px;
    aspect-ratio: 1;
    display: block;
    top: 100px;
    /* margin: 100px auto; */
    border: 10px solid var(--primary-strong);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}
.spinner-hidden {
    display: none;
}






.btn-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
}
.grid-btn {
    padding: 20px 30px;
    background-color: #ffffff;
    border: solid 2px #eee;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    margin: 1rem;
}
.grid-btn:disabled {
    color: #888;
    cursor: initial;
}
.grid-btn:not(:disabled):hover, .grid-btn:not(:disabled):focus {
    background-color: var(--primary-weak);
    color: var(--primary-dark);
    border-color: var(--primary-strong);
}
.grid-btn:focus {
    border-style: dashed;
    outline: none;
}

ul.statuslist {
    list-style-type: none;
    padding: 1rem;
    margin: 0 1rem;
    background-color: #fff;
    border: solid 2px #eee;
    font-family: var(--font-code);
}
ul.statuslist li span {
    color: #777;
    float: right;
    margin-left: 1rem;
}


@keyframes opacityZero {
    0% {
        opacity: 0;
    }
}
.btn_low_profile {
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    color: #888;
    align-self: start;
    opacity: 1;
    animation: opacityZero .5s .3s;
    animation-fill-mode: both;
}
@keyframes slideIn {
    0% {
        transform: translate(10px, 5px);
    }
}
.btn_low_profile > svg {
    transform: translate(0, 5px);
    animation: slideIn .5s .3s;
    animation-fill-mode: both;
}
.driverCompaniesList {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    max-width: 700px;
}
.driverCompaniesList > li {
    margin: 1rem 0;
}
.driverCompaniesList > li > div {
    display: flex;
    flex-direction: row;
    background-color: var(--surface20);
    border: 1px solid var(--surface00);
    padding: .6rem;
    user-select: none;
    cursor: pointer;
    position: relative;
}
.driverCompaniesList > li.drop-hover:not(:has(.elementDragPlaceholder)) > div::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 100%;
    height: 100%;
    border-style: dashed;
    border-color: var(--selection-blue);
    border-width: 4px;
    background-color: transparent;
    pointer-events: none;
}

.driverCompaniesList .company_name {
    margin: .2rem 1rem .2rem .5rem;
}
.driverCompaniesList .driverCompanyBtn {
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    margin: 0 .4rem;
    text-align: center;
    cursor: pointer;
}
.driverCompaniesList .cog {
    color: #777;
    position: relative;
    transition: color .2s;
}
.driverCompaniesList .cog > svg {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.driverCompaniesList .cog:hover {
    color: #37F;
}
.driverCompaniesList .add {
    background-color: #4C4;
    color: #DFE;
    font-weight: 600;
    font-size: 1.4rem;
    position: relative;
    transition: background-color .2s, color .2s;
}
.driverCompaniesList .add::before {
    content: '+';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    position: absolute;
}
.driverCompaniesList .add:hover {
    background-color: #7D7;
    color: #fff;
}
.driverCompaniesList .driverCompanyId {
    color: #999;
    font-family: var(--font-code);
    align-self: center;
    margin-left: auto;
}
.driverCompaniesList > .addNew > div {
    /* background-color: #4A5; */
    /* background-color: #4C4; */
    background-color: #4C4;
    text-align: center;
    color: #DFE;
    border-radius: 10px;
    padding: .4rem .6rem .55rem .6rem;
    border: none;
    width: fit-content;
    margin: 0 auto;
    transition: background-color .2s, color .2s;
}
.driverCompaniesList > .addNew > div:hover {
    color: #FFF;
    background-color: #7D7;
}
.driverCompaniesList > .addNew > div > div {
    padding: 0 1rem;
    margin: 0;
}
.driverCompaniesList > li > div > .toggle_arrow {
    font-family: var(--font-code);
    height: .8rem;
    margin-left: .3rem;
    align-self: center;
    /* transform: rotate(180deg); */
    transform: scaleY(-1);
    transition: transform .2s;
}
.driverCompaniesList > li.open > div > .toggle_arrow {
    transform: scaleY(1);
}
.driverCompaniesList > li > ul {
    display: none;
    position: relative;
    top: -1px;
    margin: 0 1rem;
    padding: .5rem 0;
    list-style-type: none;
    background-color: var(--surface18);
    border-radius: 0 0 6px 6px;
    border: 1px solid var(--surface00);
    /* border-top: none; */
    border-color: var(--outline00);
    border-top-color: var(--surface00);
    /* transition: padding-bottom .2s; */
}
.driverCompaniesList > li.open > ul {
    display: block;
}
.driverCompaniesList > li.drop-hover:not(:has(.elementDragPlaceholder)) > ul {
    /* padding-bottom: 4rem; */
}
.driverCompaniesListDriverItem {
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem;
    background-color: var(--surface20);
    transition: background-color .2s;
    user-select: none;
    flex-wrap: wrap;
    backdrop-filter: blur(10px);
    transform: scale(1.1);
}
.driverCompaniesList .driverCompaniesListDriverItem {
    backdrop-filter: initial;
    transform: scale(1);
    cursor: grab;
}
.driverCompaniesListDriverItem.being-dragged-custom {
    background-color: #5599FF55;
}
.driverCompaniesListDriverItem:not(:first-child) {
    border-top: 1px solid #00000014;
}
body:not(.custom-dragging) .driverCompaniesListDriverItem:hover {
    /* background-color: #C5DCFE; */
    background-color: #5599FF55;
}
.driverCompaniesListDriverItem > :first-child {
    margin-right: 1rem;
}
.two-cols {
    display: flex;
    align-items: start;
}
@media screen and (max-width: 600px) {
    .two-cols {
        flex-direction: column;
    }
}
.two-cols >* {
    flex: 1 1;
}
.list-container {
    margin: 1rem;
    background-color: var(--surface16);
    min-width: 200px;
    max-width: 90%;
    border-radius: 6px;
    padding-bottom: 1rem;
    --selectedBackground: #F88;
    --selectedBorder: #C55;
}
.list-container.addScalesList .list-item:not(.removing) {
    --selectedBackground: #8C8;
    --selectedBorder: #6A6;
    --listItemBackground: #EEE;
    --listItemBorder: #CCC;
}
.list-container > .list-header {
    margin: .5rem 1rem 1rem;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    --svgBackground: var(--selection-blue);
    --svgColor: var(--selection-blue);
}
.list-container > .list-header svg line {
    transition: transform .2s;
}
.list-container > .list-header svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.list-container.addScalesList:has(.selected) > .list-header {
    --svgBackground: #1cbd64;
    --svgColor: #1cbd64;
}
.list-container svg .line-1, .list-container svg .line-2 {
    transform-origin: center;
}
.list-container.addScalesList:not(:has(.selected)) svg .line-1 {
    transform: translate(-3px, -3px) rotate(45deg);
}
.list-container.addScalesList:not(:has(.selected)) svg .line-2 {
    /* transform: translate(-4px, -4px) rotate(-45deg); */
    transform: translate(-3px, 3px) rotate(-45deg);
}
.list-container:not(.addScalesList):has(.selected) > .list-header {
    --svgBackground: #df3f1b;
    --svgColor: #df3f1b;
}
/* .list-container:not(.addScalesList):has(.selected) svg .line-1 {
    transform: rotate(90deg);
}
.list-container:not(.addScalesList):has(.selected) svg .line-2 {
    transform: rotate(-90deg);
} */
.list-container:not(.addScalesList):has(.selected) svg .line-1 {
    transform: scaleY(0);
}
.list-container:not(.addScalesList):has(.selected) svg .line-2 {
    transform: scaleY(0);
}
.list-container > .list-header > div:has(svg) {
    cursor: pointer;
    position: relative;
    user-select: none;
    background-color: #fff0;
    color: var(--svgColor);
    padding: .3rem .6rem;
    width: 3rem;
    height: 3rem;
    transition: background-color .2s, color .2s;
}
.list-container > .list-header > div:has(svg):hover {
    background-color: var(--svgBackground);
    color: #ffffff;
    transition: background-color .4s, color .2s;
}
.list-container > .list-header > div:has(svg)::before {
    content: '';
    width: 100%;
    height: 100%;
    --lineWidth: 3px;
    clip-path: polygon(
        0 0, 0 100%, 100% 100%, 100% 0,
        0 0,
        var(--lineWidth) var(--lineWidth), calc(100% - var(--lineWidth)) var(--lineWidth), calc(100% - var(--lineWidth)) calc(100% - var(--lineWidth)), var(--lineWidth) calc(100% - var(--lineWidth)),
        var(--lineWidth) var(--lineWidth)
    );
    background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) calc(var(--mouse-track-relative-y) * 100%), #ffff, #ff00 50px);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity .2s;
}
.list-container > .list-header > div:has(svg)::after {
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) calc(var(--mouse-track-relative-y) * 100%), #fff9, #fff0 50px);
    /* background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) 50%, #0001, #0000 50px); */
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.list-container > .list-header > div:has(svg):hover::before, .list-container > .list-header > div:has(svg):hover::after {
    opacity: 1;
}
.list-container > .list {
    overflow: hidden;
    position: relative;
}
.list-container > .list > .list-item {
    position: relative;
    padding: .7rem 1rem;
    /* margin: .5rem 0; */
    user-select: none;
    cursor: pointer;
    width: 100%;
    background: var(--listItemBackground);
    transition: background .2s;
}
.list-container > .list > .list-item::before {
    content: '';
    width: 100%;
    height: 100%;
    --lineWidth: 2px;
    clip-path: polygon(
        0 0, 0 100%, 100% 100%, 100% 0,
        0 0,
        var(--lineWidth) var(--lineWidth), calc(100% - var(--lineWidth)) var(--lineWidth), calc(100% - var(--lineWidth)) calc(100% - var(--lineWidth)), var(--lineWidth) calc(100% - var(--lineWidth)),
        var(--lineWidth) var(--lineWidth)
    );
    /* background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) calc(var(--mouse-track-relative-y) * 100%), #0004, #0000 50px); */
    background: var(--listItemBorder) radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) 50%, #ffff, #fff0 50px);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* transition: background .2s; */
    opacity: 0;
    transition: opacity .2s;
}
.list-container > .list > .list-item::after {
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) 50%, #fff5, #fff0 50px);
    /* background: radial-gradient(circle at calc(var(--mouse-track-relative-x) * 100%) 50%, #0001, #0000 50px); */
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
/* .list-container > .list > .list-item::before, .list-container > .list > .list-item::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #0000;
    position: absolute;
    left: 0;
    pointer-events: none;
    transition: background .2s;
}
.list-container > .list > .list-item::before {
    top: 0;
}
.list-container > .list > .list-item::after {
    bottom: 0;
}
.list-container > .list > .list-item:hover::before, .list-container > .list > .list-item:hover::after {
    background-image: linear-gradient(to right, #0000, #0005 calc(var(--mouse-track-relative-x) * 100%), #0000);
} */
.list-container > .list > .list-item:hover::before, .list-container > .list > .list-item:hover::after {
    opacity: 1;
}
.list-container > .list > .list-item:hover {
    --listItemBackground: #cdf;
    --listItemBorder: #abc;
}
.list-container > .list > .list-item.selected {
    --listItemBackground: var(--selectedBackground) !important;
    --listItemBorder: var(--selectedBorder) !important;
}
.list-container.addScalesList > .list > .list-item.selected::before, .list-container > .list > .list-item::before {
    opacity: 1;
}


.windowspace {
    /* --jse-theme-color: var(--primary-dark);
    --jse-theme-color-highlight: var(--primary-strong); */
    --jse-theme-color: #888;
    --jse-theme-color-highlight: #AAA;
    --jse-main-border: none;
}
.elementDragPlaceholder {
    position: relative;
    pointer-events: none;
}
.elementDragSpaceholder {
    position: relative;
    pointer-events: none;
}
.being-dragged-custom {
    cursor: grabbing;
    pointer-events: none !important;
}

.jse-main {
    /* Default colors:
    --jse-key-color: #1a1a1a;
    --jse-value-color-number: #ee422e;
    --jse-value-color-boolean: #ff8c00;
    --jse-value-color-string: #008000;
    --jse-value-color-null: #004ed0;
    */
    /*
    
    "#9966b8",
    "#2d9574",
    "#655370",

    "#fbf8ef"
    */
    --jse-key-color: #9966b8;
    --jse-value-color-number: #ee422e;
    --jse-value-color-boolean: #ff8c00;
    --jse-value-color-string: #2d9574;
    --jse-value-color-null: #004ed0;
    --jse-delimiter-color: #655370;
}