@font-face {
  font-family: 'Roboto Slab';
  src: url('../assets/fonts/RobotoSlab-Regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../assets/fonts/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../assets/fonts/RobotoSlab-Regular-webfont.woff') format('woff'), /* Modern Browsers */
  url('../assets/fonts/RobotoSlab-Regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../assets/fonts/RobotoSlab-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

* {
	margin:0;
	padding:0;
}

body{
	font: normal 80% Arial, Helvetica, sans-serif;
	min-height: 20em;
	margin-bottom: 2em;
}

div.inline {
	float: left;
}

h1, h3{
	font: normal 160% 'Open Sans', Arial, Helvetica, sans-serif;
}

li{
  list-style-type: none;
}

.product-name {
  font-family: "Roboto Slab", Arial, sans-serif;
}

/*-----------------
	The Header
------------------*/

header {
	position: fixed;
	top: 0;
    width: 100%;

    height: 3em;
	z-index: 100;

	/*background-color: #282b2c;*/
  background-color: #2a7d2e;
    /*padding: 0.5em 0.5em;*/
	color: #fff;
    /*box-shadow: 0em 0.1em 0.2em rgba(0, 0, 0, 0.1);*/

    transition: 0.8s;
}

header.visible {
    height: 5em;

    transition: 0.8s;
}

header h1 {
    font-size: 1.5em;
    font-weight: normal;
    display: inline;
}

header h2 {
    font-size: 1.3em;
    font-weight: normal;
	display: inline;
}

/*header input {*/
/*margin: 0.1em 0.1em 0.1em 0.1em;*/
/*display: inline;*/
/*color: black;*/
/*}*/


header button #text {
	margin: 0em 1em 0em 1em;
}

header .header-proper {
	margin: 0 0 0 1em;
}

header .login-info {
	margin: 0.5em;
}

header .employee-name{
	opacity: 0;
	height: 0;
	pointer-events: none;
	display: block;
}

header .employee-name.visible{
	opacity: 1;
	height: 2em;
	pointer-events: auto;
}


/*@media (max-width: 30em){*/

	/*header {*/
		/*padding: 1em 0.75em;*/
	/*}*/

	/*header h1{*/
		/*font-size: 1.5em;*/
		/*margin: 0;*/
	/*}*/

/*}*/

/*-----------------
	The Footer
------------------*/

footer {
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 100;
    bottom: 0;

    opacity: 0;
    height: 0;

    transition: 0.8s;
}

footer.visible {
    opacity: 1;
    height: 2em;
    /*background-color: #282b2c;*/
    background-color: #2a7d2e;
    color: #fff;

    transition: 0.8s;
}

footer h1 {
    font-size: 1.2em;
    display: inline;
}

footer button {
    opacity: 0;
    height: 0;
    pointer-events: none;

    border-radius: 0.1em;
    background-color: #17a2b8;
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.12);
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.6em;
    cursor: pointer;
    padding: 0 1em;
}

footer button.visible {
    opacity: 1;
    height: 100%;
    pointer-events: auto;
    width: 100%;
    background-color: #2a7d2e;
}

footer button #text {
    margin: 0em 1em 0em 1em;
}

footer .left-col {
    position: relative;
    display: inline-block;
    width: 32.5%;
    text-align: center;
}

footer .middle-col {
    position: relative;
    display: inline-block;
    width: 32.5%;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

footer .right-col {
    position: relative;
    display: inline-block;
    width: 32.5%;
    text-align: center;
}

/*.back-arrow{*/
/*opacity: 0;*/
/*font-size: 0;*/
/*color: white;*/
/*background-color: #555555;*/
/*cursor: pointer;*/
/*padding: 0em 0.2em;*/
/*}*/

/*.back-arrow.visible {*/
/*opacity: 1;*/
/*font-size: 1.2em;*/
/*}*/

/*-----------------
	Main Content
------------------*/


.main-content{
	box-sizing: border-box;
	text-align: center;
    margin: 4.5em auto 0 auto;
	padding: 0.5em 0.5em;
}

.main-content h3{
	font-size: 1.7em;
	color:  #17a2b8;
	padding-bottom: 1em;
}

/*-------------------
	Login page
--------------------*/
.login {
    opacity: 0;
    height: 0;
    pointer-events: none;
}

.login.visible {
    opacity: 1;
    height: auto;
    pointer-events: auto;
}

.login input{
	font: normal 2.5em sans-serif;
    width: 7em;
	margin: 0.25em 0;
}

.login button{
    border-radius: 0.1em;
    background-color:  #17a2b8;
    border: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
    height: 2em;
    margin: 0.5em 1em 0em 1em;
}

.login button #text {
    margin: 0em 1em 0em 1em;
}

