:root {
	--dt-red: #ff8787;
}

ul {
	line-height: 1.3;
	padding-inline-start: 20px;
	margin-bottom: 6px;
	margin-top: 3px;
}

.rev-cond-ul {
	line-height: 1.7;
}

textarea {
	padding: 10px;
	font-family: 'Open Sans', Helvetica, Arial, serif;
	font-size: 1em;
	line-height: 1.3em;
}

.dark-theme textarea { /* if/when textarea becomes a child element of any element (body) with a .dark-theme class, apply this style */
	background: #322d38;
	color: #eee;
}

input[type='text'] {
	padding: 4px 6px;
}

.dark-theme input[type='text'] {
	background-color: #444;
	color: #eee;
	border: 1px solid #888;
}

label {
	padding-right: 10px;
}

/* <editor-fold> Major grouping components */
.home-page {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
}

.iw-sticky {
	position: sticky;
	top: 0;
}

.side-bar {
	margin-right: -20px;
	max-width: 300px;
}

.signin-page {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.request-access-page {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.token-text-box {
	margin-left: 10px;
}

sr22-submission-page {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.sr22-page {
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
}

/* </editor-fold> */


/* APPLICANT */

.applicant-wrapper {
	background-color: #ffd53e;
	border-bottom: 1px solid #b1b1b1;
	border-left: 1px solid #cdcdcd;
	border-right: 1px solid #cdcdcd;
	border-top: 1px solid #cdcdcd;
	color: #162044;
	line-height: 1.3rem;
	margin: 20px 0;
	padding: 10px;
	position: sticky;
	text-align: center;
	top: 0px;
	z-index: 50;
}

.dark-theme .applicant-wrapper {
	background-color: #764100;
	color: #7d97a9;
	border-color: #595858;
}

.applicant-wrapper > .applicant {
	/*font-size: 1em;*/
	font-weight: 500;
	padding: 1px 30px 1px 1px;
}

.dark-theme .applicant-wrapper > .applicant {
}

.cdl-applicant {
	color: red;
}

.dark-theme .cdl-applicant {
	color: var(--dt-red);
}

/* CONDITIONS AND LEVELS */


.conditions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.condition-wrapper {
	display: inline-block;
}

.condition {
	background-color: #f7f7f7;
	box-shadow: 0 0 1px 1px rgba(90, 90, 90, 0.3);
	border-radius: 4px;
	margin: 14px;
	min-width: 400px;
	max-width: 400px;
	overflow: hidden;
}

.dark-theme .condition {
	box-shadow: 0 0 2px 2px rgba(0 0 0, 0.2);
	background-color: #323233;
}

.available-conditions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px 20px;
	/*font-size: .9em;*/
	color: #333;
}

.available-condition {
	background-color: #edeae0;
	border: 1px solid #c4bda8;
	border-radius: 8px;
	cursor: pointer;
	margin: 6px;
	padding: 4px 0 6px 8px;
	transition: border-color .25s;
}

.dark-theme .available-condition {
	background-color: #2b2a30;
	border: 1px solid #5e5d5b;
	color: #b3b0a7;
}

.available-condition:hover {
	border: 1px solid #6685a1;
	filter: brightness(95%);
	transition: border-color .25s;
}

/*.available-condition input {*/
/*    padding: 10px 0 10px 8px;*/
/*}*/

.available-condition label {
	cursor: pointer;
	font-size: .85rem;
	padding: 10px 14px 10px 38px;
	margin-left: -30px;
}

.available-condition-selected {
	border: 2px solid #4382bb;
	/*box-shadow: 0 0 3px 3px rgba(130, 130, 130, 0.2);*/
	background-color: #cce1f1;
}


.dark-theme .available-condition-selected {
	background-color: #16354c;
	border: 2px solid #6685a1;
	box-shadow: 0 0 4px 4px rgba(20, 20, 20, 0.2);
}

.available-condition-selected:hover {
	border: 2px solid #4382bb;
}

.dark-theme .available-condition-selected:hover {
	border: 2px solid #6685a1;
}

.available-condition-required {
	font-weight: 600;
}

.condition > .title {
	/* box-shadow: 0 0 2px 2px rgba(90, 90, 90, 0.2); */
	padding: 12px 12px 12px 12px;
	font-weight: 500;
	font-size: 1.1em;
	text-align: center;
	margin: -1px;
	border-radius: 8px 8px 0 0;
	color: white;
}

.dark-theme .condition > .title {
	filter: opacity(80%);
}

.title-gray {
	background-color: #37658e;
}

.title-a {
	background-color: purple;
}

.title-b {
	background-color: maroon;
}

.title-c {
	background-color: #3c60e3;
}

.title-d {
	background-color: #7a7e3c;
}

.title-e {
	background-color: #de9000;
}

.title-f {
	background-color: #be4646;
}

.title-g {
	background-color: #0b780b;
}

.title-h {
	background-color: #37658e;
}

.title-j {
	background-color: #484848;
}

.title-k {
	background-color: rgba(81, 107, 71, 1);
}

.condition-required {
	color: white;
	font-size: .7em;
	font-weight: 600;
	margin-top: 6px;
}

.condition-guideline {
	background-color: #e4e4e4;
	text-align: center;
	font-size: .8em;
	padding: 10px;
}

.dark-theme .condition-guideline {
	background-color: #272424;
}

.condition-other-input {
	border: 1px solid #8a8a8e;
	background-color: #efefef;
	margin: 12px;
	padding: 12px;
	font-size: .9em;
	border-radius: 4px;
	line-height: 1.6em;
}

.dark-theme .condition-other-input {
	border: 1px solid #161617;
	background-color: #454547;
}

.condition-other-input-table {
	margin: 12px;
	/*font-size: .9em;*/
	line-height: 1.6em;
	display: flex;
	justify-content: center;
}

.condition-other-input-table table {
	border-collapse: collapse;
}

.condition-other-input-table td {
	padding: 10px 8px;
	border: 1px solid #a5a5a5;
}

.dark-theme .condition-other-input-table td {
	padding: 10px 8px;
	border: 1px solid #5a5a5a;
}

.condition-other-input-table-header {
	padding: 10px 8px;
	border: 1px solid #a5a5a5;
	background-color: #ddd;
	text-align: center;
	font-size: .9rem;
	font-weight: 600;
}

.dark-theme .condition-other-input-table-header {
	border: 1px solid #a5a5a5;
	background-color: #1b1b1b;
}

.confirmation-panel {
	text-align: right;
	/* border: initial; */
	background-color: rgba(210, 202, 202, .29);
}

.condition-levels {
	overflow: hidden;
	transition: background-color .5s, opacity .5s, max-height .5s;
}

.condition-level-not-used {
	background-color: #edeae0;
	border: 1px solid #c4bda8;
	margin: 12px;
	padding: 6px;
	border-radius: 4px;
	filter: grayscale(.8) brightness(0.90) opacity(0.3);
}

.dark-theme .condition-level-not-used {
	background-color: #3e4044;
	border: 1px solid #151413;
}

.condition-level {
	background-color: #edeae0;
	border: 1px solid #c4bda8;
	cursor: pointer;
	margin: 12px;
	padding: 6px;
	border-radius: 4px;
	filter: opacity(90%);
	transition: border-color .25s;
}

.dark-theme .condition-level {
	background-color: #2b2a30;
	border: 1px solid #151413;
}

.condition-level:hover {
	border: 1px solid #6685a1;
	filter: brightness(98%);
	transition: border-color .25s;
}

.dark-theme .condition-level:hover {
	border: 1px solid #6685a1;
}

.condition-level-selected {
	background-color: #cce1f1;
	border: 2px solid #6685a1;
	/*box-shadow: 0 0 3px 3px rgba(90, 90, 90, 0.2);*/
	filter: opacity(100%);
	margin: 11px;
}

.dark-theme .condition-level-selected {
	background-color: #12222e;
	border: 2px solid #6685a1;
	box-shadow: 0 0 4px 4px rgba(20, 20, 20, 0.2);
}

.condition-level-selected:hover {
	border: 2px solid #6685a1;
}

.dark-theme .condition-level-selected:hover {
	border: 2px solid #6685a1;
}

.hide-me {
	max-height: 0;
}

.level-number-wrapper {
	border-right: 1px solid #aaa;
	padding-right: 10px;
}

.level-number {
	font-size: 1.2em;
	font-weight: 600;
	width: 30px;
	text-align: center;
	border: none;
	background-color: initial;
	cursor: pointer;
	padding: 4px 4px 2px 4px;
}

.dark-theme .level-number {
	color: #ccc;
}

.level-text-wrapper {
	padding-left: 18px;
}

.level-text {
	font-size: .9rem;
}

.add-additional-button-wrapper {
	text-align: center;
}

.add-additional-button {
	background-color: #337ab7;
	border: 1px solid #2e6da4;
	border-radius: 10px;
	cursor: pointer;
	font-size: .8em;
	margin-top: 8px;
	padding: 5px;
	width: calc(100% - 40px);
	color: #efefef;
}

.dark-theme .add-additional-button {
	/*background-color: #37353d;*/
	/*border: 1px solid #4c4b50;*/
	/*color: #efefef;*/
}

.additional-info-textarea {
	height: 78px;
	margin: 12px 0 4px 8px;
	max-width: calc(100% - 40px);
	min-width: calc(100% - 40px);
	width: calc(100% - 40px);
}

.additional-info-textarea-small {
	height: 38px;
	margin: 12px 0 10px 8px;
	max-width: calc(100% - 40px);
	min-width: calc(100% - 40px);
	width: calc(100% - 40px);
}

.show-info {
	width: 20px;
}

.info {
	/*font-size: .9em;*/
}

.review-time {
	font-size: .9rem;
	color: #8a00b0;
	padding: 6px 0 0 0;
}

.dark-theme .review-time {
	color: #e8a1f2;
}

.condition-e-date-format {
	margin-left: 268px;
	margin-top: -29px;
	font-size: .8em;
}

.encourage-label {
	padding: 0 20px 10px 20px;
	font-size: .9em;
	margin: 10px 0 0 0;
	background-color: initial;
	filter: opacity(0.9);
	border-width: 1px 0 1px 0;
	line-height: 1.4em;
	color: red;
}

.dark-theme .encourage-label {
	color: #ff8787;
}

.button-sign-in {
	width: 240px;
	margin-bottom: 10px;
}

.sr22-submitting-message {
	display: flex;
	margin-left: 10px;
	margin-top: 6px;
}

.div-continue-to-evaluation {
	max-width: 210px;
	margin: 10px auto 10px auto;
	display: flex;
}

#button-continue-to-evaluation {
	margin: auto;
	display: block;
}

.button-admin {
	background-color: #7878781f;
	border: none;
	border-left: 0 solid #485264;
	border-radius: 0;
	font-size: .9rem;
	margin-bottom: 6px;
	padding: 7px 2px 5px 8px;
	text-align: left;
	transition: border .2s;
	width: 100%;
}

.button-admin:hover {
	border-width: 0 0 0 10px;
}

.dark-theme .button-admin {
	color: #e1e1da;
	border-left: 0 solid #325385;
}

.dark-theme .button-admin:hover {
	border-left: 10px solid #325385;
}

.button-admin-selected {
	background-color: #485264;
	color: #fff;
	border-left: 10px solid #485264;
}

.dark-theme .button-admin-selected {
	background-color: #325385;
	border-left: 10px solid #325385;
}


/*.button-admin {*/
/*	width: 200px;*/
/*	margin-bottom: 12px;*/
/*}*/

.button-sr26-form {
	color: #fff;
	background-color: #01abab;
	border-color: #3b9193;
	margin-bottom: 12px;
	margin-right: 20px;
	width: 100%;
}

.button-sr26-form:hover {
	color: #fff;
	background-color: #038b8b;
	border-color: #234d4e;
}

.button-sr22-form {
	color: #fff;
	background-color: #8147e3;
	border-color: #5e337d;
	margin-bottom: 12px;
	width: 100%;
}

.button-sr22-form:hover {
	color: #fff;
	background-color: #5e23c1;
	border-color: #502d6a;
}

.span-fix {
	background-color: red;
	color: white;
	font-size: .8em;
	line-height: 1.6em;
	margin-right: 10px;
	padding: 2px 8px;
}

.span-confirmed {
	background-color: rgba(206, 206, 206, 0.2);
	font-size: .8em;
	line-height: 1.6em;
	margin-right: 10px;
	padding: 2px 8px;
}

.div-confirm-checkbox {
	margin: 10px 0 0 0;
}

.dark-theme .de-text-box {
	background-color: #3a3a3a;
	color: #eee;
	border: 1px solid #5d5d5d;
}

.de-required::before {
	content: "* ";
	color: red;
	font-weight: bolder;
	/* font-size: 1.2rem; */
	/* vertical-align: super; */
}

.de-hint {
	font-size: .9rem;
	margin: 0 12px 8px 6px;
	color: #555555;
}

.dark-theme .de-hint {
	color: #b7b7b7;
}

.missing-highlight {
	border: 4px solid #dc1a1a;
	border-radius: 8px;
	padding: 1px 4px;
	margin-bottom: 2px;
}

.portalToken-title-panel {
	padding: 8px 12px;
	display: flex;
	background-color: #6eadd242;
}

.dark-theme .portalToken-title-panel {
	background-color: #28272d59;
}

.portalToken-title {
	margin-left: 2px;
	margin-right: 16px;
	font-weight: 500;
	color: black;
}

.dark-theme .portalToken-title {
	color: white;
}

.t-label {
	font-size: .7rem;
	color: #555;
	white-space: nowrap;
}

.dark-theme .t-label {
	color: #bdbdbd;
}

.t-nowrap {
	white-space: nowrap;
}

.t-value {
	margin-right: 30px;
	color: #000000;
}

.dark-theme .t-value {
	color: #eee;
}

.t2-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.t2-label {
	font-size: .7rem;
	color: #555;
	margin-right: 30px;
	margin-bottom: -4px
}

.dark-theme .t2-label {
	color: #bdbdbd;
}

.t2-value {
	margin-right: 30px;
	color: #000000;
	margin-bottom: 4px;
}

.dark-theme .t2-value {
	color: #eee;
}

.t2-value-important {
	color: #161df4;
}

.t3-value {
	font-size: .9rem;
}

.dark-theme .t2-value-important {
	color: #9494ff;
}

.packet-wrapper {
	padding: 16px 0;
	transition: box-shadow .5s ease-in-out;
	border-top: 1px solid #99999980;
}

.packet {

}

.packet-title-panel {
	padding: 10px 10px 4px 10px;
	display: flex;
}

.packet-title {
	margin-left: 2px;
	margin-right: 16px;
	font-size: 1.1rem;
}

.packet-details {
	margin: 0 0 0 14px;
	padding-bottom: 8px;
}

.button-packet {
	font-size: .8rem;
	opacity: .85;
}

.portalToken-outer {
	/*background-color: #8ab7d53b;*/
	border: 1px solid #888c9d85;
	margin-bottom: 14px;
	transition: box-shadow .5s ease-in-out;

}

.portalToken-outer-hl {
	box-shadow: 0 0 10px 4px #0e83c7ad;
}

/*.portalToken-outer:nth-of-type(odd) {*/
/*	background-color: #e8e9ed;*/
/*}*/

.portalToken-details {
	background-color: #9797970f;
	padding: 8px 12px 12px 12px;
}

.portalToken-action-button {
	font-size: .7rem;
	background-color: #ffffff45;
	border: 1px solid #aeaeb9;
	margin-right: 16px;
	max-height: 24px;
	padding: 0 6px;
	color: #282828;
}

.portalToken-action-button:hover {
	border: 1px solid #888;
}

#menu-button {
	border: 1px solid #bbbbbb;
	border-radius: 0;
	box-shadow: 0px 0px 10px 0px #545454;
	display: none;
	font-size: .9rem;
	height: 34px;
	width: 60px;
}

