/*@import url('https://kendo.cdn.telerik.com/themes/8.0.1/bootstrap/bootstrap-main.css');*/
:root {
    --bs-primary: #085679;
    --bs-secondary: #0099CE;
    --bs-success: #9EC547;
    --bs-dark: #262626;
    --bs-gray-100: #F2F4F8;
    --bs-gray-200: #E4E7EB;
    --bs-burgundy: #831615;
    --bs-pink: #FCD3D2;
    --bs-green: #5E6919;
    --bs-greenlight: #E6EED1;
    --bs-blue: #C1DEFF;
    --bs-orange: #FFA630;
    --bs-gradientblue: linear-gradient(to bottom, #0099ce 0%,#ffffff 100%);
    --bs-gradientgreen: linear-gradient(to bottom, #e6eed1 0%,#ffffff 100%);
    --bs-gradientred: linear-gradient(to bottom, #FCD3D2 0%,#ffffff 100%);
}

* {
    -webkit-overflow-scrolling: touch;
}

html {
    font-family: sans-serif;
    text-size-adjust: 100%;
    font-size: 10px;
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: 400 1.6rem/1.2 "Titillium Web", sans-serif;
    background-color: var(--bs-gray-100);
    height: 100%;
    color: var(--bs-dark);
    overflow-x:hidden;
}

button {
    border: 0;
    padding: 0;
    background-color: transparent;
}

.btn-blue {
    background-color: var(--bs-primary);
    color: #ffffff;
}

.btn-pink {
    background-color: var(--bs-pink);
    color: var(--bs-burgundy);
}

.btn-minw-182 {
    min-width: 18.2rem;
}

h1 {
    font: 700 7.2rem/1 "Titillium Web", sans-serif;
}

h2 {
    font: 700 6rem/1 "Titillium Web", sans-serif;
}

h3 {
    font: 700 4.2rem/1 "Titillium Web", sans-serif;
    margin: 0 0 2.2rem;
}

h4 {
    font: 600 2.2rem/1 "Titillium Web", sans-serif;
}

h5 {
    font: 700 2rem/1 "Titillium Web", sans-serif;
}

h6 {
    font: 600 1.8rem/1 "Titillium Web", sans-serif;
}

.mb-16 {
    margin-bottom: 1.6rem;
}

.mb-24px {
    margin-bottom: 2.4rem;
}

.mb-40 {
    margin-bottom: 4rem;
}

.mb-50 {
    margin-bottom: 5rem;
}

.mb-70 {
    margin-bottom: 7rem;
}

.px-45px {
    padding-inline: 4.5rem;
}

.py-45px {
    padding-inline: 4.5rem;
}

.gap-20 {
    gap: 2rem;
}

.border-gray {
    border-color: var(--bs-gray-100) !important;
}

.bg-gray {
    background: var(--bs-gray-100) !important;
}

.radius-4px {
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.radius-8px {
    -webkit-border-radius: 0.8rem;
    border-radius: 0.8rem;
}

.grphtitlestyle {
    font-size: 15px;
    font-weight: normal;
}

.wh-48px {
    width: 4.8rem;
    height: 4.8rem;
    min-width: 4.8rem;
    min-height: 4.8rem;
}

.wh-16px {
    width: 16px;
    height: 16px;
}

    .wh-16px .svg-inline {
        width: 100%;
        height: auto;
    }

.wh-20px {
    width: 2rem;
    height: 2rem;
}

.px-8px {
    padding-inline: 8px;
}

.gap-40 {
    row-gap: 1.5rem;
}

/*.gap-24px {
    gap: 1.4rem;
}*/

.h-28px {
    height: 28px;
}

.me-4px {
    margin-right: 4px;
}

.h-135px {
    height: 13.5rem;
}

.fw-semibold {
    font-weight: 600 !important;
}

.text-green {
    color: var(--bs-green) !important;
}

.bg-greenlight {
    background-color: var(--bs-greenlight) !important;
}

.text-danger {
    color: var(--bs-burgundy) !important;
}

.bg-dangerlight {
    background-color: var(--bs-pink) !important;
}

.bg-gradient-danger {
    background: var(--bs-gradientred);
}

.bg-gradient-sucess {
    background: var(--bs-gradientgreen);
}

.row-gap-5 {
    row-gap: 3rem;
}

.row-gap-1 {
    row-gap: 1rem;
}

.w-27p5 {
    width: 27.5%;
}

.w-55 {
    width: 55%;
}

.w-27p5 {
    width: 27.5%;
}

.w-55 {
    width: 55%;
}

.row-gap-20 {
    row-gap: 2rem;
}

@media only screen and (min-width: 1700px) {
    .row.rowThree {
        margin-top: 0.7rem;
    }

    .row.rowThree,
    .row {
        --bs-gutter-x: 2rem;
        margin-inline: calc(var(--bs-gutter-x) * -1);
    }

        .row.rowThree > *,
        .row > * {
            padding-inline: calc(var(--bs-gutter-x) * 1);
        }

        .row.rowThree,
        .gap-40 {
            row-gap: 4rem;
        }

    .me-xxxl-5 {
        margin-right: 3rem !important;
    }
}


.row-30px {
    --bs-gutter-x: 1.5rem;
    margin-inline: calc(var(--bs-gutter-x) * -1);
}

    .row-30px > * {
        padding-inline: calc(var(--bs-gutter-x) * 1);
    }

.row-gap-30px {
    row-gap: 3rem;
}

.row-10px {
    --bs-gutter-x: 1rem;
    margin-inline: calc(var(--bs-gutter-x) * -1);
}

    .row-10px > * {
        padding-inline: calc(var(--bs-gutter-x) * 1);
    }

.grid-column-4 {
    grid-template-columns: repeat(auto-fit, minmax(40.8rem, 1fr));
}

.grid-column-3 {
    grid-template-columns: repeat(auto-fit, minmax(50rem, 3fr));
}

img {
    max-width: 100%;
}

.status {
    -webkit-border-radius: 0.4rem !important;
    border-radius: 0.4rem !important;
    display: inline-block !important;
    padding: 0.65rem 0.8rem !important;
    /*margin-top: 14px;*/
    overflow: hidden;
    white-space: break-spaces;
    text-overflow: ellipsis;
    max-width: 100%;
}

.Clr_Green {
    background-color: var(--bs-greenlight);
    color: var(--bs-green);
}

.Clr_ESC {
    background-color: green;
    color: white;
}

.Clr_MR {
    background-color: var(--bs-greenlight);
    color: var(--bs-burgundy);
}

Clr_Green_Forest {
    background-color: burlywood;
    color: var(--bs-burgundy);
}

.Clr_Blue {
    background-color: var(--bs-blue);
    color: var(--bs-dark);
}

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

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

.Clr_Yellow {
    background-color: var(--bs-yellow);
    color: var(--bs-burgundy);
}

.Clr_LightBlue {
    background-color: lightblue;
    color: gray;
}

.Clr_BlueAqua {
    background-color: deepskyblue;
    color: var(--bs-burgundy);
}

.Clr_Orange {
    background-color: var(--bs-orange);
    color: var(--bs-burgundy);
}

.Clr_Black {
    background-color: black;
    color: white;
}

.Clr_Gray {
    background-color: gray;
    color: var(--bs-gray-100);
}

.Clr_LightGray {
    background-color: lightgray;
    color: var(--bs-gray-100);
}

.Clr_Violet {
    background-color: rgba(140, 140, 255, 255);
    color: var(--bs-burgundy);
}

.Clr_LightSalmon {
    background-color: lightsalmon;
    color: var(--bs-burgundy);
}

.Clr_LightYellow {
    background-color: lightyellow;
    color: var(--bs-burgundy);
}

.FontClr_Black {
    color: black;
}
.FontClr_White {
    color: white;
}

.status-dark-green {
    background-color: green;
    color: white;
}

.card {
    background-color: #ffffff;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    box-shadow: 0 2rem 4.5rem rgba(0,0,0,0.05);
    border: 0;
    padding: 1rem;
}

    .card > img {
        max-height: 100%;
    }

.required::after {
    content: '*';
    color: #BCCF1B;
}

.card-header {
    background-color: transparent;
    padding: 0;
    border: 0;
}

.card-body {
    padding: 3rem 0 0;
}

.card-body-reports {
    padding: 0 0 0;
}

.cardSmall {
    padding-top: 2rem;
    padding-bottom: 2rem;
    min-height: 100%;
}

.btn {
    -webkit-border-radius: 0.6rem;
    border-radius: 0.6rem;
    font: 700 1.6rem/2 "Titillium Web", sans-serif;
    padding: 0 1.5rem;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-large {
    font-size: 2rem;
    line-height: 3.2;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
}

.btn-primary {
    background-color: var(--bs-secondary);
    color: #ffffff;
}

/* all */
.form-control::-webkit-input-placeholder {
    color: #B1B1B1;
}

.form-control::-moz-placeholder {
    color: #B1B1B1;
}
/* firefox 19+ */
.form-control:-ms-input-placeholder {
    color: #B1B1B1;
}
/* ie */
.form-control:-moz-placeholder {
    color: #B1B1B1;
}

/* Login start */
.loginWrapper {
    display: flex;
    width: 100%;
    min-height: 100%;
    padding: 4rem;
}

.loginLogo img {
    width: 39.1rem;
    height: auto;
    display: block;
    margin: 0 auto 8rem;
}

.loginLeft {
    max-width: 70.4rem;
    /*    margin: 0 8rem 0 4rem;*/
    width: 100vw;
}

    .loginLeft .card {
        padding: 7rem 10.2rem 8rem;
    }

    .loginLeft .form-label {
        color: var(--bs-dark);
        font-weight: 700;
        font-size: 2.2rem;
        line-height: 1.1;
        margin-bottom: 1rem;
    }

.forgotLink {
    color: var(--bs-secondary);
    font-weight: 600;
    text-decoration: none;
}

.loginLeft .form-control {
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    height: 6.4rem;
    padding: 0 2.4rem;
    font-size: 2rem;
    color: var(--bs-dark);
}

.form-check {
    padding-left: 2.4rem;
    min-height: 2.4rem;
}

.form-check-input {
    width: 2.4rem;
    height: 2.4rem;
    border-color: var(--bs-primary);
    padding: 0;
}

.form-check span {
    /*padding: 0.2rem 0 0 1.6rem;*/
    padding: 0.2rem 0 0 1rem;
    color: #000000;
    line-height: 1.25;
    font-family: "Source Sans 3", sans-serif;
}

.form-check .form-check-input {
    margin: 0 0 0 -2.4rem;
    padding: 0
}

.form-check .form-check-label {
    margin: 0 0 0 1rem;
    padding: 0
}

label + * + .form-check-input,
label + .form-check-input {
    margin-top: 0
}

.form-check-input {
    padding-left: 2rem;
}

.form-check-small {
    min-height: 2rem;
    padding-left: 2rem;
}

    .form-check-small .form-check-input {
        min-width: 2rem;
        min-height: 2rem;
        width: 2rem;
        height: 2rem;
        margin-left: -2rem;
    }

    .form-check-small span {
        padding-left: 0.6rem;
        padding-top: 0;
    }

.min-h-1px {
    min-height: 1px !important;
}

.form-check-extra-small {
    padding-left: 1.6rem;
    padding-right: 2rem;
    min-height: 1.6rem;
}

    .form-check-extra-small span {
        padding: 0.1rem 0 0 0.6rem;
    }

.min-w-160px {
    min-width: 160px;
}

.min-w-170px {
    min-width: 170px;
}

.min-w-210px {
    min-width: 21rem;
}

.overflow-y-auto {
    overflow-y: auto
}

.max-h-200px {
    max-height: 20rem
}

.min-h-300px {
    min-height: 30rem;
}

.form-check-extra-small .form-check-input {
    min-width: 1.6rem;
    min-height: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: -1.6rem;
}

.loginRight {
    background: url(../images/login-banner.jpg) no-repeat center center / cover;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 82.4rem);
    padding: 2rem;
}

    .loginRight h1 {
        margin-bottom: 16rem;
    }

    .loginRight > div {
        max-width: 85rem;
        text-align: center;
        color: #ffffff;
    }

    .loginRight img {
        max-width: 100%;
        height: auto;
    }
/* Login end */


/* Sidebar start */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 17.2rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 4rem 0 2rem 2rem;
    z-index: 11;
}

.sideLogo {
    display: flex;
    gap: 1rem;
    position: relative;
}

    .sideLogo a {
        text-decoration: none;
    }

.app-sidebar .sideLogo {
    margin: 0 0 9rem;
    white-space: nowrap;
}

.logo-shape {
    width: 3rem;
    height: auto;
}

.logo-text {
    min-width: 9.7rem;
    height: auto;
    max-width: 9.7rem;
}

.toggleSidebar {
    width: 3rem;
    height: 3rem;
    background-color: #ffffff;
    position: absolute;
    bottom: 7rem;
    left: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}

    .toggleSidebar::after {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.2rem;
        height: 0.8rem;
        -webkit-mask: url(../images/down-arrow.svg) no-repeat center center / cover;
        mask: url(../images/down-arrow.svg) no-repeat center center / cover;
        content: '';
        background-color: var(--bs-dark);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: 300ms transform;
        transition: 300ms transform;
    }

.menuUl {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    overflow-y: hidden;
    overflow-x: hidden;
    min-height: 40px;
}

    .menuUl a {
        color: var(--bs-primary);
        display: flex;
        align-items: center;
        text-decoration: none;
        opacity: 1;
        gap: 1.4rem;
        padding: 0.7rem 0 0.7rem 0.6rem;
        transition: 300ms all;
    }

        .menuUl a > i {
            min-width: 1.8rem;
            min-height: 1.6rem;
            text-align: center;
        }

        .menuUl a .svg-inline {
            width: auto;
            height: auto;
        }

        .menuUl a.acive {
            opacity: 1;
            font-weight: 700;
            color: var(--bs-secondary);
            position: relative;
        }

            .menuUl a.acive::after {
                position: absolute;
                content: '';
                width: 3.8rem;
                height: 5.3rem;
                background: url(../images/menu-active-arrow.svg) no-repeat center center / cover;
                right: -1.1rem;
            }

            .menuUl a.acive svg {
                width: 1.8rem;
            }

body:not(.sideClose) .menuUl a.acive svg path {
    stroke-width: 2px;
}

.menuUl a > span {
    padding-top: 0.2rem;
    font-size: 14px;
    line-height: 1.71;
    white-space: nowrap;
}

.menuUlBottom {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    overflow-y: hidden;
    overflow-x: hidden;
    min-height: 40px;
    position: absolute;
    bottom: 2.5rem;
    color: var(--bs-primary);
    background-color: white;
    opacity: 1;
    font-size: 14px;
}

    .menuUlBottom li {
        display: flex;
        align-items: end;
        padding: 0 0 0 0.7rem;
    }

        .menuUlBottom li span {
            display: flex;
            gap: 1.4rem;
            align-items: center;
            padding: 0.7rem 2.5rem 0.7rem 0rem;
        }

        .menuUlBottom li:hover span {
            color: var(--bs-secondary);
        }

        /* Uitklapmenu (Plannen, Help): een kaart naast het menu-item. Zonder top/bottom krijgt het vaste menu zijn
           statische plek in de flex-li (align-items: end), dus de onderkant valt gelijk met het item en het menu groeit
           omhoog. Daarom geen vaste hoogte: die liet een derde regel (Help > Release notes) buiten de kaart vallen. */
        .menuUlBottom li ul {
            list-style: none;
            display: none;
            margin: 0 0 0 10.5rem;
            padding: 0.6rem;
            min-width: 20rem;
            position: fixed;
            background-color: white;
            border: 1px solid var(--bs-gray-200);
            border-radius: 0.8rem;
            box-shadow: 0 0.8rem 2.4rem rgba(0, 32, 64, 0.14);
        }

        .menuUlBottom li:hover ul {
            display: block;
            z-index: 10;
        }

        .menuUlBottom li ul li {
            padding: 0;
        }

            .menuUlBottom li ul li a {
                display: block;
                flex: 1 1 auto;
                padding: 0.7rem 1.2rem;
                border-radius: 0.6rem;
                color: var(--bs-primary);
                line-height: 1.5;
                text-decoration: none;
                white-space: nowrap;
                transition: background-color 150ms, color 150ms;
            }

            .menuUlBottom li ul li a:hover,
            .menuUlBottom li ul li a:focus-visible {
                background-color: var(--bs-gray-100);
                color: var(--bs-secondary);
            }
    .menuUlBottom li span.acive {
        opacity: 1;
        font-weight: 700;
        color: var(--bs-secondary);
        position: relative;
    }
/* Sidebar end */

/* Right side css start */
.wrapper {
    padding: 0 0 0 17.2rem;
}

.app-container {
    padding: 0 2rem;
    flex: 1 1 auto !important;
}

.menuButton {
    width: 4rem;
    color: var(--bs-dark);
    margin-left: 2rem;
}

    .menuButton .svg-inline {
        width: 100%;
        height: auto;
        pointer-events: none;
    }

.app-header {
    position: sticky;
    top: 0;
    /*padding: 1.6rem 0;*/
    background-color: var(--bs-gray-100);
    z-index: 2;
}

.stickyHeader .app-header {
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.15);
}

.notification {
    position: relative;
    margin: 0 4.6rem 0 0;
}

    .notification .svg-inline {
        max-height: 100%;
        max-width: 100%;
    }

.badge {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 0 0.5rem;
    min-width: 1.8rem;
    text-align: center;
    margin: 0;
}

.badge-danger {
    background-color: #E03E3D;
    color: #ffffff;
}

.notification .badge {
    position: absolute;
    top: 0;
    -webkit-transform: translate(0.5rem,-0.8rem);
    transform: translate(0.5rem,-0.8rem);
}

.userMenu > button {
    gap: 1.2rem;
    background: url(../images/down-arrow.svg) no-repeat right center / 1.2rem auto;
    padding-right: 2.2rem;
}

.app-content {
    padding: 0rem 0 0;
    flex: 1 1 auto !important;
}

.form-select-trans {
    border: 0;
    appearance: none;
    background: url(../images/down-arrow.svg) no-repeat right center / 1.2rem auto;
    padding: 0 2.2rem 0 1rem;
    border-radius: 0 !important;
    outline: none !important;
}

.text-end.form-select-trans option {
    text-align: left;
}

div.apexcharts-legend {
    padding: 0;
}

    div.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left,
    div.apexcharts-legend.apx-legend-position-top.apexcharts-align-left,
    div.apexcharts-legend.apx-legend-position-right,
    div.apexcharts-legend.apx-legend-position-left {
        right: 0 !important;
        align-items: end;
    }

div.apexcharts-legend-series {
    min-width: 16rem;
    margin: 0 0 2.5rem !important
}

span.apexcharts-legend-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 0 0 0.8rem;
}

    span.apexcharts-legend-text * {
        font: inherit;
    }

.apexcharts-datalabels-group text {
    font-size: 4.2rem !important;
    fill: #0099CE !important;
    font-weight: 700 !important;
    font-family: "Titillium Web", sans-serif !important;
}

.pt-18px {
    padding-top: 1.8rem;
}

body .k-grid .k-grid-header .k-table-th,
.k-grid .k-grid-md td,
.k-grid .k-grid-md .k-table-td,
.k-grid-md td,
.k-grid-md .k-table-td,
.table > :not(caption) > * > * {
    line-height: 1.2; /*HtB HEADER-HEIGHT ?!? : 1.5*/
    font-size: 1.4rem; /*1.6rem;*/
    padding: 0.2rem 0.8rem; /* 1.2rem 0.8rem; */
    border: 1;
    /*border-bottom: 1px;*/
}

body .k-grid .k-grid-header .k-table-th,
.table > thead > tr > th {
    line-height: 1.2;             /*HtB ROW-HEIGHT ?!? : 1.5*/
    color: var(--bs-primary);
    font-weight: 600 !important;
    font-size: 1.4rem;           /*1.6rem;*/
    border: 1;
    background-color: #ffffff;
    border-bottom: 2px solid var(--bs-gray-100) !important;

}

.customgrid .k-grid-content-locked tbody tr  {
    height:33px;
}


.customgrid .k-grid-content tr {
    background-color: #ffffff; /* white */
}

    .customgrid .k-grid-content tr.k-alt {
        background-color: #f5f5f5; /* light gray */
    }

    .customgrid .k-grid-content tr:hover {
        background-color: #e0f2fe !important; /* light blue */
    }

.customgrid .k-grid-content-locked tr {
    background-color: #ffffff; /* white */
}

    .customgrid .k-grid-content-locked tr.k-table-alt-row {
        background-color: #f5f5f5; /* light gray */
    }

    
.k-table-thead > tr.k-table-row > th:first-child,
.k-table-tbody > tr.k-table-row > td:first-child,
.commonTable .k-grid .k-table-tbody .k-table-td:first-child,
.commonTable .k-grid .k-grid-header .k-table-th:first-child {
    padding-inline-start: 3rem;
}

.table > tbody > tr > td {
    color: var(--bs-dark);
    border-bottom-color: var(--bs-gray-100);
}

.customgrid > table {
    line-height: 1.5;
    padding: 1.2rem 0.8rem;
}

    .customgrid > table > thead > tr > th {
        color: var(--bs-primary);
        font-weight: 600 !important;
        border-bottom: 2px solid var(--bs-gray-100) !important;
    }

    .customgrid > table > tbody > tr > td {
        color: var(--bs-dark);
        border-bottom-color: var(--bs-gray-100);
    }

.wrapTxt td span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 3.625vw;
    display: inline-block;
}

