* {
   margin: 0;
   padding: 0;
}

html, body, .viewport {
   width: 100%;
   height: 100%;
   margin: 0;
}

.bg {
   background-image: url(../images/start2.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}

.masklogin_forecolor {
   color: red;
}

.rounded-30 {
   border-radius: 30px;
}

.navbar {
   padding: 0px 10px 0px 10px;
}

.validation-summary {
   display: none;
}

   .validation-summary.validation-summary-error {
      display: block;
   }

/* CSS used here will be applied after bootstrap.css */
.nav-side-menu {
   overflow: auto;
   font-family: "Droid Sans", Arial, sans-serif;
   font-size: 12px;
   font-weight: 200;
   background-color: #343a40;
   position: fixed;
   top: 0px;
   width: 50px;
   height: 100%;
}

.navbar-dark > .navbar-brand {
   color: salmon;
}

.navbar-brand {
   color: salmon;
}

.form-inline {
   margin: 0;
}

.hightlight {
   background: rgba(0, 0, 0, 0.26);
}

.button_modus {
   position: absolute;
   display: inline-block;
   bottom: 20px;
   left: 0px;
}

   .button_modus .dropdown .dropdown-menu {
      min-width: 48px;
   }

   .button_modus .show > .dropdown-menu {
      transform: translate3d(0px, -140px, 0px) !important;
   }

   .button_modus .dropdown .btn {
      padding: 2px;
   }

.formElement {
   border-radius: .25rem;
   height: 50px;
   display: flex;
   align-items: stretch;
   margin-bottom: 1rem;
   overflow: hidden;
}

   .formElement label {
      margin-bottom: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4rem;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a4c6b+1,23678b+66,23678b+100 */
      background: #0a4c6b; /* Old browsers */
      background: -moz-linear-gradient(-45deg, #0a4c6b 1%, #23678b 66%, #23678b 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(-45deg, #0a4c6b 1%,#23678b 66%,#23678b 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(135deg, #0a4c6b 1%,#23678b 66%,#23678b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a4c6b', endColorstr='#23678b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      color: #fff;
   }

   .formElement.error label {
      background: #d00;
   }

   .formElement label > svg {
      width: 60%;
      height: 60%;
   }

   .formElement input {
      filter: none;
      flex-grow: 2;
      padding: .2rem 20px;
      border: solid;
      background-color: #eeeef0 !important;
      font-size: 18px;
      font-weight: 400;
      color: #434a53;
      border: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
   }

   .formElement.error input {
      filter: none;
      color: #d00;
   }

.btn-textonly {
   background-color: transparent;
   border: none;
}

.btn-timeas {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #4b7e90 5%, #47858f 100%);
   background-color: #4b7e90;
   border-radius: 3px;
   border: 1px solid #29668f;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   text-decoration: none;
   text-shadow: 0px 1px 0px #3d768a;
}

.btn-timeas:hover {
   background: #f0dc96;
   color: black;
}

.btn-timeas:active {
   position: relative;
   top: 1px;
}

.btn-timeas2 {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #205e85 5%, #1b3f58 100%);
   background-color: #205e85;
   border-radius: 3px;
   border: 1px solid #29668f;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   text-decoration: none;
   text-shadow: 0px 1px 0px #3d768a;
}

.btn-timeas-head {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #4b7e90 5%, #34737d 100%);
   background-color: #4b7e90;
   border-radius: 3px;
   border: 1px solid #29668f;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   text-decoration: none;
   text-shadow: 0px 1px 0px #3d768a;
   margin-left: 15px;
   margin-right: 15px;
   margin-bottom: 5px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

   .btn-timeas-head:hover {
      background: #f0dc96;
      color: black;
   }

   .btn-timeas-head:active {
      position: relative;
      top: 1px;
   }

.btn-timeas-cancel {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #db8c8c 5%, #854d4d 100%);
   background-color: #db8c8c;
   border-radius: 3px;
   border: 1px solid #29668f;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   text-decoration: none;
   text-shadow: 0px 1px 0px #3d768a;
}

   .btn-timeas-cancel:hover {
      background: #f0dc96;
      color: black;
   }

   .btn-timeas-cancel:active {
      position: relative;
      top: 1px;
   }

.btn-timeas-lila {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #ae8cdb 5%, #644d85 100%);
   background-color: #ae8cdb;
   border-radius: 3px;
   border: 1px solid #29668f;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   text-decoration: none;
   text-shadow: 0px 1px 0px #3d768a;
}

   .btn-timeas-lila:hover {
      background: #f0dc96;
      color: black;
   }

   .btn-timeas-lila:active {
      position: relative;
      top: 1px;
   }


.btn-fixed-size {
   width: 180px;
   height: 50px;
}

.btngrid {
   padding: 0px 2px 0px 2px;
   min-width: 50px;
}

.custom-alert {
   padding: 0rem 1.75rem;
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
   /*border: 1px solid transparent;*/
   border-radius: 0.25rem;
   line-height: 1.5;
}

.custom-menu-dropdown {
   color: whitesmoke;
   background-color: transparent;
   border-color: transparent;
}

   .custom-menu-dropdown:hover {
      color: black;
      background-color: #f0dc96;
      border-color: #D0D0D0;
   }

.show > .btn-secondary.dropdown-toggle.custom-menu-dropdown {
   background-color: transparent !important;
   border-color: transparent !important;
}

.dropdown-item:hover {
   color: black;
   background-color: #f0dc96;
   border-color: #D0D0D0;
}

.dropdown-item.active, .dropdown-item:active {
   color: whitesmoke;
   background-color: #4f5e66;
   border-color: #D0D0D0;
}

.custom-card-header {
   cursor: pointer;
   white-space: normal !important;
   word-wrap: break-word;
   word-break: normal;
   padding: 0;
   background-color: #b9c7c9;
   color: black;
   border-color: gray;
   border: 1px solid transparent;
   text-align: left;
}

.no-margin {
   margin: 0px !important;
}

.no-right-padding {
   padding-right: 0px;
}

.card-signin {
   border-radius: 0rem;
   box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
   background-color: rgba(255, 255, 255, 0.3) !important;
}

   .card-signin .card-title {
      margin-bottom: 2rem;
      font-weight: 500;
      font-size: 1.5rem;
      padding: 10px;
   }

   .card-signin .card-body {
      padding: 1rem;
   }

.card-footer-person {
   padding: 0px;
}


.table-footer-person {
   table-layout: fixed;
   width: 100%;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a4c6b+1,23678b+66,23678b+100 */
   background: #4f5e66; /* Old browsers */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a4c6b', endColorstr='#23678b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.tabledata-footer-person {
   border-right: 1px solid lightgray;
   width: 25%;
   padding: 0px;
}


.button-footer-person {
   width: 100%;
   height: 100%;
   padding: 0px;
   border-radius: unset;
   background: none;
   color: white;
}

   .button-footer-person:hover {
      background: none;
      background-color: #f0dc96;
      color: black;
   }

   .button-footer-person:focus {
      background: none;
      background-color: #bed6df;
   }

.btn-outline-dark {
   background: none;
   background-color: #bed6df;
   color: black;
}

.form-signin {
   width: 100%;
}

   .form-signin .btn {
      font-size: 80%;
      letter-spacing: .1rem;
/*      font-weight: bold;
*/      padding: 1rem;
      transition: all 0.2s;
   }

.credsList .ol .ul {
   margin: 0;
   padding: 0;
}

.credsList li {
   padding: 0;
   margin: 0;
   list-style-type: none;
   clear: both;
}

#errorlist ul li {
   padding: 0;
   margin: 0;
   list-style-type: none;
   clear: both;
}
.form-control {
   /*line-height: 2.5;*/
   height: inherit;
}

.form-label-group {
   position: relative;
   margin-bottom: 1rem;
}

   .form-label-group input {
      border-radius: 2rem;
      filter: none;
   }

   .form-label-group > input,
   .form-label-group > label {
      padding: var(--input-padding-y) var(--input-padding-x);
      filter: none;
   }

   .form-label-group > label {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      margin-bottom: 0;
      margin-left: 10px;
      /* Override default `<label>` margin */
      /*line-height: 1.5;*/
      line-height: 1;
      color: #495057;
      border: 1px solid transparent;
      /*border-radius: .25rem;*/
      transition: all .1s ease-in-out;
   }

   .form-label-group input::-webkit-input-placeholder {
      color: transparent;
   }

   .form-label-group input:-ms-input-placeholder {
      color: transparent;
   }

   .form-label-group input::-ms-input-placeholder {
      color: transparent;
   }

   .form-label-group input::-moz-placeholder {
      color: transparent;
   }

   .form-label-group input::placeholder {
      color: transparent;
   }

   .form-label-group input:not(:placeholder-shown) {
      padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
      padding-bottom: calc(var(--input-padding-y) / 3);
   }

      .form-label-group input:not(:placeholder-shown) ~ label {
         padding-top: calc(var(--input-padding-y) / 3);
         padding-bottom: calc(var(--input-padding-y) / 3);
         font-size: 12px;
         color: #777;
      }


.vbox {
   /* previous syntax */
   display: -webkit-box;
   display: -moz-box;
   display: box;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-box-orient: vertical;
   box-orient: vertical;
   /* current syntax */
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   background-color: #EAEAEA;
   /*   padding-bottom: 50px;
*/
}


/* items flex/expand horizontally */
.hbox {
   /* previous syntax */
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   display: box;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -ms-box-orient: horizontal;
   box-orient: horizontal;
   /* current syntax */
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-direction: row;
   -moz-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
}

.space-between {
   /* previous syntax */
   -webkit-box-pack: justify;
   -moz-box-pack: justify;
   -ms-box-pack: justify;
   box-pack: justify;
   /* current syntax */
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
   -ms-justify-content: space-between;
   justify-content: space-between;
}

.main {
   /* previous syntax */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -ms-box-flex: 1;
   box-flex: 1;
   /* current syntax */
   -webkit-flex: 1;
   -moz-flex: 1;
   -ms-flex: 1;
   flex: 1;
}

article {
   /* previous syntax */
   -webkit-box-flex: 5;
   -moz-box-flex: 5;
   -ms-box-flex: 5;
   box-flex: 5;
   /* current syntax */
   -webkit-flex: 5;
   -moz-flex: 5;
   -ms-flex: 5;
   flex: 5;
}

.stemplistblock {
}

.stemplistitem {
   color: black;
   height: 22px;
   line-height: 20px;
   vertical-align: middle;
}

.tagessaldi {
   height: 18px;
   line-height: 18px;
   vertical-align: middle;
}

.errorlistitem {
   color: red;
   font-size: 0.85rem;
}

.absencelistitem {
   color: lightslategray;
   font-size: 0.85rem;
}

.costchangelistitem {
   color: lightslategray;
   font-size: 0.85rem;
}

.saldilistitem {
   color: lightslategray !important;
   font-size: 0.85rem;
}
.saldilistitem:hover {
   text-decoration : none;
}

.saldilistitem_value_plus {
   color: lightslategray !important;
   font-size: 0.85rem;
   text-align: right;
}
.saldilistitem_value_plus:hover {
   text-decoration: none;
}

.saldilistitem_value_minus {
   color: red !important;
   font-size: 0.85rem;
   text-align: right;
}
.saldilistitem_value_minus:hover {
   text-decoration: none;
}

.sollistitem {
   color: black !important;
   font-size: 0.85rem;
}
.sollistitem:hover {
   text-decoration: none;
}

.sollistitem_value_plus {
   color: black !important;
   font-size: 0.85rem;
   text-align: right;
}
.sollistitem_value_plus:hover {
   text-decoration: none;
}

.sollistitem_value_minus {
   color: red !important;
   font-size: 0.85rem;
   text-align: right;
}
.sollistitem_value_minus:hover {
   text-decoration: none;
}

.scanerror {
   color: lightslategray !important;
   font-size: 0.75rem;
   padding-left: 15px;
}
.scanerror:hover {
   text-decoration: none;
}

.login_title {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a4c6b+1,23678b+66,23678b+100 */
   background: #0a4c6b; /* Old browsers */
   background: -moz-linear-gradient(-45deg, #0a4c6b 1%, #23678b 66%, #23678b 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, #0a4c6b 1%,#23678b 66%,#23678b 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #0a4c6b 1%,#23678b 66%,#23678b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a4c6b', endColorstr='#23678b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   color: white;
}

.card-deck {
   margin-left: 0px;
   margin-right: 0px;
}

.card-header {
   padding: 2px 5px 2px 5px;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a4c6b+1,23678b+66,23678b+100 */
   background: #4f5e66; /* Old browsers */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a4c6b', endColorstr='#23678b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   color: whitesmoke;
}

.card-body {
   padding: 0px 5px 0px 5px;
   cursor: default;
}

.card-subtitle {
   padding-top: 2px;
   font-size: 0.8rem;
   font-weight: 200;
   margin-top: 0px;
}

#cardstempblock {
   padding: 0px 5px 0px 5px;
   border: none;
   background-color: unset !important;
}

#cardabsenzblock {
   border: 1px solid rgba(150, 150, 150, 1);
   min-width: 200px;
   max-width: 200px;
   margin-bottom: 10px;
}

.card-header .myfa {
   transition: .1s transform ease-in-out;
   transform: rotate(-90deg);
}

.card-header.collapsed .myfa {
   transform: none;
}

.card-body-table {
   padding: 0px 0px 0px 0px;
}

.myfa {
   display: inline-block;
}

   .myfa.pull-right {
      float: right;
   }

.d-block {
   display: block !important;
}



#CompanyDropdown {
   color: white;
}

