/*  xs ~575px  sm 576px  md 768px  lg 992px xlg 1200px ExLg 1400*/

:root {
    /* 顏色參數 */
    --color-lightGray: #f4f4f4;
    --color-gray: #555;
    --color-blue: #0D417A; /*#003B6D*/
    --color-lightBlue: #1565c0;
    --color-green: #2E7D32;
    --color-lightGreen: #3BA140;
    --color-pink: #F06292;
    --color-darkPurple: #5E2E64;
    --color-purple: #A356D8;
    --color-dark: #535b6a;
    --color-brown: #87432B;
    --color-red: #AA2000;
    --color-orange: #E65100;
    --color-grayLabel: #999998;
    --kendo-color-primary: #1565c0;
    --kendo-color-secondary: #A356D8;
    --kendo-color-success: #3BA140;
    --kendo-color-light: #ededed;
    --kendo-color-info: #005092;
    --kendo-color-error: #AA2000;
    --kendo-color-warning: #E65100;
    --kendo-color-warning-on-surface: #FF6B1A;
    --kendo-color-light-hover: #f2f2f2;
    --kendo-font-family: 'Noto Sans TC', Roboto, "Helvetica Neue", sans-serif;
    --kendo-font-size: 1rem;
    --kendo-font-size-xs: 0.72rem;
    --kendo-color-on-error: #fff;
    --kendo-color-on-base: #00243F;
    --kendo-color-primary-on-surface: #00243F;
    --kendo-color-info-on-surface: oklch(32.02% 0.1335 260.39deg);
}

.noto-sans-tc-nototc {
    font-family: "Noto Sans TC", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Noto Sans TC", 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#appContent {
    flex: 1;
    overflow: auto;
}

.appbar-bottom {
    flex-shrink: 0;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
}

main {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    flex: 1;
    overflow-y: auto;
}

#PageBody {
    flex: 1;
    height: 100vh;
    padding: 0 0 150px;
    background-color: #fff;
    overflow-y: auto;
}

main.adm #PageBody {
    background-color: #efefef;
}
.k-drawer-content {
    padding-block: 0;
    padding-inline: 0;
}

.k-body {
    background-color: #fafafa;
    min-height: 100vh;
}

.editor-body {
    background-color: #fafafa;
}

h1:focus {
    outline: none;
}

a, .k-button-link {
    text-decoration: none; /* 顯示底線 */
    text-decoration-thickness: 2px; /* 底線粗細 */
    text-underline-offset: 4px; /* 底線與文字的距離 */
    /*text-decoration-color: #0077cc;  底線顏色（可選） */
}

    a:hover {
        opacity: 0.8;
        /*color: var(--kendo-color-primary);*/
        text-decoration: none;
    }

a {
    color: var(--kendo-color-primary-on-surface);
}



h1, h2, h3, h4, .k-h1, .k-h2, .k-h3, .k-h4 {
    font-family: "Noto Sans TC", Open Sans, sans-serif;
    color: #000e33;
    font-weight: 700;
}

h1, h2, h3, h4 {
    margin: 14px 0 8px;
}

.k-h1, .k-h2, .k-h3, .k-h4 {
    margin: 0;
    padding: 0;
}

h1, .k-h1 {
    font-size: 42px;
    letter-spacing: 0;
    margin: 20px 0 0px;
}

h2, .k-h2 {
    font-size: 38px;
}

h3, .k-h3 {
    font-size: 28px;
}

h4, .k-h4 {
    font-size: 20px;
}

@media all and (max-width: 575px) {
    h1, .k-h1 {
        font-size: 30px;
        letter-spacing: 0;
        line-height: 32px;
        text-align: center;
    }

    h2, .k-h2 {
        font-size: 26px;
    }

    h3, .k-h3 {
        font-size: 20px;
    }

    h4, .k-h4 {
        font-size: 17px;
    }
}

dd, dl {
    margin: 0;
}

legend:empty {
    display: none;
}

