@font-face {
    font-family: 'Jost', sans-serif !important;
    src: url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');
}
body, html, div {
    font-family: 'Jost', sans-serif !important;
}

.np-card-content{
    max-height: 140px;
}

@media (max-width: 1199px){
    .np-card-content{
        padding-top: 0.5rem;
    }
}

.np-course-card-button{
    width: 100%;
    font-size: 1.3rem;
    padding: 25px;
    border: 2px solid #000;

}

.course-button-container {
    margin-top: 1rem;
}

.purple-btn {
    background: #bc49dd;
}

.orange-btn {
    background: #ff6d09;
}

.red-btn {
    background: #d94a66;
  }

.onboarding-course-title {
  color: white;
}

.onboarding-course-subtitle {
  color:white;
}

.onboarding-course-card {
  background: #0538BF;
}

.onboarding-course-button {
  background-color: #89D9E1;
  color: #0538BF;
}

.np-card-content-progress {
  color: white;
}
/* ------------------------------------------------------------------------------------------------------ */
/* Login Page Styles */
.np-open-access{
    height: 100%;
}

.sign-up-body{
    align-items: center;
    background: #0538BF;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 !important;
    width: 100%;
}

.sign-up-body-content-container{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    margin: 0 !important;
}

.sign-in-text-content-wrapper{
    text-align: center;
}

.login-logo{
    height: 100px;
    padding: 20px;
}

.login-text{
    color: #FFFFFF;
}

.welcome-header{
    font-size: 36px;
}

.welcome-subheader{
    font-size: 24px;
}

.login-emoji-desktop{
    display: none;
}

.login-form-wrapper{
    width: 80%;
}

.login-input-label{
    font-size: 14px;
    margin-bottom: 10px;
}

.login-input{
    background: #FEC311;
    border: 3px solid #FFFFFF;
    border-radius: 0;
}

.login-button{
    background: #FEC311;
    border: 2px solid #FFFFFF;
    font-size: 30px;
    margin-top: 30px;
    padding: 0;
}

@media screen and (min-width: 768px){
    .np-box-content-container{
        flex-direction: row;
    }

    .login-text-content-wrapper{
        align-items: flex-start;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
    }

    .login-logo{
        padding-left: 0;
    }

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

    .welcome-header{
        font-size: 62px;
    }

    .welcome-subheader{
        font-size: 24px;
    }

    .login-emoji-mobile{
        display: none;
    }

    .login-emoji-desktop{
        display: inline;
    }

    .login-form-wrapper{
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        max-width: 50%;
    }

    .login-form{
        width: 80%;
    }
}


@media screen and (min-width: 1000px){
    .login-body-content-container{
        padding: 75px;
    }
}

@media screen and (min-width: 1200px){
    .welcome-header{
        font-size: 80px;
    }

    .welcome-subheader{
        font-size: 36px;
    }
}

.np-sub-navigation-content-item-link,
.np-sub-navigation-content-item-inactive,
.np-sub-navigation-content-item-active,
.np-sub-navigation-content-item-icon {
  color: #2DC3D0;
}

.np-sub-navigation {
  background: white;
}

/* ------------------------------------------------------------------------------------------------------ */
/* Achievements Panel */
/* .np-dashboard-achievements-panel{
    background: #ffffff;
    height: 8rem;
    border-radius: 10px;
}

.np-dashboard-achievements-card{
    background: #F3F8FF;
    color: #1C6FE8;
    height: 6rem;
    width: 5.25rem;
    border-radius: 10px;
}

.np-dashboard-achievements-card-text{
    font-size: 0.75rem;
    margin-top: -0.5rem;
}

.np-dashboard-medal-card{
    background: #3f0c59;
    height: 6rem;
    border-radius: 10px;
    display: flex;
    align-content: center;
} */

/* .np-dashboard-medal-icon{
    margin-right: -4rem;
} */

.custom-course-description {
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
}
@media (min-width: 395px){
    .np-dashboard-medal-icon{
        margin-right: -4rem;
    }
}

@media (min-width: 410px){
    .np-dashboard-medal-icon{
        margin-right: -5rem;
    }
}

@media (min-width: 425px){
    .np-dashboard-medal-icon{
        margin-right: -6rem;
    }
}

@media (min-width: 440px){
    .np-dashboard-medal-icon{
        margin-right: -7rem;
    }
}

@media (min-width: 465px){
    .np-dashboard-medal-icon{
        margin-right: -8rem;
    }
}

