html { margin: 0; padding: 0; font-family: Arial, Tahoma;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
div{ scrollbar-width: thin; /* scrollbar-color: blue orange; */ }
div::-webkit-scrollbar { height: 0em; width: 0em; }  
.fleft { float: left; }
.fright { float: right; }
.tenright { box-shadow: 3px 0 3px 0; }
.ften { box-shadow: -2px 2px 4px 2px black; }
.ftenin { box-shadow: inset 2px 2px 4px 2px black; }
.ftenin1 { box-shadow: inset 4px 4px 8px 4px black; }
.opac1 { opacity: 0.5; }

.fnt6 { font-size: 6pt;}
.fnt7 { font-size: 7pt;}
.fnt8 { font-size: 8pt;}
.fnt9 { font-size: 9pt;}
.fnt10 { font-size: 10pt;}       
.fnt11 { font-size: 11pt;}       
.fnt12 { font-size: 12pt;}       
.fnt14 { font-size: 14pt;}       
.fnt16 { font-size: 16pt;}
.fnt18 { font-size: 18pt;}
.fnt20 { font-size: 20pt;}
.fnt21 { font-size: 21pt;} 
.fnt22 { font-size: 22pt;} 
.fnt24 { font-size: 24pt;} 
.fnt26 { font-size: 26pt;}
.fnt28 { font-size: 28pt;}
.fnt30 { font-size: 30pt;}
.fnt32 { font-size: 32pt;}
.fnt34 { font-size: 34pt;}
.fnt36 { font-size: 36pt;}
.fnt38 { font-size: 38pt;}
.fnt42 { font-size: 42pt;}
.fnt46 { font-size: 46pt;}
.fnt48 { font-size: 48pt;}
.fnt52 { font-size: 52pt;}
.fnt56 { font-size: 56pt;}
.fnt58 { font-size: 58pt;}
.fnt64 { font-size: 64pt;}
.fnt68 { font-size: 68pt;}
.fnt72 { font-size: 72pt;}
.fnt90 { font-size: 90pt;}
.fnt120 { font-size: 120pt;}
.fnt150 { font-size: 150pt;}
.fntsz60 { font-size: 60%; }
.fntsz70 { font-size: 70%; }
.fntsz80 { font-size: 80%; }
.fntsz90 { font-size: 90%; }
.fclrBlue { color: blue; }
.fclrRed { color: red; }
.fclrWhite { color: white; }
.fclrBlack { color: black; }
.fclrGreen { color: green; }
.fclrGray { color: gray; } 
.fntbld { font-weight: bold; }
.fntnrml { font-weight: normal; }
.tx_cent { text-align:center; }
.tx_left { text-align:left; }
.tx_right { text-align:right; }
.ugli { border-radius:16px; }
.bgcol1 { background-color: rgba(0,255,255,0.3); }
.bg_red { background-color: red; }
.bg_white { background-color: white; }
.bg_yellow { background-color: yellow; }
.bg_silver { background-color: silver; }
/* background-image:linear-gradient(45deg,rgba(40,245,255,0.3),white,rgba(255,255,255,0.2),rgba(40,245,255,0.3)); */
body { background-attachment: fixed; overflow:hidden; background-position: center top;
       background-size:100% auto; background-repeat:no-repeat;
       overflow-y:scroll;
      }  
.soobbx { display:inline-block;padding:8px;margin:8px;border-radius:8px; }
#soobwin { display: inline-block; z-index: 200; text-align: center; color: black; 
   background-color: rgba(255, 255, 255, 0.95); transition: 0.8s; top: 0px;overflow:hidden;overflow-y:scroll; }      
#leftusrsW { display:inline-block;position:fixed;overflow:visible; 
  left:-100%;top:0;width:calc(100% - 30px);height:100%;background-color:rgba(0,255,255,0.7);
  z-index:201;text-align:left; border-radius:0 16px 16px 0;transition-timing-function:ease-in;transition:left 0.3s; }