@media only screen and (max-width: 800px) {
	/* For mobile: */
	.home-page {
		display: block;
	}

	.side-bar {
		backdrop-filter: blur(5px);
		background-color: #a9a9a959;
		box-shadow: 4px 0 10px 2px #2626268f;
		opacity: 10;
		position: fixed;
		top: 0px;
		z-index: 2;
		overflow-y: auto;
		height: 100%;
	}

	.iw-sticky {
		position: initial;
		top: initial;
	}

	#menu-button {
		display: block;
	}

	.ul-review-assessment {
		margin-left: -22px;
		margin-right: -22px;
	}
}

@media only screen and (max-width: 420px) {
	/* For mobile: */
	.condition {
		margin: 14px 0;
		min-width: 300px;
	}
}

.level-radio-group {
	font-size: .9em;
	padding: 4px 0px;
}

/* A Radio Button with a bigger line height so it's not so squashed */
.radio-button-line-height {
	line-height: 1.6em;
}

.radio-button-time-frame {
	font-size: .85rem;
}

/* Meant for forms with a single row of input, add some separation between what is above */
.label-top-margin {
	margin: 10px 0 4px 0;
}

.exception-checkbox {
	font-size: .9rem;
}

.exception-panel {
	margin: 10px 0;
}

.label-date-format {
	margin-top: 3px;
	margin-left: 4px;
	margin-right: 8px;
}

