@charset "utf-8";
/* CSS Document */
:root {
	--white: #fff;
	--black: #222;
	--primary-blue: #1A4781;
	--primary-blue-hover: #022E55;
	--primary-tan: #D6C9C0;
	--primary-grey: #EAEDF0;
	--primary-white: #FBFBFB;
	--text: #000;
	--text-secondary: #5A6268;
	--placeholder: #9CA6AE;
	--secondary-blue: #b2ccdf;
	--secondary-yellow: #ffc107;
	--secondary-green: #99a557;
	--visited: #4C2C92;
	--active: #0B0C0C;
	--disabled: #818B93;
	--danger: #b00020;
	--danger-hover: #831621;
	--success: #2e7d32;
	--success-hover: #186329;
	--warning: #d14900;
	--warning-hover: #b84000;
	--gray-5: #F7F7F7;
	--gray-10: #F1F1F1;
	--gray-20: #E3E3E3;
	--gray-30: #5A6268;
	--gray-40: #ACACAC;
	--gray-50: #919191;
	--gray-60: #757575;
	--gray-70: #5E5E5E;
	--gray-80: #464646;
	--gray-90: #2F2F2F;
	--gray-100: #171717;
}

body {
	font-family: 'Open Sans', sans-serif;
	background: linear-gradient(#F7FBFF, #EDF4FA);
	background-attachment: fixed;
}

.bg-primary {
	background-color: #1A4781 !important;
}
/* ACCESSIBILITY */
.skip-to-content-link {
	background: var(--primary);
	color: var(--white);
	height: 30px;
	left: 50%;
	padding: 8px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
}

	.skip-to-content-link:focus {
		transform: translateY(0%);
		z-index: 500;
		outline: 2px solid darkorange;
		outline-offset: 2px;
	}

@supports selector(:focus-visible) {
	:is(a, button, input, .dropdown-toggle):focus-visible {
		outline: 2px solid #0d6efd;
		outline-offset: 2px;
	}
}
/* HEADINGS */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
	font-family: 'Roboto', sans-serif;
	margin: 0px 0px 10px 0px;
	font-weight: 700;
}

h6 {
	font-size: .8rem;
	text-transform: uppercase;
}

.display-1 {
	font-weight: 700;
	line-height: 1.2;
	font-size: 3.7rem;
}

.font-light {
	font-weight: 300;
}

.font-regular {
	font-weight: 400;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold, .bold, b, strong {
	font-weight: 700;
}
/* PARAGRAPHS */
p {
	margin-top: 0;
	margin-bottom: 1rem;
	font-weight: 400;
}

	p .lead {
		font-size: 1.4rem;
		font-weight: 400;
	}

	p .small {
		color: var(--primary-blue);
		font-size: .875rem;
	}

	p .wi {
		font-weight: 400;
		font-size: 18px;
		margin-bottom: 10px;
	}
/* WI HEADER */
#wi-gov {
	background-color: var(--primary-blue-hover);
	padding: 0px;
	color: #fff;
	font-size: 14px;
}

#win-header-info-blue {
	background-color: transparent;
	padding: 10px 0px 0px 0px;
	color: var(--gray-100);
}

	#win-header-info-blue .title .sow {
		color: var(--gray-30);
		font-size: 1rem;
	}

	#win-header-info-blue .title .agency {
		color: var(--gray-30);
		font-size: 1.2rem;
	}

	#win-header-info-blue .title .app {
		font-size: 1.3rem;
		font-weight: 700;
		margin-top: 0px;
		color: var(--gray-100);
	}

@media only screen and (max-width: 600px) {
	#win-header-info-blue .title .sow {
		font-size: 1rem;
	}

	#win-header-info-blue .title .agency {
		font-size: .9rem;
	}

	#win-header-info-blue .title .app {
		font-size: 1rem;
	}
}
/* FOOTER */
footer {
	color: #fff;
}

	footer #footer-top {
		background-color: #184470;
		padding: 2rem 0;
		color: #fff;
	}

.footer a, .footer a i {
	color: #fff;
}

	.footer a:hover,
	.footer a i:hover {
		color: #f9c118;
	}

footer h1, footer h2, footer h3, footer h4, footer h5 {
	color: #fff;
	font-weight: 800;
	margin-bottom: 1.5rem;
}

footer #footer-bottom {
	background-color: #1c1c1c;
	padding: 2rem 0;
}

	footer #footer-bottom .row:first-of-type {
		background-image: url(https://wisconsindot.gov/_catalogs/masterpage/SharePointNext/images/forward.png);
		background-repeat: no-repeat;
		background-position: center center;
	}

	footer #footer-bottom ul.footer-links {
		padding: 0;
	}

	footer #footer-bottom .copyright {
		border-top: 1px solid #f9c118;
		font-size: 12px;
		margin-top: 10px;
		padding-top: 1.5rem;
		font-weight: 300;
	}

	footer #footer-bottom .social li {
		display: inline;
		font-size: 32px;
		padding: 0 5px;
	}

