/* =========================================================
   SIMRS PATRIA LESTARI
   LOGIN PAGE
   CSS NAMESPACE : simrsLogin
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

.simrsLogin,
.simrsLogin *,
.simrsLogin *::before,
.simrsLogin *::after {
    box-sizing: border-box;
}


/* =========================================================
   ROOT
   ========================================================= */

.simrsLogin {
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    font-family:
        "Segoe UI",
        Inter,
        Roboto,
        Arial,
        sans-serif;

    color: #173f60;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5fafb 55%,
            #eaf6f8 100%
        );

    overflow: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   PAGE
   ========================================================= */

.simrsLogin__page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;
}


/* =========================================================
   RIGHT AREA
   ========================================================= */

.simrsLogin__right {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    padding:
        30px 5% 30px 42%;

    background:

        radial-gradient(
            circle at 80% 15%,
            rgba(24, 186, 194, .08),
            transparent 26%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(24, 186, 194, .05),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6fbfc 55%,
            #eaf6f8 100%
        );
}


/* =========================================================
   DECORATION
   ========================================================= */

.simrsLogin__decor {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    border-radius: 50%;
}


/* Top decoration */

.simrsLogin__decor--one {
    width: 240px;
    height: 240px;

    top: -125px;
    right: 2%;

    background:
        radial-gradient(
            circle,
            rgba(15, 177, 186, .07),
            transparent 70%
        );
}


/* Bottom decoration */

.simrsLogin__decor--two {
    width: 220px;
    height: 220px;

    right: 12%;
    bottom: -120px;

    background:
        radial-gradient(
            circle,
            rgba(15, 177, 186, .055),
            transparent 70%
        );
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

.simrsLogin__left {
    position: absolute;

    z-index: 10;

    top: 0;
    left: 0;

    width: 51%;
    height: 100vh;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #02284b 0%,
            #033e60 43%,
            #005f78 74%,
            #008b97 100%
        );
}


/* =========================================================
   LEFT PATTERN
   ========================================================= */

.simrsLogin__leftBackground {
    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: .14;

    background-image:
        radial-gradient(
            rgba(255,255,255,.24) 1px,
            transparent 1px
        );

    background-size:
        18px 18px;

    pointer-events: none;
}


/* =========================================================
   ORGANIC CURVE
   ========================================================= */

/*
    IMPORTANT

    Curve desktop dibuat menggunakan beberapa layer.
    Tidak menggunakan clip-path ellipse pada panel utama,
    sehingga tidak menghasilkan efek cincin seperti screenshot
    sebelumnya.
*/


/* ---------------------------------------------------------
   TURQUOISE OUTER CURVE
   --------------------------------------------------------- */

.simrsLogin__left::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: -18%;

    right: -30%;

    width: 43%;

    height: 136%;

    border-radius: 50%;

    background:
        #1bc9c5;

    pointer-events: none;
}


/* ---------------------------------------------------------
   WHITE CURVE
   --------------------------------------------------------- */

.simrsLogin__left::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: -18%;

    right: -27%;

    width: 39%;

    height: 136%;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f9fcfd 0%,
            #eef8fa 100%
        );

    pointer-events: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.simrsLogin__brand {
    position: absolute;

    z-index: 20;

    top: 18%;

    left: 9%;

    width: 520px;

    max-width: 76%;
}


/* =========================================================
   BRAND TITLE
   ========================================================= */

.simrsLogin__brandTitle {
    display: flex;

    align-items: baseline;

    gap: 5px;

    margin: 0;

    font-size:
        clamp(
            29px,
            3vw,
            42px
        );

    line-height: 1;

    letter-spacing:
        -1.6px;

    white-space:
        nowrap;
}


/* SIMRS */

.simrsLogin__brandMain {
    color: #ffffff;

    font-weight: 800;
}


/* Patria Lestari */

.simrsLogin__brandAccent {
    color: #20d0c8;

    font-weight: 700;
}


/* =========================================================
   BRAND LINE
   ========================================================= */

.simrsLogin__brandLine {
    width: 40px;
    height: 3px;

    margin-top: 16px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #20d1ca,
            #55e2dc
        );

    box-shadow:
        0 0 8px
        rgba(32,209,202,.25);
}