#leftusrsC { display:inline-block;position:relative;left:calc(100% - 75px);top:45%;
   width:150px;height:150px;border-radius:50%;background-color:rgba(0,255,255,0.3); }
.actt { box-shadow: inset 2px 2px 4px 2px black; }
.isOnX { color: black; }
.isOffX { color: silver; }
.warnknop { display: inline-block; margin: 10px; padding: 12px; padding-left: 24px; padding-right: 24px; 
          border-radius: 24px; cursor: pointer; position: relative; 
          background-color: #e0e0e0; color: grey; width: calc(100% - 90px); 
          height:auto; min-height: 18px; transition-timing-function: ease-in; transition: all 0.01s; 
          background-repeat: no-repeat; background-position: 16px center; background-size: auto 80%;
          box-shadow: 1px 1px 1px 1px black;
         }   
.warnknop:active { box-shadow: inset 1px 1px 1px 1px black; background-color: yellow;
                    transform: scale(0.98); 
                } 
.toppann { z-index:3;display:inline-block;position:fixed;top:8px;left:8px;width:calc(100% - 180px);padding:16px;
           border-radius:88px; 
          }
.plusknop { display:inline-block; border-radius:50%; background-repeat: no-repeat; background-position: center center;
           background-size:70%; padding: 4px; margin: 8px;float:left;
           width:77px;height:77px;background-image:url(img/plusb.gif);
           border:1px solid gray;width:100px;height:100px;
           /* box-shadow:1px 1px 16px 4px white; background-color:white; */
           }                                                        
.plusknop:active { transform: scale(0.95); }          
.xrndout { display:inline-block;padding:0px;margin:24px;color:blue;background-repeat:no-repeat;
          background-position:center center;background-size:auto 70%;overflow:hidden;
          cursor:pointer;border-radius:50%;
          } 
.xrndout:active { box-shadow: 3px 3px 5px 5px black inset; text-shadow: 1px 1px 1px black; color: red;
                 }
.xrndtab { display:table;width:100%;height:100%;border:0px solid blue; }
.xrndinn { display:table-cell;text-align:center;vertical-align:middle;width:100%;height:100%;border:0px solid red; }               
      
.partinn { display:inline-block;padding:36px;background-color:rgba(255,255,255,0.5);
      margin:24px;border-radius:16px; }      
.rndknops { padding: 24px; border-radius: 32px; margin: 24px;
          color: blue; background-repeat: no-repeat;
          background-position: center center; background-size: 80% auto;
          cursor: pointer; width: auto; display: inline-block;
          border-radius:50%;
          transition-timing-function: ease-in; transition: all 0.1s; 
          } 
.rndknops:active { box-shadow: 3px 3px 5px 5px black inset; text-shadow: 1px 1px 1px black; color: red;
                  }
.gradi1 { background-image: linear-gradient(45deg,rgba(40,245,255,0.3),white,rgba(255,255,255,0.2),rgba(40,245,255,0.3)); }
.gradi2 { background-image: linear-gradient(45deg,rgba(249,168,68,0.4),rgba(255,255,255,0.2),rgba(249,168,68,0.4)); }
.gradi3 { background-image: linear-gradient(45deg,white,rgba(255,255,255,0.2),rgba(190,255,255,1.0),rgba(190,255,255,0.8)); }
.gradi4 { background-image: linear-gradient(135deg,rgba(190,255,255,1.0),rgba(255,255,255,0.01)); }
.inputback { top: 0; left: 0; z-index:1000; width:100%; min-height:100%; height:100%;
            background-color: rgba(0,0,150,0.9); background-repeat: no-repeat;
            background-position: center center; 
            display: inline-block; position: fixed; 
            color: white; text-align: center; vertical-align: middle; overflow-y:scroll;
            font-weight: normal; 
           }  
