/* Andmore WebWare Version 3.0 c. 2021 Networks & More, Inc. */
/* responsive cascading style sheets */
/* we need to try Barlow as one of the fonts */
:root{
	--hilite: #0071bd;
	--ltgray: #ccc;
}
*{
	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:var(--ltgray);
}
/* the WordPress-wrapped login page (K12_LOGIN_MODE) embeds the karma
theme's own header markup (wordpress_template.html), which has no
background of its own around the logo/nav row - our body's grey was
showing straight through it. The theme's own topmenu strip above it
already has an opaque blue background of its own, so this only affects
the transparent logo/nav row. */
header.karma-header--wrap{
	background-color: #fff;
}
/* same karma-theme-wraparound problem, different property: the
LinkedIn/Facebook icons in the topmenu strip get their white color from
inheritance in the theme's own CSS, but our own universal "*{color:#000}"
reset (top of this file) directly targets the <i> itself - a direct
declaration always wins over an inherited one, no matter how low its
specificity, so our black stomped the theme's inherited white.
tt-menu-icon is only ever used on these two icons. */
.tt-menu-icon{
	color: #fff;
}
#page{
	background-color: var(--ltgray);
	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; */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3em;
	z-index: 1;
}
#head #logo{
	float: left;
}
#head #brand,
#head #prebrand{
	float: left;
	font-size: 2em;
	line-height: 1.5em;
	padding-left: 0.25em;
	font-family: 'Source Sans Pro',sans-serif!important;
	font-weight: 600;
	color: #fff;
}
#head #prebrand{
	display: none;
}
#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: var(--hilite);
	color: #fff;
	cursor: pointer;
	border: 0.1875em solid var(--hilite);
}
#head ul li:hover{
	border: 0.1875em solid #fff;
}
#sidebar{
	background-color: #333;
	position: fixed;
	width: 16em;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}
#side{
	background-color: #333;
	position: absolute;
	width: 16em;
	left: 0;
	top: 3em;
	z-index: 1;
}

#menu .sub{
	display: none;
	background-color: #444;
}
#menu li{
	list-style-type: none;
	cursor: default;
	margin-left: 0!important;
}
#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:var(--hilite);
}
#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:var(--hilite);
}
#menu .sub span{
	padding-left: 2em;
	text-indent: -1em;
}
#menu .has-sub.show .sub{
	display: block;
}
#menu .min{
	text-align: right;
}
li.orgname span,
li.orgname span:hover{
	background-color: #000!important;
	color: #fff;
	cursor: default;
}
li.username span,
li.username span:hover{
	padding-bottom: 1em!important;
	background-image: linear-gradient(#000,#333);
	color: #fff;
	cursor: default;
}
#know{
	background-color: #333;
	width: 16em;
	height: 9em;
	z-index: 1;
}
#content{
	background-color: var(--ltgray);
	text-align: center;
}
form{
	text-align: center;
	padding: 0.5em;
	margin: 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.normal:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
form fieldset{
	text-align: left;
	background-color: #fff;
	border: 0.05em solid #aaa;
	box-shadow: 0.125em 0.125em 0.125em rgba(50,50,50,0.25);
	padding: 0.5em 0.5em 0 0.5em;
	margin: 0 0.5em 0.5em 0;
	display: inline-block;
	vertical-align: top;
}
form fieldset.floatcenter{
	display: block;
	margin: 0.5em auto;
}
form.normal fieldset{
	min-width: 40%;
	max-width: 47%;
}
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.5em 0;
}
div.midbar,
div.midbarspacer{
	display: table-row;
}
div.innerbar{
	display: table-cell;
	height: 0.1875em;
	background-color: #fff;
	border-top: 0.1875em solid #090;
	padding-bottom: 0.25em;
}
div.innerbarspacer{
	display: table-cell;
	height: 0.375em;
	background-color: #fff;
	padding-bottom: 0.25em;
}
form fieldset div label,
form fieldset div p.label{
	padding-right: 0.75em;
	vertical-align: middle;
	padding-bottom: 0.5em;
	text-align: right;
	/* max-width: 10em; */
}

