@charset "UTF-8";
/*  
    Andy Bell's Modern CSS Reset
    https://github.com/Andy-set-studio/modern-css-reset
*/
/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*font-size: calc(var(--s1) + var(--font-device-factor));*/
}

:root {
  --ratio: 1.25;
  --s-7: calc(var(--s-6) / var(--ratio));
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: .8rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --default-padding: var(--s-1);
  --narrow-padding: var(--s-2);
  --default-border-radius: var(--s0);
  --border-width-thin: "1px";
  --border-width-thick: "2px";
  --default-border-width: "1px";
  --border-radius-6: var(--s-6);
  --border-radius-5: var(--s-5);
  --border-radius-4: var(--s-4);
  --border-radius-3: var(--s-3);
  --border-radius-2: var(--s-2);
  --border-radius-1: var(--s-1);
  --border-radius0: var(--s0);
  --border-radius1: var(--s1);
  --border-radius2: var(--s2);
  --border-radius3: var(--s3);
  --border-radius4: var(--s4);
  --border-radius5: var(--s5);
  --border-radius6: var(--s6);
  --font-device-factor: .0vh;
  --font-6: calc(var(--s-6) + var(--font-device-factor));
  --font-5: calc(var(--s-5) + var(--font-device-factor));
  --font-4: calc(var(--s-4) + var(--font-device-factor));
  --font-3: calc(var(--s-3) + var(--font-device-factor));
  --font-2: calc(var(--s-2) + var(--font-device-factor));
  --font-1: calc(var(--s-1) + var(--font-device-factor));
  --font0: calc(var(--s0) + var(--font-device-factor));
  --font1: calc(var(--s1) + var(--font-device-factor));
  --font2: calc(var(--s2) + var(--font-device-factor));
  --font3: calc(var(--s3) + var(--font-device-factor));
  --font4: calc(var(--s4) + var(--font-device-factor));
  --font5: calc(var(--s5) + var(--font-device-factor));
  --font6: calc(var(--s6) + var(--font-device-factor));
  --zindex-base: 1000;
  --zindex-site-header: 2000;
  --zindex-drawer: 7000;
  --zindex-sidenav: 8000;
  --zindex-modal-overlay: 9000;
  --zindex-modal-dialog: 9001;
}

body, html {
  direction: ltr;
  height: 100vh;
  /*
  background-image: url(http://localhost:50070/Content/Backgrounds/Stella-BG-Gradient.jpg);
  */
  /*
  background-image: radial-gradient(#333d44 1px, transparent 1px), radial-gradient(#333d44 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-color: #3c454f;
  */
}

#stellaMainBody {
  /*
  background-image: radial-gradient(#6e7b87 0.5px, transparent 0.5px), radial-gradient(#6e7b87 0.5px, transparent 0.5px);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-color: #333d44;
  */
  background-image: url(../../Content/Backgrounds/stella-body-2025.png);
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

.stellaMainHeader {
  background-color: var(--color-gray-exdk);
}

.st-wrapper {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s0);
  padding-right: var(--s0);
}

a {
  color: var(--color-blue-20);
}

h1 {
  font-size: var(--s5);
}

h2 {
  font-size: var(--s4);
}

h3 {
  font-size: var(--s3);
}

h4 {
  font-size: var(--s2);
}

h5 {
  font-size: var(--s1);
}

h6 {
  font-size: var(--s0);
}

:root {
  --color-indigo: rgb(0,59,103);
  --color-biceblue: rgb(0,105,148);
  --color-cambridgeblue: rgb(118,143,145);
  --color-hookersgreen: rgb(132,160,160);
  --color-forestgreen: rgb(40,130,40);
  --color-carmine: rgb(147,22,33);
  --color-canary: rgb(255,234,0);
  --color-white: rgb(255,255,255);
  --color-black: rgb(0,0,0);
  --color-gray-exlt: rgb(238,240,240);
  --color-gray-lt: rgb(208,212,216);
  --color-gray-md: rgb(170,175,180);
  --color-gray-dk: rgb(110,120,130);
  --color-gray-exdk: rgb(51,61,68);
  --color-status-red: var(--color-carmine);
  --color-status-red-text: var(--color-white);
  --color-status-green: var(--color-forestgreen);
  --color-status-green-text: var(--color-white);
  --color-status-yellow: var(--color-canary);
  --color-status-yellow-text: var(--color-black);
  --color-alert: var(--color-carmine);
  --color-warning: var(--color-canary);
  --color-emphasis: var(--color-biceblue);
  --color-important: var(--color-indigo);
  --color-success: var(--color-forestgreen);
  --color-header: var(--color-hookersgreen);
}

/*
    FUTURE POSSIBILITIES
    --color-nav-primary  (for sidenav backgrounds)
    --color-accent  (for borders, subtle highlights)
    --color-link  (for text links)
    --color-hover  (for hover states)
    --color-emphasis-secondary 
    --color-header-secondary  (for sub-headers versus main headers)
*/
:root {
  --color-bg-white: var(--color-white);
  --color-bg-exlt: var(--color-gray-exlt);
  --color-bg-lt: var(--color-gray-lt);
  --color-bg-md: var(--color-gray-md);
  --color-bg-dk: var(--color-gray-dk);
  --color-bg-exdk: var(--color-gray-exdk);
  --color-alert-fg: var(--color-white);
  --color-emphasis-fg: var(--color-white);
  --color-important-fg: var(--color-white);
  --color-success-fg: var(--color-white);
  --color-warning-fg: var(--color-black);
  --color-text-default: var(--color-gray-exdk);
  --color-text-important: var(--color-important);
  --color-text-muted: var(--color-gray-md);
  --color-text-lt: var(--color-gray-lt);
  --color-text-dark: var(--color-black);
  --color-tile-active-bg: var(--color-white);
  --color-tile-active-border: var(--color-important);
  --color-tile-active-fg: var(--color-important);
  --color-tile-alert-bg: color-mix(in oklab, var(--color-alert) 5%, white);
  --color-tile-alert-border: var(--color-alert);
  --color-tile-alert-fg: var(--color-black);
  --color-tile-emphasis-bg: var(--color-emphasis);
  --color-tile-emphasis-border: var(--color-emphasis);
  --color-tile-emphasis-fg: var(--color-white);
  --color-tile-emphasis-inverted-bg: var(--color-white);
  --color-tile-emphasis-inverted-border: var(--color-emphasis);
  --color-tile-emphasis-inverted-fg: var(--color-emphasis);
  --color-tile-header-bg: var(--color-header);
  --color-tile-header-border: var(--color-header);
  --color-tile-header-fg: var(--color-white);
  --color-tile-inactive-bg: var(--color-gray-dk);
  --color-tile-inactive-border: var(--color-gray-dk);
  --color-tile-inactive-fg: var(--color-gray-lt);
  --color-tile-normal-bg: var(--color-gray-exlt);
  --color-tile-normal-border: var(--color-gray-md);
  --color-tile-normal-fg: var(--color-gray-exdk);
  --color-tile-success-bg: color-mix(in srgb, var(--color-success) 5%, white);
  --color-tile-success-border: color-mix(in srgb, var(--color-success) 35%, white);
  --color-tile-success-fg: var(--color-black);
  --color-tile-warning-bg: color-mix(in srgb, var(--color-warning) 5%, white);
  --color-tile-warning-border: var(--color-warning);
  --color-tile-warning-fg: var(--color-black);
  --color-tile-std-bg: var(--color-gray-exlt);
  --color-tile-std-border: var(--color-gray-lt);
  --color-tile-light-bg: var(--color-gray-exlt);
  --color-sidenav-bg: var(--color-gray-md);
  --color-sidenav-fg: var(--color-important);
  --color-sidenav-fg-hover: var(--color-black);
  --color-sidenav-tile-bg: var(--color-gray-exlt);
  --color-sidenav-expansion-primary: var(--color-gray-lt);
  --color-sidenav-expansion-secondary: var(--color-gray-dk);
  --color-sidenav-expansion-hover: var(--color-gray-exdk);
  --color-sidenav-link: var(--color-gray-dk);
  --color-sidenav-open-icon: var(--color-white);
  --color-page-header-bg: var(--color-header);
  --color-page-header-fg: var(--color-white);
  --color-siteheader-bg: var(--color-gray-exdk);
  --color-siteheader-fg: var(--color-white);
  --color-btn-std-bg: var(--color-gray-lt);
  --color-btn-std-text: var(--color-gray-exdk);
  --color-btn-disabled-bg: var(--color-gray-exdk);
  --color-btn-disabled-text: var(--color-gray-md);
  --color-btn-emphasis-bg: var(--color-emphasis);
  --color-btn-emphasis-text: var(--color-white);
  --color-btn-muted-bg: var(--color-gray-md);
  --color-btn-muted-text: var(--color-gray-exdk);
  --color-btn-light-bg: var(--color-white);
  --color-btn-light-text: var(--color-gray-exdk);
  --color-btn-light-border: var(--color-gray-dk);
  --color-btn-hover: var(--color-gray-dk);
  --color-dropdown-bg: var(--color-gray-lt);
  --color-dropdown-text: var(--color-gray-exdk);
  --color-link-default: var(--color-gray-exdk);
  --color-link-hover: var(--color-important);
  --color-mytraining-coursegroup-bg: var(--color-gray-dk);
  --color-mytraining-coursegroup-fg: var(--color-white);
  --color-mytraining-coursegroup-active-bg: var(--color-gray-exlt);
  --color-mytraining-coursegroup-active-fg: var(--color-important);
  --color-mytraining-carousel-container: var(--color-gray-exdk);
  --color-gauge-bg-std: var(--color-white);
  --color-gauge-bg-dark: var(--color-gray-dk);
  --color-gauge-bg-light: var(--color-white);
  --color-gauge-fill: var(--color-white);
  --color-gauge-stroke: var(--color-gray-exdk);
  --color-panel-bg: var(--color-gray-lt);
  --color-status-complete: var(--color-success);
  --color-status-complete-fg: var(--color-white);
  --color-status-duesoon: var(--color-warning);
  --color-status-duesoon-fg: var(--color-black);
  --color-status-inprogress: var(--color-success);
  --color-status-inprogress-fg: var(--color-white);
  --color-status-notoverdue: var(--color-success);
  --color-status-notoverdue-fg: var(--color-white);
  --color-status-overdue: var(--color-alert);
  --color-status-overdue-fg: var(--color-white);
  --color-status-unchecked-fg: var(--color-gray-md);
}

:root {
  --color-bg-white: var(--color-white);
  --color-bg-exlt: var(--color-gray-exlt);
  --color-bg-lt: var(--color-gray-lt);
  --color-bg-md: var(--color-gray-md);
  --color-bg-dk: var(--color-gray-dk);
  --color-bg-exdk: var(--color-gray-exdk);
  --color-alert-fg: var(--color-white);
  --color-emphasis-fg: var(--color-white);
  --color-important-fg: var(--color-white);
  --color-success-fg: var(--color-white);
  --color-warning-fg: var(--color-black);
  --color-text-default: var(--color-gray-exdk);
  --color-text-important: var(--color-important);
  --color-text-muted: var(--color-gray-md);
  --color-text-lt: var(--color-gray-lt);
  --color-text-dark: var(--color-black);
  --color-tile-active-bg: var(--color-white);
  --color-tile-active-border: var(--color-important);
  --color-tile-active-fg: var(--color-important);
  --color-tile-alert-bg: color-mix(in oklab, var(--color-alert) 5%, white);
  --color-tile-alert-border: var(--color-alert);
  --color-tile-alert-fg: var(--color-black);
  --color-tile-emphasis-bg: var(--color-emphasis);
  --color-tile-emphasis-border: var(--color-emphasis);
  --color-tile-emphasis-fg: var(--color-white);
  --color-tile-emphasis-inverted-bg: var(--color-white);
  --color-tile-emphasis-inverted-border: var(--color-emphasis);
  --color-tile-emphasis-inverted-fg: var(--color-emphasis);
  --color-tile-header-bg: var(--color-header);
  --color-tile-header-border: var(--color-header);
  --color-tile-header-fg: var(--color-white);
  --color-tile-inactive-bg: var(--color-gray-dk);
  --color-tile-inactive-border: var(--color-gray-dk);
  --color-tile-inactive-fg: var(--color-gray-lt);
  --color-tile-normal-bg: var(--color-gray-exlt);
  --color-tile-normal-border: var(--color-gray-md);
  --color-tile-normal-fg: var(--color-gray-exdk);
  --color-tile-success-bg: color-mix(in srgb, var(--color-success) 5%, white);
  --color-tile-success-border: color-mix(in srgb, var(--color-success) 35%, white);
  --color-tile-success-fg: var(--color-black);
  --color-tile-warning-bg: color-mix(in srgb, var(--color-warning) 5%, white);
  --color-tile-warning-border: var(--color-warning);
  --color-tile-warning-fg: var(--color-black);
  --color-tile-std-bg: var(--color-gray-exlt);
  --color-tile-std-border: var(--color-gray-lt);
  --color-tile-light-bg: var(--color-gray-exlt);
  --color-sidenav-bg: var(--color-gray-md);
  --color-sidenav-fg: var(--color-important);
  --color-sidenav-fg-hover: var(--color-black);
  --color-sidenav-tile-bg: var(--color-gray-exlt);
  --color-sidenav-expansion-primary: var(--color-gray-lt);
  --color-sidenav-expansion-secondary: var(--color-gray-dk);
  --color-sidenav-expansion-hover: var(--color-gray-exdk);
  --color-sidenav-link: var(--color-gray-dk);
  --color-sidenav-open-icon: var(--color-white);
  --color-page-header-bg: var(--color-header);
  --color-page-header-fg: var(--color-white);
  --color-siteheader-bg: var(--color-gray-exdk);
  --color-siteheader-fg: var(--color-white);
  --color-btn-std-bg: var(--color-gray-lt);
  --color-btn-std-text: var(--color-gray-exdk);
  --color-btn-disabled-bg: var(--color-gray-exdk);
  --color-btn-disabled-text: var(--color-gray-md);
  --color-btn-emphasis-bg: var(--color-emphasis);
  --color-btn-emphasis-text: var(--color-white);
  --color-btn-muted-bg: var(--color-gray-md);
  --color-btn-muted-text: var(--color-gray-exdk);
  --color-btn-light-bg: var(--color-white);
  --color-btn-light-text: var(--color-gray-exdk);
  --color-btn-light-border: var(--color-gray-dk);
  --color-btn-hover: var(--color-gray-dk);
  --color-dropdown-bg: var(--color-gray-lt);
  --color-dropdown-text: var(--color-gray-exdk);
  --color-link-default: var(--color-gray-exdk);
  --color-link-hover: var(--color-important);
  --color-mytraining-coursegroup-bg: var(--color-gray-dk);
  --color-mytraining-coursegroup-fg: var(--color-white);
  --color-mytraining-coursegroup-active-bg: var(--color-gray-exlt);
  --color-mytraining-coursegroup-active-fg: var(--color-important);
  --color-mytraining-carousel-container: var(--color-gray-exdk);
  --color-gauge-bg-std: var(--color-white);
  --color-gauge-bg-dark: var(--color-gray-dk);
  --color-gauge-bg-light: var(--color-white);
  --color-gauge-fill: var(--color-white);
  --color-gauge-stroke: var(--color-gray-exdk);
  --color-panel-bg: var(--color-gray-lt);
  --color-status-complete: var(--color-success);
  --color-status-complete-fg: var(--color-white);
  --color-status-duesoon: var(--color-warning);
  --color-status-duesoon-fg: var(--color-black);
  --color-status-inprogress: var(--color-success);
  --color-status-inprogress-fg: var(--color-white);
  --color-status-notoverdue: var(--color-success);
  --color-status-notoverdue-fg: var(--color-white);
  --color-status-overdue: var(--color-alert);
  --color-status-overdue-fg: var(--color-white);
  --color-status-unchecked-fg: var(--color-gray-md);
}

body, html {
  background-color: rgb(39, 71, 84);
  font-family: "Roboto Condensed", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*
@mixin skin-status-green {
    background-color: var(--color-status-green);
    border-color: var(--color-status-green);
    color: var(--color-status-green-text);
}
@mixin skin-status-red {
    background-color: var(--color-status-red);
    border-color: var(--color-status-red);
    color: var(--color-status-red-text);
}
@mixin skin-status-yellow {
    background-color: var(--color-status-yellow);
    border-color: var(--color-status-yellow);
    color: var(--color-status-yellow-text);
}
*/
/*
    hover
    active
    disabled
*/
/*
    standard
    emphasis (primary)
    muted (secondary)
    light?
    disabled
    alert
    warning
    success
*/
/*
@mixin skin-button-important {
    background-color: var(--color-btn-important-bg);
    border-color: var(--color-btn-important-bg);
    color: var(--color-btn-std-text);
}
*/
/*
    read-write (standard)
    focus
    valid
    invalid (error)
    read-only (disabled)
    required
    x - optional
*/
.st-carousel {
  height: 15vh;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  width: 100%;
}

.st-carousel-image-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: 100%;
  z-index: 99;
}

.st-carousel-image {
  border-radius: var(--default-border-radius);
  height: 100%;
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  position: relative;
  -webkit-transition: all 1s;
  transition: all 1s;
  width: auto;
  z-index: 100;
}

@-webkit-keyframes dialogFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dialogFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes dialogFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dialogFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
dialog {
  top: 50px;
  margin: auto;
}

dialog::-ms-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.st-drawer {
  border-radius: var(--s1);
  height: 100vh;
  width: 0;
  position: fixed;
  z-index: var(--zindex-drawer);
  top: 0vh;
  left: 0;
  background-color: var(--color-panel-bg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.st-drawer-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4vh;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: var(--s-3) 0;
}

.st-drawer-content {
  height: 96vh;
}

.st-drawer-content-hidden {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility linear 1s, opacity 1s;
  transition: visibility linear 1s, opacity 1s;
}

.st-drawer-header {
  display: block;
  font-size: var(--s1) !important;
  height: 14%;
  margin-bottom: var(--s-5);
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

.st-drawer-panel {
  background-color: var(--color-panel-bg);
  border-radius: var(--s1);
  height: 70%;
  margin: auto;
  opacity: 1;
  overflow: auto;
  width: 95%;
}

.st-expandable {
  max-height: 0px;
  color: transparent;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: auto;
}

.st-expanded {
  max-height: 750px;
}

.st-gauge-container {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-size: contain;
}

.st-gauge {
  display: block;
}

.st-gauge-bg-std {
  fill: var(--color-gauge-fill);
  stroke: var(--color-gauge-stroke);
  stroke-width: 8%;
}

.st-gauge-bg-dark {
  fill: var(--color-gauge-fill);
  stroke: var(--color-gauge-stroke);
  stroke-width: 8%;
}

.st-gauge-bg-light {
  fill: var(--color-gauge-fill);
  stroke: var(--color-gauge-stroke);
  stroke-width: 8%;
}

.st-gauge-fg {
  -webkit-animation: progress 0.2s ease-out;
          animation: progress 0.2s ease-out;
  fill: var(--color-gauge-fill);
  stroke-linecap: round;
  stroke-width: 8%;
}

.imageBlockContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 100%;
}

.imageBlockContainer img {
  position: relative;
  border-radius: var(--s0) !important;
}

.imageBlockContainer .btn {
  color: var(--color-gray-exdk);
  position: absolute;
  top: 70%;
  left: 95%;
  -webkit-transform: translate(-70%, -95%);
          transform: translate(-70%, -95%);
  -ms-transform: translate(-70%, -95%);
  border-radius: 4px;
  z-index: -1;
}

.imageBlockContainer .btn:hover {
  background-color: var(--color-black);
}

.st-modal {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(96, 96, 96, 0.9);
  display: none;
  position: fixed;
  top: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  z-index: 9999;
}

.st-modal.fade-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.st-modal-content-container {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  width: 95vw;
  height: 95vh;
  margin: 1% auto;
}

.st-modal-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-tile-header-bg);
  border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
  color: var(--color-tile-header-fg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--default-padding);
}

.st-modal-header button {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  height: auto;
}

.st-modal-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: var(--s2);
  margin-right: 1em;
  word-break: break-word;
}

.st-modal-content {
  position: relative;
  height: 95%;
  background: #fff;
  border-radius: 0 0 var(--s1) var(--s1);
  overflow: hidden;
}

.st-modal-viewer-container {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.st-modal-image-content-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* header above content */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.st-modal-image-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; /* fills whatever height is left */
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* so width/height include padding */
  padding: 5px; /* your white border */
  background: var(--color-gray-exlt);
  overflow: hidden;
  border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
}

