/*!
 * Chaziz Charla
 */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

.biscuit-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 16px;
}
.biscuit-icon.size-24 {
  width: 24px;
  height: 24px;
  background-size: 24px;
}
.biscuit-icon.size-32 {
  width: 32px;
  height: 32px;
  background-size: 32px;
}
.biscuit-icon.star-full {
  background-image: url("/assets/icons/star_full.svg");
}
.biscuit-icon.star-half {
  background-image: url("/assets/icons/star_half.svg");
}
.biscuit-icon.star-empty {
  background-image: url("/assets/icons/star_empty.svg");
}
.biscuit-icon.partner {
  background-image: url("/assets/icons/partner.svg");
}
.biscuit-icon.staff {
  background-image: url("/assets/icons/staff.svg");
}
.biscuit-icon.b-danger {
  background-image: url("/assets/icons/banner-danger.svg");
}
.biscuit-icon.b-primary, .biscuit-icon.b-dark {
  background-image: url("/assets/icons/banner-primary.svg");
}
.biscuit-icon.b-secondary {
  background-image: url("/assets/icons/banner-secondary.svg");
}
.biscuit-icon.b-success {
  background-image: url("/assets/icons/banner-success.svg");
}
.biscuit-icon.b-warning {
  background-image: url("/assets/icons/banner-warning.svg");
}
.biscuit-icon.search {
  background-image: url("/assets/icons/search-dark.svg");
}
.biscuit-icon.hamburger {
  background-image: url("/assets/icons/hamburger-dark.svg");
}
.biscuit-icon.caret-closed {
  background-image: url("/assets/icons/caret-closed-light.svg");
}
.biscuit-icon.caret-open {
  background-image: url("/assets/icons/caret-open-light.svg");
}
.biscuit-icon.caret-closed-header {
  background-image: url("/assets/icons/caret-closed-dark.svg");
}
.biscuit-icon.caret-open-header {
  background-image: url("/assets/icons/caret-open-dark.svg");
}
.biscuit-icon.mail {
  background-image: url("/assets/icons/mail.svg");
}
.biscuit-icon.placeholder {
  background-image: url("/assets/icons/placeholder.svg");
}

.page {
  padding-top: 10px;
  margin: auto;
}
.page .page-contents {
  margin: auto;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 300px) {
  .page .page-contents {
    max-width: 100%;
    min-width: 270px;
    padding: 0 1rem;
  }
}
@media (min-width: 500px) {
  .page .page-contents {
    max-width: 95%;
    min-width: 420px;
    padding: 0;
  }
}
@media (min-width: 950px) {
  .page .page-contents {
    max-width: 85%;
    min-width: 640px;
    padding: 0;
  }
}
@media (min-width: 1250px) {
  .page .page-contents {
    max-width: 84.5%;
    min-width: 1050px;
    padding: 0;
  }
}
@media (min-width: 1550px) {
  .page .page-contents {
    max-width: 1500px;
    min-width: 1100px;
    padding: 0;
  }
}

@media (min-width: 500px) {
  .grid {
    display: block;
  }
}
@media (min-width: 950px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    gap: 10px;
  }
}
@media (min-width: 1250px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    gap: 10px;
  }
}

.col-1 {
  grid-column-end: span 1;
}

.col-offset-1 {
  grid-column-start: 2;
}

.row-1 {
  grid-row-end: span 1;
}

.row-offset-1 {
  grid-row-start: 2;
}

.col-2 {
  grid-column-end: span 2;
}

.col-offset-2 {
  grid-column-start: 3;
}

.row-2 {
  grid-row-end: span 2;
}

.row-offset-2 {
  grid-row-start: 3;
}

.col-3 {
  grid-column-end: span 3;
}

.col-offset-3 {
  grid-column-start: 4;
}

.row-3 {
  grid-row-end: span 3;
}

.row-offset-3 {
  grid-row-start: 4;
}

.col-4 {
  grid-column-end: span 4;
}

.col-offset-4 {
  grid-column-start: 5;
}

.row-4 {
  grid-row-end: span 4;
}

.row-offset-4 {
  grid-row-start: 5;
}

.col-5 {
  grid-column-end: span 5;
}

.col-offset-5 {
  grid-column-start: 6;
}

.row-5 {
  grid-row-end: span 5;
}

.row-offset-5 {
  grid-row-start: 6;
}

.col-6 {
  grid-column-end: span 6;
}

.col-offset-6 {
  grid-column-start: 7;
}

.row-6 {
  grid-row-end: span 6;
}

.row-offset-6 {
  grid-row-start: 7;
}

.col-7 {
  grid-column-end: span 7;
}

.col-offset-7 {
  grid-column-start: 8;
}

.row-7 {
  grid-row-end: span 7;
}

.row-offset-7 {
  grid-row-start: 8;
}

.col-8 {
  grid-column-end: span 8;
}

.col-offset-8 {
  grid-column-start: 9;
}

.row-8 {
  grid-row-end: span 8;
}

.row-offset-8 {
  grid-row-start: 9;
}

.col-9 {
  grid-column-end: span 9;
}

.col-offset-9 {
  grid-column-start: 10;
}

.row-9 {
  grid-row-end: span 9;
}

.row-offset-9 {
  grid-row-start: 10;
}

.col-10 {
  grid-column-end: span 10;
}

.col-offset-10 {
  grid-column-start: 11;
}

.row-10 {
  grid-row-end: span 10;
}

.row-offset-10 {
  grid-row-start: 11;
}

.col-11 {
  grid-column-end: span 11;
}

.col-offset-11 {
  grid-column-start: 12;
}

.row-11 {
  grid-row-end: span 11;
}

.row-offset-11 {
  grid-row-start: 12;
}

.col-12 {
  grid-column-end: span 12;
}

.col-offset-12 {
  grid-column-start: 13;
}

.row-12 {
  grid-row-end: span 12;
}

.row-offset-12 {
  grid-row-start: 13;
}

