* {
    padding: 0;
    margin: 0;
}

.link_login {
    text-decoration: none;
    margin-bottom: 6px;
    color: #8b267f;
    cursor: pointer;

}

.link_login:hover {
    text-decoration: underline;

}


.login_page {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background: #15438b; */
    background: #fff;
}

.cnt_form {
    height: 100%;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center;


}


.form_authentication {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* border: #333 1px solid; */

}


.form_login {
    /* padding:0.5rem 0; */
    border: 1px #333 solid;
    box-shadow: 5px 20px 50px rgba(0, 0, 0, .15);
    z-index: 3000;
}

.form_login .form-label {
    color: #8b267f;
    margin-left: 5px;
    margin-bottom: 3px;
}



.cont_logo_login {
    padding: 0.625em;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    background: #8b267f;
}

.btn_create_account {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}

.btn.create_new {
    background: #8b267f;
    border: #8b267f solid 1px;
    color: #fff;
}

.btn.create_new:hover {
    color: #fff;
    background: #8b267f;
    transition: .5s;
}

/* decoración  */
.ctn_deco_presentation {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #15438B;
    color: #fff;
}

.btn-login {
    background: #8b267f;
    bottom: -60px;
}

.btn-login:hover {
    color: #8b267f;
    border: 1px solid #8b267f;

}



/* aquí la animación */
.ctn_box_animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
}



/* aqui finaliza */

.cont_logo_login {
    padding: 0.625em;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    background: #8b267f;
}

.logotipo {
    max-width: 100%;
    height: 2.125rem;
    font-weight: bold;
}


.swal2-container {
    z-index: 4000 !important;
}

.box_square {
    position: absolute;
    pointer-events: none;
    background: #fff;
    animation: animate_box 8s linear infinite;
    border-radius: 50%;
}

/*  */
.title_login {
    font-size: 1.8rem;
    line-height: 1.4;
}

.text_purple {
    color: #8b267f;
}

.hr_border_color {
    border-top: 2px solid #ccc;
}



@keyframes animate_box {
    0% {
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: scale(1.3) translateY(-500%) rotate(360deg);
        opacity: 0;
    }
}




@media screen and (min-width: 768px) {

    .ctn_deco_presentation {
        border-top-right-radius: 0.375rem;
        ;
        border-bottom-right-radius: 0.375rem;
        ;
    }
}

@media screen and (max-width: 768px) {
    .login_page {
        justify-content: start;
    }

    .ctn_deco_presentation {
        display: block;
    }

    .form_login .row {
        height: 90vh;

    }

    .ctn_deco_presentation {
        padding: 30px 0;
    }
}