:root {
	/* --form-background: url('https://fronterasistemas.com/colonosa/public/media/bg-form-kike.png'); */
	--form-background: #fff;
	--color-light: #ddd;
	--input-submit-background: #af4bbd;  
	--input-disabled-background: #a4a8a642;
	
	--input-info-background: #3e77f3;
	--input-warning-background: #ee4238;
}

main {
	background-color: #222;
}

.form__content-wrapper {
	height: auto;
	padding: 50px 0 100px 0;
}

.component__form {
	width: clamp(336px,78%, 671px) !important;
	/* background-image: var(--form-background); */
	background: var(--form-background);
	background-size: cover;

	height: 70%;
	display: flex;
	padding: 25px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.img-text__content, .img-div__content {
	height: 92% !important;
}

.form__wrapper {
	width: 100% !important;
	height: 100%;
}

.img-text__content, .img-div__content {
  margin: 30px 0 30px 0 !important;
}

form, .form {
	height: 100%;
}

.form--btn {
	padding: 0 !important;
	margin: 0;

	input {
		font-size: .9rem !important;
    font-weight: 400 !important;
    padding: 5px !important;
	}
}

form div,
.form div {
	gap: 10px;
}

.form__group,
.form__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 0;
}

.form__group h1 {
	font-size: 2.3rem;
	font-weight: 500;
	text-align: center;
}

.form__group h3 {
	font-size: 1.7rem;
	font-weight: 600;
}

.form__group h4 {

}

.form__input-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: space-between;
}

.group__input,
.group__input--file {
	display: flex;
	align-items: start;
	flex-direction: row;
	gap: 10px;
	align-items: stretch;
}

input[type="checkbox"] {
	width: 2.5rem !important;
	height: 1.5rem !important;
}

.checkbox__container
{
	display: flex;
	justify-content: center;
	gap: 5px;
	align-items: center;
	color: var(--color-light);
	font-weight: bold;
	padding: 5px;
	background-color: var(--input-warning-background);

	accent-color: var(--input-warning-background);

	input[type=checkbox] {
		padding: 0px !important;
		width: 2rem !important;
	}

	img {
		width: 20px;
	}
}

input,
.input,
select {
	width: 100%;
}

input[disabled] {
	background-color: var(--input-disabled-background);
}

input[type=submit],
.input--action {
	background-color: var(--input-submit-background);
	color: var(--color-light);
	border: 1px solid var(--input-submit-background);
	transition: 300ms;
	flex: 1;
	text-align: center;
	padding: 10px;
	font-size: 1.1rem;
	font-weight: 500;
}

.input--action:hover {
	color: #333 !important;
}

.input--action.info {
	background-color: var(--input-info-background);
	border: 1px solid var(--input-info-background);
}

.input--action.info:hover {
	background-color: transparent;
}

.input--action.warning {
	background-color: var(--input-warning-background);
	border: 1px solid var(--input-warning-background);
}


input[type=submit]:hover {
	color: var(--input-submit-background);
	background-color: var(--color-light);
}


.group__input--file {
	input[type=submit] {
		flex: 1;
		align-self: center;
	}

	.input-file {
		flex: 2;
	}
}

.input-file {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--input-backgroud);

	input {
		background-color: transparent;
		padding: 10px;
	}

	label {
		span {
			font-weight: 600;
		}

		padding: 10px;
		font-size: .8rem;
		color: #333;
		background-color: transparent;
	}
}

#docsList {
	span {
		margin: 10px;
		padding: 5px;
		background-color: var(--input-disabled-background);
	}
}

#wallet_container {
	width: 100%;
	max-width: 100%;
}