/* Stylesheet by Kathrin Created On 2020-08-12 */

/*
 * Global Colors
 */
:root {
  --color-primary: #008600;
  --color-hover: #004300;
  --color-tertiary: #001000;
  --color-focus: #009900;
  --color-sel-row: 0, 153, 0;
  --color-text-default: #3A3A36;
  --color-border: #666666;
  --color-contrast: #d8d610;
  --color-error: #A80306;
  --color-important: #DB7301;
  --color-important-hover: #DB5300;
  --color-background: #f9f9f9;
}


.header {
  padding: 8px 16px 0 0;
  background: #777;
  color: #f1f1f1;
}
/* Page content */
.content {
  padding: 16px;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
  /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 120px;
  }


/*
 * Utilities
 */

.hidden {
  display: none;
}

.w-25 {width: 25%; }
.w-33 {width: 33%; }
.w-50 {width: 50%; }
.w-67 {width: 67%; }
.w-75 {width: 75%; }
.w-100 {width: 100%; }

.pad-right-16 {
  padding-right: 16px;
}

.cursor-pointer {
  cursor: pointer;
}

/* 
 * Icon-Font Heidicon
 */

@font-face {
  font-family: "heidicons";
  src: url("font/heidicons.eot");
  src: url("font/heidicons.eot#iefix") format("embedded-opentype"), url("font/heidicons.woff2") format("woff2"), url("font/heidicons.woff") format("woff"), url("font/heidicons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: "heidicons" !important;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  font-size: 24px;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glyphen */
.icon-check:before { content: '\e800'; } /* '' */
.icon-close:before { content: '\e801'; } /* '' */
.icon-comment-new:before { content: '\e802'; } /* '' */
.icon-comment:before { content: '\e803'; } /* '' */
.icon-customer-new:before { content: '\e804'; } /* '' */
.icon-customer:before { content: '\e805'; } /* '' */
.icon-delete:before { content: '\e806'; } /* '' */
.icon-document-new:before { content: '\e807'; } /* '' */
.icon-document:before { content: '\e808'; } /* '' */
.icon-edit:before { content: '\e809'; } /* '' */
.icon-filter:before { content: '\e80a'; } /* '' */
.icon-location:before { content: '\e80b'; } /* '' */
.icon-mail:before { content: '\e80c'; } /* '' */
.icon-menu:before { content: '\e80d'; } /* '' */
.icon-save:before { content: '\e80e'; } /* '' */
.icon-search:before { content: '\e80f'; } /* '' */
.icon-sort-asc:before { content: '\e810'; } /* '' */
.icon-sort-desc:before { content: '\e811'; } /* '' */
.icon-cancel:before { content: '\e812'; } /* '' */
.icon-container:before { content: '\e818'; } /* '' */
.icon-copy:before { content: '\e819'; } /* '' */
.icon-date:before { content: '\e81c'; } /* '' */
.icon-email:before { content: '\e821'; } /* '' */
.icon-help:before { content: '\e823'; } /* '' */
.icon-hotel:before { content: '\e824'; } /* '' */
.icon-info:before { content: '\e825'; } /* '' */
.icon-lkw:before { content: '\e826'; } /* '' */
.icon-logout:before { content: '\e828'; } /* '' */
.icon-notification-off:before { content: '\e82b'; } /* '' */
.icon-notification:before { content: '\e82c'; } /* '' */
.icon-okay:before { content: '\e82d'; } /* '' */
.icon-phone:before { content: '\e82e'; } /* '' */
.icon-piano:before { content: '\e82f'; } /* '' */
.icon-pkw:before { content: '\e830'; } /* '' */
.icon-print:before { content: '\e831'; } /* '' */
.icon-redo:before { content: '\e832'; } /* '' */
.icon-reload:before { content: '\e833'; } /* '' */
.icon-select:before { content: '\e836'; } /* '' */
.icon-settings:before { content: '\e837'; } /* '' */
.icon-shut-off:before { content: '\e838'; } /* '' */
.icon-time:before { content: '\e83b'; } /* '' */
.icon-tool:before { content: '\e83c'; } /* '' */
.icon-trailer-big:before { content: '\e83d'; } /* '' */
.icon-trailer:before { content: '\e83e'; } /* '' */
.icon-transporter:before { content: '\e83f'; } /* '' */
.icon-undo:before { content: '\e840'; } /* '' */


/*
 * Standard Elements
 */

body {
  font-size: 16px;
  font-weight: normal;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  color: var(--color-text-default);
  background-color: var(--color-background);
  margin: 0px 0px;
}

h1, h2, h3, h4, h5, .title-with-subtitle {
  font-size: 1em;
  font-weight: normal;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  width: auto;
  margin: 0 0 8px 0;
}

h1 {
  font-size: 1.8em;
  color: #666666;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  color: #301E12;
}

h4 {
  font-weight: bold;
  color: #301E12;
}

h5 {
  color: #301E12;
}

.title-with-subtitle * {
  margin: 0;
}

hr {
  border: none;
  border-top: 1px solid #bdc1c7;
  margin: 24px 0 0 0;
}

a {
  color: var(--color-primary);
}

  a:hover {
    color: var(--color-hover);
  }

  a:visited {
    color: var(--color-tertiary);
  }

label {
  font-size: 0.8em;
  position: relative;
}

/* 
 * Tables
 */

table {
  border-collapse: collapse;
  vertical-align: top;
  /*  border: 1px solid var(--color-border);*/
}

th, td {
  padding: 2px 8px;
  text-align: left;
  vertical-align: top;
  /*  background-color: #fff;*/
}

th {
  font-weight: bold;
  white-space: nowrap;
}


/*
 * Special: Grid-View
 */

.gridview-border-bottom {
  border-bottom: 1px solid #f0f0f0;
}

.gridview-alt-row {
  background-color: #F0F0F0;
  border-bottom: 1px solid #f0f0f0;
}

.gridview-head-row {
  background-color: var(--color-border);
  font-weight: bold;
  color: #fff;
}

.gridview-sel-row {
  background-color: rgba(var(--color-sel-row), 0.25);
  border-bottom: 1px solid rgba(var(--color-sel-row), 0.25);
  /*font-weight: bold;*/
  /*color: #fff;*/
}


/* 
 *Forms 
 */

input, textarea, select {
  font-size: 1em;
  font-weight: normal;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  border-radius: 2px;
  margin-right: 8px;
  /*margin-bottom: 8px;*/
}

.labelled-input {
  margin-bottom: 8px;
}

.divPage {
  border-style: solid;
  width: 500px;
  height: 600px;
}

.thinBorderTop {
  border-top-style: solid;
}

.print-view input,
.print-view textarea,
.print-view select {
  border: none;
  background-color: var(--color-background);
  margin: 0px 16px;
  pointer-events: none;
  resize: none;
}

  .print-view input::-webkit-inner-spin-button,
  .print-view input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .print-view input[type=number] {
    -moz-appearance: textfield;
  }

input[type="text"],
input[type="password"],
input[type="color"],
input[type="email"],
input[type="range"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
textarea,
select {
  color: var(--color-text-default);
  background-color: #fff;
  outline: none;
  border: 1px solid var(--color-border);
  height: 20px;
  box-sizing: content-box;
  padding: 0px 4px;
}

  input[type="text"]:hover,
  input[type="password"]:hover,
  input[type="color"]:hover,
  input[type="email"]:hover,
  input[type="range"]:hover,
  input[type="search"]:hover,
  input[type="url"]:hover,
  input[type="tel"]:hover,
  input[type="date"]:hover,
  input[type="datetime"]:hover,
  input[type="datetime-local"]:hover,
  input[type="month"]:hover,
  input[type="week"]:hover,
  input[type="time"]:hover,
  input[type="number"]:hover,
  textarea:hover,
  select:hover {
    border-color: var(--color-hover);
  }

  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="color"]:focus,
  input[type="email"]:focus,
  input[type="range"]:focus,
  input[type="search"]:focus,
  input[type="url"]:focus,
  input[type="tel"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="time"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-focus);
  }

  input[type="text"]:disabled, input[type="text"]:read-only,
  input[type="password"]:disabled, input[type="password"]:read-only,
  input[type="color"]:disabled, input[type="color"]:read-only,
  input[type="email"]:disabled, input[type="email"]:read-only,
  input[type="range"]:disabled, input[type="range"]:read-only,
  input[type="search"]:disabled, input[type="search"]:read-only,
  input[type="url"]:disabled, input[type="url"]:read-only,
  input[type="tel"]:disabled, input[type="tel"]:read-only,
  input[type="date"]:disabled, input[type="date"]:read-only,
  input[type="datetime"]:disabled, input[type="datetime"]:read-only,
  input[type="datetime-local"]:disabled, input[type="datetime-local"]:read-only,
  input[type="month"]:disabled, input[type="month"]:read-only,
  input[type="week"]:disabled, input[type="week"]:read-only,
  input[type="time"]:disabled, input[type="time"]:read-only,
  input[type="number"]:disabled, input[type="number"]:read-only,
  textarea:disabled, textarea:read-only,
  select:disabled {
    background-color: #eeeeee;
    border-color: #aaaaaa;
  }

/* Buttons */
input[type="submit"],
.gridview-button {
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  background-color: var(--color-primary);
  outline: none;
  border: none;
  height: 20px;
  box-sizing: content-box;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}

  input[type="submit"].btn-icon {
    font-family: "heidicons";
    text-rendering: optimizeLegibility;
    color: #fff;
    font-size: 30px;
    font-weight: normal;
    background-color: transparent;
    padding: 0;
    height: 30px;
    box-shadow: none;
  }

    input[type="submit"].btn-icon:hover {
      background-color: transparent;
      box-shadow: none;
      color: var(--color-contrast);
    }

    input[type="submit"].btn-icon:focus {
      background-color: transparent;
      box-shadow: none;
      color: var(--color-focus);
    }

  input[type="submit"]:hover,
  .gridview-button:hover {
    background-color: var(--color-hover);
    box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.3);
  }

  input[type="submit"]:focus,
  .gridview-button:focus {
    background: var(--color-focus);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3);
  }

