@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

@font-face {
    font-family: Poppins;
    src: url(fonts/Poppins-Medium.ttf);
}

html {
    min-height: 100%;
    height: 100%
}

body {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    background-color: #fff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1 0 auto;
}

.container-fluid {
    min-height: 0%;
    max-height: 100%;
    flex: 1 0 auto;
    padding: 0 0;
}

a {
    text-decoration: none;
}

header {
    padding: 1rem;
}

    header a {
        padding: 0.25rem;
    }

        header a span {
            padding-left: 1rem;
        }

    header #search input {
        width: 100%;
        padding: 1rem;
        border: none;
        border-radius: 0;
        border-bottom: #1e1e1e solid 1px;
    }

        header #search input::after {
            content: "\1F50D";
            color: #1E1E1E;
        }

    header #user_menu {
        margin-top: 1rem;
        text-align: center;
    }

        header #user_menu a {
            color: #1e1e1e;
            margin: 0 0.25rem;
        }

            header #user_menu a:hover {
                color: #e00020;
            }

            header #user_menu a i {
                font-size: 1.75em;
            }

        header #user_menu #account_menu {
            width: max-content;
            position: absolute;
            border: 1px solid #1e1e1e;
            text-align: center;
            right: 4%;
            background-color: white;
        }

            header #user_menu #account_menu ul {
                list-style: none;
                padding-left: 0;
                padding-bottom: 0;
                margin-bottom: 0.25rem;
            }

            header #user_menu #account_menu ul {
                padding: 0.1rem;
            }

.environment-item {
    color: #1E1E1E;
    font-size: 1rem;
    font-weight: bold;
}

.logo-environment-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

main .col-sm {
    padding: 0;
}

footer {
    background-color: #1e1e1e;
    color: #fff;
    font-size: 0.875rem;
    text-align: right;
    width: 100%;
    padding-right: 0.5rem;
}

    footer a {
        color: #e00020;
    }

        footer a:hover {
            color: #fff;
        }

h1, h2, h3 {
    text-transform: uppercase;
    font-weight: bold;
}

.footer-data {
    width: 60%;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    justify-content: space-evenly;
}

.breadcrumbs {
    background-color: #1e1e1e;
    color: #fff;
}

.row > * {
    padding-right: 0;
}

.row .menu {
    padding: 0;
}

.menu ul li:first-letter {
    text-transform: uppercase;
}

.menu ul {
    border-radius: 0;
}

    .menu ul li {
        background-color: #efeee9;
        color: #1e1e1e;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
    }

        /*.menu ul li:hover {
            background-color: #e00020;
        }*/

        .menu ul li a {
            color: #1e1e1e;
            text-decoration: none;
            padding: 0.5rem;
            display: block;
            overflow-wrap: break-word;
        }

/* .menu ul li:hover a {
            color: #fff;
        }*/

.menu .list-group-item {
    padding: 0 0;
}

.menu .list-subgroup {
    background-color: #efeee9;
    border: none;
    border-radius: 0;
}

    .menu .list-subgroup .list-subgroup-item {
        background-color: rgb(233 232 227);
        border: none;
        border-radius: 0;
        /*        padding-left: 0.75rem;
*/
    }
        /*
        .menu .list-subgroup .list-subgroup-item:hover {
            background-color: #db0d2c;
        }*/

        .menu .list-subgroup .list-subgroup-item a {
            color: #1e1e1e;
        }

/* .menu .list-subgroup .list-subgroup-item:hover a {
            color: #fff;
        }*/

.alert {
    border-radius: 0 !important;
    border: none;
    margin-bottom: 0;
    color: #1e1e1e !important;
}

    .alert a {
        text-decoration: underline;
        color: #0d6efd;
    }

.items .banner {
    margin: 0.5rem;
    padding: 0.5rem;
    background-color: #1e1e1e;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
}

.items .banner-title {
    background-color: initial;
    color: #1e1e1e;
    font-weight: bold;
    text-transform: uppercase;
}

.items .product_splitter {
    display: flex;
    width: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #efeee9;
}

