.contact-us-form-modal {
position: fixed;
display: flex;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
justify-content: center;
padding: 56px 0px;
z-index: 999999;
&[data-visible="false"] {
display: none;
}
.contact-us-form-modal-overlay {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0px;
left: 0px;
}
.contact-us-form-dialog {
display: flex;
position: relative;
background: #fff;
width: 852px;
flex-flow: column nowrap;
height: 100%;
box-sizing: border-box;
.contact-us-form-dialog-header {
display: flex;
flex-flow: row nowrap;
padding: 16px 24px;
.contact-us-form-dialog-header-title {
display: flex;
flex: 1;
flex-flow: column nowrap;
h2 {
font-size: 20px;
line-height: 33px;
margin: 0px;
padding: 0px;
flex: 1;
}
span {
font-size: 16px;
line-height: 22px;
}
}
button {
background: none;
border: none;
height: 24px;
width: 24px;
}
}
.contact-us-form-dialog-body {
padding: 24px;
overflow-y: scroll;
flex: 1;
}
}
}
.form-group {
margin-bottom: 1rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
width: 100%;
padding: 8px 12px;
font-size: 14px;
line-height: 1.4;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.2s;
}
input:focus,
textarea:focus {
outline: none;
border-color: #007bff;
&:invalid {
border: 1px solid red;
}
}
.optOutInput {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.optOutInput input[type="checkbox"] {
margin-top: 0.2rem;
flex-shrink: 0;
}
button[type="submit"] {
display: block;
width: auto;
padding: 8px 12px;
font-size: 14px;
font-weight: 300;
border: none;
border-radius: 4px;
transition: background-color 0.2s;
cursor: pointer;
}
body:has(.contact-us-form-modal[data-visible="true"]) {
overflow: hidden;
}
@media (max-width: 991px) {
.contact-us-form-modal {
padding: 24px 0px 0px 0px;
.contact-us-form-dialog {
width: 100%;
height: 100%;
.contact-us-form-dialog-header {
border-bottom: 1px solid rgba(0,0,0,0.12);
}
}
}
}
@media (min-width: 992px) {
.contact-us-form-modal[data-is-modal="false"] {
position: static;
display: block !important;
height: auto;
width: 100%;
padding: 0px;
z-index: auto;
.contact-us-form-modal-overlay {
display: none;
}
.contact-us-form-dialog {
width: 100%;
height: auto;
background: transparent;
.contact-us-form-dialog-header {
padding: 0px 0px 16px 0px;
.dialog-close-button {
display: none;
}
}
.contact-us-form-dialog-body {
padding: 0px;
overflow-y: visible;
}
}
}
}