:root {
  --angle: 0deg;

  --pD: #284457;
  --p: #39627F;
  --pLight: #39627f70;

  --p2: #9DC9E3;
  --p3: #E2F0F8;

  --sh: #dd300e;
  --s: hsl(10, 88%, 46%);

  --success: hsl(100, 59%, 60%);

  --edit: hsl(210, 6%, 42%);
  --editl: hsl(210, 6%, 52%);
  --editd: hsl(210, 6%, 32%);

  --light: hsl(210, 17%, 90%);
  --lighter: hsl(210, 17%, 95%);
  --lightd: hsl(210, 17%, 78%);
}

/* w-100-mobile: full width on mobile breakpoint (max 767px) */
.w-100-mobile {
  width: auto;
}

@media (max-width: 767px) {
  .w-100-mobile {
    width: 100% !important;
  }
}

html {
  height: 100%;
  background: #223;
  display: grid;
  place-items: center;
}


/* img-cross: image with red diagonal line overlay for file removal UI */
.img-cross::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent 45%, red 50%, transparent 55%);
  filter: grayscale(0.2);
  scale: .8 .8;
  pointer-events: none;
  /* Ensures clicks go through */
}


/* modal-footer: reverse button order in modal footers (Bootstrap override) */
.modal-footer {
  flex-direction: row-reverse;
  justify-content: end;
}
/* cookie: slide-up entrance animation for cookie consent banner (CookiePage) */
.cookie {
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  animation: cookie-frames 300ms linear forwards;
}

@keyframes cookie-frames {
  to {
    transform: translateX(-50%) translateY(-30px);
    opacity: 1;
  }
}

@keyframes cookie-frames-mobile {
  to {
    transform: translateX(-50%) translateY(-150px);
    opacity: 1;
  }
}


@media screen and (max-width:1200px) {
  .cookie {

    animation: cookie-frames-mobile 300ms linear forwards;
  }
}

/* newspage: content area for rich-text news/ticket display; constrains image widths */
.newspage img {
  max-width: 100% !important;
}


/* section-rounded-dark-full: dark primary section block for landing page */
.section-rounded-dark-full {
  margin-top: 3em;
  margin-bottom: 3em;
  transition: all ease-in-out 300ms;
  background-color: var(--pD);
}

