@charset "UTF-8";
/* CSS Document */

:root {
       	--max-width: 1024px;
        --header-height: 150px;
        --main-padding: 0.5rem;
        --footer-height: 80px;
        --disabled-text-color: hsl(0, 0%, 50%);
        --button-height: 2.5rem;
        --zebra-stripe-color: hsl(0, 0%, 96%);
        --banner-red: #BE0403;
        --banner-grey: #EEE;
        --gunmetal: #1F1F1F;
        --dark-grey: #505050;
	--gunmetal-text: #CCC;
	--dark-grey-text: #EEE;
}
@font-face {
	font-family: 'BlissCE';
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/blissCE.woff") format("woff");
}


div.block {
	margin-bottom: 2em !important;
}

.clear_float {
	clear: both;
}

#main-content form label {
	margin-top: 0;
	margin-bottom: 0.5em;
}

#main-content form div textarea {
	resize: vertical;
}

#main-content form div label span {
	display: inline-block;
	left: 180px;
	position: relative;
}

input.right {
	float: right;
}

#main-content form div {
	margin-bottom: 0.5em;
	clear: both;
}

#main-content form div label {
	display: inline-block;
	font-weight: bold;
	cursor: pointer;
	width: 120px;
	vertical-align: top;
}

#main-content form div > label:first-child {
	margin-right: 5px;
	width: 225px;
}

#main-content > form > div > label:not(:first-child),
#main-content > form > div > label.not_first_child {
	width: 100px;
}

#main-content form div.bordered label:not(:first-child),
#main-content form div.bordered label.not_first_child {
	width: 110px;
}

#main-content form div input.indent {
	margin-left: 160px !important;
}

#main-content form div.indent {
	margin-left: 2em;
}

#main-content form div select.slight_indent {
	margin-left: 50px;
}

#main-content form div input.slight_indent {
	margin-left: 2.75em;
}

#main-content form div label.text_indent {
	padding-left: 1em;
	margin-right: -5px;
}

#main-content form div.confirmation {
	margin-top: 2em;
	padding-left: 4em;
}

#main-content form div.confirmation input[type="checkbox"] {
	display: inline-block;
	margin-right: 2em;
	margin-top: 0.25em;
}

#main-content form div label.text_area_label {
	vertical-align: top;
}

#main-content form input[type="text"] {
	width: 270px;
	height: 3.5em;
}

#main-content form input[type="checkbox"] {
	margin-right: 1em;
}

#main-content form input[type="text"],
#main-content form textarea {
	border: 1px solid #999999;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
	-moz-background-size: auto auto;
	-moz-border-radius: 5px;
	-webkit-background-clip: border;
	-webkit-background-inline-policy: continuous;
	-webkit-background-origin: padding;
	-webkit-background-size: auto auto;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 0.5em;
}

#main-content form select {
	width: 280px;
	height: 3em;
}

#main-content form p {
	padding: 8px 0 2px 0;
}

#main-content form textarea {
	width: 267px;
	display: inline-block;
}

#main-content form textarea.wide {
	width: 470px;
}

#main-content form textarea.indent {
	margin-left: 3em;
}

#main-content form label.wide {
	width: 300px !important;
}

#main-content form p.wide {
	margin-right: 30%;
}

#main-content form select.wide {
	width: 465px;
}

#main-content form label.widest {
	width: 440px !important;
	display: inline-block;
}

#main-content form input.top {
	vertical-align: top;
	margin-top: 0.75em;
}

#main-content form input[type="radio"] {
	margin: 0 0.5em;
}

#main-content form input[type="submit"],
#main-content form input[type="button"] {
	margin-top: 2em;
	position: relative;
}

#main-content form #next_button {
	float: right;
}

#main-content form #prev_button {
	float: left;
}

.hidden {
	display: none !important;
}

#main-content form label.error {
	color: red;
	font-size: 11px;
	font-weight: bold;
	float: right;
	width: 225px !important;
	margin-top: 6px;
	line-height: 12px;
}

#main-content form label.error:before {
	width: 11px;
	height: 11px;
	border-radius: 6px;
	background-color: red;
	color: white;
	font-weight: bold;
	font-size: 11px;
	text-align: center;
	line-height: 11px;
	content: 'X';
	border: 1px solid black;
	display: inline-block;
	margin-right: 5px;
}

#main-content form select + label.error {
	margin-top: 0;
}

#main-content form div.confirmation label.error {
	float: none;
	width: auto !important;
	margin-left: 20em;
}

label.full_width {
	width: auto !important;
}

#main-content form #arrival_details {
	margin-bottom: 2em;
}

#main-content form #homestay_details label:not(:first-child),
#main-content form #homestay_details label.not_first_child,
#main-content form #study_uow_block label:not(:first-child),
#main-content form #study_uow_block label.not_first_child {
	width: 90px;
}

