:root {
    --primary-color: #EE7402;
    --light-color: #F0F0F0;
    --white-color: #ffffff;
    --dark-color: #1D1D1B;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --p-0: 0rem;
    --p-1: 0.25rem;
    --p-2: 0.5rem;
    --p-3: 1rem;
    --p-4: 1.5rem;
    --p-5: 2rem;
    --m-0: 0rem;
    --m-1: 0.25rem;
    --m-2: 0.5rem;
    --m-3: 1rem;
    --m-4: 1.5rem;
    --m-5: 2rem;
}

a {
    text-decoration: none;
    transition: .3s;
}

a:hover {
    text-decoration: none;
}

p {
    line-height: 1.625;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

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

.d-none {
    display: none;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 0.75rem;
}

.gap-3 {
    gap: 1rem;
}

/* Borders */
.border-bottom-light {
    border-bottom: 1px solid #E7E7E7;
}

/* Background colors */
.bg-primary-color {
    background-color: var(--primary-color) !important;
}

.bg-white-color {
    background-color: var(--white-color) !important;
}

.bg-light-color {
    background-color: var(--light-color) !important;
}

/* Components */
.card, .bx-wrapper {
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* Padding */
.p-0 {
    padding: var(--p-0);
}

.p-1 {
    padding: var(--p-1);
}

.p-2 {
    padding: var(--p-2);
}

.p-3 {
    padding: var(--p-3);
}

.p-4 {
    padding: var(--p-4);
}

.p-5 {
    padding: var(--p-5);
}

.pt-0 {
    padding-top: var(--p-0);
}

.pt-1 {
    padding-top: var(--p-1);
}

.pt-2 {
    padding-top: var(--p-2);
}

.pt-3 {
    padding-top: var(--p-3);
}

.pt-4 {
    padding-top: var(--p-4);
}

.pt-5 {
    padding-top: var(--p-5);
}

.pb-0 {
    padding-bottom: var(--p-0);
}

.pb-1 {
    padding-bottom: var(--p-1);
}

.pb-2 {
    padding-bottom: var(--p-2);
}

.pb-3 {
    padding-bottom: var(--p-3);
}

.pb-4 {
    padding-bottom: var(--p-4);
}

.pb-5 {
    padding-bottom: var(--p-5);
}

.pl-0 {
    padding-left: var(--p-0);
}

.pl-1 {
    padding-left: var(--p-1);
}

.pl-2 {
    padding-left: var(--p-2);
}

.pl-3 {
    padding-left: var(--p-3);
}

.pl-4 {
    padding-left: var(--p-4);
}

.pl-5 {
    padding-left: var(--p-5);
}

.pr-0 {
    padding-right: var(--p-0);
}

.pr-1 {
    padding-right: var(--p-1);
}

.pr-2 {
    padding-right: var(--p-2);
}

.pr-3 {
    padding-right: var(--p-3);
}

.pr-4 {
    padding-right: var(--p-4);
}

.pr-5 {
    padding-right: var(--p-5);
}

.py-0 {
    padding-top: var(--p-0);
    padding-bottom: var(--p-0);
}

.py-1 {
    padding-top: var(--p-1);
    padding-bottom: var(--p-1);
}

.py-2 {
    padding-top: var(--p-2);
    padding-bottom: var(--p-2);}

.py-3 {
    padding-top: var(--p-3);
    padding-bottom: var(--p-3);
}

.py-4 {
    padding-top: var(--p-4);
    padding-bottom: var(--p-4);
}

.py-5 {
    padding-top: var(--p-5);
    padding-bottom: var(--p-5);
}

/* Margins */
.m-0 {
    margin: var(--m-0);
}

.m-1 {
    margin: var(--m-1);
}

.m-2 {
    margin: var(--m-2);
}

.m-3 {
    margin: var(--m-3);
}

.m-4 {
    margin: var(--m-4);
}

.m-5 {
    margin: var(--m-5);
}

.mt-0 {
    margin-top: var(--m-0);
}

.mt-1 {
    margin-top: var(--m-1);
}

.mt-2 {
    margin-top: var(--m-2);
}

.mt-3 {
    margin-top: var(--m-3);
}

.mt-4 {
    margin-top: var(--m-4);
}

.mt-5 {
    margin-top: var(--m-5);
}

.mb-0 {
    margin-bottom: var(--m-0);
}

.mb-1 {
    margin-bottom: var(--m-1);
}

.mb-2 {
    margin-bottom: var(--m-2);
}

.mb-3 {
    margin-bottom: var(--m-3);
}

.mb-4 {
    margin-bottom: var(--m-4);
}

.mb-5 {
    margin-bottom: var(--m-5);
}

.ml-0 {
    margin-left: var(--m-0);
}

.ml-1 {
    margin-left: var(--m-1);
}

.ml-2 {
    margin-left: var(--m-2);
}

.ml-3 {
    margin-left: var(--m-3);
}

.ml-4 {
    margin-left: var(--m-4);
}

.ml-5 {
    margin-left: var(--m-5);
}

.mr-0 {
    margin-right: var(--m-0);
}

.mr-1 {
    margin-right: var(--m-1);
}

.mr-2 {
    margin-right: var(--m-2);
}

.mr-3 {
    margin-right: var(--m-3);
}

.mr-4 {
    margin-right: var(--m-4);
}

.mr-5 {
    margin-right: var(--m-5);
}

.my-0 {
    margin-top: var(--m-0);
    margin-bottom: var(--m-0);
}

.my-1 {
    margin-top: var(--m-1);
    margin-bottom: var(--m-1);
}

.my-2 {
    margin-top: var(--m-2);
    margin-bottom: var(--m-2);
}

.my-3 {
    margin-top: var(--m-3);
    margin-bottom: var(--m-3);
}

.my-4 {
    margin-top: var(--m-4);
    margin-bottom: var(--m-4);
}

.my-5 {
    margin-top: var(--m-5);
    margin-bottom: var(--m-5);
}

#mainHeader-inner .logo-in-menu img {
    max-height: 50px;
}

.h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

/* Text colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-white {
    color: var(--white-color) !important;
}

.text-light {
    color: var(--light-color) !important;
}

.app-active-homeapp #searchpane {
    width: 100% !important;
    max-width: 1230px !important;
    margin: 0 auto !important;
}

#searchpane {
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 0;
    margin: 0 auto;
    width: 100% !important;
}

#searchpane li {
    font-size: 12px !important;
}

#searchpane > div {
    margin: 9px !important;
}

#searchpane .ui-widget-content {
    left: -8px !important;
    border: 1px solid #d4d4d4 !important;
}

#searchpane .ui-inputtext, #searchpane input {
    border-radius: 100rem;
    max-width: 27.5rem;
    margin: 0 auto;
    position: relative;
}

.property-block .property-block-line {
    display: flex !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    width: 100% !important;
}

.property-block .property-block-line .property-block-key {
    font-weight: 400;
}

.ui-tabview-nav .ui-state-active {
    background: #ededed !important;
    border-color: #ededed !important;
}

.ui-tabview-nav .ui-state-default {
    background: #ededed !important;
    border-color: #ededed !important;
}

.ui-tabview-nav .ui-state-default a {
    color: var(--dark-color) !important;
}

.ui-tabview-nav .ui-state-default:hover a {
    background: #ededed !important;
    border-color: #ededed !important;
    color: var(--primary-color) !important;
}

.ui-tabview-nav .ui-state-active a {
    color: var(--primary-color) !important;
}

#searchpane input {
    padding-left: 0.5rem;
}

input, textarea {
    font-size: 16px !important;
}

#searchpane .ui-state-highlight {
    border-radius: 100rem;
}

.ui-autocomplete-input-token {
    padding: .5rem .5rem .5rem 0 !important;
}

.ui-autocomplete .ui-autocomplete-token {
    padding: 0.35rem 0.5rem !important;
}

.rounded-1 {
    border-radius: var(--border-radius-sm);
}

.rounded-2 {
    border-radius: var(--border-radius-md);
}

.rounded-3 {
    border-radius: var(--border-radius-lg); 
}

@media screen and (max-width: 900px) {
    .app-active-homeapp #searchpane {
        width: calc(100% - 30px) !important;
        margin: 0 auto !important;
    }
    #mainHeader-inner .logo-in-menu img {
        max-height: 40px;
    }
    form #siteWrapper {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    #searchpane {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;   
    }
    #mainContent-inner .contentPane {
        padding: 0 !important;
    }
}

.app-active-homeapp #mainHeader-inner .navbar {
    max-width: 1230px !important;
}

#mainHeader-inner .navbar {
    max-width: 1260px;
    margin: 0 auto;
}

.navbar-nav {
    display: flex;
    align-items: center;    
}

.add-button, .newlist-input {
    margin-left: 0 !important;
}

.data-overview.p-col-12 {
    padding-left: 32px !important;
}

.listInfo .p-col-6:first-child {
    padding-left: 0;
    width: 4.5rem;
    font-weight: bold;
}

.alternative-listview .listInfo .article-line-detail-colomn .p-col-12.ng-star-inserted:not(.p-grid) {
    display: none;
}

.article-line-detail-colomn .add-to-shopping-cart .button-div .add-icon-div:not(.ng-star-inserted) {
    background-color: #EE7402 !important;
    border-radius: 3px;
    color: #fff;
    padding: 0 !important;
}

.article-line-detail-colomn .add-to-shopping-cart .button-div .add-icon-div i {
    width: 100%;
    height: 100%;
    padding: 0.6rem 1rem !important;
    cursor: pointer;
    text-align: center;
}

.article-line-detail-colomn .add-to-shopping-cart .button-div .add-icon-div i:before {
    content: 'Toevoegen aan winkelmandje';
    font-size: 16px !important;
    color: #fff;
    font-weight: 400;
    font-family: SourceSansPro !important;
    cursor: pointer;
}

.alternative-listview .ng-star-inserted .property-block-line {
    font-size: 13px !important;
}

.alternatives-modal .ui-dialog-title {
    padding-left: 0.75rem;
}
/*
NVG: TODO c47 verwijst ook naar een door Angular toegewezen ID en zou vermeden moeten worden
*/
.alternatives-table[_ngcontent-c47] td[_ngcontent-c47] img[_ngcontent-c47] {
    display: none !important;
}

.data-overview.p-col-12 .p-lg-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media screen and (max-width: 767px) {
    .view-detail .article-detail-line .right-block {
        padding-left: 0 !important;
    }
    .row-type-categories .card {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-nav li a {
        padding: 15px 15px 15px 30px !important;
    }
    
    .navbar-nav li a:hover {
        color: var(--white-color) !important;
    }

    .navbar-nav li {
        width: 100% !important;
    }
}

.navbar-nav li a {
    transition: .3s;
}

.ui-widget-header.ui-listbox-header {
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
}

p-responcive-listbox .ui-widget-header:hover {
    border: 0 !important;
}

.ui-listbox-header .ui-button {
    font-size: 12px !important;
    margin-left: auto !important;
}

.ui-listbox-list-wrapper span {
    color: var(--dark-color) !important;
}

.ui-listbox-list-wrapper span:hover {
    color: var(--primary-color) !important;
}

p, li, strong {
    font-size: 16px !important;
}

.navbar-nav li a:hover {
    color: var(--primary-color) !important;
}

.view-detail .article-price-component .totalExl-div {
    color: var(--primary-color) !important;
}

.panel-subtitle {
    color: var(--primary-color) !important;
}

.ui-state-highlight {
    background: var(--light-color) !important;
}

.ui-panel-content .ui-dropdown {
    border-radius: 8px !important;
}

.ui-panel-content .ui-dropdown .ui-dropdown-label {
    padding: 8px !important;
}

dimashop-app input, dimashop-app textarea {
    padding: 8px !important;
    border-radius: 8px !important;
}

textarea {
    border: 1px solid #d4d4d4 !important;
}

.ui-panel-content .ui-dropdown .ui-dropdown-trigger-icon {
    margin-top: 0.45rem !important;
}

.navbar-nav > li:not(.dropdown):first-child a:hover i:before {  
    background-color: var(--primary-color);
}

.ui-calendar .ui-calendar-button {
    position: absolute;
    height: 100%;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    width: 2em;
    border-left: 0 none;
    right: 0;
    top: 0;
    border-radius: 8px;
}

.ui-line {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.p-col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.p-grid {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.navbar-nav .dropdown li a {
    color: var(--dark-color) !important;
}

.menu-div a {
    color: var(--primary-color) !important;
}

.menu-div p-button {
    padding-left: 0 !important;
}

@media screen and (min-width: 992px) {
    #mainHeader-inner .navbar {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }
    
    .ui-dataview-content .ui-g {
        gap: 0.5rem !important;
    }
}

@media screen and (min-width: 1200px) {
    footer .navigation-div {
        padding-left: 0% !important;
        padding-right: 0% !important;
        max-width: 1260px !important;
        margin: 0 auto !important;
    }
}

@media screen and (min-width: 1600px) {
    .ui-dataview-content .ui-g {
        gap: 1rem !important;
    }

    .app-active-contactformapp .ng-trigger-shownState, .app-active-serviceRequestApp .ng-trigger-shownState {
        max-width: 50rem !important;
        margin: 0 auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;    
    color: var(--dark-color) !important;
    line-height: 1.5 !important;
}

h2 {
    font-size: 32px;
}

.justify-content-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.cd-top {
    background-color: var(--primary-color);
    bottom: 20px !important;
    right: 20px !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cd-top.cd-fade-out {
    opacity: 1 !important;
}

.cd-top i {
    color: var(--white-color);
    font-size: 24px !important;
}

/* Buttons */
.btn-primary {
    display: flex;
    align-items: center;
    max-width: max-content;
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
    border-radius: 5px;
    border-color: var(--primary-color) !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn-light {
    color: var(--dark-color) !important;
    background-color: var(--light-color) !important;
    border-radius: 10px;
    border-color: var(--light-color) !important;
    font-weight: 600  !important;
    padding-top: 11.5px;
    padding-bottom: 11.5px;
}

.btn-primary:hover {
    background-color: #D66802 !important;
    border-color: #D66802 !important;
}

.btn-light:hover {
    background-color: #E8E8E8 !important;
    border-color: #E8E8E8 !important;
}

/* Header */
#mainHeader-inner .navbar {
    align-items: center;
}

.row.headerrow {
    background-color: var(--primary-color)
}

.row.headerrow .custom-header-top {
    max-width: 1260px;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: unset !important;
}

.custom-header-top a {
    font-size: 14px !important;
}

.custom-header-top a:hover {
    color: var(--dark-color) !important;
}

/* Mobile menu */
#sideNav .dropdown-menu li a {
    color: #fff !important;
}

.navigation-mobile #sideNav a:hover {
    background: rgba(255,255,255, 0.06);
}

#sideNav .closebtn {
    background-color: rgb(51, 51, 51) !important;
}

#sideNav .closebtn:hover {
    background-color: rgb(51, 51, 51) !important;
}

#sideNav .menu-shopping-cart-item {
    position: relative;
    width: unset;
    height: unset;
    border-radius: 100rem;
    background-color: unset;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 0;
}

#sideNav .menu-shopping-cart-item .badge, .menu-shopping-cart-item .badge:empty {
    display: none !important;
}

