/*//////////////////*/
/* LEARNER PROFILES */
/*//////////////////*/

.learner-profile-area {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 1055px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 95px;
}

.learner-profiles-existing {
    margin-bottom: 20px;
}

.learner-profiles {
    justify-content: center;
}

.flip-card {
    background-color: transparent;
    width: 200px;
    height: 200px;
    margin: 20px;
    perspective: 1000px;
  }
  
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 35px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.05);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 35px;
}

.flip-card-front {
    background-color: var(--main-blue-press);
    color: #d8d5e8;
    font-size: 26px;
    font-weight: 900;
    overflow: hidden;
    /* background-image: url("../img/avatars/elephant-blue.d5c9b3e12252.jpg");
    background-size: 200px 200px; */
}
.flip-card-inner.disabled .flip-card-front {
    background-color: var(--main-medium-steel-grey);
    color: white;
}
.flip-card-inner.disabled .flip-card-front:hover {
    cursor: auto;
}
.current-learner .flip-card-front {
    color: white;
    background-color: var(--main-green-text);
}
  
.flip-card-back {
    background-color: white;
    border: 3px solid var(--main-medium-steel-grey);
    transform: rotateY(180deg);
    padding: 12px;
    padding-bottom: 9px;
}
.current-learner .flip-card-back {
    border: 3px solid var(--main-green);
}
.flip-card-back p {
    font-family: avenir, sans-serif;
    margin: 0;
    font-size: 14px;
}
.flip-card-back .btn {
    font-size: 16px;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: 160px;
}
.flip-card-inner.disabled .btn.btn-grokkoli-primary,
.flip-card-inner.disabled .btn.btn-grokkoli-primary:hover,
.flip-card-inner.disabled .btn.btn-grokkoli-primary:active,
.flip-card-inner.disabled .btn.btn-grokkoli-primary:focus,
.flip-card-inner.disabled .btn.btn-grokkoli-secondary,
.flip-card-inner.disabled .btn.btn-grokkoli-secondary:hover,
.flip-card-inner.disabled .btn.btn-grokkoli-secondary:active,
.flip-card-inner.disabled .btn.btn-grokkoli-secondary:focus {
    background-color: var(--main-medium-steel-grey);
    color: white;
    cursor: not-allowed;
}
.flip-card-back .btn.btn-grokkoli-secondary {
    /* background-color: rgba(255, 255, 255, 0.3); */
    font-size: 14px;
    background-color: #c1d2df;
    border: none;
}
.flip-card-back .btn.btn-grokkoli-secondary:hover {
    /* background-color: rgba(255, 255, 255, 0.4); */
    background-color: #c6d7e5;
}


.add-learner-block {
    height: 200px;
    width: 200px;
    margin: 20px;
    padding-top: 5px;
    border-radius: 35px;
    font-size: 120px;
    color: var(--main-blue);
    background-color: var(--main-steel-grey);
}
.add-learner-block:hover {
    cursor: pointer;
    color: var(--main-blue-hover);
    background-color: var(--off-white);
    border: 5px solid var(--main-steel-grey);
    box-sizing: border-box;
    padding-top: 0px;
}
.add-learner-block:active {
    cursor: pointer;
    color: var(--main-blue-press);
    background-color: var(--off-white);
    border: 5px solid var(--main-steel-grey);
    box-sizing: border-box;
}
.add-learner-profile, .confirm-subscription {
    margin: 20px;
}
.confirm-subscription h6 {
    margin-top: 24px;
    margin-bottom: 28px;
}
.add-learner-profile li {
    font-size: 15px;
    margin-right: 30px;
}
.add-learner-profile {
    font-family: Avenir, Helvetica, Arial, sans-serif;
}
.add-learner-profile .field-group > label {
    font-weight: 500;
    margin-top: 10px;
}
@media screen and (min-width: 830px) {
    .add-learner-profile #id_learning_disabilities label {
        margin-bottom: 2px;
    }
}
/* flex-shrink:0 because .single-option-select-field label above is a flex container:
   without it an option whose text wraps to two lines over-constrains the line and
   squashes the box down to its min-width:auto floor -- the UA's intrinsic 13px --
   so single-line options render 16px and wrapped ones 13px. */
.add-learner-profile .single-option-select-field input[type="radio"],
.add-learner-profile .single-option-select-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.add-learner-profile .single-option-select-field li label {
    font-weight: normal;
    font-size: 15px;
    margin-top: 0.2rem;
    margin-bottom: 0;
}
.add-learner-profile .btn-grokkoli-primary {
    font-weight: 600;
    float: none;
    width: 100%;
    margin-top: 10px;
}

.learner-profile-entry-container {
    background-color: var(--main-steel-grey);
    padding: 12px 20px 20px;
    display: inline-block;
    border-radius: 0px 38px 38px 38px;
    margin-bottom: 20px;
    font-size: 1rem;
}
.confirm-subscription .learner-profile-entry-container {
    text-align: center;
}
.confirm-subscription .learner-profile-entry-container form {
    display: flex;
    justify-content: center;
}
.learner-profile-entry-container h4 {
    text-align: left;
}
.learner-profile-entry-container h5 {
    font-weight: 900;
    color: var(--main-green);
}

.account-prompts {
    margin: 100px auto;
}
.account-prompt {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 40px auto 0px;
    max-width: 700px;
    width: 80vw;
    border: 6px dashed var(--main-light-grey);
    border-radius: 40px;
    transition: border-color 0.3s ease;
    padding: 30px 40px 20px;
    background-color: #fafbfc;
}
@media (max-width: 400px) {
    .account-prompt {
        padding: 20px;
    }
}
.account-prompt h4 {
    font-size: calc(1.2rem + 0.5vw);
    margin-bottom: 20px;
}
.account-prompt p {
    font-size: 17px;
}
.account-prompt a {
    font-size: 18px;
    padding-bottom: 8px;
}

.referral-container {
}
.referral-highlight {
    color: var(--green);
    font-size: 20px;
}
.referral-code {
    color: var(--main-purple);
    font-size: 20px;
}
.referral-link-container {
    display: table;
    /* border: 1px solid #555; */
    background-color: #eee;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1.2em;
    border-radius: 20px;
    margin-bottom: 15px;
}
.referral-link {
    font-size: 15px;
    display: table-cell;
    padding-right: 1em;
}

