@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


/********   WAARDEN ACCENTKLEUREN PORTAL ********/

:root {
    --accentcolorstart: #5bb2ba;
    --accentcolorend: #65c7d0;
    --accentcolorrgb: 101, 199, 208
}

/****************************************/


/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/pxiByp8kv8JHgFVrLDD4Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/pxiByp8kv8JHgFVrLDD4Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/pxiByp8kv8JHgFVrLDD4Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    font-family: Poppins, Helvetica, Arial, sans-serif;
    height: 100%;
    background-color: #e5e5e5;
}

.axians-topbar {
    background-color: #ffff;
    -webkit-box-shadow: 0px 5px 30px -10px rgb(158, 158, 158);
    -moz-box-shadow: 0px 5px 30px -10px rgb(158, 158, 158);
    box-shadow: 0px 5px 30px -10px rgb(158, 158, 158);
    margin-top: 40px;
}

.axians-topmenu {
    padding-top: 130px;
    padding-bottom: 20px;
}
.axians-welcomemenu {
    background-image: linear-gradient(135deg, var(--accentcolorstart) 0%, var(--accentcolorend) 50%);
    height: 40px;
    font-size: 14px
}

a, .btn-link {
    color: #0366d6;
}

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



.top-row {
    height: 3.5rem;
    display: flex;
    align-items: start;
}

.main {
    flex: 1;
    background-color: #e5e5e5;
    color: #383838;
    
    border-left: 1px solid rgba(0,0,0,.125)
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.axiansgradient {
    background-image: linear-gradient(135deg, #e8e8e8 60%, #cccccc 100%);
}
.axiansgradientAccent {
    background-image: linear-gradient(135deg, var(--accentcolorstart) 30%, var(--accentcolorend) 100%);
}

.btn-accent {
    color: #ebebeb;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
}

    .btn-accent:hover {
        color: #fff;
        background-image: linear-gradient(135deg, var(--accentcolorstart) 0%, var(--accentcolorend) 100%);
    border-color: var(--accentcolorend)
    }

.btn-outline-white {
    color: #fff;
    border-color: #fff
}

    .btn-outline-white:hover {
        color: #6c757d;
        background-color: #fff;
        border-color: #fff
    }
.btn-question {
    color: #fafafa;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #d9a509;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: #ffc107;
    border-color: #d9a509
}
.btn-question:hover {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #d9a509;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: #ffc107;
    border-color: #d9a509
}

.btn-outline-question {
    color: #d9a509;
    border-color: #d9a509
}

    .btn-outline-question:hover {
        color: #fff;
        background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
        --tw-gradient-from: #d9a509;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
        --tw-gradient-to: #ffc107;
        border-color: #d9a509
    }
.btn-outline-catalog {
    color: #595959;
    background-color: #fff;
    border-color: #595959;
    border-top: 4px solid var(--accentcolorend) !important;
}
    .btn-outline-catalog:hover {
        color: #fff;
        background-color: #7a5cad;
        border-top: 4px solid var(--accentcolorend) !important;
        border-color: #595959
    }

    .btn-outline-catalog.focus, .btn-outline-catalog:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
    }

    .btn-outline-catalog.disabled, .btn-outline-catalog:disabled {
        color: #595959;
        background-color: transparent
    }

    .btn-outline-catalog:not(:disabled):not(.disabled).active, .btn-outline-catalog:not(:disabled):not(.disabled):active, .show > .btn-outline-catalog.dropdown-toggle {
        color: #fff;
        background-color: #7a5cad;
        border-top: 4px solid var(--accentcolorend) !important;
        border-color: #595959
    }

        .btn-outline-catalog:not(:disabled):not(.disabled).active:focus, .btn-outline-catalog:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-catalog.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
        }

.btn-outline-filter {
    color: #6c757d;
    border-color: #6c757d
}

    .btn-outline-filter:hover {
        color: #fff;
        background-color: #ed1d25;
        border-color: #d41921
    }

    .btn-outline-filter.focus, .btn-outline-filter:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
    }

    .btn-outline-filter.disabled, .btn-outline-filter:disabled {
        color: #6c757d;
        background-color: transparent
    }

    .btn-outline-filter:not(:disabled):not(.disabled).active, .btn-outline-filter:not(:disabled):not(.disabled):active, .show > .btn-outline-filter.dropdown-toggle {
        color: #fff;
        background-color: #ed1d25;
        border-color: #d41921
    }

        .btn-outline-filter:not(:disabled):not(.disabled).active:focus, .btn-outline-filter:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-filter.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
        }

.labeldivider {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .25rem 0.9rem;
    font-size: 1rem;
    line-height: 1;
    color: #595959 !important;
    border-color: #6c757d;
    border-radius: 6px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}


.alert-accent {
    color: #ebebeb;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
}

