/* - INI:FORMULARIOS - */
.se_form {
	--color-input-border-n: #CCC;
	--color-input-bkg-n: #FFF;
	--color-input-txt-n: #000;

	--color-input-border-req-valid: #CCC;
	--color-input-bkg-req-valid: #FFF;
	--color-input-bkg-req-not-valid: #FFDFDE;

	--color-radio-label-hover: #EEE;

	display: flex;
	flex-direction: column;
	gap: 1em;

	@media (prefers-color-scheme: dark) {
		--color-input-border-n: #666;
		--color-input-bkg-n: #333;
		--color-input-txt-n: #FFF;

		--color-input-border-req-valid: #666;
		--color-input-bkg-req-valid: #333;
		--color-input-bkg-req-not-valid: #996565;

		--color-radio-label-hover: #444;
	}

	& .title {
		display: block;
		font-weight: bold;
		margin-bottom: 5px;
	}

	& .desc {
		display: block;
		color: #666;
		margin-bottom: 5px;
		font-size: 0.9em;
	}

	& .desc:empty {
		display: none;
	}

	& [data-required="1"] .title:after {
		content: "*";
		color: #F00;
		margin: 0 0 0 5px;
	}

	&.double .cont {
		width: 30%;
		float: left;
		margin-right: 10px;
	}

	& .separator, & fieldset {
		display: block;
	}

	& .separator_simple {
		margin-bottom: 10px;
	}

	& label, & .header {
		display: block;
		text-align: left;
	}

	& label.checkbox {
		overflow: auto;
		cursor: pointer;
		padding: 3px;
		border-radius: 3px;
	}

	& .radioList label, & label.radio {
		display: block;
		overflow: auto;
		padding: 5px;
		border-radius: 3px;
		cursor: pointer;
		margin-bottom: 0;
	}

	& .radioList label:hover, & label.radio:hover, & label.checkbox:hover {
		background-color: var(--color-radio-label-hover);
	}

	& .radioList label input, & label.radio input, & label.checkbox input {
		float: left;
		margin-right: 10px;
	}

	& .radioList label .cont, & label.radio .cont, & label.checkbox .cont {
		display: block;
		overflow: auto;
	}

	& .radioList.hidden label {
		padding: 0;
	}

	& .radioList.hidden input {
		display: none;
	}

	& .radioList.hidden label .content {
		padding: 10px 20px;
	}

	& .radioList.hidden input:checked + .content {
		background-color: #DDD;
	}

	& .radioList.short {
		display: flex;
		justify-content: space-between;
	}

	& input, & textarea, & select {
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		border-radius: 3px;
		padding: 5px;
		border: 1px solid var(--color-input-border-n);
		background-color: var(--color-input-bkg-n);
		color: var(--color-input-txt-n);
	}

	& input:hover, & textarea:hover, & select:hover {
		background: var(--color-input-bkg-n);
	}

	& button {
		border-radius: 3px;
		padding: 5px;
	}

	& input:required:valid, & textarea:required:valid {
		background-color: var(--color-input-bkg-req-valid);
	}

	& input:required:not(:empty):invalid, & textarea:required:not(:empty):invalid {
		background-color: var(--color-input-bkg-req-not-valid);
		box-shadow: none;
	}

	& input:invalid:focus, & textarea:invalid:focus, & input:valid:focus, & textarea:valid:focus {
		background: var(--color-input-bkg-n);
	}

	& input[type="color"] {
		width: 22px;
		height: 22px;
		padding: 0;
		margin: 0;
		border: 0;
	}

	& input[type="range"] {
		margin: 0;
		border: 0;
	}

	& [type="submit"], & [type="button"] {
		cursor: pointer;
		padding: 8px 14px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		background-color: #0066cc;
		color: #FFF;
		font-weight: bold;
	}

	& [type="submit"]:not([disabled]):hover, & [type="button"]:not([disabled]):hover {
		background-color: #007AE8;
	}

	& [type="submit"]:not([disabled]):active, & [type="button"]:not([disabled]):active {
		background-color: #0053A5;
		border-top: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	}

	& [type="submit"]:disabled {
		color: #CCC;
		background-color: #284E9C !important;
		cursor: not-allowed;
	}

	& [type="submit"] {
	}

	& [type="submit"] .pulsate {
		animation: pulsate 1s ease-out 0s normal none infinite running;
	}

	& .multiOps {
		display: block;
		overflow: auto;
	}

	& .multiOps input[type="checkbox"], & .multiOps input[type="radio"] {
		clear: left;
		float: left;
		margin: 0 5px 0 0;
	}

	& .multiOps label {
		float: left;
		font-weight: normal;
	}

	& .multiText {
		display: block;
		overflow: auto;
	}

	& .multiText label {
		display: inline-block;
		clear: left;
		float: left;
		font-weight: normal;
		width: 130px;
		height: 35px;
		margin: 0 5px 0 0;
	}

	& .multiText input, & .multiText select {
		float: left;
		margin: 0 5px 0 0;
		width: 200px;
	}

	& input[type="checkbox"], & input[type="radio"], & input[type="button"], & input[type="submit"] {
		width: auto;
	}

	& .status {
		display: block;
		padding: 5px 10px;
		margin: 5px 0 0 0;
		color: #000;
	}

	& input:valid + .status {
		background: #EEFFEE;
	}

	& input:invalid + .status {
		background: #FFEEEE;
	}

	& output:empty {
		display: none;
	}

	& .status:empty {
		display: none;
	}

	& input[type="submit"]:disabled, & input[type="button"]:disabled, & input[type="submit"]:disabled:hover, & input[type="button"]:disabled:hover {
		cursor: default;
		background: #CCC;
		color: #EEE;
	}
}


