/* ==========================================
                FONTS 
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&family=Teko:wght@500&display=swap');

html,
body {
    font-family: 'Manrope', sans-serif;
}

body table td,
body table td * {
    font-family: 'Manrope', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.table th {
    font-family: 'Teko', sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
}

.navbar-brand {
    font-size: 1.6rem;
}

.table th,
h5 {
    font-size: 1.2rem;
}

h2 {
    font-size: 2rem;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-header>div input[type="text"],
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter>div input[type="text"] {
    flex: 1;
    line-height: unset;
    color: white;
}

.dmc-range-slider {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.55;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    color: #ffffff;
    padding-bottom: 12px;
}

div.mantine-Paper-root {
    background-color: #33383E;
}

button.mantine-Accordion-control:hover {
    background-color: #d8d8d881;
}

label.mantine-DateRangePicker-label {
    color: #ffffff
}

label.mantine-RadioGroup-label {
    color: #ffffff
}

label.mantine-MultiSelect-label {
    color: #ffffff
}

label.mantine-NumberInput-label {
    color: #ffffff
}

label.mantine-TextInput-label {
    color: #ffffff
}

label.mantine-Select-label {
    color: #ffffff
}

label.mantine-Textarea-label {
    color: #ffffff
}

div.mantine-Accordion-label {
    color: #ffffff
}

div.mantine-Text-root {
    color: #ffffff
}

label.mantine-Checkbox-label {
    color: #ffffff
}

div.mantine-Accordion-icon {
    color: #ffffff
}

div.mantine-RadioGroup-label {
    color: #ffffff
}

label.mantine-Radio-label {
    color: #ffffff
}

div.mantine-CheckboxGroup-label {
    color: #ffffff
}

button.mantine-Accordion-control:hover {
    background-color: #d8d8d8;
}

.mantime-tab-colors {
    color: #ffffff
}

/* ==========================================
                NAV BAR
========================================== */
.navbar {
    background-color: rgba(255, 255, 255, 0.5) !important;
    position: fixed;
    width: 100%;
    z-index: 99;
}

#page-content {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
}

.navbar .btn-secondary {
    background: transparent;
    border: 0px none;
    box-shadow: none !important;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.navbar .btn-secondary:hover {
    color: rgba(255, 255, 255, 1);
}

@media (min-width: 768px) {
    .navbar .btn-secondary {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar-nav {
        height: 75px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .navbar-nav>a {
        height: 75px;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
        align-self: center;
    }

    .navbar-nav>div {
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .navbar-nav>div>button {
        height: 75px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .navbar div.dropdown {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.2);
    }
}

/* ==========================================
                MISC.
========================================== */

#champions-table-col img {
    object-fit: cover;
}

#react-entry-point {
    background-image: url('background-texture-gray-cotton.jpg');
    background-repeat: repeat;
}

.card {
    margin-bottom: 20px;
}

/* ==========================================
                DATA TABLES.
========================================== */

th.dash-header div {
    display: flex;
}

th.dash-header div span.column-header-name {
    order: 2;
}

th.dash-header div span.column-header--sort {
    order: 1;
    width: 100%;
    text-align: right;
    padding-right: 5px;
}

span.column-header-name:after {
    content: "\00a0";
}


/* ==========================================
                RESPONSIVE
========================================== */
@media screen and (max-width: 767px) {

    .col1-,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    #page-content,
    .dash-table-container,
    .dash-spreadsheet-container {
        overflow-x: hidden;
    }

    .dash-table-container,
    .table-responsive,
    .dt-table-container__row {
        overflow-x: scroll;
    }
}