html{
  scroll-behavior: smooth;
}
body{
  font-synthesis: none;
  -moz-font-feature-settings: "kern";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  color: #1d1d1f;
  background-color: white;
  direction: ltr;
  text-align: left;
}

.text-2xs {
  font-size: 12px !important;
}

.jaged {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.vocab-detail {
  font-size: 13px !important;
  line-height: 1.275 !important;
}

.htmx-spinner{
  display:none;
  opacity:0;
  transition: opacity 300ms ease-in;
}
.htmx-request .htmx-spinner{
  display:inline;
  opacity:1;
}
.htmx-request.htmx-spinner{
  display:inline;
  opacity:1;
}

.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  align-items: center;
  padding: 9px 17px;
  border-radius: 9999px;
  font-size:15px;
  font-family: -apple-system, 'Roboto', sans-serif;
  color: #3D3D3D;
  background: #fff;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: all;
  transition-duration: 300ms;
  @media(max-width:750px) {
    font-size:13px;
    padding: 6px 13px;
  }
}

.btn:focus {
  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

.answered {
  clip-path: polygon(25% 0%, 75% 0%, 100% 40%, 100% 100%, 0 100%, 0% 40%);
  background-color: #15803d;
  color: #fff;
  border-radius: .25rem;
}

.not-answered {
  clip-path: polygon(0 0, 100% 0, 100% 60%, 75% 100%, 25% 100%, 0% 60%);
  background-color: #b91c1c;
  color: #fff;
  border-radius: .25rem;
}

.selected{
  border-radius: .25rem;
  background-color: #0369a1 !important;
  color: #fff !important;
  border-radius: .25rem !important;
}

.marked {
  border-radius: 100%;
  background-color: #7e22ce;
  color: #fff;
}

.marked-and-answered {
  border-radius: 100%;
  background-color: #7e22ce;
  color: #fff;
}

.subscript{
  display: none;
}

.selected>.subscript{
  display: none !important;
}

.marked-and-answered>.subscript{
  display: block;
}

.swiper-button-prev::after{
  font-size: 16px;
}
.swiper-button-next::after{
  font-size: 16px;
}