/*** AVENIR NEXT ***/

@font-face {
	font-family: "StandardFontRegular";
	src: url("css/fonts/AvenirNext/AvenirNext-Regular.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNextRegular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontRegular";
	src: url("/css/fonts/AvenirNext/AvenirNext-Medium.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNextMedium") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontLight";
	src: url("/css/fonts/AvenirNext/AvenirNext-UltraLight.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-UltraLight.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-UltraLight.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-UltraLight.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-UltraLight.svg#AvenirNextUltraLight") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontLight";
	src: url("/css/fonts/AvenirNext/AvenirNext-Regular.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNextRegular") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontBold";
	src: url("/css/fonts/AvenirNext/AvenirNext-Medium.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-Medium.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNextMedium") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "StandardFontBold";
	src: url("/css/fonts/AvenirNext/AvenirNext-Bold.eot");
	src: url("/css/fonts/AvenirNext/AvenirNext-Bold.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Bold.woff") format("woff"),
			 url("/css/fonts/AvenirNext/AvenirNext-Bold.ttf") format("truetype"),
			 url("/css/fonts/AvenirNext/AvenirNext-Bold.svg#AvenirNextBold") format("svg");
	font-weight: bold;
	font-style: normal;
}



/*** HANDWRITTEN FONT ***/
@font-face {
	font-family: "HandwritingRegular";
	src: url("/css/fonts/Ichiro/ichiro.woff2") format("woff2"),
			 url("/css/fonts/Ichiro/ichiro.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}



/*** APPLE SYSTEM FONT - MIMIC ***/
@font-face {
	font-family: "AppleSystemRegular";
	src: url("/css/fonts/OpenSans/OpenSans-Regular.eot");
	src: url("/css/fonts/OpenSans/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/OpenSans/OpenSans-Regular.woff") format("woff"),
			 url("/css/fonts/OpenSans/OpenSans-Regular.ttf") format("truetype"),
			 url("/css/fonts/OpenSans/OpenSans-Regular.svg#OpenSansRegular") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "AppleSystemBold";
	src: url("/css/fonts/OpenSans/OpenSans-Semibold.eot");
	src: url("/css/fonts/OpenSans/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"),
			 url("/css/fonts/OpenSans/OpenSans-Semibold.woff") format("woff"),
			 url("/css/fonts/OpenSans/OpenSans-Semibold.ttf") format("truetype"),
			 url("/css/fonts/OpenSans/OpenSans-Semibold.svg#OpenSansBold") format("svg");
	font-weight: bold;
	font-style: normal;
}
html {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

body {
	height: 100%;
	overflow-y: auto;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	
	pointer-events: none;
	
	background-color: hsl(0, 0%, 100%);

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, p, div, table, tr, td, ul, li, textarea, input {
	font-family: "StandardFontRegular", "Arial", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: hsl(0, 0%, 0%);
	font-size: 20px;
	letter-spacing: 0px;
	font-style: normal;
	font-weight: normal;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
	pointer-events: none;
}

p, div, table, tr, td, ul {
	position: relative;
}

div, td {
	font-size: 0px;
}

div, p, img {
	box-sizing: border-box;
}

a, .standardView a:hover {
	color: hsl(203, 100%, 35%);
	text-decoration: none;
	pointer-events: auto;
}

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
}

svg {
	pointer-events: none;
}

div.debugPanel {
	position: fixed;
	z-index: 999;
	right: 0px;
	top: 0px;
	background-color: hsla(0, 0%, 0%, 0.85);
	padding: 10px;
}

div.debugPanel p {
	font-size: 12pt;
	line-height: 135%;
	color: hsl(135, 100%, 65%);
}

::-webkit-scrollbar { /* hide scrollbar in windows chrome */
	width: 0px;  /* remove scrollbar space */
	background: transparent;  /* optional: just make scrollbar invisible */
}

div { /* try to hide scrollbar in IE */
	-ms-overflow-style: none; /*-ms-autohiding-scrollbar;*/
}
.text {
	color: hsl(0, 0%, 0%);
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	line-height: 135%;
}

.impact {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 28px;
}

.textFontBold {
	font-family: "StandardFontBold", "Arial", sans-serif;
}

.large {
	font-size: 24px !important;
	letter-spacing: 1px !important;
}

.mediumSmall {
	font-size: 13pt !important;
}

.small {
	font-size: 11pt !important;
}

.smaller {
	font-size: 10pt !important;
}

.altColor {
	color: hsl(0, 0%, 0%) !important;
}

.vividColor {
	color: hsl(0, 100%, 50%) !important;
}

.black {
	color: hsl(0, 0%, 0%) !important;
}

.gray {
	color: hsl(0, 0%, 50%) !important;
}

.blue {
	color: hsl(195, 100%, 50%) !important;
}

.dim {
	color: hsla(0, 0%, 100%, 0.65) !important;
}

.altDim {
	color: hsla(0, 0%, 0%, 0.55) !important;
}

.error {
	color: hsl(0, 100%, 40%) !important;
	font-weight: bold;
}

/*
.groupHead {
	color: hsl(195, 100%, 60%);
	font-size: 25px;
	letter-spacing: 1px;
}

.listHead {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 25px;
	letter-spacing: 1px;
	color: hsl(195, 100%, 60%);
	margin-top: 50px;
}

.listHead:first-child {
	margin-top: 0px;
}
*/
/*** STANDARD BUTTON ***/
.button, .buttonLarge, .buttonSmall {
	display: inline-block;
	vertical-align: top;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 266%; /*48px;*/
	/*letter-spacing: 0px;*/
	color: hsl(0, 0%, 100%);
	padding: 0px 16px;
	border-radius: 5px;
	background-color: hsl(203, 100%, 40%);
	border: solid 1px hsl(203, 100%, 40%);
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
}

.standardView .button:hover, .standardView .buttonLarge:hover, .standardView .buttonSmall:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 50%);
	border: solid 1px hsl(203, 100%, 50%);
}

.phoneView .button {
	font-size: 16px;
	padding: 0px 14px;
}

.buttonLarge {
	font-size: 20px;
	padding: 0px 18px;
}

.phoneView .buttonLarge {}

.buttonSmall {
	font-size: 15px;
	padding: 0px 13px;
}

.phoneView .buttonSmall {
	font-size: 14px;
	padding: 0px 12px;
}



/* ROUND */
.buttonRound, .buttonRoundLarge, .buttonRoundSmall {
	border-radius: 100px; /* overdo it so round works with all sizes */
	padding: 0px 22px;
}

.phoneView .buttonRound {
	padding: 0px 20px;
}

.buttonRoundLarge {
	padding: 0px 24px;
}

.phoneView .buttonRoundLarge {
	padding: 0px 22px;
}

.buttonRoundSmall {
	padding: 0px 18px;
}

.phoneView .buttonRoundSmall {
	padding: 0px 16px;
}



/* COLORS */
.buttonLightBlue {
	color: hsl(198, 65%, 15%);
	background-color: hsl(198, 80%, 80%);
	border-color: hsl(198, 80%, 80%);
}

.standardView .buttonLightBlue:hover {
	color: hsl(198, 65%, 15%);
	background-color: hsl(198, 85%, 90%);
	border-color: hsl(198, 85%, 90%);
}

.buttonYellow {
	color: hsl(50, 85%, 10%);
	background-color: hsl(50, 85%, 65%);
	border-color: hsl(50, 85%, 65%);
}

.standardView .buttonYellow:hover {
	color: hsl(50, 85%, 15%);
	background-color: hsl(50, 85%, 75%);
	border: solid 1px hsl(50, 85%, 75%);
}

.buttonTeal {
	color: hsl(0, 0%, 100%);
	background-color: hsl(194, 100%, 45%);
	border-color: hsl(194, 100%, 45%);
}

.standardView .buttonTeal:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(194, 100%, 55%);
	border-color: hsl(194, 100%, 55%);
}

.buttonGreen {
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 35%);
	border-color: hsl(158, 100%, 35%);
}

.standardView .buttonGreen:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 42%);
	border-color: hsl(158, 100%, 42%);
}

.buttonRed {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 40%);
	border-color: hsl(0, 100%, 40%);
}

.standardView .buttonRed:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 50%);
	border-color: hsl(0, 100%, 50%);
}



