@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, body {
    height: 100%;
    margin: 0;
}

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

app {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.h1-webshop,
.h2-webshop,
.h3-webshop,
.h4-webshop,
.h5-webshop {
    font-weight: bold;
}

.h1-webshop {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.vToaster-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    white-space: pre-line;
}

.chatbot-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 1;
}

@media (min-width: 576px) {
    .chatbot-container {
        right: 3.5rem;
        bottom: 3.5rem;
    }
}

.chatbot-dialog {
    height: 500px;
    border-radius: 12px;
    margin-right: 1rem;
}

    .chatbot-dialog iframe {
        background-color: #fff;
        border-radius: 12px;
        border: 2px solid #0b556a;
    }

.chatbot-btn {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #0b556a;
    background-color: white;
}

.chatbot-btn-icon {
    color: #0b556a;
}

.chatbot-btn:hover {
    background-color: #0b556a;
}

    .chatbot-btn:hover .chatbot-btn-icon {
        color: white;
    }

.floating-cart-container {
    position: fixed;
    right: 5rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 70px;
    font-size: 20px;
    border-radius: 100px;
    border: 2px solid #e00020;
    z-index: 1;
}

.floating-cart-container,
.floating-cart-container * {
    background-color: white;
    color: #e00020;
}

    .floating-cart-container:hover,
    .floating-cart-container:hover * {
        background-color: #e00020;
        color: white;
    }

@media (min-width: 576px) {
    .floating-cart-container {
        right: 7.5rem;
        bottom: 3.5rem;
    }
}

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

.authorized-container {
    z-index: 0;
}

.vToaster-container {
    z-index: 2;
}

.custom-vToaster {
    top: 5rem;
    right: 5rem;
}

.menu-container-backdrop {
    z-index: 999;
}

.main-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex: 1;
}

    .main-container main {
        width: 100%;
    }

.student-info-container {
    color: white;
}

@media (max-width: 575.98px) {
    .student-info-container {
        text-align: center;    
    }
}

.student-info-content {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.student-info-content-placeholder {
    font-size: 14px;
}

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

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

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

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

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

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

.menu-container-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 40%;
}

.menu-container {
    background-color: #1e1e1e;
}

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

.menu-display-list,
.menu-detail-list {
    list-style: none;
    padding: 0;
}

.menu-display-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.menu-detail-list {
    margin-bottom: 0;
    max-height: 70vh;
    overflow-y: auto;
}

.menu-detail-container {
    position: relative;
    z-index: 999;
}

.menu-detail-wrapper {
    position: absolute;
    background-color: white;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 1rem;
    height: fit-content;

    border-bottom-left-radius: 6.25px;
    border-bottom-right-radius: 6.25px;
}

.menu-detail-header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.menu-detail-header-title {
    font-weight: bold;
    color: black;
    font-size: 20px;
    margin-bottom: 0;
}

.menu-detail-header-btn-back {
    margin-left: .5rem;
    margin-right: 2rem;
    border: none;
    background-color: transparent;
    color: gray;
}

.menu-detail-header-btn-close {
    margin-left: 2rem;
}

.menu-display-list-item-btn,
.menu-detail-list-item-btn {
    border: none;
}

.menu-display-list-item-btn {
    background-color: transparent;
    color: white;
    padding: 0;
    position: relative;
    z-index: 999;
}

.menu-detail-list-item-btn {
    background-color: white;
    width: 100%;
}

.menu-detail-list-item-btn-content {
    padding: .5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    text-align: left;
}

    .menu-detail-list-item-btn-content:hover {
        background-color: lightgray;
        border-radius: 3.125px;
    }

.menu-detail-list-item-btn-content-circle {
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    margin-right: 1rem;
    min-width: 1rem;
}

    .menu-detail-list-item-btn-content-circle.bio {
        background-color: #2C7B72;
    }

    .menu-detail-list-item-btn-content-circle.gez {
        background-color: #EC5F65;
    }

    .menu-detail-list-item-btn-content-circle.hwb {
        background-color: #5488C7;
    }

    .menu-detail-list-item-btn-content-circle.ond {
        background-color: #E18535;
    }

    .menu-detail-list-item-btn-content-circle.saw {
        background-color: #706CB0;
    }

    .menu-detail-list-item-btn-content-circle.iwt {
        background-color: #88C1DC;
    }

.menu-detail-list-item-btn-content-txt {
    color: black;
}

@media (max-width: 575.98px) {
    .menu-detail-header-btn-back {
        margin-right: 1rem;
    }

    .menu-detail-header-btn-close {
        margin-left: 1rem;
    }

    .menu-detail-header-title {
        font-size: 17px;
    }

    .menu-detail-list-item-btn-content-txt {
        font-size: 16px;
    }
}

.cart-page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-order-container {
    display: flex;
    flex-direction: column;
    border: 1px solid lightgray;
    border-radius: 6.25px;
    padding: 1rem;
    flex: 1;
}

.cart-order-title {
    text-transform: capitalize;
}

.cart-order-total-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}

.cart-order-btn {
    margin-top: 2rem;
}

.cart-products-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 2;
}

.cart-product-container {
    display: flex;
    border-radius: 6.25px;
    border: 1px solid lightgray;
    padding: 1rem;
}

.cart-product-container {
    flex-direction: row;
    width: 100%;
}

.cart-product-img-container {
    text-align: center;
}

.cart-product-img-wrapper {
    background-color: #EFEEE9;
    padding: 1rem;
    border-radius: 6.25px;
}

.cart-product-img-container {
    margin-right: 1rem;
}

.products-display-product-range-container.listview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 2;
}

.cart-product-info-wrapper {
    display: flex;
    justify-content: space-between;
}

.cart-product-info-wrapper {
    flex-direction: row;
    width: 100%;
}

.cart-product-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.cart-product-name {
    color: #1E1E1E;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    width: fit-content;
    word-break: break-word;
}

    .cart-product-name:hover {
        text-decoration: underline;
    }

    .cart-product-name aanrekening {
        text-decoration: none;
    }

