@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans-Regular.woff2) format('woff2');
  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans-Regular.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html {		
	height: 100%;	
}

body {
	height: 100%; 
	background:#f1f1f1; 
	font-family: 'Open Sans', Arial, sans-serif;
	margin:0;
}

div.midTitle {
	background: #202326; 
	text-align:center; 
	color: white; 
}

.midTitle span {
	font-size:40px; 
	line-height:80px;
	font-weight:bold;
}

.image img {
	width: 110px;
	height: 80px;
	background: white;
	position: absolute;
	top: 0;
	right: 0;
	border-bottom: 2px solid #f4091b;
}

.subBar {
	background: #f4091b; 
	height:30px; 
	margin:0;
}

.versionColumn{
	float:right; 
	width:95px; 
	text-align:center;
	padding:5px 0; 
	font-size:12px; 
	font-weight:bold; 
	color: white;
}

.body {
	padding:0; 
	height:calc(100% - 110px);
}

.columnMiddle {
	background:white; 
	width:75%; 
	min-height: 100%;
	margin:auto;
	text-align: center;
}

form{
	width:45%;
	background: #202326;
	padding:40px; 
	margin: 40px 0; 
	max-width:500px;
	display:inline-block;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.columnUserIcon {
	width: 45px; 
	background: #e6e6e6;; 
	position: absolute; 
	padding: 10px 0; 
	height: 30px;
	border-right: 1px solid #ccc;
	z-index: 1;
}

.columnUserIcon span {
	font-size: 18px; 
	font-weight: bold;
	vertical-align: middle;
	padding-top: 6px;
}

.columnUserInput {
	width: 100%;
	margin-bottom:20px;
}

input[type=text], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
	text-indent: 40px;	
	transition: background 0.5s ease;
	font-size: 18px;
	font-family: inherit;
}

input[type="text"]:hover, input[type="password"]:hover {
	background: #e6e6e6;
}

button {
	background: #f4091b;
	color: white;
	padding: 14px 20px;
	border: none;
	cursor: pointer;
	font-size: 18px;
	box-shadow: none;
	text-transform: uppercase;
	transition: background 0.5s ease;
	transition: transform 0.2s;
}

button:hover {
	background: #ff3336;
}

button.addButton:hover {
	transform: scale(1.05);
}
	
section {
	width: 245px;
	margin-top: 40px;
	display:inline-block;
	background: #101820 /*#202326;*/;
	padding: 20px 0;
	margin: 40px 20px;
	margin-bottom: 0;
	transition: background 0.5s ease;
}
	
section:last-child {
	margin-bottom:40px;
}
	
section:hover {
	background:#23262a;
}

section .fa-stack .fa-stack-1x {
	transition: transform 0.2s;
}

section:hover .fa-stack .fa-stack-1x {
	transform: scale(1.1);
}

/*************************************************/
.body img {  
    width: 150px;
    height: 130px;
}

.body a { 
	font-size: 36px;
	font-weight: bold;
	color: white;
	text-decoration: none;
}

.body a span { 
	padding: 20px;
}

p.message {
	font-size:18px;
	margin:0 40px;
}

p.message a{
	color:black;
	font-size:18px;
}

.link {
	vertical-align: middle;
	padding: 0 10px;
}

.link a {
	font-weight: bold;
	text-decoration: none;
	color: white;
	vertical-align: middle;
}

.link a:hover {
	text-decoration: underline;
}

.info {
	margin:40px; 
	display:inline-block;
}

.info p {
	font-size:18px; 
	margin-top:0; 
	margin-bottom:40px;
}

.apps {
	float: right;
	width:100%;
}

.apps b {
	color: white;
	display: block;
	padding: 10px;
}

.apps ul {
	list-style-type: none;
	padding:0;
	margin-bottom: 0;	
}

.apps li {
	padding: 10px 5px;
	background: #2c3035;
	margin-bottom: 2px;
}

.apps li:hover {
	background: #3c4045;
}

div.title {
	background-color:#ccc;
	margin: 0px 0px 20px 0px;
	padding: 5px 15px 35px;
	color: white;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666', endColorstr='#494949',GradientType=0 );
	background: linear-gradient(#666, #494949);
}

.title span {
   	display: block;
}

td {
	font-size: 16px;
	padding-left: 5px;
	padding-bottom:3px;
}

div.fa-stack {
	font-size:55px;
}

div.fa-stack i.fa-stack-2x {
	color:#f4091b;
}

div.fa-stack i.fa-stack-1x {
	color:white;
}
  	
.midTitle {
	padding: 0;
}
	

/*For small screens*/
@media (max-width: 519px) {	
	.image1 {
		position:absolute; 
		top:17px; 	
		left:10px;
	}
	
	.columnMiddle {
		width:100%;
	}
	
	form{
		width:70%;
	}
	
	.midTitle span:after {
    	content:  "";
    }
    		
    .midTitle {
    	padding-right: 80px;
    }
	
}

.offline .requiresOnline {
	display: none;
}

.addButton {
	display: none;
	margin-top: 40px;
}

.appCached > li {
	background: #4c5055;
}