/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* 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 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-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.
 */

[type="search"]::-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 Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*csslint important:false*/

/* ==========================================================================
   Pure Base Extras
   ========================================================================== */

/**
 * Extra rules that Pure adds on top of Normalize.css
 */

html {
    font-family: sans-serif;
}

/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */

.hidden,
[hidden] {
    display: none !important;
}

/**
 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
 * aspect ratio.
 */
.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/

.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 3px #ddd;
            box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 3px #ddd;
            box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.pure-form input[type="color"] {
    padding: 0.2em 0.5em;
}


.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus,
.pure-form input[type="month"]:focus,
.pure-form input[type="time"]:focus,
.pure-form input[type="datetime"]:focus,
.pure-form input[type="datetime-local"]:focus,
.pure-form input[type="week"]:focus,
.pure-form input[type="number"]:focus,
.pure-form input[type="search"]:focus,
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
    outline: 0;
    border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}

.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
    margin: 0.5em 0;
    display: block;
}

.pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
.pure-form input[type="url"][disabled],
.pure-form input[type="date"][disabled],
.pure-form input[type="month"][disabled],
.pure-form input[type="time"][disabled],
.pure-form input[type="datetime"][disabled],
.pure-form input[type="datetime-local"][disabled],
.pure-form input[type="week"][disabled],
.pure-form input[type="number"][disabled],
.pure-form input[type="search"][disabled],
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
    background-color: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
    color: #b94a48;
    border-color: #e9322d;
}
.pure-form input[type="file"]:focus:invalid:focus,
.pure-form input[type="radio"]:focus:invalid:focus,
.pure-form input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
.pure-form select {
    /* Normalizes the height; padding is not sufficient. */
    height: 2.25em;
    border: 1px solid #ccc;
    background-color: white;
}
.pure-form select[multiple] {
    height: auto;
}
.pure-form label {
    margin: 0.5em 0 0.2em;
}
.pure-form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.pure-form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
.pure-form-stacked input[type="url"],
.pure-form-stacked input[type="date"],
.pure-form-stacked input[type="month"],
.pure-form-stacked input[type="time"],
.pure-form-stacked input[type="datetime"],
.pure-form-stacked input[type="datetime-local"],
.pure-form-stacked input[type="week"],
.pure-form-stacked input[type="number"],
.pure-form-stacked input[type="search"],
.pure-form-stacked input[type="tel"],
.pure-form-stacked input[type="color"],
.pure-form-stacked input[type="file"],
.pure-form-stacked select,
.pure-form-stacked label,
.pure-form-stacked textarea {
    display: block;
    margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form-stacked input:not([type]) {
    display: block;
    margin: 0.25em 0;
}
.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
.pure-form-message-inline {
    display: inline-block;
    vertical-align: middle;
}
.pure-form-aligned textarea {
    vertical-align: top;
}

/* Aligned Forms */
.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}
.pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 11em;
}

/* Rounded Inputs */
.pure-form input.pure-input-rounded,
.pure-form .pure-input-rounded {
    border-radius: 2em;
    padding: 0.5em 1em;
}

/* Grouped Inputs */
.pure-form .pure-group fieldset {
    margin-bottom: 10px;
}
.pure-form .pure-group input,
.pure-form .pure-group textarea {
    display: block;
    padding: 10px;
    margin: 0 0 -1px;
    border-radius: 0;
    position: relative;
    top: -1px;
}
.pure-form .pure-group input:focus,
.pure-form .pure-group textarea:focus {
    z-index: 3;
}
.pure-form .pure-group input:first-child,
.pure-form .pure-group textarea:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
    margin: 0;
}
.pure-form .pure-group input:first-child:last-child,
.pure-form .pure-group textarea:first-child:last-child {
    top: 1px;
    border-radius: 4px;
    margin: 0;
}
.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
    margin: 0;
}
.pure-form .pure-group button {
    margin: 0.35em 0;
}

.pure-form .pure-input-1 {
    width: 100%;
}
.pure-form .pure-input-3-4 {
    width: 75%;
}
.pure-form .pure-input-2-3 {
    width: 66%;
}
.pure-form .pure-input-1-2 {
    width: 50%;
}
.pure-form .pure-input-1-3 {
    width: 33%;
}
.pure-form .pure-input-1-4 {
    width: 25%;
}

/* Inline help for forms */
.pure-form-message-inline {
    display: inline-block;
    padding-left: 0.3em;
    color: #666;
    vertical-align: middle;
    font-size: 0.875em;
}

/* Block help for forms */
.pure-form-message {
    display: block;
    color: #666;
    font-size: 0.875em;
}

@media only screen and (max-width : 480px) {
    .pure-form button[type="submit"] {
        margin: 0.7em 0 0;
    }

    .pure-form input:not([type]),
    .pure-form input[type="text"],
    .pure-form input[type="password"],
    .pure-form input[type="email"],
    .pure-form input[type="url"],
    .pure-form input[type="date"],
    .pure-form input[type="month"],
    .pure-form input[type="time"],
    .pure-form input[type="datetime"],
    .pure-form input[type="datetime-local"],
    .pure-form input[type="week"],
    .pure-form input[type="number"],
    .pure-form input[type="search"],
    .pure-form input[type="tel"],
    .pure-form input[type="color"],
    .pure-form label {
        margin-bottom: 0.3em;
        display: block;
    }

    .pure-group input:not([type]),
    .pure-group input[type="text"],
    .pure-group input[type="password"],
    .pure-group input[type="email"],
    .pure-group input[type="url"],
    .pure-group input[type="date"],
    .pure-group input[type="month"],
    .pure-group input[type="time"],
    .pure-group input[type="datetime"],
    .pure-group input[type="datetime-local"],
    .pure-group input[type="week"],
    .pure-group input[type="number"],
    .pure-group input[type="search"],
    .pure-group input[type="tel"],
    .pure-group input[type="color"] {
        margin-bottom: 0;
    }

    .pure-form-aligned .pure-control-group label {
        margin-bottom: 0.3em;
        text-align: left;
        display: block;
        width: 100%;
    }

    .pure-form-aligned .pure-controls {
        margin: 1.5em 0 0 0;
    }

    .pure-form-message-inline,
    .pure-form-message {
        display: block;
        font-size: 0.75em;
        /* Increased bottom padding to make it group with its related input element. */
        padding: 0.2em 0 0.8em;
    }
}

/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
.pure-button {
    /* Structure */
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* Inherit .pure-g styles */
.pure-button-group {
    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}

.opera-only :-o-prefocus,
.pure-button-group {
    word-spacing: -0.43em;
}

.pure-button-group .pure-button {
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*csslint outline-none:false*/

.pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: rgba(0, 0, 0, 0.80);
    border: none rgba(0, 0, 0, 0);
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
    outline: 0;
}
.pure-button-active,
.pure-button:active {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
            box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    opacity: 0.40;
    cursor: not-allowed;
    -webkit-box-shadow: none;
            box-shadow: none;
    pointer-events: none;
}

.pure-button-hidden {
    display: none;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
    background-color: rgb(0, 120, 231);
    color: #fff;
}

/* Button Groups */
.pure-button-group .pure-button {
    margin: 0;
    border-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);

}

.pure-button-group .pure-button:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.pure-button-group .pure-button:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-right: none;
}

/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/

.pure-g {
    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */

    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/pure-css/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
    */
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

    /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;

    /* Prevents distributing space between rows */
    -ms-flex-line-pack: start;
        align-content: flex-start;
}

/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	table .pure-g {
		display: block;
	}
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}

