html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}
.index-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/images/Wish_MainBackground.png'); /* 背景圖片路徑 */
    background-repeat: no-repeat; /* 不重複 */
    background-position: center center; /* 水平垂直置中 */
    background-attachment: fixed; /* 可選：固定背景 */
    background-size: auto 100%; /* 高度固定 100%，寬度自動 */
    z-index: -1;
}
.preview-container {
    display: none;
}
.preview-background {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/images/Wish_Preview_Background.png'); /* 背景圖片路徑 */
    background-repeat: no-repeat; /* 不重複 */
    background-position: center center; /* 水平垂直置中 */
    background-attachment: fixed; /* 可選：固定背景 */
    background-size: auto 100%; /* 高度固定 100%，寬度自動 */
    z-index: -1;
}
.color-0 {
    color: #FFFFFF;
}
.color-1 {
    color: #47793E;
}
.color-2 {
    color: #00B6EF;
}
.color-3 {
    color: #FF7E00;
}
.color-4 {
    color: #FF5BCE;
}
.white-background {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50%;
    background-image: url('/images/bg.png'); /* 背景圖片路徑 */
    background-size: 100% 100%; /* 高度固定 100%，寬度自動 */
}

.sidebar {
    width: 273px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    text-align: center;
    padding-top: 0;
}
.sidebar-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    width: 100%; /* 讓標題佔滿整個 Sidebar */
    text-align: center; /* 文字置中 */
    background-color: #d9edf7; /* 你想要的背景顏色 */
    padding: 0.5rem; /* 加點內距讓文字不會貼邊 */
}
.sidebar .nav-item {
    height: 48px;
}

.sidebar .nav-link {
    text-align: left;
    margin-left: 80px;
    color: #fff;
}
.sidebar .nav-link:hover {
}

.sidebar .nav {
    width: 273px;
}

.sidebar .nav-link:hover {
}
.media-title {
    background-color: #474747; /* 紅色系 */
    color: #fff;
}

.interactive-title {
    background-color: #474747; /* 綠色系 */
    color: #fff;
}
.top-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: #ffc;
    padding: 0.5rem;
    z-index: 1000;
}

.bg-blue {
    --bs-bg-opacity: 1;
    background-color: rgb(60 140 187) !important;
}

.bg-gray {
    --bs-bg-opacity: 1;
    background-color: #f0f0f0;
}
.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgb(34 40 44) !important;
}
.top-left {
    position: relative;
    top: 10px; /* 距離底部 10px */
    left: 10px; /* 距離右邊 10px */
    width: 100px; /* 可調整大小 */
    height: auto;
    padding-bottom: 10px;
}
.bottom-left {
    position: fixed;
    bottom: 10px; /* 距離底部 10px */
    left: 10px; /* 距離右邊 10px */
    width: 100px; /* 可調整大小 */
    height: auto;
}
.bottom-right {
    position: fixed;
    bottom: 10px; /* 距離底部 10px */
    right: 10px; /* 距離右邊 10px */
    width: 100px; /* 可調整大小 */
    height: auto;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Optional, adjust as needed */
}
.main-container {
    position: relative; /* 讓子元素可以用絕對定位 */

    margin: 0;
    height: 100vh; /* 全螢幕高度 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
}

/* 頂部圖：闊度100%，高度隨比例調整 */
.bg-top {
    position: relative; /* 讓子元素可以絕對定位 */

    background-image: url('/images/Wish_Frame_Background_1.png');
    width: 100%; /* 全部寬度 */
    aspect-ratio: 528 / 366; /* 假設圖片比例是16:9 */
    background-size: cover; /* 保持比例填滿寬度 */
    background-position: center;
    flex: 0 0 auto; /* 高度由圖片本身比例決定 */
}

/* 中間圖：闊度100%，高度填滿剩餘空間 */
.bg-middle {
    position: relative; /* 父層要 relative，子層才能 absolute */

    background-image: url('/images/Wish_Frame_Background_2.png');
    width: 100%; /* 全部寬度 */
    background-size: cover; /* 保持比例填滿寬度 */
    background-position: center;
    flex: 1 1 auto; /* 自動佔據剩餘高度 */
}

/* 底部圖：闊度100%，高度隨比例調整 */
.bg-bottom {
    background-image: url('/images/Wish_Frame_Background_3.png');
    width: 100%; /* 全部寬度 */
    aspect-ratio: 529 / 208; /* 假設圖片比例是16:9 */
    background-size: cover; /* 保持比例填滿寬度 */
    background-position: center;
    flex: 0 0 auto;
}
#container-top {
    position: absolute; /* 絕對定位 */
    bottom: 0; /* 貼在父容器底部 */
    left: 0;
    width: 100%;
    text-align: center; /* 文字置中 (可選) */
    color: #868ca4; /* 字色 (可選) */
    padding: 10px; /* 與底部留點距離 (可選) */
    font-size: 22px;
}
#container-middle {
    position: absolute;
    top: 0; /* 相對於 .bg-middle */
    left: 0;
    width: 100%;
    text-align: center; /* 文字置中 (可選) */
    color: #868ca4; /* 字色 (可選) */
    flex: none; /* 不要再影響父層高度 */
}
#page1 {
    display: block;
    font-size: 16px;
    margin-left: 5%;
    margin-right: 5%;
}
#page2 {
    display: none;
    text-align: left;
}
#page3 {
    display: none;
    text-align: left;
}
#page2 > p,
#page3 > p {
    font-size: 20px;
    margin-left: 5%;
}
#page2 > select {
    font-size: 20px;
    margin-left: 5%;
    margin-bottom: 10px;
    width: 90%;
    height: 50px;
}

