/* This is the generally the final styling file loaded for a page,
 * allowing us to override and add to the themes that were brought
 * over when making the site "static".
 */

/* GENERAL */

/* Same as `.pe-color`, but easier to remember */
.text-primary {
	color: #29348f !important;
}
.text-white {
	color: white !important;
}
.bg-primary {
	background-color: #29348f !important;
}
.bg-light-blue {
	background-color: #8bd0ee !important;
}
.fw-semibold {
	font-weight: 600 !important;
}
.d-flex {
	display: flex !important;
}
.align-items-center {
	align-items: center !important;
}

/* BS v5.1.3 Form Validation - Adapted to NOT use BS form element classes,
 * but now MUST have `.needs-validation` on the same element you'd put `.was-validated` on.
 */
.needs-validation .invalid-feedback {
	/* Note that you'll need a parent for your form element to put this after. */
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
    background-color: #f8d7da;
}
.needs-validation .invalid-tooltip {
	/* Note that you'll need a `position: relative` parent for your form element, and it must come after the form element. */
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: rgba(220,53,69,.9);
    border-radius: .25rem;
}
.needs-validation .is-invalid~.invalid-feedback,
.needs-validation .is-invalid~.invalid-tooltip,
.needs-validation.was-validated :invalid~.invalid-feedback,
.needs-validation.was-validated :invalid~.invalid-tooltip {
    display: block;
}
.needs-validation input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]).is-invalid,
.needs-validation select.is-invalid,
.needs-validation textarea.is-invalid,
.needs-validation.was-validated input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):invalid,
.needs-validation.was-validated select:invalid,
.needs-validation.was-validated textarea:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.needs-validation input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]).is-invalid:focus,
.needs-validation select.is-invalid:focus,
.needs-validation textarea.is-invalid:focus,
.needs-validation.was-validated input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):invalid:focus,
.needs-validation.was-validated select:invalid:focus,
.needs-validation.was-validated textarea:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}
.needs-validation.was-validated textarea:invalid,
.needs-validation textarea.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
}
.needs-validation select {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.needs-validation select.is-invalid,
.needs-validation.was-validated select:invalid {
    border-color: #dc3545;
}
.needs-validation select.is-invalid:not([multiple]):not([size]),
.needs-validation select.is-invalid:not([multiple])[size="1"],
.needs-validation.was-validated select:invalid:not([multiple]):not([size]),
.needs-validation.was-validated select:invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem);
}
.needs-validation select.is-invalid:focus,
.needs-validation.was-validated select:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}
.needs-validation input[type="checkbox"].is-invalid,
.needs-validation input[type="radio"].is-invalid,
.needs-validation.was-validated input[type="checkbox"]:invalid,
.needs-validation.was-validated input[type="radio"]:invalid {
    border-color: #dc3545;
}
.needs-validation input[type="checkbox"].is-invalid:checked,
.needs-validation input[type="radio"].is-invalid:checked,
.needs-validation.was-validated input[type="checkbox"]:invalid:checked,
.needs-validation.was-validated input[type="radio"]:invalid:checked {
    background-color: #dc3545;
}
.needs-validation input[type="checkbox"].is-invalid:focus,
.needs-validation input[type="radio"].is-invalid:focus,
.needs-validation.was-validated input[type="checkbox"]:invalid:focus,
.needs-validation.was-validated input[type="radio"]:invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}
.needs-validation input[type="checkbox"].is-invalid~.form-check-label,
.needs-validation input[type="radio"].is-invalid~.form-check-label,
.needs-validation.was-validated input[type="checkbox"]:invalid~.form-check-label,
.needs-validation.was-validated input[type="radio"]:invalid~.form-check-label {
    color: #dc3545;
}
.needs-validation .form-check-inline input[type="checkbox"]~.invalid-feedback,
.needs-validation .form-check-inline input[type="radio"]~.invalid-feedback {
    margin-left: .5em;
}


/* SPECIFIC */