/*-------------------
	Image buttons pages
	(All tasks)
--------------------*/
.all-tasks {
	opacity: 0;
	height: 0;
	pointer-events: none;
}

.all-tasks.visible {
	opacity: 1;
	height: auto;
	pointer-events: auto;
    margin-top: 1em;
}

.all-tasks select {
	font: inherit;
}

/* ...the tasks list...	*/
.tasks-img-list {
	list-style:none;
	max-width: 150em;
	text-align: center;
	padding-top: 2em;
}

.tasks-img-list > li{
	box-sizing:border-box;
	display: inline-block;
	cursor: pointer;
	position: relative;

	text-align:left;

	background-color:#ffffff;
	border:0.1em solid #dbe3e7;
	border-radius: 0.2em;
	box-shadow: 0.1em 0.2em 0.1em rgba(0, 0, 0, 0.08);

	margin: 0 0.6em 0.7em 0;
	padding: 0;
    width: 12.2em;
}

.tasks-img-list > li.hidden{
	opacity: 0.2;
	pointer-events: none;
}

.tasks-img-list > li > h2 {
	text-align: center;
}

.tasks-img-list > li > ul {
	margin-left: 0.5em;
}

/* ...the task image */
.tasks-img-list .task-img{
	display: block;
	text-align: center;
	box-shadow : 0 0 1em 0.5em #f3f3f3 inset;

	width: 12em;
	margin-bottom: 0.5em;
	padding: 0.5em 0;
	box-sizing: border-box;
}

/* ...the task name */
.tasks-img-list h2{
	display: block;
	font-size: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
	width: 100%;
	margin: auto;
	padding-bottom: 0.5em;
}

.tasks-img-list h2{
	text-decoration: none;
	color: #2B2E31;
}

.tasks-img-list .highlight{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.1);
	opacity: 0;
	transition: 0.4s;
}

.tasks-img-list > li:hover .highlight{
	opacity: 1;
}

/*---------------------------
	Text buttons pages
	(Task Locations, Task date, Task hours, Task minutes, Task mixes, Task amounts)
----------------------------*/
.defined-tasks,
.task-locations,
.task-equipment,
.task-date,
.task-start,
.task-stop,
.task-hours,
	/*.task-minutes,*/
.task-mixes,
.task-amounts{
	opacity: 0;
	height: 0;
	pointer-events: none;
}

.defined-tasks.visible,
.task-locations.visible,
.task-equipment.visible,
.task-date.visible,
.task-start.visible,
.task-stop.visible,
.task-hours.visible,
	/*.task-minutes.visible,*/
.task-mixes.visible,
.task-amounts.visible{
	opacity: 1;
	height: auto;
	pointer-events: auto;
    margin-top: 1em;
}

.defined-tasks h2,
.task-locations h2,
.task-equipment h2,
.task-date h2,
.task-start h2,
.task-stop h2,
.task-hours h2,
	/*.task-minutes h2,*/
.task-mixes h2,
.task-amounts h2{
	margin-bottom: 0.7em;
}

.task-text-list > li{
	box-sizing:border-box;
	display: inline-block;
	cursor: pointer;
	position: relative;

	text-align:left;
	font:normal 0.75em sans-serif;

	background-color:#ffffff;
	border: 0.1em solid #dbe3e7;
	border-radius: 0.2em;
	box-shadow: 0.1em 0.2em 0.1em rgba(0, 0, 0, 0.08);

	margin: 0 0.6em 0.9em 0;
	padding: 0;
}

/* Special vertical list behavior */
.defined-tasks .task-text-list > li,
.task-date .task-text-list > li,
.task-locations .task-text-list > li,
.task-equipment .task-text-list > li,
.task-mixes .task-text-list > li {
	display: block;
}

.task-text-list h1{
	display: block;
	text-align: center;
	box-shadow : 0 0 1em 0.4em #f3f3f3 inset;
	font:normal 3em sans-serif;
	width: 5em;
	box-sizing: border-box;
	padding: 0.25em 0;
}

/* Special vertical list behavior */
.defined-tasks .task-text-list h1,
.task-date .task-text-list h1,
.task-locations .task-text-list h1,
.task-equipment .task-text-list h1,
.task-mixes .task-text-list h1{
	width: auto;
}

/*.task-hours .task-text-list h1,*/
/*.task-minutes .task-text-list h1{*/
/*width: 4em;*/
/*}*/

.task-mixes .task-text-list h1{
	font:normal 3em sans-serif;
}

