/*
   =================================================================
     essential
   =================================================================
*/
* {
    box-sizing: border-box;
}


/* main layout */
.appcontainer .row {
    display: flex;
}

.ui-shadow{
    box-shadow:none;
}

.ui-datatable-scrollable-header table,
.ui-datatable-scrollable-body table,
.ui-datatable-scrollable-footer table {
    table-layout: fixed; 
}


/*
   =================================================================
   previous style classes 
   =================================================================
*/


.boldtext {
    font-weight: bold;
}

.h1 {
    font-size: 1.7em;
}

.h1big {
    font-size: 2.3em;
}

.ui-fieldset.active {
    background: #fbfbfb;
}



/*
   =================================================================
     style for svg images and icons
    ================================================================
*/

.pdfimage {
    margin-bottom: 0.4em;
    vertical-align: middle;
    margin-right: 2px;
    height: 2rem;

}
.pdfimage_small {
    margin-bottom: 0.1em;
    vertical-align: middle;
    margin-right: 2px;
    height: 1.6rem;

}

.pdfimage_big {
    margin-bottom: 0.1em;
    vertical-align: middle;
    margin-right: 2px;
    height: 4rem;

}

.icon_history {
    margin-top: 0.1rem;
    vertical-align: middle;
    margin-right: 2px;
    height: 1.8rem;
}

.icon_help {
    vertical-align: middle;
    margin-left: 0.3rem;
    margin-right: 2px;
    height: 1.6rem;
 
}

/*
   =================================================================
     colored top navigation
   =================================================================
*/

#logo_info, #logo_monitor, #logo_cockpit, logo_profile, #logo_auditor {
    display: none;
}

span.fumo,
span.info,
span.monitor,
span.profile,
span.cockpit,
span.auditor {
    display: inline-block;
    height: 33px;
    min-width: 120px;
    font-size: 1.0em;


    border: 2px solid #e5e5e5 !important;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    background-color: #e5e5e5;

}

fieldset.monitor.active legend,
span.monitor.active,
span.monitor:hover{
    background-color: #c1e770;
    border: 2px solid #c1e770 !important;

}

fieldset.info.active legend,
span.info.active,
span.info:hover{
    background-color: #444142;
    border: 2px solid #444142 !important;

}

fieldset.cockpit.active legend,
span.cockpit.active,
span.cockpit:hover{
    background-color: #5fceea;
    border: 2px solid #5fceea !important;
}

fieldset.profile.active legend,
span.profile.active,
span.profile:hover{
    background-color: #919394;
    border: 2px solid #919394 !important;
}

fieldset.auditor.active legend,
span.auditor.active,
span.auditor:hover{
    background-color: #e95d0f;
    border: 2px solid #e95d0f !important;
}

fieldset.fumo.active legend,
span.fumo.active,
span.fumo:hover{
    background-color: #1261a9;
    border: 2px solid #1261a9 !important;
}


fieldset.fumo.active legend,
fieldset.info.active legend,
fieldset.profile.active legend,
fieldset.cockpit.active legend,
fieldset.auditor.active legend {
    color: #ffffff;
    font-size: 1em;
}
fieldset.monitor.active legend {
    font-size: 1em;
}


span.info a,
span.monitor a,
span.profile a,
span.auditor a,
span.cockpit a {
    padding: 15px;
    text-decoration: none;
    color: #4d4d4d;
    font-weight: bold;
}


span.cockpit.active a,
span.profile.active a,
span.auditor.active a
{
    color: #ffffff;
}
span.info.active a,
span.monitor.active a
{
    color: #4d4d4d;
}


/*
   =================================================================
     tabmenu
   =================================================================
*/

div.tabline {
    position:absolute;
    top:65px;
    height: 10px;
    left: 0;
    width: 100%;
    border-top: 0 solid white;
}

#tabmenu {
    position:absolute;
    top:32px;
    left:25%;

}

@media all and (max-width: 1500px) {
    #tabmenu {
        margin-left: 0;
        left: 300px;
    }
}

div.infotabline {
    background: #444142;
}
div.monitortabline {
    background: #c1e770;
}
div.cockpittabline {
    background: #5fceea;
}
div.profiletabline {
    background: #919394;
}
div.auditortabline {
    background: #e95d0f;
}
.hi {
    vertical-align: middle;
}