input.is-error {
  border: 1px solid var(--color-error);
  outline: none;
}

input.is-important {
  border: 1px solid var(--color-important);
  box-shadow:  0 0 4px var(--color-important);
  outline: none;
}

/* Checkboxes and Radio Buttons */

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    display: inline-block;
    cursor: pointer;
    margin-right: 1em;
    min-height: 1.5em;
  }

  input[type="checkbox"]:disabled + label,
  input[type="radio"]:disabled + label {
    pointer-events: none;
  }

  input[type="checkbox"] + label:empty,
  input[type="radio"] + label:empty {
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
  }

  input[type="checkbox"] + label::before,
  input[type="radio"] + label::before {
    width: 12px;
    height: 12px;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin: 1px 8px 0px auto;
    border: 1px solid var(--color-border);
  }

  input[type="checkbox"].is-important + label::before,
  span.is-important input[type="checkbox"] + label::before,
  input[type="radio"].is-important + label::before,
  span.is-important input[type="radio"] + label::before {
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-important);
    box-shadow: 0 0 4px var(--color-important);
  }

  input[type="checkbox"]:disabled + label::before,
  input[type="radio"]:disabled + label::before {
    background-color: #eeeeee;
    border-color: #aaaaaa;
  }

  input[type="checkbox"] + label::before {
    border-radius: 2px;
  }

  input[type="radio"] + label::before {
    border-radius: 12px;
  }

  input[type="radio"].is-important + label::before,
  span.is-important input[type="radio"] + label::before {
    border-radius: 14px;
  }

  input[type="checkbox"]:hover + label::before,
  input[type="radio"]:hover + label::before {
    border-color: var(--color-hover);
  }

  input[type="checkbox"].is-important:hover + label::before,
  span.is-important input[type="checkbox"]:hover + label::before,
  input[type="radio"].is-important:hover + label::before,
  span.is-important input[type="radio"]:hover + label::before {
    border-color: var(--color-important-hover);
  }

  input[type="checkbox"]:hover:checked + label::before,
  input[type="radio"]:hover:checked + label::before {
    border-color: var(--color-hover);
    background-color: var(--color-hover);
  }

  input[type="checkbox"].is-important:hover:checked + label::before,
  span.is-important input[type="checkbox"]:hover:checked + label::before,
  input[type="radio"].is-important:hover:checked + label::before,
  span.is-important input[type="radio"]:hover:checked + label::before {
    border-color: var(--color-important-hover);
    background-color: var(--color-important-hover);
  }

  input[type="checkbox"]:checked + label::before,
  input[type="radio"]:checked + label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  input[type="checkbox"].is-important:checked + label::before,
  span.is-important input[type="checkbox"]:checked + label::before,
  input[type="radio"].is-important:checked + label::before,
  span.is-important input[type="radio"]:checked + label::before {
    background-color: var(--color-important);
    border-color: var(--color-important);
  }

  input[type="checkbox"]:checked:disabled + label::before,
  input[type="radio"]:checked:disabled + label::before {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
  }

  input[type="radio"]:checked + label::before {
    box-shadow: inset 0px 0px 0px 3px #fff;
  }

  input[type="radio"].is-important:checked + label::before,
  span.is-important input[type="radio"]:checked + label::before {
    box-shadow: inset 0px 0px 0px 3px #fff, 0 0 4px var(--color-important);
  }

  input[type="checkbox"]:checked + label::after {
    font-family: "heidicons";
    text-rendering: optimizeLegibility;
    content: "";
    font-size: 0.8rem;
    color: #fff;
    position: absolute;
    left: 0px;
    width: calc(12px + 2px);
    text-align: center;
  }

  input[type="checkbox"].is-important:checked + label::after,
  span.is-important input[type="checkbox"]:checked + label::after {
    left: 1px;
    top: 1px;
  }


