@import url("custom.css");

#acceso{
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  left: 0;
  padding: 80px 0;
  font-family: robotoRegular, sans-serif; font-size: 15px;
  /*background-color: rgb(181, 0, 0);*/
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#828282+0,ffffff+50,828282+100 */
  background: #828282; /* Old browsers */
  background: -moz-linear-gradient(top,  #828282 0%, #ffffff 50%, #828282 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #828282 0%,#ffffff 50%,#828282 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #828282 0%,#ffffff 50%,#828282 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828282', endColorstr='#828282',GradientType=0 ); /* IE6-9 */
}

#acceso.active{
  background: rgb(181, 0, 0);
}

#acceso .secure-zone{
  color: rgb(53, 165, 1);
  font-family: robotoBold, sans-serif;
  font-size: 14px;
}

#acceso .secure-zone .icon-seguro{
  font-size: 18px;
}

#acceso .login-logo-tab{
  position: relative;
  background: rgb(225, 0, 22);
  background-image: url('../images/header-logo.ie.inverse.jpg');
  background-position: right;
  background-repeat: no-repeat;
  margin: 20px 0;
  padding: 10px;
}

#acceso .login-logo-tab:before{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100%;
  background: rgb(225, 0, 22);
  content: '';
  -moz-border-radius-topleft: 45px;
  -webkit-border-top-left-radius: 45px;
  border-top-left-radius: 45px;
}

#acceso form{
  font-family: robotoRegular, sans-serif;
}

#acceso form input::-webkit-outer-spin-button,
#acceso form input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

#acceso form .col-xs-3{
  padding: 0 2px !important;
}

.btn-form{
  background: rgb(188, 13, 13);
  background: -moz-linear-gradient(270deg, rgb(188, 13, 13) 30%, rgb(255, 0, 22) 70%);
  background: -webkit-linear-gradient(270deg, rgb(188, 13, 13) 30%, rgb(255, 0, 22) 70%);
  background: -o-linear-gradient(270deg, rgb(188, 13, 13) 30%, rgb(255, 0, 22) 70%);
  background: -ms-linear-gradient(270deg, rgb(188, 13, 13) 30%, rgb(255, 0, 22) 70%);
  background: linear-gradient(0deg, rgb(188, 13, 13) 30%, rgb(255, 0, 22) 70%);
  border: 0;
  padding: 8px 20px;
}

.btn-form:hover{
  color: #fff;
}

.form-group label{
  font-weight: 200;
}

.false-background{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 50%;
  background-color: rgb(255, 255, 255);
}

/*
 * Manipular con jQuery
*/

.false-background:before{
  position: absolute;
  bottom: 50px;
  left: -180px;
  width: 200px; height: 200px;
  z-index: 999;
}

/*
 *
*/

#acceso form .form-group:before{
  position: absolute;
  margin-top: -5px;
  margin-left: -10px;
  content: '\2022';
  font-size: 1.5em;
  color: #656565;
}

#acceso form .form-group.active:before{
  color: #e30016;
}

h2{
  color: rgb(150, 5, 2);
  font-size: 50px;
  margin-top: 45%;
}

.login-panel{
  background-color: rgb(255, 255, 255);
}

.clave-virtual{
  margin: 30px 0;
}

.clave-virtual .clave-virtual-head .row .col-sm-3 div{
  border-bottom: solid 6px #fff;
}

.clave-virtual .clave-virtual-content button{
  background-color: rgb(250, 250, 250);
  color: rgb(181, 0, 0);
  border: 0;
  width: 50px;
  height: 50px;
  margin: 15px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  font-family: robotoBold, sans-serif;
  font-size: 18px;
  outline: none;
}

#confirmacion{
  background-color: rgb(255, 255, 255);
}

#confirmacion .confirmacion-head{
  width: 100%;
  background-color: rgb(225, 0, 22);
  padding: 10px 0;
  color: #fff;
}

#confirmacion .confirmacion-head{
  font-size: 42px;
}

#confirmacion .confirmacion-content{
  padding: 20px 0;
}
.cleanNumber{
  font-size: 12px;
  cursor: pointer;
}
.cleanNumber1{
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .login-logo-tab:before{
    content: '';
    background-color: transparent !important;
  }

  #acceso{
    background: rgb(255, 255, 255) !important;
  }
}

@media (max-width: 480px) {
  input[type='text']{
    min-width: auto !important;
  }

  #acceso{
    padding: 20px 0;
  }

  .login-logo-tab img{
    width: 260px;
  }

  #acceso form .form-group:before{
    margin-left: 0px;
  }

  .login-form-panel-2 span{
    font-size: 12px;
  }
}