/* Minification failed. Returning unminified contents.
(22,25): run-time error CSS1039: Token not allowed after unary operator: '-page-bg'
(29,25): run-time error CSS1039: Token not allowed after unary operator: '-banner-bg'
(30,30): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(58,14): run-time error CSS1039: Token not allowed after unary operator: '-banner-client'
(64,14): run-time error CSS1039: Token not allowed after unary operator: '-banner-title'
(70,14): run-time error CSS1039: Token not allowed after unary operator: '-banner-user'
(79,14): run-time error CSS1039: Token not allowed after unary operator: '-button-logout-fg'
(80,25): run-time error CSS1039: Token not allowed after unary operator: '-button-logout-bg'
(91,25): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg'
(98,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-item'
(101,22): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg'
(107,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-item'
(112,22): run-time error CSS1039: Token not allowed after unary operator: '-menu-accent'
(138,25): run-time error CSS1039: Token not allowed after unary operator: '-footer-bg'
(149,14): run-time error CSS1039: Token not allowed after unary operator: '-footer-fg'
(154,14): run-time error CSS1039: Token not allowed after unary operator: '-footer-fg'
(168,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(174,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(179,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(183,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(188,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(197,14): run-time error CSS1039: Token not allowed after unary operator: '-link'
(227,14): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(228,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-bg'
(229,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(235,31): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(250,14): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(251,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-bg'
(252,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(259,14): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(265,32): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(277,14): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-fg'
(278,25): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-bg'
(290,25): run-time error CSS1039: Token not allowed after unary operator: '-major-heading'
(296,14): run-time error CSS1039: Token not allowed after unary operator: '-minor-heading'
(326,25): run-time error CSS1039: Token not allowed after unary operator: '-banner-bg'
(337,14): run-time error CSS1039: Token not allowed after unary operator: '-hint'
(414,14): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-fg'
(415,25): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-bg'
(423,32): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(506,14): run-time error CSS1039: Token not allowed after unary operator: '-hint'
(558,14): run-time error CSS1039: Token not allowed after unary operator: '-hint'
(586,14): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(587,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-bg'
(588,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(594,14): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-fg'
(595,25): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-bg'
(596,25): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-fg'
(603,14): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-fg'
(604,25): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-bg'
(605,25): run-time error CSS1039: Token not allowed after unary operator: '-button-selected-fg'
(615,14): run-time error CSS1039: Token not allowed after unary operator: '-minor-heading'
(647,14): run-time error CSS1039: Token not allowed after unary operator: '-table-header-fg'
(648,25): run-time error CSS1039: Token not allowed after unary operator: '-table-header-bg'
(656,14): run-time error CSS1039: Token not allowed after unary operator: '-table-header-fg'
(1076,14): run-time error CSS1039: Token not allowed after unary operator: '-major-heading'
(1083,14): run-time error CSS1039: Token not allowed after unary operator: '-major-heading'
(1090,14): run-time error CSS1039: Token not allowed after unary operator: '-major-heading'
(1097,14): run-time error CSS1039: Token not allowed after unary operator: '-minor-heading'
(1105,14): run-time error CSS1039: Token not allowed after unary operator: '-minor-heading'
(1113,14): run-time error CSS1039: Token not allowed after unary operator: '-minor-heading'
(1275,14): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(1276,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-bg'
(1277,25): run-time error CSS1039: Token not allowed after unary operator: '-button-secondary-fg'
(1460,25): run-time error CSS1039: Token not allowed after unary operator: '-banner-bg'
(1461,25): run-time error CSS1039: Token not allowed after unary operator: '-banner-bg'
(1494,14): run-time error CSS1039: Token not allowed after unary operator: '-hint'
 */
@font-face {
	font-family: "NoticeArchiveIcons";
	src: url("fonts/NoticeArchiveIcons.woff2") format("woff2");
}




/* Layout 
-------------------------- */
html {
	height: 100%; /* For sticky footer */
}

body {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: .85em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: var(--page-bg);
	height: 100%; /* For sticky footer */
}

/* Header & footer layout */
nav {
	width: 100%;
	background-color: var(--banner-bg);
	box-shadow: 0 3px 15px var(--shadow);
	position: relative; /* To let bottom shadow fall over page content */
}

.pml-header-logo {
	float: left;
}

