:root{
       /* --frLiCol1: #2F6879; */
       /*--frLiCol2: #EA795F;*/
       /*--frLiCol3: #7BDED2;*/
       /*--frLiCol4: #C2CECE;*/

       --frLiCol1: white;
       --frLiCol2: #030101;
       --frLiCol3: gray;
       --frLiCol4: lightgray;

       --skCol: #038f03;

       --bgCol: #112211;

       --cmColor: #408040;
}


/*          body                */
body {
       background-color: #202124;
       color: #FFFFFF;
   }

span{
       cursor: default;
}

oben{  
       color:white;       
       font-family:Verdana;
       font-size:40px;
}

.csBox{float:left;width:13%;margin-right:1%;margin-top:15px;margin-bottom:15px;
       padding:0px;background:gray;color:black;font-weight:bold;}
.csBox1{width:100%;background:lightgrey;color:black;font-weight:normal;}
.divGrau{background:gray;width:35%;left:10px;text-align:left;}
.divGrau1{font-family:Verdana;font-size:97%;background:lightgrey;width:100%;left:0px;text-align:left;padding:5px 0px;}
.rtab{font-family:Verdana;font-size:120%;}

#kopfT1{
       float:left;
}

/* Spektrum */

.spTools{
       background-color: black;
       color:white;
       font-family:Verdana;
       font-size: 20px;
       width:1850px;
       padding-top:0px;
       padding-bottom:0px;
       text-align: left;

       border-top: 1px solid darkgray;
       border-bottom: 1px solid darkgrey;

          
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#565656+0,595959+6,666666+34,474747+89,606060+100 */
       background: rgb(86,86,86); /* Old browsers */
       background: -moz-linear-gradient(top,  rgba(86,86,86,1) 0%, rgba(89,89,89,1) 6%, rgba(102,102,102,1) 34%, rgba(71,71,71,1) 89%, rgba(96,96,96,1) 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top,  rgba(86,86,86,1) 0%,rgba(89,89,89,1) 6%,rgba(102,102,102,1) 34%,rgba(71,71,71,1) 89%,rgba(96,96,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom,  rgba(86,86,86,1) 0%,rgba(89,89,89,1) 6%,rgba(102,102,102,1) 34%,rgba(71,71,71,1) 89%,rgba(96,96,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
   
}

.spToolsEntry{
       color: white;
       display: inline-block;
       margin-left: 2px;
       padding-top: 8px;
       padding-bottom: 9px;
}

.spFS1{
       font-size: 1.1em;
}

.spFS2{
       font-size: 0.9em;
}

/* Einstellungen */

.rtab1{
       font-family:Verdana;
       font-size: 120%;
       margin-left: 10px;
}

einstellungen{
       display: block;
       width  : 1850px;
       margin : auto;
}

obenEinst{
       background-color: #038F0C;
       display: block;
       text-align: left;
       color      : white;
       font-size  : 40px;     
       font-family: Verdana;
       padding-top: 4px;
       padding-bottom: 9px;
}

confContent{
       color: black;
       background-color: black;
       display       : block;
       text-align    : left;
       padding-top   : 10px;
       padding-left  : 10px;
       padding-bottom: 20px;
}

confChoice{
       color  : black;
       display: table-cell;
       
}

.confChoiceEntryMain{
       background-color: gray;
       color : black;
       float : left;
       width : 130px;
       cursor: pointer;
       margin-right:  4px;
       padding-left: 10px;
       border: 2px gray solid;
       font-size: 1.2em;     
}

.confChoiceEntryMain:hover{
       background-color: cadetblue;
}

#anzEinst{
       color      : #222;
       font-size  : 37px;
       margin-left: 100px; 
}

.rcsTabSave{
       background:lightpink;
       width:35%;
       text-align:right;
       padding:5px 0px;
}

#einstRFG6{
       background-color: transparent;
}

.confChoiceEntryRFG6Norm{
       background-color: gray;
       color : black;
       float : left;
       width : 100px;
       cursor: pointer;
       margin-right:  5px;
       padding-top: 3px;
       padding-bottom: 4px;
       text-align: center;
       border: 1px gray solid;
}

.einstRFG6Entry{
       margin-top: 4px;
}

.einstRFG6Freq{
       display: inline-block;
       background-color: transparent;
       width: 30%;
       margin-left: 11px;
       margin-top :  5px;
}

.einstSaveError{
       color: red;
}


/*  Spektrum */

#obenL1{
       color: #038F0C;
       float: left;
       font-size  : 30px;
       margin-left: 20px; 
       margin-top : 10px;
}

