/* Global */

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin:0px!important;
}
body.loggedin {
	background-color: #f3f4f7;
	min-height:100%;
}

table{
    width:100%;
}

table td{
    border:1px #d5d5d5 solid;
    padding:5px;
    margin:2px;
    font-size:.8em;
}
table input,table password,table select,table textarea{
    width:100%;
}
input[type="submit"]{
    cursor:pointer;
}

/* Framework */

.column{float:left;}
.column.col-10{width:10%;}
.column.col-20{width:20%;}
.column.col-25{width:25%;}
.column.col-30{width:30%;}
.column.col-33{width:33%;}
.column.col-40{width:40%;}
.column.col-50{width:50%;}
.column.col-60{width:60%;}
.column.col-75{width:75%;}
.column.col-70{width:70%;}
.column.col-80{width:80%;}
.column.col-90{width:90%;}
.column.col-100{width:100%;}

.clearfix{
    clear:both;
    float:none;
    width:100%;
}

/* Navigation */

.navtop {
	background-color: #2f3947;
	height: 60px;
	width: 100%;
	border: 0;
}
.navtop div {
	display: flex;
	margin: 0 auto;
	width: 1280px;
	height: 100%;
}
.navtop div h1, .navtop div a {
	display: inline-flex;
	align-items: center;
}
.navtop div h1 {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: #eaebed;
	font-weight: normal;
}
.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: #c1c4c8;
	font-weight: bold;
}
.navtop div a i {
	padding: 2px 8px 0 0;
}
.navtop div a:hover {
	color: #eaebed;
}

/* Content Section */

.content{
	width: 1280px;
	margin:0 auto 0 auto;
}
.content h1{
    font-size:2em;
    line-height:1em;
}
.content .widget{
    margin:0 1em 1em 0;
    padding:0 1em 1em 1em;
    background:#ffffff;
}
.content .sidebar .widget{
    margin:0 0 1em 0em;
}
.content .column .widget:first-of-type{
    margin-top:0em;
}
.content .widget h2{
    font-size:1.5em;
    line-height:2em;
    margin:0;
}
.content article{
  padding:0.5rem 1rem 1rem 1rem;
  margin:1rem 0 1rem 0;
}

/* Widgets */

.widget{
    -webkit-box-shadow: 2px 2px 12px -4px rgba(0,0,0,0.49);
    -moz-box-shadow: 2px 2px 12px -4px rgba(0,0,0,0.49);
    box-shadow: 2px 2px 12px -4px rgba(0,0,0,0.49);
}
.widget .enabled, .widget .online, .widget .yes{color:#24a724;}
.widget .disabled, .widget .offline, .widget .no{color:#ff0000;}
.widget .unknown{color:#fff300;}
.widget span{font-weight:bold;}

/* Login Page */

.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

/* Profile Page */

.profile input[type=text], .profile  input[type=password]{
    width:100%;
}

/* Inventory Section */

.inventory-table{
    text-align:center;
}
.inventory-table .thumb{
    width:8rem;
    height:auto;
}
.inventory-table tr:hover{
    background:#efefef;
}

.inventory.flexwrap{
    justify-content:space-between;
    width:100%;
    flex-wrap:wrap;
}

.inventory .item{
    width:31%;
    border:1px #484848 solid;
    margin:.5rem;
    position:relative;
}
.inventory .item .item-img{
    height:20vh;
    border-bottom:1px #000000 solid;
    position:relative;
}
.inventory .item h2{
    width:100%;
    text-align:center;
    background:#2f3947;
    color:#ffffff;
    font-size:1.4rem;
}
.inventory .item-added{
    width:100%;
    background:#2f3947;
    color:#ffffff;
    text-align:center;
    font-size:.8rem;
    line-height:1.4em;
    position:absolute;
    bottom:0;
    margin:0;
}
.inventory .item-cat{
    position:absolute;
    right:0;
    top:0;
    background:#202730;
    color:#ffffff;
    padding:.25rem .5rem .25rem .5rem;
    margin:0;
}
.inventory .item-select{
    position:absolute;
    left:0rem;
    top:.1rem;
}
.inventory .item-lastseen, .inventory .item-lastuser{text-align:center;}

.ticket-tools .content .widget{
  padding-top:1rem!important;
}

/* Service Monitor Page */

.service-monitor .content h2{
  font-size:2rem;
  line-height:3rem;
  text-transform:uppercase;
  border-bottom:1px #000000 solid;
  margin-bottom:1rem;
}
.service-monitor .services{
  display:flex;
  justify-content:center;
}
.service-monitor .service{
  background:#fff;
  border:1px #000000 solid;
  padding:1rem;
  margin:1rem 0.5rem 1rem 0.5rem;
  text-align:center;
  flex:1;
}
.service h3{
  font-size:1.5rem;
}
.service .working, .service .online{
  font-weight:bold;
  color:#00a400;
  font-size:1.5rem;
  text-transform:uppercase;
}
.service .notworking, .service .offline{
  font-weight:bold;
  color:#cc0000;
  font-size:1.5rem;
  text-transform:uppercase;
}

/* Comment Generator */

.commentgen form{
  border-bottom:1px #000 solid;
  margin-bottom:2rem;
}
.commentgen form p{
  text-transform:uppercase;
  font-weight:700;
}
.commentgen select, .commentgen input{
  margin-bottom:1rem;
}
.commentgen textarea{
  width:100%;
  margin-bottom:1rem;
  height:15vh;
}

.commentgen textarea#output{
  height:30vh;
}

/* Newsletter Generator */

.newslettergen section{
    padding-bottom:1rem;
    border-bottom:1px #efefef solid;
    margin-bottom:1rem;
}
.newslettergen form{
  border-bottom:1px #000 solid;
  margin-bottom:2rem;
}
.newslettergen form p{
  text-transform:uppercase;
  font-weight:700;
}
.newslettergen select, .newslettergen input{
  margin-bottom:1rem;
  width:100%;
}
.newslettergen textarea{
  width:100%;
  margin-bottom:1rem;
  height:15vh;
}

.newslettergen textarea#output{
  height:30vh;
}

/* Extras */

.flexwrap{
    display:flex;
}

.alignleft{float:left;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignright{float:right;}

.button{
    display:block;
    border:1px #000000 solid;
    padding:5px;
    font-size:1em;
    color:#ffffff;
    background:#646464;
    text-decoration:none;
    width:140px;
    text-align:center;
    margin:20px 0px 20px 0px;
}
.button:hover{
    background:#484848;
}

.servertemp{
    background:#dfdfdf;
}
.servertemp .low{background:#00ff00;}
.servertemp .med{background:#ffff00;}
.servertemp .medhigh{background:#ff9900;}
.servertemp .high{background:#ff0000;}

/* Responsive */

@media (max-width: 1000px) {
    .column{float:none;}
    .column{width:100%!important;}
    .navtop,.content{width:100%;}
    .inventory.flexwrap{display:block;}
    .inventory .item{width:100%;margin:2rem 0rem 2rem 0rem;}
}