/*
 * Theme Buttons and Forms
 * ======================================================== *//*
 * TODO: maybe use ::user-valid instead of ::valid
 * See: https://medium.com/@developerr.ayush/enhance-your-form-validation-with-pure-css-no-javascript-needed-22ae8c4f5109
 *
 */




/*
 * Some webkit style adjustments
 * For more options see: https://codepen.io/andresdamelio/pen/KKbvdYb
 */


/* Select :marker */
form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
form select:not([multiple]) {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjdtbSIgaGVpZ2h0PSIzLjVtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNC45IDEwIj48cG9seWdvbiBmaWxsPSIjNzI3MjcyIiBwb2ludHM9IjEuNCA0LjcgMi41IDMuMiAzLjUgNC43IDEuNCA0LjciLz48cG9seWdvbiBmaWxsPSIjNzI3MjcyIiBwb2ludHM9IjMuNSA1LjMgMi41IDYuOCAxLjQgNS4zIDMuNSA1LjMiLz48L3N2Zz4=);
	background-size: 22px 100%;
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
}


/*
 * Some conditionals
 * 
 */
.has-conditional + .is-conditional {
	display: none;
}
.has-conditional:has(:checked) + .is-conditional {
	display: block;
	padding-left: 2rem;
	padding-bottom: 1rem;;
}








/* Date inputs (webkit only)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
form input[type="date"],
#login-code {
	background-size: 2.2rem 100%;
	background-position: calc(100% - 1.8rem) center;
	background-repeat: no-repeat;
	letter-spacing: 1px;
	padding-right: 1.5rem;
}
#login-code {
	padding-right: 5.5rem;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ia2V5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ni43bW0iIGhlaWdodD0iOTYuMm1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMzIuNCAyNzIuNiI+PHBhdGggZmlsbD0iI2MwYmJiZSIgZD0iTTExNS40LDExNC40YzAsMTktMTUuNCwzNC40LTM0LjQsMzQuNHMtNC0uMi02LS41bC01LjksNS45Yy0uNi42LTEuNC45LTIuMi45aC03Ljh2OS40YzAsMS43LTEuNCwzLjEtMy4xLDMuMWgtOS40djkuNGMwLDEuNy0xLjQsMy4xLTMuMSwzLjFoLTI1Yy0xLjcsMC0zLjEtMS40LTMuMS0zLjF2LTIwLjNjMC0uOC4zLTEuNi45LTIuMmwzMS40LTMxLjRjLS43LTIuOC0xLjEtNS42LTEuMS04LjYsMC0xOSwxNS40LTM0LjQsMzQuNC0zNC40czM0LjQsMTUuNCwzNC40LDM0LjRaTTUyLjksMTE0LjRjMCwzLC40LDUuOCwxLjMsOC41LjQsMS4xLDAsMi4zLS44LDMuMmwtMzEuOCwzMS44djE1LjloMTguOHYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMWg5LjR2LTkuNGMwLTEuNywxLjQtMy4xLDMuMS0zLjFoOS42bDYuMS02LjFjLjgtLjgsMS45LTEuMSwyLjktLjgsMiwuNCw0LjIuNyw2LjMuNywxNS41LDAsMjguMS0xMi42LDI4LjEtMjguMXMtMTIuNi0yOC4xLTI4LjEtMjguMS0yOC4xLDEyLjYtMjguMSwyOC4xaDBaTTgyLjYsMTA4LjJjMC0yLjYsMi4xLTQuNyw0LjctNC43czQuNywyLjEsNC43LDQuNy0yLjEsNC43LTQuNyw0LjctNC43LTIuMS00LjctNC43WiIvPjwvc3ZnPg==);
}

/* Actually only webkit */
form input[type="date"],
#login-code {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	-webkit-appearance: none;
}
form input[type="date"] {
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2FsZW5kYXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ2LjdtbSIgaGVpZ2h0PSI5Ni4ybW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMi40IDI3Mi42Ij48cGF0aCBmaWxsPSIjYzBiYmJlIiBkPSJNNDMuNiw4MC4xYzEuNywwLDMuMSwxLjQsMy4xLDMuMXY5LjRoMzcuNXYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMXMzLjEsMS40LDMuMSwzLjF2OS40aDYuMmM2LjksMCwxMi41LDUuNiwxMi41LDEyLjV2NjIuNWMwLDYuOS01LjYsMTIuNS0xMi41LDEyLjVoLTYyLjVjLTYuOSwwLTEyLjUtNS42LTEyLjUtMTIuNXYtNjIuNWMwLTYuOSw1LjYtMTIuNSwxMi41LTEyLjVoNi4ydi05LjRjMC0xLjcsMS40LTMuMSwzLjEtMy4xWk05Ni43LDk4LjhoLTYyLjVjLTMuNSwwLTYuMiwyLjgtNi4yLDYuMnY2LjJoNzV2LTYuMmMwLTMuNS0yLjgtNi4yLTYuMi02LjJaTTEwMi45LDExNy42SDI3Ljl2NTBjMCwzLjUsMi44LDYuMiw2LjIsNi4yaDYyLjVjMy41LDAsNi4yLTIuOCw2LjItNi4ydi01MFoiLz48L3N2Zz4=);
}
form input[type="date"]:hover,
form input[type="date"]:focus {
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2FsZW5kYXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ2LjdtbSIgaGVpZ2h0PSI5Ni4ybW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMi40IDI3Mi42Ij48cGF0aCBmaWxsPSIjNzI3MjcyIiBkPSJNNDMuNiw4MC4xYzEuNywwLDMuMSwxLjQsMy4xLDMuMXY5LjRoMzcuNXYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMXMzLjEsMS40LDMuMSwzLjF2OS40aDYuMmM2LjksMCwxMi41LDUuNiwxMi41LDEyLjV2NjIuNWMwLDYuOS01LjYsMTIuNS0xMi41LDEyLjVoLTYyLjVjLTYuOSwwLTEyLjUtNS42LTEyLjUtMTIuNXYtNjIuNWMwLTYuOSw1LjYtMTIuNSwxMi41LTEyLjVoNi4ydi05LjRjMC0xLjcsMS40LTMuMSwzLjEtMy4xWk05Ni43LDk4LjhoLTYyLjVjLTMuNSwwLTYuMiwyLjgtNi4yLDYuMnY2LjJoNzV2LTYuMmMwLTMuNS0yLjgtNi4yLTYuMi02LjJaTTEwMi45LDExNy42SDI3Ljl2NTBjMCwzLjUsMi44LDYuMiw2LjIsNi4yaDYyLjVjMy41LDAsNi4yLTIuOCw2LjItNi4ydi01MFoiLz48L3N2Zz4=);
}

