/* @font-face{ font-family: Poiret One; src: url(fonts/PoiretOne.ttf);}
@font-face{ font-family: Docker One; src: url(fonts/DockerOne.ttf);}
@font-face{ font-family: Code39; src: url(fonts/Code39r.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 */
     /*      scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;          
      */ 
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
          } 
/*
:root {
  touch-action: pan-x pan-y;
  height: 100%; 
} */         
.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;}       
.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;}
.fnt58 { font-size: 58pt;}
.fnt64 { font-size: 64pt;}
.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%; }
.dig { text-align: right; padding-right: 8pt; }
.paddng { padding: 8pt; }
.paddng8 { padding: 8px; }
.paddng16 { padding: 16px; }
.tleft { text-align: left; }
.tright { text-align: right; }
.otmetr { font-weight: bold; color: red; }
.fleft { float: left; }
.fright { float: right; }
.fntbld { font-weight: bold; }
.fntnrml { font-weight: normal; }
.fntcursiv { font-style: italic; /*   oblique */ }
.fnt_ar { font-family: Arial; }
.fnt_dc { font-family: Docker One; }
.fnttennb { text-shadow: 1px 1px 1px black; }
.fnttennw { text-shadow: 1px 1px 1px white; }
.inpwid { width: 72px; text-align: center;} 
.brdb { border: 1px solid blue; }
.brdbred { border: 1px dotted red; }
.nobrdb { border: none; }
.tabbrd { border: 1px dotted grey; }
.bgfnn { background-color: rgba(255,255,255,0.5); }
.bgfnn1 { background-color: rgba(0,0,0,0.5); }
.bgfnn2 { background-color: rgba(0,255,255,0.5); }
.plmnobb { display: block; position: static; }
.divcc { display: table-cell; width: auto; }
.bgred { background-color: red; color: white;}
.bgblue { background-color: blue; color: white;}
.bgop1 { opacity:0.1; }
.bgop2 { opacity:0.2; }
.bgop3 { opacity:0.3; }
.bgop4 { opacity:0.4; }
.bgop5 { opacity:0.5; }
.bgop6 { opacity:0.6; }
.bgop7 { opacity:0.7; }
.bgop8 { opacity:0.8; }
.isOnX { color: black; }
.isOffX { color: silver; }
.transf0_7 { transform:scale(0.7); }
.transf0_8 { transform:scale(0.8); }
.transf1_5 { transform:scale(1.5); }
.transf3 { transform:scale(3); }
.transf4 { transform:scale(4); }
.bgnormal { background-image: linear-gradient(55deg,rgba(25,4,225,1.0),rgba(255,255,255,0.5), rgba(25,4,225,1.0)); }           
.bgnotyet { background-image: linear-gradient(0deg, rgba(255,0,0,1.0), rgba(11,226,0,1.0), rgba(255,0,0,1.0)); }
#my_camera{ /* width: 320px; height: 240px; */
            border: 1px solid black;
            }        
/* .checkx { list-style: none; } ul { list-style-type: none; }
.checkx ul li:before { content: '?'; }  
li::marker {
  color: lime;
  content: "-";  }       */ 
  
.workknop { display: inline-block; margin: 10px; padding: 12px; padding-left: 24px; padding-right: 24px; 
          border-radius: 12px; cursor: pointer; position: relative; width:auto; max-width: 80%; 
          background-color: silver; text-align:left;                height:auto; min-height: 32px;
           transition-timing-function: ease-in; transition: all 0.1s; 
          /* background-repeat: no-repeat; background-position: 16px center; background-size: auto 80%; */
         }   
/* .workknop:active { transform: scale(0.98); }  */
  
#leftXZ { display:none; position:fixed; width:88px; height:88px; background-color:red; 
          z-index:99999;left:1px; top:1px; 
         }
.warnopis { display:inline-block; font-size:12pt; width:calc(100% - 6px); 
            height:auto; max-height:42px; background-color:lime;
            overflow:hidden; margin:1px; border-radius:6px;
           }                            
