:root {
  --sidebar-width: 22em;
}

/* Cuts down on unnecessary whitespace at top. Consider move to base. */
main {
  padding: 1rem 1.5rem; }

.section {
  /* move this to base as $section-padding */
  padding: 1em 0; }

.button, p .button {
  font-family: "Open Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem; }
  .button.is-short, p .button.is-short {
    height: 1.75em; }
  .button svg.icon, p .button svg.icon {
    top: 0;
    font-size: .9em; }

.button.reprocess {
  margin-top: .5em; }

/* Allows text in a button to wrap responsively. */
.button-is-wrappable {
  height: 100%;
  white-space: normal; }

.button-feedback {
  vertical-align: baseline; }

.submit-nav {
  margin-top: 1.75rem;
  margin-bottom: 2em !important;
  justify-content: flex-end; }
  .submit-nav .button .icon {
    margin-right: 0 !important; }

/* controls display of close button for messages */
.message button.notification-dismiss {
  position: relative;
  z-index: 1;
  top: 30px;
  margin-left: calc(100% - 30px); }

.form-margin {
  margin: .4em 0; }

.notifications {
  margin-bottom: 1em; }

.policy-scroll {
  margin: 0;
  margin-bottom: -1em;
  padding: 1em 3em;
  max-height: 400px;
  overflow-y: scroll; }
  @media screen and (max-width: 768px) {
    .policy-scroll {
      padding: 1em; } }
  @media screen and (max-width: 400px) {
    .policy-scroll {
      max-height: 250px; } }
/* forces display of scrollbar in webkit browsers */
.policy-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px; }

.policy-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }

nav.submit-pagination {
  display: block;
  /*float: right*/
  width: 100%; }

h2 .title-submit {
  margin-bottom: 0em;
  margin-top: 0.25em !important;
  display: block;
  float: left;
  width: 10%;
  display: none;
  color: #005e9d; }

h2 .replacement {
  margin-top: -2rem;
  margin-bottom: 2rem;
  font-style: italic;
  font-weight: 400; }

h1.title.title-submit {
  margin-top: .75em;
  margin-bottom: 0.5em;
  clear: both;
  color: #005e9d !important; }
  h1.title.title-submit .preamble {
    color: #7f8d93; }
  @media screen and (max-width: 768px) {
    h1.title.title-submit .title.title-submit {
      margin-top: 0; } }
.texlive-summary article {
  padding: .8rem; }
  .texlive-summary article:not(:last-child) {
    margin-bottom: .5em;
    border-bottom-width: 1px;
    border-bottom-style: dotted; }

.alpha-before::before {
  content: '\03b1';
  color: rgba(204, 204, 204, 0.5);
  font-size: 10em;
  position: absolute;
  top: -0.4em;
  left: -0.25em;
  line-height: 1;
  font-family: serif; }

.beta-before::before {
  content: '\03b2';
  color: rgba(204, 204, 204, 0.5);
  font-size: 10em;
  position: absolute;
  top: -0.4em;
  left: -0.25em;
  line-height: 1;
  font-family: serif; }

/* overrides for this form only? may move to base */
.field:not(:last-child) {
  margin-bottom: 1.25em; }

.label:not(:last-child) {
  margin-bottom: .25em; }

.label.optional {
  color: #767676; }

.label.optional span {
  font-style: italic;
  font-weight: 300; }

.is-horizontal {
  border-bottom: 1px solid whitesmoke; }

.is-horizontal:last-of-type {
  border-bottom: 0px; }

.buttons .button:not(:last-child) {
  margin-right: .75rem; }

.content-container, .action-container {
  border: 1px solid #d3e1e6;
  padding: 1em;
  margin: 0 !important; }

.content-container {
  border-bottom: 0px; }


.verify-user-box {
    border-bottom: 1px solid #d3e1e6;
}

.verify-user-checkbox {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important; /* optional spacing */
}

.authorship-options {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1rem 0 1.25rem 0 !important;
}

.action-container {
  box-shadow: 0 0 9px 0 rgba(210, 210, 210, 0.5); }
  .action-container .upload-notes {
    border-bottom: 1px solid #d3e1e6;
    padding-bottom: 1em; }


.authorship-indent {
  padding-left: 2.5em;   /* adjust to taste: 2em–3em matches your screenshot */
}


.authorship-options .field {
  margin-bottom: 0.75rem; /* was ~1.25rem default; tweak as needed */
}


.authorship-footnote {
  margin-top: 1rem;
  font-size: 0.95rem;     /* or .875rem if you prefer smaller */
  line-height: 1.4;
}


/* abs preview styles */
.content-container #abs {
  margin: 1em 2em; }
  .content-container #abs .title {
    font-weight: 700;
    font-size: x-large; }
  .content-container #abs blockquote.abstract {
    font-size: 1.15rem;
    margin: 1em 2em 2em 4em; }
  .content-container #abs .authors {
    margin-top: 20px;
    margin-bottom: 0; }
  .content-container #abs .dateline {
    text-transform: uppercase;
    font-style: normal;
    font-size: .8rem;
    margin-top: 2px; }
  @media screen and (max-width: 768px) {
    .content-container #abs blockquote.abstract {
      margin: 1em; } }
