:root {
    /*--main-color: #5d6777;*/
    --main-color: #1d70b7;
    --main-color-dark: #3c4657;
    --main-color-dark-hover: #2f3945;
    --main-text: #4c4c4c;
    --work-border: #dadada;

    --main-color-1: #184c76;
    /*--main-color-2: #5d6777;*/
    --main-color-2: #1d70b7;

    --main-color-3: #89b3d8;
    --main-color-4: #f5f5f5;
    --main-color-5: #ededed;

    /*--main-color-spot: #FF1493;*/
    --main-color-spot: #1d70b7;

    --main-color-border: #b2b2b2;
    --main-color-border-light: #dedee6;

    --main-color-blue: #0a71b2;
    --main-color-green: #89C534;
    --main-color-orange: #ffa500;
    --main-color-red: #de0000;

    --main-font-stack: 'Tahoma',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


@import "../../../dir.fonts/Roboto/Roboto-Regular.css";
@import "../../../dir.fonts/Roboto/Roboto-Bold.css";
@import "../../../dir.fonts/Roboto/Roboto-Medium.css";


html, body {min-height: 100vh; overflow: hidden;}
body { margin: 0; font-family: var(--main-font-stack); letter-spacing: 0.2px; color: var(--main-text); max-height: 100vh;}

h1,h2,h3,h4,h5,h6 {margin:0;}
div {box-sizing: border-box;}

input:focus {outline: none;}


/* MAIN */

/* MAIN > FRAME */

.main-frame {display: flex; flex-direction: column; width: 100%; height: 100%;}

.main-frame-titlebar {background-color: var(--main-color-2); color: #fff; height: 50px; display:flex; justify-content: space-between; padding: 0 15px;}
.main-frame-titlebar-left {display: flex; align-items: center;}
.main-frame-titlebar-right {display: flex; align-items: center;}

.main-frame-infobar {padding: 5px 15px;background: #ffffe6;border: 2px solid #efef00; border-left: 0; border-right: 0;}

.main-frame-body { flex-grow: 1; display: flex; height: calc(100vh - 50px); overflow: hidden;}
.main-frame-body-nav {width: 300px; min-width: 300px; border-right: 1px solid var(--main-color-border); background-color: #fff;display: flex;flex-direction: column; }
.main-frame-body-content {flex-grow: 1;/*display: flex; flex-direction: column;*/ overflow: auto; }


/* MAIN > VERSION */

.main-version {width: 100%;height: 60px; min-height: 60px; border-top: 1px solid var(--main-color-border-light); display:flex; flex-direction: column; padding: 0 15px; justify-content: center;}
.main-version-small {display: none; width: 100%;height: 60px; min-height: 60px; border-top: 1px solid var(--main-color-border-light); flex-direction: column; padding: 0 15px; justify-content: center;}



/* MAIN > USER */

.main-user {display: flex; user-select: none; margin-right: 15px;}
.main-user-avatar {width: 30px; height: 30px; min-width: 30px; min-height: 30px; display: flex; justify-content: center; align-items: center; background-color: #fff; color: var(--main-color-1); border-radius: 100%; margin-right: 10px; font-size: 14px; line-height: 1;}
.main-user-name {display: flex; align-items: center; line-height: 1;}

.main-titlebar-topnav {height: 100%;}
.main-titlebar-topnav ul {margin: 0; padding: 0; list-style: none; height: 100%;display:flex;}
.main-titlebar-topnav ul a {text-decoration: none; color: inherit;}
.main-titlebar-topnav ul a:hover li {background-color: var(--main-color-dark);}
.main-titlebar-topnav ul a li {height: 100%; padding: 0 15px; display: flex; align-items: center; line-height: 1; user-select: none;background-size: 20px; background-position: center; background-repeat: no-repeat;}
.main-titlebar-topnav ul a li.icon-cogwheel {background-image: url('../../dir.graphics/icons/office_einstellungen_w.svg'); }
.main-titlebar-topnav ul a li.icon-cogwheel-back {background-image: url('../../dir.graphics/icons/office_einstellungen_back_w.svg'); }
.main-titlebar-topnav ul a li.icon-home {background-image: url('../../dir.graphics/icons/office_home_w.svg'); }
.main-titlebar-logo {}


/* MAIN > NAV */

/* "altes" Design */

/*.main-nav {width: 100%; display:flex; flex-direction: column;flex-grow: 1;}
.main-nav-area-bar {width:100%; height: 45px; display: flex; align-items: center; padding: 0 15px 0 55px; background-color: var(--main-color-dark); background-size: 20px; background-position: 20px center; background-repeat: no-repeat; color: #fff; user-select: none; cursor: pointer;}
.main-nav-area-bar.active {background-color: #1e252d;}
.main-nav-area-bar.active:hover {background-color: #1e252d;}
.main-nav-area-bar:hover {background-color: var(--main-color-dark-hover);}
.main-nav-area-details {width: 100%; display: none;}
.main-nav-area-list {width: 100%; display:flex; flex-direction: column; background-color: #fdfdfd;}
.main-nav-area-list a {text-decoration: none; color: inherit;}
.main-nav-area-list-menu {width: 100%; display: flex; align-items: center; padding: 0 15px 0 55px; height: 35px; cursor: pointer; user-select: none; background: #f9f9f9 url('../../dir.graphics/arrows/arrow_right_g.svg') 27px center/7px no-repeat;}
.main-nav-area-list-menu.active {background-image: url('../../dir.graphics/arrows/arrow_right_b.svg'); background-color: #ececec;}
.main-nav-area-list-menu.active:hover {background-color: #ececec;}
.main-nav-area-list-menu:hover {background-color: #f1f1f1;}*/

/* "neues" Design */
.main-nav {width: 100%; display:flex; flex-direction: column;flex-grow: 1;}

.main-nav-item {border-bottom: 1px solid var(--main-color-border);}
.main-nav-item a {text-decoration: none; color: inherit;}

/*.main-nav-area-bar {width:100%; height: 50px; display: flex; align-items: center; padding: 0 15px; color: var(--main-text); user-select: none; cursor: pointer; text-transform: uppercase; font-size: 15px; background: url('../../dir.graphics/arrows/arrow_down_g.svg') right+15px center/15px no-repeat; }*/
.main-nav-area-bar {width:100%; height: 50px; display: flex; align-items: center; padding: 0 15px; color: var(--main-text); user-select: none; cursor: pointer; text-transform: uppercase; font-size: 15px; }
.main-nav-area-bar.main-nav-arrow {background: url('../../dir.graphics/arrows/arrow_down_g.svg') right+15px center/15px no-repeat; }
.main-nav-area-bar.main-nav-arrow.open {background-image: url('../../dir.graphics/arrows/arrow_up_g.svg'); }
/*.main-nav-area-bar.open {background-image: url('../../dir.graphics/arrows/arrow_up_g.svg'); }*/
.main-nav-area-bar.active {background-color: var(--main-color-4);}
.main-nav-area-bar.active:hover {}
.main-nav-area-bar:hover {}

.main-nav-area-details {width: 100%; display: none;}

.main-nav-area-list {width: 100%; display:flex; flex-direction: column; border-top: 1px solid var(--main-color-border); font-size: 12px; }
.main-nav-area-list a {text-decoration: none; color: inherit;}
.main-nav-area-list-menu {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 0; cursor: pointer; user-select: none; border-bottom: 1px solid #eeeeee; }
.main-nav-area-list a:last-child .main-nav-area-list-menu {border-bottom: 0; }
.main-nav-area-list-menu-icon {width: 50px; height: 50px; margin-bottom: 7px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.main-nav-area-list-menu.active {background-color: #fbfbfb;}
.main-nav-area-list-menu.active:hover {}
.main-nav-area-list-menu:hover {}

.main-nav-area-list-menu-small {width: 50px; height: 20px; margin-bottom: 7px; background-position: center; background-size: contain; background-repeat: no-repeat;}



.main-nav-small {display: none; width: 100%; flex-direction: column; flex-grow: 1;}

.main-nav-small-item {height: 60px; display: flex; justify-content: center; align-items: center; position: relative; border-bottom: 1px solid var(--main-color-border); user-select: none; background-position: center; background-repeat: no-repeat; background-size: 55px; font-size: 12px; text-decoration: none;}
.main-nav-small-item-icon {width: 35px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain;}

.main-nav-small-area-details {display: none; width: 200px; z-index: 9999; position: absolute; top: -1px; left: 59px; border: 1px solid var(--main-color-border); background-color:#fff;}
.main-nav-small-area-details:before {width: 1px;height: 59px;background: #fff;content: ' ';position: absolute;top: 0;left: -1px;}
.main-nav-small-area-details a {text-decoration: none; color: inherit;}

.main-nav-small-area-details-title {width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-bottom: 1px solid #eee; text-transform: uppercase;}
.main-nav-small-area-details-title.main-nav-small-area-direct {height: 59px;}

.main-nav-indicator { width: 20px; height: 20px; background-color: var(--main-color); color: #fff; border-radius: 100%; text-align: center; padding-top: 3px; font-size: 13px; line-height: 1; user-select: none; margin-left: 8px; }


/* MAIN > TABLE */

.main-table {
    /*user-select: none;*/
    --border: 1px solid #b2b2b2;
    width: 100%;
}

.main-table table {border-collapse: collapse; border: var(--border); border-left: 0; border-right: 0; width: 100%;}
.main-table table thead a {color: inherit; text-decoration: none;}
.main-table table thead tr {background-color:#ededed; height: 40px; border-bottom: var(--border);}
.main-table table thead tr td {border-right: var(--border); /*padding: 0 20px; */font-size: 12px; height: 40px;}
.main-table table thead tr td:last-child {border-right: 0;}
.main-table table tbody tr {height: 38px;}
.main-table table tbody tr:nth-child(even) {background-color:#f6f6f6;}
.main-table table tbody tr td {padding: 11px 20px 10px 20px; font-size: 12px; vertical-align: top; box-sizing: border-box; height: 40px; position: relative;}

.main-table-checkbox-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}

.main-table table tbody tr.striped {border: 1px solid #e4e4e4; background-color: #fff!important; border-left: 0; border-right: 0;  background-size: 55px;}

.main-table table tbody tr.striped.striped-base {background-image: url('../../dir.graphics/patterns/pattern_stripes_g.svg'); }
.main-table table tbody tr.striped.striped-warn-1 {background-image: url('../../dir.graphics/patterns/pattern_stripes_warn_1.svg'); }
.main-table table tbody tr.striped.striped-warn-2 {background-image: url('../../dir.graphics/patterns/pattern_stripes_warn_2.svg'); }
.main-table table tbody tr.striped.striped-warn-3 {background-image: url('../../dir.graphics/patterns/pattern_stripes_warn_3.svg'); }
.main-table table tbody tr.striped.striped-nextstep-mark {background-image: url('../../dir.graphics/patterns/pattern_stripes_job_done.svg'); }

.main-table .pill { background-color: var(--main-color-spot);color: #fff;border-radius: 4px;padding: 2px 8px;display: inline-block;margin-left: 10px;box-sizing: border-box;font-size: 12px;}

.main-table-head {height: 35px; display: flex; align-items: center; line-height: 1; padding: 0 20px; font-size: 12px; border-top: var(--border); }
.main-table-foot {height: 35px; display: flex; align-items: center; line-height: 1; padding: 0 20px; font-size: 12px; border-bottom: var(--border); justify-content: space-between; }
.main-table-foot-content {display:flex; height: 100%; align-items: center;}

.main-table-controls {height:100%;display:flex;margin-left: 20px;}
.main-table-controls-item {height:100%;width:34px; border-left: 1px solid #b2b2b2;display:flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer;}
.main-table-controls-item:last-child {border-right: 1px solid #b2b2b2;}
.table-control-first { background: url('../../dir.graphics/controls/control_first.svg') center/40% no-repeat;}
.table-control-first:hover { background-image: url('../../dir.graphics/controls/control_first_b.svg');}
.table-control-previous { background: url('../../dir.graphics/controls/control_previous.svg') center/20% no-repeat;}
.table-control-previous:hover { background-image: url('../../dir.graphics/controls/control_previous_b.svg');}
.table-control-next { background: url('../../dir.graphics/controls/control_next.svg') center/20% no-repeat;}
.table-control-next:hover { background-image: url('../../dir.graphics/controls/control_next_b.svg');}
.table-control-last { background: url('../../dir.graphics/controls/control_last.svg') center/40% no-repeat;}
.table-control-last:hover { background-image: url('../../dir.graphics/controls/control_last_b.svg');}

.table-editable {display: flex;}
.table-editable-input:not(:empty) {margin-right: 20px;}
.table-editable-input[contenteditable="true"] {border: 1px dashed #ccc; min-width: 100px; margin-right: 20px;}
.table-editable-controls {display: flex;}
.table-editable-button { width: 17px;height: 17px; background-size: 14px; background-position: center; background-repeat: no-repeat; opacity: 0.2;}
.table-editable-button:hover { opacity: 1!important;}
.table-editable-button:not(:last-child) {margin-right: 10px;}
.table-editable-button.button-edit {background-image: url('../../dir.graphics/legacy_icons/edit.svg');}
.table-editable-button.button-save {background-image: url('../../dir.graphics/legacy_icons/icon_checkmark_blue.svg'); opacity: 0.5; display: none;}
.table-editable-button.button-cancel {background-image: url('../../dir.graphics/legacy_icons/icon_cross_blue.svg'); opacity: 0.5; display: none;}



.main-table-box {    height: 100%;display: flex;padding: 0 20px; align-items: center;}
.main-table-flex {display: flex; align-items: center;}

.main-table .align-left {text-align: left;}
.main-table .align-right {text-align: right;}

.main-table-row-click {cursor: pointer; user-select: text; }
.main-table-row-click:hover {outline: 1px solid rgba(0,0,0,0.3);}

.main-table-symbols {display:flex;}
.main-table-symbols-title {margin-right: 20px;}
.main-table-symbols-list {display:flex;}
.main-table-symbols-list-item {display: flex; align-items: center; margin-right: 20px; white-space: nowrap;}
.main-table-symbols-list-item-icon {margin-right: 7px;}

.main-table-title {font-size: 14px;/* font-weight: bold;*/ text-transform: uppercase;}

.main-table-sort {cursor: pointer; }
.main-table-sort-icon { margin-left: 10px; opacity: 0.3;}
.main-table-sort:hover .main-table-sort-icon {opacity: 1;}

.main-table-cell-border {border-right: 1px solid #ececec;}
.main-table-cell-border:last-child {border-right:0;}
.main-table-lined td {border-right: 1px solid #ececec;}
.main-table-lined td:last-child {border-right:0;}

.main-table-edit-input {display: inline-block; margin-top: -2px; border: 1px solid #ccc; height: 20px;}
.main-table-edit-textarea {resize: vertical; max-height: 300px; height: 20px; min-height: 20px; margin-top: -2px; border: 1px solid #ccc;}

.main-table-remove {cursor: pointer; background: url('../../dir.graphics/icons/icon_minus_circle.svg') center/20px no-repeat;}

.main-table-add-row {width: 100%; padding: 0 20px 0 60px; height: 35px; border-bottom: var(--border); background: url('../../dir.graphics/icons/icon_plus_circle.svg') 20px center/20px no-repeat; display: flex; align-items: center; user-select: none; cursor: pointer;}
.main-table-add-row:hover {background-color: #fdfdfd;}

.main-table-form {margin:0;padding:0;}

.main-table-status-box {display: flex;justify-content: center;align-items: center;height: 100%;}
.main-table-status-light {width: 10px; height: 10px; background-color: darkgrey; border-radius: 100%;}
.status-red {background-color: red;}
.status-yellow {background-color: #ffa928;}
.status-grey {background-color: grey;}
.status-grey-dotted {background-color: #fff; border: 1px dotted grey;}
.status-green {background-color: green;}
.status-blue {background-color: dodgerblue;}


.main-table-desc-content-box {}
.main-table-desc-button-box {display: flex;align-items: center; margin-left: 10px;}

.main-table-desc-button {width: 12px; height: 12px; user-select: none; cursor: pointer; margin-right: 5px; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 0.3;}
.main-table-desc-button:hover {opacity: 1;}
.main-table-desc-button:last-child {margin-right: 0;}
.main-table-desc-button.desc-button-edit {background-image: url('../../dir.graphics/legacy_icons/edit.svg');}
.main-table-desc-button.desc-button-save {background-image: url('../../dir.graphics/legacy_icons/icon_checkmark_blue.svg');}
.main-table-desc-button.desc-button-cancel {background-image: url('../../dir.graphics/legacy_icons/icon_cross_blue.svg');}
.main-table-desc-input-box { width: 300px;position: relative;height: 18px;margin-right: -6px;}
.main-table-desc-input { font-size: 14px;width: 100%;position: relative;top: -5px;left: -6px;border: 1px dashed #ccc;padding: 4px 5px;font-family: var(--main-font-stack);    letter-spacing: 0.2px;}


/* FILTER */

.main-filter-container {width: 100%; background: #f6f6f6; padding: 20px;}
.main-filter-line {width: 100%; display: flex; margin: 10px 0; font-size: 12px;}
.main-filter-form {margin:0;}

.main-filter-flex {display: flex;}
.main-filter-flex-columns {display: flex; flex-direction: column;}
.main-filter-group {}
.main-filter-flex .main-filter-item {margin: 0 30px 10px 0; min-height: 50px;}
.main-filter-flex .main-filter-item:last-child {margin-bottom: 0;}
.main-filter-flex-columns .main-filter-item {margin: 0 10px 20px 0; min-height: 50px;}

.main-filter-title {font-size: 12px; height: 15px; color: #6c6c6c;margin-bottom: 5px;}
.main-filter-flex-columns .main-filter-title:empty {display: none;}

.main-filter-input { min-height: 30px;  display: flex; position: relative;}
.main-filter-checkbox-box { width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;}
.main-filter-input input {font-family: var(--main-font-stack);}
.main-filter-input input[type="text"] {height: 30px; width: 250px; padding: 5px 10px; border: 1px solid #ccc;}
.main-filter-input input[type="checkbox"] {height: 15px; width: 15px; box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);}
.main-filter-input textarea {min-height: 30px; height: 60px; max-height: 200px; width: 250px; padding: 5px 10px; border: 1px solid #ccc; resize: vertical;}
.main-filter-input select {height: 30px; width: 250px; padding: 5px 10px; border: 1px solid #ccc;font-family: var(--main-font-stack);}
.main-filter-input-half input[type="text"], .main-filter-input-half select {width: 125px;}

.main-filter-flex-columns .main-filter-input input[type="text"] {width: 100%;}
.main-filter-flex-columns .main-filter-input textarea {width: 100%; height: 150px; resize: none;}

.main-filter-button {width: 125px; height: 30px; font-size: 14px; display: flex; justify-content: center; align-items: center; line-height: 1; /*margin-top: 10px;*/ background-color:var(--main-color-3); color: #fff; cursor: pointer; user-select: none; border:0; outline: 0;}
.main-filter-button.margin-0 {margin: 0;}
.main-filter-button-basic {width: 125px; height: 30px; font-size: 14px; display: flex; justify-content: center; align-items: center; line-height: 1;  background-color:var(--main-color-3); color: #fff; cursor: pointer; user-select: none;}
/*.main-filter-button:only-child {margin-top: 20px;}*/
.main-filter-button:hover {background-color:var(--main-color-spot);}
.main-filter-button-basic:hover {background-color:var(--main-color-spot);}


.main-filter-icon {width: 15px; height: 15px;  position: absolute; top: 8px; right: 8px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.main-filter-icon.icon-load {border: 3px solid lightgray; border-top: 3px solid var(--main-color-2); border-radius: 100%; animation-name: spin; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: linear;}
.main-filter-icon.icon-error {background-image: url('../../dir.graphics/icons/icon_cross_red.svg');}
.main-filter-icon.icon-success { background-image: url('../../dir.graphics/icons/icon_checkmark_green.svg');}


.main-trash {width: 16px; height: 16px; background: url('../../dir.graphics/legacy_icons/icon_trash.svg') center/contain no-repeat; cursor: pointer; opacity: 0.5;}
.main-trash:hover {opacity: 1;}

@keyframes spin {

    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}





/* CONTENT */

.content-title {height: 51px; min-height: 51px; padding: 0 15px; border-bottom: 1px solid var(--main-color-3); display: flex; align-items: center; line-height: 1;}
.content-base { flex-grow: 1; padding: 10px 15px;}




/* HOME */

.home-wrapper {margin: 0 auto; width: 1000px;}
.home-header { border-bottom: 1px solid var(--main-color-3);padding: 20px 0;}
.home-logo { height: 100px;display: flex;align-items: center;}
.home-title {font-weight: bold; font-size: 2rem;}

.home-grid {padding-top: 30px;}
.home-grid-row {display: flex; width: 100%;}
.home-grid-row-item {/*border: 1px solid #f5f5f5;*/ width: calc(100% / 3); float:left; padding: 10px;}


.home-tile {}
.home-tile-head {border-bottom: 1px solid var(--main-color-1); padding: 10px 0 10px 55px; font-size: 1.25rem; background-position: 15px center; background-size: 25px; background-repeat: no-repeat;}
.home-tile-body {padding: 1rem 0;}
.home-tile-list {margin:0;}
.home-tile-list li {margin-bottom: 5px;}
.home-tile-list li:last-child {margin-bottom: 0;}
.home-tile-list li a {text-decoration: none; color: inherit;}
.home-tile-list li a:hover {text-decoration: underline;}

.home-tile-list-item {display: flex; align-items: center;}
.home-tile-list-button {display: block; width: 12px; height: 12px; background-color: #fcfcfc; margin-left: 10px;}
.home-tile-list-button:hover {background-color: #d7d7d7;}



/* UI DIALOG */
.ui-dialog {padding: 0; font-family: var(--main-font-stack); font-size: 14px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); overflow: hidden;}
/*.ui-dialog {padding: 0; font-family: var(--main-font-stack); font-size: 14px; box-shadow: 0 0 35px 10px rgba(0,0,0,0.4); overflow: hidden;}*/
.ui-dialog .ui-corner-all {border-radius: 0;}
.ui-dialog.ui-corner-all {border-radius: 0;}
.ui-dialog .ui-dialog-titlebar {color: #fff; height: 30px; background-color: var(--main-color-2); border:0; font-size: 12px; /*text-transform: uppercase;*/ font-weight: normal;    display: flex;align-items: center; padding: .4em 2em .4rem 1em;}
.ui-dialog .ui-dialog-titlebar-close { background-color: var(--main-color-1);height: 100%;width: 30px;top: 0;right: 0;margin: 0;border: 0; background: var(--main-color-1) url('../../dir.graphics/icons/icon_cross.svg') center/40% no-repeat;}
.ui-dialog .ui-dialog-titlebar-close:hover {background-color: var(--main-color-spot);}
.ui-dialog .ui-dialog-titlebar-close:focus {outline: 0;}
.ui-dialog .ui-dialog-content { padding: 0;}
.ui-widget.ui-widget-content {border-color: #b2b2b2;}
.ui-dialog, .ui-dialog-content {box-sizing: content-box;}
.ui-dialog .ui-dialog-title {user-select: none;}




/* warning */

.main-warning-frame {width: 100%; height: 100%; padding: 10px;}
.main-warning-box {width: 100%; height: 100%; box-sizing: border-box; padding: 15px; border: 2px dashed #ccc; display: flex; justify-content: center; align-items: center;}
.main-warning-content {width:90%; height: 90%;     display: flex;flex-direction: column;justify-content: center;}
.main-warning-icon {width: 100%; height: 50px; background-position: center; background-size: contain; background-repeat: no-repeat; margin-bottom: 20px;}
.main-warning-icon.icon-warning {background-image: url('../dir.graphics/folix/icon_lock.svg');}
.main-warning-title {font-size: 20px; text-align: center; margin-bottom: 10px; font-weight: bold;}
.main-warning-text {font-size: 16px; text-align: center;}



/* PADDING */
.main-padding-box {padding: 15px 20px;}


/* ARTIKELLISTE + BESTAND (Links: "2. Navigation" - Rechts: Detailansicht) */
.main-tower-frame {display: flex; height: 100%;}
.main-tower-nav {width: 400px; min-width: 400px; border-right: 1px solid var(--main-color-border); overflow: auto; background-color: #f6f6f6;}
.main-tower-nav-padding {padding: 0 5px;}
.main-tower-content {flex-grow: 1; overflow: auto;}

.main-tower-nav-list { padding: 10px; }
.main-tower-nav-item { width: 100%; height: 50px; background-color: #fff; display: flex; align-items: center; padding: 0 15px; margin-bottom: 10px; font-size: 14px; user-select: none; cursor: pointer; }
.main-tower-nav-item.active { box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);}
.main-tower-nav-item:hover:not(.active) { background-color: #f1e4f8;}
.main-tower-nav-item:last-child { margin-bottom: 0; }

/*.window-box-controls {
    --padding: 10px 15px;
}
.window-box-controls {background-color: var(--main-color-5); border-top: 1px solid var(--main-color-border); padding: var(--padding);}
.window-box-buttons {display: flex;}
.window-box-button {background-color: var(--main-color-2); color: #fff; padding: var(--padding); font-size: 13px; cursor: pointer; user-select: none; margin-right: 10px;}
.window-box-button:last-child {margin-right: 0;}
.window-box-button:hover {background-color: var(--main-color-spot);}*/

/* WINDOWS */
.window-box {
    --padding: 10px 15px;
}
.window-box {width: 100%; height: 100%; display: flex; flex-direction: column;}
.window-box-title {font-size: 14px; margin-bottom: 10px;}
.window-box-content {flex-grow: 1; overflow: auto;}
.window-box-inputs {background-color: #fff; border-top: 1px solid var(--main-color-border); padding: var(--padding);}
.window-box-controls {
    --padding: 10px 15px;
}
.window-box-controls {background-color: var(--main-color-5); border-top: 1px solid var(--main-color-border); padding: var(--padding);}
.window-box-buttons {display: flex;}
.window-box-button {background-color: var(--main-color-2); color: #fff; padding: var(--padding); font-size: 13px; cursor: pointer; user-select: none; margin-right: 10px;}
.window-box-button:last-child {margin-right: 0;}
.window-box-button:hover {background-color: var(--main-color-spot);}

.window-inputlist {}
.window-inputlist-item {display:flex; align-items: center; height: 22px; margin-bottom: 5px;}
.window-inputlist-item:last-child {margin-bottom: 0;}
.window-inputlist-label {width: 75px; margin-right: 2px; font-size: 12px;}
.window-inputlist-input {width: 150px; height: 100%; box-sizing: border-box;}
.window-inputlist-input input {width: 100%; height: 100%; border: 1px solid #dbdcdb; padding: 0 5px; font-size: 14px;}
.window-inputlist-input select {width: 100%; height: 100%;padding: 0 5px; font-size: 14px; border: 1px solid #dbdcdb;}
.window-inputlist-input.number {width: 75px;}
.window-inputlist-unit {width: 50px; height: 100%; background-color: #dbdcdb; font-size: 12px; display: flex; align-items: center; padding: 0 7px;}

.window-inputlist-split {display: flex;}
.window-inputlist-split-item {margin-right: 20px;}

.window-hint {padding: 5px 10px; border: 1px dashed var(--main-color-border); color: #323232; font-size: 12px;}



/* generic window */
.generic-window {display: flex; flex-direction: column; height: 100%; font-size: 13px;}
.generic-window-top {flex-grow: 1; overflow: auto; padding: 10px 15px;}
.generic-window-bottom {border-top: 1px solid var(--main-color-border); background-color: var(--main-color-5); padding: 10px 15px;}
.generic-window-button { display: flex;justify-content: center;align-items: center;width: 180px;height: 35px;color: #fff;background-color: var(--main-color-blue);user-select: none;cursor: pointer;opacity: 0.8;}
.generic-window-button:hover { opacity: 1; }



/* jobtypes */
#settingsJobtype {margin:0;}
.jobtype-select { width: 100%;border: 1px solid #ccc;padding: 3px 5px;margin: -3px 0;}
.jobtype-settings-select { width: 400px;border: 1px solid #ccc;padding: 3px 5px;margin: -3px 0;}
.jobtype-list-delete {width: 18px; height: 18px; min-width: 18px; min-height: 18px;cursor: pointer; background: url('../../dir.graphics/legacy_icons/icon_trash.svg') center/100% no-repeat;opacity: 0.3;}
.jobtype-list-delete:hover {opacity: 1;}
.jobtype-groups-list-delete {width: 18px; height: 18px; min-width: 18px; min-height: 18px;cursor: pointer; background: url('../../dir.graphics/legacy_icons/icon_trash.svg') center/100% no-repeat;opacity: 0.3;}
.jobtype-groups-list-delete:hover {opacity: 1;}


/* progressbar */
.progressbar {width: 200px; height: 8px; border: 1px solid #dcdcdc; background-color: #fff;  overflow: hidden;}
.progressbar > div {background: #1d70b7; height: 100%;}


/* laufzettel */
.lz-form {display: flex; flex-direction: column; gap: 10px;}
.lz-form .lz-h {display: flex; flex-direction: row; gap: 30px;}
.lz-form .lz-v {display: flex; flex-direction: column;}
.lz-form .lz-short .lz-h {align-items: center; gap: 10px;}
.lz-form .lz-checkbox {display: flex; gap: 10px;}
.lz-hide-box {display: contents;}
.lz-form input[type="text"] {border: 1px solid #ccc;padding: 1px 7px;width: 100px}


/* DEBUG */

.debug-table {border-collapse: collapse;}
.debug-table td {border: 1px solid #000; padding: 5px 7px;}


.dev-tag {margin-left: 15px;font-size: 20px;display: inline-block;border: 2px solid #fff;padding: 2px 6px;position: absolute;}
.dev-tag:hover {animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite;}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}




.main-frame-body-nav {width: 200px; min-width: 200px;}
.main-table-desc-input-box {width: 150px;}

@media (max-width: 1900px) {

    .main-frame-body-nav {width: 200px; min-width: 200px;}
    .main-table-desc-input-box {width: 150px;}
}



@media (max-width: 1500px) {

    .main-frame-body-nav {width: 60px; min-width: 60px;}

    .main-nav {display: none;}
    .main-nav-small { display:flex; }
    .main-version { display: none; }
    .main-version-small { display: flex; }
}