:root {
	--color-dark: #003670;
	--color-bg-dark: #19406C; /*#376090;*/
	--color-bg-light: #D4D3CE;
	--color-bg-semi-light: #949184;
	--color-contrast-1: #FDDC22; /*#FFDA05;*/
	--color-contrast-2: #B42748;


	/*--color-dark: #062446;
	--color-bg-dark: #416B9B;
	--color-bg-light: #F7F2D4;
	--color-contrast-1: #FFDA05;
	--color-contrast-2: #AE425B;*/

	--color-overlay-bg: rgba(0,0,0,0.8);
	--color-overlay-bg-light: rgba(0,0,0,0.3);
	--color-overlay-image: rgba(0,0,0,0.3);
	--color-overlay-text: white;

	--color-settings-bg: #D4D3CE;
	--color-settings-underlay: rgba(0,0,0,0.5);

	--color-input-background: white;

	--color-contrast-red: #AE425B;
	--color-contrast-green: #008000;

	--font-primary: 'Urbanist', Verdana, sans-serif;

	/* #34485E */
}

#overlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-overlay-bg); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	/*cursor: pointer; /* Add a pointer on hover */
	overflow-y:auto;
}

#overlayText {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--font-primary);
	font-size: 50px;
	color: var(--color-overlay-text);
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);

	h2 { font-size: 25px; }
	h3 { font-size: 20px; }
	p, a, td { font-size: 15px; }

}

input:not(:focus):not(:placeholder-shown):invalid {
	border-color: var(--color-contrast-2);
	border-width: 3px;
}

/*input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;
}*/

/*input:not(:focus):not(:placeholder-shown):valid {
	border-color: var(--color-valid);
}*/

.settings {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-settings-underlay); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	/*cursor: pointer; /* Add a pointer on hover */
	overflow-y:auto;
}

.settingsWindow {
	position: absolute;
	padding: 15px;
	/*width: 90%;*/
	/*height: 95%;*/
	top: 25px;
	left: 3%;
	right: 3%;
	border-style: solid;
	border-radius: 25px;
	border-width: 3px;
	border-color: var(--color-dark);
	background-color: var(--color-settings-bg);
	/*transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);*/
}

.import {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-settings-underlay); /* Black background with opacity */
	z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
	/*cursor: pointer; /* Add a pointer on hover */
	overflow-y:auto;
}

.importWindow {
	position: absolute;
	padding: 15px;
	/*width: 90%;*/
	/*height: 95%;*/
	top: 40px;
	left: 6%;
	right: 6%;
	border-radius: 25px;
	background-color: var(--color-settings-bg);
	/*transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);*/
}


body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
	font-family: var(--font-primary);
	color: var(--color-dark);
	background-color: var(--color-bg-light);
}

h1, h2, h3, h4 {
	margin-top: 15px;
	margin-bottom: 5px;
	/*font-family: 'Cinzel', Helvetica, serif;*/
	font-family: var(--font-primary);
	/*border-bottom: thin dotted;*/
	text-transform: uppercase;
	font-weight: normal;
}

h1 {font-size: 32px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}
h4 {font-size: 17px;}

.app_name {
	text-transform: none;
}

p {
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: var(--font-primary);
	font-size: 17px;
}

a[href] {
	text-decoration: none;
	color: var(--color-contrast-2);
}

a[href]:hover {
	color: var(--color-bg-dark);
	/*font-weight: bold;*/
}

a[href].subdued {
	color: var(--color-bg-dark);
	text-decoration: underline;
}

a[href].subdued:hover {
	color: var(--color-contrast-2);
	font-weight: normal;
}

.header {
	width: 98vw;
	display: grid;
	grid-template-columns: auto fit-content(200px);
}

.hdr_title {
	grid-column-start: 1;
	place-self: start start;
	margin-top: -5px;
	align-content: stretch;
}

/*.hdr_title h1 {
	font-weight: normal;
	text-transform: uppercase;
}*/

.hdr_user {
	grid-column-start: 2;
	place-self: start end;
}