@media (min-width: 300px) {
  .col-tiny-1 {
    grid-column-end: span 1;
  }
  .col-offset-tiny-1 {
    grid-column-start: 2;
  }
  .row-tiny-1 {
    grid-row-end: span 1;
  }
  .row-offset-tiny-1 {
    grid-row-start: 2;
  }
  .col-tiny-2 {
    grid-column-end: span 2;
  }
  .col-offset-tiny-2 {
    grid-column-start: 3;
  }
  .row-tiny-2 {
    grid-row-end: span 2;
  }
  .row-offset-tiny-2 {
    grid-row-start: 3;
  }
  .col-tiny-3 {
    grid-column-end: span 3;
  }
  .col-offset-tiny-3 {
    grid-column-start: 4;
  }
  .row-tiny-3 {
    grid-row-end: span 3;
  }
  .row-offset-tiny-3 {
    grid-row-start: 4;
  }
  .col-tiny-4 {
    grid-column-end: span 4;
  }
  .col-offset-tiny-4 {
    grid-column-start: 5;
  }
  .row-tiny-4 {
    grid-row-end: span 4;
  }
  .row-offset-tiny-4 {
    grid-row-start: 5;
  }
  .col-tiny-5 {
    grid-column-end: span 5;
  }
  .col-offset-tiny-5 {
    grid-column-start: 6;
  }
  .row-tiny-5 {
    grid-row-end: span 5;
  }
  .row-offset-tiny-5 {
    grid-row-start: 6;
  }
  .col-tiny-6 {
    grid-column-end: span 6;
  }
  .col-offset-tiny-6 {
    grid-column-start: 7;
  }
  .row-tiny-6 {
    grid-row-end: span 6;
  }
  .row-offset-tiny-6 {
    grid-row-start: 7;
  }
  .col-tiny-7 {
    grid-column-end: span 7;
  }
  .col-offset-tiny-7 {
    grid-column-start: 8;
  }
  .row-tiny-7 {
    grid-row-end: span 7;
  }
  .row-offset-tiny-7 {
    grid-row-start: 8;
  }
  .col-tiny-8 {
    grid-column-end: span 8;
  }
  .col-offset-tiny-8 {
    grid-column-start: 9;
  }
  .row-tiny-8 {
    grid-row-end: span 8;
  }
  .row-offset-tiny-8 {
    grid-row-start: 9;
  }
  .col-tiny-9 {
    grid-column-end: span 9;
  }
  .col-offset-tiny-9 {
    grid-column-start: 10;
  }
  .row-tiny-9 {
    grid-row-end: span 9;
  }
  .row-offset-tiny-9 {
    grid-row-start: 10;
  }
  .col-tiny-10 {
    grid-column-end: span 10;
  }
  .col-offset-tiny-10 {
    grid-column-start: 11;
  }
  .row-tiny-10 {
    grid-row-end: span 10;
  }
  .row-offset-tiny-10 {
    grid-row-start: 11;
  }
  .col-tiny-11 {
    grid-column-end: span 11;
  }
  .col-offset-tiny-11 {
    grid-column-start: 12;
  }
  .row-tiny-11 {
    grid-row-end: span 11;
  }
  .row-offset-tiny-11 {
    grid-row-start: 12;
  }
  .col-tiny-12 {
    grid-column-end: span 12;
  }
  .col-offset-tiny-12 {
    grid-column-start: 13;
  }
  .row-tiny-12 {
    grid-row-end: span 12;
  }
  .row-offset-tiny-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 500px) {
  .col-small-1 {
    grid-column-end: span 1;
  }
  .col-offset-small-1 {
    grid-column-start: 2;
  }
  .row-small-1 {
    grid-row-end: span 1;
  }
  .row-offset-small-1 {
    grid-row-start: 2;
  }
  .col-small-2 {
    grid-column-end: span 2;
  }
  .col-offset-small-2 {
    grid-column-start: 3;
  }
  .row-small-2 {
    grid-row-end: span 2;
  }
  .row-offset-small-2 {
    grid-row-start: 3;
  }
  .col-small-3 {
    grid-column-end: span 3;
  }
  .col-offset-small-3 {
    grid-column-start: 4;
  }
  .row-small-3 {
    grid-row-end: span 3;
  }
  .row-offset-small-3 {
    grid-row-start: 4;
  }
  .col-small-4 {
    grid-column-end: span 4;
  }
  .col-offset-small-4 {
    grid-column-start: 5;
  }
  .row-small-4 {
    grid-row-end: span 4;
  }
  .row-offset-small-4 {
    grid-row-start: 5;
  }
  .col-small-5 {
    grid-column-end: span 5;
  }
  .col-offset-small-5 {
    grid-column-start: 6;
  }
  .row-small-5 {
    grid-row-end: span 5;
  }
  .row-offset-small-5 {
    grid-row-start: 6;
  }
  .col-small-6 {
    grid-column-end: span 6;
  }
  .col-offset-small-6 {
    grid-column-start: 7;
  }
  .row-small-6 {
    grid-row-end: span 6;
  }
  .row-offset-small-6 {
    grid-row-start: 7;
  }
  .col-small-7 {
    grid-column-end: span 7;
  }
  .col-offset-small-7 {
    grid-column-start: 8;
  }
  .row-small-7 {
    grid-row-end: span 7;
  }
  .row-offset-small-7 {
    grid-row-start: 8;
  }
  .col-small-8 {
    grid-column-end: span 8;
  }
  .col-offset-small-8 {
    grid-column-start: 9;
  }
  .row-small-8 {
    grid-row-end: span 8;
  }
  .row-offset-small-8 {
    grid-row-start: 9;
  }
  .col-small-9 {
    grid-column-end: span 9;
  }
  .col-offset-small-9 {
    grid-column-start: 10;
  }
  .row-small-9 {
    grid-row-end: span 9;
  }
  .row-offset-small-9 {
    grid-row-start: 10;
  }
  .col-small-10 {
    grid-column-end: span 10;
  }
  .col-offset-small-10 {
    grid-column-start: 11;
  }
  .row-small-10 {
    grid-row-end: span 10;
  }
  .row-offset-small-10 {
    grid-row-start: 11;
  }
  .col-small-11 {
    grid-column-end: span 11;
  }
  .col-offset-small-11 {
    grid-column-start: 12;
  }
  .row-small-11 {
    grid-row-end: span 11;
  }
  .row-offset-small-11 {
    grid-row-start: 12;
  }
  .col-small-12 {
    grid-column-end: span 12;
  }
  .col-offset-small-12 {
    grid-column-start: 13;
  }
  .row-small-12 {
    grid-row-end: span 12;
  }
  .row-offset-small-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 950px) {
  .col-medium-1 {
    grid-column-end: span 1;
  }
  .col-offset-medium-1 {
    grid-column-start: 2;
  }
  .row-medium-1 {
    grid-row-end: span 1;
  }
  .row-offset-medium-1 {
    grid-row-start: 2;
  }
  .col-medium-2 {
    grid-column-end: span 2;
  }
  .col-offset-medium-2 {
    grid-column-start: 3;
  }
  .row-medium-2 {
    grid-row-end: span 2;
  }
  .row-offset-medium-2 {
    grid-row-start: 3;
  }
  .col-medium-3 {
    grid-column-end: span 3;
  }
  .col-offset-medium-3 {
    grid-column-start: 4;
  }
  .row-medium-3 {
    grid-row-end: span 3;
  }
  .row-offset-medium-3 {
    grid-row-start: 4;
  }
  .col-medium-4 {
    grid-column-end: span 4;
  }
  .col-offset-medium-4 {
    grid-column-start: 5;
  }
  .row-medium-4 {
    grid-row-end: span 4;
  }
  .row-offset-medium-4 {
    grid-row-start: 5;
  }
  .col-medium-5 {
    grid-column-end: span 5;
  }
  .col-offset-medium-5 {
    grid-column-start: 6;
  }
  .row-medium-5 {
    grid-row-end: span 5;
  }
  .row-offset-medium-5 {
    grid-row-start: 6;
  }
  .col-medium-6 {
    grid-column-end: span 6;
  }
  .col-offset-medium-6 {
    grid-column-start: 7;
  }
  .row-medium-6 {
    grid-row-end: span 6;
  }
  .row-offset-medium-6 {
    grid-row-start: 7;
  }
  .col-medium-7 {
    grid-column-end: span 7;
  }
  .col-offset-medium-7 {
    grid-column-start: 8;
  }
  .row-medium-7 {
    grid-row-end: span 7;
  }
  .row-offset-medium-7 {
    grid-row-start: 8;
  }
  .col-medium-8 {
    grid-column-end: span 8;
  }
  .col-offset-medium-8 {
    grid-column-start: 9;
  }
  .row-medium-8 {
    grid-row-end: span 8;
  }
  .row-offset-medium-8 {
    grid-row-start: 9;
  }
  .col-medium-9 {
    grid-column-end: span 9;
  }
  .col-offset-medium-9 {
    grid-column-start: 10;
  }
  .row-medium-9 {
    grid-row-end: span 9;
  }
  .row-offset-medium-9 {
    grid-row-start: 10;
  }
  .col-medium-10 {
    grid-column-end: span 10;
  }
  .col-offset-medium-10 {
    grid-column-start: 11;
  }
  .row-medium-10 {
    grid-row-end: span 10;
  }
  .row-offset-medium-10 {
    grid-row-start: 11;
  }
  .col-medium-11 {
    grid-column-end: span 11;
  }
  .col-offset-medium-11 {
    grid-column-start: 12;
  }
  .row-medium-11 {
    grid-row-end: span 11;
  }
  .row-offset-medium-11 {
    grid-row-start: 12;
  }
  .col-medium-12 {
    grid-column-end: span 12;
  }
  .col-offset-medium-12 {
    grid-column-start: 13;
  }
  .row-medium-12 {
    grid-row-end: span 12;
  }
  .row-offset-medium-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 1250px) {
  .col-large-1 {
    grid-column-end: span 1;
  }
  .col-offset-large-1 {
    grid-column-start: 2;
  }
  .row-large-1 {
    grid-row-end: span 1;
  }
  .row-offset-large-1 {
    grid-row-start: 2;
  }
  .col-large-2 {
    grid-column-end: span 2;
  }
  .col-offset-large-2 {
    grid-column-start: 3;
  }
  .row-large-2 {
    grid-row-end: span 2;
  }
  .row-offset-large-2 {
    grid-row-start: 3;
  }
  .col-large-3 {
    grid-column-end: span 3;
  }
  .col-offset-large-3 {
    grid-column-start: 4;
  }
  .row-large-3 {
    grid-row-end: span 3;
  }
  .row-offset-large-3 {
    grid-row-start: 4;
  }
  .col-large-4 {
    grid-column-end: span 4;
  }
  .col-offset-large-4 {
    grid-column-start: 5;
  }
  .row-large-4 {
    grid-row-end: span 4;
  }
  .row-offset-large-4 {
    grid-row-start: 5;
  }
  .col-large-5 {
    grid-column-end: span 5;
  }
  .col-offset-large-5 {
    grid-column-start: 6;
  }
  .row-large-5 {
    grid-row-end: span 5;
  }
  .row-offset-large-5 {
    grid-row-start: 6;
  }
  .col-large-6 {
    grid-column-end: span 6;
  }
  .col-offset-large-6 {
    grid-column-start: 7;
  }
  .row-large-6 {
    grid-row-end: span 6;
  }
  .row-offset-large-6 {
    grid-row-start: 7;
  }
  .col-large-7 {
    grid-column-end: span 7;
  }
  .col-offset-large-7 {
    grid-column-start: 8;
  }
  .row-large-7 {
    grid-row-end: span 7;
  }
  .row-offset-large-7 {
    grid-row-start: 8;
  }
  .col-large-8 {
    grid-column-end: span 8;
  }
  .col-offset-large-8 {
    grid-column-start: 9;
  }
  .row-large-8 {
    grid-row-end: span 8;
  }
  .row-offset-large-8 {
    grid-row-start: 9;
  }
  .col-large-9 {
    grid-column-end: span 9;
  }
  .col-offset-large-9 {
    grid-column-start: 10;
  }
  .row-large-9 {
    grid-row-end: span 9;
  }
  .row-offset-large-9 {
    grid-row-start: 10;
  }
  .col-large-10 {
    grid-column-end: span 10;
  }
  .col-offset-large-10 {
    grid-column-start: 11;
  }
  .row-large-10 {
    grid-row-end: span 10;
  }
  .row-offset-large-10 {
    grid-row-start: 11;
  }
  .col-large-11 {
    grid-column-end: span 11;
  }
  .col-offset-large-11 {
    grid-column-start: 12;
  }
  .row-large-11 {
    grid-row-end: span 11;
  }
  .row-offset-large-11 {
    grid-row-start: 12;
  }
  .col-large-12 {
    grid-column-end: span 12;
  }
  .col-offset-large-12 {
    grid-column-start: 13;
  }
  .row-large-12 {
    grid-row-end: span 12;
  }
  .row-offset-large-12 {
    grid-row-start: 13;
  }
}
@media (min-width: 1550px) {
  .col-huge-1 {
    grid-column-end: span 1;
  }
  .col-offset-huge-1 {
    grid-column-start: 2;
  }
  .row-huge-1 {
    grid-row-end: span 1;
  }
  .row-offset-huge-1 {
    grid-row-start: 2;
  }
  .col-huge-2 {
    grid-column-end: span 2;
  }
  .col-offset-huge-2 {
    grid-column-start: 3;
  }
  .row-huge-2 {
    grid-row-end: span 2;
  }
  .row-offset-huge-2 {
    grid-row-start: 3;
  }
  .col-huge-3 {
    grid-column-end: span 3;
  }
  .col-offset-huge-3 {
    grid-column-start: 4;
  }
  .row-huge-3 {
    grid-row-end: span 3;
  }
  .row-offset-huge-3 {
    grid-row-start: 4;
  }
  .col-huge-4 {
    grid-column-end: span 4;
  }
  .col-offset-huge-4 {
    grid-column-start: 5;
  }
  .row-huge-4 {
    grid-row-end: span 4;
  }
  .row-offset-huge-4 {
    grid-row-start: 5;
  }
  .col-huge-5 {
    grid-column-end: span 5;
  }
  .col-offset-huge-5 {
    grid-column-start: 6;
  }
  .row-huge-5 {
    grid-row-end: span 5;
  }
  .row-offset-huge-5 {
    grid-row-start: 6;
  }
  .col-huge-6 {
    grid-column-end: span 6;
  }
  .col-offset-huge-6 {
    grid-column-start: 7;
  }
  .row-huge-6 {
    grid-row-end: span 6;
  }
  .row-offset-huge-6 {
    grid-row-start: 7;
  }
  .col-huge-7 {
    grid-column-end: span 7;
  }
  .col-offset-huge-7 {
    grid-column-start: 8;
  }
  .row-huge-7 {
    grid-row-end: span 7;
  }
  .row-offset-huge-7 {
    grid-row-start: 8;
  }
  .col-huge-8 {
    grid-column-end: span 8;
  }
  .col-offset-huge-8 {
    grid-column-start: 9;
  }
  .row-huge-8 {
    grid-row-end: span 8;
  }
  .row-offset-huge-8 {
    grid-row-start: 9;
  }
  .col-huge-9 {
    grid-column-end: span 9;
  }
  .col-offset-huge-9 {
    grid-column-start: 10;
  }
  .row-huge-9 {
    grid-row-end: span 9;
  }
  .row-offset-huge-9 {
    grid-row-start: 10;
  }
  .col-huge-10 {
    grid-column-end: span 10;
  }
  .col-offset-huge-10 {
    grid-column-start: 11;
  }
  .row-huge-10 {
    grid-row-end: span 10;
  }
  .row-offset-huge-10 {
    grid-row-start: 11;
  }
  .col-huge-11 {
    grid-column-end: span 11;
  }
  .col-offset-huge-11 {
    grid-column-start: 12;
  }
  .row-huge-11 {
    grid-row-end: span 11;
  }
  .row-offset-huge-11 {
    grid-row-start: 12;
  }
  .col-huge-12 {
    grid-column-end: span 12;
  }
  .col-offset-huge-12 {
    grid-column-start: 13;
  }
  .row-huge-12 {
    grid-row-end: span 12;
  }
  .row-offset-huge-12 {
    grid-row-start: 13;
  }
}
:root {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --link-color: #0066CC;
  --link-color-hover: #39f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: url("/img/background.jpg") no-repeat fixed center;
  background-size: cover;
  color: #222222;
  font-size: 12px;
  padding: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: var(--link-color);
}
a:hover {
  text-decoration: underline;
  color: var(--link-color-hover);
}

