/************************************
 VARIABLES
************************************/
:root {
    --body_dark: #333;
    --body_light: #ddd;
    --nav_dark: rgba(70, 70, 70, 0.8);
    --nav_light: rgba(255, 255, 255, 0.8);
    --element_dark: #444;
    --element_light: #f1f1f1;
    --text_dark: #fff;
    --text_light: #333;
    --highlight_light: #ddd;
    --highlight_dark: #777;
    --error: #671214;
    --warning: #F8820C;
    --success: #368643;
    --error_highlight: #a1181a;
    --error_clear: rgba(103, 18, 20, 0.7);
    --warning_clear: rgba(248, 130, 12, 0.7);
    --success_clear: rgba(54, 134, 67, 0.7);
    --duotone_grey: #a9a9a9;
}

/************************************
 SVG STYLES
************************************/
svg path.no_img{
    fill:var(--system);
}

svg.loader_img stop {
    stop-color:var(--system_text);
}

svg.loader_img .loader_img__circle {
    stroke:var(--system_text);
}

/************************************
 ANIMATION KEYFRAMES
************************************/
@keyframes popupIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popupOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/************************************
 PAGE
************************************/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 1em;
    line-height: 1.1em;
    font-family: 'Roboto', sans-serif;
    accent-color: var(--system);
    text-decoration: none;
    color: var(--text_light);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    cursor: pointer;
}

.content {
    flex-grow: 1;
    padding: 65px 20px 20px 60px;
    position: relative;
}

.content--fixed {
    padding: 65px 20px 20px 220px;
}

.content--blank {
    padding: 65px 20px 20px 20px;
}

