body {
    font-family: 'EncodeSans';
    background-color: var(--color-white) !important;
    color: var(--color-textprimary);
}

.app-body .main {
    padding-bottom: 50px;
}

h1, .container-fluid h2 span.text-capitalize {
    font-size: 1.35rem;
    font-weight: 600;
    padding: 10px 0 15px 0;
    color: var(--color-highlight);
}

h3 {
    font-size: 24px;
    font-weight: 700;
    padding: 10px 0 15px 0;
    color: var(--color-highlight);
}

@media (min-width: 991.98px) {
    h3 {
        font-size: 36px;
    }
}

.container-fluid h2 span.text-capitalize {
    display: inline-block;
}

/* links & buttons */
a, .btn-link {
    color: var(--color-highlight);
}

a:hover, .btn-link:hover {
    color: var(--color-text-strong);
}

.page-item.active .page-link {

}

table.table-hover tbody tr:hover {
    background-color: rgba(237, 136, 18, .1)
}

.btn-success, .btn-primary {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.btn-success:hover, .btn-primary:hover {
    background-color: var(--color-hover) !important;
    border-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-textprimary);
    color: var(--color-textprimary);
}

.btn-secondary:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    color: var(--color-hover-invert);
}

/* dialogs */
.swal-button--danger:not([disabled]):hover, .swal-button--danger:not([disabled]) {
    background-color: var(--color-highlight);
}

/* sweetalert (v1, package "sweetalert") injects its own default CSS at runtime with a
   hardcoded white modal/dark text - it has no theme awareness of its own. */
[data-theme="dark"] .swal-modal {
    background-color: var(--color-white);
}
[data-theme="dark"] .swal-title,
[data-theme="dark"] .swal-text {
    color: var(--color-text-strong);
}

/* alerts */
.noty_theme__backstrap.noty_type__success {
    /* background-color: var(--color-highlight); */
}


/* header */
.app-header .logo {
    display: inline-block;
}

.app-header .header-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 991.98px) {
    .sidebar-lg-show .app-header .header-side {
        background-color: var(--color-white);
        padding-right: .6rem;
        border-right: 1px solid var(--color-border-light-1);
        width: 250px !important;
    }
}


.app-header .navbar-brand {
    width: 190px;
}

.app-header.background {
    background: var(--color-topbar);
}

@media (max-width: 991.98px) {
    .navbar-nav .logout {
        display: none;
    }
}

.navbar-toggler {
    margin-left: 20px;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    text-decoration: none;
    outline: none;
    text-shadow: none;
}

.app-header .navbar-toggler-icon {
    height: 23px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.app-body .sidebar {
    flex: 0 0 250px !important;
}

html:not([dir="rtl"]) .sidebar {
    margin-left: -250px;
}

/* .sidebar > .sidebar-nav already has overflow-y: auto from the theme. On mobile - where
   the sidebar is position:fixed with a capped height - a long menu needs momentum scrolling
   (iOS Safari) and must not chain its scroll to the page underneath once it hits the top/bottom
   of its own list, or a swipe inside the menu ends up scrolling the page behind it instead.
   overscroll-behavior: contain must stay scoped to that mobile case: on desktop the nav
   list commonly has nothing to scroll internally, and a contained scroll container with no
   overflow of its own swallows the wheel event instead of letting it scroll the page. */
@media (max-width: 991.98px) {
    .sidebar > .sidebar-nav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overflow-y: auto
    }
}

.app-footer {
    display: none;
}

.sidebar .sidebar-nav, .sidebar .nav {
    width: 250px !important;
}

.sidebar .nav-item, .sidebar .nav-item.open, .sidebar .nav-item .nav-dropdown-items .nav-item {
    padding: 1px 0 0 0;
    background: inherit;
}

.sidebar .nav-item .nav-dropdown-items {
    background-color: var(--color-surface-light-1);
}

.sidebar .nav-item .nav-dropdown-items .nav-link {
    background-color: var(--color-surface-light-2);
}

.sidebar .nav-item {
    position: relative;
}

.sidebar .nav-opener {
    position: absolute;
    right: 0px;
    width: 40px;
    height: 35px;
    top: 0;
}

.sidebar .nav-link {
    padding: .5rem 1rem;
}

.sidebar ul ul .nav-link {
    padding-left: 2.2rem;
}

.sidebar ul ul ul .nav-link {
    padding-left: 3.35rem;
}

.custom-sidebar {
}

.custom-sidebar .nav-link {
    background-color: var(--color-surface-light-3);
    color: var(--color-font-nav) !important;
    font-weight: 400;
}

.sidebar .nav-link .nav-icon {
    color: var(--color-font-nav) !important;
    margin-right: .3rem;
    display: none;
}

.sidebar .nav-item .nav-link:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
    font-weight: 400;
}

.sidebar .nav-link.active .nav-icon {
    color: var(--color-hover-invert) !important;
}

.custom-sidebar.background {
    background-color: var(--color-white);
}

.custom-sidebar ul ul .nav-icon {
    display: none !important;
}

.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-text-strong) !important;
    color: var(--color-white) !important;
    font-weight: 700;
    padding-top: 25px;
    padding-bottom: 25px;
}

.sidebar .nav-item.user > .nav-link .role {
    position: absolute;
    pointer-events: none;
    color: var(--color-highlight) !important;
    font-weight: 700;
}

.sidebar .nav-item.seperator > .nav-link {
    background-color: var(--color-text-strong) !important;
    color: var(--color-white) !important;
    font-weight: 700;
}

