@import url(color.css);

:root {
  --bgcolor-red: #ffb2b2;
  --bgcolor-yellow: #ffe698;
}

.both {
  clear: both;
}

.gw-invisible {
    display: none;
}

.clearfix::after {
  display: block;
  clear: both;
  content: '';
}

#selfLink {
  display: none;
}


/* exclude it inside React, as it conflicts with tailwind. */
fieldset:not(.react-component fieldset) {
  padding: 5px 10px 10px;
  border: 1px solid #d1d1d1;
  background-color: #f6f6f6;
  margin: 0 0 20px 0;
  position: relative;
}

.ui-contentWrap {
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 5px;
  border: 1px solid #e3e3e3;
  padding: 25px;

  -webkit-box-shadow: 0 0 5px 0 #e2e2e2;
  box-shadow: 0 0 5px 0 #e2e2e2;

  overflow: hidden;
  margin-bottom: 20px;
}

.ui-contentWrap.no-shadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.uiForm input[type='text'],
.uiForm input[type='time'],
.uiForm input[type='date'],
.uiForm input[type='password'],
.uiForm input[type='submit'],
.uiForm select,
.uiForm textarea {
  -webkit-appearance: none;
}

.uiForm input[type='checkbox'] {
  -webkit-appearance: normal;
  border-radius: 1px solid #808080;
}

input[readonly],
select[readonly],
textarea[readonly] {
  color: #6d6d6d !important;
}

button[disabled]:not(.react-component button),
input[disabled]:not(.react-component input),
select[disabled]:not(.react-component select),
textarea[disabled]:not(.react-component textarea) {
  opacity: 0.6 !important;
  cursor: default !important;
}