img {
  border: 0;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: normal;
}

h2 {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
}

h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

h4 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
}

h5 {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
}

h6 {
  margin: 0;
  font-size: 10px;
  font-weight: normal;
}

img.img-responsive {
  width: 100%;
}

.clear {
  clear: both;
}

.bold {
  font-weight: 500;
}

textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
  border: 1px solid rgb(218.45, 218.45, 218.45);
  background-color: 1px solid rgb(252.45, 252.45, 252.45);
  color: #000;
  transition: border linear 0.3s;
  border-radius: 3px;
  padding: 6px;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
  border-color: var(--link-color);
  outline: none;
}

code {
  color: #e83e3e;
}

pre {
  background-color: #ffe8e8;
  border: 1px solid #eed1d1;
  border-radius: 5px;
  padding: 10px;
  margin: 0;
  overflow-x: auto;
  line-height: 1.5;
  white-space: pre-wrap;
}

blockquote {
  margin: 0 0 0.5em 0;
  padding-left: 0.8em;
  border-left: 4px solid #DDDDDD;
}

.profile-picture {
  border: 1px solid #888;
  display: block;
  border-radius: 4px;
  position: relative;
}
.profile-picture::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("/assets/charla_pfp_gloss.svg");
  background-size: cover;
  position: absolute;
  border-radius: 3px;
}
.profile-picture .pfp {
  width: auto;
  height: 100%;
  border-radius: 3px;
  aspect-ratio: 1/1;
}