#stModalImage {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain; /* letterbox / pillarbox */
  display: block;
  border-radius: var(--default-border-radius);
}

.st-modal-video-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; /* fills whatever height is left */
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* so width/height include padding */
  padding: 5px;
  background: var(--color-gray-exlt);
  overflow: hidden;
  border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
}

:root {
  --color-bg-white: var(--color-white);
  --color-bg-exlt: var(--color-gray-exlt);
  --color-bg-lt: var(--color-gray-lt);
  --color-bg-md: var(--color-gray-md);
  --color-bg-dk: var(--color-gray-dk);
  --color-bg-exdk: var(--color-gray-exdk);
  --color-alert-fg: var(--color-white);
  --color-emphasis-fg: var(--color-white);
  --color-important-fg: var(--color-white);
  --color-success-fg: var(--color-white);
  --color-warning-fg: var(--color-black);
  --color-text-default: var(--color-gray-exdk);
  --color-text-important: var(--color-important);
  --color-text-muted: var(--color-gray-md);
  --color-text-lt: var(--color-gray-lt);
  --color-text-dark: var(--color-black);
  --color-tile-active-bg: var(--color-white);
  --color-tile-active-border: var(--color-important);
  --color-tile-active-fg: var(--color-important);
  --color-tile-alert-bg: color-mix(in oklab, var(--color-alert) 5%, white);
  --color-tile-alert-border: var(--color-alert);
  --color-tile-alert-fg: var(--color-black);
  --color-tile-emphasis-bg: var(--color-emphasis);
  --color-tile-emphasis-border: var(--color-emphasis);
  --color-tile-emphasis-fg: var(--color-white);
  --color-tile-emphasis-inverted-bg: var(--color-white);
  --color-tile-emphasis-inverted-border: var(--color-emphasis);
  --color-tile-emphasis-inverted-fg: var(--color-emphasis);
  --color-tile-header-bg: var(--color-header);
  --color-tile-header-border: var(--color-header);
  --color-tile-header-fg: var(--color-white);
  --color-tile-inactive-bg: var(--color-gray-dk);
  --color-tile-inactive-border: var(--color-gray-dk);
  --color-tile-inactive-fg: var(--color-gray-lt);
  --color-tile-normal-bg: var(--color-gray-exlt);
  --color-tile-normal-border: var(--color-gray-md);
  --color-tile-normal-fg: var(--color-gray-exdk);
  --color-tile-success-bg: color-mix(in srgb, var(--color-success) 5%, white);
  --color-tile-success-border: color-mix(in srgb, var(--color-success) 35%, white);
  --color-tile-success-fg: var(--color-black);
  --color-tile-warning-bg: color-mix(in srgb, var(--color-warning) 5%, white);
  --color-tile-warning-border: var(--color-warning);
  --color-tile-warning-fg: var(--color-black);
  --color-tile-std-bg: var(--color-gray-exlt);
  --color-tile-std-border: var(--color-gray-lt);
  --color-tile-light-bg: var(--color-gray-exlt);
  --color-sidenav-bg: var(--color-gray-md);
  --color-sidenav-fg: var(--color-important);
  --color-sidenav-fg-hover: var(--color-black);
  --color-sidenav-tile-bg: var(--color-gray-exlt);
  --color-sidenav-expansion-primary: var(--color-gray-lt);
  --color-sidenav-expansion-secondary: var(--color-gray-dk);
  --color-sidenav-expansion-hover: var(--color-gray-exdk);
  --color-sidenav-link: var(--color-gray-dk);
  --color-sidenav-open-icon: var(--color-white);
  --color-page-header-bg: var(--color-header);
  --color-page-header-fg: var(--color-white);
  --color-siteheader-bg: var(--color-gray-exdk);
  --color-siteheader-fg: var(--color-white);
  --color-btn-std-bg: var(--color-gray-lt);
  --color-btn-std-text: var(--color-gray-exdk);
  --color-btn-disabled-bg: var(--color-gray-exdk);
  --color-btn-disabled-text: var(--color-gray-md);
  --color-btn-emphasis-bg: var(--color-emphasis);
  --color-btn-emphasis-text: var(--color-white);
  --color-btn-muted-bg: var(--color-gray-md);
  --color-btn-muted-text: var(--color-gray-exdk);
  --color-btn-light-bg: var(--color-white);
  --color-btn-light-text: var(--color-gray-exdk);
  --color-btn-light-border: var(--color-gray-dk);
  --color-btn-hover: var(--color-gray-dk);
  --color-dropdown-bg: var(--color-gray-lt);
  --color-dropdown-text: var(--color-gray-exdk);
  --color-link-default: var(--color-gray-exdk);
  --color-link-hover: var(--color-important);
  --color-mytraining-coursegroup-bg: var(--color-gray-dk);
  --color-mytraining-coursegroup-fg: var(--color-white);
  --color-mytraining-coursegroup-active-bg: var(--color-gray-exlt);
  --color-mytraining-coursegroup-active-fg: var(--color-important);
  --color-mytraining-carousel-container: var(--color-gray-exdk);
  --color-gauge-bg-std: var(--color-white);
  --color-gauge-bg-dark: var(--color-gray-dk);
  --color-gauge-bg-light: var(--color-white);
  --color-gauge-fill: var(--color-white);
  --color-gauge-stroke: var(--color-gray-exdk);
  --color-panel-bg: var(--color-gray-lt);
  --color-status-complete: var(--color-success);
  --color-status-complete-fg: var(--color-white);
  --color-status-duesoon: var(--color-warning);
  --color-status-duesoon-fg: var(--color-black);
  --color-status-inprogress: var(--color-success);
  --color-status-inprogress-fg: var(--color-white);
  --color-status-notoverdue: var(--color-success);
  --color-status-notoverdue-fg: var(--color-white);
  --color-status-overdue: var(--color-alert);
  --color-status-overdue-fg: var(--color-white);
  --color-status-unchecked-fg: var(--color-gray-md);
}

body, html {
  background-color: rgb(39, 71, 84);
  font-family: "Roboto Condensed", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*
@mixin skin-status-green {
    background-color: var(--color-status-green);
    border-color: var(--color-status-green);
    color: var(--color-status-green-text);
}
@mixin skin-status-red {
    background-color: var(--color-status-red);
    border-color: var(--color-status-red);
    color: var(--color-status-red-text);
}
@mixin skin-status-yellow {
    background-color: var(--color-status-yellow);
    border-color: var(--color-status-yellow);
    color: var(--color-status-yellow-text);
}
*/
/*
    hover
    active
    disabled
*/
/*
    standard
    emphasis (primary)
    muted (secondary)
    light?
    disabled
    alert
    warning
    success
*/
/*
@mixin skin-button-important {
    background-color: var(--color-btn-important-bg);
    border-color: var(--color-btn-important-bg);
    color: var(--color-btn-std-text);
}
*/
/*
    read-write (standard)
    focus
    valid
    invalid (error)
    read-only (disabled)
    required
    x - optional
*/
#stellaMainSideNav {
  border-top-right-radius: var(--s2);
  border-bottom-right-radius: var(--s2);
  background-color: var(--color-sidenav-bg);
  font-size: var(--s2);
  -webkit-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
  bottom: 0;
  height: 100vh;
  max-width: 95%;
  overflow: auto;
  position: absolute;
  top: 0;
  left: -55ch;
  width: 55ch;
  z-index: var(--zindex-sidenav);
}

#side-nav-close {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#side-nav-open {
  cursor: pointer;
}

#side-nav-open-icon {
  color: var(--color-sidenav-open-icon);
  margin: 0 0 0 5px;
  font-size: var(--s4);
}

.st-sidenav-badge {
  border-radius: var(--s3);
  border: solid 1px;
  font-size: var(--s0);
  padding: 0 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-margin-start: var(--s0);
          margin-inline-start: var(--s0);
}

.st-sidenav-caption {
  margin-top: auto;
  margin-bottom: auto;
  -webkit-padding-start: var(--s0);
          padding-inline-start: var(--s0);
}

.st-sidenav-caption-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 85%;
      flex-basis: 85%;
}

.st-sidenav-childitem {
  color: var(--color-sidenav-fg);
  font-size: var(--s1);
  -webkit-padding-start: 16.5%;
          padding-inline-start: 16.5%;
  margin-top: auto;
  margin-bottom: auto;
}
.st-sidenav-childitem:hover {
  color: var(--color-sidenav-fg-hover);
  font-weight: bold;
}

.st-sidenav-childitems-container {
  background-color: var(--color-sidenav-tile-bg);
  border-radius: var(--s3);
}

