/** Form Input Question **/
#form-input-kecermatan .form-group .invalid-feedback {
  position: absolute;
}

#form-input-kecermatan .form-group .invalid-none {
  display: none;
}

.btn.btn-test {
  padding: 0.375rem 0.35rem;
  font-size: 0.9rem;
  line-height: 0.9;
  border-radius: unset;
}

.btn.btn-test:hover {
  color: navy !important;
  font-weight: bold;
}

.btn.btn-test.active {
  color: navy !important;
  font-weight: bold;
}

.symbol-container {
  background: darkturquoise;
  width: 100%;
  height: 170px;
  padding-bottom: 0.5rem;
  overflow-y: scroll;
  overflow-x: hidden;
}

.symbol-button input[type="button"] {
  padding: 5px;
  background: #f2f2f2;
  border: none;
  font-size: 1rem;
  font-weight: 400;
  width: 33px;
  margin-top: 7px;
  border-radius: 5px;
}

.symbol-button input[type="button"]:hover {
  background: #cdc9c9;
}

/** End Form Input Question **/


/** Opening Test **/
#main-test-container, #main-count-down, #main-test-opening {
  display: none;
}

.opacity-section {
  opacity: 0.3;
}

#sidebar-overlay {
  z-index: 1060 !important;
}

/** End Opening Test **/

/** Modal General Style **/
body.test-kecermatan .content {
  position: relative;
  overflow: hidden;
}

.modal {
  position: absolute !important;
}

.modal-backdrop {
  width: 100%;
  min-height: 100vh;
  height: 100% !important;
  z-index: unset;
  position: absolute !important;
}

.show-op .modal-backdrop {
  opacity: 0.9;
  background: #f4f6f9;
}

.main-test #modal-retest .modal-dialog, .main-test #modal-loading .modal-dialog {
  top: 120px
}

.main-test #modal-result .modal-dialog {
  top: 0px;
}

.main-trial-test #modal-loading .modal-dialog {
  top: 300px
}

.main-trial-test #modal-result .modal-content, #modal-payment-transfer .modal-content, #modal-payment-youtube .modal-content {
  background: rgb(76 86 192);
}

.modal-content .payment-description{
  line-height: 2rem;
}

.modal-content .payment-description .btn i, .modal-content .payment-description .btn i{
  font-size: 1.3rem;
}

.modal-content .payment-description .btn span, .modal-content .payment-description .btn span{
  font-size: 1.2rem;
  font-weight: bold;
}

.main-trial-test .show-op .modal-backdrop {
  opacity: 0.9 !important;
  background: rgb(48 56 169);
}

/** End Modal General Style **/


/** Modal Result **/
.main-test #modal-result .modal-body {
  min-height: 450px;
}

.main-trial-test .modal {
  padding-right: unset;
}

.main-trial-test #modal-result {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test #modal-result .modal-body {
  min-height: 300px;
}

.main-trial-test #modal-result .modal-footer {
  border-top: unset;
}

.main-trial-test #modal-result .modal-body .row-iframe {
  height: 210px;
}

.main-trial-test #modal-result .modal-dialog {
  top: 8rem;
}

.main-test #modal-result .modal-body .result-nilai-header, .main-test #modal-graphic .modal-body .result-nilai-header {
  font-size: 1.1rem;
}

.main-test #modal-result, .main-test#main-test-kecermatan-history #modal-graphic {
  overflow-y: scroll;
}

.main-test#main-test-kecermatan-history #modal-graphic {
  padding-right: 0 !important;
}

.main-test #modal-result .modal-body #test-result-graphic, .main-test #modal-graphic .modal-body #test-result-graphic {
  height: 320px !important;
  width: 100% !important;
}

.main-test #modal-graphic .modal-body #test-result-graphic canvas {
  height: auto !important;
  width: 100% !important;
}

/** End Modal Result **/

/** Modal Retest **/
.main-test #modal-retest i {
  font-size: 1.7rem;
  padding: 11px 20px;
  border: 2px solid #626e7a;
  border-radius: 100%;
  color: #626e7a;
}

/** End Modal Retest **/


