html {
  width: 100%;
  height: 1px;
  min-height: 100%;
  background-color: #212121;
  color: #FAFAFA;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
}
.zhengfeng {
  font-family: 'Zhengfeng' !important;
  font-size: 20px;
}
body {
  opacity: 1;
  width: 100%;
  height: 1px;
  min-height: 100%;
  margin: 0;
}
a {
  color: #448AFF;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}
ul {
  margin-bottom: 0;
}
button {
  all: unset;
}
input,
select {
  font-family: unset;
  font-size: unset;
}
.inline_flex {
  display: inline-flex;
}
.font_size_18 {
  font-size: 18px;
}
.navbar {
  padding: 10px 10px 34px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.navbar_links_in_bar {
  display: flex;
}
.navbar_links_in_hamburger {
  display: none;
}

.logo_title_wrapper {
  display: flex;
  flex-direction: row;
  font-weight: 900;
  font-size: 38px;
  line-height: 34px;
  height: 38px;
  justify-content: center;
  max-width: 100%;
  text-align: center;
}
.logo {
  cursor: pointer;
  text-decoration: none;
  color: #FAFAFA;
}
.logo:hover {
  text-decoration: none;
}
.navbar_links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  gap: 18px;
  align-items: center;
}
#navbar_hamburger {
  position: relative;
}

#navbar_hamburger_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px #424242 solid;
  border-radius: 8px;
  padding: 6px;
  background-color: #252525;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
#navbar_hamburger_icon:hover {
  background-color: #424242;
}
#navbar_hamburger_menu {
  position: absolute;
  display: none;
  flex-direction: column;
  top: 47px;
  text-align: left;
  padding: 10px;
  background-color: #252525;
  border-radius: 10px;
  gap: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
  right: 0;
  z-index: 20;
  border: 1px #424242 solid;
  font-size: 18px;
  min-width: 200px;
}

.discord_login {
  background-color: #5865f2;
  color: #FAFAFA;
  text-decoration: none;
  padding: 6px 12px;
  font-weight: 900;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.discord_login img {
  width: 24px;
}
.discord_login:hover {
  text-decoration: none;
}


.correct {
  background-color: #69F0AE !important;
  color: #69F0AE
}
.flex_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mainspace {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 12px 46px 12px;
  align-items: center;
  min-height: calc(100% - 128px);
}
#quiz_mainspace {
  min-height: calc(100% - 24px);
  padding: 12px;
}
#quiz_menu_wrapper {
  position: absolute;
  right: 17px;
  top: 17px;
  
  z-index: 20;
}
.coin_and_menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 22px;
  width: auto;
  background-color: rgba(0,0,0,0.4);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 20;
}
.coin_and_menu:hover {
  background-color: rgba(0,0,0,1);
}
.coin_and_menu:hover > #open_quiz_menu {
  opacity: 1;
}
.coin_count_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
#open_quiz_menu {
  width: 22px;
  height: auto;
  border-radius: 7px;
  padding: 6px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
}

#quiz_menu {
  position: absolute;
  width: 250px;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  background-color: #212121;
  padding: 10px;
  border-radius: 10px;
  z-index: -1;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  gap: 14px;
}
#quiz_menu {
  display: none;
}

.quit {
  text-align: center;
  color: #ff5252;
  cursor: pointer;
}

.bought_current_girl,
.buy_current_girl {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 22px;
  width: auto;
  background-color: rgba(0,0,0,.4);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  top: 44px;
  left: 5px;
  opacity: 0;
  z-index: 5
}
.buy_current_girl:hover {
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: rgba(0,0,0,1);
}
.buy_current_girl span,
.bought_current_girl span {
  line-height: 11px;
  height: 14px;
}

.bought_current_girl {
  cursor:auto;
  z-index: 0
}

.deck_select_row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}