.cart-product-name-title-link {
    cursor: pointer;
    width: fit-content;
    display: block;
}

@media (max-width: 991.98px) {
    .cart-product-info-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .cart-product-container {
        flex-direction: column;
    }

    .cart-product-img-container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
        background-color: #EFEEE9;
        display: flex;
        justify-content: center;
    }
}

.cart-product-info-container {
    width: 100%;
}

.cart-product-actions-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cart-product-amount-price-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cart-product-amount-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    border: 1px solid lightgray;
    border-radius: 6.25px;
}

.cart-product-amount-btn:disabled {
    color: #EFEEE9;
}

.cart-product-amount-decrease {
    border-right: 1px solid lightgray;
}

.cart-product-amount-decrease-btn {
    border: none;
    width: 100%;
    border-top-left-radius: 6.25px;
    border-bottom-left-radius: 6.25px;
    color: #1E1E1E;
}

.cart-product-amount {
    text-align: center;
}

.cart-product-amount-decrease .cart-product-amount-btn:disabled:hover,
.cart-product-amount-increase .cart-product-amount-btn:disabled:hover {
    cursor: not-allowed;
}

.cart-product-amount-decrease .cart-product-amount-btn:not(:disabled):hover,
.cart-product-amount-increase .cart-product-amount-btn:not(:disabled):hover {
    background-color: #e00020;
    color: white;
}

.cart-product-amount-increase {
    border-left: 1px solid lightgray;
}

.cart-product-amount-increase-btn {
    border: none;
    width: 100%;
    border-top-right-radius: 6.25px;
    border-bottom-right-radius: 6.25px;
    color: #1E1E1E;
}

.cart-product-remove-btn {
    color: #e00020;
    padding: 0;
    border: none;
    background: transparent;
    margin-top: .25rem;
}

.cart-product-remove-btn-icon {
    font-size: 1.5em;
}

.cart-product-price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.cart-product-price {
    font-size: 12px;
    color: lightgray;
}

@media (min-width: 992px) {
    .empty-cart-page-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        gap: 1rem;
    }

    .cart-page-wrapper {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }

    .cart-order-total-container {
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .cart-product-actions-container {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

.checkout-title-delivery-method:first-letter {
    text-transform: capitalize;
}

.checkout-title-invoicing {
    text-transform: lowercase;
}

.checkout-delivery-method-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-delivery-method-suppliers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.checkout-delivery-method-supplier {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid lightgray;
    border-radius: 6.25px;
    padding: 1rem;
}

.checkout-delivery-method-supplier-form-content label {
    font-weight: bold;
}

.checkout-delivery-method-supplier-form-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-delivery-method-supplier-form-digital {
    margin-right: .5rem;
}

.checkout-delivery-method-form-delivery-address-container {
    display: flex;
    flex-direction: column;
}

.checkout-delivery-method-form-delivery-address-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-delivery-method-supplier-form-delivery-method-select-label {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.checkout-delivery-method-form-pickup-point-select-label {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.checkout-delivery-method-form-delivery-address-label {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.checkout-invoicing-container {
    margin-top: 2rem;
}

.checkout-invoicing-methods-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-invoicing-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.checkout-invoicing-method-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid lightgray;
    border-radius: 6.25px;
    padding: 1rem;
    gap: 1rem;
}

.checkout-invoicing-method-title {
    margin: 0;
}

.checkout-invoicing-method-about {
    color: #7E7E7E;
    font-style: italic;
    font-weight: normal;
    font-size: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkout-invoicing-method-choice {
    display: flex;
    flex-direction: row;
}

.checkout-invoicing-method-choice-input {
    margin-right: .5rem;
}

.checkout-invoicing-method-submit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-invoicing-method-form-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.checkout-invoicing-method-extra-payment-method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-invoicing-method-activation-code {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.checkout-invoicing-method-activation-code-cancel-btn {
    margin-top: 1rem;
    text-transform: capitalize;
    width: 100%;
}

.checkout-invoicing-method-form-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-invoicing-method-form-label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

@media (min-width: 768px) {
    .checkout-delivery-method-suppliers {
        flex-direction: row;
    }

    .checkout-delivery-method-supplier {
        align-self: flex-start;
    }

    .checkout-invoicing-method-container {
        align-self: flex-start;
    }

    .checkout-invoicing-methods {
        flex-direction: row;
    }
}

a {
    text-decoration: none;
}

header {
    padding: 1rem;
}

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

.logout-container {
    color: #1E1E1E;
    margin-left: 1rem;
}

.account-username {
    font-size: 16px;
    margin-bottom: 0;
    margin-right: .5rem;
    color: #1E1E1E;
}

.logout-link-item {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    color: #1E1E1E;
}

.logout-link-item:hover {
    color: #e00020;
}

main .col-sm {
    padding: 0;
}

.footer-container {
    border-top: 1px solid #ccc;
}

.footer-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .footer-links .footer-link:not(:first-child) {
        margin-left: 2rem;
    }

.footer-claims-container {
    background-color: #1e1e1e;
    color: #fff;
}

.footer-claims {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.footer-claim-version {
    font-weight: normal;
    color: white;
    font-size: .75rem;
    margin-left: .5rem;
}

@media (max-width: 767.98px) {
    .menu-display-container {
        flex-direction: column-reverse;
    }

    .footer-claims {
        flex-direction: column;
        align-items: center;
    }

    .footer-claim:not(:last-child) {
        margin-bottom: .5rem;
    }

    .footer-claim-version {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .footer-links {
        flex-direction: column;
        align-items: center;
    }

        .footer-links .footer-link:not(:first-child) {
            margin-left: 0;
        }

    .footer-link {
        margin-left: 0;
        margin-bottom: .5rem;
    }
}

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

    min-width: -webkit-fill-available;
}

    .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 .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;
    width: 500px;
}

    .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,
div .reeds-toegevoegd-tag small {
    color: #e18535 !important;
    font-weight: 600;
}

.reeds-aangekocht-tag,
.reeds-toegevoegd-tag {
    color: #e18535 !important;
    font-weight: 600;
}

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 ul,
    #my_orders ul {
        list-style: none;
        padding: 0;
    }

        #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 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 {
        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;
}

.bestelling-row {
    margin-bottom: 1rem;
}

.bestelling-product-order {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px dashed #1e1e1e;
    border-bottom: 1px dashed #1e1e1e;
}

.bestelling-product-order-details-prijs,
.bestelling-product-order-details-aantal,
.bestelling-product-order-details-totale-prijs {
    display: none;
}

.bestelling-academic-software-link {
    color: white !important;
    text-decoration: none;
}

.bestelling-academic-software-link:hover {
    color: black !important;
}

@media screen and (max-width: 850px) {
    .bestelling-row {
        flex-direction: column;
    }

        .bestelling-row div {
            width: 100%;
            margin-top: .5rem;
            margin-bottom: .5rem;
        }

    .bestelling-product-order-details-row {
        display: flex;
        flex-direction: column;
    }

        .bestelling-product-order-details-row div {
            width: 100%;
            margin-top: .5rem;
            margin-bottom: .5rem;
        }

    .bestelling-product-order-details-prijs,
    .bestelling-product-order-details-aantal,
    .bestelling-product-order-details-totale-prijs {
        display: block;
    }

    .bestelling-product-order-info-row {
        display: flex;
        flex-direction: column;
    }

        .bestelling-product-order-info-row div {
            width: 100%;
        }
}

@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) {

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

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

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

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

.addToCart-btn, 
.product-card-download-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%;
}

.product-card-download-btn {
    height: 100%;
}

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

.product-card-price {
    white-space: nowrap;
}

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

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

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

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

.as-link {
    text-decoration: underline !important;
    font-style: italic !important;
    font-weight: normal !important;
    color: #E00020 !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;
}

.terms-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    width: fit-content;
}

    .terms-container a {
        color: #e00020 !important;
    }

    .terms-container a:hover {
        text-decoration: underline;
    }

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

.terms-conditions-list-no-style {
    list-style: none;
}

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

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

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

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

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

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

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

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

.levermethode-container, #checkout {
    
}

.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 {
    padding-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
}

.paymentMethods-item-spacing {
    padding-top: .25rem;
}

.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 {
    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;
}

.header-user-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    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-container {
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 1rem;
}

    .alert-container.general {
        background-color: #FFF3CD;
        color: #533F03;
        border: 1px solid #FFEEBA;
    }

    .alert-container.staff {
        background-color: #F8D7DA;
        color: #491217;
        border: 1px solid #F5C6CB;
    }

.alert-txt {
    margin-bottom: 0;
}

.melding {
    background-color: #FFF3CD;
    color: #533F03;
    border: 1px solid #FFEEBA;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    max-width: fit-content;
}

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

.header-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
}