.pure-u {
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-g [class *= "pure-u"] {
    font-family: sans-serif;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1-24 {
    width: 4.1667%;
}

.pure-u-1-12,
.pure-u-2-24 {
    width: 8.3333%;
}

.pure-u-1-8,
.pure-u-3-24 {
    width: 12.5000%;
}

.pure-u-1-6,
.pure-u-4-24 {
    width: 16.6667%;
}

.pure-u-1-5 {
    width: 20%;
}

.pure-u-5-24 {
    width: 20.8333%;
}

.pure-u-1-4,
.pure-u-6-24 {
    width: 25%;
}

.pure-u-7-24 {
    width: 29.1667%;
}

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
}

.pure-u-2-5 {
    width: 40%;
}

.pure-u-5-12,
.pure-u-10-24 {
    width: 41.6667%;
}

.pure-u-11-24 {
    width: 45.8333%;
}

.pure-u-1-2,
.pure-u-12-24 {
    width: 50%;
}

.pure-u-13-24 {
    width: 54.1667%;
}

.pure-u-7-12,
.pure-u-14-24 {
    width: 58.3333%;
}

.pure-u-3-5 {
    width: 60%;
}

.pure-u-5-8,
.pure-u-15-24 {
    width: 62.5000%;
}

.pure-u-2-3,
.pure-u-16-24 {
    width: 66.6667%;
}

.pure-u-17-24 {
    width: 70.8333%;
}

.pure-u-3-4,
.pure-u-18-24 {
    width: 75%;
}

.pure-u-19-24 {
    width: 79.1667%;
}

.pure-u-4-5 {
    width: 80%;
}

.pure-u-5-6,
.pure-u-20-24 {
    width: 83.3333%;
}

.pure-u-7-8,
.pure-u-21-24 {
    width: 87.5000%;
}

.pure-u-11-12,
.pure-u-22-24 {
    width: 91.6667%;
}

.pure-u-23-24 {
    width: 95.8333%;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
    width: 100%;
}
/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
@media screen and (min-width: 35.5em) {
    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-1-2,
    .pure-u-sm-1-3,
    .pure-u-sm-2-3,
    .pure-u-sm-1-4,
    .pure-u-sm-3-4,
    .pure-u-sm-1-5,
    .pure-u-sm-2-5,
    .pure-u-sm-3-5,
    .pure-u-sm-4-5,
    .pure-u-sm-5-5,
    .pure-u-sm-1-6,
    .pure-u-sm-5-6,
    .pure-u-sm-1-8,
    .pure-u-sm-3-8,
    .pure-u-sm-5-8,
    .pure-u-sm-7-8,
    .pure-u-sm-1-12,
    .pure-u-sm-5-12,
    .pure-u-sm-7-12,
    .pure-u-sm-11-12,
    .pure-u-sm-1-24,
    .pure-u-sm-2-24,
    .pure-u-sm-3-24,
    .pure-u-sm-4-24,
    .pure-u-sm-5-24,
    .pure-u-sm-6-24,
    .pure-u-sm-7-24,
    .pure-u-sm-8-24,
    .pure-u-sm-9-24,
    .pure-u-sm-10-24,
    .pure-u-sm-11-24,
    .pure-u-sm-12-24,
    .pure-u-sm-13-24,
    .pure-u-sm-14-24,
    .pure-u-sm-15-24,
    .pure-u-sm-16-24,
    .pure-u-sm-17-24,
    .pure-u-sm-18-24,
    .pure-u-sm-19-24,
    .pure-u-sm-20-24,
    .pure-u-sm-21-24,
    .pure-u-sm-22-24,
    .pure-u-sm-23-24,
    .pure-u-sm-24-24 {
        display: inline-block;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-sm-1-24 {
        width: 4.1667%;
    }

    .pure-u-sm-1-12,
    .pure-u-sm-2-24 {
        width: 8.3333%;
    }

    .pure-u-sm-1-8,
    .pure-u-sm-3-24 {
        width: 12.5000%;
    }

    .pure-u-sm-1-6,
    .pure-u-sm-4-24 {
        width: 16.6667%;
    }

    .pure-u-sm-1-5 {
        width: 20%;
    }

    .pure-u-sm-5-24 {
        width: 20.8333%;
    }

    .pure-u-sm-1-4,
    .pure-u-sm-6-24 {
        width: 25%;
    }

    .pure-u-sm-7-24 {
        width: 29.1667%;
    }

    .pure-u-sm-1-3,
    .pure-u-sm-8-24 {
        width: 33.3333%;
    }

    .pure-u-sm-3-8,
    .pure-u-sm-9-24 {
        width: 37.5000%;
    }

    .pure-u-sm-2-5 {
        width: 40%;
    }

    .pure-u-sm-5-12,
    .pure-u-sm-10-24 {
        width: 41.6667%;
    }

    .pure-u-sm-11-24 {
        width: 45.8333%;
    }

    .pure-u-sm-1-2,
    .pure-u-sm-12-24 {
        width: 50%;
    }

    .pure-u-sm-13-24 {
        width: 54.1667%;
    }

    .pure-u-sm-7-12,
    .pure-u-sm-14-24 {
        width: 58.3333%;
    }

    .pure-u-sm-3-5 {
        width: 60%;
    }

    .pure-u-sm-5-8,
    .pure-u-sm-15-24 {
        width: 62.5000%;
    }

    .pure-u-sm-2-3,
    .pure-u-sm-16-24 {
        width: 66.6667%;
    }

    .pure-u-sm-17-24 {
        width: 70.8333%;
    }

    .pure-u-sm-3-4,
    .pure-u-sm-18-24 {
        width: 75%;
    }

    .pure-u-sm-19-24 {
        width: 79.1667%;
    }

    .pure-u-sm-4-5 {
        width: 80%;
    }

    .pure-u-sm-5-6,
    .pure-u-sm-20-24 {
        width: 83.3333%;
    }

    .pure-u-sm-7-8,
    .pure-u-sm-21-24 {
        width: 87.5000%;
    }

    .pure-u-sm-11-12,
    .pure-u-sm-22-24 {
        width: 91.6667%;
    }

    .pure-u-sm-23-24 {
        width: 95.8333%;
    }

    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-5-5,
    .pure-u-sm-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-1-2,
    .pure-u-md-1-3,
    .pure-u-md-2-3,
    .pure-u-md-1-4,
    .pure-u-md-3-4,
    .pure-u-md-1-5,
    .pure-u-md-2-5,
    .pure-u-md-3-5,
    .pure-u-md-4-5,
    .pure-u-md-5-5,
    .pure-u-md-1-6,
    .pure-u-md-5-6,
    .pure-u-md-1-8,
    .pure-u-md-3-8,
    .pure-u-md-5-8,
    .pure-u-md-7-8,
    .pure-u-md-1-12,
    .pure-u-md-5-12,
    .pure-u-md-7-12,
    .pure-u-md-11-12,
    .pure-u-md-1-24,
    .pure-u-md-2-24,
    .pure-u-md-3-24,
    .pure-u-md-4-24,
    .pure-u-md-5-24,
    .pure-u-md-6-24,
    .pure-u-md-7-24,
    .pure-u-md-8-24,
    .pure-u-md-9-24,
    .pure-u-md-10-24,
    .pure-u-md-11-24,
    .pure-u-md-12-24,
    .pure-u-md-13-24,
    .pure-u-md-14-24,
    .pure-u-md-15-24,
    .pure-u-md-16-24,
    .pure-u-md-17-24,
    .pure-u-md-18-24,
    .pure-u-md-19-24,
    .pure-u-md-20-24,
    .pure-u-md-21-24,
    .pure-u-md-22-24,
    .pure-u-md-23-24,
    .pure-u-md-24-24 {
        display: inline-block;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-md-1-24 {
        width: 4.1667%;
    }

    .pure-u-md-1-12,
    .pure-u-md-2-24 {
        width: 8.3333%;
    }

    .pure-u-md-1-8,
    .pure-u-md-3-24 {
        width: 12.5000%;
    }

    .pure-u-md-1-6,
    .pure-u-md-4-24 {
        width: 16.6667%;
    }

    .pure-u-md-1-5 {
        width: 20%;
    }

    .pure-u-md-5-24 {
        width: 20.8333%;
    }

    .pure-u-md-1-4,
    .pure-u-md-6-24 {
        width: 25%;
    }

    .pure-u-md-7-24 {
        width: 29.1667%;
    }

    .pure-u-md-1-3,
    .pure-u-md-8-24 {
        width: 33.3333%;
    }

    .pure-u-md-3-8,
    .pure-u-md-9-24 {
        width: 37.5000%;
    }

    .pure-u-md-2-5 {
        width: 40%;
    }

    .pure-u-md-5-12,
    .pure-u-md-10-24 {
        width: 41.6667%;
    }

    .pure-u-md-11-24 {
        width: 45.8333%;
    }

    .pure-u-md-1-2,
    .pure-u-md-12-24 {
        width: 50%;
    }

    .pure-u-md-13-24 {
        width: 54.1667%;
    }

    .pure-u-md-7-12,
    .pure-u-md-14-24 {
        width: 58.3333%;
    }

    .pure-u-md-3-5 {
        width: 60%;
    }

    .pure-u-md-5-8,
    .pure-u-md-15-24 {
        width: 62.5000%;
    }

    .pure-u-md-2-3,
    .pure-u-md-16-24 {
        width: 66.6667%;
    }

    .pure-u-md-17-24 {
        width: 70.8333%;
    }

    .pure-u-md-3-4,
    .pure-u-md-18-24 {
        width: 75%;
    }

    .pure-u-md-19-24 {
        width: 79.1667%;
    }

    .pure-u-md-4-5 {
        width: 80%;
    }

    .pure-u-md-5-6,
    .pure-u-md-20-24 {
        width: 83.3333%;
    }

    .pure-u-md-7-8,
    .pure-u-md-21-24 {
        width: 87.5000%;
    }

    .pure-u-md-11-12,
    .pure-u-md-22-24 {
        width: 91.6667%;
    }

    .pure-u-md-23-24 {
        width: 95.8333%;
    }

    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-5-5,
    .pure-u-md-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 64em) {
    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-1-2,
    .pure-u-lg-1-3,
    .pure-u-lg-2-3,
    .pure-u-lg-1-4,
    .pure-u-lg-3-4,
    .pure-u-lg-1-5,
    .pure-u-lg-2-5,
    .pure-u-lg-3-5,
    .pure-u-lg-4-5,
    .pure-u-lg-5-5,
    .pure-u-lg-1-6,
    .pure-u-lg-5-6,
    .pure-u-lg-1-8,
    .pure-u-lg-3-8,
    .pure-u-lg-5-8,
    .pure-u-lg-7-8,
    .pure-u-lg-1-12,
    .pure-u-lg-5-12,
    .pure-u-lg-7-12,
    .pure-u-lg-11-12,
    .pure-u-lg-1-24,
    .pure-u-lg-2-24,
    .pure-u-lg-3-24,
    .pure-u-lg-4-24,
    .pure-u-lg-5-24,
    .pure-u-lg-6-24,
    .pure-u-lg-7-24,
    .pure-u-lg-8-24,
    .pure-u-lg-9-24,
    .pure-u-lg-10-24,
    .pure-u-lg-11-24,
    .pure-u-lg-12-24,
    .pure-u-lg-13-24,
    .pure-u-lg-14-24,
    .pure-u-lg-15-24,
    .pure-u-lg-16-24,
    .pure-u-lg-17-24,
    .pure-u-lg-18-24,
    .pure-u-lg-19-24,
    .pure-u-lg-20-24,
    .pure-u-lg-21-24,
    .pure-u-lg-22-24,
    .pure-u-lg-23-24,
    .pure-u-lg-24-24 {
        display: inline-block;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-lg-1-24 {
        width: 4.1667%;
    }

    .pure-u-lg-1-12,
    .pure-u-lg-2-24 {
        width: 8.3333%;
    }

    .pure-u-lg-1-8,
    .pure-u-lg-3-24 {
        width: 12.5000%;
    }

    .pure-u-lg-1-6,
    .pure-u-lg-4-24 {
        width: 16.6667%;
    }

    .pure-u-lg-1-5 {
        width: 20%;
    }

    .pure-u-lg-5-24 {
        width: 20.8333%;
    }

    .pure-u-lg-1-4,
    .pure-u-lg-6-24 {
        width: 25%;
    }

    .pure-u-lg-7-24 {
        width: 29.1667%;
    }

    .pure-u-lg-1-3,
    .pure-u-lg-8-24 {
        width: 33.3333%;
    }

    .pure-u-lg-3-8,
    .pure-u-lg-9-24 {
        width: 37.5000%;
    }

    .pure-u-lg-2-5 {
        width: 40%;
    }

    .pure-u-lg-5-12,
    .pure-u-lg-10-24 {
        width: 41.6667%;
    }

    .pure-u-lg-11-24 {
        width: 45.8333%;
    }

    .pure-u-lg-1-2,
    .pure-u-lg-12-24 {
        width: 50%;
    }

    .pure-u-lg-13-24 {
        width: 54.1667%;
    }

    .pure-u-lg-7-12,
    .pure-u-lg-14-24 {
        width: 58.3333%;
    }

    .pure-u-lg-3-5 {
        width: 60%;
    }

    .pure-u-lg-5-8,
    .pure-u-lg-15-24 {
        width: 62.5000%;
    }

    .pure-u-lg-2-3,
    .pure-u-lg-16-24 {
        width: 66.6667%;
    }

    .pure-u-lg-17-24 {
        width: 70.8333%;
    }

    .pure-u-lg-3-4,
    .pure-u-lg-18-24 {
        width: 75%;
    }

    .pure-u-lg-19-24 {
        width: 79.1667%;
    }

    .pure-u-lg-4-5 {
        width: 80%;
    }

    .pure-u-lg-5-6,
    .pure-u-lg-20-24 {
        width: 83.3333%;
    }

    .pure-u-lg-7-8,
    .pure-u-lg-21-24 {
        width: 87.5000%;
    }

    .pure-u-lg-11-12,
    .pure-u-lg-22-24 {
        width: 91.6667%;
    }

    .pure-u-lg-23-24 {
        width: 95.8333%;
    }

    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-5-5,
    .pure-u-lg-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 80em) {
    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-1-2,
    .pure-u-xl-1-3,
    .pure-u-xl-2-3,
    .pure-u-xl-1-4,
    .pure-u-xl-3-4,
    .pure-u-xl-1-5,
    .pure-u-xl-2-5,
    .pure-u-xl-3-5,
    .pure-u-xl-4-5,
    .pure-u-xl-5-5,
    .pure-u-xl-1-6,
    .pure-u-xl-5-6,
    .pure-u-xl-1-8,
    .pure-u-xl-3-8,
    .pure-u-xl-5-8,
    .pure-u-xl-7-8,
    .pure-u-xl-1-12,
    .pure-u-xl-5-12,
    .pure-u-xl-7-12,
    .pure-u-xl-11-12,
    .pure-u-xl-1-24,
    .pure-u-xl-2-24,
    .pure-u-xl-3-24,
    .pure-u-xl-4-24,
    .pure-u-xl-5-24,
    .pure-u-xl-6-24,
    .pure-u-xl-7-24,
    .pure-u-xl-8-24,
    .pure-u-xl-9-24,
    .pure-u-xl-10-24,
    .pure-u-xl-11-24,
    .pure-u-xl-12-24,
    .pure-u-xl-13-24,
    .pure-u-xl-14-24,
    .pure-u-xl-15-24,
    .pure-u-xl-16-24,
    .pure-u-xl-17-24,
    .pure-u-xl-18-24,
    .pure-u-xl-19-24,
    .pure-u-xl-20-24,
    .pure-u-xl-21-24,
    .pure-u-xl-22-24,
    .pure-u-xl-23-24,
    .pure-u-xl-24-24 {
        display: inline-block;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-xl-1-24 {
        width: 4.1667%;
    }

    .pure-u-xl-1-12,
    .pure-u-xl-2-24 {
        width: 8.3333%;
    }

    .pure-u-xl-1-8,
    .pure-u-xl-3-24 {
        width: 12.5000%;
    }

    .pure-u-xl-1-6,
    .pure-u-xl-4-24 {
        width: 16.6667%;
    }

    .pure-u-xl-1-5 {
        width: 20%;
    }

    .pure-u-xl-5-24 {
        width: 20.8333%;
    }

    .pure-u-xl-1-4,
    .pure-u-xl-6-24 {
        width: 25%;
    }

    .pure-u-xl-7-24 {
        width: 29.1667%;
    }

    .pure-u-xl-1-3,
    .pure-u-xl-8-24 {
        width: 33.3333%;
    }

    .pure-u-xl-3-8,
    .pure-u-xl-9-24 {
        width: 37.5000%;
    }

    .pure-u-xl-2-5 {
        width: 40%;
    }

    .pure-u-xl-5-12,
    .pure-u-xl-10-24 {
        width: 41.6667%;
    }

    .pure-u-xl-11-24 {
        width: 45.8333%;
    }

    .pure-u-xl-1-2,
    .pure-u-xl-12-24 {
        width: 50%;
    }

    .pure-u-xl-13-24 {
        width: 54.1667%;
    }

    .pure-u-xl-7-12,
    .pure-u-xl-14-24 {
        width: 58.3333%;
    }

    .pure-u-xl-3-5 {
        width: 60%;
    }

    .pure-u-xl-5-8,
    .pure-u-xl-15-24 {
        width: 62.5000%;
    }

    .pure-u-xl-2-3,
    .pure-u-xl-16-24 {
        width: 66.6667%;
    }

    .pure-u-xl-17-24 {
        width: 70.8333%;
    }

    .pure-u-xl-3-4,
    .pure-u-xl-18-24 {
        width: 75%;
    }

    .pure-u-xl-19-24 {
        width: 79.1667%;
    }

    .pure-u-xl-4-5 {
        width: 80%;
    }

    .pure-u-xl-5-6,
    .pure-u-xl-20-24 {
        width: 83.3333%;
    }

    .pure-u-xl-7-8,
    .pure-u-xl-21-24 {
        width: 87.5000%;
    }

    .pure-u-xl-11-12,
    .pure-u-xl-22-24 {
        width: 91.6667%;
    }

    .pure-u-xl-23-24 {
        width: 95.8333%;
    }

    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-5-5,
    .pure-u-xl-24-24 {
        width: 100%;
    }
}
/*!
Pure v2.0.3
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*csslint adjoining-classes: false, box-model:false*/
.pure-menu {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.pure-menu-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

.pure-menu-list,
.pure-menu-item {
    position: relative;
}

.pure-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pure-menu-item {
    padding: 0;
    margin: 0;
    height: 100%;
}

.pure-menu-link,
.pure-menu-heading {
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

/* HORIZONTAL MENU */
.pure-menu-horizontal {
    width: 100%;
    white-space: nowrap;
}

.pure-menu-horizontal .pure-menu-list {
    display: inline-block;
}

/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-separator {
    display: inline-block;
    vertical-align: middle;
}

/* Submenus should still be display: block; */
.pure-menu-item .pure-menu-item {
    display: block;
}

.pure-menu-children {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 3;
}

.pure-menu-horizontal .pure-menu-children {
    left: 0;
    top: auto;
    width: inherit;
}

.pure-menu-allow-hover:hover > .pure-menu-children,
.pure-menu-active > .pure-menu-children {
    display: block;
    position: absolute;
}

/* Vertical Menus - show the dropdown arrow */
.pure-menu-has-children > .pure-menu-link:after {
    padding-left: 0.5em;
    content: "\25B8";
    font-size: small;
}

/* Horizontal Menus - show the dropdown arrow */
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
    content: "\25BE";
}

/* scrollable menus */
.pure-menu-scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
}

.pure-menu-scrollable .pure-menu-list {
    display: block;
}

.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
    display: inline-block;
}

.pure-menu-horizontal.pure-menu-scrollable {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    /* a little extra padding for this style to allow for scrollbars */
    padding: .5em 0;
}

/* misc default styling */

.pure-menu-separator,
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    background-color: #ccc;
    height: 1px;
    margin: .3em 0;
}

.pure-menu-horizontal .pure-menu-separator {
    width: 1px;
    height: 1.3em;
    margin: 0 .3em ;
}

/* Need to reset the separator since submenu is vertical */
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    display: block;
    width: auto;
}

.pure-menu-heading {
    text-transform: uppercase;
    color: #565d64;
}

.pure-menu-link {
    color: #777;
}

.pure-menu-children {
    background-color: #fff;
}

.pure-menu-link,
.pure-menu-disabled,
.pure-menu-heading {
    padding: .5em 1em;
}

.pure-menu-disabled {
    opacity: .5;
}

.pure-menu-disabled .pure-menu-link:hover {
    background-color: transparent;
}

.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
    background-color: #eee;
}

.pure-menu-selected > .pure-menu-link,
.pure-menu-selected > .pure-menu-link:visited {
    color: #000;
}

/* ----------------------------------------------------------- */
/* == tingle v0.14.0 */
/* ----------------------------------------------------------- */

.tingle-modal * {
  box-sizing: border-box;
}

.tingle-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: transform .2s ease;
}

