:root {
	--main-blue: #333a47;
	/* --main-blue: #3f5a8c; */
	--main-blue-59: #3f5a8c59;
}

/* <editor-fold> Core HTML elements */
body {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	color: #111;
	margin: 0;
	background-color: #d4d9e28c;
	transition: background .5s;

	/* 3 properties below for having a sticky footer
	   -- see https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

ul {
	margin-block-end: .3em;
	margin-block-start: .3em;
}

.gwt-TextBox {
	font-size: 1em;
}

.gwt-Label {
	/*margin-bottom: 6px;*/
}

h1 {
	font-size: 1.7em;
	margin: 24px 20px 10px;
	border-top: 3px solid #3c4350;
	padding: 10px 0;
	color: #333a47;
	font-weight: 500;
}

h2 {
	font-size: 1.2em;
	font-weight: 400;
	border-bottom: 1px solid #9090a9;
	margin: 4px 0 14px 0;
	padding: 0 0 4px 0;
	color: #343a46;
}

.h2-details {
	border-bottom: 1px dashed #9090a9;
	padding-bottom: 10px;
}

.h2-details > summary {
	color: #343a46;
	cursor: pointer;
	font-size: 1.2em;
	font-weight: 400;
	margin: 4px 0 0 0;
}

h3 {
	padding: 10px 20px;
	margin: 0 -20px 10px -20px;
	background-color: #18598fb5;
	color: #eee;
	font-weight: 300;
}

/* </editor-fold> */

/* <editor-fold> Buttons */
button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

button:hover {
	text-decoration: none;
}

button:disabled {
	opacity: .3;
	pointer-events: none;
}

.button-success {
	color: #fff;
	background-color: #4c9d4c;
	border-color: #2f762f;
	min-width: 100px;
}

.button-success:hover {
	color: #fff;
	background-color: #3d843d;
	border-color: #235c23;
}

.button-cancel {
	color: #fff;
	background-color: #b33939;
	border-color: #683131;
	min-width: 100px;
}

.button-cancel:hover {
	color: #fff;
	background-color: #790f0f;
	border-color: #542929;
}

.button-primary {
	color: #fff;
	background-color: #2B5991;
	border-color: #2e6da4;
}

.button-primary:hover {
	color: #fff;
	background-color: #286090;
	border-color: #204d74;
}


.button-gray {
	color: #fff;
	background-color: #8097ab;
	border-color: #617a91;
}

.button-gray:hover {
	color: #fff;
	background-color: #677989;
	border-color: #405161;
}

.button-pdf-link {
	color: #0f0f0f;
	background-color: initial;
	border-color: #678bab6e;
	background-image: url(images/pdf.png);
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 8px;
	padding-left: 30px;
}

.button-pdf-link:hover {
	color: #fff;
	background-color: #465765;
	border-color: #2a3948;
}

/* </editor-fold> */

/* <editor-fold> DPS and DLD Headers */
#header-div {
	position: relative;
	border-top: 6px solid #8a8a8a;
	border-bottom: 1px solid #b8b7bf;
}

#dps-logo {
	width: 90px;
	position: absolute;
	left: 24px;
	top: 12px;
	filter: drop-shadow(0px 0px 8px #111);
	transition: width .4s;
}

#dld-logo {
	width: 90px;
	filter: drop-shadow(0px 0px 4px #777);
}

#theme-toggle-button {
	position: absolute;
	right: 20px;
	top: 20px;
	padding: 0 4px 2px 4px;
	font-size: 12px;
}

#header-top {
	background-color: var(--main-blue);
	color: #eee;
	font-weight: 300;
	transition: background .5s;
}

#header-dps {
	padding: 10px 10px 0 125px;
	font-size: .9em;
	transition: padding-left .4s;
}

#header-dld {
	padding: 0 10px 8px 135px;
	font-size: 1.2em;
	transition: padding-left .4s;
}

#header-bottom {
	color: #333;
	background-color: #f6f6fb;
	transition: background .5s;
}

