/******* simple_blue stylesheet updated 4-28-2016 - Liz Scherer ***********/
body {
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.5em;
    &.fontSourceSansProLoaded {
        h1, h2, h3, h4 {
            font-family: "Source Sans Pro", sans-serif;
        }
    }
}
.container {
	width: 100%;
	max-width: 45em;
	margin: 1em auto;
	padding-right: 1em;
	padding-left: 1em;
}
h1, h2, h3, h4 {
	color: #005b9c;
	font-family: sans-serif;
	margin: 1em 0 .3em;
}
h1 {
	font-size: 2.5em;
	line-height: 1.2em;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 400;
	font-style: normal;
}
h2 {
	font-size: 1.8em;
	line-height: 1em;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 400;
	font-style: normal;
}
h3 {
	font-size: 1.2em;
	line-height: 1.5em;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 400;
	font-style: normal;
}
h4 {
	font-weight: 400;
	font-style: normal;
}
p {
	margin-bottom: 1em;
}
form {
	border: 1px solid #347cb0;
	padding: 1.5em;
	border-radius: 1em;
	background-color: #ccdeeb;
	margin-top: 1em;
	margin-bottom: 1em;
}
.errorlist.nonfield {
	list-style-type: none;
	position: absolute;
	top: 100px;
	background-color: rgba(255, 255, 255, .9);
	border: 1px solid red;
	padding-top: 30px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin-left: -40px;
	border-radius: 1em;
}
.errorlist li{
list-style-image:none;
}
.errorlist.nonfield li{
color:red;
font-size:22px;
}

.progress-container {
    margin-bottom: 30px;
}

.progress-container .progress-text-line {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #2B211E;
}

.progress-container .progress-bar {
    height: 4px;
    background: #FBF1EB;
    border-radius: 10px;
    overflow: hidden;
}

.progress-container .progress-fill {
    height: 100%;
    width: 0;
    background: #005b9c;
}

@media screen and (min-width:38em) {
form {
	padding: 1.5em 3em;
}
h1 {
	margin-top: 0;
}
}
.btn-primary {
	background-color: #005b9c;
	color: #fff;
}
.form-control {
	width: 100%;
	height: 3em;
	margin-top: .3em;
	border: 1px solid #347cb0;
	border-radius: .5em;
	background-color: #eee;
	font-size: 16px;
}
.form-group {
	margin-bottom: 24px;
}
.buttons-wrapper {
	text-align: center;
}
.buttons-wrapper button {
	max-width: fit-content;
    min-width: 25%;
	padding: 0 10px;
	height: 3em;
	margin-top: .5em;

	border: none;
	border-radius: .5em;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 900;
	font-style: normal;
	/*
	 * The button centres the label's line box, whose Bootstrap .btn line-height (1.42857143) and
	 * font ascent/descent are sized for mixed case - uppercase glyphs sit high in it. Trimming the
	 * box to cap height and baseline centres the glyphs themselves (older browsers ignore it).
	 */
	text-box: trim-both cap alphabetic;
}
/*
 * The consent tooltip wrapper stands in the row for the button it holds, so it takes over the
 * button's slot: the min-width (a percentage would otherwise resolve against the shrink-to-fit
 * wrapper) and .btn's vertical-align, which no longer applies to the button as a flex item.
 */
.buttons-wrapper .consent-reveal {
	min-width: 25%;
	vertical-align: middle;
}
.buttons-wrapper .consent-reveal > button {
	min-width: 100%;
}
.buttons-wrapper .consent-reveal > .btn-prev:disabled {
	background-color: #e9e8e8;
	color: #bfbcbb;
	opacity: 1;
}
/*
 * On mobiles every button - Continue, Previous, Next - is sized as base.css sizes Submit at the
 * same breakpoints: full width. The loader spinner sits in the right padding, out of the label's
 * flow, so showing it never wraps the label onto a second line and grows the button.
 */
@media (max-width: 720px) {
	.buttons-wrapper button,
	.buttons-wrapper .consent-reveal {
		min-width: 100%;
		max-width: 100%;
	}
	.buttons-wrapper button {
		position: relative;
		padding: 0 1.5em;
		word-wrap: anywhere;
		white-space: normal;
		min-height: 3em;
		height: auto;
	}
	.buttons-wrapper button .lds-dual-ring {
		position: absolute;
		top: 50%;
		right: 8px;
		/* centres the ring, which its :after draws 3px below and right of this box */
		margin: -11px 0 0;
	}
}
@media (max-width: 420px) {
	.buttons-wrapper button {
		padding: 1.5em;
	}
}
label {
	font-weight: inherit;
	margin-bottom: 0;
}

.control-label {
    margin-bottom: 8px;
}

.multi_checkbox_item {
    background-color: #eee;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid #347cb0;
    border-radius: .5em;
}

.multi_checkbox_item div {
    max-width: none;
    padding-left: 8px;
}

@media screen and (max-width: 799px) {
    div.multi_checkbox_item {
        flex-wrap: nowrap !important;
    }
}

@media screen and (min-width: 800px) {
    div.two_columns_multiselect {
        display: block !important;
        column-count: 2;
    }

    .two_columns_multiselect label {
        display: inline-flex !important;
    }
}