/* confirm and alerts
-------------------------------------------------------------- */

.tingle-modal--confirm .tingle-modal-box {
  text-align: center;
}

/* modal
-------------------------------------------------------------- */

.tingle-modal--noOverlayClose {
  cursor: default;
}

.tingle-modal--noClose .tingle-modal__close {
  display: none;
}

.tingle-modal__close {
  position: fixed;
  top: 10px;
  right: 28px;
  z-index: 1000;
  padding: 0;
  width: 5rem;
  height: 5rem;
  border: none;
  background-color: transparent;
  color: #f0f0f0;
  font-size: 6rem;
  font-family: monospace;
  line-height: 1;
  cursor: pointer;
  transition: color .3s ease;
}

.tingle-modal__closeLabel {
  display: none;
}

.tingle-modal__close:hover {
  color: #fff;
}

.tingle-modal-box {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
  width: 60%;
  border-radius: 4px;
  background: #fff;
  opacity: 1;
  cursor: auto;
  transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
  -ms-transform: scale(.8);
  transform: scale(.8);
}

.tingle-modal-box__content {
  padding: 3rem 3rem;
}

.tingle-modal-box__footer {
  padding: 1.5rem 2rem;
  width: auto;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #f5f5f5;
  cursor: auto;
}

.tingle-modal-box__footer::after {
  display: table;
  clear: both;
  content: "";
}

.tingle-modal-box__footer--sticky {
  position: fixed;
  bottom: -200px; /* TODO : find a better way */
  z-index: 10001;
  opacity: 1;
  transition: bottom .3s ease-in-out .3s;
}

/* state
-------------------------------------------------------------- */

.tingle-enabled {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden;
}

.tingle-modal--visible .tingle-modal-box__footer {
  bottom: 0;
}

.tingle-enabled .tingle-content-wrapper {
  filter: blur(8px);
}

.tingle-modal--visible {
  visibility: visible;
  opacity: 1;
}

.tingle-modal--visible .tingle-modal-box {
  -ms-transform: scale(1);
  transform: scale(1);
}

.tingle-modal--overflow {
  overflow-y: scroll;
  padding-top: 8vh;
}

/* btn
-------------------------------------------------------------- */

.tingle-btn {
  display: inline-block;
  margin: 0 .5rem;
  padding: 1rem 2rem;
  border: none;
  background-color: grey;
  box-shadow: none;
  color: #fff;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
  transition: background-color .4s ease;
}

.tingle-btn--primary {
  background-color: #3498db;
}

.tingle-btn--danger {
  background-color: #e74c3c;
}

.tingle-btn--default {
  background-color: #34495e;
}

.tingle-btn--pull-left {
  float: left;
}

.tingle-btn--pull-right {
  float: right;
}

/* responsive
-------------------------------------------------------------- */

