.hidden
{
    display: none;
}

.line
{
    display: block;
    height: 3px;
    width: 90%;
    background-color: var(--main-colour);
    margin-left: 7.5em;
}

.black-line
{
    display: block;
    height: 3px;
    width: 100%;
    background-color: #000000;
}

h1
{
    color: var(--main-colour);
    margin-left: 3.75em;
    margin-top: 3em;
    grid-column: 1/-1;
}

#content-container
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 2em;
}

#busy-screen
{
    grid-column: 1 / -1;
}

#busy-screen.hidden
{
    display: none;
}

.wait
{
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    z-index: 3;
    margin: 0 auto;
}

/* .wait > img
{
    align-self: center;
} */

.waiting
{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    color: #FFFFFF;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
}

@keyframes animloader
{
    0%
    {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    25%
    {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
    }
    50%
    {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
    }
    75%
    {
        box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    100%
    {
        box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
}

.right-view
{
    display: flex;
    flex-direction: column;
}

.input-form
{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.65em;
    margin: 0 auto;
    width: 70%;
    align-items: center;
    padding-bottom: 1.5em;
    margin-left: 7.5em;
    margin-bottom: 5em;
}

.input-form label
{
    font-weight: bold;
    color: var(--main-colour);
}

.input-form label span
{
    font-weight: bold;
    color: #000000;
}

.input-form label a
{
    font-weight: bold;
    color: var(--main-colour);
    text-decoration: none;
}

.input-form label.optional
{
    font-weight: normal;
}

input:not([type="submit"])
{
    border: 1px solid black;
}

.input-form input.error
{
    border: 2px solid rgba(236, 104, 104, 1);
}

.input-form > .group
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 0.65em;
    align-items: center;
}

.input-form > #login-form label
{
    align-self: center;
    font-weight: bold;
}

.input-form > #user-form, .input-form > #client-form
{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 2em;
}

.input-form:has(#customer-form)
{
    width: 45%;
}

.input-form > #customer-form
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 10px;
    margin-bottom: 1em;
}

select
{
    width: 60%;
    padding: 0.25em;
    font-size: 1em;
}

.customer-input
{
    border: none;
    border-bottom: 2px solid #99915D;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    padding: 0.25em;
    font-size: 1em;
}

.customer-input:focus
{
    border: 1px solid #AEA77D;
    border-radius: inherit;
    outline: 3px solid transparent;
    padding: 0.25em;
}

.form-row
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    height: 100%;
    width: 100%;
    align-self: center;
    align-items: center;
    column-gap: 10px;
}

.form-row:has(span.error:not(.hidden))
{
    padding-bottom: 0.75em;
}

.group .error
{
    border: 1px solid rgba(236, 104, 104, 1);
    border-left: 1em solid rgba(236, 104, 104, 1);
    padding: 1em;
}

/* #cname-error, #cname-error, #ctype-error, #contact-error, #email-error, #contactnr-error, #max-error */
/* #input-form .error
{
    grid-column: 2 / 3;
} */

span[id$='-error']
{
    color: #FF0000;
    border: 0;
}

.user-role
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-around;
    row-gap: 1em;
}

#order-total
{
    border: 2px solid #000000;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 0.5fr);
    padding: 3em;
    width: 50%;
    align-self: center;
    margin-bottom: 2em;
}

.order-row
{
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 1fr;
}

.text-right
{
    text-align: right;
}

.gold
{
    color: var(--main-colour);
    font-weight: bold;
}

#agree
{
    margin-right: 20px;
}

#submit-order
{
    width: 50%;
    align-self: center;
    color: #FFFFFF;
    background-color: var(--main-colour);
    font-size: 1.5em;
    height: 2em;
    border: 0;
}

#submit-order
{
    cursor: pointer;
}

#submit-order:disabled
{
    background-color: #DCDCDC;
    color: #FFFFFF;
    cursor: default;
}

.error
{
    border: 1px solid rgba(236, 104, 104, 1);
    border-left: 1em solid rgba(236, 104, 104, 1);
    padding: 1em;
}