/**
 * Voting
 */

.wpt-voting-container {
  background-color: #ffffff88;
  border-radius: 1em;
  padding: 1em;
  box-shadow: 0 0 1em #44444444;
  display: block;
  width: 100%;
  /* margin-bottom: 2em; */
  /* border:  1px solid red; */
}

/*
@media (min-width: 768px) {
  .wpt-voting-container {
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
  }
}
*/

/* .wpt-voting-container .strapline { */
.wpt-voting-container h2 {
  font-size: 18pt;
  text-align: center;
  margin: 0;
}

.wpt-voting-container h3 {
  text-align: center;
  font-size: 16pt;
  margin: 0;
}

.wpt-voting-container .fa-star {
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: yellow;
  -webkit-text-stroke: 1px black;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.wpt-voting {
  display: flex;
  flex-direction: row;
  gap: 1em;
  font-size: 24pt;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.wpt-voting .loader {
  width: 6em;
  height: 6em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  /* opacity:  0.0; */
  /* transition: 0.4s; */
}

.wpt-voting .loader img {
  width: 100%;
  height: 100%;
}

.wpt-voting.working .loader {
  /* opacity:  1.0; */
}

.wpt-voting.working .count {
  opacity: 0.25;
}

.wpt-voting .count {
  display: inline-block;
  text-align: center;
  min-width: 2em;
  transition: 0.3s;
}

.wpt-voting .upvote a {
  color: green;
}

.wpt-voting .downvote a {
  color: darkred;
}

.wpt-voting a {
  transition: 0.3s;
}

.wpt-voting a:hover {
  filter: brightness(1.5);
}

.wpt-voting.working * {
  cursor: wait;
}