.prte-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.prte-container .prte-tooltip {
  visibility: hidden;
  color: black;
  text-align: center;
}

.prte-container .prte-btn {
  border-radius: 20px;
  font-size: 16px;
  color: white;
  background-color: #0e3b72;
}

.prte-container:hover .prte-tooltip {
  visibility: visible;
}

.prte-modal {
  display: none;
  align-items: center;
  justify-content: center;
}

.prte-modal .modal-content {
  display: flex;
  max-width: 90%;
  max-height: 80%;
}

.prte-modal .modal-head {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #044da7;
  padding: 0.5em;
  border-radius: inherit;
  color: white;
  font-size: 1.8em;
  justify-content: center;
}

.prte-modal .modal-body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  text-align: left;
  justify-content: space-around;
  gap: 1em;
}

.prte-modal .prte-course {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 100%;
}

.prte-modal .purchase-head {
  border-bottom: 0.2em dashed #393b4e;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

.prte-modal .purchase-title {
  font-weight: bold;
}

.prte-modal .prte-user {
  display: flex;
  flex-direction: column;
  width: 55%;
  height: 100%;
}

.prte-modal .upload-field {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.prte-modal .upload-preview {
  width: 100%;
  display: flex;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 6px 6px #ccc;
  margin: 1em 0 1em 0;
}

.prte-modal .upload-preview img {
  width: 100%;
  padding: 5px;
}

.prte-modal .prte-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1em;
}

.prte-modal .prte-modal-submit {
  width: fit-content;
}

.prte-modal .prte-response-message {
  max-width: fit-content;
}

.prte-modal .prte-modal-submit {
  position: relative;
}

.prte-modal .prte-modal-submit::before {
  content: "\2714";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5em;
  color: white;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 3s
    linear(
      0 0%,
      0 2.27%,
      0.02 4.53%,
      0.04 6.8%,
      0.06 9.07%,
      0.1 11.33%,
      0.14 13.6%,
      0.25 18.15%,
      0.39 22.7%,
      0.56 27.25%,
      0.77 31.8%,
      1 36.35%,
      0.89 40.9%,
      0.85 43.18%,
      0.81 45.45%,
      0.79 47.72%,
      0.77 50%,
      0.75 52.27%,
      0.75 54.55%,
      0.75 56.82%,
      0.77 59.1%,
      0.79 61.38%,
      0.81 63.65%,
      0.85 65.93%,
      0.89 68.2%,
      1 72.7%,
      0.97 74.98%,
      0.95 77.25%,
      0.94 79.53%,
      0.94 81.8%,
      0.94 84.08%,
      0.95 86.35%,
      0.97 88.63%,
      1 90.9%,
      0.99 93.18%,
      0.98 95.45%,
      0.99 97.73%,
      1 100%
    );
}

.prte-modal .prte-modal-submit.checked {
  background-color: white !important;
}

.prte-modal .prte-modal-submit.checked::before {
  transform: translate(-50%, -50%) scale(1);
}