@font-face{ font-family: Calibri; src: url("fonts/calibri.ttf"); }
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); /* */
  
          } 
 :root {
/*  touch-action: pan-x pan-y;
  height: 100%; */ 
}       

body { background-color:#ececec; color:black;  
      }
.fugli { border-radius: 4px; padding: 4px;}                                                 
.fuglim { border: 1px solid blue; border-radius: 8px; padding: 5px; margin: 3px;} 
.fuglib { border: 1px solid blue; border-radius: 6px; width: 100%; margin: 5px;}
.fuglis { border: 1px solid blue; border-radius: 6px; padding: 5px;}
.tenright { box-shadow: 3px 0 3px 0; }
.ften { box-shadow: -2px 2px 4px 2px black; }
.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; }
.fntSh_white { text-shadow: 3px 3px 6px white, -3px -3px 6px white;  }   
.fntSh_dYellow { text-shadow: 6px 0px 6px yellow, -6px 0px 6px yellow;  }
.bg_Lime { background-color: lime; }
.bg_Red { background-color: red; }
.bg_White { background-color: white; }
.bg_Blue { background-color: blue; }
.brd_Blue { border: 4px solid blue; }
.brd_Black { border: 4px solid black; }
.prozr_06 { opacity: 0.6; }
.prozr_03 { opacity: 0.3; }
.prozr_05 { opacity: 0.5; }
.scal_08 { transform: scale(0.8); }
.scal_09 { transform: scale(0.9); }
.cell_left { text-align: left; color:blue; }
.cell_right { text-align: right; }
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }
.otmetr { font-weight: bold; color: red; }
.fleft { float: left; }
.fright { float: right; }
.fntbld { font-weight: bold; }
.fntnrml { font-weight: normal; }

.rndknop { display:inline-block; border:1px solid black; box-shadow:1px 1px 2px 1px black;
           border-radius:50%; background-repeat:no-repeat;background-position: center center;
           background-size: 70%; background-color:white; padding: 4px; margin: 8px;
          }
.rndknop:active { box-shadow:inset 1px 1px 1px 1px black; transform: scale(0.98); }

.dfwmenu { display:inline-block; border:1px solid black; box-shadow:1px 1px 2px 1px black;
  width:calc(100% - 88px); height: auto; padding: 12px; margin: 16px; border-radius:12px;
 }   
.dfwmenu:active { box-shadow:none; transform: scale(0.98); }
      
.colchis { border:0px solid red; }
.activvv { box-shadow: 1px 1px 6px 1px black; transform: scale(1.1); border-radius: 10px; border: 2px solid lime; }
.poliv_1 { display:inline-block; width:90%; height:auto; border:1px solid black; border-radius:6px; padding:2px;
           background-color: blue; font-size:10pt; font-weight:normal; color:white; text-align:center;
          }
.poliv_2 { display:inline-block; width:90%; height:auto; border:1px solid black; border-radius:6px; padding:2px;
           background-color: red; font-size:10pt; font-weight:normal; color:white; text-align:center;
          }
          
.closeknopD { width: 105px; height: 105px; border-radius: 50%; right: 10px; top: 10px;
              cursor: pointer; position: fixed; border: 2px solid black;z-index: 1001; 
              background-image: url(img/close.gif); background-position: center center; 
              background-size: 100% 100%; background-color: white;
              }   
.closeknopD:active { background-color: red; transform:scale(1.1); }                                   
.inputback { top: 0; left: 0; z-index: 1000; width: 100%; min-height: 100%; height: 100%;
             background-repeat: no-repeat; background-position: center center; 
            display: inline-block; position: fixed; background-color: silver;
            color: black; text-align: center; vertical-align: middle; overflow-y: scroll;
            font-weight: normal; 
           }
#progresf { font-size: 42pt; z-index: 5000; background-color: transparent; color: white;
            background-image: radial-gradient(black 2%, rgba(0,0,0,0.9) 72%, transparent); 
            text-shadow: 0px 0px 6px white;
           }             
#bigload { 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;
           }   
#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.3); color: white; 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;
                  }  
input,select { padding:16px; border-radius:6px; }                    
input[type=range] {
  -webkit-appearance: none;
  margin: 24px 0; 
}
input[type=range]:focus {
  outline: none;
}
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: 120px;
  width: 120px;
  border-radius: 50%; background-color: #55ddff;
  background-image: radial-gradient(#55ddff, #0081b5, #0081b5);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -60px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: black;
  border-radius: 1.3px;
  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: 120px;
  width: 120px;
  border-radius: 50%;
  background: radial-gradient(#55ddff, #0081b5, #0081b5);
  cursor: pointer;       
  transition-timing-function: ease-in; transition: all 0.3s;
}
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;
}