.alert-accent hr {
    border-top-color: #9fcdff
}

.alert-accent .alert-link {
    color: var(--accentcolorend)
}

.group-accent {
    position: relative;
    padding: .6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
    color: #fafafa;
    -webkit-box-shadow: 2px 4px 6px -4px rgb(158, 158, 158);
    -moz-box-shadow: 2px 4px 6px -4px rgb(158, 158, 158);
    box-shadow: 2px 4px 6px -4px rgb(158, 158, 158);
}
.group-standard {
    position: relative;
    padding: .75rem 1.25rem;
    border: 1px solid #d0d0d0;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    color: #595959;
    margin-bottom: 0;
    background-image: linear-gradient(135deg, #f7f7f7 0%, #f7f7f7 100%);
    -webkit-box-shadow: 5px 7px 6px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 2px 6px -4px rgb(158, 158, 158);
    box-shadow: 5px 2px 6px -4px rgb(158, 158, 158);
}
.group-standard-radius {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.group-standard-bottom-radius {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.group-standard-whole-radius {
    border-radius: 6px !important;   
}
.search-left-radius {
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;

}

.page-item.active .page-link {
    z-index: 1;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
    color: #fafafa;
    border-color: var(--accentcolorstart);
}

.row-accent {
    background-image: linear-gradient(135deg, var(--accentcolorstart) 0%, var(--accentcolorend) 100%);
    background-attachment: fixed;
    color: #fff
}
.border-accent {
    border-color: var(--accentcolorstart) !important
}

.text-accent {
    color: var(--accentcolorstart) !important
}

.text-accent:focus, a.text-accent:hover {
    color: var(--accentcolorend) !important
}

.text-accent-bold {
    color: var(--accentcolorstart) !important;
    font-weight: 600;
}

.bg-accent {
    background-color: var(--accentcolorstart);
}

.topbar {
    /* background-image: linear-gradient(135deg, #e8e8e8 30%, #cccccc 100%);*/
/*    background-color: #dfdfdf;*/
}
.topbar .top-row {
    background-color: rgba(0,0,0,0.5);
}

.topbar .navbar-brand {
    font-size: 1.1rem;
}

.topbar .fa {
    width: 1.9rem;
    font-size: 1.4rem;
    vertical-align: text-top;
    top: -2px;
}

.topbar .nav-item {
    font-size: 1rem;
    font-weight: 400;
}



    .topbar .nav-item a {
        color: rgba(56,56,56,.40);
        border-radius: 4px;
        height: 2rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .topbar .nav-item a.active {
            background-color: rgba(255,255,255,0.50);
            color: #383838;
        }

        .topbar .nav-item a:hover {
            background-color: rgba(255,255,255,0.50);
            color: #383838;
            text-decoration: none
        }
	
.sidebar {
    /* background-image: linear-gradient(135deg, #e8e8e8 30%, #cccccc 100%);*/
    background-color: #dfdfdf;
    
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.5);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .fa {
        width: 1.9rem;
        font-size: 1.4rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
        font-weight: 500;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #777777;
            border-radius: 4px;
            height: 2rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.55);
                color: #383838;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.55);
                color: #383838;
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    /*background-color: rgba(255, 255, 255, 0.1);*/
    color: #383838;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/************   ERROR MELDING BLAZOR PROBLEMEN ************/

#blazor-error-ui {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

    #blazor-error-ui p {
        font-size: 18px;
        margin-top: 0px;
        margin-bottom: 24px;
    }
    #blazor-error-ui  h3 {
        font-size: 30px;
        margin-bottom: 0px;
    }
    
    #blazor-error-ui  .btn {
        font-size: 16px;
        padding: 10px 20px;
    }
    
#showerror{
    width: 400px;
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/************   ERROR MELDINGEN CONNECTIE PROBLEMEN ************/

.my-reconnect-modal > div{

}
.components-reconnect-hide > div
{
    display: none;
}

.components-reconnect-show > div
{
    display: none;
}
.components-reconnect-show > .show
{
    display: block;
}

.components-reconnect-failed > div
{
    display: none;
}
.components-reconnect-failed > .failed
{
    display: block;
}

.components-reconnect-rejected >div
{
    display: none;
}
.components-reconnect-rejected > .rejected
{
    display: block;
}

.reconnection-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.reconnection-container h3 {
    font-size: 30px;
    margin-bottom: 0px;
}

.reconnection-container p {
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 24px;
}

.reconnection-container .btn {
    font-size: 16px;
    padding: 10px 20px;
}

/************   EINDE ERROR MELDINGEN CONNECTIE PROBLEMEN ************/

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }

    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1
    }

        .card-columns .cardwithshadow {
            display: inline-block;
            width: 100%;
            margin-right: 1rem;
            margin-bottom: 1rem
        }
    
}

