:root {
    --light_blue: #AED6F1;
    --blue_gray: #c9d7e8;
}

.title {
    display: flex;
    flex-wrap: wrap;

    font-size: 1.5rem;
    font-weight: bold;

    margin-top: .5em;
    margin-bottom: 1em;
    margin-right: 1em;

    & span:first-child {
        margin-right: 1em;
    }
}

.row {
    &:not(:first-child) {
        margin-top: .6em;
    }

    &:not(:last-child) {
        margin-bottom: .6em;
    }

    & label {
        padding: 0 .1em 0 0;
        display: inline-block;
        font-weight: bold;
    }

    & ul {
        margin: 0;
    }

    & li {
        margin: .5em 0;

        & .indent {
            margin-left: 1em;
        }
    }

    & .field {
        display: inline-block;
        margin-right: 1em;

        &.wrap-indent {
            margin-right: 0;
            margin-left: 1em;
        }
    }

    & .field-group {
        display: inline-block;
    }
}

.owner {
    display: flex;
    flex-wrap: wrap;

    margin: 0 0 0 0;
}

.work-items-list {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    font-size: 1.1rem;
    width: 100%;
}

.work-item {
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 1em;

    &:nth-child(even) {
        background: var(--light_blue);
    }
    &:nth-child(odd) {
        background: var(--blue_gray);
    }

    & hr {
        border-top: 1px solid darkgrey;
        border-bottom: none;
    }

    & .notes {
        font-size: 1rem;
        margin-left: .6em;
        margin-right: 1.2em;
        margin-top: .6em;

        & .note {
            padding-left: .6em;

            &:not(:first-child) {
                padding-top: .6em;
            }
            &:not(:last-child) {
                padding-bottom: .6em;
                border-bottom: 1px solid darkgrey;
            }

            & .note-builder {
                display: inline-block;
                margin-right: 1em;
                font-weight: bold;
            }
            & .note-date {
                display: inline-block;
                margin-right: 1.2em;
                font-style: oblique;
                font-size: .9em;
            }
            & .note-text {
                padding-top: .2em;
            }
        }
    }

    & .item-button-group {
        display: flex;
        justify-content: flex-end;

        & .button {
            @media (min-width: 640px) {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 1em;
            }

            &:last-child {
                @media (min-width: 1025px) {
                    margin-right: 12%;
                }
            }
        }
    }

    & .category {
        color: #b30000;
    }

    @media (min-width: 640px) {
        & {
            width: 98%;
            margin-top: .5em;
            margin-bottom: 1em;
            margin-right: 4em;
            font-size: 1.1rem;
        }
    }

    @media (min-width: 1536px) {
        width: 80%;
        margin-top: .5em;
        margin-bottom: 1em;
        font-size: 1.1rem;
    }
}

.disabled {
    cursor: not-allowed;

    & input[type="checkbox"] {
        background-color: #c0c0c0;
    }

    & input[type="submit"] {
        background-color: #c0c0c0;
        border: 1px solid #c0c0c0;
    }

    &.form_label {
        color: #c0c0c0;
    }
}


.warning {
    color: #b30000;
    font-style: oblique;
}