p {
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    line-height: 140%; /* 28px */
    display: block;
    text-align: center;
}

.ctaButton {
    border-radius: 10px;
    background: #275CE4;
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 10px;
    display: block;
    align-items: center;
    margin: 5px auto;
    max-width: 350px;
}

.ctaButton:hover {
    background-color: #7199FF;
    color: white;
}

.button-icon {
    padding-right: 5px;
}

.commonQTitle {
    text-align: center;
    width: 90%;
    margin: 5px auto;
    display: block;
    color: #000;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
}

.commonQText {
    font-size: 16px;
    color: #275ce4;
    font-weight: bold;
    line-height: 120%;
}

.commonQText:hover {
    text-decoration: underline;
}

.unlock-titles {
    text-align: left;
}

.unlock-text {
    text-align: left;
}

.numberCircle {
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    background-color: #1F3B9B;
    border-radius: 50px;
    padding: 5px;
    width: 60px;
}

.leftAlignNumber {
    margin-top: 40px;
    margin-left: 0;
}

.sectionImage {
    height: 275px;
    width: auto;
    margin: 5px auto;
    display: block;
}

.sectionSmallImage {
    height: 100px;
    width: auto;
    margin: 5px auto;
    display: block;
}

.transitionDots {
    height: 100px;
    margin: 5px auto;
    display: block;
}

.stepBg {
    background-color: #E3F5FF;
}

.step2title {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    width: 60%;
    margin: 25px auto;
    display: block;
    padding-top: 50px;
}

.step2sectionText {
    color: #0B1541;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
}

ul.keyFeaturesList li {
    list-style-type: disc !important;
    list-style-image: none !important;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    line-height: 140%; /* 28px */
    margin: 10px auto;
}

.teacherTipBlurb {
    width: 50%;
    margin: 5px auto 25px;
    display: block;
    border-radius: 20px;
    border: 1px solid #808080;
    background-color: #FFF;
    padding: 20px;
}

.highlight-text {
    color: #1F3B9B;
    font-weight: 700;
}


.step2CommonQ {
    width: 80%;
    margin: 50px auto;
    display: block;
}

.step3title {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    margin: 25px auto;
    padding-top: 50px;
    width: 90%;
}

.step3teacherTipLink {
    color: #0B1541;
}

.step3teacherTipLink:hover {
    text-decoration: underline;
}

.resourceDayCard {
    border-top: 7px solid #1DB8E8;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 15px;
    margin: 10px auto;
    height: 215px;
}

.resourceDayCard .dateText {
    color: #0B1541;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
}

.resourceDayCard .resourceText {
    color: #275CE4;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.resourceDayCard .resourceText:hover {
    text-decoration-line: underline;
}