@media (min-width: 480px){
    .np-dashboard-medal-icon{
        margin-right: -9rem;
    }
}

@media (min-width: 495px){
    .np-dashboard-medal-icon{
        margin-right: -10rem;
    }
}

@media (min-width: 510px){
    .np-dashboard-medal-icon{
        margin-right: -11rem;
    }
}

@media (min-width: 525px){
    .np-dashboard-medal-icon{
        margin-right: -12rem;
    }
}

@media (min-width: 540px){
    .np-dashboard-medal-icon{
        margin-right: -13rem;
    }
}

@media (min-width: 555px){
    .np-dashboard-medal-icon{
        margin-right: -14rem;
    }
}

@media (min-width: 570px){
    .np-dashboard-medal-icon{
        margin-right: -15rem;
    }
}

@media (min-width: 595px){
    .np-dashboard-medal-icon{
        margin-right: -16rem;
    }
}

@media (min-width: 610px){
    .np-dashboard-medal-icon{
        margin-right: -17rem;
    }
}

@media (min-width: 625px){
    .np-dashboard-medal-icon{
        margin-right: -18rem;
    }
}

@media (min-width: 640px){
    .np-dashboard-medal-icon{
        margin-right: -19rem;
    }
}

@media (min-width: 655px){
    .np-dashboard-medal-icon{
        margin-right: -20rem;
    }
}

@media (min-width: 670px){
    .np-dashboard-medal-icon{
        margin-right: -21rem;
    }
}

@media (min-width: 695px){
    .np-dashboard-medal-icon{
        margin-right: -22rem;
    }
}

@media (min-width: 710px){
    .np-dashboard-medal-icon{
        margin-right: -23rem;
    }
}

@media (min-width: 725px){
    .np-dashboard-medal-icon{
        margin-right: -24rem;
    }
}

@media (min-width: 740px){
    .np-dashboard-medal-icon{
        margin-right: -25rem;
    }
}

@media (min-width: 755px){
    .np-dashboard-medal-icon{
        margin-right: -26rem;
    }
}

@media (min-width: 768px){
    .np-dashboard-medal-icon{
        margin-right: 0rem;
    }
}

@media (min-width: 830px){
    .np-dashboard-medal-icon{
        margin-right: -1rem;
    }
}

@media (min-width: 860px){
    .np-dashboard-medal-icon{
        margin-right: -2rem;
    }
}

@media (min-width: 925px){
    .np-dashboard-medal-icon{
        margin-right: -3rem;
    }
}

@media (min-width: 975px){
    .np-dashboard-medal-icon{
        margin-right: -4rem;
    }
}

@media (min-width: 990px){
    .np-dashboard-medal-icon{
        margin-right: -5rem;
    }
}

@media (min-width: 1005px){
    .np-dashboard-medal-icon{
        margin-right: -6rem;
    }
}

@media (min-width: 1030px){
    .np-dashboard-medal-icon{
        margin-right: -7rem;
    }
}

@media (min-width: 1055px){
    .np-dashboard-medal-icon{
        margin-right: -8rem;
    }
}

@media (min-width: 1125px){
    .np-dashboard-medal-icon{
        margin-right: -9rem;
    }
}

@media (min-width: 1150px){
    .np-dashboard-medal-icon{
        margin-right: -10rem;
    }
}

@media (min-width: 1185px){
    .np-dashboard-medal-icon{
        margin-right: -11rem;
    }
}

@media (min-width: 1200px){
    .np-dashboard-medal-icon{
        margin-right: 0rem;
    }
}
@media (min-width: 1250px){
    .np-dashboard-medal-icon{
        margin-right: -1rem;
    }
}

@media (min-width: 1300px){
    .np-dashboard-medal-icon{
        margin-right: -2rem;
    }
}

@media (min-width: 1350px){
    .np-dashboard-medal-icon{
        margin-right: -3rem;
    }
}

@media (min-width: 1400px){
    .np-dashboard-medal-icon{
        margin-right: -4rem;
    }
}

@media (min-width: 1675px){
    .np-dashboard-medal-icon{
        margin-right: -3rem;
    }
}

@media (min-width: 2200px){
    .np-dashboard-medal-icon{
        margin-right: -2rem;
    }
}

@media (min-width: 2550px){
    .np-dashboard-medal-icon{
        margin-right: -1rem;
    }
}

@media (min-width: 3050px){
    .np-dashboard-medal-icon{
        margin-right: 0rem;
    }
}