/* root > */
@import url(https://fonts.googleapis.com/css?family=Roboto);
@charset "UTF-8";

:root {

  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  --main-padding: 0;

  /* COLORS */
  --selection-text: rgba(78, 123, 7, 0.8);
  --selection-background: #d8d8d8;

  --invalid: rgb(200,0,0);
  --invalid-light: rgba(200,0,0,0.025);

  --success: rgba(78,123,7,0.8);
  --success_rgb: rgb(125, 155, 85);
  --success-light: rgba(78,123,7,0.025);

  --changed: #305899;
  --changed-light: #e1e9f7;

  --border-light: rgb(200, 200, 200);
  --border-medium: rgb(150, 150, 150);
  --border-dark: rgb(100,100,100);

  --box-shadow: rgba(0, 0, 0, 0.3);

  --btn-tab: linear-gradient(rgb(247,247,247), rgb(247,247,247));
  --btn-tab-border: rgb(150,150,150);
  --btn-tab-text: rgb(80,80,80);
  --btn-default: linear-gradient(rgba(78, 123, 7, 0.7), rgba(78, 123, 7, 1));
  --btn-default-border: rgb(100,100,100);
  --btn-default-text: #fff;
  --btn-active: linear-gradient(rgba(78, 123, 7, 0.7), rgba(78, 123, 7, 1));
  --btn-active-border: rgb(100,100,100);
  --btn-active-text: #fff;
  --btn-hover: linear-gradient(rgba(78, 123, 7, 0.85), rgba(78, 123, 7, 1));
  --btn-hover-border: rgb(100,100,100);
  --btn-hover-text: #fff;
  --btn-delete: linear-gradient(rgba(200, 0, 0, 0.6), rgba(200, 0, 0, 0.9));
  --btn-delete-active: linear-gradient(rgba(200, 0, 0, 0.8), rgb(200, 0, 0));

  --btn-mainfilter: linear-gradient(rgb(140, 140, 140), rgb(120, 120, 120));
  --btn-mainfilter-border: rgb(100,100,100);
  --btn-mainfilter-text: #fff;

  --tooltip-text: rgb(100,100,100);
  --tooltip-background: #fff;
  --tooltip-border: rgb(100, 100, 100);

  --th-background:rgb(247,247,247);

  --tooltip-background:rgb(247,247,247);
  --tooltip-border: #212529;
  --tooltip-text: #212529;

  --cloud-up: rgb(127,127,127);

  --text: rgb(50, 50, 50) ;
  --text-input: rgb(80,80,80);
  --text-placeholder: rgb(140, 140, 140);
  --text-h1-background: rgb(140, 140, 140);
  --text-h1-background-gradient: rgb(120, 120, 120);
  --text-h2-background: rgb(140, 140, 140);
  --text-h2-background-gradient: rgb(110, 110, 110);

  --text-shadow: rgb(50, 50, 50);
  --text-warning: rgb(200,0,0);

  --icon-warning: rgb(200,0,0);
  --icon-green: rgba(78, 123, 7, 0.8);

}

::selection {
  color: var(--selection-text) !important;
  background: var(--selection-background) !important;
}
::-moz-selection {
  color: var(--selection-text) !important;
  background: var(--selection-background) !important;
}

body {
  overflow-y: scroll !important;
  background-color: #fff;
}
a, a:hover {
  text-decoration: none;
  color:unset;
}

.impressum-link {
  /* position:sticky; */
  /* bottom:0; */
  /* float:right; */
  /* border-left: 1px solid var(--border-medium); */
  /* border-top: 1px solid var(--border-medium); */
  /* background-color:#F7F7F7; */
  /* padding:4px 6px; */
  text-decoration:underline;
}
.impressum-link-login {
  text-align:center;
  margin-top:20px;
  text-decoration:underline;
}

.table {
  margin: 0;
  border: 1px solid var(--border-light);
  color: var(--text);
}
.table thead th {
  border:unset;
  background-color: var(--th-background);
  font-weight: 700;
  min-height: 40px;
}
.table thead tr {
  border: 1px solid var(--border-dark);
  cursor: pointer;
}
.table td {
  border: 0;
}

.btn-red {
  background-image: var(--btn-delete) !important;
}

.linara-logo {
  height: 45px;
  margin-left: 12px;
}
.btn {
  display:flex;
  align-items: center;
  text-align: center;
  font-size: 100%;
  border:none;
  width: auto;
  padding: 4px 8px;
  border-radius: 0;
  transition: unset;
  transition: color unset;
}
.btn.focus, .btn:focus, .btn:active, .btn-active {
  outline: none;
}

.mailverteiler-dropdown {
  position: relative;
  cursor: default;
  height:36px;
  padding:1px;
  background-image: var(--btn-default);
  color: #fff;
  border: 1px solid var(--border-dark);
  text-align:center;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
  font-size: 18px;
}
.mailverteiler-dropdown:hover {
  background-image: var(--btn-hover);
}
.mailverteiler-dropdown-menu {
  position: absolute;
  top: 95%;
  right: 4px;
  display:block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s, opacity 0.1s linear;
  width: auto;
  min-width: 100%;
  background-color: #fff;
  border: 1px solid var(--border-dark);
  font-size: 16px;
  padding: 8px;
  color: var(--text);
  text-shadow: 0 0 0;
  width: max-content;
  z-index:9999;
  text-align:left;
  overflow-y: scroll;
  max-height:500px;
}
.mailverteiler-dropdown:hover .mailverteiler-dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.mailverteiler-dropdown .mailverteiler-dropdown-el {
  padding: 2px 4px;
  border: 1px solid transparent;
  color:var(--text) !important;
  cursor: pointer;
}
.mailverteiler-dropdown .mailverteiler-dropdown-el:hover {
  border: 1px solid var(--border-dark);
  background-color: var(--th-background);
}

.mainfilter-dropdown {
  position: relative;
  cursor: default;
  height:36px;
  padding:1px;
  background-image: var(--btn-default);
  color: #fff;
  border: 1px solid var(--border-dark);
  text-align:center;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
}
.mainfilter-dropdown:hover {
  background-image: var(--btn-hover);
}
.mainfilter-dropdown-inactive.mainfilter-dropdown {
  background-image: var(--btn-tab);
  box-shadow: unset;
  border: 1px dashed var(--border-light);
}
.mainfilter-dropdown-inactive.mainfilter-dropdown .mainfilter-title {
  color:var(--text-placeholder);
}
.mainfilter-dropdown-inactive.mainfilter-dropdown .mainfilter-value {
  color:var(--text-placeholder);
  text-shadow: unset;
}
.mainfilter-dropdown-mandatory.mainfilter-dropdown {
  background-image: var(--btn-tab);
  box-shadow: unset;
    border: 1px dashed var(--icon-warning);
}
.mainfilter-dropdown-mandatory.mainfilter-dropdown .mainfilter-title {
  color:var(--text-placeholder);
}
.mainfilter-dropdown-mandatory.mainfilter-dropdown .mainfilter-value {
  color:var(--text-placeholder);
  text-shadow: unset;
}
.mainfilter-title {
  line-height:1.1;
  padding: 0px 3px;
  font-size:11px;
  color:rgb(215,215,215);
}
.mainfilter-value {
  color: var(--text);
  padding: 2px 3px 0px 3px;
  color: #fff;
  text-shadow: 1px 1px 1px var(--text-shadow);
  font-size:15px;
}
.mainfilter-dropdown-menu {
  position: absolute;
  top: 95%;
  left: 4px;
  display:block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s, opacity 0.1s linear;
  width: auto;
  min-width: 100%;
  background-color: #fff;
  border: 1px solid var(--border-dark);
  font-size: 14px;
  padding: 2px;
  color: var(--text);
  text-shadow: 0 0 0;
  width: max-content;
  cursor: pointer;
  z-index:9999;
  text-align:left;
  overflow-y: scroll;
  max-height:500px;
}
.mainfilter-dropdown:hover .mainfilter-dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.mainfilter-dropdown .mainfilter-dropdown-el {
  padding: 4px 8px;
  border: 1px solid transparent;
}
.mainfilter-dropdown .mainfilter-dropdown-el:hover {
  border: 1px solid var(--border-dark);
  background-color: var(--th-background);
}

.custom-chart {
  width:100%;
  height:100%;
  border: 1px solid var(--border-light);
}

#app {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  background-color: #fff;
}