.user {
	display: inline-block;
	white-space: nowrap;
	float: right;
	border-radius: 13px;
	background: var(--color-bg-light);
	margin-top: 5px;
	margin-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 5px;
	padding-right: 15px;
}

.user a {
	font-size: 15px;
	display: block;
	text-align: center;
	/* vertical-align: middle; */
	float: right;
	color: var(--color-bg-dark);
}

.user img {
	height: 20px;
	margin-right: 10px;
	float: left;
	vertical-align: middle;
}

.dropdown {
	position: absolute;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--color-bg-light);
	z-index: 1;
	right: 0;
	top: 26px;
	width: 100%;
	border-radius: 5px;
}

.dropdown-content a {
	color: var(--color-dark);
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	padding-top: 3px;
	padding-bottom: 3px;
	text-decoration: none;
	display: block;
	width: 100%;
}

.dropdown-content a:hover {background-color: var(--color-contrast-1); font-weight: normal;}
.dropdown:hover .dropdown-content {display: block;}

.footer {
	display: flex;
	flex-wrap: wrap;

	/*display: block;*/
	margin-top: auto;
	margin-left: -15px;
	margin-right: -15px;
	/*padding: 15px 30px;  this was added just now */
	width: 100vw;
	/*height: 50px;*/
	background-color: var(--color-bg-dark);
	color: var(--color-bg-light);
	/*font-size: 17px;*/
}

.footer div.left {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
	padding: 15px 30px;
}

.footer div.right {
	text-align: right;
	margin-right: 0;
	margin-left: auto;
	padding: 15px 30px;
}

.footer a {
	/*display: block;*/
	/*margin: 20px 30px;  */
	/*padding: 15px 30px;*/
	/*text-align: right;*/
	/*vertical-align: middle;  */
	font-size: 17px;
	text-decoration: none;
}

.footer a[href]:link, .footer a[href]:visited {
	color: var(--color-bg-light);
	cursor: pointer;
}

.footer a[href]:hover {
	color: var(--color-contrast-1);
}

.note {
	/*display: block;*/
	/*float: left;*/
	margin: 15px;
	align-items: left;
	text-align: left;
	font-size: 15px;

	text-indent: -40px;
	padding-left: 40px;;
}

.centered_message {
	margin: 20px auto;
	text-wrap: balance;
	text-align: center;
	max-width: 70%;
}

.app_display {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 15px;
}

.app_tile_container {
	position: relative;
	overflow: hidden;
	/*display: inline-block;
	max-width: 20%;*/
	width: 300px;
	height: 200px;
	border-style: solid;
	border-width: 3px;
	border-radius: 20px;
	border-color: var(--color-bg-dark);
	margin: 15px;
}

a.app_tile {
	position: relative;
	cursor: pointer;
	display: inline-block;
	/*padding: 20px;*/
	box-sizing: border-box;
	height: 100%;
	width: 100%;

	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-dark);

	text-decoration: none;
	padding: 15px;
}

a.app_tile:hover, a.app_tile:hover * {
	background-color: var(--color-bg-dark);
	color: var(--color-bg-light);
}



.app_tile p {
	font-family: var(--font-primary);
	font-size: 15px;
	text-align: justify;
}

.app_tile_overlay {
	position: absolute;
	/*cursor: pointer;*/
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-overlay-bg-light);
	color: var(--color-overlay-image);
	font-weight: bold;
	z-index: 2;

}

.app_tile_overlay_restricted {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	display: flex;
	justify-content: center;
	align-items: top;
	background-color: var(--color-contrast-2);
	opacity: 0.5;
	color: var(--color-dark);

	font-weight: bold;
	font-family: var(--font-primary);
	font-size: 25px;

	z-index: 2;
}

.app_tile:hover ~ .app_tile_overlay {
	background-color: var(--color-bg-dark);
	color: var(--color-bg-light);
	opacity: 0.5;
}

.app_tile:hover ~ .app_tile_overlay_restricted {
	background-color: var(--color-bg-dark);
	color: var(--color-contrast-1);
	opacity: 0.5;
}

