:root {
    --main-font-size: 14px;
    --tabulator-font-size: 12px;
    --main-info-font-size: 18px;
    --tm-green: #2ca030;
    --tm-green-hover: #107f14;
}

html,
body {
    padding: 2px 5px;
    background: #00000003;
    background-image: url(../images/results/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.nav-pills .nav-link {
    margin-right: 5px;
    color: #ffffff;
    background-color: rgba(128, 128, 128, 0.651);
}

.nav-pills .nav-link.active,
.results-racestats-okbutton {
    background-color: var(--tm-green);
}

.results-racestats-okbutton:hover {
    background-color: var(--tm-green-hover);
}

.card-bgt {
    background-color: #00000099 !important;
}

#results-datatable,
#results-fidelity-datatable {
    box-shadow: 0px 0px 12px #00000046;
    border-radius: 20px;
}

.results-racestats-title {
    font-size: var(--main-info-font-size) !important;
}

body,
.tabulator-header,
.form-control,
.form-select,
.results-racestats {
    font-size: var(--main-font-size) !important;
}

.tabulator-cell,
.tabulator-responsive-collapse table {
    font-size: var(--tabulator-font-size) !important;
}

.tabulator-responsive-collapse td:nth-of-type(1) {
    color: #545454 !important;
    width: 25%;
}

.tabulator-responsive-collapse td {
    height: 25px;
    border-bottom: 1px dotted rgb(216, 216, 216);
}

.tabulator-responsive-collapse,
.tabulator-responsive-collapse table,
.tabulator-table {
    width: 100%;
}

.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--tm-green);
    border-top: none;
    border-bottom: none;
    color: #ffffff;
}

.tabulator-table .tabulator-row {
    border-bottom: none;
}

.tabulator-table .tabulator-row-even {
    background-color: #e9efec;
}

#results-race-selector {
    font-weight: 600;
}

.gender-F,
.gender-H {
    width: 19px;
}

.gender-icon {
    font-size: 1.4em;
}

.gender-H {
    color: #006cd5;
}

.gender-F {
    color: #f200ff;
}

.btn-filter {
    border: none;
    background: #ffffff9f;
    transition: background-color .5s;
    padding-top:6px;
}

.btn-filter:hover {
    background: var(--tm-green-hover) !important;
}

.btn-filter.active {
    background: var(--tm-green) !important;

}

.btn-filter.active .gender-F,
.btn-filter.active .gender-H {
    color: #fff !important;
}

@media (max-width: 992px) {
    .btn-filter {
        padding: 4px 5px 2px 5px;
    }

    .gender-F,
    .gender-H {
        width: 12px;
    }
}

.loader {
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s, visibility .25s;
}

.lds-ring,
.lds-ring div {
    box-sizing: border-box;
}

.lds-ring {
    color: var(--tm-green);
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    z-index: 2;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.fbold {
    font-weight: bold;
}

.time {
    color: #046303;
}

.ecart {
    color: #871616;
}

.medal {
    padding: 2px;
    font-weight: bold;
    border-radius: 10px;
}

.cls {
    border-radius: 10px;
    box-shadow: 2px 2px 5px #bfbfbf;
    border: 1px solid;
    font-weight: 600;
}

.cls-ranked {
    background-color: #fff6c5;
    padding: 6px;
    border-color: #fff6c5;
}

.cls-notranked {
    background-color: #ffffff;
    padding: 6px 15px;
    border: none;
}

#results-table {
    width: 100%;
}

@media (max-width: 778px) {

    html,
    body {
        padding: 2px 0;
    }

    .cls {
        font-weight: 600;
        box-shadow: none;
    }

    .cls-ranked {
        background-color: transparent;
        padding: 0;
        border: none;
    }

    .cls-notranked {
        background-color: transparent;
        padding: 0;
        border: none;
    }
}