#login{
    --bpmn-login-primary:#526A7A;
    --bpmn-login-primary-dark:#354C5B;
    --bpmn-login-primary-deep:#243640;
    --bpmn-login-accent:#A8C7D1;
    --bpmn-login-accent-light:#DCEAF0;
    --bpmn-login-ink:#20313A;
    --bpmn-login-muted:#667780;
    padding:0;
    overflow-y:auto;
    background:#F4F7F9;
    color:var(--bpmn-login-ink);
}

#login>.bpmn-auth-layout{
    display:grid;
    grid-template-columns:minmax(520px, 1.08fr) minmax(480px, .92fr);
    width:100%;
    min-height:100vh;
    margin:0;
    background:#F4F7F9;
}

#login>.bpmn-auth-layout>*{
    width:auto;
    max-width:none;
    padding:0;
}

#login .bpmn-auth-showcase{
    position:relative;
    display:flex;
    min-height:100vh;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(168, 199, 209, .28) 0, rgba(168, 199, 209, 0) 25%),
        radial-gradient(circle at 12% 92%, rgba(110, 145, 162, .24) 0, rgba(110, 145, 162, 0) 27%),
        linear-gradient(145deg, var(--bpmn-login-primary-deep) 0%, var(--bpmn-login-primary-dark) 52%, var(--bpmn-login-primary) 100%);
    color:#fff;
}

#login .bpmn-auth-showcase::before,
#login .bpmn-auth-showcase::after{
    position:absolute;
    content:"";
    pointer-events:none;
}

#login .bpmn-auth-showcase::before{
    inset:0;
    opacity:.16;
    background-image:
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom right, transparent 5%, #000 48%, transparent 92%);
}

#login .bpmn-auth-showcase::after{
    width:420px;
    height:420px;
    right:-220px;
    bottom:-210px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    box-shadow:0 0 0 72px rgba(255,255,255,.025), 0 0 0 144px rgba(255,255,255,.02);
}

#login .bpmn-auth-showcase-content{
    position:relative;
    z-index:1;
    display:flex;
    width:100%;
    max-width:760px;
    min-height:100%;
    margin:0 auto;
    padding:58px clamp(40px, 6vw, 88px) 48px;
    flex-direction:column;
}

#login .bpmn-showcase-brand img{
    display:block;
    width:100%;
    max-width:245px;
    height:auto;
    max-height:38px;
    object-fit:contain;
    object-position:left center;
}

#login .bpmn-showcase-brand img{
    filter:brightness(0) invert(1);
}

#login .bpmn-showcase-copy{
    max-width:590px;
    margin:auto 0 34px;
}

#login .bpmn-auth-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}

#login .bpmn-showcase-copy h1{
    max-width:580px;
    margin:0 0 20px;
    color:#fff;
    font-family:Rubik, sans-serif;
    font-size:clamp(36px, 3.5vw, 56px);
    font-weight:500;
    letter-spacing:-.035em;
    line-height:1.08;
}

#login .bpmn-showcase-copy h1 span{
    display:block;
}

#login .bpmn-showcase-copy p{
    max-width:545px;
    margin:0;
    color:rgba(239, 247, 250, .78);
    font-size:17px;
    line-height:1.65;
}

#login .bpmn-showcase-diagram{
    display:grid;
    grid-template-columns:82px 1fr;
    min-height:132px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:7px;
    background:rgba(255,255,255,.08);
    box-shadow:0 20px 44px rgba(10, 24, 32, .2);
    backdrop-filter:blur(8px);
}

#login .bpmn-showcase-lane-label{
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.16);
    color:rgba(239, 247, 250, .78);
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
}

#login .bpmn-showcase-flow{
    display:flex;
    align-items:center;
    min-width:0;
    padding:28px clamp(18px, 2vw, 30px);
}

#login .bpmn-showcase-node{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:var(--bpmn-login-primary-dark);
    background:#FBFDFE;
    box-shadow:0 8px 20px rgba(10, 28, 38, .18);
}

#login .bpmn-showcase-node.is-event{
    width:42px;
    height:42px;
    border:3px solid var(--bpmn-login-accent-light);
    border-radius:50%;
    font-size:11px;
}

#login .bpmn-showcase-node.is-task{
    min-width:112px;
    min-height:58px;
    padding:9px 12px;
    border-radius:8px;
    flex-direction:column;
    gap:5px;
    font-size:13px;
    text-align:center;
}

#login .bpmn-showcase-node.is-task i{
    color:var(--bpmn-login-primary);
}

#login .bpmn-showcase-node.is-task strong{
    font-size:10px;
    font-weight:600;
}

#login .bpmn-showcase-node.is-gateway{
    width:42px;
    height:42px;
    transform:rotate(45deg);
    border-radius:5px;
}

#login .bpmn-showcase-node.is-gateway i{
    transform:rotate(-45deg);
    color:var(--bpmn-login-primary);
}