.task-text-list .highlight{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.1);
	opacity: 0;
	transition: 0.4s;
	padding: 0.25em 0;
}

.task-text-list > li:hover .highlight{
	opacity: 1;
}

.big-select {
	font: normal 2em sans-serif;
}

.review h2 {
    padding-top: 0.2em;
}

.review-text-table {
    width: 100%;
    border-collapse: collapse;
}

.review-text-table td, .review-text-table th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}

.review-text-table th {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    background-color: #17a2b8;
    color: white;
}

.review-text-table tr:nth-child(even) {
    background-color: #f2f2f266;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 95; /* Sit on top */
    left: 0;
    top: 0;
    background-color: #bbbbbbf8;
    overflow-y: hidden; /* Disable vertical scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay.visible {
    height: 100%;
    overflow-y: scroll;
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    height: 100%; /* 100% height */
    text-align: center; /* Centered text/links */
    margin-top: 5em; /* Avoid the the header */
    margin-bottom: 2em; /* Avoid the footer */
}

/*---------------------------
	Task Notes Page
----------------------------*/
.task-notes{
  opacity: 0;
  height: 0;
  pointer-events: none;
  text-align: center;
}

.task-notes.visible{
  opacity: 1;
  height: 10em;
  pointer-events: auto;
  margin-top: 1em;
  text-align: center;
}

.task-notes h2{
  margin-bottom: 0.7em;
}

.task-notes textarea{
  width: 98%;
  margin: 0 1% 2% 1%;
  resize: none;
  font-size: 1.5em;
}

.task-notes.visible textarea {
  text-align: left;
}

.task-notes span{
  font-weight: bold;
}

.task-notes button{
  border-radius: 0.1em;
  background-color: #17a2b8;
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.12);
  border: 0;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.5em;
  cursor: pointer;
  height: 2em;
}

.task-notes button #task-notes-submit {
  margin: 0em 1em 0em 1em;
}

/*---------------------------
	Task Confirmation Page
----------------------------*/
.task-confirmation{
	opacity: 0;
	height: 0;
	pointer-events: none;
}

.task-confirmation.visible{
	opacity: 1;
	height: auto;
	pointer-events: auto;
  margin-top: 1em;
}

.task-confirmation-box {
    width: 18em;
    margin: 0 auto;
}

.task-confirmation h1{
	margin-bottom: 1em;
	font-size: 1.6em;
	text-align: center;
}

.task-confirmation h2{
	margin-bottom: 0.8em;
	font-size: 1.2em;
  text-align: left;
  font-weight: normal;
}

.task-confirmation span{
    font-weight: bold;
}

.task-confirmation .task-confirmation-defined-task {
	font-style: italic;
}

.task-confirmation button{
	border-radius: 0.1em;
	background-color: #17a2b8;
	box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.12);
	border: 0;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.5em;
	cursor: pointer;
	height: 2em;
}

.task-confirmation button #task-confirmation-submit {
	margin: 0em 1em 0em 1em;
}

/*---------------------------
	Error Page
----------------------------*/

.error{
	opacity: 0;
	transition: 0.6s;
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 5em;
	width: 100%;
}

.error.visible{
	opacity: 1;
}

.error h3{
	font-size: 2em;
}

/*---------------------------
	Number Pad
----------------------------*/
.num-entry {
	/*width: 24em;*/
	/*height: 42.5em;*/
	width: 20em;
	height: 36em;
	display: inline-block;
}

.num-entry input {
	width: 100%;
	height: 1.5em;
	font:normal 2em sans-serif;
	text-align: right;
	display: block;
}

.num-keypad {
	width: 100%;
	font:normal 2em sans-serif;
	height: calc(100% - 1.5em);
	display: inline-block;
}

.numkey,
.numkey3 {
	display: inline-block;
	width: calc(31% - 0.1em);
	height: calc(18.5% - 0.1em);
	/*width: calc(28% - 0.1em);*/
	/*height: calc(17% - 0.1em);*/
	margin: 0.1em;
	float: right;
	font:normal 0.75em sans-serif;

	background-color:#ffffff;
	border: 0.1em solid #dbe3e7;
	border-radius: 0.2em;
	box-shadow: 0.1em 0.2em 0.1em rgba(0, 0, 0, 0.08);
}

.numkey3 {
	width: calc(100% - 0.6em);
}

.numkey h1,
.numkey3 h1{
	display: block;
	text-align: center;
	box-shadow : 0 0 1em 1em #f3f3f3 inset;
	/*font:normal 3em sans-serif;*/
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.numkey h1>span,
.numkey3 h1>span{
	position: relative;
	top: calc(50% - 0.5em);
}