@font-face {
  font-family:'FontAwesomeWeb';
  src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
      url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
      url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
      url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
      url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal;
}

.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesomeWeb, FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.fa-hover {
  color: #fff;
  line-height: 32px;
  font-size: 18px;
  outline:none;
}
.fa-hover:hover, .fa-hover:focus {
  opacity: 0.7;
  outline: none;
  cursor: pointer;
}

/* animations */
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }

  100% {
    -webkit-transform:rotate(359deg);
            transform:rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }

  100% {
    -webkit-transform:rotate(359deg);
            transform:rotate(359deg);
  }
}

/* text-selection */
::selection { color:#FFF; background-color:#F93; }
::-moz-selection { color:#FFF; background-color:#F93; }

/* page language */
.lang-en .ja, .lang-ja .en {
  display:none !important;
}


/* body/general styles */
.disabled {
  opacity:0.5;
  pointer-events:none;
}

body {
  color:#333;
  background:#FFF;
  font-size:14px;
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif;
  padding:0;
  margin:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

p { font-size:14px; }
ul { padding-left:40px; }

hr {
  border:none;
  border-bottom:1px solid #999;
}

hr.main-color { border-color:#F93; }

a {
  color:#039;
  text-decoration:none;
  outline:none;
}
a:hover, a:focus { text-decoration:underline; }

img { max-width:100%; }

/* focus style for image links */
a:focus img {
  outline:1px solid #F93;
}

code {
  color:#00F;
  background:#EEE;
  border:1px solid #CCC;
  padding:3px;
}

.button, a.button {
  color:#FFF;
  background:#F93;
  font-size:14px;
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif;
  text-decoration:none;
  border:none;
  font-weight:bold;
  display:inline-block;
  padding:6px 12px;
  margin:3px;
  cursor:pointer;
  outline:none;
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

.button:hover, a.button:hover { background:#E82; }
.button:focus, a.button:focus { background:#D71; }

.button[disabled] {
  opacity:0.5;
  filter:grayscale(1);
  cursor:default;
  pointer-events:none;
}

/* button icons */
.button .fa {
  font-size:18px;
  vertical-align:middle;
  margin-right:6px;
}

.button.icon-only {
  height:25px;
  width:25px;
  padding:0;
  margin:3px;
}
.button.icon-only i { margin:0; }

/* play buttons */
.button.play-button {
  height:25px;
  width:25px;
  padding:0;
  margin:0px;
  border-radius:100%;
}

.button.play-button i {
  font-size:14px;
  margin-right:-2px;
}

/* input fields */
input[type="text"], input[type="number"], textarea, select {
  font-size:14px;
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif;
  background:#FFF;
  border:1px solid #CCC;
  padding:6px;
  outline:none;
}
select { cursor:pointer; }
input[type="text"]:disabled, input[type="number"]:disabled, textarea:disabled, select:disabled { color:#333; }
input[type="text"]::placeholder, input[type="number"]::placeholder, textarea::placeholder { color:#BBB; }
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover { border-color:#999; }
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color:#F93; }

/* aesthetic styles */
.center { text-align:center; }
.right { text-align:right; }
.left { text-align:left; }

.ul { text-decoration:underline; }
.ul-double {
  text-decoration:underline;
  position:relative; 
}
.ul-double:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  border-bottom:1px solid #333;
}
.ul-color {
  display:inline-block;
  border-bottom:2px solid #F93;
}

.box-color {
  display:inline-block;
  border:2px solid #F93;
  padding:3px;
  margin:3px;
}
.box-color.spaced {
  margin:10px 3px;
}
.box-color.inline {
  display:inline;
  padding:0px 3px;
}
.box-color.bg { background:#FFF; }
.dark-mode .box-color.bg { background:#161616; }

.hidden { visibility:hidden; }
.inline { display:inline-block; }
.t-valign-top { vertical-align:top; }

/* text styles */
.t-red { color:#F00; }
.t-green { color:#080; }
.t-blue { color:#09F; }
.t-orange, .main-color { color:#F93; }
.t-bold { font-weight:bold; }

/* margin */
.nomargin { margin:0 !important; }
.clearfix { clear:both; }
.clear:after {
  content:"";
  display:table;
  clear:both;
}

.vertical-text {
        -ms-writing-mode:tb-rl;
	-webkit-writing-mode:vertical-rl;
	        writing-mode:vertical-rl;
  text-align:left !important;
  max-height:300px;
}

/* spoilers */
.spoiler {
  color:#444;
  background:#444;
  display:inline-block;
  padding:0 3px;
}

.spoiler:hover { color:#FFF; }

.problem-hint .spoiler { margin-top:2px; }

/* tables */
.table {
  width:100%;  
  border-collapse:collapse;
}

.table td {
  background:#FFF;
  border:1px solid #DDD;
  padding:3px;
}

.table-head {
  font-size:16px;
  font-weight:bold;
}

.example-row td { vertical-align:top; }
.example-row div { margin:10px 0; }

/* used for definitions, ex: 兄弟[きょうだい：siblings; ...]
   the bracketed portion should be wrapped with tags of this class */
.define {
  font-size:11px;
  font-style:normal;
  font-weight:bold;
  vertical-align:super;
}

/* lesson number for kanji or words */
.lesson-num {
  font-size:12px;
  font-style:normal;
  vertical-align:top;
}

/* resize large images */
.lesson-image img { max-width:100%; }

/* header */
header {
  color:#FFF;
  background:url('../images/genki.png') no-repeat 10px 50% #F93;
  padding:15px 15px 15px 140px;
  position:relative;
  overflow:hidden;
}

#home-link:before { /* makes the above background image clickable */
  content:"";
  position:absolute;
  height:100px;
  width:110px;
  left:14px;
  top:50%;
  margin-top:-50px;
}

.edition-icon:after {
  font-size:14px;
  position:absolute;
  margin-top:40px;
  margin-left:-85px;
}

.edition-icon.second-ed:after { content:"\A 2nd Edition"; }
.edition-icon.third-ed:after { content:"\A 3rd Edition"; }

header h1 { font-size:32px; }
header h1 a { color:#FFF; }

h2 { margin:30px 0 0 0; }

a#fork-me {
  color:#FFF;
  background:#333;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  line-height:30px;
  height:30px;
  width:200px;
  -webkit-transform:rotate(45deg);
          transform:rotate(45deg);
  position:absolute;
  right:-55px;
  top:30px;
  transition-property:color, background;
  transition-duration:300ms;
}

a#fork-me:hover, a#fork-me:focus {
  color:#333;
  background:#FFF;
}

/* announcement */
#announcement {
  color:#FFF;
  background:#F93;
  border:1px solid #C60;
  border-right:none;
  border-left:none;
  height:110px;
}

#announce-inner {
  max-width:1000px;
  margin:0 auto;
  padding:0 30px;
}

#announcement .fa {
  font-size:24px;
  vertical-align:middle;
}

#announcement a {
  color:#FF0;
  font-weight:bold;
}

#announcement h3 {
  font-size:18px;
  margin:10px 0 0 0;
}

#announcement .announcement {
  font-size:16px;
  height:75px;
  box-sizing:border-box;
  padding:3px 6px;
  overflow-y:auto;
}

#announcement .announcement.announce-hidden {
  display:none;
}

#announcement .announcement .date {
  color:#FFF;
  font-size:13px;
  font-weight:normal;
  background:#E82;
  border:1px solid #D71;
  border-radius:3px;
  padding:1px;
  margin-right:5px;
}

#announce-list {
  position:relative;
  margin:0 20px;
}

#announcement .announce-controls {
  background:rgba(0, 0, 0, 0.3);
  text-align:center;
  position:absolute;
  top:50%;
  margin:-15px 0 0 0;
  height:30px;
  width:20px;
  padding:0;
  opacity:0.5;
}

#announcement .announce-controls i.fa {
  font-size:18px;
  line-height:26px;
  margin:0;
}

#announcement .announce-controls:hover, #announcement .announce-controls:focus { opacity:1; }

#announcement .announce-controls.button-left { left:-20px; }
#announcement .announce-controls.button-right { right:-20px; }

/* random word module */
#random-word-content {
  margin-top:10px;
}

.random-word {
  text-align:center;
}

.random-word ruby {
  font-size:32px;
}

.random-word ruby rt {
  font-size:18px;
}

.random-word .word-en {
  font-size:24px;
}

.random-word .spoiler {
  padding:6px;
}

.random-word .label {
  text-align:right;
  font-weight:bold;
}

/* content */
#content { flex:1 0 auto; }

.content-block {
  max-width:1000px;
  margin:0 auto;
  padding:30px;
}

/* section anchors */
a.anchor {
  color:#666;
  font-size:16px;
  font-weight:normal;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
  display:inline-block;
  width:25px;
  margin:0 0 0 -25px;
}

.anchor-icon {
  display:inline-block;
  -webkit-transform:rotate(-45deg);
          transform:rotate(-45deg);
  visibility:hidden;
}

h1:hover .anchor-icon, h2:hover .anchor-icon, h3:hover .anchor-icon, h4:hover .anchor-icon, h5:hover .anchor-icon, h6:hover .anchor-icon, .anchor:focus .anchor-icon {
  visibility:visible;
}

/* link list */
#page-links, #related-projects { margin:15px 0 0 0; }
#link-list { font-size:0; }
#link-list span, #link-list a { font-size:14px; }

#link-list a {
  color:#FFF;
  text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
  padding:3px 6px;
  margin:10px 10px 0 0;
}

#link-home.button { border-bottom:2px solid #D71; }
#link-edition, #link-home.button { background-color:#F93; border-bottom:2px solid #D71; }
#link-grammar   { background-color:#FC0; border-bottom:2px solid #DA0; }
#link-anki      { background-color:#05C; border-bottom:2px solid #03A; }
#link-help      { background-color:#39C; border-bottom:2px solid #17A; }
#link-report    { background-color:#F66; border-bottom:2px solid #D44; }
#link-download  { background-color:#9C6; border-bottom:2px solid #7A4; }
#link-donate    { background-color:#C6C; border-bottom:2px solid #A4A; }
#link-github    { background-color:#96F; border-bottom:2px solid #74D; }
#link-settings  { background-color:#666; border-bottom:2px solid #444; }
#link-edition:hover, #link-home.button:hover  { background-color:#E82; }
#link-grammar:hover  { background-color:#EB0; }
#link-anki:hover     { background-color:#04B; }
#link-help:hover     { background-color:#28B; }
#link-report:hover   { background-color:#E55; }
#link-download:hover { background-color:#8B5; }
#link-donate:hover   { background-color:#B5B; }
#link-github:hover   { background-color:#85E; }
#link-settings:hover   { background-color:#555; }
#link-edition:active, #link-home.button:active
#link-edition:focus, #link-home.button:focus { background-color:#D71; }
#link-grammar:active,
#link-grammar:focus  { background-color:#DA0; }
#link-anki:active,
#link-anki:focus     { background-color:#03A; }
#link-help:active,
#link-help:focus     { background-color:#17A; }
#link-report:active,
#link-report:focus   { background-color:#D44; }
#link-download:active,
#link-download:focus { background-color:#7A4; }
#link-donate:active,
#link-donate:focus   { background-color:#A4A; }
#link-github:active,
#link-github:focus   { background-color:#74D; }
#link-settings:active,
#link-settings:focus   { background-color:#444; }

#link-list i {
  font-size:16px;
  vertical-align:middle;
  margin-right:6px;
}
#link-github i, #link-help i { font-size:18px; }

