:root {
--border-color1: #b5b5b5;
--note-text-color: #383838;
}
body {
font-size: 14px;
color: #515151 !important;
}
body.mem-bg {
background: url('/img/home/loginbg.jpg') no-repeat fixed center center/cover;
}
p {
color: #515151;
margin-bottom: 10px;
padding-bottom: 0px;
letter-spacing: 0px;
}
.form-control.shadow-m {
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.12) !important;
}

.btn.btn-primary:focus {
     background-color: #0d6efd !important;
}
.btn.btn-light:focus {
    background-color: #f8f9fa !important;
    box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1)!important;
}
.fs-7{
    font-size:0.9rem;
}
.theme-light #preloader {
background-color: rgba(255, 255, 255, 0.85);
}
.preloader-hide {
display: none; 
}
#preloader .spinner-border {
position: absolute;
top: calc(50% - 50px);
left: 50%;
margin-left: -50px;
}
#preloader .load-treasure {
position: absolute;
top: calc(50% - 32px);
left: 50%;
margin-left: -32px;
max-width: 80px;
}
#preloader .spinner-border {
--bs-spinner-width: 100px;
--bs-spinner-height: 100px;
}
.bg-static{ 
    background-size:auto 100%;
    background-attachment:fixed;
    background-position:center top;
}
@media (min-width: 768px) {
    .bg-static {
        background-size:  600px auto;
        background-attachment:fixed;
        background-position: center top;
        background-repeat:no-repeat;
    }
}
    .color-highlight {
        color: #4A89DC !important;
    }

    input::placeholder, textarea::placeholder, select::placeholder, input, textarea, select {
        font-size: 13px !important;
    }

    .modal-content .btn-close {
        opacity: 1;
        background-color: #f2b84a;
        border: 2px solid rgba(0,0,0,0.5);
        border-radius: 100%;
        box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.39);
        -webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.39);
        -moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.39);
    }

    .form-check-custom label {
        font-size: 14px;
        padding: 0px 15px 0px 35px;
    }

    .theme-light .modal-backdrop.show {
        opacity: 0 !important;
        display: none;
    }

    .modal.fade.show::after {
        content: '';
        display: block;
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100vw;
        height: 100vh;
        background-color: #000;
    }

    .modal-dialog {
        z-index: 1056;
    }

        .modal-dialog .modal-content {
            border-radius: 16px;
            border: 3px solid #dd963a;
        }

    .container-xxs {
        max-width: 480px;
        margin: 0 auto;
    }

    #page {
        min-height: 100vh;
    }

    #footer-bar {
        max-width: 480px;
        margin: 0 auto;
    }

        #footer-bar a:not(.btn) {
            padding-top: 0px;
            position: relative;
            flex: 1 1 auto;
            color: #1f1f1f;
        }

        #footer-bar .fbutton {
            max-width: 65px;
            height: auto;
        }

    .theme-light #footer-bar {
        background-color: rgba(255, 255, 255, 0.20);
        box-shadow: none;
    }

    #footer-bar .f-button {
    }

    #footer-bar .badge {
        top: 1px;
        left: calc(50% + 18px);
    }

    .page-content {
        min-height: 100vh;
        padding-bottom: 70px;
        background-color: #ffffff;
    }

        .page-content.transparentbg {
            background-color: rgba(255,255,255,0.7);
        }
    /*game map*/
    /*.page-content.gamemap{
background-size:100% auto;
background-repeat:no-repeat;
background-position:top;
}
.page-content.gamemap.map1{
background-image:url(../img/map/map1.jpg);
}*/
    .default-home {
        background-image: url(../img/bg/defaultgold.jpg);
        background-size: cover;
        background-position: center;
    }

        .default-home .login-btn {
            position: fixed;
            bottom: 25px;
            left: 0;
            right: 0;
            text-align: center;
        }

            .default-home .login-btn a:first-child {
                margin: 20px;
            }

            .default-home .login-btn img {
                max-width: 220px;
            }

    .form-select {
        height: 45px !important;
        border: solid 1px rgba(0, 0, 0, 0.07);
    }

    .page-content.gamemap.map-1 {
        background: url('../img/map/map1blur.jpg') center/cover no-repeat;
    }
    /*topheader*/
    .page-title.head-mem {
        padding: 5px 0px 5px 0px;
        min-height: 60px;
        background-image: url(../img/master/headerbg.png);
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        display: flex;
        justify-content: space-between;
    }

    .head-mem .toplogo {
        margin: 0 3px;
        cursor: pointer;
    }

        .head-mem .toplogo img {
            max-width: 115px;
        }

    .head-mem .top-content {
        display: flex;
        width: 100%;
        justify-content: space-between;
        height: 32px;
        margin-top: 6px;
    }

    .diamond-amount {
        background-color: #7a2900;
        border: 2px solid #c64629;
        border-radius: 18px;
        padding: 0px 6px;
        display: flex;
        justify-content: end;
        width: 100%;
        max-width: 140px;
        min-width: 110px;
        min-height: 32px;
        align-items: center;
        margin-bottom: 3px;
        margin-right: 3px;
        box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
        -webkit-box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
        -moz-box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
    }

        .diamond-amount .diamond {
            max-height: 32px;
            margin-left: 4px;
        }

        .diamond-amount .amount {
            font-size: 13px;
            font-weight: bold;
            color: #fcb89a;
        }

    .my-profile {
        background-color: #7a2900;
        border: 2px solid #c64629;
        border-radius: 18px;
        padding: 0px 0px;
        display: flex;
        justify-content: start;
        width: 100%;
        max-width: 140px;
        min-width: 110px;
        min-height: 32px;
        align-items: center;
        margin-bottom: 3px;
        margin-left: 3px;
        box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
        -webkit-box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
        -moz-box-shadow: 5px 5px 0px -1px rgba(0,0,0,0.3);
    }

        .my-profile .pro-pic {
            max-height: 32px;
            max-width: 32px;
            margin-right: 4px;
            margin-top: 4px;
        }

        .my-profile .name {
            font-size: 13px;
            font-weight: bold;
            color: #fcb89a;
            display: inline-block;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .profile-pic {
        position: relative;
        cursor: pointer;
    }

        .profile-pic .profile-edit {
            width: 24px;
            height: 24px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            position: absolute;
            right: 5px;
            top: 5px;
        }

            .profile-pic .profile-edit i {
                font-size: 14px;
            }

    .avatar-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 9px;
    }

        .avatar-list .avatar-select {
            max-width: 70px;
            height: auto;
            position: relative;
            border: 3px solid transparent;
            border-radius: 100%;
        }

            .avatar-list .avatar-select.active {
                border: 3px solid #c50e0e;
            }

                .avatar-list .avatar-select.active::after {
                    content: '\f26a';
                    font-family: bootstrap-icons !important;
                    font-size: 16px;
                    line-height: 16px;
                    color: #c50e0e;
                    position: absolute;
                    top: 1px;
                    right: 1px;
                    background-color: #fff;
                    width: 16px;
                    height: 16px;
                    border-radius: 100%;
                }

            .avatar-list .avatar-select img {
                max-width: 100%;
                height: auto;
            }

    @media (max-width: 360px) {
        .avatar-list .avatar-select {
            max-width: 60px;
        }
    }

    .dash-button-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

        .dash-button-list .button-list {
            display: flex;
            flex-direction: column !important;
            z-index: 9;
        }

            .dash-button-list .button-list .list-button {
                margin-bottom: 10px !important;
            }

                .dash-button-list .button-list .list-button .icon {
                    border: 3px solid rgba(218,218,218,1);
                    border-radius: 28px !important;
                    box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.31) !important;
                    -webkit-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.31) !important;
                    -moz-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.31) !important;
                }

                    .dash-button-list .button-list .list-button .icon .list-icon {
                        max-width: 32px;
                        margin-bottom: 10px;
                    }

                    .dash-button-list .button-list .list-button .icon.color1 {
                        background: #42abfc;
                        background: linear-gradient(180deg, rgba(66, 171, 252, 1) 0%, rgba(48, 62, 176, 1) 79%, rgba(69, 111, 209, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color2 {
                        background: #afed53;
                        background: linear-gradient(180deg,rgba(175, 237, 83, 1) 0%, rgba(87, 199, 133, 1) 78%, rgba(104, 232, 104, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color3 {
                        background: #ed53b2;
                        background: linear-gradient(180deg, rgba(237, 83, 178, 1) 0%, rgba(191, 82, 168, 1) 78%, rgba(232, 104, 200, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color4 {
                        background: #eda853;
                        background: linear-gradient(180deg, rgba(237, 168, 83, 1) 0%, rgba(191, 144, 82, 1) 78%, rgba(232, 181, 104, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color5 {
                        background: #ed6d53;
                        background: linear-gradient(180deg, rgba(237, 109, 83, 1) 0%, rgba(191, 104, 82, 1) 78%, rgba(232, 113, 104, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color6 {
                        background: #53edad;
                        background: linear-gradient(180deg, rgba(83, 237, 173, 1) 0%, rgba(82, 191, 140, 1) 78%, rgba(104, 232, 145, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color7 {
                        background: #f73b3b;
                        background: linear-gradient(180deg, rgba(247, 59, 59, 1) 0%, rgba(189, 58, 58, 1) 78%, rgba(237, 83, 83, 1) 100%);
                    }

                    .dash-button-list .button-list .list-button .icon.color8 {
                        background: #b83bf7;
                        background: linear-gradient(180deg, rgba(184, 59, 247, 1) 0%, rgba(145, 58, 189, 1) 78%, rgba(206, 83, 237, 1) 100%);
                    }

                .dash-button-list .button-list .list-button h6 {
                    text-shadow: 1px 1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1);
                }

        .dash-button-list .thesun {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .dash-button-list .thesun img {
                width: 100%;
                max-width: 200px;
                z-index: 2;
            }

    .gratitude-text {
        margin-bottom: 10px;
    }

        .gratitude-text .g-icon {
            margin-right: 6px;
            display: flex;
            align-items: start;
            min-width: 50px;
            justify-content: center;
        }

            .gratitude-text .g-icon img {
                max-width: 43px;
                height: 43px;
                margin-top: 5px;
            }

        .gratitude-text p {
            margin-bottom: 3px;
        }

    .gratitude-footer {
        width: 100%;
        z-index: 99;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: 0 auto;
        max-width: 480px;
        height: 68px;
        background: #f2f2f2;
        background: linear-gradient(180deg,rgba(242, 242, 242, 1) 0%, rgba(230, 230, 230, 1) 72%, rgba(250, 250, 250, 1) 100%);
        display: flex;
        text-align: center;
    }

        .gratitude-footer a {
            padding-top: 0px;
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }

            .gratitude-footer a:first-child {
                border-right: 1px solid #dbdbdb;
            }

    .gratitude-title {
        margin-bottom: 10px;
    }

    .gratitude-record {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
    }

        .gratitude-record span {
            color: #000;
        }

        .gratitude-record .record {
            padding: 3px 2px;
            margin: 0px 5px;
            border-left: 0px solid var(--border-color1);
            width: 100%;
            background-color: #fff;
            border-radius: 12px;
            border: 1px solid var(--border-color1);
         }
            .gratitude-record .record .d-flex{
                justify-content:center;
                margin-bottom:5px;
            }
            .gratitude-record .record:first-child  {
                margin-left: 0px!important;
            }
            .gratitude-record .record:last-child {
                margin-right: 0px !important;
            }
                .gratitude-record .record > div:nth-child(2) {
                    text-align: center;
                }

            .gratitude-record .record .icon {
                max-height: 28px;
                max-width: 28px;
                margin-right: 5px;
                height: auto
            }

            .gratitude-record .record:first-child {
                border-left: 0px solid var(--border-color1);
            }
    /*changer*/
    .gratitude-month {
        margin-top: 12px;
        margin-bottom: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center; /* 保证图片和文字在中线对齐 */
        text-align: left;
    }

        .gratitude-month img {
            display: block;
            width: 26px;
            height: auto;
            margin-right: 8px;
        }

        .gratitude-month h2 {
            margin: 0;
            font-size: 19px;
            line-height: 1.4;
        }

        .gratitude-month .gicon {
            max-height: 26px;
            margin-right: 3px;
        }

    .gratitude-note {
        border: 1px solid var(--border-color1);
        border-radius: 12px;
        padding: 12px;
        font-size: 14px;
        margin-bottom: 12px;
        background-color: #fff;
    }

    .gratitude-note-date {
        margin-top: 10px;
        width: 100%;
        padding-top: 3px;
        border-top: 1px solid var(--border-color1);
    }

    .gratitude-note-content p {
        margin-bottom: 10px;
        color: var(--note-text-color);
    }

    .gratitude-note .likeme {
        margin-top: 5px;
        display: flex;
    }

        .gratitude-note .likeme .like {
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

            .gratitude-note .likeme .like i {
                font-size: 18px;
                margin-right: 3px;
            }

            .gratitude-note .likeme .like.active i {
                color: red;
            }

        .gratitude-note .likeme .count-num {
            margin-left: 10px;
        }

    .gratitude-note .profile-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

        .gratitude-note .profile-detail .userprofile {
            display: flex;
            align-items: center;
            position: relative;
        }

        .gratitude-note .profile-detail .report-to {
            font-size: 15px;
            padding: 3px;
            cursor: pointer;
        }

        .gratitude-note .profile-detail .avatar {
            max-width: 32px;
            margin-right: 5px;
            height: auto;
            position: relative;
            border-radius: 100%;
            margin-bottom: 5px;
        }

            .gratitude-note .profile-detail .avatar img {
                max-width: 100%;
                height: auto;
            }

    .gratitude-write-title {
        margin-bottom: 15px;
    }

    .gratitude-content {
        margin-top: 15px;
        position: relative;
        z-index: 2;
    }

        .gratitude-content textarea {
            font-size: 17px !important;
            color: var(--note-text-color);
        }

            .gratitude-content textarea::placeholder {
                font-size: 17px !important;
            }

    .sunman {
        position: absolute;
        top: 90px;
        right: -5px;
        z-index: 1;
    }

        .sunman img {
            max-height: 80px;
        }

    .gratitude-diamond .diamond {
        max-width: 32px;
        margin-left: 4px;
    }

    .gratitude-diamond {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px;
    }

        .gratitude-diamond i {
            font-size: 28px;
            font-weight: bold;
        }

        .gratitude-diamond .num {
            font-size: 21px;
            font-weight: bold;
            color: #000;
            margin-right: 2px;
        }

        .gratitude-diamond .gem {
            font-size: 21px;
            font-weight: bold;
            color: #000;
        }
    /*Topic*/
    /*Topic*/
    .topic-content {
        margin-bottom: 10px
    }

        .topic-content .thesun {
            text-align: center;
            margin: 20px 0px;
        }

            .topic-content .thesun .qsun {
                max-width: 190px;
                height: auto;
            }

        .topic-content .cert {
            position: relative;
            margin: 0 auto;
            width: 100%;
        }

            .topic-content .cert .certimg {
                width: 100%;
                height: auto;
            }

            .topic-content .cert .success-pass {
                font-size: 28px;
                color: #fff;
                text-shadow: -1px -1px 0 #930a00, 1px -1px 0 #930a00, -1px 1px 0 #930a00, 3px 3px 0 #930a00;
                width: 100%;
                text-align: center;
                font-weight: bold;
                position: absolute;
                top: 5%;
            }

            .topic-content .cert .level-pass {
                font-size: 21px;
                text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
                font-weight: bold;
                color: #000;
                position: absolute;
                width: 100%;
                text-align: center;
                top: 32.6%;
            }

            .topic-content .cert .pass-name {
                position: absolute;
                width: 50%;
                text-align: center;
                top: 40%;
                left: 0;
                right: 0;
                margin: 0 auto;
            }

                .topic-content .cert .pass-name .thename {
                    font-size: 16px;
                    font-weight: bold;
                    color: #000;
                    margin-bottom: 10px;
                    display: -webkit-box; /* 弹性伸缩盒子模型 */
                    -webkit-box-orient: vertical; /* 垂直排列子元素 */
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis; /* 溢出显示省略号 */
                    white-space: normal;
                }

            .topic-content .cert .pass-gold {
                font-size: 17px;
                font-weight: bold;
                color: #000;
                text-align: center;
                margin: 0 auto;
            }

            .topic-content .cert .pass-name .gold {
                max-width: 26px;
            }

            .topic-content .cert .pass-name .qrcode {
                text-align: center;
                margin-top: 12px;
            }

                .topic-content .cert .pass-name .qrcode .qrcode-img {
                    max-width: 100px;
                }

    @media screen and (max-width: 380px) {
        .topic-content .cert .pass-name .thename {
            font-size: 13px;
        }
    }

    .topic .topic-button {
        gap: 10px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .topic .topic-video {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

        .topic .topic-video .arrow {
            display: flex;
            min-height: 100%;
            height: 100%;
            align-items: center;
        }

            .topic .topic-video .arrow i {
                font-size: 24px;
                color: #007403;
            }

        .topic .topic-video .video-img {
            display: flex;
            justify-content: center;
        }

            .topic .topic-video .video-img .vimg {
                height: 120px;
            }

    .video-list .playvideo {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
    }

    .video-list .video-content {
        display: block;
        padding: 12px 0 12px 0;
        margin-bottom: 12px;
    }

        .video-list .video-content .video-title {
            color: #000;
            font-weight: bold;
            font-size: 16px;
        }

    .question-content textarea.form-control {
        background-color: #ffffff !important;
        color: #000 !important;
        font-size: 16px !important;
    }

        .question-content textarea.form-control::placeholder {
            font-size: 16px !important;
        }

    .question-content .question {
        display: none;
    }

        .question-content .question.active {
            display: block;
        }

    .question-content .btn-area {
        margin-top: 12px;
        display: flex;
        justify-content: end;
    }

    .qpass .tboxopen {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .qpass .tboxopen img.tbox {
            max-width: 200px;
            z-index: 2;
        }

        .qpass .tboxopen img.light1, .dash-button-list .thesun .light1 {
            z-index: 1;
            max-width: 390px;
            position: absolute;
            animation-name: spin;
            animation-duration: 5000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

    .dash-button-list .thesun .light1 {
        max-width: 250px;
    }

    .qpass .tboxopen img.light2 {
        z-index: 3;
        max-width: 130px;
        position: absolute;
        animation-name: spin;
        animation-duration: 12000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .qpass .tboxopen {
    }

    .qpass .title-gem {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

        .qpass .title-gem span {
            font-weight: bold;
            font-size: 18px;
        }

        .qpass .title-gem img {
            max-width: 32px;
            max-height: 32px;
            margin-left: 5px;
        }

    .heartlove .heart {
        max-width: 200px;
        animation-name: heartbeat;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .heartlove .fadeintop {
        max-width: 200px;
        animation: fadeintop 1s ease-out forwards;
        opacity: 0; /* Initially hidden */
    }

    @keyframes heartbeat {
        0% {
            transform: scale(1);
        }

        25% {
            transform: scale(1.2);
        }

        50% {
            transform: scale(1);
        }

        75% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes fadeintop {
        0% {
            transform: translateY(-90px); /* Start slightly above its final position */
            opacity: 0; /* Fully transparent */
        }

        100% {
            transform: translateY(0); /* Move to its final position */
            opacity: 1; /* Fully opaque */
        }
    }
    /*popup footer*/
    .modal-content.footer-pop-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: transparent !important;
        border: none !important;
    }

    /*Annoucment popup*/
    .modal-content.modal-announcement .content {
        margin: 0;
        padding: 10px;
    }

    .modal-content.modal-announcement .modal-header {
        border-radius: 12px 12px 0px 0px;
        border-bottom: none !important;
        background-image: url(../img/modal/headerbg1.png);
        background-size: cover;
    }

        .modal-content.modal-announcement .modal-header .modal-title {
            color: #000;
            width: 100%;
            padding-left: 32px;
        }

    .modal-content.modal-announcement {
        border-radius: 16px;
        border: 3px solid #b46b4a;
        background-color: #fedbb3;
        background-image: url(../img/modal/bg1.jpg);
        background-size: cover;
        background-position: bottom;
    }

        .modal-content.modal-announcement .accordion {
            border: 2px solid #aa7b67;
            background-color: #ffedd7;
            border-radius: 12px;
            box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
            -webkit-box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
            -moz-box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
        }

            .modal-content.modal-announcement .accordion .accordion-button:not(.collapsed) {
                background-color: transparent;
                border-color: rgba(0, 0, 0, 0) !important;
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.00);
            }

            .modal-content.modal-announcement .accordion .accordion-button:focus, .modal-content.modal-announcement .accordion .accordion-button:active {
                outline: none;
                box-shadow: none;
            }

            .modal-content.modal-announcement .accordion .accordion-item {
                border-color: rgba(0, 0, 0, 0.0) !important;
                padding: 10px;
                border-bottom: 1px solid #cfc0ad !important;
            }

                .modal-content.modal-announcement .accordion .accordion-item:last-child {
                    border-bottom: 0px solid #cfc0ad !important;
                }

        .modal-content.modal-announcement .btn-close {
            opacity: 1;
            background-color: #f49d3c;
            border: 2px solid #b26813;
            border-radius: 100%;
            box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.39);
            -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.39);
            -moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.39);
            color: #fff;
        }
    /*Annoucment popup2*/
    .modal-content.modal-announcement2 .content {
        margin: 0;
        padding: 10px;
    }

    .modal-content.modal-announcement2 .modal-header {
        border-radius: 12px 12px 0px 0px;
        border-bottom: none !important;
        background-image: url(../img/modal/headerbg2.png);
        background-size: cover;
    }

        .modal-content.modal-announcement2 .modal-header .modal-title {
            color: #0061e4;
            text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; /* 上下左右的白色阴影 */
            width: 100%;
            padding-left: 32px;
            font-size: 20px;
            font-weight: bold;
        }

    .modal-content.modal-announcement2 {
        border-radius: 16px;
        border: 3px solid #b46b4a;
        background-color: #fedbb3;
        background-image: url(../img/modal/bg2.jpg);
        background-size: cover;
        background-position: bottom;
    }

        .modal-content.modal-announcement2 .accordion {
            border: 2px solid #74b02c;
            background-color: #f1ffc6;
            border-radius: 12px;
            box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
            -webkit-box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
            -moz-box-shadow: 2px 4px 9px 0px rgba(0,0,0,0.31);
        }

            .modal-content.modal-announcement2 .accordion .accordion-button:not(.collapsed) {
                background-color: transparent;
                border-color: rgba(0, 0, 0, 0) !important;
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.00);
            }

            .modal-content.modal-announcement2 .accordion .accordion-button:focus, .modal-content.modal-announcement .accordion .accordion-button:active {
                outline: none;
                box-shadow: none;
            }

            .modal-content.modal-announcement2 .accordion .accordion-item {
                border-color: rgba(0, 0, 0, 0.0) !important;
                padding: 10px;
                border-bottom: 1px solid #a5d32b !important;
            }

                .modal-content.modal-announcement2 .accordion .accordion-item:last-child {
                    border-bottom: 0px solid #cfc0ad !important;
                }

        .modal-content.modal-announcement2 .btn-close {
            opacity: 1;
            background-color: #59b3ff;
            border: 2px solid #1573c2;
            border-radius: 100%;
            box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.39);
            -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.39);
            -moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.39);
            color: #fff;
        }

    .gradient-warning {
        border: none;
        background-image: linear-gradient(to bottom, #ff9e20, #ffcd52);
    }
    /*Light Pact*/
    .light-box {
        width: 72%;
        background: rgba(255,255,255,0.6);
        border-radius: 12px;
        border: 3px solid #e0be00;
        padding: 6px;
        color: #000;
    }

        .light-box .box-title {
            background-image: url(../../img/light/ranking_title.png);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            height: 40px;
            text-align: center;
            line-height: 36px;
            font-weight: bold;
            font-size: 18px;
            margin-top: -28px;
            margin-bottom: 5px;
            position: relative;
        }

        .light-box .light-board {
            width: 100%;
            display: block;
        }

            .light-box .light-board .board-ranking {
                margin-bottom: 5px;
                min-height: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 6px;
                background: #A7C2FE;
                background: linear-gradient(105deg,rgba(167, 194, 254, 1) 0%, rgba(123, 166, 255, 1) 100%);
                border: 1px solid rgba(0,0,0,0.3);
                box-shadow: 0px 2px 2px rgba(0,0,0,0.25);
            }

                .light-box .light-board .board-ranking.rank1 {
                    background: #fadd41;
                    background: linear-gradient(105deg,rgba(250, 221, 65, 1) 0%, rgba(236, 156, 31, 1) 100%);
                }

                .light-box .light-board .board-ranking.rank2 {
                    background: #c7d4c3;
                    background: linear-gradient(105deg,rgba(199, 212, 195, 1) 0%, rgba(151, 183, 149, 1) 100%);
                }

                .light-box .light-board .board-ranking.rank3 {
                    background: #ffc2a8;
                    background: linear-gradient(105deg,rgba(255, 194, 168, 1) 0%, rgba(255, 155, 102, 1) 100%);
                }

                .light-box .light-board .board-ranking.my-rank {
                    background: #e6e5bc;
                    background: linear-gradient(105deg,rgba(230, 229, 188, 1) 0%, rgba(227, 219, 166, 1) 100%);
                }

                .light-box .light-board .board-ranking .rank-num {
                    min-width: 43px;
                    text-align: center;
                    font-weight: bold;
                    color: #7a0a0a;
                }

                .light-box .light-board .board-ranking .rank-name span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                    max-width: 130px;
                }

                .light-box .light-board .board-ranking .rank-num.rank-img {
                    margin-right: 5px;
                }

                    .light-box .light-board .board-ranking .rank-num.rank-img img {
                        max-height: 30px;
                    }

                .light-box .light-board .board-ranking .rank-detail {
                    display: flex;
                    align-items: center;
                }

                .light-box .light-board .board-ranking .rank-point {
                    padding-right: 5px;
                }

        .light-box .my-ranking {
            background-color: #a1c5ff;
            border-radius: 6px;
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-top: 3px;
            margin-bottom: 5px;
        }

            .light-box .my-ranking .dot {
                padding: 0px 5px;
            }

                .light-box .my-ranking .dot img {
                    max-width: 16px;
                }

            .light-box .my-ranking .my-ranking-title {
                width: 100%;
                text-align: center;
                font-weight: bold;
                color: #104190;
            }

.pact .bell, .pact .reward, .pact .video {
    margin-top: 10px;
    width: 58px;
    height: 58px;
    position: relative;
    margin-right: 10px;
}

        .pact .bell .dot-notice {
            width: 12px;
            height: 12px;
            border-radius: 100%;
            background-color: red;
            position: absolute;
            right: -3px;
            top: -3px;
            z-index: 2;
        }

    .pact .bell img {
        max-height: 58px;
        position: absolute;
        z-index: 1;
    }

    .pact .reward img {
        max-height: 58px;
        position: absolute;
        z-index: 1;
    }

    .pact .video img {
        max-height: 58px;
        position: absolute;
        z-index: 1;
    }

    .sitepost {
        width: 150px;
        height: 135px;
        background-image: url(../../img/light/signpost.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 50px;
        right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .sitepost span {
            max-width:80%;
            display: block;
            color: #fff;
            font-weight: bold;
            font-size: 17px;
            text-align: center;
            margin-bottom: 12px;
            text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
        }

    .sunrecord .sunimg {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

        .sunrecord .sunimg .sunsize {
            width: 180px;
        }

    .sunrecord .sunrecord-content {
        width: 100%;
    }

        .sunrecord .sunrecord-content .sun-title {
            margin-bottom: 8px;
            position: relative;
            width: auto;
        }

            .sunrecord .sunrecord-content .sun-title .info {
                position: absolute;
                right: -16px;
                top: -12px;
                color: #fff;
                text-shadow: 1px 1px 1px #000;
            }

            .sunrecord .sunrecord-content .sun-title h4 {
                font-size: 18px;
                text-align: center;
            }

        .sunrecord .sunrecord-content .sun-totalpoint {
            display: flex;
            width: 100%;
            justify-content: center;
        }

            .sunrecord .sunrecord-content .sun-totalpoint .sun-totalpoint-box {
                color: #000;
                font-size: 16px;
                text-align: center;
                border-radius: 18px;
                padding: 3px 12px;
                min-width: 180px;
                border: 2px solid rgba(255,255,255,0.7);
                background-color: rgba(255,255,255,0.4);
            }

        .sunrecord .sunrecord-content .record-list {
            background-color: rgba(255,255,255,0.9);
            margin-bottom: 5px;
            border-radius: 12px;
            overflow: hidden;
        }

            .sunrecord .sunrecord-content .record-list .listdate {
                background-color: rgba(0,0,0,0.06);
                padding: 5px 10px;
                border: 1px solid rgba(0,0,0,0.1);
            }

            .sunrecord .sunrecord-content .record-list .namelist {
                padding: 5px 10px;
                display: flex;
                width: 100%;
                justify-content: space-between;
            }

    friend-btn .btn {
        border: 2px solid transparent;
    }

    .friend-btn .btn.active {
        border: 2px solid #fff;
    }

    .my-friend-list .friend {
        display: flex;
        width: 100%;
        justify-content: space-between;
        background-color: rgba(255,255,255,0.85);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 5px;
    }

        .my-friend-list .friend .levelname {
            display: flex;
            width: 100%;
            align-items: center;
        }

        .my-friend-list .friend .friend-name .fname {
            display: block;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #000;
            font-weight: bold;
        }

        .my-friend-list .friend .levelname .level {
            margin-right: 10px;
        }

            .my-friend-list .friend .levelname .level img {
                border-radius: 100%;
                max-width: 64px;
            }

        .my-friend-list .friend .btn-list {
            display: inline-block;
        }

    .my-friend-list .expiry-date {
        white-space: nowrap;
    }

    .select-theme {
        display: block;
        border-radius: 12px;
        background-color: rgba(255,255,255,0.75);
        border: 2px solid #a9a9a9;
        padding: 12px;
        text-align: center;
        margin-bottom: 12px;
    }

        .select-theme .theme-icon img {
            max-width: 96px;
        }

        .select-theme .theme-share {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

            .select-theme .theme-share .btn {
                width: 48px;
                height: 48px;
                padding: 3px !important;
            }

            .select-theme .theme-share i {
                font-size: 26px;
            }

    .treasure-academy-trophy .trophy-img img {
        padding-top: 6px;
        max-width: 70px;
    }

    .treasure-academy-trophy .day-title {
        margin-top: 4px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-shadow: 2px 1px 1px black;
        border-radius: 16px;
        background-color: rgba(0,0,0,0.5);
        padding: 3px 5px;
        margin-top: 8px;
    }

    .treasure-academy-trophy .trophy-img {
        text-align: center;
        width: 92px;
        height: 92px;
        border: 3px solid rgba(205, 205, 205, 1);
        border-radius: 100% !important;
        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.31) !important;
        -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.31) !important;
        -moz-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.31) !important;
        background: #5c5755;
        background: linear-gradient(182deg, rgba(92, 87, 85, 0.7) 0%, rgba(23, 23, 23, 1) 100%);
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
    }

        .treasure-academy-trophy .trophy-img.active {
            border: 3px solid rgba(255, 229, 52, 1);
            background: #171717;
            background: linear-gradient(182deg, rgba(23, 23, 23, 1) 8%, rgba(209, 178, 0, 1) 100%);
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
        }

            .treasure-academy-trophy .trophy-img.active:after {
                content: "\f26a";
                font-family: bootstrap-icons !important;
                position: absolute;
                right: 0px;
                width: 21px;
                height: 21px;
                font-size: 21px;
                color: rgba(255, 229, 52, 1);
                background-color: #000;
                border-radius: 100%;
            }

.academy-title {
    margin-bottom: 10px;
}

.academy-title h1 {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* Shadow */
    color: white; /* Text color */
}

.bg-transparent-30 {
    background-color:rgba(255,255,255, 0.3) !important;
}

.bg-transparent-65 {
    background-color: rgba(255,255,255,0.65) !important;
}

.bg-transparent-special {
    background-color: rgba(255,255,255,0.65) !important;
    box-shadow: 8px 8px 5px -5px rgba(213,198,198,0.3) !important;
}

.shadow-special {
    box-shadow: 8px 8px 5px -5px rgba(213,198,198,0.3) !important;
}

.form-control.shadow-m {
    box-shadow: 8px 8px 5px -5px rgba(213,198,198,0.3) !important;
}

.btn-shadow {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
}

.btn-golden-bronze {
    background-color: #C89B3C !important;
    border-color: #A67C2E !important;
    color: #FFF8E1 !important;
}
.btn-light-gold {
    background-color: #F1C75B !important;
    border-color: #D1A142 !important;
    color: #4E3B1F !important;
}
.btn-sunset-glow {
    background: linear-gradient(180deg, #FFCC80 0%, #FFA726 100%);
    border: 1px solid #E07B00;
    color: #4A2600 !important;
}

.btn-gold-pairing {
    background: linear-gradient(180deg, #FFD35C 0%, #C89B3C 100%);
    border: 1px solid #A67923;
    color: #5A3A00 !important;
}

.btn-warm-treasure {
    background: linear-gradient(180deg, #FFF3D6 0%, #FFE6A1 100%);
    border: 1px solid #C89B3C !important;
}