.eigenschappenScroller{
    position:relative;
    width:100%;
    max-height:200px;
    overflow:auto;
    overflow-x:hidden;
    margin: 5px 0 0;
}
ul.eigenschappen{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
}
ul.eigenschappen li{
    display: block;
}
ul.eigenschappen:not(.extended) li:nth-of-type(3) ~ li:not(.extend){
	/* display:none; */
}
ul.eigenschappen li.extend{
    display: flex;
    border-radius: 20px;
    color: var(--themeTextDark);
    font-size: 12px;
    font-weight: 400;
    align-items: center;
    background-color: #f7f7f7;
    padding: 5px;
    text-align:center;
    justify-content: center;
    cursor:pointer;
}

ul.eigenschappen:not(.type-multiple) li label.customCheckbox div,
ul.eigenschappen.type-multiple label div{
    --textColor: var(
    --themeBlueLight2);
    --borderColor: var(
    --themeBlueLightBg);
    border:1px solid var(--borderColor);
    color:var(--textColor);
    display: flex;
    width:100%;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 300;
    align-items: center;
    gap: 8px;
    padding: 7px;
    padding-left: 30px;
    cursor:pointer;
    min-height: 46px;
}
.customCheckbox{
    position:relative;
}
ul.eigenschappen:not(.type-multiple) li label.customCheckbox input{
    position:Absolute;
    top: 17px;
    left: 11px;
}
ul.eigenschappen:not(.type-multiple) li label.customCheckbox input:checked + div{
    --textColor: #000;
}
ul.eigenschappen:not(.type-multiple) li label.customCheckbox:hover div{
    --textColor: #000;
}

ul.eigenschappen.type-multiple label{
    display:block;
    cursor:pointer;
}
ul.eigenschappen li label span{
    flex:1;
}
ul.eigenschappen.type-multiple li label input{
	display: none;
}
ul.eigenschappen.type-multiple label input:checked + div{
    border-color:var(--themeGreenDark);
    color:var(--themeGreenDark);
}

ul.eigenschappen li.wide label.customCheckbox input{
    padding:4px;
    line-height: 20px;
    font-size: 12px;
    height: auto;
}


.eigenschappenBigGrid{
    --gap: 15px;
    padding-bottom: 20px;
}
.eigenschappenBigGrid ul{
    gap:30px var(--gap);
    padding: 0;
}
.eigenschappenBigGrid ul li{
    width: calc(25% - var(--gap));
    list-style: none;
}
.eigenschappenBigGrid ul li input{
    display:none;
}

.eigenschappenBigGrid ul li .bigOption .eigenschapGrid-content{
    padding: 15px;
    min-height: 88px;
}
.eigenschappenBigGrid ul li .eigenschapGrid-content{
    --textColor: var(
    --themeBlueLight2);
    --bgColor: var(
    --themeBlueLightBg);
    --borderColor: var(
    --themeBlueLightBg);
    background-color: var(--bgColor);
    border:1px solid var(--borderColor);
    color:var(--textColor);
    display:flex;
    cursor:pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.eigenschappenBigGrid ul li .bigOption:hover .eigenschapGrid-content{
    /* --bgColor: #ee762812; */
}

.eigenschappenBigGrid ul li .bigOption:hover .eigenschapGrid-content,
.eigenschappenBigGrid ul li input:checked + .eigenschapGrid-content{
    --textColor: #fff;
    --bgColor: var(--themeBlueLight2);
}
.eigenschappenBigGrid ul li .bigOption:hover .eigenschapGrid-content img,
.eigenschappenBigGrid ul li input:checked + .eigenschapGrid-content img {
    filter: invert(1);
}

.eigenschappenBigGrid ul li .eigenschapGrid-content svg,
.eigenschappenBigGrid ul li .eigenschapGrid-content img{
    fill: var(--textColor);
    height: 27px;
    margin: 0px 0 5px;
}
.fill-it {
    fill: currentColor;
}
.stroke-it {
    stroke: currentColor;
}

.eigenschappenGrid{
    margin-bottom:15px;
}

.eigenschappenGrid ul{
    --gap: 10px;
    width: 100% !important;
    margin: 5px 0;
}
.eigenschappenBigGrid ul,
.eigenschappenGrid ul{
    display:flex;
    gap: var(--gap);
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% + var(--gap));
    justify-content: flex-start;
}