.st-sidenav-content {
  background-color: var(--color-sidenav-tile-bg);
  border-radius: var(--s3);
  color: var(--color-sidenav-fg);
  cursor: pointer;
  font-size: var(--font1);
  font-weight: bold;
  padding: var(--s-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 80%;
      flex-basis: 80%;
}
.st-sidenav-content:hover {
  color: var(--color-sidenav-fg-hover);
}

.st-sidenav-content-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.st-sidenav-expansion {
  background-color: transparent;
  color: var(--color-sidenav-expansion-secondary);
  cursor: pointer;
  --fa-primary-color: var(--color-sidenav-expansion-primary);
  --fa-secondary-color: var(--color-sidenav-expansion-secondary);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.st-sidenav-expansion:hover {
  color: var(--color-sidenav-expansion-hover);
  --fa-secondary-color: var(--color-sidenav-expansion-hover);
}

.st-sidenav-expansion-container {
  background-color: transparent;
  color: var(--color-sidenav-expansion-secondary);
  cursor: pointer;
  --fa-primary-color: var(--color-sidenav-expansion-primary);
  --fa-secondary-color: var(--color-sidenav-expansion-secondary);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
  display: none;
  text-align: right;
}
.st-sidenav-expansion-container:hover {
  color: var(--color-sidenav-expansion-hover);
  --fa-secondary-color: var(--color-sidenav-expansion-hover);
}

.st-sidenav-icon-gauge {
  -ms-flex-preferred-size: 15%;
      flex-basis: 15%;
  text-align: center;
}

.st-sidenav-link {
  color: var(--color-sidenav-link);
  cursor: pointer;
}
.st-sidenav-link:hover {
  color: var(--color-text-important);
}

.st-sidenav-tile {
  background-color: var(--color-sidenav-tile-bg);
  border-color: var(--color-sidenav-tile-bg);
  border-width: 2px;
  border-radius: var(--s3);
  border-style: solid;
  -webkit-margin-before: var(--s-5) !important;
          margin-block-start: var(--s-5) !important;
}
.st-sidenav-tile:hover {
  color: var(--color-sidenav-fg-hover);
  font-weight: bold;
}

.st-slug {
  margin-top: var(--s-2);
}

.st-accordion {
  background-color: var(--color-white);
  border-radius: var(--default-border-radius);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 0.5rem;
}

.st-accordion[aria-expanded=true] > .st-accordion-header {
  color: var(--color-important);
  font-weight: bold;
}

.st-accordion-header {
  background-color: var(--color-gray-lt);
  border: solid 1px var(--color-gray-dk);
  color: var(--color-gray-exdk);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  padding: var(--s-7) var(--s-2);
  font-size: var(--font1);
}

.st-accordion-content {
  border: var(--default-border-width) solid var(--color-gray-exdk);
  border-radius: 0 0 0.25rem 0.25rem;
}

.st-accordion-row:hover {
  background-color: var(--color-gray-lt);
}

.st-accordion-badge {
  border: var(--default-border-width) solid var(--color-gray-exdk);
  border-radius: var(--s-1);
  color: var(--color-gray-exdk);
  font-weight: bold;
  height: var(--s3);
  max-height: var(--s3);
  -webkit-margin-start: var(--s1);
          margin-inline-start: var(--s1);
  text-align: center;
  min-width: 5ch;
}

.st-accordion-badge-std {
  background-color: transparent;
  border: 1px solid var(--color-gray-exdk);
  color: var(--color-gray-exdk);
}

.st-accordion-badge-light {
  background-color: var(--color-white);
  border: 1px solid var(--color-important);
  color: var(--color-important);
}

.st-accordion-badge[data-stella-is-passing-score=true] {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-fg);
}

.st-accordion-badge[data-stella-is-passing-score=false] {
  background-color: var(--color-alert);
  border-color: var(--color-alert);
  color: var(--color-alert-fg);
}

.st-filemanager-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1000;
}

.st-filemanager-dialog {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  max-width: 850px;
  width: 90vw;
  max-height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.st-filemanager-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-gray-dk);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* Added: Prevent shrinking */
}

.st-filemanager-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
}

.st-filemanager-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.25rem 1rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-gray-lt);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* Added: Prevent shrinking */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* Added: Allow wrapping */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.st-filemanager-button {
  background: none;
  border: 1px solid var(--color-gray-exdk);
  color: var(--color-gray-exdk);
  cursor: pointer;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Added: Make buttons flex containers */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* Added: Center align icon and text */
  gap: 0.25rem; /* Added: Space between icon and text */
  padding: 0.25rem 0.5rem; /* Added: Some padding for better touch targets */
  border-radius: var(--default-border-radius);
  white-space: nowrap; /* Added: Prevent text wrapping within buttons */
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease; /* Added: Smooth hover transition */
}

.st-filemanager-button:hover {
  border-color: var(--color-important);
  color: var(--color-important);
  background-color: var(--color-gray-exlt);
}

.st-filemanager-button-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0; /* Added: Prevent icons from shrinking */
}

/* Responsive toolbar adjustments */
@media (max-width: 768px) {
  .st-filemanager-toolbar {
    gap: 0.25rem; /* Reduce gap on smaller screens */
    padding: 0.25rem 0.5rem; /* Reduce padding */
  }
  .st-filemanager-button {
    font-size: 0.875rem; /* Smaller text on mobile */
    padding: 0.2rem 0.4rem; /* Smaller padding */
  }
}
@media (max-width: 600px) {
  .st-filemanager-button {
    /* Hide text labels on very small screens, show only icons */
    font-size: 0;
    padding: 0.3rem;
  }
  .st-filemanager-button-icon {
    font-size: 1rem !important; /* Ensure icons stay visible */
  }
  /* Keep tooltip functionality by showing title attribute */
  .st-filemanager-button:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
  }
  .st-filemanager-button {
    position: relative; /* Needed for tooltip positioning */
  }
}
.st-filemanager-breadcrumbs {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-gray-lt);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* Added: Prevent shrinking */
  white-space: nowrap; /* Added: Prevent line wrapping */
  overflow-x: auto; /* Added: Allow horizontal scrolling for long paths */
}

.st-filemanager-breadcrumbs span {
  cursor: pointer;
  color: var(--color-important);
}

.st-filemanager-breadcrumbs span + span::before {
  content: " / ";
  color: var(--color-gray-dk);
}

.st-filemanager-progress {
  height: 24px;
  background: var(--color-gray-exlt);
  border-bottom: 1px solid var(--color-gray-lt);
  position: relative;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.st-filemanager-progress .st-filemanager-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-emphasis);
  -webkit-transition: width 0.1s ease;
  transition: width 0.1s ease;
}

.st-filemanager-progress .st-filemanager-progress-label {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  line-height: 24px;
  font-size: 12px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
}

.st-filemanager-progress.fm-processing .st-filemanager-progress-bar {
  background: -webkit-gradient(linear, left top, right top, from(rgba(76, 175, 80, 0)), color-stop(50%, rgba(76, 175, 80, 0.5)), to(rgba(76, 175, 80, 0)));
  background: linear-gradient(to right, rgba(76, 175, 80, 0) 0%, rgba(76, 175, 80, 0.5) 50%, rgba(76, 175, 80, 0) 100%);
  -webkit-animation: indeterminate 1.5s linear infinite;
          animation: indeterminate 1.5s linear infinite;
  width: 100% !important;
}

@-webkit-keyframes indeterminate {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes indeterminate {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* Responsive adjustments for progress bar */
@media (max-width: 768px) {
  .st-filemanager-progress {
    height: 20px;
    margin-bottom: 0.4rem;
  }
  .st-filemanager-progress .st-filemanager-progress-label {
    line-height: 20px;
    font-size: 11px;
  }
}
@media (max-width: 600px) {
  .st-filemanager-progress {
    height: 18px;
    margin-bottom: 0.3rem;
  }
  .st-filemanager-progress .st-filemanager-progress-label {
    line-height: 18px;
    font-size: 10px;
  }
}
.st-filemanager-main {
  background-color: var(--color-white);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; /* Changed: Allow growing and shrinking */
  overflow-y: auto;
  padding: 0.5rem;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: 0.5rem;
  -ms-flex-line-pack: start;
      align-content: start; /* Added: Align items to top when scrolling */
}

/* Added: Custom scrollbar styling for webkit browsers */
.st-filemanager-main::-webkit-scrollbar {
  width: 8px;
}

.st-filemanager-main::-webkit-scrollbar-track {
  background: var(--color-gray-exlt);
  border-radius: 4px;
}

.st-filemanager-main::-webkit-scrollbar-thumb {
  background: var(--color-gray-md);
  border-radius: 4px;
}

.st-filemanager-main::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-dk);
}

.st-filemanager-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--default-border-radius);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: var(--s-1);
  background-color: var(--color-gray-exlt);
}

.st-filemanager-item span {
  display: block; /* make the label a block so width applies */
  max-width: 100%; /* constrain it to the container's width */
  white-space: normal; /* allow wrapping */
  word-break: break-word; /* break anywhere if needed as fallback */
  overflow-wrap: break-word; /* prefer breaking at "nice" points */
  -ms-hyphens: auto;
      hyphens: auto; /* Add automatic hyphenation */
  /* Enhanced word breaking for better readability */
  word-spacing: 0.1em; /* Slightly increase space between words */
  line-height: 1.2; /* Improve readability for multi-line text */
  text-align: center; /* Keep text centered */
  /* Break on camelCase - this targets capital letters */
  word-break: break-word;
}

/* Alternative approach using JavaScript for more precise camelCase breaking */
.st-filemanager-item span.long-caption {
  word-break: break-word;
  overflow-wrap: break-word;
  -ms-hyphens: auto;
      hyphens: auto;
}

.st-filemanager-item:hover {
  background: var(--color-gray-exlt);
}

.st-filemanager-item.selected {
  border: 2px solid var(--color-emphasis);
}

.st-filemanager-item i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.st-filemanager-item.newly-added {
  -webkit-animation: highlight-new-upload 2s ease-out;
          animation: highlight-new-upload 2s ease-out;
  -webkit-transform-origin: center;
          transform-origin: center;
}

