body {
  font-family:'Arial', 'PMingLiU' !important;
  background-color: rgb(248, 255, 247);
}

u {
  text-underline-position: under;
}

.font-weight-bold {
  font-weight: bold;
}

.vcenter {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.vhcenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.blinking {
  animation: blinkingUnderline 1s infinite;
}

#div-remaining.blinking > span {
  border-bottom: solid;
}

#div-remaining.blinking > span span {
  animation: blinkingText 1s infinite;
}

@keyframes blinkingUnderline{
  0%{     color: red;    }
  49%{    color: black; }
  60%{    color: red; }
  99%{    color: red;  }
  100%{   color: red;    }
}

@keyframes blinkingText{
  0%{     color: red;    }
  49%{    color: black; }
  60%{    color: red; }
  99%{    color: red;  }
  100%{   color: red;    }
}

.modal-backdrop {
  background-color: white;
}

.modal-backdrop.in {
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.index-title-term {
  height: 8vw;
}

.index-title {
  color: rgb(2, 49, 116) !important;
  font-size: 2.5vw !important;
}

.index-title-small {
  color: rgb(2, 49, 116) !important;
  font-size: 1.8vw !important;
}

.index-logo {
  height: 4vw;
}

.btn-row {
  height: 8vw;
}

.btn-row-small {
  height: 6vw;
}

.btn-row-xsmall {
  height: 3vw;
}

.btn {
  color: black !important;
  background-color: white !important;
  border-color: rgb(2, 49, 116) !important;
  border-radius: 0;
  /* font-size: 3rem !important; */
  /* font-size: 2.2vw !important; */
  padding: 0;
}

.btn:hover,
.btn:active,
.btn:focus {
  /*background-color: white !important;*/
  border-color: blue !important;
  outline-style: none !important;
  box-shadow: none !important;
}

.btn-index {
  height: 5vw !important;
  width: 13vw !important;
  max-width: 200px !important;
}

.btn-keyboard {
  width: 6% !important;
}

.btn-keyboard-bs {
  width: 10% !important;
}

.btn-keyboard,
.btn-keyboard-bs,
.btn-input-button {
  height: 4vw !important;
}

.btn-keyboard span,
.btn-keyboard-bs span {
  font-size: 1.8vw; 
}

.btn-input-button span {
  font-size: 1.5vw; 
}

.btn-intro-home {
  background-color: rgb(248, 255, 247) !important;
  border: 0 !important;
}

.btn-intro-home span {
  display: block;
  color: green !important;
}

.btn-intro-home img {
  height: 5rem;
}

.btn-guidelines {
  height: 4vw !important;
  width: 90% !important;
}

.btn-guidelines-long {
  height: 4vw !important;
  width: 98% !important;
}

.btn-test {
  height: 3vw !important;
  width: 80% !important;
}

.btn-test-answer {
  height: 3vw !important;
  width: 90% !important;
}


.btn-test-answer-clicked {
 background-color: #94ee94 !important;
}

.btn-test-review-item {
  width: 2.5vw !important;
  height: 2.5vw !important;
  font-size: 1.2vw !important;
  background-color: white !important;
  border: 0 !important;
}

.btn-test-video {
  background-image: url('../images/pause.png');
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 2.5vw;
  height: 2.5vw;
  border: 0;
}

.btn-test-video.play {
  background-image: url('../images/play.png') !important;
}

.btn-test-video:hover,
.btn-test-video:active,
.btn-test-video:focus {
  background-color: transparent;
  outline-style: none !important;
  box-shadow: none !important;
}

.btn-confirm {
  height: 6vw !important;
  width: 85% !important;
}

.btn-end {
  height: 4vw !important;
  width: 22vw !important;
  font-size: 2.2vw !important;
}

.txt-id-num {
  width: 45vw;
  font-size: 3vw;
}

.txt-input-id {
  font-size: 1.8vw;
  line-height: 2vw;
}

.txt-input-id-remarks {
  font-size: 1.2vw;
  line-height: 1.4vw;
}
 
.txt-heading {
  font-size: 1.4vw;
}

.txt-end-footer {
  font-size: 1.2vw;
}

.txt-xlarge {
  font-size: 3.8vw;
}

.txt-large {
  font-size: 2.5vw;
}

.txt-medium {
  font-size: 2vw;
  line-height: 2.2vw;
}

.txt-small {
  font-size: 1.8vw;
  line-height: 2vw;
}

.txt-xsmall {
  font-size: 1.2vw;
}

.english .txt-small {
  font-size: 1.4vw !important;
  line-height: 1.8vw !important;
}

.english .txt-heading {
  font-size: 1.2vw !important;
}

.english.questions .txt-small {
  font-size: 1.4vw !important;
}

.english.questions .txt-medium {
  font-size: 1.5vw;
  line-height: 1.8vw;
}

.questions .txt-small {
  font-size: 1.5vw !important;
}

.questions .txt-medium {
  font-size: 1.7vw;
  line-height: 2.2vw;
}

.questions .div-test-ans .txt-medium {
  line-height: 2.2vw !important;
}

.panel {
  border-radius: 0 !important;
  height: 32vw !important;
}

.panel-heading {
  padding-top: 1vw !important;
}

.panel-heading,
.panel-footer {
  border: 0 !important;
  background-color: white !important;
}

.panel-body {
  padding-left: 2.5vw !important;
  padding-right: 2.5vw !important;
}

.panel-body ol li div {
  padding-left: 2.5vw !important;
  margin-bottom: 1vw !important;
}

.panel-default {
  border-color: #777 !important;
}

.panel-intro {
  height: 38vw !important;
}

.panel-intro .panel-body {
  padding-left: 6vw !important;
  padding-right: 6vw !important;
}

.panel-help {
  height: 37vw !important;
}

.panel-body-help {
  height: 100% !important;
  min-height: 100% !important;
  margin-bottom: -10vw !important;
}

.div-row {
  height: 3vw;
}

.div-test-que-ans {
  height: 29vw;
  background-color: rgb(255,255,208);
  border: solid 1px;
}

.div-test-que {
  height: 25%;
}

.div-test-ans {
  height: 75%;
}

.div-test-review {
  height: 35vw;
  border: solid 1px;
  border-color: gray;
  background-color: white;
}

.div-test-review-no-items {
  background-color: rgb(248, 255, 247) !important;
  border-color: transparent !important;
}

.div-test-review-items {
  height: 22.5vw;
}

.div-test-review-legend div {
  height: 2.5vw;
}

.div-test-review-legend img {
  height: 2.5vw !important;
}

.div-end {
  height: 100vh;
}

.div-end .content {
  height: 100%; 
  min-height: 100%; 
  margin-bottom: -4vw;
}

@media (max-width: 1024px) {
  .container-fluid > div:first-child {
    margin-top: 5vw !important;
  }

.div-end .content {
    height: 92%; 
    min-height: 92%; 
    margin-bottom: -4vw !important;
}

  .questions .div-test-ans .txt-medium {
    line-height: 2.2vw !important;
  }
}
.div-test-image {
    position: relative;
    margin: 10px;
    padding: 10px;
    background-color: transparent;
}
    .div-test-image .actions {
        right: 1px;
        display: inline-block;
        position: absolute;
        margin-top: -20px;
        margin-right: -11px;
    }

.btnImgWrapper {
    color: black !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0;
    /* font-size: 3rem !important; */
    /* font-size: 2.2vw !important; */
    padding: 0;
}
#popoverImg::backdrop {
    background-color:transparent;
}

#popoverImg {
    padding: 0px;
    border: none;
    width: clamp(min(10vw, 20rem), unset, max(90vw, 55rem));
}
    #popoverImg .img-responsive {
        background-color: transparent !important;
    }

[popover] {
    background-color: transparent !important;
}
:popover-open {
    position: absolute;
    inset: unset;
    left: 50%;
    top: 18%;
}