html,
body{
    margin:0;
    min-height:100%;
}

body.ssk-clean-body{
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    background:#faf5ef;
    color:#251a14;
}

body.ssk-clean-body > *:not(#ssk-clean-shell):not(script):not(style):not(link){
    display:none !important;
}

#ssk-clean-shell,
#ssk-clean-shell *{
    box-sizing:border-box;
}


/* =============================
   HEADER
============================= */

.ssk-clean-header{
    width:100%;
    min-height:108px;

    padding:14px 3%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    color:#fff;

    background:
        linear-gradient(
            105deg,
            #61290c,
            #823a12 52%,
            #ac561c
        );

    border-bottom:2px solid #d8a560;
}

.ssk-clean-brand{
    display:flex;
    align-items:center;
    gap:16px;

    min-width:0;
}

.ssk-clean-logo-link{
    display:flex;
    flex:0 0 auto;
}

.ssk-clean-logo{
    width:74px;
    height:74px;

    padding:5px;

    object-fit:contain;

    border-radius:50%;

    background:#fff;
}

.ssk-clean-title{
    min-width:0;
}

.ssk-clean-title h1{
    margin:0 0 4px;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:29px;
    line-height:1.05;

    font-weight:400;

    white-space:nowrap;
}

.ssk-clean-title p{
    margin:0 0 4px;

    font-size:13px;

    color:#fff5e9;
}

.ssk-clean-title span{
    font-size:11px;

    font-weight:600;

    color:#f3d3a1;
}

.ssk-clean-location{
    padding-left:22px;

    border-left:
        1px solid rgba(255,255,255,.32);

    color:#fff0d9;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:15px;

    white-space:nowrap;
}


/* =============================
   FULL WIDTH MESSAGE BAR
============================= */

.ssk-clean-newsbar{
    width:100%;
    height:40px;

    padding:0 3%;

    display:grid;

    grid-template-columns:
        max-content
        1px
        minmax(0,1fr);

    align-items:center;

    gap:15px;

    overflow:hidden;

    background:#fff9f2;

    border-bottom:
        1px solid #e6d3bf;
}


/* WhatsApp */

.ssk-clean-whatsapp{
    display:flex;
    align-items:center;

    gap:8px;

    white-space:nowrap;
}

.ssk-clean-green{
    color:#13a14c;

    font-size:10px;
}

.ssk-clean-whatsapp strong{
    color:#211a16;

    font-size:11.5px;
}

.ssk-clean-whatsapp a{
    height:27px;

    padding:0 13px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:5px;

    background:
        linear-gradient(
            #a65a26,
            #7c370e
        );

    color:#fff;

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}

.ssk-clean-divider{
    width:1px;
    height:18px;

    background:#d5bda7;
}


/* =============================
   REAL MARQUEE
============================= */

.ssk-clean-marquee{
    position:relative;

    width:100%;
    height:40px;

    overflow:hidden;

    white-space:nowrap;
}

.ssk-clean-marquee-track{
    position:absolute;

    top:0;
    left:0;

    display:flex;
    align-items:center;

    gap:28px;

    width:max-content;
    height:40px;

    padding-left:100%;

    animation:
        sskCleanTicker
        32s
        linear
        infinite;

    will-change:transform;
}

.ssk-clean-marquee-track span{
    display:inline-block;

    color:#643016;

    font-size:12px;

    line-height:40px;

    white-space:nowrap;
}

.ssk-clean-marquee-track .important{
    color:#c22418;

    font-weight:800;
}

.ssk-clean-marquee-track i{
    color:#ad5d25;

    font-size:8px;

    font-style:normal;
}

.ssk-clean-marquee:hover
.ssk-clean-marquee-track{
    animation-play-state:paused;
}

@keyframes sskCleanTicker{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }

}


/* =============================
   LOGIN BACKGROUND
============================= */

.ssk-clean-main{
    min-height:
        calc(100vh - 108px - 40px - 48px);

    padding:22px 15px;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    background:
        linear-gradient(
            rgba(255,250,245,.76),
            rgba(255,250,245,.76)
        ),
        url('/assets/images/campus-3.jpeg')
        center center / cover no-repeat;
}


/* =============================
   LOGIN CARD
============================= */

.ssk-clean-card{
    width:min(420px,100%);

    margin-top:0;

    padding:22px 30px 18px;

    border:
        1px solid rgba(105,49,15,.13);

    border-radius:14px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 18px 48px rgba(70,32,12,.14);

    backdrop-filter:blur(5px);
}

.ssk-clean-ornament{
    text-align:center;

    color:#b6967b;

    font-size:13px;
}

