@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
	--fonts: "Open Sans",Verdana,Tahoma,Arial,Helvetica,Helv,Geneva,Sans-Serif;
	--primary: #003366;
	--secondary: #e0e0e0;		/* #A2B1BF */
	--light-gray: #a9a9a9;
  --success-fg: #51a775;
  --danger-fg: #a75151;
}

* {
	margin: 0;
	padding: 0;
	font-family: var(--fonts);
}

body {
	font-family: var(--fonts);
	font-size: 14px;
	font-weight: normal;
	color: Black;
	background-color: White;
	width: 100%;
	height: 100%;
}

div,
p {
	margin: 0;
	padding: 0;
}

h1 {
	padding-bottom: 1em;
	font-size: 20px;
	font-weight: bold;
	color: var(--primary);
	text-align: center;	
}

#main-container h1 {
	text-align: left;
}

h2 {
	width: 300px;
	padding-bottom: 1em;
	font-size: 18px;
	font-weight: bold;
	color: var(--primary);
	text-align: left;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
textarea {
	border: 1px solid var(--light-gray);
	font-weight: normal;
	color: Black;
	/* width: 100%; */
	padding: 4px;
	box-sizing: border-box;
	resize: none;
  outline: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
select {
	height: 28px;
}

ul.no-indent {
    margin-left: 1.25em;
    padding: 0;
}

#wrapouter {
	width: 100%;
	height: 100%;
}

.screen-reader {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.really-long-line-break {
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap; /* HP printers */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
	word-break: break-all;
}

.break-word {
	overflow-wrap: break-word;
}


/* ****************************************************
 * Header
 **************************************************** */
#header {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

#header #logo {
	flex-basis: content;
}

#header #logo img {
	vertical-align: bottom;
}

#header #headerlinks {
	flex: 1;
	white-space: nowrap;
	text-align: right;
	padding-right: 1em;
	padding-bottom: .5em;
}

.welcome {
	font-weight: bold;
	font-style: italic;
	color: var(--primary);
}

/* ****************************************************
 * Common elements
 **************************************************** */

a:link		{ color: var(--primary); text-decoration: underline; }
a:visited	{ color: var(--primary); text-decoration: underline; }
a:hover		{ color: var(--secondary); text-decoration: none; }
a:active	{ color: var(--primary); text-decoration: underline; }

.button {
	margin-right: -2px;
	padding: 3px 8px;
	border: 1px solid var(--primary);
	background-color: var(--primary);
	color: White;
	cursor: pointer;
	text-decoration: none;
	font-weight: 600;
    border-radius: 4px;
	width: 80px;
	outline: none;
}

.button:hover:enabled {
	border-color: #0055aa;
	background-color: #0055aa;
}

.button:active:enabled {
	border-color: #0077dd;
	background-color: #0077dd;
}

.button:disabled {
	border-color: var(--light-gray);
	background-color: var(--light-gray);
	color: #eee;
	cursor: not-allowed;
}

.button-danger {
	border-color: #800;
	background-color: #800;
}

.button-danger:hover:enabled {
	border-color: #a00;
	background-color: #a00;
}

.button-danger:active:enabled {
	border-color: #c00;
	background-color: #c00;
}

.submit {
	padding-top: .5em;
	text-align: right;
}

input.input-error,
select.input-error {
	border: 1px solid red !important;
}

label.input-error {
	color: red !important;
}

.error {
	color: Red;
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	padding-bottom: 1em;
}

.danger {
  color: var(--danger-fg);
}

.success {
  color: var(--success-fg)
}


.edit-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

/* ****************************************************
 * Login page
 **************************************************** */

.main-inner {
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
	padding: 1em;
}

.fa-question-circle:hover {
	cursor: pointer;
}

.well {
	padding: 1em;
	background-color: #cfcfcf;
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
}

.well p:not(:last-child) {
	margin-bottom: .5em;
}

.instructions {
	padding-bottom: 2em;
}

.info-container > div {
	display: table-row;
}

.info-container > div > div {
	display: table-cell;
}

