meter {
  
  margin: 6px auto;
  width: 50px;
  height: 0.5em;

  /* Applicable only to Firefox */
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
  background: none;
  background-color: rgba(0, 0, 0, 0.1);
}

#changepass {
    display: none;
}

 .password-toggle-icon span.icon {
    position: absolute;
    left: 82%;
    top: 8px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 16px;
    color: #424242;
    fill: #424242;
    background: url(../images/hide-eye.png) 0 0 no-repeat;
    cursor: pointer;

}
.password-toggle-icon span.fa-eye{
    background: url(../images/hide-eye.png) 0 0 no-repeat;
}
.password-toggle-icon span.fa-eye-slash{
    background: url(../images/visible-eye.png) 0 0 no-repeat;
}
.field-strong-password{
    font-size: 14px;
    color: #adadad;
    text-align: right;
}

.login-content{
    display: block;
}
#signin {
    display: block;
}
.field-err{
    color: #ea4b22;
    font-size: 14px;
    text-align: right;
    margin: 0;
}
.cuss_error {
    color: #ea4b22;
    font-size: 15px;
}
.remember-me {
    display: block;
    width: 100%;
    overflow: hidden;

}
.list-strong ul li {
    width: 40%;
    float: left;
    font-size: 14px;
    list-style: circle;
    margin-left: 15px;
}
.remember-me ul li {
    width: 50%;
    float: left;
    font-size: 14px;
}
.r-me{
    text-align: right;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-login {
    margin-bottom: 30px;
    display: block;
    overflow: hidden;
}
.tab-login li {

    text-align: center;
    color: #fff;
    width: 50%;
    float: left;
    background: #000;
    border: solid 0.5px #707070;
    opacity: 0.9;
    box-shadow: 0 1.5px 10px 0 rgba(0, 0, 0, 0.3);
    padding-top: 9px;
    padding-bottom: 10px;
    font-weight: normal;
}
.tab-login li.active {
    background: #fff;
    border: none;
    text-align: center;
    opacity: 1;
    box-shadow: none;
    padding-top: 10px;
}
.tab-login li a {    
    color: #fff;   
    
}
.tab-login li.active a {
    color: #ea4b22;
}

.login-section{
    width:475px;
    float:left;
}

.login-section-topup  {
    width: 600px;
}

.login-content{
    padding: 40px 40px;
}

.login-content.project_summary {
    padding: 40px 40px;
    font-size: 15px;
    display: block;
    overflow: hidden;
}
.login-content.external-comment-popup{
    padding:0 40px 30px;
}
.external-comment-popup .delete_img_sec{
    position:absolute;
    top:0;
    right:0;
}
.external-comment-popup .delete_img_sec a, .uploaded_files li a.remove_image{
    text-indent:-9999px;
    background:url('../../img/front/sprite-icon.png') no-repeat -1482px -1376px;
    float:left;
    width:20px;
    height:20px;
}
.login-section h3{
    /*color:#192530;*/
    /**/
    text-transform:uppercase;
    text-align:center;
    margin:40px 0 26px;
}
.login-section .login-content.external-comment-popup h3{
    font-size:30px;
}
.normal div.input{
    float:left;
    width:100%;
    margin-bottom:24px;
    position:relative;
}
.normal div.input.up-img-pho{
    margin-bottom:10px;
}
.normal div.input label{
    display:block;
    margin:0 0 5px 15px;
    color:#858585;
    
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: -10px;
  bottom: 10px;
  left: 20px;
  font-size: 12px;
  opacity: 1;
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 10px;
  transition: 0.2s ease all;
  font-size: 14px;
}
.normal div.input input,
.normal div.input textarea{
    position: relative;
    background:#fff;
    border: none;
    border-bottom:1px solid #ccc;
    border-radius:6px;
    padding:5px 15px;
    width:363px;
    height:34px;
    color:#4a4a4a;
    font-weight: bold;
    font-size: 16px;
    margin:0;
    outline:none;
}

.normal div.input input[type="text"]:valid, 
.normal div.input input[type="email"]:valid, 
.normal div.input input[type="password"]:valid {
 /* background: url(../images/input-ok.png) top right no-repeat;  
  background-size: contain;*/
}
.normal div.input input[type="text"]:invalid:focus, 
.normal div.input input[type="email"]:invalid:focus, 
.normal div.input input[type="password"]:invalid:focus {
  /*background: url(../images/input-error.png) top right no-repeat;  
  background-size: contain;*/
}
.normal div.input textarea{
    height:100px;
    overflow:auto;
    resize:none;
}
.external-comment-popup .normal div.input textarea{
    height:150px;
} 
.normal.login div.submit,.normal.register div.submit,.normal.editprofile div.submit{
    float:right;
    margin-bottom:20px;
}
.normal div.submit .cancel-btn,
.initial-first-login input,a.term_back,.go_to_reward_page a{
    background:#fff;
    border:1px solid #6b8cad;
    border-radius:6px;
    padding:5px 15px;
    width:395px;
    max-width:162px;
    height:38px;
    color:#33475e;
    text-align:center;
    text-transform:uppercase;
   
    cursor:pointer;
    -webkit-transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
}
.go_to_reward_page{
    margin:28px 0 10px;
}
.go_to_reward_page  a{
    padding:12px 15px;
}
.normal div.submit {
    width: 100%;
}
.normal div.submit .btn-submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
    background: #ffb3a0;
    width: 100%;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ffb3a0 0%, #f47a5b 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffb3a0 0%, #f47a5b 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffb3a0 0%, #f47a5b 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb3a0', endColorstr='#f47a5b', GradientType=1);
    /* IE6-9 */
    background-image: linear-gradient(101deg, #ffb3a0, #f47a5b);

    box-shadow: 0 1.5px 3px 0 #ffb7a5;
    border-width: 0px;
    border-radius: 1px;
    color: #fff;
    padding: 10px;
    margin: 10px 0;
}
.normal div.submit input:hover,
.initial-first-login input:hover,
a.term_back:hover,
.go_to_reward_page a:hover{
    background:#6b8cad;
    color:#fff;
}
a.term_back{
    max-width:60px;
    float:left;
    margin:0 0 30px 30px;
    height:20px;
}
a.forgot-link,
a.forgot-link:link{
    color:#4a4a4a;
    font-size:13px;
    float:left;
    margin:0px 0 0 0px;
    padding:0 0 3px 0px;
    font-weight: bold;
    /*background:url('../../img/front/sprite-icon.png') no-repeat 0px -1588px;*/
}
a.forgot-link:hover{
    color:#5c6d7e;
}

p.forgot-text{
    color:#3d5166;
    
    text-align:center;
    margin-bottom:18px;
}
p.forgot-text.cuss_error {
    color: #ea4b22;
    font-size: 15px;
}
.logsection{
    float:left;
    width:100%;
    border-top:1px solid #5c6d7e;
    padding:30px 0 34px;
}
.logsection_new{
    float:left;
    width:100%;
    
    padding:10px 0 34px;
}

.logsection a.btn-login{
    float:left;
    font-size: 13px;
    border-radius:7px;
    margin-left:18px;
    color:#4a4a4a;
    padding: 12px 9px 12px 40px;
    border:1px solid #ffbaa8;
    width: 40%;    
}
.logsection a.btn-login:hover{
    
    border:1px solid #6b8cad;
}
.logsection .google-icon,
.logsection .facebook-icon{
    background: url(../images/facebook-icon.png) 5px 8px no-repeat;
    /*display: block;*/
    /*overflow: hidden;*/
   
    min-height: 30px;
}
.logsection .google-icon{
    background: url(../images/google-icon.png) 5px 8px no-repeat;
}

.regsection{
    background:#ebedef;
    border-radius:0 0 10px 10px;
    padding:18px 0;
    float:left;
    width:100%;
    text-align:center;
}
.regsection span{
    display:block;
    clear:both;
    font-size:18px;
    color:#e64c3b;
}
.register-btn{
    /*background:url('../../img/front/sprite-icon.png') no-repeat -1476px -608px;*/
    color:#3d5166;
    
    /*padding:4px 0 2px 34px;*/
    padding:6px 0 2px 0;
    display:inline-block;
    text-shadow:1px 1px 1px #94a8bd;
}
.register-btn:active,
.register-btn:hover{
    color:#e94c3c;
}
.register-field{
    float:left;
    width:100%; 
    margin:84px 0 30px;
}
.register-inner{
    width:621px;
    margin:0 auto;
}
.register-inner h2{
    color:#ea4b22;
   font-family: 'AvenirNext-Bold';
    margin:0 0 25px;
}
.normal.register div.input{
    width:291px;
    margin-bottom:15px;
    margin-right:39px;
}
.normal.register div.input.altrow,.normal.editprofile div.input.altrow{
    margin-right:0;
}
.normal.register div.input input,.normal.editprofile div.input input,
.normal.register div.input.textarea textarea{
    width:259px;
}
.normal.register div.input input.small-field{
    width:99px;
    float:left;
    border-radius:6px 0 0 6px;
    border-right:0;
    display: none;
}
.normal.register div.input input.large-field{
    /*width:128px;*/
    float:left;
    /*border-radius:0 6px 6px 0;*/
}
.normal span.req-star{
    width:10px;
    height:10px;
    position:absolute;
    top:18px;
    right:0px;
    background:url('../../img/front/sprite-icon.png') no-repeat -1490px -961px;
}
.normal.register .term-check,.normal.editprofile .term-check{
    float:left;
    margin-top:16px;
    position:relative;
}
.normal.editprofile .term-check{
    margin-top:38px;
}
.normal.editprofile .term-check.prof-terms{
    float:left;
    width:100%;
    margin:0 0 30px;
}
.editprofile .prof-terms .error{
    top:18px;
}
.normal.register .term-check{
    clear:both;
}
.normal.register div.submit input{
    max-width:233px;
}
.register span.password-info{
    top:52px;
}
span.password-info{
    width:94%;
    position:absolute;
    top:75px;
    left:0;
    background:#fff;
    border:1px solid #eee;
    border-radius:5px;
    padding:5px 3%;
    color:#1c1c1c;
    
    z-index:9;
    display:none;
}
span.password-info:before{
    bottom:100%;
    content:url("../../img/front/arrow-icon.png");
    left:24px;
    position:absolute;
    top:-14px;
}
.logsection.reg-section{
    border:0;
    margin-top:29px;
    padding-top:40px;
}
.logsection.reg-section a.f-login{
    margin-left:20px;
}
.checkbox-sec .check-box label,.term-check label a{
    
    color:#3d5166;
    margin:0 0 0 10px;
}
.term-check label a{
    margin-left:0;
    color:#e64c3b;
}
.term-check label a:hover{
    color:#3d5166;
}
.checkbox-sec .check-box{
    margin-left:16px;
}
.checkbox-field,.radio-field{
    background:url('../../img/front/sprite-icon.png') no-repeat -1486px -1106px;
    border:none;
    cursor:pointer;
    display:inline-block;
    float:left;
    height:15px;
    margin:0;
    padding:0;
    vertical-align:middle;
    width:14px;
}
.checkbox-field.checked{
    background-position:-1486px -1171px;
}
.radio-field{
    background-position:-1482px -1758px;
    width:18px;
    height:18px;
}
.radio-field.checked{
    background-position:-1482px -1836px;
}
.checkbox-sec .radio-box label{
    
    color:#535353;
    margin:0 0 0 6px;
}
.checkbox-sec .radio-box.active label{
    color:#33465e;
    font-weight:bold;
}
.checkbox-sec .radio-box{
    margin-bottom:19px;
}
.editprofile-field{
    padding:80px 100px 72px;
    float:left;
}
.editprofile-field h2{
    color:#192530;
    
    text-align:center;
    text-transform:uppercase;
    margin-bottom:40px;
}
.editprofile-field h3{
    color:#486c8c;
    
    text-align:center;
    margin-bottom:32px;
}
.editprofile-sec{
    float:left;
    margin-bottom:50px;
}
.normal.editprofile div.input{
    width:291px;
    margin-bottom:30px;
    margin-right:20px;
}
.normal.editprofile div.input.mob-field{
    width:350px;
}
.normal.editprofile div.input.newsletter-field{
    width:250px;
}
.normal.editprofile div.input input.small-field{
    width:89px;
    float:left;
    border-radius:6px 0 0 6px;
    border-right:0;
}
.normal.editprofile div.input input.large-field{
    width:198px;
    float:left;
    border-radius:0 6px 6px 0;
}
.normal.editprofile div.input .mob-num{
    width:230px;
    float:left;
}
.normal.editprofile div.input .mob-num:first-child{
    width:120px;
}
.normal.editprofile div.input.textarea{
    width:705px;
}
.normal.editprofile div.input textarea{
    width:673px;
    height:64px;
}
.normal.editprofile div.submit.last-field{
    margin-top:63px;
}
.normal.editprofile div.submit input{
    max-width:172px;
}

.register-field{
    float:left;
    width:100%; 
    margin:84px 0 30px;
}

.logsection a.f-login, .logsection a.f-login,  .logsection a.f-login {
    display: inline-block;
    margin: 15px auto 0;
    float: none;
    text-align: left;
}
.error {
    color: #ff0000;
    font-size: 14px;
}



/* Shared */
.loginBtn {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 5px 0;
  padding: 5px 15px 5px 65px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #FFF;
  width: 100%;
  display: block;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
  background-color: #4C69BA;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('../images/icon_facebook.png') 10px 10px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
  color: #FFF;
}


/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;

}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('../images/icon_google.png') 10px 10px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  color: #FFF;
  background: #E74B37;
  background-image: linear-gradient(#E74B37, #db3024);
}



@media (max-width: 767px) {

    .login-content {
        padding: 20px 5px;
    }

    .login-section h3 {
        text-align: left;
        padding: 10px;
    }
    .register-inner{
        width:100%;
        margin:0 auto;
    }
    .login-section-topup,
    .login-section {
        width: 100%;
    }
    .logsection a.btn-login{    
        padding: 12px 40px 12px 10px;
    }
    .logsection a.btn-login span {
        display: none;
    }
    .logsection .google-icon,
    .logsection .facebook-icon{
        background: url(../images/facebook-icon.png) 83px 8px no-repeat;        
        min-height: 30px;
    }
    .logsection .google-icon{
        background: url(../images/google-icon.png) 83px 8px no-repeat;
    }
    .normal div.input input,
    .normal div.input textarea{
        width: 100%;
    }
    .list-strong ul li{
        width: 100%;
    }
}