html, body {
    margin: 0px;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    background-color: #1d1e26;
    color: #F8F8F2;
}
body {
    position: relative;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #8a8f98;
}
nav div.title {
    padding-left: 12px;
    flex-grow: 1;
}
a.nav {
    padding: 12px;
    color: #F8F8F2;
    text-decoration: none;
    border-left: 1px solid #8a8f98;
}
a.navtitle {
    text-decoration: none;
    color: #F8F8F2;
}

h1.main_title {
    font-variant-caps: small-caps;
}
h1 {
    margin: 0px;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
}
h2, h4 {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    text-align: center;
}
h3 {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
}
h4 {
    margin-top: 8px;
    margin-bottom: 2px;
}

div.card_container {
    margin: 0px auto;
    width: 60%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

div.generic_container {
    margin: 0px auto;
    display: flex;
    flex-direction: column;
}
div.pad {
    height: 54px;
}

div.search_body {
    margin: 0px auto;
    width: 90%;
    display: flex;
    flex-direction: column;
}

div.card {
    margin: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-basis: 26%; /* no more than 3 elements per row */
    flex-grow: 1;

    background-color: #414558;
    border-radius: 0.5rem;
}

div.top_player_container {
    margin: 0px auto;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
}
div.top_player_container div.top_player_column {
    margin-top: 8px;
    margin-bottom: 0px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: stretch;
    flex-basis: 0px;
    flex-grow: 1;
}
div.top_player_column table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: unset !important;
    flex-grow: 1;
}

div.selected {
    margin-top: 8px;
    height: 32px;
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: scroll;
}

div.selection_card {
    margin-right: 8px;
    display: flex;
    align-items: stretch;
}
div.selection_card.content {
    padding: 0px 8px;
    border-radius: 4px;
    background: #414558;
}
div.selection_card label { margin: auto 0px; }
div.selection_card input.button { height: 100%; }

div.comparison {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}

div.card.gold {
    color: #2e3436;
    background-color: #ffca80;
}
div.card.red {
    color: #2e3436;
    background: #ff9580;
}

div.stat {
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
}

div.card_footer {
    font-size: 14px;
    text-align: center;
}

div.balance, div.winratio {
    font-size: 24px;
    font-style: italic;
    text-align: center;
}

div.substat {
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
}

