/* CSS spezifisch für Monaloga WebApp */

:root {
    --fc-button-bg-color: #007ad9;
    --fc-button-border-color: #007ad9;
    --fc-button-active-bg-color: #005aa1;
    --fc-button-active-border-color: #005aa1;
    --fc-button-hover-bg-color: #005aa1;
    --fc-button-hover-border-color: #005aa1;
}

/* Damit im IE der vertikale Scrollbalken nicht die Webseite überlagert,
  sondern daneben gerendert wird. */

@-ms-viewport {
    width: auto !important;
}

#logo {
    margin-top: 6px;
}

/* Monaloga Background */
/*
.smart-style-3 #header {
    background-color: #0E66B0;
    background-image: linear-gradient(to bottom, #0E66B0, #3E96E0);
}
*/
.ml-logo {
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, 0.4);
}

.ml-logo-span {
    padding-top: 3px;
    padding-left: 5px;
}

.mweb-logo {
    padding-left: 130px;
}

.version-badge {
    margin-top: 10px;
    padding-left: 7px;
    padding-right: 7px;
    color: #FFFFFF;
}

.badge {
    letter-spacing: 0.06em;
    padding: 5px 7px;
    line-height: 0.9;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    /*    box-shadow: 0 2px 5px rgba(0,0,0,.25);*/
}

.smart-form .badge {
    padding: 0px;
}

.smart-style-3 nav ul ul li.active:not(.open) {
    background-color: #4D8BA5;
}

.smart-style-3 nav ul ul li.active:not(.open) > a {
    color: #ffffff !important;
}

.smart-style-3 .header-dropdown-list > li > .dropdown-toggle {
    background-color: transparent;
    text-shadow: none;
    border: 1px solid lightgray;
    border-radius: 3px;
    color: #000;
    line-height: 24px;
    padding: 0px 7px 0px;
    margin-top: 12px;
}

.smart-style-3 .header-dropdown-list > li > .dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.mweb-label {
    color: white;
    padding-left: 20px;
}

.td_sperrmuell_manifest_text {
    padding: 0px;
    padding-left: 10px;
    padding-top: 5px;
}

.td_sperrmuell_manifest_anz {
    padding: 0px;
}

.ml-div-tab-button {
    padding: 10px;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-top: 0px solid #C2C2C2;
    border-bottom: 1px dashed #C2C2C2;
}

/* Damit die Buttons über einer JQuery-Datatable mit einem Icon drin richtig ausgerichtet werden */
.ml-datatable-icon-button {
    line-height: inherit;
    top: 0px;
}

/* Damit die Zeile mit den Spaltenfilten über der Tabelle (unterhalb der Spaltenköpfe) angezeigt wird */
table.dataTable > tfoot {
    display: table-row-group;
}

/* Damit das Auswahlfeld innerhalb eines Spaltenfilters immer die gesamt Spaltenbreite einnimmt */
table.dataTable > tfoot select {
    width: 100% !important;
}

table.dataTable > thead div.input-daterange input {
    width: 50% !important;
}

/* Damit die Label der required-Formularfelder ein Sternchen am Ende bekommen und der Nutzer sofort sieht, dass Eingabe verpflichtend ist. */
.form-group .required .control-label:after {
    content: "*";
    color: red;
}

.smart-form label.control-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td_kennzahlen_main_head {
    background: #ccc;
    font-weight: bold;
    border: 1px solid #bbb;
}

.td_kennzahlen_sub_head {
    background: #ddd;
    font-weight: bold;
    border: 1px solid #bbb;
}

.td_kennzahlen_sum {
    background: #eee;
    border: 1px solid #bbb;
}

.td_kennzahlen_cell {
    background: #ffffff;
    border: 1px solid #bbb;
}

.tr_kennzahlen_separator_t {
    border-top: 1px solid #555;
}

.tr_kennzahlen_separator_b {
    border-bottom: 1px solid #555;
}

