.means-of-contact { p { margin-bottom: 1em; } } .contact-form-container { form { border-radius: 3px; border: 1px dashed #80808054; padding: 1em; } .contact-form-first-group { display: flex; .contact-form-input:first-of-type { margin-right: .4em; } .contact-form-input:nth-of-type(2) { margin-left: .4em; } } .contact-form-input { width: 100%; margin-top: 1em; } input, textarea { width: 100%; margin-top: .6em; border-radius: 3px; padding: .6em; border: 1px solid #dbdbdb; box-shadow: 1px 2px 4px 0 rgba(0,0,0,.1); } .contact-form-message textarea { min-height: 8em; } label { display: block; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-button { display: none; svg { animation: rotating 2s linear infinite; } } .contact-form-submit { } .contact-form-container { display: flex; justify-content: end; } } .alert { padding: 1em; margin-bottom: 1em; border-radius: 3px; .alert-content { display: flex; align-items: center; } } .alert.alert-success { background: green; color: white; } .alert.alert-error { background: red; color: white; } .alert .alert-icon { padding-right: 0.6em; } @media (min-width: $sm-breakpoint) { .contact-form-first-group { .contact-form-input { margin-top: 0; } } } @media (max-width: $sm-breakpoint) { .contact-form { .contact-form-first-group { display: block; .contact-form-input { margin-left: 0 !important; margin-right: 0 !important; } } } .contact-form-input:first-of-type { margin-top: 0; } }