@charset "UTF-8";
/**
 * uaplus.css version 0.2.0
 */
/**
 * 1. Different box model
 * 
 * We use the traditional box model, where the padding and border 
 * of the element is drawn inside and not outside the specified 
 * width and height. That makes combining relative and absolute 
 * units in properties like <code>inline-size</code> and 
 * <code>block-size</code> easier.
 * 
 * See https://en.wikipedia.org/wiki/CSS_box_model
 */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/**
 * 2. Improve focus styles
 *
 * Add spacing between content and its focus outline.
 */
:where(:focus-visible) {
  outline-offset: 3px;
}

/**
 * 3. Disable text size adjustment
 * 
 * To improve readability on non-mobile optimized websites, browsers
 * like mobile Safari increase the default font size when you switch
 * a website from portrait to landscape. We don't want that for our 
 * optimized sites.
 *
 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * 4. Increase line height
 *
 * Long paragraphs are easier to read if the line height is higher.
 */
:where(html) {
  line-height: 1.5;
}

/**
 * 5. Add scrollbar gutter
 *
 * Prevent the page from “jumping” when switching from a long to a short page.
 *
 */
:where(html) {
  scrollbar-gutter: stable;
}

/**
 * 6. Remove UA styles for h1s nested in sectioning content
 *
 * Nesting h1s in section, articles, etc., shouldn't influence the 
 * styling of the heading since nesting doesn't influence 
 * semantics either.
 * 
 * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
 * See https://github.com/whatwg/html/pull/11102
 * See https://html.spec.whatwg.org/#sections-and-headings
 */
:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

/**
 * 7. Improve abbreviations with titles
 * 
 * The abbr element with the title isn't helpful regarding 
 * accessibility because support is inconsistent, and it's only 
 * accessible to some users. Still, it's commonly used. 
 * This rule shows a dotted underline on abbreviations in all 
 * browsers (there's a bug in Safari) and changes the cursor.
 * 
 * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
 */
:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/**
 * 8. Optimize mark element in Forced Colors Mode
 *
 * The colors of the mark element don't change in Forced Colors Mode,
 * which can be problematic. Use system colors instead.
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
 */
@media (forced-colors: active) {
  :where(mark) {
    color: HighlightText;
    background-color: Highlight;
  }
}
/**
 * 9. Avoid overflow caused by embedded content
 * 
 * Ensure that embedded content (audio, video, images, etc.) 
 * doesn't overflow its container.
 */
:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
}

/**
 * 10. Prevent fieldsets from causing overflow
 *
 * Reset the default `min-inline-size: min-content` to prevent
 * children from stretching fieldsets
 *
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */
:where(fieldset) {
  min-inline-size: 0;
}

/**
 * 11. Turn labels into block elements
 * 
 * Labels for inputs, selects, and textarea should be block 
 * elements.
 */
:where(label):has(+ :where(input:not([type=radio], [type=checkbox]), select, textarea)) {
  display: block;
}

/**
 * 12. Increase the block-size of textareas
 *
 * The default height of textareas is small. We increase it a bit.
 */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
 * 13. Inherit font styling in form elements
 * 
 * buttons, inputs, selects, and textarea should have the same font
 * family and size as the rest of the page.
 */
:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

/**
 * 14. Normalize search input styles
 *  
 * Remove the rounded corners of search inputs on macOS and IOS 
 * and normalize the background color
 */
:where([type=search]) {
  -webkit-appearance: textfield;
}

/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type=search]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}
/**
 * 15. Maintain direction in some input types
 * 
 * Some input types should remain left-aligned in right-to-left
 * languages,but only if the value isn't empty because the 
 * placeholder should be right-aligned.
 *
 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
 */
:where(input):where([type=tel], [type=url], [type=email], [type=number]):not(:placeholder-shown) {
  direction: ltr;
}

/**
 * 16. Improve table styling
 *  
 * With the default styling, tables are hard to scan. These rules 
 * add padding and collapsed borders.
 */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
  vertical-align: top;
}

/**
 * 17. Fading dialogs
 *  
 * Add fade in and fade out transitions for the dialog element
 * and backdrops
 */
:where(dialog)::backdrop {
  background: oklch(0% 0 0/0.3);
}

:where(dialog, [popover]),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 150ms ease-out, display 150ms allow-discrete, overlay 150ms allow-discrete;
}

:where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open], :popover-open),
:where(dialog[open])::backdrop {
    opacity: 0;
  }
}
/**
 * 18. Increase specificity of [hidden]
 *  
 * Make it harder to accidentally unhide elements with the 
 * [hidden] attribute while still maintaining the until-found 
 * functionality.
 */
[hidden]:not([hidden=until-found]) {
  display: none !important;
}

/**
 * 19. Turn images into block elements
 */
:where(img) {
  display: block;
}

/**
 * 20. Change cursor of <summary>
 *
 * By default, only the ::marker inside the summary uses the 
 * default cursor.
 */
:where(summary) {
  cursor: default;
}

/**
 * 21. Remove the default border from iframes
 */
:where(iframe) {
  border: none;
}

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

*:focus {
  outline: none;
}

input[type=text] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-shadow: none;
  border-radius: 0;
}

button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.201s;
}
button:focus, button:active {
  outline: none;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: Roboto, sans-serif;
  color: #1d1f26;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
}

a {
  color: #1d1f26;
}
a:hover {
  color: #0e1012;
}

.page-container {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 8fr;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  grid-template-rows: 60px 1fr;
  gap: 0;
  grid-template-areas: "header header" "content content";
  overflow: clip;
  height: 100%;
  padding: 0;
}
.page-container .page-header-container {
  grid-area: header;
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}
.page-container .page-content-container {
  grid-area: content;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
}
.page-container .page-content-container .page-content-inner {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 0 auto;
  justify-content: space-evenly;
  overflow: hidden;
  height: 100%;
  transition: all 0.4s ease-in-out;
}
.page-container .page-content-container .page-content-inner .page-content {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

@supports (display: grid) {
  .selectpage-container {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "m";
    background-color: #a8a8a8;
    width: 100%;
    height: 100%;
    padding: 64px 0;
    overflow-y: scroll;
  }
  .selectpage-container .selectpage-content-container {
    grid-area: m;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    justify-self: center;
    padding: 64px;
    background-color: #058aff;
    box-shadow: #5b5b5b 16px 16px 32px 16px, #323232 2px 2px 32px 16px;
    border-radius: 16px;
    width: 90%;
    min-height: 90%;
  }
  .selectpage-container .selectpage-content-container .selectpage-content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #ffffff;
    max-width: 1280px;
    width: 100%;
    border-radius: 8px;
    overflow: scroll;
  }
  .selectpage-container .selectpage-content-container .selectpage-header {
    display: flex;
    flex-flow: row wrap;
    flex: 0 1 auto;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1280px;
    width: 100%;
    margin: auto auto 8px auto;
  }
  .selectpage-container .selectpage-content-container .selectpage-title {
    font-weight: bold;
    font-size: 300%;
    color: #252d34;
  }
}
.align-left {
  text-align: left;
  justify-content: flex-start;
}

.align-center {
  text-align: center;
  justify-content: center;
}

.align-right {
  text-align: right;
  justify-content: flex-end;
}

.horizontal-line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin: 16px 0 8px 0;
  background-color: #b3b9c7;
  border: #b3b9c7 solid 1px;
}

.horizontal-line-divider {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 2px;
  margin: 16px 0;
  background-color: #b3b9c7;
  border: #b3b9c7 solid 1px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.version-string {
  color: #f2f2f2;
  margin-top: auto;
  padding: 8px 16px;
}

.info-element {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 8px 0;
  border-bottom: #b3b9c7 solid 2px;
}
.info-element:first-of-type {
  padding-top: 0;
}
.info-element:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.info-element .info-element-header {
  display: flex;
  flex-direction: row;
  font-weight: bold;
  margin-right: 8px;
}
.info-element .info-element-content {
  display: flex;
  flex-direction: row;
}