.referral-link-copy-container {
    display: table-cell;
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: blue;
}
.referral-link-copy {
    background-image: url("../img/clipboard.591844d019e6.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: blue;
}
.referral-link-copy-check {
    background-image: url("../img/check.03a3eee9ad50.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.referral-show-details {
    color: var(--main-blue);
    cursor: pointer;
    font-size: 18px;
    line-height: 40px;
    /* text-align: center; */
}

.referral-details {
    display: none;
    /* text-align: center; */
}

.referral-status {
    margin-top: 1em;
    font-size: 20px;
    color: var(--green);
}

.referral-status-list {
    padding-left: 20px;
}
.referral-status-list li {
    margin-bottom: 0;
}
.referral-status-title {
    width: 10em;
    display: inline-block
}

.feedback-prompt-area {
}
.feedback-prompt-area .btn-grokkoli-secondary {
    font-size: 20px;
    background-color: var(--main-steel-grey);
    border-color: var(--main-steel-grey);
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
.feedback-prompt-area .text-area {
    margin-left: auto;
    margin-right: auto;
}
.feedback-prompt-area h2 {
    color: var(--main-orange);
}

/*/////////////////*/
/* LESSON PROGRESS */
/*/////////////////*/

/* Centred inside the top bar (--question-bar-height, figureone.css). Everything
   inside the pill is in em, so this font-size scales the whole pill: it grows
   with the viewport width up to 16px at 960px, then stops, and keeps shrinking
   on narrower screens. The min() also keeps it short enough to fit the bar
   (1.35em tall) and narrow enough to fit the screen beside the user icon
   (~34em wide). The plain calc() / 1rem lines are for browsers without min(). */
.lesson-progress-area-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: -moz-max-content;
    width: max-content;
    font-size: calc(0.375rem + 1vw);
    font-size: min(calc(0.375rem + 1vw),
                   calc((var(--question-bar-height, 2.5rem) - 6px) / 1.35),
                   calc((100vw - 4.5rem) / 34));
}
@media screen and (min-width: 960px) {
    .lesson-progress-area-container {
        font-size: 1rem;
        font-size: min(1rem, calc((var(--question-bar-height, 2.5rem) - 6px) / 1.35));
    }
}
.lesson-progress-area-container.lesson-progress-chrome-hidden {
    display: none;
}
.lesson-progress-area .correct-answer-count.correct-answer-count-hidden {
    display: none;
}
/* width:fit-content so the pill is sized BY its contents rather than filling its
   parent. As a block-level flex container it took the parent's width, so when the
   row was wider than that -- which Heliomath reaches first, same CSS but a wider
   font -- the star count's digits rendered outside the rounded border. Sizing to
   content also stops justify-content:space-between stretching the three groups
   apart across a box wider than they need. */
.lesson-progress-area {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 1.25em;
    background-color: white;
    padding: 0 0.875em;
    line-height: 1.2;
    min-width: 23.75em;
    width: fit-content;
}
/* Every group keeps the width of its own content -- nothing is given a fixed width
   that under-reports its size to the flex algorithm (a 34px .star-count holding 68px
   of star + digits is exactly how the digits ended up outside the pill). */
.lesson-progress-area > * {
    flex: 0 0 auto;
}


.lesson-progress-area .progress-indicator, .lesson-progress-area .correct-answer-count {
    display: flex;
    align-items: center;
    margin-right: 2.2em;
}
.lesson-progress-area .progress-bar-area {
    min-width: 9.7em;
    width: 100%;
    max-width: 11em;
    height: 0.75em;
    background: var(--main-medium-light-grey);
    border-radius: 0.375em;
    margin-top: 0.0625em;
    margin-left: 0.55em;
}
.lesson-progress-area .progress-bar-area .progress-bar {
    height: 0.75em;
    min-width: 0.75em;
    background-color: var(--main-green);
    border-radius: 0.375em;
}
.lesson-progress-area .progress-bar-area .progress-bar.golden {
    background-color: var(--main-gold);
}
.lesson-progress-area .progress-bar-area .progress-bar-golden {
    background-color: var(--main-gold);
}

.progress-bar-golden {
    background-color: var(--main-gold);
}

.lesson-progress-area .correct-answer-count, .lesson-progress-area .star-count {
    display: flex;
    align-items: center;
}
.lesson-progress-area .progress-indicator .label,
.lesson-progress-area .correct-answer-count .label {
    font-size: 0.95em;
    width: max-content;
    color: #676869;
}
.lesson-progress-area .correct-answer-count .correct-answer-count-value, .lesson-progress-area .star-count .star-count-value {
    display: inline-flex;
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-size: 110%;
    color: var(--main-green-text);
    font-weight: 700;
    padding-left: 0.45em;
}
.lesson-progress-area .star-count .star-count-value {
    color: var(--main-gold);
}

/* Regular progress increment: glow pulse */
.lesson-progress-area .progress-bar-area .progress-bar.increasing {
    animation: greenGlowPulse 1.2s ease;
}
.lesson-progress-area .answer-count .correct-answer-count-value.increasing {
    animation: greenGlowPulse 1.2s ease;
}
@keyframes greenGlowPulse {
    0%   { background-color: var(--main-green); }
    50%  { background-color: var(--main-light-green); }
    100% { background-color: var(--main-green); }
}

.lesson-progress-area .star-count .star-icon {
    height: 1.125em;
    width: 1.125em;
    /* The icon must CREATE width: as a flex item it otherwise shrinks out of
       the min-content calculation, and the pill ends up exactly one icon-width
       too narrow -- which is how the digits landed outside the border. */
    flex-shrink: 0;
}

/* Star conversion: gold star bulge when green star dissolves into it */
@keyframes starBulge {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.lesson-progress-area .star-count .star-icon.bulging {
    animation: starBulge 0.4s ease;
}

/* Star conversion: "+1" indicator */
.lesson-progress-area .star-count {
    position: relative;
}
.lesson-progress-area .star-count .plus-one {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    font-weight: 700;
    font-size: 80%;
    color: var(--main-green-text);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.lesson-progress-area .star-count .plus-one.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-1.1em);
}
.lesson-progress-area .star-count .plus-one.fading {
    opacity: 0;
    transform: translateX(-50%) translateY(-1.7em);
}

/*////////*/
/* SPEECH */
/*////////*/

#main .speaker_container {
    /* background-color: var(--main-medium-light-grey); */
    background-color: white;
    border: 1px solid var(--main-light-grey);
}
#main .speaker_container_white {
    background-color:rgba(255, 255, 255, 0.25);
}


/*///////////////*/
/* INTERSTITIALS */
/*///////////////*/

.interstitial {
    z-index: 20;
    /* Making this element position: absolute; hides key buttons on the signup flow for users with very small devices!!! */
    /* position: absolute; */
    overflow: overlay;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    text-align: center;
    padding-top: calc(8px + 1vh);
    padding-bottom: calc(17px + 1vh);
    animation-iteration-count: infinite;
}
@media screen and (min-width: 0px) {
    .interstitial {
        min-height: calc(100vh - 6.5rem - 50px);
    }
}
@media screen and (min-width: 640px) {
    .interstitial {
        min-height: calc(100vh - 6.5rem - 50px);
    }
}