#pro{
       color: #038F0C;
       font-style : italic;
       margin-left: 1px;
}
#pro1{
       font-size: 40px;
}
#pro2{
       font-size  : 25px;
       margin-left: -17px;
}
#pro3{
       font-size  : 25px;
       margin-left: -13px;
}

#anzAktRX{
       color: white;
       width      : 100px;
       margin-left: 50px;
}

#anzNorm{
       width: 350;
       color      : white;
       font-size  : 37px;
       margin-left: 123px; 
}

#ds{
       color    : white;
       font-size: 15px;
}

#logo1{
       color     : white;
       font-size : 12px;
}

#logo2{
       font-size : 13px;
       margin-left: -10px;
}

#anzVersion{
       color    : black;
       font-size: 12px;
       text-align: left;
       display : block;
       padding-top: 3px;
       padding-bottom: 7px;
}


.linkOben{
       font-size  : 14px;
       margin-left: 20px;
}

#sess{
       text-align: right;
       margin-right: 191px;
}

#sessN{
       color: white;
       font-size: 23px;
       margin-right: 63px;
}

.buttonAbmelden{
       
       background-color: #038f0c;
       color           : white;
       margin-right: 50px;
       border      : 1px white solid;
       padding     : 3px 6px;
       text-align  : center;
       display     : inline-block;
       font-size   : 17px;
       cursor      : pointer;
}

.buttonAbmelden:hover{
       border: 1px black solid;
}

.c7Error{
       color:darkred;
       margin-left:20px;
       font-size:131%;
}


/* FreqList */

#FrLiBody{
       background-color: var(--frLiCol1);
       color : white;
       text-align: center;
}

#freqList{
       background-color:var(--frLiCol1);
       margin:auto;
       width: 98%;
       font-size: 1.2em;
}

#frLiHead{
       background-color: var(--skCol);
       width: 100%;
       box-sizing: border-box;
       text-align: left;
       margin-top: 15px;
       padding: 4px 0px 4px 0px;
       font-family: Verdana;
       font-weight: bold;
}

#frLiFoot{
       background-color: var(--skCol);
       color: white;
       width: 100%;
       box-sizing: border-box;
       text-align: left;
       margin-top: 3px;
       padding: 4px 0px 4px 0px;
       font-family: Verdana;
       text-align: left;

}

.frLiFootP1{
       margin-left: 1%;
       white-space: nowrap;
       font-size: 0.9em;
}

.frLiFootP2{
       color: black;
       font-size:12px;
       margin-left: 1%;
       white-space: nowrap;
}

#frLiHeadLabel1{
       color: white;
       font-size: 1.45em;
       margin-left: 5px;
}

#frLiHeadLabel2{
       color: white;
       font-size: 1.43em;
       margin-right: 9px;
       float:right;

}

.frLiEntry{
       background-color: var(--frLiCol3);
       width: 100%;
       margin-top: 1px;
       color: black;
       font-family: monospace;
       font-size: 1.3em;
       padding: 4px 10px 4px 10px;
       box-sizing: border-box;
       text-align: left;
}

.frLiLink{
       background-color: #444;
}

.frLiValues{
       background-color: transparent;
       width: 98%;
}

.frLiValues a{
       background-color: transparent;
       color: black;
}

.frLiCluster{
       text-align: center;
       font-weight: 550;
}

.frLiMenuP{
       display:inline-block;
       background-color:var(--frLiCol4);
       width:58%;
       box-sizing: border-box;
       text-align: center;
       cursor: pointer;
}

.frLiMenuP:hover{
       background-color:var(--frLiCol4);       
}

.frLiFreq{
       display:inline-block;
       background-color:#404040;
       width:46%;
       text-align: right;
       padding-right:10px;
       box-sizing: border-box;
       margin-left: 2%;
}

.frLiLev{
       display:inline-block;
       background-color:#404040;
       width:46%;
       text-align: right;
       box-sizing: border-box;
       padding-right: 10px;
}

.frLiBar{
       background-color:#aaaaaa;
       height: 12px;
       width: 0%;
       padding: 4px 10px 4px 10px;
       box-sizing: border-box;
       margin-top: 5px;
       margin-left: 2%;
}

.iText1{
       display:block;
       width: 46%;
       font-size: 12px;
       padding-right: 10px;
       box-sizing: border-box;
       margin-left: 2%;
}