@media (max-width : 540px) {
  .tingle-modal {
    top: 0px;
    display: block;
    padding-top: 60px;
    width: 100%;
  }

  .tingle-modal-box {
    width: auto;
    border-radius: 0;
  }

  .tingle-modal-box__content {
    overflow-y: scroll;
  }

  .tingle-modal--noClose {
    top: 0;
  }

  .tingle-modal--noOverlayClose {
    padding-top: 0;
  }

  .tingle-modal-box__footer .tingle-btn {
    display: block;
    float: none;
    margin-bottom: 1rem;
    width: 100%;
  }

  .tingle-modal__close {
    top: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    border: none;
    background-color: #2c3e50;
    box-shadow: none;
    color: #fff;
    line-height: 55px;
  }

  .tingle-modal__closeLabel {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  }

  .tingle-modal__closeIcon {
    display: inline-block;
    margin-right: .5rem;
    vertical-align: middle;
    font-size: 4rem;
  }
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .tingle-modal {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  @media (max-width : 540px) {
    .tingle-modal {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }

  .tingle-enabled .tingle-content-wrapper {
    filter: none;
  }
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #3f4458;
  -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #20222c;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #20222c;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #3f4458;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #20222c;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #3f4458;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: #3f4458;
  color: #fff;
  fill: #fff;
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: #fff;
  fill: #fff;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #eee;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(192,187,167,0.1);
}
.numInputWrapper span:active {
  background: rgba(192,187,167,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255,255,255,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(255,255,255,0.5);
}
.numInputWrapper:hover {
  background: rgba(192,187,167,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(192,187,167,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff;
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255,255,255,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: #3f4458;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(192,187,167,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #3f4458;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: #3f4458;
  color: #fff;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #20222c;
          box-shadow: -1px 0 0 #20222c;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #646c8c;
  border-color: #646c8c;
}
.flatpickr-day.today {
  border-color: #eee;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #eee;
  background: #eee;
  color: #3f4458;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #80cbc4;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #80cbc4;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #80cbc4;
          box-shadow: -10px 0 0 #80cbc4;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
          box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(255,255,255,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(255,255,255,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
          box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #20222c;
          box-shadow: 1px 0 0 #20222c;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(255,255,255,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(255,255,255,0.95);
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(255,255,255,0.95);
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #6a7395;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

:root {
    /*
    The site's primary color. Used for sidebars, buttons and some icons on light mode.
    Phuks: #d94f00
    */
    --primary-color: #d94f00;
    /* Used as box-shadow color */
    --primary-shadow: #ab4409;

    /* Post link colors */
    /*
    Hover color for post links
    Phuks: #ff6d15
     */
    --post-link-hover: #ff6d15;
    /**
    Color for visited links.
    Phuks: #d95204
     */
    --post-link-visited: #d95204;

    /*
    Used only in the chatbox at the moment
    Phuks: #b74500
     */
    --primary-highlight: #b74500;

    /* These are used only for buttons */
    --button-success-bg: rgb(28, 184, 65); /* Green buttons. Currently unused */
    --button-error-bg: rgb(202, 60, 60); /* Red button. Menacing. */
    --button-warning-bg: rgb(223, 117, 20); /* Orange button. Mostly known for being the "block" button on subs */

    /* Used as the "active" form of some buttons (profile, PMs, settings, sub sort) */
    --button-secondary-bg: #101010;

    /* Primary buttons used all over the site */
    --button-primary-bg: #ff6d15;
    --button-primary-fg: #fff;


    /* Up/downvote colors */
    --upvote-color: #ff6d15;
    --downvote-color: red;

    /** --- Dark mode --- */
    /*
    Primary dark-mode color. Mostly used for links hover color and the logo (if supported)
    Phuks: #ff6d15
     */
    --dark-primary-color: #ff6d15;
    /**
    Color for visited links
    Phuks: #d95204
    **/
    --dark-links-visited: #d95204;
    /*
    Secondary link color. Used for subs on post lists and for the sidebar
    Phuks: #ab4409
    */
    --dark-links-a: #ab4409;
    /** Box-shadow in dark mode */
    --dark-shadow: #aa4509;
}

body {
  background-color: white;
  color: black;
}

* {
  box-sizing: border-box;
}

abbr[title] {
  text-decoration: none;
}

.cw-brand div {
  margin-left: 1em;
}

.content {
  word-wrap: break-word;
  padding-top: 1em;
}

code, pre {
  background: #eee;
}

pre {
  padding: .4em;
  overflow-x: auto
}

code {
  padding: 1px;
  line-height: 1.4em;
}

blockquote p {
  margin: 0;
}

blockquote>p:not(:last-child) {
  margin-bottom: 1em;
}

blockquote {
  border-left: 3px solid gray;
  margin: .3em 0 .3em 1em;
  padding: .3em 0 .3em .7em;
}

.pure-control-group .markdown-editor .editbtns {
  display: inline-block;
}

.pure-control-group .markdown-editor {
  display: inline-block;
}

.announcement {
  padding: 3px;
  margin-right: .5em;
  border-radius: 5px;
  color: white;
  background-color: #a61515;
}

.mod2-inv {
  background-color: #eee;
  border: 1px solid gray;
  padding: 1em;
}

/* mobile menu  */

.th-navbar {
  margin-bottom: 1em;
  -webkit-font-smoothing: antialiased;
  height: 2.1em;
  overflow: hidden;
  transition: height 0.5s;
}

.th-navbar.open {
  height: 6.5em;
  -webkit-box-shadow: 0 2px 3px 0 var(--primary-shadow);
  -moz-box-shadow: 0 2px 3px 0 var(--primary-shadow);
  box-shadow: 0 2px 3px 0 var(--primary-shadow);
}

#th-uinfo {
  text-align: right;
  height: 100%;
}

.th-toggle {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  margin-top: .8em;
  margin-right: .5em;
}

.th-toggle .bar {
  background-color: #fff;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 100px;
  position: absolute;
  top: 18px;
  right: 7px;
  transition: all 0.5s;
}

.th-toggle .bar:first-child {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.th-toggle.x .bar {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.th-toggle.x .bar:first-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media (max-width: 47.999em) {
  #th-uinfo {
    text-align: left;
  }
  .th-toggle {
    display: block;
  }
  div.sidebar {
    position: absolute;
    background-color: white;
    display: none;
    -webkit-box-shadow: 0 3px 5px 0 var(--primary-shadow);
    -moz-box-shadow: 0 3px 5px 0 var(--primary-shadow);
    box-shadow: 0 3px 5px 0 var(--primary-shadow);
  }
  div.sidebar.open {
    display: block;
  }
  .th-body {
    position: relative;
  }

  #chpop {
    min-width: 50%;
  }

  #chpop.chexpanded {
    min-width: 98%;
    right: 0.2em;
  }
}

/* /mobile menu */

.cw-items a {
  color: #fff;
}

.cw-items form {
  display: inline-block;
}

.pure-menu-active>.pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus {
  background-color: initial;
}

.important {
  border: 2px dashed red;
  padding: 2px;
  text-align: center;
}

.div-error {
  display: none;
}

@media screen and (min-width: 48em) {
  #th-menu {
    padding-left: 2em;
  }
  .cw-items {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #fff
  }
  #th-uinfo {
    position: absolute;
    top: 0;
    right: 1em;
    text-align: right;
  }
}

#th-menu a.pure-menu-link {
  color: white;
}

#th-menu a.pure-menu-link:hover, #th-menu li[active='true'] a, #th-menu li[active] a {
  background-color: rgb(57, 101, 164);
}

.glyphbutton {
  display: inline-block;
  position: relative;
  top: 2px;
  margin-right: .25em;
  margin-left: .25em;
}

.button-transparent, .button-transparent:hover {
  background: none;
}

.btn-rcancel {
  margin-left: 1em;
}

.separator {
  margin-left: .1em;
  margin-right: .25em;
  border-left: 1px #444 dotted;
  padding-top: 3px;
}

a {
  color: #00419d;
  text-decoration: none;
}

a:hover {
  color: #64a6ca;
}

.footer {
  text-align: center;
  font-size: small;
  color: #5d5454;
  padding: 2em;
}

.center-container form h1 {
  text-align: center;
}

/* Header */

.th-navbar {
  background-color: var(--primary-color);
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
  padding: .4em 0 .4em .3em;
  overflow: hidden;
  transition: height 0.5s;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .6);
  -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .6);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .6);
  position: relative;
  height: 3.6em;
  z-index: 100;
}

#center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  top: 5.1em;
  left: 0;
  bottom: 4em;
  width: 100%;
}

#container {
  padding-top: 1em;
  padding-left: .5em;
  width: 100%;
}

.error {
  margin-top: 1em;
  padding: 5px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  border-radius: 3px;
}

.error span {
  display: block;
}

.alert.div-error {
  background: #d92800;
  color: #ffffff;
  margin: 6px;
  padding-top: .1em;
  padding-bottom: .1em;
}

.div-error span.closebtn {
  margin: 4px;
  float: right;
}

.alert.div-error ul {
  padding-bottom: 10px;
}

.message {
  margin-top: 1em;
  padding: 5px;
  background-color: #00d928;
  color: white;
  margin-bottom: 15px;
  border-radius: 3px;
}

.message span {
  display: block;
}

.div-message {
  display: none;
}

.alert.div-message {
  background: #00d928;
  color: #ffffff;
  margin: 6px;
  padding-top: .1em;
  padding-bottom: .1em;
}

.div-message span.closebtn {
  margin: 4px;
  float: right;
}

.alert.div-message ul {
  padding-bottom: 10px;
}

#bottombar {
  height: 4em;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: rgba(200, 200, 200, 0.5);
  z-index: 100;
}

#coords {
  margin: 1em 1em 0;
  display: block;
}

.c-color {
  display: inline-block;
  min-width: 32px;
  min-height: 32px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
  position: relative;
}

#palette {
  margin-top: 1em;
  text-align: center;
}

#info p {
  margin: .2em;
}

#overlay {
  position: fixed;
  z-index: 10000;
  height: 4em;
  bottom: 0;
  padding: 1em;
  font-weight: 600;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  vertical-align: middle;
}

span#notification {
  opacity: 1;
  transition: opacity 3s;
  margin-left: .2em;
  font-weight: 700;
}

span#notification.fade {
  opacity: 0;
}

#reticule {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  border: 2px solid black;
  background-color: rgba(0, 0, 0, 0);
  box-sizing: content-box;
  pointer-events: none;
  will-change: transform;
  z-index: 100;
}

#curr div {
  height: 3em;
  border: 1px solid #aaa;
  border-radius: 2px;
  margin-right: 10px;
  cursor: pointer;
}

#curr div:hover {
  background-color: #ccc;
}

#curr div.selected {
  background-color: #888;
}

#buyamount {
  width: 8ch;
  margin: 0 10px;
}

.c-color.cancel:after {
  content: "";
  position: absolute;
  border-top: 1px solid red;
  width: 45px;
  transform: rotate(45deg);
  transform-origin: 0 0;
  left: 0;
}

.editbar path {
  fill: white;
}

.p-icon {
  margin-top: 5px;
  width: 16px;
  height: 16px;
  display: block;
}

.tx-icon {
  display: inline-flex;
  align-self: center;
}

.tx-icon svg {
  height: 1em;
  width: 1em;
  top: .15em;
  position: relative;
}

.inboxside .p-icon {
  margin-top: 0;
}

.i-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.p-icon path {
  fill: #e3e3e3;
}

.icon {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.hasmail i {
  color: #101010;
}

.content .hasmail path {
  fill: var(--primary-color);
}

.sidebar .pure-button-primary {
  color: #fff;
  background-color: #101010;
}

.sidebar .pure-button-primary:hover {
  background-color: #282828;
}

.pure-button-primary, a.pure-button-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.pure-button-primary:hover {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

.center {
  text-align: center;
}

.glyphbutton i {
  font-size: 19px;
}

/*  UPLOADER STYLES  */

.hide, #upload-input, #pbar, #filetable, .pure-form input[type="text"].hide, .pure-form select.hide {
  display: none;
}

#filetable {
  background-color: #eee;
  padding: 1em;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*  /UPLOADER STYLES */

/* POST LIST STYLES */

.post {
  min-height: 70px;
  padding: 0.4em;
  border-radius: 8px 0 0 8px;
}

.post-heading {
  padding-top: 2px;
}

.post:nth-child(2n) {
  background-color: #f7f7f7;
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.post:nth-child(2n) .expandotxt {
  background-color: #f2f2f2;
}

.post-heading h1 {
  font-size: medium;
  margin: 0;
  font-weight: normal;
  display: inline-block;
}

.post .title {
  color: #101010;
  text-decoration: none;
  line-height: 1.2em;
  font-size: 1em;
  word-wrap: break-word;
}

.post .title:visited {
  color: var(--post-link-visited);
}

.post a.title:hover {
  color: var(--post-link-hover);
}

.misctainer {
  float: left;
}

.pbody {
  display: inline-block;
  width: calc(100% - 130px);
  padding-left: .5em;
}

.post:after {
  content: "";
  display: table;
  clear: both;
}

.p-icon[data-icon="exclaim"] {
  display: inline-block;
  top: 6px;
  position: relative;
}

.p-icon[data-icon="exclaim"] path {
  fill: var(--primary-color);
}

.expando {
  display: inline-block;
  height: 22px;
  width: 22px;
  border-radius: 6px;
  background-color: #ddd;
  text-align: center;
  line-height: 2em;
  color: #444;
  margin-right: .2em;
  margin-left: 0;
  cursor: pointer;
  top: 7px;
  position: relative;
}

.pure-u-1.pure-u-md-13-24.pastebin {
  width: 80%;
}

iframe {
  border: 0;
  display: block;
}

.iframewrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.iframewrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.expandotxt img, .expandotxt video, .expandotxt iframe {
  max-width: 100%;
}

.resize-handle {
  text-align: right;
  cursor: nwse-resize;
}

.resize-handle .i-icon {
  width: 24px;
  height: 24px;
}

.post .domain a, .post .domain {
  color: #666;
  font-size: small;
}

.post .author {
  font-size: small;
  color: #5d5454;
}

.post .thumbnail {
  width: 70px;
  height: 70px;
}

.post .thumbnail img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.c-upvote, .c-downvote, .upvote, .downvote {
  height: 20px;
  width: 18px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.upvoted path {
  fill: var(--upvote-color);
}

.downvoted path {
  fill: var(--downvote-color);
}

.misctainer {
  padding-right: .4em;
}

.votebuttons {
  height: 100%;
  max-height: 70px;
  padding-top: .15em;
  float: left;
  width: 35px;
}

.score {
  font-size: 15px;
  margin: 5px 0 5px 0;
  text-align: center;
  letter-spacing: normal;
}

.score.archived {
  padding-top: 20px;
}

.thcontainer {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
}

.expando svg path {
  fill: #555;
}

.expando svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  top: -1px;
  position: relative;
}

.expando .icon svg {
  width: 16px;
  height: 16px;
  top: -3px;
  position: relative;
}

.votebuttons svg {
  width: 16px;
  height: 16px;
  margin: 0;
}

.expandotxt {
  background-color: #e1e1e1;
  padding: 1em;
  position: relative;
}

.expando-wrapper {
  display: inline-block;
  will-change: height;
}

.thumbnail .placeholder svg path {
  fill: #333;
}

.pure-menu a svg {
  height: 4em;
  margin: 4px 0;
}

.thumbnail .placeholder {
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

a#nextp {
  color: #fff;
  float: right;
  margin: 1em 2em;
  border-radius: 4px;
}

a#prevp {
  color: #fff;
  float: left;
  margin: 1em 2em;
  border-radius: 4px;
}

#sortbuttons div {
  justify-content: center;
}

