#timed-p1-quiz-con button, div#timed-p1-quiz-con div {
    font-family: 'Poppins';
}

select#attain-topic-select {
    border-radius: 20px;
    border-color: #bbb;
    margin: 10px 0;
}

/*d
#timed-practice-app {
  max-width: 420px;
  margin: 0 auto;
  font-size: 1.1em;
}
#timed-practice-app .option-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  font-size: 1em;
  border-radius: 7px;
  border: 1px solid #bbb;
  background: #f8f8f8;
  cursor: pointer;
}
#timed-practice-app .option-btn.selected {
  background: #d6eaff;
  border-color: #0af;
}
#timed-practice-app .timer {
  font-weight: bold;
  margin-top: 1em;
}


.timed-p1-quiz-selection {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: var(--attain-secondary-color-lite);
    padding: 20px;
}*/

/****** Paper 1 App Styles ******/
.timed-p1-quiz-selection {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
}

div#quiz-type-select {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-evenly;
}

.attain-or {
    padding: 10px 0 0;
    font-weight: 600;
    font-size: 1.2em;
}

#attain-topic-select-con{
  font-size: 1.2em;
  font-weight: 600;
}

button.quiz-btn {
    background: #fff !important;
    color: var(--attain-secondary-color) !important;
    border: 1px solid #bbb !important;
    text-align: left;
    padding: 10px;
    border-radius: 12px !important;
}

span.opt-letter {
    display: block;
    margin-right: 10px;
    /*font-size: 1.2em !important;*/
    font-weight: 700 !important
}

button.quiz-btn.opt {
    font-size: 1em;
    white-space: normal;
    font-weight: 500 !important;
    line-height: 125%;
}

button.quiz-btn.opt.selected, button.quiz-btn.opt:hover {
    background: rgb(21, 117, 250, .5) !important
}

button.quiz-btn.opt.selected {
    border: 1px solid var(--attain-secondary-color) !important;
}

button.quiz-btn.quiz-btn-nav, button#quiz-end{
    background: var(--attain-primary-color-lite) !important;
    color: var(--attain-primary-color) !important;
    border: 1px solid var(--attain-primary-color) !important;
    font-family: 'Poppins' !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    margin: 10px 0 !important;
}

button.quiz-btn.quiz-btn-nav[disabled] {
    color: #999 !important;
    background: #ccc !important;
    border-color: #999 !important;
}

button#quiz-end {
    text-align: center;
}

.quiz-app {
    max-width: 420px;
    margin: 0;
    background: #fff;
    border-radius: 1.5em;
    /* box-shadow: 0 2px 12px rgba(0,0,0,0.09); */
    padding: 0;
    font-family: 'Inter', Arial, sans-serif;
    text-align: center;
}

.quiz-ui-header {
    height: 60px;
    padding: 10px 20px;
    text-align: center;
    font-size: 1.1em;
    background: #fff;
    position: sticky;
    width: 100vw;
    top: 0;
    margin: 0;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    font-size: 1.06em;
    font-weight: 600;
    /* margin-bottom: 1.1em; */
    color: #1c3557;
    align-items: center;
}

div#quiz-img {
    max-width: 360px;
    margin: 0 auto 19px;
    border: 1px solid #ccc;
    padding: 0;
}

/*.quiz-img img {
    max-width: 100%;
    border-radius: 0.7em;
    margin: 0;
    padding: 0;
}*/

.quiz-question {
  font-size: 1.18em;
  font-weight: 500;
  margin-bottom: 1.1em;
}

.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em 0.75em;
    margin-bottom: 1.15em;
}

.quiz-btn {
  background: #1575fa;
  color: #fff;
  border: none;
  border-radius: 0.7em;
  padding: 0.7em 0.1em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  margin: 0.25em 0.1em;
  transition: background 0.14s;
}

.quiz-btn:disabled {
  background: #bccbe4;
  cursor: not-allowed;
}

.quiz-btn.selected, .quiz-options button.selected {
  background: #1be7c2;
  color: #153759;
  font-weight: bold;
}

.quiz-status {
  font-size: 0.98em;
  color: #577099;
  margin-bottom: 0.7em;
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    font-weight: 600 !important;
    align-items: center;
}

.quiz-ui-nav{
  font-weight: 600 !important;
}

