.side-section-container {
    position: relative;
}
.side-section-container .right-section {
    position: relative;
    width: 100%;
}
.side-section-container .right-section::-webkit-scrollbar
{
  width: 10px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}
.side-section-container .right-section::-webkit-scrollbar-track { background: #fff; }
.side-section-container .right-section::-webkit-scrollbar-thumb {
  background: #fff;
}

.side-section-container section {
    position: relative;
    width: 100%;
}
.side-section-container section:nth-of-type(1) {
    padding-top: calc(40px + 3.75rem);
}

@media (min-width: 992px) {
    .side-section-container {
        margin-top: calc(-100vh);
        padding-bottom: calc(40px + 3.75rem);
    }
    .side-section-container .right-section {
        position: sticky;
        width: 50vw;
        top: 0;
        left: 50%;
        display: inline-flex !important;
        height: 100vh;
        overflow: auto;
    }
    .side-section-container section {
        position: relative;
        width: 50%;
    }
    .side-section-container section:nth-of-type(2) {
        padding-top: calc(40px + 3.75rem);
    }
    .side-section-container section:not(.right-section) > .container-fluid > .container, .side-section-container section:not(.right-section) > .container-fluid > .row > .container {
        margin-left: auto;
        margin-right: 0;   
    }
    .side-section-container section.right-section > .container-fluid > .container, .side-section-container section.right-section > .container-fluid > .row > .container {
        margin-left: 0;
        margin-right: auto;   
    }
    .side-section-container section > .container-fluid > .container, .side-section-container section > .container-fluid > .row > .container {
        max-width: 480px;
    }
}
@media (min-width: 1280px) {
    .side-section-container section > .container-fluid > .container, .side-section-container section > .container-fluid > .row > .container {
        max-width: 570px;
    }
}
@media (min-width: 1420px) {
    .side-section-container section > .container-fluid > .container, .side-section-container section > .container-fluid > .row > .container {
        max-width: 670px;
    }
}

.svg-select .system {

}
.svg-select > g.background {
    pointer-events: none !important;
}
.svg-select > g.system > [class*="layer-"] {
    position: relative;
    cursor: pointer;  
    z-index: -1; 
}
.svg-select > g.system > [class*="layer-"]:hover {
    z-index: 1;
}
.svg-select > g.system > [class*="layer-"] > path {
    fill: transparent;
    transition: fill .2s ease-in;
}
.svg-select > g.system > [class*="layer-"]:hover > path, .svg-select > g.system > [class*="layer-"].active > path  {
    stroke: var(--primary);
    fill: var(--primary);
    fill-opacity: .5;
}
.svg-select > g.system > [class*="layer-"] > .title-cover {
    transform: translateX(-30px);
    opacity: 0;
}
.svg-select > g.system > [class*="layer-"]:hover > .title-cover, .svg-select > g.system > [class*="layer-"].active > .title-cover  {
    transform: translateX(2px);
    opacity: 1;
    transition: all .2s ease-in;
}
.svg-select > g.system > [class*="layer-"] > .number-cover > text, .svg-select > g.system > [class*="layer-"] > .number-cover > text > tspan {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    fill: var(--white);
}
.svg-select > g.system > [class*="layer-"] > .number-cover > circle {
    filter: drop-shadow( 0 0 .75rem var(--dark));
}
.svg-select > g.system > [class*="layer-"]:hover > .number-cover > circle, .svg-select > g.system > [class*="layer-"].active > .number-cover > circle {
    filter: none;
}
.svg-select > g.system > [class*="layer-"] > .number-cover > circle, .svg-select > g.system > [class*="layer-"] > .title-cover > path {
    fill: var(--primary);
}
.svg-select > g.system > [class*="layer-"] > .title-cover > text, .svg-select > g.system > [class*="layer-"] > .title-cover > text > tspan {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    fill: var(--white);
}
.svg-select > g.system > [class*="layer-"] > .number-cover > circle, .svg-select > g.system > [class*="layer-"] > .number-cover > text, .svg-select > g.system > [class*="layer-"] > .number-cover > text > tspan, 
.svg-select > g.system > [class*="layer-"] > .number-cover > text, .svg-select > g.system > [class*="layer-"] > .number-cover > text > tspan, .svg-select > g.system > [class*="layer-"] > .title-cover > path
{
    transition: fill .2s ease-in;
}
.svg-select > g.system > [class*="layer-"].active > .number-cover > circle, .svg-select > g.system > [class*="layer-"].active > .title-cover > path,
.svg-select > g.system > [class*="layer-"]:hover > .number-cover > circle, .svg-select > g.system > [class*="layer-"]:hover > .title-cover > path {
    fill: var(--white);
}
.svg-select > g.system > [class*="layer-"].active > .number-cover > text, .svg-select > g.system > [class*="layer-"].active > .number-cover > text > tspan, 
.svg-select > g.system > [class*="layer-"].active > .title-cover > text, .svg-select > g.system > [class*="layer-"].active > .title-cover > text > tspan,
.svg-select > g.system > [class*="layer-"]:hover > .number-cover > text, .svg-select > g.system > [class*="layer-"]:hover > .number-cover > text > tspan, 
.svg-select > g.system > [class*="layer-"]:hover > .title-cover > text, .svg-select > g.system > [class*="layer-"]:hover > .title-cover > text > tspan
{
    fill:var(--primary);
}
.btn-change-system-color {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}