.card.info-card {
  background-color: #f2f2f2;
  padding: 8px 32px;
  border-radius: 4px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.subheader-msg-column {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 1000;
  margin: 0;
  padding: 0;
}
.subheader-msg-column .subheader-msg-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 0 32px 0;
  padding: 16px 0;
  border-color: transparent;
  border-width: 1px 1px 1px 8px;
  border-style: solid;
  border-radius: 8px;
}
.subheader-msg-column .subheader-msg-row .smr-message-header {
  display: flex;
  flex-flow: row;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  background-color: transparent;
  font-size: 90%;
  font-weight: bold;
  color: #062350;
}
.subheader-msg-column .subheader-msg-row .smr-message-text {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: center;
  padding-left: 4px;
  height: 100%;
  font-size: 90%;
}
.subheader-msg-column .subheader-msg-row.warning, .subheader-msg-column .subheader-msg-row.warn {
  animation: fadeIn ease 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: #fff1e5;
  border-color: #ff9437;
}
.subheader-msg-column .subheader-msg-row.warning .msg-button, .subheader-msg-column .subheader-msg-row.warn .msg-button {
  fill: #ff9437;
}
.subheader-msg-column .subheader-msg-row.success {
  animation: fadeIn ease 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: #d9f1f2;
  border-color: #0097a7;
}
.subheader-msg-column .subheader-msg-row.success .msg-button {
  fill: #0097a7;
}
.subheader-msg-column .subheader-msg-row.notice {
  animation: fadeIn ease 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: #e3f2fd;
  border-color: #1e88e5;
}
.subheader-msg-column .subheader-msg-row.notice .msg-button {
  fill: #1e88e5;
}
.subheader-msg-column .subheader-msg-row.error {
  animation: fadeIn ease 0.7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: #ffebee;
  border-color: #f44336;
}
.subheader-msg-column .subheader-msg-row.error .msg-button {
  fill: #f44336;
}

.menu-toggle-label {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  max-width: 40px;
  height: 40px;
  overflow: hidden;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
}
.menu-toggle-label.toggle-1 {
  padding: 0;
}
.menu-toggle-label.toggle-1:before {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  content: "";
  background-image: url(/css/v2/left-triangle-full-height-no-pad-icon-24x24.svg);
  background-repeat: no-repeat;
  height: 150px;
  width: 150px;
  background-position: 54% 50%;
}
.menu-toggle-label.toggle-2::before {
  content: url(/css/v2/right-triangle-full-height-icon-24x24.svg);
}

@media (width > 1024px) {
  .menu-toggle-label.toggle-1 {
    opacity: 1;
    max-width: 40px;
    z-index: 10;
  }
  .menu-toggle-label.toggle-2 {
    opacity: 0;
    max-width: 0;
    padding: 0;
    z-index: -10;
  }
  input#menu-toggle {
    display: none;
    position: absolute;
    top: -1000px;
  }
  input#menu-toggle:checked ~ .page-header-container .page-header-inner .page-header-logo.inside {
    max-width: 0;
    min-width: 0;
    padding: 0;
  }
  input#menu-toggle:checked ~ .page-content-container .page-content-inner .main-menu {
    max-width: 0;
    min-width: 0;
  }
  input#menu-toggle:checked ~ .page-header-container .menu-toggle-label.toggle-1 {
    opacity: 0;
    max-width: 0;
    padding: 0;
    z-index: -10;
  }
  input#menu-toggle:checked ~ .page-header-container .menu-toggle-label.toggle-2 {
    opacity: 1;
    max-width: 40px;
    z-index: 10;
    background-size: 100%;
  }
}
@media (max-width: 1024px) {
  .page-container .page-header-container .page-header-inner .page-header-logo.inside {
    max-width: 0;
    min-width: 0;
    padding: 0;
  }
  .page-container .page-header-container .menu-toggle-label.toggle-1 {
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    z-index: -10;
  }
  .page-container .page-header-container .menu-toggle-label.toggle-2 {
    opacity: 1;
    max-width: 40px;
    z-index: 10;
    background-size: 100%;
  }
  .page-container .page-content-container .page-content-inner .main-menu {
    max-width: 0;
    min-width: 0;
  }
  input#menu-toggle {
    position: absolute;
    top: -1000px;
  }
  input#menu-toggle:checked ~ .page-header-container .page-header-inner .page-header-logo.inside {
    max-width: 300px;
    min-width: 300px;
    padding: 0 0 0 8px;
  }
  input#menu-toggle:checked ~ .page-content-container .page-content-inner .main-menu {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
  }
  input#menu-toggle:checked ~ .page-header-container .menu-toggle-label.toggle-2 {
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    z-index: -10;
  }
  input#menu-toggle:checked ~ .page-header-container .menu-toggle-label.toggle-1 {
    opacity: 1;
    max-width: 40px;
    z-index: 10;
  }
}
.page-container .page-header-container .page-header-inner {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  transition: all 0.4s ease-in-out;
}
.page-container .page-header-container .page-header-inner .page-header-logo {
  display: flex;
  flex-flow: row;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 0 8px;
  transition: all 0.4s ease-in-out;
  max-width: 300px;
  min-width: 300px;
  height: 100%;
  overflow: hidden;
}
.page-container .page-header-container .page-header-inner .page-header-logo.inside {
  background-color: #0d2433;
}
.page-container .page-header-container .page-header-inner .page-header-logo.outside {
  background-color: #058aff;
}
.page-container .page-header-container .page-header-inner .page-header-logo svg#squidr-logo-text {
  display: block;
  height: 36px;
  fill: #ffffff;
  margin-left: 16px;
}
.page-container .page-header-container .page-header-inner .page-header-content {
  display: flex;
  flex-flow: row;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.page-container .page-header-container .page-header-inner .page-header-content .module-header {
  display: flex;
  flex-flow: row;
  flex: 0 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-left: 16px;
}
.page-container .page-header-container .page-header-inner .page-header-content .page-header {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  height: 100%;
}
.page-container .page-header-container .page-header-inner .page-header-content .page-header.outside {
  background-color: #058aff;
}

.page-container .main-menu {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  min-width: 300px;
  max-width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  transition: all 0.4s ease-in-out;
  padding: 0;
  background-color: #0d2433;
}
.page-container .main-menu .main-menu-toggle-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
.page-container .main-menu nav ul {
  display: flex;
  flex-flow: column nowrap;
  list-style: none;
  padding: 0;
}
.page-container .main-menu nav ul li {
  display: flex;
  flex-flow: row nowrap;
  padding: 0.5rem 1rem;
}
.page-container .main-menu nav ul li.current a {
  color: #058aff;
}
.page-container .main-menu nav ul li.current a svg#admin-icon-24x24 {
  stroke: #058aff;
}
.page-container .main-menu nav ul li.current a:hover {
  color: #1976d2;
}
.page-container .main-menu nav ul li.current a:hover svg#admin-icon-24x24 {
  stroke: #1976d2;
}
.page-container .main-menu nav ul li .menu-entry {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  align-items: center;
  color: #f2f2f2;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease-out;
  white-space: nowrap;
}
.page-container .main-menu nav ul li .menu-entry:hover {
  color: #b3b9c7;
}
.page-container .main-menu nav ul li .menu-entry:hover svg.icon-24x24 {
  fill: #b3b9c7;
}
.page-container .main-menu nav ul li .menu-entry svg.icon-24x24 {
  display: block;
  margin-right: 0.5rem;
  width: 24px;
  height: 24px;
  fill: #f2f2f2;
  transition: all 0.2s ease-in-out;
}
.page-container .main-menu nav ul li .menu-entry.section-admin svg.icon-24x24 {
  fill: none;
  stroke: #f2f2f2;
  stroke-width: 2px;
}
.page-container .main-menu nav ul ul.submenu {
  display: flex;
  flex-flow: column nowrap;
  list-style: none;
  padding: 0;
}
.page-container .main-menu nav ul ul.submenu li.submenu-entry {
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
}
.page-container .main-menu nav ul ul.submenu li.submenu-entry a {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 6px 0 6px 64px;
  white-space: nowrap;
  font-weight: bold;
  color: #f2f2f2;
  transition: all 0.2s ease-out;
}
.page-container .main-menu nav ul ul.submenu li.submenu-entry a:hover {
  color: #b3b9c7;
}
.page-container .main-menu nav ul ul.submenu li.submenu-entry.current a {
  color: #058aff;
}
.page-container .main-menu nav ul ul.submenu li.submenu-entry.current a:hover {
  color: #1976d2;
}