/* Firefox only */
@-moz-document url-prefix() {
	#login-code {
		background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ia2V5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ni43bW0iIGhlaWdodD0iOTYuMm1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMzIuNCAyNzIuNiI+PHBhdGggZmlsbD0iIzY0NjQ2NCIgZD0iTTExNS40LDExNC40YzAsMTktMTUuNCwzNC40LTM0LjQsMzQuNHMtMy43LS4yLTUuNC0uNGwtNS4zLDUuM2MtLjkuOS0yLjEsMS40LTMuMywxLjRoLTcuOHY3LjhjMCwyLjYtMi4xLDQuNy00LjcsNC43aC03Ljh2Ny44YzAsMi42LTIuMSw0LjctNC43LDQuN2gtMjEuOWMtMi42LDAtNC43LTIuMS00LjctNC43di0yMS45YzAtMS4yLjUtMi40LDEuNC0zLjNsMzAuMy0zMC4zYy0uMy0xLjgtLjQtMy42LS40LTUuNCwwLTE5LDE1LjQtMzQuNCwzNC40LTM0LjRzMzQuNCwxNS40LDM0LjQsMzQuNFpNNTYuOCwxMjAuM2MuNCwxLjYsMCwzLjMtMS4yLDQuNGwtMzAuNywzMC43djE1LjNoMTIuNXYtNy44YzAtMi42LDIuMS00LjcsNC43LTQuN2g3Ljh2LTcuOGMwLTIuNiwyLjEtNC43LDQuNy00LjdoMTAuNmw1LjctNS43YzEuMi0xLjIsMi44LTEuNiw0LjQtMS4yLDEuOS41LDMuOC43LDUuOS43LDEzLjgsMCwyNS0xMS4yLDI1LTI1cy0xMS4yLTI1LTI1LTI1LTI1LDExLjItMjUsMjUsLjMsNCwuNyw1LjlaTTgxLjEsMTA4LjJjMC0zLjUsMi44LTYuMiw2LjItNi4yczYuMiwyLjgsNi4yLDYuMi0yLjgsNi4yLTYuMiw2LjItNi4yLTIuOC02LjItNi4yWiIvPjwvc3ZnPg==);
	}
	form input[type="date"],
	form input[type="date"]:hover,
	form input[type="date"]:focus {
		background-image: none;
	}
}