.k-button.k-button-sm {
   /* padding-block: calc(var(--kendo-spacing-2\.5) / 2);*/
    padding-inline: var(--kendo-spacing-4, 1.5rem);
}


    .k-button.k-button-sm.k-icon-button:not(:has(.k-button-text)) {
        padding-inline: calc(var(--kendo-spacing-3\.5) / 2); 
    } 

/*button.k-icon-button:not(:has(.k-button-text)) {
    padding: 1rem;
    padding-block: calc(var(--kendo-spacing-2\.5) / 2);
}*/

.gridStateBtn.k-button-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}

.gridStateBtn.k-button-base {
    background: #eee !important;
    color: #333 !important;
}




/* TELERIK PROJECT TEMPLATE STYLES */

/* Overall Layout and Drawer */


.k-window {
    max-height: 100vh;
}

.k-appbar {
    box-shadow: var(--kendo-elevation-2, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
    background-color: #fafafa;
    padding-block: 2px;
    padding-inline: 8px;
}


.container {
    max-width: 1170px;
    margin: 0 auto;
    padding-inline: 30px;
    flex: 1 1 auto;
}

.a-container {
    padding-inline: 30px;
    flex: 1 1 auto;
}

    .a-container:has(> *) {
    }

.all-container {
    max-width: 1300px;
    padding-bottom: 40px;
    /* border-radius: 16px;*/
    margin: 0 auto;
    border: 0 2px 2px;
    border-color: #e0e5e8;
    padding-inline: 20px;
}

.sm-container {
    max-width: 1120px;
    padding: 0 40px 40px;
    margin: 0 auto;
    flex: 1 1 auto;
}


@media all and (max-width: 1460px) {
    .all-container {
        border-radius: 0;
        border-width: 1px 0
    }
}

@media all and (max-width: 1280px) {
    .container:not(.all-container) {
        padding-inline: 30px !important;
    }
}

@media all and (max-width: 960px) {
    .container:not(.all-container) {
        padding-inline: 26px !important;
    }
}

@media all and (max-width: 800px) {
    .container:not(.all-container) {
        padding-inline: 18px !important;
    }
}

@media all and (max-width: 575px) {
    .container:not(.all-container) {
        padding-inline: 12px !important;
    }

    .all-container, .sm-container {
        padding-inline: 10px;
    }

    .hide-splitbar .k-splitbar {
        display: none !important;
    }

    #PageBody {
        padding: 0 0 20px;
    }

    #appContent {
    }

    .appbar-bottom {
        position: sticky !important;
        bottom: 0;
        width: 100%;
    }

    .a-container {
        padding-inline: 10px;
    }

    .k-tabstrip-content, .k-tabstrip > .k-content {
        padding-inline: var(--kendo-spacing-1);
    }
}

.k-menu:not(.k-context-menu) {
    gap: 1px;
}

.k-menu-horizontal > .k-separator {
    margin-block: var(--kendo-spacing-5);
}

.layout-drawer {
    flex: 1;
    align-items: stretch;
    overflow: hidden;
}

    .layout-drawer > .k-drawer .k-drawer-items {
        margin-top: 1em;
    }

/* Top AppBar */
div.appbarFull {
    z-index: 1;
}

div.appbarCenter {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: 1370px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.appbarFull > div, .appbarCenter > div {
    line-height: 2.0;
}


#app-title {
    display: flex;
    gap: .2em;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
}

    #app-title img {
        height: 32px;
    }

    #app-title strong {
        font-weight: 700;
        font-size: 22px;
    }

    #app-title sup {
        font-size: .4em;
    }

    #app-title a,
    #app-title a:hover {
        text-decoration: none;
        color: inherit;
    }

#app-menu .k-menu-link {
    padding-block: 0.3rem;
    padding-inline: 0.3rem;
}

@media all and (max-width: 767px) {

    #app-title strong {
        font-size: 18px;
    }

    #PageHeader h1 {
        line-height: 0.6;
    }

    #PageHeader .desc {
        display: none;
    }
}

