/*--------- Telerik kendo-theme-default => Bodegro default style --------------------------------------
    #337ab7 => RGB R:51, G:122, B:183 => Achtergrondkleur standaard knop  
    #0098cd => RGB R:0, G:152, B:205 => Achtergrondkleur overige knoppen, header, footer
    #eeeeee => RGB 238, 238, 238 => Achtergrondkleur uitzonderingsknop
    #FF0000 => RGB 255,0,0 => Fontkleur waarschuwingen: altijd       
------------------------------------------------------------------------------------------------------*/

:root {
    --bp-body-bg-color: #ffffff !important;
    --bp-body-font-color: #000000 !important;
    --bp-header-bg-color: #0098cd;
    --bp-header-font-color: #ffffff;
    --bp-footer-bg-color: #0098cd;
    --bp-footer-font-color: #ffffff;
    --bp-primary-btn-bg-color: #337ab7; /*standard buttons*/
    --bp-secondary-btn-bg-color: #99c4e8; /*other buttons*/
    --bp-exception-btn-bg-color: #eeeeee; /*exception buttons*/
    --bp-exception-btn-font-color: #7f7f7f;
    --bp-default-font-color: #ffffff;
    --bp-warning-font-color: #ff0000;
    --bp-white-smoke-color: #f8f8f8; /*breadcrumb-bar white-smoke*/
    --bp-light-gray-color: #ebebeb; /*splitbar light gray color*/
    --bp-dark-gray-color: #aaaaaa; /*splitbar light gray color*/
}


/*----------------------- wizard style ----------------------------------------*/

