.top-row {
    z-index: 1;
}

.ws-grandtotal {
    font-size: 14px;
    font-weight: bold;
}

div.ws-watermark .ui-datatable::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* background-image is the url of the watermark, move and change as needed */
    background-image: url(resource/watermark1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* opacity is how dark the watermark is 0-1 */
    opacity: 0.1;
}

/*.rz-button.btn-primary {
    color: #fff;
    background-color: #D4AF37;
    border-color: #1861ac;
}*/

.middle-box-container {
    background-color: #455A64;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(resource/wdstarhm.png);
    background-repeat: no-repeat;
    background-position: 50% 590px;
}

.middle-box {
    background-color: #f3f5f7;
}

@media (max-width: 768px) {
    .middle-box {
        margin-top: 30px;
    }

    .middle-box-container {
        background-position: 50% 470px;
    }
}

.sidebar {
    background-image: linear-gradient(180deg, #455A64 0%, #607D8B);
}

.main .top-row {
    background-color: #2A373D;
    border-bottom: none;
}

    .main .top-row span {
        color: #ffffff;
    }

/* Small ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
    .middle-box-container h1 {
        font-size: 2rem;
    }

    .middle-box-container {
        background-position: 50% 425px;
        background-size: 200px;
    }
}
/* Tablets ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .middle-box-container {
        background-position: 50% 525px;
        background-size: auto;
    }

        .middle-box-container .middle-box {
            margin-top: 60px
        }
}
/* Tablets (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
    .middle-box-container {
        background-position: 50% 490px;
    }
}
/* MDPI Laptops ----------- */
@media only screen and (min-width : 1025px) and (max-width : 1280px) {
    .middle-box-container {
        background-position: 50% 490px;
        background-size: auto;
    }

        .middle-box-container .middle-box {
            margin-top: 60px
        }
}

@media screen and (min-width: 768px) and (min-height: 650px) {
    .sidebar:before {
        content: '';
        width: 250px;
        height: 140px;
        background-image: url(resource/harvestmanagersverymall.png);
        background-repeat: no-repeat;
        background-size: 50% 80%;
        background-position: center;
        display: block;
        bottom: 40px;
        position: absolute;
    }
}

.rz-fieldset {
    border: 0px solid #dadfe2;
    border-radius: 0;
    width: 100%;
}

.rz-fieldset-content {
    padding: 0rem;
}

.rz-fieldset-legend {
    margin: 0 0 0 0rem;
    width: auto;
    color: #000100;
    font-size: 1.2rem;
    padding: 1rem;
    background: #dadfe2;
    width: 100%;
    border-bottom: 1px solid #dadfe2;
    font-weight: 600;
    border-top: 20px solid #f3f5f7;
}

.rz-fieldset-content .row {
    margin-left: 0px;
    margin-right: 0px;
    padding: 12px 0px;
    background: #ffffff;
    margin-bottom: 0px !important;
}

/*metronic*/

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: #eff2f5;
    --bs-card-border-radius: 0.625rem;
    --bs-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    --bs-card-inner-border-radius: calc(0.625rem - 1px);
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color:;
    --bs-card-height:;
    --bs-card-color:;
    --bs-card-bg: #ffffff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
}

    .card > hr {
        margin-right: 0;
        margin-left: 0;
    }

    .card > .list-group {
        border-top: inherit;
        border-bottom: inherit;
    }

        .card > .list-group:first-child {
            border-top-width: 0;
            border-top-left-radius: var(--bs-card-inner-border-radius);
            border-top-right-radius: var(--bs-card-inner-border-radius);
        }

        .card > .list-group:last-child {
            border-bottom-width: 0;
            border-bottom-right-radius: var(--bs-card-inner-border-radius);
            border-bottom-left-radius: var(--bs-card-inner-border-radius);
        }

        .card > .card-header + .list-group,
        .card > .list-group + .card-footer {
            border-top: 0;
        }

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link + .card-link {
    margin-left: var(--bs-card-spacer-x);
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

    .card-header:first-child {
        border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    }

.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

    .card-footer:last-child {
        border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
    }

.card-header-tabs {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0;
}

    .card-header-tabs .nav-link.active {
        background-color: var(--bs-card-bg);
        border-bottom-color: var(--bs-card-bg);
    }

.card-header-pills {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
    margin-bottom: var(--bs-card-group-margin);
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

        .card-group > .card {
            flex: 1 0 0%;
            margin-bottom: 0;
        }

            .card-group > .card + .card {
                margin-left: 0;
                border-left: 0;
            }

            .card-group > .card:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

                .card-group > .card:not(:last-child) .card-img-top,
                .card-group > .card:not(:last-child) .card-header {
                    border-top-right-radius: 0;
                }

                .card-group > .card:not(:last-child) .card-img-bottom,
                .card-group > .card:not(:last-child) .card-footer {
                    border-bottom-right-radius: 0;
                }

            .card-group > .card:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

                .card-group > .card:not(:first-child) .card-img-top,
                .card-group > .card:not(:first-child) .card-header {
                    border-top-left-radius: 0;
                }

                .card-group > .card:not(:first-child) .card-img-bottom,
                .card-group > .card:not(:first-child) .card-footer {
                    border-bottom-left-radius: 0;
                }
}

.card {
    border: 0;
    box-shadow: var(--kt-card-box-shadow);
    background-color: var(--kt-card-bg);
}
    .card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
        min-height: 70px;
        padding: 0 2.25rem;
        color: var(--kt-card-cap-color);
        background-color: var(--kt-card-cap-bg);
        border-bottom: 1px solid var(--kt-card-border-color);
    }

        .card .card-header .card-title {
            display: flex;
            align-items: center;
            margin: 0.5rem;
            margin-left: 0;
        }

            .card .card-header .card-title.flex-column {
                align-items: flex-start;
                justify-content: center;
            }

            .card .card-header .card-title .card-icon {
                margin-right: 0.75rem;
                line-height: 0;
            }

                .card .card-header .card-title .card-icon i {
                    font-size: 1.25rem;
                    color: var(--kt-gray-600);
                    line-height: 0;
                }

                    .card .card-header .card-title .card-icon i:after, .card .card-header .card-title .card-icon i:before {
                        line-height: 0;
                    }

                .card .card-header .card-title .card-icon .svg-icon {
                    color: var(--kt-gray-600);
                }

                    .card .card-header .card-title .card-icon .svg-icon svg {
                        height: 24px;
                        width: 24px;
                    }

            .card .card-header .card-title,
            .card .card-header .card-title .card-label {
                font-weight: 500;
                font-size: 1.275rem;
                color: var(--kt-text-dark);
            }

                .card .card-header .card-title .card-label {
                    margin: 0 0.75rem 0 0;
                    flex-wrap: wrap;
                }

                .card .card-header .card-title small, .card .card-header .card-title .small {
                    color: var(--kt-text-muted);
                    font-size: 1rem;
                }

                .card .card-header .card-title h1, .card .card-header .card-title .h1, .card .card-header .card-title h2, .card .card-header .card-title .h2, .card .card-header .card-title h3, .card .card-header .card-title .h3, .card .card-header .card-title h4, .card .card-header .card-title .h4, .card .card-header .card-title h5, .card .card-header .card-title .h5, .card .card-header .card-title h6, .card .card-header .card-title .h6 {
                    margin-bottom: 0;
                }

        .card .card-header .card-toolbar {
            display: flex;
            align-items: center;
            margin: 0.5rem 0;
            flex-wrap: wrap;
            gap: 5px;
        }

    .card .card-body {
        padding: 1rem 1rem;
        color: var(--kt-card-color);
    }

    .card .card-footer {
        padding: 2rem 2.25rem;
        color: var(--kt-card-cap-color);
        background-color: var(--kt-card-cap-bg);
        border-top: 1px solid var(--kt-card-border-color);
    }

    .card .card-scroll {
        position: relative;
        overflow: auto;
    }

    .card.card-px-0 .card-header,
    .card.card-px-0 .card-body,
    .card.card-px-0 .card-footer {
        padding-left: 0;
        padding-right: 0;
    }

    .card.card-py-0 .card-header,
    .card.card-py-0 .card-body,
    .card.card-py-0 .card-footer {
        padding-top: 0;
        padding-bottom: 0;
    }

    .card.card-p-0 .card-header,
    .card.card-p-0 .card-body,
    .card.card-p-0 .card-footer {
        padding: 0;
    }

    .card.card-dashed {
        box-shadow: none;
        border: 1px dashed var(--kt-card-border-dashed-color);
    }

        .card.card-dashed > .card-header {
            border-bottom: 1px dashed var(--kt-card-border-dashed-color);
        }

        .card.card-dashed > .card-footer {
            border-top: 1px dashed var(--kt-card-border-dashed-color);
        }

    .card.card-bordered {
        box-shadow: none;
        border: 1px solid var(--kt-card-border-color);
    }

    .card.card-flush > .card-header {
        border-bottom: 0 !important;
    }

    .card.card-flush > .card-footer {
        border-top: 0 !important;
    }

    .card.card-shadow {
        box-shadow: var(--kt-card-box-shadow);
        border: 0;
    }

    .card.card-reset {
        border: 0 !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

        .card.card-reset > .card-header {
            border-bottom: 0 !important;
        }

        .card.card-reset > .card-footer {
            border-top: 0 !important;
        }

    .card.card-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }

@media (min-width: 576px) {
    .card.card-sm-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-sm-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-sm-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-sm-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-sm-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-sm-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-sm-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }
}

@media (min-width: 768px) {
    .card.card-md-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-md-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-md-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-md-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-md-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-md-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-md-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }
}

@media (min-width: 992px) {
    .card.card-lg-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-lg-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-lg-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-lg-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-lg-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-lg-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-lg-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }
}

@media (min-width: 1200px) {
    .card.card-xl-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-xl-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-xl-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-xl-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-xl-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-xl-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-xl-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }
}

@media (min-width: 1400px) {
    .card.card-xxl-stretch {
        height: calc(100% - var(--bs-gutter-y));
    }

    .card.card-xxl-stretch-75 {
        height: calc(75% - var(--bs-gutter-y));
    }

    .card.card-xxl-stretch-50 {
        height: calc(50% - var(--bs-gutter-y));
    }

    .card.card-xxl-stretch-33 {
        height: calc(33.333% - var(--bs-gutter-y));
    }

    .card.card-xxl-stretch-25 {
        height: calc(25% - var(--bs-gutter-y));
    }

    .card .card-header-xxl-stretch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: stretch;
    }

        .card .card-header-xxl-stretch .card-toolbar {
            margin: 0;
            align-items: stretch;
        }
}

.card-p {
    padding: 2rem 2.25rem !important;
}

.card-px {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
}

.card-shadow {
    box-shadow: var(--kt-card-box-shadow);
}