.areaChart.card .card-body {
    margin-left: -3rem;
}

    .areaChart.card .card-body .areaValue {
        padding-left: 3rem;
    }

.areaChart .areaChartmain {
    margin-left: 1.5rem;
}


div .apexcharts-xaxistooltip,
div .apexcharts-yaxistooltip {
    border-color: #262626;
    color: #262626;
    -webkit-border-radius: 0.3rem;
    border-radius: 0.3rem;
    font-size: 1.6rem;
    line-height: 1.5;
    background-color: #ffffff;
}

div .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: #262626;
}

div .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: #ffffff;
}

.apexcharts-xaxistooltip-text {
    font-family: "Titillium Web", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important; /* Change color as needed */
}

.app-sidebar {
    -webkit-transition: 500ms width ease-in-out, 500ms transform ease-in-out;
    transition: 500ms width ease-in-out, 500ms transform ease-in-out;
}

.wrapper {
    -webkit-transition: 500ms padding ease-in-out;
    transition: 500ms padding ease-in-out;
}

.logo-text,
.menuUl a > span {
    -webkit-transition: 500ms opacity;
    transition: 500ms opacity;
}

.logo-text {
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
}


.app-navbar-item {
    position: relative;
}

.menu {
    position: absolute;
    top: 100%;
    padding: 1.3rem 0;
    right: 0;
    border-radius: 0.475rem;
    background-color: #ffffff;
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    z-index: 107;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    -webkit-transition: 300ms opacity, 300ms transform;
    transition: 300ms opacity, 300ms transform;
    min-width: 20rem;
}

    .menu[data-direction="left"]{
        left:0;
        right:auto;
    }

    .dropdown-menu {
        font-size: 14px;
    }

    .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem;
    }

