body{
    background:#f4f6fb;
    font-family:Arial,Helvetica,sans-serif;
}

.cla-login-wrapper{

    width:420px;

    margin:80px auto;

    background:#fff;

    padding:40px;

    border-radius:18px;

    box-shadow:0 15px 45px rgba(0,0,0,.12);

}

.cla-logo{

    text-align:center;

    margin-bottom:25px;

}

.cla-logo img{

    width:180px;

}

.cla-title{

    text-align:center;

    font-size:30px;

    font-weight:bold;

    color:#582984;

    margin-bottom:10px;

}

.cla-sub{

    text-align:center;

    color:#888;

    margin-bottom:30px;

}

.cla-login-wrapper label{

    font-weight:bold;

    display:block;

    margin-bottom:8px;

}

.cla-login-wrapper input{

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid #ddd;

    margin-bottom:20px;

    font-size:15px;

    box-sizing:border-box;

}

.cla-login-wrapper input:focus{

    outline:none;

    border-color:#582984;

}

.cla-btn{

    width:100%;

    background:#582984;

    color:#fff;

    padding:15px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

}

.cla-btn:hover{

    background:#47216d;

}
.cla-topbar{

display:flex;

justify-content:space-between;

align-items:center;

background:#582984;

padding:15px 25px;

border-radius:12px;

margin-bottom:30px;

color:#fff;

}

.cla-topbar strong{

color:#fff;

}

.cla-logout{

background:#fff;

padding:10px 20px;

border-radius:8px;

text-decoration:none;

color:#582984;

font-weight:bold;

}

.cla-logout:hover{

background:#f5f5f5;

}