/* More thingies
–––––––––––––––––––––––––––––––––––––––––––––––––– *//*
::-webkit-datetime-edit { padding: 4 em; }
::-webkit-datetime-edit-fields-wrapper { background:blue; }
::-webkit-datetime-edit-text { padding: 0 0.5em; }

::-webkit-datetime-edit-month-field { color: white; }
::-webkit-datetime-edit-day-field { color: red; }
::-webkit-datetime-edit-year-field { color: red; }
::-webkit-calendar-picker-indicator { background:gray; }
*/






/* Form paragraphs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
form > p {
	margin-bottom: 2rem;
	font-size: 2rem;
	font-weight: 375;
	position: relative;
}
p.button-holder,
form > p.button-holder {
	padding-top: 5rem;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--z-default-gap);
}
p.button-holder-center,
form > p.button-holder-center {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	justify-content: center;
}
label:not(:has(input)),
.label:not(:has(input)) {
	text-transform: uppercase;
	font-size: 65%;
	font-weight: 800;
	letter-spacing: 0.15rem;
	color: var(--z-label-main-color-default);
	padding-left: var(--z-default-gap);
}
label:not(:has(input)):has(~ progress),
.label:not(:has(input)):has(~ progress) {
	padding-left: 0;
	font-weight: 620;
}
p:has([for="login-showpw"]) {
	font-size: 90%;
	transform: translateY(-1rem);
	padding-left: var(--z-default-gap);
}

@media only screen and (max-width: 900px) {
	p.button-holder,
	form > p.button-holder {
		justify-content: center;
		flex-wrap: wrap;
	}
}



/* range input extra info */
p:has([type="range"]) {
	position: relative;
}
.bubble {
	background-color: var(--z-btn-bg);
	color: var(--z-btn-text);
	padding: 4px 12px;
	position: absolute;
	border-radius: 4px;
	bottom: 0rem;
	left: 50%;
	font-size: 1.5rem;
	font-weight: 650;
}
.bubble::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--z-btn-bg);
	top: -1px;
	left: 50%;
}
input[type="range"]:has( ~ .bubble) {
	margin-bottom: 2.5rem;
}
input[type="range"] ~ data {
	--z-color-bg-data: #fff;
	--z-color-border-data: #e6e6e6;
	--z-color-text-data: #757575;
	position: absolute;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 1.3rem;
	font-weight: 650;
	background: var(--z-color-bg-data);
	color: #757575;
	bottom: 3rem;
	border: 1px solid var(--z-color-border-data);
}
input[type="range"] ~ data.start::after,
input[type="range"] ~ data.end::after {
	content: "";
	position: absolute;
	width: 4px;
	height: 2px;
	background: var(--z-color-border-data);
	top: calc(50% - 2px);
}
input[type="range"] ~ data.start::after {
	right: -4px;
}
input[type="range"] ~ data.end::after {
	left: -4px;
}
input[type="range"] + datalist {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	writing-mode: vertical-lr;
	max-width: var(--z-width-inputs);
	width: 100%;
}
input[type="range"] + datalist option {
	padding: 0;
	font-size: 1.2rem;
	color: var(--z-body-text-40pct);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

  









/*
:read-only:not(
    label,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
    ) {
    cursor: default;
}
*/
  
:disabled {
    opacity: var(--z-opacity-input-disabled);
    cursor: not-allowed;
}


/* All elemeents regardless of types */
input,
select,
option,
textarea,
button,
.button,
datalist,
fieldset,
legend,
optgroup,
output,
input::file-selector-button {
	font: inherit;
	color: inherit;
	accent-color: var(--z-body-accent);
	transition: var(--z-transition-inputs);
	line-height: var(--z-leading-inputs);
}


/* All elements with types */
/* Radio & Checkbox */
/* Buttons */
/* Select, Buttons and text-fields */
select,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
button,
.button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
	border: var(--z-width-input-border) solid var(--z-textfld-border);
	padding: var(--z-padding-inputs);
	border-radius: var(--z-radius-inputs);
	background-color: var(--z-textfld-bg);
	min-height: var(--z-input-min-height);
}
select[multiple],
textarea {
	border-radius: var(--z-radius-inputs-alt);
}
button,
.button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
	padding: var(--z-padding-buttons);
	border-radius: var(--z-radius-buttons);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}