/** Custom Main Test Container **/
#main-test-kecermatan {
  position: relative;
  height: 80vh;
  padding-top: 3rem;
}

.main-test .table-column-questions>thead>tr>th {
  border: 1px solid #000000 !important;
  font-size: 3rem;
  height: 70px;
  overflow: hidden;
  position: relative;
}

.main-test .table-column-questions>thead>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-test .table-column-questions>tbody>tr>th {
  border: 1px solid #000000 !important;
  font-size: 11rem;
  width: 160px;
  height: 200px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-test .table-column-questions>tbody>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-test .table-column-questions>tbody>tr>td {
  border: 1px solid #000000 !important;
  font-size: 4rem;
  font-weight: bold;
  width: 160px;
  height: 70px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-test .table-column-questions>tbody>tr>td span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-test .table-questions>thead>tr>th {
  border: 1px solid #000000 !important;
  font-size: 3.5rem;
  width: 160px;
  height: 85px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-test .table-questions>thead>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-test .table-questions>tbody>tr>td {
  border: 1px solid #000000 !important;
  font-size: 2.5rem;
  font-weight: bold;
  width: 50px;
  height: 55px;
  max-width: 55px;
  overflow: hidden;
  position: relative;
}

.main-test .table-questions>tbody>tr>td span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-test .table-questions>tbody>tr>td:hover {
  background-color: #a9a6a6;
}

.main-test #table-row-index {
  color: #000000;
  padding: 10px;
  width: 50px;
}

/** End Custom Main Test Container **/


/** Custom Main Trial Test Container **/
.main-trial-test {
  padding-top: 30px;
  position: relative;
}

.main-trial-test #main-test-container {
  background: rgb(48 56 169);
  padding-top: 5vh;
  padding-bottom: 10vh;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  position: relative;
  overflow: hidden;
}

.main-trial-test .table-column-questions {
  color: #ffffff !important;
}

.main-trial-test .table-column-questions>thead>tr>th {
  border: 1px solid #ffffff !important;
  font-size: 3rem;
  height: 70px;
  overflow: hidden;
  position: relative;
}

.main-trial-test .table-column-questions>thead>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test .table-column-questions>tbody>tr>th {
  border: 1px solid #ffffff !important;
  font-size: 12rem;
  width: 160px;
  height: 200px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-trial-test .table-column-questions>tbody>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test .table-column-questions>tbody>tr>td {
  border: 1px solid #ffffff !important;
  font-size: 3.5rem;
  font-weight: bold;
  width: 160px;
  height: 70px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-trial-test .table-column-questions>tbody>tr>td span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test .table-questions>thead>tr>th {
  border: 1px solid #ffffff !important;
  font-size: 3.5rem;
  width: 160px;
  height: 85px;
  max-width: 160px;
  overflow: hidden;
  position: relative;
}

.main-trial-test .table-questions>thead>tr>th span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test .table-questions>tbody>tr>td {
  border: 1px solid #ffffff !important;
  font-size: 2.5rem;
  font-weight: bold;
  width: 50px;
  height: 55px;
  max-width: 55px;
  overflow: hidden;
  position: relative;
}

.main-trial-test .table-questions>tbody>tr>td span {
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-trial-test .table-questions {
  color: #ffffff !important;
}

.table-questions>thead>tr>th {
  font-size: 3rem;
  letter-spacing: .5rem;
}

.table-questions>tbody>tr>td {
  font-size: 2rem;
  cursor: pointer;
}

.main-trial-test .table-questions>tbody>tr>td:hover {
  background-color: #161c6a;
}

.main-trial-test #table-row-index {
  color: #ffffff;
  padding: 10px;
  width: 50px;
}

/** End Custom Main Trial Test Container **/


/** Custom Main Count Down **/
.main-trial #main-count-down {
  background: rgb(48 56 169);
}

/** End Custom Main Count Down **/


/** Custom Main Test Kecermatan History **/
#main-test-kecermatan-history {
  position: relative;
  min-height: 105vh;
  padding-top: 0rem;
}

#user-table {
  width: 100% !important;
}

/** End Custom Main Test Kecermatan History **/