.form {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;

	.form-field {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 5px;
		min-width: 150px;

		&.type-textarea{
			flex-grow: 1;
			flex-basis: 400px;
		}

		.field-label {
			font-size: 0.8rem;
		}

		.field-input-container {

			input {
				&[type="text"], &[type="password"] {
					padding: 5px 10px;
					width: 100%;
					width: 100%;
					padding: 12px 12px;
					border: 1px solid #e0e0e0;
					border-radius: 4px;
					font-size: 0.9rem;
					outline: none;
					transition: border-color 0.2s ease;

					&:focus { border-color: rgb(0, 123, 255); }

					&::placeholder {
						color: #999;
					}
				}
				&[disabled] {
					background-color: #f0f0f0;
					cursor: not-allowed;
				}
			}

			.multi-checkbox-input {
				display: flex;
				flex-direction: column;
				border: 1px #aaa solid;

				.multi-checkbox-row {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: solid #aaa 1px;
					padding: 10px;

					&:last-child {
						border-bottom: none;
					}
				}
			}

			textarea {
				width: 100%;
				padding: 5px 10px;

				&:focus { border-color: rgb(0, 123, 255);}
			}
		}

		.field-validation-container {
			display: flex;
			flex-direction: column;
			gap: 5px;

			.validation-item {
				background-color: #dc3545;
				color: white;
				font-size: 0.7rem;
				padding: 5px;
				border-radius: 2px;
			}
		}
	}
}