footer .social a,
footer .social a:hover {
	text-decoration: none;
}
/* LISTS */
li {
	font-weight: 400;
}

	li.list-group-item {
		background-color: transparent;
	}
/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
	width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

/* SPACERS */
@media (min-width:768px) {
	.component-spacer-6 {
		padding: 3rem 0;
	}

	.component-spacer-4 {
		padding: 2rem 0;
	}
}

@media (max-width:767px) {
	.component-spacer-6,
	.component-spacer-4 {
		padding: 1.5rem 0;
	}
}

/* CUSTOM BOOTSTRAP */
.mb-5 {
	margin-bottom: 5rem !important;
}

button {
	background-color: transparent;
	border: none;
}

	button.link-primary {
		font-weight: 500;
		color: var(--primary-blue);
	}

	button.form-tools:hover {
		font-weight: 500;
		color: var(--primary-blue-hover);
	}
/*
.btn {
    padding: .375rem .9rem;
    margin-bottom: 4px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
}
*/
.btn.btn-sm {
	padding: .1rem .5rem;
}

.btn-primary {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
}

	.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
		background-color: var(--primary-blue);
		border-color: var(--primary-blue);
	}

	.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
		background-color: var(--primary-blue-hover);
		border-color: var(--primary-blue-hover);
	}

.btn-outline-primary {
	color: var(--primary-blue);
	border-color: var(--primary-blue);
	border-width: 2px;
}

	.btn-outline-primary:hover {
		color: #fff;
		background-color: var(--primary-blue-hover);
		border-color: var(--primary-blue-hover);
	}

	.btn-outline-primary:focus {
		color: #fff;
		background-color: var(--primary-blue-hover);
		border-color: var(--primary-blue-hover);
	}

.btn-secondary {
	background-color: var(--gray-80);
	border-color: var(--gray-80);
}

	.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
		background-color: var(--gray-90);
		border-color: var(--gray-90);
	}

	.btn-secondary:hover, .btn-secondary.focus {
		background-color: var(--gray-90);
		border-color: var(--gray-90);
	}

.btn-black {
	color: #fff;
	background-color: var(--black);
}

	.btn-black:hover {
		color: #fff;
	}

.btn-white {
	color: #333;
	background-color: var(--white);
	border: 1px solid #999;
}

	.btn-white:hover {
		background-color: #ededed;
	}

.btn-danger {
	background-color: var(--danger);
	border-color: var(--danger);
}

	.btn-danger:hover {
		background-color: var(--danger-hover);
		border-color: var(--danger-hover);
	}

.btn-warning {
	color: var(--white);
	background-color: var(--warning);
	border-color: var(--warning);
}

	.btn-warning:hover {
		color: var(--white);
		background-color: var(--warning-hover);
		border-color: var(--warning-hover);
	}

.btn-success {
	background-color: var(--success);
	border-color: var(--success);
}

	.btn-success:hover {
		background-color: var(--success-hover);
		border-color: var(--success-hover);
	}

.btn-search {
	border-color: #ced4da;
	background-color: #f2f4f5;
	border-width: 2px;
}

	.btn-search:hover {
		border-color: #ced4da;
		background-color: #f2f4f5;
		border-width: 2px;
	}

a.btn-link {
	color: #1E46C3;
}

	a.btn-link:hover {
		color: #283593;
	}

	a.btn-link:active {
		color: #283593;
	}

a.link-primary {
	color: #3F51B5;
}

	a.link-primary:hover {
		color: #283593;
	}

	a.link-primary:active {
		color: #283593;
	}

a.disabled {
	/* Make the disabled links grayish*/
	color: gray;
	/* And disable the pointer events */
	pointer-events: none;
}
/* TABLES */
td {
	vertical-align: middle;
}

.table-transparent {
	--bs-table-bg: transparent !important;
	background-color: transparent !important; /* For older browsers or specific overrides */
}
/* TABLES: BADGES */
.text-bg-success {
	background-color: #DCFFF1 !important;
	border-color: #2E7D32;
	color: #2E7D32 !important;
	font-size: .9rem;
	border: solid 2px;
	padding: 6px 4px;
	margin-left: 4px;
}

.text-bg-warning {
	background-color: #FFF7D6 !important;
	border-color: #BE550A;
	color: #BE550A !important;
	font-size: .9rem;
	border: solid 2px;
	padding: 6px 4px;
	margin-left: 4px;
}

.text-bg-danger {
	background-color: #FFECEB !important;
	border-color: #A51D2B;
	color: #A51D2B !important;
	font-size: .9rem;
	border: solid 2px;
	padding: 6px 4px;
	margin-left: 4px;
}