.content {
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  height: 100%;
  max-height: 100%;
  position: relative;
  flex-grow: 1;
}
.wide_gap {
  gap: 34px;
}
.dekiru_nai {
  font-size: 126px;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  line-height: 132px;
  height: 148px;
}
.title {
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  font-size: 36px;
  line-height: 38px;
  height: 42px
}
.sub_header {
  font-weight: 900;
  font-size: 30px;
}
.explanation {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.rules {
  padding: 0 0 0 34px;
}
.button {
  background-color: #448AFF;
  
  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
  border-radius: 10px;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  font-weight: 900;
  cursor: pointer;
  color: #212121;
}
.button:hover {
  text-decoration: none !important;
  box-shadow: 0 0 9px rgba(68, 138, 255, 0.32), 0 0px 6px rgba(68, 138, 255, 0.44);
}
.button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.link_section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.link_section_header_bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header_select_wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 14px;
  align-items: center;
}
.header_select_wrapper strong {
  font-size: 22px;
  white-space: nowrap;
}

.open_in_new_tab {
  color: #FAFAFA;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.open_in_new_tab img {
  width: 18px;
  position: relative;
  top: 1px;
}
.start_challenge_section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.start_challenge_wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#start_challenge {
  cursor: pointer;
}
.text_input {
  font-weight: 500;
  font-size: 20px;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  width: calc(100% - 32px);
  text-align: center;
  
  background-color: #FAFAFA;
  color: #212121;
}
.text_align_left {
  text-align: left;
}
#start_challenge_copy {
  position: absolute;
  right: 8px;
  height: 26px;
  cursor: pointer;
  background-color: #FAFAFA;
}


.privacy_warning {
  text-align: center;
}

#vocab_question_info {
  width: 100%;
}
.hi_moe_mode .vocab_question_info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
#vocab_question {
  font-weight: 500;
  font-size: 125px;
  height: 232px;
  cursor: pointer;
  unicode-bidi:bidi-override;
  
  text-align: center;

  overflow: hidden;
  line-height: 116px;
  height: 130px;
}
.challenge_question {
 /* direction: rtl;*/
  -webkit-user-select: none !important; /* Safari */
  -ms-user-select: none !important; /* IE 10 and IE 11 */
  user-select: none !important; /* Standard syntax */
}
.moe_mode #vocab_question {
  padding: 0
}
#vocab_reading {
  opacity: 0;
  text-align: center;
  font-size: 34px;
  padding: 12px 0 0;
}

#vocab_meaning {
  opacity: 0;
  text-align: center;
  color: #9E9E9E;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
          line-clamp: 1; 
  -webkit-box-orient: vertical;
  margin: 10px 0 16px;
  font-size: 22px;
  height: 32px;
  cursor: pointer;
}

.challenge_mainspace #quiz_input {
  margin-top: 30px;
}

.input_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#quiz_input {
  text-align: center;
  width: calc(100% - 32px);
  max-width: 450px;
  transition: color 0.3s cubic-bezier(.25,.8,.25,1), background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
#time_left_bar {
  width: calc(100% - 2px);
  max-width: 482px;
  height: 8px;
  position: relative;
  display: flex;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  
  border: 1px #424242 solid;
  cursor: pointer;
}
#time_left_bar svg {
  opacity: 0;
}
#skip_button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 14px;
}
#skip_button img {
  position: relative;
  top: 1px;
  width: 18px;
}
.disabled {
  opacity: 30%;
  touch-action: none;
  pointer-events: none;
}


.header {
  position: relative;
  text-align: center;
}
.intro {
  font-size: 30px;
  text-align: left;
  left: 0;
}
.link_section {
  display: flex;
  flex-direction: column;
}
#results {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
.results_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 18px;
}
.results_extra_info_wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.results_extra_info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.take_another {
  color: #FAFAFA;
  border: 1px solid #FAFAFA;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.take_another span {
  padding: 2px 6px 4px 6px;
}
.take_another:hover {
  background-color: #FAFAFA;
  color: #212121;
  text-decoration: none;
}
.take_another:hover > img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(50%) saturate(0%) hue-rotate(173deg) brightness(69%) contrast(86%);
}
.take_another img {
  height: 21px;
}

