/* Table of contents
A. form layout
B. Basic form controls
B1. Checkbox
B2. Radio
B4. Textbox
B3. Label
B5. Select
B6. Button
B6.1 Button primary
B6.2 Button secondary
B6.3 Button success
B6.4 Disabled button
B6.4a Disabled radio and checkbox
B6.4b Readonly
B6.5 Button link
B6.6 Ghost button
B6.7 Danger button
B6.8 Outline danger button
B7. Focus
B8. Fieldset & legend
B9. Combobox
	B9.A SelectWoo Combobox
B10. Validation
B11. Honey
B12. Form table
B13. Grid table bootstrap
B14. Agreement panel
B15. Progress bar
*/
/*** A. form layout ***/
.form-group {
	margin-bottom: 0;
}

.form-row {
	margin-left: -20px;
	margin-right: -20px;
}

.form-row>[class*=col-] {
	padding-left: 0;
	padding-right: 0;
}

.form-inline .form-check {
	display: inline-block;
	margin-left: 0;
}

.form-check {
 margin-left: 0;
	padding-left: 0;
 display: block;
}


.form-inline {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
}

@media (min-width: 576px) {
	.form-inline label {
		display: block;
	}
}

/*** B. basic form controls ***/
.form-control,
input[readonly],
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=number],
textarea {
	padding: 5px;
	display: block;
	border: 2px solid #d9d9d5;
	box-sizing: border-box;
	font-size: 1em;
	-webkit-appearance: none;
	border-radius: 0;
	margin-bottom: 30px;
	color: #444;
}

input::placeholder,
textarea::placeholder { color: #666; }

textarea.xxsmall {
	width: 2.5em;
}
textarea.xsmall {
	width: 5em;
}
textarea.small {
	width: 10em;
}
textarea.medium {
	width: 15em;
}
textarea.large {
	width: 20em;
}

/*** B1. Checkbox ***/
input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}
input[type="checkbox"] + label {
	font-weight: 400;
	margin-left: 40px;
	cursor: pointer;
}
input[type="checkbox"]:focus+label::before {
	outline: 3px solid #f5a623;
	outline-offset: 0;
}
input[type="checkbox"]:active+label::before {
	outline: 3px solid #f5a623;
	outline-offset: 0;
}
input[type="checkbox"]+label::before {
	cursor: pointer;
	padding: 4px;
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	border: 2px solid #D9D9D5;
	background-color: #fff;
	box-sizing: border-box;
	margin: 0 0 0 -40px;
	position: absolute;
}
input[type="checkbox"]:checked+label::before {
	background-color: #fff;
	box-sizing: border-box;
	content: "\f00c";
	color: #0279B1;
	cursor: pointer;
	display: block;
	font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 18px;
	height: 25px;
	line-height: 20px;
	padding: 1px 0px 0px 3px;
	position: absolute;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	width: 25px;
}