.eigenschappenGrid ul li{
    width: 100%;
}
.full .eigenschappenGrid ul li{
    width: calc(25% - 8px);
}
.half .eigenschappenGrid ul li{
    width: calc(100% - 8px);
}
#editContent .subTitle{
    text-align:left;
    border-top: 1px solid var(--themeBlueLightBg);
    padding-top: 30px;
    margin-top: 23px;
}

.eigenschappenGrid ul li figure{
    height:30px;
    width:30px;
    float: left;
    text-align: center;
    padding: 4px 4px;
}
.eigenschappenGrid ul li svg,
.eigenschappenGrid ul li img{
    max-width:100%;
    max-height:100%;
    width: fit-content;
    height: fit-content;
    stroke: var(--textColor);
}

.carouselSlideHolder{
    border-right: 1px solid #fff;
    box-sizing: content-box;
}

.editList-item .unitInput{
    margin:0;
    width: max-content;
}
.editList-item .unitInput input[name*='prijs']{
    width: 120px;
}

.editList-item .dateMonth{
    width: 160px;
    display:flex;
    gap:0px;
}
.editList-item .dateMonth.year{
    width: 200px;
}
.editList-item .dateMonth select:first-of-type{
    width: 43px;
    border-right: 0;
    padding-right: 0 !important;
}
.editList-item .dateMonth:not(.year) select:last-of-type{
    width:100px;
    /* border-left: 0; */
}
.editList-item .dateMonth.year select:nth-of-type(2),
.editList-item .dateMonth.year select:last-of-type{
    width:100px;
    /* border-left: 0; */
}
.editList-item .dateMonth.year select:first-of-type{
    min-width:40px;
}


.editList-item .periodType{
    width: 100%;
    display:flex;
    gap:0px;
}
.editList-item .periodType input{
    width: 43px;
    border-right: 0;
    padding-right: 0 !important;
}
.editList-item .periodType select:last-of-type{
    width:100px;
    /* border-left: 0; */
}



.editList-item.multiRow{
    padding: 0 0 10px !important;
    align-items: flex-end !important;
}

.editList-item.multiRow > .subRow{
    display:flex;
    width: calc(100% - 40px);
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.editList-item.multiRow > .subRow div{
    display:flex;
    gap: 5px;
}

.editList-item.multiRow .removeLine {
    width:35px;
    height:35px;
    flex: 0;
}


[readonly] {
    background-color: rgb(0 0 0 / 4%) !important;
}

.button.small {
    height:40px;
    width:40px;
    aspect-ratio: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.button.refreshCalendar {
    width: auto;
    display: inline-flex;
    gap: 9px;
}
.refreshCalendar svg{
    height: 1.4em;
    width:auto;
}

.stretch{
    flex:1;
    opacity: 0.0;
    min-height: 10px !important;
    padding: 0 !important;
}


ul.eigenschappen li.wide{
}


ul.eigenschappen .extraEigenschap {
    left: auto !important;
    right: 0;
    top: 0 !important;
    margin: 0 !important;
    position: relative !important;
    width:100%;
    max-width: 60px;
    height: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
ul.eigenschappen select.extraEigenschap{
    max-width: max-content;
}

.editList-item.overlapping select,
.editList-item.overlapping input {
    background-color: #ff0c0c40;
}

@media screen and (max-width:1200px){
    
    .full .eigenschappenGrid ul li{
        width: calc(33% - 8px);
    }
}