.result {
  display: flex;
  flex-direction: column;
  background-color: #252525;
  border-radius: 10px;
  align-items: center;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  min-width: 0;
  padding: 10px 60px;
  padding-bottom: 67px;
  border: 1px #424242 solid;
}
.result_reading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.result_vocab {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 5px;
}
.result_meaning {
  min-width: 0;
  flex-direction: row;
  flex-shrink: 1;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background-color: #424242;
  border-radius: 0 0 10px 10px;
  min-height: 52px;;
  
}
.result_meaning div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

.result_meaning:hover {
  height: auto;
}

.result_meaning:hover > div {
  overflow: auto;
  text-overflow: auto;
  display: flex;
  -webkit-line-clamp: 0;
  line-clamp: 0;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}


.extra_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: absolute;
  left: 5px;
  top: 5px;
  height: 18px;
  /* line-height: 16px; */
  opacity: 0.6;
}
.extra_info img {
  height: 18px;
}
.extra_info span {
  line-height: 12px;
  height: 14px;
}
.result_time_wrong {
  position: relative;
  top: 1px;
}


.review_up_to {
  position: absolute;
  right: 7px;
  top: 12px;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
}
.review_up_to:hover {
  opacity: 1;
}


.row {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 10px 0;
  border: 1px solid #FAFAFA;
  border-radius: 10px;
  max-width: 800px;
  overflow-x: auto;
  width: 100%;
  border: 1px #616161 solid;
  background-color: #252525;
}
.vocab_info {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  align-items: center;
  flex-grow: 1;
  max-width: 50%;
}
.cell_data {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%
}
.cell_header {
  position: absolute;
  top: -2px;
  font-weight: 200;
  font-size: 18px;
  white-space: nowrap;
}
.cell_main {
  font-size: 46px;
  font-weight: 900;
  white-space: nowrap;
}
.cell_subscript {
  text-align: center;
  color: #9E9E9E;
  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   min-width: 160px;
}
.other_info {
  display: flex;
  flex-direction: column;
}
.answer_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  flex-grow: 1;
}
.their_answer {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.answer_title {
  position: absolute;
  top: 0;
  font-size: 20px;
}
.answer {
  font-size: 46px;
  font-weight: 500;
}
.percentage {
  text-align: center;
  color: #9E9E9E;
}
.time_info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  height: 100%;
  gap: 10px;
  align-items: center;
  flex-grow: 1;
}
.time_icon {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.time_icon img {
  height: 20px;
  position: relative;
  top: 1px;
}
.time_icon span {
  white-space: nowrap;
}
.average_time {
  text-align: center;
  color: #9E9E9E;
}
.red_ka {
  color: #FF5252;
}
.ans_incorrect {
  color: #FF5252;
}
.ans_correct {
  color: #69F0AE
}
.ragequit {
  text-align: center;
  padding: 10px 0;
}

.test_in_progress {
  font-size: 40px;
  font-weight: 900;
}
.results_redo_wrapper {
  display: flex;
  flex-direction: row;

}
.results_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 40px);
  text-align: center;
  color: #bdbdbd;
  background-color: #000;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px;
  padding: 20px;
}
.footer a {
  color: #BDBDBD
}
.footer > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.terms .material-icons {
  position: relative;
  top: 6px
}


.select {
  position: relative;
  display: inline-block;
}
.select select {
  font-weight: 500;
  display: flex;
  width: 100%;
  cursor: pointer;
  padding: 2px 6px 4px 6px;
  outline: 0;
  border: 1px solid #FAFAFA;
  border-radius: 8px;
  background: #212121;
  color: #fafafa;
  appearance: none;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
}
.select select:not(.zhengfeng > * .select select) {
  font-size: 16px;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover {
  background-color: #FAFAFA;
  color: #212121;
}
#moe_control_group {
  gap: 12px;
}
.about_moe_mode {
  font-weight: 100;
  color: #9E9E9E;
}
.about_moe_mode:not(.zhengfeng > * .about_moe_mode) {
  font-size: 16px;
}
.moe_mode_choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile_moe_mode_choice {
  padding-left: 34px
}
.control_indicator {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
  border: 0px solid #000000;
  border-radius: 4px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
  background: #cccccc;
}

