/* ──────────────────────────────────────────────────────────────────
   Form button palette. Matches the historical defaults from
   web_forms/static/web_forms/css/web_forms_main.css so site_euroapp's
   buttons are unchanged; defined explicitly here so every site owns its
   own button tokens rather than relying on the partial-template fallback.
   ────────────────────────────────────────────────────────────────── */
:root {
    --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, header, 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;
  background-color: #f5ebd7; }

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-weight: 900;
  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;
}

/*------------------------- */
/*                          */
/* Euro App specific styles */
/*                          */
/*------------------------- */

/*                */
/* 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 {
  display: flex;
}

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

.site-name-header {
    border-left: 2pt solid #9D9795;
    height: 33px;
    padding-left: 20px;
    margin-left: 5px;
    color: white;
    font-weight: bold;
    margin-top: 20px;
    font-size: 18pt;
}
@media (max-width: 550px) {
    .site-name-header {
        font-size: 13pt;
    }
}

.sign-in-form-wrapper {
    max-width: 340px;
    margin-left: 15px;
}
@media (max-width: 550px) {
    .sign-in-form-wrapper {
        margin-left: 0;
    }
}


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

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

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


.read-only-form .input-container,
.read-only-form .element-text-container,

.read-only-form .input-container,
.read-only-form .element-text-container {
    padding: 0px 5px 0px 12px;
}

.agreement-element {
    padding: 5px 0 5px 12px;
    font-size: 10pt;
    line-height: 13pt;
    /*grid-column: span 2;*/
    color: black;
    background-color: #ffffff;
    border: 3px solid #dfd6c3;
}

.letter-title {
    margin-top: 20px;
    text-align: center;
}

.agreement-element ul {
    margin-top: 10px;
    margin-bottom: 0px;
}