.div-flex {
	display: flex;
	flex-wrap: wrap;
}

.bold {
	font-weight: 600;
}

/* Review Evaluations and Submit */
.ul-review-assessment {
	padding: 10px 20px;
	border-width: 0px 0px 0px 8px;
	border-style: solid;
	line-height: 1.6em;
	color: #222;
}

.dark-theme .ul-review-assessment {
	color: #d4d4d4;
}

.ul-review-assessment-gray {
	border-color: #37658e;
	background-color: rgba(55, 101, 142, 0.1);
}

.ul-review-assessment-A {
	border-color: purple;
	background-color: rgba(128, 0, 128, 0.1);
}

.ul-review-assessment-B {
	border-color: maroon;
	background-color: rgba(128, 0, 0, 0.1);
}

.ul-review-assessment-C {
	border-color: rgba(60, 96, 227, 1.0);
	background-color: rgba(60, 96, 227, 0.1);
}

.ul-review-assessment-D {
	border-color: #7a7e3c;
	background-color: rgba(122, 126, 60, 0.1);
}

.ul-review-assessment-E {
	border-color: #de940c;
	background-color: rgba(222, 148, 12, 0.1);
}

.ul-review-assessment-F {
	border-color: #be4646;
	background-color: rgba(190, 70, 70, 0.1);
}

