@font-face {
    font-family:'lg';
    src:url('https://www.brühlgut.ch/typo3/ext/toolbox/Resources/Public/Fonts/lg.eot');
    src:url('https://www.brühlgut.ch/typo3/ext/toolbox/Resources/Public/Fonts/lg.eot') format("embedded-opentype"), 
        url('https://www.brühlgut.ch/typo3/ext/toolbox/Resources/Public/Fonts/lg.woff') format("woff"), 
        url('https://www.brühlgut.ch/typo3/ext/toolbox/Resources/Public/Fonts/lg.ttf') format("truetype"), 
        url('https://www.brühlgut.ch/typo3/ext/toolbox/Resources/Public/Fonts/lg.svg') format("svg");
    font-weight:normal;
    font-style:normal;
}
body {
    background-color: #333333;
    color: #ffffff;
    font-family: 'lg', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
}       
h1 {
    font-family: 'lg', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    margin: 0 10px 0 0;
}
#header {
    width: 100%;
    height: 60px; /*5vh;*/
    margin-bottom: 1vh;
    overflow: hidden;
    clear: both;
}
.logo {
    float: right;
    height: auto;
    margin: 0;
    padding: 0;
}
.clock {
    font-size: 2.8em;
    float: right;
    margin: 0 20px 0 0;
}
#debug {
    display: inline;
}
#app-status {
    display: inline;
}

.date_shift {
    display: inline-block;
    height: inherit;
    float: right;
    margin: 0 20px 0 0;
}
.date_shift button {
    position: relative;
    top: 13px;
    height: 30px;
    font-size: 15px;
    background-color: deepskyblue;
    color: white;
}

.ressources_zone {
    float: right;
    border: #cccccc 1px solid;
    top: 70px;
    right: 0;
    width: 4.6vw;
    height: 79vh;
    padding: 5px;
    margin: 0;                
    overflow-x: hidden;
    overflow-y: auto;
}
.ressources_zone label {
    display: inline-block;
    width: 100%;
    clear: both;
}
.ressource {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;    
    vertical-align: top;
    position: relative;
    z-index: 1;
    border: solid 1px #555555;
    border-radius: 4px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: #990000;
    color: #ffffff;
    width: 4vw; 
    height: auto;
    margin: 2px;
    padding: 3px;
    overflow: hidden;
    font-size: 11px;
    cursor: move;
    touch-action: none;
    user-select: none;
}
.ressource:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 6px 8px 1px rgba(0, 0, 0, 0.14),
                0 3px 11px 2px rgba(0, 0, 0, 0.12);
}
.ressource img {
    max-width: 100%;
    max-height: 50px;
    clear: both;
}
.container.ressource {
    width: auto;
}

.drop_zone {
    z-index: 100;
    display:inline-block;
    background-color: #888888; 
    border: #cccccc 1px solid;
    width: 15.6vw; /*13.4vw;*/ 
    height: 38.5vh;
    font-size: 1.2em;
    padding: 0;
    margin: 0 0 1px 0;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: none;
}
.drop_zone.sa {
    width: 8.5vw; 
    background-color: #555555;
}
.drop_zone.so {
    width: 8.5vw;
    background-color: #555555;
}
.drop_zone.admin {
    width: 12.75vw; 
    height: 32.1vh;
    font-size: 17px;
}
.today {
    background-color: burlywood;
}
.drop_zone label {
    display: block;
    position: relative;
    height: 50px;
    margin: 0 0 15px 0;
    padding: 3px;
    text-align: center;
    font-size: 1.1em;
}
.drop_zone label.mo {
    color: black;
    background-color: #339900;
}
.drop_zone label.di {
    color: black;
    background-color: #ff9900;
}
.drop_zone label.mi {
    color: black;
    background-color: #0099ff;
}
.drop_zone label.do {
    color: black;
    background-color: #ff3333;
}
.drop_zone label.fr {
    color: black;
    background-color: #ffff00;
}
.drop_zone label.sa {
    color: black;
    background-color: #cc33ff;
}
.drop_zone label.so {
    color: black;
    background-color: white;
}

.ferien_zone {
    z-index: 100;
    display:inline-block;
    background-color: #666666; 
    border: #cccccc 1px solid;
    width: 15.6vw; /*13.4vw;*/ 
    height: 7.1vh;
    padding: 0;
    margin: 0 0 1px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    touch-action: none;
}
.ferien_zone.sa {
    width: 8.5vw; 
    background-color: #555555;
}
.ferien_zone.so {
    width: 8.5vw;
    background-color: #555555;
}
.ferien_zone>img {
    display: inline-block;
    float: left;
    width: 50px;
    height: 50px;
    margin: 12px 3px;
}
.ferien_zone.admin {
    width: 12.75vw; 
}

.krank_zone {
    z-index: 100;
    display:inline-block;
    background-color: #666666; 
    border: #cccccc 1px solid;
    width: 15.6vw; /*13.4vw;*/ 
    height: 7.1vh;
    padding: 0;
    margin: 0 0 1px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    touch-action: none;
}
.krank_zone.sa {
    width: 8.5vw; 
    background-color: #555555;
}
.krank_zone.so {
    width: 8.5vw;
    background-color: #555555;
}
.krank_zone>img {
    display: inline-block;
    float: left;
    width: 50px;
    height: 50px;
    margin: 12px 3px;
}
.krank_zone.admin {
    width: 12.75vw; 
}

.mitarbeiter_zone {
    border: #cccccc 1px solid;
    width: auto;
    height: 10.7vh;
    padding: 5px;
    margin: 5px 0;                
    overflow-x: hidden;
    overflow-y: scroll;
}