.avatar-menu {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  border: #9b223d solid 2px;
}

.user-info {
  display: flex;
  flex-flow: row;
  white-space: nowrap;
  padding: 4px 16px;
  background-color: #e3e3e3;
  margin-right: 4px;
  transition: background-color 0.2s ease-in-out;
}
.user-info:hover {
  background-color: #d5d5d5;
}

.user-menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  padding-right: 32px;
}
.user-menu .user-info-link {
  display: flex;
  flex-flow: row nowrap;
  white-space: nowrap;
}
.user-menu .user-link {
  margin-right: 16px;
}
.user-menu .user-link .account-svg {
  width: 32px;
  height: 32px;
}

.section-header-icon-container {
  display: flex;
  flex-direction: column;
  flex: 0 0 32px;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  min-height: 40px;
  min-width: 40px;
  margin-right: 8px;
  border-radius: 8px;
}
.section-header-icon-container svg {
  width: 24px;
  height: 24px;
}
.section-header-icon-container.section-admin {
  background-color: #1dc0e4;
}
.section-header-icon-container.section-admin svg {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
.section-header-icon-container.section-home {
  background-color: #058aff;
}
.section-header-icon-container.section-home svg {
  stroke: none;
  fill: black;
}
.section-header-icon-container.section-useraccount {
  background-color: #ff9437;
}
.section-header-icon-container.section-useraccount svg {
  stroke: none;
  fill: black;
}
.section-header-icon-container.section-dataset {
  background-color: #6cd0b8;
}
.section-header-icon-container.section-dataset svg {
  stroke: none;
  fill: black;
}

nav.indexpage-menu-container {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 64px 0 0 0;
}
nav.indexpage-menu-container ul {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
nav.indexpage-menu-container ul li {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-right: 32px;
  margin-bottom: 32px;
  min-width: 216px;
  min-height: 216px;
  width: 216px;
  height: 216px;
  padding: 0;
  border: #b3b9c7 solid 2px;
  border-radius: 16px;
  box-shadow: #b3b9c7 0px 1px 2px 0px;
  transition: all 0.2s ease-in;
}
nav.indexpage-menu-container ul li:hover {
  box-shadow: #a1a5b5 5px 5px 5px, #b3b9c7 0px 0px 6px;
}
nav.indexpage-menu-container ul li a {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
nav.indexpage-menu-container ul li a .indexpage-menu-item-icon svg {
  display: flex;
  width: 64px;
  height: 64px;
  stroke: none;
}
nav.indexpage-menu-container ul li a .indexpage-menu-item-icon.section-sysadmin {
  fill: #73276b;
}
nav.indexpage-menu-container ul li a .indexpage-menu-item-caption {
  text-transform: uppercase;
  font-weight: bold;
}

.tabs-to-page-spacer {
  height: 40px;
  min-height: 40px;
}

.tabs-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}
.tabs-row.subnav {
  margin-top: 8px;
  font-size: 90%;
}
.tabs-row .tabs-row-inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  overflow-y: visible;
  width: 95%;
  max-width: 1280px;
  height: 100%;
  margin: 0;
}
.tabs-row.studysummary-subnav {
  margin-top: 8px;
  font-size: 90%;
}
.tabs-row.studysummary-subnav .tabs-row-inner {
  width: 100%;
}

@keyframes glowing {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #c0ffa7;
  }
  100% {
    background-color: #2aa706;
  }
}
.subnav-tabs {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  padding: 4px 0 4px 16px;
  border-radius: 16px;
  background-color: #ececec;
}

.tab {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  max-height: 32px;
  padding: 0;
  margin: 0 16px 0 0;
  border: #cfd8dc solid 2px;
  border-radius: 16px;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
  outline: none;
  white-space: nowrap;
}
.tab.current {
  border-color: #0e1012;
}
.tab:hover {
  background-color: #cfd8dc;
}
.tab a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  font-size: 100%;
  transition: 0.25s ease-in-out;
  outline: none;
}
.tab:focus-within {
  transition: background-color 4s;
  animation: glowing 4s infinite;
}
.card-container {
  display: flex;
  flex-flow: column;
  flex: 0 1 auto;
  align-items: center;
  width: 100%;
}

.card-container-inner {
  display: flex;
  flex-flow: column;
  width: 95%;
  max-width: 1280px;
}

.card-row {
  display: flex;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: flex-start;
}

.card-field-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.card-column {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: flex-start;
}
.card-column.expand {
  flex: 1 1 auto;
}
.card-column.manager-edit {
  flex: 1 1 auto;
  margin-left: 16px;
}

.card-column.row-label {
  width: 150px;
}
.card-column.row-label.consortiumlist {
  width: 200px;
}

.card {
  display: flex;
  flex-flow: column;
  flex: 0 1 auto;
  align-items: stretch;
  width: 100%;
  padding: 32px;
  margin: 8px 0 16px 0;
  border-radius: 16px;
  border: #b3b9c7 solid 3px;
}
.card.confirm-delete {
  background-color: #ffc5b7;
  border: #9b1e2b solid 2px;
}
.card.confirm-match {
  background-color: #fffbee;
  border: #dc7f2f solid 2px;
}
.card .card-title {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
  justify-content: space-between;
  font-size: 125%;
  font-weight: bold;
  padding-bottom: 24px;
}
.card .card-field-header {
  display: flex;
  flex-flow: column;
  justify-content: center;
  font-size: 120%;
  font-weight: normal;
}
.card .card-field-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 120%;
  font-weight: bold;
  line-height: 1.6;
}
.card .card-field-row {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
.card .card-field-row.underline {
  border-bottom: #b3b9c7 solid 1px;
}

.card .card-hidebox-outer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 0px;
  max-height: 0px;
  transition: visibility 0s;
  transition: opacity 0.5s;
  visibility: visible;
  transition: visibility 0s;
  opacity: 1;
  transition: opacity 0.3s;
  margin-right: 16px;
  background-color: transparent;
}
.card .card-hidebox-outer .card-hidebox-toggle-container {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  border-radius: 16px;
  padding: 4px;
  background-color: transparent;
}
.card .card-hidebox-outer .card-hidebox-toggle-container > button {
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  background-color: #d5d5d5;
  padding: 4px;
  border: none;
  outline: none;
}
.card .card-hidebox-outer .card-hidebox-toggle-container svg {
  width: 24px;
}
.card .card-hidebox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 32px;
  max-height: 32px;
  transition: opacity 0.5s;
}
.card .card-hidebox .confirm-delete-wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.card .card-hidebox .confirm-delete-msg {
  display: flex;
  font-size: 100%;
  font-weight: bold;
  margin: 8px;
}
.card.card-hidebox-container .card-hidebox {
  visibility: hidden;
  transition: visibility 0s;
  opacity: 0;
  transition: opacity 0.3s;
  height: 0;
  max-height: 0;
  padding-right: 40px;
}
.card.card-hidebox-container:focus-within .card-hidebox {
  visibility: visible;
  opacity: 1;
}

