@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

:root
{
    --donate-primary-color: #20B2AA;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

html, body {
    height: 100%;
    margin: 0;
}

/* 使用Flexbox布局可控制內容的排列，並確保footer位於main下方 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 60px;
    font-family: Noto Sans TC, system-ui !important;
    --bs-body-font-family: Noto Sans TC !important;
}

.wrapper {
    flex-grow: 1;
}

.logo {
    @media ( max-width: 768px ) {
        width: 240px;
    }
    height: 51px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.background-div {
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
    /*background-image: url( '../images/background_v202502.jpg' );*/
    background-size: cover;
    background-repeat: no-repeat;
    flex: 1; /* 使container填充剩餘的垂直空間 */
}

.background-color-primary
{
    background-color: var( --donate-primary-color ) !important;
}

.background-color-secondary
{
    background-color: #EEEEEF !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    .w-md-20 {
        width: 20% !important
    }

    .w-md-30 {
        width: 30% !important
    }

    .w-md-55 {
        width: 55% !important
    }

    .w-md-57 {
        width: 57% !important
    }

    .w-md-60 {
        width: 60% !important
    }

    .w-md-62 {
        width: 62% !important
    }

    .w-md-65 {
        width: 65% !important
    }

    .w-md-70 {
        width: 70% !important
    }

    .w-md-85 {
        width: 85% !important
    }

    .w-md-31 {
        width: 31% !important
    }
}

@media (min-width: 992px) {
    .w-lg-30 {
        width: 30% !important
    }
    
    .w-lg-55 {
        width: 55% !important
    }

    .w-mlg-57 {
        width: 57% !important
    }

    .w-lg-60 {
        width: 60% !important
    }

    .w-lg-62 {
        width: 62% !important
    }

    .w-lg-65 {
        width: 65% !important
    }

    .w-lg-70 {
        width: 70% !important
    }

    .w-lg-85 {
        width: 85% !important
    }

    .w-lg-31 {
        width: 31% !important
    }
    
    .navbar-expand-lg .navbar-nav .nav-link { 
        padding: 4px;
    }
}

@media (min-width: 992px) {
    .w-lg-55 {
        width: 55% !important
    }

    .w-mlg-57 {
        width: 57% !important
    }

    .w-lg-60 {
        width: 60% !important
    }

    .w-lg-62 {
        width: 62% !important
    }

    .w-lg-65 {
        width: 65% !important
    }

    .w-lg-70 {
        width: 70% !important
    }

    .w-lg-85 {
        width: 85% !important
    }

    .w-lg-31 {
        width: 31% !important
    }
}

.w-15 {
    width: 15% !important
}

.w-85 {
    width: 85% !important
}

.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 var( --donate-primary-color );
}

.btn-primary {
    color: #fff;
    background-color: var( --donate-primary-color ) !important;
    border-color: var( --donate-primary-color );
}
.btn-outline-primary {
    border-color: var( --donate-primary-color );
    --bs-btn-color: var( --donate-primary-color );
    --bs-btn-border-color: var( --donate-primary-color );
    --bs-btn-hover-bg: var( --donate-primary-color );
    --bs-btn-hover-border-color: var( --donate-primary-color );
    --bs-btn-active-bg: var( --donate-primary-color );
    --bs-btn-active-border-color: var( --donate-primary-color );
    --bs-btn-disabled-color: var( --donate-primary-color );
}
.table-light {
    --bs-table-bg: #E9F7F7;
}

tbody tr td {
    vertical-align: middle;
}

.active > .page-link, .page-link.active {
    background-color: var( --donate-primary-color );

}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}

.text-right-md {
    text-align: left;
}
@media (min-width: 768px) {
    .text-right-md {
        text-align: right;
    }
}

.card > .nav {
    --bs-nav-link-color: #495057;
    --bs-nav-link-hover-color: #495057;
}
.card > .nav-tabs {
    --bs-nav-tabs-border-radius: 0rem;
}
.card > .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var( --donate-primary-color );
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: transparent;
    border-bottom: 3px solid var( --donate-primary-color );
}
.card-header .title-left {
    line-height: 2em;
    font-size: 1em;
}

.modal-max-vh-40 {
    max-height: 40vh;
    overflow-y: auto;
}

.select2-container .select2-selection {
    height: 37.6px !important;
    padding-top: 3px !important;
}

#formFirst {
    display: none; /* or any other styles you want for lg and larger screens */
}

#formLast {
    display: block; /* or any other styles you want for screens smaller than lg */
}

@media (min-width: 992px) {
    #formFirst {
        display: none; /* or any other styles you want for lg and larger screens */
    }
    #formLast {
        display: block; /* or any other styles you want for screens smaller than lg */
    }
}

/* 導航欄樣式 */
#header {
    color: #FFFFFF;
}

#header .navbar-nav .nav-link {
    color: #FFFFFF;
}

#header .navbar-nav .nav-item .nav-link:hover {
    color: #C0C0C0;
}

#header .dropdown-menu .nav-item .nav-link {
    color: #000000;
}

/*#header .dropdown-menu .nav-item .nav-link:hover {*/
/*    background-color: #C0C0C0;*/
/*}*/

@media (max-width: 991px) {
    #formFirst {
        display: block; /* or any other styles you want for screens smaller than lg */
    }
    #formLast {
        display: none; /* or any other styles you want for screens smaller than lg */
    }
}


.jq_captcha {
    cursor: pointer;
}

.input-group-text {
    border: none;
    background-color: white;
}

.input-group .form-control {
    border-radius: .375rem !important;
}

/* 系所清單css */
.jq_alumni .jq_container {
    position: absolute;
    border-radius: .375rem;
    z-index: 99;
    border: solid var( --donate-primary-color ) 1px;
    background-color: white;
    padding: 10px 20px 10px 20px;
    margin-top: -10px;
}

.jq_alumni .jq_container .btn-close {
    position: absolute;
    width: 1px;
    margin: 5px 0px 0px 5px;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050; /* 高於 Bootstrap 的 modal 遮罩 */
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center;
}

.full-width-container {
    /* width: 100vw !important; */
    /* position: relative; */
    /* left: 50%; */
    /* right: 50%; */
    /* margin-left: -50vw; */
    /* margin-right: -50vw; */
}

/* Banner容器樣式 */
.banner-container {
    margin-top: 0;
    position: relative;
    z-index: 1; /* 確保低於導航欄 */
}

/* Custom style for banner to hide the bottom blue bar */
#carouselExampleIndicators {
    margin-top: 0;
}

/* Show the full image in carousel items */
.carousel-item {
    overflow: visible;
}

.carousel-item img {
    max-height: 833px;
    width: 100%;
    object-fit: cover; /* 確保圖片填充整個容器 */
}

.content-img img {
    max-width: 100%;
    height: auto;
}

.flow-nav::before {
    color: gray;
    font-weight: bold;
    content: '';
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.flow-nav.active {
    color: black;
    font-weight: bold;
}

.flow-nav.active::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.cost-margin {
    margin-top: 21px;
    /* 預設為 21px */
    /* 在中等螢幕（md）及以上時，將 margin-top 設置為 0 */
    @media ( min-width: 768px ) {
        margin-top: 0px;
    }
}

.table-responsive {
    white-space: nowrap;
}