@charset "UTF-8";
 /* Copyright Droggitis IT Systems   */

* {  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ }



body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#000080;
    background:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background:-webkit-gradient( linear,left top, left bottom,   color-stop(0, #A7A7A7), color-stop(0.51, #E4E4E4)    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    /*text-transform:uppercase;*/
    width:100%;
}


input{border:none;}

textarea{ resize:none; outline: none;}
fieldset {      border: 0;    }
label {     display: block;      margin: 30px 0 0 0;    }
.overflow {      height: 200px;    }
h6{font-family: arial, verdana, helvetica, sans-serif; font-size: 16px;   padding:0px; margin:0px;	color: red;  overflow:hidden;	font-weight:bold;}
h4{font-family: arial, verdana, helvetica, sans-serif; font-size: 12px;   padding:0px; margin:0px;	color: red;  overflow:hidden;	font-weight:bold;}

@font-face {font-family: DigitalFont;     src: url(../js/sa-digital-number.ttf); }

#OuterAppArea{position:absolute; top:0px; left:0px; right:0px;  bottom:0px;  overflow:hidden; background-color:gray; min-width:600px; min-height:600px;}

#AppArea{position:absolute; top:5px; left:5px; right:5px;  bottom:5px; overflow:hidden; background-color:white;
              -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px; }

              
.MainPrgdiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:white; overflow:hidden;font-size: 10px;z-index:2;} 





/*  ===============    TOP SCREEN STUFF ===========================================================  */

