body{
	background-color:#999;
	color:#000;
	font: 14px serif;
}
body, html{
	margin:0 auto;
	height:100%;
    min-height: 100%;
    overflow: hidden;
}
.full-screen { height: 100%; min-height: 100%; }

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #acacac; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d; 
}

/* main menu scroll */
#sidebar_tab_1_content::-webkit-scrollbar {
  width: 12px;
}

/* Track */
#sidebar_tab_1_content::-webkit-scrollbar-track {
  background: #C3C8CC;
}
 
/* Handle */
#sidebar_tab_1_content::-webkit-scrollbar-thumb {
   background: #888; 
}

/* Handle on hover */
#sidebar_tab_1_content::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

#startscreen{
    background-color: #c3c5c7;
    width:100%;
    height:100%;
    position: fixed;
    z-index: 8000;
}

.start_loader_container {
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: #c3c5c7;
    padding:15px;
    border-radius: 10px;
}

.start_loader {
  border: 10px solid #999; /* Light grey */
  border-top: 10px solid #777; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.main_loader {
  border: 10px solid #513524; /* Light grey */
  border-top: 10px solid #e96f25; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.map_loader {
  border: 7px solid #513524; /* Light grey */
  border-top: 7px solid #e96f25; /* Blue */
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
}

.cluster_row_header{
    background-color: rgba(0,0,0,0.6);
    padding:4px;
    color:#fff;
    margin-bottom: 3px;
    border-bottom: none;
    text-shadow: none;
}

.cluster_row_header_grp{
    text-decoration: underline;
    margin-bottom: 4px;
}

.cluster_row{
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

.cluster_row_container{
    background-color: rgba(255,255,255,0.7);
    border: 1px solid lightgray;
    margin-bottom: 3px;
}

.popup-loader{
    background-color:#fff; 
    width:100%; 
    height:100%; 
    position:absolute; 
    margin:0px; 
    padding:0px; 
    border-radius:5px; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000;
}

.popup_loader_container {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: #ddd;
    padding:15px;
    border-radius: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#logout, #contact_btn{
    float:right; 
    background-color: #fff;
    white-space: nowrap;
    color:#e96f25;
    padding:7px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight: bold;
    margin:9px;
}

#android_pwa_install_container{
     width:100%; 
    height:0px; 
    position:relative; 
    top:0px;     
    background-color:#e96f25; 
    z-index: 3100; 
    display: none;
}

#android_pwa_install_msg{
    color:#fff;
}

#android_pwa_install_content{
    padding:10px;
}

#android_pwa_install_icon{
    float:left;
    margin-right:10px;
    margin-top:5px;
    height: 20px;
    width:20px;
    background-image: url(../images/btn_close_white.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#android_pwa_install_btn{
    float:right; 
    background-color: #fff;
    white-space: nowrap;
    color:#e96f25;
    padding:7px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight: bold;
}

#android_pwa_install_desktop_btn{
    float:right; 
    background-color: #fff;
    white-space: nowrap;
    color:#e96f25;
    padding:7px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight: bold;
    display: none;
    margin:9px;
    margin-right:0px;
}

#android_pwa_install_text{
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:13px;
    display: table;
    float:left;
}

#ios_pwa_install_container{
    position: fixed;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 60px;
    z-index: 5000;
    visibility: hidden;
}

#ios_pwa_install_arrow{
    position: fixed;        
    background-color: #FFF;           
    left:50%;
    width:40px;
    height:40px;
    bottom:15px;
    transform: translate(-50%, 0%) rotate(45deg);
    z-index: 15;
}

#ios_pwa_install_arrow_bg{
    position: fixed;        
    background-color: #FFF;           
    left:50%;
    width:40px;
    height:40px;
    bottom:15px;
    transform: translate(-50%, 0%) rotate(45deg);
    z-index: 5;
-webkit-box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.15);
box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.10);
}

#ios_pwa_install_msg_bg{
    position: fixed;        
    background-color: #FFF;        
    border-radius: 7px;
    left:50%;
    transform: translate(-50%,0%);
    bottom:20px;
     border: 1px solid #999;
    border-bottom: none;
    border-right: none;
    z-index: 10;
     width:80%;
    
-webkit-box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.15);
box-shadow: 4px 4px 1px 0px rgba(0,0,0,0.15);
}