div#sortbuttons {
  padding-bottom: 5px;
}

.links {
  margin: 4px 0 0 .3em;
  padding: 0;
}

a.slink {
  color: #12619c;
  font-weight: 700;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.subinfo {
  text-align: center;
}

.subs {
  margin-bottom: .6em;
}

.links a {
  position: relative;
  right: 12px;
  font-size: 13px;
  color: #0f5387;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  margin-left: 5px;
}

.links a.comments, .postinfo .links a, .bottombar.links a {
  font-weight: 700;
}

.alldaposts .links a {
  color: #777;
}

.alldaposts .links a.comments {
  color: #0f5387;
}

.links li {
  display: inline-block;
  padding: 0 .25em;
}

.nsfw {
  display: inline-block;
  padding: 3px;
  background-color: transparent;
  border-radius: 4px;
  color: #e22;
  font-size: 12px;
  line-height: 12px;
  margin-right: .3em;
  border: 1px solid #e22;
}

.nsfw-blur {
  filter: blur(4px);
  -webkit-filter: blur(4px);
  cursor: pointer;
}

.block-blur, .block-blur.title, a.block-blur.title:visited {
  color: #a61515;
  filter: blur(4px);
  -webkit-filter: blur(4px);
  cursor: pointer;
}

img.nsfw-blur, img.block-blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.stickyposts {
  margin-bottom: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #bdbdbd;
}

.styckyposts .post {
  border: 1px solid #d9d8d6;
}

.stick {
  color: #009300
}

/* /POST LIST STYLES */

/* POST PAGE STYLES */

@media screen and (max-width: 48em) {
  .wholepost .thcontainer {
    display: none;
  }
  .wholepost .misctainer {
    float: none;
  }
}

.postinfo {
  display: inline-block;
  width: 82%;
}

.popup {
  width: 50%;
  position: absolute;
  top: 5em;
  left: 25%;
  background-color: white;
  padding: 1em;
  border: 1px solid gray;
  z-index: 100;
}

.postflair, .selflair, .submitflair {
  border: 1px solid #aaa;
  border-radius: 2px;
  color: black;
  background-color: #eee;
  padding: 5px;
  line-height: 2em;
  white-space: nowrap;
  cursor: pointer;
}

#flair {
    text-align: center;
    padding-bottom: .2em;
}

#flair a {
    font-size: small;
    white-space: pre;
}

.submitflair {
    margin-right: .3em;
    margin-bottom: .3em;
    line-height: 1em;
}

.submitflair.selected {
  color: #fff;
  background-color: #101010;
}

.submitflair.selected:hover {
  background-color: #808080;
}

#flair-container {
  float: right;
  width: calc(100% - 11em);
  display: flex;
  flex-wrap: wrap;
}

@media only screen and (max-width : 480px) {
    #flair-container {
        width: 100%;
    }
}

.pollflair {
  padding: 3px;
  margin-right: .5em;
  border-radius: 5px;
  color: white;
  background-color: #383838;
}

.user_flair {
  border: 1px solid #aaa;
  border-radius: 2px;
  background-color: #eee;
  padding: 3px;
  line-height: 1.4em;
  white-space: nowrap;
  color: #111;
}

.selflair:hover, .submitflair:hover {
  background-color: #d5d5d5;
}

.commenthead {
  font-size: smaller;
  color: #414141;
}

.c-downvote {
  margin-top: .4em;
}

.red-confirm {
  color: red;
  font-size: 0.8em;
  margin-right: 7px;
}

.red-confirm a {
  position: initial;
  margin-right: 7px;
  margin-left: 2px;
  cursor: pointer;
}

#post-source {
  display: none;
}

.wholepost {
  margin-top: 1.5em;
}

.comment-form {
  margin: 1em 1em 0 1em;
}

.comment-form button {
  margin-top: .7em;
}

.alertbox {
  display: none;
}

.comments-locked {
  margin-left: 1em;
}

.comments {
  margin-left: 1em;
}

.loadsibling {
  font-size: smaller;
}

.canclose .closemsg {
  position: absolute;
  top: 0;
  right: 0;
}

.canclose {
  position: relative;
}

.cmpreview {
  margin-top: .7em;
  margin-bottom: .4em;
}

.votecomment {
  float: left;
  width: 1.3em;
  text-align: center;
  margin-right: .3em;
  margin-top: .3em;
}

.c-upvote svg, .c-downvote svg, .upvote svg, .downvote svg {
  fill: #888;
}

.togglecomment {
  cursor: pointer;
}

.bottombar a {
  cursor: pointer;
}

.commblock {
  display: inline-block;
  width: calc(100% - 2em);
}

/* /POST PAGE STYLES */

/* COLOR BUTTONS, USED ERRYWHERE */

.button-xsmall {
  font-size: 70%;
}

.button-success {
  background: var(--button-success-bg);
  /* this is a green */
}

.button-error {
  background: var(--button-error-bg);
  color: white;
  /* this is a maroon */
}

.button-warning {
  background: var(--button-warning-bg);
  /* this is an orange */
}

.button-secondary {
  color: #fff;
  background: var(--button-secondary-bg);
  /* this is a light black */
}

.button-secondary:hover {
  background-color: #282828;
}

/* /COLOR BUTTONS */

/* USERBAR STYLES */

#logout button {
  margin-left: 1em;
  font-size: 14px;
}

span.mailcount {
  position: absolute;
  top: 12px;
  right: -8px;
  line-height: 1em;
  min-width: 1em;
  border-radius: 1em;
  background: #000;
  font-size: small;
  display: inline-block;
  text-align: center;
  padding: 0.05em 0.12em;
  margin-right: 3px;
}

span.hasmail {
  display: inline-block;
}

/* /USERBAR STYLES */

/* SUB BAR STYLES */

.dropdown-toggle.moremenu {
  color: white;
  text-align: center;
  cursor: pointer;
}

#hiddensubs {
  position: absolute;
  top: 2em;
  right: 0;
  z-index: 1000;
  display: none;
  float: right;
  min-width: 160px;
  width: auto;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid rgba(204, 204, 204, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  filter: drop-shadow(-20px 20px 18px #313131);
  /*writing-mode: vertical-lr;*/
  flex-flow: column wrap;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 60%;
}

.dropdown-toggle.moremenu path {
  fill: white;
}

#hiddensubs li:hover {
  background-color: #000;
}

#hiddensubs li {
  display: block;
  padding: 0 5px;
  font-variant: small-caps;
  font-size: larger;
  /*writing-mode: horizontal-tb;*/
}

#hiddensubs li a {
  color: var(--primary-highlight);
  width: 100%;
  display: block;
}

#subsdropdown {
  width: 4em;
  display: inline-block;
  margin: .1em .1em .2em .1em;
  vertical-align: super;
}

.th-subbar {
  background-color: #101010;
  border-bottom: 1px solid #101010;
  font-variant: small-caps;
  overflow: hidden;
}

.th-subbar ul {
  margin: .1em .1em .2em .1em;
  padding: 0;
  white-space: nowrap;
  width: calc(100% - 5em);
  overflow: hidden;
  display: inline-block;
}

.th-subbar ul li {
  color: #fff;
  display: inline-block;
  margin: 0 5px;
}

.th-subbar ul li a {
  color: #eee;
  font-size: .9em;
}

.th-subbar ul li.editbar {
  margin: 0;
}

/* /SUB BAR STYLES */

/* SIDEBAR STYLES */

.sidebar {
  padding: 1em 5px 5px 5px;
  overflow-wrap: break-word;
  border-left: solid 1px #ccc;
}

.sidebar h4 {
  color: #1b1b1b;
  margin: 0;
}

.sidebar ul {
  margin-top: .2em;
}

.sidebarlists ul {
  padding: 0 14px 0 18px;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
}

.sidebarlists ul li {
  padding-top: 8px;
}

.sidebar h4 {
  padding-top: 3px;
}

.sidebarlists {
  color: #5d5454;
}

.sbm-post {
  display: block;
  margin: 5px;
}

.sbm-icon {
  position: relative;
  padding-left: 1em;
}

.sbm-icon svg {
  height: 16px;
  position: absolute;
  left: -.5em;
  top: 50%;
  transform: translateY(-50%);
}

.button-secondary svg {
  fill: white;
}

hr {
  border: 0;
  border-bottom: 2px dashed #a6a6a6;
  background: transparent;
}

.top5 {
  padding-left: 1.4em;
  font-size: 14px;
}

.sidelocale {
  font-size: 12px;
}

.sidescore {
  font-size: 12px;
  font-weight: bold;
  margin-right: 4px;
  color: var(--upvote-color);
}

input[type=search] {
  box-sizing: border-box;
  border: solid lightgray 1px;
  border-radius: 4px;
  font-size: .9em;
  background-color: white;
  padding: 12px 15px 10px 35px;
  -webkit-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;
  margin: 5px;
}

.search {
  position: relative;
  color: #000;
  font-size: 16px;
}

.search .icon {
  position: absolute;
  top: .5em;
  left: .8em;
  height: 24px;
  width: 24px;
}

.search .icon path {
  fill: darkgray;
}

.flairpicker select {
  box-sizing: border-box;
  border: solid lightgray 1px;
  border-radius: 4px;
  font-size: .9em;
  background-color: white;
  -webkit-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;
  margin: 10px 5px 5px 5px;
}

/* /SIDEBAR STYLES */

/* CREATE POST PAGE STYLES */

@media (max-width: 35.5em) {
  .content.createpost {
    width: 90%;
  }
  .createpost input#title, .createpost input#link, textarea#content, input#subject, form#msg-form .editbtns {
    width: 100%;
  }
  .motto {
    display: none;
  }
  #createPostIcon {
    display: block;
  }
  .post .author {
    line-height: 1.7em;
  }
  .misctainer {
    padding: 0;
  }
  .pbody {
    width: calc(100% - 105px);
  }
  .content.wiki {
    width: 95%;
  }
}

#createPostIcon {
  position: absolute;
  top: .5em;
  right: 3.2em;
  width: 28px;
  height: 28px;
}

#createPostIcon svg {
  height: inherit;
}

@media (min-width: 35.5em) {
  .content.createpost {
    width: 700px;
  }
  .createpost input#title, .createpost input#link, .createpost textarea#content {
    width: calc(100% - 11em);
  }
  .pure-control-group .markdown-editor {
    width: calc(100% - 11em);
  }
  #createPostIcon {
    display: none;
  }
  .content.wiki {
    width: 65%;
  }
}

.createpost input.sbm-poll-opt {
  margin-right: 1em;
  width: 50%;
}

.post-types-opts {
  padding-bottom: 1em;
}

/* / CREATE POST PAGE STYLES */

/* POST PAGE STYLES */

.postbar {
  white-space: nowrap;
  min-height: 70px;
}

.postbar * {
  white-space: normal;
}