span.colorred, span.colorredUnchecked {
    display: inline-block;
    height: 16px;
    width: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #ff4200;
    vertical-align: middle;
}
span.colorgreen {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #00bf00;
    vertical-align: middle;
}
span.colorgreenUnchecked{
    background: #ffaa00; /* Old browsers */
    background: -moz-linear-gradient(left, #00bf00 0%, #00bf00 50%, #ff4200 50%, #ff4200 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #00bf00 0%,#00bf00 50%,#ff4200 50%,#ff4200 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #00bf00 0%,#00bf00 50%,#ff4200 50%,#ff4200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf00', endColorstr='#ff4200',GradientType=1 ); /* IE6-9 */
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    vertical-align: middle;
}
span.coloryellow {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #f2f200;
    vertical-align: middle;
}
span.coloryellowUnchecked {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    vertical-align: middle;
    background: #ffaa00; /* Old browsers */
    background: -moz-linear-gradient(left, #f2f200 0%, #f2f200 50%, #ff4200 50%, #ff4200 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #f2f200 0%,#f2f200 50%,#ff4200 50%,#ff4200 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #f2f200 0%,#f2f200 50%,#ff4200 50%,#ff4200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf00', endColorstr='#ff4200',GradientType=1 ); /* IE6-9 */
}
span.colorblack, span.colorblackUnchecked{
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: black;
    vertical-align: middle;
}
span.colorgray {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #ababab;
    vertical-align: middle;
}
span.colorblue {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #00a0de;
    vertical-align: middle;
}
span.colorpurple {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 16px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #a020f0;
    vertical-align: middle;
}

span.colorredbig {
    display: inline-block;
    height: 50px;
    width: 50px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #ff4200;
    vertical-align: middle;
    margin: 10px;
}
span.colorgreenbig {
    display: inline-block;
    height: 50px;
    width: 50px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #00bf00;
    vertical-align: middle;
    margin: 10px;
}
span.coloryellowbig {
    display: inline-block;
    height: 50px;
    width: 50px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: #f2f200;
    vertical-align: middle;
    margin: 10px;
}

a.nounderline {
    text-decoration: none;
}

.vmiddle {
    vertical-align: middle;
}
.vmiddlemargin {
    vertical-align: middle;
    padding-right: 5px;
}

#profileForm a {
    color: black;
}

.navbar{
    display: flex;
    justify-content: center;
    width: 100%;
}

/*
   =================================================================
     UI-LAYOUT 
   =================================================================
*/


.ui-layout-center {
    z-index:25 !important;
    overflow:visible !important;
}

.ui-layout-center .ui-layout-unit-content {
    overflow:visible !important;
}
.ui-layout-north {
    z-index:35 !important;
    overflow:visible !important;
}

.ui-layout-north .ui-layout-unit-content {
    overflow:visible !important;
}
.ui-layout-west {
    z-index:24 !important;
    overflow:visible !important;
}
.ui-layout-west .ui-layout-unit-content {
    overflow:visible !important;
}
.ui-layout-east {
    z-index:22 !important;
    overflow:visible !important;

}

.ui-layout-unit-header {
    background: transparent !important;
    position: relative;
    top:0;
    min-width: 200px;
}

div.ui-layout-west div.ui-layout-unit-header {
    z-index: 100;
}

.ui-layout-unit {
    padding: 10px !important;
}
.ui-layout-unit.ui-layout-west {
    padding-right: 0px !important;
}


.ui-confirm-dialog {
    border: 1px solid #e5e5e5 !important;
}

.ui-layout-unit, .ui-layout-bd {

}
.ui-layout-unit .ui-layout-unit-content  {
    padding-top: 0.0em;
    padding-bottom: 0.0em;
}


/* discuss - i like it better with a slight backdrop - means comment the next 3 classes ? */
.ui-widget-overlay {
    background: none repeat-x scroll 50% 50% #eaeaea;
    opacity: 0.2;
}

.ui-widget-overlay.ui-blockui {
    background: none repeat-x scroll 50% 50% #eaeaea;
    opacity: 0.5;

}

#dsgv_modal {
    background: none repeat-x scroll 50% 50% #515151;
    opacity: 0.5;
}


.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-shadow.ui-hidden-container.ui-draggable {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}

.tabSpacer {
    display:inline-block;
    height: 28px;
}

/*
    ===============================================================
    app module info
    ===============================================================
 */