.menuknop { display: inline-block; margin: 4px; padding: 8px; padding-left: 8px; padding-right: 8px; 
          border-radius: 3px; cursor: pointer; cursor: pointer;/* default */; border: 1px solid black;
          background-color: white; color: grey;
          box-shadow: 1px 1px 1px 1px black; 
          background-repeat: no-repeat; background-position: center center; background-size: 66% auto;
           }   
.menuknop:active { box-shadow: inset 1px 1px 1px 1px black; background-color: yellow;
                  } 
.menuknopDn { display: inline-block; margin: 4px; padding: 8px; padding-left: 8px; padding-right: 8px; 
       border-radius: 3px; cursor: pointer; border: 1px solid black; color: black;
       box-shadow: inset 2px 2px 1px 1px black; background-color: white;  
       background-repeat: no-repeat; background-position: center center; background-size: 66% auto;
         }   
.menuknop1 { display: inline-block; margin: 16px; padding: 12px; padding-left: 48px; padding-right: 24px; 
          border-radius: 8px; cursor: pointer; /* default */; border: 3px solid black;
          background-color: white; color: grey; width: calc(100% - 120px); 
          box-shadow: 2px 2px 2px 2px black;    height: 130px; 
          background-repeat: no-repeat; background-position: 16px center; background-size: auto 80%;
         }   
.menuknop1:active { box-shadow: inset 1px 1px 1px 1px black; background-color: yellow;
                }  /* box-shadow: 2px 2px 2px 2px black;  */
.warnknop { display: inline-block; margin: 10px; padding: 12px; padding-left: 24px; padding-right: 24px; 
          border-radius: 8px; cursor: pointer; position: relative; 
          background-color: #e0e0e0; color: grey; width: calc(100% - 120px); 
          height:auto; min-height: 18px; transition-timing-function: ease-in; transition: all 0.1s; 
          background-repeat: no-repeat; background-position: 16px center; background-size: auto 80%;
         }   
.warnknop:active { box-shadow: inset 1px 1px 1px 1px black; background-color: yellow;
                    transform: scale(0.98); 
                } 
.menuknop3 { display: inline-block; margin: 16px; padding: 12px; padding-left: 48px; padding-right: 24px; 
          border-radius: 8px; cursor: pointer; border: 3px solid black;
          background-color: white; color: grey; width: calc(100% - 120px); 
          box-shadow: 2px 2px 2px 2px black; height:auto; min-height: 130px; 
          background-repeat: no-repeat; background-position: 16px center; background-size: auto 80%;
         }   
.menuknop3:active { box-shadow: inset 1px 1px 1px 1px black; background-color: yellow;
                } 
.menuknopDn1 { display: inline-block; margin: 4px; padding: 8px; padding-left: 8px; padding-right: 8px; 
       border-radius: 3px; cursor: pointer; border: 1px solid black; color: black;
       box-shadow: inset 2px 2px 1px 1px black; background-color: white;  
       background-repeat: no-repeat; background-position: center center; background-size: 66% auto;
         }  
                    
#xtelnom { width: 520px; text-align: center;
           }                                
           
.editdata:active { border:1px solid black; }
.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: 100%; padding: 4px; margin: 8px;
          }
.rndknop:active { box-shadow:inset 1px 1px 1px 1px black; transform: scale(0.98); }
.rndknop2 { display:inline-block; border-radius:50%; background-repeat: no-repeat; background-position: center center;
           background-size: 100%; padding: 4px; margin: 8px;
          }                                                                        
.rndknop2:active { transform: scale(0.95); }          
            
.plusknop { display:inline-block; border-radius:50%; background-repeat: no-repeat; background-position: center center;
           background-size: 100%; padding: 4px; margin: 8px;float:left;
           width:77px;height:77px;background-image:url(img/plusb.gif);margin-left:64px;
           /* box-shadow:1px 1px 16px 4px white; background-color:white; */
           }                                                        
.plusknop:active { transform: scale(0.95); }          
           
.activvv { box-shadow: 1px 1px 6px 1px black; transform: scale(1.1); border-radius: 10px; border: 2px solid lime; }                   
.shrtih { font-family: Code39; }        
.minitext { display: table-cell; font-weight: normal; font-size: 10pt; text-shadow: none;
            color: black; border: 0px solid blue;
            }                                                                    
            