#UserDropdown {
   color: white;
}

#Modus_active {
   height: 24px;
   width: 24px;
}

#Modus_list {
   height: 24px;
   width: 24px;
   padding-left: 10px;
}

.dropdown-menu a {
   white-space: nowrap;
}

.dropdown-menu > li {
   position: relative;
   /*line-height:25px;*/
   padding-bottom : 4px;
}

#Modus > li > img {
   position: absolute;
   left: 0;
   top: 3px;
   height: 24px;
}

.content {
   margin-left: 50px;
   min-height: 100%;
}

   .content > .container {
      width: 100%;
      height: 100%;
      position: fixed;
      max-width: unset;
      padding: 0px;
   }

.container {
   padding-left: 0px;
   padding-right: 0px;
}

/* Carousel */
.carousel-caption p {
   font-size: 20px;
   line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
   width: 100%;
}

/* QR code generator */
#qrCode {
   margin: 15px;
}

.custom_col-sm-6 {
   width: 50%;
}

.custom_col-sm-5 {
   -ms-flex: 0 0 41.666667%;
   flex: 0 0 41.666667%;
   max-width: 41.666667%;
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

.custom_col-sm-4 {
   -ms-flex: 0 0 33.333333%;
   flex: 0 0 33.333333%;
   max-width: 33.333333%;
   
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

.custom_col-sm-3 {
   -ms-flex: 0 0 25%;
   flex: 0 0 25%;
   max-width: 25%;

   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

.table th, .table td {
   padding: 0px 5px 0px 5px;
   border-top: none;
}

.grid_mutation th, .grid_mutation td {
   padding: 2px 2px 2px 2px;
}

.grid_mutation input {
   margin: 2px;
}

.table {
   margin-bottom: 0px;
}

/* Data-Grid Definitionen */
.tablesorter-default tr.odd.selected > td,
.tablesorter-default tr.even.selected > td,
.tablesorter-default tr.odd.selected:hover,
.tablesorter-default tr.even.selected:hover {
   background-color: #0a4c6b !important;
   color: #FFF !important;
}

.tablesorter-default tr.odd:hover > td,
.tablesorter-default tr.even:hover > td,
.tablesorter-default tr:hover,
.tablesorter-default td:hover {
   background-color: #f0dc96 !important;
   color: black !important;
}

.tablesorter-filter-row {
   display: none;
}

.headerbuttons {
   padding-bottom: 15px;
   padding-top: 15px;
}

.achzigProzWidth {
   max-width: 80%;
}

.space-header-top {
   margin-top: 85px;
}

.space-right {
   margin-right: 25px;
}

.space-right-large {
   margin-right: 75px;
}

.space-left {
   margin-left: 25px;
}

.gcv-menu {
   height: unset;
}

.ga115-header {
   margin: 0 auto;
   display: inline-flex;
   padding-bottom: 10px;
   padding-top: 10px;
}

.ga115-headerbutton {
   width: 33%;
   padding-right: 10px;
}

.modal-dialog {
   max-width : 1000px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 1500px) {
   #login_mask .col-sm-6 {
      max-width: unset;
      flex: unset;
   }

   .ga115-header {
      margin: unset;
      display: unset;
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .ga115-headerbutton {
      width: 100%;
      padding-right: unset;
   }

   #cardabsenzblock {
      border: 1px solid rgb(210, 210, 210);
      max-width: unset;
      min-width: unset;
      margin: 0px 0px 10px 0px;
   }

   .headerbuttons {
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .achzigProzWidth {
      max-width: 100%;
   }

   .btn-timeas-head {
      margin-left: 0px;
      margin-right: 0px;
   }

   .btn-fixed-size {
      width: 150px;
      height: unset;
   }

   .space-right {
      margin-right: 10px;
   }

   .space-header-top {
      margin-top: 20px;
   }

   .space-left {
      margin-left: 5px;
   }

   .stemplistitem {
      color: black;
      height: 22px;
      line-height: 20px;
      font-size: 12px;
   }
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 991.98px) {
   #login_mask .col-sm-6 {
      max-width: unset;
      flex: unset;
   }

   .modal-dialog {
      max-width: 700px;
   }

   .ga115-header {
      margin: unset;
      display: unset;
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .ga115-headerbutton {
      width: 100%;
      padding-right: unset;
   }

   #cardabsenzblock {
      border: 1px solid rgb(210, 210, 210);
      max-width: unset;
      min-width: unset;
      margin: 0px 0px 10px 0px;
   }

   .headerbuttons {
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .achzigProzWidth {
      max-width: 100%;
   }

   .btn-timeas-head {
      margin-left: 0px;
      margin-right: 0px;
   }

   .btn-fixed-size {
      width: 150px;
      height: unset;
   }

   .space-right {
      margin-right: 10px;
   }

   .space-header-top {
      margin-top: 20px;
   }

   .space-left {
      margin-left: 5px;
   }

   .scanerror {
      visibility: hidden;
   }
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767.98px) {
   #login_mask .col-sm-6 {
      max-width: unset;
      flex: unset;
   }

   .modal-dialog {
      max-width: 600px;
   }

   .ga115-header {
      margin: unset;
      display: unset;
      padding-bottom: 2px;
      padding-top: 2px;
   }

   .ga115-headerbutton {
      width: 100%;
      padding-right: unset;
   }

   #cardabsenzblock {
      border: 1px solid rgb(210, 210, 210);
      max-width: unset;
      min-width: unset;
      margin: 0px 0px 10px 0px;
   }

   .headerbuttons {
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .achzigProzWidth {
      max-width: 100%;
   }

   .btn-timeas-head {
      margin-left: 0px;
      margin-right: 0px;
   }

   .btn-fixed-size {
      width: 150px;
      height: unset;
   }

   .space-right {
      margin-right: 10px;
   }

   .space-header-top {
      margin-top: 20px;
   }

   .space-left {
      margin-left: 5px;
   }

   .scanerror {
      visibility: hidden;
   }
}

@media screen and (max-width: 575.98px) {
   #login_mask .col-sm-6 {
      max-width: unset;
      flex: unset;
   }

   .modal-dialog {
      max-width: 500px;
   }

   .ga115-header {
      margin: unset;
      display: unset;
      padding-bottom: 2px;
      padding-top: 2px;
   }

   .ga115-headerbutton {
      width: 100%;
      padding-right: unset;
   }

   #cardabsenzblock {
      border: 1px solid rgb(210, 210, 210);
      max-width: unset;
      min-width: unset;
      margin: 0px 0px 10px 0px;
   }

   .headerbuttons {
      padding-bottom: 5px;
      padding-top: 5px;
   }

   .achzigProzWidth {
      max-width: 100%;
   }

   .btn-timeas-head {
      margin-left: 0px;
      margin-right: 0px;
   }

   .btn-fixed-size {
      width: 150px;
      height: unset;
   }

   .space-right {
      margin-right: 5px;
   }

   .space-header-top {
      margin-top: 5px;
   }

   .space-left {
      margin-left: 5px;
   }

   .scanerror {
      visibility: unset;
   }

   .stemplistitem {
      color: black;
      height: 22px;
      line-height: 20px;
      font-size: unset;
   }
}


