@import "vtb.css";
@import "step.css";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");

.c {
  text-align: center;
  vertical-align: middle !important;
}

.m {
  vertical-align: middle !important;
}

.nw {
  white-space: nowrap;
}

h1.my,
h2.my,
h1 > span.my,
h2 > span.my {
  padding: 6px;
  /* 離標題邊框距離 */
  text-align: left;
  /* 文字靠左 */
  font-weight: normal;
  /* 不要粗體 */
  /* font-family: HanWangMingBlack, Iansui, "Noto Sans TC"; */
  font-family: 'Noto Serif TC', sans-serif;
  font-style: normal;
  font-weight: 700;
  /* 字型 */
  color: rgb(33, 51, 51);
}

h3.my,
h4.my,
h5.my,
h3 > span.my,
h4 > span.my,
h5 > span.my {
  padding: 6px;
  /* 離標題邊框距離 */
  text-align: left;
  /* 文字靠左 */
  font-weight: normal;
  /* 不要粗體 */
  font-family: JfOpenhuninn, Iansui, "Noto Sans TC";
  /* 字型 */
  color: rgb(92, 41, 56);
}

ol.exam_title label {
  font-weight: normal;
}

ol.exam_title li {
  list-style-position: outside;
  margin-left: 18px;
}

.my-title {
  padding: 6px;
  /* 離標題邊框距離 */
  text-align: left;
  /* 文字靠左 */
  font-weight: normal;
  /* 不要粗體 */
  font-family: JfOpenhuninn, Iansui, "Noto Sans TC";
  color: #3a322e;
}

.my-border {
  padding: 12px 20px;
  border: 1px solid rgb(225, 225, 225);
  border-radius: 8px;
  background: rgb(245, 245, 245);
  /* box-shadow: 0px 0px 6px 1px rgba(37, 37, 37, 0.2); */
  margin: 10px auto;
}

.my-sm-border {
  padding: 6px 10px 8px 10px;
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  background: rgb(245, 245, 245);
  margin: 2px auto;
}

.checkbox-border {
  display: block;
  width: 100%;
  padding: 0.85rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 20px;
}

ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
}

.tooltip-inner {
  max-width: 600px;
  font-size: 1rem;
  background-color: #3c65b1;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
  line-height: 1.8;
  color: rgb(255, 255, 255);
}

.tooltip-inner li {
  color: rgb(255, 255, 255);
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #3c65b1 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
  border-left-color: #3c65b1 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #3c65b1 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
  border-top-color: #3c65b1 !important;
}

.bar {
  text-align: center;
  margin: 3em auto;
}

.btn {
  font-family: 微軟正黑體;
}

.help-title {
  font-size: 1em;
  font-weight: bold;
  color: rgb(63, 9, 27);
}

.help-txt {
  font-size: 0.8em;
  color: rgb(51, 51, 0);
}

label {
  font-weight: bold;
}

.empty {
  color: rgb(185, 216, 245);
}

.line th {
  text-align: center;
  vertical-align: middle;
  color: black;
  background-color: #dcede8;
  border-color: #000;
}

.line td {
  text-align: center;
  vertical-align: middle;
  background-color: white;
  border-color: #000;
}

.btn-coral {
  color: #fff;
  background-color: coral;
  border-color: coral;
}

.btn-coral:hover,
.btn-coral:focus,
.btn-coral:active:hover {
  color: #fff;
  background-color: coral;
  border-color: coral;
}

.text-coral{
  color: coral;
}

.bg-coral{
  background-color: coral;
}

.color-picker {
  width: 80%;
  display: inline-block;
}

.my-badge {
  border-radius: 4px;
  padding: 1px 6px 3px 6px;
  font-size: 0.8em;
  font-family: "Noto Sans TC";
}

.num,
.date_time {
  font-family: "Arial Narrow", Roboto, "Helvetica Neue", sans-serif;
}

.val {
  border-bottom: 1px solid gray;
  color: blue;
}

.keyword {
  background-color: yellow;
  color: #000000;
  border-radius: 4px;
  padding: 2px;
}

.justify {
  text-align: justify;
  text-justify: inter-character;
}
.justify:after {
  content: "";
  display: inline-block;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

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

/* 在 label 前添加 * 符号 */
form#myForm input[class*="validate[required"] + label:before,
form#myForm select[class*="validate[required"] + label:before,
form#myForm textarea[class*="validate[required"] + label:before,
form#myForm input[class*="validate[required"] + div > label:before,
form#myForm
  input[class*="validate[required"]
  + div
  > label.col-form-label:before,
form#myForm select[class*="validate[required"] + div > label:before,
form#myForm
  select[class*="validate[required"]
  + div
  > label.col-form-label:before,
form#myForm textarea[class*="validate[required"] + div > label:before,
form#myForm
  textarea[class*="validate[required"]
  + div
  > label.col-form-label:before {
  content: "＊";
  color: red;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.my-label {
  font-family: "Noto Sans TC";
  font-weight: 600;
  opacity: 0.65;
}

.form-floating > .form-control,
.ans {
  color: #173b7c !important;
}

pre {
  font-size: unset;
  font-family: unset;
}

.adv input,
.adv textarea,
.adv select {
  background-color: rgb(245, 245, 230);
}

.email input,
.email textarea,
.email select {
  background-color: rgb(230, 245, 245);
}

.certificate input,
.certificate textarea,
.certificate select {
  background-color: rgb(243, 250, 244);
}

.identify input,
.identify textarea,
.identify select {
  background-color: rgb(249, 243, 252);
}

.my-dl dt{
  color:#0e54d6;
}
.my-dl dd{
  color:rgb(90, 44, 6);
}

@media (max-width: 768px) {
}