.interstitial-message {
    opacity: 0.85;
    font-size: calc(1.7rem + 1.3vw);
    color: white;
    width: 80vw;
    max-width: calc(900px + 1vw);
}
.interstitial-message.onboarding-check h2 {
    font-size: calc(1.1rem + 1vw);
}
.interstitial-message h3 {
    opacity: 0.5;
}
.interstitial-message h4 {
    margin-top: 30px;
    margin-bottom: 35px;
    opacity: 0.6;
}
.interstitial .semi-transparent {
    opacity: 0.5;
    font-size: calc(1.5rem + 1.3vw);
}
.interstitial .btn, .interstitial #say-btn {
    opacity: 0.8;
    font-weight: 900;
    color: white;
    background-color: rgba(255,255,255,0.25);
}
.interstitial .btn { 
    font-size: min(calc(1.3rem + 0.8vw), 30px);
}
.interstitial #say-btn {
    font-size: min(calc(1rem + 1.2vw), 35px);
}
.interstitial .btn-grokkoli-secondary {
    background-color: rgba(0,35,95,0.8);
    border: none;
    opacity: 0.4;;
}

/* RECAP DETAILS */

.recap-details {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 8em;
    height: 40%;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}
.lesson-recap-block {
    max-width: 450px;
    background-color: rgb(255, 255, 255, 0.07);
    margin: 3vw 1.5vw 0px;
    padding: 2vw 3vw 1vw;
    text-align: left;
    border-radius: 20px;
    font-size: 0.9em;
    /* font-size: calc(9px + 0.6vw); */
}
.badge-title {
    font-size: 1.2em;
}
.lesson-recap-block.centered {
    margin-top: 0px;
    margin-bottom: 30px;
    max-width: 320px;
    min-width: 25vw;
}
.lesson-recap-block .lesson-name {
    color: white;
    font-size: 100%;
    margin-bottom: 15px;
}
.lesson-recap-block h4 {
    color: var(--main-light-green);
}

/*////////////////*/
/* GENERIC PROMPT */
/*////////////////*/

.standard-prompt-area {
    background: white;
    padding: 20px 30px;
    border-radius: 35px;
    border: 1px solid var(--main-light-grey);
    align-items: center;
}

.standard-prompt-area h4{
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}

.vertically-aligned {
    align-items: center;
    margin-top: 40px;
}

.answer-correctness-notifier {
    /*margin-top: 20px;*/
}
.lets-get-started-notifier {
    margin-top: 20px
}

/*//////////////////*/
/* ACCOUNT SETTINGS */
/*//////////////////*/

.settings-box {
    font-family: avenir, sans-serif;
    display: flex;
    flex-direction: column;
    max-width: 700px;
    width: 90vw;
    text-align: left;
    border: 1px solid var(--main-light-grey);
    background-color: var(--main-light-grey);
    margin-top: 30px;
}
.settings-box h3 {
    padding: calc(0.5rem + 1vw) calc(1rem + 1.5vw);
    margin: 0;
}
.collapsable {
    overflow: hidden;
}
.setting-set {
    display: flex;
    justify-content: space-between;
    padding: calc(0.5rem + 1vw) calc(1rem + 1.5vw);
    border-top: 1px solid var(--main-light-grey);
    background-color: white;
}
@media screen and (max-width: 500px) {
    .setting-set.individual-learner-profile-settings {
        flex-direction: column;
        align-items: stretch !important;
    }
}
@media screen and (max-width: 540px) {
    .setting-set.individual-learner-profile-settings.charged {
        flex-direction: column;
        align-items: stretch !important;
    }
}
.setting-set.global {
    align-items: center;
}
/* The 2FA + General sets lay out THREE flex children (h5, an explanatory <p>, and
 * .setting-options holding the button). On phones their min-content widths sum past
 * the card, and because flex items default to min-width:auto nothing could shrink —
 * with the inherited nowrap the button was pushed clean off the right edge (measured
 * ~87px past a 390px viewport, and unreachable: the page itself doesn't scroll
 * horizontally). Let the controls drop to their own row instead.
 *
 * Gated to narrow screens ON PURPOSE: flex-wrap changes the sizing algorithm (an item
 * that would otherwise shrink wraps instead), so applying it unconditionally also
 * wrapped the button on desktop, where it fits fine today. 620px matches the
 * breakpoint .setting-option.wide already uses below. */
@media screen and (max-width: 620px) {
    .setting-set.global {
        flex-wrap: wrap;
        row-gap: calc(0.5rem + 0.5vw);
    }
    /* Keep the wrapped controls right-aligned, as justify-content: space-between
     * renders them when everything still fits on one line. */
    .setting-set.global .setting-options {
        margin-left: auto;
    }
}
.setting-set h5 {
    margin-top: 4px;
    margin-right: calc(10px + 2vw);
    margin-bottom: 0;
    font-weight: 700;
    color: var(--main-green);
}
.setting-set.individual-learner-profile-settings h5 {
    margin-bottom: 10px;
}
.setting-set.global h5 {
    margin-top: 0;
}
.learner-settings {
    display: flex;
    flex-direction: column;
}
.setting-set .setting-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(0.95rem + 0.1vw);
}
.setting-set .setting-option.wide {
    align-items: flex-start !important;
}
.setting-set .setting-option.wide p {
    margin-top: 4px;
    margin-bottom: 10px;
}
.setting-set .setting-option.subtitle p {
    font-weight: bold;
    margin-top: 1.5em;
}

@media screen and (max-width: 620px) {
    .setting-set .setting-option.wide {
        flex-direction: column;
        align-items: stretch !important;
    }
}
.setting-set .setting-option .multi-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}