/* section-rounded-hero: hero gradient section on landing page */
.section-rounded-hero {
  margin-top: 3em;
  margin-bottom: 3em;
  transition: all ease-in-out 300ms;
  background: linear-gradient(145deg, #111e2a 0%, #1e3a52 45%, #2d6080 100%);
  position: relative;
  z-index: 0;
}

/* section-rounded-footer: dark footer section; same gradient as hero but no vertical margins */
.section-rounded-footer {
  transition: all ease-in-out 300ms;
  background: linear-gradient(145deg, #111e2a 0%, #1e3a52 45%, #2d6080 100%);
  position: relative;
  z-index: 0;
  margin-top: auto;
}

/* Force white text/links inside the footer section to override Bootstrap's link color */
.section-rounded-footer a {
  color: #fff !important;
}

/* section-rounded-dark-full-2: rounded dark card variant for landing page */
.section-rounded-dark-full-2 {
  transition: all ease-in-out 300ms;
  background-color: var(--pD);
  box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
  border-radius: 20px;
}

/* section-rounded-p3: light blue rounded section card; used widely across StartPage, FAQPage, DirectoryTree, etc. */
.section-rounded-p3 {
  transition: all ease-in-out 300ms;
  background-color: var(--p3);
  box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
  border-radius: 20px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}


/* animated-entry-card: fade-in entrance animation for entry cards (DirectoryViewPage) */
.animated-entry-card {
  opacity: 0;
  animation: animdated-entry-card-keyframes 300ms linear forwards;
}

/* animation-delay-1 through animation-delay-30: staggered animation delays for list reveals (StartPage, DirectoryTree) */
.animation-delay-1 {
  animation-delay: 0.05s;
}

.animation-delay-2 {
  animation-delay: 0.1s;
}

.animation-delay-3 {
  animation-delay: 0.15s;
}

.animation-delay-4 {
  animation-delay: 0.2s;
}

.animation-delay-5 {
  animation-delay: 0.25s;
}

.animation-delay-6 {
  animation-delay: 0.3s;
}

.animation-delay-7 {
  animation-delay: 0.35s;
}

.animation-delay-8 {
  animation-delay: 0.4s;
}

.animation-delay-9 {
  animation-delay: 0.45s;
}

.animation-delay-10 {
  animation-delay: 0.5s;
}

.animation-delay-11 {
  animation-delay: 0.55s;
}

.animation-delay-12 {
  animation-delay: 0.6s;
}

.animation-delay-13 {
  animation-delay: 0.65s;
}

.animation-delay-14 {
  animation-delay: 0.7s;
}

.animation-delay-15 {
  animation-delay: 0.75s;
}

.animation-delay-16 {
  animation-delay: 0.8s;
}

.animation-delay-17 {
  animation-delay: 0.85s;
}

.animation-delay-18 {
  animation-delay: 0.9s;
}

.animation-delay-19 {
  animation-delay: 0.95s;
}

.animation-delay-20 {
  animation-delay: 1s;
}

.animation-delay-21 {
  animation-delay: 1.05s;
}

.animation-delay-22 {
  animation-delay: 1.1s;
}

.animation-delay-23 {
  animation-delay: 1.15s;
}

.animation-delay-24 {
  animation-delay: 1.2s;
}

.animation-delay-25 {
  animation-delay: 1.25s;
}

.animation-delay-26 {
  animation-delay: 1.3s;
}

.animation-delay-27 {
  animation-delay: 1.35s;
}

.animation-delay-28 {
  animation-delay: 1.4s;
}

.animation-delay-29 {
  animation-delay: 1.45s;
}

.animation-delay-30 {
  animation-delay: 1.5s;
}

@keyframes animdated-entry-card-keyframes {
  to {
    opacity: 1;
  }
}

/* landing-reveal-pending / landing-reveal-up: scroll-triggered reveal animations for landing page sections (StartPage) */
.landing-reveal-pending {
  opacity: 0;
  transform: translateY(18px);
}

.landing-reveal-up {
  animation: landing_reveal_up_frames 560ms cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: opacity, transform;
}

@keyframes landing_reveal_up_frames {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .landing-reveal-pending,
  .landing-reveal-up {
    opacity: 1;
    transform: none;
    animation: none;
  }

}



/* video-section / video-section-small / video-section-large: video embed container sizing */
.video-section {
  transition: all ease-in-out 100ms;
  min-width: 350px !important;
}

.video-section-small {
  height: 33vh;
  width: 40vw;

}

.video-section-large {
  height: 50vh;
  width: 65vw;
}

/* animate-character: animated gradient text on StartPage hero headline */
.animate-character {
  text-transform: uppercase;
  background-image: linear-gradient(-225deg,
      var(--p) 0%,
      var(--p2) 29%,
      var(--p) 67%,
      var(--sh) 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

/* red-green-switch: toggle checkbox styled as red/green state button */
.red-green-switch:checked {
  background-color: var(--p) !important;
}

.red-green-switch {
  border: none !important;
}

.red-green-switch:focus {
  box-shadow: 0 0 0 .25rem rgb(30 99 118 / 27%) !important;
}

/* collapse-panel: animated expand/collapse outline for collapsible entry panels (DirectoryViewPage) */
.collapse-panel-child {
  animation: collapse-panel-child-frames 500ms linear forwards;
}

@keyframes collapse-panel-child-frames {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.collapse-panel-child--collapsed {
  animation: collapse-panel-child-collapsed-frames 500ms linear forwards;
}

@keyframes collapse-panel-child-collapsed-frames {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.collapse-panel {
  outline-style: inset;
  outline-color: var(--s);
  outline-width: 2px;
  outline-offset: -1px;
  animation: collapse-panel-outline-grow-frames 150ms linear forwards;
}

@keyframes collapse-panel-outline-grow-frames {
  0% {
    outline-width: 2px;
    outline-offset: -1px;
  }

  100% {
    outline-width: 3px;
    outline-offset: -3px;
  }
}
.red-green-switch:not(:checked),
.red-green-switch:not(:checked):focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: #a8a8a8 !important;
}
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* place-items-center: CSS grid place-items:center utility */
.place-items-center {
  place-items: center;
}
/* tiptap: rich text editor (tiptap/ProseMirror) table and paragraph styles */
.tiptap table th {
  background-color: var(--p) !important;
}

.tiptap table tr {
  border-color: #dee2e6;
  border-width: 1px 0 !important;
}

.tiptap table th,
.tiptap table td {
  border-width: 0 1px !important;
  border-color: #dee2e6;
}

/* tiptap-preview: read-only rich text preview area (AdminPage_News) */
.tiptap-preview table .border-0 {
  border: 2px dashed gray !important;
}

.tiptap p {
  min-height: 1em;
}

.tiptap {
  div:has(> div > img) {
    display: "inline-flex !important";

    >div {
      display: "inline";
    }
  }
}
/* margin-top-dropdown: offset dropdown menus 80px down (toolbar overflow menus) */
.margin-top-dropdown {
  transform: translate(0px, 80px) !important;
}
/* margin-top-dropdown-small: tight offset for input-adjacent dropdowns (e.g. file search) */
.margin-top-dropdown-small {
  transform: translate(0px, 46px) !important;
}
/* badge-collapse: auto-collapse animation for nav badge after timeout */
.badge-collapse {
  animation: badge-collapse-frames 300ms forwards;
  animation-delay: 5s;
  transform-origin: 100% 50%;
}

@keyframes badge-collapse-frames {
  0% {
    scale: 1 1;
  }

  100% {
    scale: 0 1;
  }
}

/* img-shine: 3D flip-in shine animation on images (StartPage) */
.img-shine {
  animation: img_shine_frames 1.5s forwards;
  mask:
    linear-gradient(135deg, #000 40%, #000, #000c 60%) 100% 100%/ 240% 240%;
}

@keyframes img_shine_frames {
  0% {
    transform: perspective(200px) rotate3d(0, 1, 0, -45deg);
  }

  100% {
    transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    mask-position: 0 0;
    /* Move to the top-left on hover */
  }
}
/* question: FAQ question item with hover highlight (FAQPage) */
.question:hover {
  background-color: #4a606d !important;
  color: white !important;
}
/* HTML: <div class="tooltip">This is a Tooltip with a gradient or solid coloration and with border radius </div> */
.tooltip-sp {
  color: #fff;
  font-size: 18px;
}

/* HTML: <div class="tooltip">This is the same as #16 but with more control over the tail</div> */
.tooltip-sp-mobile {
  color: #fff;
  font-size: 18px;
}
.tooltip-sp-mobile {
  /* tail dimension */
  --b: 2em;
  /* base */
  --h: 1.5em;
  /* height */

  --pp: 30%;
  /* main position (0%:top 100%:bottom) */
  --x: -2em;
  /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em;
  /* the radius */

  --_e: max(var(--x), -1*var(--x));
  padding: 1em;
  border-radius: var(--r)/min(var(--r), var(--pp) - var(--b)/2) var(--r) var(--r) min(var(--r), 100% - var(--pp) - var(--b)/2);
  background: 100% 50%/calc(100% + var(--h)) calc(100% + 2*var(--_e)) linear-gradient(-45deg, var(--p), var(--p2));
  /* the gradient */
  position: relative;
  z-index: 0;
}

.tooltip-sp {
  /* tail dimension */
  --b: 2em;
  /* base */
  --h: 1.5em;
  /* height */

  --p: 30%;
  /* main position (0%:top 100%:bottom) */
  --x: -2em;
  /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em;
  /* the radius */

  --_e: max(var(--x), -1*var(--x));
  padding: 1em;
  border-radius: var(--r)/min(var(--r), var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b)/2);
  background: 100% 50%/calc(100% + var(--h)) calc(100% + 2*var(--_e)) linear-gradient(-45deg, #1e6376, #2a88a2);
  /* the gradient */
  position: relative;
  z-index: 0;
}

.tooltip-sp:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1*var(--_e)) 0 calc(-1*var(--_e)) calc(-1*var(--h));
  padding-block: var(--_e);
  background-image: inherit;
  clip-path: polygon(50% 50%,
      var(--h) clamp(var(--b), var(--p) + var(--b)/2, 100%),
      0 calc(var(--p) + var(--x)),
      var(--h) clamp(0%, var(--p) - var(--b)/2, 100% - var(--b))) content-box;
}

/* HTML: <div class="tooltip">This is the same as #5 but with another shape for the tail </div> */
.file-nav-button {
  cursor: pointer !important;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.file-nav-button:hover {
  background: var(--p3) !important;
  color: var(--p) !important;
}

/* border-top/bottom/start/end-primary: directional primary-colour border utilities */
.border-top-primary {
  border-top-color: var(--p) !important;
}

.border-bottom-primary {
  border-bottom-color: var(--p) !important;
}

.border-start-primary {
  border-left-color: var(--p) !important;
}

.border-end-primary {
  border-right-color: var(--p) !important;
}
/* font-size-1em: resets font size to 1em */
.font-size-1em {
  font-size: 1em !important;
}
/* z-2: z-index:2 utility for stacking order */
.z-2 {
  z-index: 2 !important;
}
/* avatar-slide: avatar slide-in from left animation (Avatar.ts) */
.avatar-slide {
  position: relative;
  left: -100vw;
  animation: avatar_slide 3s;
  animation-iteration-count: infinite;
}

@keyframes avatar_slide {
  0% {
    left: -100vw;
  }

  10% {
    left: 0;
    position: relative;
  }

  90% {
    left: 0;
    position: relative;
  }

  100% {
    left: 200vw;
    position: relative;
  }
}

/* slide: slide-in from left one-shot animation */
.slide {
  position: relative;
  left: -100vw;
  animation: slide 0.5s forwards;
}

@keyframes slide {
  0% {
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
    position: relative;
  }
}

/* place-self-center / place-self-end: CSS grid self-placement utilities */
.place-self-center {
  place-self: center;
}

.place-self-end {
  place-self: end;
}
/* dropend .dropdown-toggle: nested dropdown positioning (Nav.ts) */
.dropend .dropdown-toggle {
  margin-left: 1em;
}

/* bottom-assistant: positions assistant panel at bottom of viewport */
.bottom-assistant {
  bottom: 4em;
}

@media screen and (min-width:1200px) {

  .bottom-assistant {
    bottom: 0;
  }
}

@media screen and (min-width:992px) {
  .dropend:hover>.dropdown-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
  }

  .dropend .dropdown-toggle {
    margin-left: .5em;
  }
}

@media (min-width: 992px) {

  .drophover:hover>.dropdown-menu {
    display: block;
  }

  .drophover>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
  }
}

/*----------------Backgrounds---------------*/
.bg-light-search {
  background-color: hsl(210 2% 88% / 1) !important;
}

/* bg-section-light/normal/dark: section background colour variants (StartPage) */
.bg-section-light {
  background-color: var(--p3) !important;
}

.bg-section-normal {
  background-color: white !important;
}

.bg-section-dark {
  background-color: var(--p) !important;
}

/* bg-primary: primary colour background override */
.bg-primary {
  background-color: var(--p) !important;
}

/* bg-primary-light: secondary/light primary background (used in Search.ts for selected results) */
.bg-primary-light {
  background-color: var(--p2) !important;
}

/* bg-secondary: secondary gray background */
.bg-secondary {
  background-color: var(--editd) !important;
}

/* bg-light: light primary-tinted background override */
.bg-light {
  background-color: var(--p3) !important;
  color: var(--p) !important;
}

/* bg-gray: neutral gray background */
.bg-gray {
  background-color: #f8f9fa !important;
  color: var(--p) !important;
}

/*---------------/Backgrounds---------------*/

/*----------------Directory---------------*/
/*Is used for simple hover effects for either file system directory
* related ui or emergency folder/directory related ui*/
/* directory: hover effects for directory/folder items in file system and emergency folder UI */
.directory label {
  color: var(--pD);
}



.directory:hover .btn:not(:hover) label:nth-child(1) {
  color: inherit !important;
}

.directory:hover .btn:hover label:nth-child(1) {
  color: inherit !important;
  transition: none !important;
}

.directory .btn label:nth-child(1) {
  color: inherit !important;
  transition: none !important;
}

.directory:hover label:nth-child(1) {
  color: white !important;
  transition: none !important;
}

.directory:hover button label:nth-child(1) {
  color: black;
}

.directory,
.directory img,
.directory label {
  transition: all ease-in-out 300ms;
}

.directory:hover i {
  color: white;
}

.directory:hover {
  background-color: var(--p);
  cursor: pointer;
  color: white;
}

/*---------------/Directory---------------*/

/*--------------Directory Tree V2--------------*/
/* Page-section wrapper: white rounded card */
.section-rounded-white {
  transition: all ease-in-out 300ms;
  background-color: white;
  border-radius: 20px;
}

/* directory-tree-card: white rounded card for directory items in tree view (DirectoryTree.ts) */
.directory-tree-card {
  background-color: white;
  border-radius: 16px !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.04) 0px 2px 8px 0px;
  transition: all ease-in-out 250ms;
}

.directory-tree-card.directory:hover {
  background-color: var(--p3) !important;
  color: var(--pD) !important;
  border-color: var(--p2) !important;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 6px 0px, rgba(0, 0, 0, 0.06) 0px 4px 14px 0px;
}

.directory-tree-card.directory:hover label:nth-child(1) {
  color: var(--pD) !important;
}

.directory-tree-card.directory:hover i {
  color: var(--pD) !important;
}

/* Highlight for showPathTo navigation */
.directory-highlight {
  border-color: var(--p) !important;
  box-shadow: rgba(57, 98, 127, 0.25) 0px 0px 0px 3px !important;
}

/* "Add new" directory placeholder with dashed border */
.directory-add-card {
  background-color: transparent;
  border: 1.5px dashed var(--p2) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  opacity: 0.6;
  transition: all ease-in-out 200ms;
  cursor: pointer;
}

.directory-add-card:hover {
  background-color: var(--p3) !important;
  border-color: var(--p) !important;
  border-style: solid !important;
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px !important;
}

/* Register (inner item) soft card with left accent */
.register-tree-card {
  background-color: white;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-left: 3px solid var(--p2) !important;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
  transition: all ease-in-out 200ms;
}

.register-tree-card.directory:hover {
  background-color: var(--p3) !important;
  color: var(--pD) !important;
  border-left-color: var(--p) !important;
  box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 6px 0px;
}

.register-tree-card.directory:hover label:nth-child(1) {
  color: var(--pD) !important;
}

.register-tree-card.directory:hover i {
  color: var(--pD) !important;
}

/*--------------/Directory Tree V2--------------*/

/*---------------Navigation---------------*/

/* navbar: navigation bar background */
.navbar {

  background-color: var(--p3) !important;
}


/* navbar-uplage: frosted-glass floating nav bar */
.navbar-uplage {

  /* Transition */
  -webkit-transition: all ease-in-out 300ms;
  /* Für Safari */
  transition: all ease-in-out 300ms;

  /* Backdrop-Filter */
  -webkit-backdrop-filter: blur(30px);
  /* Für Safari */
  backdrop-filter: blur(30px);

  /* Hintergrundfarbe */
  -webkit-background-color: rgb(226 240 248 / 49%);
  /* Für Safari */
  background-color: rgb(226 240 248 / 49%);

  /* Box-Schatten */
  -webkit-box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
  /* Für Safari */
  box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;

  /* Border-Radius */
  -webkit-border-radius: 20px;
  /* Für Safari */
  border-radius: 20px;

  /* Opacity */
  -webkit-opacity: 1;
  /* Für Safari */
  opacity: 1;

  /* Padding */
  -webkit-padding: 15px;
  /* Für Safari */
  padding: 15px;

  /* Position */
  -webkit-position: absolute;
  /* Für Safari */
  position: absolute;

  /* Bottom */
  -webkit-bottom: 10px;
  /* Für Safari */
  bottom: 10px;

}

.navbar-uplage-expanded {

  border-radius: 20px !important;
  bottom: 0px !important;
}

.navbar-uplage-container {
  transition: all ease-in-out 300ms;
  padding: 0px !important;
  width: 95% !important;
}

.navbar-uplage-container-expanded {
  padding: 0px !important;
  width: 95% !important;
}

/* uplage-content-footer: bottom margin for page content to avoid overlap with floating nav */
.uplage-content-footer {
  margin-bottom: 90px !important;
}

@media only screen and (min-width: 1200px) {


  .uplage-content-footer {
    margin-bottom: 0px !important;
  }

  .navbar-uplage-container {
    padding: 0px !important;
    width: 100% !important;
  }

  .navbar-uplage-cotainer {
    height: 0px !important;
  }

  .uplage-content {
    margin-top: 100px;
    min-height: 100%;
  }

  .navbar {

    background-color: transparent !important;
  }

  .navbar-uplage {
    backdrop-filter: blur(30px);
    box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
    background-color: rgb(226 240 248 / 49%);
    border-radius: 100px;
    opacity: 1;
    padding: 15px;
    position: absolute;
    top: 10px;
    height: fit-content;
  }

}


/* nav-hover: hover effect for nav items */
.nav-hover {
  transition: all ease-in-out 300ms;
}

.nav-hover:hover div label {
  color: white !important;
}

.nav-hover:hover div span {
  color: white !important;
}

.nav-hover:hover,
.nav-hover div label:hover {
  background-color: var(--p);
  cursor: pointer;
}

/*--------------/Navigation---------------*/

/*--------------Selection---------------*/

/* simple-select: custom select item with primary hover effect */
.simple-select {
  transition: all ease-in-out 300ms;
  color: var(--p) !important;
}

.simple-select:hover label {
  color: white !important;
  border-bottom-color: white !important;
}

.simple-select:hover span {
  color: white !important;
  border-bottom-color: white !important;
}

.simple-select:hover {
  background-color: var(--p);
  cursor: pointer;
  color: white !important;
}

/*--------------/Selection---------------*/


/*--------------Rotation---------------*/
.rotate-animation {
  animation: rotate 1500ms linear infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

/* rotate-180 / rotate-90 / rotate0 / rotate1: rotation utility and animated rotation transitions */
.rotate-180 {
  rotate: 180deg;
}

.rotate-90 {
  rotate: 90deg;
}

.rotate0 {
  animation: kf_rotate1 150ms linear;
}

.rotate1 {
  animation: kf_rotate2 150ms linear;
}

@keyframes kf_rotate1 {
  0% {
    rotate: 180deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes kf_rotate2 {
  0% {
    rotate: 180deg;
  }

  100% {
    rotate: 0deg;
  }
}

/*--------------/Rotation---------------*/


/*--------------Flex---------------*/

/* flex-1: flex-grow:1 shorthand utility (used widely) */
.flex-1 {
  flex: 1 !important;
}

/*--------------/Flex---------------*/


/*--------------Size---------------*/
.max-h-40 {
  max-height: 40px !important;
}
/* maxw-fit: max-width:fit-content utility */
.maxw-fit {
  max-width: fit-content !important;
}
/* w-fit: width:fit-content utility */
.w-fit {
  width: fit-content !important;
}

/* h-fit: height:fit-content utility */
.h-fit {
  height: fit-content !important;
}

/* full-screen: full viewport width and height (MainLayout.ts) */
.full-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/*--------------/Size---------------*/


/*--------------Text---------------*/
.text-light-red {
  color: rgb(255 137 130) !important;
}

.text-light-orange {
  color: #fac898 !important;
}

.text-light-green {
  color: rgb(50 233 149) !important;
}

/* text-dark: primary colour text */
.text-dark {
  color: var(--p) !important;
}

/* text-primary: dark primary text override */
.text-primary {
  color: var(--pD) !important;
}

/* text-secondary-red: secondary red text */
.text-secondary-red {
  color: var(--s) !important;
}

/* text-almost-white / text-almost-black: near-white/black text utilities */
.text-almost-white {
  color: #e1ebef !important;
}

.text-almost-black {
  color: #404d5e !important;
}

/* text-folder: muted folder icon colour */
.text-folder {
  color: #7c90a0 !important;
}

/* text-image-file: blue file icon colour */
.text-image-file {
  color: #326dbf !important;
}

/*--------------/Text---------------*/


/*--------------Remarks Stuff---------------*/
.light-warning {
  background-color: #fff6f6;
  color: #9f3a38;
  border-color: #e0b4b4 !important;
}

.light-orange {
  background-color: #fac898;
  color: black;
  border-color: #ebab3d !important;
}

.light-green {
  background-color: #c2e5b0;
  color: #0d3b1f;
  border-color: #299e50 !important;
}

.light-blue {
  background-color: var(--p3);
  color: var(--pD) !important;
  border-color: var(--p);
}

/*--------------/Remarks Stuff---------------*/

/*--------------Payment---------------*/

/* payment-status: compact uppercase payment status badge */
.payment-status {
  width: fit-content;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 15px;
  padding: 0 4px;
}

:w
/*-------------/Payment---------------*/


/*-------------Form---------------*/

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem;
}

.form-control:disabled,
.form-control[readonly] {
  opacity: 1;
}

.form-select:disabled {
  background-color: gray !important;
}

/*------------/Form---------------*/


/*------------Input---------------*/

textarea {
  min-height: 110px !important;
}

/* combobox: custom combobox transition (Combobox.ts) */
.combobox {
  transition: all 0.5s;
}

/*------------/Input---------------*/

/*------------Cursor---------------*/

/* cursor-pointer / c-pointer-hover: pointer cursor utilities */
.cursor-pointer,
.c-pointer-hover:hover {
  cursor: pointer !important;
}

/* c-pointer: pointer cursor (used as raw string in DirectoryViewPage.ts, AccessPage.ts) */
.c-pointer {
  cursor: pointer;
}

/* c-grab: grab cursor */
.c-grab {
  cursor: grab;
}
/*-----------/Cursor---------------*/

/*------------Scale---------------*/

/* simple-scale-hover: scale-up on hover effect */
.simple-scale-hover {
  color: black;
  transition: all 0.3s ease-in-out;
}

.simple-scale-hover:hover {
  cursor: pointer;
  transform: scale(1.5);
}
/*-----------/Scale---------------*/


/*------------Error Page---------------*/
.error-label-small {
  margin: 0;
  background: url(../images/oops.webp) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-position: center;
}

.error-label {
  font-size: 6em;
  margin: 0;
  font-weight: 900;
  background: url(../images/oops.webp) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-position: center;
}

@media only screen and (min-width: 500px) {
  .error-label {
    font-size: 10em;
  }
}

@media only screen and (max-width: 300px) {
  .error-label {
    font-size: 3em;
  }
}

/*-----------/Error Page---------------*/


/*-----------Cards---------------*/
.account-type-card {
  width: initial;
}

.account-type-card:hover {
  width: initial;
  outline-color: var(--pD) !important;
}

@media only screen and (max-width: 768px) {
  .account-type-card {
    width: 100% !important;
  }
}

@media only screen and (max-width: 1199px) {

  .section-rounded-dark-full:first-child,
  .section-rounded-hero:first-child {
    margin-top: 0;
  }
}

/*-----------/Cards---------------*/


/*-----------Language---------------*/
.lang-selected {
  left: 4px;
}

.lang-selected-en {
  left: 56px;
}

/*----------/Language---------------*/

/*----------File Explorer---------------*/


/* hover-bg-light: light background on hover for file explorer items */
.hover-bg-light {
  border-radius: 0.2em;
  transition: all 150ms ease-in-out;
}

.hover-bg-light:hover {
  background-color: var(--p3) !important;
  color: var(--pD) !important;
}

/* outline-drop-file: animated dashed outline for active file drop zone */
.outline-drop-file {
  outline: double;
  outline-color: var(--p);
  outline-width: 2px;
  outline-offset: 0.25rem;
  animation: outline-drop-file-frames 1s infinite alternate;
}

@keyframes outline-drop-file-frames {
  from {
    outline-color: var(--p);
  }

  to {
    outline-color: var(--p2);
  }
}
/*---------/File Explorer---------------*/


/* no-x-overflow: overflow-x:hidden utility */
.no-x-overflow {
  overflow-x: hidden !important;
}

/* icon-pulse: pulsing scale animation for icons */
.icon-pulse {
  animation: icon_pulse_frames 500ms alternate;
  animation-iteration-count: infinite;
}

/*---------Transition and Animation---------------*/

/* placeholder-animation: loading skeleton shimmer animation */
.placeholder-animation {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: darkgray;
  background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  background-clip: content-box;
  height: 100px;
  position: relative;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

/* transition-all-ease-in-out-3: 300ms ease-in-out transition shorthand (ComponentBuilder.ts) */
.transition-all-ease-in-out-3 {
  transition: all 0.3s ease-in-out;
}

/* popin / popout: scale-in/out popup entrance and exit animations */
.popin {
  animation: popin_frames 500ms forwards;
}

.popout {
  animation: popout_frames 500ms forwards;
}

@keyframes icon_pulse_frames {
  from {
    scale: 1 1;
  }

  to {
    scale: 0.8 0.8;
  }
}

@keyframes popout_frames {
  from {
    scale: 1 1;
  }

  to {
    scale: 0 0;
  }
}

@keyframes popin_frames {
  from {
    scale: 0 0;
  }

  to {
    scale: 1 1;
  }
}

/* animated-drop-bg: animated background for active file drop area */
.animated-drop-bg {
  z-index: 1;
  animation: animated-drop-bg-frames 1s infinite alternate;
  outline: double;
  outline-color: black;
  outline-width: 2px;
}

@keyframes animated-drop-bg-frames {
  from {
    outline-color: var(--p);
    background-color: var(--light);
  }

  to {
    outline-color: var(--p2);
    background-color: var(--editl);
  }
}

/*---------/Transition and Animation---------------*/

/*---------Controls (Button, Textbox, Table, etc)---------------*/
.naked-input {
  outline: none;
  border: none;
}
/* btn-hover-only: plain white/neutral by default, shows btn-variant color on hover.
   Combined with .AsPrimary()/.AsDanger() so the hover color comes from those variant classes.
   Used throughout: EmergencyPage, Directory, Document, Avatar, Combobox, AdminPage_*, etc.
   Note: uses CSS variable overrides so inline background styles still take precedence. */
.btn-hover-only {
  --bs-btn-color: var(--bs-body-color, #212529) !important;
  --bs-btn-bg: white !important;
  --bs-btn-border-color: rgba(57, 98, 127, 0.25) !important;
}

/* btn-hero: dark-background hero button that keeps its colour on :active/:disabled */
.btn-hero {
  --bs-btn-bg: var(--s);
  --bs-btn-hover-bg: var(--s);
  --bs-btn-active-bg: var(--s);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--s);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
  background-color: var(--s) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(221,48,14,0.28) !important;
  opacity: 1 !important;
}
.btn-hero {
  transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.btn-hero:hover {
  background-color: hsl(10, 88%, 38%) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(221,48,14,0.42) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}
.btn-hero:active {
  background-color: hsl(10, 88%, 34%) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(221,48,14,0.28) !important;
  transform: translateY(0);
  opacity: 1 !important;
}
.btn-hero:focus,
.btn-hero:focus-visible,
.btn-hero:disabled,
.btn-hero[disabled] {
  background-color: var(--s) !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* btn-hero-glass: translucent white glass hero button */
.btn-hero-glass {
  --bs-btn-bg: rgba(255,255,255,0.12);
  --bs-btn-hover-bg: rgba(255,255,255,0.22);
  --bs-btn-active-bg: rgba(255,255,255,0.22);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,0.20);
  --bs-btn-hover-border-color: rgba(255,255,255,0.30);
  --bs-btn-active-border-color: rgba(255,255,255,0.30);
  --bs-btn-disabled-bg: rgba(255,255,255,0.12);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 1;
  background-color: rgba(255,255,255,0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
  opacity: 1 !important;
}
.btn-hero-glass:hover,
.btn-hero-glass:active,
.btn-hero-glass:focus,
.btn-hero-glass:focus-visible,
.btn-hero-glass:disabled,
.btn-hero-glass[disabled] {
  background-color: rgba(255,255,255,0.22) !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* btn-icon-hover: for icon-only buttons (no text) where the icon must be visible by default.
   Use this instead of btn-hover-only when the button has no label (biPencil, biTrash, etc.).
   Default: transparent bg, muted primary icon. Hover: shows AsPrimary/AsDanger color. */
.btn-icon-hover {
  background-color: transparent !important;
  border: none !important;
  color: rgba(57, 98, 127, 0.55) !important;
}

.btn-icon-hover:hover,
.btn-icon-hover:focus-visible {
  background-color: var(--bs-btn-hover-bg, #5c636a) !important;
  color: var(--bs-btn-hover-color, #fff) !important;
}


/* btn-no-border: borderless button variant */
.btn-no-border {
  border: none !important;
}

/* outer-circle: SVG stroke-dasharray animation for play button circle (StartPage) */
.outer-circle {
  stroke-width: 3;
  stroke-dasharray: 410;
  stroke-dashoffset: 0;
  stroke-linecap: square;
  transition: all 0.4s ease-out;
}

.glightbox_video:hover .outer-circle {
  stroke-dashoffset: 410;
  transition:
    stroke 0.7s 0.4s ease-out,
    stroke-dashoffset 0.4s ease-out;
}

.glightbox_video:hover .inner-circle {
  fill: #bf2428;
  transition: fill 0.4s 0.3s ease-out;
}

.glightbox_video:hover .play {
  fill: white;
  transition: fill 0.4s 0.3s ease-out;
}

/* accordion-button: primary colour accordion styles */
.accordion-button:not(.collapsed) {

  background-color: var(--p3);
}

.accordion-button:hover:focus:active {
  color: white !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem var(--p2);
  border-color: red;
  /* Ändert die Border-Farbe */
}

.accordion-button {
  color: #284457 !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
/* table-w-group-col: table column with constrained minimum width for grouped columns */
.table-w-group-col {
  width: 0%;
  min-width: 20px;
}

.btn:disabled {
  color: gray !important;
  background-color: transparent !important;
  border-color: gray !important;
}

/* section-card: standard white section card — outer wrapper for all account/contact/emergency sections.
   Used in AccountPage (GetAccountOverviewSectionStyle), ContactsPage (GetContactSectionStyle), EmergencyPage */
.section-card {
  padding: clamp(1.15rem, 2.6vw, 1.85rem);
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(57, 98, 127, 0.14);
  box-shadow: 0 6px 20px rgba(57, 98, 127, 0.07);
}

/* inner-card: gradient inner card — content cards inside a section-card.
   Used in AccountPage (GetAccountOverviewCardStyle), ContactsPage (GetContactCardStyle) */
.inner-card {
  padding: 1rem 1.15rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(248, 250, 251, 0.99) 0%, rgba(233, 240, 245, 0.95) 100%);
  border: 1px solid rgba(57, 98, 127, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 4px 12px rgba(40, 68, 87, 0.06);
}

/* folder-card: warm amber-tinted card for folder rows in the file explorer */
.folder-card {
  padding: 1rem 1.15rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 252, 238, 0.99) 0%, rgba(254, 242, 195, 0.88) 100%);
  border: 1px solid rgba(180, 140, 30, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 12px rgba(140, 100, 10, 0.07);
}

/* file-card: cool blue-tinted card for file rows in the file explorer */
.hide-mobile { display: none !important; }
@media (min-width: 768px) { .hide-mobile { display: flex !important; } }

.file-card {
  padding: 1rem 1.15rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(240, 247, 255, 0.99) 0%, rgba(218, 234, 252, 0.90) 100%);
  border: 1px solid rgba(57, 98, 127, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 12px rgba(40, 68, 87, 0.08);
}

/* section-header-border: section header row with bottom divider line.
   Used in AccountPage (BuildSettingsSectionHeader), ContactsPage */
.section-header-border {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(57, 98, 127, 0.18);
  margin-bottom: 0.25rem;
}

/* section-header-icon: icon inside a section header row (AccountPage, ContactsPage) */
.section-header-icon {
  font-size: 1.1rem;
  color: var(--p);
}

/* section-header-title: title label inside a section header row (AccountPage, ContactsPage) */
.section-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2e3d;
}

/* clean-input-wrapper: white card that wraps a naked text input with a caption (ContactsPage, EmergencyPage) */
.clean-input-wrapper {
  background: #fff;
  border: 1px solid rgba(57, 98, 127, 0.15);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(40, 68, 87, 0.08);
  padding: 0.55rem 0.75rem;
  cursor: text;
  width: 100%;
}

/* clean-input-caption: small caption above a naked input inside clean-input-wrapper (ContactsPage, EmergencyPage) */
.clean-input-caption {
  opacity: 0.6;
  font-size: 0.72rem;
  line-height: 1;
}

/* contact-letter-label: alphabetical group header letter in the contacts list (ContactsPage) */
.contact-letter-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--p);
  min-width: 1.5rem;
}

/* contact-divider-line: thin horizontal rule between alphabetical letter groups (ContactsPage) */
.contact-divider-line {
  height: 1px;
  background: rgba(57, 98, 127, 0.12);
}

/* section-danger: destructive action section card with red tint (AccountPage: Reset/Cancel/Remove) */
.section-danger {
  padding: clamp(1.15rem, 2.6vw, 1.85rem);
  border-radius: 30px;
  background: #fff8f8;
  border: 1px solid rgba(200,50,50,0.18);
  box-shadow: 0 6px 20px rgba(200,50,50,0.06);
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--p);
  --bs-btn-border-color: var(--p);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--pD);
  --bs-btn-hover-border-color: var(--pD);

  --bs-btn-focus-shadow-rgb: 49, 132, 253;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--p);
  --bs-btn-active-border-color: var(--p);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-link {
  --bs-btn-color: var(--p);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;

  --bs-btn-hover-color: var(--p);
  --bs-btn-hover-bg: var(--p3);
  --bs-btn-hover-border-color: transparent;

  --bs-btn-focus-shadow-rgb: 49, 132, 253;

  --bs-btn-active-color: var(--p);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: gray;
  --bs-btn-disabled-border-color: gray;
}

.btn-secondary {
  --bs-btn-color: white;
  --bs-btn-bg: var(--edit);
  --bs-btn-border-color: var(--editl);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--editl);
  --bs-btn-hover-border-color: var(--edit);

  --bs-btn-focus-shadow-rgb: 49, 132, 253;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--editd);
  --bs-btn-active-border-color: var(--edit);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: gray;
  --bs-btn-disabled-border-color: gray;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--s);
  --bs-btn-border-color: var(--s);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--s);
  --bs-btn-hover-border-color: var(--s);

  --bs-btn-focus-shadow-rgb: 49, 132, 253;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--s);
  --bs-btn-active-border-color: var(--s);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: gray;
  --bs-btn-disabled-border-color: gray;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--p2);
  --bs-btn-border-color: var(--p);

  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--p3);
  --bs-btn-hover-border-color: var(--p2);

  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: white;
  --bs-btn-active-bg: var(--p);
  --bs-btn-active-border-color: var(--p);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: gray;
  --bs-btn-disabled-border-color: gray;
}

.btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

/* combobox-auto-select: highlighted state for auto-selected combobox item */
.combobox-auto-select {
  color: white;
  background-color: var(--p) !important;
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: var(--p2);
  outline: 0;
  box-shadow: 0 0 0 0.1rem var(--p2);
}

/* fake-form-control-label: floating label for custom form controls (ComponentBuilder.ts) */
.fake-form-control-label {
  opacity: 0.65;
  font-size: small;
}

.combobox-auto-select:hover {
  color: white;
  background-color: var(--p2) !important;
}

/*--------/Controls (Button, Textbox, etc)---------------*/

/*-----------Outline-------------*/

/* outline-0/1/2/3/4 / outline / outline-primary: outline utility classes for selected/focus states */
.outline-0 {
  outline: none !important;
}

.outline {
  outline: solid;
  outline-color: var(--light);
  outline-width: 1px;
}

.outline-primary {
  outline-style: solid;
  outline-color: var(--p);
}

.outline-1 {
  outline-width: 1px;
}

.outline-2 {
  outline-style: solid;
  outline-width: 2px;
}

.outline-3 {
  outline-width: 3px;
}

.outline-4 {
  outline-width: 4px;
}

/*----------/Outline-------------*/

/*----------Sections-------------*/
.section-curved {
  position: absolute;
  border-bottom-left-radius: 40% 80%;
  border-bottom-right-radius: 40% 80%;
}

