.charts {  
    width: 100%;
    /* background-color: rgb(245, 248, 248); */
}  

.charts .chart_wrapper{  
    width: 100%;
    height: 410px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #9e9beb;
}  

.charts .chart {  
    width: 100%;  
    height: 90%;
    margin-left: 0%;
    flex-grow: 1;
    /* border: 1px solid rgb(177, 162, 162); */
}  

.charts .control {  
    width: 100%;  
    height: 41px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;

    margin-left: 3px;
    margin-right: 2px;
    margin-bottom: 2px;
    background-color: #C0C0C0;
    border-radius: 6px;
    /* border: 1px solid black; */
    cursor: pointer; /* 鼠标悬停时变为手指 */
}  

.charts ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
}

.charts ul li{
    margin: 6px;
}

.charts input{
    width: 80px;
}

.charts button{
    background-color: black;
    border-radius: 15px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时变为手指 */
    font-size: 16px; /* 字体大小 */
    color: rgb(255, 239, 94);
}

.charts button:hover {
    background-color: #4262ce; /* 悬停时改变背景颜色 */
} 

.charts .control {  
    width: 100%;  
    height: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}  

.charts .control {
    background-color: #C0C0C0;
}

.charts ul{
    margin-top: 1px;
}

.charts .timeline-container{
    width: 100%;
    margin-top: 0px;
}
.charts .date-range-slider {
    height: 20px;
    margin-left: 52px;
    margin-right: 120px;
}

.charts .ui-slider-handle {
    width: 12px !important;
    height: 20px !important;
    border-radius: 6px;
    background: linear-gradient(to right, #3498db, #2980b9);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    margin-left: 0px;
    border: 1px solid rgba(0,0,0,0.1);
}

.charts .start-handle {
    background: #3498db !important;
}
.charts .end-handle {
    background: #e74c3c !important;
}