form fieldset div label.top{
	vertical-align: top;
}
form fieldset div div div{
	max-width: 20em;
	display: block;
	background-color: #eee;
	padding: 0.25em;
	margin-bottom: 0.5em;
}
form fieldset div div.wide div{
	max-width: none;
}
form fieldset div.nopad label,
form fieldset div.nopad p.label{
	padding-bottom: 0;
}
form fieldset div i{
	font-size: 1.5em;
	cursor: pointer;
}
div.template-outer-div{
	display: inline;
}
div.template-outer-div > table{
	border-collapse: separate;
	border-spacing: 0;
}
div.template-outer-div > table > tbody > tr > td{
	background-color: transparent;
	padding: 0;
}
div.template-outer-div > table > tbody > tr > td > table{
	border-collapse: separate;
	border-spacing: 0 0.25em;
}
div.template-outer-div > table > tbody > tr > td.outer-left{
	padding-right: 1em;
}
div.template-outer-div > table > tbody > tr > td.outer-left, td.outer-right{
	vertical-align: top;
}
div.template-outer-div > table > tbody > tr > td.outer-left{
	padding-right: 1em;
}
div.template-outer-div div.toggler,
div.template-outer-div div.toggled{
	display: table-row;
}
div.template-outer-div div.toggler{
	background-color: #eee;
}
div.template-outer-div div.toggled{
	background-color: #afa;
}
div.template-outer-div div.toggler i,
div.template-outer-div div.toggler span,
div.template-outer-div div.toggled i,
div.template-outer-div div.toggled span{
	display: table-cell;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
}
div.template-outer-div div.toggler span,
div.template-outer-div div.toggled span{
	padding: 0.125em 0.5em 0.125em 0.25em;
}
div.template-outer-div div.toggler i,
div.template-outer-div div.toggled i{
	padding: 0.125em 0.25em 0.125em 0.5em;
}
div.errormessage{
	color: #f33;
}
form fieldset div.toggletable{
	display: table;
	border-collapse: separate;
	border-spacing: 0 0.25em;
}
form fieldset div.toggletable div.toggleholder{
	display: table-row;
}
form fieldset div.toggletable div.toggleholder div.toggler,
form fieldset div.toggletable div.toggleholder div.toggled,
form fieldset div.toggletable div.toggleholder div.togglest,
form fieldset div.toggletable div.toggleholder div.togglenote{
	display: table-cell;
	cursor: pointer;
	padding: 0.125em 0.5em;
}
form fieldset div.toggletable div.toggleholder div.togglenote{
	background-color: #fff;
}
form fieldset div.toggletable div.toggleholder div.toggler span,
form fieldset div.toggletable div.toggleholder div.toggled span,
form fieldset div.toggletable div.toggleholder div.togglest span,
form fieldset div.toggletable div.toggleholder div.togglenote span{
	padding-left: 0.5em;
}
form fieldset div.toggletable div.toggleholder div.togglenote span{
	font-style: italic;
}
form fieldset div.toggletable div.toggleholder div.toggler span,
form fieldset div.toggletable div.toggleholder div.togglest span,
form fieldset div.toggletable div.toggleholder div.toggled span,
form fieldset div.toggletable div.toggleholder div.togglenote span,
form fieldset div.toggletable div.toggleholder div.toggler i,
form fieldset div.toggletable div.toggleholder div.togglest i,
form fieldset div.toggletable div.toggleholder div.toggled i{
	display: inline;
	vertical-align: middle;
}
form fieldset div.toggletable div.toggleholder div.toggled{
	background-color: #afa;
}
form fieldset div.toggletable div.toggleholder div.togglest{
	background-color: #adf;
}
form fieldset div label.textarea{
	vertical-align: top;
}
form fieldset div textarea{
	resize: both;
	width: 98%;
	height: 13em;
	margin-bottom: 0.5em;
	display: table-cell;
	padding: 0.25em;
	white-space: pre-wrap;
}
div.comments{
	white-space: pre-wrap;
	padding-bottom: 0.5em;
}
input[type=text].readonly,
textarea.readonly{
	border: 0;
	background-color: #eee;
}
input[type=password].error{
	background-color: #f99;
}
form fieldset div select,input,textarea{
	vertical-align: middle;
	margin-bottom: 0.5em;
}
form fieldset div select{
	border: 1pt solid #000;
}
form fieldset div.nopad select,input,textarea{
	margin-bottom: 0;
}
form fieldset div input{
	padding-left: 0.25em;
	border: 1pt solid #000;
}
form fieldset div input[type=file]{
	border: none;
}
form fieldset div input.wider{
	width: 20em;
}
form fieldset div input.narrower{
	width: 10em;
}
form fieldset div input.skinny{
	width: 5em;
}
form fieldset div input.required{
	background-color: #ff6;
}
form fieldset div input[type=radio]{
	margin: 0 0.75em 0 0;
	display: inline-block;
	vertical-align: 10%; /* regretful, but it works */
}
form fieldset div select{
	/* the WordPress-wrapped login page (K12_LOGIN_MODE) pulls in the
	main k12usa.com theme's general.css around our own markup, whose
	plain "select{color:var(--c-grey)}" rule out-specifies our
	universal "*{color:#000}" reset (element selector beats
	universal). This selector is deliberately as specific as the
	:disabled rule right below, so it wins regardless of stylesheet
	load order. */
	color: #000;
}
form fieldset div select:disabled{
	background-color: var(--ltgray);
	color: #666;
}
a.action{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 1em 3em;
	border-radius: 0.5em;
	display: block;
	color: #fff;
	width: 50%;
	max-width: 20em;
	margin: 1em auto;
	font-size: 1.125em;
}
img.logo{
	padding-top: 0.5em;
	max-width: 90%;
	width: 500px;
}
a.action:hover{
	text-decoration:none;
	background-color: #039;
}
form button[type=submit],
button.actionbutton,
button.cancelbutton{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	display: block;
	color: #fff;
	width: 50%;
	max-width: 20em;
	margin: 0 auto;
}
button.cancelbutton{
	background-color: #f55;
	border: 0.1875em solid #f00;
	width: 40%;
	max-width: 10em;
	margin: 0.25em auto;
}
button.cancelbutton:hover{
	background-color: #f00;
}
button.actionbutton{
	margin: 0.25em auto;
}
button.actionbutton:hover{
	background-color: #039;
}
button.inline{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.35em 0.75em;
	border-radius: 0.5em;
	display: inline;
	color: #fff;
	margin: 0.25em;
}
form button.topbutton[type=submit]{
	margin: -1em auto 1em auto;
}
button.return{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.25em 1.5em;
	display: block;
	color: #fff;
	margin: 0.25em auto;
}
button.returnl{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.25em 1.5em;
	display: inline-block;
	color: #fff;
	margin: 0.25em 0.25em 0.25em auto;
}
button.returnld{
	background-color: var(--ltgray);
	border: 0.1875em solid #333;
	padding: 0.25em 1.5em;
	display: inline-block;
	color: #333;
	margin: 0.25em 0.25em 0.25em auto;
}
button.returnc{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.25em 1.5em;
	display: inline-block;
	color: #fff;
	margin: 0.25em auto;
}
button.returnr{
	background-color: var(--hilite);
	border: 0.1875em solid #039;
	padding: 0.25em 1.5em;
	display: inline-block;
	color: #fff;
	margin: 0.25em auto 0.25em 0.25em;
}
button.returnrd{
	background-color: var(--ltgray);
	border: 0.1875em solid #333;
	padding: 0.25em 1.5em;
	display: inline-block;
	color: #333;
	margin: 0.25em auto 0.25em 0.25em;
}
form.hsnk{
	display: none;
}
form button[type=submit].fullwidth{
	width: 100%;
}
form button[type=submit].disabled,
form button[type=submit].disabled:hover{
	background-color: #666;
	border: 0.1875em solid #333;
	color: var(--ltgray);
	cursor: not-allowed;
}