#header {
  width:100%;
  max-width:100%;
  height:57px;
  min-height:57px;
  max-height:57px;
  top:0;
  padding: 10px;
  margin-bottom: 10px;
  background-color: rgb(247,247,247);
  border-bottom: 1px solid var(--border-medium);
  position: fixed;
  z-index:2000;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 7px;
}
#page-title {
  color: #fff;
  padding:auto;
  background-image: linear-gradient(var(--text-h1-background), var(--text-h1-background-gradient));
  width:max-content;
  font-weight: 400;
  font-size: 24px;
  padding: 2px;
  height: 36px;
  text-shadow: 2px 2px 2px var(--text-shadow);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
  position: relative;
}
#custom-navigator {
  position: absolute;
  display:block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s linear;
  width: auto;
  background-color: #fff;
  border: 1px solid var(--border-dark);
  font-size: 14px;
  padding: 2px;
  color: var(--text);
  text-shadow: 0 0 0;
  width: max-content;
  cursor: pointer;
  z-index:9999;
  overflow-y: scroll;
  max-height:500px;
}
#page-title:hover #custom-navigator {
  visibility: visible;
  opacity: 1;
}
#custom-navigator .custom-navigator-el {
  padding: 4px 8px;
  border: 1px solid transparent;
}
#custom-navigator .custom-navigator-el:hover {
  border: 1px solid var(--border-dark);
  background-color: var(--th-background);
}
#searchbox {
  position:relative;
}
#search {
  font-weight:400;
  height:36px;
  width: 190px;
}
#page_info {
  background-color: transparent;
  height:36px;
  min-width:36px;
  cursor: default;
  pointer-events: none;
  font-weight: 400;
  font-size: 12px;
  line-height:14px;
  color: var(--text);
}
#total_records {
  position:absolute;
  font-weight: 400;
  font-size: 12px;
  color: var(--text);
  right:4px;
  top:1px;
  pointer-events:none;
}
@media (max-width: 600px) {
  #app {
    font-size: 12px;
  }
  #header {
    padding:8px 2px;
  }
  #header .btn.btn-default {
    height: 28px;
    min-width: 28px;
    font-size: 11px;
  }
  .btn#page_info {
    height: 28px;
    min-width: 28px;
    font-size: 11px;
    border: 0;
  }
  #search {
    width: 100px;
    height: 28px;
    font-size: 11px;
  }
  #total_records {
    font-size:8px;
  }
}
#bordered-frame-login-title {
  color: #fff;
  font-size: 28px;
  height:40px;
  padding:auto;
  background-image: linear-gradient(var(--text-h1-background), var(--text-h1-background-gradient));
  padding: 2px 7px;
  width:100%;
  font-weight: 400;
  text-shadow: 2px 2px 1px var(--text-shadow);
}
#bordered-frame-login {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 16px;
    width: 100%;
    height: auto;
}