/* pinned-to-top nav item (e.g. Dashboard) - a subtle divider to set it apart from the rest */
.sidebar .nav-item.nav-item-pinned-top a {
    border-left: 1px solid var(--color-highlight) !important;
    border-right: 1px solid var(--color-highlight) !important;
}

/* topbar actions (theme toggle, help, account, logout) */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: 1.5rem;
}

.topbar-icon-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-highlight2);
    font-size: 1.4rem;
}

.topbar-icon-btn:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--color-highlight);
}

.theme-toggle-icon-plain {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1500;
}

.userhelp-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    z-index: 1040;
}

.userhelp-backdrop.open {
    display: block;
}

.userhelp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 90vw;
    background-color: var(--color-white);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.userhelp-panel.open {
    transform: translateX(0);
}

.userhelp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-borderdecent);
    flex-shrink: 0;
}

.userhelp-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-textprimary);
}

.userhelp-panel-close {
    color: var(--color-textprimary);
    font-size: 1.3rem;
}

.userhelp-panel-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    color: var(--color-textprimary);
}

.userhelp-panel-body .markdown h1 {
    font-size: 1.3rem;
}

.userhelp-panel-body .markdown h2 {
    font-size: 1.1rem;
    margin-top: 1.5em;
}

.userhelp-panel-body .markdown ul,
.userhelp-panel-body .markdown ol {
    padding-left: 1.3em;
}

.userhelp-panel-body .markdown code {
    background-color: var(--color-input-alt);
    padding: 1px 4px;
    border-radius: 3px;
}

/* calendar */
.calendar-years {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.calendar-year td {
    vertical-align: top;
}

.calendar {
    border-collapse: separate;
}

.calendar td {
    text-align: center;
    padding: 4px;
}

.calendar td.default {
    background-color: var(--color-surface-light-3);
}

.calendar td.marked {
    background-color: var(--color-highlight);
}

.calendar td.now {
    background-color: var(--color-white);
    border: 2px solid var(--color-textprimary);
}

.calendar table td {
    font-weight: bold;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.calendar-legend-swatch.default {
    background-color: var(--color-surface-light-3);
}

.calendar-legend-swatch.marked {
    background-color: var(--color-highlight);
}

.calendar-legend-swatch.now {
    background-color: var(--color-white);
    border: 2px solid var(--color-textprimary);
}

.bookingdetails .images {
    display: none;
}


/* paging */
.pagination {
    font-size: .9em;
    display: flex;
    justify-content: right;
}

.pagination .flex {
    display: flex;
}

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

.pagination .item-center {
    align-items: center;
}

.pagination .justify-between {
    justify-content: space-between;
}

.pagination a {
    font-size: .9em;
}

.pagination svg {
    width: 20px;
    height: 20px;
}

.page-item.active .page-link {
    background-color: var(--color-highlight);
    border-color: var(--color-highlight);
    color: var(--color-highlight-invert);
}

.page-item.active .page-link:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    color: var(--color-hover-invert);
}

.page-link {
    color: var(--color-black);
}

/* dasbhoard */

.dashboard-blocks .content {
    /* border: 1px solid var(--color-surface-light-3);
    padding: .4em;*/
}

.dashboard-blocks li {
    list-style: none;
    border: 1px solid var(--color-surface-light-3);
    margin: 0;
    padding: .2em 1em;
    margin-bottom: .2em;
}

@media (min-width: 991.98px) {
    .dashboard-blocks {
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-blocks ul {
        margin: 0;
        padding: 0;
    }

    .dashboard-blocks > div {
        margin-right: 15px;
        width: 375px;
    }
}

/* widgets */
.xdashboard {
    display: block;
}

@media (min-width: 991.98px) {
    .xdashboard {
        display: flex;
        justify-content: space-between;
        gap: .6rem;
    }
}

.xdashboard-3col .connectedSortable {
    width: 33.3%;
}

.xdashboard-3colm #position-0.connectedSortable {
    width: 25%;
}

.xdashboard-3colm #position-1.connectedSortable {
    width: 50%;
}

.xdashboard-3colm #position-2.connectedSortable {
    width: 25%;
}

.xdashboard-2col .connectedSortable {
    width: 50%;
}

.xdashboard-2coll #position-0.connectedSortable {
    width: 67%;
}

.xdashboard-2coll #position-1.connectedSortable {
    width: 33%;
}

.xdashboard-2colr #position-0.connectedSortable {
    width: 33%;
}

.xdashboard-2colr #position-1.connectedSortable {
    width: 67%;
}

.xdashboard-1col .connectedSortable {
    width: 100%;
}

.xdashboard .connectedSortable {
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 20px 0;
    float: left;
}

.xdashboard .connectedSortable > div {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.connectedSortable > div.ui-sortable-placeholder {
    visibility: visible !important;
    margin-bottom: 20px !important;
    background-color: #fcefa1;
}

@media (max-width: 1430px) {
    .xdashboard .connectedSortable {
        width: 100% !important;
    }

    .xdashboard .connectedSortable > div {
        padding: 0 !important;
    }
}


.widget-element.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    margin: 0 !important;
}

.widget-element.fullscreen .block {
    border-radius: 0 !important;
    margin: 0 !important;
}

.widget-element.fullscreen .fa-window-maximize {
    display: none;
}

.widget-element.fullscreen .fa-window-restore {
    display: inline-block;
}

.widget-element .fa-window-restore {
    display: none;
}

.xdashboard .connectedSortable > div > .block {
    margin-bottom: .6rem;
}

.xdashboard .connectedSortable > div > .block.transparent {
    border: 1px solid transparent;
}

