/* Chisato */
.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  /*margin: 1em auto 0.6em;*/
  margin: 0px;
  /*max-width: 350px;*/
  /*width: calc(100% - 2em);*/
  width: 100%;
  vertical-align: top;
}

.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 4px;
  background: #f0f0f0;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none; /* for box shadows to show on iOS */
  appearance: none;
}

.input__field:focus {
  outline: none;
}

.input__label {
  left: 0;
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #444;
  font-weight: bold;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  padding: 1.6em 0;
  width: 100%;
}

.input--chisato {
  padding-top: 1em;
  margin-top: 10px;
}

.input__field--chisato {
  width: 100%;
  padding: 0.8em 0.5em;
  background: #ffffff;
  border: 2px solid #b0b0b0;
  color: #666666;
  -webkit-transition: border-color 0.25s;
  transition: border-color 0.25s;
}

.input__label--chisato {
  width: 100%;
  position: absolute;
  top: -15px;
  text-align: left;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 3em, 0);
  transform: translate3d(0, 3em, 0);
}

.input__label-content--chisato {
  padding: 0 1em;
  font-weight: 400;
  color: #a0a0a0;
}

.input__label-content--chisato::after {
  content: attr(data-content);
  position: absolute;
  top: -180%;
  left: 0;
  color: #cc0000;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "open sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;

}

.input__field--chisato:focus,
.input--filled .input__field--chisato {
  border-color: #cc0000;
}

.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
  -webkit-animation: anim-chisato-1 0.25s forwards;
  animation: anim-chisato-1 0.25s forwards;
}

.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
  -webkit-animation: anim-chisato-2 0.25s forwards ease-in;
  animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
  0%, 70% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
  }
  71%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes anim-chisato-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  70%, 71% {
    -webkit-transform: translate3d(0, 125%, 0);
    transform: translate3d(0, 125%, 0);
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
  }
  100% {
    color: transparent;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}

@keyframes anim-chisato-1 {
  0%, 70% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
  }
  71%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-chisato-2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  70%, 71% {
    -webkit-transform: translate3d(0, 125%, 0);
    transform: translate3d(0, 125%, 0);
    opacity: 0;
    -webkit-animation-timing-function: ease-out;
  }
  100% {
    color: transparent;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}

}
.buttom-sing {
  width: 50%;
  margin: 30px auto; 
}
.buttom-sing a {
  width: 150px;
  background-color: #cc0000;
  color: #ffffff;
  display: block;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-top: 20px;
}
.buttom-sing a:hover {
  color: #ffffff;
}
.originalChords {
  background-color: #d0d0d0;
  padding: 10px;
}
.transposedChordsTitle {
  margin-bottom: 10px;	
}
.chordListCalculated {
  padding: 8px 10px;
  border-bottom: 1px solid #d9d9d9;	
}
.chordListCalculated:last-child {
  border-bottom: 0;	
}
.posicionCapo {
  font-weight: 700;
  margin-right: 2px;
  /*background-color: #ffffff;
  margin: 4px 0;*/	
}