body {
  font-family: "Open Sans", sans-serif;
  text-align: center;
}

.explanation {
  word-wrap: break-word;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 500px) {
  .explanation {
    max-width: 800px;
  }
}

.bullet_list {
  text-align: left;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
}

.bullet_list_wide {
  text-align: left;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.tableCenter {
  margin-left: auto;
  margin-right: auto;
}

#col_toggle1,
#col_toggle2,
#col_toggle3,
#col_toggle4,
#col_toggle5,
#col_toggle6 {
  cursor: pointer;
}

#cell_toggle1a,
#cell_toggle1b,
#cell_toggle1c,
#cell_toggle1d,
#cell_toggle1e,
#cell_toggle1f,
#cell_toggle1g,
#cell_toggle2a,
#cell_toggle2b,
#cell_toggle2c,
#cell_toggle2d,
#cell_toggle2e,
#cell_toggle2f,
#cell_toggle2g,
#cell_toggle3a,
#cell_toggle3b,
#cell_toggle3c,
#cell_toggle3d,
#cell_toggle3e,
#cell_toggle3f,
#cell_toggle3g,
#cell_toggle4a,
#cell_toggle4b,
#cell_toggle4c,
#cell_toggle4d,
#cell_toggle4e,
#cell_toggle4f,
#cell_toggle4g,
#cell_toggle5a,
#cell_toggle5b,
#cell_toggle5c,
#cell_toggle5d,
#cell_toggle5e,
#cell_toggle5f,
#cell_toggle5g,
#cell_toggle6a,
#cell_toggle6b,
#cell_toggle6c,
#cell_toggle6d,
#cell_toggle6e,
#cell_toggle6f,
#cell_toggle6g,
#cell_toggle7a,
#cell_toggle7b,
#cell_toggle7c,
#cell_toggle7d,
#cell_toggle7e,
#cell_toggle7f,
#cell_toggle7g,
#cell_toggle8a,
#cell_toggle8b,
#cell_toggle8c,
#cell_toggle8d,
#cell_toggle8e,
#cell_toggle8f,
#cell_toggle8g,
#cell_toggle9a,
#cell_toggle9b,
#cell_toggle9c,
#cell_toggle9d,
#cell_toggle9e,
#cell_toggle9f,
#cell_toggle9g,
#cell_toggle10a,
#cell_toggle10b,
#cell_toggle10c,
#cell_toggle10d,
#cell_toggle10e,
#cell_toggle10f #cell_toggle10g {
  cursor: pointer;
}

#tog_1hanzi1,
#tog_1hanzi2,
#tog_1hanzi3,
#tog_2hanzi1,
#tog_2hanzi2,
#tog_2hanzi3,
#tog_3hanzi1,
#tog_3hanzi2,
#tog_3hanzi3,
#tog_4hanzi1,
#tog_4hanzi2,
#tog_4hanzi3,
#tog_5hanzi1,
#tog_5hanzi2,
#tog_5hanzi3,
#tog_6hanzi1,
#tog_6hanzi2,
#tog_6hanzi3,
#tog_7hanzi1,
#tog_7hanzi2,
#tog_7hanzi3,
#tog_8hanzi1,
#tog_8hanzi2,
#tog_8hanzi3,
#tog_9hanzi1,
#tog_9hanzi2,
#tog_9hanzi3,
#tog_10hanzi1,
#tog_10hanzi2,
#tog_10hanzi3 {
  cursor: pointer;
}

.question {
  word-wrap: break-word;
  max-width: 1000px;
  margin: auto;
}

#index {
  text-align: center;
  vertical-align: middle;
}

.halftab {
  margin-left: 20px;
}

.tab {
  margin-left: 40px;
}

.doubletab {
  margin-left: 80px;
}

.font_default {
  font-family: "Open Sans", sans-serif;
}

.font_kai {
  font-family: "Open Sans", adobe-kaiti-std, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
}

.font_kai_header {
  font-size: 2.5rem;
}

.header {
  color: darkblue;
}

.table_index {
  border-collapse: separate;
  max-width: 320px;
  width: 90%;
}

@media only screen and (max-width: 374px) {
  .table_index {
    width: 103%;
  }
}

.table_index td {
  letter-spacing: 1px;
  border: 5px solid transparent;
  border-radius: 10px;
  border-spacing: 50px;
  text-align: center;
  vertical-align: middle;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 24px;
  height: 40px;
  background-color: #3483eb;
  color: white;
  cursor: pointer;
}

.table_index td i {
  font-size: 18px;
}

.table_index td p {
  line-height: 1;
}

.table_index a {
  color: white;
}

#header {
  background-color: #4a4a4a;
  color: white;
  height: 55px;
}

.title {
  text-align: center;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 45px;
  padding-top: 10px;
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
}

@media only screen and (max-width: 374px) {
  .title h3 {
    font-size: 1.5rem;
  }
}

