.required-mark-before::before {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: 0.3em;
    content: "";
    vertical-align: text-top;
    background-image: 
		url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 0.5rem 0.5rem;
}

main *:not(summary)[role=button],
a.link-button,
main input[type=submit],
main input[type=button],
main button {
	display: inline-flex;
    align-items: center;
	text-decoration: none;
	padding: 0.25em 1.25em;
	margin: 0.1em 0.5em;
	/* border: 0; */
	height: var(--sp3);
	cursor: pointer;
}
.small-link-button {
    padding: 0.4em !important;
    line-height: 1em;
    font-size: 0.9rem !important;
    height: auto !important;
}
.midsize-link-button,
a.midsize-link-button {
    padding: 0.75em !important;
    line-height: 1.1em;
    font-size: 0.95rem !important;
    height: auto !important;
	margin: 0 0.1em;
}
.icon-button {
	text-align: center;
	justify-content: center;
	min-width: 2.5em;
}

main *[role=button],
main .olivero-details__summary,
a.link-button,
main input[type=submit],
main input[type=button],
main button {
	background: var(--color-btn-bg, var(--brand-element-bg));
	color: var(--color-btn-txt, var(--brand-text-color));
	border: 2px solid var(--color-btn-brd,transparent);
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;	
	border-radius: 0.33em;
}
a.link-button.is-disabled,
.button:disabled, 
.button.is-disabled,
a.link-button.is-disabled:hover,
.button:disabled:hover, 
.button.is-disabled:hover {
    color: var(--color-btn-txt-disabled, var(--brand-text-color));
	border-color: var(--color-btn-brd) !important;
	opacity: 0.75;
	outline: none;   
}

main *:not(summary)[role=button]:hover, main *:not(summary)[role=button]:active, main *:not(summary)[role=button]:focus,
main a.link-button:hover, main a.link-button:active, main a.link-button:focus,
main input[type=submit]:hover, main input[type=submit]:active, main input[type=submit]:focus,
main input[type=button]:hover, main input[type=button]:active, main input[type=button]:focus,
main button:hover, main button:active, main button:focus {
}
main *[role=button]:hover, main *:not(summary)[role=button]:active, main *:not(summary)[role=button]:focus,
main a.link-button:hover, main a.link-button:active, main a.link-button:focus,
main input[type=submit]:hover, main input[type=submit]:active, main input[type=submit]:focus,
main input[type=button]:hover, main input[type=button]:active, main input[type=button]:focus,
main button:hover, main button:active, main button:focus {
	background: var(--color-btn-bghover, var(--brand-element-hoverbg));
	color: var(--color-btn-txthover, var(--brand-text-color));
	border-color: var(--color-btn-brdhover, transparent);
	outline: 2px solid var(--color-btn-outlinehover, var(--brand-element-borders));
    outline-offset: 2px;	
}


.olivero-details {
	border: none !important;
}
main .olivero-details__summary,
details > summary {
	border-radius: 2em;
	padding-left: 2.5em;
	padding-right: 2.5em;
}
details,
details > .olivero-details__wrapper1 {
	border-radius: 2em 2em var(--bs-border-radius) var(--bs-border-radius) !important;
}
.olivero-details__summary::after {
	box-shadow: none !important;
}
.olivero-details > .olivero-details__summary::before {
	margin-left: 0.4em;
}


[type="color"], 
[type="date"], 
[type="datetime-local"], 
[type="email"], 
[type="file"], 
[type="month"], 
[type="number"], 
[type="password"], 
[type="search"], 
[type="tel"], 
[type="text"], 
[type="time"], 
[type="url"], 
[type="week"], 
textarea,
select,
.form-select,
.form-select:focus {
  box-shadow: -5px 0 0 var(--brand-color-secondary);
  border-radius: var(--border-radius);
}


:is(
.form-select,
[type="color"], 
[type="date"], 
[type="datetime-local"], 
[type="email"], 
[type="file"], 
[type="month"], 
[type="number"], 
[type="password"], 
[type="search"], 
[type="tel"], 
[type="text"], 
[type="time"], 
[type="url"], 
[type="week"], 
input[type="checkbox"], 
input[type="radio"], 
textarea,
select):focus {
    border: 1px solid var(--brand-element-borders);
    outline: 2px solid var(--brand-element-borders);
	outline-offset: 0;
}
:is(
.form-select,
[type="color"], 
[type="date"], 
[type="datetime-local"], 
[type="email"], 
[type="file"], 
[type="month"], 
[type="number"], 
[type="password"], 
[type="search"], 
[type="tel"], 
[type="text"], 
[type="time"], 
[type="url"], 
[type="week"], 
input[type="checkbox"], 
input[type="radio"], 
textarea,
select):hover {
	border: 1px solid var(--brand-element-borders);
}