.text-bg-light {
	background-color: #F1F2F4 !important;
	border-color: #44546F;
	color: #44546F !important;
	font-size: .9rem;
	border: solid 2px;
	padding: 6px 4px;
	margin-left: 4px;
}
/* PAGINATION */
.page-link {
	position: relative;
	display: block;
	color: #1A4781;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #dee2e6;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-item.active .page-link {
	z-index: 3;
	color: #fff;
	background-color: #1A4781;
	border-color: #1A4781;
}
/* CARDS */
.card-group {
	display: flex;
	flex-flow: nowrap;
}

.card {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
	border-radius: 0.75rem;
	border-color: #D2DCE3;
	border: 1px solid #D2DCE3;
}

label.card {
	cursor: pointer;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Style for the selected card */
.btn-check:checked + .card {
	border: solid 3px #0d6efd;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.card-title {
	color: var(--gray-100);
}

.card-header {
	padding: 1rem;
	margin-bottom: 0;
	background-color: #D4EDFF;
	border-bottom: 1px solid #D4EDFF;
	color: white;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
}

.card-selected {
	border-color: rgba(50,129,232,0.68);
	border-width: 8px;
}

.border {
	border-color: #D2DCE3 !important;
	border-width: 3px !important;
}

@media (min-width: 340px) {
	.card-group.card-group-scroll {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

.card-group.card-group-scroll > .card {
	flex-basis: 35%;
}
/* ACCORDIONS */
.accordion-item {
	background-color: transparent !important;
}

.accordion-button {
	background-color: transparent !important;
}

.accordion .card {
	min-width: 250px;
}

@media (max-width: 576px) {
	.accordion .card {
		max-width: 200px;
	}
}
/* PROGRESS BAR */
.sos-progressbar-area {
	z-index: 1000;
	background-color: #ffffff;
}

.progress-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	background-color: #2B7496;
	transition: width .6s ease;
	font-weight: 500;
}

.progress, .progress-stacked {
	--bs-progress-height: 1rem;
	--bs-progress-font-size: 0.75rem;
	--bs-progress-bg: #DCE3E9;
	--bs-progress-border-radius: var(--bs-border-radius);
	--bs-progress-box-shadow: var(--bs-box-shadow-inset);
	--bs-progress-bar-color: #fff;
	--bs-progress-bar-bg: #0d6efd;
	--bs-progress-bar-transition: width 0.6s ease;
	display: flex;
	height: var(--bs-progress-height);
	overflow: hidden;
	font-size: var(--bs-progress-font-size);
	background-color: var(--bs-progress-bg);
	border-radius: var(--bs-progress-border-radius);
}
/* PROGRESS BAR NAV */
@media screen and (max-width:650px) {
	.sos-progressbar-area nav {
		overflow: scroll;
	}
}

.sos-progressbar-area nav ul li a > .row > .col-12:first-of-type {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.sos-progressbar-area .step-label {
	font-size: .85rem;
}

#progressbarNavbar2 .step {
	border: 1px solid black;
	border-radius: 50%;
	color: black;
	height: 25px;
	width: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
	flex-shrink: 0;
}

	#progressbarNavbar2 .step.active {
		background-color: black;
		color: white;
	}

nav.progressbarNavigation {
	position: relative;
	z-index: 2;
	height: 2.5rem;
	overflow-y: hidden;
	scroll-behavior: smooth;
}

ul.progressbarNavItem {
	display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1.5rem;
	padding-left: 0;
	margin-block: 0;
	overflow-x: auto;
	list-style: none;
	text-align: center;
	white-space: nowrap;
	justify-items: stretch;
}

button.horscroll-menu-item {
	display: block;
	padding: .5rem .75rem;
}
/* .active needs revision */
.active {
	font-weight: 400;
}
/* TABS */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	background-color: transparent;
}

.nav-tabs .nav-link {
	color: #495057;
}

.nav-pills .nav-link {
	border-radius: .25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	color: #495057;
	background-color: transparent;
	margin-bottom: 0.5rem;
	border: 1px solid #dee2e6;
	transition: all 0.2s ease-in-out;
}

	.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
		color: #fff;
		background-color: var(--primary-blue);
		border-color: var(--primary-blue);
	}

	.nav-pills .nav-link:not(.active):hover {
		background-color: #e9ecef;
	}
/* FORMS */
legend.order-legend {
	font-weight: 600;
	font-size: 1rem;
}

/* Override Bootstrap's default legend font-size for card-text legends */
legend {
	font-size: 1rem !important;
}