/* =========================================================
   BRAND HEADING
   ========================================================= */

.simrsLogin__brand h2 {
    margin:
        16px 0 0;

    color:
        #ffffff;

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        700;
}


/* =========================================================
   BRAND DESCRIPTION
   ========================================================= */

.simrsLogin__brand p {
    margin:
        9px 0 0;

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

    font-size:
        9px;

    line-height:
        1.6;

    font-weight:
        400;
}


/* =========================================================
   HOSPITAL
   ========================================================= */

.simrsLogin__hospital {
    position: absolute;

    z-index: 18;

    left: 1.5%;

    bottom: 1%;

    width: 51%;

    height: 49%;

    pointer-events: none;
}


/* =========================================================
   HOSPITAL GLOW
   ========================================================= */

.simrsLogin__hospitalGlow {
    position: absolute;

    left: 4%;

    bottom: 4%;

    width: 91%;

    height: 30%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(39,222,212,.34),
            transparent 70%
        );

    filter:
        blur(25px);
}


/* =========================================================
   HOSPITAL IMAGE
   ========================================================= */

.simrsLogin__hospital img {
    position: absolute;

    z-index: 3;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    object-fit:
        contain;

    object-position:
        bottom left;

    filter:
        drop-shadow(
            0 20px 26px
            rgba(0,0,0,.20)
        );
}


/* =========================================================
   MEDICAL DECORATION
   ========================================================= */

/*
    Jika HTML mempunyai elemen decoration tambahan,
    elemen tersebut tetap berada di belakang konten.
*/

.simrsLogin__medical {
    position: absolute;

    z-index: 8;

    pointer-events: none;

    color:
        rgba(255,255,255,.08);
}


/* =========================================================
   BOTTOM CURVES
   ========================================================= */

/*
    Curve bagian bawah.
*/

.simrsLogin__curve {
    position: absolute;

    z-index: 25;

    pointer-events: none;

    border-radius: 50%;

    transform:
        rotate(-17deg);
}


/* ---------------------------------------------------------
   OUTER
   --------------------------------------------------------- */

.simrsLogin__curve--outer {
    right: -390px;

    bottom: -125px;

    width: 760px;

    height: 165px;

    background:
        #d5f8f5;
}


/* ---------------------------------------------------------
   MIDDLE
   --------------------------------------------------------- */

.simrsLogin__curve--middle {
    right: -370px;

    bottom: -105px;

    width: 760px;

    height: 140px;

    background:
        #2ad2cb;
}


/* ---------------------------------------------------------
   INNER
   --------------------------------------------------------- */

.simrsLogin__curve--inner {
    right: -350px;

    bottom: -86px;

    width: 760px;

    height: 115px;

    background:
        #078397;
}


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

.simrsLogin__card {
    position: relative;

    z-index: 50;

    width: 390px;

    min-height: 345px;

    padding:
        27px 28px 23px;

    border:
        1px solid
        rgba(255,255,255,.90);

    border-radius:
        17px;

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

    box-shadow:

        0 22px 50px
        rgba(24,75,91,.13),

        0 5px 18px
        rgba(24,75,91,.05);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    animation:
        simrsLoginCardIn
        .45s
        ease
        both;
}


/* =========================================================
   CARD ANIMATION
   ========================================================= */

@keyframes simrsLoginCardIn {

    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   AVATAR
   ========================================================= */

.simrsLogin__avatar {
    width: 43px;
    height: 43px;

    margin:
        0 auto 13px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        #d6edef;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #f9fcfd,
            #e9f8f8
        );

    box-shadow:
        0 5px 15px
        rgba(9,171,180,.07);
}


.simrsLogin__avatar svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke:
        #08aab3;

    stroke-width:
        1.5;
}


/* =========================================================
   TITLE
   ========================================================= */

.simrsLogin__title {
    margin:
        0 0 22px;

    color:
        #173f63;

    font-size:
        15px;

    line-height:
        1.4;

    font-weight:
        700;

    text-align:
        center;
}


/* =========================================================
   FORM
   ========================================================= */