.card.emptypage {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  width: 100%;
  margin: 8px 0 16px 0;
  padding: 64px;
  background-color: #ffffff;
  border-radius: 16px;
  border: #b3b9c7 solid 2px;
  border-top-width: 32px;
}
.card.emptypage .emptypage-inner {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
.card.emptypage .emptypage-inner header {
  font-size: 300%;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 16px 0 8px 0;
}

.emptypage-multi-outer {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  max-width: 100%;
  overflow-x: revert;
  justify-content: flex-start;
}

.card-row.emptypage-small-outer {
  justify-content: stretch;
  align-items: stretch;
  width: fit-content;
}
.card-row.emptypage-small-outer .card-column {
  flex: 1 1 auto;
}

.card.emptypage-small {
  justify-content: center;
}
.card.emptypage-small .card-title {
  justify-content: center;
}

.card.emptypage-multi {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  margin: 8px 0 16px 0;
  width: unset;
  background-color: #ffffff;
  border-radius: 16px;
  border: #b3b9c7 solid 2px;
  border-top-width: 32px;
}
.card.emptypage-multi .emptypage-inner {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.card.emptypage-multi .emptypage-inner header {
  font-size: 300%;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 16px 0 8px 0;
}

.login-card-container-inner {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 95%;
  max-width: 560px;
}
.login-card-container-inner .card.login-card {
  padding: 64px 80px;
}

.login-card-title {
  font-size: 125%;
  font-weight: bold;
  margin: 32px 0 24px 0;
}

.logo-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.logo-container .logo-img {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  border: none;
  background-color: #058aff;
  border-radius: 8px;
  padding: 8px;
}
.logo-container .logo-img svg {
  justify-content: flex-start;
  height: 64px;
  width: auto;
  padding: 6px;
  border-radius: 8px;
  background-color: transparent;
}
.logo-container .logo-text {
  display: flex;
  flex-flow: row nowrap;
  margin-left: 16px;
  font-family: Roboto;
  font-weight: bold;
  font-size: 270%;
}

.login-fieldset {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
.login-fieldset .login-field {
  display: flex;
  flex-flow: column nowrap;
  margin: 0 0 16px 0;
  width: 100%;
}
.login-fieldset .login-field input {
  height: 32px;
  width: 100%;
  padding-left: 16px;
  margin: 8px 0 0 0;
  background-color: #f2f2f2;
  border: #b3b9c7 solid 1px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.login-fieldset .login-field input::placeholder {
  color: #7a7a7a;
}
.login-fieldset .login-field input:hover {
  border-color: #b3b9c7;
}
.login-fieldset .login-field button.button.login {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 32px;
  padding: 4px 0;
  margin: 24px 0 16px 0;
  border: none;
  border-radius: 6px;
  background-color: #058aff;
  font-family: Roboto;
  font-weight: bold;
  color: white;
  font-size: 100%;
}
.login-fieldset .login-field a.login.reset-pw {
  display: flex;
  padding: 0;
  text-decoration: none;
  width: 100%;
  height: 100%;
  font-family: Roboto;
  font-weight: bold;
  color: #058aff;
}

.button,
button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-weight: bold;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 16px;
  border: none;
  transition: all 0.203s;
  color: #0e1012;
  background-color: #e3e3e3;
  transition: all 0.202s ease;
}
.button.warning,
button.warning {
  color: #e1ebff;
  background-color: #d32547;
}
.button.warning:hover,
button.warning:hover {
  color: #dce2f6;
  background-color: #9b1e2b;
}
.button:hover,
button:hover {
  background-color: #d5d5d5;
}
.button.icon24,
button.icon24 {
  padding: 4px;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  background-color: #d5d5d5;
}
.button.icon24:hover,
button.icon24:hover {
  background-color: #b5b5b5;
}
.button.selectpage.select,
button.selectpage.select {
  border: none;
  border-radius: 12px;
  padding: 3px 7px;
  background-color: #058aff;
  font-size: 75%;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.button.selectpage.select:hover,
button.selectpage.select:hover {
  background-color: #006fd1;
}
.button.selectpage.cancel,
button.selectpage.cancel {
  border: none;
  border-radius: 16px;
  padding: 4px 24px;
  background-color: #252d34;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.button.selectpage.cancel:hover,
button.selectpage.cancel:hover {
  background-color: #000000;
}

.card.emptypage-small .button.select,
.card.emptypage-multi .emptypage-inner .button.select,
.card.emptypage .emptypage-inner .button.select {
  font-size: 125%;
  background-color: #1d1f26;
  color: #f2f2f2;
  padding: 16px 64px;
  border-radius: 32px;
  transition: all 0.204s;
}

.form-buttonset button {
  margin-left: 16px;
}
.form-buttonset button.expand {
  width: 100%;
}
.form-buttonset button.submit {
  background-color: #ffac61;
  border: #ffac61 solid 2px;
  transition: background-color 0.2s;
}
.form-buttonset button.submit:hover {
  background-color: #ff9437;
}
.form-buttonset button.cancel {
  background-color: white;
  border: #000000 solid 2px;
}
.form-buttonset button.cancel:hover {
  background-color: #e3e3e3;
}

.select-button-outer {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.select-button-outer .select-button-inner {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
  width: 95%;
  max-width: 1280px;
}
.select-button-outer .select-button-inner .button.select {
  margin-right: 8px;
}

.button.toggle-activation {
  border: none;
  border-radius: unset;
  background-color: transparent;
  padding: 0;
  margin: 4px;
}
.button.toggle-activation svg.checkbox {
  width: 32px;
  fill: transparent;
  stroke-width: 3px;
  margin: 0;
}
.button.toggle-activation.active svg {
  stroke: #00a64c;
}
.button.toggle-activation.inactive svg {
  stroke: #9b1e2b;
}

.button.toggle {
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  padding: 0;
  border-radius: 50%;
  border: #b3b9c7 solid 4px;
}
.button.toggle:active {
  border: #000000 inset 2px;
}
.button.toggle:disabled {
  cursor: not-allowed;
}
.button.toggle.role-explicit {
  background-color: #00a64c;
  border-color: #00a64c;
}
.button.toggle.role-explicit:hover {
  background-color: #00873d;
}

.button.fileperm {
  min-height: 32px;
  max-height: 32px;
  padding: 0 16px;
  margin: 4px 0;
  border-radius: 16px;
  border: none;
  width: 100%;
}
.button.fileperm.on {
  background-color: #8ee19b;
}
.button.fileperm.on:hover {
  background-color: #80cb8b;
}
.button.fileperm.off {
  background-color: #ff7e94;
}
.button.fileperm.off:hover {
  background-color: #ff6178;
}
.button.fileperm.off.disabled {
  background-color: #ff7e94;
  cursor: not-allowed;
}
.button.fileperm:active {
  border: #000000 inset 2px;
}
.button.fileperm:disabled {
  cursor: not-allowed;
}
.button.fileperm.role-explicit {
  background-color: #00a64c;
  border-color: #00a64c;
}
.button.fileperm.role-explicit:hover {
  background-color: #00873d;
}
.button.fileperm.role-inherit {
  border-color: #00a64c;
}
.role-status-indicator {
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  border-radius: 50%;
  border: #b3b9c7 solid 4px;
}
.role-status-indicator.role-explicit {
  background-color: #00a64c;
  border-color: #00a64c;
}
.role-status-indicator.role-inherit {
  border-color: #00a64c;
}
.button.filter {
  padding: 4px 8px;
  border-radius: 8px;
  margin: 4px;
}

.filter-activate-buttons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: #cdffcb;
  padding: 0 8px;
}

.button.manager {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  width: 100%;
  margin: 4px 0;
}
.button.manager.selected {
  background-color: #00a64c;
  color: white;
}
.button.manager.selected:hover {
  background-color: #00873d;
}
details {
  display: flex;
  flex-flow: column;
  flex: 0 1 auto;
}
details summary {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  align-items: center;
}
details summary:hover {
  cursor: pointer;
}
details summary .button.details-toggle {
  width: 100%;
  justify-content: flex-start;
  border-radius: 0;
  background-color: transparent;
  font-size: 120%;
}
details summary .button.details-toggle svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.table-container {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
}
.table-container .selectpage-table-container-inner {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 1%;
}
.table-container .selectpage-table-container-inner table {
  margin-top: 16px;
}
.table-container .selectpage-table-container-inner table td, .table-container .selectpage-table-container-inner table th {
  border: #b3b9c7 solid 1px;
}
.table-container .selectpage-table-container-inner table td {
  white-space: wrap;
}
.table-container .selectpage-table-container-inner table tr:hover {
  background-color: #f2f2f2;
}

.css-table-container {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.css-td-row {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
}

.css-table {
  display: table;
}
.css-table.item-table {
  width: 100%;
}
.css-table.item-table .css-th, .css-table.item-table .css-td {
  border: #b3b9c7 solid 1px;
}
.css-table.item-table .css-th {
  background-color: #e3e3e3;
}
.css-table .css-thead {
  display: table-header-group;
}
.css-table .css-thead .css-trh {
  display: table-row;
}
.css-table .css-tbody {
  display: table-row-group;
}
.css-table .css-tbody .css-tr {
  display: table-row;
}
.css-table .css-tfoot {
  display: table-footer-group;
}
.css-table .css-col {
  display: table-column;
}
.css-table .css-colgroup {
  display: table-column-group;
}
.css-table .css-th, .css-table .css-td {
  display: table-cell;
  white-space: nowrap;
  padding: 0 8px;
}
.css-table .css-th {
  font-weight: bold;
}
.css-table .css-caption {
  display: table-caption;
}

.css-table.studyperm {
  width: 100%;
}
.css-table.studyperm .css-td.action-column, .css-table.studyperm .css-th.action-column {
  max-width: 80px;
}

.css-table.lined {
  border-collapse: collapse;
}
.css-table.lined .css-th, .css-table.lined .css-td {
  border: #b3b9c7 solid 1px;
}

.css-table.study-summary {
  width: 100%;
}
.css-table.study-summary .css-th, .css-table.study-summary .css-td {
  border: #b3b9c7 solid 1px;
}
.css-tbody.spacing-rows > .css-tr > .css-td {
  border: none;
}

.css-thead.data-rows > .css-trh > .css-th {
  border-color: #0e1012;
  background-color: #fffbee;
}

.table-scroll-outer {
  display: flex;
  padding: 16px 0;
}
.table-scroll-outer .table-scroll {
  display: flex;
  direction: rtl;
  transform: rotate(180deg);
  overflow-x: scroll;
  width: 100%;
  padding: 32px 16px;
  border: #0e1012 solid 1px;
  box-shadow: inset 2px 0 10px 0 #b2b2b2;
  scrollbar-width: auto;
  scrollbar-color: #d5d5d5 #e3e3e3;
}
.table-scroll-outer .table-scroll .css-table, .table-scroll-outer .table-scroll table {
  direction: ltr;
}

.table-scroll-content {
  display: flex;
  transform: rotate(180deg);
  padding: 0;
}

.css-tr.duplicate .css-td {
  background-color: #ffb2d1;
}

.page-content {
  background-color: white;
}

.landingpage-search {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #058aff;
  padding: 8px 24px;
}
.landingpage-search.hero {
  margin-top: 64px;
  margin-bottom: 32px;
}
.landingpage-search .form-title {
  display: flex;
  flex-flow: column nowrap;
  font-weight: bold;
  font-size: 200%;
  color: #f2f2f2;
  margin: 0 16px;
  padding: 8px;
}
.landingpage-search > .form-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.landingpage-search > .form-container .form-fieldset {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  font-size: 125%;
}
.landingpage-search > .form-container .form-fieldset input[type=text] {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 0 auto;
  background-color: #ffffff;
  width: 500px;
  padding: 4px 16px;
  margin-right: 16px;
  border-radius: 24px;
}
.landingpage-search > .form-container .form-buttonset {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  font-size: 125%;
}
.landingpage-search > .form-container .form-buttonset button {
  transition: all 0.206s;
}
.landingpage-search > .form-container .form-buttonset button.submit {
  margin: 0 8px;
  background-color: #0e1012;
  color: #ffffff;
}
.landingpage-search > .form-container .form-buttonset button.submit:hover {
  background-color: black;
  color: #e7e7e7;
}

.listview-row.below-the-fold {
  max-height: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition: transform 0.5s ease, max-height 0.3s linear;
}

.button.listview-collapsible {
  display: flex;
  flex-flow: row;
  flex: 1 0;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  padding: 0 32px;
  background-color: #058aff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: #ffffff;
  font-weight: bold;
  margin: 0 auto;
  transition: all 0.207s ease;
}
.button.listview-collapsible:before {
  content: "EXPLORE THIS STUDY";
}
.button.listview-collapsible.active:before {
  content: "SHOW LESS";
}

label.show-more-checkbox {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  min-width: 150px;
  background-color: #ff9c7a;
  cursor: pointer;
  color: #393939;
  padding: 4px 32px;
  border-radius: 16px;
}
label.show-more-checkbox::before {
  content: "Show more";
}
label.show-more-checkbox.close {
  display: none;
}

input.show-below-the-fold {
  position: absolute;
  left: -1000px;
}

.show-below-the-fold:checked ~ .below-the-fold {
  transform: scaleY(1);
  max-height: 100%;
}
.show-below-the-fold:checked ~ .below-the-fold .listview-row {
  padding: 8px;
  margin: 4px 0;
}
.show-below-the-fold:checked ~ .show-more-container label.show-more-checkbox::before {
  content: "Show less";
}
.show-below-the-fold:checked ~ .show-more-container label.show-more-checkbox.close {
  display: flex;
  margin-top: 8px;
}
.show-below-the-fold:checked ~ .show-more-container label.show-more-checkbox.close::before {
  content: "Close";
}

.show-more-container {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.table-container-column {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
}

.controlpanel-container {
  display: flex;
  flex: 1 1 auto;
}
.controlpanel-container.column {
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
.controlpanel-container.column .element-container {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
}
.controlpanel-container.column .element-container select {
  display: flex;
  color: #0e1012;
  background-color: #058aff;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 16px;
  transition: all 0.2s ease;
}
.controlpanel-container.column .element-container select:hover {
  background-color: #d5d5d5;
}
.controlpanel-container.column .element-container button {
  color: #0e1012;
  background-color: #058aff;
  font-weight: bold;
  transition: all 0.208s;
}
.controlpanel-container.column .element-container button:hover {
  background-color: #d5d5d5;
}

.listview-container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0 24px;
  padding: 24px;
  background-color: #bbdefb;
}
.listview-container #no-study-details {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}
.listview-container #back-button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  padding: 0 16px 0 0;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.listview-container #back-button:hover {
  background-color: #8bc7f8;
}
.listview-container #back-button #back-button-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  padding: 8px;
  border-radius: 8px;
  background-color: transparent;
}
.listview-container #back-button #back-button-content svg {
  width: 24px;
  height: 24px;
  fill: #058aff;
  stroke: #058aff;
}
.listview-container .listview-record {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  overflow-x: hidden;
  padding: 16px;
  margin-bottom: 32px;
  background-color: #e1ebff;
  color: #0e1012;
  border-radius: 16px;
  border: #0e1012 solid 4px;
}
.listview-container .listview-record .listview-column {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
}
.listview-container .listview-record .listview-column.left {
  max-width: 65%;
}
.listview-container .listview-record .listview-column.right {
  min-width: 25%;
  border: #b3b9c7 solid 2px;
  padding: 4px;
  border-radius: 8px;
  overflow-x: clip;
  overflow-clip-margin: -10px;
}
.listview-container .listview-record .listview-column.right .button-container {
  padding: 8px;
}
.listview-container .listview-record .button-container {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 0 8px;
  height: 100%;
}
.listview-container .listview-record .datacell {
  border-radius: 8px;
  min-width: 48px;
  color: #0e1012;
  background-color: #f2f8ff;
}
.listview-container .listview-record .listview-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 8px;
  margin: 4px 0;
  width: 100%;
  overflow-x: hidden;
}
.listview-container .listview-record .listview-row.below-the-fold {
  align-items: flex-start;
  border: none;
  padding: 0;
  margin: 0;
}
.listview-container .listview-record .listview-title {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 4px 8px;
  font-weight: bold;
  font-size: 120%;
}
.listview-container .listview-record .listview-text {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 4px 8px;
}
.listview-container .listview-record .listview-table-container {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
}

/*

  & .listview-record
  {
    display:         flex;
    flex-flow:       column nowrap;
    flex:            1 0 auto;
    justify-content: flex-start;
    align-items:     flex-start;
    width:           100%;
    overflow-x:      hidden;
    overflow-y:      visible;

    padding:         16px;

    border-radius:   16px;
    border:          #ae3ac9 solid 2px;

    & .listview-row
    {
      display:         flex;
      flex-flow:       row nowrap;
      justify-content: flex-start;
      align-items:     center;

      padding:         8px;
      margin:          4px 0;

      width:           100%;
      overflow-x:      hidden;
      border:          #c99c43 solid 2px;

      & .listview-title
      {
      }

      & .listview-text
      {
      }

      & .listview-table-container
      {
        display:    flex;
        flex-flow:  column nowrap;
        flex:       1 0 auto;
        border:     #ae3ac9 solid 2px;
        padding:    8px;
        //overflow-x: hidden;

        & .css-table
        {
          //display: table;
          //flex-flow: column nowrap;
          //flex:     1 0 auto;
          //
          //padding: 8px;
          //overflow-x: hidden;
          border:     #4480c9 solid 2px;

          & .css-tr
          {
            //display: flex;
            //flex-flow: row nowrap;
            //flex:     1 0 auto;
            //
            //padding: 8px;
            //overflow: hidden;
            border:   #487742 solid 2px;

            & .css-th, .css-td
            {
              //width: 100%;
              //display: flex;
              //flex-flow: column nowrap;
              //flex:     1 0 auto;
              //
              //padding: 8px;
              //overflow: hidden;
              border:     #770a27 solid 2px;


            }
          }
        }

      }
    }
  }
}
// */
.landingpage-hero {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 0 auto;
  background-color: #058aff;
  height: 550px;
  padding-top: 64px;
}
.landingpage-hero .header-container {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  align-items: center;
  width: 100%;
}
.landingpage-hero .header-container .hero-logotype {
  display: flex;
  padding: 96px 0 48px 0;
}
.landingpage-hero .header-container .header {
  display: flex;
  letter-spacing: 1px;
}
.landingpage-hero .header-container .header.small {
  font-size: 130%;
}
.landingpage-hero .header-container .header.big {
  font-size: 350%;
}
.landingpage-hero .searchform-container {
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
  width: 100%;
}
.landingpage-hero .searchform-container .form-container {
  display: flex;
  flex-flow: row nowrap;
  padding: 32px 0 64px 0;
  /*border: #f14370 solid 3px;*/
}
.landingpage-hero .searchform-container .form-container .form-fieldset > .form-field > #search_term {
  border-radius: 20px;
  width: 384px;
  font-size: 16px;
  padding: 8px 16px;
  margin: 0 16px 0 0;
}
.landingpage-hero .searchform-container .form-container .form-buttonset {
  display: flex;
  flex-flow: nowrap;
}
.landingpage-hero .searchform-container .form-container .form-buttonset .button {
  display: flex;
  font-size: 12pt;
  transition: all 0.2s;
  cursor: pointer;
}
.landingpage-hero .searchform-container .form-container .form-buttonset .button.submit {
  display: flex;
  flex: 0 auto;
  flex-flow: nowrap row;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  border-radius: 16px;
  background-color: #000000;
  color: #ffffff;
  font-weight: bold;
  border: none;
  margin-right: 16px;
}
.landingpage-hero .searchform-container .form-container .form-buttonset .button.reset {
  display: flex;
  flex: 0 0 0;
  flex-flow: nowrap row;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 16px;
  border: none;
  opacity: 50%;
  margin: auto 0;
  background-color: #ffffff;
  color: black;
}

/****************************************************************************************************
CONFLICT
****************************************************************************************************

//=======
.landingpage-hero
{
  display:          flex;
  flex-flow:        column nowrap;
  flex:             1 1 auto;
  //justify-content: space-between;
  background-color: #058aff;
  //height:           550px;
  padding-top:      64px;

  //border: #f14b22 solid 3px;

  //-------------------------------------------------------
  // header
  //-------------------------------------------------------
  & > .header-container
  {

    display:     flex;
    flex-flow:   column;
    flex:        0 0 0;
    align-items: center;
    width:       100vw;

    //border:      #f049f1 solid 3px;

    & .hero-logotype
    {
      display: flex;
      padding: 96px 0 48px 0;
    }

    & .header
    {
      display:        flex;
      letter-spacing: 1px;

      &.small
      {
        font-size: 130%;
      }

      &.big
      {
        font-size: 350%;
      }

    }

    //& *
    //{
    //  border: #f12032 solid 3px;
    //
    //}
    //}

    //-------------------------------------------------------
    // search form
    //-------------------------------------------------------
    & > .landingpage-search.hero
    {
      display:         flex;
      flex-flow:       nowrap;
      justify-content: center;
      width:           100vw;

      //border:          #f14b22 solid 3px;

      & > .form-container
      {
        display:         flex;
        flex-flow:       row nowrap;
        justify-content: center;
        align-items:     center;
        flex:            0 1 auto;
        padding:         32px 0 64px 0;
        max-width:       650px;

        //border:          #f14370 solid 3px;

        & .form-fieldset > .form-field > #search_term
        {
          border-radius: 20px;
          width:         384px;
          font-size:     16px;
          padding:       12px 16px 8px 16px;
          margin:        16px 16px 0 0;

          //border:        #f14370 solid 3px;
        }

        & > .form-buttonset
        {
          display:   flex;
          flex-flow: row nowrap;
          border:    none;

          //border:    #f14370 solid 3px;

          & > button,
          & > .button
          {
            display:    flex;
            font-size:  12pt;
            transition: all 0.2s;
            cursor:     pointer;

            transition: all 0.209s;

            &.submit
            {
              display:          flex;
              flex:             0 auto;
              flex-flow:        nowrap row;
              align-items:      center;
              justify-content:  center;
              padding:          8px 32px;
              border-radius:    16px;
              background-color: #000000;
              color:            #ffffff;
              font-weight:      bold;
              border:           none;
              margin-right:     16px;
            }
          }

          & > .button
          {
            display:    flex;
            font-size:  12pt;
            transition: all 0.2s;
            cursor:     pointer;

            transition: all 0.209s;

            &.reset
            {
              display:          flex;
              flex:             0 0 0;
              flex-flow:        nowrap row;
              align-items:      center;
              justify-content:  center;
              padding:          4px 8px;
              border-radius:    16px;
              opacity:          50%;
              margin:           auto 0;
              background-color: #ffffff;
              color:            black;

            }
          }
        }
      }
    }
  }
}

//>>>>>>> dev-2025-11-09-new-simple-design


 */
.listview-container.frontpage {
  display: flex;
  flex-flow: column;
  flex: 0 0 auto;
  border-radius: 8px 8px 0 0;
  align-items: center;
  width: 95%;
  max-width: 1280px;
  max-height: 100%;
  overflow-y: scroll;
  overflow-x: visible;
  margin: 0 auto;
  padding: 64px 24px;
}
.listview-container.frontpage .header-container {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.listview-container.frontpage .header-container .header {
  display: flex;
}
.listview-container.frontpage .header-container .header.small {
  font-size: 150%;
}
.listview-container.frontpage .header-container .header.big {
  font-weight: bold;
  font-size: 300%;
}

.page-section {
  margin: 0 24px;
}
.page-section.about {
  display: flex;
  flex-flow: column;
  flex: auto 1;
  align-items: center;
  background-color: #ffffff;
  margin: 0;
  padding: 64px 0;
}
.page-section.about .header-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
}
.page-section.about .header-container .header {
  display: flex;
}
.page-section.about .header-container .header.small {
  font-size: 150%;
}
.page-section.about .header-container .header.big {
  font-size: 300%;
}
.page-section.about .header-container .header.big .bold {
  display: inline-block;
  margin: 0 16px;
}
.page-section.about .about-container {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-flow: column;
  max-width: 1024px;
  padding: 24px;
}
.page-section.about .about-container .about-section-content {
  padding: 24px 24px 24px 0;
}
.page-section.about .about-container .inset-container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  justify-content: space-between;
  margin: 24px 0;
}
.page-section.about .about-container .inset-container .row {
  display: flex;
  flex-flow: nowrap;
}
.page-section.about .about-container .inset-container .row.top {
  justify-content: space-between;
  flex: 0 0 0;
  align-items: center;
  margin-bottom: 16px;
}
.page-section.about .about-container .inset-container .row.top svg {
  display: flex;
  max-height: 20px;
}
.page-section.about .about-container .inset-container .row.top .inset-num {
  font-size: 200%;
}
.page-section.about .about-container .inset-container .row.header.big {
  font-size: 200%;
  font-weight: bold;
  color: #0d2433;
}
.page-section.about .about-container .inset-container .pane {
  display: flex;
  flex-flow: column;
  justify-content: stretch;
  margin: 0 8px;
  padding: 0;
}
.page-section.about .about-container .inset-container .pane#left-pane {
  max-width: 38%;
  min-width: 40%;
}
.page-section.about .about-container .inset-container .pane#right-pane {
  width: 59%;
  min-width: 59%;
}
.page-section.about .about-container .inset-container .pane .inset {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  border-radius: 16px;
  padding: 24px;
}
.page-section.about .about-container .inset-container .pane .inset#inset-01 {
  background-color: #cee8ff;
}
.page-section.about .about-container .inset-container .pane .inset#inset-02 {
  background-color: #e6f3ff;
  margin-bottom: 16px;
}
.page-section.about .about-container .inset-container .pane .inset#inset-03 {
  background-color: #b6ddff;
}

