/*                    I N H A L T S V E R Z E I C H N I S
	1. Grundeinstellungen
	1.1. allgemeine Systemeigenschaften
	1.2. schriftgrößenbasierende Layoutanpassung
	1.3. Seitenaufteilung
	2. Farbzuweisungen
	3. Hintergrundbilder
	4. Menugestaltung
	4.1. Topmenu
	4.2. Menu Links
	4.3. Menu im Contentbereich (Sitemap)
	4.4. Menu Rechts
	5. allg. Formatierungen nach Position
	5.1. Formatierungen ohne Positionsbezug
	5.2. Formatierungen im Kopfbereich
	5.3. Formatierungen im linken Bereich
	5.4. Formatierungen im Inhaltsbereich
	5.5. Formatierungen im rechten Bereich
	5.5. Formatierungen im Footer
	6. Debugeinstellung
	6.1 CFDUMP

	1. GRUNDEINSTELLUNGEN -------------------------------------------------------
	1.1 allgemeine Systemeigenschaften ------------------------------------------ */

.ui-sortable tr { cursor: move; }

div#loading-bg{
	position: fixed;
	left: 0;
	top: 0;
    width: 100%;
    height: 100%;
	z-index: 100;
	background-color: black;
	opacity: 0.25;
	display: none;
}

.pointer { cursor: pointer; }

#logo, #rechts, #content, #footer {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-align: left;
}
.introjs-tooltip {
    font-family: Verdana, Helvetica, Arial, sans-serif;}

div#center * {
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

a, a:link, a:visited, a:active {
	text-decoration: none !important;
	font-weight: normal;
}

.hidden { display: none; }

.clear { clear: both; }

a img { border: 0; }

label span,
input,
select,
textarea { font-family: Verdana, Arial, Helvetica, sans-serif !important; }

/*	1.2. schriftgr��ebasierende Layoutanpassung --------------------------------- */

/* Kommentar: Festlegung der absoluten Basisschriftgr��e. */
html { font-size: 20px; }

/* Kommentar: Festlegung des relativen Bezugs f�r den Seiteninhalt */
body { font-size: 1em; }

/* Kommentar: Festlegung des relativen Bezugs f�r inline-Tags des Seiteninhalts */
p, div, span, form *, img, table *, th, td, ul *, ol *, a:link, a:active, a:hover, a:visited { font-size: 1em; }


/* Kommentar: Herstellung eines Schriftgr��enverh�ltnisses von 1em = 10px */
#center { font-size: 0.5em; }

#center img { font-size: 1em; }

/* Kommentar: Nachfolgend die Definition des Schriftgrades f�r angezeigten Text auf 11px = 1em */
div#logo div.bf_wrapper,
div#links div.bf_wrapper,
div#content div.bf_wrapper { font-size: 1.2em; line-height: 1.4em }

div#center h1 { font-size: 2.56em; line-height: 140% !important; }
div#center h2 { font-size: 1.92em; line-height: 100% !important; }
div#center h3 { font-size: 1.44em; line-height: 100% !important; }
div#center h4 { font-size: 1.28em; line-height: 100% !important; }
div#center h5 { font-size: 1em; line-height: 100% !important; }
div#center h6 { font-size: 0.8em; line-height: 100% !important; }

div#content img { font-size: 0.8em; }

div#content * { font-size: 1em; }

/*	1.3. Seitenaufteilung ------------------------------------------------------- */

div#rechts { display: none; }

div#footer {
 display: inline-block;
 width: 100em;
 padding: 0;
 margin: 1em 0 0;
 height: 9.8em;
}

#content table th { background-color: #dedfe1; }

/* Tabelle 7 Tage */

#content #booking_calendar table.days_7 th.days span.day { width: 14.28%; }

#content #booking_calendar table.days_7 div.row div.booking_row .booking_day { width: 14.28%; float: left; height: 100%; }

#content #booking_calendar table div.row div.booking_row .booking_day { border-right: 1px solid #dee2e6; }

#content #booking_calendar table div.row div.booking_row .booking_day:last-child { border-right: none; }

#content #booking_calendar table div.row div.booking_row .booking_day .new_booking { width: 100%; height: 100%; float: left; }