.simrsLogin__form {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   FIELD
   ========================================================= */

.simrsLogin__field {
    position: relative;

    width: 100%;

    margin:
        0 0 15px;
}


/* =========================================================
   INPUT
   ========================================================= */

.simrsLogin__field input {
    display: block;

    width: 100%;

    height: 50px;

    padding:
        18px 42px 4px 40px;

    border:
        1px solid
        #d5e3e8;

    border-radius:
        7px;

    outline: none;

    background:
        #ffffff;

    color:
        #29465c;

    font-family:
        inherit;

    font-size:
        11px;

    line-height:
        1.2;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


/* Input hover */

.simrsLogin__field input:hover {
    border-color:
        #bfd3da;
}


/* Input focus */

.simrsLogin__field input:focus {
    border-color:
        #08adb6;

    box-shadow:
        0 0 0 2px
        rgba(8,173,182,.08);
}


/* =========================================================
   FLOATING LABEL
   ========================================================= */

.simrsLogin__field label {
    position: absolute;

    z-index: 6;

    left: 40px;

    top: 17px;

    padding:
        0 3px;

    margin: 0;

    color:
        #899ba4;

    background:
        transparent;

    font-size:
        9px;

    font-weight:
        400;

    line-height:
        1;

    pointer-events:
        none;

    transition:
        top .20s ease,
        left .20s ease,
        color .20s ease,
        font-size .20s ease,
        background .20s ease;
}


/* Floating state */

.simrsLogin__field input:focus + label,

.simrsLogin__field input:not(:placeholder-shown) + label {
    top:
        -5px;

    left:
        12px;

    color:
        #08aab3;

    background:
        #ffffff;

    font-size:
        7px;

    font-weight:
        700;
}


/* =========================================================
   FIELD ICON
   ========================================================= */

.simrsLogin__fieldIcon {
    position: absolute;

    z-index: 7;

    left: 14px;

    top: 50%;

    width: 16px;
    height: 16px;

    transform:
        translateY(-50%);

    fill: none;

    stroke:
        #91a3ac;

    stroke-width:
        1.5;

    pointer-events:
        none;

    transition:
        stroke .2s ease;
}


/* Focus icon */

.simrsLogin__field input:focus
~ .simrsLogin__fieldIcon {
    stroke:
        #08aab3;
}


/* =========================================================
   PASSWORD EYE
   ========================================================= */

.simrsLogin__eye {
    position: absolute;

    z-index: 8;

    top: 50%;
    right: 7px;

    width: 30px;
    height: 30px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 6px;

    outline: none;

    background:
        transparent;

    color:
        #8da0a9;

    cursor:
        pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


/* Hover eye */

.simrsLogin__eye:hover {
    color:
        #06aab3;

    background:
        #edfafa;
}


/* Focus */

.simrsLogin__eye:focus-visible {
    box-shadow:
        0 0 0 2px
        rgba(6,170,179,.15);
}


.simrsLogin__eye svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.5;
}


/* =========================================================
   EYE STATE
   ========================================================= */

.simrsLogin__eyeShow {
    display:
        block;
}


.simrsLogin__eyeHide {
    display:
        none;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.simrsLogin__options {
    width: 100%;

    margin:
        0 0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


/* =========================================================
   REMEMBER
   ========================================================= */

.simrsLogin__remember {
    position: relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #526a79;

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;
}


/* Hide original checkbox */

.simrsLogin__remember input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}


/* Custom checkbox */

.simrsLogin__checkbox {
    position:
        relative;

    width:
        13px;

    height:
        13px;

    flex:
        0 0 13px;

    border:
        1px solid
        #b7cbd3;

    border-radius:
        2px;

    background:
        #ffffff;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Checked */

.simrsLogin__remember input:checked
+ .simrsLogin__checkbox {

    border-color:
        #08abb4;

    background:
        #08abb4;

    box-shadow:
        0 2px 6px
        rgba(8,171,180,.20);
}


/* Check mark */

.simrsLogin__remember input:checked
+ .simrsLogin__checkbox::after {

    content:
        "";

    position:
        absolute;

    left:
        3px;

    top:
        1px;

    width:
        4px;

    height:
        7px;

    border:
        solid #ffffff;

    border-width:
        0 1.5px 1.5px 0;

    transform:
        rotate(45deg);
}


/* Focus */

.simrsLogin__remember input:focus-visible
+ .simrsLogin__checkbox {

    box-shadow:
        0 0 0 3px
        rgba(8,171,180,.13);
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.simrsLogin__button {
    position: relative;

    width: 100%;

    height: 44px;

    padding:
        0 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        12px;

    overflow:
        hidden;

    border: 0;

    border-radius:
        7px;

    outline:
        none;

    background:
        linear-gradient(
            100deg,
            #079ba7 0%,
            #09adb3 48%,
            #0cbcaf 100%
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 7px 18px
        rgba(6,155,165,.23);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.simrsLogin__button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 12px 26px
        rgba(6,155,165,.32);
}


/* =========================================================
   BUTTON ACTIVE
   ========================================================= */

.simrsLogin__button:active {

    transform:
        translateY(0);

    box-shadow:
        0 5px 12px
        rgba(6,155,165,.20);
}


/* =========================================================
   BUTTON FOCUS
   ========================================================= */

.simrsLogin__button:focus-visible {

    box-shadow:

        0 0 0 3px
        rgba(8,171,180,.15),

        0 9px 22px
        rgba(6,155,165,.24);
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.simrsLogin__buttonText {
    position:
        relative;

    z-index:
        4;
}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.simrsLogin__arrow {
    position:
        relative;

    z-index:
        4;

    font-size:
        15px;

    line-height:
        1;

    transition:
        transform .25s ease;
}


.simrsLogin__button:hover
.simrsLogin__arrow {

    transform:
        translateX(5px);
}


/* =========================================================
   BUTTON SHINE
   ========================================================= */

.simrsLogin__shine {
    position: absolute;

    z-index: 3;

    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.05) 35%,
            rgba(255,255,255,.27) 50%,
            rgba(255,255,255,.05) 65%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    transition:
        left .65s ease;
}


.simrsLogin__button:hover
.simrsLogin__shine {
    left:
        140%;
}


/* =========================================================
   BUTTON LOADING
   ========================================================= */

.simrsLogin__button--loading {

    pointer-events:
        none;

    opacity:
        .82;
}


/* =========================================================
   HELP
   ========================================================= */

.simrsLogin__help {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        3px;

    margin:
        12px 0 0;

    color:
        #8b9ca4;

    font-size:
        7px;

    line-height:
        1.5;

    text-align:
        center;
}


.simrsLogin__help a {

    color:
        #079fa8;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.simrsLogin__help a:hover {

    color:
        #057c85;

    text-decoration:
        underline;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.simrsLogin__divider {

    width:
        100%;

    height:
        1px;

    margin:
        17px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e4ebed 20%,
            #e4ebed 80%,
            transparent
        );
}


/* =========================================================
   SECURITY
   ========================================================= */

.simrsLogin__security {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    width:
        100%;
}


/* =========================================================
   SECURITY ICON
   ========================================================= */

.simrsLogin__securityIcon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #eafafa,
            #dff6f3
        );

    box-shadow:
        0 3px 10px
        rgba(10,168,169,.08);
}


.simrsLogin__securityIcon svg {

    width:
        17px;

    height:
        17px;

    fill:
        #08aaa8;

    stroke:
        #ffffff;

    stroke-width:
        1.4;
}


/* =========================================================
   SECURITY TEXT
   ========================================================= */

.simrsLogin__securityText {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.simrsLogin__securityText strong {

    display:
        block;

    color:
        #35566a;

    font-size:
        7px;

    font-weight:
        700;

    line-height:
        1.3;
}


.simrsLogin__securityText span {

    display:
        block;

    color:
        #97a6ad;

    font-size:
        6.5px;

    font-weight:
        400;

    line-height:
        1.4;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.simrsLogin__copyright {

    margin:
        14px 0 0;

    color:
        #a3b0b6;

    font-size:
        6.5px;

    line-height:
        1.4;

    text-align:
        center;
}


/* =========================================================
   DESKTOP BESAR
   ========================================================= */

@media (min-width: 1440px) {

    .simrsLogin__right {

        padding:
            30px 6% 30px 42%;
    }


    .simrsLogin__left {

        width:
            51%;
    }


    .simrsLogin__card {

        width:
            400px;
    }


    .simrsLogin__brand {

        left:
            9.5%;
    }


    .simrsLogin__hospital {

        width:
            50%;

        height:
            50%;
    }

}


/* =========================================================
   LAPTOP
   1025px - 1439px
   ========================================================= */

@media (min-width: 1025px)
       and (max-width: 1439px) {

    .simrsLogin__right {

        padding:
            25px 5% 25px 42%;
    }


    .simrsLogin__left {

        width:
            51%;
    }


    .simrsLogin__brand {

        left:
            8.5%;

        top:
            18%;
    }


    .simrsLogin__hospital {

        left:
            1%;

        bottom:
            1%;

        width:
            51%;

        height:
            48%;
    }


    .simrsLogin__card {

        width:
            390px;
    }

}


/* =========================================================
   LAPTOP KECIL
   769px - 1024px
   ========================================================= */

@media (min-width: 769px)
       and (max-width: 1024px) {

    .simrsLogin__right {

        padding:
            20px 3% 20px 43%;
    }


    .simrsLogin__left {

        width:
            52%;
    }


    .simrsLogin__brand {

        left:
            8%;

        top:
            17%;

        max-width:
            78%;
    }


    .simrsLogin__brandTitle {

        font-size:
            26px;

        letter-spacing:
            -1px;
    }


    .simrsLogin__brand h2 {

        font-size:
            11px;
    }


    .simrsLogin__brand p {

        font-size:
            7px;
    }


    .simrsLogin__hospital {

        width:
            52%;

        height:
            43%;
    }


    .simrsLogin__card {

        width:
            330px;

        min-height:
            330px;

        padding:
            24px 22px 20px;
    }


    .simrsLogin__field input {

        height:
            47px;
    }


    .simrsLogin__button {

        height:
            42px;
    }

}


/* =========================================================
   MOBILE
   TIDAK MENGGUNAKAN PANEL DESKTOP
   ========================================================= */

@media (max-width: 768px) {

    .simrsLogin {

        width:
            100%;

        min-height:
            100vh;

        margin:
            0;

        padding:
            0;

        overflow-x:
            hidden;

        overflow-y:
            auto;

        background:
            linear-gradient(
                135deg,
                #f8fcfd 0%,
                #f1f9fa 50%,
                #eaf5f7 100%
            );
    }


    /* =====================================================
       PAGE
       ====================================================== */

    .simrsLogin__page {

        width:
            100%;

        min-height:
            100vh;

        display:
            block;

        overflow:
            visible;
    }


    /* =====================================================
       HIDE LEFT DESKTOP
       ====================================================== */

    .simrsLogin__left {

        display:
            none !important;
    }


    /* =====================================================
       HIDE DECOR
       ====================================================== */

    .simrsLogin__decor {

        display:
            none !important;
    }


    /* =====================================================
       RIGHT
       ====================================================== */

    .simrsLogin__right {

        position:
            relative;

        width:
            100%;

        min-height:
            100vh;

        padding:
            20px 16px;

        margin:
            0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            linear-gradient(
                135deg,
                #f8fcfd 0%,
                #f1f9fa 50%,
                #eaf5f7 100%
            );
    }


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

    .simrsLogin__card {

        position:
            relative;

        width:
            100%;

        max-width:
            390px;

        min-height:
            auto;

        margin:
            0;

        padding:
            28px 20px 22px;

        border-radius:
            15px;

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

        border:
            1px solid
            rgba(255,255,255,.90);

        box-shadow:

            0 18px 45px
            rgba(24,75,91,.11),

            0 5px 18px
            rgba(24,75,91,.05);

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

        animation:
            none;
    }


    /* =====================================================
       AVATAR
       ====================================================== */

    .simrsLogin__avatar {

        width:
            43px;

        height:
            43px;

        margin:
            0 auto 14px;
    }


    .simrsLogin__avatar svg {

        width:
            21px;

        height:
            21px;
    }


    /* =====================================================
       TITLE
       ====================================================== */

    .simrsLogin__title {

        margin:
            0 0 25px;

        font-size:
            15px;

        line-height:
            1.4;

        text-align:
            center;
    }


    /* =====================================================
       FORM
       ====================================================== */

    .simrsLogin__form {

        width:
            100%;
    }


    /* =====================================================
       FIELD
       ====================================================== */

    .simrsLogin__field {

        width:
            100%;

        margin:
            0 0 16px;
    }


    .simrsLogin__field input {

        width:
            100%;

        height:
            50px;

        padding:
            18px 42px 4px 40px;

        font-size:
            12px;
    }


    /* =====================================================
       FLOATING LABEL
       ====================================================== */

    .simrsLogin__field label {

        left:
            40px;

        top:
            17px;

        font-size:
            10px;
    }


    .simrsLogin__field input:focus + label,

    .simrsLogin__field input:not(:placeholder-shown) + label {

        top:
            -5px;

        left:
            12px;

        font-size:
            8px;

        background:
            #ffffff;

        color:
            #08aab3;
    }


    /* =====================================================
       ICON
       ====================================================== */

    .simrsLogin__fieldIcon {

        left:
            14px;

        width:
            16px;

        height:
            16px;
    }


    /* =====================================================
       EYE
       ====================================================== */

    .simrsLogin__eye {

        right:
            7px;

        width:
            30px;

        height:
            30px;
    }


    .simrsLogin__eye svg {

        width:
            16px;

        height:
            16px;
    }


    /* =====================================================
       OPTIONS
       ====================================================== */

    .simrsLogin__options {

        margin:
            -1px 0 16px;
    }


    .simrsLogin__remember {

        font-size:
            9px;
    }


    .simrsLogin__checkbox {

        width:
            13px;

        height:
            13px;

        flex:
            0 0 13px;
    }


    /* =====================================================
       BUTTON
       ====================================================== */

    .simrsLogin__button {

        width:
            100%;

        height:
            43px;

        border-radius:
            7px;

        font-size:
            11px;
    }


    /* =====================================================
       HELP
       ====================================================== */

    .simrsLogin__help {

        margin-top:
            13px;

        font-size:
            8px;
    }


    /* =====================================================
       DIVIDER
       ====================================================== */

    .simrsLogin__divider {

        margin:
            19px 0;
    }


    /* =====================================================
       SECURITY
       ====================================================== */

    .simrsLogin__security {

        gap:
            10px;
    }


    .simrsLogin__securityIcon {

        width:
            33px;

        height:
            33px;

        flex:
            0 0 33px;
    }


    .simrsLogin__securityIcon svg {

        width:
            18px;

        height:
            18px;
    }


    .simrsLogin__securityText strong {

        font-size:
            8px;
    }


    .simrsLogin__securityText span {

        font-size:
            7px;
    }


    /* =====================================================
       COPYRIGHT
       ====================================================== */

    .simrsLogin__copyright {

        margin-top:
            17px;

        font-size:
            7px;
    }

}


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

@media (max-width: 400px) {

    .simrsLogin__right {

        padding:
            16px 12px;
    }


    .simrsLogin__card {

        max-width:
            100%;

        padding:
            26px 18px 21px;

        border-radius:
            14px;
    }


    .simrsLogin__avatar {

        width:
            42px;

        height:
            42px;
    }


    .simrsLogin__title {

        font-size:
            14px;

        margin-bottom:
            23px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .simrsLogin__right {

        padding:
            14px 10px;
    }


    .simrsLogin__card {

        padding:
            24px 16px 20px;
    }


    .simrsLogin__title {

        font-size:
            13px;
    }


    .simrsLogin__field input {

        height:
            48px;
    }

}


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

@media (max-width: 768px)
       and (orientation: landscape) {

    .simrsLogin__right {

        min-height:
            100vh;

        padding:
            20px;

        align-items:
            flex-start;
    }


    .simrsLogin__card {

        margin:
            10px auto;

        max-width:
            390px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .simrsLogin *,
    .simrsLogin *::before,
    .simrsLogin *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}