#ios_pwa_install_msg_bg > #ios_pwa_install_content > #ios_pwa_install_text, #ios_pwa_install_msg_bg > #ios_pwa_install_content > #ios_pwa_install_icon{
    visibility: hidden;
}

#ios_pwa_install_msg{
    position: fixed;             
    border-radius: 7px;
    left:50%;
    transform: translate(-50%,0%);
    bottom:20px;
    border: 1px solid #999;
    border-bottom: none;
    border-right: none;
    z-index: 30;
    width:80%;
}

#ios_pwa_install_content{
    padding:12px;
}

#ios_pwa_install_icon{
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    height: 35px;
    width:35px;
    background-image: url(../images/ios_homescreen.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#ios_pwa_install_text{
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
    display: table;
}

#mobile-rotate-screen{
    display: none;
    background-color: red;
    width:100%;
    height:100%;
    position: fixed;
    top:0px;
    left:0px;
    z-index: 6000;
}

#header-title{
    margin-right: 50px;
    margin-left:80px;
}

#btn_back{
    height: 55px;
    color:#fff;
    background-color:#005dc2;
    float: left;
    padding-left: 10px;
    padding-right:20px;
    margin-right:10px;
    font-weight: bold;
    font-size: 12px;
}

#btn_back img{
    height:13px;
    width:13px;
    vertical-align: middle;
    margin-right:10px;
    opacity: 0.7;
}

#btn_taskbar_map{
    color:#fff;
    float: left;
    margin-right:2px;
    margin-left: 15px;
    margin-top:15px;
    font-weight: bold;
    font-size: 12px;
    float:left;
    background-image: url(..//images/btn_taskbar_showonmap.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:25px;
    width:25px;
    cursor: pointer; 
}

#taskbar{
    position: absolute;
}

#taskbar a:link, #taskbar a:visited{
    font-size: 12px;
    color:#fff;
    font-weight: normal;
}

.sort_high:after{
    content: "";
    display: block;
    background: url("../images/icon_sort_high.png") no-repeat;
    width: 8px;
    height: 8px;
    float: left;
    margin-right: 5px;
    margin-top: 4px;
    background-size: contain;
}

.sort_low:after{
    content: "";
    display: block;
    background: url("../images/icon_sort_low.png") no-repeat;
    width: 8px;
    height: 8px;
    float: left;
    margin-right: 5px;
    margin-top: 4px;
    background-size: contain;
}

.datepicker-here{
    width:125px;
    padding-left:5px;
    cursor: pointer;
    background-image: url('../images/input_icon.png');
    background-repeat: no-repeat;
    background-position: right;
}

.datepicker--day-name{
    font-weight: bold;
    color:#000!important;
}

#datatable{
    overflow-x: auto;
}

#datatable table{
    width:100%;         
    margin-top:10px;
}

#datatable th{
    background-color:#e5e5e5;
}

#datatable table, #datatable th, #datatable td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 7px;
    text-align: left;  
}

#datatable .headers{
    vertical-align: top;
}

#datatable .headers a:visited, #datatable .headers a:link{
    color:#000;
}

#btn_history{
    height: 55px;
    color:#fff;
    background-color:#005dc2;    
    padding-left: 10px;
    padding-right:10px;
    font-weight: bold;    
    font-size: 12px;   
    line-height:55px;
    margin: 10px;
    margin-top:20px;
}

#btn_intervall_ok{
        
}

.btn_intervall_ok_style{
    height: 25px;
    color:#fff;
    background-color:#005dc2;        
    font-weight: bold;    
    font-size: 12px;   
    line-height:25px;  
    float:left;
    width: 50px;
    cursor:pointer;        
}

.btn_date_ok_style{
    height: 25px;
    color:#fff;
    background-color:#005dc2;        
    font-weight: bold;    
    font-size: 12px;   
    line-height:25px;    
    margin-left:5px;
    float:right;
    width: 50px;
    cursor:pointer;    
    margin-top:-3px;
}

.btn_camera_ui{
    color:#fff;
    background-color:#005dc2;    
    float:left;
    width: 40px;
    height: 40px;
    line-height: 40px!important;
    font-size:18px;
     background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;        
}

.btn_camera_ui:hover{
    background-color:#004a9a;     
}

#cam_thumb_arrow_left{  
   font-size: 27px;  
}

