/* clients */

#clients {

}

#clientsNote {
    color: #7c7c7c;
    font-size: 14px;
    margin-bottom: 10px;
}

#clientsTable {
}

.clientsTableRow {

}

.clientsTableRowDelete {
    background-color: darkred;
}

/* New Form */

#new {

}

#newForm {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap: 10px;
    align-items: center;
    max-width: 600px;
}

#newFormSave {
    grid-column: span 2;
}

#newFormReferrals {
    grid-column: span 2;
    border-top: 2px solid var(--light-orange);
    padding-top: 10px;
}

#newFormReferralsTitle {
    font-weight: 700;
    margin-bottom: 10px;
}

#newFormReferralsRows {
    display: grid;
    row-gap: 10px;
    margin-bottom: 10px;
}

#newFormReferralsAdd {
    width: auto;
}

.newFormReferralsRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "referrer referrer remove"
        "rate start end";
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 6px;
}

.newFormReferralsRowReferral {
    grid-area: referrer;
}

.newFormReferralsRowCommissionPerHour {
    grid-area: rate;
}

.newFormReferralsRowStartDate {
    grid-area: start;
}

.newFormReferralsRowEndDate {
    grid-area: end;
}

.newFormReferralsRowRemove {
    grid-area: remove;
    background-color: darkred;
    width: auto;
    justify-self: end;
    padding: 5px 10px;
}

#editFormReferrals {
    grid-column: span 2;
    border-top: 2px solid var(--light-orange);
    padding-top: 10px;
}

#editFormReferralsTitle {
    font-weight: 700;
    margin-bottom: 10px;
}

#editFormReferralsRows {
    display: grid;
    row-gap: 10px;
    margin-bottom: 10px;
}

#editFormReferralsAdd {
    width: auto;
}

.editFormReferralsRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "referrer referrer remove"
        "rate start end";
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 6px;
}

.editFormReferralsRowReferral {
    grid-area: referrer;
}

.editFormReferralsRowCommissionPerHour {
    grid-area: rate;
}

.editFormReferralsRowStartDate {
    grid-area: start;
}

.editFormReferralsRowEndDate {
    grid-area: end;
}

.editFormReferralsRowRemove {
    grid-area: remove;
    background-color: darkred;
    width: auto;
    justify-self: end;
    padding: 5px 10px;
}


/* Edit */

#edit {
    padding: 10px;
}

#editContent {
    background-color: white;
    padding: 20px;
    margin: auto;
    max-width: 700px;
    width: 100%;
    border-radius: 6px;
    border: 4px solid var(--light-orange);
}

#editForm {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#editFormSave {
    grid-column: span 2;
}

#editClose {
    text-decoration: underline;
}