html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

#toolbarDiv::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent);
}

::-webkit-scrollbar {
    width: 4px;
    /*对垂直流动条有效*/
    height: 8px;
    /*对水平流动条有效*/
}


.left{
    height: 99.6%;
    width: 31%;
}
.center{
    height: 99.6%;
    width: 30%;
}
.right{
    height: 99.6%;
    width: 31%;
}
.video{
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.video>.title{
    width: 100%;
    height: 10%;
    background-image: url(../../img/moduleTitle.png);
    background-repeat: no-repeat;
    background-size: 90% 100%;
    display: flex;
    align-items: center;
}

.video>.title>div:nth-child(2){
    width: 4.4%;
    height: 57%;
    background-image: url(../../img/details.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 2%;
    cursor: pointer;
}

.video>.title>div:nth-child(3){
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    margin-left: 19%;
    margin-top: 5%;


}

.video>.title>.time-options>div{
    width: 30%;
    height: 82%;
    background-image: url(../../img/air/Rectangle01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
    cursor: pointer;
}

.selected-daily {
    background-image: url(../../img/air/Rectangle01_daily.png);
}

.video>.title>span{
    align-self: center;
    color: #FFFFFF;
    font-size: 16px;
}
.content{
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    /*padding: 10px;*/
}
.tota{
    font-size: 15px;
    font-weight: bold;
}
.total{
    font-size: 4px;
}
.readLine{
    /* border: 1px solid deepskyblue; */
    /* margin-top: 4%; */
    height: 45%;
}
.readLine>.title{
    /* border: 1px solid green; */
    width: 100%;
    height: 9.4%;
    background-image: url(../../img/moduleTitle.png);
    background-repeat: no-repeat;
    background-size: 90% 100%;
    display: flex;
}

.readLine>.title>div:nth-child(2){
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    margin-left: 19%;
    margin-top: 2%;
}

.readLine>.title>.time-options>div{
    width: 30%;
    height: 82%;
    background-image: url(../../img/air/Rectangle01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
    cursor: pointer;
}

.readLine>.title>span{
    align-self: center;
    color: #FFFFFF;
    font-size: 16px;
    text-indent: 45px;
}
.readLine>#chart{
    width: 100%;
    height: 90%;
}


.electricity,
.electricity1,
.electricity2 {
    height: 33%;
}

.title {
    width: 100%;
    height: 15%;
    background-image: url(../../img/moduleTitle.png);
    background-repeat: no-repeat;
    background-size: 95% 100%;
    display: flex;
}

.title > span {
    align-self: center;
    color: #FFFFFF;
    font-size: 16px;
    padding-left: 53px;
}

.chart {
    display: flex;
    width: 100%;
    height: 80%;
}

.chart > #year-chart {
    flex: 1;
    width: 50%;
    height: 100%;
}

.chart > #year-container {
    flex: 2;
    width: 50%;
    height: 100%;
}

.interfaceState{
    width: 100%;
    height: 10%;
}
.right>.interfaceState{
    display: flex;
    justify-content: space-between;
}
.right>.interfaceState>div{
    height: 100%;
    display: flex;
}
.right>.interfaceState>div>span{
    align-self: center;
}
.right>.interfaceState>div>span:nth-child(1){
    color: white;
}
.right>.interfaceState>.title{
    background-image: url(../../img/index/interfaceState.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 14%;
}
.right>.interfaceState>.error{
    width: 30%;
}
.right>.interfaceState>div>span:nth-child(1){
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}
.defenceWarn>.title>div:nth-child(2) {
    background-image: url(../../img/details.png);
    background-repeat: no-repeat;
    background-size: 85% 100%;
    width: 5%;
    height: 58%;
    margin-left: 1%;
    margin-top: 11px;
    cursor: pointer;
}

.dayWarn{
    width: 100%;
    height: 100%;
    /*margin-top: 4%;*/
}
.dayWarn>.title{
    width: 100%;
    height: 5%;
    background-image: url(../../img/moduleTitle.png);
    background-repeat: no-repeat;
    background-size: 85% 100%;
    display: flex;
}

.dayWarn>.title>div:nth-child(2){
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    margin-left: 19%;
    margin-top: 2%;
}

.dayWarn>.title>.time-options>div{
    width: 30%;
    height: 82%;
    background-image: url(../../img/air/Rectangle01.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
    cursor: pointer;
}


.dayWarn>.title>span{
    align-self: center;
    color: #FFFFFF;
    font-size: 16px;
    text-indent: 45px;
}
.dayWarn>.table{
    margin-top: 4%;
    width: 100%;
    height: 89%;
    overflow: auto;
}

.dayWarn>.table>div:nth-child(n + 1){
    width: 89%;
    margin-top: 1%;
    background: url("../../img/index/standardColumn.png") no-repeat;
    background-size: 100% 100%;
    height: 6%;
    display: flex;
    justify-content: space-around;
}
.dayWarn>.table>div:nth-child(n + 1):hover{
    background: url("../../img/index/standardColumnHover.png") no-repeat;
    background-size: 100% 100%;
}
.dayWarn>.table>div:nth-child(n + 1)>span{
    color: rgba(255,255,255,0.6);
    align-self: center;
    width: 33.3%;
    text-align: center;
}
.dayWarn>.table>.tableList{
    width: 100%;
    background: url("../../img/index/title.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto; /* 设置左右外边距为自动 */
    height: 6%;
    display: flex;
    justify-content: space-around;
}
.dayWarn>.table>.tableList>span{
    color: rgba(255,255,255,0.8);
    align-self: center;
    width: 33.3%;
    text-align: center;
}