#cam_thumb_arrow_right{  
      font-size: 27px;  
}

#cam_thumb_arrow_latest{  
       
    margin-left:2px;
}

#cam_thumb_arrow_first{  
       
    margin-right:2px;
}

#cam_thumb_arrow_save{  
    /*background-image: url(../images/btn_close_white.png); */
     margin-left:2px;
}

.cam_thumb_grp, .cam_thumb_container{
    float:left;
    background-color: #e5e5e5;
}

.cam_thumb_grp{

    background-color: #91a9b5;
}




.ver-mobile{
    display: none;
}

.intervall_text{
    float:left;
    margin-right:5px;
}

.intervall_grp{
    float:left;
    margin-right:5px;
}

.time_grp{
    float:right;
    margin-right:7px;
}

.history_icons{
    float:right;
    margin-bottom:7px;
}

.header-style{
    margin-bottom:10px;
}

#section-header{
    font-weight: bold;
    font-size: 18px;   
    display: inline-block;
    width:100%;
    vertical-align: bottom;
    padding-bottom:5px;
}

/* Count of parameters for virtual station*/
#section-header-pcs{
    font-weight: normal;
    font-size: 16px;   
}

#section-header-selector{
    float:right;
    font-weight: normal;
    font-size: 14px;
}

hr{
    margin-top:0px;
}

.history_date_selector_message{
	color:red;
	display:none;
}

/************** TOPBAR START **************/
#topbar{
    width: 100%;
    height:50px;
    background-color: #e96f25;
    z-index:4000;
   position: relative;
}

#topbar > #logo{
    float:left;
    background-image: url(..//images/logo.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:100%;
    width:45%;
}

#topbar > #logout a{
    color:#fff;
    float:right;
    line-height: 50px;
    padding-right:10px;
    height:50px;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
}

#topbartext{
    color:#fff;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    width:auto;
     font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    opacity: 0.5
}
/************** TOPBAR END **************/

#sidebar{
/*	overflow:auto;
	float:left;
	width:199px;
	height:100%;
	padding-left:10px;
	padding-top:10px;
	border-right:1px dashed black;
*/}
#main_content{
	margin-left:0px;
	margin-right:0px;
    background-color:#999;
}
#info_sub1, #info_sub2, #info_sub3, #info_sub4{
    width: 24%;
    height: 75px;
    float: left;
    overflow: hidden;
}

.info_sub_content{
}

input[type=submit] {
	padding:3px 10px; 
	background:#ddd; 
	border:1px #444 solid;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

#debug_info{
	margin-top:10px;
}

/* sidebar tabs */
#tab_buttons_container{
	text-align: center;
	cursor:pointer;
}
#tab_button_1{
	float:left;
	border:1px #444 solid;
	border-right:0;
    cursor:pointer;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-left-radius: : 5px; 
    border-bottom-left-radius: : 5px; 
}
#tab_button_2{
	float:left;
	border:1px #444 solid;
    cursor:pointer;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: : 5px; 
    border-bottom-right-radius: : 5px; 
}
#tab_1_sidebar_content{
	
}
#tab_2_sidebar_content{
	display:none;
}

#tab_2_main_content{
	width:100%;	
}

.tab_button_selected{
	background-color:#ddd;
	padding: 5px;
}
.tab_button_not_selected{
	background-color:#FFF;
	padding: 5px;
}

#datapoint_table_div{
	overflow-y: auto;
    max-height:200px;
}

#slip_datapoints_table_div{
	overflow-y: auto;
    max-height:350px;
}

.break_long_words{
	word-wrap:break-word;
}

#info_2{
	word-break: break-all;
}

/* Loader */
.first_load_loader {
	border: 8px solid #005500;
	border-radius: 50%;
	border-top: 8px solid #00CC00;
	width: 44px;
	height: 44px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 1000;
	position: fixed;
	left:50%;
	top:50%;
    margin-left:-30px;
    margin-top:-5px;
    overflow: hidden;
}
.loader {
	border: 4px solid #005500;
	border-radius: 50%;
	border-top: 4px solid #00CC00;
	width: 22px;
	height: 22px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 1000;
	position: fixed;
    right: 20px;
    bottom:25px;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.map_loader_container_bg{
    width: 100%;
    height:100%;
    position: fixed;
    top:0px;
    left:0px;    
    z-index:3000;   
}

#map_loader_text{}

/* Map */
#map_area{
	width:100%;
	height:100%;
}