#container-login {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0%;
  top: 25%;
}
@media (max-height: 500px) {
  #container-login {
    height: 95%;
    top: 5%;
  }
}
@media (max-width: 500px) {
  #container-login {
    height: 95%;
    top: 5%;
  }
}





/* input > */
textarea { resize: none; }
input { font-weight: 400; }

.bordered-item {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 4px;
}
.bordered-frame-headline {
  color: #fff;
  background-image: linear-gradient(var(--text-h2-background), var(--text-h2-background-gradient));
  padding: 2px 6px;
  width:max-content;
  display:inline-block;
}
.bordered-frame {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 8px;
    width: 100%;
    height: 100%;
}
.bordered-frame-max-content {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 8px;
    width: max-content;
    min-width: 100%;
    height: 100%;
}
.details-grid-el-sub .bordered-frame {
  height: auto;
}
.bordered-frame-h-auto {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 8px;
    width: 100%;
    height: auto;
}

.bordered-frame-new-headline {
    color: #fff;
    background-image: linear-gradient(var(--text-h2-background), var(--text-h2-background-gradient));
    padding: 2px 6px;
    height: 1fr;
    width:max-content;
    display:inline-block;
    position:absolute;
    top:-26px;
    left:-1px;
}
.bordered-frame-new {
    border: 1px solid var(--border-light);
    background-color: var(--th-background);
    padding: 8px;
    margin-top:25px;
    width: 1fr;
    height: flex;
    position:relative;
}