.pml-header-apps {
	min-width: 200px;
	padding-top: 3px;
}

.pml-header-apps .left-apps {
	padding: 0 10px;
	float: left;
}

.pml-header-apps .right-apps {
	margin-right: 10px;
	float: right;
	height: 41px;
}

.pml-header-apps .title-client {
	display: inline-block;
	font-size: 2em;
	font-weight: bold;
	color: var(--banner-client);
}

.pml-header-apps .title-application {
	display: inline-block;
	font-size: 2em;
	color: var(--banner-title);
}

.pml-header-apps .title-name {
	display: inline-block;
	font-size: 0.85em;
	color: var(--banner-user);
	margin-right: 10px;
}

.pml-header-apps .logout {
	display: inline-block;
}

.pml-header-apps .logout input[type="submit"] {
	color: var(--button-logout-fg);
	background-color: var(--button-logout-bg);
}

.pml-header-apps .logout input[type="submit"]:hover {
	box-shadow: none; /* Shadows don't look good if the header is dark */
}


.pml-header-buttons {
	clear: both;
	padding: 5px 7px 7px 30px;
	background-color: var(--menu-bg);
	font-weight: bold;
}


div.pml-header-buttons a {
	display: inline-block;
	color: var(--menu-item);
	padding: 4px 4px;
	margin: 6px 8px 4px 8px;
	border-bottom: var(--menu-bg) solid 2px; /* Placeholder border for hover */
}

div.pml-header-buttons a:link,
div.pml-header-buttons a:visited,
div.pml-header-buttons a:active {
	color: var(--menu-item);
}

div.pml-header-buttons a:hover {
	text-decoration: none;
	border-bottom: var(--menu-accent) solid 2px;
}

div.pml-header-buttons .homeButton {
	position: relative;
	top: 2px;
}





.pml-main-body {
	min-height: 100%; /* For sticky footer */
}

.pml-main-container {
	padding: 0px 0px 24px 0px;
}

.pml-main-content {
	padding: 0px 16px 40px 16px;
}


footer {
	background-color: var(--footer-bg);
	/* For sticky footer */
	min-height: 24px;
	position: relative;
	margin-top: -24px;
	clear: both;
}

footer > div {
	font-size: 0.85em;
	padding-top: 4px;
	color: var(--footer-fg);
	text-align: center;
}

footer > div a, footer > div a:link, footer > div a:visited {
	color: var(--footer-fg);
}



p {
	line-height: 1.5em;
	margin: 4px 0;
}




a {
	color: var(--link);
	text-decoration: none;
	cursor: pointer;
}

a:link {
	color: var(--link);
	text-decoration: none;
}

a:visited {
	color: var(--link);
}

a:hover {
	color: var(--link);
	text-decoration: underline;
}

a:active {
	color: var(--link);
}


a.bigLink,
a.bigLink:link,
a.bigLink:visited,
a.bigLink:hover,
a.bigLink:active {
	color: var(--link);
	font-weight: bold;
}

div.bigLink { /* Fake/disabled big links */
	
	font-weight: bold
}

a.buttonLink {
	min-width: 80px;
	margin: 2px 10px 2px 2px;
}

a.mediumButtonLink {
	width: 150px;
}

a.wideButtonLink {
	width: 350px;
}

a.buttonLink:link,
a.buttonLink:visited,
a.buttonLink:hover,
a.buttonLink:active {
	display: inline-block;
	padding: 2px 8px;
	text-align: center;
	border-radius: 6px;
	color: var(--button-secondary-fg);
	background-color: var(--button-secondary-bg);
	border: 1px solid var(--button-secondary-fg);
}

.buttonLink:hover {
	text-decoration: none;
	filter: brightness(105%);
	box-shadow: 3px 3px 7px var(--shadow);
}

.buttonLink:active {
	box-shadow: none;
}


.bigButtonLink {
	display: inline-block;
	font-size: 1.5em;
	width: 170px;
	padding: 2px 0;
	text-align: center;
	border-radius: 6px;
	color: var(--button-secondary-fg);
	background-color: var(--button-secondary-bg);
	border: 1px solid var(--button-secondary-fg);
}

a.bigButtonLink:link,
a.bigButtonLink:visited,
a.bigButtonLink:hover,
a.bigButtonLink:active {
	color: var(--button-secondary-fg);
}

