:root {
	--pageBase: white;  
	--titleText: white; 
	--pageText: white; 
	--sectionBase: white;  
	--formText: white;
	--tableText: white;
	--errorText: white;
}

themeOriginalDark {  
	--pageBase: black;  
	--titleText: gold; 
	--pageText: white; 
	--sectionBase: black;  
	--formText: white;
	--tableText: white;
	--errorText: red;
}

themeLightBright {
	--pageBase: whitesmoke;  
	--titleText: darkslateblue; 
	--pageText: white; 
	--sectionBase: lightgray;  
	--formText: darkslateblue;
	--tableText: black;
	--errorText: red;
}

themeNeon {
	--pageBase: black;  
	--titleText: magenta; 
	--pageText: yellow; 
	--sectionBase: teal;  
	--formText: purple;
	--tableText: orange;
	--errorText: white;
}

themeSubdued {
	--pageBase: tan;  
	--titleText: darkblue; 
	--pageText: darkgray; 
	--sectionBase: khaki;  
	--formText: olive;
	--tableText: black;
	--errorText: red;
}

themeGreen {
	--pageBase: lightgreen;  
	--titleText: royalblue; 
	--pageText: white; 
	--sectionBase: lightgray;  
	--formText: forestgreen;
	--tableText: yellow;
	--errorText: red;
}


body {
	font: 14px Times New Roman, sans-serif;
	background-image: url('');
	background-color: var(--pageBase);
}

h0 {
	font: 32px Times New Roman, sans-serif;
	text-align: center;
}

h1 {
	font: 18px Times New Roman, sans-serif;
}

h2 {
	font: 24px Times New Roman, sans-serif;
	color: black;
}

h3 {
	font: 16px Times New Roman, sans-serif;
}

h4 {
	padding-left: 10px;
	font: 12px Times New Roman, sans-serif;
}

.errorMsg {
	text-align: center; 
	vertical-align: top; 
	
	font: 22px Helvetica;

	color: var(--errorText);
}

#pageHeader {
	display: flex;
	flex-flow: row;
}

#titleWrapper {
	width: 100%;
	margin: 0 auto;
	background: var(--sectionBase);
	text-align: center;

	padding-top: 10px;
	padding-left: 20px;

	display: flex;
	justify-content: space-between;
}

#titleWrapper a {
	font: 36px Times New Roman, sans-serif;
	padding: 10px;
	text-decoration: none; 

	color: var(--titleText);
	background-color: transparent;		
}

#titleWrapper img {
	height: 40px;
	width: 40px;
}

#userIcon {
	height: 50px;
	width: 100px;
}

#userIcon a {
	text-align: center; 
	font: 14px Times;
}

#userIcon img {
	background-color: gold;
}

#username {
	width: 100px;
	color: var(--titleText);
}

#userNameDiv {
	width: 100px;
	color: var(--titleText);
}

#userIconLink {
	color: var(--titleText);
}

#agentNameDiv {
	width: 50px;
	color: red;
}

#daylistTitleBar {
	display: flex;
	flex-direction: row;

	justify-content: space-between;

	vertical-align: top;

	padding: 10px;

	border: 1px solid goldenrod;
}

#daylistContent {
}

#taskTableDiv {
	background-color: var(--pageBase);
}

#taskTableDiv table {
	width: 95%;

	background: var(--pageBase);
	color: var(--tableText);

	border-collapse: collapse;
}

#taskTableDiv table th {
	vertical-align: top;

}

#taskTableDiv table td {
	text-align: center;
	padding: 10px;
	color: white;
}

.itemDate {
	font: 16px Helvetica;
	color: white;
}

.itemName {
	font: 24px Helvetica;
}

.itemControl {
	font: 14px Times;
}

.itemNameDone {
	text-align: center; 
	text-decoration: line-through; 
	
	font: 22px Helvetica;
}

#navArrowDiv {
	padding: 10px; 
	
	font: 32px Helvetica; 
	
	background: var(--sectionBase); 
	color: var(--titleText); 
	
	border: 1px solid var(--titleText); 
	
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	vertical-align: top;
}

#navArrowHistDiv {
	padding: 10px; 
	
	font: 32px Helvetica; 
	
	background: var(--sectionBase); 
	color: var(--tableText); 
	
	border: 1px solid var(--titleText); 
	
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	vertical-align: top;
}