.horibx { display: inline-block; width: auto; height: auto; margin: 16px; padding: 16px; float: left; }            
.horibox { border: 5px solid white; text-align: right; width: 400px; height: 250px;
          padding: 24px; margin: 24px;  display: inline-block; cursor: pointer; vertical-align: top; 
          background-size: auto 90%; background-position: 24px 24px; font-size: 36pt; 
          background-repeat: no-repeat; background-color: rgba(255,255,255,0.7); color: black;
          }  
.horibox:active { box-shadow: inset 3px 3px 3px 3px black; background-color: rgba(255,255,255,0.88);
                  text-shadow: 3px 3px 3px black;
                  }          
.horiboxdn { border: 5px solid white; text-align: right; width: 400px; height: 250px;
          padding: 24px; margin: 24px;  display: inline-block; cursor: pointer; vertical-align: top; 
          background-size: auto 90%; background-position: 24px 24px; font-size: 36pt; 
          background-repeat: no-repeat; background-color: rgba(255,255,255,0.7); color: black;
             box-shadow: inset 3px 3px 3px 3px black; background-color: rgba(255,255,255,0.88);
             text-shadow: 3px 3px 3px black;
                }  
.horiinn { overflow: hidden; overflow-x: scroll; white-space: nowrap;    
         display: block; width: calc(100% - 40px);
         height: 550px; max-height: 430px; /* float: top; */
           }      
a:visited { font-family: Arial;text-decoration: none; color: blue; }
a:hover { text-decoration: none; color: red;}
a:link { text-decoration: none; color: blue; }
a:active { color: yellow; text-decoration: none; color: red; }
a.disabled {
    pointer-events: none; /* делаем ссылку некликабельной */
    cursor: default;  /* устанавливаем курсор в виде стрелки */
    color: #999; /* цвет текста для нективной ссылки */
             }
.pp:visited {font-family: Arial;text-decoration: none;color: blue;}
.pp:hover {text-decoration: none;color: red;font-size:150%;font-weight: bold;}
.pp:link { text-decoration: none;color: black; }
.pp:active {color: green; text-decoration: none;color: green;}
 /*   option { border: 1px solid blue; border-radius: 8px; padding: 5px; margin: 3px; overflow: hidden; }
background-image: url(photos/tph_1_1.jpg); overflow-y: scroll; */  
body { background-attachment: fixed;
       background-color: ededed; font-size: 16pt; background-size: auto 100%;
       background-repeat:no-repeat; background-position: center top;
       margin: 0px; padding: 0px;   
       color: black; 
      }                  
.shdtext { text-shadow: -1px -1px 3px grey, 3px 3px 3px grey; } 
.MainMenu { border: 1px solid blue; width: 600px; height: 400px; 
            text-align: center; background-repeat: no-repeat;
            padding: 24px; margin: 32px; box-shadow: 3px 3px 3px 3px grey;
            background-color: rgba(205,255,255,0.5); cursor: pointer;
            }
#Mtestpos { padding: 8px; position: fixed; right: 64px; top: 56px;
            background-color: rgba(255,55,55,0.5);
            border: 1px solid red;
          }

#MLogo1 { padding: 16px; position: fixed;
          transition-timing-function: ease-in; transition: all 0.9s;
          }
      
.dfknop1 { padding: 16px; margin: 24px; text-align: center; vertical-align: middle;
           border: 1px solid black; background-color: rgba(255,255,255,0.5); color: black;
           }

.dfknop { padding: 36px; border-radius: 6px; border: 2px solid black; margin: 8px;
          background-repeat: no-repeat;
          background-position: center center; background-size: auto 80%;
          cursor: pointer; width: auto; display: inline-block; 
          } 
.dfknop:active { box-shadow:1px 1px 2px 2px black inset; text-shadow: 1px 1px 1px black; color: red;
                 }
                             
/* input { border-radius: 4px; border: 1px solid blue; margin: 1px; font-size: 16px;}       
input:focus { border: 1px solid blue; box-shadow: 0px 0px 1px 1px black; } */ 
        