/* category styles on cross-list page */
.category-list .action-container {
  padding: 0; }

.category-list form {
  margin: 0; }
  .category-list form li {
    margin: 0;
    padding-top: .25em !important;
    padding-bottom: .25em !important;
    display: flex; }
    .category-list form li button {
      padding-top: 0 !important;
      margin: 0;
      height: 1em; }
    .category-list form li span.category-name-label {
      flex-grow: 1; }

.cross-list-area {
  float: right;
  width: 40%;
  border-left: 1px solid #f2f2f2; }
  @media screen and (max-width: 768px) {
    .cross-list-area {
      width: 100%;
      border-bottom: 1px solid #f2f2f2;
      border-left: 0px; } }
.box-new-submission {
  text-align: left; }
  .box-new-submission .button {
    margin: 0 0 1em 0; }

/* tightens up user data display on verify user page */
.user-info {
  margin-bottom: 1rem; }
  .user-info .field {
    margin-bottom: .5rem; }
    .user-info .field .field-label {
      flex-grow: 2; }
    .user-info .field span.field-note {
      font-style: italic; }

.control .radio {
  margin-bottom: .25em; }

/* Classes for zebra striping and nested directory display */
ol.file-tree {
  margin: 0 0 1rem 0;
  list-style-type: none; }
  ol.file-tree li {
    margin-top: 0;
    padding-top: .15em;
    padding-bottom: .15em;
    padding-left: .25em;
    padding-right: .25em;
    background-color: white; }
    ol.file-tree li.even {
      background-color: #E8E8E8; }
    ol.file-tree li button {
      vertical-align: baseline; }
  ol.file-tree form:nth-of-type(odd) li {
    background-color: #E8E8E8; }
  ol.file-tree .columns {
    margin: 0; }
  ol.file-tree .column {
    padding: 0; }
    ol.file-tree .column .columns {
      margin: 0; }
  ol.file-tree > li ol {
    border-left: 2px solid #CCC;
    margin: 0 0 0 1rem; }
    ol.file-tree > li ol li {
      padding-left: 1em; }
      ol.file-tree > li ol li:first-child {
        margin-top: 0; }

/* For highlighting TeX logs */
.highlight-key {
  border-top: 1px solid #d3e1e6;
  border-bottom: 1px solid #d3e1e6;
  padding: 1em 0 2em 0; }

.tex-help {
  background-color: rgba(28, 97, 246, 0.4);
  /* background-color: rgba(152, 35, 255, 0.40) */
  color: #082031;
  padding: 0 0.2em; }

.tex-suggestion {
  background-color: rgba(255, 245, 35, 0.6);
  color: #082031;
  padding: 0 0.2em; }

.tex-info {
  background-color: rgba(0, 104, 173, 0.15);
  color: #082031;
  padding: 0 0.2em; }

.tex-success {
  background-color: rgba(60, 181, 33, 0.15);
  color: #092c01;
  padding: 0 0.2em; }

.tex-ignore {
  background-color: rgba(183, 183, 183, 0.3);
  color: #092c01;
  padding: 0 0.2em; }

.tex-warning {
  background-color: rgba(214, 118, 0, 0.4);
  color: #211608;
  padding: 0 0.2em; }

.tex-danger {
  background-color: rgba(204, 3, 0, 0.3);
  color: #340f0e;
  padding: 0 0.2em; }

.tex-fatal {
  background-color: #cd0200;
  color: white;
  padding: 0 0.2em; }

/* Classes for condensed, responsive progress bar */
.progressbar,
.progressbar li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0; }

.progressbar {
  /*default styles*/
  /*complete styles*/
  /*active styles*/
  /*controls number of links per row when screen is too narrow for just one row*/ }
  .progressbar li {
    background-color: #1c8bd6;
    list-style: none;
    padding: 0;
    margin: 0 .5px;
    transition: 0.3s;
    border: 0;
    flex-grow: 1; }
  .progressbar li a {
    font-weight: 600;
    text-decoration: none;
    color: #f5fbff;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: color 0.3s;
    height: 25px; }
  .progressbar li a:hover,
  .progressbar li a:focus,
  .progressbar li a:active {
    text-decoration: none;
    border-bottom: 0px;
    color: #032121; }
  .progressbar li.is-complete {
    background-color: #e9f0f5; }
  .progressbar li.is-complete a {
    color: #535E62;
    text-decoration: underline;
    font-weight: 300;
    transition: 0.3s; }
    .progressbar li.is-complete a:hover {
      height: 30px; }
  .progressbar li.is-active,
  .progressbar li.is-complete.is-active {
    background-color: #005e9d;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); }
  .progressbar li.is-active a,
  .progressbar li.is-complete.is-active a {
    color: #f5fbff;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    height: 30px; }
  .progressbar li.is-active a {
    text-decoration: none; }
  @media screen and (max-width: 1100px) {
    .progressbar li {
      width: calc(100% * (1/6) - 10px - 1px); } }
/* info and help bubbles */
.help-bubble {
  position: relative;
  display: inline-block; }
  .help-bubble:hover .bubble-text {
    visibility: visible; }
  .help-bubble:focus .bubble-text {
    visibility: visible; }
  .help-bubble .bubble-text {
    position: absolute;
    visibility: hidden;
    width: 160px;
    background-color: #F5FAFE;
    border: 1px solid #0068AC;
    color: #0068AC;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    font-size: .8rem; }
    .help-bubble .bubble-text:after {
      content: " ";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #0068AC transparent transparent transparent; }

/* Formats the autotex log ouput.

   Ideally this would also have white-space: nowrap; but it doesnt play nice
   with flex. Unfortunately, the widely accepted solution
   (https://css-tricks.com/flexbox-truncated-text/) is not working here. */
.log-output {
  max-height: 50vh;
  height: 50vh;
  color: black;
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 100%;
  max-width: 100%;
  background-color: whitesmoke;
  font-family: 'Courier New', Courier, monospace;
  font-size: 9pt;
  padding: 4px; }

/* See https://github.com/jgthms/bulma/issues/1417 */
.level-is-shrinkable {
  flex-shrink: 1; }

/* Prevent the links under the mini search bar from wrapping. */
.mini-search .help {
  width: 200%; }

/* This forces the content to stay in bounds. This also fixes the overflow
   of selects (without breaking the mini-search bar). */
.container {
  width: 100%; }

columns {
  max-width: 100%; }

column {
  max-width: 100%; }

.field {
  max-width: 100%; }

.control-cross-list {
  max-width: 80%; }

# New CSS for Submission Agreement and License updates.

/* Headings & brand hierarchy */
h1.title.title-submit { color: black !important; }  /* keep H1 black */

/* Info container structure */
.info-container { border: 0; background: transparent; border-left: 2px solid #a5d6fe; padding: 0 1em; box-shadow: -18px 0 15px -25px rgba(0,0,0,.75); }
.info-container-middle .message-body { border: none; border-top: 1px solid #d7d7d7; border-radius: 0; margin: .5em 0; padding: .75em !important; color: #767676; }
.info-container-bottom { border-top: 1px solid #d7d7d7; padding-top: .5em; }

/* Primary/secondary buttons + spacing */
.info-container .buttons.submit-nav { margin: 0 !important; gap: 3px; justify-content: space-between; width: 100%; }
.info-container .buttons.submit-nav .button { margin: 0; padding: .35em !important; height: auto; line-height: 1em; background-color: #E6E6E6; }
.info-container .buttons.submit-nav .button.is-success { background-color: #1e8bc3; font-weight: 600; } /* primary blue */

/* Progress bar deemphasis */  /* merge with progressbar settings above */
.progressbar li { background: transparent; border: 1px solid #a5d6fe; }
.progressbar li a { color: #1e8bc3; }
.progressbar li.is-complete.is-active { background-color: #a5d6fe; }
.progressbar li.is-complete.is-active a { color: black; }

/* Flex 'table' */
.user-info.content-container { border-color: #d7d7d7; padding: 0 !important; }
.user-info .field { gap: 6px; margin: 0 !important; }
.user-info .field .field-label { text-align: left; flex-grow: 1; border-right: 1px solid #d7d7d7; margin: 0 !important; }
.user-info .field .field-body { display: inline; flex-grow: 2; }
.field-label, .field-body { padding: .5em !important; }

/* Asterisks/errors */
.is-danger { color: red; }

.content-container .policy-scroll {
  font-family: 'Times New Roman', Times, serif; /* legalese serif */
}

.content-container .policy-scroll h3 {
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
}

/* Disabled primary button state used on Agreement */
.info-container .buttons.submit-nav .button.is-success.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Legal / scrollable agreement & license text areas */
/*
.content-container {
  background-color: #f9f7f7;  /* light paper tone behind legal copy */
}
*/
/* Optional: license option groups look like cards */
/*
.action-container {
  background-color: #f9f7f7; /* subtle card background */
}
*/

/* Only legal pages */
.legal-page .content-container,
.legal-page .action-container { background-color: #f9f7f7; }

/* =====================================================================
   Category step (classification.html)
   --------------------------------------------------------------------- */

/* Section framing - primary uses the existing .action-container card;
   cross-list section gets a subtle paper tone behind the combobox. */
.secondary-container { background-color: #f9f7f7; }

/* Card styling for primary + cross-list panels on the Category page. */
main .field.action-container,
main .field.secondary-container {
  border: 1px solid #e0dede;
  border-radius: 8px;
  padding: 1.5em;
}
main .field.action-container > label.label,
main .field.secondary-container > label.label {
  font-size: 1.1em;
}

/* Cross-list combobox -------------------------------------------------- */
.combobox-container {
  font-family: sans-serif;
  width: 100%;
  max-width: 500px;
  position: relative;
}

.combobox-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: white;
  min-height: 38px;
  align-items: center;
  transition: border-color 0.2s;
}
.combobox-wrapper:focus-within {
  border-color: #1e8bc3;
  box-shadow: 0 0 0 2px rgba(30, 139, 195, 0.25);
}

/* Pills inside the combobox. The base .tag style comes from Bulma; these
   rules tighten the layout for our two-line code + name format.
   `.category-pills` is the cross-list page's server-driven equivalent: same
   pills, but each one is its own POST form rather than a JS-managed tag. */
.combobox-wrapper .tag,
.category-pills .tag {
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: auto;
}
.combobox-wrapper .tag .tag-code,
.category-pills .tag .tag-code {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.combobox-wrapper .tag .tag-name,
.category-pills .tag .tag-name { color: #555; }
.combobox-wrapper .remove-tag,
.category-pills .remove-tag {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #888;
  padding: 0 2px;
}
.combobox-wrapper .remove-tag:hover,
.category-pills .remove-tag:hover { color: #b31b1b; }

/* The pending cross-lists on the cross-list page. Each pill is a <form>, and
   forms are block-level, so they need to be told to sit side by side. */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 1em;
}
.category-pills form { display: inline-flex; margin: 0; }

/* The text input shares the combobox wrapper with the pills. Force it to
   its own line so typing always starts on a fresh row. */
.combobox-wrapper #cross-list-input {
  border: none;
  outline: none;
  flex: 1 0 100%;
  width: 100%;
  order: 999;
  padding: 8px 4px;
  font-size: 14px;
  margin-top: 6px;
  border-top: 1px solid #f1f1f1;
  background: transparent;
}

/* Dropdown list of category options. */
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 10;
  display: none;
}
.dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}
.dropdown-item:hover { background-color: #f1f3f5; }
.dropdown-item.is-taken { display: none; }