/* Sun-Panel-Helper CSS */
/* 此文件由系统自动管理，请勿手动修改 */
/* 警告：手动修改可能导致样式冲突或程序异常 */
/* 上次更新：7/9/2025, 2:32:01 PM */

.logo{
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
 /* 天气预报组件 */
.weather{
    margin-top: 6px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.weather-container{
    display: flex;
    width: 100%;
    /* width: 137px;  /* 这个宽度要跟iframe差不多 */
    position: relative;
    height: 24px;
    justify-content: center;
}

.weather-iframe{
    /* transform:  scale(.9);  */
    /* position: absolute; 
    /* right: -10px; 
    /* right: -30px; */
    width: 127px;
    height: 24px;
} 

.logo>span{
    font-size: 28px !important;
    white-space: nowrap;
}

.clock{
    cursor: pointer;
}
.clock-time{
    font-size: 19px !important;
}

.clock-date,
.clock-week{
    font-size: 11px !important;
}

.divider{
    margin: 0 30px !important;
    /* margin-right: 25px !important;
    margin-left: -2px !important; */
}

/* 搜索框响应式 */
@media only screen and (min-width: 800px) {
   .scroll-container >div>div:first-child>div{
        margin-top: 0 !important;
    }

    .scroll-container >div>div:first-child{
        display: flex;
        align-items: center;
    }

    .search-box {
        margin-left: 50px;
    }
}


/* 系统状态框 样式模拟*/
.system-monitor>div{
    margin-top: 30px !important;
}


.custom-system-box{
    background-color: rgba(42, 42, 42, 0.42);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-system-box:hover{
    cursor: pointer;
    box-shadow: 0 0 20px var(--custom-box-shadow-color, #2a2a2a6b), 0 0 1px 1px #ffffff1a, 0 0 20px 5px #0000001a;
}

/* 全年倒计时 */
.gradient-text {
    font-weight: bold;
    /* background: linear-gradient(to right, #ff7e5f, #feb47b); */
    background: linear-gradient(90deg, #62b8f2, #1abc9c);
    -webkit-background-clip: text;
    color: transparent !important;
}

.progress-container {
    /* margin: 40px 0 30px; */
    width: 75%;
}

.progress-bar {
    height: 4.5px;
    background: #ecf0f1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 5px;
    margin-top: 6px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #1abc9c);
    border-radius: 12px;
    transition: width 1s ease;
}

.progress-label {
    display: flex;
    justify-content: center;
    /* justify-content: space-between; */
    font-weight: bold;
    /* color: #7f8c8d; */
    color: #9ea5a6;
    font-size: 10px;
}

/* iframe 节假日倒计时 */
.festival-iframe.custom-system-box{
   background-color: #fff !important;
}

.festival-container{
    height: 70px;
    overflow:hidden;
} 

.festival{
    height: 95px !important;
    width: 160px !important;
    transform: translateY(-16px);
}

 /* 自己写的节假日倒计时 */
.custom-festival-container{
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-festival-container .title{
    font-size: 10px;
    transform: scale(0.9);
    color: #9ea5a6;
}

.custom-festival-container .lunarDate{
    color: #9ea5a6;
    font-weight: bold;
}

.custom-festival-container .days-detail{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16%;
    justify-content: center;
    width: 100%;
}

.custom-festival-container .left{
    font-size: 19px !important;
    flex-shrink: 0;
}

.custom-festival-container .right {
    flex-shrink: 0;
}

.custom-festival-container .days-detail span{
    font-size: 10px;
    /* color: #7f8c8d; */
}

.custom-festival-container .days{
    font-size: 19px !important;
    /* color: #fff !important; */
}