/* ==========================================================
   PAY ECTO — Login v0.1.102
   ========================================================== */

html,
body.payecto-login-page{
    min-height:100%;
    margin:0;
    background:#03142d
}

body.payecto-login-page{
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
    overflow-x:hidden;
    color:#14223a;
    font-family:Arial,Helvetica,sans-serif
}

.payecto-login-page .payecto-login-shell{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    padding:
        calc(24px + env(safe-area-inset-top))
        18px
        calc(24px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 86% 6%,rgba(23,111,244,.26),transparent 31%),
        radial-gradient(circle at 4% 56%,rgba(3,110,255,.11),transparent 35%),
        linear-gradient(145deg,#03142d 0%,#061b39 58%,#03132b 100%)
}

.payecto-login-page .payecto-login-shell::before,
.payecto-login-page .payecto-login-shell::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none
}

.payecto-login-page .payecto-login-shell::before{
    width:230px;
    height:230px;
    right:-126px;
    top:155px;
    border:1px solid rgba(62,140,255,.12)
}

.payecto-login-page .payecto-login-shell::after{
    width:150px;
    height:150px;
    left:-98px;
    bottom:90px;
    border:1px solid rgba(62,140,255,.1)
}

.payecto-login-page .payecto-login-panel{
    position:relative;
    z-index:2;
    width:100%;
    max-width:414px;
    min-height:calc(100vh - 48px);
    min-height:calc(100dvh - 48px);
    display:flex;
    flex-direction:column
}

.payecto-login-page .payecto-login-top{
    padding:6px 8px 24px;
    color:#fff
}

.payecto-login-page .payecto-login-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px
}

.payecto-login-page .payecto-login-logo{
    position:relative;
    display:block;
    width:29px;
    height:35px;
    min-width:29px;
    max-width:29px
}

.payecto-login-page .payecto-login-logo i,
.payecto-login-page .payecto-login-logo b{
    position:absolute;
    display:block;
    clip-path:polygon(0 0,100% 50%,0 100%)
}

.payecto-login-page .payecto-login-logo i{
    inset:0 7px 0 0;
    background:#fff
}

.payecto-login-page .payecto-login-logo b{
    width:22px;
    height:22px;
    left:8px;
    bottom:0;
    background:#0a6ff5
}

.payecto-login-page .payecto-login-wordmark{
    display:flex;
    align-items:baseline;
    font-size:27px;
    line-height:1;
    font-style:italic;
    font-weight:900;
    letter-spacing:-1px
}

.payecto-login-page .payecto-login-wordmark strong{
    color:#fff
}

.payecto-login-page .payecto-login-wordmark em{
    color:#1680ff;
    font-style:italic
}

.payecto-login-page .payecto-login-heading{
    margin-top:37px
}

.payecto-login-page .payecto-login-heading>span{
    color:#2683ff;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.65px
}

.payecto-login-page .payecto-login-heading h1{
    margin:7px 0 8px;
    color:#fff;
    font-size:29px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.45px
}

.payecto-login-page .payecto-login-heading p{
    max-width:310px;
    margin:0;
    color:#c8d3e3;
    font-size:11px;
    line-height:1.5
}

.payecto-login-page .payecto-login-card{
    width:100%;
    padding:20px 17px 17px;
    box-sizing:border-box;
    border:1px solid rgba(225,234,244,.86);
    border-radius:19px;
    background:#fff;
    box-shadow:
        0 18px 38px rgba(0,9,23,.26),
        0 4px 12px rgba(0,9,23,.09)
}

.payecto-login-page .payecto-login-alert{
    margin-bottom:13px;
    padding:10px 11px;
    border-radius:10px;
    color:#805000;
    background:#fff3db;
    border:1px solid #ffe4b1
}

.payecto-login-page .payecto-login-alert.error{
    color:#9d2929;
    background:#fff0ef;
    border-color:#ffd4d1
}

.payecto-login-page .payecto-login-alert strong,
.payecto-login-page .payecto-login-alert span{
    display:block
}

.payecto-login-page .payecto-login-alert strong{
    font-size:9px;
    line-height:1.2
}

.payecto-login-page .payecto-login-alert span{
    margin-top:3px;
    font-size:8px;
    line-height:1.35
}

.payecto-login-page .payecto-login-form{
    display:flex;
    flex-direction:column;
    gap:13px
}

.payecto-login-page .payecto-login-field{
    min-width:0
}

.payecto-login-page .payecto-login-field label{
    display:block;
    margin:0 0 6px 2px;
    color:#34445c;
    font-size:9px;
    line-height:1;
    font-weight:800
}

