body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.question {
  margin-bottom: 10px;
}
.question p {
  width: 100%;
  margin-bottom: 2rem;
  font-weight: 500;
}
.btn {
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}
.top__buttons {
  max-width: 1200px;
  margin: auto;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
#backForm {
  border: 1px solid black;
  display: none;
  justify-content: center;
  align-items: center;
  width: fit-content;
  gap: 5px;
}
#newForm {
  border: 1px solid black;
  display: none;
  justify-content: flex-end;
  width: fit-content;
}
#test-list {
  max-width: 1200px;
  border: 1px solid black;
  margin: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding-left: 0;
}
#test-list li {
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  padding-left: 3rem;
  padding-right: 3rem;
  color: black;
  align-items: center;
}
#test-list li:first-child {
  padding-top: 1rem;
}
#test-list li:not(:last-child) {
  margin-bottom: 1rem;

  border-bottom: 1px solid black;
}
.rank-class {
  border-radius: 2rem;
  padding: 5px 15px;
  background-color: green;
  color: white;
  font-weight: bold;
  font-size: 15px;
}
.ok-class {
  border-radius: 2rem;
  padding: 5px 11px;
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.rank-class.didnt-pass {
  background-color: red;
}
#questionnaire {
  display: none;
  max-width: 1200px;
  margin: 5rem auto;
  margin-top: 2rem;
  background-color: #071e3b00;
  padding: 2rem;
  border-radius: 6px;
  box-shadow: 0px 1px 7px 0px #00000047;
}
#questionnaire .question {
  border: 1px solid #00000030;
  padding: 1rem;
  margin-bottom: 4rem;
  background: white;
  border-radius: 5px;
}
#questionnaire label {
  margin-right: 2rem;
  padding-left: 1rem;
  font-weight: 300;
}
.save.btn,
.save.btn:hover {
  background: black;
  color: white;
  margin-left: auto;
  width: 100%;
  max-width: fit-content;
  display: flex;
  justify-content: flex-end;
  float: left;
}
.save.btn:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M5 5V19H19V7.82843L16.1716 5H5ZM4 3H17L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM12 18C10.3431 18 9 16.6569 9 15C9 13.3431 10.3431 12 12 12C13.6569 12 15 13.3431 15 15C15 16.6569 13.6569 18 12 18ZM6 6H15V10H6V6Z'%3E%3C/path%3E%3C/svg%3E");
  width: 17px;
  height: 15px;
  margin-left: 6px;
}
#newForm.btn::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 4V8H18V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H6ZM9 17H7V19H9V17ZM9 14H7V16H9V14ZM9 11H7V13H9V11ZM16 2V6H8V2H16Z'%3E%3C/path%3E%3C/svg%3E");
  width: 25px;
  height: 25px;
  margin-left: 6px;
}

.ok-class:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M7.24264 17.9967H3V13.754L14.435 2.319C14.8256 1.92848 15.4587 1.92848 15.8492 2.319L18.6777 5.14743C19.0682 5.53795 19.0682 6.17112 18.6777 6.56164L7.24264 17.9967ZM3 19.9967H21V21.9967H3V19.9967Z'%3E%3C/path%3E%3C/svg%3E");
  width: 18px;
  height: 18px;
  margin-left: 6px;
}
button.submit {
  border: 1px solid black;
  color: black;
  margin-left: auto;
  width: 100%;
  max-width: fit-content;
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  min-width: 158px;
  justify-content: center;
}
button.submit:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 12.9999H9V10.9999H3V1.84558C3 1.56944 3.22386 1.34558 3.5 1.34558C3.58425 1.34558 3.66714 1.36687 3.74096 1.40747L22.2034 11.5618C22.4454 11.6949 22.5337 11.9989 22.4006 12.2409C22.3549 12.324 22.2865 12.3924 22.2034 12.4381L3.74096 22.5924C3.499 22.7255 3.19497 22.6372 3.06189 22.3953C3.02129 22.3214 3 22.2386 3 22.1543V12.9999Z'%3E%3C/path%3E%3C/svg%3E");
  width: 15px;
  height: 20px;
  margin-left: 6px;
}
.question label,
.question input {
  cursor: pointer;
}
.question .wrong {
  color: red;
  font-weight: 600;
}
.question .correct {
  color: green;
  font-weight: 600;
}

/* popup  */
.popup-ethelontismos {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.popup-ethelontismos-content {
  background-color: #fff;
  width: 410px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup-ethelontismos .close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}
#submitConfirm {
  width: fit-content;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 48px;
  color: black;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}

/* pass didnt pass  */
.pass-container,
.didnt-pass-container {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  max-width: 600px;
  text-align: center;
  margin: auto;
  font-weight: 600;
  margin-top: 5rem;
  margin-bottom: 10rem;
}
.pass-container svg {
  color: green;
  max-width: 90px;
}
.didnt-pass-container svg {
  color: red;
  max-width: 90px;
}
.question p.user_answer {
  margin-bottom: 0;
}

/* loader */
#loadingIndicator {
  display: block;
  text-align: center;
  margin-top: 3rem;
}

/* MOBILE  */
@media only screen and (max-width: 432px) {
  .save.btn,
  .save.btn:hover {
    float: unset;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }
  button.submit {
    width: 100%;
    max-width: 100%;
  }
}

/* new test keimeno */
#new-test-keimeno {
  display: none;
  align-items: center;
  font-style: italic;
  max-width: 1200px;
  margin: auto;
  margin-top: 2rem;
}

.logged-in {
  display: flex;
  background-color: #071e3b;
  color: aliceblue;
  align-items: center;
  justify-content: space-between;
  padding: 3rem;
  margin-bottom: 4rem;
  border-radius: 2rem;
}
.user-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.user-info-container .name {
  width: fit-content;
}
.user-info-container .team {
  font-size: 10px;
  max-width: 104ch;
}

/* pagination  */
.pagination-container {
  margin: auto;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  justify-content: center;
}

.pagination-number,
.pagination-button {
  font-weight: 900;
  display: block;
  width: 5rem;
  height: 5rem;
  text-align: center;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
}
#pagination-numbers {
  display: flex;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
  color: #16498a;
}

.pagination-number.active {
  background-color: #16498a;
  color: #fff;
}
.get-cert {
  border: 1px solid black;
  width: fit-content;
  display: flex;
  border-radius: 5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  color: black;
  font-weight: 700;
}
.get-cert:hover {
  color: black;
}
.get-cert::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.5 7.5H12.5C12.5 9.98994 14.6436 12.6604 17.3162 13.5513L16.8586 15.49C13.7234 15.0421 10.4821 16.3804 7.5547 18.3321L6.3753 16.7191C7.46149 15.8502 8.50293 14.3757 9.27499 12.6534C10.0443 10.9373 10.5 9.07749 10.5 7.5ZM11.1 13.4716C11.3673 12.8752 11.6043 12.2563 11.8037 11.6285C12.2754 12.3531 12.8553 13.0182 13.5102 13.5953C12.5284 13.7711 11.5666 14.0596 10.6353 14.4276C10.8 14.1143 10.9551 13.7948 11.1 13.4716Z'%3E%3C/path%3E%3C/svg%3E");
  width: 25px;
  height: 25px;
  margin-left: 6px;
}