:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-133e9ec *//*=========================================
RESET
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:linear-gradient(to bottom,#0c8bcc 0%,#00587c 100%);

    background-repeat:no-repeat;

    background-size:cover;

    overflow-x:hidden;
}

/*=========================================
WRAPPER
=========================================*/

.wrapper{

    min-height:calc(100vh - 44px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;
}

/*=========================================
LOGO
=========================================*/

.logo{

    width:100%;

    text-align:center;

    margin-bottom:18px;
}

.logo img{

    width:300px;

    max-width:90%;

    display:block;

    margin:auto;

    user-select:none;
}

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

.login-box{

    width:350px;

    background:#ffffff;

    border-radius:4px;

    padding:22px;

    border:1px solid #d8d8d8;

    box-shadow:
    0 0 2px rgba(0,0,0,.15),
    0 3px 8px rgba(0,0,0,.18);
}

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

.login-box h2{

    text-align:center;

    color:#0086cf;

    font-size:20px;

    font-weight:400;

    margin-bottom:18px;
}

.login-box h2 i{

    font-size:15px;

    margin-left:3px;
}

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

.input-group{

    display:flex;

    width:100%;

    margin-bottom:14px;
}

.input-group input{

    flex:1;

    height:36px;

    border:1px solid #d6d6d6;

    border-right:none;

    padding:0 10px;

    font-size:13px;

    color:#444;

    outline:none;

    background:#fff;
}

.input-group input::placeholder{

    color:#777;
}

.input-group span{

    width:40px;

    height:36px;

    border:1px solid #d6d6d6;

    background:#f4f4f4;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#222;

    font-size:15px;
}


/*=========================================
BUTTONS
=========================================*/

.login-btn,
.demo-btn{

    width:100%;

    height:36px;

    border:none;

    outline:none;

    cursor:pointer;

    background:#0b8fd3;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

    position:relative;

    transition:.25s;
}

.login-btn:hover,
.demo-btn:hover{

    background:#087cb7;
}

.login-btn i,
.demo-btn i{

    position:absolute;

    right:14px;

    top:11px;

    font-size:13px;
}

/*=========================================
CAPTCHA
=========================================*/

.captcha{

    text-align:center;

    font-size:10px;

    color:#222;

    line-height:16px;

    margin-top:8px;
}

.captcha a{

    color:#2b63ff;

    text-decoration:none;
}

.captcha a:hover{

    text-decoration:underline;
}

/*=========================================
APK LINK
=========================================*/

.apk{

    display:block;

    margin-top:12px;

    text-align:center;

    color:#005eff;

    text-decoration:none;

    font-size:12px;

    font-weight:500;
}

.apk i{

    margin-right:4px;

    font-size:11px;
}

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

footer{

    width:100%;

    height:44px;

    background:#0b8fd3;

    position:fixed;

    left:0;

    bottom:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;
}

footer .left{

    display:flex;

    gap:18px;
}

footer .left a{

    color:#fff;

    text-decoration:none;

    font-size:11px;

    font-weight:600;
}

footer .center{

    position:absolute;

    left:50%;

    transform:translateX(-50%);
}

footer .center a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){

    .wrapper{

        min-height:calc(100vh - 50px);

        padding:18px;
    }

    .logo img{

        width:220px;
    }

    .login-box{

        width:100%;

        max-width:350px;

        padding:18px;
    }

    footer{

        height:34px;

        padding:0 10px;
    }

    footer .left{

        width:100%;

        justify-content:space-between;

        gap:10px;
    }

    footer .left a{

        font-size:10px;
    }

    footer .center{

        display:none;
    }

}


/*==========================================
PIXEL PERFECT FINISH
==========================================*/

/* Smooth Font */

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

/* Logo */

.logo{
    margin-bottom:22px;
}

.logo img{
    width:280px;
    transition:.3s;
}

/* Login Card */

.login-box{

    border-radius:3px;

    box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 6px 18px rgba(0,0,0,.18);

    animation:fade .4s ease;
}

@keyframes fade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Inputs */

.input-group input:focus{

    border-color:#1a8fd7;
}

