@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);

:root {
    --blue: #526dfa;
    --indigo: #6610f2;
    --purple: #8a46a3;
    --pink: #e83e8c;
    --red: #ef4141;
    --orange: #8a46a3;
    --yellow: #ffed47;
    --green: #7ee48e;
    --teal: #20c997;
    --cyan: #45cfe1;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #8a46a3;
    --secondary: #222831;
    --success: #7ee48e;
    --info: #45cfe1;
    --warning: #ffed47;
    --danger: #ef4141;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1260px;
    --font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.8;
    color: #222831;
    text-align: left;
    background-color: #fff
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

img {
    vertical-align: middle;
    border-style: none
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-family: "Source Sans Pro", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    line-height: 1.1;
    color: inherit
}

.h1,
h1 {
    font-size: 2.875rem
}

.h2,
h2 {
    font-size: 2.25rem
}

.h3,
h3 {
    font-size: 2rem
}

.h4,
h4 {
    font-size: 1.75rem
}

.h5,
h5 {
    font-size: 1.5rem
}

.h6,
h6 {
    font-size: 1.0625rem
}


.small,
small {
    font-size: 80%;
    font-weight: 400
}

.container,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {

    .container,
    .container-sm {
        max-width: 540px
    }
}

@media (min-width:768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px
    }
}

@media (min-width:992px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 98%
    }
}

@media (min-width:1260px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1200px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-left: -20px
}

.col {
    position: relative;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #222831;
    background-color: #fff
}

.table td,
.table th {
    padding: 5px 15px;
    vertical-align: top;
    border-top: 0 solid #222831
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 0 solid #222831
}

.table tbody+tbody {
    border-top: 0 solid #222831
}

.table-sm td,
.table-sm th {
    padding: .3rem
}

.table-primary,
.table-primary>td,
.table-primary>th {
    background-color: #fbe7d8
}

.table-primary tbody+tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
    border-color: #f8d2b6
}

.table-active,
.table-active>td,
.table-active>th {
    background-color: rgba(0, 0, 0, .075)
}



img {
    max-width: 100%;
    height: auto
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0
}

.container-lg,
.container-md,
.container-sm {
    max-width: calc(1600px + 40px)
}

