body {
    background-image: url(../images/banner.png);
    background-position:center;
}
.login{
    left:75%;
    transform: translate(-50%,-50%);
    margin: 0;
}
.container-fluid{
    font-size: 16px;
}
.panel{
    border:none;
    box-shadow: none;
}
.bg-darkgray {
    background-color: #fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    color:#01A862;
    border-color:transparent;
    border-bottom:2px solid #01A862;
    font-weight: bold;
}
.nav-tabs>li>a{
    color:#999;
    position: relative;
    padding:10px 0px;
    margin-right:50px;
}
.nav-tabs>li>a:hover{
    color:#01A862;
    background: #fff;
    border-color:transparent;
    border-bottom:1px solid transparent;
}
.panel-body {
    padding: 20px 0 0px;
}
.dx-texteditor.dx-editor-outlined{
    border:0;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
}
.dx-texteditor.dx-state-focused.dx-editor-outlined{
    border-color:#01A862;
}
.dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 20px;
}
.dx-widget{
    font-size: 16px;
    position: relative;
}
#phone-login .dx-item:nth-child(3){
    position: absolute;
    top: 36px;
    right: 0;
}
#phone-login .dx-item:nth-child(3) .dx-button-has-text .dx-button-content{
    padding: 7px 0px 8px;
}
#phone-login .dx-item:nth-child(3) .dx-button-success.dx-button-mode-outlined{
    border-color:transparent;
}
.inptCount{
    position: relative;
}
.inptCount .icon{
    position: absolute;
    top: 4px;
    left:2px;
    z-index: 4;
}
.inptCount .icon svg{
    width:20px;
    height: 20px;
}
.inptCount input{
    padding-left: 30px;
}
.slider_captcha{
    margin-top:8px;
}
.jazea-bottom{
    padding-top:25px;
}
.jazea-bottom .dx-button-has-text .dx-button-content{
    padding:0;
    color:#F75234;
    font-size: 14px;
    position: relative;
    top: -2px;
}
.dx-button-default.dx-button-mode-text.dx-state-hover,.dx-button-default.dx-button-mode-text.dx-state-focused{
    background: #fff;
}
.login-menber{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top:25px;
    margin-bottom: 0;
}
.login-menber .dx-checkbox-has-text .dx-checkbox-text,.login-menber .dx-button-default.dx-button-mode-text{
    color:#666!important;
    font-size: 14px;
}
.login-menber .dx-button-has-text .dx-button-content{
    padding: 0;
}
.dx-checkbox-checked .dx-checkbox-icon{
    color:#01A862;
}
.dx-checkbox.dx-state-hover .dx-checkbox-icon,.dx-checkbox.dx-state-focused .dx-checkbox-icon{
    border-color: #01A862;
}
.dx-button-success.dx-button-mode-contained{
    background-color:#01A862;
}

.inptCount .dx-placeholder{
    left:30px;
}
.codeCount{
    position: relative;
    margin: 25px 0;
}
#password-register .codeCount{
    margin: 15px 0;
}
.eyeIcon{
    position: absolute;
    top: 5px;
    z-index: 4;
    right: 60px;
    cursor: pointer;
    display: block;
}
.eyeIcon.hd{
    display: none;
}
.dx-texteditor-empty .eyeIcon{
    display: none;
}
.codeCount .dx-button{
    position: absolute;
    right: 0;
    bottom: 0;
    border: none;
}
.codeCount .dx-button-mode-outlined.dx-state-hover,.codeCount .dx-button-mode-outlined.dx-state-focused,.codeCount .dx-button-mode-outlined.dx-state-active{
    background: transparent;
}
#phone-captcha,#slider-captcha,.register-menber{
    margin-bottom: 25px;
}
#password-register #phone-captcha,#password-register #slider-captcha,#password-register .register-menber{
    margin-bottom: 15px;
}
.panel{
    margin-bottom: 0;
}
.dx-placeholder:before {
    padding: 7px 0px 8px;
}
.codeInpt input{
    padding-right: 105px!important;
}
.dx-invalid.dx-texteditor.dx-editor-outlined{
    border-color:#F75234;
}
.dx-invalid.dx-texteditor.dx-editor-filled .dx-texteditor-container:after, .dx-invalid.dx-texteditor.dx-editor-underlined .dx-texteditor-container:after, .dx-invalid.dx-texteditor.dx-editor-outlined .dx-texteditor-container:after{
    content:"";
    width:0;
    height: 0;
}
.dx-show-clear-button .dx-icon-clear{
    margin-top:-15px;
}
.dx-show-clear-button.dx-invalid .dx-icon-clear{
    color:#F75234;
}
.dx-invalid .dx-invalid-message.dx-overlay-wrapper{
    visibility: visible;
}
.dx-invalid-message > .dx-overlay-content{
    color:#F75234;
    background: #fff;
    padding: 3px 0;
}

