@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: white;
}

:root {
    --website-general-font-family: "Roboto";
    --website-general-font-size: 12px;
    --website-general-font-color: #fff;
    --website-general-font-weight-light: 300;
    --website-background-color: #000;
    --website-general-hover-color: #2B4C87;
    --website-general-gray-color: #252525;
    --website-general-red-color: #553838;
    --website-general-horizontal-padding: 10px;
    --website-general-vertical-padding: 0;
    --website-general-control-height: 35px;
    --website-border-radius: 8px;
    --website-body-vertical-padding: 0;
    --website-body-horizontal-padding: 25px;
    --website-empty-space-height: 10px;

    --body-container-max-width: 1800px;
    --body-container-max-height: 100vh;

    --header-height: 60px;
    --header-logo-font-size: 38px;
    --header-logo-font-weight: 800;
    --header-logo-links-gap: 20px;
    --header-navlinks-font-size: 14px;
    --header-navlinks-font-weight: 400;
    --header-navlinks-vertical-padding: 4px;
    --header-navlinks-horizontal-padding: 10px;
    --header-navlinks-gap-between: 10px;
    --header-exit-button-horizontal-padding: 15px;
    --header-exit-button-vertical-padding: 10px;
    --header-exit-button-font-size: 14px;
    --header-exit-button-font-weight: 400;

    --table-title-font-size: 17px;
    --table-summary-details-font-size: 12px;
    --table-cell-padding-left: 5px;
    --table-container-max-height: 42vh;
    --table-font-family: "Roboto Mono";

    --search-form-width: 800px;
    --search-items-gap: 10px;
    --search-input-text-width: 250px;
    --search-input-date-width: 150px;

    --button-width: 250px;
}



/* BODY */

body {
    padding: var(--website-body-vertical-padding) var(--website-body-horizontal-padding);
    background: var(--website-background-color);
    font-family: var(--website-general-font-family), sans-serif;
    font-size: var(--website-general-font-size);
    color: var(--website-general-font-color);
}

.body-container {
    margin: 0 auto;
    width: 100%;
    max-width: var(--body-container-max-width);
    max-height: var(--body-container-max-height);
}

.empty-space {
    height: var(--website-empty-space-height);
}



/* HEADER */

header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--website-background-color);
}

header > .left {
    display: flex;
    align-items: center;
    gap: var(--header-logo-links-gap);
}

header > .left > a > .logo > p {
    font-size: var(--header-logo-font-size);
    font-weight: var(--header-logo-font-weight);
    color: white;
}

header > .left > nav > ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--header-navlinks-gap-between);
}

header > .left > nav > ul > li > .nav-link {
    padding: var(--header-navlinks-vertical-padding) var(--header-navlinks-horizontal-padding);
    border-radius: var(--website-border-radius);
    cursor: pointer;
}

header > .left > nav > ul > li > #active{
    padding: var(--header-navlinks-vertical-padding) var(--header-navlinks-horizontal-padding);
    border-radius: var(--website-border-radius);
    cursor: pointer;
    background-color: var(--website-general-gray-color);
}

header > .left > nav > ul > li > .nav-link > a {
    font-size: var(--header-navlinks-font-size);
    font-weight: var(--header-navlinks-font-weight);
}

header > .left > nav > ul > li > .nav-link:hover {
    background-color: var(--website-general-hover-color);
}

header > .right {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

header > .right > .demo {
    background-color: var(--website-general-red-color);
    padding: var(--header-exit-button-vertical-padding) var(--header-exit-button-horizontal-padding);
    border-radius: var(--website-border-radius);
}

header > .right > .demo > p {
    font-size: var(--header-exit-button-font-size);
    font-weight: var(--header-exit-button-font-weight);
}

header > .right > a > .demo {
    background-color: var(--website-general-gray-color);
    padding: var(--header-exit-button-vertical-padding) var(--header-exit-button-horizontal-padding);
    border-radius: var(--website-border-radius);
}

header > .right > a > .demo:hover {
    background-color: var(--website-general-hover-color);

}

header > .right > a > .demo > p {
    font-size: var(--header-exit-button-font-size);
    font-weight: var(--header-exit-button-font-weight);
}





/* MAIN */


/* TABLE */

main > .table-title > p {
    font-size: var(--table-title-font-size);
}

main > .table-title > details > summary:hover {
    cursor: pointer;
}

main > .table-title > details > .table-explanation > tbody > tr > td {
    color: #aaaaaa;
}


/* Search */

main > .search-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

main > .search-container > a {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

main > .search-container > a > div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--website-general-gray-color);
    border-radius: var(--website-border-radius);
    padding: 0 var(--website-general-horizontal-padding);
}

