:root {
    --info: rgba(64, 145, 215, 1);
    --info-light: rgba(64, 145, 215, 0.5);
    --success: rgba(45, 136, 77, 1);
    --success-light: rgba(45, 136, 77, 0.5);
    --notice: rgba(153, 233, 235, 1);
    --notice-light: rgba(153, 233, 235, 0.5);
    --warning: rgba(254, 207, 109, 1);
    --warning-light: rgba(254, 207, 109, 0.5);
    --error: rgba(179, 64, 69, 1);
    --error-light: rgba(179, 64, 69, 0.5);
}

.alert {
    position: absolute;
    top: 2rem;
    left: calc(50% - 6.5rem);
    width: 12rem;
    height: auto;
    padding: 0.5rem;
    line-height: 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
    animation: entrada 1s ease 0s 1 normal forwards;
}

@keyframes entrada {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(-250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 0.90;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(-65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}

.alertCheckbox {
    display: none;
}

:checked + .alert {
    display: none;
}

.alertText {
    display: table;
    padding: 0.5rem;
    top: 0.5rem;
    text-align: center;
    font-size: 1.1rem;
    margin: auto;
}

.alertClose {
    position: absolute;
    top: 0.1rem;
    right: 0.25rem;
    font-size: 1rem;
}

.clear {
    clear: both;
}

.info {
    background-color: var(--info-light);
    color: var(--info);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.success {
    background-color: var(--success-light);
    color: var(--success);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.notice {
    background-color: var(--notice-light);
    color: var(--notice);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.warning {
    background-color: var(--warning-light);
    color: var(--warning);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.error {
    background-color: var(--error-light);
    color: var(--error);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}