:root {
    --bg: #0d0f12;
    --bg2: #111317;
    --panel: #15181d;
    --panel2: #1b1e23;
    --panel3: #23272e;

    --line: #30343b;
    --line2: #3a3f47;

    --text: #d7dce5;
    --muted: #9299a6;
    --white: #f2f4f8;

    --blue: #0b438e;
    --blue2: #1264c7;
    --blue3: #1775e5;

    --orange: #d77b24;
    --orange2: #f08a28;

    --green: #36c66b;
    --red: #d61e3b;

    --nav-height: 38px;
    --brand-height: 34px;
    --tab-height: 30px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    background: var(--bg);
    color: var(--text);

    font-size: 13px;
}


body {
    overflow: hidden;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    color: var(--text);
}


/* =========================================================
   APP SHELL
   ========================================================= */

.tms-shell {
    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-rows:
        var(--brand-height)
        var(--nav-height)
        var(--tab-height)
        1fr;

    background: var(--bg);
}


/* =========================================================
   BRAND BAR
   ========================================================= */

.brandbar {
    height: var(--brand-height);

    display: flex;
    align-items: center;

    background: #0b0d10;

    border-bottom: 1px solid #202328;

    padding: 0 12px;
}


.brand {
    display: flex;
    align-items: center;

    height: 100%;
}


.brand-mark {
    width: 27px;
    height: 23px;

    border: 1px solid #d8dde6;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    font-weight: 700;

    color: #fff;
    background: #15181d;
}


.brand-text {
    margin-left: 7px;

    display: flex;
    flex-direction: column;

    line-height: 10px;

    font-size: 9px;
}


.brand-text strong {
    color: #fff;
}


.brand-text span {
    color: var(--orange2);
}


.brand-spacer {
    flex: 1;
}


.top-status {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 22px;

    font-size: 12px;
}


.notification {
    color: #ff5b52;
    font-size: 17px;
}


.system-name {
    color: #f0f2f6;
}


.mode {
    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 4px;

    color: #49c1c5;
}


.mode.active {
    color: var(--orange2);

    border-bottom: 2px solid var(--orange2);

    font-weight: 700;
}


.user-circle {
    width: 27px;
    height: 27px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2b2f35;

    border: 1px solid #484d55;

    color: #d8dce2;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.mainnav {
    height: var(--nav-height);

    display: flex;
    align-items: stretch;

    background: #202225;

    border-bottom: 1px solid #08090b;
}


.mainnav a {
    height: 100%;

    min-width: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    color: #d9e3f4;

    text-decoration: none;

    font-size: 12px;
    font-weight: 400;

    white-space: nowrap;
}


.mainnav a:hover {
    background: #292c31;

    color: #fff;
}


.close-app {
    margin-left: auto;

    width: 38px;

    border: 0;

    background: #c80f2e;

    color: white;

    font-size: 20px;

    cursor: pointer;
}


.close-app:hover {
    background: #e11639;
}


/* =========================================================
   TABS
   ========================================================= */

.tabbar {
    height: var(--tab-height);

    display: flex;
    align-items: flex-end;

    background: #0e1013;

    padding-left: 10px;

    border-bottom: 1px solid #24272c;
}


.tab {
    height: 27px;

    min-width: 100px;

    display: flex;
    align-items: center;

    padding-left: 11px;

    background: #124e9f;

    border: 1px solid #1d65bc;
    border-bottom: 0;

    color: #fff;

    font-size: 11px;
}


.tab.active {
    background: #155bb7;
}


.tab button {
    margin-left: auto;

    width: 27px;
    height: 25px;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
    position: relative;

    overflow: auto;

    background: #0d0f11;
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.workflow-strip {
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    background: #0b438e;

    border-bottom: 1px solid #175aa9;
}


.workflow-step {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #dce9fb;

    font-size: 14px;
}


.workflow-step strong {
    color: #fff;

    font-size: 15px;
}


.workflow-icon {
    margin-right: 7px;

    font-size: 28px;

    color: #e5efff;
}


.workflow-arrow {
    color: var(--orange2);

    font-size: 44px;

    line-height: 1;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-grid {
    width: 850px;

    margin: 36px auto 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.dashboard-card {
    min-height: 118px;

    display: grid;

    grid-template-columns:
        76px 1fr;

    align-items: center;

    text-align: left;

    padding: 13px;

    background: #111315;

    border: 1px solid #3a3d42;

    cursor: pointer;
}


.dashboard-card:hover {
    background: #191c20;

    border-color: #59616d;
}


.dashboard-card.featured {
    background: #343b48;

    border-color: #646d7b;
}


.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #d7e4fa;

    font-size: 39px;
}


.dashboard-card h3 {
    margin: 0 0 5px 0;

    color: #fff;

    font-size: 15px;
    line-height: 18px;
}


.dashboard-card p {
    margin: 0;

    color: #b1b7c1;

    font-size: 11.5px;
    line-height: 16px;
}


/* =========================================================
   TASK DRAWER
   ========================================================= */

.task-drawer {
    position: fixed;

    right: 0;
    top: 53%;

    width: 39px;
    height: 205px;

    background: #06418e;

    border-left: 1px solid #155eae;

    display: flex;
    flex-direction: column;

    align-items: center;

    z-index: 20;
}


.task-drawer span {
    margin-top: 12px;

    writing-mode: vertical-rl;

    color: white;

    font-size: 11px;
}


.task-drawer button {
    margin-top: auto;
    margin-bottom: 8px;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    border: 0;

    background: white;

    color: #08458f;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   GENERIC CONTROLS - für kommende TMS Masken
   ========================================================= */

.tms-btn {
    height: 31px;

    padding: 0 12px;

    border: 1px solid #1a6dca;

    border-radius: 2px;

    background: #1264c7;

    color: white;

    cursor: pointer;

    font-size: 12px;
}


.tms-btn:hover {
    background: #1775e5;
}


.tms-btn.orange {
    background: #d77b24;

    border-color: #e88a30;
}


.tms-btn.red {
    background: #b81727;

    border-color: #d12839;
}


.tms-input,
.tms-select {
    height: 30px;

    padding: 0 8px;

    background: #14171b;

    border: 1px solid #3b4048;

    border-radius: 2px;

    color: #dfe3ea;

    outline: none;

    font-size: 12px;
}


.tms-input:focus,
.tms-select:focus {
    border-color: #176ac9;
}


/* =========================================================
   TABLE BASE - bereits passend für Transportaufträge
   ========================================================= */

.tms-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 12px;
}


.tms-table th {
    height: 31px;

    padding: 0 8px;

    text-align: left;

    background: #0b438e;

    color: #fff;

    border-right: 1px solid #285a97;

    font-weight: 500;
}


.tms-table td {
    height: 31px;

    padding: 4px 8px;

    border-right: 1px solid #34373c;
    border-bottom: 1px solid #34373c;

    color: #c7cbd2;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.tms-table tbody tr:nth-child(odd) {
    background: #111315;
}


.tms-table tbody tr:nth-child(even) {
    background: #222426;
}


.tms-table tbody tr:hover {
    background: #2c3035;
}


/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media (max-width: 1100px) {

    .mainnav a {
        min-width: auto;
        padding: 0 10px;
        font-size: 10px;
    }

    .dashboard-grid {
        width: calc(100% - 40px);
    }

}


/* =========================================================
   WOJBAR TMS MAIN DROPDOWN NAVIGATION
   ========================================================= */

.mainnav {
    position: relative;
    overflow: visible;
    z-index: 1000;
}


.nav-item {
    position: relative;
    height: 100%;
}


.nav-button {
    height: 100%;
    min-width: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #d9e3f4;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;

    white-space: nowrap;

    cursor: pointer;
}


.nav-button:hover {
    background: #292c31;
    color: #ffffff;
}


.nav-item.open > .nav-button {
    background: #4679cf;
    color: #ffffff;
}


.dropdown-menu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 250px;

    display: none;

    padding: 0;

    background: #222222;

    border: 0;

    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.28);

    z-index: 2000;
}


.dropdown-wide {
    width: 330px;
}


.nav-item.open > .dropdown-menu {
    display: block;
}


.dropdown-menu > a,
.dropdown-parent > a {
    position: relative;

    min-height: 49px;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 0 20px;

    color: #d3ddf3;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 20px;

    background: #222222;

    white-space: nowrap;
}


.dropdown-menu > a:hover,
.dropdown-parent > a:hover {
    background: #343434;
    color: #ffffff;
}


.dropdown-menu a.disabled {
    color: #7e8491;
    cursor: default;
}


.dropdown-menu a.disabled:hover {
    background: #222222;
    color: #7e8491;
}


.dropdown-parent {
    position: relative;
}


.submenu-trigger {
    justify-content: space-between;
}


.submenu-arrow {
    margin-left: auto;

    padding-left: 20px;

    color: #dce6fa;

    font-size: 38px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;

    line-height: 20px;
}


.submenu {
    position: absolute;

    display: none;

    top: 0;
    left: 100%;

    min-width: 270px;

    background: #222222;

    box-shadow:
        5px 8px 16px rgba(0, 0, 0, 0.30);

    z-index: 2100;
}


.dropdown-parent.submenu-open > .submenu {
    display: block;
}


.submenu > a {
    min-height: 49px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    background: #222222;

    color: #d3ddf3;

    text-decoration: none;

    font-size: 16px;

    white-space: nowrap;
}


.submenu > a:hover {
    background: #343434;
    color: #ffffff;
}


/* Dropdown darf über Tabs / Workspace liegen */

.tabbar {
    position: relative;
    z-index: 100;
}


.workspace {
    z-index: 1;
}


/* Kleine Anpassung bei schmaleren Browserfenstern */

@media (max-width: 1300px) {

    .nav-button {
        min-width: auto;
        padding: 0 12px;
        font-size: 11px;
    }

    .dropdown-menu > a,
    .dropdown-parent > a,
    .submenu > a {
        font-size: 15px;
    }

}

/* =========================================================
   DROPDOWN FINAL COMPACT OVERRIDES
   Fire-TMS-artige Proportionen
   ========================================================= */

.dropdown-menu {
    width: 250px !important;
    padding: 0 !important;
    background: #222222 !important;
}

.dropdown-menu.dropdown-wide {
    width: 345px !important;
}


/* Hauptpunkte im Dropdown */

.dropdown-menu > a,
.dropdown-parent > a {
    width: 100% !important;

    min-height: 0 !important;
    height: 39px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 19px !important;
    margin: 0 !important;

    background: #222222 !important;

    color: #d3ddf3 !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 39px !important;

    text-align: left !important;
    white-space: nowrap !important;
}


/* Hover */

.dropdown-menu > a:hover,
.dropdown-parent > a:hover {
    background: #333333 !important;
    color: #ffffff !important;
}


/* deaktivierte Einträge */

.dropdown-menu a.disabled {
    color: #7f8490 !important;
}

.dropdown-menu a.disabled:hover {
    background: #222222 !important;
    color: #7f8490 !important;
}


/* Einträge mit Untermenü */

.dropdown-parent > .submenu-trigger {
    justify-content: flex-start !important;
}

.submenu-arrow {
    margin-left: auto !important;
    padding-left: 12px !important;

    font-size: 28px !important;
    font-weight: 300 !important;

    line-height: 1 !important;
}


/* Untermenüs */

.submenu {
    min-width: 260px !important;
    background: #222222 !important;
}

.submenu > a {
    min-height: 0 !important;
    height: 39px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 19px !important;
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 39px !important;

    text-align: left !important;
}


/* Hauptnavigation ebenfalls etwas näher an Vorlage */

.nav-button {
    min-width: 0 !important;

    padding-left: 21px !important;
    padding-right: 21px !important;

    font-size: 12px !important;
}


/* Responsive-Regel darf unsere Dropdown-Größe nicht verändern */

@media (max-width: 1300px) {

    .dropdown-menu > a,
    .dropdown-parent > a,
    .submenu > a {
        font-size: 14px !important;
    }

}



/* =========================================================
   BUSINESS PARTNERS
   ========================================================= */

.brand {
    text-decoration: none;
}


.tab {
    text-decoration: none;
}


.tab-secondary {
    margin-left: 5px;
    background: #d37b25;
    border-color: #e18a35;
}


.tab-x {
    margin-left: 18px;
    font-size: 13px;
}


.partner-screen {
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    background: #101112;

    overflow: hidden;
}


/* TOOLBAR */

.partner-toolbar {
    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 12px;

    background: #0b438e;

    border-bottom: 1px solid #1459ad;
}


.partner-search {
    display: flex;
    align-items: center;

    gap: 5px;
}


.search-icon {
    color: white;

    font-size: 23px;
    line-height: 1;
}


.partner-toolbar input,
.partner-toolbar select {
    height: 30px;

    background: #0c3978;

    border: 1px solid #1757a1;

    color: #eef4ff;

    padding: 0 8px;

    outline: none;

    font-size: 12px;
}


.partner-toolbar input {
    width: 160px;
}


.partner-toolbar select {
    min-width: 155px;
}


.partner-toolbar option {
    background: #15191e;
}


.toolbar-search-btn {
    height: 30px;

    padding: 0 12px;

    border: 1px solid #1c69c5;

    background: #1766c4;

    color: white;

    cursor: pointer;
}


.toolbar-spacer {
    flex: 1;
}


.saved-filter {
    width: 165px;
}


.square-blue {
    width: 32px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: #1766c4;

    color: #fff;

    text-decoration: none;

    font-size: 19px;
    font-weight: 700;

    cursor: pointer;
}


/* MINI TOOLS */

.partner-mini-tools {
    height: 40px;

    display: flex;
    align-items: center;

    gap: 0;

    padding-left: 24px;

    background: #0b438e;
}


.partner-mini-tools button {
    height: 29px;
    min-width: 29px;

    border: 0;

    background: #1768cb;

    color: white;

    font-size: 17px;

    cursor: pointer;
}


/* CONTENT */

.partner-content {
    flex: 1;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        184px;

    background: #101112;
}


.partner-table-area {
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr)
        38px;
}


.partner-table-scroll {
    overflow: auto;

    min-height: 0;

    scrollbar-color: #929292 #252525;
    scrollbar-width: thin;
}


/* TABLE */

.partner-table {
    width: 100%;

    min-width: 1300px;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 12px;
}


.partner-table th {
    height: 32px;

    padding: 0 9px;

    background: #0b438e;

    border-right: 1px solid #285791;
    border-bottom: 1px solid #285791;

    color: #eaf1ff;

    text-align: left;

    font-weight: 400;

    white-space: nowrap;
}


.partner-table td {
    height: 31px;

    padding: 0 9px;

    border-right: 1px solid #36383b;
    border-bottom: 1px solid #36383b;

    color: #c9c9ca;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.partner-table tbody tr:nth-child(odd) {
    background: #121313;
}


.partner-table tbody tr:nth-child(even) {
    background: #242525;
}


.partner-table tbody tr:hover {
    background: #30343a;
}


.partner-table tbody tr.selected {
    background: #174c88 !important;

    outline: 1px solid #3278c9;
}


.partner-table tbody tr {
    cursor: pointer;
}


.partner-table .empty-row {
    cursor: default;
}


.partner-table .empty-row td {
    height: 120px;

    color: #8e949d;

    text-align: center;

    white-space: normal;
}


.col-short {
    width: 300px;
}


