:root{
	--form-input-height: 38px;
	--form-field-margin-bottom: 8px;
	--form-border-radius: var(--ui-border-radius-size);
	--form-button-icon-size: 16px;
	}
.form{}
.form .field{ margin-bottom: var(--form-field-margin-bottom); }
.form .field > label{ display: block; font-family: var(--font-default); font-size: var(--font-ui-size-default); font-weight: bold; padding: 0px 0px 5px 0px; }
.form .field input:not([type='color']),
.form .field textarea,
.form .field select{ font-size: var(--font-ui-size-default); font-family: var(--font-ui); padding: var(--ui-padding-default); border: none; border-radius: var(--form-border-radius); outline: var(--ui-border-thin); width: 100%; height: var(--form-input-height); background-color: rgba(255, 255, 255, 0.6); }
.form .field input:focus{ outline: solid 2px var(--color-primary-dark); }
.form .field .error{ border: solid 1px #EE0000; background-color: rgba(255, 0, 0, 0.05); }
.form .field input:disabled,
.form .field select:disabled{ border: solid 1px rgba(0, 0, 0, 0.08); background-color: rgba(0,0,0,0.02); }
.btn{ font-family: var(--font-ui); font-size: var(--font-ui-size-default); height: var(--form-input-height); padding: 0px 15px; position: relative; border-radius: var(--form-border-radius); display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; }
.btn:hover{ filter: brightness(85%) contrast(120%); }
.btn > svg,
.btn > img{ width: var(--form-button-icon-size); height: var(--form-button-icon-size); }
.form .errorMsg{
	font-family: var(--font-ui);
	font-size: var(--font-ui-size-default);
	background-color: var(--color-alert);
	padding: 16px;
	color: #FFF;
	border-radius: 8px;
	}

/* cores */
.btn.gray{ background-color: var(--color-gray-light); color: var(--color-gray-dark); }
.btn.alert{ background-color: var(--color-alert); }
.btn.ok{ background-color: var(--color-accept); color: #FFFFFF; }
.btn.primary{ background-color: var(--color-primary); color: #FFF; }
.btn.secondary{ background-color: var(--color-secondary); color: #FFF; }
.btn.ok > img,
.btn.primary > img,
.btn.secondary > img,
.btn.alert > img{ filter: invert(); }
.btn.icon{ display: flex; align-content: center; justify-content: center; align-items: center; min-width: var(--form-input-height); }
.btn-group{ display: flex; justify-content: flex-start; }
.btn-group > *{ width: auto; flex-grow: 0; }
.btn + .btn{
	margin-left: 3px;
	}

.form .buttons{
	display: flex;
	gap: 5px;
	margin-top: 15px;
	border-top: var(--ui-border-thin);
	padding-top: 15px;
	}
.form .buttons.left{
	justify-content: flex-start;
	}
.form .buttons.right{
	justify-content: flex-end;
	}
.form .buttons.center{
	justify-content: center;
	}
.form .buttons.fluid > *{
	flex-grow: 1;
	}

.form .inputButton{
	display: flex;
	}
.form .inputButton > input:not([type='color']){
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	}
.form .inputButton > .btn{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	outline: var(--ui-border-thin);
	}

.form .inputIcon{
	position: relative;
	}
.form .inputIcon > img{
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(calc(var(--form-button-icon-size) / 2 * -1)) translateX(calc(var(--form-button-icon-size) / 2 * -1));
	width: var(--form-button-icon-size); height: var(--form-button-icon-size);
	}

@media (max-width: 1600px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}
@media (max-width: 840px) {}
@media (max-width: 720px) {
	.form .field > input{
		font-size: 1rem;
		padding: 8px;
		}
	.btn{
		padding: 8px;
		}
	.btn.icon{
		padding-right: 28px;
		}
	.btn > svg{
		width: 24px;
		height: 24px;
		}
}
@media (max-width: 600px) {

}
@media (max-width: 480px) {
	.btn{
		font-size: 0.85rem;
		padding: 7px;
		}
	.btn > svg{
		width: 21px;
		height: 21px;
		}
	.btn.icon{
		padding-right: 26px;
		}
}
@media (max-width: 320px) {

}