.custom-mud-blazor {
    --mud-drawer-width: 45%;
    --custom-mud-area-title-width : 110px;
}
.custom-border-area {
    width: 100%;
    margin: 10px 0 10px 24px;
    border-radius: var(--mud-default-borderradius);
    border-color: var(--mud-palette-lines-inputs);
    border-width: 1px;
    border-style: solid;
}
    .custom-border-area::before {
        display: block;
        content: "";
        position: relative;
        top: 0;
        left: 10px;
        width: calc(var(--custom-mud-area-title-width) + 10px);
        height: 2px; /* 可以調整“中斷邊框”的粗細 */
        background: white; /* 設置背景色，通常與容器背景一致 */
        transform: translateY(-50%);
    }
    .custom-border-area .border-area-title {
        position: relative;
        top: -10px;
        left: 25px;
        font-size: .875rem;
        margin-bottom: 0;
        width: var(--custom-mud-area-title-width);
    }
    @media (min-width: 512px) and (max-width:959px) {
        .custom-mud-blazor {
        --mud-drawer-width: 70%;
    }
}
@media screen and (max-width:511px) {
    .custom-mud-blazor {
        --mud-drawer-width: 90%;
    }
}