.mx-client-login-body{
    min-height:100vh!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    padding:32px 20px!important;
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(226,13,29,.065),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(15,23,42,.05),
            transparent 28%
        ),
        #f7f8fb!important;
    font-family:Inter,Arial,sans-serif!important;
    color:#111827!important;
}

.mx-login-box{
    position:relative!important;
    width:min(100%,450px)!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:30px 34px 25px!important;
    border:1px solid #e2e8f0!important;
    border-top:3px solid #df0d1d!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 22px 55px rgba(15,23,42,.10)!important;
    text-align:left!important;
}

.mx-login-box::before{
    content:"MATRIX HOSTING";
    display:block;
    margin:0 0 5px;
    color:#df0d1d;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.13em;
    text-align:center;
}

.mx-login-logo{
    display:block!important;
    width:135px!important;
    height:46px!important;
    margin:0 auto 16px!important;
    background:
        url('/assets/matrix-logo.svg')
        center/contain
        no-repeat!important;
    text-decoration:none!important;
}

.mx-login-box h1{
    margin:0 0 7px!important;
    color:#111827!important;
    font-size:27px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.035em!important;
    text-align:center!important;
}

.mx-login-box>p{
    max-width:350px!important;
    margin:0 auto 23px!important;
    color:#64748b!important;
    font-size:12.5px!important;
    line-height:1.55!important;
    text-align:center!important;
}

.mx-login-form label{
    display:block!important;
    margin:0 0 5px!important;
    color:#334155!important;
    font-size:11.5px!important;
    font-weight:850!important;
}

.mx-login-form input{
    width:100%!important;
    min-height:42px!important;
    box-sizing:border-box!important;
    margin:0 0 13px!important;
    padding:9px 11px!important;
    border:1px solid #cbd5e1!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#111827!important;
    outline:none!important;
    font-size:13px!important;
}

.mx-login-form input:focus{
    border-color:#df0d1d!important;
    box-shadow:
        0 0 0 3px
        rgba(223,13,29,.08)!important;
}

.mx-login-btn{
    width:100%!important;
    min-height:42px!important;
    margin:2px 0 0!important;
    padding:9px 14px!important;
    border:0!important;
    border-radius:8px!important;
    background:
        linear-gradient(
            135deg,
            #ef1728,
            #c90b19
        )!important;
    color:#fff!important;
    cursor:pointer!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:
        0 8px 18px
        rgba(217,13,30,.16)!important;
}

.mx-login-links{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:7px 15px!important;
    margin:17px 0 0!important;
    padding-top:14px!important;
    border-top:1px solid #eef2f7!important;
    text-align:center!important;
}

.mx-login-links a{
    color:#475569!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:800!important;
}

.mx-login-links a:hover{
    color:#df0d1d!important;
}

.mx-login-alert{
    margin:0 0 14px!important;
    padding:10px 11px!important;
    border-radius:7px!important;
    font-size:11.5px!important;
    line-height:1.45!important;
}

.mx-login-box::after{
    content:"Secure client access";
    display:block;
    margin:17px 0 0;
    color:#94a3b8;
    font-size:9.5px;
    font-weight:750;
    letter-spacing:.03em;
    text-align:center;
}

@media(max-width:520px){

    .mx-client-login-body{
        padding:18px 12px!important;
    }

    .mx-login-box{
        padding:25px 20px 21px!important;
        border-radius:11px!important;
    }

    .mx-login-box h1{
        font-size:24px!important;
    }
}