﻿
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #F6EDE6;
}

header {
    background: #604D3F;
    color: #ffffff;
}

img {
    max-width: 100%; /*有图片时就加上这句话*/
}

.k-grid {
    color: #604D3F;
    
}
.k-grid-header {
    display: none !important;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

#HeaderHospName {
    padding-top: 2em;
    font-size: 40px;
    font-weight: bolder;
    margin-left: 25%;
}
.logo {
    width:100%;
    display: inline-block; /*嫌弃logo占据空间太长*/
    float: left;
    margin-top: 10px;
    margin-bottom: 8px;
}

.logo > img {
    margin-left:30px;
    height: 6.5vh;
    vertical-align: top; /*嫌弃图 片下面有多余的东西*/
}

.k-toolbar {
    padding: unset;
} /*Title滿版用*/

.k-grid-header, .k-grid-content, .k-grid-norecords-template {
    border-color: #F6EDE6;
    background-color: #F6EDE6;
}

.ad-container {
    
    max-height: 100%;
    height:65vh;
}
.k-grid .k-alt {
    background-color: #FFF7F4;
}
.grid-container {
    
    max-height: 100%;
}

.GridTitle {
    font-size: 34px;
    font-weight: bolder;
}

#GridColumnName {
    font-size: 21px;
}

.gap {
    gap: 1em;
    max-height: 84vh;
    padding: 0.5vw;
}

.footer {
    /*background-color: #fcedde;*/
    max-height: 100%;
    margin-top: 1vh;
    margin-bottom: 0px;
    position: relative;
    width: 100%;
    height: 100px; /* 調整高度以符合您的需求 */
    overflow: hidden;
    background-image: url('/Img/marqueeImg.png');
    background-size: cover;
}
.footer-text {
    font-size: 35px;
    position: absolute;
    bottom: 10px;
    left: 16%;
    transform: unset;
    color:#604D3F;
    width: 100%;
    padding: 5px; /* 調整間距以符合您的需求 */
    background-color: rgba(255, 255, 255, 0.1); /* 可調整背景色及透明度 */
    white-space: nowrap; /* 讓文字水平滾動 */
    
}
.static-footer {
    display: flex;
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    font-size: 35px;
    background: #604D3F;
    color: #ffffff;
    width: 100%;
    height:60px;
}

#grid_FzNumF .k-master-row {
    font-size: 40px;
    color: #604D3F;
    font-weight: bolder;
}

#grid_FzNum .k-master-row {
    font-size: 40px;
    color: #604D3F;
    font-weight: bolder;
}

/*#slideMessage {
    display: inline-block;
    white-space: nowrap;
    animation: footerMessage 10s linear infinite;
}*/

/*@keyframes footerMessage {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}*/


/***** 候診css start    ******/

/* 候診摘要列外框：維持不變 */
.waiting-summary {
    margin-top: 2px;
    background: #f6ede6;
    border-radius: 10px;
    padding: 1px 2px;
    overflow: hidden;
}

    .waiting-summary .ws-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

/* 卡片（每一組：房號 + 醫師 + 等候文字） */
.ws-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    font-size: 28px;
    line-height: 1;
    color: #4a3b35;
}

/* 房號膠囊 */
.ws-room {
    background: #805d54;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* 醫師姓名 */
.ws-doctor {
    font-weight: 700;
    color: #3f332e;
}
.ws-doctor .title {
    position: relative;
    display: inline-block;
    font-size: 0.5em;
}
/* 等候文字（例：3人等候／無須等候） */
.ws-waiting {
    font-weight: 600;
    color: #b30000;
    /* 可選分隔線：想更清楚可開啟
  padding-left:10px; border-left:1px solid #eee;
  */
}


/***** 候診css end    ******/

/* 大螢幕再放大一些 */
@media (min-width:1440px) {
    .ws-card {
        font-size: 40px;
        padding: 10px 16px;
        gap: 20px;
    }

    .ws-room {
        padding: 6px 14px;
    }
}


/** 叫號的紅色數字 */
.led-badge {
    display: inline-block;
    padding: 2px 10px;
    min-width: 56px; /* 大一點 */
    margin-left: 8px;
    border-radius: 12px; /* 你畫面是白色膠囊，可留著 */
    background: #fff; /* 或 transparent，依你的底色 */
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    color: #b30000; /* 不發光的深紅 */
    font-family: 'DSEG7Classic', 'DS-Digital', monospace;
    font-size: 42px; /* 放大 */
    line-height: 1;
    letter-spacing: 2px; /* 讓每位數有間距 */
    font-variant-numeric: tabular-nums; /* 固定寬度數字 */
    -webkit-text-stroke: .6px rgba(100,0,0,.15); /* 很淡的描邊，增加硬派感 */
    text-shadow: none; /* 關閉暈光，重點！ */
    vertical-align: middle;
}
.led-badge:empty {
    display: none; /* 沒文字時直接不顯示 */
}




/*如果螢幕寬度為 1900px 以上，就套用設定*/
@media screen and (min-width: 1900px) {

    .logo > img {
        padding-top: 1em !important;
        height: 7vh !important;
    }

    #HeaderHospName { /* 院所名稱*/
        padding-top: 2em;
        font-size: 60px;
        font-weight: bolder;
    }

    .GridTitle { /*準備中 及 請至櫃檯辦理批價*/
        font-size: 70px;
        font-weight: bolder;
    }

    #GridColumnName { /*姓名*/
        font-size: 40px;
    }

    #grid_FzNumF .k-master-row {
        font-size: 60px;
        font-weight: bolder;
    }

    #grid_FzNum .k-master-row {
        font-size: 60px;
        font-weight: bolder;
    }
    .footer {
        height: 150px;
    }
    .footer-text {
        font-size: 50px;
        bottom: 15px;
        /*transform: translateX(-15%);*/
    }
    .static-footer {
        font-size: 50px;
        height: 100px;
    }
    .ws-card {
        font-size: 50px;
    }
 
}