#dateRefDetailsTable {
	float: right;
	width: 750px;
	overflow: auto;
}

#dateRefDetailsTable table {
	border: 0;
}

#dateRefDetailsTable table th {
	background: #EEE;
	font-weight: 600;
	padding: 10px 10px;
	text-align: left;
}

#dateRefDetailsTable table tbody {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0px;
}

#dateRefDetailsTable table td {
	background: blue;
	color: yellow;
	padding: 5px 10px;
	text-align: left;
}

#refsTable {
	float: left;
	width: 100%;
	overflow: auto;
}

#refsTable table {
	border-collapse: separate;
	border-spacing: 1px;
	background: #CCC;
}

#refsTable table th {
	background: #EEE;
	font-weight: 600;
	padding: 10px 20px;
	text-align: center;
}

#refsTable table tbody {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0px;
}

#refsTable table td {
	background: #FFF;
	padding: 5px 5px;
	text-align: left;
}

#statsTable {
	float: left;
	overflow: auto;
}

#statsTable table {
	border-collapse: separate;
	border-spacing: 1px;
	background: #CCC;
	padding: 1px;
}

#statsTable table th {
	background: #EEE;
	font-weight: 600;
	padding: 10px 20px;
	text-align: center;
}

#statsTable table tbody {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0px;
}

#statsTable table td {
	background: #FFF;
	padding: 5px 10px;
	text-align: center;
}


#formWrapper {
	padding-left: 30px;
	width: 700px;
	position: relative;
	background: blue;
}


#factoryInfo {
	position: relative;
	top: 0;
	left: 0;
}

#factoryInfo table {
	width: 50%;
	border-collapse: separate;
	border-spacing: 1px;
	background: #CCC;
}

#factoryInfo table th {
	padding: 10px 10px;
    font: 16px "Lucida Grande", Helvetica, Arial, sans-serif;
    text-align: center;
}


#factoryInfo table tbody {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0px;
}

#factoryInfo table td {
	background: #FFF;
	padding: 10px 10px;
	text-align: left;
	font: 14px Times New Roman, sans-serif;
}

#factoryList {
	width: 300px;
	font: 12px Times New Roman, sans-serif;
}
	
#eventPopupForm, #imageUploader {
	width: 100%;

	font: 16px Verdana;
	font-weight: 800;

}

#eventForm {
	background-color: darkslategrey;
	color: antiquewhite;
}

#eventFlds {
	padding: 20px;
}

.eventField {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
}

.eventFieldInput {
	font: 18px Times;
}

.eventNotesField {
	font: 16px Times;
}

#imageForm {
	background-color: darkslategrey;
	color: antiquewhite;
}

#imageFlds {
	border: none;
	display: flex; 
	flex-direction: row;
	justify-content: space-between;
}


.ui-dialog 
.ui-dialog.event-dialog .ui-dialog-titlebar-close {
	display: none;
}

#parentBar {
	background-color: gold; 
	color: black; 
	font: 32px Helvetica; 
	font-weight: 800;

	text-align: center; 
	height: 50px; 
	width: auto;
}

#loginWrapper {
	background-color: wheat;

	display: flex;
	flex-direction: row;

	justify-content: center;
}

#loginInfo {
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}


#etName {
	display: flex; 
	flex-flow: row; 
	justify-content: space-between; 
	align-items: center; 
	padding: 5px; 
	background-color: antiquewhite; 
	border: 1px solid black;
}

#daylistPane {
	background: var(--pageBase);
	color: var(--titleText);

	padding-left: 20px;
	width: 100%;
}

#daylistContent {
	width: 100%;
}


#lifeAreasTable {
	width: 100%;
}

#lifeAreasTable table {
	width: 90%;
	border-collapse: collapse;
}

#lifeAreasTable td {
	font: 28px Helvetica;
	font-weight: bold;

	padding: 25px;
}

#objectivesTable {
	width: 100%;
}

#objectivesTable table {	
	width: 90%;
	border-collapse: collapse;
}

#objectivesTable td {
	font: 16px Helvetica;
	font-weight: bold;

	padding: 10px;
}

