@font-face {
  font-family: 'Klingon pIqaD HaSta';
  src: url('/fonts/Klingon-pIqaD-HaSta.ttf') format('truetype');
}

.klingon {
  font-family: Constructium, Unifont CSUR, Klingon pIqaD HaSta, Code2000, Horta;
  font-size: 2rem;
}

html * {
  font-family: Helvetica, sans-serif;
}

body {
  color: #666;
}

.main {
  min-height: calc(100vh - 30rem);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

.results-1,
.results-2 {
  padding: 1rem 0;
}


.shadowed {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
  filter: drop-shadow(5px 5px 5px  rgba(0,0,0,0.3));
}

.link-unstyled,
.link-unstyled:hover {
  color: inherit;
  text-decoration: none;
}

.sticky {
  position: sticky;
  z-index: 2;
  top: 0;
}


.cards {
  display: flex;
  flex-wrap: wrap;
}

.card {
  padding: 1.5rem;
  margin: 1rem;
  flex: 1;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  min-width: 20rem;
}

.book-thumb {
  height: 10rem;
}


.aspect-wrapper {
  padding-bottom: 56.25%;
  position: relative;
}

.aspect {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.media {
  width: 100%;
  display: block;
  overflow: hidden;
}

.media-body {
  padding: 1.5rem;
}

.noun {
  color: #5c9258;
}

.adjective {
  color: #885b9a;
}

.verb {
  color: #ad8e57;
}

.top-bar {
  background-color: #3a3a3a;
  color: white;
}

.top-bar a {
  color: #fd5112;
  font-weight: bold;
  text-decoration: underline;
}

.declined-word {
  box-shadow: 0.3rem 0.3rem 1rem #0000003b;
  margin: 1.6rem 0;
  border-radius: 0.5rem;
  position: relative;
}


.declined-word-inner {
  display: flex;
  padding: 2rem;
  align-items: center;
}

.hint {
  width: 100%;
  padding: 0.5rem 1rem;
  background: #f1f1f1;
  color: #9a9a9a;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.example-image-wrapper {
  flex: 1;
  text-align: center;
  margin-right: 2rem;
}

.example-wrapper {
  flex: 3;
}

.example-translation {
  color: #999;
}

.blank {
  background: #596394;
  padding: 0.1rem 0.4rem;
  color: white;
  border-radius: 0.2rem;
  font-weight: normal;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.blank.answered {
  background: #5a9459;
}

.transparent {
  visibility: hidden;
}

.answer {
  position: absolute;
  left: 0.4rem;
  width: 100%;
  text-align: left;
  display: inline-block;
}

.hidden {
  display: none;
}


.mt1 {
  margin-top: 1rem;
}

.mt2 {
  margin-top: 2rem;
}

[data-case] {
  background-color: #e4e4e4;
  position: relative;
}

[data-case*='nominative'] {
  background-color: #fff0c2;
}

[data-case*='genitive'] {
  background-color: #e6ffc2;
}

[data-case*='dative'] {
  background-color: #c2f3ff;
}

[data-case*='accusative'] {
  background-color: #ffd6d6;
}

[data-case*='instrumental'] {
  background-color: #d0f7f3;
}

[data-case*='prepositional'] {
  background-color: #dbe4fb;
}

[data-case*='locative'] {
  background-color: #fac2ff;
}

.popup {
  padding: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  background: white;
  top: 1.2rem;
  left: 0;
  z-index: 1;
}

#legend div {
  display: inline-block;
  padding: 0 0.5rem;
}

#analyzed {
  overflow: visible;
}

.levelPreA1,
[data-level='PreA1'],
[data-hover-level='PreA1']:hover,
[data-hover-level='PreA1'].saved {
  color: #B51700 !important;
}


.levelA1,
[data-level='A1'],
[data-hover-level='A1']:hover,
[data-hover-level='A1'].saved {
  color: #0076BA !important;
}

.levelA2,
[data-level='A2'],
[data-hover-level='A2']:hover,
[data-hover-level='A2'].saved {
  color: #00882B !important;
}

.levelB1,
[data-level='B1'],
[data-hover-level='B1']:hover,
[data-hover-level='B1'].saved {
  color: #6A348A !important;
}

.levelB2,
[data-level='B2'],
[data-hover-level='B2']:hover,
[data-hover-level='B2'].saved {
  color: #5B0516 !important;
}

.levelC1,
[data-level='C1'],
[data-hover-level='C1']:hover,
[data-hover-level='C1'].saved {
  color: #011B3C !important;
}

.levelC2,
[data-level='C2'],
[data-hover-level='C2']:hover,
[data-hover-level='C2'].saved {
  color: #0f575c !important;
}

.leveloutside,
[data-level='outside'],
[data-hover-level='outside']:hover,
[data-hover-level='outside'].saved {
  color: #c59f94 !important;
}

.bg-levelPreA1,
[data-bg-level='PreA1'] {
  background-color: #B51700 !important;
  color: white !important;
}

.bg-levelA1,
[data-bg-level='A1'] {
  background-color: #0076BA !important;
  color: white !important;
}

.bg-levelA2,
[data-bg-level='A2'] {
  background-color: #00882B !important;
  color: white !important;
}

.bg-levelB1,
[data-bg-level='B1'] {
  background-color: #6A348A !important;
  color: white !important;
}

.bg-levelB2,
[data-bg-level='B2'] {
  background-color: #5B0516 !important;
  color: white !important;
}

.bg-levelC1,
[data-bg-level='C1'] {
  background-color: #011B3C !important;
  color: white !important;
}

.bg-levelC2,
[data-bg-level='C2'] {
  background-color: #035F57 !important;
  color: white !important;
}

.bg-leveloutside,
[data-bg-level='outside'] {
  background-color: #c59f94 !important;
  color: white !important;
}


.l2-zh .level1,
.l2-zh [data-level='1'],
.l2-zh [data-hover-level='1']:hover,
.l2-zh [data-hover-level='1'].saved {
  color: #f8b51e !important;
}

.l2-zh .level2,
.l2-zh [data-level='2'],
.l2-zh [data-hover-level='2']:hover,
.l2-zh [data-hover-level='2'].saved {
  color: #267f94 !important;
}

.l2-zh .level3,
.l2-zh [data-level='3'],
.l2-zh [data-hover-level='3']:hover,
.l2-zh [data-hover-level='3'].saved {
  color: #fd4f1c !important;
}

.l2-zh .level4,
.l2-zh [data-level='4'],
.l2-zh [data-hover-level='4']:hover,
.l2-zh [data-hover-level='4'].saved {
  color: #bb1718 !important;
}

.l2-zh .level5,
.l2-zh [data-level='5'],
.l2-zh [data-hover-level='5']:hover,
.l2-zh [data-hover-level='5'].saved {
  color: #1b3e76 !important;
}

.l2-zh .level6,
.l2-zh [data-level='6'],
.l2-zh [data-hover-level='6']:hover,
.l2-zh [data-hover-level='6'].saved {
  color: #6a3669 !important;
}

.l2-zh .leveloutside,
.l2-zh [data-level='outside'],
.l2-zh [data-hover-level='outside']:hover,
.l2-zh [data-hover-level='outside'].saved {
  color: #c59f94 !important;
}

.l2-zh .bg-level1,
.l2-zh [data-bg-level='1'] {
  background-color: #f8b51e !important;
  color: white !important;
}

.l2-zh .bg-level2,
.l2-zh [data-bg-level='2'] {
  background-color: #267f94 !important;
  color: white !important;
}

.l2-zh .bg-level3,
.l2-zh [data-bg-level='3'] {
  background-color: #fd4f1c !important;
  color: white !important;
}

.l2-zh .bg-level4,
.l2-zh [data-bg-level='4'] {
  background-color: #bb1718 !important;
  color: white !important;
}

.l2-zh .bg-level5,
.l2-zh [data-bg-level='5'] {
  background-color: #1b3e76 !important;
  color: white !important;
}

.l2-zh .bg-level6,
.l2-zh [data-bg-level='6'] {
  background-color: #6a3669 !important;
  color: white !important;
}

.l2-zh .bg-leveloutside,
.l2-zh [data-bg-level='outside'] {
  background-color: #c59f94 !important;
  color: white !important;
}

.widget-title {
  display: block;
  text-align: center;
  font-weight: bold;
  color: white;
  background: #4e4e4e;
  padding: 0.2rem 1rem;
}


.logo-small {
  max-width: 8rem;
  max-height: 4rem;
}


.highlight {
  font-weight: bold;
}


.btn-medium {
  display: inline-block;
  border: none;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
}

.btn-primary {
  background-color: #fd4f1c;
  border-color: #fd4f1c;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #ce3d11;
  border-color: #ce3d11;
}

.btn-gray {
  background: #efefef;
  color: #8e8e8e;
}

.btn-gray:hover {
  color: white;
  text-decoration: none;
  background: #989898;
}

ul.collapsed li:nth-child(n+5) {
  display: none;
}

ul.collapse-4.collapsed li:nth-child(-n+4) {
  display: inherit;
}

ul.collapse-5.collapsed li:nth-child(-n+5) {
  display: inherit;
}

ul.collapse-6.collapsed li:nth-child(-n+6) {
  display: inherit;
}

ul.collapse-7.collapsed li:nth-child(-n+7) {
  display: inherit;
}

ul.collapse-8.collapsed li:nth-child(-n+8) {
  display: inherit;
}

ul.collapse-9.collapsed li:nth-child(-n+9) {
  display: inherit;
}

ul.collapse-10.collapsed li:nth-child(-n+10) {
  display: inherit !important;
}

.booklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.booklist-item {
  flex: 1;
  min-width: 10rem;
  margin: 1rem;
  border-radius: 0.3rem;
}

.booklist-item-thumb {
  width: 5rem;
  height: calc(5rem * 1.33);
  display: inline-block;
}

.big-word {
  font-size: 3rem;
  font-weight: bold;
}


#zerotohero:not(.show-simplified) .simplified,
#zerotohero:not(.show-traditional) .traditional {
  display: none;
}