#exercise-list #page-links {
  margin:0;
  padding:0;
}
#exercise-list .indent-block { margin-left:10px; }

#link-grammar { position:relative; }
/*#link-grammar:after {
  content:"NEW!";
  font-size:12px;
  color:#FF0;
  position:absolute;
  top:-5px;
  left:-10px;
  -webkit-transform:rotate(-30deg);
          transform:rotate(-30deg);
  text-shadow:1px 1px 2px #330, -1px -1px 2px #330, 0px 0px 3px #330;
  pointer-events:none;
}*/

/* donate box */
.donate-box {
  color:#333;
  background:#FCF;
  border:1px solid #C6C;
  position:relative;
  padding:5px;
  padding-left:35px;
  margin:5px auto;
  text-align:left;
  width:80%;
  max-width:600px;
}
.donate-icon {
  color:#FCF;
  background:#C6C;
  font-size:20px;
  width:30px;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.donate-text a {
  color:#039;
  font-weight:bold;
}
.donate-text a i {
  font-size:12px;
  font-weight:normal;
  vertical-align:super;
  margin-left:-3px;
}
.info-box {
  color:#333;
  background:#EFF;
  border:1px solid #17A;
  position:relative;
  padding:5px;
  padding-left:35px;
  margin:5px auto;
  text-align:left;
  width:80%;
  max-width:600px;
}
.info-icon {
  color:#EFF;
  background:#17A;
  font-size:20px;
  width:30px;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}


/* related projects */
#project-list img {
  height:120px;
  margin:10px 4px 0 0;
}

#related img {
  height:120px;
  margin:5px;
}
#related h3 {
  margin-top:20px;
  margin-bottom:5px;
}

/* quick navigation and quick search */
#quick-actions > div { margin:0; }
#quick-actions h2 {
  font-size:20px;
  margin-top:15px;
}

#quick-search {
  width:100%;
  box-sizing:border-box;
  margin-top:1em;
}

#quick-search-results, .random-exercise-list { border:1px solid #CCC; }
#quick-search-results:empty { border-color:transparent; }
#quick-search-results:not(:empty), .random-exercise-list {
  height:300px;
  padding:3px;
  overflow:auto;
}
.random-exercise-list {
  width:95%;
  position:relative;
}
.random-exercise-list > div {
  white-space:nowrap;
  overflow:hidden;
}

#quick-search-results li {
  white-space:nowrap;
  overflow:hidden;
}

/* quick nav sub-section buttons and bullet style */
#quick-nav-list li {
  position:relative;
  list-style-type:none;
}

#quick-nav-list li:before {
  content:".";
  font-size:0;
  display:block;
  height:6px;
  width:6px;
  background:#F93;
  border-radius:100%;
  position:absolute;
  top:10px;
  left:-16px;
}

#quick-nav-list li ul li:before {
  background:transparent;
  border:2px solid #F93;
  height:4px;
  width:4px;
}

#quick-nav-list li.noBullet:before { display:none; }

#quick-nav-list a.sub-section-button {
  color:#FFF;
  background:#F93;
  font-size:11px;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  height:18px;
  width:18px;
  line-height:20px;
  padding:0;
  border-radius:100%;
  position:absolute;
  top:4px;
  left:-22px;
}

#quick-nav-list a.sub-section-button:hover,
#quick-nav-list a.sub-section-button:focus { background-color:#D71 }

a.sub-section-button[data-open="true"]:after { content:"\f078"; }
a.sub-section-button[data-open="false"]:after {
  content:"\f054";
  letter-spacing:-2px;
}

/* quick nav jump buttons */
a.jump-arrow {
  color:#F93;
  text-decoration:none;
  float:right;
  margin:6px 3px 0 0;
}
a.jump-arrow:hover, a.jump-arrow:focus { color:#C60; }

/* lesson numbers */
#quick-search-results li[data-lesson]:before, .random-exercise-list [data-lesson]:before {
  content:attr(data-lesson);
  color:#FFF;
  font-size:11px;
  background:#F93;
  border:1px solid #E82;;
  border-radius:3px;
  padding:0px 2px;
  margin-right:3px;
}


/* exercise styles */
#exercise > *, .loading > * { visibility:hidden; }

#exercise:before, #exercise:after, .loading:before, .loading:after {
  color:#F93;
  position:absolute;
  top:50%;
}

#exercise:before, .loading:before {
  content:"Now Loading...";
  font-size:16px;
  font-weight:bold;
  font-style:italic;
  text-align:center;
  left:0;
  right:0;
  margin-top:40px;
}
.lang-ja #exercise:before, .lang-ja .loading:before { content:"ロードしています…"; }

#exercise:after, .loading:after {
  content:"\f1ce";
  font-size:64px;
  font-family:FontAwesomeWeb, FontAwesome;
  left:50%;
  margin-top:-32px;
  margin-left:-32px;
  -webkit-animation:fa-spin 2s infinite linear;
  animation:fa-spin 2s infinite linear
}

#exercise.content-loaded > * { visibility:visible; }
#exercise.content-loaded:before, #exercise.content-loaded:after {
  content:"";
  display:none;
}

/* titles */
.lesson-title {
  color:#F93;
  font-size:20px;
  border-bottom:2px solid #F93;
  padding-bottom:3px;
}

.sub-lesson-title, .workbook-title {
  font-size:16px;
  margin:0 0 0 20px;
}
.workbook-title, .normal-block { font-size:14px; }

.title {
  color:#F93;
  font-size:28px;
  margin:20px 0;
}

.title-desc {
  font-size:16px;
}

.title-med {
  font-size:18px;
  margin:10px 0;
}

.section-title {
  color:#F93;
  font-size:24px;
  border-bottom:2px solid #F93;
  margin:0;
  padding-bottom:6px;
}

.sub-title {
  font-size:18px;
  margin:16px 0;
}

/* title for exercises */
#exercise-title {
  color:#F93;
  font-size:24px;
  margin:0 0 25px 0;
}

/* displays volume and page number of exercise */
#exercise-title:after, .title[data-page]:after {
  content:attr(data-page);
  color:#666;
  font-size:12px;
  font-style:italic;
  font-weight:normal;
  display:block;
}


/* lesson summary */
.lesson-summary {
  font-size:14px;
  margin:10px;
  padding:10px;
  background:#EEE;
  border:1px dashed #CCC;
}

.lesson-summary .inline-columns > div {
  margin-right:50px;
  margin-bottom:0;
  vertical-align:top;
}

.lesson-summary:before {
  content:"In this lesson, we will learn how to...";
  font-weight:bold;
  color:#F93;
}

.lesson-point { margin-left:13px; }
.lesson-point:before {
  content:"• ";
  color:#F93;
}

.lesson-summary-link {
  margin-top:5px;
}


/* footer */
footer {
  color:#FFF;
  background:#333;
  text-align:center;
  padding:15px;
}

footer a, #light-switch-label { color:#CCC; }
footer a:hover, #light-switch-label:hover { color:#FFF; }

footer ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

footer li { float:left; }
footer li:before {
  content:"\f111";
  font-family:FontAwesomeWeb, FontAwesome;
  font-size:6px;
  margin:0 5px;
  vertical-align:middle;
}
footer li:first-child:before { display:none; }

.footer-left { float:left; }
.footer-right { float:right; }

/* quiz styles */
#question-list, #drop-list { float:left; }
#answer-list { float:right; }

.quiz-item {
  background:#EEE;
  border:1px solid #CCC;
  margin:3px;
  padding:3px;
  min-width:25px;
  white-space:nowrap;
}
#answer-list .quiz-item, .quiz-item.gu-mirror { cursor:move; }

.drawing-quiz .quiz-item {
  font-size:80px;
  height:110px;
  width:110px;
  line-height:110px;
  box-sizing:border-box;
  margin:0 auto;
}

.drawing-quiz .stroke-order-button {
  margin:0;
  padding:0;
  width:110px;
  height:25px;
}

/* focus states for draggable items and drop zones */
.drag-quiz .quiz-answer-zone:focus, .drag-quiz .quiz-item:focus,
.kana-quiz .quiz-answer-zone:focus, .kana-quiz .quiz-item:focus {
  color:#F93;
  border-color:#F93;
  outline:none;
}

/* selected quiz item for dropping */
.quiz-item.markedItem {
  border-color:#F93;
  outline:1px solid #F93 !important;
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.25);
  position:relative;
}