#map_area_2{
	/* width:100%;
	height:100%; */
}

.tooltip {	
	font-weight: bold;
	color: white;
    position: absolute;			
    width: 160px;					
    height: 200;					
    padding: 10px;				
    background: teal;	
    border: 1px solid black;		
    border-radius: 8px;			
    pointer-events: none;
    z-index:9999;			
}

/* make table header sticky */
thead th { 
	background-color:white;
	position: sticky; top: 0; 
}

.map_icons{
	background-color:white;
}

#logoContainer {
  position: absolute;
  z-index: 100;                                           
  top: 0;
  left: 100px;
  background-color: none;
  width: 200px;
  height: 100px;
}

.btn-close{
    margin-right:-5px;
    margin-top:-5px;
}

.btn-menu{
    margin-left:8px;
    margin-top:4px;
    cursor: pointer;
}

.btn-menu-white{
    /* display: none; */
}

.btn-menu-close{
    margin-left:8px;
    margin-top:3px;
    cursor: pointer;
    height: 20px;
    width:auto;
}

#logo_id{
	padding-left:10px;
	padding-top:7px;
	padding-bottom:10px;
}

#tools_box{
    padding: 10px;
    padding-bottom:20px;
}

#tools_close{
    height:23px;
    width:23px;
    padding-left:7px;
    padding-top:7px;
}

.clusterIcon{
	width: 200px;
	height: 200px;
	text-align: center;
	font-size: 18px;
    text-shadow: 1px 1px 0px #fff;
}

.temp-highlight{
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
}

/* Used with temp. icons from cars */
.clusterIconSingle{
	width: 200px;
	height: 200px;
	background-color: none;
	text-align: center;
	font-size: 18px;
    text-shadow: 1px 1px 0px #fff;
}

/* Used with ti and vvis icons */
.clusterIconSingleMowic{
    width: 120px!important;
    font-weight: normal;
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
    border-radius:5px !important;
    border: 1px solid lightgray;
}
.clusterIconMultipleMowic{
	width: 75px!important;
	font-weight: normal;
	background-color:aqua;
	background-color:rgba(255,255,255,0.7);
	text-align: center;
	font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
 	border-radius:5px !important;
    border: 1px solid lightgray;
}

.clusterIconSingleTrackerMinimap{
    width: 110px!important;
    font-weight: normal;
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
    border-radius:5px !important;
    border: 1px solid lightgray;
}

/* Used with virtual stations icons */
.clusterIconMultipleMowicCustom{
	width: 75px!important;
	font-weight: normal;
	background-color:aqua;
	background-color:rgba(255,255,255,0.7);
	text-align: center;
	font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
 	border-radius:5px !important;
 	border: 1px solid lightgray;
    height: 22px!important; /* remove this if parameters should be shown under header */
}
.clusterIconMultipleMowicCustomSmall{
    width: 75px!important;
    font-weight: normal;
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
    border-radius:5px !important;
    border: 1px solid lightgray;
     height: 22px!important; /* remove this if parameters should be shown under header */
}
.clusterIconSingleMowicCustom{
    width: 70px!important;
    font-weight: normal;
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
    border-radius:5px !important;
    border: 1px solid lightgray;
     height: 0px!important; /* remove this if parameters should be shown under header */
}
.clusterIconSingleMowicCustomSmall{
    width: 70px!important;
    font-weight: normal;
    background-color:aqua;
    background-color:rgba(255,255,255,0.7);
    text-align: center;
    font-size: 13px;
    text-shadow: 1px 1px 0px #fff;
    border-radius:5px !important;
    border: 1px solid lightgray;
    height: 0px!important; /* remove this if parameters should be shown under header */
}




/* BASE STATION POPUP START */
#popup-station-name{
    font-weight: bold;
    font-size: 16px;    
    padding: 9px;
    padding-bottom:15px;
}

.popup-table-header{
    float:left;
    padding-top:7px;
    padding-bottom:7px;
}

#popup-top-container{
	margin: 0 auto;
}
#popup-top-left{
	float:left;
	padding-left:5px;
}
#popup-top-left h3{
	padding: 0px;
	padding-top: 5px;
	margin: 0px;
}

#popup-top-right{
	float:right;
	padding-right:5px;
}