.items .item {
    padding: 0.5rem;
    margin: 0.5rem;
    background-image: url('../images/bg-productcard.svg');
    background-color: #FFF;
    width: 97%;
    color: #212529;
    background-size: cover;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .items .item img {
        display: inline-block;
        width: 25%;
        height: 165px;
        max-width: 90px;
    }

    .items .item span {
        display: block;
        font-size: 0.9em;
        padding-bottom: 0.25rem;
    }

    .items .item small {
        display: flex;
        font-size: 0.75em;
        align-items: center;
    }

        .items .item small:first-letter {
            text-transform: uppercase;
        }

        .items .item small i {
            margin-right: 0.25rem;
            font-size: 1.25rem;
        }

    .items .item a {
        background-color: #e00020;
        color: #fff;
        padding: 0.25rem 0.5rem;
        width: 40%;
        font-size: 1.25em;
    }

        .items .item a i {
            font-size: 1.5em;
            display: inline-block;
            width: 29%;
        }

        .items .item a b {
            font-size: 1.15em;
            display: inline-block;
            width: 70%;
            text-align: right;
            align-content: center;
        }

        .items .item a:hover {
            background-color: #1e1e1e;
            transition: background-color 100ms linear;
        }

        .items .item a:active {
            background-color: #e00020;
        }

    .items .item span a {
        background-color: #1e1e1e;
        color: #fff;
        padding: 0.25rem 0.5rem;
        width: 100%;
        font-size: 1rem;
        display: flex;
    }

        .items .item span a:hover {
            color: #fff;
            background-color: #e00020;
            transition: background-color 100ms linear;
            cursor: pointer;
        }

    .items .item .tags {
        margin-bottom: 0.2rem;
    }

        .items .item .tags small {
            display: inline-flex;
            padding: 0.2rem 0.2rem;
            margin: 0.10rem 0.1rem;
            font-size: 0.7rem;
            background-color: #1e1e1e;
            color: #fff;
            text-transform: uppercase;
        }

div .CampusDocRow {
    background-color: #efeee9;
    color: black;
    padding: 0.5rem;
    width: 100%;
}

div .blackitemtag small {
    display: inline-flex;
    border-color: #1e1e1e;
    border: 1px solid;
    padding: 0.1rem 0.2rem;
    margin: 0.10rem 0rem;
    font-size: 0.7rem;
    background-color: #1e1e1e;
    color: white !important;
}

div .reeds-aangekocht-tag small {
    background-color: pink !important;
    font-weight: bold;
}

div .CampusDocRow:hover {
    background-color: #e00020;
    color: #eee;
    cursor: pointer;
}

div .CampusDetailDiv {
    background-color: #f7f6f1;
    padding: 0.25rem;
    padding-left: 0.75rem;
    width: 100%;
}

    div.CampusDetailDiv a {
        color: #e00020;
    }

        div.CampusDetailDiv a:hover {
            color: #1e1e1e;
        }

#my_orders {
}

    #my_orders ul {
        list-style: none;
    }

        #my_orders ul .order {
            padding: 0.25rem;
        }

            #my_orders ul .order a {
                color: #1e1e1e;
            }

            #my_orders ul .order span {
                width: 97%;
            }

                #my_orders ul .order span:first-of-type {
                    color: #e00020;
                }

                    #my_orders ul .order span:first-of-type:hover {
                        color: #1e1e1e;
                    }

                #my_orders ul .order span small {
                    font-size: 0.75rem;
                    color: #1e1e1e;
                }

            #my_orders ul .order ul {
                margin-top: 0.25rem;
                padding: 0.25rem 0.5rem;
                border-top: 1px dashed #1e1e1e;
            }

                #my_orders ul .order ul li {
                    padding: 0.25rem 0.5rem;
                }

                    #my_orders ul .order ul li span {
                        color: #1e1e1e !important;
                    }

            #my_orders ul .order:nth-child(2n+1) {
                background-color: #efeee9;
            }

#my_cart {
    padding-right: 1rem;
}

    #my_cart ul {
        list-style: none;
    }

        #my_cart ul .product {
            padding: 0.25rem;
        }

            #my_cart ul .product a {
                color: #e00020;
            }

                #my_cart ul .product a:hover {
                    color: #1e1e1e;
                }

            #my_cart ul .product span:first-of-type {
                display: block;
                width: 99%;
                text-align: center;
            }

            #my_cart ul .product span {
                text-align: center;
                width: 49%;
            }

                #my_cart ul .product span:last-of-type {
                    display: block;
                    width: 99%;
                    text-align: center;
                }

                #my_cart ul .product span a i {
                    float: right;
                }

                #my_cart ul .product span small {
                    font-size: 0.75rem;
                    color: #1f1f1f;
                }

            #my_cart ul .product i {
                font-size: 2em;
                padding-right: 0.25rem;
                float: left;
            }

            #my_cart ul .product ul {
                margin-top: 0.25rem;
                padding: 0.25rem 0.5rem;
                border-top: 1px dashed #1e1e1e;
            }

            #my_cart ul .product:nth-child(2n+1) {
                background-color: #f4f3ee;
            }