#content #booking_calendar table div.row div.booking_row .booking_day:hover .new_booking a { display: block; height: 100%; }

/* Tabelle 6 Tage */

#content #booking_calendar table.days_6 th.days span.day { width: 16.66%; }

#content #booking_calendar table.days_6 div.row div.booking_row .booking_day { width: 16.66%; float: left; height: 100%; }

/* Tabelle 5 Tage */

#content #booking_calendar table.days_5 th.days span {  width: 20%; }

#content #booking_calendar table.days_5 div.row div.booking_row .booking_day { width: 20%; float: left; height: 100%; }

#content #booking_calendar table.time div.row div.booking_row .booking_day { float: left; height: 100%; }

#content #booking_calendar table div.row div.booking_row .booking_day .new_booking a:hover { background: #cbcbcb; text-decoration: none; }

#footer { background: #838486 url('../images/bg_footer.jpg') top repeat-x; }

/*	4. Menugestaltung ----------------------------------------------------------- */

#update_required_image{
	position: relative!important;
	float: right;
}

/*	5.3. Formatierungen im linken Bereich --------------------------------------- */

#links h2 { font-size: 1.3em !important; font-weight: bold; color:#e87c00; }

#links a,
#links a:visited { color: #000; }

/*	5.4. Formatierungen im Contentbereich --------------------------------------- */
/*	5.4.1. allgemeine Formatierungen -------------------------------------------- */

#content h1 { font-size: 1.3em !important; margin-top: 0; }

#content a,
#content a:visited { color: #000; }

#content table tr.selected { background-color: #d0d0d0; }

div#current_year { width: 20rem; }

/* Datatables overwrite default */
#default_table_filter { display: flex; }

#filterButtonWrapper { display: flex; flex-direction: column; margin: 1em; }

#default_table_filter { display: flex; justify-content: space-between; }

#default_table_wrapper .bottom { margin-top: 1em; }

#tabs #default_table_wrapper .bottom > * { margin: 0 .5em; }

#tabs #default_table_wrapper .dataTables_length { margin: 0 .5em; }

.dataTables_length label { display: flex; align-items: center; }