.page-section.adoption {
  background: url("/img/fp/adoption-background.svg");
  margin: 0;
  padding: 64px 0;
}
.page-section.adoption .header-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.page-section.adoption .header-container .header.small {
  font-size: 200%;
  margin-bottom: 0;
}
.page-section.adoption .header-container .header.big {
  font-size: 300%;
  margin-top: 0;
}
.page-section.adoption .adoption-container {
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
  flex: 0 0 0;
  width: 100%;
  margin-top: 112px;
}
.page-section.adoption .adoption-container svg {
  width: 350px;
  margin: 0 32px;
}

.page-section.squidrgitlab {
  display: flex;
  flex-flow: nowrap;
  flex: 1 0 auto;
  background-color: #0d2433;
  margin: 0;
  padding: 64px 0;
}
.page-section.squidrgitlab .header-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  color: white;
}
.page-section.squidrgitlab .header-container svg {
  display: flex;
  width: 64px;
  fill: #0d2433;
  transition: all 0.2s ease-in-out;
}
.page-section.squidrgitlab .header-container svg:hover {
  fill: #000000;
}
.page-section.squidrgitlab .header-container .header.small {
  font-size: 200%;
}
.page-section.squidrgitlab .header-container .header.big {
  font-size: 300%;
  line-height: 2;
}
.page-section.squidrgitlab .header-container .squidrgitlab-download-link {
  display: flex;
  flex-flow: column;
  margin-top: 24px;
}
.page-section.squidrgitlab .header-container .squidrgitlab-download-link svg {
  height: 64px;
  width: 450px;
}
.page-section.squidrgitlab .header-container .squidrgitlab-icons {
  display: flex;
  flex-flow: column;
  margin-top: 48px;
}
.page-section.squidrgitlab .header-container .squidrgitlab-icons svg {
  height: 64px;
  width: 450px;
}