a[tid="mijnwinkelwagen"] {
    padding: 0 !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
}

a[tid="mijnwinkelwagen"]:hover i:before {
    background-color: var(--primary-color) !important;
}

.menu-shopping-cart-item {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 100rem;
    background-color: var(--light-color);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.menu-shopping-cart-item .badge {
    position: absolute !important;
    right: -5px !important;
    bottom: -5px !important;
    padding: 4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    border-radius: 100%;
    flex-shrink: 0;
    display: flex;
    position: absolute;
    background-color: var(--primary-color);
}

.menu-shopping-cart-item i:before {
    content: '' !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.875C0 1.77554 0.0395088 1.68016 0.109835 1.60984C0.180161 1.53951 0.275544 1.5 0.375 1.5H1.5C1.58365 1.50002 1.66489 1.52801 1.7308 1.57952C1.79671 1.63102 1.84351 1.70309 1.86375 1.78425L2.1675 3H10.875C10.932 3.00002 10.9882 3.01301 11.0394 3.03799C11.0906 3.06297 11.1354 3.09929 11.1704 3.14418C11.2055 3.18907 11.2299 3.24136 11.2417 3.29708C11.2535 3.3528 11.2525 3.41048 11.2387 3.46575L10.1137 7.96575C10.0935 8.04691 10.0467 8.11898 9.9808 8.17048C9.91489 8.22199 9.83365 8.24998 9.75 8.25H3C2.91635 8.24998 2.83511 8.22199 2.7692 8.17048C2.70329 8.11898 2.65649 8.04691 2.63625 7.96575L1.2075 2.25H0.375C0.275544 2.25 0.180161 2.21049 0.109835 2.14016C0.0395088 2.06984 0 1.97446 0 1.875ZM2.355 3.75L3.2925 7.5H9.4575L10.395 3.75H2.355ZM3.75 9.75C3.55109 9.75 3.36032 9.82902 3.21967 9.96967C3.07902 10.1103 3 10.3011 3 10.5C3 10.6989 3.07902 10.8897 3.21967 11.0303C3.36032 11.171 3.55109 11.25 3.75 11.25C3.94891 11.25 4.13968 11.171 4.28033 11.0303C4.42098 10.8897 4.5 10.6989 4.5 10.5C4.5 10.3011 4.42098 10.1103 4.28033 9.96967C4.13968 9.82902 3.94891 9.75 3.75 9.75ZM2.25 10.5C2.25 10.1022 2.40804 9.72064 2.68934 9.43934C2.97064 9.15804 3.35218 9 3.75 9C4.14782 9 4.52936 9.15804 4.81066 9.43934C5.09196 9.72064 5.25 10.1022 5.25 10.5C5.25 10.8978 5.09196 11.2794 4.81066 11.5607C4.52936 11.842 4.14782 12 3.75 12C3.35218 12 2.97064 11.842 2.68934 11.5607C2.40804 11.2794 2.25 10.8978 2.25 10.5ZM9 9.75C8.80109 9.75 8.61032 9.82902 8.46967 9.96967C8.32902 10.1103 8.25 10.3011 8.25 10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61032 11.171 8.80109 11.25 9 11.25C9.19891 11.25 9.38968 11.171 9.53033 11.0303C9.67098 10.8897 9.75 10.6989 9.75 10.5C9.75 10.3011 9.67098 10.1103 9.53033 9.96967C9.38968 9.82902 9.19891 9.75 9 9.75ZM7.5 10.5C7.5 10.1022 7.65804 9.72064 7.93934 9.43934C8.22064 9.15804 8.60218 9 9 9C9.39782 9 9.77936 9.15804 10.0607 9.43934C10.342 9.72064 10.5 10.1022 10.5 10.5C10.5 10.8978 10.342 11.2794 10.0607 11.5607C9.77936 11.842 9.39782 12 9 12C8.60218 12 8.22064 11.842 7.93934 11.5607C7.65804 11.2794 7.5 10.8978 7.5 10.5Z' fill='%233C3C3C'/%3E%3C/svg%3E%0A");
    width: 12px;
    height: 12px;
    display: block;
    background-color: var(--dark-color);
}

.navbar-nav li:first-child a i:before {
    content: '' !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.56555 0.233503C6.41554 0.083991 6.21211 0 6 0C5.78789 0 5.58446 0.083991 5.43445 0.233503L0.117295 5.53381C0.0801082 5.57088 0.0506097 5.6149 0.0304841 5.66334C0.0103585 5.71178 0 5.7637 0 5.81613C0 5.86856 0.0103585 5.92048 0.0304841 5.96892C0.0506097 6.01736 0.0801082 6.06138 0.117295 6.09845C0.192398 6.17333 0.29426 6.21539 0.400472 6.21539C0.453062 6.21539 0.505138 6.20507 0.553725 6.185C0.602313 6.16494 0.64646 6.13553 0.683648 6.09845L1.2004 5.58246V9.80372C1.2004 10.121 1.32682 10.4253 1.55185 10.6496C1.77687 10.874 2.08207 11 2.4003 11H9.5997C9.91793 11 10.2231 10.874 10.4482 10.6496C10.6732 10.4253 10.7996 10.121 10.7996 9.80372V5.58246L11.3164 6.09845C11.3915 6.17333 11.4933 6.21539 11.5995 6.21539C11.7057 6.21539 11.8076 6.17333 11.8827 6.09845C11.9578 6.02358 12 5.92202 12 5.81613C12 5.71024 11.9578 5.60869 11.8827 5.53381C9.81949 3.4777 8.51608 2.17814 6.56555 0.233503ZM9.99966 4.78494V9.80372C9.99966 9.90948 9.95752 10.0109 9.88252 10.0857C9.80751 10.1605 9.70577 10.2025 9.5997 10.2025H2.4003C2.29423 10.2025 2.19249 10.1605 2.11748 10.0857C2.04248 10.0109 2.00034 9.90948 2.00034 9.80372V4.78494L6 0.797348L9.99966 4.78494Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 12px;
    height: 11px;
    display: block;
    background-color: var(--dark-color);
}

.navigation-mobile #sideNav i {
    font-size: 1rem;
}

