@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;
}
button:focus, button:active {
  outline: none;
}

html {
  height: 100%;
}

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

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;
  height: 100%;
  overflow-y: scroll;
  transition: all 0.4s ease-in-out;
}

.menu-toggle-label {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  max-width: 40px;
  height: 40px;
  overflow: hidden;
  background-color: #ac009e;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 300%;
  font-weight: bold;
}
.menu-toggle-label:hover {
  background-color: #8a007d;
}
.menu-toggle-label.toggle-1:before {
  padding-bottom: 0.25rem;
  content: "←";
}
.menu-toggle-label.toggle-2::before {
  padding-bottom: 0.25rem;
  content: "→";
}

@media (width > 1024px) {
  .menu-toggle-label.toggle-1 {
    opacity: 1;
    max-width: 40px;
    padding: 10px 15px;
    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;
    padding: 10px 15px;
    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;
    padding: 10px 15px;
    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;
    padding: 10px 15px;
    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;
  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 .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;
}

nav.indexpage-menu-container {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
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;
  min-width: 216px;
  min-height: 216px;
  width: 216px;
  height: 216px;
  padding: 0;
  border: #cfd8dc 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: 128px;
  height: 128px;
  stroke: none;
}
nav.indexpage-menu-container ul li a .indexpage-menu-item-icon svg.admin-managers-icon-svg {
  padding: 20px;
}
nav.indexpage-menu-container ul li a .indexpage-menu-item-icon svg#sysadmin-organization-icon-24x24 {
  padding: 28px;
}
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;
}

.landingpage-hero {
  background-color: #058aff;
  height: 550px;
  padding-top: 64px;
}
.landingpage-hero .header-container {
  display: flex;
  flex-flow: column;
  flex: 0 0 0;
  align-items: center;
  width: 100vw;
}
.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: 100vw;
}
.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;
}

.listview-container.frontpage {
  flex: 1 1 auto;
  border-radius: 8px 8px 0 0;
  max-width: 1280px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
}
.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: 100vw;
}
.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");
  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: 100vw;
  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: 100vw;
  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: 100vw;
}
.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: 100vw;
  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: 100vw;
}
.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: 100vw;
  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;
}

.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: 100vw;
}
.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: 100vw;
}
.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: 100vw;
  background-color: #058aff;
  justify-content: start;
  min-height: 256px;
  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;
}

.page-content {
  background-color: #058aff;
}

.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 {
  margin: 0 8px;
}
.landingpage-search .form-container .form-buttonset button.submit {
  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;
}
.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: #e1ebff;
  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: #006fd1;
}
.controlpanel-container.column .element-container button {
  color: #e1ebff;
  background-color: #058aff;
  font-weight: bold;
}
.controlpanel-container.column .element-container button:hover {
  background-color: #006fd1;
}

.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: #cfd8dc 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 .button-container button {
  color: #e1ebff;
  background-color: #058aff;
  font-weight: bold;
}
.listview-container .listview-record .button-container button:hover {
  background-color: #006fd1;
}
.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;
  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;


            }
          }
        }

      }
    }
  }
}
// */
button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  cursor: pointer;
  border: none;
  background-color: #cfd8dc;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
}
button:hover {
  background-color: #c0ccd1;
}

.css-table {
  display: table;
  border-spacing: 4px;
}
.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-tfoot {
  display: table-footer-group;
}
.css-table .css-tr {
  display: table-row;
}
.css-table .css-col {
  display: table-column;
}
.css-table .css-colgroup {
  display: table-column-group;
}
.css-table .css-th, .css-table .css-th, .css-table .css-td {
  display: table-cell;
  padding: 4px 8px;
  border-left: #dcdcdc solid 1px;
  border-bottom: #dcdcdc solid 1px;
  vertical-align: top;
}
.css-table .css-tr .css-tr .css-td, .css-table .css-tr .css-tr .css-th {
  border-left: none;
  border-right: #dcdcdc solid 1px;
}
.css-table .css-tr .css-tr:last-of-type .css-td {
  border-bottom: none;
}
.css-table .css-th {
  font-weight: bold;
  text-align: left;
}
.css-table .css-th.row-header {
  text-align: left;
}
.css-table .css-caption {
  display: table-caption;
}

.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: #058aff;
  border-radius: 16px;
  color: #ffffff;
  font-weight: bold;
  transition: all 0.2s ease;
}
.loginlink-container a.user-login:hover {
  background-color: #006fd1;
  color: #cfd8dc;
}
.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;
}