:root{

  /*--link_color: #019835;*/
  --link_color: #01ad3c;
  --link_color_hover: #01ad3c;
  
  --site_background_color: #222;
  --site_text_color: #dcdcdc;
  
  --datepicker_background_color: rgb(51, 51, 51);
  --datepicker_text_color: rgb(212 212 212);
  --datepicker_border_color: rgb(140, 140, 140);
  
  --bg_dark_disabled_background_color: #43484c;
  --bd_dark_disabled_border_color: #8d8d8d;
  --bd_dark_disabled_text_color: rgb(155 155 155);

}

[v-cloak] {
  display: none;
}

option:disabled {
  color: #9f9f9f;
}

.sticky-head-auftrag {
  position: sticky;
  top: 66px;
  z-index: 100;
  background-color: var(--site_background_color);
}

.sticky-head-produkt {
  position: sticky;
  top: 97px;
  z-index: 100;
  background-color: var(--site_background_color);
}

#sticky-back-button {
  position: sticky;
  top: 82px;
  z-index: 500;
  left: 100%;
  display: block;
  width: 180px;
  margin-bottom: 20px;
}

.stations-daten-table tbody tr td:first-child {
  width: 250px;
}

.modal-spacer {
  width: 100%;
  height: 30px;
}

.stations-ansicht {
  font-size: 15pt;
}

.badge {
  font-size: 13pt;
  font-weight: 400;
}

.auftrag-nicht-freigegeben a, .auftrag-nicht-freigegeben a:hover, .auftrag-nicht-freigegeben a:focus, .auftrag-nicht-freigegeben a:visited {
  color: var(--bs-yellow);
}

.uploaded-file {
  font-size: 11pt;
  padding: 5px 0;
  border-bottom: 1px solid var(--bs-secondary);
}
.uploaded-file:last-child { border-bottom: 0; }

.uploaded-file > div:nth-child(1) {
  flex: 0 0 30px;
}
.uploaded-file > div:nth-child(2) {
  flex-grow: 1;
}
.uploaded-file > div:nth-child(3) {
  flex: 0 0 30px;
  text-align: right;
}

.table-striped > tbody > tr:nth-of-type(odd){
  --bs-table-accent-bg: rgb(112 112 112 / 20%) !important;
}

.form-control.bg-secondary:disabled, .form-control.bg-secondary[readonly], .form-select.bg-secondary:disabled {
  background-color: var(--bg_dark_disabled_background_color) !important;
  border-color: var(--bd_dark_disabled_border_color) !important;
  color: var(--bd_dark_disabled_text_color) !important;
  cursor: not-allowed;
}

.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--bg_dark_disabled_background_color) !important;
  border-color: var(--bd_dark_disabled_border_color) !important;
  color: var(--bd_dark_disabled_text_color) !important;
  cursor: not-allowed;
}

.upload-field {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%236C757DFF' stroke-width='6' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  text-align: center;
}

::-webkit-scrollbar{
  width: 5px;
  height: 5px; }
::-webkit-scrollbar-thumb{
  background: #696969;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover{
  background: #9E9E9E;
}
::-webkit-scrollbar-track{
  background: #2b2b2b;
  border-radius: 0px;
  box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}


* { padding: 0; margin: 0; }
*:focus { outline: 0; }

body {
  font-size: 13pt;
  background-color: var(--site_background_color);
  color: var(--site_text_color);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  position: relative;
}

#toast-container {
  z-index: 100000;
}


