@charset "UTF-8";

form {
    width: 98%;
    margin: auto;
}

/*labels*/

	fieldset {
		border: none;
		padding: 0;
		display: block;
	}

	fieldset ul {
		list-style-type: none;
	}

	.form-control {
		display: flex;
		grid-template-columns: 1em auto;
		gap: 0.7em;
		vertical-align:text-top;
		padding-top:10px;
	}

	legend {
		font-size: 1.5em;
		font-weight: 500;
		color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
	}

	label {
		margin-right:.5em;
		font-weight: 500;
	}

/*regular*/

	input[type=color] {
		-webkit-appearance: none;
		border: 1px solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-radius: 0.15em;
		height: 2.5rem;
		padding: none;
	}

	textarea {
		width: 90%;
		height: 7em;
		background: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-10) );
		color: light-dark( var(--wa-color-gray-05), var(--wa-color-gray-95) );
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-radius: 0.1875em;
		font-size: 100%;
		font-family: 'Roboto', sans-serif;
		padding: 0.625em;
	}

	select {
		appearance: none;
		min-width: 40%;
		padding: 0.625em;
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-radius: 0.1875em;
		background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-10) );
		font-size: 100%;
		font-family: 'Roboto', sans-serif;
		margin: 0.625em 0;
		display: inline-grid;
		color: light-dark( var(--wa-color-gray-05), var(--wa-color-gray-90) );
		background-image: url("../files/icons/caret-down.png");
		background-size: 1em;
		background-repeat: no-repeat;
		background-position: right 1.25em center;
	}

	select[multiple] {
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-radius: 0.1875em;
		padding: 0.625em;
		color: light-dark( var(--wa-color-gray-05), var(--wa-color-gray-95) );
		background-image: url();
		vertical-align:sub;
	}

	select[multiple] option {
		color: light-dark( var(--wa-color-gray-05), var(--wa-color-gray-95) );
	}

	.operator {
		min-width: 10%;
	}

	input[type=text], input[type=number], input[type=tel], input[type=email], input[type=url], input[type=zip], input[type=search], input[type=date], input[type=datetime], input[type=time], input[type=password], input[type=datetime-local], input[type=month], input[type=week], input[type=date] {
		background: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		font-size: 100%;
		font-family: 'Roboto', sans-serif;
		padding: 0.625em;
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-radius: 0.1875em;
		color: light-dark( var(--wa-color-gray-05), var(--wa-color-gray-95) );
		-webkit-appearance: none;
	}

	input[type=text], input[type=tel], input[type=email], input[type=url], input[type=password] {
		width: 85%;
	}

	input[type=search] {
		background-image:url("https://fontawesome.com/icons/magnifying-glass?f=sharp&s=regular");
		background-size: 1em;
		background-position: 0.75em; 
		background-repeat: no-repeat;	
		padding-left: 2em;
		width: 80%;
	}

	input[type="file"] {
		border-color: transparent;
	}

	input[type="file"]::file-selector-button {
		font-size: 1.5em;
		font-weight: bold;    
		color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-50) );  
		background-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-50) );
		padding: 0.625em;    
		border: thin solid;  
		border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-purple-60) );   
		border-radius: 0.1875em;
		cursor: pointer;
	}

/*focus*/

	input:focus, textarea:focus, input[type=range]:focus {
		background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-20) );
		border-color: light-dark( var(--wa-color-gray-20), var(--wa-color-gray-30) );
		outline: none;
	}

	select:focus {
		outline: none;
		border-color: light-dark( var(--wa-color-gray-20), var(--wa-color-gray-30) );

	}

	select[mutliple]:focus {
		outline: none;
	}

/*hover*/

	input[type="file"]:hover {
		background-color: transparent;
	}

	input[type=checkbox]:hover, input[type=radio]:hover {
		background-color: light-dark( var(--wa-color-gray-90), var(--wa-color-gray-10) );
	}

	select:hover, input:hover, textarea:hover {
		background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-20) );
		border-color: light-dark( var(--wa-color-gray-30), var(--wa-color-gray-80) );
	}

	input[type="file"]::file-selector-button:hover {
		color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
		background-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-50) );
		cursor: pointer;
	}

