@charset "utf-8";

#sumate{
	display: none;
	flex-direction: column;
	background: white;
	border-radius: 5px;
	max-width: 500px;
}
#sumate #dialog_exit_holder{
	top: -1rem;
	left: calc(100% - 1.5rem);
}
#sumate__grid {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 0;
	border-radius: 5px;
	box-shadow: 0px 10px 50px 25px rgba(0, 0, 0, 0.15);
}
.sumate__headerGrid {
	width: -webkit-fill-available;
	display: flex;
	justify-content: space-between;
	padding: 2rem 0 1.5rem;
}
.sumate__title {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 2rem 0 1rem;
	color: var(--brand-blue);
}

#sumate__content{
	padding: 0 2.5rem;
}
.sumate__title::after {
	content: 'Únete a ConTodo';
}
.sumate__text {
	text-align: justify;
	margin-bottom: 1rem;
}
.sumate__text::after {
	content: 'Déjanos tus datos para mantenerte informado de las actividades y conocer a los y las candidatas de ConTodo en tu distrito.';
}
.sumate__unit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 0;
	width: 100%;
}
.sumate__unit > label {
	color: var(--brand-marine);
	font-weight: bold;
	font-size: .75rem;
	letter-spacing: 0;
	min-width: 4rem;
}
.sumate__unit > input {
	border: none;
	border-bottom: 1px solid rgba(56, 74, 203, .5);
	padding: .5rem 0;
	width: -webkit-fill-available;
	font-size: .9rem;
}
.sumate__checkboxHolder {
	padding-top: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
}
#sumate__checkbox {
	margin: 1rem;
	padding: .5rem;
	text-align: end;
}

#sumate__submit {
	width: -webkit-fill-available;
	background: var(--brand-blue);
	border: none;
	padding: 1rem;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}


.sumate__finePrint {
	font-size: .75rem;
}

.sumate__checkbox {
	display: block;
	position: relative;
	padding-left: 2rem;
	max-width: 67%;
	margin: auto;
	margin-top: 1rem;
	margin-bottom: 2rem;

	display: flex;
	justify-content: center;
	align-items: center;

	cursor: pointer;
	font-size: .8rem;
	font-weight: 500;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.sumate__checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
}

.sumate__checkbox:hover input ~ .checkmark {
	background-color: #ccc;
}

.sumate__checkbox input:checked ~ .checkmark {
	background-color: var(--brand-blue);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.sumate__checkbox input:checked ~ .checkmark:after {
	display: block;
}

.sumate__checkbox .checkmark:after {
	left: 7px;
	top: 1px;
	width: 4px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media only screen and (max-width: 900px) {
	#sumate__form {
		height: 100vh;
		width: 100vw;
	}
	#sumate__wrapper {
		justify-content: space-between;
		padding: 0 1.5rem;
		height: -webkit-fill-available;
		width: -webkit-fill-available;
		border-radius: 0;
		max-width: 100%;
	}

	.sumate__unit {
		flex-direction: column;
		align-items: flex-start;
	}
	.sumate__checkbox {
		margin: auto;
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
		max-width: 100%;
	}
	#sumate__submit {
		border-radius: 0;
	}
	#sumate #dialog_exit_holder{
		top: .5rem;
		left: calc(100% - 3.5rem);
	}
}