@font-face
{
	font-family: "ITCAvantGardePro";
	src: url("/css/webfonts/ITCAvantGardePro-Book.eot?v=20200101");
	src: url("/css/webfonts/ITCAvantGardePro-Book.eot?v=20200101#iefix") format("embedded-opentype"),
			url("/css/webfonts/ITCAvantGardePro-Book.woff2?v=20200101") format("woff2"),
			url("/css/webfonts/ITCAvantGardePro-Book.woff?v=20200101") format("woff"),
			url("/css/webfonts/ITCAvantGardePro-Book.ttf?v=20200101") format("truetype"),
			url("/css/webfonts/ITCAvantGardePro-Book.svg?v=20200101#ITCAvantGardeProBook") format("svg");
	font-weight: 400;
	font-style: normal;
}
@font-face
{
	font-family: "ITCAvantGardePro";
	src: url("/css/webfonts/ITCAvantGardePro-Medium.eot?v=20200101");
	src: url("/css/webfonts/ITCAvantGardePro-Medium.eot?v=20200101#iefix") format("embedded-opentype"),
			url("/css/webfonts/ITCAvantGardePro-Medium.woff2?v=20200101") format("woff2"),
			url("/css/webfonts/ITCAvantGardePro-Medium.woff?v=20200101") format("woff"),
			url("/css/webfonts/ITCAvantGardePro-Medium.ttf?v=20200101") format("truetype"),
			url("/css/webfonts/ITCAvantGardePro-Medium.svg?v=20200101#ITCAvantGardeProMedium") format("svg");
	font-weight: 500;
	font-style: normal;
}
@font-face
{
	font-family: "ITCAvantGardePro";
	src: url("/css/webfonts/ITCAvantGardePro-Demi.eot?v=20200101");
	src: url("/css/webfonts/ITCAvantGardePro-Demi.eot?v=20200101#iefix") format("embedded-opentype"),
			url("/css/webfonts/ITCAvantGardePro-Demi.woff2?v=20200101") format("woff2"),
			url("/css/webfonts/ITCAvantGardePro-Demi.woff?v=20200101") format("woff"),
			url("/css/webfonts/ITCAvantGardePro-Demi.ttf?v=20200101") format("truetype"),
			url("/css/webfonts/ITCAvantGardePro-Demi.svg?v=20200101#ITCAvantGardeProDemi") format("svg");
	font-weight: 600;
	font-style: normal;
}
@font-face
{
	font-family: "ITCAvantGardePro";
	src: url("/css/webfonts/ITCAvantGardePro-Bold.eot?v=20200101");
	src: url("/css/webfonts/ITCAvantGardePro-Bold.eot?v=20200101#iefix") format("embedded-opentype"),
			url("/css/webfonts/ITCAvantGardePro-Bold.woff2?v=20200101") format("woff2"),
			url("/css/webfonts/ITCAvantGardePro-Bold.woff?v=20200101") format("woff"),
			url("/css/webfonts/ITCAvantGardePro-Bold.ttf?v=20200101") format("truetype"),
			url("/css/webfonts/ITCAvantGardePro-Bold.svg?v=20200101#ITCAvantGardeProBold") format("svg");
	font-weight: 700;
	font-style: normal;
}
:root
{
	--light-grey: #d3d3d3;
	--light-grey-background: #f2f2f2;
	--black-hover: #333333;
	--font-colour: #505050;
	--font-colour-rgb: 80,80,80;

	--dark-red: #721c24;
	--dark-red-rgb: 114,28,36;
}

html { font-size: 16px; color: var(--font-colour); font-family: ITCAvantGardePro, sans-serif; background-color: var(--light-grey-background); }
body { width: 100%; min-width: 320px; font-size: 16px; color: var(--font-colour); font-family: ITCAvantGardePro, sans-serif; background-color: var(--light-grey-background); }
body.dialog-body { background-color: white; }