#bigload1 { background-image: url(img/anikluch.gif), radial-gradient(white 100px, transparent); display: none;
           background-position: center center; background-size: 15% 15%, 100% 100%; z-index: 99999;
           background-color: transparent;
           }
#bigload { top: 0; left: 0; z-index: 10001; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.3); display:inline-block; position: fixed; 
            color: yellow; text-align: center; vertical-align: middle; 
            font-weight: bold; font-size: 16pt;
           }           
#danetbox { background-color: rgba(0,100,0,0.2); display: none; z-index: 9999; }          
#danetmobi { display: inline-block; position: fixed; z-index: 1; text-align: center; background-color: #4169e2;
             width:calc(100% - 88px);  height: auto; top: -800px; left:44px;color: white;
             border: 5px double white; border-radius: 24px; box-shadow: 1px 1px 36px 8px black;
             transition-timing-function: ease-in; transition: all 0.6s;
             } 
.ttknops { padding: 24px; border-radius: 32px; border: 3px solid blue; margin: 8px;
          background-color: rgba(0,0,0,0.1); background-repeat: no-repeat;
          background-position: center center; background-size: auto 80%;
          cursor: pointer; width: auto; display: inline-block; 
          } 
.ttknops:active { box-shadow: 3px 3px 5px 5px black inset; text-shadow: 1px 1px 1px black; color: red;
                 }
.obknop { display: inline-block; margin: 4px; padding: 4px; padding-left: 12px; padding-right: 12px; 
          border-radius: 8px; cursor: pointer; cursor: pointer;/* default */; border: 1px solid black;
          background-color: rgba(222,222,222,1.0); color: black;
          
         }   
.obknop:active { box-shadow: inset 1px 1px 1px 1px grey;
                 text-shadow: 1px 1px 1px grey; box-shadow: inset 1px 1px 1px 1px black;
                 background-color: white;
                } 
.closeknopD { display:inline-block;z-index:3; width: 120px; height: 120px; border-radius: 50%; float: right; right: 10px; top: 10px;
              cursor: pointer; position: fixed; border: 0px dotted red; font-size: 42pt; 
              text-align: center; vertical-align: middle; 
              background-position: center center; background-size: 100% 100%; background-color: silver;
              background-image:url(img/closew.gif);right:12px;top:12px;
              
              }                        
.closeknopD:active { background-color: red; }
.inpddd { border-radius:16px; padding:6px; }
select { border-radius:16px; padding:6px; }
input:focus { background-color: #adeeff; }   
input[type="checkbox"] { transform: scale(3); }
input[type="radio"] { transform: scale(3); } 
input[type=password]{ border-radius:16px;padding:6px; }
input[type=text]{ border-radius:16px; padding:6px; }
input[type=number]{ border-radius:16px; padding:6px; }
input[type=range] {
  -webkit-appearance: none;
  margin: 24px 0; 
}
input[type=range]:focus {
  outline: none;
}
/* input[type=range]::-webkit-slider-runnable-track {
  width: 90%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
  transition-timing-function: ease-in; transition: all 0.3s;
} */

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.54), 0px 0px 1px rgba(13, 13, 13, 0.54);
  border: 3px solid #000000;
  height: 77px;
  width: 77px;
  border-radius: 50%; background-color: #55ddff;
  background-image: radial-gradient(#55ddff, #0081b5, #0081b5);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -32px;
}
/*
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd; 
  transition-timing-function: ease-in; transition: all 0.3s;
} */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 36px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: black;
  border-radius: 12px;
  border: 0px solid #010101;   
  transition-timing-function: ease-in; transition: all 0.3s;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.54), 0px 0px 1px rgba(13, 13, 13, 0.54);
  border: 2px solid #000000;
  height: 77px;
  width: 77px;
  border-radius: 50%;
  background: #55ddff;
  cursor: pointer;       
  transition-timing-function: ease-in; transition: all 0.3s;
}

.cmn-toggle {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}

.cmn-toggle + label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	user-select: none;
}

/* Round Style CSS Toggle Switch */