.navigation-mobile #sideNav {
    width: 80% !important;
    background-color: rgb(51, 51, 51);
    z-index: 5000 !important;
}

.navigation-mobile #sideNav i.fa-times:hover {
    color: var(--white-color);
}

.ui-dataview-content .ui-g {
    gap: 1rem;
}

.view-thumbnail .ui-panel {
    padding: 0;
}

/* Contact */
.ui-widget-content {
    border: 0 !important;
}

.ui-grid-row {
    flex-direction: column;
}

.ui-grid-row > .ui-grid-col-9 {
    width: 100% !important;
}

.ui-grid-row .ui-grid-col-9 .ui-g-11 > .ui-grid-col-9 {
    width: 75% !important;
    padding-right: 0.5rem !important;
}

.ui-grid-col-11 {
    width: 100%;
}

.ui-widget-header {
    background-color: transparent;
    border: 0 !important;
    background: transparent;
    font-size: 1rem;
    font-weight: bold;
    padding: 0 !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #273039;
}

.article-document-text span {
    color: var(--primary-color) !important;
}

.ui-panel .ui-panel-content {
    padding: 0;
}

.ui-grid-row .ar {
    display: none;
}

.ui-grid-col-9, .ui-lg-9 {
    padding: 0 !important;
    width: 100% !important;
}