.iText2{
       display: inline-block;
       background-color:var(--frLiCol4);
       width: 96%;
       margin-left: 2%;
}

.iText3{
       display: inline-block;
       background-color:var(--frLiCol4);
       width: 96%;
       margin-left: 2%;
       border: 0;
       padding-left: 2px;
       font-family: monospace;
       font-size  : 1em; 
}


/*     Startseite    */

#startBody{
       background-color: var(--frLiCol1);
       color : white;
       text-align: center;
}

#startMenuList{
       background-color:var(--frLiCol1);
       margin:auto;
       width: 98%;
       font-size: 1.2em;
}

.startMenuValues{
       background-color: transparent;
       width: 98%;
}

.startMenuEntry{
       background-color: var(--frLiCol3);
       width: 100%;
       margin-top: 11px;
       color: black;
       font-family: monospace;
       font-size: 1.8em;
       padding: 4px 10px 4px 10px;
       box-sizing: border-box;
       text-align: left;
}

.startMenuLink{
       display:inline-block;
       background-color:var(--frLiCol4);
       width:85%;
       text-align: right;
       padding-right:10px;
       box-sizing: border-box;
       margin-left: 2%;
}

#startFoot{
       background-color: var(--skCol);
       color: white;
       width: 100%;
       box-sizing: border-box;
       text-align: left;
       margin-top: 11px;
       padding: 4px 0px 4px 0px;
       font-family: Verdana;
       text-align: left;

}

.startFootP1{
       margin-left: 1%;
       white-space: nowrap;
}

.startFootP2{
       color: black;
       font-size:12px;
       margin-left: 1%;
       white-space: nowrap;
}

/* cluster Auswahl */

.cse7Cluster{
       background-color: var(--frLiCol3);
       width: 100%;
       margin-top: 3px;
       color: black;
       font-family: monospace;
       font-size: 1.8em;
       padding: 0px 0px 0px 0px;
       box-sizing: border-box;
       text-align: left;
       display: none;
}

.cse7_eins{
       background-color: red;
       display: inline-block;
}

.cse7_zwei{
       display: inline-block;       
       width: 13px;
       margin-left: 0px;
}

.cse7_drei{
       display: inline-block;
       width: 120px;
       margin-left: 3px;
       text-align: center;
}

.cse7_vier{
       display: inline-block;
       margin-left: 3px;
}

.clNr{
       display:inline-block;
       /*background-color:var(--frLiCol4);*/
       background-color: transparent;
       width:8%;
       text-align: right;
       padding-right:3px;
       margin: 2px 0px 2px 5px;
       box-sizing: border-box;
       font-size: 0.8em;
}

.clName{
       display:inline-block;
       width:80%;
       text-align: left;
       padding-left:3px;
       box-sizing: border-box;
       margin-left: 0px;
       cursor: pointer;
       font-size: 0.8em;
}

.clName:hover{
       background-color:var(--frLiCol4);
}

#linkDiv{
       width: 200px;
       background-color: #aaa;
       position:absolute;
       margin-left: 23px;
       z-index: 2;
       display: none;
       float: clear;
       opacity: 95%;
}

.linkDivEntry{
       display: block;
       font-size  : 18px;
       padding-top : 3px;
       padding-bottom: 3px;     
}

.linkDivEntry:hover{
       background-color: #888;
}

#linkDiv a{
       display: block;
       color: black;
       width: 100%;
       text-decoration: none;
       padding-top: 0px;
       padding-bottom: 0px;
}

#linkDiv a:hover{
       background-color: white;
}

#linkDiv1{
       display: inline-block;
       width: 650px;
       font-size: 0.3em;
       padding-bottom: 0px;
       margin-left: 21px;
}

#linkDiv1 a{
       background-color: #888;       
       display: inline-block;
       color: black;
       font-size: 16px;
       margin-right: 12px;
       text-decoration: none;
       padding: 1px 3px 1px 3px;
       margin-bottom: 3px;
       border: 1px solid #888;
}

#versionDiv{
       float: right;
       color: white;
       font-size: 12px;  
       margin-top: 17px;
       margin-right: 20px;
       /*vertical-align: middle;*/

}

.version{
       margin-left: 5px;
       margin-right:1px;
}

#timeDiv{
       display: inline-block;
       vertical-align: middle;
       color: white;
       margin-left: 701px;
}

.dateSp{
       font-size: 19px;
}

.timeSp{
       font-size: 25px;
       margin-left: 7px;
}

#burgerCover{
       display: block;
       width: 30px; 
       margin-left:21px;
       float:left;
}