#login .bpmn-showcase-connector{
    position:relative;
    min-width:24px;
    height:2px;
    flex:1 1 38px;
    background:rgba(220, 234, 240, .62);
}

#login .bpmn-showcase-connector::after{
    position:absolute;
    right:-1px;
    top:-3px;
    content:"";
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:6px solid rgba(220, 234, 240, .82);
}

#login .bpmn-showcase-benefits{
    display:flex;
    margin-top:28px;
    flex-wrap:wrap;
    gap:12px 24px;
    color:rgba(239, 247, 250, .82);
    font-size:12px;
}

#login .bpmn-showcase-benefits span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

#login .bpmn-showcase-benefits i{
    color:var(--bpmn-login-accent);
}

#login .bpmn-auth-form-pane{
    position:relative;
    min-height:100vh;
    background:
        radial-gradient(circle at 100% 0, rgba(168, 199, 209, .22), transparent 28%),
        #F7F9FA;
}

#login .bpmn-auth-form-pane::after{
    position:absolute;
    right:34px;
    bottom:26px;
    content:"Secure workspace access";
    color:#8A999F;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#login .login-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    margin:0;
    padding:54px clamp(28px, 5vw, 72px);
    background:transparent !important;
}

#login .bpmn-login-card-content{
    width:100%;
    max-width:480px;
}

#login .login-main{
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
}

#login .bpmn-auth-mobile-mark{
    display:none;
}

#login .bpmn-auth-heading{
    margin-bottom:34px;
}

#login .bpmn-auth-eyebrow{
    margin-bottom:10px;
    color:var(--bpmn-login-primary);
}

#login .bpmn-auth-heading h1{
    margin:0 0 12px;
    color:var(--bpmn-login-ink);
    font-family:Rubik, sans-serif;
    font-size:32px;
    font-weight:500;
    letter-spacing:-.025em;
    line-height:1.18;
}

#login .bpmn-auth-heading p{
    max-width:430px;
    margin:0;
    color:var(--bpmn-login-muted);
    font-size:15px;
    line-height:1.6;
}

#login .form-group{
    margin-bottom:21px;
}

#login .form-group>label{
    display:block;
    margin:0 0 7px;
    padding:0;
    color:#35474F;
    font-size:13px;
    font-weight:600;
}

#login .bpmn-auth-input{
    position:relative;
}

#login .bpmn-auth-input>i{
    position:absolute;
    z-index:1;
    left:16px;
    top:50%;
    width:16px;
    transform:translateY(-50%);
    color:#8A9BA2;
    text-align:center;
}

#login .bpmn-auth-input .form-control{
    height:50px;
    padding:10px 46px;
    border:1px solid #CAD7DC;
    border-radius:8px;
    background:#FFFFFF;
    color:var(--bpmn-login-ink);
    font-size:14px;
    box-shadow:0 1px 2px rgba(20, 40, 52, .03);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#login .bpmn-auth-input .form-control::placeholder{
    color:#98A7AD;
}

#login .bpmn-auth-input .form-control:hover{
    border-color:#A9BDC5;
}

#login .bpmn-auth-input .form-control:focus{
    border-color:var(--bpmn-login-primary);
    background:#fff;
    box-shadow:0 0 0 4px rgba(82, 106, 122, .13);
}

#login .show-hide{
    position:absolute;
    z-index:2;
    right:10px;
    top:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    transform:translateY(-50%);
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#73858C;
    cursor:pointer;
}

#login .show-hide:hover,
#login .show-hide:focus{
    color:var(--bpmn-login-primary);
    background:#EAF1F4;
    outline:none;
}

#login .show-hide i{
    font-size:14px;
}

#login .bpmn-login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:-2px 0 26px;
}

#login .form-check{
    display:flex;
    align-items:center;
    min-height:auto;
    margin:0;
    padding-left:0;
    gap:9px;
}

#login .form-check-input{
    width:17px;
    height:17px;
    margin:0;
    flex:0 0 17px;
    border-color:#AFC0C6;
    border-radius:4px;
    accent-color:var(--bpmn-login-primary);
}

#login .form-check-input:checked{
    background-color:var(--bpmn-login-primary);
    border-color:var(--bpmn-login-primary);
}

#login .form-check-input:focus{
    border-color:var(--bpmn-login-primary);
    box-shadow:0 0 0 3px rgba(82, 106, 122, .14);
}

#login .form-check-label,
#login .forgot-password{
    color:#5E7078;
    font-size:13px;
}

#login .forgot-password,
#login .back-to-login,
#login .bpmn-auth-signup a{
    color:var(--bpmn-login-primary);
    font-weight:500;
    text-decoration:none;
}

#login .forgot-password:hover,
#login .back-to-login:hover,
#login .bpmn-auth-signup a:hover{
    color:var(--bpmn-login-primary-dark);
    text-decoration:underline;
}

