/*主要顏色 #21B6C7 (台北通藍)*/
/*文字的提示顏色 #959595 (深灰)*/
/*文字框背景顏色 #F5F5F5 (淺灰)*/
:root {
    --main-color: #21B6C7; /* 台北通藍 */
    --text-color: #959595; /* 深灰 */
    --input-bg-color: #F5F5F5; /* 淺灰 */  
}

body {
    background-color: #F5F5F5;
}
/*文字重量(比較粗)*/
.font-weight-600 {
    font-weight: 600;
}
/*<---文字顏色--->*/


/* 深灰 */
.text-color-gray {
    color: var(--text-color);
}

/* 淺灰 */
.text-color-lightgray {
    color: var(--input-bg-color);
}
/* ===============================
             常態樣式
    =============================== */
/*跳出提示框的文字大小*/
.modal-body{
    font-size:20px;

}
/*可以讓物件致中*/
.pc-center {
    justify-content: center;
    display: flex;
    align-items: center;
}
/*讓文字可以置中並且在同一排*/
/*用在問卷title的說明*/
.title-center {
    display: flex; /* 讓裡面的文字同排 */
    align-items: baseline; /* 中英基線對齊，好看 */
    gap: 8px; /* 兩者間距 */
    margin: 0;
    justify-content: center;/*置中*/
}
    /*用在title的英文*/
    .title-center .hli-en {
        font-size: 16px;
    }
.font-size18 {
    font-size: 18px;
}
/*底部的文字說明*/
.directions-text {
    font-size: 16px;
    color: var(--text-color);
    margin-top: 10px;
    margin-bottom: 10px;
}
/*分析圓圈樣式*/
.custom-circle {
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #4DA62E;
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
}
/*卡片的樣式*/
.custom-card-body {
    display: flex;
    flex-direction: column; /* 垂直排列內容 */
    align-items: center; /* 水平置中 */
    justify-content: center; /* 垂直置中（根據高度） */
    text-align: center;
}

.custom-text16 {
    color: var(--text-color);
    font-size: 16px;

}
.custom-text20 {
    color: var(--text-color);
    font-size: 20px;
}

.custom-margin-5px {
    margin: 5px;
}

/*文字置中*/
.disease-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-control {
    background-color: var(--input-bg-color);
    border: none;
    border-radius: 10px;
    color: #000000;
    margin-top: 10px;
    font-size: 16px;
}

    .form-control::placeholder {
        color: var(--text-color);
    }

    .form-control:hover {
        background-color: var(--input-bg-color);
        border: none;
    }

    .form-control:focus {
        box-shadow: none;
        background-color: var(--input-bg-color);
        border: none;
    }

.custom-card {
    border: none;
    box-shadow: none;
}
/*.card-header {
    background-color: white;
}*/
.custom-card {
    padding: 0px;
}

    .custom-card:not(.page-block):hover {
        box-shadow: none;
    }

p {
    font-size: 20px;
    margin: 0;
}

.custom-div {
    padding: 10px;
}

.btn:hover {
    background-color: rgba(32,182,199,0.6)
}

/*<---主要按鈕class--->*/
.custom-btn {
    background-color: var(--main-color);
    color: #FFFFFF;
    border: none;
    width: 100%;
    align-content: center;
    border-radius: 10px;
    font-size: 16px;
    padding: 0.8rem 0.75rem;
}
    .custom-btn:hover,
    .custom-btn:focus,
    .custom-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }
.btn:first-child:active {
    border-color: none;
    color:#ffffff;
    background-color: rgba(32,182,199,0.6)
}
.main-btn {
    background-color: var(--main-color);
    color: #FFFFFF;
    width: 100%;
    align-content: center;
    border-radius: 10px;
    font-size: 20px;
    padding: 0.8rem 0.75rem;
}

    .main-btn:hover,
    .main-btn:focus,
    .main-btn:active,
    :not(.btn-check) + .main-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }
/*<---次要按鈕--->*/
.second-btn {
    background-color: #ffffff;
    color: var(--main-color);
    border: 1px solid #21B6C7;
    width: 100%;
    align-content: center;
    border-radius: 10px;
    font-size: 20px;
    padding: 0.8rem 0.75rem;
}
    .second-btn:hover,
    .second-btn:focus,
    .second-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }


.buttom-btn {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px 20px;
    text-align: center;
    box-shadow: 0px -1px 0px 0px #f5f5f5;
}

/*畫面背景的樣式*/
.pc-container {
    background-color: #ffffff;
    min-height: calc(100vh - 60px);
    margin-left: 0px;
}

.pc-container .pc-content{
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}
.custom-pc-content {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}
.card-footer {
    box-shadow: 0px -1px 0px 0px #f5f5f5;
}

.pc-header{
background: #ffffff;
}

.pc-header .pc-head-link > svg, .pc-header .pc-head-link > i {
    color: #565656;
}
.pc-header .pc-head-link:focus > i {
    color: #565656;
}

.pc-contentpadding {
    padding: 25px;
}

@media (max-width: 575.98px) {
    .pc-contentpadding {
        padding: 20px;
    }
}

.cardpadding {
    padding: 0px 0px 25px 0px;
}

@media (max-width: 575.98px) {
    .cardpadding {
        padding: 0px 0px 20px 0px;
    }
}
/*<---label文字設定為16px--->*/
label {
    font-size: 16px;
}
/*<---間距設定10px--->*/
.mt-10px {
    margin-top: 10px;
}

/*<---超連結樣式(用在問卷的提示)--->*/
.link-decoration {
    font-size: 14px;
    color: var(--main-color);
    text-decoration: none;
}
/*<---下拉選項的class--->*/
.drop {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 10px;
}

    /* 預設選單隱藏 */
    .drop .dropdown {
        display: none;
    }

.dropdown.show {
    display: block;
}

.drop .dropOption {
    position: relative;
    width: auto;
    color: var(--text-color);
    background-color: var(--input-bg-color);
    padding: 0.8rem 0.75rem;
    border: none;
    font-size: 16px;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 10px;
}

        .drop .dropOption::after {
            content: "";
            position: absolute;
            top: 20px;
            right: 12px;
            border-width: 8px 6px;
            border-style: solid;
            border-color: #999 transparent transparent transparent;
        }

    .drop .dropdown {
        width: 100%;
        max-height: 350px;
        position: absolute;
        color: var(--text-color);
        padding: 0;
        margin: 0;
        background-color: var(--input-bg-color);
        box-shadow: 0px 2px 3px 0px #ccc;
        border-radius: 6px;
        box-sizing: border-box;
        overflow: auto;
        z-index: 10;
    }

        .drop .dropdown li {
            display: block;
            color: #000;
            padding: 12px;
            font-size: 16px;
            margin: 0 10px;
            cursor: pointer;
        }

            .drop .dropdown li:first-child {
                margin-top: 10px;
            }

            .drop .dropdown li:last-child {
                margin-bottom: 10px;
            }

            .drop .dropdown li:hover {
                background-color: var(--main-color); /*hover 選項底色*/
                border-radius: 10px;
            }

        /* 自訂卷軸樣式 */
        .drop .dropdown::-webkit-scrollbar {
            width: 15px; /* 卷軸寬度 */
        }

        .drop .dropdown::-webkit-scrollbar-track {
            background-color: #eee; /* 卷軸軌道背景 */
            border-radius: 6px;
        }

        .drop .dropdown::-webkit-scrollbar-thumb {
            background-color: var(--main-color); /* 卷軸顏色 */
            border-radius: 15px;
        }

        .drop .dropdown::-webkit-scrollbar-button {
            background-color: #f9f9f9;  /* 卷軸上下按鈕顏色 */
        }