/* section-start: hero/first section top padding */
.section-start {
  padding-top: 1em;
}

/*---------/Sections-------------*/

/*---------Border-------------*/

/* border-primary / border-primary-light / border-section-dark / border-secondary: border colour utilities */
.border-primary {
  border-color: var(--p) !important;
}

.border-primary-light {
  border-color: var(--pLight) !important;
}

.border-section-dark {
  border-color: #4a606d !important;
}

.border-secondary {
  border-color: var(--s) !important;
}

/*---------/Border-------------*/


/*--------------ProseMirror Richtext------------*/

/* ProseMirror: rich text editor styles (NewsPage, TicketPage) */
.ProseMirror:focus {
  outline: none;
}

/* ProseMirrorx: rich text editor with visible outline (RichText.ts editable mode) */
.ProseMirrorx,
.ProseMirrorx:focus {
  padding: 1em;

  outline: solid;
  outline-color: var(--p);
  outline-width: 1px;

  /* border: var(--p) solid 1px !important; */
  border-radius: 0.35em;
}

.ProseMirror blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}

.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.ProseMirror table td,
.ProseMirror table th {
  min-width: 1em;
  border: 2px solid var(--lightd);
  padding: 3px 5px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

.ProseMirror table td>*,
.ProseMirror table th>* {
  margin-bottom: 0;
}

.ProseMirror table th {
  font-weight: 700;
  text-align: left;
  background-color: var(--p);
  color: white;
}

.ProseMirror table .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}