.control input:checked ~ .control_indicator {
  background: #448AFF;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
  background: #448AFF;
}
.control input:disabled ~ .control_indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control_checkbox .control_indicator:after {
  box-sizing: unset;
  content: '';
  position: absolute;
}
.control_checkbox input:not(:checked) ~ .control_indicator:after {
  content: '';
  background-color: #212121;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
  box-sizing: unset;
  position: absolute;
  transform: rotate(0);
  border-radius: 3px;
}
.control input:checked ~ .control_indicator:after {
  display: block;
}
.control_checkbox .control_indicator:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #212121;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.control_checkbox > input:disabled ~ span {
  color: #e6e6e6;
  opacity: 0.6;
}








.control_group {
  gap: 10px;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.control_group_header {
  font-size: 26px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.control_group_header img {
  width: 24px;
  cursor: pointer;
}
.control_group {
  margin-top: 10px
}
.control {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: center;
  margin-bottom: 0px;
  cursor: pointer;
  gap: 10px
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control span {
  position: relative;
  bottom: 1px;
}
.control_indicator {
  position: relative;
  height: 20px;
  width: 20px;
  background: #FAFAFA;
  border: 0px solid #000000;
  border-radius: undefinedpx;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
  background: #FAFAFA;
}

.control input:checked ~ .control_indicator {
  background: #448AFF;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
  background: #448AFF;
}
.control input:disabled ~ .control_indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control input:checked ~ .control_indicator:after {
  display: block;
}
.control_radio .control_indicator {
  border-radius: 50%;
}
.control_radio .control_indicator:after {
  box-sizing: unset;
  content: '';
  position: absolute;
}
.control_radio input:not(:checked) ~ .control_indicator:after {
  content: '';
  background-color: #212121;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  box-sizing: unset;
  position: absolute;
}

.control_radio .control_indicator:after {
  left: 6px;
  top: 6px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #212121;
  transition: background 250ms;
}
.control_radio input:disabled ~ .control_indicator:after {
  background: #7b7b7b;
}

#business_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* .hi_moe_mode #vocab_reading {
  margin-bottom: 10px;
  font-size: 34px;
} */

.moe_mode{
  height: calc(100% - 24px);
  padding: 12px;
  
}
.hi_moe_mode .content {
  gap: 10px
}
.moe_mode .content {
  gap: 0;
}
.moe_mode_container {
  display: flex;
  flex-direction: column;
  flex-shrink: 8;
  max-width: 100%;
  max-height: calc(100% - 361px);
  position: relative;
}
#we_goin_moe_mode {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  min-width: 0;
}
.loaded_image_shadow {
  box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
}
.loaded_image_background {
  background-color: rgba(0,0,0,0.7);
}

.moe_mode.mobile_moe_mode .moe_mode_container {
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.moe_mode.mobile_moe_mode #business_container {
  position: absolute;
  z-index: 2;
  padding: 0 10px 10px 10px;
  width: calc(100% - 20px);
  border-radius: 0 0 8px 8px;
  background-color: rgba(0,0,0,0.7);
}
.moe_mode.mobile_moe_mode #we_goin_moe_mode {
  box-shadow: none;
}
.moe_mode.mobile_moe_mode #quiz_input {
  background-color: transparent;
  border: 1px #FAFAFA solid;
  color: #FAFAFA;
  width: calc(100% - 34px);
  border-radius: 8px;
}
.moe_mode.mobile_moe_mode #vocab_meaning {
  color: #BDBDBD
}

.moe_mode.mobile_moe_mode #quiz_input::-webkit-input-placeholder {
  color: #BDBDBD !important;
  opacity: 1 !important; /* Firefox */
}

.moe_mode.mobile_moe_mode #quiz_input::-moz-placeholder {
  color: #BDBDBD !important;
  opacity: 1 !important; /* Firefox */
}

.moe_mode.mobile_moe_mode #quiz_input::-ms-placeholder {
  color: #BDBDBD !important;
  opacity: 1 !important; /* Firefox */
}