#PageHeader {
    background-color: #f6f6f6;
    border-bottom: 1px solid #e2e5eb;
}

    #PageHeader .desc {
        color: #535b6a;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 26px;
        margin-bottom: 18px;
    }

    #PageHeader .k-tabstrip-content {
        display: none !important;
    }
/* Main Content */

.k-appbar-section .k-button.k-button-solid.bg-light {
    background-color: var(--color-lightGray) !important;
    padding-inline: 10px;
}

/* Bottom AppBar */


div.appbar-bottom {
    z-index: 1;
    background-color: var(--kendo-color-surface);
    color: var(--kendo-color-subtle);
}

#copyright {
    padding: .5em 0;
}

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

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Member Layout Drawer / SideMenu /HierTree */
.k-drawer-container {
    height: 100%;
}

.k-drawer-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    /*  border-left:4px solid #eee; */
}

.k-drawer-expanded .k-drawer.k-drawer-start {
    /* border-inline-end-width: 0; */
    border-right: 6px solid #eee !important;
}


.k-menu-vertical > .k-menu-item > .k-menu-link {
    padding-inline-end: var(--kendo-spacing-1);
}

.sideMnu .k-menu-link > a {
    width: 100%;
}

    .sideMnu .k-menu-link > a.active {
        color: var(--color-orange) !important;
    }

.sPanelBar.k-panelbar > .k-panelbar-header > .k-link {
    padding-block: var(--kendo-spacing-2\.5);
}

/* 當 .k-menu-link 裡面有 .tree 時套用樣式 */

.k-panelbar > .k-panelbar-header > .k-link,
.k-panelbar > .k-panelbar-header > .k-link.k-selected,
.k-panelbar > .k-panelbar-header > .k-link.k-selected:focus,
.k-panelbar > .k-panelbar-header > .k-link.k-selected.k-focus,
.k-panelbar > .k-panelbar-header > .k-link:hover, .k-panelbar > .k-panelbar-header > .k-link.k-hover,
.k-panelbar > .k-panelbar-header > .k-link.k-selected:hover, .k-panelbar > .k-panelbar-header > .k-link.k-selected.k-hover {
    background-color: #e8e8e8;
    color: var(--kendo-color-primary-on-surface);
    box-shadow: var(--kendo-elevation-1);
}

.hierTree .k-treeview-leaf {
    cursor: pointer;
    color: var(--kendo-color-primary-on-surface);
}

.hierTree .k-treeview-leaf-text {
    font-weight: 500;
    margin-left: 8px;
}



/*Custom*/

.k-window-titlebar {
    padding-block: 4px;
}

.k-window-actions {
    padding-block: 1rem;
}

.k-list-lg .k-list-item {
    height: 30px !important;
    line-height: 30px !important;
}

.k-tabstrip-content:has(> .k-form:first-child) {
    padding-top: 0px;
}

.k-tabstrip.noContent .k-tabstrip-content {
    display: none !important;
}


.k-grid .k-group-col {
    width: 8px; /* 這裡修改你想要的寬度 */
}

.k-form .k-form-legend {
    margin-bottom: 0;
}

.k-form .k-form-fieldset .k-form-layout {
    margin-left: 4px;
}

@media all and (max-width: 590px) {
    .k-window-content .k-form-fieldset:not(:first-of-type) {
        margin-top: 20px !important;
    }
}

.k-form-hint {
    color: #07a;
}

.k-grid-header .k-column-title {
    font-size: 1.0rem !important;
}

.k-pane .k-calendar-sm .k-month-calendar, .k-pane .k-calendar-sm .k-calendar-monthview {
    --INTERNAL--kendo-calendar-cell-size: 34px; /*var(--kendo-calendar-sm-month-cell-size, 40px);*/
}

.k-pane .k-calendar-header {
    min-width: 270px;
}

