/* Colors for different modes (Night/Day or EAA) */
:root {
  color-scheme: light dark;
}
:root {
  color-scheme: light;

  --app-bg: #f5f7fb;
  --app-bg-alt: #ffffff;
  --app-bg-deep: #0b1020;

  --app-text-main: #111827;
  --app-text-muted: #6b7280;
  --app-text-invert: #f9fafb;

  --app-primary: #2563eb;
  --app-primary-soft: rgba(37, 99, 235, 0.12);
  --app-primary-border: rgba(37, 99, 235, 0.4);

  --app-outline: #4f76cc;
  --app-outline-soft: rgba(113, 144, 211, 0.12);
  --app-outline-border: rgba(126, 150, 201, 0.4);

  --app-card-border: rgba(15, 23, 42, 0.08);
  --app-shadow-soft: 0 15px 30px rgba(15, 23, 42, 0.12);

  --app-input-bg: #f9fafb;
  --app-input-border: #d1d5db;
  --app-footer-bg: #020617;
  --app-footer-text: #9ca3af;

  --hex-ffffff: #ffffff;
  --hex-000000: #000000;
  --hex-333333: #333333;
  --hex-999999: #999999;
  --hex-aaaaaa: #aaaaaa;
  --hex-cccccc: #cccccc;
  --hex-dddddd: #dddddd;
  --hex-eeeeee: #eeeeee;
  --hex-efefef: #efefef;
  --hex-3489cd: #3489cd;
  --hex-004499: #004499;
  --rgb-255-155-0: rgb(255, 155, 0);
  --rgba-192-192-192--0-75: rgba(192, 192, 192, .75);
  --rgba-0-0-0--0-03: rgba(0, 0, 0, .03);
  --rgba-0-0-0--0-15: rgba(0, 0, 0, .15);
  --rgba-0-0-0--0-25: rgba(0, 0, 0, .25);
  --rgba-0-0-0--0-3: rgba(0, 0, 0, .3);
  --rgba-30-90-200-3: rgba(30, 90, 200, 0.3);

  /* Bootstrap custom variables */
  --bs-box-my-shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  --bs-box-shadow-sm:0 0.15rem 0.30rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  --bs-primary: #0d6efd;
  --bs-body-bg: #fff;
  --bs-body-color: #000;
}
.dark-mode {
  color-scheme: dark;

  --app-bg: #020617;
  --app-bg-alt: #020617;
  --app-bg-deep: #020617;

  --app-text-main: #e5e7eb;
  --app-text-muted: #9ca3af;
  --app-text-invert: #f9fafb;

  --app-primary: #38bdf8;
  --app-primary-soft: rgba(56, 189, 248, 0.14);
  --app-primary-border: rgba(56, 189, 248, 0.55);

  --app-outline: #38bdf8;
  --app-outline-soft: rgba(56, 189, 248, 0.14);
  --app-outline-border: rgba(56, 189, 248, 0.55);

  --app-card-border: rgba(148, 163, 184, 0.3);
  --app-shadow-soft: 0 15px 30px rgba(15, 23, 42, 0.9);

  --app-input-bg: #020617;
  --app-input-border: #1e293b;
  --app-footer-bg: #000000;
  --app-footer-text: #9ca3af;

  --hex-ffffff: #121212;
  --hex-000000: #ffffff;
  --hex-333333: #cccccc;
  --hex-999999: #656565;
  --hex-aaaaaa: #aaaaaa;
  --hex-cccccc: #cccccc;
  --hex-dddddd: #222222;
  --hex-eeeeee: #111111;
  --hex-efefef: #101010;
  --hex-3489cd: #3489cd;
  --hex-004499: #b4c9e2;
  --rgb-255-155-0: rgb(255, 155, 0);
  --rgba-192-192-192--0-75: rgba(63, 63, 63, .75);
  --rgba-0-0-0--0-03: rgba(255, 255, 255, .03);
  --rgba-0-0-0--0-15: rgba(255, 255, 255, .15);
  --rgba-0-0-0--0-25: rgba(255, 255, 255, .25);
  --rgba-0-0-0--0-3: rgba(255, 255, 255, .3);
  --rgba-30-90-200-3: rgba(240, 220, 210, 0.3);

  /* Bootstrap custom variables */
  --bs-primary: #1255bb;
  --bs-body-bg: #121212;
  --bs-body-color: #eaeaea;
}

/* If we need support for legacy browsers and variable usage fallback, we run the script to replace each
   var() with the value from the above css variables list and save the .css file with the direct values */

/* Adjustment for footer and containers */
html {
  height:100%;
}