/* responsive layout - when the screen is less than 400px wide, make the two columns stack on top of each other instead of next to each other.
   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-container {
    grid-template-columns: 1fr;
  }
  .form-outer-container:not(.no-stack) .element-text-container {
      text-align: left;
      border-bottom: none;
      padding-bottom: 0;
  }
  .form-outer-container:not(.no-stack) .input-container {
      grid-column: span 2;
  }
}

/* ========================================================================== */
/*  Horizontal Navbar — EURO (brown variant)                                   */
/* ========================================================================== */
.page-content-container {
    display: block;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

.navbar {
    border-bottom: 1px solid transparent;
    width: 100%;
    box-sizing: border-box;
    font-family: "Public Sans", system-ui, -apple-system, sans-serif;
}
.navbar__inner {
    padding: 0 60px;
    display: flex;
    align-items: stretch;
}
.navbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex: 1;
}
.navbar__list > li { display: flex; align-items: stretch; margin: 0; }
.navbar__link {
    display: inline-flex;
    align-items: center;
    padding: 13px 14px 10px 14px;
    font-size: 13pt;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: color 0.12s, border-color 0.12s;
}
.navbar__group-label {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.navbar__sep {
    width: 1px;
    margin: 10px 6px;
    background: currentColor;
    opacity: 0.25;
    flex: 0 0 1px;
}
.navbar__empty { padding: 12px 16px; color: #6b6b6b; }
.navbar__toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 12px 14px;
    margin-left: auto;
    cursor: pointer;
    color: inherit;
    flex-direction: column;
    gap: 4px;
    align-self: center;
}
.navbar__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Variant: EURO (brown/tan background, dark text — keeps existing palette) */
.navbar--euro {
    background: #d3b88d;
    color: #212121;
    border-bottom: 1px solid #b89a6d;
}
.navbar--euro .navbar__link,
.navbar--euro .navbar__link:link,
.navbar--euro .navbar__link:visited { color: #212121; }
.navbar--euro .navbar__link:hover { color: #6b2d2d; }
.navbar--euro .navbar__link.is-active {
    color: #1c1c1c;
    text-decoration: underline;
    text-decoration-color: #6b2d2d;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Narrow-screen nav — links wrap to additional rows instead of collapsing to a hamburger. */
.navbar__toggle { display: none !important; }

/* Override legacy `nav { height: 0; overflow: hidden; ... }` rules further down in this
   file (they drive the old mobile hamburger pattern). `nav.navbar` specificity (0,1,1)
   beats the legacy bare `nav` rule (0,0,1). */
nav.navbar { height: auto; overflow: visible; margin: 0; }

@media (max-width: 768px) {
    nav.navbar { height: auto; overflow: visible; margin: 0; }
    .navbar__inner { padding: 0 20px; }
    .navbar__link { padding: 11px 12px; }
    .navbar__group-label { padding: 6px 12px; max-width: none; }
    .navbar__sep { display: none; }
}
@media (max-width: 420px) {
    .navbar__link { padding: 10px 10px; }
}

/* Legacy sidebar selectors kept only to suppress any stray markup. */
#menu-container, .shrinking-menu-container { display: none !important; }
.active-path { color: inherit; }

.about-this-site-link {
    text-decoration: none;
    padding-right: 3px;
    padding-left: 10px;
}
.about-this-site-link:hover {
    text-decoration: underline;
    color: red;
}


/* ========================================================================== */
/*  Site shell — max-width container wrapping header + page-shell.            */
/*  Outside the shell (letterbox) is body bg (tan); inside varies by page:    */
/*    default                      → white  (admin / data pages)              */
/*    .site-shell--public          → paper/cream (public-facing pages)        */
/*  Pages opt into `--public` via the `site_shell_variant` template block.    */
/*  `max-width` is set inline per-page via the `max_content_width` block      */
/*  (default 1300px; admin pages can override to `none` for full-width).      */
/* ========================================================================== */
.site-shell {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.site-shell--public {
    background-color: #fbfaf7;   /* paper / cream for public-facing EURO pages */
}

/* ========================================================================== */
/*  Page shell — picks layout based on whether user is staff.                 */
/* ========================================================================== */
.page-shell { width: 100%; box-sizing: border-box; flex: 1; }

.page-shell--topnav { display: block; }
.page-shell--topnav > .page-content-container { display: block; }

.page-shell--sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.page-shell--sidebar > .sidebar-nav { flex: 0 0 160px; }
.page-shell--sidebar > .page-content-container {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* ========================================================================== */
/*  Vertical Sidebar Nav — EURO (tan / brown palette)                         */
/* ========================================================================== */
.sidebar-nav {
    background: #fff;
    padding: 22px 14px 24px;
    font-family: "Public Sans", system-ui, -apple-system, sans-serif;
    position: relative;
    box-sizing: border-box;  /* so `width: 100%` on mobile stays inside the viewport */
}
.site-shell--public .sidebar-nav { border-right: 1px solid #d9d9d9; }
.sidebar-nav *, .sidebar-nav *::before, .sidebar-nav *::after { box-sizing: border-box; }
.sidebar-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav__empty { padding: 12px 10px; color: #6b6b6b; font-size: 13px; }

.sidebar-nav__link,
.sidebar-nav__link:link,
.sidebar-nav__link:visited {
    display: block;
    padding: 4px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #212121;
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: 0 4px 4px 0;
    margin-left: -14px;
    padding-left: 14px;
    line-height: 1.25;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sidebar-nav__link:hover {
    background: #f2e2bf;
    color: #6b2d2d;
}
.sidebar-nav__link.is-active {
    background: transparent;
    border-left-color: transparent;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #6b2d2d;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.sidebar-nav__divider {
    height: 1px;
    background: #d9d9d9;
    margin: 12px 0 8px;
}
.sidebar-nav__divider--labelled {
    height: auto;
    background: transparent;
    border-top: 1px solid #d9d9d9;
    padding: 12px 0 4px;
    margin: 10px 0 4px;
    font-family: Lato, sans-serif;
    font-size: 10.5px;
    color: #7a6a47;
    line-height: 1.35;
    word-break: break-word;
}

.sidebar-nav__more-toggle { display: none; }
.sidebar-nav--euro { /* palette already applied via .sidebar-nav base */ }

/* ------ Mobile: sidebar collapses to a single horizontal row + `More` ------ */
@media (max-width: 768px) {
    .page-shell--sidebar { flex-direction: column; }
    .page-shell--sidebar > .sidebar-nav { flex: 0 0 auto; width: 100%; }

    .sidebar-nav {
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .sidebar-nav__list {
        flex: 0 1 auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 2px;
        max-height: 30px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .sidebar-nav.is-more-open .sidebar-nav__list { max-height: 1200px; }
    .sidebar-nav__link,
    .sidebar-nav__link:link,
    .sidebar-nav__link:visited {
        margin-left: 0;
        padding: 6px 12px;
        border-left: none;
        border-radius: 0;
        font-size: 14px;
        line-height: 1.25;
    }
    .sidebar-nav__link.is-active {
        background: transparent;
        font-weight: 700;
    }
    .sidebar-nav__divider { width: 100%; flex-basis: 100%; margin: 4px 0; }
    .sidebar-nav__divider--labelled {
        width: 100%;
        flex-basis: 100%;
        border-top: none;
        padding: 6px 12px 4px;
        margin: 4px 0 0;
        font-size: 10px;
    }
    .sidebar-nav__more-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        background: transparent;
        border: none;
        padding: 6px 12px;
        margin: 0;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        color: #212121;
        cursor: pointer;
    }
    .sidebar-nav__more-toggle:hover { color: #6b2d2d; }
    .sidebar-nav__more-icon { transition: transform 0.2s; }
    .sidebar-nav.is-more-open .sidebar-nav__more-icon { transform: rotate(180deg); }
}




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

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

header {
  width: 100%;
  background: #000000;
  -webkit-transition: margin-bottom .5s ease;
  padding-top: 3px;
padding-bottom: 10px;}
  @media (max-width: 768px) {
    header {
      /*height: $nav-height +29px;*/ } }

.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; }