#checkout_cart {
    padding-right: 1rem;
}

    #checkout_cart span {
        float: right;
    }

    #checkout_cart a {
        float: right;
    }

#offline_page {
    margin-top: 2rem;
}

    #offline_page img {
        padding: 0.5rem;
    }

    #offline_page h2 {
        margin: 0.5rem 0;
    }

#checkout {
    text-align: center;
}

    #checkout label {
        width: 75%;
    }

    #checkout button {
        width: 75%;
        margin: 0 auto;
    }

    #checkout label input {
        display: block;
        width: 100%;
        padding: 0.25rem;
    }

    #checkout label select {
        display: block;
        width: 100%;
        padding: 0.25rem;
    }

    #checkout .checkout_afhaalpunt {
        width: 75%;
        margin: 0.5rem auto;
    }

    #checkout .thuislevering_adres {
    }

        #checkout .thuislevering_adres label input {
        }

.checkout_summary ul {
    list-style: none;
}

    .checkout_summary ul .product {
        padding: 0.25rem;
    }

        .checkout_summary ul .product a {
            color: #e00020;
        }

            .checkout_summary ul .product a:hover {
                color: #1e1e1e;
            }

        .checkout_summary ul .product span:first-of-type {
            display: block;
            width: 99%;
            text-align: center;
        }

        .checkout_summary ul .product span {
            text-align: center;
            width: 49%;
        }

            .checkout_summary ul .product span a i {
                float: right;
            }

            .checkout_summary ul .product span small {
                font-size: 0.75rem;
                color: #1e1e1e;
            }

        .checkout_summary ul .product i {
            font-size: 2em;
            padding-right: 0.25rem;
            float: left;
        }

        .checkout_summary ul .product ul {
            margin-top: 0.25rem;
            padding: 0.25rem 0.5rem;
            border-top: 1px dashed #1e1e1e;
        }

        .checkout_summary ul .product:nth-child(2n+1) {
            background-color: #efeee9;
        }

.checkout_summary {
    padding-right: 1rem;
}

    .checkout_summary input[type=checkbox] {
    }

    .checkout_summary #algemenevoorwaarden_label {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        margin-top: 0.25rem;
    }

    .checkout_summary label a {
        color: #e00020;
    }

        .checkout_summary label a:hover {
            color: #b40620;
        }

    .checkout_summary .leveringsdata {
        display: flex;
    }

.checkout_buttons {
    padding-right: 1rem;
}

.afhaalpunt_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .afhaalpunt_info * {
        width: 50%;
        text-align: initial;
        min-width: 200px;
    }

.adres_info * {
    display: block;
}

#confirmation {
    text-align: center;
}

.btn-primary {
    background-color: #1e1e1e;
    border-color: #111;
}

    .btn-primary:hover {
        background-color: #fff;
        color: #1e1e1e;
        border-color: #111;
    }

    .btn-primary:active {
        background-color: #fff;
        color: #1e1e1e;
        border-color: #111;
    }

    .btn-primary:focus {
        background-color: #fff;
        color: #1e1e1e;
        border-color: #111;
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.hidden {
    display: none;
}

#burger_button {
    /*    display: none;
      margin-right: 1rem;
*/
    color: white;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

@media screen and (min-width: 1020px) {

    .items .item {
        padding: 0.5rem;
        margin: 0.5rem;
        background-color: #FFF;
        background-image: url('../images/bg-productcard.svg');
        width: 500px;
        background-size: cover;
    }
}

@media screen and (min-width: 992px) {

    #my_orders ul .order span {
        width: 16.6666667%;
    }

        #my_orders ul .order span.col-2 {
            width: 12.5%;
        }

    #my_orders ul .order ul li span:first-of-type {
        width: 50%;
    }

    /*#my_orders ul .order ul li span:last-of-type {
        width: 25%;
    }*/

    #my_cart ul .product span:first-of-type {
        width: 49%;
        text-align: left;
    }

    #my_cart ul .product span:last-of-type {
        display: inline;
        width: 17%;
    }

    #my_cart ul .product span {
        width: 17%;
    }

    #checkout label {
        width: 50%;
    }

    #checkout button {
        width: 50%;
    }

    #checkout .checkout_afhaalpunt {
        width: 50%;
        margin: 0.5rem auto;
    }

    .checkout_summary ul .product span:first-of-type {
        width: 49%;
        text-align: left;
    }

    .checkout_summary ul .product span {
        width: 17%;
    }

    .CampusDocContainer {
        width: 99%;
        padding: 0.25rem;
        margin: 0 auto;
    }
    /*
    #sg_menu {
        display: inherit;
    }*/
}

