.cards-shadown.cards-hover {
}

/* -------------------------------- Fancy Line ---------------------------------------- */

hr.fancy {
  border: 0;
  margin: 10px 0;
  height: 1px;
  position: relative;
  top: 5px;
  color: #000;
  opacity: .8;
  background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,50%,0.2) 10%, hsla(0,0%,50%,0.5) 40%, hsla(0,0%,50%,.5) 60%, hsla(0,0%,50%,0.2) 90%, hsla(0,0%,0%,0) 100%);
  background: -moz-linear-gradient(left, hsla(0,0%,0%,0) 1%, hsla(0,0%,0%,.5) 35%, hsla(0,0%,0%,.5) 65%, hsla(0,0%,0%,0) 99%);
  background: -ms-linear-gradient(left, hsla(0,0%,0%,0) 1%, hsla(0,0%,0%,.5) 35%, hsla(0,0%,0%,.5) 65%, hsla(0,0%,0%,0) 99%);
  background: -o-linear-gradient(left, hsla(0,0%,0%,0) 1%, hsla(0,0%,0%,.5) 35%, hsla(0,0%,0%,.5) 65%, hsla(0,0%,0%,0) 99%);
  background: linear-gradient(left, hsla(0,0%,0%,0) 1%, hsla(0,0%,0%,.5) 35%, hsla(0,0%,0%,.5) 65%, hsla(0,0%,0%,0) 99%);
}

hr.fancy.light {
  color: #fff;
  background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 1%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 65%, hsla(0,0%,0%,0) 99%);
  background: -moz-linear-gradient(left, hsla(0,0%,0%,0) 1%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 65%, hsla(0,0%,0%,0) 99%);
  background: -ms-linear-gradient(left, hsla(0,0%,0%,0) 1%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 65%, hsla(0,0%,0%,0) 99%);
  background: -o-linear-gradient(left, hsla(0,0%,0%,0) 1%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 65%, hsla(0,0%,0%,0) 99%);
  background: linear-gradient(left, hsla(0,0%,0%,0) 1%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 65%, hsla(0,0%,0%,0) 99%);
}

/* -------------------------- Cards ---------------------------------------- */

.card {
  margin: 20px 10px;
  cursor: pointer;
}

.card-body {
  padding: 5px 10px;
}

/* -------------------------- floating labels ---------------------------------------- */

.floating-label {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  z-index: 1500;
}

.floating-label-field {
  z-index: 2000;
  padding: .8em;
  transition: border-color .25s ease-in-out;
  color: rgba(20, 20, 20, .75);
  border: 1px solid rgba(20, 20, 20, .25);
  border-radius: 3px;
  background-color: white;
}

.floating-label-field:focus {
  outline: 0;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.floating-label-field::placeholder:not(:placeholder-shown) {
  color: rgba(20, 20, 20, .45);
}

.floating-label, .floating-label-field {
  font: inherit;
  line-height: 0;
  display: block;
  width: 100%;
}

.floating-label-field, .floating-label-wrap {
  position: relative;
}

.floating-label-field + .floating-label {
  position: absolute;
  top: 7px;
  left: 3px;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: .65em;
  transition: transform .35s, opacity .35s, padding .35s ease-in-out;
  transform-origin: 0 0;
  color: rgba(20, 20, 20, .4);
}

.floating-label-field.transparent + .floating-label {
  color: unset;
}

.floating-label-field:focus, .floating-label-field:not(:placeholder-shown) {
  border-color: rgba(20, 20, 20, .35);
}

.floating-label-field:focus + .floating-label, .floating-label-field:not(:placeholder-shown) + .floating-label {
  z-index: 2500;
  padding: 10px 5px;
  transform: translate(5px, -17px) scale(.9);
  color: white background-color: transparent;
}

.floating-label-field.transparent:focus + .floating-label, .floating-label-field.transparent:not(:placeholder-shown) + .floating-label {
  background: linear-gradient(to top, rgb(52, 52, 52) 0%, rgb(49, 49, 49) 40%, rgba(49, 49, 49, 0) 100%)!important;
  color: unset;
}

.floating-label-field:not(textarea) {
  max-height: 32px;
}