.daylistActionButton {
	height: 40px;
	width: 40px;

	font: 24px Helvetica;
	font-weight: 600;

	color: white;
	background: darkslateblue;

	vertical-align: center;
}

.editorActionButton {
	padding-left: 20px;
	padding-right: 20px;

	height: 50px;

	font: 20px Helvetica;
}

.editorCancelButton {
	padding-left: 40px;
	padding-right: 40px;

	height: 50px;

	font: 20px Helvetica;
	font-weight: 800;
}

.clearButton {
	background-color: var(--pageBase);
	color: var(--pageBase);
}

#countdownTable {
	width: 90%;
	padding-left: 30px;
	padding-top: 30px;
}

.countdownCell {
	width: 15%; 
	padding: 5px; 

	font: 56px Helvetica; 
	text-align: center;

	background-color: gold; 
	color: black; 
	
	border: 3px solid darkblue;
}

.countdownLabel {
	font: 14px Helvetica; 
	text-align: center;

	color: white;
}

.navTabDiv {
	width: 100%;

	padding-top: 20px;
	padding-bottom: 20px;

	display: flex;
	flex-direction: row;

	justify-content: space-between;

	background-color: var(--pageBase);
}

.navTabs {
	width: 500px;
	height: 40px;

	padding: 5px;

	border-radius: 25px;

	font: 32px Helvetica;
	font-weight: 800;

	background: gray;
	color: white;

	text-align: center;
	vertical-align: center;
}

.navTabs a {
	text-decoration: none;

	color: white;
}

#addTaskDialog {
	display: flex;
	justify-content: flex-end;

	padding-right: 40px;
}

#addTaskChoice {
	font: 24px Helvetica;
}

#addTaskChoice select {
	height: 100px;
}

#sortDialog {
	display: flex;
	justify-content: flex-end;

	padding-right: 40px;
}

#sortChoice {
	font: 24px Helvetica;
}

#sortChoice select {
	height: 100px;
}

#daylistDateSelector-form {
	background: black;
	text-align: center;
}

.daylistDateDialog .ui-dialog-titlebar {
	background: gold;
	color: black;
	text-align: center;
	font: 18px Helvetica;
}

.daylistDateDialog .ui-dialog-content {
	background: black;
	text-align: center;
	font: 24px Helvetica;
}

.daylistDateDialog .ui-dialog-buttonpane {
	background: black;
	font: 18px Helvetica;

	text-align: center;
}

.daylistDateDialog .ui-dialog-buttonpane button {
	padding: 5px;
}


#areaPopup {
	width: 100%;

	overflow: auto;
}

#areaForm {
	width: 700px;
	height: auto;

	font: 16px Helvetica;
	font-weight: 800;

	background-color: var(--pageBase);
	color: var(--formText);

	border: 2px solid var(--titleText);
}

#objPopup {
	width: 100%;

	overflow: auto;
}

#objForm {
	width: 700px;
	height: auto;

	font: 16px Helvetica;
	font-weight: 800;

	background-color: var(--pageBase);
	color: var(--formText);

	border: 2px solid var(--titleText);
}

#completionPopup {
	font: 16px Helvetica;
	font-weight: 800;
}

#compForm {
	background-color: var(--pageBase);
	color: var(--formText);

	border: 2px solid var(--titleText);

	margin: 0 auto;
	width: 100%;
}

#taskCompStatus {
	font: 16px Helvetica;
	color: red;
}

.itemName h2 {
	font: 24px Helvetica;
	color: red;

	padding-top: 10px;
}

#taskPopup {
	width: 100%;

	display: flex;
	flex-direction: column;

	align-items: center;
}

#taskForm {
	background-color: var(--pageBase);
	color: var(--formText);
	padding: 20px;

	width: 700px;
	height: auto;

	border: 2px solid var(--titleText);

	font: 16px Helvetica;
}

.taskFormTitle {
	font: 24px Times New Roman, sans-serif;
	color: var(--titleText);

	padding: 10px;

	width: 80%;
	text-align: center;
}

#taskHistoryTable {
	width: 90%;

	background: var(--pageBase);

	font: 22px Helvetica;	
}

#taskHistoryTable th {
	padding: 10px;
}

#taskHistoryTable td {
	font: 18px Helvetica;	
	padding: 5px;
}