/* pager wrapper, div */
.tablesorter-pager {
   padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.tablesorter-pager {
   background-color: #e6eeee;
   margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.tablesorter-pager img {
   vertical-align: middle;
   margin-right: 2px;
   cursor: pointer;
}

/* pager output text */
.tablesorter-pager .pagedisplay {
   padding: 0 5px 0 5px;
   width: 50px;
   text-align: center;
}

/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
   margin: 0;
   padding: 0;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.tablesorter-pager.disabled {
   display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.tablesorter-pager .disabled {
   /* visibility: hidden */
   opacity: 0.5;
   filter: alpha(opacity=50);
   cursor: default;
}

.tablesorter-default .header, .tablesorter-default .tablesorter-header {
   padding: 0;
}

.tablesorter-default th, .tablesorter-default thead td {
   font-weight: 700;
   color: #000;
   background-color: #f8ffff;
   border-collapse: collapse;
   border-bottom: #ccc 2px solid;
}

.tablesorter-default tr.odd > td {
   background-color: whitesmoke;
}

.tablesorter-default td {
   background-color: unset;
}

.mainbox {
}

.navigator-btn {
   width: 24px;
   height: 24px;
   background-color: white;
   color: #307198;
   border-radius: 5px;
   /*margin: 2px 2px 2px 2px;*/
   /*t r d l*/
   padding: 1px 5px 3px 5px;
   cursor: pointer;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome, Opera and Firefox */
}

.spacer {
   margin: 5px;
}

.footer {
   background-color: #efefef;
   flex: 0 0 50px; /*or just height:50px;*/
   margin-top: auto;
   position: fixed;
   bottom: 0;
   height: 50px;
}

.float-start {
   float: left !important;
}

.float-end {
   float: right !important;
}