.input-label {
  display: flex;
  align-items: center;
  max-height: 14px;
  line-height: 14px;
  color: var(--text);
  white-space: nowrap;
  width: 100%;
  height:18px;
  margin-left:1px;
  margin-bottom:2px;
}

.input {
  display: flex;
  align-content: center;
  position: relative;
  color: var(--text-input);
  caret-color: var(--text-placeholder);
  background-color: #fff;
  border: 1px solid var(--border-light);
  border-radius: 0rem;
  padding: 0px 8px 0px 8px;
  height: 32px;
  width: 100%;
  margin-left: auto;
  box-shadow: unset;
  transition: 0.2s;
}
.input:not(.input-readonly):hover, .input:focus {
  border: 1px solid var(--border-dark);
  color: var(--text);
  outline: 0;
  transition: 0.2s;
}

.input.input-success {
  border: 1px solid var(--success);
  background-color: var(--success-light);
}
.input.input-changed:not(.input-success) {
  border: 1px solid var(--changed);
  background-color: var(--changed-light);
}
.input.input-invalid, .input.input-warning {
  border: 1px solid var(--invalid);
  background-color: var(--invalid-light);
}
.input::placeholder {
  color: var(--text-placeholder);
}

.input-readonly, .input-readonly:focus {
  background-color: rgba(0,0,0,0);
}

.input-dropzone {
  display: block;
  justify-content: center;
  min-height: unset;
  width: 100%;
  border: 1px solid var(--border-light);
  margin:0;
  padding:8px;
  position:relative;
}
.input-dropzone:hover, .input-dropzone:focus {
  border: 1px solid var(--border-dark);
}

.dropdown-table,
.dropdown-table tr,
.dropdown-table td,
.dropdown-table th {
  padding:2px 4px;
  margin:4px 7px;
  border:1px dashed transparent;
}
.dropdown-table th {
  cursor:default;
}

.input-dropdown, .input-date {
  caret-color: transparent;
}
.input-dropdown-arrow {
  position: absolute;
  right: 8px;
  top: 4px;
  pointer-events: none;
}
.input-dropdown-list {
  position: absolute;
  left:8px;
  top:30px;
  width: auto;
  background-color: #fff;
  padding: 8px;
  color: var(--text);
  border: 1px solid var(--border-dark);
  z-index: 1950;
  cursor: pointer;
  overflow-y: scroll;
  max-height:350px;
}
.input-dropdown-el {
  border: 1px dashed transparent;
  padding: 0px 3px;
  text-align: left;
}
.input-dropdown-el:hover {
  background-color: var(--th-background);
  border: 1px solid var(--border-dark);
  transition: 0.2s;
}