#quiz-info {
  color:#FFF;
  background:#F93;
  font-weight:bold;
  text-align:left;
  padding:15px 15px 15px 50px;
  margin:10px 0;
  position:relative;
  overflow-y:auto;
}

#quiz-info:before {
  content:"\f05a";
  font-size:32px;
  font-family:FontAwesomeWeb, FontAwesome;
  position:absolute;
  top:50%;
  margin-top:-16px;
  left:12px;
}

#quiz-info a { color:#FF0; }

#quiz-info table {
  width:100%;
  background:#E82;
  border-collapse:collapse;
  font-weight:normal;
}

#quiz-info table td {
  padding:3px;
  border:1px solid #D71;
}


/* timer styles */
#quiz-timer, #check-answers, #change-exercise-type-container { margin-top:10px; }
#quiz-timer:before {
  content:"Time Elapsed";
  display:block;
}
.lang-ja #quiz-timer:before { content:"かかった時間"; }

/* answer styles */
.quiz-answer-zone:empty {
  border:1px solid #CCC;
  margin:3px;
  padding:3px;
}

.drag-quiz .quiz-answer-zone:empty { min-width:100px; }
.drag-quiz .quiz-item, .drag-quiz .quiz-answer-zone {
  height:28px;
  line-height:20px;
  box-sizing:border-box;
}

/* horizontal mode for drag and drop */
.vocab-horizontal #drop-list { display:none; }
.vocab-horizontal #answer-list, .vocab-horizontal #question-list { float:none; }
.vocab-horizontal #question-list { margin-bottom:30px; }

.vocab-horizontal #answer-list .quiz-item { display:inline-block; }
.vocab-horizontal .quiz-item-group {
  display:inline-block;
  vertical-align:top;
  width:20%;
}

/* answer zone size */
.drag-quiz .vocab-horizontal .quiz-answer-zone, .vocab-horizontal #answer-list .quiz-item { min-width:100px; }
.vocab-horizontal #answer-list .quiz-item {
  text-align:center;
  vertical-align:top;
}

.vocab-horizontal .quiz-answer-zone .quiz-item { margin:0 }
.vocab-horizontal .quiz-answer-zone { margin:3px }

/* kanji practice: readings/meanings adjustments */
.kanji-readings.drag-quiz .vocab-horizontal .quiz-item-text {
  text-align:left;
  display:inline-block;
  margin:0 auto;
}

.kanji-readings.drag-quiz .vocab-horizontal #question-list .quiz-answer-zone .quiz-item {
  font-size:13px;
  line-height:20px;
}

.kanji-meanings.drag-quiz .vocab-horizontal #question-list .quiz-answer-zone .quiz-item {
  font-size:13px;
  height:28px;
  line-height:20px;
}

/* furigana offset for furigana-less items */
.vocab-horizontal.helper-present #question-list .quiz-item { margin-bottom:18px; }

/* kanji reading/meanings drag style */
.kanji-readings.drag-quiz .quiz-answer-zone, .kanji-readings.drag-quiz .quiz-item,
.kanji-meanings.drag-quiz .quiz-answer-zone, .kanji-meanings.drag-quiz #question-list .quiz-item {
  height:48px;
}

.kanji-readings.drag-quiz #question-list .quiz-item,
.kanji-meanings.drag-quiz #question-list .quiz-item {
  line-height:44px;
  font-size:26px;
  padding:3px 10px;
}

/* review exercise button styles */
#review-exercise { margin-top:10px; }
.quiz-over #review-button { display:none; }


/* more exercises style */
.more-exercises { margin-top:10px; }

.more-exercises a.button { margin:3px 0; }
.more-exercises a:before, .more-exercises a:after {
  font-size:18px;
  font-family:FontAwesomeWeb, FontAwesome;
  font-weight:normal;
  vertical-align:middle;
}

.more-exercises a.prev-ex { float:left }
.more-exercises a.prev-ex:before {
  content:"\f060";
  margin-right:10px;
}

.more-exercises a.next-ex { float:right }
.more-exercises a.next-ex:after {
  content:"\f061";
  margin-left:10px;
}


/* EXERCISE LIST */
#exercise-list, #toggle-exercises, #toggle-exercises:after, #toggle-exercises:before { transition-duration:300ms; } /* list transition */
#exercise-list {
  background:#EEE;
  border-right:1px solid #CCC;
  position:fixed;
  top:0;
  left:-301px;
  bottom:0;
  width:300px;
  visibility:hidden;
  z-index:10;
}

#random-exercise {
  height:32px;
  width:32px;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
}

#random-exercise i {
  line-height:32px;
  margin:0;
}

.list-open + #exercise-list {
  left:0;
  visibility:visible;
}

/* toggle button */
#toggle-exercises {
  background:#C60;
  text-decoration:none;
  text-align:center;
  line-height:32px;
  height:32px;
  width:32px;
  position:fixed;
  top:0;
  left:0;
  z-index:11;
  cursor:pointer;
  transition-property:left;
}
#toggle-exercises:hover { background:#D71; }
#toggle-exercises:focus { background:#E82; }

#toggle-exercises:after, #toggle-exercises:before {
  color:#FFF;
  font-size:28px;
  font-family:FontAwesomeWeb, FontAwesome;
  position:absolute;
  left:0;
  right:0;
  transition-property:opacity;
}

#toggle-exercises:after { content:"\f0c9"; }
#toggle-exercises:before {
  content:"\f00d";
  opacity:0;
}

#toggle-exercises.list-open { left:268px; }
#toggle-exercises.list-open:after { opacity:0; }
#toggle-exercises.list-open:before { opacity:1; }

/* lesson list */
#lessons-list {
  overflow-y:auto;
  overflow-x:hidden;
  height:95%;
  height:calc(100% - 32px);
}

/* titles */
#exercise-list .main-title {
  color:#FFF;
  background:#F93;
  font-size:18px;
  text-align:center;
  line-height:32px;
  margin:0;
}

.menu-item-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position:relative;
}

.result--perfect {
  color: #F90;
  font-weight: 600;
}

.result--good {
  color: #080;
  font-weight: 600;
}

.result--average {
  color: #AA0;
  font-weight: 600;
}

.result--low {
  color: #F00;
  font-weight: 600;
}

.exercise-results {
  min-width:65px;
}

.exercise-results .fa {
  font-size:16px;
}

#exercise-list .lesson-title {
  color:#333;
  font-size:15px;
  border-bottom:1px solid #CCC;
  margin:0;
  padding:3px;
  cursor:pointer;
  outline:none;
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}
#exercise-list .lesson-title:hover, #exercise-list .lesson-title:focus { color:#F93; }

#exercise-list .lesson-title:before {
  content:"\f054";
  font-family:FontAwesomeWeb, FontAwesome;
  margin-right:3px;
}
#exercise-list .lesson-title.lesson-open:before { content:"\f078"; }

#exercise-list .sub-lesson-title {
  font-size:14px;
  margin:12px 0 0 12px;
}


/* list and links */
#exercise-list ul {
  border-bottom:1px solid #CCC;
  margin:0;
  padding:3px 3px 12px 3px;
  list-style-type:none;
  display:none;
}
#exercise-list .lesson-title.lesson-open + ul { display:block; }

#exercise-list li a {
  white-space:nowrap;
  text-decoration:none;
  text-overflow:ellipsis;
  overflow:hidden;
  display:block;
}

#exercise-list li a.active-lesson {
  color:#F93;
  font-weight:bold;
}

#exercise-list li a:before {
  content:"\f054";
  color:#333;
  font-family:FontAwesomeWeb, FontAwesome;
  margin-right:3px;
}

#exercise-list li a:hover, #exercise-list li a:focus { color:#F93; }
#exercise-list li a:hover:before, #exercise-list li a:focus:before { color:#F93; }

/* page link icons */
#exercise-list #page-links li:first-child a:before                { content:"\f015" }
#exercise-list #page-links li a[href^="../../../help"]:before     { content:"\f059" }
#exercise-list #page-links li a[href^="../../../report"]:before   { content:"\f188" }
#exercise-list #page-links li a[href^="../../../download"]:before { content:"\f019" }
#exercise-list #page-links li a[href^="../../../donate"]:before   { content:"\f004" }

/* show page num. on hover */
#exercise-list li a[data-page]:hover:after, #exercise-list li a[data-page]:focus:after {
  content:attr(data-page);
  color:#FFF;
  font-size:12px;
  font-weight:normal;
  line-height:12px;
  background:#F93;
  border:1px solid #E82;
  border-radius:3px;
  position:absolute;
  right:3px;
  padding:3px;
}


/* quiz answers */
.quiz-answer-zone:empty:after {
  content:attr(data-text);
  color:transparent;
}

.answer-correct { pointer-events:none; }
.quiz-over.drag-quiz .answer-correct, .review-mode .answer-correct { pointer-events:auto; }

.answer-correct .quiz-item:before, .drag-quiz .answer-correct .quiz-item-text:before {
  content:"\f005\A0";
  font-family:FontAwesomeWeb, FontAwesome;
  color:#F93;
}
.drag-quiz .answer-correct .quiz-item:before { content:""; }

.quiz-over [data-mistakes] { position:relative; }
.quiz-over [data-mistakes] .quiz-item { border-color:#F00; }
.quiz-over [data-mistakes]:after {
  color:#F00;
  content:"\f060\A0 wrong " attr(data-mistakes) "x";
  font-size:14px;
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif, FontAwesomeWeb, FontAwesome;
  display:block;
  position:absolute;
  top:3px;
  right:-85px;
}
.lang-ja .quiz-over [data-mistakes]:after { content:"\f060\A0 不正解 " attr(data-mistakes) "x"; }

.quiz-over .vocab-horizontal [data-mistakes]:after {
  content:"x" attr(data-mistakes);
  font-size:10px;
  font-weight:bold;
  right:3px;
  top:auto;
  bottom:-2px;
}
.quiz-over .vocab-horizontal [data-mistakes="0"]:after { content:""; }

#wrongAnswer { position:relative; }
#wrongAnswer:before {
  content:"\f00d\A0 wrong";
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif, FontAwesomeWeb, FontAwesome;
  font-size:14px;
  color:#F00;
  position:absolute;
  right:-70px;
  pointer-events:none;
}
.lang-ja #wrongAnswer:before { ;content:"\f00d\A0 不正解"; }