.header-logo-environment-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

.header-search-user-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.header-search-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.search-item {
    width: 100%;
}

.header-user-language-dropdown-item:hover,
.header-user-profile-dropdown-item:hover {
    cursor: pointer;
}

.header-user-language-dropdown-item:not(:last-child),
.header-user-profile-dropdown-item:not(:last-child) {
    border-bottom: 1px solid lightgray;
}

.header-user-profile-dropdown-item.orders,
.header-user-language-dropdown-item.dutch {
    padding-bottom: .25rem;
}

.header-user-profile-dropdown-item.logout,
.header-user-language-dropdown-item.english {
    padding-top: .25rem;
}

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

.header-container .cart-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.header-container .bi-cart-fill {
    margin-right: .5rem;
}

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

.header-user-language-btn,
.header-user-profile-btn {
    border: none;
    background-color: transparent;
    color: black;
}

.header-user-language-btn-icon,
.header-user-profile-btn-icon {
    font-size: 25px;
}

.header-user-language-dropdown,
.header-user-profile-dropdown {
    min-width: auto;
}

.header-user-language-dropdown-item,
.header-user-profile-dropdown-item {
    display: flex;
    flex-direction: row;
    padding-left: .5rem;
    padding-right: .5rem;
}

.header-user-profile-dropdown-item-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

.header-user-language-dropdown-item:hover,
.header-user-profile-dropdown-item:hover {
    background-color: lightgray;
}

.header-user-profile-dropdown-item-icon.bi-clipboard-check {
    margin-right: 1rem;
}

.header-user-profile-dropdown-item-icon.bi-box-arrow-right {
    margin-left: .15rem;
    margin-right: .85rem;
}

@media (max-width: 991.98px) {
    .header-container {
        grid-template-rows: auto auto;
        gap: 1rem;
        align-items: center;
    }

    .header-search-user-container {
        display: contents;
    }

    .header-logo-environment-container {
        grid-column: 1;
        grid-row: 1;
    }

    .header-user-container {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .header-search-container {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 575.98px) {

    .header-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 1rem;
    }

    .header-logo-environment-container {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    .header-user-container {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }

    .header-search-container {
        grid-column: 1;
        grid-row: 3;
    }
}

/* mobile responsive css */

/* Toepassen op de titels in de pagina's */
.levermethode-form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
}

.alertContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/*#my_orders:hover ul .order:hover a
{
    background-color: #efeee9;
}*/

.extra-info-item {
    font-weight: bold;
}

@media screen and (max-width: 992px) {
    .voorwaarde-items-container {
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }

    #checkout_cart span {
        padding-bottom: .5rem;
    }
}

/* landing page */

.landingPage-content {
    padding: 1rem;
}

.landingPage-header {
    display:flex;
    justify-content: center;
}
.landingPage-logo {
    width: 250px;
    padding: 1rem;
}

.landingPage-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inlog-container {
    display: flex;
    justify-content: center;
}

