.nfchart {
    width: 18.75rem;
    height: 90vh;
    margin-top:1.25rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.nfchart .inner {
    overflow: hidden;
}

.nfchart .nfcolumn {
    position: absolute;
    width: 18.75rem;
    transition: 0.5s;
    cursor: pointer;
}

.nfchart .nfcolumn.notselected .nfmiddle .ngleftlabel, .nfchart .nfcolumn.notselected .nfmiddle .ngrightlabel {
    opacity: 0.1;
}

.nfopaque {
    opacity: 0.1;
}

.nfchart .nfcolumn.selected {
    opacity: 1.0;
    transform: scale(1.2);
}

.nfchart .nfcolumn.selected .nfside {
    opacity: 1.0;
}

.nfside.right {
    left: unset;
    right: -20rem;
    text-align: left;
}

.nfside {
    opacity: 0.0;
    transition: 0.5s;
    left: -20rem;
    width: 100%;
    text-align: right;
    top: 3.125rem;
    position: absolute;
}

.nfside .sub {
    color: var(--black);
    font-size: 0.75rem;
    margin-bottom: 0.3125rem;
}

.nfside .label {
    color: var(--primary);
    font-size: 0.875rem;
    margin-bottom: -0.25rem;
}

.nfside .value {
    color: var(--black);
    font-size: 0.75rem;    
}

.nfchart .nfcolumn.selected:hover {
    transform: scale(1.4);
}

.nfchart .nfcolumn:hover {
    transform: scale(1.1);
}

.nfchart .nfcolumn .nfcontents {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 5.875rem;
}

.nfchart .nfcolumn .nftop {
    width: 100%;
    height: 4.5rem;
    border-radius: 100%;
    position: absolute;
    z-index: 3;
}

.nfchart .nfcolumn .nfmiddle {
    width: 100%;
    top: 2.25rem;
    bottom: 2.25rem;
    position: absolute;
    z-index: 2;
}

.nfchart .nfcolumn .nfmiddle .ngleftlabel {
    font-size: 1.125rem;
    position: absolute;
    left: -20rem;
    color: var(--black);
    text-align: right;
    width: 18.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.6;
}

.nfchart .nfcategory {
    font-size: 1.5rem;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary);
    text-align: left;
    white-space: nowrap;
    transform: rotate(-90deg);
    padding-bottom: 16.25rem;
    height: 18.75rem;
}

.nfchart .nfcategory .nfsuper {
    font-size: 0.75rem;
    position: absolute;
    top: -0.375rem;
    white-space: nowrap;
}

.nfchart .nfcategory .nfsub {
    text-transform: uppercase;
    opacity: 0.4;
}

.nfchart .nfcolumn .nfmiddle .ngrightlabel {
    font-size: 1.125rem;
    position: absolute;
    right: -20rem;
    color: var(--black);
    text-align: left;
    width: 18.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.6;
}

.nfchart .nfcolumn .nfbottom {
    width: 100%;
    height: 4.5rem;
    border-radius: 100%;
    position: absolute;
    bottom: 0rem;
    z-index: 1;
}

.nfchart .nfcolumn.service .nftop {
    background-color: #455771;
}

.nfchart .nfcolumn.service .nfmiddle, .nfchart .nfcolumn.service .nfbottom {
    background-color: #2d3b4f;
}

.nfchart .nfcolumn.client .nftop {
    background-color: #61ff05;
}

.nfchart .nfcolumn.client .nfmiddle, .nfchart .nfcolumn.client .nfbottom {
    background-color: #3ca103;
}

.nfchart .nfcolumn.error .nftop {
    background-color: #ff052f;
}

.nfchart .nfcolumn.error .nfmiddle, .nfchart .nfcolumn.error .nfbottom {
    background-color: #9f0922;
}