.bigButtonLink:hover {
	text-decoration: none;
	filter: brightness(105%);
	box-shadow: 4px 4px 10px var(--shadow);
}

.bigButtonLink:active {
	box-shadow: none;
}


a.buttonLink.primaryButton:link,
a.buttonLink.primaryButton:visited,
a.buttonLink.primaryButton:hover,
a.buttonLink.primaryButton:active {
	color: var(--button-primary-fg);
	background-color: var(--button-primary-bg);
	border: none;
	font-weight: bold;
	padding: 4px 10px;
}


.dashboardItem {
	display: inline-flex;
	align-items: start;
	margin-top: 20px;
	padding: 12px;
	border: 1px solid var(--major-heading);
	border-radius: 5px;
	background-color: #f0f0f0;
}

.dashboardIcon {
	color: var(--minor-heading);
	margin-right: 12px;
}

.dashboardMessage {
	width: 350px;
	margin-bottom: 8px;
}

.requiredField::before {
	content: "*";
	color: #d00;
}


.field-validation-error {
	color: #ff0000;
}




.clientLogo {
	background-image: url("/Resources/Logo");
	background-repeat: no-repeat;
	background-size: contain;
	width: 350px;
	height: 80px;
	display: inline-block;
	overflow: hidden;
	background-color: var(--banner-bg);
}

.pml-header-logo .clientLogo {
	height: 40px;
	width: 330px;
}



.fieldHeader {
	color: var(--hint);
	font-weight: bold;
}



/* Forms */
select,
input[type="text"],
input[type="password"] {
	border: 1px solid #ccc;
	padding: 2px 4px;
	font-size: 1.1em;
	color: #444;
	background-color: #fff;
	width: 100px;
}

select:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {
	border: 1px solid #ccc;
	color: #999;
	background-color: #fafafa;
}


select {
	min-width: 110px;
}



input[type="text"].datePicker {
	width: 100px;
}


input[type="text"].mediumTextBox,
input[type="password"].mediumTextBox {
	width: 200px;
}

input[type="text"].wideTextBox {
	width: 400px;
}

.wideSelect {
	width: 200px;
}


input[type="checkbox"],
input[type="radio"] {
	margin: -2px 2px 0px 2px;
	vertical-align: middle;
}

input[type="checkbox"].bigCheckbox {
	margin: -3px 2px 0px 2px;
	width: 18px;
	height: 18px;
}


input[type="submit"],
input[type="button"],
button[type="submit"] {
	padding: 4px 10px;
	margin: 2px 10px 2px 2px;
	min-width: 50px;
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	outline: none;
	color: var(--button-primary-fg);
	background-color: var(--button-primary-bg);
}



input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover {
	box-shadow: 4px 4px 10px var(--shadow);
	filter: brightness(105%);
}

input[type="submit"]:active,
input[type="button"]:active,
button[type="submit"]:active {
	box-shadow: none;
}

input[type="submit"].bigButton,
input[type="button"].bigButton,
button[type="submit"].bigButton {
	font-size: 1.2em;
	padding: 6px 12px;
	min-width: 110px;
}

input[type="submit"].alertButton,
input[type="button"].alertButton,
button[type="submit"].alertButton {
	background-color: #b52a2a;
}



.editor .inputField {
	position: relative; /* So that field icons can be positioned to overlap the text fields */
	display: inline-block;
	padding: 0px 0 2px 0;
	margin: 4px 0;
}

.editor .inputField .smallIconSheet {
	position: absolute;
	top: 6px;
	left: 4px;
}

.editor .inputFieldLabel {
	display: inline-block;
	width: 150px;
	text-align: right;
	padding-right: 4px;
}

.editor .inputFieldTopLabel {
	vertical-align: top;
	margin: 6px 0 4px 0;
}


.editor .inputField .innerLabel {
	padding: 0 4px 0 8px;
}

.editor .inputFieldValidation {
	display: inline-block;
	padding-left: 4px;
	/*
	height: 1em;
	padding-left: 170px;
		*/
}

.editor .inputFieldDisplay {
	font-weight: bold;
	font-size: 1.1em;
}



.editor input[type="text"],
.editor input[type="password"],
.editor select {
	padding: 6px 4px 6px 4px;
}


