/* webware css template by jserdy c. 2019 Network & More! Inc. */
*{
	margin: 0;
	padding: 0;
	color: #000;
	font-family: 'Source Sans Pro',sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3em;
}
body{
	background-color:#ccc;
}
#page{
	background-color: #ccc;
	padding-top: 3em;
}
#head{
	background-image: linear-gradient(#0071bd,#000);
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3em;
	z-index: 1;
}
#head #brand{
	float: left;
	line-height: 3em;
	padding-left: 0.5em;
	color: #fff;
}
#head #hamburger{
	float: right;
	width: 3em;
	height: 3em;
	background-color: #ffb366;
	background-image: linear-gradient(#eee,#bbb);
	cursor: pointer;
}
#head #hamburger .bun,
#head #hamburger .burger{
	background-color: #8b451b;
	height: 0.1875em;
	width: 1.5em;
	margin-top: 0.3125em;
	margin-left: 0.8125em;
	border-radius: 0 0 0.125em 0.125em;
}
#head #hamburger .burger{
	background-color: #600;
	border-radius: 0;
}
#head #hamburger .bun:first-of-type{
	margin-top: 0.9375em;
	border-radius: 0.125em 0.125em 0 0;
}
#head ul{
	float: right;
	list-style-type: none;
	margin: 0.5em;
}
#head ul li{
	float: left;
	margin: 0.125em 0.25em;
	padding: 0.125em 0.375em;
	background-color: #0071bd;
	color: #fff;
	cursor: pointer;
	border: 0.1875em solid #0071bd;
}
#head ul li:hover{
	border: 0.1875em solid #fff;
}
#side{
	background-color: #333;
	position: fixed;
	width: 16em;
	left: 0;
	bottom: 9em;
	z-index: 1;
}
#menu .sub{
	display: none;
}
#menu li{
	list-style-type: none;
	cursor: default;
}
#menu li span{
	padding: 0.125em 1.5em;
	text-indent: -1em;
	display: block;
	vertical-align: top;
	cursor: pointer;
	color: #fff;
}
#menu li span:hover{
	background-color:#0071bd;
}
#menu li span.more{
	padding-left: 0;
	text-indent: 0;
	padding-right: 0;
	display: table-row;
}
#menu li span.more > span{
	padding: 0.125em 1.5em;
	text-indent: -1em;
	display: table-cell;
	width: 100%;
}
#menu li span i{
	float: right;
	display: table-cell;
	padding: 0.25em 0.5em;
	color: #fff;
}
#menu li.active{
	background-color:#0071bd;
}
#menu .sub span{
	padding-left: 2em;
	text-indent: -1em;
}
#menu .has-sub.show .sub{
	display: block;
}
#menu .min{
	text-align: right;
}
#orgname span,
#orgname span:hover{
	background-color: #000!important;
	color: #fff;
	cursor: default;
}
#username span,
#username span:hover{
	padding-bottom: 1em!important;
	background-image: linear-gradient(#000,#333);
	color: #fff;
	cursor: default;
}
#know{
	background-color: #666;
	position: fixed;
	bottom: 0;
	width: 16em;
	height: 9em;
	z-index: 1;
}
#content{
	background-color: #ccc;
	text-align: center;
}
form{
	display: inline-block;
	text-align: center;
	padding: 0.5em;
	background-color: #fff;
	border: 0.1875em solid #fff;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
form fieldset{
	text-align: left;
	background-color: #fff;
	border: 0.1875em solid #fff;
	padding: 0.5em 0.5em 0 0.5em;
	margin-bottom: 0.5em;
	border-radius: 0.5em;
}
form fieldset legend{
	float: left;
}
form fieldset div.bar{
	width: 100%;
	height: 0.1875em;
	background-color: #090;
	display: block;
	clear: left;
	margin: 1em 0 0.25em 0;
}
form fieldset div label{
	padding-right: 0.75em;
	vertical-align: middle;
	padding-bottom: 0.5em;
}
form fieldset div label.textarea{
	vertical-align: top;
}
form fieldset div textarea{
	resize: both;
	width: 100%;
	height: 12em;
	margin-bottom: 0.5em;
	display: block;
	padding: 0.25em;
}
form fieldset div select,input,textarea{
	vertical-align: middle;
	margin-bottom: 0.5em;
}
form fieldset div input{
	padding-left: 0.25em;
}
form fieldset div input.required{
	background-color: #ff6;
}
form fieldset div select:disabled{
	background-color: #ccc;
	color: #666;
}
div#appsels{
	margin: 0 auto; 
	padding: 0 0.5em;
}
form button[type=submit],
button.appsel{
	background-color: #0071bd;
	border: 0.1875em solid #039;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	display: block;
	color: #fff;
}
form button[type=submit]{
	width: 50%;
	margin: 0 0 0 auto;
}
form button[type=submit].fullwidth{
	width: 100%;
}
form button[type=submit].disabled,
form button[type=submit].disabled:hover,
button.appsel.disabled,
button.appsel.disabled:hover{
	background-color: #666;
	border: 0.1875em solid #333;
	color: #ccc;
	cursor: not-allowed;
}
button.appsel.starting,
button.appsel.starting:hover{
	background-color: #494;
	border: 0.1875em solid #090;
	color: #fff;
	cursor: not-allowed;
}
button.appsel{
	width: 100%;
	margin: 0 auto 0.5em auto;
}
form button[type=submit]:hover,
button.appsel:hover{
	background-color: #039;
}
p.instruction,
p.warning{
	padding: 1em;
	margin: 0.5em;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
p.headline{
	padding: 0.5em;
	margin: 0;
	font-size: 1.5em;
	background-color: #fff;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
p.instruction{
	background-color: #fff;
}
p.warning{
	background-color: #fb0;
	border: 0.0417em solid #ff0;
	box-shadow: 0.25em 0.25em 0.25em rgba(255,255,0,0.75);
}
p.warning.disabled{
	background-color: #999;
	border: 0.0417em solid #999;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
div#problemtypes.commonform > div {
	vertical-align: top!important;
}
div#problemtypes div.problemtype,
div#problemtypes div.commonproblems{
	display: inline-block;
	margin: 0.5em;
	padding: 1em;
	min-height: 15em;
	min-width: 15em;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes div.problemtype{
	border: 0.1875em solid #fff;
	background-color: #fff;
}
div#problemtypes div.commonproblems{
	border: 0.1875em solid #fff;
	background-color: #fff;
}
div#problemtypes div.problemtype{
	max-width: 15em;
	text-align: center;
}
div#problemtypes div.commonproblems{
	max-width: 55em;
	text-align: left;
}
div#problemtypes div.commonproblems h1{
	font-size: 1.5rem;
}
div#problemtypes div.commonproblems p.common{
	background-color: #0071bd;
	padding: 0.75em 0.5em;
	margin: 0.5em 0 0 0;
	cursor: pointer;
	border: 0.1875em solid #039;
	border-radius: 0.5em;
	color: #fff;
}
div#problemtypes div.commonproblems p.common:hover{
	background-color: #039;
}
div#problemtypes div.problemtype:hover{
	background-color: #6f6;
	border: 0.1875em solid #090;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes div.problemtype.step2,