/*** B2. Radio ***/
input[type="radio"]+label  {
	font-weight: 400;
	margin-left: 40px;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

input[type="radio"]:checked + span,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label,
input[type="radio"]:not(:checked) + span {
    position: relative;
    cursor: pointer;
    line-height: 1.4em;
    display: block;
    color: #444;
    font-weight: 400;
}

input[type="radio"] + span::before,
input[type="radio"] + label::before {
	content : '';
	margin: 0 -25px 0 0;
	position: relative;
	left: -40px;
}

.form-inline input[type="radio"]:checked + span,
.form-inline input[type="radio"]:not(:checked) + span,
.form-inline input[type="radio"]:checked + label,
.form-inline input[type="radio"]:not(:checked) + label {
	display: inline-block
}

.form-inline .form-check input[type=radio]:first-child+label::before {
	margin-left: 0;
}

.form-inline .form-check input[type=radio]+label::before {
	margin-left: 40px;
}
input[type="radio"]:checked + span::before,
input[type="radio"]:checked + label::before {
	content : '' !important;
 	background-color: #0279B1;
}

input[type="radio"] + span::before,
input[type="radio"] + label::before {
	background-clip: content-box;
	border: 2px solid #D9D9D5;
	border-radius: 50%;
	content: "" !important;
	display: inline-block;
	height: 15px;
	padding: 3px;
	vertical-align: middle;
	min-width: 15px;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	box-sizing: content-box;
}

/* radio button inside table */
.form-group td {
padding: 0;
border-bottom: none;
}

.form-group tr:nth-child(even) {
background-color: initial;
}

/*** B3. Label ***/
label {
 font-size: 1em;
 display: block;
	font-weight: 700;
	margin-bottom: 10px;
}

/*** B4. Textbox ***/
input.xxsmall {
 width: 2.5em;
}
input.xsmall {
 width: 5em;
}
input.small {
 width: 10em;
}
input.medium {
 width: 15em;
}
input.large {
 width: 20em;
}

@media (max-width: 600px) {
 input.xxsmall, input.xsmall, input.small, input.medium, input.large {
 	width: 100%;
 }
}

/*** B5. Select ***/
select {
 display: block;
 border: 2px solid #d9d9d5;
 box-sizing: border-box;
 font-size: 1em;
 height: 40px;
 margin-bottom: 30px;
 color: #444
}

select, select.form-control {
 -webkit-appearance:menulist-button;
}

select.short {
 width: 8em;
}
select.medium {
 width: 12em;
}
select.long {
 width: 18em;
}

@media (max-width: 600px) {
 select.short, select.medium, select.long {
 width: 100%;
 }
}


/*** B6. Button */
.btn, a.btn {
	font-family: "Noto Sans", sans-serif;
	padding: 13px 13px;
	text-decoration: none;
	border-radius: 5px;
	line-height: 1.4em;
	display: inline-block;
	cursor: pointer;
	border: 0;
	-webkit-appearance: none;
	box-sizing: border-box;
	max-width: 300px;
	text-align: center;
	font-weight: 700;
	font-size: 1em;
	margin-bottom: 30px;
	margin-right: 20px;
	white-space: normal;
}
form .btn, form a.btn {
  margin-right: 0;
}

@media (max-width: 599px) {
    .btn, a.btn {
    	width: 100%;
		max-width: 100%;
    }
}
/*Will added a.badge so that it can apply to anchor link*/
.badge, a.badge {
	padding: 5px 10px;
	text-decoration: none;
}

.btn > i[class*="fa-"] {
	padding-right: 10px;
}

/*** B6.1 Button primary ***/
.btn-primary, a.btn-primary, a.btn-primary:visited {
	background-color: #0279b1;
	color: #fff;
	text-decoration: none;
	border: #0279b1 1px solid;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
a.btn-primary:not(:disabled):not(.disabled):active,
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
.btn-primary.badge:not(:disabled):not(.disabled):active,
.btn-primary.badge:hover, .btn-primary.badge:focus, .btn-primary.badge:active {
	background-color: #FFF;
	color: #0279B1;
	text-decoration: none;
	border: #B2B2B2 1px solid;
	box-shadow: none;
}

/*** B6.2 Button secondary ***/
.btn-secondary, a.btn-secondary, a.btn-secondary:visited {
	background-color: #fff; 
	color: #0279b1;
	text-decoration: none;
	border: #B2B2B2 1px solid;
} 

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
	background-color: #0279b1;
	color: #fff;
	text-decoration: none;
	border: #0279b1 1px solid;
	box-shadow: none;					
}

a.btn-secondary:visited:hover, a.btn-secondary:visited:focus, a.btn-secondary:visited:active {
	color: #fff;
	background-color: #0279b1;
}

/*** B6.3 Button success */
.btn-success, .btn-success, .btn-success:visited, a.btn-success,a.btn-success:visited {
	background-color: #4B8516;
	color: #fff;
	text-decoration: none;
	border: #4B8516 1px solid;
}

a.btn-success:hover, a.btn-success:focus, a.btn-success:active, a.btn-success:hover:active,
input.btn-success:hover, input.btn-success:focus, input.btn-success:active, input.btn-success:hover:active,
button.btn-success:hover, button.btn-success:focus, button.btn-success:active, button.btn-success:hover:active,
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active:focus {
	background-color: #fff;
	color:#4B8516;
	border: 1px solid #B2B2B2;
}

/*** B6.4 Disabled button */
.btn.disabled, .btn:disabled,
input[readonly], button[readonly], select[readonly],
input:disabled, button:disabled, select:disabled, textarea:disabled {
	background-color: #d9d9d5;
	color: #444;
	opacity: 1;
	cursor: not-allowed;
	border: 1px solid #d9d9d5;
}

/*Disabled radio and checkbox*/
input[type="radio"]:disabled + label,
input[type="checkbox"]:disabled + label {
	box-shadow: none;
	filter: grayscale(.1);
	opacity: .65;
	cursor: default;
	outline: none;
	pointer-events: none;
}

input[type="radio"]:disabled:before,
input[type="radio"]:disabled:before {
	background-color: #d5d5d5;
	border: 1px solid #d5d5d5;
	cursor: not-allowed;
	pointer-events: none;
}

input[type="radio"]:disabled + label::before,
input[type="checkbox"]:disabled + label::before {
	background: #d5d5d5;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  opacity: 0
}


/*B6.4b Readonly*/
input[readonly],
textarea[readonly] {
	background-color: #f2f2f2;
	border: 2px solid #d9d9d5;
	cursor: not-allowed;
}

/*** B6.5 Button Link */
.btn-link {
	background-color: #FFF;
	color: #0279b1;
	text-decoration: underline;
	border: none;
	/* margin-left: 7px; */
    padding: 3px;
}
.btn-link:hover {
    color: #015982;
    background-color: #fff;
}
input[type=button].btn-link:focus, .btn-link:focus, a.btn-link:focus{
    /*box-shadow: 0 0 0 3px rgb(245, 166, 35);*/
    color: #015982;
    background-color: #f8c165;
	border-radius: 0; 
}
/*added by Will to fix active state orange border*/
input[type=button].btn-link:active, .btn-link:active, a.btn-link:active{
    color: #015982;
    background-color: #f8c165;
	border-radius: 0; 
} 

a.btn-link {
	padding: 3px;
	text-decoration: underline;
}
a.btn-link:focus {
	/*box-shadow: none;*/
	border: none!important;
	outline: 0 !important;
}


/*** B6.6 Ghost button */
.btn-ghost{
	color: #0279B1;
	border: none;
}
.btn-ghost:hover,
.btn-ghost:active,
.btn-ghost:focus {
	background-color: rgba(151, 151, 149, 0.35);
	color: #0279B1;
}
.btn-ghost:disabled { 
	color: #767676;
	background-color: transparent;
}

/*** B6.7 Danger button ***/
.btn-danger, .btn-danger:visited, a.btn-danger, a.btn-danger:visited  {
	background-color: #950000;
	color: #fff;
	text-decoration: none;
	border: #950000 1px solid;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
	color: #D0021B;
	background-color: #fff;
	border: #b2b2b2 1px solid;
}
a.btn-danger:hover, a.btn-danger:focus, a.btn-danger:active,
a.btn-danger:not(:disabled):not(.disabled):active {
	color: #D0021B;
	background-color: #fff;
	border: #b2b2b2 1px solid;
}
/*** B6.8 Outline danger button ***/
.btn-outline-danger, .btn-outline-danger:visited,a.btn-outline-danger,a.btn-outline-danger:visited {
	background-color: #fff;
	color: #D0021B;
	text-decoration: none;
	border: #b2b2b2 1px solid;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,a.btn-outline-danger:hover, a.btn-outline-danger:focus, a.btn-outline-danger:active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #950000;
	border: #950000 1px solid;
}

/*** B7. focus ***/
input[type=radio]:focus+label::before,
input[type=radio]:active+label::before {
 	border-radius: 50%;
 	box-shadow: 0 0 0 3px rgb(245, 166, 35);
}

button:active,
input[type=submit]:active,
input[type=button]:active,
button:active:focus,
input[type=button]:active:focus,
input[type=submit]:active:focus,
button:not(:disabled):not(.disabled):active:focus,
input[type=button]:not(:disabled):not(.disabled):active:focus,
input[type=submit]:not(:disabled):not(.disabled):active:focus,
button:focus,
input[type=submit]:focus,
input[type=button]:focus,	
/*a.btn:focus, Will removed it to fix global template*/
/*a.btn:active,a.btn:focus, if want to add darker orange border*/
.btn:not(:disabled):not(.disabled):not(.btn-link):active,
.btn:not(:disabled):not(.disabled):not(.btn-link):focus,
.btn:not(:disabled):not(.disabled):not(.btn-link):active:focus
{
 	outline: 0 !important;
	box-shadow: 0 0 0 3px rgb(245, 166, 35);
}
/*btn-link darkorange border rmoval*/
.btn-link:active, .btn-link:focus {
	outline: 0 !important;
	box-shadow: none!important;
}

.form-control:focus, .form-control:active,
input[type=text]:active,
input[type=password]:active,
input[type=url]:active,
input[type=email]:active,
input[type=search]:active,
input[type=tel]:active,
input[type=number]:active,
textarea:active,
select:active,
input[type=text]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
select:focus {
	outline: 3px solid #f5a623;
	outline-offset: 0;
	border-color: #d9d9d5;
}
input[readonly]:active, button[readonly]:active, select[readonly]:active, textarea[readonly]:active,
input[readonly]:focus, button[readonly]:focus, select[readonly]:focus, textarea[readonly]:focus,
input:disabled:active, button:disabled:active, select:disabled:active,
input:disabled:focus, button:disabled:focus, select:disabled:focus,
textarea:disabled:focus, textarea:disabled:active {
	outline: none !important;
	box-shadow: none;
}

/*** B8. Fieldset & legend ***/
fieldset {
	border: none;
	padding: 0;
	margin: 0;
	margin-bottom: 30px;
	width: 100%;
}

legend {font-weight: 700; margin-bottom: 10px; font-size: 1em;}
legend.row {font-size: 1.44em;}

/*** B9. Combobox ***/
.container .rbt-menu.dropdown-menu {
	top: -30px ;
}

.rbt-menu.dropdown-menu a, .rbt-menu.dropdown-menu a:link {
 text-decoration: none;
 color: #444;
}
.dropdown-item.active,
.rbt-menu.dropdown-menu a:hover,
.rbt-menu.dropdown-menu a:focus,
.rbt-menu.dropdown-menu a:active,
.rbt-menu.dropdown-menu a:visited:hover,
.rbt-menu.dropdown-menu a:visited:focus,
.rbt-menu.dropdown-menu a:visited:active {
	color: #444;
	text-decoration: none;
	background-color: #D9D9D5;
}

.rbt-menu.dropdown-menu a:active, .rbt-menu.dropdown-menu a:focus {
	background-color: #D9D9D5;
	outline-offset: 0;
	outline: none;
	padding: .25rem 1.5rem;
}

.rbt-menu.dropdown-menu a:visited {
	color: #444;
}

button.close.rbt-close {
	margin-top: -60px;
	margin-right: 10px;
}

/*** B9.A SelectWoo Combobox ***/
.select2 .selection .select2-selection {
	display: flex;
    align-items: center;
	border: 2px solid #d9d9d5;
	border-radius: 0;
	box-sizing: border-box;
	font-size: 1em;
	height: 40px;
	color: #444;
}

.select2 .selection .select2-selection:focus {
	outline: 3px solid rgb(245, 166, 35);
}

.select2-container--open .select2-selection, .select2-container--focus:focus-visible, .selection:focus-visible, .select2-selection:focus-visible {
	outline: 3px solid rgb(245, 166, 35);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
	outline: 3px solid rgb(245, 166, 35);
}

.select2 .selection .select2-selection .select2-selection__arrow {
	height: 40px;
}

.select2-container--open .select2-dropdown.select2-dropdown--below {
	top: 4px;
}

.select2-container--open .select2-dropdown.select2-dropdown--above {
	top: -3px;
}

.select2-dropdown .select2-search--dropdown {
	padding: 4px 0;
}

.select2-container--default.select2-container--open .select2-selection {
	outline: 0!important;
}

.select2-dropdown--below > .select2-search--dropdown > input,
.select2-dropdown--above > .select2-search--dropdown > input {
	outline: 3px solid rgb(245, 166, 35);
}

.select2-results__options .select2-results__option:focus-visible {
	outline: 3px solid #5897fb;
}

.select2-search--dropdown .select2-search__field {
	margin-bottom: 0;
}

/*** B10. Validation ***/
.error-text, .invalid-feedback {
    display: block;
    margin-bottom: 10px;
    color: #d0021b;
    font-weight: 700;
    font-size: 1em;
}

.error-text:before, .invalid-feedback:before {
	font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f06a';
    color: #d0021b;
    margin-right: .6em;
}

span.error-text[style*="inline"], span.invalid-feedback[style*="inline"] {
	display: block !important;
}

/*** B11. Honey ***/
.honey {
	display: none;
}

/*** B12. Form table ***/
.cov-form-table input, .cov-form-table select, .cov-form-table button {
	margin-bottom: 0;
}
.cov-form-table input[type="checkbox"]+label::before {
	top: 10px;
}

/***  B13. Grid table bootstrap ***/
/* tested on VanDocsNotificationAndTracking staff app */
.page-item.disabled .page-link {
	padding: .5rem .75rem;
	text-decoration: none;
	background-color: #D9D9D6;
}
	
.page-item.active .page-link {
	background-color: #4B8516;
		border-color: #4B8516;
		padding: .5rem .75rem;
		text-decoration: none;
}

.page-link:active, .page-link:focus {
	background-color: #0279B1;
	border-color: #0279B1;
	padding: .5rem .75rem;
	color: #FFF;
	box-shadow: inset 0 0 0 3px #f5a623;
}

/* B14. Agreement panel */
.agreement-panel {
    background-color: rgba(245, 165, 36, 0.2);
    border: 1px solid #F5A623;
    border-radius: 5px;
    padding: 13px;
    margin-bottom: 20px;
}
.agreement-panel label {
	margin: 0px 10px 0 40px;
	font-weight: initial;
}

.agreement-panel input[type="checkbox"]+label::before {
    border: 2px solid #F5A623;
}
.agreement-panel input[type="checkbox"]:focus+label::before,
.agreement-panel input[type="checkbox"]:active+label::before {
    outline: 2px solid #0971b2;
    outline-offset: 0;
}

.agreement-panel ul {
	margin-left: 30px;
}
.agreement-panel {
    padding: 20px;
    border-left-width: 10px;
    display:flex;
    border-radius: 0;
}

.agreement-panel > .fa-icon {
	vertical-align: top;
    color: #F5A623;
    font-size: 2.25em;
    margin-right: 20px;
}

.agreement-panel .blk-content>:last-child {
    margin-bottom: 0;
}

/* B15. Progress bar */
.progressbar-height {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.cov-progressbar {
    display: flex;
    margin: 0 0 20px 0;
    padding-left: 2px;
	width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.cov-progressbar .fa-1x {
    width: 2em;
    font-size: 21px;
    margin-right: 5px;
}

.cov-progressbar .completed .fa-1x .fa-stack-1x {
    top: 0;
}

.cov-progressbar .fa-1x .fa-stack-1x {
    font-size: 28px;
    font-weight: 600;
    top: -2px;
}

.cov-progressbar li {
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
    width: auto;
    padding-bottom: 10px;
}

.cov-progressbar li span {
    margin: auto;
}

.cov-progressbar li:not(:first-of-type) {
    margin-left: 5px;
}

.cov-progressbar li:not(:last-child):after {
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Free';
    font-weight: 600;
    content: "\f054";
    margin: auto;
    font-size: 45px;
    transform: scale(0.5, 1);
    color: #d9d9d5;
    height: 62px;
}

.next .cov-progressbar-step {
    color: #B2B2B2;
}
.cov-progressbar-step {
    color: #0279b1;
	margin-right: 5px;
}

.cov-progressbar-icon {
    font-weight: 500;
}

.cov-progressbar-text {
    color: #444;
}

.completed .cov-progressbar-icon {
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Free';
    font-weight: 900;
    visibility: hidden;
}

/* IE only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .completed .cov-progressbar-icon {
        visibility: visible;
    }
 }

.completed .cov-progressbar-icon:before {
    content: "\f00c";
    visibility: visible;
    margin-left: 8px
}

.active .cov-progressbar-step {
    color: #4B8516;
}

.active .cov-progressbar-step .cov-progressbar-text {
    font-weight: 600;
}

/* Firefox only */
.cov-progressbar {
    scrollbar-color:#d9d9d5 #f2f2f2;
    scrollbar-width: thin;
}

/* IE only https://stackoverflow.com/questions/29698207/how-to-make-a-custom-scroll-bars-in-ie  */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .cov-progressbar {
        scrollbar-base-color: #f2f2f2;
        scrollbar-face-color: #d9d9d5;
        scrollbar-3dlight-color: #d9d9d5;
        scrollbar-highlight-color: #d9d9d5;
        scrollbar-track-color: #f2f2f2;
        scrollbar-arrow-color: #d9d9d5;
        scrollbar-shadow-color: #d9d9d5;
        scrollbar-dark-shadow-color: #d9d9d5;
    }
}

.cov-progressbar::-webkit-scrollbar {
  height: 5px;
}

.cov-progressbar::-webkit-scrollbar-track {
  background: #f2f2f2;

}

.cov-progressbar::-webkit-scrollbar-thumb {
  background: #d9d9d5;
}

.cov-progressbar::-webkit-scrollbar-thumb:hover {
  background: #d9d9d5;
}

.progressbar-container {
	position: relative;
}
.progressbar-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 5rem;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    transition: all linear 0.3s;
}

.progressbar-container.scrolled-left::before {
    background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));
    z-index: 99;
}

