:root{
  --site_background_color: #222;
  --site_text_color: #dcdcdc;

  --menu_bar_height: 60px;
  --content_padding: 15px;

  --bahn_eintrag_height: 90px;
  --bahn_eintrag_head_height: 24px;
  --bahn_border_width: 2px;
  --bahn_border_color: #5f5f5f;

  --bahn_buchung_hover_background_color: rgb(53 53 53);
  --bahn_buchung_hover_transition: background-color 200ms ease-in;
  
  --datepicker_background_color: rgb(51, 51, 51);
  --datepicker_text_color: rgb(212 212 212);
  --datepicker_border_color: rgb(140, 140, 140);
  
  --buchung_doppel_bahn_background_color: #7d7d7d;

  --big_control_active_color: #019801;
  --big_contril_active_background_color: rgb(0 128 0 / 20%);
  --big_control_disabled_color: #b10d0d;
  --big_control_disabled_background_color: rgb(177 13 13 / 20%);

}

::-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; }

.bahn-eintrag-edit { position: absolute; left: 0; top: 0; width: 100%; z-index: 25; }
.bahn-eintrag-edit-modal { cursor: pointer; }
.beh1 { height: calc(var(--bahn_eintrag_height) * 1); }
.beh2 { height: calc(var(--bahn_eintrag_height) * 2); }
.beh3 { height: calc(var(--bahn_eintrag_height) * 3); }
.beh4 { height: calc(var(--bahn_eintrag_height) * 4); }
.beh5 { height: calc(var(--bahn_eintrag_height) * 5); }
.beh6 { height: calc(var(--bahn_eintrag_height) * 6); }
.beh7 { height: calc(var(--bahn_eintrag_height) * 7); }
.beh8 { height: calc(var(--bahn_eintrag_height) * 8); }
.beh9 { height: calc(var(--bahn_eintrag_height) * 9); }
.beh10 { height: calc(var(--bahn_eintrag_height) * 10); }
.beh11 { height: calc(var(--bahn_eintrag_height) * 11); }
.beh12 { height: calc(var(--bahn_eintrag_height) * 12); }
.beh13 { height: calc(var(--bahn_eintrag_height) * 13); }
.beh14 { height: calc(var(--bahn_eintrag_height) * 14); }
.beh15 { height: calc(var(--bahn_eintrag_height) * 15); }
.beh16 { height: calc(var(--bahn_eintrag_height) * 16); }
.beh17 { height: calc(var(--bahn_eintrag_height) * 17); }
.beh18 { height: calc(var(--bahn_eintrag_height) * 18); }
.beh19 { height: calc(var(--bahn_eintrag_height) * 19); }
.beh20 { height: calc(var(--bahn_eintrag_height) * 20); }
.tooltipbig .tooltip-inner { max-width: 999px; width: auto; background-color: #131313; font-size: 14pt; text-align: left; color: var(--site_text_color); border: 3px solid #dcdcdc; }
.tooltipbig-table { margin: 15px; padding: 5px; border-top: 1px solid #3a3a3a; }
.tooltipbig-table tr td:first-child { padding: 4px 8px 4px 0; border-right: 1px solid #3a3a3a; }
.tooltipbig-table tr td:last-child { padding: 4px 0px 4px 8px; }
.tooltipbig-table tr td { border-bottom: 1px solid #3a3a3a; }
/*.tooltipbig-table tr:last-child td { border-bottom: 0; }*/
.tooltipbig-table-td-no-border td { border-right: 0 !important; height: 40px; }
.tooltipbig { opacity: 1 !important; }
.tooltipbig.bs-tooltip-top .tooltip-arrow::before { border-top-color: #dcdcdc !important; }
.tooltipbig.bs-tooltip-end .tooltip-arrow::before  { border-right-color: #dcdcdc !important; }
.tooltipbig.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #dcdcdc !important; }
.tooltipbig.bs-tooltip-start .tooltip-arrow::before { border-left-color: #dcdcdc !important; }


#sonderoeffnungszeit_delete { z-index: 1070; }


.formError .formErrorContent { border-color: #ee0101; font-size: 13px; font-family: 'Roboto', sans-serif; font-weight: 400; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; white-space: nowrap; }
.formError .formErrorArrow div { border-color: #ee0101; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; }
.formError .formErrorArrow .line3 { border-color: #ee0101; background: #ee0101; }
.formError .formErrorArrow .line2 { border-color: #ee0101; background: #ee0101; }
.formError .formErrorArrow .line1 { border-color: #ee0101; background: #ee0101; }

.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; }



input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}


.form-select.bg-dark:disabled, .form-control.bg-dark:disabled { background-color: #353535 !important; border-color: #585858; color: #909090 !important; }



* { 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; }


a:focus { outline: none; }
a { color: #0d6efd; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { color: #0d6efd; text-decoration: none; }

#page { min-width: 3420px; width: 100%; padding-top: var(--menu_bar_height); }

#menu-bar { height: var(--menu_bar_height); width: 100%; background-color: #353535; border-bottom: 1px solid #505050; display: flex; justify-content: space-between; padding: 0 20px; position: fixed; z-index: 250; }
#menu-bar.abomode { background: repeating-linear-gradient( 45deg, #222222, #222222 10px, #810000 10px, #810000 20px ); }
#menu-bar-logo img { display: block; height: 100%; }
#menu-bar-controls { position: absolute; left: 50%; top: 12px; transform: translate(-50%, 0); }
#menu-bar-controls-flex { display: flex; align-items: center; gap: 15px; height: 100%; }
#menu-bar-menu { display: flex; align-items: center; flex: 0 0 320px; justify-content: flex-end; }

#content { padding: var(--content_padding); }

#tbl-bahnen { width: 100%; max-height: calc(100vh - var(--menu_bar_height) - (var(--content_padding) * 2)); }
#tbl-bahnen thead th { font-weight: 600; border-right: 1px solid #505050; border-bottom: 1px solid #505050; text-align: center; font-size: 16pt; }
#tbl-bahnen thead th:last-child { border-right: 0; }
#tbl-bahnen td { width: calc(100% / 15); border-right: 1px solid #505050; vertical-align: top; }
#tbl-bahnen td:last-child { border-right: 0; }



#bahnen-liste { width: 100%; display: flex; border-bottom: var(--bahn_border_width) solid var(--bahn_border_color); }
.bahn { width: calc(100% / 15); }
.bahn-head { font-weight: 600; border: var(--bahn_border_width) solid var(--bahn_border_color); border-left: 0; text-align: center; font-size: 16pt; }

.bahn-head-flex { display: flex; }
.bahn-doppel-bahn-info { flex: 0 0 25px; color: rgb(156 156 156 / 75%); display: none; }
.dbi-left { text-align: left; }
.dbi-right { text-align: right; }
.bahn-titel { flex-grow: 1; }

.bahn-eintrag { height: var(--bahn_eintrag_height); position: relative; transition: background-color 150ms ease-in; border-right: var(--bahn_border_width) solid var(--bahn_border_color); border-top: var(--bahn_border_width) solid var(--bahn_border_color); }
.bahn-eintrag:first-child { border-top: 0; }
.bahn:first-child .bahn-head, .bahn:first-child .bahn-eintrag { border-left: var(--bahn_border_width) solid var(--bahn_border_color); }

.bahn-eintrag-head { width: 100%; border-bottom: 2px solid #383838; display: flex; height: var(--bahn_eintrag_head_height); max-height: var(--bahn_eintrag_head_height); }
.bahn-buchung-zusatz { font-size: 9pt; line-height: 9pt; padding: 5px; flex-grow: 1; text-align: center; font-weight: bold; }
.bahn-oeffnungszeit { font-size: 9pt; line-height: 9pt; z-index: 50; /*margin-left: auto;*/ border-right: var(--bahn_border_width) solid #383838; padding: 5px; font-weight: bold; }

.bahn-eintrag-no-border { border-top: 0; }
.bahn-eintrag-no-border .bahn-oeffnungszeit { border-top: var(--bahn_border_width) solid #383838; border-bottom: var(--bahn_border_width) solid #383838; height: calc(2px + var(--bahn_eintrag_head_height)); }
.bahn-eintrag-no-border .bahn-eintrag-head { border-bottom: 0; max-height: calc(2px + var(--bahn_eintrag_head_height)); }





.bahn-button { font-size: 8pt; line-height: 8pt; padding: 4px 4px; background-color: #6f6f6f; border-radius: 3px; border: 0; color: var(--site_text_color); }
.bahn-button:hover { background-color: 888888; }

.add-buchung { position: absolute; left: 0; top: var(--bahn_eintrag_head_height); width: 100%; height: calc(100% - var(--bahn_eintrag_head_height)); background-color: transparent; border: 0; cursor: pointer; color: var(--site_text_color); transition: var(--bahn_buchung_hover_transition), opacity 200m ease-in; z-index: 50; text-align: center; display: flex; align-items: center; justify-content: center; opacity: 0.1; }
.add-buchung:hover { background-color: var(--bahn_buchung_hover_background_color); opacity: 1; }
.add-buchung span { width: 0; overflow: hidden; transition: width 150ms ease-in; transform-origin: left center; display: inline-block; text-align: right; white-space: nowrap; }
.add-buchung:hover span { width: 140px; }
.add-buchung i { display: inline-block; transition: padding 150ms ease-in, color 100ms ease-in; padding-right: 0; }
.add-buchung:hover i { padding-right: 5px; color: #0aa900; }




.bahn-buchung-infos { font-size: 10pt; line-height: 10pt; display: flex; flex-direction: column; height: calc(100% - var(--bahn_eintrag_head_height)); justify-content: center; position: relative; }
.bahn-buchung-info { padding: 2px 5px 2px 10px; }
.bahn-buchung-info i { padding-right: 3px; }
.bahn-buchung-edit { background-color: transparent; position: absolute; left: 0; top: calc(0px - var(--bahn_eintrag_head_height)); width: 100%; height: calc(100% + var(--bahn_eintrag_head_height)); border: 0; z-index: 100; }
.bahn-buchung-infotext { display: flex; align-items: center; }
.bahn-buchung-infotext-icon { flex: 0 0 18px; }
.bahn-buchung-infotext-content { flex-grow: 1; }
.bahn-buchung-mitarbeiter { font-size: 9pt; line-height: 9pt; padding: 5px 5px 5px 10px; margin-left: auto; }
.bahn-buchung-info-bahnen i::before { transform: rotate(90deg); }
.bahn-buchung-info-name { font-weight: bold; }


.bahn-eintrag-indicator { position: absolute; left: 0; top: 0; height: 100%; width: 5px; }
.bahn-eintrag-indicator-farbe-1 { background-color: #2371ff; }
.bahn-eintrag-indicator-farbe-2 { background-color: #00ff08; }


.bahn-buchung-farbe1 { background-color: rgb(25 24 109); transition: background-color 150ms ease-in; }
.bahn-buchung-farbe2 { background-color: rgb(13 82 0 / 93%); transition: background-color 150ms ease-in; }
.bahn-buchung-farbe3 { background-color: rgb(142 92 0); transition: background-color 150ms ease-in; }

#bt-add-date-time { display: flex; gap: 50px; }
#bt-date-container { flex: 0 0 200px; }
#bt-add-time-container { display: flex; gap: 50px; }
.bt-time-container { flex: 0 0 180px; }

#bt-edit-date-time { display: flex; gap: 50px; }
#bt-edit-date-container { flex: 0 0 200px; }
#bt-edit-time-container { display: flex; gap: 50px; }

#sperre-infotext { text-align: center; font-size: 20pt; padding-top: 50px; }

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

.modal-size-buchung { max-width: 1525px; }


.bahn-checkbox { position: relative; }
.doppelbahn-info-right { position: absolute; top: -7px; right: -5px; height: 2px; width: calc(100% - 38px); background-color: var(--buchung_doppel_bahn_background_color); }
.doppelbahn-info-right::after { display: block; content: ''; position: absolute; left: 0; top: 0; height: 7px; width: 2px; background-color: var(--buchung_doppel_bahn_background_color); }
.doppelbahn-info-left { position: absolute; top: -7px; left: -5px; height: 2px; width: calc(100% - 38px); background-color: var(--buchung_doppel_bahn_background_color); }
.doppelbahn-info-left::after { display: block; content: ''; position: absolute; right: 0; top: 0; height: 7px; width: 2px; background-color: var(--buchung_doppel_bahn_background_color); }
.bahn-checkbox [type="checkbox"] { display: none; }
.bahn-checkbox label { display: flex; position: relative; width: 88px; height: 88px; align-items: center; justify-content: center; border: 2px solid #737373; border-radius: 5px; cursor: pointer; }
.bahn-checkbox label span { display: block; padding-top: 34px; font-size: 15pt; }
.bahn-checkbox label::before { display: block; content: "\f584"; font-family: bootstrap-icons !important; font-weight: normal; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); font-size: 15pt; }
.bahn-checkbox input:checked ~ label::before { content: "\f26c"; color: var(--big_control_active_color); }
.bahn-checkbox input:checked ~ label { border-color: var(--big_control_active_color); background-color: var(--big_contril_active_background_color); }
.bahn-checkbox input:disabled ~ label::before { content: "\f628"; color: var(--big_control_disabled_color); }
.bahn-checkbox input:disabled ~ label { border-color: var(--big_control_disabled_color); background-color: var(--big_control_disabled_background_color); cursor: not-allowed; }



.big-radio [type="radio"] { display: none; }
.big-radio label { display: flex; position: relative; width: 88px; height: 88px; align-items: center; justify-content: center; border: 2px solid #737373; border-radius: 5px; cursor: pointer; }
.big-radio label span { display: block; padding-top: 34px; font-size: 15pt; }
.big-radio label::before { display: block; content: "\f28a"; font-family: bootstrap-icons !important; font-weight: normal; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); font-size: 15pt; }
.big-radio input:checked ~ label::before { content: "\f517"; color: var(--big_control_active_color); }
.big-radio input:checked ~ label { border-color: var(--big_control_active_color); background-color: var(--big_contril_active_background_color); }
.big-radio input:disabled ~ label::before { content: "\f622"; color: var(--big_control_disabled_color); }
.big-radio input:disabled ~ label { border-color: var(--big_control_disabled_color); background-color: var(--big_control_disabled_background_color); cursor: not-allowed; }


.big-checkbox [type="checkbox"] { width: 0; height: 0; overflow: hidden; }
.big-checkbox label { display: flex; position: relative; width: 88px; height: 88px; align-items: center; justify-content: center; border: 2px solid #737373; border-radius: 5px; cursor: pointer; }
.big-checkbox label span { display: block; padding-top: 34px; font-size: 15pt; }
.big-checkbox label::before { display: block; content: "\f584"; font-family: bootstrap-icons !important; font-weight: normal; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); font-size: 15pt; }
.big-checkbox input:checked ~ label::before { content: "\f26c"; color: var(--big_control_active_color); }
.big-checkbox input:checked ~ label { border-color: var(--big_control_active_color); background-color: var(--big_contril_active_background_color); }
.big-checkbox input:disabled ~ label::before { content: "\f628"; color: var(--big_control_disabled_color); }
.big-checkbox input:disabled ~ label { border-color: var(--big_control_disabled_color); background-color: var(--big_control_disabled_background_color); cursor: not-allowed; }





#designbody													{ background: none; background-color: #fff; color: #000; font-size: 11pt; }
#designbody ul,ol                   { padding-left: 21px; }
#designbody p                       { padding-bottom: 17px; }
.mceContentBody 										{ padding-top: 0px !important; }