.setting-set .setting-option:not(:last-child) {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.setting-set p {
    margin-bottom: 0;
    margin-right: calc(10px + 0.5vw);
}

.multi-toggle .btn-group-toggle {
    margin-bottom: 13px;
}

.btn-group-toggle .btn-secondary {
    border: 1px;
    margin-right: 0px;
    font-size: calc(9px + 1vw);
    background-color: var(--main-medium-steel-grey);
    padding: 8px 22px;
    padding: calc(4px + 0.2vw) calc(11px + 0.6vw);
    border-radius: 0px;
}
@media screen and (min-width: 600px) {
    .btn-group-toggle .btn-secondary {
        font-size: 15px;
        padding: 5px 15px;
    }
}
.setting-option .btn-group-toggle input[type="radio"] {
    display: none;
}
.setting-option .btn-secondary {
    font-weight: 500;
}
.setting-option .btn-secondary:not(:disabled).active {
    background-color: var(--main-green);
}
.setting-option .btn-secondary.active {
    border-left: 0px solid #fff !important;
}
.setting-option .on-off-toggle .btn-secondary:last-child:not(.disabled).active {
    background-color: var(--main-dark-grey); 
}
.setting-option .btn-secondary:not(:first-child) {
    border-left: 1px solid #929799;
}

.skip_question_button {
    font-size: 1em;
    border: none;
    background-color: var(--main-medium-light-grey);
    color: var(--main-purple);
    padding-left: 0.8em;
    padding-right: 0.8em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    border-radius: 1em;
    font-weight: 700;
}

.btn-group-toggle .btn-secondary:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.btn-group-toggle .btn-secondary:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.warning-popup form .btn-secondary {
    color: var(--main-purple);
}

.right-justified {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* --- Learner-centric settings: selector + per-learner card --- */
.learner-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: calc(0.5rem + 1vw) calc(1rem + 1.5vw);
    background-color: white;
    border-top: 1px solid var(--main-light-grey);
}
.learner-tab {
    border: 1px solid var(--main-medium-steel-grey);
    background-color: white;
    color: var(--main-dark-grey);
    font-weight: 600;
    font-size: calc(0.9rem + 0.1vw);
    padding: 0.4em 1.1em;
    border-radius: 2em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.learner-tab:hover {
    border-color: var(--main-green);
    color: var(--main-green);
}
.learner-tab.active {
    background-color: var(--main-green);
    border-color: var(--main-green);
    color: white;
}
.learner-panel {
    display: none;
}
.learner-panel.active {
    display: block;
}
/* Each subsection of a learner card stacks vertically (overrides .setting-set's row) */
.learner-card-section {
    flex-direction: column;
    align-items: stretch;
}
.setting-subhead {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--main-dark-grey);
    margin: 0 0 14px 0;
}
.profile-field-help {
    font-size: 0.75em;
    color: #888;
    margin-top: -8px;
    margin-bottom: 14px;
}
.profile-field .profile-field-control {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.profile-field .learner-name-input {
    min-width: 8em;
    max-width: 12em;
    border-radius: 0.25rem !important;
}
.profile-field .learner-grade-select {
    min-width: 9em;
    border-radius: 0.25rem !important;
}
.profile-save-btn {
    border-radius: 3em;
    min-width: 5em;
    border: none;
    background-color: var(--main-green);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4em 0.9em;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
/* Navigation buttons keep the same appearance before and after visiting. */
.learner-profile-area a.profile-save-btn,
.learner-profile-area a.profile-save-btn:visited {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
}
.profile-save-btn:not(.profile-save-disabled):hover {
    filter: brightness(0.93);
}
.profile-save-btn.profile-save-disabled {
    background-color: var(--main-medium-light-grey);
    color: var(--main-dark-grey);
    opacity: 0.6;
    cursor: default;
}
.profile-field-message {
    font-size: 0.8em;
    color: var(--main-green);
    margin: 0;
}
.profile-field-message.profile-field-error {
    color: var(--main-orange);
}

/* Initial assessment: the retake button and its confirmation dialog. Amber rather than
   the green Save look, because this resets the learner's placement and should read as
   a caution -- the same treatment as the dashboard's Retake Assessment button. */
/* The row button copies .rtd__learner__honing_btn (rt_dashboard.css) exactly. Clear
   Account shares the shape, in red: it is the more destructive of the two. */
.retake-assessment-btn,
.clear-account-btn {
    padding: 0.5em 1em;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.retake-assessment-btn,
.settings-dialog-actions .retake-assessment-confirm {
    background: #fff3cd;
    color: #754500;
    border: 1px solid #b7791f;
}
.retake-assessment-btn:hover:not(:disabled),
.settings-dialog-actions .retake-assessment-confirm:hover:not(:disabled) {
    background: #ffe3a3;
    border-color: #754500;
}
.retake-assessment-btn:focus-visible,
.settings-dialog-actions .retake-assessment-confirm:focus-visible {
    outline: 2px solid #754500;
    outline-offset: 3px;
}
.retake-assessment-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.clear-account-btn {
    background: #fde8e8;
    color: #7a1a1a;
    border: 1px solid #c53030;
}
.clear-account-btn:hover:not(:disabled) {
    background: #f9caca;
    border-color: #7a1a1a;
}
.clear-account-btn:focus-visible {
    outline: 2px solid #7a1a1a;
    outline-offset: 3px;
}
/* Dialog buttons: the dashboard's .rtd__placement_dialog_actions layout on top of
   .password_check__overlay_submit -- both fill the row, Cancel outlined in blue. */
.settings-dialog-actions .password_check__overlay_submit {
    flex: 1;
    width: auto;
}
.settings-dialog-actions .settings-dialog-cancel {
    background: transparent;
    color: var(--main-blue);
    border: 1px solid var(--main-blue);
}
/* Clear Account's confirm: red, like the button that opened the dialog. */
.settings-dialog-actions .clear-account-confirm {
    background: #fde8e8;
    color: #7a1a1a;
    border: 1px solid #c53030;
}
.settings-dialog-actions .clear-account-confirm:hover:not(:disabled) {
    background: #f9caca;
    border-color: #7a1a1a;
}
.settings-dialog-actions .clear-account-confirm:focus-visible {
    outline: 2px solid #7a1a1a;
    outline-offset: 3px;
}
.retake-assessment-dialog {
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
}
.retake-assessment-dialog h5 {
    text-align: center;
}
.retake-assessment-warning {
    font-weight: 700;
}
.retake-assessment-intro {
    font-size: 0.85em;
    margin-bottom: 1em;
}
.retake-assessment-survey {
    min-width: 0;
    margin: 0 0 0.5em;
    padding: 0;
    border: 0;
    font-size: 0.9em;
}
.retake-assessment-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.retake-assessment-option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
}
.retake-assessment-details {
    margin-top: 12px;
    font-size: 0.95em;
    resize: vertical;
}
.retake-assessment-error {
    margin-bottom: 0.5em;
    overflow-wrap: anywhere;
}
.warning-popup .options.settings-dialog-actions {
    flex-wrap: nowrap;
    gap: 12px;
}

/* Learning differences (family accounts): a wrapping row of checkboxes above Save. */
.learning-differences-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
    margin: 0.4em 0 0.8em;
    font-size: calc(0.95rem + 0.1vw);  /* matches .setting-set .setting-option */
}
.learning-differences-control {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.learning-differences-message {
    font-size: 0.85em;
}
.learning-differences-options label {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    cursor: pointer;
}
/* Dim notifications when global emails are off */
.notifications-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.notifications-off-hint {
    display: none;
}
.notifications-disabled .notifications-off-hint {
    display: block;
}

/* .drop-down-selector-container {
    display: none;
    height: 0;
    width: 75px;
    animation: fadein 1s ease-in-out;
    animation-name: container-fade-in;
    animation-duration: 1s;
}
.drop-down-selector-container.show {
    display: inline-block;
    height: 56px;
}
@keyframes container-fade-in {
    from {height: 0}
    to {height: 56px}
} */
.drop-down-selector-container select {
    /* opacity: 0; */
    appearance: none;
    /* safari */
    -webkit-appearance: none;
    /* other styles for aesthetics */
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--main-green-text);
    padding: 0.675em 1em 0.675em 1em;
    border: 2px solid var(--main-green-text);
    border-radius: 0.6rem;
    cursor: pointer;
    text-align: center;
}
/* .drop-down-selector-container select.show {
    opacity: 1;
    animation: fadein 1s ease-in-out;
    animation-name: select-fade-in;
    animation-duration: 1s;
}
@keyframes select-fade-in {
    from {opacity: 0}
    to {opacity: 1}
} */
.drop-down-selector-container select.success {
    border: 2px solid var(--main-green-text);
    color: var(--main-green-text);
}


/*////////*/
/* LOADER */
/*////////*/

.loader {
  background-color: var(--main-color);
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 100px;
  left: 0;
  /* position: absolute; */
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  z-index: 0;
}

.loader__element {
  opacity: 0.7;
  border-radius: 100%;
  border: 3px solid var(--main-lemon);
  margin: 6px;
}

.loader__element:nth-child(1) {
  animation: preloader .6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
  animation: preloader .6s ease-in-out alternate .2s infinite;
}

.loader__element:nth-child(3) {
  animation: preloader .6s ease-in-out alternate .4s infinite;
}

@keyframes preloader {
  100% { transform: scale(2); }
}

/*///////////////////*/
/* LEARNING PROGRESS */
/*///////////////////*/

.family-learning-progress {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    max-width: 900px;
}
.family-learning-progress h1 {
    text-align: center;
}

.family-learning-progress .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.family-learning-progress .top-row h2 {
    margin-right: 20px;
}
.family-learning-progress .achievement-stars {
    display: flex;
    align-items: center;
    float: right;
}
.family-learning-progress .achievement-stars .stars {
    background-image: url("../img/star-empty-dark-grey.b8f61353ce4f.svg");
    background-size: calc(20px + 1vw);
    opacity: 0.9;
    height: calc(20px + 1vw);
    width: calc(20px + 1vw);
}
.family-learning-progress .achievement-stars .count {
    margin-left: 8px;
    font-size: 30px;
    color: var(--main-winter-green);
    font-weight: 900;
}

.learner-progress {
    background-color: white;
    border: 1px solid var(--main-steel-grey);
    padding: calc(25px + 1.5vw);
    margin-bottom: 30px;
    border-radius: 4px;
}
@media screen and (min-width: 1000px) {
    .learner-progress {
        padding: 40px;
    }
}
.learner-progress h2 {
    font-size: 36px;
    font-weight: 900;
    color: var(--main-winter-green);
    margin-top: 10px;
}
.learner-progress h5 {
    margin-top: 30px;
    margin-right: 10px;
}
.learner-progress p {
    font-size: 13px;
    margin: 0;
}
.learner-progress strong {
    font-size: 115%;
}
.learner-progress .rolling-7-days {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.learner-progress .day-block {
    display: flex;
    flex-direction: column;
    /* height: calc(35px + 3vw);
    width: calc(35px + 3vw); */
    margin-right: 10px;
    margin-bottom: 10px;
    padding: calc(0.3rem + 0.3vw) calc(0.2rem + 0.3vw);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    background-color: var(--main-light-grey);
    border-radius: 3px;
    width: 88px;
    height: 88px;
}

.learner-progress .day-block-day-date {
    font-size: 0.8em;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
}
.learner-progress .day-block.active-day {
    justify-content: center;
    /* height: calc(60px + 4vw);
    width: calc(60px + 4vw); */
    margin-right: 10px;
    color: white;
    background-color: var(--main-winter-green);
    width: 88px;
    height: 88px;
    opacity: 0.85;
}
.learner-progress .day-block.active-day:hover {
    opacity: 1;
}
.learner-progress .day-block .correct-answer-count {
    font-size: calc(16px + 0.8vw);
    line-height: calc(15px + 1.3vw);
}
@media screen and (min-width: 1000px) {
    /* .learner-progress .day-block {
        height: 65px;
        width: 65px;
    } */
    .learner-progress .day-block.active-day {
        height: 100px;
        width: 100px;
        padding: calc(0.3rem + 3px);
    }
    .learner-progress .day-block .correct-answer-count {
        font-size: 24px;
        line-height: 28px;
    }
}
.learner-progress .rolling-7-days p {
    max-width: 300px;
    color: var(--main-dark-grey);
}
.learner-progress .day-block p {
    font-size: 12px;
    line-height: 14px;
    color: white;
}
.learner-progress .grade-progress,
.learner-progress .fact-progress {
    margin-top: 40px;
}
.learner-progress .grade-completion-bar {
    min-width: 220px;
    width: 100%;
    max-width: 500px;
    height: 10px;
    background: var(--main-medium-light-grey);
    border-radius: 5px;
    margin-bottom: 60px;
}
.learner-progress .fact-completion-bar {
    min-width: 220px;
    width: 100%;
    max-width: 500px;
    height: 10px;
    background: var(--main-medium-light-grey);
    border-radius: 5px;
    margin-right: 10px;
}
.learner-progress .fact-row {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    margin-bottom: 60px;
}
.learner-progress .fact-completion-bar .fact-started-bar {
    position: relative;
    display: flex;
    width: 10px;
    height: 10px;
    background: var(--main-gold);
    border-radius: 5px;
}
.learner-progress .fact-completion-bar .fact-completed-bar {
    position: relative;
    width: 10px;
    height: 10px;
    background: var(--main-light-winter-green);
    border-radius: 5px;
}
.learner-progress .fact-completion-bar .fact-count-container {
    position: relative;
}
.learner-progress .fact-completion-bar .fact-count {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 12px;
    text-align: center;
    min-width: 90px;
}
.learner-progress .grade-completion-bar .newly-completed {
    position: relative;
    width: 10px;
    height: 10px;
    background: var(--main-light-winter-green);
    border-radius: 5px;
}
.learner-progress .grade-completion-bar .previously-completed {
    width: 10px;
    height: 10px;
    background: var(--main-winter-green);
    border-radius: 5px;
}

.learner-progress .grade-completion-bar .notch {
    position: absolute;
    top: -5px;
    right: calc(50% - 4px);
    height: 0px;
    width: 0px;
    border-bottom: 5px solid var(--main-winter-green);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.learner-progress .grade-completion-bar .percent-completed {
    position: absolute;
    top: 15px;
    right: -22px;
    opacity: 0.85;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: var(--main-winter-green);
    color: white;
    font-size: 18px;
    font-weight: 900;
}
.learner-progress ul {
    list-style: none;
    margin-left: 20px;
    padding-left: 0;
}
.learner-progress ul li {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.learner-progress ul li:before {
    content: '★';
    margin-right: 10px;
    color: var(--main-gold);
    font-size: 90%;
}

.learning-sessions-table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.learning-sessions-table .learning-session-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2px;
    min-width: 102px;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--main-winter-green);
    border-radius: 2px;
    border: 1px solid var(--main-winter-green);
}
.learning-sessions-table .learning-session-cell:hover {
    opacity: 0.75;
    cursor: pointer;
}
.learning-sessions-table .learning-session-cell .answers {
    display: flex;
    align-items: baseline;
    flex-direction: row;
}
.learning-sessions-table .learning-session-cell .answers .answer-count {
    font-size: 21px;
}
.learning-sessions-table .learning-session-cell .minutes {
    font-size: 13px;
}
.learning-sessions-table .see-more {
    min-width: 98px;
    line-height: 50px;
    text-align: center;
    font-size: 13px;
    color: var(--main-blue);
}
.learning-sessions-table .see-more:hover {
    cursor: pointer;
    color: var(--main-blue-hover);
}

.math-abilities {
    margin-top: -10px;
    margin-bottom: 60px;
}
.table.math-abilities tr {
    border-bottom: 1px solid var(--main-steel-grey);
}
.table.math-abilities th {
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    border: none;
    padding: 9px 0;
}
.table.math-abilities thead th {
    padding: 12px 10px;
}
.potential-vertical {
}
.table.math-abilities th.first-column {
    text-align: left;
    padding: 9px 0;
    min-width: 21vw;
}
@media screen and (max-width: 800px) {
    .table.math-abilities thead th:not(.first-column) {
        position: relative;
        height: 108px;
        max-width: 10px;
        padding: 0;
    }
    .potential-vertical {
        position: absolute;
        max-width: 10px;
        top: 88px;
        left: 4.3vw;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 5% 50%;
        -moz-transform-origin: 5% 50%;
        -ms-transform-origin: 5% 50%;
        -o-transform-origin: 5% 50%;
        transform-origin: 5% 50%;
    }
    .table.math-abilities th.first-column {
        min-width: 35vw;
    }
}
@media screen and (min-width: 1000px) {
    .table.math-abilities th.first-column {
        min-width: 350px;
    }
    .table.math-abilities th.first-column {
        min-width: 210px;
    }
}
.table.math-abilities td {
    text-align: center;
    width: 30px;
    font-size: 20px;
    padding: 20px 0px;
}
.table.math-abilities th, .table.math-abilities td {
    line-height: 15px;
    vertical-align: middle;
}

.no-data-state {
    text-align: center;
    font-size: 24px;
    color: var(--main-purple);
    padding: 30px 0px 60px 0px;
    padding-left: 15%;
    padding-right: 15%;
}
.rolling-weekly-question-count-graph {
    display: flex;
    margin-top: 10px;
}
.week {
    display: flex;
    /* flex-direction: column;
    width: 10%; */
}
.rolling-weekly-question-count-graph .vertical-bar {
    position: relative;
    height: 85px;
    border-bottom: 1px solid var(--main-steel-grey);
}
.rolling-weekly-question-count-graph .week .weekly-question-count {
    position: absolute;
    bottom: -1px;
    width: 30%;
    background-color: var(--main-light-winter-green);
    margin-left: 35%;
    margin-right: 35%;
}
.rolling-weekly-question-count-graph .week:last-child .weekly-question-count {
    background-color: var(--main-winter-green);
}
.rolling-weekly-question-count-legend {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
}

/* DETAILED SESSION RECAP */

.session-recap {
    max-width: none;
    margin-top: 75px;
    margin-bottom: 100px;
    padding-top: 10px;
    padding-left: 4vw;
    padding-right: 4vw;
}
.question-stack {
    height: 70vh;
    overflow-y: auto;
}
.question-stack table {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.question-stack table thead {
    position: sticky;
    top: 0;
    font-weight: 900;
    background-color: var(--off-white);
}
.question-stack table thead td {
    font-size: 85%;
}
.question-stack table tr.kludgy-border  {
    height: 2px;
    background: var(--main-steel-grey);
    padding: 0;
}
.question-stack table tr.kludgy-border td  {
    height: 0;
    padding: 0;
}
.question-stack table tr {
    padding: 0;
}
.question-stack table td {
    text-align: center;
    padding: 10px;
}
.question-stack table td:first-child {
    min-width: 30vw;
    max-width: 50vw;
    text-align: left;
}
.question-stack table tr.learning-mode-change td {
    background-color: var(--main-steel-grey);
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}
.learning-mode-change td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.learning-mode-change td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.learning-mode-change {
    color: var(--main-dark-grey);
}
.mode_NEW_LEARNING, .mode_GENERALIZING {
    color: var(--main-green)
}
/* .mode_CONFIRM_CONFUSION, .mode_REASK_QUESTION {
    color: var(--main-gold);
} */
.mode_TROUBLESHOOTING, .mode_REMEDIATION {
    color: var(--main-orange)
}

/* NOT ENTIRELY SURE WHAT THIS IS...*/

#math-step-list {
    opacity: 0;
    transition: opacity .25s;
    -webkit-transition: opacity .25s;
    font-size: 13px;
}

.table#math-step-list tr {
    border-bottom: 1px solid var(--main-medium-grey);
}

.table#math-step-list th {
    font-size: 13px;
    font-weight: 500;
    border: none;
    padding: 9px;
}

#math-step-list span {
    color: var(--main-medium-dark-grey);
}