.dx-button-has-text .dx-button-content {
    padding: 7px 0px 8px;
}
.codeInpt .dx-texteditor-buttons-container{
    right:80px;
}
.logo{
    position: fixed;
    left:15%;
    top:10%;
    /* background: url(../images/logo1.png) no-repeat;
    height: 100px;
    width:300px; */
}
.footer{
    position: fixed;
    bottom:5%;
    left:0;
    width:100%;
    text-align: center;
    color: #fff;
}
.m-show{
    display: none;
}
.flex{
    display: flex!important;
}
.flex-between{
    justify-content: space-between;
}
.flex-end{
    justify-content: flex-end;
}
.non-phone{
    position: absolute;
    top: 100%;
    left:0;
    color: #F75234;
    background: #fff;
    padding: 3px 0;
    font-size: 12px;
}
.register-menber a{
    position: relative;
    top: 0px;
    color:#01A862;
    text-decoration: none;
}
.register-menber .dx-invalid-message.dx-overlay .dx-overlay-content{
    transform: translate(0px, 21px)!important;
}
.dx-invalid .dx-checkbox-container .dx-checkbox-icon{
    border:1px solid #F75234;
}
.alert-danger{
    background: none;
    border:none;
    color:#333;
    font-size: 16px;
    padding-top: 0;
    margin-bottom: 0;
}
.dx-toolbar-label{
    display: none;
}
.validation-summary-errors ul{
    list-style: none;
    text-align: center;
    padding: 0;
}
.dx-popup-title.dx-toolbar{
    border:none;
}
.dx-popup-title.dx-toolbar .dx-toolbar-before{
    display: none;
}
.dx-popup-wrapper > .dx-overlay-content,.dx-popup-content{
    height: auto!important;
    box-shadow: none;
}
.dx-popup-content{
    padding-top:0;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background: #fff!important;
}
.align-center{
    align-items: center;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.register-menber label{
    padding-left:0.5rem;
}
.register-menber{
    display: flex;
    align-items: flex-start;
}
.agreeModal .modal-header,.agreeModal .modal-footer{
    background: #f5f5f5;
}
.agreeModal .modal-header{
    border:none;
    position: relative;
}
.modal-header .close{
    position: absolute;
    right: 15px;
    top: 17px;
    font-size: 32px;
}
.agreeCount{
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}
.agreeModal .modal-body ul{
    padding: 0;
    list-style: none;
}
.agree-list{
    margin-bottom: 15px;
}
.font-bold{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}
.list-left{
    width:26px;
    text-align: right;
}
.list-right{
    flex: 1;
}
.list-right .list-left{
    width:15px;
}
.text-center{
    text-align: center;
}
.greenBtn{
    background: #01A862;
    border-color:#01A862;
    color:#fff;
    width:100px;
}
.greenBtn:hover{
    color:#fff;
}

@media screen and (max-width : 1023px) {
    html{
        font-size: 26px;
    }
    body {
        background: none;
        font-size: 1rem;
    }
    .agreeModal .modal-dialog{
        width: 85%;
        margin:3rem auto;
        font-size: 0.8rem;
    }
    .modal-header,.modal-body,.modal-footer{
        padding:0.8rem;
    }
    .modal-header h4,.font-bold{
        font-size: 1rem;
    }
    .agreeCount{
        max-height: calc(100vh - 15rem);
    }
    .modal-header .close{
        top:30px;
    }
    .register-menber .dx-checkbox{
        position: relative;
        top: 8px;
    }
    .login {
        height: auto;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        transform:translate(0,0);
        font-size: 1rem;
    }
    .login .form-container {
        width: 100%;
        height: auto;
        padding: 3rem 2rem 2rem;
        box-shadow: none;
    }
    .r-login{
        min-height: 100vh;
        overflow: auto;
        position: relative;
    }
    .p-show{
        display: none!important;
    }
    .m-show{
        display:block;
    }
    .web-none{
        display: none!important;
    }
    .nav-tabs>li{
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-tabs>li.active{
        display: none;
    }
    .nav-tabs>li>a{
        margin-right:0;
        color:#333;
        border:none;
        padding: 0;
    }
    .nav-tabs{
        border:none;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
        border:none;
        color:#333;
        border:none;
    }
    .dx-widget{
        font-size: 1rem;
    }
    .icon-svg{
        width: 1.2rem;
        height: 1.2rem;
    }
    .inptCount .icon{
        display: none;
    }
    .inptCount input {
        padding-left: 0;
    }
    .inptCount .dx-placeholder {
        left: 0;
        color:#BFBDBD;
    }
    .panel-body{
        padding: 0;
        /* height: calc(100vh - 9rem);
        display: flex;
        justify-content: center;
        align-items: center; */
    }
    .tab-content{
        width:100%;
    }
    .c6,.verify-msg{
        color:#666!important;
    }
    .c6 .dx-button-default.dx-button-mode-text{
        color:#666!important;
    }
    .dx-button-success.dx-button-mode-outlined{
        color:#01A862;
        border-color:#01A862;
    }
    .register-menber .dx-checkbox-text{
        color: #BFBDBD;
    }
    .m-title{
        font-size: 1.7rem;
        margin: 3rem 0;
        color:#01A862;
    }
    .codeCount{
        margin:1.5rem 0;
    }
    #phone-captcha, #slider-captcha, .register-menber{
        margin-bottom: 1.5rem;
    }
    #phone-submit,#button-submit{
        margin-bottom: 1rem;
        height: 2.5rem;
    }
    .dx-button-default.dx-button-mode-text{
        color:#333;
    }
    .dx-button-default.dx-button-mode-text.dx-state-active{
        color:#333;
        background: #fff;
    }
    .dx-overlay-wrapper{
        font-size: 0.8rem;
    }
    .dx-show-clear-button .dx-clear-button-area{
        width:1.5rem;
    }
    .dx-show-clear-button.dx-invalid .dx-icon-clear,.dx-show-clear-button .dx-icon-clear{
        font-size: 1rem;
    }
    .dx-invalid-message > .dx-overlay-content{
        background: transparent;
    }
    .codeInpt input {
        padding-right: 7rem!important;
    }
    .codeInpt .dx-texteditor-buttons-container {
        right: 5.5rem;
    }
    .register-menber .dx-checkbox-text{
        font-size: 0.8rem;
    }
    .register-menber .dx-invalid-message.dx-overlay .dx-overlay-content {
        transform: translate(0px, 0px)!important;
    }
    .register-menber .dx-checkbox-text{
        white-space: nowrap;
    }
}