.popup-table {
  width: 100%;
  border-style: hidden;
  border-spacing: 0px;
  margin-top:15px;
  margin-bottom:10px;
    
    font-size:1.1em;
}
.popup-table th {
  padding-left: 15px;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
   text-align: left;
}

.popup-table td {
  padding-left: 5px;
  padding-right: 15px;
  font-weight: bold;
  text-decoration: none;
  font-style: normal;
}

.popup-table-not-bold{
  font-weight: normal!important;
  text-decoration: none;
  font-style: normal;
}

.popup-table-row {}

.popup-table-row.even {
	background-color: #e5e5e5;
}
.leaflet-popup-content {
	margin: 6px 0px!important;
	margin-top: 0px!important;
	line-height: 1.4;
}
.leaflet-popup-content-wrapper
{
 	border-radius:5px !important;
	box-shadow: 0 0px 1px 1px rgba(0,0,0,1.0)!important;
}
.leaflet-popup-tip {
	box-shadow: 0 0px 1px 1px rgba(0,0,0,1.0)!important;
}
/* BASE STATION POPUP END */

.leaflet-btn-style{
    background-color:rgba(255,255,255,0.8);
}
#map_reset{
	cursor: pointer;
	font-weight: bold;
	text-align:center;
	line-height: 30px; /* Hack: vertical center*/
}

#tools_close{
	cursor: pointer;
}

#t{
	background-color: rgba(0,0,0,0);
	border:none;
}

#update{
	font-size:px;
}

#sidebar{
	display:none;
}

/************** SIDEBAR **************/
#sidebar_container{
	height:100%;
	background-color: #F0F6FB;
    overflow: hidden;
}
#sidebar_tabs{
	margin: 0 auto;
    cursor: pointer;
}

.tab_icon{
	margin-top:9px;
}

#sidebar_tab_1{
	float:left;
	width:50%;
	height: 68px;
	background-color: #D7DCE0;
	text-align:center;
	border-bottom:2px solid #C3C8CC;
	padding-bottom:2px;
    font-size:12px;
    font-weight: bold;
    color:#333;
}

#sidebar_tab_2{
	float:left;
	width:50%;
	height: 68px;
	background-color: #D7DCE0;
	text-align:center;
	border-bottom:2px solid #C3C8CC;
	padding-bottom:2px;
    font-size:12px;
    font-weight: bold;
    color:#333;
}

.sidebar_tab_selected{
	background-color: #F0F6FB!important;
    border-bottom:4px solid #005dc2!important;    
	padding-bottom:0px!important;
}

#sidebar_tab_1_content{
    height:100%;
    width:100%;
    overflow-y: auto;
}

.sidebar_row{
	clear:both;
	overflow: auto;
	border-bottom:2px solid #D8DDE2;
	padding: 5px;
    padding-top:15px;
    padding-bottom:15px;
}

.sidebar_row_selected{
    border-left: 4px solid #e96f25;
}

.sidebar_row_left > input{
    height:17px;
    width:17px;
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
}

.ti_row > input{
    height:17px;
    width:17px;
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
    margin: 3px;
}

.sidebar_label{
    display: inline-block;
    vertical-align: middle;
    margin-left:5px;
}

.ti_row > label{
    display: inline-block;
    vertical-align: middle;
    margin-left:5px;
    margin-top:3px;
    cursor: pointer;
}

.sidebar_row_left{
	float:left;
	cursor:default;
}
.sidebar_row_right{
	float:right;
	padding-right: 10px;
    padding-left:10px;
	cursor:pointer;
	font-weight: bold;
	color: gray;
    
}

.ti_row{
	/* display:inline-block; */
	display:inline-flex;
	width: 100%;
	cursor:pointer;	
    margin-top:3px;
    margin-bottom:3px;
}

.ti_row:hover{
	background-color: #C3C8CC;    
}

.sidebar_row_nopadd{
	border-bottom:2px solid #D8DDE2;
}

#sidebar_tab_1_custom_list{
	background-color: #DFE5E9;
	max-height:300px;
	overflow: scroll;
	overflow-x: hidden;
	padding-left:10px;
    overflow-y: auto;
}