.input.input-textarea {
  height: 100px;
  padding: 5px 8px 0px 8px;
}
.input.input-textarea.textarea-xl {
  height: 500px;
}
.input-textarea-with-samples {
  position: relative;
}
.input-textarea-sample-list {
  position:absolute;
  display:block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s, opacity 0.1s linear;
  left:8px;
  top:94px;
  width: auto;
  background-color: #fff;
  padding: 8px;
  color: var(--text);
  border: 1px solid var(--border-dark);
  z-index:9999;
  cursor: pointer;
  overflow-y: scroll;
  max-height:350px;
}
.input-textarea-with-samples:hover .input-textarea-sample-list {
  visibility: visible;
  opacity: 1;
}
.input-textarea-sample-el {
  border: 1px solid transparent;
  padding: 0px 3px;
  text-align: left;
}
.input-textarea-sample-el:hover {
  background-color: var(--th-background);
  border: 1px solid var(--border-dark);
  transition: 0.2s;
}

.input.input-checkbox {
  display: flex;
  align-items: center;
  cursor:pointer !important;
}
.input.input-readonly.input-checkbox {
  pointer-events: none;
  cursor:default !important;
}
.input.input-checkbox .checker {
  font-size:20px;
  margin-right:4px;
}





/* buttons > */
.btn.btn-default {
  height:36px;
  min-width:36px;
  background-image: var(--btn-default);
  border: 1px solid var(--btn-default-border);
  color: var(--btn-default-text);
  text-shadow: 1px 1px 1px var(--text-shadow);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
}
.btn.btn-default:hover {
  background-image: var(--btn-hover);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
}
.btn.btn-default:focus,
.btn.btn-default.btn-active {
  background-image: var(--btn-active);
  border-color: var(--btn-active-border);
  color: var(--btn-active-text);
}

.btn.btn-tab {
  height:36px;
  min-width:36px;
  background-image: var(--btn-tab);
  border: 1px solid var(--border-light);
  color: var(--btn-tab-text);
  text-shadow: 0;
}
.btn.btn-tab:hover,
.btn.btn-tab.btn-active:hover {
  background-image: var(--btn-hover);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
  text-shadow: 1px 1px 1px var(--text-shadow);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
}
.btn.btn-tab:focus,
.btn.btn-tab.btn-active {
  background-image: var(--btn-active);
  border-color: var(--btn-active-border);
  color: var(--btn-active-text);
  text-shadow: 1px 1px 1px var(--text-shadow);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
}

.btn.btn-tiny, .btn.btn-default.btn-tiny {
  background-image: var(--btn-default);
  border: 1px solid var(--btn-default-border);
  color: var(--btn-default-text);
  width: 20px;
  min-width:unset;
  height: 20px;
  line-height: 18px;
  padding:0;
}
.btn.btn-tiny:hover,
.btn.btn-tiny:focus,
.btn.btn-tiny.btn-active {
  background-image: var(--btn-hover);
  border: 1px solid var(--btn-hover-border);
  color: var(--btn-hover-text);
}

.btn.btn-delete {
  background-image: var(--btn-delete) !important;
}
.btn.btn-delete:hover,
.btn.btn-delete:focus {
  background-image: var(--btn-delete-active) !important;
}

.btn.btn-confirm {
  background-image: var(--btn-default) !important;
  border: 1px solid var(--btn-default-border) !important;
  color: var(--btn-default-text) !important;
  box-shadow: unset !important;
  transition: 0.2s !important;
  text-shadow: 1px 1px 1px var(--text-shadow) !important;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px !important;
}
.btn.btn-confirm:hover,
.btn.btn-confirm:focus {
  background-image: var(--btn-hover) !important;
  border-color: var(--btn-hover-border) !important;
  color: var(--btn-hover-text) !important;
  text-shadow: 1px 1px 1px var(--text-shadow) !important;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px !important;
}

.bv-content {
  margin-top:1px;
  background-color: #fff;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: 0.2s;
}
.bv-content:hover {
  background-color: rgba(0,0,0,0);
  border: 1px solid var(--border-dark);
  transition: 0.2s;
}
.bv-content.bv-focuson {
  background-color: rgba(0,0,0,0);
  border: 1px solid var(--border-dark);
  cursor: auto;
  transition: 0.2s;
}





