/* ──────────────────────────────────────────────────────────────────
   Per-site form accent tokens.
   The tan/brown colors used by .form-title, .section-title, .read-only,
   .form-button, and .search-button are sourced from CSS variables so a
   site (e.g. each body.site-<key> in site_srl) can re-skin them.
   Defaults match the legacy palette so non-SRL sites are unaffected.
   ────────────────────────────────────────────────────────────────── */
:root {
    --form-accent:                     #CFB991;
    --form-accent-text:                black;   /* text color over --form-accent backgrounds */
    --form-accent-button-bg:           #E0D4B8;
    --form-accent-button-border:       #CFB992;
    --form-accent-button-hover-border: #816d6d;
    --form-accent-button-text:         #333;
    --form-accent-button-active:       #c4b498;
}

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, hgroup, menu, nav, section {
  display: block; }

/* set up basic tag styles */

body {
  line-height: 1.5em;
}

html {
  margin: 0;
  padding: 0;
  height: 100%; }

body {
  color: black;
  font: 12pt Lato;
  margin: 0;
  overflow-x: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column; }

ul {
  margin-left: 30px;
  margin-bottom: 30px; }
  ul li {
    list-style-type: disc;
    line-height: 1.2em;
    margin-bottom: 15px;
    padding-left: 3px; }

a {
  color: #2C7AE1;
}
a:visited {
  color: #2C7AE1;
}

h1 {
  color: #1d1d1d;
  /*font-size: 150%;*/
    font-size: 28px;
    font-family: "Source Serif 4", "Lora", Georgia, serif;
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: 15px;

}


h2 {
    font-size: 150%;
    margin-bottom: 15px;
}

h3 {
  font-size: 125%;
  margin-bottom: 10px; 
}


.content {
  padding: 30px; }
  @media (max-width: 360px) {
    .content {
      padding: 20px 30px; } }

.action-link {
    font-weight: bold;
    text-decoration: underline;
}

/*                */
/* General Styles */
/*                */

@media (max-width: 480px) {
  .mobile-break {
    display: block; } }

@media (max-width: 480px) {
  .medium-or-smaller-size-screen-break {
    display: block; } }

.grey-text {
    color: darkgrey;
}

.no-wrap {
  white-space: nowrap; }

.last-edited {
    background-color: lightgoldenrodyellow;
}

/* heading styles */

.header-container {
  max-width: 1300px;
  display: flex;
}

.purdue-logo-img {
    width: 190px; 
    height: 33.8833px; 
    padding: 20px 20px 0px 30px; 
    margin-bottom: 10px;
}


/*                 */
/* Page Nav Styles */
/*                 */

.breadcrumb-nav-container {
  font-size: 14pt;
  color: #333;
  text-decoration: none;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.4;
}

.breadcrumb-nav-container > div {
    display: inline;
}

.breadcrumb-nav-container a {
    text-decoration: none;
}

.breadcrumb-nav-link-separator {
    padding-right: 10px;
    padding-left: 10px;
}

.breadcrumb-nav-segment-nowrap {
    white-space: nowrap;
}

/* Row that pairs the breadcrumb (left) with the global record-search box  */
/* (right, SRL-only). The row owns the bottom margin so the breadcrumb     */
/* container's own margin-bottom is suppressed inside it.                  */
.breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.breadcrumb-row > .breadcrumb-nav-container {
    margin-bottom: 0;
}

.breadcrumb-record-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    /* Right-pinned even when the breadcrumb-row wraps it onto its own line
     * (space-between only right-aligns it while it shares the first line;
     * a wrapped lone item would otherwise land at flex-start = left). */
    margin-left: auto;
    font-size: 10pt;
    font-weight: 400;
    color: #333;
}

.breadcrumb-record-search__label {
    white-space: nowrap;
}