.ui-grid-col-9 .ui-g-11 {
    padding: 0 !important;
    width: 100%;
    display: block;
}

.ui-fluid .ui-dropdown {
    width: 100% !important;
}

.ui-button {
    width: max-content !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    transition: .3s;
}

.app-active-contactformapp .ui-button .ui-button-text {
    display: none;
}

.app-active-contactformapp .ui-widget-content {
    max-width: 500px !important;
    margin: 0 auto !important;
}

.app-active-contactformapp .ui-widget-content .ui-panel-titlebar::after {
    display: none !important;
}

.ng-valid .ui-button {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.ng-valid .ui-button:hover {
    background-color: #D66802;
    color: var(--white-color) !important;
}

.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted {
    background-color: transparent !important;
    width: 31% !important;
    transition: .3s;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    margin: 0.25rem !important;
    padding: 0.75rem !important;
    border: 1px solid #E7E7E7;
    border-radius: 10px;
}

@media screen and (max-width: 992px) {
    .clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted {
        width: 46% !important;
    }
}

@media screen and (max-width: 501px) {
    .shopping-cart-actions {
        flex-direction: column;
    }
    .clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted {
        width: 100% !important;
    }

    .article-detail-line .right-block .add-to-favorites {
        display: none !important;
    }

    .dnnSendPassword .dnnActions {
        flex-direction: column;
    }
}

/*
.ng- classes worden door het Angular framework gegenereerd en dienen voor format .ng-tns-c...-... voor het toepassen van styling op de component zelf.
Een component is meestal 1) html file (met angular variabelen) 2) een .ts file 3) een .css file
Als de component door Angular volledig gebuild wordt (via npm), krijgt deze een intern ID, bvb c27 zoals hier, 
de .css file wordt aan deze component gelinkt zodat er geen conflicten met andere componenten ontstaan.
Bij het toevoegen aan de DOM krijgt de component ook nog eens een instantie nummertje, in onderstaand geval dus 9, 
maar bij het terug navigeren, is deze instantie (om 1 of andere reden...) nummertje 50, dus is de correcte class dan 
.ng-tns-c27-50.ng-star-inserted 
en niet
.ng-tns-c27-9.ng-star-inserted

Dus je kan dit:  
.ng-tns-c27-9.ng-star-inserted

volledig weglaten, want bij toekomstige updates kan het dat ook de component (c27) een ander ID krijgt en de styling dus verloren gaat
*/
.ui-widget-content .ui-g-12.ui-md-4.ui-lg-3 {
    padding: 1rem !important;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid #E7E7E7;
    width: 31.7% !important;
}

.ui-widget-content .ui-panel-titlebar {
    order: 2;
    margin-top: 1rem;
    height: auto !important;
    margin-bottom: 1.5rem;
    color: #273039;
    word-break: break-word !important;
    font-weight: 600 !important;
}

.ui-widget-content .ui-panel-titlebar .clickable::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16_27)'%3E%3Cpath d='M8 -3.49691e-07C10.1217 -4.42435e-07 12.1566 0.842854 13.6569 2.34314C15.1571 3.84344 16 5.87827 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 -2.56947e-07 10.1217 -3.49691e-07 8C-4.42435e-07 5.87827 0.842854 3.84344 2.34315 2.34315C3.84344 0.842854 5.87827 -2.56947e-07 8 -3.49691e-07ZM4.5 7.5C4.36739 7.5 4.24021 7.55268 4.14645 7.64645C4.05268 7.74021 4 7.86739 4 8C4 8.13261 4.05268 8.25978 4.14645 8.35355C4.24021 8.44732 4.36739 8.5 4.5 8.5L10.293 8.5L8.146 10.646C8.05211 10.7399 7.99937 10.8672 7.99937 11C7.99937 11.1328 8.05211 11.2601 8.146 11.354C8.23989 11.4479 8.36722 11.5006 8.5 11.5006C8.63278 11.5006 8.76011 11.4479 8.854 11.354L11.854 8.354C11.9006 8.30755 11.9375 8.25238 11.9627 8.19163C11.9879 8.13089 12.0009 8.06577 12.0009 8C12.0009 7.93423 11.9879 7.86911 11.9627 7.80837C11.9375 7.74762 11.9006 7.69245 11.854 7.646L8.854 4.646C8.76011 4.55211 8.63277 4.49937 8.5 4.49937C8.36722 4.49937 8.23989 4.55211 8.146 4.646C8.05211 4.73989 7.99937 4.86722 7.99937 5C7.99937 5.13277 8.05211 5.26011 8.146 5.354L10.293 7.5L4.5 7.5Z' fill='%23EE7402'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16_27'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 16) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    position: absolute;
    bottom: 0;
    left: 0;
}