.ul-review-assessment-G {
	border-color: #0b780b;
	background-color: rgba(11, 120, 11, 0.1);
}

.ul-review-assessment-H {
	border-color: #37658e;
	background-color: rgba(55, 101, 142, 0.1);
}

.ul-review-assessment-J {
	border-color: #484848;
	background-color: rgba(72, 72, 72, 0.1);
}

.ul-review-assessment-K {
	border-color: rgba(81, 107, 71, 1);
	background-color: rgba(81, 107, 71, .1);;
}

.li-review-assessment {
	font-size: 1.1em;
	font-weight: 600;
	list-style-type: none;
}

.span-selected-level {
	font-size: .8em;
	font-weight: 600;
	/*padding: 4px 5px;*/
	/*background-color: rgba(34, 71, 117, 1.0);*/
	/*color: white;*/
	/*border-radius: 4px;*/
	margin-right: 7px;
}

.span-private-description {
	font-size: .8em;
	/*font-weight: 600;*/
	padding: 4px 5px;
	/*background-color: rgba(138, 138, 138, .28);*/
	/*color: white;*/
	border-radius: 4px;
	margin-right: 7px;
}

.span-private-guideline {
	font-size: .8em;
	/*font-weight: 600;*/
	padding: 4px 5px;
	/*background-color: rgba(138, 138, 138, .28);*/
	/*color: white;*/
	border-radius: 4px;
	margin-right: 7px;
}

.span-commercial-description {
	font-size: .8em;
	/*font-weight: 600;*/
	padding: 4px 5px;
	/*background-color: rgba(138, 138, 138, .28);*/
	/*color: white;*/
	border-radius: 4px;
	margin-right: 7px;
}

.span-commercial-guideline {
	font-size: .8em;
	/*font-weight: 600;*/
	padding: 4px 5px;
	/*background-color: rgba(138, 138, 138, .28);*/
	/*color: white;*/
	border-radius: 4px;
	margin-right: 7px;
}