:root {
    --bg-cont: #fff;
}

body {
    margin: 0;
    background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,231,231,1) 100%);
}

a {
    text-decoration: none !important;
}

li {
    list-style: none;
}

.contenedor {
    width: 100%;
    height:100vh;
    overflow-y:hidden;
    box-sizing: border-box;
}
.caja{
    position:relative;
    max-width:60rem;
    height:38rem;
    margin:auto;
    margin-top: 18vh !important;
    display:flex;
    flex-direction:row;
    align-items:center;
}
.caja-mf{
    position:absolute;
    z-index: 999;
    width:48%;
}
.caja-td{
    display:flex;
    align-items:center;
    border-radius:5px;
    margin-left: 45%;
    width:55%;
    height:100%;
    width:55%;
    background: rgb(218,33,40);
    background: radial-gradient(circle, rgba(218,33,40,1) 0%, rgba(172,28,34,1) 100%);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.wrapper{
    border-radius:5px;
    width:100%;
    height: 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.wrapper-td{
    display:flex;
    flex-direction:column;
}
.caja-titulo{
    color:#fff;
    padding-bottom: 20px;
}
.titulo{
    font-size: 2.2rem;
    font-weight:800;
}
.subtitulo{
    color:#E6E6E6;
    font-weight:600;
    font-size:1rem;
}
.caja-detalle{
    color:#E6E6E6;
    text-align:center;
    margin: auto;
    width:80%;
    padding: 20px;
    font-size:0.9rem;
}
.caja-formulario{
    width:100%;
    display: flex;
    justify-content: center;
    flex-direction:column;
}
.caja-formulario h3{
    font-weight:800;
    margin-bottom: 20px;
    font-size: 1.4rem;
}
.formulario{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 70%;
    margin:auto;
    margin-top: 10px;
}
.form-control{
    outline: none !important;
}
.form-control:focus{
    border:1px solid #aeaeae !important;
    box-shadow: none !important;
}
.form-control::placeholder{
    color: #BDBDBD !important;

}
.btn{
    border: 1px solid #da2128 !important;
    width:80%;
    height:40px;
    margin: auto;
    margin-top: 10px;
    background-color:#fff !important;
    color:#da2128 !important;
    font-size:1rem !important;
    font-weight: 700 !important;
    transition:0.5s !important;

}
.btn:hover{
    transform:scale(1.1);
}

.caja-mensaje{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.msg{
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #6E6E6E;
    font-weight:700;
}
.credenciales{
    padding:5px;
    font-size:1.1rem;
    color: #6E6E6E;
    word-wrap:break-word ;
}
.credenciales.uno::before{
    content: "Username: ";
    color: #6E6E6E;
    font-weight: 700;
    font-size:1.1rem;
}
.credenciales.dos::before{
    content: "Password: ";
    color: #6E6E6E;
    font-size:1.1rem;
    font-weight: 700;
}

.documentacion{
    margin-top:20px;
}
.documentacion i{
    margin-right: 8px;
}
.documentacion a{
    background:#da2128;
}
.postman{
    margin-top:20px;
}
.postman i{
    margin-right: 8px;
}
.postman a{
    background:#e8612f;

}
a{
    transition:0.5s !important;
    border: 1px solid #E6E6E6 !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    display: flex;
    justify-content: center;
    align-items: center;
    width:220px;
    height:40px;
    font-size:1rem;
    font-weight: 700;
    color: #fff !important;
    margin: auto;
    border-radius: 5px;
}
a:hover{
    transform:scale(1.1);
    color:#E6E6E6 !important;
}


@media (max-width:768px) {

    .contenedor{
        overflow-y:scroll;
    }
    .caja{
        margin-top: 5vh !important;
        width:95% !important;
        height: 50rem;
        flex-direction:column;
    }
    .caja-mf{
        top:24rem;
        width:80%;
    }
    .caja-td{
        height: 50%;
        width:90%;
        margin-left: 0;
    }
    .wrapper{
        height: 25rem;
    }
    .formulario{
        width: 80%;
    }
    .btn{
        width:100%;
    }
    .credenciales{
        width:70%;
        box-sizing: border-box;
        word-wrap: break-word;
        margin: auto;
        font-size: 0.9rem;
    }

}