.wholepost .title {
  font-size: 1.2em;
}

.wholepost .author {
  font-size: small;
  color: #5d5454;
  margin-top: .3em;
}

.post-content-container, .poll-space {
  background-color: #f6f6f6;
  padding: .4em 1em;
  /* 1px margin on botton and top so it respects <p>'s margin */
}

.post-content-container textarea, .commblock textarea, .comment-form textarea {
  resize: vertical;
  width: 100%;
  overflow: auto;
}

.cwrap, .pure-control-group .markdown-editor.cwrap {
  margin-top: 5px;
  width: 100%;
}

div.comments {
  padding-right: 8px;
}

.show-post-comments {
    margin-left: 15px;
}

.pchild {
  margin-left: 15px;
  border-left: 1px dotted #cecece;
}

.pchild-e {
  margin-left: 15px;
}

.commentrow {
  margin-left: 7px;
}

div.commentContent {
  padding-bottom: 5px;
}

div.commentContent p {
  margin-top: .45em;
  margin-bottom: .45em;
}

article.comment .score {
  margin: 0;
  line-height: 15px;
}

/* /POST PAGE STYLES */

/* EDITOR STYLES */

.editbtns {
  height: 26px;
  margin-top: 2px;
  padding-left: .2em;
  width: 100%;
  border: 1px solid #ccc;
}

.editbtns .separator {
  border: none;
}

.editbtns div {
  margin-top: 2px;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 6px;
  text-align: center;
  padding-top: 1px;
}

.editbtns div:hover {
  background: #ccc;
}

.editbtns div svg {
  height: 18px;
}

.markdown-editor textarea {
  padding-top: .3em;
  border-top: none;
  margin-top: 0;
  box-shadow: none;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  width: 100%
}

/* /EDITOR STYLES */

/* MESSAGES STYLES */

.center-container .content {
  max-width: 100%;
}

.pmessage.post p.title {
  border-bottom: 1px solid #c8c8c8;
  margin-left: 30px;
}

.pmessage.post {
  min-height: 70px;
  padding: .8em;
  border-radius: 8px 0 0 8px;
  background-color: #fefefe;
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  margin: 8px 0;
}

.pmessage.post:nth-child(2n) {
  background-color: #f7f7f7;
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
}

.pmessage p.container a:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.pmessage p.container a {
  margin: 4px 4px 0 0;
  cursor: pointer;
  padding: .5em 1em;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.06);
  display: inline-block;
}

.pmessage p.container a.deletedmsg {
  background: #e20000;
  color: #ffffff;
}

.pmessage p.container a.savedmsg {
  background: #00aa09;
  color: #ffffff;
}

article.pmessage.post.newmsg {
  border-left: 5px solid #00b421;
}

.inbox.content {
  width: 96%;
}

form#msg-form {
  padding: 20px;
}

.closemsg, .closepopmsg {
  float: right;
  font-size: 26px;
  cursor: pointer;
}

.comments article.comment.highlight {
  background-color: rgba(244, 194, 10, 0.35);
}

#modpop, #formpop, #blockpop {
  position: fixed;
  z-index: 100;
  padding-top: 108px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

#formpop .modal-content, #modpop .modal-content, #blockpop .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 10px;
  box-shadow: 4px 4px 16px #555;
}

textarea#content {
  width: calc(100% - 300px);
}

#msgpop textarea#content {
  width: 100%;
}

form#msg-form h3 {
  margin-top: 0;
}

/* /MESSAGES STYLES */

/* SUBS PAGE */

.sortable td {
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .04);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .04);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .04);
}

.subs.content {
  width: 90%;
}

.subsentry .author {
  min-height: 40px;
}

.subsentry span.subcount, .subsentry p.container button {
  margin-right: 4px;
  cursor: pointer;
  padding: .5em 1em;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, .06);
}

td.subsentry.subsubscribed {
  border-left: 4px solid #00b421;
}

td.subsentry.blocked {
  border-left: 4px solid #b40000;
}

.sortable th svg {
  height: 16px;
}

/* /SUBS PAGE */

/* USER PAGE */

.uprofile-top {
  text-align: center;
}

.deleted-user {
  background-color: #FDD8D4;
}

.uprofile-top .score {
  font-weight: bold;
}

.pblock {
  display: inline-block;
  vertical-align: top;
}

.pblock.level {
  width: 120px;
  height: 120px;
  background-color: #d6dadc;
  border-radius: 50%;
  vertical-align: bottom;
}

.pblock.level .uprofile-level-box .mask, .pblock.level .uprofile-level-box .fill {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s;
  backface-visibility: hidden;
}

.pblock.level .uprofile-level-box .mask {
  clip: rect(0px, 120px, 120px, 60px);
}

.pblock.level .uprofile-level-box .fill {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: var(--primary-color);
}

.pblock.level .inset {
  width: 100px;
  height: 100px;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
  background-color: white;
  border-radius: 50%;
}

.pblock.level .inset .levelNo {
  line-height: 50px;
  font-size: 60px;
  font-weight: 600;
}

.uprofile-top p {
  margin-top: 3em;
}

#userBadges {
  padding: 0;
}

.statdiv {
  margin-left: 1em;
  margin-top: 1em;
}

li.profilebadge {
  list-style: none;
  display: inline-block;
  height: 48px;
  width: 48px;
  border-radius: 10px;
  margin: 4px;
  text-align: center;
}

.ucount {
  font-size: 34px;
  font-weight: bold;
}

.profilebadgeicon {
  font-size: 38px;
  padding: 0;
}

.profilebadgexp, .profilebadgename {
  font-size: 12px;
}

article.comment {
  padding: .8em 0 0 .5em;
  border-radius: 8px 0 0 8px;
  background-color: #fefefe;
  margin: 4px 0;
}

article.comment:nth-child(2n) {
  background-color: #f7f7f7;
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
}

.commtitle {
  margin: .3em;
}

.userrow {
  text-align: center;
}

.userrow h3 {
  text-align: left;
}

.userrow .pblock {
  text-align: left;
}

li.habitentry {
  text-align: left;
}

/* /USER PAGE*/

/* MISC */

ul#th-menu ul.left li {
  display: inline-block;
  margin-left: 4px;
}

.pure-menu a.logocont svg {
  height: 2.8em;
  margin-top: 0;
}

/* TABLE STYLES (from purecss) */

table {
  /* Remove spacing between table cells (from Normalize.css) */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
}

table td, table th {
  border-left: 1px solid #cbcbcb;
  /*  inner column border */
  font-size: inherit;
  margin: 0;
  overflow: visible;
  /*to make ths where the title is really long work*/
  padding: 0.5em 1em;
  /* cell padding */
}

table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}

table td {
  background-color: transparent;
}

/* /TABLE STYLES */

/* FORM STYLES */

#login-form h1, #post-form h1, #csub-form h1 {
  text-align: center;
  margin-top: 0;
}

#login-form, #post-form, #csub-form {
  border-radius: 8px;
  background-color: #f7f7f7;
  padding: 1em;
  margin-bottom: 2em;
  -webkit-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  -moz-box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, .1);
}

/* /FORM STYLES */

/* chat */

#cht-text {
  height: 1.8em;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.8em;
  color: #fff;
}

.glyphbutton .p-icon {
  margin-top: 2px;
}

#chtitle .glyphbutton {
  top: 0;
  float: right;
  margin-right: 1em;
}

.bigchat {
  height: 75vh;
}

#fixedchat {
  height: 70vh;
}

#chbott-fixed {
  margin-top: .3em;
}

#chbott-fixed #chsend {
  border: 1px solid;
}

#chpop {
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.75);
  border: none;
  width: 25%;
  position: fixed;
  right: 1em;
  bottom: 0;
  background: #eee;
  border-radius: 2px 2px 0 0;
  /*max-height: 20em;*/
  height: 50%;
}

#chbott {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3em;
  border-top: 1px solid #666;
}

#chstatus {
  color: #555;
  height: 1.3em;
  font-size: smaller;
  font-style: italic;
  padding-left: 0.5em;
}

#chsend {
  border: none;
  width: 100%;
  height: 1.7em;
  padding-left: 5px;
}

#chcont {
  border-bottom: solid 1px #bbb;
  margin-left: 2px;
  height: calc(100% - 5.5em);
}

#chtitle {
  background: var(--primary-color);
  font-size: smaller;
  height: 1.8em;
  padding-top: .2em;
  padding-left: .5em;
  cursor: pointer;
}

#chtitle a {
  color: #fff;
}

#chtitle:hover {
  background: var(--primary-highlight);
}

#chcont {
  color: #111;
  font-family: monospace;
  overflow-y: scroll;
  overflow-x: hidden;
}

.msguser {
  padding-right: 5px;
  color: var(--primary-highlight);
}

#chcont::-webkit-scrollbar {
  width: 4px;
  background: #555;
  z-index: -1;
}

#chcont::-webkit-scrollbar-thumb {
  background: rgb(16, 16, 16);
}

.msg-hl {
  background-color: #d7d7d7;
}

.msg-ac {
  font-style: italic;
}

/* chat timestamps */
.msgtime {
	color: #808080;
	font-size: 12px;
}

/* chat text format */

.irc-underline {
  text-decoration: underline;
}

.irc-italic {
  font-style: italic;
}

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

.irc-fg0 {
  color: #ccc
}

.irc-fg1 {
  color: #000
}

.irc-fg2 {
  color: #3535b3
}

.irc-fg3 {
  color: #2a8c2a
}

.irc-fg4 {
  color: #c33b3b
}

.irc-fg5 {
  color: #c73232
}

.irc-fg6 {
  color: #80267f
}

.irc-fg7 {
  color: #66361f
}

.irc-fg8 {
  color: #d9a641
}

.irc-fg9 {
  color: #3dcc3d
}

.irc-fg10 {
  color: #195555
}

.irc-fg11 {
  color: #2e8c74
}

.irc-fg12 {
  color: #4545e6
}

.irc-fg13 {
  color: #b037b0
}

.irc-fg14 {
  color: #4c4c4c
}

.irc-fg15 {
  color: #959595
}

.irc-bg0 {
  background-color: #ccc
}

.irc-bg1 {
  background-color: #000
}

.irc-bg2 {
  background-color: #3535b3
}

.irc-bg3 {
  background-color: #2a8c2a
}

.irc-bg4 {
  background-color: #c33b3b
}

.irc-bg5 {
  background-color: #c73232
}

.irc-bg6 {
  background-color: #80267f
}

.irc-bg7 {
  background-color: #66361f
}

.irc-bg8 {
  background-color: #d9a641
}

.irc-bg9 {
  background-color: #3dcc3d
}

.irc-bg10 {
  background-color: #195555
}

.irc-bg11 {
  background-color: #2e8c74
}

.irc-bg12 {
  background-color: #4545e6
}

.irc-bg13 {
  background-color: #b037b0
}

.irc-bg14 {
  background-color: #4c4c4c
}

.irc-bg15 {
  background-color: #959595
}

/* Poll styles */

.poll-pbar {
  border: 1px solid #ccc;
  width: 70%;
  margin: 0 5px 2px 0;
  padding: 1px;
  vertical-align: middle;
  display: inline-block;
  height: 1.5em;
  background: white;
}

.poll-space .poll-vote, .poll-space .poll-votes {
  vertical-align: middle;
  display: inline-block;
}

.poll-pbar>div {
  background-color: #526a7d;
  height: 1.25em;
}

.poll-pbar.poll-voted>div {
  background-color: var(--primary-color);
}

.poll-pbar.poll-voted {
  border-color: var(--primary-highlight);
}

/* user uploads page */

.uploads.content {
  max-width: 640px;
}

