* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background: #121e39;
}
.nav {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.nav-title {
    position: absolute;
    text-align: center;
    color: white;
    font-size: 36px;
}
.nav img {
    width: 1920px;
    overflow: hidden;
}
.main {
    position: absolute;
    display: flex;
    top: 90px;
    bottom: 0;
    width: 100%;
}

.main .main-left, .main .main-right, .main-content-bottom .chart-container,.main-content-center .chart-container{
    flex: 1;
}
.main .main-content {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.main-content-top-img {
    width: 100%;
    height: 96%;
}
.main-content-top-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-content-center {
    min-height: 265px;
    max-height: 400px;
    display: flex;
    flex: 1;
}
.main-content-bottom {
    display: flex;
    min-height: 205px;
}
.main-left, .main-right{
    width: 468px;
    display: flex;
    flex-direction: column;
}
.main-left .chart-container,.main-right .chart-container {
    flex: 1;
    min-height: 249px;
    margin: 0 5px 10px;
    border: 1px solid #344a6b;
    border-top: 0;
    border-radius: 4px;
}
/* @media screen and (max-width: 1920px) {
    .main-content-top {
        height: 390px;
    }
}

@media screen and (min-width: 1920px) {
    .main-content-top {
        height: 510px;
    }
} */
.main-content-top, .main-content-bottom .chart-container,.main-content-center .chart-container {
    margin: 0 5px 10px;
    border: 1px solid #344a6b;
    border-radius: 4px;
    border-top: 0;
    overflow: hidden;
}

.main-left .chart-container.figure, .main-right .chart-container.figure, .main-left .chart-container.histogram,.main-right .chart-container.histogram {
    flex: 2;
}
.orders-organization {
    text-align: center;
    margin-top: 25px;
}
.orders-organization .organization-title {
    text-align: center;
    padding: 0 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #32fffa;
    border-radius: 5px;
    background: #16456b;
}

.chart-title-img {
    background: #0a3849;
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon-title {
    color: #ffffff;
    flex: 2;
    display: inline-block;
    line-height: 35px;
    padding-left: 5px;
    font-size: 20px;
}
.icon-img {
    float: right;
    padding-right: 15px;
}
.chart-container {
    background: rgba(23,49,96,0.7);
}
.leaning-chart-container {
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    /*align-items: center;*/
}
.chart-container-left {
    width: 130px;
    padding: 33px 20px;
}
.chart-container-right {
    width: 70%;
}
.chart-container-left-name {
    position: absolute;
    border: 1px solid #32fffa;
    border-radius: 5px;
}
.chart-container-left span {
    font-size: 14px;
    color: white;
    display: block;
    text-align: center;
    width: 130px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-container-left .projects {
    width: 130px;
    color: #32fffa;
    font-size: 18px;
    border-bottom: 1px solid #32fffa;
}
.projects-title {
    font-size: 18px;
}
.projects-title.active {
    background: #16456b;
}
.projects-name {
    display: flex;
    justify-content: center;
    flex-direction:column;
    height: 100%;
}

/*表格*/
.table {
    color: #ffffff;
    width: 100%;
    padding: 5px;
}
th,td {
    text-align: center;
    font-size: 16px;
    height: 30px;
}
.table thead tr{
    background: rgba(10,56,73,0.58);
}
.table tbody tr:nth-child(odd){
    background: rgba(25,177,201,0.2);
}
.table tbody tr:nth-child(even){
    background: rgba(10,56,73,0.58);
}
.table-project-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#prevention>div, #prevention>div>canvas {
    height: 98% !important;
}
#orders>div {
    top: -30px !important;
}
.tree {
    height: 100%;
}
.tree ul {
    text-align: center;
    padding-top: 20px; position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.tree li {
    display:inline-block;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #32fffa;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #32fffa;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 1px solid #32fffa;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #32fffa;
    width: 0; height: 20px;
}
.tree .list-group a {
    width: 22px;
    height: 110px;
    overflow: hidden;
    /*text-overflow:ellipsis;*/
    /*white-space: nowrap;*/
}

.tree .list-group a, .tree li a {
    border: 1px solid #32fffa;
    padding: 5px 10px;
    text-decoration: none;
    color: #fff;
    font-family: arial, verdana, tahoma;
    font-size: 14px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover ul li::after,
.tree li a:hover ul li::before,
.tree li a:hover ul::before,
.tree li a:hover ul ul::before{
    border-color:  #94a0b4;
}

.shine {
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    animation: opacity-change 1s ease-in-out infinite;
    -webkit-animation: opacity-change 1s ease-in-out infinite;
    -moz-animation: opacity-change 1s ease-in-out infinite;
    -o-animation: opacity-change 1s ease-in-out infinite;
}
.shine2 {
    animation: opacity-change 1.75s ease-in-out infinite;
    -webkit-animation: opacity-change 1.75s ease-in-out infinite;
    -moz-animation: opacity-change 1.75s ease-in-out infinite;
    -o-animation: opacity-change 1.75s ease-in-out infinite;
}
@keyframes opacity-change {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes opacity-change {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes opacity-change {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes opacity-change {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}