.xdashboard .connectedSortable > div > .block > .content {
    margin-bottom: 0px;
}

.xdashboard .connectedSortable > div > .block > .content > .inner {
    overflow-y: auto;
}

.xdashboardlayout {
    display: none;
}

.xdashboardpages {
    display: flex;
    gap: .2rem;
    flex-grow: 1;
}

.xdashboardheader {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: .2rem;
}

.xdashboardheader h1 {
    width: 100%;
    padding: 0;
    flex-grow: 1;
    margin: 0 0 .5rem 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.xdashboardform {
    flex-shrink: 1;
    flex-grow: 1;
}

.xdashboardform fieldset {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
}

@media (min-width: 1430px) {
    .xdashboardform {
        flex-grow: 0;
    }

    .xdashboardpages {
        justify-content: center;
    }

    .xdashboardheader h1 {
        width: auto;
        margin: 0;
    }

    .xdashboardlayout {
        display: flex;
        gap: .2rem;
    }
}

.widget-registrationswidget .user-latest > div {
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-medium);
}

.widget-registrationswidget .user-latest > div:last-child {
    border-bottom: 0;
}

.widget-form label.label {
    font-size: .8rem;
    display: block;
    margin: 10px 0 0 0;
}

.widget-form button {
    font-size: .8rem;
}

.widget-form {
    margin-bottom: 20px;
}

.widget-form input {
    width: 100%;
}

.widget-form input[type=checkbox] {
    width: auto;
}

/* widget lists */
.widget-item-list > div {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border-medium);
}

.widget-item-list > div:last-child {
    border-bottom: 0;
}

.widget-item-list > div > .more {
    white-space: nowrap;
    text-align: right;
    padding-left: 25px;
}

.widget-attributes > div {
    display: flex;
    align-items: stretch;
    margin-bottom: 2px;
}

.widget-attributes > div .icon {
    background-color: var(--color-border-medium);
    border-radius: 4px;
    padding: 0px 5px;
    margin-right: 5px;
}

.widget-attributes > div.value {
    flex-grow: 1;
}

.widget-attributes-new i {
    font-size: 2.4em;
}

.widget-attributes-new > div {
    display: flex;
    margin-bottom: 0.3rem;
    gap: 0.5rem;
}

.widget-attributes-new .data {
}

.widget-attributes-new .label {
    font-weight: bold;
    font-size: .7rem;
    line-height: 1rem;
}

.widget-attributes-new .labelx {
    background-color: var(--color-highlight);
    font-size: .8rem;
    font-weight: bold;
    color: var(--color-white) !important;
    margin-bottom: 0;
    padding: 0px 5px;
    display: block;
    width: min-content;
    white-space: nowrap;
}

.widget-tag {
    background-color: var(--color-white);
    padding: .2em 1em;
    border-radius: 5px;
    display: inline-block;
    font-size: .8rem;
    margin-bottom: 2px;
}

.default-tag {
    background-color: var(--color-highlight);
    color: var(--color-white);
    padding: .2em 1em;
    border-radius: 5px;
    display: inline-block;
    font-size: .8rem;
    margin-bottom: 2px;
}

a.checked, a.checked:hover {
    background-color: palegreen !important;
}

li.ui-tabs-active.ui-state-active a.checked {
    background-color: #83d983 !important;
}