.content.view-thumbnail-hide-price {
    padding: 0;
    height: unset !important;
}

.view-thumbnail-panel .ui-widget-content {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 992px) { 
    .row-type-text-image .text {
        border-left: 6px solid var(--primary-color);
    }
}
/*
verwijderd door NVG van Infomat/Klipboard:
.ng-tns-c27-9.ng-star-inserted
*/
@media screen and (max-width: 992px) {
    .ui-widget-content .ui-g-12.ui-md-4.ui-lg-3 {
        width: 100% !important;
    }
/*
verwijderd door NVG van Infomat/Klipboard:
.ng-star-inserted
*/
    .clickable.group-thumb-div.ui-g-12.ui-md-4 {
        width: 45% !important;
    }

    .row-type-text-image .row {
        flex-direction: column;
        margin: 0.5rem;
    }

    .row-type-text-image .row .text {
        padding: 1.5rem !important;
    }
    
    .app-active-catalogapp .ui-g {
        gap: 0.75rem;
        justify-content: space-between;
    }
}
/*
aangepast door NVG van Infomat/Klipboard, voordien:
.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted .image-wrapper
*/
.clickable.group-thumb-div.ui-g-12.ui-md-4 .image-wrapper {
    height: 5rem !important;
}
/*
aangepast door NVG van Infomat/Klipboard, voordien:
.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted .image-wrapper
*/
.clickable.group-thumb-div.ui-g-12.ui-md-4 .image-wrapper img {
    width: 7rem !important;
}
/*
aangepast door NVG van Infomat/Klipboard, voordien:
.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted .image-wrapper
*/
.clickable.group-thumb-div.ui-g-12.ui-md-4 .image-wrapper img {
    mix-blend-mode: multiply;
}
/*
aangepast door NVG van Infomat/Klipboard, voordien:
.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted:hover
*/
.clickable.group-thumb-div.ui-g-12.ui-md-4.ng-star-inserted:hover {
    background-color: var(--light-color) !important;
    outline: 0 !important;
}

.clickable.group-thumb-div.ui-g-12.ui-md-4 p {
    margin-bottom: 0 !important;
    margin-top: auto !important;
    padding-top: 0.5rem;
    color: var(--dark-color) !important;
    font-weight: 600;
}

/* Footer */
footer {
    background-color: #ffffff !important;
    border-top: 1px solid #D1D1D1 !important;
}

footer .social-media i {
    transition: .3s;
    font-size: 16.6px !important;
}

footer .copyright-div {
    background-color: #F0F0F0 !important;
    height: 46px !important;
    line-height: 45px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

footer .copyright-div > div {
    max-width: 630px;
}

footer .copyright-div div:first-child {
    justify-content: flex-start !important;
}

footer .copyright-div div:nth-child(2) {
    justify-content: flex-end !important;
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

footer .copyright-div p {
    margin-bottom: 0;
    margin-right: 24px !important;
}

footer .copyright-div p a {
    font-weight: 400 !important;
    font-size: 12.24px !important;
}

footer .social-media {
    margin-top: 24px !important;
    display: flex;
    gap: 12px;
}

footer a:hover {
    color: var(--primary-color) !important;
}

footer .social-media a {
    width: 46px;
    height: 46px;
    border: 1px solid #F0F0F0;
    border-radius: 100rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .social-media a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

footer .social-media a:hover i {
    color: var(--white-color);
}

footer .navigation-div {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Page */
#mainContent-inner .contentPane .Normal {
    max-width: 800px;
    margin: 0 auto;
}

/* Front-page */
.bx-wrapper {
    position: relative;
}

.bx-controls {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.row-type-contact .row {
    position: relative;
    display: flex;
}

.row-type-contact .row::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 11rem;
    left: 0;
    bottom: 0;
    background: radial-gradient(50.04% 50.04% at 49.96% 100%, #000000 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.06;
    pointer-events: none;
}

/* Categories */
.row-type-categories .card.bg-light-color:hover {
    background-color: var(--primary-color) !important;
}

.row-type-courses .card {
    border-radius: 10px;
}

.row-type-courses p {
    font-size: 19px;
}

.row-type-courses .card:hover .card-img-overlay::after {
    opacity: 1;
}

.card {
    background-color: transparent;
    border: 1px solid #E7E7E7;
    border-radius: 8px;
    transition: .3s;
    position: relative;
    overflow: hidden;
}

.card .card-img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

.card .card-img-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.card .card-img-overlay * {
    z-index: 1;
    position: relative;
}

.card .card-img-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 17rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) -5.95%, rgba(0, 0, 0, 0) 94.05%);
    transition: .3s;
}

.row-type-courses .card .card-img-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: .3s;
    border-radius: 10px;
}

.row-type-categories .card:hover {
    background-color: var(--light-color) !important;
}

