.matrix-container{display:flex;flex-direction:column-reverse}@media (min-width:576px){.matrix-container{flex-direction:row}}.matrix{position:relative;padding:30px;width:320px;height:320px}.matrix,.matrix__cells{display:flex;flex-direction:column}.matrix__row{display:flex;flex-direction:row}.matrix__row:first-child .matrix__cell:first-child{border-top-left-radius:10px}.matrix__row:first-child .matrix__cell:last-child{border-top-right-radius:10px}.matrix__row:last-child .matrix__cell:first-child{border-bottom-left-radius:10px}.matrix__row:last-child .matrix__cell:last-child{border-bottom-right-radius:10px}.matrix__cell{width:50px;height:50px;background-color:#ccc;display:flex;justify-content:center;align-items:center;margin:1px}.matrix__circle{border-radius:50%;background-color:#fff;border:1px solid rgba(0,0,0,.5);height:40px;width:40px;opacity:.3;color:#fff;text-align:center;padding-top:6px;font-weight:700;letter-spacing:-3px;font-size:18px;padding-right:3px}.matrix__circle.selected{opacity:1}.matrix__x-label{position:absolute;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);font-weight:700}.matrix__x-label--title{top:50%;position:absolute;width:auto;-webkit-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg);left:-30px}.matrix__x-label--min{top:40px;color:#093}.matrix__x-label--max{bottom:40px;color:red}.matrix__y-label{position:absolute;bottom:0;font-weight:700}.matrix__y-label--title{left:50%;position:absolute;width:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.matrix__y-label--min{left:30px;color:#093}.matrix__y-label--max{right:30px;color:red}.matrix-info{margin:0 0 0 32px}@media (min-width:576px){.matrix-info{margin:40px 0 0 50px}}.matrix-info__title{cursor:pointer;display:flex;flex-direction:row;align-items:center;margin:10px 0}.matrix-info__title.active .matrix-info__title-indicator:after{display:block}.matrix-info__title-indicator{border:1px solid #000;border-radius:100%;width:30px;height:30px;margin:0 10px;position:relative}.matrix-info__title-indicator:after{content:"";position:absolute;display:none;left:9px;top:3px;width:8px;height:15px;border:solid #000;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin:1.5px}