/* Custom styling */
.subOptions{
    width: 100%;
    margin: 15px 0 0;
    padding: 15px 5px 0;
    float: left;
    border-top: 1px dashed #d7d7d7;
}

.subOptions .btnwrapper{
    display: inline-flex;
    position:relative;
    margin-right:5px;
}

.subOptions .btnwrapper.w-100 {
    width: 100%;
    margin-right: 0px;
}

.subOptions .btnwrapper .optionalInfo{
    top: 12px;
    right: 5px;
}

.subOptions .btn{
    border:1px solid #00b67a;
    padding: 0 30px 0 20px;
    margin:0 0 7px 0px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    text-decoration:none;
    color: #00b67a;
    font-weight: 700;
    position:relative;
}

.subOptions .btn:hover{
    background-color: #00b67a!important;
    color:#fff!important;  
}

.subOptions .btn.selected{
    background-color: #00b67a;
    color:#fff;
}

.subOptions .btn span{
    color:#fff;
    margin-top: 3px;
    /* margin-left:5px; */
}

.subOptions .title span{
    width: 100%;
    font-weight: 600;
    line-height: 14px;
    text-transform: uppercase;
    float: left;
    padding-bottom:5px;
}

.subOptions div.optionalInfo > div, 
.subOptions span.optionalInfo > span{
    top: 20px;
    left: -115px;
}

.maatblok .control-label { font-size: 14px; }

.prodInfo .maten { display: flex; flex-wrap: wrap; margin-top: 5px; }
.prodInfo .maten .btnwrapper .btn { width: 100%; padding: 0 25px; white-space: nowrap; }
.prodInfo .maten .btnwrapper .btn span { color: rgba(0, 0, 0, .5); line-height: inherit; font-size: 11px; margin: 0 0 0 5px; }
.prodInfo .maten .btnwrapper .btn:hover span, .prodInfo .maten .btnwrapper .btn:focus span, .prodInfo .maten .btnwrapper .btn.selected span { color: #fff; }

.prodInfo .maten .btnwrapper:nth-child(1) .popup { left: 0; }
.prodInfo .maten .btnwrapper:nth-child(2) .popup { left: -60px; }
.prodInfo .maten .btnwrapper:nth-child(3) .popup { left: -115px; }
.prodInfo .maten .btnwrapper:nth-child(4) .popup { left: auto; right: -60px; }
.prodInfo .maten .btnwrapper:nth-child(5) .popup { left: auto; right: 0; }

.prodInfo .maten .btnwrapper:nth-child(6) .popup { left: 0; }
.prodInfo .maten .btnwrapper:nth-child(7) .popup { left: -60px; }
.prodInfo .maten .btnwrapper:nth-child(8) .popup { left: -115px; }
.prodInfo .maten .btnwrapper:nth-child(9) .popup { left: auto; right: -60px; }
.prodInfo .maten .btnwrapper:nth-child(10) .popup { left: auto; right: 0; }

.prodInfo .maten .btnwrapper:nth-child(11) .popup { left: 0; }
.prodInfo .maten .btnwrapper:nth-child(12) .popup { left: -60px; }
.prodInfo .maten .btnwrapper:nth-child(13) .popup { left: -115px; }
.prodInfo .maten .btnwrapper:nth-child(14) .popup { left: auto; right: -60px; }
.prodInfo .maten .btnwrapper:nth-child(15) .popup { left: auto; right: 0; }


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
    .subOptions {
        margin: 1em 0 0;
        padding: 1em 0 0;
    }

    .prodInfo .maten .btnwrapper:nth-child(5) { margin-right: 5px; }
    .prodInfo .maten .btnwrapper:nth-child(10) { margin-right: 5px; }
    .prodInfo .maten .btnwrapper:nth-child(15) { margin-right: 5px; }
    .prodInfo .maten .btnwrapper:nth-child(4) { margin-right: 0; }
    .prodInfo .maten .btnwrapper:nth-child(8) { margin-right: 0; }
    .prodInfo .maten .btnwrapper:nth-child(12) { margin-right: 0; }

    .prodInfo .maten .btnwrapper:nth-child(1) .popup { left: 0; }
    .prodInfo .maten .btnwrapper:nth-child(2) .popup { left: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(3) .popup { left: auto; right: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(4) .popup { left: auto; right: 0; }

    .prodInfo .maten .btnwrapper:nth-child(5) .popup { left: 0; }
    .prodInfo .maten .btnwrapper:nth-child(6) .popup { left: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(7) .popup { left: auto; right: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(8) .popup { left: auto; right: 0; }

    .prodInfo .maten .btnwrapper:nth-child(9) .popup { left: 0; }
    .prodInfo .maten .btnwrapper:nth-child(10) .popup { left: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(11) .popup { left: auto; right: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(12) .popup { left: auto; right: 0; }

    .prodInfo .maten .btnwrapper:nth-child(13) .popup { left: 0; }
    .prodInfo .maten .btnwrapper:nth-child(14) .popup { left: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(15) .popup { left: auto; right: -60px; }
    .prodInfo .maten .btnwrapper:nth-child(16) .popup { left: auto; right: 0; }
}

/* Dit is een betaand stukje styling. Alleen .subOptions toevoegen []

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    div.linkSpecs, div.smallDesc [, .subOptions] {
        margin: 1em 0 0;
        padding: 1em 0 0;
    }
}

*/