@-webkit-keyframes highlight-new-upload {
  0% {
    background-color: rgba(76, 175, 80, 0.3);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  }
  50% {
    background-color: rgba(76, 175, 80, 0.2);
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@keyframes highlight-new-upload {
  0% {
    background-color: rgba(76, 175, 80, 0.3);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  }
  50% {
    background-color: rgba(76, 175, 80, 0.2);
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.st-filemanager-item svg {
  margin-bottom: 0.25rem;
}

.st-filemanager-item.deleting-fade {
  -webkit-animation: fm-delete-fade 0.8s ease-out forwards;
          animation: fm-delete-fade 0.8s ease-out forwards;
  pointer-events: none;
}

@-webkit-keyframes fm-delete-fade {
  0% {
    border: 2px solid var(--color-alert);
    -webkit-box-shadow: 0 0 10px var(--color-alert);
            box-shadow: 0 0 10px var(--color-alert);
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    border: 3px solid var(--color-alert);
    -webkit-box-shadow: 0 0 15px var(--color-alert);
            box-shadow: 0 0 15px var(--color-alert);
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0.6;
  }
  100% {
    border: 1px solid transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes fm-delete-fade {
  0% {
    border: 2px solid var(--color-alert);
    -webkit-box-shadow: 0 0 10px var(--color-alert);
            box-shadow: 0 0 10px var(--color-alert);
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    border: 3px solid var(--color-alert);
    -webkit-box-shadow: 0 0 15px var(--color-alert);
            box-shadow: 0 0 15px var(--color-alert);
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0.6;
  }
  100% {
    border: 1px solid transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}
.st-filemanager-item.deleting-grid {
  -webkit-animation: fm-delete-grid 1.2s ease-out forwards;
          animation: fm-delete-grid 1.2s ease-out forwards;
  pointer-events: none;
}

.st-filemanager-item.deleting-grid span {
  opacity: 0 !important;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

@-webkit-keyframes fm-delete-grid {
  0% {
    border: 2px solid var(--color-alert);
    -webkit-box-shadow: 0 0 10px var(--color-alert);
            box-shadow: 0 0 10px var(--color-alert);
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  60% {
    border: 3px solid var(--color-alert);
    -webkit-box-shadow: 0 0 15px var(--color-alert);
            box-shadow: 0 0 15px var(--color-alert);
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    border: 1px solid transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
}

@keyframes fm-delete-grid {
  0% {
    border: 2px solid var(--color-alert);
    -webkit-box-shadow: 0 0 10px var(--color-alert);
            box-shadow: 0 0 10px var(--color-alert);
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  60% {
    border: 3px solid var(--color-alert);
    -webkit-box-shadow: 0 0 15px var(--color-alert);
            box-shadow: 0 0 15px var(--color-alert);
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    border: 1px solid transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
}
.st-filemanager-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; /* Changed from center to allow wrapping */
  padding: 0.25rem 1rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--color-gray-lt);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  gap: 1rem;
  min-height: 1.5rem; /* Set minimum height to accommodate wrapping */
}

.fm-online-status {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-weight: 500;
  white-space: nowrap;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; /* Keep this centered vertically */
}

.st-filemanager-file-types-status {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  text-align: center;
  color: var(--color-gray-dk);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; /* Keep this centered vertically */
}

.st-filemanager-file-info {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; /* Don't grow, don't shrink */
  text-align: right;
  font-weight: 500;
  white-space: normal; /* Allow wrapping */
  word-break: break-word; /* Break long words if necessary */
  overflow-wrap: break-word; /* Modern browsers */
  -ms-hyphens: auto;
      hyphens: auto; /* Add hyphens for better breaking */
  max-width: 60%; /* Only limit width at very wide screens */
  min-width: 0;
  line-height: 1.2; /* Better line spacing for wrapped text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .st-filemanager-status {
    font-size: 0.75rem;
    gap: 0.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; /* Allow vertical alignment flexibility */
  }
  .st-filemanager-file-types-status {
    font-size: 0.7rem;
  }
  .st-filemanager-file-info {
    max-width: 70%; /* Give more space on smaller screens */
  }
}
@media (max-width: 600px) {
  .st-filemanager-status {
    font-size: 0.7rem;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
  }
  .st-filemanager-file-types-status {
    font-size: 0.65rem;
  }
  .st-filemanager-file-info {
    max-width: 80%; /* Even more space on mobile */
  }
}
/* On very small screens, hide file types completely and give full width to file info */
@media (max-width: 480px) {
  .st-filemanager-file-types-status {
    display: none;
  }
  .st-filemanager-status {
    gap: 0.5rem;
  }
  .st-filemanager-file-info {
    max-width: none; /* No width restriction when file types are hidden */
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; /* Take remaining space */
  }
}
/* For extremely long filenames, add a reasonable max-width only on very large screens */
@media (min-width: 1200px) {
  .st-filemanager-file-info {
    max-width: 500px; /* Only restrict on very large screens */
  }
}
.st-filemanager-thumb {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.st-filemanager-folder {
  color: var(--color-warning);
}

.st-filemanager-icon-wrapper {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}

/* Added: Responsive adjustments */
@media (max-width: 768px) {
  .st-filemanager-dialog {
    max-width: 95vw;
    max-height: 95vh;
  }
  .st-filemanager-main {
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 0.4rem;
    padding: 0.4rem;
  }
}
.st-filemanager-input-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1001;
}

.st-filemanager-input-dialog {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  min-width: 400px;
  max-width: 500px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.st-filemanager-input-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-dk);
}

.st-filemanager-input-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray-dk);
}

.st-filemanager-input-content {
  padding: 1rem;
}

.st-filemanager-input-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.st-filemanager-input-field {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-gray-dk);
  border-radius: var(--default-border-radius);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.st-filemanager-input-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
}

.st-filemanager-upload-spinner {
  -webkit-animation: fm-spin 1s linear infinite;
          animation: fm-spin 1s linear infinite;
  margin-right: 0.5rem;
  color: var(--color-white);
  font-size: 1em; /* Match the text size */
  display: inline-block;
  vertical-align: middle;
}

.fm-processing-spinner {
  -webkit-animation: fm-pulse-spin 1.5s ease-in-out infinite;
          animation: fm-pulse-spin 1.5s ease-in-out infinite;
  margin-right: 0.5rem;
  color: var(--color-white);
  display: inline-block;
  vertical-align: middle;
}

@-webkit-keyframes fm-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes fm-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes fm-pulse-spin {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
            transform: rotate(180deg) scale(1.1);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}
@keyframes fm-pulse-spin {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
            transform: rotate(180deg) scale(1.1);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}
.st-filemanager-progress .st-filemanager-progress-label {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  line-height: 24px;
  font-size: 12px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Responsive adjustments for spinners */
@media (max-width: 768px) {
  .st-filemanager-upload-spinner,
  .fm-processing-spinner {
    margin-right: 0.3rem;
    font-size: 1em; /* Still match text size */
  }
  .st-filemanager-progress .st-filemanager-progress-label {
    line-height: 20px;
    font-size: 11px;
  }
}
/* Thumbnail Modal */
.st-filemanager-thumbnail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1002;
}

.st-filemanager-thumbnail-dialog {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  min-width: 600px;
  max-width: 800px;
  max-height: 90vh;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.st-filemanager-thumbnail-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-dk);
}

.st-filemanager-thumbnail-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray-dk);
}

.st-filemanager-thumbnail-content {
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
}

.st-filemanager-thumbnail-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  min-height: 200px;
}

.st-filemanager-thumbnail-item {
  position: relative;
  border: 3px solid transparent; /* Increased from 2px */
  border-radius: var(--default-border-radius);
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  overflow: hidden;
  background: var(--color-white); /* Add background for better contrast */
}

.st-filemanager-thumbnail-item:hover {
  border-color: var(--color-gray-dk);
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.st-filemanager-thumbnail-item.selected {
  border-color: var(--color-emphasis);
  border-width: 4px; /* Even thicker border for selected */
  -webkit-box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4);
          box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4); /* Stronger shadow */
  -webkit-transform: scale(1.05);
          transform: scale(1.05); /* Slight scale increase */
}

.st-filemanager-thumbnail-item.selected::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--color-emphasis);
  border-radius: calc(var(--default-border-radius) + 2px);
  opacity: 0.3;
  pointer-events: none;
}

.st-filemanager-thumbnail-number {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}

/* Enhanced number styling for selected thumbnail */
.st-filemanager-thumbnail-item.selected .st-filemanager-thumbnail-number {
  background: var(--color-emphasis);
  color: white;
  font-weight: bold;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.st-filemanager-thumbnail-loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-gray-dk);
}

.st-filemanager-thumbnail-error {
  text-align: center;
  padding: 2rem;
  color: var(--color-important);
}

.st-filemanager-thumbnail-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-gray-lt);
  text-align: right;
}

/* Animation for thumbnail updates */
.st-filemanager-thumbnail-updated {
  -webkit-animation: st-filemanager-thumbnail-update 1s ease-out;
          animation: st-filemanager-thumbnail-update 1s ease-out;
}

@-webkit-keyframes st-filemanager-thumbnail-update {
  0% {
    background-color: rgba(0, 123, 255, 0.2);
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes st-filemanager-thumbnail-update {
  0% {
    background-color: rgba(0, 123, 255, 0.2);
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .st-filemanager-thumbnail-dialog {
    min-width: 90vw;
    max-width: 95vw;
  }
  .st-filemanager-thumbnail-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 600px) {
  .st-filemanager-thumbnail-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
  }
}
/* Confirmation Modal */
.st-filemanager-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1003;
}

.st-filemanager-confirm-dialog {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  min-width: 400px;
  max-width: 500px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.st-filemanager-confirm-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-dk);
}

.st-filemanager-confirm-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray-dk);
}

.st-filemanager-confirm-content {
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.st-filemanager-confirm-icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: var(--color-warning);
}

.st-filemanager-confirm-message {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1rem;
  line-height: 1.4;
}

.st-filemanager-confirm-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-gray-lt);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
}

/* Message Modal */
.st-filemanager-message-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1003;
}

.st-filemanager-message-dialog {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  min-width: 400px;
  max-width: 500px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.st-filemanager-message-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-dk);
}

.st-filemanager-message-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray-dk);
}

.st-filemanager-message-content {
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.st-filemanager-message-icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.st-filemanager-message-text p {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.st-filemanager-message-text ul {
  margin-top: 0.5rem;
}

/* Ensure proper spacing in message content */
.st-filemanager-message-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1rem;
  line-height: 1.4;
}

.st-filemanager-message-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-gray-lt);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .st-filemanager-confirm-dialog,
  .st-filemanager-message-dialog {
    min-width: 90vw;
    max-width: 95vw;
    margin: 0 1rem;
  }
  .st-filemanager-confirm-content,
  .st-filemanager-message-content {
    padding: 1rem;
  }
  .st-filemanager-confirm-footer,
  .st-filemanager-message-footer {
    padding: 0.75rem;
  }
}
/* Reference list styling */
.st-filemanager-reference-list {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.st-filemanager-reference-list li {
  margin: 0.25rem 0;
  line-height: 1.3;
  color: var(--color-gray-exdk);
}

.moving-grid {
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}

toggle-tabs [role=tablist] {
  list-style: none;
  margin: var(--toggle-tab-list-margin, 0 0 2em);
  padding: 0;
}

toggle-tabs [role=tablist] li {
  display: inline-block;
  margin: 0 var(--s-3);
}

toggle-tabs [role=tab] {
  /*
  color: var(--toggle-tab-link-color, currentColor);
  */
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  color: var(--color-gray-md);
  background-color: var(--color-gray-exdk);
  margin: var(--toggle-tab-link-margin, 0 0 0.25em);
  padding: var(--toggle-tab-link-padding, 0.5em 1em);
  text-decoration: none;
}

toggle-tabs [role=tab]:active,
toggle-tabs [role=tab]:hover {
  /*
  background-color: var(--toggle-tab-list-hover-bg-color, #f7f7f7);
  */
}

toggle-tabs [role=tab][aria-selected=true] {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  color: var(--color-gray-exdk);
  background-color: var(--color-gray-md);
  font-weight: bold;
  /*
  background-color: var(--toggle-tab-link-active-bg-color, #e5e5e5);
  */
}

#stToastContainer {
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  z-index: 99999;
  pointer-events: none;
}
#stToastContainer.st-toast-container-top {
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#stToastContainer.st-toast-container-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.st-toast {
  pointer-events: auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 2rem 2rem;
  border-radius: var(--default-border-radius);
  border: 3px solid transparent;
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  overflow: hidden;
  width: 80vw;
  max-width: 500px;
}
#stToastContainer.st-toast-container-center .st-toast {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
#stToastContainer.st-toast-container-center .st-toast.visible {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
#stToastContainer.st-toast-container-center .st-toast.hide {
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.st-toast.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.st-toast.hide {
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.st-toast-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  margin-right: 0.5rem;
}

