body {
    font-family: Arial, sans-serif;
    background-color: #FBE7CC;
    margin: 0 auto;    
}

#route {
    width: 520px;
    margin: 10px auto;
}

.route-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    background-color: #FFF;
    /*border-right: 5px solid #85632F;*/
    border-bottom: 5px solid #85632F;
    padding: 16px 0; /* Adjust padding to maintain spacing within items */
    margin-bottom: 3px;
}
/* Remove border for the last item
.route-item:last-child {
    border-bottom: none; 
}
 */
.route-name {
    font-size: 92px;
    /*text-shadow: 0.1em 0.1em 0.2em black;*/
    font-weight: bold;
    margin-bottom: 0px;
    text-align: center;
    width: 100%; /* Ensure number is centered */
    height: 103px; /* Set a fixed height */
    line-height: 103px; /* Center text vertically */
}

.details {
    width: 100%;
    text-align: center;
}

.destination {
    font-size: 40px;
    font-weight: bolder;
    height: 48px; /* Set a fixed height */
    line-height: 48px; /* Center text vertically */    
}

.destination-en {
    font-size: 28px;
    font-weight: bold;
    padding: 0px 20px 0px 20px;
    height: 40px;       /* Set a fixed height */
    line-height: 40px;  /* Center text vertically */  
    white-space: nowrap;
    /* color: #666; */
}
/* 英文方向跑馬燈 */
.destination-en-ScrollBoundary {
    width: 98%;
    overflow: hidden;
    white-space: nowrap;
}
.destination-en-Scroll {
    display: inline-block;
    width: 90%;
    font-size: 28px;
    font-weight: bold;
    white-space: nowrap;
    height: 40px;       /* Set a fixed height */
    line-height: 40px;  /* Center text vertically */   
    /* Apply animation to this element , 8秒跑完, 線性移動, 一開始delay 2秒, 一直循環 */  
    animation: scroll-left 10s linear 3s infinite;
    -moz-animation: scroll-left 10s linear 3s infinite;  
    -webkit-animation: scroll-left 10s linear 3s infinite;  
}

.prefix {
    font-size: 32px;
    color: #ff6f61;
    font-weight: bold;
    margin-right: 5px;
}

.prefix-en {
    font-size: 20px;
    color: #ff6f61;
    font-weight: bold;
    margin-right: 5px;
}

/* 預估時間 + 車輛圖示 */
.est-container {
    display: flex;
    height: 92px;   /* 要加, 不然會導致整個高度會因預估時間為中文或英文，而時高時低 */
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    width: 100%; /* Ensure est-container is full width */
}

/* 預估時間 */
.est {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 52px;    
    font-weight: bold;
    flex-grow: 0.8; /* Allow est to take up available space */
}

.est + .busIcon {
    margin-left: 20px;
}

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

.noneBusIcon {
    display: none;
}

.busIcon i {
    font-size: 52px; /* Adjust the busIcon size as needed */
    color: #00008B; /* Adjust the busIcon color as needed */
}

/************************** est 背景顏色 *****************************************************/
/* 後來 2024/06/14 機關開會決議, 比照無障礙同藍色, 只有即將到站文字為 白色*/
.blue {
    background-color: #a2b6c3;  /* 原為 #829FAF */
    color: #00008B;
}

.red {
    background-color: #CB503B;
    color: white;
}

.grey {
    background-color: #ada19f;  /* 原為 #948490 */
    color: #00008B;
}

.darkBlue {
    background-color: #3A2F3D;  /* 原為 #3A303C */
    color: white;
}

/************************** 分頁使用 ********************************************************/
.fade p {
    margin: 0em;
    text-align: center;
    width: 100%;
    /*background: #fff;*/
}

#routePaging {
    margin: 0 auto;    
    display: inline;    
    position: absolute;
    top: 1659px; /* 原始: 1180px, 5行: 620px, 4行: 484px */
    width: 100%;
    height: 50px;
    text-align: center;
    border: 0px solid red;
    /* background:linear-gradient(#FBE7CC, #FFDAB9);   背景漸層 */
}

#routePaging span {
    display: inline-block;
    line-height: 45px;    /* 不加 span 不會垂直置中 */
    vertical-align: middle;    
    width: 45px;
    height: 45px;
    margin: 2px 8px 0 8px;
    border-radius: 99em;
    box-shadow: 0 1px 3px #000 inset;
}

/* Paging 預設顏色 #616161, Danny 說灰色改為白色 */
.gray {
    background-color: #FFFFFF; 
}

/* Paging active 顏色 #FFFFFF, 後來 2024/06/14 機關開會決議, 比照無障礙同藍色 */
.white {
    background-color: #00008B;
}


/************************** 英文方向跑馬燈 ********************************************************/
@keyframes scroll-left {
    0% { 
        transform: translateX(0%);     
        -moz-transform: translateX(0%);     
        -webkit-transform: translateX(0%);     
    }
    100% { 
        transform: translateX(-80%); 
        -moz-transform: translateX(-80%); 
        -webkit-transform: translateX(-80%); 
    }
}

@-moz-keyframes scroll-left {
    0% { 
        transform: translateX(0%);     
        -moz-transform: translateX(0%);     
        -webkit-transform: translateX(0%);    
    }
    100% { 
        -moz-transform: translateX(-80%); 
    }
}

@-webkit-keyframes scroll-left {
    0% { 
        transform: translateX(0%);     
        -moz-transform: translateX(0%);     
        -webkit-transform: translateX(0%);    
    }
    100% { 
        transform: translateX(-80%); 
        -moz-transform: translateX(-80%); 
        -webkit-transform: translateX(-80%); 
    }
}