.vocab-horizontal #wrongAnswer:before {
  right:auto;
  left:3px;
}

.kana-quiz #wrongAnswer:before {
  content:"\f00d";
  right:-6px;
  top:-10px;
}

.quiz-over [data-mistakes="0"] .quiz-item { border-color:#CCC; }
.quiz-over [data-mistakes="0"]:after { content:""; }


/* drag and drop furigana */
#question-list .quiz-item {
  text-align:center;
}

.helper-present #question-list .quiz-item {
  position:relative;
}

.helper-present #question-list .quiz-item[data-helper], .helper-present #drop-list .quiz-answer-zone.helper-answer {
  margin-bottom:18px;
}

.helper-present .hidden-text {
  visibility:hidden;
  display:block;
  margin-top:-20px;
}

/* hide helpers */
.helper-hidden .hidden-text, .stroke-order-hidden .kanji-stroke-order { display:none; }

/* kana quiz styles */
.kana-quiz #question-list, .kana-quiz #answer-list {
  float:none;
}

.kana-quiz #question-list {
  margin-bottom:30px;
}

.kana-quiz .quiz-item, .kana-quiz .quiz-answer-zone {
  text-align:center;
  display:inline-block;
}

.kana-quiz .quiz-item, .kana-quiz .quiz-answer-zone:empty {
  height:30px;
  width:35px;
  line-height:22px;
  box-sizing:border-box;
}

.kana-quiz .quiz-column {
  margin:0 5px;
  float:left;
}
.kana-quiz .quiz-column:first-child { margin-left:0; }
.kana-quiz .quiz-column:last-child { margin-right:0; }

.kana-quiz .answer-correct .quiz-item { position:relative; }
.kana-quiz .answer-correct .quiz-item:before {
  position:absolute;
  right:-8px;
  top:-5px;
}

.kana-quiz.quiz-over [data-mistakes]:after {
  content:"x" attr(data-mistakes);
  font-size:8px;
  line-height:8px;
  font-weight:bold;
  right:auto;
  top:auto;
  bottom:3px;
  right:4px;
}
.kana-quiz.quiz-over [data-mistakes="0"]:after { display:none; }


/* verb conjugation quiz */
.verb-quiz #answer-list {
  float:none;
  clear:both;
}

.verb-quiz #question-list { width:20%; }
.verb-quiz #drop-list { width:80%; }
.verb-quiz #question-list, .verb-quiz #drop-list { margin-bottom:30px; }

.verb-quiz #answer-list .quiz-item { display:inline-block; }

.quiz-column-title {
  background:#EEE;
  border:1px solid #CCC;
  justify-content:center;
  text-align:center;
  margin:2px 3px;
  padding:3px;
}
.quiz-column-title:last-child { margin-right:0; }

#question-list .quiz-column-title:after {
  content:"\A0";
  display:block;
}

.verb-quiz #question-list > div { margin:3px 3px 3px 0 }
.verb-quiz #question-list .quiz-column-title { margin-top:2px; }

.verb-quiz #drop-list > div, .verb-quiz #drop-list > div > div {
  white-space:nowrap;
  display:flex;
  flex:1;
}

.verb-quiz .quiz-answer-zone .quiz-item {
  margin:0;
  padding:0;
  border:none;
  background:none;
}

.verb-quiz .quiz-answer-zone { margin:1px 3px 2px 3px !important; }
.verb-quiz .quiz-answer-zone:last-child { margin-right:0 !important; }
.verb-quiz .quiz-answer-zone:not(:empty) {
  background:#EEE;
  border:1px solid #CCC;
  padding:3px;
  margin:3px;
}