/* Narrow-to-medium viewports: drop the visible label — the "Global search…"
 * placeholder carries the meaning on its own, and hiding the label keeps the
 * box up on the breadcrumb line instead of wrapping below it. 900px (not a
 * phone-only breakpoint) because the left sidebar (shown >768px) squeezes
 * the content area: with the sidebar present, the labeled row stops fitting
 * beside "Home > <Object>" at roughly 900px of viewport. The object-list
 * search label hides at the same breakpoint (sortable_list.css) so the
 * stacked pair stays symmetric. */
@media (max-width: 900px) {
    .breadcrumb-record-search__label {
        display: none;
    }
    /* Tighten the gap to the content below — at these widths the global
     * search box and the object-list search row stack as a pair, and the
     * desktop 20px reads as a hole between them. */
    .breadcrumb-row {
        margin-bottom: 6px;
    }
}

/* Measured narrow state (class toggled by the inline script in
 * _breadcrumb_record_search.html): when the search box can't share the
 * breadcrumb's line, it moves ABOVE the breadcrumb rather than wrapping
 * below it. */
.breadcrumb-row--search-above .breadcrumb-record-search {
    order: -1;
}

.breadcrumb-record-search__field {
    display: inline-block;
}

.breadcrumb-record-search__input {
    /* Keep in sync with .object-list-search input (sortable_list.css) —
     * the two boxes right-align as a stacked pair, so their widths must
     * match. */
    width: 160px;
    box-sizing: border-box;
    padding: 4px 7px;
    font-size: 10pt;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/*             */
/* Form Styles */
/*             */


/* Placeholder text — a touch lighter than the browser default (#757575) so
 * prompts read as hints rather than entered values. Global: covers every
 * placeholder on PW pages (search boxes, filter boxes, form inputs).
 * opacity:1 because Firefox otherwise fades placeholders via opacity, which
 * would double-lighten our grey. */
input::placeholder,
textarea::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

.form-button {
    background-color: var(--form-accent-button-bg);
    border: 2pt solid var(--form-accent-button-border);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 9pt;
    font-weight: bold;
    color: var(--form-accent-button-text);
    text-decoration: none;
    min-width: 80px;
    /* Pin line-height so <a class="form-button"> matches <button class="form-button">.
       Body sets `line-height: 1.5em` which inherits as a computed length and
       inflates the <a> variant; <button> elements ignore it via user-agent normal. */
    line-height: normal;
}
/* Browsers' user-agent stylesheet sets `a:visited { color: ... }` with
 * higher specificity than the bare `.form-button` rule, so visited
 * `<a class="form-button">` links would otherwise pick up the blue/purple
 * default. Pin both states to the theme's button-text variable. */
.form-button:link,
.form-button:visited {
    color: var(--form-accent-button-text);
}
.form-button:hover {
    background-color: var(--form-accent-button-bg);
    border: 2pt solid var(--form-accent-button-hover-border);
}
.form-button:active {
    background-color: var(--form-accent-button-active);
}

.form-outer-container {
  max-width: 800px;

  border: 2pt solid #675c4b;
  padding: 1px;
  background-color: white;
  font-size: 10pt;
}
.form-inner-container {
  display: grid;
  grid-template-columns:  1fr 1fr;
  background-color: #ececec;
}

select {   /* style for selected dropdown list item */
  height: 22px;
  margin: 3px 4px 0 0;
}

.element-text-container {
  align-self: stretch;
  padding: 6px 5px 5px 12px;
  font-size: 10pt;
  border-bottom: 1pt solid white;
  text-align: left;
}

.section-note {
  padding: 7px 5px 7px 12px;
  font-size: 10pt;
  border-bottom: 1pt solid white;
  text-align: left;
  grid-column: span 2;
}

.form-checkbox {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    transform: translateY(2px);
}

.input-field-hint {
    font-size: 9pt;
    padding: 2px 0 0 5px;
    color: #000000;
}

.input-container {
    align-self: stretch;
    border-bottom: 1pt solid white;
    padding: 5px 5px 5px 12px;
    font-size: 10pt;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* Let this grid cell shrink below the intrinsic width of a size="N" text
       input on narrow screens (paired with the inputs' max-width:100% below),
       instead of the input forcing the column wide and overflowing the form. */
    min-width: 0;
}
/* Fields are top-aligned (align-items:flex-start) so multi-field lines stay
   mutually aligned. Give selects AND text inputs the same small top margin so
   their content lines up with the FIRST line of the (top-aligned) label text
   in the adjacent cell, rather than riding a couple px above it. Selects pick
   up the global `select` rule's 3px top margin; text <input>s lack it, so we
   set both explicitly to keep them aligned with each other. Excludes
   checkbox/radio/file (own alignment) and textarea (multi-line, top-aligned). */
.input-container select,
.input-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    margin-top: 3px;
    margin-bottom: 0;
    /* size="N" sets the natural width, but never overflow the cell on narrow screens */
    max-width: 100%;
}
.read-only-form .input-container,
.read-only-form .element-text-container,
.read-only-form .section-note {
    background-color: #fafafa;
    border-bottom: 1pt solid #f0e2c8;
}

.read-only-form .input-container,
.read-only-form .element-text-container {
    padding: 0px 5px 0px 12px;
    border-bottom: 1pt solid #f0e2c8;
}

.read-only-form .subsection-title {
    font-weight: normal;
    padding-left: 8px;
}

.form-input {
    height: 22px;
}

.form-title {
    padding: 5px 0 5px 12px;
    font-size: 16pt;
    grid-column: span 2;
    font-weight: 700;
    color: var(--form-accent-text);
    background-color: var(--form-accent);
}

.section-title {
    padding: 4px 0 4px 12px;
    font-size: 13pt;
    font-weight: bold;
    grid-column: span 2;
    color: var(--form-accent-text);
    background-color: var(--form-accent);
}

.subsection-title {
    padding: 5px 0 5px 7px;
    font-size: 10pt;
    font-weight: 900;
    grid-column: span 2;
    color: black;
    border-bottom: 1pt solid white;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.form-setup-error {
    color: red;
    /* Gap between the field and this inline message (e.g. "Missing required
       value for field_name", which renders right after the input). */
    margin-left: 8px;
}

/* --- Validation-error display (shared by user forms and the form editor) ---
   Three layers, all driven by the form_errors plumbing in line_renderer.py:
   1. .form-errors-summary — clickable index of every error at the top of the
      form (links jump to the matching line banner).
   2. .form-line-error-banner — red banner row spanning the form grid, drawn
      directly above the erroring line (the anchor target; :target flashes it
      after a summary-link jump).
   3. .field-error-outline — red outline + tint on the actual offending
      control (input / select / textarea / radio group wrap / checkbox wrap /
      file dropzone container). Uses outline, not border, so applying it never
      shifts layout. */
.form-errors-summary {
    background: #fdecea;
    border: 1px solid #e3aaa3;
    /* Bright red text + left bar (matches the per-line banner and the editor's
       error blocks); the subtle 1px outer border stays the lighter pink. */
    border-left: 4px solid red;
    border-radius: 4px;
    color: red;
    /* Sits ABOVE the form's outer black border (not inside it): left-aligned to
       the form box, constrained to its width, with a gap before the border. */
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 0 10px 0;
    padding: 10px 14px;
    font-size: 10.5pt;
}
.form-errors-summary-title {
    font-weight: bold;
    font-size: 11pt;
    margin-bottom: 6px;
}
.form-errors-summary ul {
    margin: 0;
    padding-left: 22px;
}
.form-errors-summary li {
    margin: 3px 0;
    line-height: 1.4;
}
.form-errors-summary a {
    color: red;
    text-decoration: underline;
}
.form-errors-summary a:hover {
    color: #a00000;
}
.form-error-icon {
    font-size: 12pt;
    line-height: 1;
    vertical-align: -1px;
    margin-right: 2px;
}

.form-line-error-banner {
    grid-column: 1 / -1;
    background: #fdecea;
    /* Bright red text + left bar, matching the summary box above. */
    border-left: 4px solid red;
    border-bottom: 1pt solid white;
    color: red;
    padding: 6px 10px 6px 12px;
    font-size: 10pt;
    /* Keep an anchor jump from landing the banner flush under the site header. */
    scroll-margin-top: 90px;
}
.form-line-error-banner .form-line-error-row {
    margin: 2px 0;
    line-height: 1.4;
}
/* Flash the banner after a summary-link jump so the eye lands on it. The JS
   summary handler toggles .wf-flash (it intercepts the click so no #fragment is
   set, hence :target won't fire); :target stays as a no-JS fallback. */
.form-line-error-banner:target,
.form-line-error-banner.wf-flash {
    animation: wf-error-flash 1.4s ease-out 1;
}
@keyframes wf-error-flash {
    0%   { background-color: #f3a99f; }
    100% { background-color: #fdecea; }
}

/* Recolor the erroring control's OWN border red and thicken it to 2px, rather
   than drawing a second outline ring around the existing black border. A text
   input's default border is already ~2px, so this is (near) zero layout shift;
   it just turns red. !important to beat the per-control border rules
   (.form-input, the dropzone's dashed border, the choices-list border, …). */
.field-error-outline {
    /* Bright red — matches the .form-setup-error inline error text (`red`),
       not the darker banner/summary brick red (#c0392b). */
    border: 2px solid red !important;
    background-color: #fff6f5;
}
/* Wrapper spans (only rendered while erroring) around controls with no border
   of their own — a radio-button group, or a checkbox + its label — so the red
   border lands on the group as a whole. */
.radio-group-error-wrap,
.checkbox-error-wrap {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 6px;
}

.form-edit-left-bar {
    background-color: white;
    padding: 3px 5px 0 5px;
    min-width: 110px;
    border-right: none !important;
}
.form-edit-right-bar {
    background-color: white;
    padding: 3px 5px 0 5px;
    border-left: none !important;
}


/* responsive layout - when the screen is less than 400px wide, stack the
   label and input (each spanning both grid columns) so a narrow field
   label doesn't leave an empty column to the right of the input.
   Forms can opt out by adding the .no-stack class on .form-outer-container
   (set via the disable_narrow_screen_stacking parameter to render_web_form_html). */
@media screen and (max-width: 400px) {
  .form-outer-container:not(.no-stack) .element-text-container {
      text-align: left;
      border-bottom: none;
      padding-bottom: 0;
      grid-column: span 2;
  }
  .form-outer-container:not(.no-stack) .input-container {
      grid-column: span 2;
  }
}

.user-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    justify-content: space-between;
    padding: 3px 5px;
    font-size: 11pt;
}

.user-form-list > div:nth-child(odd) {
    background-color: #eee;
}

.key-data-label {
    background-color: #8484ff;
    color: white;
    border-radius: 6px;
    display: inline-block;
    font-weight: bold;
    font-size: 7pt;
    padding: 2px 6px;
    height: 18px;
    line-height: 18px;
    margin-right: 3px;
}

.web-form-attribute-display {
    color: #2C7AE1;
    cursor: default;
}

/* Shrink-wraps the Manage Web Forms screen to the table's natural width
   (capped at the page) instead of stretching the grid across the whole
   screen. The title row, New Web Form button, and filter box live INSIDE
   this wrapper so their right edges track the table's right edge. */
.web-form-list-wrap {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

.web-form-list {
  display: grid;
  /* Every column auto-sizes to its content — no fixed widths, since the
     name/attributes columns hold arbitrary text. A column a site doesn't
     populate (e.g. SRL hides [Edit Attributes]) collapses to just its cell
     padding. When the viewport caps .web-form-list-wrap, cells wrap. */
  grid-template-columns: auto auto auto auto auto;
  row-gap:    0;
  font-size: 11pt;
}

.web-form-list-item {
    /* The right padding doubles as inter-column breathing room — a real
       column-gap would cut visible seams into the alternating row striping,
       because the stripe background is painted per cell. */
    padding: 3px 14px 3px 5px;
}

.web-form-row {
    display: grid;
    column-gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 5px;
    font-size: 11pt;
}

.web-form-name {
    font-weight: bold;
}

.pdf-view-div {
  	height: 900px;
	width: 100%;
    min-width: 500px;
	resize: both;
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 30px;
}

/* Only PDFs (iframe) need the fixed 900px viewer box. Images (which size
   themselves, max-width:100%) and kind 'other' (just a download link)
   collapse to content height instead, and drop the min-width so they never
   overflow a narrow form box. */
.pdf-view-div.file-preview-compact {
	height: auto;
	min-width: 0;
	resize: none;
	margin-bottom: 10px;
}

.pdf-view-iframe {
	width: 100%;
	height: 100%;

}
.read-only {
  background-color: var(--form-accent);
  background-color: color-mix(in srgb, var(--form-accent) 45%, transparent);
}

.user-form-event-date {
    display: inline-block;
    min-width: 80px;
}

/*                    */
/* File Upload Styles */
/*                    */

.dropzone-upload-container {
  padding: 10px;
  border: 1pt dashed black;
  margin: 1px 4px 0 0;
  background-color: white;
  border-radius: 6px;
}

/*                   */
/* My Account Styles */
/*                   */

.awaiting-data-entry {
   color: #B20000;
}
.awaiting-submission {
   color: #B20000;
}
.awaiting-euro-review {
   color: green;
}
.complete {
   color: green;
}

/*                      */
/* Review Screen Styles */
/*                      */

.euro-review-form-list {
    font-size: 11pt;
    border: 1pt solid grey;
    border-radius: 6px;
    border-spacing: 0;
}

.euro-review-form-list th {
    background-color: #e3e3e3;
    padding: 2px 20px 0px 5px;
    font-weight: bold;
    font-size: 10pt;
    color: #333333;
    vertical-align: bottom;
    line-height: 14pt;
}

.euro-review-form-list .even-row {
    background-color: #fafafa;
}

.euro-review-form-list  td {
    border-top: 1pt solid #dcdcdc;
}

.euro-review-grid-cell {
    font-size: 10pt;
    line-height: 14pt;
    padding: 2px 20px 2px 5px;
}

.euro-review-form-block-title {
    margin-bottom: 5px; 
    font-weight: bold; 
    padding: 5px 0 3px 5px;
    background-color: #e3e3e3;
}

.euro-review-grid-comment {
    padding: 0px 0 0 5px;
    border-top: none !important;
    font-size: 9pt;
    color: #646464;
}



/*                     */
/* Admin Screen Styles */
/*                     */

.admin-form-list {
    display: grid;
    grid-template-columns: fit-content(100%) fit-content(100%);
    flex-direction: row;
    font-size: 11pt;
}
.admin-form-list-title {
  background-color: #e3e3e3;
  padding: 2px 5px 2px 7px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.admin-form-list-subtitle {
  background-color: rgba(188, 199, 221, 0.51);
  color: black;
  padding: 0px 0 1px 5px;
  margin: 1px 0 -1px 0;
  font-weight: bold;
  font-size: 10pt;
}
.admin-form-list-form-name {
  padding: 0px 12px 0 5px;
  font-weight: bold;
  text-decoration: none;
}
.admin-form-list-form-count {
  text-align: right;
  padding-right: 10px;
}

.mobile-wrap {
  white-space: nowrap; }
  @media (max-width: 480px) {
    .mobile-wrap {
      white-space: normal; } }


/*           */
/*   Fonts   */
/*           */


/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/lato-v11-latin-300.100dadd6d763.eot");
  /* IE9 Compat Modes */
  src: local("Lato Light"), local("Lato-Light"), url("../fonts/lato-v11-latin-300.100dadd6d763.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v11-latin-300.3e86c4948704.woff2") format("woff2"), url("../fonts/lato-v11-latin-300.6f934cd8100d.woff") format("woff"), url("../fonts/lato-v11-latin-300.ad9795e9e558.ttf") format("truetype"), url("../fonts/lato-v11-latin-300.1aed0c80f99d.svg#Lato") format("svg");
  /* Legacy iOS */ }
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lato-v11-latin-regular.dc7b7052df5c.eot");
  /* IE9 Compat Modes */
  src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/lato-v11-latin-regular.dc7b7052df5c.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v11-latin-regular.6748e0e1c0be.woff2") format("woff2"), url("../fonts/lato-v11-latin-regular.f137ee486278.woff") format("woff"), url("../fonts/lato-v11-latin-regular.c45152a20fca.ttf") format("truetype"), url("../fonts/lato-v11-latin-regular.ee3a1c8ce9d9.svg#Lato") format("svg");
  /* Legacy iOS */ }
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/lato-v11-latin-700.43a8fa5531f2.eot");
  /* IE9 Compat Modes */
  src: local("Lato Bold"), local("Lato-Bold"), url("../fonts/lato-v11-latin-700.43a8fa5531f2.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v11-latin-700.649e18eb6a85.woff2") format("woff2"), url("../fonts/lato-v11-latin-700.fd373951a3af.woff") format("woff"), url("../fonts/lato-v11-latin-700.a30435e0c5ed.ttf") format("truetype"), url("../fonts/lato-v11-latin-700.cfdfec6d275f.svg#Lato") format("svg");
  /* Legacy iOS */ }
/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/lato-v11-latin-900.4f7ab788ecdf.eot");
  /* IE9 Compat Modes */
  src: local("Lato Black"), local("Lato-Black"), url("../fonts/lato-v11-latin-900.4f7ab788ecdf.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v11-latin-900.f377f4433f32.woff2") format("woff2"), url("../fonts/lato-v11-latin-900.c208c9784584.woff") format("woff"), url("../fonts/lato-v11-latin-900.01f5fcc5ad6e.ttf") format("truetype"), url("../fonts/lato-v11-latin-900.030643bf98d2.svg#Lato") format("svg");
  /* Legacy iOS */ }


/*                          */
/*   User Messages Styles   */
/*                          */

.user-messages-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
 }