div#problemtypes div.problemtype.step3{
	background-color: #fff;
	cursor: default;
	border: 0.1875em solid #fff;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes div.problemtype.step2:hover,
div#problemtypes div.problemtype.step3:hover{
}
div#problemtypes div.problemtype div{
	height:10em;
	width:10em;
	overflow: hidden;
	display: inline-block;
}
div#problemtypes div.problemtype div img{
	position: relative;
}	
div#problemtypes div.problemtype div.capt{
	display: table-cell;
	height: 3em;
	min-width: 13em;
	max-width: 13em;
	vertical-align: middle;
	text-align: center;
}	
div#problemtypes div.problemtype div.capt p{
	margin: 0!important;
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
}	
div#problemtypes div.problemtype p.flt{
	margin: 0!important;
	line-height: 13em;
}
div#formholder{
	display: inline-block;
	margin: 0.5em;
}
form#reportProblem legend span {
	display: none;
	font-size: inherit;
}
form#reportProblem ol{
	margin: 0 0 0 1em;
	padding: 0;
}
form#reportProblem ol > li{
	line-height: 1.75em;
}
form#reportProblem ol > li > span{
	background-color: #ff0;
	cursor: pointer;
	border: 0.09375em solid #990;
	border-radius: 0.25em;
	margin-left: 0.5em;
	padding: 0 0.25em;
}
form#reportProblem ol > li > span:hover{
	background-color: #f0f;
}
@media screen and (max-height: 500px) {
	#know{
		display: none!important;
	}
	#side{
		bottom: 0;
	}
}
@media screen and (max-width: 1350px) {
	div#problemtypes div.problemtype.step3{
		display: none;
	}
	form#reportProblem legend span {
		display: inline;
	}
}
@media screen and (max-width: 1000px) {
	form button[type=submit]{
		width: 100%;
		margin: 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 1500px) {
	div#problemtypes div.problemtype{
		min-height: 11em;
		min-width: 11em;
		max-width: 11em;
		padding: 0.5em;
	}
	div#problemtypes div.problemtype div{
		height:7em;
		width:7em;
	}
	div#problemtypes div.problemtype p.flt{
		line-height: 10em;
	}	
	div#problemtypes div.problemtype div.capt{
		height: 2.5em;
		min-width: 10em;
		max-width: 13em;
	}	
	div#problemtypes div.problemtype div.capt p{
		font-size: 1rem;
	}	
}
@media screen and (max-width: 767px) {
	#head ul, #side, #know{
		display: none;
	}
	#side{
		top: 0;
	}
	#content{
		padding-left: 0;
	}
	#menu li span,
	#menu li span.more > span{
		padding: 0.375em 1.5em;
	}
	#menu li span i{
		padding: 0.5em;
	}
	#head #hamburger,
	#side.mobile,
	#know.mobile,
	form div,
	form div label,
	form div select,
	form div input,
	form div textarea,
	div#problemtypes div.commonproblems,
	div#formholder{
		display: block;
	}
	form#reportProblem{
		width: 100%;
	}
	form fieldset div select,input,textarea{
		margin-bottom: 0.5em;
	}
	form fieldset div label{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	form fieldset div select{
		max-width: 16rem; /* I bring dishonor to my ancestors with this rule */
	}
	form fieldset div textarea{
		height: 8em;
	}
	form fieldset div.bar{
		margin: 1em 0 0.25em 0;
	}
	div#problemtypes:before {
	  display: none;
	}
	div#problemtypes div.problemtype{
		min-height: 7em;
		min-width: 7em;
		max-width: 14em;
		padding: 0.5em;
	}
	div#problemtypes div.problemtype div{
		height:4em;
		width:4em;
	}
	div#problemtypes div.problemtype p.flt{
		line-height: 6em;
	}	
	div#problemtypes div.problemtype div.capt{
		height: 2em;
		min-width: 6em;
		max-width: 13em;
	}	
	div#problemtypes div.problemtype div.capt p{
		font-size: 1rem;
	}	
}
@media screen and (min-width: 768px) {
	#head #hamburger{
		display: none;
	}
	#head ul, #side, #know{
		display: block;
	}
	#side{
		top: 3em;
	}
	#content{
		padding-left: 16em;
	}
	form div{
		display: table-row;
	}
	form div.comments{
		display: block;
		width: 100%;
	}
	form div.comments label{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	form div.wrap{
		display: inline-block;
		vertical-align: top;
		padding-right: 2em;
	}
	form div label,
	form div select,
	form div input{
		display: table-cell;
	}
}