.app-module-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10000;
    text-align: center;
}

.app-module-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.app-module-overlay img {
    width: 300px;
    height: 300px;
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*
   =================================================================
     criterions 
   =================================================================
*/

span.criterion {
    display: inline-block;
    height: 16px;
    width: 16px;
    line-height: 14px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color:white;
    font-size: 10px;
    text-align:center;
    font-weight: bold;
    margin-right: 3px;
}

.duty {
    background-color: #1261a9;
    position: relative;
    top:3px;
}

.optional {
    background-color: #44dd6b;
    position: relative;
    top:3px;
}
.injectable {
    background-color: #ff9c00;
    position: relative;
    top:3px;
}

.gde {
    background-color: #1261a9;
}
.gde:before {
    content: "F";
}


.goe {
    background-color: #1261a9;
}
.goe:before {
    content: "F";
}

.gdi {
    background-color: #1261a9;
}
.gdi:before {
    content: "F";
}

.goi {
    background-color: #1261a9;
}

.goi:before {
    content: "F";
}

.cd {
    background-color: #44dd6b;
}
.cd:before {
    content: "K";
}

.co {
    background-color: #44dd6b;
}
.co:before {
    content: "K";
}

.sd {

}

.soi {
    background-color: #ff9c00;
}
.soi:before {
    content: "K";
}
.sdi {
    background-color: #ff9c00;
}
.sdi:before {
    content: "K";
}
.soe {
    background-color: #ff9c00;
}
.soe:before {
    content: "✓";
}

.elearning {
    background-color: transparent;
    color:black;
    font-family: "Font Awesome 5 Free";
    font-size: 14px !important;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.elearning:before {
    content: "\f19d";
    color:black;
}
tr.ui-state-highlight .elearning:before,
tr.ui-state-hover .elearning:before {
    color:black;
}

span.duty {
    background-color: #063983;
}
span.private {
    background-color: #ff9c00;
}
span.assigned {

    color: #000;
}
span.assigned:before {
    display: inline-block;
    margin-right: 8px;
    content: ' \25FC';
    color: #44dd6b;
}
span.notassigned:before {
    display: inline-block;
    margin-right: 8px;
    content: ' \25FC';
    color: #000;
}


/*
   =================================================================
     misc  / panel
   =================================================================
*/

body .ui-dialog {
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
}

body .ui-panel .ui-panel-content {
    border: none !important;
}

.ui-panelgrid-cell {
    border: none !important;
    background: transparent !important;
}


body .ui-fieldset {
    border: 1px solid #E0E0E0;
}


/*
   =================================================================
     input 
   =================================================================
*/


.ui-inputfield-200 {
    width: 205px;
}

.ui-inputfield-300 {
    width: 300px;
}

.ui-inputfield-100-percent {
    width: 99%;
}


div[role="radio"] label {
    margin-left: 0.5rem !important;
}

/* ----------- */

span.duty {
    background-color: #063983;
}
span.private {
    background-color: #ff9c00;
}
span.assigned {

    color: #000;
}
span.assigned:before {
    display: inline-block;
    margin-right: 8px;
    content: ' \25FC';
    color: #44dd6b;
}
span.notassigned:before {
    display: inline-block;
    margin-right: 8px;
    content: ' \25FC';
    color: #000;
}

div.outerbar {
    border:1px solid #D4D4D4;
    width:100%;
    background: white;
}
div.innerbar {
    color:white;
    text-align: center;
    padding: 2px;
    white-space: nowrap;
    font-weight: bold;
}

div.w0 {
    color:black;
    padding-left: 0px;
    padding-right: 0px;
    font-weight: bold;
}

div.red {
    background: #ff4200;
}
div.yellow {
    background: #f2f200;
    color:black;
}
div.green {
    background: #00bf00;
}

div.grey {
    background: #919394;
}

/*
   =================================================================
     searchmode
   =================================================================
*/

#webapp.searchMode {
    border: solid #ff0093 5px;
}

button.searcModeButton,
button.searcModeButton.ui-state-hover,
button.searcModeButton.ui-state-focus {
    background:#ff0093 !important;
    color:#ffffff !important;
    border: 0px !important;
    border-radius: 0px !important;
    height: 31px;


}
button.searcModeButton.ui-state-hover,
button.searcModeButton.ui-state-focus {
    background:#ff0093 !important;
    border: 0px !important;
}


button.searcModeButton span.ui-button-text.ui-c {
    padding: 1px 1.3em 1px 1em !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    white-space: nowrap;
}


/*
   =================================================================
     button
   =================================================================
*/


body .ui-button {
    font-weight: bold !important;
}


body .ui-button-big {
    padding: 0.30rem !important;
}
body .ui-button-big span.ui-icon {
    font-size: 1.3rem !important;
    margin-top: -0.6rem !important;
}
body .ui-button-big span.ui-button-text {
    font-size: 1.3rem !important;
    padding-top: .3em !important;
    padding-bottom: .3em !important;
}



/* fading of disabled elements */
body .ui-state-disabled {
    opacity: 0.3 !important;
}
body input.ui-state-disabled {
    opacity: 0.9 !important;
}



body .ui-selectbooleanbutton,
body .ui-selectonebutton > .ui-button,
body .ui-selectmanybutton > .ui-button {
    font-size: 1em !important;
}


body .ui-datatable .ui-datatable-header button {
    font-size: 1em !important;
    padding: 0.25rem 0.25rem !important;
}

body .ui-button.ui-button-text-only .ui-button-text {
    padding: 0.5rem 0.5rem !important;
}

/*
   =================================================================
     dropdowns
   =================================================================
*/

/*body .ui-selectonemenu {*/
/*    padding-right: 0.5rem !important;*/
/*}*/

body .ui-selectonemenu .ui-selectonemenu-label {
    overflow: hidden !important;
    
}


.ui-selectonemenu-panel .ui-selectonemenu-item,
.ui-selectonemenu-label {
    white-space: nowrap;
    overflow: hidden;
}


/* Berechnung der Partner-Ampel: -> ellenlanges Ding Pflicht- u. zugewiesene Prüfkriterien
 */
.ui-selectonemenu-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
   =================================================================
     datatable
   =================================================================
*/


body .ui-datatable table {
    table-layout: auto !important;
}

body .ui-datatable thead th {
    text-align: center !important;
}

/* functionalites above main tables */
body .ui-datatable .ui-datatable-header {
    background: transparent !important;
}

body .ui-datatable .ui-datatable-header {
    font-weight: 800 !important;
}

body .ui-datatable tfoot td {
    text-align: center;
}

/* fixes column padding of ie. elearning footer to keep in sync with table body and header */
div.ui-datatable-scrollable-footer-box table tfoot tr td {
    padding: .4rem .6rem !important;
}

/*
   =================================================================
    dialog
   ================================================================= 
 */


.ui-dialog-content {
    background-color: #eee !important;
}

/* fixes transparency shine thru on dialogs */
.ui-dialog.ui-widget.ui-widget-content.ui-shadow.ui-hidden-container.ui-draggable {
    background: #eee;
}

/*
   =================================================================
    dialog checkobject dialog
   ================================================================= 
 */



/* --------   old theme stuff still needed ---- */
.trtrue {
    background: #f5f5f5;
    height: 40px !important;

}
.trfalse {
    background: #ffffff;
    height: 40px !important;
}

.trtrue td,
.trfalse td,
.evenodd td{
    white-space: nowrap;
    border-bottom: 0px solid #e5e5e5 !important;
    border-right: 0px solid #e5e5e5 !important;
}

.trtrue td:last-child,
.trfalse td:last-child {
    border-right: 0px !important;
}


/* --------  fileupload dicke widersepenstiges Ding---- */
.fumoatt > div {
    background: transparent !important;
}
div.fumoatt div div div {
    background: transparent !important;
}

.ui-fileupload-buttonbar {
    background: transparent !important;
}

.ui-fileupload-buttonbar  .ui-button {
    font-size: 1rem !important;
}


table.ui-fileupload-files {
    margin: 0 !important;
}
div.ui-fileupload-files {
    margin: 0 !important;
}
div.ui-fileupload-content,
div.ui-fileupload-buttonbar {
    padding: 0 !important;
    background: transparent !important;
}



/*
   =================================================================
    hau drauf !!!
   ================================================================= 
 */

/* achieve consistent uppercase first letter for the following */
.ui-column-title {
    display:inline-block;
}

.ui-column-title::first-letter {
    text-transform: uppercase;
}

.ui-tabs-header > a {
    display: inline-block;
}

.ui-tabs-header > a::first-letter {
    text-transform: uppercase;
}

.ui-menuitem-text {
    display:inline-block;
}

.ui-menuitem-text::first-letter {
    text-transform: uppercase;
}

.ui-button-text {
    display:inline-block;
}

.ui-button-text::first-letter {
    text-transform: uppercase;
}

/* fix weird span color for Verwaltung -> Konfiguration*/
#configCheckObjectTypeDialog .ui-datatable.ui-datatable-striped .ui-datatable-data>tr.ui-datatable-odd.ui-state-highlight  td:nth-child(2)   span{
    color: white !important;
}