.col-company {
    width: 360px;
}


.col-yesno {
    width: 60px;
}


.col-carrier {
    width: 95px;
}


.col-tax {
    width: 110px;
}


.col-vat {
    width: 120px;
}


.col-trade {
    width: 190px;
}


.col-rating {
    width: 100px;
}


/* RIGHT ACTIONS */

.partner-actions {
    padding: 38px 7px 7px 7px;

    background: #121313;

    border-left: 1px solid #34373a;
}


.action-btn {
    width: 100%;
    height: 30px;

    margin-bottom: 6px;

    padding: 0 10px;

    border: 0;
    border-radius: 2px;

    background: #124486;

    color: #dce7f7;

    text-align: left;

    font-size: 12px;

    cursor: pointer;
}


.action-btn.bright {
    background: #1267ca;
    color: white;
}


.action-btn.orange {
    background: #d47b26;

    color: white;

    font-weight: 700;
}


.action-btn:hover:not(:disabled) {
    filter: brightness(1.12);
}


.action-btn:disabled {
    background: #153963;

    color: #6f8097;

    cursor: default;
}


/* PAGINATION */

.partner-pagination {
    height: 38px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding: 0 8px;

    background: #111212;

    border-top: 1px solid #36383a;

    color: #aaaeb4;

    font-size: 12px;
}


.pagination-spacer {
    flex: 1;
}


.partner-pagination a,
.partner-pagination .page-disabled {
    min-width: 26px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #0d478f;

    color: white;

    text-decoration: none;
}


.partner-pagination .page-disabled {
    opacity: .4;
}


.page-number {
    min-width: 50px;

    text-align: center;
}


.partner-pagination select {
    height: 26px;

    background: #1b1d20;

    border: 1px solid #555a62;

    color: #ddd;

    outline: none;
}


.shown-label {
    margin-left: 4px;
}


/* =========================================================
   KEEP PARTNER LIST DENSE
   ========================================================= */

@media (max-width: 1200px) {

    .partner-content {
        grid-template-columns:
            minmax(0, 1fr)
            160px;
    }

    .partner-actions {
        padding-left: 5px;
        padding-right: 5px;
    }

}


/* =========================================================
   NEW BUSINESS PARTNER
   ========================================================= */

.new-partner-overlay {
    min-height: 100%;

    padding: 7px 120px 35px 4px;

    background:
        rgba(4, 6, 8, .91);
}


.new-partner-window {
    width: min(1410px, calc(100vw - 145px));

    background: #101112;

    border: 1px solid #282b2e;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .45);
}


.new-partner-titlebar {
    height: 39px;

    display: flex;
    align-items: center;

    padding-left: 13px;

    background: #0b438e;

    border-bottom: 1px solid #1d5da8;

    color: white;

    font-size: 13px;
}


.window-actions {
    margin-left: auto;

    height: 100%;

    display: flex;
}


.window-actions button,
.window-actions a {
    width: 36px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: white;

    text-decoration: none;

    font-size: 20px;

    cursor: pointer;
}


.window-actions button:hover,
.window-actions a:hover {
    background: rgba(255,255,255,.10);
}


.new-partner-body {
    padding: 14px;
}


.np-panel {
    border: 1px solid #333638;

    background: #111212;
}


.np-header {
    height: 35px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    color: white;

    font-size: 12px;
    font-weight: 700;
}


.np-header.blue {
    background: #0b438e;
}


.np-header.orange {
    background: #d47d27;
}


.np-content {
    padding: 10px;
}


.duplicate-panel {
    margin-bottom: 12px;
}


.duplicate-content {
    min-height: 77px;

    padding: 10px;

    color: #bfc2c6;

    font-size: 13px;
}


.duplicate-results {
    margin-top: 9px;
}


.duplicate-ok {
    color: #4ec978;
}


.duplicate-warning {
    color: #efb34c;
}


.duplicate-warning div {
    margin-top: 3px;
}


.np-grid {
    display: grid;

    gap: 12px;
}


.download-grid,
.main-data-grid {
    grid-template-columns:
        1fr
        1fr;
}


.download-grid {
    margin-bottom: 12px;
}


.bottom-grid {
    grid-template-columns:
        40%
        60%;

    margin-top: 12px;
}


.vat-check-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 14px;
}


.external-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.np-panel label,
.field label {
    display: block;

    margin-bottom: 5px;

    color: #e2e2e2;

    font-size: 12px;
    font-weight: 700;
}


.field label span {
    color: #e75039;
}


.np-panel input[type="text"],
.np-panel input[type="email"],
.np-panel select {
    width: 100%;
    height: 31px;

    padding: 0 8px;

    background: #171819;

    border: 1px solid #45484c;

    border-radius: 2px;

    color: #d6d6d6;

    outline: none;

    font-size: 12px;
}


.np-panel input:focus,
.np-panel select:focus {
    border-color: #176ac9;
}


.np-panel input:disabled,
.np-panel select:disabled {
    color: #666b72;

    background: #141516;
}


.input-with-button {
    display: grid;

    grid-template-columns:
        1fr
        42px;
}


.input-with-button input {
    border-radius: 2px 0 0 2px !important;
}


.input-with-button button {
    border: 1px solid #45484c;
    border-left: 0;

    background: #202225;

    color: #b9bec5;

    font-size: 18px;

    cursor: pointer;
}


.database-option {
    height: 22px;

    display: grid;

    grid-template-columns:
        24px
        25px
        1fr;

    align-items: center;

    color: #bbbfc4;
}


.np-section-title {
    margin-bottom: 7px;

    color: #d17b25;

    font-size: 14px;
    font-weight: 700;
}


.form-panel {
    min-height: 285px;

    padding: 12px 10px;
}


.form-two {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px 12px;
}


.address-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 15px 12px;
}


.contact-create-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}


.partner-type-content {
    min-height: 106px;

    display: flex;

    align-items: flex-start;

    gap: 20px;
}


.branch-field {
    width: 200px;
}


.np-checkbox {
    display: flex !important;

    align-items: center;

    gap: 7px;

    margin-top: 2px;

    font-weight: 400 !important;

    cursor: pointer;
}


.np-checkbox input {
    width: 18px;
    height: 18px;

    margin: 0;
}


.np-error {
    margin: 0 0 12px 0;

    padding: 9px 12px;

    background: #5b1b20;

    border: 1px solid #9b313a;

    color: #ffd5d8;

    font-size: 12px;
}


.np-footer {
    height: 57px;

    display: flex;

    justify-content: flex-end;
    align-items: flex-end;

    gap: 12px;
}


.np-button {
    height: 33px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border: 0;
    border-radius: 3px;

    background: #1265c5;

    color: white;

    text-decoration: none;

    font-size: 13px;

    cursor: pointer;
}


.np-button.primary {
    min-width: 46px;

    background: #126bd1;
}


.np-button:hover {
    filter: brightness(1.12);
}


@media (max-width: 1200px) {

    .new-partner-overlay {
        padding-right: 20px;
    }

    .new-partner-window {
        width: 100%;
    }

}


/* ============================================================
   WOJBAR TMS DESIGN SYSTEM
   Version 1
   ============================================================ */

:root {
    --wb-bg: #0b0e12;
    --wb-bg-2: #10151b;
    --wb-panel: #151b22;
    --wb-panel-2: #1a212a;
    --wb-panel-hover: #202a35;

    --wb-border: #303a46;
    --wb-border-light: #3b4857;

    --wb-blue-dark: #0c2744;
    --wb-blue: #123f70;
    --wb-blue-active: #185a9d;
    --wb-blue-hover: #1d6ab5;

    --wb-orange: #d47b27;
    --wb-orange-hover: #e38a32;

    --wb-text: #e7edf5;
    --wb-text-soft: #c0cad6;
    --wb-text-muted: #8390a0;

    --wb-green: #39a96b;
    --wb-red: #cf4d55;

    --wb-radius: 3px;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html,
body {
    background: var(--wb-bg);
    color: var(--wb-text);

    font-size: 14px;
}

body {
    line-height: 1.35;
}

.tms-shell {
    background: var(--wb-bg);
}

.workspace {
    background: var(--wb-bg);
}


/* ============================================================
   TOP BRAND BAR
   ============================================================ */

.brandbar {
    min-height: 36px;

    background: #080b0f;

    border-bottom: 1px solid var(--wb-border);
}

.brand {
    min-height: 36px;
}

.brand-mark {
    width: 30px;
    height: 25px;

    font-size: 10px;

    border: 1px solid #394554;

    background: #111821;
}

.brand-text strong {
    font-size: 11px;
    letter-spacing: .3px;
}

.brand-text span {
    color: var(--wb-orange);

    font-size: 9px;
}

.top-status {
    min-height: 36px;

    font-size: 12px;
}

.system-name {
    font-weight: 600;
}

.mode {
    padding: 0 17px;
}

.mode.active {
    color: var(--wb-orange);
}


/* ============================================================
   MAIN NAVIGATION
   ============================================================ */

.mainnav {
    min-height: 47px;

    background: #171c22;

    border-bottom: 1px solid var(--wb-border);
}

.nav-item {
    height: 47px;
}

.nav-button {
    height: 47px;

    padding: 0 25px;

    background: transparent;

    color: #d8e1ec;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: .1px;
}

.nav-item:hover > .nav-button,
.nav-item:focus-within > .nav-button {
    background: var(--wb-blue-active);

    color: #fff;
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.dropdown-menu {
    min-width: 250px;

    padding: 5px 0;

    background: #181e25;

    border: 1px solid var(--wb-border);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .45);
}

.dropdown-menu.dropdown-wide {
    min-width: 330px;
}

.dropdown-menu a {
    min-height: 39px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    color: #d8e2ef;

    font-size: 14px;

    line-height: 1.2;
}

.dropdown-menu a:hover {
    background: var(--wb-blue-active);

    color: #fff;
}

.dropdown-menu a.disabled {
    color: #6e7886;
}

.dropdown-menu a.disabled:hover {
    background: transparent;

    color: #6e7886;
}

.submenu {
    background: #181e25;

    border: 1px solid var(--wb-border);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .45);
}

.submenu-arrow {
    font-size: 25px;
}


/* ============================================================
   TAB BAR
   ============================================================ */

.tabbar {
    min-height: 38px;

    background: #0c1015;

    border-bottom: 1px solid var(--wb-border);
}

.tab {
    min-height: 38px;

    padding: 0 15px;

    font-size: 13px;

    background: #143f70;

    border-color: #315a86;
}

.tab.active {
    background: var(--wb-blue-active);
}

.tab-secondary {
    background: var(--wb-orange);

    border-color: #e08a38;
}


/* ============================================================
   DASHBOARD WORKFLOW BAR
   ============================================================ */

.workflow-bar,
.workflow-strip {
    background: var(--wb-blue-dark) !important;

    border-top: 1px solid #194c7b;
    border-bottom: 1px solid #194c7b;
}


/* ============================================================
   DASHBOARD CARDS
   ============================================================ */

.dashboard-card,
.home-card {
    background: var(--wb-panel);

    border: 1px solid var(--wb-border);

    color: var(--wb-text);
}

.dashboard-card:hover,
.home-card:hover {
    background: var(--wb-panel-hover);

    border-color: #4b5c6f;
}


/* ============================================================
   BUSINESS PARTNER LIST TOOLBAR
   ============================================================ */

.partner-toolbar {
    min-height: 57px;

    padding: 9px 14px;

    gap: 11px;

    background: var(--wb-blue-dark);

    border-bottom: 1px solid #1b4e7d;
}

.partner-toolbar input,
.partner-toolbar select {
    height: 35px;

    padding: 0 10px;

    background: #121b25;

    border: 1px solid #36516d;

    color: var(--wb-text);

    font-size: 13px;
}

.partner-toolbar input {
    width: 195px;
}

.partner-toolbar select {
    min-width: 175px;
}

.toolbar-search-btn {
    height: 35px;

    padding: 0 16px;

    background: var(--wb-blue-active);

    border: 1px solid #2771b8;

    font-size: 13px;
}

.toolbar-search-btn:hover {
    background: var(--wb-blue-hover);
}

.square-blue {
    width: 36px;
    height: 35px;

    background: var(--wb-blue-active);

    font-size: 20px;
}

.partner-mini-tools {
    height: 43px;

    padding-left: 14px;

    background: var(--wb-blue-dark);
}

.partner-mini-tools button {
    min-width: 33px;
    height: 31px;

    background: var(--wb-blue-active);
}


/* ============================================================
   BUSINESS PARTNER TABLE
   ============================================================ */

.partner-content {
    background: var(--wb-bg);
}

.partner-table {
    font-size: 13px;
}

.partner-table th {
    height: 38px;

    padding: 0 10px;

    background: #123b67;

    border-color: #31506f;

    color: #edf4fc;

    font-size: 13px;

    font-weight: 500;
}

.partner-table td {
    height: 36px;

    padding: 0 10px;

    border-color: #303840;

    color: #d2d9e1;

    font-size: 13px;
}

.partner-table tbody tr:nth-child(odd) {
    background: #10151a;
}

.partner-table tbody tr:nth-child(even) {
    background: #171d23;
}

.partner-table tbody tr:hover {
    background: #202c37;
}

.partner-table tbody tr.selected {
    background: #174d7d !important;

    outline: 1px solid #3479b8;
}


/* ============================================================
   RIGHT ACTION BAR
   ============================================================ */

.partner-actions {
    padding: 43px 8px 8px;

    background: #0f1419;

    border-left: 1px solid var(--wb-border);
}

.action-btn {
    height: 35px;

    margin-bottom: 7px;

    padding: 0 12px;

    background: var(--wb-blue);

    color: #e4edf7;

    font-size: 13px;

    border-radius: var(--wb-radius);
}

.action-btn.bright {
    background: var(--wb-blue-active);
}

.action-btn.orange {
    background: var(--wb-orange);

    color: #fff;
}

.action-btn.orange:hover {
    background: var(--wb-orange-hover);
}

.action-btn:disabled {
    background: #17283a;

    color: #607184;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.partner-pagination {
    height: 43px;

    background: #0f1419;

    border-color: var(--wb-border);

    color: var(--wb-text-soft);

    font-size: 13px;
}

.partner-pagination a,
.partner-pagination .page-disabled {
    min-width: 29px;
    height: 28px;

    background: var(--wb-blue);
}

.partner-pagination select {
    height: 29px;

    background: var(--wb-panel);

    color: var(--wb-text);
}


/* ============================================================
   NEW BUSINESS PARTNER WINDOW
   ============================================================ */

.new-partner-overlay {
    background: rgba(4, 7, 10, .94);
}

.new-partner-window {
    background: var(--wb-bg-2);

    border-color: var(--wb-border);
}

.new-partner-titlebar {
    height: 44px;

    padding-left: 15px;

    background: var(--wb-blue-dark);

    border-bottom: 1px solid #22517d;

    font-size: 15px;
}

.new-partner-body {
    padding: 16px;
}

.np-panel {
    background: #11171d;

    border-color: var(--wb-border);
}

.np-header {
    height: 39px;

    padding: 0 15px;

    font-size: 13px;
}

.np-header.blue {
    background: #123b67;
}

.np-header.orange {
    background: var(--wb-orange);
}

.np-content {
    padding: 12px;
}