#math-step-list td .row {
    justify-content: left;
}

#math-step-list td .row .col {
    display: inline-block;
    flex-grow: unset;
    white-space: nowrap;
}

#math-step-list td .row .col.expand-to-available-width {
    flex-grow: 1;
    white-space: normal;
}

#math-step-list td.table-button-cell {
    width: 50px;
}

#math-step-list span {
    color: #212529;
}

#math-step-list .math-lesson {
    max-width: 250px;
}

#math-step-list .example-question {
    max-width: 250px;
}


#math-step-list .template-example {
    max-width: 350px;
}


/* Admin Options styles */

.admin-options-area {
}
.admin-options-area .btn-grokkoli-secondary {
    color: var(--main-orange);
    font-size: 16px;
}
.admin-options-area .btn-grokkoli-secondary:hover {
    color: var(--main-orange);
}
.admin-options-area .btn-grokkoli-secondary:active {
    color:  var(--main-orange);
}

/*//////////////*/
/* SUBSCRIPTION */
/*//////////////*/

.payment-issue-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 95px;
}
.payment-issue-container p {
    font-size: calc(16px + 0.25vw);
}
.payment-issue-container a {
    font-weight: 900;
}

/*/////////////////////*/
/* LEARNING OBJECTIVES */
/*/////////////////////*/