/* general styles */
h1 { margin-bottom: 30px; font-weight: 600; font-size: 34px; color: var(--font-colour); }
@media (min-width: 576px)
{
	h1 { font-size: 42px; }
}
h2 { margin-top: 60px; margin-bottom: 30px; font-weight: 600; font-size: 30px; color: var(--font-colour); }
h2.first { margin-top: 0px; }
h3 { margin-top: 45px; margin-bottom: 15px; font-weight: 600; font-size: 24px; color: var(--font-colour); }
h3.first { margin-top: 0px; }
h4 { margin-top: 45px; margin-bottom: 15px; font-weight: 600; font-size: 20px; color: var(--font-colour); }

img { vertical-align: bottom; }
img.loading-image { height: 32px; }
canvas { vertical-align: top; }
a { color: var(--font-colour); outline-color: var(--font-colour); transition: color 200ms, background-color 200ms; }
a:focus, a:hover { text-decoration: none; }
a img { border: none; }
a.edit-link { opacity: 0.1; transition: opacity 200ms; }
iframe { vertical-align: top; }
p { margin-bottom: 15px; }

label { padding: 0px; }

.alert { padding: 11px 15px; min-height: 48px; border-radius: 0px; }
span.alert { display: block; }
.alert.margin-bottom-10 { margin-bottom: 10px; }

input[type="checkbox"], input[type="radio"] { cursor: pointer; }
.form-check { margin-bottom: 0px; padding-left: 25px; }
.form-check .form-check-input { margin-left: -20px; margin-right: 0px; margin-top: 14px; margin-bottom: 14px; padding-right: 0px; font-size: 20px; }
.form-check-inline { margin-right: 25px; }
.form-check-label { padding-left: 10px; padding-top: 12px; padding-bottom: 12px; }
.form-check-label[for] { cursor: pointer; }
.form-check .form-check-input:checked { background-color: var(--font-colour); border-color: var(--font-colour); }
.form-check input[type="text"].form-check-input { width: 100%; margin-left: 10px; margin-top: 0px; margin-bottom: 0px; padding-right: 0.75rem; font-size: 1rem; }
.form-check::after { display: block; clear: both; content: ""; }

.form-group { margin-bottom: 20px; }
.form-group label { font-weight: bold; margin-bottom: 0px; }
.form-group label.form-check-label { font-weight: normal; margin-bottom: 0px; }
.form-group .alert { margin-top: 8px; margin-bottom: 0px; }
.form-group .alert + .form-text { margin-top: 20px; }

.form-group.buttons { margin-top: 20px; }
.form-group + .form-group.buttons { margin-top: 40px; }
.form-group.buttons.first { margin-top: 0px; }
.form-group.buttons .btn { margin-right: 20px; margin-bottom: 20px; }
.form-group.buttons .btn:last-child { margin-right: 0px; }
.form-group.buttons .btn + .alert { margin-top: 0px; }