.row-type-categories .card img {
    width: 2.875rem;
    height: 2.875rem;
}

.row-type-categories .card.bg-light-color:hover h5 {
    color: var(--white-color) !important;
}

.row-type-categories h5 {
    font-size: 14.4px;
}

.logo {
    width: 120px;
    height: 45px;
    object-position: center;
}

.row-type-logos .card, .row-type-users .card {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

/* Filters */
.filter-container {
    font-size: 0.6rem;
    line-height: 1.2;
    gap: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.filter-container .ui-widget {
    font-size: 0.6rem;
}

@media screen and (max-width: 992px) {
    .row-type-contact .col-lg-4 {
        margin-bottom: 2rem;
        text-align: center;
    }

    .row-type-contact .col-lg-3 {
        margin-bottom: 2rem;
    }

    #siteWrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .filter-container {
        gap: 0.5rem;
        font-size: 1rem;
    }

    #siteWrapper.p-nogutter {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    #siteWrapper.p-nogutter > div {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .filter-container .ui-widget {
        font-size: 1rem;
    }

    footer .copyright-div {
        height: unset !important;
        line-height: unset !important;
        align-items: flex-start !important;
        padding: 16px !important;
        justify-content: center !important;
    }
}

@media screen and (max-width: 1200px) {
    .row-type-contact .person {
        display: none;
    }
}

/* Serviceverzoek */
.app-active-serviceRequestApp .p-grid .p-col-12:not(.filter-container) {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

form .p-grid .p-col-12 .p-col-8, form .p-grid .p-col-12 .p-col-4, form .p-grid input, .p-grid textarea {
    width: 100% !important;
}

form .p-grid input[type='checkbox'] {
    width: unset !important;
}

form .p-grid .p-col-12 .p-col-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
}

form .p-grid .p-col-12 .p-col-11 {
    width: 100%;
    padding: 0;
}

.app-active-serviceRequestApp form .ui-button {
    margin-top: 1rem !important;
    margin: 0.5em;
}

form .ui-dropdown, form .ui-autocomplete {
    width: 100% !important;
}

#siteWrapper {
    width: 100% !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#siteWrapper > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.view-thumbnail-col-6 .exist-in-shoppingcart, .view-thumbnail-col-6 .add-to-favorites {
    display: none !important;
}

.view-thumbnail-col-6 .counter-div {
    width: 45%;
}

.view-thumbnail-col-6 .counter-div input {
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    border-color: var(--light-color) !important;
}

.view-thumbnail-col-6 .add-to-shopping-cart {
    position: relative;
}

.view-thumbnail-col-6 .add-check-div {
    display: block !important;
    font-size: 12px;
    position: absolute;
    top: 100%;
    left: 0;
}

