@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

	:root {

		--pts-blue:#253551;

		--light-blue: #546D81;

		--consume-maroon: #69181C;

		--consume-red: #B2292E;

		--main-color: var(--pts-blue);

		--accent-color: var(--light-blue);

		--green: #0fa336;

		--red: #b50d29;

		--main-font: "Raleway";

	}

	* {

		box-sizing: border-box;

	}

	body {

		text-align: center;

		background: var(--main-color);

		font-family: var(--main-font);

		margin: 0;

		position: relative;

		min-height: 100vh;

	}

	#main {

		position: absolute;

		top: 50%;

		left: 50%;

		transform: translate(-50%, -50%);

	}

	#main.form-loaded {

		position: relative;

		top: auto;

		left: auto;

		transform: none;

	}

	.background-element {

		position: absolute;

		width: 100%;

		top: 0;

		left: 0;

		height: 100vh;

		z-index: -1;

	}

	.background-pts {

		background-color: var(--pts-blue);

		clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);

	}

	.background-consume {

		background-color: var(--consume-maroon);

		clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);

	}

	.background-element img {

		position: absolute;

		min-width: 100px;

		max-width: 250px;

	}

	.background-element img {

		width: 100px;

	}

	.background-pts img {

		top: 10px;

		left: 50%;

		transform: translateX(-50%);

	}

	.background-consume img{

		bottom: 10px;

		right: 50%;

		transform: translateX(50%);

	}

	.required {

		color: #ff0000 !important;

		font-size: 1.25rem;

		margin-left: 3px;

	}

	.fail {

		background: var(--red);

		color: #fff;

		border-radius: 5px;

		padding: 2px 4px;

	}

	.checkmark {

		color: var(--green);

		font-size: 1.25rem;

		position: absolute;

		right: 5px;

		top: 30px;

		display: none;

	}

	.input-fix .checkmark {

		right: 15px;

	}

	.form-input-block:has(textarea:valid) .checkmark {

		display: block;

		top: auto;

		bottom: 10px;

		font-size: 2rem;

		right: 10px;

	}

	.form-input-block:has(input[type="text"]:valid) .checkmark {

		display: block;

	}

	.form-input-block:has(input[type="text"]:valid) input[type="text"]:not(:focus), .form-input-block:has(textarea:valid) textarea:not(:focus){

		border: 1px solid var(--green);

	}

	#main {

		box-sizing: border-box;

		width: 90%;

		display: block;

		padding: 1.5rem;

		margin: 1rem auto;

		text-align: left;

		background: #fff;

		border-radius: 5px;

	}

	#form {

		display: inline-block;

		width: 100%;

		font-size: 0;

	}

	.form-column h3 {

		font-size: 1.5rem;

		margin: 10px auto 5px;

	}

	.form-input-block {

		font-size: 1rem;

		position: relative;

		width: 100%;

		transition: all 0.3s ease;

	}

	.form-column {

		display: inline-block;

		margin: 0 auto;

		padding: 10px;

		vertical-align: top;

	}

	.form-column.horizontal-inputs .container{

		display: flex;

		flex-direction: row;

		flex-wrap: wrap;

		justify-content: space-around;

	}

	.form-column.horizontal-inputs .container .form-input-block {

		width: 100%;

		margin: 10px auto;

	}

	.form-column.horizontal-inputs h3 {

		display: block;

	}

	.form-column-wide, .form-column-fourth, .form-column-third {

		width: 100%;

	}

	.form-input-block label {

		display: block;

		font-weight: bolder;

		position: relative;

		margin-top: 10px;

	}

	.form-input-block + .form-input-block {

		margin-top: 10px;

	}

	.form-input-block.highlighted {

		transform: scale(1.25);

		z-index: 10000;

	}

	label:has(input[type="radio"]), label:has(input[type="checkbox"]) {

		padding: 10px 15px;

		text-align: center;

		background: var(--main-color);

		color: #fff;

		border-radius: 5px;

		vertical-align: top;

		cursor: pointer;

		border: 2px solid var(--main-color);

	}

	.form-input-block label:has(input[type="checkbox"]) + label:has(input[type="checkbox"]) {

		margin-top: 10px;

	}

	.form-input-block:not(.horizontal-radio) label:has(input[type="radio"]) + label:has(input[type="radio"]) {

		margin-top: 10px;

	}

	.horizontal-radio label:has(input[type="radio"]){

		display: inline-block;

		width: 100%;

		margin-top: 10px;

	}

	.text-input {

		width: 100%;

		border: 1px solid #ddd;

		border-radius: 5px;

		padding: 10px;

		font-family: "Raleway";

	}

	.text-input[name="odometer"]{

		font-family: "Arial";

	}

	.text-input:focus {

		

	}

	.textarea {

		min-height: 250px;

		font-size: 16px;

	}

	h1 {

		text-align: center;

		margin-bottom: 10px;

	}

	.button {

		width: 100%;

		text-align: center;

		background: var(--main-color);

		color: #fff;

		font-weight: bold;

		font-size: 1rem;

		padding: 10px 20px;

		border: none;

		border-radius: 5px;

		cursor: pointer;

		display: inline-block;

		text-decoration: none;

	}

	label:has(input[value="pass"]:checked), label:has(input[value="1"]:checked), label:has(input[name="submission_type"]:checked), label:has(input[name="fuel"]:checked), .form-column-third label:has(input[value="0"]:checked), label:has(input[type="checkbox"]:checked), label:has(input[type="radio"]:checked){

		border: 2px solid var(--green);

		background: var(--green);

	}

	label:has(input[value="fail"]:checked), label:has(input[value="0"]:checked), .form-column-third label:has(input[value="1"]:checked){

		border: 2px solid var(--red);

		background: var(--red);

	}

	input[type="radio"] {

		display: none;

	}

	label {

		font-size: 14px;

	}

	label:has(input[type="radio"]){

		font-size: 14px;

	}

	label:has(input[type="checkbox"]){

		min-height: 63px;

		position: relative;

		display: inline-block;

		width: 100%;

	}

	label:has(input[type="checkbox"]) .checkbox-fix {

		position: absolute;

		top: 50%;

		left: 50%;

		transform: translate(-50%, -50%);

		width: 100%;

	}

	.checkbox-fix input {

		display: none;

	}

	.notification {

		background: #fff;

		padding: 10px 20px; 

		text-align: center;

		margin: 10px auto;

		border-radius: 5px;

		width: 90%;

		position: relative;

		display: none;

		cursor: pointer;

	}

	.notification.success {

		display: block;

		border: 5px solid var(--green);

	}

	.notification.failure {

		display: block;

		border: 5px solid var(--red);

	}

	.notification .checkmark {

		display: block !important;

		top: 50%;

		transform: translateY(-50%);

		right: 5px;

		font-size: 1rem;

	}

	.notification.failure .checkmark {

		color: var(--red);

	}

	.input-fix {

		padding-right: 10px;

	}

	.form-input-block small {

		display: block;

		width: 100%;

	}

	.helper {

		display: none;

	}

	#directory {

		display: none;

	}

	.link-list {

		font-size: 0;

		display: inline-block;

		vertical-align:middle;

		width: 100%; 

	}

	.link-list .button {

		width: 100%;

		margin-bottom: 10px;

	}

	#main-container {

		font-size: 0;

		position: relative;

		min-height: 250px;

	}

	.main-title {

		font-size: 32px;

	}

	.sub-title {

		font-size: 24px;

	}

	#main-container .fa-spinner {

		font-size: 100px;

		position: absolute;

		top: 50%;

		left: 50%;

		transform: translate(-50%, -50%);

		color: var(--main-color);

	}

	.explain {

		font-size: 12px;

		margin: 0;

	}

	.hidden {

		display: none;

	}

	#logo-container {

		text-align: center;

	}

	#logo-container img {

		max-width: 100px;

		height: auto;

		margin: 10px;

		padding: 20px;

		border-radius: 100%;

	}

	#consume-logo {

		background-color: var(--consume-maroon);

	}

	#pts-logo {

		background-color: var(--pts-blue);

	}

	.request_items {

		border: 1px solid var(--main-color);

		border-radius: 5px;

		padding: 10px;

		text-align: center;

	}

	.line-item{

		display: flex;

		flex-direction: row;

		flex-wrap: wrap;

		justify-content: space-around;

		align-items: flex-start;

		align-content: center;

		border: 1px solid var(--main-color);

		position: relative;

		border-radius: 5px;

		padding: 15px;

		margin-top: 5px;

	}

	.line-item-column {

		width: 100%;

	}

	.line-item-reason .textarea {

		min-height: 80px;

	}

	.icon-button {

		cursor: pointer;

	}

	.new_line-item {

		border: none;

		border-radius: 5px;

		background: var(--green);

		color: #fff;

		padding: 10px 15px;

		font-size: 16px;

		margin: 0 auto;

		width: 100%;

		margin-top: 10px;

	}

	.remove_line-item {

		position: absolute;

		border: none;

		background: none;

		color: #ff0000;

		top: 0;

		right: 0;

		font-size: 20px;

	}	

	@media (min-width: 768px){

		#main {

			padding: 2rem;

		}

		.text-input {

			padding: 7px;

		}

		.form-column h3 {

			font-size: 1.15rem;

		}

		.form-column-fourth {

			width: 25%;

		}

		.form-column-third {

			width: 33.3333%;

		}

		.form-column-half {

			width: 50%;

		}

		.form-column-two-third {

			width: 66.6666%;

		}

		.container .form-input-block + .form-input-block {

			margin-top: 0;

		}

		.horizontal-radio label:has(input[type="radio"]) {

			margin-top: 0;

		}

		.horizontal-radio label:has(input[type="radio"]).label-fix {

			margin-top: 10px;

		}

		.horizontal-radio label:has(input[type="radio"]){

			width: 48%;

		}

		.form-column.horizontal-inputs .container .form-input-block {

			width: 50%;

		}

		.button {

			font-size: 1.75rem;

		}

		label {

			font-size: 0.75rem;

		}

		.checkmark {

			font-size: 1rem;

		}

		/*#public-directory .link-list .button {

			width: 48%;

			display: inline-block;

			font-size: 18px;

			margin: auto 1% 10px;

		}*/

		.line-item{

			display: flex;

			flex-direction: row;

			flex-wrap: no-wrap;

			justify-content: space-around;

			align-items: flex-start;

			align-content: center;

			padding: 10px;

		}

		.line-item-column {

			width: 20%;

			padding: 5px;

		}

		.line-item-reason .textarea {

			min-height: 50px;

		}



	}

	@media (min-width: 991px){

		#main {

			padding: 2rem 4rem;

		}

		.form-column h3 {

			font-size: 1.5rem;

		}

		.button {

			font-size: 2rem;

		}

		.form-column.horizontal-inputs .container .form-input-block {

			width: 33.3333%;

		}

		.form-input-block small {

			display: none;

		}

		.helper {

			display: inline-block;

			color: #222;

			cursor: pointer;

			position: relative;

			transition: color 0.3s ease; 

		}

		.helper:hover {

			color: var(--green);

		}

		.helper-callout {

			position: absolute;

			left: 30px;

			top: 0;

			min-width: 320px;

			width: auto;

			max-width: 400px;

			font-size: 1rem;

			color: var(--main-color);

			background: #fff;

			border: 1px solid var(--main-color);

			padding: 5px;

			border-radius: 5px;

			z-index: 1000000;

		}

	}

	@media (min-width: 1200px){

		label {

			font-size: 1rem;

		}

		#main {

			width: 60%;

		}

		.notification {

			width: 60%;

			padding: 10px 40px;

		}

		.notification .checkmark {

			right: 10px;

			font-size: 1.5rem;

		} 

		.background-element img {

			width: 20%;

			top: 50%;

			transform: translateY(-50%);

		}

		.background-pts {

			clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);

		}

		.background-consume {

			clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);

		}

		.background-pts img {

			left: 10px;

		}

		.background-consume img{

			right: 10px;

		}

	}