.ProseMirror table .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: -2px;
  width: 4px;
  background-color: var(--p2);
  pointer-events: none;
}

.ProseMirror p {
  margin: 0;
}

/*--------------/ProseMirror Richtext------------*/

/*--------------Ribbons------------*/

/* ribbon-signup: decorative ribbon on signup card */
.ribbon-signup {
  color: #fff;
}

.ribbon-signup {
  --f: .5em;
  /* control the folded part*/
  --r: .8em;
  /* control the ribbon shape */

  position: absolute;
  top: 1em;
  right: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: var(--s);
  border-bottom: var(--f) solid #0005;
  border-left: var(--r) solid #0000;
  clip-path:
    polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
}

/*-------------/Ribbons------------*/

/*--------------Utility Classes------------*/

/* accent-bar: section header underline accent bar (AccountPage, ContactsPage, DirectoryTree) */
.accent-bar {
  width: 60px;
  height: 4px;
  background: var(--s);
  border-radius: 999px;
}

/* text-section-title: bold 0.95rem section heading */
.text-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2e3d;
}

/* text-body-secondary: muted body text style (EmergencyPage) */
.text-body-secondary {
  color: #4b6278;
  line-height: 1.5;
}

/* text-overline: uppercase letter-spacing label */
.text-overline {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* text-label-upper: small uppercase primary label (EmergencyPage) */
.text-label-upper {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--p);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* alert-soft-warning: soft yellow warning banner (AccountPage) */
.alert-soft-warning {
  background: rgba(255,243,205,0.8);
  border-radius: 12px;
  border: 1px solid rgba(255,193,7,0.35);
  padding: 0.65rem 0.85rem;
}

/* info-card-light: light blue info card (Login, Signup) */
.info-card-light {
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: rgba(226,240,248,0.56);
}

/* stat-chip: small white rounded stat badge (Login, Utils) */
.stat-chip {
  padding: 0.15rem 0.25rem;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(57,98,127,0.10);
  box-shadow: 0 8px 18px rgba(57,98,127,0.06);
  width: 100%;
}

/* place-items-start: grid place-items:start utility */
.place-items-start {
  place-items: start;
}

/* place-items-end: grid place-items:end utility */
.place-items-end {
  place-items: end;
}

/* info-pill: subtle primary-tinted info container (AccountPage last-login pill) */
.info-pill {
  background: rgba(57,98,127,0.06);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}

/* alert-soft-success: soft green success notification (AccountPage 2FA active) */
.alert-soft-success {
  background: rgba(209,250,229,0.8);
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,0.35);
  padding: 0.5rem 0.75rem;
}

