.quiz-button {
            display: inline-block;
            padding: 15px 30px;
            margin: 10px;
            background-color: #f2f2f2;
            color: #333333;
            text-decoration: none;
            border: 2px solid #333333;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            font-family: Arial, sans-serif;
            font-size: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s, box-shadow 0.3s;
            margin:auto;
            display: block;
        }

        .quiz-button:hover {
            background-color: #333333;
            color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .quiz-button .tooltip {
            visibility: hidden;
            width: 200px;
            background-color: #333333;
            color: #ffffff;
            text-align: center;
            border-radius: 4px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            top: 120%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .quiz-button:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }
        .quiz-button .tooltip {
            visibility: hidden;
            width: 200px;
            background-color: #333333;
            color: #ffffff;
            text-align: center;
            border-radius: 4px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            top: 120%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            padding-top: 29px;
            padding: 6px;
            padding-top: 23px;
            font-size: 12px;
            text-transform: capitalize;
            font-family: monospace;
        }

        button.quiz-button.passed {
          background: black;
          color: white;
          background: black;
          color: white;
          float: left;
          margin: 11px;
      }




.prog-wrap {
  position: relative;
  border: 1px solid #acb2d8;
  background: rgba(255, 255, 255, 0.3);
}
.prog-wrap, .prog-bar, .prog-percent { height: 30px; }

/* (B) PROGRESS BAR & PERCENTAGE */
.prog-bar, .prog-percent {
  position: absolute;
  top: 0; left: 0;
}

/* (C) PERCENTAGE INDICATOR */
.prog-percent {
  display: flex;
  align-items: center; justify-content: center;
  width: 100%;
  z-index: 2;
}

/* (D) PROGRESS BAR */
.prog-bar {
  width: 0;
  background: rgba(255, 47, 47, 0.5);
  transition: width 0.5s;
}

/* (X) DOES NOT MATTER */
/* TEST CONTROLS */
#demoA { margin-top: 20px; }
#demoA input, #demoA button { padding: 10px; }



/* WIDGET */
.widget-wrap {
  min-width: 500px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* SVG */
#load {
  width: 100%; height:100px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 50px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}
#code-boxx , h1 { text-align: center; }


.widget-wrap {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    max-width: 600px;
    margin: auto;
    background: black;
    color: white !important;
}

.widget-wrap h1 {
    color: white !important;

}

    .quiz-button {

      margin: auto;
      display: block;
  }


h1.choose_quiz_heading{
  margin-top: 27px;
}


h1.choose_quiz_heading {
    margin-top: 16px;
    margin-bottom: 22px;
}


.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}




button[disabled] {
    background: #0000006e;
    color: white;
}
.flex-parent.jc-center {
    display: block;
}
.quiz-button {
    margin-bottom: 26px;
}
.quiz-button {
    display: inline-block;
    padding: 15px 30px;
    margin: 10px;
    background-color: #3366cc;
    color: #ffffff;
    text-decoration: none;
    border: 0px solid #333333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
    margin: auto;
    display: block;
}

.quiz-button {
    margin-bottom: 30px;
}

button[disabled] {
    background: #3366cc99;
    color: white;
}
.flex-parent.jc-center {
    display: grid;
}