/******************************************************************
Theme Name: Activity Matrix
Description: A Genesis child theme for Camp Sweeney
Author: Darkspire Media
Author URI: http://Darkspire.Media
Version: 1.0
Tags: html, css3, responsive, hb5
Template: genesis
*/

*{outline:0;}

html{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
	background-color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:400;
	color:#1c1c1b;
	background-image: url('https://campsweeney.org/wp-content/themes/campsweeney/assets/images/bg_body.png');
}

@media print{
	@page{
		margin: 2cm;
	}
  body{
  	margin:0;
  	background: none;
  }
}

img{border:none;}

ul{padding-left:20px;}

.clear{clear:both; display:block;}

.alignnone{float:none;}
.alignleft{float:left;padding:0 20px 10px 0;}
.aligncenter{display:block; margin:0 auto;}
.alignright{float:right; padding:0 0 10px 20px}

.table{display:table; width:100%; height:100%;}
.table .table-cell{display:table-cell; width:100%; vertical-align: middle;}

.pagebreak{break-after: page;}

/* MESSAGE */

.message{
	display: none;
	position: absolute;
	top: calc(50vh - 80px);
	left: calc(50% - 140px);
	z-index: 10000;
	opacity: 0;
	margin: 0;
	padding: 40px;
	width: 220px;
	height: 120px;
	color: #ffffff;
	font-size: 20px;
	text-align: center;
	background-color: #000000;

	-moz-transition-property: opacity;
	-moz-transition-duration: 0.25s;
	-moz-transition-delay: 0.25s;
	-moz-transition-timing-function: linear;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.25s;
	-webkit-transition-delay: 0.25s;
	-webkit-transition-timing-function: linear;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-delay: 0.25s;
	transition-timing-function: linear;
}

@media print{
	.message{
		visibility: hidden;
	}
}

.message.show{
	display: block;
	opacity: 0.8;
}

.message p{
	margin: 0;
}

/* CONTROLS */

.controls{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 50px;
	font-size: 20px;
	line-height: 1;
	text-align: center;
}

@media print{
	.controls{
		position: relative;
	}
}

.controls .control-button{
	float: left;
	width: 100%;
	height: 50px;
	color: #ffffff;
	text-transform: uppercase;
	text-decoration: none;
}

@media print{
	.controls .control-button{
		display: none;
		visibility: hidden;
	}
}

.controls[data-count="2"] .control-button{
	width: calc(100% / 2);
}

.controls[data-count="3"] .control-button{
	width: calc(100% / 3);
}

.controls[data-count="4"] .control-button{
	width: calc(100% / 4);
}

.controls .control-button.hide{
	display: none;
}

.controls #back-button{
	background-color: #333333;
}

.controls #start-over{
	background-color: #000000;
}

.controls #all-present,
.controls #all-campers{
	background-color: #3bc251;
}

.controls #all-campers.missing{
	background-color: #c2322d;
}

/* PAGE TITLE */

.controls #page-title{
	float: left;
	color: #000000;
	font-size: 16px;
	line-height: 50px;
	font-weight: 900;
	background-color: #cc0000;
}

@media(max-width: 1279px){
	.controls #page-title{
		line-height: 25px;
		white-space: break-spaces;
	}
}

@media print{
	.controls #page-title{
		float: none;
		display: block;
		visibility: visible;
		margin-bottom: 20px;
		width: 100%;
		background: none;
		font-size: 20px;
		text-align: center;
		line-height: 1;
		border-bottom: 1px solid #000000;
	}

	.page-roll .controls #page-title{
		display: none;
		visibility: none;
	}
}

/* GRID */

.grid{
	padding: 50px 0;
	text-align: center;
}

@media print{
	.grid{
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
	}
}

.grid[data-controls="0"]{
	padding-top: 0;
}

.grid[data-buttons="0"]{
	padding-bottom: 0;
}

.grid .grid-item{
	float: left;
	color: #ffffff;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
}

.grid .grid-item.modified{
	color: #000000;

	-moz-box-shadow: inset 0 0 1px 20px rgb(0 0 0 / 30%);
	-webkit-box-shadow: inset 0 0 1px 20px rgb(0 0 0 / 30%);
	box-shadow: inset 0 0 1px 20px rgb(0 0 0 / 30%);
}

.grid .grid-item.error{
	color: #000000;
}

.grid .grid-item.items-1{
	width: 100%;
	height: calc(100vh - 100px);
}

.grid[data-controls="0"] .grid-item.items-1{
	width: 100%;
	height: calc(100vh - 50px);
}

.grid[data-buttons="0"] .grid-item.items-1{
	width: 100%;
	height: calc(100vh - 50px);
}