#sidebar_tab_1_ti_list{
	background-color: #DFE5E9;
	max-height:300px;
	overflow: scroll;
	overflow-x: hidden;
	padding-left:10px;
}
#sidebar_tab_1_ti_list_react{
    background-color: #DFE5E9;
    max-height:300px;
    overflow: scroll;
    overflow-x: hidden;
    padding-left:10px;
}

#sidebar_tab_1_virtual_list{
	background-color: #DFE5E9;
	max-height:300px;
	overflow: auto;
	overflow-x: hidden;
	padding-left:10px;
}
.sidebar_tab_1_virtual_list_static{
    background-color: #DFE5E9;
    min-height:150px;
    max-height:150px;
    overflow: scroll;
    overflow-x: hidden;
}

.sidebar_tab_1_virtual_list_static_createnew{
  background-color: #DFE5E9;
    overflow: hidden;
    padding:10px;
    padding-top:5px;
    padding-left:12px;
}

#sidebar_tab_1_content :first-child{
	/*cursor:pointer;*/
}
#sidebar_tab_1_content :first-child a{
	color: black;
}

.sidebar_row_overview{
	display:none;
}

#mobile_logout_container{
    display: none;   
}

.mobile_logout{}

#loadscreen{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:3000; 
	color:#000;
}

#loadscreen_map{
	display:none;
	position:fixed;
	bottom:10px;
	left:10px;	
	z-index:1000; 
	color:#000;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:11px;
    background-color:  rgba(195,197,199,0.7);
    padding:10px;
    border-radius: 10px;
}

.loadscreen_bg{
	width:100%;
	height:100%;
	background-color:#324861; 
	opacity:0.7;
	color:#000;
    z-index:100;
}

.loadscreen_loader{
    position: static;
	border: 8px solid #005500;
	border-radius: 50%;
	border-top: 8px solid #00CC00;
	width: 44px;
	height: 44px;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 1000;
}
.loadcontainer{
	position:absolute;
	margin-top:70px;
	left:50%;
	top:50%;
    margin-top:-44px;
    z-index:200;    
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: italic;
    color:#333;
}

.loadcontent{
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: center; 
    display: contents; 
    color:#000;
}

#btn_time{
    float:right;
    background-image: url(..//images/btn_time.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:19px;
    width:19px;
    margin-left: 7px;
    cursor: pointer;
    padding-bottom: 3px;   
}

#btn_date{
    float:right;
    background-image: url(..//images/btn_date.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:19px;
    width:19px;
    margin-left: 7px;
    cursor: pointer;
    padding-bottom: 3px;   
}

.tableicons{
    float:right;
    min-width: 54px;
}

.btn_tablemore{
    float:right;
    background-image: url(..//images/btn_tablemore.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:19px;
    width:19px;
    margin-left: 7px;
    cursor: pointer;
}

.btn_tablemap{
    float:left;
    background-image: url(..//images/btn_tablemap.png);
    background-repeat: no-repeat;    
    background-size:contain;
    height:19px;
    width:19px;
    margin-left: 7px;
    cursor: pointer; 
}

.btn_active{
    border-bottom: 4px solid #e96f25;
}

#history_date_selector{
    float:left;
    display: none;    
    line-height: 25px;
}

#history_time_selector{
    float:left;    
}

/************** DATA CONTAINER **************/
#data_container{
    overflow-y: auto;
    overflow-x: hidden;
    height:100%;
    padding:20px;
}

#data_container_header{
    background-color: #014289;
    height: 55px;
    line-height: 55px;
    color:#fff;
    font-weight: bold;
    font-size: 16px;
}

#data_view_container{
	/* z-index: 1000; */
	position: absolute;
	left:0px;
	height: 100%;
	right: 260px;
	background-color: white;
    /* overflow-y: hidden;
    overflow-x: hidden; */
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}

/************** PLOTLY  **************/
#plotly_container {
  /* display:none; */
}

.legendlines > .js-line{    
    stroke-width: 15px !important;
    d:path("M 12 0 h 15");    
}

.legend{    
    /*transform:translate(0px, 38px);*/
}

.legendtext{    
    font-size:13px!important;    
}

.modebar-group{    
    background-color:#e5e5e5!important;    
}

.modebar-container{    
    background-color:#e5e5e5;
    display: block;
    margin-bottom: 12px;
    height: 32px;    
}

.modebar{    
    top:5px!important;
    right: 5px!important;    
}

/* Compensated battery/temperature text color*/
.bat_comp{
	color: gray;
    font-weight: normal;
}