#login .btn-primary{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    gap:10px;
    border-color:var(--bpmn-login-primary);
    border-radius:8px;
    background:var(--bpmn-login-primary);
    color:#fff;
    font-size:14px;
    font-weight:600;
    box-shadow:0 10px 22px rgba(53, 76, 91, .2);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#login .btn-primary:hover,
#login .btn-primary:focus{
    border-color:var(--bpmn-login-primary-dark);
    background:var(--bpmn-login-primary-dark);
    box-shadow:0 12px 26px rgba(36, 54, 64, .25);
    transform:translateY(-1px);
}

#login button>i.fa-spinner{
    display:none;
    margin:0;
}

#login button.disabled>i.fa-spinner{
    display:inline-block;
}

#login .bpmn-login-button-arrow{
    position:absolute;
    right:18px;
    display:inline-block;
    margin:0;
    font-size:12px;
    opacity:.7;
}

#login #login-btn{
    position:relative;
}

#login .bpmn-auth-signup{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:34px;
    padding-top:26px;
    border-top:1px solid #DDE5E9;
    flex-wrap:wrap;
    gap:5px 8px;
    color:#6C7B81;
    font-size:13px;
    text-align:center;
}

#login .bpmn-auth-signup i{
    margin-left:4px;
    font-size:10px;
}

#login .bpmn-auth-back{
    margin:28px 0 0;
    text-align:center;
}

#login .bpmn-auth-back a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
}

#login .bpmn-forgot-panel form,
#login .bpmn-reset-panel form{
    padding-top:2px;
}

@media (max-width:1199.98px){
    #login>.bpmn-auth-layout{
        grid-template-columns:minmax(440px, .92fr) minmax(460px, 1.08fr);
    }

    #login .bpmn-auth-showcase-content{
        padding:44px 42px 40px;
    }

    #login .bpmn-showcase-copy h1{
        font-size:40px;
    }

    #login .bpmn-showcase-diagram{
        grid-template-columns:48px 1fr;
    }

    #login .bpmn-showcase-node.is-task{
        min-width:78px;
        padding-right:8px;
        padding-left:8px;
    }

    #login .bpmn-showcase-node.is-event,
    #login .bpmn-showcase-node.is-gateway{
        width:34px;
        height:34px;
    }

    #login .bpmn-showcase-connector{
        min-width:8px;
    }

    #login .bpmn-showcase-flow{
        padding-right:12px;
        padding-left:12px;
    }
}

@media (max-width:920px){
    #login>.bpmn-auth-layout{
        display:block;
    }

    #login .bpmn-auth-showcase{
        display:none;
    }

    #login .bpmn-auth-form-pane{
        display:flex;
        min-height:100vh;
        align-items:center;
        justify-content:center;
    }

    #login .bpmn-auth-form-pane::before{
        position:absolute;
        top:-160px;
        left:50%;
        width:420px;
        height:300px;
        transform:translateX(-50%);
        content:"";
        border-radius:50%;
        background:rgba(168, 199, 209, .25);
        filter:blur(2px);
    }

    #login .bpmn-auth-form-pane::after{
        display:none;
    }

    #login .login-card{
        width:100%;
        min-height:100vh;
        padding:38px 28px;
    }

    #login .bpmn-auth-mobile-mark{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        margin:0 0 46px;
        border:1px solid rgba(82, 106, 122, .22);
        border-radius:7px;
        background:#FFFFFF;
        color:var(--bpmn-login-primary);
        box-shadow:0 8px 20px rgba(53, 76, 91, .1);
    }
}

@media (max-width:520px){
    #login .login-card{
        align-items:flex-start;
        padding:28px 20px 36px;
    }

    #login .bpmn-auth-mobile-mark{
        margin-bottom:38px;
    }

    #login .bpmn-auth-heading{
        margin-bottom:28px;
    }

    #login .bpmn-auth-heading h1{
        font-size:28px;
    }

    #login .bpmn-auth-heading p{
        font-size:14px;
    }

    #login .bpmn-login-options{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }
}

@media (max-height:720px) and (min-width:921px){
    #login .bpmn-auth-showcase-content{
        padding-top:34px;
        padding-bottom:30px;
    }

    #login .bpmn-showcase-copy{
        margin-bottom:22px;
    }

    #login .bpmn-showcase-copy h1{
        font-size:38px;
    }

    #login .bpmn-showcase-copy p{
        font-size:14px;
    }

    #login .bpmn-showcase-diagram{
        min-height:104px;
    }

    #login .bpmn-showcase-flow{
        padding-top:18px;
        padding-bottom:18px;
    }

    #login .bpmn-showcase-benefits{
        margin-top:18px;
    }

    #login .login-card{
        padding-top:28px;
        padding-bottom:28px;
    }

    #login .bpmn-auth-heading{
        margin-bottom:24px;
    }
}