/* Avoid white space in top/bottom and left/right of the page */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: scroll;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
               "Noto Sans", sans-serif;
  font-size: 1rem; /* 15px */
  line-height: 1.5;
  background: radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 55%),
              radial-gradient(circle at bottom, rgba(56, 189, 248, 0.1), transparent 55%),
              var(--app-bg);
  color: var(--app-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.prev-ver {
  color: var(--app-text-main);
}

/* Smooth loading page */
.trandiv {
  width: 100%;
  opacity: 0; /* 0 in production for fade load effect */
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
}
.trandiv.is-loaded { opacity: 1; }
.htitle {
  display: block;
  margin: 0.0vh 0 2vh;
  width: 0%;
  height: 2px;
  border: 0;
  background-color: rgba(0,0,0,0.85);
  transition: all 1.0s ease;
  transition-delay: 0.1s;
}
.htitle.is-loaded { width: 100%; }

/* Page packground effects */
.mobBackStyleC {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  opacity: 0.5;
  background: url(images/calend3d.png);
  background-position: 107% 95%;
  background-size: 40vh;
  background-repeat: no-repeat;
}

/* Basic links */
.href-blue {text-decoration: none; color: #0059b3;}
.href-blue:visited {text-decoration: none; color: #0059b3;}
.href-blue:hover {text-decoration: none; color: #1a8cff;}
body.dark-mode .href-blue {text-decoration: none; color: #ffffff;}
.href-none {text-decoration: none;}
.href-none:visited {text-decoration: none;}
.href-none:hover {text-decoration: none; color: #1a8cff;}
body.dark-mode .href-none {text-decoration: none; color: #ffffff;}

/* Max container for main content */
.layout-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Header and Navbar */
.nav-item {
  padding: 0;
}
.app-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.app-header {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(37, 99, 235, 0.96));
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  position: sticky;
  padding: 0 10px 0 10px;
  top: 0;
  z-index: 1001;
}
.app-header .navbar-brand {
  padding-right: 30px;
}
.app-navbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.app-logo {
  color: var(--app-text-invert);
  letter-spacing: 0.04em;
  white-space: normal;
  text-transform: uppercase;
  font-size: 0.9rem;
  gap: 0.75rem;
  max-width: 25rem;
}
.app-logo:hover {
  color: var(--app-text-invert);
}
.app-logo-mark {
  flex-shrink: 0;
}
.app-logo-img {
  max-height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.45));
  border-radius: 3px;
  box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; /* anti-aliasing */
}
.app-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: normal;
  max-width: 17rem;
}
.app-logo-title {
  display: block;
}
.app-logo-university {
  display: block;
  margin-top: 0.40rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-family: Helvetica, sans-serif;
  text-transform: uppercase;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-nav-links .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  padding: 0.35rem 0.75rem;
}
.app-nav-links .nav-link,
.app-nav-right .nav-link {
  color: rgba(248, 250, 252, 0.88);
  font-size: 0.9rem;
}
.app-nav-links .nav-link:hover,
.app-nav-right .nav-link:hover {
  color: #ffffff;
}
.app-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.40rem;
  min-width: 25rem;
}
.app-nav-links .nav-link.active {
  color: #ffffff;
  position: relative;
}
.app-nav-links .nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 85%;
  height: 2px;
  background-color: var(--app-primary);
  border-radius: 999px;
}
.app-navbar-toggler {
  border-color: rgba(148, 163, 184, 0.6);
  padding: 0.4rem 0.4rem;
}
.app-navbar-toggler .navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
}
body.eaa-mode .app-navbar-toggler {
  background-color: #fff;
}
body.eaa-mode .navbar-toggler-icon {
  filter: invert(1);
}
.app-navbar-toggler .navbar-toggler-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e5e7eb;
  transform: translate(-50%, -50%);
  box-shadow: 0 -8px 0 #e5e7eb, 0 8px 0 #e5e7eb;
}
.lang-button {
  padding: 0;
  background-color: transparent;
  border: none;
}
.lang-img {
  vertical-align: middle;
  margin-bottom: 3px;
  border-radius: 3px;
  border: 1px solid rgb(180, 186, 192);
  max-height: 18px;
  box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; /* anti-aliasing */
}
body.eaa-mode .lang-img { max-height: 30px; }

/* Buttons */
.app-btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary-border);
  color: var(--app-text-invert);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 5px 10px rgba(37, 99, 235, 0.45);
}
.app-btn-primary:hover {
  background: #0ea5e9;
  color: #f9fafb;
}
.app-btn-outline {
  background: var(--app-outline);
  border-color: var(--app-outline-border);
  color: var(--app-text-invert);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 5px 10px rgba(37, 99, 235, 0.45);
}
.app-btn-outline:hover {
  background: #0ea5e9;
  color: #f9fafb;
}
.app-theme-toggle {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.35);
  color: #e5e7eb;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}
.app-theme-toggle:hover {
  background: rgba(15, 23, 42, 0.3);
}
.app-eaa-toggle {
  border-radius: 999px;
  border: 1px solid rgba(14, 106, 235, 0.7);
  background: rgba(9, 72, 218, 0.897);
  color: #e5e7eb;
}
.app-eaa-toggle:hover {
  background: rgba(51, 105, 233, 0.87);
}
body.eaa-mode .app-eaa-toggle {
  height: 7vh !important;
}
.eaa-icon {width: 4vh; filter: invert(1); }
body.eaa-mode .eaa-icon { width: 6vh; }
body.dark-mode .eaa-icon { filter: invert(0); }

/* Main */
.app-main {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* Background image */
.app-main-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: -1;
}
.app-main-bg-img {
  transform: translateY(-250px);
  max-height: 250px;
  min-height: 150px;
  border-radius: 1rem;
  height: auto;
  width: auto;
  opacity: 0.15;
  filter:
    grayscale(1)
    contrast(1.1)
    brightness(1.2)
    sepia(1)
    hue-rotate(190deg)
    saturate(3);
  mix-blend-mode: screen;
}
body.dark-mode .app-main-bg-img {
  opacity: 0.10;
}

/* Cards / Boxes */
.app-card {
  background: radial-gradient(circle at top, rgba(37, 99, 235, 0.11), transparent 50%),
              var(--app-bg-alt);
  border-radius: 1.5rem;
  border: 1px solid var(--app-card-border);
  box-shadow: var(--app-shadow-soft);
  padding: 2rem 2.25rem;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* to avoid overlapping gradient colors due to ::before and keep same color effect */
}
.app-login-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(59, 130, 246, 0.02)),
              var(--app-bg-alt);
}
.app-inner-card {
  background: linear-gradient(135deg, rgba(41, 95, 211, 0.1), rgba(68, 136, 245, 0.02)),
              var(--app-bg-alt);
}
.app-inner-card.mob-row { border-radius: 10px; }
.app-list-card {
  background: linear-gradient(135deg, rgba(68, 113, 212, 0.03) 30%, rgba(255, 255, 255, 0.6) 100%),
              transparent;
}
.app-list-card.mob-row { border-radius: 10px; }
.app-card-single {
  width: 100%;
}
.app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 55%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1; /* to avoid overlapping gradient colors due to ::before and keep same color effect */
}
.app-card > *{  /* keeps content above due to ::before z-index */
  position: relative;
  z-index: 1;
}
/* Τίτλοι */
.app-title {
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.4rem);
  font-weight: 700;
}

