@font-face {
    font-family: race;
    src: url(../font/FasterOne-Regular.ttf);
}

td i {
    font-size: 40px;
    color: #cc0000a3;
}

tr {
    background-color: rgb(252 252 252);
    box-shadow: 0px 1px 6px 1px #a1a0a070 inset;
}

tr:hover {
    background-color: rgb(232, 232, 232);
    box-shadow: 0 0 0 0 #a1a0a070 inset;
}

td span {
    width: 100%;
}

th {
    font-weight: initial;
}

table td {
    border-bottom: 2px solid rgb(255, 255, 255) !important;
}

td {
    text-align: center;
    padding: 0 !important;
    vertical-align: middle !important;
}

thead {
    text-align: center;
}

.thead-dark th {
    background-color: white !important;
    font-family: race;
    color: black !important;
    border-top-color: rgba(227, 227, 227, 0) !important;
    border-bottom-color: rgb(238, 238, 238) !important;
}

.pos {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.value {
    position: relative;
    background-color: #181d20;
    color: #fff;
    text-transform: uppercase;
    height: 100%;
    padding: 0 .3125rem;
    text-align: center;
    line-height: 3.5rem;
    margin-right: 1.375rem;
    font-family: 'Permanent Marker', cursive;
}

.value:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #181d20;
    position: absolute;
    right: -2.375rem;
    border-width: 1.75rem 17px 1.75rem 1.375rem;
}


@media (max-width: 521px) {

    .value {
        position: initial;
        margin-right: 0;
    }

    .value:after {
        content: none;
    }


}