.duplicate-content {
    min-height: 82px;

    padding: 12px;

    color: var(--wb-text-soft);

    font-size: 14px;
}

.np-section-title {
    margin-bottom: 10px;

    color: var(--wb-orange);

    font-size: 15px;
}

.form-panel {
    min-height: 305px;

    padding: 14px 12px;
}

.np-panel label,
.field label {
    margin-bottom: 6px;

    color: #e3e9f0;

    font-size: 13px;
}

.np-panel input[type="text"],
.np-panel input[type="email"],
.np-panel input[type="number"],
.np-panel input[type="date"],
.np-panel select,
.np-panel textarea {
    min-height: 36px;

    padding: 0 10px;

    background: #171e25;

    border: 1px solid #3c4855;

    color: #e1e7ed;

    font-size: 13px;
}

.np-panel textarea {
    padding-top: 8px;
    padding-bottom: 8px;
}

.np-panel input:focus,
.np-panel select:focus,
.np-panel textarea:focus {
    border-color: #2873b7;

    box-shadow:
        0 0 0 1px rgba(40, 115, 183, .25);
}

.input-with-button {
    grid-template-columns:
        1fr
        45px;
}

.database-option {
    height: 26px;

    font-size: 13px;
}

.form-two,
.address-grid {
    gap: 17px 14px;
}

.contact-create-grid {
    gap: 12px;
}

.partner-type-content {
    min-height: 118px;

    gap: 24px;
}

.branch-field {
    width: 225px;
}

.np-checkbox {
    gap: 8px;

    font-size: 13px;
}

.np-checkbox input {
    width: 20px;
    height: 20px;
}

.np-footer {
    height: 64px;

    gap: 12px;
}

.np-button {
    height: 38px;

    padding: 0 18px;

    background: var(--wb-blue-active);

    font-size: 14px;
}

.np-button.primary {
    min-width: 58px;

    background: var(--wb-orange);
}

.np-button.primary:hover {
    background: var(--wb-orange-hover);
}


/* ============================================================
   GENERIC FORM ELEMENTS
   ============================================================ */

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    font-size: 13px;
}


/* ============================================================
   SCROLLBARS
   ============================================================ */

* {
    scrollbar-width: thin;

    scrollbar-color:
        #465563
        #151a20;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #151a20;
}

::-webkit-scrollbar-thumb {
    background: #465563;

    border: 2px solid #151a20;

    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5b6d7e;
}


/* ============================================================
   WOJBAR RESPONSIVE
   ============================================================ */

@media (max-width: 1400px) {

    .nav-button {
        padding-left: 18px;
        padding-right: 18px;

        font-size: 13px;
    }

    .dropdown-menu a {
        font-size: 13px;
    }

}



/* ============================================================
   WOJBAR TMS - LARGE DESKTOP UI
   ============================================================ */

html,
body {
    font-size: 16px !important;
}


/* ---------- TOPBAR ---------- */

.brandbar {
    min-height: 44px !important;
}

.brand {
    min-height: 44px !important;
}

.brand-mark {
    width: 35px !important;
    height: 30px !important;

    font-size: 11px !important;
}

.brand-text strong {
    font-size: 13px !important;
}

.brand-text span {
    font-size: 10px !important;
}

.top-status {
    min-height: 44px !important;

    font-size: 14px !important;
}