@media (max-width: 991.98px) {
	.providers-ohca-lead {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.providers-ohca-lead::before {
		content: "";

		/*
		background-image: url('https://picsum.photos/id/931/1500/600?blur');
		opacity: 0.5; only for use with the placeholder image
		*/

		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6) 50%, transparent),
			url('/img/out-of-focus-brightly-lit-interior.jpg');

		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-repeat: no-repeat;

		/* In order to make the background image fully cover the 'lead' section at smaller viewports,
		 * we have to switch the element the background image is related to over to the 'lead' section
		 * itself so we can use "cover" so it vertically covers the stacked-up columns.
		 * At wider viewports, we relate the background image to an element higher in the hierarchy
		 * in order to not have the image's size stretch past the main content area
		 * without having to manually style that.
		 */
		background-size: cover;

	}
	.providers-ohca-lead > .row > * {
		margin-top: 0.5rem;
		margin-bottom: 2rem;
	}
}
@media (min-width: 992px) {
	.providers-ohca::before {
		content: "";
		z-index: -1;

		/*
		background-image: url('https://picsum.photos/id/931/1500/600?blur');
		opacity: 0.5; only for use with the placeholder image
		*/

		background-image: url('/img/out-of-focus-brightly-lit-interior.jpg');

		position: absolute;
		top: -30px;
		left: -150px;
		right: -150px;
		bottom: 0;
		background-repeat: no-repeat;
	}
	#pe-content .providers-ohca-lead {
		margin-top: -30px;
	}
	.providers-ohca-lead {
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
		padding-left: 2rem;
	}
	.providers-ohca-lead > .row > * {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
}

.providers-ohca {
	position: relative;
	z-index: 0;
}
.providers-ohca-form-section {
	padding: 2rem;
}
.providers-ohca-lead,
.providers-ohca-form-section {
	font-size: 18px;
	font-weight: 600;
	color: white;
}
.providers-ohca-form-section .row {
	margin-left: -0.3rem;
	margin-right: -0.3rem;
}
.providers-ohca-form-section [class*="col-"] {
	padding-left: 0.3rem;
	padding-right: 0.3rem;
}
.providers-ohca-form-section input,
.providers-ohca-form-section select,
.providers-ohca-form-section textarea,
.providers-ohca-form-section button {
	width: 100%;
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	border-width: 2px;
}
.providers-ohca-form-section button {
	background-color: #00a0dd;
	color: white;
}
.providers-ohca-form-section button:hover,
.providers-ohca-form-section button:focus {
	background: #f1f1f1;
	color: #29348f;
}
.providers-ohca-form-section button:active {
	background: #bfbfbf;
}
.providers-ohca-form-section .invalid-feedback {
	margin-top: -0.3rem;
	padding-left: 4px;
	padding-right: 4px;
}
.providers-ohca-form-text-col {
	padding-bottom: 1rem;
}
@media (min-width: 992px) {
	.providers-ohca-form-text-row {
		display: flex;
	}
	.providers-ohca-form-text-row .providers-ohca-form-text-col {
		display: flex;
		align-items: center;
		padding: 2rem;
	}
}
.providers-ohca-lead {
	position: relative;
	z-index: 0;
	color: #29348f;
}
.providers-ohca-lead h1 {
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	margin: 0;
}
.providers-ohca-body h2 {
	font-size: 2rem;
}
.providers-ohca-body p {
	margin: 0;
}
.providers-ohca-body ul {
	padding: 1.5rem 2rem;
	margin: 0;
}
.providers-ohca-body li:not(:last-child) {
	margin-bottom: 1rem;
}

