* {
  font-family:verdana,sans-serif;
  font-size  :14pt;
}

.AB-container {
  border: none;
  bottom: 0;
  color      :white;
  display: flex;
  flex-direction: row;
  height: auto;
  left: 0;
}

body {
  width     :auto;
  height: auto;
  margin    :20px auto;
  padding-left: 5%;
  padding-right: 5%;
  background:#f8f8f8;
  /*border    :1px solid #888;*/
}

.check_stats_container {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.check_stats_label_container {
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 45%;
}

.check_stats_input_box_container1 {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 10px;
  width: 55%;
}

.check_stats_input_box_container2 {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 8%;
  width: 55%;
}

.downloadButton {
  background-color: cornflowerblue;
}

.feedbackButton {
  align-self: flex-start;
  background-color: cornflowerblue;
  margin-top: 15px;
}

.feedback_button_container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: left;
}

fieldset {
  border: 0;
}

html {
  background: #fff
}

.header {
  background-image: url('/assets/images/王希孟千里江山图卷03.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 2%;
  text-align: center;
}

.hidden-div {
  display: none; /* Initially hide the divs */
}

#horizontal-form fieldset {
  display: flex; /* Use flexbox for horizontal layout */
}

hr.solid {
  border-top: 3px solid #bbb;
}

img {
    width: 100%; /* or any custom size */
    height: 100%;
    object-fit: contain;
}

.input_text_box1 {
  display:flex;
  flex-direction: row;
  justify-content: left;
  align-items: center
}

.input_text_box2 {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}

input[type="radio"] {
  appearance: none; /* Hide default radio button */
  width: 14px;
  height: 14px;
  border: 2px solid black;
  border-radius: 50%;
  outline: none;
  background-color: white; /* Background color of the unchecked state */
  cursor: pointer;
}

input[type="radio"]:checked {
  background-color: cornflowerblue; /* Color of the checked state */
}

.login_error_message {
  font-size: 15pt;
  color: red;

}

@media all {
  .comment_area {
    height: 8em;
    width: 100%;
    margin-right: 5%;
  }

  .cover_container {
    aspect-ratio: 1 / 1.4142;
    width: auto;
    height: auto;
    margin-top: 10%;
    margin-left: 15%;
    margin-right: 10%;
  }

  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .input_box {
    margin-left: 10px;
    max-width: 50%;
  }

  .left_panel {
    width: 65%;
    z-index: 1; /* Control stacking order if needed */
    /*top: 0; !* Align panels to the top of the viewport *!*/
    overflow-x: hidden; /* Hide horizontal scrollbars */
    /*padding-top: 20px; !* Add some padding at the top *!*/
  }

  .logo_title {
    font-family:Georgia;
    font-weight:normal;
    font-style :italic;
    font-size  :52px;
    color      :white;
  }

  .logo_author {
    font-family:Georgia;
    font-weight:normal;
    font-style :normal;
    font-size  :38px;
    color      :white;
  }

  .right_panel {
    /*background-color: cornflowerblue;*/
    width: 35%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    z-index: 1; /* Control stacking order if needed */
    /*top: 0; !* Align panels to the top of the viewport *!*/
    overflow-x: hidden; /* Hide horizontal scrollbars */
    /*padding-top: 20px; !* Add some padding at the top *!*/
  }
}

@media screen and (max-width: 400px) { /* Styles for screens smaller than 400px, e.g. phone portrait mode */
  .comment_area {
    height: 8em;
    width: 95%;
  }

  .cover_container {
    aspect-ratio: 1 / 1.4142;
    width: auto;
    height: auto;
    margin-top: 8%;
    align-items: center;
  }

  .flex-container {
    display: flex;
    flex-direction: column;
  }

  .input_box {
    margin-left: 10px;
    width: 70%;
  }

  .left_panel {
    width: 100%;
    z-index: 1; /* Control stacking order if needed */
    /*top: 0; !* Align panels to the top of the viewport *!*/
    overflow-x: hidden; /* Hide horizontal scrollbars */
    /*padding-top: 20px; !* Add some padding at the top *!*/
  }

  .logo_title {
    font-family:Georgia;
    font-weight:normal;
    font-style :italic;
    font-size  :40px;
    color      :white;
  }

  .logo_author {
    font-family:Georgia;
    font-weight:normal;
    font-style :normal;
    font-size  :32px;
    color      :white;
  }

  .right_panel {
    /*background-color: cornflowerblue;*/
    width: 100%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    z-index: 1; /* Control stacking order if needed */
    /*top: 0; !* Align panels to the top of the viewport *!*/
    overflow-x: hidden; /* Hide horizontal scrollbars */
    /*padding-top: 20px; !* Add some padding at the top *!*/
  }
}

.scrollable-table-container {
  max-height: 100vh; /* Adjust this value to control the visible height of the table */
  overflow-y: auto; /* Enables vertical scrolling when content overflows */
  border: 1px solid #ccc; /* Optional: Add a border for better visualization */
}

/* Optional: Keep table header fixed */
.scrollable-table-container thead th {
  position: sticky;
  top: 0;
  background-color: white; /* Match your table background */
  z-index: 1; /* Ensure the header is above the scrolling content */
}

#st-char-select1 {
  margin: 0 2px 0 0;
}

#st-char-select2 {
  margin: 0 1px;
}

.taken, .error {
  color:red;
}

.table_caption {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}

.table_choices {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-top:  20px;
  margin-bottom: 20px;
}

.table_choices_row {
  height: 40px;
  text-align: center;
}

.table_choices_logout {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: center;
  margin-top:  4%;
  margin-bottom:  4%;
  /*display: flex;*/
  /*height: 20px;*/
  /*width: 80%;*/
  align-items:  center;
}

.table_td1 {
  text-align: center;
  vertical-align: top;
}

.table_td2 {
  text-align: right;
  vertical-align: top;
}

.table_td3 {
  padding-left: 5px;
  padding-right: 3px;
  text-align: left;
  word-wrap: break-word;
  vertical-align: top;
}

.table_menu_bar {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 10px;
}

.table_menu_bar_button {
  font-size: 12pt;
  background-color:  cornflowerblue;
}

.table_menu_bar_left_container {
  width: 50%;
  justify-content: flex-start;
}

.table_menu_bar_right_container {
  display:  flex;
  flex-direction: row;
  width: 50%;
  justify-content: flex-end;
}

.table_menu_bar_timezone_selector {
    font-size: 12pt;
}

.ui-page { /* or the selector for your data-role="page" */
    min-height: 100vh; /* Ensures the page is at least the height of the viewport */
}