.editor .hintText {
	padding: 10px 0 0 170px;
	max-width: 450px;
	font-size: 0.95em;
	color: var(--hint);
}

.editor input[type="text"].iconInput,
.editor select.iconInput {
	padding: 6px 4px 6px 30px;
}





.formButtons {
	padding-top: 20px;
	padding-left: 160px;
}




/*
.pageSection .verificationFields {
	min-height: 160px;
}
*/


.noticeActions{
	margin-left: 30px;
}

.noticeAction {
	margin-bottom: 20px;
}

.noticeAction p {
	margin-left: 20px;
	max-width: 600px;
}


.disabledAction {
	color: #777;
	font-weight: bold;
}


.subscriptionAction {
	margin-bottom: 6px;
}

.subscriptionNote {
	color: var(--hint);
	font-weight: bold;
}

.unsubscriptionNote {
	color: #777;
	font-weight: bold;
}



.formDescription {
	max-width: 600px;
}


/* Pagination */
.pagination {
	margin-left: 30px;
	display: inline-block;
}

.pagination .pageLink {
	border-radius: 3px;
	padding: 2px 2px 0 2px;
	display: inline-block;
	min-width: 16px;
	text-align: center;
	color: var(--button-secondary-fg);
	background-color: var(--button-secondary-bg);
	border: 1px solid var(--button-secondary-fg);
}

.pagination .pageLink:hover {
	text-decoration: none;
	box-shadow: 3px 3px 7px #ccc;
	color: var(--button-selected-fg);
	background-color: var(--button-selected-bg);
	border: 1px solid var(--button-selected-fg);
}

.pagination .selectedPage {
	font-weight: bold;
	font-size: 1.1em;
	padding: 3px 3px 3px 3px;
	color: var(--button-selected-fg);
	background-color: var(--button-selected-bg);
	border: 1px solid var(--button-selected-fg);
}

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

.resultCount {
	display: inline-block;
	font-weight: bold;
	color: var(--minor-heading);
	padding-bottom: 10px;
	margin-top: 10px;
}



/* Tables */
.resultTable {
	border-collapse: collapse;
	background-color: #fff;
	margin: 0;
	text-align: left;
}

.resultTable td {
	padding: 4px 16px 4px 16px;
	border: solid 1px #ddd;
	vertical-align: top;
}



.resultTable .tableAltRow,
.resultTable .tableAutoAltRow:nth-child(even) {
	background-color: #f0f0f0;
}



.resultTable th {
	padding: 6px 6px 4px 8px;
	color: var(--table-header-fg);
	background-color: var(--table-header-bg);
	vertical-align: baseline;
	font-weight: bold;
	font-size: 0.95em;
}


.resultTable th a:visited, th a:link {
	color: var(--table-header-fg);
}

.resultTable .selectedHeader {
	font-style: italic;
}

.resultTable th span {
	font-size: 0.85em;
	font-weight: normal;
}

.resultTable input[type=checkbox] {
	padding: 0px;
}



.resultTable .checkboxColumn {
	padding: 2px 8px 0 8px;
}

.resultTable .rowHeader {
	font-family: "museo-sans-rounded", Helvetica, Verdana, Sans-Serif;
	font-weight: 700;
	padding-left: 3px;
}

.resultTable .enterValue {
	background-color: #eee;
}

.resultTable .tableAltRow .enterValue {
	background-color: #ddd;
}

.resultTable .selectedRow {
	background-color: #e0f0f7;
}

.resultTable .tableAltRow.selectedRow,
.resultTable .tableAutoAltRow.selectedRow:nth-child(even) {
	background-color: #d4e3eb;
}

/* Option for more row spacing on complicated tables */
.resultTable .spacedRow > td {
	padding-top: 4px;
	padding-bottom: 4px
}

/* Only right side works for single-pixel borders */
.resultTable .separatorColumn {
	border-right: solid 1px #777;
}

/* Nested tables */
.resultTable .tableCell {
	padding: 0;
}

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

.tableCell table td {
	border-left: none;
	border-right: none;
	border-bottom: none;
	border-top: solid 1px #ddd;
	font-size: 0.85em;
	padding: 0 4px 0 4px;
}

/* Like tableCell, but normal font & no borders */
.resultTable .tableLayoutCell {
	padding: 2px 8px 2px 8px;
}