form button i,
form .button i,
form input[type="reset"] i,
form input[type="submit"] i,
form input[type="button"] i,
form input::file-selector-button i {
	font-size: 90%;
	opacity: 0.75;
}



select:focus,
textarea:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
button:focus,
.button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus {
	outline: 0;
}


/* All text-fields x select */
select,
textarea,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="range"] {
	width: 100%;
	max-width: var(--z-width-inputs);
}
select:hover:not([readonly], [disabled]),
select:active:not([readonly], [disabled]),
textarea:hover:not([readonly], [disabled]),
textarea:active:not([readonly], [disabled]),
input[type="date"]:hover:not([readonly], [disabled]),
input[type="date"]:active:not([readonly], [disabled]),
input[type="datetime-local"]:hover:not([readonly], [disabled]),
input[type="datetime-local"]:active:not([readonly], [disabled]),
input[type="email"]:hover:not([readonly], [disabled]),
input[type="email"]:active:not([readonly], [disabled]),
input[type="month"]:hover:not([readonly], [disabled]),
input[type="month"]:active:not([readonly], [disabled]),
input[type="number"]:hover:not([readonly], [disabled]),
input[type="number"]:active:not([readonly], [disabled]),
input[type="password"]:hover:not([readonly], [disabled]),
input[type="password"]:active:not([readonly], [disabled]),
input[type="search"]:hover:not([readonly], [disabled]),
input[type="search"]:active:not([readonly], [disabled]),
input[type="tel"]:hover:not([readonly], [disabled]),
input[type="tel"]:active:not([readonly], [disabled]),
input[type="text"]:hover:not([readonly], [disabled]),
input[type="text"]:active:not([readonly], [disabled]),
input[type="time"]:hover:not([readonly], [disabled]),
input[type="time"]:active:not([readonly], [disabled]),
input[type="url"]:hover:not([readonly], [disabled]),
input[type="url"]:active:not([readonly], [disabled]),
input[type="week"]:hover:not([readonly], [disabled]),
input[type="week"]:active:not([readonly], [disabled]) {
	border-color: var(--z-textfld-active-border);
}
select:focus:not([readonly], [disabled]),
textarea:focus:not([readonly], [disabled]),
input[type="date"]:focus:not([readonly], [disabled]),
input[type="datetime-local"]:focus:not([readonly], [disabled]),
input[type="email"]:focus:not([readonly], [disabled]),
input[type="month"]:focus:not([readonly], [disabled]),
input[type="number"]:focus:not([readonly], [disabled]),
input[type="password"]:focus:not([readonly], [disabled]),
input[type="search"]:focus:not([readonly], [disabled]),
input[type="tel"]:focus:not([readonly], [disabled]),
input[type="text"]:focus:not([readonly], [disabled]),
input[type="time"]:focus:not([readonly], [disabled]),
input[type="url"]:focus:not([readonly], [disabled]),
input[type="week"]:focus:not([readonly], [disabled]) {
	border-color: var(--z-textfld-focus-border);
	background-color: var( --z-textfld-active-bg);
}
select:required:valid:hover:not([readonly], [disabled]),
select:required:valid:active:not([readonly], [disabled]),
textarea:required:valid:hover:not([readonly], [disabled]),
textarea:required:valid:active:not([readonly], [disabled]),
input[type="date"]:required:valid:hover:not([readonly], [disabled]),
input[type="date"]:required:valid:active:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:hover:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:active:not([readonly], [disabled]),
input[type="email"]:required:valid:hover:not([readonly], [disabled]),
input[type="email"]:required:valid:active:not([readonly], [disabled]),
input[type="month"]:required:valid:hover:not([readonly], [disabled]),
input[type="month"]:required:valid:active:not([readonly], [disabled]),
input[type="number"]:required:valid:hover:not([readonly], [disabled]),
input[type="number"]:required:valid:active:not([readonly], [disabled]),
input[type="password"]:required:valid:hover:not([readonly], [disabled]),
input[type="password"]:required:valid:active:not([readonly], [disabled]),
input[type="search"]:required:valid:hover:not([readonly], [disabled]),
input[type="search"]:required:valid:active:not([readonly], [disabled]),
input[type="tel"]:required:valid:hover:not([readonly], [disabled]),
input[type="tel"]:required:valid:active:not([readonly], [disabled]),
input[type="text"]:required:valid:hover:not([readonly], [disabled]),
input[type="text"]:required:valid:active:not([readonly], [disabled]),
input[type="time"]:required:valid:hover:not([readonly], [disabled]),
input[type="time"]:required:valid:active:not([readonly], [disabled]),
input[type="url"]:required:valid:hover:not([readonly], [disabled]),
input[type="url"]:required:valid:active:not([readonly], [disabled]),
input[type="week"]:required:valid:hover:not([readonly], [disabled]),
input[type="week"]:required:valid:active:not([readonly], [disabled]) {
	border-color: var(--z-textfld-valid-active-border);
}
select:required:valid:focus:not([readonly], [disabled]),
textarea:required:valid:focus:not([readonly], [disabled]),
input[type="date"]:required:valid:focus:not([readonly], [disabled]),
input[type="datetime-local"]:required:valid:focus:not([readonly], [disabled]),
input[type="email"]:required:valid:focus:not([readonly], [disabled]),
input[type="month"]:required:valid:focus:not([readonly], [disabled]),
input[type="number"]:required:valid:focus:not([readonly], [disabled]),
input[type="password"]:required:valid:focus:not([readonly], [disabled]),
input[type="search"]:required:valid:focus:not([readonly], [disabled]),
input[type="tel"]:required:valid:focus:not([readonly], [disabled]),
input[type="text"]:required:valid:focus:not([readonly], [disabled]),
input[type="time"]:required:valid:focus:not([readonly], [disabled]),
input[type="url"]:required:valid:focus:not([readonly], [disabled]),
input[type="week"]:required:valid:focus:not([readonly], [disabled]) {
	border-color: var(--z-textfld-valid-focus-border);
}
select:required:invalid:hover, select:required:invalid:active,
textarea:required:invalid:hover,
textarea:required:invalid:active,
input[type="date"]:required:invalid:hover,
input[type="date"]:required:invalid:active,
input[type="datetime-local"]:required:invalid:hover,
input[type="datetime-local"]:required:invalid:active,
input[type="email"]:required:invalid:hover,
input[type="email"]:required:invalid:active,
input[type="month"]:required:invalid:hover,
input[type="month"]:required:invalid:active,
input[type="number"]:required:invalid:hover,
input[type="number"]:required:invalid:active,
input[type="password"]:required:invalid:hover,
input[type="password"]:required:invalid:active,
input[type="search"]:required:invalid:hover,
input[type="search"]:required:invalid:active,
input[type="tel"]:required:invalid:hover,
input[type="tel"]:required:invalid:active,
input[type="text"]:required:invalid:hover,
input[type="text"]:required:invalid:active,
input[type="time"]:required:invalid:hover,
input[type="time"]:required:invalid:active,
input[type="url"]:required:invalid:hover,
input[type="url"]:required:invalid:active,
input[type="week"]:required:invalid:hover,
input[type="week"]:required:invalid:active {
	border-color: var(--z-textfld-invalid-active-border);
}
select:required:invalid:focus,
textarea:required:invalid:focus,
input[type="date"]:required:invalid:focus,
input[type="datetime-local"]:required:invalid:focus,
input[type="email"]:required:invalid:focus,
input[type="month"]:required:invalid:focus,
input[type="number"]:required:invalid:focus,
input[type="password"]:required:invalid:focus,
input[type="search"]:required:invalid:focus,
input[type="tel"]:required:invalid:focus,
input[type="text"]:required:invalid:focus,
input[type="time"]:required:invalid:focus,
input[type="url"]:required:invalid:focus,
input[type="week"]:required:invalid:focus {
	border-color: var(--z-textfld-invalid-focus-border);
}
select::selection,
textarea::selection,
input[type="date"]::selection,
input[type="datetime-local"]::selection,
input[type="email"]::selection,
input[type="month"]::selection,
input[type="number"]::selection,
input[type="password"]::selection,
input[type="search"]::selection,
input[type="tel"]::selection,
input[type="text"]::selection,
input[type="time"]::selection,
input[type="url"]::selection,
input[type="week"]::selection {
	background-color: var(--z-body-accent);
	color: var(--z-body-accent-contrast);
}