.menu[data-direction="lefttop"] {
    right: 100%;
    top: 0;
}

.menuTop {
    top: auto;
    bottom: 100%;
}

.fs-14px {
    font-size: 14px;
}

.w-350px {
    width: 35rem;
}

.w-275px {
    width: 27.5rem;
}

.separator {
    display: block;
    height: 0;
    border-bottom: 1px solid #F1F1F4;
}

.menu-item {
    position: relative;
}

    .menu-item .subMenu {
        right: auto;
        left: calc(100% - 1rem);
        top: 0;
    }

        .menu-item .subMenu[data-direction="left"] {
            right: calc(100% - 1rem);
            left: auto;
        }

        .menu-item .subMenu[data-direction="leftbottom"] {
            right: calc(100% - 1rem);
            left: auto;
            top: auto;
            bottom: 100%;
        }

        .menu-item .subMenu[data-direction="bottom"] {
            top: 100%;
            bottom: auto;
            left: auto;
            right: 0;
        }


    .menu-item .menu-link {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0;
        flex: 0 0 100%;
        padding: 1.11rem 1.6rem;
        border-radius: 0.475rem;
        color: var(--bs-dark);
        transition: none;
        outline: none !important;
        text-decoration: none;
        -webkit-transition: 300ms all;
        transition: 300ms all;
    }

.openMenu .menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.app-main {
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    min-height: 100vh;
}

.backLink {
    border-right: 1px solid var(--bs-primary);
    padding-right: 1.0rem;
}

.form-control,
.form-control-common {
    border: 1px solid var(--bs-primary);
    background-color: #ffffff;
    height: 3.8rem;
    padding: 0 1.2rem;
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
    width: 100%;
    font-size: 1.6rem
}

    .circleBtn[disabled],
    .form-control-common[readonly="readonly"] {
        background-color: #dfdfdf;
        border-color: #dfdfdf !important;
        cursor: not-allowed;
    }

textarea.form-control-common {
    padding: 1.2rem;
    height: 20rem;
}

textarea.form-control-small {
    padding: 0.5rem;
    height: 10rem;
    margin: 0;
    box-sizing: content-box;
}

.form-control-common::-webkit-input-placeholder {
    color: #262626;
    opacity: 0.5;
}

.form-control-common::-moz-placeholder {
    color: #262626;
    opacity: 0.5;
}
/* firefox 19+ */
.form-control-common:-ms-input-placeholder {
    color: #262626;
    opacity: 0.5;
}
/* ie */
.form-control-common:-moz-placeholder {
    color: #262626;
    opacity: 0.5;
}

.w-315px {
    width: 31.5rem;
}

.searchBox {
    position: relative;
}

    .searchBox button {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1.5rem;
        color: var(--bs-primary);
    }

        .searchBox button .svg-inline {
            max-height: 1.8rem;
            width: auto;
        }

    .searchBox .form-control-common {
        padding-right: 4rem;
    }

.row-gap-20px {
    row-gap: 1rem;
}

.px-30px {
    padding-inline: 0rem;
}

.tabLinks .active {
    font-weight: 700;
    position: relative;
}

    .tabLinks .active::after {
        position: absolute;
        inset: auto 0 0;
        height: 2px;
        background-color: var(--bs-primary);
        content: '';
    }

    .tabLinks .active i svg path {
        stroke-width: 2px
    }