.tableLayoutCell table {
	border-collapse: collapse;
}

.tableLayoutCell table td {
	border: none;
	padding: 2px 4px 0 4px;
	vertical-align: baseline;
}

/* Additional table column formats */
.numericColumn {
	text-align: right;
}

.detailLabelColumn {
	text-align: right;
	width: 100px;
	float: left;
}

.detailValueColumn {
	text-align: right;
	font-weight: bold;
	width: 90px;
	float: left;
	margin-bottom: 2px;
}

.detailOtherValueColumn {
	text-align: right;
	font-style: italic;
	width: 90px;
	float: left;
	margin-bottom: 2px;
}


.tableDetailKeyValue {
	display: flex;
	align-items: baseline;
}


.tableDetailKey {
	text-align: right;
	margin-right: 10px;
	width: 80px;
}

.tableDetailValue {
	width: 100%;
}

.tableDetailLineSpace {
	margin-top: 4px;
}

.tableDetailRowSpace {
	margin-top: 4px;
}

.tableDetailHeaderLabel {
	display: none;
}

.tableDetailAccount {
	text-align: right;
}

.tableDetailDetails {
}

.tableDetailAmount {
	text-align: right;
	width: 80px;
}

.tableDetailDate {
	text-align: right;
	width: 100px;
}

.tableDetailAmountCell {
}

.tableDetailPayNowCell {
	margin-top: 8px;
	text-align: right;
}

.tableDetailBig {
	font-size: 1.2em;
}

.tableDetailBold {
	font-weight: bold;
}




/* Deprecated */
.resultNoticeDescription {
	font-style: italic;
}




.dateColumn {
	text-align: right;
	white-space: nowrap;
}

.nowrapColumn {
	white-space: nowrap;
}


.noticeDetailLabel {
	padding: 0 0 4px 20px;
	text-align: right;
	vertical-align: top;
}

.noticeDetailValue {
	padding: 0 0 4px 8px;
	font-weight: bold;
}


/* Markdown */

.markdown {
	margin-left: 30px;
	line-height: 1.3em;
	max-width: 800px;
	display: inline-block;
}

.markdown h1 {
	line-height: 1em;
	margin-left: -20px;
	font-weight: bold;
}

.markdown h2 {
	font-size: 1em;
}

.markdown p {
	margin: 6px 0 6px 0;
}

.markdown ul {
	margin: 6px 0 12px 0;
}

.markdown li {
	margin: 4px 0 6px 0;
}










/* Icons */
.smallIconSheet {
	background-image: url("icons/smallicons.png");
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	overflow: hidden;
}

.smallIconEmail {
	background-position: 0 0;
}

.smallIconUser {
	background-position: -16px 0;
}

.smallIconLock {
	background-position: -32px 0;
}

.smallIconKey {
	background-position: -48px 0;
}

.smallIconCopy {
	background-position: -64px 0;
}

.smallIconHome {
	background-position: 0 -16px;
}

.smallIconDownload {
	background-position: -16px -16px;
}

.smallIconLeave {
	background-position: -32px -16px;
}

.smallIconOk {
	background-position: 0px -32px;
}

.smallIconBan {
	background-position: -16px -32px;
}


.mediumIconSheet {
	background-image: url("icons/smallicons.png");
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	display: inline-block;
	overflow: hidden;
}

.mediumIconPdf {
	background-position: 0px -96px;
}





.fontIcon {
	font-family: NoticeArchiveIcons;
	font-weight: normal;
	font-size: 16px;
}

.fontIconSmall {
	font-family: NoticeArchiveIcons;
	font-weight: normal;
	font-size: 11px;
}

.fontIconLarge {
	font-family: NoticeArchiveIcons;
	font-weight: normal;
	font-size: 32px;
}

.fontIconHome::before {
	content: "a";
}

.fontIconDownload::before {
	content: "b"; 
}

.fontIconLeave::before {
	content: "c";
}

.fontIconAlert::before {
	content: "d";
}


/* Auth icons */

.authProviderIcon {
	float: left;
	margin-right: 8px;
}

.authProviderIcon-Microsoft {
	background-position: 0 -64px;
}

.authProviderIcon-Google {
	background-position: -16px -64px;
}