/* Station id number in TrackIce icon*/
.ti_icon_station_id{}

.ti_icon_old_data{
	color: red;
}
.ti_list_old_data{
	color: red;
}
.ti_report_list_old_data{
	color: red;
}
.ti_popup_date_old_data{
	color: red;
}

/* Create custom station page */
#create_station_button{
    text-decoration: underline;
    color: #005dc2;
}
#v_save_button, #v_erase_button{
    float: right;
    margin-left:5px;
}
#v_create_station_select{
    width: 100%;
}
#status_field{
    color:red;
}
.v_station_name{
    float: left;
}
.v_station_edit{
    float: right;
    margin-top:3px;
    margin-right:7px;
}
.ti_row_virtual{
    width:auto;
    max-width: 200px;
    white-space: nowrap;
}

.pv-station{
    text-decoration: underline!important;
    cursor:pointer;
}

#v_lat_lon{
    /*display: none;*/
}

#v_lat{
    margin-top:7px;
    margin-bottom:5px;
}

#v_select_group{
    display: none;
}
#v_select_user{
    display: none;
}

#add_v_station{
    text-decoration: underline;
    color: #005dc2;
    font-weight: bold;
}

#cam_pic_placeholder{
    min-height: 350px;
}
#cam_pic{
    min-height: 350px;
}
#cam_pic_container{
    position: relative;
    margin:0 auto;
    max-width: 640px;
    display: none;
}
#cam_pic_arrow_left{
    top:50%;
    left:0;
    position: absolute;
    padding-left: 0px;
    width: auto; 
    height: 40px;
    line-height: 40px;
    color: white;
    font-size: xx-large;
    user-select: none;
    cursor: pointer; 
    transform: translateY(-50%);
    background-color: #005dc2;
    padding:10px;
}
#cam_pic_arrow_right{
    top:50%;
    right:0;
    position: absolute;
    padding-right: 0px;
    width: auto;
    height: 40px;
    line-height: 40px;
    color: white;
    font-size: xx-large;
    user-select: none;
    cursor: pointer; 
    transform: translateY(-50%);
    background-color: #005dc2;
    padding:10px;
}
#cam_pic_arrow_left:hover {
     background-color: #004a9a;
    color: #eee;
}
#cam_pic_arrow_right:hover {
    background-color: #004a9a;
    color: #eee;
}
#cam_pic_arrow_left:active:hover {
    color: #bbb;
}
#cam_pic_arrow_right:active:hover{
    color: #bbb;
}
#cam_pic_load_container{
    display: none;
    top:50%;
    right:50%;
    position: absolute;
    float:right;
    transform: translate(-50%, -50%);
}

#cam_thumbs{
    text-align: center;
    display: table;
    margin:0 auto;
}
#cam_thumbs_num_text{
    text-align: center;
    font-size: small;
    clear: both;
    padding: 5px;    
     padding-top: 3px;
}

.cam_thumb{
    float:left;
    position: relative;
    background-color: #ccc;
    width: 64px;
    height: 48px;
    text-align: center;
    cursor: pointer; 
}
.cam_thumb:hover {
    background-color: #ddd;
}
.cam_thumb_selected{
    background-color: #777!important;
    border-bottom:#e96f25 4px solid;
}
.cam_thumb_arrow{
    background-color: #ccc;
    float:left;
    width: 32px;
    height: 38px;
    padding-top: 10px;
    text-align: center;
    cursor: pointer; 
}
.cam_thumb_arrow_end{
    color:#669eda;
}

.cam_thumb_text{
    position: absolute;
    color:white;
    text-shadow: 0px 0px 2px #777;
    font-size: smaller;
    left: 50%;
    transform: translate(-50%, 0);
    padding-top:2px;
}
.cam_thumb_loader{
    position: absolute;
    margin-top: 15px;
    left: 50%;
    transform: translate(-50%, 0);
}

#cam_pic_header{
    top:5px;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    color:white;
    font-weight: bold;
    text-shadow: 0px 0px 2px #777;
}
.cam_old_data{
    color: red!important;
}

#cam_pic_map_icon{
    /*min-height: 32px;*/
}
.cam_pic_map_icon_class{
    min-height: 32px;
}

/* Used in camera station calendar to mark data available */
.dp-note {
    background: #ccc;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform:translate(-140%, 300%)
}