.st-toast-title {
  font-weight: bold;
  font-size: var(--s1);
  line-height: 1.3;
  margin-bottom: 0.125rem;
  opacity: 1;
}

.st-toast-message {
  font-size: var(--s1);
  line-height: 1.5;
}

.st-toast-icon {
  margin-right: 0.625rem;
  margin-top: 0.125rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.st-toast-close {
  cursor: pointer;
  margin-left: auto;
  height: 30px !important;
  width: 30px !important;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

#stToastContainer .st-toast-progress {
  position: absolute;
  border-radius: var(--default-border-radius);
  bottom: 5px;
  left: 8px;
  height: 4px;
  right: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#stToastContainer .st-toast-progress.animate {
  -webkit-animation: toast-progress linear forwards var(--duration, 3000ms);
          animation: toast-progress linear forwards var(--duration, 3000ms);
}

@-webkit-keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
.st-toast-success {
  background-color: var(--color-tile-success-bg);
  border: 2px solid var(--color-tile-success-border);
  color: var(--color-tile-success-fg);
  border-color: var(--color-success);
}

#stToastContainer .st-toast-success .st-toast-progress {
  background-color: var(--color-success);
  opacity: 0.3;
}

.st-toast-alert {
  background-color: var(--color-tile-alert-bg);
  border: 2px solid var(--color-tile-alert-border);
  color: var(--color-tile-alert-fg);
  border-color: var(--color-alert);
}

#stToastContainer .st-toast-alert .st-toast-progress {
  background-color: var(--color-alert);
  opacity: 0.3;
}

.st-toast-info {
  background-color: var(--color-tile-emphasis-inverted-bg);
  border: 1px solid var(--color-tile-emphasis-inverted-border);
  color: var(--color-tile-emphasis-inverted-fg);
  border-color: var(--color-important);
}

#stToastContainer .st-toast-info .st-toast-progress {
  background-color: var(--color-important);
  opacity: 0.3;
}

.st-toast-warning {
  background-color: var(--color-tile-warning-bg);
  border: 2px solid var(--color-tile-warning-border);
  color: var(--color-tile-warning-fg);
  border-color: var(--color-warning);
}

#stToastContainer .st-toast-warning .st-toast-progress {
  background-color: var(--color-warning);
}

#stToastContainer.st-toast-container-center .st-toast {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.1);
  width: 90vw;
  max-width: 450px;
}
#stToastContainer.st-toast-container-center .st-toast .st-toast-title {
  font-size: 1em;
  margin-bottom: 0.25rem;
}
#stToastContainer.st-toast-container-center .st-toast .st-toast-message {
  font-size: 0.9em;
}

/* OK/Cancel Dialog Specific Styles */
.st-dialog-content-container {
  background: var(--color-white);
  border-radius: var(--default-border-radius);
  width: 90vw;
  max-width: 500px;
  min-width: 300px;
  height: auto;
  margin: auto;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.st-dialog-body {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--default-padding);
  min-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 15px;
}

.st-dialog-message {
  font-size: var(--s1);
  line-height: 1.5;
  color: var(--color-text-default);
  word-wrap: break-word;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.st-dialog-footer {
  padding: var(--default-padding);
  border-top: 1px solid var(--color-text-default);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 10px;
  background-color: var(--color-gray-exlt);
  border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
}

@media (max-width: 480px) {
  .st-dialog-content-container {
    width: 95vw;
    margin: 20px auto;
  }
  .st-dialog-footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .st-dialog-button {
    width: 100%;
    margin-bottom: 8px;
  }
  .st-dialog-button:last-child {
    margin-bottom: 0;
  }
}
.st-badge {
  border-radius: var(--s3);
  border: solid 1px;
  font-size: var(--s0);
  padding: 0 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-margin-start: var(--s0);
          margin-inline-start: var(--s0);
  -webkit-margin-end: var(--s0);
          margin-inline-end: var(--s0);
}

.st-badge-small {
  border-radius: var(--s3);
  border: solid 1px;
  font-size: var(--s-1);
  padding: 0 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-margin-start: var(--s-1);
          margin-inline-start: var(--s-1);
  -webkit-margin-end: var(--s-1);
          margin-inline-end: var(--s-1);
}

.st-box {
  display: block;
  padding: var(--narrow-padding);
  /*border-width: var(--border0);*/
  /* ↓ For high contrast mode
   outline: var(--border-thin) solid transparent;
   outline-offset: calc(var(--border-thin) * -1);
  */
}

.st-box-row {
  display: block;
  padding: var(--narrow-padding) 0;
  /*border-width: var(--border0);*/
  /* ↓ For high contrast mode
   outline: var(--border-thin) solid transparent;
   outline-offset: calc(var(--border-thin) * -1);
  */
}

.breadcrumb {
  -ms-flex-wrap: wrap;
  background-color: #c9c9c9;
  border-radius: 0.25rem;
  color: var(--color-text-important);
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  font-family: "Roboto Condensed";
  font-size: 15px;
  font-weight: bold;
  list-style: none;
  margin: 0;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

.breadcrumb-item {
  color: var(--color-text-important);
}

.st-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-btn-std-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-std-bg);
  color: var(--color-btn-std-text);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 1.8rem;
  padding: var(--s-6) var(--s2);
  width: auto;
}
.st-button:active {
  border-color: var(--color-btn-std-text);
}
.st-button:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-button-round {
  display: block;
  height: var(--s5);
  width: var(--s5);
  border-radius: 50%;
  margin: 0 var(--s-3);
  font-size: var(--s1);
}

.st-icon-button {
  padding: var(--s-6) var(--s-2);
}

/*
.st-button-important{
    @include skin-button-important;
}
*/
.st-button-emphasis {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}
.st-button-emphasis:hover {
  font-weight: bold;
}
.st-button-emphasis:active {
  border-color: var(--color-btn-emphasis-text);
}
.st-button-emphasis:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}
.st-button-emphasis:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-button-alert {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-alert);
  border-color: var(--color-alert);
  color: var(--color-alert-fg);
}
.st-button-alert:hover {
  color: var(--color-important);
  border-color: var(--color-important);
}
.st-button-alert:active {
  border-color: var(--color-btn-alert-text);
}
.st-button-alert:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-button-success {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-fg);
}
.st-button-success:hover {
  font-weight: bold;
}
.st-button-success:active {
  border-color: var(--color-btn-success-text);
}
.st-button-success:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-dropdown-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  min-height: 1.8rem;
}

.st-button-muted {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-btn-muted-bg);
  border-color: var(--color-btn-muted-bg);
  color: var(--color-btn-muted-text);
}
.st-button-muted:hover {
  color: var(--color-gray-exdk);
}
.st-button-muted:active {
  border-color: var(--color-btn-std-text);
}
.st-button-muted:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-button-light {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-btn-light-bg);
  border: 1px solid var(--color-btn-light-border);
  color: var(--color-btn-light-text);
}
.st-button-light:hover {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}
.st-button-light:active {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}
.st-button-light:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-button-back-to-top {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}
.st-button-back-to-top:hover {
  font-weight: bold;
}
.st-button-back-to-top:active {
  border-color: var(--color-btn-emphasis-text);
}
.st-button-back-to-top:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}
.st-button-back-to-top:hover {
  color: var(--color-white);
  font-weight: normal;
}

.st-tile-page-header-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-btn-light-bg);
  border: 1px solid var(--color-btn-light-border);
  color: var(--color-btn-light-text);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--s0);
  font-weight: bold;
  height: 50%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2px;
  padding: var(--s-5);
  padding-left: 1.25rem;
  width: 200px;
}
.st-tile-page-header-button:active {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}
.st-tile-page-header-button:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}
.st-tile-page-header-button:hover {
  border: 1px solid var(--color-gray-exdk);
}

/*
.st-index-tile-button {
    @include skin-button;
        @include skin-button-light;
    align-items: center;
    display: flex;
    font-size: var(--s0);
    justify-content: space-between;
    padding: var(--s-5);
    padding-inline-start: var(--s-1);
    }
*/
.st-fixed-action-btn {
  position: fixed;
  right: 15px;
  bottom: 40px;
  z-index: 998;
  margin-bottom: 0;
  overflow: hidden;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 15px;
}

.st-btn-floating {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0;
  margin: 10px;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.st-dropdown {
  background-color: var(--color-dropdown-bg);
  border-color: var(--color-dropdown-bg);
  border-radius: var(--default-border-radius);
  color: var(--color-dropdown-text);
  font-size: var(--s0);
}
.st-dropdown:hover {
  color: var(--color-important);
}

.st-file-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-dk);
  border-radius: 9999px;
  color: var(--color-text-important);
  padding: 0.3em 0.8em;
  font-size: var(--s0);
  margin: 0.2em;
  white-space: nowrap;
  cursor: pointer;
}

.st-file-chip span {
  margin-right: 0.5em;
}

.st-file-chip-delete-icon {
  cursor: pointer;
  /*
  background-color: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  font-size: 0.9em;
  line-height: 1.2em;
  text-align: center;
  padding: 0;
  */
}

.st-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.st-flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.st-flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.st-flex-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.st-flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.st-flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.st-flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.st-flex-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.st-flex-basis-5 {
  -ms-flex-preferred-size: 5%;
      flex-basis: 5%;
}

.st-flex-basis-10 {
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
}

.st-flex-basis-15 {
  -ms-flex-preferred-size: 15%;
      flex-basis: 15%;
}

.st-flex-basis-20 {
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
}

.st-flex-basis-25 {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}

.st-flex-basis-30 {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
}

.st-flex-basis-35 {
  -ms-flex-preferred-size: 35%;
      flex-basis: 35%;
}

.st-flex-basis-40 {
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
}

.st-flex-basis-45 {
  -ms-flex-preferred-size: 45%;
      flex-basis: 45%;
}