/*
 *Navigation
 */

nav {
  background-color: var(--color-primary);
}

nav.lvl2 {
  background-color: #fff;
}

  /* Navbar aus Buttons */
  nav.tabs {
    padding: 0 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
  }

    nav.tabs input[type="submit"] {
      font-size: 1em;
      font-weight: normal;
      border-right: 1px solid #fff;
      border-radius: 0px;
      margin: 0;
      padding: 8px 16px;
      box-shadow: none;
    }

      nav.tabs input[type="submit"]:first-child {
        border-left: 1px solid #fff;
      }

      nav.tabs.lvl2 input[type="submit"] {
        background-color: #fff;
        color: var(--color-text-default);
        border-right: 1px solid var(--color-primary);
      }

        nav.tabs.lvl2 input[type="submit"]:first-child {
          border-left: 1px solid var(--color-primary);
        }

    nav.tabs.lvl2 input[type="submit"]:hover:not(.current) {
      background-color: var(--color-hover);
      color: #fff;
    }

    nav.tabs input[type="submit"].current {
      background-color: #fff;
      color: var(--color-text-default);
    }

    nav.tabs.lvl2 input[type="submit"].current {
      background-color: #fff;
      box-shadow: inset 0 -4px 0px 0px var(--color-primary);
    }


/*
 * Cards
 */

.card {
  background-color: #fff;
  border-radius: 2px;
  padding: 8px 8px 16px 8px;
  margin: 24px 24px 24px 0;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}

  .card .is-interactive {
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
  }

    .card .is-interactive:hover {
      box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.3)
    }

    .card .is-interactive:focus {
      box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3)
    }



/**
 * Flexbox Classes
 */

.flex {
  display: flex;
}

/* Default behavior of flexbox, no need to set */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

/* Default behavior of flexbox, no need to set */
.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-equalsize {
  flex: 1 1 0;
}

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

/* Default behavior of flexbox, no need to set */
.flex-justify-start {
  justify-content: flex-start;
}

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

.flex-justify-center {
  justify-content: center;
}

.flex-justify-sp-between {
  justify-content: space-between;
}

.flex-justify-sp-around {
  justify-content: space-around;
}

.flex-alignitems-start {
  align-items: flex-start;
}

.flex-alignitems-end {
  align-items: flex-end;
}

.flex-alignself-start {
  align-self: flex-start;
}

.flex-alignself-end {
  align-self: flex-end;
}

.flex-50 {
  flex-basis: 50%
}