.example_btn {
  min-width: 216px;
  width: 80%;
  max-width: 260px;
  letter-spacing: 1px;
  border: 5px solid transparent;
  padding: 2px;
  border-radius: 10px;
  border-spacing: 50px;
  cursor: pointer; /*as per Hu Laoshi's request */
  text-align: center;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 24px;
  height: 40px;
  background-color: #3483eb;
  color: white;
}

.example_btn_text_small {
  font-size: 20px;
}

.example_btn2 {
  min-width: 216px;
  width: 80%;
  max-width: 260px;
  letter-spacing: 1px;
  border: 5px solid transparent;
  padding: 2px;
  border-radius: 10px;
  border-spacing: 50px;
  cursor: pointer; /*as per Hu Laoshi's request */
  text-align: center;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 24px;
  height: 40px;
  background-color: #1e1a7d;
  color: white;
}

@media only screen and (max-width: 600px) {
  .example_btn_mobile_small {
    min-width: 90px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px !important;
    white-space: normal;
  }

  .section_mobile_small {
    font-size: 1rem;
  }
}

.other_btn {
  letter-spacing: 1px;
  border: 5px solid transparent;
  padding: 2px;
  border-radius: 10px;
  border-spacing: 50px;
  text-align: center;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  height: 50px;
  background-color: #3483eb;
  color: white;
}

.btn_ch2intro {
  height: 50px;
}

.border tr td {
  border-top: 1px solid black !important;
  border-bottom: 1px solid black !important;
  border-left: 1px solid black !important;
  border-right: 1px solid black !important;
}

.textAlignLeft {
  text-align: left;
}

.textAlignLeftQA h5 {
  text-align: left;
}

.textAlignRight {
  text-align: right;
}

.textAlignCenter {
  text-align: center;
}

.posAlignCenter {
  margin-left: auto;
  margin-right: auto;
}

.posAlignRight {
  margin-left: auto;
  margin-right: 0;
}

.verticleAlignMiddle {
  vertical-align: middle;
}

.paddingFix td {
  padding-left: 20px;
}

#above-footer {
  min-height: calc(100vh - 90px);
}

#footer {
  margin-left: 20px;
  margin-bottom: 20px;
  height: 50px;
}

#footer table {
  width: 80%;
  max-width: 340px;
  border-collapse: separate;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 600px) {
  #footer table {
    margin-left: auto;
    margin-right: auto;
  }
  .example btn {
    margin-left: auto;
    margin-right: auto;
  }

  #above-footer {
    min-height: calc(100vh - 200px);
  }

  #footer {
    margin-bottom: 70px;
  }
}

#footer tr td {
  letter-spacing: 1px;
  border: 5px solid transparent;
  padding: 2px;
  border-radius: 10px;
  border-spacing: 50px;
  text-align: center;
  vertical-align: middle;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 24px;
  height: 40px;
  background-color: #003171;
  color: white;
}

#footer tr td a {
  color: white;
}

#footer tr td a:hover {
  text-decoration: none;
}

.table_index a {
  color: white;
}

#section1,
#btn_hide1,
#section2,
#btn_hide2,
#section3,
#btn_hide3,
#section4,
#btn_hide4,
#section5,
#btn_hide5,
#section6,
#btn_hide6,
#section7,
#btn_hide7,
#section8,
#btn_hide8,
#section9,
#btn_hide9 {
  display: none;
}

#btn_show1,
#btn_hide1,
#btn_show2,
#btn_hide2,
#btn_show3,
#btn_hide3,
#btn_show4,
#btn_hide4,
#btn_show5,
#btn_hide5,
#btn_show6,
#btn_hide6,
#btn_show7,
#btn_hide7,
#btn_show8,
#btn_hide8,
#btn_show9,
#btn_hide9 {
  font-size: 20px;
  height: 50px;
}

.ch2table {
  max-width: 800px;
  margin: auto;
}

.ch2table td,
.ch2table td * {
  vertical-align: top;
}

.ch2td1 {
  width: 8%;
}

.ch2td2 {
  width: 10%;
}

.ch2td3 {
  width: 10%;
}

.ch2plus {
  width: 50px;
  text-align: center;
}

.ch2equal {
  width: 50px;
  text-align: center;
}

.trBorderBottom td {
  border-bottom: 1px solid;
  padding-top: 15px;
}

.exPadding {
  padding-left: 28%;
}

.exHrPadding {
  margin-left: -28%;
  margin-right: 10%;
}

#convertButtonSection {
  float: left;
  margin-top: 10px;
}

#crosswordQuestion {
  border: 1px solid;
  height: auto;
  width: 70vmin;
  display: inline-block;
  margin-bottom: 1.5em;
  text-align: center;
  padding: 5px;
}
#crosswordProblem {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.crossword-4-col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  grid-auto-rows: min-max(10px, auto);
}
.crossword-tile {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  text-align: center;
  font-weight: bold;
}

.dataTables_wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.box {
  border-style: solid;
  padding: 1rem;
  max-width: 200px;
  margin-left: -4%;
  text-align: center;
}