.learner-search-container {
    background-color: var(--main-steel-grey);
    padding: 20px;
    display: inline-block;
    border-radius: 0px 38px 38px 38px;
    margin-bottom: 20px;
}
.learner-search-container .row {
    align-items: flex-end;
}
.learner-search-container .field-group {
    margin-left: 20px;
    margin-right: 20px;
}
.learner-search-container .form-control {
    height: calc(1.75em + .75rem + 2px);
    padding: 0.4rem 1rem;
    font-size: 1rem;
    border-radius: 20px 20px 20px 20px;
}
.learner-search-container .field-group input {
    max-width: 400px;
    min-width: 300px;
}
.learner-search-container .btn {
    max-height: 60px;
}

.question-answer-history {
    margin-top: 35px;
}

.question-answer-history .question-answer {
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--main-medium-grey);
}
.question-answer-history .question-answer.header {
    font-size: 17px;
    font-weight: 900;
}

.question-answer-history .learning-mode {
    font-weight: 900;
    padding-left: 0;
}
.question-answer-history .question {
    text-align: center;
}

.question-answer-history .answer-correctness {
    font-size: 42px;
}
.question-answer-history .answer-correctness.correct {
    color: var(--main-green);
}
.question-answer-history .answer-correctness.incorrect {
    color: var(--main-orange);
}