input[type="checkbox"]:checked {
	/*
	background-image: url(data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill=var(--brand-element-borders) fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E);
	*/
	background-image: none;
}

/* using font awesome for checkboxes */
input[type="checkbox"]:checked {
	background: var(--brand-color-primary);
	border-color: var(--brand-color-primary);
}
input[type="checkbox"]:checked::after {
	content: "\f00c";
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;	
	text-align: center;
	color: white;
	width: 100%;
	font-size: 1.1em;
	cursor: pointer;
}
input[type="checkbox"]:checked:hover::after {
	color: var(--brand-element-borders);
}
.fa-symbol-before::before,
.form-item:has(input.fa-symbol-before)::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;		
}

.search-button,
.reset-button,
.form-item-search,
.form-item:has(input.search-field) {
	position: relative;
}
.form-item-search input,
.search-field {
	padding-left: 2.75em;
}

.search-button::after,
.form-item-search::before,
.form-item:has( > input.search-field)::before {
	content: "\f002";
	color: var(--default-form-grey);
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
	position: absolute;
    font-size: 1.5em;
    top: 50%;
    margin-top: -0.35em;
    left: 0.4em;
}
.reset-button::after { 
	content: "\f00d";
	color: var(--default-form-grey);
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
	position: absolute;
    font-size: 1.5em;
    top: 50%;
    margin-top: -0.35em;
    left: 0.4em;
}
.search-button::after,
.reset-button::after {
	font-size: 1em;
	margin-top: -0.25em;
	padding-left: 0.35em;
	pointer-events: none;
}
.reset-button::after {
	padding-left: 0.45em;
}
.search-button.text-white::after,
.reset-button.text-white::after {
	color: white !important;
}


.small input[type="checkbox"], 
.small input[type="radio"] {
	width: var(--sp);
    height: var(--sp);
	line-height: 1em;
}

.toggle-all-checkbox {
	position: absolute;
	margin: 0 0.5em;
}

.error:is(
	[type="color"], 
	[type="date"], 
	[type="datetime-local"], 
	[type="email"], 
	[type="file"], 
	[type="month"], 
	[type="number"], 
	[type="password"], 
	[type="search"], 
	[type="tel"], 
	[type="text"], 
	[type="time"], 
	[type="url"], 
	[type="week"], 
	textarea,
	select, 
	.form-select, 
	.form-select:focus) {
		
	border-color: var(--brand-color-formerror);
	box-shadow: -5px 0 0 var(--brand-color-formerror);
	animation: error-background-blinker 3s linear infinite;
}
@keyframes error-background-blinker {
  50% {
    background: hsl(var(--brand-clr-formerror-H),var(--brand-clr-formerror-S),95%);
  }
}

.form-item.description-inline input {
	margin-right: 1.5em;
}
.form-item.description-inline .description {
	display: inline-block;
}
fieldset.wrapper-tight > .fieldset__wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

form.editable-true .field-click-wrap .static-value {
	cursor: pointer;
	color: var(--brand-color-primary);
}
form.editable-true .field-click-wrap .static-value:hover {
	color: var(--brand-color-secondary);
}
form.editable-true .field-click-wrap .static-value:after {
	/* add pencil from fa */
	content: "\f303";
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900);	
	font-size: 0.8em;
	margin-left: 0.5em;
	transform: translateY(-1.2em);
	color: var(--default-form-grey);
	opacity: 50%;
	padding: 0.4em;
	border-radius: 50%;
}
form.editable-true h1.field-click-wrap .static-value:after,
form.editable-true h2.field-click-wrap .static-value:after {
	font-size: 0.65em;
}
form.editable-true .field-click-wrap .static-value:hover:after {
	opacity: 75%;
	color: white;
	background: var(--brand-color-secondary);
}

.field-click-wrap {
	position: relative;
}

.utility-button {
	background: var(--color-gray-lighter, '#ddd') !important; 
	text-decoration: none !important;
	border: 0 !important;
	color: var(--brand-color-secondary, gray) !important;
}

input:not([type=button],[type=submit],[type=checkbox]) {
	max-width: 35em;
	width: 100%;
}
.dropdown-menu.show {
	max-width: 90vw;
	top: 3.75em !important;
	transform: none !important;
}
.dropdown:has(.dropdown-menu) {
	position: relative;
}