/* BS v4 Spacing Utilities */
.m-0 { margin: 0!important }
.m-1 { margin: .25rem!important }
.m-2 { margin: .5rem!important }
.m-3 { margin: 1rem!important }
.m-4 { margin: 1.5rem!important }
.m-5 { margin: 2rem!important }
.m-6 { margin: 2.5rem!important }
.m-7 { margin: 3rem!important }
.mt-0,.my-0 { margin-top: 0!important }
.mr-0,.mx-0 { margin-right: 0!important }
.mb-0,.my-0 { margin-bottom: 0!important }
.ml-0,.mx-0 { margin-left: 0!important }
.mt-1,.my-1 { margin-top: .25rem!important }
.mr-1,.mx-1 { margin-right: .25rem!important }
.mb-1,.my-1 { margin-bottom: .25rem!important }
.ml-1,.mx-1 { margin-left: .25rem!important }
.mt-2,.my-2 { margin-top: .5rem!important }
.mr-2,.mx-2 { margin-right: .5rem!important }
.mb-2,.my-2 { margin-bottom: .5rem!important }
.ml-2,.mx-2 { margin-left: .5rem!important }
.mt-3,.my-3 { margin-top: 1rem!important }
.mr-3,.mx-3 { margin-right: 1rem!important }
.mb-3,.my-3 { margin-bottom: 1rem!important }
.ml-3,.mx-3 { margin-left: 1rem!important }
.mt-4,.my-4 { margin-top: 1.5rem!important }
.mr-4,.mx-4 { margin-right: 1.5rem!important }
.mb-4,.my-4 { margin-bottom: 1.5rem!important }
.ml-4,.mx-4 { margin-left: 1.5rem!important }
.mt-5,.my-5 { margin-top: 2rem!important }
.mr-5,.mx-5 { margin-right: 2rem!important }
.mb-5,.my-5 { margin-bottom: 2rem!important }
.ml-5,.mx-5 { margin-left: 2rem!important }
.mt-6,.my-6 { margin-top: 2.5rem!important }
.mr-6,.mx-6 { margin-right: 2.5rem!important }
.mb-6,.my-6 { margin-bottom: 2.5rem!important }
.ml-6,.mx-6 { margin-left: 2.5rem!important }
.mt-7,.my-7 { margin-top: 3rem!important }
.mr-7,.mx-7 { margin-right: 3rem!important }
.mb-7,.my-7 { margin-bottom: 3rem!important }
.ml-7,.mx-7 { margin-left: 3rem!important }
.p-0 { padding: 0!important }
.p-1 { padding: .25rem!important }
.p-2 { padding: .5rem!important }
.p-3 { padding: 1rem!important }
.p-4 { padding: 1.5rem!important }
.p-5 { padding: 2rem!important }
.p-6 { padding: 2.5rem!important }
.p-7 { padding: 3rem!important }
.pt-0,.py-0 { padding-top: 0!important }
.pr-0,.px-0 { padding-right: 0!important }
.pb-0,.py-0 { padding-bottom: 0!important }
.pl-0,.px-0 { padding-left: 0!important }
.pt-1,.py-1 { padding-top: .25rem!important }
.pr-1,.px-1 { padding-right: .25rem!important }
.pb-1,.py-1 { padding-bottom: .25rem!important }
.pl-1,.px-1 { padding-left: .25rem!important }
.pt-2,.py-2 { padding-top: .5rem!important }
.pr-2,.px-2 { padding-right: .5rem!important }
.pb-2,.py-2 { padding-bottom: .5rem!important }
.pl-2,.px-2 { padding-left: .5rem!important }
.pt-3,.py-3 { padding-top: 1rem!important }
.pr-3,.px-3 { padding-right: 1rem!important }
.pb-3,.py-3 { padding-bottom: 1rem!important }
.pl-3,.px-3 { padding-left: 1rem!important }
.pt-4,.py-4 { padding-top: 1.5rem!important }
.pr-4,.px-4 { padding-right: 1.5rem!important }
.pb-4,.py-4 { padding-bottom: 1.5rem!important }
.pl-4,.px-4 { padding-left: 1.5rem!important }
.pt-5,.py-5 { padding-top: 2rem!important }
.pr-5,.px-5 { padding-right: 2rem!important }
.pb-5,.py-5 { padding-bottom: 2rem!important }
.pl-5,.px-5 { padding-left: 2rem!important }
.pt-6,.py-6 { padding-top: 2.5rem!important }
.pr-6,.px-6 { padding-right: 2.5rem!important }
.pb-6,.py-6 { padding-bottom: 2.5rem!important }
.pl-6,.px-6 { padding-left: 2.5rem!important }
.pt-7,.py-7 { padding-top: 3rem!important }
.pr-7,.px-7 { padding-right: 3rem!important }
.pb-7,.py-7 { padding-bottom: 3rem!important }
.pl-7,.px-7 { padding-left: 3rem!important }