#header-app-1 {
	padding: 15px 10px 5px 25px;
	font-size: .8em;
	transition: padding-left .4s;
}

#header-app-2 {
	padding: 15px 10px 5px 25px;
	font-size: 1.2em;
	transition: padding-left .4s;
}

/* </editor-fold> */

/* <editor-fold> Footer */
footer {
	/* uncomment to view area that background takes (it's everything below main) */
	/* background-color: #f3f3f3; */

	/* footer-support: */
	flex: 1;
	position: relative;
}

#footer-div {
	background-color: #7995b442;
	border-top: 1px solid #888;
	padding: 15px 0;
	text-align: center;

	/* footer-support: */
	bottom: 0;
	position: absolute;
	width: 100%;
}

/* </editor-fold> */

/* <editor-fold> Utah.gov header and footer */

.override #utahgov_statewidefooter ul li a {
	margin-bottom: 8px;
}

#utahgov_statewideheader #utahgov_header_search button {
	border-radius: 0px;
}

.override #utahgov_statewideheader #utahgov_header_search input {
	font-size: 13px;
}

/* </editor-fold> */

/* <editor-fold> theme toggle */
#theme-div {
	background-color: #2929296b;
	border: 2px solid #2b2a3152;
	border-radius: 20px;
	padding: 2px 4px;
	font-size: 12px;
	opacity: .9;
	position: absolute;
	right: 14px;
	top: 12px;
}

#theme-div:hover {
	opacity: 1;
}

#theme-toggle-box {
	background-color: #ffff0017;
	border: 2px solid yellow;
	border-radius: 20px;
	height: 1.7rem;
	left: .22rem;
	position: absolute;
	top: 2px;
	transition: left .5s, border .5s;
	width: 1.7rem;
}

.theme-button {
	background-color: #48474a;
	border: 1px solid #21212178;
	border-radius: 20px;
	color: white;
	cursor: pointer;
	font-size: 1.1rem;
	padding: 2px 0px;
	width: 1.9rem;
}

.using-mouse .theme-button:focus {
	/* without this, it doesn't look too great on chrome -- we only want to do this when we didn't use a
	   keyboard to tab to the button */
	outline: none;
}

/* </editor-fold> */

/* <editor-fold> Main Popup Message */
#main-popup-message-wrapper {
	max-width: 700px;
	position: fixed;
	margin: auto;
	top: calc(20% - 50px);
	left: 0;
	right: 0;
	z-index: 999999;
}

#main-popup-message {
	background-color: rgba(250, 250, 250, 1.0);
	border: 1px solid #819fc3;
	border-radius: 10px;
	margin-right: 20px;
	margin-left: 20px;
	padding: 15px 20px;
	box-shadow: 0 0 150px 150px rgba(100, 100, 100, .3);
	transition: background-color .5s;
}

#main-popup-title {
	border-bottom: 2px solid #164c8c;
	background-color: #2b7bda;
	margin-left: -20px;
	margin-right: -20px;
	margin-top: -15px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 16px 20px 10px 20px;
	color: white;
}

.popup-message {
	border-bottom: 2px solid #164c8c;
	background-color: #2b7bda;
}

.popup-error {
	border-bottom: 2px solid #862626 !important;
	background-color: #e83636 !important;
}

.message-body-wrapper {
	display: flex;
	gap: 18px;
	align-items: center;
}

.popup-exclamation {
	font-size: 3rem;
	color: #e83636;
}

.popup-information {
	font-size: 3rem;
	color: #2b7bda;
}

#main-popup-body {
	margin-top: 20px;
}

#main-popup-button {
	width: 100px;
}

.orange-flash {
	background-color: orange !important;
}

.page-cover {
	background-color: #8cbce97d;
	cursor: not-allowed;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 999998;
}

/* </editor-fold> */

/* <editor-fold> Major grouping components */
main {
	margin-bottom: 100px;
}

/* </editor-fold> */

/* <editor-fold> Informational displays */
.informational-wrapper {
	background-color: #fbfbfb;
	border: 1px solid #cdcdcd;
	border-radius: 4px;
	color: #444;
	line-height: 1.4em;
	margin: 10px 20px 20px 20px;
	padding: 15px 20px 15px 20px;
}