/* ProductCard */
.productCard-item-container {
    width: max-content !important;
    display: inline-block !important;
    width: 100% !important;
    margin-left: 1rem;
/*    max-width: 74% !important;
*/}

.productCard-info-item-container {
    width: 100%;
    display: inline-block;
    margin-top: 1rem;
    max-height: 25rem;
    overflow: scroll;
}

.product-card-info-filtered-aanbod {
    height: 10rem;
    overflow-y: auto;
    margin-top: 1rem;
}

.campus-title {
    font-weight: bold;
    color: #e00020;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.info-item {
    font-size: 0.9rem !important;
    width: initial !important;
    margin-left: 0.25rem !important;
}

.info-icon-item {
    font-size: .9rem !important;
}

.search-item {
    display: flex;
    align-items: center;
}

/* AanbodRefDisplay */

.aanbodref-display-container {
    display: flex;
    flex-direction: column;
}

.aanbodref-display-items-list {
    list-style: none;
    list-style-position: initial;
    margin-top: .5rem;
    margin-left: -2rem;
}

.aanbodref-display-items-list-item {
    font-size: .7rem;
    font-style: italic;
    font-weight: normal;
    min-width: min-content;
}

.missing-aanbodref-display-items-list-item {
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    min-width: min-content;
    color: #1E1E1E;
}

.aanbodref-opmerking-student {
    font-size: 1rem;
    color: #1E1E1E;
    font-weight: bold;
}

/* unlock Activation code */

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

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

.facturatie-niet-student-copy {
    min-width: 50%;
    font-size: .75rem;
    font-style: italic;
}

.unlockActivation-btn {
    margin-left: 1rem;
}

.nietStudentFacturatie-container {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column;
    padding-top: 1rem;
}

.nietStudentFacturatie-content {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column;
}

.nietStudentFacturatie-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center-btn-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: #e00020 !important;
    color: white !important;
    border: none !important;
    border-color: none !important;
    border-style: none !important;
}

/* Webshop versioning */
.facturatie-title {
    text-transform: uppercase;
    font-weight: bold;
    width: 50% !important;
    display: flex;
    justify-content: center;
}

.activation-title {
    text-transform: uppercase;
    font-weight: bold;
    width: 50%;
    display: flex;
    justify-content: center;
}

.facturatie-radio-button-item {
    text-align : left;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}

.facturatie-radio-label {
    text-align: left;
    width: 100% !important
}