span.blue { color: #8BE9FD; }
span.red { color: #FF5555; }
span.green { color: #8aff80; }
span.yellow { color: #ffff80; }
span.subject { color: #9580ff; }
span.gray { font-weight: normal; color: #8a8f98; }
span.compare_placeholder {
    padding-left: 8px;
    color: #ffff80;
    font-size: 14px;
    font-style: italic;
}

.bold { font-weight: bold; }
.underline { text-decoration: underline; }

table {
    margin-top: 8px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    display: table;

    font-size: 14px;

    background-color: #222232;
    color: #868b93;
}

table tr:hover td { color: #d0ffcc; }

table td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
    border-top: 1px solid #414558;
}

table th {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #f8f8f2;
}

table td.link {
    padding-top: 0px;
    padding-bottom: 0px;
}

a.tablelink {
    cursor: pointer;
    color: #f8f8f2;
    text-decoration: none;
}
table tr:hover a.tablelink, a.tablelink:hover {
    color: #d0ffcc;
}
table.index_table {
    margin-left: 8px;
    margin-right: 8px;
    width: 100%;
}

table.search_table {
    width: 100%;
}

div.error {
    text-align: center;
}

form.search {
    margin: auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
}
form.search input.bar {
    padding: 0px 8px;
    height: 48px;
    flex-grow: 1;
    font-size: 24px;
    color: #f8f8f2;
    background-color: #414558;
    border-radius: 0.5rem;
    border: 0px;
    outline: 0px solid #9580ff;
    outline-offset: -4px;
}
input.bar::placeholder {
    color: #8a8f98;
}
input.bar:focus {
    transition: outline 0.1s ease-in-out;
    outline: 4px solid #9580ff !important;
}
form.search input.button {
    font-size: 24px;
}
input.button, button.button {
    cursor: pointer;
    color: #2e3436;
    background-color: #d0ffcc;
    border-radius: 4px;
    border: 0px;
}
input.button:disabled {
    cursor: unset;
    color: #8a8f98;
    background-color: #414558;
}
input.colorpicker {
    background-color: transparent;
    border: 0px;
}
div.export {
    margin: 8px 0px;
    display: flex;
    justify-content: center;
}
button.export {
    padding: 8px;
}
button.export span {
    vertical-align: middle;
}

/* API */
div.api_container {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
code, pre {
    padding: 4px;
    background-color: #15171b;
    border-radius: 0.5rem;
}
pre code {
    line-height: 1.5;
    background-color: unset;
    border-radius: unset;
}

div.footer {
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
span.footer {
    font-size: 12px;
    font-style: italic;
    color: #8a8f98;
}
span.footer a {
    color: #80ffea;
    text-decoration: none;
}
span.ni { word-wrap: nowrap; font-style: normal; }
span.addr { cursor: pointer; }
span.addr:hover { color: #ffca80; }

/* charts */
.apexcharts-menu-item:hover {
    background-color: #222232 !important;
}
.apexcharts-menu-open, .apexcharts-menu {
    transition: unset !important;
}
.apexcharts-title-text, .apexcharts-text, .apexcharts-tooltip-text, .apexcharts-tooltip-title, .apexcharts-legend-text {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
}
.apexcharts-tooltip {
    background-color: #15171b !important;
    color: #F8F8F2 !important;
    border: 0px !important;
    box-shadow: unset !important;
}
.apexcharts-tooltip-title {
    background-color: #1d1e26 !important;
    color: #F8F8F2 !important;
    border-bottom: 0px !important;
}
.apexcharts-xaxistooltip {
    margin-top: 5px !important; /* required for correct alignment */
}
.apexcharts-xaxistooltip, .apexcharts-menu-open {
    background-color: #15171b !important;
    color: #F8F8F2 !important;
    border: 0px !important;
    box-shadow: unset !important;
}
.apexcharts-xaxistooltip-bottom:before{
    opacity: 0 !important;
}
.apexcharts-xaxistooltip-bottom:after{
    opacity: 0 !important;
}
div.donut .apexcharts-tooltip { color: #2e3436 !important; }

/* mobile support */
@media only screen and (orientation: portrait) {
    body { font-size: 12px; }
    nav div.title { padding-left: 8px; }
    h1, h2 { font-size: 16px; }
    h4 { font-size: 12px; }
    .d { display: none; visibility: collapse; }
    .card.d { position: absolute; left: 0px; }
    div.card_container { width: 90%; }
    div.stat { font-size: 16px; }
    div.substat { font-size: 10px; }
    div.card_footer { font-size: 8px; }
    div.top_player_container div.top_player_column { margin-left: 2px; margin-right: 2px; }
    form.search input.button { font-size: 16px; }
    span.compare_selection { font-size: 10px; }
    input.colorpicker { width: 48px; height: 24px; }
    table { width: 90%; font-size: 8px; }
    table td { padding: 8px 2px; }
    div.footer span { font-size: 10px; }
    .apexcharts-xaxis-label, .apexcharts-yaxis-label { font-size: 8px !important; }
    .apexcharts-yaxis-title-text { font-size: 10px !important; }
    .apexcharts-title-text { font-size: 12px !important; }
}

/* icons */
i {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
}

@media only screen and (orientation: portrait) {
    i { width: 16px; height: 16px; }
}

i.spreadsheet { background-image: url('/static/i/spreadsheet.png'); }
i.rank { background-image: url('/static/i/laurels.png'); }
i.n_games { background-image: url('/static/i/gamepad.png'); }
i.flags { background-image: url('/static/i/flying-flag.png'); }
i.frags { background-image: url('/static/i/rifle-mp5.png'); }
i.flags_r { background-image: url('/static/i/flying-flag_ratio.png'); }
i.frags_r { background-image: url('/static/i/rifle-mp5_ratio.png'); }
i.accuracy { background-image: url('/static/i/crosshair.png'); }
i.tk { background-image: url('/static/i/backstab.png'); }
i.tk_r { background-image: url('/static/i/backstab_ratio.png'); }
i.suic_r { background-image: url('/static/i/slipknot_ratio.png'); }
i.win_r { background-image: url('/static/i/trophy-cup_ratio.png'); }
i.balance { background-image: url('/static/i/scales.png'); }