.btn-small {
  color: #a7a7a7;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.2rem;
  background: #f3f3f3;
  position: relative;
  margin: 0.2rem;
  display: inline-block;
  bottom: 0.2rem;
  border: none;
}

.btn-small:hover {
  background-color: #b5b5b5;
  text-decoration: none;
  color: #868686;
}

.btn-small img {
  height: 0.9rem;
  margin-bottom: 0.2rem;
  filter: opacity(0.3);
}

.article {
  list-style: none;
  margin-bottom: 1rem;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  overflow: hidden;
}

.article-title {
  border-bottom: 1px solid #ececec;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  color: #fd4f1c;
}

.article-list-item .article-body {
  font-size: 1rem;
}

.article-list-item.collapsed .article-body {
  max-height: 10rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.article-list-item a {
  color: inherit;
}

.article-list-item a:hover {
  color: inherit;
  text-decoration: none;
}

.article-body img {
  display: none;
}

.btn-default {
  background: #cecece;
  color: white;
}

.btn-default:hover {
  background: #fd4f1c;
  color: white;
}

.list-group-item.active {
  background-color: #fd4f1c;
  border-color: #fd4f1c;
}

.list-group-item.active:hover {
  color: white;
}

.foreground {
  z-index: 2;
  position: relative;
}

.img-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coupon-code {
  background-color: white;
  font-size: 1.2em;
  color: #fd4f1c;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
}