.ch1exTable tr td {
  border-collapse: separate;
  border-spacing: 1px;
}

.ch4Tables {
  max-width: 800px;
  margin: 0 auto;
  width: 80% !important;
}

.incorrect_mark {
  color: red;
  visibility: hidden;
  text-decoration: none;
}

.correct_mark {
  color: green;
  visibility: hidden;
  text-decoration: none;
}

#btn_redo {
  display: none;
}

#btn_next {
  display: none;
}

#btn_score {
  display: none;
}

.centerLeft {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media only screen and (min-width: 500px) {
  .fixedLayoutDesktop {
    table-layout: fixed;
  }
}

.numTd {
  width: 30px;
  padding-top: 20px !important;
}
.correctionTd {
  text-align: right;
  padding-top: 20px !important;
}

.mcQuestionTd {
  width: 30px;
}

select {
  width: 65px;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}

.table_e7_width1 {
  float: left;
  position: absolute;
  left: 30%;
}

.table_e7_width1 tr {
  height: 7px;
}

table.termBodyChin tbody {
  font-size: 35px !important;
}

table#terms td {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

table.termCh7beg0 td {
  padding-bottom: 38px;
}

.pileCh7beg0 div {
  margin-bottom: 32px !important;
}

/*Mobile devices*/
@media only screen and (max-width: 420px) {
  .exerBegInstructionsTitles {
    font-size: 1rem;
  }

  .ch4advBackFix {
    width: 200px;
  }

  .ch4advBackFix td {
    font-size: 20px !important;
  }

  .ch4advBackFix input {
    width: 120px !important;
  }

  table.termBodyChin tbody {
    font-size: 35px !important;
  }

  table#terms {
    max-width: 130px;
    margin-left: -75px;
  }

  .ch7begNumFixMobile {
    left: 20px !important;
  }
  .ch7begNumFixMobile2 {
    padding-top: 30px;
    left: 20px !important;
  }

  .ch6begFix div {
    margin-bottom: 5px !important;
    font-size: 30px;
    padding-top: 1px !important;
    height: 50px !important;
    text-align: center;
  }
  .ch6begFix2 div {
    margin-bottom: 5px !important;
    font-size: 30px;
    height: 50px !important;
    text-align: center;
  }

  table.termBodyChin {
    margin-left: -55px !important;
  }

  .table_e7_width1 {
    position: relative;
  }

  .ch7begFixSlotMobile {
    left: 100px !important;
  }

  .ch7begFixPileMobile {
    left: 30px !important;
  }

  table.termCh7beg0 td {
    padding-bottom: 20px;
  }

  .pileCh7beg0 div {
    margin-bottom: 7px !important;
  }

  h1 {
    font-size: 2rem;
  }

  .exPadding {
    padding-left: 10% !important;
  }

  .ch21mobileFix {
    padding-left: 20px;
  }

  .ch32tableMobileFix {
    margin-left: -20px;
  }

  .ch43tableMobileFix {
    margin-left: -20px;
  }

  .ch44tableMobileFix {
    margin-left: -20px;
  }

  .ch44tableMobileFixSmall {
    margin-left: -20px;
  }

  .ch5tableMobileFix {
    margin-left: -20px;
  }

  .ch32tableMobileFix td,
  .ch32tableMobileFix th {
    padding: 0.4rem !important;
  }

  .ch43tableMobileFix td,
  .ch43tableMobileFix th {
    padding: 0.7rem !important;
  }

  .ch44tableMobileFix td,
  .ch44tableMobileFix th {
    padding: 0.7rem !important;
  }

  .ch44tableMobileFixSmall td,
  .ch44tableMobileFixSmall th {
    padding: 0.42rem !important;
  }

  .ch5tableMobileFix td,
  .ch5tableMobileFix th {
    padding: 0rem !important;
    font-size: 0.9rem !important;
  }

  .ch5tableMobileFix td span .font_kai,
  .ch5tableMobileFix td .font_kai {
    font-size: 1rem !important;
  }
}

.big_kai {
  font-size: 1.8rem !important;
}

.ch4border {
  border: solid 1px;
  border-radius: 10px;
}

.ch4border b {
  padding: 10px;
}

.ch1form {
  /* margin-left: 10% !important;*/
}

.ch3exTable td select {
  margin-top: 6px;
}

.ch5exMenuTitle {
  height: 30%;
  background-color: rgba(60, 122, 216, 0.81);
  border-radius: 8px;
  color: white;
}

.crosswordTableSpace {
  border: solid 1px;
  padding: 10px;
  font-size: 2rem;
}
.crosswordSlot {
  border: solid 1px;
  padding: 10px;
  font-size: 2rem;
}

.ch5exMenuGroupSlot {
  background-color: rgba(60, 122, 216, 0.14);
  padding: 10px;
  background-clip: content-box;
  border: 0.5px solid lightgrey;
  border-radius: 8px;
  cursor: pointer;
}