.ssk-clean-card h2{
    margin:5px 0 4px;

    text-align:center;

    color:#4c230d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:29px;

    font-weight:400;
}

.ssk-clean-subtitle{
    margin:0 0 14px;

    text-align:center;

    font-size:11.5px;

    color:#544940;
}


/* tabs */

.ssk-clean-tabs{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:8px;

    margin-bottom:14px;
}

.ssk-clean-tab{
    height:39px;

    border:
        1px solid #ddccbc;

    border-radius:6px;

    background:#fffdfa;

    color:#74350f;

    font-size:12px;

    font-weight:600;

    cursor:pointer;
}

.ssk-clean-tab.active{
    border-color:#703008;

    background:
        linear-gradient(
            #934817,
            #6d2f08
        );

    color:#fff;

    box-shadow:
        0 6px 13px rgba(98,43,10,.16);
}


/* existing real form */

#ssk-clean-form form{
    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
}

#ssk-clean-form label{
    display:block;

    margin:0 0 5px;

    color:#43342a;

    font-size:11px;

    font-weight:650;
}

#ssk-clean-form input[type="email"],
#ssk-clean-form input[type="text"],
#ssk-clean-form input[type="password"]{
    width:100% !important;

    height:42px !important;

    margin:0 0 11px !important;

    padding:0 12px !important;

    border:
        1px solid #d8c6b7 !important;

    border-radius:6px !important;

    background:#fff !important;

    font-size:12px !important;

    outline:none !important;
}

#ssk-clean-form input:focus{
    border-color:#9a5425 !important;

    box-shadow:
        0 0 0 3px rgba(154,84,37,.08) !important;
}

#ssk-clean-form button[type="submit"],
#ssk-clean-form input[type="submit"]{
    width:100% !important;

    height:43px !important;

    margin-top:3px !important;

    border:0 !important;

    border-radius:6px !important;

    background:
        linear-gradient(
            #a65924,
            #7b360d
        ) !important;

    color:#fff !important;

    font-size:13px !important;

    font-weight:700 !important;

    cursor:pointer !important;
}


/* forgot */

.ssk-clean-forgot{
    margin-top:9px;

    text-align:right;
}

.ssk-clean-forgot a{
    color:#833d16;

    font-size:10.5px;

    text-decoration:none;
}


/* security */

.ssk-clean-security{
    margin-top:12px;

    padding-top:10px;

    border-top:
        1px solid #eaded3;

    text-align:center;
}

.ssk-clean-security strong{
    display:block;

    color:#613316;

    font-size:10px;
}

.ssk-clean-security span{
    display:block;

    margin-top:2px;

    color:#74655a;

    font-size:8.5px;
}


/* =============================
   FOOTER
============================= */

.ssk-clean-footer{
    min-height:48px;

    padding:8px 3%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    background:
        linear-gradient(
            #60280a,
            #542207
        );

    color:
        rgba(255,255,255,.78);

    font-size:9.5px;
}

.ssk-clean-footer a{
    color:#f1c078;

    font-weight:700;

    text-decoration:none;
}


/* =============================
   MOBILE
============================= */

@media(max-width:800px){

    .ssk-clean-location{
        display:none;
    }

    .ssk-clean-title h1{
        font-size:21px;

        white-space:normal;
    }

}

@media(max-width:600px){

    .ssk-clean-header{
        min-height:78px;

        padding:10px 12px;
    }

    .ssk-clean-logo{
        width:55px;
        height:55px;
    }

    .ssk-clean-title h1{
        font-size:17px;
    }

    .ssk-clean-title p{
        font-size:9px;
    }

    .ssk-clean-title span{
        font-size:8px;
    }

    .ssk-clean-newsbar{
        height:37px;

        padding:0 8px;

        grid-template-columns:
            auto
            minmax(0,1fr);

        gap:8px;
    }

    .ssk-clean-divider{
        display:none;
    }

    .ssk-clean-whatsapp strong{
        display:none;
    }

    .ssk-clean-whatsapp a{
        height:25px;

        padding:0 8px;

        font-size:9px;
    }

    .ssk-clean-marquee,
    .ssk-clean-marquee-track{
        height:37px;
    }

    .ssk-clean-marquee-track span{
        font-size:10px;

        line-height:37px;
    }

    .ssk-clean-main{
        min-height:
            calc(100vh - 78px - 37px - 60px);

        padding:15px 10px;
    }

    .ssk-clean-card{
        padding:20px 16px 17px;
    }

    .ssk-clean-footer{
        flex-direction:column;

        text-align:center;

        padding:11px;
    }

}