/*.app_unpaid, .app_unpaid * {
	background-color: var(--color-bg-light);
	color: var(--color-dark);
}

.app_unpaid:hover, .app_unpaid:hover * {
	background-color: var(--color-bg-light);
	color: var(--color-dark);
}

.app_restricted, .app_restricted * {
	background-color: var(--color-contrast-2);
	color: var(--color-dark);
	opacity: 0.3;
}

.app_restricted:hover, .app_restricted:hover * {
	background-color: var(--color-contrast-2);
	color: var(--color-dark);
	opacity: 0.5;
}*/

.toggle_switch {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 25px;

	/*font-family: var(--font-primary);
	font-size: 17px;
	color: var(--color-dark);*/
}

.toggle_switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 9px;
	background-color: var(--color-bg-dark);
	-webkit-transition: .4s;
	transition: .4s;
}

.toggle_slider:before {
	position: absolute;
	content: "";
	/*height: 25px;*/
	width: 31px;
	left: 4px;
	top: 4px;
	bottom: 4px;
	border-radius: 6px;
	background-color: var(--color-bg-light);
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .toggle_slider {
	background-color: var(--color-bg-dark);
}

input:disabled + .toggle_slider {
	background-color: var(--color-bg-semi-light);
}

input:checked + .toggle_slider:before {
	-webkit-transform: translateX(31px);
	-ms-transform: translateX(31px);
	transform: translateX(31px);
}

input, select, option {
	/*appearance: none;*/
	vertical-align: middle;
	border-color: var(--color-bg-dark);
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	height: 26px;
	padding: 0 5px;
	font-family: var(--font-primary);
	font-size: 17px;
	color: var(--color-dark);
	background-color: var(--color-input-background);
}

input[type="radio"] {
	margin: 0 10px;
}

pre {
	white-space: pre-wrap;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: "Courier New", sans-serif;
	font-size: small;
	color:  var(--color-dark);
	width: 96vw;
}

table {
	margin-top: 5px;
	margin-bottom: 15px;
	/*font-size: small;*/
	font-family: var(--font-primary);
	font-size: 17px;
	border-collapse: separate;
	border-spacing: 15px 5px;
}

th {
	text-align: left;
	font-family: var(--font-primary);
	border-bottom-style: thin solid;
}

td.engine {
	font-family: var(--font-primary);
}

td.modified {
	margin-left: 10px;
	font-family: var(--font-primary);
}

form {
	font-family: var(--font-primary);
	color:  var(--color-dark);
}

/*select {
	font-family: var(--font-primary);
	font-size: small;
	color:  var(--color-dark);
}*/

textarea {
	width: 98%;
	box-sizing: border-box;
	font-family: var(--font-primary);
	font-size: 17px;
	padding: 5px;
	color: var(--color-dark);
}

label {
	font-family: var(--font-primary);
	/*font-size: small;*/
}



/*button, .link-button {
	margin-top: 5px;
	height: 25px;
	font-size: 12px;
	background-color: var(--color-bg-dark);
	color: var(--color-bg-light);
}*/

/*label.login {
	display: inline-block;
	width: 115px;
}*/

.login_hdr {
	width: fit-content;
	margin: auto;
	padding: 30px 5px 5px;
}

.login_block {
	width: fit-content;
	margin: auto;
	padding: 20px 5px;
}

.login_block p {
	display: block;
	width: fit-content;
	margin: auto;
	font-family: var(--font-primary);
	font-size: 17px;
}

.login {
	display: block;
	/*align-content: center;*/
	/*margin: 20px 20vw;*/
	width: fit-content;
	margin: auto;
	padding: 30px 30px 20px;
	border-radius: 30px;
	background-color: var(--color-contrast-1);
}

.login div {
	display: block;
	align-content: center;
	width: fit-content;
	margin: auto;
}

.login a, .login p {
	text-align: center;
	width: fit-content;
	padding-top: 10px;
	margin: auto;
	font-family: var(--font-primary);
	font-size: 17px;
	color: var(--color-dark);
}

.login table {
	width: fit-content;
	margin: auto;
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-dark);
}