@media (min-width: 768px) {
    app {
        z-index: 10;
        background-color: #dfdfdf;
        flex-direction: row;
    }

    .sidebar {
        width: 225px;
        height: 100vh;
        position: static;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1
    }

        .card-columns .cardwithshadow {
            display: inline-block;
            width: 100%;
            margin-right:1rem;
            margin-bottom: 1rem
        }
    .navmenufixed {
        width: 225px;
        position: fixed !important
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1399.98px
    }
}


.portalbackground {
    background-image: url("../img/portalbackground.jpg");
    background-size: cover;
    height: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    background-position: center center;
}

.loading-container {
    position: relative;
    text-align: center;
    background-color: #fff;
    margin: 10% auto 0 auto;
    padding: 20px;
}
.img-calendar-selected {
    background-image: url("../img/selected.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 27px 27px;
    background-position-y:2px;
}
.img-calendar-todayselected {
    background-image: url("../img/selectedtoday.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 27px 27px;
    background-position-y: 2px;
}

/* thumbnail person */
.img-thumbnail-person {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    object-fit: cover;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.img-thumbnail-person-accent {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid var(--accentcolorstart);
    border-radius: .25rem;
    max-width: 100%;
    object-fit: cover;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.img-thumbnail-catalog {
    background-color: #fff;
    max-width: 100%;
    object-fit: cover;
}

.img-thumbnail-news {
    background-color: #fff;
    max-width: 100%;
    object-fit: cover;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom: 1px solid rgba(0,0,0,.125)
}

.img-thumbnail-headline {
    background-color: #fff;
    max-width: 100%;
    object-fit: cover;
    border-radius: 6px;
    margin: 0.75rem;
    border: 1px solid #d0d0d0;
}

.img-thumbnail-timeline {
    background-color: #fff;
    max-width: 100%;
    object-fit: cover;
    border-radius: 6px;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-top: 1.25rem;
}

.img-thumbnail-timeline-contain {
    background-color: #fff;
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-top: 1.25rem;
}

.img-attachments-timeline {
    position: relative;
    background-color: #fff;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.img-overlay {
    position: absolute;
    bottom: 0;
    right: 15px;
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    width: auto;
    height: auto;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    font-size: 40px;
    text-align: center;
    line-height: 60px;
    padding: 0px 15px;
}

.scrolltotop-thumbnail {
    padding: .18rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
}
/* Flip CARD */

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: 6px !important;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

/* CARDS WITH SHADOW */

.cardwithshadow {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.cardwithsmallshadow {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 6px !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.cardwithshadow .topright {
    position: absolute;
    top: 10%;
    left: 93%;
    /*padding: 6px;*/
    font-size: 20px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transform: translate(-50%,-50%);
}

.cardwithshadow .bottomright {
    position: absolute;
    top: 90%;
    left: 93%;
    /*padding: 6px;*/
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transform: translate(-50%,-50%);
}

.cardhover:hover {
    border: 1px solid rgba(119,119,119,.6);
    -webkit-box-shadow: 1px 1px 10px 0px rgb(119,119,119);
    -moz-box-shadow: 1px 1px 10px 0px rgb(119,119,119);
    box-shadow: 1px 1px 10px 0px rgb(119,119,119);
}

    .cardhover:hover .topbottomborder {
        border-top: 2px solid rgba(119,119,119,.8);
        border-bottom: 2px solid rgba(119,119,119,.8);
        
    }

.contacttopbottomborder {
    border-top: 2px solid rgba(119,119,119,.8);
    border-bottom: 2px solid rgba(119,119,119,.8);
}
.tablewithshadow {
   
   
    border-radius: 6px;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.trhover tr:hover td{
    background-color: rgba(0,0,0,.03);
}

/*   KLEUREN NOTIFICATIES */

.showmessageinfo {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba
}

.showmessageerror {
    color: #721c24;
    background-color: #fa9b9b;
    border-color: #f5c6cb
}

.showmessagesuccess {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

/*   KLEUREN BORDERS IN CARDS - STATUS KLEUREN */

.statusborderblue {
    border-left: 10px solid #3498db;
   
}
.statusbordergreen {
    border-left: 10px solid #27ae60;
   
}
.statusborderred {
    border-left: 10px solid #e74c3c;
    
}
.statusbordergray {
    border-left: 10px solid #95a5a6;
    
}
.statusborderyellow {
    border-left: 10px solid #f1c40f;
    
}
.statusborderorange {
    border-left: 10px solid #e67e22;
    
}

.statustopborderyellow {
    border-top: 4px solid #f1c40f;
}

.statustopborderblue {
    border-top: 4px solid #3498db;
}

.statustopbordergreen {
    border-top: 4px solid #27ae60;
}

.statustopbordersecondary {
    border-top: 4px solid #6c757d;
}

.statustopborderblack {
    border-top: 4px solid #2c3e50;
}

.top-border-accent {
    border-top: 6px solid var(--accentcolorend) !important;
    
}

/*   KLEUREN BORDERS IN WORKFLOW INDICATORS - STATUS KLEUREN */

.workflowstatusborderblue {
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
}

.workflowstatusborderbrown {
    background-color: #A0A0A0;
}

/*   PROFILE LETTERTYPES     */
.profile-title {
    font-size: 12px;
    color: #777777 !important;
    font-weight: 500;
    text-align: center;
}

.profile-subtitle {
    font-size: 0.7rem;
    text-align: center;
    font-weight: 600;
    color: var(--accentcolorstart) !important
}
.profile-subtitle-master {
    font-size: 0.6rem;
    text-align: center;
    font-weight: 500;
    color: #777777 !important
}
.label-edit {
    font-size: 14px;
    font-weight: 500;
    color: #777777 !important;
}
.label-homepage {
    font-size: 0.9rem;
    padding-bottom: 0.1rem;
    font-weight: 500;
}

.label-timeline {
    font-size: 0.9rem;
    color: #777777 !important;
}

/*   WORKFLOW LETTERTYPES     */
.workflow-title {
    font-size: 12px;
    color: #383838 !important;
    font-weight: 500;
}

.workflow-subtitle {
    font-size: 0.7rem;
    font-weight: 600;
    color: #777777 !important;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.headlines-title {
    font-size: 12px;
    color: #383838 !important;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

/* DIVERSEN */

.hover-hand {
    cursor: pointer;
}

.form-controlmandatory::-webkit-input-placeholder {
    color: #db5244;
    opacity: 1
}

.form-controlmandatory::-moz-placeholder {
    color: #db5244;
    opacity: 1
}

.form-controlmandatory:-ms-input-placeholder {
    color: #db5244;
    opacity: 1
}

.form-controlmandatory::-ms-input-placeholder {
    color: #db5244;
    opacity: 1
}

.form-controlmandatory::placeholder {
    color: #db5244;
    opacity: 1
}


/*   BLAZORED TOAST AANPASSINGEN  (Z-index + plaatsing ) */

.blazored-toast-container {
    z-index: 1100
}

.blazored-toast {
    border-radius: 0rem;
    border-bottom-left-radius: .25rem;
}


/*   BLAZORED MODAL AANPASSINGEN  (Z-index + Custom modal ) */

.blazored-modal-container {
    z-index: 1090;
}

.blazored-modal-overlay {
    z-index: 1091;
}

.blazored-modal-focus-trap {
    z-index: 1092;
}

.blazored-modal {
    z-index: 1093;
}

.blazored-custom-modal {
    display: flex;
    flex-direction: column;
    width: 60vw;
    height: 60vh;
    background-color: #fafafa;
    border-radius: 12px;
    border: 1px solid #fff;
    padding: 0.5rem;
    z-index: 1094;
    box-shadow: 0 2px 2px rgba(0,0,0,.75);
}

.blazored-prompt-modal {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    max-height: 95%;
    overflow-y: auto;
    background-color: #fefefe;
    border-radius: 6px;
    border: 1px solid #fff;
    z-index: 1094;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

    .blazored-prompt-modal .blazored-modal-header {
        padding: .75rem 1.25rem;
        margin-bottom: 0;
        background-color: rgba(0,0,0,.03);
        border-bottom: 1px solid rgba(0,0,0,.725)
    }
        .blazored-prompt-modal .blazored-modal-header .blazored-modal-title {
            margin-top: 0.1rem;
            font-size: 1.25rem;
            color: #595959 !important
        }

.blazored-prompt-modal-fullscreen {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 90%;
    overflow-y: auto;
    background-color: #fefefe;
    border-radius: 6px;
    border: 1px solid #fff;
    z-index: 1094;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

    .blazored-prompt-modal-fullscreen .blazored-modal-header {
        padding: .75rem 1.25rem;
        margin-bottom: 0;
        background-color: rgba(0,0,0,.03);
        border-bottom: 1px solid rgba(0,0,0,.725)
    }

        .blazored-prompt-modal-fullscreen .blazored-modal-header .blazored-modal-title {
            margin-top: 0.1rem;
            font-size: 1.25rem;
            color: #595959 !important
        }

.blazored-prompt-modal-center {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    max-height: 95%;
    overflow-y: auto;
    background-color: #e5e5e5;
    border-radius: 6px;
    border: 1px solid #fff;
    z-index: 1094;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

    .blazored-prompt-modal-center .blazored-modal-header {
        padding: .75rem 1.25rem;
        margin-bottom: 0;
        background-color: #fefefe;
        border-bottom: 1px solid rgba(0,0,0,.725)
    }

        .blazored-prompt-modal-center .blazored-modal-header .blazored-modal-title {
            margin-top: 0.1rem;
            font-size: 1.25rem;
            color: #595959 !important;
            margin-left: auto;
            margin-right: auto;
        }
.btn-smaller {
    padding: .15rem .25rem;
    font-size: .875rem;
    line-height: 1.0;
    border-radius: .2rem
}
.header-accent {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--accentcolorstart);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(var(--accentcolorrgb),0));
    --tw-gradient-to: var(--accentcolorend);
}
.header-secondary {
    color: #fff;
    background-image: linear-gradient(135deg, #6c757d 0%, #76818a 100%);
    border-color: #6c757d
}

.header-yellow {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #f1c40f;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(41, 128, 185,0));
    --tw-gradient-to: #fdd32d;
}

.header-blue {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #3498db;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(41, 128, 185,0));
    --tw-gradient-to: #3baaf5;
}

.header-green {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #27ae60;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(41, 128, 185,0));
    --tw-gradient-to: #2cc76c;
}

.header-black {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #2c3e50;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(41, 128, 185,0));
    --tw-gradient-to: #3a5169;
}
.homeblock {
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.2;
    font-size: 3rem;
}

.homeblock-small {
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.2;
    font-size: 2.5rem;
}

.homeblockaction {
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.3;
    font-size: 3.5rem;
}
.documentframeshadow {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

/* Removes "No File Chosen" in File Input Control */
input[type='file'] {
   color:transparent;
}

.separatortext {
    display: flex;
    align-items: center;
    text-align: center;
    color:#777777;
}

    .separatortext::before, .separatortext::after {
        content: '';
        flex: 1;
        border-top: 2px dashed #777777;
    }

    .separatortext::before {
        margin-right: .25em;
    }

    .separatortext::after {
        margin-left: .25em;
    }

.separatortext-double {
    display: flex;
    align-items: center;
    text-align: center;
    color: #777777;
}

    .separatortext-double::before, .separatortext-double::after {
        content: '';
        flex: 1;
        border-top: 1px solid #777777;
    }

    .separatortext-double::before {
        margin-right: .25em;
    }

    .separatortext-double::after {
        margin-left: .25em;
    }

.topbar-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 3px solid rgba(var(--accentcolorrgb),.725)
}

.text-accent-card-header {
    color: var(--accentcolorstart) !important
}
.text-card-header {
    color: #595959 !important
}
.text-orange {
    color: #e67e22 !important
}
.text-greenlight {
    color: #8fe5b3 !important
}
.text-greenlighter {
    color: #5fc489 !important
}
.text-blue {
    color: #3498db !important
}
.text-blue-light {
    color: #89C4F4 !important
}
.text-green {
    color: #2ecc71 !important
}
.text-green-light {
    color: #8fe5b3 !important
}
.text-red {
    color: #e74c3c !important
}
.text-yellow {
    color: #f1c40f !important
}
.text-purple {
    color: #9b59b6 !important
}
.text-gray {
    color: #bdc3c7 !important
}
.text-gray-light {
    color: #95A5A6 !important
}
.text-black {
    color: #2c3e50 !important
}
.text-brown {
    color: #595959 !important
}

.tabblad-inactive {
    color: #777777 !important
}
.news-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalogus-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px;
}
.catalogus-ordered {
    color: #fff;
    background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
    --tw-gradient-from: #2fc251;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(123, 41, 196,0));
    --tw-gradient-to: #228c3b;
}

.corner {
    width: 0;
    height: 0;
    border-top: 75px solid rgba(102, 33, 163,.825);
    border-bottom: 75px solid transparent;
    border-left: 75px solid transparent;
    position: absolute;
    right: 0;
}

    .corner span {
        position: absolute;
        top: 30px;
        width: 100px;
        right: 5px;
        text-align: center;
        font-size: 16px;
        font-family: arial;
        transform: rotate(45deg);
        display: block;
    }
.catalogus-topright {
    position: absolute;
    top: 18px;
    width: 55px;
    right: 0px;
    /*padding: 6px;*/
    font-size: 12px;
    font-weight: 600;
    transform: rotate(45deg);
    color: #fff;
    display: block;
}

.cornernews {
    width: 0;
    height: 0;
    border-top: 75px solid rgba(231, 76, 60,.825);
    border-bottom: 75px solid transparent;
    border-left: 75px solid transparent;
    position: absolute;
    right: 0;
}

    .cornernews span {
        position: absolute;
        top: 30px;
        width: 100px;
        right: 5px;
        text-align: center;
        font-size: 16px;
        font-family: Poppins;
        transform: rotate(45deg);
        display: block;
    }

.news-topright {
    position: absolute;
    top: 20px;
    width: 50px;
    right: 0px;
    /*padding: 6px;*/
    font-size: 13px;
    font-weight: 600;
    transform: rotate(45deg);
    color: #fff;
    display: block;
}
.cornerleft {
    width: 0;
    height: 0;
    border-top: 75px solid rgba(242, 101, 41,.825);
    border-bottom: 75px solid transparent;
    border-right: 75px solid transparent;
    position: absolute;
    left: 0;
}

    .corner span {
        position: absolute;
        top: 30px;
        width: 100px;
        left: 0px;
        text-align: center;
        font-size: 16px;
        font-family: arial;
        transform: rotate(-45deg);
        display: block;
    }
.catalogus-topleft {
    position: absolute;
    top: 5px;
    width: 55px;
    left: -5px;
    /*padding: 6px;*/
    font-size:24px;
    transform: rotate(0deg);
    color: #fff;
    display: block;
}

.cornerleft-gray {
    width: 0;
    height: 0;
    border-top: 15px solid #6c757d;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: 0;
}

.cornerright-gray {
    width: 0;
    height: 0;
    border-top: 15px solid #6c757d;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    right: 0;
}

.cornerleft-blue {
    width: 0;
    height: 0;
    border-top: 15px solid #3498db;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: 0;
}

.cornerright-blue {
    width: 0;
    height: 0;
    border-top: 15px solid #3498db;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    right: 0;
}

.cornerleft-yellow {
    width: 0;
    height: 0;
    border-top: 15px solid #f1c40f;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: 0;
}

.cornerright-yellow {
    width: 0;
    height: 0;
    border-top: 15px solid #f1c40f;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    right: 0;
}

.cornerleft-green {
    width: 0;
    height: 0;
    border-top: 15px solid #27ae60;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: 0;
}

.cornerright-green {
    width: 0;
    height: 0;
    border-top: 15px solid #27ae60;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    right: 0;
}

.cornerleft-black {
    width: 0;
    height: 0;
    border-top: 15px solid #2c3e50;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    left: 0;
}

.cornerright-black {
    width: 0;
    height: 0;
    border-top: 15px solid #2c3e50;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    right: 0;
}

.kanbandropicon {
    background-image: url( '/img/dropicon.svg' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
    
}


.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.2); /* IE */
    -moz-transform: scale(1.2); /* FF */
    -webkit-transform: scale(1.2); /* Safari and Chrome */
    -o-transform: scale(1.2); /* Opera */
    transform: scale(1.2);
    filter: hue-rotate(240deg);
}

/*   ICON IN INPUTFIELD */
.inputPasswordContainer {
    position: relative;
}

.iconPassword {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
}

/************     MUDBLAZOR ***********  */


.mud-scroll-to-top {
    padding-right: 8px;
}

@-moz-document url-prefix() {
    .scroll-locked {
        padding-right: 17px;
    }

        .scroll-locked .mud-layout .mud-appbar {
            padding-right: 17px;
        }

        .scroll-locked .mud-layout .mud-main-content .mud-scroll-to-top {
            padding-right: 17px;
        }
}

.mud-scroll-to-top {
    position: fixed;
    cursor: pointer;
    z-index: 100;
}

    .mud-scroll-to-top.visible {
        bottom: 16px;
        right: 7px;
        opacity: 1;
        transition: transform .5s;
        flex: 1;
    }

    .mud-scroll-to-top.hidden {
        bottom: 16px;
        right: 7px;
        opacity: 0;
        transition: all .5s;
        visibility: hidden;
        transform: scale(0) rotate(180deg);
        flex: 0;
    }

    .mud-scroll-to-top:after {
        content: '';
        background: transparent;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        z-index: var(--mud-zindex-tooltip);
    }

.mud-skeleton {
    height: 1.2em;
    display: block;
    background-color: rgba(0,0,0,.11);
}

.mud-skeleton-text {
    height: auto;
    transform: scale(1,.6);
    margin-top: 0;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0;
    transform-origin: 0 60%;
}

    .mud-skeleton-text:empty:before {
        content: " ";
    }

.mud-skeleton-circle {
    border-radius: 50%;
}

.mud-skeleton-pulse {
    animation: mud-skeleton-keyframes-pulse 1.5s ease-in-out .5s infinite;
}

.mud-skeleton-wave {
    overflow: hidden;
    position: relative;
}

    .mud-skeleton-wave::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: absolute;
        animation: mud-skeleton-keyframes-wave 1.6s linear .5s infinite;
        transform: translateX(-100%);
        background: linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent);
    }

@-webkit-keyframes mud-skeleton-keyframes-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes mud-skeleton-keyframes-wave {
    0% {
        transform: translateX(-100%);
    }

    60% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.mud-skeleton {
    height: 1.2em;
    display: block;
    background-color: rgba(0,0,0,.06);
}

.mud-skeleton-text {
    height: auto;
    transform: scale(1,.6);
    margin-top: 0;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0;
    transform-origin: 0 60%;
}

    .mud-skeleton-text:empty:before {
        content: " ";
    }

.mud-skeleton-circle {
    border-radius: 50%;
}

.mud-skeleton-pulse {
    animation: mud-skeleton-keyframes-pulse 1.0s ease-in-out .5s infinite;
}

.mud-skeleton-wave {
    overflow: hidden;
    position: relative;
}

    .mud-skeleton-wave::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: absolute;
        animation: mud-skeleton-keyframes-wave 1.0s linear .5s infinite;
        transform: translateX(-100%);
        background: linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);
    }

.mud-avatar {
    display: flex;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    border-radius: 50%;
    justify-content: center;
    color: white;
    background-image: linear-gradient(135deg, #6c757d 0%, #76818a 100%);
}

    .mud-avatar.mud-avatar-small {
        width: 26px;
        height: 26px;
        font-size: .675rem;
        font-weight: 500;
    }

    .mud-avatar.mud-avatar-medium {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .mud-avatar.mud-avatar-large {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

.mud-avatar-rounded {
    border-radius: var(--mud-default-borderradius);
}

.mud-avatar-square {
    border-radius: 0;
}

.mud-avatar-img {
    color: transparent;
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
    text-indent: 10000px;
}

.mud-avatar-fallback {
    width: 75%;
    height: 75%;
}

.mud-badge-root {
    position: relative;
    display: inline-block;
}

    .mud-badge-root .mud-badge-wrapper {
        top: 0;
        left: 0;
        flex: 0 1;
        width: 100%;
        height: 100%;
        display: flex;
        pointer-events: none;
        position: absolute;
    }

        .mud-badge-root .mud-badge-wrapper.mud-badge-top {
            align-items: flex-start;
        }

            .mud-badge-root .mud-badge-wrapper.mud-badge-top.left {
                justify-content: flex-start;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-top.center {
                justify-content: center;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-top.right {
                justify-content: flex-end;
            }

        .mud-badge-root .mud-badge-wrapper.mud-badge-center {
            align-items: center;
        }

            .mud-badge-root .mud-badge-wrapper.mud-badge-center.left {
                justify-content: flex-start;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-center.center {
                justify-content: center;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-center.right {
                justify-content: flex-end;
            }

        .mud-badge-root .mud-badge-wrapper.mud-badge-bottom {
            align-items: flex-end;
        }

            .mud-badge-root .mud-badge-wrapper.mud-badge-bottom.left {
                justify-content: flex-start;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-bottom.center {
                justify-content: center;
            }

            .mud-badge-root .mud-badge-wrapper.mud-badge-bottom.right {
                justify-content: flex-end;
            }

.mud-badge {
    border-radius: 13px;
    font-size: 15px;
    height: 25px;
    letter-spacing: 0;
    min-width: 25px;
    padding: 4px 6px;
    pointer-events: auto;
    line-height: 1;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: auto;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    white-space: nowrap;
    
    
}

    .mud-badge.mud-badge-default {
        color:white;
        background-image: linear-gradient(135deg, #e74c3c 0%, #e74c3c 100%);
    }

    .mud-badge.mud-badge-bordered {
        border-color: var(--mud-palette-surface);
        border-style: solid;
        border-width: 2px;
        padding: 3px 4px;
    }

        .mud-badge.mud-badge-bordered.mud-badge-icon {
            padding: 4px 6px;
        }

            .mud-badge.mud-badge-bordered.mud-badge-icon .mud-icon-badge {
                margin-left: -4px;
                margin-inline-start: -4px;
                margin-inline-end: unset;
                margin-top: -4px;
            }

    .mud-badge.mud-badge-icon {
        width: 20px;
        height: 20px;
    }

        .mud-badge.mud-badge-icon .mud-icon-badge {
            color: inherit;
            font-size: 12px;
            margin-left: -2px;
            margin-inline-start: -2px;
            margin-inline-end: unset;
        }

    .mud-badge.mud-badge-dot {
        border-radius: 50%;
        height: 9px;
        min-width: 0;
        padding: 0;
        width: 9px;
    }

    .mud-badge.mud-badge-top.left {
        inset: auto calc(100% - 4px) calc(100% - 4px) auto;
    }

        .mud-badge.mud-badge-top.left.mud-badge-overlap {
            inset: auto calc(100% - 12px) calc(100% - 12px) auto;
        }

    .mud-badge.mud-badge-top.center {
        bottom: calc(100% - 4px);
    }

        .mud-badge.mud-badge-top.center.mud-badge-overlap {
            bottom: calc(100% - 12px);
        }

    .mud-badge.mud-badge-top.right {
        inset: auto auto calc(100% - 4px) calc(100% - 4px);
    }

        .mud-badge.mud-badge-top.right.mud-badge-overlap {
            inset: auto auto calc(100% - 12px) calc(100% - 12px);
        }

    .mud-badge.mud-badge-center.left {
        right: calc(100% - 4px);
    }

        .mud-badge.mud-badge-center.left.mud-badge-overlap {
            right: calc(100% - 12px);
        }

    .mud-badge.mud-badge-center.right {
        left: calc(100% - 4px);
    }

        .mud-badge.mud-badge-center.right.mud-badge-overlap {
            left: calc(100% - 12px);
        }

    .mud-badge.mud-badge-bottom.left {
        inset: calc(100% - 4px) calc(100% - 4px) auto auto;
    }

        .mud-badge.mud-badge-bottom.left.mud-badge-overlap {
            inset: calc(100% - 12px) calc(100% - 12px) auto auto;
        }

    .mud-badge.mud-badge-bottom.center {
        top: calc(100% - 4px);
    }

        .mud-badge.mud-badge-bottom.center.mud-badge-overlap {
            top: calc(100% - 12px);
        }

    .mud-badge.mud-badge-bottom.right {
        inset: calc(100% - 4px) auto auto calc(100% - 4px);
    }

        .mud-badge.mud-badge-bottom.right.mud-badge-overlap {
            inset: calc(100% - 12px) auto auto calc(100% - 12px);
        }

/***********   EINDE MUDBLAZOR ************/

.cell-truncate > div {
    position: relative;
    overflow: hidden;
    height: 1.5em;
}


    /* visible content */
    .cell-truncate > div > span {
        display: block;
        position: absolute;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5em; /* for vertical align of text */
    }


    /* cell stretching content */
    .cell-truncate > div:after {
        content: attr(title);
        overflow: hidden;
        height: 0;
        display: block;
    }

/************     KLEUREN DATERANGE PICKER ************/

.daterangepicker .ranges li.active {
    background-color: var(--accentcolorend);
    color: #fff;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--accentcolorend);
    border-color: transparent;
    color: #fff;
}

.daterangepickertitle {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: white;
    font-weight: 600;
    text-align: center;
    background-color: var(--accentcolorend);
}


/************   LOADING SPINNER ************/

.spinner-wave {
    margin: 10px auto;
    width: 100px;
    height: 50px;
    text-align: center;
}

    .spinner-wave > div {
        background-color: #595959;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: wave 1.6s infinite ease-in-out;
        -moz-animation: wave 1.6s infinite ease-in-out;
        -o-animation: wave 1.6s infinite ease-in-out;
        -ms-animation: wave 1.6s infinite ease-in-out;
        animation: wave 1.6s infinite ease-in-out;
    }

    .spinner-wave div:nth-child(2) {
        -webkit-animation-delay: -1.4s;
        -moz-animation-delay: -1.4s;
        -ms-animation-delay: -1.4s;
        -o-animation-delay: -1.4s;
        animation-delay: -1.4s;
    }

    .spinner-wave div:nth-child(3) {
        -webkit-animation-delay: -1.2s;
        -moz-animation-delay: -1.2s;
        -ms-animation-delay: -1.2s;
        -o-animation-delay: -1.2s;
        animation-delay: -1.2s;
    }

    .spinner-wave div:nth-child(4) {
        -webkit-animation-delay: -1.0s;
        -moz-animation-delay: -1.0s;
        -ms-animation-delay: -1.0s;
        -o-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner-wave div:nth-child(5) {
        -webkit-animation-delay: -0.8s;
        -moz-animation-delay: -0.8s;
        -ms-animation-delay: -0.8s;
        -o-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes wave {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@-moz-keyframes wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
    }
}

@-o-keyframes wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
    }
}

@-ms-keyframes wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
    }
}

@keyframes wave {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
    }
}

/* END LOADING SPINNER */

/************   MULTI SELECT AXIANS DROPDOWN ************/
.axians-overlay-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

div[id^="dropdown-list"] {
    border: 1px #dadada solid;
    /*    position: absolute;*/
    /*    z-index: 1000;*/
    /*    -webkit-transform: translate3d(0, 0, 0);*/
    top: 100%;
    width: 100%;
    background-color: #ffffff;
}

    div[id^="dropdown-list"] label {
        display: flex;
        margin: 10px;
    }

    div[id^="dropdown-list"] input {
        margin-right: 10px;
        filter: none; /* Remove if default hue color needs to be used. */
    }

/* EINDE MULTI SELECT AXIANS DROPDOWN */

/************   Uploaden bestanden ************/

.uploadicon {
    background-image: url( '/img/dropicon.svg' );
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 80px 80px;
    height: 130px;
    text-align: center;
}

    .uploadicon:hover {
        background-color: #f5f5f5;
    }

    .uploadicon input[type=file] {
        position: relative;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* Uploaden bestanden */