/* WIRE BUTTONS */
.buttonBlueWire {
	color: hsl(203, 100%, 40%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(203, 100%, 40%);
}

.standardView .buttonBlueWire:hover {
	color: hsl(203, 100%, 40%);
	background-color: hsl(203, 100%, 92%);
	border: solid 1px hsl(203, 100%, 40%);
}

.buttonGreenWire {
	color: hsl(158, 100%, 35%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(158, 100%, 35%);
}

.standardView .buttonGreenWire:hover {
	color: hsl(158, 100%, 35%);
	background-color: hsl(158, 100%, 92%);
	border: solid 1px hsl(158, 100%, 35%);
}



/* TOGGLE BUTTON */
div.toggleButtonOn, div.toggleButtonOff {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 28px;
	border-radius: 14px;
	background-color: hsl(155, 100%, 38%);
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
}

div.toggleButtonOff {
	background-color: hsl(0, 0%, 0%, 0.35);
}

div.toggleButtonCircle {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: hsl(0, 0%, 100%);
	pointer-events: none;
}

div.toggleButtonOn div.toggleButtonCircle {
	top: 2px;
	right: 2px;
}

div.toggleButtonOff div.toggleButtonCircle {
	top: 2px;
	left: 2px;
}

div.toggleButtonTextOn, div.toggleButtonTextOff {
	position: absolute;
	top: 1px;
	font-family: StandardFontRegular, sans-serif;
	font-size: 13px;
	/*letter-spacing: 1px;*/
	line-height: 28px;
	pointer-events: none;
}

div.toggleButtonOn div.toggleButtonTextOn {
	display: block;
	color: hsl(0, 0%, 100%);
	top: 0px;
	left: 7px;
}

div.toggleButtonOff div.toggleButtonTextOn {
	display: none;
	color: hsl(0, 0%, 100%);
	top: 0px;
	left: 7px;
}

div.toggleButtonOn div.toggleButtonTextOff {
	display: none;
	color: hsl(0, 0%, 100%, 0.50);
	top: 0px;
	right: 5px;
}

div.toggleButtonOff div.toggleButtonTextOff {
	display: block;
	color: hsl(0, 0%, 100%, 0.50);
	top: 0px;
	right: 5px;
}

div.toggleButtonLabel {
	font-size: 15px;
	color: hsl(0, 0%, 30%);
	line-height: 30px;
}



/* FILTER BUTTON */
div.filterButton, div.filterButtonActive {
	position: relative;
	/*top: 0px;*/
	height: 38px;
	width: 38px;
	/*background-color: hsl(203, 100%, 38%);*/
	border-radius: 5px;
	opacity: 0.75;
	cursor: pointer;
	pointer-events: auto;
	/*transition: top 0.25s ease;*/
}

.standardView div.filterButton:hover {
	background-color: hsla(0, 0%, 0%, 0.15);
}

div.filterButtonActive {
	height: 44px;
	/*top: 6px;*/
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	background-color: hsl(50, 100%, 70%);
	opacity: 1;
}

div.filterButtonFilterIndicatorOff, div.filterButtonFilterIndicatorOn {
	position: absolute;
	z-index: 9;
	left: 1px;
	top: 1px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	pointer-events: none;
}

div.filterButtonFilterIndicatorOn {
	background-color: hsl(160, 100%, 50%);
}

div.filterButtonCircleT, div.filterButtonCircleM, div.filterButtonCircleB {
	position: absolute;
	z-index: 2;
	left: 21px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: hsl(0, 0%, 0%);
	pointer-events: none;
}

div.filterButtonCircleM {
	left: 11px;
	top: 16px;
}

div.filterButtonCircleB {
	left: 19px;
	top: 25px;
}

div.filterButtonLineT, div.filterButtonLineM, div.filterButtonLineB {
	position: absolute;
	z-index: 1;
	left: 7px;
	top: 9px;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background-color: hsl(0, 0%, 0%);
	pointer-events: none;
}

div.filterButtonLineM {
	top: 18px;
}

div.filterButtonLineB {
	top: 27px;
}


/* TILE BUTTON */
div.tileButtonPanel {
	margin-top: 50px;
	text-align: center;
	font-size: 0px;
}

.phoneView div.tileButtonPanel {
	margin-top: 10px;
}

div.tileButtonWrapper {
	display: inline-block;
	margin: 25px;
	font-size: 0px;
}

.phoneView div.tileButtonWrapper {
	display: block;
	margin: 25px 0px;
}

.tileButton {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: 200px;
	background-color: hsl(203, 100%, 38%);
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView .tileButton {
	width: 150px;
	height: 150px;
}

.standardView .tileButton:hover {
	background-color: hsl(203, 100%, 48%);
}

div.tileButtonIcon {
	position: relative;
	margin-top: 25px;
	text-align: center;
	font-size: 0px;
}

.phoneView div.tileButtonIcon {
	margin-top: 20px;
}

img.tileButtonIcon {
	display: inline-block;
	width: 100px;
	height: 100px;
}

.phoneView img.tileButtonIcon {
	width: 80px;
	height: 80px;
}

div.tileButtonLabel {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 22px;
	color: hsl(0, 0%, 100%);
	text-align: center;
	padding: 20px 0px;
}

.phoneView div.tileButtonLabel {
	font-size: 18px;
	padding: 15px 0px;
}



/* DISABLED */
.buttonDisabled {
	opacity: 0.35;
	filter: saturate(0%);
	pointer-events: none;
}

input.default, textarea.default, input.filter, input.alert, textarea.alert {
	position: relative;
	z-index: 1;
	width: 100%;
	font-size: 18px;
	/*letter-spacing: 0.5px;*/
	line-height: 140%;
	padding: 12px 10px 8px 10px;
	color: hsl(0, 0%, 0%);
	border: none;
	border: solid 2px hsl(203, 50%, 80%);
	resize: none;
	background: none;
	background-color: hsl(0, 0%, 100%);
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-appearance: none;
	pointer-events: auto !important;
}

input.default:focus, textarea.default:focus {
	outline: none;
	border-color: hsl(203, 65%, 55%);
	box-shadow: 0px 0px 0px 8px hsl(203, 100%, 80%);
	/*background-color: hsl(200, 100%, 85%);*/
}

/*input.invalid, textarea.invalid {*/
div.formItemInvalid input.default, div.formItemInvalid textarea.default {
	color: hsl(0, 100%, 25%);
	border-color: hsl(0, 100%, 45%);
}

/*input.invalid:focus, textarea.invalid:focus {*/
div.formItemInvalid input.default:focus, div.formItemInvalid textarea.default:focus {
	outline: none;
	border-color: hsl(0, 100%, 25%);
	box-shadow: 0px 0px 0px 8px hsl(0, 100%, 80%);
	/*background-color: hsl(200, 100%, 85%);*/
}

div.defaultStaticText {
	position: relative;
	z-index: 1;
	width: 100%;
	font-size: 18px;
	/*letter-spacing: 0.5px;*/
	line-height: 140%;
	padding: 12px 10px 0px 10px;
	color: hsl(0, 0%, 0%);
	border: none;
	border-top: solid 2px hsl(203, 50%, 80%);
	background-color: hsl(0, 0%, 100%);
	/*border-radius: 4px;*/
	text-align: left;
	box-sizing: border-box;
}

.standardView div.defaultStaticText {
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	-khtml-user-select: all;
	user-select: all;
	
	pointer-events: auto;
}

div.itemPanelInfoView div.defaultStaticText {
	font-size: 15px;
	line-height: 135%;
	padding: 10px 10px 0px 10px;
}

div.dossier {
	position: relative;
}

div.formPanelContainer {
	padding: 20px 0px 20px 0px;
	text-align: center;
}

.phoneView div.formPanelContainer {
	width: 100%;
	/*padding: 20px;*/
	padding: 10px 0px 40px 0px;
}

/*
.phoneView div.formPanelContainer {
	padding: 10px 0px 40px 0px;
}
*/

div.formPanel {
	display: inline-block;
}

.phoneView div.formPanel {
	display: block;
}

div.formPanelTitle {
	height: 32px;
	font-size: 0px;
	text-align: center;
}

.phoneView div.formPanelTitle {
	height: 26px;
}

p.formPanelTitle, p.formPanelTitleWithIcon {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 32px;
	line-height: 32px;
	color: hsl(0, 0%, 0%);
	margin-top: 30px;
	text-align: center;
}

.phoneView p.formPanelTitle, .phoneView p.formPanelTitleWithIcon {
	font-size: 26px;
	line-height: 26px;
	margin-top: 20px;
}

p.formPanelTitleWithIcon, .phoneView p.formPanelTitleWithIcon {
	display: inline-block;
	vertical-align: top;
	margin-top: 0px;
	padding-left: 12px;
}

div.formPanelTitleIcon {
	display: inline-block;
	vertical-align: top;
	height: 32px;
}

.phoneView div.formPanelTitleIcon {
	height: 26px;
}

img.formPanelTitleIcon {
	display: block;
	height: 32px;
}

.phoneView img.formPanelTitleIcon {
	height: 26px;
}

div.dossier p.formPanelTitle {
	margin-top: 0px;
}

div.formItems {
	background-color: hsl(0, 0%, 100%);
	border: solid 2px hsl(203, 50%, 65%);
	border-radius: 10px;
	padding: 30px;
	margin-top: 25px;
}

div.dossier div.formItems {
	border: none;
	padding: 10px;
	margin-top: 20px;
}

.standardView div.formItems {
	min-width: 500px;
}

.phoneView div.formItems {
	border: none;
	padding: 0px 40px;
}

p.formItemsCenterText {
	font-size: 20px;
	color: hsl(0, 0%, 0%);
	text-align: center;
}

div.formItem, div.formItemInvalid {
	position: relative;
	margin-top: 30px;
}

div.formItemContainer {
	margin-top: 15px;
}

.standardView div.dossier div.formItem, .standardView div.dossier div.formItemInvalid {
	margin-top: 45px;
}

div.formItemInvalid div.formItem, div.formItemInvalid div.formItemInvalid {
	margin-top: 20px;
}

div.formItem:first-child, div.formItemInvalid:first-child {
	margin-top: 0px !important;
}

div.formItemNested {
	margin-top: 30px;
	margin-left: 30px;
}

.standardView div.dossier div.formItemNested {
	margin-top: 30px;
}

div.formItemLabel {
	position: absolute;
	z-index: 3;
	left: 8px;
	top: -10px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 16px;
	line-height: 16px;	
	padding: 0px 4px;
	color: hsl(203, 61%, 47%);
	background-color: hsl(0, 0%, 100%);
	white-space: nowrap;
}

div.formItemLabelWithMoreInfo {
	padding-right: 34px;
}

div.formItemInvalid div.formItemLabel {
	color: hsl(0, 100%, 40%);
}

div.itemPanelInfoView div.formItemLabel {
	font-size: 14px;
}

div.formItemMoreInfoBtn, div.formItemMoreInfoBtnActive {
	position: absolute;
	right: 5px;
	bottom: -2px;
	scale: 1;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: hsl(50, 90%, 50%);
	cursor: pointer;
	pointer-events: auto;
	transition: scale 0.1s linear;
}

div.formItemMoreInfoBtnActive {
	scale: 1.5;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.standardView div.formItemMoreInfoBtn:hover, .standardView div.formItemMoreInfoBtnActive:hover {
	background-color: hsl(50, 90%, 60%);
}

svg.formItemMoreInfoBtnIcon {
	position: relative;
	width: 7px;
	height: 14px;
	fill: hsl(0, 0%, 100%);
	pointer-events;
}

div.labelItemDiv {
	position: relative;
	z-index: 1;
	width: 100%;
	font-size: 0px;
	color: hsl(0, 0%, 0%);
	border: none;
	border-top: solid 2px hsl(203, 50%, 80%);
	text-align: left;
	box-sizing: border-box;
}

div.complexItemDiv {
	position: relative;
	z-index: 1;
	width: 100%;
	font-size: 0px;
	/*padding: 12px 10px 8px 10px;*/
	color: hsl(0, 0%, 0%);
	border: none;
	border-top: solid 2px hsl(203, 50%, 80%);
	padding-top: 4px;
	text-align: left;
	box-sizing: border-box;
}

div.formItemInvalid div.complexItemDiv, div.formItemInvalid div.labelItemDiv {
	border-top: solid 2px hsl(0, 100%, 45%);
}

div.formItemNoTitleUnderline {
	border-top: none;
	padding-top: 12px;
}



div.optionSet {
	font-size: 0px;
}

div.optionSetTitle {
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 0%, 0%);
	font-size: 18px;
	text-align: left;
	margin-top: 0px;
}

div.optionSetItems {
	display: flex;
	font-size: 0px;
}

div.optionSetItemNorm, div.optionSetItemSelected {
	flex: 1;
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(203, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(203, 100%, 40%);
	border-left: none;
	font-size: 18px;
	line-height: 42px;
	text-align: center;
	white-space: nowrap;
	padding: 0px 10px;
	pointer-events: auto;
	cursor: pointer;
}

div.optionSetItemNorm:first-child, div.optionSetItemSelected:first-child {
	border-left: solid 1px hsl(203, 100%, 40%);
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

div.optionSetItemNorm:last-child, div.optionSetItemSelected:last-child {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.standardView .optionSetItemNorm:hover {
	background-color: hsl(203, 100%, 92%);
}

div.optionSetItemSelected {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 40%);
	pointer-events: none;
}



div.singleSelectOptSet, div.multiSelectOptSet {
	font-size: 0px;
}

div.singleSelectOptSetTitle, div.multiSelectOptSetTitle {
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 0%, 0%);
	font-size: 18px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 5px;
}

div.singleSelectOptSetItems, div.multiSelectOptSetItems {
	/*display: flex;*/
	font-size: 0px;
}

div.singleSelectOptionNorm, div.singleSelectOptionSelected, div.multiSelectOptionNorm, div.multiSelectOptionSelected {
	display: inline-block;
	vertical-align: top;
	padding: 8px;
	font-size: 0px;
	min-width: 140px;
	pointer-events: auto;
	cursor: pointer;
}

div.panelFilterPanelContents div.singleSelectOptionNorm, div.panelFilterPanelContents div.singleSelectOptionSelected, div.panelFilterPanelContents div.multiSelectOptionNorm, div.panelFilterPanelContents div.multiSelectOptionSelected {
	min-width: 174px;
}

.phoneView div.panelFilterPanelContents div.singleSelectOptionNorm, .phoneView div.panelFilterPanelContents div.singleSelectOptionSelected, .phoneView div.panelFilterPanelContents div.multiSelectOptionNorm, .phoneView div.panelFilterPanelContents div.multiSelectOptionSelected {
	min-width: 166px;
}

div.singleSelectOptionSelected {
	pointer-events: none;
}

.standardView div.singleSelectOptionNorm:hover, .standardView div.multiSelectOptionNorm:hover {
	background-color: hsl(203, 100%, 95%);
}

div.singleSelectOptionItems, div.multiSelectOptionItems {
	position: relative;
}

div.singleSelectOptionCircle, div.multiSelectOptionRect {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 26px;
	height: 26px;
	border: solid 2px hsl(0, 0%, 60%);
	border-radius: 50%;
}

div.multiSelectOptionRect {
	border-radius: 0px;
}

div.singleSelectOptionSelected div.singleSelectOptionCircle, div.multiSelectOptionSelected div.multiSelectOptionRect {
	border: solid 2px hsl(203, 100%, 40%);
	background-color: hsl(203, 100%, 40%);
}

div.singleSelectOptionLabel, div.multiSelectOptionLabel {
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 0%, 50%);
	font-size: 18px;
	/*letter-spacing: -0.005em;*/
	line-height: 26px;
	white-space: nowrap;
	padding-left: 32px;
	text-align: left;
}

div.singleSelectOptionSelected div.singleSelectOptionLabel, div.multiSelectOptionSelected div.multiSelectOptionLabel {
	color: hsl(203, 100%, 40%);
}

span.singleSelectOptionCounter, span.multiSelectOptionCounter {
	/*font-family: "StandardFontRegular", "Arial", sans-serif;*/
	font-size: 15px;
	color: hsl(203, 65%, 50%); /*hsl(0, 0%, 65%);*/
}

div.singleSelectOptionSelected span.singleSelectOptionCounter, div.multiSelectOptionSelected span.multiSelectOptionCounter {
	color: hsl(0, 0%, 50%);
}



div.formItemInfo, div.formItemInfoMenuList {
	position: absolute;
	z-index: 2;
	right: 8px;
	top: -10px;
	/*font-family: "StandardFontBold", "Arial", sans-serif;*/
	font-style: italic;
	font-size: 15px;
	line-height: 15px;
	padding: 0px 4px;
	color: hsl(0, 0%, 50%);
	background-color: hsl(0, 0%, 100%);
}

.standardView div.formItemInfoMenuList {
	top: 14px;
}

.phoneView div.formItemInfoMenuList {
	right: 42px;
}

span.formItemRequired {
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 100%, 40%);
}



div.formAlertMsgConfirm, div.formAlertMsgNotice, div.formAlertMsgWarning, div.formAlertMsgError {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 150%;
	color: hsl(158, 100%, 25%);
	background-color: hsl(158, 100%, 95%);
	border: solid 2px hsl(158, 100%, 35%);
	border-radius: 10px;
	padding: 15px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div.dossier div.formAlertMsgConfirm, div.dossier div.formAlertMsgNotice, div.dossier div.formAlertMsgWarning, div.dossier div.formAlertMsgError {
	margin-bottom: 10px;
}

div.formAlertMsgNotice {
	color: hsl(205, 100%, 25%);
	background-color: hsl(205, 100%, 95%);
	border: solid 2px hsl(205, 100%, 35%);
}

div.formAlertMsgWarning {
	color: hsl(50, 100%, 25%);
	background-color: hsl(50, 100%, 95%);
	border: solid 2px hsl(50, 100%, 35%);
}

div.formAlertMsgError {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 100%, 35%);
	border-color: hsl(0, 100%, 35%);
}

.standardView div.formAlertMsgConfirm, .standardView div.formAlertMsgError  {
	max-width: 600px;
}

.phoneView div.formAlertMsgConfirm, .phoneView div.formAlertMsgError {
	padding: 12px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}



/* DOSSIER BUTTONS */
div.dossierButtons {
	display: flex; display: flex;
	justify-content: space-between;
	font-size: 0px;
	background-color: hsl(0, 0%, 94%);
	border-radius: 5px;
	margin-top: 25px;
	padding: 10px;
}

.buttonFormApprove, .buttonFormCancel {
	display: inline-block;
	vertical-align: top;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 266%;
	/*letter-spacing: 0px;*/
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 32%);
	border-color: hsl(158, 100%, 32%);
	padding: 0px 16px;
	border-radius: 5px;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
}

.phoneView .buttonFormApprove, .phoneView .buttonFormCancel {
	font-size: 16px;
	padding: 0px 14px;
}

.standardView .buttonFormApprove:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 38%);
	border-color: hsl(158, 100%, 38%);
}