.info-container > div > div:first-child {
	font-weight: bold;
	white-space: nowrap;
}

.info-container > div > div:not(:first-child) {
	padding-left: .5em;
}

.info-container input {
	margin: 4px 0;
}

.info-container input[type="text"] {
	width: auto;
}

.info-container select option {
	padding: 4px 0;
	border: 1px solid var(--light-gray);
}

#membercard {
	text-align: center;
}

#loginlinks {
	width: 300px;
	padding: 1em;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
	text-align: center;
	color: var(--light-gray);
}

.contacttext {
	width: 441px;
}

/* ****************************************************
 * Register box
 **************************************************** */

	
.registerconfirmelement {
	float: left;
	width: 120px;
	font-weight: bold;
}

.registerconfirmvalue {
	float: left;
}

.registerdropdown,
.resetpassworddropdown {
	color: Black;
}

/* ****************************************************
 * Menu bar
 **************************************************** */

#main-container-narrow {
	margin: 2em auto;
	width: 340px;
}

#menubar {
	width: 100%;
	background-color: var(--primary);
	color: White;
	white-space: nowrap;
  margin-bottom: 2em;
}

#menu-wrapper {
	background-color: var(--primary);
	color: White;
	-webkit-transform: translate3d(0,0,0);		/* Safari z-index fix */
	z-index: 20;
}

#menubar ul {
	padding: .5em 0;
	margin: 0;
	list-style-type: none;
}

.form-inline {
	display: block;
}

.form-inline label:first-child {
	display: inline-block;
	width: 100px;
	vertical-align: baseline;
}

.form-inline input,
.form-inline select {
	margin: 5px 10px 5px 0;
}

.inline {
	display: flex;
	flex-wrap: wrap;
	vertical-align: baseline;
}

.inline div:first-child {
	margin-right: 8px;
}

.hidden {
	display: none;
}

progress[value] { border: none; -webkit-appearance: none; appearance: none; }
progress[value]::-webkit-progress-bar { background-color: #ddd; }
progress.weak[value] {color:red;} /* IE10 */
progress.weak::-webkit-progress-bar-value {background-color:red;}
progress.weak::-webkit-progress-value {background-color:red;}
progress.weak::-moz-progress-bar {background-color:red;}
progress.medium[value] {color:orange;} /* IE10 */
progress.medium::-webkit-progress-bar-value {background-color:orange;}
progress.medium::-webkit-progress-value {background-color:orange;}
progress.medium::-moz-progress-bar {background-color:orange;}
progress.strong[value] {color:green;} /* IE10 */
progress.strong::-webkit-progress-bar-value {background-color:green;}
progress.strong::-webkit-progress-value {background-color:green;}
progress.strong::-moz-progress-bar {background-color:green;}

.flex-middle {
  display: flex;
  align-items: center;
}

.gap-x-4px {
  column-gap: 4px;
}

/* ****************************************************
 * Tracking pages
 **************************************************** */

#track-message {
  margin-bottom: 8px;;
  column-gap: 8px;
  padding: 8px;
  justify-items: flex-start;
  align-items: center;
  display: none;
}

#track-message.track-success {
  background-color: #c3f3e7 !important;
  color: var(--success-fg) !important;
  border-left: 4px solid var(--success-fg)
}

#track-message.track-error {
  background-color: #f3c3c3 !important;
  color: var(--danger-fg) !important;
  border-left: 4px solid var(--danger-fg);
}


/* ****************************************************
 * Global Privacy Control
 **************************************************** */
#gpc {
  position: fixed;
  bottom: 2em;
  left: 1em;
  background-color: white;
  border: 1px solid #080;
  color: #080;
  padding: 4px 8px;
  border-radius: 5px;
}

#gpc-current-value {
  font-weight: bold;
}

#gpc-current-value.on {
  color: #080;
}

#gpc-current-value.off {
  color: #f00;
}