/* filter */
.customsearchfilter .elements {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.customsearchfilter .elements > div {
    margin-right: 10px;
    min-width: 120px;
}

.customsearchfilter .checkboxes {
    display: flex;
}

.customsearchfilter .checkboxes .checkboxesoptions {

}

.customsearchfilter .checkboxes input {
    margin-right: 3px;
}

.customsearchfilter .checkboxes label {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.customsearchfilter .form-control[type="text"] {
    /*font-size: .8rem;
    padding: .2rem .5rem;*/
    height: auto;
    padding-left: .25rem;
    padding-right: .25rem;
}

.customsearchfilter .filter-advanced {
}

.customsearchfilter span.label {
    font-weight: 600;
}

.customsearchfilter-select2 {
    min-width: 166px;
    max-width: 400px;
}

div.customsearchfilter-range > span, div.customsearchfilter-numberrange > span {
    line-height: 2rem;
}

div.customsearchfilter-range, div.customsearchfilter-numberrange {
    display: flex;
    align-items: stretch;
}

.customsearchfilter-range input, .customsearchfilter-numberrange input {
    max-width: 100px;
    text-align: center;
}

div.customsearchfilter-compare {
    display: flex;
    align-items: stretch;
}

div.customsearchfilter-compare select {
    max-width: 200px;
}

div.customsearchfilter-compare select:nth-child(2) {
    max-width: 40px;
}

/* model files */
.modelfiles {
    display: flex;
    flex-wrap: wrap;
}

.modelfiles .modelfile {
    border: 1px solid var(--color-border-medium);
    margin: 0 5px 5px 0;
    text-align: center;
}

.modelfiles .modelfile .modelfileicon {
    font-size: 3rem;
}

.modelfiles .modelfile .modelfileimage {
    max-height: 50px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-small {
    max-height: 50px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-medium {
    max-height: 100px;
    max-width: 200px;
}

.modelfiles .modelfile .modelfileimage-large {
    max-height: 150px;
    max-width: 200px;
}

.modelfiles .modelfile .delete {
    float: right;
}

.modelfiles .modelfile .title {
    font-size: .7rem;
    display: block;
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 2px;
}

.modelfiles-table {
    width: 100%;
    border-collapse: collapse;
}

.modelfiles-table td {
    border-bottom: 1px solid var(--color-border-light-3);
    padding: 8px 6px;
    vertical-align: top;
}

.modelfiles-table .modelfiles-table-icon {
    width: 50px;
    text-align: center;
}

.modelfiles-table .modelfiles-table-icon img {
    max-width: 100%;
}

.modelfiles-table .modelfiles-table-icon .modelfileicon {
    font-size: 2rem;
}

.modelfiles-table .modelfiles-table-name {
    font-weight: 500;
}

.modelfiles-table .modelfiles-table-name .delete {
    float: right;
}

.modelfiles-table .modelfiles-table-date {
    font-size: .8rem;
    color: var(--color-text-faint-1);
    margin-bottom: 4px;
}

.modelfiles-table .modelfiles-table-commentform {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

.modelfiles-table .modelfiles-table-comment {
    flex: 1;
}

.table.dataTable th {
    background-color: var(--color-row-tint);
    font-weight: 600;
    font-size: .9rem;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none !important;
    background-color: var(--color-row-tint);
}

table.dataTable.table-striped > tbody > tr.odd > * {
    box-shadow: none !important;
}

table.dataTable.table-striped > tbody > tr.event > * {
    box-shadow: none !important;
}

.table-striped tbody tr:nth-of-type(2n) {
    background-color: transparent !important
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none !important;
}

/* tabs */
.ui-tabs-nav {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.ui-tabs-nav li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ui-tabs-nav li a {
    display: block;
    padding: .5em 1em;
    border: 1px solid var(--color-borderdecent);
    color: var(--color-textprimary);
}

.ui-tabs-nav li a:hover {
    background-color: var(--color-white);
    text-decoration: none;
}

.ui-tabs-nav li.ui-state-active a {
    background-color: var(--color-headers);
}

/* tables */
.table-compact td {
    padding: 3px 5px;
}

.table-compact th {
    padding: 3px 5px;
}

.table {
    color: var(--color-font-table);
}

/* widgetautocomplete */
.widgetautocomplete .results a {
    padding: 6px 12px;
    display: block;
    cursor: pointer;
}

.widgetautocomplete .results a:hover {
    background-color: #337ab7;
    color: var(--color-white);
    text-decoration: none;
}

.widgetautocomplete .results {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.widgetautocomplete .results:empty {
    box-shadow: none;
}

/* filedropzone */
.filedropzone {
    padding: 20px;
    border: 3px dashed var(--color-headers);
    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-headers);
}

.filedropzone.active {
    border-style: solid;
}

/* fields */
.issue-set-estimated:focus {
    background-color: var(--color-white) !important;
}


/* result lists */
.resultlist-tagslike {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.resultlist-tagslike .like {
    font-size: 2rem;
    line-height: 1rem;
}

.resultlist-blocks .image {
    background-color: var(--color-white);
    padding: 5px;
}

.resultlist-blocks .images {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    margin: 1.5rem 0;
    gap: .5rem;
}

.resultlist-blocks .image img {
    max-width: 100%;
    max-height: 95px;
}

@media (min-width: 991.98px) {
    .resultlist-blocks {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
        align-items: stretch;
    }

    .resultlist-blocks .single {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(25% - 15px);
        margin-right: 14px;
    }
}

.resultlist-blocks .single {
    position: relative;
    border: 1px var(--color-surface-light-3) solid;
    padding: 10px;
    padding-bottom: 55px;
    margin-bottom: 30px;
    background-color: var(--color-surface-warm);
}

.resultlist-blocks .single h2 {
    font-size: 1.2rem;
    line-height: 1.3rem;
    padding-right: 2rem;
}

.resultlist-blocks .actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.resultlist-blocks .elements span {
    background-color: var(--color-white);
    padding: .2em 1em;
    border-radius: 5px;
    display: inline-block;
    font-size: .8rem;
    margin-bottom: 2px;
}

/* theme: layout */
html {
    font-size: 14px
}
body {
    font-size: inherit;
}

/* logo */
.app-header .navbar-brand {
    width: 200px;
    justify-content: left;
    padding-left: 30px;
    box-sizing: border-box;
}
.sidebar-lg-show .app-header .navbar-brand {
    padding-left: 20px;
}
@media (max-width: 992px) {
    .app-header .navbar-brand {
        padding-left: 20px;
    }
}
.app-header .logo, .standalone-logo {
    width: 200px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url('images/logo.svg');
    margin-left: 10px;
}
[data-theme="dark"] .app-header .logo, [data-theme="dark"] .standalone-logo {
    background-image: url('images/logodark.svg');
}
.app-branding {
    padding-top: 2rem;
    font-size: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -1rem;
}
.app-branding span {
    display: inline-block;
    width: 90px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url('images/logo.svg');
}
[data-theme="dark"] .app-branding span {
    background-image: url('images/logodark.svg');
}

/* theme: misc */
.btn {
    border-radius: 0 !important;
}
.card {
    box-shadow: var(--shadow-sm);
    border-width: 0;
}
.navbar-toggler {
    margin-left: 0;
    padding-right: 0 !important;
    display: inline-block;
    text-align: right;
}
@media (max-width: 991.98px) {
    .app-header .navbar-toggler {
        margin-left: -3px !important;
    }
}
.navbar-toggler-icon {
    width: 1rem;
}
.pagination > li > a {
    border-radius: 0 !important;
}
.widget-tag {
    background-color: var(--color-headers) !important;
}

/* theme: tabs */
.customtabs {
    position: relative;
    margin-bottom: 20px;
    padding: 18px 10px 10px;
    font-size: .8rem;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
}

.customtabs .customtabs-header {
    position: absolute;
    left: 20px;
    top: -12px;
    display: flex;
}

.customtabs .customtabs-header a {
    background-color: var(--color-headers);
    color: var(--color-headers-invert);
    padding: .2em 1em;
    border-radius: 5px;
    display: inline-block;
    display: inline-block;
    font-size: .8rem;
    margin-right: 5px;
}

.customtabs .customtabs-header a.active {
    background-color: var(--color-highlight);
    color: var(--color-highlight-invert);
}

.customtabs .customtabs-header a:hover {
    background-color: var(--color-hover);
    color: var(--color-hover-invert);
    text-decoration: none;
}

.customtabs .customtabs-body > div {
    display: none
}

.customtabs .customtabs-body > div.active {
    display: block
}

.customtabs .customtabs-header a {
    border-radius: 0.3rem !important;
}
.customtabs .customtabs-header a {
    background-color: var(--color-headers);
    color: var(--color-text-muted);
}
.customtabs .customtabs-header a {
    border-radius: 0 !important;
}

/* theme: main */
.app-body .main {
    background-color: var(--color-row-tint);
}
.main .container-fluid {
    padding: 0 30px;
}
@media (max-width: 992px) {
    .main .container-fluid {
        padding: 0 20px;
    }
}

/* theme: nav */
.custom-sidebar .nav-link {
    background-color: var(--color-surface-light-4) !important;
}
.sidebar .nav {
    border-right: 1px solid var(--color-border-light-2);
    background-color: var(--color-white);
}
.sidebar .nav-item {
    font-size: .95rem;
}
.sidebar .nav-item.seperator > .nav-link {
    background-color: var(--color-headers) !important;
    color: var(--color-text-strong) !important;
    font-weight: 700;
}
.custom-sidebar .nav-link.active, .sidebar .nav-item .nav-dropdown-items .nav-link.active, .custom-sidebar .nav-link.active {
    background-color: var(--color-topbar) !important;
    color: var(--color-white) !important;
}
.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-headers) !important;
    color: var(--color-text-strong) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link {
    background-color: var(--color-white) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link:hover {
    background-color: var(--color-hover) !important;
}
.sidebar .nav-item.user .nav-dropdown-items .nav-link {
    background-color: var(--color-headers) !important;
}
.sidebar .nav-item .nav-link.active {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item.seperator {
    text-align: right;
}
.sidebar .nav-item.seperator > .nav-link, .sidebar .nav-item.seperator > .nav-link:hover {
    background-color: transparent !important;
    color: var(--color-text-faint-3) !important;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* theme: global search */
.global-search {
    margin-left: 30px;
    position: relative;
    flex-grow: 1;
    margin-right: 20px;
    z-index: 100;
}
@media (max-width: 992px) {
    .global-search {
        margin-left: 20px;
    }
}
.global-search-bar {
    border-radius: 0.3rem !important;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}
.global-search-bar:focus {
    border: 1px solid var(--color-border-medium) !important;
}
.global-search-filters {
    border-radius:  0 0 0.3rem 0.3rem !important;
    top: calc(100% - 0.3rem);
    position: absolute;
    flex-wrap: wrap;
    width: 100%;
    min-height: 50px;
    gap: 2%;
    background-color: var(--color-white);
    padding: 10px;
    top: 100%;
    left: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px;
}

.global-search-bar {
    border: none;
}

.global-search-bar:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.global-search-results {
    position: absolute;
    width: 100%;
    background-color: var(--color-white);
    left: 0;
    top: 80px;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 4px 4px;
}

.search-result-group {
    padding: 10px;
    margin: 10px;
    border: 1px solid var(--color-border-medium);
}

.search-result-link {
    color: var(--color-text-strong);
}

.search-result-link:hover {
    color: var(--color-highlight);
}

/* theme: widgets */
.widget-element > .block {
    border-radius: .3rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.widget-element .widget-form {
    background-color: var(--color-white);
    border-radius: .3rem;
    box-shadow: var(--shadow-sm);
}
.widget-header {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .4rem .4rem 1rem;
    min-height: 2.5rem;
}

.widget-header .title {
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-highlight2);
}
.widget-body {
    margin-top: 0;
    background-color: transparent;
    min-height: 75px;
    /* max-height: 1500px; */
    overflow-y: auto;
    padding: 0 1rem 1rem;
}
.widget-body strong {
    font-weight: 600;
}

.widget-body .table-compact thead th {
    font-size: .85rem;
}

.widget-body .table-compact thead th, .widget-body .table-compact tfoot th {
    font-weight: 600;
}

.widget-body .table-compact tbody th {
    font-weight: 500;
}

.widget-icon {
    display: inline-block;
    background-color: inherit !important;
    opacity: 1;
    font-size: .875rem;
    margin-right: .3rem;
}

.widget-tools {
    margin: .3rem;
    display: flex;
    flex-direction: row-reverse;
}

.widget-icon.widget-color1, .widget-icon.widget-color2, .widget-icon.widget-color3 {
    opacity: .75;
}

@media (hover: hover) {
    .widget-element .widget-tools {
        display: none;
    }

    .widget-element:hover .widget-tools {
        display: flex;
    }
}

.widget-tools a {
    color: var(--color-highlight);
    padding: 0 .2em;
}

.widget-tools a:hover {
    text-decoration: none;
}

.xdashboardpages .button, .xdashboardlayout .button, .xdashboardform .button {
    border-color: var(--color-border-medium);
    color: var(--color-text-faint-2);
}

.xdashboardlayout .button {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.xdashboardpages .button, .xdashboardlayout .button, .xdashboardform .button {
    display: inline-block;
    text-align: center;
    background-color: var(--color-white);
    padding: .2rem .5rem;
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
    border: 0;
}

.xdashboardpages input {
    background-color: var(--color-white);
    padding: .2rem .5rem;
    box-shadow: var(--shadow-sm);
    border-radius: .3rem;
    border: 0;
}

.xdashboardpages a.button:hover, .xdashboardlayout .button:hover, .xdashboardform .button:hover {
    text-decoration: none;
    color: var(--color-black);
}

.xdashboardpages a.button.active, .xdashboardlayout a.button.active {
    color: var(--color-black);
}

.xdashboardform select {
    box-shadow: var(--shadow-sm);
    background-color: var(--color-white);
    color: var(--color-textprimary);
    border-radius: .3rem;
    width: 100%;
    border: 0;
    padding: .4rem .5rem;
}

.xdashboardform select option {
    background-color: var(--color-white);
    color: var(--color-textprimary);
}

.xdashboardlayout i {
    font-size: 16px;
}

.xdashboardform select {
    border-color: var(--color-border-medium);
}

.widget-element .buttons {
    text-align: right;
}

/* theme: tables */
.dataTables_filter input {
    border-radius: 0;
}
.rounded {
    border-radius: 0 !important;
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .form-control {
    border-radius: 0 !important;
}

/* theme: usernav */
@media (min-width: 992px) {
    .nav-item.user {
        display: none;
    }
}

/* theme: plain layout (login) */
body.app-layout-plain {
    background-color: var(--color-plain-bg) !important;
    background-position: center center;
    background-size: cover;
    background-image: var(--plain-bg-image);
}
body.app-layout-plain .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.app-layout-plain .container > div > div {
    background-color: var(--color-white);
    padding: 2rem 3rem;
    border-radius: .3rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
body.app-layout-plain .container > div > div .card {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
}
body.app-layout-plain .container > div > div .card-body {
    padding: 0;
}
body.app-layout-plain .container > div > div h3 {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem !important;
    text-align: left !important;
}
body.app-layout-plain .standalone-logo {
    width: 120px;
    height: 27px;
    margin: .3rem 0 1rem;
}

/* custom: header logo & buttons */
.app-header .logo {
    width: 160px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    margin: 0;
}

.btn {
    border-radius: 0.3rem !important;
}

.logout.button {
    border: 1px solid var(--color-text-faint-4);
    padding: .3rem 1rem;
    background-color: transparent;
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-text-muted);
    border-radius: 0.3rem !important;
}
.logout.button:hover {
    background-color: transparent;
    color: var(--color-hover-invert);
    text-decoration: none;
}

.app-header .navbar-toggler-icon {
    height: 26px;
    width: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.app-header .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.app-header .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

h1, .container-fluid h2 span.text-capitalize {
    color: var(--color-text-muted);
}

/* custom: resultlists */
.resultlist-blocks > .single {
    box-shadow: var(--shadow-sm);
    background-color: var(--color-white) !important;
    border: 0 !important;
    border-radius: .3rem;
}
.resultlist-blocks > .single .tag {
    background-color: var(--color-tag-bg) !important;
    color: var(--color-textprimary) !important;
    border-radius: 2rem !important;
    line-height: 1.1rem !important;
    padding: 0.2rem 0.5rem !important;
}
.resultlist-blocks img {
    border-radius: 0.3rem;
    overflow: hidden;
}

/* custom: navigation */
.sidebar .nav-link {
    padding: .4rem .1rem .4rem .8rem;
}
.sidebar .nav-item.user > .nav-link {
    background-color: var(--color-topbar) !important;
}
.sidebar .nav-item .nav-link {
    color: var(--color-text-muted) !important;
}
.sidebar .nav > .nav-item > .nav-link {
    font-weight: 600 !important;
}
.sidebar .nav-item .nav-link:hover {
    color: var(--color-text-muted);
}
.sidebar .nav-dropdown-toggle::before {
    right: .6rem;
}
.sidebar ul.nav > li:not(.user):first-child {
    border: 1px solid var(--color-highlight) !important;
}
.sidebar .nav-item .nav-link.active {
    background-color: var(--color-highlight) !important;
}
.sidebar .nav-item .nav-dropdown-items .nav-link:hover {
    background-color: var(--color-highlight) !important;
}
.sidebar .nav-link.active .nav-icon {
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item .nav-link:hover {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.custom-sidebar .nav-link.active, .sidebar .nav-item .nav-dropdown-items .nav-link.active, .custom-sidebar .nav-link.active {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}
.sidebar .nav-item .nav-dropdown-items {
    background-color: var(--color-topbar);
}
.sidebar .nav {
    background-color: var(--color-white);
    padding: 0 .6rem;
    border-right: 1px solid var(--color-border-light-1);
}
.custom-sidebar .nav-link {
    background-color: var(--color-topbar) !important;
    border-bottom: none;
    border-radius: 0.3rem;
    margin-bottom: 2px;
}

/* custom: inputs */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .form-control {
    border-radius: 0.3rem !important;
}
.select2.select2-container, .select2-container--bootstrap .select2-selection, .select2-container--default .select2-selection {
    border-radius: 0.3rem !important;
}
.form-group > .btn-group .btn-group button {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.form-group > .btn-group > button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* select2-bootstrap-theme hardcodes its own selection height/padding (34px), which
   doesn't match this app's .form-control/.btn box model - force the same one Bootstrap
   uses for those, everywhere select2 is used (not just our own autocomplete fields).
   The visible border sits on the outer .select2.select2-container, not on
   .select2-selection itself (border:none - see docs/frontend.md), so the inner height
   must NOT also reserve the 2px border Bootstrap's own formula includes, or the outer
   element's real border adds on top and the whole thing ends up 2px too tall. */
.select2-container--bootstrap .select2-selection--single {
    height: calc(1.5em + .75rem) !important;
    padding: .375rem 1.75rem .375rem .75rem !important;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
}
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--multiple {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--single {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
    min-height: calc(1.5em + .75rem) !important;
}
.select2-container--bootstrap .select2-selection--single .select2-search--inline .select2-search__field {
    min-height: calc(1.5em + .75rem) !important;
}

/* widgets: "add line"/"add related item" row (invoice/salesevent items widgets,
   modelrelated widgets) - a select2 field next to a qty input and/or a button. Some of these
   rows (stock movements, set dissolve) carry more fields than fit on one line in a narrow
   dashboard column - wrap instead of squeezing every field down to unreadable widths. Rows
   short enough to already fit (the common case) are unaffected, since wrapping only kicks in
   once the row actually runs out of space. */
.widget-addrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.widget-addrow input[name="qty"] {
    max-width: 5rem;
    flex: 0 0 auto;
}

/* crud columns */
.crudcolumnconfigs ul {
    margin: 0;
    padding: 0;
}

.crudcolumnconfigs li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.crudexports {

}

/* crud list */
#crudTable_reset_button {
    display: none;
}

/* crud tables */
#crudTable.table td {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .9rem;
}

#crudTable_wrapper .dataTables_scroll {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    margin: .9rem 0;
    border-radius: .3rem;
    overflow: hidden;
}

#crudTable_wrapper .table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: .3rem;
}

#crudTable_wrapper .multiform {
    display: flex;
    gap: .3rem;
}

#crudTable_wrapper #crudTable tr td:first-child {
    padding-bottom: .7rem !important;
    padding-top: .7rem !important;
}

#crudTable_wrapper #crudTable:not(.has-hidden-columns) tr td:first-child {
    padding-top: .7rem !important;
}

#crudTable_wrapper #crudTable td, #crudTable_wrapper #crudTable th {
    line-height: normal;
}

#crudTable_info {
    font-size: .8rem;
}

/* forms */
.form-group {
    margin-bottom: .5rem;
}
.form-group > label {
    font-size: 0.85em;
    margin-bottom: .15rem;
}

/* dark mode: core Bootstrap/DataTables/Select2 components that come
   pre-colored (white) from theme.css and aren't touched anywhere else above.
   !important throughout this whole select2 section: select2-bootstrap-theme's own CSS
   loads after app.css and matches these same elements at equal specificity, so a plain
   override loses the tie and the vendor light-mode color silently wins. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .select2-container--bootstrap .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection,
[data-theme="dark"] .select2.select2-container {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

/* theme.css hardcodes ".select2.select2-container" (where the actual visible border of a
   select2 field lives, see docs/frontend.md) to a fixed "!important" navy-at-12%-opacity
   border, which is unaffected by the border-color override above and ends up practically
   invisible against a dark background - replace the whole border, not just its color. */
[data-theme="dark"] .select2.select2-container {
    border: 1px solid var(--color-border-medium) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-faint-2);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--color-surface-light-1);
}

[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--color-surface-light-1) !important;
}

/* the selected value's own text (single) and the "type to search" text (multiple) are
   both directly colored by vendor CSS, so they don't just inherit the selection's color
   above - each needs its own override. */
[data-theme="dark"] .select2-selection__rendered,
[data-theme="dark"] .select2-search--inline .select2-search__field {
    color: var(--color-text-strong) !important;
}

[data-theme="dark"] .select2-selection__placeholder {
    color: var(--color-text-faint-2) !important;
}

/* a multi-select's individual selected "chip" tags - vendor CSS hardcodes them to a
   plain white pill regardless of theme. */
[data-theme="dark"] .select2-selection__choice {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-results__option {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

/* the search box select2 shows at the top of an open (single-select) dropdown - vendor
   CSS hardcodes it to a plain white input, which stays white in dark mode too. */
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .xdashboardform select,
[data-theme="dark"] .xdashboardform select option {
    color: var(--color-text-strong);
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] #crudTable_wrapper .dataTables_scroll,
[data-theme="dark"] .dataTables_wrapper {
    background-color: var(--color-white);
    color: var(--color-text-strong);
}

/* CoreUI/Backstrap theme.css hardcodes a dark navy text color on table-hover,
   unaware of dark mode - override it back to the theme text color */
[data-theme="dark"] .table-hover tbody tr:hover {
    color: var(--color-text-strong);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-medium) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--color-surface-light-1);
    color: var(--color-text-strong);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--color-border-light-1);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-white);
    color: var(--color-text-strong);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text-strong);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-surface-light-1);
    color: var(--color-text-strong);
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content {
    background-color: var(--color-white);
    color: var(--color-text-strong);
}

/* CRUD create/update ajax modals (resources/views/crud/modal/create_modal.blade.php,
   update_modal.blade.php) - same rounded/elevated look as the login card
   (body.app-layout-plain .container > div > div above), instead of Bootstrap's flat default. */
.ap-crud-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: .75rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px;
}

