:root {
    --navsize-min: 200px;
    --navsize-max: 250px;
    --outlinestyle: 0px solid; /*für testzwecke beim designen*/
}

* {
    box-sizing: border-box;
}

/* left side */
header {
    height: 100%;
    border: 1px solid;
    position: fixed;
    width: clamp(var(--navsize-min), 12%, var(--navsize-max));
    background-color: #6c6c6c;
}

.logout {
    position: fixed;
    text-align: center;
    width: clamp(var(--navsize-min), 12%, var(--navsize-max));
    bottom: 10px;
}

.linkblock {
    display: block;
    font-size: 1.2em;
    margin:5px;
    border: 0px solid;
    text-align:right;
}

option.optionDevice {
    margin:2px;
    padding:6px;
    display:inline-block;
    border:1px dotted;
}
option.optionDevice:checked {
    border:0px solid;
    padding:7px;
    background-color: #1967D2;
    color:white;
}

option.optionDevice::before{
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    content: "\e4e5";
    font-style: normal;
    margin-right: 5px;
}
option.optionGroup {
    font-weight: bold;
    text-align:left;
    padding:6px;
    max-width:600px;
    display:block;
    border:0px;
}
option.optionGroup::before{
    font-weight: bold;
    font-family: "Font Awesome 6 Free";
    content: "\f500";
    font-style: normal;
    margin-right: 5px;
}
option.optionGroup:checked{
    background-color: #1967D2;
    color:white;
}

.group {
    max-width: 100%;
    text-align: left;
    /*border: 1px dotted #a8a8a8;*/
}

.group::before{
    font-weight: bold;
    font-family: "Font Awesome 6 Free";
    content: "\f500";
    font-style: normal;
    margin-right: 5px;
}

.device {
    margin:2px;
    margin-top:5px;
    /*outline: 1px solid #8e8e8e !important;*/
}

.device::before{
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    content: "\e4e5";
    font-style: normal;
    margin-right: 5px;
}

.device-online {
    background-color: #45ff45;
}

.device-maybeoffline{
    background-color: #ffff67;
}

.device-offline {
    background-color: #ff7878;
}

#contentcontainer {
    margin-top:10px !important;
    margin-bottom:30px !important;
}

#colorselector.select {
    background-color: #ff0000 !important;
    color:white !important;
}

.deviceversiontext {
    font-size: 0.6em;
}