.verb-quiz.quiz-over [data-mistakes] { border-color:#F00; }
.verb-quiz.quiz-over [data-mistakes]:after {
  content:"x" attr(data-mistakes);
  font-size:10px;
  line-height:8px;
  font-weight:bold;
  right:auto;
  top:auto;
  bottom:3px;
  right:4px;
}

.verb-quiz.quiz-over [data-mistakes="0"] { border-color:#CCC; }
.verb-quiz.quiz-over [data-mistakes="0"]:after { display:none; }


/* writing quiz */
.writing-quiz #question-list, .drawing-quiz #question-list { float:none; }

.writing-quiz .quiz-answer-row, .drawing-quiz .quiz-answer-row {
  white-space:nowrap;
  display:flex;
  flex:1;
  margin:0px 3px;
}

.writing-quiz .quiz-answer-row.furi-row { margin-bottom:12px; }

.writing-quiz .quiz-item {
  font-size:14px;
  position:relative;
  /* prevent text copying; we want the student to type the kana */
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

/* overflow scrollbar (none/transparents are dark mode overrides) */
.writing-quiz .quiz-item-text, .vocab-horizontal .quiz-item-text { overflow-x:auto; }

.writing-quiz .quiz-item-text::-webkit-scrollbar, .vocab-horizontal .quiz-item-text::-webkit-scrollbar {
  width:6px;
  height:6px;
}

.writing-quiz .quiz-item-text::-webkit-scrollbar-thumb, .vocab-horizontal .quiz-item-text::-webkit-scrollbar-thumb {
  background-color:#F93;
  border:none;
}

.writing-quiz .quiz-item-text::-webkit-scrollbar-thumb:hover, .vocab-horizontal .quiz-item-text::-webkit-scrollbar-thumb:hover {
  background-color:#E82;
}

.writing-quiz .quiz-item-text::-webkit-scrollbar-thumb:active, .vocab-horizontal .quiz-item-text::-webkit-scrollbar-thumb:active {
  background-color:#D71;
}

.writing-quiz .quiz-item-text::-webkit-scrollbar-track, .vocab-horizontal .quiz-item-text::-webkit-scrollbar-track {
  background:rgba(0, 0, 0, 0.15);
}

.writing-quiz .quiz-item-text::-webkit-scrollbar-button:single-button, .vocab-horizontal .quiz-item-text::-webkit-scrollbar-button:single-button {
  background:transparent;
  height:0px;
  width:0px;
}

/* furigana modifications */
.writing-quiz .helper-present #question-list .quiz-item[data-helper] { margin-bottom:3px; }
.writing-quiz .helper-hidden .quiz-item[data-helper]:before { display:none; }
.writing-quiz .helper-hidden .quiz-answer-row.furi-row { margin-bottom:0; }

.writing-quiz .quiz-item, .writing-zone, .drawing-quiz .quiz-item, .drawing-zone { text-align:center; }

.writing-zone, .drawing-zone {
  margin:3px;
  min-width:25px;
}

input.writing-zone-input {
  font-size:14px;
  font-family:'メイリオ', 'Meiryo', 'Osaka', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, sans-serif;
  text-align:center;
  background:#FFF;
  border:1px solid #CCC;
  box-sizing:border-box;
  width:100%;
  padding:3px 0;
  outline:none;
}
input.writing-zone-input:disabled { color:#333; }
input.writing-zone-input::placeholder { color:#BBB; }
input.writing-zone-input:hover { border-color:#999; }
input.writing-zone-input:focus { border-color:#F93; }

/* custom width */
.even-width .writing-zone, .even-width .writing-zone-input, .max-width .writing-zone, .max-width .writing-zone-input {
  text-align:left;
  width:100% !important;
}
.fill-quiz .even-width .writing-zone-input { padding:3px; }
.max-width .writing-zone, .max-width .writing-zone-input { text-align:center; }

.large-width .writing-zone, .large-width .writing-zone-input {
  width:90% !important;
}

.fill-quiz .set-problem-width .problem, .fill-quiz .set-problem-width .block { width:150px; }
.fill-quiz .set-problem-width-med .problem, .fill-quiz .set-problem-width-med .block { width:200px; }
.fill-quiz .set-problem-width-large .problem, .fill-quiz .set-problem-width-large .block { width:300px; }
.fill-quiz .set-problem-width .problem, .fill-quiz .set-problem-width-med .problem, .fill-quiz .set-problem-width-large .problem,
.fill-quiz .set-problem-width .block, .fill-quiz .set-problem-width-med .block, .fill-quiz .set-problem-width-large .block {
  max-width:100%;
}


/* mark incorrect answer */
.writing-quiz.quiz-over .writing-zone-input { pointer-events:none; }
.writing-quiz.quiz-over [data-mistakes] { border-color:#F00; }

/* mark correct answers */
.writing-quiz.quiz-over [data-mistakes="0"] { border-color:#CCC; }

.writing-zone.answer-correct { position:relative; }
.writing-zone.answer-correct:after {
  content:"\f005";
  font-family:FontAwesomeWeb, FontAwesome;
  color:#F93;
  position:absolute;
  right:-4px;
  top:-4px;
}


/* helper text, similar to furigana */
.writing-quiz .quiz-item:before, .helper-present #question-list .quiz-item:before {
  content:attr(data-helper);
  font-size:11px;
  line-height:15px;
  color:#666;
  background:#CCC;
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* non-practice writing exercises; removes helpers */
.writing-quiz .no-helper [data-helper]:before { display:none; }
.writing-quiz.quiz-over .no-helper [data-helper]:before { display:block; }


/* multi-choice quiz style */
.multi-quiz #question-list { float:none; }
.quiz-multi-row { margin:10px 0; }

.question-block {
  background:#EEE;
  border:1px solid #CCC;
  margin:30px 0;
  position:relative;
}

.question-block:after {
  content:attr(data-qid) ".";
  position:absolute;
  top:-20px;
  left:0px;
}

.quiz-multi-question {
  font-size:14px;
  text-align:center;
  border-bottom:1px solid #CCC;
  padding:5px;
}

.text-block.multi-quiz-image {
  margin:10px 0;
}

.big-kanji { font-size:100px; }
.multi-vocab {
  font-size:32px;
  min-height:64px;
}

.multi-vocab rt {
  font-size:16px;
  margin-top:-8px;
}

.multi-vocab hr { margin:10px 0; }
.multi-vocab-sentence { font-size:24px; }

/* multi-choice vocab spoiler */
.vocab-spoiler-toggle { display:none; }

.spoiler-mode .vocab-spoiler-toggle {
  display:block;
  margin:10px auto 0 auto;
}

.spoiler-mode .vocab-spoiler { position:relative; }
.spoiler-mode .vocab-spoiler:after {
  content:"";
  background:#CCC;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.quiz-over .vocab-spoiler-toggle, .quiz-over .vocab-spoiler:after, .spoiler-off.vocab-spoiler:after {
  display:none;
}


/* stroke order quiz */
.kana-font { font-family:"NotoSansJP", "SawarabiGothic", "MS Gothic", "Yu Gothic", "Meiryo" }
.drawing-quiz .quiz-item-text.kana-font { margin-top:-7px }
.drawing-quiz .quiz-item { overflow:hidden; }

.kanji-container { display:inline-block; }
.kanji-canvas {
  background:#FFF;
  border:1px solid #CCC;
  display:block;
  margin:0 auto;
  outline:none;
}

.kanji-canvas:focus {
  border-color:#F93;
  border-color:rgba(255, 153, 51, 0.50);
}

/* furigana */
.furigana, .inline-furi i {
  color:#777;
  font-size:11px;
  margin-top:-3px;
}

ruby {
  /* START ruby-position:under; hack */
  text-align:center;
  display:inline-block;
  /*OLD: (replaced w/valign:top)
  position:relative;
  bottom:-16px;
  margin:-16px 0 16px 0;*/
  vertical-align:top;
  /* END   ruby-position:under; hack */
}

.helper-hidden ruby {
  display:inline;
  position:static;
  vertical-align:baseline;
}

ruby rt {
  color:#777;
  /* START ruby-position:under; hack */
  font-size:11px; /* if font size is changed, various values will need to be adjusted */
  display:block;
  text-align:center;
  /*OLD: (w/valign:top this doesn't seem necessary)
  height:15px;
  line-height:15px;*/
  margin-top:-1px;
  /* END   ruby-position:under; hack */
  padding:0 2px;
}

#announcement ruby rt, .workbook-title ruby rt, .main-color ruby rt, .section-title ruby rt, .lesson-title ruby rt {
  color:#B50;
}

.t-red ruby rt { color:#900; }

#quick-nav-list li a ruby rt,  a ruby rt, #quick-search-results ruby rt {
  color:#367;
}

/* hover to view furigana for multi-choice vocab */
.helper-hidden .multi-vocab ruby {
  display:inline-block;
  vertical-align:top;
}

.helper-hidden .multi-vocab rt {
  display:block;
  visibility:hidden;
}

.helper-hidden .multi-vocab ruby:hover rt {
  visibility:visible;
}

/* for single characters */
.slim-ruby ruby { width:10px; }

/* for non-furigana use */
.ruby-always-visible ruby {
  display:inline-block !important;
  position:relative !important;
}
.ruby-always-visible rt { display:block !important; }

#quiz-info .furigana, #quiz-info .inline-furi i, #quiz-info ruby rt {
  color:#CCC;
  color:rgba(255, 255, 255, 0.6);
}

.helper-hidden .furigana, .helper-hidden .inline-furi i, .helper-hidden ruby rt { display:none; }

/* inline furigana */
.inline-furi {
  position:relative;
  display:inline-block;
  margin-bottom:15px;
}
.helper-hidden .inline-furi { margin-bottom:0; }

.inline-furi .furigana, .inline-furi i {
  text-align:left;
  font-style:normal;
  white-space:nowrap;
  position:absolute;
  bottom:-15px;
  left:0;
}

/* images */
.quiz-multi-question .lesson-image img {
  border:1px solid #CCC;
  margin:3px;
}

.quiz-multi-answer {
  color:#333;
  font-size:14px;
  text-rendering:auto;
  background:#FFF;
  border:1px solid #CCC;
  padding:6px;
  display:block;
  width:50%;
  margin:0 auto;
  cursor:pointer;
  outline:none;
  position:relative;
  box-sizing:border-box;
  align-items:flex-start;
  text-align:center;
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

.quiz-answer-inner-text, .quiz-question-inner-text {
  display:inline-block;
  text-align:left;
}

.text-selection-mode .quiz-multi-answer {
  cursor:text;
  outline:1px dashed #F93;
  -webkit-touch-callout:auto;
    -webkit-user-select:auto;
     -khtml-user-select:auto;
       -moz-user-select:auto;
        -ms-user-select:auto;
            user-select:auto;
}

.quiz-multi-answer:before {
  content:attr(data-option) ":";
  font-size:18px;
  font-weight:400;
  font-family:Arial;
  position:absolute;
  left:-25px;
  top:50%;
  margin-top:-10px;
}

.quiz-multi-answer:hover, .quiz-multi-answer:focus {
  border-color:#F93;
}

.quiz-multi-answer:hover:before, .quiz-multi-answer:focus:before {
  color:#F93;
}

.multi-quiz.quiz-over .quiz-multi-answer { pointer-events:none; }
.multi-quiz.quiz-over .text-selection-mode .quiz-multi-answer { pointer-events:auto; }

.multi-quiz.quiz-over .wrong-answer .quiz-multi-answer.selected-answer, .multi-quiz.quiz-over .wrong-answer .quiz-multi-answer[data-answer="true"], .multi-quiz.quiz-over .quiz-multi-answer.selected-answer {
  border-width:3px;
}

.multi-quiz.quiz-over .quiz-multi-answer.selected-answer { border-color:#080; }
.multi-quiz.quiz-over .quiz-multi-answer.selected-answer:before, .multi-quiz.quiz-over .quiz-multi-answer[data-answer="true"]:before { color:#080; }

.multi-quiz.quiz-over .wrong-answer .quiz-multi-answer.selected-answer { border-color:#F00; }
.multi-quiz.quiz-over .wrong-answer .quiz-multi-answer.selected-answer:before { color:#F00; }

.multi-quiz.quiz-over .wrong-answer .quiz-multi-answer[data-answer="true"] { border-color:#09F; }
.multi-quiz.quiz-over .wrong-answer .quiz-multi-answer[data-answer="true"]:before { color:#09F; }

.kanji-canvas[data-answer="true"] { border-color:#080; }
.kanji-canvas[data-answer="false"] { border-color:#F00; }
.quiz-over .kanji-canvas { pointer-events:none; }
.stroke-quiz.quiz-over .next-question,  .quiz-over .kanji-canvas-actions { display:none; }

/* stroke order button */
.kanji-stroke-order .button-link {
  display:inline-block;
  vertical-align:top;
}

.kanji-stroke-order .button {
  color:#333;
  background:#FFF !important;
  border:1px solid #DEDEDE !important;
  height:30px;
  width:30px;
  padding:0;
  margin:0 0 0 0px;
}

.kanji-stroke-order .button i {
  font-size:14px;
  margin-right:0;
}

.kanji-stroke-order .button:hover, .kanji-stroke-order .button:focus {
  color:#F93;
}

/* read-only questions */
#exercise .text-passage {
  font-size:16px;
  text-align:left;
  width:80%;
  overflow:auto;
  padding:25px;
  margin:15px auto;
}

.quiz-multi-answer.next-question:before {
  content:"\f061";
  font-family:FontAwesomeWeb, FontAwesome;
  left:auto;
  right:6px;
  margin-top:-9px;
}
.hidden-answer { display:none; }


/* progress bar */
#quiz-progress {
  border:1px solid #F93;
  height:25px;
  position:relative;
  overflow:hidden;
}

#quiz-progress-bar {
  background:#F93;
  font-weight:bold;
  height:25px;
  transition:300ms;
}

#quiz-progress-text {
  color:#000;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  line-height:26px;
}


/* FILL IN THE BLANK QUIZZES */
.text-block {
  font-size:14px;
  background:#EEE;
  border:1px solid #CCC;
  margin:30px auto;
  padding:15px;
  overflow-x:auto;
}

.text-block .sub-section {
  background-color:#FFF;
  border:1px solid #DDD;
  padding:6px;
}

.text-block　.sub-section .sub-section {
  background-color:rgba(0, 0, 0, 0.05);
  border-color:rgba(0, 0, 0, 0.08);
}

.text-block p { margin:0 0 25px 0; }
.audio-block { margin:25px 0 25px 0; }
.fill-quiz .inner-problem { display:inline-block; }
.fill-quiz .problem, .fill-quiz .example-problem, .fill-quiz .big-margin { margin-bottom:40px; }
.fill-quiz .small-margin .problem, .fill-quiz .small-margin .block { margin-bottom:25px; }
.fill-quiz .no-margin .problem, .fill-quiz .no-margin .block { margin-bottom:0px; }
.fill-quiz .inline-problem .problem, .fill-quiz .inline-problem .block {
  vertical-align:top;
  display:inline-block;
  margin-right:25px;
}
.fill-quiz .inline-problem.large-space .problem, .fill-quiz .inline-problem.large-space .block { margin-right:50px; }

.fill-quiz .image-margin img, .margin { margin:3px; }

.fill-quiz span.problem {
  display:inline-block;
  margin:0;
}

.fill-quiz .alt-phrase {
  color:#09F;
  font-weight:bold;
}
.fill-quiz .alt-phrase-sep { color:#06C; }

.label, .sm-label, .med-label, .big-label {
  display:inline-block;
  width:120px;
  max-width:100%;
}

.genki-settings-list .label .desc {
  display:block;
  font-weight:normal;
}

.sm-label { width:80px; }
.med-label { width:200px; }
.big-label { width:300px; }

/* image list */
.image-list span {
  position:relative;
  display:inline-block;
  margin:0 25px 25px 0;
}

.image-list span i {
  color:#333;
  font-size:13px;
  font-weight:bold;
  font-style:normal;
  position:absolute;
  top:2px;
  left:4px;
  z-index:1;
}

/* columns */
.columns-2 > div {
  width:50%;
  margin:0 0 25px 0;
  float:left;
}

.valign-top.inline-columns > div { vertical-align:top }
.inline-columns > div {
  display:inline-block;
  margin:0 10px 30px 0;
}

.problem.inline-columns > div, .example-problem.inline-columns > div { margin-bottom:40px; }
.problem.inline-columns, .example-problem.inline-columns {
  position:relative;
  padding-left:30px;
  margin:0;
}
.example-problem.inline-columns { padding-left:62px; }

.problem.inline-columns:before, .example-problem.inline-columns:before {
  position:absolute;
  left:0px;
}


/* indentation */
.indent-block { margin-left:20px; }

/* section descriptions */
.section-desc, .sectionDesc3rd {
  font-weight:bold;
  margin:20px 0;
}

.section-number {
  font-weight:normal;
  text-align:center;
  border:1px solid #333;
  border-radius:100%;
  display:inline-block;
  height:22px;
  width:22px;
  line-height:21px;
  box-sizing:border-box;
  vertical-align:middle;
  cursor:default;
}

.sectionNumber3rd {
  font-size:12px;
  font-weight:bold;
  text-align:center;
  background-color:#CCC;
  border:1px solid #999;
  border-radius:100%;
  display:inline-block;
  height:22px;
  width:22px;
  line-height:21px;
  box-sizing:border-box;
  vertical-align:middle;
  letter-spacing:-2px;
  padding-right:2px;
  cursor:default;
}

.sectionNumber3rd.fa { letter-spacing:-4px; }

.sectionDesc3rd { padding-left:28px; }
.sectionDesc3rd .sectionNumber3rd { margin:0 6px 0 -28px; }

.yomikata { margin-right:5px; }
.section-number, .sectionNumber3rd, .yomikata {
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

/* counter for problems */
.count-problems { counter-reset:problems; }
.count-problems .problem:before {
  counter-increment:problems;
  content:counter(problems) ".";
  margin-right:6px;
  vertical-align:top;
}

.example-problem:before {
  content:"Example";
  color:#F93;
  border:1px solid #F93;
  border-radius:5px;
  padding:2px;
  font-size:12px;
  line-height:12px;
  display:inline-block;
  margin-right:6px;
  vertical-align:top;
}

.count-problems.count-alpha .problem:before {
  content:counter(problems, lower-alpha) ".";
}

.count-problems td.problem { margin:0; }
.count-problems td.problem:before {
  float:left;
  margin-left:5px;
}

/* input style */
.fill-quiz .writing-zone {
  background:none;
  display:inline-block;
  vertical-align:top;
  margin:0 1px;
  min-width:0;
}
.fill-quiz .valign-off .writing-zone { vertical-align:0; }
.fill-quiz .valign-top .writing-zone, .valign-top .button.play-button { vertical-align:top; }
.fill-quiz .pad-zones .writing-zone {
  vertical-align:top;
  margin-bottom:25px;
}
.fill-quiz .big-margin.pad-zones .writing-zone { margin-bottom:40px; }

.fill-quiz .writing-zone-input {
  font-size:14px;
  background:none;
  border:none;
  border-bottom:2px solid #999;
  width:auto;
  padding:0;
}

.fill-quiz .writing-zone-input::placeholder { color:#999; }
.fill-quiz .writing-zone-input:hover { border-color:#666; }
.fill-quiz .writing-zone-input:focus { border-color:#F93; }

/* hint/correct answer under input */
.problem-hint, .problem-answer {
  font-size:14px;
  display:block;
  height:20px;
  line-height:20px;
  margin-bottom:-20px;
}

.problem-answer { color:#080; }
.secondary-answer {
  font-size:11px;
  line-height:10px;
  display:block;
}
.secondary-answer.furigana-only { color:#666; }

/* vocab key style */
.vocab-key {
  padding-top:30px;
  margin:15px auto;
  position:relative;
  border:1px solid #999;
}

.vocab-key > div {
  padding:6px;
  box-sizing:border-box;
  margin-bottom:0;
}

.vocab-key > div:last-child {
  border-left:1px solid #999;
  margin-left:-1px;
}
.vocab-key > div:first-child {
  border-right:1px solid #999;
  border-left:none;
}

.vocab-key:before {
  content:"単　語";
  font-size:20px;
  text-align:center;
  border-bottom:1px solid #999;
  height:30px;
  line-height:34px;
  position:absolute;
  top:0;
  left:0;
  right:0;
}


/* optional parent class to add a background to answers for contrast */
.show-bg .problem-answer, .show-bg .secondary-answer {
  background:#FFF;
  background:rgba(255, 255, 255, 0.5);
  border:1px solid #CCC;
  border-color:rgba(204, 204, 204, 0.7);
  border-top:none;
}

.show-bg .problem-answer {
  border-bottom:none;
  position:relative;
  z-index:1;
}

.show-bg .secondary-answer {
  line-height:14px;
  margin:0 -1px 0 -1px;
}

/* hide hints */
[data-mistakes="1"] + .problem-hint { display:none; }

/* view hints on hover for incorrect answers */
.quiz-over .writing-zone:hover [data-mistakes="1"] + .problem-hint { display:block; }
.quiz-over .writing-zone:hover [data-mistakes="1"] + .problem-hint + .problem-answer { display:none; }

/* mark incorrect answer */
.fill-quiz.quiz-over .writing-zone-input { pointer-events:none; }
.fill-quiz.quiz-over [data-mistakes] { border-color:#F00; }

/* mark correct answers */
.fill-quiz.quiz-over [data-mistakes="0"] { border-color:#080; }
.fill-quiz .writing-zone.answer-correct:after { display:none; }

/* add margin for fields inside a table */
.fill-quiz td .writing-zone { margin-bottom:5px; }
.fill-quiz.quiz-over td .writing-zone { margin-bottom:40px; }
.fill-quiz.quiz-over td .problem-answer { white-space:nowrap; }


/* RESULT LIST */
#complete-banner {
  color:#FFF;
  background:#F93;
  font-size:16px;
  font-weight:bold;
  padding:5px;
}

#result-list {
  background:#EEE;
  border:1px solid #CCC;
}

.result-row {
  border-bottom:1px solid #CCC;
  padding:3px;
}

.result-row:last-child { border:none; }

.result-label {
  text-align:right;
  font-weight:bold;
  display:inline-block;
  width:150px;
  margin-right:5px;
}

/* improve list link clickability */
#lessons li a { display:inline-block; }
#lessons li a, #exercise-list li a { padding:3px 0; }


/* STUDY TOOLS */
/* friendly user interface styles */
#study-tool-ui {
  overflow:auto;
  max-height:300px;
}

/* remove margin on icon only buttons */
#study-tool-ui .button .fa { margin:0; }

/* hide remove button on only-child */
#study-tool-editor ol > li:only-child > .button.row-remove, #study-tool-editor ul > li:only-child > .button.row-remove {
  display:none;
}

#study-tool-ui li {
  margin:5px 0;
}

/* sentence field */
#study-tool-ui .sentence-field {
  display:none;
  width:50%;
  margin-top:5px;
}

.show-sentences #study-tool-ui .sentence-field { display:block; }

/* textarea size for the JSON code */
#study-tool-code textarea {
  height:100px;
  width:80%;
}

/* study tool settings */
#study-tool-settings {
  margin:5px 0;
  padding:0;
  font-size:0;
}

#study-tool-settings li {
  list-style-type:none;
  display:inline-block;
  margin-right:10px;
  font-size:14px;
}

#study-tool-settings .button { margin:0; }

#study-tool-settings label {
  cursor:pointer;
  vertical-align:top;
  font-weight:bold;
}

#downloadCode:before, #loadCode:before {
  font-family:FontAwesomeWeb, FontAwesome;
  font-weight:normal;
  font-size:16px;
  margin-right:4px;
  vertical-align:middle;
}
#downloadCode:before { content:"\f019"; }
#loadCode:before { content:"\f093"; }
#study-tool-file {
  visibility:hidden;
  position:absolute;
}

/* custom quiz styles */
#study-tool-ui .item-row.question-row {
  background:#EEE;
  border:1px solid #CCC;
  padding:6px;
  margin:10px;
}

.item-row.question-row { position:relative; }
.item-row.question-row > .button {
  position:absolute;
  top:0;
  right:0;
}

.item-row.question-row > .button.row-add { right:40px; }
.item-row.question-row:only-child > .button.row-add { right:0; }

.item-row.question-row textarea { width:80%; }
.item-row.question-row input[type="text"] { width:50%; }

/* custom written quiz styles */
#study-tool-ui.written-quiz {
  list-style-type:none;
  padding:0;
  overflow:visible;
}

#study-tool-ui.written-quiz textarea {
  width:80%;
  height:150px;
}


/* GENKI MODAL */
#genki-modal-overlay {
  background:#000 no-repeat center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
  z-index:9999;
}

#genki-modal-body {
  background:#FFF;
  border:1px solid #F93;
  position:fixed;
  top:10%;
  left:25%;
  right:25%;
  bottom:40%;
  z-index:99999;
}

#genki-modal-header {
  color:#FFF;
  background:#F93;
  margin:0;
  padding:0 6px;
  height:40px;
  line-height:40px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

#genki-modal-content {
  font-size:15px;
  padding:6px;
  position:absolute;
  top:40px;
  left:0;
  right:0;
  bottom:40px;
  overflow-y:auto;
}

#genki-modal-buttons {
  height:40px;
  line-height:40px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

#genki-modal-buttons .button {
  line-height:normal;
  margin:0 6px 0 6px;
}


/* BREAK TIME */
#break-minutes { width:50px; }

#break-timer {
  font-weight:bold;
  font-size:24px;
  position:absolute;
  top:25%;
  left:0;
  right:0;
}

.taking-a-break #genki-modal-header, .taking-a-break #genki-modal-body, .taking-a-break #genki-modal-overlay {
  transition:1s;
}