.ap-crud-modal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-light-1);
}

.ap-crud-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-strong);
}

.ap-crud-modal .modal-body {
    padding: 1.5rem;
}

.ap-crud-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-light-1);
}

.ap-crud-modal .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -.5rem -.5rem -.5rem auto;
    padding: 0;
    border-radius: 50%;
    opacity: .6;
    text-shadow: none;
    color: var(--color-text-strong);
    transition: background-color .15s ease, opacity .15s ease;
}

.ap-crud-modal .close:hover {
    opacity: 1;
    background-color: var(--color-surface-light-1);
}

.modal-backdrop {
    background-color: var(--color-overlay);
}

/* SweetAlert confirm dialog (apConfirm(), see resources/js/apCrudModal.js) - drop its entrance
   pop/fade, shrink the icon + buttons, and match its radius/shadow/backdrop to the CRUD modal
   above (.ap-crud-modal) so the two dialog types read as one consistent design. !important
   because the sweetalert package injects its own <style> tag at runtime, after this stylesheet. */
.swal-overlay {
    background-color: var(--color-overlay) !important;
    transition: none !important;
}

.swal-overlay--show-modal .swal-modal {
    -webkit-animation: none !important;
    animation: none !important;
}

.swal-modal {
    border-radius: .75rem !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px !important;
    transition: none !important;
}