.user-messages {
  box-sizing: border-box;
  color: #d03b35;
  font-size: 1.2em;
  line-height: 1.2em;
  width: 100%;
  margin-bottom: 10px; }

/* Dialog/modal styles moved to message_dialog.css (loaded by message_dialog.html). */

/* Legacy vertical sidebar rules moved out to site-specific CSS.
   Horizontal navbar styles live in caltechy-main.css and euroapp-main.css. */

.tiny-section-label-under-hr {
  font-size: 8pt;
  color: #656565;
  margin: -3px 0 0 1px;
}




/* ------------------------------------------------------- */
/*                                                         */
/*   Not yet sorted / refactored / or leagacy CSS styles   */
/*                                                         */
/* ------------------------------------------------------- */

.nav-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  padding: 0;
  width: 100%; }

.mobile-menu-margin {
  margin-bottom: 315px; }

.header-right {
  position: absolute;
  right: 15px;
  top: 10px;
   }
  @media (max-width: 768px) {
    .header-right {
      float: none;
      text-align: right;
      z-index: 999999;
      margin-top: 5px; } }

#open {
  display: none; }

@media (max-width: 768px) {
  nav {
    display: block;
    background-color: #1d1d1d;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .5s ease;
    margin-bottom: 30px;
    width: 100%; } }
  @media (max-width: 768px) and (max-width: 560px) {
    nav {
      margin-top: -9px; } }