select:not([disabled], [readonly]) option:focus,
select:not([disabled], [readonly]) option:active,
select:not([disabled], [readonly]) option:hover,
select:not([disabled], [readonly]) option:checked {
	background-color: var(--z-body-accent);
	color: var(--z-body-accent-contrast);
}

input[type="color"] {
	cursor: pointer;
	border-style: solid;
	border-radius: var(--z-radius-inputs);
	border-color: var(--z-textfld-border);
	background-color: var(--z-textfld-bg);
}
input[type="color"]:hover:not([disabled]),
input[type="color"]:active:not([disabled]) {
	border-color: var(--z-textfld-active-border);
}
input[type="color"]:focus {
	outline: 0;
}
input[type="color"]:focus:not([disabled]) {
	border-color: var(--z-textfld-focus-border);
}

button,
.button,
.button:visited,
input[type="reset"],
input[type="submit"],
input[type="button"],
input::file-selector-button {
	border-color: var(--z-btn-bg);
	background-color: var(--z-btn-bg);
	color: var(--z-btn-text);
	cursor: pointer;
	text-decoration: none;
}
button:hover,
button:active,
.button:hover,
.button:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input::file-selector-button:hover,
input::file-selector-button:active {
	background-color: var(--z-btn-active-bg);
	border-color: var(--z-btn-active-bg);
	text-decoration: none;
}
button:focus,
.button:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input::file-selector-button:focus {
	background-color: var(--z-btn-active-bg);
	text-decoration: none;
	outline: var(--z-btn-active-bg);
	outline-color: #007AFF;
	outline-offset: 0.3rem;
	outline-style: solid;
	outline-width: 0.2rem;
}


