/*
 * Just some example styling to get you going...
 * Styling is done with Bootstrap 4 in mind, as that
 * is used in the dev area. Play around to your hearts
 * content <3
 */
/*
 * This should help with customisation...
 */
.char-count-field {
  padding-right: 1.6rem !important;
}

.cc-count {
  /*display: block;
  float: right;
  text-align: right;*/
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  margin-right: 5px;
  margin-top: -1.25rem;
  transition: color 0.2s ease-in-out;
  font-size: 12px;
}

.cc-count.cc-is-empty {
  color: #BBB !important;
}

.cc-count.cc-is-fine {
  color: #BBB !important;
}

.cc-count.cc-is-warning {
  color: #FFC107 !important;
}

.cc-count.cc-is-danger {
  color: #DC3545 !important;
}

.cc-count.cc-is-expended {
  color: #FFFFFF !important;
  background-color: #DC3545 !important;
  border-radius: 2px;
  padding: 2px;
  line-height: 1;
  margin-top: 4px;
}

/*
 * The below is just for the github corner on the GH page, ignore this
 * Credit goes to https://github.com/tholman/github-corners
 */
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 60% {
    transform: rotate(-25deg);
  }
  40%, 80% {
    transform: rotate(10deg);
  }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}