.moe_mode.mobile_moe_mode #quiz_input::placeholder {
  color: #BDBDBD !important;
  opacity: 1 !important; /* Firefox */
}

#we_goin_moe_mode {
  border-radius: 8px;
}

#quiz_progress_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  display: flex;
  z-index: 5;
}
#current_question_percentage {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #FAFAFA;
  background-color: rgba(0,0,0,0.4);
  border-radius: 7px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  opacity: 0;
}
#current_question_percentage span {
  line-height: 11px;
  height: 13px;
}

.login_content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header_and_input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.continue_list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  max-height: 210px;
  border: 1px #424242 solid;
  border-radius: 10px;
  padding: 5px;
  overflow-y: scroll;
  min-height: 30px;
  gap: 5px;
}
.long_list:not(.one_line) {
  max-height: 600px;
}

.continue_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
}
.continue_list .continue_row:nth-child(even) {
  background-color: #424242;
  border-radius: 8px;
}
.continue_row_title {
  display: flex;
  flex-direction: column;
}
.ignore_quiz,
.delete_quiz {
  cursor: pointer;
  width: 22px;
  opacity: 0.7;
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
}
.ignore_quiz:hover,
.delete_quiz:hover {
  opacity: 1;
}

.decks_chosen_wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decks_chosen_header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
#decks_chosen {
  border-radius: 10px;
  border: 1px #424242 solid;
  width: calc(100% - 14px);
  padding: 6px;
  min-height: 32px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  background-color: #252525;
}
.decks_to_include_header {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-end;
}
#cards_included {
  font-weight: 300;
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1),
}
#clear_decks {
  color: #ff5252;
  cursor: pointer;
}

.deck_category {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pills {
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 7px;
  flex-wrap: wrap;
}
.pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #424242;
  padding: 2px 13px;
  height: 28px;
  border-radius: 30px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(.25,.8,.25,1),
  background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
.pill:hover {
  background-color: #616161;
}
.pill.selected {
  background-color: #448aff;
  color: #212121
}

.deck_categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deck_categories.show_less > .deck_category,
.deck_categories.show_less > .deck_category {
  display: none;
}
.deck_categories > .deck_category:nth-child(1) {
  display: flex;
}
#show_more_less_categories {
  text-align: center;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
}
#show_more_less_categories div {
  background-color: #212121;
  position: relative;
  flex-shrink: 1;
  padding: 0 10px;
  line-height: 16px;
  display: flex;
  height: 17px;
  font-weight: 300;
}
#show_more_less_categories:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 1px solid #FAFAFA;
  width: 100%;
  transform: translateY(-50%);
}
.collection_button {
  background-color: #FAFAFA;
  color: #212121;
  padding: 2px 20px;
  height: 28px;
  border-radius: 4px;
  font-weight: 900;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(.25,.8,.25,1),
  background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
.collection_button:hover {
  background-color: #FF5252;
}


.vocab_question_info {
  position: relative;
    width: 100%;
}
.expanded_meaning {
  position: absolute;
  bottom: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 40px);
  background-color: #424242;
  border-radius: 10px;
  overflow-y: scroll;
  flex-wrap: wrap;
  word-wrap: normal;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  z-index: 10;
  width: calc(100% - 20px);
  box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
}
.expanded_meaning .question {
  font-size: 50px;
  line-height: 46px;
  height: 50px;
}
.expanded_meaning .meaning {
  width: calc(100% - 10px);
  text-align: center;
  padding: 4px;
  border: 1px #FAFAFA solid;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 8px;
  justify-content: center;
}
#close_expanded_meaning {
  position: absolute;
    right: 10px;
    top: 10px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background: #424242;
    border-radius: 6px;
}

.options_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.change_font {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#settings_mainspace .change_font {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.settings_link {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.settings_link img {
  width: 22px;
  position: relative;
  left: -1px;
  filter: brightness(0) saturate(100%) invert(48%) sepia(37%) saturate(1045%) hue-rotate(181deg) brightness(100%) contrast(104%);
}

.full_width {
  width: 100%;
}