.view-thumbnail-col-6 .add-icon-div:nth-child(2) {
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 100rem;
    background-color: var(--light-color);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.view-thumbnail-col-6 .add-icon-div i:before {
    content: '' !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.875C0 1.77554 0.0395088 1.68016 0.109835 1.60984C0.180161 1.53951 0.275544 1.5 0.375 1.5H1.5C1.58365 1.50002 1.66489 1.52801 1.7308 1.57952C1.79671 1.63102 1.84351 1.70309 1.86375 1.78425L2.1675 3H10.875C10.932 3.00002 10.9882 3.01301 11.0394 3.03799C11.0906 3.06297 11.1354 3.09929 11.1704 3.14418C11.2055 3.18907 11.2299 3.24136 11.2417 3.29708C11.2535 3.3528 11.2525 3.41048 11.2387 3.46575L10.1137 7.96575C10.0935 8.04691 10.0467 8.11898 9.9808 8.17048C9.91489 8.22199 9.83365 8.24998 9.75 8.25H3C2.91635 8.24998 2.83511 8.22199 2.7692 8.17048C2.70329 8.11898 2.65649 8.04691 2.63625 7.96575L1.2075 2.25H0.375C0.275544 2.25 0.180161 2.21049 0.109835 2.14016C0.0395088 2.06984 0 1.97446 0 1.875ZM2.355 3.75L3.2925 7.5H9.4575L10.395 3.75H2.355ZM3.75 9.75C3.55109 9.75 3.36032 9.82902 3.21967 9.96967C3.07902 10.1103 3 10.3011 3 10.5C3 10.6989 3.07902 10.8897 3.21967 11.0303C3.36032 11.171 3.55109 11.25 3.75 11.25C3.94891 11.25 4.13968 11.171 4.28033 11.0303C4.42098 10.8897 4.5 10.6989 4.5 10.5C4.5 10.3011 4.42098 10.1103 4.28033 9.96967C4.13968 9.82902 3.94891 9.75 3.75 9.75ZM2.25 10.5C2.25 10.1022 2.40804 9.72064 2.68934 9.43934C2.97064 9.15804 3.35218 9 3.75 9C4.14782 9 4.52936 9.15804 4.81066 9.43934C5.09196 9.72064 5.25 10.1022 5.25 10.5C5.25 10.8978 5.09196 11.2794 4.81066 11.5607C4.52936 11.842 4.14782 12 3.75 12C3.35218 12 2.97064 11.842 2.68934 11.5607C2.40804 11.2794 2.25 10.8978 2.25 10.5ZM9 9.75C8.80109 9.75 8.61032 9.82902 8.46967 9.96967C8.32902 10.1103 8.25 10.3011 8.25 10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61032 11.171 8.80109 11.25 9 11.25C9.19891 11.25 9.38968 11.171 9.53033 11.0303C9.67098 10.8897 9.75 10.6989 9.75 10.5C9.75 10.3011 9.67098 10.1103 9.53033 9.96967C9.38968 9.82902 9.19891 9.75 9 9.75ZM7.5 10.5C7.5 10.1022 7.65804 9.72064 7.93934 9.43934C8.22064 9.15804 8.60218 9 9 9C9.39782 9 9.77936 9.15804 10.0607 9.43934C10.342 9.72064 10.5 10.1022 10.5 10.5C10.5 10.8978 10.342 11.2794 10.0607 11.5607C9.77936 11.842 9.39782 12 9 12C8.60218 12 8.22064 11.842 7.93934 11.5607C7.65804 11.2794 7.5 10.8978 7.5 10.5Z' fill='%233C3C3C'/%3E%3C/svg%3E%0A");
    width: 12px;
    height: 12px;
    display: block;
    background-color: var(--dark-color);
    transition: .3s;
}

.view-thumbnail-col-6 .add-icon-div:hover i:before {
    background-color: var(--primary-color) !important;
}

.view-thumbnail-col-6 .shopping-cart-component {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.view-thumbnail-col-6 .counter-div .ui-button {
    background-color:  var(--light-color) !important;
    border-color: var(--light-color) !important;
    font-size: 0.5rem !important;
}

.view-thumbnail-col-6 .counter-div .ui-button .ui-button-text {
    padding: 0 !important;
}

.view-thumbnail-col-6 .counter-div .ui-button span {
    color: var(--dark-color) !important;
}

.ui-panel-content .content .p-grid {
    padding-left: 0;
    padding-right: 0;
}

.row-type-text-image .row {
    background-color: var(--light-color);
    display: flex;
    border-radius: 0.625rem;
    overflow: hidden;
}

.row-type-text-image .col-lg-6 {
    padding: 0;
}

.row-type-text-image .row .text {
    padding: 3rem;
}

.svg-icon__arrow::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16_27)'%3E%3Cpath d='M8 -3.49691e-07C10.1217 -4.42435e-07 12.1566 0.842854 13.6569 2.34314C15.1571 3.84344 16 5.87827 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 -2.56947e-07 10.1217 -3.49691e-07 8C-4.42435e-07 5.87827 0.842854 3.84344 2.34315 2.34315C3.84344 0.842854 5.87827 -2.56947e-07 8 -3.49691e-07ZM4.5 7.5C4.36739 7.5 4.24021 7.55268 4.14645 7.64645C4.05268 7.74021 4 7.86739 4 8C4 8.13261 4.05268 8.25978 4.14645 8.35355C4.24021 8.44732 4.36739 8.5 4.5 8.5L10.293 8.5L8.146 10.646C8.05211 10.7399 7.99937 10.8672 7.99937 11C7.99937 11.1328 8.05211 11.2601 8.146 11.354C8.23989 11.4479 8.36722 11.5006 8.5 11.5006C8.63278 11.5006 8.76011 11.4479 8.854 11.354L11.854 8.354C11.9006 8.30755 11.9375 8.25238 11.9627 8.19163C11.9879 8.13089 12.0009 8.06577 12.0009 8C12.0009 7.93423 11.9879 7.86911 11.9627 7.80837C11.9375 7.74762 11.9006 7.69245 11.854 7.646L8.854 4.646C8.76011 4.55211 8.63277 4.49937 8.5 4.49937C8.36722 4.49937 8.23989 4.55211 8.146 4.646C8.05211 4.73989 7.99937 4.86722 7.99937 5C7.99937 5.13277 8.05211 5.26011 8.146 5.354L10.293 7.5L4.5 7.5Z' fill='%23EE7402'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16_27'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 16) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.svg-icon__arrow-white::before {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_16_27)'%3E%3Cpath d='M8 -3.49691e-07C10.1217 -4.42435e-07 12.1566 0.842854 13.6569 2.34314C15.1571 3.84344 16 5.87827 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 -2.56947e-07 10.1217 -3.49691e-07 8C-4.42435e-07 5.87827 0.842854 3.84344 2.34315 2.34315C3.84344 0.842854 5.87827 -2.56947e-07 8 -3.49691e-07ZM4.5 7.5C4.36739 7.5 4.24021 7.55268 4.14645 7.64645C4.05268 7.74021 4 7.86739 4 8C4 8.13261 4.05268 8.25978 4.14645 8.35355C4.24021 8.44732 4.36739 8.5 4.5 8.5L10.293 8.5L8.146 10.646C8.05211 10.7399 7.99937 10.8672 7.99937 11C7.99937 11.1328 8.05211 11.2601 8.146 11.354C8.23989 11.4479 8.36722 11.5006 8.5 11.5006C8.63278 11.5006 8.76011 11.4479 8.854 11.354L11.854 8.354C11.9006 8.30755 11.9375 8.25238 11.9627 8.19163C11.9879 8.13089 12.0009 8.06577 12.0009 8C12.0009 7.93423 11.9879 7.86911 11.9627 7.80837C11.9375 7.74762 11.9006 7.69245 11.854 7.646L8.854 4.646C8.76011 4.55211 8.63277 4.49937 8.5 4.49937C8.36722 4.49937 8.23989 4.55211 8.146 4.646C8.05211 4.73989 7.99937 4.86722 7.99937 5C7.99937 5.13277 8.05211 5.26011 8.146 5.354L10.293 7.5L4.5 7.5Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_16_27'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 16) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.custom-breadcrumb-style .fa-chevron-right:before {
    content: url("data:image/svg+xml,%3Csvg width='7' height='13' viewBox='0 0 7 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6.5L1 12' stroke='%23273039' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
}

.ui-menuitem-text {
    font-weight: 300;
    font-size: 14px;
    margin: 0 0.25rem;
    transition: .3s;
}

.ui-menuitem-text:hover {
    color: #273039;
}

.ui-breadcrumb ul li:last-child .ui-menuitem-text {
    font-weight: 400;
    color: #273039;
}

.ui-breadcrumb-home {
    margin-right: 0.25rem;
}

.ui-breadcrumb-home a {
    width: 30px;
    height: 30px;
    background-color: var(--light-color);
    border-radius: 100rem;
    display: block;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: .3s;
}

.ui-breadcrumb-home a:hover {
    background-color: var(--primary-color);
}

.ui-breadcrumb-home a:hover .fa-home:before {
    background-color: var(--white-color);
}

.ui-breadcrumb-home .fa-home {
    font-size: 10.4px;
    color: #273039;
}