input.ui-formBtn,
input.uiFormBtn,
button.uiFormBtn {
  box-sizing: border-box;
  height: 30px;
  min-width: 90px;
  text-transform: uppercase;
  font-weight: normal !important;
  vertical-align: top;
  color: #fff;
  cursor: pointer;
  background-color: #219e3e;
  border: 1px solid #2d9b47;
  border-radius: 5px;
  font-size: 0.75rem;
  padding: 0 15px;
  display: inline-block;
  text-decoration: none;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.uiFormBtn.uiFormBtn-ico {
  min-width: auto;
  padding: 0 0.5rem;
  line-height: 32px;
}

.uiFormBtn.uiFormBtn-ico i {
  color: #666;
}

a.uiFormBtn,
btn.uiFormBtn,
div.uiFormBtn,
span.uiFormBtn,
button.uiFormBtn {
  box-sizing: border-box;
  line-height: 28px;
  height: 30px;
  text-transform: uppercase;
  font-weight: normal !important;
  color: #fff;
  cursor: pointer;
  background-color: #35b152;
  border: 1px solid #2d9b47;
  border-radius: 5px;
  font-size: 0.75rem;
  padding: 0 15px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

input.uiFormBtn.alignBottom,
button.uiFormBtn.alignBottom {
  margin-top: 18px;
}

input.uiFormBtn.inline,
a.uiFormBtn.inline,
button.uiFormBtn.inline {
  height: 30px;
  min-width: 90px;
  text-transform: uppercase;
  vertical-align: top;
}

input.uiFormBtn.fullWidth,
a.uiFormBtn.fullWidth,
button.uiFormBtn.fullWidth {
  height: 30px;
  min-width: 90px;
  width: 100%;
  text-transform: uppercase;
  vertical-align: top;
}

a.nounderline,
a.nounderline:link,
a.nounderline:visited {
  text-decoration: none;
}

a.nounderline:hover {
  text-decoration: underline;
}

.uiFormBtn.red,
a.uiFormBtn.red,
a.uiFormBtn.red:link,
a.uiFormBtn.red:visited,
a.uiFormBtn.red:active {
  color: #fff;
  background-color: #c86b69;
  border: 1px solid #a55856;
  text-decoration: none;
}

.uiFormBtn.orange,
a.uiFormBtn.orange,
a.uiFormBtn.orange:link,
a.uiFormBtn.orange:visited,
a.uiFormBtn.orange:active {
  color: #fff;
  background-color: #ef953c;
  border: 1px solid #b86d24;
  text-decoration: none;
}

.uiFormBtn.grey,
a.uiFormBtn.grey,
a.uiFormBtn.grey:link,
a.uiFormBtn.grey:visited,
a.uiFormBtn.grey:active {
  color: #fff;
  background-color: #909090;
  border: 1px solid #808080;
  text-decoration: none;
}

input.uiFormBtn.grey:hover,
a.uiFormBtn.grey:hover {
  background-color: #707070;
}

.uiFormBtn.white,
a.uiFormBtn.white,
a.uiFormBtn.white:link,
a.uiFormBtn.white:visited,
a.uiFormBtn.white:active {
    color: #333;
    background-color: #fff;
    border: 1px solid #808080;
    text-decoration: none;
    padding: 0;
}

input.uiFormBtn.white:hover,
a.uiFormBtn.white:hover {
    background-color: #e8e8e8;
}

a.uiFormBtn:link,
a.uiFormBtn:visited,
a.uiFormBtn:active,
a.uiFormBtn:focus {
  text-decoration: none;
  color: #fff;
  background-color: #35b152;
  /*font-weight: bold;*/
}

a.uiFormBtn .fa,
a.uiFormBtn .fas {
  margin-right: 7px;
  margin-left: -3px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}

/* uiFormV2 adapted to the React Component */

.uiForm.reactAdapted label {
    font-size: var(--text-sm) !important;
    color: var(--color-gray-700) !important;
}

.uiForm.reactAdapted input, .uiForm.reactAdapted select, .uiForm.reactAdapted textarea, .uiForm.reactAdapted .uiFormBtn {
    border-radius: 5px;
    padding: 4px 12px !important;
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
    min-height: calc(var(--spacing) * 9);
    margin-top: 0.15rem !important;
    box-shadow: var(--shadow-sm);
}

.uiForm.reactAdapted a.uiFormBtn
{
    line-height: 28px !important;
}

.uiForm.reactAdapted .uiFormBtn {
    min-height: calc(var(--spacing) * 9);
}

.uiForm.reactAdapted textarea {
    min-height: 6rem !important;
}

.uiForm.reactAdapted .input-wrap {
    margin-bottom: 0.5rem;
}

.uiForm.reactAdapted .input-wrap.checkbox-wrap input {
    margin-top: 0 !important;
    min-height: auto !important;
}

.uiForm.reactAdapted .input-wrap.checkbox-wrap label {
    margin-top: 0 !important;
}

.uiForm.reactAdapted input:focus-visible, .uiForm.reactAdapted textarea:focus-visible {
    border-color: var(--color-forest-green) !important;
    outline: none;
}










.soft {
  opacity: 0.5;
  font-weight: normal;
}

.right {
  float: right !important;
}

.alignCenter {
  text-align: center;
}

input.uiFormBtn:hover,
a.uiFormBtn:hover,
input.uiFormBtn:focus,
a.uiFormBtn:focus {
  font-weight: bold;
  background-color: #35851c;
  color: #fff;
}

input.uiFormBtn.red:hover,
a.uiFormBtn.red:hover,
input.uiFormBtn.red:focus,
a.uiFormBtn.red:focus {
  background-color: #b15553;
}

input.uiFormBtn.orange:hover,
a.uiFormBtn.orange:hover,
input.uiFormBtn.orange:focus,
a.uiFormBtn.orange:focus {
  background-color: #e98421;
}

button.ui-formBtn {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-weight: normal;
  background: linear-gradient(#35a9df, #007cb5) repeat 0 0 #007cb5;
  border: 1px solid #2587b4;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  text-align: center;
  padding: 0 15px;
  height: 40px;
  line-height: 15px;
  white-space: nowrap;
  font-size: 110%;
  text-shadow: 0 1px 1px #808080;
}

.ui-formBtn.marginTop {
  margin-top: 20px;
}

.uiForm input[type='checkbox'] {
  width: auto;
  vertical-align: text-top;
}

.ui-formBtn:hover,
.ui-formBtn:focus {
  background-color: #199a37;
  border: 1px solid #137c2c;
}

.uiFormBox {
  border: 1px solid #eaeaea;
  padding: 20px;
  border-radius: 3px;

  background-color: #f8f8f8;
}

.uiFormBox .uiForm textarea,
.uiFormBox .uiForm input[type='text'],
.uiFormBox .uiForm input[type='time'],
.uiFormBox .uiForm select,
.uiForm .uiFormBox textarea,
.uiForm .uiFormBox input[type='text'],
.uiForm .uiFormBox input[type='time'],
.uiForm .uiFormBox select,
.uiFormBox .uiForm input[type='date'],
.uiForm .uiFormBox input[type='date'],
.uiForm input[type='date'] {
  background-color: #fff;
  width: 100%;
  max-width: 100%;
}

.uiForm.widthForm textarea,
.uiForm.widthForm input[type='text'],
.uiForm.widthForm input[type='time'],
.uiForm.widthForm select,
.uiForm.widthForm textarea,
.uiForm.widthForm input[type='text'],
.uiForm.widthForm input[type='time'],
.uiForm.widthForm select,
.uiForm.widthForm input[type='date'],
.uiForm.widthForm input[type='time'],
.uiForm.widthForm input[type='number'],
.uiForm.widthForm input[type='password'] {
  background-color: #fff;
  width: 100% !important;
}

.uiForm.inlineForm textarea,
.uiForm.inlineForm input[type='text'],
.uiForm.inlineForm input[type='time'],
.uiForm.inlineForm select,
.uiForm.inlineForm textarea,
.uiForm.inlineForm input[type='text'],
.uiForm.inlineForm input[type='time'],
.uiForm.inlineForm select,
.uiForm.inlineForm input[type='date'],
.uiForm.inlineForm input[type='time'],
.uiForm.inlineForm input[type='number'],
.uiForm.inlineForm input[type='password'] {
  margin: 0;
}

.uiForm select {
  background-image: url(../../images/arrow-down.png);
  background-repeat: no-repeat;
  background-position: top right;
}

.uiFormClearLink {
  clear: both;
  padding-top: 10px;
}

.ui-comment {
  color: #808080;
  font-style: italic;
}

/* Überschriften */

h1.ui-Header,
h2.ui-Header {
  font-size: 180%;
  font-weight: 400;
  margin-bottom: 25px;
}

h2.ui-subHeader {
  font-size: 160%;
  font-weight: 400;
  margin-bottom: 25px;
}

.ui-infoBox {
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #e3e3e3;
  line-height: 130%;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  min-height: 32px;
}

/* formulare */

::-webkit-input-placeholder:not(.react-component ::-webkit-input-placeholder) {
  font-style: italic;
  color: #333;
  font-size: 90%;
}

::-moz-placeholder:not(.react-component ::-moz-placeholder) {
  font-style: italic;
  color: #333;
  font-size: 90%;
}

/* firefox 19+ */
:-ms-input-placeholder:not(.react-component :-ms-input-placeholder) {
  font-style: italic;
  color: #333;
  font-size: 90%;
}

input,
textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.form-error-below {
  display: block;
  color: #df2315;
  margin-bottom: 10px;
}

/* FORMULARE */

.uiForm label,
.uiForm .label {
  color: #888;
}

.uiForm fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px 0;
  background-color: transparent;
}

.uiForm legend {
  border: 0;
  padding: 0;
  margin: 0 0 20px 0;
}

.uiForm h2 {
  border: 0;
  padding: 0;
  margin: 0 0 10px 0;
  font-weight: 600;
  font-size: 14px;
}

.uiForm .uiFormLeft {
  float: left;
  width: 48%;
  padding-right: 2%;
}

.uiForm .uiFormRight {
  float: left;
  width: 48%;
}

.uiForm .ui-datepicker-trigger {
  margin: 0 0 0 -22px !important;
  vertical-align: baseline;
  cursor: pointer;
  display: inline-block;
}

.uiForm fieldset {
  padding: 0;
  margin: 0 0 20px 0;
  background: none;
  border: 0;
}

.uiForm fieldset.last {
  margin: 0;
}

.uiForm .labelLeft label {
  /*float: left;*/
  height: 17px;
  line-height: 17px;
  margin-right: 15px;
  padding: 8px 0 9px;
  text-align: right;
  width: 120px;
  display: inline-block;
}

.uiForm textarea.formerror {
  border: 1px solid #ff1e00;
  color: #000;
}

.uiForm select {
  padding: 4px 8px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  width: 350px;
  font-size: 13px;
  max-width: 90%;
  height: 30px;
}

.uiForm input[type='text'],
.uiForm input[type='password'] {
  width: 350px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 13px;
  padding: 4px 8px;
  background-color: #f3f3f3;
  border: 1px solid #c0c0c0;
  max-width: 100%;
  height: 30px;
}

.uiForm.flexForm input[type='text'],
.uiForm.flexForm input[type='password'] {
  width: 100% !important;
}

.uiForm input[type='text'].datePickerOnFocus,
.uiForm input[type='date'].datePickerOnFocus {
  width: 140px !important;
}

.uiForm .uiSelectWrap {
  min-width: 140px;
}

.uiForm input[type='time'],
.uiForm input[type='number'],
.uiForm input[type='date'] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 13px;
  padding: 6px 10px;
  background-color: #f3f3f3;
  border: 1px solid #c0c0c0;
  width: 100%;
  max-width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.uiForm input[type='text']:focus,
.uiForm input[type='password']:focus,
.uiForm input[type='time']:focus,
.uiForm input[type='date']:focus,
.uiForm input[type='number']:focus,
.uiForm select:focus,
.uiForm textarea:focus {

  border: 1px solid #90cf9f;
  -webkit-box-shadow: 0 0 0 3px rgba(199, 231, 207, 0.8);
  -moz-box-shadow: 0 0 0 3px rgba(199, 231, 207, 0.8);
  box-shadow: 0 0 0 3px rgba(199, 231, 207, 0.8);
}

.uiForm input[type='text'],
.uiForm input[type='password'],
.uiForm input[type='time'],
.uiForm input[type='date'],
.uiForm input[type='number'],
.uiForm select,
.uiForm textarea {
  margin-bottom: 10px;
}

.uiForm input.fieldSearch {
  width: 320px;
}

.fieldSearchBtn {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  height: 25px;
  width: 25px;
  white-space: nowrap;
  text-indent: -9999px;
  background: url(img/lupe.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 5px;
  vertical-align: top;
}

.uiForm select {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 13px;
  background-color: #f3f3f3;
  min-height: 30px;
  padding: 5px 20px 5px 10px;
  border: 1px solid #c0c0c0;
  width: 350px;
  max-width: 100%;
}

.uiForm select.changed,
.uiForm input[type='text'].changed {
  background-color: #fff9e3;
  border: 1px solid #888;
}

.uiForm textarea {
  max-width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 13px;
  padding: 7px 6px 8px 6px;
  background-color: #f3f3f3;
  border: 1px solid #c0c0c0;
  display: block;
  width: 100%;
}

.uiForm textarea.fix {
  width: 350px;
}

.uiForm textarea.formerror {
  border: 1px solid #df2315;
}

.uiForm input.formerror,
.uiForm select.formerror,
.form-control.formerror,
.form-select.formerror {
  border: 1px solid #df2315 !important;
}

/* werkzeuge */

.ui-floatLeft {
  float: left;
}

.ui-list li {
  padding: 0 0 7px 24px;
  background: url(img/ui-list.png) 0 0 no-repeat transparent;
}

.ui-list li.pic {
  padding: 0 0 5px 18px;
}

.ui-list li.ico-package {
  background-image: url(img/package.png);
}

.ui-list li.ico-star {
  background-image: url(img/star.png);
}

.ui-list li.ico-email {
  background: url(img/email.png) 0 1px no-repeat;
}

.ui-list li a:link,
.ui-list li a:visited {
  color: #197dab;
}

/* tabelle */

.ui-divTable {
  display: table;
  width: 100%;
  margin-bottom: 10px;
}

.ui-divTable.table50left {
  float: left;
  width: 49%;
  overflow: hidden;
}

.ui-divTable.table50right {
  float: right;
  width: 49%;
  overflow: hidden;
}

.ui-divTable.border,
.ui-divTable.border div.td {
  border-bottom: 1px solid #c0c0c0;
  border-collapse: collapse;
}

.ui-divTable div.tr {
  display: table-row;
}

.ui-divTable div.tr div.td,
.ui-divTable div.tr div.th {
  display: table-cell;
  table-layout: fixed;
  border-spacing: 0;

  padding: 4px 0;
  border-collapse: collapse;
}

.ui-divTable div.tr.color1 {
  background-color: #fff;
}

.ui-divTable div.tr.color2 {
  background-color: #f3f3f3;
}

.ui-divTable div.th {
  background-color: #adadad;
  color: #ffffff;
  font-weight: normal;
  padding: 4px 0;
  text-align: left;
}

/* content */

.uiContent {
  background-color: #fff;
  padding: 20px;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;

  border-radius: 5px;
  border-top-left-radius: 0;
}

.uiContent.gray {
  background-color: #f6f7f9;
}

.uiContent.bg {
  background-color: #f6f7f9;
}

h2.uiHeader,
.uiHeader {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 400;
  color: #777;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

h2.uiTopHeader {
  padding: 0;
  margin: 0 0 0 0;
  font-size: 18px;
  font-weight: 400;
  color: #777;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.uiSubHeader {
  font-size: 14px;
  color: #666;
  padding: 0;
  margin: 0;
  font-weight: normal;
  text-align: left;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.uiBoxHeader {
  font-size: 14px;
  color: #666;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
  margin: 0 0 5px;
  vertical-align: baseline;
}

h3.uiSubHeader {
  font-size: 14px;
  color: #555;
  padding: 0;
  margin: 0;
  font-weight: 600;
  text-align: left;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

h2.uiTrenner,
.uiTrenner {
  color: #333;
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
}

.uiLabel {
  font-weight: normal;
  font-size: 14px;
  color: #888;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
  display: block;
}

.uiContentBox {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.uiContentBox.overflow,
.overflow {
  overflow: hidden;
}

.uiContentBox.bg {
  background-color: #f6f7f9;
}

.uiContentBox h2.uiHeader,
.uiContentBox .uiHeader {
  color: #aaa;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 14px;
  text-transform: uppercase;
}

.uiContentBox.p-2\.5 {
  padding: 10px;
}

.uiNote,
.note {
  color: #666;
  font-style: italic;
}

.uiIcoTextWrap {
  padding: 10px;
}

.uiIcoText {
  color: #808080;

  padding: 5px;
  margin-bottom: 5px;
}

.uiIcoText .faIco i {
  color: #808080;
  font-size: 18px;
  text-shadow: none;
}

.uiInlineMessage {
  min-height: 32px;
  background-image: url(img/error.png);
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-color: #fff;

  padding: 8px 10px 8px 35px;
  border: 1px solid #e3e3e3;
  line-height: 140%;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.uiInlineMessage.warning {
  border: 1px solid #e3e3e3;
  background-image: url(img/error.png);
  color: #666;
}

.uiMessage {
  border: 2px solid #c0c0c0;
  background-color: #fff;
  color: #333;
  border-radius: 3px;
  padding: 10px 20px;
  margin-bottom: 20px;
  font-weight: normal;

  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.uiMessage .faIco i {
  font-size: 18px;
  margin-right: 10px;
}

.uiMessage.warning {
  border: 1px solid #ffae00;
  background-color: #fff;
}

.uiMessage.error {
  border: 1px solid #ff0000;
  background-color: #fff;
}

.uiMessage.success {
  border: 1px solid #31c071;
  background-color: #fff;
  color: #333;
}

.uiMessage.info {
  border: 1px solid #c0c0c0;
  background-color: #fff;
  color: #333;
}

/* top Navi buttons */

.uiTopNavi {
  border-bottom: 1px solid #dcdcdc;
  padding: 20px 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.uiTopNavi li {
  display: block;
  border-radius: 3px;
  float: left;
  margin-right: 20px;

  background: -moz-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #fefefe),
    color-stop(100%, #d8d8d8)
  );
  background: -webkit-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: linear-gradient(to bottom, #fefefe 0%, #d8d8d8 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#d8d8d8', GradientType=0);
}

.uiTopNavi li.right {
  display: block;
  float: right;
  margin: 0 0 0 10px;
}

/* DETAIL BUTTONS */

a.uiBtnSmall,
a.uiBtnSmall:active {
  display: inline-block;
  border: 1px solid #35b152;
  border-radius: 3px;
  width: auto;
  line-height: 30px;
  height: 30px;
  padding: 0 20px;
  margin-right: 10px;
  text-decoration: none;
  font-size: 12px;
  font-weight: normal;
  background-color: #35b152;
  background-repeat: no-repeat;
  color: #fff;
  cursor: pointer;
  display: inline-block;

  text-decoration: none;
  text-shadow: 0 1px 0 #005f7a;
}

a.uiBtnSmall:link,
a.uiBtnSmall:visited {
  text-decoration: none;
  color: #fff;
  background-color: #35b152;
  font-weight: normal;
}

a.uiBtnSmall:hover {
  border: 1px solid #808080;
  font-weight: normal;
  background-color: #35b152;
}

a.uiBtnSmall.warning {
  border: 1px solid #d28500;
  font-weight: normal;
  background-color: #f0be68;
  color: #000;
  text-shadow: 0 1px 0 #fff;
}

a.uiBtn {
  display: inline-block;
  border: 1px solid #dedede;
  border-radius: 3px;
  width: auto;
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  text-transform: uppercase;

  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  color: #666;

  background: -moz-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #fefefe),
    color-stop(100%, #d8d8d8)
  );
  background: -webkit-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #d8d8d8 100%);
  background: linear-gradient(to bottom, #fefefe 0%, #d8d8d8 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#d8d8d8', GradientType=0);

  background-repeat: no-repeat;
  text-shadow: 1px 1px 0 #fff;
}

a.uiBtn:link,
a.uiBtn:visited {
  text-decoration: none;
}

a.uiBtn:hover {
  border: 1px solid #808080;
}

a.uiBtn.add {
  background-image: url(img/add.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.user {
  background-image: url(img/user.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.calendar {
  background-image: url(img/calendar_add.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.back {
  background-image: url(img/list.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.import {
  background-image: url(img/application_go.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.export {
  background-image: url(img/application_go.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.print {
  background-image: url(img/printer.png);
  background-position: 10px 12px;
  padding-left: 33px;
}

a.uiBtn.right {
  float: right;
  margin-right: 0;
}

/* CSS TABELLE */

/* CSS TABELLE */

.uiTable {
  display: table;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.uiTable .tr {
  display: table-row;
}

.uiTable .td,
.uiTable .th {
  display: table-cell;
  vertical-align: top;
}

.uiTable .th {
  background-color: #fff;
}

.uiTable.highlight .tr:hover .td {
  background-color: #eee;
}

.uiTable .width10 {
  width: 10px;
}

.uiTable .width16 {
  width: 16px;
}

.uiTable .width20 {
  width: 20px;
}

.uiTable .width40,
.uiTable .width140 .text-overflow {
  width: 40px;
}

.uiTable .width60,
.uiTable .width160 .text-overflow {
  width: 60px;
}

.uiTable .width70,
.uiTable .width170 .text-overflow {
  width: 70px;
}

.uiTable .width80,
.uiTable .width180 .text-overflow {
  width: 80px;
}

.uiTable .width90,
.uiTable .width190 .text-overflow {
  width: 90px;
}

.uiTable .width100,
.uiTable .width100 .text-overflow {
  width: 100px;
}

.uiTable .width120,
.uiTable .width120 .text-overflow {
  width: 120px;
}

.uiTable .width150,
.uiTable .width150 .text-overflow {
  width: 150px;
}

.uiTable .width200,
.uiTable .width200 .text-overflow {
  width: 200px;
}

.uiTable .width220,
.uiTable .width220 .text-overflow {
  width: 220px;
}

.uiTable .width250,
.uiTable .width250 .text-overflow {
  width: 250px;
}

.uiTable .width300,
.uiTable .width300 .text-overflow {
  width: 300px;
}

/* <p class="text-overflow"><span> */

.text-overflow {
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-overflow.width80 {
  width: 80px;
}

.text-overflow.width90 {
  width: 90px;
}

.text-overflow.width100 {
  width: 100px;
}

.text-overflow.width150 {
  width: 150px;
}

.text-overflow.width200 {
  width: 200px;
}

.text-overflow.width220 {
  width: 220px;
}

.text-overflow.width250 {
  width: 250px;
}

.text-overflow.width300 {
  width: 300px;
}

.td-text-overflow {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maxWidth200 {
  max-width: 200px;
}

.maxWidth300 {
  max-width: 300px;
}

.nowrap {
  white-space: nowrap;
}

.uiTable .width50p {
  width: 48%;
}

.uiTable .space {
  width: 2%;
}

.uiTable.dataTable div.tr {
  background-color: #fff;
}

.uiTable.dataTable.striped div.tr:nth-of-type(2n) {
  background-color: #fafafa;
}

.uiTable.dataTable,
.uiTable.dataTable .td {
  border: 1px solid #ddd;
}

.uiTable.dataTable,
.uiTable.dataTable.noborder .td {
  border: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;

  border-collapse: collapse;
}

.uiTable.dataTable.lines .tr {
  border: 0;
  border-collapse: collapse;
}

.uiTable.dataTable.lines .td {
  border: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-collapse: collapse;
}

.uiTable.dataTable .th {
  border-top: 1px solid #e6e3d8;
  border-bottom: 1px solid #e6e3d8;

  border-collapse: collapse;
  font-weight: bold;
  color: #808080;
}

.uiTable.dataTable.noborder .td,
.uiTable.dataTable.noborder .th {
  border: 0;
  border-collapse: collapse;
}

.uiTable .tr.color2 {
  background-color: #fff;
}

.uiTable .tr.color1 {
  background-color: #fafafa;
}

.uiTable.striped .tr:nth-child(even) {
  background-color: #fafafa;
}

/* listen */

.uiTable.dataTable.noborder .td,
.uiTable.dataTable.noborder .th {
  border: 0;
  border-collapse: collapse;
}

.uiTable.dataTable .th {
  padding: 0.5rem 0.5rem;
}

.uiTable.dataTable .td {
  padding: 0.5rem 0.5rem;
}

/*
.uiTable.dataTable .tr:hover
{
   background-color: #e8f1f4;
   color: #333;
}*/

/* sucheformular */

.searchWrap {
  /*border-bottom: 1px solid #dedede;*/
  padding: 10px 0;
  margin-bottom: 20px;
  min-height: 30px;
  overflow: visible;
}

.searchWrap.noborder {
  margin-bottom: 0;
  border-bottom: 0;
  padding: 0;
}

.inlineFormWrap {
  padding: 0;
  overflow: hidden;
}

.searchWrap.js {
  overflow: hidden;
  border-bottom: 1px solid #dedede;
  padding: 10px 0;
  margin-bottom: 10px;
}

.searchWrap .input-wrap,
.inlineFormWrap .input-wrap {
  float: left;
}

.searchWrap .uiForm input,
.inlineFormWrap .uiForm input {
  float: left;
  width: 120px;
  margin-right: 10px;
  margin-bottom: 0;
}

.searchWrap .uiForm input[type='checkbox'] {
  float: left;
  width: auto;
  margin-right: 2px;
  margin-bottom: 0;
  margin-top: 2px;
}

.searchWrap .uiForm select,
.inlineFormWrap .uiForm select {
  float: left;
  width: 170px;
  margin-right: 10px;
  margin-bottom: 0;
  margin-top: 0;
}

.searchWrap .uiForm input.uiFormBtn {
  /*float: right;*/
  margin: 0 0 0 10px;
  cursor: pointer;
  box-shadow: none;
}

.searchWrap .uiForm input.uiFormBtn.left {
  float: left;
}

.inlineFormWrap input.uiFormBtn {
  margin: 0;
  cursor: pointer;
  box-shadow: none;
}

/* echte tabelle */

.uiDataTable tr.color2 td {
  background-color: #fff;
}

.uiDataTable tr.color1 td {
  background-color: #f9f9f9;
}

.uiDataTable.striped tr:nth-of-type(2n) {
  background-color: #f5f5f5;
}

.uiDataTable td,
.uiDataTable th {
  vertical-align: top;
}

.uiDataTable th {
  background-color: #d8d8d8;

  background-image: -webkit-linear-gradient(#f5f5f5 0%, #d8d8d8 100%);
  background-image: -moz-linear-gradient(#f5f5f5 0%, #d8d8d8 100%);
  background-image: -o-linear-gradient(#f5f5f5 0%, #d8d8d8 100%);
  background-image: linear-gradient(#f5f5f5 0%, #d8d8d8 100%);
}

.uiDataTable th a,
.uiDataTable th a:link {
  font-weight: bold;
}

.uiDataTable th a:hover,
.uiDataTable th a:focus {
  font-weight: bold;
}

/*
.uiDataTable tr:hover td
{
   background-color: #f0f0f0;
}*/

.uiDataTable,
.uiDataTable td,
.uiDataTable th {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;

  border-left: 1px solid #f3f3f3;
  border-right: 1px solid #f3f3f3;

  border-collapse: collapse;
}

.uiDataTable th {
  padding: 7px 10px 8px 10px;
}

.uiDataTable td {
  padding: 10px;
}

.uiDataTable.smallListTable th,
.uiTable.smallListTable div.th {
  padding: 5px;
  font-size: 11px;
}

.uiDataTable.smallListTable td,
.uiTable.smallListTable div.td {
  padding: 5px;
  font-size: 11px;
}

.uiDataTable td.nopadding,
.uiDataTable th.nopadding {
  padding: 5px;
}

/* ICONS */

a.icoText,
span.icoText {
  padding-left: 22px;
  line-height: 16px;
  padding-right: 5px;
  display: inline-block;
  height: 18px;
  color: #808080;
  text-decoration: none;
}

a.icoText:link,
a.icoText:visited {
  text-decoration: none;
}

a.icoText.underline {
  text-decoration: underline;
}

a.icoText:hover {
  color: #000;
  text-decoration: underline;
}

.icoText.add-soft {
  background: url(img/accept-soft.png) 0 0 no-repeat transparent;
}

.icoText.insert {
  background: url(img/page_white_go.png) 0 0 no-repeat transparent;
}

.icoText.add {
  background: url(img/add.png) 0 0 no-repeat transparent;
}

.icoText.edit {
  background: url(img/page_white_edit.png) 0 0 no-repeat transparent;
}

.icoText.shedule {
  background: url(img/calendar_add.png) 0 0 no-repeat transparent;
}

.icoText.delete {
  background: url(img/delete.png) 0 0 no-repeat transparent;
}

.icoText.folder {
  background: url(img/folder.png) 0 0 no-repeat transparent;
}

.icoText.added,
.icoText.done {
  background: url(img/accept.png) 0 0 no-repeat transparent;
}

.icoText.removed {
  background: url(img/delete.png) 0 0 no-repeat transparent;
}

.icoText.mail {
  background: url(img/email.png) 0 0 no-repeat transparent;
}

.icoText.user {
  background: url(img/user.png) 0 0 no-repeat transparent;
}

.icoText.bauleiter {
  background: url(img/user_gray.png) 0 0 no-repeat transparent;
}

.icoText.group {
  background: url(img/folder_user.png) 0 0 no-repeat transparent;
}

.icoText.info {
  background: url(img/information.png) 0 0 no-repeat transparent;
}

/* status */

.icoText.warning,
.ico.warning {
  background: url(img/warning.png) 0 0 no-repeat transparent;
}

.icoText.error {
  background: url(img/exclamation.png) 0 0 no-repeat transparent;
}

.icoText.success,
.ico.success {
  background: url(img/accept.png) 0 0 no-repeat transparent;
}

a.icoText.addgroup {
  background: url(img/folder_user.png) 0 0 no-repeat transparent;
}

a.icoText.adduser {
  background: url(img/user_add.png) 0 0 no-repeat transparent;
}

a.icoText.equipment,
a.ico.equipment {
  background: url(img/cog.png) 0 0 no-repeat transparent;
}

.icoText.lv,
.ico.lv,
.icoText.details {
  background: url(img/bullet_go.png) 0 0 no-repeat transparent;
}

.icoText.comment-off,
.ico.comment-off {
  background: url(img/comment_off.png) 0 0 no-repeat transparent;
}

.icoText.comment-on,
.ico.comment-on {
  background: url(img/error.png) 0 0 no-repeat transparent;
}

/* MINI ICONS */

a.ico {
  display: block;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  line-height: 1px;
}

a.icolink {
  padding: 0 0 0 20px;
}

a.ico.add {
  background: url(img/add.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.refresh {
  background: url(img/arrow_refresh_small.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.print {
  background: url(img/printer.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.delete,
a.icolink.delete {
  background: url(img/delete.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.stop {
  background: url(img/stop.png) 0 0 no-repeat transparent;
}

a.ico.up {
  background: url(img/arrow_up.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.down {
  background: url(img/arrow_down.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.change {
  background: url(img/arrow_switch.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.addgroup {
  background: url(img/folder_user.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.adduser {
  background: url(img/user_add.png) 0 0 no-repeat transparent;
  margin: 1px 0 0 0;
}

a.ico.toggleplus {
  background: url(img/bullet_toggle_plus.png) 0 2px no-repeat transparent;
}

a.ico.toggleplus.show {
  background: url(img/bullet_toggle_minus.png) 0 2px no-repeat transparent;
}

a.ico.toggleminus {
  background: url(img/bullet_toggle_minus.png) 0 2px no-repeat transparent;
}

a.ico.select,
a.icoText.select {
  background: url(img/checkbox-off-16px.png) 0 0 no-repeat transparent;
}

a.ico.subselect {
  background: url(img/tick.png) 0 0 no-repeat transparent;
}

a.ico.select.selected,
a.icoText.select.selected {
  background: url(img/checkbox-on-16px.png) 0 0 no-repeat transparent;
}

a.ico.select.cross {
  background: url(img/checkbox-cross.png) 0 0 no-repeat transparent;
}

a.ico.time {
  background: url(img/time.png) 0 0 no-repeat transparent;
}

a.ico.notime {
  background: url(img/clock_delete.png) 0 0 no-repeat transparent;
}

a.ico.show-off,
a.icoText.show-off {
  background: url(img/hide.png) 0 0 no-repeat transparent;
}

a.ico.show-on,
a.icoText.show-on {
  background: url(img/eye.png) 0 0 no-repeat transparent;
}

a.ico.confirmed {
  background: url(img/accept.png) 0 0 no-repeat transparent;
}

a.ico.reset {
  background: url(img/error.png) 0 0 no-repeat transparent;
}

a.ico.not-printed {
  background: url(img/not-printed.png) 0 0 no-repeat transparent;
}

a.ico.printed {
  background: url(img/printed.png) 0 0 no-repeat transparent;
}

a.ico.note {
  background: url(img/comment.png) 0 0 no-repeat transparent;
}

a.ico.edit {
  background: url(img/edit.png) 0 0 no-repeat transparent;
}

a.ico.confirmed {
  background: url(img/accept.png) 0 0 no-repeat transparent;
}

a.ico.reset {
  background: url(img/error.png) 0 0 no-repeat transparent;
}

a.ico.not-printed {
  background: url(img/not-printed.png) 0 0 no-repeat transparent;
}

a.ico.printed {
  background: url(img/printed.png) 0 0 no-repeat transparent;
}

.infobox {
  background-color: #fff;
  position: absolute;

  top: 0;
  left: 0;
  width: 450px;

  text-align: left;
  font-size: 80%;

  -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);

  border-radius: 5px;
  overflow: hidden;
}

.infobox.bg {
  background-color: #f6f7f9;
}

.infobox-content {
  padding: 20px;
  overflow: auto;
  line-height: 130%;
}

.infobox-content-padding {
  padding: 40px;
}

.infobox-header {
  height: 40px;
  cursor: move;
  font-size: 120%;
  color: #777;
  font-weight: normal;
  line-height: 40px;
  padding: 0 0 0 20px;
  vertical-align: middle;
  text-transform: uppercase;

  background-color: #eeeeee;
  border-bottom: 1px solid #dcdfe4;
}

.infobox-close {
  height: 20px;
  width: 20px;
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  text-align: left;
  cursor: pointer;
  color: #777;
}

a.infobox-close i,
a.infobox-close:link i {
  color: #777;
  font-size: 22px;
}

.infobox h2.infobox-title {
  padding: 0 0 0 0;
  margin: 0 0 10px 0;
}

.infobox-adminnavi {
  clear: both;
  height: 30px;
  border-top: 1px solid #cecec8;
  padding: 10px 0 0 10px;
  background-color: #e6e6e1;
}

.infobox-adminnavi li {
  float: left;
  margin: 0 20px 0 0;
}

/* DD LIST */

dl.mod-datalist {
  display: block;
  margin: 0 0 10px 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.mod-datalist dt {
  clear: left;
  color: #808080;
  float: left;
  overflow: hidden;
  padding: 2px 0;
  white-space: nowrap;
  width: 115px;
  line-height: 140%;
}

.mod-datalist.small dt {
  width: 60px;
}

.mod-datalist dd {
  margin: 0;
  overflow: hidden;
  padding: 2px 0;
  color: #000;
  line-height: 140%;
}

.mod-datalist dd a:link,
.mod-datalist dd a:visited {
  text-decoration: underline;
}

/* spalten */

.colWrap {
  margin-right: -10px;
  margin-left: -10px;
}

div.trenner {
  border-bottom: 1px solid #ddd;

  margin-top: 10px;
  margin-bottom: 20px;
  height: 1px;
  content: '';
  clear: both;
}

div.trenner.dashed {
  border-bottom: 1px dashed #ddd;
}

div.rightTrenner {
  border-left: 1px dashed #ddd;
  content: '';
  padding-left: 20px;
}

div.mh100 {
  min-height: 100px;
}

div.mh200 {
  min-height: 200px;
}

.colWrap:after {
  content: '';
  display: table;
  clear: both;
}

.colWrap::after {
  clear: both;
}

.bgWrap {
  background-color: #fff;
  overflow: hidden;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.col-12 {
  width: 100%;
}

.col-11 {
  width: 91.66666667%;
}

.col-10 {
  width: 83.33333333%;
}

.col-9 {
  width: 75%;
}

.col-8 {
  width: 66.66666667%;
}

.col-7 {
  width: 58.33333333%;
}

.col-6 {
  width: 50%;
}

.col-5 {
  width: 41.66666667%;
}

.col-4 {
  width: 33.33333333%;
}

.col-3 {
  width: 25%;
}

.col-2 {
  width: 16.66666667%;
}

.col-1 {
  width: 8.33333333%;
}

.dummy {
  content: '&amp;';
  color: #fff;
}

.strong {
  font-weight: bold;
}

.tb {
  border-bottom: 1px solid #efefef;
}

/* mobile ansicht */

@media only screen and (max-width: 1200px) {
  .nomobile1200 {
    display: none;
  }
}

@media only screen and (max-width: 1000px) {
  .colWrap div.mobile1000 {
    float: none;
    width: 100%;
    margin-bottom: 40px;
  }

  .nomobile1000 {
    display: none;
  }

  .flatmobile1000 {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
}

@media only screen and (max-width: 800px) {
  .colWrap div.mobile800 {
    float: none;
    width: 100%;
    margin-bottom: 40px;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
  }

  .nomobile800 {
    display: none !important;
  }

  .mobile800mt20 {
    margin-top: 20px;
  }

  .mobile800mb20 {
    margin-bottom: 20px;
  }

  .flatmobile800 {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }

  .clearfloat800 {
    float: none;
  }
}

@media only screen and (max-width: 600px) {
  .colWrap div.mobile600 {
    float: none;
    width: 100%;
    /*margin-bottom: 40px;*/
  }

  .mobile600mt20 {
    margin-top: 20px;
  }

  .mobile600mt10 {
    margin-top: 10px;
  }

  .mobile600mb20 {
    margin-bottom: 20px;
  }

  .nomobile600 {
    display: none;
  }

  .flatmobile600 {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
}

@media only screen and (max-width: 400px) {
  .colWrap div.mobile400 {
    float: none;
    width: 100%;
    margin-bottom: 40px;
  }

  .nomobile400 {
    display: none;
  }

  .flatmobile400 {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* neue tabellen */

.uiSmartTable {
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.uiSmartTable.m-0 {
  margin-bottom: 0;
}

.uiSmartTable.bordered th {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.uiSmartTable.bordered td {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.uiSmartTable.bordered tr:last-child td {
  border-bottom: 1px solid #ddd;
}

.uiSmartTable tr {
  background-color: #fff;
}

.uiSmartTable.border-box td,
.uiSmartTable.border-box th {
  box-sizing: border-box;
}

.uiSmartTable.striped tr th {
  background-color: #fff;
}

.uiSmartTable.striped tr:nth-child(even) {
  background-color: #fafafa;
}

.uiSmartTable.lined tr td {
  border-bottom: 1px solid #e0e0e0;
}

.uiSmartTable tr th {
  color: #777;
  font-size: 13px;
  border-bottom: 3px solid #e3e3e3;
  text-align: left;
  padding: 8px;
}

.uiSmartTable tr td {
  padding: 8px 6px;
  line-height: 100%;
  color: #444;
  vertical-align: middle;
  border-top: 1px solid #ececec;
  font-size: 13px;
  text-align: left;
}

.uiSmartTable tr td.text-center {
    text-align: center;
}

.uiSmartTable.textTop tr td {
  vertical-align: top;
}

.uiSmartTable.noborder tr td {
  border-top: 0;
}

.uiSmartTable.paddingMobile tr td {
  padding: 8px 6px;
}

.uiSmartTable.highlight tr:hover td {
  background-color: #eee;
}

.uiSmartTable tr.darkBg td,
.uiSmartTable tr.darkBg th {
  background-color: #eee;
}

.uiSmartTable.highlight tr:hover.darkBg td {
  background-color: #e3e3e3;
}

.uiSmartTable.darkHeader {
  border-collapse: collapse;
}

.uiSmartTable.darkHeader tr:last-child td {
  border-bottom: 5px solid #888;
}

.uiSmartTable tr td.textRight,
.uiSmartTable tr th.textRight {
  text-align: right;
}

.uiSmartTable tr td.textCenter,
.uiSmartTable tr th.textCenter {
  text-align: center;
}

.uiSmartTable tr td.p-0 {
  padding: 0;
}

.uiSmartTable tr:first-child td {
  border-top: 0;
}

.uiSmartTable tr td.align-center,
.uiSmartTable tr th.align-center {
  text-align: center;
}

.uiSmartTable th a,
.uiSmartTable th a:link {
  font-weight: bold;
}

.uiSmartTable th a:hover,
.uiSmartTable th a:focus {
  font-weight: bold;
}

.uiSmartTable td.width200 .text-overflow {
  width: 200px;
}

.uiSmartTable td.width300 .text-overflow {
  width: 300px;
}

.uiSmartTable.compactTable th,
.uiSmartTable.compactTable td {
  font-size: 11px;
  padding: 5px;
  height: 16px;
}

table.uiSmartTable tr.borderTop td {
  border-top: 2px solid #bfbfbf;
}

@media only screen and (max-width: 900px) {
  .tableWrap {
    overflow-x: auto;
  }

  .tableWrap table.uiSmartTable,
  .tableWrap > div {
    min-width: 900px;
  }

  /* .tableWrap.minWidth800 table.uiSmartTable, .tableWrap.minWidth00 > div {

        min-width: 0;
    } */
}

/* ##################### */

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

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

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

td.redCorner,
.td.redCorner {
  background-image: url(img/tderror.png);
  background-position: right bottom;
  background-repeat: no-repeat;
}

td.orangeCorner,
.td.orangeCorner {
  background-image: url(img/tdorange.png);
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* klappbare divs mit mehrfachauswahl in der suche */

.checkboxWrap {
  margin-bottom: 0;
  height: 30px;
  line-height: 28px;
  border: 1px solid #c0c0c0;
  background-color: #fff;
  border-radius: 2px;
  font-size: 13px;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

.showRelDivWrap {
  float: left;
  position: relative;
  vertical-align: top;
  margin-right: 10px;
}

.uiSelect {
  box-sizing: border-box;
  width: 150px;
  margin-bottom: 0;
  /*height: 30px;*/
  line-height: 28px;
  border: 1px solid #c0c0c0;
  /*background-color: #f3f3f3;*/
  border-radius: 5px;
  font-size: 13px;
  padding: 0 10px;
  cursor: pointer;
}

.uiSelectWrap .uiSelect {
  border: 0 !important;
}

.uiSelectItem {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uiSelectItem input {
  position: absolute;
  top: 3px;
  left: 0;
}

.uiSelectItem label {
  padding-left: 20px;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
}

.uiForm.widthForm .showRelDivWrap {
  float: none;
}

.uiForm.widthForm .uiSelect {
  width: 100%;
  background-color: #fff;
  background-image: url(../../images/arrow-down.png);
  background-repeat: no-repeat;
  background-position: top right;
}

.uiSelectRelDiv {
  position: absolute;
  max-width: 250px;
  min-width: 150px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  font-size: 13px;
  background-color: #fff;
  color: #000;
  padding: 10px;

  top: 35px;
  left: 0;
  display: none;
  z-index: 1100;

  max-height: 350px;
  overflow: auto;
}

.uiSelectRelDiv.wider {
  width: 350px;
}

.uiSelectRelDiv .input-wrap {
  float: none !important;
}

/* fa icons */

.faIco {
  display: inline-block;
  vertical-align: middle;
  color: #777;
}

.faIco i {
  background-color: transparent !important;
}

a.faIco.underline {
  text-decoration: underline;
}

ul.icoBigWrap {
  overflow: hidden;
  float: right;
}

ul.icoBigWrap li {
  display: inline-block;
  margin-right: 5px;
}

a.faIcoBig {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: #777;
  display: inline-block;
  height: 28px;
  width: 28px;
  border: 1px solid #dadada;
  border-radius: 2px;
  margin-left: 5px;
  background-color: #fff;
}

a.faIcoBig:hover {
  background-color: #f0f0f0;
}

.faIcoBig i {
  color: #c0c0c0;
  font-size: 18px;
  text-shadow: 1px 1px #fff;
  line-height: 28px;
}

.faIcoBig i.font20 {
  font-size: 20px;
}

a.hoverRed:hover > i {
  color: #de0000;
}

.faInlineLink,
.faInlineLink:link,
.faInlineLink:visited {
  display: inline-block;
  vertical-align: middle;
  color: #777;
  text-decoration: none;
}

.faInlineLink:hover,
.faInlineLink:focus {
  color: #333;
  text-decoration: none;
}

.faIco,
.faIco:link,
.faIco:visited {
  text-decoration: none;
  color: #777;
}

a.faIco:hover {
  color: #000;
}

.faIco i {
  margin-right: 5px;
  color: var(--color-neutral-400);
  font-size: var(--text-base);
  /*font-size: 15px;*/
  line-height: var(--text-base);
}

.faIco i.me-0 {
    margin-right: 0;
}

.faIco i.right {
  margin-left: 5px;
  margin-right: 0;
  vertical-align: bottom;
  display: inline-block;
  margin-top: 3px;
}

.faIco i.p-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.faIco i.font22,
.font22 {
  font-size: 22px;
  line-height: 22px;
}

.faIco i.font24 {
  font-size: 24px;
  line-height: 24px;
}

.faIco i.font32 {
  font-size: 32px;
  line-height: 32px;
}

.faIco i.font20,
.font20 {
  font-size: 20px;
  line-height: 20px;
}

.faIco span.font20 {
  vertical-align: top;
  line-height: 22px;
}

.faIco i.font18,
i.font18 {
  font-size: 18px;
}

.faIco i.font16,
i.font16 {
  font-size: 16px;
}

.faIco i.font14,
.uiFormBtn i.font14,
i.font14 {
  font-size: 14px;
}

.faIco i.font13,
.uiFormBtn i.font13,
i.font13 {
  font-size: 13px;
}

.faIco i.font12,
.uiFormBtn i.font12,
i.font12 {
  font-size: 12px;
}

.faIco i.font11,
.uiFormBtn i.font11,
i.font11 {
  font-size: 11px;
}

.faIco i.font10 {
  font-size: 10px;
}

.faIco i.orange,
i.fa.orange {
  color: #f19031;
}

.faIco i.green,
i.fa.green,
.faIcoBig i.green {
  color: #51a630;
}

.faIco:hover > i.hoverGreen,
.faIcoBig:hover > i.hoverGreen {
  color: #51a630;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.faIco:hover > i.hoverBlue,
.faIcoBig:hover > i.hoverBlue {
  color: #648eb8;
}

.faIco i.red,
i.fa.red,
.faIcoBig i.red {
  color: #de0000;
}

.faIco i.lgray,
i.fa.lgray,
.faIcoBig i.lgray {
  color: rgb(228, 228, 228);
}

.faIco i.dgray,
i.fa.dgray,
.faIcoBig i.dgray,
span.dgray {
  color: rgb(129, 129, 129);
}

.faIco:hover > i.hoverRed,
.faIcoBig:hover > i.hoverRed {
  color: #de0000;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.faIco:hover > i.hoverOrange,
.faIcoBig:hover > i.hoverOrange {
  color: #de5900;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.faIco:hover > i.hoverGray,
.faIcoBig:hover > i.hoverGray {
  color: #444;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.faIco:hover i.hoverBlack {
  color: #000;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.faIco i.grey,
i.fa.grey {
  color: #ddd;
}

.faIco i.black,
i.fa.black {
  color: #444;
}

.faIco i.white,
i.fa.white {
  color: #fff;
}

.faIco i.blau,
i.fa.blau,
.faIcoBig i.blau,
.faIco i.blue,
i.fa.blue,
.faIcoBig i.blue {
  color: #648eb8;
}

.faIco i.yellow,
i.fa.yellow {
  color: #f2c200;
}

.textColorRed {
  color: #ff0000 !important;
}

.textColorOrange {
  color: #df970e !important;
}

.textColorGreen {
  color: #51a630 !important;
}

.textColorBlue {
  color: #648eb8 !important;
}

.textColorGray {
  color: #808080 !important;
}

.textColorBlack {
  color: #333 !important;
}

.textColorLgray {
  color: #bdbdbd !important;
}

.textMiddle {
  vertical-align: middle !important;
}

.textTop {
  vertical-align: top !important;
}

.textBottom {
  vertical-align: bottom;
}

.gotoRelUrl,
.loadDataOnClick,
.getUrlOnClick,
.toggleOnClick,
.cursorPointer,
.cursor {
  cursor: pointer;
}

/* UL Navigation mit Infodaten über dem Formular im Abwesenheitsplaner */

ul.uiInlineInfo {
  min-height: 40px;
  margin-bottom: 20px;
  overflow: hidden;
}

ul.uiInlineInfo li {
  float: left;
  padding-right: 20px;
}

/* klappbare Panels */

.uiPanelWrap {
  border: 1px solid #ddd;
}

.uiPanelHeader {
  background-color: #f5f6f8;
  padding: 10px 15px;
  border-radius: 2px;
}

.uiPanelHeader h2 {
  font-weight: bold;
  font-size: 14px;
  color: #777;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #fff;
}

.uiPanelContent {
  padding: 15px;
}

.uiContentBox.hidden {
  display: none;
}

.showHeaderOnScroll {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2000;
}

.staticHeader {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  position: -webkit-sticky;
}

.staticHeader.sub {
  z-index: 1001;
}

/* datepicker korrektur z-index */

#ui-datepicker-div {
  z-index: 1400 !important;
}

.bgWhite {
  background-color: #fff;
}

.bgGray {
  background-color: #f6f7f9;
}

.bgSelected {
  background-color: #fdf2c1 !important;
}

.uiSmallText {
  font-size: 80%;
  color: #808080;
}

/* klappbare Action-Buttons */

.actWrap {
  position: relative;
}

.actWrap.rightFixed {
  position: absolute;
  top: 20px;
  right: 20px;
}

.actHeader {
  color: #666;
  height: 30px;
  line-height: 30px;
  min-width: 120px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  vertical-align: middle;

  cursor: pointer;
  background-color: #fff;
  border: 1px solid #818181;
  border-radius: 3px;

  font-size: 12px;
  padding: 0 10px;

  display: inline-block;
  text-decoration: none;
}

.actHeader:hover,
.actHeader:focus {
  color: #333;
  background-color: #e3e3e3;
}

.actHeader i {
  color: #c0c0c0;
  font-size: 16px;
  margin-left: 7px;
  display: inline-block;
  vertical-align: top;
  line-height: 28px;
}

.actBody {
  position: absolute;
  left: 0;
  top: 32px;
  padding: 0.75rem;
  background-color: #fff;
  border: 1px solid #c0c0c0;
  display: none;
  z-index: 1200;
  min-width: 11rem;

  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);

  border-radius: 3px;
}

.actBody.menue {
  top: 25px;
  min-width: 120px;
}

.actBody.rightPos {
  right: 0;
  left: auto;
}

.actBody.slideTop {
  bottom: 35px;
  top: auto;
}

.actBody li {
  padding: 0;
  border-bottom: 1px solid #e3e3e3;
  text-align: left;
}

.actBody li a,
.actBody li span {
  white-space: nowrap;
  padding: 7px 10px;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.actBody li:hover {
  background-color: rgb(234, 234, 234) !important;
}

.actBody li a i,
.actBody li span i {
  color: #a3a3a3;
  font-size: 16px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: top;
  line-height: 100%;
  width: 20px;
  text-align: center;
}

.actWrap .removeOnClick,
.actWrap .toggleOnClick,
.hideOnClick {
  padding: 2px 0;
  text-align: right;
  display: block;
  cursor: pointer;
}

.actBody li a i.red,
.actBody li span i.red {
  color: #de0000;
}

.actBody li a i.grey {
  color: #ddd;
}

.actBody li a i.black {
  color: #000;
}

.actBody li a i.blau,
.actBody li a.selected i {
  color: #648eb8;
}

.actBody li a i.green {
  color: #51a630;
}

.actBody li a i.yellow {
  color: #f2c200;
}

.actBody li a.selected,
.actBody li span.selected {
  background-color: #deefff;
}

/* neue schlanke Buttons */

a.uiCleanBtn,
a.uiCleanBtn:link,
a.uiCleanBtn:active,
a.uiCleanBtn:visited {
  color: #333;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  vertical-align: middle;

  cursor: pointer;
  /*background-color: #fff;*/
  border: 1px solid #808080;
  border-radius: 2px;

  font-size: 12px;
  padding: 0 10px;

  display: inline-block;
  text-decoration: none;

  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

a.uiCleanBtn:hover,
a.uiCleanBtn:focus {
  font-weight: bold;
  /*background-color: #f3f3f3;*/
}

a.uiCleanBtn i {
  color: #808080;
  font-size: 16px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: top;
  line-height: 28px;
}

a.uiCleanBtn.noborder {
  height: 30px;
  line-height: 30px;
  /*background-color: #fff;*/
  border: 0;
  border-radius: 0;
  padding: 0;
}

a.uiCleanBtn.inline {
  height: auto;
  line-height: 120%;
  border: 0;
  border-radius: 0;
  padding: 0;
}

a.uiCleanBtn.inline i {
  color: #808080;
  font-size: 16px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
  line-height: 100%;
}

/* ORDER Nagigation c_static_order.php */

.uiOrderLinksWrap {
  margin-left: 5px;
}

.uiOrderLinksWrap a i {
  margin-right: 2px;
  color: #c0c0c0;
  font-size: 14px;
  text-shadow: 1px 1px #fff;
}

.uiOrderLinksWrap a i.selected {
  color: #de0000;
}

/* uiHgBox */

.uiHgBox {
  border: 1px solid #e3e3e3;
  padding: 15px;
  background-color: #fefefe;
  margin: 0 0 20px 0;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.uiHgBox p.block,
.uiContentBox .block {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 8px;
  margin-bottom: 8px;
  color: #666;
  line-height: 140%;
}

.uiContentBox .splitBlock {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 8px;
  margin-bottom: 8px;
  display: block;
  color: #666;
  line-height: 140%;
}

.uiHgBox .block strong,
.uiContentBox .block strong {
  display: block;
}

.uiHgBox .block:last-child,
.uiContentBox .block:last-child,
.uiContentBox .splitBlock:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.icoBox {
  min-height: 40px;
  position: relative;
}

.icoBox .icoBoxContent {
  display: block;
  float: left;
}

.icoBox .icoBoxContent strong {
  display: block;
}

.icoBox .icoBoxContent .note {
  font-size: 11px;
}

.icoBox i {
  width: 40px;
  height: 40px;
  float: left;
  font-size: 35px;
}

/* 22.10.2020 */

.notificationWrap {
  width: 300px;
  position: fixed;
  top: 50px;
  right: 40px;
  z-index: 1400;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.notification {
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  width: 100%;
  padding: 15px 20px 15px 15px;
  margin-bottom: 8px;
  display: block;
  line-height: 130%;
  font-size: 14px;
  text-align: left;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
}

.notification-timer {
  height: 5px;
  width: 100%;
  background-color: #da1b2f;
  position: absolute;
  left: 0;
  bottom: 0;
}

.notification.green,
.notification.erfolg,
.notification.success {
  background-color: #d3ecd8;
  border: 1px solid #bce2c5;
  color: #145f25;
}

.notification.green .notification-timer,
.notification.erfolg .notification-timer,
.notification.success .notification-timer {
  background-color: #32ac32;
}

.notification.info,
.notification.alert-info {
  background-color: #cff4fc;
  border: 1px solid #b6effb;
  color: #055160;
}

.notification.info .notification-timer,
.notification.alert-info .notification-timer {
  background-color: #2ea3d0;
}

.notification.yellow,
.notification.warning {
  background-color: #fff3cd;
  border: 1px solid #ffecb5;
  color: #664d03;
}

.notification.yellow .notification-timer,
.notification.warning .notification-timer {
  background-color: #e8b50e;
}

.notification-close {
  color: #333;
  position: absolute;
  top: 10px;
  right: 10px;
}

.notification-close i {
  color: #333;
}

.notification-content {
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
  vertical-align: middle;
}

.notification-header {
  font-weight: 700;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
  padding-bottom: 0;
  /*margin-left: 38px;*/
}

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

.ui-tab-navi-wrap {
  position: relative;
  height: 40px;
}

ul.ui-tab-navi {
  box-sizing: border-box;
  position: relative;
}

.ui-tab-navi-wrap ul.ui-tab-navi {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1200;
}

ul.ui-tab-navi > li {
  float: left;
  margin-bottom: -1px;
  box-sizing: border-box;
}

ul.ui-tab-navi::after {
  clear: both;
  content: ' ';
  display: table;
}

ul.ui-tab-navi > li > a {
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
  border-bottom-color: transparent !important;
  text-decoration: none;
  text-align: center;
  min-width: 100px;
  color: #999;
  font-weight: 600;
}

ul.ui-tab-navi > li > a:link,
ul.ui-tab-navi > li > a:visited,
ul.ui-tab-navi > li > a:hover {
  text-decoration: none;
}

ul.ui-tab-navi > li > a:hover {
  color: #555;
}

ul.ui-tab-navi > li.active > a {
  border-radius: 3px;
  padding: 10px 15px;

  color: #555;
  cursor: default;
  background-color: #fff;

  border: 1px solid #ddd;
  border-bottom-color: transparent !important;
}

.fade {
  opacity: 0;
}

.uiSortable li {
  padding: 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  line-height: 22px;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  border-bottom: 1px solid #e3e3e3;
}

.uiSortable li:hover {
  background-color: #f5f6f8;
}

.uiSortable .uiSortableHandle:hover,
.uiSortable .uiSortableHandle {
  cursor: move;
}

/* 20210212 */

.overlay {
  font-size: 80%;
  min-height: 200px;
  position: absolute;
  z-index: 1400;
  background-color: #f6f7f9;

  overflow: hidden;

  width: 90%;
  height: 94%;
  top: 3%;
  left: 5%;
  box-sizing: border-box;
  border-radius: 3px;

  -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);

  padding-top: 40px;

  animation-name: windowCenterMove;
  animation-duration: 0.2s;
}

.overlay.noheader {
  padding-top: 0;
}

/* blockUi */
.overlay-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1501;
  background-color: #000;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;

  animation-name: blockUIMove;
  animation-duration: 0.2s;
}

.overlay-content {
  height: 100%;
  padding: 20px;
  overflow: auto;
  text-align: left;
  position: relative;
  box-sizing: border-box;
}

.overlay.windowRight {
  position: fixed;
  text-align: left;
  top: 0;
  right: 0;
  left: auto;
  max-width: 800px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: -5px 0 5px 1px rgb(107, 107, 107, 0.3);
  border-radius: 0;
  animation-name: windowRightMove;
  animation-duration: 0.2s;
}

.overlay.windowLeft {
  position: fixed;
  text-align: left;
  top: 0;
  left: 0;
  left: auto;
  max-width: 800px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: -5px 0 5px 1px rgb(107, 107, 107, 0.3);
  border-radius: 0;
  animation-name: windowLeftMove;
  animation-duration: 0.2s;
}

/* The animation code */
@keyframes windowRightMove {
  0% {
    right: -20px;
  }
}

/* The animation code */
@keyframes windowLeftMove {
  0% {
    left: -20px;
  }
}

/* The animation code */
@keyframes blockUIMove {
  0% {
    opacity: 0;
  }
}

@keyframes windowCenterMove {
  0% {
    opacity: 0;
  }
}

.overlay.windowRight.w-1 {
  max-width: 200px;
}

.overlay.windowRight.w-2 {
  max-width: 400px;
}

.overlay.windowRight.w-3 {
  max-width: 600px;
}

.overlay.windowRight.w-35 {
    max-width: 700px;
}

.overlay.windowRight.w-4 {
  max-width: 800px;
}

.overlay.windowRight.w-5 {
  max-width: 1000px;
}

.overlay.mobile .overlay-content {
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}

.overlay.small .overlay-content {
  left: 25%;
  width: 50%;
  height: 70%;
  top: 15%;
  text-align: center;
}

.overlay.windowCenter .overlay-inside {
  width: 800px;
  min-height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px;
  margin: 0 auto;
}

.overlay-header {
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
  min-height: 40px;
  text-align: left;
}

.overlay-content h3.uiSubHeader {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 400;
  color: #777;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.overlay-close {
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 1503;
  width: 25px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
}

.overlay-move {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 1503;
  width: 25px;
  cursor: move;
  box-sizing: border-box;
  padding: 0;
}

.overlay-reload {
  position: absolute;
  top: 15px;
  right: 40px;
  z-index: 1503;
  width: 25px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
}

.overlay-close i {
  font-size: 25px;
  line-height: 20px;
  color: #808080;
}

.overlay-reload i,
.overlay-move i {
  font-size: 20px;
  line-height: 20px;
  color: #dfdfdf;
}

.overlay-close:hover i {
  color: #000;
}

.overlay-reload:hover i,
.overlay-move:hover i {
  color: #808080;
}

@media only screen and (max-width: 1024px) {
  .overlay.windowCenter .overlay-content {
    padding: 20px;
  }

  .overlay.windowCenter .overlay-inside {
    width: 100%;
  }

  .overlay {
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 0;
  }
}

@media only screen and (max-width: 800px) {
  .overlay {
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 0;
  }

  .overlay .overlay-content {
    padding: 20px;
  }

  .overlay .overlay-close {
    right: 10px;
  }

  .overlay.windowRight {
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    max-width: 100%;
  }

  .overlay.windowRight.w-1 {
    max-width: 50%;
  }

  .overlay.windowRight.w-2 {
    max-width: 70%;
  }

  .overlay.windowRight.w-3 {
    max-width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .overlay.windowRight,
  .overlay.windowRight.w-2,
  .overlay.windowRight.w-3,
  .overlay.windowRight.w-1 {
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    max-width: 100%;
    border-radius: 0;
  }
}

/* CONTEXTMENUE */

.contextMenuWrapInline {
  display: none;
}

.contextMenuWrap,
.contextMenuWrapInline {
  width: 170px;
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: 10px;
  z-index: 1200;
  min-width: 150px;
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.contextmenu {
  position: relative;
}

.contextMenuInner {
  padding: 5px;
  color: #444;
  font-size: 12px;
  cursor: auto;
}

.contextMenuInner li {
  padding: 0 0;
  margin-bottom: 2px;
}

.contextMenuInner li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.contextMenuInner li a {
  display: block;
  line-height: 30px;
  text-align: left;
  color: #444;
  padding-left: 10px;
  background-color: #fff;
  border: 1px solid #fff;
}

.contextMenuInner li a > i {
  vertical-align: middle;
}

.contextMenuInner li a:link,
.contextMenuInner li a:visited,
.contextMenuInner li a:hover {
  color: #444;
}

.contextMenuInner li a:hover {
  background-color: #f3f3f3;
  border: 1px solid #e3e3e3;
}

/* pseudo select */

.uiSelectWrap {
  display: block;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 13px;
  margin: 0;
  background-color: #fff;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #c0c0c0;
  max-width: 100%;
  width: 100%;
}

.uiSelectTitle {
  padding: 5px 10px;
  box-sizing: border-box;
  display: block;
  cursor: pointer;

  background-image: url(../../images/arrow-down.png);
  background-repeat: no-repeat;
  background-position: top right;
}

.uiSelectList {
  box-sizing: border-box;
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #f0f0f0;
  padding: 5px;
  z-index: 1200;
  min-width: 150px;
  width: 100%;

  border: 1px solid #c0c0c0;

  border-radius: 2px;
}

.uiSelectList li {
  background-color: #fff;
  margin-bottom: 2px;
  font-style: normal;
  color: #444;
  border: 1px solid #fff;
}

.uiSelectList li a {
  display: block;
  padding: 5px 10px;
}

.uiSelectList li:hover {
  background-color: #f3f3f3;
  border: 1px solid #e3e3e3;
}

/* INLINE PULL DOWN */

.pullDownWrap {
  display: block;
  position: relative;
  min-height: 20px;
}

.pullDownIco,
.faIco .pullDownIco {
  position: absolute;
  top: 2px;
  right: 0;
  display: none;
}

.pullDownWrap:hover .pullDownIco,
.pullDownParentWrap:hover .pullDownIco,
.pullDownIco:hover {
  display: block;
}

.InlinePullDown,
.togglePullDown {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: 5px;
  z-index: 1200;
  min-width: 180px;

  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);

  border-radius: 2px;
}

.InlinePullDown.right {
  right: 0;
  left: auto;
}

.InlinePullDown ul li {
  text-align: left;
}

.InlinePullDown ul li.jslink,
.InlinePullDown ul li.js,
.InlinePullDown ul li.jsp,
.togglePullDown ul li {
  background-color: #fff;
  margin-bottom: 2px;
  padding: 5px 10px;
  font-style: normal;
  color: #444;
  border: 1px solid #fff;
  text-align: left;
}

.InlinePullDown ul li.jslink:hover,
.InlinePullDown ul li.js:hover,
.InlinePullDown ul li.jsp:hover,
.togglePullDown ul li:not(.isDisabled):hover {
  background-color: #f3f3f3;
  border: 1px solid #e3e3e3;
}

.togglePullDown ul li a {
  display: block;
}

.togglePullDown ul li a.isDisabled {
}

.InlinePullDown ul li:last-child {
  padding: 2px 5px;
  text-align: right;
}

.jslink {
  cursor: pointer;
}

/* GRID SEARCH FORM */

.gridAutoWrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
}

.gridAutoWrap .showRelDivWrap {
  margin: 0;
}

/* GRID */

.gridWrap {
  display: grid;
  grid-gap: 10px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  justify-content: space-between;
}

.gridWrap.auto-flow-column {
  grid-auto-flow: column;
}

.gridWrap.auto-flow-unset {
  grid-auto-flow: unset;
}

.gridWrap.auto-flow-row {
  grid-auto-flow: row;
}

.gridWrap input,
.gridWrap select {
  margin-bottom: 0 !important;
}

.g2 {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
}

.gap5 {
  grid-gap: 5px;
}

.gridLine {
  grid-column: 1 / -1;
  height: 1px;
  border-bottom: 1px solid #c0c0c0;
  width: 100%;
}

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

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

.g6 {
  grid-template-columns: repeat(6, 1fr);
}

.g7 {
  grid-template-columns: repeat(7, 1fr);
}

.g8 {
  grid-template-columns: repeat(8, 1fr);
}

.g9 {
  grid-template-columns: repeat(9, 1fr);
}

.g6-max {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: inherit;
}

.g7-max {
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: inherit;
}

@media only screen and (max-width: 1400px) {
  .gridWrap.wrap-1400 {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: inherit;
  }
}

@media only screen and (max-width: 1200px) {
  .gridWrap.wrap-1200 {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: inherit;
  }
}

@media only screen and (max-width: 1000px) {
  .gridWrap.wrap-1000 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: inherit;
  }
}

@media only screen and (max-width: 800px) {
  .gridWrap.wrap-800,
  .gridWrap.wrap-1000 {
    grid-template-columns: repeat(4, 1fr);
    /* grid-auto-columns: inherit; */
    grid-auto-flow: inherit;
  }
}

@media only screen and (max-width: 600px) {
  .gridWrap.wrap-800,
  .gridWrap.wrap-1000 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: inherit;
    grid-auto-flow: inherit;
  }
}

@media only screen and (max-width: 400px) {
  .gridWrap.wrap-800,
  .gridWrap.wrap-1000 {
    grid-template-columns: repeat(1, 1fr);
    grid-auto-columns: inherit;
    grid-auto-flow: inherit;
  }
}

/* GRID ENDE */

.uiListGroupWrap {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.uiListGroupItem {
  padding: 8px 0;
  display: block;
  border-bottom: 1px solid #dedede;
  color: #555;
}

.uiListGroupWrap .uiListGroupItem:first-child {
  padding-top: 0;
}

.uiListGroupWrap .uiListGroupItem:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.uiListGroupItem i {
  font-size: 14px;
  width: 22px;
}

/* ############### */

.flexWrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: 10px;
}

.flexWrap > div {
  box-sizing: border-box;
}

.flexWrap .fcol-4 {
  width: 25%;
}

.flexWrap .fcol-5 {
  width: 20%;
}

.flexWrap .fcol-6 {
  width: 16.66666%;
}

.flexWrap .fcol-9 {
  width: 11.11111%;
}

.flexWrap.flexRight {
  justify-content: flex-end;
}

/* ---------------------- */

.btnWrap {
  border: 1px solid #eee;
  background-color: #efefef;
  border-radius: 3px;
  padding: 5px 10px;
}

.btn-icon {
  cursor: pointer;
}

.btn-icon > i {
  color: rgb(129, 129, 129);
}

.btn-icon.active > i {
  color: #51a630;
}

.btn-icon.danger:hover > i {
  color: #de0000;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.box-sizing {
  box-sizing: border-box;
}

/* HILFE */

.helpWrap {
  border: 1px solid #3fa0ce;
  background-color: #fff;

  padding: 0;
  border-radius: 3px;
}

.helpTitle {
  background-color: #3fa0ce;
  padding: 10px 15px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.helpTitle .faIco i {
  color: #fff;
  text-shadow: none;
}

.helpContent {
  background-color: #fff;
  padding: 20px;
}

.help {
  padding: 20px;
}

.help ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.help img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e0e0e0;
}

.help h2 {
  line-height: 1em;
  padding: 0;
  margin: 15px 0 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #777;
  display: inline-block;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
}

.help > h2:first-child {
  margin: 0;
}

.help p {
  margin-top: 7px;
}

.help ul li {
  list-style-type: initial;
  list-style-position: inside;
}

.help ol li {
  list-style-position: inside;
  list-style-type: decimal;
}

/* Tooltips jquery */

.ui-tooltip {
  font-size: 12px;
  padding: 2px 10px;
  text-align: left;
}

/* neue Buttons 10.11.2021 */

.faIcoWrap {
  display: inline-block;
  padding: 8px 12px;
  line-height: 120%;
  border: 1px solid #e3e3e3;
  border-right: 0;
  background-color: #fff;
  box-sizing: border-box;

  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a.faIcoWrap.faIco i.hoverGreen {
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a.faIcoWrap.faIco:link,
a.faIcoWrap.faIco:visited {
  color: #666;
}

a.faIcoWrap.faIco:hover,
a.faIcoWrap.faIco:focus {
  color: #333;
}

.faIcoWrap span {
  margin-left: 5px;
  text-transform: uppercase;
  font-size: 12px;
  font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif;
  font-weight: 400;
}

.faIcoWrap.borderRadiusLeft {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.faIcoWrap.borderRadiusRight {
  border-right: 1px solid #e3e3e3;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.faIcoWrap.selected {
  color: #333;
}

.faIcoWrap.selected i {
  color: #333;
}

.faIcoWrap:hover {
  background-color: #ececec;
}

/* globale Tacho anzeige */
.tacho {
  position: relative;
  box-sizing: border-box;
  line-height: 100%;
}

.tacho img {
  position: relative;
  box-sizing: border-box;
  line-height: 100%;
}

.tacho .strich {
  position: absolute;

  top: 7px;
  left: 98px;
}

.blockUI.blockMsg {
  left: calc((100vw - 350px) / 2) !important;
  box-sizing: border-box;
}

.dragAnchor {
  display: none;
}

@media only screen and (max-width: 800px) {
  .notificationWrap {
    width: 100%;
    background-color: transparent;
    top: 20px;
    right: 0;
    z-index: 1400;
    padding: 0 1.25rem;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 600px) {
  .faIcoText {
    display: none;
  }

  th.faIcoTd,
  td.faIcoTd {
    width: 1%;
    width: 20px;
    background-color: #000;
  }

  .uiTab li a {
    min-width: 60px;
    padding: 13px 5px 0 5px;
    font-size: 11px;
  }

  .m600-mb-5 {
    margin-bottom: 20px;
  }

  .blockUI.blockMsg {
    left: 5% !important;
    width: 90% !important;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 480px) {
  .m400-mb-5 {
    margin-bottom: 20px;
  }
}

.blink {
  animation: blink-animation 2s infinite;
  -webkit-animation: blink-animation 2s infinite;
}

@keyframes blink-animation {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* LOADER */

.lds-dual-ring {
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
}

.lds-dual-ring:after {
  content: ' ';
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.2s;
}

.fadeInSlow {
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* horizontale navigation */

ul.staticnavi {
    margin-bottom: 1rem;
}

ul.staticnavi li {
  float: left;
  margin: 0 2px 0 0;
  background: none;
  padding: 0;
}

ul.staticnavi li a {
  float: left;
  min-width: 30px;
  height: 30px;
  border: 1px solid #c0c0c0;
  text-align: center;
  line-height: 30px;
  background-color: #fff;

  border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
}

ul.staticnavi li.selected a:link,
ul.staticnavi li.selected a:visited {
  text-decoration: none;
  background-color: #69b7ff;
  border: 1px solid #69b7ff;
  font-weight: bold;
  color: #fff;
}

ul.staticnavi li a:link,
ul.staticnavi li a:visited {
  text-decoration: none;
}

ul.staticnavi li a:hover,
ul.staticnavi li a:hover {
  text-decoration: none;
  background-color: #e3e3e3;
}

.badge {
  display: inline-block;
  padding: 0.5em 0.75em;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}

.badge-sm {
  padding: 0.5em 0.75em;
  font-size: 0.75em;
}

.bg-green {
  background-color: #219e3e !important;
}

.bg-red {
  background-color: #c86b69 !important;
}

.bg-orange {
  background-color: #ef953c !important;
}

.bg-yellow {
  background-color: #ffc04b !important;
}

.text-green {
  color: #219e3e !important;
}

.text-white {
  color: #ffffff !important;
}

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

.rounded {
  border-radius: 0.375rem;
}

.flip-horizontal {
  transform: scaleX(-1);
}

.whitespace-nowrap {
  white-space: nowrap;
}