.symbol {
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

    .symbol img {
        position: absolute;
        inset: 0;
        margin: auto;
        max-height: 100%;
    }

.symbol-100px {
    width: 10rem;
    height: 10rem;
    min-width: 10rem;
    min-height: 10rem;
}

.symbol-38px {
    width: 3.8rem;
    height: 3.8rem;
    min-width: 3.8rem;
    min-height: 3.8rem;
}

.symbol-40px {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
}

.rowThree h3 {
    font-size: 6rem;
}

.rowThree .symbol-100px {
    width: 13rem;
    height: 13rem;
    min-width: 13rem;
    min-height: 13rem;
}

.rowThree h6 {
    font-size: 2.4rem;
}

.rowThree .card-header {
    margin-bottom: 2.5rem !important;
}

.column-gap-40 {
    column-gap: 4rem;
}

.projLeft {
    width: 53.55%;
}

.projRight {
    width: 44.14%;
}

.k-treeview {
    font: 400 1.8rem/1.33 "Titillium Web", sans-serif;
}

.k-treeview-top .k-treeview-leaf-text {
    font-weight: 600;
}

.project-details-tree-view .k-checkbox-wrap {
    display: none;
}

.k-table-row {
    cursor: pointer;
}

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td, .k-grid .k-table-row > td, .k-grid .k-table-row > .k-table-td {
    /*max-width: 150px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces ; /*nowrap;*/ /* HTB, 4 NOV-2025: MAES / SET MULTILINE COLUMN DISPLAY HERE */
    word-wrap: break-word;
}

.k-treeview-item {
    padding: 0 0 0 20px;
}

.k-treeview-toggle {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 0 0 -20px;
}

    .k-treeview-toggle .k-svg-icon {
        width: 100%;
        height: 100%;
        background: url(../images/arrow-right.svg) no-repeat center center / cover;
        padding: 0;
        box-sizing: border-box;
    }

        .k-treeview-toggle .k-svg-icon.k-svg-i-caret-alt-down {
            transform: rotate(45deg);
        }

        .k-treeview-toggle .k-svg-icon svg {
            display: none;
        }

.k-treeview .k-sprite {
    display: none;
}

.k-treeview .k-treeview-leaf {
    padding: 4px;
    border-radius: 0 0 0.4rem 0.4rem;
}

.accFormatting .accHeader {
    background-color: #ffffff;
    padding: 1.3rem 1.6rem;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    margin: 0;
    position: relative;
    cursor: pointer;
}

    .accFormatting .accHeader::after {
        width: 3.4rem;
        height: 3.2rem;
        content: '';
        background: url(../images/down-arrow.svg) no-repeat center center / 2rem auto;
        position: absolute;
        inset: 0.7rem 0.8rem auto auto;
    }

.accOpen .accHeader::after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

div.k-grid {
    border: 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.k-grid-table.k-table {
    font: 400 1.6rem/1.2 "Titillium Web", sans-serif;
    padding: 0;
}

.k-grid .k-grid-header {
    border-bottom: 0;
}

.k-grid .k-table-alt-row {
    background-color: transparent;
}

.tableWrapper:has(.tableIcons) > .flex-fill.mh-100 {
    max-height: calc(100% - 6rem) !important;
    flex: auto !important;
}


.chartWrapper {
    background-color: #ffffff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ffffff;
    padding: 0;
    -webkit-box-shadow: 0 0.6rem 1.3rem rgba(0,0,0,0.05);
    box-shadow: 0 0.6rem 1.3rem rgba(0,0,0,0.05);
    min-height: 20rem;
    min-width: 40rem;
}


    .chartWrapper h5 {
        padding: 0;
        margin: 0;
        min-height: 4.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: #ffffff;
        inset: 1px 0 auto;
        z-index: 11;
    }

        .chartWrapper h5 + div {
            margin-top: -1rem;
        }

/* .chartWrapper h5{background-color: var(--bs-burgundy);border-bottom:1px solid var(--bs-burgundy);} */



.accFormatting .accRow + .accRow {
    margin-top: 1.6rem;
}

.accBody .chartBoxes {
    margin-top: 2.4rem;
    padding-bottom: 0.8rem;
    /*    grid-template-columns: repeat(4, minmax(25.5rem, 1fr));*/
    display: flex;
    flex-wrap: wrap;
}

    .accBody .chartBoxes .chartWrapper {
        width: 25.5rem;
        overflow: hidden;
    }

.accBody {
    display: none;
}

.chartBoxes {
    display: grid;
    grid-gap: 2.4rem;
    grid-template-columns: repeat(5, minmax(25.5rem, 1fr));
}



.filterRight {
    padding-left: 2rem;
    padding-right: 2rem;
}

.grafLeft {
    width: calc(100% - 35.7rem);
    padding-right: 4rem;
    overflow-y: auto;
}

.form-select {
    height: 3.8rem;
    padding: 0 4.5rem 0 1.2rem;
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
    background-color: #ffffff;
    font: 400 1.6rem/1.5 "Titillium Web", sans-serif;
    background-position: calc(100% - 1.2rem) center;
    background-size: 2rem auto;
    outline: none !important;
    box-shadow: none !important;
    background-image: url(../images/down-arrow.svg);
}

/*.form-select::after {
        content: 'Test';
    }*/

.form-select-primary {
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    background-image: url(../images/select-icon.svg);
}

.k-slider-horizontal .k-slider-track, .k-slider-horizontal .k-slider-selection {
    height: 8px;
    margin-top: -4px;
}

.k-slider .k-slider-track {
    background-color: #ffffff;
}

.k-slider .k-slider-selection {
    background-color: var(--bs-primary);
}

.k-slider .k-button {
    display: none;
}

.k-slider .k-draghandle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .k-slider .k-draghandle:focus, .k-slider .k-draghandle.k-focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 50%, transparent)
    }

@media (min-width: 768px) {
    .min-w-md-250px {
        min-width: 25rem;
    }

    div::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }



    div::-webkit-scrollbar {
        width: 0.8rem;
        height: 0.8rem;
        background-color: transparent;
    }



    div::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: var(--bs-primary);
    }
}


.k-grid-norecords {
    font: inherit;
    justify-content: center;
    padding: 3rem 0;
}

    .k-grid-norecords span {
        font-size: 1.6rem;
    }
    
.modal-content {
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.k-pager {
    font-family: "Titillium Web", sans-serif;
}

.k-pager-md .k-pager-numbers-wrap .k-button {
    min-width: 2rem;
    padding: 0;
}

body .k-button {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.6rem;
    color: #262626;
}

.k-pager-numbers .k-button {
    padding: 0;
    min-width: 2rem;
    height: 2.8rem;
    align-items: center;
}



body .k-button.k-selected .k-button-text {
    color: #ffffff;
    z-index: 1;
    border-color: var(--bs-primary);
}

body .k-button.k-selected::before {
    opacity: 1;
}

body .k-pager-numbers .k-button-overlay,
body .k-pager-numbers .k-button::before {
    background-color: var(--bs-primary);
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.k-pager-numbers .k-button .k-button-text {
    border-bottom: 1px solid #262626;
}

.k-pager-numbers,
.k-pager-numbers-wrap {
    gap: 2rem;
    align-items: center;
}

.k-pager {
    background-color: transparent;
}

.k-pager-info {
}





.k-pager-numbers-wrap .k-button-md.k-icon-button {
    padding: 0;
}



.k-pager-numbers-wrap > .k-button::before {
    background: transparent;
}

.k-pager-numbers-wrap > .k-button {
    color: var(--bs-dark);
}



    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2)::before,
    .k-pager-numbers-wrap > .k-button:last-child::before,
    .k-pager-numbers-wrap > .k-button:first-child:after,
    .k-pager-numbers-wrap > .k-button:nth-child(2):after {
        inset: 0;
        content: attr(title);
        position: relative;
        opacity: 1;
        box-shadow: none;
    }



    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2)::before,
    .k-pager-numbers-wrap > .k-button:last-child::before {
        margin-right: 0.4rem;
    }



    .k-pager-numbers-wrap > .k-button:first-child:after,
    .k-pager-numbers-wrap > .k-button:nth-child(2):after {
        margin-left: 0.4rem;
    }


/*
    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2) span,
    .k-pager-last span {
        background: url(../images/caret-alt-right.svg) no-repeat center center / cover;
    }



.k-pager-first + .k-button span,
.k-pager-first span {
    background: url(../images/caret-alt-left.svg) no-repeat center center / cover;
}

    .k-pager-first + .k-button span svg,
    .k-pager-last span svg,
    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2) span svg,
    .k-pager-first span svg {
        opacity: 0;
    }*/





body .k-pager-md .k-pager-sizes .k-dropdown-list,
body .k-pager-md .k-pager-sizes .k-dropdown,
body .k-pager-md .k-pager-sizes .k-dropdownlist,
body .k-pager-md .k-pager-sizes > select {
    width: 7.2rem;
    background-color: #F2F4F8;
    border-color: #F2F4F8;
    font-size: 1.6rem;
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
}

body .k-pager-sizes .k-input-button {
    background: url(../images/down-arrow.svg) no-repeat center center / 0.9rem auto;
    max-width: 1.6rem;
    margin-right: 0.8rem;
}

    body .k-pager-sizes .k-input-button span {
        opacity: 0;
    }

body .k-pager-sizes .k-input-inner {
    padding: 0 0 0 0.8rem;
}

@media only screen and (min-width: 992px) {
    .sideClose .toggleSidebar::after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .sideClose .app-sidebar {
        width: 8.8rem;
    }

    .sideClose .wrapper {
        padding-left: 8.8rem;
    }

    .sideClose .menuUlBottom ul {
        margin-left: 3.5rem;
    }

    .sideClose .logo-text,
    .sideClose .menuUl a > span {
        opacity: 0;
        visibility: hidden;
    }

    .sideClose .menuUlBottom span span {
        opacity: 0;
        visibility: hidden;
        width: 0;
        padding: 0.7rem 0 0.7rem 0;
    }
}

