Gainsight/Custom_Templates/customer_templates/Crayon/styles.css.liquid

@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-card-content-title{
        font-size: 1.1rem !important;
    }
}

.np-card-content-title{
    font-size: 1rem !important;
}

.np-course-card-button{
    width: 8rem;
}

/* ------------------------------------------------------------------------------------------------------ */
/* 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;
} */

@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;
    }
}