#configCheckObjectTypeDialog .ui-datatable.ui-datatable-striped .ui-datatable-data>tr.ui-datatable-even.ui-state-highlight  td:nth-child(2)   span{
    color: white !important;
}



.ui-fileupload .ui-fileupload-buttonbar .ui-button {
    background: #e0e0e0;
    color: #212121;
    border: 1px solid #e0e0e0
}

.ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-state-hover,body .ui-button.ui-button-secondary:not(:disabled):hover,body .ui-splitbutton.ui-button-secondary>.ui-button.ui-state-hover,body .ui-splitbutton.ui-button-secondary>.ui-button:not(:disabled):hover,body .ui-menubutton.ui-button-secondary>.ui-button.ui-state-hover,body .ui-menubutton.ui-button-secondary>.ui-button:not(:disabled):hover {
    background: #00a0de;
    border-color: #cacaca;
    color: #fff
}

.ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-state-focus,body .ui-splitbutton.ui-button-secondary>.ui-button.ui-state-focus,body .ui-menubutton.ui-button-secondary>.ui-button.ui-state-focus {
    box-shadow: none
}

.ui-fileupload .ui-fileupload-buttonbar .ui-button.ui-state-active,body .ui-button.ui-button-secondary:active,body .ui-splitbutton.ui-button-secondary>.ui-button.ui-state-active,body .ui-splitbutton.ui-button-secondary>.ui-button:active,body .ui-menubutton.ui-button-secondary>.ui-button.ui-state-active,body .ui-menubutton.ui-button-secondary>.ui-button:active {
    background: #b3b3b3;
    border-color: #b3b3b3;
    color: #fff
}