.ui-breadcrumb-home .fa-home:before {
    content: '' !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.56555 0.233503C6.41554 0.083991 6.21211 0 6 0C5.78789 0 5.58446 0.083991 5.43445 0.233503L0.117295 5.53381C0.0801082 5.57088 0.0506097 5.6149 0.0304841 5.66334C0.0103585 5.71178 0 5.7637 0 5.81613C0 5.86856 0.0103585 5.92048 0.0304841 5.96892C0.0506097 6.01736 0.0801082 6.06138 0.117295 6.09845C0.192398 6.17333 0.29426 6.21539 0.400472 6.21539C0.453062 6.21539 0.505138 6.20507 0.553725 6.185C0.602313 6.16494 0.64646 6.13553 0.683648 6.09845L1.2004 5.58246V9.80372C1.2004 10.121 1.32682 10.4253 1.55185 10.6496C1.77687 10.874 2.08207 11 2.4003 11H9.5997C9.91793 11 10.2231 10.874 10.4482 10.6496C10.6732 10.4253 10.7996 10.121 10.7996 9.80372V5.58246L11.3164 6.09845C11.3915 6.17333 11.4933 6.21539 11.5995 6.21539C11.7057 6.21539 11.8076 6.17333 11.8827 6.09845C11.9578 6.02358 12 5.92202 12 5.81613C12 5.71024 11.9578 5.60869 11.8827 5.53381C9.81949 3.4777 8.51608 2.17814 6.56555 0.233503ZM9.99966 4.78494V9.80372C9.99966 9.90948 9.95752 10.0109 9.88252 10.0857C9.80751 10.1605 9.70577 10.2025 9.5997 10.2025H2.4003C2.29423 10.2025 2.19249 10.1605 2.11748 10.0857C2.04248 10.0109 2.00034 9.90948 2.00034 9.80372V4.78494L6 0.797348L9.99966 4.78494Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 12px;
    height: 11px;
    display: block;
    background-color: var(--dark-color);
    transition: .3s;
}

.property-block-key {
    padding-right: 0.25rem;
}

.property-block-key, .property-block-value {
    width: max-content !important;
}

.ui-widget-header {
    color: #273039;
}

/* Login */
.LoginPanel {
    width: 400px !important;
    margin: 0 auto !important;
    float: unset !important;
    padding-right: unset !important;
}

#dnn_ContentPane .dnnLabel {
    width: 100% !important;
    text-align: left !important; 
}

.gmap_canvas {
    width: 100% !important;
    height: 20rem !important;
    border-radius: 2rem;
    margin-bottom: 3rem;
}

.gmap_canvas iframe {
    width: 100%;
    height: 100%;
}

.groupsviewer-list-view .children {
    font-weight: 600;
    border-bottom: 1px solid var(--light-color);
    padding: 0.55rem 0.75rem !important;    
    font-size: 14.4px !important;
}

.groupsviewer-list-view .parent-group {
    font-weight: 600;
    border-bottom: 1px solid var(--light-color);
    padding: 0.55rem 0.75rem !important;
    font-size: 14.4px !important;
    background-color: var(--light-color) !important;
    color: var(--dark-color) !important;
}

.groupsviewer-list-view .children:last-child {
    border-bottom: unset !important;
}

.groupsviewer-list-view .children:hover {
    background-color: var(--light-color) !important;
    color: var(--dark-color) !important;
}

.view-detail .article-comp-detail .thumburl-wrapper {
    border: 1px solid #E7E7E7 !important;
}

.p-col-nogutter.info-small {
    margin-left: 0 !important;
}

.dnnFormPopup .ui-dialog-titlebar {
    text-align: center !important;
}

.view-detail .main-title-block, .article-text-innerHtml {
    word-break: break-word !important;
}

.article-document {
    height: 100% !important;
    margin-bottom: 8px !important;   
}

.article-document-image {
    height: 32px !important;
    width: 32px !important;
}


.add-to-shoppingcart {
    display: flex;
}

.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-pages, .ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev, .ui-paginator .ui-paginator-current {
    font-size: 14.4px;
    font-weight: 600;
}

.ui-paginator-pages {
    display: flex !important;
}

.ui-paginator-page, .ui-paginator-element {
    color: var(--dark-color) !important;
    width: 1.5rem;
    height: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--light-color);
    border-radius: 100%;
}

.ui-paginator-pages {
    display: flex;
}

.ui-paginator-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ui-paginator-element:hover, .ui-paginator-page:hover, .ui-paginator-page.ui-paginator-element.ui-state-active {
    background-color: #e7e7e7 !important;
    color: var(--dark-color) !important;
}

.technical-documents-block {
    padding: 0.25rem !important;
}

.ImageAndObjectElement {
    cursor: pointer;
}

.ui-autocomplete-items {
    padding: 1rem !important;
}

.ui-autocomplete-panel .ui-autocomplete-list-item {
    transition: .3s !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.ui-autocomplete-panel .ui-autocomplete-list-item::marker {
    content: '' !important; 
}


.ui-autocomplete-panel .ui-autocomplete-list-item:not(:first-child):hover {
    background-color: var(--light-color) !important;
}

.ui-autocomplete-panel .ui-autocomplete-list-item:first-child .ui-helper-clearfix {
    padding-left: 0 !important;
    cursor: default !important;
}

.ui-autocomplete-panel .ui-helper-clearfix {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem;
}

.ui-autocomplete-panel .ui-helper-clearfix div {
    float: left !important;
    margin: 0 !important;
    margin-right: 5px !important;
}

footer h6 {
    font-size: 16px;
    margin-bottom: 16px;
}

footer .footer-content .company-details {
    width: 33% !important;
}

footer .footer-content a {
    font-size: 16px !important;
}

@media screen and (min-width: 1200px) {
    footer .company-details {
        border-left: 1px solid #D1D1D1;
    }
}

.footer-menu {
    margin-left: 0 !important;
}

.footer-menu li {
    list-style-type: none;
    margin-bottom: 8px;
}

.footer-menu li a {
    font-size: 16px !important;
}

#dnn_FooterPaneLeft {
    width: 66% !important;
}

@media screen and (max-width: 1200px) {
    #dnn_FooterPaneLeft {
        width: 100% !important;
    }

    footer .row {
        display: flex !important;
    }

    footer .row .col-lg-6 {
        width: 50% !important;
    }

    footer .footer-content .company-details {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 16px !important;
        justify-content: flex-start !important;
    }    
}

.shopping-cart-component .counter-div {
    max-height: unset !important;
}

.sales-search.container {
    width: 1260px !important;
    padding: 0 !important;
}

.ng-trigger-paginating .ui-helper-clearfix {
    display: none !important;
}

.dnnmain > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ui-grid.ui-grid-pad>.ui-grid-row>div {
    padding-left: 0 !important;
}

.article-detail-line .right-block {
    padding-left: 32px !important; 
}

#siteWrapper .article-detail-line input {
    padding: 0 !important;
    border-radius: 0 !important;
}

.specifications-block {
    padding: 0 !important;
}

.ui-selectbutton .ui-button:not(.ui-state-disabled):not(.ui-state-active):hover {
    border-color: #D66802 !important;
    background: #D66802 !important;
    color: #fff !important;
}

.ui-buttonset {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.contentPane br {
    display: none;
}

li[nid="139"] {
    order: 10;
}

.photo-zoom-container .carousel-body .image-container .image-element {
    width: 100% !important;
    object-fit: contain !important;
}