.input-group input:focus+span{

    border-color:#1a8fd7;
}

/* Button */

.login-btn,
.demo-btn{

    border-radius:2px;

    letter-spacing:.3px;
}

.login-btn:active,
.demo-btn:active{

    transform:scale(.99);
}

/* Footer */

footer{

    z-index:999;
}

footer a{

    transition:.3s;
}

footer a:hover{

    opacity:.8;
}

/*=========================
PHONE
=========================*/

@media screen and (max-width:480px){

body{

    background:linear-gradient(#0a8ccd,#005b82);
}

.wrapper{

    padding:16px;

    justify-content:flex-start;

    padding-top:40px;
}

.logo{

    margin-bottom:18px;
}

.logo img{

    width:200px;
}

.login-box{

    width:100%;

    max-width:340px;

    padding:16px;
}

.login-box h2{

    font-size:18px;

    margin-bottom:14px;
}

.input-group{

    margin-bottom:10px;
}

.input-group input{

    height:34px;

    font-size:12px;
}

.input-group span{

    width:38px;

    height:34px;

    font-size:13px;
}

.login-btn,
.demo-btn{

    height:34px;

    font-size:12px;
}

.captcha{

    font-size:9px;

    line-height:14px;
}

.apk{

    font-size:11px;
}

footer{

    height:38px;

    padding:0 8px;
}

footer .left{

    gap:8px;
}

footer .left a{

    font-size:9px;
}

footer .center{

    display:block;

    position:absolute;

    left:50%;

    transform:translateX(-50%);
}

footer .center a{

    font-size:14px;
}

}

/*=========================
LARGE DESKTOP
=========================*/

@media screen and (min-width:1400px){

.logo img{

    width:310px;
}

.login-box{

    width:360px;
}

}


/*==============================
FINAL UI POLISH
===============================*/

html,
body{
    width:100%;
    height:100%;
}

body{

    background:linear-gradient(180deg,#0b91d5 0%,#01597d 100%);
    display:flex;
    flex-direction:column;
}

/* Center Login */

.wrapper{

    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

/* Logo */

.logo{

    margin-bottom:18px;
}

.logo img{

    width:270px;
    max-width:90%;
}

/* Card */

.login-box{

    width:350px;
    background:#fff;
    border-radius:2px;
    padding:20px;
    box-shadow:0 2px 12px rgba(0,0,0,.20);
}

/* Heading */

.login-box h2{

    color:#058ed4;
    font-size:20px;
    font-weight:400;
    text-align:center;
    margin-bottom:15px;
}

/* Input */

.input-group{

    margin-bottom:12px;
}

.input-group input{

    font-size:13px;
    color:#666;
    transition:.3s;
}

.input-group input:focus{

    border-color:#058ed4;
}

.input-group span{

    background:#efefef;
}

/* Button */

.login-btn,
.demo-btn{

    background:#0a8fd5;
    border-radius:2px;
    font-size:13px;
    font-weight:bold;
    transition:.3s;
}

.login-btn:hover,
.demo-btn:hover{

    background:#0878b3;
}

/* Footer */

footer{

    width:100%;
    height:42px;
    background:#0a8fd5;
    position:fixed;
    left:0;
    bottom:0;
}

footer .left{

    height:100%;
    display:flex;
    align-items:center;
    gap:18px;
    padding-left:15px;
}

footer .left a{

    color:#fff;
    text-decoration:none;
    font-size:11px;
}

footer .center{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

footer .center a{

    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
}

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

@media(max-width:768px){

.wrapper{

    padding:15px;
}

.logo img{

    width:190px;
}

.login-box{

    width:100%;
    max-width:340px;
    padding:15px;
}

.login-box h2{

    font-size:18px;
}

.input-group input{

    height:35px;
    font-size:12px;
}

.input-group span{

    height:35px;
}

.login-btn,
.demo-btn{

    height:35px;
    font-size:12px;
}

footer{

    height:38px;
}

footer .left{

    gap:10px;
    padding-left:10px;
}

footer .left a{

    font-size:9px;
}

footer .center a{

    font-size:14px;
}

}/* End custom CSS */