html {
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
    line-height: 1.8em;
    color: #333333;
    font-family: 'Noto Sans TC', 'Roboto', Arial, "Microsoft JhengHei", '新細明體', Helvetica, sans-serif;
    background-color: #345396;
}

::selection {
    background-color: #D8F3FF;
    color: #121212;
}

a {
    color: #3da9fc;
}




/* ------------------------------
    團隊邀請
 ------------------------------ */
.invitation-modal,
.normal-modal {}
  @media (min-width: 768px) {
    .invitation-modal,
    .normal-modal {
      width: calc(100% - 14px); } }
  .invitation-modal .modal-header,
  .normal-modal .modal-header {
    border: none;
}

.invitation-list__name {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.4;
    word-wrap: break-word;
    color: #536dbb !important; /* a tag 沒有 href時 會被蓋過去 */
}
.invitation--list .invitation-list__account {
    color: #333;
}

.invitation--list .invitation-list__account:hover,
.invitation--list .invitation-list__account:focus,.invitation--list .invitation-list__account:active {
color: #111;
}
.invitation-list__account {
    font-size: 1rem;
    color: #333;
    }
.invitation-list__btn {
    font-size: 18px;
    font-weight: 500;
}
    
@media (min-width: 768px) {
.invitation-list__btn {}
}






/* ------------------------------
                kv
   ------------------------------ */
.kv-slect {
    width: 100%;
    height: 30vh;
    background-color: #efefef;
    background-image: url(/static/2025ironman/img/backgroud.jpg);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center ;
    margin-top: 60px;
}

@media (max-width: 992px) {
    .kv-slect {
      margin-top: 0;
    }
}