/* shorten datepicker input field */
.ui-trigger-calendar > input {
    max-width: 87px !important;
}

/* give the first td with the checkbox  some padding */
#coloredCheckObjectTable tr td:first-child {
    padding-left: 15px;
}

/* search icon in filter input fields*/
span.ui-icon-search {
    font-size: 12px !important;
}

.recordsnavigation {
    margin: 0 auto; width: 40%;
}

.recordsnavigation > tbody > tr > td{
    min-width: 60px !important;
}

/* fix calender button height */
body .ui-calendar .ui-button.ui-button-icon-only {
    height: 2.48rem;
}

/* supress duplicated header in scrollable datatable (e-learning course assiggnement */
.ui-datatable-scrollable-theadclone {
    visibility: collapse;
}

/* elearning activation dialog */
.elTable {
    overflow: hidden;
}

#usersForm > div > div.ui-widget-content {
    background: transparent !important;
}

#usersEditForm .striped-table > tbody > tr > td{
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 1rem !important;
}

#usersEditForm .striped-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#usersEditForm .striped-table tr:nth-child(odd) {
    background-color: #ffffff;
}

/* toggle button background in datatable */
td[role="gridcell"]  div.ui-panel-content {
    background: none;
}


/*
   =================================================================
     menu
   ================================================================= 
 */

.ui-menu .ui-menu-list {
    width: auto!important;
}

.ui-menuitem-link {
    white-space: nowrap;
    width: auto!important;
}

.ui-menubar .ui-menuitem-link {
    width: auto;
}