.stats_container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.stats_div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.index_content {
  position: relative;
  width: 100%;
}
.index_header {
  width: 100%;
  text-align: left;
  font-size: 22px;
  margin-bottom: 10px;
}
.index_buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}
.index_button {
  text-decoration: none;
  width: 348px;
  flex-grow: 1;
  border: 1px #424242 solid;
  flex-shrink: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fafafa;
  background-color: #252525;
  padding: 20px 20px;
  max-width: 100%;
  text-align: center;
  justify-content: space-evenly;
  gap: 16px;
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
.index_button:hover {
  text-decoration: none;
  background-color: #424242;
}
.index_button_header {
  font-size: 58px;
  font-weight: 900;
  line-height: 58px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.index_button_header div {
  white-space: nowrap;
}
.index_button_sub_header {
  font-weight: 300;
}


.leaderboard {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.leaderboard_wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 100%;
  gap: 10px;
}
.leaderboard_header {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
.leaderboard_list {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leaderboard_row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border: 1px #616161 solid;
  padding: 10px;
  border-radius: 10px;
  background-color: #252525;
}
.leaderboard_row.selected {
  border: 1px #448aff solid;
  color: #448aff
}
.leaderboard_spacer {
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaderboard_username {
  display: flex;
  flex-direction: row;
}
.leaderboard_username div {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ranking_index {
  font-weight: 300;
}
.leaderboard_count_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.coped_count {
  color: #9E9E9E;
}
.non_coped_count {
  font-weight: 900;
}

.username_change {
  width: 100%;
  gap: 10px;
  display: flex;
  max-width: 395px;
  flex-direction: column;
  align-self: flex-start;
}
.username_change div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.username_change .button {
  width: 200px;
  align-self: end;
}
.less_prominent_input {
  padding-top: 6px;
  padding-bottom: 6px;
}

#results_pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  opacity: 0;
}
.results_page,
.collection_page {
  border: #424242 solid 1px;
  background: #252525;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1), color 0.3s cubic-bezier(.25,.8,.25,1);
}
.results_page.selected,
.collection_page.selected {
  background-color: #424242;
  color: #FAFAFA;
  pointer-events: none;
}
.results_page:not(.selected):hover,
.collection_page:not(.selected):hover {
  background-color: #616161;
}
.results_dots,
.collection_dots {
  padding: 10px;
}

#discord_login {
  background-color: #5865f2;
  color: #fafafa;
  text-decoration: none;
  padding: 10px 20px;
  font-weight: 900;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
#discord_login img {
  width: 24px;
}
#discord_login:hover {
  text-decoration: none;
}

.discord {
  color: #5865f2;
}
.patreon {
  color: #FF424D
}

.self_grading_content {
  flex-grow: 1;
  justify-content: space-between;
}
.self_grading_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.self_grading_container #time_left_bar {
  max-width: calc(100% - 2px);
}
.self_grading {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 32px;
  margin-top: 12px;
}
#self_grade_show_answer {
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-weight: 900;
  border: 1px #FAFAFA solid;
  cursor: pointer;
  flex-grow: 1;
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
#self_grade_show_answer:hover {
  background-color: #424242;
}

#self_grade_answers {
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  display: none;
  flex-grow: 1;
}
#self_grade_answers div {
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  flex-grow: 1;
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
}
#self_grade_answers div:hover {
  background-color: #424242;
}
#dont_know {
  border: 1px #ff5252 solid;
}
#know {
  border: 1px #69F0AE solid;
}

.continue,
.create {
  width: 100%;
}

.grind_options_header {
  font-size: 24px;
}
.create_options {
  border: 1px solid #424242;
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}
.light_font {
  font-weight: 300;
}

.shop_sub_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.user_coins {
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px #424242 solid;
  align-items: center;
  gap: 4px;
  background-color: #252525;
}
.coin_count,
.coin_count_layout_only {
  line-height: 11px;
  height: 14px;
}

#collection_mini {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
}
#collection_mini .shop_item {
  max-width: 200px;
}
#collection_mini .shop_item_name {
  text-align: center;
}
/* /collection: the full grid. Tiles are smaller than the farm's so more fit per
   row, and the row is left-aligned so a short last row does not stretch. */
