/* Fuer chartJS */

* { box-sizing: border-box; }

canvas {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
/* --------      */

#tempBtn {
 margin-top: 10px;
 font-family: Comic Sans MS;
 font-size: 18px;
 background-color: #415da3;
 border: none;
 color: white;
 height: 35px;
 width: 90px;
}

#tempBtn:hover { color: #b7b5b5; }

#mainFrame {
 display: block;
 position:absolute;
 height:auto;
 bottom:0;
 top:0;
 left:0;
 right:0;
 background-color: #000000;
 font-family: Comic Sans MS;
 min-width: 420px;
}

/* Klasse für alle Namens-Buttons der Objekte,Gruppen,Crons,Shortcuts */
.objectName {
 position: absolute;
 left: 0px;
 font-size: 14px;
 font-family: Comic Sans MS;
 font-weight: bold;
 border: none;
 background-color: transparent; 
 cursor: pointer;
 color: white;
 height: 26px;
}

/* Eigentliches DIV zur Darstellung der Informationen in der waagerechten Navigationsbar */
/* DIV ist in index.php zu finden */
#navBarInfoContent {
 display: flex;
 flex-direction: row;
 gap: 20px;
 width: 570px;
 margin: auto;
 height: 40px;
 top: 2px;
 font-size: 14px;
 font-weight: bold;
 color: white;
}

/* Overflow-Container fuer das HTML-Div in der waagerechten Navigationsbar */
/* DIV ist in index.php zu finden */
#navBarOverflowContainer {
 position: absolute;
 top: 7px;
 height: 60px;
 left: 365px;
 right: 5px;
 overflow-x: auto;
 text-align: center;
 overflow-y: hidden;
 float: right;
}

/* Div zur Anzeige diverser Informationen innerhalb der Starseite bzw. deren Gruppen */
/** DIV zu finden in start.php  **/
.startView {
 position: absolute;
 height: calc(100% - 20px);
 width: calc(100% - 20px);
 font-family: Comic Sans MS;
 font-size: 15px;
 font-weight: bold;
 background-color: #222033;
 color: white;
 min-height: 200px;
}

label.setting {
 position: absolute;
 text-align: center;
 font-family: Comic Sans MS;
 font-size: 18px;
 color: white;
}

/* Modifikationen innerhalb der Texte */
shblue { color: #333d56; }

/* Div zum zentrieren des nachfolgenden Inhalts der Startseite */
#centerDiv {
 position: absolute;
 bottom: 0px;
 right: 0px;
 left: 50px;
 top: 50px;
 overflow-y: auto;
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 background-color: transparent;
}

select.setting {
 position: absolute;
 left: 20px;
 top: 140px;
 width: 300px;
 height: 35px;
 background-color: #415da3;
 color: #ffffff;
 font-family: Comic Sans MS;
 font-size: 17px;
 border: none;
}

button.setting {
 position: absolute;
 top: 13px;
 left: 800px;
 height: 33px;
 border: none;
 background-color: #415da3;
 color: #eaeaea;
 font-size: 18px;
 font-family: Comic Sans MS;
 cursor: pointer;
}

.movie:hover { color: blue; }
button:hover { color: #b7b5b5; }
.accentButton:hover { border: 2px solid #769cff; }

.setting[type="text"] {
 position: absolute;
 font-family: Comic Sans MS;
 font-size: 18px;
 background-color: #d8d4d4;
 height: 30px;
 width: 620px;
 border: none;
 color: #eaeaea;
 background-color: #415da3;
 border-radius: 1px;
 text-align: center;
}
.setting[type="text"]:focus { outline: none; }

.dynamicSetting[type="text"] {
 margin-top: 10px;
 font-family: Comic Sans MS;
 font-size: 18px;
 background-color: #d8d4d4;
 border: none;
 color: #eaeaea;
 background-color: #415da3;
 border-radius: 1px;
 text-align: center;
 height: 28px;
}
.dynamicSetting[type="text"]:focus { outline: none; }



.accentButton {
 position: absolute;
 height: 30px;
 width: 39px;
 background-color: transparent;
 color: #34497f;
 font-family: Comic Sans MS;
 font-size: 18px; 
 border: 2px solid #34497f;
 border-radius:  3px;
 z-index: 10;
}

.divFrame {
 position: absolute;
 left: 3px;
 top: 5px;
 bottom: 5px;
 width: 920px;
 z-index: 10;
 background-color: #222033;
 font-family: Comic Sans MS;
 color: #000000;
}

.divFrameFlex {
 display: block;
 position:absolute;
 height:auto;
 bottom:0;
 top:0;
 left:0;
 right:0;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 10px;
 margin-left: 10px;

 background-color: #222033;
 font-family: Comic Sans MS;
 color: white;
 white-space: nowrap;
 overflow: auto;
}

.divFrameTitle {
 position: absolute;
 top: 15px;
 left: 10px;
 height: 40px;
 width: 900px;
 text-align: center;
 border-bottom: 2px solid #283c6d;
 font-size: 18px;
 color: white;
}

#navBar {
 position: relative;
 height: 50px;
 left: 0px;
 width: 100%;
 background-color: #415da3;
 z-index: 8;
}