@import url('variables.css');
/********** FLOATING **********/
  .floating-form { 
    width: 100%;
    margin-right: 2%;
    padding: 5px 0px 0px 10px; 
    /*border:1px solid #000;*/
  }
  .floating-label { 
    position:relative; 
    margin-bottom:20px;
    padding-left: 5px;
    /*border:1px solid yellow;*/
  }
  .floating-input , .floating-select {
    outline:none;
    border:none;
    font-size:12px;
    padding:5px 5px;
    display:block;
    width:100%;
    height:30px;
    text-transform: uppercase;
    color: var(--font-color-secondary);
    background: var(--bg-color-secondary);
    box-shadow: var(--neu-flat-secondary);
  }
  .floating-input:focus , .floating-select:focus, .floating-textarea:focus {
    outline:none;
    border:none;
    color: var(--font-color-secondary);
    background: var(--bg-color-secondary);
    box-shadow: var(--neu-pressed-secondary);
  }
  .form-control:disabled, .form-control[readonly] {
      color: var(--font-color-default);
      background: var(--bg-color-primary);
      box-shadow: var(--neu-flat-primary);
      opacity: 1;
  }
  .floating-label > label {
    color:var(--font-color-secondary); 
    font-size:12px;
    font-weight:bold;
    position:absolute;
    pointer-events:none;
    left:15px;
    top:5px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .floating-label > p {
    color:var(--font-color-secondary); 
    font-size:12px;
    font-weight:bold;
    position:absolute;
    left:15px;
    top:-20px;
  }
  .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
    top:-20px;
    font-size:12px;
    color:var(--font-color-secondary);
  }
  .floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
    top:-20px;
    font-size:12px;
    color:var(--font-color-secondary);
  }
  .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after, .floating-textarea:focus ~ .bar:before, .floating-textarea:focus ~ .bar:after {
    width:50%;
  }

  /* highlighter */
  .highlight {
    position:absolute;
    height:50%; 
    width:100%; 
    top:15%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }

  /* active state */
  .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }

  /* animation */
  @-webkit-keyframes inputHighlighter {
    from { background:var(--font-color-secondary); }
    to  { width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
    from { background:var(--font-color-secondary); }
    to  { width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
    from { background:var(--font-color-secondary); }
    to  { width:0; background:transparent; }
  }
  *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
/********** FLOATING **********/