/* #region Ribbon */

.bg-ribbongroup {
    background-color: var(--ribbon-group-bkg-color);
}

.bg-ribbonitemselect {
    background-color: var(--ribbon-item-select-bkg-color);
}

.ribbonGroupTitle {
    background-color: var(--ribbon-group-title-bkg-color);
}

.ribbonGroupTitle-2 {
    background-color: var(--ribbon-group-title-2-bkg-color);
}

.ribbonItem,
.ribbonItem-2 {
    transition: 0.1s;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    align-items: center;
    cursor: pointer;
}
    .ribbonItem:hover {
        box-shadow: inset 0px -4px 10px 0px var(--ribbon-item-hover-boxshadow-color);
    }

    .ribbonItem:active {
        box-shadow: inset 0px -4px 10px 0px var(--ribbon-item-active-boxshadow-color);
    }

    .ribbonItem .ribbonItemImg {
        filter: var(--ribbon-item-img-filter) drop-shadow(0.5px 0.5px 0.5px var(--ribbon-item-img-dropshadow-color));
        width: 48px;
        height: 48px;
    }

    .ribbonItem-2 .ribbonItemImg {
        filter: var(--ribbon-item-2-img-filter);
        width: 40px;
        height: 40px;
    }

    .ribbonItem-2 {
        gap: 0.3rem;
        padding: 0.5rem;
    }

        .ribbonItem-2 .ribbonItemBtn {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.5rem;
            padding: 0.4rem;
            background-color: var(--ribbon-item-2-btn-bkg-color);
        }

            .ribbonItem-2 .ribbonItemBtn:hover {
                background-color: var(--ribbon-item-2-btn-hover-bkg-color);
            }

/* #endregion Ribbon */

/* #region Tabstrip*/
.design-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom: 0 !important;
}

    .design-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper li.k-tabstrip-item.k-active {
        font-weight: 700;
        background-color: var(--design-tab-active-bkg-color) !important;
    }

.design-tabstrip li.k-tabstrip-item {
    display: block;
    padding: 0.4rem !important;
    color: var(--design-tab-text-color) !important;
    background-color: var(--design-tab-bkg-color) !important;
    border: none;
    box-shadow: none !important;
    text-decoration: none;
    margin-right: 0.2rem;
    margin-bottom: 0 !important;
}

    .design-tabstrip li.k-tabstrip-item .tabTitle::after {
        display: block;
        content: attr(data-content);
        height: 0;
        overflow: hidden;
        visibility: hidden;
        color: var(--design-tab-text-color);
        font-weight: bold;
    }

    .design-tabstrip li.k-tabstrip-item:last-child {
        margin-right: 0;
    }

.design-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper li.k-tabstrip-item:hover {
    background-color: var(--design-tab-hover-bkg-color) !important;
}

.design-tabstrip li.k-tabstrip-item span {
    padding: 0 !important;
    display: inline-block;
}

    .design-tabstrip li.k-tabstrip-item span.removetab {
        padding: 0 !important;
        padding-left: 0.5rem !important;
        color: var(--design-tab-close-color);
    }

        .design-tabstrip li.k-tabstrip-item span.removetab:hover {
            color: var(--design-tab-close-hover-color) !important;
        }

.design-tabstrip li.k-tabstrip-item .design-tab-invalid span.removetab:hover {
    color: var(--design-tab-invalid-close-hover-color) !important;
}

.design-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper li.k-tabstrip-item:has(.k-link .design-tab-invalid):hover,
.design-tabstrip .k-tabstrip-top > .k-tabstrip-items-wrapper li.k-tabstrip-item.k-active:has(.k-link .design-tab-invalid),
.design-tabstrip li.k-tabstrip-item:has(.k-link .design-tab-invalid) {
    background-color: var(--design-tab-invalid-bkg-color) !important;
}

/* #endregion Tabstrip*/

/* #region Eigenschappen */

/* border radius links wel tonen bij velden in eigenschappen */
.propertyBlock .input-group > .fieldContainer .field:not(.input-group-text) .k-rounded-md,
.propertyBlock .input-group > .fieldContainer .field:not(.input-group-text),
.propertyBlock .input-group > .inputFieldContainer .field {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

/* border radius voor + knop van lookup weghalen aan linkerkant */
.propertyBlock .input-group .fieldContainer:has(.field.input-text-normal) + .fieldContainer .field.lookup button:has(.fa-plus) {
    margin-left: -1px;
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

/* overriden voor lookups binnen eigenschappen in designers*/
.propertyBlock .lookupcontainer .fakeinput {
    border-left: none; 
}

/* #endregion Eigenschappen*/