/* Right side css end */

.app-navbar-item:hover > .menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.menu-item:hover .subMenu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


#ui-datepicker-div {
    display: none;
    background-color: #ffffff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    margin-top: 0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #282828;
    z-index: 9999 !important;
    margin-top: -24px;
}

.ui-datepicker,
.ui-datepicker * {
    font-size: 1.4rem;
}

    .ui-datepicker select {
        width: 42%;
        display: inline-block;
        border: none;
        box-shadow: none;
        margin: 0 0.5rem;
        padding: 0 1rem;
        background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat calc(100% - 1rem) center / 1.2rem auto;
        color: var(--bs-dark);
        height: 3.2rem;
        border: 1px solid #ced4da;
        border-radius: 0.5px;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 0.4rem;
    }

.ui-datepicker-header a.ui-datepicker-prev,
.ui-datepicker-header a.ui-datepicker-next {
    background-color: var(--bs-primary) !important;
    margin: 0.5rem !important;
    color: #fff;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #fff;
}

.ui-datepicker-calendar tbody td {
    width: 4rem;
    text-align: center;
    padding: 0;
}

    .ui-datepicker-calendar tbody td .ui-state-default {
        display: block;
        border-radius: 0.25rem;
        line-height: 2.29;
        transition: 0.3s all;
        font-size: 1.4rem;
        text-decoration: none;
        color: var(--bs-dark);
    }

    .ui-datepicker-calendar tbody td.ui-state-disabled .ui-state-default {
        opacity: 0.5;
    }

    .ui-datepicker-calendar tbody td a:hover {
        background-color: var(--bs-secondary);
        color: #ffffff;
    }

    .ui-datepicker-calendar tbody td a.ui-state-active {
        background-color: var(--bs-primary);
        color: #ffffff;
    }

    .ui-datepicker-calendar tbody td.ui-datepicker-today a {
        background-color: var(--bs-primary);
        color: #ffffff;
    }

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 3rem;
    height: 3rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
    color: #fff;
}

    .ui-datepicker-header a.ui-corner-all:hover {
        background-color: #ECEFF1;
    }

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
}

    .ui-datepicker-header a.ui-datepicker-prev::before,
    .ui-datepicker-header a.ui-datepicker-next::before {
        width: 0.6rem;
        height: 0.6rem;
        border: 0.2rem solid #fff;
        content: '';
        content: '';
        left: 0.4rem;
        top: 0;
        position: absolute;
        transform: rotate(-45deg);
        border-right: 0;
        border-bottom: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .ui-datepicker-header a.ui-datepicker-next::before {
        transform: rotate(135deg);
        left: -0.3rem;
    }

.ui-datepicker-header a > span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
}

.ui-datepicker-header {
    padding: 0.5rem 4rem 1rem;
    position: relative;
    border-bottom: 1px solid rgb(238 238 238 / 8%);
    margin-bottom: 0.5rem;
}

.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}

.k-splitter,
.k-input-md, .k-picker-md {
    font-size: 1.6rem
}

.form-check {
    margin-bottom: 0;
}

.splitLeft {
    width: calc(100% - 30rem);
}

.splitRight {
    width: 34rem;
    overflow-y: auto;
}

.borderDiv {
    padding: 1rem;
    background-color: #ffffff;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 0 2rem 4.5rem rgba(0,0,0,0.05);
    box-shadow: 0 2rem 4.5rem rgba(0,0,0,0.05);
}

.progressMain {
    width: 30rem;
}
    .w-100px {
        width: 100px;
    }
    .circleBtn {
        background-color: var(--bs-gray-100);
        width: 3.8rem;
        height: 3.8rem;
        font-size: 1.4rem;
        font-weight: 600;
        color: #28516E;
        text-transform: uppercase;
        transition: 300ms all;
        outline: none !important;
        padding: 0px;
        margin-right: 1rem;
    }

.circleBtnwhite {
    background-color: #ffffff;
    width: 2.6rem;  /* ER: REFRESH GRID BUTTON */
    height: 2.6rem; /* ER: REFRESH GRID BUTTON */
}

.gridRecords {
    font-size: 20px;  /* ER: FONTSIZE OF GRID NO OF RECORDS */
}

.circleBtn svg {
    width: 100%;
    height: auto;
    max-width: 50%;
    max-height: 50%;
}

.fs-20px {
    font-size: 2rem;
}

.circleBtn30 {
    width: 30px;
    height: 30px;
}

div .circleBtn40 {
    min-width: 4rem;
    min-height: 4rem;
    width: 4rem;
    height: 4rem;
}

.circleBtn40 svg {
    max-width: 2rem;
    max-height: 70%;
    width: auto;
    height: auto;
}

div .circleBtn20 {
    min-width: 3rem;
    min-height: 3rem;
    width: 2rem;
    height: 2rem;
}

.circleBtn20 > svg {
    max-width: 50%;
    max-height: 50%;
}

.h-300px {
    height: 30rem;
}

div .circleBtn38 {
    min-width: 3.8rem;
    min-height: 3.8rem;
    width: 3.8rem;
    height: 3.8rem;
}

.circleBtn38 > svg {
    max-width: 50%;
    max-height: 50%;
}


div .circleBtn48 {
    min-width: 5.8rem;
    min-height: 5.8rem;
    width: 3.8rem;
    height: 3.8rem;
}

.circleBtn48 > svg {
    max-width: 50%;
    max-height: 50%;
}

.progwithPlay .circleBtn svg {
    max-width: 50%;
    max-height: 50%;
    width: auto;
    height: auto;
}

.min-w-100px {
    min-width: 10rem;
}

.k-progressbar {
    background-color: #ffffff;
}

    .k-progressbar .k-selected {
        background-color: var(--bs-primary);
    }

.progwithPlay .k-progressbar {
    font-size: 10px;
}

.borderDiv .form-control-common {
    background-color: var(--bs-gray-100);
    height: 4.8rem
}

.btmButtons {
    border: 1px solid var(--bs-gray-100);
}

.modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
}

.min-w-100px {
    min-width: 10rem
}
.min-w-120px {
    min-width: 12rem
}

.min-w-130px {
    min-width: 13rem
}

.w-150px {
    width: 15rem
}

.min-w-150px {
    min-width: 15rem;
}

.min-w-200px {
    min-width: 20rem
}

.min-w-250px {
    min-width: 25rem;
    padding-right: 1rem;
}

.min-w-400px {
    min-width: 40rem;
    padding-right: 1rem;
}

.max-w-250px {
    max-width: 25rem
}
.w-15 {
    width: 15%;
}
.min-w-130px {
    min-width: 13rem
}

.min-w-300px {
    min-width: 30rem;
}

.w-150px {
    width: 15rem
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog {
    height: 90%;
}

.modal-content {
    max-height: 100%;
}

.modal-body {
    overflow: hidden;
}

.drpDownrow .form-select,
.searchBox .form-control-common {
    border-width: 0;
}

.k-content .searchBox .form-control-common {
    border-width: 1px;
}

.modal-body .searchBox {
    border: 1px solid var(--bs-primary);
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
}

.k-popup .k-multicheck-wrap,
.k-link.k-menu-link,
.k-menu-bar, .k-menu {
    font-family: inherit;
    font-size: 1.4rem;
}

.k-link.k-menu-link {
    color: #000000;
}

.k-checkbox-md {
    width: 1.6rem;
    height: 1.6rem;
}

.card.cardSmall:has(img.pe-none) {
    z-index: 1;
}

.card.cardSmall img.pe-none {
    z-index: -1;
}

.k-content .commonTable,
.modal-body .customgrid {
    -webkit-border-radius: 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid var(--bs-gray-100);
}

.modal-xl {
    width: 114rem;
    max-width: calc(100% - 30px);
}

.modal-md {
    max-width: 63rem;
}

body select.k-picker-solid {
    background: #F2F4F8 url(../images/down-arrow.svg) no-repeat calc(100% - 0.8rem) center / 1.2rem auto;
    -webkit-appearance: none;
    appearance: none;
    border-color: #F2F4F8;
    height: 2.6rem;
    padding: 0 0 0 0.8rem;
    width: 6.2rem !important;
}

    body select.k-picker-solid option {
        background-color: #ffffff;
    }


p:last-child {
    margin-bottom: 0;
}

.filterTop .circleBtn {
    background-color: #ffffff;
}

.modal-body .filterTop .circleBtn {
    background-color: var(--bs-gray-100);
    width: 4.8rem;
    height: 4.8rem;
    min-width: 4.8rem;
    min-height: 4.8rem;
}

.circleBtn > svg.maxwh60,
.maxwh60 {
    max-height: 50%;
    max-width: 50%;
}

.circleBtn > svg.maxwh70,
.maxwh70 {
    max-height: 70%;
    max-width: 70%;
}

.modal-body .menu[data-direction="right"] {
    left: calc(100% - 1rem);
    right: auto;
}

.w-170px {
    width: 17rem;
}

.k-tabstrip {
    font-size: 1.6rem;
}

.k-tabstrip-items .k-link {
    padding: 1rem 2.5rem;
    color: var(--bs-dark);
}

.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    color: var(--bs-primary);
}

