body{
  margin:0;
  color:#e2e2e2;
  background:#2f2f2f;
  font:600 16px/18px 'Open Sans',sans-serif;
}
#messagerLogin {
  font-size: 10pt;
  height: 10px;
}
.contenMessageLogin
{
  background-color: #dc3545 !important;
  padding:5px 5px;
  border-radius:7px;
  width: 100%;
  margin-left:10px;
}
.hr{
  height:2px;
  /*margin:60px 0 50px 0;*/
  width: 100%;
  background:#707070;
}
h2 {
  font-size: 15pt;
  color: #fff;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-logo{
  text-align: center;
  margin: -70px 0 -5% -5%;
}
.login-logo img{
  width: 65%;
}
.login-logop{
  text-align: center;
  margin: 20px 0 -10% -5%;
}
.login-logop img{
  width: 50%;
}

.login-wrap{
  width:100%;
  margin:100%;
  min-height:670px;
  position:relative;
}
.whitelogin
{
    background:#0d569b !important; 
    height:100vh !important;
    color: #fff; 
}

.greenlogin
{
    background:#52ae32 !important; 
    height:100vh !important;
    color: #fff; 
}
.greenwhite
{
    background:#FFF !important; 
    height:100vh !important;
    color: #fff; 
}
.bluewhite
{
    background:#FFF !important; 
    height:100vh !important;
    color: #fff; 
}

.ologgilogin
{
    background:#444 !important; 
    height:100vh !important;
    color: #fff; 
}
.ologgidarkorangelogin
{
    background:#333 !important; 
    height:100vh !important;
    color: #fff; 
}

.login-html{
  width:100%;
  height:100%;
  position:absolute;
  padding:25% 5% 0 15%;
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  transition:all .4s linear;
}
.login-html .sign-up-htm{
  margin: -5% 0 0 0;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
  display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .button-group .button{
  text-transform:capitalize;
}
.login-html .tab{
  font-size:18px;
  margin-right:16px;
  padding: 0 10px 8px 10px;
  margin:0 15px 10px 0;
  display:inline-block;
  border-bottom:3px solid transparent;
  cursor: pointer;
  color: rgb(107, 107, 107);
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
  color:#fff;
}
.login-form{
  min-height:345px;
  position:relative;
  perspective:10000px;
  transform-style:preserve-3d;
  -webkit-transform-style: preserve-3d;
  
}
.login-form .group{
  margin-bottom: 15px;
  border-radius: 8px;
  background:rgba(255,255,255,.1);
  cursor: pointer;
}
.optiongroup{
  padding: 10px 5px !important;
}
.celdPhone{
  padding: 6px 0 6px 10px !important;
  margin-bottom: 5px !important;
}
.celdCodPhone{
  width: 30% !important;
}
.celdPhoneNumber{
  width:66% !important;
  margin-left: 4% !important;
}
.login-form .button-group {
  background:transparent;
  cursor: pointer;
  margin-top: 8px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .button-group .button{
  width:100%;
  color:#fff;
  cursor: pointer;
}
.login-form .button-group .button365{
  width:100%;
  color:#fff;
  cursor: pointer;
}
/*visualsat*/
.login-form .group .input{
  background:transparent;
  padding:5px 20px;
  border: none;
  border-bottom: 2px solid #eee;
  font-size: 12pt;
  width: 100%;
}
.login-form .group input[data-type="password"]{
  -webkit-text-security:circle;
}
.login-form .group .label{
  font-size: 13pt;
  padding-left: 5px;
}
.login-form .button-group .button{
  background:#f38f32;
  border:none;
  padding:20px 20px;
  border-radius:15px;
  font-size: 14pt;
  font-weight: bold;
}

.login-form .button-group .button365{
  background:#6eaa0e;
  border:none;
  padding:20px 20px;
  border-radius:15px;
  font-size: 14pt;
  font-weight: bold;
}
.login-form .button-group .button:hover{
  background:#eee;
  color: #333;
}
.login-form .button-group .button365:hover{
  background:#eee;
  color: #333;
}
.login-form .group label .icon{
  width:15px;
  height:15px;
  border-radius:2px;
  position:relative;
  display:inline-block;
  background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
  content:'';
  width:10px;
  height:2px;
  background:#fff;
  position:absolute;
  transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
  left:3px;
  width:5px;
  bottom:6px;
  transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
  top:6px;
  right:0;
  transform:scale(0) rotate(0);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
  transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
  transform:rotate(0);
}
.sign-in-htm {
  margin: 5px 10px;
  max-width: 85%;
}

.foot-lnk,
.foot-lnk .tab{
  text-align:center;
  color: #fff;
  margin-top: 10px;

}

/* Responsive */
@media screen and (max-width: 1199px) {
	.sign-in-htm {
		max-width: 70%;
    margin: 2% 0 0 15%;
	}
  .login-html{
    padding: 5% 0 0 10%;
  }
  .login-logo img{
    width: 30%;
  }
}

@media screen and (max-width: 1024px) {
	.sign-in-htm {
		max-width: 70%;
	}
  .login-logo img{
    width: 30%;
  }
}
@media screen and (max-width: 991px) {
  .sign-in-htm {
		max-width: 80%;
    margin: 0 0 0 10%;
	}
  .login-logo img{
    width: 30%;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
	.sign-in-htm {
		max-width: 70%;
	}
  .login-logo img{
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
	.sign-in-htm {
    max-width: 75%;
    margin: 0 0 0 12%;
  }
  .login-html{
    padding: 30px 0 0 10px;
  }
  .login-logo img{
    width: 30%;
  }
}
@media screen and (max-width: 575px) {
	.sign-in-htm {
    max-width: 98%;
    margin: 0;
  }
  .login-html{
    padding: 30px 0 0 10px;
  }
  .login-logo img{
    width: 35%;
  }
  .celdPhone{
    margin-bottom: 15px !important;
  }
}