@media only screen and (min-width: 921px)
{
	#main-container {
		width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 920px) {
	#main-container {
		width: calc(100% - 2em);
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (min-width: 1053px)
{
	a.mobile {
		display: none;
	}

	#menubar a:link		{ color: inherit; background-color: inherit; text-decoration: none; }
	#menubar a:visited	{ color: inherit; background-color: inherit; text-decoration: none; }
	#menubar a:hover	{ color: var(--primary); background-color: White; text-decoration: none; }
	#menubar a:active	{ color: inherit; background-color: inherit; text-decoration: none; }

	#menubar #menu-wrapper {
		position: relative;
	}

	#menubar ul li {
		display: inline;
		padding: 0 1em;
	}

	#menubar ul li:hover {
		display: inline;
		padding: .5em 1em;
		background-color: #fff;
		color: var(--primary);
		cursor: pointer;
	}
}

@media only screen and (max-width: 1052px)
{
	a.mobile {
		display: inline-block;
	}

	a.mobile .fa-bars {
		font-size: 20px;
		padding: 4px;
	}

	#menubar ul a {
		font-size: 20px;
		line-height: 20px;
		padding: 12px 0;
		width: 100%;
		display: inline-block;
	}

	#menubar a:link		{ color: White; background-color: var(--primary); text-decoration: none; }
	#menubar a:visited	{ color: White; background-color: var(--primary); text-decoration: none; }
	#menubar a:hover	{ color: var(--primary); background-color: White; text-decoration: none; }
	#menubar a:active	{ color: var(--primary); background-color: White; text-decoration: none; }	

	#menubar #menu-wrapper {
		position: absolute;
	}

	#menubar ul li {
		padding: 0 1em;
	}

	#menubar ul {
		display: none;
	}

	#menubar ul.is-active {
		display: block;
	}
}

@media only screen and (min-width: 601px)
{
	#main-container-medium {
		margin: 2em auto;
		width: 450px;
	}

	.small-width,
	.narrow-width {
		display: none;
	}
}

@media only screen and (max-width: 600px)
{
	#header #logo img {
		max-width: 100%;
	}

	#main-container-medium {
		margin: 2em auto;
		width: 330px;
	}

	.data-table table tbody td {
		line-height: 1.5em;
	}

	.medium-width-or-above {
		display: none;
	}
}

@media only screen and (min-width: 341px) {
	.narrow-width {
		display: none;
	}
}

@media only screen and (max-width: 340px) {
	#main-container-narrow {
		margin: 2em auto;
		width: calc(100% - 2em) !important;
	}

	#main-container-medium {
		margin: 2em auto;
		width:calc(100% - 2em) !important;
	}

	#main-container-medium p {
		margin: 0;
	}

	.medium-width-or-above,
	.small-width {
		display: none;
	}

	.form-inline label:first-child {
		display: block;
	}
}

#menubar a.mobile:link		{ color: White; background-color: var(--primary); text-decoration: none; }
#menubar a.mobile:visited	{ color: White; background-color: var(--primary); text-decoration: none; }
#menubar a.mobile:hover		{ color: var(--primary); background-color: White; text-decoration: none; }
#menubar a.mobile:active	{ color: White; background-color: var(--primary); text-decoration: none; }
	
/* ****************************************************
 * My Messages, My Claims / My Referrals
 **************************************************** */

.container {
	font-weight: normal;
	color: black;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.wide {
	width: 900px;
}

.round-borders {
	border: 1px solid var(--primary); 
    border-radius: 8px;
	padding: 1em;
}

.mt-1 {
	margin-top: 1em;
}

.mt-2 {
	margin-top: 2em;
}

.mb-1 {
	margin-bottom: 1em;
}

.mb-2 {
	margin-bottom: 2em;
}

.pt-1, .top-pad1 {
	padding-top: 1em;
}

.pb-1, .bottom-pad {
	padding-bottom: 1em;
}

.ps-1, .left-pad1 {
	padding-left: 1em;
}

.py-1 {
  padding-top: 1em;
  padding-bottom: 1em;
}


.w-full {
  width: 100%;
}

#mymessageswrapper,
.data-wrapper,
.data-wrapper-wide,
.chart-wrapper {
	font-weight: normal;
	width: 700px;
	color: var(--primary);
	margin-left: auto;
	margin-right: auto;
}

.chart-wrapper,
.data-wrapper-wide {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.rounded {
	border: 1px solid var(--primary);
    border-radius: 8px;
}

#mymessageswrapper h2,
.data-wrapper h2 {
	font-weight: bold;
	width: 100%;
	text-align: left;
}

#mymessages {
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
}

#mymessages,
.data-table,
.data-chart,
.data-form {
	font-weight: normal;
	color: black;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
	overflow-x: auto;
}

.data-table table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}