/* text > */
.text-normal {
  font-weight: 400;
}
.text-bold {
  font-weight: 700;
}
.text-underline {
  text-decoration: underline;
}
.text-italic {
  font-style:italic;
}
.text-disabled {
  text-decoration: line-through !important;
}
.text-selection {
  color: var(--selection-text) !important;
  background: var(--selection-background) !important;
}
.highlight-red {
  background: var(--highlight-red) !important;
}
.text-invalid {
   color: var(--text-warning) !important;
}
.highlight-red {
   background: rgb(255, 158, 158) !important;
}
.highlight-green {
   background: rgb(155, 224, 161) !important;
}
.highlight-yellow {
   background: rgb(255, 251, 143) !important;
}
.highlight-blue {
   background: rgb(159, 190, 252) !important;
}
.text-placeholder {
   color: var(--text-placeholder) !important;
}
.text-align-right {
  text-align: right;
}
.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-nobr {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-justify {
	hyphens: auto;
	text-align: justify;
}

.cursor-pointer { cursor:pointer; }
.cursor-default { cursor:default; }
.cursor-auto { cursor:auto; }

.number-circle {
  position:absolute;
  top:-60%;
  left:100%;
  border-radius: 50%;
  width: max-content;
  height: 18px;
  padding: 2px 6px;
  color: #fff;
  background: var(--invalid);
  border: 1px solid var(--border-dark);
  text-align: center;
  font-size: 10px;
}
.number-circle.number-circle-green {
  background: var(--success_rgb);
}

.custom-tooltip {
  position: relative;
}
.custom-tooltip .custom-tooltiptext,
.custom-tooltip .custom-tooltiptext-tiny {
  visibility: hidden;
  text-align: center;
  width:max-content;
  font-size:12px;
  font-weight:400;
  background-color: var(--tooltip-background);
  border: 1px solid var(--tooltip-border);
  color: var(--text);
  padding: 1px 3px;
  position: absolute;
  top:105%;
  left: 50%;
  width:max-content;
  margin-left:-50%;
  z-index: 1900;
  pointer-events: none;
}
.custom-tooltiptext.custom-tooltiptext-left {
  text-align: left;
}
.custom-tooltip .custom-tooltiptext::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 12px;
  border-width:6px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-border) transparent;
}
.custom-tooltip .custom-tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 13px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-background) transparent;
}
.custom-tooltip .custom-tooltiptext-tiny::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 4px;
  border-width:6px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-border) transparent;
}
.custom-tooltip .custom-tooltiptext-tiny::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-background) transparent;
}
.custom-tooltip:hover .custom-tooltiptext,
.custom-tooltip:hover .custom-tooltiptext-tiny {
  visibility: visible;
}





/* grid > */

/* MAIN GRID */
#main-grid {
  display: grid;
  height: 100%;
  width: 100%;
  max-width:1200px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(auto-fit, minmax(1px, max-content));
  grid-gap: 20px;
  padding: 77px 20px 20px 20px;
  margin:auto;
}
#main-grid.main-grid-datatable {
  max-width:unset;
}
.main-grid-el {
  display: flex;
  flex-flow: column;
  height: 100%;
}