/* ===============================
      MainHome介面的樣式
    =============================== */
/*背景圖*/
.mainhome-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("./summary-bg.svg");
    background-size: cover; /* 等比例縮放填滿整個畫面 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat; /* 不重複鋪滿 */
}
.mainhome-headercard {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .08);
    width: 100%;
    /*max-width: 398.4px;*/
    padding: 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.mainhome-header {
    flex-direction: column;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/*個人圖示框框的樣式*/
.person-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #26c6da;
    background-color: #fff;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
    .person-wrapper img {
        width: 43px;
    }
    /*個人資料顯示樣式*/
    .person-info {
        position: relative;
        display: flex;
        justify-content: center; /*水平置中 */
        align-items: center;
        text-align: center;
        gap: 24px;
    }
    .person-info::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 0; /* 僅用邊框當線 */
        height: 1.4em; /* 視需要調整線的高度 */
        border-left: 2px solid #222;
    }
/*問卷填寫背景樣式*/
.scroll-card-bg {
    padding: 0px;
    align-items: center;
    text-align: center;
}
/*問卷填寫框框樣式*/
.card-scroll-wrapper {
    justify-content: space-evenly;/*平均分配*/
    display: flex; /*橫向排列*/
    overflow-x: auto; /*可以橫向滑動*/
    gap: 16px; /*卡片之間間距*/
    padding: 0px 10px; /*內距 */
    scroll-snap-type: x mandatory; /*滑動時自動貼齊*/
}
.info-card {
    flex: 0 0 auto; /*不自動換行縮小*/
    width: 240px;
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .08);
    width: 260px;
    padding: 20px 20px 20px;
    margin-top: 16px;
}
/*服務框框樣式*/
.action-card {
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}
/*授權框框樣式*/
.action-col6 {
    align-items: center;
    text-align: center;
    padding: 10px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.survey-tag {
    position: absolute;
    top: 8px;
    left: 20px; /*小框框待在卡片內*/
    z-index: 1;
    padding: 6px 14px;
    border-radius: 999px;
    background: var( --main-color);
    color: white;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

.survey-tag-gray {
    position: absolute;
    top: 8px;
    left: 20px; /* 小框框待在卡片內 */
    z-index: 1;
    padding: 6px 14px;
    border-radius: 999px;
    background: #9ca3af; /* 灰色 */
    color: white;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

.info-body {
    margin-top: 25px;
}


.mb-10px {
    padding: 10px;
    align-items: center;
}
.custom-backgroud-color {
    background-color: #F5F5F5; /* 淺灰 */
}
.custom-card-container {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
}
.custom-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* 讓圖片與文字置中對齊 */
    flex: 1; /* 平均分配高度 */
    justify-content: center;
    border: 2px dashed #ccc; /* 外框線:虛線 */
    border-radius: 10px; /* 圓角 */
    padding: 1.5rem;
    text-align: center;
    background-color: #fff;
    margin-bottom: 10px;
    transition: box-shadow 0.3s ease;
}
.vertical-card-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 1rem;
}
/*分析管理stretched-link樣式*/
.paddingleft10px {
    padding-left:10px;
}
.stretched-padding {
    padding-left: 0px;
    padding-right: 0px;
}

/*底下說明文字*/
.page-footer-note {
    margin: 16px 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    text-align: center;
}

/* ===============================
      DietReportView介面的樣式
    =============================== */
            /*攝取量卡片的內容樣式*/
            /*目前沒使用，如果需要可以加*/
            .card-content {
    color: black;
    margin-bottom: 10px;
}
.card-title {
    font-size: 16px;
    color: black;
}
/*card-body-border目前DietReportView沒使用，如果需要可以加*/
/*card-body-border目前有被使用在Summary介面*/
.card-body-border {
    position: relative;
}

    .card-body-border:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 16px;
        right: 16px;
        height: 1px;
        background-color: #959595;
    }

