/*! 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); } } /*! Pickr 1.8.2 MIT | https://github.com/Simonwep/pickr */ .pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:0.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat center;background-size:0;transition:all 0.3s}.pickr .pcr-button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:'';top:0;left:0;height:100%;width:100%;transition:background 0.3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow 0.3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:0.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0s 0.3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);left:0;top:0}.pcr-app.visible{transition:opacity 0.3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:0.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:0.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all 0.15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,0.05);border-radius:0.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 0.2em}.pcr-app .pcr-interaction input{letter-spacing:0.07em;font-size:0.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all 0.15s;padding:0.45em 0.5em;margin-top:0.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all 0.2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme='nano']{width:14.25em;max-width:95vw}.pcr-app[data-theme='nano'] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme='nano'] .pcr-interaction{padding:0 .6em .6em .6em}.pcr-app[data-theme='nano'] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview{grid-area:2 / 1 / 4 / 1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette{grid-area:1 / 1 / 2 / 3;width:100%;height:100%;z-index:1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser{grid-area:2 / 2 / 2 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{grid-area:3 / 2 / 3 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{height:0.5em;margin:0 .6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url('data:image/svg+xml;utf8, ');background-size:100%, 0.25em} :root { /* The site's primary color. Used for sidebars, buttons and some icons on light mode. Also used by the color picker JS tool, multiple values hardcoded in Setcolor.js Phuks: #d94f00 */ --primary-color: #46586e; /* Used as box-shadow color */ --primary-shadow: #46586e; /* Post link colors */ /* Hover color for post links Phuks: #ff6d15 */ --post-link-hover: #848484; /** Color for visited links. Phuks: #d95204 */ --post-link-visited: #5c6c74; /* Used only in the chatbox at the moment Phuks: #b74500 */ --primary-highlight: #b1bbc9; /* 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(200, 5, 17); /* 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: #62758f; --button-primary-fg: #fff; /* Up/downvote colors */ --upvote-color: var(--primary-color); --downvote-color: black; /** --- Dark mode --- */ /* Primary dark-mode color. Mostly used for links hover color and the logo (if supported) Phuks: #ff6d15 */ --dark-primary-color: #4f5d66; /** Color for visited links Phuks: #d95204 **/ --dark-links-visited: #888; /* Secondary link color. Used for subs on post lists and for the sidebar Phuks: #ab4409 */ --dark-links-a: #526a7d; /** Box-shadow in dark mode */ --dark-shadow: #aa4509; } body { background-color: #fff; color: #000; } * { box-sizing: border-box; } abbr[title] { text-decoration: none; } .currentuserscore { color: #bbb; } .cw-brand { margin-left: .8em; } .content { word-wrap: break-word; margin-bottom: 5px; } code, pre { background: #f3f3f3; } pre { padding: .4em; overflow-x: auto; } code { padding: 1px; line-height: 1.4em; } .th-subbar ul li.editbar, blockquote p { margin: 0; } blockquote>p:not(:last-child) { margin-bottom: 1em; } blockquote { border-left: 3px solid #e7e7e7; margin: .3em 0 .3em 1em; padding: .3em 0 .3em .7em; color: #525252; } .post-content-container blockquote { background-color: #fafafa; color: #4f4f4f; } .cw-items form, .pure-control-group .markdown-editor, .pure-control-group .markdown-editor .editbtns { display: inline-block; } .editbtns div[data-icon=image] { transition: opacity .3s ease; } .announcement { padding: 3px; margin-right: 3px; position: relative; top: -1px; border-radius: 5px; color: #fff; background-color: var(--primary-color); font-size: small; } .mod2-inv { background-color: #eee; border: 1px solid gray; padding: 1em; } .th-navbar.open, .th-subnavbar.open { height: 145px; overflow: visible; } #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 .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); } #th-menu a.pure-menu-link, .cw-items a { color: #fff; } .pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover { background-color: initial; } .important { border: 2px dashed red; padding: 2px; text-align: center; } .div-error { display: none; } #th-menu a.pure-menu-link:hover, #th-menu li[active=true] a, #th-menu li[active] a { background-color: #3965a4; } .glyphbutton { display: inline-block; position: relative; top: 2px; margin-right: .25em; margin-left: .25em; } .button-transparent, .button-transparent:hover { background: 0 0; } .btn-rcancel { margin-left: 1em; } .separator { margin-left: .1em; margin-right: .25em; border-left: 1px #444 dotted; padding-top: 3px; } a { color: #293654d4; text-decoration: none; } .alldaposts .links a.comments:hover, a:hover { color: #64a6ca; } .footer { font-size: small; color: #5d5454; padding: 2em; } .center-container form h1, .footer { text-align: center; } .th-navbar { background-color: var(--primary-color); margin-bottom: 0; -webkit-font-smoothing: antialiased; padding: .4em 0 .4em .3em; transition: height .5s; position: relative; height: 64px; border-bottom: 1px solid #101010; } .pure-button-group .pure-button { border-right: none; } .pure-button-group .pure-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pure-button-group .pure-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid var(--primary-color); } .pure-g-menu .pure-button { background-color: #e6e6e6; border: 1px solid var(--primary-color); position: relative; z-index: 10; margin: 1px 0 0; font-family: verdana, arial, helvetica, sans-serif; color: #000; border-bottom: 1px solid #010101; } div#sortbuttons { display: block; width: max-content; position: relative; z-index: 150; margin-top: -27px; margin-left: -1px; } #center-container { background-color: #faf9f8; display: flex; align-items: center; justify-content: center; } #center-container, #center-container-uploads { z-index: 0; top: 5.1em; left: 0; bottom: 4em; width: 100%; } .uploads-table { width: auto; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.1); } .uploads-table td, .uploads-table th { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } .uploads-table th { background: #f4f4f4; font-weight: 700; } .uploads-table tbody tr:hover { background: #f9f9f9; } #center-container-savedcomments, #center-container-uploads, .upload-thumb { display: flex; align-items: center; justify-content: center; } .upload-thumb { width: 100px; height: 85px; overflow: hidden; } .upload-thumb img { max-width: 100%; max-height: 100%; } #center-container-savedcomments { background-color: #fff; z-index: 0; top: 5.1em; left: 0; bottom: 4em; width: 100%; } #container { padding-top: .5em; padding-left: .5em; padding-right: .5em; } .error { margin-top: 1em; padding: 5px; background-color: #f44336; color: #fff; margin-bottom: 15px; border-radius: 3px; } .error span, .message span, iframe { display: block; } .alert.div-error, .alert.div-message { color: #fff; margin: 6px; padding-top: .1em; padding-bottom: .1em; } .alert.div-error { background: #d92800; } .div-error span.closebtn, .div-message span.closebtn { margin: 4px; float: right; } .alert.div-error ul, .alert.div-message ul { padding-bottom: 10px; } .message { padding: 10px 5px; background-color: #faf9f8; text-align: center; font-weight: 700; } .div-message { display: none; } .alert.div-message { background: #ff4040; } #bottombar { height: 4em; width: 100%; position: absolute; bottom: 0; background: rgba(200,200,200,.5); z-index: 100; } #coords { margin: 1em 1em 0; display: block; } .c-color, .p-icon-color span { display: inline-block; position: relative; } #curr div, .c-color { margin-right: 10px; cursor: pointer; } .c-color { min-width: 32px; min-height: 32px; box-shadow: 2px 2px 5px 0 rgba(0,0,0,.75); } #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,.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 #000; background-color: transparent; box-sizing: content-box; pointer-events: none; will-change: transform; z-index: 100; } #curr div { height: 3em; border: 1px solid #aaa; border-radius: 2px; } #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: #fff; } .p-icon { margin-top: 5px; width: 16px; height: 16px; display: block; } .p-icon-color span { margin-top: 5px; width: 18px; height: 18px; top: 1px; right: 1px; pointer-events: none; } .tx-icon { display: inline-flex; align-self: center; } .expando svg, .tx-icon svg { height: 1em; width: 1em; top: .15em; position: relative; } .inboxside .p-icon, form#msg-form h3 { margin-top: 0; } .content .hasmail path, .inboxside .p-icon path, .p-icon[data-icon=exclaim] path { fill: var(--primary-color); } .i-icon { width: 16px; height: 16px; display: inline-block; } .p-icon path { fill: #e3e3e3; } .icon { margin-top: 4px; width: 22px; height: 22px; margin-left: auto; margin-right: auto; display: block; } .hasmail i { color: #101010; } .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; } #filetable, #pbar, #upload-input, .hide, .pure-form input[type=text].hide, .pure-form select.hide { display: none; } #filetable { background-color: #faf9f8; padding: 1em; margin-bottom: 10px; margin-top: 10px; } h1 { line-height: 1em; } .post { min-height: 70px; padding: .6em .1em .6em .2em; } .post-heading { width: -moz-fit-content; width: fit-content; } .post-heading h1 { font-size: medium; margin: 0; font-weight: 400; display: inline-block; } .post .title { color: #292828e0; text-decoration: none; line-height: 1.5rem; font-size: 18px; word-wrap: break-word; } .post .title:visited { color: var(--post-link-visited); } .post a.title:hover { color: var(--post-link-hover); } .post a.title:visited:hover { color: #5d5d5d; } .misctainer { float: left; margin: 0px 3px 0px 1px; } .links a, .pbody, a.slink { cursor: pointer; user-select: none; } .pbody { background: #fff; display: inline-block; width: calc(100% - 130px); padding: 7px 10px 5px 10px; border: 1px solid #dfdfdf; border-radius: 3px; } .pbody:hover { background: #f9f9f9; transition: all 50ms ease-out; } .post:after { content: ""; display: table; clear: both; } .expando, .p-icon[data-icon=exclaim] { display: inline-block; top: 6px; position: relative; } .expando { 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: 8.5px; } .sbpostauthor { padding: 6px; margin: 0 4px 10px 3px; border: 1px solid #cfc7c7; border-radius: 3px; background: #fff; font-size: 14px; } .author .expando { top: 0; vertical-align: middle; } .expando:hover { background-color: #cbc9c9; } .pure-u-1.pure-u-md-13-24.pastebin { width: 80%; } iframe { border: 0; } .iframewrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .iframewrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .expandotxt iframe, .expandotxt img, .expandotxt video { max-width: 100%; } .resize-handle { text-align: right; cursor: nwse-resize; } .resize-handle .i-icon { width: 24px; height: 24px; display: none; } .indexdomain { color: #25b2dce8; } .indexdomain:hover { color: #83d4f1; } .post .domain, .post .domain a { color: #25b2dce8; font-size: .7em; transition: all .15s ease; } .post .domain:hover { color: #83d4f1; } .post .author { font-size: .7em; color: #888; margin-top: .4em; width: -moz-fit-content; width: fit-content; line-height: 1.7em; } .post .thumbnail { width: 70px; height: 70px; text-align: center; position: relative; right: 7px; } .post .thumbnail img { max-width: 100%; position: relative; top: 50%; transform: translateY(-50%); border: 1px solid #555; } .post .thumbnail:hover { -webkit-filter: opacity(85%); filter: opacity(85%); } .c-downvote, .c-upvote, .downvote, .upvote { 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); } .votebuttons { display: inline-block; height: 100%; width: 40px; max-height: 70px; padding: .15em .2em 0; margin-right: 3px; float: left; } .score { font-size: 17px; color: #505050; padding-right: 2px; margin: 5px 0; text-align: center; letter-spacing: normal; } .score.archived { padding-top: 20px; padding-left: 3px; padding-right: 5px; } .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; } .expando .icon svg { width: 16px; height: 16px; top: -5px; position: relative; } .author .expando .icon svg { top: -2.8px; } .votebuttons svg { width: 16px; height: 16px; margin: 0; } .expandotxt { padding: .25em .7em 1em 0; position: relative; } .expando-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio for YT embeds*/ } .expando-wrapper:has(.lite-twitter) { padding-bottom: 0; } .thumbnail .placeholder svg path { fill: #888; } .pure-menu a svg { height: 4em; margin: 0 0 4px; } .thumbnail .placeholder { width: 50px; height: 50px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } a#nextp, a#prevp { color: #fff; float: right; margin: 1em 2em; border-radius: 4px; } a#prevp { float: left; } .links { margin: 1px 0 0 .45em; padding: 0; } .links a, a.slink { color: #12619c; font-weight: 700; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; } #flair, .subinfo, .subs { text-align: center; } .subs { margin-bottom: .6em; } .subname { width: fit-content; } .links a { position: relative; right: 12px; font-size: .7em; color: #888; margin-left: .5em; } .links li, .private { display: inline-block; } .links li { padding: 0 .25em; } .private { vertical-align: super; background-color: transparent; font-size: 12px; line-height: 12px; margin-right: .3em; } .nsfw, .private { padding: 3px; border-radius: 4px; color: #e22; border: 1px solid #e22; } .activity-tag, .live-activity-tag, .nsfw { display: inline-block; background-color: transparent; font-size: 12px; line-height: 12px; margin-right: .3em; } .live-activity-tag { padding: 3px; border-radius: 4px; color: var(--primary-color); vertical-align: bottom; border: 1px solid var(--primary-color); } .activity-tag { color: #888; } .nsfw-blur { -webkit-filter: blur(4px); filter: blur(4px); cursor: pointer; } .block-blur, .block-blur.title, a.block-blur.title:visited { color: #a61515; -webkit-filter: blur(4px); filter: blur(4px); cursor: pointer; } img.block-blur, img.nsfw-blur { -webkit-filter: blur(8px); filter: blur(8px); } .stickyposts { border-bottom: 1px solid #efefef; } .stickyposts .links a.comments { color: #0f5387; } .stick { color: #0ea34e; } .stickytitle { color: #0ea34e !important; font-weight: 700; } .postinfo { display: inline-block; width: 75%; } .popup { width: 50%; position: absolute; top: 5em; left: 25%; background-color: #fff; padding: 1em; border: 1px solid gray; z-index: 100; } .postflair, .selflair { border: 1px solid #7b7b7b; color: #000; background-color: #eee; line-height: 2em; white-space: nowrap; cursor: pointer; } .pollflair, .postflair, .selflair, .submitflair { padding: 3px; border-radius: 5px; font-size: small; } .pbody .postflair { top: -1px; position: relative; font-size: 12px; } .submitflair { border: 1px solid #7b7b7b; color: #000; background-color: #eee; white-space: nowrap; cursor: pointer; margin-right: .3em; margin-bottom: .3em; line-height: 1em; } #flair { padding-bottom: .2em; } #flair a { font-size: small; white-space: pre; } .submitflair.selected { color: #fff !important; background-color: #101010 !important; } .submitflair.selected:hover { background-color: gray !important; } #flair-container { float: right; width: calc(100% - 11em); display: flex; flex-wrap: wrap; } .pollflair { margin: 0px 3px 0px 0px; color: #fff; background-color: #6a6c6e; vertical-align: middle; } .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 !important; } .commenthead { font-size: 10px; color: #888; } .poster { font-weight: 700; } .poster .op-tag { color: #24a0ed; } .c-downvote { margin-top: 2px; } .red-confirm { color: red; font-size: .8em; margin-right: 7px; } .red-confirm a { position: initial; margin-right: 7px; margin-left: 2px; cursor: pointer; } .comment-form { margin: 1em 1em 0; } .comment-form button { margin-top: .7em; } #ban-user-form .date-picker-future.input, #post-source, .alertbox { display: none; } #logout button, .comments, .comments-locked { margin-left: 1em; } .recent { margin-left: 0; } .norecentposts { margin-left: 19px; } .nosavedposts { margin-left: 1.2em; } .allcomments { font-size: 16px; font-weight: 700; position: relative; top: 3px; left: 1px; } .allcmnts { border-bottom: 1px dotted gray; padding-bottom: 5px; margin-bottom: 40px; } .sortcomments { display: inline-block; position: relative; top: 50px; right: 13px; } .loadsibling { font-size: smaller; } #hiddensubs, .canclose .closemsg, span.mailcount { position: absolute; top: 0; right: 0; } .canclose { position: relative; } .cmpreview { margin-top: .7em; margin-bottom: .4em; } .cpreview-content { display: inline-grid; } .votecomment { display: inline-block; float: left; width: 1.3em; text-align: center; margin-right: 0; margin-top: .2em; } .downvote svg, .upvote svg { fill: #888; block-size: .6em; } .c-downvote svg, .c-upvote svg { fill: #b6b6b6; block-size: .6em; } .bottombar a, .togglecomment { cursor: pointer; } .commblock { display: inline-block; width: calc(100% - 2em); font-family: verdana, arial, sans-serif; font-size: 13.5px; line-height: normal; color: #222; background: #fff; margin: 0; padding: 5px 10px 5px 5px; } .commblock .content { max-width: 60em; } .commblock p { margin: 5px 0; line-height: 1.4285714285714286em; } .button-xsmall { font-size: 70%; } .button-success { background: var(--button-success-bg); } .button-error { background: var(--button-error-bg); color: #fff; } .button-warning { background: var(--button-warning-bg); } .button-secondary { color: #fff; background: var(--button-secondary-bg); } .button-secondary:hover { background-color: #282828; } #logout button { font-size: 14px; } span.mailcount { top: 12px; right: -8px; line-height: 1em; min-width: 1em; border-radius: 1em; background: #000; font-size: small; text-align: center; padding: .05em .12em; margin-right: 3px; } .admin_alert form, .th-subbar ul, .th-subbar ul li, span.hasmail, span.mailcount { display: inline-block; } .dropdown-toggle.moremenu { color: #fff; text-align: center; font-size: smaller; cursor: pointer; } #hiddensubs { top: 2em; 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,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -webkit-background-clip: padding-box; background-clip: padding-box; filter: drop-shadow(-20px 20px 18px #313131); flex-flow: column wrap; flex-wrap: wrap; align-content: flex-start; max-height: 60%; } .dropdown-toggle.moremenu path { fill: #fff; } #hiddensubs li:hover { background-color: #000; } #hiddensubs li { display: block; padding: 0 5px; font-variant: small-caps; font-size: larger; } #hiddensubs li a { color: var(--primary-color); width: 100%; display: block; } #subsdropdown { width: 4em; display: inline-block; margin: .1em .1em .2em; vertical-align: super; } .th-subbar { background-color: #101010; border-bottom: 1px solid #101010; font-variant: small-caps; overflow: hidden; height: 26.5px; } .th-subbar ul { margin: .1em .1em 0; padding: 0; white-space: nowrap; width: calc(100% - 5em); overflow: hidden; } .th-subbar ul li { color: #fff; margin: 0 5px; } .sidebar p, .th-subbar ul li a { color: #eee; font-size: .9em; } .th-subbar ul li a:hover { text-decoration: underline; } .alldaposts .links a { color: #777; } .alldaposts .links a.comments { color: #293654d4; } a.pure-button.alldaright { display: inline-block; float: right; right: 21px; position: relative; } a.pure-button.alldarightnext { display: inline-block; float: right; right: 14px; } a.pure-button.alldaleftposts { display: inline-block; left: 14px; font-size: 15px; } a.pure-button.alldarightposts { display: inline-block; float: right; font-size: 15px; } .nobar, .sidebar { background: linear-gradient(0deg,#fff 30%,#ededed 100%); } .sidebar { padding: 12px 14px 5px; overflow-wrap: break-word; border-left: solid 1px #cdcdcd; border-right: dotted 1px #cdcdcd; position: relative !important; } .sidebar p { padding-right: .5em; color: #222 !important; } .nobar { border-right: solid 1px #cdcdcd; } .moderators, .sidebar h4, .sidebar p { padding-left: .5em; } .createdby { text-align: center; } .sidebar h4 { margin: 0; padding-top: 5px; } .sidebar ul { margin-top: .2em; } .sidebarlists ul, .sidebarlists ul.top5 { padding: 0 14px 0 18px; font-weight: 400; text-align: left; font-size: 14px; } .sidebarlists ul li { padding-top: 14px; } .sidebar h4, .sidebarlists, .sidebarlists.top5 { color: #404040; } .sidebarlists h4.top5 { color: #404040; margin: 0; padding: 10px 0 0; font-size: 16px; position: relative; right: 5px; } .sidebarlists ul.top5 { padding: 0 14px 10px 25px; margin: 12px 5px; /* background: #e6e6e6; */ border-radius: 2px; border: 1px solid #ccc; } .sbm-post { display: block; margin: 4px 6px 5px; border: 1px solid #ccc; } .sbm-post-grad { border: 1px solid #ccc; box-sizing: border-box; background: var(--primary-color); color: #fff; font-size: 18px; line-height: 1.47059; padding: 4px 15px; -webkit-user-select: none; user-select: none; touch-action: manipulation; white-space: nowrap; display: flex; justify-content: center; } .sbm-post-grad:hover { color: #fff; opacity: 90%; } .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: #fff; } hr { border: 0; border-bottom: 1px dotted #a6a6a6; background: 0 0; } .top5 { padding-left: 1.4em; font-size: 14px; } .sidelocale { color: #757575; margin-top: 1px; } .sidelocale, .sidescore { font-size: 12px; } .postedspan { color: #757575; font-size: 12px; } .sidescore { color: var(--primary-color); } .flairpicker select, input[type=search] { box-sizing: border-box; border: solid #d3d3d3 1px; font-size: .9em; background-color: #fff; -webkit-transition: width .4s ease-in-out; transition: width .4s ease-in-out; } input[type=search] { border-radius: 3px; padding: 12px 15px 10px 35px; margin: 5px; } .search { position: relative; color: #000; font-size: 16px; } .search .icon { position: absolute; top: .7em; left: .8em; height: 24px; width: 24px; } .search .icon path { fill: #a9a9a9; } .flairpicker select { border-radius: 4px; margin: 10px 5px 5px; } a.title { color: #454545; transition: all .15s ease; } a.title:hover { color: var(--post-link-hover); } li.new-item { animation: highlightFade 2.5s ease-out; } #createPostIcon { position: absolute; top: .5em; right: 3.2em; width: 28px; height: 28px; display: none; } #createPostIcon svg { height: inherit; } .createpost input.sbm-poll-opt { margin-right: 1em; width: 50%; } .post-types-opts { padding-bottom: 1em; } .postbar { white-space: nowrap; min-height: 70px; } .postbar * { white-space: normal; } .postbar.post .expandotxt { margin-left: 15px; } .wholepost .title { font-size: 1.25em; text-decoration: 1px dotted underline; } .wholepost .author { font-size: small; color: #888; margin-top: 0; } .post-content-container, .post-content-link-container { background: #fafafa; color: #222; border: 1px solid var(--primary-color); border-radius: 3px; margin-left: 1.1em; margin-right: 1.1em; margin-bottom: 2em; padding: 5px 10px; font-family: verdana, arial, sans-serif; font-size: 14px; line-height: 20px; } .post-content-link-container { margin-left: 1.4em; } .post-content-container-nocontent { margin: 1em 1em 0; } .poll-space { padding: 0 1em 1em 3.7em; margin-left: .2em; margin-right: 1.1em; margin-top: 1.1em; font-family: verdana, arial, sans-serif; font-size: 14px; line-height: 1.5em; } .expandotxt .poll-space { padding: 0 1em 1em .7em; } .commblock textarea, .comment-form textarea, .post-content-container textarea { resize: both; width: 100%; overflow: auto; } .comment-form textarea { resize: vertical; } .expando-master .fade-out-content { position: relative; max-height: 500px; overflow: hidden; display: block; } .expando-master .fade-out-content::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 15em; background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, #fff 100%); pointer-events: none; } .cwrap, .pure-control-group .markdown-editor.cwrap { margin-top: 5px; width: 100%; } div.comments { padding-right: 15px; padding-bottom: 12px; } .show-post-comments { margin-left: 15px; font-size: 16px; } .pchild { margin-left: 28px; border-left: 1px dotted #cecece; } .pchild blockquote { margin-left: 2em; } .pchild-e { margin-left: 26px; } .commentrow { margin-left: 7px; } .usercommentrow { margin-left: 0; } div.commentContent { padding-bottom: 5px; } div.commentContent p { margin-top: .45em; margin-bottom: .45em; } article.comment .score { margin: 0; line-height: 15px; } .editbtns { height: 26px; margin-top: 2px; padding-left: .2em; width: 100%; border: 1px solid #ccc; } .editbtns .separator { border: 0; } .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 { display: block; padding-top: .3em; border-top: none; margin-top: 0; height: 6.5em; box-shadow: none; border-top-left-radius: unset; border-top-right-radius: unset; width: 100%; box-shadow: 0 0 3px rgb(0 0 0/10%); } .bottom-area { overflow: hidden; width: 100%; } .help-toggle a { float: right; margin-top: 5px; margin-left: 10px; cursor: pointer; text-decoration: none; color: #369; font-size: smaller; } .markhelp { display: none; padding: 4px; margin: 24px 0 5px; border-top: 1px dotted silver; } .markhelp table { width: 100%; margin: 5px 0; color: #222; } .markhelp td, .markhelp tr { width: 50%; border: 1px solid silver; text-align: left; padding: 4px 9px; vertical-align: baseline; } .spaces { background-color: silver; } img { max-width: 100%; height: auto; } .center-container .content, .comments .content img, .post-content-container img { max-width: 100%; } .pmessage.post p.title { border-bottom: 1px solid #c8c8c8; font-size: inherit; line-height: inherit; } .pmessage .links { margin: 0.8px 0 0 2px; } .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: #fff; -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); } .main .container { font-family: verdana, arial, sans-serif; font-size: 13.5px; line-height: normal; color: #222; } .main .votecomment { margin-top: -2px; } .main .pchild .votecomment { margin-top: 0px; } .pmessage p.container a:hover { background: var(--primary-color); color: #fff; } .pmessage p.container a, .subsentry p.container button, .subsentry span.subcount { cursor: pointer; padding: .5em 1em; border-radius: 3px; background-color: rgba(0,0,0,.06); } .pmessage p.container a { margin: 4px 4px 0 0; display: inline-block; } .pmessage p.container a.deletedmsg { background: #e20000; color: #fff; } .pmessage p.container a.savedmsg { background: #00aa09; color: #fff; } article.pmessage.post.newmsg { border-left: 5px solid var(--primary-color); } .newmsgbg { background-color: #5a82950d; margin-left: 31px; } .unseen-comment { background-color: #f3fafd; } .prev-unseen-comment { background-color: #f3fafd; } .inbox.content { width: 96%; } form#msg-form { padding: 20px; } .closemsg, .closepopmsg { float: right; font-size: 26px; cursor: pointer; } .content.highlight { background-color: #ffc; } .deleted-comment { background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; display: inline-block; } .collapsed-comment { font-style: italic; } .collapsed-comment .togglecomment { font-style: normal; } #blockpop, #formpop, #modpop { position: fixed; z-index: 100; padding-top: 108px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba(0,0,0,.4); } #blockpop .modal-content, #formpop .modal-content, #modpop .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%; } .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); } #center-container-subs { display: flex; justify-content: center; } .subsentry .author { min-height: 40px; } .subsentry p.container button, .subsentry span.subcount { margin-right: 4px; } td.subsentry.subsubscribed { border-left: 4px solid var(--primary-color); } td.subsentry.blocked { border-left: 4px solid #b40000; } td.subsentry.unsubscribed { border-left: 4px solid transparent; } .sortable th svg { height: 16px; } .uprofile-top, li.profilebadge { text-align: center; } .deleted-user { background-color: #faf9f8; } .uprofile-top .score { font-weight: 700; } .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 .fill, .pblock.level .uprofile-level-box .mask { 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(0,120px,120px,60px); } .pblock.level .uprofile-level-box .fill { clip: rect(0,60px,120px,0); background-color: var(--primary-color); } .pblock.level .inset { width: 100px; height: 100px; position: absolute; margin-left: 10px; margin-top: 10px; background-color: #f1f1f1; 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; } .ucount { font-size: 34px; font-weight: 700; } .profilebadgeicon { font-size: 38px; padding: 0; } .profilebadgename, .profilebadgexp { font-size: 12px; } article.comment { padding: .4em 0 0; margin: 4px 0; } .commtitle { margin: 7px 7px 0 0; font-size: 14px; } .userrow, td.close-report-button { text-align: center; } .userrow .pblock, .userrow h3, li.habitentry { text-align: left; } .pblock a, .userrow a { color: #0f5387; } ul#th-menu ul.left li { display: inline-block; margin-left: 4px; } .pure-menu a svg.logo { height: 2.8em; margin-top: 0; } table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } table td, table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: .5em 1em; text-align: center; } table thead { background-color: #e0e0e0; color: #000; vertical-align: bottom; } table td { background-color: transparent; } #csub-form h1, #login-form h1, #post-form h1 { text-align: center; margin-top: 0; } #csub-form, #login-form, #post-form { border-radius: 8px; background-color: #fefefe; padding: 1em; margin-bottom: 2em; -webkit-box-shadow: -1px 3px 4px 0 rgb(0 0 0/10%); -moz-box-shadow: -1px 3px 4px 0 rgb(0 0 0/10%); box-shadow: -1px 3px 4px 0 rgb(0 0 0/10%); } #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,.75); border: 0; width: 25%; position: fixed; right: 1em; bottom: 0; background: #eee; border-radius: 2px 2px 0 0; 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: .5em; } #chsend { border: 0; width: 100%; height: 1.7em; padding-left: 5px; } #chcont { border-bottom: solid 1px #bbb; margin-left: 2px; height: calc(100% - 5.5em); color: #111; font-family: monospace; overflow-y: scroll; overflow-x: hidden; } #chtitle { background: var(--primary-color); font-size: smaller; height: 1.8em; padding-top: .2em; padding-left: .5em; cursor: pointer; } #chtitle a, a[href="#spoiler"]:hover, body.dark a[href="#spoiler"]:hover { color: #fff; } #chtitle:hover { background: #8e98a7; } .msguser { padding-right: 5px; color: maroon; } #chcont::-webkit-scrollbar { width: 4px; background: #555; z-index: -1; } #chcont::-webkit-scrollbar-thumb { background: #101010; } .msg-hl { background-color: #d7d7d7; } .msg-ac { font-style: italic; } .msgtime { color: gray; font-size: 12px; } .irc-underline { text-decoration: underline; } .irc-italic { font-style: italic; } .irc-bold { font-weight: 700; } .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-pbar { border: 1px solid #ccc; width: 70%; margin: 0 5px 2px -5px; padding: 1px; height: 1.5em; background: #fff; } .poll-pbar, .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); } .uploads.content { max-width: 640px; display: grid; } .uploaditem { float: left; width: 140px; height: 140px; border: 1px solid rgba(85,85,85,.25); text-align: center; } .uploadlinks { padding: 4px; } .uploadlink { margin-top: 4px; } .uploadthumb { width: 140px; height: 140px; margin: auto; border-radius: 4px; } .deletedcomment, .deletedpost, tr.deletedrow { background: #a752524a !important; } spoiler:not(.shown) a { pointer-events: none; color: #111; } spoiler:not(.shown) { color: #111; background-color: #111; border-radius: 3px; -webkit-user-select: none; user-select: none; } spoiler { transition: background-color 400ms linear; } a[href="#toodamncool"] { animation: rb3 4s infinite; font-weight: 900; } .commblock .content, .expandotxt, .post-content-container { word-wrap: break-word; } .commblock .content a, .expandotxt a, .post-content-container a { color: #0077d0; } .commblock .content a:visited, .expandotxt a:visited, .post-content-container a:visited { color: #7d5d8a; } .expando-master { display: block; margin-top: 10px; } .postbar .expando-master { display: block; margin-top: 20px; } .replybox { margin-bottom: 1em; max-width: 48em; } .pure-form select { height: auto; } .pure-form input:focus:invalid, .pure-form select:focus:invalid, .pure-form textarea:focus:invalid { color: #b94a48; border-color: #000; outline: -webkit-focus-ring-color auto 1px; } .admin_alert, .motto { color: #fff; display: block; } .motto { font-size: smaller; font-variant: small-caps; letter-spacing: normal; word-spacing: normal; -webkit-box-direction: normal; -webkit-font-smoothing: antialiased; margin-left: 35px; position: relative; bottom: 36px; } #logocont { z-index: -1; position: absolute; } .admin_alert { background-color: #bf0819; top: 0; position: fixed; width: 100%; height: 1.5em; font-size: 1.1em; text-align: center; line-height: 1.5em; z-index: 150; } .body_admin { margin-top: 1.5em; } .btn_link { background: 0 0; border: 0; padding: 0; color: #0f5386; font: inherit; text-decoration: underline; } .subsort_item { cursor: move; padding: 10px 40px; width: 20em; 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, a.close-report { cursor: pointer; } .invitecodes .expired { color: gray; text-decoration: line-through; } .new-g { margin-left: auto; margin-right: auto; } .new-form-one { width: auto; } label.new-form-one { display: inline-block; width: 15em; text-align: right; } button.new-form-one { margin-top: 1em; margin-left: 15em; } .autocomplete>div.selected { background: #d2d2d2 !important; } .wholepost .postinfo .links { margin: 4px 0 0 .25em; } .commblock .bottombar.links { margin: 0 0 0 .25em; font: -webkit-control; font-size: 14.5px; } .bottombar.links a:hover, .links a:hover { text-decoration: underline; } .links a.comments:hover { text-decoration: none; } .label-v { clear: both; display: inline-table; overflow: hidden; } .label-v .pure-control-group { float: left; } .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; } .mod .user-actions .pure-button, .mod.report.close.buttons 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%; } .mod.report.preview .preview-meta-data a, .report-details-item .label { font-weight: 700; } .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: 0 10px 10px; } .mod.report.preview .preview-meta-data div { color: gray; margin-top: 5px; } .mod-sidebar.header { text-align: center; } div.post.admin>div>div>a.authorlink { display: inline-block; background-color: #f30414bd; color: #000; border-radius: 2px; padding: .15em; } article.text-post.comment.admin>div>div>div>a.poster { display: inline-block; background-color: var(--primary-color); color: #000; border-radius: 2px; padding: .15em; } article.text-post.comment.mod>div>div>div>a.poster, div.post.mod>div>div>a.authorlink { display: inline-block; background-color: #59cbef1f; color: #000; border-radius: 2px; padding: .15em; } .mod.report.preview .preview-text-container.deleted, .mod.report.preview .preview-text-container.deleted.post-content-container, .poll-space.deleted, .post-content-container.deleted { background-color: #f1f1f1; } .uploaditem.deleted { background-color: #fdd8d4; } .post-history-controls { margin: 1em 1em 0; } .title-history-controls { margin: 1em 0; } .title-history-controls button { font-size: 1em; } .browse-history:focus { outline: 0; } .browse-history.disabled:focus { outline: #d3d3d3; } .browse-history { border-radius: 2px; cursor: pointer; box-shadow: -2px 1px 3px 0 rgba(0,0,0,.1); } .browse-history.disabled { cursor: not-allowed; pointer-events: none; border-color: #d3d3d3; color: #d3d3d3; } .wholepost .old.history { color: gray; } .wholepost .history-meta { color: gray; font-size: smaller; } .links a.post-open-reports { color: red; font-weight: 700; } .removebanneddomain { float: right; margin-left: 10px; } .loginlinklist { list-style: none; line-height: 1.4; margin-bottom: 0; padding: 0; list-style-type: none; } .mw-75 { min-width: 75%; } .st-flair { display: inline-block; margin-left: 1em; margin-top: 5px; } #sortby { font-size: 14px; text-align: center; cursor: default; } .pure-menu-link-sort { color: #000; font-size: 14px; } .pure-menu-children { min-width: 65%; border: 1px solid gray; } .pure-menu-horizontal .pure-menu-children { left: 5.6em; top: 1.7em; width: inherit; } .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after { content: "▼"; } .pure-menu-has-children>.pure-menu-link:after { padding-left: 0; margin-left: .2em; font-size: smaller; } .invitecode-users { list-style: none; margin: 0; padding: 0; } .pure-form-aligned .pure-controls { margin: 0; } .pure-form-aligned .pure-control-group label { text-align: right; display: inline; } .edited { position: relative; cursor: default; } .edited-title { opacity: 0; } .edited:hover>.edited-title { width: max-content; border: 1px solid #4d4c4c; padding: 6px; text-align: center; background-color: #fff; font-size: 11px; color: #4d4c4c; opacity: 1; position: absolute; top: 21px; left: 13px; transition: opacity; transition-delay: .6s; } .banner-text-link { position: absolute; top: 50%; left: 50%; font-size: 50px; transform: translate(-50%,-50%); letter-spacing: 1px; font-weight: 700; background-size: cover; display: none; } .banner-text-link, .banner-text-link:hover { color: #fff; text-decoration: none; } .banner-link { z-index: -10; } .active-page-link { color: #de1414; } .sub label { text-align: left !important; display: inline-block !important; } .ltxcont label, .txcont label { display: block !important; text-align: left !important; } .createpost .bottom-area, .createpost .editbtns, .createpost [type=text], .createpost [type=url], .createpost textarea { display: block !important; width: 600px !important; } .createpost .lnicont { display: block; } input[name=captcha], input[name=confirm], input[name=email_optional], input[name=invitecode], input[name=password], input[name=username] { display: block !important; width: 300px !important; } .inviteq { font-size: 14px; text-align: right; margin-top: 2px; } .createpost #captcha, .createpost input[name=sub], input[name=captcha] { width: 250px !important; } .left { text-align: left; } .inline { display: inline-block; } .gray { color: gray; } .red { color: red; } .bigger { font-size: bigger; } .normal { font-size: normal; } .medium { font-size: medium; } .small { font-size: small; } .smaller { font-size: smaller; } .attention { color: red; font-size: large; font-weight: 700; text-align: center; } .admin-config { max-width: 682px; text-align-last: left; } .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; } #container.mod-container { padding-right: .5em; } .mod-table { padding-inline-start: 0; width: 100%; border: 0; } .mod-table .header { color: #000; font-weight: 700; background-color: #e0e0e0; border: 1px solid #cbcbcb; padding: .5em; vertical-align: text-bottom; } li.mod-table-header { margin-top: 0; border: 0; } .mod-table .close-elem, .mod-table .elem, .mod-table .last-elem { background-color: #f7f7f7; border: 1px solid #cbcbcb; padding: .5em; vertical-align: bottom; } .mod-table .close-elem, .mod-table .header { display: none; } .mod-table .elem::before, .mod-table .last-elem::before { font-weight: 700; padding: .5em; content: attr(data-name); } .mod-table .elem-content { background-color: #f7f7f7; border: 1px solid #cbcbcb; padding: 0 .5em .5em; vertical-align: bottom; } .mod-table-row .pure-u-md-14-24 { min-width: 300px; } .mod-table .close-button { display: block; margin-top: 2px; margin-bottom: 15px; } .mod-table .last-elem { margin-bottom: 15px; } :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: 0 0; } #chloading { padding: 1em; } @keyframes highlightFade { 0% { background-color: #fff; } to { background-color: transparent; } } @keyframes rb3 { 20% { color: red; } 40% { color: #ff0; } 60% { color: green; } 80% { color: #00f; } to { color: orange; } } /* Small Mobile First (max-width: 35.5em / 480px) */ @media screen and (max-width: 35.5em), (max-width: 480px) { .content.createpost { width: 90%; } .createpost input#link, .createpost input#title, form#msg-form .editbtns, input#subject, textarea#content, #flair-container { width: 100%; } .misctainer { margin: 0; } .pbody { width: calc(100% - 110px); } .content.wiki { width: 95%; } .post .thumbnail { margin-left: -6px; } } /* Small to Medium Screens (max-width: 50.999em) */ @media screen and (max-width: 50.999em) { /* Navigation and Menu */ #createPostIcon { display: block !important; } .pure-u-1.pure-u-md-10-24 .pure-g-menu { display: none; } .th-navbar, .th-subnavbar { overflow: hidden; } .th-navbar.open ~ * .pure-u-1.pure-u-md-10-24 .pure-g-menu, .th-subnavbar.open ~ * .pure-u-1.pure-u-md-10-24 .pure-g-menu { display: block; margin-left: -1px; } .new-form-one { font-size: 12px; } /* User Info and Sidebar */ #th-uinfo { padding-right: 14px; text-align: right; } .th-toggle, div.sidebar, div.sidebar.open { display: block; } div.sidebar { box-shadow: 0 3px 5px 0 var(--primary-shadow); background-color: #fff; position: absolute; margin-top: .5em; } .th-body { position: relative; } /* Chat Popup */ #chpop { min-width: 50%; } #chpop.chexpanded { min-width: 98%; right: 0.2em; } /* Layout and Positioning */ .cw-items { align-items: baseline; color: #fff; display: flex; justify-content: flex-end; position: relative; top: 5%; transform: translateY(-50%); } .expandotxt, .th-navbar .pure-g-menu, .th-subnavbar .pure-g-menu { margin-left: 0; } .expando-master .fade-out-content, .expandotxt { padding: 0px 0px 0px 4px; } /* Post Layout */ .wholepost .thcontainer { display: none; } .wholepost .misctainer { float: none; } } /* Small Screens (max-width: 600px) */ @media screen and (max-width: 600px) { /* Create Post Form Elements */ .createpost .bottom-area, .createpost .editbtns, .createpost [type="text"], .createpost [type="url"], .createpost textarea { display: block !important; width: 300px !important; } } /* Medium Screens (max-width: 915px) */ @media screen and (max-width: 915px) { /* Voting and Layout */ .votebuttons { margin-right: 0; position: relative; right: 5px; width: 40px; } .wholepost .votebuttons { right: 4px; } .pure-u-1-2 { display: block; } .pure-form-aligned .pure-controls { margin: 0; } /* Text and Layout */ .banner-text-link { font-size: 18px; } /* Grid Layout Adjustments */ .pure-u-md-18-24, .pure-u-md-3-4 { width: 75%; } .pure-u-md-1-4, .pure-u-md-6-24 { width: 25%; } .pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5 { width: 100% !important; } /* Subscription Content */ .subs.content { font-size: 11px; } .sbm-icon svg { height: 12px; left: -0.7em; } } /* Default Desktop (min-width: 35.5em) */ @media screen and (min-width: 35.5em) { .content.createpost { width: 700px; } .createpost input#link, .createpost input#title, .createpost textarea#content, .pure-control-group .markdown-editor { width: calc(100% - 11em); } .content.wiki { width: 65%; } } /* Large Screens (min-width: 51em) */ @media screen and (min-width: 51em) { /* Navigation */ #th-menu { padding-left: 2em; } .th-navbar .pure-g-menu, .th-subnavbar .pure-g-menu { display: block !important; } /* Content Wrapper Items */ .cw-items { color: #fff; position: relative; top: 50%; transform: translateY(-50%); } /* User Info */ #th-uinfo { position: absolute; right: 1em; text-align: right; top: 0; z-index: 0; } /* Mod Table Styling */ .mod-table, li.mod-table-header { border: 1px solid #cbcbcb; } .mod-table .close-elem, .mod-table .header { display: block; } .mod-table .elem::before, .mod-table .last-elem::before { content: ""; padding: 0; } .mod-table .close-button { display: none; } .mod-table .last-elem { margin-bottom: 0; } } /* Extra Large Screens (min-width: 915px) */ @media screen and (min-width: 915px) { .mod.report.content { min-width: 650px; } .pure-u-md-18-24, .pure-u-md-3-4 { width: 80%; } } /* Ensure navbar does not cover sortbuttons in portrait mode on tablets*/ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .th-navbar { height: unset; } } /* Wider center container for tablets in landscape mode */ @media only screen and (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) { .pure-u-md-7-24 { width: 25%; } .pure-u-md-10-24 { width: 50%; } } /* Small to Medium Screens (max-width: 50.999em) */ @media screen and (max-width: 50.999em) and (orientation: portrait) { .misctainer { margin: 0; transform: scale(0.9); } .votebuttons { right: 8px; } .wholepost .votebuttons { right: 17px; } .thcontainer { width: 55px; } .pbody { width: calc(100% - 97px); } } /* dark mode 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: #a9989836; } body.dark .profilebadge path:not(.nocolor) { fill: #686868; } body.dark .th-toggle .bar { background-color: #fff; } body.dark a { color: #8f8f8f; } body.dark .sbpostauthor { border: 1px solid #8f8f8f; background: #41444b; color: #b9bbbe; } body.dark div.author a { color: var(--dark-links-a); } body.dark div.author a.authorlink { color: #cccccc; } body.dark a.poster { color: #526a7d; } body.dark .content, body.dark #container2 { color: #c1c1c1; } body.dark .hasmail i { color: #4f5d66; } body.dark #toggledark i { color: #526a7d; } body.dark .postflair { background-color: #526a7d !important; border: 1px solid #526a7d !important; color: lightgray !important; } body.dark .user_flair { background-color: #202225; border: 1px solid #1d1d1d; color: #c1c1c1; } /* Hot, Top, New, Domain */ body.dark div#sortbuttons span { color: #ddd; background-color: #101010; } body.dark div#sortbuttons { color: #526a7d; } body.dark a:hover, body.dark .sidebar ul.top5 li a:hover, body.dark #sortbuttons a:hover { color: #697e8b; } body.dark .post .domain a, body.dark .post .domain { color: #7b7b7b; } /* Header */ body.dark .th-navbar { background-color: #313338; -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); } /* Footer */ body.dark .footer { color: #c1c1c1; /* background-color: #313338; */ } /* 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: #202225; border-bottom: 1px solid #40444b; } 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: #40444b; } */ body.dark .nobar { background: #373a3f; border-right: solid 1px #202225; } body.dark .content.highlight { background-color: #202225; } body.dark #container { background: #313338; } body.dark #center-container { background-color: transparent; } body.dark .wholepost { background-color: #313338; } body.dark .pbody { background: #313338; display: inline-block; width: calc(100% - 130px); padding: 5px 10px 5px 5px; border: 1px solid #202225; } body.dark .pbody:hover { background: #2e3035; } body.dark .post { background-color: #313338; } body.dark .post:nth-child(2n) { background-color: #313338; } body.dark .pchild { margin-left: 26px; border-left: 1px dotted #65686b; } body.dark .score { color: #888888; } 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 .expandotxt a, body.dark .post-content-container a, body.dark .commblock .content a { color: #a4b7c7; } body.dark .post-content-link-container { background: #40444b; color: #c1c1c1; border: 1px solid #8f8f8f; } body.dark .expandotxt a:visited, body.dark .post-content-container a:visited, body.dark .commblock .content a:visited { color: #7a7a7a; } body.dark .post .author { color: #7b7b7b; } body.dark div.post.mod>div>div>a.authorlink { background-color: #888888; } body.dark .poster .op-tag { color: #429fc3; } body.dark .bottombar .reply-comment { color: #c1c1c1; } body.dark .thumbnail .placeholder svg path { fill: #555; } body.dark .post .thumbnail img { -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); filter: grayscale(50%); } body.dark .sub-icon-round img { -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); filter: grayscale(50%); } body.dark .post .thumbnail img:hover { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); } body.dark .p-icon[data-icon="exclaim"] path { fill: #8c8c8c; } /* 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: #313338; color: #b9bbbe; border: 1px solid #303030; } body.dark .inboxside .button-secondary { background: #202225; } body.dark .button-secondary:hover, body.dark .pure-button:hover { background: #40444b; color: #b9bbbe; } body.dark .pure-button-primary { background-color: #202225; } body.dark .pure-g-menu .pure-button-primary { background-color: #313338 !important; color: #ffffff !important; font-weight: bold !important; border: 1px solid #141617 !important; border-bottom: 1px solid #101010 !important; margin: 0px 0px 0px 0px !important; } body.dark .pure-g-menu .pure-button { background-color: #313338; position: relative; z-index: 1; margin: 1px 0px 0px 0px; font-family: verdana,arial,helvetica,sans-serif; color: #ccc; border-bottom: 1px solid #010101; } body.dark .pure-button-group .pure-button:last-child { border-right: none; } body.dark #hiddensubs li a { color: #cccccc; } 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: #202225; } /* Expandos */ body.dark .expando { background-color: #0a0a0a; } body.dark .post .expandotxt, body.dark .post:nth-child(2n) .expandotxt { /* background-color: #202225; */ color: #aaa; } body.dark .pure-control-group label, body.dark .form label { color: #dcd8d9; } body.dark input[type="text"]:not(.numInput), body.dark input[type="email"], body.dark input[type="url"], body.dark input[type="password"], body.dark select { color: #dcd8d9; background-color: #40444b; box-shadow: inset 0 1px 3px #303030; border-color: #444; } body.dark textarea { color: black; background-color: #a0a0a0; } body.dark { color: #666; } body.dark .poll-space { color: #b9bbbe; } body.dark .post-content-container { background: #40444b; color: #b9bbbe; border: 1px solid #8f8f8f; } 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: #313338; border: solid 1px #202225; border-bottom: none; background: none; } body.dark .postedspan, body.dark .sidelocale { color: #6b6b6b; } body.dark .sidebarlists .sidelocale.top5 { color: #b9bbbe; } body.dark .sidebarlists { color: #898989; } body.dark .sidebarlists ul.top5 { background: none; border: 1px solid #303030; } body.dark .sidebar p { color: #8f8f8f !important; } body.dark .sidebar h4 { color: #898989; } body.dark input[type="search"] { background-color: #202225; color: #fff; border-color: #40444b; } body.dark .flairpicker select { background-color: #1a1b2d; color: #fff; border-color: #40444b; } body.dark .sidebar ul.top5 li a { color: #898989; } body.dark hr { border-bottom: 2px dotted #545454; } body.dark .sidescore { color: #b9bbb1; } /* /Sidebar */ /* MESSAGES STYLES */ body.dark .pmessage.post p.title { border-bottom: 1px solid #343434; } body.dark .pmessage.post { background-color: #202225; } body.dark .main .container { color: inherit; } 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: #526a7d; } 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: #202225; } */ 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 a, body.dark .userrow a { color: #556a7c; } 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: #40444b; } body.dark article.comment:nth-child(2n) { /* background-color: #393c42;*/ } body.dark .newmsgbg { background-color: #13181a; } /* /USER PAGE */ /* misc */ body.dark span.mailcount { background: #526a7d; } 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="#1ea4f4"] { stroke: #7b4a3f; } body.dark path[fill="#1ea4f4"] { fill: #526a7d; } 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; } body.dark .subtitle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #cccccc; } body.dark .subtitle a { color: #cccccc; } body.dark .th-subnavbar { background-color: #313338; -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); } @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: #464646; } body.dark #chtitle { background: #202225; color: #ccc; border-bottom: 1px solid #40444b } body.dark #chpop { background: #202225; border-top: 1px solid #40444b; border-left: 1px solid #40444b; border-right: 1px solid #40444b; } body.dark #chcont { border-bottom: none; color: #ccc; } body.dark #chsend { background-color: #40444b; } 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: #ccccc3; } 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 blockquote { border-left: 1px solid #858687; background: transparent; background-color: transparent; color: #858687; } /* alldaposts */ body.dark .alldaposts { background: transparent; background-color: transparent; } body.dark .alldaposts .links a.comments { color: #49708f; } body.dark .alldaposts .links a { color: #797979; } body.dark .alldaposts .links a.comments:hover, a:hover { color: #49708f; } body.dark .stickyposts .links a { color: #797979; } body.dark .stickyposts .links a.comments { color: #526a7d; } /* sidebar */ body.dark .sidebar .pure-button-primary { color: #fff; background-color: #3a3c40; } body.dark .sidebar .pure-button-primary:hover { background-color: #282828; } body.dark .message { background-color: transparent; } body.dark #center-container-savedcomments { background-color: transparent; } /* 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 #6f1818; } body.dark .mod.report.preview .preview-text-container.deleted.post-content-container { background-color: #171717; border: 1px solid #6f1818; } body.dark article.text-post.comment.deleted { /* background-color: #6b6b6b36; */ /* border: 1px solid #6f1818; */ } body.dark .post-content-container.deleted { background-color: #171717; } body.dark .poll-space.deleted { background-color: #171717; border: 1px solid #6f1818; } body.dark .uploaditem.deleted { background-color: #171717; border: 1px solid #6f1818; } body.dark .deleted-user { background-color: #36393f; } body.dark .deleted-comment { background-color: #202225; } body.dark .browse-history { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #171717; border: 1px solid #526a7d; 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: #526a7d none; } body.dark .links a.post-open-reports { color: #526a7d; } body.dark .votecomment { /* margin-top: 0.21em;*/ padding-left: 0.4em; } body.dark .allcomments { top: 0px; } /* body.dark .sortcomments { border: 1px solid #b9bbbe; } body.dark #sortby { background: #202225; color: #b9bbbe; font-size: smaller; text-align: center; cursor: pointer; } */ body.dark .pure-menu-item a { background: #202225; color: #abbbbe; } body.dark .pure-menu-item a:hover { background: #666; color: #b9bbbe; } 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 !important; background-color: #161616 !important; border-color: #666 !important; } 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 .mod-table .elem-content { background-color: #222; border-color: #4e4e4e; } 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; } body.dark .stickyposts { border-bottom: 1px solid #40444b; background-color: #313338; background: #313338; } body.dark .expando { background-color: #96969661 !important; } body.dark .expando svg path { fill: #ccc; } body.dark .announcement { padding: 3px; margin-right: .5em; border-radius: 5px; color: #e22; background-color: #3f3d3b; font-size: small; } body.dark .commenthead { color: #bbbbbb; } body.dark .c-upvote svg, body.dark .c-downvote svg, body.dark .upvote svg, body.dark .downvote svg { fill: #c2cccc !important; } body.dark .upvote path, body.dark .c-upvote path, body.dark .c-downvote path { fill: #888888; } body.dark .upvoted path { fill: #c3cccc; } body.dark .downvote path { fill: #888888; } body.dark .downvoted path { fill: #242424; } body.dark td.subsentry.subsubscribed { border-left: 4px solid #5c5c5c; } body.dark .stick { color: #2c8b05; } body.dark .stickytitle { color: #2c8b05 !important; } body.dark .pblock.level .uprofile-level-box .fill { clip: rect(0px, 60px, 120px, 0px); background-color: #526a7d; } body.dark { background-color: #36393f !important; color: #dcd8d9; background: -moz-linear-gradient(top, #36393f 0%, #36393f 100%); background: -webkit-linear-gradient(top, #36393f 0%, #36393f 100%); background: linear-gradient(to bottom, #36393f 0%, #36393f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36393f', endColorstr='#36393f', GradientType=0); } body.dark .commblock { border: none; background-color: transparent; } body.dark .markhelp { color: #d5d5d5; } body.dark .markhelp table { color: #a0a0a0; } body.dark .markhelp tr { background-color: #202225 !important; } body.dark .expando-master .fade-out-content::after { background: linear-gradient(to bottom, rgba(49, 51, 56, 0), rgba(49, 51, 56, 1)); /* Fade from transparent to the dark background color */ } body.dark .unseen-comment { background-color: #484957; } body.dark .prev-unseen-comment { background-color: #484957; } body.dark .nsfw, .private { color: #b93d3d; border: 1px solid #b93d3d; } body.dark .live-activity-tag { color: #678392; border: 1px solid #678392; } /** You can add custom styles for your site here */ .flairsettings { margin-top: 9px; text-align: center; } .subbuttonscentered { text-align: center; } .notfound { text-align: center; margin-top: 35px; } /* Apple show poll results button */ .poll-show-results { background-color: #737272; box-sizing: border-box; color: #FFFFFF; cursor: pointer; direction: ltr; display: block; font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 400; letter-spacing: -.022em; line-height: 1.47059; min-width: 30px; overflow: visible; padding: 4px 15px; text-align: center; -webkit-user-select: none; user-select: none; touch-action: manipulation; white-space: nowrap; } .poll-show-results:disabled { cursor: default; opacity: .3; } .poll-show-results:hover { filter: opacity(85%); } .poll-show-results:active { background-image: linear-gradient(#3D94D9, #0067B9); border-color: #006DBC; outline: none; } .poll-show-results:focus { box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px; outline: none; } /* center sidebar img */ img[src*='#center'] { display: block; margin: auto; width: 100%; max-width: -moz-fit-content; max-width: fit-content; } .cscore:before { content: "• "; margin: 0 2px; line-height: 14px; } .mcscore:before { content: "• "; margin: 0 2px; line-height: 14px; } .bottombar .reply-comment { color: #24a0ed; } /* sub title in the Navbar */ .subtitle { display: block; font-size: 1em; font-weight: bold; font-variant: small-caps; letter-spacing: normal; word-spacing: normal; text-align: right; position: relative; z-index: 150; margin-top: -21px; margin-right: 1ex; float: right; } .subtitle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #fff; } .subtitle a { color: white; } /* new Navbar style, separate for subs */ .th-subnavbar { background-color: var(--primary-color); margin-bottom: 0; -webkit-font-smoothing: antialiased; padding: .4em 0 .4em .3em; position: relative; height: 80px; border-bottom: 1px solid #101010; } /* sort buttons */ .pure-g-menu .pure-button-primary { background-color: #ffffff !important; color: var(--primary-color) !important; font-weight: bold !important; border: 1px solid #010101 !important; border-bottom: 1px solid #fff !important; margin: 0px 0px 0px 0px !important; } .sub-icon-round { width: 25px; height: 25px; overflow: hidden; /* Ensures the image stays within bounds */ display: flex; /* Centers the image inside */ align-items: center; justify-content: center; margin-right: 8px; /* Adds space between the icon and the link */ position: relative; } .sub-icon-round img { border-radius: 50%; /* Ensures a fully rounded image */ object-fit: cover; /* Prevents stretching */ width: 100%; /* Ensures it fills the parent div */ height: 100%; /* Ensures it fills the parent div */ } .sub-icon-name-container { display: flex; /* Layout for the container */ align-items: center; /* Vertically centers the elements */ margin: 0px 0px 3px -1px; } .sub-icon-name-container span { white-space: nowrap; /* Prevents the link from breaking into multiple lines */ font-size: 13px; } .sub-icon-text { color: #414a4f; font-size: 12px; font-weight: 600; } .lite-youtube { background-color: #000; height: 100%; max-width: 100%; background-position: center center; background-size: cover; cursor: pointer; width: 640px; } .lite-youtube .lty-placeholder { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; } .lite-youtube .lty-playbtn { width: 68px; height: 48px; opacity: 0.8; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } .lite-youtube:hover .lty-playbtn { opacity: 1; transform: scale(1.1); } .lite-youtube.lty-activated { cursor: unset; } .lite-youtube.lty-activated .lty-playbtn, .lite-youtube.lty-activated .lty-placeholder { display: none; } .lite-youtube iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /** Recent activity posts only toggle *// .toggle-switch input:checked + .slider { background-color: #2196F3; } .toggle-switch input:checked + .slider:before { transform: translateX(18px); } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider:before { background-color: var(--primary-color); } .hiddencomm { display: none !important; } .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; }