.card-py {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.card-rounded {
    border-radius: 0.625rem;
}

.card-rounded-start {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}

.card-rounded-end {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

.card-rounded-top {
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
}

.card-rounded-bottom {
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

@media (max-width: 767.98px) {
    .card > .card-header:not(.flex-nowrap) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.card-rounded-bottom .apexcharts-canvas svg {
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

:root,
[data-theme=light] {
    --kt-xs: 0;
    --kt-sm: 576px;
    --kt-md: 768px;
    --kt-lg: 992px;
    --kt-xl: 1200px;
    --kt-xxl: 1400px;
    --kt-white: #ffffff;
    --kt-black: #000000;
    --kt-text-muted: #A1A5B7;
    --kt-gray-100: #f5f8fa;
    --kt-gray-200: #eff2f5;
    --kt-gray-300: #E4E6EF;
    --kt-gray-400: #B5B5C3;
    --kt-gray-500: #A1A5B7;
    --kt-gray-600: #7E8299;
    --kt-gray-700: #5E6278;
    --kt-gray-800: #3F4254;
    --kt-gray-900: #181C32;
    --kt-gray-100-rgb: 245, 248, 250;
    --kt-gray-200-rgb: 239, 242, 245;
    --kt-gray-300-rgb: 228, 230, 239;
    --kt-gray-400-rgb: 181, 181, 195;
    --kt-gray-500-rgb: 161, 165, 183;
    --kt-gray-600-rgb: 126, 130, 153;
    --kt-gray-700-rgb: 94, 98, 120;
    --kt-gray-800-rgb: 63, 66, 84;
    --kt-gray-900-rgb: 24, 28, 50;
    --kt-white: #ffffff;
    --kt-light: #f5f8fa;
    --kt-primary: #009ef7;
    --kt-secondary: #E4E6EF;
    --kt-success: #50cd89;
    --kt-info: #7239ea;
    --kt-warning: #ffc700;
    --kt-danger: #f1416c;
    --kt-dark: #181C32;
    --kt-primary-active: #0095e8;
    --kt-secondary-active: #B5B5C3;
    --kt-light-active: #eff2f5;
    --kt-success-active: #47be7d;
    --kt-info-active: #5014d0;
    --kt-warning-active: #f1bc00;
    --kt-danger-active: #d9214e;
    --kt-dark-active: #131628;
    --kt-primary-light: #f1faff;
    --kt-secondary-light: #f5f8fa;
    --kt-success-light: #e8fff3;
    --kt-info-light: #f8f5ff;
    --kt-warning-light: #fff8dd;
    --kt-danger-light: #fff5f8;
    --kt-dark-light: #eff2f5;
    --kt-primary-inverse: #ffffff;
    --kt-secondary-inverse: #3F4254;
    --kt-light-inverse: #7E8299;
    --kt-success-inverse: #ffffff;
    --kt-info-inverse: #ffffff;
    --kt-warning-inverse: #ffffff;
    --kt-danger-inverse: #ffffff;
    --kt-dark-inverse: #ffffff;
    --kt-white-rgb: 255, 255, 255;
    --kt-light-rgb: 245, 248, 250;
    --kt-primary-rgb: 0, 158, 247;
    --kt-secondary-rgb: 228, 230, 239;
    --kt-success-rgb: 80, 205, 137;
    --kt-info-rgb: 114, 57, 234;
    --kt-warning-rgb: 255, 199, 0;
    --kt-danger-rgb: 241, 65, 108;
    --kt-dark-rgb: 24, 28, 50;
    --kt-text-white: #ffffff;
    --kt-text-primary: #009ef7;
    --kt-text-secondary: #E4E6EF;
    --kt-text-light: #f5f8fa;
    --kt-text-success: #50cd89;
    --kt-text-info: #7239ea;
    --kt-text-warning: #ffc700;
    --kt-text-danger: #f1416c;
    --kt-text-dark: #181C32;
    --kt-text-muted: #A1A5B7;
    --kt-text-gray-100: #f5f8fa;
    --kt-text-gray-200: #eff2f5;
    --kt-text-gray-300: #E4E6EF;
    --kt-text-gray-400: #B5B5C3;
    --kt-text-gray-500: #A1A5B7;
    --kt-text-gray-600: #7E8299;
    --kt-text-gray-700: #5E6278;
    --kt-text-gray-800: #3F4254;
    --kt-text-gray-900: #181C32;
    --kt-body-bg: #ffffff;
    --kt-body-bg-rgb: 255, 255, 255;
    --kt-body-color: #181C32;
    --kt-link-color: #009ef7;
    --kt-link-hover-color: shift-color(#009ef7, 20%);
    --kt-border-color: #eff2f5;
    --kt-border-dashed-color: #E4E6EF;
    --kt-component-active-color: #ffffff;
    --kt-component-active-bg: #009ef7;
    --kt-component-hover-color: #009ef7;
    --kt-component-hover-bg: #F4F6FA;
    --kt-component-checked-color: #ffffff;
    --kt-component-checked-bg: #009ef7;
    --kt-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --kt-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --kt-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --kt-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --kt-headings-color: #181C32;
    --kt-table-color: #181C32;
    --kt-table-bg: transparent;
    --kt-table-striped-color: #181C32;
    --kt-table-striped-bg: rgba(245, 248, 250, 0.75);
    --kt-table-accent-bg: transparent;
    --kt-table-active-color: #181C32;
    --kt-table-active-bg: #f5f8fa;
    --kt-table-hover-colorr: #181C32;
    --kt-table-hover-bg: #f5f8fa;
    --kt-table-border-color: #eff2f5;
    --kt-table-caption-color: #A1A5B7;
    --kt-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-table-loading-message-bg: #ffffff;
    --kt-table-loading-message-color: #5E6278;
    --kt-input-btn-focus-color: rgba(0, 158, 247, 0.25);
    --kt-input-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 158, 247, 0.25);
    --kt-input-btn-focus-color-opacity: 0.25;
    --kt-input-color: #5E6278;
    --kt-input-placeholder-color: #A1A5B7;
    --kt-input-plaintext-color: #5E6278;
    --kt-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --kt-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 158, 247, 0.25);
    --kt-btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --kt-btn-disabled-opacity: 0.65;
    --kt-btn-link-color: #009ef7;
    --kt-btn-link-hover-color: shift-color(#009ef7, 20%);
    --kt-btn-link-disabled-color: #7E8299;
    --kt-form-label-color: #3F4254;
    --kt-form-text-color: #A1A5B7;
    --kt-input-bg: #ffffff;
    --kt-input-disabled-bg: #eff2f5;
    --kt-input-disabled-color:;
    --kt-input-disabled-border-color: #E4E6EF;
    --kt-input-color: #5E6278;
    --kt-input-border-color: #E4E6EF;
    --kt-input-focus-bg: #ffffff;
    --kt-input-focus-border-color: #B5B5C3;
    --kt-input-focus-color: #5E6278;
    --kt-input-solid-bg: #f5f8fa;
    --kt-input-solid-bg-focus: #eef3f7;
    --kt-input-solid-placeholder-color: #A1A5B7;
    --kt-input-solid-color: #5E6278;
    --kt-form-check-label-color:;
    --kt-form-check-input-active-filter: brightness(90%);
    --kt-form-check-input-bg: transparent;
    --kt-form-check-input-bg-solid: #eff2f5;
    --kt-form-check-input-border: 1px solid #E4E6EF;
    --kt-form-check-input-focus-border: #B5B5C3;
    --kt-form-check-input-focus-box-shadow: none;
    --kt-form-check-input-checked-color: #ffffff;
    --kt-form-check-input-checked-bg-color: #009ef7;
    --kt-form-check-input-checked-bg-color-solid: #009ef7;
    --kt-form-check-input-checked-border-color: #009ef7;
    --kt-form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
    --kt-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
    --kt-form-check-input-indeterminate-color: #ffffff;
    --kt-form-check-input-indeterminate-bg-color: #009ef7;
    --kt-form-check-input-indeterminate-border-color: #009ef7;
    --kt-form-check-input-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --kt-form-check-input-disabled-opacity: 0.5;
    --kt-form-check-label-disabled-opacity: 0.5;
    --kt-form-check-btn-check-disabled-opacity: 0.65;
    --kt-form-switch-color: rgba(0, 0, 0, 0.25);
    --kt-form-switch-color-solid: #ffffff;
    --kt-form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    --kt-form-switch-bg-image-solid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --kt-form-switch-focus-color: #B5B5C3;
    --kt-form-switch-focus-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B5B5C3'/%3e%3c/svg%3e");
    --kt-form-switch-checked-color: #ffffff;
    --kt-form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    --kt-input-group-addon-color: #5E6278;
    --kt-input-group-addon-bg: #f5f8fa;
    --kt-input-group-addon-border-color: #E4E6EF;
    --kt-form-select-color: #5E6278;
    --kt-form-select-bg: #ffffff;
    --kt-form-select-disabled-color:;
    --kt-form-select-disabled-bg: #eff2f5;
    --kt-form-select-disabled-border-color: #E4E6EF;
    --kt-form-select-indicator-color: #7E8299;
    --kt-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237E8299' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --kt-form-select-border-color: #E4E6EF;
    --kt-form-select-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --kt-form-select-focus-border-color: #B5B5C3;
    --kt-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(0, 158, 247, 0.25);
    --kt-form-file-button-color: #5E6278;
    --kt-form-file-button-bg: #f5f8fa;
    --kt-form-file-button-hover-bg: shade-color(#f5f8fa, 5%);
    --kt-nav-tabs-border-color: #eff2f5;
    --kt-nav-tabs-link-hover-border-color: #eff2f5 #eff2f5 #eff2f5;
    --kt-nav-tabs-link-active-color: #5E6278;
    --kt-nav-tabs-link-active-bg: #ffffff;
    --kt-nav-tabs-link-active-border-color: #E4E6EF #E4E6EF #ffffff;
    --kt-nav-pills-link-active-color: #ffffff;
    --kt-nav-pills-link-active-bg: #009ef7;
    --kt-dropdown-color: #181C32;
    --kt-dropdown-bg: #ffffff;
    --kt-dropdown-divider-bg: #f5f8fa;
    --kt-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-dropdown-link-color: #181C32;
    --kt-dropdown-link-hover-color: shade-color(#181C32, 10%);
    --kt-dropdown-link-hover-bg: #eff2f5;
    --kt-dropdown-link-active-color: #ffffff;
    --kt-dropdown-link-active-bg: #009ef7;
    --kt-dropdown-link-disabled-color: #A1A5B7;
    --kt-dropdown-header-color: #7E8299;
    --kt-pagination-item-bg: #ffffff;
    --kt-pagination-color: #5E6278;
    --kt-pagination-bg: transparent;
    --kt-pagination-border-color: transparent;
    --kt-pagination-focus-color: #009ef7;
    --kt-pagination-focus-bg: #F4F6FA;
    --kt-pagination-focus-box-shadow: none;
    --kt-pagination-focus-outline: 0;
    --kt-pagination-hover-color: #009ef7;
    --kt-pagination-hover-bg: #F4F6FA;
    --kt-pagination-hover-border-color: transparent;
    --kt-pagination-active-color: #ffffff;
    --kt-pagination-active-bg: #009ef7;
    --kt-pagination-active-border-color: transparent;
    --kt-pagination-disabled-color: #B5B5C3;
    --kt-pagination-disabled-bg: transparent;
    --kt-card-color:;
    --kt-card-bg: #ffffff;
    --kt-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    --kt-card-border-color: #eff2f5;
    --kt-card-border-dashed-color: #E4E6EF;
    --kt-card-cap-bg: transparent;
    --kt-accordion-color: #181C32;
    --kt-accordion-bg: #ffffff;
    --kt-accordion-border-color: #eff2f5;
    --kt-accordion-button-bg: #ffffff;
    --kt-accordion-button-color: #181C32;
    --kt-accordion-button-active-bg: #f5f8fa;
    --kt-accordion-button-active-color: #009ef7;
    --kt-accordion-button-focus-border-color: #eff2f5;
    --kt-accordion-button-focus-box-shadow: none;
    --kt-accordion-icon-color: #181C32;
    --kt-accordion-icon-active-color: #009ef7;
    --kt-accordion-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23181C32'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --kt-accordion-button-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009ef7'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --kt-tooltip-color: #3F4254;
    --kt-tooltip-bg: #ffffff;
    --kt-tooltip-opacity: 1;
    --kt-tooltip-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-popover-bg: #ffffff;
    --kt-popover-border-color: #ffffff;
    --kt-popover-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-popover-header-bg: #ffffff;
    --kt-popover-header-color: #3F4254;
    --kt-popover-header-border-color: #eff2f5;
    --kt-popover-body-color: #3F4254;
    --kt-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-dropdown-bg: #ffffff;
    --kt-toast-color:;
    --kt-toast-background-color: rgba(255, 255, 255, 0.85);
    --kt-toast-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --kt-toast-header-color: #7E8299;
    --kt-toast-header-background-color: rgba(255, 255, 255, 0.85);
    --kt-toast-header-border-color: rgba(0, 0, 0, 0.05);
    --kt-badge-color: #ffffff;
    --kt-modal-bg: #ffffff;
    --kt-modal-color:;
    --kt-modal-border-color: var(--bs-border-color-translucent);
    --kt-modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    --kt-modal-content-color:;
    --kt-modal-content-bg: #ffffff;
    --kt-modal-content-border-color: var(--bs-border-color-translucent);
    --kt-modal-content-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    --kt-modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --kt-modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --kt-modal-header-border-color: #eff2f5;
    --kt-modal-footer-border-color: #eff2f5;
    --kt-modal-backdrop-bg: #000000;
    --kt-modal-backdrop-opacity: 0.3;
    --kt-progress-bg: #f5f8fa;
    --kt-progress-box-shadow: none;
    --kt-list-group-color: #181C32;
    --kt-list-group-bg: #ffffff;
    --kt-list-group-border-color: rgba(0, 0, 0, 0.125);
    --kt-list-group-hover-bg: #f5f8fa;
    --kt-list-group-active-color: #ffffff;
    --kt-list-group-active-bg: #009ef7;
    --kt-list-group-active-border-colorg: #009ef7;
    --kt-list-group-disabled-color: #7E8299;
    --kt-list-group-disabled-bg: #ffffff;
    --kt-list-group-action-colorg: #5E6278;
    --kt-list-group-action-hover-color: #5E6278;
    --kt-list-group-action-active-color: #181C32;
    --kt-list-group-action-active-bg: #eff2f5;
    --kt-thumbnail-bg: #ffffff;
    --kt-thumbnail-border-color: #eff2f5;
    --kt-thumbnail-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --kt-figure-caption-color: #7E8299;
    --kt-breadcrumb-bg:;
    --kt-breadcrumb-divider-color: #7E8299;
    --kt-breadcrumb-active-color: #009ef7;
    --kt-carousel-custom-indicator-default-bg-color: #eff2f5;
    --kt-carousel-custom-indicator-active-bg-color: #B5B5C3;
    --kt-carousel-custom-bullet-indicator-default-bg-color: #B5B5C3;
    --kt-carousel-custom-bullet-indicator-active-bg-color: #7E8299;
    --kt-code-bg: #F1F3F8;
    --kt-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
    --kt-code-color: #b93993;
    --kt-btn-close-color: #000000;
    --kt-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --kt-offcanvas-border-color: var(--bs-border-color-translucent);
    --kt-offcanvas-bg-color: #ffffff;
    --kt-offcanvas-color:;
    --kt-offcanvas-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --kt-offcanvas-backdrop-bg: #000000;
    --kt-offcanvas-backdrop-opacity: 0.3;
    --kt-symbol-label-color: #3F4254;
    --kt-symbol-label-bg: #f5f8fa;
    --kt-symbol-border-color: rgba(255, 255, 255, 0.5);
    --kt-bullet-bg-color: #B5B5C3;
    --kt-scrolltop-opacity: 0;
    --kt-scrolltop-opacity-on: 0.3;
    --kt-scrolltop-opacity-hover: 1;
    --kt-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --kt-scrolltop-bg-color: #009ef7;
    --kt-scrolltop-bg-color-hover: #009ef7;
    --kt-scrolltop-icon-color: #ffffff;
    --kt-scrolltop-icon-color-hover: #ffffff;
    --kt-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
    --kt-drawer-bg-color: #ffffff;
    --kt-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
    --kt-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-menu-dropdown-bg-color: #ffffff;
    --kt-menu-heading-color: #A1A5B7;
    --kt-menu-link-color-hover: #009ef7;
    --kt-menu-link-color-show: #009ef7;
    --kt-menu-link-color-here: #009ef7;
    --kt-menu-link-color-active: #009ef7;
    --kt-menu-link-bg-color-hover: #F4F6FA;
    --kt-menu-link-bg-color-show: #F4F6FA;
    --kt-menu-link-bg-color-here: #F4F6FA;
    --kt-menu-link-bg-color-active: #F4F6FA;
    --kt-feedback-popup-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --kt-feedback-popup-background-color: #ffffff;
    --kt-scrollbar-color: #eff2f5;
    --kt-scrollbar-hover-color: #e9edf1;
    --kt-scrollbar-width: 0.4rem;
    --kt-scrollbar-height: 0.4rem;
    --kt-scrollbar-space: 0.5rem;
    --kt-overlay-bg: rgba(0, 0, 0, 0.05);
    --kt-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
    --kt-rating-color-default: #B5B5C3;
    --kt-rating-color-active: #FFAD0F;
    --kt-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(24, 28, 50, 0.1);
    --kt-ribbon-label-bg: #009ef7;
    --kt-ribbon-label-border-color: #005d91;
    --kt-ribbon-clip-bg: #181C32;
}



/*-----------*//**/


.app-main {
    display: flex;
}

@media (min-width: 992px) {
    .app-main {
        transition: margin 0.3s ease;
    }

    [data-kt-app-sidebar-sticky=true] .app-main {
        margin-left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
    }

    [data-kt-app-sidebar-panel-sticky=true] .app-main {
        margin-left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px) + var(--kt-app-sidebar-panel-width) + var(--kt-app-sidebar-panel-gap-start, 0px) + var(--kt-app-sidebar-panel-gap-end, 0px));
    }

    [data-kt-app-aside-sticky=true] .app-main {
        margin-right: calc(var(--kt-app-aside-width) + var(--kt-app-aside-gap-start, 0px) + var(--kt-app-aside-gap-end, 0px));
    }
}

@media (max-width: 991.98px) {
    .app-main {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .app-content {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 991.98px) {
    .app-content {
        max-width: none;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }
}

.app-footer {
    transition: left 0.3s ease, right 0.3s ease;
    display: flex;
    align-items: stretch;
}

@media (min-width: 992px) {
    .app-footer {
        background-color: var(--kt-app-footer-bg-color);
        box-shadow: var(--kt-app-footer-box-shadow);
        border-top: var(--kt-app-footer-border-top);
    }

    :root {
        --kt-app-footer-height: 60px;
    }

    .app-footer {
        height: var(--kt-app-footer-height);
    }

    [data-kt-app-footer-fixed=true] .app-footer {
        z-index: 100;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }

    [data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-footer=true] .app-footer {
        left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px));
    }

    [data-kt-app-sidebar-panel-fixed=true][data-kt-app-sidebar-panel-push-footer=true] .app-footer {
        left: calc(var(--kt-app-sidebar-width) + var(--kt-app-sidebar-gap-start, 0px) + var(--kt-app-sidebar-gap-end, 0px) + var(--kt-app-sidebar-panel-width) + var(--kt-app-sidebar-panel-gap-start, 0px) + var(--kt-app-sidebar-panel-gap-end, 0px));
    }

    [data-kt-app-aside-fixed=true][data-kt-app-aside-push-footer=true] .app-footer {
        right: calc(var(--kt-app-aside-width) + var(--kt-app-aside-gap-start, 0px) + var(--kt-app-aside-gap-end, 0px));
    }
}

@media (max-width: 991.98px) {
    .app-footer {
        background-color: var(--kt-app-footer-bg-color-mobile);
        box-shadow: var(--kt-app-footer-box-shadow-mobile);
        border-top: var(--kt-app-footer-border-top-mobile);
    }

    body {
        --kt-app-footer-height: auto;
    }

    .app-footer {
        height: var(--kt-app-footer-height);
    }

    [data-kt-app-footer-fixed-mobile=true] .app-footer {
        z-index: 100;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.app-layout-builder-toggle {
    position: fixed;
    z-index: 105;
    bottom: 40px;
    right: 50px;
}

@media (max-width: 991.98px) {
    .app-layout-builder-toggle {
        bottom: 20px;
        right: 40px;
    }
}

.flex-fill {
    flex: 1 1 auto !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}


.flex-column-auto {
    flex: none;
}

.flex-column-fluid {
    flex: 1 0 auto;
}

.flex-row-auto {
    flex: 0 0 auto;
}

.flex-row-fluid {
    flex: 1 auto;
    min-width: 0;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-start {
    justify-content: start;
    align-items: start;
}

.flex-end {
    justify-content: end;
    align-items: end;
}

.flex-stack {
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 576px) {
    .flex-sm-root {
        flex: 1;
    }

    .flex-sm-column-auto {
        flex: none;
    }

    .flex-sm-column-fluid {
        flex: 1 0 auto;
    }

    .flex-sm-row-auto {
        flex: 0 0 auto;
    }

    .flex-sm-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .flex-sm-center {
        justify-content: center;
        align-items: center;
    }

    .flex-sm-start {
        justify-content: start;
        align-items: start;
    }

    .flex-sm-end {
        justify-content: end;
        align-items: end;
    }

    .flex-sm-stack {
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .flex-md-root {
        flex: 1;
    }

    .flex-md-column-auto {
        flex: none;
    }

    .flex-md-column-fluid {
        flex: 1 0 auto;
    }

    .flex-md-row-auto {
        flex: 0 0 auto;
    }

    .flex-md-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .flex-md-center {
        justify-content: center;
        align-items: center;
    }

    .flex-md-start {
        justify-content: start;
        align-items: start;
    }

    .flex-md-end {
        justify-content: end;
        align-items: end;
    }

    .flex-md-stack {
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .flex-lg-root {
        flex: 1;
    }

    .flex-lg-column-auto {
        flex: none;
    }

    .flex-lg-column-fluid {
        flex: 1 0 auto;
    }

    .flex-lg-row-auto {
        flex: 0 0 auto;
    }

    .flex-lg-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .flex-lg-center {
        justify-content: center;
        align-items: center;
    }

    .flex-lg-start {
        justify-content: start;
        align-items: start;
    }

    .flex-lg-end {
        justify-content: end;
        align-items: end;
    }

    .flex-lg-stack {
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .flex-xl-root {
        flex: 1;
    }

    .flex-xl-column-auto {
        flex: none;
    }

    .flex-xl-column-fluid {
        flex: 1 0 auto;
    }

    .flex-xl-row-auto {
        flex: 0 0 auto;
    }

    .flex-xl-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .flex-xl-center {
        justify-content: center;
        align-items: center;
    }

    .flex-xl-start {
        justify-content: start;
        align-items: start;
    }

    .flex-xl-end {
        justify-content: end;
        align-items: end;
    }

    .flex-xl-stack {
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 1400px) {
    .flex-xxl-root {
        flex: 1;
    }

    .flex-xxl-column-auto {
        flex: none;
    }

    .flex-xxl-column-fluid {
        flex: 1 0 auto;
    }

    .flex-xxl-row-auto {
        flex: 0 0 auto;
    }

    .flex-xxl-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }

    .flex-xxl-center {
        justify-content: center;
        align-items: center;
    }

    .flex-xxl-start {
        justify-content: start;
        align-items: start;
    }

    .flex-xxl-end {
        justify-content: end;
        align-items: end;
    }

    .flex-xxl-stack {
        justify-content: space-between;
        align-items: center;
    }
}

.flex-equal {
    flex-grow: 1;
    flex-basis: 0;
    flex-shrink: 0;
}

.shadow-xs {
    box-shadow: var(--kt-box-shadow-xs);
}

.shadow-sm {
    box-shadow: var(--kt-box-shadow-sm);
}

.shadow {
    box-shadow: var(--kt-box-shadow);
}

.shadow-lg {
    box-shadow: var(--kt-box-shadow-lg);
}

.d-flex {
    display: flex !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

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

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}
.right-div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    padding: 10px;    
    z-index: 2; /* Set a higher z-index value */
}
.centered-container {    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-text {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .rz-body, .card-body, .rz-dialog-content {
        padding-left: 0.5rem !important;
        padding-top: 1.0rem !important;
        padding-bottom: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

@media screen and (max-width:1200px) {
    .rz-grid-table-fixed .rz-frozen-cell, .rz-grid-table thead th {
        position: initial !important;
    }
}

.alert-dismissible {
    padding-right: 3.8125rem;
    padding-bottom: 1rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem; /* Adjusted padding for uniform space */
    color: #813e42; /* This color will stand out against the light background */
    background-color: transparent; /* Optional: change if you want a background */
    border: none; /* Removing the default border that might look out of place */
    cursor: pointer; /* To indicate the button is clickable */
    outline: none; /* To remove the focus outline which might look awkward */
}

    .alert-dismissible .close:hover,
    .alert-dismissible .close:focus {
        color: #681c1e; /* A darker shade for hover state for better contrast */
        text-decoration: none;
        background-color: #fdd9db; /* A subtle background on hover could be nice */
    }

    .alert-dismissible .close .material-icons {
        font-size: 24px; /* Slightly larger icon size for better visibility */
        line-height: 1; /* Ensures the icon is centered vertically */
        vertical-align: middle; /* Aligns the icon vertically */
    }

.DropDownSearch-container {
    position: relative;
    width: fit-content;
}

.DropDownSearch-box {
    display: flex;
    align-items: center;
    /*border: 1px solid #ced4da;*/
    border-radius: 0.25rem;
    position: relative;
}

.DropDownSearch-input {
    border: none;
    border-radius: 0.25rem 0 0 0.25rem;
    flex-grow: 1;
}

.DropDownSearch-button {
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
}

.DropDownSearch-arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    margin-bottom: 2px;
}

.DropDownSearch-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--rz-lookup-panel-background-color) !important;
}

/* Level 1 nesting */
.rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-text {
    padding-left: 15px;
}

/* Level 2 nesting */
.rz-navigation-menu > .rz-navigation-item > .rz-navigation-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-text {
    padding-left: 30px;
}

.login-with-google-btn {
    transition: background-color .3s, box-shadow .3s;
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
    &:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }
    &:active {
        background-color: #eeeeee;
    }

    &:focus {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }

    &:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }
}

.grid-footer-totals {
    font-weight: bold;
    /* Add other styling here */
}

/**** Invoice structure ****/
/***************/

/* Overall Invoice Container */
.Invoice-container {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    width: 190mm; /* Adjusted for A4 size */
    min-height: 277mm; /* Adjusted for A4 size, leaving some margin */
    margin: auto;
    background: #fff;
    padding: 15mm;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative; /* Needed for absolute positioning of the footer */
    page-break-after: always;
}

/* Top Header with Logo and Main Title */
.Invoice-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .Invoice-top-header h1 {
        color: black !important; /* Forces black text */
        margin: 0;
        font-size: 2rem;
    }

.Invoice-logo img {
    max-height: 100px; /* Adjust as needed */
}

/* Horizontal Divider */
.invoice-hr-divider {
    border: none;
    height: 1px;
    background-color: #ddd;
    margin: 20px 0;
}

/* Body Section for Address and Meta Details */
.Invoice-body {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns of equal width */
    gap: 20px; /* Adjust the gap as needed */
}

.Invoice-address p, .Invoice-meta-details p 
{
        margin: 4px 0; /* Adjust spacing for paragraphs in the address */
}

.Invoice-meta-details {
    display: grid;
    grid-template-columns: 220px 100px; /* Adjust the size or use fr units as needed */
    gap: 2px; /* Adjust the gap between grid items as needed */
    max-width: 500px; /* Adjust based on your needs */
    margin: auto;
}

.Invoice-meta-detail {
    display: contents;
}

.Invoice-detail-title {
    text-align: right;
    padding-right: 10px; /* Creates a visual separation between title and content */
}

.Invoice-detail-content {
    text-align: left;
    width: 200px; /* Fixed width for the content column */
    max-width: 200px; /* Ensures content does not exceed the set width */
}

/* Table Styles for Item Listing */
.Invoice-items table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 0; /* Remove margin bottom to prevent extra space */
    color: black !important
}

.Invoice-items .no-wrap {
    white-space: nowrap;
}

.Invoice-items th, .Invoice-items td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    color: black !important;
}

.Invoice-items th, .Invoice-items td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    color: black !important;
}

    .Invoice-items td.item-reference {
        white-space: normal;
        word-break: break-word; /* Adjust if words are inappropriately broken */
        overflow-wrap: anywhere; /* This allows the break anywhere if needed, but respects normal word breaks */
        hyphens: none; /* Prevent automatic hyphenation */
    }



.Invoice-items th {
    background-color: #f5f5f5;
}


/* Adjusted Totals Section */
.invoice-totals-grid {
    margin-top: 0px; /* Space between items and totals */
}

.invoice-totals-row {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    background-color: #f5f5f5; /* Matches the header for continuity */
}

.invoice-totals-label {
    padding: 10px;
    text-align: right;
    box-sizing: border-box; /* Ensure padding is included in the width */
}

    .invoice-totals-label strong {
        display: block; /* Ensure strong text occupies full width */
        text-align: right; /* Align strong text to the right */
    }


.invoice-totals-value {
    padding: 10px;
    text-align: right;
    width: 100px; /* Adjust as needed */    
}

.invoice-totals-grid .invoice-totals-row:first-child .invoice-totals-value {
    border-top: none; /* Avoids double border at the top */
}

.Invoice-payment-details {
    text-align: center;
    margin: 20px 0; /* Adjust as needed */
}

.invoice-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    text-align: left;
    margin: auto;
    width: 80%; /* Adjust based on your preference */
}

.invoice-left-item {
    justify-self: end; /* Right align the left item */
    padding-right: 10px; /* Creates a gap between the columns */
}

.invoice-right-item {
    justify-self: start; /* Left align the right item */
}

.invoice-center-text {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 20px;
    text-decoration: underline;
}

.Invoice-real-footer {
    position: absolute;
    bottom: 15mm; /* Distance from the bottom */
    width: calc(100% - 30mm); /* Adjusting for the padding of the container */
    text-align: center;
    color: #999;
    font-size: 12px;    
}

.invoice-thank-you-message {
    position: absolute;
    bottom: 35mm; /* Adjust this value based on the height of your footer */
    width: calc(100% - 40mm); /* Adjusting for the padding of the container */
    text-align: center;
    color: #999;
    font-size: 14px;
    left: 15mm; /* Aligning with the container's padding */
}
/* Ensure the real footer is placed correctly in print */
@media print {
    .Invoice-real-footer {
        position: fixed;
        bottom: 15mm; /* Match container padding to ensure alignment */
        left: 0;
        right: 0;
    }
}

.form-field-group {
    display: flex;
    align-items: center; /* Ensures vertical centering */
    justify-content: space-between;
    margin-bottom: 10px; /* Adjust based on your preference */
}

    .form-field-group .radzen-button {
        margin-left: 20px; /* Adds space before the button starts */
    }


.rz-cell-data {
    font-size: 13px !important;
}

.rz-grid-table td {
    padding: 6px !important;
}



.timeline {
    position: relative;    
}

    .timeline::before {
        content: "";
        background: #C5CAE9;
        width: 5px;
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }


.timeline-item {
    width: 100%;
    margin-bottom: 70px;
    transition: transform 0.3s ease;
}

    .timeline-item:nth-child(even) .timeline-content {
        float: right;
        padding: 40px 30px 10px 30px;
    }

        .timeline-item:nth-child(even) .timeline-content .date {
            right: auto;
            left: 0;
        }

        .timeline-item:nth-child(even) .timeline-content::after {
            content: "";
            position: absolute;
            border-style: solid;
            width: 0;
            height: 0;
            top: 30px;
            left: -15px;
            border-width: 10px 15px 10px 0;
            border-color: transparent #d8d8d8 transparent transparent;
        }

    .timeline-item::after {
        content: "";
        display: block;
        clear: both;
    }

    .timeline-item:hover {
        transform: scale(1.05);
    }


.timeline-content {
    position: relative;
    width: 45%;
    padding: 10px 30px;
    border-radius: 4px;
    background-color: var(--bs-body-bg);
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}

    .timeline-content::after {
        content: "";
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        right: -15px;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #d8d8d8;
    }

.timeline-img {
    width: 30px;
    height: 30px;
    background: #3F51B5;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-top: 25px;
    margin-left: -15px;
}

.timeline-card {
    padding: 0 !important;
}

    .timeline-card p {
        padding: 0 20px;
    }

    .timeline-card a {
        margin-left: 20px;
    }


.timeline-item .timeline-img-header {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("https://picsum.photos/1000/800/?random") center center no-repeat;
    background-size: cover;
}

.timeline-img-header {
    height: 200px;
    position: relative;
    margin-bottom: 20px;
}

    .timeline-img-header h2 {
        color: #FFFFFF;
        position: absolute;
        bottom: 5px;
        left: 20px;
    }

blockquote {
    margin-top: 30px;
    color: #757575;
    border-left-color: #3F51B5;
    padding: 0 20px;
}

.timelinedate {
    background: #FF4081;
    display: inline-block;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.timelinecard-detail {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .timeline::before {
        left: 50px;
    }

    .timeline .timeline-img {
        left: 50px;
    }

    .timeline .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
        transition: transform 0.3s ease;
    }

    .timeline .timeline-item:nth-child(even) .timeline-content {
        float: none;
    }

    .timeline .timeline-item:nth-child(odd) .timeline-content::after {
        content: "";
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        left: -15px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #f5f5f5 transparent transparent;
    }

    .timeline-item:hover {
        transform: none;
    }

    .timeline-content:hover {
        transform: scale(1.05);
    }
}

.exclude-container {
    display: flex;
    gap: 5px;
    justify-content: space-between;
}

.data-list {
    display: grid;
    gap: 16px;
}

@media screen and (min-width: 1460px) {
    /* Large screens (4 columns) */
    .data-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1459px) {
    /* Normal screens (3 columns) */
    .data-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* Normal screens (2 columns) */
    .data-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    /* Small screens (1 column) */
    .data-list {
        grid-template-columns: 1fr;
    }
}

.animCards {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    max-width: 820px;
    margin-bottom: 35px;
}

.animCard--strawberry .animCard__img,
.animCard--strawberry .animCard__img--hover {
    background-image: url(resource/strawberry.jpg);
}

.animCard__like {
    width: 18px;
}

.animCard__clock {
    width: 20px;
    vertical-align: middle;
    fill: #AD7D52;
}

.animCard__time {
    font-size: 20px;
    color: #AD7D52;
    vertical-align: middle;
    margin-left: 5px;
}

.animCard__clock-info {
    float: right;
}

.animCard__img {
    visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.animCard__info-hover {
    position: absolute;
    padding: 16px;
    width: 100%;
    opacity: 0;
    top: 0;
}

.animCard__img--hover {
    transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
}

.animCard {
    margin-right: 25px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fff;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
    min-width: 280px;
    width: 80%;
    /*border: 1px solid #A1A5B7;*/
}

    .animCard:hover {
        box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
        transform: scale(1.10, 1.10);
    }

.animCard__info {
    z-index: 2;
    background-color: #ffff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 16px 24px 24px 24px;
}

.animCard__category {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #868686;
}

.animCard__title {
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: 'Roboto Slab', serif;
}

.animCard__by {
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.animCard__author {
    font-weight: 600;
    text-decoration: none;
    color: #AD7D52;
}

.animCard:hover .animCard__img--hover {
    height: 100%;
    opacity: 0.2;
}

.animCard:hover .animCard__info {
    background-color: transparent;
    position: static;
}

.animCard:hover .animCard__info-hover {
    opacity: 1;
}

/* Initially hide the button */
.animCard__info .hover-options {
    display: none;
    position: absolute;
    top: 10px; /* Move up by 10px */
    left: 10px; /* Move left by 10px */
}

/* Show the button when .animCards is being hovered */
.animCard:hover .animCard__info .hover-options {
    display: block;
}

    .animCard:hover .animCard__info .hover-options li {
        font-size: 1.2rem;
    }

.animCard__info__Container {
    display: flex;
    margin-top: 10px;
    margin-left: -10px;
}

.animCard:hover .animCard__info .hover-options .animCard__info__Container h5 {
    font-size: 0.8rem;
}

.animCard:hover .animCard__info .hover-options .animCard__info__Container li {
    font-size: 0.8rem;
    margin-left: -10px;
}

.dataarticle {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 16px;
    box-shadow: none;
    background: #fff;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    min-width: 250px;
}

    /* basic dataarticle elements styling */
    .dataarticle h2 {
        margin: 0 0 18px 0;
        color: var(--title-color);
        transition: color 0.3s ease-out;
    }

.dataarticlefigure {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.dataarticle-letter-only {
    width: 100%;
    height: 100%;
    background-color: var(--rz-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.dataarticle-selected {
    width: 100%;
    height: 100%;
    background-color: var(--rz-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.dataarticle img {
    max-width: 100%;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
}





.dataarticle a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #28666e;
}

    .dataarticle a:focus {
        outline: 1px dotted #28666e;
    }

    .dataarticle a .icon {
        min-width: 24px;
        width: 24px;
        height: 24px;
        margin-left: 5px;
        transform: translateX(var(--link-icon-translate));
        opacity: var(--link-icon-opacity);
        transition: all 0.3s;
    }

/* using the has() relational pseudo selector to update our custom properties */
.dataarticle:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    cursor: pointer;
}

.dataarticle.non-pointer:hover, .dataarticle.non-pointer:focus {
    cursor: auto;
}




.dataarticles {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}



.dataarticle-wrapper {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    height: 100%;
    background-color: #f7f7f7;
}

.dataarticle-wrapper2 {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 10px;
    height: 100%;
    background-color: #f7f7f7;
}

.dataarticlefigure {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .dataarticlefigure img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }


.dataarticle-body {
    display: flex; /* Use Flexbox to arrange columns */
    justify-content: space-between; /* Spread columns evenly */
    /*gap: 5px;*/ /* Space between columns */    
}

.dataarticle-column {
    flex: 1; /* Ensure all columns take equal width */
    display: flex;
    flex-direction: column; /* Align content vertically */
    padding: 10px;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.dataarticle-header {
    font-weight: bold;
    margin-bottom: 10px;
}

.dataarticle-data {
    text-align: center;
}