/*icon框樣式*/
.corner-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ffca28;
    box-shadow: 0 1px 4px #959595; /*陰影*/
}
.custon-mb-0{
margin-bottom: 0px;

}

/* 讓 tabs 與 card 可以變整個框框、避免上下雙重邊框 */
.tab-card .card-header {   
    border-bottom: 0;
}
.tab-card .tab-content {
    height: clamp(170px, 10vh, 420px);
}

.tab-card .nav-tabs {
    margin: 0;
}

    .tab-card .nav-tabs .nav-link {
        border: 0;
        border-bottom: 2px solid transparent;
    }
/*飲食底下說明文字*/
.died-footer-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color);
    text-align: center;
}

/* ===============================
         登入畫面樣式
    =============================== */
.center-form-wrapper {
    position: fixed; /* 不受捲動影響 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto; /* 高度由內容撐開 */
    padding: 30px;
    font-size: 20px;
}
.account-text {
    color: var(--main-color);

}
.login-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    background-image: url("./login-bg.svg");
    background-size: cover; /* 等比例縮放填滿整個畫面 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat; /* 不重複鋪滿 */
}
.register-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    background-image: url("./summary-bg.svg");
    background-size: cover; /* 等比例縮放填滿整個畫面 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat; /* 不重複鋪滿 */
}


/*忘記密碼文字樣式*/
.forgotpassword-text-16px {
    color: var(--main-color);
    font-size: 20px;
    text-align: center;
}
.font-size-20px {
    font-size: 20px;
}
/* ===============================
         Layout樣式
    =============================== */
/* head中間的「個人資料」文字 */
.drawer-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完整水平 + 垂直置中 */
    margin: 0;
    font-size: 20px; 
    font-weight: 600;
}
/* head左邊的返回icon */
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ===============================
               衛教畫面
    =============================== */
/*選單的border*/
/* 整列底線 */

    /* 讓每欄內容垂直置中（可選） */
    .split-border {
        display: flex;
        align-items: center;
    }
/* 整列底線 */

        /* 中線：除了最後一欄，其餘欄位右側都加線 */
        .split-border > .col-4:not(:last-child) {
            border-right: 1px solid #959595; /* 中線顏色粗細可調整 */
        }

        /*文字與邊線留空隙 */
.split-border {
    padding-right: 0;
    padding-left: 0;
}
.bottom-border {
    position: relative;
}

    .bottom-border::after {
        content: "";
        position: absolute;
        inset: 0; /* top/right/bottom/left 全 0 */
        border-bottom: 1px solid #959595;
        left: 16px; /* 只縮排左側 */
        right: 16px;
        pointer-events: none; /* 避免擋到點擊 */
    }

.coustom-padding-20px {
    padding: 20px 0px 20px 0px;/*上下padding*/
}
.coustom-right-padding-20px {
    padding: 0px 0px 0px 20px; /*右邊padding*/
}
/*reference文字樣式*/
.reference-font {
    font-size: 16px;
    color: var(--text-color);
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: end;
}
/*超連結文字樣式*/
.link-class {
    font-size: 20px;
    margin: 0;
    color: var( --main-color);
}
.font-size-16px {
    font-size: 1.125rem;
}
/* ===============================
             Add介面的樣式
    =============================== */
.padding-right {
    padding-right: 0px;
}

.custom-text14 {
    color: var(--text-color);
    font-size: 14px;
}
/* ===============================
             summary介面的樣式
    =============================== */
/*疾病結果五個圖的大小*/
.disease-icon {
    width: 62px;
}
.header-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    .header-content-center img{
        width:80%;
    }
    /*背景*/
    .summarye-bg {
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url("./summary-bg.svg");
        background-size: cover; /* 等比例縮放填滿整個畫面 */
        background-repeat: no-repeat; /* 不重複鋪滿 */
        margin-bottom: 0px;
    }