.informational-wrapper > .informational {
	font-weight: 500;
	padding: 1px;
}

.informational-error {
	color: #e00000;
}

.side-bar-wrapper {
	background-color: #fbfbfb;
	border: 1px solid #cdcdcd;
	border-radius: 4px;
	color: #444;
	line-height: 1.4em;
	margin: 20px;
	padding: 15px 20px 15px 20px;
}

.strikeout {
	text-decoration: line-through;
}

.read-only-info {
	background-color: #005aff1c;
	padding: 10px;
}

/* </editor-fold> */

.dld-spinner-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: serif;
	color: #8080804d;
	margin-top: 5%;
}

.dld-spinner {
	width: 40px;
	height: 40px;
	background-color: #8080804d;

	/* margin: 100px auto; */
	-webkit-animation: rotateplane 1.2s infinite ease-in-out;
	animation: rotateplane 1.2s infinite ease-in-out;
	margin: 16px;
}

@-webkit-keyframes rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
	0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
	50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) }
	100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) }
}

.spinner {
	border: 4px solid #8888883d;
	border-radius: 50%;
	border-top: 4px solid #4789c1;
	width: 16px;
	height: 16px;
	-webkit-animation: spin .75s linear infinite; /* Safari */
	animation: spin .75s linear infinite;
}