input.ng-invalid.ng-touched,
.p-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-invalid.ng-touched div.p-dropdown.p-component,
p-dropdown.ng-invalid.ng-touched label,
select.ng-invalid.ng-touched,
p-calendar.ng-invalid.ng-touched input,
p-multiselect.ng-invalid.ng-touched label.p-multiselect-label,
p-listbox.ng-invalid.ng-touched div.p-listbox-list-wrapper ul,
p-listbox.ng-invalid.ng-touched div.p-listbox-list-wrapper li,
.p-select-container.ng-invalid.ng-touched,
.p-select-container.ng-invalid.ng-touched,
p-autocomplete.ng-invalid.ng-touched span.p-autocomplete.p-component input,
ml-calendarpicker.ng-invalid.ng-touched input,
p-autocomplete.ng-invalid div.p-component,
p-autocomplete.ng-invalid ul {
    background-color: yellow;
}

/* Damit im readonly-Modus der ganze Inhalt/Hintergrund grau dargestellt wird */
p-autocomplete.disabled span.p-autocomplete {
    background-color: #eeeeee;
}

/* Damit das Element nicht etwas höher als der DrillDown-Button rechts daneben ist */
p-autocomplete li.p-autocomplete-input-token input[type=text] {
    height: 30px;
}

div.p-datatable-tablewrapper th {
    white-space: nowrap;
    position: relative;
}

div.p-datatable-tablewrapper th .p-sortable-column-icon {
    position: absolute;
    left: 0px;
    top: 5px;
}

div.p-datatable-tablewrapper th .p-column-title {
    margin-left: 10px;
}

.smart-form input[disabled] {
    background-color: #eee;
}

.ml_maxx_lg {
    max-width: 1000px;
}

.ml_maxx_md {
    max-width: 800px;
}

.ml_maxx_sm {
    max-width: 500px;
}

.bgcol_depth0 {
    background-color: #b9c8df;
}

.bgcol_depth1 {
    background-color: #cbd6e7;
}

.bgcol_depth2 {
    background-color: #dce4ef;
}

.bgcol_depth3 {
    background-color: #eef1f7;
}

/* Workaround - in der SmartAdmin CSS 1.7.1 fehlen col-11 und col-12 ?! */
.smart-form .col-11 {
    width: 91.67%
}

.smart-form .col-12 {
    width: 100%
}

/* Workaround - in SmartAdmin Skin3 "Google" fehlen tiefere Einrückungen */
.smart-style-3 nav > ul > li.open ul li > a,
.smart-style-3 nav > ul > li.open > ul > li > a {
    padding-left: 30px;
}

.smart-style-3 nav > ul > li.open ul li.open ul li > a,
.smart-style-3 nav > ul > li.open > ul > li.open > ul > li > a {
    padding-left: 42px;
}

/* SmartAdmin Skin3-Anpassung für MonaLoga */
.smart-style-3 #header {
    background: #6eadc7;
    background: -moz-linear-gradient(to left, #6eadc7 30%, #F2F2F2 100%);
    background: -webkit-linear-gradient(to left, #6eadc7 30%, #F2F2F2 100%);
    background: linear-gradient(to left, #6eadc7 30%, #F2F2F2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#6eadc7', GradientType=1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.smart-style-3 #logo-group span#activity, .smart-style-3 .btn-header > :first-child > a {
    background-color: transparent;
    background-image: none;
    border: 1px solid #EEEEEE;
}

.smart-style-3 #logo img {
    width: 168px;
    margin-top: 2px;
}

#extr-page #header #logo img {
    width: 235px;
}

.login-info {
    height: 31px;
}