.tightenCards {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.collectionText {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    margin-top: 13px;
}

.activitiesCard {
    border-radius: 14px;
    background: var(--White, #FFF);
    margin-top: 50px;
    padding: 15px;
}

.activitiesCard .activitiesImg {
    width: 125px;
    height: auto;
    margin: -75px auto auto;
    display: block;
}

.activitiesCard .activitiesText {
    color: #0B1541;
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    min-height: 120px;
}

.activitiesCard .activitiesLink {
    color: #275CE4 !important;
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    text-decoration-line: underline;
}

.callOutBg {
    background: #275CE4;
    padding: 25px 15px;
}

.callOutCard {
    margin-top: 25px;
    border-radius: 30px;
    background: #FFF;
    padding: 15px;
}

.callOutCard .callOutImg {
    height: 175px;
    margin: 5px auto;
    display: block;
}

.callOutCard .callOutTitle {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
}


.callOutCard .callOutDescription {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}


/*SPINNER STYLE*/
.wheelBlurbContainer {
    padding: 10px 25px;
}

.wheelContainer {
    margin: 50px auto 25px;
    padding: 25px;
    display: block;
    height: 110px;
}

.wheelSpin {
    padding: 25px;
    display: block;

}

.spinButtonContainer {
    display: block;
    background-color: #0b1541;
    position: relative;
    z-index: 97;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 5px auto;
    cursor: pointer;
}

.middleButton {
    color: white;
    font-family: Montserrat;
    font-weight: bold;
    text-align: center;
    font-size: 28px;
    padding-top: 38px;
    cursor: pointer;
}

#spinResourceResult {
    padding: 25px;
    background-color: white;
    border: black solid 1px;
    border-radius: 25px;
    font-family: Montserrat;
    max-width: 400px;
    height: auto;
    margin: -70px auto 0;
    display: block;
    position: relative;
    z-index: 98;
}

.resourceContent .btn {
    margin: 25px auto;
    max-width: 100%;
    display: block;
    background-color: #f78219;
    color: white;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: bold;
}

@keyframes spinner {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

.spinNow {
    animation: .15s linear 10 spinner;
    animation-play-state: inherit;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

.spin {
    border: solid 115px #cfd0d1;
    border-top-color: #1a3785;
    border-right-color: #1db8e8;
    border-bottom-color: #f78219;
    border-left-color: #1f3b9b;
    border-radius: 50%;
    content: "";
    position: absolute;
    z-index: 97;
    top: 18%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    box-shadow: 0px 0px 0px 10px white;
    margin: 25px auto;
}

.resultsTitle {
    font-weight: bold;
    text-align: center;
    color: #f78219;
}

.resultsResource {
    text-align: center;
}

.step4title {
    color: #1F3B9B;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    padding-top: 50px;
    width: 90%;
    display: block;
    margin: 0 auto;
}

.moduleType {
    color: #1F3B9B;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
    text-transform: uppercase;
    text-align: left;
    padding-top: 40px;
}

.moduleStatement {
    color: #000;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
    text-align: left;
}

.calloutDropShadow {
    border: 2px solid #1F3B9B;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.pdCalloutBg {
    background: #D7E2FF;
    padding: 50px 25px 250px;
}

.step3sectionText {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    width: 80%;
    margin: 25px auto;
    display: block;
}

.pdCalloutSmallImage {
    height: 170px;
    margin: 5px auto;
    display: block;
}

.step4numberCircle {
    margin: 15px auto;
}

.step4SectionImg {
    margin: 25px auto;
    display: block;
}

.step4highlightText {
    color: #0B1541;
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    text-transform: uppercase;
}

div.flfCallout {
    border-radius: 27px;
    background: url('https://d3f7q2msm2165u.cloudfront.net/aaa-content/user/files/Web%20Pages/Onboarding%20steps/New_2024_SVG/Onboard4/Onboard4_FB_background@2x.png') no-repeat center/cover;
    margin: -200px auto 50px;
    display: block;
    width: 75%;
    padding: 25px 50px;
}

h2.flfCallout {
    color: #FFF;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
}

p.flfCallout {
    color: #FFF;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    text-align: left;
}

a.flfCallout {
    margin-left: 0;
    width: 250px;
    background-color: #F4AD00;
    color: #000;
    margin-bottom: 75px;
}

/* Updated FLF Slider CSS */
.flf-slider .flfSliderImage img {
    width: 375px !important;
    margin: 5px auto;
    display: block;
}

.flf-slider .flfSliderImage {
    height: 100%;
}

.flf-slider .carousel-inner {
    height: 100%;
}

.flf-slider .carousel-indicators li {
    background-color: #000; /* Adjust this to your desired color */
}

.flf-slider .carousel-indicators .active {
    background-color: white; /* Adjust this to your desired active color */
}

.flf-slider .carousel-control .glyphicon-chevron-left,
.flf-slider .carousel-control .glyphicon-chevron-right {
    color: white; /* Adjust this to match your branding */
}


.welcomeFooter {
    background: #1F3B9B;
    padding: 50px;
}

.welcomeFooter img {
    width: 125px;
    margin: 25px auto;
    display: block;
}

.welcomeFooter h2 {
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 39.2px */
    margin: 5px auto;
    display: block;
    width: 60%;
}

.welcomeFooter p {
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    width: 80%;
    margin: 5px auto;
    display: block;
}

.interior-fade-carousel .slides .heroBG {
    height: 250px;
}

.sectionWidth60 {
    width: 60%;
}

.sectionWidth75 {
    width: 75%;
}

.sectionWidth80 {
    width: 80%;
}

.OBfooterNav {
    max-width: 95%;
    margin: 25px auto;
    padding-top: 50px;
    padding-bottom: 25px;
}

.OBfooterNav a {
    color: #1f4296;
    font-weight: bold;
}

.OBfooterNav a:hover {
    text-decoration: underline;
}

.OBfooterNav p.left {
    text-align: center;
    float: left;
    font-size: 100%;
}

.OBfooterNav p.right {
    text-align: center;
    float: right;
    font-size: 100%;
}

@media only screen and (min-width: 1200px) {
    .spinButtonContainer {
        margin: -135px auto;
    }

    .wheelBlurbContainer {
        padding: 75px 0 0 30px;
    }

    .resourceDayCard {
        height: 240px;
    }
}

@media only screen and (min-width: 900px) {
    .spinButtonContainer {
        margin: -130px auto;
    }
}

@media (max-width: 900px) {
    .sectionWidth, .sectionWidth60, .sectionWidth75, .sectionWidth80 {
        width: 90%;
        margin: 5px auto;
    }

    .ctaButton {
        margin: 25px auto !important;
        width: auto;
    }

    .numberCircle {
        margin: 5px auto;
        display: block;
    }

    .hero {
        top: 25% !important;;
    }

    .interior-fade-carousel, .interior-fade-carousel .carousel-inner .item {
        height: 350px !important;
    }

    .interior-fade-carousel .slides .heroBG {
        height: 350px;
    }

    .resourceDayCard {
        height: auto !important;
    }

    .spinButtonContainer {
        margin: -115px auto;
    }

    .activitiesCard {
        margin-top: 60px;
    }

    .activitiesCard .activitiesText {
        min-height: auto;
    }

}

@media (max-width: 768px) {

    .ctaButton {
        width: auto !important;
    }

    .step4title {
        font-size: 24px;
    }

    .step3title {
        font-size: 24px;
    }

    .step2title {
        font-size: 24px;
        width: 80%;
    }

    .step2sectionText {
        text-align: center;
    }

    .teacherTipBlurb {
        width: 80%;
    }


    .spinButtonContainer {
        margin: -115px auto;
    }

    .sectionSmallImage {
        width: 80%;
    }

    .onboarding-form-step-1.jkc .onboarding-1-shell {
        margin: 0px;
        padding: 15px;
    }

    .leftAlignNumber {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    div.flfCallout {
        width: 90%;
        padding: 25px;
    }

    h2.flfCallout {
        font-size: 28px;
    }

    p.flfCallout {
    }

    a.flfCallout {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .welcomeFooter {
        padding: 25px;
    }
}

@media (max-width: 450px) {

    .spinButtonContainer {
        margin: -125px auto;
    }

    .spin {
        top: 12%;
    }
}