/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13.09.2016, 08:23:02
    Author     : mrieder
*/

@media screen and (min-width: 1401px) {

    #inhalt {
        position:relative;
        max-width: calc( 100% - 335px );
        left: 290px;
    }

    #steuerung {
        position:fixed;
        overflow:auto;
        width: 240px;
        left: 50px;
        height: 90vh;
    }

    .show-for-small {
        display: none !important;
    }

    #menuClose {
        display: none;
    }
    
    #steuerung .menuOpen {
        display: none;
    }    
}

@media screen and (max-width: 1400px) and (min-width: 801px){

    #inhalt {
        position:relative;
        max-width: calc( 100% - 285px );
        left: 265px;
    }

    #steuerung {
        position:fixed;
        overflow:auto;
        width: 240px;
        left: 25px;
        height: 90vh;
    }

    .show-for-small {
        display: none !important;
    }

    #menuClose {
        display: none;
    }
    
    #steuerung .menuOpen {
        display: none;
    }
}

@media screen and (max-width: 800px)  {

    #inhalt {
        position:relative;
        max-width: calc( 100% - 50px );
        left: 50px;
    }

    #menu {
        display: none;
    }

    #steuerung .menuOpen {
        display: block;
        position: absolute;
    }
    #steuerung.visible .menuOpen {
        display: none;
    }

    #steuerung.visible .backdrop {
        /* display: none; */
        backdrop-filter: blur(2px);
        display: block;
        position: fixed;
        width: 100%;
        bottom: 0px;
        top: 0px;
        z-index: 3;
    }

    #steuerung.visible #menu {
        display: block;
        position: fixed;
        bottom: 0px;
        top: 0px;
        background-color: var(--background-col);
        z-index: 5;
        width: 240px;
        overflow: auto;
        opacity: 1;
        transform: translateZ(0px);
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0, 0, 0.2, 1);
        padding: 15px 5px 0 5px;
    }

    #menuClose {
        display: block;
        padding: 5px 0 10px 0;
        text-align: right;
        background-color: var(--background-col);
    }
}

@media print {
    #steuerung {
        display: none;
    }

    #inhalt {
        margin-left: 20px;
        max-width: 100%;
    }

    #menuClose {
        display: none;
    }
    
    #steuerung .menuOpen {
        display: none;
    }    
}

html, body .ui-widget {
    font-family: Arial, sans-serif;
    font-size: 0.96rem;
}

body{
    --background-col: white;
    --text-color: black;
    --person-color: #fff5cc;
    --kennung-color: #bbccff;
    --projekt-color: #ccffcc;
    --einrichtung-color: #b0e0b6;
    --gruppe-color: #ccffff;
    --verteiler-color: #dbccff;
    --doku-color: var(--gray-500);
    --a-color: #0000ee;
    --a-visited-color: #551a8b;
    --hover-color: lightblue;
    --fkt-color: lavender;
    --vert-color: lemonchiffon;
    --gesperrt-color: mistyrose;
    --menu-color: #c4c4c4;
    --h3-color: #f0f0f0;
    --h3-border: lightgray;
    --datatable-odd: #ffffff;
    --datatable-even: #f3f3f3;
    --modification: khaki;
    --invert: 0;
}

body.dark {
    --background-col: #333;
    --text-color: #ddd;
    --person-color: #a9952aa8;
    --kennung-color: #2a3e77;
    --projekt-color: #5ca55c;
    --einrichtung-color: #2c5a32;
    --gruppe-color: #297272;
    --verteiler-color: #dbccff90;
    --doku-color: var(--gray-500);
    --a-color: #766dfd;
    --a-visited-color: #b252fb;
    --hover-color: darkcyan;
    --fkt-color: #6a5acd63;
    --vert-color: #bdb76b61;
    --gesperrt-color: #f080806e;
    --menu-color: #444;
    --h3-color: #555;
    --h3-border: gray;
    --datatable-odd: #303030;
    --datatable-even: #424242;
    --modification: darkkhaki;
    --invert: 1;
}

body, body .ui-tabs .ui-tabs-panels {
    background-color: var(--background-col);
    color: var(--text-color);
}

/*
a {
    color: var(--a-color);
}
a:visited {
    color: var(--a-visited-color);
}
*/
#seite {
    margin: 0 auto;
}

#kopfbereich {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 25px;
    /*background-color:#6DABD0;*/
}

#zustimmung {
    /*float: right;*/
    max-width: calc( 100% );
    margin-top: 35px;
    /*margin-left: 30px;*/
    margin-left: 20px;
    margin-right: 20px;
}

/*i {
    font-size: 1.5rem;
    vertical-align: middle;
}*/

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    overflow: auto;
}