/* qr-container: fixed 200×200 minimum container for QR code canvases (AccountPage 2FA) */
.qr-container {
  min-height: 200px;
  min-width: 200px;
}

/* img-preview-sm: max-width 250px for small image previews (AccountPage appearance) */
.img-preview-sm {
  max-width: 250px;
}

/* loading-pill: semi-transparent pill used around loading spinners (AccountPage) */
.loading-pill {
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(57,98,127,0.08);
}

/* empty-state-card: full-width gradient card for empty list states (AccountPage) */
.empty-state-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(248,250,251,0.99) 0%, rgba(233,240,245,0.95) 100%);
  border: 1px solid rgba(57,98,127,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 4px 12px rgba(40,68,87,0.06);
}

/* text-primary-muted: muted primary colour for decorative icons/separators (AccountPage) */
.text-primary-muted {
  color: rgba(57,98,127,0.55);
}

/* text-primary-dark: dark primary brand colour (AccountPage mandate labels) */
.text-primary-dark {
  color: var(--pD);
}

/* justify-items-center: CSS grid justify-items:center utility (AccountPage access breadcrumbs) */
.justify-items-center {
  justify-items: center;
}

/* icon-sm-text: slightly reduced font-size for inline status icons (AccountPage plan badges) */
.icon-sm-text {
  font-size: 0.95rem;
}

