/* The message pop-up on the sign-in page, with the legacy alert's selectors and order, so the page's
   `.eu` reset rules apply to it exactly as they did on the legacy site. Loaded after style.css and
   responsive.css. */

body.stop-scrolling { height: 100%; overflow: hidden; }

.sweet-overlay { background-color: var(--color-alert-overlay); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 10000; }

.sweet-alert { background-color: var(--color-white); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 478px; padding: var(--space-17); border-radius: var(--radius-alert); text-align: center; position: fixed; left: 50%; top: 50%; margin-left: calc(var(--space-256) * -1); margin-top: calc(var(--space-200) * -1); overflow: hidden; display: none; z-index: 99999; }
@media all and (max-width: 540px) { .sweet-alert { width: auto; margin-left: 0; margin-right: 0; left: 15px; right: 15px; } }

.sweet-alert h2 { color: var(--color-alert-title); font-size: var(--font-size-30); text-align: center; font-weight: 600; text-transform: none; position: relative; margin: var(--space-25) 0; padding: 0; line-height: 40px; display: block; }
.sweet-alert p { color: var(--color-alert-text); font-size: var(--font-size-16); text-align: center; font-weight: 300; position: relative; text-align: inherit; float: none; margin: 0; padding: 0; line-height: normal; }

.sweet-alert button { background-color: var(--color-alert-button); color: var(--color-white); border: none; box-shadow: none; font-size: var(--font-size-17); font-weight: 500; border-radius: var(--radius-alert); padding: var(--space-10) var(--space-32); margin: var(--space-26) var(--space-5) 0 var(--space-5); cursor: pointer; }
.sweet-alert button:focus { outline: none; }
.sweet-alert button:hover { background-color: var(--color-alert-button-hover); }
.sweet-alert button:active { background-color: var(--color-alert-button-active); }
.sweet-alert button::-moz-focus-inner { border: 0; }
.sweet-alert[data-has-cancel-button=false] button { box-shadow: none !important; }

@keyframes showSweetAlert { 0% { transform: scale(0.7); } 45% { transform: scale(1.05); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes hideSweetAlert { 0% { transform: scale(1); } 100% { transform: scale(0.5); } }
.showSweetAlert[data-animation=pop] { animation: showSweetAlert var(--transition-medium); }
.hideSweetAlert[data-animation=pop] { animation: hideSweetAlert var(--transition-fast); }

/* The legacy sign-in page's own overrides of the alert. */
button.confirm { margin-bottom: var(--space-30); }
.sweet-alert h2 { font-size: var(--font-size-18); padding: var(--space-20); line-height: 21px; }