.content__sidebar {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.content__msg_box {
    position: absolute;
    top: 53px;
    left: 50px;
    padding: 10px 20px;
    width: calc(100% - 60px);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    align-items: center;
    color: #fff !important;
    text-align: center;
    z-index: 15;
}

.content__msg_box i {
    margin-right: 5px;
    font-size: 1.1em;
    color: #fff !important;
}

.content__msg_box.--success {
    border: 1px var(--success) solid;
    background: var(--success_clear);
}

.content__msg_box.--error {
    border: 1px var(--error) solid;
    background: var(--error_clear);
}

.content__msg_box.--warning {
    border: 1px var(--warning) solid;
    background: var(--warning_clear);
}

.content--fixed .content__msg_box, .content__msg_box:has(+ .content--fixed) {
    left: 210px !important;
    width: calc(100% - 220px) !important;
}

.content--blank .content__msg_box, .content__msg_box:has(+ .content--blank) {
    left: 10px !important;
    width: calc(100% - 20px) !important;
}

.content__msg_box.--home {
    left: 10px;
    width: calc(100% - 20px);
}

body.light * {
    color: var(--text_light);
}

body.dark * {
    color: var(--text_dark);
}

body.light {
    background-color: var(--body_light);
    color: var(--text_light);
}

body.dark {
    background-color: var(--body_dark);
    color: var(--text_dark);
}

/************************************
 GLOBAL ELEMENTS
************************************/
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([name=search]) {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border-radius: 5px;
    min-height: 30px;
}

input[type=date] {
    padding: 4px 5px !important;
}

input[type=time] {
    padding: 3px 5px !important;
}

select {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border-radius: 5px;
    min-height: 30px;
}

textarea {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border-radius: 5px;
    height: 80px;
    resize: vertical;
}

input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible, select:focus-visible, textarea:focus-visible {
    outline-offset: -1px;
}

body.light input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible, body.light select:focus-visible, body.light textarea:focus-visible {
    outline: 1px solid var(--element_dark);
}

body.dark input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible, body.dark select:focus-visible, body.dark textarea:focus-visible {
    outline: 1px solid var(--element_light);
}

input:not([type=checkbox]):not([type=radio]):not([type=file]).--invalid, select.--invalid, textarea.--invalid {
    background: var(--error_clear) !important;
    border: 1px var(--error) solid !important;
    color: #fff;
}

input:not([type=checkbox]):not([type=radio]):not([type=file]).--invalid::placeholder, select.--invalid::placeholder, textarea.--invalid::placeholder {
    color: #fff;
    opacity: 0.5;
}

input.--selectable {
    border-radius: 0 5px 5px 0 !important;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.popup {
    pointer-events: none;
    opacity: 0;
    animation: popupOut 0.15s ease forwards;
}

.popup--active {
    pointer-events: auto;
    opacity: 1;
    animation: popupIn 0.3s ease forwards;
}

i.--red {
    color: hsl(from var(--error) h s 45%);
}

i.--orange {
    color: hsl(from var(--warning) h s 40%);
}

i.--green {
    color: hsl(from var(--success) h s 45%);
}

.country_select {
    position: relative;
}

.country_select__options {
    display: none;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    width: 100%;
    background: #555;
    border: 1px var(--highlight_dark) solid;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    margin-top: 2px;
    cursor: pointer;
    z-index: 2;
}

.country_select__options.--show {
    display: flex;
}

.country_select--selected {
    display: inline-flex;
    align-content: center;
    width: 100%;
    padding: 6px 5px;
    margin-top: 5px;
    border-radius: 5px 0 0 5px;
    background: #fff;
    cursor: pointer;
}

.country_select--selected .fa-sort-down {
    position: relative;
    bottom: 3px;
    margin-left: 3px;
    opacity: 0.6;
}

.password_complexity__requirements ul {
    list-style-type: disc;
    padding-left: 20px;
}

.reg_vin_complete {
    font-size: 0.7em;
    background: var(--error);
    padding: 4px 5px;
    border-radius: 5px;
    color: #fff !important;
}

.reg_vin_complete i {
    margin-right: 2px;
    color: #fff !important;
}

body.light .country_select--selected {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .country_select--selected {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

/************************************
 BUTTONS AND CHECKBOXES
************************************/
.action_btn {
    background: var(--system);
    color: var(--system_text) !important;
    border-radius: 5px;
    padding: 5px 13px;
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-top: 5px;
    line-height: 1.2em;
    position:relative;
}

.action_btn.--no_margin {
    margin-top: 0;
}

.action_btn:hover {
    background: hsl(from var(--system) h s 45%);
}

.action_btn i {
    color: var(--system_text) !important;
}

.action_btn.--submitting {
    text-indent: 21px;
}

.action_btn.--submitting svg {
    width: 21px;
    height: 21px;
    position: absolute;
    left: 9px;
    top: 3px;
}

.submit_btn {
    position: relative;
}

.submit_btn.--submitting {
    text-indent: 21px;
}

.submit_btn.--submitting svg {
    width: 21px;
    height: 21px;
    position: absolute;
    left: 9px;
    top: 3px;
}

.checkbox_container {
    display: flex;
    gap: 5px;
}

.checkbox_container--inline {
    display: inline-flex;
}

.checkbox_container input[type=checkbox] {
    display: none;
}

.checkbox_container label {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
}

.checkbox_container label::before {
    content: '';
    cursor: pointer;
    border-radius: 18px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: var(--duotone_grey);
}

.checkbox_container label::after {
    border-radius: 50%;
    position: absolute;
    content: '';
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: var(--text_dark);
}

.checkbox_container input[type="checkbox"]:checked ~ label::before {
    background-color: var(--system);
}

.checkbox_container input[type="checkbox"]:checked ~ label::after {
    transform: translateX(12px);
}

.checkbox_container span {
    align-self: center;
    font-size: 0.9em;
    margin-right: 10px;
}

body.light input:not([type=checkbox]):not([type=radio]):not([type=file]):not([name=search]) {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark input:not([type=checkbox]):not([type=radio]):not([type=file]):not([name=search]) {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light select {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark select {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light textarea {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark textarea {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

/************************************
 GLOBAL MODIFIERS
************************************/
.--system_bg {
    background-color: var(--system) !important;
    color: var(--system_text) !important;
}
.--green_bg {
    background-color: var(--success) !important;
    color: #fff !important;
}

.--orange_bg {
    background-color: var(--warning) !important;
    color: #fff !important;
}

.--red_bg {
    background-color: var(--error) !important;
    color: #fff !important;
}

.--light_red_bg {
    background-color: #8e1a1c;
}

.--purple_bg {
    background-color: #6c2c8d;
}

.--blue_bg {
    background-color: #2b3c95;
}

.--white_colour {
    color: #fff !important;
}

.--green_colour {
    color: var(--success) !important;
}

.--orange_colour {
    color: var(--warning) !important;
}

.--red_colour {
    color: hsl(from var(--error) h s 45%) !important;
}

.--red_input {
    background: var(--error) !important;
    color: #fff !important;
    border-color: hsl(from var(--error) h s 35%) !important;
}

.--red_btn {
    background: var(--error) !important;
    color: #fff !important;
}

.--red_btn i {
    color: #fff !important;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.--hide {
    display: none !important;
}

.--clear {
    opacity: 0 !important;
    pointer-events: none !important;
}

/************************************
 OVERVIEW TABLES
************************************/
.overview_table__tabs {
    display: flex;
    gap: 5px;
}

.overview_table__tabs a {
    padding: 10px 15px 5px 15px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    display: inline-block;
    opacity: 0.6;
}

.overview_table__tabs a:hover {
    opacity: 0.8;
}

.overview_table__tabs a.--selected {
    opacity: 1;
}

.overview_table_container {
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
}

.overview_table_container.--space {
    margin-bottom: 10px;
}

.overview_table_container__tabbed .overview_table_container {
    border-radius: 0 10px 10px 10px;
    display: none;
}

.overview_table_container__tabbed .overview_table_container.--show {
    display: block;
}

.overview_table_container__search {
    display: flex;
    justify-content: end;
    gap: 5px;
    margin-bottom: 10px;
    padding: 0 10px;
}

.overview_table_container_search__text {
    align-content: center;
}

.overview_table_container_search__filter {
    display: flex;
    gap: 5px;
}

.overview_table_container_search__filter a {
    background: var(--system);
    color: var(--system_text);
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    align-content: center;
}

.overview_table_container_search__filter a.--selected {
    background: hsl(from var(--system) h s 45%);
}

.overview_table_container_search__filter a:hover {
    background: hsl(from var(--system) h s 45%);
}

.overview_table_container_search__filter a i {
    margin-right: 2px;
    color: var(--system_text);
}

.overview_table_container_search__input {
    padding: 3px 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.overview_table_container_search__input input {
    border: 0 !important;
    outline: 0 !important;
    width: 200px;
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

.overview_filter__multi {
    display: flex;
}

.overview_filter__multi select {
    margin: 0 !important;
    border-radius: 5px 0 0 5px !important;
}

.overview_filter__multi a {
    flex-basis: fit-content;
    margin-top: 0 !important;
    border-radius: 0 5px 5px 0 !important;
}

.overview_filter__multi a:first-of-type {
    border-radius: 0 !important;
    margin-right:1px;
}

.overview_filter_multi__item {
    display: flex;
    margin-top: 5px;
}

.overview_filter_multi__item > p {
    flex-grow: 1;
    margin-bottom: 0 !important;
    align-content: center;
    padding: 0 10px !important;
    border-radius: 5px 0 0 5px;
}

.overview_filter_multi__remove {
    flex-basis: fit-content;
    margin-top: 0 !important;
    border-radius: 0 5px 5px 0 !important;
    background: var(--error) !important;
    color: #fff !important;
}

.overview_table_container__header {
    padding: 0 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overview_table_container__header > a {
    background: var(--system);
    color: var(--system_text);
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.overview_table__table {
    width: 100%;
    overflow-x: auto;
    font-size: 0.9em;
}

.overview_table__table::-webkit-scrollbar {
    height: 8px;
}

.overview_table__table::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin:10px 0;
}

.overview_table__table::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.overview_table__table::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.overview_table table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.overview_table thead {
    color: var(--system_text);
}

.overview_table thead th, .overview_table tbody td {
    text-align: left;
    padding: 5px 10px;
}

.overview_table thead tr.overview_table__blank th {
    padding: 12px 10px !important;
}

.overview_table thead th a {
    display: inline-flex;
    gap: 3px;
    align-content: center;
}

.overview_table thead th a i {
    align-content: center;
}

.overview_table tbody tr.--red {
    background-color: hsl(from var(--error) h s 20%);
}

.overview_table tbody tr.--orange {
    background-color: hsl(from var(--warning) h s 20%);
}

.overview_table tbody tr.--green {
    background-color: hsl(from var(--success) h s 30%);
}

.overview_table tbody tr.--blue {
    background-color: #2b3c95;
}

.overview_table tbody tr.--red:hover {
    background-color: hsl(from var(--error) h s 15%) !important;
}

.overview_table tbody tr.--orange:hover {
    background-color: hsl(from var(--warning) h s 15%) !important;
}

.overview_table tbody tr.--green:hover {
    background-color: hsl(from var(--success) h s 25%) !important;
}

.overview_table tbody tr.--blue:hover {
    background-color: #21307a !important;
}

.overview_table tbody tr.--red td, .overview_table tbody tr.--green td, .overview_table tbody tr.--red td i:not(.--red,.--green,.--orange), .overview_table tbody tr.--green td i:not(.--red,.--green,.--orange), .overview_table tbody tr.--red td a, .overview_table tbody tr.--green td a {
    color: #fff;
}

.overview_table tr td > span {
    display: none;
}

.overview_table__copy {
    position: relative;
    cursor: pointer;
    padding: 5px 10px 5px 20px !important;
}

.overview_table__copy i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.overview_table__copy.--success i {
    color: var(--success) !important;
}

.overview_table__copy.--error i {
    color: var(--success) !important;
}

.overview_table__image {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px var(--body_light) solid;
    object-fit: cover;
    object-position: center;
}

.overview_table__image_non {
    display: block;
    width: 50px;
    height: 50px;
}

.overview_img_detail {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    position: absolute;
    top: -9999px;
    left: -9999px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 200;
}

.overview_table__highlight {
    color: #fff !important;
    border-radius: 5px;
    padding: 7px 10px;
}

.overview_table__highlight > span {
    display: none;
}

.overview_table__links {
    width: 1px;
    white-space: nowrap;
}

.overview_table__links > div {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 5px;
}

.overview_table__links > div > div {
    width: 21px;
}

.overview_table__links > div i {
    font-size: 1.2em;
}

.overview_table__links > div i:hover {
    filter: brightness(0.8);
}

/* Actions button — hidden on desktop, visible on mobile */
.overview_table_links__actions_btn {
    display: none;
}

.overview_table_links__edit_row.--submitting {
    position: relative;
}

.overview_table_links__edit_row.--submitting i {
    opacity: 0;
}

.overview_table_links__edit_row.--submitting svg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overview_table_links__more {
    position: relative;
}

.overview_table_links__more > div {
    position: absolute;
    top: 20px;
    right: 0;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    padding: 5px;
    display: none;
}

.overview_table_links__more > div.--show {
    display: block;
}

.overview_table_links__more > div a {
    display: block;
    padding: 5px;
    white-space: nowrap;
    text-align: left;
}

.overview_table_links__more > div a::after {
    content: attr(title);
    margin-left: 3px;
}

.overview_table__dropdown {
    display: table-row;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    visibility: visible;
    transition: 0.01s visibility ease-out;
}

.overview_table__dropdown:not(.--show) {
    border-bottom: 0 !important;
    visibility: hidden;
    transition-delay: 0.4s;
}

.overview_table__dropdown > td {
    padding: 0 !important;
}

.overview_table__dropdown > td > div {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease-out;
}

.overview_table__dropdown.--show > td > div {
    grid-template-rows: 1fr;
}

.overview_table__dropdown > td > div > div {
    overflow: hidden;
}

.overview_table__dropdown > td > div > div > table {
    margin: 10px;
    width: calc(100% - 20px);
}

.overview_table__dropdown tr:not(.overview_table__header):last-of-type {
    border: 0 !important;
}

.overview_table__loader td div {
    width: 100%;
    border-radius: 5px;
    height: 20px;
}

@keyframes loader {
    to {
        background-position: 100% 0;
    }
}

.overview_table__pagination {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0 15px;
    gap: 10px;
}

.overview_table_pagination__count {
    flex-grow: 1;
}

.overview_table_pagination__links {
    justify-self: end;
    display: flex;
    gap: 5px;
}

.overview_table_pagination__links a {
    border-radius: 5px;
    padding: 5px 7px;
    cursor: pointer;
    display: inline-block;
}

.overview_table__extra_info {
    display: none;
}

.overview_table__multi_actions {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 37px;
    background: var(--system);
}

.overview_table__multi_actions.--show {
    display: block;
}

.overview_table__cell_info {
    display: inline;
    position: relative;
}

.overview_table__cell_info i {
    cursor: pointer;
}

.overview_table__cell_info div {
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 200px;
    padding: 10px;
    font-size: 0.8em;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.overview_table__cell_inline {
    display: flex;
    gap: 5px;
    align-items: center;
}

.overview_table__cell_input {
    margin-top: 0 !important;
}

.overview_table__cell_btn {
    background: var(--system);
    color: var(--system_text);
    padding: 8px 6px;
    border-radius: 5px;
    display: inline-flex;
    text-wrap: nowrap;
    cursor: pointer;
    align-items: center;
}

.overview_table__cell_btn i {
    margin-right: 2px;
}

.overview_table__cell_btn svg {
    height: 16px;
    margin-right: 3px;
}

.overview__sticky_form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 20;
}

.overview__sticky_form > form {
    display: flex;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
    align-items: center;
    gap: 10px;
}

.overview__sticky_form > form select {
    max-width: 200px;
    margin-top: 0 !important;
}

.overview__sticky_form > form button {
    margin-top: 0 !important;
}

.overview__sticky_form > form a {
    border-radius: 5px;
    padding: 5px 13px;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    line-height: 1.2em;
}

.multi_actions__container {
    display: flex;
    gap: 5px;
    align-content: center;
    flex-wrap: wrap;
    height: 100%;
    padding-left: 46px;
}

.content--fixed .multi_actions__container {
    padding-left: 204px;
}

.multi_actions__container > button, .multi_actions__container > a, .multi_actions__container > form > button, .multi_actions__container > form > a {
    background: var(--system_text);
    color: var(--system);
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    line-height: 1.2em;
}

.multi_actions__container > button i, .multi_actions__container > a i, .multi_actions__container > form > button i, .multi_actions__container > form > a i {
    color: var(--system);
}

.multi_actions__container > select {
    padding: 5px 7px;
    border-radius: 5px;
    background: var(--system_text) !important;
    color: var(--system) !important;
    width: auto;
    border: 0 !important;
    margin-top: 0 !important;
}

.multi_actions__container > select option {
    color: var(--system) !important;
}

.overview_table__capricorn {
    height: 16px;
    vertical-align: top;
}

.coloured_select:has(option.--red_bg:checked) {
    background-color: var(--error) !important;
}

.coloured_select:has(option.--green_bg:checked) {
    background-color: var(--success) !important;
}

.coloured_select {
    color: #fff !important;
}

.coloured_select option {
    color: #fff !important;
}

body.light .overview_table__tabs a {
    background: var(--element_light);
}

body.dark .overview_table__tabs a {
    background: var(--element_dark);
}

body.light .overview_table_container {
    background: var(--element_light);
}

body.dark .overview_table_container {
    background: var(--element_dark);
}

body.light .overview_table_container_search__input {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .overview_table_container_search__input {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .overview_table_container_search__input input {
    background: #fff;
}

body.dark .overview_table_container_search__input input {
    background: #555;
}

body.light .overview_filter_multi__item > p {
    border: 1px var(--highlight_light) solid;
}

body.dark .overview_filter_multi__item > p {
    border: 1px var(--highlight_dark) solid;
}

body.light .overview_table thead tr {
    background: var(--body_light);
}

body.dark .overview_table thead tr {
    background: var(--body_dark);
}

body.light .overview_table tbody tr {
    border-bottom: 1px var(--body_light) solid;
}

body.dark .overview_table tbody tr {
    border-bottom: 1px var(--body_dark) solid;
}

body.light .overview_table tbody > tr:not(.overview_table__dropdown):hover {
    background: hsl(from var(--highlight_light) h s 92%);
}

body.dark .overview_table tbody > tr:not(.overview_table__dropdown):hover {
    background: hsl(from var(--highlight_dark) h s 30%);
}

body.light .overview_table_links__more > div {
    background: var(--nav_light);
}

body.dark .overview_table_links__more > div {
    background: var(--nav_dark);
}

body.light .overview_table_links__more > div a:hover {
    background: hsl(from var(--highlight_light) h s 92%);
}

body.dark .overview_table_links__more > div a:hover {
    background: hsl(from var(--highlight_dark) h s 30%);
}

body.light .overview_table__dropdown thead tr {
    background: hsl(from var(--highlight_light) h s 90%);
}

body.dark .overview_table__dropdown thead tr {
    background: hsl(from var(--highlight_dark) h s 35%);
}

body.light .overview_table__dropdown tbody tr {
    background: hsl(from var(--highlight_light) h s 92%);
}

body.dark .overview_table__dropdown tbody tr {
    background: hsl(from var(--highlight_dark) h s 30%);
}

body.light .overview_table__loader td div {
    background: var(--body_light) linear-gradient(to right, var(--body_light), hsl(from var(--body_light) h s 90%) 50%, var(--body_light)) repeat-y 0 0;
    animation: loader 1s infinite;
    background-size: 70px 500px;
}

body.dark .overview_table__loader td div {
    background: var(--body_dark) linear-gradient(to right, var(--body_dark), hsl(from var(--body_dark) h s 25%) 50%, var(--body_dark)) repeat-y 0 0;
    animation: loader 1s infinite;
    background-size: 70px 500px;
}

body.light .overview_table_pagination__links a {
    border: 1px var(--highlight_light) solid;
}

body.dark .overview_table_pagination__links a {
    border: 1px var(--highlight_dark) solid;
}

body.light .overview_table_pagination__links a.--selected {
    background: var(--highlight_light);
}

body.dark .overview_table_pagination__links a.--selected {
    background: var(--highlight_dark);
}

body.light .overview__sticky_form > form {
    background: var(--nav_light);
}

body.dark .overview__sticky_form > form {
    background: var(--nav_dark);
}

/************************************
 CONTENT
************************************/
.content__header {
    display: flex;
    margin-bottom: 10px;
}

.content__header.--space {
    margin-top: 20px;
}

.content__header h1 {
    flex-grow: 1;
    font-size: 1.3em;
    display: inline-flex;
    align-content: end;
    flex-wrap: wrap;
}

.content__header h1 i {
    margin-left: 3px;
    cursor: pointer;
}

.content__sub_header {
    display: flex;
    margin-bottom: 10px;
    margin-top: 20px;
}

.content__sub_header.--no_space {
    margin-top: 0;
}

.content__sub_header h2 {
    flex-grow: 1;
    font-size: 1.1em;
    display: inline-flex;
    align-content: end;
    flex-wrap: wrap;
    align-items: center;
}

.content__sub_header h2 i {
    margin-left: 3px;
    cursor: pointer;
}

.content__sub_header h2 a {
    font-size: 0.8em;
    margin-left: 10px;
    font-weight: normal;
}

.content__sub_header a {
    background: var(--system);
    color: var(--system_text) !important;
    border-radius: 5px;
    padding: 5px 10px;
}

.content__error_header {
    margin-bottom: 10px;
}

.content__error_header h2 {
    background: var(--error) !important;
    color: #fff;
    padding: 7px 10px;
    border-radius: 10px;
}

.content__cell_header {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 7px;
    padding: 7px 10px;
    border-radius: 5px;
}

.content_header__buttons {
    display: flex;
    gap: 5px;
}

.content_header__buttons > a {
    background: var(--system);
    color: var(--system_text) !important;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    line-height: 1.2em;
}

.content_header__buttons > a:hover {
    background: hsl(from var(--system) h s 45%);
}

.content_header__buttons > a i {
    color: var(--system_text) !important;
    margin-right: 2px;
}

.content_header__buttons > select {
    padding: 5px 10px;
    border-radius: 5px;
    width: auto;
    border: 0 !important;
    margin-top: 0 !important;
}

.content_header__info {
    font-size: 0.9em;
    opacity: 0.8;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out, padding 0.1s ease 0.4s;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    padding: 0 15px;
}

.content_header__info.--show {
    grid-template-rows:1fr;
    padding: 10px 15px;
    transition: grid-template-rows 0.4s ease-out, padding 0.1s ease 0.01s;
    margin-bottom: 10px;
}

.content_header__info div {
    overflow: hidden;
}

.content_header__info p {
    margin-top: 5px;
}

.content_header__info p:last-of-type {
    margin-bottom: 5px;
}

.content_header__info table th {
    text-align: left;
    padding: 5px 10px;
    border-width: 1px;
    border-style: solid;
}

.content_header__info table td {
    text-align: left;
    padding: 10px;
    vertical-align: top;
    border-width: 1px;
    border-style: solid;
}

.content_header__info table ul {
    padding-left: 15px;
}

.content_header__form {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

.content_header__form form {
    display: flex;
    gap: 5px;
}

.content_header__form form label {
    white-space: nowrap;
    align-content: center;
}

.content_header__form form button {
    white-space: nowrap;
    margin-top: 0 !important;
}

.content_header__form form input, .content_header__form form select {
    margin-top: 0 !important;
    max-width: 150px;
}

.content__data_info {
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 15px;
    margin-bottom: 10px;
}

.content__data_info p {
    margin-bottom: 5px;
}

.content__data_info ul {
    padding-left: 15px;
}

.content__form fieldset {
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
    margin-bottom: 15px;
}

.content__form fieldset.--extra_padding {
    padding: 15px;
}

.content__form fieldset legend {
    display: none;
}

.content__form fieldset table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.content__form fieldset table.--no_space {
    margin-top: -10px;
}

.content__form p.table__error {
    background: var(--error) !important;
    color: #fff;
    padding: 7px 10px;
    border-radius: 10px;
}

.content__form p.table__error i {
    margin-right:3px;
}

.content_form__expand_section {
    display: grid;
    grid-template-rows:0fr;
    transition: grid-template-rows 0.4s ease-out;
}

.content_form__expand_section.--show {
    grid-template-rows:1fr;
    transition: grid-template-rows 0.4s ease-out;
}

.content_form__expand_section > fieldset {
    overflow: hidden;
    margin-bottom: 0;
    padding: 0 5px;
    transition: padding 0.4s ease-out;
}

.content_form__expand_section.--show > fieldset {
    padding: 5px;
    transition: padding 0.4s ease-out;
}

.content_form__label {
    display: flex;
    gap: 5px;
    align-items: end;
}

.content_form__label i {
    font-size: 0.95em;
}

.content_form__label label {
    flex-grow: 1;
    display: flex;
    align-content: end;
    flex-wrap: wrap;
    min-height: 21px;
}

.content_form__label label > i {
    color: var(--error_highlight);
    font-size: 0.5em;
    vertical-align: top;
    margin-left: 2px;
}

.content_form__tooltip {
    position: relative;
    cursor: pointer;
}

.content_form__tooltip span {
    display: none;
    position: absolute;
    top: -5px;
    right: 23px;
    width: 200px;
    padding: 10px;
    font-size: 0.8em;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.content_form__tooltip span.--show {
    display: block;
}

.content_form__label_btn {
    font-size: 0.8em;
    padding: 4px 7px;
    border-radius: 5px;
    cursor: pointer;
}

.content_form__label_btn i {
    margin-right: 2px;
    color: var(--system_text);
}

.content_form__expand_section.--show .content_form_expand__prompt {
    display: none;
}

.content_form__expand_section.--show table {
    display: table;
}

.content_form__cell_popup {
    position: absolute;
    right: 0;
    top: 26px;
    backdrop-filter: blur(5px);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    max-width: 380px;
    z-index: 11;
}

.content_form__cell_popup a {
    background: var(--system);
    color: var(--system_text) !important;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px 5px 0 0;
}

.content_form__files {
    padding: 10px !important;
}

.content_form__files.--no_space {
    padding: 0 !important;
}

.content_form__file {
    display: inline-flex;
    margin: 0 10px 10px 0;
}

.content_form_file__name {
    border-radius: 5px 0 0 5px;
    padding: 5px 10px;
}

.content_form_file__remove {
    border-radius: 0 5px 5px 0;
    padding: 5px;
    background: var(--error);
    color: #fff !important;
}

.content_form_file__remove i {
    vertical-align: bottom;
}

.content_form_files__buttons {
    width: 100%;
}

.content_form_files__buttons a {
    background: var(--system);
    color: var(--system_text) !important;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    line-height: 1.2em;
    cursor: pointer;
    margin-right: 5px;
}

.content_form_files__image_link {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 10px;
    margin-right: 5px;
}

.content_form__table_buttons a, .content_form__table_buttons button {
    background: var(--system);
    color: var(--system_text) !important;
    padding: 4px 7px;
    border-radius: 5px;
    display: inline-block;
    line-height: 1.2em;
    cursor: pointer;
    margin-right: 3px;
}

.content_form__overview_table {
    padding: 10px 0 !important;
}

.content_form__details {
    margin-top: 10px;
    cursor: pointer;
}

.content_form__details p, .content_form__details ul {
    margin-top: 5px;
}

.content_form__details ul {
    padding-left: 15px;
}

.content_form__reg_container {
    display: flex;
    align-items: center;
}

.content_form__files:is(.--images, .--private_images) {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    flex-direction: row;
    padding-bottom: 0 !important;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image {
    cursor: grab;
    width: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 10px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image input[type="checkbox"] {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image::after {
    content: '';
    padding-bottom: 100%;
    display: block;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button {
    font-size: 18px;
    position: absolute;
    bottom: 0;
    width: 50%;
    text-align: center;
    padding: 3px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button.--remove {
    right: 0;
    background: var(--error);
    cursor: pointer;
    border-bottom-right-radius: 9px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button.--options {
    left: 0;
    background: var(--warning);
    cursor: pointer;
    border-bottom-left-radius: 9px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button.--remove:only-of-type {
    width: 100%;
    border-bottom-left-radius: 10px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button.--options:only-of-type {
    width: 100%;
    border-bottom-right-radius: 10px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image .content_form_files_image__button i {
    color: #fff;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image.--add_new {
    cursor: pointer;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image.--add_new::before {
    content: '+';
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__buttons :is(a, input) {
    margin-bottom: 10px;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image.--drag_clone {
    position: absolute !important;
    top: -1000px;
    left: -1000px;
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image.--drag_clone * {
    display: none;
}

.content_form__files:is(.--images, .--private_images) .content_form_files__image.--drag_original {
    position: absolute;
    top: -1000px;
    left: -1000px;
}

.content_form__multi_item {
    display: flex;
    margin: 5px 0;
}

.content_form__multi_item > span {
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 5px 0 0 5px;
}

.content_form__multi_item > a {
    display: flex;
    align-items: center;
    background: var(--error);
    padding: 5px 4px;
    border-radius: 0 5px 5px 0;
}

.content_form__multi_item > a > i {
    color: var(--text_dark);
}

.content_form__map {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0 10px;
    transition: grid-template-rows 0.4s ease-out, margin-bottom 0.39s ease-out 0.01s;
}

.content_form__map.--show {
    grid-template-rows: 1fr;
    margin-bottom: 5px;
    transition: grid-template-rows 0.4s ease-out, margin-bottom 0.01s ease-out 0.39s;
}

.content_form_map__content {
    overflow: hidden;
}

.content_form__map iframe {
    width: 100%;
    height: 350px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.content__side_nav.--fixed {
    width: 230px;
}

.content__side_nav.--filled {
    padding: 15px 15px 5px 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

.content__side_nav h2 {
    text-align: center;
}

.content__side_nav a {
    display: block;
    margin-bottom: 10px;
    padding: 8px 10px;
    position: relative;
    text-align: right;
    min-width: 155px;
    border-radius: 5px;
}

.content__side_nav a i {
    margin-left: 5px;
}

.content__side_nav a.--filled {
    text-align: center;
}

.content__side_nav button {
    width: 100%;
}

.content__side_nav p {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 5px;
}

.content__slider_container {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 10px;
    width: max-content;
}

.content__details_dropdown summary {
    border-radius: 10px;
    background: var(--system);
    padding: 7px 10px;
    margin: 10px 0;
    cursor: pointer;
    display: block;
}

.content__details_dropdown summary i {
    margin-left:3px;
}

.content__details_dropdown summary i {
    margin-right: 3px;
}

.content__details_dropdown[open] summary i {
    transform: rotate(180deg);
}

body.light .content__form fieldset {
    background: var(--element_light);
}

body.dark .content__form fieldset {
    background: var(--element_dark);
}

body.light .content_form__tooltip span {
    background: var(--nav_light);
    color: var(--text_light);
}

body.dark .content_form__tooltip span {
    background: var(--nav_dark);
    color: var(--text_dark);
}

body.light .content__cell_header {
    background: var(--body_light);
}

body.dark .content__cell_header {
    background: var(--body_dark);
}

body.light .content_header__buttons select {
    background: var(--element_light) !important;
}

body.dark .content_header__buttons select {
    background: var(--element_dark) !important;
}

body.light .content_header__info {
    background: rgba(255, 255, 255, 0.6);
}

body.dark .content_header__info {
    background: rgba(0, 0, 0, 0.2);
}

body.light .content_header__form {
    background: var(--element_light);
}

body.dark .content_header__form {
    background: var(--element_dark);
}

body.light .content_form__cell_popup {
    border: 1px var(--highlight_light) solid;
    background: var(--nav_light);
}

body.dark .content_form__cell_popup {
    border: 1px var(--highlight_dark) solid;
    background: var(--nav_dark);
}

body.light .content_form_file__name {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .content_form_file__name {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .content_form_files__image_link {
    border: 1px var(--highlight_light) solid;
}

body.dark .content_form_files__image_link {
    border: 1px var(--highlight_dark) solid;
}

body.light .content_form__files:is(.--images, .--private_images) .content_form_files__image {
    border: 1px var(--highlight_light) solid;
}

body.dark .content_form__files:is(.--images, .--private_images) .content_form_files__image {
    border: 1px var(--highlight_dark) solid;
}

body.light .content_form__files:is(.--images, .--private_images) .content_form_files__image.--add_new {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .content_form__files:is(.--images, .--private_images) .content_form_files__image.--add_new {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .content_form__files:is(.--images, .--private_images) .content_form_files__image.--drag_placeholder {
    background: var(--body_light);
}

body.dark .content_form__files:is(.--images, .--private_images) .content_form_files__image.--drag_placeholder {
    background: var(--body_dark);
}

body.light .content_form__multi_item > span {
    background: var(--highlight_light);
}

body.dark .content_form__multi_item > span {
    background: var(--highlight_dark);
}

body.light .content__side_nav.--filled {
    background: var(--nav_light);
}

body.dark .content__side_nav.--filled {
    background: var(--nav_dark);
}

body.light .content__side_nav a {
    background: var(--element_light);
}

body.dark .content__side_nav a {
    background: var(--element_dark);
}

body.light .content__side_nav a.--filled {
    background: #fff;
}

body.dark .content__side_nav a.--filled {
    background: #555;
}

body.light .content__side_nav a.--selected {
    background: var(--highlight_light);
    color: var(--text_light);
}

body.dark .content__side_nav a.--selected {
    background: var(--highlight_dark);
    color: var(--text_dark);
}

/************************************
 TABLES
************************************/
.table_cell__popup {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 35px 5px 10px 5px;
    border-radius: 5px;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.table_cell__popup.--input {
    top: 40px;
}

.table_cell__popup.--no_title {
    padding: 5px !important;
}

.table_cell__popup.--no_title .table_cell_popup__link_list a:first-of-type {
    border: none !important;
}

.table_cell__popup div {
    max-height: 200px;
    overflow-x: auto;
}

.table_cell__popup h3 {
    position: absolute;
    top: 10px;
    left: 10px;
}

.table_cell_popup__close i {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--error);
    font-size: 1.2em;
}

.table_cell_popup__link_list a {
    display: block;
    padding: 5px;
}

.table_cell_popup__link_list a.--highlighted {
    background: var(--system);
    color: var(--system_text) !important;
}

.table_cell_popup__link_list a.--highlighted:hover {
    background: hsl(from var(--system) h s 45%) !important;
}

.table_cell_popup__link_list.--selectable .checkbox_container {
    display: inline-block;
    position: relative;
    top: 5px;
}

.table_cell_popup__link_list.--selectable a {
    margin-top: -24px;
    text-indent: 30px;
}

.table_cell_popup__footer_buttons {
    padding-top: 5px;
}

.table_cell_popup__footer_buttons button, .table_cell_popup__footer_buttons a {
    background: var(--system);
    color: var(--system_text) !important;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}

body.light .table_cell__popup {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .table_cell__popup {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .table_cell_popup__link_list a {
    border-top: 1px var(--highlight_light) solid;
}

body.dark .table_cell_popup__link_list a {
    border-top: 1px var(--highlight_dark) solid;
}

body.light .table_cell_popup__link_list a:hover {
    background: hsl(from var(--highlight_light) h s 92%);
}

body.dark .table_cell_popup__link_list a:hover {
    background: hsl(from var(--highlight_dark) h s 30%);
}

body.dark .table_cell_popup__link_list a i {
    margin-right: 5px;
}

/************************************
 SUB FORM CONTENT
************************************/
.sub_content__container {
    max-width: 600px;
}

.sub_content__container fieldset {
    padding: 10px 15px;
}

.sub_content__container fieldset select, .sub_content__container fieldset textarea {
    margin-bottom: 5px;
}

.sub_content__container fieldset p {
    margin-bottom: 5px;
}

.sub_content__notice {
    background: var(--warning) !important;
    color: #fff !important;
}

.sub_content__errors {
    background: var(--error) !important;
    color: #fff !important;
    max-width: 600px;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.sub_content__errors ul {
    padding-left: 15px;
}

.sub_content__btn {
    border-radius: 5px;
    padding: 6px 13px;
    background: var(--system);
    color: #fff !important;
    margin: 10px 5px 0 0;
    display: inline-block;
}

.sub_content__buttons {
    text-align: right;
}

.sub_content__buttons.--left {
    text-align: left;
}

.sub_content__buttons > a {
    border-radius: 5px;
    padding: 6px 13px;
    background: var(--error);
    color: #fff !important;
}

/************************************
 SYSTEM NAVIGATION
************************************/
.system_nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 42px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(5px);
    overflow-y: scroll;
    z-index: 20;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.system_nav--expanded, .system_nav--fixed {
    width: 200px;
}

.system_nav__head {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.system_nav_head__logo {
    width: 42px;
    display: flex;
    justify-content: center;
}

.system_nav_head__logo img {
    width: 30px;
}

.system_nav_head__expand {
    display: none;
    flex-grow: 1;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
}

.system_nav_head__expand i {
    cursor: pointer;
}

.system_nav--expanded .system_nav_head__expand, .system_nav--fixed .system_nav_head__expand {
    display: flex;
    flex-grow: 1;
}

.system_nav a {
    padding: 0 10px 0 8px;
    min-height: 26px;
    max-height: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    cursor: pointer;
}

.system_nav a span {
    display: flex;
    justify-content: center;
    width: 22px;
}

.system_nav a p {
    display: none;
    font-size: 0.9em;
    padding-left: 3px;
}

.system_nav a p i {
    margin-left: 5px;
}

.system_nav--expanded a, .system_nav--fixed a {
    justify-content: start;
}

.system_nav--expanded a p, .system_nav--fixed a p {
    display: inline-block;
}

.system_nav a:hover {
    border-left: 2px var(--system) solid !important;
}

.system_nav__submenu {
    display: grid;
    border-radius: 5px;
    grid-template-rows:0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.system_nav:not(.system_nav--expanded, .system_nav--fixed) .system_nav__submenu {
    grid-template-rows:0fr !important;
    transition: grid-template-rows 0s !important;
}

.system_nav__submenu a {
    padding: 0 10px;
}

.system_nav__submenu a i {
    margin-right: 5px;
}

.system_nav__submenu div {
    overflow: hidden;
}

.system_nav_submenu--expanded {
    grid-template-rows: 1fr;
}

.system_nav--selected {
    border-left: 2px var(--system) solid !important;
}

.system_nav__footer {
    display: none;
    flex-grow: 1;
    align-content: end;
    flex-wrap: wrap;
    padding: 0 10px;
}

.system_nav__footer div {
    background: var(--system);
    color: var(--system_text) !important;
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
}

.system_nav__footer div i {
    margin-right: 5px;
    color: var(--system_text) !important;
}

.system_nav--expanded .system_nav__footer, .system_nav--fixed .system_nav__footer {
    display: block;
}

.system_nav__hamburger {
    display: none;
    position: fixed;
    top: 7px;
    left: 8px;
    z-index: 25;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--system_text);
    font-size: 1.1em;
    background: transparent;
    transition: background 0.2s ease-out;
}

.system_nav__hamburger:hover {
    background: rgba(0, 0, 0, 0.2);
}

.system_nav__backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 19;
}

.system_nav__backdrop.--active {
    display: block;
}

body.light .system_nav {
    background: var(--nav_light);
}

body.dark .system_nav {
    background: var(--nav_dark);
}

body.light .system_nav--fixed {
    background: var(--element_light);
}

body.dark .system_nav--fixed {
    background: var(--element_dark);
}

body.light .system_nav a {
    border-left: 2px solid var(--nav_light);
}

body.dark .system_nav a {
    border-left: 2px solid var(--nav_dark);
}

body.light .system_nav a:hover {
    background: var(--body_light);
}

body.dark .system_nav a:hover {
    background: var(--body_dark);
}

/************************************
 HEADER
************************************/
header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 46px;
    background: var(--system);
    padding: 6px 20px 6px 60px;
    gap: 20px;
    z-index: 10;
}

header div {
    align-content: center;
}

.header--fixed {
    padding: 7px 20px 7px 220px;
}

.header--blank {
    padding: 7px 20px;
}

.header__company {
    flex-grow: 1;
    font-size: 1.3em;
    color: var(--system_text) !important;
}

.header__company b {
    color: var(--system_text);
}

.header_popup {
    position: relative;
}

.header_popup__content {
    position: absolute;
    background: var(--element_dark);
    color: var(--text_dark);
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

body.light .header_popup__content {
    background: var(--element_light);
    color: var(--text_light);
}

.header_popup--active {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.header__welcome, .header__basket, .header__mode {
    font-size: 1.1em;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.header__welcome:hover, .header__basket:hover, .header__mode:hover {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.header__welcome > i {
    color: var(--system_text);
}

.header__welcome .header_popup__content {
    top: 38px;
    right: 0;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.header__welcome .header_popup__content > p:first-child {
    white-space: nowrap;
    overflow: hidden;
    margin-top: 5px;
    text-align: center;
    margin-bottom: 15px;
    text-overflow: ellipsis;
}

.header__welcome .header_popup__content > :is(p, a) {
    width: calc(100% - 4px);
    margin: 2px;
}

.header__welcome .header_popup__content > :nth-child(2) {
    position: relative;
}

.header__welcome .header_popup__content > :nth-child(2)::before {
    position: absolute;
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    opacity: 0.5;
    left: 10%;
    top: -10px;
}

.header__welcome .header_popup__content > a {
    padding: 6px;
    font-size: 0.9em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 5px;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.header__welcome .header_popup__content > a:hover {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.header__welcome > span {
    background: var(--error);
    color: var(--system_text);
    font-size: 0.6em;
    font-weight: bold;
    display: flex;
    position: absolute;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    right: -12px;
}

.header_welcome__alert {
    top: -3px;
}

.header__basket i {
    color: var(--system_text);
}

.header__basket span {
    background: var(--success);
    color: var(--system_text);
    font-size: 0.6em;
    font-weight: bold;
    display: flex;
    position: absolute;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    right: -12px;
}

.header__basket .header_popup__content {
    top: 38px;
    right: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    overflow: hidden;
}

.header__basket .header_popup__content:has(.header_basket__item) {
    width: 350px
}

.header__basket .header_popup__content > :is(p, a, div) {
    padding: 5px;
}

.header__basket .header_popup__content > p {
    text-align: center;
    padding: 5px 5px 2px 5px;
}

.header__basket .header_popup__content > div {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}

.header__basket .header_popup__content > div:last-child {
    padding-bottom: 5px;
}

.header__basket .header_popup__content > div > p {
    font-size: 15px;
    line-height: 20px;
    flex-grow: 1;
}

.header__basket .header_popup__content > div > i {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 15px;
    border-radius: 50%;
    transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.header__basket .header_popup__content > div > i:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px inset;
    background: rgba(0, 0, 0, 0.2);
}

.header_basket__orders {
    top: -3px;
}

.header_basket__quotes {
    bottom: -3px;
}

.header__mode i {
    color: var(--system_text);
}

body.dark .header__basket .header_popup__content i {
    color: var(--text_dark);
}

body.light .header__basket .header_popup__content i {
    color: var(--text_light);
}

body.dark .header__basket .header_popup__content > p:not(:only-child) {
    color: var(--text_dark);
    background: var(--body_dark);
}

body.light .header__basket .header_popup__content > p:not(:only-child) {
    color: var(--text_light);
    background: var(--body_light);
}

body.dark .header__welcome .header_popup__content > :nth-child(2)::before {
    background: var(--text_dark);
}

body.light .header__welcome .header_popup__content > :nth-child(2)::before {
    background: var(--text_light);
}

/************************************
 FOOTER
************************************/
footer {
    width: 100%;
    background: var(--system);
    display: flex;
    gap: 15px;
    padding: 10px 20px 10px 60px;
}

.footer--fixed {
    padding: 10px 10px 10px 220px;
}

.footer--blank {
    padding: 10px 20px;
}

footer a {
    color: var(--system_text) !important;
}

footer a i {
    margin-right: 5px;
    color: var(--system_text) !important;
}

footer a b {
    color: var(--system_text) !important;
}

.footer__company {
    flex-grow: 1;
    color: var(--system_text) !important;
}

/************************************
 DIALOGS
************************************/
dialog {
    position: fixed;
    margin: auto;
    padding: 55px 20px 20px 20px;
    min-width: 300px;
    max-width: 600px;
    max-height: 700px;
    z-index: 300;
    accent-color: auto !important;
    border-radius: 10px;
}

dialog.fixed_small {
    width: 380px;
}

dialog.fixed_xl {
    width: 95vw;
    height: 95vh;
    max-width: unset;
    max-height: unset;
}

dialog.image_editor {
    padding: 0;
}

dialog.image_editor *:not(.SfxButton-Label) {
    color: #000;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

dialog > h2 {
    background: var(--system) !important;
    color: var(--system_text) !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.dialog__content p {
    margin-bottom: 10px;
    white-space: normal;
    text-align: left;
    line-height: 1.1rem;
}

.dialog__content p b {
    font-weight: bold;
}

.dialog__content select {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 3px 6px;
}

.dialog__content textarea {
    display: block;
    width: 100%;
    height: 100px;
    padding: 5px;
    margin-bottom: 5px;
}

.dialog__content input {
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
}

.dialog__content button, dialog div.dialog__content a {
    display: block;
    width: 100%;
    margin-top: 5px;
    background: var(--system);
    color: var(--system_text);
    padding: 5px 10px;
}

.dialog__content .dialog_content__extractor_item {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px 2px;
    border-bottom: 1px solid #eeeeee;
}

.dialog__content .dialog_content__extractor_item .dialog_content_extractor_item__set_man {
    display: flex;
    align-items: center;
    background: none;
    width: unset;
    margin: unset;
    padding: unset;
}

.dialog__content .dialog_content__extractor_item .dialog_content_extractor_item__set_man i {
    margin-right: 5px;
    color: var(--system);
}

.dialog__content .dialog_content__extractor_item .dialog_content_extractor_item__set_man.--set i {
    color: var(--success);
}

.dialog__content .dialog_content__extractor_item input[type="checkbox"] {
    width: auto;
    padding: 0;
}

.dialog__content .dialog_content__extractor_item p {
    flex-grow: 1;
    margin-bottom: 0;
}

.dialog__content .dialog_content__extractor_item:last-of-type {
    border: 0;
}

.dialog__buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.dialog__buttons a, .dialog__buttons button {
    background: var(--system);
    color: var(--system_text);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-top: 5px;
    line-height: 1.2em;
}

.dialog__buttons button:focus-visible {
    outline: none;
}

.dialog__buttons button:last-of-type {
    background: var(--body_dark);
    color: #fff;
}

.dialog__buttons .dialog_buttons__all_extracted {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
}

body.light dialog {
    background: var(--element_light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

body.dark dialog {
    background: var(--element_dark);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

body.light .dialog__buttons button:last-of-type {
    background: var(--highlight_light);
    color: var(--text_light);
}

body.dark .dialog__buttons button:last-of-type {
    background: var(--highlight_dark);
    color: var(--text_dark);
}

/************************************
 LOGIN
************************************/
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.login img {
    max-width: 400px;
    margin-bottom: 20px;
}

.login form {
    max-width: 400px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
}

.login__view_password {
    position: absolute;
    top: 67px;
    right: 28px;
    cursor: pointer;
}

body.light .login form {
    background: var(--element_light);
}

body.dark .login form {
    background: var(--element_dark);
}

/************************************
 DASHBOARD
************************************/
.dashboard_widgets {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard_widgets > div {
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.dashboard_widgets > div > h2 {
    font-size: 1.1em;
}

.dashboard_widgets > div > h2 > i {
    margin-right: 3px;
}

.dashboard_widgets__notes {
    opacity: 0.7;
    margin-top: 10px !important;
    font-size: 0.9em;
    font-style: italic;
}

.dashboard_widgets__search .checkbox_container {
    position: relative;
    top: 4px;
    left: 5px;
}

.dashboard_widgets__links {
    container-type: size;
}

.dashboard_widgets__links > div {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 5px;
    margin: 5px 0 10px 0;
}

.dashboard_widgets__links > div a {
    margin: 0;
    text-align: center;
}

.dashboard_widgets__lookups p {
    margin-top: 5px;
}

.dashboard_widgets__new div {
    padding: 5px 0;
}

.dashboard_widgets__new div:first-of-type {
    margin-top: 10px;
}

.dashboard_widgets__new div h3 {
    font-size: 0.9em;
    opacity: 0.6;
    font-style: italic;
    font-weight: normal;
}

.dashboard_widgets__new div p {
    font-size: 0.95em;
}

.dashboard_widgets__new a {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--system);
}

.dashboard_widgets__new a i {
    font-size: 0.8em;
    margin-left: 4px;
}

body.light .dashboard_widgets > div {
    background: var(--element_light);
}

body.dark .dashboard_widgets > div {
    background: var(--element_dark);
}

body.light .dashboard_widgets__new div {
    border-top: 1px var(--highlight_light) solid;
}

body.dark .dashboard_widgets__new div {
    border-top: 1px var(--highlight_dark) solid;
}

body.light .dashboard_widgets__new div:last-of-type {
    border-bottom: 1px var(--highlight_light) solid;
}

body.dark .dashboard_widgets__new div:last-of-type {
    border-bottom: 1px var(--highlight_dark) solid;
}

/************************************
 OVERSIGHT
************************************/
.oversight__container {
    padding: 10px;
}

.oversight__table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border: 1px solid;
}

.oversight__table tr:nth-child(odd) {
    background: hsl(from var(--highlight_dark) h s 25%);
}

.oversight__table tr:nth-child(odd):not(:last-child) td {
    border-bottom: 1px solid;
}

.oversight__table tr td {
    padding: 5px 10px;
    font-size: 24px;
}

.oversight__table tr td span {
    display: none;
}

.oversight__table tr td i {
    font-size: 5em;
}

.oversight__table tr td svg {
    width: 50px;
    height: 50px;
}

.oversight__table tr td a:has(img) {
    display: flex;
    justify-content: center;
}

body.light .oversight__table tr:nth-child(odd) * {
    color: var(--text_dark);
}

body.light .oversight__table {
    border-color: var(--element_dark);
}

body.dark .oversight__table {
    border-color: var(--element_light);
}

body.light .oversight__table tr:nth-child(odd):not(:last-child) td {
    border-color: var(--element_dark);
}

body.dark .oversight__table tr:nth-child(odd):not(:last-child) td {
    border-color: var(--element_light);
}

/************************************
 STOCK
************************************/
.stock__name_count {
    margin-left: 3px;
    opacity: 0.7;
    font-style: italic;
}

.ktypes__container {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 5px;
}

.ktypes__container:has(.ktype__item) {
    margin-top: 5px;
}

.ktype__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 5px;
}

.ktype__item span {
    flex-grow: 1;
    font-style: italic;
}

.stock_item__add {
    display: inline-block;
    margin: 8px 0 8px 8px;
    cursor: pointer;
}

.stock_item__add i {
    margin-right: 3px;
}

.stock_item__remove {
    position: absolute;
    bottom: 5px;
    left: 0;
}

.stock__item input:read-only {
    opacity: 0.4;
    cursor: not-allowed;
}

.strip_stock__items {
    margin-top: 10px;
}

.strip_stock__items input, .strip_stock__items select {
    margin-top: 0 !important;
}

.strip_stock__items select.--space {
    margin-bottom: 5px;
}

.strip_stock__buttons {
    margin: 5px 0 0 10px;
}

.strip_stock__delete_selected {
    background: var(--error);
    color: #fff !important;
    padding: 7px 13px;
    border-radius: 5px;
    display: inline-flex;
}

.oem_parts__parts {
    margin-top: 10px;
}

.oem_parts__key table {
    border-collapse: separate !important;
    border-spacing: 5px !important;
}

.oem_parts__key table td {
    border-radius: 5px;
}

.oem_parts__buttons {
    margin: 5px 0 0 10px;
}

.oem_parts__items {
    margin-top: 10px;
}

.oem_parts__items input, .oem_parts__items select {
    margin-top: 0 !important;
}

.oem_parts__items select.--space {
    margin-bottom: 5px;
}

.oem_parts__error {
    background: var(--error);
    color: #fff !important;
    padding: 7px 13px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

body.light .ktype__item {
    background: #fff;
    border: 1px var(--highlight_light) solid;
}

body.dark .ktype__item {
    background: #555;
    border: 1px var(--highlight_dark) solid;
}

/************************************
 STATS
************************************/
.stats_content__widgets {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.stats_content__widgets > div {
    position: relative;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.stats_content__widgets > div.--highlighted {
    background: var(--error) !important;
}

.stats_content__widgets > div i {
    font-size: 4em;
    position: absolute;
    opacity: 0.2;
    right: 10px;
    top: 10px;
}

.stats_content__widgets > div.--highlighted > i {
    color: var(--text_dark);
}

.stats_content__widgets > div span:not(.stats_content_widget__loader) {
    display: none;
}

.stats_content__widgets > div span.stats_content_widget__loader {
    font-weight: 800;
}

.stats_content__widgets > div.--highlighted span {
    color: var(--text_dark);
}

.stats_content__widgets > div h2 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

.stats_content__widgets > div.--highlighted > h2 {
    color: var(--text_dark);
}

.stats_content__widgets > div > h2 > span {
    font-size: 0.6em;
}

.stats_content__widgets > div p {
    font-weight: 800;
    max-width: 80%;
}

.stats_content__widgets > div.--highlighted p {
    color: var(--text_dark);
}

.stats_content__widgets > div svg {
    height: 20px;
    vertical-align: bottom;
}

.stats_content__widgets > :hover {
    border-left: 5px solid var(--system);
    padding-left: 15px;
    cursor: pointer;
}

.stats_content__text {
    font-style: italic;
    font-size: 0.8em;
}

.search_stats {
    display: flex;
    gap: 10px;
}

.search_stats > .search_stats__contents {
    flex-basis: max-content;
    flex-grow: 1;
}

.search_stats > .search_stats__contents > div:first-child {
    margin-bottom: 10px;
}

body.light .stats_content__widgets > div {
    background: var(--element_light);
}

body.dark .stats_content__widgets > div {
    background: var(--element_dark);
}

body.light .stats_content__widgets > div.--static {
    background: hsl(from var(--element_light) h s 75%);
}

body.dark .stats_content__widgets > div.--static {
    background: hsl(from var(--element_dark) h s 35%);
}

body.light .stats_content__widgets > div:not(.--highlighted) svg stop, body.light .stats_content__widgets > div:not(.--highlighted) .loader_img__circle {
    stop-color: var(--text_light);
    stroke: var(--text_light);
}

body.dark .stats_content__widgets > div svg stop, body.dark .loader_img__circle {
    stop-color: var(--text_dark);
    stroke: var(--text_dark);
}

/************************************
 ORDERS
************************************/
.order__items {
    padding: 10px !important;
    position: relative;
}

.order__items table {
    border-spacing: 5px !important;
}

.order__item {
    position: relative;
}

.order__item label {
    display: none;
}

.order__item input:read-only {
    opacity:0.5;
}

.order_item__remove span {
    display: none;
}

.order_item__add {
    position: absolute;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
}

.order_item__add i {
    margin-right: 3px;
}

/************************************
 QUOTES
************************************/
.quote__items {
    padding: 10px !important;
    position: relative;
}

.quote__items table {
    border-spacing: 5px !important;
}

.quote__item {
    position: relative;
}

.quote__item label {
    display: none;
}

.quote__item input:read-only {
    opacity:0.5;
}

.quote_item__remove span {
    display: none;
}

.quote_item__add {
    position: absolute;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
}

.quote_item__add i {
    margin-right: 3px;
}

/************************************
 COUNTER SALE
************************************/
.counter_sale__side_nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px !important;
}

.counter_sale__side_nav input, .counter_sale__side_nav button {
    margin-top: 0 !important;
}

.counter_sale__side_nav span {
    text-align: center;
}

.counter_sale__content {
    flex-grow: 1;
}

.counter_sale__content input {
    margin-top: 0 !important;
}

/************************************
 DONOR VEHICLES
************************************/
.donor_vehicle__recalls > fieldset {
    padding: 15px !important;
}

.donor_vehicle__recalls > fieldset > div {
    margin-top: 5px;
}

.donor_vehicle__recalls > fieldset > div:first-of-type {
    margin-top: 0;
}

.donor_vehicle_recall__info > p {
    margin: 10px 0;
}

.donor_vehicle_recall__title {
    padding: 5px 10px;
    border-radius: 5px;
}

.donor_vehicle_stats__info {
    display: grid;
    grid-template-columns:repeat(4, fit-content(25%));
    gap: 15px;
    margin-top: 10px;
}

.donor_vehicle_stats__more_info {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 15px;
    margin: 10px 0;
}

.donor_vehicle_stats_info__image {
    grid-row: 1/5;
}

.donor_vehicle_stats_info__image img {
    max-height: 270px;
    max-width: 400px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px #fff solid;
}

.donor_vehicle_stats__info h4, .donor_vehicle_stats__more_info h4 {
    font-weight: bold;
}

.donor_vehicle_stats__info p, .donor_vehicle_stats__more_info p {
    margin-top: 5px;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    min-height: 30px;
    min-width: 250px;
}

.donor_vehicle_stats_more_info__notes {
    grid-column: 1 / 6;
}

body.light .donor_vehicle_recall__title {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .donor_vehicle_recall__title {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .donor_vehicle_stats__info p, body.light .donor_vehicle_stats__more_info p {
    border: 1px var(--highlight_light) solid;
    background: #fff;
}

body.dark .donor_vehicle_stats__info p, body.dark .donor_vehicle_stats__more_info p {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

/************************************
 STRIP LISTS
************************************/
.strip_preset {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 2fr;
}

.strip_preset .content__form {
    flex-grow: 1;
}

.strip_preset .content__form .content__sub_header {
    margin-top: 10px;
}

.strip_preset .content__form fieldset input[name="name"] {
    margin-top: 0;
}

.strip_preset__search {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    align-items: center;
}

.strip_preset__search input {
    padding: 3px 5px;
    width: 100%;
    margin-right: 5px;
    font-size: 15px;
}

.strip_preset__search i {
    font-size: 20px;
}

.strip_preset__results .strip_preset_results__cat {
    margin-bottom: 10px;
}

.strip_preset__results:has(.--animating) .strip_preset_results__cat > div {
    transition: grid-template-rows 0.3s ease-out;
}

.strip_preset__results:has(.--animating) .strip_preset_results__cat.--not_intersecting {
    display: none;
}

.strip_preset__results .strip_preset_results__cat h2 {
    cursor: pointer;
    display: flex;
    padding: 10px 15px;
    font-size: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.strip_preset__results .strip_preset_results__cat h2 > i {
    margin-left: 5px;
    font-size: 16px;
    flex-grow: 1;
    text-align: end;
}

.strip_preset__results .strip_preset_results__cat > div {
    grid-template-rows: 0fr;
    display: grid !important;
}

.strip_preset__results .strip_preset_results__cat > div.--show {
    grid-template-rows: 1fr;
}

.strip_preset__results .strip_preset_results__cat div div {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.strip_preset__results .strip_preset_results__cat div div .strip_preset_results_cat__item {
    padding: 6px 10px 10px 10px;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.strip_preset__results .strip_preset_results__cat div div .strip_preset_results_cat__item:first-of-type {
    margin-top: 5px;
}

.strip_preset__results .strip_preset_results__cat div div .strip_preset_results_cat__item i {
    margin: 0 5px;
}

.strip_preset__results .strip_preset_results__cat div div .strip_preset_results_cat__item i:last-of-type {
    flex-grow: 1;
    text-align: end;
}

.strip_preset__items {
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: nowrap;
}

.strip_preset__items .strip_preset_items__item {
    border-radius: 5px;
    display: flex;
    gap: 8px;
    border: 1px solid;
    padding: 3px 5px;
    align-items: center;
    justify-content: center;
}

.strip_preset__items .strip_preset_items__item.--drag_original {
    top: -1000px;
    left: -1000px;
    position: absolute;
}

.strip_preset__items .strip_preset_items__item.--drag_placeholder {
    height: 38px;
    border: 2px dashed;
}

.strip_preset__items .strip_preset_items__item.--drop_target {
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.strip_preset__items .strip_preset_items__item.--drop_target input[name="part_name[]"] {
    outline: 2px solid var(--system);
    outline-offset: 2px;
    transition: outline 0.2s ease-out, background 0.2s ease-out;
}

.strip_preset__items .strip_preset_items__item > div {
    text-align: center;
}

.strip_preset__items .strip_preset_items__item > div:first-of-type {
    flex: 0 0 auto;
}

.strip_preset__items .strip_preset_items__item > div:last-of-type {
    flex: 0 0;
}

.strip_preset__items .strip_preset_items__item > div i {
    font-size: 16px;
    cursor: pointer;
}

.strip_preset__items .strip_preset_items__item > div:first-of-type i {
    cursor: grab;
}

.strip_preset__items .strip_preset_items__item :has(input) {
    min-width: 260px;
    flex-grow: 1;
}

.strip_preset__items .strip_preset_items__item :has(select) {
    width: 230px;
}

.strip_preset__items .strip_preset_items__item *:is(input,select) {
    margin-top: 0 !important;
    width: 100%;
    padding: 5px;
    border-width: 0 !important;
}

.strip_preset_item.strip_dragging {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.strip_preset__attributes {
    margin-bottom: 15px;
}

.strip_preset_attributes__info {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
    border-left: 3px solid var(--system);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.strip_preset_attributes__info p {
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.strip_preset_attributes__info p:last-child {
    margin-bottom: 0;
}

.strip_preset_attributes__info code {
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.strip_preset_attributes__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.strip_preset_attributes__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 5px;
    cursor: grab;
    transition: all 0.2s ease;
}

.strip_preset_attributes__item:hover {
    transform: translateY(-2px);
}

.strip_preset_attributes__item:active {
    cursor: grabbing;
}

.strip_preset_attributes__item.--dragging {
    opacity: 0.4;
    cursor: grabbing;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.strip_preset_attributes__item.--dragging * {
    cursor: grabbing !important;
}

.strip_preset_attributes__item i {
    font-size: 12px;
    transition: color 0.2s ease;
}

.strip_preset_attributes__item code {
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    white-space: nowrap;
    font-size: 13px;
}

.strip_preset_attributes__drag_image {
    position: absolute;
    top: -1000px;
    padding: 8px 12px;
    background: rgba(248, 130, 12, 0.9);
    border: 1px solid rgba(248, 130, 12, 1);
    border-radius: 4px;
    color: #fff !important;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.strip_preset > div:last-of-type > form > button {
    display: inline-block;
    background: var(--highlight_dark);
    color: #fff;
    padding: 5px 15px;
}

body.light .strip_preset__search input {
    border: 1px #afafaf solid !important;
}

body.dark .strip_preset__search input {
    border: 1px var(--highlight_dark) solid !important;
}

body.light .strip_preset__search i {
    color: var(--text_light);
}

body.dark .strip_preset__search i {
    color: var(--text_dark);
}

body.light .strip_preset__items .strip_preset_items__item {
    background: #fff;
    border-color: var(--highlight_light);
}

body.dark .strip_preset__items .strip_preset_items__item {
    background: #555;
    border-color: var(--highlight_dark);
}

body.light .strip_preset__items .strip_preset_items__item.--drop_target {
    background: rgba(248, 130, 12, 0.1);
    border-color: rgba(248, 130, 12, 0.5);
}

body.dark .strip_preset__items .strip_preset_items__item.--drop_target {
    background: rgba(248, 130, 12, 0.1);
    border-color: rgba(248, 130, 12, 0.5);
}

body.light .strip_preset__items .strip_preset_items__item.--drop_target input[name="part_name[]"] {
    background: rgba(248, 130, 12, 0.05);
}

body.dark .strip_preset__items .strip_preset_items__item.--drop_target input[name="part_name[]"] {
    background: rgba(248, 130, 12, 0.05);
}

body.light .strip_preset__results .strip_preset_results__cat h2 {
    background: var(--element_light);
    color: var(--text_light);
}

body.dark .strip_preset__results .strip_preset_results__cat h2 {
    background: var(--element_dark);
    color: var(--text_dark);
}

body.light .strip_preset_attributes__info {
    background: rgba(255, 255, 255, 0.3);
}

body.dark .strip_preset_attributes__info {
    background: rgba(0, 0, 0, 0.2);
}

body.light .strip_preset_attributes__info code {
    background: rgba(248, 130, 12, 0.15);
    color: #c66000;
}

body.dark .strip_preset_attributes__info code {
    background: rgba(248, 130, 12, 0.2);
    color: #ffffff;
}

body.light .strip_preset_attributes__item {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

body.dark .strip_preset_attributes__item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.light .strip_preset_attributes__item:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(248, 130, 12, 0.5);
}

body.dark .strip_preset_attributes__item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(248, 130, 12, 0.5);
}

body.light .strip_preset_attributes__item.--dragging {
    background: rgba(248, 130, 12, 0.2);
    border-color: rgba(248, 130, 12, 0.6);
}

body.dark .strip_preset_attributes__item.--dragging {
    background: rgba(248, 130, 12, 0.2);
    border-color: rgba(248, 130, 12, 0.6);
}

body.light .strip_preset_attributes__item i {
    color: rgba(0, 0, 0, 0.3);
}

body.dark .strip_preset_attributes__item i {
    color: rgba(255, 255, 255, 0.3);
}

body.light .strip_preset_attributes__item:hover i {
    color: rgba(248, 130, 12, 0.8);
}

body.dark .strip_preset_attributes__item:hover i {
    color: rgba(248, 130, 12, 0.8);
}

body.light .strip_preset_attributes__item code {
    background: rgba(248, 130, 12, 0.15);
    color: #c66000;
}

body.dark .strip_preset_attributes__item code {
    background: rgba(248, 130, 12, 0.2);
    color: #ffffff;
}

/************************************
 PAYMENTS
************************************/
.payments_container .overview_table__table td > input[type="number"] {border:none !important;}
#add_payment_title span {font-size:14px;margin:5px;}

/************************************
 REFUNDS
************************************/
.refund__error td {
    background: var(--error);
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
}
.refund__items tr td span {
    display:none;
}
.refund__items th {
    text-align: start;
}

/************************************
 DELIVERY VEHICLES
************************************/
.delivery_vehicles__form select {
    max-width: 220px !important;
    margin-top: 0 !important;
}

.delivery_vehicles__form input:nth-of-type(1) {
    max-width: 240px !important;
    margin-top: 0 !important;
}

.delivery_vehicles__form input:nth-of-type(2) {
    max-width: 150px !important;
    margin-top: 0 !important;
}

.delivery_vehicles__form button {
    margin-top: 0 !important;
}

.delivery_vehicle__buttons {
    margin-top: 20px;
}

.delivery_vehicle__buttons button {
    background: var(--system) !important;
    color: var(--system_text) !important;
    text-align: center !important;
    padding: 6px 13px !important;
    border-radius: 5px;
    display: inline-block;
}

/************************************
 VEHICLE LOOKUPS
************************************/
.vehicle_lookup__results {
    margin-top: 10px;
    text-align: center;
}

.vehicle_lookup__results svg {
    height: 20px;
    vertical-align: bottom;
    margin-right: 3px;
}

.vehicle_lookup__results a {
    position: relative;
}

.vehicle_lookup__results a svg {
    position: absolute;
    left: 7px;
    top: 7px;
}

.vehicle_lookup__overview {
    width: 100%;
}

.vehicle_lookup_new__btn {
    background: var(--system) !important;
    color: var(--system_text) !important;
    text-align: center !important;
    padding: 5px 13px !important;
}

.vehicle_lookup_overview__details fieldset summary {
    padding: 5px 10px;
    cursor: pointer;
}

.vehicle_lookup_overview__details > a {
    padding: 7px 13px;
    margin-top: 0 !important;
}

.vehicle_lookup_overview__details > a i {
    margin-right: 3px;
}

.vehicle_lookup_overview__stock {
    display: flex;
    justify-content: end;
}

.vehicle_lookup_overview__stock a {
    background: var(--system) !important;
    color: var(--system_text) !important;
    text-align: center !important;
    padding: 6px 13px !important;
    border-radius: 5px;
}

.vehicle_lookup_overview_details__head {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.vehicle_lookup_overview_details__head > div {
    flex-grow: 1;
}

.vehicle_lookup__container {
    display: flex;
    gap: 15px;
}

.vehicle_lookup__container > div {
    flex-grow: 1;
}

.vehicle_lookup__details h2 {
    margin-bottom: 10px;
}

.vehicle_lookup__details table {
    width: 100%;
    margin-bottom: 20px;
}

.vehicle_lookup__details table tr th {
    text-align: right;
    padding: 5px 5px 5px 15px;
    border-radius: 5px 0 0 5px;
}

.vehicle_lookup__details table tr td {
    padding: 5px 15px 5px 5px;
    border-radius: 0 5px 5px 0;
}

.vehicle_lookup__reg_select {
    display: flex;
}

.vehicle_lookup__reg_select a.--flex {
    border-radius: 0 5px 5px 0;
    padding: 6px 13px 5px 13px !important;
}

.vehicle_lookups_stock__search {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
}

.vehicle_lookups_stock__search p {
    flex-grow: 1;
    font-weight: bold;
}

body.light .vehicle_lookup_overview__details > form input {
    border: 1px #ccc solid;
    background: #fff;
}

body.dark .vehicle_lookup_overview__details > form input {
    border: 1px var(--highlight_dark) solid;
    background: #555;
}

body.light .vehicle_lookup__details table tr th {
    background: var(--element_light);
    color: #000;
}

body.dark .vehicle_lookup__details table tr th {
    background: var(--element_dark);
    color: #fff;
}

body.light .vehicle_lookup__details table tr td {
    background: #fff;
    color: #000;
}

body.dark .vehicle_lookup__details table tr td {
    background: #555;
    color: #fff;
}

body.light .vehicle_lookups_stock__search {
    background: var(--element_light);
}

body.dark .vehicle_lookups_stock__search {
    background: var(--element_dark);
}

/************************************
 PROVENANCE CHECKS
************************************/
.provenance_lookup__results {
    margin-top: 10px;
    text-align: center;
}

.provenance_lookup__results svg {
    height: 20px;
    vertical-align: bottom;
    margin-right: 3px;
}

.provenance_lookup__results a {
    position: relative;
}

.provenance_lookup__results a svg {
    position: absolute;
    left: 7px;
    top: 7px;
}

.provenance_lookup__overview {
    width: 100%;
}

.provenance_lookup_new__btn {
    background: var(--system) !important;
    color: var(--system_text) !important;
    text-align: center !important;
    padding: 5px 13px !important;
}

.provenance_lookup__vrn_vin {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.provenance_lookup__vrn_vin > div {
    padding: 1rem;
    border-radius: 10px;
    font-size: 2rem;
    text-align: center;
    align-content: center;
    border: 2px solid #000;
    color: #000;
}

.provenance_lookup__vrn_vin > div:first-of-type {
    font-family: "Barlow", sans-serif;
    background: #ffc800;
    width: 200px;
    font-weight: bold;
}

.provenance_lookup__vrn_vin > div:last-of-type {
    background: #a5a5a5;
    width: 450px;
}

.provenance_lookup_overview__details fieldset summary {
    padding: 5px 10px;
    cursor: pointer;
}

.provenance_lookup_overview__details > a {
    padding: 7px 13px;
    margin-top: 0 !important;
}

.provenance_lookup_overview__details > a i {
    margin-right: 3px;
}

.provenance_details__tiles {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.provenance_details__tiles > div:nth-of-type(-n + 2) {
    grid-column: span 2;
}

.provenance_details__tiles > div {
    padding: 10px;
    border-radius: 5px;
}

.provenance_details__tiles > div > h3 {
    margin-bottom: 10px;
    color: #fff;
}

.provenance_details__tiles > div > h3 > i {
    margin-right: 5px;
    color: #fff;
}

.provenance_details__tiles > div > p {
    color: #fff;
}

/************************************
 SEARCH STATS
************************************/
.search_stats {
    display: flex;
    gap: 10px;
}

.search_stats > .search_stats__contents {
    width: 50%;
}

.search_stats > .search_stats__contents > div:first-child {
    margin-bottom: 10px;
}

/************************************
 SETTINGS
************************************/
.settings__new_delivery_vehicle > div {
    display: flex;
    gap: 3px;
}

.settings__new_delivery_vehicle > div input, .settings__new_delivery_vehicle > div select, .settings__new_delivery_vehicle > div a {
    margin-top: 0 !important;
}

.settings__new_delivery_vehicle > div a:first-of-type {
    width: 100%;
}

.settings__delivery_vehicles > div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings__delivery_vehicles > div > div {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 45%;
    max-width: 150px;
    border-radius: 5px;
}

.settings__delivery_vehicles > div > div > div {
    position: relative;
}

.settings__delivery_vehicles > div > div > div::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.settings__delivery_vehicles > div > div > div img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.settings__delivery_vehicles > div > div input[type="text"] {
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.settings_delivery_vehicle__remove {
    background: var(--error);
    padding: 5px 10px;
    color: var(--text_dark);
    text-align: center;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.settings__approved_ips > div {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 5px;
}

.settings__approved_ips > div:first-of-type {
    margin-top: 0;
}

.settings__approved_ips > div > input {
    margin-top: 0 !important;
}

.settings__cod_password_reveal {
    font-size: 0.8em;
    background: var(--system);
    color: var(--system_text);
    padding: 5px 8px;
    border-radius: 5px;
}

.settings__markdown_manager {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.settings__markdown_manager p {
    line-height: 1.5rem;
}

.settings__markdown_manager p:last-of-type {
    margin-bottom: 10px;
}

.settings__markdown_manager table {
    width: 100%;
}

.settings__xero_grid {
    display: grid;
    grid-template-columns: 160px 1fr;
}

.settings__xero_grid > img {
    width: 150px;
}

body.light .settings__markdown_manager {
    background: var(--element_light);
}

body.dark .settings__markdown_manager {
    background: var(--element_dark);
}

/************************************
 LOCATIONS
************************************/
.location_container {
    display: flex;
    gap: 20px;
}

.location_container > div {
    max-height: 410px;
    flex-grow: 1;
}

.location_container > div > form {
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.location_container > div > form > div {
    display: flex;
    gap: 5px;
}

.location_container > div:nth-child(n+2) {
    overflow: auto;
}

body.light .location_container > div > form {
    background: var(--element_light);
}

body.dark .location_container > div > form {
    background: var(--element_dark);
}

/************************************
 GRADES
************************************/
.grade__container {
    padding: 15px !important;
}

.grade__container h2 {
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px 10px;
}

.grade__container p {
    margin-bottom: 10px;
}

.grade__container p:last-of-type {
    margin-bottom: 0;
}

body.light .grade__container h2 {
    background: var(--highlight_light);
}

body.dark .grade__container h2 {
    background: var(--highlight_dark);
}

/************************************
 COUPON CODES
************************************/
.content_form__coupon_cat {
    display: flex;
    margin: 5px 0;
}

.content_form__coupon_cat > span {
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 5px 0 0 5px;
}

.content_form__coupon_cat > a {
    display: flex;
    align-items: center;
    background: var(--error);
    padding: 5px 4px;
    border-radius: 0 5px 5px 0;
}

.content_form__coupon_cat > a > i {
    color: var(--text_dark);
}

body.light .content_form__coupon_cat > span {
    background: var(--highlight_light);
}

body.dark .content_form__coupon_cat > span {
    background: var(--highlight_dark);
}

/************************************
 STATUS PAGE
************************************/
.status__header {
    background: var(--success);
    padding: 7px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.status__header b,.status__header p,.status__header i {
    color:#fff !important;
}

.status__updates div {
    margin-bottom: 10px;
}

.status__notes {
    padding: 7px;
    border-radius: 5px;
    margin-top:5px;
}

body.light .status__notes {
    background: var(--element_light);
    color: var(--text_light);
}

body.dark .status__notes {
    background: var(--element_dark);
    color: var(--text_dark);
}

/************************************
 IMAGE VIEWER
************************************/
.image_viewer__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.image_viewer__content img {
    max-height: 500px;
    border: 1px var(--body_light) solid;
    border-radius: 10px;
}

.image_viewer__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.image_viewer__thumbs > div {
    height: 150px;
    width: 150px;
    overflow: hidden;
    border: 1px var(--body_light) solid;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
}

.image_viewer__thumbs > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image_viewer__thumbs > div .content_form_files_image__button {
    left: 0;
    background: var(--warning);
    cursor: pointer;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 3px;
}

/************************************
 VIDEO VIEWER
************************************/
.video_view_contents {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.video_view_contents__video {
    max-width: 24%;
}

.video_view_contents__video > video {
    width: 100%;
    height: auto;
}

/************************************
 SIGNATURES
************************************/
.signature__input {
    width: 100%;
    max-width: 400px;
    height: 150px;
    background: #fff;
    display: block;
    margin-bottom: 10px;
}

/************************************
 IMAGE EDITOR
************************************/
.image_editor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}

.image_editor .image_editor__src {
    display: none;
}

.image_editor .image_editor__editor {
    border-radius: 5px;
    height: 100%;
}

.image_editor .image_editor__editor * {
    color: #000;
}

.image_editor .image_editor__editor .sc-lxwit0-0.gqbioi.SfxButton-Label {
    color: #fff;
}

/************************************
 IMAGE POPUPS
************************************/
.image_popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.image_popup .image_popup__image {
    max-width: 90vw;
    max-height: calc(100vh - 200px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.image_popup .image_popup__spacer {
    height: 46px;
}

.image_popup .image_popup__controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.image_popup .image_popup__controls a {
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 85px;
    margin: 0;
    color: inherit;
    text-align: center;
    padding: 15px;
    transition: box-shadow 0.2s ease-out;
}

.image_popup .image_popup__controls a:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4) inset;
}

.image_popup .image_popup__controls a:not(:first-child,:last-child) {
    border-left: none;
    border-right: none;
}

.image_popup .image_popup__controls a:first-child {
    border-top-left-radius: 23px;
    border-bottom-left-radius: 23px;
}

.image_popup .image_popup__controls a:last-child {
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
}

body.dark .image_popup .image_popup__controls a {
    background: var(--element_dark);
    color: var(--text_dark);
}

body.light .image_popup .image_popup__controls a {
    background: var(--element_light);
    color: var(--text_light);
}

/************************************
 WYSIWYG
************************************/
#editor_cell > p {
    margin-bottom: 5px;
}

#editor_cell > p > i {
    color: var(--error_highlight);
    font-size: 0.5em;
    vertical-align: top;
    margin-left: 2px;
}

div.ql-toolbar {
    display: flex;
    max-height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0 !important;
    color: var(--system);
}

div.ql-toolbar > span {
    padding: 0.75rem 15px 0.75rem 0;
    margin-right: 0 !important;
}

div:is(.editor, .ql-editor) {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.ql-editor {
    height: 250px;
    background: #fff;
}

div.editor div.ql-tooltip {
    top: 50% !important;
    left: 50% !important;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 100%;
}

div.editor div.ql-tooltip:not(.ql-hidden) {
    display: grid;
    grid-template-columns: 20% 80%;
    border-radius: 10px;
}

div.editor div.ql-tooltip::before, div.editor div.ql-tooltip input {
    margin-top: 40px !important;
}

div.editor div.ql-tooltip .editor_url_heading {
    position: absolute;
    width: 100%;
    background: var(--system);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div.editor div.ql-tooltip .editor_url_heading > div {
    padding: 10px 20px;
}

div.editor div.ql-tooltip .editor_url_heading > div > h3 {
    color: var(--text_dark);
    font-size: 16px;
}

div.editor div.ql-tooltip a.ql-action {
    background: hsl(from var(--system) h s 45%);
    color: var(--text_dark);
    border-radius: 5px;
    margin: 10px 0;
}

.ql-snow.ql-toolbar .ql-formula {
    display: none;
}

.ql-tooltip.ql-editing:not(.ql-hidden) {
    visibility: hidden;
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--system);
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: var(--system);
}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: var(--system);
}

body.dark .ql-editor {
    background: #555;
}

body.dark .ql-snow .ql-fill {
    fill: var(--text_dark);
}

body.dark .ql-snow .ql-stroke {
    stroke: var(--text_dark);
}

body.dark .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    background-color: var(--body_dark);
}

body.dark .ql-container.ql-snow {
    border: 1px var(--highlight_dark) solid;
}

body.light .ql-container.ql-snow {
    border: 1px var(--highlight_light) solid;
}

body.dark .ql-toolbar.ql-snow {
    border: 1px var(--highlight_dark) solid;
}

body.light .ql-toolbar.ql-snow {
    border: 1px var(--highlight_light) solid;
}

/* DASHBOARD MEDIA/CONTAINER QUERIES */
@container (width < 275px) {
    .dashboard_widgets__links > div {
        grid-template-columns: 1fr 1fr;
    }
}

@container (width < 200px) {
    .dashboard_widgets__links > div {
        grid-template-columns: 1fr;
    }
}

/************************************
 TASK ACTION
************************************/
.task_action__buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px 10px 10px 10px;
}

.task_action__cancel {
    border-radius: 5px;
    padding: 5px 13px;
    margin-top: 5px;
    display: inline-flex;
    align-content: center;
    cursor: pointer;
}

.task_action__print_labels {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.task_action__print_labels a {
    font-size: 0.9em;
    cursor: pointer;
}

body.light .task_action__cancel {
    background: var(--highlight_light);
    color: var(--text_light) !important;
}

body.dark .task_action__cancel {
    background: var(--highlight_dark);
    color: var(--text_dark) !important;
}

/************************************
 TABLET — max-width: 1023px
************************************/
@media (max-width: 1023px) {

    /* Hamburger */
    .system_nav__hamburger {
        display: flex;
    }

    /* Sidebar — off-screen by default */
    .system_nav {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 200px !important;
        z-index: 25;
    }

    .system_nav.system_nav--mobile_open {
        transform: translateX(0);
    }

    /* When mobile nav is open, show text & footer like expanded */
    .system_nav.system_nav--mobile_open a {
        justify-content: start;
    }

    .system_nav.system_nav--mobile_open a p {
        display: inline-block;
    }

    .system_nav.system_nav--mobile_open .system_nav__footer {
        display: block;
    }

    /* Hide pin-menu button on mobile/tablet */
    .system_nav_head__expand {
        display: none !important;
    }

    /* Allow submenus to open when mobile nav is open */
    .system_nav.system_nav--mobile_open .system_nav__submenu {
        grid-template-rows: 0fr !important;
        transition: grid-template-rows 0.3s ease-out !important;
    }

    .system_nav.system_nav--mobile_open .system_nav_submenu--expanded {
        grid-template-rows: 1fr !important;
    }

    /* Disable expanded/fixed classes on small screens */
    .system_nav--expanded,
    .system_nav--fixed {
        transform: translateX(-100%);
        width: 200px !important;
    }

    .system_nav--expanded.system_nav--mobile_open,
    .system_nav--fixed.system_nav--mobile_open {
        transform: translateX(0);
    }

    /* Header — fixed position + remove sidebar offset */
    header {
        position: fixed;
        padding-left: 50px;
    }

    header.header--fixed {
        padding-left: 50px;
    }

    /* Company name truncation */
    .header__company {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Content — tablet padding */
    .content {
        padding: 60px 10px 10px 10px;
    }

    /* Allow wide tables to scroll horizontally without pushing the page */
    .overview_table {
        overflow-x: auto;
    }

    .content--fixed {
        padding: 60px 10px 10px 10px;
    }

    .content--blank {
        padding: 60px 10px 10px 10px;
    }

    /* Message box repositioning */
    .content__msg_box {
        left: 10px;
        width: calc(100% - 20px);
    }

    .content--fixed .content__msg_box,
    .content__msg_box:has(+ .content--fixed) {
        left: 10px !important;
        width: calc(100% - 20px) !important;
    }

    /* Footer — full-width padding */
    footer {
        padding: 10px 15px;
        flex-wrap: wrap;
    }

    .footer--fixed {
        padding: 10px 15px;
    }

    /* Content sidebar — stack vertically on tablet */
    .content__sidebar {
        flex-direction: column;
        gap: 15px;
    }

    /* Settings side nav — horizontal wrapping tabs on tablet/mobile */
    .content__side_nav {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .content__side_nav a {
        display: inline-flex;
        min-width: auto;
        text-align: center;
    }

    .content__side_nav a i {
        display: none;
    }

    /* Content headers wrap */
    .content__header {
        flex-wrap: wrap;
        gap: 5px;
    }

    .content__sub_header {
        flex-wrap: wrap;
        gap: 5px;
    }

    .content_header__buttons {
        flex-wrap: wrap;
    }

    /* Filter bar — wrap naturally */
    .content_header__form form {
        flex-wrap: wrap;
    }

    /* Form-level submit buttons — wrap with gap */
    .content__form > .action_btn,
    form.content__form > .action_btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    .content_header__form form input,
    .content_header__form form select {
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .content_header__form form button {
        flex: 1 1 100%;
    }

    /* Override delivery form specific max-widths */
    .content_header__form .delivery_vehicles__form select,
    .content_header__form .delivery_vehicles__form input[type="number"] {
        max-width: none !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Form tables — 2-column flex layout */
    .content__form fieldset table,
    .content__form fieldset table tbody {
        display: block;
        width: 100%;
    }

    .content__form fieldset table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .content__form fieldset table td {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
        display: block;
        padding: 5px;
    }

    /* Data-entry grid tables — vertical reflow on tablet/mobile */
    .order__items thead,
    .quote__items thead,
    .oem_parts__items thead,
    .refund__items thead,
    .stock__items thead {
        display: none;
    }

    .order__items table,
    .order__items tbody,
    .quote__items table,
    .quote__items tbody,
    .oem_parts__items table,
    .oem_parts__items tbody,
    .refund__items table,
    .refund__items tbody,
    .stock__items table,
    .stock__items tbody {
        display: block;
        width: 100%;
    }

    .order__items tr,
    .quote__items tr,
    .oem_parts__items tr,
    .refund__items tr,
    .stock__items tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--highlight_dark);
    }

    .order__items tr td,
    .quote__items tr td,
    .oem_parts__items tr td,
    .refund__items tr td,
    .stock__items tr td {
        display: block;
        width: 100% !important;
        padding: 3px 0;
    }

    /* Show per-cell labels where they exist in the DOM */
    .order__item label,
    .order__item .content_form__label,
    .stock__item label,
    .stock__item .content_form__label,
    .quote__item label,
    .quote__item .content_form__label {
        display: flex;
    }

    /* Generate labels from data-label attribute on td */
    .stock__item td[data-label]::before,
    .order__item td[data-label]::before,
    .quote__item td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.85em;
        opacity: 0.7;
        margin-bottom: 2px;
    }

    /* Remove row button — inline on mobile */
    .stock__item td:last-child,
    .order__item td:last-child,
    .quote__item td:last-child {
        position: static !important;
        text-align: right;
        padding-top: 8px !important;
    }

    .stock_item__remove,
    .quote_item__remove,
    .order_item__remove {
        position: static !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .order_item__remove span,
    .quote_item__remove span,
    .stock_item__remove span {
        display: inline !important;
    }

    body.light .order__items tr,
    body.light .quote__items tr,
    body.light .oem_parts__items tr,
    body.light .refund__items tr,
    body.light .stock__items tr {
        border-bottom-color: var(--highlight_light);
    }

    /* Overview tables — search/filter wrap */
    .overview_table_container__search {
        flex-wrap: wrap;
    }

    .overview_table_container_search__filter {
        flex-wrap: wrap;
    }

    .overview_table_container__header {
        flex-wrap: wrap;
        gap: 5px;
    }

    /* Overview table pagination */
    .overview_table__pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 5px 10px;
    }

    .overview_table_pagination__count {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.85em;
        opacity: 0.8;
    }

    .overview_table_pagination__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .overview_table_pagination__links a {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
    }

    /* Overview multi-actions full width */
    .overview_table__multi_actions {
        flex-wrap: wrap;
    }

    /* Ensure tables scroll horizontally without squishing */
    .overview_table table {
        min-width: 900px;
    }

    /* Search input — full width on mobile/tablet */
    .overview_table_container_search__input {
        flex-grow: 1;
    }

    .overview_table_container_search__input input {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Search stats — stack vertically */
    .search_stats {
        flex-direction: column;
    }

    .search_stats > .search_stats__contents {
        width: 100%;
    }

    /* Task action buttons */
    .task_action__buttons {
        flex-wrap: wrap;
    }

    .task_action__print_labels {
        flex-wrap: wrap;
    }

    /* Dashboard — 2 columns */
    .dashboard_widgets {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Fix quick links container query — must be inline-size only */
    .dashboard_widgets__links {
        container-type: inline-size;
    }

    /* Match country select height to inputs */
    .country_select--selected {
        min-height: 36px;
        align-items: center;
    }

    /* Dialogs — scale to viewport */
    dialog {
        min-width: unset;
        max-width: calc(100vw - 20px);
        width: calc(100vw - 20px);
    }

    dialog.fixed_small {
        width: calc(100vw - 20px);
    }

    dialog.fixed_xl {
        width: calc(100vw - 10px);
        height: 95vh;
    }

    /* Dialog buttons wrap */
    .dialog__content button,
    dialog div.dialog__content a {
        white-space: normal;
    }

    /* Stats widgets — 2 columns */
    .stats_content__widgets {
        grid-template-columns: 1fr 1fr;
    }

    /* Image galleries wrap */
    .content_form__files {
        display: flex;
        flex-wrap: wrap;
    }

    /* Message widget full-width */
    .message_widget {
        width: 100%;
        right: 0;
        left: 0;
    }

    /* Locations — stack columns */
    .location_container {
        flex-wrap: wrap;
    }

    .location_container > div {
        flex: 1 1 100%;
        max-height: none;
    }

    .location_container > div > form > div {
        flex-wrap: wrap;
    }

    .location_container > div > form > div input,
    .location_container > div > form > div select {
        flex: 1 1 100%;
    }
}

/************************************
 MOBILE — max-width: 599px
************************************/
@media (max-width: 599px) {

    /* Content — mobile padding */
    .content {
        padding: 55px 5px 5px 5px;
    }

    .content--fixed {
        padding: 55px 5px 5px 5px;
    }

    .content--blank {
        padding: 55px 5px 5px 5px;
    }

    /* Header tighter */
    header {
        padding: 7px 10px 7px 50px;
        gap: 10px;
    }

    /* Footer */
    footer {
        padding: 10px;
        gap: 8px;
        font-size: 0.85em;
    }

    .footer__company {
        flex-basis: 100%;
        text-align: center;
    }

    footer a {
        flex-basis: 100%;
        text-align: center;
    }

    /* Form tables — single column */
    .content__form fieldset table td {
        flex: 1 1 100%;
    }

    /* Prevent iOS auto-zoom on inputs */
    input:not([type=checkbox]):not([type=radio]):not([type=file]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Overview table — remove tablet min-width so tables fit mobile viewport */
    .overview_table table {
        min-width: auto;
    }

    /* Overview table — touch-friendly rows */
    .overview_table thead th,
    .overview_table tbody td {
        padding: 8px 6px;
    }

    /* Keep all hidden span labels hidden on mobile — horizontal scroll
       with full table headers provides enough context */

    /* Dashboard — single column */
    .dashboard_widgets {
        grid-template-columns: 1fr;
    }

    /* Dashboard links grid — 2 columns */
    .dashboard_widgets__links > div {
        grid-template-columns: 1fr 1fr;
    }

    /* Dialogs — nearly full screen */
    dialog {
        width: calc(100vw - 10px);
        max-width: calc(100vw - 10px);
        max-height: 90vh;
    }

    dialog.fixed_small {
        width: calc(100vw - 10px);
    }

    /* Stats widgets — single column */
    .stats_content__widgets {
        grid-template-columns: 1fr;
    }

    /* Search filter and input — stack on mobile */
    .overview_table_container__search {
        flex-direction: column;
    }

    .overview_table_container_search__filter {
        width: 100%;
        justify-content: flex-start;
    }

    .overview_table_container_search__input {
        width: 100%;
    }

    /* Overview table tabs — scrollable */
    .overview_table__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Content header info tables scroll */
    .content_header__info table {
        display: block;
        overflow-x: auto;
    }

    /* Image viewer — full width */
    .image_viewer__container {
        width: 100%;
    }

    /* Filter bar — stack on mobile */
    .content_header__form form {
        flex-direction: column;
        align-items: stretch;
    }

    .content_header__form form label {
        white-space: normal;
    }

    .content_header__form form input,
    .content_header__form form select {
        width: 100% !important;
        max-width: none !important;
    }

    /* Counter sale side nav */
    .counter_sale__side_nav {
        flex-direction: column;
    }

    /* Content form files — smaller thumbnails */
    .content_form_files__image_link {
        width: 100px;
        height: 100px;
    }

    /* Pagination — compact for portrait mobile */
    .overview_table__pagination {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 8px 5px;
    }

    .overview_table_pagination__count {
        font-size: 0.8em;
    }

    .overview_table_pagination__links {
        gap: 3px;
    }

    .overview_table_pagination__links a {
        min-width: 32px;
        min-height: 32px;
        padding: 4px 8px;
        font-size: 0.85em;
    }

    /* Locations — tighter spacing on mobile */
    .location_container {
        gap: 10px;
    }
}

/************************************
 TOUCH-FRIENDLY SIZING
 Applies to both tablet and mobile
************************************/
@media (max-width: 1023px) {

    /* Nav links — larger tap targets */
    .system_nav a {
        min-height: 36px;
    }

    /* Buttons — comfortable touch height */
    .action_btn {
        min-height: 36px;
        padding: 7px 15px;
    }

    /* Pagination links — larger tap targets */
    .overview_table__pagination a {
        padding: 8px 12px;
    }

    /* Hide individual action buttons on mobile */
    .overview_table__links > div > div {
        display: none !important;
    }

    /* Hide the desktop overflow menu on mobile */
    .overview_table__links .overview_table_links__more {
        display: none !important;
    }

    /* Show the Actions button on mobile */
    .overview_table_links__actions_btn {
        display: inline-block;
        padding: 6px 14px;
        font-size: 0.85em;
        border: 1px solid var(--system);
        border-radius: 4px;
        background: var(--system);
        color: var(--system_text);
        cursor: pointer;
        min-height: 36px;
    }

    /* Actions modal — action list styling */
    .overview_table_links__actions_list > div {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 5px;
        border-radius: 8px;
    }

    .overview_table_links__actions_list > div:empty {
        display: none !important;
    }

    .overview_table_links__actions_list > .overview_table_links__more {
        display: none !important;
    }

    dialog div.dialog__content.overview_table_links__actions_list > div a {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        width: 100%;
        padding: 12px 15px;
        border-radius: 6px;
        margin-top: 0;
    }

    .overview_table_links__actions_list > div a::after {
        content: attr(title);
    }

    .overview_table_links__actions_list > div i {
        font-size: 1.2em;
    }

    .overview_table_links__actions_list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .overview_table_links__actions_dialog .dialog__buttons {
        margin-top: 4px;
    }

    .overview_table_links__actions_dialog .dialog__buttons button {
        width: 100%;
        padding: 12px 15px;
        border-radius: 6px;
    }

    dialog div.dialog__content.overview_table_links__actions_list > div a:has(i.--red) {
        background: var(--error);
        color: #fff !important;
    }

    dialog div.dialog__content.overview_table_links__actions_list > div a:has(i.--red) i {
        color: #fff !important;
    }

    /* Overview tabs — bigger tap targets */
    .overview_table__tabs a {
        padding: 12px 15px 8px 15px;
    }

    /* Inputs/selects — slightly taller */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([name=search]),
    select,
    textarea {
        min-height: 36px;
    }
}