body {background:#fff; margin:0; padding:0; font-family:'Roboto', sans-serif;}

.clear {clear:both;}
.indent {text-indent:-10000px;}
.flush {margin:0; padding:0;}
.lists {list-style:none;}
.centered {margin-left:auto; margin-right:auto;}
.fleft {float:left;}
.fright {float:right;}
.aleft {text-align:left;}
.aright {text-align:right;}
.acenter {text-align:center;}
.relative {position:relative;}
.block {display:block;}
.iblock {display:inline-block;}
.invisible {display:none;}
.caps {text-transform:uppercase;}
.horiz li {display:inline;}
.nowrap {white-space:nowrap;}

.btn {padding:.5em 2em; border-radius:3px; color:#fff; background:#6d8ba6; border:none;}
.btn:hover {cursor:pointer; background:#162440;}
a.btn {text-decoration:none; display:inline-block;}
.btn-small {padding:.25em 1em; font-size:smaller;}
.gray {background:#fff; color:#000; border:1px solid #d9d9d9;}
.gray:hover {background:#d9d9d9;}
.green {color:#fff; background:#6c0; border:1px solid #59b200;}
.green:hover {background:#59b200;}
.red {color:#fff; background:#ed1b2e; border:1px solid #f00;}
.red:hover {background:#f00;}

#overlay {position:fixed; width:0; height:0; z-index:100000; background:#000; opacity:0; transition:opacity .5s;}
#overlay.open {width:100%; height:100%; opacity:.75;}

#popup {position:fixed; width:0; height:0; z-index:200000;}
#popup.open {height:auto; width:auto; background:#fff; border-radius:8px; padding:0; position: absolute; top:100px; left:50%; margin-right:-50%; transform:translate(-50%); overflow: hidden;}
#popup .top-bar {color:#fff; font-size:21px; font-weight:200; padding:7px 20px 10px; background:#d2d2d2;}
	
	#popup .top-bar > a {float: right; top: 2px; position: relative;}
#popup .main-content {padding: 25px 35px;}
	#popup .main-content > p:first-child {margin-top: 0;}
#popup .bottom-bar {border-top: thin solid #d2d2d2; padding: 17px 20px 20px; text-align: right;}
#popup button {font-size: 14px; font-weight: 100; padding: 3px 30px 5px;}

.dot {height:25px; width:25px; background:#bbb; border-radius:50%; display:inline-block;}

.spacing,
p {padding:.5em 1.5em;}

a {color:#000;}

.error {color:#f00;}

textarea {font-family:'Roboto', sans-serif;}

header, footer {background:#162440; margin:0; padding:0; width:100%; color:#fff;}

.container {zzzmax-width:1248px; margin:0 auto; padding:0 2em;}
.content {margin:0 auto; padding:.5em 1.5em;}

.icons {width:1em; height:1em; vertical-align:baseline; margin:0 4px 0 0;}


header {height:56px; position:fixed; z-index:100; top:0;}
#logo {color:#fff; text-decoration:none; line-height:3;}
#logo img {max-height:56px; margin-left:20px;}
#username {padding-top:.5em;}
	#logout-ctrl {font-size:.8em; text-decoration:none; opacity:0; color:#555;}
	
	#username:hover {cursor:pointer;}
	#username:hover #logout-ctrl {transition:opacity .3s; opacity:1;}
	
.favs {width:19px; height:17px; display:inline-block; position:relative;}
.favs svg, .favs img {position:absolute; top:0; left:0;}
.favs.off svg {display:none;}
.favs.on img {display:none;}

.autoswitch {width:28px; height:16px; display:inline-block; position:relative;}
.autoswitch svg {position:absolute; top:0; left:0;}
.autoswitch #autoswitch-off-bg {position:absolute; top:0; left:0;}
.autoswitch.on #autoswitch-btn {position:absolute; top:0; left:0;}
.autoswitch.on #autoswitch-off-bg {display:none;}
.autoswitch.off #autoswitch-btn {position:absolute; top:0; right:0;}
.autoswitch.off svg {display:none;}

#site-stage {background:#f5f5f5; display:table; width:100%; margin:56px auto 0 auto; padding:0;}

#gen-img-instructions {padding-top:100px;}

#menu {width:300px; min-width:300px; height:100%; padding:40px 20px; line-height:2; font-size:.8em; background:#fff; display:table-cell;}
	#menu ul:nth-child(n+2) {margin-left:-20px;}
	
	#menu a {text-decoration:none;}
	
	.nav-cat {display:block;}
	.nav-cat.open {background:url(../i/icon-arrow-expanded.svg) right center no-repeat; font-weight:bold;}
	.nav-cat.close {background:url(../i/icon-arrow-collapsed.svg) right center no-repeat;}

#main {width:calc(96% - 300px); display:table-cell; position:relative;}

.search {background:url(../i/icon-search.svg) right no-repeat; padding:.4em;}

header .search {background:#f5f5f5 url(../i/icon-search.svg) 96% .5em no-repeat; width:250px; border:1px solid #ccc; border-radius:4px; position:absolute; top:10px; left:340px;}

#filter-ctrls {margin:16px 50px 0 0; color:#000;}
#filter-ctrls a {margin:0 0 0 50px;}

#filter-panel {display:none; position:fixed; top:56px; right:0; height:100%; width:240px; background:#444; color:#fff; font-size:.8em; z-index:2;}
	#filter-panel h2 {margin:0; padding:0; background:#222; text-indent:16px; border-top:8px solid #222; border-bottom:8px solid #222; font-weight:normal;}
	#filter-content {padding:16px;}
	#filter-content a {color:#999; text-decoration:none;}
	#filter-content a:hover {color:#fff;}
	#filter-content li {line-height:2;}
	#filter-content .search {display:block; width:100%; background:#fff url(../i/icon-search.svg) 96% .2em no-repeat; border:1px solid #fff; border-radius:4px; margin-bottom:16px;}
	#filter-content p {margin:8px 0; padding:0 0 20px 0; text-align:center;}
	#filter-content .dates {width:40%; background:#fff; border:1px solid #fff; border-radius:4px; padding:.2em;}
	#filter-panel ul {margin-bottom:16px;}
    #filter-panel .nav-cat {display:inline-block; width:14px; height:14px; background-position:left bottom;}
	
.checkbox {display:inline-block; width:14px; height:13px; background:url(../i/checks.png) bottom no-repeat;}	
.checkbox.checked {background:url(../i/checks.png) top no-repeat;}

h1.title {font-weight:100; border-bottom:2px solid #ccc;}

.main {background:#fff; border:1px solid #ccc;}
.main h2 {background:#f5f5f5; border-bottom:1px solid #ccc; text-transform:uppercase; margin:0; padding:.25em 1.5em; color:#333;}
.labels {font-weight:bold; display:block;}
.input {width:100%; border:1px solid #ccc; padding:.5em;}
.input-std {width:200px;}

#trail {font-size:.8em;}
	#trail a {text-decoration:none;}


.tabs {height:41px; background:-webkit-repeating-linear-gradient(#fff, #fff 40px, #d7d7d7 41px); background:-moz-repeating-linear-gradient(#fff, #fff 40px, #d7d7d7 41px); background:-o-repeating-linear-gradient(#fff, #fff 40px, #d7d7d7 41px); background:repeating-linear-gradient(#fff, #fff 40px, #d7d7d7 41px);}
.tabs li {margin:0;}
.tabs li:first-child {margin:0 0 0 10px;}

.tabs a {display:inline-block; height:40px; padding:0 24px; font-size:14px; line-height:40px; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; border-top:1px solid #d7d7d7; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; color:#999;}
.tabs a:hover, 
.tabs a.active-tab {color:#000; background:-webkit-repeating-linear-gradient(#162440, #162440, #fff 5px, #fff 40px); background:-moz-repeating-linear-gradient(#162440, #162440, #fff 5px, #fff 40px); background:-o-repeating-linear-gradient(#162440, #162440, #fff 5px, #fff 40px); background:repeating-linear-gradient(#162440, #162440, #fff 5px, #fff 40px); border-bottom:1px solid #fff;}


.account-tabs-stage {padding:40px;}
.account-info li {margin:2px 0 4px 0; padding:2px 0 4px 0; border-bottom:1px solid #f2f2f2;}
.account-info label {display:inline-block; width:150px; font-weight:bold;}

.dashboard-graph {float:left; position:relative;}
.graph-ctrls {position:absolute; left:0; right:0; width:auto; display:none; background:#fff; border-bottom:1px solid #e3e3e3;}
.dashboard-graph:hover .graph-ctrls {display:block;}


.tile {display:inline-block; width:43%; margin:1.32%; padding:10px; background:#fff; border:10px solid #f5f5f5; height:340px; font-size:.8em; overflow:hidden; position:relative;}

.full-tile {width:93%; margin:1.32% 1%;}
.tall-tile {height:auto;}

.tile-ctrls {position:absolute; right:0; text-align:right; display:none; background:#fff; padding:0 8px; box-shadow:0 4px 2px -2px #e3e3e3;}
.tile:hover .tile-ctrls {display:block;}

.summary-test-left {float:left; width:60%; padding:0 5%;}
.summary-test-right {float:left; width:30%;}
.summary-eval-donut {padding:0 5%; width:80%;}
.summary-eval-bar {padding:0 5%;}
.summary-eval-content {padding:0 5%;}

/*.tile { float: left; box-sizing: border-box; margin: 0 0 1em 0; vertical-align: top; position:relative; background:#fff; height:340px;  color:#656565; box-shadow:0 0 5px #e3e3e3; font-size:.8em; overflow:hidden;}
.tile + .tile { margin-left: 2.65%; }

/* remove outer margins from first and last inner elements */
/*.tile :first-child { margin-top: 0; }
.tile :last-child { margin-bottom: 0; }

.tile-50 {width: 48.65%;}
*/
/*
.graph-wrapper {background:#fff; margin:30px 30px 0 0; padding:10px 10px 30px 30px; float:left; color:#656565; box-shadow:0 0 5px #e3e3e3; font-size:.8em; overflow:hidden;}


.graph-donut {width:45%; max-width:455px; height:340px; padding-left:0;}
.graph-line {width:calc(90% + 10px);}
.graph-bar,
.graph-small_line {width:45%; max-width:405px; height:340px; padding-left:20px; padding-right:20px;}
*/

#event-dashboard {margin:10px auto;}
.event-dashboard-row {display:flex;}
.event-dashboard {flex:1; text-align:center; padding:5px; margin:5px; background:#fff;}
.event-dashboard span {display:block; font-size:28px;}
#event-meta {text-align:left;}

.horiz-chart {text-align:left;}
.horiz-chart label {display:inline-block; width:40%; font-size:14px;}
.horiz-chart-bar-container {display:inline-block; width:60%;}
.horiz-chart-bar-container div {text-align:right; height:18px;}
.horiz-chart-bar-container span {font-size:12px; padding:0 4px; background:#fff; float:right;}

.graph-wrapper {}
.graph-donut {margin-left:-20px;}
.graph-line {}
.graph-bar,
.graph-small_line {}

.graph-icon {margin:2px;}

footer {height:10px; font-size:.8em;}
footer li {padding:0 .25em;}
footer a {text-decoration:none;}
footer a:hover {text-decoration:underline;}

.user-type-descs {padding:20px 140px;}
.user-type-warn {margin-top:20px; padding:20px 140px; background:#fcc; border:1px solid #f00;}

.client-event-selector-ctrls {font-size:.7em; font-weight:bold; text-transform:uppercase;}
.client-event-selector-ctrls input {margin-left:10px;}
.c-selector-arrow-up {float:left; margin:6px 10px 0 0; display:inline-block; width:12px; height:12px; background:url(../i/icon-arrow-collapsed.svg) no-repeat;}
.c-selector-arrow-down {float:left; margin:10px 10px 0 0; display:inline-block; width:12px; height:12px; background:url(../i/icon-arrow-expanded.svg) no-repeat;}
.event-selector-checkbox {margin-left:30px;}

.list-nav {display:inline-block; height:24px; border:1px solid #d7d7d7; font-size:12px;}	
	.nav-arrows {display:inline-block; width:28px; height:24px; text-indent:-1000px; margin:0; padding:0;}
	.nav-prev {background:url(../i/nav-prev.png);}
	.nav-next {background:url(../i/nav-next.png);}
	.nav-arrows:hover {background-position:0 -24px;}
	.list-nav input {font-size:12px;}
	.list-nav input:hover {color:#333; cursor:pointer;}
	.page-num {border:none; width:30px; text-align:right; background:transparent;}
	
.main-table {border-collapse:collapse; width:100%;}
.main-table-header {font-weight:bold; text-transform:uppercase; background:#d7d7d7; border-top:1px solid #d7d7d7;}
.main-table-header, .main-table td {text-align:left; font-size:14px; padding:8px; border-bottom:1px solid #d7d7d7;}

.filter-table {width:100%; max-width:100%; margin:10px 0;}
.filter-table th {text-align:left; font-size:14px; text-transform:uppercase;}
.filter-table th, .filter-table td {padding:6px 0;} 
.filter-table td {overflow:hidden;}

.switch {display:inline-block; text-decoration:none; min-width:70px; height:26px; background:url(../i/icon-switch.png) 0 -26px no-repeat; text-indent:76px; color:#000; line-height:26px; font-size:14px;}
.switch-on {background:url(../i/icon-switch.png) no-repeat;}
.switch:hover {color:#000;}

#default-setup-stage p {padding:0; margin:20px 0 8px 8px; line-height:1;}
#report-list {columns:3;}
.report-list-cats {padding:2px 4px; margin:0 6px; background:#fff;}
#report-list li {padding:2px; margin:1px 4px; border:1px solid #ccc; font-size:10px;}
#report-list li:hover {cursor:pointer; background:#a9a9a9;}
#cat-list li, #stage-list li, #accreditor-list li {padding:2px 20px 2px 2px; border:1px solid #ccc; margin:1px 4px;}
#cat-list li:hover, #stage-list li:hover, #accreditor-list li:hover {background:#fff; cursor:pointer;}

@media only screen and (max-width:568px) {
	.hidemobile {display:none;}
}

@media print {
	header, #menu {display:none;}
}

.ui-widget {font-size:.8em;}

#timeOutWarningOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}