@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 {
    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);
}



main {
    /*border: 1px solid yellow;*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}

main > .wrapper {
    /*border: 1px solid green;*/
    max-width: 800px;
    width: 100%;
}


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

main > .wrapper > details > summary:hover {
    cursor: pointer;
}

main > .wrapper > details > table > tbody > tr > td {
    color: #aaaaaa;
}





/* 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;
}