#page3 > select {
    font-size: 20px;
    margin-left: 5%;
    width: 90%;
    height: 50px;
}
.width100 {
    width: 100%;
}
.width65 {
    width: 65%;
}
.width80 {
    width: 80%;
}

.width20 {
    width: 20%;
}
.width100 {
    width: 100%;
}
.height80 {
    height: 80%;
}

.height100 {
    height: 100%;
}

.height20 {
    height: 20%;
}
.width65 > p {
    font-size: 20px;
    margin-left: 20px;
}
.width35 {
    width: 35%;
}
.width35 > p {
    font-size: 20px;
    margin-left: 0px;
}
.width200px  {
    width: 200px;
}
.margin-top10{
    margin-top:10px;
}
.title {
    max-width: 491px;
}
.touch {
    max-width: 491px;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}
#emoji,
#color {
    font-size: 20px;
    margin-left: 5%;
    width: 85%;
    height: 50px;
}
#color {
    margin-left: 20px;
}
#page3 > table {
    width: 90%;
    margin-left: 5%;
}
#grow {
    text-align: center;
    margin-top: -10px;
}
.subtitle {
    font-size: 20px;
    margin-left: 20px;
}
td > .subtitle {
    font-size: 20px;
    margin-left: 20px;
    margin-top:10px;
}
#btn-back {
    cursor: pointer;
}
#btn-next {
    cursor: pointer;
}

.container-login {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 527px;
    height: 410px;
    max-width: 527px;
    padding: 0px;
    margin: auto;
    background-color: #FFF;
    background-image: url(/images/CMS_Login_BG.png);
}

.user {
    height: 43px;
    width: 431px;
    background-image: url(/images/CMS_Login_UserName.png);
    background-repeat: round;
    margin-top: 230px;
    margin-left: 83px;
}

.pw {
    height: 43px;
    width: 431px;
    background-image: url(/images/CMS_Login_Password.png);
    background-repeat: round;
    margin-top: 10px;
    margin-left: 83px;
}

.user input, .pw input {
    margin-left: 48px;
    margin-top: 5px;
    width: 351px;
    height: 32px;
    border: none;
    background: transparent;
}
.user input:-internal-autofill-selected,
.pw input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; /* 覆蓋底色 */
    color: fieldtext !important;
}
.user input:-webkit-autofill,
.pw input:-webkit-autofill {
    appearance: menulist-button;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; /* 覆蓋底色 */
    color: fieldtext !important;
}
#btn-login {
    width: auto;
    margin-left: 182px;
}

.nav-item {
    background-image: url(/images/CMS_Menu_Unselect.png);
}