.taking-a-break #genki-modal-buttons button { display:none }
.taking-a-break #genki-modal-header {
  text-align:center;
  background-color:rgba(255, 153, 51, 0.7);
}

.taking-a-break #genki-modal-body {
  background-color:rgba(255, 255, 255, 0.7);
  border-color:rgba(255, 153, 51, 0.7);
}

.taking-a-break #genki-modal-overlay {
  background-size:cover;
  opacity:1;
}


/* SETTINGS MANAGER */
#genki-site-settings {
  font-size:26px;
  display:inline-block;
  height:20px;
  line-height:20px;
  margin-left:15px;
}
#genki-site-settings:focus { color:#F93; }
#genki-site-settings i { vertical-align:-5px; }

.genki-settings-list { list-style-type:none; }
.genki-settings-list li { margin:10px 0; }

.genki-settings-list .label {
  width:40%;
  margin-right:10px;
  text-align:right;
  font-weight:bold;
  vertical-align:top;
  cursor:help;
}

#page-custom-css {
  width:50%;
  height:100px;
}

.button.opt-off { background-color:#999; }
.button.opt-off:hover { background-color:#888; }
.button.opt-off:focus { background-color:#777; }


/* DARK MODE */
#light-switch-container {
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

#light-switch-label {
  vertical-align:middle;
  cursor:pointer;
}

#light-switch {
  background-color:rgba(0, 0, 0, 0.25);
  border:1px solid rgba(0, 0, 0, 0.25);
  vertical-align:middle;
  display:inline-block;
  position:relative;
  height:26px;
  width:60px;
  border-radius:20px;
  cursor:pointer;
  overflow:hidden;
}

#light-switch:focus {
  border:1px solid #F93;
  outline:none;
}

