.pw-process{}
.pw-process .panel{margin: 20px 0;}
.pw-process .panel-footer{background-color: #fff;}
.pw-process h1{font-size: 25px; margin: 10px 0 15px 0;}
.pw-process h2{font-size: 20px; margin: 10px 0 15px 0;}
.pw-process p{margin: 0px 0 5px;}
.pcb-guide{margin-bottom: 15px;}
.pw-process .alert{margin-bottom: 0;}
.pcb-syntax{font-weight: bold;}

/* PAYIN DEPOSIT */
.pwdp-process .panel{margin: 20px 0;}
.pwpd-header{
    background-color: #4CAF6F !important; font-size: 18px; color: #fff !important;
}
.pwpd-header-left{margin: 0 !important; font-size: 20px;}
.pwpd-header-right{text-align: right;}
.pwpd-note h3{margin: 0 !important;}
.pwpd-note ul{margin: 0 !important; padding: 5px 0 0 25px;}
.pwpd-logo{margin-top: 10px;}
.pwpd-logo img{max-width: 100%;}

.pwpd-info{text-align: center; font-size: 17px; margin-bottom: 10px;}
.pwpd-info-top{}
.pwpd-info-bot{font-weight: bold; font-size: 14px;}
.pwpd-info p{margin: 0;}
.pwpd-info-box{position: relative;}
.pwpd-info-box:after{
    content: "";display: block;width: 1px; height: 90%; background-color: #e1e1e1;
    position: absolute;top: 5%;right: -20px;
}
.pwpd-info-box.last:after{display: none;}

.pwpd-steps{}
.pwpd-form{}
.pwpd-form-qrcode{text-align: center;}
.pwpd-form-qrcode img{max-width: 100%; border: 1px solid #bfbfbf;}
@media only screen and (min-width: 768px) {
    .pwpd-form-img{
        /*margin: 30px 0;*/
        margin-bottom: 10px;
        text-align: center;
    }
}
@media only screen and (max-width: 768px) {
    .pwpd-form-img{ margin-bottom: 10px; text-align: center;}
    .pwpd-header-left, .pwpd-header-right{text-align: center;}
    .pwpd-logo{text-align: center; margin: 10px 0;}
    .pwpd-form-qrcode{margin-bottom: 20px;}
}
.pwpd-form-final{}
.pwpd-ff-message{font-size: 20px; color: #4CAF6F; text-align: center;}
.pwpd-ff-message.error{font-size: 25px; color: red; line-height: 30px;}
.pwpd-ff-redirect{text-align: center;}
.pwpd-ff-detail{font-size: 20px; text-align: center; color: red; line-height: 25px; padding: 5px 0;}
#modal-error-content{font-size: 18px;}

.pwpd-notice{font-size: 16px; color:red; text-align: center;}

/* ERROR */
.pw-error{border: 1px solid red;}

/* PROGRESS BAR */
.pwpd-form-overplay{
    display: none;
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background-color: rgb(12, 0, 0); z-index: 10; opacity: 0.5;
}
.pwpd-form-inner{position: relative; padding: 20px;}
#step-progress, #step-progress-j{
    width: 100%;background-color: #ddd; display: none;
    position: relative; height: 35px; line-height: 35px;
    color: #333; font-weight: bold; text-align: center;
}
#step-bar, #step-bar-j{
    width: 1%;height: 35px;opacity: 0.5;
    text-align: center; line-height: 30px; color: white;
    position: absolute; top: 0; left: 0;

    background-color: #f1a165;
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
    background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
#step-bar:after, #step-bar-j:after{
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image:
            -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, rgba(255, 255, 255, .2)),
            color-stop(.25, transparent), color-stop(.5, transparent),
            color-stop(.5, rgba(255, 255, 255, .2)),
            color-stop(.75, rgba(255, 255, 255, .2)),
            color-stop(.75, transparent), to(transparent)
            );
    background-image:
            -moz-linear-gradient(
                    -45deg,
                    rgba(255, 255, 255, .2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .2) 50%,
                    rgba(255, 255, 255, .2) 75%,
                    transparent 75%,
                    transparent
            );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* BREADCRUMB */