/* Multiple components in single row as in input */
.modInput {
	display: flex;
	border-radius: 3px;
	border: 1px solid #CCC;

	& > *:not(input) {
		padding: 5px;
		background-color: #EEE;
		color: #000;
	}

	& > *:first-child {
		border: 0;
		border-right: 1px solid #CCC;
		border-bottom-left-radius: 3px;
		border-top-left-radius: 3px;
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}

	& > *:last-child {
		border: 0;
		border-left: 1px solid #CCC;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}

	& > input {
		flex: 1;
		border: 0 !important;
		padding: 3px;
	}

	& > button {
		background-color: #E5E5E5;
		color: #333;
		margin: 0 !important;
	}

	& > button.dyn {
		color: #FFF;
	}

	& > button.dyn > i {
		margin-right: 10px;
	}

	& > button.dyn.success {
		background-color: #00DB31
	}

	& > button.dyn.fail {
		background-color: #BE0000
	}

	& > button.dyn.warning {
		background-color: #F9F100;
		color: #555;
	}

	& > button.dyn.notif {
		background-color: #2937B5;
	}
}

/* tableLessForm */
.tabLessForm {
	& input, & textarea, & select, &.inputgroup {
		box-sizing: border-box;
		width: 100%;
		padding: 6px;
		border: 1px solid #999;
		border-radius: 2px;
	}

	& input[type="checkbox"], & input[type="radio"], & input[type="button"], & input[type="submit"] {
		width: auto;
	}

	&.elem {
		display: block;
		margin-bottom: 10px;
	}

	&.elem.radio label {
		display: inline-block;
		padding: 5px;
		border-radius: 3px;
		cursor: pointer;
	}

	&.elem.radio label:hover {
		background-color: #EEE;
	}

	& table.grid td {
		padding: 3px;
	}

	& input[type="button"], &[type="submit"] {
		padding: 5px;
		background: #eee;
		border: 1px solid #666;
		border-radius: 3px;
		color: #000;
		cursor: pointer;
	}

	& input[type="button"]:hover, &[type="submit"]:hover {
		background: #ddd;
	}

	&.inputgroup {
		display: flex;
		align-items: center;
	}

	&.inputgroup .first {
		display: table-cell;
		height: 100%;
		vertical-align: middle;
		text-align: center;
	}

	&.inputgroup .last {
		float: right;
	}

	&.inputgroup input {
		flex: 1;
		padding: 0 6px;
		width: auto;
		display: block;
		border: 0;
	}

	/* - END:FORMULARIOS - */

}