/* opacity-80: 0.8 opacity utility (AccountPage) */
.opacity-80 {
  opacity: 0.8 !important;
}

/* access-row: styled breadcrumb-path row inside shared access cards (AccountPage) */
.access-row {
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(57,98,127,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 2px 6px rgba(40,68,87,0.012);
}

/* border-top-subtle: subtle primary top divider line (AccountPage mandate cards) */
.border-top-subtle {
  border-top: 1px solid rgba(57,98,127,0.15);
}

/* mandate-card: white rounded shadow card for B2B mandate entries (AccountPage) */
.mandate-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(57,98,127,0.10);
}

/* dashed-empty-card: dashed border empty state card for emergency plan access (AccessPage) */
.dashed-empty-card {
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px dashed rgba(57, 98, 127, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 3px 8px rgba(40, 68, 87, 0.016);
  min-height: 100px;
}

/* text-dark-sm: small dark primary text (#1a2e3d, 0.9rem) — used in AccessPage labels */
.text-dark-sm {
  color: #1a2e3d;
  font-size: 0.9rem;
}

/* icon-primary-sm: small primary-colored icon (var(--p), 0.85rem) — AccessPage check icons */
.icon-primary-sm {
  color: var(--p);
  font-size: 0.85rem;
}

/* text-dark-bold: bold dark text — section labels in AccessPage */
.text-dark-bold {
  font-weight: 600;
  color: #1a2e3d;
}

/* max-w-preview: max-width:300px for reference depth preview images (AccessPage) */
.max-w-preview {
  max-width: 300px;
}

/* white-space-break: allows text to break on spaces/words across lines (AccessPage) */
.white-space-break {
  white-space: break-spaces;
}

/* min-h-badge-row: minimum height for badge rows (AccessPage header) */
.min-h-badge-row {
  min-height: 28px;
}

/* max-h-250: max-height for scrollable file/folder lists (AccessPage) */
.max-h-250 {
  max-height: 250px;
}

/* max-w-80: max-width 80% for canvas preview elements (AccessPage) */
.max-w-80 {
  max-width: 80%;
}

/* max-h-300: max-height for scrollable login history list (AccessPage) */
.max-h-300 {
  max-height: 300px;
}

/*--------------/Utility Classes------------*/
/* entry-card-header: responsive header for custom type entry cards */
.entry-card-header {
  flex-wrap: nowrap;
}
@media (max-width: 575.98px) {
  .entry-card-header {
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }
  /* Icon: shrink slightly on mobile */
  .entry-card-header > .entry-card-icon img,
  .entry-card-header > .entry-card-icon svg,
  .entry-card-header > .entry-card-icon div {
    width: 40px !important;
    height: 40px !important;
  }
  /* Title column: take full remaining width next to icon */
  .entry-card-header > .entry-card-title {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Actions row: break to a new full-width row, aligned right */
  .entry-card-actions {
    flex: 0 0 100%;
    justify-content: flex-end;
    border-top: 1px solid rgba(57,98,127,0.07);
    padding-top: 0.35rem;
    margin-top: 0.1rem;
  }
}

/* ── Icon Picker (Icons.ts, BuildIconSelection) ──────────────────────────────
   Sticky search bar and card grid for the icon selection modal.              */

/* Fixed-height modal body so icon grid never resizes during FLIP animations */
.icon-picker-modal .modal-body {
  height: 70vh;
}

/* Search bar: bleeds edge-to-edge in modal-body and sticks at top on scroll */
.icon-picker-search {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  margin: -1rem -1rem 0.75rem -1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(57, 98, 127, 0.10);
  box-shadow: 0 2px 10px rgba(40, 68, 87, 0.06);
}

/* Input row inside the search bar */
.icon-picker-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid rgba(57, 98, 127, 0.15);
  transition: border-color 0.15s;
}

.icon-picker-search-row:focus-within {
  border-color: var(--p);
}

/* Normal icon card */
.icon-picker-card {
  padding: 0.75rem 0.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 250, 251, 0.99) 0%, rgba(233, 240, 245, 0.95) 100%);
  border: 1.5px solid rgba(57, 98, 127, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 2px 6px rgba(40, 68, 87, 0.05);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  user-select: none;
  outline: none;
  text-decoration: none;
}

.icon-picker-card:hover {
  box-shadow: 0 4px 16px rgba(57, 98, 127, 0.18);
  border-color: rgba(57, 98, 127, 0.30);
  transform: translateY(-1px);
}

.icon-picker-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(57, 98, 127, 0.12);
}

/* Selected icon card */
.icon-picker-card-selected {
  padding: 0.75rem 0.5rem;
  border-radius: 16px;
  background: rgba(57, 98, 127, 0.08);
  border: 2px solid var(--p);
  box-shadow: 0 2px 16px rgba(57, 98, 127, 0.18);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  user-select: none;
  outline: none;
}

.icon-picker-card-selected:hover {
  box-shadow: 0 4px 20px rgba(57, 98, 127, 0.25);
  transform: translateY(-1px);
}

.btn-icon-amber::before { color: #e8a020; }
.btn-icon-teal::before  { color: #2a9d6f; }

/* RichText v2 editor */
.richtext-editor-v2 {
  border: 1px solid rgba(57,98,127,0.15);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 6px rgba(40,68,87,0.06);
}
.richtext-editor-v2 .ProseMirror {
  outline: none;
}