.hidden { display: none; }

/* Hide the template during rendering. */
#x-template { display: none; }
#x-template.x-rendered { display: block; }

/* Apply shown or hidden states that are just during loading. */
.x-shown-while-loading { display: block; }
.x-hidden-while-loading { display: none; }
.x-padded-while-loading { padding-top: 100vh; }

/* When the page is ready, reset states that were specific to loading. */
.x-ready .x-shown-while-loading { display: none; }
.x-ready .x-hidden-while-loading { display: block; }
.x-ready .x-padded-while-loading { padding-top: 0; }

/* These classes are for JavaScript to force-show or force-hide elements. */
.x-shown { display: block !important; opacity: 1 !important; }
.x-hidden { display: none !important; }

/* This badge shows the time of the last update to this project. */
.x-freshness { position: fixed; padding: 0.5em 1em; background: #ffc; color: #000; left: 12px; bottom: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1); }
.x-freshness { transition: background 5s; background: #ffd; }
.x-freshness.x-updated { transition: background 0s; background: #fc0; }

/* Hide the reCAPTCHA badge. */
.grecaptcha-badge { display: none; }

/* Input validation */
input.warning { border: 2px solid #e01313; color: red; }

/* Dismissable notifications. */
.x-dismissable { display: none; }  /* initially hidden */
.x-dismissable.x-active { display: unset; }
.x-dismissable.hidden { display: none; }  /* initially hidden */

/* Allow sliders to vertically resize to fit each slide's content. */
.w-slider-mask { height: auto !important; }
.w-slide.step[aria-hidden] { height: 0; }

/* Make modal windows vertically scrollable when they're too tall. */
.modal-card { max-height: 90vh; }

/* Make dropdown menus vertically scrollable when they're too tall. */
.w-nav-overlay { max-height: calc(100vh - 64px); overflow-y: auto; }
nav[data-nav-menu-open] { position: static; width: 30em; max-width: 100vw; }

/* Hide the "< Back" button on the first page of a multi-page form. */
#x-previous-button.x-disabled { display: none; }