/*disabled*/

	input[type=checkbox]:disabled, input[type=radio]:disabled {
		background-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-color: light-dark( var(--wa-color-gray-30), var(--wa-color-gray-30) );
		cursor: not-allowed;
	}

	input:disabled, textarea:disabled, select:disabled {
		background-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-20) );
		border-color: light-dark( var(--wa-color-gray-30), var(--wa-color-gray-30) );
		cursor: not-allowed;
	}

/*checkbox*/

	input[type=checkbox], input[type=radio] {
		-webkit-appearance: none;
		appearance: none;
		background-color: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		margin: 0px;
		font: inherit;
		color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-30) );
		width: 1.3em;
		height: 1.3em;
		border: 1px solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-gray-30) );
		border-radius: 0.15em;
		transform: translateY(-0.075em);
		display: grid;
		place-content: center;
	}

	input[type=radio], input[type=radio]::before {
		border-radius: 50%;
		display: block;
	}

	input[type=checkbox]::before, input[type=radio]::before {
		content: "";
		width: 0.85em;
		height: 0.85em;
		transform: scale(0);
		transition: 120ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--wa-color-indigo-50);
	}

	input[type=radio]::before {
		margin: 3px;
	}
	
	@media(prefers-color-scheme:dark) {
		input[type=checkbox]::before, input[type=radio]::before {
			box-shadow: inset 1em 1em var(--wa-color-purple-70);
		}
	}

	input[type=checkbox]:checked::before, input[type=radio]:checked::before {
		transform: scale(1);
	}

/*slider*/

	input[type=range]:focus::-webkit-slider-runnable-track {
		background: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		border: thin 1px;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-purple-60) );
	}

	input[type=range]:focus::-moz-range-track {
		background: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-purple-60) );
	}

	input[type=range]::-moz-range-thumb {
		border-radius: 50%;
		border: solid 1px;
		border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-purple-95) );
		background-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-60) );
		height: 1.25rem;
		width: 1.25rem;
		margin-top:-0.4rem;
	}

	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-purple-95) );
		border: solid 1px;
		background-color: light-dark( var(--wa-color-indigo-50), var(--wa-color-purple-60) );
		height: 1.25rem;
		width: 1.25rem;
		border-radius: 50%;
		margin-top:-0.4rem;
	}	

	input[type=range] {
	-webkit-appearance: none;
		appearance: none;
		background: transparent;
		cursor: pointer;
		width: 40%;
	}

	input[type=range]::-webkit-slider-runnable-track {
		background: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-purple-60) );
		border-radius: 0.5rem;
		height: 0.5rem;  
	}

	input[type=range]::-moz-range-track {
		background: light-dark( var(--wa-color-gray-60), var(--wa-color-gray-10) );
		border: thin solid;
		border-color: light-dark( var(--wa-color-gray-40), var(--wa-color-purple-60) );
		border-radius: 0.5rem;
		height: 0.5rem;
	}

/*button*/

	input[type=submit], input[type=button], input[type=reset], button[type=button].submit {
		display: inline-block;
		background-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
    	color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-05) );
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 0.5em 0.85em;
		margin: 0.5em;
		font-size: 1em;
		cursor: pointer;
		-webkit-appearance: none;
		text-decoration: none;
		border: solid 1px;
		border-color: light-dark( var(--wa-color-blue-50), var(--wa-color-tan-50) );
		border-radius: 0.1875em;
		text-overflow: ellipsis;
	}

	input[type=submit]:hover, input[type=button]:hover, button[type=button].submit:hover {
		background-color: light-dark( var(--wa-color-gray-20), var(--wa-color-tan-40) );
    color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-95) );
	}

	input[type=reset]:hover {
		background-color: light-dark( var(--wa-color-gray-50), var(--wa-color-gray-50) );
		color: light-dark( var(--wa-color-cyan-50), var(--wa-color-cyan-50) );
	}