.page-section.discover {
  display: flex;
  flex-flow: column;
  flex: auto 1;
  align-items: center;
  background-color: white;
  color: black;
  padding: 64px 0;
  margin: 0;
}
.page-section.discover .header-container {
  display: flex;
  flex-flow: column;
  flex: 0 0 0;
  align-items: center;
  width: 100%;
}
.page-section.discover .header-container svg {
  display: flex;
  width: 64px;
}
.page-section.discover .header-container .header.small {
  font-size: 200%;
}
.page-section.discover .header-container .header.big {
  font-size: 300%;
  line-height: 2;
}
.page-section.discover .header-container .discover-download-link {
  display: flex;
  flex-flow: column;
  margin-top: 24px;
}
.page-section.discover .header-container .discover-download-link svg {
  height: 64px;
  width: 450px;
}
.page-section.discover .header-container .discover-icons {
  display: flex;
  flex-flow: column;
  margin-top: 48px;
}
.page-section.discover .header-container .discover-icons svg {
  height: 64px;
  width: 450px;
}
.page-section.discover .discover-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 0;
  width: 100%;
  margin-top: 112px;
}
.page-section.discover .discover-container .row svg {
  width: 350px;
  margin: 0 32px;
}

.page-section.funding {
  display: flex;
  flex-flow: column;
  flex: auto 1;
  align-items: center;
  background-color: #bbdefb;
  color: black;
  margin: 0;
  padding: 64px 0;
}
.page-section.funding .header-container {
  display: flex;
  flex-flow: column;
  flex: 0 0 0;
  align-items: center;
  width: 100%;
}
.page-section.funding .header-container svg {
  display: flex;
  width: 96px;
}
.page-section.funding .header-container .header.small {
  font-size: 200%;
}
.page-section.funding .header-container .header.big {
  font-size: 300%;
  line-height: 2;
}
.page-section.funding .header-container .funding-download-link {
  display: flex;
  flex-flow: column;
  margin-top: 24px;
}
.page-section.funding .header-container .funding-download-link svg {
  height: 64px;
  width: 450px;
}
.page-section.funding .header-container .funding-icons {
  display: flex;
  flex-flow: column;
  margin-top: 48px;
}
.page-section.funding .header-container .funding-icons svg {
  height: 64px;
  width: 450px;
}
.page-section.funding .funding-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: start;
  flex: 0 0 0;
  width: 100%;
  background-color: #0d2433;
  padding: 32px 0;
  margin-top: 32px;
}
.page-section.funding .funding-container .row {
  display: flex;
  flex-flow: row;
  width: 80%;
  padding: 32px;
}
.page-section.funding .funding-container .row svg {
  height: 72px;
  margin: 0 32px;
}
.page-section.funding .funding-container .row#funding-row-1 {
  justify-content: start;
}
.page-section.funding .funding-container .row#funding-row-2 {
  justify-content: end;
}