form button[type=submit]:hover,
button.gp:hover,
button.return:hover,
button.inline:hover{
	background-color: #039;
}
p.instruction,
p.forminstruction,
p.warning,
p.success{
	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.working{
	padding: 0.5em;
	margin: 0;
	font-size: 1.5em;
	background-color: #262;
	color: #fff;
	box-shadow: 0.25em 0.25em 0.25em rgba(40,100,40,0.25);
}
/* post-login service-select screen (serviceselectform() in
functions-h-r.php) - a bit of breathing room above and below the button
cluster, scoped to this page only so p.headline's shared margin:0 stays
untouched everywhere else it's used */
#serviceselect p.headline{
	margin-bottom: 1em;
}
#serviceselect{
	padding-bottom: 1em;
}
p.instruction,
p.forminstruction{
	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.success{
	background-color: #9f9;
	border: 0.0417em solid #0f0;
	box-shadow: 0.25em 0.25em 0.25em rgba(0,255,0,0.25);
}
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,
div.rplayout > div {
	vertical-align: top!important;
}
div.rplayout{
	display: table;
	width: 100%;
}
div.rplayout fieldset {
	width:100%;
}
div#problemtypes div.problemtype,
div#problemtypes div.commonproblems,
div.problemtype,
div.imagewrap div.clipwrap,
div.imagewrap div.clipwrapsel{
	display: inline-block;
	margin: 0.5em;
	padding: 1em;
	min-height: 11em;
	min-width: 11em;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes div.problemtype,
div.imagewrap div.clipwrap,
div.imagewrap div.clipwrapsel{
	border: 0.1875em solid #fff;
	background-color: #fff;
	max-width: 11em;
	text-align: center;
}
div.imagewrap div.clipwrapsel{
	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.commonproblems{
	border: 0.1875em solid #fff;
	background-color: #fff;
}
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: var(--hilite);
	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,
div.imagewrap div.clipwrap:hover{
	background-color: #6f6;
	border: 0.1875em solid #090;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div.imagewrap div.clipwrapsel:hover{
	background-color: #3c3;
	border: 0.1875em solid #060;
	box-shadow: 0.25em 0.25em 0.25em rgba(50,50,50,0.25);
}
div#problemtypes div.problemtype.step2,
div#problemtypes div.problemtype.arrange,
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.arrange{
	position: relative;
}
div#problemtypes div.problemtype.step2:hover,
div#problemtypes div.problemtype.step3:hover,
div#problemtypes div.problemtype.arrange:hover,
div.problemtype.step3:hover{
}
div#problemtypes div.problemtype div,
div.imagewrap div.clipwrap div,
div.imagewrap div.clipwrapsel div{
	height:7em;
	width:7em;
	overflow: hidden;
	display: inline-block;
}
div#problemtypes div.problemtype div img,
div.imagewrap div.clipwrap div img,
div.imagewrap div.clipwrapsel div img{
	position: relative;
}	
div#problemtypes div.problemtype div.capt{
	display: table-cell;
	height: 2em;
	min-width: 9em;
	max-width: 9em;
	vertical-align: middle;
	text-align: center;
}	
div#problemtypes div.problemtype div.capt p,
div.problemtype div.capt p{
	margin: 0!important;
	display: inline-block;
	/* font-weight: 700; */
}	
div#problemtypes div.problemtype p.flt,
div.problemtype p.flt{
	margin: 0!important;
	padding: 4em 0;
	line-height: 1em;
}
div#formholder,
div#ptiholder{
	display: table-cell;
	margin: 0.5em;
}
div#formholder{
	width: 75%;
}
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;
}
div.fileholder label{
   padding-bottom: 1.5em;
}
ol#uploads{
   margin-left: 1em;
}
ol#uploads > li{
    line-height: 1.75em;
}
ol#uploads > li > span,
a.download,
a.ticketlink,
button.download,
button.wide-inline,
button.template-inline,
form button.wide-inline-pdl{
	background-color: var(--hilite);
	color: #fff!important;
	cursor: pointer;
	border: 0.09375em solid #039;
	border-radius: 0.25em;
	padding: 0 0.25em;
}
button.wide-inline{
	margin-bottom: 0.5em;	
}
button.template-inline{
	margin-left: 1em;	
}
button.wide-inline span,
button.wide-inline i{
	color: #fff!important;
}
form button.wide-inline-pdl{
	margin-left: 0.5em;
}
form button.wide-inline.disabled,
form button.wide-inline.disabled:hover{
	background-color: #666;
	border: 0.09375em solid #333;
	color: var(--ltgray);
	cursor: not-allowed;
}
ol#uploads > li > span{
	margin-left: 0.5em;
}
a.download,
button.download{
	margin-right: 0.5em;
	margin-left: -0.25em;
}
ol#uploads > li > span:hover{
	background-color: #039;
}
form#reportProblem ol > li > span:hover{
	background-color: #f0f;
}
div.table {
	background-color: #fff;
	display: table;
	text-align: left;
	margin: 0.5em auto;
	width: auto!important;
}
div.table div.r {
	display: table-row;
	cursor: pointer;
}
div.table div.rs {
	display: table-row;
}
div.table div.rs div.c.p {
	cursor: pointer;
}
div.table div.rs div.c.p:hover {
	color: #fff;
}
div.table div.r:hover,
div.table div.r.g:hover,
div.table div.r.s:hover,
div.table div.r.g.s:hover,
div.table div.r:focus,
div.table div.r.g:focus,
div.table div.rs div.c.p:hover {
	background-color: var(--hilite);
}
div.table div.r.t:hover,
div.table div.r.t.g:hover,
div.table div.r.t.s:hover,
div.table div.r.t.g.s:hover,
div.table div.r.t:focus,
div.table div.r.t.g:focus {
	background-color: #060;
}
div.table div.r.s,
div.table div.r.g.s{
	background-color: #40b1fd;
}
div.table div.r div.c,
div.table div.rs div.c {
	display: table-cell;
	padding: 0.15em 0.5em;
	max-width: 30em;
}
div.table div.r div.c.f {
	white-space: pre-wrap;
	overflow: hidden;
}
div.table div.r div.c.n {
	max-width: 10em;
}
div.table div.r.g,
div.table div.rs.g {
	background-color: #ddd;
}
div.table div.r.t {
	background-color: #afa;
}
div.table div.r.t.g {
	background-color: #9e9;
}
div.table div.r.h,
div.table div.rs.h {
	background-color: #000;
}
div.table div.r.h div.c:hover,
div.table div.r.h div.c:focus{
	background-color: #262;
}
div.table div.r.h div.c i {
	padding-left: 0.5em;
}
div.table div.r:hover div,
div.table div.r.g:hover div,
div.table div.r.s:hover div,
div.table div.r.g.s:hover div,
div.table div.r:focus div,
div.table div.r.g:focus div,
div.table div.r.h div.c,
div.table div.r.h div.c i,
div.table div.r.h div.c b,
div.table div.rs.h div.c,
div.table div.rs.h div.c.p i {
	color: #fff;
}
div.table div.r.h div.c
div.table div.rs.h div.c {
	white-space: nowrap;
}
div.search{
	margin: 0.5em auto 0 auto;
}
div.showing{
	margin: 0.25em auto 0 auto;
}
div.pagination{
	margin: 0.5em auto;
}
div.search *,
div.showing *,
div.pagination *{
	vertical-align: middle;
	display: inline-block;
}
div.search *{
	margin: 0.125em;
}
div.showing p,
div.pagination p{
	margin: 0 auto;
}
div.pagination span.nobr{
	white-space: nowrap;
	padding: 0 1em;
}
div.pagination p i{
	font-size: 1.25em;
	vertical-align: sub;
}
div.pagination p i.inactive{
	color: #666;
}
div.pagination p i.active{
	color: #292;
	cursor: pointer;
}
div.pagination p select,
div.showing p select{
	margin: 0 0.25em;
}
div.pagination p .spacer{
	margin: 0 0.25em;
}
div.search button,
div.showing button{
	padding: 0 0.25em;
	margin: 0 0.25em;
	background-color: var(--hilite);
	color: #fff;
}
.export.disabled,
.export.disabled:hover,
.export.disabled:focus{
	background-color: #666;
	cursor: wait;
}
#export_progress,
#export_progress_shim{
	visibility:hidden;
}
div.search button:hover,
div.search button:focus,
div.showing button:hover,
div.showing button:focus{
	background-color: #039;
}
div.search input:focus,
div.showing input:focus{
	background-color: #cfc;
}
/*
Firefox makes select drop-downs too wide
*/
div.search select{
	max-width: 10em;
}
div.pagination select{
	max-width: 4em;
}
div.search select,
div.pagination select{
	text-overflow: ellipsis;
}
}
div.search select:focus,
div.pagination select:focus{
	box-shadow: 0 0 1em rgba(0,255,0,0.75);
}
i.waiting{
	font-size: 1em;
	color: #fff;
    animation: spinner .5s linear infinite;
	margin: 0 0.25em;
}
i.waitingblk{
	font-size: 1em;
	color: #000;
    animation: spinner .5s linear infinite;
	margin: 0 0.25em;
}
p.uploadprogress{
	margin: -0.75em 0 1em 0;
	padding: 0;
}
.hidden{
	display:none;
}
form fieldset div.checkbox p,
form fieldset div.coltwotext p{
	display: table-cell;
	vertical-align: middle;
}
form fieldset div.checkbox p{
	padding-bottom: 0;
	cursor: pointer;
}
form fieldset div.coltwotext p{
	padding-bottom: 1em;
	cursor: default;
	max-width: 16em;
}
form fieldset div.coltwotext p span{
	cursor: default;
	font-size: 0.875em;
}
form fieldset div.instruction{
	/* uhhh */
}
div.instruct{
	display: block;
}
table.instruct td{
	padding: 0.125em 0 0.125em 0.5em;
}
form fieldset div.checkbox p *{
	display: inline;
}
form fieldset div.checkbox p i{
	padding-right: 0.5em;
}
i.ltgray{
	color: #999;
}
i.gray{
	color: #666;
}
i.red{
	color: #f00;
}
i.green{
	color: #0a0;
}
i.dkgreen{
	color: #060;
}
i.dkblue{
	color: var(--hilite);
}
.bigger{
	font-size: 1.5em;
}
.greyed{
	color: #333!important;
}
legend{
	font-size: 1.5rem;
	line-height: 1.5rem;
}
div.dateshell{
	background-color: #fff;
	padding: 0;
}
div.dateshell > div{
	background-color: #fff;
	padding: 0;
}
div.dateshell > div > input{
	border-radius: 0;
	border: 1pt solid #333; /* 1pt??? */
	padding: 0 0 0 0.25em;
	display: block;
	height: 1.65em;
}
div.dateshell > div > div,
span.dateshell > span > span{
	background-color: #fff;
	padding: 0 0 0 0.25em;
	margin: 0;
}
div.dateshell > div > div > div,
span.dateshell > span > span > span {
	background-color: #fff;
	border: none;
	padding: 0;
	margin: 0;
}
ul.radios li {
	list-style-type: none;
	padding: 0.25em 0;
}
span.radioa {
	padding-left: 0.25em;
}
input[type=text].radioa,
select.radioa {
	margin-left: 0.25em;
}
span.dateshell{
	display: inline-block;
}
span.dateshell input[type=text]{
	height: 1.65em;
	margin-left: 0.25em;
}
div.buttonholder{
	display: table-cell;
	background-color: #fff;
	/* padding: 0 0.25em; */
	padding: 0;
}
div.gtc{
	display: table-cell;
}
div.push-left{
	display: block;
}
div.push-left label,
div.push-left div.dateshell{
	display: inline-block;
	width: auto;
	padding-bottom: 0;
}
table.formdatadisplay,
table.formdatadisplaymobile{
	width: 100%;
	margin-top: 0.5em;
}
table.activitychart,
table.timeandcostreports{
	width: auto;
	margin: 0.5em auto;
	min-width: 50%;
}
table.formdatadisplay caption{
	caption-side: top;
	text-align: center;
	background-color: #eee;
	color: #000;
	padding: 0;
}
table.activitychart caption,
table.timeandcostreports caption{
	caption-side: top;
	text-align: center;
	background-color: #eee;
	color: #000;
	padding: 0.5em;
}
div.onehundredpercentwidth{
	width: 100%;
	display: block;
}

