﻿/* Bootstrap 4.0.0 Snippet by tonystar VEURE: http://bootsnipp.com/snippets/x8xmR */
/*Code de tonystar: https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.css , https://codepen.io/tonystar/pen/LRdpYZ */
/* Possible que placeholder-shown "http://caniuse.com/#feat=css-placeholder-shown" no suportat per IE 11: */
/* Cal incluir: <link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.1/dist/float-label.min.css"/> OR
   <!-- Bootstrap v4 --> <link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css"/>
    INFO general dels tipus: https://www.npmjs.com/package/float-label-css
*/

.has-float-label {
  position: relative; }
  .has-float-label label {
    position: absolute;
    left: 0;
    top: 0;
    cursor: text;
    font-size: 75%;
    opacity: 1; /*original 1*/
    color: #808080; /*Afegit, color Label damunt del camp*/
    -webkit-transition: all .2s;
            transition: all .2s;
    top: -.5em;
    left: 0.75rem;
    z-index: 3;
    line-height: 1;
    padding: 0 1px; }
    .has-float-label label::after {
      
      content: " ";
      display: block;
      position: absolute;
      background: white;
      height: 2px;
      top: 50%;
      left: -.2em;
      right: -.2em;
      z-index: -1; }
  .has-float-label .form-control::-webkit-input-placeholder {
    opacity: 1;
    /*color:blue; color de Placeholder*/
    -webkit-transition: all .2s;
            transition: all .2s; }
  .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
    opacity: 0; }
  .has-float-label .form-control:placeholder-shown:not(:focus) + label {
    color: #C7C7CD; /*Afegit, color Label dins camp*/
    font-size: 100%; /*original 150*/
    opacity: .8; /*original .5*/
    top: .9em;  /*original .3em*/
    font-weight: normal; /*afegit*/
  }

.input-group .has-float-label {
  display: table-cell; }
  .input-group .has-float-label .form-control {
    border-radius: 0.25rem; }
  .input-group .has-float-label:not(:last-child) .form-control {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0; }
  .input-group .has-float-label:not(:first-child) .form-control {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: -1px; }