main > .search-container > a > div:hover {
    background-color: var(--website-general-hover-color);
    cursor: not-allowed;
}

main > .search-container > .search-form {
    height: var(--website-general-control-height);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

main > .search-container > .search-form > form {
    width: var(--search-form-width);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--search-items-gap);
}

main > .search-container > .search-form > form > input {
    border-radius: var(--website-border-radius);
    background-color: var(--website-general-gray-color);
    border: none;
    outline: none;
    color: var(--website-general-font-color);
}

main > .search-container > .search-form > form > input[type="text"] {
    width: var(--search-input-text-width);
    padding: var(--website-general-vertical-padding) var(--website-general-horizontal-padding);
}

main > .search-container > .search-form > form > input[type="date"] {
    border-radius: var(--website-border-radius);
    background-color: var(--website-general-gray-color);
    border: none;
    outline: none;
    color: var(--website-general-font-color);
    padding: var(--website-general-vertical-padding) var(--website-general-horizontal-padding);
    width: var(--search-input-date-width);
    font-family: var(--website-general-font-family), monospace;
}

main > .search-container > .search-form > form > input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    font-family: var(--website-general-font-family), monospace;
}

main > .search-container > .search-form > form > input[type="date"]::-webkit-inner-spin-button,
main > .search-container > .search-form > form > input[type="date"]::-webkit-clear-button {
    display: none;
}

main > .search-container > .search-form > form > input:hover,
main > .search-container > .search-form > form > input:focus-within {
    outline: 1px solid #fff;
}

main > .search-container > .search-form > form > input[type=date]:hover {
    cursor: pointer;
}

main > .search-container > .search-form > form > .filter-button {
    width: var(--button-width);
    background-color: var(--website-general-gray-color);
    border: none;
    outline: none;
    border-radius: var(--website-border-radius);
}

main > .search-container > .search-form > form > .filter-button:hover {
    cursor: pointer;
    background-color: var(--website-general-hover-color);
}

main > .search-container > .search-form > form > a {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 300px;
}

main > .search-container > .search-form > form > a > div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--website-general-gray-color);
    border-radius: var(--website-border-radius);
    padding: 0 var(--website-general-horizontal-padding);
}

main > .search-container > .search-form > form > a > div:hover {
    background-color: var(--website-general-hover-color);
}


/* Table */

main > .table-container {
    max-height: var(--table-container-max-height);
    overflow: auto;
    border-bottom: 1px solid var(--website-general-gray-color);
}

main > .table-container > table {
    font-weight: var(--website-general-font-weight-light);
    text-align: left;
    width: 100%;
    font-family: var(--table-font-family), monospace;
    border-collapse: collapse;
}

main > .table-container > table > thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #000;
    box-shadow: 0 1px 0 0 var(--website-general-gray-color);
}

main > .table-container > table > tbody > tr:hover {
    background-color: var(--website-general-hover-color);
}

main > .table-container > table > thead > tr > th {
    padding: 8px 10px 8px 10px;
}

main > .table-container > table > tbody > tr > td {
    padding: 4px 10px 4px 10px;
}

main > .table-container > table > thead > tr > th:nth-child(4),
main > .table-container > table > thead > tr > th:nth-child(5),
main > .table-container > table > thead > tr > th:nth-child(6),
main > .table-container > table > thead > tr > th:nth-child(7),
main > .table-container > table > thead > tr > th:nth-child(8),
main > .table-container > table > thead > tr > th:nth-child(9),
main > .table-container > table > thead > tr > th:nth-child(10),
main > .table-container > table > thead > tr > th:nth-child(11),
main > .table-container > table > tbody > tr > td:nth-child(4),
main > .table-container > table > tbody > tr > td:nth-child(5),
main > .table-container > table > tbody > tr > td:nth-child(6),
main > .table-container > table > tbody > tr > td:nth-child(7),
main > .table-container > table > tbody > tr > td:nth-child(8),
main > .table-container > table > tbody > tr > td:nth-child(9),
main > .table-container > table > tbody > tr > td:nth-child(10),
main > .table-container > table > tbody > tr > td:nth-child(11) {
    text-align: right;
}



/* CHARTS */

main > .charts {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
    height: 250px;
}

main > .charts > .left {
    width: 70%;
    display: flex;
    align-items: center;
}

main > .charts > .right {
    width: 30%;
}


/* SCROLLBAR */

html {
    scrollbar-width: thin;
    scrollbar-color: #555 #000;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
    border-radius: var(--website-border-radius)
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
    border: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}