.backgroun-img{
  background: url(../images/img/login.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-x:hidden;
}
.backgroun-img-ygt{
  background: url(../images/img/ygt.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-x:hidden;
}
.im-shadows{
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}
.content-login    { 
  /*margin:20px auto 0; */
  display:block; 
  /*  background:#ddd;*/
  padding:10px 50px 30px;
}
h6 { 
  text-align:center; 
  margin-bottom:40px; 
}
.error
{
  color:red;
  font-size: 12px;
}
.rows{
  border-radius: 4px;
  border: none;
  background-color: #f2f2f2;
  margin-top: 6px;
}
.row-mid {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
 /* .panel{
    border: 2px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    margin-bottom: 0;
    border-color: #147ccb;
  }
  
  
  .gd-text {
    width: 40%;
    font-weight: 600;
    font-size: 14px;
  }
  .gd-input {
    width: 60%;
  }
  .selection {
  }
  
  .input-group        { 
    position:relative; 
    margin-bottom:40px; 
  }
  .input-group > input{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:100%;
    border:none;
    background-color: transparent;
    border: 1px solid #ced4da;
    
  }
  input:focus
  { 

  }

  .input-group >label{
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.3s ease all; 
    -moz-transition:0.3s ease all; 
    -webkit-transition:0.3s ease all;
  }
  
  input:focus ~ label, input:valid ~ label    {
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }
  
  .bar  
  { 
    position:relative; 
    display:block; 
    width:100%; 
  }
  .bar:before, .bar:after   {
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    transition:0.3s ease all; 
    -moz-transition:0.3s ease all; 
    -webkit-transition:0.3s ease all;
  }
  .bar:before {
    left:50%;
    background:linear-gradient(45deg,rgba(15, 0, 224, 1),rgba(157, 172, 200, 0.91)); 
  }
  .bar:after {
    right:50%; 
    background:linear-gradient(45deg,rgba(157, 172, 200, 0.91),rgba(15, 0, 224, 1)); 
  }

  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }
  
  .highlight {
    position:absolute;
    height:60%; 
    width:35%; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  @-webkit-keyframes inputHighlighter {
    from { background:#147ccb; }
    to  { width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
    from { background:#147ccb; }
    to  { width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
    from { background:#147ccb; }
    to  { width:0; background:transparent; }
  }
  */
  @media only screen and (max-width: 640px) {
    h4{
      font-size: 1.3rem
    }
    h6{
      font-size: 0.8rem
    }
  }

  /* --------------------------------    LOGIN STYLE 2  -------------------------------------*/


  .user_card {
    height:auto;
    width: 100%;
    /*margin-top: 20px;*/
    margin-bottom: auto;
    background: #f2f2f2;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;


  }
  .brand_logo_container {
    /*position: absolute;*/
    height: 120px;
    width: 170px;
    border-radius: 50%;
    background: white;
    padding: 10px;
    text-align: center;
    background: transparent;


  }

  .brand_logo {
    height: 100px;
    width: 160px;
    /* margin-top: 15px;*/
    margin-left: -5px;

    border-radius: 50%;


  }

  .form_container {
    margin-top: 200px;
  }
  .login_btn {
    width: 100%;
    background: #147ccb !important;
    color: white !important;
  }
  .login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
  }
  .login_container {
    padding: 0 2rem;
  }
  .input-group-text {
    background: #147ccb !important;
    color: white !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
  }
  .input_user,
  .input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
  }
  .custom-checkbox .custom-control-input{

    border: 1px solid red;
  }
  .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #147ccb !important;
  }