/*///////*/
/* POPUP */
/*///////*/

.warning-mask {
    z-index: 1050!important;
    position: fixed;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .1);
    height: 100vh;
    width: 100vw;
    text-align: center;
}
.warning-popup {
    max-width: 400px;
    width: 50vw;
    min-width: 275px;
    background-color: #fff;
    padding: 30px;
    border-radius: 25px;
}
.warning-popup .options {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.warning-popup .btn {
    font-size: calc(0.8rem + 0.25vw);
    padding: calc(2px + 0.25vw) calc(15px + 0.25vw);
    margin-top: 10px;
    margin-right: 0px;
    background-color: var(--main-steel-grey);
    border: none;
    color: var(--main-blue);
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* FEEDBACK WIDGET */
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#feedback-widget-container {
    z-index: 1050;
    position: fixed;
    /* Centre vertically rather than pinning the TOP at 35%. The widget is ~475px tall
     * (the form's min-height:300px sets that even while it's slid off-screen), so
     * top:35% ran it past the bottom of any viewport shorter than 475/0.65 ≈ 731px —
     * which took the Feedback tab itself off-screen on an iPhone SE (measured bottom
     * 708 vs 667), on every phone in landscape, and in short desktop windows.
     * Centring keeps it on-screen down to a 475px-tall viewport; below that the
     * form's own max-height (see .feedback-form-container) caps the whole widget.
     * The cap deliberately lives on the FORM, not here: capping this container
     * instead makes it a scroll box, which puts the Feedback TAB — bottom-aligned
     * against the form — inside the scrolled area and back off-screen.
     * NOTE: feedback_widget.js animates `left` (-390px collapsed, -1px open) — it does
     * not touch `top`/`transform`, so this is safe for both states. */
    top: 50%;
    transform: translateY(-50%);
    left: -390px;
    width: 455px;
    padding: 0;
}

.user-feedback-widget {
    align-items: flex-end;
    margin: 0;
}
.feedback-form-container {
    font-size: 14px;
    background-color: white;
    max-width: 390px;
    min-height: 300px;
    /* The form's natural height is ~475px, which is taller than a phone in landscape
     * (375px). Cap it to the viewport and scroll internally, so the widget — and with
     * it the Feedback tab bottom-aligned against it — always fits on screen. No-op on
     * any viewport taller than the form. */
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--main-light-grey);
    border-radius: 0 2rem 0 0;
    box-shadow: 2px 5px 10px rgb(0 0 0 / 4%);
}
.feedback-form-container .notifier {
    position: absolute;
    top: 33%;
    width: 350px;
    font-size: 1.4rem;
    text-align: center;
}
.feedback-form-container .single-option-select-field {
    justify-content: space-between;
}
.feedback-form-container .text-entry-field {
    height: 150px;
    font-size: 14px;

    display: block;
    width: 100%;
    margin-left: 0;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.feedback-form-container .terms-accepted-text {
    margin: 10px 0;
    max-width: 350px;
}
.feedback-form-container #submit-feedback {
    position: relative;
    float: right;
    margin-right: 0;
    font-size: 1.1rem;
}
.feedback-form-container .invalid-feedback {
    display: inline-block;
    float: right;
    width: fit-content;
    font-size: 85%;
    margin-top: 2px;
}
.feedback-form-container .text-entry-field.is-invalid {
    border-color: var(--main-orange);
}

.share-feedback-prompt {
    color: var(--main-blue);
    font-size: 1.4rem;
    font-weight: 600;
    width: 50px;
    height: 180px;
    padding: 0.6rem;
    background-color: white;
    border-radius: 0 1.6rem 1.6rem 0;
    border: 1px solid var(--main-light-grey);
    border-left: none;
    box-shadow: 2px 5px 10px rgb(0 0 0 / 4%);
    z-index: 101;
}
.share-feedback-prompt:hover {
    background-color: white;
    border: 1px solid var(--main-light-grey);
    border-left: none;
}
.share-feedback-prompt:active {
    background-color: white;
    border: 1px solid var(--main-light-grey);
    border-left: none;
}
.share-feedback-prompt:focus {
    background-color: white;
    border: 1px solid var(--main-light-grey);
    border-left: none;
}

.vertical-text {
    position: absolute;
    transform: rotate(-90deg);
    bottom: 72px;
    left: 355px;
}

/* SESSION SUMMARY */

.session_summary_container {
    display: table;
    margin-top: 3.5em;
    margin-left: auto;
    margin-right: auto;
}

.session_summary {
    display: inline-block;
    background-color: rgb(255, 255, 255, 0.07);
    padding: 1.2em 2em;
    border-radius: 20px;
    font-family: montserrat, sans-serif;
    font-weight: lighter;
    color: white;
    font-size: 0.85em;
}

.session_summary_title {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.session_summary ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0px;
}
.session_summary ul li:before {
    content: '☆';
    font-size: 1.2em;
    color: var(--main-green);
    margin-left: 5px;
    margin-right: 8px;
}