@media screen and (max-width: 992px) {

    .breadcrumbs {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        display: flex;
        align-items: center;
    }

    /*#burger_button {
        display: inline;
        font-size: 1.5rem;
        text-align: right;
        color: #FFF;
    }*/

    .px-3 {
        padding-left: 0 !important;
    }

    .footer-data {
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {

    .px-3 {
        padding-left: 0rem !important;
    }
}

.addToCart-btn {
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    color: white;
    border: none;
    background-color: #E00020;
    padding: 0.6rem;
    width: 49%;
}


    .addToCart-btn:hover {
        border: none;
        background-color: #1E1E1E;
    }

.cart-icon {
    font-size: 1.5rem;
    color: white;
}

.addToCart-btn-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* student info bar */
.breadcrumbs-items {
    display: flex;
    justify-content: space-between;
}

.breadcrumbs-items-left {
    display: flex;
    justify-content: left;
    align-items: center;
}

.breadcrumbs-items-right {
    display: flex;
    flex-direction: column;
    justify-content: right;
    padding-right: 1rem;
}

.student-info-container {
    display: flex;
    justify-content: right;
    flex-direction: column;
    align-items: flex-end;
    padding: 0px 5px;
}

.student-info-container-highlight {
    display: flex;
    justify-content: right;
    flex-direction: column;
    align-items: flex-end;
    padding: 0px 5px;
    border: white dashed 2px;
}

.student-info-items {
    color: white;
    flex-wrap: nowrap;
    justify-content: right;
    align-items: center;
    flex-direction: row;
    display: flex;
    align-items: flex-end;
}

    .student-info-items > * {
        padding-right: .25rem;
    }

.student-info-label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .75px;
}

.student-info-item {
    font-weight: normal;
    text-transform: uppercase;
    font-size: .8rem;
}

.fase-item {
    background-color: #E00020;
    color: white !important;
}

    .fase-item:hover {
        background-color: #b40620;
    }

.keuzetraject-item {
    background-color: #1E1E1E;
    color: white !important;
}

    .keuzetraject-item:hover {
        background-color: #4A4A4A !important;
        color: white !important;
    }

.opleiding-item:hover {
    background-color: #e00020;
    color: white !important;
}

.studiegebied-item {
    color: #1E1E1E;
    font-weight: bold;
}

    .studiegebied-item:hover {
        background-color: #e00020;
        color: white !important;
    }

.intro-container {
    padding: 1.5rem;
    padding-top: .5rem;
    padding-left: 1rem;
}

.item-result-item {
    padding: 1.5rem;
    padding-left: 1rem;
}

.floating-cart {
    background-color: #E00020;
    font-size: 1.25rem;
    height: 50px;
    width: 75px;
    border-radius: 10rem;
    position: fixed;
    bottom: 80px;
    right: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
    -moz-box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
    box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
}

    .floating-cart a {
        color: white;
    }

    .floating-cart:hover {
        color: white;
        background-color: #C4001C;
        font-size: 1.25rem;
        height: 50px;
        width: 75px;
        border-radius: 10rem;
        position: fixed;
        bottom: 80px;
        right: 50px;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
        -moz-box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
        box-shadow: 10px 10px 25px 5px rgba(30,30,30,0.25);
    }


.cta-scroll {
    display: flex;
    justify-content: center;
    padding: .5rem;
    color: #1E1E1E;
}

.as-link {
    text-decoration: underline !important;
    font-style: italic !important;
    font-weight: normal !important;
    color: #E00020 !important;
    padding-left: 1rem !important;
    font-size: .85rem !important;
}

.as-info {
    margin-right: .5rem;
    font-size: .85rem;
    color: #1E1E1E;
}

.as-link:hover {
    text-decoration: underline !important;
    font-style: italic !important;
    color: #E00020 !important;
    padding-left: 1rem !important;
    font-size: .85rem !important;
}

.levermethode-checkbox-item {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
}

.levermethode-title {
    font-weight: bold;
}

.levermethode-label {
    width: max-content !important;
    padding-left: .5rem;
}

.levermethode-tooltip {
    padding-top: .15rem !important;
    color: #7E7E7E;
    font-style: italic;
    font-weight: normal;
    font-size: .75rem;
    width: 50%;
}

/* SB Order Status */

.sb-order-label-danger {
    background-color: #E00020;
    padding: 2.5px 5px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: .2rem;
    height: fit-content
}

.sb-order-label-success {
    background-color: #0c884e;
    padding: 2.5px 5px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: .2rem;
    height: fit-content
}

.sb-order-label-warning {
    background-color: #967100;
    padding: 2.5px 5px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: .2rem;
    height: fit-content
}

.sb-order-label-caution {
    background-color: #FD7E14;
    padding: 2.5px 5px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: .2rem;
    height: fit-content
}

.sb-order-table-background-danger {
    background-color: #FFB9C3;
}

.sb-order-table-background-success {
    background-color: #BFF3DB;
}

.sb-order-table-background-warning {
    background-color: #FFEDB8;
}

.sb-order-table-background-caution {
    background-color: #FED3B0;
}

.about-shipping-info {
    font-style: italic;
    color: #7E7E7E;
    font-size: .75rem;
}

.footer-container {
    padding: 1rem;
}

.terms-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    /* mag nog aangepast worden */
    width: 1440px;
}

