:root {
    --primary-color: #000000;
    --success-color: #858484;
}

body {
    margin: 0;
}

.custompage .limiter {
    width: 100%;
	display: flex;
	
}
.custompage .container-login {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: flex-end; /* Alineación a la derecha */
    padding: 15px;
	margin-top: -20px;
	margin-right: -20px;
    background-image: url('https://escueladebajoflamenco.com/juanito2.jpg');
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el elemento */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.custompage .wrap-login {
    background: #fff;
    padding: 30px 45px;
    width: calc(100% - 30px); /* Para que ocupe todo el ancho menos el padding de la izquierda */
    max-width: 690px; /* Para limitar el ancho máximo */
	height: 100%; /* Establecer la altura del 100% del viewport */
}

.custompage .width-login {
    width: 390px;
}
.custompage .width-register {
    width: 690px;
}
.custompage h3.title, legend {
    font-weight: 900;
    font-size: 20px;
	text-align: center;
    color: #ff0137;
    padding: 1rem 0;
}
.custompage label {
    color: #ff0137;
    font-weight: 400;
}
.custompage .form-control,
.custompage .bootstrap-select .dropdown-toggle.btn-default {
    border: 2px solid #6F6F6F;
}
.custompage .last-password {
    padding: 2.5rem 0;
    text-align: center;
}
.btn-primary {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
    text-transform: uppercase;
    font-weight: bold;
}

/* Cambio de color al pasar el ratón por encima */
.btn-primary:hover {
    background-color: #ff0137; /* Cambiar el color de fondo al pasar el ratón por encima */
}
.btn-success {
    color: #fff;
    background-color: #858484;
    border-color: var(--success-color);
    text-transform: uppercase;
    font-weight: bold;
}
.btn-success:hover {
    background-color: #ff0137; /* Cambiar el color de fondo al pasar el ratón por encima */
}
.custompage .software-name {
    text-align: center;
    padding: 2rem 0;
    margin-top: auto;
    display: inline-block;
    width: 100%;
    font-size: 12px;
}

.custompage .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custompage .bajoflamenco {
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (min-width: 768px) {
    .custompage .wrap-login {
        max-width: 690px; /* Aumentar el ancho máximo en dispositivos más grandes */	
		margin: 0;		
    }
}

.input-group .checkbox input[type="checkbox"] + label {
        font-size: 10px; /* Tamaño del texto de la etiqueta */
        margin-bottom: 15px; /* Espaciado debajo de la etiqueta */
        display: block; /* Hace que la etiqueta ocupe su propia línea */
        cursor: pointer; /* Indica que es clickeable */
    }
.form-group label[for="registration_official_code"], /* Selector para el label */
#registration_official_code { /* Selector para el campo de entrada */
    display: none;
}