.k-pane .k-calendar-sm {
    width: 270px;
}

    .k-pane .k-calendar-sm .k-calendar-view {
        width: 270px;
        inline-size: 270px;
        min-height: 270px;
    }


section, .section {
    margin-top: 30px;
}
    section:first-child:not(.bdSection-top),
    .section:first-child:not(.bdSection-top) {
        margin-top: 20px;
    }

.secTitle {
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 38px;
    color:#444;
    display: inline-block;
}
.bdSection {
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-width: 2px;
    padding: 1rem 1.2rem 1rem;
    border-radius: 15px;
}

.bdSection-top {
    border-width: 0 2px 2px 2px;
    border-radius: 0 0 15px 15px;
    margin-top: 0;
}

.anchorTab-wrapper {
    position: sticky;
    top: 0px;
    z-index: 1000;
    background-color: white; /* 避免透明 */
    padding-top: 10px;
}

.k-window-content:has(:first-child.anchorTab-wrapper) {
    padding-top: 0;
}

.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: #efefef;
    opacity: .25;
}

.iconBtn {
    /*width: 50px;  可調整寬度  color: #005092;*/
    transition: color 0.3s ease;
    font-size: 15px;
    text-decoration: none;
    padding: 4px 6px;
    color: var( --kendo-color-primary-on-surface);
}


.iconTop {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.iconBtn .k-icon-xl {
    font-size: 19px; /* Icon 的大小 */
}

.color-white {
    color: #f2f2f2 !important;
}

.color-lightGray {
    color: var(--color-lightGray);
}

.color-gray {
    color: var(--color-gray);
}

.color-blue {
    color: var(--color-blue) !important;
}

.color-lightBlue {
    color: var(--color-lightBlue) !important;
}

.color-green {
    color: var(--color-green);
}
.color-lightGreen {
    color: var(--color-lightGreen);
}

.color-pink {
    color: var(--color-pink);
}

.color-darkPurple {
    color: var(--color-darkPurple);
}

.color-purple {
    color: var(--color-purple);
}

.color-dark {
    color: var(--color-dark);
}

.color-brown {
    color: var(--color-brown);
}

.color-red {
    color: var(--color-red);
}

.color-orange {
    color: var(--color-orange) !important;
}

.bg-base {
    background-color: var(--kendo-color-base) !important;
}

.bg-light {
    background-color: var(--color-lightGray) !important;
}

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

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

.bg-green {
    background-color: var(--color-green) !important;
}
.bg-lightGreen {
    background-color: var(--color-lightGreen) !important;
}

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

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

.badge {
    border-radius: 1.6rem;
    padding: 1px 6px 2px !important;
    margin: 0 3px;
    font-size: 12px;
    white-space: nowrap;
}

    .badge .k-avatar {
        vertical-align: unset;
        margin-inline-end: 2px;
    }

    .badge:has(> span:only-child) {
        padding: 1px 6px !important;
    }

.badge-lightGray {
    background-color: var(--color-lightGray);
    border-color: var(--color-lightGray);
    color: #222;
}

.badge-gray {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
    color: #fff;
}

.badge-blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}

.badge-lightBlue {
    background-color: var(--color-lightBlue);
    border-color: var(--color-lightBlue);
    color: #fff;
}

.badge-green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.badge-lightGreen {
    background-color: var(--color-lightGreen);
    border-color: var(--color-lightGreen);
    color: #fff;
}

.badge-pink {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
    color: #fff;
}

.badge-darkPurple {
    background-color: var(--color-darkPurple);
    border-color: var(--color-darkPurple);
    color: #fff;
}

.badge-purple {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    color: #fff;
}

.badge-dark {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: #eee;
}

.badge-brown {
    background-color: var(--color-brown);
    border-color: var(--color-brown);
    color: #fff;
}

.badge-red {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: #fff;
}

.badge-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
}

.badge-outline-blue {
    border: solid 1px var(--color-blue);
}

.badge-outline-dark {
    border: solid 1px var(--color-dark);
}