.uploaditem {
  float: left;
  width: 120px;
  height: 140px;
  border: 1px solid rgba(85, 85, 85, 0.25);
  padding: 10px;
  text-align: center;
}

.uploadlinks {
  padding: 4px;
}

.uploadlink {
  margin-top: 4px;
}

.uploadthumb {
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 4px;
}

/* admin */

tr.deletedrow, .deletedpost, .deletedcomment {
  background: hsla(0, 100%, 51%, 0.2)!important;
}

a[href="#spoiler"]:hover, body.dark a[href="#spoiler"]:hover {
  color: #fff
}

spoiler:not(.shown) a {
  pointer-events: none;
  color: #111;
}

spoiler:not(.shown) {
  color: #111;
  background-color: #111;
  border-radius: 3px;
  user-select: none;
}


spoiler {
  transition: background-color 400ms linear;
}

a[href="#toodamncool"] {
  animation: rb3 4s infinite;
  font-weight: 900;
}

@keyframes rb3 {
  20% {
    color: red;
  }
  40% {
    color: yellow;
  }
  60% {
    color: green;
  }
  80% {
    color: blue;
  }
  100% {
    color: orange;
  }
}

.expandotxt, .post-content-container, .commblock .content {
  word-wrap: break-word;
}

.post-content-container img, .comments .content img {
  max-width: 100%;
}

.expando-master {
  display: block;
  margin-top: 0.7em;
}

.replybox {
  margin-bottom: 1em;
}

.motto {
  z-index: 20;
  bottom: 0;
  position: absolute;
  left: 4em;
  color: white;
  font-size: smaller;
}

#logocont {
  z-index: -1;
  position: absolute;
}

.admin_alert {
  background-color: red;
  color: white;
  top: 0;
  position: fixed;
  width: 100%;
  display: block;
  height: 1.5em;
  font-size: 1.1em;
  text-align: center;
  line-height: 1.5em;
  z-index: 150;
}

.body_admin {
  margin-top: 1.5em;
}

.admin_alert form {
  display: inline-block;
}

.btn_link {
  background: none;
  border: none;
  padding: 0;
  color: #00419d;
  font: inherit;
  text-decoration: underline;
}

/* topbar settings page */

.subsort_item {
  cursor: move;
  padding: 10px 40px;
  width: 32em;
  background: rgba(0, 0, 0, .1)
}

#subsort {
  list-style: none;
}

.bot-tag {
  border-radius: 2px;
  border: 1px solid #afa8a8;
  padding: 1px 3px;
  background: #eee;
  color: #5d5454;
}

.toggledark {
  cursor: pointer;
}

#ban-user-form .date-picker-future.input {
  display: none;
}

.invitecodes .expired {
  color: gray;
  text-decoration: line-through;
}

td.close-report-button {
  text-align: center;
}

a.close-report {
  cursor: pointer;
}

.helper-text {
  font-style: italic;
  color: gray;
}

.mod-dash-subs {
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  max-width: 800px;
}

.mod-dash-sub {
  margin: 10px;
}

@media (min-width: 860px) {
  .mod.report.content {
    min-width: 650px;
  }
}

.mod.report.close.buttons button,
.mod .user-actions .pure-button {
    margin: 5px;
    white-space: normal;
    height: 90%;
}

.mod button.disabled {
  background-color: gray;
  pointer-events: none;
}

.mod.report.details {
  margin: 20px auto;
  width: 100%;
}

.report-details-item .label {
  font-weight: bold;
}

.mod.report.preview {
  max-width: 600px;
}

.mod.report.preview .preview-text-container {
  border-left: 3px solid gray;
  margin: 10px;
}

.mod.report.preview .preview-text-container .preview-text {
  background-color: #f7f7f7;
  padding: 0px 10px 10px 10px;
}

.mod.report.preview .preview-text-container.deleted {
  background-color: #FDD8D4;
}

.mod.report.preview .preview-text-container.deleted.post-content-container {
  background-color: #FDD8D4;
}

.mod.report.preview .preview-meta-data div {
    color: gray;
    margin-top: 5px;
}

.mod.report.preview .preview-meta-data a {
    font-weight: bold;
}

.mod-sidebar.header {
  text-align: center;
}

div.post.admin>div>div>a.authorlink {
  display: inline-block;
  background-color: var(--primary-color);
  color: #FDD8D4;
  border-radius: 2px;
  padding: .15em;
}

div.post.mod>div>div>a.authorlink {
  display: inline-block;
  background-color: green;
  color: #FDD8D4;
  border-radius: 2px;
  padding: .15em;
}

article.text-post.comment.admin>div>div>div>a.poster {
  display: inline-block;
  background-color: var(--primary-color);
  color: #FDD8D4;
  border-radius: 2px;
  padding: .15em;
}

article.text-post.comment.mod>div>div>div>a.poster {
  display: inline-block;
  background-color: green;
  color: #FDD8D4;
  border-radius: 2px;
  padding: .15em;
}

article.text-post.comment.deleted {
  background-color: #FDD8D4;
}

.post-content-container.deleted {
  background-color: #FDD8D4;
}

.postbar.post.deleted {
  background-color: #FDD8D4;
}

.poll-space.deleted {
  background-color: #FDD8D4;
}

.uploaditem.deleted {
  background-color: #FDD8D4;
}

.post-history-controls {
  margin: 1em 1em 0 1em;
}

.title-history-controls {
  margin: 1em 0;
}

.title-history-controls button {
  font-size: 1em;
}

.browse-history:focus {
  outline: none;
}

.browse-history.disabled:focus {
  outline: lightgray none;
}

.browse-history {
  border-radius: 2px;
  cursor: pointer;
  box-shadow: -2px 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.browse-history.disabled {
  cursor: not-allowed;
  pointer-events: none;
  border-color: lightgray;
  color: lightgray;
}

.wholepost .old.history {
  color: gray;
}

.wholepost .history-meta {
  color: gray;
  font-size: smaller;
}

.links a.post-open-reports {
  color: red;
  font-weight: bold;
}

.removebanneddomain {
  float: right;
  margin-left: 10px;
}

.loginlinklist {
  list-style: none;
  line-height: 1.4;
  padding: 0;
  margin-bottom: 0;
}

.mw-75 {
  min-width: 75%;
}

.st-flair {
  display: inline-block;
  margin-left: 1em;
  margin-top: 5px;
}

#sortby {
  background-color: lightgray;
  font-size: smaller;
  text-align: center;
  cursor: pointer;
}

.pure-menu-children {
  min-width: 100%;
  border: 1px solid #ccc;
}

.invitecode-users {
  list-style: none;
  margin: 0;
  padding: 0;
}

/** helpers **/
.left {
    text-align: left;
}

.inline {
  display: inline-block;
}

.gray {
  color: gray
}

.red {
  color: red
}

.small {
  font-size: small
}

.smaller {
  font-size: smaller
}

.attention {
  color: red;
  font-size: large;
  font-weight: bold;
  text-align: center;
}

.admin-config {
  table-layout: fixed;
  width: 95%;
}

.admin-config-name {
  width: 35%;
}

.admin-config-value {
  width: 60%;
}

.admin-config-action {
  width: 5%;
}

.admin-config-doc-toggle {
  font-size: smallest;
  padding-right: 5px;
  cursor: pointer;
}

.admin-config-edit-form input {
  width: 100%;
}

.admin-config-edit {
  fill:  #00419d;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.admin-config-edit:hover {
  fill: #64a6ca;
}

.ignore-form {
    max-width: 100%;
    display: inline-block;
    margin-left: 1em;
}

.ignore-form-select {
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}

/* Moderator reports */

#container.mod-container {
    padding-right: 0.5em;
}

.mod-table {
    padding-inline-start: 0;
    width: 100%;
    border: none;
}

.mod-table .header {
    color: #000;
    font-weight: bold;
    background-color: #e0e0e0;
    border: 1px solid #cbcbcb;
    padding: 0.5em;
    vertical-align: text-bottom;
}

li.mod-table-header {
    margin-top: 0px;
    border: none;
}

.mod-table .elem, .mod-table .close-elem, .mod-table .last-elem {
    background-color: #f7f7f7;
    border: 1px solid #cbcbcb;
    padding: 0.5em;
    vertical-align: bottom;
}

.mod-table .header, .mod-table .close-elem {
    display: none;
}

.mod-table .elem::before, .mod-table .last-elem::before {
    font-weight: bold;
    padding: 0.5em;
    content: attr(data-name);
}

.mod-table .close-button {
    display: block;
    margin-top: 2px;
    margin-bottom: 15px;
}

.mod-table .last-elem {
    margin-bottom: 15px;
}

@media screen and (min-width: 48em) {
    .mod-table, li.mod-table-header {
        border: 1px solid #cbcbcb;
    }

    .mod-table .header, .mod-table .close-elem {
        display: block;
    }

    .mod-table .elem::before, .mod-table .last-elem::before {
        padding: 0em;
        content: "";
    }

    .mod-table .close-button {
        display: none;
    }

    .mod-table .last-elem {
        margin-bottom: 0px;
    }
}


/* Fix Hydrogen shenanigans */
:root {
    font-size: unset !important;
}

.RoomView {
  height: calc(100% - 1.8em);
  font-size: 14px;
}

#chpop.hydrogen {
  font-size: unset;
}
#chpop.hydrogen .menu button {
  font-size: 15px
}

#chpop.hydrogen .popupContainer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90000;
}

.logocont .logo {
  background: none;
}

#chloading {
  padding: 1em;
}

/* dark mode styles */

/** Logo styles. :/ **/
body.dark .th-l-stroke {
    stroke: var(--dark-primary-color);
}

body.dark .th-l-fill {
    fill: var(--dark-primary-color);
}

body.dark code, body.dark pre{
  background: #161616;
}

body.dark .profilebadge path:not(.nocolor) {
  fill: #686868;
}

body.dark .th-toggle .bar{
  background-color: #666;
}

body.dark {
  background-color: #0a0a0a;
  color: #7d7d7d;
}

body.dark a {
  color: #526a7d;
}

body.dark div.author a {
  color: var(--dark-links-a);
}

body.dark div.author a.authorlink{
  color: #526a7d;
}

body.dark .content,
body.dark #container2 {
  color: #777;
}

body.dark #toggledark i {
    color: #ff0;
}
body.dark .postflair {
  background-color: #000;
  color: #7d7d7d;
  border: 1px solid #1d1d1d;
}
body.dark .user_flair {
  background-color: #0d0d0d;
  border: 1px solid #1d1d1d;
  color: #888;
}
/* Hot, Top, New, Domain */

body.dark div#sortbuttons span {
    color: #ddd;
    background-color: #101010;
}

body.dark div#sortbuttons {
  color: #7b4a3f;
}

body.dark a:hover,
body.dark #sortbuttons a:hover{
  color: #d17262;
}

body.dark .post .domain a,
body.dark .post .domain {
    color: #555;
}

/* Header */

body.dark .th-navbar {
  background-color: #000;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.75);
}

body.dark .th-navbar.open {
  background-color: #000;
  -webkit-box-shadow: 0 2px 3px 0 var(--dark-shadow);
  -moz-box-shadow: 0 2px 3px 0 var(--dark-shadow);
  box-shadow: 0 2px 3px 0 var(--dark-shadow);
}

/* Sub bar */

body.dark .th-subbar{
  background-color: #000;
  border-bottom: 1px solid var(--dark-shadow);
}

body.dark .th-subbar ul li {
  color:#cdcdcd;
}

body.dark .th-subbar a {
  color: #ccc;
}

body.dark .th-subbar a:hover {
  color: var(--dark-primary-color);
}

/* Posts */

