/* -- INTRO STYLE -- */
body{
    background-position:top center;
    background-size:cover;
    background-color:#0c0f19;
    background-image:url(/images/login/loginbg.png);
}
body:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    /*background-image:url(/images/login/box-pattern.png);*/
    background-repeat:repeat;
    opacity:0.75;
}
.intro-wrapper{
    width:100%;
    min-height:100%;
    position:relative;
    z-index:1;
    text-align:center;
    padding:120px 0 168px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.intro-wrapper *{
    outline:none;
}
.intro-wrapper:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    /*background-color:rgba(1,77,97,0.5);*/
}

/* INtro Info*/

.intro-info{
    width:auto;
    margin:0 auto 0 13%;
}
.intro-logo{
    width:100%;
    position:relative;
    z-index:1;
}
.intro-logo .title{
    color:#fff;
    font-family:SCDream;
    letter-spacing:5px;
}
.intro-logo .aklogo{
    width:393px;
    margin:0 auto;
    z-index:1;
}
.intro-info .form-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:40px auto 0;
}
.intro-info .form-toggle button{
    width:180px;
    height:54px;
    color:#fff;
    font-weight:bold;
    border:solid 1px #dba819;
    background-color:rgb(0 0 0 / 81%);
    transition: 0.3s;
}
.intro-info .form-toggle button:hover{
    background-color: #502b00;
    color: #dba819;
}
.intro-info .form-toggle .active{
    color: #fff;
    border-color: #dba819;
    background-color: #dba819;
}
.intro-info .form-toggle .active:hover{
    color:#fff;
    border-color:#dba819;
    background-color:#dba819;
}
.intro-info .form-toggle button:first-child{
    border-radius:12px 0 0 12px;
}
.intro-info .form-toggle button:last-child{
    border-radius:0 12px 12px 0;
}

/* Intro Panel */

.intro-panel{
	/*width:40%;*/
    height:100%;
    right:0;
    top:0;
    position:fixed;
    z-index:1;
}
.intro-panel:before{
    content:'';
    width:200%;
    height:140%;
    border-radius:50%;
    /*background:url(/images/login/dot-texture.png) repeat 0 0 #161b28;*/
    position:absolute;
    top:-20%;
    left:0;
    pointer-events: none;
}
.intro-panel .form-container{
    width:100%;
    max-width:484px;
    height:100%;
    position:absolute;
    left:-120px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    overflow-y:scroll;
    padding:30px 0;
}
.intro-panel .form-container::-webkit-scrollbar {
    width:0px;
    background:transparent;
}
.intro-panel .form-container::-webkit-scrollbar-thumb {
    background:transparent;
}
.intro-panel main{
    width:100%;
}
.intro-panel form{
    margin:0; width:100%;
}
.intro-form{
    width:100%;
    min-height:260px;
	padding:40px 15px;
    border-radius:12px;
    background-color:#1d23337a;
    box-shadow:0 0 60px 0 rgb(0 0 0 / 12%);
    position:relative;
    z-index:1;
}
.intro-form .form-title{
    color:#fff;
    margin:0 0 60px;
}
.intro-form .form-title .title{
    font-size:22px;
    font-family:SCDream;
    font-weight:700;
}
.intro-form .form-group{
    width:100%;
    position:relative;
    margin-bottom:15px;
}
.intro-wrapper .intro-form .labels{
    width:100%;
    text-align:left;
    padding-left:5px;
    color:#fff;
    font-size:14px;
    font-family:SCDream;
    margin-bottom:5px;
}
.intro-wrapper .intro-form .infos{
    align-items:center;
    justify-content:flex-start;
}
.intro-form .input-container{
    width:100%;
    background-color:#1d2333;
    border:1px solid #74612c;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
}
.intro-form .input-container.highlight{
    border:solid 3px #006d33;
}
.intro-form .input-container .icon{
    width:30px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#dba819;
    font-size:18px;
}
.intro-form .form-group input{
    width:100%;
    height:54px;
    background-color:#1d2333;
    border:1px solid #72580e;
    border-radius:12px;
    padding:0 8px;
    color:#fff;
    font-size:12px;
    font-family:SCDream;
}
.intro-form .form-group.w-btn input{
    width:calc(100% - 115px);
    border-radius:12px 0 0 12px;
}
.intro-form .form-group .input-container input{
    width:calc(100% - 30px);
    height:54px;
    background-color:transparent;
    border-radius:0;
    border:none;
}
.intro-form .form-group input::-webkit-input-placeholder{
    color:#9aa4bf;
    font-size:12px;
}
.intro-form .form-group input:-webkit-autofill,
.intro-form .form-group input:-webkit-autofill:hover, 
.intro-form .form-group input:-webkit-autofill:focus, 
.intro-form .form-group input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #1d2333 inset !important;
    color:#fff;
    -webkit-text-fill-color: #fff !important;
}
.intro-form .form-group select{
    width:100%;
    height:54px;
    background-color:#1d2333;
    border:1px solid #3a2428;
    border-radius:12px;
    padding:0 8px;
    color:#fff;
    font-size:12px;
    font-family:SCDream;
}
.intro-form .infos button{
    width:110px;
    height:54px;
    border:solid 1px #656e88;
    background-color:#656e88;
    border-radius:0 8px 8px 0;
    color:#fff;
    font-family:SCDream;
    transition:0.3s;
}
.intro-form .infos button:hover{
    background-color:#19d06e;
}
.intro-form .rem-text{
    color:#ccc;
    font-size:10px;
    font-family:SCDream;
    margin:0;
}
.intro-form .form-footer{
    margin-top:13px;
}
.intro-form .form-footer .btn-container{
    width:100%;
}
.intro-form .form-footer button{
    width:100%;
    height:54px;
    border:none;
    color:#fff;
    font-size:13px;
    font-family:SCDream;
    margin:10px 0;
    border-radius:10px;
    transition:0.3s;
    background-color:#dba819;
    box-shadow:4px 7px 12px 0 rgb(119 80 248 / 20%);
}
.intro-form .form-footer button:hover{
    background-color:#ffd661;
}

