.login-bg-pic{
    background-image: url('../img/customer-cart.jpg');
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    width: 100%;
}
.member-details-header{font-size: 30px; display: inline-block;margin-top: 0;}
#subtitle{
    font-size: 14px;
    text-align: center;
    color:#cccccc;
}
.gateway-detail{
    background: #032b44;
    border-radius: 0 3px 3px 0;
}
.gateway-page-total{
    margin: 3% 0;
    display: flex;
    margin-top: 90px;
}
.gateway-page-total.blur{
    filter: blur(3px);
}
.gateway-page-total .nav-tabs > li > a{
    border: 0 none;
    padding: 0;
    margin-bottom: 4px;
}
.gateway-page-total li.active .gateways{
    text-shadow: 0 0 1px #000;
    opacity: 1;
}
.gateway-page-total .nav-tabs > li.active > a, .gateway-page-total .nav-tabs > li.active > a:focus, .gateway-page-total  .nav-tabs > li.active > a:hover{
    border: 0 none;
    padding: 0;
}
.gateway-member-detail{}
.gatway-sec {
    border-bottom: 1px solid #545075;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 4px 8px -9px #666478;
}
.gatway-sec > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.gateway-time-remain{
    padding-bottom: 16px;
}

.gatway-sec:last-child{
    border-bottom: none;
    box-shadow: none;
}
.color-title {
    color: #f7a93b;
    text-shadow: 1px 1px 2px #000;
}


.gateway-content-header-pic > img {
    background: #fff none repeat scroll 0 0;
    padding-left: 0;
    width: 67px;
}

.gateway-content-header-sub-pic > span {
    background: #17ab9b none repeat scroll 0 0;
    border-radius: 0 4px 3px 0;
    color: #fff;
    margin-right: -15px;
    padding: 2px 5px;
    position: absolute;
    top: 2px;
    left: 0;
}
.gateway-content-header-sub-pic-2 > span {
    background: #17ab9b none repeat scroll 0 0;
    border-radius: 3px 0 0 3px;
    color: #fff;
    margin-right: -15px;
    padding: 2px 5px;
    position: absolute;
}


.gateway-pay-detail {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px 0 0 3px;
    padding-right: 0 !important;
}

.gateway-form-email .field-icon {
    color: #adadad;
    right: 12px;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: 13px;
    width: 40px;
}
.gateway-detail img#img-id{border-radius: 50%;border: 3px solid #0e103b;width: 200px;height: 200px;}
.gateway-detail img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-top: -15px;
}
@media screen and (max-width: 1700px){
    .gateway-detail .gatway-sec img {
        margin-top: -11px;
        height: 40px;
        width: 40px;
        object-fit: cover;
    }
}
@media screen and (max-width: 1000px){
    .gateway-detail .gatway-sec img {
        margin-top: -6px;
        width: 30px;
        height: 30px;
        object-fit: cover;
    }
    .gateway-detail img#img-id{width: 180px;height: 180px;}

}
@media screen and (max-width: 768px){
    .gateway-detail .gatway-sec img {
        margin-top: 0px;
        width: 20px;
        height: 20px;
        object-fit: cover;
    }
}

.gateway-form-email .focus-icon {
    font-size: 11px;
    padding: 6px 0;
    width: 0;
    height: 34px;
    margin-left: -1px;
    transition: .1s ease;
    font-style: unset;
    visibility: hidden;

}

.gateway-form-email input:focus ~ i.focus-icon{
    visibility: inherit;
    width: 75px ;

}

.gateway-form-email .member-edit-name {
    margin: auto;
    display: table;
    position: relative;
}

.gateway-form-email .form-control {
    border-radius: 3px;
    box-shadow: -1px 1px 2px 0 #eeeeee;
    margin-top: 15px;
    text-align: center;
}


.gateways {
    opacity: 0.3;
    filter: grayscale(1);
}

.active-gateway{
    opacity: 1;
    filter: grayscale(0);
}
.active-gateway-p {
    background: #0fa5f2 none repeat scroll 0 0;
    border-radius: 3px;
    color: #fff;
    padding: 0 3px;
}

.gateway-pay-type {
    display: table;
    margin: auto;
}

.gateway-time-remain .form-control.has-icon {
    background: #00a65a none repeat scroll 0 0;
    border-radius: 0 5px 5px 0;
    cursor: unset;
    float: left;
    width: 80%;
}

.gateway-content-sec {
    /*border-bottom: 1px solid #ecf0f1;*/
    padding: 12px 0;
}
.form-control.has-icon{
    /*text-indent: 20px;*/
    padding-right: 30px;
    font-size: 1em;
}


.getway-hr {
    border-bottom: 1px solid #17ab9b;
    margin-top: -30px;
}
.gateway-content-header-sub-pic {
    margin: 32px 0;
}
.gateway-content-header-sub-pic {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
    width: 111px;
}
.gateway-content-header-sub-pic-2 {
    margin: 40px 0 1px;
}

.gateway-type-h > h3 {
    font-family: 'font-main';
    font-size: 18px;
    text-align: center;
}

.bank-gate {
    position: absolute;
    display: none;
}

.gateway-type-pic label {
    padding: 12px 11px 0;
    text-align: center;
}

.gateway-type-pic p {
    margin-top: 15px;
    padding: 0 3px;
}

