.result-page{.results{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr;grid-template-areas:"spider details";grid-gap:1rem;gap:1rem;height:100%;overflow-y:hidden;overflow-x:visible;.spider{grid-area:spider;overflow-y:auto;height:100%;width:510px;display:flex;flex-direction:column;justify-content:safe center;flex-wrap:nowrap;gap:.5rem;.spider-legend{display:grid;justify-content:center;grid-template-columns:auto auto;grid-gap:.8rem .6rem;gap:.8rem .6rem;.legend-full{grid-column:span 2;display:flex;justify-content:center;align-items:center;>span{padding:.2rem .4rem;color:var(--transp-light)}.green-area{border-radius:.3rem 0 0 .3rem;background-color:var(--xxxxlight-green)}.red-area{border-radius:0 .3rem .3rem 0;background-color:var(--xxxlight-red)}}.legend-item{padding:.2rem .4rem;border-radius:.3rem;display:flex;justify-content:center;align-items:center;gap:.6rem;color:var(--transp-dark);&.marker-1{background-color:var(--marker-1-bg)}&.marker-2{background-color:var(--marker-2-bg)}&.marker-3{background-color:var(--marker-3-bg)}.controls .row{text-align:center;display:flex;justify-content:center;align-items:center}}}}.details{overflow-y:auto;grid-area:details;display:flex;flex-direction:column;gap:.7rem;width:100%;min-width:15rem}}.detail-box{display:flex;flex-direction:column;color:var(--transp-dark);.header{padding:.6rem .8rem;background-color:var(--xxxlight-green);border-radius:.3rem;cursor:pointer;display:flex;justify-content:space-between;gap:.3rem;span{font-size:1rem;font-weight:300;color:var(--dark-green);font-style:italic}&:hover{background-color:var(--xxlight-green)}&.active{background-color:var(--xlight-green);border-bottom-right-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--light-green)}}}.other-box-content{display:flex;flex-direction:column;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem;overflow:hidden;.area{display:flex;flex-direction:column;gap:.3rem;padding:.6rem .8rem;.row{display:flex;justify-content:space-between;align-items:center;gap:.3rem}.value{text-align:right}&.value1{background-color:var(--marker-1-bg)}&.value2{background-color:var(--marker-2-bg)}&.value3{background-color:var(--marker-3-bg)}}}.content{display:flex;flex-direction:column;gap:.4rem;padding:.6rem .8rem;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem;background-color:var(--xxxxlight-green);.note{font-size:1rem;color:var(--xdark-green);&.right{text-align:right}}.row{display:flex;justify-content:space-between;align-items:center;gap:.3rem;.value{text-align:right}.m1,.m2,.m3{padding:.2rem .4rem;border-radius:.3rem}.m1{background-color:var(--marker-1-card)}.m2{background-color:var(--marker-2-card)}.m3{background-color:var(--marker-3-card)}}}}.controls-container{.controls{grid-area:footer;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:.9rem;gap:.9rem}}}