.authProviderIcon-Facebook {
	background-position: -32px -64px;
}

.authProviderIcon-Twitter {
	background-position: -48px -64px;
}




/* Payment icons */
.paymentIconSheet {
	background-image: url("icons/paymenticons.png");
	background-repeat: no-repeat;
	width: 64px;
	height: 64px;
	display: inline-block;
	overflow: hidden;
}

.paymentIconDollar {
	background-position: 0 0;
}

.paymentIconBPay {
	background-position: -64px 0;
}

.paymentIconBillpay {
	background-position: -128px 0;
}

.paymentIconBPoint {
	background-position: -192px 0;
}




/* General page stuff */


.pageSection {
	margin-left: 4%;
}

.pageSection h1 {
	font-size: 5em;
	font-weight: normal;
	color: var(--major-heading);
	margin: 20px 0;
}

.pageSection h2 {
	font-size: 3em;
	font-weight: normal;
	color: var(--major-heading);
	margin: 20px 0 20px 4px;
}

.pageSection h3 {
	font-size: 1.7em;
	font-weight: normal;
	color: var(--major-heading);
	margin: 10px 0 10px 4px;
}

.pageSection h4 {
	font-size: 1.5em;
	font-weight: normal;
	color: var(--minor-heading);
	margin: 10px 0 10px 6px;
}

.pageSection h5 {
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
	color: var(--minor-heading);
	margin: 10px 0 4px 8px;
}

.pageSection h6 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	color: var(--minor-heading);
	margin: 10px 0 4px 0;
}



.pageSection .pageSubsection {
	margin-left: 8px;
}




/* Payment options */
.paymentOptionsTable {
	border-spacing: 0;
}

.paymentOptionsTable h4 {
	margin-left: 0;
}

.paymentOptionsTable p {
	max-width: 600px;
	margin-left: 8px;
}