.form-control { border-color: var(--bs-border-color); }
.form-control:focus, select.form-select:focus, .form-check-input:focus { border-color: var(--light-grey); box-shadow: 0 0 0 .25rem rgba(var(--font-colour-rgb), .25); }
input.form-control, select.form-select, .form-control.readonly, textarea.form-control { height: auto; min-height: 48px; padding-top: 11px; padding-bottom: 11px; border-radius: 0px; padding-left: 15px; padding-right: 15px; }
input.form-control-sm, select.form-select-sm { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
.form-control.readonly { display: block; background-color: var(--light-grey-background); border: solid 1px var(--bs-border-color); }

.has-error label { color: var(--dark-red); }
.has-error .form-control, .has-error select.form-select, .has-error .form-check-input { border-color: var(--dark-red); }
.has-error .form-control:focus, .has-error select.form-select:focus, .has-error .form-check-input:focus { border-color: var(--dark-red); box-shadow: 0 0 0 .2rem rgba(var(--dark-red-rgb),.25); }
.has-error .form-group label { color: var(--font-colour); }
.has-error .form-group .form-control { border-color: var(--bs-border-color); }
.has-error .form-group .form-control:focus { border-color: var(--font-colour); box-shadow: 0 0 0 .25rem rgba(var(--font-colour-rgb), .25); }

.form-text { font-size: 14px; color: var(--font-colour); }

/* button styles */
.btn { padding: 8px 60px; min-height: 48px; font-size: 20px; font-weight: 500; }
@media (min-width: 576px)
{
	.btn { padding-left: 90px; padding-right: 90px; } 
}
.btn-sm { padding: 4px 15px; min-height: 32px; font-size: 14px; font-weight: 500; }
.btn-primary
{
	--bs-btn-bg: black;
	--bs-btn-border-color: black;
	--bs-btn-disabled-bg: var(--black-hover);
	--bs-btn-disabled-border-color: var(--black-hover);
	--bs-btn-hover-bg: var(--black-hover);
	--bs-btn-hover-border-color: var(--black-hover);
	--bs-btn-active-bg: var(--black-hover);
	--bs-btn-active-border-color: var(--black-hover);
	--bs-btn-border-radius: 0px;
	--bs-btn-disabled-opacity: 1;
	padding-left: 30px; padding-right: 30px; width: 100%; max-width: 240px;
}

.btn.loading img { height: 32px; vertical-align: top; }
.btn.btn-sm.loading img { height: 24px; }

/* modal styles */
.modal { --bs-modal-margin: 15px; }
body.modal-open { width: 100%; }
.modal-content .btn-close { position: absolute; top: -15px; right: -5px; background: none; opacity: 1; z-index: 1; }
.modal-body { padding: 0px; border-radius: 0px; overflow: hidden; }
.modal-body img.loading-image { vertical-align: top; margin-top: 20px; margin-left: 20px; }
.modal-backdrop.show { background-color: black; opacity: 0.75; }
div.dialog-body { padding: 20px; }
iframe.dialog-iframe { width: 100%; height: 0px; }
@media (min-width: 576px)
{
	.modal { --bs-modal-width: 540px; }
}
@media (min-width: 768px)
{
	.modal { --bs-modal-width: 720px; }
}
@media (min-width: 992px)
{
	.modal { --bs-modal-width: 960px; }
}
@media (min-width: 1200px)
{
	.modal { --bs-modal-width: 1140px; }
}

/* page loading overlay styles */
div.page-loading-overlay-backdrop { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999998; background-color: var(--light-grey-background); opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay { position: fixed; top: 40%; left: 50%; width: 200px; margin-left: -100px; margin-top: -30px; padding-top: 20px; padding-bottom: 20px; text-align: center; background-color: white; z-index: 99999999; border: 2px solid var(--font-colour); border-radius: 0px; opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay-backdrop.fade-out { opacity: 0; }
div.page-loading-overlay.fade-out { opacity: 0; }

/* container styles */
div.content-container { background-color: white; }

/* logo styles */
div.logo { text-align: center; padding-top: 20px; padding-bottom: 20px; }
div.logo img { width: 100%; max-width: 160px; }

/* banner styles */
div.banner img { width: 100%; }

/* instructions styles */
div.instructions { text-align: center; padding-top: 30px; padding-bottom: 15px; font-size: 18px; }

/* form styles */
div.form-container { padding-bottom: 30px; }
div.form-container-inner { background-color: var(--light-grey-background); padding-top: 30px; padding-bottom: 10px; }
p.mandatory-note { font-size: 12px; }
@media (min-width: 768px)
{
	div.form-container { padding-bottom: 45px; }
	div.form-container-inner { padding-top: 45px; padding-bottom: 25px; }
	p.mandatory-note { text-align: right; }
}
.form-check label { font-size: 14px; }
.form-check .form-check-input { margin-top: 12px; }

/* footer styles */
div.footer { padding-top: 30px; padding-bottom: 60px; font-size: 12px; }
@media (min-width: 768px)
{
	div.footer { padding-top: 45px; }
}
div.footer a { text-decoration: none; }
div.footer a:focus, div.footer a:hover { text-decoration: underline; }
