@import "animations.css";
@import "colors.css";
@import "fonts.css";
@import "inputs.css";
@import "buttons.css";
@import "sizing.css";
@import "spinner.css";
@import "toast.css";
@import "material-icons.css";
@import "pie-charts.css";

@import "sizing.css";
@import "navbar.css";
@import "sidebar.css";
@import "footer.css";

@import "pages/home.css";
@import "pages/all-licenses.css";
@import "chapters.css";
@import "manual.css";


body {
    font-family: "Outfit", sans-serif;
}

h1{
    font-style: normal;
    font-weight: 700;
    line-height: calc((64 / var(--screen-width)) * 100vw);
}

.text-h1 {
    font-style: normal;
    font-weight: 700;
    line-height: calc((64 / var(--screen-width)) * 100vw);
}

h2 {
    font-size: calc((40 / var(--screen-width)) * 100vw);;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
}

.text-h2 {
    font-size: calc((40 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 700;
    line-height: calc((48 / var(--screen-width)) * 100vw);
}

h3{
    font-size: calc((28 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.text-h3 {
    font-size: calc((28 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
}

.bd-text-grey {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.36px;
    color: var(--qp-color-dark-grey);
}

.bd-text-card-title {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.36px;
}

.bd-medium {
    font-size: calc((28 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
}

.bd-medium-small {
    font-size: calc((24 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
}

a {
    color: var(--qp-color-blue-note);
}

.text-quote span {
    font-size: calc((28 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
}

.parallax {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
}

.no-parallax {
    background-attachment: scroll !important;
}

.back-link a {
    font-size: calc((24 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
    color: var(--qp-color-blue-note) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: calc((13 / var(--screen-width)) * 100vw);
}

.back-link {
    margin-top: calc((32 / var(--screen-width)) * 100vw);
    margin-bottom: calc((24 / var(--screen-width)) * 100vw);
}

.back-link i {
    font-size: calc((24 / var(--screen-width)) * 100vw);
}

a.card:hover {
    text-decoration: none;
    color: var(--qp-color-blue-note);
}

.qp-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('/images/icons/arrow_right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.5em;
}


.qp-breadcrumb .breadcrumb-item.active{
    color: var(--qp-color-blue-note) !important;
    font-size: calc((20 / var(--screen-width)) * 100vw);;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.qp-breadcrumb .breadcrumb-item a {
    cursor: pointer;
    color: var(--qp-color-light-blue);
    font-size: calc((20 / var(--screen-width)) * 100vw);;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.qp-breadcrumb ol.breadcrumb {
    background-color: transparent !important;
}

.no-args {
    color: var(--qp-color-dark-grey);
    margin-bottom: 32px;
}

.no-args .text-h2 {
    font-size: calc((24 / var(--screen-width)) * 100vw);
    font-style: normal;
    font-weight: 400;
    line-height: calc((32 / var(--screen-width)) * 100vw);
}

.verified-label {
    align-items: center;
    color: #fff;
    border-radius: 40px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    padding: calc((6 / var(--screen-width)) * 100vw) calc((16 / var(--screen-width)) * 100vw);
    gap: calc((8 / var(--screen-width)) * 100vw);
    font-size: calc((16 / var(--screen-width)) * 100vw);
    line-height: calc((20 / var(--screen-width)) * 100vw);
}

.qp-breadcrumb .breadcrumb-item.active{
    font-size: calc((20 / var(--screen-width)) * 100vw);
}

.qp-breadcrumb .breadcrumb-item:before {
    font-size: calc((24 / var(--screen-width)) * 100vw);
    line-height: calc((24 / var(--screen-width)) * 100vw);
}

.verified-label.verified {
    background-color: var(--qp-color-green);
}

.verified-label.not-verified {
    background-color: var(--qp-color-light-blue);
}

.verified-label, #startQuiz {
    max-width: max-content;
}

@media (min-width: 992px) {
    .hamburger-icon {
        height: calc((24 / var(--screen-width)) * 100vw) !important;
        width: calc((24 / var(--screen-width)) * 100vw) !important;
    }

    #hamburger button {
        width: calc((56 / var(--screen-width)) * 100vw) !important;
        height: calc((56 / var(--screen-width)) * 100vw) !important;
    }
}

.hamburger-icon {
    height: 24px;
    width: 24px;
}

#hamburger button {
    width: 56px;
    height: 56px;
}

@media (max-width: 992px) {
    .verified-label {
        padding: 6px 16px;
        gap: 8px;
        font-size: 16px;
        line-height: 20px;
    }

    .back-link {
        margin-top: 32px;
        margin-bottom: 24px;
    }

    .back-link i {
        font-size: 24px;
    }

    h2 {
        font-size: 40px;
    }

    .text-h2 {
        font-size: 40px;
        line-height: 48px;
    }

    h3{
        font-size: 28px;
    }

    .text-h3 {
        font-size: 28px;
        line-height: 32px;
    }

    .bd-text-grey {
        font-size: 26px;
    }

    .bd-text-card-title {
        font-size: 26px;
    }

    .bd-medium {
        font-size: 28px;
        line-height: 32px;
    }

    .bd-medium-small {
        font-size: 24px;
        line-height: 32px;
    }

    .back-link a {
        font-size: 24px;
        line-height: 32px;
        gap: 13px;
    }

    .qp-breadcrumb .breadcrumb-item a {
        font-size: 20px;
    }

    .no-args .text-h2 {
        font-size: 24px;
    }

    .verified-label {
        font-size: 16px;
    }

    .text-quote span {
        font-size: 28px;
        line-height: 32px;
    }

    .qp-breadcrumb .breadcrumb-item.active{
        font-size: 20px;
        line-height: 24px;
    }
}

@media (max-width: 992px) {
    .quiz-tabs .nav {
        gap: 0 !important;
        width: 100% !important;
    }

    .quiz-tabs li.nav-item {
        width: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .quiz-tabs button {
        width: 100% !important;
    }

    .qp-breadcrumb .breadcrumb-item:before {
        font-size: 24px;
        line-height: 24px;
    }
}