#chbMenu{
       display: none;
}

#chbMenu:checked ~ label .l1 {
       transform:rotate(-45deg);
       top: 10px;
}

#chbMenu:checked ~ label .l3 {
       transform:rotate(45deg);
       top: 10px;
}
#chbMenu:checked ~ label .l2 { opacity: 0; } 

.linie{
       width:20px;
       height:2px;
       background-color: black;
       border-radius: 1px;
       position: absolute;
}

.rahmen{
       width: 20px;
       height: 22px;
       background-color: #aaa;
       margin-left: 2px;
       margin-top : 4px;
       padding-left: 3px;
       padding-right: 3px;
       position: relative;
       cursor: pointer;
}

.rahmen:hover{
       background-color: white;
}

.l1{ top:4px; }
.l2{ top:10px; }
.l3{ top:16px; } 

@media only screen and (min-width:800px){
       #freqList{
           width: 60%; 
       }

       .frLiEntry{
              font-size: 1.8em;
              margin-top: 6px;
       }

       #frLiFoot{
              margin-top: 6px; 
       }

       .frLiFootP1{
              font-size: 1.0em;
       }

       #startMenuList{
              width: 60%;
       }

       .startMenuLink{
              width: 46%;
       }

       .clNr ,.clName{
              font-size: 1.0em;
       }

       .cse7Cluster{
              margin-top:8px;
       }

       .sliderCM{
              bottom: 5px;
       }

}


.arrow{
       border: solid black;
       border-width: 0 3px 3px 0;
       display: inline-block;
       padding: 5px;
       cursor: pointer;
       margin-bottom: 2px;
}

.arrow:hover{
       border-color: white;
       border-width: 0 3px 3px 0;
       padding: 6px;
}

.right{
       transform: rotate(-45deg);
       -webkit-transform: rotate(-45deg);
}

.left{
       transform: rotate(135deg);
       -webkit-transform: rotate(135deg);       
}


 /*                                                 Slider CheckBox */
.switch{
       position: relative;
       display: inline-block;
       width: 25px;
       height: 13px;
}

.switch input { 
       opacity: 0;
       width: 0;
       height: 0;
}

.slider {
       position: absolute;
       cursor: pointer;
       top: 6px;
       left: 0;
       right: 0;
       bottom: 0;
       height: 13px;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
}

.slider:before {
       position: absolute;
       content: '';
       height: 11px;
       width: 11px;
       left: 1px;
       bottom: 1px;
       background-color: white;
       -webkit-transition: .4s;
       transition: .4s;
}

input:checked + .slider {
       background-color: #5555bb;
}

input:focus + .slider {
       box-shadow: 0 0 1px #5555bb;
}

input:checked + .slider:before {
       -webkit-transform: translateX(12px);
       -ms-transform: translateX(12px);
       transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
       border-radius: 34px;
}

.slider.round:before {
       border-radius: 50%;
}

.switchCM{
       position: relative;
       display: inline-block;
       width: 30px;
       height: 22px;
}

.switchCM input { 
       opacity: 0;
       width: 0;
       height: 0;
}

.sliderCM {
       position: absolute;
       cursor: pointer;
       top: 3px;
       left: 0;
       right: 0;
       bottom: 0;
       width: 38px;
       height: 22px;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
}

.sliderCM:before {
       position: absolute;
       content: '';
       height: 21px;
       width: 21px;
       left: 1px;
       bottom: 1px;
       background-color: white;
       -webkit-transition: .4s;
       transition: .4s;
}

input:checked + .sliderCM {
       background-color: #5555bb;
}

input:focus + .sliderCM {
       box-shadow: 0 0 1px #5555bb;
}

input:checked + .sliderCM:before {
       -webkit-transform: translateX(14px);
       -ms-transform: translateX(14px);
       transform: translateX(14px);
}

/* Rounded sliders */
.sliderCM.round {
       border-radius: 34px;
}

.sliderCM.round:before {
       border-radius: 50%;
}

/* Cluster Popup */

.clusterButton{
       background-color: #888;
       color: black;
       font-size: 1em;
       padding: 3px 5px 3px 5px;
       cursor: pointer;
}

.clusterButton:hover{
       background-color: cadetblue;
}

.overlay {
       position: fixed;
       top   : 0;
       left  : 0;
       right : 0;
       bottom: 0;
       background: rgba(0,0,0,0,0);
       visibility: hidden;
       opacity: 0;
       z-index: -1;
}
.overlay:target {
       visibility: visible;
       opacity: 1;
       z-index: 1;
}