.paymentOptionsTable td {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.paymentOptionsTable .paymentLogoCell {
	border-right: 1px solid #ddd;
	padding-right: 16px;
}

.paymentLogoCell .clientLogo {
	width: 64px;
	height: 32px;
	background-position-y: center;
	border-radius: 4px;
}


.paymentOptionsTable .paymentDescriptionCell {
	border-left: 1px solid #ddd;
	padding-left: 16px;
}


/* Generally useful stuff
-------------------------- */
.clear {
	clear: both;
}

.hidden {
	display: none !important; /* Override elements that might have display:block etc */
}

.invisible {
	visibility: hidden;
}

.leftFloat {
	float: left;
}

.nowrap {
	white-space: nowrap;
}

.smallText {
	font-size: 0.85em;
}

.relativePointAnchor {
	position: relative;
	width: 0;
	height: 0;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alertColour, .alertColour a {
	color: #f00;
}

.warnColour, .warnColour a {
	color: #CC5E00;
}

.successColour, .successColour a {
	color: #080;
}

.disabledColour, .disabledColour a {
	color: #777;
}

.defaultColour, .defaultColour a {
	color: #000;
}




.verificationHintImage {
	width: auto;
	max-width: 350px;
	height: 120px;
	display: inline-block;
	box-shadow: 2px 2px 5px #bbb;
	border: 1px solid #ddd;
	margin: 10px 0 0 15px;
}





.settingDescription {
	margin-left: 20px;
}

.settingExternalEmail {
	font-style: italic;
}

.currentSetting {
	font-weight: bold;
}

.settingExternalLoginTable {
	margin-top: 10px;
	margin-left: 20px;
}

.settingExternalLoginTable th {
	padding: 2px 4px;
	font-weight: normal;
}

.settingExternalLoginTable .infoCell {
	padding: 8px;
}

.settingAddProviders {
	margin-bottom: 20px;
}

.settingAddProviders .externalProviderButton {
	margin-top: 4px;
	font-weight: normal;
	min-width: 200px;
	text-align: left;
	padding: 8px;
	color: var(--button-secondary-fg);
	background-color: var(--button-secondary-bg);
	border: 1px solid var(--button-secondary-fg);
}



/* Login */
.loginBox {
	color: #444;
	background-color: #ffffff;
	box-shadow: 0 15px 40px #ddd;
	/*box-shadow: 0 15px 40px rgba(0,0,0,0.1);*/
	border-radius: 24px;
	display: inline-block;
	position: absolute;
	width: 900px;
	height: 600px;
	top: 10%;
	left: 50%;
	margin: 0px 0 0 -450px;
}

/* Placeholder to stop the footer moving up over the absolute positioned login box when browsing in a small window */
.loginBoxPlaceholder {
	height: 700px;
}

.loginBox .loginMainHead {
	font-size: 3em;
	font-weight: bold;
}

.loginBox .loginMainHeadSmaller {
	font-size: 2.5em;
	font-weight: bold;
}

.loginBox .loginSubHead {
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 20px;
}

.loginBox .loginWelcomeHead {
	font-size: 1.3em;
	margin: 0 0 20px 60px;
}

.loginBox .loginWelcomeHead span {
	font-weight: bold;
}



.loginBox .logoBanner {
	padding: 8px;
	border-radius: 10px;
}


.loginBox .loginLeftLogo {
	float: left;
	width: 380px;
	padding: 30px 0 0 80px;
}

.loginBox .loginRight {
	float: right;
	width: 350px;
	padding: 60px 20px 0 0;
}

.loginBox .loginLeft {
	float: left;
	width: 380px;
	padding: 16px 0 0 80px;
}


.loginBox .registerRightLogo {
	float: right;
	padding: 30px 90px 0 0;
	width: 380px;
}

.loginBox .registerLeft {
	width: 350px;
	float: left;
	padding: 60px 0 0 40px;
}

.loginBox .verifyLeft {
	float: left;
	width: 350px;
	padding: 40px 0 0 40px;
}

.loginBox .registerLeftWide {
	width: 450px;
	float: left;
	clear: both;
	padding: 60px 0 0 90px;
}

.loginBox .registerRight {
	float: right;
	width: 380px;
	padding: 16px 90px 0 20px;
}






.loginBox .inputField {
	position: relative; /* So that field icons can be positioned to overlap the text fields */
	display: inline-block;
	width: 320px;
	padding: 10px 0 2px 0;
	border-bottom: 1px solid #777;
	margin-bottom: 2px;
}

.loginBox .inputField .smallIconSheet {
	position: absolute;
	top: 16px;
	left: 4px;
}

.loginBox .inputFieldValidation {
	height: 1em;
}


.loginBox .rememberMe {
	margin: 10px 0 25px 0;
}

.loginBox .termsConditions {
	margin: 10px 0 2px 0;
}

.loginBox .verifyButton {
	margin: 20px 0 0 0;
}


.loginBox .recoveryButton {
	margin: 20px 0 30px 0;
}


.loginBox .verificationFields {
	height: 120px;
}

.loginBox .forcedNoticeType {
	font-weight: bold;
	margin: 10px 0 0 0;
}


.loginBox input[type="text"],
.loginBox input[type="password"] {
	width: 290px;
	padding: 6px 0 6px 30px;
	border: none;
}

.loginBox select {
	padding: 6px 0 6px 30px;
	border: none;
}

.loginBox input:focus,
.loginBox select:focus {
	outline: none;
}



.loginBox .clientLogo {
	margin: 10px 0 0 0;
	background-color: var(--banner-bg);
	border: 8px solid var(--banner-bg);
	width: 364px; /* 350px + compensation for border */
	border-radius: 6px;
}


.loginBox .mainImage {
	background-repeat: no-repeat;
	background-size: cover;
	width: 380px;
	height: 380px;
	display: inline-block;
	overflow: hidden;
	border-radius: 6px;
}

.loginBox .mainImageLogin {
	background-image: url("/Resources/SignIn");
}

.loginBox .mainImageRegister {
	background-image: url("/Resources/Register");
}

.loginBox input[type="submit"].bigButton,
.loginBox button[type="submit"].bigButton {
	padding: 15px 12px;
	margin-right: 60px;
}


.loginBox .registerNote {
	font-size: 0.85em;
	color: var(--hint);
	margin: 10px 0 25px 0;
}

.loginBox .registerNow {
	margin: 16px 0 0 0;
}

.loginBox .fieldHeader {
	margin-top: 20px;
}

.loginBox .hintHeader {
	font-weight: bold;
	margin: 15px 0 4px 0;
}

.loginBox .hintText {
	padding: 0 0 0 15px;
}



.loginBox .externalLoginHeader {
	margin-top: 20px;
}

.loginBox .loginButtons {
}

.loginBox .externalProviderButton {
	margin-top: 4px;
	background-color: #fff;
	color: #666;
	font-weight: normal;
	border: 1px solid #ddd;
	min-width: 120px;
	text-align: left;
	padding: 8px;
}

.loginBox .externalProviderButton:hover {
	background-color: #eee;
	box-shadow: 2px 2px 5px #bbb;
	border-color: #ccc;
}








/* Responsive */
@media screen and (max-width: 950px) {
	.pageSection {
		margin-left: 0px;
	}

	.pageSection h1 {
		font-size: 4em;
		margin: 10px 0;
	}

	.pageSection h2 {
		font-size: 2.5em;
		margin: 10px 0 10px 4px;
	}


	.detailLabelColumn {
		padding-right: 20px;
	}

	.detailValueColumn {
		float: right;
		clear: left;
		margin-bottom: 6px;
	}

	.detailOtherValueColumn {
		float: right;
		clear: left;
		margin-bottom: 6px;
	}



	.noticeTable,
	.noticeTable thead,
	.noticeTable tbody,
	.noticeTable th,
	.noticeTable td,
	.noticeTable tr {
		display: block;
	}


	.noticeTable thead tr {
		display: none;
	}


	.noticeTable td {
		border: none;
		padding: 4px 16px 4px 16px;
	}

	.noticeTable tr {
		border: solid 1px #ddd;
	}




	.tableDetailHeaderLabel {
		display: block;
	}


	.tableDetailValue {
		width: initial;
	}

	.tableDetailRowSpace {
		margin-top: 12px;
	}

	.tableDetailAmount {
		width: initial;
	}

	.tableDetailDate {
		width: initial;
	}

	.tableDetailAmountCell {
		display: inline-block;
	}

	.tableDetailPayNowCell {
		display: inline-block;
		vertical-align: top;
		margin-top: 4px;
		margin-left: 20px;
	}






	/* Login */
	.loginBox {
		position: static;
		margin: 20px 0 0 0;
		display: block;
		width: auto;
		height: auto;
		border-radius: 15px;
	}

	.loginBox .loginBoxContent {
		width: 450px;
		margin: 0 auto;
	}

	.loginBoxPlaceholder {
		height: auto;
	}


	.loginBox .loginLeftLogo {
		float: none;
		padding: 10px 0 0 50px;
	}

	.loginBox .loginRight {
		width: auto;
		float: none;
		padding: 20px 0 0 50px;
	}

	.loginBox .loginLeft {
		float: none;
		padding: 10px 0 16px 50px;
	}


	.loginBox .registerRightLogo {
		float: none;
		padding: 10px 0 0 50px;
	}

	.loginBox .registerLeft {
		width: auto;
		float: none;
		padding: 20px 0 0 50px;
	}

	.loginBox .verifyLeft {
		width: auto;
		float: none;
		padding: 20px 0 0 50px;
	}

	.loginBox .registerLeftWide {
		width: auto;
		float: none;
		clear: both;
		padding: 20px 0 50px 50px;
	}

	.loginBox .registerRight {
		float: none;
		padding: 10px 0 16px 50px;
	}

}


@media screen and (max-width: 500px) {

	.pml-main-content{
		padding: 2px; /* Tiny bit of padding so that tables with borders don't cause bottom scrollbar to appear */
	}

	.loginBox {
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		padding-bottom: 5px; /* Seems to need some padding to make the space below the main image behave */
	}

	.loginBox .loginBoxContent {
		width: auto;
	}

	.loginBox .mainImage {
		display: block;
		width: 300px;
		height: 300px;
		margin-top: 30px;
	}


	.loginBox .loginLeftLogo {
		padding: 0;
		width: auto;
	}

	.loginBox .loginRight {
		padding-left: 10px;
	}

	.loginBox .loginLeft {
		padding-left: 10px;
	}


	.loginBox .registerRightLogo {
		padding: 0;
		width: auto;
	}

	.loginBox .registerLeft {
		padding-left: 10px;
	}

	.loginBox .verifyLeft {
		padding-left: 10px;
	}

	.loginBox .registerLeftWide {
		padding-left: 10px;
	}

	.loginBox .registerRight {
		padding-left: 10px;
	}


}