#collection {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
#collection .shop_item {
  width: calc(20% - 10px);
  max-width: 180px;
  flex-grow: 0;
}
#collection .shop_item_name {
  text-align: center;
}
#collection_pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.collection_progress_container,
.collection_container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.collection_controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.collection_container .control_group_header {
  flex-wrap: wrap;
  gap: 6px 10px;
}
.collection_controls .select select {
  min-width: 160px;
}
#collection_progress_bar {
  height: 8px;
  border: 1px #424242 solid;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}
#collection_progress_quip {
  opacity: 0.75;
}
.collection_stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 18px;
  opacity: 0.75;
}

.nothing_in_collection {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.farmers_market_container,
.harvest_container,
.collection_mini_container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.harvest {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 10px;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
}
.harvest_button {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background-color: #252525;
  border: 1px solid #424242;
  cursor: pointer;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.harvest_button:hover {
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: #424242;
}
.harvest_cost {
  font-weight: 500;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.harvest_cost span {
  line-height: 16px;
  height: 17px;
}

.daily_shop {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.shop_item {
  width: calc(33% - 9px);
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #252525;
  border-radius: 10px;
  border: 1px solid #424242;
  overflow: hidden;
  cursor: pointer;
  min-width: 140px;
  flex-grow: 1;
}
.shop_item.bought {
  pointer-events: none;
}
.shop_item.bought > .buy_overlay {
  opacity: 0 !important;
}
.shop_item.bought > .bought_overlay {
  opacity: 1 !important;
  pointer-events: none;
}

.shop_item:hover > .buy_overlay {
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
  opacity: 1;
}
.buy_overlay,
.bought_overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 49px;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  font-size: 56px;
  font-weight: 900;
  opacity: 0;
}
.shop_item_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
  height: 29px;
}
.shop_item_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.level_or_coin {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 3px;
  bottom: 52px;
  background-color: #252525;
  border: 1px #424242 solid;
  border-radius: 8px;
  padding: 3px 6px;
}
.shop_item_price {
  line-height: 11px;
  height: 14px;
}
.coin {
  height: 20px;
}
.claim_coins {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.rewarded_coins_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  border: 1px #424242 solid;
  background-color: #252525;
  gap: 10px;
}
.rewarded_coins {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.supporter:not(.supporters > .supporter) {
  border: 1px #FFD600 solid;
  color: #FFD600;
}



#coin_feeding_background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.5);
  display: none;
}
#close_overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 18;
  cursor: pointer;
  padding: 6px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 8px;
}

.coin_feeding_overlay {
  max-width: 600px;
  background-color: #212121;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
#coin_feeding_overlay_name {
  font-weight: 900;
  font-size: 33px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#overlay_level {
  font-weight: 500;
  font-size: 24px;
}
#coin_feeding_overlay_img {
  max-height: calc(100vh - 300px);
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.coin_feeding_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#coin_feeding_bar {
  height: 8px;
  border: 1px #424242 solid;
  border-radius: 8px;
  display: flex;
}
.coin_feeding_button_row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
}
.coin_feeding_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #292929;
  border-radius: 10px;
  border: 1px solid #424242;
  flex-grow: 1;
  font-weight: 900;
  padding: 30px 0;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}
.coin_feeding_button:hover {
  transition: background-color 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: #424242;
}

.supporter_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.supporters {
  padding: 10px;
  border: 1px #424242 solid;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100% - 20px);
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
}
.supporters .supporter {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  border-radius: 10px;
  border: 1px #FFD600 solid;
  color: #ffd600;
  padding: 3px 20px 5px;
  flex-grow: 1;
  justify-content: center;
}
.supporters::after {
  content: '';
  flex-grow: 1000000000;
}

.patreon_button:hover {
  text-decoration: none;
}
.patreon_button div {
  color: #FAFAFA;
  font-size: 24px;
}
.patreon_button img {
  width: 200px;
  padding: 20px 40px;
  border: 1px solid #ff424d;
  border-radius: 10px;
  cursor: pointer;
}


