@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body, input, select, button {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    color: rgb(66, 71, 70);
}

body {

}

.card {
    background: rgb(213, 225, 223);
    padding: 20px;
    margin-bottom: 20px;
}

.card h1 {
    font-size: 24px;
    font-weight: normal;
}

.card h1::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: rgb(66, 71, 70);
    margin-top: 20px;
    margin-bottom: 20px;
}

.table-form {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1st column for labels, 2nd for inputs */
    gap: 10px; /* Space between rows and columns */
    max-width: 600px; /* Maximum width for the form */
}

.form-row {
    display: contents; /* Allow grid layout to apply directly to children */
}

label {
    text-align: right; /* Right align labels for better readability */
    padding-right: 10px; /* Space between label and input */
    align-self: center;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#invoice-link {
    grid-column: 2; /* Span button across the second column */
}

button {
    grid-column: 2; /* Span button across the second column */
    padding: 10px 20px;
    background-color: #D2DEDCFF;
    color: #7CA6A1FF;
    border: 1px solid #7CA6A1FF;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover {
    color: white;
    background-color: #7CA6A1FF;
    transition: background-color 0.2s ease;
}

#invoice-stage {
    display: contents;
}

#invoice-stage.hidden {
    display: none;
}