button#quiz-prev::before {
    content: "chevron_left";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    vertical-align: middle;
    display: inline;
    font-weight: 600;
}

button#quiz-next::after {
    content: "chevron_right";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    vertical-align: middle;
    display: inline;
    font-weight: 600;
}

.quiz-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1em;
}

.quiz-progress-bar-bg {
  width: 70%;
  background: #e7e7e7;
  height: 0.65em;
  border-radius: 0.6em;
  overflow: hidden;
}

.quiz-progress-bar {
  height: 100%;
  background: #1575fa;
  width: 0%;
  border-radius: 0.6em;
  transition: width 0.3s;
}

.quiz-answered-status {
  font-size: 0.96em;
  color: #536081;
  min-width: 90px;
  text-align: right;
}

.quiz-btn-end {
  width: 85%;
  margin: 0.6em auto 0 auto;
  background: #ff4166;
}

.quiz-summary {
    padding: 20px;
    font-size: 1.08em;
    /* color: #164471; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--attain-secondary-color-lite);
}

.summary-header {
    text-align: center;
}

.summary-header h3 {
    font-size: 20px !important;
    color: #0249e5;
}

.attain-card.summary-card {
    display: flex;
    gap: 10px;
    justify-content: space-around;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
}

.summary-metrics {
    display: flex;
    justify-content: space-around;
}

.summary-buttons {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    margin: 0 auto;
}

.quiz-ui-header {
    height: 60px;
    padding: 10px 20px;
    text-align: center;
    font-size: 1.1em;
    background: #fff;
    position: sticky;
    width: 100vw;
    top: 0;
}

.quiz-ui-header-close {
    position: fixed;
    margin: 20px;
    cursor: pointer;
    color: #999;
    z-index: 1;
}

.quiz-ui-body {
    padding: 30px 20px;
    font-size: 1.1em;
    background: var(--attain-secondary-color-lite);
    overflow: auto;
    /* margin-top: 70px; */
    width: 100vw;
}

.quiz-ui-footer {
    height: 60px;
    padding: 10px 20px;
    font-size: 1.1em;
    background: #fff;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;
}

.quiz-footer{
    display: block;

}

.review-body ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.review-body li {
    border: 1px solid #ccc;
    margin-bottom: 8px;
    padding: 10px 10px 10px 30px;
    border-radius: 8px;
    background: #fff;
    position: relative;
}

.review-body li.correct {
    border-color: var(--attain-primary-color);
    background: var(--attain-primary-color-lite);
}

.review-body li.incorrect {
    border-color: var(--attain-incorrect-color);
    background: var(--attain-incorrect-bgcolor);
}

.review-body-img img {
    width: 360px;
    margin: 10px auto;
}