.wintop { height: 45px; border-radius: 0px; vertical-align: middle; text-align: left;
          cursor: move; line-height:42px; font-size: 16px; background-color: blue; 
          color: white; text-shadow: 1px 1px 6px white;
         }
.formstyle { padding: 0px; z-index: 10; 
            background-color: rgba(255,255,250,0.95);
            resize: both; padding: 16px; min-width: 10px; min-height: 64px;
            font-size: 12pt; text-align: center; vertical-align: middle;
            border-radius: 4px; color: black;
            border: 3px solid black; box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.6); 
            position: absolute; 
            display: inline-block;
            }  
.winstyle { padding: 0px; z-index: 1; border: 1px solid black;
            background-color: rgba(255,255,250,0.95);
            padding: 3px; min-width: 64px; min-height: 64px; overflow: auto;
            font-size: 12pt;  /*   font-family: Verdana, Arial; overflow-y: none;     */
            border-radius: 4px; color: black; text-align: center;
            box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.6); 
            position: absolute;
            resize: both; z-index: 1;
            }  
 
.infowin { position: fixed; top: 0; left: 0; display: none; cursor: pointer; max-width: 90%; max-height: 90%;
           }                   
.wintitle { position: relative; line-height: 32px; 
            display: table; width: 98%; margin: 0; left: -1px; top: -1px; display: block;
            border-radius: 4px 0px 0px 0px; font-family: Arial; font-weight: bold;
            height: 32px; text-align: left; vertical-align: middle; padding-left: 8px; padding-top: 4px; cursor: move;
           }
.wininnn { display: inline-block; width: 100%; 
           overflow-y: scroll;
           height: calc(100% - 150px);
           }  
.minphoto { width: 20px; height: 25px; border: 2px ridge white; min-width: 20px; min-height: 25px; 
            background-position: left top; background-size: auto 99%; background-repeat: no-repeat;
            border-radius: 4px; display: inline-block; position: relative; margin-right: 32px;
            box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
            } 
.maxssz { width: 90%; height: auto; }            
.maxsss { width: 80%; height: auto; }            
.miniimg { width: 50%; height: auto; }
.maximg { width: 70%; height: auto; }
.maximg1 { width: 70%; height: auto; }   
.clrwhite { color: white; }
.clrblack { color: black; }
.clrblue { color: blue; }
.clrred { color: red; }
.clrclr1 { color: #c8ffff; }
.clrclr2 { color: #d8ffb6; }
.clrclr3 { color: #0effff; }
.clrclr4 { color: #ffbbe5; }
.clrclr5 { color: #ffcf2b; }
#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.3s;
              } 
.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;
                  }  
                      
.scrolinner { border: 0px dotted red; 
              display: inline-block; 
              overflow: hidden; overflow-y: scroll; position: relative;
              /*   max-height: calc(100% - 230px); left: 0px; top: 0px; right: 0px; bottom: 130px;     */  
              } 
.obknop { display: inline-block; margin: 4px; padding: 4px; padding-left: 12px; padding-right: 12px; 
          border-radius: 3px; cursor: pointer; cursor: pointer;/* default */; border: 1px solid black;
          background-color: rgba(222,222,222,1.0); color: black;
          box-shadow: 1px 1px 1px 1px 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;
                } 
                         
.wininns { display:inline-block; top:101px; 
           border: 0px solid red; box-shadow: inset -1px 0px 2px 1px black;
           overflow-x:auto; overflow-y: scroll; width: calc(100% - 36px); height: calc(100% - 120px);
           padding: 16px;
           }                                                   
.divleft { border: 0px solid blue; display: inline-block; width: auto; height: auto; float: left; padding: 6px; }
                         
#soobform { z-index: 9999; font-weight: bold;
            transition-timing-function: ease-in; transition: all 0.9s;
            }
.inform { position: fixed; top: 10px; left: 10px; padding: 10px; border: 2px solid red; 
          z-index: 10000;
         } 
/*   ===========================================================  */           
.bigbckg { top: 0; left: 0; z-index: 100; width: 100%; height: 100%;
            background-color: rgba(11,11,110,0.85); display: inline-block; position: fixed; 
            color: white; text-align: center; vertical-align: middle; 
            font-weight: bold; font-size: 16pt;
         }           
.inpx100 { width: 100%; text-align: center;
           }       
.inpxtel { width: 370px; text-align: center;
           }       
.inputback { top: 0; left: 0; z-index: 1000; width: 100%; min-height: 100%; height: 100%;
            background-color: rgba(0,0,150,0.9); display: inline-block; position: fixed; 
            color: white; text-align: center; vertical-align: middle; overflow-y:scroll;
            font-weight: normal; 
           }           
.obknop1 { display: inline-block; margin: 0px; padding: 16px; 
          border-radius: 3px; cursor: default; border: 1px solid black;
         }   
.obknop1:active { box-shadow: inset 1px 1px 1px 1px grey;
                 text-shadow: 1px 1px 1px grey;
                }            

#bigbackg { top: 0; left: 0; z-index: 70000; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.3); display: none; position: fixed; 
            color: white; text-align: center; vertical-align: middle; 
            font-weight: bold; font-size: 16pt;
         }           
#bigload { left: 1px; bottom: 1px; background-color: rgba(255,255,255,0.5); display: none; position: fixed;
           background-image: radial-gradient(white, white 200px, transparent);
           padding: 4px; border: 0px solid black; z-index: 999999;
            }  