.clusterPopup{
       color: black;
       top : 101px;
       left:  30px;
       padding: 0px;
       padding-right: 5px;
       padding-bottom: 8px;
       background: rgba(255,255,255,0.7);
       border-radius: 4px;
       position:absolute;
       visibility: hidden;
       opacity: 0;
       z-index: -1;
       text-align: left;
       min-width: 200px;
}
.clusterPopup:target {
       visibility: visible;
       opacity: 1;
       z-index: 1;
}

.clusterPopup .close {
       position: absolute;
       top  : 2px;
       right: 10px;
       font-size: 20px;
       font-weight: bold;
       color: black;
}

.clusterPopup .close:hover {
       color: white;
}

.clusterPopup .head{
       margin: 5px 0px 5px 5px;
       font-size: 1.1em;
       font-weight: bold;
}

.clusterPopup .line{
       margin: 1px 5px 2px 5px;
       font-size: 1.0em;
}

/*
.clusterPopup .line:hover{
       background-color:deeppink;
       opacity: 0.7;
       cursor: pointer;
}
*/

.clusterPopup .number{
       background-color: #777;
       text-align: right;
       width: 22px;
}

.clusterPopup .name{
       display: inline-block;
}

.clusterPopup input[type='radio']{
       opacity: 0;
       position: fixed;
       width: 0px;
}

.clusterPopup .nameRB{
       background-color: #777;
       display: inline-block;
       width: 87%;
}

.clusterPopup .nameRB:hover{
       background-color:cadetblue;
       opacity: 0.7;
       cursor: pointer;      
}

.clusterPopup input[type='radio']:checked + .nameRB{
       background-color:cadetblue;
}

.clusterList{
       box-sizing: border-box;
       margin-left:5px;
       width: 320px;
       float: left;
}

/* Clustermenu Auswahl HDMI-Ausgang */
#hdmiSelect input[type='radio']{
       opacity: 0;
       position: fixed;
       width: 0px;
}

#hdmiSelect .hdmiRB{
       background-color: var(--cmColor);
       display: inline-block;
       text-align: center;
       width: 160px;
}

#hdmiSelect .hdmiRB:hover{
       background-color: cadetblue;
       cursor: pointer;
}

#hdmiSelect input[type='radio']:checked + .hdmiRB{
       background-color:#777;
}

/* config RadioButton */

.configRb{
       opacity: 0;
       position: fixed;
       width: o;
}

.configRbLabel{
       background-color: #777;
       display: inline-block;
       width: 120px;
       cursor: pointer;
       border: 1px solid grey; 
       text-align: center;
}

.configRb:checked + .configRbLabel{
       background-color:cadetblue;
}

/* config TextInput */
.configTi{
       width: 30px;
       text-align: right;
       margin-left: 5px;
}

/* config Label */
.configL{
       display: inline-block;
       width: 180px;
}

/*                                                                    ----- Alarmierung */
alarmFreqList{
       background-color: red;
       display: inline-block;
}

/*                                                                    ----- Linkleiste  */
#links {
       background-color: #343434;
   
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#565656+0,595959+6,666666+34,474747+89,606060+100 */
       background: rgb(86,86,86); /* Old browsers */
       background: -moz-linear-gradient(top,  rgba(86,86,86,1) 0%, rgba(89,89,89,1) 6%, rgba(102,102,102,1) 34%, rgba(71,71,71,1) 89%, rgba(96,96,96,1) 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(top,  rgba(86,86,86,1) 0%,rgba(89,89,89,1) 6%,rgba(102,102,102,1) 34%,rgba(71,71,71,1) 89%,rgba(96,96,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to bottom,  rgba(86,86,86,1) 0%,rgba(89,89,89,1) 6%,rgba(102,102,102,1) 34%,rgba(71,71,71,1) 89%,rgba(96,96,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
   
       border-top: 1px solid darkgray;
       border-bottom: 1px solid darkgrey;
       padding-top: 7px;
       padding-bottom: 7px;
       padding-left: 23px;
       margin-top: 7px;
   }
   
   #links ul{
       margin: 0;
       padding: 0;
       list-style-type: none;
   }
   
   #links li{
       display: inline;
   }
   
   #links #current a{
       color: black;
   }
   
   #links a {
       color: #eee;
       margin-right: 11px;    
   }
   
   #links a:visited {
       color: #eee;
   }
   
   #links a:hover {
       color:lightgreen;
   }