#main-content form label.top {
	vertical-align: top !important;
}

#main-content form #specified_insurance {
	display: inline-block;
	margin-left: 5em;
}

#main-content form h3 {
	margin-top: 0.5em;
}


footer h3 {
	line-height: 1;
}
footer .block {
	display: block;
}
footer .small {
	font-size: 0.75rem;
	line-height: 2;
}
footer .spaced {
	letter-spacing: 0.5px;
}
footer section.gunmetal a {
	color: var(--gunmetal-text);
	text-decoration: none;
}

.right {
	text-align: right;
}

table.invoice_quote {
	width: 100%;
	margin-top: 1em;
}

table.invoice_quote th {
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: black;
}

table.invoice_quote th:first-child {
	border-width: 1px;
}

table.invoice_quote th,
table.invoice_quote td {
	padding: 0 6px;
	margin: 0;
}

table.invoice_quote td.total {
	border-top: 1px solid black;
	border-bottom: 3px double black;
}

.compulsory:after {
	content: " *";
	color: red;
	font-weight: bold;
}

p.fine {
	font-weight: lighter;
}

p.grey {
	color: #333;
}

p.italic {
	font-style: italic;
}


body {
	color: #3B3B3B;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.03571em;
	line-height: 1.25;
	margin: 0;
}

header {
	background: linear-gradient(to bottom, var(--banner-red) 0%, var(--banner-red) 80%, var(--banner-grey) 80%, var(--banner-grey) 100%) no-repeat;
	height: var(--header-height)
}

.banner,
main,
.footer-content {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
	width: auto;
}

.banner {
	background: url("../images/CoA-transparent.svg") no-repeat 0px 17px/250px, linear-gradient(to bottom, var(--banner-red) 0%, var(--banner-red) 80%, var(--banner-grey) 80%, var(--banner-grey) 100%) no-repeat;
	height: var(--header-height);
	position: relative;
}
header h1 {
	color: white;
	font-family: BlissCE;
	font-size: 1.75rem;
	margin-top: 0;
	padding-left: 300px;
	padding-top: 2.125rem;
}

main {
	padding: var(--main-padding);
}

main h1 {
	border-bottom: 4px solid #606060;
	font-weight: 500;
	padding-bottom: 4px;
}
main h1::after {
	border-bottom: 1px solid #D7D7D7;
	content: '';
	display: block;
}
h3 {
	font-weight: 500;
	letter-spacing: -0.5px;
}

ul {
	line-height: 1.75rem;
	margin-top: 0;
	padding-inline-start: 1rem;
}

h3 + p,
p + p {
	margin-top: 0;
}


.row {
	clear: both;
	display: flex;
        flex-direction: row;
}

.column_1_2 {
        flex-basis: 50%;
	flex-shrink: 0;
}

.column_1_3 {
	flex-basis: 33%;
	flex-shrink: 0;
}

.column_1_4 {
	flex-basis: 25%;
	flex-shrink: 0;
}

.icon,
.icon svg {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
}
.icon {
	border-radius: 0.25rem;
	box-shadow: black 1px 1px 1px;
	padding: 0.25rem
}
.icon svg.stroke-white {
	color: white;
	stroke-width: 0.5;
	stroke: hsl(0, 100%, 0%);
	fill: currentColor;
}

.icon.red {
	background-color: hsl(9, 100%,	42%);
}
.icon.red:hover {
	background-color: hsl(9, 100%, 37%);
}
.icon.fb {
	background-color: hsl(220, 46%, 48%);
}
.icon.fb:hover {
	background-color: hsl(220, 46%, 38%);
}


footer section.gunmetal {
	background-color: var(--gunmetal);
	color: var(--gunmetal-text);
}
footer section.dark-grey {
	background-color: var(--dark-grey);
	color: var(--dark-grey-text);
}

@media only screen and (max-width: 650px) {
	:root {
		--button-height: 3rem
	}

	form {
		display: block;
		position: relative;
		width: calc(100vw - 2 * var(--main-padding));
	}

	.ui-datepicker {
		left: 1.25vw !important;
		width: 96vw !important;
	}
	.row {
		flex-direction: column;
	}
	.column_1_2 {
		flex-basis: 100%;
	}
}

@media only screen and (max-width: 590px) {
        .wide {
               	width: 97% !important;
        }

	.indent {
                margin-left: 0 !important;
        }

	textarea {
                width: auto;
        }

	#main-content form label.wide,
        #main-content form label.widest {
                width: auto !important;
        }
}

@media only screen and (max-width: 850px) {
        #main-content form label.error {
                float: none;
                width: auto !important;
        }
}