.grid[data-controls="0"][data-buttons="0"] .grid-item.items-1{
	width: 100%;
	height: calc(100vh - 100px);
}

.grid .grid-item.items-2{
	width: calc(100% / 2);
	height: calc(100vh - 100px);
}

.grid .grid-item.items-3{
	width: calc(100% / 3);
	height: calc(100vh - 100px);
}

.grid .grid-item.items-4{
	width: calc(100% / 4);
	height: calc(100vh - 100px);
}

.grid[data-controls="0"] .grid-item.items-2,
.grid[data-buttons="0"] .grid-item.items-2,
.grid[data-controls="0"] .grid-item.items-3,
.grid[data-buttons="0"] .grid-item.items-3,
.grid[data-controls="0"] .grid-item.items-4,
.grid[data-buttons="0"] .grid-item.items-4{
	height: calc(100vh - 50px);
}

.grid[data-controls="0"][data-buttons="0"] .grid-item.items-2,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-3,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-4{
	height: calc(100vh - 100px);
}

.grid[data-controls="0"] .grid-item.items-2,
.grid[data-buttons="0"] .grid-item.items-2,
.grid[data-controls="0"] .grid-item.items-3,
.grid[data-buttons="0"] .grid-item.items-3,
.grid[data-controls="0"] .grid-item.items-4,
.grid[data-buttons="0"] .grid-item.items-4{
	height: calc(100vh - 50px);
}

.grid[data-controls="0"][data-buttons="0"] .grid-item.items-2,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-3,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-4{
	height: calc(100vh - 100px);
}

.grid .grid-item.items-5,
.grid .grid-item.items-6{
	width: calc(100% / 3);
	height: calc((100vh - 100px) / 2);
}

.grid[data-controls="0"] .grid-item.items-5,
.grid[data-buttons="0"] .grid-item.items-5,
.grid[data-controls="0"] .grid-item.items-6,
.grid[data-buttons="0"] .grid-item.items-6{
	height: calc((100vh - 50px) / 2);
}

.grid[data-controls="0"][data-buttons="0"] .grid-item.items-5,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-6{
	height: calc((100vh - 100px) / 2);
}

.grid .grid-item.items-7,
.grid .grid-item.items-8{
	width: calc(100% / 4);
	height: calc((100vh - 100px) / 2);
}

.grid[data-controls="0"] .grid-item.items-7,
.grid[data-buttons="0"] .grid-item.items-7,
.grid[data-controls="0"] .grid-item.items-8,
.grid[data-buttons="0"] .grid-item.items-8{
	height: calc((100vh - 50px) / 2);
}

.grid[data-controls="0"][data-buttons="0"] .grid-item.items-7,
.grid[data-controls="0"][data-buttons="0"] .grid-item.items-8{
	height: calc((100vh - 100px) / 2);
}

.grid .grid-item select{
	width: 90%;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}

.grid select.camper-status{
	display: none;
}

.grid .color-red{
	background-color: #c2322d;
}

.grid .color-orange{
	background-color: #e86713;
}

.grid .color-blue{
	background-color: #4365ae;
}

.grid .color-green{
	background-color: #3bc251;
}

.grid .color-teal{
	background-color: #54b3b6;
}

@media(max-width: 1100px){
	.controls.four-buttons + .clear + .grid{
		margin-top: 100px;
	}
}

/* KEYPAD */

.keypad{
	display: flex;
	padding: 50px 0 0;
	flex-direction: column;
	align-items: center;
	width: auto;
}

.keypad	.dots{
	display: inline-flex;
	margin: 1.5rem 0;
}

.keypad .dots div{
	width: 1rem;
	height: 1rem;
	background: transparent;
	margin: 0.7rem 1rem;
	border-radius: 50%;
	border: 1px solid #666666;
}

.keypad .dots div.solid{
	background:gray;
}

.keypad .buttons{
	background: #666666;
	border-radius: 20px;

	font-family: sans-serif;
	height: auto;
	padding: 0.6rem;
	width: 516px;
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;

	box-shadow: -10px -10px 30px 4px rgba(154, 203, 255, 0.15),
		10px 10px 30px 4px rgba(154, 203, 255, 0.15);
}

@media (max-width: 992px){
	.keypad .buttons{
		width: 344px;
	}
}

@media (max-width: 572px){
	.keypad .buttons{
		width: 258px;
		min-width: 258px;
	}
}

.keypad .buttons div{
	width: 70px;
	height: 70px;
	background: #f5f9fc;
	border-radius: 14px;
	cursor: pointer;
	margin: 0.5rem;
	font-size: 1.4rem;
	color: #474747;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 250ms ease;
}