.gateway-pay-type {
    padding: 0;
}

.gateway-menu a {
    color: #010101;
    padding: 0 13px;
}
.gateway-menu a:hover {
    color: #f0635d;
}

.gateway-time-remain input {
    color: #fff;
    font-size: 17px;
    margin-bottom: 10px;
}

.getway-user-img > img {
    border-radius: 50%;
    float: left;
    margin-top: -30px;
    width: 100px;
}

.gateway-user-name {
    color: #b3b3b3;
    float: left;
}

.gateway-payment-sec {
    border-radius: 5px;
    box-shadow: 0 0 7px 1px #e6e7e9;
    display: flex;
    width: 80%;
    margin: auto;
}
.gateway-payment-sec:hover .payment-sec-div{
    background:#fff ;
    color: #17ab9b;
}
.gateway-payment-sec:hover {
    box-shadow: 0 0 3px 1px #17ab9b;
    border-radius: 0px;
}
.gateway-payment-sec .btn-pay{
    border: 1px solid #fff;
    padding: 4px 19px;
    border-radius: 2px;
    box-shadow: 0px 2px 4px -1px #444;
    font-size: 15px;
}
.gateway-payment-sec:hover .btn-pay{
    border: 1px solid #17ab9b;
}

.payment-sec-pic {
    text-align: center;
    color: #17ab9b;
    background-color: #fff;
}
.payment-sec-pic i{
    padding: 11px;
    color: #17ab9b;
}
.pad-content{
    padding: 25px;
}
.payment-sec-div {
    background:#17ab9b ;
    color: #fff;
    padding: 15px;
    text-align: center;
}
.payment-sec-div span:last-child {
    margin-right: 2%;
}

.timer-remain-pic {
    left: -5px;
    margin-top: -10px;
    position: absolute;
    width: 55px;
}

.gateway-footer nav {
    bottom: 0;
    margin: 10px 0;
    position: absolute;
}

.gateway-register-befor > a {
    color: #f0635d;
    float: left;
    font-size: 12px;
    margin-top: -5px;
    padding-left: 15px;
}

.btn-success {
    background: #17ab9b none repeat scroll 0 0;
    border-radius: 3px;
    box-shadow: 0 0 2px 0 #555;
    color: #fff;
    margin: 0 15px 0;
    padding: 2px 0;
}

.btn-login-form{
    width: 20%;
    float: left;
}
#amount-my-page{
    background: #eaeaae none repeat scroll 0 0;
    margin: 30px;
    padding: 15px;
    border-radius: 3px;
}
#alert_container{
    background-color: rgba(200, 200, 200, 0.8);
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 10;
}
/*************************media*************************/

@media screen and (max-width: 768px){
    .gateway-page-total{width: 500px;margin-right: 13%;display: inherit;}
    .gatway-sec{padding: 11px 4px;}
    .gatway-sec > div {margin-top: 4%}
    .gateway-payment-sec{display: inherit;text-align: center}
}
@media screen and (max-width: 650px){
    .gateway-page-total{width: 320px;margin-right: 15%}
    .gateway-type-pic {text-align: center;}
    .gateway-time-remain .form-control.has-icon{width: 100%}
}

@media screen and (max-width: 450px){
    .gateway-page-total{width: auto;margin-right: 0}
}
span.error{color: #f00; font-size: 11px;}
#gateway-tab{padding: 8px 0;}
#description{text-align: right;font-size: 15px;}
#description #summary{display: none;}
#description #complete{display: inline-block;}
#description.summ #complete{display: none;}
#description.summ #summary{display: inline-block;}
#description span{cursor:pointer;margin-right: 23px;}
.description-title{color: #bbb;
    font-size: 15px;
    text-align: right;}
#amount-price{color: #f7a93b;font-size: 22px; text-shadow: 1px 1px 2px #000;}
.gatway-sec a{color: #ffffff;
    font-size: 16px;}

.gatway-sec a i{color: #bfb2d4;}
.gatway-sec .key-title{color: #bfb2d4;}


form .btn[type="submit"] {
    margin: 10px 0 10px 50px;
    padding: 10px;
    float: left;
}

#easy_payment-img-container, #gateway-img-container{
    text-align: center;
    margin:0;
    margin: 0 0 -66px;
}
#easy_payment-img, #gateway-img{
    width: 170px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px #032b44;
    position: relative;
    top: -7rem;
    border: 3px solid #0e103b;
    height: 170px;
    object-fit: cover;
}
#payment-img-container,#gateway-container{
    text-align: center;
    margin:0;
    margin: 0 0 -66px;
}
#payment-img{
    width: 170px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px #032b44;
    position: relative;
    top: -7rem;
    border: 3px solid #0e103b;
    height: 170px;
    object-fit: cover;
}
@media screen and (max-width: 768px){
    #easy_payment-img{
        width: 140px;
        height: 140px;
       object-fit: cover;
    }
    #payment-img{
        width: 140px;
        height: 140px;
       object-fit: cover;
    }
}
#member_profile_confirm_alert {
    background-color: rgba(240, 249, 211, 0.73);
    font: 4.1em "font-main",arial;
    height: 100vh;
    padding: 16% 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10;
    text-shadow: 0px 1px 1px #444;
}