/* -- Chrome Section -- */

.intro-wrapper .chrome-section{
    width:100%;
    text-align:center;
    margin-top:30px;
    animation:introPaneAnim ease 0.8s backwards;
    animation-delay:0.5s;
}
.intro-wrapper .chrome-section .info{
    width:100%;
    display:inline-block;
    position:relative;
    z-index:1;
}
.intro-wrapper .chrome-section .info:before{
    content:'';
    width:100%;
    height:1px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto 0;
    background-color:#2f3749;
    z-index:-1;
}
.intro-wrapper .chrome-section .info span{
    color:#fff;
    font-size:11px;
    font-family:SCDream;
    display:inline-block;
    white-space:nowrap;
    background-color:#1d2333;
    padding:0 10px;
}
.intro-wrapper .chrome-section .info i{
    color:#5b8404;
    font-size:18px;
    margin-right:5px;
    position:relative;
    top:2px;
}
.intro-wrapper .chrome-section .chrome-icon{
    display:block;
    margin:20px auto 10px;
}
.intro-wrapper .chrome-section .dl-btn{
    color:#83e5ff;
    font-size:11px;
    font-family:SCDream;
    transition:0.3s;
    text-decoration:none;
}
.intro-wrapper .chrome-section .dl-btn:hover{
    text-shadow:0 0 10px rgba(255,255,255,0.5);
}
.intro-wrapper .chrome-section .dl-btn i{
    font-size:13px;
    margin-right:4px;
    position:relative;
    top:2px;
}
.intro-footer{
    width:100%; padding: 20px 0;
}
.intro-wrapper .intro-footer{
    margin:10px 0 0;
}
.intro-footer span{
    color:#fff;
    font-size:11px;
    font-family:SCDream;
}
@media(max-width:1260px){
    .intro-wrapper{
        padding:80px 0 100px;
        flex-wrap:wrap;
        align-content:flex-start;
    }
    .intro-wrapper:before{
        background-color:rgb(0 0 0 / 50%);
    }
    .intro-info {
        width:100%;
        margin:0;
    }
    .intro-panel{
        width:100%;
        max-width:484px;
        height:initial;
        position:relative;
        margin:30px auto 0;
    }
    .intro-panel:before {
        display:none;
    }
    .intro-panel .form-container{
        width:100%;
        max-width:initial;
        height:initial;
        position:relative;
        left:0;
        overflow-y:auto;
        padding:0;
    }
}
@media(max-width:500px){
    .intro-logo .aklogo {
        width:250px;
    }
    .intro-wrapper .intro-footer {
        margin:0px 0 0;
    }
    .intro-info .form-toggle{
        margin:30px auto 0;
    }
    .intro-form{
        padding:40px 15px;
    }
    .intro-form .form-title{
        margin: 0 0 30px;
    }
    .intro-wrapper {
        padding:30px 0;
    }
}