.data-table tbody tr.clickable:hover {
	background-color: var(--primary) !important;
	color: #fff;
	cursor: pointer;
}

.data-chart {
	border: none;
	margin-bottom: 2em;
}

.data-form {
	padding: 1em;
}

.memo {
	padding: 1em 0;
	float: left;
	text-align: center;
	width: 140px;
}

#mymessages th,
.data-table th {
	vertical-align: bottom;
	padding: .5em;
	background-color: var(--primary);
	color: White;
	font-weight: bold;
}

#mymessages td,
.data-table td {
	padding: 8px .5em;
}

tr.odd {
	background-color: White;
}

tr.even {
	background-color: var(--secondary);
}

.data-table table:not(.row-border) tbody tr:not(.odd):not(.even):nth-child(odd) {
	background-color: White;
}

.data-table table:not(.row-border) tbody tr:not(.odd):not(.even):nth-child(even) {
	background-color: var(--secondary);
}

.data-table table.row-border tbody tr.row-start:not(:first-child) td {
	border-top: 1px solid var(--primary);
}


#mymessages a:link		{ color: var(--primary); text-decoration: underline; }
#mymessages a:visited	{ color: var(--primary); text-decoration: underline; }
#mymessages a:hover		{ color: White; background-color: var(--primary); text-decoration: underline; }
#mymessages a:active	{ color: White; background-color: var(--primary); text-decoration: underline; }

.data-table a:link		{ color: var(--primary); text-decoration: underline; }
.data-table a:visited	{ color: var(--primary); text-decoration: underline; }
.data-table a:hover		{ color: White; background-color: var(--primary); text-decoration: underline; }
.data-table a:active	{ color: White; background-color: var(--primary); text-decoration: underline; }

#mymessages #nomessages {
	width: 300px;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	color: Red;
	margin-left: auto;
	margin-right: auto;
	padding: 2em 0;
}

#claimdetail1,
#claimdetail2,
#referraldetail1,
#referraldetail2,
#labdetail2 {
	font-weight: normal;
	color: black;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
	overflow: hidden;
}

#claimdetail1.wide,
#claimdetail2.wide,
#referraldetail1.wide, 
#referraldetail2.wide, 
#labdetail2.wide {
	width: 900px;
}

#claimdetail1 p,
#referraldetail1 p {
	padding: .5em 0;
}

#claimdetail1 label,
#referraldetail1 label {
	font-weight: bold;
}

#claimdetail1,
#referraldetail1 {
	padding: 1em 0;
}

#claimdetail2 th {
	color: White;
	background-color: var(--primary);
	vertical-align: bottom;
}

#referraldetail2 td:first-child {
	color: White;
	background-color: var(--primary);
	vertical-align: top;
	padding: .5em 0;
	font-weight: bold;
	text-align: center;
}

#labdetail2 th {
	color: White;
	background-color: var(--primary);
	vertical-align: top;
	padding: .5em .25em;
}

#claimdetail2 td {
	border-top: 1px solid var(--primary);
	border-right: 1px solid var(--primary);
	padding: .5em 0;
}

#referraldetail2 td {
	padding: .5em .5em;
}

#labdetail2 td {
	border-top: 1px solid var(--primary);
	padding: .5em .5em;
}

#referraldetail2 .border-contrast {
	border-top: 1px solid White;
}

#referraldetail2 .border {
	border-top: 1px solid var(--primary);
}

.more-details {
	font-size: 12px;
	font-style: italic;
}

