html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Be Vietnam Pro', sans-serif;
	background-color: #ffffff;
	/*
	background: linear-gradient(0deg, #c9bdd9 0, #ffffff 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	*/
	height: 100%;
	font-size: 1.8vmin;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="phone"] {
	line-height: 1;
	padding: 1em;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0.3em;
	background-color: #dfdfdf;
	color: #6f647d;
	font-size: 1.2em;
	font-family: 'Be Vietnam Pro', sans-serif;
	letter-spacing: 0.05em;
	outline: none;
	transition: color 0.2s, background 0.2s;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="phone"]:hover,
input[type="phone"]:focus {
	color: #3b3345;
	background-color: #e3e3e3;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="phone"]:disabled {
	opacity: 0.6;
}

textarea {
	line-height: 1.4;
	padding: 1em;
	width: 100%;
	box-sizing: border-box;
	border-radius: 0.3em;
	border: 0;
	background-color: #dfdfdf;
	color: #6f647d;
	font-size: 1.2em;
	font-family: 'Be Vietnam Pro', sans-serif;
	resize: none;
	outline: none;
	height: 12em;
	transition: color 0.2s, background 0.2s;
}

textarea:hover,
textarea:focus {
	background-color: #e3e3e3;
	color: #3b3345;
}

input[type="submit"] {
	border: 0;
	background-color: #3b3345;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.125em;
	color: #ffffff;
	border-radius: 0.3em;
	cursor: pointer;
	text-transform: uppercase;
	font-family: 'Be Vietnam Pro', sans-serif;
	padding: 0.6em;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.2s, color 0.2s, opacity 0.2s;
}

input[type="submit"]:not(:disabled):hover {
	background-color: #6f647d;
	color: #ffffff;
}

input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: no-drop;
}

input[type="submit"].smaller {
	font-size: 0.8em;
}

