/* Members Forms /* ---------------------------------------------------------- */ form[data-members-form] .button-loader, form[data-members-form] .message-success, form[data-members-form] .message-error { display: none; } .message-success svg, .message-error svg { position: relative; top: -1px; margin-right: 5px; height: 15px; width: 15px; } .message-success svg { fill: #fff; } .message-error svg { fill: var(--color-primary); } form[data-members-form].success .message-success, form[data-members-form].error .message-error { position: fixed; top: 20px; left: 6vw; right: 6vw; z-index: 9999; max-width: calc(1400px - 12vw); margin: 0 auto; padding: 10px 0; color: #fff; font-size: 1.4rem; line-height: 1.5em; font-weight: 500; text-align: center; background: var(--color-base); border-radius: var(--radius); } form[data-members-form].success .message-success { background: var(--color-success); } form[data-members-form].error .message-error { color: var(--color-primary); background: #fff; box-shadow: var(--color-primary) 0 0 0 1px; } form[data-members-form] .button { position: relative; } /*-- Loading --*/ /* Hide button text */ form[data-members-form].loading .button-content { visibility: hidden; } /* Show loading spinner */ form[data-members-form].loading .button-loader { display: inline-block; position: absolute; left: 50%; margin-left: -19px; transform: scale(0.7); } .button-loader svg path, .button-loader svg rect{ fill: #fff; } /*-- Show success message on success --*/ form[data-members-form].success .message-success { display: block; } /*-- Show error message on error --*/ form[data-members-form].error .message-error { display: block; }