.mode {
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* ---------- HAUPTMENÜ ---------- */

.mainnav {
    min-height: 56px !important;
}

.nav-item {
    height: 56px !important;
}

.nav-button {
    height: 56px !important;

    padding-left: 27px !important;
    padding-right: 27px !important;

    font-size: 16px !important;

    font-weight: 500 !important;
}


/* ---------- DROPDOWN ---------- */

.dropdown-menu {
    min-width: 285px !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.dropdown-menu.dropdown-wide {
    min-width: 365px !important;
}

.dropdown-menu a {
    min-height: 47px !important;

    padding-left: 21px !important;
    padding-right: 21px !important;

    font-size: 16px !important;
}

.submenu {
    min-width: 280px !important;
}

.submenu-arrow {
    font-size: 28px !important;
}


/* ---------- TABS ---------- */

.tabbar {
    min-height: 44px !important;
}

.tab {
    min-height: 44px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    font-size: 15px !important;
}

.tab-x {
    font-size: 15px !important;
}


/* ============================================================
   GESCHÄFTSPARTNERLISTE
   ============================================================ */

.partner-toolbar {
    min-height: 67px !important;

    padding: 11px 16px !important;

    gap: 13px !important;
}

.partner-search {
    gap: 8px !important;
}

.search-icon {
    font-size: 27px !important;
}

.partner-toolbar input,
.partner-toolbar select {
    height: 42px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 15px !important;
}

.partner-toolbar input {
    width: 230px !important;
}

.partner-toolbar select {
    min-width: 205px !important;
}

.toolbar-search-btn {
    height: 42px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    font-size: 15px !important;
}

.square-blue {
    width: 42px !important;
    height: 42px !important;

    font-size: 23px !important;
}


/* ---------- kleine Werkzeugleiste ---------- */

.partner-mini-tools {
    height: 49px !important;

    padding-left: 16px !important;
}

.partner-mini-tools button {
    width: 38px !important;
    height: 36px !important;

    font-size: 20px !important;
}


/* ---------- TABELLE ---------- */

.partner-table {
    font-size: 15px !important;
}

.partner-table th {
    height: 45px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 15px !important;
}

.partner-table td {
    height: 43px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 15px !important;
}


/* Spalten passend zur größeren Schrift */

.col-short {
    width: 340px !important;
}

.col-company {
    width: 410px !important;
}

.col-yesno {
    width: 75px !important;
}

.col-carrier {
    width: 115px !important;
}

.col-tax {
    width: 135px !important;
}

.col-vat {
    width: 145px !important;
}

.col-trade {
    width: 220px !important;
}

.col-rating {
    width: 120px !important;
}


/* ---------- rechte Aktionsleiste ---------- */

.partner-content {
    grid-template-columns:
        minmax(0, 1fr)
        215px !important;
}

.partner-actions {
    padding:
        49px
        9px
        9px
        9px !important;
}

.action-btn {
    height: 42px !important;

    margin-bottom: 8px !important;

    padding-left: 14px !important;
    padding-right: 14px !important;

    font-size: 15px !important;
}


/* ---------- Pagination ---------- */

.partner-table-area {
    grid-template-rows:
        minmax(0, 1fr)
        49px !important;
}

.partner-pagination {
    height: 49px !important;

    gap: 7px !important;

    font-size: 14px !important;
}

.partner-pagination a,
.partner-pagination .page-disabled {
    min-width: 34px !important;
    height: 33px !important;

    font-size: 14px !important;
}

.partner-pagination select {
    height: 33px !important;

    font-size: 14px !important;
}


/* ============================================================
   NEUER GESCHÄFTSPARTNER
   ============================================================ */

.new-partner-overlay {
    padding:
        10px
        70px
        40px
        8px !important;
}

.new-partner-window {
    width: min(
        1580px,
        calc(100vw - 90px)
    ) !important;
}

.new-partner-titlebar {
    height: 52px !important;

    padding-left: 18px !important;

    font-size: 17px !important;
}

.window-actions button,
.window-actions a {
    width: 46px !important;

    font-size: 23px !important;
}

.new-partner-body {
    padding: 18px !important;
}


/* ---------- Überschriften ---------- */

.np-header {
    height: 46px !important;

    padding-left: 17px !important;
    padding-right: 17px !important;

    font-size: 15px !important;
}

.np-section-title {
    margin-bottom: 12px !important;

    font-size: 17px !important;
}


/* ---------- Duplikatprüfung ---------- */

.duplicate-content {
    min-height: 95px !important;

    padding: 14px !important;

    font-size: 15px !important;
}

.duplicate-results {
    margin-top: 11px !important;
}


/* ---------- Formulare ---------- */

.np-content {
    padding: 14px !important;
}

.form-panel {
    min-height: 335px !important;

    padding: 16px 14px !important;
}

.np-panel label,
.field label {
    margin-bottom: 7px !important;

    font-size: 15px !important;
}

.np-panel input[type="text"],
.np-panel input[type="email"],
.np-panel input[type="number"],
.np-panel input[type="date"],
.np-panel select {
    height: 44px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 15px !important;
}

.np-panel textarea {
    min-height: 90px !important;

    padding: 10px 12px !important;

    font-size: 15px !important;
}

.input-with-button {
    grid-template-columns:
        1fr
        52px !important;
}

.input-with-button button {
    font-size: 21px !important;
}

.database-option {
    height: 31px !important;

    font-size: 15px !important;
}

.form-two,
.address-grid {
    gap:
        21px
        17px !important;
}

.contact-create-grid {
    gap: 15px !important;
}


/* ---------- Kunde / Frachtführer ---------- */

.partner-type-content {
    min-height: 135px !important;

    gap: 28px !important;
}

.branch-field {
    width: 260px !important;
}

.np-checkbox {
    gap: 10px !important;

    font-size: 15px !important;
}

.np-checkbox input {
    width: 23px !important;
    height: 23px !important;
}


/* ---------- Footerbuttons ---------- */

.np-footer {
    height: 75px !important;

    gap: 14px !important;
}

.np-button {
    height: 45px !important;

    padding-left: 21px !important;
    padding-right: 21px !important;

    font-size: 16px !important;
}

.np-button.primary {
    min-width: 68px !important;
}


/* ============================================================
   ALLGEMEINE BUTTONS
   ============================================================ */

button {
    font-size: 15px;
}


/* ============================================================
   LARGE MONITOR
   ============================================================ */

@media (min-width: 1700px) {

    .nav-button {
        padding-left: 31px !important;
        padding-right: 31px !important;
    }

    .new-partner-window {
        width: min(
            1650px,
            calc(100vw - 100px)
        ) !important;
    }

}


/* ============================================================
   WOJBAR TMS - FINAL MEDIUM DESKTOP SIZE
   ============================================================ */

html,
body {
    font-size: 15px !important;
}


/* TOPBAR */

.brandbar,
.brand {
    min-height: 40px !important;
}

.brand-mark {
    width: 32px !important;
    height: 27px !important;
    font-size: 10px !important;
}

.brand-text strong {
    font-size: 12px !important;
}

.brand-text span {
    font-size: 9px !important;
}

.top-status {
    min-height: 40px !important;
    font-size: 13px !important;
}

.mode {
    padding-left: 17px !important;
    padding-right: 17px !important;
}


/* HAUPTMENÜ */

.mainnav {
    min-height: 50px !important;
}

.nav-item {
    height: 50px !important;
}

.nav-button {
    height: 50px !important;

    padding-left: 22px !important;
    padding-right: 22px !important;

    font-size: 14px !important;
}


/* DROPDOWN */

.dropdown-menu {
    min-width: 265px !important;
    padding: 4px 0 !important;
}

.dropdown-menu.dropdown-wide {
    min-width: 345px !important;
}

.dropdown-menu a {
    min-height: 42px !important;

    padding-left: 19px !important;
    padding-right: 19px !important;

    font-size: 14px !important;
}

.submenu {
    min-width: 265px !important;
}


/* TABS */

.tabbar {
    min-height: 40px !important;
}

.tab {
    min-height: 40px !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    font-size: 14px !important;
}


/* GESCHÄFTSPARTNER TOOLBAR */

.partner-toolbar {
    min-height: 61px !important;

    padding: 9px 14px !important;

    gap: 11px !important;
}

.search-icon {
    font-size: 24px !important;
}

.partner-toolbar input,
.partner-toolbar select {
    height: 38px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    font-size: 14px !important;
}

.partner-toolbar input {
    width: 210px !important;
}

.partner-toolbar select {
    min-width: 185px !important;
}

.toolbar-search-btn {
    height: 38px !important;

    padding: 0 16px !important;

    font-size: 14px !important;
}

.square-blue {
    width: 38px !important;
    height: 38px !important;

    font-size: 21px !important;
}

.partner-mini-tools {
    height: 45px !important;
}

.partner-mini-tools button {
    width: 35px !important;
    height: 33px !important;

    font-size: 18px !important;
}


/* TABELLE */

.partner-table {
    font-size: 14px !important;
}

.partner-table th {
    height: 40px !important;

    padding: 0 11px !important;

    font-size: 14px !important;
}

.partner-table td {
    height: 38px !important;

    padding: 0 11px !important;

    font-size: 14px !important;
}


/* RECHTE BUTTONLEISTE */

.partner-content {
    grid-template-columns:
        minmax(0, 1fr)
        195px !important;
}

.partner-actions {
    padding:
        44px
        8px
        8px !important;
}

.action-btn {
    height: 38px !important;

    margin-bottom: 7px !important;

    padding: 0 12px !important;

    font-size: 14px !important;
}


/* PAGINATION */

.partner-table-area {
    grid-template-rows:
        minmax(0, 1fr)
        45px !important;
}

.partner-pagination {
    height: 45px !important;

    font-size: 13px !important;
}

.partner-pagination a,
.partner-pagination .page-disabled {
    min-width: 31px !important;
    height: 30px !important;
}

.partner-pagination select {
    height: 30px !important;
}


/* NEUER GESCHÄFTSPARTNER */

.new-partner-overlay {
    padding:
        8px
        90px
        35px
        6px !important;
}

.new-partner-window {
    width: min(
        1530px,
        calc(100vw - 110px)
    ) !important;
}

.new-partner-titlebar {
    height: 47px !important;

    padding-left: 16px !important;

    font-size: 16px !important;
}

.window-actions button,
.window-actions a {
    width: 41px !important;

    font-size: 21px !important;
}

.new-partner-body {
    padding: 16px !important;
}


/* BEREICHSÜBERSCHRIFTEN */

.np-header {
    height: 42px !important;

    padding: 0 16px !important;

    font-size: 14px !important;
}

.np-section-title {
    margin-bottom: 10px !important;

    font-size: 16px !important;
}


/* DUPLIKATBEREICH */

.duplicate-content {
    min-height: 88px !important;

    padding: 12px !important;

    font-size: 14px !important;
}


/* FORMULARE */

.np-content {
    padding: 12px !important;
}

.form-panel {
    min-height: 315px !important;

    padding: 14px 12px !important;
}

.np-panel label,
.field label {
    margin-bottom: 6px !important;

    font-size: 14px !important;
}

.np-panel input[type="text"],
.np-panel input[type="email"],
.np-panel input[type="number"],
.np-panel input[type="date"],
.np-panel select {
    height: 40px !important;

    padding-left: 11px !important;
    padding-right: 11px !important;

    font-size: 14px !important;
}

.np-panel textarea {
    min-height: 80px !important;

    padding: 9px 11px !important;

    font-size: 14px !important;
}

.input-with-button {
    grid-template-columns:
        1fr
        48px !important;
}

.database-option {
    height: 28px !important;

    font-size: 14px !important;
}

.form-two,
.address-grid {
    gap:
        18px
        15px !important;
}

.contact-create-grid {
    gap: 13px !important;
}


/* CHECKBOXEN */

.partner-type-content {
    min-height: 125px !important;

    gap: 25px !important;
}

.branch-field {
    width: 240px !important;
}

.np-checkbox {
    gap: 9px !important;

    font-size: 14px !important;
}

.np-checkbox input {
    width: 21px !important;
    height: 21px !important;
}


/* UNTERE BUTTONS */

.np-footer {
    height: 68px !important;

    gap: 12px !important;
}

.np-button {
    height: 41px !important;

    padding: 0 19px !important;

    font-size: 15px !important;
}

.np-button.primary {
    min-width: 62px !important;
}


/* Auf sehr großen Monitoren keine automatische
   weitere Vergrößerung mehr */

@media (min-width: 1700px) {

    .nav-button {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .new-partner-window {
        width: min(
            1530px,
            calc(100vw - 110px)
        ) !important;
    }

}



/* ============================================================
   WOJBAR TMS - PERSISTENT TAB SYSTEM
   ============================================================ */

.tabbar {
    height: 45px !important;
    min-height: 45px !important;

    display: flex !important;
    align-items: stretch !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 0 5px !important;

    background: #0c1117 !important;

    border-bottom:
        1px solid #354352 !important;

    white-space: nowrap !important;
}


/* Alte serverseitige Tabregeln neutralisieren */

.tabbar > .tab {
    display: none !important;
}


/* Neuer Tab */

.wb-tab {
    height: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: stretch !important;

    flex: 0 0 auto !important;

    margin: 0 5px 0 0 !important;

    background: #163d68 !important;

    border-left:
        1px solid #365b80 !important;

    border-right:
        1px solid #365b80 !important;

    border-top:
        1px solid #365b80 !important;

    box-sizing: border-box !important;
}


.wb-tab:hover {
    background: #1a4c80 !important;
}


.wb-tab.active {
    background: #1764ad !important;

    border-top:
        2px solid #d47b27 !important;
}


/* Tab-Text */

.wb-tab-link {
    min-width: 120px !important;
    max-width: 300px !important;

    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    padding:
        0
        12px
        0
        18px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 15px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
}


/* X */

.wb-tab-close {
    width: 39px !important;
    min-width: 39px !important;

    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    cursor: pointer !important;
}


.wb-tab-close:hover {
    background:
        rgba(0, 0, 0, .22) !important;

    color: #ffad61 !important;
}


/* Startseite ohne X */

.wb-tab-home-spacer {
    width: 10px !important;
}


/* Horizontaler Scrollbar nur bei sehr vielen Tabs */

.tabbar::-webkit-scrollbar {
    height: 5px !important;
}

.tabbar::-webkit-scrollbar-track {
    background: #0c1117 !important;
}

.tabbar::-webkit-scrollbar-thumb {
    background: #3d5267 !important;

    border: 0 !important;
}


/* Workspace beginnt sauber NACH den Tabs */

.workspace {
    position: relative !important;

    min-height:
        calc(100vh - 135px) !important;
}




/* ============================================================
   WOJBAR TABS - TEXT EXAKT ZENTRIEREN
   ============================================================ */

.tabbar {
    align-items: center !important;
}

.wb-tab {
    height: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}

.wb-tab-link {
    height: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    line-height: 44px !important;

    box-sizing: border-box !important;
}

.wb-tab-close {
    width: 42px !important;
    height: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 0 2px 0 !important;

    line-height: 1 !important;

    box-sizing: border-box !important;
}

.wb-tab-home-spacer {
    height: 44px !important;
}


/* ============================================================
   WOJBAR TABS - KOMPLETTE REITER VERTIKAL ZENTRIEREN
   ============================================================ */

.tabbar {
    height: 64px !important;
    min-height: 64px !important;

    display: flex !important;
    align-items: center !important;

    padding:
        0
        8px !important;

    box-sizing: border-box !important;
}


/* Reiter selbst */

.wb-tab {
    height: 48px !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;

    margin:
        0
        6px
        0
        0 !important;

    box-sizing: border-box !important;
}


/* Text */

.wb-tab-link {
    height: 48px !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;

    padding:
        0
        18px !important;

    line-height: normal !important;

    box-sizing: border-box !important;
}


/* Schließen-X */

.wb-tab-close {
    width: 42px !important;
    height: 48px !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    line-height: normal !important;

    box-sizing: border-box !important;
}


/* Startseite */

.wb-tab-home-spacer {
    height: 48px !important;
}


/* Alte Höhenbegrenzungen sicher überschreiben */

.tabbar > * {
    align-self: center !important;
}


/* ============================================================
   WOJBAR TABS - KOMPAKTER
   ============================================================ */

.tabbar {
    height: 50px !important;
    min-height: 50px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 4px !important;
}


/* Reiter */

.wb-tab {
    height: 38px !important;
    min-height: 38px !important;

    display: flex !important;
    align-items: center !important;

    margin-right: 6px !important;
}


/* Text */

.wb-tab-link {
    height: 38px !important;
    min-height: 38px !important;

    min-width: 120px !important;

    display: flex !important;
    align-items: center !important;

    padding:
        0
        14px !important;

    font-size: 14px !important;

    line-height: normal !important;
}


/* X */

.wb-tab-close {
    width: 34px !important;
    min-width: 34px !important;

    height: 38px !important;
    min-height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    font-size: 19px !important;

    line-height: normal !important;
}


.wb-tab-home-spacer {
    width: 5px !important;
    height: 38px !important;
}


/* Workspace an kleinere Tab-Leiste anpassen */

.workspace {
    min-height:
        calc(100vh - 121px) !important;
}



/* ============================================================
   WOJBAR TMS - TRANSPORTAUFTRAG
   ============================================================ */

.wo-transport-page {
    padding: 12px;

    background: #0b0f14;

    color: #e8edf3;

    min-height: calc(100vh - 170px);
}


.wo-success,
.wo-error {
    margin-bottom: 10px;
    padding: 10px 14px;

    font-size: 14px;
}

.wo-success {
    background: #153d29;
    border: 1px solid #26734b;
}

.wo-error {
    background: #531d23;
    border: 1px solid #96353e;
}


.wo-top-grid {
    display: grid;

    grid-template-columns:
        minmax(650px, 1.25fr)
        minmax(570px, 1fr);

    gap: 10px;
}


.wo-box {
    margin-bottom: 10px;

    background: #11161c;

    border: 1px solid #303943;
}


.wo-box-title {
    min-height: 38px;

    display: flex;
    align-items: center;

    padding: 0 13px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .15px;
}


.wo-box-title.blue {
    background: #123f70;
}


.wo-box-title.orange {
    background: #ce7726;
}


.wo-box-body {
    padding: 12px;
}


.wo-base-grid {
    display: grid;

    grid-template-columns:
        2fr
        .8fr
        .55fr
        1.3fr;

    gap: 12px;
}


.wo-base-grid .wo-field:nth-child(5),
.wo-base-grid .wo-field:nth-child(6) {
    grid-column: span 1;
}


.wo-field {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.wo-field > span {
    color: #dce4ed;

    font-size: 13px;
    font-weight: 600;
}


.wo-field input,
.wo-field select,
.wo-field textarea,
.wo-notes textarea {
    width: 100%;

    min-height: 38px;

    padding: 0 10px;

    box-sizing: border-box;

    background: #171e25;

    border: 1px solid #3b4855;

    border-radius: 2px;

    color: #e5ebf2;

    font-size: 14px;

    outline: none;
}


.wo-field input:focus,
.wo-field select:focus,
.wo-notes textarea:focus {
    border-color: #2b78bd;

    box-shadow:
        0 0 0 1px
        rgba(43,120,189,.2);
}


/* Kalkulation */

.wo-calc-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(90px, 1fr))
        repeat(5, minmax(105px, 1fr));

    gap: 8px;
}


.wo-kpi {
    min-height: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 7px 10px;

    background: #171f28;

    border: 1px solid #344251;
}


.wo-kpi span {
    color: #8fa0b2;

    font-size: 11px;
}


.wo-kpi strong {
    margin-top: 4px;

    font-size: 15px;
}


.wo-kpi.profit {
    border-bottom:
        3px solid #d47b27;
}


.wo-kpi.margin {
    border-bottom:
        3px solid #3b9e6d;
}


/* Transportset */

.wo-mode-switch {
    display: flex;

    gap: 8px;

    margin-bottom: 12px;
}


.wo-mode-switch label {
    cursor: pointer;
}


.wo-mode-switch input {
    display: none;
}


.wo-mode-switch span {
    min-width: 125px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    box-sizing: border-box;

    background: #1b2632;

    border: 1px solid #3c4c5d;

    color: #c7d1dc;

    font-size: 14px;
}


.wo-mode-switch input:checked + span {
    background: #d47b27;

    border-color: #ec9847;

    color: white;
}


.wo-tu-grid {
    display: grid;

    grid-template-columns:
        2fr
        1.2fr
        1fr
        .8fr
        .55fr;

    gap: 12px;
}


.wo-ownfleet {
    padding: 15px;

    background: #171d24;

    border: 1px dashed #455362;

    color: #8f9ba8;
}


/* Stop header */

.wo-stops-header {
    justify-content: space-between;
}


.wo-stops-header > div {
    display: flex;

    gap: 7px;
}


.wo-small-button {
    height: 30px;

    padding: 0 12px;

    border: 0;
    border-radius: 2px;

    background: #1767b7;

    color: white;

    font-size: 12px;

    cursor: pointer;
}


.wo-small-button.route {
    background: #d47b27;
}


/* Stop */

#stops-container {
    padding: 9px;
}


.wo-stop {
    margin-bottom: 9px;

    padding: 10px;

    background: #171c22;

    border: 1px solid #343d47;
}


.wo-stop:last-child {
    margin-bottom: 0;
}


.wo-stop-top {
    display: grid;

    grid-template-columns:
        125px
        135px
        110px
        110px
        minmax(190px, 1.3fr)
        110px
        minmax(150px, 1fr)
        110px;

    gap: 9px;

    align-items: end;
}


.wo-stop-type {
    height: 38px;

    display: flex;
    align-items: center;
}


.stop-type-label {
    min-width: 105px;

    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border-radius: 2px;

    color: white;

    font-size: 12px;
    font-weight: 700;
}


.stop-type-label.loading {
    background: #d89423;
}


.stop-type-label.unloading {
    background: #1589ba;
}


.wo-stop-actions {
    display: flex;

    gap: 4px;
}


.wo-stop-actions button {
    width: 33px;
    height: 38px;

    border: 0;

    background: #1767b7;

    color: white;

    font-size: 17px;

    cursor: pointer;
}


.wo-stop-actions .delete-stop {
    background: #7e252b;
}


.wo-stop-details {
    display: grid;

    grid-template-columns:
        1.5fr
        .65fr
        1fr
        2fr;

    gap: 9px;

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid #2c353e;
}


/* Cargo */

.wo-cargo-title {
    margin-top: 10px;
    margin-bottom: 7px;

    color: #d47b27;

    font-size: 12px;
    font-weight: 700;
}


.wo-cargo-grid {
    display: grid;

    grid-template-columns:
        2fr
        .6fr
        1fr
        .8fr
        .7fr
        .8fr;

    gap: 9px;
}


/* Notes */

.wo-notes textarea {
    min-height: 75px;

    padding: 10px;

    resize: vertical;
}


/* Footer */

.wo-footer {
    position: sticky;

    bottom: 0;

    z-index: 20;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    padding: 0 12px;

    background:
        rgba(11,15,20,.96);

    border-top:
        1px solid #35404b;
}


.wo-button {
    height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    border: 0;
    border-radius: 3px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    cursor: pointer;
}


.wo-button.cancel {
    background: #a92a2a;
}


.wo-button.template {
    background: #c97826;
}


.wo-button.confirm {
    background: #1767b7;
}


@media (max-width: 1450px) {

    .wo-top-grid {
        grid-template-columns: 1fr;
    }

    .wo-calc-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .wo-stop-top {
        grid-template-columns:
            repeat(4, 1fr);
    }

}



/* ============================================================
   WOJBAR TMS 2.0
   SIDEBAR / NAVY DESIGN
   ============================================================ */

:root {

    --wb-bg:
        #07111d;

    --wb-bg-deep:
        #050c14;

    --wb-sidebar:
        #081827;

    --wb-panel:
        #0c1d2f;

    --wb-panel-soft:
        #102338;

    --wb-panel-hover:
        #132a43;

    --wb-border:
        #294057;

    --wb-border-soft:
        #1d3449;

    --wb-blue:
        #2477d4;

    --wb-blue-bright:
        #2d8cff;

    --wb-orange:
        #e38a20;

    --wb-green:
        #38d98b;

    --wb-red:
        #ef476f;

    --wb-text:
        #eef5fc;

    --wb-muted:
        #8da4ba;

    --wb-muted-dark:
        #61798f;

    --wb-sidebar-width:
        225px;

}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    min-height: 100%;

    background:
        var(--wb-bg-deep);

    color:
        var(--wb-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}


body.wb-body {
    overflow: hidden;
}


.wb-app {
    width: 100vw;
    height: 100vh;

    display: grid;

    grid-template-columns:
        var(--wb-sidebar-width)
        minmax(0, 1fr);

    background:
        var(--wb-bg);
}



/* ============================================================
   SIDEBAR
   ============================================================ */

.wb-sidebar {
    height: 100vh;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #081a2b 0%,
            #071521 100%
        );

    border-right:
        1px solid var(--wb-border);

    overflow: hidden;
}


.wb-logo {
    height: 72px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        0
        14px;

    color:
        var(--wb-text);

    text-decoration: none;

    border-bottom:
        1px solid var(--wb-border-soft);
}


.wb-logo-mark {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    border:
        2px solid var(--wb-orange);

    transform:
        skew(-8deg);

    color:
        var(--wb-orange);

    font-size: 21px;
    font-weight: 800;
}


.wb-logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.wb-logo-text strong {
    font-size: 17px;

    letter-spacing:
        .5px;
}


.wb-logo-text span {
    margin-top: 4px;

    color:
        var(--wb-blue-bright);

    font-size: 13px;
    font-weight: 800;
}


.wb-side-nav {
    flex: 1;

    overflow-y: auto;

    padding:
        10px
        7px;
}


.wb-side-item {
    width: 100%;
    height: 46px;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        20px;

    align-items: center;

    margin-bottom:
        6px;

    padding:
        0
        8px;

    border:
        1px solid #20384d;

    border-radius:
        8px;

    background:
        #0d2235;

    color:
        #c5d3df;

    text-decoration:
        none;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        650;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


button.wb-side-item {
    appearance:
        none;
}


.wb-side-item:hover {
    background:
        #12304a;

    border-color:
        #31546f;

    color:
        white;
}


.wb-side-item.active {
    background:
        linear-gradient(
            90deg,
            #1767bc,
            #247bd6
        );

    border-color:
        #3389e6;

    color:
        white;

    box-shadow:
        0 0 13px
        rgba(37,126,218,.25);
}


.wb-side-icon {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        6px;

    background:
        #12314b;

    color:
        #57a9ff;

    font-size:
        15px;
}


.wb-side-item.active
.wb-side-icon {
    background:
        rgba(255,255,255,.12);

    color:
        white;
}


.wb-side-arrow {
    justify-self:
        center;

    color:
        #6f9bbb;

    font-size:
        21px;

    transition:
        transform .18s ease;
}


.wb-side-group.open
> .wb-side-item
.wb-side-arrow {
    transform:
        rotate(90deg);
}


.wb-side-submenu {
    display:
        none;

    margin:
        -1px
        4px
        7px
        16px;

    padding:
        5px
        0
        5px
        18px;

    border-left:
        1px solid #2d4b65;
}


.wb-side-group.open
.wb-side-submenu {
    display:
        block;
}


.wb-side-submenu a {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    padding:
        5px
        10px;

    border-radius:
        5px;

    color:
        #8fa8bc;

    text-decoration:
        none;

    font-size:
        12px;
}


.wb-side-submenu a:hover {
    background:
        #102b43;

    color:
        white;
}


.wb-sidebar-footer {
    height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0
        15px;

    border-top:
        1px solid var(--wb-border-soft);

    color:
        var(--wb-muted);

    font-size:
        11px;
}


.wb-online-dot {
    width:
        8px;

    height:
        8px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        var(--wb-green);

    box-shadow:
        0 0 8px
        rgba(56,217,139,.5);
}



/* ============================================================
   MAIN
   ============================================================ */

.wb-main {
    height:
        100vh;

    min-width:
        0;

    display:
        grid;

    grid-template-rows:
        72px
        42px
        minmax(0, 1fr);

    overflow:
        hidden;
}



/* ============================================================
   HEADER
   ============================================================ */

.wb-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0
        22px;

    background:
        #081523;

    border-bottom:
        1px solid var(--wb-border-soft);
}


.wb-header-title h1 {
    margin:
        0;

    color:
        #f5f8fb;

    font-size:
        20px;

    line-height:
        1.1;
}


.wb-header-title span {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--wb-muted-dark);

    font-size:
        11px;
}


.wb-header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.wb-header-status {
    height:
        34px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        12px;

    border:
        1px solid var(--wb-border);

    border-radius:
        7px;

    color:
        #a9bbcb;

    font-size:
        11px;
}


.wb-header-button {
    width:
        35px;

    height:
        35px;

    border:
        1px solid #337dc1;

    border-radius:
        7px;

    background:
        #1769bd;

    color:
        white;

    font-size:
        21px;

    cursor:
        pointer;
}


.wb-user {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.wb-user-avatar {
    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #15334c;

    border:
        1px solid #31516c;

    color:
        white;

    font-size:
        11px;

    font-weight:
        800;
}


.wb-user-text {
    display:
        flex;

    flex-direction:
        column;
}


.wb-user-text strong {
    font-size:
        12px;
}


.wb-user-text span {
    margin-top:
        2px;

    color:
        var(--wb-muted);

    font-size:
        10px;
}



/* ============================================================
   TABS
   ============================================================ */

.wb-main .tabbar {
    width:
        100% !important;

    height:
        42px !important;

    min-height:
        42px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        5px !important;

    padding:
        5px
        10px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    background:
        #07111d !important;

    border-bottom:
        1px solid var(--wb-border-soft) !important;
}


.wb-main .wb-tab {
    height:
        32px !important;

    min-height:
        32px !important;

    display:
        flex !important;

    align-items:
        center !important;

    margin:
        0 !important;

    border:
        1px solid #29445d !important;

    border-radius:
        6px !important;

    background:
        #0e263b !important;

    overflow:
        hidden !important;
}


.wb-main .wb-tab.active {
    background:
        #1769bd !important;

    border-color:
        #2f88de !important;
}


.wb-main .wb-tab-link {
    min-width:
        auto !important;

    max-width:
        230px !important;

    height:
        32px !important;

    min-height:
        32px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0
        13px !important;

    color:
        white !important;

    font-size:
        12px !important;

    font-weight:
        650 !important;

    line-height:
        normal !important;
}


.wb-main .wb-tab-close {
    width:
        31px !important;

    min-width:
        31px !important;

    height:
        32px !important;

    min-height:
        32px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #dce8f2 !important;

    font-size:
        17px !important;

    cursor:
        pointer !important;
}


.wb-main .wb-tab-close:hover {
    background:
        rgba(0,0,0,.2) !important;

    color:
        white !important;
}



/* ============================================================
   WORKSPACE
   ============================================================ */

.wb-main .workspace {
    min-height:
        0 !important;

    height:
        auto !important;

    overflow:
        auto !important;

    background:
        var(--wb-bg-deep) !important;
}



/* ============================================================
   DASHBOARD
   ============================================================ */

.wb-dashboard {
    min-height:
        100%;

    padding:
        16px
        20px
        10px;
}


.wb-kpi-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        12px;

    margin-bottom:
        12px;
}


.wb-kpi-card {
    min-height:
        112px;

    padding:
        15px
        17px;

    background:
        linear-gradient(
            145deg,
            #0d2033,
            #0a1b2c
        );

    border:
        1px solid var(--wb-border);

    border-radius:
        9px;
}


.wb-kpi-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #7f9bb1;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .25px;
}


.wb-kpi-icon {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    font-size:
        16px;
}


.wb-kpi-icon.blue {
    color:
        #5ba8ff;

    background:
        rgba(45,140,255,.14);
}


.wb-kpi-icon.green {
    color:
        var(--wb-green);

    background:
        rgba(56,217,139,.13);
}


.wb-kpi-icon.orange {
    color:
        var(--wb-orange);

    background:
        rgba(227,138,32,.14);
}


.wb-kpi-value {
    display:
        block;

    margin-top:
        -4px;

    color:
        #f4f8fc;

    font-size:
        25px;

    line-height:
        1;
}


.wb-kpi-card small {
    display:
        block;

    margin-top:
        9px;

    color:
        #648198;

    font-size:
        10px;
}



/* ============================================================
   PANELS
   ============================================================ */

.wb-panel {
    background:
        linear-gradient(
            145deg,
            #0c1d2f,
            #091a2a
        );

    border:
        1px solid var(--wb-border);

    border-radius:
        9px;

    overflow:
        hidden;
}


.wb-panel-head {
    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        10px
        14px;

    border-bottom:
        1px solid var(--wb-border-soft);
}


.wb-panel-head > div {
    display:
        flex;

    flex-direction:
        column;
}


.wb-panel-head strong {
    color:
        #e9f1f8;

    font-size:
        12px;
}


.wb-panel-head span {
    margin-top:
        3px;

    color:
        #68849a;

    font-size:
        10px;
}


.wb-panel-head a {
    color:
        #4ca0f7;

    text-decoration:
        none;

    font-size:
        10px;
}



/* ============================================================
   QUICK ACCESS
   ============================================================ */

.wb-quick-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        10px;

    padding:
        12px;
}


.wb-quick-card {
    min-height:
        70px;

    display:
        grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        18px;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px
        11px;

    background:
        #0f2539;

    border:
        1px solid #274158;

    border-radius:
        7px;

    color:
        white;

    text-decoration:
        none;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.wb-quick-card:hover {
    background:
        #14304a;

    border-color:
        #3c6d94;

    transform:
        translateY(-1px);
}


.wb-quick-icon {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        #123b60;

    color:
        #55a8ff;

    font-size:
        18px;

    font-weight:
        800;
}


.wb-quick-card > div:nth-child(2) {
    display:
        flex;

    flex-direction:
        column;
}


.wb-quick-card strong {
    font-size:
        12px;
}


.wb-quick-card span {
    margin-top:
        4px;

    color:
        #7893a9;

    font-size:
        10px;
}


.wb-quick-card b {
    color:
        #5986a7;

    font-size:
        22px;
}



/* ============================================================
   DASHBOARD COLUMNS
   ============================================================ */

.wb-dashboard-columns {
    display:
        grid;

    grid-template-columns:
        1.7fr
        1fr;

    gap:
        12px;

    margin-top:
        12px;
}


.wb-dashboard-columns
.wb-panel {
    min-height:
        250px;
}


.wb-empty-state {
    min-height:
        194px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.wb-empty-icon {
    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        9px;

    border-radius:
        50%;

    background:
        #102f4c;

    color:
        #52a8ff;

    font-size:
        21px;
}


.wb-empty-state strong {
    font-size:
        13px;
}


.wb-empty-state span {
    max-width:
        350px;

    margin-top:
        5px;

    color:
        #718ba0;

    font-size:
        10px;

    line-height:
        1.5;
}


.wb-empty-state a {
    margin-top:
        12px;

    padding:
        8px
        13px;

    border-radius:
        6px;

    background:
        #1769bd;

    color:
        white;

    text-decoration:
        none;

    font-size:
        11px;
}



/* ============================================================
   STATUS
   ============================================================ */

.wb-status-list {
    padding:
        18px
        16px;
}


.wb-status-row {
    display:
        grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        28px;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        19px;

    color:
        #9bb0c1;

    font-size:
        10px;
}


.wb-status-row strong {
    color:
        #eaf2f9;

    text-align:
        right;
}


.wb-status-bar {
    height:
        7px;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        #142b3f;
}


.wb-status-bar i {
    height:
        100%;

    display:
        block;

    border-radius:
        10px;

    background:
        var(--wb-blue);
}


.wb-status-bar.green i {
    background:
        var(--wb-green);
}



/* ============================================================
   BOTTOM
   ============================================================ */

.wb-dashboard-bottom {
    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr;

    gap:
        12px;

    margin-top:
        12px;
}


.wb-finance-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    padding:
        17px
        12px;
}


.wb-finance-grid > div {
    display:
        flex;

    flex-direction:
        column;

    padding:
        2px
        14px;

    border-right:
        1px solid var(--wb-border-soft);
}


.wb-finance-grid > div:last-child {
    border-right:
        0;
}


.wb-finance-grid span {
    color:
        #718da3;

    font-size:
        10px;
}


.wb-finance-grid strong {
    margin-top:
        6px;

    color:
        #eaf3fa;

    font-size:
        17px;
}


.wb-finance-grid
.positive strong {
    color:
        var(--wb-green);
}


.wb-small-empty {
    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;
}


.wb-check {
    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(56,217,139,.12);

    color:
        var(--wb-green);

    font-size:
        18px;
}


.wb-small-empty > div {
    display:
        flex;

    flex-direction:
        column;
}


.wb-small-empty strong {
    font-size:
        11px;
}


.wb-small-empty
div span {
    margin-top:
        3px;

    color:
        #708ba1;

    font-size:
        10px;
}


.wb-dashboard-footer {
    margin-top:
        20px;

    padding:
        12px;

    border-top:
        1px solid var(--wb-border-soft);

    color:
        #4e6d84;

    text-align:
        center;

    font-size:
        9px;
}



/* ============================================================
   BESTEHENDE TMS MASKEN IN NEUEM SHELL
   ============================================================ */

.wb-main
.partner-page,
.wb-main
.wo-transport-page,
.wb-main
.new-partner-overlay {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}


.wb-main
.wo-transport-page {
    background:
        var(--wb-bg-deep) !important;
}


.wb-main
.wo-box {
    background:
        var(--wb-panel) !important;

    border-color:
        var(--wb-border) !important;

    border-radius:
        7px !important;

    overflow:
        hidden;
}


.wb-main
.wo-box-title.blue {
    background:
        #123c62 !important;
}


.wb-main
.wo-box-title.orange {
    background:
        #bd701f !important;
}


.wb-main
.wo-field input,
.wb-main
.wo-field select,
.wb-main
.wo-field textarea,
.wb-main
.wo-notes textarea {
    background:
        #091827 !important;

    border-color:
        #31495e !important;

    color:
        #eaf1f7 !important;
}


.wb-main
.wo-kpi {
    background:
        #102337 !important;

    border-color:
        #29445b !important;

    border-radius:
        5px !important;
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1350px) {

    :root {
        --wb-sidebar-width:
            205px;
    }

    .wb-kpi-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .wb-quick-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 950px) {

    :root {
        --wb-sidebar-width:
            72px;
    }

    .wb-logo-text,
    .wb-side-label,
    .wb-side-arrow,
    .wb-sidebar-footer span:last-child {
        display:
            none;
    }

    .wb-logo {
        justify-content:
            center;

        padding:
            0;
    }

    .wb-side-item {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        padding:
            0;
    }

    .wb-side-submenu {
        display:
            none !important;
    }

    .wb-dashboard-columns,
    .wb-dashboard-bottom {
        grid-template-columns:
            1fr;
    }

}




/* ============================================================
   WOJBAR TMS 2.1
   TRANSPORTAUFTRAG
   ============================================================ */


/* ------------------------------------------------------------
   GESAMTSEITE
   ------------------------------------------------------------ */

.wb-main .wo-transport-page {
    width: 100% !important;
    min-height: 100% !important;

    padding:
        16px
        18px
        90px !important;

    background:
        #050d16 !important;

    color:
        #eaf2f9 !important;
}


/* ------------------------------------------------------------
   MELDUNGEN
   ------------------------------------------------------------ */

.wb-main .wo-success,
.wb-main .wo-error {
    margin-bottom: 14px !important;

    padding:
        11px
        14px !important;

    border-radius:
        7px !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;
}


.wb-main .wo-success {
    background:
        rgba(39, 181, 117, .12) !important;

    border:
        1px solid rgba(57, 217, 139, .42) !important;

    color:
        #62e5a4 !important;
}


.wb-main .wo-error {
    background:
        rgba(224, 61, 80, .12) !important;

    border:
        1px solid rgba(239, 71, 111, .45) !important;

    color:
        #ff8199 !important;
}


/* ------------------------------------------------------------
   OBERE ZWEI SPALTEN
   ------------------------------------------------------------ */

.wb-main .wo-top-grid {
    display: grid !important;

    grid-template-columns:
        minmax(540px, 1.15fr)
        minmax(600px, .95fr) !important;

    gap:
        13px !important;

    margin-bottom:
        13px !important;
}


/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

.wb-main .wo-box {
    margin:
        0
        0
        13px !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            145deg,
            #0c1d2f 0%,
            #091827 100%
        ) !important;

    border:
        1px solid #294159 !important;

    border-radius:
        9px !important;

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, .10) !important;
}


.wb-main .wo-top-grid .wo-box {
    margin-bottom:
        0 !important;
}


/* ------------------------------------------------------------
   PANEL HEADER
   ------------------------------------------------------------ */

.wb-main .wo-box-title {
    min-height:
        43px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0
        15px !important;

    border-bottom:
        1px solid #29435c !important;

    color:
        #f3f7fb !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .35px !important;
}


.wb-main .wo-box-title.blue {
    background:
        linear-gradient(
            90deg,
            #10375a,
            #0d2d49
        ) !important;

    border-left:
        3px solid #2d8cff !important;
}


.wb-main .wo-box-title.orange {
    background:
        linear-gradient(
            90deg,
            #49301b,
            #172433
        ) !important;

    border-left:
        3px solid #e38a20 !important;
}


.wb-main .wo-box-body {
    padding:
        14px !important;
}


/* ------------------------------------------------------------
   BASISDATEN
   ------------------------------------------------------------ */

.wb-main .wo-base-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(210px, 2fr)
        minmax(110px, .8fr)
        90px
        minmax(160px, 1.25fr) !important;

    gap:
        13px !important;

    align-items:
        end !important;
}


.wb-main .wo-base-grid .wo-field:nth-child(5) {
    grid-column:
        1 / 2 !important;
}


.wb-main .wo-base-grid .wo-field:nth-child(6) {
    grid-column:
        2 / 3 !important;
}


/* ------------------------------------------------------------
   FELDER
   ------------------------------------------------------------ */

.wb-main .wo-field {
    min-width:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        6px !important;
}


.wb-main .wo-field > span {
    color:
        #a9bdcf !important;

    font-size:
        11px !important;

    font-weight:
        650 !important;

    line-height:
        1.2 !important;
}


.wb-main .wo-field input,
.wb-main .wo-field select,
.wb-main .wo-field textarea,
.wb-main .wo-notes textarea {
    width:
        100% !important;

    height:
        38px !important;

    min-height:
        38px !important;

    padding:
        0
        11px !important;

    outline:
        none !important;

    border:
        1px solid #314a61 !important;

    border-radius:
        6px !important;

    background:
        #071827 !important;

    color:
        #edf4fa !important;

    font-family:
        inherit !important;

    font-size:
        12px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}


.wb-main .wo-field input:hover,
.wb-main .wo-field select:hover {
    border-color:
        #45657f !important;

    background:
        #091c2c !important;
}


.wb-main .wo-field input:focus,
.wb-main .wo-field select:focus,
.wb-main .wo-field textarea:focus,
.wb-main .wo-notes textarea:focus {
    border-color:
        #2d8cff !important;

    background:
        #091d2e !important;

    box-shadow:
        0 0 0 2px
        rgba(45, 140, 255, .10) !important;
}


.wb-main .wo-field input::placeholder,
.wb-main .wo-notes textarea::placeholder {
    color:
        #5e778d !important;
}


/* ------------------------------------------------------------
   KILOMETER / KALKULATION
   ------------------------------------------------------------ */

.wb-main .wo-calc-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(76px, .8fr))
        repeat(5, minmax(88px, 1fr)) !important;

    gap:
        9px !important;

    align-items:
        end !important;
}


.wb-main .wo-kpi {
    min-width:
        0 !important;

    height:
        61px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    padding:
        8px
        10px !important;

    border:
        1px solid #29465f !important;

    border-radius:
        7px !important;

    background:
        linear-gradient(
            145deg,
            #10263b,
            #0c2032
        ) !important;
}


.wb-main .wo-kpi span {
    margin-bottom:
        5px !important;

    color:
        #708ca3 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase !important;
}


.wb-main .wo-kpi strong {
    overflow:
        hidden !important;

    color:
        #eef5fb !important;

    font-size:
        13px !important;

    line-height:
        1.1 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


.wb-main .wo-kpi.profit {
    border-color:
        rgba(56, 217, 139, .35) !important;

    background:
        linear-gradient(
            145deg,
            rgba(31, 94, 73, .35),
            #0c2032
        ) !important;
}


.wb-main .wo-kpi.profit strong {
    color:
        #3ddb91 !important;
}


.wb-main .wo-kpi.margin {
    border-color:
        rgba(56, 217, 139, .35) !important;
}


.wb-main .wo-kpi.margin strong {
    color:
        #3ddb91 !important;
}


/* ------------------------------------------------------------
   TRANSPORTSET
   ------------------------------------------------------------ */

.wb-main .wo-transportset {
    position:
        relative !important;
}


.wb-main .wo-mode-switch {
    display:
        flex !important;

    gap:
        8px !important;

    margin-bottom:
        14px !important;
}


.wb-main .wo-mode-switch label {
    margin:
        0 !important;

    cursor:
        pointer !important;
}


.wb-main .wo-mode-switch input {
    position:
        absolute !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


.wb-main .wo-mode-switch span {
    min-width:
        125px !important;

    height:
        35px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0
        16px !important;

    border:
        1px solid #34516a !important;

    border-radius:
        6px !important;

    background:
        #0d2235 !important;

    color:
        #8fa7ba !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    transition:
        all .15s ease !important;
}


.wb-main
.wo-mode-switch
input:checked + span {
    border-color:
        #e38a20 !important;

    background:
        linear-gradient(
            90deg,
            #d17a1c,
            #e38a20
        ) !important;

    color:
        white !important;

    box-shadow:
        0 0 12px
        rgba(227, 138, 32, .12) !important;
}


.wb-main .wo-tu-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(260px, 1.7fr)
        minmax(180px, 1fr)
        minmax(160px, .9fr)
        minmax(140px, .7fr)
        90px !important;

    gap:
        13px !important;

    align-items:
        end !important;
}


.wb-main .wo-ownfleet {
    min-height:
        56px !important;

    padding:
        16px !important;

    border:
        1px dashed #34516a !important;

    border-radius:
        7px !important;

    background:
        #0a1b2b !important;

    color:
        #7f98ad !important;

    font-size:
        11px !important;
}


/* ------------------------------------------------------------
   STOPPS HEADER
   ------------------------------------------------------------ */

.wb-main .wo-stops-header {
    justify-content:
        space-between !important;

    gap:
        15px !important;
}


.wb-main .wo-stops-header > div {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;
}


.wb-main .wo-small-button {
    height:
        30px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0
        11px !important;

    border:
        1px solid #337bc0 !important;

    border-radius:
        5px !important;

    background:
        #1769bd !important;

    color:
        white !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        650 !important;

    cursor:
        pointer !important;
}


.wb-main .wo-small-button:hover {
    background:
        #227bd5 !important;
}


.wb-main .wo-small-button.route {
    border-color:
        #c9781d !important;

    background:
        #c9781d !important;
}


.wb-main .wo-small-button.route:hover {
    background:
        #df8a27 !important;
}


/* ------------------------------------------------------------
   LADE-/ENTLADESTELLE
   ------------------------------------------------------------ */

.wb-main #stops-container {
    padding:
        11px !important;

    background:
        #07131f !important;
}


.wb-main .wo-stop {
    position:
        relative !important;

    margin:
        0
        0
        11px !important;

    padding:
        13px !important;

    border:
        1px solid #284157 !important;

    border-radius:
        8px !important;

    background:
        linear-gradient(
            145deg,
            #0d1c2a,
            #0a1825
        ) !important;
}


.wb-main .wo-stop:last-child {
    margin-bottom:
        0 !important;
}


.wb-main .wo-stop:hover {
    border-color:
        #34546e !important;
}


/* erste Stop-Zeile */

.wb-main .wo-stop-top {
    display:
        grid !important;

    grid-template-columns:
        105px
        120px
        100px
        100px
        minmax(190px, 1.45fr)
        95px
        minmax(150px, 1.1fr)
        104px !important;

    gap:
        9px !important;

    align-items:
        end !important;
}


/* ------------------------------------------------------------
   STOP-TYP
   ------------------------------------------------------------ */

.wb-main .wo-stop-type {
    display:
        flex !important;

    align-items:
        flex-end !important;

    height:
        100% !important;

    padding-bottom:
        1px !important;
}


.wb-main .stop-type-label {
    width:
        100% !important;

    height:
        38px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        6px !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .15px !important;
}


.wb-main .stop-type-label.loading {
    background:
        rgba(227, 138, 32, .16) !important;

    border:
        1px solid rgba(227, 138, 32, .55) !important;

    color:
        #f4a744 !important;
}


.wb-main .stop-type-label.unloading {
    background:
        rgba(31, 167, 219, .15) !important;

    border:
        1px solid rgba(31, 167, 219, .52) !important;

    color:
        #48c0ee !important;
}


/* ------------------------------------------------------------
   STOP ACTIONS
   ------------------------------------------------------------ */

.wb-main .wo-stop-actions {
    height:
        38px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3, 1fr) !important;

    gap:
        4px !important;

    align-self:
        end !important;
}


.wb-main .wo-stop-actions button {
    min-width:
        0 !important;

    height:
        38px !important;

    padding:
        0 !important;

    border:
        1px solid #2d6fa9 !important;

    border-radius:
        5px !important;

    background:
        #135a99 !important;

    color:
        white !important;

    font-size:
        14px !important;

    cursor:
        pointer !important;
}


.wb-main .wo-stop-actions button:hover {
    background:
        #1c73bd !important;
}


.wb-main .wo-stop-actions .delete-stop {
    border-color:
        #87313a !important;

    background:
        #70262e !important;
}


.wb-main
.wo-stop-actions
.delete-stop:hover {
    background:
        #9a303b !important;
}


/* ------------------------------------------------------------
   STOP DETAILS
   ------------------------------------------------------------ */

.wb-main .wo-stop-details {
    display:
        grid !important;

    grid-template-columns:
        minmax(230px, 1.25fr)
        165px
        minmax(160px, .85fr)
        minmax(240px, 1.65fr) !important;

    gap:
        9px !important;

    margin-top:
        12px !important;

    padding-top:
        12px !important;

    border-top:
        1px solid #1c3347 !important;
}


/* ------------------------------------------------------------
   FRACHTGUT
   ------------------------------------------------------------ */

.wb-main .wo-cargo-title {
    margin:
        13px
        0
        8px !important;

    padding:
        0 !important;

    color:
        #e4932e !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .35px !important;
}


.wb-main .wo-cargo-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(220px, 1.7fr)
        105px
        minmax(145px, .85fr)
        125px
        115px
        115px !important;

    gap:
        9px !important;
}


/* ------------------------------------------------------------
   INTERNE HINWEISE
   ------------------------------------------------------------ */

.wb-main .wo-notes .wo-box-body {
    padding:
        12px !important;
}


.wb-main .wo-notes textarea {
    height:
        74px !important;

    min-height:
        74px !important;

    padding:
        10px
        12px !important;

    resize:
        vertical !important;

    line-height:
        1.45 !important;
}


/* ------------------------------------------------------------
   FOOTER ACTION BAR
   ------------------------------------------------------------ */

.wb-main .wo-footer {
    position:
        sticky !important;

    bottom:
        0 !important;

    z-index:
        25 !important;

    min-height:
        59px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        9px !important;

    margin:
        12px
        -18px
        -90px !important;

    padding:
        10px
        18px !important;

    border-top:
        1px solid #294159 !important;

    background:
        rgba(6, 15, 24, .97) !important;

    box-shadow:
        0 -8px 25px
        rgba(0, 0, 0, .18) !important;
}


.wb-main .wo-button {
    height:
        36px !important;

    min-width:
        115px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0
        15px !important;

    border:
        1px solid transparent !important;

    border-radius:
        6px !important;

    color:
        white !important;

    text-decoration:
        none !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        650 !important;

    cursor:
        pointer !important;
}


.wb-main .wo-button.cancel {
    background:
        #6c2730 !important;

    border-color:
        #8b343e !important;
}


.wb-main .wo-button.cancel:hover {
    background:
        #87313b !important;
}


.wb-main .wo-button.template {
    background:
        #9b5c19 !important;

    border-color:
        #bd731e !important;
}


.wb-main .wo-button.template:hover {
    background:
        #bd731e !important;
}


.wb-main .wo-button.confirm {
    min-width:
        165px !important;

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #237dd6
        ) !important;

    border-color:
        #3388da !important;
}


.wb-main .wo-button.confirm:hover {
    background:
        linear-gradient(
            90deg,
            #217bd6,
            #2d8cff
        ) !important;
}


/* ------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------ */

.wb-main .workspace::-webkit-scrollbar,
.wb-main .wo-transport-page::-webkit-scrollbar {
    width:
        9px;
}


.wb-main .workspace::-webkit-scrollbar-track,
.wb-main .wo-transport-page::-webkit-scrollbar-track {
    background:
        #07111b;
}


.wb-main .workspace::-webkit-scrollbar-thumb,
.wb-main .wo-transport-page::-webkit-scrollbar-thumb {
    background:
        #29445b;

    border-radius:
        10px;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1500px) {

    .wb-main .wo-top-grid {
        grid-template-columns:
            1fr !important;
    }

    .wb-main .wo-calc-grid {
        grid-template-columns:
            repeat(4, 1fr) !important;
    }

}


@media (max-width: 1250px) {

    .wb-main .wo-tu-grid {
        grid-template-columns:
            repeat(3, 1fr) !important;
    }

    .wb-main .wo-stop-top {
        grid-template-columns:
            repeat(4, 1fr) !important;
    }

    .wb-main .wo-stop-details {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }

    .wb-main .wo-cargo-grid {
        grid-template-columns:
            repeat(3, 1fr) !important;
    }

}




/* ============================================================
   WOJBAR TMS 2.2
   NO ORANGE / UNIFIED WOJBAR DESIGN
   ============================================================ */


/* ------------------------------------------------------------
   ALLE PANEL-HEADER EINHEITLICH
   ------------------------------------------------------------ */

.wb-main .wo-box-title,
.wb-main .wo-box-title.blue,
.wb-main .wo-box-title.orange {

    background:
        linear-gradient(
            90deg,
            #10375a 0%,
            #0d2d49 65%,
            #0b263e 100%
        ) !important;

    border-left:
        3px solid #2d8cff !important;

    border-bottom:
        1px solid #29465e !important;

    color:
        #f1f6fb !important;
}


/* ------------------------------------------------------------
   TU / EIGENER FUHRPARK
   ------------------------------------------------------------ */

.wb-main
.wo-mode-switch
input:checked + span {

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #247bd6
        ) !important;

    border-color:
        #3389e6 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 12px
        rgba(45, 140, 255, .16) !important;
}


.wb-main
.wo-mode-switch
span {

    background:
        #0c2133 !important;

    border-color:
        #314c63 !important;

    color:
        #a6b9c9 !important;
}


.wb-main
.wo-mode-switch
span:hover {

    background:
        #102b42 !important;

    border-color:
        #416784 !important;
}


/* ------------------------------------------------------------
   ROUTENBERECHNUNG
   ------------------------------------------------------------ */

.wb-main .wo-small-button.route {

    background:
        #174f7f !important;

    border-color:
        #286b9e !important;

    color:
        #ffffff !important;
}


.wb-main .wo-small-button.route:hover {

    background:
        #1d639d !important;

    border-color:
        #3280bb !important;
}


/* ------------------------------------------------------------
   LADESTELLE
   ------------------------------------------------------------ */

.wb-main .stop-type-label.loading {

    background:
        rgba(45, 140, 255, .13) !important;

    border:
        1px solid rgba(45, 140, 255, .48) !important;

    color:
        #66b2ff !important;
}


/* ------------------------------------------------------------
   ENTLADESTELLE
   ------------------------------------------------------------ */

.wb-main .stop-type-label.unloading {

    background:
        rgba(25, 184, 222, .12) !important;

    border:
        1px solid rgba(25, 184, 222, .42) !important;

    color:
        #48c8e8 !important;
}


/* ------------------------------------------------------------
   FRACHTGUT
   ------------------------------------------------------------ */

.wb-main .wo-cargo-title {

    color:
        #5da9ee !important;

    border-left:
        2px solid #2d8cff !important;

    padding-left:
        7px !important;

    font-size:
        9px !important;

    letter-spacing:
        .45px !important;
}


/* ------------------------------------------------------------
   VORLAGE SPEICHERN
   ------------------------------------------------------------ */

.wb-main .wo-button.template {

    background:
        #183550 !important;

    border-color:
        #315875 !important;

    color:
        #d6e4ef !important;
}


.wb-main .wo-button.template:hover {

    background:
        #214866 !important;

    border-color:
        #3e6d90 !important;
}


/* ------------------------------------------------------------
   BASISDATEN - KEIN SONDERFARBTON MEHR
   ------------------------------------------------------------ */

.wb-main
.wo-top-grid
.wo-box:first-child
.wo-box-title {

    background:
        linear-gradient(
            90deg,
            #10375a,
            #0d2d49
        ) !important;

    border-left:
        3px solid #2d8cff !important;
}


/* ------------------------------------------------------------
   PANEL-OPTIK ETWAS EIGENSTÄNDIGER
   ------------------------------------------------------------ */

.wb-main .wo-box {

    background:
        linear-gradient(
            145deg,
            #0b1d2d,
            #081725
        ) !important;

    border:
        1px solid #253e54 !important;

    box-shadow:
        none !important;
}


.wb-main .wo-box:hover {

    border-color:
        #2d4b64 !important;
}


/* ------------------------------------------------------------
   STOP-KARTEN
   ------------------------------------------------------------ */

.wb-main .wo-stop {

    background:
        linear-gradient(
            145deg,
            #0b1c2a,
            #081722
        ) !important;

    border:
        1px solid #233c51 !important;

    box-shadow:
        inset 3px 0 0
        rgba(45, 140, 255, .35) !important;
}


.wb-main .wo-stop:hover {

    border-color:
        #36566e !important;
}


/* ------------------------------------------------------------
   FRACHTGUT-BEREICH LEICHT ABSETZEN
   ------------------------------------------------------------ */

.wb-main .wo-cargo-grid {

    padding:
        10px !important;

    border:
        1px solid #1c3448 !important;

    border-radius:
        6px !important;

    background:
        rgba(5, 17, 28, .42) !important;
}


/* ------------------------------------------------------------
   KALKULATION
   ------------------------------------------------------------ */

.wb-main .wo-kpi {

    background:
        linear-gradient(
            145deg,
            #0e2639,
            #0b1f30
        ) !important;

    border-color:
        #29455d !important;
}


.wb-main .wo-kpi.profit,
.wb-main .wo-kpi.margin {

    background:
        linear-gradient(
            145deg,
            #0d2c2d,
            #0b202d
        ) !important;

    border-color:
        rgba(56, 217, 139, .27) !important;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.wb-main .wo-small-button {

    background:
        #1769bd !important;

    border-color:
        #2d7ec6 !important;

    box-shadow:
        none !important;
}


.wb-main .wo-small-button:hover {

    background:
        #237dd6 !important;
}


/* ------------------------------------------------------------
   HAUPTAKTION
   ------------------------------------------------------------ */

.wb-main .wo-button.confirm {

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #247bd6
        ) !important;

    border-color:
        #3289dd !important;
}


/* ------------------------------------------------------------
   ABBRECHEN BLEIBT ROT
   ------------------------------------------------------------ */

.wb-main .wo-button.cancel {

    background:
        #61272e !important;

    border-color:
        #81333d !important;
}


/* ------------------------------------------------------------
   INPUTS NOCH ETWAS WOJBAR-TYPISCHER
   ------------------------------------------------------------ */

.wb-main .wo-field input,
.wb-main .wo-field select,
.wb-main .wo-field textarea,
.wb-main .wo-notes textarea {

    background:
        #071624 !important;

    border-color:
        #2c465d !important;

    border-radius:
        5px !important;
}


.wb-main .wo-field input:focus,
.wb-main .wo-field select:focus,
.wb-main .wo-field textarea:focus,
.wb-main .wo-notes textarea:focus {

    border-color:
        #338be0 !important;

    box-shadow:
        inset 3px 0 0 #2d8cff !important;
}


/* ------------------------------------------------------------
   TAB / ACTIVE
   ------------------------------------------------------------ */

.wb-main .wb-tab.active {

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #2076ca
        ) !important;

    border-color:
        #3186d5 !important;
}




/* ============================================================
   WOJBAR TMS
   ACTIONS DIREKT UNTER KALKULATION
   ============================================================ */

.wb-main .wo-calc-actions {

    grid-column:
        2 / 3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        -2px;

    padding:
        0 2px 1px;

}


/* alte Footerleiste definitiv deaktivieren */

.wb-main .wo-footer {
    display:
        none !important;
}


/* Seite braucht unten keinen Platz für sticky Footer mehr */

.wb-main .wo-transport-page {

    padding-bottom:
        18px !important;

}


/* Buttons */

.wb-main .wo-calc-actions .wo-button {

    height:
        38px !important;

    min-width:
        145px !important;

    padding:
        0 18px !important;

    border-radius:
        7px !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

}


.wb-main .wo-calc-actions .wo-button.confirm {

    min-width:
        190px !important;

}


/* bei kleinerem Bildschirm unter beide oberen Bereiche */

@media (max-width: 1500px) {

    .wb-main .wo-calc-actions {

        grid-column:
            1 / -1;

    }

}



/* ============================================================
   WOJBAR TMS
   KALKULATION + AKTIONSBUTTONS KOMPAKT
   ============================================================ */

/*
   Der Kalkulationsbereich ist momentan unnötig hoch.
   Höhe auf Inhalt reduzieren.
*/

.wb-main .wo-top-grid .wo-box {
    min-height: 0 !important;
    height: auto !important;
}

.wb-main .wo-top-grid .wo-box-body {
    min-height: 0 !important;
}


/*
   Kalkulationsbereich kompakter
*/

.wb-main .wo-calc-grid {
    margin-bottom: 0 !important;
}


/*
   Buttons direkt an den Kalkulationskasten heranziehen
*/

.wb-main .wo-calc-actions {
    grid-column: 2 / 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    margin-top: -78px !important;
    margin-bottom: 18px !important;

    padding:
        0
        4px
        0
        4px !important;

    position: relative !important;
    z-index: 5 !important;
}


/*
   Etwas Abstand rechts/links
*/

.wb-main .wo-calc-actions .wo-button {
    height: 38px !important;
}

.wb-main .wo-calc-actions .wo-button.cancel {
    min-width: 135px !important;
}

.wb-main .wo-calc-actions .wo-button.template {
    min-width: 175px !important;
}

.wb-main .wo-calc-actions .wo-button.confirm {
    min-width: 205px !important;
}


/*
   Bei kleinerem Bildschirm normal untereinander,
   damit nichts überlappt.
*/

@media (max-width: 1500px) {

    .wb-main .wo-calc-actions {
        grid-column: 1 / -1 !important;

        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

}



/* ============================================================
   KALKULATION - BUTTON REIHENFOLGE
   ============================================================ */

.wb-main .wo-calc-actions {
    justify-content: flex-end !important;
}

/* 1. Transportauftrag anlegen */
.wb-main .wo-calc-actions .wo-button.confirm {
    order: 1 !important;
}

/* 2. Als Vorlage speichern */
.wb-main .wo-calc-actions .wo-button.template {
    order: 2 !important;
}

/* 3. Abbrechen */
.wb-main .wo-calc-actions .wo-button.cancel {
    order: 3 !important;
}



/* ============================================================
   WOJBAR TMS
   AKTIONSLEISTE WIEDER UNTEN
   ============================================================ */

.wb-main .wo-calc-actions {

    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;

    grid-column: 1 / -1 !important;

    width: calc(100% + 36px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    margin:
        14px
        -18px
        -18px !important;

    padding:
        11px
        18px !important;

    background:
        rgba(5, 14, 23, .98) !important;

    border-top:
        1px solid #294159 !important;

    box-shadow:
        0 -8px 22px
        rgba(0, 0, 0, .20) !important;
}


/* Reihenfolge:
   1 Transportauftrag
   2 Vorlage
   3 Abbrechen
*/

.wb-main .wo-calc-actions .wo-button.confirm {
    order: 1 !important;
    min-width: 205px !important;
}

.wb-main .wo-calc-actions .wo-button.template {
    order: 2 !important;
    min-width: 175px !important;
}

.wb-main .wo-calc-actions .wo-button.cancel {
    order: 3 !important;
    min-width: 135px !important;
}


/* unten wieder Platz für die Leiste */

.wb-main .wo-transport-page {
    padding-bottom: 75px !important;
}


/* frühere Positionierung unter Kalkulation überschreiben */

@media (max-width: 1500px) {

    .wb-main .wo-calc-actions {
        grid-column: 1 / -1 !important;
        margin-top: 14px !important;
        margin-bottom: -18px !important;
    }

}



/* ============================================================
   WOJBAR TMS
   ABSCHLUSSLEISTE GANZ UNTEN
   ============================================================ */

.wb-main .wo-calc-actions {
    display: none !important;
}


.wb-main .wo-bottom-actions {

    position: static !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    margin: 12px 0 0 0 !important;

    padding: 12px 14px !important;

    background:
        #07131f !important;

    border:
        1px solid #253e54 !important;

    border-radius:
        8px !important;
}


/* 1. Transportauftrag */

.wb-main .wo-bottom-actions .wo-button.confirm {
    order: 1 !important;

    min-width: 205px !important;
}


/* 2. Vorlage */

.wb-main .wo-bottom-actions .wo-button.template {
    order: 2 !important;

    min-width: 175px !important;
}


/* 3. Abbrechen */

.wb-main .wo-bottom-actions .wo-button.cancel {
    order: 3 !important;

    min-width: 135px !important;
}


/* keine künstliche Footer-Reserve mehr */

.wb-main .wo-transport-page {
    padding-bottom: 18px !important;
}


/* alte Footerleiste bleibt aus */

.wb-main .wo-footer {
    display: none !important;
}



/* ============================================================
   WOJBAR TMS
   CUSTOMER / NEW PARTNER DESIGN V2
   ============================================================ */


/* ------------------------------------------------------------
   GRUNDLAYOUT
   ------------------------------------------------------------ */

.new-partner-overlay {

    width: 100% !important;
    min-height: 100% !important;

    padding: 10px !important;

    background:
        #07111b !important;
}


.new-partner-window {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background:
        transparent !important;

    border: 0 !important;

    box-shadow:
        none !important;
}


/* ------------------------------------------------------------
   SEITENTITEL
   ------------------------------------------------------------ */

.new-partner-titlebar {

    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 18px !important;

    margin-bottom: 12px !important;

    background:
        linear-gradient(
            90deg,
            #0d2b46,
            #0b2237
        ) !important;

    border:
        1px solid #29445b !important;

    border-left:
        3px solid #2d8cff !important;

    border-radius:
        8px !important;

    color:
        #f3f7fb !important;
}


.new-partner-titlebar strong {

    font-size: 16px !important;
    font-weight: 800 !important;
}


.new-partner-titlebar .window-actions {

    display: flex !important;
    align-items: center !important;

    gap: 6px !important;
}


.new-partner-titlebar .window-actions button,
.new-partner-titlebar .window-actions a {

    width: 31px !important;
    height: 31px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background:
        #102b43 !important;

    border:
        1px solid #31516a !important;

    border-radius:
        6px !important;

    color:
        #d9e8f4 !important;

    text-decoration:
        none !important;

    font-size:
        17px !important;
}


.new-partner-titlebar .window-actions button:hover,
.new-partner-titlebar .window-actions a:hover {

    background:
        #174a73 !important;

    border-color:
        #2d8cff !important;
}


/* ------------------------------------------------------------
   BODY
   ------------------------------------------------------------ */

.new-partner-body {

    padding: 0 !important;

    background:
        transparent !important;
}


/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

.np-panel {

    background:
        linear-gradient(
            145deg,
            #0b1c2a,
            #081722
        ) !important;

    border:
        1px solid #263f54 !important;

    border-radius:
        8px !important;

    overflow:
        hidden !important;

    box-shadow:
        none !important;
}


/* ALLE HEADER GLEICH - KEIN ORANGE */

.np-header,
.np-header.blue,
.np-header.orange {

    min-height:
        40px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 15px !important;

    background:
        linear-gradient(
            90deg,
            #123d61,
            #0d2f4c
        ) !important;

    border:
        0 !important;

    border-left:
        3px solid #2d8cff !important;

    border-bottom:
        1px solid #294a63 !important;

    color:
        #f0f6fb !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .15px !important;
}


/* ------------------------------------------------------------
   SECTION TITLES
   ------------------------------------------------------------ */

.np-section-title {

    min-height:
        40px !important;

    display:
        flex !important;

    align-items:
        center !important;

    padding:
        0 15px !important;

    margin:
        -1px
        -1px
        14px
        -1px !important;

    background:
        linear-gradient(
            90deg,
            #123d61,
            #0d2f4c
        ) !important;

    border-left:
        3px solid #2d8cff !important;

    border-bottom:
        1px solid #294a63 !important;

    color:
        #f0f6fb !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;
}


/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.np-grid {

    gap:
        12px !important;
}


.download-grid {

    margin-top:
        12px !important;

    grid-template-columns:
        1fr 1fr !important;
}


.main-data-grid {

    margin-top:
        12px !important;

    grid-template-columns:
        1fr 1fr !important;
}


.bottom-grid {

    margin-top:
        12px !important;

    grid-template-columns:
        1fr 1fr !important;
}


/* ------------------------------------------------------------
   DUPLETTEN
   ------------------------------------------------------------ */

.duplicate-panel {

    min-height:
        auto !important;
}


.duplicate-content {

    min-height:
        64px !important;

    padding:
        13px 15px !important;

    background:
        rgba(5, 16, 26, .40) !important;

    color:
        #a9bdcc !important;

    font-size:
        12px !important;
}


.duplicate-results {

    margin-top:
        7px !important;
}


.duplicate-ok {

    color:
        #39d98a !important;
}


.duplicate-warning {

    padding:
        8px 10px !important;

    background:
        rgba(183, 58, 69, .12) !important;

    border:
        1px solid rgba(209, 72, 84, .30) !important;

    border-radius:
        5px !important;

    color:
        #ffadb4 !important;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.np-content {

    padding:
        14px !important;
}


/* ------------------------------------------------------------
   LABELS
   ------------------------------------------------------------ */

.np-panel label {

    display:
        block !important;

    margin-bottom:
        6px !important;

    color:
        #bdd0df !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;
}


.np-panel label span {

    color:
        #ef646f;
}


/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

.np-panel input[type="text"],
.np-panel input[type="email"],
.np-panel input[type="number"],
.np-panel input[type="date"],
.np-panel select,
.np-panel textarea {

    width:
        100% !important;

    height:
        39px !important;

    padding:
        0 12px !important;

    background:
        #071624 !important;

    border:
        1px solid #304c63 !important;

    border-radius:
        5px !important;

    color:
        #eaf2f8 !important;

    font-size:
        12px !important;

    outline:
        none !important;

    box-sizing:
        border-box !important;
}


.np-panel input::placeholder {

    color:
        #657d90 !important;
}


.np-panel input:focus,
.np-panel select:focus,
.np-panel textarea:focus {

    border-color:
        #2d8cff !important;

    box-shadow:
        inset 3px 0 0 #2d8cff !important;
}


.np-panel input:disabled,
.np-panel select:disabled {

    background:
        #0b141c !important;

    color:
        #637583 !important;

    opacity:
        .75 !important;
}


/* ------------------------------------------------------------
   BASISDATEN
   ------------------------------------------------------------ */

.form-panel {

    padding:
        0 14px 15px !important;
}


.form-two {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        13px 14px !important;
}


.address-grid {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        13px 14px !important;
}


/* ------------------------------------------------------------
   UST CHECK / EXTERNE DATEN
   ------------------------------------------------------------ */

.vat-check-grid,
.external-grid {

    gap:
        14px !important;
}


.input-with-button {

    display:
        flex !important;

    gap:
        6px !important;
}


.input-with-button input {

    flex:
        1 !important;
}


.input-with-button button {

    width:
        42px !important;

    min-width:
        42px !important;

    height:
        39px !important;

    background:
        #1769bd !important;

    border:
        1px solid #2d80ca !important;

    border-radius:
        5px !important;

    color:
        white !important;

    cursor:
        pointer !important;
}


.input-with-button button:hover {

    background:
        #237ed8 !important;
}


.database-option {

    min-height:
        24px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    color:
        #a9bdcc !important;

    font-size:
        11px !important;
}


/* ------------------------------------------------------------
   KONTAKTPERSON
   ------------------------------------------------------------ */

.contact-create-grid {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        13px 14px !important;
}


/* ------------------------------------------------------------
   NIEDERLASSUNG / TYP
   ------------------------------------------------------------ */

.partner-type-content {

    min-height:
        138px !important;

    display:
        flex !important;

    align-items:
        flex-start !important;

    gap:
        24px !important;

    padding:
        14px !important;
}


.branch-field {

    min-width:
        270px !important;
}


.np-checkbox {

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    min-height:
        39px !important;

    margin-top:
        20px !important;

    padding:
        0 12px !important;

    background:
        #0b2132 !important;

    border:
        1px solid #2d485e !important;

    border-radius:
        5px !important;

    color:
        #d7e4ee !important;

    cursor:
        pointer !important;
}


.np-checkbox:hover {

    border-color:
        #3974a3 !important;

    background:
        #0e2b42 !important;
}


.np-checkbox input {

    width:
        17px !important;

    height:
        17px !important;

    margin:
        0 !important;

    accent-color:
        #2d8cff !important;
}


.np-checkbox span {

    color:
        #d7e4ee !important;
}


/* ------------------------------------------------------------
   ERROR
   ------------------------------------------------------------ */

.np-error {

    margin:
        12px 0 0 !important;

    padding:
        10px 12px !important;

    background:
        rgba(170, 44, 55, .17) !important;

    border:
        1px solid #71323a !important;

    border-radius:
        5px !important;

    color:
        #ffb4ba !important;
}


/* ------------------------------------------------------------
   FOOTER / ACTIONS
   ------------------------------------------------------------ */

.np-footer {

    min-height:
        62px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        10px !important;

    margin-top:
        12px !important;

    padding:
        10px 14px !important;

    background:
        #07131f !important;

    border:
        1px solid #263f54 !important;

    border-radius:
        8px !important;
}


.np-button {

    min-width:
        130px !important;

    height:
        39px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 17px !important;

    background:
        #173a56 !important;

    border:
        1px solid #315875 !important;

    border-radius:
        6px !important;

    color:
        #dbe8f2 !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}


.np-button:hover {

    background:
        #214d6e !important;
}


/* PRIMARY = WOJBAR BLUE */

.np-button.primary {

    min-width:
        170px !important;

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #2785df
        ) !important;

    border-color:
        #328bdf !important;

    color:
        #ffffff !important;

    order:
        1 !important;
}


.np-button.primary:hover {

    background:
        linear-gradient(
            90deg,
            #2078d0,
            #3292eb
        ) !important;
}


/* ABBRECHEN RECHTS UND ROT */

.np-footer > a.np-button {

    order:
        2 !important;

    background:
        #662a31 !important;

    border-color:
        #873943 !important;

    color:
        #ffffff !important;
}


.np-footer > a.np-button:hover {

    background:
        #79323a !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1200px) {

    .download-grid,
    .main-data-grid,
    .bottom-grid {

        grid-template-columns:
            1fr !important;
    }


    .partner-type-content {

        flex-wrap:
            wrap !important;
    }

}



/* ============================================================
   WOJBAR TMS
   KUNDENLISTE V2
   ============================================================ */


/* ------------------------------------------------------------
   GESAMTSEITE
   ------------------------------------------------------------ */

.partner-screen {

    background:
        #07111b !important;

    padding:
        10px !important;

    min-height:
        calc(100vh - 120px) !important;
}


/* ------------------------------------------------------------
   FILTERLEISTE
   ------------------------------------------------------------ */

.partner-toolbar {

    min-height:
        62px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        10px !important;

    padding:
        10px 14px !important;

    background:
        linear-gradient(
            90deg,
            #0c2235,
            #091b2b
        ) !important;

    border:
        1px solid #263f54 !important;

    border-left:
        3px solid #2d8cff !important;

    border-radius:
        8px !important;

    box-sizing:
        border-box !important;
}


/* Suchsymbol */

.partner-search {

    color:
        #64aff5 !important;

    font-size:
        19px !important;

    margin-right:
        2px !important;
}


/* Suche + Select */

.partner-toolbar input,
.partner-toolbar select {

    height:
        39px !important;

    background:
        #071624 !important;

    border:
        1px solid #304c63 !important;

    border-radius:
        5px !important;

    color:
        #e7f0f7 !important;

    font-size:
        12px !important;

    outline:
        none !important;
}


.partner-toolbar input {

    width:
        260px !important;

    padding:
        0 12px !important;
}


.partner-toolbar select {

    min-width:
        210px !important;

    padding:
        0 12px !important;
}


.partner-toolbar input:focus,
.partner-toolbar select:focus {

    border-color:
        #2d8cff !important;

    box-shadow:
        inset 3px 0 0 #2d8cff !important;
}


/* ------------------------------------------------------------
   SUCHEN
   ------------------------------------------------------------ */

.partner-toolbar button[type="submit"] {

    height:
        39px !important;

    padding:
        0 20px !important;

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #2785df
        ) !important;

    border:
        1px solid #328bdf !important;

    border-radius:
        5px !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}


.partner-toolbar button[type="submit"]:hover {

    background:
        #2787e0 !important;
}


/* ------------------------------------------------------------
   FILTER RECHTS
   ------------------------------------------------------------ */

.partner-toolbar .filter-set,
.partner-toolbar .saved-filter {

    margin-left:
        auto !important;
}


/* ------------------------------------------------------------
   MINI BUTTONS + / X
   ------------------------------------------------------------ */

.partner-toolbar button,
.partner-mini-tools button {

    border-radius:
        5px !important;
}


.partner-mini-tools {

    min-height:
        47px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    padding:
        7px 14px !important;

    margin-top:
        8px !important;

    background:
        #091b2a !important;

    border:
        1px solid #243d51 !important;

    border-radius:
        8px !important;
}


.partner-mini-tools button {

    width:
        37px !important;

    height:
        34px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        #123d61 !important;

    border:
        1px solid #2c5d82 !important;

    color:
        #d9e9f5 !important;

    font-size:
        17px !important;

    cursor:
        pointer !important;
}


.partner-mini-tools button:hover {

    background:
        #1769bd !important;

    border-color:
        #338be0 !important;
}


/* ------------------------------------------------------------
   INHALT
   ------------------------------------------------------------ */

.partner-content {

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr) 205px !important;

    gap:
        10px !important;

    margin-top:
        8px !important;
}


/* ------------------------------------------------------------
   TABELLENBEREICH
   ------------------------------------------------------------ */

.partner-table-area {

    background:
        #081521 !important;

    border:
        1px solid #263f54 !important;

    border-radius:
        8px !important;

    overflow:
        hidden !important;

    min-height:
        610px !important;
}


.partner-table-scroll {

    overflow:
        auto !important;
}


/* ------------------------------------------------------------
   TABELLE
   ------------------------------------------------------------ */

.partner-table {

    width:
        100% !important;

    border-collapse:
        collapse !important;

    background:
        transparent !important;

    color:
        #d6e3ed !important;

    font-size:
        12px !important;
}


/* Tabellenkopf */

.partner-table th {

    height:
        42px !important;

    padding:
        0 12px !important;

    background:
        linear-gradient(
            180deg,
            #123d61,
            #0e304d
        ) !important;

    border-right:
        1px solid #31536d !important;

    border-bottom:
        1px solid #35566f !important;

    color:
        #dfeaf3 !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    text-align:
        left !important;

    white-space:
        nowrap !important;
}


/* Tabellenzeilen */

.partner-table td {

    height:
        38px !important;

    padding:
        0 12px !important;

    border-right:
        1px solid #1c3346 !important;

    border-bottom:
        1px solid #1d3447 !important;

    color:
        #bfd0dd !important;

    vertical-align:
        middle !important;
}


.partner-table tbody tr:nth-child(odd) {

    background:
        #091824 !important;
}


.partner-table tbody tr:nth-child(even) {

    background:
        #0b1c29 !important;
}


.partner-table tbody tr:hover {

    background:
        #102b42 !important;
}


.partner-table tbody tr.selected {

    background:
        #174a73 !important;

    box-shadow:
        inset 3px 0 0 #2d8cff !important;
}


/* Leere Liste */

.partner-table .empty-row td {

    height:
        75px !important;

    color:
        #708495 !important;

    text-align:
        center !important;

    font-size:
        12px !important;
}


/* ------------------------------------------------------------
   RECHTE AKTIONSLEISTE
   ------------------------------------------------------------ */

.partner-actions {

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        7px !important;

    padding:
        10px !important;

    background:
        linear-gradient(
            180deg,
            #0b1c2a,
            #081722
        ) !important;

    border:
        1px solid #263f54 !important;

    border-radius:
        8px !important;

    min-height:
        610px !important;
}


/* Alle Aktionen neutral dunkel */

.partner-actions button,
.partner-actions a {

    width:
        100% !important;

    min-height:
        39px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    padding:
        0 13px !important;

    background:
        #12334e !important;

    border:
        1px solid #2c4c65 !important;

    border-radius:
        5px !important;

    color:
        #d9e7f1 !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;

    box-sizing:
        border-box !important;
}


.partner-actions button:hover:not(:disabled),
.partner-actions a:hover {

    background:
        #174f7d !important;

    border-color:
        #3278ac !important;
}


/* Aktualisieren NICHT mehr orange */

.partner-actions .refresh,
.partner-actions button:first-child {

    background:
        #173a56 !important;

    border-color:
        #315875 !important;

    color:
        #dbe8f2 !important;
}


/* Hinzufügen = Hauptaktion */

.partner-actions .add,
.partner-actions a[href="/masterdata/partners/new"] {

    background:
        linear-gradient(
            90deg,
            #1769bd,
            #2785df
        ) !important;

    border-color:
        #328bdf !important;

    color:
        #ffffff !important;
}


.partner-actions .add:hover,
.partner-actions a[href="/masterdata/partners/new"]:hover {

    background:
        #2787e0 !important;
}


/* deaktivierte Buttons */

.partner-actions button:disabled,
.partner-actions .disabled {

    background:
        #101f2c !important;

    border-color:
        #263947 !important;

    color:
        #617484 !important;

    cursor:
        default !important;

    opacity:
        .75 !important;
}


/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.partner-pagination {

    min-height:
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        6px !important;

    padding:
        7px 10px !important;

    background:
        #091824 !important;

    border-top:
        1px solid #263f54 !important;

    color:
        #8fa5b6 !important;

    font-size:
        11px !important;
}


.partner-pagination a,
.partner-pagination .page-disabled {

    min-width:
        31px !important;

    height:
        31px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    background:
        #102b42 !important;

    border:
        1px solid #2c4a61 !important;

    border-radius:
        5px !important;

    color:
        #d6e5ef !important;

    text-decoration:
        none !important;
}


.partner-pagination a:hover {

    background:
        #1769bd !important;

    border-color:
        #338be0 !important;
}


.partner-pagination select {

    height:
        31px !important;

    background:
        #071624 !important;

    border:
        1px solid #304c63 !important;

    border-radius:
        5px !important;

    color:
        #d9e6ef !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1200px) {

    .partner-content {

        grid-template-columns:
            1fr !important;
    }


    .partner-actions {

        min-height:
            auto !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(3, 1fr) !important;
    }

}



/* ==========================================================
   WOJBAR TMS - FRACHTGUT
   ========================================================== */

.cargo-page {
    padding: 18px 20px 28px;
}

.cargo-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.cargo-page-head h1 {
    margin: 0;
    font-size: 27px;
}

.cargo-page-head span {
    display: block;
    margin-top: 5px;
    color: #7790a7;
}

.cargo-primary,
.cargo-save {
    border: 0;
    border-radius: 7px;
    background: #1676d2;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.cargo-primary {
    padding: 12px 18px;
}

.cargo-panel {
    border: 1px solid #29445b;
    border-radius: 8px;
    overflow: hidden;
    background: #071826;
}

.cargo-toolbar {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(
        180deg,
        #0b2437,
        #091d2d
    );
    border-bottom: 1px solid #29445b;
}

.cargo-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 600px;
    border: 1px solid #405e76;
    border-radius: 7px;
    background: #071724;
}

.cargo-search span {
    padding-left: 14px;
    font-size: 23px;
}

.cargo-search input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 11px 14px;
    color: #fff;
    background: transparent;
    font: inherit;
}

.cargo-refresh {
    border: 1px solid #405e76;
    border-radius: 7px;
    padding: 0 18px;
    color: #dce9f5;
    background: #102b40;
    cursor: pointer;
}

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

.cargo-table th {
    padding: 13px 15px;
    text-align: left;
    background: linear-gradient(
        180deg,
        #123e60,
        #103650
    );
    border-bottom: 1px solid #49667d;
}

.cargo-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #243949;
}

.cargo-table tbody tr:hover {
    background: #0c2233;
}

.cargo-empty {
    height: 220px;
    text-align: center;
    color: #71899c;
}

.cargo-status {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 20px;
    background: #263644;
    color: #aebdca;
    font-size: 12px;
    font-weight: 700;
}

.cargo-status.active {
    background: rgba(36, 176, 101, .15);
    color: #56d68e;
}

.cargo-row-actions {
    width: 120px;
    text-align: right;
}

.cargo-row-actions button {
    border: 1px solid #345976;
    border-radius: 6px;
    padding: 7px 11px;
    color: #dce9f5;
    background: #123650;
    cursor: pointer;
}


/* Dialog */

.cargo-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 70px 25px;
    background: rgba(0, 7, 13, .78);
}

.cargo-dialog-backdrop.hidden {
    display: none;
}

.cargo-dialog {
    width: min(900px, 100%);
    border: 1px solid #315876;
    border-radius: 8px;
    overflow: hidden;
    background: #081925;
    box-shadow: 0 25px 80px rgba(0,0,0,.55);
}

.cargo-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 17px;
    background: linear-gradient(
        180deg,
        #12518a,
        #0d4070
    );
}

.cargo-dialog-head strong {
    font-size: 17px;
}

.cargo-dialog-head button {
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 25px;
    cursor: pointer;
}

#cargo-form {
    padding: 20px;
}

.cargo-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cargo-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cargo-field span {
    color: #a9bed0;
    font-size: 13px;
    font-weight: 700;
}

.cargo-field input,
.cargo-field select {
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #395970;
    border-radius: 6px;
    padding: 0 11px;
    color: #fff;
    background: #071522;
    font: inherit;
}

.cargo-wide {
    grid-column: 1 / -1;
}

.cargo-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
}

.cargo-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 17px;
    border-top: 1px solid #263d4e;
}

.cargo-cancel {
    border: 1px solid #5a3840;
    border-radius: 7px;
    padding: 10px 17px;
    color: #f1c7cb;
    background: #2b181d;
    cursor: pointer;
}

.cargo-save {
    padding: 10px 20px;
}

@media (max-width: 800px) {

    .cargo-form-grid {
        grid-template-columns: 1fr;
    }

    .cargo-wide {
        grid-column: auto;
    }

}