/* DETAILS GRID */
.details-grid {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 16px;
  padding: 0;
  margin-top: 12px;
}
.details-grid-el {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.details-grid-el-sub {
  margin-bottom: 16px;
}
.details-grid-el-sub:last-child {
  flex-grow: 1;
  margin-bottom: 0px;
}
@media (max-width: 1000.00px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
}

/* INPUT GRID */
.input-grid {
  display: grid;
  align-items: center;
  grid-template-rows: repeat(auto-fit, minmax(1px, 1fr));
  grid-gap: 20px;
  margin: 8px 4px;
  padding: 0;
}
.input-grid-col2-xl {
  grid-template-columns: 200px 800px;
}
.input-grid-col1 {
  grid-template-columns: 200px;
}
.input-grid-col2 {
  grid-template-columns: 200px 200px;
}
.input-grid-col3 {
  grid-template-columns: 100px 150px 150px;
}
.input-grid-col4 {
  grid-template-columns: 200px 200px 200px 200px;
}
.input-grid-list {
  grid-template-columns: max-content 1fr;
  grid-gap:unset;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}
.input-grid-gap8 {
  grid-gap: 8px;
}
.input-grid-permissions {
  grid-template-columns: 200px 32px;
  grid-gap: 5px;
}
#input-grid-payroll {
  grid-template-columns: 70px 50px 50px 100px 100px 100px 100px 1fr;
  grid-gap: 5px;
}
#input-grid-payroll-zuordnung {
  grid-template-columns: 1fr 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
  grid-gap: 5px;
}
#input-grid-payroll-current-month {
  grid-template-columns: 140px 100px 100px 100px 100px 1fr;
  grid-gap: 5px;
}
.input-grid-el {
  display:flex;
  align-items: center;
  position: relative;
  min-height: 32px;
  margin-bottom: auto;
}
.input-grid-el-low {
  display:flex;
  align-items: center;
  position: relative;
  text-align:left;
  margin-bottom: auto;
}
.input-grid-headline {
  display:flex;
  align-items: center;
  position: relative;
  text-align: left;
  min-height: unset;
  margin-bottom: auto;
}
.input-grid-el-result {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -15px;
  left: 1px;
  max-height: 14px;
  line-height: 14px;
  font-size:14px;
  color: var(--icon-warning);
  white-space: nowrap;
  z-index:1800;
}
.input-grid-el-hx {
  position: relative;
  text-align: left;
  min-height: 32px;
}
.input-grid-el-hy {
  display:flex;
  align-items: center;
  position: relative;
  text-align: left;
  min-height: 32px;
}

/* TABLE ROW */
.clickable-row {
  cursor: pointer;
  border: 1px dashed transparent;
}
.clickable-row:hover {
  box-shadow: unset;
  background-color: var(--th-background);
  border: 1px solid var(--border-dark);
}
.selected-row {
  background-color: var(--th-background);
  border: 1px solid var(--border-dark);
}
.selected-row-content {
  background-color: #fff;
  border-bottom: 1px solid var(--border-dark);
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
}

/* SPAN */
.grid-colspan-2 { grid-column: span 2; }
.grid-colspan-3 { grid-column: span 3; }
.grid-colspan-4 { grid-column: span 4; }
.grid-colspan-5 { grid-column: span 5; }
.grid-colspan-6 { grid-column: span 6; }
.grid-colspan-7 { grid-column: span 7; }
.grid-colspan-8 { grid-column: span 8; }
.grid-colspan-9 { grid-column: span 9; }
.grid-colspan-10 { grid-column: span 10; }
.grid-colspan-all { grid-column: 1/-1; }
.grid-rowspan-2 { grid-row: span 2; }
.grid-rowspan-3 { grid-row: span 3; }
.grid-rowspan-4 { grid-row: span 4; }
.grid-rowspan-5 { grid-row: span 5; }
.grid-rowspan-6 { grid-row: span 6; }
.grid-rowspan-7 { grid-row: span 7; }
.grid-rowspan-8 { grid-row: span 8; }
.grid-rowspan-9 { grid-row: span 9; }
.grid-rowspan-10 { grid-row: span 10; }
.grid-rowspan-all { grid-row: 1/-1; }





/* responsive > */
.flex-center {
  display: flex;
  align-items: center;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.wrapper, .wrapper-700 { display:flex; }
@media (max-width: 700.00px) {
  .wrapper, .wrapper-700 { display:block; }
}
.wrapper-850 { display:flex; }
@media (max-width: 850px) {
  .wrapper-850 { display:block; }
}
.d-none, .d-none-lg { display:none; }
@media (max-width: 850px) {
  .d-none-lg { display:unset; }
  .d-none-sm { display:none; }
}
.half-input {
  max-width:48%;
}
.w-content {
  width:max-content;
}
.w-auto {
  width:auto;
}
.h-auto {
  height:auto;
}
.h-content {
  height:max-content;
}
.p-relative {
  position: relative;
}
.p-absolute {
  position: absolute;
}