.dataTables_length select, .dataTables_filter input {
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	margin-right: 1em;
	font-size: 1rem;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#customFilter { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

#default_table span.regularbooking_time { font-size: .75em; }

#content #bookingcollection label { display: inline-block; width: 16em; padding: 0.3em 1.6em; vertical-align: middle; }

#content .add_btn, #content .delete_btn, #content .select_btn { padding: .5em; }

/*	5.4.2.2. Buchungskalender --------------------------------------------------- */

#content #box_close_link,
#content #box_close_img { display: none; }

.ui-menu-item { font-size: .85em; }

.ui-widget * { font-family: Verdana, Helvetica, Arial, sans-serif; }

#content #select_link #weekly_selection a:hover { color: #fff; }

#content #booking_calendar tr  { height: 4em; }

#content #booking_calendar tbody td.bookings { width: 80%; }

#content #booking_calendar td .row { height: 4em; }

#content #booking_calendar td .row + .row { border-top: 1px dotted #ddd }

#content #booking_calendar td .row div.bookingEntry { height: 2em; position: relative !important; top: -3.4em !important; display: inline-block; font-size: 0.8em; color: #000; }

#content #booking_calendar td .row .bookingEntry .outer_start_time { margin-left: -4em; float: left; }

#content #booking_calendar td .row .bookingEntry .outer_end_time { margin-right: -4em; float: right; }

#content #booking_calendar td .row .bookingEntry .outer_start_time_en { margin-left: -6em; float: left; }

#content #booking_calendar td .row .bookingEntry .outer_end_time_en { margin-right: -6em; float: right; }

#content #booking_calendar td .row .bookingEntry .inner_start_time { margin-left: 0.5em; float: left; color: #fff; }

#content #booking_calendar td .row .bookingEntry .inner_end_time { margin-right: 0.5em; float: right; color: #fff; }

#content #booking_calendar td .row .bookingEntry .inner_start_time_en { margin-left: 0.5em; float: right; color: #fff; }

#content #booking_calendar td .row .bookingEntry .hide { display: none !important; }

#content #booking_calendar table th.days span.date_description,
#content #booking_calendar table td .row .bookingEntry .booking_description,
#property_content .hover_description,
.hover_description { display: none; z-index: 100 !important; }

#content #booking_calendar table td .row .booking_border  { height: 150%; transition: all .5s ease-in-out; }

#content #booking_calendar table th span.day:hover span.date_description,
#content #booking_calendar table td .row .bookingEntry:hover .booking_description,
.hover_description_wrapper:hover .hover_description {
	display: inline-block;
	position: absolute !important;
	cursor: default;
	min-width: 17.5em;
	background-color: #fff;
	padding: 0.2em 0.5em;
	margin: 0.5em 0 0 -9em;
	border: 1px solid #848484;
}

.fa-comment {
	position: absolute;
	left: -7px;
	top: -4px;
}

#content div.released { background-color: #28a745; }

#content div.rejected { background-color: #dc3545; }

#content div.waiting { background-color: #ffc107; }

#content div.blocked { background-color: #343a40; }

#content div.holiday { background-color: #6c757d; }

#content div.bookinglock { background-color: #A01c2c; }

#content #legend .bg-colors {  width: 2em; height: 1.4em; padding: .5em; margin-right: .5em;}

/*	5.6. Formatierungen im Footer ----------------------------------------------- */

#footer a,
#footer a:visited { color: #000; }

#footer .bf_wrapper { font-size: 1.1em; padding: 2em 0 0; text-align: center; }

#content .booking_details table td { width: 50%; }

.dialog_load{
	text-align: center;
	margin-top: 50px;
}

.disabled_button{
	opacity: 0.3;
}

/* Component containers */
.ui-dialog {
 font-size: 0.66em !important;
 border: 1px solid #6c757d;
}

.ui-dialog .ui-dialog-buttonpane { margin: 0; }

.ui-dialog-buttonset .ui-button {
	border: 0;
	font-weight: normal;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	outline: none;
}

.ui-dialog-buttonset .ui-button-text {
	background-color: #6c757d;
	color: #ffffff;
	border-radius: .25rem;
	padding: .425rem .75rem;
	cursor: pointer;
}
.ui-dialog-buttonset .ui-button-text:hover { background-color: #5a6268; }

.ui-dialog .ui-widget-content .hover_description { font-size: .8em; }

.ui-dialog .ui-widget-header { background: #6c757d; font-weight: normal; font-size: 1.1em; }

.ui-dialog-content h5 { font-size: 1em; }

/*	6. Debugeinstellungen -------------------------------------- */
/*	6.1 CFDUMP */

table.dump tr td.dump_value:last-child{
    width: 50em !important;
}

table.dump tr td, table.dump tr{
    text-align: left !important;
}

.dump_pointer{
    cursor: pointer;
}

.dump_value{
    cursor: default;
}

table.dump{
    margin: 0;
}

table.dump tr td:last-child{
    width: auto;
}

.RowComment{
	display: none;
	position: inherit; 
	z-index: 100;
	border: 1px;
	background-color: white;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(85, 85, 85);
	padding: 2px;
	color: rgb(10, 10, 10); 
	top: 10px; 
	left: 10px;
}

.RowWithComment span.RowComment {
    display: none;
}
.RowWithComment:hover span.RowComment {
    display: block;
    position: fixed;
    overflow: hidden;
	padding: 0%;
}

span.RowComment td {
	border: none;
	text-align: left;
}


/*  BOOTSTRAP OVERRIDES & NEW CUSTOM-STYLES */

html, body { width:100%; overflow-x: hidden !important; }

#logo #topnavi { height: 6em !important; color: #fff; background-color: #295a9e; }

#logo #topnavi h1 a:hover { text-decoration: none; }

#logo #topnavi #service_links a { color: #fff !important; font-size: 1.2em; }

#logo #topnavi h1 a:hover, #logo #topnavi #service_links a:hover, .dropdown-item:focus, .dropdown-item:hover { color: #e87c00 !important }

.dropdown-item:active { background-color: #fff !important;}

#logo #topnavi #username { font-size: 1.4em; }

#logo #topnavi .dropdown-item, #logo #topnavi .abmelden { font-size: .6em; }

.login-btn { width: 100px !important; }

button.dt-button { background: none !important; }
.dt-down-arrow { display: none; }
div.dt-button-collection { width: 14em !important; }
div.dt-button-collection button.dt-button { background: #6c757d !important; color: #fff; box-shadow: none !important; width: 100% !important; font-size: .7em; opacity: .8; }
div.dt-button-collection button.dt-button:hover {background: #5a6268 !important }
div.dt-button-collection button.dt-button.active { opacity: 1; }

/* Styles for Terminbuchungsassistent */
#servicetimes_grid_items {
	display: flex;
	align-items: center;
	margin: 1em 1.5em 1em 1.5em;
}

.servicetimes-duration {
	display: flex;
	align-items: center;
}

.servicetimes-duration label {
	margin: 0;
}
.flashMessages div {
	padding: 10px;
}
.flashMessages div p {
	font-size: 1.3em;
	margin-bottom: 0;
	text-align: center;
}
.flashMessages div.alert-danger ul.errorMessages {
	margin: 0;
	padding: 0%;
}
ul.errorMessages {
	padding: 10px;
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}
ul.errorMessages li {
	text-align: center;
	font-size: 1.3em;
	padding: .3em;
}

tr.tr_error ul.errorMessages {
	margin: 0;
	padding: .2em
}
div.dialog_content ul.errorMessages li {
	font-size: .9em;
	padding: 0;
}
.nav-pills .nav-link {
	border-radius: 0% !important;
}
.nav-pills .nav-link.active {
	background-color: #6c757d !important;
	color:#fff !important;
}
.pagePicker {
	float: right;
}
.pagePicker > * {
	padding: 0.5em 1em;
	margin-left: 3px;
	cursor: pointer;
	text-decoration: none !important;
}
.pagePicker a {
	color: #333 !important;
	border: 1px solid transparent;
}

.pagePicker .currentPage {
	color: #333 !important;
	border: 1px solid #e87c00;
}
.pagePicker a:hover, .pagePicker .currentPage:hover {
	color: white !important;
	background-color: #e87c00;
}

div.booking_details div#booking-part table:last-of-type { margin-bottom: 0; }

/* ICON STYLES */
i.fas, i.far { font-size: 1.3em !important; font-weight: 900 ; font-family: "Font Awesome 5 Free" !important; cursor: pointer; }

#content .table i.fas, i.far { font-size: 1.1em !important;}

i.selectAll { color:#006400; }

i.selectNone { color:#5A5A5A; }

.fa-info-circle { color:#7db9e8;  float: right; }

.fa-question-circle { color:#7db9e8; } /* Zeig mir wie */

.fa-edit, i.handoverprotocol, .fa-random.green, .fa-check-circle, .fa-circle, i.ldap, .flag-released { color:#28a745; }

.fa-search, .fa-wrench, .fa-exclamation-triangle, .flag-waiting, .fa-lock { color:#ffb347; }

.fa-plus-circle, .fa-file-excel { color:#0d7024; }

.fa-ban { color:#A01c2c}

.fa-eye { color:#7db9e8; }

.fa-wallet { color: #FBB117; }

.fa-file-upload, .fa-file-csv { color:#46a1e0; }

.fa-trash { color:#6c757d; }

.fa-trash-alt { color:#e31717; }

i.fa-trash.cancel-past-bookings { color: #e31717; }

.fa-minus-circle, .fa-file-pdf, .fa-file, i.offline, .fa-exclamation-circle,
.fa-random.red, i.returnprotocol, .flag-rejected { color: #e31717; }

#content .table i.fa-circle, i.offline { font-size: .5em !important; }

.flag-cancelled { color: #8d98a1; }

.flag-payment-waiting { color: #ff991c; }

i.fa-user-circle { font-size: 2em !important; }

#content .table i.fas.fa-user-alt { color: #7db9e8; font-size: .8em !important; }

i.fa-user-circle:hover { color:#e87c00; }

#links #wrapperitem span.caret i { font-size: 1.7em !important; }

/* ***********  UI-DATEPICKER  ***********/
.ui-datepicker-calendar { color: #000 }

.ui-datepicker .ui-datepicker-header { background: #6c757d; }

.ui-widget .ui-datepicker-title { font-size: 0.9em; }

.ui-datepicker-calendar .ui-state-default { color: #000 !important; }

.ui-datepicker-calendar .ui-state-default:hover { background-color: #e0e0e0; }

.ui-datepicker td span, .ui-datepicker td a { text-align: center; }

.ui-widget .ui-state-highlight  { background: none; background-color: #ffe45c; }

/* ***********  UI-DATEPICKER FOR CALENDAR-VIEWS  ***********/
.hasDatepicker .ui-datepicker-inline {
	width: 22em;
	border-color: #6c757d;
	-moz-box-shadow: 0 0 2px #6c757d;
	-webkit-box-shadow: 0 0 2px #6c757d;
	box-shadow: 0 0 2px #6c757d;
}

.hasDatepicker .ui-datepicker td span, .hasDatepicker .ui-datepicker td a { padding: .4em; }

.monthly_calendar .hasDatepicker .ui-datepicker-title { display: flex; justify-content: space-between; }

.monthly_calendar .hasDatepicker .ui-datepicker .ui-datepicker-prev,
.monthly_calendar .hasDatepicker .ui-datepicker .ui-datepicker-next { top: 9px; }

.monthly_calendar .hasDatepicker select.ui-datepicker-month,
.monthly_calendar .hasDatepicker select.ui-datepicker-year {
	width: 100%;
	padding: .37rem .70rem;
	font-size: .5rem;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}

/*  Styles für ein einklappbares Menu */

ul, #inflatableList { list-style-type: none; }

.caret {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: baseline;
	padding: 7px;
}

.nested {
	display: none;
}

.active {
	display: block;
}

#content .bf_wrapper h1 { color: #295a9e; }

#logo #topnavi .dropdown-menu { left: 7%; }

/* dropdown in buchung*/
.resource .nogroup{
	border-top: 1px solid;
	padding-top: .5em;
}

/* Die Klasse wird allen Kalender-Rows hinzugefügt und erlaubt die schnelle
und leichte visuelle Unterscheidung von Sub-Ressource-Rows von anderen Rows */
tr.subresource {background:aliceblue;}

input:invalid{
    border: 2px solid red;
}

.notifyBubble {
    padding: 2px 7px 2px 7px;
	align-self: center;
    background-color: red;
    color: white;
    border-radius: 50%;
    box-shadow: 1px 1px 1px gray;
    margin-left: 4px;
	font-size: 16px;
}

div.sperrmuellInfo {
	background-color: #dedfe1 !important;
}
div#center div.bulktrashinput {
	margin: 0 100px;
}
h5#privacymodallabel .model-title{
    font-size: 3em !important;
}


article.material .quantity_wrap {
	width: 30%;
	float: right;
	position: relative;
  }
  
  .quantity_wrap {
	width: 100px;
	position: relative;
	border-radius: 4px 4px 4px 4px;
	position: relative;
	user-select: none;
  }
  
  .quantity_wrap .quantity-button.quantity-down {
	left: 0;
	background: #efefef;
	border-radius: 10px 0 0 10px;
  }
  .quantity_wrap .quantity-button {
	cursor: pointer;
	text-align: center;
	font-size: 20px;
	line-height: 1.7;
	user-select: none;
	position: absolute;
	padding: 0;
	top: 0;
	line-height: 42px;
	height: 42px;
	width: 29px;
	font-weight: 100;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  .quantity_wrap .quantity-button.quantity-up {
	right: 0;
	background: #efefef;
	border-radius: 0 10px 10px 0;
  }
  
  .quantity_wrap .quantity-button {
	cursor: pointer;
	text-align: center;
	font-size: 20px;
	line-height: 1.7;
	user-select: none;
	position: absolute;
	padding: 0;
	top: 0;
	line-height: 42px;
	height: 42px;
	width: 29px;
	font-weight: 100;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  article.material .quantity {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
  }
  
  
  .quantity_wrap input {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	width: 42px;
	height: 42px;
	display: block;
	border: 0px;
	text-align: center;
	background: transparent;
	font-weight: 100;
	background: #efefef;
  }
  
article.material .quantity_wrap span {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	line-height: 1em;
	margin: 5px 0 0 0;
	padding: 0;
  }
  
.quantity-input {
	width: 40px !important;
	text-align: center;
}