nav > a {
  color: #92b800;
  font-size: 20px;
  position: relative;
  display: inline-block;
  line-height: 1em;
  margin: 65px 0 0 30px;
  text-decoration: none; }


a:hover {
  color: red; }

.sign-out-link {
  float: right; 
  color: white !important; 
  font-weight: bold; 
  text-decoration: none;
}

.sign-out-link:hover {
  color: #FFAAAA !important;
  text-decoration: underline;
}

.shrinking-nav {
  display: none; }
  @media (max-width: 768px) {
    .shrinking-nav {
      display: inline-block;
      margin-top: 5px;
      text-align: center; }
      .shrinking-nav a {
        color: #92b800;
        font-size: 20px;
        margin: 0 0 0 20px;
        text-decoration: none; }
        .shrinking-nav a:hover {
          color: #a23735; } }
    @media (max-width: 768px) and (max-width: 640px) {
      .shrinking-nav a {
        font-size: 18px; } }
  @media (max-width: 768px) {
        .shrinking-nav a:first-of-type {
          margin: 0; } }


a.active {
  color: #a23735;
  font-weight: 700; }
  a.active:hover {
    color: #a23735; }

a.mobile-active {
  color: #a23735; }
  a.mobile-active:hover {
    color: #a23735; }

.footer {
  color: #fff;
  background-size: 100% 100%;
  margin-top: 30px;
  padding: 30px;
  box-sizing: border-box;
  width: 100%; }
  @media (max-width: 640px) {
    .footer {
      padding: 30px 30px 0 30px; } }

.footer-container-nav {
  color: #fff;
  background: #254151;
  flex: 0 0 auto;
  border-top: 1px solid #ffffff; }


footer {
  font-size: 15px;
  font-weight: 100;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0; }

.error-message {
  color: #e9322d;
  font-size: 14px;
  font-weight: 700;
  float: right;
  margin-right: 5px;
  margin-top: -3px;
  padding: 3px 0; }
  @media (max-width: 360px) {
    .error-message {
      float: none;
      display: block;
      padding: 5px 0 0; } }

.error-capture-message {
  background-color: #e9322d;
  color: #ffffff;
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin: 10px auto;
  padding: 3px 0;
  max-width: 400px;
  width: 100%; }

.error-icon {
  display: inline-block;
  width: 18px;
  height: auto;
  margin: 0 2px -2px 2px; }

.cas-input {
  background: #fefefe;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  color: #838383;
  font-size: 1em;
  padding: 10px;
  width: 100%;
  margin: 5px auto 15px; }

.input-label {
  display: block;
  padding-bottom: 5px; }


@media (max-width: 640px) {
  .mobile-remove {
    display: none; } }


label.error-box > input {
  border: 2px dashed #cd3129;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.error-message {
  color: #cd3129;
  font-size: 14px;
  font-weight: 700;
  float: right;
  margin-right: 5px;
  margin-top: -3px;
  padding: 3px 0; }
  @media (max-width: 360px) {
    .error-message {
      float: none;
      display: block;
      padding: 5px 0 0; } }

.error-icon {
  display: inline-block;
  width: 18px;
  height: auto;
  margin: 0 2px -2px 2px; }


.event-tile {
    display: inline-block;
    border: 2px solid darkgrey;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #e0f2fa;
    max-width: 500px;
    color: black !important;
    text-decoration: none;
}
.event-tile:hover {
    background-color: lightgrey;
}

.payment-tile {
    background-color: #ffe9e9 !important;
}
.payment-tile:hover {
    background-color: #ffbcbc !important;
}



/* "Go To" jump-link next to a resolved flag_show_unique_id_link value on a
   form detail. align-self centers it against the (taller) input/select in the
   flex .input-container. The margin is sized for the value rendered as bare
   text (read-only forms, auto_filled_value fields) — with no input-box border
   separating them, anything tighter reads as the link touching the value. */
.srl-goto-link {
    margin-left: 12px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    align-self: center;
}

/* Broken cross-reference marker (flag_show_unique_id_link value resolves to
   zero/multiple records). Mirrors BE's .caution_note-indicator look.
   align-self centers it against the input/select on form details (flex
   .input-container); in inline contexts (list-view cells) it's ignored and
   the marker sits on the text baseline. */
.srl-id-link-broken {
    color: red;
    font-weight: 900;
    display: inline-block;
    margin-left: 2px;
    font-size: 12pt;
    line-height: 1;
    align-self: center;
    padding: 1px 4px;
    cursor: help;
}
.srl-id-link-broken:hover {
    background-color: #0000001a;
}