/* Contact form container - supported in all modern browsers */
.contact-us-form {
    color: var(--color-black);
    margin: var(--size-6);
}

.contact-us-form .container {
    display:flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: var(--size-4);
}

/* Form container - border-radius supported in IE 9+, box-shadow in IE 10+ */
#contact-us-form-container {
    background-color: var(--color-white);
    border-radius: var(--size-4);
    padding: var(--size-4);
    /* box-shadow - supported in IE 9+ */
    box-shadow: var(--box-shadow);
}

.contact-us-form .contacttop, .contact-us-form .contactbottom {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.contact-us-form .contacttop {
    display:flex;
    align-items: stretch;
    border-radius: var(--size-4);
    padding: var(--size-6);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);

}

.contact-us-form .contacttop > *  {
    border-left: var(--size-2) solid var(--color-prescriptions);
    padding: 0 var(--size-4) 0 var(--size-4);
    flex: 0 0 50%;
}

.contact-us-form  h2 {
    font-size: var(--size-5);
}

.contact-us-form .contacttop h3 {
    font-size: var(--size-4);
}
.contact-us-form .contacttop p {
}

.contact-us-form .contactbottom {
    display:flex;
    align-items: stretch;
    border-radius: var(--size-4);
    padding: var(--size-6);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
}

@media screen and (max-width: 768px) {
    .contact-us-form .contacttop, .contact-us-form .contactbottom {
        flex-direction: column;
        gap: var(--size-4);
    }
}

.contact-us-form .contactbottom > * {
    display:flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: var(--size-2);
    border-left: var(--size-2) solid var(--color-prescriptions);
    padding: 0 var(--size-4) 0 var(--size-4);
    flex: 0 0 50%;
}

@media screen and (max-width: 768px) {
    .contact-us-form .contacttop > *, .contact-us-form .contactbottom > * {
        border-left: none;
    }
}

.contact-us-form .contactbottom .opening-hours-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: var(--size-0) solid var(--color-grey);
    padding: var(--size-2);
    gap: var(--size-2);
}

.contact-us-form .contactbottom .opening-hours-row .opening-hours-label {
    font-weight: 700;
    flex-grow: 1;
}

.contact-us-form .contactbottom p {
    margin-top: var(--size-2);
    margin-bottom: 0;
}

.contact-us-form .contactdeclaration {
    border-radius: var(--size-4);
    padding: var(--size-6);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
    font-style: italic;
    color: var(--color-grey-dark);
}

.contact-us-form .contactdeclaration p {
    margin-bottom: 0;
}

.contactform {
    margin-top: var(--size-4);
}

/* Contact form group - flexbox supported in IE 11+ */
.contact-group {
    border-radius: var(--size-3);
    /* border with rgba - supported in IE 9+ */
    border: var(--size-1) solid rgba(162, 115, 154, 0.1);
    padding: var(--size-4);
    margin-bottom: var(--size-4);
    /* Flexbox layout - supported in IE 11+ */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* gap property - supported in modern browsers, fallback with margin */
    gap: var(--size-3);
}

/* Fallback for older browsers that don't support flex gap */
@supports not (gap: var(--size-3)) {
    .contact-group > * + * {
        margin-top: var(--size-3);
    }
}