html,
body {
	margin: 0;
	padding: 0;
}

html {
		height: 100%;
}

body {
	/*font-family: 'Oswald',sans-serif;*/
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	min-height: 100%;
}
header {
	
	color: #FFF;

	padding: 0;
	
}

header a {
	color: #FFF;
	text-decoration: none;		
}

header a:hover {

	font-style: italic;
	color: #FFF;
	text-decoration: none;
}


#menu {
	background-color: #3939ac;/*indigo;*/
	box-shadow: 0px 1px 10px #333;
}


header nav {
	width: 80%;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	margin-left: auto;
	margin-right: auto;
	background-color: #3939ac;/*indigo;*/
	padding: 5px;
}

header nav a {
	display: flex;
	display: -webkit-flex;
	height: 20px;
}

header img {
	margin-left: 30px;	
}

#headbar {
	background-color: #3939ac;/*indigo;*/
	padding: 5px;
	padding-bottom: 10px;
	display: flex;
}

#logoutlink {
	position: absolute;
	right: 30px;
	top: 15px;
	font-size: 80%;
}

h1 {
	display: inline;

	margin: 0px;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 10px;
	
}
h2 {
	font-weight: 600;
	margin-top: 20px;
}


@media (max-width: 479px) {
	#headbar {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		max-height: 100px;
		width: 100%;
	}
	#logoutlink {
		background-color: green;
		padding: 5px;
	}
	h1 {
		font-size: 130%;
		display: -webkit-flex;
		/*width: 246px; calc(100% - 110px);    */
		width: -webkit-calc(100% - 110px); 

		
	}
	img {
		display: flex;
		display: -webkit-flex;
	}
	header nav {
		flex-direction: column;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		width: 100%;
		opacity: 0.7;
		margin-left: 0;
	}
	#menu {
		background-color: #FFF;
	}
	header nav a {
		font-size: 110%;
		padding: 5px;
	}
}

main {
	flex: 1;
	padding: 5px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: left; /*was justify */
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

	word-wrap: break-word;
}




@media (max-width: 479px) {
	main {

		max-width: 100%;
	}
}

footer {
	background-color: #3939ac;/*indigo;*/
	color: #FFF;
	padding: 5px;
	padding: .5rem;
	font-size: 12px;
	box-shadow: 0px -1px 10px #333;
	margin-top: 30px;
}

footer a {
	color: #FFF;
	text-decoration: none;

}

footer nav {
	width: 40%;
	display: flex;
	justify-content: space-around;
	margin-left: auto;
	margin-right: auto;			
}


footer nav a {
	display: flex;
	height: 20px;			
}


footer a:hover {
	text-decoration: underline;
}
@media (max-width: 479px) {
	footer nav {
		width: 100%;
	}
}

.selected {
	color: #9c9a9a;
}

#signin {
	margin-left: 30px;
}

#signin a {
	font-size: 90%;
}

#genericform {
	margin-left: 30px;
}

#genericform a {
	font-size: 90%;
}

.genericform label {
	font-weight: 600;
}

.label {
	margin-top: 30px;
	font-weight: 600;
}

.actionbutton {
	
	border: none;
	color: #FFF;
	background-color: green;
	padding: 5px;
	font-weight: bold;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 120%;
	margin-bottom: 5px;
}
.actionbutton:hover {
	background-color: darkgreen;
	color: #FFF;
	text-decoration: none;
}
.actionlink {
  	display: inline-block; /*attempt to fix action button*/
    margin-top: 5px; /*fixing*/
	text-decoration: none;
	border: none;
	color: #FFF;
	background-color: green;
	padding: 5px;
	font-weight: bold;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 100%;
}
@media (max-width: 479px) {
	.actionlink {
		display: block;
	}
}
.actionlink:hover {
	background-color: darkgreen;
	color: #FFF;
	text-decoration: none;
}
.cancellink {
	text-decoration: none;
	border: none;
	color: #FFF;
	background-color: red;
	padding: 3px;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 100%;
}
.cancellink:hover {
	background-color: darkred;
	color: #FFF;
	text-decoration: none;
}		
		
.formentry {
	font-size: 120%;
	border: none;
	background-color: lightgrey;
	width: 300px;
	padding: 5px;
}
@media (max-width: 479px) {
	.formentry {
			width: auto;
	}
}



.littlenote {
	font-size: 80%;
	font-style: italic;
	max-width: 400px;
}


.standardtable {
	border-collapse: collapse;	
}

.standardtable tr{
	height: 40px;

}

.warninglink {
	display: inline-block;
	text-decoration: none;
	border: none;
	color: #FFF;
	background-color: red;
	padding: 5px;
	font-weight: bold;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 100%;	
}
.warninglink:hover {
	background-color: darkred;
	color: #FFF;
	text-decoration: none;
}





.standardtable td{
	border-bottom: 1px solid #BBB;
	padding: 5px;
}
.standardtable th{
	border-bottom: 2px solid black;
	padding: 5px;
	font-weight: 600;
}

.narrowdata {
	display: none;
	flex-direction: column;
}

.narrowitem {
	display: flex;
	flex-direction: row;
	border-top: 1px solid black;
	padding: 5px;
}

.narrowitemwrapper {
	display: flex;
	flex-direction: column;
	border-top: solid 1px black;
}

.narrowentry {
	display: flex;
	flex-direction: column;
	margin-left: 5px;
}



.narrowlabel {
	font-weight: 600;
	color: #777;
	margin-right: 5px;
}
.checkbox {
	transform: scale(1.5);
}	

@media (max-width: 570px) {
	.narrowdata {
		display: flex;
	}
	.standardtable {
		display: none;
	}
	.checkbox {
		transform: scale(2.5);
	}
	.narrowitemwrapper {
		justify-content: center;
		padding: 5px;
	}

}