@media screen and (max-width : 767px){
    html{
        font-size: 16px;
    }
    /* .panel-body{
        height: calc(100vh - 12rem);
    } */
    .modal-header .close{
        top: 20px;
        font-size: 26px;
    }
    .register-menber .dx-checkbox{
        position: relative;
        top: 2px;
    }
    .codeInpt .dx-texteditor-buttons-container {
        right: 5rem;
    }
    .dx-show-clear-button .dx-clear-button-area{
        width:2rem;
    }
    .dx-checkbox-icon{
        width:18px;
        height: 18px;
    }
    .dx-checkbox-checked .dx-checkbox-icon{
        font-size: 12px;
        line-height: 12px;
    }
    .dx-checkbox-checked .dx-checkbox-icon:before{
        margin-top: -6px;
    }
}

@media screen and (max-width : 370px){
    html{
        font-size: 14px;
    }
    /* .panel-body{
        height: calc(100vh - 10rem);
    } */
    .codeInpt .dx-texteditor-buttons-container {
        right: 5.2rem;
    }
    .login .form-container{
        padding: 4rem 3rem 2rem;
    }
    .register-menber .dx-invalid-message.dx-overlay .dx-overlay-content {
        transform: translate(0px, 15px)!important;
    }
    .modal-header .close{
        top: 16px;
        font-size: 22px;
    }
}


