@import "overrides.css";
@import "style.css";

html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
}

v-space {
    display: block;
}

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

h1 {
    font-size: 32px;
    font-weight: 400;
}

h2 {
    font-size: 24px;
    font-weight: 700;
}

h3 {
    font-size: 24px;
    font-weight: 400;
}

h4 {
    font-size: unset;
}

h5 {
    font-size: 18px;
    font-weight: 400;
}

h6 {
    font-size: unset;
}

h7 {
    font-size: smaller;
    font-weight: 700;
}

.header {
    line-height: 24px;
    display: flex;
    flex-direction: row;
}

.header .right {
    margin-left: auto;
    margin-right: 0;
}

x-item {
    display: flex;
    box-sizing: border-box;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
    border-radius: 8px;
    background-color: white;
}

table > thead > tr > th {
    color: var(--table-header-cell-color);
    font-weight: var(--table-header-cell-font-weight);
    font-size: var(--table-header-cell-font-size);
    line-height: var(--table-header-cell-line-height);
    text-align: var(--table-header-cell-text-align);
    padding-left: var(--table-header-cell-padding-left);
    padding-right: var(--table-header-cell-padding-right);
    padding-top: var(--table-header-cell-padding-top);
    padding-bottom: var(--table-header-cell-padding-bottom);
    border-bottom: var(--table-header-cell-border-bottom);
}

    table > tbody > tr:hover {
        box-shadow: var(--table-row-hover-box-shadow);
    }

table > tbody > tr > td {
    color: var(--table-cell-color);
    font-weight: var(--table-cell-font-weight);
    font-size: var(--table-cell-font-size);
    line-height: var(--table-cell-line-height);
    text-align: var(--table-cell-text-align);
    padding-left: var(--table-cell-padding-left);
    padding-right: var(--table-cell-padding-right);
    padding-top: var(--table-cell-padding-top);
    padding-bottom: var(--table-cell-padding-bottom);
}

table > tfoot > tr > th {
    color: var(--table-header-cell-color);
    font-weight: var(--table-header-cell-font-weight);
    font-size: var(--table-header-cell-font-size);
    line-height: var(--table-header-cell-line-height);
    text-align: var(--table-header-cell-text-align);
    padding-left: var(--table-header-cell-padding-left);
    padding-right: var(--table-header-cell-padding-right);
    padding-top: var(--table-header-cell-padding-top);
    padding-bottom: var(--table-header-cell-padding-bottom);
}

table > tfoot > tr > td {
    color: var(--table-cell-color);
    font-weight: var(--table-cell-font-weight);
    font-size: var(--table-cell-font-size);
    line-height: var(--table-cell-line-height);
    text-align: var(--table-cell-text-align);
    padding-left: var(--table-cell-padding-left);
    padding-right: var(--table-cell-padding-right);
    padding-top: var(--table-cell-padding-top);
    padding-bottom: var(--table-cell-padding-bottom);
}

x-widget {
    font-family: var(--widget-font-family);
}

x-widget table {
    width: 100%;
    max-height: 296px;
}

    x-widget table > thead > tr > th {
        padding: 8px;
    }

    x-widget table > tbody > tr > td {
        padding: 8px;
    }

        x-widget table > tbody > tr > td > .chip {
            width: 124px;
            margin: auto;
        }

        x-widget table > tbody > tr > td > x-status {
            width: 100%;
        }

input, select, textarea {
    background-color: var(--input-background-color);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    box-sizing: var(--input-box-sizing);
    caret-color: var(--input-caret-color);
    color: var(--input-color);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
}

    input:focus, select:focus, textarea:focus {
        border: var(--input-border-focus);
    }

    input:invalid, select:invalid, textarea:invalid {
        border: var(--input-border-invalid);
        color: red;
    }

    input[embed], select[embed], textarea[embed] {
        border: none;
        margin: 0;
        padding: 0;
    }

    input[disabled], select[disabled], textarea[disabled] {
        background-color: var(--input-disabled-color);
        color: var(--input-disabled-label-color);
    }

    select[disabled] > option {
        color: var(--input-disabled-label-color);
    }

option {
    font-family: var(--input-font-family);
}

x-icon-button {
    color: var(--action-button-color);
}

.subcontractor-name {
    text-align: left;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}