li.correct::before {
    content: "check";
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    color: var(--attain-primary-color);
    position: absolute;
    top: 4px;
    left: 5px;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

li.incorrect::before {
    content: "close";
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    color: var(--attain-incorrect-color);
    position: absolute;
    top: 4px;
    left: 5px;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.quiz-ui-nav {
    color: #333 !important;
    background: #fff !important;
    border-color: #bbb;
    border-radius: 8px !important;
    font-size: .9em;
}

.quiz-ui-nav[disabled] {
    color: #999 !important;
    background: #f2f2f2 !important;
}

#review-xofn {
    color: #333 !important;
    background: #fff !important;
    padding: .5rem 1rem;
}

span.review-your-answer-label {
    font-weight: 600;
    margin-right: 5px;
    color: var(--attain-incorrect-color);
    font-size: .8em;
    text-transform: uppercase;
}

.summary-motivation {
    text-align: center;
}

.summary-motivation strong {
    display: block;
    font-size: 28px;
    /* color: var(--attain-secondary-color); */
    color: #333;
    font-weight: 600;
}

/***** End Paper 1 App Styles ******/


/***** Possibly Global Styles ******/
.metric .label {
    display: block;
    font-weight: 500;
    color: #999;
    font-size: 16px;
    text-align: center;
}

.metric .value {
    font-size: 24px;
    font-weight: 600;
    color: #0249e5;
    text-align: left;
    display: block;
}

.metric span {
    display: block;
    text-align: center;
}

.metric.correct .value {
    color: var(--attain-correct-color);
    padding-left: 8px;
}

.metric.correct .value::before {
    font-family: 'Material Symbols Outlined';
    content: "check";
    vertical-align: bottom;
}

.metric.incorrect .value {
    color: var(--attain-incorrect-color);
    padding-left: 8px;
}

.metric.incorrect .value::before {
    font-family: 'Material Symbols Outlined';
    content: "close";
    vertical-align: bottom;
}

.donut-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(
    var(--attain-primary-color) calc(var(--score) * 1%), 
    #ddd 0
  );
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

/******** Feedback Styles ********/
.feedback-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: calc(100vh - 70px);
    background: rgba(44, 62, 80, 0.32);
    align-items: center;
    justify-content: center;
}
.feedback-overlay.active {
  display: flex;
}
.feedback-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 96vw;
    width: 370px;
    padding: 25px 20px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.14);
    position: relative;
    animation: popIn .23s cubic-bezier(.5,1.4,.6,.95);
    max-height: 80vh;
    overflow: auto;
    top: 0;
}
@keyframes popIn {
  from { transform: scale(0.94) translateY(40px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.close-btn {
  position: absolute; right: 16px; top: 14px;
  font-size: 1.7rem; background: none !important; border: none !important;
  cursor: pointer; color: #64748b;
}
.emoji-row {
  display: flex; justify-content: space-between; margin-bottom: 17px;
}
.emoji-btn {
  font-size: 2rem; background: none !important; border: none !important; cursor: pointer;
  transition: transform 0.08s; border-radius: 50%; padding: 5px;
}
.emoji-btn.selected, .emoji-btn:active {
  background: #e3f2fd;
  transform: scale(1.4);
}
.options-label {
  font-size: 0.97rem; margin-bottom: 4px; font-weight: 500; text-align: center;
}
.option-buttons {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 9px;
}
.option-btn {
  border: 1px solid #dbeafe; background: #f1f5fb; border-radius: 18px;
  padding: 7px 13px; font-size: 0.97rem; cursor: pointer;
  margin-bottom: 5px; transition: background 0.18s, color 0.11s;
}
.option-btn.selected {
  background: #2563eb !important; color: #fff !important; border-color: #2563eb !important;
}
.feedback-box-label {
  margin-top: 7px; font-weight: 500; font-size: 1rem; display: block; margin-bottom: 3px;
}
.feedback-box {
  width: 100%; min-height: 37px; border-radius: 9px;
  border: 1px solid #e0e7ef; padding: 8px 10px; margin-bottom: 15px;
  font-size: 0.97rem; background: #f9fafb; resize: none; transition: border-color 0.13s;
}
.feedback-box:focus { outline: none; border-color: #2563eb; }
.submit-btn {
  width: 100%; background: #2563eb; color: #fff;
  font-size: 1.08rem; font-weight: 600; border: none;
  border-radius: 12px; padding: 11px 0; margin-bottom: 12px; cursor: pointer;
  transition: background 0.17s;
}
.submit-btn:active { background: #1e40af; }
.thankyou-msg {
  display: none; text-align: center; padding: 14px 0 2px 0;
  font-size: 1.08rem; font-weight: 500; color: #2563eb;
}
.badge { font-size: 2.2rem; display: block; margin: 0 auto 5px auto; }
@media (max-width: 500px) {
  .feedback-modal { width: 99vw; min-width: unset; max-width: 99vw;  }
}

button#closeFeedbackBtn {
    background: none !important;
    color: #777 !important;
    position: absolute;
    top: 0;
    right: 0px;
}

button.emoji-btn::before {
    position: absolute;
    font-size: 12px;
    color: #333;
    margin: 40px 0 0 4px;
}

button.emoji-btn[data-value="angry"]::before{
    content: "very bad";
    margin-left:-7px
}

button.emoji-btn[data-value="sad"]::before{
    content: "bad";
    margin-left: 9px
}


button.emoji-btn[data-value="neutral"]::before{
    content: "neutral";
    margin-left: -2px;
}

button.emoji-btn[data-value="happy"]::before{
    content: "good";
    margin-left: 5px;
}

button.emoji-btn[data-value="excited"]::before{
    content: "very good";
    margin-left: -7px;
}


/****** Report Technical Issues Styles ******/
button#report-issue-btn {
    position: absolute;
    bottom: -24px;
    right: 16px;
    border: none !important;
    font-weight: 400;
    font-size: 12px;
    text-decoration: underline;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}