:root {
    --wf-blauw: #002c4a;
    --wf-oranje: #f15642;
    --wf-blue: #002c4a;
    --wf-orange: #f15642;
}

html, body {background: #f8f9fa !important;}
#navbarNavAltMarkup a {color: #002c4a; font-weight: 800; font-family: 'Heebo',arial,sans-serif;}


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

    html {
        padding-top: 95px;
    }
}

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

    html {
        padding-top: 0px;
    }
}

.mobilenav a {
    color: var(--wf-blue) !important;
}


h1, h2, h3, h4, h5, h6 { font-family: 'Heebo', arial, sans-serif; padding-top: 10px; }


.cats-container, .cats-container a{
    color: var(--wf-blue) !important;
}

.cats-container a:hover{
    font-weight: bold;
    text-decoration: none;
}


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

    .cats-container, .cats-container a
    {
        color: var(--wf-blue) !important;
    }

    .cats-container a:hover
    {
        font-weight: bold;
        text-decoration: none;
    }

    .cats-container .slash {
        display: none;
    }

}

.btn-warning { background: #f15642 !important; border: #f15642 !important; color: #fff; }
.btn-danger  { background: var(--wf-orange) !important;  border: 1px solid var(--wf-orange) !important; }
.btn-danger:hover  { color: #000000 !important; }

.btn-outline-warning { color: #f15642 !important; border: 1px solid #f15642 !important; color: #fff; }
.account { margin-top: 10px; padding: 8px; width: 100%; max-width: 760px; height: auto; overflow: visible; clear: both; background: #fff; border: 1px solid #d5d5d5; border-radius: 4px; position: relative; z-index: 20; }

.products
{
    position: relative;
    z-index: 10;
}

.product
{
    padding: 8px;
    width: 760px;
    min-height: 195px;
    overflow: auto;
    clear: both;
    background: #fff;
    /*border: 1px solid #d5d5d5; */
    border-radius: 4px;
    margin: 11px auto;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.productgrid
{
    width: 255px;
    float: left;
    height: 435px;
    margin-right: 18px !important;
    overflow: hidden;
    background: #fff;
    /*border: 1px solid #d5d5d5; */
    border-radius: 4px;
    margin: 11px auto;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


/* LIST VIEW */
.product .imgs {max-width: 210px; height: 175px; float: left; display: inline-block; /*width: 115px !important; */}
.product .imgs div { float: left; max-width: 50%; background: #fff; overflow: hidden; }
.product .imgs div img {height: auto; width: 100px; border: 0px; padding-top: 15px; padding-left: 5px; cursor: pointer;}

.product .content { margin-left:15px; display: inline-block; max-width: 415px; overflow: hidden; padding-left: 15px;  font-weight: bold; clear: right; }
.product .content {color: var(--wf-oranje);}


.product .qty {width: 100px; height: 27px;}
.product  select:first-child {width: 150px;}
.product .btns { margin-left: 15px; text-align: left; padding: 15px 15px 15px 15px; display: block; width: 517px; height: 125px; float: left; }
.product .btns div {float: left; margin-right: 5px; font-size: 11pt;}
.product .btns select { height: 27px; width: 150px;}

.product .btn-sm {line-height: 1.4;}
.product input, select { background: #fafafa; border-radius: 4px; border: 1px solid #d5d5d5; }
.product h3 { font-size: 14pt; font-weight: bold; color: #f15642; line-height: 34px; padding-left: 10px; }
.product .price {float: right; font-weight: bold; color: #f15642; margin-right: 21px; line-height: 34px;}



/* GRID VIEW */

.productgrid {position: relative;}
.productgrid .imgs {width: 100%; height: 160px; display: inline-block; text-align: center !important;}
.productgrid .imgs div { max-width: 100%; background: #fff; overflow: hidden; }
.productgrid .imgs div img {height: 150px; width:auto; max-width: 220px;border: 0px; padding-top: 15px; padding-left: 5px; cursor: pointer;}

.productgrid .content { margin-left:0px; display: inline-block; max-width: 415px; overflow: hidden; padding-left: 15px;  font-weight: bold; clear: right; }
.productgrid .content {color: var(--wf-oranje);}
.productgrid .content span {font-size: 11pt !important;}


.productgrid .qty {width: 100px; height: 27px;}
.productgrid  select:first-child {width: 150px;}

.productgrid .btns {
    position: absolute;
    bottom:  0px;
    margin-left: 15px;
    text-align: left;
    padding: 0px;
    display: block;
    width: 100%;
    height: 125px;
}


.productgrid .btns div {float: left; margin-right: 5px; font-size: 11pt;}
.productgrid .btns select { height: 27px; width: 72px;}
.productgrid input[type="number"] { width: 72px; float: left; font-size: 9pt; }
.productgrid input[type="submit"] { width: 228px; }

.productgrid .btn-sm {line-height: 1.4;}
.productgrid input, select { background: #fafafa; border-radius: 4px; border: 1px solid #d5d5d5; }
.productgrid h3 { font-size: 11pt; font-weight: bold; color: #f15642; line-height: 21px; padding-left: 10px; }
.productgrid .price { font-weight: bold; color: #f15642; margin-left: 5px; line-height: 34px;}

.articlecode {
    display: block;
}


.productgrid .label_kleur, .productgrid .label_maat, .productgrid .label_aantal, .productgrid .label_opmerking {
    display: none;
}
.productgrid .opmerkingveld {
    width: 228px !important;
    position: relative;
    top:  -35px;
}

.productgrid .container_opmerking{
    width: 100% !important;
}

.productgrid .btn-bestel {
    position: relative;
    top:  35px;
}


.belons_container {
    width: 280px;
    height: 80px;
    bottom: 0px;
    position: fixed;
    right:  20px;
    z-index: 30;
    background: #fff;
    border:  0px solid #eee;
    overflow: visible;
}

.belons {
    background: var(--wf-blue);
    width:  280px;
    height: 40px;
    line-height: 40px;
    color:  #fff;
    /*position: fixed;
    right: 20px;
    bottom: 40px;*/
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
    z-index: 30;
    font-size: 15pt;
}

.chat {
    background: var(--wf-orange);
    width:  280px;
    height: 40px;
    line-height: 40px;
    color:  #fff;
    /*position: fixed;*/
    bottom: 0px;
    text-align: center;
    z-index: 30;
    font-size: 13pt;
    cursor: pointer;
}


.chat:hover {
    color:  var(--wf-blue) !important;
}

.chat-title {
    cursor: pointer;
}

.chat-open {
    display: inline-block;
    background: #fff;
    border-left:  1px solid #eee;
    border-right:  1px solid #eee;
    /*position: bottom;!*  200px;*!*/
    height:  200px;

}


input[type="text"], input[type="email"], textarea, input[type="password"], input[type="number"] {
    border: 1px solid #cecece !important;
    border-radius: 2px !important;
    padding: 10px !important;
}

.retouren td:first-child, .retouren th:first-child {
    line-height: 36px !important;
}

.account td:first-child, .account th:first-child {
    line-height: inherit;
}

.tableheader {
    background: #eee;
    cursor:  pointer;
}

.tableheader td:first-child {
    line-height: 30px;
    border-radius: 4px !important;
    padding: 8px 10px !important;

}

.fa-caret-down {
    color: var(--wf-blue) !important;
    cursor: pointer;
    padding: 8px;
}

.slash{
    color:  var(--wf-orange);
}


.cc {
    padding-bottom: 10px;
    max-width: 800px;
    background:  none;
}