button.button-open,
.button.button-open,
.button.button-open:visited,
input[type="reset"].button-open,
input[type="submit"].button-open,
input[type="button"].button-open,
input.button-open::file-selector-button {
	background: transparent;
	color: var(--z-btn-bg);
}
button.button-open:hover,
button.button-open:active,
.button.button-open:hover,
.button.button-open:active,
input[type="reset"].button-open:hover,
input[type="reset"].button-open:active,
input[type="submit"].button-open:hover,
input[type="submit"].button-open:active,
input[type="button"].button-open:hover,
input[type="button"].button-open:active,
input.button-open::file-selector-button:hover,
input.button-open::file-selector-button:active {
	background-color: var(--z-btn-active-bg);
	border-color: var(--z-btn-active-bg);
	color: var(--z-btn-text);
	text-decoration: none;
}

form button i,
form .button i,
form input[type="reset"] i,
form input[type="submit"] i,
form input[type="button"] i {
	opacity: 0.5;
}


/* Labels */
label {
	cursor: pointer;
	display: block;
}
label + label,
.label + label,
label + input,
label + select,
label + button,
label + textarea {
	margin-top: var(--z-margin-label);
}

textarea {
	max-width: var(--z-width-textarea);
	width: 100%;
	height: var(--z-height-textarea);
}
textarea:read-only,
textarea:disabled {
	resize: none;
}

input::file-selector-button {
	margin-right: var(--z-margin-form-gap);
}

label:has(input:disabled) {
	opacity: var(--z-opacity-input-disabled);
	cursor: not-allowed;
}
label:has(input:disabled) :disabled {
	opacity: 1;
}
























/*
 * Pretty checkboxes and radios
 * ======================================================== */
 /* TODO ::focus styles ******************************************************/
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
	cursor: pointer;
	position: relative;
	display: flex;
	gap: 1rem;
}
label:has(input[type="checkbox"]) input,
label:has(input[type="radio"]) input {
	width: 1px;
	opacity: 0;
	/* visibility: hidden;   */
}
label:has(input[type="checkbox"]) span,
label:has(input[type="radio"]) span {
	padding-left: 2rem;
	font-weight: 500;
}
label:has(input[type="checkbox"])::before,
label:has(input[type="radio"])::before {
	content: "";
	display: inline-block;
	vertical-align: middle; 
	transform: translateY(0.4rem);
}