.loader_inline {
  border: 5px solid #999;
  border-top: 5px solid #777;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
  margin:0 auto;
  margin-top: 16px;
}
.loader_inline_nocenter {
  border: 3px solid #999;
  border-top: 3px solid #777;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 1s linear infinite;
}

.v_sub_header{
    margin-left: 15px;
    font-style: italic;
    font-weight: bold;
    font-size: smaller;
    text-decoration: underline;
}

#plotly_custom_legend{
    position: relative;
}
#plotly_custom_legend_pos{
    position: absolute;
    z-index: 1000;
    top: 34px;
    overflow: auto;
    max-height: 90px;
    margin-left: 10px;
}
.plot_legend_item{
    display: inline-block;
    margin:3px;
}

/* Colors moved to plot_legend.js */
.plot_legend_item_airtemp{
    /*background-color: #ccc;*/
}
.plot_legend_item_roadtemp{
    /*background-color: #ccc;*/
}
.plot_legend_item_humidity{
    /*background-color: #ccc;*/
}
.plot_legend_item_dew{
    /*background-color: #ccc;*/
}
.plot_legend_item_snow{
    /*background-color: #ccc;*/
}
.plot_legend_item_conductivity{
    /*background-color: #ccc;*/
}
.plot_legend_item_wind_max{
    /*background-color: #ccc;*/
}
.plot_legend_item_wind_avg{
    /*background-color: #ccc;*/
}
.plot_legend_item_wind_dir{
    /*background-color: #ccc;*/
}
.plot_legend_item_pcs_05 {}
.plot_legend_item_pcs_1{}
.plot_legend_item_pcs_25{}
.plot_legend_item_pcs_4{}
.plot_legend_item_pcs_10{}
.plot_legend_item_ug_1{}
.plot_legend_item_ug_25{}
.plot_legend_item_ug_4{}
.plot_legend_item_ug_10{}
.plot_legend_item_ug_1x{}
.plot_legend_item_ug_25x{}
.plot_legend_item_ug_4x{}
.plot_legend_item_ug_10x{}
.plot_legend_item_co2{}


/* Hackish custom checkbox style */
.plot_legend_item input[type="checkbox"] {
    position: relative;
    top: 4px;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    margin: 0 2px 0 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 2px;
    background-color: #0f0;
}
.plot_legend_item input[type="checkbox"]:before {
    content: '';
    display: block;
}
/* Checkmark from transformed border */
.plot_legend_item input[type="checkbox"]:checked:before {
    width: 4px;
    height: 9px;
    margin: 1px 5px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    box-shadow: 1px 1px #888888;
}
.plot_legend_item input[type="checkbox"]:focus{
    outline:0;
}
.plot_legend_item label {
  cursor: pointer;
  font-family: "Open Sans", verdana, arial, sans-serif;
  font-size: small;
  padding-right: 10px;
}

/* Color picker for trace in create virtual station*/
.v_color_button{
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
    margin: 0;
    margin-right:5px;
    float:left;
}

.cluster_row img{
    float:left;
    padding-left: 5px;
}

.react-slidedown {
    height: 0;
    transition-property: none;
    transition-duration: .15s;
    transition-timing-function: ease-in-out;
}
.react-slidedown.transitioning {
    overflow-y: hidden;
}
.react-slidedown.closed {
    display: none;
}

.tracker_icon_img{
    margin:2px;
}
.tracker_icon_wrapper {
    position: relative;
    display: inline-block;
}
.pulse-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(0, 123, 255, 0.7);
    border-radius: 50%;
    animation: pulse-circle 3s infinite;
    pointer-events: none;
}
@keyframes pulse-circle {
    0% { 
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Tabulator overrides */
.tabulator-row.tabulator-selected {
/*    background-color: white!important;*/
    background-color: transparent!important;
}

.tabulator-row:hover {
  background-color: #cdcdcd !important;
/*  color: rgb(0, 119, 255) !important;*/
/*  font-weight: bold;*/
}

/* Archived device styling - matches TrackiceList */
.tabulator .ti_report_archived {
    color: gray !important;
}

/* More specific selector for Tabulator cells */
.tabulator-table .tabulator-cell .ti_report_archived {
    color: gray !important;
}

.testing{
    width: 30px;
    height: 100%;
}

#app{
    height: 100%;
}