/**
* 1. The `reverse` animation direction plays the animation backwards
*    which makes it start at the stroke offset 100 which means displaying
*    no stroke at all and animating it to the value defined in the SVG
*    via the inline `stroke-dashoffset` attribute.
* 2. Rotate by -90 degree to make the starting point of the
*    stroke the top of the circle.
* 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
*    and Edge, use the transform attribute directly on the SVG element as a
* .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
*/

#percent::after {
  content: "%";
}

.circle-chart {
  zoom: 0.5;
  position: absolute;
  top: 1%;
  left: 1%;
  opacity: .9;
}

.circle-chart__percent {
  font-family: Kanit;
  font-size: 15px;
  text-anchor: middle;
  alignment-baseline: central;
}

.circle-chart__circle {
  animation: circle-chart-fill 2s reverse;
  /* 1 */
  transform: rotate(-90deg);
  /* 2, 3 */
  transform-origin: center;
  /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to {
    stroke: hsl(0, 91%, 37%);
    stroke-dasharray: 0 100;
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h3 {
  text-align: center;
  margin-top: 10px;
}

.card {
  margin-top: 10px;
  /*width: 18rem;
   display: inline-grid; */
}

.card a {
  position: relative;
}

.card-title {
  position: absolute;
  max-width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  color: #fff;
  bottom: 0px;
  margin-bottom: 10px;
  background-color: #00000052;
  padding-bottom: 2px;
  /*
  border-top: 0.5px solid rgba(0, 0, 0, .25);
  border-right: 0.5px solid rgba(0, 0, 0, .25);
  border-bottom: 0.5px solid rgba(0, 0, 0, .25);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  */
}

.card-body {
  padding: 0.5em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-column-gap: 1em;
  justify-content: space-evenly;
  padding: 0px 15px;
}

.small-text {
  font-size: 75%;
}

body {
  padding: inherit 10px;
}

.form-control {
      padding: .375rem .75rem;
}

.btn {
      padding: .375rem .75rem;
}

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 7px;
  color: rgba(123, 123, 123 , .5);
  font-size: 1.4em;
}

.input-group-append {
  margin-left: -20px;
}