.smart-style-3 aside {
    border-right: 1px solid #DFDFDF;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

nav ul li.active > a::before {
    right: -20px;
}

.smart-style-3 nav ul ul {
    background-color: #eeeeee;
}

.smart-style-3 nav ul ul li {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.smart-style-3 nav ul ul li:last-child {
    border-bottom: 0px;
}

.smart-style-3 nav ul ul ul {
    background-color: #e2e2e2;
}

.smart-style-3 nav ul ul ul li {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.smart-style-3 nav ul ul ul li:last-child {
    border-bottom: 0px;
}

#content {
    padding-top: 0px;
}

.statuscolor_blue {
    background-color: #2399e5;
}

.statuscolor_green {
    background-color: #5cb85c;
}

.statuscolor_yellow {
    background-color: #f0ad4e;
}

.statuscolor_red {
    background-color: #d9534f;
}

.statuscolor_grey {
    background-color: #aaaaaa;
}

.status_fw {

}

.status_fw40 {
    width: 40px;
}

.img_dokument {
    width: auto;
    height: auto;
    max-width: 100%;
    background-color: gray;
}

/* Smartadmin in Mischung mit primeNG passt nicht immer 100% - hier ein paar Korrekturversuche */
.smart-form fieldset {
    padding: 5px 10px 5px;
}

.smart-form .p-tabview .p-tabview-panel {
    padding: 0px;
}

.smart-form .p-tabview-nav {
    border: none;
}

/*.smart-form .p-tabview .p-tabview-panel {*/
/*  border-top: 1px solid #D5D5D5;*/
/*}*/
.p-placeholder {
    color: #898989;
}


.p-button {
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .3);
    border-radius: 3px;
}

.p-button:active {
    box-shadow: none;
}

.smart-form .input input, .smart-form .select select, .smart-form .textarea textarea {
    padding: 5px 0.5em;
}

body button.btn {
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .3);
}


footer.jarvisfooter-fixed {
    position: fixed;
    bottom: 0;
    right: 14px;
    border-right: 1px solid rgba(0, 0, 0, .1);
    border-left: 1px solid rgba(0, 0, 0, .1);
    z-index: 1000;
    padding-top: 0px;
    padding-bottom: 3px;
    line-height: 0.8em;
}

footer.jarvisfooter-fixed .ml-touch-info {
    margin-top: 0px;
    padding-top: 2px;
    line-height: 2em;
}

footer.jarvisfooter-fixed button.btn {
    margin-top: 3px;
    height: 25px;
    font-size: 1em;
    vertical-align: middle;
    line-height: 1em;
}

.p-accordion .p-accordion-content {
    display: unset;
    position: unset;
}

.behInfoPopup td, .behInfoPopup th {
    vertical-align: top;
    line-height: 1.3em;
}

.behInfoPopup th {
    padding-right: 5px;
    white-space: nowrap;
}

#jarviswidget-fullscreen-mode {
    z-index: 999 !important;
}

/*.p-component-overlay.p-sidebar-mask {*/
/*    z-index: 1000 !important;*/
/*}*/
/*.p-sidebar.p-component {*/
/*    z-index: 1005 !important;*/
/*}*/
/** Popover-Tooltips, die im Rahmen des PrimeNG Calenders verwendet werden */
div.popover {
    max-width: 600px;
}

/* Damit beim Texteingabefeld beim Öffnen des Popup-Kalenders der rechte Rahmen weiter zu sehen ist. */
body .p-inputgroup input.p-inputtext:not(:last-child) {
    border-right: 1px solid;
}

/**
 Damit nach dem Update auf PrimeNG 16 wieder etwas Abstand zum Inhalt des Jarvis-Widgets ist
 */
div.jarviswidget div.widget-body.no-padding {
    margin: -10px -10px 0;
}

.hotkey-badge {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 3px;
    border: 1px solid gray;
    background: yellow;
    color: black;
}

button .hotkey-badge {
    position: relative;
}

select .hotkey-badge {
    position: relative;
}

h1:focus, h2:focus, h3:focus, h4:focus, h5:focus {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, .3);
}

.btn-header a:focus {
    border: 1px solid blue;
}

.btn-header > :first-child > a:focus {
    border: 1px solid blue;
}

.header-dropdown-list li:focus {
    border: 1px solid blue;
}

footer button:hover i {
    animation: tada 1s ease-in-out;
}

.fc .fc-button.fc-button-primary {
    font-size: 1.2em;
    line-height: 1em;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Damit man im Zusammenhang mit dem Fullcalendar auch die Fontawesome-Icons
   verwenden kann. */
.fc-icon-fa {
    font-family: FontAwesome !important;
    font-size: 1.0em !important;
}