.login input {
	border: none;
	border-radius: 5px;
	height: 26px;
	width: 20vw;
	padding: 0 5px;
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-dark);
}

.unauthorized {
	display: block;
	/*align-content: center;*/
	/*margin: 20px 20vw;*/
	width: fit-content;
	margin: auto;
	padding: 50px 50px 30px;
	border-radius: 30px;
	background-color: var(--color-contrast-2);
}

.unauthorized h1, .unauthorized h2, .unauthorized h3 {
	color: var(--color-contrast-1);
	width: fit-content;
	margin: auto;
	padding-bottom: 30px;
}

.unauthorized p, .unauthorized a {
	text-align: center;
	width: fit-content;
	padding-top: 15px;
	margin: auto;
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-bg-light);
}

/*.login */
button {
	box-sizing: border-box;
	display: block;
	border: solid;
	border-width: 2px;
	border-color: var(--color-bg-dark);
	margin: auto;
	width: fit-content;
	padding-left: 25px;
	padding-right: 25px;
	height: 30px;
	border-radius: 15px;
	color: var(--color-bg-light);
	background-color: var(--color-bg-dark);
	font-family: var(--font-primary);
	font-size: 20px;
	text-decoration: none;
}

button:disabled, button:disabled:hover {
	background-color: var(--color-bg-light);
	color: var(--color-contrast-red);
}

/*.login */
a.button {
	box-sizing: border-box;
	display: flex;
	border: solid;
	border-width: 2px;
	border-color: var(--color-bg-dark);
	margin: auto;
	width: fit-content;
	padding: 0px 25px;
	align-items: center;
	vertical-align: middle;
	/*padding-left: 25px;
	padding-right: 25px;*/
	height: 30px;
	border-radius: 15px;
	color: var(--color-bg-light);
	background-color: var(--color-bg-dark);
	font-family: var(--font-primary);
	font-size: 20px;
	text-decoration: none;
}

/*.login */
button:hover, a.button:hover {
	cursor: pointer;
	color: var(--color-bg-dark);
	background-color: var(--color-bg-light);
	border: solid;
	border-width: 2px;
	border-color: var(--color-bg-dark);
}

.user_settings td {
	padding: 10px 40px;
}

input[type="number"] {
	width: 150px;
}

.run {
	background-color: var(--color-contrast-green);
	border-color: var(--color-contrast-green);
}

.red {
	background-color: var(--color-contrast-red);
	border-color: var(--color-contrast-red);
}

.plottime {
	margin-bottom: 5px;
	font-family: var(--font-primary);
	font-size: small;
}

.error {
	color: var(--color-contrast-red);
	font-size: 10px;
}

.plot {
	/*height: 15px;*/
	width: 1000px;
}

.user {
	position: fixed;
	top: 0;
	right: 0;
	float: right;
	/*width: 300px;
	font-size: 10px;
	color: #666666;*/
}

.navIcon {
	height: 15px;
	width: 20px;
	padding: 0;
	/*background-color: #666666;*/
}



.topnav {
	margin-left: -15px;
	margin-right: -15px;
	overflow: hidden;
	/*background-color: #333;*/
	background-color: var(--color-bg-dark);
	/*background-color: #4d4d4d;*/
}

.topnav a {
	float: left;
	display: block;
	color: var(--color-bg-light);
	text-align: center;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	background-color: var(--color-bg-light);
	color: var(--color-bg-dark);
}

.topnav a.active {
	background-color: var(--color-bg-dark);
	color: var(--color-bg-light);
}

.topnav a.active:hover {
	background-color: var(--color-bg-light);
	color: var(--color-bg-dark);
}

.topnav a.delete {
	background-color: var(--color-contrast-2);
	color: var(--color-bg-light);
}

.topnav .icon {
	display: none;
}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}

	.footer div.right {
		text-align: left;
		margin-left: 0;
		margin-right: auto;
	}
}