.message {
	width: 100%;
	background-color: #ffe08c;
	padding: 10px;
}

.warning {
	padding-left: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-right: 10px;
	background-color: #faa49d;
	margin-bottom: 30px;
}

.assignable-container {
	width: 100%;
	background-color: #CCC;
	padding: 15px;
	padding-right: 25px;
	box-shadow: 0px 1px 5px #333 inset;
	
}
.assignables {
	width: 100%;
	background-color: #FFF;
	margin-bottom: 10px;
	padding: 5px;
	box-shadow: 0px 1px 5px #333;
	
}

.assignables:last-child {
	margin-bottom: 0px;
}

.assignable-title {
	font-weight: 600;
	font-size: 110%;
}
.assignable-portion-wrapper {
	display: flex;
	width: 100%;
	
}
.end-cross {
    margin-left: auto;
	margin-right: 20px;
	margin-top: -10px;
}
.end-date-box {
	margin-left: 5px;
}

@media (max-width: 479px) {
	.assignable-portion-wrapper {
		flex-direction: column;
		height: 100px;
		justify-content: space-between;
		padding-top: 10px;
	}
	.end-cross {
		margin-right: auto;
	}
	.end-date-box {
	 margin-left: 0px;
	}
}

.simple-option-anchor {
	text-decoration: none;
	color: #FFF;
}

.simple-option {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	background-color: green;
	color: #FFF;
	text-decoration: none;
	
}
.simple-option:hover {
	background-color: darkgreen;
	color: #FFF;
	text-decoration: none;
}

.simple-option-title {
	/*text-align: center;*/
	font-size: 120%;
	font-weight: 600;
	color: #000;
	text-decoration: none;
}
.simple-option-description {
	margin-top: 10px;
	font-style: italic;
	text-align: left;
	margin-bottom: 10px;
}
#autosave-message {

	margin-left: 30px;
	font-size: 90%;
	color: #333;
	font-style: italic;
}

.active-dates,.active-item {
	background-color: #e6ffe6;
}
.inactive-dates, .inactive-item {
	background-color: #ddd;
}
.error-dates, .error-item {
	background-color: #ff5c33;
}
.notactiverow {
	color: grey;
}
.notactiveflex {
	color: grey;
}
#restorebutton {
	display: none;
}
#newGroup {
	display: none;
}
textarea  {
	font-family: sans-serif;
	font-size: 80%;
}
.simple-option-2 {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border: 2px indigo solid;
	
}
.option-label {
	font-size: 90%;
}
/* Pointer Breadcrumb menus */
.pointer {
  width: 150px;
  height: 40px;
  position: relative;
  float: left;
}


.pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.pointer:hover {
	color: orange;
}

#pointer1 {
  background: #3939ac; /*#7700cc;*/
}
#pointer1:after {
  border-left: 20px solid white;
}
#pointer1:before {
  border-left: 20px solid  #3939ac; /*#7700cc;*/
}


#pointer2 {
  background:  #5353c6; /* #aa33ff;*/
}
#pointer2:after {
  border-left: 20px solid #3939ac; /*#7700cc;*/ /*previous color*/
}
#pointer2:before {
  border-left: 20px solid #5353c6; /* #aa33ff;*/
}
#pointer3 {
  background:  #7979d2; /*#bf66ff;*/
}
#pointer3:after {
  border-left: 20px solid #5353c6; /* #aa33ff;*/ /*previous color*/
}
#pointer3:before {
  border-left: 20px solid  #7979d2; /*#bf66ff;*/
}
#pointer4 {
  background:  #9f9fdf; /*#d499ff;*/
}
#pointer4:after {
  border-left: 20px solid #7979d2; /*#bf66ff;*/ /*previous color*/
}
#pointer4:before {
  border-left: 20px solid  #9f9fdf; /*#d499ff;*/
}
#pointer5 {
  background:  #c6c6ec; /*#dfb3ff;*/
}
#pointer5:after {
  border-left: 20px solid #9f9fdf; /*#d499ff;*/ /*previous color*/
}
#pointer5:before {
  border-left: 20px solid  /*#dfb3ff;*/
}

@media (max-width: 479px) {
	#pointer1:after {
		border-left: 20px solid #fff; /*previous color*/
	}
	#pointer2:after {
		border-left: 20px solid #fff; /*previous color*/
	}
	#pointer3:after {
		border-left: 20px solid #fff; /*previous color*/
	}
	#pointer4:after {
		border-left: 20px solid #fff; /*previous color*/
	}
	#pointer5:after {
		border-left: 20px solid #fff; /*previous color*/
	}
	
}

.pointertext {
	position: relative;
	top: 10px;
	left: 30px;
	color: white;
}



.pointer {
  background:  linear-gradient(to right,#dfb3ff,#aa33ff);
}


.pointer:after {
  border-left: 20px solid #aa33ff; /*previous color*/
}


.pointer:before {
  border-left: 20px solid  #aa33ff;
}

.pointertext {
	position: relative;
	top: 10px;
	left: 30px;
	color: white;
}
.log-box {
	border: 1px solid black;
	padding: 20px;
	
}

.excel-download {
	display: flex;
	cursor: pointer;
}

#generate-excel-basic img {
 	width: 30px;

}
.download-text {
 	margin-left: 10px;
	color: blue;
	font-size: 90%;
}

.approval {
	float: left;
	border: 1px solid black;
	border-radius: 5px;
	position: relative;
	margin: 15px;
	padding: 10px;
	width: 300px;
	height: 200px;
}
.approvalbuttons {
	display: block;
	position: absolute;
	bottom: 15px;
}