@-webkit-keyframes spin { /* Safari */
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

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



.de-group {
	display: flex;
	flex-wrap: wrap;
	/* margin-bottom: 10px; */
	margin: 4px 0 8px 0;
}

.de-group-compact {
	border-bottom: 2px solid #9c9c9c30;
	display: flex;
	flex-wrap: wrap;
	/* margin-bottom: 10px; */
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 4px;
}

.de-group-wrapper {
	background-color: #5c8e5c05;
	border-bottom: 1px solid #bbb;
	margin-bottom: 20px;
	transition: opacity .25s, max-height .25s, margin .25s;
}

.de-opacity-zero {
	opacity: 0;
	max-height: 0;
}

.de-max-height-1200 {
	max-height: 1200px;
}

.de-header {
	background-color: #a8b5cc70;
	/*background-color: #d1890038;*/
	border-top: 1px solid #ccc;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .6px;
	padding: 6px 10px;
	width: calc(100% - 20px);
}


.de-widget {
	margin: 8px 16px 0 0;
	transition: opacity .25s, max-height .25s, padding .25s;
}

.de-list-box {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	padding: 3px 4px;
}

.de-text-box, .de-text-area {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	padding: 5px 6px;
}

.de-label {
	font-size: .8rem;
	display: block;
	color: #555;
}

.de-label::after {
	/* content: ":"; */
	/* margin-top: 4px; */
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.button-panel-left {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 25px;
	margin-bottom: 10px;
}

.dialog-button-panel-left {
	align-items: center;
	border-top: 1px solid #80808069;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 25px;
	padding-top: 15px;
}

.button-panel-right {
	display: flex;
	justify-content: right;
	gap: 15px;
}

.button-panel-center {
	display: flex;
	justify-content: center;
}

.paging-panel {
	align-items: center;
	background-color: #a6a6a63b;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
	padding: 15px;
	row-gap: 20px;
}

.paging-panel > .button-primary {
	margin-right: 5px;
}

.paging-button-panel {
	align-items: center;
	display: flex;
	gap: 10px;
}

.paging-sort-panel {
	display: flex;
	align-items: center;
}

.paging-label {
	margin: 0 0 0 10px;
}

.paging-button {
	background-color: #457cc32e;
	border: 1px solid #6a8094;
	color: #485264;
	font-weight: 900;
	height: 40px;
	margin: 0 10px 0 0;
	padding: 9px 12px 6px 12px;
	width: 40px;
}

.paging-button:hover {
	background-color: #7dabe68f;
}

.paging-button:active {
	border: 1px solid #2a4d7b;
}

.paging-button:disabled {
	background-color: #83757552;
}

.gwt-PopupPanel {
	border-radius: 8px;
	box-shadow: 0 0 15px 15px rgb(100 100 100 / 30%);
	/*margin: 10px;*/
	background-color: #ffffffb5;
	backdrop-filter: blur(5px);
	max-width: 1000px;
}

.gwt-ListBox {
	padding: 4px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif
}

.tooltip {
	border-bottom: 1px dotted #25045240;
	/*display: inline-block;*/
	position: relative;
}

.tooltip .tooltiptext {
	visibility: hidden;

	background-color: #574a60;
	box-shadow: 0px 2px 8px 4px #24202040;
	border-radius: 6px;
	color: #fff;
	font-size: .9rem;
	width: 300px;
	padding: 8px 12px;

	/* Position the tooltip */
	bottom: 100%;
	left: 50%;
	margin-bottom: 10px;
	margin-left: -150px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* <editor-fold> Date Popup */

.dateWidgetBoxWrapper {
	display: flex;
	align-items: center;
	gap: 5px;
}

.datePickerImage {
	cursor: pointer;
}

.datePickerImage:hover {
	box-shadow: 0 0 10px silver;
}

.datePickerPopup {
	background-color: #f7f7f7e3;
	margin-top: 4px;
	padding: 10px;
	border: 2px solid #4e6899b5;
	box-shadow: 0px 0px 16px 3px #adadc169;
	backdrop-filter: blur(5px);
	border-radius: 6px;
}

.gwt-DatePicker {}

.datePickerMonthSelector {
	background-color: #dedede;
	text-align: center;
	margin: -10px -10px 4px -10px;
	font-weight: bold;
	border-bottom: 1px solid #798bac;
}

.datePickerMonth {  }
.datePickerYear {  }
.datePickerPreviousButton, .datePickerNextButton, .datePickerPreviousYearButton, .datePickerNextYearButton {
	padding: 9px;
	text-align: center;
	cursor: pointer;
	width: 14px;
	border-radius: 6px;
}
.datePickerPreviousButton:hover, .datePickerNextButton:hover, .datePickerPreviousYearButton:hover, .datePickerNextYearButton:hover {
	background-color: #3b4a65b3;
	color: white;
}

.datePickerDays {

}

.datePickerWeekdayLabel, .datePickerWeekendLabel {
	margin: 2px;
	padding: 5px;
	text-align: center;
	font-size: .9rem;
	font-weight: bold;
}
.datePickerDay {
	padding: 9px 10px;
	text-align: center;
	cursor: pointer;
	font-size: .9rem;
	border-radius: 20px;
}
.datePickerDay:hover {
	box-shadow: 0 0 6px 1px #8b919896;
}
.datePickerDayIsToday {
	background-color: #ffecab;
	text-decoration: underline;
}
.datePickerDayIsWeekend {  }
.datePickerDayIsFiller {color: darkgrey;border-color: #d7d7d7;}
.datePickerDayIsValue {
	background-color: #485264;
	color: white;
}
.datePickerDayIsDisabled {  }
.datePickerDayIsHighlighted {  }
.datePickerDayIsValueAndHighlighted {  }


/* </editor-fold> */

/* <editor-fold> Responsive Design Changes */
@media only screen and (max-width: 600px) {

	.body {
		margin: 0 3px 0 0; /* removes wiggle on mobile */
	}

	#dps-logo {
		position: absolute;
		left: 15px;
		top: 5px;
		width: 60px;
	}

	#header-dps {
		padding: 10px 10px 0 82px;
		font-size: .9em;
	}

	#header-dld {
		padding: 0 10px 8px 86px;
		font-size: 1.2em;
	}

	#header-app-1 {
		padding: 15px 10px 5px 20px;
		font-size: .8em;
	}

	#header-app-2 {
		padding: 0 10px 15px 20px;
		font-size: 1.2em;
	}

	.informational-wrapper {
		border-width: 1px 0px;
		margin: 10px 0px;
		border-radius: initial;
	}
}

/* </editor-fold> */