body {
	margin: 0;
	padding: 0;

	background: rgb(48,48,48);
	Xbackground: linear-gradient(270deg, rgba(6,31,62,1) 0%, rgba(7,41,125,1) 51%, rgba(5,164,177,1) 97%);
	
	height: 100vh;

	font-family: "Open Sans", Helvetica, Arial, "Sans Serif";

  }
  #login .container #login-row #login-column #login-box {
	margin-top: 200px;
	max-width: 600px;
	height: 320px;
	border: 1px solid #9C9C9C;
	background-color: #EAEAEA;
  }
  #login .container #login-row #login-column #login-box #login-form {
	padding: 20px;
  }
  #login .container #login-row #login-column #login-box #login-form #register-link {
	margin-top: -85px;
  }


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWELVE  */
.span_12_of_12 { width: 100%; }
.span_11_of_12 { width: 91.53%; }
.span_10_of_12 { width: 83.06%; }
.span_9_of_12 { width: 74.6%; }
.span_8_of_12 { width: 66.13%; }
.span_7_of_12 { width: 57.66%; }
.span_6_of_12 { width: 49.2%; }
.span_5_of_12 { width: 40.73%; }
.span_4_of_12 { width: 32.26%; }
.span_3_of_12 { width: 23.8%; }
.span_2_of_12 { width: 15.33%; }
.span_1_of_12 { width: 6.866%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 800px) {
	.col {  margin: 1% 0px 1% 0px; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 96%;
	margin-left: 2%; 
	}
}

h3 {
	font-weight: 200;
	font-size: 1.6em;
	margin-top: 0px;
}

h4 {
	font-weight: 300;
	font-size: 1.4em;
	margin: 0px;
}

h5 {
	font-weight: 600;
	font-size: 1.2em;
	margin: 0px;
}

h6 {
	font-weight: 600;
	font-size: 1.0em;
	margin-top: 0px;
	margin-bottom: 2px;
	color: #009999;
}

ul {
	margin: 0px;
	padding: 20px;
}

li {
	font-weight: 400;
	margin-bottom: 10px;
}

hr {
	border-top: 1px dashed #cccccc;
}

.logout {
	color: #ffffff !important;
}

.fine {
	font-weight: 100;
}

.top_small_space {
	margin-top: 5px;
}

.bottom_small_space {
	margin-bottom: 5px;
}

.inline_label {
	font-weight: 600;
	font-size: 1.0em;
	color: #009999;
}

.show_json {
	width: 100%;
	box-sizing: border-box;
	height: 800px;
	color: #ccddff;
	background-color: #333333;
	font-family: Consolas, "Courier New", Courier;
	font-size: 10px;
	resize: vertical;
}

.contentBlock {
	width: 100%;
	box-sizing: border-box;
	background-color: #ffffff;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	color: #333333;
	border-radius: 8px;
	border: 1px solid #cccccc;
}

.description {
	font-size: 1.0em;
	font-weight: 400;
	color: #999999;
}

.simple_table, .table_label, .table_value {
  border: 1px solid #cccccc;
  border-collapse: collapse;
}

.simple_table {
	border: 1px;
	width: 100%;

}

.table_label, .table_value {
	font-size: 10pt;
	vertical-align: top;
	margin: 1px;
	padding: 4px;
}

.table_label {
	font-weight: 600;
	width: 120px;
	background-color: #eeeeee;
}

.table_value {
	font-weight: 400;
}

.highlight {
	font-weight: 600;
	color: #095c69;
}

th {
	text-align: left;
	border-bottom: 1px solid grey;
}

.td_alert {
	color: #990000;
	background-color: #ffeeee !important;
}

.td_mitigated {
	color: #ffcc00;
	background-color: #ffeecc !important;
}

.td_noalerts {
	color: #006600;
	background-color: #ddeedd !important;
}

.hide_wrapper {
	display: none;
}

.button_logout, .button_toggle {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	background-color: #009999;
	margin: 5px 0 5px 0;
	padding: 5px 15px 5px 15px;
	border: 0px solid white;
	color: #ffffff;
	border-radius: 10px;
	font-weight: 600;
	outline: none;
	transition-duration: 0.4s;
}

.button_logout:hover {
	background-color: #006666;
}

.button_toggle:hover {
	background-color: #006666;
}

.numberCircle {
	box-sizing: border-box;
	border-radius: 50%;
    width: 180px;
    height: 180px;
	padding: 15px 20px 15px 20px;
	margin: 20px 20px 20px 0px;

	display: block;
	float:left;

    border: 1px solid;
	text-align: center;
}

.numberCircleNumber {
	font-family: "Open Sans", Helvetica, Arial;
	font-weight: 100;
	font-size: 56pt;
	color: #009999;
	margin-top: 0px;
}

.numberCircleLabel {
	font-family: "Open Sans", Helvetica, Arial;
	font-weight: 400;
	font-size: 14pt;
	color: #666666;
	margin-top: -10px;
	line-height: 18pt;
}

.alert-l_circle {
	border-color: #009999;
	background-color: #ffffff;
}

.alert-m_circle {
	border-color: #ff9900;
	background-color: #ffffff;
}

.alert-h_circle {
	border-color: #cc0000;
	background-color: #ffffff;
}

.alert-l_number {
	color: #009999;
}

.alert-m_number {
	color: #ff9900;
}

.alert-h_number {
	color: #cc0000;
}