/*"智慧健康管理"文字樣式*/
    .title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 24px;
}
/*輪播*/
.marquee-icon {
    flex-shrink: 0; /* 防止圖片縮小 */
    width: 32px; 
    height: 32px;
    margin-right: 8px;
}
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    flex: 1; /* 佔滿剩下空間 */
}
.marquee-container {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}
.marquee-content2 {
    display: inline-block;
    white-space: nowrap;
    animation: marquee2 30s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
@keyframes marquee2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
/*Summary每個標題的樣式*/
.summary-title {
   padding:25px;
}

@media (max-width: 575.98px) {
    .summary-title {
        padding: 20px 20px 10px;
    }
}
/*數值的文字樣式*/
.donut-value {
    font-size: 20px;
    margin: 0;
}

.summary-cardpadding {
    padding: 0px 0px 25px 0px;
}
@media (max-width: 575.98px) {
    .summary-cardpadding {
        padding: 0px 0px 10px 0px;
    }
}
/*衛教按鈕樣式*/
.health-btn {
    font-size: 16px;
    border-radius: 20px;
    background-color: white;
    color: #21B6C7;
    border: 1px solid #21B6C7;
}
    .health-btn:hover,
    .health-btn:focus,
    .health-btn:active,
    :not(.btn-check) + .health-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }
/*跳問卷按鈕樣式*/

.Analysis-btn {
    font-size: 16px;
    border-radius: 10px;
    background-color: transparent;
    color: #21B6C7;
    border: 1px solid #21B6C7;
}
    .Analysis-btn:hover,
    .Analysis-btn:focus,
    .Analysis-btn:active,
    :not(.btn-check) + .Analysis-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }

/*跳問卷按鈕樣式*/

.Healthlist-btn {
    font-size: 16px;
    border-radius: 10px;
    background-color: transparent;
    color: #5c636a;
}

    .Healthlist-btn:hover,
    .Healthlist-btn:focus,
    .Healthlist-btn:active,
    :not(.btn-check) + .Healthlist-btn:active {
        background-color: rgba(32, 182, 199, 0.6);
        color: #ffffff;
    }




/*nav頁簽樣式*/
/* 整體 Nav 區塊 */
.nav-tabs {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 陰影 */
    border-bottom: none; /* 清除預設底線 */
}

    /* 每個按鈕的基本樣式 */
    .nav-tabs .nav-link {
        font-size: 18px;/*字大小*/
        color: #222222; /* 預設字色 */
        border: none; /* 移除 Bootstrap 預設邊框 */
        background-color: transparent; /* 無底色 */
        padding: 12px 10px;
    }

        /* Hover 效果 */
        .nav-tabs .nav-link:hover {
            color: #26c6da;
            border: none;
            border-bottom: 2px solid #26c6da;
            background-color: transparent;
        }

        /* Active 樣式 */
        .nav-tabs .nav-link.active {
            color: #26c6da;
            border: none;
            border-bottom: 2px solid #26c6da;
            background-color: transparent;
        }
