@import "overrides.css";
@import "brand.css";
@import "theme.css";

:root {
    --downer-green-rgb: 151, 214, 0;
    --downer-green: rgb(var(--downer-green-rgb));
    --downer-dark-green-rgb: 106, 169, 0;
    --downer-dark-green: rgb(var(--downer-dark-green-rgb));
    --downer-blue: #5bc2e7;
    --downer-black: #222222;
    --downer-black-2: #222222;
    --downer-black-3: #616161;
    --downer-black-4: #9A9A9A;
    --downer-black-5: #EEEEEE;
    --downer-gray-rgb: 154, 154, 154;
    --downer-gray: rgb(var(--downer-gray-rgb));
    --downer-orange-rgb: 234, 118, 0;
    --downer-orange: rgb(var(--downer-orange-rgb));
    --downer-light-gray: #EEEEEE;
    --downer-light-navy: #041E42;
    --light-red: #ff6e6e;
    --downer-font: Roboto, Helvetica, Arial, sans-serif;
    --body-text-normal: 16px;
    --body-text-small: 14px;
    --body-text-xs: 12px;
    --title-text-large: 34px;
    --title-text-normal: 28px;
    --title-text-small: 22px;
    --title-text-xs: 20px;
    --tab-content-margin: 20px 0 0 0;
    --background-color: white;
    --text-color: black;
    --top-navigation-bar-z-index: 2;
    --overlay-z-index: 4;
    --main-content-padding-left: 16px;
    --main-content-padding-right: 16px;
    --main-content-padding-vertical: 16px;
    --color-gray: #cccccc;
    --color-light-gray: #eeeeee;
    --unit-spacing: 16px;
    --half-unit-spacing: 8px;
    --square-icon-length: 24px;
}

:root {
    --accent-color: var(--downer-green);
    --dark-accent-color: var(--downer-dark-green);
    --accent-vertical-gradient: linear-gradient(180deg, var(--accent-color) 0%, var(--dark-accent-color) 100%);
    --list-selector-width: 320px;
}

html, body {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    letter-spacing: 0.25px;
}

v-space {
    display: block;
}

h-space {
    display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1 {
    font-size: 96px;
    font-weight: 300;
    letter-spacing: -1.5px;
}

h2 {
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -0.5px;
}

h3 {
    font-size: 48px;
}

h4 {
    font-size: 34px;
    letter-spacing: 0.25px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15px;
}

a {
    text-decoration: none;
    color: unset;
}

page-title {
    font-size: 32px;
}

table.pretty, x-table.pretty {
    font-size: 12px;
    border-collapse: collapse;
    margin-top: 24px;
    margin-bottom: 24px;
    min-width: 400px;
}

table.pretty thead tr, x-table.pretty x-thead x-tr {
    text-align: left;
}

    table.pretty th, table.pretty td, x-table.pretty x-th, x-table.pretty x-td {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    table.pretty tbody tr, x-table.pretty x-tbody x-tr {
        border-bottom: 1px solid #dddddd;
    }

        table.pretty tbody tr:last-of-type, x-table.pretty x-tbody x-tr:last-of-type {
            border-bottom: 2px solid var(--accent-color);
        }

        table.pretty tbody tr:hover, x-table.pretty x-tbody x-tr:hover {
            background-color: #EEEEEE;
        }

label {
    font-family: "Roboto";
    font-size: 12px;
}

input, select, x-select, textarea {
    font-family: "Roboto";
    font-size: 12px;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    box-sizing: border-box;
}

    input:focus, select:focus, textarea:focus {
        border-bottom: 1px solid var(--accent-color);
    }

option {
    font-family: "Roboto";
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}