.st-flex-basis-50 {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.st-flex-basis-55 {
  -ms-flex-preferred-size: 55%;
      flex-basis: 55%;
}

.st-flex-basis-60 {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.st-flex-basis-65 {
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
}

.st-flex-basis-70 {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
}

.st-flex-basis-80 {
  -ms-flex-preferred-size: 80%;
      flex-basis: 80%;
}

.st-flex-basis-85 {
  -ms-flex-preferred-size: 85%;
      flex-basis: 85%;
}

.st-flex-basis-90 {
  -ms-flex-preferred-size: 90%;
      flex-basis: 90%;
}

.st-flex-basis-95 {
  -ms-flex-preferred-size: 95%;
      flex-basis: 95%;
}

.st-flex-basis-100 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.st-bold {
  font-weight: bold;
}

.st-fs-6 {
  font-size: var(--font-6);
}

.st-fs-5 {
  font-size: var(--font-5);
}

.st-fs-4 {
  font-size: var(--font-4);
}

.st-fs-3 {
  font-size: var(--font-3);
}

.st-fs-2 {
  font-size: var(--font-2);
}

.st-fs-1 {
  font-size: var(--font-1);
}

.st-fs0 {
  font-size: var(--font0);
}

.st-fs1 {
  font-size: var(--font1);
}

.st-fs2 {
  font-size: var(--font2);
}

.st-fs3 {
  font-size: var(--font3);
}

.st-fs4 {
  font-size: var(--font4);
}

.st-fs5 {
  font-size: var(--font5);
}

.st-fs6 {
  font-size: var(--font6);
}

.st-emphasis {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}

.st-emphasis-inverted {
  background-color: var(--color-emphasis-fg);
  border-color: var(--color-emphasis-fg);
  color: var(--color-emphasis);
}

.st-icon {
  -webkit-padding-end: var(--s-3);
          padding-inline-end: var(--s-3);
}

.st-icon[data-stella-state=unchecked] {
  --fa-primary-color: var(--color-gray-lt);
  --fa-secondary-color: var(--color-gray-md);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .5;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.st-icon-flippable {
  padding-inline: var(--s-3);
}

.st-icon-alert {
  color: var(--color-alert);
}

.st-icon-emphasis {
  color: var(--color-emphasis);
  --fa-primary-color: var(--color-emphasis);
  --fa-secondary-color: var(--color-emphasis);
}

.st-icon-emphasis-inverted {
  --fa-primary-color: var(--color-emphasis);
  --fa-secondary-color: var(--color-white);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-success {
  color: var(--color-success);
}

.st-icon-alert-duotone {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-alert);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-emphasis-duotone {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-emphasis);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-success-duotone {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-success);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-success-inverted-duotone {
  --fa-primary-color: var(--color-success);
  --fa-secondary-color: var(--color-white);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-warning-duotone {
  --fa-primary-color: var(--color-warning);
  --fa-secondary-color: var(--color-gray-exdk);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-icon-unchecked-duotone {
  --fa-primary-color: var(--color-gray-lt);
  --fa-secondary-color: var(--color-gray-md);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.stella-icon-green {
  color: var(--color-status-notoverdue);
}

.stella-icon-red {
  color: var(--color-status-overdue);
}

.stella-icon-yellow {
  color: var(--color-status-duesoon);
}

.st-button-icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50% !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 3px;
  width: 24px;
}
.st-button-icon--emphasis {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-emphasis);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.st-button-icon--emphasis :hover {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-emphasis);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.st-button-icon--alert {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-alert);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}
.st-button-icon--success {
  --fa-primary-color: var(--color-white);
  --fa-secondary-color: var(--color-success);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

.st-label {
  border-radius: var(--default-border-radius);
  padding-inline: var(--s-1);
}

.st-label-alert {
  background-color: var(--color-alert);
  border-color: var(--color-alert);
  color: var(--color-alert-fg);
  border-radius: var(--default-border-radius);
  padding-inline: var(--s-1);
}

.st-label-emphasis {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
  border-radius: var(--default-border-radius);
  padding-inline: var(--s-1);
}

.st-label-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-fg);
  border-radius: var(--default-border-radius);
  padding-inline: var(--s-1);
}

.margin-top {
  margin-top: var(--s-1);
}

.st-text-center {
  text-align: center;
}

.st-text-left {
  text-align: left;
}

.st-text-right {
  text-align: right;
}

.st-text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-width-100 {
  width: 100%;
}

.st-zindex-1000 {
  z-index: 1000;
}

.st-sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.st-sidebar > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.st-stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.st-stack > * + * {
  -webkit-margin-before: var(--s0);
          margin-block-start: var(--s0);
}

.st-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.st-switcher > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.st-switcher > div {
  min-width: 400px;
}

.st-switcher-left {
  position: relative;
}

.st-switcher-right {
  position: relative;
}

.st-text-alert {
  color: var(--color-alert);
}

.st-text-light {
  color: var(--color-text-lt);
}

.st-text-emphasis {
  color: var(--color-emphasis);
}

.st-text-important {
  color: var(--color-important);
}

.st-text-success {
  color: var(--color-success);
}

.st-text-warning {
  color: var(--color-warning);
}

.st-text-bold {
  font-weight: bold;
}

textarea {
  overflow: auto;
  resize: vertical;
  width: 100%;
}
textarea textarea:focus {
  outline: 1px solid var(--color-emphasis);
}

.st-tile {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  display: block;
  margin-top: var(--s-5);
}

.st-tile[data-stella-state=active] {
  background-color: var(--color-tile-active-bg);
  border: 2px solid var(--color-tile-active-border);
  -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-tile-active-fg);
  font-weight: bold;
}
.st-tile[data-stella-state=active] .st-tile-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: red;
  border-color: var(--color-gray-md);
  border-radius: var(--s3);
  color: var(--color-gray-dk);
}
.st-tile[data-stella-state=active] .st-tile-button:hover {
  background-color: var(--color-gray-lt);
  border-color: var(--color-gray-lt);
  color: var(--color-gray-exdk);
}

.st-tile[data-stella-state=alert] {
  background-color: var(--color-tile-alert-bg);
  border: 2px solid var(--color-tile-alert-border);
  color: var(--color-tile-alert-fg);
}

.st-tile[data-stella-state=disabled] {
  background-color: var(--color-tile-inactive-bg);
  border: 1px solid var(--color-tile-inactive-border);
  color: var(--color-tile-inactive-fg);
}
.st-tile[data-stella-state=disabled]:active {
  border-color: var(--color-black);
}
.st-tile[data-stella-state=disabled] .st-tile-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-gray-md);
  border-color: var(--color-gray-md);
  border-radius: var(--s3);
  color: var(--color-gray-dk);
  cursor: pointer;
}
.st-tile[data-stella-state=disabled] .st-tile-button:hover {
  background-color: var(--color-gray-lt);
  border-color: var(--color-gray-lt);
  color: var(--color-gray-dk);
}

.st-tile[data-stella-state=inactive] {
  background-color: var(--color-tile-inactive-bg);
  border: 1px solid var(--color-tile-inactive-border);
  color: var(--color-tile-inactive-fg);
}
.st-tile[data-stella-state=inactive]:active {
  border-color: var(--color-black);
}
.st-tile[data-stella-state=inactive] .st-tile-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-gray-md);
  border-color: var(--color-gray-md);
  border-radius: var(--s3);
  color: var(--color-gray-dk);
  cursor: pointer;
}
.st-tile[data-stella-state=inactive] .st-tile-button:hover {
  background-color: var(--color-gray-lt);
  border-color: var(--color-gray-lt);
  color: var(--color-gray-dk);
}

.st-tile[data-stella-state=inactive] [data-stella-role=checklist-button] {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.st-tile[data-stella-state=inactive] [data-stella-state=unchecked] {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.st-tile[data-stella-state=emphasis] {
  background-color: var(--color-tile-emphasis-bg);
  border: 2px solid var(--color-tile-emphasis-border);
  color: var(--color-tile-emphasis-fg);
}

.st-tile[data-stella-state=emphasis-inverted] {
  background-color: var(--color-tile-emphasis-inverted-bg);
  border: 1px solid var(--color-tile-emphasis-inverted-border);
  color: var(--color-tile-emphasis-inverted-fg);
}

.st-tile[data-stella-state=inactive] {
  background-color: var(--color-tile-inactive-bg);
  border: 1px solid var(--color-tile-inactive-border);
  color: var(--color-tile-inactive-fg);
}
.st-tile[data-stella-state=inactive]:active {
  border-color: var(--color-black);
}
.st-tile[data-stella-state=inactive] .st-tile-button {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-gray-md);
  border-color: var(--color-gray-md);
  border-radius: var(--s3);
  color: var(--color-gray-dk);
  cursor: pointer;
}
.st-tile[data-stella-state=inactive] .st-tile-button:hover {
  background-color: var(--color-gray-lt);
  border-color: var(--color-gray-lt);
  color: var(--color-gray-dk);
}

.st-tile[data-stella-state=normal] {
  background-color: var(--color-tile-normal-bg);
  border: 1px solid var(--color-tile-normal-border);
  color: var(--color-tile-normal-fg);
}

.st-tile[data-stella-state=success] {
  background-color: var(--color-tile-success-bg);
  border: 2px solid var(--color-tile-success-border);
  color: var(--color-tile-success-fg);
}

.st-tile[data-stella-state=success] span,
.st-tile[data-stella-state=success] i {
  visibility: visible;
}

.st-tile[data-stella-state=warning] {
  background-color: var(--color-tile-warning-bg);
  border: 2px solid var(--color-tile-warning-border);
  color: var(--color-tile-warning-fg);
}

.st-tile[data-stella-role=header] {
  background-color: var(--color-tile-header-bg);
  border: 1px solid var(--color-tile-header-border);
  color: var(--color-tile-header-fg);
}

.st-tile[data-stella-role=element-content] {
  background-color: var(--color-bg-exlt);
  border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
  border: 1px solid var(--color-gray-dk);
  font-size: var(--s2);
  margin: 0;
  width: 100%;
}

.st-tile[data-stella-role=element-header] {
  background-color: var(--color-tile-header-bg);
  border: 1px solid var(--color-tile-header-border);
  color: var(--color-tile-header-fg);
  border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
  border: 1px solid var(--color-gray-dk);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--s2);
  margin: 0;
}

.st-tile-std {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-tile-std-bg);
  border-color: var(--color-tile-std-border);
  border-width: var(--default-border-width);
  border-radius: var(--default-border-radius);
  color: var(--color-text-important);
}
.st-tile-std:active {
  border-color: var(--color-text-default);
}