/*nav頁簽內容樣式*/
.navpadding {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
/*上面自介*/
.header-card {
    background-image: linear-gradient(to bottom right, #21b6c7, #84ced9);
    flex-direction: column;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-card p{
    color: white;
}
.caption{

}
/* 當螢幕寬度大於於或等於 480px 時 (iphone14...) */
@media (min-width: 430px) {
    .header-card {
        height: 210px; /* 再次調整為更小的高度 */
    }
    .summarye-bg {
        height: 210px; /* 再次調整為更小的高度 */
    }
}
/*button固定在最下方*/
.fixed-bottom-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px 20px;
    text-align: center;
    box-shadow: 0px -1px 0px 0px #f5f5f5;
}
/*可以可到底下畫面，不會被button遮住*/
.scrollable-content {
    padding-bottom: 70px;
}
/*<---進度條樣式--->*/
.progress-container {
    position: relative;
    height: 10px;
    width: 80%;
    background-color: #eee;
    border-radius: 5px;
    margin: 50px auto;
}

.progress-bar {
    height: 100%;
    background-color: #26c6da;
    border-radius: 5px;
    width: 0;
    transition: width 0.4s ease;
}

.progress-indicator {
    position: absolute;
    top: 0%; /*圈圈才不會跑掉*/
    transform: translate(-50%, -30%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-text {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
}

.progress-circle {
    --ring-color: #4CAF50; /*預設進度條圓框是綠色*/
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid var(--ring-color);
    border-radius: 50%;
}

/*<---底下的三個元素樣式--->*/
.footer-links {
    display: flex;
    justify-content: space-evenly; /* 平均分散 */
    text-align: center;
    width: 100%;
}

    .footer-links p {
        font-size: 16px;
        color: var(--text-color);
    }
/*-----------------------
    <---進度條樣式--->
------------------------*/
/*Analysis上方列樣式*/
.Analysis-card-container {
    background-color: white;
    padding: 10px;
}
/*-----------------------
   <--長壽分析樣式-->
------------------------*/
/*三個框框平均分配*/
.health-row {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    padding: 0px 20px;
}
/*框框裡的文字跟圈圈都置中*/
.health-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 置中標題與圈圈 */
    text-align: center;
}
/* 外框 */
.health-wrapper {
    position: relative;
    width: 100px; /* 調整大小 */
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#FF9800 0% 0%, #F5F5F5 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 中間挖空 */
    .health-wrapper::before {
        content: "";
        position: absolute;
        width: 80px; /* 內圈大小 */
        height: 80px;
        background: #fff;
        border-radius: 50%;
    }

/*-----------------------
   <--疾病分析樣式-->
------------------------*/
.donut-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 外框 */
.donut-wrapper {
    position: relative;
    width: 100px; /* 調整大小 */
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#FF9800 0% 0%, #F5F5F5 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
    /* 中間挖空 */
    .donut-wrapper::before {
        content: "";
        position: absolute;
        width: 80px; /* 內圈大小 */
        height: 80px;
        background: #fff;
        border-radius: 50%;
    }

/* 中心文字區域 */
.donut-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*-----------------------
   <--飲食分析樣式-->
------------------------*/
.diet-item {
    justify-content: center;
    display: flex;
    align-items: center;
}
/* 外框 */
.diet-wrapper {
    position: relative;
    width: 100px; /* 調整大小 */
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#FF9800 0% 0%, #F5F5F5 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 中間挖空 */
    .diet-wrapper::before {
        content: "";
        position: absolute;
        width: 80px; /* 內圈大小 */
        height: 80px;
        background: #fff;
        border-radius: 50%;
    }

/* 中心文字區域 */
.donut-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*-----------------------
   <--活動量樣式-->
------------------------*/

/* 外框 */
.activity-wrapper {
    position: relative;
    width: 100px; /* 調整大小 */
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#FF9800 0% 0%, #F5F5F5 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 中間挖空 */
    .activity-wrapper::before {
        content: "";
        position: absolute;
        width: 80px; /* 內圈大小 */
        height: 80px;
        background: #fff;
        border-radius: 50%;
    }
/*-----------------------
   <--運動分數樣式-->
------------------------*/
.pc-exercise {
    justify-content: center;
    display: flex;
    align-items: center;
}
/* 外框 */
.exercise-wrapper {
    position: relative;
    width: 100px; /* 調整大小 */
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#FF9800 0% 0%, #F5F5F5 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* 中間挖空 */
    .exercise-wrapper::before {
        content: "";
        position: absolute;
        width: 80px; /* 內圈大小 */
        height: 80px;
        background: #fff;
        border-radius: 50%;
    }
/*-----------------------
   <--疾病分析樣式-->
------------------------*/
.disease-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    padding: 0px 20px;
}
/*-----------------------
   <--健康管理任務樣式-->
------------------------*/
.cloud-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}
.cloud-text {
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    margin: 0;
    font-size: 18px;
}
.cloud-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 置中標題與圈圈 */
    text-align: center;
}
    .cloud-item img {
        display: block;
        width: 100%; 
    }
/* ===============================
              Generate 授權 介面的樣式
    =============================== */
.form-group label {
    font-size: 20px;
    font-weight: 400;

}
.generate-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form-group a {
    color: var(--main-color);
    font-size: 20px;
}
/*<---授權管理介面樣式--->*/
/*上面頁籤*/
.auth-nav {
    background: #fff;
    display: grid;
    border-radius: 15px;
    border: 1.5px solid #21B6C7;
}
/* ===============================
             MainHome介面的RWD
    =============================== */
/*RWD*/
@media (min-width: 1000px) {
    .generate-content-center {
        flex-direction: row;
    }

        .header-content-center img {
            width: 60%;
        }

}
/*畫面435-545*/
@media (min-width: 435px) and (max-width: 545px) {
    .header-content-center img {
        width: 60%;
    }

    .form-group label {
        font-size: 14px;
    }
    .form-group a {
        font-size: 14px;
    }

    .form-control {
        padding: 0.5rem 0.5rem;
        font-size: 14px;
    }

    p {
        font-size: 14px;
    }

    .mainhome-headercard {
        padding: 10px;
    }

    .person-wrapper {
        width: 60px;
        height: 60px;
    }

        .person-wrapper img {
            width: 32px;
        }

    .info-card {
        padding: 10px;
        margin-top: 0px;
    }

    .title-text {
        font-size: 20px;
    }

    .action-card {
        padding: 8px 20px;
        border-radius: 10px;
    }

    .main-btn, .second-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    .custom-text16 {
        font-size: 16px;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mb-2 {
        margin-bottom: 0rem !important;
    }
}
/*畫面<415*/
@media(min-width: 415px) {
    .action-card {
        padding: 12px 20px;
    }
}
@media(max-width: 394px) {
    p {
        font-size: 16px;
    }
    .form-group label {
        font-size: 16px;
    }

    .form-group a {
        font-size: 16px;
    }
    /*跳出提示框的文字大小*/
    .modal-body {
        font-size: 16px;
    }
    .main-btn, .second-btn {
        padding: 0.6rem 0.75rem;
        font-size: 16px;
    }
    .mb-4 {
        margin-bottom: 0.8rem !important;
    }
}
/*畫面<376*/
@media(max-width: 376px) {
    .mainhome-headercard{
        padding: 10px;
    }
    .person-wrapper {
        width: 60px;
        height: 60px;
    }
        .person-wrapper img {
            width: 32px;
        }
    .title-text{
        font-size: 20px;
    }
    .header-content-center img {
        width: 60%;
    }
    .mt-5 {
        margin-top: 1rem !important;
    }

    .mainhome-header {
        padding: 10px 20px;
    }

    p {
        font-size: 14px;
    }
    .font-size18 {
        font-size: 14px;
    }
    .custom-text20 {
        font-size: 14px;
    }
    .donut-value {
        font-size: 16px;
    }
    .directions-text {
        font-size: 14px;
    }
    /* 分析的甜甜圈框框-外框 */
    .donut-wrapper {
        width: 80px; /* 調整大小 */
        height: 80px;
    }
        /* 中間挖空 */
        .donut-wrapper::before {
            width: 65px; /* 內圈大小 */
            height: 65px;
        }
    .main-btn, .second-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
    .form-group label {
        font-size: 14px;
    }
    .form-group a {
        font-size: 14px;
    }
    .form-control {
        padding: 0.5rem 0.5rem;
        font-size: 14px;
    }
    .custom-text16 {
        font-size: 14px;
    }
    .my-4 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .nav-tabs .nav-link {
        font-size: 14px; /*字大小*/
    }
    .custom-circle {
        width: 80px;
        height: 80px;
    }
    /*跳出提示框的文字大小*/
    .modal-body {
        font-size: 16px;
    }
}

/*     授權清單用的css   */
/* 右上角 icon 按鈕 */
.icon-btn {
    width: 36px;
    height: 36px;
    border: 0; /* 取消外框 */
    background: transparent; /* 透明背景 */
    border-radius: 0; /* 不要圓角框 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

    .icon-btn img {
        width: 30px;
        height: 30px;
        display: block;
    }

    .icon-btn:hover {
        background: rgba(0,0,0,0.04);
        border-radius: 8px;
    }

    .icon-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
/* 鍵盤可見焦點 */


/* 頭像圓框（維持你原本設定，可用這版） */
.avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /*border: 3px solid #17a2b8;*/
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 1rem;
    overflow: hidden;
}

    .avatar-circle img {
        max-width: 60%;
        max-height: 60%;
        object-fit: contain;
        display: block;
    }

/* 避免誤傷：不要對 .business-card img 設 margin/尺寸 */
.business-card img {
    margin-right: 0 !important;
}
/*     授權清單用的css   */



/*雲朵刷淡的css*/
/* 只刷淡、可點擊 */
/* 只做視覺的刷淡，不禁用點擊 */
.cloud-item.is-disabled {
    cursor: not-allowed;
}

.cloud-item img, .cloud-item .cloud-text {
    transition: opacity .2s, filter .2s;
}

.cloud-item.is-disabled img {
    opacity: .35;
    filter: grayscale(100%);
}

.cloud-item.is-disabled .cloud-text {
    opacity: .6;
}

/*summary改連結顏色*/
.marquee-content a,
.marquee-content2 a {
    color: inherit; /* ✅ 繼承父層顏色 */
    text-decoration: none; /* ✅ 移除底線 */
}

    .marquee-content a:hover,
    .marquee-content2 a:hover {
        color: inherit; /* ✅ 滑過時仍不變色 */
        text-decoration: none; /* ✅ 滑過時不出現底線 */
    }

   /* pdf使用*/
.pdf-viewer {
    border: 1px solid #ccc;
    width: 100%;
    height: 800px;
}

/* ===============================
            建議-介面
    =============================== */


/* ================================
   共用手機底部 Bar
   桌機版維持舊版網站呈現
================================ */

/* 桌機預設不顯示 */
.mobile-bottom-bar {
    display: none;
}

/* 手機版才啟用底部 Bar */
@media (max-width: 767.98px) {

    /* 隱藏舊版手機側邊選單 */
    .pc-sidebar {
        display: none !important;
    }

    /* 手機版內容不要被 sidebar 影響 */
    .pc-container {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .pc-content {
        width: 100% !important;
        padding-bottom: 104px !important;
    }

    /* Header 手機版全寬 */
    .pc-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    /* 手機版隱藏右上角選單按鈕，避免跟底部 Bar 重複 */
    .pc-sidebar-collapse,
    .pc-sidebar-popup {
        display: none !important;
    }

    /* 手機底部 Bar */
    .mobile-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 86px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        display: flex;
        z-index: 1050;
    }

    .mobile-bottom-tab {
        flex: 1;
        min-width: 0;
        text-align: center;
        text-decoration: none;
        color: #7b8790;
        font-size: 11px;
        line-height: 1.15;
        padding: 8px 2px 0;
    }

        .mobile-bottom-tab:hover {
            text-decoration: none;
            color: var(--main-color);
        }

        .mobile-bottom-tab.active {
            color: var(--main-color);
            font-weight: 700;
        }

    .mobile-bottom-icon {
        display: block;
        width: 22px;
        height: 22px;
        object-fit: contain;
        margin: 0 auto 5px;
    }
}