.kv-slect .kv-content {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

.kv-slect .kv-content:before {
    position: relative;
    content: '';
    display: inline-block;
    width: 0;
    height: 20%;
    /*依據kv高度調整位置，改變kv主文字位置*/
    vertical-align: middle;
}

.kv-teams-info .kv-content:before {
    height: 30%;
    /*團隊戰報kv文字高度位置*/
}


.kv-title {
    font-size: 2.8rem;
    line-height: 2;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.2rem;
    text-shadow: 2px 2px 4px #283c7e;
}

.select {
    position: relative;
    width: 50%;
    margin: 0 auto;
    z-index: 10;
}

@media (max-width: 576px) {
    .kv {
        height: 20vh;
    }

    .kv-content {
        width: 90%;
    }

    .select {
        width: 80%;
    }
}




/* ------------------------------
       sec-search
   ------------------------------ */
.sec-search {
    margin: 4rem 1rem 2.5rem;
    padding: 0;
}

.search-bar {
    position: relative;
    border-radius: 20px 0 0 20px;
    border: 1px solid #cfcfcf;
    border-right: none;
    padding: 4px 10px;
    width: 70%;
    height: 40px;
}

.btn-search {
    position: absolute;
    color: #333;
    background-color: #ffffff;
    border: 1px solid #cfcfcf;
    border-left: none;
    border-radius: 0 20px 20px 0;
    height: 40px;
    font-size: 16px;
    margin: 0;
}

.btn-search:hover,
.btn-search:active {
    color: #0065B0;
    background-color: #ffffff;
}

@media (max-width: 576px) {
    .search-bar {
        width: 85%;
    }
}



.btn-order {
    color: #ffffff;
    background-color: #0065B0;
    border: 1px solid #0065B0;
}

.btn-outline-order {
    color: #0065B0;
    border: 1px solid #0065B0;
    background-color: #ffffff;
}

.btn-order,
.btn-outline-order {
    padding: 5px 20px;
    margin: 5px;
}

.btn-order:hover,
.btn-outline-order:hover {
    color: #0065B0;
    background-color: #D8F3FF;
}

.ppl-num {
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
}

.ppl-num span {
    font-size: 1.8rem;
    padding-left: 8px;
}


@media (max-width: 576px) {

    .btn-order,
    .btn-outline-order,
    .input-group {
        margin-bottom: 10px;
    }

    .ppl-num{
        margin-top: 1rem;
    }
}

/* ------------------------------
       sec-contestants
   ------------------------------ */
/********** 選手列表 *********/
.sec-contestants {
    margin: 2rem 1rem;
    padding: 0;
}

.list-card {
    background-color: #ffffff;
    padding: 1.8rem 2.5rem;
    margin-top: 2rem;
    border-radius: 8px;
    box-shadow: inset 0 0 10px 0 #cfcfcf, 0px 3px 0px 0px #b3b3b3, 0px 4px 10px #073996;
}

.list-card a {
    text-decoration: none;
}

.list-card .title {
    color: #1f39aa;
    font-size: 1.5rem;
    padding: 25px 0 15px;
    font-weight: 500;
    transition: 0.2s;
}

.list-card .title:hover {
    color: #8eacff;
}

.list-card .content {
    text-align: justify;
    margin-bottom: 2.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-card .name {
    font-weight: 500;
    color: #121212;
    font-size: 18px;
    padding: 5px 0 8px;
}

.list-card .team {
    color: #4C4452;
}

.list-card .tag,
.list-card .date {
    color: #4C4452;
}

.list-card .tag {
    border: 1px solid #cfcfcf;
    padding: 0px 6px;
    border-radius: 6px;
}

.tag img {
    width: 30px;
    margin-right: 8px;
}

/********** 團隊列表 *********/
.team-leader,
.team-member {
    color: #98a4b6;
    margin-right: 10px;
}

.team-member {
    margin-left: 10px;
}

.team-member-img {
    width: 45px;
    margin: 0 6px;
    border: 1px solid #A0ACBD;
}

.team-member-list {
    margin: 20px 0;
}

.team-name-title,
.team-name-title a{
    display: block;
    color: #1f39aa;
    font-size: 1.5rem;
    padding: 0 0 15px;
    font-weight: 500;
    transition: 0.2s;
}

.list-card .team-name-title a:hover {
    color: #8eacff;
}



.fg-tag {
    color: #ffffff;
    border: 1px solid #5aa4ee;
    background-color: #5aa4ee;
    border-radius: 6px;
    text-align: center;
    padding: 5px 20px;
    margin-top: 20px;
}

.fg-none {
    color: #23a3f0;
    border: 1px solid #23a3f0;
    background-color: #ffffff;
}

.team-member-list a:hover {
    position: relative;
}

.team-member-list a[data]:hover:after {
    font-size: 15px;
    content: attr(data);
    padding: 4px 12px;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 110%;
    white-space: nowrap;
    z-index: 2;
    border-radius: 15px;
    background: #3D4856;
}

/********** 進度條 *********/
.list-card .progress {
    font-size: 16px;
    height: 2.5rem;
    border-radius: 20px;
    border: 5px solid #e9ecef;
    position: relative;
}

/* 進度條顏色 */
.team-progress--prepare .team-dashboard__day {
    font-size: 24px;
    color: #A0ACBD; 
}
@media (min-width: 992px) {
    .team-progress--prepare .team-dashboard__day {
    font-size: 30px; 
} }

.team-progress--prepare .progress-bar {
    background: #A0ACBD; 
}
.team-progress--prepare .progress-num + .tooltip > .tooltip-inner {
    background-color: #A0ACBD; 
}
.team-progress--prepare .progress-num + .tooltip > .tooltip-arrow {
    border-top-color: #A0ACBD; 
}
.team-progress--fail .team-dashboard__day {
    color: #A0ACBD; 
}
.team-progress--fail .progress-bar {
    background: #A0ACBD; 
}
.team-progress--fail .progress-num + .tooltip > .tooltip-inner {
    background-color: #A0ACBD; 
}
.team-progress--fail .progress-num + .tooltip > .tooltip-arrow {
    border-top-color: #A0ACBD; 
}
.team-progress--challenge .team-dashboard__day {
    color: #0086D6; 
}
.team-progress--challenge .progress-bar {
    background: #0086D6; 
}
.team-progress--challenge .progress-num + .tooltip > .tooltip-inner {
    background-color: #0086D6; 
}
.team-progress--challenge .progress-num + .tooltip > .tooltip-arrow {
    border-top-color: #0086D6; 
}
.team-progress--success .team-dashboard__day {
    color: #ec3563; 
}
.team-progress--success .progress-bar {
    background: #ec3563; 
}
.team-progress--success .progress-num + .tooltip > .tooltip-inner {
    background-color: #ec3563; 
}
.team-progress--success .progress-num + .tooltip > .tooltip-arrow {
    border-top-color: #ec3563; 
}

/* 進度狀態文字 */
.state {
    color: #00468C;
    position: absolute;
    right: 0;
    top: 50%;
    right: 3%;
    letter-spacing: 0.08rem;
}

.fail {
    color: #3D4856;
}

.succes {
    color: #ffffff;
}

.progress-num {
    margin-left: 20px;
    font-size: 1.6rem;
    color: #0086D6;
}

.num-fail {
    color: #A0ACBD;
}

.num-succes {
    color: #ec3563;
}


@media (max-width: 576px) {
    .list-card {
        padding: 1.5rem;
        margin: 20px 10px;
    }

    .list-photo {
        width: 60%;
    }

    .list-card .team-name {
        border-bottom: 1px solid #dfdfdf;
        margin-bottom: 15px;
    }

    .list-card .tag,
    .list-card .date {
        text-align: center;
    }    
    
}


/* ------------------------------
       分頁 pagination
   ------------------------------ */

.pagination-container {
    margin: 4rem auto;
    text-align: center;
    font-size: 16px;
}

.pagination-container a {
    text-decoration: none;
    color: #ffffff;
}

.pagination {
    position: relative;
}

.pagination-inner a {
    position: relative;
    display: inline-block;
    color: #333333;
    padding: 8px 16px 10px;
    background-color: #fffff7;
    border-radius: 3px;
}

.pagination-container .active {
    position: relative;
    display: inline-block;
    color: #333333;
    padding: 8px 16px 10px;
    background-color: #fff6c6;
    border-radius: 3px;
}

.pagination-container a:hover,
.pagination-container a:focus,
.pagination-container a:active {
    color: #333;
    background-color: #ffcb5b;
    transition: 0.3s;
}

.pg-dot {
    border: none;
    padding: 0 16px;
}

.pagination-newer,
.pagination-older {
    font-size: 20px;
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 8px 35px 10px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.pagination-newer:hover,
.pagination-older:hover {
    color: #fff;
    background-color: #3da9fc;
    transition: 0.3s;
}

.pagination-newer {
    margin-right: 50px;
}

.pagination-older {
    margin-left: 50px;
}

@media (max-width: 576px) {
    .pagination a {
        margin-bottom: 5px;
    }

    .pagination-newer,
    .pagination-older {
        padding: 8px 20px 10px;
    }

    .pagination-newer {
        margin-right: 10px;
    }
    
    .pagination-older {
        margin-left: 10px;
    }
}


/* ------------------------------
       sec-teams-info 團隊戰報頁
   ------------------------------ */
.teaminfo-title {
    font-size: 1.6rem;
    font-weight: 500;
    margin: 3.2rem 0 0.5rem;
    padding: 0 4rem;
    color: #ffffff;
}

.sec-teams-info .edit a {
    font-size: 16px;
    padding-left: 20px;
    text-decoration: none;
}

.sec-teams-info {
    padding: 0;
    padding-bottom: 3em;
}

.team-info-card {
    margin-top: 3rem;
    padding-bottom: 2.5rem;
}

.team-info-card .list-card-left {
    margin-top: -50px;
    padding-right: 40px;
}

.team-info-card .team-name-title {
    padding-top: 20px;
}

.start-date {
    padding: 20px 0;
    color: #666666;
}

.start-date span {
    font-size: 1.6rem;
    color: #0c56b1;
    letter-spacing: 0.05rem;
    padding-left: 10px;
}

.btn-quit {
    float: right;
    font-size: 16px;
    background-color: red;
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 4px;
}

.btn-quit-alert {
    float: right;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    margin-left: 5px;
}

.btn-quit:hover {
    background-color: #8b0e0e;
    cursor: pointer;
}

.modal-header-warning {
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);

    box-sizing: border-box;
    margin: 0;
}

.text-center-warning {
    margin: 10px 0 0 10px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.5;
    text-align: center !important;
}

.btn-yes {
    background-color: #0c56b1;
    color: #ffffff;
}

.btn-cancel {
    background-color: #aaaaaa;
    color: #ffffff;
}

.list-photo {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.list-photo .list-photo-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.list-photo:hover .list-photo-overlay {
    opacity: 1;
}

.list-photo-image {
    width: 100%;
}

.list-photo-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.list-photo:hover .list-photo-details {
    top: 50%;
    left: 50%;
    opacity: 1;
}

.list-photo-details p {
    color: #ffffff;
    font-size: 22px;
}

.fadeIn-bt {
    top: 75%;
}