.badge-outline-gray {
    border: solid 1px var(--color-gray);
}

.badge-outline-green {
    border: solid 1px var(--color-green);
}
.badge-outline-lightGreen {
    border: solid 1px var(--color-lightGreen);
}

.max-width-100 {
    max-width: 100%;
}

.k-button-solid-error {
    color: #fff;
}

.k-button-text {
    align-items: center;
    display: inline-flex;
}
.k-p-0 {
    padding:0 !important;
}
.k-px-0 {
    padding-inline: 0 !important;
}
.k-py-0 {
    padding-block: 0 !important;
}
/*Form*/
.k-form .k-form-legend, .k-form-inline .k-form-legend {
    font-weight: 600;
    margin-bottom: 1rem;
}


.colorSquare {
    min-width: 12px;
    min-height: 12px;
    padding: 2px;
    border-width: 2px;
    border-radius: 4px;
    display: inline-flex;
}

.grayLabel {
    color: var(--color-grayLabel);
}


.greenValue {
    font-size: 19px;
    color: var(--color-green);
}

.blueValue {
    font-size: 19px;
    color: var(--color-blue);
}

.darkValue {
    font-size: 19px;
    color: #444;
}

#simplePage {
    margin-left: auto;
    margin-right: auto;
    max-width: max-content;
    text-align: center;
    font-size: var(--kendo-font-size-xl);
}

@media (min-height: calc(56px + 50px + 400px)) {
    /* header + footer + home page container*/
    #simplePage {
        margin-top: calc(50vh - 28px - 25px - 200px);
    }
}

.hoverZoom, hoverFade {
    transition: transform 0.3s ease; /* 平滑過渡 */
}

    .hoverZoom:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

.hoverFade:hover {
    opacity: 0.7; /* 滑鼠移上去時顏色變淡 */
    background-color: var(--color-blue);
}



.infoList dl {
    border-bottom: solid 2px #efefef;
}

.infoList dt {
    margin-bottom: 2px;
}

.infoList dd {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 10px;
}

.noticeBlock {
}

/*.flexBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 400;
    gap: 8px;
    line-height: 24px;
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

.flexBar > div, .flexBar > label {
    display: flex;
    flex-direction: row;*/ /* 預設橫排 */
/*align-items: center;
    flex-wrap: wrap;*/ /* ⬅️ 允許子項目換行 */
/*}
.gridBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;
    line-height: 24px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.left,
.right {
    display: flex;
    align-items: center;*/ /* 垂直置中 */
/*gap: 8px;*/ /* 與 gridBar 相同的間距 */
/*}

.right {
    margin-left: auto;*/ /* 推到右邊 */
/*}*/

@media (max-width: 600px) {
    .flexBar > div {
        flex-direction: column; /* ⬅️ 小螢幕改為垂直排列 */
        align-items: flex-start;
    }

    .flexBar {
        margin-bottom: 4px; /* ⬅️ label 與值之間留點距離 */
    }
}

.infoBlock {
    padding: 0.6rem 1rem;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border: 4px solid #eee;
    border-width: 1px 1px 4px 1px;
    border-radius: 8px;
 
}

.collapse-panel {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

    .collapse-panel.expanded {
        /* 足夠大的值，確保內容能展開 */
    }

    .collapse-panel.collapsed {
        max-height: 0;
    }

.separator {
    display: block;
    width: 0;
    height: 1.5em;
    border-width: 0 0 0 1px;
    border-style: solid;
    align-self: center;
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.12));
}

.form-hint {
    font-size: 12px;
    color: var(--color-purple);
    margin-top: 4px;
    margin-left: 4px;
}
/*bob add*/
.txt-width-220 {
    display: inline-block;
    width: 220px;
}

.txt-width-400 {
    display: inline-block;
    width: 400px;
}

.width-auto {
    width: auto;
}

.width-500 {
    width: 500px;
}

.width-750 {
    width: 750px;
}


.width-100p {
    width: 100%;
}