.swal-icon {
    width: 48px !important;
    height: 48px !important;
    border-width: 3px !important;
    margin: 12px auto !important;
}

.swal-icon:first-child {
    margin-top: 20px !important;
}

.swal-icon--warning__body {
    width: 3px !important;
    height: 28px !important;
    top: 6px !important;
    margin-left: -1.5px !important;
}

.swal-icon--warning__dot {
    width: 4px !important;
    height: 4px !important;
    margin-left: -2px !important;
    bottom: -7px !important;
}

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

.swal-button {
    border-radius: .3rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: .375rem .75rem !important;
    background-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.swal-button:not(.swal-button--cancel):hover {
    background-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

.swal-button--cancel {
    background-color: transparent !important;
    border: 1px solid var(--color-textprimary) !important;
    color: var(--color-textprimary) !important;
}

.swal-button--cancel:hover {
    background-color: var(--color-hover) !important;
    border-color: var(--color-hover) !important;
    color: var(--color-hover-invert) !important;
}

/* Noty flash messages (new Noty({...}).show(), see resources/js/apCrudModal.js and elsewhere) -
   same rounded/shadowed look as the dialogs above, a calmer fade+slide instead of the bouncy
   overshoot entrance, and a smaller/quieter close button. !important on the animation classes
   since noty.css's load order relative to this stylesheet isn't guaranteed. */
.noty_theme__backstrap.noty_bar {
    border: 0;
    border-radius: .75rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 28px, rgba(0, 0, 0, 0.08) 0px 3px 8px;
}

/* new Noty({type: 'info', ...}) (the common "gespeichert"/"gelöscht" confirmations) renders
   .noty_type__info - the vendor theme's own .noty_type__information rule never actually matches
   (Noty builds the class as "noty_type__" + type, i.e. literally "info") and was still the
   theme's generic, non-branded blue. Use the app's actual (per-installation) brand color instead,
   consistent with every other blue accent in the UI, and correct in dark mode for free since the
   variable itself already accounts for it. */
.noty_type__info {
    background-color: var(--color-highlight) !important;
    border-color: var(--color-highlight) !important;
    color: var(--color-highlight-invert) !important;
}

.noty_theme__backstrap.noty_bar .noty_close_button {
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-shadow: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .15);
    opacity: .8;
}

.noty_theme__backstrap.noty_bar .noty_close_button:hover {
    background-color: rgba(255, 255, 255, .3);
    opacity: 1;
}

.noty_effects_open {
    -webkit-animation: noty_anim_in_soft .2s ease-out !important;
    animation: noty_anim_in_soft .2s ease-out !important;
}

.noty_effects_close {
    -webkit-animation: noty_anim_out_soft .2s ease-in !important;
    animation: noty_anim_out_soft .2s ease-in !important;
}

@keyframes noty_anim_in_soft {
    0% { opacity: 0; transform: translateX(12px); }
    100% { opacity: 1; transform: translateX(0); }
}

@-webkit-keyframes noty_anim_in_soft {
    0% { opacity: 0; -webkit-transform: translateX(12px); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@keyframes noty_anim_out_soft {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(12px); }
}

@-webkit-keyframes noty_anim_out_soft {
    0% { opacity: 1; -webkit-transform: translateX(0); }
    100% { opacity: 0; -webkit-transform: translateX(12px); }
}

[data-theme="dark"] .pagination .page-link {
    background-color: var(--color-white);
    border-color: var(--color-border-medium);
    color: var(--color-text-strong);
}

/* Bootstrap ".bg-*" utilities ship with !important, and package-registered
   CSS (events.css, finassets.css, ...) loads after app.css — both need
   !important here to actually win in dark mode. */
[data-theme="dark"] .bg-white {
    background-color: var(--color-white) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--color-surface-light-1) !important;
}

[data-theme="dark"] .tab-content,
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--color-border-medium) !important;
}

/* dashboard "Kalender" widget (packages/abelmann/events, .dateview table) */
[data-theme="dark"] .dateview td {
    background-color: var(--color-white) !important;
}

/* finassets report builder (.fam-section / .fam-page / .fam-section-portfolio) */
[data-theme="dark"] .fam-section,
[data-theme="dark"] .fam-section-element,
[data-theme="dark"] .fam-page,
[data-theme="dark"] .fam-section-portfolio {
    background-color: var(--color-white) !important;
    color: var(--color-text-strong) !important;
}

/* workflow builder canvas (resources/views/workflow/partials/diagram.blade.php) */
[data-theme="dark"] .wfb-canvas {
    background-color: var(--color-white) !important;
}