* {
	box-sizing: border-box;
	max-height: 1000000px;
}

/* Font setup */

@font-face {
    font-family: "regular";
    src: url("regular.ttf");
}

@font-face {
    font-family: "bold";
    src: url("bold.ttf");
}

.highlight {
	font-family: "bold";
	color: #000000;
}

.normal-font {
	font-family: "regular";
	color: #000000;
}

input {
	width: 100%;
	padding: 5px;
	border: 2px solid black;
	font-family: "regular";
	font-size: 16px;
}

input:disabled{
	border: 2px solid gray;
	color: gray;
	background-color: white !important;
	opacity: 1;
}

input:hover, select:hover {
    background-color: #dee;
    cursor: pointer;
}

input:active, select:active {
    background-color: gray;
}

textarea {
	width: 100%; 
   	border: 2px solid black; 
   	vertical-align: top; 
   	font-family: courier; 
   	font-size: 16px;
}

select {
	width: 100%;
	padding: 5px;
	border: 2px solid black;
	font-family: "regular";
	font-size: 16px;
	cursor: pointer;
}

select:disabled{
	border: 2px solid gray;
	background-color: white !important;
	opacity: 1;
}

option, optgroup {
	background-color: white !important;
}

body {
	font-family: "regular";
	color: #000000;
}

/* Image setup */

.logo {
	max-height:30px;
	vertical-align: middle;
}

.icon-menu {
	;max-height:32px;
	width:32px;
	height:32px;
	vertical-align: middle;
}

/* Division setup */

.top-bar {
	background-color:#e5e5e5;
	padding:20px;
	text-align:center;
}

.menu {
	display: block;
	float: left;
	width: 100px;
	text-align: center;
}

.menu a {
	background-color: #e5e5e5;
	padding: 8px;
	margin-top: 7px;
	display: block;
	width: 100%;
	color: black;
}

.menu a:hover {
	background-color: #dee;
}

.submenu {
	width: 100px;
	background-color: #e5e5e5;
	padding: 8px;
	display: inline-block;
	color: black;
}

.submenu:hover {
	background-color: #dee;
}

.submenu-table {
	border-left: 4px;
	border-right: 4px;
	border-bottom: 0px;
	border-top: 0px;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}

.submenu-cell {
	width: 100px;
	padding-top: 0px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
}

.main {
	float: left;
	width: calc(100% - 100px);
	padding: 7px 0px 7px 7px;
	background-image: none;
	background-position: right bottom;
    	background-repeat: no-repeat;
	background-image: url("background.jpg");
}

.sticky {
	position: sticky;
	top: 0;
	background: #e5e5e5;
}

a {
	color: black;
}

hr {
	height:1px; 
	border:none; 
	background-color:gray;
}

table {
	border-collapse: collapse;
}

/* CSS for Glance - Cluster */

#fix-main { 
	height: calc(100vh - 94px); 
}

#map-mini { 
	height: 250px;
	border: 2px solid gray;
}

#free-main { 
	height: 550px; 
}

.checkbox {
	width:  16px;
	height: 16px;
}

.normal-cluster {
	padding:		6px 0;
	background-color: 	green;
	text-align: 		center;
	color: 			white;
	font-size: 		12px;
	font-family: 		"bold";
	border-radius: 		20%;
}

.alert-cluster {
	padding: 		6px 0;
	background-color: 	crimson;
	text-align: 		center;
	color: 			white;
	font-size: 		12px;
	font-family: 		"bold";
	border-radius: 		20%;
	z-index:		2147483647 !important;
}

.info-cluster {
	padding: 		6px 0;
	background-color: 	steelblue;
	text-align: 		center;
	color: 			white;
	font-size: 		12px;
	font-family: 		"bold";
	border-radius: 		20%;
}

.autoTable {
}

.no-print {
	display: auto;
}

/* Responsive design specific CSS */

@media only screen and (max-width: 620px) {
	.menu {
		width: 100%;
		display: flex;
	}		
	
	.main {
		padding: 7px 0px;
		width: 100%;
	}
	
	.logo {
		display: none;
	}
	
	#fix-main { 
		height: calc(100vh - 169px); 
	}	

	.submenu-table {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		border-left: 0px;
		border-right: 0px;
		background-color: #e5e5e5;
	}

	.submenu {
		width: 84px;
		padding-left: 4px;
		padding-right: 4px;
	}

  .autoTable {
    border: 0;
  }
  .autoTable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .autoTable tr {
    border-bottom: 1px dotted;
  }
  .autoTable td {
    display: block;
    text-align: right;
  }
  .autoTable td:before {
    content: attr(l);
    float: left;
    font-weight: bold;
  }
  .autoTable tr:last-child {
    border: none;
    text-align: right !important;
  }
}

/* Printing support */

@media print {    
    .menu {
        display: none;
    }
	
	.main {
		width: 100%;
		padding: 7px 0px 0px 0px;
	}

	.column-2-title {
		text-align: center;
	}

	.column-2 {
		width: 100% !important;
	}
	
	.no-print {
		display: none !important;
	}
	
}