.theme-light{
	--overlayShadow: rgba(255,255,255,0.6);
	--placeholder: #777;
	--textColor: #333;
	--toolbarBottom: #eee;
	--toolbarBottomShadow: #333;
	--toolbarBottomButton: rgba(0,0,0,0.5);
	--toolbarBottomButtonHover: rgba(0,0,0,0.4);
	--backgroundColor: white;
	--headerText: #2262c6;
	--hrBackground: #f0f2f8;
	--logoColor: #2262c6;
	--searchBox: #f0f2f8;
	--searchBoxText: #9fabbe;
	--headerIcon: #9fabbe;
	--headerIconHover: #2262c6;
	--aside: #2262c6;
	--asideColor: white;
	--createButton: white;
	--createButtonText: #2262c6;
	--listHeaderText: #9fabbe;
	--listHover: #e4eefd;
	--textBox: #f0f2f8;
	--textBorder: #d4d6dc;
	--textBorderError: #eab3b3;
	--textBoxText: #333;
	--textBoxTextDisabled: #555;
	--textBoxTextDisabled2: #ddd;
  --textBoxDisabled2: #c2c4c8;
	--textBoxRequired: red;
	--formTitle: #f0f2f8;
	--formTitleText: black;
	--dropDownText: #333;
	--dropDownHover: #e4eefd;
	--button: #2262c6;
	--buttonText: #fff;
	--buttonHover: #2b80ff;
	--buttonHoverText: #fff;
  --buttonAlt: #333;
  --buttonAltBorder: #333;
	--overlayBlur: rgba(255,255,255,0.8);
	--toolbarBorder: #f0f2f8;
	--toolbarButton: #f0f2f8;
	--toolbarButtonHover: #e4e6eb;
	--toolbarIcon: #9fabbe;
	--editLine: #333;
	--emailDialogBackground: white;
  --dialogHeaderFooter: #efefef;
  --dialogBorder: #eee;
  --SOGFormBackground: #ffafb1;
  --BFIFormBackground: #b0ffb7;
  --GBLFormBackground: #b0d9ff;
}


.theme-dark{
	--overlayShadow: rgba(255,255,255,0.3);
	--placeholder: #777;
	--textColor: #999;
	--toolbarBottom: #555;
	--toolbarBottomShadow: #333;
	--toolbarBottomButton: rgba(0,0,0,0.5);
	--toolbarBottomButtonHover: rgba(0,0,0,0.3);
	--backgroundColor: #333;
	--headerText: #999;
	--hrBackground: #777;
	--logoColor: #999;
	--searchBox: #444;
	--searchBoxText: #999;
	--headerIcon: #777;
	--headerIconHover: #999;
	--aside: #444;
	--asideColor: #999;
	--createButton: #555;
	--createButtonText: #999;
	--listHeaderText: #999;
	--listHover: #555;
	--textBox: #444;
	--textBorder: #555;
	--textBorderError: #eab3b3;
	--textBoxText: #999;
	--textBoxTextDisabled: #555;
	--textBoxTextDisabled2: #555;
  --textBoxDisabled2: #333;
	--textBoxRequired: red;
	--formTitle: #444;
	--formTitleText: #999;
	--dropDownText: #999;
	--dropDownHover: #555;
	--button: #555;
	--buttonText: #999;
	--buttonHover: #777;
	--buttonHoverText: #fff;
  --buttonAlt: #999;
  --buttonAltBorder: #999;
	--overlayBlur: rgba(0,0,0,0.5);
	--toolbarBorder: #555;
	--toolbarButton: #555;
	--toolbarButtonHover: #777;
	--toolbarIcon: #999;
	--editLine: #777;
	--emailDialogBackground: #333;
  --dialogHeaderFooter: #444;
  --dialogBorder: #555;
  --SOGFormBackground: #725757;
  --BFIFormBackground: #426145;
  --GBLFormBackground: #517496;
}

input::placeholder {
	color: var(--placeholder);
}

body {
	margin: 0;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: var(--textColor);
	background-color: var(--backgroundColor);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em 0;
	font-weight: 400;
	line-height: 1.2;
}
h1 {
	font-size: 2em;
}

a {
	color: inherit;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: calc(1em - 2px);
	color: #555;
	background-color: #f0f0f0;
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

@media (min-width: 400px) {
	body {
		font-size: 18px;
	}
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], textarea, select {
	font-size: 18px;
	background-color: var(--textBox);
	border: 0;
	color: var(--textBoxText);
	padding: 7px 6px 6px 6px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 0;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	font-size: 18px;
}
input[type="date"] {
	font-size: 18px;
	background-color: var(--textBox);
	border: 0;
	color: var(--textBoxText);
	padding: 4px 6px 3px 6px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
input[type="text"].input-error, input[type="password"].input-error, input[type="email"].input-error, .input-error {
	border-bottom: 3px red solid;
}
input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="date"]:disabled, textarea:disabled, select:disabled {
	background-color: var(--textBoxDisabled2);
	color: var(--textBoxTextDisabled2);
}

select {
	font-family: 'Open Sans', sans-serif;
	background-color: var(--textBox);
	font-size: 18px;
	border: 0;
	color: var(--textBoxText);
	padding: 7px 6px 6px 6px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
select option {
	font-family: 'Open Sans', sans-serif;
	background-color: #064867;
}

.has-header{
	height: 76px;
}
.has-bottom-toolbar{
	height: 50px;
}

.desktop{
	display: block;
}
.mobile{
	display: none;
}
@media screen and (max-width: 1024px) {
	.desktop{
		display: block;
	}
	.mobile{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
}

input[type="button"], button, input[type="submit"]{
	color: var(--buttonText);
	background-color: var(--button);
	border: 0;
	padding: 10px 15px 10px 15px;
	font-size: 18px;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: button;
	border-radius: 0;
}
input[type="button"].max, button.max, input[type="submit"].max{
  width: 100%;
}
input[type="button"]:hover, button:hover, input[type="submit"]:hover{
	color: var(--buttonHoverText);
	background-color: var(--buttonHover);
}
input[type="button"]:disabled, input[type="button"]:disabled:hover, button:disabled, button:disabled:hover, input[type="submit"]:disabled, input[type="submit"]:disabled:hover{
	color: #bbb;
	background-color: rgb(128, 128, 128);
	background-image: none;
	cursor: auto;
}

h3{
	font-size: 24px;
	font-weight: bold;
	color: var(--headerText);
}
@media (max-width: 768px) {
	h3 {
		font-size: 20px;
	}
}

hr{
	background-color: var(--hrBackground);
	border: 0;
	height: 1px;
}
.overlay{
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	background-color: var(--overlayShadow);
}
.input-overlay{
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	background-color: rgba(0,0,0,0);
}
.overlay2{
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	background-color: var(--overlayShadow);
}
.overlay3{
  position: fixed;
  z-index: 150;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
	background-color: var(--overlayShadow);
}
.sep{
	height: 3px;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.small-print{
	font-size: 14px;
}
.required{
	font-size: 13px;
	color: var(--textBoxRequired);
}
.disabled{
	background-color: var(--formTitle);
	color: var(--formTitleText);
	padding: 5px 0 0 5px;
}


@media screen and (max-width: 768px) {
	.has-header{
		height: auto;
	}
}