.icon-with-sup {
    position: relative;
    display: inline-block;
    padding-right: 8px;
}

.icon-with-sup .icon-sup {
    position: absolute;
    font-size: 70%;
    top: 0;
    left: 10px;
}

.icon-with-sup .fa.icon-sup {
    font-size: 80%;
    left: 13px;
}

.icon-with-sub {
    position: relative;
    display: inline-block;
    padding-right: 8px;
}

.icon-with-sub .icon-sub {
    position: absolute;
    font-size: 70%;
    bottom: 0;
    left: 10px;
}

.icon-with-sub .fa.icon-sub {
    font-size: 80%;
    left: 10px;
}

.icon-with-sub.big .fa.icon-sub {
    font-size: 12px;
    bottom: -3px;
}

.icon-with-sub.sub-red .icon-sub {
    color: #d9534f;
}

.fa-number-1, .fa-number-2, .fa-number-3, .fa-number-4, .fa-number-5, .fa-number-6, .fa-number-7, .fa-number-8, .fa-number-9, .fa-number-9p {
    border-radius: 10px;
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-secondary-color);
    color: white;
    padding: 1px 4px;
    font-size: 70% !important;
}

.icon-with-sub.sub-bg-danger .icon-sub {
    background-color: var(--bs-danger);
}

.icon-with-sub.sub-bg-success .icon-sub {
    background-color: var(--bs-success);
}


.fa-number-1:before {
    content: '1'
}

.fa-number-2:before {
    content: '2'
}

.fa-number-3:before {
    content: '3'
}

.fa-number-4:before {
    content: '4'
}

.fa-number-5:before {
    content: '5'
}

.fa-number-6:before {
    content: '6'
}

.fa-number-7:before {
    content: '7'
}

.fa-number-8:before {
    content: '8'
}

.fa-number-9:before {
    content: '9'
}

.fa-number-9p:before {
    content: '9+'
}

.fa-hover-only {
    color: var(--bs-gray-500);
}

.fa-hover-only:hover {
    color: inherit;
}