.k-tabstrip-content, .k-tabstrip > .k-content {
    padding: 3rem;
}

    .k-tabstrip-content .row {
        margin-inline: -1rem
    }

        .k-tabstrip-content .row > * {
            padding-inline: 1rem;
        }

        .k-tabstrip-content .row.mt-1 {
            margin-top: 1rem;
        }

.card.cardSmall:has(img.pe-none) {
    z-index: 1;
}

.card.cardSmall img.pe-none {
    z-index: -1;
}

.card.cardSmall span.font-16 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body div:where(.swal2-container) h2:where(.swal2-title) {
    font: 600 2.2rem/1 "Titillium Web", sans-serif;
    color: var(--bs-primary);
}

body div:where(.swal2-container) div:where(.swal2-html-container) {
    font-size: 1.6rem;
}

body div:where(.swal2-container) div:where(.swal2-popup) {
    width: 40rem;
    max-width: 100%;
    padding: 3rem 0;
}

body div:where(.swal2-icon) {
    margin-top: 0;
}

.ms-n2 {
    margin-left: -0.5rem !important
}

.spanClick {
    position: absolute;
    inset: 0;
    z-index: 10;
}


@media only screen and (max-width: 479px) and (orientation: portrait) {
    .flex-column-portrait {
        flex-direction: column !important
    }

    .align-items-start-portrait {
        align-items: flex-start !important;
    }

    .p-4-portrait {
        padding: 1.5rem !important;
    }

    .w-100-portrait {
        width: 100% !important
    }
}

@media only screen and (min-width: 1199px) {
    html:has(.loginWrapper) {
        font-size: 0.927vh;
    }
}

.circleRemoveBtn,
.circleAddBtn {
    font-size: 0;
    position: relative
}

    .circleRemoveBtn:after,
    .circleAddBtn:after {
        position: absolute;
        inset: 0;
        margin: auto;
        content: '';
        width: 40%;
        height: 40%;
        background-color: var(--bs-primary);
    }

    .circleRemoveBtn:after {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E") no-repeat center center / cover;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E") no-repeat center center / cover;
    }

    .circleAddBtn:after {
        -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat center center / cover;
        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E") no-repeat center center / cover;
    }

.slashSpan {
    font-size: 2.2rem;
}

.tglbtnDiv {
    display: none;
}

textarea.form-control {
    height: 20rem;
    padding: 1.2rem;
}

#tilelayout {
    background-color: transparent;
}

    #tilelayout .card h4 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.datepicker-height {
    height: 3.8rem;
    border-color: var(--bs-primary);
}

    .datepicker-height > .datepicker-height.k-input-inner {
        height: 100%;
    }

    .datepicker-height .k-button-md.k-icon-button {
        background-color: transparent;
        border: 0;
        padding-inline: 1.2rem;
    }

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-25 {
    width: 25%;
}

.w-40 {
    width: 40%;
}

.min-w-70px {
    min-width: 7rem;
}

.k-filemanager-view {
    padding: 1rem;
}

.k-listview {
    font: inherit;
    font-size: 1.4rem;
}

.k-filemanager-listview .k-listview-content {
    gap: 1rem;
}