/****************************************************************************************************
CONFLICT
****************************************************************************************************
 
//=======
@use "../../../config/settings" as *;
@use "../../../config/mappings" as *;

.page-section
{
  &.funding
  {
    display:          flex;
    flex-flow:        column;
    flex:             auto 1;
    align-items:      center;
    //height:           960px;
    background-color: $listview-bgcolor;
    color:            black;
    margin:           0;
    padding:          64px 0;

    //& *
    //{
    //  border: #ff445e solid 1px;
    //  padding: 2px;
    //}

    & .header-container
    {
      display:     flex;
      flex-flow:   column;
      flex:        0 0 0;
      align-items: center;
      width:       100vw;

      & svg
      {
        display: flex;
        width:   96px;
        //border: #ff445e solid 3px;
      }

      & .header.small
      {
        font-size: 200%;
      }

      & .header.big
      {
        font-size:   300%;
        line-height: 2;

      }

      & .funding-download-link
      {
        display:    flex;
        flex-flow:  column;
        margin-top: 24px;

        & svg
        {
          height: 64px;
          width:  450px;
        }
      }

      & .funding-icons
      {
        display:    flex;
        flex-flow:  column;
        margin-top: 48px;

        & svg
        {
          height: 64px;
          width:  450px;
        }
      }
    }

    //& *
    //{
    //  border:  #ff445e solid 1px;
    //  padding: 2px;
    //}

    & .funding-container
    {
      display:          flex;
      flex-flow:        column;
      align-items:      center;
      justify-content:  start;
      flex:             0 0 0;
      width:            100vw;
      //height:           350px;

      background-color: $primary-color-dark;

      padding:          32px 0;

      //border:          #fd6170 solid 3px;

      margin-top:       32px;

      & .row
      {
        display:   flex;
        flex-flow: row;
        width:     80%;
        padding:   32px;

        & svg
        {
          height: 72px;
          //min-width: 1px;
          margin: 0 32px;
        }

        &#funding-row-1
        {
          justify-content: start;
        }

        &#funding-row-2
        {
          justify-content: end;
        }

      }

    }
  }

  //>>>>>>> dev-2025-11-09-new-simple-design
}

 */
.page-section.endorse {
  display: flex;
  flex-flow: column;
  flex: auto 1;
  align-items: center;
  background-color: white;
  color: black;
  padding-bottom: 64px;
  padding-top: 64px;
  margin: 0;
}
.page-section.endorse .header-container {
  display: flex;
  flex-flow: column;
  flex: 0 0 0;
  align-items: center;
  width: 100%;
}
.page-section.endorse .header-container svg {
  display: flex;
  width: 64px;
}
.page-section.endorse .header-container .header.small {
  font-size: 200%;
}
.page-section.endorse .header-container .header.big {
  font-size: 300%;
  line-height: 2;
}
.page-section.endorse .header-container .endorse-download-link {
  display: flex;
  flex-flow: column;
  margin-top: 24px;
}
.page-section.endorse .header-container .endorse-download-link svg {
  height: 64px;
  width: 450px;
}
.page-section.endorse .header-container .endorse-icons {
  display: flex;
  flex-flow: column;
  margin-top: 48px;
}
.page-section.endorse .header-container .endorse-icons svg {
  height: 64px;
  width: 450px;
}
.page-section.endorse .endorse-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 0;
  width: 100%;
}
.page-section.endorse .endorse-container .row {
  display: flex;
  flex-flow: row;
}
.page-section.endorse .endorse-container .row .column {
  display: flex;
  flex-flow: column;
  justify-content: end;
  width: 300px;
  margin: 0 8px;
}
.page-section.endorse .endorse-container .row .column img {
  margin: 8px 0;
}