.ui-menuitem-text > div {
    white-space: unset !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

body .ui-menu .ui-menu-list .ui-menu-child {
    background: #616161;
}


/*
   =================================================================
     confirm dialogs
   ================================================================= 
 */

body .ui-dialog.ui-confirm-dialog .ui-dialog-content {
    padding: 1rem 1rem !important;
}

body .ui-dialog.ui-confirm-dialog .ui-dialog-content>span {
    margin: 0;
    line-height: 16px;
}

body .ui-dialog.ui-confirm-dialog .ui-dialog-buttonpane {
    background-color: #f1f1f1 !important;
}

.ui-confirm-dialog-message {
    padding-top: 1rem; 
}

.ui-dialog .ui-dialog-buttonpane {
    padding-top: 1.5rem !important;
}


/*
   =================================================================
     picklist
   ================================================================= 
 */


body .ui-picklist .ui-picklist-caption {
    background: #f6f6f6;
}

/*
   =================================================================
     tree filter
   ================================================================= 
 */
body .ui-tree .ui-tree-filter-container {
    margin: 0.5rem !important;
}

body .ui-tree-filter-container {
    padding: 2rem !important;
}

/*
   =================================================================
     naked table
   ================================================================= 
 */

table tbody tr.odd {
    
}

table tbody tr.even {
   background: #eeeeee !important;
}

/* auditor -> configuration */
#configGrid tbody tr td {
      padding: 0.5rem 1rem 0.5rem 1rem;
}


/* Anzeige -> Reporting u. Diagnose */

#reportingDialogForm tbody tr td {
    padding: 0.5rem 1rem 0.5rem 1rem;
}

/* Hilfe -> Anfordern */
#feedbackForm .ui-g {
    padding-bottom: 1rem !important;
}

/* fumo monitor -> Hinzufügen (popup) */
#coloredCheckObjectDialogForm tbody tr td {
    padding: 0.2rem;
}

/*
   =================================================================
     ajax loading animation
   ================================================================= 
 */

#statusDialog {
    box-shadow: none !important;
}

#statusDialog .ui-dialog-content{
    background: transparent !important;
    background-color: transparent !important;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #1261a9;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #1261a9 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*
   =================================================================
    media queries
   ================================================================= 
 */

@media (max-width: 1023px) {
    #spby {
        display: none;
    }
}

/*
   =================================================================
    Dialog Titlebar
   ================================================================= 
 */
.ui-dialog-titlebar {
    padding: 0px !important;
}
.ui-dialog-titlebar a {
    width: 2.8rem !important;
    height: 2.8rem !important;
    margin-left: 0 !important;
}
.ui-dialog-titlebar a span {
    margin: 0.4rem !important;
}
.ui-dialog-titlebar span.ui-dialog-title {
    margin: 0.7rem !important;
}

/*
   =================================================================
    Menubar/main menu  ...
   ================================================================= 
 */
 ul.ui-menu-child {
     background: #f5f5f5 !important;
     border: solid #e0e0e0 1px !important;
 }
 ul.ui-menu-child li.ui-menuitem-highlight span {
     color: white !important;
 }
 ul.ui-menu-child li:not(.ui-menuitem-highlight) span {
     color: black !important;
 }
 
/*
   =================================================================
    piclist, several specified heights
   ================================================================= 
 */
.picklistlow ul.ui-picklist-list,
.picklistlow div.ui-picklist-buttons {
    height: 100px;
} 

.largePicklist ul.ui-picklist-list,
.largePicklist div.ui-picklist-buttons {
    height: 400px;
} 

.mediumPicklist ul.ui-picklist-list,
.mediumPicklist div.ui-picklist-buttons {
    height: 180px;
} 
/*
   =================================================================
    tooltip
   ================================================================= 
 */
.ui-tooltip,
.ui-tooltip-text {
    max-width: 500px !important;
    background: #616161 !important;
    border-radius: 4px !important;
}


/*
   =================================================================
    info page
   ================================================================= 
 */

.check-big {
    vertical-align: middle;
}

.styled-traffic-table tr:nth-child(even) {
    background: #eaeaea;
}    
    
.styled-traffic-table tr.border_bottom td {
    padding: 8px;
    white-space: nowrap;
    border-bottom: 1px solid #b9c1c5;
    border-right: 1px solid #b9c1c5;
}

.styled-traffic-table {
    width: 100%;
}

.tl-monitor {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 420px;
    width: fit-content;
}

.tl-cockpit {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    width: fit-content;
}


#infoScrollPanel .ui-accordion-header {
    background: #f5f5f5;
}

/* fixes appearance of horicontal scrollbar if mandantInfoPanel is exapanded */
#infoScrollPanel .ui-panelgrid {
    border-collapse: unset;
}
/*
   =================================================================
    fumo coach
   ================================================================= 
 */

