.modal {
  display: inherit;
  opacity: 0;
  visibility: hidden;
}

.modal.fade:not(.show) {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.modal .modal-dialog {
  max-width: 550px;
}

.modal .modal-sm {
  max-width: 400px;
}

.modal .modal-sm .modal-header {
  padding: 1rem 1.5rem;
}

.modal .modal-sm .modal-body,
.modal .modal-sm .modal-footer {
  padding: 1rem 1.5rem;
}

.modal .modal-md {
  max-width: 600px;
}

.modal .modal-lg {
  max-width: 850px;
}

.modal .modal-xl {
  max-width: 1140px;
}

.modal .modal-header {
  padding: 1rem 2rem;
}

.modal .modal-header .modal-title {
  font-size: 1.3rem;
}

.modal .modal-header .btn-close {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background-size: 1.25rem auto;
  margin: 0 0 0 auto;
}

.modal .modal-body {
  padding: 2rem;
}

.modal .modal-body h6 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.modal .modal-body .table {
  margin: 0;
}

.modal .modal-footer {
  padding: 1rem 2rem;
}

.modal .modal-footer .btn {
  padding: 0.5rem 1.5rem;
  font-size: 1.1rem;
  margin: 0 0 0 0.5rem;
}

.modal .multimedia-detail .img-box {
  height: 300px;
}

#modal-metadata .modal-body ul li {
  list-style: inside;
  color: var(--gray-dark);
}

@keyframes activeAnimate {
  0% {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
  }
  50% {
    border-color: var(--bs-primary-text);
    color: var(--bs-primary-text);
    background-color: var(--bs-primary-light);
  }
  100% {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
  }
}

.modal .bs-stepper-content {
  padding: 0;
}

#modal-import-work .bs-stepper-content h5,
#modal-export-work .bs-stepper-content h5,
#modal-auto-create-test-paper .bs-stepper-content h5 {
  font-size: 1.2rem;
}

#modal-import-work .bs-stepper-content p,
#modal-import-work .bs-stepper-content .btn-text,
#modal-export-work .bs-stepper-content p,
#modal-export-work .bs-stepper-content .btn-text,
#modal-auto-create-test-paper .bs-stepper-content p,
#modal-auto-create-test-paper .bs-stepper-content .btn-text {
  font-size: 1.1rem;
}

#modal-import-work .bs-stepper-content .flex-center .card,
#modal-export-work .bs-stepper-content .flex-center .card,
#modal-auto-create-test-paper .bs-stepper-content .flex-center .card {
  flex: 1;
  height: 110px;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}

#modal-import-work .bs-stepper-content .flex-center .card.complete,
#modal-export-work .bs-stepper-content .flex-center .card.complete,
#modal-auto-create-test-paper .bs-stepper-content .flex-center .card.complete {
  border-color: var(--bs-primary-text);
  color: var(--bs-primary-text);
  background-color: var(--bs-primary-light);
}

#modal-import-work .bs-stepper-content .flex-center .card.active,
#modal-export-work .bs-stepper-content .flex-center .card.active,
#modal-auto-create-test-paper .bs-stepper-content .flex-center .card.active {
  animation: activeAnimate 1s infinite;
}

#modal-import-work .bs-stepper-content .flex-center i,
#modal-export-work .bs-stepper-content .flex-center i,
#modal-auto-create-test-paper .bs-stepper-content .flex-center i {
  margin: 0 0.5rem;
  width: 24px;
  height: 24px;
  color: var(--bs-primary);
}

#modal-member-info .img-box {
  width: 200px;
  height: 240px;
  margin-right: 1rem;
}