table.formdatadisplay thead tr th,
table.formdatadisplaymobile thead tr th{
	background-color: #ddd;
	padding: 0.125em;
}
table.formdatadisplay tbody tr td,
table.formdatadisplaymobile tbody tr td{
	border-bottom: 0.25pt solid #000;
	padding: 0.125em;
}
table.activitychart thead tr th{
	background-color: #ddd;
	padding: 0.125em 0.5em;
}
table.activitychart tbody tr td,
table.timeandcostreports tbody tr td{
	background-color: #fff;
	border-bottom: 0.25pt solid #000;
	padding: 0.125em 0.5em;
	text-align: left;
}
table.timeandcostreports thead tr th{
	background-color: #000;
	color: #fff;
	/* font-weight: bold; */
	border-top: 0.25pt solid #000;
	border-bottom: 0.25pt solid #000;
	padding: 0.125em 0.5em;
	text-align: left;
}
table.activitychart tbody tr td.bar{
	background-color: #fff;
	border-bottom: 0.25pt solid #000;
	padding: 0.125em 0.5em 0.125em 0;
}
table.activitychart tbody tr td.bar div{
	background-color: var(--hilite);
}
table.activitychart tbody tr td.pct{
	background-color: #fff;
	border-bottom: 0.25pt solid #000;
	padding: 0.125em 0.5em 0.125em 0.125em;
	text-align: right;
}
div.warningwrapper{
	display: table-row;
	background-color: #fb0;
	border: 0.0417em solid #000;
	box-shadow: 0.125em 0.125em 0.125em rgba(200,200,200,0.75);
}
div.sectionwarning{
	display: table-cell;
	padding: 0.5em 0;
}
div.warningbump{
	display: table-row;
	height: 0.5em;
}
i.fa.fa-trash-alt.redhover{
	color: #000;
	cursor: pointer;
}
i.fa.fa-trash-alt.redhover:hover{
	color: #c00;
}
td.mobilehide,
th.mobilehide{
	display: table-cell;
}
br.mobileshow,
span.mobileshow{
	display: none;
}
.floatleft{
	float: left;
}
.floatright{
	float: right;
}
button.bottombutton{
	clear: left;
}
div.arrangearrowsl{
	position: absolute;
	left: 0;
	top: 0;
	width: 50%!important;
	height: 100%!important;
	text-align: left;
	vertical-align: bottom;
}
div.arrangearrowsr{
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%!important;
	height: 100%!important;
	text-align: right;
	vertical-align: bottom;
}
.arrangel,
.arranger{
	position: absolute;
	top: 0;
	font-size: 2rem;
	cursor: pointer;
	color: var(--hilite);
}
.arrangel{
	left: 0;
}
.arranger{
	right: 0;
}
.arrangel:hover,
.arranger:hover{
	color: #039;
}
div.short textarea{
	height: 5em;
}
td.white{
	background-color: #fff!important;
	padding: 0.125em 0.5em!important;
	border-bottom: 0.25pt solid #fff!important;
}
td.mdgray{
	background-color: #ddd!important;
	padding: 0.125em 0.5em!important;
}
td.ltgray{
	background-color: #eee!important;
	padding: 0.125em 0.5em!important;
}
td.left{
	text-align: left!important;
}
p.left{
	text-align: left!important;
}
p.left ul,
p.left ul, li{
	margin-left: 0.5em!important;
}
td.right{
	text-align: right!important;
}
.leftbump{
	padding-left: 0.5em!important;
}
.rightbump{
	padding-right: 0.5em!important;
}
td.barholder{
	white-space: nowrap;
	overflow: hidden;
	border-bottom: 1em solid var(--ltgray)!important;
}
td.barholder div{
	background-color: var(--hilite);
}
div.tableholder{
	display: block;
}
table.prioritytable{
	width: 100%;
	margin: 0.5em 0;
	background-color: var(--ltgray);
	border-collapse: separate;
	border-spacing: 0.25em;
}
table.prioritytable tr td{
	vertical-align: middle;
	text-align: center;
	background-color: #fff;
	padding: 0.125em 0.5em;
}
table.prioritytable tr td input[type=text]{
	width: 8em;
}
table.prioritytable tr td select{
	margin-bottom: 0;
}
table.prioritytable tr th{
	vertical-align: middle;
	text-align: left;
	background-color: #eee;
	padding: 0.25em 0.5em;
}
td.delpriority button{
	width: 100%;	
}
p.choicebox{
	display: table-cell;
}
p.choiceboxshim{
	display: table-cell;
}
.btxpad{
	margin-bottom: 0.5em;
}
@keyframes spinner {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}
@media screen and (max-width: 1350px) {
	/*
	div#problemtypes div.problemtype.step3{
		display: none;
	}
	*/
	div.problemtype.step3{
		display: none;
	}
	div#formholder{
		width: auto;
	}
	form#reportProblem legend span {
		display: inline;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1500px) {
	div#problemtypes div.problemtype,
	div.imagewrap div.clipwrap,
	div.imagewrap div.clipwrapsel{
		min-height: 9em;
		min-width: 9em;
		max-width: 9em;
		padding: 0.5em;
	}
	div#problemtypes div.problemtype div,
	div.imagewrap div.clipwrap div,
	div.imagewrap div.clipwrapsel div{
		height:5em;
		width:5em;
	}
	div#problemtypes div.problemtype p.flt{
		padding: 3em 0;
		line-height: 1em;
	}	
	div#problemtypes div.problemtype div.capt{
		height: 2.5em;
		min-width: 8em;
		max-width: 8em;
	}	
	div#problemtypes div.problemtype div.capt p{
		font-size: 1rem;
	}	
}
@media screen and (max-width: 1023px) {
	#head ul, #side, #sidebar, #logo{
		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,
	div#problemtypes div.commonproblems,
	div#formholder{
		display: block;
	}
	#head #brand,
	#head #prebrand{
		font-size: 1em;
		line-height: 3em;
		padding-left: 0.5em;
	}
	#head #prebrand{
		display: block;
	}
	form#reportProblem{
		width: 100%;
	}
	div#problemtypes:before {
	  display: none;
	}
	div#problemtypes div.problemtype,
	div.imagewrap div.clipwrap,
	div.imagewrap div.clipwrapsel{
		min-height: 7em;
		min-width: 7em;
		max-width: 14em;
		padding: 0.5em;
	}
	div#problemtypes div.problemtype div,
	div.imagewrap div.clipwrap div,
	div.imagewrap div.clipwrapsel div{
		height:4em;
		width:4em;
	}
	div#problemtypes div.problemtype p.flt{
		padding: 2em 0;
		line-height: 1em;
	}	
	div#problemtypes div.problemtype div.capt{
		height: 2em;
		min-width: 6em;
		max-width: 13em;
	}	
	div#problemtypes div.problemtype div.capt p{
		font-size: 1rem;
	}	
	p.headline{
		padding: 0.25em;
		font-size: 1.125em;
	}
	p.instruction,
	p.forminstruction,
	p.warning{
		padding: 0.125em 1em;
		margin: 0.05em 0 0 0;
	}
	a.action{
		padding: 0.125em 0.25em;
		margin: 0.25em 0.5em;
		width: auto;
	}
	form fieldset,
	form.normal fieldset{
		min-width: 95%;
		max-width: 100%;
	}
}
@media screen and (max-width: 1500px) {
	form fieldset,
	form.normal fieldset{
		min-width: 87%;
		max-width: 90%;
	}
	.floatleft,.floatright{
		float: none;
	}
}
@media screen and (max-width: 767px) {
	form div,
	form div label,
	form div select,
	form div input,
	form div textarea{
		display: block;
	}
	form div.actionwrap textarea{
		width: 98%;
	}
	form fieldset div select,input,textarea{
		margin-bottom: 0.5em;
	}
	form fieldset div label,
	form fieldset div p.label{
		padding-bottom: 0;
		margin-bottom: 0;
		max-width: none;
	}
	form div.checkbox p{
		display: block;
	}
	form fieldset div input.wider{
		width: 100%;
	}
	form fieldset div textarea{
		height: 6.5em;
	}
	form fieldset div.bar{
		margin: 1em 0 0.25em 0;
	}
	form button[type=submit]{
		width: 100%;
		margin: 0;
	}
	form fieldset{
		display: block;
		max-width: none;
		margin-right: 0;
		width: 100%;
	}
	button.return{
		margin-top: 0.5em;
	}
	form fieldset div div div{
		max-width: none;
		width: 100%;
	}
	legend{
		font-size: 1.25rem;
	}
	form:before {
		display:none;
	}
	div.table div.r div.c.f {
		max-width: 11em; /* should be banished to the wind and ghosts */
	}
	form div.comments{
		display: block;
		width: 98%;
		padding: 0 0.25em;
		border-bottom: 0.5em solid #fff;
		white-space: pre-wrap;
		overflow: hidden;
	}
	form.normal fieldset{
		min-width: 96%;
		max-width: 98%;
	}
	form div label{
		width: 100%;
		/* white-space: nowrap */;
		text-align: left;
	}
	form fieldset div label,
	form fieldset div p.label{
		text-align: left;
		/* max-width: 10em; */
	}
	div.midbar{
		display: block;
		height: 0.1875em;
		width: 100%;
		background-color: #090;
		margin-top: 0.25em;
	}
	div.midbarspacer{
		display: block;
		height: 0.1875em;
		width: 100%;
		background-color: #fff;
		margin-top: 0.25em;
	}
	div.innerbar,
	div.innerbarspacer{
		display: none;
	}
	td.mobilehide,
	th.mobilehide{
		display: none;
	}
	br.mobileshow,
	span.mobileshow{
		display: inline-block;
	}
}
@media screen and (min-width: 1024px) {
	/*
	#head #hamburger{
		display: none;
	}
	*/
	#head ul, #side{
		display: block;
	}
	#side{
		top: 3em;
	}
	#content{
		padding-left: 16em;
	}
	#content.simple{
		padding-left: 0em;
	}
}
@media screen and (min-width: 768px) {
	form div{
		display: table-row;
	}
	form div.actionwrap{
		display: table;
		width: 100%;
	}
	form div.comments{
		display: table-cell;
		width: 98%;
		min-width: 10em;
		padding: 0 0.25em;
		border-bottom: 0.5em solid #fff;
		overflow: hidden;
	}
	form div.wrap{
		display: inline-block;
		vertical-align: top;
		padding-right: 2em;
	}
	form div label,
	form div select,
	form div input{
		display: table-cell;
	}
	form div label{
		width: 25%;
		/* white-space: nowrap; */
		text-align: right;
	}
	form div.actionwrap label{
		/* width: 25%; */
	}
}
@media print {
	#sidebar,
	#head,
	#side{
		display: none;
	}
	form.normal fieldset{
		min-width: none;
		max-width: none;
		width: 100%;
		page-break-before: always;
		overflow: visible;
	}
	form div{
		display: table-row;
	}
	form div label,
	form div select,
	form div input{
		display: table-cell;
	}
	form div label{
		width: 25%;
		white-space: nowrap;
		text-align: right;
	}
}