.page-section.footer {
  width: 100%;
  background-color: #058aff;
  justify-content: start;
  min-height: 256px;
  margin: 0;
  padding: 32px 0;
}
.page-section.footer svg {
  background-color: transparent;
}
.page-section.footer .footer-container {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
  justify-content: start;
  align-items: center;
}

.form-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.form-buttonset {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 100%;
  margin-top: 16px;
  padding: 8px 0;
}
.form-buttonset.left {
  justify-content: flex-start;
}

.form-fieldset {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
.form-fieldset label {
  display: flex;
  flex-flow: row nowrap;
  padding: 8px;
  font-weight: bold;
}
.form-fieldset .form-field .plaintext-input {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background-color: #f2f2f2;
  border-radius: 8px;
  padding: 8px;
  cursor: not-allowed;
}
.form-fieldset .form-field textarea, .form-fieldset .form-field input {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background-color: #f2f2f2;
  border-radius: 8px;
  padding: 8px;
  transition: background-color 0.1s;
}
.form-fieldset .form-field textarea:active, .form-fieldset .form-field textarea:focus, .form-fieldset .form-field input:active, .form-fieldset .form-field input:focus {
  background-color: white;
  outline: 2px solid #a1a1aa;
  outline-offset: -1px;
}
.form-fieldset .form-field textarea:hover, .form-fieldset .form-field input:hover {
  outline: 2px solid #a1a1aa;
  outline-offset: -1px;
}

.card-container-inner#create-with-org .form-fieldset:has(input#confirm) {
  border: #d32547 solid 2px;
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
}
.card-container-inner#create-with-org .form-fieldset:has(input#confirm) label {
  flex-wrap: wrap;
  white-space: wrap;
  width: 100%;
  cursor: pointer;
}
.card-container-inner#create-with-org .form-fieldset:has(input#confirm:checked) {
  border: #95eba2 solid 2px;
  background-color: #95eba2;
}
.card-container-inner#create-with-org .form-fieldset:has(input#confirm:checked) label {
  background-color: #95eba2;
}
.card-container-inner#create-with-org .form-fieldset .form-field > input#confirm {
  margin-right: 32px;
  outline: none;
  transform: scale(1.5);
}

.form-fieldset:has(input.has-header) label {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
.form-fieldset:has(input.has-header) label:after {
  content: "";
  background-image: url(/css/v2/checkbox-unchecked-24x24.svg);
  background-repeat: no-repeat;
  height: 32px;
  width: 32px;
}
.form-fieldset:has(input.has-header:checked) label:after {
  content: "";
  background-image: url(/css/v2/checkbox-checked-24x24.svg);
  background-repeat: no-repeat;
  height: 32px;
  width: 32px;
}
.form-fieldset input.has-header {
  position: absolute;
  left: -9999px;
}

.checkmulti.cl-roles {
  display: flex;
  width: 100%;
}
.checkmulti.cl-roles .field-group {
  display: flex;
  flex-flow: column;
  width: 100%;
}
.checkmulti.cl-roles .field-group .field {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  padding: 0;
}
.checkmulti.cl-roles .field-group .field label {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 24px;
  margin: 4px 0;
  cursor: pointer;
  background-color: #e3e3e3;
  transition: background-color 0.2s;
  border-radius: 16px;
  border: #b3b9c7 1px solid;
  font-weight: bold;
}
.checkmulti.cl-roles .field-group .field label:hover {
  background-color: #d5d5d5;
}
.checkmulti.cl-roles .field-group .field input {
  position: relative;
  left: -100000px;
  margin: 0 0 0 -1rem;
  width: unset;
}
.checkmulti.cl-roles .field-group .field input:checked ~ label {
  background-color: #00a64c;
}
.checkmulti.cl-roles .field-group .field input:checked ~ label:hover .labdecor {
  background-color: #00873d;
}
.checkmulti.cl-roles .field-group .field input:disabled ~ label {
  background-color: #c2c2c2;
  cursor: not-allowed;
}
.checkmulti.cl-roles .field-group .field input:checked:disabled ~ label {
  background-color: #70b179;
  cursor: not-allowed;
}
.checkmulti.cl-roles .field-group .field .label-text {
  margin-left: 0.5rem;
}

.table-nav-outer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  max-width: 1280px;
}
.table-nav-outer .table-nav-inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap-reverse;
  padding: 0 0 16px 0;
}
.table-nav-outer .table-nav-inner > ul {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-height: 32px;
  max-height: 32px;
  list-style: none;
  padding: 0;
  margin: 0 16px 0 0;
  border: #b3b9c7 solid 1px;
  border-radius: 8px;
}
.table-nav-outer .table-nav-inner > ul.table-pg-of-pgs {
  white-space: nowrap;
  margin-left: 8px;
  padding: 0 8px;
}
.table-nav-outer .table-nav-inner > ul > li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.table-nav-outer .table-nav-inner > ul > li > a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 16px;
}
.table-nav-outer .table-nav-inner > ul > li > a:hover {
  background-color: #b3b9c7;
}
.table-nav-outer .table-nav-inner > ul > li > a > svg {
  height: 24px;
  margin: 4px 0;
}

.search-filter-outer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.search-filter-outer .search-filter-inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap-reverse;
  padding: 0;
}
.search-filter-outer .search-filter-inner > ul {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0 16px 0 0;
}
.search-filter-outer .search-filter-inner > ul > li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.search-filter-outer .search-filter-inner > ul > li.pg-of-pgs {
  white-space: nowrap;
  margin-left: 8px;
}
.search-filter-outer .search-filter-inner > ul > li > a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 16px;
}
.search-filter-outer .search-filter-inner > ul > li > a:hover {
  background-color: #b3b9c7;
}
.search-filter-outer .search-filter-inner > ul > li > a > svg {
  height: 24px;
  margin: 4px 0;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
  border-radius: 8px;
  border: #b3b9c7 solid 2px;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements > input {
  display: flex;
  flex-flow: row nowrap;
  flex: 1 1 auto;
  margin: 0 8px;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements > .search-filter-submit {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  border-radius: unset;
  transition: all 0.212s ease;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements:has(> .search-filter-reset:hover) {
  background-color: #f2f2f2;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements .search-filter-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}
.search-filter-outer .search-filter-inner .search-filter-form-elements .search-filter-reset svg {
  fill: black;
}

.loginlink-container {
  display: flex;
  flex-flow: row;
  flex: 0 1 auto;
  align-items: center;
  justify-content: end;
  padding: 0 16px;
  height: 100%;
  background-color: #058aff;
}
.loginlink-container a.user-login {
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 16px;
  background-color: #e3e3e3;
  border-radius: 16px;
  color: #ffffff;
  font-weight: bold;
  transition: all 0.2s ease;
}
.loginlink-container a.user-login:hover {
  background-color: #d5d5d5;
  color: #0e1012;
}
.loginlink-container.frontpage a.user-login {
  background-color: #1d1f26;
}
.loginlink-container.frontpage a.user-login:hover {
  background-color: #0e1012;
}

.gitlab-link {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  margin-left: auto;
  background-color: #058aff;
}
.gitlab-link a {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.gitlab-link a svg {
  width: 24px;
}

.filter-table .filter-input {
  display: flex;
}
.filter-table input {
  border: #dd1d37 solid 1px;
}
.filter-table .filter-row .css-th, .filter-table .filter-row .css-td {
  border: #2aa706 solid 1px;
  padding: 4px 8px;
  background-color: #cdffcb;
}

button:focus,
a:focus {
  outline: 2px solid #a1a1aa;
  outline-offset: -1px;
}
button:focus-within,
a:focus-within {
  outline: 2px solid #a1a1aa;
  outline-offset: -1px;
}
button:active,
a:active {
  outline: 2px solid #a1a1aa;
  outline-offset: -1px;
}