hr {
  border: 0;
  border-bottom: 1px solid #DDDDDD;
  height: 0;
  margin: 10px 0;
}
hr.taller {
  margin: 25px 0;
}

.userlink-handle {
  color: #aaa;
  text-decoration: none;
}

.fade {
  color: #888;
}

.flex {
  display: flex;
}

.emoji {
  display: inline;
  width: 24px;
  vertical-align: middle;
}

.watermark {
  position: absolute;
  bottom: 40px;
  right: 5px;
  color: white;
  text-align: right;
}

.headers {
  position: fixed;
  bottom: 0;
  z-index: 2000;
  width: 100%;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-grow: 1;
}

.header-tray {
  min-width: 160px;
  height: 38px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25) 50%);
  display: flex;
  flex-direction: row-reverse;
}
.header-tray .header-clock {
  width: 69px;
  height: inherit;
  margin-right: 10px;
  color: white;
  text-align: center;
  line-height: 17px;
}
.header-tray .header-clock #header-color-time {
  margin-right: 1px;
}

.header-logo {
  display: block;
  width: 54px;
  height: 38px;
  background-image: url("/img/start.svg");
}

.menulink {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: white;
  height: 39px;
  padding: 0 0.5em;
  width: 60px;
}
.menulink img {
  width: 32px;
  height: 32px;
  margin: auto;
}
.menulink span {
  margin: auto;
}
.menulink:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
}
.menulink .biscuit-icon {
  width: 32px;
  height: 32px;
  background-size: 32px;
}
@media (min-width: 300px) {
  .menulink.hide-small {
    display: none;
  }
}
@media (min-width: 500px) {
  .menulink.hide-small {
    display: none;
  }
}
@media (min-width: 950px) {
  .menulink.hide-small {
    display: block;
  }
}
.menulink.username {
  display: none;
}
@media (min-width: 950px) {
  .menulink.username {
    display: inline;
  }
}

