.content-login    { 
    font-family:'Roboto';
    /*   // width:600px; */
    margin:50px auto 0; 
    display:block; 
    /* background:#ddd;*/
    padding:10px 50px 50px;
  }
  h4 { 
    text-align:center; 
    margin-bottom:40px; 
  }
  .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;
  }
  .error
  {
    color:red;
  }
  .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;
  }
  .gd-text {
    width: 40%;
    font-weight: 600;
    font-size: 14px;
  }
  .gd-input {
    width: 60%;
  }
  .selection {
  }
  /* form starting stylings ------------------------------- */
  .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-bottom:1px solid #757575;
    /* text-align: center;*/
  }
  input:focus
  { 
    outline:none;
  }
  /* LABEL ======================================= */
  .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;
  }
  /* active state */
  input:focus ~ label, input:valid ~ label    {
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }
  /* BOTTOM BARS ================================= */
  .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)); 
  }
  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }
  /* HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%; 
    width:35%; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  /* active state */
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  /* ANIMATIONS ================ */
  @-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
    }
  }