body.dark .comments article.comment.highlight{
  background-color: rgba(64, 64, 61, 0.35);
}
body.dark .post:nth-child(2n) {
  background-color: #0d0d0d;
    -webkit-box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.4);
    -moz-box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.4);
    box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.4);

}

body.dark .votebuttons {
  fill: #7d7d7d;
  color: #7d7d7d;
}

body.dark .post .title {
  color: #ccc;
}

body.dark .post a.title:hover {
  color: var(--dark-primary-color);
}

body.dark .post .title:visited {
  color: var(--dark-links-visited);
  }

body.dark .thumbnail .placeholder svg path {
    fill: #555;
}

body.dark .p-icon[data-icon="exclaim"] path {
    fill: var(--dark-primary-color);
}

/* Buttons */

body.dark .pure-button.button-transparent, body.dark .pure-button.button-transparent:hover {
    background: none;
}

body.dark .button-secondary,
body.dark .pure-button {
  background: rgba(51, 51, 51, 0.5);
  color: #ddd;
}

body.dark .inboxside .button-secondary {
    background: rgba(51, 51, 51, 0.2);
}

body.dark .button-secondary:hover,
body.dark .pure-button:hover {
  background: rgba(51, 51, 51, 0.8);
  color: #ffffff;
}

body.dark .pure-button-primary {
  background-color: #161616;
}

body.dark a#nextp,
body.dark a#prevp {
  color: #c0c0c0;
}

body.dark a#nextp:hover,
body.dark a#prevp:hover {
  color: #ffffff;
}

body.dark .pure-button.button-warning {
  background: #ab1010;
}


/* Expandos */

body.dark .expando {
    background-color: #0a0a0a;
}

body.dark .post .expandotxt,
body.dark .post:nth-child(2n) .expandotxt {
    background-color: #202020;
    color: #aaa;
}

body.dark input[type="text"]:not(.numInput),
body.dark input[type="email"],
body.dark input[type="url"],
body.dark textarea,
body.dark input[type="password"],
body.dark select {
  color: #ffffff;
  background-color: #252525;
  box-shadow: inset 0 1px 3px #303030;
  border-color: #444;
}

body.dark textarea {
  background-color: #000;
}

body.dark{
  color: #666;
}

body.dark .post-content-container, body.dark .poll-space{
  background: #111;
}
body.dark .editbtns{
  border-color: #444;
}

body.dark .editbtns div{
  border-color: #292929;
}

body.dark .editbtns svg path{
  fill: #666;
}

body.dark input[type="text"]::placeholder,
body.dark input[type="email"]::placeholder,
body.dark input[type="url"]::placeholder,
body.dark textarea::placeholder,
body.dark input[type="password"]::placeholder {
  color: #555;
}

body.dark input#buyamount ~ b {
    color: #c2c2c2;
}

/* Sidebar */
body.dark .sidebar{
  background-color: #0d0d0d;
  border-left: solid 1px #000;
}

body.dark .sidebar h4 {
	color: #ccc;
}

body.dark input[type="search"] {
  background-color: #000;
  color: #fff;
  border-color: black;
}

body.dark .flairpicker select {
  background-color: #000;
  color: #fff;
  border-color: black;
}

body.dark .sidebar ul.top5 li a {
    color: var(--dark-links-a);
}

body.dark hr {
   border-bottom: 2px dashed #545454;
}
/* /Sidebar */

/* MESSAGES STYLES */
body.dark .pmessage.post p.title {
    border-bottom: 1px solid #343434;
}
body.dark .pmessage.post {
    background-color: #000000;
}

body.dark .pmessage.post p.container a{
    background-color: rgba(0, 0, 0, 0.2);
}

body.dark .pmessage.post p.container a:hover{
    background-color: rgba(0, 0, 0, 0.5);
    color: #b66f5f;
}

body.dark .pmessage p.container a.deletedmsg {
    background-color: rgba(226, 0, 0, 0.3);
    color: #a8a8a8;
}

body.dark .pmessage p.container a.savedmsg {
    background-color: rgba(0, 170, 9, 0.3);
    color: #a8a8a8;
}

body.dark .pmessage.post:nth-child(2n) {
    background-color: #0d0d0d;
}

body.dark .modal-content,
body.dark #formpop .modal-content {
    background-color: #111;
    border: 1px solid #4d4848;
    box-shadow: 4px 4px 16px #1d1d1d;
}
body.dark .modal-content h3,
body.dark #formpop .modal-content h3,
body.dark #formpop .modal-content p {
    color: #cccccc;
}
body.dark .modal-content .closemsg,
body.dark #formpop .modal-content .closemsg {
    color: #999;
}
/* /MESSAGES STYLES */

/* SUBS PAGE */
body.dark .subsentry svg {
    fill: #fff;
}
body.dark .sbm-icon svg, body.dark .i-icon svg {
    fill: #fff;
}
/* /SUBS PAGE */

/* USER PAGE */
body.dark .pblock.level .inset{
  background-color: #0a0a0a;
}

body.dark .pblock.level{
  background-color: #474747;
}

body.dark .uprofile.content {
    border: 2px solid #474747;
    background: rgba(0, 0, 0, 0.9);
}
body.dark article.comment {
    background-color: #101010;
}
body.dark article.comment:nth-child(2n) {
    background-color: #0d0d0d;
}
/* /USER PAGE */

/* misc */
body.dark span.mailcount {
  background: red;
}
body.dark table td, body.dark table th, body.dark table{
  border-color: #4e4e4e;
}
body.dark table thead{
  background-color: #5c5c5c;
}
body.dark path[stroke="#ff6d15"] {
    stroke: #7b4a3f;
}
body.dark path[fill="#ff6d15"] {
    fill: #7b4a3f;
}
body.dark .mod2-inv{background-color: #060606;}

body.dank div:not(.pure-menu):not(.cw-brand):not(#menu) {
    filter: grayscale(100%);
}

body.dank::-webkit-scrollbar{
     background: #555;
}

body.dank .th-l-stroke {animation: rb 1s infinite; }
body.dank .th-l-fill {animation: rb2 1s infinite; }
@keyframes rb2{20%{fill: red;}40%{fill: yellow;}60%{fill: green;}80%{fill: blue;}100%{fill: orange;} }
@keyframes rb{20%{stroke: red;}40%{stroke: yellow;}60%{stroke: green;}80%{stroke: blue;}100%{stroke: orange;}}

/* FORM STYLES */

body.dark #login-form, body.dark #post-form, body.dark #csub-form {
  background-color: #101010;
}

/* /FORM STYLES */

/* chat */
body.dark #chbott-fixed #chsend{
  border: 1px solid #333;
}
body.dark #chtitle:hover{
  color: #888;
  background: #000;
}
body.dark #chtitle {
  background: #0d0d0d;
  color: #ccc;
}
body.dark #chpop {
  background: #000;
  border-top: 1px solid var(--dark-primary-color);
  border-left: 1px solid var(--dark-primary-color);
  border-right: 1px solid var(--dark-primary-color);
}
body.dark #chcont {
  border-bottom: none;
  color: #ccc;
}

body.dark #chsend {
    background-color: #0d0d0d;
}

body.dark .msg-hl{
  background-color: #111;
}


/* other stuff? */

body.dark a[href="#spoiler"]{
  background-color: #050505;
  color: #050505
}

body.dark .cw-items a{
  color: #fff;
}

body.dark .motto{
  color: #ccc;
}

body.dark .admin_alert{
  background-color: #bd0101;
  color: #dedede;
}

body.dark .admin_alert .btn_link{
  color: #1b006f;
}

body.dark .editbar path {fill: #d25309;}

body.dark #hiddensubs{
  background: #000;
  filter: drop-shadow(-20px 20px 18px #000);
}

body.dark #hiddensubs li:hover{
  background-color: #0a0a0a;
}

body.dark thead a{
  color: #231411
}

body.dark .alldaposts .links a.comments{
  color: #526a7d;
}

body.dark .alldaposts .links a{
  color: #797979;
}


/* poll */
body.dark .poll-pbar {
  background-color: #4a4a4a;
  border-color: #656565;
}

/* modals */
body.dark .tingle-modal-box{
  background-color: #171717;
}

body.dark .bot-tag{
  border: 1px solid #2f2f2f;
  background: #111;
  color: #7d7d7d;
}

/* deleted comments and posts view for mods and admins */
body.dark .mod.report.preview .preview-text-container.deleted {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .mod.report.preview .preview-text-container.deleted.post-content-container {
  background-color: #171717;
  border: 1px solid red;
}

body.dark article.text-post.comment.deleted {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .post-content-container.deleted {
  background-color: #171717;
}

body.dark .postbar.post.deleted {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .poll-space.deleted {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .uploaditem.deleted {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .deleted-user {
  background-color: #171717;
  border: 1px solid red;
}

body.dark .browse-history {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: #171717;
  border: 1px solid #d94f00;
  color: lightgray;
}

body.dark .browse-history.disabled {
  border-color: #333;
  color: #171717;
}

body.dark .browse-history.disabled:focus {
    outline: #333 none;
}

body.dark .browse-history:focus {
    outline: #d94f00 none;
}

body.dark .links a.post-open-reports {
    color: #d30404;
}

body.dark #sortby{
    background: #171717;
  color: #ddd;
  font-size: smaller;
  text-align: center;
  cursor: pointer;
}

body.dark .pure-menu-item a{
  background: #171717;
  color: #fff
}

body.dark .pure-menu-item a:hover{
  background: #666;
  color: #d17262;
}

body.dark .pure-menu-children {
    border-color: #333;
}

body.dark .popup {
    background-color: #121212;
    border-color: #0f0f0f;
}

body.dark .selflair, body.dark .submitflair {
    background-color: #333;
    color: #777;
    border-color: #222;
}

body.dark .submitflair.selected {
    color:#ddd;
    background-color: #161616;
    border-color: #666;
}

body.dark .submitflair:hover {
    background-color: #aaa;
}

body.dark .admin-config-edit {
    fill: #526a7d;
}

body.dark .admin-config-edit:hover {
    fill: #d17262;
}

body.dark .mod-table .header {
    border-color: #4e4e4e;
    background-color: #5c5c5c;
}

body.dark .mod-table,
body.dark .mod-table .header,
body.dark .mod-table .elem,
body.dark .mod-table .close-elem,
body.dark .mod-table .last-elem {
    border-color: #4e4e4e;
}

body.dark .mod-table .elem,
body.dark .mod-table .close-elem,
body.dark .mod-table .last-elem {
    background-color: #222;
}

body.dark .RoomView .Timeline_messageBody {
    color: #dddddd;
}

body.dark .RoomView .Timeline_messageOptions {
    background: #343434;
    border-color: #222;
    color: #eee;
}

body.dark .RoomView .MessageComposer_replyPreview {
    background-color: #070707;
    box-shadow: 0 0 5px #111;
}

body.dark .Timeline_messageReactions button, body.dark .Timeline_messageBody .pill {
    background-color: #333;
    color: #eee;
    border-color: #444;
}

body.dark .AnnouncementView>div {
    background-color: #333;
    color: #eee;
}

body.dark #chpop .menu {
    background-color: #222;
}

body.dark #chpop .menu .button, body.dark #chpop .menu .menu-item {
    color: #eee;
}

body.dark #chloading {
    color: #ddd;
}

/** You can add custom styles for your site here */


.autocomplete {
    background: white;
    z-index: 1000;
    font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(50, 50, 50, 0.6);
}

.autocomplete * {
    font: inherit;
}

.autocomplete > div {
    padding: 0 4px;
}

.autocomplete .group {
    background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
    background: #81ca91;
    cursor: pointer;
}