.session_summary__row {
    display: table;
    margin-bottom: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.session_summary__value {
    display: table-cell;
    color: var(--main-gold);
    font-size: 1.25em;
    /* vertical-align: middle; */
    text-align: right;
    padding-right: 0.3em;
    padding-left: 0.3em;
    font-family: arial, montserrat, sans-serif;
}


/* DISSOLVE ACCOUNT */

.white-success-checkmark {
    opacity: 0;
}

/* Social Network Referral Program */

.program-description-area {
    font-family: avenir, sans-serif;
    width: 86vw;
    max-width: 1150px;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 95px;
}

.program-description .option {
    background-color: white;
    padding: 30px 30px 20px 30px;
    border-radius: 20px;
    margin-top: 35px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.program-description-area .earn-credit {
    font-weight: 600;
}
.program-description-area .progress-accent {
    color: var(--main-winter-green);
    font-weight: 900;
    font-size: 105%;
}
.program-description-area .progress-bold {
    font-weight: 600;
}
.program-description-area .progress-list {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}
.program-description-area .progress-list li {
    padding-left: 28px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 8px;
    max-width: 870px;
}
.program-description-area .progress-list li::before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: var(--main-winter-green);
}
.program-description .credit-badge {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    background-color: var(--main-winter-green);
    color: white;
    border-radius: 10px;
    padding: 12px 21px;
    text-align: center;
    line-height: 1.1;
}
.program-description .credit-amount {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
}
.program-description .credit-dollar {
    font-size: 1.1rem;
    vertical-align: top;
}
.program-description .credit-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.program-description-area h1 {
    font-weight: 900;
    margin-bottom: 20px;
}
.program-description-area > .program-description > p {
    max-width: 900px;
    margin-bottom: 35px;
}
.program-description-area h2 {
    font-size: calc(1.3rem + 0.8vw);
    font-weight: 900;
    margin-bottom: 10px;
}
.program-description-area .option h2 {
    color: var(--main-winter-green);
}
.program-description-area h2 span {
    font-weight: 500;
}
.program-description-area h3 {
    font-size: calc(1rem + 0.3vw);
    font-weight: 700;
    margin-top: 25px;
    color: var(--main-dark-steel);
}
.program-description-area li {
    max-width: 800px;
}
.program-description-area .steps {
    list-style: none;
    padding-left: 1.75em;
}
.program-description-area .steps li {
    font-size: calc(1rem + 0.2vw);
    margin-top: 20px;
}
.program-description-area .steps li::before {
    content: "\2794";
    margin-right: 0.5em;
    margin-left: -1.5em;
}
.program-description-area .guidelines h3 {
    color: #8a969e;
}
.program-description-area .guidelines li {
    font-size: calc(0.9rem + 0.3vw);
    margin-top: 12px;
    color: #8a969e;
}
.program-description-area .options-and-tips {
    display: flex;
    gap: 45px;
    align-items: flex-start;
    justify-content: space-between;
}
.program-description-area .options {
    flex: 1;
    min-width: 0;
    max-width: 650px;
}
.program-description-area .privacy-tips {
    position: sticky;
    top: 30px;
    max-width: 415px;
    flex-shrink: 0;
    margin-top: 35px;
}
.program-description-area .privacy-tips img {
    max-width: 100%;
    margin-bottom: 20px;
}
@media (max-width: 1100px) {
    .program-description-area .options-and-tips {
        flex-direction: column;
    }
    .program-description-area .privacy-tips {
        position: static;
        max-width: 650px;
        margin-top: 15px;
    }
}

.learner_progress_learn_button {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-top: 3em;
}

.learner_progress_learn_button a {
    font-size: 1.1em;
    border: none;
    background-color: var(--main-blue);
    color: white;
    padding: 0.8em 1.5em;
    border-radius: 3em;
    font-weight: 700;
}

.learner_progress_learn_button:hover {
    cursor: pointer;
}



.page_title {
    font-size: calc(1.9rem + 1vw);
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
    width: 100%;
}

.page_title h1 {
    max-width: 100%;
}
.page_title h2 {
    margin-top: 2em;
    font-size: 0.35em;
}

.add_learner__pin_subtext {
    font-size: 0.8em;
    color: var(--main-dark-grey);
    margin-left: 4px;
    margin-bottom: 0.5em;
}

.add_learner__section {
    margin-bottom: 0.8em;
}

.icon_plus_white {
    background-image: url("../img/plus-white.594ec3345f6e.svg");
    background-position: center;
    background-size: contain;
    background-size: 80%;
    background-repeat: no-repeat;
}

.learning_progress_skills_in_progress {
    padding-top: 1em;
}

.learning_progress_skills_mastered {
    border-top: 1px solid var(--main-steel-grey);
    border-bottom: 1px solid var(--main-steel-grey);
    margin-top: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.learning_progress_skills_mastered_skill {
    border: none;
    font-size: 12px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.learning_progress_skills_mastered_skill_hide {
    display: none;
}

#learning_progress_skills_mastered_see_all {
    margin-top: 1em;
    font-size: 13px;
    color: var(--main-blue);
    padding-left: 1em;
}

#learning_progress_skills_mastered_see_all:hover {
    cursor: pointer;
    color: var(--main-blue-hover);
}

/* ============================================================================
 * FIRST-LEARNER POPUP  (.flp-*)
 *
 * The "add a learning-plan" / "ready to start" overlay on the learner-profiles
 * page (accounts/templates/accounts/learner_profiles.html), plus its dimmer and
 * tooltip. Lifted verbatim out of an inline <style> block in that template so it
 * can be themed per brand.
 *
 * PARALLEL COPY: the same block exists in heliomath_system.css. The two are
 * INTENTIONALLY allowed to diverge -- that is the point of the split. This copy is the legacy Grokkoli treatment and should stay as it is.
 * Do not assume a change here applies there.
 * ========================================================================== */
    .flp-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
    }
    .flp-panel {
        background: #fff;
        border-radius: 12px;
        width: min(90vw, 420px);
        padding: 40px 28px 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        text-align: center;
    }
    .flp-heading {
        font-size: calc(22px + 0.3vw);
        font-weight: 900;
        margin-bottom: 30px;
        color: #1a1a1a;
    }
    .flp-title {
        font-size: calc(16px + 0.3vw);
        font-weight: 600;
        margin-bottom: 24px;
        color: #666;
        line-height: 1.35;
    }
    .flp-sub-title {
        font-size: calc(12px + 0.2vw);
        font-weight: 400;
        margin-bottom: 24px;
        color: #888;
        line-height: 1.4;
    }
    .flp-credentials {
        background: #f5f5f5;
        border-radius: 8px;
        padding: 4px 20px;
        margin-bottom: 28px;
        text-align: left;
    }
    .flp-credentials .flp-cred-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    .flp-credentials .flp-cred-row:last-child {
        border-bottom: none;
    }
    @media (max-width: 380px) {
        .flp-credentials .flp-cred-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
    }
    .flp-credentials .flp-cred-label {
        color: #666;
        font-size: 14px;
    }
    .flp-credentials .flp-cred-value {
        font-weight: 600;
        font-size: 16px;
        color: #1a1a1a;
    }
    .flp-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
    }
    .flp-buttons .btn {
        min-width: 120px;
        white-space: nowrap;
        padding: 0.6em 1.4em;
        font-size: 16px;
        letter-spacing: normal;
        margin: 0;
    }
    #flp-step-2 .flp-buttons .btn {
        min-width: 90px;
    }
    .flp-icon {
        font-size: 72px;
        margin-top: -20px;
        margin-bottom: 10px;
        line-height: 1;
    }
    .flp-dimmer {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 9998;
    }
    .flp-tooltip {
        position: absolute;
        bottom: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        background: #fff;
        border-radius: 16px;
        padding: 28px 28px 22px;
        width: min(85vw, 400px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        text-align: center;
    }
    .flp-tooltip .flp-down-arrow {
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 16px solid #fff;
    }
    .account-prompt.flp-elevated {
        z-index: 9999;
        border-color: transparent;
    }
    .flp-tooltip-text {
        font-size: calc(15px + 0.2vw);
        color: #444;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .flp-tooltip .flp-buttons .btn {
        min-width: 110px;
        padding: 9px 26px;
        font-size: 16px;
    }