.header {
  width: 100%;
  padding-top: 2px;
  background: rgba(31, 156, 232, 0.75);
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.66), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(8px);
  height: 40px;
  display: flex;
}
.header .header-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.menu#start-menu {
  border-left: none;
  width: 250px;
  bottom: 40px;
  padding: 0;
}
.menu#start-menu hr {
  border-color: #D6E5F5;
  margin: 2px;
}
.menu#start-menu .menu-start-list {
  flex-grow: 1;
}
.menu#start-menu .menu-start-banner {
  background: black url("/img/start_banner.svg") no-repeat bottom;
  width: 21px;
}

.footer {
  margin-top: 1rem;
  line-height: 1.35rem;
}
.footer .footer-container {
  color: rgba(255, 255, 255, 0.6667);
  padding: 1.25em 0;
  margin: auto;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.footer .footer-container .footer-copyright {
  font-size: 0.75rem;
}
.footer .footer-container span {
  margin: 0 0.25em;
}
@media (min-width: 300px) {
  .footer .footer-container {
    max-width: 100%;
    min-width: 270px;
    padding: 0 1rem;
  }
}
@media (min-width: 500px) {
  .footer .footer-container {
    max-width: 95%;
    min-width: 420px;
    padding: 0;
  }
}
@media (min-width: 950px) {
  .footer .footer-container {
    max-width: 85%;
    min-width: 640px;
    padding: 0;
  }
}
@media (min-width: 1250px) {
  .footer .footer-container {
    max-width: 84.5%;
    min-width: 1050px;
    padding: 0;
  }
}
@media (min-width: 1550px) {
  .footer .footer-container {
    max-width: 1500px;
    min-width: 1100px;
    padding: 0;
  }
}

textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
  border: 1px solid #DDDDDD;
  background-color: #FFF;
  color: #222222;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color linear 0.3s, box-shadow linear 0.3s;
  border-radius: 3px;
  padding: 6px;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
  border-color: var(--link-color);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px var(--link-color);
}

.form-input {
  margin-bottom: 8px;
}

.form-submit {
  width: 100%;
}

.form-button-container {
  text-align: right;
}

.form-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.form-image.edit-page {
  width: 300px;
}

.form-flex {
  display: flex;
  gap: 5px;
}

.thumbnail {
  border-radius: 2px;
  border: 1px solid #DDDDDD;
}