.fumocoach-input {
    width: 500px;
    height: 30px;
    font-size: 1.3rem !important;
    padding-left: 10px !important;
    margin-left: 5px;
    border-bottom-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* coach search button */
.attachedIconButton {
    height: 30px;
    font-size: 1.3rem !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    position: relative;
    left: -.2rem !important;
}


.fumocoach {
    background: #fbfbfb !important;
}

.fumocoach .ui-panel .ui-panel-content {
    background-color: transparent !important;
}

.fumocoach .ui-paginator,
.fumocoach .ui-datalist-header,
.fumocoach .ui-datalist-data,
.fumocoach .ui-datalist-content
{
    background: transparent !important;
}
.fumocoach .ui-paginator,
.fumocoach .ui-datalist-header
{
    text-align:left !important;
    padding-left: 10px;
}

.fumocoach ul{
    padding-left: 10px;
}


.panelGridWithPadding td {
    padding: 0.2rem !important;
    vertical-align: top;
}

#checkAndsendInvitationDialogConfirm .ui-panel .ui-panel-content {
    background-color: transparent !important;
}

#checkAndsendTestInvitationDialogConfirm .ui-panel .ui-panel-content {
    background-color: transparent !important;
}


/*should be done in theme!! compare piclist with http://www.primefaces.org/showcase/ui/data/pickList.xhtml*/
.ui-picklist-list {
  border-right: 1px #eee solid !important;
  border-left: 1px #eee solid !important;
  border-bottom: 1px #eee solid !important;
}
 div.ui-datepicker {
     border: 1px solid #eee !important;
 }

/*
   =================================================================
    fumo iconfont tweaks
   ================================================================= 
 */


/*[class*="fumoicons"]:before {
    font-size: 30px;
}
[class*="fas"]:before {
    font-size: 30px;
}*/

#checkObjectTabView li.ui-tabs-header {
    text-align: center !important;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
  width:auto !important;
}

.full-width {
    width: 100% !important;
}


/*
   =================================================================
    bugfix primefaces toggleSwitch
   ================================================================= 
 */
 span.ui-toggleswitch-handler {
     pointer-events: none !important;
 }

 /*
   =================================================================
    profilecheck styles
   ================================================================= 
 */
 fieldset.match legend.ui-fieldset-legend {
    background: #00bf00 !important;
    color: white !important;
    min-width: 350px;
}
fieldset.dismatch legend.ui-fieldset-legend {
    background: #ff4200 !important;
    color: white !important;
    min-width: 350px;
}
fieldset.impossible legend.ui-fieldset-legend {
    background: #ffa400 !important;
    color: white !important;
    min-width: 350px;
}
fieldset.waiting_for_response legend.ui-fieldset-legend {
    background: #f2f200 !important;
    color: black !important;
    min-width: 350px;
}
fieldset.new_and_untouched legend.ui-fieldset-legend {
    background: #777777 !important;
    color: white !important;
    min-width: 350px;
}

fieldset.new_and_untouched,
fieldset.waiting_for_response,
fieldset.dismatch,
fieldset.match {
    background: #f6f6f6 !important;
}

div.checktabview ul {
    background: #b9c1c5 !important;
}

div.profilechcktoggle,
div.profilechcktoggle div.ui-panel-titlebar {
    background: #f6f6f6;
    padding-left: 5px;
}
div.profilechcktoggle  {
    border: solid 1px #cccccc;
    border-width: 1px !important;
}
div.profilechcktoggle.ui-panel-collapsed-h  {
    border: solid 1px #f6f6f6;
}
div.profilechcktoggle div.ui-panel-titlebar a {
    float:left !important;
}

 #documentScanDetailTree th,
 #documentScanDetailTree td {
    border-left: 0px;
    border-right: 0px;
}


div.ui-datatable tr.ui-state-highlight a,
div.ui-datatable tr.ui-state-highlight a span {
    color: white !important;
}
/*
   =================================================================
    no plan yet whats this for  ...
   ================================================================= 
 */


 div.ui-editor-toolbar {
     background-color: #fcfcfc !important;
     border-bottom: solid 1px #bdbdbd !important;
 }
 div.ui-texteditor {
     border: solid 1px #bdbdbd !important;
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
 button.ql-image {
     display:none !important;
 }
 div.ql-editor p {
     padding-bottom: 10px !important;
 }
 div.ql-editor ul,
 div.ql-editor ol {
     margin-bottom: 10px !important;
 }