/* Stat boxes */
.app-stat-box {
  background: var(--app-primary-soft);
  border-radius: 1.2rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-primary-border);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 0px;
  height: 100%;
  box-shadow: 0 6px 12px rgba(67, 78, 104, 0.25);
}
.app-stat-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-text-muted);
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  word-spacing: 50px;
}
/* Main card title and buttons */
.app-card-title__text { min-width: 0; }
.app-card-head {
  display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 1rem; row-gap: .75rem;
}
.app-card-head .app-card-title { margin: 0; }
.app-card-head .app-card-top-btn { justify-self: end; }
.app-card-head .app-card-top-btn { width: 100%; display: flex; }
.app-card-head .app-card-top-btn form { margin-left: auto; }
.app-card-head .app-card-top-btn { justify-content: flex-end; }
.app-card-head { grid-auto-flow: row; }
.app-card-top-btn { grid-column: 2; }
@media (max-width: 6px) {
  .app-card-top-btn { grid-column: 1 / -1; justify-content: center; }
}

/* Login card */
.app-card-title {
  font-size: 1.5rem;
  font-weight: 600;
}
.app-card-subtitle {
  color: var(--app-text-muted);
}
/* Inputs */
.app-input {
  background-color: var(--app-input-bg);
  border-color: var(--app-input-border);
  color: var(--app-text-main);
  border-radius: 5px;
  font-size: 1rem;
  height: 40px;
}
.app-input:focus {
  background-color: var(--app-input-bg);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 1px var(--app-primary-soft), 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
  color: var(--app-text-main);
}
body.dark-mode .app-input::placeholder {
  color: #6b7280;
}
/* 2fa */
.code2fa{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.code2fa__box{
  text-align: center;
  width: 3rem;
  max-width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  padding: 0;
}
/* Mobile Responsive */
@media (max-width: 600px){
  .code2fa{
    gap: 0.35rem;
    justify-content: space-between;
  }
  .code2fa__box{
    width: 2.5rem;
    max-width: 2.5rem;
    height: 2.75rem;
    font-size: 1.15rem;
  }
}
/* Alert */
.app-alert {
  color: #d66b13;
  min-height: 30px;
}
.app-alert-2 {
  color: #d66b13;
  min-height: 50px;
}

/* Form rows */
.app-card .mob-row.row.align-items-center.w100p {
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: 0; /* For classic line seperator 1px solid rgba(15, 25, 45, 0.2); */
  border-radius: 0;
  position: relative;
}
.app-card .mob-row.row.align-items-center.w100p::after { /* For gradient line seperator */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(
    to right, transparent 0%, var(--rgba-30-90-200-3) 5%, var(--rgba-30-90-200-3) 95%, transparent 100%
    );
  filter: blur(1px);
}
.app-card .mob-row.row.align-items-center.w100p:last-of-type {
  border-bottom: 0;
}
.app-card .form-control,
.app-card select.selectbox {
  border-color: rgba(15, 23, 42, 0.18);
  background-color: rgba(255,255,255,0.95);
}
body.dark-mode .app-card .form-control,
body.dark-mode .app-card select.selectbox {
  background-color: rgba(2,6,23,0.85);
  border-color: rgba(148,163,184,0.35);
}

/* Footer */
.app-footer {
  background: radial-gradient(circle at top, rgba(37, 99, 235, 0.15), transparent 50%),
              var(--app-footer-bg);
  color: var(--app-footer-text);
}
.app-footer-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #e5e7eb;
  margin-bottom: 0.8rem;
}
.app-footer-list li + li {
  margin-top: 0.3rem;
}
.app-footer-list a {
  text-decoration: none;
  color: var(--app-footer-text);
  font-size: 0.88rem;
}
.app-footer-list a:hover {
  color: #e5e7eb;
  text-decoration: underline;
}
.app-footer-bottom {
  font-size: 0.8rem;
}

/* Lists column-like */
.app-rlist-cols-1 { grid-template-columns: 1fr; }
.app-rlist-cols-31 { grid-template-columns: 3fr 1fr; }
.app-rlist-cols-031 { grid-template-columns: auto 3fr 1fr; }
.app-rlist-cols-311 { grid-template-columns: 3fr 1fr 1fr; }
.app-rlist { border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 10px; overflow: hidden; }
.app-rlist.no-border { border: none; border-radius: 0; overflow: visible; }
.app-rlist__head,
.app-rlist__row {
  display: grid; gap: .75rem; align-items: center; padding: 0;
  position: relative; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.app-rlist__head { background: rgba(15, 23, 42, 0.04); font-weight: 600; height: 2rem; }
.app-rlist__row-t { border-top: 1px solid rgba(15, 23, 42, 0.08); }
.app-rlist__row-b { border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.app-rlist__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.app-rlist__btn {
  display: block; width: 100%; text-align: left; padding: .3rem .5rem; border: 0; background: transparent;
  color: var(--hex-004499); white-space: normal;  position: relative; padding-left: 1.25rem;
}
.app-rlist__row:not(.app-rlist-comment-below):hover {
  background: rgba(37, 99, 235, 0.08);
  border-radius: 5px;
  transform: translateY(-1px);
  z-index: 2;
  box-shadow: 0 .5rem 1rem var(--rgba-0-0-0--0-15);
}
.app-rlist__row:not(.app-rlist-comment-below):hover .app-rlist__btn { color: var(--rgb-255-155-0) !important; }
.app-rlist__btn:focus-visible {
  outline: 2px solid var(--app-primary); outline-offset: -2px;
  background: rgba(37, 99, 235, 0.12); color: var(--rgb-255-155-0);
}
.app-rlist__btn:active { background: rgba(37, 99, 235, 0.18); color: var(--rgb-255-155-0); }
.app-rlist__btn::before {
  content: "›"; position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); opacity: .7;
}
.app-rlist__row.app-rlist-comment-below { font-size: 0.9rem; padding: 0 0 1rem 1rem; border: none; }
/* Mobile: stack cells with labels */
@media (max-width: 1024px) {
  .app-rlist__head{ display: none; }
  .app-rlist__row { grid-template-columns: 1fr !important; gap: .35rem; }
  .app-rlist__cell { white-space: normal; overflow: visible; text-overflow: unset; }
  .app-rlist__cell.show-mob-label::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--app-text-muted);
  }
  .app-rlist__cell.text-end { text-align: left !important; }
  .app-rlist-comment-below.ps-5 { padding: 1rem 0 0 0 !important; }
}