.content-grid {
  display: grid;
  gap: 5px;
  grid-auto-rows: minmax(135px, auto);
}
@media (min-width: 300px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 500px) {
  .content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 950px) {
  .content-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1250px) {
  .content-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.content-grid.content-grid-users {
  grid-auto-rows: minmax(auto, auto);
}
@media (min-width: 1250px) {
  .content-grid.content-grid-users {
    grid-template-columns: repeat(4, 1fr);
  }
}
.content-grid.content-grid-users .content-entry, .content-grid.content-grid-users .content-entry:first-child {
  border: none;
  padding: 0.5rem 0;
}

.content-header {
  background: #DDDDDD;
  padding: 0.3em 0.5em;
  color: #222222;
  font-weight: bold;
}

.content-box {
  border: 1px solid #DDDDDD;
  background: #FFF;
  padding: 1rem;
  overflow: hidden;
  word-break: break-word;
}
.content-box.no-side-padding {
  padding: 1rem 0;
}
.content-box.no-border-top {
  border-top: none;
}
.content-box.rounded {
  border-radius: 5px;
}
.content-box.login {
  padding: 15px;
}
.content-box.related-uploads {
  max-height: 500px;
  overflow-y: scroll;
}
.content-box.content-note {
  background: #FDFDCB;
  background: linear-gradient(180deg, rgb(253, 253, 203) 0%, rgb(252, 249, 161) 100%);
  border-color: #DDDB9A;
  color: #4A1D0C;
  font-family: Georgia, "Times New Roman", serif;
  border-radius: 3px;
}
.content-box.content-note p {
  margin: 0.5em 0;
}
.content-box .content-file {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  gap: 6px;
}
.content-box .content-entry {
  display: flex;
  padding: 0.8rem 0;
  border-bottom: 1px solid #DDDDDD;
}
.content-box .content-entry:first-child {
  padding-top: 0;
}
.content-box .content-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.content-box .content-entry.centered {
  align-items: center;
}
.content-box .content-entry .content-info {
  flex-grow: 1;
}
.content-box .content-entry .content-info .content-title {
  font-size: 1em;
}
.content-box .content-entry .content-info .content-title-upload {
  display: flex;
}
.content-box .content-entry .content-info .content-title-upload .content-title-link {
  flex-grow: 1;
  font-size: 1em;
}
.content-box .content-entry .content-info .content-title-upload .content-rating {
  min-width: 80px;
}
.content-box .content-entry .content-info .content-title-upload .content-upload-edit-button {
  direction: rtl;
  min-width: 40px;
}
.content-box .content-entry .content-info .content-description {
  font-size: 0.8em;
}
.content-box .content-entry .content-image {
  margin-right: 8px;
  min-width: 50px;
  min-height: 50px;
  display: block;
}
@media (min-width: 300px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry .content-image {
    width: 140px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry .content-image {
    width: 160px;
  }
}
@media (min-width: 1550px) {
  .content-box .content-entry .content-image {
    width: 175px;
  }
}
.content-box .content-entry .content-image.small {
  width: 100px;
}
.content-box .content-entry .content-image.profile-picture {
  width: 60px;
  height: 60px;
}
.content-box .content-entry .content-image:hover {
  border-color: var(--link-color);
}
.content-box .content-entry-small {
  max-height: 190px;
  text-align: center;
}
.content-box .content-entry-small .content-title {
  font-size: 12px;
  margin: auto;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-title {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-title {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-title {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-title {
    max-width: 150px;
  }
}
@media (min-width: 1550px) {
  .content-box .content-entry-small .content-title {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-author {
  font-size: 10px;
  margin: auto;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-author {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-author {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-author {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-author {
    max-width: 150px;
  }
}
@media (min-width: 1550px) {
  .content-box .content-entry-small .content-author {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-rating .biscuit-icon {
  width: 12px;
  height: 12px;
  background-size: 12px;
}
.content-box .content-entry-small .content-image-container {
  display: table;
  text-align: center;
  margin: auto;
  height: 135px;
}
.content-box .content-entry-small .content-image-container .content-image-link {
  display: table-cell;
  vertical-align: middle;
}
.content-box .content-entry-small .content-image-container .content-image-link .content-image {
  max-height: 135px;
  margin: 2px auto;
}
@media (min-width: 300px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 140px;
  }
}
@media (min-width: 500px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 120px;
  }
}
@media (min-width: 950px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 135px;
  }
}
@media (min-width: 1250px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 150px;
  }
}
@media (min-width: 1550px) {
  .content-box .content-entry-small .content-image-container .content-image-link .content-image {
    max-width: 160px;
  }
}
.content-box .content-entry-small .content-image-container .content-image-link .content-image:hover {
  border-color: var(--link-color);
}

.banner {
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 0.5em;
  background-repeat: repeat-x;
}
.banner .notification-icon {
  margin-right: 0.66em;
  min-width: 20px;
  min-height: 20px;
  background-size: 20px;
}
.banner.full-screen {
  margin: 0;
  border-radius: 0;
}
.banner.full-screen .notification-text {
  margin: auto;
}

.banner-primary {
  background-color: rgb(76.6338582677, 170.2559055118, 228.3661417323);
  background-image: linear-gradient(to bottom, rgb(58.8842519685, 159.0423097113, 225.7157480315), #2195dd);
  border: 1px solid rgb(28.030511811, 126.562007874, 187.719488189);
  color: #fff;
}
.banner-primary a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-secondary {
  background-color: hsl(0, 0%, 103.3333333333%);
  background-image: linear-gradient(to bottom, rgb(253.3, 253.3, 253.3), #eee);
  border: 1px solid rgb(218.875, 218.875, 218.875);
  color: #000;
}
.banner-secondary a {
  text-decoration: underline;
  color: #000;
}

.banner-success {
  background-color: rgb(68.4615384615, 216.5384615385, 68.4615384615);
  background-image: linear-gradient(to bottom, rgb(51.5487179487, 213.0512820513, 54.2404273504), #28c228);
  border: 1px solid rgb(33.4615384615, 162.2884615385, 33.4615384615);
  color: #fff;
}
.banner-success a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-danger {
  background-color: rgb(240, 33.75, 15);
  background-image: linear-gradient(to bottom, rgb(220.8, 34.5, 13.8), #c01b0c);
  border: 1px solid rgb(156, 21.9375, 9.75);
  color: #fff;
}
.banner-danger a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.banner-warning {
  background-color: rgb(255, 193.2367346939, 61);
  background-image: linear-gradient(to bottom, rgb(255, 190.3153741497, 40.6), #ffb10a);
  border: 1px solid rgb(226.75, 154.5602040816, 0);
  color: #000;
}
.banner-warning a {
  text-decoration: underline;
  color: #000;
}

.banner-dark {
  background-color: rgb(76.5, 76.5, 76.5);
  background-image: linear-gradient(to bottom, rgb(66.3, 66.3, 66.3), #333);
  border: 1px solid rgb(31.875, 31.875, 31.875);
  color: #fff;
}
.banner-dark a {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}

.page-login .banner {
  padding: 0.5rem 0.7rem;
}

.comment {
  margin: 0.33em 0;
  padding: 0.33em 0;
  display: flex;
  border-bottom: 1px solid #DDDDDD;
}
.comment:last-child {
  border-bottom: none;
}
.comment .profile-picture {
  width: 50px;
  height: 50px;
  margin-right: 0.75em;
}
.comment .comment-body {
  width: 100%;
}
.comment .comment-body .comment-contents {
  margin-top: 0.25em;
}
.comment .comment-body .comment-contents .reply-button {
  font-size: 0.75em;
}
.comment .comment-body .comment-contents p {
  margin: 0.5em 0;
}
.comment .comment-body .comment-contents p:first-child {
  margin-top: 0;
}
.comment .comment-body .comment-contents p:last-child {
  margin-bottom: 0;
}

.replies {
  border-left: 1px solid #DDDDDD;
  padding-left: 1em;
  margin-top: 0.5em;
}
.replies .comment {
  border: none;
}
.replies .comment .profile-picture {
  width: 35px;
  height: 35px;
}

.new-comment, .reply-form {
  margin-bottom: 5px;
}
.new-comment #comment_button, .new-comment .submit-reply-button, .reply-form #comment_button, .reply-form .submit-reply-button {
  margin-left: auto;
  display: block;
}

.new-comment-logged-out {
  background: #FFF;
  color: #222222;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  padding: 6px;
}

.section {
  margin-bottom: 1em;
}
.section .section-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5em;
}
.section .section-header .section-header-left {
  flex-grow: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.section .section-header .section-header-left .section-title {
  font-size: 1.33em;
}
.section .section-header .section-header-left .section-desc {
  color: rgba(0, 0, 0, 0.5019607843);
}
.section .section-header a {
  font-size: 14px;
  margin-left: 4px;
}
.section .section-header a.userlink {
  margin-left: 0;
}

.button {
  padding: 7px 11px;
  text-align: center;
  border-radius: 4px;
  color: white;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
  background-repeat: repeat-x;
  line-height: 1em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.button:hover {
  text-decoration: none;
}
.button.button-hamburger {
  padding: 0;
}
.button.button-caret {
  padding: 3px 4px;
}
.button.button-small {
  padding: 5px 10px;
}
.button.button-big {
  font-size: 15px;
  padding: 7px 15px;
  border-radius: 5px;
}
.button.button-huge {
  font-size: 24px;
  padding: 0.5em 0.8em;
  border-radius: 7px;
}

.button-primary {
  border: 1px solid rgb(28.030511811, 121.2390419948, 187.719488189);
  background-color: #2195dd;
  background-image: linear-gradient(rgb(54.4468503937, 159.7145669291, 225.0531496063), rgb(31.6748031496, 140.0090288714, 212.1251968504));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-primary.button-transparent {
  border-color: rgba(28.030511811, 121.2390419948, 187.719488189, 0.66);
  background: none;
}
.button-primary:hover {
  background-color: rgb(76.6338582677, 170.2559055118, 228.3661417323);
  background-image: linear-gradient(rgb(76.6338582677, 167.7270341207, 228.3661417323), rgb(41.1346456693, 153.3897637795, 223.0653543307));
  border-color: rgb(38.9159448819, 152.3356299213, 222.7340551181);
}
.button-primary:active {
  background-color: rgb(29.687007874, 134.0413385827, 198.812992126);
  background-image: linear-gradient(#2195dd, rgb(28.3618110236, 124.0184645669, 189.9381889764));
  border-color: rgb(31.343503937, 141.5206692913, 209.906496063);
}

.button-secondary {
  border: 1px solid rgb(218.875, 218.875, 218.875);
  background-color: #eee;
  background-image: linear-gradient(rgb(250.75, 250.75, 250.75), rgb(232.9, 232.9, 232.9));
  color: black;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.button-secondary.button-transparent {
  border-color: rgba(218.875, 218.875, 218.875, 0.66);
  background: none;
}
.button-secondary:hover {
  background-color: hsl(0, 0%, 103.3333333333%);
  background-image: linear-gradient(hsl(0, 0%, 103.3333333333%), rgb(243.1, 243.1, 243.1));
  border-color: rgb(241.825, 241.825, 241.825);
}
.button-secondary:active {
  background-color: rgb(225.25, 225.25, 225.25);
  background-image: linear-gradient(#eee, rgb(220.15, 220.15, 220.15));
  border-color: rgb(231.625, 231.625, 231.625);
}

.button-success {
  border: 1px solid rgb(33.4615384615, 162.2884615385, 37.7557692308);
  background-color: #28c228;
  background-image: linear-gradient(rgb(47.3205128205, 212.1794871795, 47.3205128205), rgb(38.2564102564, 185.5435897436, 40.7111965812));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-success.button-transparent {
  border-color: rgba(33.4615384615, 162.2884615385, 37.7557692308, 0.66);
  background: none;
}
.button-success:hover {
  background-color: rgb(68.4615384615, 216.5384615385, 68.4615384615);
  background-image: linear-gradient(rgb(68.4615384615, 216.5384615385, 70.9294871795), rgb(41.7435897436, 202.4564102564, 41.7435897436));
  border-color: rgb(41.3076923077, 200.3423076923, 41.3076923077);
}
.button-success:active {
  background-color: rgb(35.641025641, 172.858974359, 35.641025641);
  background-image: linear-gradient(#28c228, rgb(33.8974358974, 164.4025641026, 37.1600641026));
  border-color: rgb(37.8205128205, 183.4294871795, 37.8205128205);
}

.button-danger {
  border: 1px solid rgb(156, 26.8125, 9.75);
  background-color: #c01b0c;
  background-image: linear-gradient(rgb(216, 30.375, 13.5), rgb(182.4, 28.5, 11.4));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-danger.button-transparent {
  border-color: rgba(156, 26.8125, 9.75, 0.66);
  background: none;
}
.button-danger:hover {
  background-color: rgb(240, 33.75, 15);
  background-image: linear-gradient(rgb(240, 37.5, 15), rgb(201.6, 28.35, 12.6));
  border-color: rgb(199.2, 28.0125, 12.45);
}
.button-danger:active {
  background-color: rgb(168, 23.625, 10.5);
  background-image: linear-gradient(#c01b0c, rgb(158.4, 25.9875, 9.9));
  border-color: rgb(180, 25.3125, 11.25);
}

.button-warning {
  border: 1px solid rgb(226.75, 162.118537415, 0);
  background-color: #ffb10a;
  background-image: linear-gradient(rgb(255, 185.1183673469, 35.5), rgb(254.8, 177.9266666667, 0));
  color: black;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
}
.button-warning.button-transparent {
  border-color: rgba(226.75, 162.118537415, 0, 0.66);
  background: none;
}
.button-warning:hover {
  background-color: rgb(255, 193.2367346939, 61);
  background-image: linear-gradient(rgb(255, 196.4700680272, 61), rgb(255, 180.2473469388, 20.2));
  border-color: rgb(255, 179.4355102041, 17.65);
}
.button-warning:active {
  background-color: rgb(239.5, 163.2510204082, 0);
  background-image: linear-gradient(#ffb10a, rgb(229.3, 162.0308673469, 0));
  border-color: rgb(252.25, 171.9418367347, 0);
}

.button-dark {
  border: 1px solid rgb(76.5, 76.5, 76.5);
  background-color: #333;
  background-image: linear-gradient(rgb(63.75, 63.75, 63.75), rgb(45.9, 45.9, 45.9));
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.button-dark.button-transparent {
  border-color: rgba(76.5, 76.5, 76.5, 0.66);
  background: none;
}
.button-dark:hover {
  background-color: rgb(76.5, 76.5, 76.5);
  background-image: linear-gradient(rgb(76.5, 76.5, 76.5), rgb(56.1, 56.1, 56.1));
  border-color: rgb(54.825, 54.825, 54.825);
}
.button-dark:active {
  background-color: rgb(38.25, 38.25, 38.25);
  background-image: linear-gradient(#333, rgb(33.15, 33.15, 33.15));
  border-color: rgb(44.625, 44.625, 44.625);
}

/* Style for the menu */
.menu {
  display: none;
  position: absolute;
  background-color: #FFF;
  border: 1px solid #DDDDDD;
  padding: 3px 0;
  min-width: 100px;
  z-index: 1999;
  width: 12rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.menu hr {
  border-color: #DDDDDD;
  margin: 0;
}
.menu .menu-item-button {
  border: 1px solid transparent;
  border-radius: 3px;
  direction: ltr;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 1px;
  color: black;
  gap: 6px;
  margin: 0 2px;
}
.menu .menu-item-button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu .menu-item-button.small {
  font-size: 12px;
}
.menu .menu-item-button:hover {
  border-color: #7DA2CE;
  background: linear-gradient(#DDECFD, #C2DCFD);
  box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.333), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.333);
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.menu .menu-item-button .menu-item-icon {
  width: 32px;
  height: 32px;
}

.menu-button .menu-caret-container {
  display: inline;
}

.menu-upload-edit {
  direction: rtl;
  width: 150px;
}

.tabcontent {
  display: none;
}

.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: flex;
}
.tabs.homepage {
  justify-content: flex-end;
  border-bottom: none;
}
.tabs.homepage .tablink {
  color: white;
  padding: 2px 14px;
}
.tabs.homepage .tablink:hover {
  color: #222222;
}
.tabs.homepage .tablink.active {
  color: #222222;
  background-color: #F4F4F4;
}

.tablink {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 7px 14px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  color: var(--link-color);
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0);
}
.tablink:hover {
  background-color: rgb(235.075, 235.075, 235.075);
  text-decoration: none;
}
.tablink.active {
  background-color: #FFF;
  border: 1px solid #DDDDDD;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  color: black;
  font-weight: bold;
}
.tablink:focus {
  outline: none;
}

table.c1 {
  width: 100%;
  border: 1px solid #DDDDDD;
  border-spacing: 0;
  border-collapse: collapse;
}
table.c1 tbody {
  margin: 0;
}
table.c1 tr {
  border: 1px solid #DDDDDD;
  background: #FFF;
}
table.c1 tr.h {
  background-color: rgb(227.375, 227.375, 227.375);
  background-image: linear-gradient(rgb(246.5, 246.5, 246.5), rgb(227.375, 227.375, 227.375));
}
table.c1 tr.h th {
  padding: 1px 4px;
  text-align: left;
  border: 1px solid #DDDDDD;
  font-weight: 500;
}
table.c1 td {
  border: 1px solid #DDDDDD;
  padding: 4px;
}
table.c1 td.fade-into-bg {
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5));
}

.pagination {
  margin: 1em auto auto;
  display: flex;
  justify-content: center;
}
.pagination .pagination-ellipsis {
  color: #999;
  padding: 0 4px;
}
.pagination .pagination-item {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #DDDDDD;
  border-right: none;
  background: #FFF;
}
.pagination .pagination-item:first-child {
  border-radius: 5px 0 0 5px;
}
.pagination .pagination-item:last-child {
  border-right: 1px solid #DDDDDD;
  border-radius: 0 5px 5px 0;
}
.pagination .pagination-item a {
  color: #222222;
}
.pagination .pagination-item.current {
  background: #2195dd;
  border: 1px solid rgb(30.3496062992, 131.2697112861, 203.2503937008);
  border-right: none;
  color: white;
}
.pagination .pagination-item.current:last-child {
  border-right: 1px solid rgb(30.3496062992, 131.2697112861, 203.2503937008);
}

#hamburger {
  top: 40px;
  left: 0;
  position: fixed;
  z-index: 2000;
  width: 200px;
  padding: 1rem 0;
  height: calc(100vh - 40px);
  background: #222;
  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.2);
  display: none;
  overflow-y: scroll;
}
#hamburger .hamburger-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#hamburger .hamburger-list .hamburger-header {
  margin-top: 0.8rem;
  display: block;
  padding: 5px 0.9rem;
  color: rgba(255, 255, 255, 0.66);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7rem;
}
#hamburger .hamburger-list .hamburger-link .hamburger-link-profile-picture {
  display: inline-block;
  width: 24px;
  height: 24px;
}
#hamburger .hamburger-list .hamburger-link a {
  display: flex;
  padding: 5px 1rem;
  color: rgba(255, 255, 255, 0.66);
  align-items: center;
  gap: 0.4rem;
}
#hamburger .hamburger-list .hamburger-link a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
}

body.login {
  background: #333 url("/assets/biscuit_login_background.jpg");
  background-size: cover;
  background-position: center;
}
body.login .page {
  display: flex;
  align-items: center;
  height: calc(100vh - 40px);
  justify-content: center;
}
body.login .page-login {
  margin: 0;
  padding: 0;
}
body.login .page-login .register, body.login .page-login .login {
  width: 350px;
}
body.login .section-header {
  text-shadow: #000 0 1px 2px;
  color: white;
}
body.login .login-text {
  margin: 1em 0;
}