.payecto-login-page .payecto-login-input-wrap{
    position:relative;
    width:100%;
    height:49px;
    overflow:hidden;
    border:1px solid #dce4ee;
    border-radius:11px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    background:#f9fbfd;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease
}

.payecto-login-page .payecto-login-input-wrap:focus-within{
    border-color:#3d8cff;
    background:#fff;
    box-shadow:0 0 0 3px rgba(18,110,244,.08)
}

.payecto-login-page .payecto-login-input-icon{
    width:42px;
    height:49px;
    display:grid;
    place-items:center;
    color:#6d7c91
}

.payecto-login-page .payecto-login-input-icon svg{
    display:block!important;
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    min-height:17px!important;
    max-width:17px!important;
    max-height:17px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.7!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important
}

.payecto-login-page .payecto-login-input-wrap input{
    width:100%;
    height:47px;
    min-width:0;
    margin:0;
    padding:0 13px 0 0;
    box-sizing:border-box;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#14223a!important;
    font:inherit;
    font-size:11px!important;
    box-shadow:none!important
}

.payecto-login-page .payecto-login-input-wrap input::placeholder{
    color:#96a2b3
}

.payecto-login-page .payecto-remember{
    position:relative;
    min-height:40px;
    margin:0;
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    gap:8px;
    align-items:start;
    cursor:pointer
}

.payecto-login-page .payecto-remember>input{
    position:absolute;
    width:1px!important;
    height:1px!important;
    opacity:0;
    pointer-events:none
}

.payecto-login-page .payecto-check{
    width:21px;
    height:21px;
    box-sizing:border-box;
    border:1px solid #cfd8e5;
    border-radius:6px;
    display:grid;
    place-items:center;
    color:transparent;
    background:#fff
}

.payecto-login-page .payecto-check svg{
    display:block!important;
    width:13px!important;
    height:13px!important;
    min-width:13px!important;
    min-height:13px!important;
    max-width:13px!important;
    max-height:13px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important
}

.payecto-login-page .payecto-remember>input:checked + .payecto-check{
    border-color:#0c6df1;
    color:#fff;
    background:#0c6df1
}

.payecto-login-page .payecto-remember-copy{
    min-width:0
}

.payecto-login-page .payecto-remember-copy strong{
    display:block;
    color:#24344c;
    font-size:9px;
    line-height:1.2
}

.payecto-login-page .payecto-remember-copy small{
    display:block;
    margin-top:3px;
    color:#7b8798;
    font-size:7.5px;
    line-height:1.35
}

.payecto-login-page .payecto-login-submit,
.payecto-login-page .payecto-login-install{
    width:100%;
    height:47px;
    margin:0;
    padding:0 14px;
    box-sizing:border-box;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font:inherit;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.35px;
    cursor:pointer
}

.payecto-login-page .payecto-login-submit{
    border:0;
    color:#fff;
    background:linear-gradient(135deg,#075fe8,#1380ff);
    box-shadow:0 7px 16px rgba(4,103,242,.21)
}

.payecto-login-page .payecto-login-submit:active{
    transform:translateY(1px)
}

.payecto-login-page .payecto-login-install{
    border:1px solid #dce5f0;
    color:#17304f;
    background:#f7f9fc
}

.payecto-login-page .payecto-forgot{
    width:max-content;
    margin:16px auto 1px;
    display:block;
    color:#0b6cec;
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800
}

.payecto-login-page .payecto-login-footer{
    margin-top:auto;
    padding:24px 0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#8ea2bd;
    font-size:8px;
    line-height:1
}

.payecto-login-page .payecto-secure-mark{
    width:16px;
    height:16px;
    display:grid;
    place-items:center
}

.payecto-login-page .payecto-secure-mark svg{
    display:block!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    max-width:14px!important;
    max-height:14px!important;
    fill:none!important;
    stroke:#3f8efb!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important
}

@media(min-width:700px){
    .payecto-login-page .payecto-login-shell{
        align-items:center
    }

    .payecto-login-page .payecto-login-panel{
        min-height:auto
    }

    .payecto-login-page .payecto-login-top{
        padding-bottom:20px
    }

    .payecto-login-page .payecto-login-heading{
        margin-top:28px
    }

    .payecto-login-page .payecto-login-footer{
        margin-top:20px
    }
}

@media(max-width:350px){
    .payecto-login-page .payecto-login-shell{
        padding-left:12px;
        padding-right:12px
    }

    .payecto-login-page .payecto-login-card{
        padding-left:14px;
        padding-right:14px
    }

    .payecto-login-page .payecto-login-heading h1{
        font-size:26px
    }
}