/* Smooth fadein/fadeout of cookie banner */
#cookieBanner {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  visibility: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #222;
  color: #fff;
  padding: 15px;
  font-size: 13px;
  z-index: 9999;
}
#cookieText {
  display: inline-block;
  width: 95%;
  font-family:Verdana;
}
#cookieText a {
  text-decoration: none;
  color: #86aedb;
}
#cookieContainer {
  max-width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.btn-cookie {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 5px;
}

/* SMSYS brand */
.app-logo-header {
  padding-left: 5px;
  font-size: 0.75rem;
  color: rgba(248, 250, 252, 0.8);
  white-space: nowrap;
}
.app-platform-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app-platform-logo {
  height: 22px;
  width: auto;
  display: inline-block;
}
.app-logo-footer {
  float: right;
  white-space: nowrap;
}
.smsys-logo {
  border-radius: 3px;
  border: 2px solid #fff;
  margin: 0 10px 0 0px;
  max-height: 25px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .app-logo-university {
    font-size: 0.7rem;
  }
  .app-logo-img {
    width: auto;
    height: auto;
    max-height: 50px;
  }
  .app-navbar {
    position: relative;
  }
  .app-navbar-toggler {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
  .app-card {
    padding: 1.25rem 1.25rem;
  }
  .app-title {
    font-size: 1.65rem;
  }
  .app-stat-box {
    padding: 0.6rem 0.8rem;
  }
}
@media (max-width: 1024px) {
  .app-logo-header {
    display: none !important;
  }
  .app-main-bg-img {
    display: none;
  }
  .app-card {
    border-radius: 1.25rem;
    padding: 1.5rem 1.5rem;
  }
  .app-main {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }
  .app-navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .app-logo-footer {
    /* display: none; */
  }
}
@media (min-width: 600px) and (max-width: 1280px) {
  .app-logo-text {
    font-size: 0.8rem;
    max-width: 10rem;
  }
  .app-logo {
    max-width: 16rem;
  }
  .app-logo-university  {
    display: none;
  }
  .app-platform-li {
    display: none !important;
  }
}
@media (max-width: 1366px) {
  .app-logo-header .app-platform-label {
    display: none;
  }
  .app-nav-right {
    min-width: 5rem;
  }
}
@media (max-width: 1680px) {
  .app-nav-right {
    min-width: 5rem;
  }
}

.cursor-pointer:hover {
  cursor: pointer;
}

/* Bootstrap override */
.form-check-input:not(:checked) { background-color: rgb(255, 255, 255); }
.form-check-input:checked:focus { background-color: var(--hex-3489cd); }
.form-check-input:not(:checked):focus { background-color: rgb(239, 239, 239); }

/* Modal 2FA */
.modal2FA {
  z-index: 999;
  background: var(--rgba-192-192-192--0-75);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease;
  visibility: hidden;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal2FA__bg_mandatory {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: not-allowed;
}
.modal2FA__bg_optional {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.modal2FA-state {
  display: none;
}
.modal2FA-state:checked ~ .modal2FA {
  opacity: 1;
  visibility: visible;
}
.modal2FA-state:checked ~ .modal2FA .modal2FA__inner {
  top: 0;
}
.modal2FA__inner {
  position: relative;
  margin: auto;
  background: var(--hex-ffffff);
  border-radius: 5px;
  padding: 50px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 0 20px var(--rgba-0-0-0--0-3);
}
.modal2FA__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 1em;
  height: 1em;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--hex-aaaaaa);
}
.modal2FA__close:after,
.modal2FA__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: var(--hex-cccccc);
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: 1px 0 0 -1px;
  top: 0;
}
.modal2FA__close:hover:after,
.modal2FA__close:hover:before {
  background: var(--hex-aaaaaa);
}
.modal2FA__close:before {
  transform: rotate(-45deg);
}