.terms-title {
    text-transform: uppercase;
    color: #1E1E1E;
    font-weight: bold;
    font-size: 1.25rem;
}

.close-alert-btn {
    float: right;
    background-color: transparent;
    border: 1px solid #1E1E1E;
    padding: .25rem;
    border-radius: .25rem;
    font-size: .85rem;
    color: #1E1E1E;
}

.empty-cart-container {
    padding: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.empty-cart-title {
    padding: .25rem;
    font-size: 2rem;
    text-transform: uppercase;
    color: #E00020;
    font-weight: bold;
    margin-bottom: 0;
}

.empty-cart-note {
    color: #7E7E7E;
    font-style: italic;
    font-weight: normal;
}

.facturatie-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.paymentMethods-container {
    display: flex;
    justify-content: center;
    padding-top: .25rem;
    padding-bottom: .25rem;
    color: #1E1E1E;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    align-items: center;
}

.paymentMethods-button {
    font-size: .85rem;
    font-weight: normal;
}

.paymentMethods-spacing {
    margin-top: 8rem;
}

.submit-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.levermethode-container, #checkout {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Webshop-logo {
    height: 60px;
    width: auto;
}

.servicedeskInfo-content {
    width: 50%;
}

.paymentMethods-tooltip {
    text-align: center;
    padding-top: .15rem !important;
    color: #7E7E7E;
    font-style: italic;
    font-weight: normal;
    font-size: .75rem;
    width: 50%;
}

.paymentMethods-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.thuislevering-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.thuislevering-label {
    width: auto !important;
    margin-left: 1rem !important;
}

.voorwaarde-items-container {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.as-link-access-item {
    display: flex;
    flex: row;
    justify-content: flex-start;
    align-items: center;
}

.as-link-info-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.type-cursus-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.geprinte-cursus-tooltip {
    color: #7E7E7E;
    font-style: italic;
    font-weight: normal;
    font-size: .75rem;
    width: 50%;
}

.user-menu-outlining-items {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: auto;
}

.impersonate-item {
    display: flex;
    flex-direction: row;
    padding-bottom: .25rem;
}

.user-header-items {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.vives-menu-outlining-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.validation-messages {
    background-color: #f8d7da;
    color: #e00020;
    border: 1px solid #e00020;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    max-width: 750px;
    margin-bottom: 1rem;
}

    .validation-messages ul {
        list-style-type: none;
        padding-left: 0;
    }

    .validation-messages li {
        margin-bottom: 10px;
        font-size: 14px;
    }

        .validation-messages li::before {
            content: "\26A0";
            margin-right: 10px;
            color: #e00020;
        }

    .validation-messages p {
        margin-bottom: 0;
        font-weight: bold;
    }

.error-message-title {
    width: 50%;
}

.alert-studymaterials-c-account {
    background-color: #F8D7DA;
    color: #491217;
    border: 1px solid #F5C6CB;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    max-width: fit-content;
}
.melding {
    background-color: #FFF3CD;
    color: #533F03;
    border: 1px solid #FFEEBA;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    max-width: fit-content;
}

.alert-studymaterials-preorder {
    background-color: #FFF3CD;
    color: #533F03;
    border: 1px solid #FFEEBA;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    max-width: fit-content;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
}

@media screen and (min-width : 850px) {
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
        flex-direction: row;
    }
}

.language-selector {
    text-decoration: none;
    padding: 0;
    margin-left: .5rem;
    margin-right: .5rem;
    font-weight: normal;
}

.nl-item, .eng-item {
    font-weight: normal;
    color: #1e1e1e;
}

    .nl-item:active, .eng-item:active {
        font-weight: bold;
        color: #1e1e1e;
    }

    .nl-item:hover, .eng-item:hover {
        font-weight: bold;
        color: #e00020;
    }
.nl-item:hover, .eng-item:hover {
    font-weight: bold;
    color: #e00020;
}