.icon-component>svg,
.logo-component>svg {
    height: auto;
    width: 100%;
}

.icon-component {
    align-items: center;
    display: flex;
    justify-content: center;
}

.icon-component.-button {
    cursor: pointer;
}

.icon-component.-delete {
    width: 40px;
}

.icon-component.-filter {
    height: 32px;
    width: 32px;
}

.icon-component.-form,
.icon-component.-radio {
    height: calc(16px + 8 * (100vw - 320px) / 640);
    max-height: 24px;
    max-width: 24px;
    min-height: 16px;
    min-width: 16px;
    width: calc(16px + 8 * (100vw - 320px) / 640);
}

@media screen and (min-width: 960px) and (max-width: 1399px) {
    .icon-component.-form,
    .icon-component.-radio {
        height: calc(16px + 8 * (100vw - 960px) / 440);
        width: calc(16px + 8 * (100vw - 960px) / 440);
    }
}

.icon-component.-radio,
.icon-component.-radio::after {
    border-radius: 50%;
    content: "";
}

.icon-component.-radio {
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #7C848D;
    display: inline-flex;
    justify-content: center;
    transform: translateY(-50%);
}

.icon-component.-radio::after {
    height: 65%;
    width: 65%;
}

.icon-component.-recalc {
    height: 25px;
    margin-right: unset !important;
    margin-left: 5px !important;
    width: 25px;
}

.icon-component.-upfile {
    height: 20px;
    width: 20px;
}

.icon-component.-upload {
    width: 50px;
}

.icon-component.-secondary>svg>g {
    stroke: #7B7CF5;
}

.icon-component.-warningBox {
    height: 57px;
    width: 57px;
}

.logo-component {
    width: 154px;
}

@media screen and (max-width: 959px) {
    .logo-component.-sizeSm {
        width: 100px;
    }
}

.label-icon {
    background: #CBCED2;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 1.4rem;
    justify-items: center;
    margin: auto 0;
    padding: 5px;
    vertical-align: middle;
}

.label-icon.-required {
    background: #E01D2C;
}

.label-icon.-optional {
    background: #6AB5FF;
}