select {
	display: inline-block;
	flex: 1;
	font-size: 1.2em;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 400;
	color: #6f647d;
	line-height: 1.4;
	padding: 1em 1.8em 1em 1em;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: 0.3em;
	outline: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #dfdfdf;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233b3345%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

select:hover,
select:focus {
	color: #3b3345;
	background-color: #e3e3e3;
}

select:disabled {
	cursor: no-drop;
	opacity: 0.5;
}

select option {
	font-weight:normal;
}

a, a:hover {
	text-decoration: none;
}

a {
	color: #4e2d77;
}

a:not(.bypass):not(.ui-state-default):not(.dashboard-button):hover {
	border-bottom: solid 2px #4e2d77;
}

.nodisplay {
	display: none;
}

.headshake {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

.json-input {
	display: none;
}

.shade {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000000;
	opacity: 0.8;
	z-index: 999;
	display: none;
}

.loading-holder {
	position: fixed;
	background-color: #ffffff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	opacity: 0.6;
	display: none;
}

.loading-holder .loading {
	width: 20em;
	height: 20em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.loading-holder .loading:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-top: solid 1em #3b3345;
	border-left: solid 1em transparent;
	border-right: solid 1em transparent;
	border-bottom: solid 1em #3b3345;
	border-radius: 50%;
	animation: loading 1.2s linear infinite;
}

@keyframes loading {
	100% { transform: rotate(360deg); } 
}

.progress-holder {
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.8;
	z-index: 1001;
	display: none;
}

.progress-holder .progress-outline {
	width: 50%;
	height: 10%;
	border: solid 5px #655b73;
	border-radius: 1em;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.progress-holder .progress-outline .progress {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background-color: #655b73;
}

.fancy-checker {
	cursor: pointer;
	position: relative;
	padding-left: 1.5em;
	user-select: none;
}

.fancy-checker input {
	display: none;
}

.fancy-checker .check {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	display: block;
	border: solid 1px currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	transition: background-color 0.2s, box-shadow 0.2s;
}


.fancy-checker:not(.disabled):hover input ~ .check {
	box-shadow: 0 0 4px currentColor;
}

.check::after {
	content: '';
	position: absolute;
	display: none;
}

.fancy-checker:not(.checkmark) input:checked ~ .check::after {
	display: block;
}

.fancy-checker:not(.checkmark) .check::after {
	position: absolute;
	border-radius: 50%;
	background-color: currentColor;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
}

.fancy-checker.checkmark .check svg {
	position: absolute;
	width: 180%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-37%, -70%);
	fill: rgb(13, 143, 86);
	stroke: #212121;
	stroke-width: 2px;
}

.fancy-checker.disabled {
	opacity: 0.6;
	cursor: no-drop;
}

.fancy-checker.checkmark input:not(:checked) ~ .check svg,
.fancy-checker.checkmark.disabled .check svg {
	display: none;
}

.authorize-msg {
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: #ffffff;
	text-align: left;
	padding: 1em;
	border-radius: 1em;
	z-index: 1000;
	max-width: 50vmin;
	transform: translate(-50%, -50%);
	display: none;
}

.authorize-msg .msg-loading {
	display: flex;
	gap: 2em;
	align-items: center;
}

.authorize-msg .msg-loading .msg {
	font-size: 1.2em;
	font-weight: 700;
}

.authorize-msg .msg-loading .authorize-msg-loading {
	display: block;
	min-width: 4em;
	max-width: 4em;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 4em;
	height: 4em;
	border-radius: 50%;
	box-sizing: border-box;
	border-top: solid 0.2em transparent;
	border-left: solid 0.2em rgba(0, 0, 0, 0.4);
	border-right: solid 0.2em rgba(0, 0, 0, 0.4);
	border-bottom: solid 0.2em transparent;
	animation: loading 1.2s linear infinite;
}

.stopgap {
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: #ffffff;
	text-align: center;
	padding: 1em;
	border-radius: 1em;
	z-index: 1000;
	max-width: 50vmin;
	transform: translate(-50%, -50%);
	display: none;
}

.stopgap .text {
	margin-bottom: 1.2em;
}

.error {
	padding: 1em;
	background-color: #F97A7C;
	margin-bottom: 1em;
	border-radius: 0.3em;
	font-size: 1.2em;
	display: none;
}

.success:not(.panel) {
	padding: 1em;
	background-color: #70FFB1;
	margin-bottom: 1em;
	border-radius: 0.3em;
	font-size: 1.2em;
	display: none;
}

label {
	display: block;
	margin-bottom: 0.8em;
}

.bold {
	font-weight: 700;
}

.thin {
	font-weight: 200;
}

.italic {
	font-style: italic;
}

.smaller {
	font-size: 0.8em;
}

.bigger {
	font-size: 1.2em;
}

.relative {
	position: relative;
}

.row {
	margin-bottom: 1.2em;
}

.center {
	text-align: center;
}

.slider {
	transition: transform 0.3s;
}

.leftout {
	transform: translateX(-100%);
}

.rightin {
	transform: translateX(100%);
}

.json-holder {
	display: none;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #6f647d;
}

.header .branding {
	display: flex;
	align-items: center;
}

.header .branding .image {
	width: 20em;
	height: 4em;
	background-image: url('https://cdcaexams.org/images/logo-cdca-wreb-cita.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	margin-right: 2em;
}

.header .branding h1 {
	font-size: 2em;
	font-weight: 200;
	display: block;
	margin: 0;
	line-height: 1;
	position: relative;
	color: #4e2d77;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.header .log {
	color: #a29cab;
	display: flex;
	align-items: center;
	gap: 1em;
}

.header .log .logged-name-pin {
	text-align: right;
}

.header .log .logged-name-pin .pin-balance {
	display: block;
	margin-top: 0.3em;
	font-size: 0.8em;
	font-weight: 300;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.header .log .logged-name-pin .pin-balance .pin {
	display: block;
}

.header .log .logged-name-pin .pin-balance .balance {
	display: block;
	font-size: 0.85em;
	margin-top: 0.4em;
	color: #296b4a;
}

.header .log .logged-name-pin .pin-balance .balance[total="0"] {
	display: none;
}

.header .log .dashboard-logout {
	display: flex;
	gap: 0.8em;
}

.header .log .dashboard-logout .dashboard-button,
.header .log .dashboard-logout .logout-button {
	display: block;
	width: 2em;
	height: 2em;
	flex-basis: 2em;
	border-radius: 50%;
	background-color: #3b3345;
	position: relative;
	transition: background 0.2s;
}

.header .log .dashboard-logout .dashboard-button svg,
.header .log .dashboard-logout .logout-button svg {
	width: 50%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	fill: #ffffff;
	transform: translate(-50%, -50%);
}

.header .log .dashboard-logout .logout-button svg {
	width: 70%;
}

.header .log .dashboard-logout .dashboard-button:hover,
.header .log .dashboard-logout .logout-button:hover {
	background-color: #6d99d1;
}

.controller {
	position: fixed;
	top: 8em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	padding: 2em;
}

.image-upload-holder .image-upload-button {
	background-color: #787878;
	font-size: 0.9em;
}

.image-upload-holder .image-upload-button:hover {
	background-color: #676767;
}

.image-upload-holder .image-upload-input {
	display: none;
}

.image-upload-holder .image-upload-preview-holder .relative {
	display: inline-block;
}

.image-upload-holder .image-upload-preview-holder .relative .image-upload-preview {
	max-width: 20em;
	max-height: 20em;
}

.image-upload-holder .image-upload-preview-holder .relative .image-upload-remove-button {
	display: block;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.5em;
	height: 1.5em;
	background-color: #dfdfdf;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
}

.image-upload-holder .image-upload-preview-holder .relative:hover .image-upload-remove-button {
	opacity: 0.6;
}

.image-upload-holder .image-upload-preview-holder .relative .image-upload-remove-button:hover {
	opacity: 1;
	transform: scale(1.4);
}

.image-upload-holder .image-upload-preview-holder .relative .image-upload-remove-button:before {
	content: '';
	display: block;
	width: 2px;
	height: 0.8em;
	background-color: #000000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.image-upload-holder .image-upload-preview-holder .relative .image-upload-remove-button:after {
	content: '';
	display: block;
	width: 2px;
	height: 0.8em;
	background-color: #000000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.verify-error-holder,
.verify-success-holder {
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 1em;
	border: solid 1px #aaaaaa;
	background-color: #ffffff;
	border-radius: 1em;
	transform: translate(-50%, -50%);
	min-width: 30vw;
	z-index: 100;
	text-align: center;
}

.password-holder .password-input,
.password-holder .confirm-input {
	position: relative;
	z-index: 1;
	padding-right: 2em;
}

.password-holder .password-indicator-success {
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.4em;
	height: 1.4em;
	background-color: #00AD54;
	border-radius: 50%;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s;
}

.password-holder .password-indicator-success:before {
	content: '';
	position: absolute;
	display: block;
	width: 45%;
	height: 22.5%;
	border-left: solid 3px #ffffff;
	border-bottom: solid 3px #ffffff;
	top: 50%;
	left: 50%;
	font-weight: 700;
	transform: translate(-50%, -60%) rotate(-45deg);
}

.password-holder .password-indicator-error {
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.4em;
	height: 1.4em;
	background-color: #941719;
	border-radius: 50%;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s;
}

.password-holder .password-indicator-error:before {
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 60%;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.password-holder .password-indicator-error:after {
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 60%;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.password-holder .password-indicator-success.show,
.password-holder .password-indicator-error.show {
	opacity: 1;
}

.scheduled-credit-success {
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: #ffffff;
	border-radius: 1em;
	padding: 1em;
	z-index: 1000;
	text-align: center;
	max-width: calc(100vmin - 6em);
	max-height: calc(100vmin - 12em);
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.2s;
}

.scheduled-credit-success.inactive {
	transform: translate(-50%, -50%) scale(0);
}

.scheduled-credit-success .headline {
	font-size: 2em;
	margin-bottom: 0.7em;
	font-weight: 700;
	color: #027543;
	text-transform: uppercase;
	letter-spacing: 0.125em;
}

.scheduled-credit-success .date,
.scheduled-credit-success .time {
	font-size: 2.5em;
	margin-bottom: 0.5em;
	font-weight: 300;
}

.email-require,
.email-require-success {
	position: fixed;
	width: calc(100vmin - 4em);
	line-height: 1.8;
	padding: 1em;
	font-size: 1.3em;
	border-radius: 1em;
	background-color: rgba(255, 255, 255, 0.5);
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
}

.email-require-success {
	display: none;
}

.email-require input[type="email"] {
	text-align: center;
}

.email-require-resend-success {
	width: 30vmin;
	height: 30vmin;
	border: solid 2em #00AD54;
	border-radius: 50%;
	position: fixed;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 1000;
}

.email-require-resend-success svg {
	fill: #00AD54;
	width: 70%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.international-unverified-message {
	font-size: 1.3em;
	max-width: 50vmax;
	line-height: 1.6;
	margin: 0 auto;
}