.keypad .buttons div:hover{
	background: #e2e9f2;
}

.keypad .buttons div:active{
	background: #c7d7e6;
}

.keypad .buttons .b6{
	order: 1;
}

@media (max-width: 992px){
	.keypad .buttons .b6{
		order: 0;
	}
}

.keypad .buttons .b7{
		order: 1;
}

@media (max-width: 572px){
	.keypad .buttons .b7{
		order: 0;
	}
}

.keypad .buttons .b8{
	order: 1;
}

@media (max-width: 572px){
	.keypad .buttons .b8{
		order: 0;
	}
}
	
.keypad .buttons .b9{
	order: 1;
}

@media (max-width: 572px){
	.keypad .buttons .b9{
		order: 0;
	}
}

.keypad .buttons .b0{
	order: 1;
}

.keypad .buttons .enter{
	background: #3bc251;
	color: #ffffff;
	font-size: 1rem;
	order: 1;
}

.keypad .buttons .enter:hover{
	background: #54b3b6;
}

.keypad .buttons .enter:active{
	background: #54b3b6;
}

.keypad .buttons .clear{
	background: #c2322d;
	color: #ffffff;
	font-size: 1rem;
	order: 3;
}

.keypad .buttons .clear:hover{
	background: #f37a30;
}

.keypad .buttons  .clear:active{
	background: #f37a30;
}

/* TABLE */

.report-table{
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

.header-row,
.table-row{
	display:block;
	width: calc(100% - 2px);
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.header-row{
	border-bottom: 3px solid #000000;
	border-top: 1px solid #000000;
}

@media print{
	.header-row .header-cell{
		visibility: visible;
	}

	.header-row.page-title{
		display: block;
		visibility: visible;
		border: none;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 900;
		text-transform: uppercase;
		text-align: center;
	}
}

.header-row .header-cell,
.table-row .table-cell{
	float: left;
	display: block;
	vertical-align: middle;
	padding: 5px;
	border-left: 1px solid #000000;
}

.header-row .header-cell:first-child,
.table-row .table-cell:first{
	border-left:none;
}

.header-row-header-cell{
	font-weight: 700;
}

.report-table.column-count2 .header-row .header-cell,
.report-table.column-count2 .table-row .table-cell{
	width: calc((100% / 2) - 11px);
}

.report-table.column-count3 .header-row .header-cell,
.report-table.column-count3 .table-row .table-cell{
	width: calc((100% / 3) - 11px);
}

.report-table.column-count4 .header-row .header-cell,
.report-table.column-count4 .table-row .table-cell{
	width: calc((100% / 4) - 11px);
}

.report-table.column-count5 .header-row .header-cell,
.report-table.column-count5 .table-row .table-cell{
	width: calc((100% / 5) - 11px);
}

.report-table.column-count6 .header-row .header-cell,
.report-table.column-count6 .table-row .table-cell{
	width: calc((100% / 6) - 11px);
}

.report-table.column-count7 .header-row .header-cell,
.report-table.column-count7 .table-row .table-cell{
	width: calc((100% / 7) - 11px);
}

.page-count .report-table.column-count6 .header-row .header-cell,
.page-count .report-table.column-count6 .table-row .table-cell{
	width: calc((100% / 7) - 11px);
}

.page-count .report-table.column-count6 .header-row .header-cell.class-name,
.page-count .report-table.column-count6 .table-row .table-cell.class-name{
	width: calc((100% / 3.5) - 11px);
}

.page-count .report-table.column-count7 .header-row .header-cell,
.page-count .report-table.column-count7 .table-row .table-cell{
	width: calc((100% / 8) - 11px);
}

.page-count .report-table.column-count7 .header-row .header-cell.class-name,
.page-count .report-table.column-count7 .table-row .table-cell.class-name{
	width: calc((100% / 4) - 11px);
}

/* Footer Buttons */

.footer-buttons{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

@media print{
	.footer-buttons{
		visibility: hidden;
	}
}

.footer-buttons .footer-button{
	float: left;
	width: 50%;
	height: 50px;
	color: #000000;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	background-color: #54b3b6;
}

.footer-buttons .footer-button.hide{
	display: none;
}

.page-count .footer-buttons #print-button{
	display: block;
	width: 100%;
}

.footer-buttons #save-schedule,
.footer-buttons #save-attendance,
.footer-buttons #save-hospital-attendance,
.footer-buttons #save-admin-attendance,
.page-roll .footer-buttons #print-button,
.page-lookup .footer-buttons #print-button{
	width: 100%;
}

.footer-buttons #export-button,
.footer-buttons #download-button{
	color: #ffffff;
	background-color: #000000;
}