#light-switch > input { display:none; }
#light-switch > div {
  background-color:rgba(255, 255, 255, 0.5);
  position:absolute;
  top:3px;
  left:3px;
  height:20px;
  width:20px;
  border-radius:20px;
  transition:.4s;
  font-size:13px;
  font-weight:700;
  line-height:22px;
}

#light-switch > div:before {
  content:'ON';
  margin-left:-27px;
  color:transparent;
  transition:400ms;
}

#light-switch > div:after {
  content:'OFF';
  margin-left:30px;
  color:rgba(255, 255, 255, 0.5);
  transition:400ms;
}

#light-switch > input:checked + div {
  background-color:#FFF;
  left:37px;
}

#light-switch > input:checked + div:before { color:#FFF; }
#light-switch > input:checked + div:after { color:transparent; }


/* CUSTOM INPUTS */
/* checkboxes and raido inputs */
.genki_pseudo_checkbox, .genki_pseudo_radio {
  display:inline-block;
  text-align:center;
  background:#FFF;
  border:1px solid #CCC;
  height:16px;
  width:16px;
  vertical-align:middle;
  margin-right:3px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.genki_pseudo_checkbox:hover, .genki_pseudo_radio:hover,
.genki_pseudo_checkbox:focus, .genki_pseudo_radio:focus {
  border-color:#F93;
  outline:none;
}

/* disabled */
input[disabled] + .genki_pseudo_checkbox, input[disabled] + .genki_pseudo_radio {
  opacity:0.5;
  cursor:not-allowed;
}

/* radio */
.genki_pseudo_radio { border-radius:100%; }
.genki_pseudo_radio:before, .genki_pseudo_radio:after, input:checked + .genki_pseudo_radio:after {
  content:"";
  font-size:0;
  border-radius:100%;
  position:absolute;
  top:3px;
  left:3px;
  height:10px;
  width:10px;
}

.genki_pseudo_radio:before { background:#CCC; }
.genki_pseudo_radio:after {
  background:#F93;
  top:8px;
  left:8px;
  height:0;
  width:0;
}

/* checkbox */
.genki_pseudo_checkbox:after {
  content:"\f00c";
  color:#F93;
  font-family:FontAwesomeWeb, FontAwesome;
  font-size:0px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  line-height:16px;
}

input:checked + .genki_pseudo_checkbox:after { font-size:14px; }
.genki_input_hidden {
  visibility:hidden;
  position:absolute;
}

.checkbox-label {
  font-size:13px;
  font-weight:bold;
  cursor:pointer;
}


/* APPENDIX */
/* dictionary */
.dict-block {
  margin-top:50px;
}

.dict-hidden {
  display:none;
}

.dict-desc {
  padding:3px;
}

.leg-desc {
  font-size:12px;
  vertical-align:top;
}

#dictionary-modes .button {
  border:2px solid transparent;
}

#dictionary-modes .button.active-mode {
  color:#F93;
  border-color:#F93;
  background-color:transparent;
  cursor:default;
}

#dict-legend .text-block { margin:3px; }
#dict-legend .text-block div { margin:3px 0; }

/* index */
.dictionary-index {
  margin:3px;
  padding:3px;
}

#japanese-english .dictionary-index ul {
  float:left;
  padding:3px;
  margin:0;
}
#japanese-english .dictionary-index ul.dict-index-split { margin-left:10px; }

.dictionary-index li {
  list-style-type:none;
  margin:0 3px;
  float:left;
}
#japanese-english .dictionary-index li { float:none; }

.dictionary-index li {
  font-weight:bold;
  font-size:18px;
}

.dictionary-index li a { color:#F93; }
.dictionary-index li a:hover { color:#C60; }

.dict-index-disabled {
  opacity:0.5;
  cursor:default;
}

.dictionary-index.dict-alpha li {
  margin:0 8px;
}

/* search */
.dict-search-wrapper { margin:3px; }

.dict-search {
  width:100%;
  box-sizing:border-box;
}

.dict-search-results { 
  border:1px solid #CCC;
  margin:0;
}

.dict-search-results:empty { border-color:transparent; }
.dict-search-results:not(:empty) {
  height:250px;
  padding:3px;
  overflow:auto;
  position:relative;
}

/* selected word manager */
#selected_words_list.dict-search-results .definition {
  list-style-type:decimal;
  list-style-position:inside;
}

#selected_words_list.dict-search-results {
  width:80%;
  height:80%;
  padding:5px 10px;
  margin:0 auto;
}

/* groups */
.dictionary-group {
  float:left;
  width:48.5%;
  margin-right:1.5%;
  padding:0;
}
.dictionary-group:nth-of-type(even) { margin-right:3%; }
.dictionary-group:nth-of-type(odd) { margin-right:0; }

.dictionary-group .word-list { padding:0; }
.dictionary-group .word-list.hidden { display:none; }


/* select/deselect buttons */
.group-selectors.hidden { display:none; }
.group-selectors .select-all:before, .group-selectors .deselect-all:before {
  font-size:17px;
  font-family:FontAwesomeWeb, FontAwesome;
  font-weight:normal;
  vertical-align:middle;
  margin-right:10px;
}

.group-selectors .select-all:before { content:"\f046"; }
.group-selectors .deselect-all:before { content:"\f096"; }

.dictionary-group .group-selectors .button, .dict-search-wrapper .group-selectors .button {
  padding:3px 6px;
  margin:3px 0;
  width:30px;
  height:30px;
}

.dictionary-group .group-selectors .select-all:before, .dictionary-group .group-selectors .deselect-all:before, 
.dict-search-wrapper .group-selectors .select-all:before, .dict-search-wrapper .group-selectors .deselect-all:before {
  margin:0;
}

.definition-count {
  font-size:16px;
  vertical-align:top;
  margin-left:8px;
}

/* definitions */
.definition {
  font-size:14px;
  list-style-type:none;
  margin:6px 0;
  overflow:hidden;
}

.def-ja.def-furi {
  position:relative;
  display:inline-block;
  margin-bottom:15px;
}

.def-ja.def-furi i {
  color:#777;
  font-size:11px;
  font-style:normal;
  white-space:nowrap;
  position:absolute;
  bottom:-15px;
  left:0;
}

#japanese-english .def-ja, #english-japanese .def-en, #quick-jisho-results .def-ja {
  margin-right:8px;
}

.def-label { float:right; }


/* QUICK JISHO */
#quick-jisho-toggle {
  color:#FFF;
  font-size:18px;
  text-align:center;
  line-height:32px;
  background:#F93;
  height:30px;
  width:30px;
  border-radius:100%;
  position:fixed;
  right:5px;
  bottom:5px;
  cursor:pointer;
  z-index:11;
}

#quick-jisho-toggle:hover, #quick-jisho-toggle:focus {
  opacity:0.7;
  outline:none;
}

#quick-jisho-window {
  background:#FFF;
  border:1px solid #CCC;
  box-shadow:0px 0px 6px rgba(0, 0, 0, 0.25);
  height:300px;
  width:500px;
  max-height:85%;
  max-width:90%;
  position:fixed;
  right:5px;
  bottom:40px;
  opacity:1;
  transition-duration:300ms;
  transition-property:opacity, bottom;
  z-index:10;
}

#quick-jisho-window.quick-jisho-hidden {
  bottom:-310px;
  opacity:0;
}

.quick-jisho-header {
  background: #f93;
  display: flex;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
}

#quick-jisho-title {
  flex: 1;
  display: flex;
  justify-content: center;
  color: #fff;
  line-height: 32px;
  font-size: 18px;
  margin: -1px -1px 0 -1px;
  margin-left: 18px;
}

.quick-jisho-row { padding:3px; }
.quick-jisho-row:first-child { padding-bottom:0px; }