.progressbar-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 5rem;
    background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    transition: all linear 0.3s;
}

.progressbar-container.scrolled-right::after {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

/*** responsive ***/
/*** desktop ***/

/*** tablet ***/
@media screen and (max-width: 980px) {
/*** B15. Progress bar ***/
	.cov-progressbar {
		padding-left: 0;
	}
	
    .completed .cov-progressbar-icon:before {
    	margin-left: 5px
    }

    .cov-progressbar-step {
        flex-direction: column;
        display: flex;
    }

    .cov-progressbar .fa-1x {
        font-size: 14px;
		margin-right: auto;
    }

    .cov-progressbar .fa-1x .fa-stack-1x {
        font-size: 20px;
    }
}

/*** mobile ***/
@media screen and (max-width: 599px) {
/*** B14. Agreement panel ***/
	.agreement-panel > .fa-icon {
		display: none;
	}
/*** B. basic form controls ***/
	textarea.xxsmall, 
	textarea.xsmall, 
	textarea.small, 
	textarea.medium, 
	textarea.large {
		width: 100%;
	}
}


/*** print ***/
@media print {
	input[type="checkbox"]+label{
		display: flex;
		align-items: center;
		gap: 10px;
	}
	input[type="checkbox"]+label::before {
		position: static;
		padding: 0px; 
 
	}
	/*** B15. Progress bar ***/
	.progressbar-container::before {
		background-image: none;
	}
  }