.k-progressbar .k-selected {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-done .k-step-indicator {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-done:hover .k-step-indicator, .k-stepper .k-step-done.k-hover .k-step-indicator, .k-stepper .k-step-done.k-step-hover .k-step-indicator {
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-done.k-step-disabled .k-step-indicator, .k-stepper .k-step-done.k-disabled .k-step-indicator, .k-stepper .k-step-done:disabled .k-step-indicator {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-current .k-step-indicator {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-current:hover .k-step-indicator, .k-stepper .k-step-current.k-hover .k-step-indicator, .k-stepper .k-step-current.k-step-hover .k-step-indicator {
    background-color: var(--bp-primary-btn-bg-color);
}

.k-stepper .k-step-current.k-step-disabled .k-step-indicator, .k-stepper .k-step-current.k-disabled .k-step-indicator, .k-stepper .k-step-current:disabled .k-step-indicator {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}

/*------------------------  tab style ------------------------*/
.k-tabstrip-items-wrapper .k-item {
    color: var(--bp-primary-btn-bg-color);
}

.k-tabstrip-items-wrapper .k-item:hover {
    color: var(--bp-secondary-btn-bg-color);
}

.k-tabstrip-items-wrapper .k-item:hover.k-active {
    color: var(--bp-body-font-color);
}


/*------------------------  splitter style = body style ------------------------*/
.k-splitter {
    border-width: 0px;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-body-font-color);
    background-color: var(--bp-body-bg-color);
}

/*--------------------------- picker button style ------------------------------*/
.k-picker .k-input-button {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

.k-picker:hover .k-input-button:hover {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-secondary-btn-bg-color);
    background-color: var(--bp-light-gray-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

.k-custom-picker {
    width: 180px;
} 


/*------------------------------ grid sort icon style ------------------------------*/
.k-grid-header .k-sort-icon, .k-grid-header .k-sort-order {
    color: var(--bp-primary-btn-bg-color);
}

/*------------------------------ checkbox style ------------------------------*/
.k-checkbox {
    border-color: var(--bp-dark-gray-color);
}

.k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--bp-primary-btn-bg-color);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

    .k-checkbox:checked:focus,
    .k-checkbox.k-checked.k-focus {
        box-shadow: 0 0 0 2px var(--bp-primary-btn-bg-color);
    }

/*------------------------------ icon spilitbar style--------------------------*/
.k-icon-xs.k-svg-icon {
    width: 20px;
    height: 20px;
}

/*------------------------------ button style --------------------------------*/
.k-button {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    color: inherit;
    background: none;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    position: relative;
    transition: color 0.2s ease-in-out;
    border-color: rgba(0, 0, 0, 0.08);
}

/*--------------------------- standard button ---------------------------------------------*/
.k-button-solid-base {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

.k-button-solid-base:hover,
.k-button-solid-base.k-hover {
    color: var(--bp-default-font-color);
    background-color: var(--bp-secondary-btn-bg-color);
}

.k-button-link-base {
    border-width: 0px;
}

/*---------------------- spinner button -----------------------------------------------*/
.k-button-solid-base.k-spinner-decrease {
    border-color: var(--bp-primary-btn-bg-color);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}
.k-button-solid-base.k-spinner-increase {
    border-color: var(--bp-primary-btn-bg-color);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

/*---------------- other buttons popup filter/clear type reset------------------------------*/
button[type="reset"] {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-default-font-color);
    background-color: var(--bp-secondary-btn-bg-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

    button[type="reset"]:hover {
        color: var(--bp-secondary-btn-bg-color);
        background-color: var(--bp-light-gray-color);
    }

button.telerik-blazor.k-button.k-input-button.k-button-solid.k-button-md.k-button-solid-base.k-icon-button {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

    button.telerik-blazor.k-button.k-input-button.k-button-solid.k-button-md.k-button-solid-base.k-icon-button:hover {
        border-color: rgba(0, 0, 0, 0.08);
        color: var(--bp-secondary-btn-bg-color);
        background-color: var(--bp-light-gray-color);
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    }

.k-button-flat-primary {
    color: var(--bp-primary-btn-bg-color);
}

.k-button-solid-light:active, 
.k-button-solid-light.k-active {
    border-color: #cfcfcf;
    background-color: #cfcfcf;
}

.k-button-solid-light.k-selected {
    border-color: #cfcfcf;
    background-color: #cfcfcf;
}

.k-button-solid-inverse {
    border-color: #424242;
    color: var(--bp-default-font-color);
    background-color: #424242;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

    .k-button-solid-inverse:hover, 
    .k-button-solid-inverse.k-hover {
        border-color: #3f3f3f;
        background-color: #3f3f3f;
    }

    .k-button-solid-inverse:focus, 
    .k-button-solid-inverse.k-focus {
        box-shadow: 0 0 0px 2px rgba(66, 66, 66, 0.3);
    }

    .k-button-solid-inverse:active, 
    .k-button-solid-inverse.k-active {
        border-color: #3a3a3a;
        background-color: #3a3a3a;
    }

    .k-button-solid-inverse.k-selected {
        border-color: #3a3a3a;
        background-color: var(--bp-primary-btn-bg-color);
    }

.k-button-outline-primary {
    box-shadow: none;
    border-color: currentColor;
    color: #ff6358;
    background-color: transparent;
}

    .k-button-outline-primary:hover, 
    .k-button-outline-primary.k-hover {
        border-color: #ff6358;
        color: var(--bp-default-font-color);
        background-color: #ff6358;
    }

    .k-button-outline-primary:focus, 
    .k-button-outline-primary.k-focus {
        box-shadow: 0 0 0px 2px rgba(255, 99, 88, 0.3);
    }

    .k-button-outline-primary:active, 
    .k-button-outline-primary.k-active {
        border-color: #ff6358;
        color: var(--bp-default-font-color);
        background-color: #2cb885;
    }

    .k-button-outline-primary.k-selected {
        border-color: #ff6358;
        color: var(--bp-default-font-color);
        background-color: #28c726;
    }

/*----------- popup filter buttons ---------------------------------*/
.k-button-solid-primary {
    border-color: transparent;
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}

    .k-button-solid-primary:hover,
    .k-button-solid-primary.k-hover {
        color: var(--bp-default-font-color);
        border-color: var(--bp-secondary-btn-bg-color);
        background-color: var(--bp-secondary-btn-bg-color);
    }

    .k-button-solid-primary:hover,
    .k-button-solid-primary.k-hover {
        border-color: var(--bp-secondary-btn-bg-color);
        background-color: var(--bp-secondary-btn-bg-color);
    }

/*----------- multiselect button ---------------------------------*/
.multiselect-button {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}


/*-------------------------- card style ------------------------------*/
.k-card {
    padding: 20px;
    border-width: 0 0 1px 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    border-bottom-width: 0px;
}

    .k-card .k-card-body,
    .k-card .k-card-actions {
        padding: 0 8px;
    }

    .k-card .k-card-image {
        max-width: unset;
    }

.k-card-horizontal > .k-card-image:last-child {
    border-radius: 0;
}

.k-card .k-card-title {
    padding: 0;
    font-size: 1.285em;
    font-weight: bold;
    line-height: normal;
    color: var(--bp-default-font-color);
}

.k-card-subtitle {
    font-size: 1em;
    color: var(--bp-default-font-color);
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

/*------------------------------ panelbar -------------------------------------*/
.k-panelbar > .k-panelbar-header > .k-link {
    color: var(--bp-primary-btn-bg-color);
    font-weight: bold;
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected {
    color: white;
    background: var(--bp-primary-btn-bg-color);
}

.k-panelbar > .k-panelbar-header > .k-link.k-selected:hover {
    background: var(--bp-secondary-btn-bg-color);
}

/*------------------------------ pager -------------------------------------*/
.k-button-md .k-icon-button .k-button-icon .k-svg-icon > svg,
.k-button-md .k-icon-button .k-button-icon .k-icon-md > svg {
    width: 20px;
    height: 20px;
    color: var(--bp-primary-btn-bg-color);
}

.k-button-md .k-icon-button .k-button-icon .k-svg-icon:hover > svg,
.k-button-md .k-icon-button .k-button-icon .k-icon-md:hover > svg {
    width: 20px;
    height: 20px;
    color: var(--bp-default-font-color);
}

.k-pager .k-button-md .k-icon-button .k-button-icon .k-svg-icon:hover > svg,
.k-pager .k-button-md .k-icon-button .k-button-icon .k-icon-md:hover > svg {
    color: var(--bp-primary-btn-bg-color);
}

/*------------------------------ spilitbar style ------------------------------*/
.k-splitbar {
    color: var(--bp-primary-btn-bg-color);
    background-color: var(--bp-light-gray-color);
}

    .k-splitbar:focus, .k-splitbar.k-focus {
        color: var(--bp-primary-btn-bg-color);
        background: var(--bp-light-gray-color);
    }

/*------------------------------ breadcrumb style ------------------------------*/
.breadcrumb-bar {
    background-color: var(--bp-white-smoke-color);
    margin: 0px;
    padding: 0px;
}

.k-breadcrumb-root-item {
    flex-shrink: 0;
}

.k-breadcrumb-link,
.k-breadcrumb-root-link {
    border-radius: 4px;
    color: var(--bp-primary-btn-bg-color); 
    text-decoration: none;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}


    .k-breadcrumb-link:hover, .k-breadcrumb-link.k-hover {
        color: #0098cd; 
        background-color: #fafafa;
    }

    .k-breadcrumb-link:focus, .k-breadcrumb-link.k-focus {
        color: #1b6ec2; 
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.13);
    }


/*------------------------------ switch style ------------------------------*/
.k-switch-on .k-switch-track {
    border-color: var(--bp-primary-btn-bg-color);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.k-switch-off .k-switch-track {
    border-color: var(--bp-light-gray-color);
    color: #424242;
    background-color: #ffffff;
}

.k-switch-on:focus .k-switch-track,
.k-switch-on.k-focus .k-switch-track {
    outline: 2px solid var(--bp-primary-btn-bg-color);
}

/*---------------------------- calendar style --------------------------*/
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.k-calendar .k-calendar-navigation li:hover,
.k-calendar .k-calendar-navigation li.k-hover {
    color: var(--bp-primary-btn-bg-color);
}

/*------------------------------ list style ------------------------------*/
.k-list-item.k-selected:hover,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-hover.k-list-optionlabel {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

/*------------------------------ grid filter style ------------------*/
.k-grid-header .k-grid-filter.k-active, .k-grid-header
.k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active, .k-grid-header
.k-hierarchy-cell .k-icon.k-active,
.k-grid-header .k-hierarchy-cell .k-svg-icon.k-active {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.k-grid .k-grid-filter, .k-grid .k-header-column-menu,
.k-grid .k-grid-header-menu, .k-grid .k-hierarchy-cell .k-icon,
.k-grid .k-hierarchy-cell .k-svg-icon {
    color: var(--bp-primary-btn-bg-color);
}

.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > .k-table-td {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

/* verticale scrollbalk in het grid verbergen */
.grid-no-scroll .k-grid-content {
    overflow-y: auto;
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
    padding-right: 0;
}

.grid-no-scroll .k-grid-header-wrap,
.grid-no-scroll .k-grid-footer-wrap {
    border-right-width: 0;
}

/* header in het grid verbergen, maar filterrij behouden */
.no-headers-grid .k-grid-header .k-table-th:first-child {
    display: none;
}

/* header in het grid verbergen, maar filterrij behouden */
.no-headers-grid .k-grid-header .k-table-th {
    display: none;
}

/* lijn in formgroup verbergen */
.no-headers-form .k-form-legend {
    display: none;
}

.show-headers-form .k-form-legend {
    display: block;
}

/* formgroup font-size groter maken */
.increase-font-headers .k-form-legend {
    font-size: medium;
}

/* formgroup laten inspringen */
.indent-headers-form>div {
    margin-left: 250px;
}

.smallindent-headers-form > div {
    margin-left: 50px;
}

/* dateinput controls geen rode rand geven als nullable datumveld leeggemaakt is */
.k-input.k-invalid.dateinput-valid-null {
    border-color: rgba(0, 0, 0, 0.08);
}


/*------------------------------ menu style ----------------------------*/
.k-menu:not(.k-context-menu) {
    color: #424242;
    background-color: transparent;
}

    .k-menu:not(.k-context-menu) > .k-item {
        color: #ff6358;
    }

        .k-menu:not(.k-context-menu) > .k-item:hover, 
        .k-menu:not(.k-context-menu) > .k-item.k-hover {
            color: #d6534a;
        }

        .k-menu:not(.k-context-menu) > .k-item:active, 
        .k-menu:not(.k-context-menu) > .k-item.k-active {
            color: #424242;
        }

        .k-menu:not(.k-context-menu) > .k-item:focus, 
        .k-menu:not(.k-context-menu) > .k-item.k-focus {
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
        }

.k-menu-group, .k-menu.k-context-menu {
    border-color: rgba(0, 0, 0, 0.08);
    color: #424242;
    background-color: #fafafa;
}

    .k-menu-group .k-item > .k-link:hover,
    .k-menu-group .k-item > .k-link.k-hover,
    .k-menu.k-context-menu .k-item > .k-link:hover,
    .k-menu.k-context-menu .k-item > .k-link.k-hover {
        color: var(--bp-default-font-color);
        background-color: var(--bp-primary-btn-bg-color);
    }

    .k-menu-group .k-item > .k-link:active,
    .k-menu-group .k-item > .k-link.k-active,
    .k-menu-group .k-item > .k-link.k-selected,
    .k-menu.k-context-menu .k-item > .k-link:active,
    .k-menu.k-context-menu .k-item > .k-link.k-active,
    .k-menu.k-context-menu .k-item > .k-link.k-selected {
        color: var(--bp-default-font-color);
        background-color: var(--bp-primary-btn-bg-color);
    }

    .k-menu-group .k-item:focus > .k-link,
    .k-menu-group .k-item.k-focus > .k-link,
    .k-menu.k-context-menu .k-item:focus > .k-link,
    .k-menu.k-context-menu .k-item.k-focus > .k-link {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
    }

.k-menu-scroll-wrapper .k-menu-scroll-button {
    border-color: rgba(0, 0, 0, 0.08);
    color: #ff6358;
    background-color: #ffffff;
}

    .k-menu-scroll-wrapper .k-menu-scroll-button:hover {
        color: #d6534a;
    }

/*radio buttons*/
.k-radio:checked, .k-radio.k-checked {
    border-color: var(--bp-primary-btn-bg-color);
    color: white;
    background-color: var(--bp-primary-btn-bg-color);
}


/* theme colors */
.k-color-primary {
    color: var(--bp-primary-btn-bg-color);
}

#std-button {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.std-button {
    color: var(--bp-default-font-color);
    background-color: var(--bp-primary-btn-bg-color);
}

.sec-button {
    color: black;
    background-color: var(--bp-secondary-btn-bg-color);
}

.stealfocus-button {
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* happy path buttons on bottom-right */
.buttonsright-form.k-form .k-form-buttons {
    justify-content: flex-end;
}

/* images */
.rotate-and-flip-image {
    transform: rotateZ(90deg) rotateY(180deg);
}

/* custom classes */
.button-nopadding {
    padding: 0px;
}