/* Not checked yet */
label:has(input[type="checkbox"])::before,
label:has(input[type="radio"])::before {
	width: 1.8rem;
	height: 1.8rem;
	aspect-ratio: 1 / 1;
	background-color: var(--z-textfld-bg);
	border: var(--z-width-input-border) solid var(--z-textfld-border);
	border-radius: 3px;
}
label:has(input[type="radio"])::before {
	border-radius: 50%;
}
label:has(input[type="checkbox"])::after {
	content: "";
	opacity: 0;
	position: absolute;
	width: 11px;
	height: 7px;
	background-color: transparent;
	top: 0.8rem;
	left: 0.4rem;
	border: 3px solid var(--z-color-bg-checbox-checked);
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}
label:has(input[type="radio"])::after {
	content: "";
	opacity: 0;
	position: absolute;
	width: 1rem;
	height: 1rem;
	background-color: var(--z-color-bg-checbox-checked);
	top: 0.8rem;
	left: 0.4rem;
	border-radius: 50%;
}

/* With Focus */
label:has(input[type="checkbox"]:focus)::before,
label:has(input[type="radio"]:focus)::before {
	/* box-shadow: 0 0 1rem var(--z-body-accent); */
	border: 2px solid var(--z-checkradiofld-focus-border);
}






/* Checked */
label:has(input[type="checkbox"]:checked)::before,
label:has(input[type="radio"]:checked)::before {
	border-color: var(--z-checkradiofld-checked-border);
	background: var(--z-checkradiofld-checked-bg);
	transform-origin: center center;
	transform: scale(1.3) translateY(18%);
}
label:has(input[type="checkbox"]:checked)::after,
label:has(input[type="radio"]:checked)::after {
	opacity: 1;
	transform-origin: center center;
	transform: rotate(-45deg) scale(1.25);
}
/* And maybe some hover/focus states */





progress {
	--progress-color: var(--z-body-accent-alt); /* the progress color */
	--progress-background: var(--z-body-text-10pct); /* the background color */
	--progress-border-radius: 1rem; 

	width: 100%;
	height: 0.8rem;
	margin: 1rem 0 5rem 0;
	border-radius: var(--progress-border-radius);	
	background: var(--progress-background);
}
progress[value] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	width: 100%;
	background: var(--progress-background);
}
progress[value]::-webkit-progress-bar {
	border-radius: var(--progress-border-radius);
	background: var(--progress-background);
}
progress[value]::-webkit-progress-value {
	border-radius: var(--progress-border-radius);
	background: var(--progress-color);
}
progress[value]::-moz-progress-bar {
	border-radius: var(--progress-border-radius);
	background: var(--progress-color);
}
































 /*
.button-load-more .text {
	display: inline;
}
.button-load-more .loading {
	display: none;
}
.button-load-more.loading .text {
	display: none;
}
.button-load-more.loading .loading {
	display: inline;
}
*/







/*
 * Fluent Forms
 * ======================================================== *//*

body .fluentform .ff_upload_btn.ff-btn {
	background: var(--secondary-button-bg-color);
	color: var(--secondary-button-text-color);
	border-radius: 30px;
	font-size: 15px;
}
body .fluentform .ff_upload_btn.ff-btn:hover {
	background: var(--secondary-button-bg-color-hover);
	color: var(--secondary-button-text-color-hover);
}
body .fluentform .ff-el-input--label {
	margin-bottom: 10px;
	margin-top: 5px;
}
body .ff-message-success {
	border: 1px solid var(--z-color-tab24-green);
	background: var(--z-color-tab24-green);
	color: #fff;
	padding-left: 50px;
	margin-bottom: 50px;
}
body .ff-message-success::before {
	position: absolute;
	left: 20px;
	font-family: var(--z-font-icon);
	content: "\f058";
}
body .ff-message-success p:last-child{
	margin-bottom: 0;
}





.ff-el-input--content {
	position: relative;
}
.ff-el-input--content i.after-select {
	position: absolute;
	right: -14px;
	top: 10px;
	pointer-events: none;
}
.ff-custom_html.inter h2 {
	margin-bottom: 0;
	margin-top: 21px;
}
.signup-options {
	margin-top: 21px;	
}

*/