.nav-itemL
.nav-item:hover {
    background-image: url(/images/CMS_Menu_Select.png);
}
.blue-circle {
    width: 20px; /* 圓形的寬度 */
    height: 20px; /* 圓形的高度 */
    background-color: #44aadf; /* 藍色底色 */
    border-radius: 50%; /* 讓方形變成圓形 */
    display: inline-block; /* 讓 circle 和文字同一行 */
    vertical-align: middle; /* 垂直置中 */
}
.green-circle {
    width: 20px; /* 圓形的寬度 */
    height: 20px; /* 圓形的高度 */
    background-color: #88bb44; /* 藍色底色 */
    border-radius: 50%; /* 讓方形變成圓形 */
    display: inline-block; /* 讓 circle 和文字同一行 */
    vertical-align: middle; /* 垂直置中 */
}
.mode {
    display: inline-block;
    margin-left: 8px; /* 與圓形留空隙 */
    vertical-align: middle;
}

.table-live > thead > tr {
    border: none;
    background-color: #fff;
}

.table-live > thead > tr > td{
    border: none;
    background-color: #fff;
}

.eventlist-form,
.input-event-date {
    display: inline;
}
.input-event-date {
    width: 300px;
}

.div-create-event {
    display: inline;
    background-color: #00998b;
    font-size: 20px;
    text-align: center;
    color: #fff;
    padding: 5px 40px;
}
a {
    text-decoration: none;
}
.time-col {
    width: 92px; /* 控制欄寬 */
    text-align: left; /* 可選：置中 */ /* height: 3090px; */
    margin-right: 45px;
}

.edit-col {
    text-align: right; /* 可選：置中 */ /* height: 3090px; */
    margin-right: 45px;
}
.event-bg {
    background: #fff;
    max-width: 1200px;
    padding-bottom: 30px;
}
.event-container {
    margin-left: 20px;
    margin-right: 20px;
}
.div-save-event {
    display: inline;
    background-color: #00998b;
    font-size: 20px;
    text-align: center;
    color: #fff;
    padding: 5px 40px;
}
.create-event-table {
    width: 100%;
}
.create-event-table > tbody > tr {
    height: 50px;
}
.create-event-table > tbody > tr > td:nth-child(1) {
    width: 150px;
}

.table-preview {
    background: #dededd;
    width: 100%;
    aspect-ratio: 16 / 9;
    
}
    .table-preview > tr {
        border-width: 2px;
    }
    .table-preview > tr > td {

        border-width: 2px;
    }

.input-container {
    text-align: center;
}
#btnCreate {
    display: block;
    font-size: 30px;
    position: relative;
    margin-left: auto; /* 把元素推到右邊 */
    margin-top: 30px;
    width: fit-content; /* 讓寬度依文字大小 */
}
.text-muted {
    color: #fff !important;
}

.table-preview > tr > td .preview {
    position: absolute; /* 絕對定位，放底層 */
    top: 0;
    left: 0;
    width: 100%; /* 填滿整個 td */
    height: 100%;
    object-fit: fill; /* 保持比例裁切填滿 */
    z-index: 0; /* 放在最底層 */
}
.table-preview > tr > td {
    position: relative; /* 父容器相對定位 */
}

    .table-preview > tr > td select,
    .table-preview > tr > td .center,
    .table-preview > tr > td div {
        position: relative; /* 保持在前景 */
        z-index: 1; /* 蓋在圖片上面 */
        margin: auto;
        display: block;
    }


.btn-select-media {
    display: inline;
    background-color: #00998b;
    font-size: 30px;
    color: #fff;
    text-align: center;
    position: relative;
    margin-left: auto; /* 把元素推到右邊 */
    position: relative;
    top: 10px;
    width: fit-content; /* 讓寬度依文字大小 */
}

.btn-sign-out{
    color: #fff;
}

.leaf {
    position: fixed;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
}

.leaf-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.preview-hope {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    z-index: 2;
    font-size: 30px;
    z-index: 2;
}
.preview-emoji {
    width: 10%;
    margin: 0 auto;
    text-align: center;
    transform: translateX(-125%);
    left: 63%;
    position: absolute;
    z-index: 2;
    font-size: 30px;
    top: 54vh;
}
.div-upload {
    display: inline;
    background-color: #00998b;
    font-size: 20px;
    text-align: center;
    color: #fff;
    padding: 5px 40px;
}
#btn-fruit {
    opacity: 0.4;
}