.taskField {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 5px;
}

.taskFieldInput {
	font: 20px Helvetica;

	padding: 5px;
}

.taskFieldSelect {
	font: 20px Helvetica;

	padding: 5px;
}

#gameplanPane {
	background: var(--pageBase);
	color: var(--pageText);

	width: 100%;

	padding-left: 20px;

}

#gameplanContent {
	text-align: center;
}

#objectivesEditor {
	display: flex;
	flex-direction: column;

	align-items: center;
}


#gameplanLists{
	display: flex;
	flex-direction: row;

	justify-content: space-between;

	width: 95%;
}

.gameplanTitle {
	font: 28px Helvetica; 
	color: var(--titleText);
	
	border: 1px solid var(--titleText); 
	padding: 5px;

}

#menuDiv {

	display: flex;
	flex-direction: row;
}

#hamburgerMenu {
	width: 150px; 

	display: flex; 
	flex-direction: column; 
	align-items: flex-start;

	margin-left: 20px; 
	background: var(--pageBase);

	position: absolute;
	transition: transform 500ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}

.slide-in {
	position: absolute;
	z-index: 2;

	animation: slide-in 1.0s forwards;
    -webkit-animation: slide-in 1.0s forwards;
}

.slide-out {
	position: absolute;
	z-index: 10;

	animation: slide-out 1.0s forwards;
    -webkit-animation: slide-out 1.0s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-200%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-200%); }
}

.hamburgerMenuItem {
	width: 250px;
	height: 35px;

	padding: 10px;

	font: 24px Helvetica;
	font-weight: 600;

	background: gray;

	text-align: center;
	vertical-align: center;

	border: 1px solid gold;
}

.hamburgerMenuItem a {
	text-decoration: none;

	color: white;
}

#themesMenu {
	display: flex;

	flex-direction: column;

	margin-left: 150px; 
	background: var(--pageBase);
}


.ui-dialog-titlebar {
	color: yellow;
}

.ui-dialog-title {
	color: black;
}

.ui-dialog-titlebar button {
	display: none;
}

#versionBar {
	padding: 20px;
	float: left;
	text-align: left;

	color: var(--titleText);
}

#retroPane {
	padding-left: 75px;
}

#retroPane select {
	font: 24px Helvetica;

	background: var(--sectionBase);
	color: var(--titleText);
}


/* media query overrides */

@media screen and (max-device-width: 768px) {
	/* make fonts larger for phones */

	#titleWrapper a {
		font: 52px Times; 
	}

	#titleWrapper img {
		height: 60px;
		width: 60px;
	}

	.hamburgerMenuItem {
		font-size: 36px;
		height: 70px;
	}

	.daylistActionButton {
		font: 42px Helvetica;
		height: 60px;
	}

	#navArrowDiv {
		font: 48px Helvetica;
	}

	#userNameDiv {
		font-size: 20px;
	}

	#taskTable td {
		height: 90px;

		font: 28px Helvetica;
	}

	.itemControl {
		font: 28px Helvetica;
		width: 75px;
	}

	.itemName a {
	  font: 42px Helvetica;
	}

	.itemNameDone {
		font: 42px Helvetica;
	}

	h2 {
		font-size: 36px;
	}

	.navTabs {
		padding-bottom: 20px;
	}

	.navTabs a {
		font-size: 40px;
	}

	#objectivesTable td {
		padding: 25px;
	}

	#objectivesTable a {
		font: 36px Helvetica;
	}

	.lifeareaBox {
		font: 36px Helvetica;
	}

	.taskField {
		font: 24px Helvetica;
	}

	.taskFieldInput {
		font: 26px Helvetica;
	}

	#compActions button {
		font-size: 32px;
	}
}

.objectiveTaskBar {
	text-align: center; 
	vertical-align: top; 
	
	width: 85%; 
	
	border: 2px solid var(--sectionBase); 
	
	color: var(--pageText);
}

#newCountdownFormDiv {
	background: var(--pageBase);
	color: var(--pageText);

	font: 16px Helvetica;
}

.ui-dialog-buttonset {
	text-align: right;
}

.ui-dialog-buttonset button {
	font: 32px Helvetica;
	width: 100px;
	height: 30px;
}