body,html{width:100%;height:100%;margin:0;transition:background-color .3s ease-in}

.ds-login-flex{width:100%;height:100%;flex-wrap:wrap;display:flex;justify-content:center;background-color:var(--ds-dark)}
.ds-container-login{width: 100%;height:100%;position:relative;z-index:1;overflow-y:auto}
.ds-inner-login{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem}
.ds-container-login::after,.ds-container-login::before{content:'';width:100%;height:100%;position:absolute;inset:0;margin:auto;z-index:-1}
.ds-container-login::before{background-color:rgba(var(--ds-black-rgb),.875)}
.ds-container-login::after{background-image:url('../IMAGENES/reunion_cervezas.jpg');background-size:cover;background-position:center;z-index:-2}

.ds-frame-login{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}
.ds-frame-login .ds-corner{width:14px;height:14px;position:absolute;opacity:.725}
.ds-frame-login .ds-corner:nth-child(1){top:21px;left:21px;border-top:1px rgba(var(--ds-white-rgb),.875) solid;border-left:1px rgba(var(--ds-white-rgb),.875) solid}
.ds-frame-login .ds-corner:nth-child(2){top:21px;right:21px;border-top:1px rgba(var(--ds-white-rgb),.875) solid;border-right:1px rgba(var(--ds-white-rgb),.875) solid;opacity:0}
.ds-frame-login .ds-corner:nth-child(3){bottom:21px;left:21px;border-bottom:1px rgba(var(--ds-white-rgb),.875) solid;border-left:1px rgba(var(--ds-white-rgb),.875) solid;opacity:0}
.ds-frame-login .ds-corner:nth-child(4){bottom:21px;right:21px;border-bottom:1px rgba(var(--ds-white-rgb),.875) solid;border-right:1px rgba(var(--ds-white-rgb),.875) solid}
.ds-description-app{font-family:var(--ds-font);color:var(--ds-white);font-weight:700;font-size:.825rem;width:240px;text-align:center}

.ds-form{width:300px}
.ds-box-password{flex-direction:row;align-items:center;gap:9px;justify-content:flex-end}
.ds-loading-login:not(.d-none)~*{display:none}
.ds-button-loading:not(.d-none) ~ * { display: none!important }

.ds-loading-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.ds-loading-box:not(.d-none) ~ * {
    display: none!important;
}

@media (min-width: 1200px){ .ds-form{width:320px} }