.cd-breadcrumb, .cd-multi-steps {
    width: 90%;max-width: 768px;padding: 0.5em 1em;margin: 1em auto;
    background-color: #edeff0;border-radius: .25em;
}
.cd-breadcrumb:after, .cd-multi-steps:after {
    content: "";display: table;clear: both;
}
.cd-breadcrumb li, .cd-multi-steps li {
    display: inline-block;float: left; margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
    display: inline-block;content: '\00bb';margin: 0 .6em;color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {display: none;}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
    display: inline-block;font-size: 1.4rem;color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {color: #4CAF6F ;}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {color: #4CAF6F ;}
@media only screen and (min-width: 768px) {
    .cd-breadcrumb, .cd-multi-steps {padding: 0 1.2em;}
    .cd-breadcrumb li, .cd-multi-steps li {margin: 1.2em 0;}
    .cd-breadcrumb li::after, .cd-multi-steps li::after {margin: 0 1em;}
    .cd-breadcrumb li > *, .cd-multi-steps li > * {font-size: 1.6rem;}
}
@media only screen and (min-width: 768px) {
    .cd-multi-steps {background-color: transparent;padding: 0;text-align: center;}
    .cd-multi-steps li {position: relative;float: none; margin: 0.4em 40px 0.4em 0;}
    .cd-multi-steps li:last-of-type {margin-right: 0;}
    .cd-multi-steps li::after {position: absolute;content: '';height: 4px;background: #edeff0;margin: 0;}
    .cd-multi-steps li.visited::after {background-color: #4CAF6F ;}
    .cd-multi-steps li > *, .cd-multi-steps li.current > * {position: relative;color: #2c3f4c;}
    .cd-multi-steps.custom-separator li::after {height: 4px;background: #edeff0;}
    .cd-multi-steps.text-center li::after {
        width: 100%;top: 50%;left: 100%;
        -webkit-transform: translateY(-50%) translateX(-1px);
        -moz-transform: translateY(-50%) translateX(-1px);
        -ms-transform: translateY(-50%) translateX(-1px);
        -o-transform: translateY(-50%) translateX(-1px);
        transform: translateY(-50%) translateX(-1px);
    }
    .cd-multi-steps.text-center li > * {
        z-index: 1;padding: .6em 1em;border-radius: .25em; background-color: #edeff0;
    }
    .no-touch .cd-multi-steps.text-center a:hover {background-color: #2c3f4c;}
    .cd-multi-steps.text-center li.current > *, .cd-multi-steps.text-center li.visited > * {
        color: #ffffff;background-color: #4CAF6F ;
    }
    .cd-multi-steps.text-center.custom-icons li.visited a::before {
        background-position: 0 -60px;
    }
    .cd-multi-steps.text-top li, .cd-multi-steps.text-bottom li {
        text-align: center;
    }
    em{
        font-style: normal !important;
    }
    .cd-multi-steps.text-top li::after, .cd-multi-steps.text-bottom li::after {
        position: absolute;left: 50%; width: calc(100% + 40px);
    }
    .cd-multi-steps.text-top li > *::before, .cd-multi-steps.text-bottom li > *::before {
        content: '';position: absolute;z-index: 1;left: 50%;right: auto;
        -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);-o-transform: translateX(-50%);
        transform: translateX(-50%);height: 12px;width: 12px;border-radius: 50%;background-color: #edeff0;
    }
    .cd-multi-steps.text-top li.visited > *::before,
    .cd-multi-steps.text-top li.current > *::before, .cd-multi-steps.text-bottom li.visited > *::before,
    .cd-multi-steps.text-bottom li.current > *::before {
        background-color: #0074B4;
    }
    .no-touch .cd-multi-steps.text-top a:hover, .no-touch .cd-multi-steps.text-bottom a:hover {
        color: #0074B4;
    }
    .no-touch .cd-multi-steps.text-top a:hover::before, .no-touch .cd-multi-steps.text-bottom a:hover::before {
        box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
    }
    .cd-multi-steps.text-top li::after {bottom: 4px;}
    .cd-multi-steps.text-top li > * {padding-bottom: 20px;}
    .cd-multi-steps.text-top li > *::before {bottom: 0;}
    .cd-multi-steps.text-bottom li::after {top: 3px;}
    .cd-multi-steps.text-bottom li > * {padding-top: 20px;}
    .cd-multi-steps.text-bottom li > *::before {top: 0;}
}
.cd-multi-steps.count li {counter-increment: steps;}
.cd-multi-steps.count li > *::before {content: counter(steps) " - ";}
@media only screen and (min-width: 768px) {
    .cd-multi-steps.text-top.count li > *::before,
    .cd-multi-steps.text-bottom.count li > *::before {
        content: counter(steps);height: 26px;width: 26px;line-height: 26px;font-size: 1.4rem;color: #ffffff;
    }
    .cd-multi-steps.text-top.count li:not(.current) em::before,
    .cd-multi-steps.text-bottom.count li:not(.current) em::before {
        color: #2c3f4c;
    }
    .cd-multi-steps.text-top.count li::after {bottom: 11px;}
    .cd-multi-steps.text-top.count li > * {padding-bottom: 34px;}
    .cd-multi-steps.text-bottom.count li::after {top: 11px;}
    .cd-multi-steps.text-bottom.count li > * {padding-top: 34px;}
}



/*
* SHOW LOGIN CAPTCHA
*/

.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #e0e4e1;
    opacity: 0.7;
    z-index: 9;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

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

.spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
.btn-reload-captcha{
    position: absolute;
    top: 12px;
    right: 10px;
}
.captcha-image{
    padding: 10px;
    background-color: #dadada;
    text-align: center;
    min-height: 55px;
}
.captcha-image span{
    float: left;
}
.no-padding{
    padding: 0;
}
.no-padding-right{
    padding-right: 0;
}
@media (max-width: 980px) {
    .no-padding-right{
        padding: 0;
    }
}
#loading-icon i{
    animation: loading-spin 2s infinite linear;
    font-size: 1.3em;
}
@keyframes loading-spin{
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}