.k-filemanager-listview .k-listview-item {
    border: 1px solid var(--bs-gray-100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.k-filemanager-breadcrumb {
    background-color: var(--bs-gray-100);
}

.k-filemanager {
    border-color: var(--bs-gray-100);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.k-filemanager-navigation {
    border-color: var(--bs-gray-100);
}

.k-treeview-leaf.k-selected {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.jstree-children, .jstree-container-ul {
    font: 400 1.8rem/1.33 "Titillium Web", sans-serif;
}

.jstree-children {
    font-size: 1.6rem;
}

    .jstree-node > .jstree-children,
    .jstree-children .jstree-node + .jstree-node {
        margin-top: 0.5rem;
    }

.k-datepicker {
    border-color: var(--bs-primary);
    height: 3.8rem;
}

    .k-datepicker .k-input-button {
        background-color: transparent;
        border: 0;
        padding-inline: 1.2rem;
    }

.modal-800 {
    width: 800px;
    max-width: calc(100% - 3rem);
}

.w-120px {
    width: 12rem;
}

.k-tabstrip-content:focus, .k-tabstrip-content.k-focus, .k-tabstrip > .k-content:focus, .k-tabstrip > .k-content.k-focus {
    outline: none !important;
}

.k-grid-header-wrap .k-grid-header-table {
    padding: 0;
}

#taakInfoForm .modal-body .k-tabstrip.k-widget.k-tabstrip-top {
    overflow-y: auto;
}


body:has(.progwithPlay) .borActicons.recapTop {
    position: relative;
    margin-top: -2rem;
}

body:has(.progwithPlay) .progressMain {
    margin-right: 20rem;
}

body:has(.progwithPlay) .borActicons.recapTop > .d-flex.flex-wrap {
    position: absolute;
    right: 0;
    width: auto;
    bottom: calc(100% - 0.5rem);
}


.chartContainer {
    position: relative;
    height:253px;
    /*    padding-top: 72%;*/
}

    .chartContainer > div > div, .chartContainer > div {
        width: 100%;
        height: 100%;
    }

.fullchartBox .filterRight {
    padding-left: 0;
    width: 25rem;
}
.fullchartBox .grafLeft {
    width: calc(100% - 25rem)
}

.k-splitter {
    border: 0;
}

textarea.form-control-common.h-86px,
.h-86px {
    height: 8.6rem
}

.cbrightArrow svg {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.cbtopArrow svg {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.cbbottomArrow svg {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.max-w-1000px {
    max-width: 100rem
}
.max-w-1005px {
    max-width: 105rem
}
.k-tabstrip .k-slider .k-slider-track {
    background-color: var(--bs-gray-100);
}

@media (hover: hover) {
    .menuUl a:hover {
            opacity: 1;
            color: var(--bs-secondary);
        }

        .menu-item:hover > .menu-link {
            color: var(--bs-primary);
        }

        .app-navbar-item:hover > .circleBtn,
        .menu-item:hover .circleBtn {
            background-color: #28516E;
            color: #ffffff;
        }

        .userMenu .menu-item .menu-link:hover {
            background-color: var(--bs-gray-100);
        }

        .k-treeview-leaf:hover, .k-treeview-leaf.k-hover {
            background-color: var(--bs-gray-200);
        }

        .circleRemoveBtn:hover:after,
        .circleAddBtn:hover:after {
            background-color: #ffffff;
        }
    }

    @media only screen and (max-height: 1080px) {
        /*    .loginWrapper h1 {
        font-size: 5.2rem
    }

    .loginWrapper h2 {
        font-size: 4rem;
    }

    .loginLogo img {
        width: 29rem;
        margin-bottom: 5rem;
    }

    .loginLeft .card {
        padding: 5rem 8.2rem 6rem;
    }

    .loginRight h1 {
        margin-bottom: 10rem;
    }

    .loginLeft .form-label {
        font-size: 2rem;
    }

    .loginLeft .mb-70 {
        margin-bottom: 5rem;
    }

    .loginLeft .form-control {
        height: 5.5rem;
    }*/
    }


    @media only screen and (max-width: 1199.98px) {
        html {
            font-size: 8px;
        }

        body {
            font-size: 1.8rem;
        }

        .wrapTxt td span {
            max-width: 100%;
        }

        h2 {
            font-size: 4rem;
        }

        .filterBtns {
            position: relative;
        }

        .filterMenu {
            position: absolute;
            background-color: #ffffff;
            z-index: 9;
            box-shadow: 0 0 5rem rgba(0,0,0,0.1);
            padding: 1.5rem 2rem 1.5rem 1rem;
            left: 0;
            top: 100%;
            border-radius: 4px;
            gap: 1rem;
            opacity: 0;
            visibility: hidden;
            -webkit-transform: translateY(20%);
            transform: translateY(20%);
        }

        .searchBox {
            width: 20rem;
        }

        .projLeft {
            width: 100%;
        }

        .projRight {
            width: 100%;
        }

        .chartBoxes {
            grid-template-columns: repeat(auto-fit, minmax(25.5rem, 1fr));
        }


    }

    @media only screen and (min-width: 768px) and (max-width: 1199.98px) {
        .circleBtn {
            width: 4.2rem;
            height: 4.2rem;
        }

            .circleBtn > svg.maxwh60, .maxwh60,
            .circleBtn > svg {
                max-width: 50%;
                max-height: 50%;
            }

        .borderDiv .form-control-common {
            height: 4.2rem
        }

        .modal-md {
            max-width: 70rem;
        }

        .tabWrapper .backLink {
            padding-right: 1.3rem
        }

        .tabWrapper > div > div.gap-24px,
        .tabLinks.gap-24px {
            gap: 1rem
        }
        .w-50-ml {
            width: 50% !important;
        }

    }


    @media only screen and (min-width: 768px) and (max-width: 991.99px) {

    }

    @media only screen and (max-width: 991.98px) {
        .loginWrapper {
            height: auto;
            min-height: 100%;
        }

        .loginRight {
            max-width: 100%;
            padding: 5rem;
        }

        /* Menu css start */
        .app-header {
            background-color: #ffffff;
        }

        .wrapper {
            padding: 0;
        }

        .app-sidebar {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            padding: 10px;
        }

            .app-sidebar::after {
                position: fixed;
                left: 17.2rem;
                top: 0;
                bottom: 0;
                content: '';
                background-color: rgba(0,0,0,0.3);
                -webkit-transition: 300ms width;
                transition: 300ms width;
                width: 0;
                backdrop-filter: blur(0.2rem);
            }

        .showMenu .app-sidebar {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

            .showMenu .app-sidebar::after {
                width: calc(100vw - 20rem);
                transition-delay: 100ms;
            }

        .toggleSidebar {
            display: none
        }

        .app-sidebar .sideLogo {
            margin-bottom: 3rem;
        }

        .menuUl a.acive::after {
            display: none;
        }
        /* Menu css end */


        .btmButtons > div {
            width: 100%
        }

        #taakInfoForm .modal-body .k-tabstrip.k-widget.k-tabstrip-top {
            max-height: 100% !important;
            overflow: hidden;
        }
    }

    @media only screen and (min-width: 992px) and (max-width: 1600px) {
        .loginWrapper > div {
            max-width: 50%;
        }

        .loginLeft {
            /*            margin: 0 4rem 0 0;*/
        }

            .loginLeft .card {
                padding-inline: 6rem;
            }
    }

    @media only screen and (max-width: 420px) {
        .min-w-400px {
            min-width: 1px;
        }
    }

    @media only screen and (max-width: 767px) {
        .gap-40 {
            row-gap: 2rem;
        }

        h3 {
            font-size: 3.2rem;
            margin-bottom: 1rem;
        }

        h4 {
            font-size: 1.8rem;
        }

        .modal-title {
            font-size: 2.2rem;
        }

        .loginWrapper {
            padding: 30px 20px;
        }

        .loginLogo img {
            margin-bottom: 30px;
            max-width: 20rem;
        }

        .loginLeft .card {
            padding: 30px;
        }

        .loginLeft .mb-70 {
            margin-bottom: 35px;
        }

        .mb-40 {
            margin-bottom: 20px;
        }

        .loginLeft .form-label {
            font-size: 1.8rem;
        }

        .mb-50 {
            margin-bottom: 25px;
        }

        .loginRight h1 {
            font-size: 25px;
            margin-bottom: 4rem;
        }

        .wrapper {
            padding: 0;
        }

        .app-container {
            padding-inline: 15px;
        }

        .wrapTxt td span {
            display: inline;
        }

        .userMenu > button span {
            display: none;
        }

        .app-header {
            padding: 10px 0;
        }

        .notification {
            margin-right: 3rem;
        }

        .userMenu > button {
            padding: 0;
            background: transparent;
        }

        .grafLeft,
        .filterRight {
            padding: 0;
            width: 100%;
        }

        .btn-minw-182 {
            min-width: 1px;
        }

        .px-45px {
            padding-inline: 20px;
        }

        .modal-footer.py-md-5 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
        }

        .splitRight,
        .splitLeft {
            width: 100%;
        }

        .loginLeft {
            margin: 0 auto 4rem;
            max-width: 100%;
        }

        .modal-md {
            max-width: 100% !important;
        }

        .modal-xl {
            max-width: calc(100% - 1rem) !important;
        }

        .loginLeft .form-control {
            height: 5.4rem;
            padding-inline: 1.2rem;
        }

        .btn-large {
            line-height: 2.8;
        }

        .tglbtnDiv {
            display: block;
        }

        .app-container > .filterTop:not(.filterOpen) {
            display: none;
        }

        .filterTop[data-kt-custom-toggle="on"] {
            display: block;
        }

        .jstree-anchor {
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }

        #jstreenode,
        #jstreenode > ul,
        #jstreenode > ul > li,
        .jstree-children {
            width: 100%;
        }

        .jstree-default .jstree-node {
            max-width: calc(100% - 30px);
        }

        .tableIcons .or-1 {
            order: 1;
        }

        .tableIcons .or-2 {
            order: 3;
        }

            .tableIcons .or-2.jstree {
                margin-top: 2rem !important
            }

        .tableIcons .or-3 {
            order: 2;
        }

        .tableIcons .or-1 .btn {
            padding: 6.5px 1.5rem
        }

        #taakInfoForm .modal-body .k-content.k-tabstrip-content > .w-50 {
            min-width: 100%;
        }
        .w-100-mobile {
            width: 100% !important;
        }
    }

    @media only screen and (max-width: 479px) {
        .forgotBox {
            flex-direction: column !important;
            align-items: flex-start !important;
            row-gap: 2rem;
        }

        .k-tabstrip-items .k-link {
            padding-inline: 10px;
        }
    }

    @media only screen and (max-width: 374px) {
        .k-tabstrip-items .k-link {
            padding-inline: 5px;
        }
    }

    @media only screen and (max-width: 574px) {
        .w-50, .w-40, .w-27p5 {
            width: 100% !important;
        }
    }

    @media only screen and (min-width: 576px) {
        .w-sm-auto {
            width: auto !important
        }

        .min-w-sm-250px {
            min-width: 25rem;
        }
    }

    @media only screen and (max-width: 414px) {
        div .apexcharts-legend {
            margin-inline: auto;
        }
    }

    .k-pager {
    font-family: "Titillium Web", sans-serif;
}

.k-pager-md .k-pager-numbers-wrap .k-button {
    min-width: 2rem;
    padding: 0;
}

body .k-button {
    font-family: "Titillium Web", sans-serif;
    font-size: 1.6rem;
    color: #262626;
}

.k-pager-numbers .k-button {
    padding: 0;
    min-width: 2rem;
    height: 2.8rem;
    align-items: center;
}

body .k-button.k-selected .k-button-text {
    color: #ffffff;
    z-index: 1;
    border-color: var(--bs-primary);
}

body .k-button.k-selected::before {
    opacity: 1;
}

body .k-pager-numbers .k-button-overlay,
body .k-pager-numbers .k-button::before {
    background-color: var(--bs-primary);
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.k-pager-numbers .k-button .k-button-text {
    border-bottom: 1px solid #262626;
}

.k-pager-numbers,
.k-pager-numbers-wrap {
    gap: 2rem;
    align-items: center;
}

.k-pager {
    background-color: transparent;
}

.k-pager-info {
}


.k-pager {
    font-size: 1.6rem;
    border-color: #F2F4F8;
    /*padding: 3rem 2.2rem;*/
    overflow-x: auto;
}

.k-pager-numbers-wrap .k-button-md.k-icon-button {
    padding: 0;
}

.k-list-md {
    font-size: 1.6rem;
}

.k-pager-numbers-wrap > .k-button::before {
    background: transparent;
}

.k-pager-numbers-wrap > .k-button {
    color: var(--bs-dark);
}

    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2)::before,
    .k-pager-numbers-wrap > .k-button:last-child::before,
    .k-pager-numbers-wrap > .k-button:first-child:after,
    .k-pager-numbers-wrap > .k-button:nth-child(2):after {
        inset: 0;
        content: attr(title);
        position: relative;
        opacity: 1;
        box-shadow: none;
    }

    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2)::before,
    .k-pager-numbers-wrap > .k-button:last-child::before {
        margin-right: 0.4rem;
    }

    .k-pager-numbers-wrap > .k-button:first-child:after,
    .k-pager-numbers-wrap > .k-button:nth-child(2):after {
        margin-left: 0.4rem;
    }

    /*.k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2) span,
    .k-pager-last span {
        background: url(../images/caret-alt-to-right.svg) no-repeat center center / cover;
    }

.k-pager-first + .k-button span,
.k-pager-first span {
    background: url(../images/caret-alt-to-left.svg) no-repeat center center / cover;
}*/

    /*.k-pager-first + .k-button span svg,
    .k-pager-last span svg,
    .k-pager-numbers-wrap > .k-button:nth-last-child(-n + 2) span svg,
    .k-pager-first span svg {
        opacity: 0;
    }*/


body .k-pager-md .k-pager-sizes .k-dropdown-list,
body .k-pager-md .k-pager-sizes .k-dropdown,
body .k-pager-md .k-pager-sizes .k-dropdownlist,
body .k-pager-md .k-pager-sizes > select {
    width: 7.2rem;
    background-color: #F2F4F8;
    border-color: #F2F4F8;
    font-size: 1.6rem;
    -webkit-border-radius: 0.4rem;
    border-radius: 0.4rem;
}

body .k-pager-sizes .k-input-button {
    background: url(../images/down-arrow.svg) no-repeat center center / 0.9rem auto;
    max-width: 1.6rem;
    margin-right: 0.8rem;
}

    body .k-pager-sizes .k-input-button span {
        opacity: 0;
    }

body .k-pager-sizes .k-input-inner {
    padding: 0 0 0 0.8rem;
}

.arrowUp svg {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

body .k-tilelayout {
    padding: 0 !important;
}

.k-tilelayout .k-card {
}

.tableWrapper:not(.hasSideBar) .k-resize-handle,
.tableWrapper:not(.hasSideBar) .k-tilelayout-item-header.k-card-header {
    pointer-events: none;
}

.k-tilelayout-item-header.k-card-header {
    position: absolute;
    inset: 0rem 0rem auto;
    opacity: 0;
    z-index: 11;
    padding: 0;
    min-height: 5rem;
}

body .k-tilelayout .k-card {
    background-color: #ffffff;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    box-shadow: 0 2rem 4.5rem rgba(0,0,0,0.05);
    border: 0;
    padding: 0;
}

    body .k-tilelayout .k-card .card {
        min-height: 100%;
    }
.werkplek-tile .cardSmall,
.medewerker-tile .cardSmall {
    padding-inline: 2rem;
}

body .k-tilelayout-item-body.k-card-body {
    /*padding: 2rem 3rem 2rem;*/
    padding: 0;
    background-color: #ffffff;
}

.k-card {
    font-family: "Titillium Web", sans-serif;
}

.customgrid {
    max-height: 100%;
}


.menu {
    min-width: 20rem;
}

.fs-13px {
    font-size: 13px;
}

.fs-14px {
    font-size: 14px;
}

.setTableheight {
    flex: auto !important;
    min-height: 250px;
}

.setTableheightSqlLogs {
    flex: auto !important;
    height: 500px;
}

.menu.fs-14px .menu-item.px-3 .menu-link {
    padding: 0.5rem !important
}

/*    .circleBtn {
        width: 48px;
        height: 48px;
        font-size: 14px;
        font-weight: 600;
        color: #28516E;
        text-transform: uppercase;
        transition: 300ms all;
        outline: none !important;
        padding: 0px;
    }*/

.circleBtn svg, .circleBtn path {
    transition: 300ms all;
}

.show.circleBtn,
.circleBtn:hover {
    background-color: #28516E;
    color: #ffffff;
}

    .show.circleBtn svg path,
    .circleBtn:hover svg path {
        fill: #ffffff;
    }

        .show.circleBtn svg path[stroke],
        .circleBtn:hover svg path[stroke] {
            fill: none;
            stroke: #ffffff;
        }

.project-details-tree-view {
    max-height: 550px;
    overflow-y: scroll;
}

.cursorPointer {
    cursor: pointer;
}

.modal-body .row .sqlInfoPopup {
    height: 500px;
    max-height: 500px;
    overflow: auto;
}

.text-decoration {
    text-decoration: none;
}


.k-tooltip.custom-tooltip {
    background-color: white;
    color: #262626;
    font-size: 1.6rem;
    border-radius: 3px;
    padding: 8px 12px;
    border: 1px solid #262626;
    margin-left: 1rem;
}

    .k-tooltip.custom-tooltip .k-callout {
        width: 3rem;
        height: 3rem;
        background: url(../images/tooltip-arrow.png) no-repeat center center / cover;
        border: 0;
        top: 50% !important;
        margin: 0 !important;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: auto;
        left: -1rem;
        z-index: -1;
    }

    .k-tooltip.custom-tooltip:has(.k-callout-e) {
        margin-left: 0;
        margin-right: 1rem;
    }

    .k-tooltip.custom-tooltip .k-callout.k-callout-e {
        right: -1rem;
        left: auto;
        -webkit-transform: translateY(-50%) rotate(180deg);
        transform: translateY(-50%) rotate(180deg);
    }

    .k-tooltip.custom-tooltip .k-tooltip-content {
        position: relative;
        z-index: 1;
        white-space: nowrap;
    }

    .k-tooltip.custom-tooltip .k-callout:after {
        position: absolute;
        inset: 0 0 0 1rem;
        content: '';
        background: #ffffff;
    }

.noData {
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 0 17px var(--bs-gray-200);
    box-shadow: inset 0 0 0 17px var(--bs-gray-200);
    max-width: 200px;
    height: 100vh;
    max-height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .noData h3 {
        position: absolute;
        inset: 50% 0 auto 0;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.todoListImage {
    height: fit-content;
    width: auto;
}


@media only screen and (max-width: 479px) and (orientation: portrait) {
    .flex-column-portrait {
        flex-direction: column !important
    }

    .align-items-start-portrait {
        align-items: flex-start !important;
    }

    .p-4-portrait {
        padding: 1.5rem !important;
    }

    .w-100-portrait {
        width: 100% !important
    }
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.no-resize {
    resize: none;
}

.h-35 svg {
    height: 35%;
}

.loader {
    width: 4.8rem;
    height: 4.8rem;
    border: 0.5rem solid #F1F1F1;
    border-bottom-color: var(--bs-primary);
    border-radius: 50%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.inset-0 {
    inset: 0;
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.z-1 {
    z-index: 1 !important;
}

.z-2{
    z-index : 2;
}
.z-111{
    z-index:111;
}
.z-9999 {
    z-index: 9999;
}

.hasSideBar {
    display: flex;
    gap: 3.2rem;
}

.sideBarChild {
    min-width: 350px;
    background: rgba(255, 255, 255, 0.6);
    padding: 2rem !important;
}
#side-layout {
    display: flex !important;
    flex-direction: column;
}
    #side-layout .k-button {
        display: none;
    }
.h3Small {
    font: 700 3rem/1 "Titillium Web", sans-serif;
}

.k-grid-draghandle {
    cursor: move;
    font-size: 18px;
    color: #888;
}

.k-row-dragging {
    background: #f0f0f0;
}

.k-grid-draghint {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 8px #aaa;
}

.k-calendar .k-meta,
.k-calendar .k-meta *,
.k-calendar th.k-meta,
.k-calendar th.k-alt,
.k-calendar td.k-alt,
.k-calendar td.k-alt *,
.k-calendar-td.k-meta > .k-link,
.k-calendar-view .k-meta,
.k-calendar-tbody td:first-child,
.k-calendar-tbody td:first-child * {
    font-weight: 900 !important;
    font-family: inherit;
}

#divServerInformationModel th {
    white-space: nowrap;
    width: 1px;
}

/* Limis - Ingebruikname-assistent - NIET VERWIJDEREN
   Alleen de twee onderdelen die geen tegenhanger in de app hebben: de stappenrail
   en de stoplicht-controleregels. Al het overige op /setup gebruikt bestaande
   classes (card, form-control-common, btn-blue/btn-pink, fs-14px).

   Staat hier en niet in een @section Styles van de view: die rendert vóór
   bootstrap.min.css en style.css, en verliest dan bij gelijke specificiteit.
   Maten in rem op de app-basis van 10px (1.6rem = 16px). */

.setup-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    padding-bottom: 4rem;
}

.setup-rail {
    flex: 0 0 24rem;
    position: sticky;
    top: 1rem;
}

.setup-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-rail-item + .setup-rail-item {
    margin-top: 0.4rem;
}

.setup-rail-item > a {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    padding: 1rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    text-decoration: none;
    color: var(--bs-dark);
}

    .setup-rail-item > a:hover {
        background-color: var(--bs-gray-100);
    }

.setup-rail-item.is-current > a {
    background-color: #ffffff;
    border-color: var(--bs-primary);
    box-shadow: 0 2rem 4.5rem rgba(0,0,0,0.05);
}

.setup-rail-nr {
    flex: 0 0 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 1.4rem/1 "Titillium Web", sans-serif;
    background-color: var(--bs-gray-200);
    color: var(--bs-primary);
}

.setup-rail-item.is-afgerond .setup-rail-nr {
    background-color: var(--bs-greenlight);
    color: var(--bs-green);
}

.setup-rail-item.is-overgeslagen .setup-rail-nr {
    background-color: var(--bs-gray-200);
    color: var(--bs-orange);
}

.setup-rail-item.is-current .setup-rail-nr {
    background-color: var(--bs-primary);
    color: #ffffff;
}

.setup-rail-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.setup-rail-title {
    font-size: 1.6rem;
    font-weight: 600;
}

.setup-rail-status {
    font-size: 1.3rem;
    color: var(--bs-secondary);
}

.setup-rail-finish {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200);
}

.setup-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 90rem;
}

/* Stoplicht-controleregels op de omgevings- en afrondstap */
.setup-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-check {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--bs-gray-100);
}

    .setup-check:first-child {
        border-top: 0;
        padding-top: 0;
    }

.setup-check-dot {
    flex: 0 0 1.2rem;
    height: 1.2rem;
    margin-top: 0.5rem;
    border-radius: 50%;
    background-color: var(--bs-gray-200);
}

.setup-check.is-ok .setup-check-dot {
    background-color: var(--bs-green);
}

.setup-check.is-waarschuwing .setup-check-dot {
    background-color: var(--bs-orange);
}

.setup-check.is-fout .setup-check-dot {
    background-color: var(--bs-burgundy);
}

.setup-check-label {
    font-weight: 600;
}

.setup-check.is-fout .setup-check-label {
    color: var(--bs-burgundy);
}

@media (max-width: 991.98px) {
    .setup-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .setup-rail {
        position: static;
        flex: 1 1 auto;
        width: 100%;
    }

    .setup-main {
        max-width: 100%;
        width: 100%;
    }
}
/* Limis - EINDE Ingebruikname-assistent */