/*---- Icon String ----*/
body .iconstr {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    line-height: 1rem;
}

body .iconstr,
body .iconstr.isGrey {
    /* default */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--primaryColorGray);
    background-color: var(--neutralsColorGray);
    color: var(--primaryTextColor);
    font-weight: 700;
    font-size: 9px;
}

body .iconstr.isRed {
    border: 2px solid red;
    color: red;
}


body .iconstr.isWorkspace {
    border: 2px solid #2C5AA4;
    color: #2C5AA4;
    background-color: transparent;
}



/*---- Icon Size ----*/
body .iconstr.iconstr:before {
    font-size: 20px;
}

body .iconstr.is20 {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

body .iconstr.is22 {
    width: 22px;
    height: 22px;
    font-size: 10.5px;
}

body .iconstr.is24 {
    width: 24px;
    height: 24px;
    font-size: 11.5px;
}

body .iconstr.is26 {
    width: 26px;
    height: 26px;
    font-size: 12.5px;
}
body .iconstr.is28 {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

body .iconstr.is30 {
    width: 30px;
    height: 30px;
    font-size: 13.5px;
}

body .iconstr.is32 {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

body .iconstr.is34 {
    width: 34px;
    height: 34px;
    font-size: 14.5px;
}

body .iconstr.is36 {
    width: 36px;
    height: 36px;
    font-size: 16px;
}