#progresf { display: inline-block; padding: 24px; background-color: rgba(250,210,200,0.95); color: black;
            border: 3px solid blue; border-radius: 16px; position: fixed; 
            top: 16px; left: 188px; cursor: pointer; z-index: 1003; max-width: calc(100% - 120px);
            transition-timing-function: ease-in; transition: all 0.9s;
            width: auto; height: auto; z-index: 100000; 
            box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.8); 
            } 
#toppanel { display: inline-block; position: fixed; z-index: 1;
            background-color: white; top: 0px; left: 0px; 
            height: 220px; width: 100%; overflow: auto; font-size: 10pt;     
            border-bottom: 0px solid black; box-shadow: 1px 1px 1px 1px grey;  
            } 
#MainInn { display:inline-block; position:fixed; top: 130px; left:10px; right:1px; bottom:64px;
           border: 0px solid red; box-shadow: inset -16px 0px 2px 1px black;
           overflow-x:hidden; overflow-y:scroll; text-align: center; 
           border: 0px dotted blue;
           }       
.closeknopD1 { width: 150px; height: 150px; border-radius: 50%; float: right; right: 10px; top: 10px;
              cursor: pointer; position: fixed; border: 1px dotted red; font-size: 42pt;
              text-align: center; vertical-align: middle; /* background-color: rgba(220,0,90,0.7); */
              background-image: url(img/close.gif); background-position: left top; 
              background-size: 100% 100%; 
              }                        
.closeknopD { 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-color: rgba(220,0,90,0.7); */
              background-image: url(img/close.gif); background-position: center center; 
              background-size: 100% 100%; background-color: silver; z-index:3;
              }                        
.closeknopD:active { background-color: red; }
           
/*   ===========================================================  */           
.close {display:block; position: relative; top: 3px;right: 3px;width: 36px;height:36px; line-height:36px;
       color: black; background-color: rgba(0, 0, 0, 0.7);
       cursor:pointer;-webkit-border-radius: 15px; text-align: center;
       border: none; float: right; background-image: linear-gradient(-45deg, #0b007a, white);
       -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px;
       -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 0px 0px 0px #000;
       }
       
.close:hover { background-color: red; background-image: linear-gradient(-45deg, #0b007a, red);} 		 
.close:active { box-shadow: 2px 2px 2px 2px black inset;
                }   
.rangepan { width:150px;height:88px; border-radius:44px;background-color:gray; }
                
              
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: #55ddff;
  /* background-image: radial-gradient(#55ddff, #0081b5, #0081b5); */
  cursor: pointer;
  -webkit-appearance: none;
  /* margin-top: -32px; */  
  transition-timing-function: ease-in; transition: all 0.3s;
}
/*
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: 0px;
  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: 77px;
  width: 77px;
  border-radius: 50%;
  background: #55ddff;
  cursor: pointer; 
 /* margin-top: -32px; */      
  transition-timing-function: ease-in; transition: all 0.3s;
}