.form-control {
	display: block;
	min-height: 58px;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #F2F4F5;
	background-clip: padding-box;
	border: 2px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select {
	display: block;
	width: 100%;
	padding: 0.375rem 2.25rem 0.375rem 0.75rem;
	-moz-padding-start: calc(0.75rem - 3px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #f9f9f9;
	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 0.75rem center;
	background-size: 16px 12px;
	border: 2px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
	opacity: 0.7;
}

.form-check > * {
	display: inline-block;
	vertical-align: middle;
}

.centered-radio {
	display: flex;
	justify-content: center; /* Centers the content horizontally */
	align-items: center; /* Centers the content vertically */
}
/* DOCUMENTS */
.document {
	display: flex;
	flex-direction: row;
	padding: 10px 0;
	background-color: #EAEAEA;
}

	.document:nth-of-type(even) {
		background-color: #fff;
	}

	.document .doc-det {
		align-content: center;
	}

		.document .doc-det:first-of-type {
			margin: 0 15px;
		}

	.document .qty {
		font-weight: bold;
	}

	.document .selections {
		flex: 4 1 auto;
	}

		.document .selections .row {
			margin: 0;
		}

			.document .selections .row .col-12 {
				padding: 0 4px 0 0;
				align-content: center;
			}

				.document .selections .row .col-12:last-of-type {
					padding: 0;
				}

	.document .actions {
		margin: 0 15px;
	}

		.document .actions a {
			padding: 6px;
		}

.input-group > .form-control, .input-group > .form-floating, .input-group > .form-select {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	min-height: 58px;
}

@media screen and (max-width:1199px) {
	.document .selections .row .col-12,
	.document .selections .row .col-12:last-of-type {
		padding: 5px;
	}

	.document .doc-det {
		align-content: start;
	}
}

.duplicate-doc {
	display: flex;
	flex-direction: row;
	align-items: center;
}

span.ct {
	min-width: 80px;
}

input#copies {
	width: 80px;
}
/* ADMIN STYLES */
.admin-menu .navbar-toggler {
	font-family: 'Roboto';
}

.admin-menu {
	background-color: #F6F5F3;
	padding: 15px;
	align-items: flex-start;
	flex-grow: 1;
	border-radius: 5px;
}

	.admin-menu #adminNav {
		flex-direction: column;
		align-items: start;
	}

	.admin-menu .list-group-item {
		background-color: transparent;
		padding: 10px 0;
		color: #004785;
	}

		.admin-menu .list-group-item.active {
			font-weight: bold;
			border-color: rgba(0,0,0,.125);
			border-top-width: 0;
		}

		.admin-menu .list-group-item:hover {
			color: black;
		}

.table-nav {
	margin-bottom: .5rem;
}

	.table-nav li {
		border-right: 1px solid #666;
	}

		.table-nav li:last-of-type {
			border-right: none;
		}

		.table-nav li a {
			padding: .15rem 1rem;
		}

	.table-nav .active {
		font-weight: bold;
		color: black;
	}
/* MODAL */
.modal-header {
	background-color: var(--primary-blue);
	color: white;
}

	.modal-header .btn-close {
		filter: invert(1) grayscale(100%) brightness(200%);
	}
/* The main container for the progressive disclosure cards */
.card-container .card {
	display: none; /* Hide all cards by default */
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
}

	/* Style for the currently active/shown card */
	.card-container .card.active {
		display: block;
	}

/* Custom styling for form checks (radio buttons)
.form-check {
  border: 1px solid #ced4da;
  padding: 1rem 1.5rem 1rem 3rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-check:hover {
  border-color: #86b7fe;
}

.form-check input[type="radio"]:checked + .form-check-label {
  font-weight: 600;
}
        
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
*/

/* MODIFIED CSS FOR CLICKABLE AREA 
           We are keeping your original border and padding styles.
        */
.form-check {
	border: 1px solid #ced4da;
	padding: 1rem 1.5rem 1rem 3rem;
	border-radius: 0.375rem;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	/* CRITICAL: Allows the label's pseudo-element to anchor to this box */
	position: relative;
}

	.form-check:hover {
		border-color: #86b7fe;
	}

/* CRITICAL CHANGE: STRETCHED LINK LOGIC
           This creates an invisible layer over the entire .form-check area.
           Clicking anywhere in the box now acts as a click on the label.
        */
.form-check-label::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

/* Style for the selected state using the :has selector */
.form-check:has(.form-check-input:checked) {
	border: 2px solid var(--primary-blue);
	background-color: #f0f7ff;
}

.form-check-input:checked + .form-check-label {
	font-weight: 600;
}

.form-check-input:checked {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

/* Center the input vertically within your custom padding */
.form-check-input {
	margin-top: 0.3rem;
}

.validation-summary-errors ul {
	 margin-bottom: 0;
}

@media print {
	/* All your print styles go here */
	#form-basket-plate-info {
		display: none !important;
	}
}