.dg-width-auto-500 {
    width: 500px;
}

@media (max-width: 420px) {
    .dg-width-auto-500 {
        width: 100%;
    }
}


.fldGroup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

    /* alignment helpers */
    .fldGroup.align-left {
        justify-content: flex-start;
    }

    .fldGroup.align-center {
        justify-content: center;
    }

    .fldGroup.align-right {
        justify-content: flex-end;
    }

    /* common children */
    .fldGroup .flds {
        display: flex;
        flex-wrap: wrap;
    }

    .fldGroup .fld {
        display: flex;
        align-items: center;
    }

        .fldGroup .fld .lbl {
            color: var(--color-grayLabel);
            font-size: 14px;
         
            margin: 0;
        }

        .fldGroup .fld .val {
            font-weight: 700;
            font-size: 1rem;
            height: var(--fld-value-content-height, 26px); /* 值在元件屬性中設定 */
            display: flex;
            align-items: center;
        }

    .fldGroup .v-line {
        width: 2px;
        height: 40px;
        background-color: #ddd;
        margin: 20px 5px 0;
        display: block;
    }

    .fldGroup .acts {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    /* horizontal: always row, fields stacked label->value, show v-line */
            .fldGroup.horizontal {
                flex-direction: row;
            }

            .fldGroup.horizontal {
                align-items: center; /* horizontal 模式子項目垂直置中，讓 .acts 垂直置中 */
            }

                .fldGroup.horizontal .flds {
                    display: flex;
                    flex-wrap: nowrap;
                }
                /* ensure acts content is vertically centered in horizontal mode */
                .fldGroup.horizontal .acts {
                    margin-left: auto;
                    display: flex;
                    align-items: center;
                }

                .fldGroup.horizontal .fld {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0 0.5rem;
                    border-bottom: none;
                }

                    .fldGroup.horizontal .fld .lbl {
                        margin: 0 0 4px;
                    }

                    .fldGroup.horizontal .fld .val {
                        height: var(--fld-value-content-height, auto);
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 0.3rem;
                    }

                .fldGroup.horizontal .v-line {
                    display: block;
                }
            /* vertical: always column, fields side-by-side label/value with bottom border */
            .fldGroup.vertical {
                flex-direction: column;
            }


                .fldGroup.vertical .fld {
                    display: flex;
                    flex: 1;
                    justify-content: space-between;
                    align-items: center; /* 使 lbl 與 val 在同一行垂直置中 */
                    padding: 0.5rem 0;
                    border-bottom: 2px solid #ddd;
                }

                    .fldGroup.vertical .fld .val {
                        /* 在左標/右值佈局時移除過多垂直間距，讓內容置中對齊 */
                        height: var(--fld-value-content-height, auto);
                        margin: 0;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end; /* 內容靠右 */
                        text-align: right;
                    }

                        .fldGroup.vertical .fld .val:has(button) {
                            height: var(--fld-value-content-height, 32px);
                        }

                .fldGroup.vertical .v-line {
                    display: none;
                }

                .fldGroup.vertical .acts {
                    margin-top: 1rem;
                }
            /* responsive behavior for the default (no explicit horizontal/vertical) */
            .fldGroup.responsive {
                flex-direction: row;
            }
            /* responsive 在大於等於 768px 時也要垂直置中子項目 */
            .fldGroup.responsive {
                align-items: center;
            }
                /* 在 >=768px 時，responsive 需表現如 horizontal：label 在上、value 在下，顯示垂直分隔線 */
                .fldGroup.responsive .flds {
                    display: flex;
                    /* flex-wrap: nowrap;*/
                }

                .fldGroup.responsive .acts {
                     margin-left: auto;
                }

                .fldGroup.responsive .fld {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 0 0.5rem;
                    border-bottom: none;
                }

                    .fldGroup.responsive .fld .lbl {
                        margin: 0 0 4px;
                       
                    }

                    .fldGroup.responsive .fld .val {
                        height: var(--fld-value-content-height, auto);
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 0.3rem;
                    }

                .fldGroup.responsive .v-line {
                    display: block;
                }

            @media (max-width: 767px) {

                .fldGroup {
                    display: block;
                }

                    .fldGroup.responsive {
                        flex-direction: column;
                    }

                        .fldGroup.responsive .flds {
                            display: block;
                            flex: 1;
                           
                        }

                        .fldGroup.responsive .fld {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0.5rem 0;
                            border-bottom: 2px solid #ddd;
                            flex-wrap: wrap;
                        }

                            .fldGroup.responsive .fld .val {
                                height: var(--fld-value-content-height, auto);
                                margin: 0;
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                text-align: right;
                            }

                                .fldGroup.responsive .fld .val:has(button) {
                                    height: var(--fld-value-content-height, 32px);
                                }

                        .fldGroup.responsive .v-line {
                            display: none;
                        }

                        .fldGroup.responsive .acts {
                            margin-top: 1rem;
                        }

                        .fldGroup.horizontal .flds, .fldGroup.horizontal .flds,
                        .fldGroup.horizontal .acts, .fldGroup.responsive .acts {
                            margin-inline: auto;
                            justify-content: center;
                            margin-block: 1rem;
                        }
            }
            /* End fldGroup */
            /* GridDiv helper: 讓同一列的項目等高
   用法: 在 GridDiv 加上 Class="equal-row" (或在 markup 加上 .k-d-grid.equal-row)
   原理: 讓每個格子變成 column flex，並讓內部主內容伸展填滿高度。
*/
            .k-d-grid.equal-r {
                /* 若父容器為 css grid，確保格子可被拉高 */
                align-items: stretch;
            }

                .k-d-grid.equal-row > * {
                    display: flex;
                    flex-direction: column;
                    /* 讓格子本身填滿可用高度（在 grid row 中會等高） */
                    height: 100%;
                    min-height: 0; /* 避免子元素 overflow in flex/grid */
                }
                    /* 讓格子內主要內容區塊可伸展以達等高效果。
   若你的卡片/項目有明確的內層容器（例如 .card-body 或 .content），可以替換下方選擇器以更精準控制。 */
                    .k-d-grid.equal-row > * > .card-body,
                    .k-d-grid.equal-row > * > .content,
                    .k-d-grid.equal-row > * > .k-card {
                        flex: 1 1 auto;
                    }
            /*gpCard*/
            .gpCard .name {
                font-size: 24px;
            }

            .gpCard .val {
                font-size: 16px;
            }

            .gpCard .k-card-header {
                flex: 1 auto;
                padding: 8px 5px 6px 5px;
            }

            .gpCard .k-card-body {
                padding: 6px;
                max-width: 120px;
            }

            @media(max-width:766px) {
                .gpCard .k-card-body {
                    max-width: initial;
                }
            }

            .gpCard .k-card-actions {
                padding: 6px 8px;
            }

            @media (max-width: 576px) {
                .gpCard .name {
                    font-size: 18px;
                }
            }
            /*End gpCard*/
            /*inline-alert*/
            .inline-alert {
                margin-block: 10px;
                background: #fff;
                padding: 12px 24px;
                border-left: 4px solid;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
                color: #383f55;
            }

                .inline-alert.alert-info {
                    background: #CDE0F1;
                    border-color: #0066BB;
                }

                .inline-alert.alert-success {
                    background: #e6f7e9;
                    border-color: #4caf50;
                    color: #2e7d32;
                }

                .inline-alert.alert-warning {
                    background: #F8F1DB;
                    border-color: #ff9800;
                    color: #e65100;
                }

                .inline-alert.alert-error {
                    background: #fdecea;
                    border-color: #f44336;
                    color: #b71c1c;
                }

                .inline-alert.alert-light {
                    background: #f9f9f9;
                    border-color: #ccc;
                    color: #555;
                }
            /*end of inline-alert*/