.otfd-fe-form{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; max-width: 100%; margin-bottom: 15px; padding: 15px; background: #f9f9f9; } .otfe-fe-message-wrapper{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; max-width: 100%; margin-bottom: 25px; background: #f9f9f9; color: #000000; background: rgba(2, 87, 127, 0.15); } .otfe-fe-message-wrapper p{ padding: 15px; margin: 0; } .otfe-fe-message-wrapper.otfd-error{ color: #000000; background: rgba(222, 109, 109, 0.25); } .otfd-fe-form-row{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; max-width: 100%; margin-bottom: 15px; } .otfd-fe-form-row:last-child{ margin-bottom: 0; } .otfd-fe-form-row::after{ display: block; content: ""; clear: both; } .otfd-fe-form-row input[type="text"], .otfd-fe-form-row input[type="email"], .otfd-fe-form-row textarea{ display: block; width: 100%; } .otfd-fe-form-submit{ display: block; float: left; padding: 8px 25px; border: 1px solid; text-decoration: none; } .otfd-fe-form-submit:hover, .otfd-fe-form-submit:focus, .otfd-fe-form-submit:active{ text-decoration: none; } .otfd-fe-form-errors{ color: #b50000; } .otfd-fe-form-errors p{ color: #b50000; } .otfd-fe-form-errors p:last-child{ margin-bottom: 0; } .otfd-hidden{ display: none; } .otfd-fe-form-row.has-error, .otfd-fe-form-row.has-error label, .otfd-fe-form-row.has-error label a{ color: #b50000; } .otfd-fe-form-row.has-error input{ border-color: #b50000; } .otfd-fe-form-submit.button-loading{ position: relative; opacity: 0.5; } .otfd-fe-form-submit.button-loading::before, .otfd-fe-form-submit.button-loading::after{ display: block; content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: #000; opacity: 1; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .otfd-fe-form-submit.button-loading::after{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }