body, html {
  height: 100%;
}

body {
  overflow-y: scroll;
}

@media only screen and (min-width: 768px) {
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;

    background-color: #fff;
    z-index: 900;
  }
}

[v-cloak] {
  display: none;
}

.rotate {
  transform: rotate(40deg) translateY(-2px);
}

.rotate2 {
  transform: rotate(-30deg) translateY(1px);
}

.comment {
  font-size: 90%;
}

.comments {
  max-height: 20em;
  overflow-y: auto;
}

.own {
  color: #777;
}

.icon-button {
  padding-right: 0.8em;
  padding-left: 0.8em;
}

.btn-light {
  border: 1px solid #ced4da;
}

.bg-semi-success {
  background-color: rgba(40, 120, 69, 0.5);
}

.btn-semi-success {
  border: 1px solid rgba(40, 120, 69, 0.5);
  background-color: rgba(40, 120, 69, 0.5);
  color: white;
}

.btn-semi-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 120, 69, .3);
}

.bg-semi-danger {
  background-color: rgba(170, 53, 69, 0.5);
}

.btn-semi-danger {
  border: 1px solid rgba(170, 53, 69, 0.5);
  background-color: rgba(170, 53, 69, 0.5);
  color: white;
}

.btn-semi-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(170, 53, 69, .3);
}

.btn-outline-semi-success {
  border: 1px solid rgba(40, 120, 69, 0.5);
  color: rgba(40, 120, 69, 0.75);
  background-color: white;
}

.btn-outline-semi-success:hover {
  border: 1px solid rgba(40, 120, 69, 0.5);
  background-color: rgba(40, 120, 69, 0.5);
  color: white;
}

.btn-outline-semi-danger {
  border: 1px solid rgba(170, 53, 69, 0.5);
  color: rgba(170, 53, 69, 0.75);
  background-color: white;
}

.btn-outline-semi-danger:hover {
  border: 1px solid rgba(170, 53, 69, 0.5);
  background-color: rgba(170, 53, 69, 0.5);
  color: white;
}

.card {
  border-radius: .5rem;
}

.rating-mm {
  border: 3px solid rgba(220, 53, 69, 0.5);
  border-radius: .5rem;
}

.rating-m {
  border: 3px solid rgba(170, 53, 69, 0.25);
  border-radius: .5rem;
}

.rating-p {
  border: 3px solid rgba(40, 120, 69, 0.3);
  border-radius: .5rem;
}

.rating-pp {
  border: 3px solid rgba(40, 167, 69, 0.6);
  border-radius: .5rem;
}

.rating {
  border: 3px solid rgba(0, 0, 0, 0);
  border-radius: .5rem;
}

button.comments {
  position: relative;
  overflow:visible;
}

.comment-count {
  position: absolute;

  border: 1px solid #666;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;

  color: white;
  background-color: #666;

  top: -11px;
  right: -10px;
  padding-left: 1px;
  padding-right: 0px;
  line-height: 16px;
  font-size: 80%;
}

mark {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  background-color: #ddd;
}

.marked {
  background-color: #ddd;
}

.card-columns {
  column-count: 2;

  widows: 1;
  orphans: 1;
}

@media (max-width: 1000px) {
  .card-columns {
    column-count: 1;
  }
}


/* Loading Animation */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 128px;
  height: 128px;
}
.lds-ellipsis div {
  position: absolute;
  top: 50px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ccc;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 20px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 20px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 60px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 100px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(40px, 0);
  }
}