#quick-jisho-search {
  width:100%;
  height:35px;
  box-sizing:border-box;
}

#quick-jisho-results {
  height:219px;
  padding:3px;
  margin:0;
  overflow-y:auto;
}

/* focus style for when tabbing through quick jisho results; highlights the text */
#quick-jisho-results .definition:focus {
  color:#F93;
  outline:none;
}

#quick-jisho-selector {
  border-radius:15px;
  border:1px solid rgba(0, 0, 0, 0.15);
  box-shadow:0px 0px 3px rgba(0, 0, 0, 0.25);
  padding:3px 9px;
  margin:0;
  position:absolute;
  z-index:9999;
}


/* GRAMMAR INDEX */
.setsumei:before {
  content:"Please see the following page(s) in your textbook for an explanation on this topic.";
  display:block;
  margin-bottom:5px;
}

.setsumei .first:after {
  content:"1st";
}

.setsumei .second:after {
  content:"2nd";
}

.setsumei .third:after {
  content:"3rd";
}

.setsumei .first:after, .setsumei .second:after, .setsumei .third:after {
  color:#FFF;
  font-size:11px;
  font-weight:bold;
  background:#F93;
  border:1px solid #E82;
  border-radius:3px;
  padding:0px 2px;
  margin-left:4px;
  vertical-align:top;
  display:inline-block;
  text-align:center;
  width:25px;
}

.grammar-index .wip {
  color:#333;
  background:#F9BF3A;
  border:2px solid #333;
  border-radius:10px;
  text-align:center;
  font-size:16px;
  font-weight:bold;
  margin:5px auto;
  padding:5px;
  max-width:500px;
  box-shadow:0 0 3px #F9BF3A, 0 0 3px #F9BF3A, 0 0 3px #F9BF3A;
}

.grammar-index .grammar-table ul li { margin-bottom:5px; }
.grammar-index .grammar-table .ex-list ul li, .grammar-index .grammar-table .sup-list ul li { margin-bottom:0px; }
.grammar-index .grammar-table .sup-list ul { margin-bottom:5px !important; }

.grammar-index #quick-nav-list .page-data, .grammar-index .second-ed .ex-list { display:none; }

.grammar-index #quick-search-results li {
  padding:1px;
}

.grammar-index .page-data {
  font-size:12px;
  color:#FFF;
  background:#F93;
  border:1px solid #E82;
  padding:3px 6px;
  border-radius:30px;
}

.grammar-index .lesson-title, .grammar-index .workbook-title, .grammar-index #quick-search-results { position:relative; }
.grammar-index .lesson-title .page-data, .grammar-index .workbook-title .page-data {
  position:absolute;
  right:30px;
}

.grammar-index #quick-search-results .page-data, .grammar-index #genki-modal-content .workbook-title .page-data {
  position:absolute;
  right:3px;
}

.grammar-index .example {
  border:1px solid #CCC;
  border-left:3px solid #F93;
  margin:10px 5px;
  padding:5px;
  background:#FFF;
}

.grammar-index .example .line .name:after { content:":"; }
.grammar-index .example .line .name {
  font-weight:bold;
  text-align:right;
  float:left;
  width:25%;
  padding-right:5px;
  word-wrap:break-word;
}

.grammar-index .example .line .text {
  float:left;
  width:72%;
}

.grammar-index .example.AB .line .name { width:10% }
.grammar-index .example.AB .line .text { width:87% }

.grammar-index .line:after {
  content:"";
  display:table;
  clear:both;
}

.grammar-index .columns-2-in > div.example {
  display:inline-block;
  width:47%;
  margin:10px 5px;
  vertical-align:top;
  box-sizing:border-box;
}

.dark-mode .grammar-index .example {
  background:#161616;
  border-color:#333;
  border-left-color:#F93;
}

.grammar-index .workbook-title {
  color:#F93;
  font-size:16px;
  margin:0 0 0 20px;
}

.grammar-index li a {
  display:inline-block;
  padding:3px;
}

.grammar-index .lesson-title {
  margin-bottom:20px;
}

.grammar-index .workbook-title {
  margin-bottom:10px;
  margin-left:0;
}

.grammar-index .table.grammar-table .table { margin:10px 0; }

.grammar-index .table.grammar-table td {
  font-size:15px;
}

.grammar-index .table.grammar-table > tbody > tr > td:nth-child(2), .grammar-index .table td { background:#F7F7F7 }
.grammar-index .table.grammar-table > tbody > tr > td:first-child, .grammar-index .table .table-head td {
  width:60px;
  font-weight:bold;
  text-align:center;
  background:#EEE;
}
.dark-mode .grammar-index .table.grammar-table > tbody > tr > td:first-child, .dark-mode .grammar-index .table .table-head td { background:#222 !important; }
.dark-mode .grammar-index .table.grammar-table > tbody > tr > td:nth-child(2), .dark-mode .grammar-index .table td { background:#1A1A1A; }
.dark-mode .grammar-index .table.alt-cell-color td { background-color:#161616; }

.grammar-index .table.grammar-table ul, .grammar-index .table.grammar-table ol, .grammar-index .table ul, .grammar-index .table ol {
  margin:0;
  padding-left:30px;
}

.grammar-index .lesson-exercises { display:none; }
.grammar-index .grammar-toggler { margin-bottom:10px; }

@media (max-width:1000px) {
  .grammar-index .columns-2-in > div.example {
    display:block;
    width:auto;
  }
}


/* DRAGULA CSS */
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}


/* OS FIXES:DISABLED */
/*.os-linux .sectionNumber3rd, .os-linux #quick-jisho-toggle, .os-linux .section-number {
  line-height:normal;
}

.os-linux .sectionNumber3rd.fa, .os-linux .section-number.fa {
  line-height:22px;
}*/

/* ADS */
.ad-container {
  text-align:center;
  margin:25px 0;
}

/* RESPONSIVENESS */
@media (max-width:1000px) {
  /* wrapper's max-width is 1000px, so remove padding so the page takes up the whole screen */
  .content-block { padding:30px 0; }
  #announce-inner { padding:0 6px; }
  
  /* footer links */
  footer li {
    float:none;
    display:inline-block;
  }
  
  footer li:before { margin-left:0; }
  
  .footer-left, .footer-right {
    float:none;
    text-align:center;
    margin-bottom:10px;
  }
  
  #light-switch-container {
    height:auto;
    margin-top:0;
  }

  /* add a bit of padding to other elements, specifically for the index and other such pages */
  p, h2, h3, h4, #quick-search-wrapper, .normal-block {
    padding:0 6px;
  }
  
  /* adjust anchor position */
  a.anchor {
    margin:0 0 0 -5px;
  }
  
  .sub-lesson-title a.anchor, .workbook-title a.anchor, .center a.anchor {
    margin:0 0 0 -25px;
  }

  /* remove margin in kana columns to reduce wrapping */
  .kana-quiz .quiz-column { margin:0; }
  
  /* increase the size of text passages in multi-choice quizzes */
  .text-passage { width:90%; }
  
  /* increase the size of multiple choice answers */
  .quiz-multi-answer { width:80%; }

  /* centers the more exercises buttons so they wrap neatly */
  .more-exercises { text-align:center; }
  .more-exercises a.button {
    float:none;
    margin:3px;
  }
  
  /* modal */
  #genki-modal-header { font-size:16px; }
  #genki-modal-content { font-size:14px; }
  #genki-modal-body {
    left:10%;
    right:10%;
    bottom:20%;
  }
}

@media (max-width:930px) {
  /* drawing quiz responsiveness */
  .drawing-quiz .drawing-zone {
    width:auto !important;
    margin:3px auto;
  }
  
  .drawing-quiz .quiz-answer-row {
    flex-wrap:wrap;
    padding-bottom:25px;
    margin-bottom:25px;
    border-bottom:3px dashed #F93;
  }
}

@media (max-width:820px) {
  header {
    padding:100px 0px 0px 0px;
    text-align:center;
    background-position:50% 00px;
  }

  header h1 { font-size:24px; }

  #home-link:before {
    content:"";
    position:absolute;
    height:100px;
    width:120px;
    top:60px;
    left:50%;
    margin-left:-60px;
  }
  
  .edition-icon:after { margin-top:30px; }
  
  /* display columns below one another */
  .columns-2 > div, .dictionary-group {
    float:none;
    width:100%;
  }
  
  .inline-columns > div, .lesson-summary .inline-columns > div {
    margin-right:5px;
  }
  
  .dictionary-group { margin:0; }
  .dictionary-group .definition { padding:0 3px; }
  
  /* change vocab key border to a horizontal one */
  .vocab-key > div:first-child, .vocab-key > div:last-child { border:none; }
  .vocab-key > div:first-child { border-bottom:1px solid #999; }

  /* prevent vocab quizzes from wrapping */
  .drag-quiz #question-list, .drag-quiz #drop-list, .drag-quiz #answer-list {
    float:left;
    width:33.33%;
  }
  
  .drag-quiz .vocab-horizontal #question-list, .drag-quiz .vocab-horizontal #drop-list, .drag-quiz .vocab-horizontal #answer-list {
    float:none;
    width:auto;
  }
  
  .vocab-horizontal .quiz-item-group { width:auto; }
  
  /* reduce size of lesson titles on index */
  #lessons .lesson-title { font-size:18px; }
  
  /* reduce quick dictionary width */
  #quick-jisho-window { width:300px; }
  
  /* add margin below problems that can overlap each other */
  .fill-quiz.quiz-over .writing-zone + .writing-zone {
    margin-bottom:20px;
    position:relative;
    top:20px;
  }
}

/* improve clickability of list links for touch screens */
@media (pointer:coarse) {
  #exercise-list .lesson-title, #exercise-list .sub-lesson-title, #lessons li a, #exercise-list li a { font-size:14px; }
  #lessons li a, #exercise-list li a { padding:6px 0; }
  #exercise-list .lesson-title { padding:6px; }
}