.menu li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.menu li a.active {
    background-color: #CCFFCC;
    color: white;
}

.menu li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.SIMTable {
    border-collapse: collapse;
}

.SIMTable tbody tr:nth-child(odd) {
    background: #FFFbf0;
}

.SIMTable tbody tr:hover {
    background: activecaption;
}

.SIMTable tbody td {
    padding: 3px;
    padding-right: 10px;
    vertical-align: top;
}

.SIMTable thead tr {
    background: #f5f5f5;
    position: sticky;
    top: 0;
}

.SIMTable thead th {
    padding: 3px;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}

.theader {
    display: table-row;
    background: var(--h3-color);
    position: sticky;
    top: 0;
}
.trow {
    display: table-row;
}
.trow:nth-child(odd) {
    background: var(--datatable-even);
}
.trow:hover {
    background: var(--hover-color);
}

.theader > div {
    padding: 3px;
    padding-right: 20px;
    display: table-cell;
    font-weight: bold;
}

.trow > div {
    padding: 3px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: top;
}

.trow .centered {
    text-align: center;
}

.quickaction {
    margin: 0px;
    padding: 0px;
    border-collapse: collapse;
}

.quickaction .ui-button {
    width: 100%;
    float: left;
}

table.quickaction tbody tr td {
    margin: 0px;
    padding-left: 0px;
    float: left;
}

/*.pageheader {
    padding: 4px;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.pageheader i {
    margin-right: 3px;
}

.pagecontent {
    margin-left: 5px;
}*/

.sim-data-grid {
}
.sim-data-grid > label:not(:empty),
.sim-data-grid > div label:not(:empty),
.sim-data-grid > tbody > tr > td > label:not(:empty){
    text-transform: capitalize;
    font-weight: bold;
}
.sim-data-grid > label:not(:empty)::after,
.sim-data-grid > div label:not(:empty)::after,
.sim-data-grid > tbody > tr > td > label:not(:empty)::after{
    content: ":"
}

.datablock {
}

.datablock h3 {
    background-color: var(--h3-color);
    padding: 2px;
    margin-bottom: 3px;
    margin-top: 5px;
    border-radius: 3px;
    border: var(--h3-border) solid 1px;
}
.datablock .valueblock {
    margin-left: 3px;
    margin-right: 3px;
}
.datablock .valueblock [class^="ui-g"],
.datablock .valueblock [class^="ui-md"],
.datablock .valueblock [class^="ui-lg"],
.datablock .valueblock [class^="ui-xl"] {
    padding: 3px;
}
.valueblock .header {
    padding: 3px;
    font-weight: bold;
}

#fussbereich {
    clear: both;
    background-color:white;
}

.ui-column-title {
    font-size: 1em;
    font-style: normal;
    text-transform: capitalize;
}

.ui-tabs-header {
    text-transform: capitalize;
}

/*.ui-datatable tbody tr {
    vertical-align: baseline;
}*/

.ui-datatable .ui-datatable-data .ui-datatable-odd {
    text-align:left;
    background:none repeat scroll 0 0 var(--datatable-odd);
    font-size: 0.9rem;
}

.ui-datatable .ui-datatable-data .ui-datatable-even {
    text-align:left;
    background:none repeat scroll 0 0 var(--datatable-even);
    font-size: 0.9rem;
}

.btn {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #000000;
    font-size: 9px;
    background: #ffffff;
    padding: 2px 5px 1px 5px;
    border: solid #000000 1px;
    text-decoration: none;
    max-width: 150px;
}

.btn:disabled {
    color: #aaaaaa;
    text-decoration: none;
}

.btn:disabled:hover {
    color: #aaaaaa;
    background: #ffffff;
    text-decoration: none;
}

.btn:hover {
    background: #bababa;
    text-decoration: none;
}

.property-table .ui-button {
    min-width: 90px;
}

.label {
    min-width: 90px;
}

.settings-table-col1 {
    width: 200px;

}

.settings-table-col2 {
}

.ui-toggleswitch .ui-toggleswitch-slider {

    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border-radius: 30px;
    background-color: #727070;

}

.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {

    background-color: dodgerblue;
}

.ui-toggleswitch .ui-toggleswitch-slider::before {

    background-color: #ffffff;
    height: 1.250em;
    width: 1.250em;
    left: .25em;
    bottom: .25em;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;

}

/*.ui-icon.pi {
    font-size:initial
}*/

.lrzhover tbody tr.ui-datatable-even:hover,
.lrzhover tbody tr.ui-datatable-odd:hover {
    background-color: var(--hover-color);
}


.ui-widget.highlight {
    /*background-color: khaki !important;*/
    background-color: tomato;
}

