h3{
    font-size: 20px;
}

.summgraph{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* gap:20px; */
    padding: 25px 50px;
    max-height: calc(100vh - 554px);;
    border-radius: 40px;
    background: linear-gradient(153deg, rgba(35, 35, 35, 0.90) 13.23%, rgba(21, 21, 21, 0.60) 197.93%);
    /* box-shadow: 0px 4px 300px 50px rgba(0, 0, 0, 0.05); */
}

.summgraph-topbar{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}


h4{
    font-size: 14px;
    font-weight: 100;
}

.summgraph-key{
    gap:20px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    flex-grow: 6;
    max-width: 1250px;
    border-radius: 61px;
    /* opacity: 0.15; */
    height:42px;
    background: linear-gradient(92deg, #2d2d2d 59.36%, #272727 129.79%);
    padding: 0 30px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2) inset;
}
.summgraph-key h4{
    width:55px;
    margin:0 15px
}
.keydivide{
    border-right: 1px solid rgba(255,255,255,0.8);
    height: 15px;
    flex-grow: 0 !important;
    margin: 0 10px;
}

.summgraph-key>div{
    /* flex-grow:1; */
    display: flex;
    text-align: center;
    align-items: center;
    gap:13px;
}

.keycolor{
    width:8.5px;
    height:8.5px;
    border-radius: 5px;
    background-color: white;
}

.summgraph-keyspacing{
    flex-grow: 2;
}

.summgraph-area{
    flex-grow: 2;
    position: relative;
    /* background:blue; */
    width:100%;
    max-height:100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#summarygraph{
    /* background:white; */
    flex-grow: 1;
    position: relative;
    width:100%;
    height:100%;
    max-height:100%;
    /* margin-left: -5px; */
}

#key-con{
    background-color: rgba(125, 22, 21, 1);
    box-shadow: 0 0 6px 2.5px rgba(125, 22, 21, 0.9);
}

#key-bra{
    background-color: rgba(210, 95, 56, 1);
    box-shadow: 0 0 6px 2.5px rgba(210, 95, 56, 0.9);
}

#key-cur{
    background-color: rgba(51, 106, 124, 1);
    box-shadow: 0 0 6px 2.5px rgba(51, 106, 124, 0.9);
}

#key-dra{
    background-color: rgba(255, 131, 61, 1);
    box-shadow: 0 0 6px 2.5px rgba(255, 131, 61, 0.9);
}

#key-res{
    background-color: rgba(61, 81, 255, 1);
    box-shadow: 0 0 6px 2.5px rgba(61, 81, 255, 0.9);
}

#key-rev{
    background-color: rgba(170, 255, 61, 1);
    box-shadow: 0 0 6px 2.5px rgba(170, 255, 61, 0.9);
}

#key-tec{
    background-color: rgba(211, 158, 167, 1);
    box-shadow: 0 0 6px 2.5px rgba(211, 158, 167, 0.9);
}

#key-vis{
    background-color: rgba(239, 148, 111, 1);
    box-shadow: 0 0 6px 3px rgba(239, 148, 111, 0.9);
}