﻿   
        @import url('https://fonts.googleapis.com/css?family=Numans');
        html, body
        {
            background-image: url('../Imagenes/Selector_fondo_login.png');
            background-size: cover;
            background-repeat: no-repeat;
            height: 100%;
            font-family: 'Calibri' , sans-serif;
        }
        
        .body2
        {
            background-image: url('../Imagenes/Selector_background.png');
            background-size: cover;
            background-repeat: no-repeat;
            height: 100%;
            font-family: 'Calibri' , sans-serif;
        }
::placeholder { /* Firefox, Chrome, Opera */ 
    color: white; 
} 
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: white; 
} 
  
::-ms-input-placeholder { /* Microsoft Edge */ 
    color: white; 
} 
        .container
        {
            height: 100%;
            align-content: center;
        }
        .card
        {
            height: 80%;
            margin-top: 30px;
            margin-bottom: 10px;
            width: 80%;
            background-color: rgba(239,239,239,0.0) !important;
            border: none;
        }
        .social_icon span
        {
            font-size: 60px;
            margin-left: 10px;
            color: #FFC312;
        }
        .social_icon span:hover
        {
            color: white;
            cursor: pointer;
        }
        
        .social_icon
        {
            position: absolute;
            right: 20px;
            top: -45px;
        }
       .card-header {
            padding: .75rem 1.25rem;
            margin-bottom: 0;
            background-color: rgba(0,0,0,.0);
            border-bottom: 0px solid rgba(0,0,0,.0);
        }
        
        .card-header h3{
            color: #FFFFFF;
            font-size: 14px;
            font-weight: bold;
        }

        .input-group-prepend span
        {
            width: 50px;
            background-color: #FFC312;
            color: black;
            border: 0 !important;
        }
        input:focus
        {
            outline: 0 0 0 0 !important;
            box-shadow: 0 0 0 0 !important;
            
        }
        .remember
        {
            color: white;
        }
        .remember input
        {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-right: 5px;
            
        }
        .login_btn
        {
            color: #00669C;
            font-weight: bold;
            background-color: #A7FFFE;
            
            border-color: #87F6F2;
            border-radius:50px;
            padding-left: 30%;
            padding-right: 30%;
            
        }
        .login_btn:hover
        {
            color: #ffffff;
            background-color: #00669C;
            border-color: #00669C;
        }
        .links
        {
            color: white;
        }
        .links a
        {
            margin-left: 4px;
        }
   

  
 .input100 {
    font-size: 12px;
    color: #ffffff;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 30px;
    background: transparent;
    /* padding: 0 7px 0 43px; */
    text-align: justify;
}
.input100:-webkit-autofill,
.input100:-webkit-autofill:hover, 
.input100:-webkit-autofill:focus, 
.input100:-webkit-autofill:active  {
  transition: background-color 5000s;
  -webkit-text-fill-color: #fff !important;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7f7f7f;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.focus-input100::after {
  font-family: "FontAwesome";
  content: "\f007";
  color: #ffffff;
  font-size: 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: left;
  justify-content: left;
  position: absolute;
  height: calc(100% - 20px);
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-top: 3px;
}

.focus-input100.password::after {
  font-family: "FontAwesome";
  content: "\f023";
  color: #ffffff;
  font-size: 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: left;
  justify-content: left;
  position: absolute;
  height: calc(100% - 20px);
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-top: 3px;
  
}

input {
  outline: none;
  border: none;
  border-bottom: 1px solid white;
}  vertical-align: middle;

   