.st-tile-light {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-tile-light-bg);
  border-color: var(--color-text-default);
  border-radius: var(--default-border-radius);
  color: var(--color-text-default);
}
.st-tile-light:hover {
  border-color: var(--color-gray-dk);
  color: var(--color-gray-dk);
}

.st-tile-light a {
  color: var(--color-link-default);
}
.st-tile-light a:hover {
  color: var(--color-link-hover);
}

.st-tile-alert {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-alert);
  border-color: var(--color-alert);
  color: var(--color-alert-fg);
}

.st-tile-emphasis {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}

.st-tile-emphasis-inverted {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-emphasis-fg);
  border-color: var(--color-emphasis-fg);
  color: var(--color-emphasis);
}

.st-tile-success {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-fg);
}

.st-tile-page-header {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-page-header-bg);
  border-radius: var(--s1);
  color: var(--color-page-header-fg);
  font-size: var(--s2);
  font-weight: bold;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  height: auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-bottom: 1px;
}

.st-tile-index-content {
  border-radius: var(--default-border-radius);
  padding: var(--default-padding);
  background-color: var(--color-tile-std-bg);
  border-color: var(--color-tile-std-border);
  border-width: var(--default-border-width);
  border-radius: var(--default-border-radius);
  color: var(--color-text-important);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  font-weight: bold;
  margin-bottom: 1px;
}
.st-tile-index-content:active {
  border-color: var(--color-text-default);
}
.stella-main {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#mainContentContainer {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gray-md);
}

.st-site-header {
  background-color: var(--color-siteheader-bg);
  color: var(--color-siteheader-fg);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
  padding: 0 var(--default-padding);
}

.st-site-concept-name {
  color: var(--color-text-lt);
  font-size: 2vmin;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#siteConceptLogo {
  margin: 2px 0;
}

#feedbackLink {
  cursor: pointer;
  z-index: 1000;
}

#loginPageBody {
  background: url(../../Content/Backgrounds/Stella-BG-Gradient.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media (min-width: 768px) {
  #loginPageBody {
    background-image: url(../../Content/Backgrounds/Stella-BG-Gradient.jpg);
  }
}

#nothingToShowDiv {
  display: none;
  margin-top: 25px;
  padding-left: 0;
}

#myTrainingHeaderContainer {
  background-color: var(--color-page-header-bg);
  margin: 0 var(--default-padding);
  z-index: 1000;
  border-radius: var(--default-border-radius);
}

.header-container-stacked {
  height: var(--headerHeight);
}

/*
.st-mytraining-header {
    @include skin-page-header;
    align-items: center;
    display: flex;
    height: 10vh;
    justify-content: center;
    min-height: 5rem !important;
    margin-bottom: var(--s-6);
    position: relative;
    //width: 50%;
}
*/
.st-mytraining-header-emphasis {
  background-color: var(--color-emphasis);
  border-radius: var(--s1);
  color: var(--color-page-header-fg);
  font-weight: bold;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.st-mytraining-header-text {
  color: var(--color-white);
  font-size: var(--s1);
  font-weight: normal;
}

.st-mytraining-header-text-small {
  color: var(--color-white);
  font-size: var(--s-1);
  font-weight: normal;
}

#myTrainingHeaderLeft {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
}

#myTrainingHeaderRight {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding: var(--s-5) var(--s1) var(--s-5) var(--s1);
}

.st-mytraining-carousel {
  background-color: var(--color-mytraining-carousel-container);
  border-radius: var(--s1);
  color: var(--color-text-important);
}

#myTrainingTraineeHeaderContainer {
  -ms-flex-line-pack: space-evenly;
      align-content: space-evenly;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 15rem;
}

#myTrainingTraineeHeaderCaption {
  font-size: var(--s2);
}

#myTrainingTraineeHeaderRoleContainer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--s-4);
}

#traineeHeaderTrainingRoleSelector {
  padding: 2px;
  max-width: 17rem;
}

.st-mytraining-roleselector {
  background-color: var(--color-dropdown-bg);
  border-color: var(--color-dropdown-bg);
  border-radius: var(--default-border-radius);
  color: var(--color-dropdown-text);
  font-size: var(--s0);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-mytraining-roleselector:hover {
  color: var(--color-important);
}
.st-mytraining-roleselector:hover {
  color: var(--color-text-important);
}

#myTrainingTraineeHeaderGauge {
  -webkit-margin-end: var(--s-2);
          margin-inline-end: var(--s-2);
}

#myTrainingTraineeNameContainer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: var(--s-4);
}

#myTrainingNextUpHeaderContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

#myTrainingNextCourseLabel {
  font-size: var(--s-1);
  padding: var(--s-7) var(--s0) var(--s-7) var(--s0);
  width: auto;
}

#myTrainingNextCourseNextActionButton {
  font-size: var(--s-1);
  padding: var(--s-6) var(--s2);
}

.st-mytraining-panel-maximized {
  opacity: 1;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  visibility: visible;
  width: 100% !important;
}

.st-mytraining-panel-minimized {
  opacity: 0;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  visibility: hidden;
  width: 0 !important;
}

.st-mytraining-panel-hidden {
  display: none !important;
}

.st-mytraining-panel-visible {
  display: block;
}

#myTrainingCourseGroups {
  display: block;
  width: 50%;
}

.st-mytraining-coursegroup {
  background-color: var(--color-mytraining-coursegroup-bg);
  color: var(--color-mytraining-coursegroup-fg);
  border-radius: var(--default-border-radius);
  border-width: var(--default-border-width);
  padding: 0;
}
.st-mytraining-coursegroup[data-state=active] {
  background-color: var(--color-tile-std-bg);
  color: var(--color-mytraining-coursegroup-active-fg);
  background-color: var(--color-mytraining-coursegroup-active-bg);
  border: var(--default-border-width) solid var(--color-mytraining-coursegroup-active-bg);
  font-weight: bold;
}

.st-mytraining-coursegroup-notification {
  font-size: var(--s-1);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-transform: uppercase; /*!!!*/
  font-weight: normal;
}
.st-mytraining-coursegroup-notification[data-notification-state=none] {
  visibility: hidden;
}
.st-mytraining-coursegroup-notification[data-notification-state=complete] {
  background-color: var(--color-status-complete);
  border-color: var(--color-status-complete);
  color: var(--color-status-complete-fg);
}
.st-mytraining-coursegroup-notification[data-notification-state=due-tomorrow] {
  background-color: var(--color-status-duesoon);
  border-color: var(--color-status-duesoon);
  color: var(--color-status-duesoon-fg);
}
.st-mytraining-coursegroup-notification[data-notification-state=due-today] {
  background-color: var(--color-status-duesoon);
  border-color: var(--color-status-duesoon);
  color: var(--color-status-duesoon-fg);
}
.st-mytraining-coursegroup-notification[data-notification-state=overdue] {
  background-color: var(--color-status-overdue);
  border-color: var(--color-status-overdue);
  color: var(--color-status-overdue-fg);
}

.st-mytraining-coursegroup-title {
  font-size: var(--s1);
}

#backToCourseGroupsIcon {
  cursor: pointer;
  display: none;
}

#myTrainingCourseListHeaderContainer {
  height: 5vh;
  min-height: var(--s5);
}

#myTrainingCourseContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}

#myTrainingCourses {
  display: block;
  width: 50%;
}

#myTrainingCourseListCaption {
  background-color: var(--color-btn-std-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-std-bg);
  color: var(--color-btn-std-text);
  background-color: var(--color-mytraining-coursegroup-active-bg);
  color: var(--color-text-important);
  border-radius: var(--s1);
  height: auto;
  padding-left: var(--s6);
  padding-bottom: var(--s-4);
  padding-top: var(--s-4);
  width: 100%;
}
#myTrainingCourseListCaption:active {
  border-color: var(--color-btn-std-text);
}
#myTrainingCourseListCaption:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}

.st-mytraining-courselist-coursecaption {
  font-size: var(--s1);
  color: var(--color-important);
}

.st-mytraining-courselist-divider {
  height: 1px;
  border: none;
  margin: 0 0.5rem;
}

.st-mytraining-courselist-header-panel-maximized {
  padding-left: var(--s0) !important;
}

.st-mytraining-courselist-backicon-panel-maximized {
  display: block !important;
}

.st-mytraining-course {
  background-color: var(--color-tile-std-bg);
  border-color: var(--color-tile-std-border);
  border-width: var(--default-border-width);
  border-radius: var(--default-border-radius);
  color: var(--color-text-important);
  padding: var(--s1) var(--s3);
  border-radius: var(--default-border-radius);
  border-width: var(--default-border-width);
  margin-bottom: var(--s-6);
  width: auto;
}
.st-mytraining-course:active {
  border-color: var(--color-text-default);
}
.st-mytraining-course[data-state=next-up] {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
}

.st-mytraining-coursetile-button {
  background-color: var(--color-emphasis);
  border-color: var(--color-emphasis);
  color: var(--color-emphasis-fg);
  border-radius: var(--s1);
  font-size: var(--s0);
  font-weight: normal;
  text-transform: uppercase;
}
.st-mytraining-coursetile-button:hover {
  font-weight: bold;
}
.st-mytraining-coursetile-button:active {
  border-color: var(--color-btn-emphasis-text);
}
.st-mytraining-coursetile-button:disabled {
  background-color: var(--color-btn-disabled-bg);
  border: var(--default-border-width) solid;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  pointer-events: none;
}
.st-mytraining-course-moreoptions {
  border-radius: var(--default-border-radius);
  border: var(--default-border-width) solid;
  cursor: pointer;
  font-size: var(--s0);
  text-transform: uppercase;
  background-color: var(--color-btn-light-bg);
  border: 1px solid var(--color-btn-light-bg);
  color: var(--color-btn-light-text);
}

.iframe-container {
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.responsive-iframe {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.st-report-content-container {
  background-color: var(--color-tile-std-bg);
  border-radius: var(--s3);
  color: var(--color-text-default);
  height: 100%;
}

#uciScoringPanelContainer {
  border-top-right-radius: var(--s2);
  border-bottom-right-radius: var(--s2);
  background-color: var(--color-sidenav-bg);
  font-size: var(--s2);
  -webkit-transition: left 0.4s ease-in-out;
  transition: left 0.4s ease-in-out;
  border-radius: var(--s2);
  bottom: 20px;
  height: 75vh;
  max-width: 95%;
  overflow: auto;
  position: absolute;
  left: -100ch;
  width: 100ch;
  z-index: var(--zindex-sidenav);
}