#TopArea{position:absolute; top:0px; left:0px; height:60px; right:0px; background-color:gray; display:block; color:white; overflow:hidden; font-size: 10px;
    background: #efefef; 
	background: linear-gradient(top, #0066FF 5%, #000099 70%);  
	background: -moz-linear-gradient(top, #0066FF 5%, #000099 70%); 
	background: -webkit-linear-gradient(top, #0066FF 5%,#000099 70%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);}



.menuIcon{position:fixed; top:5px; left:5px; width:50px;  height:50px; display:block; overflow:hidden; border:none; float:left;  background:url(../img/menu_icon.png) no-repeat  0 0; }
#Logo{position:fixed; top:15px; left:60px; height:40px; width:350px; float:left;   background:url(../img/AppLogoTop.png) no-repeat  0 0;}
#JobName{position:absolute; bottom:8px; left:420px; height:20px; width:450px; color:white; font-size:20px; text-align:left; font-style:italic;}


.loginIcon{position:fixed; top:5px; right:15px; width:50px;  height:50px; display:block; overflow:hidden; border:none; float:left;  background:url(../img/loginicon.png) no-repeat  0 0; }
.loginUserName{position:fixed; top:20px; right:70px; width:100px; height:26px; display:block; overflow:hidden; border:none; float:left;  
               font-size:20px; color:white;   text-align: right;}
               



.MenuContainer{position:absolute; top:0px;  left:5px; width:350px; height:530px;  z-index:9999;  display:none;
                   background-color:#4169E1;  float:left;  padding: 2px; margin:2px;	
                    overflow-x:hidden; overflow-y:auto;
                    border-width: 1px;  border-style: solid; 	border-color: #000080 ;
                      -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
                      -moz-box-shadow:    2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999;
                      }		
                       
.MenuItem{display:block; position:relative; left:0px; right:0px; height:80px; 
              background:url(../img/menu_menu.png);
              background-size:     70px 70px;  
              background-repeat:   no-repeat;
              background-position: 5px center;
              background-color:#eeeeec; 
              padding: 2px; 
              margin: 2px;   
              border-width: 1px;	border-style: solid; 	border-color: #D8D8D8;
              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
              -moz-box-shadow:  2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999;    
               }              
.MenuItem:hover{left:1px; }	              
              
.MenuItemStr{position:absolute; bottom:10px; left:95px; font-family: arial; font-size: 36px; color:#0033cc; font-weight:bold;}

.MenuItem_CurrPos{ background:url(../img/menu_map.png); background-color:#eeeeec; 
				background-size: 70px 70px;   background-repeat:no-repeat; background-position: 5px center; }
.MenuItem_Sensors{   background:url(../img/menu_sensors.png);background-color:#eeeeec; 
				background-size:70px 70px;  background-repeat:no-repeat; background-position: 5px center; }
.MenuItem_Reports{  background:url(../img/menu_reports.png) ; background-color:#eeeeec; 
					background-size:70px 70px;  background-repeat:no-repeat; background-position: 5px center; }
.MenuItem_Fuel{  background:url(../img/menu_fuel.png) ; background-color:#eeeeec; 
					background-size:70px 70px;  background-repeat:no-repeat; background-position: 5px center; }
.MenuItem_Config{   background:url(../img/menu_config.png);  background-color:#eeeeec; 
					background-size:70px 70px;  background-repeat:no-repeat; background-position: 5px center; }
.MenuItem_About{   background:url(../img/menu_about.png); background-color:#eeeeec; 
					background-size:70px 70px; background-repeat:no-repeat; background-position: 5px center; }




.subMenuItem{position:relative; display:block;  width:250px; height:90px; float:left;
             background:url(../img/menu_menu.png);
             background-size:  50px;  
             background-repeat:   no-repeat;
             background-position: 5px 5px; 
             background-color:#eeeeec; 
             padding: 2px; margin:2px;   border-width: 1px;	border-style: solid; 	border-color: #D8D8D8;
             -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
             -moz-box-shadow:  2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999; }
.subMenuItem:hover{border-color: blue;   -moz-box-shadow:  2px 2px 2px 0px blue;   -webkit-box-shadow: 2px 2px 2px 0px blue;    box-shadow:  2px 2px 2px 0px blue;}
.subMenuItemStr{position:absolute; top:5px; left: 60px; right:5px; font:Arial; font-size:20px; color:#0033cc ;font-weight:bold;}






/*  ===============    MAIN SCREEN STUFF ===========================================================  */

	
#MainArea{position:absolute; top:60px; left:0px; bottom: 0px; right:0px; display:block; color:blue; overflow:hidden; font-size: 1px; background-color: #DCDCDC; }
/*
#MapArea{position:absolute; top:0px; left:0px; bottom: 0px; right:0px; display:block; color:blue; overflow:hidden; font-size: 1px; background-color: #DCDCDC; }
*/

#MapArea{position:absolute; top:60px; left:0px; bottom:0px; right:0px; background-color:#E8E8E8 ; display:block; color:white; overflow:auto; font-size: 20px;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15); z-index:200; } 

.MainPrgdiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px; 
			  background:url(../img/RSystemLogo.png);
              background-size:     489px 276px;  
              background-repeat:   no-repeat;
              background-position: center center;
              background-color: #DCDCDC; overflow:hidden; font-size: 10px;z-index:2;} 


.GraphTopControls{position:absolute; top:0px; left:0px; height:60px; right:0px; background-color:#3377ff ; display:block; color:white; overflow:hidden; font-size: 10px;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);}

.planBtn{position:absolute; top:5px; width:50px;  height:50px; display:block; overflow:hidden; border:none;}
.planBtn:hover{border:0px #6666FF solid;   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   border-radius: 10px; background-color:#4da6ff;}


.BtnRefresh{right:50px;  background:url(../img/refresh.png) no-repeat  0 0;}

.BtnAdd{left:10px;  background:url(../img/add.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}   
.BtnEdit{left:80px;  background:url(../img/edit.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}   
.BtnDelete{left:150px;  background:url(../img/delete.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}   

.BtnDataImport{left:10px;  background:url(../img/dataimport.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}   
.BtnSearch{left:160px;  background:url(../img/search.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}   

.BtnPrint{left:200px;  background:url(../img/print.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}  


.BtnAlerts{left:50px;  background:url(../img/alerts.png) no-repeat  0 0;}             
.BtnSensors{left:130px;  background:url(../img/sensor.png) no-repeat  0 0;}             
.BtnMimic{left:210px;  background:url(../img/mimics.png) no-repeat  0 0;}             
.BtnGeneral{left:290px;  background:url(../img/config.png) no-repeat  0 0;}             


.BtnRoutes{left:10px;  background:url(../img/routes.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}     
.BtnStops{left:80px;  background:url(../img/stops.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}      
.BtnSpeeds{left:150px;  background:url(../img/speeds.png); background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}      
.BtnPastPos{left:220px;  background:url(../img/calendar.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}           
.BtnLandMarks{left:290px;  background:url(../img/landmarks.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}    
.BtnFuelPoints{left:360px;  background:url(../img/mapfuel.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}    
.BtnEnginePoints{left:430px;  background:url(../img/engine.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}    


  
.BtnDownload{right:120px;  background:url(../img/download.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}          
.BtnRevGeocode{right:190px;  background:url(../img/rgeocode.png) ; background-size:50px 50px;background-repeat:no-repeat;background-position: center center;}          
    


.GraphTopControlsInput{position:absolute; top:10px; left:0px; width:150px; height:30px; font-size: 20px; color: #003366;  text-align:center; 
                                              padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8  ;
                                              border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                                              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}
.GraphTopControlsInput  input{width:100%; height:100%;  font-size:20px; text-align: center; -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}


.GraphTopControlsdiv{position:absolute; top:0px; bottom:0px; left:0px; width:150px; font-size: 20px; color: #003366;  text-align:center; 
                                              padding: 0px 0px 0px 0px; margin:0px; }
                                              
.GraphTopControlsSELECTBox{position:absolute; top:10px; left:100px; width:200px;  height:24px; text-align:left; font-size: 18px; color: #003366;    padding: 5px 4px 5px 4px; margin:0px;}
.GraphTopControlsSELECTBox SELECT{font-size: 18px; width:180px; color: #003366;  background-color:#F8F8F8  ;}
.GraphTopControlsSELECTBox140{position:absolute; top:10px; left:100px; width:140px;  height:24px; text-align:left; font-size: 16px; color: #003366;    padding: 5px 4px 5px 4px; margin:0px;}
.GraphTopControlsSELECTBox140 SELECT{font-size: 16px; width:140px; color: #003366;  background-color:#F8F8F8  ;}     
      
      
.GridDiv{position:absolute; top:60px; left:0px; bottom:0px; right:0px; background-color:#E8E8E8 ; display:block; color:white; overflow:auto; font-size: 20px;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);}    
	 
.GridDivWhiteParerRoll{width:600px; height:100%; min-width: 600px;max-width: 600px; display:block; background-color: white; margin: 0 auto; }
	
.GridDivTable{ display:table;  font-family: Arial;  width:100%; background-color:#EBF5FF ; color:#404040;   margin:0px; padding:0px; }

.GridDivTabletr{display:table-row;  overflow:hidden; font-size: 18px; color:#404040; padding:5px;}
.GridDivTabletr:hover{color: #0000FF ; background-color:#E6E6E6;}
.GGridDivTableth{display:table-cell;  min-width:30px; max-width:250px; min-height:20px; overflow:hidden; max-height:50px; text-align:center; background-color:#404040 ; color:#EBF5FF;   padding:4px 4px 4px 4px;
                font-size: 18px;    border:1px #E8E8E8  solid;   -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}
.GridDivTabletd{display:table-cell;  min-width:50px; max-width:250px; min-height:20px; overflow:hidden; max-height:50px; text-align:right;    padding:4px 4px 4px 4px;
                font-size: 18px;   border-bottom:1px #E8E8E8  solid;   -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}


.GridDivTableInput{ font-family: Arial;  font-size: 18px; text-align:center; width:100%;   background-color:#EBF5FF ; color:#404040; padding:4px 4px 4px 4px;  }

.GridDivTableColorBox{ width:25px; height:15px;  background-color:#EBF5FF ; padding:5px 5px 5px 5px; border:1px black solid;   -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}

	 
.GridDivTabletrSelected{ background-color:#aaccff ;}
	 
	 
.CNFGENERAL_GridDivTableInput{ font-family: Arial;  font-size: 18px; text-align:center; width:550px;   background-color:#EBF5FF ; color:#404040; padding:4px 4px 4px 4px;  }
	 
.GridDivTabletr SELECT{font-size: 16px; width:120px; color: #003366;  background-color:#F8F8F8  ;}   	 
	 


/*  -------------------------------   SALES IN SCREEN   ------------------------------------------*/
.GridDivRight{position:absolute;  top:60px; right:0px; bottom:0px; width:200px;  background-color:#E8E8E8 ; 
				color: #003366;   overflow:hidden; font-size: 20px;	 box-shadow: 0px 0px 9px rgba(0,0,0,0.15);}   
				
.GridDivRightTitle{position:absolute; top:10px; left:5px; right:5px; height:12px; font-size:12px; color: #000080;  text-align:center;  }

.GridDivRightBox{position:absolute; top:30px; left:5px; right:5px; bottom:20px; font-size: 12px; 
				color: #003366;  text-align:center;  padding:4px 2px 4px 2px; margin:0px;  vertical-align: middle;
 				background-color:#F8F8F8  ;   overflow-x:hidden; overflow-y:auto;                                           
                border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}


.GridDivRightTotalsBox{position:absolute; top:90px; left:5px; right:5px; height:100px; 
				color: white; 	background-color:#000080  ;  font-family: DigitalFont;  overflow:hidden;                                           
                border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}

.GridDivRightTotalsBoxTotalNum{position:absolute; top:10px; left:3px; right:3px; height:50px; text-align:center; font-size:34px; font-weight:bold;}
.GridDivRightTotalsBoxTotalBeginTime{position:absolute; top:70px; left:5px; width:75px; height:16px; text-align:left; font-size:14px;}
.GridDivRightTotalsBoxTotalBalance{position:absolute; top:70px; right:10px; width:100px; height:16px; text-align:right; font-size:14px; }







/*  ===============    POP UP WINDOW  STUFF ===========================================================  */



.PopUpWindow{position: relative;  width:100%; height:100%; min-width:100px; max-width:300px; min-height:100px; max-height:180px;   
             top: 40%;  left:50%;  transform: perspective(1px) translateY(-50%) translateX(-40%);;
             display:none;  z-index:9999;     background-color:#F0F0F0 ; padding:15px;
             border-width: 2px; margin:0px;	border-style: solid; 	border-color: blue;
             -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
             -moz-box-shadow:    2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999;}


.PopUpWindowFormLine{position:relative; top: 0px; left:0px; right:0px;  height:60px;  margin:0px;  padding:0px 10px 0px 10px; }

.PopUpWindowFormLineTitle{position:absolute; top: 1px;  left:0px; right:0px; height:15px; 
                         font-size:11px;  color:#003366; text-align:left;  padding: 3px 5px 3px 5px; margin:0px; float:left;}

.PopUpWindowFormLineInputBorder{position:absolute; top:20px; left:0px; right:0px; height:30px; font-size: 20px; color: #003366;  text-align:center; 
                                              padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8  ;
                                              border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                                              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}
.PopUpWindowFormLineInputBorder  input{width:100%; height:100%;  font-size:20px;}



.PopUpWindowFormLineTitle2{position:absolute; top: 1px;  left:0px; width:130px; height:15px; 
                         font-size:11px;  color:#003366; text-align:left;  padding: 3px 5px 3px 5px; margin:0px; float:left;}
.PopUpWindowFormLineInputBorder2{position:absolute; top:20px; left:0px; width:155px; height:30px; font-size: 20px; color: #003366;  text-align:center; 
                                              padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8  ;
                                              border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                                              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}
.PopUpWindowFormLineInputBorder2  input{width:100%; height:100%;  font-size:20px;}



.PopUpWindowFormLineTitle3{position:absolute; top: 1px;  left:0px; width:90px; height:15px; 
                         font-size:11px;  color:#003366; text-align:left;  padding: 3px 5px 3px 5px; margin:0px; float:left;}
.PopUpWindowFormLineInputBorder3{position:absolute; top:20px; left:0px; width:90px; height:30px; font-size: 20px; color: #003366;  text-align:center; 
                                              padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8  ;
                                              border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                                              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}
.PopUpWindowFormLineInputBorder3  input{width:100%; height:100%;  font-size:20px;}



.PopUpWindowContentsFormFieldSELECT{position:absolute; top:20px; left:0px; width:300px;  height:24px; text-align:left; font-size: 18px; color: #003366;    padding: 5px 4px 5px 4px; margin:0px;}
.PopUpWindowContentsFormFieldSELECT SELECT{font-size: 18px; width:300px; color: #003366;  background-color:#F8F8F8  ;}


.PopUpWindowFormLineTextArea4{position:absolute; top: 20px; left:0px; right:10px;  height:60px; text-align:left;  font-size:11px;  color:#003366; padding: 0px; margin:0px; 
							background-color:#F8F8F8 ;  background-color:white;     border: 1px #E0E0E0 solid;  -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;
                             }






.PopUpWindowContentsFormLineSeperator{position:relative; top: 0px; left:5px; right:15px;  height:2px; margin: 11px 0px 11px 0px; background-color:blue;}


.PopUpWindowOK{position:absolute; bottom:10px; right:10px; width:50px; height:50px;  background:url(../img/ok.png) no-repeat  0 0; }
.PopUpWindowCancel{position:absolute; bottom:10px; right:90px; width:50px; height:50px; background:url(../img/cancel.png) no-repeat  0 0; }





.PopUpWindowPOSBig{position:absolute; top:60px; left:400px;  height:520px;  width:500px;  display:none; z-index:9003; background-color:#F0F0F0 ;
                      border-width: 1px; 	padding: 10px; margin:0px;	border-style: solid; 	border-color: blue;
                      -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
                      -moz-box-shadow:    2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999; }
                      
.PopUpWindowPOSBigFormLine{position:relative; top: 0px; left:0px; right:0px;  height:80px;  margin:0px;  padding:0px 10px 0px 10px; }

.PopUpWindowPOSBigFormLineTitle{position:absolute; top: 1px;  left:0px; right:0px; height:22px; font-size:16px;  color:#003366; text-align:left;  padding: 3px 5px 3px 5px; margin:0px; float:left;}

.PopUpWindowPOSBigFormLineInputBorder{position:absolute; top:24px; left:0px; right:0px; height:40px; font-size: 30px; color: #003366;  text-align:center; 
                                              padding: 5px 5px 5px 5px; margin:0px; background-color:#F8F8F8  ;
                                              border-width: 1px; 	border-style: solid; 	border-color: #E0E0E0 ; 
                                              -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;}
.PopUpWindowPOSBigFormLineInputBorder  input{width:100%; height:100%;  font-size:20px; border:none;}





.PopUpWindowData{position:absolute; top:70px; left:400px;  height:520px;  width:400px;  display:none; z-index:9003; background-color:#F0F0F0 ;
                      border-width: 1px; 	padding: 10px; margin:0px;	border-style: solid; 	border-color: blue;
                      -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
                      -moz-box-shadow:    2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999; }


.PopUpWindowDataTop{position:absolute; top:0px; left:0px; height:50px; width:100%; background:#3377ff; padding: 0px 0px 0px 0px;  margin:0px 0px 0px 0px; 
                      border-width: 0px; border-style: solid; 	border-color: gray; -webkit-border-radius: 2px 2px 0px 0px;   -moz-border-radius: 2px 2px 0px 0px;   border-radius: 2px 2px 0px 0px;;}
.PopUpWindowDataTopTitle{position:relative; top:13px; height:14px;  left: 10px; width:150px;  font-family: Arial, verdana, helvetica, sans-serif;  font-size: 14px;  font-weight:bold; color: white; }   
.PopUpWindowDataTopClose{position:absolute; top:5px; height:40px;  right:5px; width:40px; background: url("../img/exit.png");   background-size:     contain;    }

.PopUpWindowDataContents{position:absolute; top:50px; bottom:50px;  left: 5px; right:5px;  font-family: Arial, verdana, helvetica, sans-serif;  font-size: 20px; color: blue;  background-color:#F0F0F0;}

.PopUpWindowDataBottom{position:absolute; bottom:0px; height:50px;  left: 0px; width:100%;  adding: 2px; float:left;}



/* ---  SLIDERS   */


.switch {position: relative;  display: inline-block;  width: 60px;  height: 34px;}
/* Hide default HTML checkbox */
.switch input {  opacity: 0;  width: 0;  height: 0;}

/* The slider */
.slider {position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ff0000;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 26px;  width: 26px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}

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

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

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

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



/* -------------------  OTHERS --------------------*/

 .MarkerLabels{left:0px; top:0px; width: 60px;  color: black;   background-color: white;   font-family: "Arial";   font-size: 9px; white-space: nowrap;   
   font-weight: bold; text-align: center;   border: 1px solid white;  -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;  opacity: 1;
 }

 .StopLabels{left:0px; top:0px; width: 60px;  color:white;   background-color: red;   font-family: "Arial";   font-size: 12px; white-space: nowrap;  
   font-weight: bold; text-align: center;   border: 1px solid white;  -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;  opacity: 1;
 }

 .SpeedLabels{left:0px; top:0px; width: 22px;  color:white;   background-color: green;   font-family: "Arial";   font-size: 11px; white-space: nowrap;   
   font-weight: bold; text-align: right;   border: 1px solid white;  -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;  opacity: 1;
 }
 
.RouteStopLabels{left:0px; top:0px; width: 40px;  color:#000080;   font-family: "Arial";   font-size: 18px; white-space: nowrap;   
   font-weight: bold; text-align: center;}
 
 
 
 

/* ===================   GAUGES  =================================*/

.gaugeBlock{
    position:relative; top:1px; left:1px; width:210px; height:230px;  background-color:gainsboro; border-radius: 4px; border: 1px solid #000080;  float:left; z-index:100;}


.gaugeTitle{position:absolute; top:0px; left:2px; width:208px; height:18px; color:blue; font-size:12px; z-index:101; text-align:center;}
.gaugeGraph{position:absolute; top:22px; left:1px; width:208px; height: 202px; z-index:101;}
.GaugeCanvas{position:absolute; top:0px; left:0px; width:208px; height: 202px; z-index:102;}


.OnOffDiv{position:absolute; top:50px; left:50px; width:100px;  height:100px; background: url(../img/onoff_off100.png); 
			background-size:100px 100px;background-repeat:no-repeat;background-position: center center;  z-index:102;}


.CounterDiv{position:absolute; top:50px; left:10px; width:180px;  height:70px;  padding:5px;
			font-family: DigitalFont; font-size:30px; color: white;  text-align:center;  background-color:#000080 ; z-index:102; 
			border: 2px solid black;  -webkit-border-radius: 4px;   -moz-border-radius: 4px;   border-radius: 4px;  opacity: 1;}
.CounterDiv a{position:absolute; top:50px; left:10px; width:160px;  height:14px; 
			font-family: DigitalFont; font-size:14px; color: white;  text-align:center;  background-color:#000080 ; z-index:103}			




/* ===================   TIMELINES  =================================*/


.TimeLineBlock{
    position: relative; top:2px; left:2px; width:440px; height:200px;  background: #000080;     border-radius: 4px;  
    border: 1px  #000080 solid; color:black; font-size:12px; margin:2px;  float:left; 
}

.TimeLineBlockBig{
    position: absolute; top:10px; left:10px; right:10px; bottom:10px;  background: #000080;     border-radius: 4px;  
    border: 1px  #000080 solid; color:black; font-size:12px; margin:2px;  float:left; 
}
.TimeLineTitle{position:absolute; top:0px; right:2px; left:2px; height:20px;  background-color:#404040; color:white; font-size:14px; font-weight: bold;}
.TimeLineGraph{position:absolute; top:21px; right:2px; left:2px; bottom:2px; border:1px white solid;  background-color:lightgrey;}




/*------------ BOTTOMLEFT WINDOW ----------------------*/



.BottomLeftWindowData{position:absolute; bottom:3px; left:3px;  height:170px;  width:250px;  display:none; z-index:9005; background-color:#F0F0F0 ;
                      border-width: 1px; 	padding: 10px; margin:0px;	border-style: solid; 	border-color: blue;
                      -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; 
                      -moz-box-shadow:    2px 2px 2px 0px #999999;   -webkit-box-shadow: 2px 2px 2px 0px #999999;    box-shadow:  2px 2px 2px 0px #999999; }

.BottomLeftWindowDataTop{position:absolute; top:0px; left:0px; height:50px; width:100%; background:#3377ff; padding: 0px 0px 0px 0px;  margin:0px 0px 0px 0px; 
                      border-width: 0px; border-style: solid; 	border-color: gray; -webkit-border-radius: 2px 2px 0px 0px;   -moz-border-radius: 2px 2px 0px 0px;   border-radius: 2px 2px 0px 0px;;}
.BottomLeftWindowDataTopTitle{position:relative; top:13px; height:14px;  left: 10px; width:150px;  font-family: Arial, verdana, helvetica, sans-serif;  font-size: 14px;  font-weight:bold; color: white; }   
.BottomLeftWindowDataTopClose{position:absolute; top:5px; height:40px;  right:5px; width:40px; background: url("../img/exit.png");   background-size:     contain;    }

.BottomLeftWindowDataContents{position:absolute; top:50px; bottom:3px;  left: 5px; right:5px;  font-family: Arial, verdana, helvetica, sans-serif;  font-size: 20px; color: blue;  background-color:#F0F0F0;}







 
 
/* ===================   About  =================================*/
.AboutDiv{width:500px;height:500px; margin:auto; margin-top:100px; }
.ABOUT_Logo{position: relative; top:0px;left:0px; width: 500px; height:300px; background:url(../img/RSystem_Gen3_AboutLogo.png) ; 
background-size:500px 300px;background-repeat:no-repeat;background-position: center center;}
.AboutText{position: relative;top:310px;left:0px; width: 500px; height:190px; }