@import url('remixicon.css');

:root {
    --lbw-header: calc(min(80px, 4vw) + 40px);
    --lbw-titel: min(80px, 4vw);
    --lbw-function-row: min(50px,3.5vw);
    --lbw-footer: 30px;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.woff2') format('woff2'), url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: 'Lato';
    font-weight: normal;
    font-style: normal;
    min-height: 100vh;
    overflow: hidden;
    font-size: min(18px,0.8vw);
}

a:link {
    text-decoration: none !important;
}
/* mobile viewport bug fix */
@media not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color: transparent) {
        body {
            min-height: -webkit-fill-available;
        }
    }
}

/* op tablets kleiner font */
@media (max-width: 1200px) {
    html, body {
        font-size: 11px;
    }
}

.errorbutton {
    color: red;
    background-color: white;
}

.loginbox {
    width: 100% !important;
    background-color: white;
}

@media (min-width: 550px) {
    .loginbox {
        width: 500px !important;
        background-color: white;
    }
}



.LbwHeader {
    height: var(--lbw-header);
    background-color: #ffffff
}

.LbwHeaderAcc {
    height: var(--lbw-header);
    background-color: #cccccc;
}

.LbwTitel {
    height: var(--lbw-titel);
    background-color: #ffffff;
    border-bottom: 1px solid black;
}

@media (max-width: 900px) {
    .hidesmall {
        display: none !important;
    }
}

.lbwlogo {
    width: min(288px,15vw);
    height: min(54px, 2.8vw);
    margin: 0.83vw;
}

.lbwuser {
    background: #e53434;
    height: min(80px, 4vw);
    width: min(80px, 4vw);
    font-weight: bold;
    color: #fff;
}

.lbwusericon {
    width: min(40px,2.0vw);
    height: min(40px,2.0vw);
    margin: min(10px,0.52vw) min(20px,1.04vw) min(0px,0vw) min(20px,1.04vw);
}
.lbwusericonauthenticated {
    width: min(50px,2.6vw);
    height: min(50px,2.6vw);
    margin: min(15px,0.78vw);
}
.lbwuserlogin {
    width: min(80px, 4vw);
}

.username {
    color: #e53434;
    font-weight: bold;
    font-size: min(23px,1.2vw);
}

.lbwname {
    color: black;
    font-weight: bold;
    font-size: min(40px,2vw);
    height: min(80px, 4vw);
}

.LbwMain {
    height: calc(100vh - (var(--lbw-header) + var(--lbw-footer)));
}

@supports (-webkit-touch-callout: none) {
    .LbwMain {
        height: calc(94vh - (var(--lbw-header) - var(--lbw-footer)));
    }
}