/* Modal confirm dialog */
.confirm_modal::backdrop { background-color: rgba(0,0,0,0); transition: background-color 200ms ease; }
.confirm_modal {
  border: none; border-radius: .5rem; padding: 0;
  opacity: 0; transform: translateY(-10px) scale(0.97); transition: opacity 200ms ease, transform 200ms ease;
}
.confirm_modal[open].confirm_modal--visible { opacity: 1; transform: translateY(0) scale(1); }
.confirm_modal[open].confirm_modal--visible::backdrop { background: rgba(0,0,0,.5); }
.confirm_modal__content { padding: 2rem 2.5rem; min-width: 400px; min-height: 15dvh; }
.confirm_modal__title { margin: 0 0 .5rem; font-size: 1.1rem; }
.confirm_modal__text { margin: 0 0 1rem; }
.confirm_modal__actions { display: flex; gap: .5rem; justify-content: flex-end; }
.confirm_modal__btn { padding: .5rem .75rem; border-radius: .375rem; border: 1px solid transparent; }
.confirm_modal__btn:focus { background: #3e56c2; color: #fff; }
/* Modal confirm dialog responsive */
@media (max-width: 599px) {
  .confirm_modal__content { min-width: 0; width: 90vw; padding: 1.5rem; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .confirm_modal__content { min-width: 360px; }
}
@media (min-width: 1024px) {
  .confirm_modal__content { max-width: 480px; }
}

/* From elements (input, select, radio, checkbox, textarea, button */
button, input[type="button"], input[type="submit"] {
  /* margin: 7px; */
  /* padding: 5px; */
  cursor: pointer;
  outline: none !important;
  border-radius: revert;
}
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
  cursor: auto;
  visibility: hidden;
}
input,
select,
textarea {
  outline: none !important;
  transition: box-shadow 0.2s ease;
  background-color: var(--hex-ffffff);
  border: 1px solid var(--hex-aaaaaa);
  color: var(--hex-000000);
  border-radius: 5px;
  height: 28px;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
}
input[type="file"]::file-selector-button {
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
  cursor: pointer;
}
input.form-control::placeholder { color: #b9b9b9; font-size: clamp(13px, 2vw, 14px); }
input.form-control::-webkit-input-placeholder { color: #b9b9b9; font-size: clamp(13px, 2vw, 14px);}
input.form-control::-moz-placeholder { color: #b9b9b9; font-size: clamp(13px, 2vw, 14px); }
input.form-control:-ms-input-placeholder { color: #b9b9b9; font-size: clamp(13px, 2vw, 14px); }
input.form-control:-moz-placeholder { color: #b9b9b9; font-size: clamp(13px, 2vw, 14px); }
input.form-control:focus::placeholder { color: transparent; }
input.form-control:focus::-webkit-input-placeholder { color:transparent; }
input.form-control:focus:-moz-placeholder { color:transparent; }
input.form-control:focus::-moz-placeholder { color:transparent; }
input.form-control:focus:-ms-input-placeholder { color:transparent; }
input:read-only {
  background-color: rgb(233, 236, 239);
}
input:focus:read-only {
  background-color: rgb(233, 236, 239);
}
select.disabled {
  appearance: none;
  background-color: var(--rgba-0-0-0--0-03) !important;
  border-color: rgb(198, 206, 216) !important;
  color: rgb(33, 37, 41);
  box-shadow: none !important;
}
input.form-control:disabled::placeholder { color: transparent; }
input.form-control:disabled { background-color: var(--rgba-0-0-0--0-03); box-shadow: none !important; }
input.form-control:read-only { background-color: var(--rgba-0-0-0--0-03); box-shadow: none !important; }
select.form-control:disabled { background-color: var(--rgba-0-0-0--0-03); box-shadow: none !important; }

/* Fix checkbox labels alignment when wrapping text and font color */
.form-check-label {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.form-check-label input[type="checkbox"] {
  margin-top: 0.2em;
}
.form-check-input:not(:disabled) + .form-check-label:hover { color: var(--rgb-255-155-0); }

.crop-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Required field mark */
.required {
  display: inline-flex;
  align-items: flex-start;
  gap: .25rem;
}
.required::before {
  display: none; /* the asterisk is at the right of the input/select fields */
  content: "*";
  color: var(--bs-danger);
  float: none;
  margin: 0.25em 0.25em 0 0;
  flex: 0 0 auto;
  line-height: 1.2;
}
.required-field::after{
  content: "*";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -.5rem;
  color: var(--bs-danger);
  font-weight: 700;
  pointer-events: none;
}

/* Dynamic rows/columns table-like */
.mob-bar {
  margin: 0 auto 0 auto;
  padding: 0 10px 0 10px;
  border-radius: 15px;
}
.mob-row {
  display: flex;
  flex-wrap: nowrap;
  margin: 0.75rem auto 0.75rem auto;
  padding: 0 10px 0 10px;
  border-radius: 5px;
  align-items: center;
}
.mob-row.mob-row-sm {
  margin: 0rem auto 0rem auto;
}
.mob-row-checkboxes .mob-col-input {
  margin-top: 0.5rem;
}
.mob-col-label {
  flex: 1;
  padding: 1rem;
  padding-right: 0.5rem;
  text-align: right;
  align-self: flex-start;
  font-weight: 600;
  color: var(--app-text-muted);
}
.mob-col-label.mob-col-label-2 { flex: 1.5; }
.mob-col-input {
  flex: 3;
  padding: 0.5rem;
}
.mob-col-input-free {
  flex: 3;
  padding: 0.5rem;
}
/* width and box to avoid div overflow */
.mob-col-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mob-col-input select,
.mob-col-input textarea {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
}
.mob-col-input select.select--auto { width: auto; }
.mob-col-input select.select--w60 { width: 60px; }
.mob-col-input select.select--w50p { width: 50%; }
.mob-col-input select.select--w90p { width: 90%; }
.mob-col-input select.select--w90p { width: 90%; }
.mob-col-input select.select--inline { display: inline; }
.mob-col-input input[type="password"] { height: 35px; }
.mob-col-input input[type="checkbox"] { width: 20px; height: 20px; }
.mob-col-input { min-width: 0; } /* prevent overflow for flex */
.mob-col-fullspan {
  flex: 1 0 100%;
  padding: 0.5rem;
  text-align: center;
}
.mob-col-fullspan-left {
  display: flex;
  flex: 1 0 100%;
  padding: 0.5rem;
  text-align: left;
}
.mob-col-threespan {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.mob-row.mob-row-triple form {
  display: contents;
}
.mob-row.mob-row-triple .mob-col-input  {
  flex: 6;
}
/* Mobile */
@media (max-width: 600px) {
  .mob-row {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .mob-col-label,
  .mob-col-input {
    width: 100%;
    flex: 1 1 100%;
    padding: 0.5rem 0;
    text-align: left;
  }
}
/* Mobile */
@media (min-width: 640px) {
  .mob-col-threespan .mob-col { flex: 0 0 auto; }
  .mob-col-threespan .mob-col:nth-child(1) { flex-basis: 33%; }
  .mob-col-threespan .mob-col:nth-child(2) { flex-basis: 34%; }
  .mob-col-threespan .mob-col:nth-child(3) { flex-basis: 33%; }
}

.selectbox {
  outline: none !important;
  border: 1px solid var(--hex-aaaaaa);
  border-radius: 5px;
  height: 25px;
  min-width: 3vw;
  padding-left: 5px;
  /* background-color: transparent; */
  font-size: 1rem; /* match bootstrap form-control */
}
.selectbox:focus { /* match bootstrap form-control */
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.reset-button {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#div-mymessage {
  z-index: 25; position: fixed; background-color: var(--hex-ffffff); bottom: 1%; left: 1%;
  transition: visibility 0.3s linear, opacity 0.6s linear, bottom 0.4s linear; border: 1px solid var(--hex-3489cd);
  border-radius: 10px; min-width: 20rem; min-height: 7vh;
}
#div-mymessage .msg-close { padding-right: 5px; float: right; cursor: pointer; }
#div-mymessage .msg-message { margin: 2vh 1vh 1vh 1vh; text-align: center; color: var(--hex-004499); }

/* Various single case styles to override usual */
.txtleft { text-align: left; }
.txtright { text-align: right; }
.txtcenter { text-align: center; }
.w50p { width: 50%; }
.w75p { width: 75%; }
.w100p { width: 100%; }
.w150 { width: 150px; }
.w170 { width: 170px; }
.w220 {width:220px;}
.mobw75p { width: 75%; }
.h-1 { height: 1px; }
.h25 { height: 25px; }
.h30 { height: 30px; }
.h36 { height: 36px; }
.h40 { height: 40px; }
.mh40 { min-height: 40px; }
.h100p { height: 100%; }
.mobh20 { height: 20px; }
.mobh30 { height: 30px; }
.div-empty:empty { display: none; }
.brd-collsep { border-collapse: separate; }
.brd-sp0 { border-spacing: 0px; }
.brd { border: 1px solid #000 !important; } /* for quick testings */
.brd0 { border: 0; }
.brd1 { border-width: 1px; }
.brd1-lt { border: 1px solid #ccc;}
.brad-10 { border-radius: 10px;}
.hidden {visibility: hidden; }
.indent-1 { padding-left: 1em; }
.indent-2 { padding-left: 2em; }
.indent-3 { padding-left: 3em; }
.form-inline { display: inline; margin: 0px;}
.color-red { color: red; }
.color-dark-red { color: rgb(170, 0, 0); }
.outline-notice { outline: 1px solid rgb(170, 0, 0) !important; box-shadow: 0px 0px 5px 3px #f77f7f !important; }
.flex-no-wrap { flex-wrap: nowrap; }
.v-hidden { visibility: hidden; }
.v-visible { visibility: visible; }
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pd-l-10 { padding-left: 10px; }
.pd-l-20 { padding-left: 20px; }
.mg-l-10 { margin-left: 10px; }
.mg-l-20 { margin-left: 20px; }
.mg-r-10 { margin-right: 10px; }
.mg-rl-10 { margin-right: 10px; margin-left: 10px; }
.mg-0 { margin: 0; }
.mg-10 { margin: 10px; }
.va-middle { vertical-align: middle; }
#play-audio-captcha { cursor: pointer; background: transparent; font-size:24px; }
.captcha-images { border:0px; width:1px; height:1px; margin:0; }
.captcha-refresh { cursor: pointer; width: auto; }
.play-audio-div {min-height: 10px; line-height: 10px; }
.fnt-15 { font-size: 15px; }
.nowrap { white-space: nowrap; }
.fs-07 { font-size: 0.7rem; }
.fs-08 { font-size: 0.8rem; }
.fs-09 { font-size: 0.9rem; }
.wmax-720 { max-width: 720px; }
.wmin-320 { min-width: 320px; }
.lettsp01 { letter-spacing: 0.1em;}
.float-r { float: right; }
.float-l { float: left; }
.label-brd {
  border-radius: 5px; border: 1px solid var(--hex-dddddd); padding: 0.3rem;
  width: 100%; text-align: right; display: block;
}
.checkbox-brd {
  border-radius: 5px; border: 1px solid var(--hex-eeeeee); height: 100px; padding-right: 0.5rem;
}
@media (max-width: 600px) {
  .mob-center {align-items: center !important; justify-content: center !important;}
}
@media (max-width: 1024px) {
  .label-brd { text-align: left; border: none; padding: 0; }
  .label-brd.app-inner-card { background: none; }
}

/* Password hide/show */
.pass-wrap { position: relative; width: 100%; }
.pass-input { padding-right: 2rem; }
.pass-eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}
body.dark-mode .pass-eye { filter: invert(1); }

/* optional: better click target */
.pass-eye{
  height: 18px;
  width: 18px;
}
@media (max-width: 600px){
  .pass-input{ padding-right: 3rem; }
  .pass-eye{ right: 0.9rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
}

.upload-preview {
  height: 1.5rem;
  max-height: 1.5rem;
  max-width: 1.5rem;
  vertical-align: middle;
}
.upload-preview-div {
  width: 1.5rem;
  display: inline-block;
  padding: 0 20px 10px 10px;
}
.upload-status {
  height: 20px;
  display: inline-block;
}

/* Buttons spacing and alignment */
.buttons-spinwrap  {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.buttons-spinwrap--left  { justify-content: flex-start; }
.buttons-spinwrap--center  { justify-content: center; }
.buttons-spinwrap--right  { justify-content: flex-end; }
.button-link, .button-link:visited {
  background: none;
  border: none;
  padding: 0px;
  margin: 0px;
  color: rgb(235, 115, 0);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.button-link:hover, .button-link:focus {
  color: rgb(255, 175, 0);
}

/* Tooltip */
.help-icon {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-85%);
  width: 1.0rem;
  height: 1.0rem;
  font-size: 0.75rem;
  color: var(--hex-aaaaaa);
  border-color: var(--hex-aaaaaa);
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.tooltip.tip-light {
  --bs-tooltip-opacity: 0.95;
  --bs-tooltip-bg: #4c4950; /*#ededed;*/
  --bs-tooltip-color: #ededed; /*#1f2937;*/
  --bs-tooltip-border-radius: .5rem;
  --bs-tooltip-arrow-color: var(--bs-tooltip-bg);
}

/* listings container */
.smooth-listing {
  list-style: none;
  margin: 0;
  padding: 0;
}
.smooth-listing-item {
  display: flow-root;
  margin-top: -10px;
}
.smooth-listing-item:has(> .smooth-listing-details[open]) .smooth-listing-arrow {
  transform: rotate(45deg);
  color: #374151;
}
.smooth-listing-details {
  overflow: clip;
}
.smooth-listing-summary {
  display: flex;
  min-height: 35px;
  cursor: pointer;
  border: 1px solid var(--rgba-0-0-0--0-25);
  border-radius:5px;
  font-weight: 500;
}
.smooth-listing-empty {
  border: 1px solid var(--rgba-0-0-0--0-25); border-radius:5px; font-weight: 500; color: var(--hex-999999);
}
.smooth-listing-summary::-webkit-details-marker {
  display: none;
}
.smooth-listing-arrow {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 250ms ease;
  border-right: 2px solid #2575cd;
  border-bottom: 2px solid #2575cd;
  color: #787878;
  transform-origin: -50% 50%;
  rotate: 45deg;
  margin-left: auto;
}
.smooth-listing-details[open] .smooth-listing-arrow {
  transform-origin: 50% 100%;
  rotate: 180deg;
  color: #374151;
}
.smooth-listing-summary:hover {
  background: #fafafa;
}
.smooth-listing-summary:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 10px;
}
:root {
  --anim-dur: 750ms;
  --anim-fade: 400ms;
}
.smooth-listing-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--anim-dur) cubic-bezier(.2,.8,.2,1), opacity var(--anim-fade) ease;
  background-color: transparent;
  padding-left: 20px;
}
.smooth-listing-details[open] .smooth-listing-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.smooth-listing-inner {
  overflow: hidden;
  display: flow-root;
  transition: padding-block var(--anim-dur) cubic-bezier(.2,.8,.2,1);
}
.smooth-listing-item:has(> .smooth-listing-details[open]) .smooth-listing-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.smooth-listing-item:has(> .smooth-listing-details[open]) .smooth-listing-inner {
  padding-block: 2px;
}

/* Mobile: make hit target a bit larger */
@media (max-width: 576px) {
  .help-icon { width: 2.5rem; height: 2.5rem; }
}

/* Loading spinner */
.load-spinner {
  position: absolute;
  box-sizing: content-box;
  flex: 0 0 auto;
  border: 3px solid var(--rgba-0-0-0--0-25);
  border-left-color: var(--hex-3489cd);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 0.8s linear infinite;
  -webkit-animation: spin 0.8s linear infinite;
  display: none;
  align-items: center;
  justify-content: center;
}
@keyframes spin { to { transform: rotate(360deg); } }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Upload progress bar */
.prog-bar {
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px;
}
.prog-bar > div {
  height: 100%;
  width: 0%;
  background: #3e20eb;
  transition: width .2s;
}
.form-control.file-input {
  cursor: pointer; width: 65%; display: inline-block; height: 36px; vertical-align: middle;
}
.upload-status {
  font-size: 14px;
  font-family: sans-serif;
  margin-top: 8px;
}
.upload-row-btns{
  display: block;
  gap: .5rem;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
  margin-top: 10px;
  max-width: 100%;
}

/* Override for EAA mode */
body.eaa-mode button {
  --bs-primary: #111;
  --bs-btn-color: #fff;
  --bs-btn-bg: #111;
  --bs-btn-border-color: #fff;
}
body.dark-mode.eaa-mode button {
  --bs-primary: #777;
  --bs-btn-color: #fff;
  --bs-btn-bg: #777;
  --bs-btn-border-color: #fff;
}
body.eaa-mode input:focus,
body.eaa-mode select:focus,
body.eaa-mode textarea:focus,
body.eaa-mode button:focus {
  box-shadow: 0 0 0 3px #1976d2 !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* outline: 2px solid #1976d2 !important; */
}
body.eaa-mode input:hover,
body.eaa-mode select:hover,
body.eaa-mode textarea:hover,
body.eaa-mode button:hover {
  box-shadow: 0 0 0 3px #4caf50 !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* outline: 2px solid #4caf50 !important; */
}
body.eaa-mode input,
body.eaa-mode textarea,
body.eaa-mode select,
body.eaa-mode button {
  font-size: 1.5rem !important;
  height: 45px !important;
}
body.eaa-mode h1 {
  font-size: 2.25rem !important;
}

body.eaa-mode h2 {
  font-size: 2rem !important;
}

body.eaa-mode h3 {
  font-size: 1.75rem !important;
}

body.eaa-mode h4 {
  font-size: 1.5rem !important;
}

body.eaa-mode h5 {
  font-size: 1.25rem !important;
}

body.eaa-mode h6 {
  font-size: 1.125rem !important;
}
body.eaa-mode,
body.eaa-mode span,
body.eaa-mode label,
body.eaa-mode div,
body.eaa-mode table,
body.eaa-mode th,
body.eaa-mode td,
body.eaa-mode li,
body.eaa-mode a,
body.eaa-mode p {
    font-size: 1.125rem !important;
}

/* Simple Dropdown Menu */
.simpledropdown-toggle { position: absolute; opacity: 0; pointer-events: none; }
.simpledropdown .simpledropdown-content { display: none; }
.simpledropdown-toggle:checked ~ .simpledropdown-arrow-top,
.simpledropdown-toggle:checked ~ .simpledropdown-content { display: block; }
.simpledropbtn { padding: 0px; border: none; background-color: transparent; cursor: pointer; }
.simpledropbtn .nav-link { user-select: none; }
.simpledropdown { position: relative; display: inline-block; }
.simpledropdown-content {
  border-radius: 5px; display: none; position: absolute; background-color: var(--hex-ffffff); min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 30; width: max-content; top: 100%; margin-top: 8px;
}
.simpledropdown-content a {
  border-radius: 5px; color: black; padding: 8px 16px; text-decoration: none; display: block;
}
.simpledropdown-content form { margin: 0; }
.simpledropdown-content button.btn.href-blue {
  display: block; width: 100%; text-align: left; padding: 8px 16px; border-radius: 5px;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
}
.simpledropdown-content .txtright button.btn.href-blue { text-align: right; }
body.eaa-mode .simpledropdown-content button.btn.href-blue { color: #ffffff !important; }
.simpledropdown-content button.btn.href-blue:hover { background-color: var(--hex-dddddd); }
.simpledropdown-content a:hover { background-color: var(--hex-dddddd); }
/* .simpledropdown:hover .simpledropdown-content { display: block; } */
.simpledropdown--right { right: 30px; }
.simpledropdown--right .simpledropdown-content { left: -10px; right: auto; }
.simpledropdown--center .simpledropdown-content { left: 0; right: auto; }
.simpledropdown--left .simpledropdown-content { left: auto; right: -5px; }
.simpledropbtn2 { padding: 0px; border: none; background-color: var(--hex-ffffff); border-radius: 5px; }
.simpledropdown2 { position: relative; }
.simpledropdown2-content {
  border-radius: 5px; display: none; position: absolute; background-color: var(--hex-ffffff); min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 30; width: 200px; left: 135px; top: 0%;
}
.simpledropdown2-content a {
  border-radius: 5px; color: black; padding: 8px 16px; text-decoration: none; display: block;
}
.simpledropdown2-content a:hover { background-color: var(--hex-dddddd); }
.simpledropdown2:hover .simpledropdown2-content { display: block; }
.simpledropdown-gap {
  border-radius: 5px; position: absolute; background-color: transparent; min-width: 150px;
  z-index: 30; width: 100%; top: -12px; height: 12px;
}
body.eaa-mode .simpledropdown-gap { top: -12px; height: 22px; }
.simpledropdown-arrow-top {
  position: absolute; top: calc(100%); left: 50%; transform: translateX(-50%); z-index: 29;
  pointer-events: none; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-bottom: 15px solid var(--hex-ffffff);
}
.simpledropdown .simpledropdown-arrow-top { display: none; }
/* .simpledropdown:hover .simpledropdown-arrow-top { display: block; } */
.simpledropdown:focus-within .simpledropdown-arrow-top { display:block; }
.simpledropdown:focus-within .simpledropdown-content { display:block; }
.simpledropdown-menuarrow {
  display: inline-block; transform: rotate(180deg); color: var(--hex-ffffff); font-family: Tahoma; font-size: 0.8rem; }
.user-icon { width: 3vh; }
body.eaa-mode .user-icon { width: 5vh; }
body.dark-mode .user-icon { filter: invert(1); }
.globe-icon { width: 2.3vh; filter: invert(1); margin-bottom: 3px; }
body.eaa-mode .globe-icon { width: 4vh; }
body.dark-mode .globe-icon { filter: invert(0); }
.signout-icon { width: 2vh; margin-right: 5px; margin-bottom: 4px; }
.signout-icon.invert { filter: invert(1); }
body.eaa-mode .signout-icon { width: 5vh; }
body.dark-mode .signout-icon { filter: invert(1); }
@media (max-width: 1280px) {
  .simpledropdown-gap.simpledropdown-gap-right { left: auto; right: 10px; }
  .simpledropdown--right .simpledropdown-content { left: auto; right: 0; }
  .simpledropdown--left .simpledropdown-content { left: auto; right: -5px; }
  .simpledropdown-content button.btn.href-blue{
    white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere;
  }
}
@media (max-width: 1024px) {
  .simpledropdown.simpledropdown--center .simpledropdown-content,
  .simpledropdown.simpledropdown--left .simpledropdown-content,
  .simpledropdown.simpledropdown--right .simpledropdown-content {
    left: 50%; right: auto; transform: translateX(-50%); top: 100%; margin-top: 0; box-sizing: border-box;
  }
  .globe-icon { margin-left: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .simpledropdown:hover .simpledropdown-content { display: block; }
  .simpledropdown:hover .simpledropdown-arrow-top { display: block; }
}

.eaa-logo { position: fixed; right: 20px; bottom: 20px; z-index: 9999; }
.eaa-logo-cookie { bottom: 100px; }
@media (max-width: 1024px) {
  .eaa-logo { right: 12px; bottom: 12px; }
}

.page-return {
  position: absolute;
  left: 5px;
  top: 80px;
}
.btn-return {
  font-size: 0.9rem;
}
.page-semester {
  position: absolute;
  right: 5px;
  top: 80px;
}

/* Bootstrap custom */
.my-shadow-sm { box-shadow:var(--bs-box-my-shadow-sm) !important; }
.shadow-md { box-shadow:var(--bs-box-shadow-md) !important; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #3e7ef5; --bs-btn-border-color: #3e7ef5; --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd;
}
.fw-medium { font-weight: 500; }

/* Mobile */
@media (max-width: 600px) {
  .w150 { width: 100%; display: block; }
  .w170 { width: 100%; display: block; }
  .mobw75p { width: 95%; }
  .help-icon { width: 1.0rem; height: 1.0rem; } /* Tooltip */
}
/* Mobile */
@media (max-width: 1024px) {
  .mob-hide { display: none; }
  .mob-ps-3 { padding-left: 1rem; }
}