@media only screen and (max-width:767px) {

    .container-lg,
    .container-md,
    .container-sm {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (max-width:767px) {
    .container {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (max-width:767px) {
    .row {
        margin-left: -30px;
        margin-right: -30px
    }
}

@media only screen and (max-width:767px) {
    .row [class^=col] {
        padding-left: 30px;
        padding-right: 30px
    }
}

::selection {
    color: #fff;
    background: #8a46a3
}

.text-block p:last-child {
    margin-bottom: 0
}

@media only screen and (max-width:991px) {
    body {
        font-size: 16px;
        line-height: 1.6
    }
}

.h1,
h1 {
    margin-bottom: 40px
}

@media only screen and (max-width:991px) {

    .h1,
    h1 {
        font-size: 30px
    }
}

@media only screen and (min-width:768px) {

    .h1,
    h1 {
        margin-bottom: 50px
    }
}

.h2,
h2 {
    margin-bottom: 10px
}

@media only screen and (max-width:991px) {

    .h2,
    h2 {
        font-size: 26px
    }
}

@media only screen and (min-width:992px) {

    .h2,
    h2 {
        margin-bottom: 20px
    }
}

.h5,
h5 {
    margin-bottom: 20px;
    font-weight: 600
}

@media only screen and (max-width:767px) {

    .h5,
    h5 {
        font-size: 20px
    }
}

.h6,
h6 {
    font-family: inherit;
    margin-bottom: 5px;
    font-weight: 400;
    color: #000
}

@media only screen and (max-width:991px) {

    .h6,
    h6 {
        font-size: 15px
    }
}

.table-title-with-prompt {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 4px
}

@media only screen and (min-width:576px) {
    .table-title-with-prompt {
        font-size: 16px
    }
}

.table-sub-title {
    font-size: 12px;
    opacity: .7;
    margin-bottom: 0
}

@media only screen and (min-width:576px) {
    .table-sub-title {
        font-size: 14px
    }
}

.img-wrap {
    position: relative;
    background-color: #000
}

.img-wrap>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.small-text {
    font-size: 15px
}

@media only screen and (min-width:768px) {
    .small-text {
        font-size: 17px
    }
}



@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.matrix-diagram {
    position: relative;
    font-size: 4px;
    max-width: 872px;
    margin: 0 auto
}

@media only screen and (min-width:400px) {
    .matrix-diagram {
        font-size: 5px
    }
}

@media only screen and (min-width:576px) {
    .matrix-diagram {
        font-size: 6px
    }
}

@media only screen and (min-width:1260px) {
    .matrix-diagram {
        font-size: 8px
    }
}


/* matrix-diagram__circle */

.matrix-diagram__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 5;
    border-radius: 50%;
    border: 2px solid transparent;
    background-color: #cacace;
    color: #a3a3a6;
    font-weight: 500;
    transition: color .3s, background-color .3s, border-color .3s
}

.matrix-diagram__circle.-position-a {
    top: 50%;
    left: 3.9%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-a2 {
    top: 50%;
    left: 13%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-a1 {
    top: 50%;
    left: 19.4%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-a3 {
    top: 50%;
    left: 32.4%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-b {
    top: 3.9%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-b2 {
    top: 13.1%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-b1 {
    top: 19.5%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-b3 {
    top: 32.5%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-c {
    top: 50.1%;
    right: 4%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-c2 {
    top: 50.1%;
    right: 13.1%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-c1 {
    top: 50.1%;
    right: 19.5%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-d {
    bottom: 3.9%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-d2 {
    bottom: 13.1%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-d1 {
    bottom: 19.5%;
    left: 50%;
    transform: translate(-50%, 0)
}

.matrix-diagram__circle.-position-e {
    top: 50%;
    left: 49.9%;
    transform: translate(-50%, -50%)
}

.matrix-diagram__circle.-position-e1 {
    top: 50%;
    right: 39.2%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-e2 {
    top: 50%;
    right: 34.7%;
    transform: translate(0, -50%)
}

.matrix-diagram__circle.-position-f {
    top: 16%;
    left: 16.2%
}

.matrix-diagram__circle.-position-g {
    top: 16.1%;
    right: 16.1%
}

.matrix-diagram__circle.-position-y {
    bottom: 15.9%;
    right: 16.3%
}

.matrix-diagram__circle.-position-p1 {
    top: 27.8%;
    right: 27.8%
}

.matrix-diagram__circle.-position-p2 {
    top: 23%;
    right: 23%
}

.matrix-diagram__circle.-position-p3 {
    bottom: 27.8%;
    left: 27.8%
}

.matrix-diagram__circle.-position-p4 {
    bottom: 23%;
    left: 23%
}

.matrix-diagram__circle.-position-k {
    bottom: 16.1%;
    left: 16%
}

.matrix-diagram__circle.-position-s1 {
    top: 27.8%;
    left: 27.8%
}

.matrix-diagram__circle.-position-s2 {
    top: 23%;
    left: 23%
}

.matrix-diagram__circle.-position-s3 {
    bottom: 23%;
    right: 23%
}

.matrix-diagram__circle.-position-s4 {
    bottom: 27.8%;
    right: 27.8%
}

.matrix-diagram__circle.-position-x {
    bottom: 33.7%;
    right: 33.7%
}

.matrix-diagram__circle.-position-x1 {
    bottom: 26.6%;
    right: 40.7%
}

.matrix-diagram__circle.-position-x2 {
    bottom: 40.6%;
    right: 26.6%
}

.matrix-diagram__circle.-size-lg {
    width: 9.143%;
    height: 9.143%;
    font-size: 5em
}

.matrix-diagram__circle.-size-md {
    width: 6.4%;
    height: 6.4%;
    font-size: 3em
}

.matrix-diagram__circle.-size-sm {
    width: 4.572%;
    height: 4.572%;
    font-size: 2em
}

.matrix-diagram__circle.-active {
    color: #fff
}

.matrix-diagram__circle.-purple.-active {
    background-color: #8a46a3;
    border-color: #8a46a3
}

.matrix-diagram__circle.-red.-active {
    background-color: #ef4141;
    border-color: #ef4141
}

.matrix-diagram__circle.-yellow.-active {
    background-color: #ffed47;
    border-color: #ffed47;
    color: #222831
}

.matrix-diagram__circle.-white.-active {
    background-color: #fff;
    border-color: #222831;
    color: #222831
}

.matrix-diagram__circle.-blue.-active {
    background-color: #526dfa;
    border-color: #526dfa
}

.matrix-diagram__circle.-cyan.-active {
    background-color: #45cfe1;
    border-color: #45cfe1
}

.matrix-diagram__circle.-orange.-active {
    background-color: #ffae34;
    border-color: #ffae34
}

.matrix-diagram__circle.-green.-active {
    background-color: #afde61;
    border-color: #afde61
}

.matrix-diagram__number {
    position: absolute;
    font-size: 1.5em;
    z-index: 10;
    min-width: 14px;
    text-align: center
}

.matrix-diagram__number.-bold {
    font-weight: 700
}

.matrix-diagram__number.-position-b8 {
    top: 3.3%;
    right: 40.2%
}

.matrix-diagram__number.-position-b7 {
    top: 4.8%;
    right: 36.9%
}

.matrix-diagram__number.-position-k2 {
    top: 5.8%;
    right: 34.1%
}

.matrix-diagram__number.-position-k1 {
    top: 7.4%;
    right: 30.5%
}

.matrix-diagram__number.-position-k4 {
    top: 8.8%;
    right: 27.2%
}

.matrix-diagram__number.-position-k3 {
    top: 9.9%;
    right: 24.3%
}

.matrix-diagram__number.-position-k5 {
    top: 11.4%;
    right: 21%
}

.matrix-diagram__number.-position-k8 {
    top: 21.9%;
    right: 10.5%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-k8 {
        top: 22.3%;
        right: 10.9%
    }
}

.matrix-diagram__number.-position-k7 {
    top: 25.2%;
    right: 9.2%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-k7 {
        top: 25.6%;
        right: 9.6%
    }
}

.matrix-diagram__number.-position-k6 {
    top: 28.3%;
    right: 7.8%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-k6 {
        top: 28.7%;
        right: 8.2%
    }
}

.matrix-diagram__number.-position-c4 {
    top: 31.2%;
    right: 6.5%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-c4 {
        top: 31.6%;
        right: 6.9%
    }
}

.matrix-diagram__number.-position-c6 {
    top: 34.3%;
    right: 5.4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-c6 {
        top: 34.7%;
        right: 5.8%
    }
}

.matrix-diagram__number.-position-c5 {
    top: 37.5%;
    right: 4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-c5 {
        top: 37.9%;
        right: 4.4%
    }
}

.matrix-diagram__number.-position-c7 {
    top: 41.2%;
    right: 2.3%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-c7 {
        top: 41.6%;
        right: 2.7%
    }
}

.matrix-diagram__number.-position-y3 {
    bottom: 40.2%;
    right: 2.8%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y3 {
        bottom: 40.6%;
        right: 3.2%
    }
}

.matrix-diagram__number.-position-y2 {
    bottom: 37.3%;
    right: 4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y2 {
        bottom: 37.7%;
        right: 4.4%
    }
}

.matrix-diagram__number.-position-y4 {
    bottom: 34%;
    right: 5.2%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y4 {
        bottom: 34.4%;
        right: 5.6%
    }
}

.matrix-diagram__number.-position-y1 {
    bottom: 30.8%;
    right: 6.5%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y1 {
        bottom: 31.2%;
        right: 6.9%
    }
}

.matrix-diagram__number.-position-y6 {
    bottom: 27.7%;
    right: 7.7%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y6 {
        bottom: 28.1%;
        right: 8.1%
    }
}

.matrix-diagram__number.-position-y5 {
    bottom: 24.2%;
    right: 9.2%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y5 {
        bottom: 24.6%;
        right: 9.6%
    }
}

.matrix-diagram__number.-position-y7 {
    bottom: 20.8%;
    right: 10.5%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-y7 {
        bottom: 21.2%;
        right: 10.9%
    }
}

.matrix-diagram__number.-position-d6 {
    bottom: 11.1%;
    right: 21%
}

.matrix-diagram__number.-position-y8 {
    bottom: 9.7%;
    right: 24.3%
}

.matrix-diagram__number.-position-d5 {
    bottom: 8.4%;
    right: 27.4%
}

.matrix-diagram__number.-position-d4 {
    bottom: 6.5%;
    right: 31.3%
}

.matrix-diagram__number.-position-d8 {
    bottom: 5.1%;
    right: 35%
}

.matrix-diagram__number.-position-d7 {
    bottom: 3.7%;
    right: 38.7%
}

.matrix-diagram__number.-position-d9 {
    bottom: 2.3%;
    right: 42.8%
}

.matrix-diagram__number.-position-g3 {
    bottom: 2.5%;
    left: 41.7%
}

.matrix-diagram__number.-position-g2 {
    bottom: 3.7%;
    left: 38.6%
}

.matrix-diagram__number.-position-g4 {
    bottom: 5%;
    left: 35.3%
}

.matrix-diagram__number.-position-g1 {
    bottom: 6.5%;
    left: 31.3%
}

.matrix-diagram__number.-position-g7 {
    bottom: 7.8%;
    left: 28.3%
}

.matrix-diagram__number.-position-g5 {
    bottom: 9.1%;
    left: 25.3%
}

.matrix-diagram__number.-position-g6 {
    bottom: 10.5%;
    left: 22.1%
}

.matrix-diagram__number.-position-t3 {
    bottom: 21.8%;
    left: 10.4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t3 {
        bottom: 22.2%;
        left: 10.8%
    }
}

.matrix-diagram__number.-position-t2 {
    bottom: 24.9%;
    left: 9.4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t2 {
        bottom: 25.3%;
        left: 9.8%
    }
}

.matrix-diagram__number.-position-t4 {
    bottom: 28%;
    left: 7.9%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t4 {
        bottom: 28.4%;
        left: 8.3%
    }
}

.matrix-diagram__number.-position-t1 {
    bottom: 31.4%;
    left: 6.3%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t1 {
        bottom: 31.6%;
        left: 6.7%
    }
}

.matrix-diagram__number.-position-t6 {
    bottom: 34.3%;
    left: 5.3%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t6 {
        bottom: 34.7%;
        left: 5.7%
    }
}

.matrix-diagram__number.-position-t5 {
    bottom: 37.6%;
    left: 4.1%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t5 {
        bottom: 38%;
        left: 4.1%
    }
}

.matrix-diagram__number.-position-t7 {
    bottom: 41.2%;
    left: 2.3%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-t7 {
        bottom: 41.6%;
        left: 2.7%
    }
}

.matrix-diagram__number.-position-a5 {
    top: 40.4%;
    left: 2.8%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-a5 {
        top: 40.8%;
        left: 3.2%
    }
}

.matrix-diagram__number.-position-a4 {
    top: 37.3%;
    left: 4.1%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-a4 {
        top: 37.7%;
        left: 4.5%
    }
}

.matrix-diagram__number.-position-a6 {
    top: 34%;
    left: 5.2%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-a6 {
        top: 34.4%;
        left: 5.6%
    }
}

.matrix-diagram__number.-position-f1 {
    top: 30.8%;
    left: 6.4%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-f1 {
        top: 31.2%;
        left: 6.8%
    }
}

.matrix-diagram__number.-position-f3 {
    top: 27.6%;
    left: 7.8%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-f3 {
        top: 28%;
        left: 8.2%
    }
}

.matrix-diagram__number.-position-f2 {
    top: 24.4%;
    left: 9.3%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-f2 {
        top: 24.8%;
        left: 9.7%
    }
}

.matrix-diagram__number.-position-f4 {
    top: 20.7%;
    left: 10.7%
}

@media only screen and (min-width:400px) {
    .matrix-diagram__number.-position-f4 {
        top: 21.1%;
        left: 11.1%
    }
}

.matrix-diagram__number.-position-f7 {
    top: 10.8%;
    left: 22.1%
}

.matrix-diagram__number.-position-f6 {
    top: 9.4%;
    left: 25.5%
}

.matrix-diagram__number.-position-f8 {
    top: 8%;
    left: 28.8%
}

.matrix-diagram__number.-position-f5 {
    top: 6.4%;
    left: 32%
}

.matrix-diagram__number.-position-b5 {
    top: 5.3%;
    left: 35.1%
}

.matrix-diagram__number.-position-b4 {
    top: 4%;
    left: 38.4%
}

.matrix-diagram__number.-position-b6 {
    top: 3%;
    left: 42%
}

.health-table {
    font-size: 12px;
    margin-left: -30px;
    margin-right: -30px;
    width: 100vw
}

@media only screen and (min-width:400px) {
    .health-table {
        font-size: 14px
    }
}

@media only screen and (min-width:576px) {
    .health-table {
        font-size: 16px;
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }
}

.health-table td,
.health-table th {
    vertical-align: middle !important
}

@media only screen and (max-width:575px) {

    .health-table td,
    .health-table th {
        padding: 5px 8px
    }
}

.health-table thead tr th {
    font-weight: 700
}

.health-table tbody tr {
    transition: background-color .3s
}

.health-table tbody tr:nth-child(2n) {
    background-color: #f4f4f6
}

.health-table tbody tr.-purple-row th:first-child {
    background-color: #8a46a3
}

.health-table tbody tr.-purple-row.-active {
    background-color: rgba(138, 70, 163, .2)
}

.health-table tbody tr.-blue-row th:first-child {
    background-color: #526dfa
}

.health-table tbody tr.-blue-row.-active {
    background-color: rgba(82, 109, 250, .2)
}

.health-table tbody tr.-cyan-row th:first-child {
    background-color: #45cfe1
}

.health-table tbody tr.-cyan-row.-active {
    background-color: rgba(69, 207, 225, .2)
}

.health-table tbody tr.-green-row th:first-child {
    background-color: #afde61
}

.health-table tbody tr.-green-row.-active {
    background-color: rgba(175, 222, 97, .2)
}

.health-table tbody tr.-yellow-row th:first-child {
    background-color: #ffed47
}

.health-table tbody tr.-yellow-row.-active {
    background-color: rgba(255, 237, 71, .2)
}

.health-table tbody tr.-orange-row th:first-child {
    background-color: #ffae34
}

.health-table tbody tr.-orange-row.-active {
    background-color: rgba(255, 174, 52, .2)
}

.health-table tbody tr.-red-row th:first-child {
    background-color: #ef4141
}

.health-table tbody tr.-red-row.-active {
    background-color: rgba(239, 65, 65, .2)
}

.health-table tbody tr.-gray-row th:first-child {
    background-color: #c6c8d5
}

.health-table tbody tr.-gray-row.-active {
    background-color: rgba(160, 162, 175, .2)
}

.health-table tbody tr>:not(:nth-child(2)),
.health-table thead tr>:not(:nth-child(2)) {
    text-align: center
}

.health-table tbody tr th:first-child,
.health-table thead tr th:first-child {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 20px
}

.diagram-value {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30%;
    background-color: #cacace;
    font-size: 17px;
    border: 1px #eee solid;
    transition: background-color .3s, border-color .3s
}

.diagram-value.-active {
    border-color: #bbb;
    background-color: #f1f1f1
}

.diagram-value.-active:hover {
    background-color: #fff;
    cursor: default;
    border: 1px solid gray !important
}

.diagram-values-item-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.diagram-values-item-horizontal__title {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 0;
    padding-right: 30px
}

.diagram-values-item-horizontal__values {
    margin-right: -2px
}

.round-values-list {
    display: flex;
    align-items: center
}

.round-values-list__item {
    margin: 2px
}

.diagram-values-list {
    max-width: 470px
}

.diagram-values-list__item:not(:last-child) {
    margin-bottom: 10px
}

.diagram-values-item {
    margin-bottom: 50px
}

.diagram-values-item__title {
    font-weight: 500;
    margin-bottom: 10px
}

.diagram-values-item__description {
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.375
}

.small-diagram-values {
    display: flex;
    align-items: center;
    min-height: 80px
}

.small-diagram-values__titles-block {
    padding-right: 25px;
    min-width: 70px
}

@media only screen and (min-width:768px) {
    .small-diagram-values__titles-block {
        min-width: auto
    }
}

.small-diagram-values__title {
    margin-bottom: 20px
}

.small-diagram-values__title:last-child {
    margin-bottom: 0
}

.small-diagram-values__values-block {
    position: relative;
    width: 130px;
    height: 80px
}

.small-diagram-values__path-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px
}

.small-diagram-values__value {
    position: absolute
}

.small-diagram-values__value.-top-left {
    top: 0;
    left: 0
}

.small-diagram-values__value.-bottom-left {
    bottom: 0;
    left: 0
}

.small-diagram-values__value.-center {
    top: 50%;
    right: 0;
    transform: translate(0, -50%)
}

.section {
    padding: 80px 0
}

@media only screen and (min-width:768px) {
    .section {
        padding: 180px 0
    }
}

.section-about__small-text {
    margin-bottom: 40px
}

@media only screen and (min-width:768px) {
    .section-about__small-text {
        max-width: 310px;
        margin-bottom: 60px
    }
}

.section-about__bottom-description {
    margin-bottom: 20px
}

@media only screen and (min-width:768px) {
    .section-about__bottom-description {
        margin-bottom: 50px
    }
}

.section-about__img {
    margin-bottom: 80px
}

@media only screen and (min-width:768px) {
    .section-about__img {
        margin-bottom: 0
    }
}

.section-calculation {
    position: relative;
    z-index: 1
}

.section-calculation__left-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

@media only screen and (max-width:575px) {
    .section-calculation__left-content {
        margin-left: -30px;
        margin-right: -30px
    }
}


.section-with-diagram {
    padding: 50px 21px
}

.section-with-diagram__top-content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    flex-direction: column
}

@media only screen and (min-width:992px) {
    .section-with-diagram__top-content {
        flex-direction: row
    }
}

.section-with-diagram__bottom-values-row [class^=col] {
    flex-basis: 100%
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col] {
        flex-basis: 0
    }
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col]:first-child {
        max-width: 390px;
        flex: 0 0 390px
    }
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col]:first-child .diagram-values-item {
        max-width: 265px
    }
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col]:nth-child(2) {
        max-width: 335px;
        flex: 0 0 335px
    }
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col]:nth-child(2) .diagram-values-item {
        max-width: 180px
    }
}

@media only screen and (min-width:768px) {
    .section-with-diagram__bottom-values-row [class^=col]:last-child {
        max-width: 242px;
        flex: 0 0 242px
    }
}

@media only screen and (max-width:767px) {
    .section-with-diagram__bottom-values-row [class^=col]:last-child .diagram-values-item {
        margin-bottom: 0
    }
}

.section-with-diagram__col-with-table {
    order: 2
}

@media only screen and (min-width:992px) {
    .section-with-diagram__col-with-table {
        flex: 0 0 450px;
        max-width: 450px;
        order: 1
    }
}

.section-with-diagram__col-with-diagram {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    order: 1;
    margin-bottom: 20px;
    width: 100%
}

@media only screen and (min-width:576px) {
    .section-with-diagram__col-with-diagram {
        margin-bottom: 45px
    }
}

@media only screen and (min-width:992px) {
    .section-with-diagram__col-with-diagram {
        padding-left: 20px;
        order: 2;
        margin-bottom: 0
    }
}

@media only screen and (min-width:1260px) {
    .section-with-diagram__col-with-diagram {
        padding-left: 30px;
        padding-top: 100px
    }
}

.section-with-diagram__matrix-diagram {
    margin-left: -30px;
    margin-right: -30px
}

@media only screen and (min-width:576px) {
    .section-with-diagram__matrix-diagram {
        margin-left: 0;
        margin-right: 0
    }
}

.section-with-diagram__title {
    margin-bottom: 20px
}

@media only screen and (min-width:576px) {
    .section-with-diagram__title {
        margin-bottom: 35px
    }
}

@media only screen and (min-width:992px) {
    .section-with-diagram__title {
        margin-bottom: 5px
    }
}

.section-with-diagram__table-title {
    margin-bottom: 20px
}

@media only screen and (min-width:576px) {
    .section-with-diagram__table-title {
        margin-bottom: 35px
    }
}

.section-with-diagram__table {
    margin-bottom: 20px
}

@media only screen and (min-width:576px) {
    .section-with-diagram__table {
        margin-bottom: 45px
    }
}

@media (max-width:1200px) {
    .container {
        padding-right: 2px !important;
        padding-left: 2px !important;
        max-width: 100% !important
    }
}

@media only screen and (max-width:767px) {
    table {
        font-size: 14px
    }
}