.datepicker td, .datepicker th {
  width: 35px;
  height: 28px;
}
.datepicker {
  background-color: var(--datepicker_background_color);
  color: var(--datepicker_text_color);
  border-color: var(--datepicker_border_color);
}
.datepicker-dropdown:before, .datepicker-dropdown:after {
  border-bottom-color: var(--datepicker_border_color);
}
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
  background: #777;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
  background-color: #004eff !important;
  background-image: none;
  color: var(--datepicker_text_color) !important;
}
.datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
  background-image: none;
  background-color: rgb(255 251 120 / 68%);
}
.datepicker table tr td.today.active, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled.disabled, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:hover.active, .datepicker table tr td.today.disabled:hover.disabled, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.disabled:hover:hover, .datepicker table tr td.today.disabled:hover[disabled], .datepicker table tr td.today.disabled[disabled], .datepicker table tr td.today:active, .datepicker table tr td.today:hover, .datepicker table tr td.today:hover.active, .datepicker table tr td.today:hover.disabled, .datepicker table tr td.today:hover:active, .datepicker table tr td.today:hover:hover, .datepicker table tr td.today:hover[disabled], .datepicker table tr td.today[disabled] {
  background-color: rgb(255 249 64 / 52%);
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
  background: #777;
}
.datepicker table tr td span.focused, .datepicker table tr td span:hover {
  background: #777;
}
.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover {
  background-image: none;
}
.datepicker table tr td.new, .datepicker table tr td.old {
  color: #000;
}


a:focus {
  outline: none;
}
a {
  color: var(--link_color);
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  color: var(--link_color_hover);
  text-decoration: none;
}

#app {
  padding-top: 66px;
}

#login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10%;
}
#login-content {
  width: 360px;
}

#content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 25px 25px 120px 25px;
}

#content-big {
  max-width: 1920px;
  margin: 0 auto;
  padding: 25px 25px 120px 25px;
}


.auswahl-liste {
  display: flex;
  flex-wrap: wrap;
}

.auswahl-liste > div {
  flex: 0 0 50%;
}

.schacht_hinweis {
  font-size: 10pt;
}

.schacht-badge {
  color: rgb(183 192 201);
  /*font-size: 0.775em;*/
  font-size: 0.7em;
  line-height: 0.83;
  opacity: 0.6;
}

.infofelder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.infofeld {
  flex: 0 0 48%;
  padding: 5px 0;
  display: flex;
}
.infofeld-bezeichnung {
  flex: 0 0 185px;
}
.infofeld-small {
  /*font-size: 11pt;*/
  font-style: italic;
}

.date-field {
  max-width: 185px;
}

.filterbox-ergebnisse {
  height: 282px;
  overflow-y: scroll;
}

.auswahl-liste {
  border: 1px solid transparent;
}

.step-back-button {
  color: #8b8b8b;
  cursor: pointer;
  width: 26px;
  text-align: center;
	font-size: 17pt;
  line-height: 17pt;
  transition: color ease-in 250ms;
}
.step-back-button:hover {
  color: var(--link_color);
}
input.bg-secondary::placeholder { color: #cfcfcf !important; }



.span-kunde-nummer {
  display: inline-block;
  width: 55px;
}

.file-upload-info {
  display: flex;
}
.file-upload-info-name {
  flex: 0 0 65px;
}
.file-upload-info-wert {
  flex-grow: 1;
}

#station-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 50px;
  align-items: center;
  border-top: 1px solid #5a5a5a;
  height: 80px;
  background-color: var(--site_background_color);
}


.lsf {
  display: flex;
  gap: 5%;
  flex-wrap: wrap;
}
.lsf-bild {
  flex: 0 0 21.25%;
  padding: 0 0 5% 0;
  position: relative;
}
.lsf-bild img {
  display: block;
  width: 100%;
}


.auftrag-bilder-lsf {
  display: flex;
  gap: 5%;
  flex-wrap: wrap;
}
.auftrag-bild-lsf {
  flex: 0 0 21.25%;
  padding: 5% 0 0 0;
  position: relative;
}
.auftrag-bild-lsf img {
  display: block;
  width: 100%;
}
.auftrag-bild-lsf-delete {
  position: absolute;
  top: calc(24% + 5px);
  right: 5px;
}

@media screen and (max-width: 764px){
  .auftrag-bild-lsf {
    flex: 0 0 47.5%;
  }
  .auftrag-bild-lsf-delete {
    top: calc(14% + 4px);
  }
}


#designbody { background: none; background-color: #fff !important; color: #1b1b1b; font-size: 10pt; font-weight: 400; font-family: Arial, Sans-serif; }
#designbody ul, ol { padding-left: 21px; }
#designbody p { padding-bottom: 1rem; }
.mceContentBody { padding-top: 0!important; }