input.cmn-toggle-round + label {
	padding: 2px;
	width: 120px;
	height: 60px;
	background-color: #dddddd;
	border-radius: 60px;
}

input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
	display: block;
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: 1px;
	content: "";
}

input.cmn-toggle-round + label:before {
	right: 1px;
	background-color: #f1f1f1;
	border-radius: 60px;
	transition: background 0.4s;
}

input.cmn-toggle-round +label:after {
	width: 58px;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input.cmn-toggle-round:checked + label:before {
	background-color: #8ce196;
}

input.cmn-toggle-round:checked + label:after {
	margin-left: 60px;
}


/* Round Style CSS Toggle Switch with Flat Finish*/

input.cmn-toggle-round-flat + label {
	padding: 2px;
	width: 120px;
	height: 60px;
	background-color: #dddddd;
	border-radius: 60px;
	transition: background 0.4s;
}

input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
	display: block;
	position: absolute;
	content: "";
}

input.cmn-toggle-round-flat + label:before {
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	background-color: #fff;
	border-radius: 60px;
	transition: 0.4s;
}

input.cmn-toggle-round-flat + label:after {
	top: 4px;
	left: 4px;
	bottom: 4px;
	width: 52px;
	background-color: #dddddd;
	border-radius: 52px;
	transition: margin 0.4s, background 0.4s;
}

input.cmn-toggle-round-flat:checked + label {
	background-color: #8ce196;
}

input.cmn-toggle-round-flat:checked + label:after {
	margin-left: 60px;
	background-color: #8ce196;
}

.si-wrapper {
	display: inline-block;
	position: relative;
}

.speech-input {
	margin: 0;
}

.si-wrapper button {
	position: absolute;
	top: 0;
	right: 0;
	height: 64px;
	width: 64px;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	font: 0/0 a;
  cursor:pointer;
  border: 0px dotted red;
}

.si-mic,
.si-mic:after,
.si-holder,
.si-holder:before,
.si-holder:after {
	position: absolute;
	background: #333;
}

/* Microphone icon */
.si-mic {
	display: block;
	height: 25%; /* 64px; 8px / 32px */
	top: 9.375%; /* 3px / 32px */
	left: 37.5%; /* 12px / 32px */
	right: 37.5%; /* 12px / 32px */
	-webkit-border-radius: 99px 99px 0 0;
	-moz-border-radius: 99px 99px 0 0;
	border-radius: 99px 99px 0 0;
}

.si-mic:before,
.si-mic:after,
.si-holder {
	-webkit-border-radius: 0 0 99px 99px;
	-moz-border-radius: 0 0 99px 99px;
	border-radius: 0 0 99px 99px;
}

.si-mic:before {
	position: absolute;
	z-index: 1;
	content: '';
	width: 150%; /* 12px / 8px */
	height: 137.5%; /* 11px / 8px */
	top: 100%; /* 8px / 8px */
	left: -25%; /* -2px / 8px */
	background: #fff;
}

.si-mic:after {
	z-index: 1;
	content: '';
	width: 100%; /* 10px / 10px */
	height: 100%; /* 10px / 10px */
	top: 110%; /* 11px / 10px */
	left: 0;
}

.si-holder {
	display: block;
	height: 40.625%; /* 13px / 32px */
	width: 50%; /* 16px / 32px */
	left: 25%; /* 8px / 32px */
	top: 37.5%; /* 12px / 32px */
}

.si-holder:after {
	content: '';
	width: 66.666%; /* 8px / 16px */
	height: 18.182%; /* 2px / 13px */
	bottom: -30.769%; /* -4px / 13px */
	left: 16.667%; /* 2px / 16px */
}

.si-holder:before {
	content: '';
	width: 33.333%; /* 4px / 16px */
	height: 27.273%; /* 3px / 13px */
	top: 92.308%; /* 12px / 13px */
	left: 33.333%; /* 4px / 16px */
}