@font-face {
  font-family: 'Zhengfeng';
  src: url(https://cdn.jsdelivr.net/gh/max32002/masafont@2.1/webfont/MasaFont-Regular.woff2) format("woff2")
  , url(https://cdn.jsdelivr.net/gh/max32002/masafont@2.1/webfont/MasaFont-Regular.woff) format("woff");
}
@media all and (max-width: 800px) {
  #vocab_question {
    font-size: 85px;
    height: 146px;

    height: 90px;
    line-height: 80px;
  }
  #vocab_reading {
    height: 50px;
    font-size: 28px;
  }

  /* .hi_moe_mode #vocab_reading {
    padding-bottom: 10px;
  }
  .hi_moe_mode #vocab_meaning {
    margin: 10px 0 20px;
  } */
  .intro {
    font-size: 24px;
    top: -34px;
  }

  .vocab_info,
  .answer_info {
    gap: 0;
  }

  .cell_data{
    padding-top: 16px;
  }
  
  .cell_header {
    font-size: 16px;
  }
  .cell_main {
    font-size: 36px;
  }

  .moe_mode_container {
    max-height: calc(100% - 301px);
  }

  .buy_overlay,
  .bought_overlay {
    font-size: 34px;
  }
  
}

@media all and (max-width: 600px) {
  #collection .shop_item {
    width: calc(50% - 8px);
    max-width: none;
  }

  .leaderboard_wrapper {
    width: 100%;
  }
  .navbar {
    font-size: 16px;
  }
  .navbar_links {
    gap: 10px;
  }

  .dekiru_nai {
    font-size: 58px;
    line-height: 52px;
    height: 59px;
  }
}

@media all and (max-width: 550px) {
  html {
    font-size: 16px;
  }
  
  #vocab_question {
    font-size: 60px;
    height: 102px;
    padding: 10px 0;
    
    height: 66px;
    line-height: 60px;
  }
  /* .hi_moe_mode #vocab_reading {
    padding-bottom: 0;
  } */
  
  #vocab_meaning {
    font-size: 16px;
    height: 26px;
  }
  #vocab_reading {
    font-size: 26px;
    height: 38px
  }
  #vocab_meaning {
    margin: 0 0 10px 0;
  }
  .text_input {
    text-align: left;
    font-size: 16px;

  }

  .vocab_info,
  .answer_info,
  .time_info {
    padding: 0 10px;
  }
  .link_section_header_bar {
    align-items: center;
  }

  .moe_mode_container {
    max-height: calc(100% - 271px);
  }
  
  .control_group_header {
    font-size: 18px;
  }
  .control_group_header img {
    width: 20px;
  }
  .control_group {
    margin-top: 8px;
  }

  #open_quiz_menu img {
    width: 16px;
  }
  .expanded_meaning .question {
    font-size: 40px;
    line-height: 38px;
    height: 42px;
  }

  .index_button {
    width: 274px;
  }
  .index_button_header {
    font-size: 42px;
    line-height: 48px;
  }

  .continue_list.one_line {
    padding: 10.5px 9px;
    min-height: 0;
  }
  #cards_included,
  #clear_decks {
    line-height: 22px;
    height: 22px;
  }
  .footer {
    font-size: 14px;
    padding: 20px 10px;
    width: calc(100% - 20px);
  }
  .footer > div {
    gap: 2px;
  }
  .footer > div > img {
    width: 18px;
  }
  
  .navbar_links_in_bar {
    display: none;
  }
  .navbar_links_in_hamburger {
    display: flex;
  }

  .harvest {
    font-size: 24px;
  }
}

@media all and (max-width: 400px) {
  #vocab_question {
    font-size: 48px;
    height: 88px;

    height: 52px;
    line-height: 48px;
  }
  #start_challenge_copy {
    height: 22px;
  }
  .moe_mode_container {
    max-height: calc(100% - 257px);
  }
  .footer {
    flex-direction: column;
  }
}

.hidden_progress_bar svg {
  display: none;
}
.hidden {
  display: none;
}
.invisible {
  opacity: 0;
}
.flex {
  display: flex !important;
}