@charset "UTF-8";
/* Palette and type lifted from blissfulartstudio.com's styles.css, so this
   tool feels like the same family of sites rather than a bolted-on utility
   page. Only the rules this one page actually needs are reproduced here. */

html, html * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
  text-align: center;
}

header {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid #CBA95A;
  overflow: hidden;
}

.nav-logo {
  height: 48px;
  width: auto;
  vertical-align: middle;
}

main {
  /* Wide enough for an 11in landscape preview (the sign-in sheet) without
     horizontal scrolling, not just the 8.5in portrait labels/tags docs. */
  max-width: 1250px;
  margin: 0 auto;
  padding: 24px 16px;
}

.hero {
  background-color: #FFFFFF;
  color: #575551;
  padding: 0;
  text-align: center;
}

.title-logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 8px auto 16px auto;
}

.gallery-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 8px auto 16px auto;
}

/* Setting display: flex above overrides the browser's default
   [hidden] { display: none } rule (author styles beat UA defaults), so
   the hidden attribute needs an explicit override to actually hide this. */
.gallery-logos[hidden] {
  display: none;
}

.gallery-logo {
  height: 40px;
  width: auto;
}

.pageTitle {
  text-align: center;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 300;
  margin-top: 10px;
}

p {
  color: #575551;
  font-size: 14px;
  margin-bottom: 16px;
}

.button {
  display: inline-block;
  color: #000000;
  background: #F2C399;
  border: 1px #A11D22 solid;
  padding: .5em 1.8em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: inset 5px 5px 15px #9bb691;
}

#download-row {
  margin-top: 16px;
}

.button:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: #B09393;
  color: #000000;
}

.button-small {
  margin-top: 16px;
  font-size: 12px;
}

.generate-actions {
  margin-bottom: 8px;
}

.generate-actions .button {
  display: inline-block;
  margin: 0 6px 8px 6px;
}

.nav-logout {
  float: right;
  margin-top: 8px;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Native file inputs can't be styled directly (the button/label part is
   browser-drawn), so the input itself is visually hidden and driven by the
   <label for="csv-file"> button + a separate span showing the filename. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-picker-row,
.gallery-picker-row {
  display: block;
  margin: 0 auto 16px auto;
}

.gallery-picker-row label {
  color: #575551;
  font-size: 14px;
  margin-right: 8px;
}

.gallery-picker-row select.file-name-box {
  cursor: pointer;
}

.file-name-box {
  display: inline-block;
  min-width: 160px;
  padding: .5em 1em;
  margin-left: 8px;
  border: 1px solid #B09393;
  border-radius: 6px;
  font-size: 14px;
  color: #575551;
  vertical-align: middle;
  text-align: left;
}

.form-status {
  font-size: 14px;
  font-weight: 400;
  margin-top: 14px;
  margin-bottom: 0;
  min-height: 18px;
  color: #575551;
}

.form-status.error {
  color: #A11D22;
}

footer {
  padding: 8px 10px;
  background-color: #DFDFDF;
  font-size: 16px;
  font-weight: 200;
  margin: 24px 4px 4px 4px;
  border: 1px solid #CBA95A;
}

.footer-text {
  font-size: 13px;
  margin-bottom: 2px;
  font-weight: 400;
  color: #4A4A4A;
}

#preview-container {
  margin-top: 24px;
  overflow-x: auto;
  text-align: left;
}

/* Fully isolate the rendered document from this page's own styles (text-align,
   color, font-family, box-sizing, etc. all inherit/cascade by default) --
   without this, e.g. body's text-align: center overrides every paragraph in
   the document that doesn't set its own alignment (most don't; left is the
   Word default and is often simply omitted from the XML rather than stated). */
#preview-container * {
  all: revert;
}

#preview-container .docx-wrapper {
  background: none;
}

#preview-container .docx {
  margin: 0 auto 16px auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Labels specify Calibri (a Microsoft font not bundled with most
   browsers/OSes), and docx-preview writes each run's font-family as a
   plain inline style rather than a CSS class, so overriding it needs
   !important. This only changes what the on-screen preview substitutes
   when Calibri isn't installed -- the generated .docx itself is
   untouched and still renders true Calibri when opened in Word. */
#preview-container .docx [style*="Calibri"] {
  font-family: Calibri, Arial, Helvetica, sans-serif !important;
}