.team {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;    
    vertical-align: top;
    position: relative;
    z-index: 1;
    border: solid 1px #555555;
    border-radius: 4px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    color: #000000;
    width: 20%px; 
    height: auto;
    margin: 2px 2px 10px 2px;
    padding: 3px;
    font-size: 1em;
    cursor: move;
    overflow: hidden;
}
.team:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 6px 8px 1px rgba(0, 0, 0, 0.14),
                0 3px 11px 2px rgba(0, 0, 0, 0.12);
}
/*.team img {
    max-width: 100%;
    max-height: 90px;
    clear: both;
    margin-right: 10px;
}*/
.team input {
    display: none;
}
.team.container {
    width: 95%;
    height: auto;
    min-height: 123px;
    text-align: left;
}
.team.container input {
    display: inline-block;
    width: 80%;
}
.team.container>lable {
    display: block;
    width: 100%;
    height: 40px;
    justify-content: left;
    text-align: left;    
    vertical-align: middle;
    font-size: 14px;
    overflow: hidden;
}
.team.container lable img {
    height: inherit;
}
.team.container img {
    float: left;
    max-height:50px;
    margin-right: 10px;
    vertical-align: top;
}

.mitarbeiter {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;    
    vertical-align: top;
    position: relative;
    z-index: 1;
    border: solid 1px #555555;
    border-radius: 4px;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    color: #000000;
    width: 50px; 
    height: auto;
    margin: 2px 2px 10px 2px;
    padding: 3px;
    font-size: 1em;
    cursor: move;
    overflow: hidden;
}
.mitarbeiter:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 6px 8px 1px rgba(0, 0, 0, 0.14),
                0 3px 11px 2px rgba(0, 0, 0, 0.12);
}
.teamleiter {
    background-color: #006600;
    border: #999999 1px solid;
    color: #ffffff;
}
.mitarbeiter img {
    max-width: 100%;
    max-height: 90px;
    clear: both;
    margin-right: 10px;
}
.mitarbeiter>label {
    text-align: center;
    font-size: 11px;
    overflow: hidden;
}


/* Special values for Windows10 */
.win10 .ressources_zone {
    height: 82.15vh;
}
.win10 .drop_zone {
    width: 15.6vw; 
    height: 38vh;
}
.win10 .drop_zone.admin {
    width: 12.8vw; 
    height: 34vh;
}
.win10 .drop_zone label {
    font-size: 1.2em;
    line-height: 1.1em;
}
.win10 .ferien_zone {
    width: 15.6vw; 
    height: 6.8vh;
}
.win10 .ferien_zone.admin {
    width: 12.8vw;
    height: 6.8vh;
}
.win10 .krank_zone {
    width: 15.6vw; 
    height: 6.8vh;
}
.win10 .krank_zone.admin {
    width: 12.8vw;
    height: 6.8vh;
}
.win10 .sa {
    width: 8.5vw; 
}
.win10 .so {
    width: 8.5vw;
}
.win10 .mitarbeiter_zone {
    height: 7vh;
}
.win10 .team {
    width: 50px;
    font-size: 10px;
}
.win10 .team img {
    max-width: 100%;
    max-height: 40px;
    clear: both;
    margin-right: 10px;
}
.win10 .team.container {
    width: 95%;
}
.win10 .team.container>lable {
    height: 50px;
    font-size: 1.6em;
}
.win10 .mitarbeiter {
    width: 50px;
    font-size: 11px;
}
.win10 .mitarbeiter img {
    width: 100px;
    max-width: 100%;
    max-height: 50px;
    clear: both;
    margin-right: 10px;
}


/* Special values for IFP7550 embedded browser */
.IFP7550 .drop_zone.admin {
    width: 12.5vw; 
}
.IFP7550 .ferien_zone.admin {
    width: 12.5vw; 
}
.IFP7550 .krank_zone.admin {
    width: 12.5vw; 
}


/* Sepcial values for 4k resolution */
.raspi4 .ressources_zone {
    width: 2.7vw; 
    height: 83vh;
}
.raspi4 .ressource {
    width: 2.4vw;
}
.raspi4 .drop_zone {
    width: 16.1vw; 
    height: 41vh;
}
.raspi4 .drop_zone.admin {
    width: 13.5vw; 
    height: 35.5vh;
}
.raspi4 .drop_zone label {
    font-size: 1.7em;
}
.raspi4 .ferien_zone {
    width: 16.1vw; 
    height: 6vh;
}
.raspi4 .ferien_zone.admin {
    width: 13.5vw; 
    height: 6vh;
}
.raspi4 .krank_zone {
    width: 16.1vw; 
    height: 6vh;
}
.raspi4 .krank_zone.admin {
    width: 13.5vw; 
    height: 6vh;
}
.raspi4 .sa {
    width: 8.5vw; 
}
.raspi4 .so {
    width: 8.5vw;
}
.raspi4 .team {
    width: 100px;
    font-size: 16px;
}
.raspi4 .team img {
    max-width: 100%;
    max-height: 80px;
    clear: both;
    margin-right: 10px;
}
.raspi4 .team.container {
    width: 95%;
}
.raspi4 .team.container>lable {
    height: 60px;
    font-size: 1.6em;
    margin-bottom: 10px;
}
.raspi4 .mitarbeiter {
    width: 80px;
    font-size: 16px;
}
.raspi4 .mitarbeiter img {
    width: 100px;
    max-width: 100%;
    max-height: 80px;
    clear: both;
    margin-right: 10px;
}


[draggable=true] {
  cursor: move;
  touch-action: none;
  user-select: none;}