.LbwFunctionRow {
    height: var(--lbw-function-row);
}

    .LbwFunctionRow .row {
        height: var(--lbw-function-row);
    }

    .LbwFunctionRow .Section {
        background-color: #001854;
        color: #ffffff;
        height: var(--lbw-function-row);
        line-height: var(--lbw-function-row);
        cursor: pointer;
        font-weight: bold;
    }

    .LbwFunctionRow .Zoeken {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .LbwFunctionRow .First {
        padding-left: 0px;
    }

    .LbwFunctionRow .Last {
        padding-right: 0px;
    }

.LbwMainFunction {
    height: calc(100vh - (var(--lbw-header) + var(--lbw-function-row) + var(--lbw-footer)));
}

.LbwMain150 {
    height: calc(100vh - 300px); /* header 120 + footer 30 + 150 */
}

.LbwMainTab {
    height: calc(100vh - 240px); /* header 120 + footer 30 + 150 */
}

.OmruilBar {
    height: 70px;
    color: #000000;
    background-color: #fbcaa7;
    padding: 5px;
}

.LbwFooter {
    height: var(--lbw-footer);
    background-color: #e53434;
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px;
    -webkit-box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
    box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
}

.LbwFooterAcc {
    height: var(--lbw-footer);
    background-color: #555555;
    color: #ffffff;
    font-size: 14px;
    margin-top: 10px;
    -webkit-box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
    box-shadow: 0px -10px 21px -11px rgba(0,0,0,0.43);
}

.FotoBig {
}

    .FotoBig img {
        height: 80vh;
        width: 80vh;
        object-fit: contain;
    }

.listview-item {
    height: 40px;
    width: 95%;
    display: inline-block;
    margin: 10px;
}

.popupwindow {
    height: min(600px, 70vh);
}

a {
    color: inherit;
}

.remixicon24 {
    font-size: 24px;
    color: #e53434;
    line-height: 1.15;
}

.remixicon28 {
    font-size: 28px;
    color: #e53434;
    line-height: 1.15;
}

.remixicon32 {
    font-size: 32px;
    color: #e53434;
    line-height: 1.15;
}

.remixicon40 {
    font-size: 40px;
    color: #e53434;
    line-height: 1.15;
}


.Message {
    background-color: red; /* #e53434; */
    color: #ffffff;
}

.BackendError {
    background-color: #ff0000;
    color: #ffffff;
}

.LbwMenu {
    font-size: 16px !important;
    height: 40px;
    /*    font-size: 28px !important;*/
    border-bottom: 1px solid black;
    font-weight: bold !important;
}

.gapready {
    width: 15px !important;
    background-color: #00ff00 !important;
}
.gapnotready {
    width: 15px !important;
    background-color: #ff0000 !important;
}


.k-window .k-window-titlebar, .k-reset.k-header.k-menu-horizontal.k-menu > .k-item.k-menu-item {
    font-family: Lato;
    font-size: 16px;
    font-weight: bold;
    /*    line-height: 1.5;*/
}

.k-menu-expand-arrow {
    display: none;
}
.k-menu.k-menu-horizontal:not(.k-context-menu) {
    padding-block: 0px !important;
}

span:has(.standout) {
    background-color: yellow;
    border-bottom: 1px solid black;
    height: 40px;
}

.LbwMenuButton {
    font-size: 36px;
    font-weight: 700;
    color: #e53434;
}
/*a, .btn-link {
    color: #0366d6;
}*/

/* voor actieknoppen zonder foto er boven */
.k-button.hoog {
    line-height: 60px;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.buttonsmall {
    padding-top: 1px;
    padding-bottom: 1px;
}

.buttonicon {
    padding: 1px !important;
}

.col-custom-1 {
    flex: 0 0 4.16666%;
    max-width: 4.16666%;
}

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.mh-70 {
    max-height: 70vh !important;
}

.btn-w100 {
    width: 100%;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.overflow {
    overflow-y: auto;
}

.graybackground {
    background-color: #eeeeee;
}

.disabledbackground {
    background-color: #eeeeee !important;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

    .disabledbackground .selected {
        color: #424242 !important;
        background-color: #cccccc !important;
    }



.sublabel {
    font-size: 11px;
}

.kleinlabel {
    font-size: 12px;
}

.normaallabel {
    font-size: 14px;
}


.rond {
    border-radius: .6em !important;
}

.rond-t {
    border-top-left-radius: .6rem !important;
    border-top-right-radius: .6rem !important;
}

.rond-b {
    border-bottom-left-radius: .6rem !important;
    border-bottom-right-radius: .6rem !important;
}

.nietrond {
    border-radius: 0em !important;
}

.boxheader {
    background-color: #001854;
    font-size: 18px;
    color: #ffffff;
}

.boxcontent {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

.VerzendButton {
    width: 150px;
}

.clickable {
    cursor: pointer;
}

.h-20 {
    height: 20% !important
}

.h-50 {
    height: 50% !important
}

.h-60 {
    height: 60% !important
}

.h-80 {
    height: 80% !important
}

.h-85 {
    height: 85% !important
}

.h-90 {
    height: 90% !important
}

.h-95 {
    height: 95% !important
}


.Lbwlabel {
    background-color: #f8f8f8;
    width: 100%;
    height: 30px;
    font-size: 14px;
    line-height: 1.4285714286;
    padding: 5px 8px;
    border-radius: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*    display: inline-block;*/
}

    .Lbwlabel span {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
    }


#blazor-error-ui {
    background: red; /*lightyellow;*/
    color: #ffffff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* kruis in textbox */
.tb-icon-container {
    position: relative;
}


.editclearicon {
    position: absolute !important;
    z-index: 10;
    top: 0.1em;
    right: 0.2em;
    cursor: pointer;
    opacity: 0.5;
}

.editareaclearicon {
    position: absolute !important;
    z-index: 10;
    top: 0.2em;
    right: 0.2em;
    cursor: pointer;
    opacity: 0.5;
}

.errortext {
    color: red;
    font-weight: bold;
}

.errortextbold {
    color: red;
    font-weight: bold;
}

.errorTab {
    background-color: red !important;
    color: white !important;
}

.TreeStyle300 {
    height: 300px;
    background-color: #ffffff !important;
}

.TreeStyle250 {
    height: 250px;
    background-color: #ffffff !important;
}

.TreeStyle200 {
    height: 200px;
    background-color: #ffffff !important;
}

.TreeStyle150 {
    height: 150px;
    background-color: #ffffff !important;
}

.TreeStyle125 {
    height: 150px;
    background-color: #ffffff !important;
}

.TreeStyle100 {
    height: 100px;
    background-color: #ffffff !important;
}

.TreeStyleh100 {
    height: 100%;
    background-color: #ffffff !important;
}


.halficon {
    font-size: 20px;
}

.tableicon {
    font-size: 24px;
}

.formicon {
    font-size: 24px;
}

.formerroricon {
    font-size: 24px;
    color: red;
}

.cards5 {
    width: 100%;
}

@media (min-width: 650px) {
    .cards5 {
        width: 50%
    }
}

@media (min-width: 975px) {
    .cards5 {
        width: 33%
    }
}

@media (min-width: 1300px) {
    .cards5 {
        width: 25%;
    }
}

@media (min-width: 1625px) {
    .cards5 {
        width: 20%;
    }
}


.vrz {
    font-size: 14px;
}

    .vrz.desc {
        /*   height: 40px;*/
    }

    .vrz.snr {
        /*    font-weight: bold;*/
    }

    .vrz.clt {
        font-size: 12px;
    }
/*}*/
.statusrow {
    font-size: 13px;
}

.wsprijs {
    font-size: 19px;
}

.wskorting {
    font-size: 11px;
}

.cardinfo-oranje {
    background-color: #e53434;
    color: #ffffff;
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
    padding-top: .5em;
    padding-bottom: .5em;
}


.cards4 {
    width: 100%;
}

@media (min-width: 850px) {
    .cards4 {
        width: 50%
    }
}

@media (min-width: 1320px) {
    .cards4 {
        width: 33%
    }
}

@media (min-width: 1720px) {
    .cards4 {
        width: 25%;
    }
}

@media (min-width: 2150px) {
    .cards4 {
        width: 20%;
    }
}

.cards5 {
    width: 100%;
}

@media (min-width: 650px) {
    .cards5 {
        width: 50%
    }
}

@media (min-width: 975px) {
    .cards5 {
        width: 33%
    }
}

@media (min-width: 1300px) {
    .cards5 {
        width: 25%;
    }
}

@media (min-width: 1625px) {
    .cards5 {
        width: 20%;
    }
}


.artikelzoekwindow {
    width: min(95vw, 1200px) !important;
    height: min(95vh, 950px) !important;
}

    .artikelzoekwindow .k-window-content {
        background-color: #eeeeee;
    }

    .artikelzoekwindow FIELDSET {
        background-color: #fff !important;
    }

    .artikelzoekwindow LEGEND {
        background-color: #e53434 !important;
        color: #fff;
        width: 200px;
        padding-left: 15px;
    }

@media (max-width : 1000px) {
    .artikelzoekwindow {
        width: 95vw;
    }
}

FIELDSET {
    margin: 0px;
    border: 1px solid #dee2e6;
    padding: 8px;
    border-radius: 4px;
}

LEGEND {
    padding: 2px;
    width: auto;
    font-size: 14px;
    margin: 0px;
}

.groepbox FIELDSET {
    background-color: #fff !important;
}

.groepbox LEGEND {
    background-color: #e53434 !important;
    color: #fff;
    width: 200px;
    padding-left: 15px;
}




.button-100 {
    width: 100%;
}

.youtubewindow {
    width: 142vmin;
    height: 80vmin;
    max-width: 1280px;
    max-height: 720px;
}

.k-table-td {
    border-bottom: 1px solid rgba(33,37,41,.13) !important;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
    background-color: #f8f8f8 !important;
}

.k-tabstrip-items {
    background-color: #001854 !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    font-weight: bold;
    background-color: #001854 !important;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    border-radius: 0;
    border-width: 0;
    box-shadow: none !important;
}

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
        font-weight: bold;
        background-color: #ffffff !important;
        color: #001854;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        border-radius: 0;
        border-width: 5px !important;
        border-color: #001854 !important;
        box-shadow: none !important;
    }

.k-filemanager-content-container > div > div.k-pane.k-filemanager-navigation.k-pane-static > div > div > ul {
    height: 100%;
    overflow: auto;
}

.k-filemanager-content-container > div > div.k-pane.k-filemanager-navigation.k-pane-static > div > div {
    height: 100%;
}

.blinking {
    animation: blinkingText 2s infinite alternate;
}

@keyframes blinkingText {
    from {
        color: #000000;
    }

    to {
        color: #ffffff;
    }
}

.k-window {
    border-radius: .6rem !important;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}


@media (max-width: 1200px) {
    .k-grid {
        font-size: 11px !important;
    }

    .k-input {
        font-size: 11px !important;
    }

    .k-button {
        font-size: 11px !important;
    }
}


.k-loader-container-overlay {
    border-radius: .6rem !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    opacity: 0.2 !important;
}



.k-overlay {
    opacity: 0.2 !important;
}

/*.k-pager-wrap {
    border-bottom-left-radius: .6rem !important;
    border-bottom-right-radius: .6rem !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}*/

.mrsa {
    background-color: #f68e1e;
    font-size: 18px;
}

.k-wizard .k-wizard-step {
    padding: 0 !important;
}


/* geen puntjes in cellen */
.k-column-title {
    text-overflow: clip !important;
    overflow: initial !important;
}












/*pager*/
/*.k-pager.k-floatwrap {
    margin-top: 5px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    border-top-left-radius: .6rem !important;
    border-top-right-radius: .6rem !important;
    border-bottom-left-radius: .6rem !important;
    border-bottom-right-radius: .6rem !important;
    border-bottom-right-radius: .6rem !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    color: #ffffff !important;
    background-color: #e53434 !important;
    border-width: 0px !important;
    z-index: 5000;
}*/

/* borders donkerder maken */
/*textbox*/
.k-input {
    border-color: rgba(0, 0, 0,0.2) !important;
}

.k-checkbox {
    border-color: rgba(0, 0, 0,0.2) !important;
}

/* verwijder extra streepje in textbox */
.k-input-button {
    border-inline-start-width: 0px !important;
}

// dialog
.k-dialog-content {
    white-space: pre-line;
}


.hidechild .hidden-child {
    visibility: hidden !important;
}

.hidechild:hover .hidden-child {
    visibility: visible !important;
}

.userlist {
    font-size: 14px;
}

    .userlist.naam {
        font-weight: bold;
    }

    .userlist.email {
        font-size: 12px;
    }

    .userlist.selected {
        background-color: #a0a0a0;
        color: white;
    }

    .userlist.userlocked {
        background-color: #ff0000;
        color: #ffffff !important;
    }

/*       .userlist.userlocked.selected {
            background-color: #e53434;
            color: white;
        }*/

/* notifications */

.k-notification-custom-color {
    background-color: #e53434 !important;
    color: #ffffff !important;
    font-size: 18px !important;
}


/* for centered content */
.large-notification-center .k-notification,
/* for top content */
.large-notification-top .k-notification-content {
    width: 20.5vw;
    height: 100px;
    z-index: 654321;
    /* margin: 1px 30px !important;*/
}

/* move close button up */
.large-notification-top .k-notification-actions,
/* move success icon up - for some ThemeColors only */
.large-notification-top .k-notification > .k-icon {
    align-self: start;
}

.high-zindex {
    z-index: 654321;
    left: 50px;
}

.k-notification-group {
    margin: 40px 2vw !important;
}


/* dialog with input*/
.k-prompt-container .k-textbox {
    width: 350px;
}

.k-grid tr.k-alt {
    background-color: #ffffff;
}

.k-grouping-row {
    background-color: #e8e8e8 !important;
    border-top: 2px solid #000000 !important;
}

.k-group-cell {
    background-color: #ffffff !important;
}