.chart-title {
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 0.5em;
	text-align: center;
	color: var(--primary);
}

.data-entry {
	padding: 1em;
}

/* ****************************************************
 * Nifty Rounded Corners
 **************************************************** */

div#niftydialog, div.niftydialog {
	background-color: #cfcfcf;
} 
div.rounded div {
  height: 1px;
  overflow: hidden;
}
#radiusx, #radiusy {
  text-align: right;
  width: 30px;
}

/* ****************************************************
 * Agreement
 **************************************************** */
#agreement {
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
	padding: 1em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#agreement div {
	padding-bottom: 1em;
}

#agreement ol,
#agreement ul {
	padding-bottom: 1em;
	margin-left: 3em;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.left-side {
	float: left;
}

.right-side {
	float: right;
}

.clear {
	clear: both;
}

.clearfix:after { 
	content: "."; 
	visibility: hidden; 
	display: block; 
	height: 0; 
	clear: both;
}

.nowrap {
	white-space: nowrap;
}

img.ui-datepicker-trigger {
	margin-left: 8px;
}

.tabular tr:hover, .hoverable:hover {
    background: var(--primary) !important;
	color: #fff;
}    

.clickable {
	cursor: pointer;
}

.noclick {
	cursor: default;
}

.sortable td.columnheader:not(.sorttable_nosort), .sortable thead td:not(.sorttable_nosort), .sortable th:not(.sorttable_nosort) {
	cursor: pointer;
}

.sortable td.nosort, .sortable td.sorttable_nosort {
	cursor: default;
}

#overlay {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 400%;
	text-align :center;
	z-index: 1000;
	background-image:url(../images/transparentoverlay.gif);
}

#overlay .popup {
	padding: 1em;
	background-color: #fff;
	color: #000000;
	font-family: var(--fonts);
	font-weight: normal;
	min-height: 80px;
	border: 1px solid var(--light-gray);
	z-index: 5000;
	box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.75);
	box-sizing: border-box;
	display: none;
}

.popup .content {
	position: relative;
	text-align: left;
	height: auto;
	min-height: 24px;
	max-height: calc(100% - 32px);
	overflow-y: auto;
	box-sizing: border-box;
}

.popup .content p {
	padding: 0 0 1em 0;
	
}

.popup .content p:last-child {
	padding: 0;
}

.popup .content ul {
	margin-left: 2em;
	padding: 0 0 1em 0;
}

.popup .footer {
	padding-top: .5em;
	box-sizing: border-box;
}

.top {
	vertical-align: top;
}

.info-item {
	line-height: 2em;
}

.text-smaller {
  font-size: 0.9em;
}

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

#video-body {
	width: 100%;
	height: 450px;
	max-height: 450px !important;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.wait, .wait * {
	cursor: wait !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

#loader-container {
	display: none;
	z-index: 20000;
	position: fixed;
	width: 100px;
	left: calc(50vw - 50px);
	top: calc(50vh - 24px);
	background-color: #fff;
	border: 1px solid #0C4C8B;
	border-radius: 6px;
	opacity: 0.85;
}

.loader,
.loader:after {
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.loader-small,
.loader-small:after {
	width: 16px !important;
	height: 16px !important;
}

.loader-big,
.loader-big:after {
	width: 48px !important;
}

.loader {
	margin: 20px auto;
	font-size: 4px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(45, 71, 137, 0.2);
	border-right: 1.1em solid rgba(45, 71, 137, 0.2);
	border-bottom: 1.1em solid rgba(45, 71, 137, 0.2);
	border-left: 1.1em solid #0C4C8B;
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@media print
{
	#headerlinks, #menubar, .no-print {
		display: none;
	}

	#main-container {
		width: calc(100% - 2em);
		margin-left: auto;
		margin-right: auto;
	}

	.data-table {
		width: 100%;
		overflow: hidden;
	}

		.data-table table thead th {
			font-size: 12px;
		}


		.data-table table tbody td {
			line-height: 1.2em;
			font-size: 12px;
		}
}