.facturatie-radio-item {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.facturatie-items-content {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;

    flex-direction: row;
    
    margin-top: 1rem;
    margin-bottom: 1rem;
    
    flex-wrap: wrap;
}

.facturatie-content-item {
    margin-left: 1rem;
}

.facturatie-student-item {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.facturatie-student-label {
    margin-left: 1rem;
}

.retour-docs-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.landingpage-list-content {
    font-size: .95rem;
}

.intro-header {
    font-size: 1.5rem;
    text-transform: none;
    font-weight: bolder;
}

.no-style-li {
    list-style: none;
}

.intro-faq {
    margin-bottom: 0 !important;
}

.intro-scroll {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: #1E1E1E;
    font-weight: bold;
}

.list-item-title {
    font-weight: bold;
    list-style-type: disc;
}

.list-content-item {
    list-style: none;
    list-style-position: inside; 
}

.list-sub-item {
    list-style-type: circle;
}

.item-name-spacing {
    margin-left: .5rem !important;
    margin-bottom: 0 !important;
}

.order-card-item-title-item {
    display: flex;
    flex-direction: row;
}

.gray-out-btn {
    background-color: #9FA4AA !important;
    color: white;
    border: none;
    border-style:none;
    padding: .75rem;
    border-radius: .25rem;
}

#facturatie_adres input,
#facturatie_adres select {
    border-left: 1px #d3d0bb solid !important;
}

@media screen and (max-width: 850px) {
    .facturatie-items-content {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .facturatie-content-item {
        margin-left: 0;
    }

    .landingpage-list-content,
    .intro-paragraph {
        width: 100%;
        font-size: 1rem;
    }


    .alert-landingpage {
        width: 100%;
    }

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

.item-amount-container {
    font-size: 1rem !important;
}

.main-products-container {
    display: flex !important;
}

.btn-download-spacing {
    margin-left: 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.products-display-filter-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: end;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.products-display-filter-label {
    font-weight: bold;
}

.productCard-content-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}

.productCard-subtitle-item {
    font-weight: bold;
    font-size: .8rem !important;
}

.more-info-container{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

.more-info-item {
    font-size: .7rem !important;
    margin-bottom: 0 !important;
}

.checkout-display-item {
    display: flex !important;
    flex-direction: row !important;
}

.cart-item-title-container {
    display: flex !important;
    flex-direction: row !important;
}

.checkout-display-item-title {
    margin-left: 1rem !important;
}

.product-detail-item-version-price{
    margin-bottom: 0;
    font-weight: bold;
    font-size: 1.25rem;
    color: #1E1E1E;
}

/* ProductDetailItem Component styling */
.product-detail-item-page {
    display: flex;
    flex-direction: column;
}

/*.product-detail-item-page {

}

.product-cursus-item-detail-container,
.product-handboek-item-detail-container,
.product-item-detail-container {

}

.product-detail-item-divider {

}*/

.product-detail-gekoppelde-vakken {
    margin-bottom: 1rem;
}

.product-detail-gekoppelde-vakken-container-items {
    display: flex;
    width: max-content;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.product-detail-gekoppelde-vakken-container-item {
    margin-left: 1rem;
}
/* Product-detail by type Component */
.product-detail-container {
    display: flex;
    flex-direction: column;
}

.product-detail-info-items {
    display: flex;
    flex-direction: column;
}

.product-detail-main-content {
    display: flex;
    flex-direction: row;
    padding: 1rem;
}

.product-detail-secondary-content {
    display: flex;
    flex-direction: row;
    padding: 1rem
}

.product-detail-icon-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;

    border-radius: 0.391rem;
    background-color: #EFEEE9;
    padding: 1rem;
    margin-right: 1rem;
}

.product-detail-tags {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: .25rem;
    margin-bottom: 1rem;
}

div .product-detail-tag small {
    border-radius: 0.391rem;
    padding: 0.313rem 0.625rem;
    background-color: #1E1E1E;
    color: white !important;
}

.product-detail-titles-item {
    display: flex;
    flex-direction: column;
}

.product-detail-item-title {
    color: #1E1E1E;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2.75rem;
    margin-bottom: 1rem;
}

.product-detail-item-subtitle {
    color: #1E1E1E;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: normal;
    margin-bottom: 0;
}

.product-detail-item-info-container {
    display: flex;
    flex-direction: column;
}

.product-detail-item-author {
    color: #6E6E6E;
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
}

.product-detail-item-extern-ref,
.product-detail-item-isbn {
    color: #6E6E6E;
    font-size: .75rem;
    font-weight: bolder;
    font-style: normal;
    margin-bottom: .5rem;
}

.product-detail-version-label {
    color: #1E1E1E;
    font-family: Poppins;
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: .5rem;
}

.product-detail-cart-items {
    display: flex;
    flex-direction: column;
    
    margin-top: 1rem;
}

.product-detail-version-buttons {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.product-detail-item-version-button {
    padding: 10px 20px;
    flex-direction: column;
    align-items: center;
    border-radius: 0.391rem;
    border: 0.125rem solid #EFEEE9;
    
    font-size: .75rem;
    font-weight: bolder;
    margin-right: .5rem;
    color: black;

    text-align: center;
}

.product-detail-item-version-button:hover {
    border: 0.125rem solid #E00020;
}

.product-detail-item-version-button-selected {
    border: 0.125rem solid #E00020;
}

.product-detail-item-cart-icon {
    font-size: 1.563rem;
    color: white;
}

.product-detail-desclaimer {
    padding-left: 1rem;
}

.product-detail-desclaimer-item {
    width: 50%;
    font-size: .8rem;
    font-weight: normal;
    color: #6E6E6E;
}
.product-detail-price {
    display: flex;
    flex-direction: row;
    padding: .5rem;
    align-items: flex-start;
    justify-content: flex-start;
}

.product-detail-item-price-value {
    color: #1E1E1E;
    font-family: Poppins;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-detail-item-info-leverancier {
    color: #6E6E6E;
    font-family: Poppins;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-cart-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.product-detail-item-cart-button {
    display: flex;
    padding: 0.781rem;
    gap: .5rem;
    border-radius: 0.781rem;
    font-weight: normal;
    background-color: #E18535;
    border: none;
    border-style: none;
    align-items: center;

    height: -webkit-fill-available;
}

.product-detail-item-cart-button:hover {
    background-color: #ca772f;
}

.product-detail-item-cart-button.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.product-detail-item-cart-button.download {
    background-color: #1E1E1E;
}

.product-detail-item-cart-label {
    color: white;
    margin-right: .25rem;
    margin-bottom: 0;
}

.product-detail-content-divider {
    border: 0.25px solid #1E1E1E;
}

.product-detail-gekoppelde-vakken-title {
    color: #1E1E1E;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
}

.product-detail-gekoppelde-vakken-items {
    color: #6E6E6E;
    font-family: Poppins;
    font-size: 1rem;
    font-weight: normal;
}

.product-detail-disclaimer-item {
    display: flex;
    font-size: .7rem;
    font-style: italic;
    font-weight: normal;
    width: 50%;
    margin-top: 1rem;
}

.product-btn-detail-info-item {
    display: flex;
    font-size: .9rem;
    font-style: normal;
    font-weight: 700;
    font-weight: normal;
    margin-top: 1rem;
    color: #6c757d;
}


.product-detail-item-title-container {
    display: flex;
    flex-direction: column;
}

.product-detail-item-subtitle-container {

}

/* ProductAanbodGroupComponent */

.product-aanbod-group-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.product-aanbod-ola-display {
    font-weight: bold;
    color: #e00020;
    margin-bottom: 1rem;
}

.product-aanbod-diploma-display {
    font-weight: bold;
    color: #1E1E1E;
    margin-bottom: 0;
}

.product-aanbod-afstudeerrichting-display {
    font-weight: normal;
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: .25rem;
}

.product-aanbod-afstudeerrichting-opmerking {
    font-style: italic;
    color: #1e1e1e;
    margin-bottom: 0;
    font-size: 0.75rem;
    width: 50% !important;
}

/* ProductAanbodListComponent */

.product-aanbod-list-container {
    display: flex;
    flex-direction: column;
}

.product-aanbod-list-campus-item {
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    margin-bottom: 1rem;
    padding: .5rem;
    background-color: #1E1E1E;
    border-radius: 0.391rem;
    width: fit-content;
}

.product-detail-collapse-container {
    display: flex !important;
    align-items: baseline !important;
    flex-direction: row !important;
}

.product-detail-isp-title {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 0;
}

/* Media-queries product detail page */

@media screen and (max-width : 850px) {
    .product-detail-icon-item {
        margin-right: 0;
        margin-bottom: 1rem;
    }
}

@media screen and (min-width : 850px) {
    .product-detail-container {
        display: flex;
        flex-direction: row;
        padding: 0;
    }

    .product-detail-icon {
        display: flex;
        flex-direction: column;
    }

    .product-detail-info-items {
        display: flex;
        flex-direction: column;
    }

    .product-detail-cart-items {
        display: flex;
        flex-direction: column;
    }

    .product-detail-version-buttons {
        display: flex;
        flex-direction: column;
        width: auto;
        margin-bottom: 1.5rem;
    }

    .product-detail-item-version-button {
        width: auto;
        margin-bottom: .5rem;
    }

    .product-detail-price {
        display: flex;
        flex-direction: column !important;
    }

    .product-detail-item-price-value {
        margin-bottom: .5rem;
    }

    .product-details-icon-container {
        padding: 1rem;
    }
}

/* Products */
.products-vakken-collapse-header,
.product-detail-collapse-header {
    padding-left: 0;
}

.products-vakken-collapse-title {
    text-transform: uppercase;
    color: #1E1E1E;
    font-weight: bold;
}

.products-title:first-letter {
    text-transform: uppercase;
}

.products-title-default {
    display: none;
}

.products-container-warning {
    display: flex;
    font-size: 1.25rem;
    color: #e00020;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
}

.products-display-product-ranges-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.products-display-product-ranges-subtitle-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #efeee9;
    max-width: fit-content;
    border-radius: 6.25px;
}

.products-display-product-ranges-subtitle.campus {
    background-color: inherit;
    color: #1e1e1e;
    text-transform: capitalize !important;
    font-weight: bold;
    margin-left: 1rem;
    margin-right: .5rem;
    margin-bottom: 0;
    border-radius: 3.125px;
}

.products-display-product-ranges-subtitle.phase {
    margin: 0.5rem;
    padding: 0.5rem;
    background-color: #1e1e1e;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    border-radius: 3.125px;
}

.products-display-product-range-container.gridview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.product-container {
    display: flex;
    border-radius: 6.25px;
    border: 1px solid lightgray;
    padding: 1rem;
}

    .product-container.gridview {
        flex-direction: column;
    }

    .product-container.listview {
        flex-direction: row;
        width: 100%;
    }

.product-img-container {
    text-align: center;
}

.product-img-wrapper {
    background-color: #EFEEE9;
    padding: 1rem;
    border-radius: 6.25px;
}

.product-container.listview .product-img-container {
    margin-right: 1rem;
}

.product-container.gridview .product-img-container {
    background-color: #EFEEE9;
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
}

.product-info-btns-wrapper {
    display: flex;
    justify-content: space-between;
}

.product-container.listview .product-info-btns-wrapper {
    flex-direction: row;
    width: 100%;
}

.product-container.gridview .product-info-btns-wrapper {
    flex-direction: column;
    height: 100%;
}

.product-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.product-container.gridview .product-info-container {
    margin-bottom: 1rem;
}

.product-name {
    color: #1E1E1E;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    width: fit-content;
    word-break: break-word;
}

.product-name:hover {
    text-decoration: underline;
}

.product-specs.subtitle,
.product-specs.isbn,
.product-specs.author {
    color: #6c757d;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: .25rem;
}

.product-btns-container {
    display: flex;
}

.product-detail-btns-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-end;
}

.product-container.listview .product-btns-container {
    flex-direction: column;
    justify-content: center;
    min-width: 10rem;
    gap: 1rem;
}

.product-container.gridview .product-btns-container {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.product-btn-container {
    display: flex;
    flex-direction: column;
}

.product-btn {
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: .5rem;
    border-radius: 10px;
    border: none;
    border-style: none;
    color: white;
    background-color: #E18535;
    font-weight: 600;
}
    .product-btn:hover {
        background-color: #de5b24;
    }

    .product-btn:disabled {
        background-color: #7E7E7E;
        pointer-events: none;
        cursor: not-allowed;
    }

    .product-btn.download {
        background-color: #1E1E1E;
    }

    .product-btn.download:hover {
        background-color: #4a4a4a;
    }

.product-btn-txt {
    font-size: 18px;
}

.product-btn-label {
    color: #1E1E1E;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.product-btn-icon {
    margin-left: .5rem;
    font-size: 20px;
    color: white;
}

.product-btn-spinner {
    margin-left: .5rem;
}

.product-btn-download-content {
    padding: .175rem;
}

.product-name-title-link {
    cursor: pointer;
    width: fit-content;
    display: block;
}

.product-name-title-link {
    display: block;
    width: fit-content;
}

.product-container.gridview .product-tags-container {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.product-tags-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .product-tags-container div.product-tag:not(:last-child):after {
        content: "|";
        margin-left: .5rem;
        margin-right: .5rem;
        color: #666666 !important;
        font-size: 10px;
    }

.product-tag {
    font-size: 10px;
    font-weight: normal;
    color: #666666 !important;
    text-transform: uppercase;
}

.product-detail-tags .product-tags-container {
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .product-container.listview .product-info-btns-wrapper {
        flex-direction: column;
    }

    .product-container.listview .product-btns-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        margin-top: 1rem;
        gap: 0;
    }

    .product-container.listview .product-tags-container {
        margin-top: .5rem;
        margin-bottom: .5rem;
    }
}

@media (min-width: 992px) {
    .product-detail-item-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 768px) {
    .product-detail-item-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .product-container.listview {
        flex-direction: column;
    }

    .product-container.listview .product-img-container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
        background-color: #EFEEE9;
        display: flex;
        justify-content: center;
    }

    .product-container.listview .product-btns-container {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.checkout-summary-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .checkout-summary-container h3 {
        font-size: 16px;
        margin-bottom: .5rem;
    }

.checkout-summary-order-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 2;
}

.checkout-summary-order-suppliers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-summary-order-supplier {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-summary-order-supplier-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-summary-order-supplier-name {
    font-weight: bold;
}

.checkout-summary-order-supplier-digital-type {
    font-weight: bold;
}

.checkout-summary-order-address {
    display: flex;
    flex-direction: column;
}

.checkout-summary-order-products-container {
    display: flex;
    flex-direction: column;
}

.checkout-summary-order-products {
    display: flex;
    flex-direction: column;
}

.checkout-summary-order-product-container {
    display: flex;
    flex-direction: column;
}

.checkout-summary-order-spinner {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.checkout-summary-payment-container {
    display: flex;
    flex-direction: column;
    border: 1px solid lightgray;
    border-radius: 6.25px;
    padding: 1rem;
    flex: 1;
}

.checkout-summary-checkbox {
    margin-right: .5rem;
}

.checkout-summary-terms-link {
    color: #e00020;
}

    .checkout-summary-terms-link:hover {
        color: #e00020;
        text-decoration: underline;
    }

.checkout-summary-order-supplier-container {
    display: flex;
    flex-direction: column;
    border-radius: 6.25px;
    border: 1px solid lightgray;
    padding: 1rem;
    gap: 1rem;
}

.checkout-summary-order-product-container-hr:last-child {
    display: none;
}

.checkout-summary-order-products-title {
    text-transform: capitalize;
}

.checkout-summary-order-product {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.checkout-summary-order-product:last-child {
    padding-bottom: 0;
}

.checkout-summary-order-product.shipping {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
}

    .checkout-summary-order-product.shipping {
        padding: 0;
    }

.checkout-summary-order-product-info {
    display: flex;
    flex-direction: column;
    flex: 2;
}

.checkout-summary-order-product-info-title {
    margin-bottom: 0;
}

.checkout-summary-order-product-info-shipping {
    font-weight: bold;
}

.checkout-summary-order-product-info-name-title {
    color: #e00020;
    font-weight: 600;
    font-size: 20px;
    width: fit-content;
}

.checkout-summary-order-product-price-container {
    display: flex;
    flex-direction: row;
}

.checkout-summary-order-product-price-container.shipping {
    padding-right: 1rem;
}

.checkout-summary-order {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .checkout-summary-container {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .checkout-summary-order-product.shipping {
        flex-direction: row;
    }
}

.confirmation-container {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

.confirmation-order-date,
.confirmation-detail-title {
    font-weight: normal;
}

.orders-placeholder {
    display: flex;
    justify-content: center;
}

.orders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-container {
    display: flex;
    flex-direction: column;
    border-radius: 6.25px;
    border: 1px solid lightgray;
    padding: 1rem;
}

    .order-container h3 {
        font-size: 16px;
        margin-bottom: .5rem;
    }

.order-summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 5rem;
}

.order-summary-title {
    font-size: 20px;
}

.order-summary-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    flex: 1;
}

.order-summary-specs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.order-summary-specs-amount,
.order-summary-specs-price {
    flex: 1;
}

.order-summary-detail-btn {
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: .5rem;
    border-radius: 10px;
    border: none;
    border-style: none;
    color: white;
    background-color: #E18535;
    font-weight: 600;
}

.order-summary-detail-btn:hover {
    background-color: #de5b24;
}

.order {
    display: flex;
    flex-direction: column;
}

.order-supplier {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(30, 30, 30, 0.06);
    border-radius: 6.25px;
}

.order-supplier-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-supplier-detail {
    display: flex;
    flex-direction: column;
}

.order-supplier-name {
    text-decoration: underline;
}

.order-supplier-reference-container {
    display: flex;
    flex-direction: column;
}

.order-supplier-reference,
.order-supplier-info {
    font-weight: bold;
}

.order-supplier-delivery-address-container {
    margin-left: 1rem;
    margin-right: 1rem;
}

.order-supplier-delivery-address-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-supplier-delivery-method,
.order-rows-title,
.order-row-product-info-name-title,
.order-row-product-status-title,
.order-row-shipping-product-title {
    font-size: 16px;
}

.order-row-product-info-name-title {
    margin-bottom: 0;
    color: #e00020;
    font-weight: 600;
    font-size: 20px;
}

.order-row-product-info-name-title-link {
    color: #e00020;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer !important;
}

    .order-row-product-info-name-title-link:hover {
        text-decoration: underline;
        color: #e00020;
    }

.order-rows-container {
    display: flex;
    flex-direction: column;
}

.order-rows {
    display: flex;
    flex-direction: column;
}

.order-rows-title {
    text-transform: capitalize;
}

.order-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.order-row-hr:last-child {
    display: none;
}

.order-row-product-container {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
}

.order-row-product {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-row-product-info-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .5rem;
}

.order-row-product-info-name-oa-container {
    display: flex;
    flex-direction: row;
}

.order-row-product-info-name-oa-wrapper {
    display: flex;
    flex-direction: column;
}

.order-row-product-info-name {
    display: flex;
    flex-direction: row;
}

.order-row-product-info-oa {
    font-size: 12px;
    font-style: italic;
}

.order-row-product-info-price-container {
    display: flex;
    flex-direction: row;
}

.order-row-product-statusses-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-row-product-status-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.order-row-product-status {
    text-align: right;
}

.order-row-product-downloads-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    text-align: right;
}

.order-row-product-download {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.order-row-product-download-info-link-icon {
    font-size: 28px
}

.order-row-shipping-product {
    gap: 0;
}

@media (min-width: 992px) {

    .order-row-product {
        flex-direction: row;
        gap: 0;
    }

    .order-row-product-statusses-container {
        text-align: left;
        gap: 3rem;
        flex: 1;
    }

    .order-row-product-status-container {
        align-items: flex-end;
        flex: 1;
    }

    .order-row-product-downloads-container {
        margin-top: .5rem;
    }
}

@media (min-width: 768px) {
    .order-supplier-reference-container {
        flex-direction: row;
        gap: .5rem;
    }
}

@media (min-width: 576px) {
    .order-summary-specs {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .order-row-product-statusses-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}

.address-street-country,
.address-street-country-code {
    font-weight: bold;
}

.pickup-point-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pickup-point-name {
    font-weight: bold;
}

.pickup-point-address-info span {
    text-decoration: underline;
}

/* Product display component */
.product-display-view-btn-selected {
    background-color: #1e1e1e;
    color: white;
}

.productDisplay-outer-container {
    display: flex;
    justify-content: center;
}

.productDisplay-items-outline-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}


/*.productDisplay-items-outline-container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: start;
}*/

.no-products-for-filter-message-item,
.no-results-message-item {
    margin-bottom: 0;
    color: #1E1E1E;
}

/* Products list view */
.productDisplay-change-view-button {
    display: flex;
    justify-content: flex-end;
    width: -webkit-fill-available;
}

.products-display-view-container {
    display: flex;
    justify-content: flex-end !important;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.productDisplay-view-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1E1E1E;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-style: none;
    border: none;
    border-radius: 6.25px;
}

.productDisplay-view-button:hover {
    background-color: #1e1e1e10;
    border-style: none;
    border: none;
    border-radius: 6.25px;
}

.productDisplay-view-button-selected,
.productDisplay-view-button-selected:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #1e1e1e;
    border-style: none;
    border: none;
    border-radius: 6.25px;
    color: white;
}

.productDisplay-view-icon {
    font-size: 15px;
}

/* productDisplayListView item */

product-card-list-item-info-container {
    display: flex;
    flex-direction: column;
}

.productDisplay-list-view-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.product-card-list-item-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 6.25px;
    border: 1px solid #efeee9;
    /* check width of list view item, so it works on laptop screen */
    min-width: -webkit-fill-available;
}

.product-card-list-item-icon-info-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.product-card-list-item-icon-info-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.product-card-list-item-cart-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.product-card-list-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border-radius: 6.25px;
    background-color: #EFEEE9;
    margin-right: 1rem;
}

.product-card-list-item-version-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: .5rem;
}

.product-card-list-item-version-button-item {
    margin-bottom: 1rem;
}

.product-card-list-item-cart-button {
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: .5rem;
    margin-bottom: .5rem;
    border-radius: 10px;
    border: none;
    border-style: none;
    color: white;
    width: 160px;

    background-color: #E18535;
}

.product-card-list-item-cart-button:hover {
    background-color: #de5b24;
}

.product-card-list-item-cart-button-disabled,
.product-card-list-item-cart-button:disabled,
.product-card-list-item-cart-button[button] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: .5rem;
    margin-bottom: .5rem;
    border-radius: 10px;
    border: none;
    border-style: none;
    color: white;
    width: 160px;

    background-color: #7E7E7E;
    pointer-events: none;
    cursor: not-allowed;
}

.product-card-list-item-info-items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    height: -webkit-fill-available;
}

.product-card-list-item-beschikbaarheden {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.product-card-list-title-item {
    font-size: 2rem;
    color: #1E1E1E;
    margin-bottom: 1rem;
    font-weight: bold;
}

.product-card-list-title-item:hover {
    text-decoration: underline;
}


.product-card-list-item-tags {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.product-card-list-detail-isp-title {
    font-size: 12px;
    font-weight: bold;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 0;
}

.checkout-display-item-container,
.cartItem-item-container,
.ordercard-item-container
{
    margin-bottom: .5rem;
}

div .product-card-item-ordercard-smaller-tag small {
    display: inline-flex;
    font-size: 12px;
    font-weight: normal;
    color: #1E1E1E !important;
    text-transform: uppercase;
}

    div .product-card-item-ordercard-smaller-tag small::after {
        content: "|";
        font-size: 12px;
        margin-left: .5rem;
        margin-right: .5rem;
        color: #1E1E1E !important;
    }

.checkout-display-product-link-item,
.order-row-product-info-name-title-link {
    color: #e00020;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer !important;
}

    .checkout-display-product-link-item:hover,
    .order-row-product-info-name-title-link:hover {
        text-decoration: underline;
        color: #e00020;
    }

.checkout-display-item-container,
.cartItem-item-container,
.ordercard-item-container {
    margin-bottom: .5rem;
}

i.header-user-profile-dropdown-item-icon {
    font-size: 1.5rem !important;
}

.form-check-input {
    background-color: #ddd !important;
    border-color: #ddd !important;
}
.form-check-input:checked{
    background-color: #e00020 !important;
    border-color: #e00020 !important;
}

.cart-download-btns-container {
    display: flex;
    flex-direction: row;
}

.error-status-code-container {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.producten-header-container-items {
    display: flex;
    justify-content: space-between;
}

.studiematerialen-isp-aanbod-popup-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.vBtn-align-content-items {
    display: flex;
    align-items: baseline;
}

.studiematerialen-isp-aanbod-popup-container {
    margin: 1rem;
}

.studiemateriaal-item-info-container {
    display: flex;
    flex-direction: column;
}

.studiemateriaal-info-item-list {
    margin-bottom: 0;
}

.student-aanbod-list-info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.student-aanbod-list-info-vakken-items {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    flex-direction: column;
    align-items: flex-end;
}

.student-aanbod-list-info-zonder-aanbod-item,
.student-aanbod-list-info-zonder-studiemateriaal-item {
    color: #1E1E1E;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 0;
}

.student-aanbod-list-info-zonder-aanbod-item {
    margin-right: 1rem;
    margin-bottom: 0;
}

.student-aanbodlist-verplicht {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.student-aanbodlist-semester:first-letter {
    text-transform: uppercase;
}

@media (max-width: 576px) {
    .student-aanbod-list-info-table-column-container {
        align-items: flex-start;
    }

    .student-aanbod-list-info-table-column,
    .student-aanbod-list-info-table-column-content {
        font-size: 15px;
    }

    .student-aanbod-list-info-table-row {
        padding: 0;
    }

    .student-aanbodlist-verplicht {
        justify-content: flex-end;
    }
}

@media (min-width: 576px) {
    .studiematerialen-isp-aanbod-popup-items-popup {
        max-width: 500px;
    }

    .student-aanbod-list-info-container {
        padding: 1rem;
    }
}

@media (min-width: 700px) {
    .studiematerialen-isp-aanbod-popup-items-popup {
        max-width: 600px;
    }
}

@media (min-width: 800px) {
    .studiematerialen-isp-aanbod-popup-items-popup {
        max-width: 700px;
    }
}

@media (min-width: 992px) {
    .studiematerialen-isp-aanbod-popup-items-popup {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .studiematerialen-isp-aanbod-popup-items-popup {
        max-width: 1140px;
    }
}