.buttonFormCancel {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 50%);
	border: solid 1px hsl(0, 0%, 50%);
}

.standardView .buttonFormCancel:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 60%);
	border: solid 1px hsl(0, 0%, 60%);
}



/*** OPTIONS ***/
div.optionItems {
	max-width: 320px;
	font-size: 0px;
	margin: 0px auto;
}

div.optionItem {
	display: block; /*inline-block;*/
	font-size: 0px;
	margin-top: 30px;
}

div.optionItem:first-child {
	margin-top: 0px;
}

div.optionItemLabel {
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 0%, 0%);
	font-size: 18px;
	text-align: left;
}

div.optionItemDescription {
	font-style: italic;
	color: hsl(0, 0%, 35%);
	font-size: 15px;
	line-height: 135%;
	margin-top: 5px;
	text-align: left;
}

table.optionItem {
	width: 100%;
}

table.optionItem td {
	font-size: 0px;
	padding-top: 10px;
}

table.optionItem td.optionButton {
	width: 50%;
}

table.optionItem td.optionExample {}

div.optionButtonNorm, div.optionButtonSelected {
	/*width: 145px;*/
	color: hsl(203, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(203, 100%, 40%);
	border-left: none;
	font-size: 16px;
	line-height: 42px; /*50px;*/
	text-align: center;
	white-space: nowrap;
	padding: 0px 5px;
	pointer-events: auto;
	cursor: pointer;
}

table.optionItem td:first-child div.optionButtonNorm, table.optionItem td:first-child  div.optionButtonSelected {
	border-left: solid 1px hsl(203, 100%, 40%);
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

table.optionItem td:last-child div.optionButtonNorm, table.optionItem td:last-child  div.optionButtonSelected {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

div.optionButtonSelected {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 40%);
	pointer-events: none;
}

div.optionExample {
	color: hsl(0, 0%, 30%);
	font-size: 15px;
	text-align: center;
	margin-top: 0px;
}

div.optionListValueContainer {
	margin-top: 10px;
}

div.optionListValueActive {
	color: hsl(203, 100%, 30%);
	font-weight: bold;
	font-size: 16px;
	line-height: 46px;
	border-top: solid 3px hsl(203, 100%, 40%);
	border-bottom: solid 3px hsl(203, 100%, 40%);
	background-color: hsl(203, 100%, 94%);
	border-radius: 6px;
	padding: 0px 5px;
	text-align: center;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: pointer;
}



/*** MENU LIST ***/
/*
div.menuList {
	font-size: 0px;
}
*/

div.menuListButton, div.menuListButtonActive {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 100%;
	border: solid 2px hsl(203, 50%, 80%);
	background-color: hsl(0, 0%, 100%);
	border-radius: 4px; /*24px;*/
	font-size: 0px;
	overflow: hidden;
	pointer-events: auto;
	cursor: pointer;
}

.phoneView div.menuListButton, .phoneView div.menuListButtonActive {
	display: block;
	max-width: initial;
}

.standardView div.menuListButton:hover {
	background-color: hsl(203, 100%, 95%);
}

div.formItemInvalid div.menuListButton {
	border-color: hsl(0, 100%, 45%);
}

.standardView div.formItemInvalid div.menuListButton:hover {
	background-color: hsl(0, 100%, 95%);
}

div.menuListButtonActive {
	border-color: hsl(203, 65%, 55%);
	box-shadow: 0px 0px 0px 8px hsl(203, 100%, 80%);
}

div.formItemInvalid div.menuListButtonActive {
	border-color: hsl(0, 100%, 25%);
	box-shadow: 0px 0px 0px 8px hsl(0, 100%, 80%);
}

div.menuListButtonText, div.menuListButtonTextHiddenList {
	z-index: 1;
	font-size: 18px;
	line-height: 140%;
	padding: 12px 44px 8px 10px;
	color: hsl(0, 0%, 0%);
	white-space: nowrap;
}

div.menuListButtonTextHiddenList {
	visibility: hidden;
	height: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: hidden;
}

.standardView div.menuListButtonTextHiddenList {
	min-width: 150px;
}

div.formItemInvalid div.menuListButtonText {
	color: hsl(0, 100%, 25%);
}

div.menuListButtonArrow {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
  justify-content: center;
	right: 0px;
	top: 0px;
	width: 35px;
	height: 100%;
	background-color: hsl(203, 50%, 80%);
	pointer-events: none;
}

.standardView div.menuListButton:hover div.menuListButtonArrow {
	background-color: hsl(203, 50%, 70%);	
}

div.formItemInvalid div.menuListButtonArrow {
	background-color: hsl(0, 100%, 45%);
}

.standardView div.formItemInvalid div.menuListButton:hover div.menuListButtonArrow {
	background-color: hsl(0, 100%, 55%);
}

svg.menuListButtonArrow {
	position: relative;
	top: 2px;
	width: 15px;
	height: 20px;
	fill: hsl(0, 0%, 100%);
}

div.menuListOpen, div.menuListClosed {
	position: absolute;
	z-index: 999;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	font-size: 0px;
	opacity: 1;
	transition: opacity 0.15s linear;
}

div.menuListClosed {
	opacity: 0;
}

div.menuListModalBg {
	position: absolute;
	z-index: 1;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	pointer-events: auto;	
}

.phoneView div.menuListModalBg {
	background-color: hsla(0, 0%, 50%, 0.75);
}

div.menuListPanel {
	position: relative;
	z-index: 2;
	display: inline-block;
	left: 0px;
	top: 0px;
	border-radius: 5px;
	background-color: hsl(0, 0%, 100%);
	pointer-events: auto;
}

.standardView div.menuListPanel {
	box-shadow: 0px 0px 3px 1px hsla(0, 0%, 0%, 0.75);
}

.phoneView div.menuListPanel {
	position: absolute;
	z-index: 2;
	display: block;
	width: auto;
	height: auto;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
}

div.menuListPanelHead {
	position: relative;
	height: 46px;
	margin: 0px 5px;
	border-bottom: solid 1px hsl(0, 0%, 90%);
}

div.menuListPanelTitle {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 46px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(0, 0%, 0%);
	font-size: 18px;
	line-height: 46px;
	padding-left: 10px;
}

div.menuListCloseBtn {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 46px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	color: hsl(203, 100%, 35%);
	font-size: 18px;
	line-height: 46px;
	padding-left: 10px;
	padding-right: 10px;
	pointer-events: auto;
	cursor: pointer;
}

div.menuListContent {
	position: relative;
	padding: 10px 10px;
	font-size: 0px;
	overflow-x: hidden;
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

.standardView div.menuListContent {
	min-width: 146px;
}

.phoneView div.menuListContent {
	position: absolute;
	z-index: 1;
	width: auto;
	height: auto;
	left: 20px;
	right: 20px;
	top: 46px;
	bottom: 5px;
	padding: 0px;
}

div.menuListItems {
	/*width: 120px;*/
	margin: 0px auto;
	/*padding-top: 5px;*/
	pointer-events: none;
}

.phoneView div.menuListItems {
	padding-top: 5px;
}

div.menuListItemNorm, div.menuListItemSelected {
	font-size: 18px;
	line-height: 40px;
	color: hsl(203, 100%, 30%);
	padding: 0px 15px;
	text-align: center;
	border-top: solid 1px hsl(203, 50%, 85%);
	pointer-events: auto;
	cursor: pointer
}

.phoneView div.menuListItemNorm, .phoneView div.menuListItemSelected {
	font-size: 20px;
	line-height: 46px;	
}

div.menuListItemNorm:first-child, div.menuListItemSelected:first-child {
	border-top: none;
}

.standardView div.menuListItemNorm:hover {
	background-color: hsl(203, 100%, 95%);
}

div.menuListItemSelected {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 40%);
	pointer-events: none;
}



/*** MULTI-FIELD ITEMS ***/
div.multiFieldItem {
	background-color: hsl(203, 65%, 94%);
	border-radius: 5px;
	margin-top: 10px !important;
	padding: 20px 25px 10px 10px;
}

/*
div.formItemInvalid div.multiFieldItem input.default, div.formItemInvalid div.multiFieldItem textarea.default {
	color: hsl(0, 0%, 0%);
	border-color: hsl(203, 50%, 80%);
}

div.formItemInvalid div.multiFieldItem input.default:focus, div.multiFieldItem div.formItemInvalid textarea.default:focus {
	outline: none;
	border-color: hsl(203, 65%, 55%);
	box-shadow: 0px 0px 0px 8px hsl(203, 100%, 80%);
}

div.formItemInvalid div.multiFieldItem div.formItemLabel {
	color: hsl(203, 61%, 47%);
}

div.formItemInvalid div.multiFieldItem div.menuListButton {
	border-color: hsl(203, 50%, 80%);
}

.standardView div.formItemInvalid div.multiFieldItem div.menuListButton:hover {
	background-color: hsl(203, 100%, 95%);
}

div.formItemInvalid div.multiFieldItem div.menuListButtonActive {
	border-color: hsl(203, 65%, 55%);
	box-shadow: 0px 0px 0px 8px hsl(203, 100%, 80%);
}

div.formItemInvalid div.multiFieldItem div.menuListButtonText {
	color: hsl(0, 0%, 0%);
}

div.formItemInvalid div.multiFieldItem div.menuListButtonArrow {
	background-color: hsl(203, 50%, 80%);
}

.standardView div.formItemInvalid div.multiFieldItem div.menuListButton:hover div.menuListButtonArrow {
	background-color: hsl(203, 50%, 70%);
}
*/

/*
.phoneView div.multiFieldItem {
	padding: 20px 10px 10px 10px;
}
*/

.standardView div.multiFieldItemSmartMooringInfo, .standardView div.multiFieldItemAcknowledgements {
	display: grid;
	column-gap: 10px;
	row-gap: 15px;
}

.standardView div.multiFieldItemSmartMooringInfo {
	grid-template-columns: min-content 1fr;
}

.standardView div.multiFieldItemAcknowledgements {
	grid-template-columns: 1fr min-content;
}

.standardView div.multiFieldItemSingleCol {}

.standardView div.multiFieldItemAllCols {
	grid-column-start: 1;
	grid-column-end: -1;
}

.phoneView div.multiFieldItemSingleCol, .phoneView div.multiFieldItemAllCols {
	margin-top: 20px;
}

.phoneView div.multiFieldItemSingleCol:first-child, .phoneView div.multiFieldItemAllCols:first-child {
	margin-top: 0px;
}

div.multiFieldRemoveItemBtn {
	position: absolute;
	z-index: 1;
	right: -18px;
	top: 50%;
	margin-top: -18px;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 36px;
	height: 36px;
	background-color: hsl(0, 0%, 100%);
	border: solid 2px hsl(203, 50%, 80%);
	border-radius: 50%;
	pointer-events: auto;
	cursor: pointer;
}

.standardView div.multiFieldRemoveItemBtn:hover {
	background-color: hsl(203, 100%, 95%);
}

svg.multiFieldRemoveItemIcon {
	position: relative;
	width: 20px;
	height: 20px;
	fill: hsl(203, 100%, 25%);
	rotate: 45deg;
	pointer-events: none;
}

div.multiFieldAddItemBtnContainer {
	text-align: right;
	margin-top: 10px;
}

div.multiFieldAddItemBtn {
	position: relative;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 36px;
	height: 36px;
	background-color: hsl(203, 65%, 94%);
	/*border: solid 2px hsl(203, 50%, 80%);*/
	border-radius: 5px;
	margin: 0px auto;
	pointer-events: auto;
	cursor: pointer;
}

.standardView div.multiFieldAddItemBtn:hover {
	background-color: hsl(203, 65%, 86%);
}

svg.multiFieldAddItemIcon {
	position: relative;
	width: 20px;
	height: 20px;
	fill: hsl(203, 100%, 25%);
	pointer-events: none;
}



/*
	COLOR KEY
	Blue   - hsl(208, 69%, 36%);
	Cyan   - hsl(203, 61%, 47%);
	Yellow - hsl(50, 87%, 53%);
*/



div.content, div.contentPhoneEmulation {
	width: 100%;
	height: 100%;
	background-color: hsl(0, 0%, 100%);
	overflow: hidden;
}

div.contentPhoneEmulation {
	background-color: hsl(0, 0%, 0%);
}



/* CONTENT PANEL */
div.contentWrapper {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div.contentPhoneEmulation div.contentWrapper {
	background-color: hsl(0, 0%, 100%);
}

.contentPhoneEmulation div.contentWrapper {
	width: 400px;
	height: 712px; /* 1.78*width */
	left: 50%;
	margin-left: -200px;
	top: 50%;
	margin-top: -356px;
	overflow: hidden;
}

div.contentPanel, div.contentPanelBlur {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/*transition: all 0.5s linear;*/
}

div.contentPanelBlur {
	filter: blur(3px);
}

div.contentPanelBg {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 400px;
	bottom: -150px;
	opacity: 0.10;
	background-image: url("/images/bg-waves.png");
	background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
}

div.contentFrame {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: auto;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
}

div.contentFrameScroll {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	bottom: 0px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

div.contentFrameWithHeader {
	top: 51px;
}

div.contentFramePad {
	padding: 20px;
}

.standardView div.padBottom {
	padding-bottom: 20px;
}

.phoneView div.padBottom {
	padding-bottom: 40px;
}

div.contentFrameFlexCenterHV { /* centers content & horizontally & vertically */
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
  align-items: safe center;
  justify-content: safe center;
}

div.contentFrameFlexCenterH { /* centers content horizontally */
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
  justify-content: safe center;
}

div.panelContent, div.panelContentWithHeader, div.panelContentScrollableWithHeader, div.panelContentScrollableNoHeader {
	position: absolute;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding: 20px 20px;
	overflow-x: hidden;
	overflow-y: hidden;
}

div.panelContentScrollableWithHeader, div.panelContentScrollableNoHeader {
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

div.panelContentWithHeader, div.panelContentScrollableWithHeader {
	top: 51px;
}



/* OVERLAY PANEL */
div.overlayPanel, div.overlayPanelHidden {
	position: absolute;
	z-index: 800;
	display: none;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

.phoneView div.overlayPanel, .phoneView div.overlayPanelHidden {
	opacity: 1;
	transition: opacity 0.50s ease-out;
}

.phoneView div.overlayPanelHidden {
	opacity: 0;
}

div.overlayPanelBg {
	position: absolute;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: hsla(0, 0%, 50%, 0.85);
	opacity: 1;
	/*pointer-events: auto;*/
}

.standardView div.overlayPanelBg {
	transition: opacity 0.35s ease-out;
}

.standardView div.overlayPanelHidden div.overlayPanelBg {
 	opacity: 0;
 	transition: opacity 0.35s 0.40s ease-out;
}

div.overlayPanelContent {
	position: absolute;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	flex-direction: column;
	align-items: center;
	/*
  align-items: safe center;
  justify-content: safe center;
  */
	padding: 20px 15px;
	font-size: 0px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

.phoneView div.overlayPanelContent {
	display: block;
	padding: 10px;
}

div.overlayPanelBox {
	position: relative;
	/*z-index: 1;*/
	/*width: 350px;*/
	background-color: hsl(0, 0%, 100%);
	padding: 20px;	
	border-radius: 10px;
	box-shadow: 0px 0px 8px 1px hsla(0, 0%, 0%, 0.50);
	opacity: 1;	
}

.standardView div.overlayPanelBox {
	max-width: 800px;
	transition: opacity 0.35s 0.40s ease-out;
}

.standardView div.overlayPanelHidden div.overlayPanelBox {
 	opacity: 0;
 	transition: opacity 0.35s ease-out;
}

.phoneView div.overlayPanelBox {
	display: block;
	padding: 10px;
}

div.overlayPanelBoxWhiteoutHidden, div.overlayPanelBoxWhiteoutInstantHidden, div.overlayPanelBoxWhiteoutVisible {
	position: absolute;
	z-index: 9;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: hsla(0, 0%, 85%, 0.85);
	opacity: 0;
	border-radius: 10px;
	transition: opacity 0.35s ease-out;
	pointer-events: auto;
}

div.overlayPanelBoxWhiteoutInstantHidden {
	transition: none;
}

div.overlayPanelBoxWhiteoutVisible {
	opacity: 1;
}

div.overlayPanelMsgHidden, div.overlayPanelMsgInstantHidden, div.overlayPanelMsgVisible {
	position: absolute;
	z-index: 801;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	/*background-color: hsla(0, 0%, 85%, 0.85);*/
	/*border-radius: 10px;*/
	padding: 70px 30px 20px 30px;
	font-size: 0px;
	/*
	opacity: 0;
	transition: opacity 0.35s ease-out;
	*/
	/*
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
	*/
}

/*
div.overlayPanelMsgInstantHidden {
	transition: none;
}

div.overlayPanelMsgVisible {
	opacity: 1;
}
*/

.phoneView div.overlayPanelMsgHidden, .phoneView div.overlayPanelMsgInstantHidden, .phoneView div.overlayPanelMsgVisible {
	padding: 20px;
}

div.overlayPanelMsgContents {
	opacity: 0;
	transition: opacity 0.35s ease-out;
}

div.overlayPanelMsgInstantHidden div.overlayPanelMsgContents {
	transition: none;
}

div.overlayPanelMsgVisible div.overlayPanelMsgContents {
	opacity: 1;
}

.standardView div.overlayPanelMsgContents {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div.overlayPanelMsgBoxAlert, div.overlayPanelMsgBoxConfirm {
	background-color: hsl(0, 0%, 100%);
	border: solid 4px hsl(0, 100%, 45%);
	border-radius: 10px;
	box-shadow: 0px 0px 0px 3px hsl(0, 0%, 100%); /*0px 0px 0px 4px hsla(0, 0%, 100%, 1), 0px 0px 5px 3px hsla(0, 0%, 0%, 0.50);*/
	overflow: hidden;
	pointer-events: auto;
}

.standardView div.overlayPanelMsgBoxAlert, .standardView div.overlayPanelMsgBoxConfirm {
	min-width: 400px;
	max-width: 800px;
}

div.overlayPanelMsgBoxConfirm {
	border-color: hsl(158, 100%, 35%);
	pointer-events: none;
}

div.overlayPanelMsgTitle {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 22px;
	line-height: 125%;
	text-align: center;
	color: hsl(0, 100%, 40%);
	/*border-bottom: solid 1px hsl(0, 0%, 85%);*/
	padding: 12px 0px 10px 0px;
	margin: 0px 15px;
	pointer-events: none;
}

div.overlayPanelMsgBoxConfirm div.overlayPanelMsgTitle {
	color: hsl(158, 100%, 30%);
}

div.overlayPanelMsgItems {
	border-top: solid 1px hsl(0, 0%, 85%);
	margin: 0px 10px;
	padding: 20px 10px;
	pointer-events: none;
}

.phoneView div.overlayPanelMsgItems {
	padding: 15px;
}

.phoneView div.overlayPanelMsgBoxTitle {
	font-size: 18px;
}

div.overlayPanelMsgBoxItem {
	font-size: 18px;
	line-height: 130%;
	color: hsl(0, 0%, 0%);
	margin-top: 10px;
}

.phoneView div.overlayPanelMsgBoxItem {
	font-size: 16px;
}

ul.overlayPanelMsgBoxItems {
	margin: 0px;
	padding: 0px;
}

li.overlayPanelMsgBoxItem {
	font-size: 18px;
	line-height: 125%;
	color: hsl(0, 0%, 0%);
	margin-left: 20px;
	margin-top: 10px;
}

li.overlayPanelMsgBoxItem:first-child {
	margin-top: 0px;
}

div.overlayPanelMsgButtons {
	text-align: center;
	/*background-color: hsl(0, 0%, 94%);*/
	border-top: solid 1px hsl(0, 0%, 85%);
	padding: 10px 0px;
	margin: 0px 10px;
}

div.overlayPanelMsgCloseBtn {
	display: inline-block;
	min-width: 80px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 266%;
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 32%);
	padding: 0px 16px;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView .overlayPanelMsgCloseBtn {
	font-size: 16px;
	padding: 0px 14px;
}

.standardView .overlayPanelMsgCloseBtn:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(158, 100%, 38%);
}

div.overlayPanelInfoPanelHidden, div.overlayPanelInfoPanelVisible {
	position: absolute;
	z-index: 10;
	left: 20px;
	right: 20px;
	top: 0px;
	opacity: 0;
	font-size: 0px;
	pointer-events: auto;
}

div.overlayPanelInfoPanelVisible {
	opacity: 1;
	transition: opacity 0.25s ease-out;
}

.phoneView div.overlayPanelInfoPanelHidden, .phoneView div.overlayPanelInfoPanelVisible {
	left: 10px;
	right: 10px;
}

div.overlayPanelInfoPanelContent {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	font-size: 0px;
	padding: 10px 14px;
	background-color: hsl(0, 0%, 100%);
	border: solid 4px hsl(50, 90%, 50%);
	border-radius: 8px;
	/*box-shadow: 0px 0px 3px 0px hsla(0, 0%, 0%, 0.35);*/
	pointer-events: auto;
}

div.overlayPanelInfoPanelCloseBtn {
	position: absolute;
	z-index: 1;
	right: -9px;
	top: -9px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
  justify-content: center;
	pointer-events: auto;
	background-color: hsl(50, 90%, 50%);
	border: solid 2px hsl(0, 0%, 100%);
	border-radius: 5px;
	cursor: pointer;
}

.standardView div.overlayPanelInfoPanelCloseBtn:hover {
	background-color: hsl(50, 90%, 60%);
}

svg.overlayPanelInfoPanelCloseBtnIcon {
	position: relative;
	width: 18px;
	height: 18px;
	fill: hsl(0, 0%, 100%);
	rotate: 45deg;
	pointer-events: none;
}

div.overlayPanelInfoPanelText {
	font-size: 15px;
	line-height: 135%;
	color: hsl(50, 50%, 20%);
	pointer-events: none;
}

div.overlayPanelCloseBtn {
	position: absolute;
	z-index: 5;
	right: 2px;
	top: -4px;
	width: 37px;
	height: 37px;
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView div.overlayPanelCloseBtn {
	right: 2px;
	top: -7px;
}

.standardView div.overlayPanelCloseBtn:hover {
	background-color: hsl(204, 100%, 96%);
}

div.overlayPanelCloseBtnIcon1, div.overlayPanelCloseBtnIcon2 {
	position: absolute;
	width: 27px;
	height: 3px;
	left: 5px;
	top: 17px;
	background-color: hsl(204, 50%, 70%);
	rotate: 45deg;
}

div.overlayPanelCloseBtnIcon2 {
	rotate: -45deg;
}



/* CONFIRM PANEL */
div.confirmPanel, div.confirmPanelHidden {
	position: absolute;
	z-index: 900;
	display: none; /* flex | none */
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

div.confirmPanelBg {
	position: absolute;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: hsla(0, 0%, 50%, 0.75);
	pointer-events: auto;
}

div.confirmPanelBox {
	position: relative;
	z-index: 2;
	top: 10%;
	width: 400px;
	background-color: hsl(0, 0%, 100%);
	padding: 20px;	
	border-radius: 10px;
	box-shadow: 0px 0px 8px 1px hsla(0, 0%, 0%, 0.50);
	opacity: 1;
	transition: opacity 0.35s 0.1s ease-out;
}

.phoneView div.confirmPanelBox {
	width: 300px;
}

div.confirmPanelHidden div.confirmPanelBox {
 	opacity: 0;
 	transition: opacity 0.25s ease-out;
}

div.confirmMsg {
	font-size: 18px;
	line-height: 135%;
	min-height: 60px;
	color: hsl(0, 0%, 0%);
	text-align: center;
}

div.confirmButtonsMulti, div.confirmButtonsSingle {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
	font-size: 0px;
}

div.confirmButtonsSingle {
	justify-content: center;
}

div.confirmButtonConfirm, div.confirmButtonCancel {
	display: inline-block;
	min-width: 100px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 266%;
	/*letter-spacing: 0px;*/
	color: hsl(0, 0%, 100%);
	padding: 0px 12px;
	border-radius: 5px;
	background-color: hsl(203, 100%, 40%);
	border: solid 1px hsl(203, 100%, 40%);
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
}

div.confirmButtonCancel {
	color: hsl(203, 100%, 40%);
	background-color: hsl(0, 0%, 100%);
}

.standardView .confirmButtonConfirm:hover{
	background-color: hsl(203, 100%, 50%);
	border: solid 1px hsl(203, 100%, 50%);
}

.standardView .confirmButtonCancel:hover {
	background-color: hsl(203, 100%, 92%);
}



/* LOG PANEL */
div.logPanel {
	position: fixed;
	z-index: 999;
	display: none;
	top: 0px;
	right: 0px;
	font-size: 12pt;
	line-height: 140%;
	padding: 10px;
	color: hsl(150, 100%, 65%);
	border: solid 1px hsl(150, 100%, 65%);
	background-color: hsl(0, 0%, 10%);
}



/* PAGE LOGO & BACKGROUND */
/*
div.logoWrapper {
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 2%;
	scale: 100%;
	text-align: center;
	scale: 50%;
	transform-origin: top center;
}

.phoneView div.logoWrapper {
	top: 4%;
	scale: 40%;
}
*/

div.logoWrapper {
	text-align: center;
}

div.logoContainer {
	display: inline-block;
}

.logo {
	position: relative;
	display: inline-block;
}

img.logo {
	display: block;
	width: calc(368px * 0.5);
	height: calc(284px * 0.5);
}

.phoneView img.logo {
	width: calc(368px * 0.4);
	height: calc(284px * 0.4);
}

div.logoSubtitle {
	position: relative;
	margin-top: calc(18px * 0.5);
}

.phoneView div.logoSubtitle {
	margin-top: calc(18px * 0.4);
}

img.logoSubtitle {
	display: block;
	width: calc(368px * 0.5);
	height: calc(42px * 0.5);
}

.phoneView img.logoSubtitle {
	width: calc(368px * 0.4);
	height: calc(42px * 0.4);
}



/* SPLASH PANEL */
div.splashPanelHidden, div.splashPanelVisible {
	position: absolute;
	z-index: 500;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: hsl(0, 0%, 100%);
	opacity: 0;
	transition: opacity 1s ease;
}

div.splashPanelVisible {
	opacity: 1;
}

div.splashLogoWrapper, div.splashLogoWrapperMoved {
	position: absolute;
	z-index: 10;
	width: 100%;
	scale: 100%;
	text-align: center;
}

.standardView div.splashLogoWrapper, .standardView div.splashLogoWrapperMoved {
	bottom: 45%;
	transition: bottom 1s ease, scale 1s ease;
}

.phoneView div.splashLogoWrapper, .phoneView div.splashLogoWrapperMoved {
	top: 15%;
	transition: top 1s ease, scale 1s ease;
}

.standardView div.splashLogoWrapperMoved {
	bottom: 55%;
	scale: 75%;
}

.phoneView div.splashLogoWrapperMoved {
	top: 0%;
	scale: 65%;
}

div.splashLogoContainer {
	position: relative;
	top: -50px;
	display: inline-block;
}

.phoneView div.splashLogoContainer {
	top: -25px;
}

div.splashLogo {
	position: relative;
}

img.splashLogo {
	display: block;
	width: 368px;
	height: 284px;
}

.phoneView img.splashLogo {
	width: 300px;
	height: 232px;
}

div.splashLogoSubtitleHidden, div.splashLogoSubtitleVisible {
	position: relative;
	margin-top: 18px;
	scale: 200%;
	opacity: 0;
	transition: opacity 0.75s ease, scale 0.75s ease;
}

.phoneView div.splashLogoSubtitleHidden, .phoneView div.splashLogoSubtitleVisible {
	margin-top: 15px;
	scale: 175%;
}

div.splashLogoSubtitleVisible, .phoneView div.splashLogoSubtitleVisible {
	scale: 100%;
	opacity: 1;
}

img.splashLogoSubtitle {
	display: block;
	width: 368px;
	height: 42px;
}

.phoneView img.splashLogoSubtitle {
	width: 300px;
	height: 34px;
}

div.splashLoadingAnim, div.splashLoadingAnimHidden {
	position: absolute;
	z-index: 3;
	top: 400px;
	width: auto;
	left: 25px;
	right: 25px;
	font-size: 0px;
	text-align: center;
}

.phoneView div.splashLoadingAnim, .phoneView div.splashLoadingAnimHidden {
	top: 320px;
}

div.splashLoadingAnimHidden {
	opacity: 0;
	transition: opacity 0.5s linear;
}

div.splashLoadingSpinnerAnim, div.splashLoadingSpinnerStopped {
	display: inline-block;
	vertical-align: top;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border-top: solid 3px hsl(203, 65%, 45%);
	border-bottom: solid 3px hsl(203, 65%, 45%);
	border-left: solid 3px hsla(203, 65%, 45%, 0.25);
	border-right: solid 3px hsla(203, 65%, 45%, 0.25);
	background-color: hsla(203, 65%, 45%, 0);
	animation: spinnerAction 1.25s linear infinite;
}

div.splashLoadingSpinnerStopped {
	border: none;
	border: solid 3px hsl(208, 69%, 35%);
	background-color: hsla(208, 69%, 35%, 1);
	transition: background-color 0.35s linear;
	animation: none;
}

@keyframes spinnerAction {
	100% {transform: rotate(360deg);}
}

div.splashLoadingAnimText {
	display: inline-block;
	font-family: "StandardFontBold", "Arial", sans-serif;
	vertical-align: top;
	line-height: 30px;
	font-size: 28px;
	color: hsl(203, 65%, 45%);
	margin-left: 8px;
}

.phoneView div.splashLoadingAnimText {
	font-size: 22px;
}

div.splashPanelMsgHidden, div.splashPanelMsgVisible {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 30px;
	color: hsl(0, 1000%, 40%);
	margin-top: 30px;
	opacity: 0;
	transition: opacity 0.5s linear;
}

div.splashErrorDivVisible, div.splashErrorDivHidden {
	position: absolute;
	z-index: 2;
	width: auto;
	left: 25px;
	right: 25px;
	top: 400px;
	opacity: 1;
	transition: opacity 0.5s linear;
}

.phoneView div.splashErrorDivVisible, .phoneView div.splashErrorDivHidden {
	top: 320px;
}

div.splashErrorDivHidden {
	opacity: 0;
}

div.splashErrorText {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 28px;
	/*letter-spacing: 0px;*/
	line-height: 125%;
	color: hsl(0, 100%, 40%);
	text-align: center;
}

.phoneView div.splashErrorText {
	font-size: 22px;
}

div.splashErrorBtnContinueWrapper {
	margin-top: 20px;
	text-align: center;
}

div.splashErrorBtnContinue {
	display: inline-block;
	color: hsl(0, 0%, 100%);
	font-size: 18px;
	line-height: 50px;
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 40%);
	padding: 0px 20px;
	border-radius: 5px;
	pointer-events: all;
	cursor: pointer;
}

.standardView div.splashErrorBtnContinue:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 50%);
}

div.splashPanelWaves, div.splashPanelWavesFaded {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 400px;
	bottom: -150px;
	background-image: url("/images/bg-waves.png");
	background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
	opacity: 0.75;
	transition: opacity 1s ease;
}

.phoneView div.splashPanelWaves, .phoneView div.splashPanelWavesFaded {
	height: 150px;
	bottom: 0px;
}

div.splashPanelWavesFaded {
	opacity: 0.25;
}

div.splashUserOptionsWrapperHidden, div.splashUserOptionsWrapperVisible {
	position: absolute;
	z-index: 9;
	width: 100%;
	text-align: center;
	opacity: 0;
}

.standardView div.splashUserOptionsWrapperHidden, .standardView div.splashUserOptionsWrapperVisible {
	top: 60%;
	transition: opacity 1s ease, top 1s ease;
}

.phoneView div.splashUserOptionsWrapperHidden, .phoneView div.splashUserOptionsWrapperVisible {
	top: 65%;
	transition: opacity 1s ease, top 1s ease;
}

.standardView div.splashUserOptionsWrapperVisible {
	top: 45%;
	opacity: 1;
}

.phoneView div.splashUserOptionsWrapperVisible {
	top: 40%;
	opacity: 1;
}

div.splashUserOptions {
	display: inline-block;
	border: solid 2px hsl(203, 61%, 47%);
	background-color: hsl(0, 0%, 100%);
	border-radius: 10px;
	padding: 30px;
}



/* ACCOUNT ITEMS */
p.userLoggedIn {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 24px;
	color: hsl(0, 0%, 0%);
}

.phoneView p.userLoggedIn {
	font-size: 20px;
}



/*** HEADER PANEL ***/
div.headerPanel {
	position: absolute;
	z-index: 2;
	width: auto;
	left: 0px;
	right: 0px;
	height: 51px;
	background-color: hsl(0, 0%, 100%);
	border-bottom: solid 1px hsl(208, 50%, 85%); /*hsl(0, 0%, 85%);*/
}

div.headerPanelFloating {
	position: absolute;
	z-index: 2;
	width: auto;
	left: 0px;
	right: 0px;
	height: 50px;
	pointer-events: none;
}

div.headerPanelTitle {
	position: absolute;
	z-index: 9;
	display: none;
	width: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 50px;
	line-height: 50px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 28px;
	color: hsl(0, 0%, 0%);
	text-align: center;
	overflow: hidden;
	pointer-events: none;
}

.phoneView div.headerPanelTitle {
	font-size: 24px;
}

div.headerPanelItems {
	position: absolute;
	z-index: 2;
	display: flex;
	width: auto;
	left: 0px;
	right: 0px;
	height: auto;
	top: 0px;
	bottom: 0px;
}

div.headerPanelFloatingItems {}

div.headerPanelItemsL {
	flex: 1 1 0;
	width: 0;
	font-size: 0px;
	text-align: left;
}

div.headerPanelItemsC {
	flex: 1 1 0;
	width: 0;
	font-size: 0px;
	text-align: center;
	/*padding: 6px;*/
}

div.headerPanelItemsR {
	flex: 1 1 0;
	width: 0;
	font-size: 0px;
	text-align: right;
	white-space: nowrap;
	/*padding: 6px;*/
}

.phoneView div.headerPanelLogo {
	position: absolute;
	z-index: 2;
	width: 50px;
	height: 50px;
}

a.headerPanelLogo {
	display: inline-block;
	font-size: 0px;
}

img.headerPanelLogo {
	display: block;
	width: 232px;
	height: 50px;
	border: none;
}

img.headerPanelLogoSimple {
	display: block;
	width: 50px;
	height: 50px;
	border: none;
}

div.panelHeaderSubsectionButtons {
	position: absolute;
	width: 100%;
	bottom: 0px;
	font-size: 0px;
	text-align: center;
}

div.panelHeaderSubsectionButtonNorm, div.panelHeaderSubsectionButtonHL {
	display: inline-block;
	min-width: 80px;
	color: hsl(203, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
	border: solid 1px hsl(203, 100%, 40%);
	border-left: none;
	border-bottom: none;
	font-size: 16px;
	line-height: 44px;
	text-align: center;
	padding: 0px 10px;
	pointer-events: auto;
	cursor: pointer;
}

div.panelHeaderSubsectionButtonNorm:first-child, div.panelHeaderSubsectionButtonHL:first-child {
	border-left: solid 1px hsl(203, 100%, 40%);
	border-top-left-radius: 5px;
}

div.panelHeaderSubsectionButtonNorm:last-child, div.panelHeaderSubsectionButtonHL:last-child {
	border-top-right-radius: 5px;
}

div.panelHeaderSubsectionButtonHL {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 40%);
	pointer-events: none;
}



/*** HEADER BUTTONS ***/
div.headerButtonWrapperActive, div.headerButtonWrapperMenuActive, div.headerButtonWrapperInactive {
	display: inline-block;
	vertical-align: top;
	height: 50px;
	padding: 6px;
	font-size: 0px;
	pointer-events: auto;
}

div.headerButtonWrapperActive {
	background-color: hsl(203, 100%, 50%); /*hsl(185, 100%, 70%);*/
}

div.headerButtonWrapperMenuActive {
	background-color: hsl(50, 95%, 70%);
}

div.headerButtonFilterIndicatorOff, div.headerButtonFilterIndicatorOn {
	position: absolute;
	z-index: 9;
	left: 2px;
	top: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	pointer-events: none;
}

.phoneView div.headerButtonFilterIndicatorOff, .phoneView div.headerButtonFilterIndicatorOn {
	left: 3px;
	top: 3px;
}

div.headerButtonFilterIndicatorOn {
	background-color: hsl(160, 100%, 50%);
}

div.headerButtonErrorIndicatorOff, div.headerButtonErrorIndicatorOn {
	position: absolute;
	z-index: 9;
	right: 2px;
	top: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	pointer-events: none;
}

.phoneView div.headerButtonErrorIndicatorOff, .phoneView div.headerButtonErrorIndicatorOn {
	left: 3px;
	top: 3px;
}

div.headerButtonErrorIndicatorOn {
	background-color: hsl(0, 100%, 65%);
}

.headerButton, .headerButtonWithIcon {
	display: inline-block;
	vertical-align: top;
	height: 38px;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 38px;
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 38%);
	border-radius: 5px;
	padding: 0px 10px;
	opacity: 0.85;
	pointer-events: auto;
	cursor: pointer;
}

.headerButtonWithIcon {
	padding-left: 38px;
}

.standardView .headerButton:hover, .standardView .headerButtonWithIcon:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 48%);
}

.headerIconButton {
	display: inline-block;
	vertical-align: top;
	height: 38px;
	/*
	background-color: hsl(0, 0%, 100%);
	border-radius: 5px;	
	*/
	padding: 0px;
	width: 38px;
	font-size: 0px;
	pointer-events: auto;
	cursor: pointer;
}

/*
.standardView .headerIconButton:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 90%);
}
*/

img.headerButtonIcon {
	position: absolute;
	display: block;
	left: 1px;
	top: 1px;
	width: 36px;
	height: 36px;
	border: none;	
}

img.headerButtonIcon, img.headerIcon {
	filter: brightness(75%) hue-rotate(0deg) saturate(110%);
}

/*
.headerIconButton img.headerButtonIcon {
	filter: grayscale(100%);
	cursor: pointer;
}
*/

div.headerButtonWrapperActive img.headerButtonIcon {
	filter: brightness(500%) hue-rotate(0deg) saturate(0%);
}

.standardView div.headerButtonWrapperInactive .headerIconButton:hover img.headerButtonIcon {
	filter: brightness(125%) hue-rotate(25deg) saturate(150%);
}

/*
.standardView .headerIconButton:hover img.headerButtonIcon {
	filter: brightness(125%) hue-rotate(25deg) saturate(150%);
}
*/

/*
.standardView div.headerButtonWrapperActive .headerIconButton:hover img.headerButtonIcon {
	filter: brightness(105%) hue-rotate(-5deg) saturate(100%);
}
*/

div.headerButtonSpacer {
	display: inline-block;
	vertical-align: top;
	height: 50px;
	width: 20px;
	font-size: 0px;
	pointer-events: none;
}

div.itemsButton {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 38px;
	width: 38px;
	background-color: hsl(203, 100%, 38%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

.standardView div.itemsButton:hover {
	background-color: hsl(203, 100%, 48%);
}

div.itemsButtonLineT, div.itemsButtonLineM, div.itemsButtonLineB {
	position: absolute;
	left: 7px;
	top: 11px;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background-color: hsl(0, 0%, 100%);
}

div.itemsButtonLineM {
	top: 18px;
}

div.itemsButtonLineB {
	top: 25px;
}

/*
div.itemsButtonDotL, div.itemsButtonDotM, div.itemsButtonDotR {
	position: absolute;
	left: 6px;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background-color: hsl(0, 0%, 100%);
}

div.itemsButtonDotM {
	left: 16px;
}

div.itemsButtonDotR {
	left: 26px;
}
*/

div.itemMenuPanelOpen, div.itemMenuPanelClosed, div.itemMenuPanelClosedInstant {
	position: absolute;
	z-index: 10;
	display: none;
	right: -3px;
	top: 50px;
	background-color: hsl(50, 95%, 70%);
	border: solid 3px hsl(0, 0%, 100%);
	border-top: none;
	/*border-right: none;*/
	padding: 5px;
	font-size: 0px;
	opacity: 1;
	transition: all 0.25s ease-out;
	pointer-events: auto;
}

/*.standardView div.itemMenuPanelClosed {*/
div.itemMenuPanelClosed {
	opacity: 0;
}

/*.standardView div.itemMenuPanelClosedInstant {*/
div.itemMenuPanelClosedInstant {
	opacity: 0;
	transition: none;
}

/*
.phoneView div.itemMenuPanelOpen, .phoneView div.itemMenuPanelClosed, .phoneView div.itemMenuPanelClosedInstant {
	transition: all 0.35s ease-out;
}

.phoneView div.itemMenuPanelClosed {
	right: -200px;
}

.phoneView div.itemMenuPanelClosedInstant {
	right: -200px;
	transition: none;
}
*/

.itemMenuButton, .itemMenuButtonActive {
	display: block;
	font-family: "StandardFontBold", "Arial", sans-serif;
	/*min-width: 150px;*/
	font-size: 18px;
	line-height: 38px;
	color: hsl(50, 25%, 25%);
	border-radius: 2px;
	padding: 0px 8px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
}

.phoneView .itemMenuButton, .phoneView .itemMenuButtonActive {
	line-height: 50px;
}

.standardView .itemMenuButton:hover {
	color: hsl(50, 25%, 25%) !important;
	background-color: hsl(50, 100%, 85%);
}

.itemMenuButtonActive {
	color: hsl(0, 0%, 100%);
	background-color: hsl(50, 35%, 50%);
	pointer-events: none;
}



/*** USER NAME ***/
/*
div.userNameButtonWrapperActive, div.userNameButtonWrapperInactive {
	display: inline-block;
	vertical-align: top;
	height: 50px;
	padding: 6px;
	font-size: 0px;
}

div.userNameButtonWrapperActive {
	background-color: hsl(194, 100%, 40%);
}
*/

div.userNameButton {
	display: inline-block;
	vertical-align: top;
	height: 38px;
	background-color: hsl(194, 100%, 40%);
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
}

.standardView div.userNameButton:hover {
	background-color: hsl(194, 100%, 50%);
}

div.userName {
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 38px;
	color: hsl(0, 0%, 100%);
	margin-left: 10px;
	margin-right: 30px;
}

svg.userNameButtonArrow {
	position: absolute;
	right: 8px;
	top: 10px;
	width: 15px;
	height: 20px;
	fill: hsl(194, 100%, 75%);
}

.standardView div.userNameButton:hover svg.userNameButtonArrow {
	fill: hsl(194, 100%, 85%);
}

div.headerButtonWrapperMenuActive svg.userNameButtonArrow {
	top: 9px;
	rotate: 180deg;
}

/*
div.userMenuPanelOpen, div.userMenuPanelClosed, div.userMenuPanelClosedInstant {
	position: absolute;
	z-index: 10;
	display: none;
	left: 0px;
	top: 50px;
	background-color: hsl(194, 100%, 40%);
	border: solid 1px hsl(0, 0%, 100%);
	border-top: solid 1px hsl(194, 100%, 35%);
	border-right: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 8px;
	font-size: 0px;
	opacity: 1;
	transition: opacity 0.25s linear;
}

div.userMenuPanelClosed {
	opacity: 0;
}

div.userMenuPanelClosedInstant {
	opacity: 0;
	transition: none;
}

.phoneView div.userMenuPanelOpen, .phoneView div.userMenuPanelClosed, .phoneView div.userMenuPanelClosedInstant {
	left: initial;
	right: 0px;
	border-bottom-right-radius: 0px;
}

.userMenuButton, .userMenuButtonActive {
	display: block;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	line-height: 34px;
	color: hsl(0, 0%, 100%);
	border-radius: 2px;
	padding: 0px 8px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
}

.standardView .userMenuButton:hover {
	color: hsl(0, 0%, 100%) !important;
	background-color: hsl(194, 100%, 50%);
}

.userMenuButtonActive {
	color: hsl(194, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
}
*/


/*** FOOTER PANEL ***/
div.footerPanel {
	position: absolute;
	display: flex;
	justify-content: space-around;
	z-index: 2;
	width: auto;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 81px;
	padding: 0px 15px;
	background-color: hsl(0, 0%, 100%);
	border-top: solid 1px hsl(208, 50%, 85%); /*hsl(0, 0%, 85%);*/
	text-align: center;
}

.footerPanelButtonNorm, .footerPanelButtonHL {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 60px;
	height: 58px;
	font-size: 0px;
	/*margin-left: 15px;*/
	pointer-events: auto;
	cursor: pointer;
}

.footerPanelButtonNorm:first-child, .footerPanelButtonHL:first-child {
	margin-left: 0px;
}

.footerPanelButtonNorm {
	opacity: 0.85;
	filter: grayscale(100%);
	/*filter: saturate(0%);*/
}

.footerPanelButtonHL {
	opacity: 1;
	pointer-events: none;
}

img.footerPanelButtonIcon {
	position: absolute;
	left: 18px;
	top: 10px;
	width: 24px;
	height: 24px;
}

div.footerPanelButtonLabel {
	position: absolute;
	width: auto;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 20px;
	line-height: 20px;
	color:  hsl(203, 100%, 50%);
	font-size: 14px;
	text-align: center;
}



/*** PAGE SECTION MENU ***/
div.pageSectionMenu {
	background-color: hsl(203, 100%, 38%);
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	padding: 8px;
	margin: 0px 10px;
	text-align: center;
}

.phoneView div.pageSectionMenu {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	margin: 0px 5px 0px 5px;
}

.pageSectionButtonNorm, .pageSectionButtonActive, .pageSectionButtonWire {
	display: inline-block;
	font-family: "StandardFontBold", "Arial", sans-serif;
	font-size: 18px;
	color: hsl(0, 0%, 100%);
	white-space: nowrap;
	line-height: 35px;
	padding: 0px 12px;
	border-radius: 4px;
	margin: 2px;
	cursor: pointer;
	pointer-events: auto;
}

.pageSectionButtonActive {
	color: hsl(203, 100%, 30%);
	background-color: hsl(0, 0%, 100%);
}

.standardView .pageSectionButtonNorm:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(203, 100%, 48%);
}

.pageSectionButtonWire {
	background-color: hsl(203, 100%, 48%);
	border: solid 1px hsl(203, 100%, 80%);
}

.standardView .pageSectionButtonWire:hover {
	background-color: hsl(203, 100%, 58%);
	border: solid 1px hsl(203, 100%, 85%);
}

div.pageSectionDiv {
	/*display: none;*/
	flex: 1;
	padding: 20px 0px;
	margin: 0px 35px 0px 35px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: auto;
}

.phoneView div.pageSectionDiv {
	margin: 0px 20px 0px 20px;
}
/*** MODIFIERS ***/
.opacity0 {
	opacity: 0 !important;
}
	
.fadeOut {
	opacity: 0 !important;
	transition: opacity 0.50s linear;
}

.fadeOutQuick {
	opacity: 0 !important;
	transition: opacity 0.25s linear;
}

.fadeIn {
	opacity: 1 !important;
	transition: opacity 0.50s linear;
}

.fadeInQuick {
	opacity: 1 !important;
	transition: opacity 0.25s linear;
}

.objectUnderInitPos, .objectUnderSlideIn {
	left: 0px !important;
}

.objectUnderSlideIn {
	transition: left 0.50s ease-out;
}

.objectUnderSlideOut {
	left: -200px !important;
	transition: left 0.50s ease-out;
}

.objectOverInitPos, .objectOverSlideOut {
	left: 100% !important;
}

.objectOverSlideOut {
	transition: left 0.50s ease-out !important;
}

.objectOverSlideIn {
	left: 0px !important;
	transition: left 0.50s ease-out !important;
}

.objectAnimTop {
	transition: top 0.50s ease-out !important;
}

.objectAnimLeft {
	transition: left 0.50s ease-out !important;
}

.objectAnimRight {
	transition: right 0.50s ease-out !important;
}

.vSpaceXXS {
	margin-top: 2px !important;
}

.phoneView .vSpaceXXS {
	margin-top: 1px !important;
}

.vSpaceXS {
	margin-top: 5px !important;
}

.phoneView .vSpaceXS {
	margin-top: 2px !important;
}

tr.vSpaceXS > td {
	padding-top: 5px !important;
}

.vSpaceS {
	margin-top: 8px !important;
}

.phoneView .vSpaceS {
	margin-top: 10px !important;
}

tr.vSpaceS > td {
	padding-top: 10px !important;
}

.vSpaceBS {
	margin-bottom: 10px !important;
}

.phoneView .vSpaceBS {
	margin-bottom: 10px !important;
}

.vSpaceSM {
	margin-top: 15px !important;
}

.phoneView .vSpaceSM {
	margin-top: 15px !important;
}

tr.vSpaceSM > td {
	padding-top: 15px !important;
}

.vSpaceM {
	margin-top: 20px !important;
}

.phoneView .vSpaceM {
	margin-top: 20px !important;
}

tr.vSpaceM > td {
	padding-top: 20px !important;
}

.vSpaceBM {
	margin-bottom: 20px !important;
}

.phoneView .vSpaceBM {
	margin-bottom: 8px !important;
}

.vSpaceL {
	margin-top: 30px !important;
}

.phoneView .vSpaceL {
	margin-top: 30px !important;
}

tr.vSpaceL > td {
	padding-top: 30px !important;
}

.vSpaceBL {
	margin-bottom: 30px !important;
}

.phoneView .vSpaceBL {
	margin-bottom: 30px !important;
}

.vSpaceXL {
	margin-top: 50px !important;
}

.phoneView .vSpaceXL {
	margin-top: 50px !important;
}

.vSpaceXXL {
	margin-top: 75px !important;
}

.phoneView .vSpaceXXL {
	margin-top: 75px !important;
}

.hSpaceXS {
	padding: 0px 2px !important;
}

.hSpaceS {
	padding: 0px 4px !important;
}

.hSpaceM {
	padding: 0px 8px !important;
}

.hSpaceL {
	padding: 0px 16px !important;
}

.hSpaceXL {
	padding: 0px 32px !important;
}

.hSpaceXXL {
	padding: 0px 64px !important;
}

.indentLeftM {
	padding-left: 10px;
}

.indentRightM {
	padding-right: 10px;
}

.indentLeftL {
	padding-left: 20px;
}

.indentRightL {
	padding-right: 20px;
}

.tableCellPadS td {
	padding: 5px;
}

.textCenter, .centerContents {
	text-align: center !important;
}

.textLeft, .contentsLeft {
	text-align: left !important;
}

.textRight, .contentsRight {
	text-align: right !important;
}

.textVertCenter, .vertCenterContents {
	vertical-align: middle !important;
}

table.vertCenterContents td {
	vertical-align: middle !important;
}

.vertAlignTop {
	vertical-align: top !important;
}

.vertAlignBottom {
	vertical-align: bottom !important;
}

.hLeft {
	margin-right: auto !important;
}

.hRight {
	margin-left: auto !important;
}

.hCenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.vCenter {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.bold {
	font-weight: bold !important;
}

.unBold {
	/*font-weight: normal !important;*/
	font-family: "StandardFontRegular", "Arial", sans-serif;
}

.italic {
	font-style: italic !important;
}

.noWrap {
	white-space: nowrap !important;
}

.textWrap {
	white-space: normal !important;
}

.noPad {
	padding: 0px !important;
}

.noPadTB {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.noBorder {
	border: none !important;
}

.noTopBorder {
	border-top: none !important;
}

.border {
	border: solid 2px hsl(0, 0%, 100%);
}

.shadow {
	box-shadow: 2px 2px 8px 1px hsla(0, 0%, 0%, 0.25);
}

.noPointerEvents, .pointerEventsNone {
 pointer-events: none !important;
}

.autoPointerEvents, .pointerEventsAuto {
	pointer-events: auto !important;
}

.allPointerEvents, .pointerEventsAll {
 pointer-events: all !important;
}

.widthPadXL {
	padding-left: 64px !important;
	padding-right: 64px !important;
}

.fullWidth {
	width: 100% !important;
}

.fullWidthAuto {
	width: auto !important;
	left: 0px !important;
	right: 0px !important;
}

.maxWidth {
	width: 99% !important;
}

.maxWidth500 {
	max-width: 500px !important;
}

.maxWidth600 {
	max-width: 600px !important;
}

.maxWidth700 {
	max-width: 700px !important;
}

.maxWidth1000 {
	max-width: 1000px !important;
}

.maxWidth1200 {
	max-width: 1200px !important;
}

.minWidth {
	width: 1% !important;
}

.fullHeight {
	height: 100% !important;
}

.fullHeightAuto {
	height: auto !important;
	top: 0px !important;
	bottom: 0px !important;
}

.opaque {
	opacity: 1.0 !important;
	filter: alpha(opacity=100) !important;
}

.translucent {
	opacity: 0.35 !important;
	filter: alpha(opacity=35) !important;
}

.lightTranslucent {
	opacity: 0.50 !important;
	filter: alpha(opacity=50) !important;
}

.tableDisplay {
	display: table !important;
}

.displayNone {
	display: none !important;
}

.blockDisplay, .displayBlock {
	display: block !important;
}

.inlineBlockDisplay, .displayInlineBlock {
	display: inline-block !important;
}

.displayFlex {
	display: flex;
}

.flexFlowColumn {
	flex-flow: column;
}

.visibilityHidden {
	visibility: hidden !important;
}

.visibilityVisible {
	visibility: visible !important;
}

.positionRelative {
	position: relative !important;
}

.positionAbsolute {
	position: absolute !important;
}

.positionFixed {
	position: fixed !important;
}

.hideOverflow {
	overflow: hidden !important;
}

.overflowAutoY {
	overflow-y: auto !important;
}

.borderBox {
	box-sizing: border-box !important;
}

.fontSize0 {
	font-size: 0px !important;
}

.maxWidth200 {
	max-width: 200px;
}

.maxWidth300 {
	max-width: 300px;
}

.maxWidth400 {
	max-width: 400px;
}

.maxWidth500 {
	max-width: 500px;
}

.maxWidth600 {
	max-width: 600px;
}

.maxWidth700 {
	max-width: 700px;
}

.maxWidth800 {
	max-width: 800px;
}

.maxWidth900 {
	max-width: 900px;
}

.maxWidth1000 {
	max-width: 1000px;
}

.vertScrollable {
	overflow-y: scroll !important; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch !important;
	pointer-events: auto !important;
}

.hiddenUntilHover {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.35s, filter 0.35s;
  transition: opacity 0.35s, filter 0.35s;
}

.hiddenUntilHover:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-webkit-transition: opacity 0.35s linear 1.0s, filter 0.35s linear 1.0s;
  transition: opacity 0.35s linear 1.0s, filter 0.35s linear 1.0s;
}

.selectable {
	-webkit-touch-callout: all !important;
	-webkit-user-select: all !important;
	-khtml-user-select: all !important;
	-moz-user-select: all !important;
	-ms-user-select: all !important;
	user-select: all !important;
}

.textSelectable {
	-webkit-touch-callout: text !important;
	-webkit-user-select: text !important;
	-khtml-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
}

.notSelectable {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: -moz-none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

.clickable, .clickable:hover, .clickable:active, .clickable:focus {
	cursor: pointer !important;
	pointer-events: all !important;
}

.notClickable {
	cursor: default !important;
	pointer-events: none !important;
}