tr.highlight, body .ui-datatable tr.highlight:hover {
    font-weight: bold;
}

.ui-tabs .ui-tabs-panel {
    padding-left: 10px;
    padding-right: 10px;
}

.ui-datatable thead th, .ui-datatable tfoot td {
    text-align: left;
}

tr.ui-widget-content.ui-datatable-even.gesperrt,
tr.ui-widget-content.ui-datatable-odd.gesperrt {
    background-color: var(--gesperrt-color);
}
tr.ui-widget-content.ui-datatable-even.fktkenn,
tr.ui-widget-content.ui-datatable-odd.fktkenn {
    background-color: var(--fkt-color);
}
tr.ui-widget-content.ui-datatable-even.verteiler,
tr.ui-widget-content.ui-datatable-odd.verteiler {
    background-color: var(--vert-color);
}

.ui-chips-input-token input{
    width: 250px;
}

.ui-menu .ui-submenu-icon {
    margin-right: .429rem;
}

/*body .ui-menu .ui-menu-list .ui-widget-header h3 {
    font-size: medium;
}*/

body .ui-button.ui-button-danger, body .ui-splitbutton.ui-button-danger > .ui-button {
    background: #D32F2F;
    color: #ffffff;
    border: 1px solid #D32F2F;
    text-shadow: none;
    box-shadow: none;
}
body .ui-button.ui-button-danger:hover, body .ui-splitbutton.ui-button-danger:hover > .ui-button {
    background: #b30F0F;
}
body .ui-button.ui-button-warning, body .ui-splitbutton.ui-button-warning > .ui-button {
    background: #FBC02D;
    color: #212529;
    border: 1px solid #FBC02D;
    text-shadow: none;
    box-shadow: none;
}
body .ui-button.ui-button-warning:hover, body .ui-splitbutton.ui-button-warning:hover > .ui-button {
    background: #DBA00D;
}
body .ui-button.ui-button-success, body .ui-splitbutton.ui-button-success > .ui-button {
    background: #689F38;
    color: #ffffff;
    border: 1px solid #689F38;
    text-shadow: none;
    box-shadow: none;
}
body .ui-button.ui-button-success:hover, body .ui-splitbutton.ui-button-success:hover > .ui-button {
    background: #487F18;
}

body .ui-menu .ui-menu-list .ui-widget-header.color-person, .color-person {
    background: var(--person-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-kennung, .color-kennung{
    background: var(--kennung-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-projekt, .color-projekt {
    background: var(--projekt-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-einrichtung, .color-einrichtung {
    background: var(--einrichtung-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-gruppe, .color-gruppe {
    background: var(--gruppe-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-verteiler, .color-verteiler {
    background: var(--verteiler-color);
}
body .ui-menu .ui-menu-list .ui-widget-header.color-doku, .color-doku {
    background: var(--doku-color);
}

/*Grauer Farbverlauf im Menü*/
body #steuerung .ui-menu, .ui-menu .ui-menu-child {
    background: var(--menu-color);
}

.ui-tabs.ui-widget-content:not(.ui-ribbon) {
    border: 1px var(--h3-border) solid;
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    padding: 0.3rem 0.5rem;
}

body .ui-menu .ui-menu-list .ui-widget-header {
    margin-top: 5px;
    padding: 0.3rem 0.5rem;
}

body .ui-button.ui-button-text-icon-left .ui-button-text, body .ui-button.ui-button-text-only .ui-button-text {
    padding-bottom: 5px;
    padding-top: 5px;
}
body .ui-panelgrid .ui-panelgrid-cell,
body .ui-datatable .ui-datatable-data > tr > td {
    padding-top: 4px;
    padding-bottom: 4px;
}
body .ui-datatable thead th {
    padding-top: 2px;
    padding-bottom: 2px;
}
body .ui-datatable .ui-paginator {
    padding: 0.3rem;
}

body .ui-inputfield,
body .ui-button.ui-button-icon-only .ui-button-text,
body .ui-inplace .ui-inplace-editor .ui-button-icon-only .ui-button-text {
    padding: 5px;
}

body .ui-toolbar {
    padding: 5px
}

.ui-datatable .borderless .ui-datatable-data tr td,
.ui-datatable .borderless th
{
    border-style: none;
}
.borderless.ui-datatable .ui-datatable-data tr td,
.borderless.ui-datatable th
{
    border-style: none;
    /*border-bottom: solid lightgray;
    border-width: 1px;*/
}

.kennungMatrix .ui-datatable * {
    font-size: small;
    vertical-align: middle;
    font-weight: normal;
}

.kennungMatrix .ui-datatable .ui-datatable-data td.matrix-dienst-column
{
    min-width: 22px;
    text-align: center;
    padding: 1px;
    vertical-align: middle;
}
.kennungMatrix .ui-datatable .ui-column-title {
    font-weight: normal;
}
.kennungMatrix .ui-datatable th.matrix-dienst-column
{
    min-width: 22px;
    text-align: center;
    padding: 2px;
    vertical-align: middle;
}

/*body .ui-button.ui-button,
.ui-inputfield,
.ui-selectonemenu {
    height: 1.8rem;
}*/
.ui-selectonemenu .ui-selectonemenu-label {
    padding-top: 3px;
}

/*.ui-datepicker-trigger {
    height: 1.8rem;
    vertical-align: top;
}*/

body .ui-datatable .ui-datatable-header,
body .ui-datatable .ui-datatable-footer,
body .ui-fieldset .ui-fieldset-legend,
body .ui-panel .ui-panel-titlebar {
    padding: 8px;
}

body .ui-chips .ui-chips-container .ui-chips-token {
    margin: 1px;
}
.ui-chips .ui-inputfield {
    height: auto;
}

body .ui-selectonemenu {
    vertical-align: middle;
}
body .ui-selectonemenu .ui-selectonemenu-label {
    min-height: auto;
}

body .ui-dialog .ui-dialog-titlebar {
    padding: .4rem;
}
body .ui-dialog .ui-dialog-content {
    border: 0;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    float: left;
    margin: .3rem 16px .1rem 0;
}

body .pageheader {
    display: flow-root;
    font-size: 1.2rem;
    font-weight: bold;

    padding: 6px;
    margin-bottom: 5px;
    border-radius: 5px;
}
body .pageheader .back, body .pageheader .forth {
    display: flex;
    float: left;
    max-height: 1.5rem;
    padding-right: 5px;
}
body .pageheader .title {
    float: left;
}
body .pageheader .status {
    color: crimson;
    float: right;
}

body .ui-messages .ui-messages-close {
    top: -1rem;
    right: -1rem;
    /*border-radius: 0;*/
}

body .ui-messages {
    font-weight: normal;
    font-family: system-ui;
}

body .ui-messages > div {
    padding: 15px;
}

body .ui-messages ul .ui-messages-info-summary, body .ui-messages ul .ui-messages-warn-summary, body .ui-messages ul .ui-messages-error-summary, body .ui-messages ul .ui-messages-fatal-summary,
body .ui-messages ul .ui-messages-info-detail, body .ui-messages ul .ui-messages-warn-detail, body .ui-messages ul .ui-messages-error-detail, body .ui-messages ul .ui-messages-fatal-detail {
    vertical-align: -webkit-basline-middle;
}

.dienst-aktiv::before {
    font-family: "FontAwesome";
    color: limegreen;
    font-size: 18px;
    content: "\f058";
}

.dienst-gesperrt::before {
    font-family: "FontAwesome";
    color: firebrick;
    font-size: 18px;
    content: "\f05e";
}

.dienst-none::before {
    font-family: "FontAwesome";
    font-size: 12px;
    content: "\f1db";
}

.headerbox {
    display: flex;
    column-gap: 2px;
    width: 100%;
    margin-bottom: 5px;
}
.headerbox > div {
    align-content: center;
    border: 1px solid var(--h3-border);
    border-radius: 4px;
    padding: 3px 5px 3px 5px;
    font-weight: bold;
}

#steuerung .ui-selectonemenu-label {
    font-weight: bold;
    text-align: center;
}

.aktiv, .gültig {
    color: white;
    border-radius: 10px;
    background-color: green;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
}

.inaktiv {
    color: green;
    border-radius: 10px;
    background-color: white;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
    border: 1px solid green;
}

.verfallen, .gelöscht {
    color: white;
    border-radius: 10px;
    background-color: firebrick;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
}

.verantwortlich {
    color: white;
    border-radius: 10px;
    background-color: gray;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
}

.gesperrt, .Startpasswort {
    color: white;
    border-radius: 10px;
    background-color: #FBC02D;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
}

.unbekannt {
    color: black;
    border-radius: 10px;
    background-color: white;
    border: 1px solid gray;
    padding:1px 8px 1px 8px;
    opacity: 0.7;
    font-size:small;
}

.telefon::before {
    content: '🕿 ';
}

.email::before {
    content: '✉ ';
}

.extLink::before {
    font-family: FontAwesome;
    content: '\f08e';
    margin-left:5px
}

.flags-container {
    margin: 13px 0 10px 0;
}
.flag-container {
    width: 32px;
    height: 32px;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    margin: 0 2px 0 2px;
}
.flag {
    width: auto;
    height: 100%;
    margin-left: -17%;
}