@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin); @import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap); /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ Import this file into your LESS project to use Semantic UI without build tools */ /* Global */ /*! * # Semantic UI - Reset * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reset *******************************/ /* Packaged Theme */ /******************************* Reset *******************************/ /* Site Theme */ /******************************* User Global Variables *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reset *******************************/ /* Border-Box */ *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } /* iPad Input Shadows */ input[type="text"], input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; /* mobile firefox too! */ } /*! normalize.css v7.0.0 | 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 * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { 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 ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { 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 ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ -webkit-text-decoration: underline; text-decoration: underline; /* 2 */ text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * 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 style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * 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 ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 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; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * 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 { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { 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 and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [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 IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Site * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged Theme */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site Theme */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Page *******************************/ html, body { height: 100%; } html { font-size: 16px; } body { margin: 0px; padding: 0px; overflow-x: hidden; min-width: 320px; background: #FFFFFF; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; color: #4A3041; font-smoothing: antialiased; } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 1.28571429em; margin: calc(2rem - 0.14285714em ) 0em 1rem; font-weight: bold; padding: 0em; } h1 { min-height: 1rem; font-size: 2rem; } h2 { font-size: 1.71428571rem; } h3 { font-size: 1.28571429rem; } h4 { font-size: 1.07142857rem; } h5 { font-size: 1rem; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0em; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0em; } /******************************* Text *******************************/ p { margin: 0em 0em 1em; line-height: 1.6; } p:first-child { margin-top: 0em; } p:last-child { margin-bottom: 0em; } /*------------------- Links --------------------*/ a { color: #407330; -webkit-text-decoration: underline; text-decoration: underline; } a:hover { color: #2f701b; -webkit-text-decoration: underline; text-decoration: underline; } /******************************* Scrollbars *******************************/ /******************************* Highlighting *******************************/ /* Site */ ::-webkit-selection { background-color: #CCE2FF; color: #4A3041; } ::selection { background-color: #CCE2FF; color: #4A3041; } /* Form */ textarea::-webkit-selection, input::-webkit-selection { background-color: rgba(100, 100, 100, 0.4); color: #4A3041; } textarea::selection, input::selection { background-color: rgba(100, 100, 100, 0.4); color: #4A3041; } /* Force Simple Scrollbars */ body ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; } body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0px; } body ::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: rgba(0, 0, 0, 0.25); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } body ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.15); } body ::-webkit-scrollbar-thumb:hover { background: rgba(128, 135, 139, 0.8); } /* Inverted UI */ body .ui.inverted::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } body .ui.inverted::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } body .ui.inverted::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } body .ui.inverted::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* Global Overrides *******************************/ /******************************* Site Overrides *******************************/ :root { /*-------------------- The first set of variables was originally taken from 2025 Patient Portal SQS mock-up These are now used more widely in the 2025 re-styling work for patient, provider, and survey UX. ----------------------*/ --body-font-font-family: 'Lato'; --body-font-font-style: normal; --body-font-font-weight: 400; --body-font-text-transform: none; --body-font-letter-spacing: 0em; --body-font-line-height: 1.6em; --heading-3-size: 1.8rem; --heading-3-size-value: 1.8; --heading-4-size: 1.4rem; --heading-4-size-value: 1.4; --white-hsl: 0, 0%, 96.08%; --darkAccent-hsl: 320.77, 21.31%, 23.92%; --paragraphMediumColor: hsla(var(--darkAccent-hsl), 1); --list-section-simple-card-color: hsla(var(--white-hsl), 1); --sqs-rem: 16px; --large-text-size: calc(1.4 * var(--sqs-rem)); --large-text-size-value: 1.4; --normal-text-size: calc(1.1 * var(--sqs-rem)); --normal-text-size-value: 1.1; --sqs-site-gutter: 3vw; --sqs-mobile-site-gutter: 6vw; --sqs-site-max-width: 1820px; /*-------------------- The second set were taken from the now defunct _variables.scss file which had SCSS variables. They have been migrated here to better tie into Semantic UI Less variables and are now implemented as CSS variables. ----------------------*/ --primary-normal-font-size: var(--sqs-rem); /* 16px */ --primary-font-family: 'Lato'; /* Lato */ --semantic-ui-rem: 16px; /* 16px */ --positive-color: #21BA45; --negative-color: #DB2828; /* OPSC Digital Style Guild - Primary colors */ --primary-white-color: #ffffff; --primary-light-color: #407330; --primary-dark-color: #4A3041; --primary-neutral-color: #f5f5f5; --secondary-neutral-color: #e3f4e0; --primary-dark-neutral-color: #303030; --primary-important-action-color: #C91E4F; --facet-background-color: #f5f5f5; --facet-bubble-item-color: #f5f5f5; --facet-search-title-color: #4A3041; --default-panel-border-radius: 20px; } /****************************** Semantic UI overrides (pulled originally from application-services.scss) *******************************/ body { letter-spacing: var(--body-font-letter-spacing); min-height: 100vh; } a { cursor: pointer; } input, textarea, text { color: #4A3041 !important; font-family: 'Lato'; } .pushable .sidebar a { color: var(--primary-white-color); } .pushable .sidebar a:hover { color: var(--primary-white-color); } a .ui.label { color: var(--primary-dark-color) !important; } a:hover .ui.label { color: var(--primary-dark-color) !important; } li::marker { color: var(--primary-light-color); } /* Elements */ /*! * # Semantic UI - Button * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Button *******************************/ /*------------------- Element --------------------*/ /* Button */ /* Button defaults to using same height as input globally */ /* Text */ /* Internal Shadow */ /* Box Shadow */ /* Icon */ /* Loader */ /* @willChange: box-shadow, transform, opacity, color, background; */ /*------------------- Group --------------------*/ /*------------------- States --------------------*/ /* Hovered */ /* Focused */ /* Disabled */ /* Pressed Down */ /* Active */ /* Active + Hovered */ /* Loading */ /*------------------- Types --------------------*/ /* Or */ /* Icon */ /* Labeled */ /* hypotenuse of triangle */ /* Labeled Icon */ /* Inverted */ /* Basic */ /* Basic Hover */ /* Basic Focus */ /* Basic Down */ /* Basic Active */ /* Basic Inverted */ /* Basic Group */ /*------------------- Variations --------------------*/ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Packaged Theme */ /******************************* Button *******************************/ /*------------------- Element --------------------*/ /* Button */ /* Button defaults to using same height as input globally */ /* Text */ /* Internal Shadow */ /* Box Shadow */ /* Icon */ /* Loader */ /* @willChange: box-shadow, transform, opacity, color, background; */ /*------------------- Group --------------------*/ /*------------------- States --------------------*/ /* Hovered */ /* Focused */ /* Disabled */ /* Pressed Down */ /* Active */ /* Active + Hovered */ /* Loading */ /*------------------- Types --------------------*/ /* Or */ /* Icon */ /* Labeled */ /* hypotenuse of triangle */ /* Labeled Icon */ /* Inverted */ /* Basic */ /* Basic Hover */ /* Basic Focus */ /* Basic Down */ /* Basic Active */ /* Basic Inverted */ /* Basic Group */ /*------------------- Variations --------------------*/ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Button *******************************/ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: baseline; background: #E0E1E2 none; color: rgba(0, 0, 0, 0.6); font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em 0.25em 0em 0em; padding: 0.6875em 1.5em 0.6875em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; -webkit-text-decoration: none; text-decoration: none; border-radius: 0.25rem; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; -webkit-user-select: none; user-select: none; transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; will-change: ''; -webkit-tap-highlight-color: transparent; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.button:hover { background-color: #CACBCD; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8); } .ui.button:hover .icon { opacity: 0.85; } /*-------------- Focus ---------------*/ .ui.button:focus { background-color: #CACBCD; color: rgba(0, 0, 0, 0.8); background-image: '' !important; box-shadow: '' !important; } .ui.button:focus .icon { opacity: 0.85; } /*-------------- Down ---------------*/ .ui.button:active, .ui.active.button:active { background-color: #BABBBC; background-image: ''; color: rgba(0, 0, 0, 0.9); box-shadow: 0px 0px 0px 1px transparent inset, none; } /*-------------- Active ---------------*/ .ui.active.button { background-color: #C0C1C2; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset; color: rgba(0, 0, 0, 0.95); } .ui.active.button:hover { background-color: #C0C1C2; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.button:active { background-color: #C0C1C2; background-image: none; } /*-------------- Loading ---------------*/ /* Specificity hack */ .ui.loading.loading.loading.loading.loading.loading.button { position: relative; cursor: default; text-shadow: none !important; color: transparent !important; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.15); } .ui.loading.button:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #FFFFFF transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none; } @keyframes button-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ui.basic.loading.button:not(.inverted):before { border-color: rgba(0, 0, 0, 0.1); } .ui.basic.loading.button:not(.inverted):after { border-top-color: #767676; } /*------------------- Disabled --------------------*/ .ui.buttons .disabled.button, .ui.disabled.button, .ui.button:disabled, .ui.disabled.button:hover, .ui.disabled.active.button { cursor: default; opacity: 0.45 !important; background-image: none !important; box-shadow: none !important; pointer-events: none !important; } /* Basic Group With Disabled */ .ui.basic.buttons .ui.disabled.button { border-color: rgba(34, 36, 38, 0.5); } /******************************* Types *******************************/ /*------------------- Animated --------------------*/ .ui.animated.button { position: relative; overflow: hidden; padding-right: 0em !important; vertical-align: middle; z-index: 1; } .ui.animated.button .content { will-change: transform, opacity; } .ui.animated.button .visible.content { position: relative; margin-right: 1.5em; } .ui.animated.button .hidden.content { position: absolute; width: 100%; } /* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content { transition: right 0.3s ease 0s; } .ui.animated.button .visible.content { left: auto; right: 0%; } .ui.animated.button .hidden.content { top: 50%; left: auto; right: -100%; margin-top: -0.5em; } .ui.animated.button:focus .visible.content, .ui.animated.button:hover .visible.content { left: auto; right: 200%; } .ui.animated.button:focus .hidden.content, .ui.animated.button:hover .hidden.content { left: auto; right: 0%; } /* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content { transition: top 0.3s ease, transform 0.3s ease; } .ui.vertical.animated.button .visible.content { transform: translateY(0%); right: auto; } .ui.vertical.animated.button .hidden.content { top: -50%; left: 0%; right: auto; } .ui.vertical.animated.button:focus .visible.content, .ui.vertical.animated.button:hover .visible.content { transform: translateY(200%); right: auto; } .ui.vertical.animated.button:focus .hidden.content, .ui.vertical.animated.button:hover .hidden.content { top: 50%; right: auto; } /* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content { transition: opacity 0.3s ease, transform 0.3s ease; } .ui.fade.animated.button .visible.content { left: auto; right: auto; opacity: 1; transform: scale(1); } .ui.fade.animated.button .hidden.content { opacity: 0; left: 0%; right: auto; transform: scale(1.5); } .ui.fade.animated.button:focus .visible.content, .ui.fade.animated.button:hover .visible.content { left: auto; right: auto; opacity: 0; transform: scale(0.75); } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content { left: 0%; right: auto; opacity: 1; transform: scale(1); } /*------------------- Inverted --------------------*/ .ui.inverted.button { box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; background: transparent none; color: #FFFFFF; text-shadow: none !important; } /* Group */ .ui.inverted.buttons .button { margin: 0px 0px 0px -2px; } .ui.inverted.buttons .button:first-child { margin-left: 0em; } .ui.inverted.vertical.buttons .button { margin: 0px 0px -2px 0px; } .ui.inverted.vertical.buttons .button:first-child { margin-top: 0em; } /* States */ /* Hover */ .ui.inverted.button:hover { background: #FFFFFF; box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; color: rgba(0, 0, 0, 0.8); } /* Active / Focus */ .ui.inverted.button:focus, .ui.inverted.button.active { background: #FFFFFF; box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; color: rgba(0, 0, 0, 0.8); } /* Active Focus */ .ui.inverted.button.active:focus { background: #DCDDDE; box-shadow: 0px 0px 0px 2px #DCDDDE inset !important; color: rgba(0, 0, 0, 0.8); } /*------------------- Labeled Button --------------------*/ .ui.labeled.button:not(.icon) { display: inline-flex; flex-direction: row; background: none !important; padding: 0px !important; border: none !important; box-shadow: none !important; } .ui.labeled.button > .button { margin: 0px; } .ui.labeled.button > .label { display: flex; align-items: center; margin: 0px 0px 0px -1px !important; padding: ''; font-size: 1em; border-color: rgba(34, 36, 38, 0.15); } /* Tag */ .ui.labeled.button > .tag.label:before { width: 1.85em; height: 1.85em; } /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui.labeled.button:not([class*="left labeled"]) > .label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Left Side */ .ui[class*="left labeled"].button > .button { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ui[class*="left labeled"].button > .label { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } /*------------------- Social --------------------*/ /* Facebook */ .ui.facebook.button { background-color: #3B5998; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.facebook.button:hover { background-color: #304d8a; color: #FFFFFF; text-shadow: none; } .ui.facebook.button:active { background-color: #2d4373; color: #FFFFFF; text-shadow: none; } /* Twitter */ .ui.twitter.button { background-color: #55ACEE; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.twitter.button:hover { background-color: #35a2f4; color: #FFFFFF; text-shadow: none; } .ui.twitter.button:active { background-color: #2795e9; color: #FFFFFF; text-shadow: none; } /* Google Plus */ .ui.google.plus.button { background-color: #DD4B39; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.google.plus.button:hover { background-color: #e0321c; color: #FFFFFF; text-shadow: none; } .ui.google.plus.button:active { background-color: #c23321; color: #FFFFFF; text-shadow: none; } /* Linked In */ .ui.linkedin.button { background-color: #1F88BE; color: #FFFFFF; text-shadow: none; } .ui.linkedin.button:hover { background-color: #147baf; color: #FFFFFF; text-shadow: none; } .ui.linkedin.button:active { background-color: #186992; color: #FFFFFF; text-shadow: none; } /* YouTube */ .ui.youtube.button { background-color: #FF0000; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.youtube.button:hover { background-color: #e60000; color: #FFFFFF; text-shadow: none; } .ui.youtube.button:active { background-color: #cc0000; color: #FFFFFF; text-shadow: none; } /* Instagram */ .ui.instagram.button { background-color: #49769C; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.instagram.button:hover { background-color: #3d698e; color: #FFFFFF; text-shadow: none; } .ui.instagram.button:active { background-color: #395c79; color: #FFFFFF; text-shadow: none; } /* Pinterest */ .ui.pinterest.button { background-color: #BD081C; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.pinterest.button:hover { background-color: #ac0013; color: #FFFFFF; text-shadow: none; } .ui.pinterest.button:active { background-color: #8c0615; color: #FFFFFF; text-shadow: none; } /* VK */ .ui.vk.button { background-color: #4D7198; color: #FFFFFF; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.vk.button:hover { background-color: #41648a; color: #FFFFFF; } .ui.vk.button:active { background-color: #3c5876; color: #FFFFFF; } /*-------------- Icon ---------------*/ .ui.button > .icon:not(.button) { height: 0.875em; opacity: 0.8; margin: 0em 0.375em 0em -0.1875em; transition: opacity 0.1s ease; vertical-align: ''; color: ''; } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { margin: 0em 0.375em 0em -0.1875em; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { margin: 0em -0.1875em 0em 0.375em; } /******************************* Variations *******************************/ /*------------------- Floated --------------------*/ .ui[class*="left floated"].buttons, .ui[class*="left floated"].button { float: left; margin-left: 0em; margin-right: 0.25em; } .ui[class*="right floated"].buttons, .ui[class*="right floated"].button { float: right; margin-right: 0em; margin-left: 0.25em; } /*------------------- Compact --------------------*/ .ui.compact.buttons .button, .ui.compact.button { padding: 0.515625em 1.125em 0.515625em; } .ui.compact.icon.buttons .button, .ui.compact.icon.button { padding: 0.515625em 0.515625em 0.515625em; } .ui.compact.labeled.icon.buttons .button, .ui.compact.labeled.icon.button { padding: 0.515625em 3.5em 0.515625em; } /*------------------- Sizes --------------------*/ .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button { font-size: 0.8125rem; } .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button { font-size: 0.875rem; } .ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button { font-size: 0.9375rem; } .ui.buttons .button, .ui.buttons .or, .ui.button { font-size: 1rem; } .ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button { font-size: 1.125rem; } .ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button { font-size: 1.3125rem; } .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button { font-size: 1.4375rem; } .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button { font-size: 1.6875rem; } /*-------------- Icon Only ---------------*/ .ui.icon.buttons .button, .ui.icon.button { padding: 0.6875em 0.6875em 0.6875em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: 0.9; margin: 0em !important; vertical-align: top; } /*------------------- Basic --------------------*/ .ui.basic.buttons .button, .ui.basic.button { background: transparent none !important; color: rgba(0, 0, 0, 0.6) !important; font-weight: normal; border-radius: 0.25rem; text-transform: none; text-shadow: none !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons { box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.25rem; } .ui.basic.buttons .button { border-radius: 0em; } .ui.basic.buttons .button:hover, .ui.basic.button:hover { background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:focus, .ui.basic.button:focus { background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active, .ui.basic.button:active { background: #F8F8F8 !important; color: rgba(0, 0, 0, 0.9) !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button, .ui.basic.active.button { background: rgba(0, 0, 0, 0.05) !important; box-shadow: '' !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover { background-color: rgba(0, 0, 0, 0.05); } /* Vertical */ .ui.basic.buttons .button:hover { box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset; } .ui.basic.buttons .button:active { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset; } .ui.basic.buttons .active.button { box-shadow: '' !important; } /* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button { background-color: transparent !important; color: #F9FAFB !important; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover { color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px #ffffff inset !important; } .ui.basic.inverted.buttons .button:focus, .ui.basic.inverted.button:focus { color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px #ffffff inset !important; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active { background-color: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important; } .ui.basic.inverted.buttons .active.button, .ui.basic.inverted.active.button { background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF; text-shadow: none; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset; } .ui.basic.inverted.buttons .active.button:hover, .ui.basic.inverted.active.button:hover { background-color: rgba(255, 255, 255, 0.15); box-shadow: 0px 0px 0px 2px #ffffff inset !important; } /* Basic Group */ .ui.basic.buttons .button { border-left: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.vertical.buttons .button { border-left: none; } .ui.basic.vertical.buttons .button { border-left-width: 0px; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.basic.vertical.buttons .button:first-child { border-top-width: 0px; } /*-------------- Labeled Icon ---------------*/ .ui.labeled.icon.buttons .button, .ui.labeled.icon.button { position: relative; padding-left: 3.875em !important; padding-right: 1.5em !important; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { position: absolute; height: 100%; line-height: 1; border-radius: 0px; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; margin: 0em; width: 2.375em; background-color: rgba(0, 0, 0, 0.05); color: ''; box-shadow: -1px 0px 0px 0px transparent inset; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { top: 0em; left: 0em; } /* Right Labeled */ .ui[class*="right labeled"].icon.button { padding-right: 3.875em !important; padding-left: 1.5em !important; } .ui[class*="right labeled"].icon.button > .icon { left: auto; right: 0em; border-radius: 0px; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0px 0px 0px transparent inset; } .ui.labeled.icon.buttons > .button > .icon:before, .ui.labeled.icon.button > .icon:before, .ui.labeled.icon.buttons > .button > .icon:after, .ui.labeled.icon.button > .icon:after { display: block; position: absolute; width: 100%; top: 50%; text-align: center; transform: translateY(-50%); } /* Loading */ .ui.labeled.icon.button > .icon.loading { animation: none; } .ui.labeled.icon.button > .icon.loading:before { animation: labeled-button-icon-loading 2s linear infinite; } @keyframes labeled-button-icon-loading { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .ui.labeled.icon.buttons .button > .icon { border-radius: 0em; } .ui.labeled.icon.buttons .button:first-child > .icon { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .ui.labeled.icon.buttons .button:last-child > .icon { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon { border-radius: 0em; border-top-left-radius: 0.25rem; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon { border-radius: 0em; border-bottom-left-radius: 0.25rem; } /* Fluid Labeled */ .ui.fluid[class*="left labeled"].icon.button, .ui.fluid[class*="right labeled"].icon.button { padding-left: 1.5em !important; padding-right: 1.5em !important; } /*-------------- Toggle ---------------*/ /* Toggle (Modifies active state to give affordances) */ .ui.toggle.buttons .active.button, .ui.buttons .button.toggle.active, .ui.button.toggle.active { background-color: #21BA45 !important; box-shadow: none !important; text-shadow: none; color: #FFFFFF !important; } .ui.button.toggle.active:hover { background-color: #16ab39 !important; text-shadow: none; color: #FFFFFF !important; } /*-------------- Circular ---------------*/ .ui.circular.button { border-radius: 10em; } .ui.circular.button > .icon { width: 1em; vertical-align: baseline; } /*------------------- Or Buttons --------------------*/ .ui.buttons .or { position: relative; width: 0.3em; height: 2.375em; z-index: 3; } .ui.buttons .or:before { position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #FFFFFF; text-shadow: none; margin-top: -0.84375em; margin-left: -0.84375em; width: 1.6875em; height: 1.6875em; line-height: 1.6875em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0px 0px 0px 1px transparent inset; } .ui.buttons .or[data-text]:before { content: attr(data-text); } /* Fluid Or */ .ui.fluid.buttons .or { width: 0em !important; } .ui.fluid.buttons .or:after { display: none; } /*------------------- Attached --------------------*/ /* Singular */ .ui.attached.button { position: relative; display: block; margin: 0em; border-radius: 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important; } /* Top / Bottom */ .ui.attached.top.button { border-radius: 0.25rem 0.25rem 0em 0em; } .ui.attached.bottom.button { border-radius: 0em 0em 0.25rem 0.25rem; } /* Left / Right */ .ui.left.attached.button { display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.25rem 0em 0em 0.25rem; } .ui.right.attached.button { display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0em 0.25rem 0.25rem 0em; } /* Plural */ .ui.attached.buttons { position: relative; display: flex; border-radius: 0em; width: auto !important; z-index: 2; margin-left: -1px; margin-right: -1px; } .ui.attached.buttons .button { margin: 0em; } .ui.attached.buttons .button:first-child { border-radius: 0em; } .ui.attached.buttons .button:last-child { border-radius: 0em; } /* Top / Bottom */ .ui[class*="top attached"].buttons { margin-bottom: -1px; border-radius: 0.25rem 0.25rem 0em 0em; } .ui[class*="top attached"].buttons .button:first-child { border-radius: 0.25rem 0em 0em 0em; } .ui[class*="top attached"].buttons .button:last-child { border-radius: 0em 0.25rem 0em 0em; } .ui[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0em 0em 0.25rem 0.25rem; } .ui[class*="bottom attached"].buttons .button:first-child { border-radius: 0em 0em 0em 0.25rem; } .ui[class*="bottom attached"].buttons .button:last-child { border-radius: 0em 0em 0.25rem 0em; } /* Left / Right */ .ui[class*="left attached"].buttons { display: inline-flex; margin-right: 0em; margin-left: -1px; border-radius: 0em 0.25rem 0.25rem 0em; } .ui[class*="left attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0em 0.25rem 0em 0em; } .ui[class*="left attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0em 0em 0.25rem 0em; } .ui[class*="right attached"].buttons { display: inline-flex; margin-left: 0em; margin-right: -1px; border-radius: 0.25rem 0em 0em 0.25rem; } .ui[class*="right attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0.25rem 0em 0em 0em; } .ui[class*="right attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0em 0em 0em 0.25rem; } /*------------------- Fluid --------------------*/ .ui.fluid.buttons, .ui.fluid.button { width: 100%; } .ui.fluid.button { display: block; } .ui.two.buttons { width: 100%; } .ui.two.buttons > .button { width: 50%; } .ui.three.buttons { width: 100%; } .ui.three.buttons > .button { width: 33.333%; } .ui.four.buttons { width: 100%; } .ui.four.buttons > .button { width: 25%; } .ui.five.buttons { width: 100%; } .ui.five.buttons > .button { width: 20%; } .ui.six.buttons { width: 100%; } .ui.six.buttons > .button { width: 16.666%; } .ui.seven.buttons { width: 100%; } .ui.seven.buttons > .button { width: 14.285%; } .ui.eight.buttons { width: 100%; } .ui.eight.buttons > .button { width: 12.5%; } .ui.nine.buttons { width: 100%; } .ui.nine.buttons > .button { width: 11.11%; } .ui.ten.buttons { width: 100%; } .ui.ten.buttons > .button { width: 10%; } .ui.eleven.buttons { width: 100%; } .ui.eleven.buttons > .button { width: 9.09%; } .ui.twelve.buttons { width: 100%; } .ui.twelve.buttons > .button { width: 8.3333%; } /* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button { display: flex; width: auto; } .ui.two.vertical.buttons > .button { height: 50%; } .ui.three.vertical.buttons > .button { height: 33.333%; } .ui.four.vertical.buttons > .button { height: 25%; } .ui.five.vertical.buttons > .button { height: 20%; } .ui.six.vertical.buttons > .button { height: 16.666%; } .ui.seven.vertical.buttons > .button { height: 14.285%; } .ui.eight.vertical.buttons > .button { height: 12.5%; } .ui.nine.vertical.buttons > .button { height: 11.11%; } .ui.ten.vertical.buttons > .button { height: 10%; } .ui.eleven.vertical.buttons > .button { height: 9.09%; } .ui.twelve.vertical.buttons > .button { height: 8.3333%; } /*------------------- Colors --------------------*/ /*--- Black ---*/ .ui.black.buttons .button, .ui.black.button { background-color: #1B1C1D; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.black.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.black.buttons .button:hover, .ui.black.button:hover { background-color: #27292a; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:focus, .ui.black.button:focus { background-color: #2f3032; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:active, .ui.black.button:active { background-color: #343637; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .active.button, .ui.black.buttons .active.button:active, .ui.black.active.button, .ui.black.button .active.button:active { background-color: #0f0f10; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.black.buttons .button, .ui.basic.black.button { box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; color: #1B1C1D !important; } .ui.basic.black.buttons .button:hover, .ui.basic.black.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #27292a inset !important; color: #27292a !important; } .ui.basic.black.buttons .button:focus, .ui.basic.black.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #2f3032 inset !important; color: #27292a !important; } .ui.basic.black.buttons .active.button, .ui.basic.black.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #0f0f10 inset !important; color: #343637 !important; } .ui.basic.black.buttons .button:active, .ui.basic.black.button:active { box-shadow: 0px 0px 0px 1px #343637 inset !important; color: #343637 !important; } .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.black.buttons .button, .ui.inverted.black.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; color: #FFFFFF; } .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover, .ui.inverted.black.buttons .button:focus, .ui.inverted.black.button:focus, .ui.inverted.black.buttons .button.active, .ui.inverted.black.button.active, .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover { background-color: #000000; } .ui.inverted.black.buttons .button:focus, .ui.inverted.black.button:focus { background-color: #000000; } .ui.inverted.black.buttons .active.button, .ui.inverted.black.active.button { background-color: #000000; } .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active { background-color: #000000; } /* Inverted Basic */ .ui.inverted.black.basic.buttons .button, .ui.inverted.black.buttons .basic.button, .ui.inverted.black.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.buttons .basic.button:hover, .ui.inverted.black.basic.button:hover { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.button:focus { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #545454 !important; } .ui.inverted.black.basic.buttons .active.button, .ui.inverted.black.buttons .basic.active.button, .ui.inverted.black.basic.active.button { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active, .ui.inverted.black.basic.button:active { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } /*--- Grey ---*/ .ui.grey.buttons .button, .ui.grey.button { background-color: #767676; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.grey.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.grey.buttons .button:hover, .ui.grey.button:hover { background-color: #838383; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:focus, .ui.grey.button:focus { background-color: #8a8a8a; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:active, .ui.grey.button:active { background-color: #909090; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .active.button, .ui.grey.buttons .active.button:active, .ui.grey.active.button, .ui.grey.button .active.button:active { background-color: #696969; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.grey.buttons .button, .ui.basic.grey.button { box-shadow: 0px 0px 0px 1px #767676 inset !important; color: #767676 !important; } .ui.basic.grey.buttons .button:hover, .ui.basic.grey.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #838383 inset !important; color: #838383 !important; } .ui.basic.grey.buttons .button:focus, .ui.basic.grey.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #8a8a8a inset !important; color: #838383 !important; } .ui.basic.grey.buttons .active.button, .ui.basic.grey.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #696969 inset !important; color: #909090 !important; } .ui.basic.grey.buttons .button:active, .ui.basic.grey.button:active { box-shadow: 0px 0px 0px 1px #909090 inset !important; color: #909090 !important; } .ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.grey.buttons .button, .ui.inverted.grey.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; color: #FFFFFF; } .ui.inverted.grey.buttons .button:hover, .ui.inverted.grey.button:hover, .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus, .ui.inverted.grey.buttons .button.active, .ui.inverted.grey.button.active, .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.grey.buttons .button:hover, .ui.inverted.grey.button:hover { background-color: #cfd0d2; } .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus { background-color: #c7c9cb; } .ui.inverted.grey.buttons .active.button, .ui.inverted.grey.active.button { background-color: #cfd0d2; } .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.button:active { background-color: #c2c4c5; } /* Inverted Basic */ .ui.inverted.grey.basic.buttons .button, .ui.inverted.grey.buttons .basic.button, .ui.inverted.grey.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:hover, .ui.inverted.grey.buttons .basic.button:hover, .ui.inverted.grey.basic.button:hover { box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.button:focus { box-shadow: 0px 0px 0px 2px #c7c9cb inset !important; color: #DCDDDE !important; } .ui.inverted.grey.basic.buttons .active.button, .ui.inverted.grey.buttons .basic.active.button, .ui.inverted.grey.basic.active.button { box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:active, .ui.inverted.grey.buttons .basic.button:active, .ui.inverted.grey.basic.button:active { box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important; color: #FFFFFF !important; } /*--- Brown ---*/ .ui.brown.buttons .button, .ui.brown.button { background-color: #A5673F; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.brown.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.brown.buttons .button:hover, .ui.brown.button:hover { background-color: #975b33; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:focus, .ui.brown.button:focus { background-color: #90532b; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:active, .ui.brown.button:active { background-color: #805031; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .active.button, .ui.brown.buttons .active.button:active, .ui.brown.active.button, .ui.brown.button .active.button:active { background-color: #995a31; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.brown.buttons .button, .ui.basic.brown.button { box-shadow: 0px 0px 0px 1px #A5673F inset !important; color: #A5673F !important; } .ui.basic.brown.buttons .button:hover, .ui.basic.brown.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #975b33 inset !important; color: #975b33 !important; } .ui.basic.brown.buttons .button:focus, .ui.basic.brown.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #90532b inset !important; color: #975b33 !important; } .ui.basic.brown.buttons .active.button, .ui.basic.brown.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #995a31 inset !important; color: #805031 !important; } .ui.basic.brown.buttons .button:active, .ui.basic.brown.button:active { box-shadow: 0px 0px 0px 1px #805031 inset !important; color: #805031 !important; } .ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.brown.buttons .button, .ui.inverted.brown.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D67C1C inset !important; color: #D67C1C; } .ui.inverted.brown.buttons .button:hover, .ui.inverted.brown.button:hover, .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.button:focus, .ui.inverted.brown.buttons .button.active, .ui.inverted.brown.button.active, .ui.inverted.brown.buttons .button:active, .ui.inverted.brown.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.brown.buttons .button:hover, .ui.inverted.brown.button:hover { background-color: #c86f11; } .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.button:focus { background-color: #c16808; } .ui.inverted.brown.buttons .active.button, .ui.inverted.brown.active.button { background-color: #cc6f0d; } .ui.inverted.brown.buttons .button:active, .ui.inverted.brown.button:active { background-color: #a96216; } /* Inverted Basic */ .ui.inverted.brown.basic.buttons .button, .ui.inverted.brown.buttons .basic.button, .ui.inverted.brown.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.brown.basic.buttons .button:hover, .ui.inverted.brown.buttons .basic.button:hover, .ui.inverted.brown.basic.button:hover { box-shadow: 0px 0px 0px 2px #c86f11 inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .button:focus, .ui.inverted.brown.basic.buttons .button:focus, .ui.inverted.brown.basic.button:focus { box-shadow: 0px 0px 0px 2px #c16808 inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .active.button, .ui.inverted.brown.buttons .basic.active.button, .ui.inverted.brown.basic.active.button { box-shadow: 0px 0px 0px 2px #cc6f0d inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .button:active, .ui.inverted.brown.buttons .basic.button:active, .ui.inverted.brown.basic.button:active { box-shadow: 0px 0px 0px 2px #a96216 inset !important; color: #D67C1C !important; } /*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button { background-color: #2185D0; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.blue.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.blue.buttons .button:hover, .ui.blue.button:hover { background-color: #1678c2; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:focus, .ui.blue.button:focus { background-color: #0d71bb; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:active, .ui.blue.button:active { background-color: #1a69a4; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .active.button, .ui.blue.buttons .active.button:active, .ui.blue.active.button, .ui.blue.button .active.button:active { background-color: #1279c6; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.blue.buttons .button, .ui.basic.blue.button { box-shadow: 0px 0px 0px 1px #2185D0 inset !important; color: #2185D0 !important; } .ui.basic.blue.buttons .button:hover, .ui.basic.blue.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #1678c2 inset !important; color: #1678c2 !important; } .ui.basic.blue.buttons .button:focus, .ui.basic.blue.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #0d71bb inset !important; color: #1678c2 !important; } .ui.basic.blue.buttons .active.button, .ui.basic.blue.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #1279c6 inset !important; color: #1a69a4 !important; } .ui.basic.blue.buttons .button:active, .ui.basic.blue.button:active { box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; color: #1a69a4 !important; } .ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.blue.buttons .button, .ui.inverted.blue.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #54C8FF inset !important; color: #54C8FF; } .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover, .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.button:focus, .ui.inverted.blue.buttons .button.active, .ui.inverted.blue.button.active, .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover { background-color: #3ac0ff; } .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.button:focus { background-color: #2bbbff; } .ui.inverted.blue.buttons .active.button, .ui.inverted.blue.active.button { background-color: #3ac0ff; } .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active { background-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.blue.basic.buttons .button, .ui.inverted.blue.buttons .basic.button, .ui.inverted.blue.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.buttons .basic.button:hover, .ui.inverted.blue.basic.button:hover { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.button:focus { box-shadow: 0px 0px 0px 2px #2bbbff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .active.button, .ui.inverted.blue.buttons .basic.active.button, .ui.inverted.blue.basic.active.button { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active, .ui.inverted.blue.basic.button:active { box-shadow: 0px 0px 0px 2px #21b8ff inset !important; color: #54C8FF !important; } /*--- Green ---*/ .ui.green.buttons .button, .ui.green.button { background-color: #21BA45; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.green.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.green.buttons .button:hover, .ui.green.button:hover { background-color: #16ab39; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:focus, .ui.green.button:focus { background-color: #0ea432; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:active, .ui.green.button:active { background-color: #198f35; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .active.button, .ui.green.buttons .active.button:active, .ui.green.active.button, .ui.green.button .active.button:active { background-color: #13ae38; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.green.buttons .button, .ui.basic.green.button { box-shadow: 0px 0px 0px 1px #21BA45 inset !important; color: #21BA45 !important; } .ui.basic.green.buttons .button:hover, .ui.basic.green.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #16ab39 inset !important; color: #16ab39 !important; } .ui.basic.green.buttons .button:focus, .ui.basic.green.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #0ea432 inset !important; color: #16ab39 !important; } .ui.basic.green.buttons .active.button, .ui.basic.green.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #13ae38 inset !important; color: #198f35 !important; } .ui.basic.green.buttons .button:active, .ui.basic.green.button:active { box-shadow: 0px 0px 0px 1px #198f35 inset !important; color: #198f35 !important; } .ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.green.buttons .button, .ui.inverted.green.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #2ECC40 inset !important; color: #2ECC40; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover, .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus, .ui.inverted.green.buttons .button.active, .ui.inverted.green.button.active, .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover { background-color: #22be34; } .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus { background-color: #19b82b; } .ui.inverted.green.buttons .active.button, .ui.inverted.green.active.button { background-color: #1fc231; } .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active { background-color: #25a233; } /* Inverted Basic */ .ui.inverted.green.basic.buttons .button, .ui.inverted.green.buttons .basic.button, .ui.inverted.green.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.buttons .basic.button:hover, .ui.inverted.green.basic.button:hover { box-shadow: 0px 0px 0px 2px #22be34 inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.button:focus { box-shadow: 0px 0px 0px 2px #19b82b inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .active.button, .ui.inverted.green.buttons .basic.active.button, .ui.inverted.green.basic.active.button { box-shadow: 0px 0px 0px 2px #1fc231 inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active, .ui.inverted.green.basic.button:active { box-shadow: 0px 0px 0px 2px #25a233 inset !important; color: #2ECC40 !important; } /*--- Orange ---*/ .ui.orange.buttons .button, .ui.orange.button { background-color: #F2711C; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.orange.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.orange.buttons .button:hover, .ui.orange.button:hover { background-color: #f26202; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:focus, .ui.orange.button:focus { background-color: #e55b00; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:active, .ui.orange.button:active { background-color: #cf590c; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .active.button, .ui.orange.buttons .active.button:active, .ui.orange.active.button, .ui.orange.button .active.button:active { background-color: #f56100; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.orange.buttons .button, .ui.basic.orange.button { box-shadow: 0px 0px 0px 1px #F2711C inset !important; color: #F2711C !important; } .ui.basic.orange.buttons .button:hover, .ui.basic.orange.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #f26202 inset !important; color: #f26202 !important; } .ui.basic.orange.buttons .button:focus, .ui.basic.orange.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #e55b00 inset !important; color: #f26202 !important; } .ui.basic.orange.buttons .active.button, .ui.basic.orange.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #f56100 inset !important; color: #cf590c !important; } .ui.basic.orange.buttons .button:active, .ui.basic.orange.button:active { box-shadow: 0px 0px 0px 1px #cf590c inset !important; color: #cf590c !important; } .ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.orange.buttons .button, .ui.inverted.orange.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF851B inset !important; color: #FF851B; } .ui.inverted.orange.buttons .button:hover, .ui.inverted.orange.button:hover, .ui.inverted.orange.buttons .button:focus, .ui.inverted.orange.button:focus, .ui.inverted.orange.buttons .button.active, .ui.inverted.orange.button.active, .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.orange.buttons .button:hover, .ui.inverted.orange.button:hover { background-color: #ff7701; } .ui.inverted.orange.buttons .button:focus, .ui.inverted.orange.button:focus { background-color: #f17000; } .ui.inverted.orange.buttons .active.button, .ui.inverted.orange.active.button { background-color: #ff7701; } .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active { background-color: #e76b00; } /* Inverted Basic */ .ui.inverted.orange.basic.buttons .button, .ui.inverted.orange.buttons .basic.button, .ui.inverted.orange.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.orange.basic.buttons .button:hover, .ui.inverted.orange.buttons .basic.button:hover, .ui.inverted.orange.basic.button:hover { box-shadow: 0px 0px 0px 2px #ff7701 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .button:focus, .ui.inverted.orange.basic.buttons .button:focus, .ui.inverted.orange.basic.button:focus { box-shadow: 0px 0px 0px 2px #f17000 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .active.button, .ui.inverted.orange.buttons .basic.active.button, .ui.inverted.orange.basic.active.button { box-shadow: 0px 0px 0px 2px #ff7701 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .button:active, .ui.inverted.orange.buttons .basic.button:active, .ui.inverted.orange.basic.button:active { box-shadow: 0px 0px 0px 2px #e76b00 inset !important; color: #FF851B !important; } /*--- Pink ---*/ .ui.pink.buttons .button, .ui.pink.button { background-color: #E03997; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.pink.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.pink.buttons .button:hover, .ui.pink.button:hover { background-color: #e61a8d; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:focus, .ui.pink.button:focus { background-color: #e10f85; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:active, .ui.pink.button:active { background-color: #c71f7e; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .active.button, .ui.pink.buttons .active.button:active, .ui.pink.active.button, .ui.pink.button .active.button:active { background-color: #ea158d; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.pink.buttons .button, .ui.basic.pink.button { box-shadow: 0px 0px 0px 1px #E03997 inset !important; color: #E03997 !important; } .ui.basic.pink.buttons .button:hover, .ui.basic.pink.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #e61a8d inset !important; color: #e61a8d !important; } .ui.basic.pink.buttons .button:focus, .ui.basic.pink.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #e10f85 inset !important; color: #e61a8d !important; } .ui.basic.pink.buttons .active.button, .ui.basic.pink.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #ea158d inset !important; color: #c71f7e !important; } .ui.basic.pink.buttons .button:active, .ui.basic.pink.button:active { box-shadow: 0px 0px 0px 1px #c71f7e inset !important; color: #c71f7e !important; } .ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.pink.buttons .button, .ui.inverted.pink.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF8EDF inset !important; color: #FF8EDF; } .ui.inverted.pink.buttons .button:hover, .ui.inverted.pink.button:hover, .ui.inverted.pink.buttons .button:focus, .ui.inverted.pink.button:focus, .ui.inverted.pink.buttons .button.active, .ui.inverted.pink.button.active, .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.pink.buttons .button:hover, .ui.inverted.pink.button:hover { background-color: #ff74d8; } .ui.inverted.pink.buttons .button:focus, .ui.inverted.pink.button:focus { background-color: #ff65d3; } .ui.inverted.pink.buttons .active.button, .ui.inverted.pink.active.button { background-color: #ff74d8; } .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active { background-color: #ff5bd1; } /* Inverted Basic */ .ui.inverted.pink.basic.buttons .button, .ui.inverted.pink.buttons .basic.button, .ui.inverted.pink.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.pink.basic.buttons .button:hover, .ui.inverted.pink.buttons .basic.button:hover, .ui.inverted.pink.basic.button:hover { box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .button:focus, .ui.inverted.pink.basic.buttons .button:focus, .ui.inverted.pink.basic.button:focus { box-shadow: 0px 0px 0px 2px #ff65d3 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .active.button, .ui.inverted.pink.buttons .basic.active.button, .ui.inverted.pink.basic.active.button { box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .button:active, .ui.inverted.pink.buttons .basic.button:active, .ui.inverted.pink.basic.button:active { box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important; color: #FF8EDF !important; } /*--- Violet ---*/ .ui.violet.buttons .button, .ui.violet.button { background-color: #6435C9; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.violet.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.violet.buttons .button:hover, .ui.violet.button:hover { background-color: #5829bb; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:focus, .ui.violet.button:focus { background-color: #4f20b5; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:active, .ui.violet.button:active { background-color: #502aa1; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .active.button, .ui.violet.buttons .active.button:active, .ui.violet.active.button, .ui.violet.button .active.button:active { background-color: #5626bf; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.violet.buttons .button, .ui.basic.violet.button { box-shadow: 0px 0px 0px 1px #6435C9 inset !important; color: #6435C9 !important; } .ui.basic.violet.buttons .button:hover, .ui.basic.violet.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #5829bb inset !important; color: #5829bb !important; } .ui.basic.violet.buttons .button:focus, .ui.basic.violet.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #4f20b5 inset !important; color: #5829bb !important; } .ui.basic.violet.buttons .active.button, .ui.basic.violet.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #5626bf inset !important; color: #502aa1 !important; } .ui.basic.violet.buttons .button:active, .ui.basic.violet.button:active { box-shadow: 0px 0px 0px 1px #502aa1 inset !important; color: #502aa1 !important; } .ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.violet.buttons .button, .ui.inverted.violet.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #A291FB inset !important; color: #A291FB; } .ui.inverted.violet.buttons .button:hover, .ui.inverted.violet.button:hover, .ui.inverted.violet.buttons .button:focus, .ui.inverted.violet.button:focus, .ui.inverted.violet.buttons .button.active, .ui.inverted.violet.button.active, .ui.inverted.violet.buttons .button:active, .ui.inverted.violet.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.violet.buttons .button:hover, .ui.inverted.violet.button:hover { background-color: #8a73ff; } .ui.inverted.violet.buttons .button:focus, .ui.inverted.violet.button:focus { background-color: #7d64ff; } .ui.inverted.violet.buttons .active.button, .ui.inverted.violet.active.button { background-color: #8a73ff; } .ui.inverted.violet.buttons .button:active, .ui.inverted.violet.button:active { background-color: #7860f9; } /* Inverted Basic */ .ui.inverted.violet.basic.buttons .button, .ui.inverted.violet.buttons .basic.button, .ui.inverted.violet.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.violet.basic.buttons .button:hover, .ui.inverted.violet.buttons .basic.button:hover, .ui.inverted.violet.basic.button:hover { box-shadow: 0px 0px 0px 2px #8a73ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .button:focus, .ui.inverted.violet.basic.buttons .button:focus, .ui.inverted.violet.basic.button:focus { box-shadow: 0px 0px 0px 2px #7d64ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .active.button, .ui.inverted.violet.buttons .basic.active.button, .ui.inverted.violet.basic.active.button { box-shadow: 0px 0px 0px 2px #8a73ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .button:active, .ui.inverted.violet.buttons .basic.button:active, .ui.inverted.violet.basic.button:active { box-shadow: 0px 0px 0px 2px #7860f9 inset !important; color: #A291FB !important; } /*--- Purple ---*/ .ui.purple.buttons .button, .ui.purple.button { background-color: #A333C8; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.purple.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.purple.buttons .button:hover, .ui.purple.button:hover { background-color: #9627ba; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:focus, .ui.purple.button:focus { background-color: #8f1eb4; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:active, .ui.purple.button:active { background-color: #82299f; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .active.button, .ui.purple.buttons .active.button:active, .ui.purple.active.button, .ui.purple.button .active.button:active { background-color: #9724be; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.purple.buttons .button, .ui.basic.purple.button { box-shadow: 0px 0px 0px 1px #A333C8 inset !important; color: #A333C8 !important; } .ui.basic.purple.buttons .button:hover, .ui.basic.purple.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #9627ba inset !important; color: #9627ba !important; } .ui.basic.purple.buttons .button:focus, .ui.basic.purple.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important; color: #9627ba !important; } .ui.basic.purple.buttons .active.button, .ui.basic.purple.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #9724be inset !important; color: #82299f !important; } .ui.basic.purple.buttons .button:active, .ui.basic.purple.button:active { box-shadow: 0px 0px 0px 1px #82299f inset !important; color: #82299f !important; } .ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.purple.buttons .button, .ui.inverted.purple.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #DC73FF inset !important; color: #DC73FF; } .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover, .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.button:focus, .ui.inverted.purple.buttons .button.active, .ui.inverted.purple.button.active, .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover { background-color: #d65aff; } .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.button:focus { background-color: #d24aff; } .ui.inverted.purple.buttons .active.button, .ui.inverted.purple.active.button { background-color: #d65aff; } .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active { background-color: #cf40ff; } /* Inverted Basic */ .ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.buttons .basic.button, .ui.inverted.purple.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.buttons .basic.button:hover, .ui.inverted.purple.basic.button:hover { box-shadow: 0px 0px 0px 2px #d65aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.button:focus { box-shadow: 0px 0px 0px 2px #d24aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .active.button, .ui.inverted.purple.buttons .basic.active.button, .ui.inverted.purple.basic.active.button { box-shadow: 0px 0px 0px 2px #d65aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active, .ui.inverted.purple.basic.button:active { box-shadow: 0px 0px 0px 2px #cf40ff inset !important; color: #DC73FF !important; } /*--- Red ---*/ .ui.red.buttons .button, .ui.red.button { background-color: #DB2828; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.red.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.red.buttons .button:hover, .ui.red.button:hover { background-color: #d01919; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:focus, .ui.red.button:focus { background-color: #ca1010; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:active, .ui.red.button:active { background-color: #b21e1e; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .active.button, .ui.red.buttons .active.button:active, .ui.red.active.button, .ui.red.button .active.button:active { background-color: #d41515; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.red.buttons .button, .ui.basic.red.button { box-shadow: 0px 0px 0px 1px #DB2828 inset !important; color: #DB2828 !important; } .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #d01919 inset !important; color: #d01919 !important; } .ui.basic.red.buttons .button:focus, .ui.basic.red.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #ca1010 inset !important; color: #d01919 !important; } .ui.basic.red.buttons .active.button, .ui.basic.red.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #d41515 inset !important; color: #b21e1e !important; } .ui.basic.red.buttons .button:active, .ui.basic.red.button:active { box-shadow: 0px 0px 0px 1px #b21e1e inset !important; color: #b21e1e !important; } .ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.red.buttons .button, .ui.inverted.red.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF695E inset !important; color: #FF695E; } .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover, .ui.inverted.red.buttons .button:focus, .ui.inverted.red.button:focus, .ui.inverted.red.buttons .button.active, .ui.inverted.red.button.active, .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover { background-color: #ff5144; } .ui.inverted.red.buttons .button:focus, .ui.inverted.red.button:focus { background-color: #ff4335; } .ui.inverted.red.buttons .active.button, .ui.inverted.red.active.button { background-color: #ff5144; } .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active { background-color: #ff392b; } /* Inverted Basic */ .ui.inverted.red.basic.buttons .button, .ui.inverted.red.buttons .basic.button, .ui.inverted.red.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.buttons .basic.button:hover, .ui.inverted.red.basic.button:hover { box-shadow: 0px 0px 0px 2px #ff5144 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.button:focus { box-shadow: 0px 0px 0px 2px #ff4335 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .active.button, .ui.inverted.red.buttons .basic.active.button, .ui.inverted.red.basic.active.button { box-shadow: 0px 0px 0px 2px #ff5144 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active, .ui.inverted.red.basic.button:active { box-shadow: 0px 0px 0px 2px #ff392b inset !important; color: #FF695E !important; } /*--- Teal ---*/ .ui.teal.buttons .button, .ui.teal.button { background-color: #00B5AD; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.teal.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.teal.buttons .button:hover, .ui.teal.button:hover { background-color: #009c95; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:focus, .ui.teal.button:focus { background-color: #008c86; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:active, .ui.teal.button:active { background-color: #00827c; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active, .ui.teal.active.button, .ui.teal.button .active.button:active { background-color: #009c95; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.teal.buttons .button, .ui.basic.teal.button { box-shadow: 0px 0px 0px 1px #00B5AD inset !important; color: #00B5AD !important; } .ui.basic.teal.buttons .button:hover, .ui.basic.teal.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #009c95 inset !important; color: #009c95 !important; } .ui.basic.teal.buttons .button:focus, .ui.basic.teal.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #008c86 inset !important; color: #009c95 !important; } .ui.basic.teal.buttons .active.button, .ui.basic.teal.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #009c95 inset !important; color: #00827c !important; } .ui.basic.teal.buttons .button:active, .ui.basic.teal.button:active { box-shadow: 0px 0px 0px 1px #00827c inset !important; color: #00827c !important; } .ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.teal.buttons .button, .ui.inverted.teal.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #6DFFFF inset !important; color: #6DFFFF; } .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover, .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.button:focus, .ui.inverted.teal.buttons .button.active, .ui.inverted.teal.button.active, .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover { background-color: #54ffff; } .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.button:focus { background-color: #44ffff; } .ui.inverted.teal.buttons .active.button, .ui.inverted.teal.active.button { background-color: #54ffff; } .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active { background-color: #3affff; } /* Inverted Basic */ .ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.buttons .basic.button, .ui.inverted.teal.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.buttons .basic.button:hover, .ui.inverted.teal.basic.button:hover { box-shadow: 0px 0px 0px 2px #54ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.button:focus { box-shadow: 0px 0px 0px 2px #44ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .active.button, .ui.inverted.teal.buttons .basic.active.button, .ui.inverted.teal.basic.active.button { box-shadow: 0px 0px 0px 2px #54ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active, .ui.inverted.teal.basic.button:active { box-shadow: 0px 0px 0px 2px #3affff inset !important; color: #6DFFFF !important; } /*--- Olive ---*/ .ui.olive.buttons .button, .ui.olive.button { background-color: #B5CC18; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.olive.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.olive.buttons .button:hover, .ui.olive.button:hover { background-color: #a7bd0d; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:focus, .ui.olive.button:focus { background-color: #a0b605; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:active, .ui.olive.button:active { background-color: #8d9e13; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .active.button, .ui.olive.buttons .active.button:active, .ui.olive.active.button, .ui.olive.button .active.button:active { background-color: #aac109; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.olive.buttons .button, .ui.basic.olive.button { box-shadow: 0px 0px 0px 1px #B5CC18 inset !important; color: #B5CC18 !important; } .ui.basic.olive.buttons .button:hover, .ui.basic.olive.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #a7bd0d inset !important; color: #a7bd0d !important; } .ui.basic.olive.buttons .button:focus, .ui.basic.olive.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #a0b605 inset !important; color: #a7bd0d !important; } .ui.basic.olive.buttons .active.button, .ui.basic.olive.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #aac109 inset !important; color: #8d9e13 !important; } .ui.basic.olive.buttons .button:active, .ui.basic.olive.button:active { box-shadow: 0px 0px 0px 1px #8d9e13 inset !important; color: #8d9e13 !important; } .ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.olive.buttons .button, .ui.inverted.olive.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D9E778 inset !important; color: #D9E778; } .ui.inverted.olive.buttons .button:hover, .ui.inverted.olive.button:hover, .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.button:focus, .ui.inverted.olive.buttons .button.active, .ui.inverted.olive.button.active, .ui.inverted.olive.buttons .button:active, .ui.inverted.olive.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.olive.buttons .button:hover, .ui.inverted.olive.button:hover { background-color: #d8ea5c; } .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.button:focus { background-color: #daef47; } .ui.inverted.olive.buttons .active.button, .ui.inverted.olive.active.button { background-color: #daed59; } .ui.inverted.olive.buttons .button:active, .ui.inverted.olive.button:active { background-color: #cddf4d; } /* Inverted Basic */ .ui.inverted.olive.basic.buttons .button, .ui.inverted.olive.buttons .basic.button, .ui.inverted.olive.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.olive.basic.buttons .button:hover, .ui.inverted.olive.buttons .basic.button:hover, .ui.inverted.olive.basic.button:hover { box-shadow: 0px 0px 0px 2px #d8ea5c inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .button:focus, .ui.inverted.olive.basic.buttons .button:focus, .ui.inverted.olive.basic.button:focus { box-shadow: 0px 0px 0px 2px #daef47 inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .active.button, .ui.inverted.olive.buttons .basic.active.button, .ui.inverted.olive.basic.active.button { box-shadow: 0px 0px 0px 2px #daed59 inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .button:active, .ui.inverted.olive.buttons .basic.button:active, .ui.inverted.olive.basic.button:active { box-shadow: 0px 0px 0px 2px #cddf4d inset !important; color: #D9E778 !important; } /*--- Yellow ---*/ .ui.yellow.buttons .button, .ui.yellow.button { background-color: #FBBD08; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.yellow.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.yellow.buttons .button:hover, .ui.yellow.button:hover { background-color: #eaae00; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:focus, .ui.yellow.button:focus { background-color: #daa300; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:active, .ui.yellow.button:active { background-color: #cd9903; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .active.button, .ui.yellow.buttons .active.button:active, .ui.yellow.active.button, .ui.yellow.button .active.button:active { background-color: #eaae00; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.yellow.buttons .button, .ui.basic.yellow.button { box-shadow: 0px 0px 0px 1px #FBBD08 inset !important; color: #FBBD08 !important; } .ui.basic.yellow.buttons .button:hover, .ui.basic.yellow.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #eaae00 inset !important; color: #eaae00 !important; } .ui.basic.yellow.buttons .button:focus, .ui.basic.yellow.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #daa300 inset !important; color: #eaae00 !important; } .ui.basic.yellow.buttons .active.button, .ui.basic.yellow.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #eaae00 inset !important; color: #cd9903 !important; } .ui.basic.yellow.buttons .button:active, .ui.basic.yellow.button:active { box-shadow: 0px 0px 0px 1px #cd9903 inset !important; color: #cd9903 !important; } .ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.yellow.buttons .button, .ui.inverted.yellow.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FFE21F inset !important; color: #FFE21F; } .ui.inverted.yellow.buttons .button:hover, .ui.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .button:focus, .ui.inverted.yellow.button:focus, .ui.inverted.yellow.buttons .button.active, .ui.inverted.yellow.button.active, .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.yellow.buttons .button:hover, .ui.inverted.yellow.button:hover { background-color: #ffdf05; } .ui.inverted.yellow.buttons .button:focus, .ui.inverted.yellow.button:focus { background-color: #f5d500; } .ui.inverted.yellow.buttons .active.button, .ui.inverted.yellow.active.button { background-color: #ffdf05; } .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active { background-color: #ebcd00; } /* Inverted Basic */ .ui.inverted.yellow.basic.buttons .button, .ui.inverted.yellow.buttons .basic.button, .ui.inverted.yellow.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.yellow.basic.buttons .button:hover, .ui.inverted.yellow.buttons .basic.button:hover, .ui.inverted.yellow.basic.button:hover { box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .button:focus, .ui.inverted.yellow.basic.buttons .button:focus, .ui.inverted.yellow.basic.button:focus { box-shadow: 0px 0px 0px 2px #f5d500 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .active.button, .ui.inverted.yellow.buttons .basic.active.button, .ui.inverted.yellow.basic.active.button { box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .button:active, .ui.inverted.yellow.buttons .basic.button:active, .ui.inverted.yellow.basic.button:active { box-shadow: 0px 0px 0px 2px #ebcd00 inset !important; color: #FFE21F !important; } /*------------------- Primary --------------------*/ /*--- Standard ---*/ .ui.primary.buttons .button, .ui.primary.button { background-color: #2185D0; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.primary.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: #1678c2; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: #0d71bb; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: #1a69a4; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active { background-color: #1279c6; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.primary.buttons .button, .ui.basic.primary.button { box-shadow: 0px 0px 0px 1px #2185D0 inset !important; color: #2185D0 !important; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #1678c2 inset !important; color: #1678c2 !important; } .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #0d71bb inset !important; color: #1678c2 !important; } .ui.basic.primary.buttons .active.button, .ui.basic.primary.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #1279c6 inset !important; color: #1a69a4 !important; } .ui.basic.primary.buttons .button:active, .ui.basic.primary.button:active { box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; color: #1a69a4 !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.primary.buttons .button, .ui.inverted.primary.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #54C8FF inset !important; color: #54C8FF; } .ui.inverted.primary.buttons .button:hover, .ui.inverted.primary.button:hover, .ui.inverted.primary.buttons .button:focus, .ui.inverted.primary.button:focus, .ui.inverted.primary.buttons .button.active, .ui.inverted.primary.button.active, .ui.inverted.primary.buttons .button:active, .ui.inverted.primary.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.primary.buttons .button:hover, .ui.inverted.primary.button:hover { background-color: #3ac0ff; } .ui.inverted.primary.buttons .button:focus, .ui.inverted.primary.button:focus { background-color: #2bbbff; } .ui.inverted.primary.buttons .active.button, .ui.inverted.primary.active.button { background-color: #3ac0ff; } .ui.inverted.primary.buttons .button:active, .ui.inverted.primary.button:active { background-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.primary.basic.buttons .button, .ui.inverted.primary.buttons .basic.button, .ui.inverted.primary.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.primary.basic.buttons .button:hover, .ui.inverted.primary.buttons .basic.button:hover, .ui.inverted.primary.basic.button:hover { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.primary.basic.buttons .button:focus, .ui.inverted.primary.basic.buttons .button:focus, .ui.inverted.primary.basic.button:focus { box-shadow: 0px 0px 0px 2px #2bbbff inset !important; color: #54C8FF !important; } .ui.inverted.primary.basic.buttons .active.button, .ui.inverted.primary.buttons .basic.active.button, .ui.inverted.primary.basic.active.button { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.primary.basic.buttons .button:active, .ui.inverted.primary.buttons .basic.button:active, .ui.inverted.primary.basic.button:active { box-shadow: 0px 0px 0px 2px #21b8ff inset !important; color: #54C8FF !important; } /*------------------- Secondary --------------------*/ /* Standard */ .ui.secondary.buttons .button, .ui.secondary.button { background-color: #1B1C1D; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.secondary.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { background-color: #27292a; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:focus, .ui.secondary.button:focus { background-color: #2e3032; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:active, .ui.secondary.button:active { background-color: #343637; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button:active, .ui.secondary.active.button, .ui.secondary.button .active.button:active { background-color: #27292a; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.secondary.buttons .button, .ui.basic.secondary.button { box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; color: #1B1C1D !important; } .ui.basic.secondary.buttons .button:hover, .ui.basic.secondary.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #27292a inset !important; color: #27292a !important; } .ui.basic.secondary.buttons .button:focus, .ui.basic.secondary.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #2e3032 inset !important; color: #27292a !important; } .ui.basic.secondary.buttons .active.button, .ui.basic.secondary.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #27292a inset !important; color: #343637 !important; } .ui.basic.secondary.buttons .button:active, .ui.basic.secondary.button:active { box-shadow: 0px 0px 0px 1px #343637 inset !important; color: #343637 !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.secondary.buttons .button, .ui.inverted.secondary.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #545454 inset !important; color: #545454; } .ui.inverted.secondary.buttons .button:hover, .ui.inverted.secondary.button:hover, .ui.inverted.secondary.buttons .button:focus, .ui.inverted.secondary.button:focus, .ui.inverted.secondary.buttons .button.active, .ui.inverted.secondary.button.active, .ui.inverted.secondary.buttons .button:active, .ui.inverted.secondary.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.secondary.buttons .button:hover, .ui.inverted.secondary.button:hover { background-color: #616161; } .ui.inverted.secondary.buttons .button:focus, .ui.inverted.secondary.button:focus { background-color: #686868; } .ui.inverted.secondary.buttons .active.button, .ui.inverted.secondary.active.button { background-color: #616161; } .ui.inverted.secondary.buttons .button:active, .ui.inverted.secondary.button:active { background-color: #6e6e6e; } /* Inverted Basic */ .ui.inverted.secondary.basic.buttons .button, .ui.inverted.secondary.buttons .basic.button, .ui.inverted.secondary.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.secondary.basic.buttons .button:hover, .ui.inverted.secondary.buttons .basic.button:hover, .ui.inverted.secondary.basic.button:hover { box-shadow: 0px 0px 0px 2px #616161 inset !important; color: #545454 !important; } .ui.inverted.secondary.basic.buttons .button:focus, .ui.inverted.secondary.basic.buttons .button:focus, .ui.inverted.secondary.basic.button:focus { box-shadow: 0px 0px 0px 2px #686868 inset !important; color: #545454 !important; } .ui.inverted.secondary.basic.buttons .active.button, .ui.inverted.secondary.buttons .basic.active.button, .ui.inverted.secondary.basic.active.button { box-shadow: 0px 0px 0px 2px #616161 inset !important; color: #545454 !important; } .ui.inverted.secondary.basic.buttons .button:active, .ui.inverted.secondary.buttons .basic.button:active, .ui.inverted.secondary.basic.button:active { box-shadow: 0px 0px 0px 2px #6e6e6e inset !important; color: #545454 !important; } /*--------------- Positive ----------------*/ /* Standard */ .ui.positive.buttons .button, .ui.positive.button { background-color: #21BA45; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.positive.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.positive.buttons .button:hover, .ui.positive.button:hover { background-color: #16ab39; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:focus, .ui.positive.button:focus { background-color: #0ea432; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:active, .ui.positive.button:active { background-color: #198f35; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .active.button, .ui.positive.buttons .active.button:active, .ui.positive.active.button, .ui.positive.button .active.button:active { background-color: #13ae38; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.positive.buttons .button, .ui.basic.positive.button { box-shadow: 0px 0px 0px 1px #21BA45 inset !important; color: #21BA45 !important; } .ui.basic.positive.buttons .button:hover, .ui.basic.positive.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #16ab39 inset !important; color: #16ab39 !important; } .ui.basic.positive.buttons .button:focus, .ui.basic.positive.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #0ea432 inset !important; color: #16ab39 !important; } .ui.basic.positive.buttons .active.button, .ui.basic.positive.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #13ae38 inset !important; color: #198f35 !important; } .ui.basic.positive.buttons .button:active, .ui.basic.positive.button:active { box-shadow: 0px 0px 0px 1px #198f35 inset !important; color: #198f35 !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { margin-left: -1px; } /*--------------- Negative ----------------*/ /* Standard */ .ui.negative.buttons .button, .ui.negative.button { background-color: #DB2828; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.negative.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.negative.buttons .button:hover, .ui.negative.button:hover { background-color: #d01919; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:focus, .ui.negative.button:focus { background-color: #ca1010; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:active, .ui.negative.button:active { background-color: #b21e1e; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .active.button, .ui.negative.buttons .active.button:active, .ui.negative.active.button, .ui.negative.button .active.button:active { background-color: #d41515; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.negative.buttons .button, .ui.basic.negative.button { box-shadow: 0px 0px 0px 1px #DB2828 inset !important; color: #DB2828 !important; } .ui.basic.negative.buttons .button:hover, .ui.basic.negative.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #d01919 inset !important; color: #d01919 !important; } .ui.basic.negative.buttons .button:focus, .ui.basic.negative.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #ca1010 inset !important; color: #d01919 !important; } .ui.basic.negative.buttons .active.button, .ui.basic.negative.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #d41515 inset !important; color: #b21e1e !important; } .ui.basic.negative.buttons .button:active, .ui.basic.negative.button:active { box-shadow: 0px 0px 0px 1px #b21e1e inset !important; color: #b21e1e !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { margin-left: -1px; } /******************************* Groups *******************************/ .ui.buttons { display: inline-flex; flex-direction: row; font-size: 0em; vertical-align: baseline; margin: 0em 0.25em 0em 0em; } .ui.buttons:not(.basic):not(.inverted) { box-shadow: none; } /* Clearfix */ .ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Standard Group */ .ui.buttons .button { flex: 1 0 auto; margin: 0em; border-radius: 0em; margin: 0px 0px 0px 0px; } .ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button { box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.buttons .button:first-child { border-left: none; margin-left: 0em; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .ui.buttons .button:last-child { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } /* Vertical Style */ .ui.vertical.buttons { display: inline-flex; flex-direction: column; } .ui.vertical.buttons .button { display: block; float: none; width: 100%; margin: 0px 0px 0px 0px; box-shadow: none; border-radius: 0em; } .ui.vertical.buttons .button:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .ui.vertical.buttons .button:last-child { margin-bottom: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .ui.vertical.buttons .button:only-child { border-radius: 0.25rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* BEGIN: Portal primary, secondary, and tertiary buttons */ .ui.button { border-radius: 30px; text-transform: capitalize; } .ui.primary.button, .ui.primary.buttons .button { background-color: var(--primary-light-color) !important; color: var(--primary-white-color); } .ui.button.primaryButton { color: white; background-color: var(--primary-light-color); font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + var(--sqs-rem)); } .ui.button.primaryButton.tiny { font-size: calc(0.9 * var(--semantic-ui-rem)); } .ui.button.primaryButton:hover { background-color: var(--primary-light-color) !important; color: white; opacity: 0.6 !important; } .ui.button.secondaryButton { color: white; background-color: var(--primary-dark-color); font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + var(--sqs-rem)); } .ui.button.secondaryButton.tiny { font-size: calc(0.9 * var(--semantic-ui-rem)); } .ui.button.secondaryButton:hover { background-color: var(--primary-dark-color) !important; color: white; opacity: 0.6 !important; } .ui.button.tertiaryButton { color: var(--primary-light-color); background-color: white; border: var(--primary-light-color) 2px solid; font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + var(--sqs-rem)); } .ui.button.tertiaryButton.tiny { font-size: calc(0.9 * var(--semantic-ui-rem)); } .ui.button.tertiaryButton:hover { background-color: white !important; color: var(--primary-light-color); opacity: 0.6 !important; } .ui.button.importantActionButton { color: var(--primary-white-color); background-color: var(--primary-important-action-color); font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + var(--sqs-rem)); } .ui.button.importantActionButton.tiny { font-size: calc(0.9 * var(--semantic-ui-rem)); } .ui.button.importantActionButton:hover { background-color: var(--primary-important-action-color) !important; color: var(--primary-white-color); opacity: 0.6 !important; } /* END - Portal Buttons */ /*! * # Semantic UI - Container * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Container *******************************/ /*------------------- Element --------------------*/ /* Minimum Gutter is used to determine the maximum container width for a given device */ /* Devices */ /* Coupling (Add Negative Margin to container size) */ /*------------------- Types --------------------*/ /* Text */ /* Packaged Theme */ /******************************* Container *******************************/ /*------------------- Element --------------------*/ /* Minimum Gutter is used to determine the maximum container width for a given device */ /* Devices */ /* Coupling (Add Negative Margin to container size) */ /*------------------- Types --------------------*/ /* Text */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Container *******************************/ /* All Sizes */ .ui.container { display: block; max-width: 100% !important; } /* Mobile */ @media only screen and (max-width: 767px) { .ui.container { width: auto !important; margin-left: 1em !important; margin-right: 1em !important; } .ui.grid.container { width: auto !important; } .ui.relaxed.grid.container { width: auto !important; } .ui.very.relaxed.grid.container { width: auto !important; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.container { width: 719px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 719px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 719px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 719px + 5rem ) !important; } } /* Small Monitor */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui.container { width: 927px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 927px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 927px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 927px + 5rem ) !important; } } /* Large Monitor */ @media only screen and (min-width: 1200px) { .ui.container { width: 1119px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 1119px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 1119px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 1119px + 5rem ) !important; } } /******************************* Types *******************************/ /* Text Container */ .ui.text.container { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; max-width: 700px !important; line-height: 1.5; } .ui.text.container { font-size: 1.125rem; } /* Fluid */ .ui.fluid.container { width: 100%; } /******************************* Variations *******************************/ .ui[class*="left aligned"].container { text-align: left; } .ui[class*="center aligned"].container { text-align: center; } .ui[class*="right aligned"].container { text-align: right; } .ui.justified.container { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Divider * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Divider *******************************/ /*------------------- Element --------------------*/ /* Text */ /*------------------- Coupling --------------------*/ /* Icon */ /******************************* Variations *******************************/ /* Horizontal / Vertical */ /* Inverted */ /* Section */ /* Sizes */ /* Packaged Theme */ /******************************* Divider *******************************/ /*------------------- Element --------------------*/ /* Text */ /*------------------- Coupling --------------------*/ /* Icon */ /******************************* Variations *******************************/ /* Horizontal / Vertical */ /* Inverted */ /* Section */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* Text */ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Divider *******************************/ .ui.divider { margin: 1rem 0rem; line-height: 1; height: 0em; font-weight: bold; text-transform: uppercase; letter-spacing: var(--body-font-letter-spacing); color: #4A3041; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*-------------- Basic ---------------*/ .ui.divider:not(.vertical):not(.horizontal) { border-top: 1px solid rgba(34, 36, 38, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /*-------------- Coupling ---------------*/ /* Allow divider between each column row */ .ui.grid > .column + .divider, .ui.grid > .row > .column + .divider { left: auto; } /*-------------- Horizontal ---------------*/ .ui.horizontal.divider { display: table; white-space: nowrap; height: auto; margin: ''; line-height: 1; text-align: center; } .ui.horizontal.divider:before, .ui.horizontal.divider:after { content: ''; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .ui.horizontal.divider:before { background-position: right 1em top 50%; } .ui.horizontal.divider:after { background-position: left 1em top 50%; } /*-------------- Vertical ---------------*/ .ui.vertical.divider { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0rem; padding: 0em; width: auto; height: 50%; line-height: 0em; text-align: center; transform: translateX(-50%); } .ui.vertical.divider:before, .ui.vertical.divider:after { position: absolute; left: 50%; content: ''; z-index: 3; border-left: 1px solid rgba(34, 36, 38, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.1); width: 0%; height: calc(100% - 1rem ); } .ui.vertical.divider:before { top: -100%; } .ui.vertical.divider:after { top: auto; bottom: 0px; } /* Inside grid */ @media only screen and (max-width: 767px) { .ui.stackable.grid .ui.vertical.divider, .ui.grid .stackable.row .ui.vertical.divider { display: table; white-space: nowrap; height: auto; margin: ''; overflow: hidden; line-height: 1; text-align: center; position: static; top: 0; left: 0; transform: none; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { position: static; left: 0; border-left: none; border-right: none; content: ''; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before { background-position: right 1em top 50%; } .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { background-position: left 1em top 50%; } } /*-------------- Icon ---------------*/ .ui.divider > .icon { margin: 0rem; font-size: 1rem; height: 1em; vertical-align: middle; } /******************************* Variations *******************************/ /*-------------- Hidden ---------------*/ .ui.hidden.divider { border-color: transparent !important; } .ui.hidden.divider:before, .ui.hidden.divider:after { display: none; } /*-------------- Inverted ---------------*/ .ui.divider.inverted, .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider { color: #FFFFFF; } .ui.divider.inverted, .ui.divider.inverted:after, .ui.divider.inverted:before { border-top-color: rgba(34, 36, 38, 0.15) !important; border-left-color: rgba(34, 36, 38, 0.15) !important; border-bottom-color: rgba(255, 255, 255, 0.15) !important; border-right-color: rgba(255, 255, 255, 0.15) !important; } /*-------------- Fitted ---------------*/ .ui.fitted.divider { margin: 0em; } /*-------------- Clearing ---------------*/ .ui.clearing.divider { clear: both; } /*-------------- Section ---------------*/ .ui.section.divider { margin-top: 2rem; margin-bottom: 2rem; } /*-------------- Sizes ---------------*/ .ui.divider { font-size: 1rem; } /******************************* Theme Overrides *******************************/ .ui.horizontal.divider:before, .ui.horizontal.divider:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); } @media only screen and (max-width: 767px) { .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); } } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Flag * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Flag *******************************/ /*------------------- Element --------------------*/ /* Packaged Theme */ /******************************* Flag *******************************/ /*------------------- Element --------------------*/ /* Site Theme */ /*------------------- Flag Variables --------------------*/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Flag *******************************/ i.flag:not(.icon) { display: inline-block; width: 16px; height: 11px; line-height: 11px; vertical-align: baseline; margin: 0em 0.5em 0em 0em; text-decoration: inherit; speak: none; font-smoothing: antialiased; backface-visibility: hidden; } /* Sprite */ i.flag:not(.icon):before { display: inline-block; content: ''; background: url("./themes/default/assets/images/flags.png") no-repeat -108px -1976px; width: 16px; height: 11px; } /* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */ /******************************* Theme Overrides *******************************/ i.flag.ad:before, i.flag.andorra:before { background-position: 0px 0px; } i.flag.ae:before, i.flag.united.arab.emirates:before, i.flag.uae:before { background-position: 0px -26px; } i.flag.af:before, i.flag.afghanistan:before { background-position: 0px -52px; } i.flag.ag:before, i.flag.antigua:before { background-position: 0px -78px; } i.flag.ai:before, i.flag.anguilla:before { background-position: 0px -104px; } i.flag.al:before, i.flag.albania:before { background-position: 0px -130px; } i.flag.am:before, i.flag.armenia:before { background-position: 0px -156px; } i.flag.an:before, i.flag.netherlands.antilles:before { background-position: 0px -182px; } i.flag.ao:before, i.flag.angola:before { background-position: 0px -208px; } i.flag.ar:before, i.flag.argentina:before { background-position: 0px -234px; } i.flag.as:before, i.flag.american.samoa:before { background-position: 0px -260px; } i.flag.at:before, i.flag.austria:before { background-position: 0px -286px; } i.flag.au:before, i.flag.australia:before { background-position: 0px -312px; } i.flag.aw:before, i.flag.aruba:before { background-position: 0px -338px; } i.flag.ax:before, i.flag.aland.islands:before { background-position: 0px -364px; } i.flag.az:before, i.flag.azerbaijan:before { background-position: 0px -390px; } i.flag.ba:before, i.flag.bosnia:before { background-position: 0px -416px; } i.flag.bb:before, i.flag.barbados:before { background-position: 0px -442px; } i.flag.bd:before, i.flag.bangladesh:before { background-position: 0px -468px; } i.flag.be:before, i.flag.belgium:before { background-position: 0px -494px; } i.flag.bf:before, i.flag.burkina.faso:before { background-position: 0px -520px; } i.flag.bg:before, i.flag.bulgaria:before { background-position: 0px -546px; } i.flag.bh:before, i.flag.bahrain:before { background-position: 0px -572px; } i.flag.bi:before, i.flag.burundi:before { background-position: 0px -598px; } i.flag.bj:before, i.flag.benin:before { background-position: 0px -624px; } i.flag.bm:before, i.flag.bermuda:before { background-position: 0px -650px; } i.flag.bn:before, i.flag.brunei:before { background-position: 0px -676px; } i.flag.bo:before, i.flag.bolivia:before { background-position: 0px -702px; } i.flag.br:before, i.flag.brazil:before { background-position: 0px -728px; } i.flag.bs:before, i.flag.bahamas:before { background-position: 0px -754px; } i.flag.bt:before, i.flag.bhutan:before { background-position: 0px -780px; } i.flag.bv:before, i.flag.bouvet.island:before { background-position: 0px -806px; } i.flag.bw:before, i.flag.botswana:before { background-position: 0px -832px; } i.flag.by:before, i.flag.belarus:before { background-position: 0px -858px; } i.flag.bz:before, i.flag.belize:before { background-position: 0px -884px; } i.flag.ca:before, i.flag.canada:before { background-position: 0px -910px; } i.flag.cc:before, i.flag.cocos.islands:before { background-position: 0px -962px; } i.flag.cd:before, i.flag.congo:before { background-position: 0px -988px; } i.flag.cf:before, i.flag.central.african.republic:before { background-position: 0px -1014px; } i.flag.cg:before, i.flag.congo.brazzaville:before { background-position: 0px -1040px; } i.flag.ch:before, i.flag.switzerland:before { background-position: 0px -1066px; } i.flag.ci:before, i.flag.cote.divoire:before { background-position: 0px -1092px; } i.flag.ck:before, i.flag.cook.islands:before { background-position: 0px -1118px; } i.flag.cl:before, i.flag.chile:before { background-position: 0px -1144px; } i.flag.cm:before, i.flag.cameroon:before { background-position: 0px -1170px; } i.flag.cn:before, i.flag.china:before { background-position: 0px -1196px; } i.flag.co:before, i.flag.colombia:before { background-position: 0px -1222px; } i.flag.cr:before, i.flag.costa.rica:before { background-position: 0px -1248px; } i.flag.cs:before, i.flag.serbia:before { background-position: 0px -1274px; } i.flag.cu:before, i.flag.cuba:before { background-position: 0px -1300px; } i.flag.cv:before, i.flag.cape.verde:before { background-position: 0px -1326px; } i.flag.cx:before, i.flag.christmas.island:before { background-position: 0px -1352px; } i.flag.cy:before, i.flag.cyprus:before { background-position: 0px -1378px; } i.flag.cz:before, i.flag.czech.republic:before { background-position: 0px -1404px; } i.flag.de:before, i.flag.germany:before { background-position: 0px -1430px; } i.flag.dj:before, i.flag.djibouti:before { background-position: 0px -1456px; } i.flag.dk:before, i.flag.denmark:before { background-position: 0px -1482px; } i.flag.dm:before, i.flag.dominica:before { background-position: 0px -1508px; } i.flag.do:before, i.flag.dominican.republic:before { background-position: 0px -1534px; } i.flag.dz:before, i.flag.algeria:before { background-position: 0px -1560px; } i.flag.ec:before, i.flag.ecuador:before { background-position: 0px -1586px; } i.flag.ee:before, i.flag.estonia:before { background-position: 0px -1612px; } i.flag.eg:before, i.flag.egypt:before { background-position: 0px -1638px; } i.flag.eh:before, i.flag.western.sahara:before { background-position: 0px -1664px; } i.flag.gb.eng:before, i.flag.england:before { background-position: 0px -1690px; } i.flag.er:before, i.flag.eritrea:before { background-position: 0px -1716px; } i.flag.es:before, i.flag.spain:before { background-position: 0px -1742px; } i.flag.et:before, i.flag.ethiopia:before { background-position: 0px -1768px; } i.flag.eu:before, i.flag.european.union:before { background-position: 0px -1794px; } i.flag.fi:before, i.flag.finland:before { background-position: 0px -1846px; } i.flag.fj:before, i.flag.fiji:before { background-position: 0px -1872px; } i.flag.fk:before, i.flag.falkland.islands:before { background-position: 0px -1898px; } i.flag.fm:before, i.flag.micronesia:before { background-position: 0px -1924px; } i.flag.fo:before, i.flag.faroe.islands:before { background-position: 0px -1950px; } i.flag.fr:before, i.flag.france:before { background-position: 0px -1976px; } i.flag.ga:before, i.flag.gabon:before { background-position: -36px 0px; } i.flag.gb:before, i.flag.uk:before, i.flag.united.kingdom:before { background-position: -36px -26px; } i.flag.gd:before, i.flag.grenada:before { background-position: -36px -52px; } i.flag.ge:before, i.flag.georgia:before { background-position: -36px -78px; } i.flag.gf:before, i.flag.french.guiana:before { background-position: -36px -104px; } i.flag.gh:before, i.flag.ghana:before { background-position: -36px -130px; } i.flag.gi:before, i.flag.gibraltar:before { background-position: -36px -156px; } i.flag.gl:before, i.flag.greenland:before { background-position: -36px -182px; } i.flag.gm:before, i.flag.gambia:before { background-position: -36px -208px; } i.flag.gn:before, i.flag.guinea:before { background-position: -36px -234px; } i.flag.gp:before, i.flag.guadeloupe:before { background-position: -36px -260px; } i.flag.gq:before, i.flag.equatorial.guinea:before { background-position: -36px -286px; } i.flag.gr:before, i.flag.greece:before { background-position: -36px -312px; } i.flag.gs:before, i.flag.sandwich.islands:before { background-position: -36px -338px; } i.flag.gt:before, i.flag.guatemala:before { background-position: -36px -364px; } i.flag.gu:before, i.flag.guam:before { background-position: -36px -390px; } i.flag.gw:before, i.flag.guinea-bissau:before { background-position: -36px -416px; } i.flag.gy:before, i.flag.guyana:before { background-position: -36px -442px; } i.flag.hk:before, i.flag.hong.kong:before { background-position: -36px -468px; } i.flag.hm:before, i.flag.heard.island:before { background-position: -36px -494px; } i.flag.hn:before, i.flag.honduras:before { background-position: -36px -520px; } i.flag.hr:before, i.flag.croatia:before { background-position: -36px -546px; } i.flag.ht:before, i.flag.haiti:before { background-position: -36px -572px; } i.flag.hu:before, i.flag.hungary:before { background-position: -36px -598px; } i.flag.id:before, i.flag.indonesia:before { background-position: -36px -624px; } i.flag.ie:before, i.flag.ireland:before { background-position: -36px -650px; } i.flag.il:before, i.flag.israel:before { background-position: -36px -676px; } i.flag.in:before, i.flag.india:before { background-position: -36px -702px; } i.flag.io:before, i.flag.indian.ocean.territory:before { background-position: -36px -728px; } i.flag.iq:before, i.flag.iraq:before { background-position: -36px -754px; } i.flag.ir:before, i.flag.iran:before { background-position: -36px -780px; } i.flag.is:before, i.flag.iceland:before { background-position: -36px -806px; } i.flag.it:before, i.flag.italy:before { background-position: -36px -832px; } i.flag.jm:before, i.flag.jamaica:before { background-position: -36px -858px; } i.flag.jo:before, i.flag.jordan:before { background-position: -36px -884px; } i.flag.jp:before, i.flag.japan:before { background-position: -36px -910px; } i.flag.ke:before, i.flag.kenya:before { background-position: -36px -936px; } i.flag.kg:before, i.flag.kyrgyzstan:before { background-position: -36px -962px; } i.flag.kh:before, i.flag.cambodia:before { background-position: -36px -988px; } i.flag.ki:before, i.flag.kiribati:before { background-position: -36px -1014px; } i.flag.km:before, i.flag.comoros:before { background-position: -36px -1040px; } i.flag.kn:before, i.flag.saint.kitts.and.nevis:before { background-position: -36px -1066px; } i.flag.kp:before, i.flag.north.korea:before { background-position: -36px -1092px; } i.flag.kr:before, i.flag.south.korea:before { background-position: -36px -1118px; } i.flag.kw:before, i.flag.kuwait:before { background-position: -36px -1144px; } i.flag.ky:before, i.flag.cayman.islands:before { background-position: -36px -1170px; } i.flag.kz:before, i.flag.kazakhstan:before { background-position: -36px -1196px; } i.flag.la:before, i.flag.laos:before { background-position: -36px -1222px; } i.flag.lb:before, i.flag.lebanon:before { background-position: -36px -1248px; } i.flag.lc:before, i.flag.saint.lucia:before { background-position: -36px -1274px; } i.flag.li:before, i.flag.liechtenstein:before { background-position: -36px -1300px; } i.flag.lk:before, i.flag.sri.lanka:before { background-position: -36px -1326px; } i.flag.lr:before, i.flag.liberia:before { background-position: -36px -1352px; } i.flag.ls:before, i.flag.lesotho:before { background-position: -36px -1378px; } i.flag.lt:before, i.flag.lithuania:before { background-position: -36px -1404px; } i.flag.lu:before, i.flag.luxembourg:before { background-position: -36px -1430px; } i.flag.lv:before, i.flag.latvia:before { background-position: -36px -1456px; } i.flag.ly:before, i.flag.libya:before { background-position: -36px -1482px; } i.flag.ma:before, i.flag.morocco:before { background-position: -36px -1508px; } i.flag.mc:before, i.flag.monaco:before { background-position: -36px -1534px; } i.flag.md:before, i.flag.moldova:before { background-position: -36px -1560px; } i.flag.me:before, i.flag.montenegro:before { background-position: -36px -1586px; } i.flag.mg:before, i.flag.madagascar:before { background-position: -36px -1613px; } i.flag.mh:before, i.flag.marshall.islands:before { background-position: -36px -1639px; } i.flag.mk:before, i.flag.macedonia:before { background-position: -36px -1665px; } i.flag.ml:before, i.flag.mali:before { background-position: -36px -1691px; } i.flag.mm:before, i.flag.myanmar:before, i.flag.burma:before { background-position: -73px -1821px; } i.flag.mn:before, i.flag.mongolia:before { background-position: -36px -1743px; } i.flag.mo:before, i.flag.macau:before { background-position: -36px -1769px; } i.flag.mp:before, i.flag.northern.mariana.islands:before { background-position: -36px -1795px; } i.flag.mq:before, i.flag.martinique:before { background-position: -36px -1821px; } i.flag.mr:before, i.flag.mauritania:before { background-position: -36px -1847px; } i.flag.ms:before, i.flag.montserrat:before { background-position: -36px -1873px; } i.flag.mt:before, i.flag.malta:before { background-position: -36px -1899px; } i.flag.mu:before, i.flag.mauritius:before { background-position: -36px -1925px; } i.flag.mv:before, i.flag.maldives:before { background-position: -36px -1951px; } i.flag.mw:before, i.flag.malawi:before { background-position: -36px -1977px; } i.flag.mx:before, i.flag.mexico:before { background-position: -72px 0px; } i.flag.my:before, i.flag.malaysia:before { background-position: -72px -26px; } i.flag.mz:before, i.flag.mozambique:before { background-position: -72px -52px; } i.flag.na:before, i.flag.namibia:before { background-position: -72px -78px; } i.flag.nc:before, i.flag.new.caledonia:before { background-position: -72px -104px; } i.flag.ne:before, i.flag.niger:before { background-position: -72px -130px; } i.flag.nf:before, i.flag.norfolk.island:before { background-position: -72px -156px; } i.flag.ng:before, i.flag.nigeria:before { background-position: -72px -182px; } i.flag.ni:before, i.flag.nicaragua:before { background-position: -72px -208px; } i.flag.nl:before, i.flag.netherlands:before { background-position: -72px -234px; } i.flag.no:before, i.flag.norway:before { background-position: -72px -260px; } i.flag.np:before, i.flag.nepal:before { background-position: -72px -286px; } i.flag.nr:before, i.flag.nauru:before { background-position: -72px -312px; } i.flag.nu:before, i.flag.niue:before { background-position: -72px -338px; } i.flag.nz:before, i.flag.new.zealand:before { background-position: -72px -364px; } i.flag.om:before, i.flag.oman:before { background-position: -72px -390px; } i.flag.pa:before, i.flag.panama:before { background-position: -72px -416px; } i.flag.pe:before, i.flag.peru:before { background-position: -72px -442px; } i.flag.pf:before, i.flag.french.polynesia:before { background-position: -72px -468px; } i.flag.pg:before, i.flag.new.guinea:before { background-position: -72px -494px; } i.flag.ph:before, i.flag.philippines:before { background-position: -72px -520px; } i.flag.pk:before, i.flag.pakistan:before { background-position: -72px -546px; } i.flag.pl:before, i.flag.poland:before { background-position: -72px -572px; } i.flag.pm:before, i.flag.saint.pierre:before { background-position: -72px -598px; } i.flag.pn:before, i.flag.pitcairn.islands:before { background-position: -72px -624px; } i.flag.pr:before, i.flag.puerto.rico:before { background-position: -72px -650px; } i.flag.ps:before, i.flag.palestine:before { background-position: -72px -676px; } i.flag.pt:before, i.flag.portugal:before { background-position: -72px -702px; } i.flag.pw:before, i.flag.palau:before { background-position: -72px -728px; } i.flag.py:before, i.flag.paraguay:before { background-position: -72px -754px; } i.flag.qa:before, i.flag.qatar:before { background-position: -72px -780px; } i.flag.re:before, i.flag.reunion:before { background-position: -72px -806px; } i.flag.ro:before, i.flag.romania:before { background-position: -72px -832px; } i.flag.rs:before, i.flag.serbia:before { background-position: -72px -858px; } i.flag.ru:before, i.flag.russia:before { background-position: -72px -884px; } i.flag.rw:before, i.flag.rwanda:before { background-position: -72px -910px; } i.flag.sa:before, i.flag.saudi.arabia:before { background-position: -72px -936px; } i.flag.sb:before, i.flag.solomon.islands:before { background-position: -72px -962px; } i.flag.sc:before, i.flag.seychelles:before { background-position: -72px -988px; } i.flag.gb.sct:before, i.flag.scotland:before { background-position: -72px -1014px; } i.flag.sd:before, i.flag.sudan:before { background-position: -72px -1040px; } i.flag.se:before, i.flag.sweden:before { background-position: -72px -1066px; } i.flag.sg:before, i.flag.singapore:before { background-position: -72px -1092px; } i.flag.sh:before, i.flag.saint.helena:before { background-position: -72px -1118px; } i.flag.si:before, i.flag.slovenia:before { background-position: -72px -1144px; } i.flag.sj:before, i.flag.svalbard:before, i.flag.jan.mayen:before { background-position: -72px -1170px; } i.flag.sk:before, i.flag.slovakia:before { background-position: -72px -1196px; } i.flag.sl:before, i.flag.sierra.leone:before { background-position: -72px -1222px; } i.flag.sm:before, i.flag.san.marino:before { background-position: -72px -1248px; } i.flag.sn:before, i.flag.senegal:before { background-position: -72px -1274px; } i.flag.so:before, i.flag.somalia:before { background-position: -72px -1300px; } i.flag.sr:before, i.flag.suriname:before { background-position: -72px -1326px; } i.flag.st:before, i.flag.sao.tome:before { background-position: -72px -1352px; } i.flag.sv:before, i.flag.el.salvador:before { background-position: -72px -1378px; } i.flag.sy:before, i.flag.syria:before { background-position: -72px -1404px; } i.flag.sz:before, i.flag.swaziland:before { background-position: -72px -1430px; } i.flag.tc:before, i.flag.caicos.islands:before { background-position: -72px -1456px; } i.flag.td:before, i.flag.chad:before { background-position: -72px -1482px; } i.flag.tf:before, i.flag.french.territories:before { background-position: -72px -1508px; } i.flag.tg:before, i.flag.togo:before { background-position: -72px -1534px; } i.flag.th:before, i.flag.thailand:before { background-position: -72px -1560px; } i.flag.tj:before, i.flag.tajikistan:before { background-position: -72px -1586px; } i.flag.tk:before, i.flag.tokelau:before { background-position: -72px -1612px; } i.flag.tl:before, i.flag.timorleste:before { background-position: -72px -1638px; } i.flag.tm:before, i.flag.turkmenistan:before { background-position: -72px -1664px; } i.flag.tn:before, i.flag.tunisia:before { background-position: -72px -1690px; } i.flag.to:before, i.flag.tonga:before { background-position: -72px -1716px; } i.flag.tr:before, i.flag.turkey:before { background-position: -72px -1742px; } i.flag.tt:before, i.flag.trinidad:before { background-position: -72px -1768px; } i.flag.tv:before, i.flag.tuvalu:before { background-position: -72px -1794px; } i.flag.tw:before, i.flag.taiwan:before { background-position: -72px -1820px; } i.flag.tz:before, i.flag.tanzania:before { background-position: -72px -1846px; } i.flag.ua:before, i.flag.ukraine:before { background-position: -72px -1872px; } i.flag.ug:before, i.flag.uganda:before { background-position: -72px -1898px; } i.flag.um:before, i.flag.us.minor.islands:before { background-position: -72px -1924px; } i.flag.us:before, i.flag.america:before, i.flag.united.states:before { background-position: -72px -1950px; } i.flag.uy:before, i.flag.uruguay:before { background-position: -72px -1976px; } i.flag.uz:before, i.flag.uzbekistan:before { background-position: -108px 0px; } i.flag.va:before, i.flag.vatican.city:before { background-position: -108px -26px; } i.flag.vc:before, i.flag.saint.vincent:before { background-position: -108px -52px; } i.flag.ve:before, i.flag.venezuela:before { background-position: -108px -78px; } i.flag.vg:before, i.flag.british.virgin.islands:before { background-position: -108px -104px; } i.flag.vi:before, i.flag.us.virgin.islands:before { background-position: -108px -130px; } i.flag.vn:before, i.flag.vietnam:before { background-position: -108px -156px; } i.flag.vu:before, i.flag.vanuatu:before { background-position: -108px -182px; } i.flag.gb.wls:before, i.flag.wales:before { background-position: -108px -208px; } i.flag.wf:before, i.flag.wallis.and.futuna:before { background-position: -108px -234px; } i.flag.ws:before, i.flag.samoa:before { background-position: -108px -260px; } i.flag.ye:before, i.flag.yemen:before { background-position: -108px -286px; } i.flag.yt:before, i.flag.mayotte:before { background-position: -108px -312px; } i.flag.za:before, i.flag.south.africa:before { background-position: -108px -338px; } i.flag.zm:before, i.flag.zambia:before { background-position: -108px -364px; } i.flag.zw:before, i.flag.zimbabwe:before { background-position: -108px -390px; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Header * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Header *******************************/ /*------------------- Element --------------------*/ /* Sub Heading */ /* Sub Header */ /* Icon */ /* Image */ /* Label */ /* Content */ /* Paragraph after Header */ /*------------------- Variations --------------------*/ /* Sizing */ /* Sub Header */ /* Icon Header */ /* No Line Height Offset */ /* Divided */ /* Block */ /* Attached */ /* Inverted */ /* Floated */ /* Packaged Theme */ /******************************* Header *******************************/ /*------------------- Element --------------------*/ /* Sub Heading */ /* Sub Header */ /* Icon */ /* Image */ /* Label */ /* Content */ /* Paragraph after Header */ /*------------------- Variations --------------------*/ /* Sizing */ /* Sub Header */ /* Icon Header */ /* No Line Height Offset */ /* Divided */ /* Block */ /* Attached */ /* Inverted */ /* Floated */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Header *******************************/ /* Standard */ .ui.header { border: none; margin: calc(2rem - 0.14285714em ) 0em 1rem; padding: 0em 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.28571429em; text-transform: none; color: #4A3041; } .ui.header:first-child { margin-top: -0.14285714em; } .ui.header:last-child { margin-bottom: 0em; } /*-------------- Sub Header ---------------*/ .ui.header .sub.header { display: block; font-weight: normal; padding: 0em; margin: 0em; font-size: 1rem; line-height: 1.2em; color: rgba(0, 0, 0, 0.6); } /*-------------- Icon ---------------*/ .ui.header > .icon { display: table-cell; opacity: 1; font-size: 1.5em; padding-top: 0em; vertical-align: middle; } /* With Text Node */ .ui.header .icon:only-child { display: inline-block; padding: 0em; margin-right: 0.75rem; } /*------------------- Image --------------------*/ .ui.header > .image:not(.icon), .ui.header > img { display: inline-block; margin-top: 0.14285714em; width: 2.5em; height: auto; vertical-align: middle; } .ui.header > .image:not(.icon):only-child, .ui.header > img:only-child { margin-right: 0.75rem; } /*-------------- Content ---------------*/ .ui.header .content { display: inline-block; vertical-align: top; } /* After Image */ .ui.header > img + .content, .ui.header > .image + .content { padding-left: 0.75rem; vertical-align: middle; } /* After Icon */ .ui.header > .icon + .content { padding-left: 0.75rem; display: table-cell; vertical-align: middle; } /*-------------- Loose Coupling ---------------*/ .ui.header .ui.label { font-size: ''; margin-left: 0.5rem; vertical-align: middle; } /* Positioning */ .ui.header + p { margin-top: 0em; } /******************************* Types *******************************/ /*-------------- Page ---------------*/ h1.ui.header { font-size: 2rem; } h2.ui.header { font-size: 1.71428571rem; } h3.ui.header { font-size: 1.28571429rem; } h4.ui.header { font-size: 1.07142857rem; } h5.ui.header { font-size: 1rem; } /* Sub Header */ h1.ui.header .sub.header { font-size: 1.125rem; } h2.ui.header .sub.header { font-size: 1.125rem; } h3.ui.header .sub.header { font-size: 1rem; } h4.ui.header .sub.header { font-size: 1rem; } h5.ui.header .sub.header { font-size: 0.9375rem; } /*-------------- Content Heading ---------------*/ .ui.huge.header { min-height: 1em; font-size: 2em; } .ui.large.header { font-size: 1.71428571em; } .ui.medium.header { font-size: 1.28571429em; } .ui.small.header { font-size: 1.07142857em; } .ui.tiny.header { font-size: 1em; } /* Sub Header */ .ui.huge.header .sub.header { font-size: 1.125rem; } .ui.large.header .sub.header { font-size: 1.125rem; } .ui.header .sub.header { font-size: 1rem; } .ui.small.header .sub.header { font-size: 1rem; } .ui.tiny.header .sub.header { font-size: 0.9375rem; } /*-------------- Sub Heading ---------------*/ .ui.sub.header { padding: 0em; margin-bottom: 0.125rem; font-weight: bold; font-size: 0.875em; text-transform: uppercase; color: ''; } .ui.small.sub.header { font-size: 0.8125em; } .ui.sub.header { font-size: 0.875em; } .ui.large.sub.header { font-size: 0.9375em; } .ui.huge.sub.header { font-size: 1em; } /*------------------- Icon --------------------*/ .ui.icon.header { display: inline-block; text-align: center; margin: 2rem 0em 1rem; } .ui.icon.header:after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; } .ui.icon.header:first-child { margin-top: 0em; } .ui.icon.header .icon { float: none; display: block; width: auto; height: auto; line-height: 1; padding: 0em; font-size: 3em; margin: 0em auto 0.5rem; opacity: 1; } .ui.icon.header .content { display: block; padding: 0em; } .ui.icon.header .circular.icon { font-size: 2em; } .ui.icon.header .square.icon { font-size: 2em; } .ui.block.icon.header .icon { margin-bottom: 0em; } .ui.icon.header.aligned { margin-left: auto; margin-right: auto; display: block; } /******************************* States *******************************/ .ui.disabled.header { opacity: 0.45; } /******************************* Variations *******************************/ /*------------------- Inverted --------------------*/ .ui.inverted.header { color: #FFFFFF; } .ui.inverted.header .sub.header { color: rgba(255, 255, 255, 0.8); } .ui.inverted.attached.header { background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; border-color: transparent; } .ui.inverted.block.header { background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; } .ui.inverted.block.header { border-bottom: none; } /*------------------- Colors --------------------*/ /*--- Red ---*/ .ui.red.header { color: #DB2828 !important; } a.ui.red.header:hover { color: #d01919 !important; } .ui.red.dividing.header { border-bottom: 2px solid #DB2828; } /* Inverted */ .ui.inverted.red.header { color: #FF695E !important; } a.ui.inverted.red.header:hover { color: #ff5144 !important; } /*--- Orange ---*/ .ui.orange.header { color: #F2711C !important; } a.ui.orange.header:hover { color: #f26202 !important; } .ui.orange.dividing.header { border-bottom: 2px solid #F2711C; } /* Inverted */ .ui.inverted.orange.header { color: #FF851B !important; } a.ui.inverted.orange.header:hover { color: #ff7701 !important; } /*--- Olive ---*/ .ui.olive.header { color: #B5CC18 !important; } a.ui.olive.header:hover { color: #a7bd0d !important; } .ui.olive.dividing.header { border-bottom: 2px solid #B5CC18; } /* Inverted */ .ui.inverted.olive.header { color: #D9E778 !important; } a.ui.inverted.olive.header:hover { color: #d8ea5c !important; } /*--- Yellow ---*/ .ui.yellow.header { color: #FBBD08 !important; } a.ui.yellow.header:hover { color: #eaae00 !important; } .ui.yellow.dividing.header { border-bottom: 2px solid #FBBD08; } /* Inverted */ .ui.inverted.yellow.header { color: #FFE21F !important; } a.ui.inverted.yellow.header:hover { color: #ffdf05 !important; } /*--- Green ---*/ .ui.green.header { color: #21BA45 !important; } a.ui.green.header:hover { color: #16ab39 !important; } .ui.green.dividing.header { border-bottom: 2px solid #21BA45; } /* Inverted */ .ui.inverted.green.header { color: #2ECC40 !important; } a.ui.inverted.green.header:hover { color: #22be34 !important; } /*--- Teal ---*/ .ui.teal.header { color: #00B5AD !important; } a.ui.teal.header:hover { color: #009c95 !important; } .ui.teal.dividing.header { border-bottom: 2px solid #00B5AD; } /* Inverted */ .ui.inverted.teal.header { color: #6DFFFF !important; } a.ui.inverted.teal.header:hover { color: #54ffff !important; } /*--- Blue ---*/ .ui.blue.header { color: #2185D0 !important; } a.ui.blue.header:hover { color: #1678c2 !important; } .ui.blue.dividing.header { border-bottom: 2px solid #2185D0; } /* Inverted */ .ui.inverted.blue.header { color: #54C8FF !important; } a.ui.inverted.blue.header:hover { color: #3ac0ff !important; } /*--- Violet ---*/ .ui.violet.header { color: #6435C9 !important; } a.ui.violet.header:hover { color: #5829bb !important; } .ui.violet.dividing.header { border-bottom: 2px solid #6435C9; } /* Inverted */ .ui.inverted.violet.header { color: #A291FB !important; } a.ui.inverted.violet.header:hover { color: #8a73ff !important; } /*--- Purple ---*/ .ui.purple.header { color: #A333C8 !important; } a.ui.purple.header:hover { color: #9627ba !important; } .ui.purple.dividing.header { border-bottom: 2px solid #A333C8; } /* Inverted */ .ui.inverted.purple.header { color: #DC73FF !important; } a.ui.inverted.purple.header:hover { color: #d65aff !important; } /*--- Pink ---*/ .ui.pink.header { color: #E03997 !important; } a.ui.pink.header:hover { color: #e61a8d !important; } .ui.pink.dividing.header { border-bottom: 2px solid #E03997; } /* Inverted */ .ui.inverted.pink.header { color: #FF8EDF !important; } a.ui.inverted.pink.header:hover { color: #ff74d8 !important; } /*--- Brown ---*/ .ui.brown.header { color: #A5673F !important; } a.ui.brown.header:hover { color: #975b33 !important; } .ui.brown.dividing.header { border-bottom: 2px solid #A5673F; } /* Inverted */ .ui.inverted.brown.header { color: #D67C1C !important; } a.ui.inverted.brown.header:hover { color: #c86f11 !important; } /*--- Grey ---*/ .ui.grey.header { color: #767676 !important; } a.ui.grey.header:hover { color: #838383 !important; } .ui.grey.dividing.header { border-bottom: 2px solid #767676; } /* Inverted */ .ui.inverted.grey.header { color: #DCDDDE !important; } a.ui.inverted.grey.header:hover { color: #cfd0d2 !important; } /*------------------- Aligned --------------------*/ .ui.left.aligned.header { text-align: left; } .ui.right.aligned.header { text-align: right; } .ui.centered.header, .ui.center.aligned.header { text-align: center; } .ui.justified.header { text-align: justify; } .ui.justified.header:after { display: inline-block; content: ''; width: 100%; } /*------------------- Floated --------------------*/ .ui.floated.header, .ui[class*="left floated"].header { float: left; margin-top: 0em; margin-right: 0.5em; } .ui[class*="right floated"].header { float: right; margin-top: 0em; margin-left: 0.5em; } /*------------------- Fitted --------------------*/ .ui.fitted.header { padding: 0em; } /*------------------- Dividing --------------------*/ .ui.dividing.header { padding-bottom: 0.1875rem; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.dividing.header .sub.header { padding-bottom: 0.1875rem; } .ui.dividing.header .icon { margin-bottom: 0em; } .ui.inverted.dividing.header { border-bottom-color: rgba(255, 255, 255, 0.1); } /*------------------- Block --------------------*/ .ui.block.header { background: #F3F4F5; padding: 0.8125rem 1rem; box-shadow: none; border: 1px solid #D4D4D5; border-radius: 0.25rem; } .ui.tiny.block.header { font-size: 0.875rem; } .ui.small.block.header { font-size: 0.9375rem; } .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1rem; } .ui.large.block.header { font-size: 1.125rem; } .ui.huge.block.header { font-size: 1.4375rem; } /*------------------- Attached --------------------*/ .ui.attached.header { background: #FFFFFF; padding: 0.8125rem 1rem; margin-left: -1px; margin-right: -1px; box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached.block.header { background: #F3F4F5; } .ui.attached:not(.top):not(.bottom).header { margin-top: 0em; margin-bottom: 0em; border-top: none; border-radius: 0em; } .ui.top.attached.header { margin-bottom: 0em; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.bottom.attached.header { margin-top: 0em; border-top: none; border-radius: 0em 0em 0.25rem 0.25rem; } /* Attached Sizes */ .ui.tiny.attached.header { font-size: 0.875em; } .ui.small.attached.header { font-size: 0.9375em; } .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1em; } .ui.large.attached.header { font-size: 1.125em; } .ui.huge.attached.header { font-size: 1.4375em; } /*------------------- Sizing --------------------*/ .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1.28571429em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Icon * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ /*-------------- Optional Files ---------------*/ /* Outline Icons */ /* Brand Icons */ /*-------------- Definition ---------------*/ /* Icon Variables */ /* Variations */ /* Packaged Theme */ /******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ /*-------------- Optional Files ---------------*/ /* Outline Icons */ /* Brand Icons */ /*-------------- Definition ---------------*/ /* Icon Variables */ /* Variations */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Icon *******************************/ @font-face { font-family: 'Icons'; src: url("/client/shared/themes/default/assets/fonts/icons.eot"); src: url("/client/shared/themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("/client/shared/themes/default/assets/fonts/icons.woff2") format('woff2'), url("/client/shared/themes/default/assets/fonts/icons.woff") format('woff'), url("/client/shared/themes/default/assets/fonts/icons.ttf") format('truetype'), url("/client/shared/themes/default/assets/fonts/icons.svg#icons") format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon { display: inline-block; opacity: 1; margin: 0em 0.25rem 0em 0em; width: 1.18em; height: 1em; font-family: 'Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; speak: none; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } i.icon:before { background: none !important; } /******************************* Types *******************************/ /*-------------- Loading ---------------*/ i.icon.loading { height: 1em; line-height: 1; } i.icon.loading { animation: icon-loading 2s linear infinite; } @keyframes icon-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* States *******************************/ i.icon.hover { opacity: 1 !important; } i.icon.active { opacity: 1 !important; } i.emphasized.icon { opacity: 1 !important; } i.disabled.icon { opacity: 0.45 !important; } /******************************* Variations *******************************/ /*------------------- Fitted --------------------*/ i.fitted.icon { width: auto; margin: 0em !important; } /*------------------- Link --------------------*/ i.link.icon, i.link.icons { cursor: pointer; opacity: 0.8; transition: opacity 0.1s ease; } i.link.icon:hover, i.link.icons:hover { opacity: 1 !important; } /*------------------- Circular --------------------*/ i.circular.icon { border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0em !important; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; width: 2em !important; height: 2em !important; } i.circular.inverted.icon { border: none; box-shadow: none; } /*------------------- Flipped --------------------*/ i.flipped.icon, i.horizontally.flipped.icon { transform: scale(-1, 1); } i.vertically.flipped.icon { transform: scale(1, -1); } /*------------------- Rotated --------------------*/ i.rotated.icon, i.right.rotated.icon, i.clockwise.rotated.icon { transform: rotate(90deg); } i.left.rotated.icon, i.counterclockwise.rotated.icon { transform: rotate(-90deg); } /*------------------- Bordered --------------------*/ i.bordered.icon { line-height: 1; vertical-align: baseline; width: 2em; height: 2em; padding: 0.5em 0em !important; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; } i.bordered.inverted.icon { border: none; box-shadow: none; } /*------------------- Inverted --------------------*/ /* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon { background-color: #1B1C1D !important; color: #FFFFFF !important; } i.inverted.icon { color: #FFFFFF; } /*------------------- Colors --------------------*/ /* Red */ i.red.icon { color: #DB2828 !important; } i.inverted.red.icon { color: #FF695E !important; } i.inverted.bordered.red.icon, i.inverted.circular.red.icon { background-color: #DB2828 !important; color: #FFFFFF !important; } /* Orange */ i.orange.icon { color: #F2711C !important; } i.inverted.orange.icon { color: #FF851B !important; } i.inverted.bordered.orange.icon, i.inverted.circular.orange.icon { background-color: #F2711C !important; color: #FFFFFF !important; } /* Yellow */ i.yellow.icon { color: #FBBD08 !important; } i.inverted.yellow.icon { color: #FFE21F !important; } i.inverted.bordered.yellow.icon, i.inverted.circular.yellow.icon { background-color: #FBBD08 !important; color: #FFFFFF !important; } /* Olive */ i.olive.icon { color: #B5CC18 !important; } i.inverted.olive.icon { color: #D9E778 !important; } i.inverted.bordered.olive.icon, i.inverted.circular.olive.icon { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ i.green.icon { color: #21BA45 !important; } i.inverted.green.icon { color: #2ECC40 !important; } i.inverted.bordered.green.icon, i.inverted.circular.green.icon { background-color: #21BA45 !important; color: #FFFFFF !important; } /* Teal */ i.teal.icon { color: #00B5AD !important; } i.inverted.teal.icon { color: #6DFFFF !important; } i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon { background-color: #00B5AD !important; color: #FFFFFF !important; } /* Blue */ i.blue.icon { color: #2185D0 !important; } i.inverted.blue.icon { color: #54C8FF !important; } i.inverted.bordered.blue.icon, i.inverted.circular.blue.icon { background-color: #2185D0 !important; color: #FFFFFF !important; } /* Violet */ i.violet.icon { color: #6435C9 !important; } i.inverted.violet.icon { color: #A291FB !important; } i.inverted.bordered.violet.icon, i.inverted.circular.violet.icon { background-color: #6435C9 !important; color: #FFFFFF !important; } /* Purple */ i.purple.icon { color: #A333C8 !important; } i.inverted.purple.icon { color: #DC73FF !important; } i.inverted.bordered.purple.icon, i.inverted.circular.purple.icon { background-color: #A333C8 !important; color: #FFFFFF !important; } /* Pink */ i.pink.icon { color: #E03997 !important; } i.inverted.pink.icon { color: #FF8EDF !important; } i.inverted.bordered.pink.icon, i.inverted.circular.pink.icon { background-color: #E03997 !important; color: #FFFFFF !important; } /* Brown */ i.brown.icon { color: #A5673F !important; } i.inverted.brown.icon { color: #D67C1C !important; } i.inverted.bordered.brown.icon, i.inverted.circular.brown.icon { background-color: #A5673F !important; color: #FFFFFF !important; } /* Grey */ i.grey.icon { color: #767676 !important; } i.inverted.grey.icon { color: #DCDDDE !important; } i.inverted.bordered.grey.icon, i.inverted.circular.grey.icon { background-color: #767676 !important; color: #FFFFFF !important; } /* Black */ i.black.icon { color: #1B1C1D !important; } i.inverted.black.icon { color: #545454 !important; } i.inverted.bordered.black.icon, i.inverted.circular.black.icon { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*------------------- Sizes --------------------*/ i.mini.icon, i.mini.icons { line-height: 1; font-size: 0.4em; } i.tiny.icon, i.tiny.icons { line-height: 1; font-size: 0.5em; } i.small.icon, i.small.icons { line-height: 1; font-size: 0.75em; } i.icon, i.icons { font-size: 1em; } i.large.icon, i.large.icons { line-height: 1; vertical-align: middle; font-size: 1.5em; } i.big.icon, i.big.icons { line-height: 1; vertical-align: middle; font-size: 2em; } i.huge.icon, i.huge.icons { line-height: 1; vertical-align: middle; font-size: 4em; } i.massive.icon, i.massive.icons { line-height: 1; vertical-align: middle; font-size: 8em; } /******************************* Groups *******************************/ i.icons { display: inline-block; position: relative; line-height: 1; } i.icons .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); margin: 0em; margin: 0; } i.icons .icon:first-child { position: static; width: auto; height: auto; vertical-align: top; transform: none; margin-right: 0.25rem; } /* Corner Icon */ i.icons .corner.icon { top: auto; left: auto; right: 0; bottom: 0; transform: none; font-size: 0.45em; text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; } i.icons .top.right.corner.icon { top: 0; left: auto; right: 0; bottom: auto; } i.icons .top.left.corner.icon { top: 0; left: 0; right: auto; bottom: auto; } i.icons .bottom.left.corner.icon { top: auto; left: 0; right: auto; bottom: 0; } i.icons .bottom.right.corner.icon { top: auto; left: auto; right: 0; bottom: 0; } i.icons .inverted.corner.icon { text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D; } /* * Font Awesome 5.0.8 by @fontawesome - http://fontawesome.io - @fontawesome * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) */ /******************************* Semantic-UI integration of font-awesome : ///class names are separated i.icon.circle => i.icon.circle i.icon.circle-o => i.icon.circle.outline //abbreviation are replaced by full letters: i.icon.ellipsis-h => i.icon.ellipsis.horizontal i.icon.ellipsis-v => i.icon.ellipsis.vertical .alpha => .i.icon.alphabet .asc => .i.icon.ascending .desc => .i.icon.descending .alt =>.alternate ASCII order is conserved for easier maintenance. Icons that only have one style 'outline', 'square' etc do not require this class for instance `lemon icon` not `lemon outline icon` since there is only one lemon *******************************/ /******************************* Icons *******************************/ /* Deprecated *In/Out Naming Conflict) */ i.icon.linkedin.in:before { content: "\f0e1"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } i.icon.sign.in:before { content: "\f2f6"; } i.icon.in.cart:before { content: "\f218"; } i.icon.log.out:before { content: "\f2f5"; } i.icon.sign.out:before { content: "\f2f5"; } /* Icons */ i.icon.\35 00px:before { content: "\f26e"; } i.icon.accessible.icon:before { content: "\f368"; } i.icon.accusoft:before { content: "\f369"; } i.icon.address.book:before { content: "\f2b9"; } i.icon.address.card:before { content: "\f2bb"; } i.icon.adjust:before { content: "\f042"; } i.icon.adn:before { content: "\f170"; } i.icon.adversal:before { content: "\f36a"; } i.icon.affiliatetheme:before { content: "\f36b"; } i.icon.algolia:before { content: "\f36c"; } i.icon.align.center:before { content: "\f037"; } i.icon.align.justify:before { content: "\f039"; } i.icon.align.left:before { content: "\f036"; } i.icon.align.right:before { content: "\f038"; } i.icon.amazon:before { content: "\f270"; } i.icon.amazon.pay:before { content: "\f42c"; } i.icon.ambulance:before { content: "\f0f9"; } i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } i.icon.amilia:before { content: "\f36d"; } i.icon.anchor:before { content: "\f13d"; } i.icon.android:before { content: "\f17b"; } i.icon.angellist:before { content: "\f209"; } i.icon.angle.double.down:before { content: "\f103"; } i.icon.angle.double.left:before { content: "\f100"; } i.icon.angle.double.right:before { content: "\f101"; } i.icon.angle.double.up:before { content: "\f102"; } i.icon.angle.down:before { content: "\f107"; } i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } i.icon.angle.up:before { content: "\f106"; } i.icon.angrycreative:before { content: "\f36e"; } i.icon.angular:before { content: "\f420"; } i.icon.app.store:before { content: "\f36f"; } i.icon.app.store.ios:before { content: "\f370"; } i.icon.apper:before { content: "\f371"; } i.icon.apple:before { content: "\f179"; } i.icon.apple.pay:before { content: "\f415"; } i.icon.archive:before { content: "\f187"; } i.icon.arrow.alternate.circle.down:before { content: "\f358"; } i.icon.arrow.alternate.circle.left:before { content: "\f359"; } i.icon.arrow.alternate.circle.right:before { content: "\f35a"; } i.icon.arrow.alternate.circle.up:before { content: "\f35b"; } i.icon.arrow.circle.down:before { content: "\f0ab"; } i.icon.arrow.circle.left:before { content: "\f0a8"; } i.icon.arrow.circle.right:before { content: "\f0a9"; } i.icon.arrow.circle.up:before { content: "\f0aa"; } i.icon.arrow.down:before { content: "\f063"; } i.icon.arrow.left:before { content: "\f060"; } i.icon.arrow.right:before { content: "\f061"; } i.icon.arrow.up:before { content: "\f062"; } i.icon.arrows.alternate:before { content: "\f0b2"; } i.icon.arrows.alternate.horizontal:before { content: "\f337"; } i.icon.arrows.alternate.vertical:before { content: "\f338"; } i.icon.assistive.listening.systems:before { content: "\f2a2"; } i.icon.asterisk:before { content: "\f069"; } i.icon.asymmetrik:before { content: "\f372"; } i.icon.at:before { content: "\f1fa"; } i.icon.audible:before { content: "\f373"; } i.icon.audio.description:before { content: "\f29e"; } i.icon.autoprefixer:before { content: "\f41c"; } i.icon.avianex:before { content: "\f374"; } i.icon.aviato:before { content: "\f421"; } i.icon.aws:before { content: "\f375"; } i.icon.backward:before { content: "\f04a"; } i.icon.balance.scale:before { content: "\f24e"; } i.icon.ban:before { content: "\f05e"; } i.icon.band.aid:before { content: "\f462"; } i.icon.bandcamp:before { content: "\f2d5"; } i.icon.barcode:before { content: "\f02a"; } i.icon.bars:before { content: "\f0c9"; } i.icon.baseball.ball:before { content: "\f433"; } i.icon.basketball.ball:before { content: "\f434"; } i.icon.bath:before { content: "\f2cd"; } i.icon.battery.empty:before { content: "\f244"; } i.icon.battery.full:before { content: "\f240"; } i.icon.battery.half:before { content: "\f242"; } i.icon.battery.quarter:before { content: "\f243"; } i.icon.battery.three.quarters:before { content: "\f241"; } i.icon.bed:before { content: "\f236"; } i.icon.beer:before { content: "\f0fc"; } i.icon.behance:before { content: "\f1b4"; } i.icon.behance.square:before { content: "\f1b5"; } i.icon.bell:before { content: "\f0f3"; } i.icon.bell.slash:before { content: "\f1f6"; } i.icon.bicycle:before { content: "\f206"; } i.icon.bimobject:before { content: "\f378"; } i.icon.binoculars:before { content: "\f1e5"; } i.icon.birthday.cake:before { content: "\f1fd"; } i.icon.bitbucket:before { content: "\f171"; } i.icon.bitcoin:before { content: "\f379"; } i.icon.bity:before { content: "\f37a"; } i.icon.black.tie:before { content: "\f27e"; } i.icon.blackberry:before { content: "\f37b"; } i.icon.blind:before { content: "\f29d"; } i.icon.blogger:before { content: "\f37c"; } i.icon.blogger.b:before { content: "\f37d"; } i.icon.bluetooth:before { content: "\f293"; } i.icon.bluetooth.b:before { content: "\f294"; } i.icon.bold:before { content: "\f032"; } i.icon.bolt:before { content: "\f0e7"; } i.icon.bomb:before { content: "\f1e2"; } i.icon.book:before { content: "\f02d"; } i.icon.bookmark:before { content: "\f02e"; } i.icon.bowling.ball:before { content: "\f436"; } i.icon.box:before { content: "\f466"; } i.icon.boxes:before { content: "\f468"; } i.icon.braille:before { content: "\f2a1"; } i.icon.briefcase:before { content: "\f0b1"; } i.icon.btc:before { content: "\f15a"; } i.icon.bug:before { content: "\f188"; } i.icon.building:before { content: "\f1ad"; } i.icon.bullhorn:before { content: "\f0a1"; } i.icon.bullseye:before { content: "\f140"; } i.icon.buromobelexperte:before { content: "\f37f"; } i.icon.bus:before { content: "\f207"; } i.icon.buysellads:before { content: "\f20d"; } i.icon.calculator:before { content: "\f1ec"; } i.icon.calendar:before { content: "\f133"; } i.icon.calendar.alternate:before { content: "\f073"; } i.icon.calendar.check:before { content: "\f274"; } i.icon.calendar.minus:before { content: "\f272"; } i.icon.calendar.plus:before { content: "\f271"; } i.icon.calendar.times:before { content: "\f273"; } i.icon.camera:before { content: "\f030"; } i.icon.camera.retro:before { content: "\f083"; } i.icon.car:before { content: "\f1b9"; } i.icon.caret.down:before { content: "\f0d7"; } i.icon.caret.left:before { content: "\f0d9"; } i.icon.caret.right:before { content: "\f0da"; } i.icon.caret.square.down:before { content: "\f150"; } i.icon.caret.square.left:before { content: "\f191"; } i.icon.caret.square.right:before { content: "\f152"; } i.icon.caret.square.up:before { content: "\f151"; } i.icon.caret.up:before { content: "\f0d8"; } i.icon.cart.arrow.down:before { content: "\f218"; } i.icon.cart.plus:before { content: "\f217"; } i.icon.cc.amazon.pay:before { content: "\f42d"; } i.icon.cc.amex:before { content: "\f1f3"; } i.icon.cc.apple.pay:before { content: "\f416"; } i.icon.cc.diners.club:before { content: "\f24c"; } i.icon.cc.discover:before { content: "\f1f2"; } i.icon.cc.jcb:before { content: "\f24b"; } i.icon.cc.mastercard:before { content: "\f1f1"; } i.icon.cc.paypal:before { content: "\f1f4"; } i.icon.cc.stripe:before { content: "\f1f5"; } i.icon.cc.visa:before { content: "\f1f0"; } i.icon.centercode:before { content: "\f380"; } i.icon.certificate:before { content: "\f0a3"; } i.icon.chart.area:before { content: "\f1fe"; } i.icon.chart.bar:before { content: "\f080"; } i.icon.chart.line:before { content: "\f201"; } i.icon.chart.pie:before { content: "\f200"; } i.icon.check:before { content: "\f00c"; } i.icon.check.circle:before { content: "\f058"; } i.icon.check.square:before { content: "\f14a"; } i.icon.chess:before { content: "\f439"; } i.icon.chess.bishop:before { content: "\f43a"; } i.icon.chess.board:before { content: "\f43c"; } i.icon.chess.king:before { content: "\f43f"; } i.icon.chess.knight:before { content: "\f441"; } i.icon.chess.pawn:before { content: "\f443"; } i.icon.chess.queen:before { content: "\f445"; } i.icon.chess.rook:before { content: "\f447"; } i.icon.chevron.circle.down:before { content: "\f13a"; } i.icon.chevron.circle.left:before { content: "\f137"; } i.icon.chevron.circle.right:before { content: "\f138"; } i.icon.chevron.circle.up:before { content: "\f139"; } i.icon.chevron.down:before { content: "\f078"; } i.icon.chevron.left:before { content: "\f053"; } i.icon.chevron.right:before { content: "\f054"; } i.icon.chevron.up:before { content: "\f077"; } i.icon.child:before { content: "\f1ae"; } i.icon.chrome:before { content: "\f268"; } i.icon.circle:before { content: "\f111"; } i.icon.circle.notch:before { content: "\f1ce"; } i.icon.clipboard:before { content: "\f328"; } i.icon.clipboard.check:before { content: "\f46c"; } i.icon.clipboard.list:before { content: "\f46d"; } i.icon.clock:before { content: "\f017"; } i.icon.clone:before { content: "\f24d"; } i.icon.closed.captioning:before { content: "\f20a"; } i.icon.cloud:before { content: "\f0c2"; } i.icon.cloudscale:before { content: "\f383"; } i.icon.cloudsmith:before { content: "\f384"; } i.icon.cloudversify:before { content: "\f385"; } i.icon.code:before { content: "\f121"; } i.icon.code.branch:before { content: "\f126"; } i.icon.codepen:before { content: "\f1cb"; } i.icon.codiepie:before { content: "\f284"; } i.icon.coffee:before { content: "\f0f4"; } i.icon.cog:before { content: "\f013"; } i.icon.cogs:before { content: "\f085"; } i.icon.columns:before { content: "\f0db"; } i.icon.comment:before { content: "\f075"; } i.icon.comment.alternate:before { content: "\f27a"; } i.icon.comments:before { content: "\f086"; } i.icon.compass:before { content: "\f14e"; } i.icon.compress:before { content: "\f066"; } i.icon.connectdevelop:before { content: "\f20e"; } i.icon.contao:before { content: "\f26d"; } i.icon.copy:before { content: "\f0c5"; } i.icon.copyright:before { content: "\f1f9"; } i.icon.cpanel:before { content: "\f388"; } i.icon.creative.commons:before { content: "\f25e"; } i.icon.credit.card:before { content: "\f09d"; } i.icon.crop:before { content: "\f125"; } i.icon.crosshairs:before { content: "\f05b"; } i.icon.css3:before { content: "\f13c"; } i.icon.css3.alternate:before { content: "\f38b"; } i.icon.cube:before { content: "\f1b2"; } i.icon.cubes:before { content: "\f1b3"; } i.icon.cut:before { content: "\f0c4"; } i.icon.cuttlefish:before { content: "\f38c"; } i.icon.d.and.d:before { content: "\f38d"; } i.icon.dashcube:before { content: "\f210"; } i.icon.database:before { content: "\f1c0"; } i.icon.deaf:before { content: "\f2a4"; } i.icon.delicious:before { content: "\f1a5"; } i.icon.deploydog:before { content: "\f38e"; } i.icon.deskpro:before { content: "\f38f"; } i.icon.desktop:before { content: "\f108"; } i.icon.deviantart:before { content: "\f1bd"; } i.icon.digg:before { content: "\f1a6"; } i.icon.digital.ocean:before { content: "\f391"; } i.icon.discord:before { content: "\f392"; } i.icon.discourse:before { content: "\f393"; } i.icon.dna:before { content: "\f471"; } i.icon.dochub:before { content: "\f394"; } i.icon.docker:before { content: "\f395"; } i.icon.dollar.sign:before { content: "\f155"; } i.icon.dolly:before { content: "\f472"; } i.icon.dolly.flatbed:before { content: "\f474"; } i.icon.dot.circle:before { content: "\f192"; } i.icon.download:before { content: "\f019"; } i.icon.draft2digital:before { content: "\f396"; } i.icon.dribbble:before { content: "\f17d"; } i.icon.dribbble.square:before { content: "\f397"; } i.icon.dropbox:before { content: "\f16b"; } i.icon.drupal:before { content: "\f1a9"; } i.icon.dyalog:before { content: "\f399"; } i.icon.earlybirds:before { content: "\f39a"; } i.icon.edge:before { content: "\f282"; } i.icon.edit:before { content: "\f044"; } i.icon.eject:before { content: "\f052"; } i.icon.elementor:before { content: "\f430"; } i.icon.ellipsis.horizontal:before { content: "\f141"; } i.icon.ellipsis.vertical:before { content: "\f142"; } i.icon.ember:before { content: "\f423"; } i.icon.empire:before { content: "\f1d1"; } i.icon.envelope:before { content: "\f0e0"; } i.icon.envelope.open:before { content: "\f2b6"; } i.icon.envelope.square:before { content: "\f199"; } i.icon.envira:before { content: "\f299"; } i.icon.eraser:before { content: "\f12d"; } i.icon.erlang:before { content: "\f39d"; } i.icon.ethereum:before { content: "\f42e"; } i.icon.etsy:before { content: "\f2d7"; } i.icon.euro.sign:before { content: "\f153"; } i.icon.exchange.alternate:before { content: "\f362"; } i.icon.exclamation:before { content: "\f12a"; } i.icon.exclamation.circle:before { content: "\f06a"; } i.icon.exclamation.triangle:before { content: "\f071"; } i.icon.expand:before { content: "\f065"; } i.icon.expand.arrows.alternate:before { content: "\f31e"; } i.icon.expeditedssl:before { content: "\f23e"; } i.icon.external.alternate:before { content: "\f35d"; } i.icon.external.square.alternate:before { content: "\f360"; } i.icon.eye:before { content: "\f06e"; } i.icon.eye.dropper:before { content: "\f1fb"; } i.icon.eye.slash:before { content: "\f070"; } i.icon.facebook:before { content: "\f09a"; } i.icon.facebook.f:before { content: "\f39e"; } i.icon.facebook.messenger:before { content: "\f39f"; } i.icon.facebook.square:before { content: "\f082"; } i.icon.fast.backward:before { content: "\f049"; } i.icon.fast.forward:before { content: "\f050"; } i.icon.fax:before { content: "\f1ac"; } i.icon.female:before { content: "\f182"; } i.icon.fighter.jet:before { content: "\f0fb"; } i.icon.file:before { content: "\f15b"; } i.icon.file.alternate:before { content: "\f15c"; } i.icon.file.archive:before { content: "\f1c6"; } i.icon.file.audio:before { content: "\f1c7"; } i.icon.file.code:before { content: "\f1c9"; } i.icon.file.excel:before { content: "\f1c3"; } i.icon.file.image:before { content: "\f1c5"; } i.icon.file.pdf:before { content: "\f1c1"; } i.icon.file.powerpoint:before { content: "\f1c4"; } i.icon.file.video:before { content: "\f1c8"; } i.icon.file.word:before { content: "\f1c2"; } i.icon.film:before { content: "\f008"; } i.icon.filter:before { content: "\f0b0"; } i.icon.fire:before { content: "\f06d"; } i.icon.fire.extinguisher:before { content: "\f134"; } i.icon.firefox:before { content: "\f269"; } i.icon.first.aid:before { content: "\f479"; } i.icon.first.order:before { content: "\f2b0"; } i.icon.firstdraft:before { content: "\f3a1"; } i.icon.flag:before { content: "\f024"; } i.icon.flag.checkered:before { content: "\f11e"; } i.icon.flask:before { content: "\f0c3"; } i.icon.flickr:before { content: "\f16e"; } i.icon.flipboard:before { content: "\f44d"; } i.icon.fly:before { content: "\f417"; } i.icon.folder:before { content: "\f07b"; } i.icon.folder.open:before { content: "\f07c"; } i.icon.font:before { content: "\f031"; } i.icon.font.awesome:before { content: "\f2b4"; } i.icon.font.awesome.alternate:before { content: "\f35c"; } i.icon.font.awesome.flag:before { content: "\f425"; } i.icon.fonticons:before { content: "\f280"; } i.icon.fonticons.fi:before { content: "\f3a2"; } i.icon.football.ball:before { content: "\f44e"; } i.icon.fort.awesome:before { content: "\f286"; } i.icon.fort.awesome.alternate:before { content: "\f3a3"; } i.icon.forumbee:before { content: "\f211"; } i.icon.forward:before { content: "\f04e"; } i.icon.foursquare:before { content: "\f180"; } i.icon.free.code.camp:before { content: "\f2c5"; } i.icon.freebsd:before { content: "\f3a4"; } i.icon.frown:before { content: "\f119"; } i.icon.futbol:before { content: "\f1e3"; } i.icon.gamepad:before { content: "\f11b"; } i.icon.gavel:before { content: "\f0e3"; } i.icon.gem:before { content: "\f3a5"; } i.icon.genderless:before { content: "\f22d"; } i.icon.get.pocket:before { content: "\f265"; } i.icon.gg:before { content: "\f260"; } i.icon.gg.circle:before { content: "\f261"; } i.icon.gift:before { content: "\f06b"; } i.icon.git:before { content: "\f1d3"; } i.icon.git.square:before { content: "\f1d2"; } i.icon.github:before { content: "\f09b"; } i.icon.github.alternate:before { content: "\f113"; } i.icon.github.square:before { content: "\f092"; } i.icon.gitkraken:before { content: "\f3a6"; } i.icon.gitlab:before { content: "\f296"; } i.icon.gitter:before { content: "\f426"; } i.icon.glass.martini:before { content: "\f000"; } i.icon.glide:before { content: "\f2a5"; } i.icon.glide.g:before { content: "\f2a6"; } i.icon.globe:before { content: "\f0ac"; } i.icon.gofore:before { content: "\f3a7"; } i.icon.golf.ball:before { content: "\f450"; } i.icon.goodreads:before { content: "\f3a8"; } i.icon.goodreads.g:before { content: "\f3a9"; } i.icon.google:before { content: "\f1a0"; } i.icon.google.drive:before { content: "\f3aa"; } i.icon.google.play:before { content: "\f3ab"; } i.icon.google.plus:before { content: "\f2b3"; } i.icon.google.plus.g:before { content: "\f0d5"; } i.icon.google.plus.square:before { content: "\f0d4"; } i.icon.google.wallet:before { content: "\f1ee"; } i.icon.graduation.cap:before { content: "\f19d"; } i.icon.gratipay:before { content: "\f184"; } i.icon.grav:before { content: "\f2d6"; } i.icon.gripfire:before { content: "\f3ac"; } i.icon.grunt:before { content: "\f3ad"; } i.icon.gulp:before { content: "\f3ae"; } i.icon.h.square:before { content: "\f0fd"; } i.icon.hacker.news:before { content: "\f1d4"; } i.icon.hacker.news.square:before { content: "\f3af"; } i.icon.hand.lizard:before { content: "\f258"; } i.icon.hand.paper:before { content: "\f256"; } i.icon.hand.peace:before { content: "\f25b"; } i.icon.hand.point.down:before { content: "\f0a7"; } i.icon.hand.point.left:before { content: "\f0a5"; } i.icon.hand.point.right:before { content: "\f0a4"; } i.icon.hand.point.up:before { content: "\f0a6"; } i.icon.hand.pointer:before { content: "\f25a"; } i.icon.hand.rock:before { content: "\f255"; } i.icon.hand.scissors:before { content: "\f257"; } i.icon.hand.spock:before { content: "\f259"; } i.icon.handshake:before { content: "\f2b5"; } i.icon.hashtag:before { content: "\f292"; } i.icon.hdd:before { content: "\f0a0"; } i.icon.heading:before { content: "\f1dc"; } i.icon.headphones:before { content: "\f025"; } i.icon.heart:before { content: "\f004"; } i.icon.heartbeat:before { content: "\f21e"; } i.icon.hips:before { content: "\f452"; } i.icon.hire.a.helper:before { content: "\f3b0"; } i.icon.history:before { content: "\f1da"; } i.icon.hockey.puck:before { content: "\f453"; } i.icon.home:before { content: "\f015"; } i.icon.hooli:before { content: "\f427"; } i.icon.hospital:before { content: "\f0f8"; } i.icon.hospital.symbol:before { content: "\f47e"; } i.icon.hotjar:before { content: "\f3b1"; } i.icon.hourglass:before { content: "\f254"; } i.icon.hourglass.end:before { content: "\f253"; } i.icon.hourglass.half:before { content: "\f252"; } i.icon.hourglass.start:before { content: "\f251"; } i.icon.houzz:before { content: "\f27c"; } i.icon.html5:before { content: "\f13b"; } i.icon.hubspot:before { content: "\f3b2"; } i.icon.i.cursor:before { content: "\f246"; } i.icon.id.badge:before { content: "\f2c1"; } i.icon.id.card:before { content: "\f2c2"; } i.icon.image:before { content: "\f03e"; } i.icon.images:before { content: "\f302"; } i.icon.imdb:before { content: "\f2d8"; } i.icon.inbox:before { content: "\f01c"; } i.icon.indent:before { content: "\f03c"; } i.icon.industry:before { content: "\f275"; } i.icon.info:before { content: "\f129"; } i.icon.info.circle:before { content: "\f05a"; } i.icon.instagram:before { content: "\f16d"; } i.icon.internet.explorer:before { content: "\f26b"; } i.icon.ioxhost:before { content: "\f208"; } i.icon.italic:before { content: "\f033"; } i.icon.itunes:before { content: "\f3b4"; } i.icon.itunes.note:before { content: "\f3b5"; } i.icon.jenkins:before { content: "\f3b6"; } i.icon.joget:before { content: "\f3b7"; } i.icon.joomla:before { content: "\f1aa"; } i.icon.js:before { content: "\f3b8"; } i.icon.js.square:before { content: "\f3b9"; } i.icon.jsfiddle:before { content: "\f1cc"; } i.icon.key:before { content: "\f084"; } i.icon.keyboard:before { content: "\f11c"; } i.icon.keycdn:before { content: "\f3ba"; } i.icon.kickstarter:before { content: "\f3bb"; } i.icon.kickstarter.k:before { content: "\f3bc"; } i.icon.korvue:before { content: "\f42f"; } i.icon.language:before { content: "\f1ab"; } i.icon.laptop:before { content: "\f109"; } i.icon.laravel:before { content: "\f3bd"; } i.icon.lastfm:before { content: "\f202"; } i.icon.lastfm.square:before { content: "\f203"; } i.icon.leaf:before { content: "\f06c"; } i.icon.leanpub:before { content: "\f212"; } i.icon.lemon:before { content: "\f094"; } i.icon.less:before { content: "\f41d"; } i.icon.level.down.alternate:before { content: "\f3be"; } i.icon.level.up.alternate:before { content: "\f3bf"; } i.icon.life.ring:before { content: "\f1cd"; } i.icon.lightbulb:before { content: "\f0eb"; } i.icon.linechat:before { content: "\f3c0"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.linkedin:before { content: "\f08c"; } i.icon.linkedin.alt:before { content: "\f0e1"; } i.icon.linode:before { content: "\f2b8"; } i.icon.linux:before { content: "\f17c"; } i.icon.lira.sign:before { content: "\f195"; } i.icon.list:before { content: "\f03a"; } i.icon.list.alternate:before { content: "\f022"; } i.icon.list.ol:before { content: "\f0cb"; } i.icon.list.ul:before { content: "\f0ca"; } i.icon.location.arrow:before { content: "\f124"; } i.icon.lock:before { content: "\f023"; } i.icon.lock.open:before { content: "\f3c1"; } i.icon.long.arrow.alternate.down:before { content: "\f309"; } i.icon.long.arrow.alternate.left:before { content: "\f30a"; } i.icon.long.arrow.alternate.right:before { content: "\f30b"; } i.icon.long.arrow.alternate.up:before { content: "\f30c"; } i.icon.low.vision:before { content: "\f2a8"; } i.icon.lyft:before { content: "\f3c3"; } i.icon.magento:before { content: "\f3c4"; } i.icon.magic:before { content: "\f0d0"; } i.icon.magnet:before { content: "\f076"; } i.icon.male:before { content: "\f183"; } i.icon.map:before { content: "\f279"; } i.icon.map.marker:before { content: "\f041"; } i.icon.map.marker.alternate:before { content: "\f3c5"; } i.icon.map.pin:before { content: "\f276"; } i.icon.map.signs:before { content: "\f277"; } i.icon.mars:before { content: "\f222"; } i.icon.mars.double:before { content: "\f227"; } i.icon.mars.stroke:before { content: "\f229"; } i.icon.mars.stroke.horizontal:before { content: "\f22b"; } i.icon.mars.stroke.vertical:before { content: "\f22a"; } i.icon.maxcdn:before { content: "\f136"; } i.icon.medapps:before { content: "\f3c6"; } i.icon.medium:before { content: "\f23a"; } i.icon.medium.m:before { content: "\f3c7"; } i.icon.medkit:before { content: "\f0fa"; } i.icon.medrt:before { content: "\f3c8"; } i.icon.meetup:before { content: "\f2e0"; } i.icon.meh:before { content: "\f11a"; } i.icon.mercury:before { content: "\f223"; } i.icon.microchip:before { content: "\f2db"; } i.icon.microphone:before { content: "\f130"; } i.icon.microphone.slash:before { content: "\f131"; } i.icon.microsoft:before { content: "\f3ca"; } i.icon.minus:before { content: "\f068"; } i.icon.minus.circle:before { content: "\f056"; } i.icon.minus.square:before { content: "\f146"; } i.icon.mix:before { content: "\f3cb"; } i.icon.mixcloud:before { content: "\f289"; } i.icon.mizuni:before { content: "\f3cc"; } i.icon.mobile:before { content: "\f10b"; } i.icon.mobile.alternate:before { content: "\f3cd"; } i.icon.modx:before { content: "\f285"; } i.icon.monero:before { content: "\f3d0"; } i.icon.money.bill.alternate:before { content: "\f3d1"; } i.icon.moon:before { content: "\f186"; } i.icon.motorcycle:before { content: "\f21c"; } i.icon.mouse.pointer:before { content: "\f245"; } i.icon.music:before { content: "\f001"; } i.icon.napster:before { content: "\f3d2"; } i.icon.neuter:before { content: "\f22c"; } i.icon.newspaper:before { content: "\f1ea"; } i.icon.nintendo.switch:before { content: "\f418"; } i.icon.node:before { content: "\f419"; } i.icon.node.js:before { content: "\f3d3"; } i.icon.npm:before { content: "\f3d4"; } i.icon.ns8:before { content: "\f3d5"; } i.icon.nutritionix:before { content: "\f3d6"; } i.icon.object.group:before { content: "\f247"; } i.icon.object.ungroup:before { content: "\f248"; } i.icon.odnoklassniki:before { content: "\f263"; } i.icon.odnoklassniki.square:before { content: "\f264"; } i.icon.opencart:before { content: "\f23d"; } i.icon.openid:before { content: "\f19b"; } i.icon.opera:before { content: "\f26a"; } i.icon.optin.monster:before { content: "\f23c"; } i.icon.osi:before { content: "\f41a"; } i.icon.outdent:before { content: "\f03b"; } i.icon.page4:before { content: "\f3d7"; } i.icon.pagelines:before { content: "\f18c"; } i.icon.paint.brush:before { content: "\f1fc"; } i.icon.palfed:before { content: "\f3d8"; } i.icon.pallet:before { content: "\f482"; } i.icon.paper.plane:before { content: "\f1d8"; } i.icon.paperclip:before { content: "\f0c6"; } i.icon.paragraph:before { content: "\f1dd"; } i.icon.paste:before { content: "\f0ea"; } i.icon.patreon:before { content: "\f3d9"; } i.icon.pause:before { content: "\f04c"; } i.icon.pause.circle:before { content: "\f28b"; } i.icon.paw:before { content: "\f1b0"; } i.icon.paypal:before { content: "\f1ed"; } i.icon.pen.square:before { content: "\f14b"; } i.icon.pencil.alternate:before { content: "\f303"; } i.icon.percent:before { content: "\f295"; } i.icon.periscope:before { content: "\f3da"; } i.icon.phabricator:before { content: "\f3db"; } i.icon.phoenix.framework:before { content: "\f3dc"; } i.icon.phone:before { content: "\f095"; } i.icon.phone.square:before { content: "\f098"; } i.icon.phone.volume:before { content: "\f2a0"; } i.icon.php:before { content: "\f457"; } i.icon.pied.piper:before { content: "\f2ae"; } i.icon.pied.piper.alternate:before { content: "\f1a8"; } i.icon.pied.piper.pp:before { content: "\f1a7"; } i.icon.pills:before { content: "\f484"; } i.icon.pinterest:before { content: "\f0d2"; } i.icon.pinterest.p:before { content: "\f231"; } i.icon.pinterest.square:before { content: "\f0d3"; } i.icon.plane:before { content: "\f072"; } i.icon.play:before { content: "\f04b"; } i.icon.play.circle:before { content: "\f144"; } i.icon.playstation:before { content: "\f3df"; } i.icon.plug:before { content: "\f1e6"; } i.icon.plus:before { content: "\f067"; } i.icon.plus.circle:before { content: "\f055"; } i.icon.plus.square:before { content: "\f0fe"; } i.icon.podcast:before { content: "\f2ce"; } i.icon.pound.sign:before { content: "\f154"; } i.icon.power.off:before { content: "\f011"; } i.icon.print:before { content: "\f02f"; } i.icon.product.hunt:before { content: "\f288"; } i.icon.pushed:before { content: "\f3e1"; } i.icon.puzzle.piece:before { content: "\f12e"; } i.icon.python:before { content: "\f3e2"; } i.icon.qq:before { content: "\f1d6"; } i.icon.qrcode:before { content: "\f029"; } i.icon.question:before { content: "\f128"; } i.icon.question.circle:before { content: "\f059"; } i.icon.quidditch:before { content: "\f458"; } i.icon.quinscape:before { content: "\f459"; } i.icon.quora:before { content: "\f2c4"; } i.icon.quote.left:before { content: "\f10d"; } i.icon.quote.right:before { content: "\f10e"; } i.icon.random:before { content: "\f074"; } i.icon.ravelry:before { content: "\f2d9"; } i.icon.react:before { content: "\f41b"; } i.icon.rebel:before { content: "\f1d0"; } i.icon.recycle:before { content: "\f1b8"; } i.icon.redriver:before { content: "\f3e3"; } i.icon.reddit:before { content: "\f1a1"; } i.icon.reddit.alien:before { content: "\f281"; } i.icon.reddit.square:before { content: "\f1a2"; } i.icon.redo:before { content: "\f01e"; } i.icon.redo.alternate:before { content: "\f2f9"; } i.icon.registered:before { content: "\f25d"; } i.icon.rendact:before { content: "\f3e4"; } i.icon.renren:before { content: "\f18b"; } i.icon.reply:before { content: "\f3e5"; } i.icon.reply.all:before { content: "\f122"; } i.icon.replyd:before { content: "\f3e6"; } i.icon.resolving:before { content: "\f3e7"; } i.icon.retweet:before { content: "\f079"; } i.icon.road:before { content: "\f018"; } i.icon.rocket:before { content: "\f135"; } i.icon.rocketchat:before { content: "\f3e8"; } i.icon.rockrms:before { content: "\f3e9"; } i.icon.rss:before { content: "\f09e"; } i.icon.rss.square:before { content: "\f143"; } i.icon.ruble.sign:before { content: "\f158"; } i.icon.rupee.sign:before { content: "\f156"; } i.icon.safari:before { content: "\f267"; } i.icon.sass:before { content: "\f41e"; } i.icon.save:before { content: "\f0c7"; } i.icon.schlix:before { content: "\f3ea"; } i.icon.scribd:before { content: "\f28a"; } i.icon.search:before { content: "\f002"; } i.icon.search.minus:before { content: "\f010"; } i.icon.search.plus:before { content: "\f00e"; } i.icon.searchengin:before { content: "\f3eb"; } i.icon.sellcast:before { content: "\f2da"; } i.icon.sellsy:before { content: "\f213"; } i.icon.server:before { content: "\f233"; } i.icon.servicestack:before { content: "\f3ec"; } i.icon.share:before { content: "\f064"; } i.icon.share.alternate:before { content: "\f1e0"; } i.icon.share.alternate.square:before { content: "\f1e1"; } i.icon.share.square:before { content: "\f14d"; } i.icon.shekel.sign:before { content: "\f20b"; } i.icon.shield.alternate:before { content: "\f3ed"; } i.icon.ship:before { content: "\f21a"; } i.icon.shipping.fast:before { content: "\f48b"; } i.icon.shirtsinbulk:before { content: "\f214"; } i.icon.shopping.bag:before { content: "\f290"; } i.icon.shopping.basket:before { content: "\f291"; } i.icon.shopping.cart:before { content: "\f07a"; } i.icon.shower:before { content: "\f2cc"; } i.icon.sign.language:before { content: "\f2a7"; } i.icon.signal:before { content: "\f012"; } i.icon.simplybuilt:before { content: "\f215"; } i.icon.sistrix:before { content: "\f3ee"; } i.icon.sitemap:before { content: "\f0e8"; } i.icon.skyatlas:before { content: "\f216"; } i.icon.skype:before { content: "\f17e"; } i.icon.slack:before { content: "\f198"; } i.icon.slack.hash:before { content: "\f3ef"; } i.icon.sliders.horizontal:before { content: "\f1de"; } i.icon.slideshare:before { content: "\f1e7"; } i.icon.smile:before { content: "\f118"; } i.icon.snapchat:before { content: "\f2ab"; } i.icon.snapchat.ghost:before { content: "\f2ac"; } i.icon.snapchat.square:before { content: "\f2ad"; } i.icon.snowflake:before { content: "\f2dc"; } i.icon.sort:before { content: "\f0dc"; } i.icon.sort.alphabet.down:before { content: "\f15d"; } i.icon.sort.alphabet.up:before { content: "\f15e"; } i.icon.sort.amount.down:before { content: "\f160"; } i.icon.sort.amount.up:before { content: "\f161"; } i.icon.sort.down:before { content: "\f0dd"; } i.icon.sort.numeric.down:before { content: "\f162"; } i.icon.sort.numeric.up:before { content: "\f163"; } i.icon.sort.up:before { content: "\f0de"; } i.icon.soundcloud:before { content: "\f1be"; } i.icon.space.shuttle:before { content: "\f197"; } i.icon.speakap:before { content: "\f3f3"; } i.icon.spinner:before { content: "\f110"; } i.icon.spotify:before { content: "\f1bc"; } i.icon.square:before { content: "\f0c8"; } i.icon.square.full:before { content: "\f45c"; } i.icon.stack.exchange:before { content: "\f18d"; } i.icon.stack.overflow:before { content: "\f16c"; } i.icon.star:before { content: "\f005"; } i.icon.star.half:before { content: "\f089"; } i.icon.staylinked:before { content: "\f3f5"; } i.icon.steam:before { content: "\f1b6"; } i.icon.steam.square:before { content: "\f1b7"; } i.icon.steam.symbol:before { content: "\f3f6"; } i.icon.step.backward:before { content: "\f048"; } i.icon.step.forward:before { content: "\f051"; } i.icon.stethoscope:before { content: "\f0f1"; } i.icon.sticker.mule:before { content: "\f3f7"; } i.icon.sticky.note:before { content: "\f249"; } i.icon.stop:before { content: "\f04d"; } i.icon.stop.circle:before { content: "\f28d"; } i.icon.stopwatch:before { content: "\f2f2"; } i.icon.strava:before { content: "\f428"; } i.icon.street.view:before { content: "\f21d"; } i.icon.strikethrough:before { content: "\f0cc"; } i.icon.stripe:before { content: "\f429"; } i.icon.stripe.s:before { content: "\f42a"; } i.icon.studiovinari:before { content: "\f3f8"; } i.icon.stumbleupon:before { content: "\f1a4"; } i.icon.stumbleupon.circle:before { content: "\f1a3"; } i.icon.subscript:before { content: "\f12c"; } i.icon.subway:before { content: "\f239"; } i.icon.suitcase:before { content: "\f0f2"; } i.icon.sun:before { content: "\f185"; } i.icon.superpowers:before { content: "\f2dd"; } i.icon.superscript:before { content: "\f12b"; } i.icon.supple:before { content: "\f3f9"; } i.icon.sync:before { content: "\f021"; } i.icon.sync.alternate:before { content: "\f2f1"; } i.icon.syringe:before { content: "\f48e"; } i.icon.table:before { content: "\f0ce"; } i.icon.table.tennis:before { content: "\f45d"; } i.icon.tablet:before { content: "\f10a"; } i.icon.tablet.alternate:before { content: "\f3fa"; } i.icon.tachometer.alternate:before { content: "\f3fd"; } i.icon.tag:before { content: "\f02b"; } i.icon.tags:before { content: "\f02c"; } i.icon.tasks:before { content: "\f0ae"; } i.icon.taxi:before { content: "\f1ba"; } i.icon.telegram:before { content: "\f2c6"; } i.icon.telegram.plane:before { content: "\f3fe"; } i.icon.tencent.weibo:before { content: "\f1d5"; } i.icon.terminal:before { content: "\f120"; } i.icon.text.height:before { content: "\f034"; } i.icon.text.width:before { content: "\f035"; } i.icon.th:before { content: "\f00a"; } i.icon.th.large:before { content: "\f009"; } i.icon.th.list:before { content: "\f00b"; } i.icon.themeisle:before { content: "\f2b2"; } i.icon.thermometer:before { content: "\f491"; } i.icon.thermometer.empty:before { content: "\f2cb"; } i.icon.thermometer.full:before { content: "\f2c7"; } i.icon.thermometer.half:before { content: "\f2c9"; } i.icon.thermometer.quarter:before { content: "\f2ca"; } i.icon.thermometer.three.quarters:before { content: "\f2c8"; } i.icon.thumbs.down:before { content: "\f165"; } i.icon.thumbs.up:before { content: "\f164"; } i.icon.thumbtack:before { content: "\f08d"; } i.icon.ticket.alternate:before { content: "\f3ff"; } i.icon.times:before { content: "\f00d"; } i.icon.times.circle:before { content: "\f057"; } i.icon.tint:before { content: "\f043"; } i.icon.toggle.off:before { content: "\f204"; } i.icon.toggle.on:before { content: "\f205"; } i.icon.trademark:before { content: "\f25c"; } i.icon.train:before { content: "\f238"; } i.icon.transgender:before { content: "\f224"; } i.icon.transgender.alternate:before { content: "\f225"; } i.icon.trash:before { content: "\f1f8"; } i.icon.trash.alternate:before { content: "\f2ed"; } i.icon.tree:before { content: "\f1bb"; } i.icon.trello:before { content: "\f181"; } i.icon.tripadvisor:before { content: "\f262"; } i.icon.trophy:before { content: "\f091"; } i.icon.truck:before { content: "\f0d1"; } i.icon.tty:before { content: "\f1e4"; } i.icon.tumblr:before { content: "\f173"; } i.icon.tumblr.square:before { content: "\f174"; } i.icon.tv:before { content: "\f26c"; } i.icon.twitch:before { content: "\f1e8"; } i.icon.twitter:before { content: "\f099"; } i.icon.twitter.square:before { content: "\f081"; } i.icon.typo3:before { content: "\f42b"; } i.icon.uber:before { content: "\f402"; } i.icon.uikit:before { content: "\f403"; } i.icon.umbrella:before { content: "\f0e9"; } i.icon.underline:before { content: "\f0cd"; } i.icon.undo:before { content: "\f0e2"; } i.icon.undo.alternate:before { content: "\f2ea"; } i.icon.uniregistry:before { content: "\f404"; } i.icon.universal.access:before { content: "\f29a"; } i.icon.university:before { content: "\f19c"; } i.icon.unlink:before { content: "\f127"; } i.icon.unlock:before { content: "\f09c"; } i.icon.unlock.alternate:before { content: "\f13e"; } i.icon.untappd:before { content: "\f405"; } i.icon.upload:before { content: "\f093"; } i.icon.usb:before { content: "\f287"; } i.icon.user:before { content: "\f007"; } i.icon.user.circle:before { content: "\f2bd"; } i.icon.user.md:before { content: "\f0f0"; } i.icon.user.plus:before { content: "\f234"; } i.icon.user.secret:before { content: "\f21b"; } i.icon.user.times:before { content: "\f235"; } i.icon.users:before { content: "\f0c0"; } i.icon.ussunnah:before { content: "\f407"; } i.icon.utensil.spoon:before { content: "\f2e5"; } i.icon.utensils:before { content: "\f2e7"; } i.icon.vaadin:before { content: "\f408"; } i.icon.venus:before { content: "\f221"; } i.icon.venus.double:before { content: "\f226"; } i.icon.venus.mars:before { content: "\f228"; } i.icon.viacoin:before { content: "\f237"; } i.icon.viadeo:before { content: "\f2a9"; } i.icon.viadeo.square:before { content: "\f2aa"; } i.icon.viber:before { content: "\f409"; } i.icon.video:before { content: "\f03d"; } i.icon.vimeo:before { content: "\f40a"; } i.icon.vimeo.square:before { content: "\f194"; } i.icon.vimeo.v:before { content: "\f27d"; } i.icon.vine:before { content: "\f1ca"; } i.icon.vk:before { content: "\f189"; } i.icon.vnv:before { content: "\f40b"; } i.icon.volleyball.ball:before { content: "\f45f"; } i.icon.volume.down:before { content: "\f027"; } i.icon.volume.off:before { content: "\f026"; } i.icon.volume.up:before { content: "\f028"; } i.icon.vuejs:before { content: "\f41f"; } i.icon.warehouse:before { content: "\f494"; } i.icon.weibo:before { content: "\f18a"; } i.icon.weight:before { content: "\f496"; } i.icon.weixin:before { content: "\f1d7"; } i.icon.whatsapp:before { content: "\f232"; } i.icon.whatsapp.square:before { content: "\f40c"; } i.icon.wheelchair:before { content: "\f193"; } i.icon.whmcs:before { content: "\f40d"; } i.icon.wifi:before { content: "\f1eb"; } i.icon.wikipedia.w:before { content: "\f266"; } i.icon.window.close:before { content: "\f410"; } i.icon.window.maximize:before { content: "\f2d0"; } i.icon.window.minimize:before { content: "\f2d1"; } i.icon.window.restore:before { content: "\f2d2"; } i.icon.windows:before { content: "\f17a"; } i.icon.won.sign:before { content: "\f159"; } i.icon.wordpress:before { content: "\f19a"; } i.icon.wordpress.simple:before { content: "\f411"; } i.icon.wpbeginner:before { content: "\f297"; } i.icon.wpexplorer:before { content: "\f2de"; } i.icon.wpforms:before { content: "\f298"; } i.icon.wrench:before { content: "\f0ad"; } i.icon.xbox:before { content: "\f412"; } i.icon.xing:before { content: "\f168"; } i.icon.xing.square:before { content: "\f169"; } i.icon.y.combinator:before { content: "\f23b"; } i.icon.yahoo:before { content: "\f19e"; } i.icon.yandex:before { content: "\f413"; } i.icon.yandex.international:before { content: "\f414"; } i.icon.yelp:before { content: "\f1e9"; } i.icon.yen.sign:before { content: "\f157"; } i.icon.yoast:before { content: "\f2b1"; } i.icon.youtube:before { content: "\f167"; } i.icon.youtube.square:before { content: "\f431"; } /* Aliases */ i.icon.chess.rock:before { content: "\f447"; } i.icon.ordered.list:before { content: "\f0cb"; } i.icon.unordered.list:before { content: "\f0ca"; } i.icon.user.doctor:before { content: "\f0f0"; } i.icon.shield:before { content: "\f3ed"; } i.icon.puzzle:before { content: "\f12e"; } i.icon.credit.card.amazon.pay:before { content: "\f42d"; } i.icon.credit.card.american.express:before { content: "\f1f3"; } i.icon.credit.card.diners.club:before { content: "\f24c"; } i.icon.credit.card.discover:before { content: "\f1f2"; } i.icon.credit.card.jcb:before { content: "\f24b"; } i.icon.credit.card.mastercard:before { content: "\f1f1"; } i.icon.credit.card.paypal:before { content: "\f1f4"; } i.icon.credit.card.stripe:before { content: "\f1f5"; } i.icon.credit.card.visa:before { content: "\f1f0"; } i.icon.add.circle:before { content: "\f055"; } i.icon.add.square:before { content: "\f0fe"; } i.icon.add.to.calendar:before { content: "\f271"; } i.icon.add.to.cart:before { content: "\f217"; } i.icon.add.user:before { content: "\f234"; } i.icon.add:before { content: "\f067"; } i.icon.alarm.mute:before { content: "\f1f6"; } i.icon.alarm:before { content: "\f0f3"; } i.icon.ald:before { content: "\f2a2"; } i.icon.als:before { content: "\f2a2"; } i.icon.american.express.card:before { content: "\f1f3"; } i.icon.american.express:before { content: "\f1f3"; } i.icon.amex:before { content: "\f1f3"; } i.icon.announcement:before { content: "\f0a1"; } i.icon.area.chart:before { content: "\f1fe"; } i.icon.area.graph:before { content: "\f1fe"; } i.icon.arrow.down.cart:before { content: "\f218"; } i.icon.asexual:before { content: "\f22d"; } i.icon.asl.interpreting:before { content: "\f2a3"; } i.icon.asl:before { content: "\f2a3"; } i.icon.assistive.listening.devices:before { content: "\f2a2"; } i.icon.attach:before { content: "\f0c6"; } i.icon.attention:before { content: "\f06a"; } i.icon.balance:before { content: "\f24e"; } i.icon.bar:before { content: "\f0fc"; } i.icon.bathtub:before { content: "\f2cd"; } i.icon.battery.four:before { content: "\f240"; } i.icon.battery.high:before { content: "\f241"; } i.icon.battery.low:before { content: "\f243"; } i.icon.battery.medium:before { content: "\f242"; } i.icon.battery.one:before { content: "\f243"; } i.icon.battery.three:before { content: "\f241"; } i.icon.battery.two:before { content: "\f242"; } i.icon.battery.zero:before { content: "\f244"; } i.icon.birthday:before { content: "\f1fd"; } i.icon.block.layout:before { content: "\f009"; } i.icon.bluetooth.alternative:before { content: "\f294"; } i.icon.broken.chain:before { content: "\f127"; } i.icon.browser:before { content: "\f022"; } i.icon.call.square:before { content: "\f098"; } i.icon.call:before { content: "\f095"; } i.icon.cancel:before { content: "\f00d"; } i.icon.cart:before { content: "\f07a"; } i.icon.cc:before { content: "\f20a"; } i.icon.chain:before { content: "\f0c1"; } i.icon.chat:before { content: "\f075"; } i.icon.checked.calendar:before { content: "\f274"; } i.icon.checkmark:before { content: "\f00c"; } i.icon.circle.notched:before { content: "\f1ce"; } i.icon.close:before { content: "\f00d"; } i.icon.cny:before { content: "\f157"; } i.icon.cocktail:before { content: "\f000"; } i.icon.commenting:before { content: "\f27a"; } i.icon.computer:before { content: "\f108"; } i.icon.configure:before { content: "\f0ad"; } i.icon.content:before { content: "\f0c9"; } i.icon.deafness:before { content: "\f2a4"; } i.icon.delete.calendar:before { content: "\f273"; } i.icon.delete:before { content: "\f00d"; } i.icon.detective:before { content: "\f21b"; } i.icon.diners.club.card:before { content: "\f24c"; } i.icon.diners.club:before { content: "\f24c"; } i.icon.discover.card:before { content: "\f1f2"; } i.icon.discover:before { content: "\f1f2"; } i.icon.discussions:before { content: "\f086"; } i.icon.doctor:before { content: "\f0f0"; } i.icon.dollar:before { content: "\f155"; } i.icon.dont:before { content: "\f05e"; } i.icon.dribble:before { content: "\f17d"; } i.icon.drivers.license:before { content: "\f2c2"; } i.icon.dropdown:before { content: "\f0d7"; } i.icon.eercast:before { content: "\f2da"; } i.icon.emergency:before { content: "\f0f9"; } i.icon.envira.gallery:before { content: "\f299"; } i.icon.erase:before { content: "\f12d"; } i.icon.eur:before { content: "\f153"; } i.icon.euro:before { content: "\f153"; } i.icon.eyedropper:before { content: "\f1fb"; } i.icon.fa:before { content: "\f2b4"; } i.icon.factory:before { content: "\f275"; } i.icon.favorite:before { content: "\f005"; } i.icon.feed:before { content: "\f09e"; } i.icon.female.homosexual:before { content: "\f226"; } i.icon.file.text:before { content: "\f15c"; } i.icon.find:before { content: "\f1e5"; } i.icon.first.aid:before { content: "\f0fa"; } i.icon.five.hundred.pixels:before { content: "\f26e"; } i.icon.fork:before { content: "\f126"; } i.icon.game:before { content: "\f11b"; } i.icon.gay:before { content: "\f227"; } i.icon.gbp:before { content: "\f154"; } i.icon.gittip:before { content: "\f184"; } i.icon.google.plus.circle:before { content: "\f2b3"; } i.icon.google.plus.official:before { content: "\f2b3"; } i.icon.grab:before { content: "\f255"; } i.icon.graduation:before { content: "\f19d"; } i.icon.grid.layout:before { content: "\f00a"; } i.icon.group:before { content: "\f0c0"; } i.icon.h:before { content: "\f0fd"; } i.icon.hand.victory:before { content: "\f25b"; } i.icon.handicap:before { content: "\f193"; } i.icon.hard.of.hearing:before { content: "\f2a4"; } i.icon.header:before { content: "\f1dc"; } i.icon.help.circle:before { content: "\f059"; } i.icon.help:before { content: "\f128"; } i.icon.heterosexual:before { content: "\f228"; } i.icon.hide:before { content: "\f070"; } i.icon.hotel:before { content: "\f236"; } i.icon.hourglass.four:before { content: "\f254"; } i.icon.hourglass.full:before { content: "\f254"; } i.icon.hourglass.one:before { content: "\f251"; } i.icon.hourglass.three:before { content: "\f253"; } i.icon.hourglass.two:before { content: "\f252"; } i.icon.idea:before { content: "\f0eb"; } i.icon.ils:before { content: "\f20b"; } i.icon.in-cart:before { content: "\f218"; } i.icon.inr:before { content: "\f156"; } i.icon.intergender:before { content: "\f224"; } i.icon.intersex:before { content: "\f224"; } i.icon.japan.credit.bureau.card:before { content: "\f24b"; } i.icon.japan.credit.bureau:before { content: "\f24b"; } i.icon.jcb:before { content: "\f24b"; } i.icon.jpy:before { content: "\f157"; } i.icon.krw:before { content: "\f159"; } i.icon.lab:before { content: "\f0c3"; } i.icon.law:before { content: "\f24e"; } i.icon.legal:before { content: "\f0e3"; } i.icon.lesbian:before { content: "\f226"; } i.icon.lightning:before { content: "\f0e7"; } i.icon.like:before { content: "\f004"; } i.icon.line.graph:before { content: "\f201"; } i.icon.linkedin.square:before { content: "\f08c"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.lira:before { content: "\f195"; } i.icon.list.layout:before { content: "\f00b"; } i.icon.magnify:before { content: "\f00e"; } i.icon.mail.forward:before { content: "\f064"; } i.icon.mail.square:before { content: "\f199"; } i.icon.mail:before { content: "\f0e0"; } i.icon.male.homosexual:before { content: "\f227"; } i.icon.man:before { content: "\f222"; } i.icon.marker:before { content: "\f041"; } i.icon.mars.alternate:before { content: "\f229"; } i.icon.mars.horizontal:before { content: "\f22b"; } i.icon.mars.vertical:before { content: "\f22a"; } i.icon.mastercard.card:before { content: "\f1f1"; } i.icon.mastercard:before { content: "\f1f1"; } i.icon.microsoft.edge:before { content: "\f282"; } i.icon.military:before { content: "\f0fb"; } i.icon.ms.edge:before { content: "\f282"; } i.icon.mute:before { content: "\f131"; } i.icon.new.pied.piper:before { content: "\f2ae"; } i.icon.non.binary.transgender:before { content: "\f223"; } i.icon.numbered.list:before { content: "\f0cb"; } i.icon.optinmonster:before { content: "\f23c"; } i.icon.options:before { content: "\f1de"; } i.icon.other.gender.horizontal:before { content: "\f22b"; } i.icon.other.gender.vertical:before { content: "\f22a"; } i.icon.other.gender:before { content: "\f229"; } i.icon.payment:before { content: "\f09d"; } i.icon.paypal.card:before { content: "\f1f4"; } i.icon.pencil.square:before { content: "\f14b"; } i.icon.photo:before { content: "\f030"; } i.icon.picture:before { content: "\f03e"; } i.icon.pie.chart:before { content: "\f200"; } i.icon.pie.graph:before { content: "\f200"; } i.icon.pied.piper.hat:before { content: "\f2ae"; } i.icon.pin:before { content: "\f08d"; } i.icon.plus.cart:before { content: "\f217"; } i.icon.pocket:before { content: "\f265"; } i.icon.point:before { content: "\f041"; } i.icon.pointing.down:before { content: "\f0a7"; } i.icon.pointing.left:before { content: "\f0a5"; } i.icon.pointing.right:before { content: "\f0a4"; } i.icon.pointing.up:before { content: "\f0a6"; } i.icon.pound:before { content: "\f154"; } i.icon.power.cord:before { content: "\f1e6"; } i.icon.power:before { content: "\f011"; } i.icon.privacy:before { content: "\f084"; } i.icon.r.circle:before { content: "\f25d"; } i.icon.rain:before { content: "\f0e9"; } i.icon.record:before { content: "\f03d"; } i.icon.refresh:before { content: "\f021"; } i.icon.remove.circle:before { content: "\f057"; } i.icon.remove.from.calendar:before { content: "\f272"; } i.icon.remove.user:before { content: "\f235"; } i.icon.remove:before { content: "\f00d"; } i.icon.repeat:before { content: "\f01e"; } i.icon.rmb:before { content: "\f157"; } i.icon.rouble:before { content: "\f158"; } i.icon.rub:before { content: "\f158"; } i.icon.ruble:before { content: "\f158"; } i.icon.rupee:before { content: "\f156"; } i.icon.s15:before { content: "\f2cd"; } i.icon.selected.radio:before { content: "\f192"; } i.icon.send:before { content: "\f1d8"; } i.icon.setting:before { content: "\f013"; } i.icon.settings:before { content: "\f085"; } i.icon.shekel:before { content: "\f20b"; } i.icon.sheqel:before { content: "\f20b"; } i.icon.shipping:before { content: "\f0d1"; } i.icon.shop:before { content: "\f07a"; } i.icon.shuffle:before { content: "\f074"; } i.icon.shutdown:before { content: "\f011"; } i.icon.sidebar:before { content: "\f0c9"; } i.icon.signing:before { content: "\f2a7"; } i.icon.signup:before { content: "\f044"; } i.icon.sliders:before { content: "\f1de"; } i.icon.soccer:before { content: "\f1e3"; } i.icon.sort.alphabet.ascending:before { content: "\f15d"; } i.icon.sort.alphabet.descending:before { content: "\f15e"; } i.icon.sort.ascending:before { content: "\f0de"; } i.icon.sort.content.ascending:before { content: "\f160"; } i.icon.sort.content.descending:before { content: "\f161"; } i.icon.sort.descending:before { content: "\f0dd"; } i.icon.sort.numeric.ascending:before { content: "\f162"; } i.icon.sort.numeric.descending:before { content: "\f163"; } i.icon.sound:before { content: "\f025"; } i.icon.spy:before { content: "\f21b"; } i.icon.stripe.card:before { content: "\f1f5"; } i.icon.student:before { content: "\f19d"; } i.icon.talk:before { content: "\f27a"; } i.icon.target:before { content: "\f140"; } i.icon.teletype:before { content: "\f1e4"; } i.icon.television:before { content: "\f26c"; } i.icon.text.cursor:before { content: "\f246"; } i.icon.text.telephone:before { content: "\f1e4"; } i.icon.theme.isle:before { content: "\f2b2"; } i.icon.theme:before { content: "\f043"; } i.icon.thermometer:before { content: "\f2c7"; } i.icon.thumb.tack:before { content: "\f08d"; } i.icon.time:before { content: "\f017"; } i.icon.tm:before { content: "\f25c"; } i.icon.toggle.down:before { content: "\f150"; } i.icon.toggle.left:before { content: "\f191"; } i.icon.toggle.right:before { content: "\f152"; } i.icon.toggle.up:before { content: "\f151"; } i.icon.translate:before { content: "\f1ab"; } i.icon.travel:before { content: "\f0b1"; } i.icon.treatment:before { content: "\f0f1"; } i.icon.triangle.down:before { content: "\f0d7"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.try:before { content: "\f195"; } i.icon.unhide:before { content: "\f06e"; } i.icon.unlinkify:before { content: "\f127"; } i.icon.unmute:before { content: "\f130"; } i.icon.usd:before { content: "\f155"; } i.icon.user.cancel:before { content: "\f235"; } i.icon.user.close:before { content: "\f235"; } i.icon.user.delete:before { content: "\f235"; } i.icon.user.x:before { content: "\f235"; } i.icon.vcard:before { content: "\f2bb"; } i.icon.video.camera:before { content: "\f03d"; } i.icon.video.play:before { content: "\f144"; } i.icon.visa.card:before { content: "\f1f0"; } i.icon.visa:before { content: "\f1f0"; } i.icon.volume.control.phone:before { content: "\f2a0"; } i.icon.wait:before { content: "\f017"; } i.icon.warning.circle:before { content: "\f06a"; } i.icon.warning.sign:before { content: "\f071"; } i.icon.warning:before { content: "\f12a"; } i.icon.wechat:before { content: "\f1d7"; } i.icon.wi-fi:before { content: "\f1eb"; } i.icon.wikipedia:before { content: "\f266"; } i.icon.winner:before { content: "\f091"; } i.icon.wizard:before { content: "\f0d0"; } i.icon.woman:before { content: "\f221"; } i.icon.won:before { content: "\f159"; } i.icon.wordpress.beginner:before { content: "\f297"; } i.icon.wordpress.forms:before { content: "\f298"; } i.icon.world:before { content: "\f0ac"; } i.icon.write.square:before { content: "\f14b"; } i.icon.x:before { content: "\f00d"; } i.icon.yc:before { content: "\f23b"; } i.icon.ycombinator:before { content: "\f23b"; } i.icon.yen:before { content: "\f157"; } i.icon.zip:before { content: "\f187"; } i.icon.zoom-in:before { content: "\f00e"; } i.icon.zoom-out:before { content: "\f010"; } i.icon.zoom:before { content: "\f00e"; } i.icon.bitbucket.square:before { content: "\f171"; } i.icon.checkmark.box:before { content: "\f14a"; } i.icon.circle.thin:before { content: "\f111"; } i.icon.cloud.download:before { content: "\f381"; } i.icon.cloud.upload:before { content: "\f382"; } i.icon.compose:before { content: "\f303"; } i.icon.conversation:before { content: "\f086"; } i.icon.credit.card.alternative:before { content: "\f09d"; } i.icon.currency:before { content: "\f3d1"; } i.icon.dashboard:before { content: "\f3fd"; } i.icon.diamond:before { content: "\f3a5"; } i.icon.disk:before { content: "\f0a0"; } i.icon.exchange:before { content: "\f362"; } i.icon.external.share:before { content: "\f14d"; } i.icon.external.square:before { content: "\f360"; } i.icon.external:before { content: "\f35d"; } i.icon.facebook.official:before { content: "\f082"; } i.icon.food:before { content: "\f2e7"; } i.icon.hourglass.zero:before { content: "\f253"; } i.icon.level.down:before { content: "\f3be"; } i.icon.level.up:before { content: "\f3bf"; } i.icon.logout:before { content: "\f2f5"; } i.icon.meanpath:before { content: "\f0c8"; } i.icon.money:before { content: "\f3d1"; } i.icon.move:before { content: "\f0b2"; } i.icon.pencil:before { content: "\f303"; } i.icon.protect:before { content: "\f023"; } i.icon.radio:before { content: "\f192"; } i.icon.remove.bookmark:before { content: "\f02e"; } i.icon.resize.horizontal:before { content: "\f337"; } i.icon.resize.vertical:before { content: "\f338"; } i.icon.sign-in:before { content: "\f2f6"; } i.icon.sign-out:before { content: "\f2f5"; } i.icon.spoon:before { content: "\f2e5"; } i.icon.star.half.empty:before { content: "\f089"; } i.icon.star.half.full:before { content: "\f089"; } i.icon.ticket:before { content: "\f3ff"; } i.icon.times.rectangle:before { content: "\f410"; } i.icon.write:before { content: "\f303"; } i.icon.youtube.play:before { content: "\f167"; } /******************************* Outline Icons *******************************/ /* Outline Icon */ /* Load & Define Icon Font */ @font-face { font-family: 'outline-icons'; src: url("/client/shared/themes/default/assets/fonts/outline-icons.eot"); src: url("/client/shared/themes/default/assets/fonts/outline-icons.eot?#iefix") format('embedded-opentype'), url("/client/shared/themes/default/assets/fonts/outline-icons.woff2") format('woff2'), url("/client/shared/themes/default/assets/fonts/outline-icons.woff") format('woff'), url("/client/shared/themes/default/assets/fonts/outline-icons.ttf") format('truetype'), url("/client/shared/themes/default/assets/fonts/outline-icons.svg#icons") format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon.outline { font-family: 'outline-icons'; } /* Icon Definitions */ i.icon.address.book.outline:before { content: "\f2b9"; } i.icon.address.card.outline:before { content: "\f2bb"; } i.icon.arrow.alternate.circle.down.outline:before { content: "\f358"; } i.icon.arrow.alternate.circle.left.outline:before { content: "\f359"; } i.icon.arrow.alternate.circle.right.outline:before { content: "\f35a"; } i.icon.arrow.alternate.circle.up.outline:before { content: "\f35b"; } i.icon.bell.outline:before { content: "\f0f3"; } i.icon.bell.slash.outline:before { content: "\f1f6"; } i.icon.bookmark.outline:before { content: "\f02e"; } i.icon.building.outline:before { content: "\f1ad"; } i.icon.calendar.outline:before { content: "\f133"; } i.icon.calendar.alternate.outline:before { content: "\f073"; } i.icon.calendar.check.outline:before { content: "\f274"; } i.icon.calendar.minus.outline:before { content: "\f272"; } i.icon.calendar.plus.outline:before { content: "\f271"; } i.icon.calendar.times.outline:before { content: "\f273"; } i.icon.caret.square.down.outline:before { content: "\f150"; } i.icon.caret.square.left.outline:before { content: "\f191"; } i.icon.caret.square.right.outline:before { content: "\f152"; } i.icon.caret.square.up.outline:before { content: "\f151"; } i.icon.chart.bar.outline:before { content: "\f080"; } i.icon.check.circle.outline:before { content: "\f058"; } i.icon.check.square.outline:before { content: "\f14a"; } i.icon.circle.outline:before { content: "\f111"; } i.icon.clipboard.outline:before { content: "\f328"; } i.icon.clock.outline:before { content: "\f017"; } i.icon.clone.outline:before { content: "\f24d"; } i.icon.closed.captioning.outline:before { content: "\f20a"; } i.icon.comment.outline:before { content: "\f075"; } i.icon.comment.alternate.outline:before { content: "\f27a"; } i.icon.comments.outline:before { content: "\f086"; } i.icon.compass.outline:before { content: "\f14e"; } i.icon.copy.outline:before { content: "\f0c5"; } i.icon.copyright.outline:before { content: "\f1f9"; } i.icon.credit.card.outline:before { content: "\f09d"; } i.icon.dot.circle.outline:before { content: "\f192"; } i.icon.edit.outline:before { content: "\f044"; } i.icon.envelope.outline:before { content: "\f0e0"; } i.icon.envelope.open.outline:before { content: "\f2b6"; } i.icon.eye.slash.outline:before { content: "\f070"; } i.icon.file.outline:before { content: "\f15b"; } i.icon.file.alternate.outline:before { content: "\f15c"; } i.icon.file.archive.outline:before { content: "\f1c6"; } i.icon.file.audio.outline:before { content: "\f1c7"; } i.icon.file.code.outline:before { content: "\f1c9"; } i.icon.file.excel.outline:before { content: "\f1c3"; } i.icon.file.image.outline:before { content: "\f1c5"; } i.icon.file.pdf.outline:before { content: "\f1c1"; } i.icon.file.powerpoint.outline:before { content: "\f1c4"; } i.icon.file.video.outline:before { content: "\f1c8"; } i.icon.file.word.outline:before { content: "\f1c2"; } i.icon.flag.outline:before { content: "\f024"; } i.icon.folder.outline:before { content: "\f07b"; } i.icon.folder.open.outline:before { content: "\f07c"; } i.icon.frown.outline:before { content: "\f119"; } i.icon.futbol.outline:before { content: "\f1e3"; } i.icon.gem.outline:before { content: "\f3a5"; } i.icon.hand.lizard.outline:before { content: "\f258"; } i.icon.hand.paper.outline:before { content: "\f256"; } i.icon.hand.peace.outline:before { content: "\f25b"; } i.icon.hand.point.down.outline:before { content: "\f0a7"; } i.icon.hand.point.left.outline:before { content: "\f0a5"; } i.icon.hand.point.right.outline:before { content: "\f0a4"; } i.icon.hand.point.up.outline:before { content: "\f0a6"; } i.icon.hand.pointer.outline:before { content: "\f25a"; } i.icon.hand.rock.outline:before { content: "\f255"; } i.icon.hand.scissors.outline:before { content: "\f257"; } i.icon.hand.spock.outline:before { content: "\f259"; } i.icon.handshake.outline:before { content: "\f2b5"; } i.icon.hdd.outline:before { content: "\f0a0"; } i.icon.heart.outline:before { content: "\f004"; } i.icon.hospital.outline:before { content: "\f0f8"; } i.icon.hourglass.outline:before { content: "\f254"; } i.icon.id.badge.outline:before { content: "\f2c1"; } i.icon.id.card.outline:before { content: "\f2c2"; } i.icon.image.outline:before { content: "\f03e"; } i.icon.images.outline:before { content: "\f302"; } i.icon.keyboard.outline:before { content: "\f11c"; } i.icon.lemon.outline:before { content: "\f094"; } i.icon.life.ring.outline:before { content: "\f1cd"; } i.icon.lightbulb.outline:before { content: "\f0eb"; } i.icon.list.alternate.outline:before { content: "\f022"; } i.icon.map.outline:before { content: "\f279"; } i.icon.meh.outline:before { content: "\f11a"; } i.icon.minus.square.outline:before { content: "\f146"; } i.icon.money.bill.alternate.outline:before { content: "\f3d1"; } i.icon.moon.outline:before { content: "\f186"; } i.icon.newspaper.outline:before { content: "\f1ea"; } i.icon.object.group.outline:before { content: "\f247"; } i.icon.object.ungroup.outline:before { content: "\f248"; } i.icon.paper.plane.outline:before { content: "\f1d8"; } i.icon.pause.circle.outline:before { content: "\f28b"; } i.icon.play.circle.outline:before { content: "\f144"; } i.icon.plus.square.outline:before { content: "\f0fe"; } i.icon.question.circle.outline:before { content: "\f059"; } i.icon.registered.outline:before { content: "\f25d"; } i.icon.save.outline:before { content: "\f0c7"; } i.icon.share.square.outline:before { content: "\f14d"; } i.icon.smile.outline:before { content: "\f118"; } i.icon.snowflake.outline:before { content: "\f2dc"; } i.icon.square.outline:before { content: "\f0c8"; } i.icon.star.outline:before { content: "\f005"; } i.icon.star.half.outline:before { content: "\f089"; } i.icon.sticky.note.outline:before { content: "\f249"; } i.icon.stop.circle.outline:before { content: "\f28d"; } i.icon.sun.outline:before { content: "\f185"; } i.icon.thumbs.down.outline:before { content: "\f165"; } i.icon.thumbs.up.outline:before { content: "\f164"; } i.icon.times.circle.outline:before { content: "\f057"; } i.icon.trash.alternate.outline:before { content: "\f2ed"; } i.icon.user.outline:before { content: "\f007"; } i.icon.user.circle.outline:before { content: "\f2bd"; } i.icon.window.close.outline:before { content: "\f410"; } i.icon.window.maximize.outline:before { content: "\f2d0"; } i.icon.window.minimize.outline:before { content: "\f2d1"; } i.icon.window.restore.outline:before { content: "\f2d2"; } /* Outline Aliases */ i.icon.disk.outline:before { content: "\f0a0"; } i.icon.heart.empty, i.icon.star.empty { font-family: 'outline-icons'; } i.icon.heart.empty:before { content: "\f004"; } i.icon.star.empty:before { content: "\f089"; } /******************************* Brand Icons *******************************/ /* Load & Define Brand Font */ @font-face { font-family: 'brand-icons'; src: url("/client/shared/themes/default/assets/fonts/brand-icons.eot"); src: url("/client/shared/themes/default/assets/fonts/brand-icons.eot?#iefix") format('embedded-opentype'), url("/client/shared/themes/default/assets/fonts/brand-icons.woff2") format('woff2'), url("/client/shared/themes/default/assets/fonts/brand-icons.woff") format('woff'), url("/client/shared/themes/default/assets/fonts/brand-icons.ttf") format('truetype'), url("/client/shared/themes/default/assets/fonts/brand-icons.svg#icons") format('svg'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } /* Brand Icon Font Family */ i.icon.\35 00px, i.icon.accessible.icon, i.icon.accusoft, i.icon.adn, i.icon.adversal, i.icon.affiliatetheme, i.icon.algolia, i.icon.amazon, i.icon.amazon.pay, i.icon.amilia, i.icon.android, i.icon.angellist, i.icon.angrycreative, i.icon.angular, i.icon.app.store, i.icon.app.store.ios, i.icon.apper, i.icon.apple, i.icon.apple.pay, i.icon.asymmetrik, i.icon.audible, i.icon.autoprefixer, i.icon.avianex, i.icon.aviato, i.icon.aws, i.icon.bandcamp, i.icon.behance, i.icon.behance.square, i.icon.bimobject, i.icon.bitbucket, i.icon.bitcoin, i.icon.bity, i.icon.black.tie, i.icon.blackberry, i.icon.blogger, i.icon.blogger.b, i.icon.bluetooth, i.icon.bluetooth.b, i.icon.btc, i.icon.buromobelexperte, i.icon.buysellads, i.icon.cc.amazon.pay, i.icon.cc.amex, i.icon.cc.apple.pay, i.icon.cc.diners.club, i.icon.cc.discover, i.icon.cc.jcb, i.icon.cc.mastercard, i.icon.cc.paypal, i.icon.cc.stripe, i.icon.cc.visa, i.icon.centercode, i.icon.chrome, i.icon.cloudscale, i.icon.cloudsmith, i.icon.cloudversify, i.icon.codepen, i.icon.codiepie, i.icon.connectdevelop, i.icon.contao, i.icon.cpanel, i.icon.creative.commons, i.icon.css3, i.icon.css3.alternate, i.icon.cuttlefish, i.icon.d.and.d, i.icon.dashcube, i.icon.delicious, i.icon.deploydog, i.icon.deskpro, i.icon.deviantart, i.icon.digg, i.icon.digital.ocean, i.icon.discord, i.icon.discourse, i.icon.dochub, i.icon.docker, i.icon.draft2digital, i.icon.dribbble, i.icon.dribbble.square, i.icon.dropbox, i.icon.drupal, i.icon.dyalog, i.icon.earlybirds, i.icon.edge, i.icon.elementor, i.icon.ember, i.icon.empire, i.icon.envira, i.icon.erlang, i.icon.ethereum, i.icon.etsy, i.icon.expeditedssl, i.icon.facebook, i.icon.facebook.f, i.icon.facebook.messenger, i.icon.facebook.square, i.icon.firefox, i.icon.first.order, i.icon.firstdraft, i.icon.flickr, i.icon.flipboard, i.icon.fly, i.icon.font.awesome, i.icon.font.awesome.alternate, i.icon.font.awesome.flag, i.icon.fonticons, i.icon.fonticons.fi, i.icon.fort.awesome, i.icon.fort.awesome.alternate, i.icon.forumbee, i.icon.foursquare, i.icon.free.code.camp, i.icon.freebsd, i.icon.get.pocket, i.icon.gg, i.icon.gg.circle, i.icon.git, i.icon.git.square, i.icon.github, i.icon.github.alternate, i.icon.github.square, i.icon.gitkraken, i.icon.gitlab, i.icon.gitter, i.icon.glide, i.icon.glide.g, i.icon.gofore, i.icon.goodreads, i.icon.goodreads.g, i.icon.google, i.icon.google.drive, i.icon.google.play, i.icon.google.plus, i.icon.google.plus.g, i.icon.google.plus.square, i.icon.google.wallet, i.icon.gratipay, i.icon.grav, i.icon.gripfire, i.icon.grunt, i.icon.gulp, i.icon.hacker.news, i.icon.hacker.news.square, i.icon.hips, i.icon.hire.a.helper, i.icon.hooli, i.icon.hotjar, i.icon.houzz, i.icon.html5, i.icon.hubspot, i.icon.imdb, i.icon.instagram, i.icon.internet.explorer, i.icon.ioxhost, i.icon.itunes, i.icon.itunes.note, i.icon.jenkins, i.icon.joget, i.icon.joomla, i.icon.js, i.icon.js.square, i.icon.jsfiddle, i.icon.keycdn, i.icon.kickstarter, i.icon.kickstarter.k, i.icon.korvue, i.icon.laravel, i.icon.lastfm, i.icon.lastfm.square, i.icon.leanpub, i.icon.less, i.icon.linechat, i.icon.linkedin, i.icon.linkedin.alternate, i.icon.linkedin.in, i.icon.linode, i.icon.linux, i.icon.lyft, i.icon.magento, i.icon.maxcdn, i.icon.medapps, i.icon.medium, i.icon.medium.m, i.icon.medrt, i.icon.meetup, i.icon.microsoft, i.icon.mix, i.icon.mixcloud, i.icon.mizuni, i.icon.modx, i.icon.monero, i.icon.napster, i.icon.nintendo.switch, i.icon.node, i.icon.node.js, i.icon.npm, i.icon.ns8, i.icon.nutritionix, i.icon.odnoklassniki, i.icon.odnoklassniki.square, i.icon.opencart, i.icon.openid, i.icon.opera, i.icon.optin.monster, i.icon.osi, i.icon.page4, i.icon.pagelines, i.icon.palfed, i.icon.patreon, i.icon.paypal, i.icon.periscope, i.icon.phabricator, i.icon.phoenix.framework, i.icon.php, i.icon.pied.piper, i.icon.pied.piper.alternate, i.icon.pied.piper.pp, i.icon.pinterest, i.icon.pinterest.p, i.icon.pinterest.square, i.icon.playstation, i.icon.product.hunt, i.icon.pushed, i.icon.python, i.icon.qq, i.icon.quinscape, i.icon.quora, i.icon.ravelry, i.icon.react, i.icon.rebel, i.icon.redriver, i.icon.reddit, i.icon.reddit.alien, i.icon.reddit.square, i.icon.rendact, i.icon.renren, i.icon.replyd, i.icon.resolving, i.icon.rocketchat, i.icon.rockrms, i.icon.safari, i.icon.sass, i.icon.schlix, i.icon.scribd, i.icon.searchengin, i.icon.sellcast, i.icon.sellsy, i.icon.servicestack, i.icon.shirtsinbulk, i.icon.simplybuilt, i.icon.sistrix, i.icon.skyatlas, i.icon.skype, i.icon.slack, i.icon.slack.hash, i.icon.slideshare, i.icon.snapchat, i.icon.snapchat.ghost, i.icon.snapchat.square, i.icon.soundcloud, i.icon.speakap, i.icon.spotify, i.icon.stack.exchange, i.icon.stack.overflow, i.icon.staylinked, i.icon.steam, i.icon.steam.square, i.icon.steam.symbol, i.icon.sticker.mule, i.icon.strava, i.icon.stripe, i.icon.stripe.s, i.icon.studiovinari, i.icon.stumbleupon, i.icon.stumbleupon.circle, i.icon.superpowers, i.icon.supple, i.icon.telegram, i.icon.telegram.plane, i.icon.tencent.weibo, i.icon.themeisle, i.icon.trello, i.icon.tripadvisor, i.icon.tumblr, i.icon.tumblr.square, i.icon.twitch, i.icon.twitter, i.icon.twitter.square, i.icon.typo3, i.icon.uber, i.icon.uikit, i.icon.uniregistry, i.icon.untappd, i.icon.usb, i.icon.ussunnah, i.icon.vaadin, i.icon.viacoin, i.icon.viadeo, i.icon.viadeo.square, i.icon.viber, i.icon.vimeo, i.icon.vimeo.square, i.icon.vimeo.v, i.icon.vine, i.icon.vk, i.icon.vnv, i.icon.vuejs, i.icon.wechat, i.icon.weibo, i.icon.weixin, i.icon.whatsapp, i.icon.whatsapp.square, i.icon.whmcs, i.icon.wikipedia.w, i.icon.windows, i.icon.wordpress, i.icon.wordpress.simple, i.icon.wpbeginner, i.icon.wpexplorer, i.icon.wpforms, i.icon.xbox, i.icon.xing, i.icon.xing.square, i.icon.y.combinator, i.icon.yahoo, i.icon.yandex, i.icon.yandex.international, i.icon.yelp, i.icon.yoast, i.icon.youtube, i.icon.youtube.square { font-family: 'brand-icons'; } /* Brand Icons Ideally Would Be Defined Here */ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Image * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Spaced */ /* Floated */ /* Size */ /* Packaged Theme */ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Spaced */ /* Floated */ /* Size */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Image *******************************/ .ui.image { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: transparent; } img.ui.image { display: block; } .ui.image svg, .ui.image img { display: block; max-width: 100%; height: auto; } /******************************* States *******************************/ .ui.hidden.images, .ui.hidden.image { display: none; } .ui.hidden.transition.images, .ui.hidden.transition.image { display: block; visibility: hidden; } .ui.images > .hidden.transition { display: inline-block; visibility: hidden; } .ui.disabled.images, .ui.disabled.image { cursor: default; opacity: 0.45; } /******************************* Variations *******************************/ /*-------------- Inline ---------------*/ .ui.inline.image, .ui.inline.image svg, .ui.inline.image img { display: inline-block; } /*------------------ Vertical Aligned -------------------*/ .ui.top.aligned.images .image, .ui.top.aligned.image, .ui.top.aligned.image svg, .ui.top.aligned.image img { display: inline-block; vertical-align: top; } .ui.middle.aligned.images .image, .ui.middle.aligned.image, .ui.middle.aligned.image svg, .ui.middle.aligned.image img { display: inline-block; vertical-align: middle; } .ui.bottom.aligned.images .image, .ui.bottom.aligned.image, .ui.bottom.aligned.image svg, .ui.bottom.aligned.image img { display: inline-block; vertical-align: bottom; } /*-------------- Rounded ---------------*/ .ui.rounded.images .image, .ui.rounded.image, .ui.rounded.images .image > *, .ui.rounded.image > * { border-radius: 0.3125em; } /*-------------- Bordered ---------------*/ .ui.bordered.images .image, .ui.bordered.images img, .ui.bordered.images svg, .ui.bordered.image img, .ui.bordered.image svg, img.ui.bordered.image { border: 1px solid rgba(0, 0, 0, 0.1); } /*-------------- Circular ---------------*/ .ui.circular.images, .ui.circular.image { overflow: hidden; } .ui.circular.images .image, .ui.circular.image, .ui.circular.images .image > *, .ui.circular.image > * { border-radius: 500rem; } /*-------------- Fluid ---------------*/ .ui.fluid.images, .ui.fluid.image, .ui.fluid.images img, .ui.fluid.images svg, .ui.fluid.image svg, .ui.fluid.image img { display: block; width: 100%; height: auto; } /*-------------- Avatar ---------------*/ .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.image { margin-right: 0.25em; display: inline-block; width: 2em; height: 2em; border-radius: 500rem; } /*------------------- Spaced --------------------*/ .ui.spaced.image { display: inline-block !important; margin-left: 0.5em; margin-right: 0.5em; } .ui[class*="left spaced"].image { margin-left: 0.5em; margin-right: 0em; } .ui[class*="right spaced"].image { margin-left: 0em; margin-right: 0.5em; } /*------------------- Floated --------------------*/ .ui.floated.image, .ui.floated.images { float: left; margin-right: 1em; margin-bottom: 1em; } .ui.right.floated.images, .ui.right.floated.image { float: right; margin-right: 0em; margin-bottom: 1em; margin-left: 1em; } .ui.floated.images:last-child, .ui.floated.image:last-child { margin-bottom: 0em; } .ui.centered.images, .ui.centered.image { margin-left: auto; margin-right: auto; } /*-------------- Sizes ---------------*/ .ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image { width: 35px; height: auto; font-size: 0.8125rem; } .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg, .ui.tiny.image { width: 80px; height: auto; font-size: 0.875rem; } .ui.small.images .image, .ui.small.images img, .ui.small.images svg, .ui.small.image { width: 150px; height: auto; font-size: 0.9375rem; } .ui.medium.images .image, .ui.medium.images img, .ui.medium.images svg, .ui.medium.image { width: 300px; height: auto; font-size: 1rem; } .ui.large.images .image, .ui.large.images img, .ui.large.images svg, .ui.large.image { width: 450px; height: auto; font-size: 1.125rem; } .ui.big.images .image, .ui.big.images img, .ui.big.images svg, .ui.big.image { width: 600px; height: auto; font-size: 1.3125rem; } .ui.huge.images .image, .ui.huge.images img, .ui.huge.images svg, .ui.huge.image { width: 800px; height: auto; font-size: 1.4375rem; } .ui.massive.images .image, .ui.massive.images img, .ui.massive.images svg, .ui.massive.image { width: 960px; height: auto; font-size: 1.6875rem; } /******************************* Groups *******************************/ .ui.images { font-size: 0em; margin: 0em -0.25rem 0rem; } .ui.images .image, .ui.images > img, .ui.images > svg { display: inline-block; margin: 0em 0.25rem 0.5rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Input * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Input *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /*------------------- States --------------------*/ /* Placeholder */ /* Down */ /* Focus */ /* Error */ /* Loader */ /*------------------- Variations --------------------*/ /* Inverted */ /* Packaged Theme */ /******************************* Input *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /*------------------- States --------------------*/ /* Placeholder */ /* Down */ /* Focus */ /* Error */ /* Loader */ /*------------------- Variations --------------------*/ /* Inverted */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input { position: relative; font-weight: normal; font-style: normal; display: inline-flex; color: #4A3041; } .ui.input > input { margin: 0em; max-width: 100%; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; padding: 0.58035714em 0.875em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #4A3041; border-radius: 0.25rem; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.input > input::-webkit-input-placeholder { color: #ad809d; } .ui.input > input::-moz-placeholder { color: #ad809d; } .ui.input > input:-ms-input-placeholder { color: #ad809d; } /******************************* States *******************************/ /*-------------------- Disabled ---------------------*/ .ui.disabled.input, .ui.input:not(.disabled) input[disabled] { opacity: 0.95; } .ui.disabled.input > input, .ui.input:not(.disabled) input[disabled] { pointer-events: none; } /*-------------------- Active ---------------------*/ .ui.input > input:active, .ui.input.down input { border-color: rgba(0, 0, 0, 0.3); background: #FAFAFA; color: #4A3041; box-shadow: none; } /*-------------------- Loading ---------------------*/ .ui.loading.loading.input > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.loading.input > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /*-------------------- Focus ---------------------*/ .ui.input.focus > input, .ui.input > input:focus { border-color: #85B7D9; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); box-shadow: none; } .ui.input.focus > input::-webkit-input-placeholder, .ui.input > input:focus::-webkit-input-placeholder { color: #d5becd; } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { color: #d5becd; } .ui.input.focus > input:-ms-input-placeholder, .ui.input > input:focus:-ms-input-placeholder { color: #d5becd; } /*-------------------- Error ---------------------*/ .ui.input.error > input { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; box-shadow: none; } /* Error Placeholder */ .ui.input.error > input::-webkit-input-placeholder { color: #e7bdbc; } .ui.input.error > input::-moz-placeholder { color: #e7bdbc; } .ui.input.error > input:-ms-input-placeholder { color: #e7bdbc !important; } /* Focused Error Placeholder */ .ui.input.error > input:focus::-webkit-input-placeholder { color: #da9796; } .ui.input.error > input:focus::-moz-placeholder { color: #da9796; } .ui.input.error > input:focus:-ms-input-placeholder { color: #da9796 !important; } /******************************* Variations *******************************/ /*-------------------- Transparent ---------------------*/ .ui.transparent.input > input { border-color: transparent !important; background-color: transparent !important; padding: 0em !important; box-shadow: none !important; border-radius: 0px !important; } /* Transparent Icon */ .ui.transparent.icon.input > i.icon { width: 1.1em; } .ui.transparent.icon.input > input { padding-left: 0em !important; padding-right: 2em !important; } .ui.transparent[class*="left icon"].input > input { padding-left: 2em !important; padding-right: 0em !important; } /* Transparent Inverted */ .ui.transparent.inverted.input { color: #FFFFFF; } .ui.transparent.inverted.input > input { color: inherit; } .ui.transparent.inverted.input > input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input > input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input > input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } /*-------------------- Icon ---------------------*/ .ui.icon.input > i.icon { cursor: default; position: absolute; line-height: 1; text-align: center; top: 0px; right: 0px; margin: 0em; height: 100%; width: 2.475em; opacity: 0.5; border-radius: 0em 0.25rem 0.25rem 0em; transition: opacity 0.3s ease; } .ui.icon.input > i.icon:not(.link) { pointer-events: none; } .ui.icon.input > input { padding-right: 2.475em !important; } .ui.icon.input > i.icon:before, .ui.icon.input > i.icon:after { left: 0; position: absolute; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .ui.icon.input > i.link.icon { cursor: pointer; } .ui.icon.input > i.circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > i.icon { right: auto; left: 1px; border-radius: 0.25rem 0em 0em 0.25rem; } .ui[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui[class*="left icon"].input > input { padding-left: 2.475em !important; padding-right: 0.875em !important; } /* Focus */ .ui.icon.input > input:focus ~ i.icon { opacity: 1; } /*-------------------- Labeled ---------------------*/ /* Adjacent Label */ .ui.labeled.input > .label { flex: 0 0 auto; margin: 0; font-size: 1em; } .ui.labeled.input > .label:not(.corner) { padding-top: 0.6875em; padding-bottom: 0.6875em; } /* Regular Label on Left */ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left-color: transparent; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { border-left-color: #85B7D9; } /* Regular Label on Right */ .ui[class*="right labeled"].input > input { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-right-color: transparent !important; } .ui[class*="right labeled"].input > input + .label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ui[class*="right labeled"].input > input:focus { border-right-color: #85B7D9 !important; } /* Corner Label */ .ui.labeled.input .corner.label { top: 1px; right: 1px; font-size: 0.5625em; border-radius: 0em 0.25rem 0em 0em; } /* Spacing with corner label */ .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { padding-right: 2.5em !important; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { padding-right: 3.25em !important; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { margin-right: 1.25em; } /* Left Labeled */ .ui[class*="left corner labeled"].labeled.input > input { padding-left: 2.5em !important; } .ui[class*="left corner labeled"].icon.input > input { padding-left: 3.25em !important; } .ui[class*="left corner labeled"].icon.input > .icon { margin-left: 1.25em; } /* Corner Label Position */ .ui.input > .ui.corner.label { top: 1px; right: 1px; } .ui.input > .ui.left.corner.label { right: auto; left: 1px; } /*-------------------- Action ---------------------*/ .ui.action.input > .button, .ui.action.input > .buttons { display: flex; align-items: center; flex: 0 0 auto; } .ui.action.input > .button, .ui.action.input > .buttons > .button { padding-top: 0.6875em; padding-bottom: 0.6875em; margin: 0; } /* Button on Right */ .ui.action.input:not([class*="left action"]) > input { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-right-color: transparent !important; } .ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), .ui.action.input:not([class*="left action"]) > .button:not(:first-child), .ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { border-radius: 0px; } .ui.action.input:not([class*="left action"]) > .dropdown:last-child, .ui.action.input:not([class*="left action"]) > .button:last-child, .ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { border-radius: 0px 0.25rem 0.25rem 0px; } /* Input Focus */ .ui.action.input:not([class*="left action"]) > input:focus { border-right-color: #85B7D9 !important; } /* Button on Left */ .ui[class*="left action"].input > input { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; border-left-color: transparent !important; } .ui[class*="left action"].input > .dropdown, .ui[class*="left action"].input > .button, .ui[class*="left action"].input > .buttons > .button { border-radius: 0px; } .ui[class*="left action"].input > .dropdown:first-child, .ui[class*="left action"].input > .button:first-child, .ui[class*="left action"].input > .buttons:first-child > .button { border-radius: 0.25rem 0px 0px 0.25rem; } /* Input Focus */ .ui[class*="left action"].input > input:focus { border-left-color: #85B7D9 !important; } /*-------------------- Inverted ---------------------*/ /* Standard */ .ui.inverted.input > input { border: none; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input { display: flex; } .ui.fluid.input > input { width: 0px !important; } /*-------------------- Size ---------------------*/ .ui.mini.input { font-size: 0.8125em; } .ui.small.input { font-size: 0.9375em; } .ui.input { font-size: 1em; } .ui.large.input { font-size: 1.125em; } .ui.big.input { font-size: 1.3125em; } .ui.huge.input { font-size: 1.4375em; } .ui.massive.input { font-size: 1.6875em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ .ui.input input[type=number]::-webkit-inner-spin-button, .ui.input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /*! * # Semantic UI - Label * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Label *******************************/ /*------------------- Element --------------------*/ /* medium is not @emSize custom value required */ /* Group */ /*------------------- Parts --------------------*/ /* Link */ /* Icon */ /* Image */ /* Detail */ /* Delete */ /*------------------- Types --------------------*/ /* Image Label */ /*------------------- States --------------------*/ /* Hover */ /* Active */ /* Active Hover */ /*------------------- Variations --------------------*/ /* Basic */ /* Tag */ /* Avoids error with background: inherit; on animation */ /* Ribbon */ /* Rounding Offset on Triangle */ /* Rounding Offset on Triangle */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Basic Pointing */ /* Floating */ /*------------------- Group --------------------*/ /* Sizing */ /* Packaged Theme */ /******************************* Label *******************************/ /*------------------- Element --------------------*/ /* medium is not @emSize custom value required */ /* Group */ /*------------------- Parts --------------------*/ /* Link */ /* Icon */ /* Image */ /* Detail */ /* Delete */ /*------------------- Types --------------------*/ /* Image Label */ /*------------------- States --------------------*/ /* Hover */ /* Active */ /* Active Hover */ /*------------------- Variations --------------------*/ /* Basic */ /* Tag */ /* Avoids error with background: inherit; on animation */ /* Ribbon */ /* Rounding Offset on Triangle */ /* Rounding Offset on Triangle */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Basic Pointing */ /* Floating */ /*------------------- Group --------------------*/ /* Sizing */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Label *******************************/ .ui.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0em 0.125em; background-color: #E8E8E8; background-image: none; padding: 0.5833em 0.833em; color: #4A3041; text-transform: none; font-weight: bold; border: 0px solid transparent; border-radius: 0.25rem; transition: background 0.1s ease; } .ui.label:first-child { margin-left: 0em; } .ui.label:last-child { margin-right: 0em; } /* Link */ a.ui.label { cursor: pointer; } /* Inside Link */ .ui.label > a { cursor: pointer; color: inherit; opacity: 0.5; transition: 0.1s opacity ease; } .ui.label > a:hover { opacity: 1; } /* Image */ .ui.label > img { width: auto !important; vertical-align: middle; height: 2.1666em !important; } /* Icon */ .ui.label > .icon { width: auto; margin: 0em 0.75em 0em 0em; } /* Detail */ .ui.label > .detail { display: inline-block; vertical-align: top; font-weight: bold; margin-left: 1em; opacity: 0.8; } .ui.label > .detail .icon { margin: 0em 0.25em 0em 0em; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon { cursor: pointer; margin-right: 0em; margin-left: 0.5em; font-size: 0.9375em; opacity: 0.5; transition: background 0.1s ease; } .ui.label > .delete.icon:hover { opacity: 1; } /*------------------- Group --------------------*/ .ui.labels > .label { margin: 0em 0.5em 0.5em 0em; } /*------------------- Coupling --------------------*/ .ui.header > .ui.label { margin-top: -0.29165em; } /* Remove border radius on attached segment */ .ui.attached.segment > .ui.top.left.attached.label, .ui.bottom.attached.segment > .ui.top.left.attached.label { border-top-left-radius: 0; } .ui.attached.segment > .ui.top.right.attached.label, .ui.bottom.attached.segment > .ui.top.right.attached.label { border-top-right-radius: 0; } .ui.top.attached.segment > .ui.bottom.left.attached.label { border-bottom-left-radius: 0; } .ui.top.attached.segment > .ui.bottom.right.attached.label { border-bottom-right-radius: 0; } /* Padding on next content after a label */ .ui.top.attached.label:first-child + :not(.attached), .ui.top.attached.label + [class*="right floated"] + * { margin-top: 2rem !important; } .ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { margin-top: 0em; margin-bottom: 2rem !important; } /******************************* Types *******************************/ .ui.image.label { width: auto !important; margin-top: 0em; margin-bottom: 0em; max-width: 9999px; vertical-align: baseline; text-transform: none; background: #E8E8E8; padding: 0.5833em 0.833em 0.5833em 0.5em; border-radius: 0.25rem; box-shadow: none; } .ui.image.label img { display: inline-block; vertical-align: top; height: 2.1666em; margin: -0.5833em 0.5em -0.5833em -0.5em; border-radius: 0.25rem 0em 0em 0.25rem; } .ui.image.label .detail { background: rgba(0, 0, 0, 0.1); margin: -0.5833em -0.833em -0.5833em 0.5em; padding: 0.5833em 0.833em; border-radius: 0em 0.25rem 0.25rem 0em; } /*------------------- Tag --------------------*/ .ui.tag.labels .label, .ui.tag.label { margin-left: 1em; position: relative; padding-left: 1.5em; padding-right: 1.5em; border-radius: 0em 0.25rem 0.25rem 0em; transition: none; } .ui.tag.labels .label:before, .ui.tag.label:before { position: absolute; transform: translateY(-50%) translateX(50%) rotate(-45deg); top: 50%; right: 100%; content: ''; background-color: inherit; background-image: none; width: 1.56em; height: 1.56em; transition: none; } .ui.tag.labels .label:after, .ui.tag.label:after { position: absolute; content: ''; top: 50%; left: -0.25em; margin-top: -0.25em; background-color: #FFFFFF !important; width: 0.5em; height: 0.5em; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); border-radius: 500rem; } /*------------------- Corner Label --------------------*/ .ui.corner.label { position: absolute; top: 0em; right: 0em; margin: 0em; padding: 0em; text-align: center; border-color: #E8E8E8; width: 4em; height: 4em; z-index: 1; transition: border-color 0.1s ease; } /* Icon Label */ .ui.corner.label { background-color: transparent !important; } .ui.corner.label:after { position: absolute; content: ""; right: 0em; top: 0em; z-index: -1; width: 0em; height: 0em; background-color: transparent !important; border-top: 0em solid transparent; border-right: 4em solid transparent; border-bottom: 4em solid transparent; border-left: 0em solid transparent; border-right-color: inherit; transition: border-color 0.1s ease; } .ui.corner.label .icon { cursor: default; position: relative; top: 0.5625em; left: 0.6875em; font-size: 1.125em; margin: 0em; } /* Left Corner */ .ui.left.corner.label, .ui.left.corner.label:after { right: auto; left: 0em; } .ui.left.corner.label:after { border-top: 4em solid transparent; border-right: 4em solid transparent; border-bottom: 0em solid transparent; border-left: 0em solid transparent; border-top-color: inherit; } .ui.left.corner.label .icon { left: -0.6875em; } /* Segment */ .ui.segment > .ui.corner.label { top: -1px; right: -1px; } .ui.segment > .ui.left.corner.label { right: auto; left: -1px; } /*------------------- Ribbon --------------------*/ .ui.ribbon.label { position: relative; margin: 0em; min-width: max-content; border-radius: 0em 0.25rem 0.25rem 0em; border-color: rgba(0, 0, 0, 0.15); } .ui.ribbon.label:after { position: absolute; content: ''; top: 100%; left: 0%; background-color: transparent !important; border-style: solid; border-width: 0em 1.2em 1.2em 0em; border-color: transparent; border-right-color: inherit; width: 0em; height: 0em; } /* Positioning */ .ui.ribbon.label { left: calc(-1rem - 1.2em); margin-right: -1.2em; padding-left: calc(1rem + 1.2em); padding-right: 1.2em; } .ui[class*="right ribbon"].label { left: calc(100% + 1rem + 1.2em); padding-left: 1.2em; padding-right: calc(1rem + 1.2em); } /* Right Ribbon */ .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: 0.25rem 0em 0em 0.25rem; } .ui[class*="right ribbon"].label:after { left: auto; right: 0%; border-style: solid; border-width: 1.2em 1.2em 0em 0em; border-color: transparent; border-top-color: inherit; } /* Inside Table */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { position: absolute; top: 1rem; } .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label { left: calc(--0.05rem - 1.2em); } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label { left: calc(100% + -0.05rem + 1.2em); padding-left: 0.833em; } /* Inside Table */ .ui.table td > .ui.ribbon.label { left: calc(-0.8125em - 1.2em); } .ui.table td > .ui[class*="right ribbon"].label { left: calc(100% + 0.8125em + 1.2em); padding-left: 0.833em; } /*------------------- Attached --------------------*/ .ui[class*="top attached"].label, .ui.attached.label { width: 100%; position: absolute; margin: 0em; top: 0em; left: 0em; padding: 0.75em 1em; border-radius: 0.1875rem 0.1875rem 0em 0em; } .ui[class*="bottom attached"].label { top: auto; bottom: 0em; border-radius: 0em 0em 0.1875rem 0.1875rem; } .ui[class*="top left attached"].label { width: auto; margin-top: 0em !important; border-radius: 0.1875rem 0em 0.25rem 0em; } .ui[class*="top right attached"].label { width: auto; left: auto; right: 0em; border-radius: 0em 0.1875rem 0em 0.25rem; } .ui[class*="bottom left attached"].label { width: auto; top: auto; bottom: 0em; border-radius: 0em 0.25rem 0em 0.1875rem; } .ui[class*="bottom right attached"].label { top: auto; bottom: 0em; left: auto; right: 0em; width: auto; border-radius: 0.25rem 0em 0.1875rem 0em; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ .ui.label.disabled { opacity: 0.5; } /*------------------- Hover --------------------*/ a.ui.labels .label:hover, a.ui.label:hover { background-color: #E0E0E0; border-color: #E0E0E0; background-image: none; color: rgba(0, 0, 0, 0.8); } .ui.labels a.label:hover:before, a.ui.label:hover:before { color: rgba(0, 0, 0, 0.8); } /*------------------- Active --------------------*/ .ui.active.label { background-color: #D0D0D0; border-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.label:before { background-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Active Hover --------------------*/ a.ui.labels .active.label:hover, a.ui.active.label:hover { background-color: #C8C8C8; border-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.labels a.active.label:ActiveHover:before, a.ui.active.label:ActiveHover:before { background-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Visible --------------------*/ .ui.labels.visible .label, .ui.label.visible:not(.dropdown) { display: inline-block !important; } /*------------------- Hidden --------------------*/ .ui.labels.hidden .label, .ui.label.hidden { display: none !important; } /******************************* Variations *******************************/ /*------------------- Colors --------------------*/ /*--- Red ---*/ .ui.red.labels .label, .ui.red.label { background-color: #DB2828 !important; border-color: #DB2828 !important; color: #FFFFFF !important; } /* Link */ .ui.red.labels .label:hover, a.ui.red.label:hover { background-color: #d01919 !important; border-color: #d01919 !important; color: #FFFFFF !important; } /* Corner */ .ui.red.corner.label, .ui.red.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.red.ribbon.label { border-color: #b21e1e !important; } /* Basic */ .ui.basic.red.label { background: none #FFFFFF !important; color: #DB2828 !important; border-color: #DB2828 !important; } .ui.basic.red.labels a.label:hover, a.ui.basic.red.label:hover { background-color: #FFFFFF !important; color: #d01919 !important; border-color: #d01919 !important; } /*--- Orange ---*/ .ui.orange.labels .label, .ui.orange.label { background-color: #F2711C !important; border-color: #F2711C !important; color: #FFFFFF !important; } /* Link */ .ui.orange.labels .label:hover, a.ui.orange.label:hover { background-color: #f26202 !important; border-color: #f26202 !important; color: #FFFFFF !important; } /* Corner */ .ui.orange.corner.label, .ui.orange.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.orange.ribbon.label { border-color: #cf590c !important; } /* Basic */ .ui.basic.orange.label { background: none #FFFFFF !important; color: #F2711C !important; border-color: #F2711C !important; } .ui.basic.orange.labels a.label:hover, a.ui.basic.orange.label:hover { background-color: #FFFFFF !important; color: #f26202 !important; border-color: #f26202 !important; } /*--- Yellow ---*/ .ui.yellow.labels .label, .ui.yellow.label { background-color: #FBBD08 !important; border-color: #FBBD08 !important; color: #FFFFFF !important; } /* Link */ .ui.yellow.labels .label:hover, a.ui.yellow.label:hover { background-color: #eaae00 !important; border-color: #eaae00 !important; color: #FFFFFF !important; } /* Corner */ .ui.yellow.corner.label, .ui.yellow.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.yellow.ribbon.label { border-color: #cd9903 !important; } /* Basic */ .ui.basic.yellow.label { background: none #FFFFFF !important; color: #FBBD08 !important; border-color: #FBBD08 !important; } .ui.basic.yellow.labels a.label:hover, a.ui.basic.yellow.label:hover { background-color: #FFFFFF !important; color: #eaae00 !important; border-color: #eaae00 !important; } /*--- Olive ---*/ .ui.olive.labels .label, .ui.olive.label { background-color: #B5CC18 !important; border-color: #B5CC18 !important; color: #FFFFFF !important; } /* Link */ .ui.olive.labels .label:hover, a.ui.olive.label:hover { background-color: #a7bd0d !important; border-color: #a7bd0d !important; color: #FFFFFF !important; } /* Corner */ .ui.olive.corner.label, .ui.olive.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.olive.ribbon.label { border-color: #198f35 !important; } /* Basic */ .ui.basic.olive.label { background: none #FFFFFF !important; color: #B5CC18 !important; border-color: #B5CC18 !important; } .ui.basic.olive.labels a.label:hover, a.ui.basic.olive.label:hover { background-color: #FFFFFF !important; color: #a7bd0d !important; border-color: #a7bd0d !important; } /*--- Green ---*/ .ui.green.labels .label, .ui.green.label { background-color: #21BA45 !important; border-color: #21BA45 !important; color: #FFFFFF !important; } /* Link */ .ui.green.labels .label:hover, a.ui.green.label:hover { background-color: #16ab39 !important; border-color: #16ab39 !important; color: #FFFFFF !important; } /* Corner */ .ui.green.corner.label, .ui.green.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.green.ribbon.label { border-color: #198f35 !important; } /* Basic */ .ui.basic.green.label { background: none #FFFFFF !important; color: #21BA45 !important; border-color: #21BA45 !important; } .ui.basic.green.labels a.label:hover, a.ui.basic.green.label:hover { background-color: #FFFFFF !important; color: #16ab39 !important; border-color: #16ab39 !important; } /*--- Teal ---*/ .ui.teal.labels .label, .ui.teal.label { background-color: #00B5AD !important; border-color: #00B5AD !important; color: #FFFFFF !important; } /* Link */ .ui.teal.labels .label:hover, a.ui.teal.label:hover { background-color: #009c95 !important; border-color: #009c95 !important; color: #FFFFFF !important; } /* Corner */ .ui.teal.corner.label, .ui.teal.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.teal.ribbon.label { border-color: #00827c !important; } /* Basic */ .ui.basic.teal.label { background: none #FFFFFF !important; color: #00B5AD !important; border-color: #00B5AD !important; } .ui.basic.teal.labels a.label:hover, a.ui.basic.teal.label:hover { background-color: #FFFFFF !important; color: #009c95 !important; border-color: #009c95 !important; } /*--- Blue ---*/ .ui.blue.labels .label, .ui.blue.label { background-color: #2185D0 !important; border-color: #2185D0 !important; color: #FFFFFF !important; } /* Link */ .ui.blue.labels .label:hover, a.ui.blue.label:hover { background-color: #1678c2 !important; border-color: #1678c2 !important; color: #FFFFFF !important; } /* Corner */ .ui.blue.corner.label, .ui.blue.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.blue.ribbon.label { border-color: #1a69a4 !important; } /* Basic */ .ui.basic.blue.label { background: none #FFFFFF !important; color: #2185D0 !important; border-color: #2185D0 !important; } .ui.basic.blue.labels a.label:hover, a.ui.basic.blue.label:hover { background-color: #FFFFFF !important; color: #1678c2 !important; border-color: #1678c2 !important; } /*--- Violet ---*/ .ui.violet.labels .label, .ui.violet.label { background-color: #6435C9 !important; border-color: #6435C9 !important; color: #FFFFFF !important; } /* Link */ .ui.violet.labels .label:hover, a.ui.violet.label:hover { background-color: #5829bb !important; border-color: #5829bb !important; color: #FFFFFF !important; } /* Corner */ .ui.violet.corner.label, .ui.violet.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.violet.ribbon.label { border-color: #502aa1 !important; } /* Basic */ .ui.basic.violet.label { background: none #FFFFFF !important; color: #6435C9 !important; border-color: #6435C9 !important; } .ui.basic.violet.labels a.label:hover, a.ui.basic.violet.label:hover { background-color: #FFFFFF !important; color: #5829bb !important; border-color: #5829bb !important; } /*--- Purple ---*/ .ui.purple.labels .label, .ui.purple.label { background-color: #A333C8 !important; border-color: #A333C8 !important; color: #FFFFFF !important; } /* Link */ .ui.purple.labels .label:hover, a.ui.purple.label:hover { background-color: #9627ba !important; border-color: #9627ba !important; color: #FFFFFF !important; } /* Corner */ .ui.purple.corner.label, .ui.purple.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.purple.ribbon.label { border-color: #82299f !important; } /* Basic */ .ui.basic.purple.label { background: none #FFFFFF !important; color: #A333C8 !important; border-color: #A333C8 !important; } .ui.basic.purple.labels a.label:hover, a.ui.basic.purple.label:hover { background-color: #FFFFFF !important; color: #9627ba !important; border-color: #9627ba !important; } /*--- Pink ---*/ .ui.pink.labels .label, .ui.pink.label { background-color: #E03997 !important; border-color: #E03997 !important; color: #FFFFFF !important; } /* Link */ .ui.pink.labels .label:hover, a.ui.pink.label:hover { background-color: #e61a8d !important; border-color: #e61a8d !important; color: #FFFFFF !important; } /* Corner */ .ui.pink.corner.label, .ui.pink.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.pink.ribbon.label { border-color: #c71f7e !important; } /* Basic */ .ui.basic.pink.label { background: none #FFFFFF !important; color: #E03997 !important; border-color: #E03997 !important; } .ui.basic.pink.labels a.label:hover, a.ui.basic.pink.label:hover { background-color: #FFFFFF !important; color: #e61a8d !important; border-color: #e61a8d !important; } /*--- Brown ---*/ .ui.brown.labels .label, .ui.brown.label { background-color: #A5673F !important; border-color: #A5673F !important; color: #FFFFFF !important; } /* Link */ .ui.brown.labels .label:hover, a.ui.brown.label:hover { background-color: #975b33 !important; border-color: #975b33 !important; color: #FFFFFF !important; } /* Corner */ .ui.brown.corner.label, .ui.brown.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.brown.ribbon.label { border-color: #805031 !important; } /* Basic */ .ui.basic.brown.label { background: none #FFFFFF !important; color: #A5673F !important; border-color: #A5673F !important; } .ui.basic.brown.labels a.label:hover, a.ui.basic.brown.label:hover { background-color: #FFFFFF !important; color: #975b33 !important; border-color: #975b33 !important; } /*--- Grey ---*/ .ui.grey.labels .label, .ui.grey.label { background-color: #767676 !important; border-color: #767676 !important; color: #FFFFFF !important; } /* Link */ .ui.grey.labels .label:hover, a.ui.grey.label:hover { background-color: #838383 !important; border-color: #838383 !important; color: #FFFFFF !important; } /* Corner */ .ui.grey.corner.label, .ui.grey.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.grey.ribbon.label { border-color: #805031 !important; } /* Basic */ .ui.basic.grey.label { background: none #FFFFFF !important; color: #767676 !important; border-color: #767676 !important; } .ui.basic.grey.labels a.label:hover, a.ui.basic.grey.label:hover { background-color: #FFFFFF !important; color: #838383 !important; border-color: #838383 !important; } /*--- Black ---*/ .ui.black.labels .label, .ui.black.label { background-color: #1B1C1D !important; border-color: #1B1C1D !important; color: #FFFFFF !important; } /* Link */ .ui.black.labels .label:hover, a.ui.black.label:hover { background-color: #27292a !important; border-color: #27292a !important; color: #FFFFFF !important; } /* Corner */ .ui.black.corner.label, .ui.black.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.black.ribbon.label { border-color: #805031 !important; } /* Basic */ .ui.basic.black.label { background: none #FFFFFF !important; color: #1B1C1D !important; border-color: #1B1C1D !important; } .ui.basic.black.labels a.label:hover, a.ui.basic.black.label:hover { background-color: #FFFFFF !important; color: #27292a !important; border-color: #27292a !important; } /*------------------- Basic --------------------*/ .ui.basic.label { background: none #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #4A3041; box-shadow: none; } /* Link */ a.ui.basic.label:hover { -webkit-text-decoration: none; text-decoration: none; background: none #FFFFFF; color: #2f701b; box-shadow: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } /* Pointing */ .ui.basic.pointing.label:before { border-color: inherit; } /*------------------- Fluid --------------------*/ .ui.label.fluid, .ui.fluid.labels > .label { width: 100%; box-sizing: border-box; } /*------------------- Inverted --------------------*/ .ui.inverted.labels .label, .ui.inverted.label { color: rgba(255, 255, 255, 0.9) !important; } /*------------------- Horizontal --------------------*/ .ui.horizontal.labels .label, .ui.horizontal.label { margin: 0em 0.5em 0em 0em; padding: 0.4em 0.833em; min-width: 3em; text-align: center; } /*------------------- Circular --------------------*/ .ui.circular.labels .label, .ui.circular.label { min-width: 2em; min-height: 2em; padding: 0.5em !important; line-height: 1em; text-align: center; border-radius: 500rem; } .ui.empty.circular.labels .label, .ui.empty.circular.label { min-width: 0em; min-height: 0em; overflow: hidden; width: 0.5em; height: 0.5em; vertical-align: baseline; } /*------------------- Pointing --------------------*/ .ui.pointing.label { position: relative; } .ui.attached.pointing.label { position: absolute; } .ui.pointing.label:before { background-color: inherit; background-image: inherit; border-width: none; border-style: solid; border-color: inherit; } /* Arrow */ .ui.pointing.label:before { position: absolute; content: ''; transform: rotate(45deg); background-image: none; z-index: 2; width: 0.6666em; height: 0.6666em; transition: background 0.1s ease; } /*--- Above ---*/ .ui.pointing.label, .ui[class*="pointing above"].label { margin-top: 1em; } .ui.pointing.label:before, .ui[class*="pointing above"].label:before { border-width: 1px 0px 0px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0%; left: 50%; } /*--- Below ---*/ .ui[class*="bottom pointing"].label, .ui[class*="pointing below"].label { margin-top: 0em; margin-bottom: 1em; } .ui[class*="bottom pointing"].label:before, .ui[class*="pointing below"].label:before { border-width: 0px 1px 1px 0px; top: auto; right: auto; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 100%; left: 50%; } /*--- Left ---*/ .ui[class*="left pointing"].label { margin-top: 0em; margin-left: 0.6666em; } .ui[class*="left pointing"].label:before { border-width: 0px 0px 1px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; left: 0em; } /*--- Right ---*/ .ui[class*="right pointing"].label { margin-top: 0em; margin-right: 0.6666em; } .ui[class*="right pointing"].label:before { border-width: 1px 1px 0px 0px; transform: translateX(50%) translateY(-50%) rotate(45deg); top: 50%; right: 0%; bottom: auto; left: auto; } /* Basic Pointing */ /*--- Above ---*/ .ui.basic.pointing.label:before, .ui.basic[class*="pointing above"].label:before { margin-top: -1px; } /*--- Below ---*/ .ui.basic[class*="bottom pointing"].label:before, .ui.basic[class*="pointing below"].label:before { bottom: auto; top: 100%; margin-top: 1px; } /*--- Left ---*/ .ui.basic[class*="left pointing"].label:before { top: 50%; left: -1px; } /*--- Right ---*/ .ui.basic[class*="right pointing"].label:before { top: 50%; right: -1px; } /*------------------ Floating Label -------------------*/ .ui.floating.label { position: absolute; z-index: 100; top: -1em; left: 100%; margin: 0em 0em 0em -1.5em !important; } /*------------------- Sizes --------------------*/ .ui.mini.labels .label, .ui.mini.label { font-size: 0.5625rem; } .ui.tiny.labels .label, .ui.tiny.label { font-size: 0.625rem; } .ui.small.labels .label, .ui.small.label { font-size: 0.6875rem; } .ui.labels .label, .ui.label { font-size: 0.75rem; } .ui.large.labels .label, .ui.large.label { font-size: 1rem; } .ui.big.labels .label, .ui.big.label { font-size: 1.3125rem; } .ui.huge.labels .label, .ui.huge.label { font-size: 1.4375rem; } .ui.massive.labels .label, .ui.massive.label { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - List * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* List *******************************/ /*------------------- View --------------------*/ /* List */ /* List Item */ /* Sub List */ /* Sub List Item */ /*------------------- Elements --------------------*/ /* Icon */ /* Image */ /* Content */ /* Header */ /* Description */ /* Link */ /* Header Link */ /* Linked Icon */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Float */ /* Horizontal */ /* Inverted */ /* Link List */ /* Inverted Link List */ /* Selection List */ /* Selection List States */ /* Inverted Selection List */ /* Animated List */ /* Bulleted */ /* Horizontal Bullets */ /* Ordered List */ /* Horizontal Ordered */ /* Divided */ /* Divided Horizontal */ /* Divided */ /* Divided Horizontal */ /* Relaxed */ /* Very Relaxed */ /* Packaged Theme */ /******************************* List *******************************/ /*------------------- View --------------------*/ /* List */ /* List Item */ /* Sub List */ /* Sub List Item */ /*------------------- Elements --------------------*/ /* Icon */ /* Image */ /* Content */ /* Header */ /* Description */ /* Link */ /* Header Link */ /* Linked Icon */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Float */ /* Horizontal */ /* Inverted */ /* Link List */ /* Inverted Link List */ /* Selection List */ /* Selection List States */ /* Inverted Selection List */ /* Animated List */ /* Bulleted */ /* Horizontal Bullets */ /* Ordered List */ /* Horizontal Ordered */ /* Divided */ /* Divided Horizontal */ /* Divided */ /* Divided Horizontal */ /* Relaxed */ /* Very Relaxed */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* List *******************************/ ul.ui.list, ol.ui.list, .ui.list { list-style-type: none; margin: 1em 0em; padding: 0em 0em; } ul.ui.list:first-child, ol.ui.list:first-child, .ui.list:first-child { margin-top: 0em; padding-top: 0em; } ul.ui.list:last-child, ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0em; padding-bottom: 0em; } /******************************* Content *******************************/ /* List Item */ ul.ui.list li, ol.ui.list li, .ui.list > .item, .ui.list .list > .item { display: list-item; table-layout: fixed; list-style-type: none; list-style-position: outside; padding: 0.1875em 0em; line-height: 1.125em; } ul.ui.list > li:first-child:after, ol.ui.list > li:first-child:after, .ui.list > .list > .item, .ui.list > .item:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } ul.ui.list li:first-child, ol.ui.list li:first-child, .ui.list .list > .item:first-child, .ui.list > .item:first-child { padding-top: 0em; } ul.ui.list li:last-child, ol.ui.list li:last-child, .ui.list .list > .item:last-child, .ui.list > .item:last-child { padding-bottom: 0em; } /* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list { clear: both; margin: 0em; padding: 0.75em 0em 0.25em 0.5em; } /* Child Item */ ul.ui.list ul li, ol.ui.list ol li, .ui.list .list > .item { padding: 0.125em 0em; line-height: inherit; } /* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon { display: table-cell; margin: 0em; padding-top: 0em; padding-right: 0.25em; vertical-align: top; transition: color 0.1s ease; } .ui.list .list > .item > i.icon:only-child, .ui.list > .item > i.icon:only-child { display: inline-block; vertical-align: top; } /* Image */ .ui.list .list > .item > .image, .ui.list > .item > .image { display: table-cell; background-color: transparent; margin: 0em; vertical-align: top; } .ui.list .list > .item > .image:not(:only-child):not(img), .ui.list > .item > .image:not(:only-child):not(img) { padding-right: 0.5em; } .ui.list .list > .item > .image img, .ui.list > .item > .image img { vertical-align: top; } .ui.list .list > .item > img.image, .ui.list .list > .item > .image:only-child, .ui.list > .item > img.image, .ui.list > .item > .image:only-child { display: inline-block; } /* Content */ .ui.list .list > .item > .content, .ui.list > .item > .content { line-height: 1.125em; } .ui.list .list > .item > .image + .content, .ui.list .list > .item > .icon + .content, .ui.list > .item > .image + .content, .ui.list > .item > .icon + .content { display: table-cell; width: 100%; padding: 0em 0em 0em 0.5em; vertical-align: top; } .ui.list .list > .item > img.image + .content, .ui.list > .item > img.image + .content { display: inline-block; width: auto; } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list { margin-left: 0em; padding-left: 0em; } /* Header */ .ui.list .list > .item .header, .ui.list > .item .header { display: block; margin: 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; color: #4A3041; } /* Description */ .ui.list .list > .item .description, .ui.list > .item .description { display: block; color: rgba(0, 0, 0, 0.7); } /* Child Link */ .ui.list > .item a, .ui.list .list > .item a { cursor: pointer; } /* Linking Item */ .ui.list .list > a.item, .ui.list > a.item { cursor: pointer; color: #407330; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { color: #2f701b; } /* Linked Item Icons */ .ui.list .list > a.item i.icon, .ui.list > a.item i.icon { color: rgba(0, 0, 0, 0.4); } /* Header Link */ .ui.list .list > .item a.header, .ui.list > .item a.header { cursor: pointer; color: #407330 !important; } .ui.list .list > .item a.header:hover, .ui.list > .item a.header:hover { color: #2f701b !important; } /* Floated Content */ .ui[class*="left floated"].list { float: left; } .ui[class*="right floated"].list { float: right; } .ui.list .list > .item [class*="left floated"], .ui.list > .item [class*="left floated"] { float: left; margin: 0em 1em 0em 0em; } .ui.list .list > .item [class*="right floated"], .ui.list > .item [class*="right floated"] { float: right; margin: 0em 0em 0em 1em; } /******************************* Coupling *******************************/ .ui.menu .ui.list > .item, .ui.menu .ui.list .list > .item { display: list-item; table-layout: fixed; background-color: transparent; list-style-type: none; list-style-position: outside; padding: 0.1875em 0em; line-height: 1.125em; } .ui.menu .ui.list .list > .item:before, .ui.menu .ui.list > .item:before { border: none; background: none; } .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child { padding-top: 0em; } .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child { padding-bottom: 0em; } /******************************* Types *******************************/ /*------------------- Horizontal --------------------*/ .ui.horizontal.list { display: inline-block; font-size: 0em; } .ui.horizontal.list > .item { display: inline-block; margin-left: 1em; font-size: 1rem; } .ui.horizontal.list:not(.celled) > .item:first-child { margin-left: 0em !important; padding-left: 0em !important; } .ui.horizontal.list .list { padding-left: 0em; padding-bottom: 0em; } .ui.horizontal.list > .item > .image, .ui.horizontal.list .list > .item > .image, .ui.horizontal.list > .item > .icon, .ui.horizontal.list .list > .item > .icon, .ui.horizontal.list > .item > .content, .ui.horizontal.list .list > .item > .content { vertical-align: middle; } /* Padding on all elements */ .ui.horizontal.list > .item:first-child, .ui.horizontal.list > .item:last-child { padding-top: 0.1875em; padding-bottom: 0.1875em; } /* Horizontal List */ .ui.horizontal.list > .item > i.icon { margin: 0em; padding: 0em 0.25em 0em 0em; } .ui.horizontal.list > .item > .icon, .ui.horizontal.list > .item > .icon + .content { float: none; display: inline-block; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ .ui.list .list > .disabled.item, .ui.list > .disabled.item { pointer-events: none; color: rgba(40, 40, 40, 0.3) !important; } .ui.inverted.list .list > .disabled.item, .ui.inverted.list > .disabled.item { color: rgba(225, 225, 225, 0.3) !important; } /*------------------- Hover --------------------*/ .ui.list .list > a.item:hover .icon, .ui.list > a.item:hover .icon { color: #4A3041; } /******************************* Variations *******************************/ /*------------------- Inverted --------------------*/ .ui.inverted.list .list > a.item > .icon, .ui.inverted.list > a.item > .icon { color: rgba(255, 255, 255, 0.7); } .ui.inverted.list .list > .item .header, .ui.inverted.list > .item .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.list .list > .item .description, .ui.inverted.list > .item .description { color: rgba(255, 255, 255, 0.7); } /* Item Link */ .ui.inverted.list .list > a.item, .ui.inverted.list > a.item { cursor: pointer; color: rgba(255, 255, 255, 0.9); } .ui.inverted.list .list > a.item:hover, .ui.inverted.list > a.item:hover { color: #2f701b; } /* Linking Content */ .ui.inverted.list .item a:not(.ui) { color: rgba(255, 255, 255, 0.9) !important; } .ui.inverted.list .item a:not(.ui):hover { color: #2f701b !important; } /*------------------- Aligned --------------------*/ .ui.list[class*="top aligned"] .image, .ui.list[class*="top aligned"] .content, .ui.list [class*="top aligned"] { vertical-align: top !important; } .ui.list[class*="middle aligned"] .image, .ui.list[class*="middle aligned"] .content, .ui.list [class*="middle aligned"] { vertical-align: middle !important; } .ui.list[class*="bottom aligned"] .image, .ui.list[class*="bottom aligned"] .content, .ui.list [class*="bottom aligned"] { vertical-align: bottom !important; } /*------------------- Link --------------------*/ .ui.link.list .item, .ui.link.list a.item, .ui.link.list .item a:not(.ui) { color: rgba(0, 0, 0, 0.4); transition: 0.1s color ease; } .ui.link.list.list a.item:hover, .ui.link.list.list .item a:not(.ui):hover { color: rgba(0, 0, 0, 0.8); } .ui.link.list.list a.item:active, .ui.link.list.list .item a:not(.ui):active { color: rgba(0, 0, 0, 0.9); } .ui.link.list.list .active.item, .ui.link.list.list .active.item a:not(.ui) { color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.link.list .item, .ui.inverted.link.list a.item, .ui.inverted.link.list .item a:not(.ui) { color: rgba(255, 255, 255, 0.5); } .ui.inverted.link.list.list a.item:hover, .ui.inverted.link.list.list .item a:not(.ui):hover { color: #ffffff; } .ui.inverted.link.list.list a.item:active, .ui.inverted.link.list.list .item a:not(.ui):active { color: #ffffff; } .ui.inverted.link.list.list a.active.item, .ui.inverted.link.list.list .active.item a:not(.ui) { color: #ffffff; } /*------------------- Selection --------------------*/ .ui.selection.list .list > .item, .ui.selection.list > .item { cursor: pointer; background: transparent; padding: 0.5em 0.5em; margin: 0em; color: rgba(0, 0, 0, 0.4); border-radius: 0.5em; transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; } .ui.selection.list .list > .item:last-child, .ui.selection.list > .item:last-child { margin-bottom: 0em; } .ui.selection.list.list > .item:hover, .ui.selection.list > .item:hover { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.8); } .ui.selection.list .list > .item:active, .ui.selection.list > .item:active { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.9); } .ui.selection.list .list > .item.active, .ui.selection.list > .item.active { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.selection.list > .item, .ui.inverted.selection.list > .item { background: transparent; color: rgba(255, 255, 255, 0.5); } .ui.inverted.selection.list > .item:hover, .ui.inverted.selection.list > .item:hover { background: rgba(255, 255, 255, 0.02); color: #ffffff; } .ui.inverted.selection.list > .item:active, .ui.inverted.selection.list > .item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.inverted.selection.list > .item.active, .ui.inverted.selection.list > .item.active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Celled / Divided Selection List */ .ui.celled.selection.list .list > .item, .ui.divided.selection.list .list > .item, .ui.celled.selection.list > .item, .ui.divided.selection.list > .item { border-radius: 0em; } /*------------------- Animated --------------------*/ .ui.animated.list > .item { transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; } .ui.animated.list:not(.horizontal) > .item:hover { padding-left: 1em; } /*------------------- Fitted --------------------*/ .ui.fitted.list:not(.selection) .list > .item, .ui.fitted.list:not(.selection) > .item { padding-left: 0em; padding-right: 0em; } .ui.fitted.selection.list .list > .item, .ui.fitted.selection.list > .item { margin-left: -0.5em; margin-right: -0.5em; } /*------------------- Bulleted --------------------*/ ul.ui.list, .ui.bulleted.list { margin-left: 1.25rem; } ul.ui.list li, .ui.bulleted.list .list > .item, .ui.bulleted.list > .item { position: relative; } ul.ui.list li:before, .ui.bulleted.list .list > .item:before, .ui.bulleted.list > .item:before { -webkit-user-select: none; user-select: none; pointer-events: none; position: absolute; top: auto; left: auto; font-weight: normal; margin-left: -1.25rem; content: '•'; opacity: 1; color: inherit; vertical-align: top; } ul.ui.list li:before, .ui.bulleted.list .list > a.item:before, .ui.bulleted.list > a.item:before { color: #4A3041; } ul.ui.list ul, .ui.bulleted.list .list { padding-left: 1.25rem; } /* Horizontal Bulleted */ ul.ui.horizontal.bulleted.list, .ui.horizontal.bulleted.list { margin-left: 0em; } ul.ui.horizontal.bulleted.list li, .ui.horizontal.bulleted.list > .item { margin-left: 1.75rem; } ul.ui.horizontal.bulleted.list li:first-child, .ui.horizontal.bulleted.list > .item:first-child { margin-left: 0em; } ul.ui.horizontal.bulleted.list li::before, .ui.horizontal.bulleted.list > .item::before { color: #4A3041; } ul.ui.horizontal.bulleted.list li:first-child::before, .ui.horizontal.bulleted.list > .item:first-child::before { display: none; } /*------------------- Ordered --------------------*/ ol.ui.list, .ui.ordered.list, .ui.ordered.list .list, ol.ui.list ol { counter-reset: ordered; margin-left: 1.25rem; list-style-type: none; } ol.ui.list li, .ui.ordered.list .list > .item, .ui.ordered.list > .item { list-style-type: none; position: relative; } ol.ui.list li:before, .ui.ordered.list .list > .item:before, .ui.ordered.list > .item:before { position: absolute; top: auto; left: auto; -webkit-user-select: none; user-select: none; pointer-events: none; margin-left: -1.25rem; counter-increment: ordered; content: counters(ordered, ".") " "; text-align: right; color: #4A3041; vertical-align: middle; opacity: 0.8; } ol.ui.inverted.list li:before, .ui.ordered.inverted.list .list > .item:before, .ui.ordered.inverted.list > .item:before { color: rgba(255, 255, 255, 0.7); } /* Value */ .ui.ordered.list > .list > .item[data-value], .ui.ordered.list > .item[data-value] { content: attr(data-value); } ol.ui.list li[value]:before { content: attr(value); } /* Child Lists */ ol.ui.list ol, .ui.ordered.list .list { margin-left: 1em; } ol.ui.list ol li:before, .ui.ordered.list .list > .item:before { margin-left: -2em; } /* Horizontal Ordered */ ol.ui.horizontal.list, .ui.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, .ui.ordered.horizontal.list .list > .item:before, .ui.ordered.horizontal.list > .item:before { position: static; margin: 0em 0.5em 0em 0em; } /*------------------- Divided --------------------*/ .ui.divided.list > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.divided.list .list > .item { border-top: none; } .ui.divided.list .item .list > .item { border-top: none; } .ui.divided.list .list > .item:first-child, .ui.divided.list > .item:first-child { border-top: none; } /* Sub Menu */ .ui.divided.list:not(.horizontal) .list > .item:first-child { border-top-width: 1px; } /* Divided bulleted */ .ui.divided.bulleted.list:not(.horizontal), .ui.divided.bulleted.list .list { margin-left: 0em; padding-left: 0em; } .ui.divided.bulleted.list > .item:not(.horizontal) { padding-left: 1.25rem; } /* Divided Ordered */ .ui.divided.ordered.list { margin-left: 0em; } .ui.divided.ordered.list .list > .item, .ui.divided.ordered.list > .item { padding-left: 1.25rem; } .ui.divided.ordered.list .item .list { margin-left: 0em; margin-right: 0em; padding-bottom: 0.1875em; } .ui.divided.ordered.list .item .list > .item { padding-left: 1em; } /* Divided Selection */ .ui.divided.selection.list .list > .item, .ui.divided.selection.list > .item { margin: 0em; border-radius: 0em; } /* Divided horizontal */ .ui.divided.horizontal.list { margin-left: 0em; } .ui.divided.horizontal.list > .item:not(:first-child) { padding-left: 0.5em; } .ui.divided.horizontal.list > .item:not(:last-child) { padding-right: 0.5em; } .ui.divided.horizontal.list > .item { border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; line-height: 0.6; } .ui.horizontal.divided.list > .item:first-child { border-left: none; } /* Inverted */ .ui.divided.inverted.list > .item, .ui.divided.inverted.list > .list, .ui.divided.inverted.horizontal.list > .item { border-color: rgba(255, 255, 255, 0.1); } /*------------------- Celled --------------------*/ .ui.celled.list > .item, .ui.celled.list > .list { border-top: 1px solid rgba(34, 36, 38, 0.15); padding-left: 0.5em; padding-right: 0.5em; } .ui.celled.list > .item:last-child { border-bottom: 1px solid rgba(34, 36, 38, 0.15); } /* Padding on all elements */ .ui.celled.list > .item:first-child, .ui.celled.list > .item:last-child { padding-top: 0.1875em; padding-bottom: 0.1875em; } /* Sub Menu */ .ui.celled.list .item .list > .item { border-width: 0px; } .ui.celled.list .list > .item:first-child { border-top-width: 0px; } /* Celled Bulleted */ .ui.celled.bulleted.list { margin-left: 0em; } .ui.celled.bulleted.list .list > .item, .ui.celled.bulleted.list > .item { padding-left: 1.25rem; } .ui.celled.bulleted.list .item .list { margin-left: -1.25rem; margin-right: -1.25rem; padding-bottom: 0.1875em; } /* Celled Ordered */ .ui.celled.ordered.list { margin-left: 0em; } .ui.celled.ordered.list .list > .item, .ui.celled.ordered.list > .item { padding-left: 1.25rem; } .ui.celled.ordered.list .item .list { margin-left: 0em; margin-right: 0em; padding-bottom: 0.1875em; } .ui.celled.ordered.list .list > .item { padding-left: 1em; } /* Celled Horizontal */ .ui.horizontal.celled.list { margin-left: 0em; } .ui.horizontal.celled.list .list > .item, .ui.horizontal.celled.list > .item { border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; padding-left: 0.5em; padding-right: 0.5em; line-height: 0.6; } .ui.horizontal.celled.list .list > .item:last-child, .ui.horizontal.celled.list > .item:last-child { border-bottom: none; border-right: 1px solid rgba(34, 36, 38, 0.15); } /* Inverted */ .ui.celled.inverted.list > .item, .ui.celled.inverted.list > .list { border-color: 1px solid rgba(255, 255, 255, 0.1); } .ui.celled.inverted.horizontal.list .list > .item, .ui.celled.inverted.horizontal.list > .item { border-color: 1px solid rgba(255, 255, 255, 0.1); } /*------------------- Relaxed --------------------*/ .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.375em; } .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.375em; } .ui.horizontal.relaxed.list .list > .item:not(:first-child), .ui.horizontal.relaxed.list > .item:not(:first-child) { padding-left: 1rem; } .ui.horizontal.relaxed.list .list > .item:not(:last-child), .ui.horizontal.relaxed.list > .item:not(:last-child) { padding-right: 1rem; } /* Very Relaxed */ .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.75em; } .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.75em; } .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { padding-left: 1.5rem; } .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { padding-right: 1.5rem; } /*------------------- Sizes --------------------*/ .ui.mini.list { font-size: 0.8125em; } .ui.tiny.list { font-size: 0.875em; } .ui.small.list { font-size: 0.9375em; } .ui.list { font-size: 1em; } .ui.large.list { font-size: 1.125em; } .ui.big.list { font-size: 1.3125em; } .ui.huge.list { font-size: 1.4375em; } .ui.massive.list { font-size: 1.6875em; } .ui.mini.horizontal.list .list > .item, .ui.mini.horizontal.list > .item { font-size: 0.8125rem; } .ui.tiny.horizontal.list .list > .item, .ui.tiny.horizontal.list > .item { font-size: 0.875rem; } .ui.small.horizontal.list .list > .item, .ui.small.horizontal.list > .item { font-size: 0.9375rem; } .ui.horizontal.list .list > .item, .ui.horizontal.list > .item { font-size: 1rem; } .ui.large.horizontal.list .list > .item, .ui.large.horizontal.list > .item { font-size: 1.125rem; } .ui.big.horizontal.list .list > .item, .ui.big.horizontal.list > .item { font-size: 1.3125rem; } .ui.huge.horizontal.list .list > .item, .ui.huge.horizontal.list > .item { font-size: 1.4375rem; } .ui.massive.horizontal.list .list > .item, .ui.massive.horizontal.list > .item { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Loader * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Loader *******************************/ /* Some global loader styles defined in site.variables */ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Exact Sizes (Avoids Rounding Errors) */ /* Packaged Theme */ /******************************* Loader *******************************/ /* Some global loader styles defined in site.variables */ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Exact Sizes (Avoids Rounding Errors) */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Loader *******************************/ /* Standard Size */ .ui.loader { display: none; position: absolute; top: 50%; left: 50%; margin: 0px; text-align: center; z-index: 1000; transform: translateX(-50%) translateY(-50%); } /* Static Shape */ .ui.loader:before { position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } /* Active Shape */ .ui.loader:after { position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; animation: loader 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /* Active Animation */ @keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Sizes */ .ui.mini.loader:before, .ui.mini.loader:after { width: 0.875rem; height: 0.875rem; margin: 0em 0em 0em -0.4375rem; } .ui.tiny.loader:before, .ui.tiny.loader:after { width: 1rem; height: 1rem; margin: 0em 0em 0em -0.5rem; } .ui.small.loader:before, .ui.small.loader:after { width: 1.5rem; height: 1.5rem; margin: 0em 0em 0em -0.75rem; } .ui.loader:before, .ui.loader:after { width: 2rem; height: 2rem; margin: 0em 0em 0em -1rem; } .ui.large.loader:before, .ui.large.loader:after { width: 3rem; height: 3rem; margin: 0em 0em 0em -1.5rem; } .ui.big.loader:before, .ui.big.loader:after { width: 3.25rem; height: 3.25rem; margin: 0em 0em 0em -1.625rem; } .ui.huge.loader:before, .ui.huge.loader:after { width: 3.625rem; height: 3.625rem; margin: 0em 0em 0em -1.8125rem; } .ui.massive.loader:before, .ui.massive.loader:after { width: 4rem; height: 4rem; margin: 0em 0em 0em -2rem; } /*------------------- Coupling --------------------*/ /* Show inside active dimmer */ .ui.dimmer .loader { display: block; } /* Black Dimmer */ .ui.dimmer .ui.loader { color: rgba(255, 255, 255, 0.9); } .ui.dimmer .ui.loader:before { border-color: rgba(255, 255, 255, 0.15); } .ui.dimmer .ui.loader:after { border-color: #FFFFFF transparent transparent; } /* White Dimmer (Inverted) */ .ui.inverted.dimmer .ui.loader { color: #4A3041; } .ui.inverted.dimmer .ui.loader:before { border-color: rgba(0, 0, 0, 0.1); } .ui.inverted.dimmer .ui.loader:after { border-color: #767676 transparent transparent; } /******************************* Types *******************************/ /*------------------- Text --------------------*/ .ui.text.loader { width: auto !important; height: auto !important; text-align: center; font-style: normal; } /******************************* States *******************************/ .ui.indeterminate.loader:after { animation-direction: reverse; animation-duration: 1.2s; } .ui.loader.active, .ui.loader.visible { display: block; } .ui.loader.disabled, .ui.loader.hidden { display: none; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ /* Loader */ .ui.inverted.dimmer .ui.mini.loader, .ui.mini.loader { width: 0.875rem; height: 0.875rem; font-size: 0.8125em; } .ui.inverted.dimmer .ui.tiny.loader, .ui.tiny.loader { width: 1rem; height: 1rem; font-size: 0.875em; } .ui.inverted.dimmer .ui.small.loader, .ui.small.loader { width: 1.5rem; height: 1.5rem; font-size: 0.9375em; } .ui.inverted.dimmer .ui.loader, .ui.loader { width: 2rem; height: 2rem; font-size: 1em; } .ui.inverted.dimmer .ui.large.loader, .ui.large.loader { width: 3rem; height: 3rem; font-size: 1.125em; } .ui.inverted.dimmer .ui.big.loader, .ui.big.loader { width: 3.25rem; height: 3.25rem; font-size: 1.3125em; } .ui.inverted.dimmer .ui.huge.loader, .ui.huge.loader { width: 3.625rem; height: 3.625rem; font-size: 1.4375em; } .ui.inverted.dimmer .ui.massive.loader, .ui.massive.loader { width: 4rem; height: 4rem; font-size: 1.6875em; } /* Text Loader */ .ui.mini.text.loader { min-width: 0.875rem; padding-top: 1.6875rem; } .ui.tiny.text.loader { min-width: 1rem; padding-top: 1.8125rem; } .ui.small.text.loader { min-width: 1.5rem; padding-top: 2.3125rem; } .ui.text.loader { min-width: 2rem; padding-top: 2.8125rem; } .ui.large.text.loader { min-width: 3rem; padding-top: 3.8125rem; } .ui.big.text.loader { min-width: 3.25rem; padding-top: 4.0625rem; } .ui.huge.text.loader { min-width: 3.625rem; padding-top: 4.4375rem; } .ui.massive.text.loader { min-width: 4rem; padding-top: 4.8125rem; } /*------------------- Inverted --------------------*/ .ui.inverted.loader { color: rgba(255, 255, 255, 0.9); } .ui.inverted.loader:before { border-color: rgba(255, 255, 255, 0.15); } .ui.inverted.loader:after { border-top-color: #FFFFFF; } /*------------------- Inline --------------------*/ .ui.inline.loader { position: relative; vertical-align: middle; margin: 0em; left: 0em; top: 0em; transform: none; } .ui.inline.loader.active, .ui.inline.loader.visible { display: inline-block; } /* Centered Inline */ .ui.centered.inline.loader.active, .ui.centered.inline.loader.visible { display: block; margin-left: auto; margin-right: auto; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Loader * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /* Key Content Sizing */ /* Interval between consecutive placeholders */ /* Repeated Placeholder */ /* Image */ /* Header Image */ /* Paragraph */ /* Glow Gradient */ /* Variations */ /* Packaged Theme */ /* Key Content Sizing */ /* Interval between consecutive placeholders */ /* Repeated Placeholder */ /* Image */ /* Header Image */ /* Paragraph */ /* Glow Gradient */ /* Variations */ /* Site Theme */ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /*------------------- Content --------------------*/ .ui.placeholder { position: static; overflow: hidden; animation: placeholderShimmer 2s linear; animation-iteration-count: infinite; background-color: #FFFFFF; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%); background-size: 1200px 100%; max-width: 30rem; } @keyframes placeholderShimmer { 0% { background-position: -1200px 0; } 100% { background-position: 1200px 0; } } .ui.placeholder + .ui.placeholder { margin-top: 2rem; } .ui.placeholder + .ui.placeholder { animation-delay: 0.15s; } .ui.placeholder + .ui.placeholder + .ui.placeholder { animation-delay: 0.3s; } .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { animation-delay: 0.45s; } .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { animation-delay: 0.6s; } .ui.placeholder, .ui.placeholder > :before, .ui.placeholder .image.header:after, .ui.placeholder .line, .ui.placeholder .line:after { background-color: #FFFFFF; } /* Image */ .ui.placeholder .image:not(.header):not(.ui) { height: 100px; } .ui.placeholder .square.image:not(.header) { height: 0px; overflow: hidden; /* 1/1 aspect ratio */ padding-top: 100%; } .ui.placeholder .rectangular.image:not(.header) { height: 0px; overflow: hidden; /* 4/3 aspect ratio */ padding-top: 75%; } /* Lines */ .ui.placeholder .line { position: relative; height: 0.75em; } .ui.placeholder .line:before, .ui.placeholder .line:after { top: 100%; position: absolute; content: ''; background-color: inherit; } .ui.placeholder .line:before { left: 0px; } .ui.placeholder .line:after { right: 0px; } /* Any Lines */ .ui.placeholder .line { margin-bottom: 0.4375em; } .ui.placeholder .line:before, .ui.placeholder .line:after { height: 0.4375em; } .ui.placeholder .line:not(:first-child) { margin-top: 0.4375em; } /* Header Image + 2 Lines */ .ui.placeholder .header { position: relative; overflow: hidden; } /* Line Outdent */ .ui.placeholder .line:nth-child(1):after { width: 0%; } .ui.placeholder .line:nth-child(2):after { width: 50%; } .ui.placeholder .line:nth-child(3):after { width: 10%; } .ui.placeholder .line:nth-child(4):after { width: 35%; } .ui.placeholder .line:nth-child(5):after { width: 65%; } /* Header Line 1 & 2*/ .ui.placeholder .header .line { margin-bottom: 0.5625em; } .ui.placeholder .header .line:before, .ui.placeholder .header .line:after { height: 0.5625em; } .ui.placeholder .header .line:not(:first-child) { margin-top: 0.5625em; } .ui.placeholder .header .line:after { width: 20%; } .ui.placeholder .header .line:nth-child(2):after { width: 60%; } /* Image Header */ .ui.placeholder .image.header .line { margin-left: 3em; } .ui.placeholder .image.header .line:before { width: 0.625rem; } .ui.placeholder .image.header:after { display: block; height: 0.75em; content: ''; margin-left: 3em; } /* Spacing */ .ui.placeholder .image .line:first-child, .ui.placeholder .paragraph .line:first-child, .ui.placeholder .header .line:first-child { height: 0.01px; } .ui.placeholder .image:not(:first-child):before, .ui.placeholder .paragraph:not(:first-child):before, .ui.placeholder .header:not(:first-child):before { height: 1.25em; content: ''; display: block; } /* Inverted Content Loader */ .ui.inverted.placeholder { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%); } .ui.inverted.placeholder, .ui.inverted.placeholder > :before, .ui.inverted.placeholder .image.header:after, .ui.inverted.placeholder .line, .ui.inverted.placeholder .line:after { background-color: #1B1C1D; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ .ui.placeholder .full.line.line.line:after { width: 0%; } .ui.placeholder .very.long.line.line.line:after { width: 10%; } .ui.placeholder .long.line.line.line:after { width: 35%; } .ui.placeholder .medium.line.line.line:after { width: 50%; } .ui.placeholder .short.line.line.line:after { width: 65%; } .ui.placeholder .very.short.line.line.line:after { width: 80%; } /*------------------- Fluid --------------------*/ .ui.fluid.placeholder { max-width: none; } /*! * # Semantic UI - Rail * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Rail *******************************/ /*------------------- Element --------------------*/ /*------------------- Variations --------------------*/ /* Close */ /* Dividing */ /* Packaged Theme */ /******************************* Rail *******************************/ /*------------------- Element --------------------*/ /*------------------- Variations --------------------*/ /* Close */ /* Dividing */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Rails *******************************/ .ui.rail { position: absolute; top: 0%; width: 300px; height: 100%; } .ui.left.rail { left: auto; right: 100%; padding: 0em 2rem 0em 0em; margin: 0em 2rem 0em 0em; } .ui.right.rail { left: 100%; right: auto; padding: 0em 0em 0em 2rem; margin: 0em 0em 0em 2rem; } /******************************* Variations *******************************/ /*-------------- Internal ---------------*/ .ui.left.internal.rail { left: 0%; right: auto; padding: 0em 0em 0em 2rem; margin: 0em 0em 0em 2rem; } .ui.right.internal.rail { left: auto; right: 0%; padding: 0em 2rem 0em 0em; margin: 0em 2rem 0em 0em; } /*-------------- Dividing ---------------*/ .ui.dividing.rail { width: 302.5px; } .ui.left.dividing.rail { padding: 0em 2.5rem 0em 0em; margin: 0em 2.5rem 0em 0em; border-right: 1px solid rgba(34, 36, 38, 0.15); } .ui.right.dividing.rail { border-left: 1px solid rgba(34, 36, 38, 0.15); padding: 0em 0em 0em 2.5rem; margin: 0em 0em 0em 2.5rem; } /*-------------- Distance ---------------*/ .ui.close.rail { width: calc( 300px + 1em ); } .ui.close.left.rail { padding: 0em 1em 0em 0em; margin: 0em 1em 0em 0em; } .ui.close.right.rail { padding: 0em 0em 0em 1em; margin: 0em 0em 0em 1em; } .ui.very.close.rail { width: calc( 300px + 0.5em ); } .ui.very.close.left.rail { padding: 0em 0.5em 0em 0em; margin: 0em 0.5em 0em 0em; } .ui.very.close.right.rail { padding: 0em 0em 0em 0.5em; margin: 0em 0em 0em 0.5em; } /*-------------- Attached ---------------*/ .ui.attached.left.rail, .ui.attached.right.rail { padding: 0em; margin: 0em; } /*-------------- Sizing ---------------*/ .ui.mini.rail { font-size: 0.8125rem; } .ui.tiny.rail { font-size: 0.875rem; } .ui.small.rail { font-size: 0.9375rem; } .ui.rail { font-size: 1rem; } .ui.large.rail { font-size: 1.125rem; } .ui.big.rail { font-size: 1.3125rem; } .ui.huge.rail { font-size: 1.4375rem; } .ui.massive.rail { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Reveal * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reveal *******************************/ /* Types */ /* Packaged Theme */ /******************************* Reveal *******************************/ /* Types */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reveal *******************************/ .ui.reveal { display: inherit; position: relative !important; font-size: 0em !important; } .ui.reveal > .visible.content { position: absolute !important; top: 0em !important; left: 0em !important; z-index: 3 !important; transition: all 0.5s ease 0.1s; } .ui.reveal > .hidden.content { position: relative !important; z-index: 2 !important; } /* Make sure hovered element is on top of other reveal */ .ui.active.reveal .visible.content, .ui.reveal:hover .visible.content { z-index: 4 !important; } /******************************* Types *******************************/ /*-------------- Slide ---------------*/ .ui.slide.reveal { position: relative !important; overflow: hidden !important; white-space: nowrap; } .ui.slide.reveal > .content { display: block; width: 100%; white-space: normal; float: left; margin: 0em; transition: transform 0.5s ease 0.1s; } .ui.slide.reveal > .visible.content { position: relative !important; } .ui.slide.reveal > .hidden.content { position: absolute !important; left: 0% !important; width: 100% !important; transform: translateX(100%) !important; } .ui.slide.active.reveal > .visible.content, .ui.slide.reveal:hover > .visible.content { transform: translateX(-100%) !important; } .ui.slide.active.reveal > .hidden.content, .ui.slide.reveal:hover > .hidden.content { transform: translateX(0%) !important; } .ui.slide.right.reveal > .visible.content { transform: translateX(0%) !important; } .ui.slide.right.reveal > .hidden.content { transform: translateX(-100%) !important; } .ui.slide.right.active.reveal > .visible.content, .ui.slide.right.reveal:hover > .visible.content { transform: translateX(100%) !important; } .ui.slide.right.active.reveal > .hidden.content, .ui.slide.right.reveal:hover > .hidden.content { transform: translateX(0%) !important; } .ui.slide.up.reveal > .hidden.content { transform: translateY(100%) !important; } .ui.slide.up.active.reveal > .visible.content, .ui.slide.up.reveal:hover > .visible.content { transform: translateY(-100%) !important; } .ui.slide.up.active.reveal > .hidden.content, .ui.slide.up.reveal:hover > .hidden.content { transform: translateY(0%) !important; } .ui.slide.down.reveal > .hidden.content { transform: translateY(-100%) !important; } .ui.slide.down.active.reveal > .visible.content, .ui.slide.down.reveal:hover > .visible.content { transform: translateY(100%) !important; } .ui.slide.down.active.reveal > .hidden.content, .ui.slide.down.reveal:hover > .hidden.content { transform: translateY(0%) !important; } /*-------------- Fade ---------------*/ .ui.fade.reveal > .visible.content { opacity: 1; } .ui.fade.active.reveal > .visible.content, .ui.fade.reveal:hover > .visible.content { opacity: 0; } /*-------------- Move ---------------*/ .ui.move.reveal { position: relative !important; overflow: hidden !important; white-space: nowrap; } .ui.move.reveal > .content { display: block; float: left; white-space: normal; margin: 0em; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; } .ui.move.reveal > .visible.content { position: relative !important; } .ui.move.reveal > .hidden.content { position: absolute !important; left: 0% !important; width: 100% !important; } .ui.move.active.reveal > .visible.content, .ui.move.reveal:hover > .visible.content { transform: translateX(-100%) !important; } .ui.move.right.active.reveal > .visible.content, .ui.move.right.reveal:hover > .visible.content { transform: translateX(100%) !important; } .ui.move.up.active.reveal > .visible.content, .ui.move.up.reveal:hover > .visible.content { transform: translateY(-100%) !important; } .ui.move.down.active.reveal > .visible.content, .ui.move.down.reveal:hover > .visible.content { transform: translateY(100%) !important; } /*-------------- Rotate ---------------*/ .ui.rotate.reveal > .visible.content { transition-duration: 0.5s; transform: rotate(0deg); } .ui.rotate.reveal > .visible.content, .ui.rotate.right.reveal > .visible.content { transform-origin: bottom right; } .ui.rotate.active.reveal > .visible.content, .ui.rotate.reveal:hover > .visible.content, .ui.rotate.right.active.reveal > .visible.content, .ui.rotate.right.reveal:hover > .visible.content { transform: rotate(110deg); } .ui.rotate.left.reveal > .visible.content { transform-origin: bottom left; } .ui.rotate.left.active.reveal > .visible.content, .ui.rotate.left.reveal:hover > .visible.content { transform: rotate(-110deg); } /******************************* States *******************************/ .ui.disabled.reveal:hover > .visible.visible.content { position: static !important; display: block !important; opacity: 1 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; } .ui.disabled.reveal:hover > .hidden.hidden.content { display: none !important; } /******************************* Coupling *******************************/ .ui.reveal > .ui.ribbon.label { z-index: 5; } /******************************* Variations *******************************/ /*-------------- Visible ---------------*/ .ui.visible.reveal { overflow: visible; } /*-------------- Instant ---------------*/ .ui.instant.reveal > .content { transition-delay: 0s !important; } /*-------------- Sizing ---------------*/ .ui.reveal > .content { font-size: 1rem !important; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Segment * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* Types *******************************/ /* Placeholder */ /* Piled */ /* Circular */ /* Stacked */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Packaged Theme */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* Types *******************************/ /* Placeholder */ /* Piled */ /* Circular */ /* Stacked */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Segment *******************************/ .ui.segment { position: relative; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0em; padding: 1em 1em; border-radius: 0.25rem; border: 1px solid rgba(34, 36, 38, 0.15); } .ui.segment:first-child { margin-top: 0em; } .ui.segment:last-child { margin-bottom: 0em; } /* Vertical */ .ui.vertical.segment { margin: 0em; padding-left: 0em; padding-right: 0em; background: none transparent; border-radius: 0px; box-shadow: none; border: none; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.vertical.segment:last-child { border-bottom: none; } /*------------------- Loose Coupling --------------------*/ /* Header */ .ui.inverted.segment > .ui.header { color: #FFFFFF; } /* Label */ .ui[class*="bottom attached"].segment > [class*="top attached"].label { border-top-left-radius: 0em; border-top-right-radius: 0em; } .ui[class*="top attached"].segment > [class*="bottom attached"].label { border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; } .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { border-top-left-radius: 0em; border-top-right-radius: 0em; } .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; } /* Grid */ .ui.page.grid.segment, .ui.grid > .row > .ui.segment.column, .ui.grid > .ui.segment.column { padding-top: 2em; padding-bottom: 2em; } .ui.grid.segment { margin: 1rem 0em; border-radius: 0.25rem; } /* Table */ .ui.basic.table.segment { background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui[class*="very basic"].table.segment { padding: 1em 1em; } /******************************* Types *******************************/ /*------------------- Placeholder --------------------*/ .ui.placeholder.segment { display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: initial; animation: none; overflow: visible; padding: 1em 1em; min-height: 18rem; background: #F9FAFB; border-color: rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; } .ui.placeholder.segment .button, .ui.placeholder.segment textarea { display: block; } .ui.placeholder.segment .field, .ui.placeholder.segment textarea, .ui.placeholder.segment > .ui.input, .ui.placeholder.segment .button { max-width: 15rem; margin-left: auto; margin-right: auto; } .ui.placeholder.segment .column .button, .ui.placeholder.segment .column .field, .ui.placeholder.segment .column textarea, .ui.placeholder.segment .column > .ui.input { max-width: 15rem; margin-left: auto; margin-right: auto; } .ui.placeholder.segment > .inline { align-self: center; } .ui.placeholder.segment > .inline > .button { display: inline-block; width: auto; margin: 0px 0.3125rem 0px 0px; } .ui.placeholder.segment > .inline > .button:last-child { margin-right: 0px; } /*------------------- Piled --------------------*/ .ui.piled.segments, .ui.piled.segment { margin: 3em 0em; box-shadow: ''; z-index: auto; } .ui.piled.segment:first-child { margin-top: 0em; } .ui.piled.segment:last-child { margin-bottom: 0em; } .ui.piled.segments:after, .ui.piled.segments:before, .ui.piled.segment:after, .ui.piled.segment:before { background-color: #FFFFFF; visibility: visible; content: ''; display: block; height: 100%; left: 0px; position: absolute; width: 100%; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: ''; } .ui.piled.segments:before, .ui.piled.segment:before { transform: rotate(-1.2deg); top: 0; z-index: -2; } .ui.piled.segments:after, .ui.piled.segment:after { transform: rotate(1.2deg); top: 0; z-index: -1; } /* Piled Attached */ .ui[class*="top attached"].piled.segment { margin-top: 3em; margin-bottom: 0em; } .ui.piled.segment[class*="top attached"]:first-child { margin-top: 0em; } .ui.piled.segment[class*="bottom attached"] { margin-top: 0em; margin-bottom: 3em; } .ui.piled.segment[class*="bottom attached"]:last-child { margin-bottom: 0em; } /*------------------- Stacked --------------------*/ .ui.stacked.segment { padding-bottom: 1.4em; } .ui.stacked.segments:before, .ui.stacked.segments:after, .ui.stacked.segment:before, .ui.stacked.segment:after { content: ''; position: absolute; bottom: -3px; left: 0%; border-top: 1px solid rgba(34, 36, 38, 0.15); background: rgba(0, 0, 0, 0.03); width: 100%; height: 6px; visibility: visible; } .ui.stacked.segments:before, .ui.stacked.segment:before { display: none; } /* Add additional page */ .ui.tall.stacked.segments:before, .ui.tall.stacked.segment:before { display: block; bottom: 0px; } /* Inverted */ .ui.stacked.inverted.segments:before, .ui.stacked.inverted.segments:after, .ui.stacked.inverted.segment:before, .ui.stacked.inverted.segment:after { background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(34, 36, 38, 0.35); } /*------------------- Padded --------------------*/ .ui.padded.segment { padding: 1.5em; } .ui[class*="very padded"].segment { padding: 3em; } /* Padded vertical */ .ui.padded.segment.vertical.segment, .ui[class*="very padded"].vertical.segment { padding-left: 0px; padding-right: 0px; } /*------------------- Compact --------------------*/ .ui.compact.segment { display: table; } /* Compact Group */ .ui.compact.segments { display: inline-flex; } .ui.compact.segments .segment, .ui.segments .compact.segment { display: block; flex: 0 1 auto; } /*------------------- Circular --------------------*/ .ui.circular.segment { display: table-cell; padding: 2em; text-align: center; vertical-align: middle; border-radius: 500em; } /*------------------- Raised --------------------*/ .ui.raised.segments, .ui.raised.segment { box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /******************************* Groups *******************************/ /* Group */ .ui.segments { flex-direction: column; position: relative; margin: 1rem 0em; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.25rem; } .ui.segments:first-child { margin-top: 0em; } .ui.segments:last-child { margin-bottom: 0em; } /* Nested Segment */ .ui.segments > .segment { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em; width: auto; box-shadow: none; border: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.segments:not(.horizontal) > .segment:first-child { border-top: none; margin-top: 0em; bottom: 0px; margin-bottom: 0em; top: 0px; border-radius: 0.25rem 0.25rem 0em 0em; } /* Bottom */ .ui.segments:not(.horizontal) > .segment:last-child { top: 0px; bottom: 0px; margin-top: 0em; margin-bottom: 0em; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.25rem 0.25rem; } /* Only */ .ui.segments:not(.horizontal) > .segment:only-child { border-radius: 0.25rem; } /* Nested Group */ .ui.segments > .ui.segments { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 1rem 1rem; } .ui.segments > .segments:first-child { border-top: none; } .ui.segments > .segment + .segments:not(.horizontal) { margin-top: 0em; } /* Horizontal Group */ .ui.horizontal.segments { display: flex; flex-direction: row; background-color: transparent; border-radius: 0px; padding: 0em; background-color: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0em; border-radius: 0.25rem; border: 1px solid rgba(34, 36, 38, 0.15); } /* Nested Horizontal Group */ .ui.segments > .horizontal.segments { margin: 0em; background-color: transparent; border-radius: 0px; border: none; box-shadow: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } /* Horizontal Segment */ .ui.horizontal.segments > .segment { flex: 1 1 auto; -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ margin: 0em; min-width: 0px; background-color: transparent; border-radius: 0px; border: none; box-shadow: none; border-left: 1px solid rgba(34, 36, 38, 0.15); } /* Border Fixes */ .ui.segments > .horizontal.segments:first-child { border-top: none; } .ui.horizontal.segments > .segment:first-child { border-left: none; } /******************************* States *******************************/ /*-------------- Disabled ---------------*/ .ui.disabled.segment { opacity: 0.45; color: rgba(40, 40, 40, 0.3); } /*-------------- Loading ---------------*/ .ui.loading.segment { position: relative; cursor: default; pointer-events: none; text-shadow: none !important; color: transparent !important; transition: all 0s linear; } .ui.loading.segment:before { position: absolute; content: ''; top: 0%; left: 0%; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; border-radius: 0.25rem; z-index: 100; } .ui.loading.segment:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0em 0em -1.5em; width: 3em; height: 3em; animation: segment-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; visibility: visible; z-index: 101; } @keyframes segment-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* Variations *******************************/ /*------------------- Basic --------------------*/ .ui.basic.segment { background: none transparent; box-shadow: none; border: none; border-radius: 0px; } /*------------------- Clearing --------------------*/ .ui.clearing.segment:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*------------------- Colors --------------------*/ /* Red */ .ui.red.segment:not(.inverted) { border-top: 2px solid #DB2828 !important; } .ui.inverted.red.segment { background-color: #DB2828 !important; color: #FFFFFF !important; } /* Orange */ .ui.orange.segment:not(.inverted) { border-top: 2px solid #F2711C !important; } .ui.inverted.orange.segment { background-color: #F2711C !important; color: #FFFFFF !important; } /* Yellow */ .ui.yellow.segment:not(.inverted) { border-top: 2px solid #FBBD08 !important; } .ui.inverted.yellow.segment { background-color: #FBBD08 !important; color: #FFFFFF !important; } /* Olive */ .ui.olive.segment:not(.inverted) { border-top: 2px solid #B5CC18 !important; } .ui.inverted.olive.segment { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ .ui.green.segment:not(.inverted) { border-top: 2px solid #21BA45 !important; } .ui.inverted.green.segment { background-color: #21BA45 !important; color: #FFFFFF !important; } /* Teal */ .ui.teal.segment:not(.inverted) { border-top: 2px solid #00B5AD !important; } .ui.inverted.teal.segment { background-color: #00B5AD !important; color: #FFFFFF !important; } /* Blue */ .ui.blue.segment:not(.inverted) { border-top: 2px solid #2185D0 !important; } .ui.inverted.blue.segment { background-color: #2185D0 !important; color: #FFFFFF !important; } /* Violet */ .ui.violet.segment:not(.inverted) { border-top: 2px solid #6435C9 !important; } .ui.inverted.violet.segment { background-color: #6435C9 !important; color: #FFFFFF !important; } /* Purple */ .ui.purple.segment:not(.inverted) { border-top: 2px solid #A333C8 !important; } .ui.inverted.purple.segment { background-color: #A333C8 !important; color: #FFFFFF !important; } /* Pink */ .ui.pink.segment:not(.inverted) { border-top: 2px solid #E03997 !important; } .ui.inverted.pink.segment { background-color: #E03997 !important; color: #FFFFFF !important; } /* Brown */ .ui.brown.segment:not(.inverted) { border-top: 2px solid #A5673F !important; } .ui.inverted.brown.segment { background-color: #A5673F !important; color: #FFFFFF !important; } /* Grey */ .ui.grey.segment:not(.inverted) { border-top: 2px solid #767676 !important; } .ui.inverted.grey.segment { background-color: #767676 !important; color: #FFFFFF !important; } /* Black */ .ui.black.segment:not(.inverted) { border-top: 2px solid #1B1C1D !important; } .ui.inverted.black.segment { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*------------------- Aligned --------------------*/ .ui[class*="left aligned"].segment { text-align: left; } .ui[class*="right aligned"].segment { text-align: right; } .ui[class*="center aligned"].segment { text-align: center; } /*------------------- Floated --------------------*/ .ui.floated.segment, .ui[class*="left floated"].segment { float: left; margin-right: 1em; } .ui[class*="right floated"].segment { float: right; margin-left: 1em; } /*------------------- Inverted --------------------*/ .ui.inverted.segment { border: none; box-shadow: none; } .ui.inverted.segment, .ui.primary.inverted.segment { background: #1B1C1D; color: rgba(255, 255, 255, 0.9); } /* Nested */ .ui.inverted.segment .segment { color: #4A3041; } .ui.inverted.segment .inverted.segment { color: rgba(255, 255, 255, 0.9); } /* Attached */ .ui.inverted.attached.segment { border-color: #555555; } /*------------------- Emphasis --------------------*/ /* Secondary */ .ui.secondary.segment { background: #F3F4F5; color: rgba(0, 0, 0, 0.6); } .ui.secondary.inverted.segment { background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); color: rgba(255, 255, 255, 0.8); } /* Tertiary */ .ui.tertiary.segment { background: #DCDDDE; color: rgba(0, 0, 0, 0.6); } .ui.tertiary.inverted.segment { background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%); color: rgba(255, 255, 255, 0.8); } /*------------------- Attached --------------------*/ /* Middle */ .ui.attached.segment { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% - (-1px * 2)); max-width: calc(100% - (-1px * 2)); box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached:not(.message) + .ui.attached.segment:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].segment { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1rem; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.segment[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui.segment[class*="bottom attached"] { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.25rem 0.25rem; } .ui.segment[class*="bottom attached"]:last-child { margin-bottom: 0em; } /*------------------- Size --------------------*/ .ui.mini.segments .segment, .ui.mini.segment { font-size: 0.8125rem; } .ui.tiny.segments .segment, .ui.tiny.segment { font-size: 0.875rem; } .ui.small.segments .segment, .ui.small.segment { font-size: 0.9375rem; } .ui.segments .segment, .ui.segment { font-size: 1rem; } .ui.large.segments .segment, .ui.large.segment { font-size: 1.125rem; } .ui.big.segments .segment, .ui.big.segment { font-size: 1.3125rem; } .ui.huge.segments .segment, .ui.huge.segment { font-size: 1.4375rem; } .ui.massive.segments .segment, .ui.massive.segment { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ .ui.secondary.segment { background: var(--primary-neutral-color); color: #4A3041; } /*! * # Semantic UI - Step * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Step *******************************/ /*-------------- Load Theme ---------------*/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Step *******************************/ /*------------------- Group --------------------*/ /*------------------- Element --------------------*/ /* Icon */ /* Title */ /* Description */ /* Arrow */ /* Mobile */ /*------------------- Types --------------------*/ /* Vertical */ /*------------------- Variations --------------------*/ /*------------------- States --------------------*/ /* Completed */ /* Hover */ /* Down */ /* Active */ /* Active + Hover */ /* Disabled */ /* Packaged Theme */ /******************************* Step *******************************/ /*------------------- Group --------------------*/ /*------------------- Element --------------------*/ /* Icon */ /* Title */ /* Description */ /* Arrow */ /* Mobile */ /*------------------- Types --------------------*/ /* Vertical */ /*------------------- Variations --------------------*/ /*------------------- States --------------------*/ /* Completed */ /* Hover */ /* Down */ /* Active */ /* Active + Hover */ /* Disabled */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Plural *******************************/ .ui.steps { display: inline-flex; flex-direction: row; align-items: stretch; margin: 1em 0em; background: ''; box-shadow: none; line-height: 1.125em; border-radius: 0.25rem; border: 1px solid rgba(34, 36, 38, 0.15); } /* First Steps */ .ui.steps:first-child { margin-top: 0em; } /* Last Steps */ .ui.steps:last-child { margin-bottom: 0em; } /******************************* Singular *******************************/ .ui.steps .step { position: relative; display: flex; flex: 1 0 auto; flex-wrap: wrap; flex-direction: row; vertical-align: middle; align-items: center; justify-content: center; margin: 0em 0em; padding: 1.125em 2em; background: #FFFFFF; color: #4A3041; box-shadow: none; border-radius: 0em; border: none; border-right: 1px solid rgba(34, 36, 38, 0.15); transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; } /* Arrow */ .ui.steps .step:after { display: none; position: absolute; z-index: 2; content: ''; top: 50%; right: 0%; border: medium none; background-color: #FFFFFF; width: 1.125em; height: 1.125em; border-style: solid; border-color: rgba(34, 36, 38, 0.15); border-width: 0px 1px 1px 0px; transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; transform: translateY(-50%) translateX(50%) rotate(-45deg); } /* First Step */ .ui.steps .step:first-child { padding-left: 2em; border-radius: 0.25rem 0em 0em 0.25rem; } /* Last Step */ .ui.steps .step:last-child { border-radius: 0em 0.25rem 0.25rem 0em; } .ui.steps .step:last-child { border-right: none; margin-right: 0em; } /* Only Step */ .ui.steps .step:only-child { border-radius: 0.25rem; } /******************************* Content *******************************/ /* Title */ .ui.steps .step .title { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.125em; font-weight: bold; } .ui.steps .step > .title { width: 100%; } /* Description */ .ui.steps .step .description { font-weight: normal; font-size: 0.9375em; color: #4A3041; } .ui.steps .step > .description { width: 100%; } .ui.steps .step .title ~ .description { margin-top: 0.25em; } /* Icon */ .ui.steps .step > .icon { line-height: 1; font-size: 2.5em; margin: 0em 1rem 0em 0em; } .ui.steps .step > .icon, .ui.steps .step > .icon ~ .content { display: block; flex: 0 1 auto; align-self: middle; } .ui.steps .step > .icon ~ .content { flex-grow: 1 0 auto; } /* Horizontal Icon */ .ui.steps:not(.vertical) .step > .icon { width: auto; } /* Link */ .ui.steps .link.step, .ui.steps a.step { cursor: pointer; } /******************************* Types *******************************/ /*-------------- Ordered ---------------*/ .ui.ordered.steps { counter-reset: ordered; } .ui.ordered.steps .step:before { display: block; position: static; text-align: center; content: counters(ordered, "."); align-self: middle; margin-right: 1rem; font-size: 2.5em; counter-increment: ordered; font-family: inherit; font-weight: bold; } .ui.ordered.steps .step > * { display: block; align-self: middle; } /*-------------- Vertical ---------------*/ .ui.vertical.steps { display: inline-flex; flex-direction: column; overflow: visible; } .ui.vertical.steps .step { justify-content: flex-start; border-radius: 0em; padding: 1.125em 2em; border-right: none; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.vertical.steps .step:first-child { padding: 1.125em 2em; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.vertical.steps .step:last-child { border-bottom: none; border-radius: 0em 0em 0.25rem 0.25rem; } .ui.vertical.steps .step:only-child { border-radius: 0.25rem; } /* Arrow */ .ui.vertical.steps .step:after { display: none; } .ui.vertical.steps .step:after { top: 50%; right: 0%; border-width: 0px 1px 1px 0px; } .ui.vertical.steps .step:after { display: none; } .ui.vertical.steps .active.step:after { display: block; } .ui.vertical.steps .step:last-child:after { display: none; } .ui.vertical.steps .active.step:last-child:after { display: block; } /*--------------- Responsive ----------------*/ /* Mobile (Default) */ @media only screen and (max-width: 767px) { .ui.steps:not(.unstackable) { display: inline-flex; overflow: visible; flex-direction: column; } .ui.steps:not(.unstackable) .step { width: 100% !important; flex-direction: column; border-radius: 0em; padding: 1.125em 2em; } .ui.steps:not(.unstackable) .step:first-child { padding: 1.125em 2em; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.steps:not(.unstackable) .step:last-child { border-radius: 0em 0em 0.25rem 0.25rem; } /* Arrow */ .ui.steps:not(.unstackable) .step:after { display: none !important; } /* Content */ .ui.steps:not(.unstackable) .step .content { text-align: center; } /* Icon */ .ui.steps:not(.unstackable) .step > .icon, .ui.ordered.steps:not(.unstackable) .step:before { margin: 0em 0em 1rem 0em; } } /******************************* States *******************************/ /* Link Hover */ .ui.steps .link.step:hover::after, .ui.steps .link.step:hover, .ui.steps a.step:hover::after, .ui.steps a.step:hover { background: #F9FAFB; color: rgba(0, 0, 0, 0.8); } /* Link Down */ .ui.steps .link.step:active::after, .ui.steps .link.step:active, .ui.steps a.step:active::after, .ui.steps a.step:active { background: #F3F4F5; color: rgba(0, 0, 0, 0.9); } /* Active */ .ui.steps .step.active { cursor: auto; background: #F3F4F5; } .ui.steps .step.active:after { background: #F3F4F5; } .ui.steps .step.active .title { color: #4A3041; } .ui.ordered.steps .step.active:before, .ui.steps .active.step .icon { color: rgba(0, 0, 0, 0.85); } /* Active Arrow */ .ui.steps .step:after { display: block; } .ui.steps .active.step:after { display: block; } .ui.steps .step:last-child:after { display: none; } .ui.steps .active.step:last-child:after { display: none; } /* Active Hover */ .ui.steps .link.active.step:hover::after, .ui.steps .link.active.step:hover, .ui.steps a.active.step:hover::after, .ui.steps a.active.step:hover { cursor: pointer; background: #DCDDDE; color: #4A3041; } /* Completed */ .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before { color: #21BA45; } /* Disabled */ .ui.steps .disabled.step { cursor: auto; background: #FFFFFF; pointer-events: none; } .ui.steps .disabled.step, .ui.steps .disabled.step .title, .ui.steps .disabled.step .description { color: rgba(40, 40, 40, 0.3); } .ui.steps .disabled.step:after { background: #FFFFFF; } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ /* Tablet Or Below */ @media only screen and (max-width: 991px) { .ui[class*="tablet stackable"].steps { display: inline-flex; overflow: visible; flex-direction: column; } /* Steps */ .ui[class*="tablet stackable"].steps .step { flex-direction: column; border-radius: 0em; padding: 1.125em 2em; } .ui[class*="tablet stackable"].steps .step:first-child { padding: 1.125em 2em; border-radius: 0.25rem 0.25rem 0em 0em; } .ui[class*="tablet stackable"].steps .step:last-child { border-radius: 0em 0em 0.25rem 0.25rem; } /* Arrow */ .ui[class*="tablet stackable"].steps .step:after { display: none !important; } /* Content */ .ui[class*="tablet stackable"].steps .step .content { text-align: center; } /* Icon */ .ui[class*="tablet stackable"].steps .step > .icon, .ui[class*="tablet stackable"].ordered.steps .step:before { margin: 0em 0em 1rem 0em; } } /*-------------- Fluid ---------------*/ /* Fluid */ .ui.fluid.steps { display: flex; width: 100%; } /*-------------- Attached ---------------*/ /* Top */ .ui.attached.steps { width: calc(100% + (--1px * 2)) !important; margin: 0em -1px 0; max-width: calc(100% + (--1px * 2)); border-radius: 0.25rem 0.25rem 0em 0em; } .ui.attached.steps .step:first-child { border-radius: 0.25rem 0em 0em 0em; } .ui.attached.steps .step:last-child { border-radius: 0em 0.25rem 0em 0em; } /* Bottom */ .ui.bottom.attached.steps { margin: 0 -1px 0em; border-radius: 0em 0em 0.25rem 0.25rem; } .ui.bottom.attached.steps .step:first-child { border-radius: 0em 0em 0em 0.25rem; } .ui.bottom.attached.steps .step:last-child { border-radius: 0em 0em 0.25rem 0em; } /*------------------- Evenly Divided --------------------*/ .ui.one.steps, .ui.two.steps, .ui.three.steps, .ui.four.steps, .ui.five.steps, .ui.six.steps, .ui.seven.steps, .ui.eight.steps { width: 100%; } .ui.one.steps > .step, .ui.two.steps > .step, .ui.three.steps > .step, .ui.four.steps > .step, .ui.five.steps > .step, .ui.six.steps > .step, .ui.seven.steps > .step, .ui.eight.steps > .step { flex-wrap: nowrap; } .ui.one.steps > .step { width: 100%; } .ui.two.steps > .step { width: 50%; } .ui.three.steps > .step { width: 33.333%; } .ui.four.steps > .step { width: 25%; } .ui.five.steps > .step { width: 20%; } .ui.six.steps > .step { width: 16.666%; } .ui.seven.steps > .step { width: 14.285%; } .ui.eight.steps > .step { width: 12.5%; } /*------------------- Sizes --------------------*/ .ui.mini.steps .step, .ui.mini.step { font-size: 0.8125rem; } .ui.tiny.steps .step, .ui.tiny.step { font-size: 0.875rem; } .ui.small.steps .step, .ui.small.step { font-size: 0.9375rem; } .ui.steps .step, .ui.step { font-size: 1rem; } .ui.large.steps .step, .ui.large.step { font-size: 1.125rem; } .ui.big.steps .step, .ui.big.step { font-size: 1.3125rem; } .ui.huge.steps .step, .ui.huge.step { font-size: 1.4375rem; } .ui.massive.steps .step, .ui.massive.step { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Step'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjILAIQyCKI0cjRyNhI0ZgsARDsIBiYCCwACsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsIBiYSMgILAEJiNGYTgbI7AIQ0awAiWwCENHI0cjYWAgsARDsIBiYCMgsAArI7AEQ2CwACuwBSVhsAUlsIBisAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wMiywABYgICCwBSYgLkcjRyNhIzw4LbAzLLAAFiCwCCNCICAgRiNHsAArI2E4LbA0LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWGwAUVjIyBYYhshWWOwAUViYCMuIyAgPIo4IyFZLbA1LLAAFiCwCEMgLkcjRyNhIGCwIGBmsIBiIyAgPIo4LbA2LCMgLkawAiVGUlggPFkusSYBFCstsDcsIyAuRrACJUZQWCA8WS6xJgEUKy2wOCwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xJgEUKy2wOSywMCsjIC5GsAIlRlJYIDxZLrEmARQrLbA6LLAxK4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrEmARQrsARDLrAmKy2wOyywABawBCWwBCYgLkcjRyNhsAZFKyMgPCAuIzixJgEUKy2wPCyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhsAIlRmE4IyA8IzgbISAgRiNHsAArI2E4IVmxJgEUKy2wPSywMCsusSYBFCstsD4ssDErISMgIDywBCNCIzixJgEUK7AEQy6wJistsD8ssAAVIEewACNCsgABARUUEy6wLCotsEAssAAVIEewACNCsgABARUUEy6wLCotsEEssQABFBOwLSotsEIssC8qLbBDLLAAFkUjIC4gRoojYTixJgEUKy2wRCywCCNCsEMrLbBFLLIAADwrLbBGLLIAATwrLbBHLLIBADwrLbBILLIBATwrLbBJLLIAAD0rLbBKLLIAAT0rLbBLLLIBAD0rLbBMLLIBAT0rLbBNLLIAADkrLbBOLLIAATkrLbBPLLIBADkrLbBQLLIBATkrLbBRLLIAADsrLbBSLLIAATsrLbBTLLIBADsrLbBULLIBATsrLbBVLLIAAD4rLbBWLLIAAT4rLbBXLLIBAD4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAoUAA4AAAAAEPQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPeFJAWNtYXAAAAGIAAAAOgAAAUrQEhm3Y3Z0IAAAAcQAAAAUAAAAHAZJ/5RmcGdtAAAB2AAABPkAAAmRigp4O2dhc3AAAAbUAAAACAAAAAgAAAAQZ2x5ZgAABtwAAACuAAAAtt9nBHZoZWFkAAAHjAAAADUAAAA2ASs8e2hoZWEAAAfEAAAAIAAAACQHUwNNaG10eAAAB+QAAAAMAAAADAspAABsb2NhAAAH8AAAAAgAAAAIADgAW21heHAAAAf4AAAAIAAAACAApgm8bmFtZQAACBgAAAF3AAACzcydGhxwb3N0AAAJkAAAACoAAAA7rr1AmHByZXAAAAm8AAAAVgAAAFaSoZr/eJxjYGTewTiBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHIHPQ/iyGKmZvBHyjMCJIDAPe9C2B4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/v8PUvCCAURLMELVAwEjG8OIBwBk5AavAAB4nGNgQANGDEbM3P83gjAAELQD4XicnVXZdtNWFJU8ZHASOmSgoA7X3DhQ68qEKRgwaSrFdiEdHAitBB2kDHTkncc+62uOQrtWH/m07n09JLR0rbYsls++R1tn2DrnRhwjKn0aiGvUoZKXA6msPZZK90lc13Uvj5UMBnFdthJPSZuonSRKat3sUC7xWOsqWSdYJ+PlIFZPVZ5noAziFB5lSUQbRBuplyZJ4onjJ4kWZxAfJUkgJaMQp9LIUEI1GsRS1aFM6dCr1xNx00DKRqMedVhU90PFJ8c1p9SsA0YqVznCFevVRr4bpwMve5DEOsGzrYcxHnisfpQqkIqR6cg/dkpOlIaBVHHUoVbi6DCTX/eRTCrNQKaMYkWl7oG43f102xYxPXQ6vi5KlUaqurnOKJrt0fGogygP2cbppNzQ2fbw5RlTVKtdcbPtQGYNXErJbHSfRAAdJlLj6QFONZwCqRn1R8XZ588BEslclKo8VTKHegOZMzt7cTHtbiersnCknwcyb3Z2452HQ6dXh3/R+hdM4cxHj+Jifj5C+lBqfiJOJKVGWMzyp4YfcVcgQrkxiAsXyuBThDl0RdrZZl3jtTH2hs/5SqlhPQna6KP4fgr9TiQrHGdRo/VInM1j13Wt3GdQS7W7Fzsyr0OVIu7vCwuuM+eEYZ4WC1VfnvneBTT/Bohn/EDeNIVL+5YpSrRvm6JMu2iKCu0SVKVdNsUU7YoppmnPmmKG9h1TzNKeMzLj/8vc55H7HN7xkJv2XeSmfQ+5ad9HbtoPkJtWITdtHblpLyA3rUZu2lWjOnYEGgZpF1IVQdA0svph3Fab9UDWjDR8aWDyLmLI+upER521tcofxX914gsHcmmip7siF5viLq/bFj483e6rj5pG3bDV+MaR8jAeRnocmtBZ+c3hv+1N3S6a7jKqMugBFUwKwABl7UAC0zrbCaT1mqf48gdgXIZ4zkpDtVSfO4am7+V5X/exOfG+x+3GLrdcd3kJWdYNcmP28N9SZKrrH+UtrVQnR6wrJ49VaxhDKrwour6SlHu0tRu/KKmy8l6U1srnk5CbPYMbQlu27mGwI0xpyiUeXlOlKD3UUo6yQyxvKco84JSLC1qGxLgOdQ9qa8TpoXoYGwshhqG0vRBwSCldFd+0ynfxHqtr2Oj4xRXh6XpyEhGf4ir7UfBU10b96A7avGbdMoMpVaqn+4xPsa/b9lFZaaSOsxe3VAfXNOsaORXTT+Rr4HRvOGjdAz1UfDRBI1U1x+jGKGM0ljXl3wR0MVZ+w2jVYvs93E+dpFWsuUuY7JsT9+C0u/0q+7WcW0bW/dcGvW3kip8jMb8tCvw7B2K3ZA3UO5OBGAvIWdAYxhYmdxiug23EbfY/Jqf/34aFRXJXOxq7eerD1ZNRJXfZ8rjLTXZZ16M2R9VOGvsIjS0PN+bY4XIstsRgQbb+wf8x7gF3aVEC4NDIZZiI2nShnurh6h6rsW04VxIBds2x43QAegAuQd8cu9bzCYD13CPnLsB9cgh2yCH4lByCz8i5BfA5OQRfkEMwIIdgl5w7AA/IIXhIDsEeOQSPyNkE+JIcgq/IIYjJIUjIuQ3wmByCJ+QQfE0OwTdGrk5k/pYH2QD6zqKbQKmdGhzaOGRGrk3Y+zxY9oFFZB9aROqRkesT6lMeLPV7i0j9wSJSfzRyY0L9iQdL/dkiUn+xiNRnxpeZIymvDp7zjg7+BJfqrV4AAAAAAQAB//8AD3icY2BkAALmJUwzGEQZZBwk+RkZGBmdGJgYmbIYgMwsoGSiiLgIs5A2owg7I5uSOqOaiT2jmZE8I5gQY17C/09BQEfg3yt+fh8gvYQxD0j68DOJiQn8U+DnZxQDcQUEljLmCwBpBgbG/3//b2SOZ+Zm4GEQcuAH2sblDLSEm8FFVJhJEGgLH6OSHpMdo5EcI3Nk0bEXJ/LYqvZ82VXHGFd6pKTkyCsQwQAAq+QkqAAAeJxjYGRgYADiw5VSsfH8Nl8ZuJlfAEUYzpvO6IXQCb7///7fyLyEmRvI5WBgAokCAFb/DJAAAAB4nGNgZGBgDvqfxRDF/IKB4f935iUMQBEUwAwAi5YFpgPoAAAD6AAAA1kAAAAAAAAAOABbAAEAAAADABYAAQAAAAAAAgAGABMAbgAAAC0JkQAAAAB4nHWQy2rCQBSG//HSi0JbWui2sypKabxgN4IgWHTTbqS4LTHGJBIzMhkFX6Pv0IfpS/RZ+puMpShNmMx3vjlz5mQAXOMbAvnzxJGzwBmjnAs4Rc9ykf7Zcon8YrmMKt4sn9C/W67gAYHlKm7wwQqidM5ogU/LAlfi0nIBF+LOcpH+0XKJ3LNcxq14tXxC71muYCJSy1Xci6+BWm11FIRG1gZ12W62OnK6lYoqStxYumsTKp3KvpyrxPhxrBxPLfc89oN17Op9uJ8nvk4jlciW09yrkZ/42jX+bFc93QRtY+ZyrtVSDm2GXGm18D3jhMasuo3G3/MwgMIKW2hEvKoQBhI12jrnNppooUOaMkMyM8+KkMBFTONizR1htpIy7nPMGSW0PjNisgOP3+WRH5MC7o9ZRR+tHsYT0u6MKPOSfTns7jBrREqyTDezs9/eU2x4WpvWcNeuS511JTE8qCF5H7u1BY1H72S3Ymi7aPD95/9+AN1fhEsAeJxjYGKAAC4G7ICZgYGRiZGZMzkjNTk7N7Eomy05syg5J5WBAQBE1QZBAABLuADIUlixAQGOWbkIAAgAYyCwASNEsAMjcLIEKAlFUkSyCgIHKrEGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAA) format('woff'); } .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before { font-family: 'Step'; content: '\e800'; /* '' */ } /******************************* Site Overrides *******************************/ .ui.steps { line-height: 1.6em; } .ui.steps a { -webkit-text-decoration: none; text-decoration: none; } .ui.steps a:hover { -webkit-text-decoration: none !important; text-decoration: none !important; color: #4A3041 !important; } /* Collections */ /*! * # Semantic UI - Breadcrumb * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Breadcrumb *******************************/ /*------------------- Breadcrumb --------------------*/ /* Coupling */ /*------------------- States --------------------*/ /* Packaged Theme */ /******************************* Breadcrumb *******************************/ /*------------------- Breadcrumb --------------------*/ /* Coupling */ /*------------------- States --------------------*/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Breadcrumb *******************************/ .ui.breadcrumb { line-height: 1; display: inline-block; margin: 0em 0em; vertical-align: middle; } .ui.breadcrumb:first-child { margin-top: 0em; } .ui.breadcrumb:last-child { margin-bottom: 0em; } /******************************* Content *******************************/ /* Divider */ .ui.breadcrumb .divider { display: inline-block; opacity: 0.7; margin: 0em 0.1875rem 0em; font-size: 0.9375em; color: rgba(0, 0, 0, 0.4); vertical-align: baseline; } /* Link */ .ui.breadcrumb a { color: #407330; } .ui.breadcrumb a:hover { color: #2f701b; } /* Icon Divider */ .ui.breadcrumb .icon.divider { font-size: 0.875em; vertical-align: baseline; } /* Section */ .ui.breadcrumb a.section { cursor: pointer; } .ui.breadcrumb .section { display: inline-block; margin: 0em; padding: 0em; } /* Loose Coupling */ .ui.breadcrumb.segment { display: inline-block; padding: 0.8125em 1em; } /******************************* States *******************************/ .ui.breadcrumb .active.section { font-weight: bold; } /******************************* Variations *******************************/ .ui.mini.breadcrumb { font-size: 0.8125rem; } .ui.tiny.breadcrumb { font-size: 0.875rem; } .ui.small.breadcrumb { font-size: 0.9375rem; } .ui.breadcrumb { font-size: 1rem; } .ui.large.breadcrumb { font-size: 1.125rem; } .ui.big.breadcrumb { font-size: 1.3125rem; } .ui.huge.breadcrumb { font-size: 1.4375rem; } .ui.massive.breadcrumb { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ .ui.breadcrumb a { color: var(--primary-light-color) !important; } .ui.breadcrumb a:hover { color: var(--primary-light-color) !important; -webkit-text-decoration: underline !important; text-decoration: underline !important; } /*! * # Semantic UI - Form * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Errored Input */ /* AutoFill */ /* Input Error */ /* Dropdown Error */ /* Focused Error */ /* Placeholder Error */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Packaged Theme */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Errored Input */ /* AutoFill */ /* Input Error */ /* Dropdown Error */ /* Focused Error */ /* Placeholder Error */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Elements *******************************/ /*-------------------- Form ---------------------*/ .ui.form { position: relative; max-width: 100%; } /*-------------------- Content ---------------------*/ .ui.form > p { margin: 1em 0em; } /*-------------------- Field ---------------------*/ .ui.form .field { clear: both; margin: 0em 0em 1em; } .ui.form .field:last-child, .ui.form .fields:last-child .field { margin-bottom: 0em; } .ui.form .fields .field { clear: both; margin: 0em; } /*-------------------- Labels ---------------------*/ .ui.form .field > label { display: block; margin: 0em 0em 0.25rem 0em; color: #4A3041; font-size: 0.9375em; font-weight: bold; text-transform: none; } /*-------------------- Standard Inputs ---------------------*/ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { width: 100%; vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button { height: 1.21428571em; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.58035714em 0.875em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #4A3041; border-radius: 0.25rem; box-shadow: 0em 0em 0em 0em transparent inset; transition: color 0.1s ease, border-color 0.1s ease; } /* Text Area */ .ui.form textarea { margin: 0em; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.6875em 0.875em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: #4A3041; border-radius: 0.25rem; box-shadow: 0em 0em 0em 0em transparent inset; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; line-height: 1.2857; resize: vertical; } .ui.form textarea:not([rows]) { height: 12em; min-height: 3em; max-height: 30em; } .ui.form textarea, .ui.form input[type="checkbox"] { vertical-align: top; } /*-------------------------- Input w/ attached Button ---------------------------*/ .ui.form input.attached { width: auto; } /*-------------------- Basic Select ---------------------*/ .ui.form select { display: block; height: auto; width: 100%; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.25rem; box-shadow: 0em 0em 0em 0em transparent inset; padding: 0.62em 0.875em; color: #4A3041; transition: color 0.1s ease, border-color 0.1s ease; } /*-------------------- Dropdown ---------------------*/ /* Block */ .ui.form .field > .selection.dropdown { width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { float: right; } /* Inline */ .ui.form .inline.fields .field > .selection.dropdown, .ui.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .ui.form .inline.field > .selection.dropdown > .dropdown.icon { float: none; } /*-------------------- UI Input ---------------------*/ /* Block */ .ui.form .field .ui.input, .ui.form .fields .field .ui.input, .ui.form .wide.field .ui.input { width: 100%; } /* Inline */ .ui.form .inline.fields .field:not(.wide) .ui.input, .ui.form .inline.field:not(.wide) .ui.input { width: auto; vertical-align: middle; } /* Auto Input */ .ui.form .fields .field .ui.input input, .ui.form .field .ui.input input { width: auto; } /* Full Width Input */ .ui.form .ten.fields .ui.input input, .ui.form .nine.fields .ui.input input, .ui.form .eight.fields .ui.input input, .ui.form .seven.fields .ui.input input, .ui.form .six.fields .ui.input input, .ui.form .five.fields .ui.input input, .ui.form .four.fields .ui.input input, .ui.form .three.fields .ui.input input, .ui.form .two.fields .ui.input input, .ui.form .wide.field .ui.input input { flex: 1 0 auto; width: 0px; } /*-------------------- Types of Messages ---------------------*/ .ui.form .success.message, .ui.form .warning.message, .ui.form .error.message { display: none; } /* Assumptions */ .ui.form .message:first-child { margin-top: 0px; } /*-------------------- Validation Prompt ---------------------*/ .ui.form .field .prompt.label { white-space: normal; background: #FFFFFF !important; border: 1px solid #E0B4B4 !important; color: #9F3A38 !important; } .ui.form .inline.fields .field .prompt, .ui.form .inline.field .prompt { vertical-align: top; margin: -0.25em 0em -0.5em 0.5em; } .ui.form .inline.fields .field .prompt:before, .ui.form .inline.field .prompt:before { border-width: 0px 0px 1px 1px; bottom: auto; right: auto; top: 50%; left: 0em; } /******************************* States *******************************/ /*-------------------- Autofilled ---------------------*/ .ui.form .field.field input:-webkit-autofill { box-shadow: 0px 0px 0px 100px #FFFFF0 inset !important; border-color: #E5DFA1 !important; } /* Focus */ .ui.form .field.field input:-webkit-autofill:focus { box-shadow: 0px 0px 0px 100px #FFFFF0 inset !important; border-color: #D5C315 !important; } /* Error */ .ui.form .error.error input:-webkit-autofill { box-shadow: 0px 0px 0px 100px #FFFAF0 inset !important; border-color: #E0B4B4 !important; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder { color: #ad809d; } .ui.form :-ms-input-placeholder { color: #ad809d !important; } .ui.form ::-moz-placeholder { color: #ad809d; } .ui.form :focus::-webkit-input-placeholder { color: #d5becd; } .ui.form :focus:-ms-input-placeholder { color: #d5becd !important; } .ui.form :focus::-moz-placeholder { color: #d5becd; } /* Error Placeholder */ .ui.form .error ::-webkit-input-placeholder { color: #e7bdbc; } .ui.form .error :-ms-input-placeholder { color: #e7bdbc !important; } .ui.form .error ::-moz-placeholder { color: #e7bdbc; } .ui.form .error :focus::-webkit-input-placeholder { color: #da9796; } .ui.form .error :focus:-ms-input-placeholder { color: #da9796 !important; } .ui.form .error :focus::-moz-placeholder { color: #da9796; } /*-------------------- Focus ---------------------*/ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.25rem; background: #FFFFFF; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.25rem; background: #FFFFFF; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } /*-------------------- Success ---------------------*/ /* On Form */ .ui.form.success .success.message:not(:empty) { display: block; } .ui.form.success .compact.success.message:not(:empty) { display: inline-block; } .ui.form.success .icon.success.message:not(:empty) { display: flex; } /*-------------------- Warning ---------------------*/ /* On Form */ .ui.form.warning .warning.message:not(:empty) { display: block; } .ui.form.warning .compact.warning.message:not(:empty) { display: inline-block; } .ui.form.warning .icon.warning.message:not(:empty) { display: flex; } /*-------------------- Error ---------------------*/ /* On Form */ .ui.form.error .error.message:not(:empty) { display: block; } .ui.form.error .compact.error.message:not(:empty) { display: inline-block; } .ui.form.error .icon.error.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.error .field label, .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .field.error .input { color: #9F3A38; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { border-color: #9F3A38; color: #FFFFFF; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="datetime-local"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="number"], .ui.form .fields.error .field input[type="password"], .ui.form .fields.error .field input[type="search"], .ui.form .fields.error .field input[type="tel"], .ui.form .fields.error .field input[type="time"], .ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="file"], .ui.form .fields.error .field input[type="url"], .ui.form .field.error textarea, .ui.form .field.error select, .ui.form .field.error input:not([type]), .ui.form .field.error input[type="date"], .ui.form .field.error input[type="datetime-local"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="number"], .ui.form .field.error input[type="password"], .ui.form .field.error input[type="search"], .ui.form .field.error input[type="tel"], .ui.form .field.error input[type="time"], .ui.form .field.error input[type="text"], .ui.form .field.error input[type="file"], .ui.form .field.error input[type="url"] { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; border-radius: ''; box-shadow: none; } .ui.form .field.error textarea:focus, .ui.form .field.error select:focus, .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="datetime-local"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="password"]:focus, .ui.form .field.error input[type="search"]:focus, .ui.form .field.error input[type="tel"]:focus, .ui.form .field.error input[type="time"]:focus, .ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="file"]:focus, .ui.form .field.error input[type="url"]:focus { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; -webkit-appearance: none; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Dropdown Error --------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item { background: #FFF6F6; color: #9F3A38; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu { border-color: #E0B4B4; } .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, .ui.form .field.error .ui.multiple.selection.dropdown > .label { background-color: #EACBCB; color: #9F3A38; } /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { background-color: #FBE7E7; } /* Selected */ .ui.form .fields.error .field .ui.dropdown .menu .selected.item, .ui.form .field.error .ui.dropdown .menu .selected.item { background-color: #FBE7E7; } /* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item { background-color: #FDCFCF !important; } /*-------------------- Checkbox Error ---------------------*/ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: #9F3A38; } .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { background: #FFF6F6; border-color: #E0B4B4; } .ui.form .fields.error .field .checkbox label:after, .ui.form .field.error .checkbox label:after, .ui.form .fields.error .field .checkbox .box:after, .ui.form .field.error .checkbox .box:after { color: #9F3A38; } /*-------------------- Disabled ---------------------*/ .ui.form .disabled.fields .field, .ui.form .disabled.field, .ui.form .field :disabled { pointer-events: none; opacity: 0.45; } .ui.form .field.disabled > label, .ui.form .fields.disabled > label { opacity: 0.45; } .ui.form .field.disabled :disabled { opacity: 1; } /*-------------- Loading ---------------*/ .ui.loading.form { position: relative; cursor: default; pointer-events: none; } .ui.loading.form:before { position: absolute; content: ''; top: 0%; left: 0%; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; z-index: 100; } .ui.loading.form:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0em 0em -1.5em; width: 3em; height: 3em; animation: form-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; visibility: visible; z-index: 101; } @keyframes form-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* Element Types *******************************/ /*-------------------- Required Field ---------------------*/ .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { margin: -0.2em 0em 0em 0.2em; content: '*'; color: #DB2828; } .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after { display: inline-block; vertical-align: top; } .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after { position: absolute; top: 0%; left: 100%; } /******************************* Variations *******************************/ /*-------------------- Inverted Colors ---------------------*/ .ui.inverted.form label, .ui.form .inverted.segment label, .ui.form .inverted.segment .ui.checkbox label, .ui.form .inverted.segment .ui.checkbox .box, .ui.inverted.form .ui.checkbox label, .ui.inverted.form .ui.checkbox .box, .ui.inverted.form .inline.fields > label, .ui.inverted.form .inline.fields .field > label, .ui.inverted.form .inline.fields .field > p, .ui.inverted.form .inline.field > label, .ui.inverted.form .inline.field > p { color: rgba(255, 255, 255, 0.9); } /* Inverted Field */ .ui.inverted.form input:not([type]), .ui.inverted.form input[type="date"], .ui.inverted.form input[type="datetime-local"], .ui.inverted.form input[type="email"], .ui.inverted.form input[type="number"], .ui.inverted.form input[type="password"], .ui.inverted.form input[type="search"], .ui.inverted.form input[type="tel"], .ui.inverted.form input[type="time"], .ui.inverted.form input[type="text"], .ui.inverted.form input[type="file"], .ui.inverted.form input[type="url"] { background: #FFFFFF; border-color: rgba(255, 255, 255, 0.1); color: #4A3041; box-shadow: none; } /*-------------------- Field Groups ---------------------*/ /* Grouped Vertically */ .ui.form .grouped.fields { display: block; margin: 0em 0em 1em; } .ui.form .grouped.fields:last-child { margin-bottom: 0em; } .ui.form .grouped.fields > label { margin: 0em 0em 0.25rem 0em; color: #4A3041; font-size: 0.9375em; font-weight: bold; text-transform: none; } .ui.form .grouped.fields .field, .ui.form .grouped.inline.fields .field { display: block; margin: 0.5em 0em; padding: 0em; } /*-------------------- Fields ---------------------*/ /* Split fields */ .ui.form .fields { display: flex; flex-direction: row; margin: 0em -0.5em 1em; } .ui.form .fields > .field { flex: 0 1 auto; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child { border-left: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field { width: 12.5%; } .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field { width: 11.11111111%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form .fields { flex-wrap: wrap; } .ui[class*="equal width"].form:not(.unstackable) .fields > .field, .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { width: 100% !important; margin: 0em 0em 1em; } } /* Sizing Combinations */ .ui.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .one.wide.field { width: 6.25% !important; } .ui.form .two.wide.field { width: 12.5% !important; } .ui.form .three.wide.field { width: 18.75% !important; } .ui.form .four.wide.field { width: 25% !important; } .ui.form .five.wide.field { width: 31.25% !important; } .ui.form .six.wide.field { width: 37.5% !important; } .ui.form .seven.wide.field { width: 43.75% !important; } .ui.form .eight.wide.field { width: 50% !important; } .ui.form .nine.wide.field { width: 56.25% !important; } .ui.form .ten.wide.field { width: 62.5% !important; } .ui.form .eleven.wide.field { width: 68.75% !important; } .ui.form .twelve.wide.field { width: 75% !important; } .ui.form .thirteen.wide.field { width: 81.25% !important; } .ui.form .fourteen.wide.field { width: 87.5% !important; } .ui.form .fifteen.wide.field { width: 93.75% !important; } .ui.form .sixteen.wide.field { width: 100% !important; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { width: 100% !important; } .ui.form .fields { margin-bottom: 0em; } } /*-------------------- Equal Width ---------------------*/ .ui[class*="equal width"].form .fields > .field, .ui.form [class*="equal width"].fields > .field { width: 100%; flex: 1 1 auto; } /*-------------------- Inline Fields ---------------------*/ .ui.form .inline.fields { margin: 0em 0em 1em; align-items: center; } .ui.form .inline.fields .field { margin: 0em; padding: 0em 1em 0em 0em; } /* Inline Label */ .ui.form .inline.fields > label, .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.field > label, .ui.form .inline.field > p { display: inline-block; width: auto; margin-top: 0em; margin-bottom: 0em; vertical-align: baseline; font-size: 0.9375em; font-weight: bold; color: #4A3041; text-transform: none; } /* Grouped Inline Label */ .ui.form .inline.fields > label { margin: 0.035714em 1em 0em 0em; } /* Inline Input */ .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.field > input, .ui.form .inline.field > select { display: inline-block; width: auto; margin-top: 0em; margin-bottom: 0em; vertical-align: middle; font-size: 1em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child { margin: 0em 0.875em 0em 0em; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child { margin: 0em; } /* Wide */ .ui.form .inline.fields .wide.field { display: flex; align-items: center; } .ui.form .inline.fields .wide.field > input, .ui.form .inline.fields .wide.field > select { width: 100%; } /*-------------------- Sizes ---------------------*/ .ui.mini.form { font-size: 0.8125rem; } .ui.tiny.form { font-size: 0.875rem; } .ui.small.form { font-size: 0.9375rem; } .ui.form { font-size: 1rem; } .ui.large.form { font-size: 1.125rem; } .ui.big.form { font-size: 1.3125rem; } .ui.huge.form { font-size: 1.4375rem; } .ui.massive.form { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Grid * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /******************************* Legacy *******************************/ /*-------------- Page ---------------*/ /* Legacy (DO NOT USE) */ /* Packaged Theme */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /******************************* Legacy *******************************/ /*-------------- Page ---------------*/ /* Legacy (DO NOT USE) */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ .ui.grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0em; } /*---------------------- Remove Gutters -----------------------*/ .ui.grid { margin-top: -1rem; margin-bottom: -1rem; margin-left: -1rem; margin-right: -1rem; } .ui.relaxed.grid { margin-left: -1.5rem; margin-right: -1.5rem; } .ui[class*="very relaxed"].grid { margin-left: -2.5rem; margin-right: -2.5rem; } /* Preserve Rows Spacing on Consecutive Grids */ .ui.grid + .grid { margin-top: 1rem; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column:not(.row), .ui.grid > .row > .column { position: relative; display: inline-block; width: 6.25%; padding-left: 1rem; padding-right: 1rem; vertical-align: top; } .ui.grid > * { padding-left: 1rem; padding-right: 1rem; } /*------------------- Rows --------------------*/ .ui.grid > .row { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: inherit; align-items: stretch; width: 100% !important; padding: 0rem; padding-top: 1rem; padding-bottom: 1rem; } /*------------------- Columns --------------------*/ /* Vertical padding when no rows */ .ui.grid > .column:not(.row) { padding-top: 1rem; padding-bottom: 1rem; } .ui.grid > .row > .column { margin-top: 0em; margin-bottom: 0em; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } /*------------------- Loose Coupling --------------------*/ /* Collapse Margin on Consecutive Grid */ .ui.grid > .ui.grid:first-child { margin-top: 0em; } .ui.grid > .ui.grid:last-child { margin-bottom: 0em; } /* Segment inside Aligned Grid */ .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .ui.aligned.grid .column > .segment:not(.compact):not(.attached) { width: 100%; } /* Align Dividers with Gutter */ .ui.grid .row + .ui.divider { flex-grow: 1; margin: 1rem 1rem; } .ui.grid .column + .ui.vertical.divider { height: calc(50% - (2rem / 2)); } /* Remove Border on Last Horizontal Segment */ .ui.grid > .row > .column:last-child > .horizontal.segment, .ui.grid > .column:last-child > .horizontal.segment { box-shadow: none; } /******************************* Variations *******************************/ /*----------------------- Page Grid -------------------------*/ @media only screen and (max-width: 767px) { .ui.page.grid { width: auto; padding-left: 0em; padding-right: 0em; margin-left: 0em; margin-right: 0em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 2em; padding-right: 2em; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 3%; padding-right: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 15%; padding-right: 15%; } } @media only screen and (min-width: 1920px) { .ui.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 23%; padding-right: 23%; } } /*------------------- Column Count --------------------*/ /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column:not(.row) { width: 100%; } .ui[class*="two column"].grid > .row > .column, .ui[class*="two column"].grid > .column:not(.row) { width: 50%; } .ui[class*="three column"].grid > .row > .column, .ui[class*="three column"].grid > .column:not(.row) { width: 33.33333333%; } .ui[class*="four column"].grid > .row > .column, .ui[class*="four column"].grid > .column:not(.row) { width: 25%; } .ui[class*="five column"].grid > .row > .column, .ui[class*="five column"].grid > .column:not(.row) { width: 20%; } .ui[class*="six column"].grid > .row > .column, .ui[class*="six column"].grid > .column:not(.row) { width: 16.66666667%; } .ui[class*="seven column"].grid > .row > .column, .ui[class*="seven column"].grid > .column:not(.row) { width: 14.28571429%; } .ui[class*="eight column"].grid > .row > .column, .ui[class*="eight column"].grid > .column:not(.row) { width: 12.5%; } .ui[class*="nine column"].grid > .row > .column, .ui[class*="nine column"].grid > .column:not(.row) { width: 11.11111111%; } .ui[class*="ten column"].grid > .row > .column, .ui[class*="ten column"].grid > .column:not(.row) { width: 10%; } .ui[class*="eleven column"].grid > .row > .column, .ui[class*="eleven column"].grid > .column:not(.row) { width: 9.09090909%; } .ui[class*="twelve column"].grid > .row > .column, .ui[class*="twelve column"].grid > .column:not(.row) { width: 8.33333333%; } .ui[class*="thirteen column"].grid > .row > .column, .ui[class*="thirteen column"].grid > .column:not(.row) { width: 7.69230769%; } .ui[class*="fourteen column"].grid > .row > .column, .ui[class*="fourteen column"].grid > .column:not(.row) { width: 7.14285714%; } .ui[class*="fifteen column"].grid > .row > .column, .ui[class*="fifteen column"].grid > .column:not(.row) { width: 6.66666667%; } .ui[class*="sixteen column"].grid > .row > .column, .ui[class*="sixteen column"].grid > .column:not(.row) { width: 6.25%; } /* Row Based Overrides */ .ui.grid > [class*="one column"].row > .column { width: 100% !important; } .ui.grid > [class*="two column"].row > .column { width: 50% !important; } .ui.grid > [class*="three column"].row > .column { width: 33.33333333% !important; } .ui.grid > [class*="four column"].row > .column { width: 25% !important; } .ui.grid > [class*="five column"].row > .column { width: 20% !important; } .ui.grid > [class*="six column"].row > .column { width: 16.66666667% !important; } .ui.grid > [class*="seven column"].row > .column { width: 14.28571429% !important; } .ui.grid > [class*="eight column"].row > .column { width: 12.5% !important; } .ui.grid > [class*="nine column"].row > .column { width: 11.11111111% !important; } .ui.grid > [class*="ten column"].row > .column { width: 10% !important; } .ui.grid > [class*="eleven column"].row > .column { width: 9.09090909% !important; } .ui.grid > [class*="twelve column"].row > .column { width: 8.33333333% !important; } .ui.grid > [class*="thirteen column"].row > .column { width: 7.69230769% !important; } .ui.grid > [class*="fourteen column"].row > .column { width: 7.14285714% !important; } .ui.grid > [class*="fifteen column"].row > .column { width: 6.66666667% !important; } .ui.grid > [class*="sixteen column"].row > .column { width: 6.25% !important; } /* Celled Page */ .ui.celled.page.grid { box-shadow: none; } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > [class*="one wide"].column, .ui.grid > .column.row > [class*="one wide"].column, .ui.grid > [class*="one wide"].column, .ui.column.grid > [class*="one wide"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide"].column, .ui.grid > .column.row > [class*="two wide"].column, .ui.grid > [class*="two wide"].column, .ui.column.grid > [class*="two wide"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide"].column, .ui.grid > .column.row > [class*="three wide"].column, .ui.grid > [class*="three wide"].column, .ui.column.grid > [class*="three wide"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide"].column, .ui.grid > .column.row > [class*="four wide"].column, .ui.grid > [class*="four wide"].column, .ui.column.grid > [class*="four wide"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide"].column, .ui.grid > .column.row > [class*="five wide"].column, .ui.grid > [class*="five wide"].column, .ui.column.grid > [class*="five wide"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide"].column, .ui.grid > .column.row > [class*="six wide"].column, .ui.grid > [class*="six wide"].column, .ui.column.grid > [class*="six wide"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide"].column, .ui.grid > .column.row > [class*="seven wide"].column, .ui.grid > [class*="seven wide"].column, .ui.column.grid > [class*="seven wide"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide"].column, .ui.grid > .column.row > [class*="eight wide"].column, .ui.grid > [class*="eight wide"].column, .ui.column.grid > [class*="eight wide"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide"].column, .ui.grid > .column.row > [class*="nine wide"].column, .ui.grid > [class*="nine wide"].column, .ui.column.grid > [class*="nine wide"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide"].column, .ui.grid > .column.row > [class*="ten wide"].column, .ui.grid > [class*="ten wide"].column, .ui.column.grid > [class*="ten wide"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide"].column, .ui.grid > .column.row > [class*="eleven wide"].column, .ui.grid > [class*="eleven wide"].column, .ui.column.grid > [class*="eleven wide"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide"].column, .ui.grid > .column.row > [class*="twelve wide"].column, .ui.grid > [class*="twelve wide"].column, .ui.column.grid > [class*="twelve wide"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide"].column, .ui.grid > .column.row > [class*="thirteen wide"].column, .ui.grid > [class*="thirteen wide"].column, .ui.column.grid > [class*="thirteen wide"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide"].column, .ui.grid > .column.row > [class*="fourteen wide"].column, .ui.grid > [class*="fourteen wide"].column, .ui.column.grid > [class*="fourteen wide"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide"].column, .ui.grid > .column.row > [class*="fifteen wide"].column, .ui.grid > [class*="fifteen wide"].column, .ui.column.grid > [class*="fifteen wide"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide"].column, .ui.grid > .column.row > [class*="sixteen wide"].column, .ui.grid > [class*="sixteen wide"].column, .ui.column.grid > [class*="sixteen wide"].column { width: 100% !important; } /*---------------------- Width per Device -----------------------*/ /* Mobile Sizing Combinations */ @media only screen and (min-width: 320px) and (max-width: 767px) { .ui.grid > .row > [class*="one wide mobile"].column, .ui.grid > .column.row > [class*="one wide mobile"].column, .ui.grid > [class*="one wide mobile"].column, .ui.column.grid > [class*="one wide mobile"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide mobile"].column, .ui.grid > .column.row > [class*="two wide mobile"].column, .ui.grid > [class*="two wide mobile"].column, .ui.column.grid > [class*="two wide mobile"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide mobile"].column, .ui.grid > .column.row > [class*="three wide mobile"].column, .ui.grid > [class*="three wide mobile"].column, .ui.column.grid > [class*="three wide mobile"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide mobile"].column, .ui.grid > .column.row > [class*="four wide mobile"].column, .ui.grid > [class*="four wide mobile"].column, .ui.column.grid > [class*="four wide mobile"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide mobile"].column, .ui.grid > .column.row > [class*="five wide mobile"].column, .ui.grid > [class*="five wide mobile"].column, .ui.column.grid > [class*="five wide mobile"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide mobile"].column, .ui.grid > .column.row > [class*="six wide mobile"].column, .ui.grid > [class*="six wide mobile"].column, .ui.column.grid > [class*="six wide mobile"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide mobile"].column, .ui.grid > .column.row > [class*="seven wide mobile"].column, .ui.grid > [class*="seven wide mobile"].column, .ui.column.grid > [class*="seven wide mobile"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide mobile"].column, .ui.grid > .column.row > [class*="eight wide mobile"].column, .ui.grid > [class*="eight wide mobile"].column, .ui.column.grid > [class*="eight wide mobile"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide mobile"].column, .ui.grid > .column.row > [class*="nine wide mobile"].column, .ui.grid > [class*="nine wide mobile"].column, .ui.column.grid > [class*="nine wide mobile"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide mobile"].column, .ui.grid > .column.row > [class*="ten wide mobile"].column, .ui.grid > [class*="ten wide mobile"].column, .ui.column.grid > [class*="ten wide mobile"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide mobile"].column, .ui.grid > .column.row > [class*="eleven wide mobile"].column, .ui.grid > [class*="eleven wide mobile"].column, .ui.column.grid > [class*="eleven wide mobile"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide mobile"].column, .ui.grid > .column.row > [class*="twelve wide mobile"].column, .ui.grid > [class*="twelve wide mobile"].column, .ui.column.grid > [class*="twelve wide mobile"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide mobile"].column, .ui.grid > .column.row > [class*="thirteen wide mobile"].column, .ui.grid > [class*="thirteen wide mobile"].column, .ui.column.grid > [class*="thirteen wide mobile"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide mobile"].column, .ui.grid > .column.row > [class*="fourteen wide mobile"].column, .ui.grid > [class*="fourteen wide mobile"].column, .ui.column.grid > [class*="fourteen wide mobile"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide mobile"].column, .ui.grid > .column.row > [class*="fifteen wide mobile"].column, .ui.grid > [class*="fifteen wide mobile"].column, .ui.column.grid > [class*="fifteen wide mobile"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide mobile"].column, .ui.grid > .column.row > [class*="sixteen wide mobile"].column, .ui.grid > [class*="sixteen wide mobile"].column, .ui.column.grid > [class*="sixteen wide mobile"].column { width: 100% !important; } } /* Tablet Sizing Combinations */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.grid > .row > [class*="one wide tablet"].column, .ui.grid > .column.row > [class*="one wide tablet"].column, .ui.grid > [class*="one wide tablet"].column, .ui.column.grid > [class*="one wide tablet"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide tablet"].column, .ui.grid > .column.row > [class*="two wide tablet"].column, .ui.grid > [class*="two wide tablet"].column, .ui.column.grid > [class*="two wide tablet"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide tablet"].column, .ui.grid > .column.row > [class*="three wide tablet"].column, .ui.grid > [class*="three wide tablet"].column, .ui.column.grid > [class*="three wide tablet"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide tablet"].column, .ui.grid > .column.row > [class*="four wide tablet"].column, .ui.grid > [class*="four wide tablet"].column, .ui.column.grid > [class*="four wide tablet"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide tablet"].column, .ui.grid > .column.row > [class*="five wide tablet"].column, .ui.grid > [class*="five wide tablet"].column, .ui.column.grid > [class*="five wide tablet"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide tablet"].column, .ui.grid > .column.row > [class*="six wide tablet"].column, .ui.grid > [class*="six wide tablet"].column, .ui.column.grid > [class*="six wide tablet"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide tablet"].column, .ui.grid > .column.row > [class*="seven wide tablet"].column, .ui.grid > [class*="seven wide tablet"].column, .ui.column.grid > [class*="seven wide tablet"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide tablet"].column, .ui.grid > .column.row > [class*="eight wide tablet"].column, .ui.grid > [class*="eight wide tablet"].column, .ui.column.grid > [class*="eight wide tablet"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide tablet"].column, .ui.grid > .column.row > [class*="nine wide tablet"].column, .ui.grid > [class*="nine wide tablet"].column, .ui.column.grid > [class*="nine wide tablet"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide tablet"].column, .ui.grid > .column.row > [class*="ten wide tablet"].column, .ui.grid > [class*="ten wide tablet"].column, .ui.column.grid > [class*="ten wide tablet"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide tablet"].column, .ui.grid > .column.row > [class*="eleven wide tablet"].column, .ui.grid > [class*="eleven wide tablet"].column, .ui.column.grid > [class*="eleven wide tablet"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide tablet"].column, .ui.grid > .column.row > [class*="twelve wide tablet"].column, .ui.grid > [class*="twelve wide tablet"].column, .ui.column.grid > [class*="twelve wide tablet"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide tablet"].column, .ui.grid > .column.row > [class*="thirteen wide tablet"].column, .ui.grid > [class*="thirteen wide tablet"].column, .ui.column.grid > [class*="thirteen wide tablet"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide tablet"].column, .ui.grid > .column.row > [class*="fourteen wide tablet"].column, .ui.grid > [class*="fourteen wide tablet"].column, .ui.column.grid > [class*="fourteen wide tablet"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide tablet"].column, .ui.grid > .column.row > [class*="fifteen wide tablet"].column, .ui.grid > [class*="fifteen wide tablet"].column, .ui.column.grid > [class*="fifteen wide tablet"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide tablet"].column, .ui.grid > .column.row > [class*="sixteen wide tablet"].column, .ui.grid > [class*="sixteen wide tablet"].column, .ui.column.grid > [class*="sixteen wide tablet"].column { width: 100% !important; } } /* Computer/Desktop Sizing Combinations */ @media only screen and (min-width: 992px) { .ui.grid > .row > [class*="one wide computer"].column, .ui.grid > .column.row > [class*="one wide computer"].column, .ui.grid > [class*="one wide computer"].column, .ui.column.grid > [class*="one wide computer"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide computer"].column, .ui.grid > .column.row > [class*="two wide computer"].column, .ui.grid > [class*="two wide computer"].column, .ui.column.grid > [class*="two wide computer"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide computer"].column, .ui.grid > .column.row > [class*="three wide computer"].column, .ui.grid > [class*="three wide computer"].column, .ui.column.grid > [class*="three wide computer"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide computer"].column, .ui.grid > .column.row > [class*="four wide computer"].column, .ui.grid > [class*="four wide computer"].column, .ui.column.grid > [class*="four wide computer"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide computer"].column, .ui.grid > .column.row > [class*="five wide computer"].column, .ui.grid > [class*="five wide computer"].column, .ui.column.grid > [class*="five wide computer"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide computer"].column, .ui.grid > .column.row > [class*="six wide computer"].column, .ui.grid > [class*="six wide computer"].column, .ui.column.grid > [class*="six wide computer"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide computer"].column, .ui.grid > .column.row > [class*="seven wide computer"].column, .ui.grid > [class*="seven wide computer"].column, .ui.column.grid > [class*="seven wide computer"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide computer"].column, .ui.grid > .column.row > [class*="eight wide computer"].column, .ui.grid > [class*="eight wide computer"].column, .ui.column.grid > [class*="eight wide computer"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide computer"].column, .ui.grid > .column.row > [class*="nine wide computer"].column, .ui.grid > [class*="nine wide computer"].column, .ui.column.grid > [class*="nine wide computer"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide computer"].column, .ui.grid > .column.row > [class*="ten wide computer"].column, .ui.grid > [class*="ten wide computer"].column, .ui.column.grid > [class*="ten wide computer"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide computer"].column, .ui.grid > .column.row > [class*="eleven wide computer"].column, .ui.grid > [class*="eleven wide computer"].column, .ui.column.grid > [class*="eleven wide computer"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide computer"].column, .ui.grid > .column.row > [class*="twelve wide computer"].column, .ui.grid > [class*="twelve wide computer"].column, .ui.column.grid > [class*="twelve wide computer"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide computer"].column, .ui.grid > .column.row > [class*="thirteen wide computer"].column, .ui.grid > [class*="thirteen wide computer"].column, .ui.column.grid > [class*="thirteen wide computer"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide computer"].column, .ui.grid > .column.row > [class*="fourteen wide computer"].column, .ui.grid > [class*="fourteen wide computer"].column, .ui.column.grid > [class*="fourteen wide computer"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide computer"].column, .ui.grid > .column.row > [class*="fifteen wide computer"].column, .ui.grid > [class*="fifteen wide computer"].column, .ui.column.grid > [class*="fifteen wide computer"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide computer"].column, .ui.grid > .column.row > [class*="sixteen wide computer"].column, .ui.grid > [class*="sixteen wide computer"].column, .ui.column.grid > [class*="sixteen wide computer"].column { width: 100% !important; } } /* Large Monitor Sizing Combinations */ @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui.grid > .row > [class*="one wide large screen"].column, .ui.grid > .column.row > [class*="one wide large screen"].column, .ui.grid > [class*="one wide large screen"].column, .ui.column.grid > [class*="one wide large screen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide large screen"].column, .ui.grid > .column.row > [class*="two wide large screen"].column, .ui.grid > [class*="two wide large screen"].column, .ui.column.grid > [class*="two wide large screen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide large screen"].column, .ui.grid > .column.row > [class*="three wide large screen"].column, .ui.grid > [class*="three wide large screen"].column, .ui.column.grid > [class*="three wide large screen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide large screen"].column, .ui.grid > .column.row > [class*="four wide large screen"].column, .ui.grid > [class*="four wide large screen"].column, .ui.column.grid > [class*="four wide large screen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide large screen"].column, .ui.grid > .column.row > [class*="five wide large screen"].column, .ui.grid > [class*="five wide large screen"].column, .ui.column.grid > [class*="five wide large screen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide large screen"].column, .ui.grid > .column.row > [class*="six wide large screen"].column, .ui.grid > [class*="six wide large screen"].column, .ui.column.grid > [class*="six wide large screen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide large screen"].column, .ui.grid > .column.row > [class*="seven wide large screen"].column, .ui.grid > [class*="seven wide large screen"].column, .ui.column.grid > [class*="seven wide large screen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide large screen"].column, .ui.grid > .column.row > [class*="eight wide large screen"].column, .ui.grid > [class*="eight wide large screen"].column, .ui.column.grid > [class*="eight wide large screen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide large screen"].column, .ui.grid > .column.row > [class*="nine wide large screen"].column, .ui.grid > [class*="nine wide large screen"].column, .ui.column.grid > [class*="nine wide large screen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide large screen"].column, .ui.grid > .column.row > [class*="ten wide large screen"].column, .ui.grid > [class*="ten wide large screen"].column, .ui.column.grid > [class*="ten wide large screen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide large screen"].column, .ui.grid > .column.row > [class*="eleven wide large screen"].column, .ui.grid > [class*="eleven wide large screen"].column, .ui.column.grid > [class*="eleven wide large screen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide large screen"].column, .ui.grid > .column.row > [class*="twelve wide large screen"].column, .ui.grid > [class*="twelve wide large screen"].column, .ui.column.grid > [class*="twelve wide large screen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide large screen"].column, .ui.grid > .column.row > [class*="thirteen wide large screen"].column, .ui.grid > [class*="thirteen wide large screen"].column, .ui.column.grid > [class*="thirteen wide large screen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide large screen"].column, .ui.grid > .column.row > [class*="fourteen wide large screen"].column, .ui.grid > [class*="fourteen wide large screen"].column, .ui.column.grid > [class*="fourteen wide large screen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide large screen"].column, .ui.grid > .column.row > [class*="fifteen wide large screen"].column, .ui.grid > [class*="fifteen wide large screen"].column, .ui.column.grid > [class*="fifteen wide large screen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide large screen"].column, .ui.grid > .column.row > [class*="sixteen wide large screen"].column, .ui.grid > [class*="sixteen wide large screen"].column, .ui.column.grid > [class*="sixteen wide large screen"].column { width: 100% !important; } } /* Widescreen Sizing Combinations */ @media only screen and (min-width: 1920px) { .ui.grid > .row > [class*="one wide widescreen"].column, .ui.grid > .column.row > [class*="one wide widescreen"].column, .ui.grid > [class*="one wide widescreen"].column, .ui.column.grid > [class*="one wide widescreen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide widescreen"].column, .ui.grid > .column.row > [class*="two wide widescreen"].column, .ui.grid > [class*="two wide widescreen"].column, .ui.column.grid > [class*="two wide widescreen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide widescreen"].column, .ui.grid > .column.row > [class*="three wide widescreen"].column, .ui.grid > [class*="three wide widescreen"].column, .ui.column.grid > [class*="three wide widescreen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide widescreen"].column, .ui.grid > .column.row > [class*="four wide widescreen"].column, .ui.grid > [class*="four wide widescreen"].column, .ui.column.grid > [class*="four wide widescreen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide widescreen"].column, .ui.grid > .column.row > [class*="five wide widescreen"].column, .ui.grid > [class*="five wide widescreen"].column, .ui.column.grid > [class*="five wide widescreen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide widescreen"].column, .ui.grid > .column.row > [class*="six wide widescreen"].column, .ui.grid > [class*="six wide widescreen"].column, .ui.column.grid > [class*="six wide widescreen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide widescreen"].column, .ui.grid > .column.row > [class*="seven wide widescreen"].column, .ui.grid > [class*="seven wide widescreen"].column, .ui.column.grid > [class*="seven wide widescreen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide widescreen"].column, .ui.grid > .column.row > [class*="eight wide widescreen"].column, .ui.grid > [class*="eight wide widescreen"].column, .ui.column.grid > [class*="eight wide widescreen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide widescreen"].column, .ui.grid > .column.row > [class*="nine wide widescreen"].column, .ui.grid > [class*="nine wide widescreen"].column, .ui.column.grid > [class*="nine wide widescreen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide widescreen"].column, .ui.grid > .column.row > [class*="ten wide widescreen"].column, .ui.grid > [class*="ten wide widescreen"].column, .ui.column.grid > [class*="ten wide widescreen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide widescreen"].column, .ui.grid > .column.row > [class*="eleven wide widescreen"].column, .ui.grid > [class*="eleven wide widescreen"].column, .ui.column.grid > [class*="eleven wide widescreen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide widescreen"].column, .ui.grid > .column.row > [class*="twelve wide widescreen"].column, .ui.grid > [class*="twelve wide widescreen"].column, .ui.column.grid > [class*="twelve wide widescreen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide widescreen"].column, .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, .ui.grid > [class*="thirteen wide widescreen"].column, .ui.column.grid > [class*="thirteen wide widescreen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide widescreen"].column, .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, .ui.grid > [class*="fourteen wide widescreen"].column, .ui.column.grid > [class*="fourteen wide widescreen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide widescreen"].column, .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, .ui.grid > [class*="fifteen wide widescreen"].column, .ui.column.grid > [class*="fifteen wide widescreen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide widescreen"].column, .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, .ui.grid > [class*="sixteen wide widescreen"].column, .ui.column.grid > [class*="sixteen wide widescreen"].column { width: 100% !important; } } /*---------------------- Centered -----------------------*/ .ui.centered.grid, .ui.centered.grid > .row, .ui.grid > .centered.row { text-align: center; justify-content: center; } .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), .ui.centered.grid > .row > .column:not(.aligned):not(.justified), .ui.grid .centered.row > .column:not(.aligned):not(.justified) { text-align: left; } .ui.grid > .centered.column, .ui.grid > .row > .centered.column { display: block; margin-left: auto; margin-right: auto; } /*---------------------- Relaxed -----------------------*/ .ui.relaxed.grid > .column:not(.row), .ui.relaxed.grid > .row > .column, .ui.grid > .relaxed.row > .column { padding-left: 1.5rem; padding-right: 1.5rem; } .ui[class*="very relaxed"].grid > .column:not(.row), .ui[class*="very relaxed"].grid > .row > .column, .ui.grid > [class*="very relaxed"].row > .column { padding-left: 2.5rem; padding-right: 2.5rem; } /* Coupling with UI Divider */ .ui.relaxed.grid .row + .ui.divider, .ui.grid .relaxed.row + .ui.divider { margin-left: 1.5rem; margin-right: 1.5rem; } .ui[class*="very relaxed"].grid .row + .ui.divider, .ui.grid [class*="very relaxed"].row + .ui.divider { margin-left: 2.5rem; margin-right: 2.5rem; } /*---------------------- Padded -----------------------*/ .ui.padded.grid:not(.vertically):not(.horizontally) { margin: 0em !important; } [class*="horizontally padded"].ui.grid { margin-left: 0em !important; margin-right: 0em !important; } [class*="vertically padded"].ui.grid { margin-top: 0em !important; margin-bottom: 0em !important; } /*---------------------- "Floated" -----------------------*/ .ui.grid [class*="left floated"].column { margin-right: auto; } .ui.grid [class*="right floated"].column { margin-left: auto; } /*---------------------- Divided -----------------------*/ .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .ui.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } /* Swap from padding to margin on columns to have dividers align */ .ui[class*="vertically divided"].grid > .column:not(.row), .ui[class*="vertically divided"].grid > .row > .column { margin-top: 1rem; margin-bottom: 1rem; padding-top: 0rem; padding-bottom: 0rem; } .ui[class*="vertically divided"].grid > .row { margin-top: 0em; margin-bottom: 0em; } /* No divider on first column on row */ .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } /* No space on top of first row */ .ui[class*="vertically divided"].grid > .row:first-child > .column { margin-top: 0em; } /* Divided Row */ .ui.grid > .divided.row > .column { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid > .divided.row > .column:first-child { box-shadow: none; } /* Vertically Divided */ .ui[class*="vertically divided"].grid > .row { position: relative; } .ui[class*="vertically divided"].grid > .row:before { position: absolute; content: ""; top: 0em; left: 0px; width: calc(100% - 2rem); height: 1px; margin: 0% 1rem; box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } /* Padded Horizontally Divided */ [class*="horizontally padded"].ui.divided.grid, .ui.padded.divided.grid:not(.vertically):not(.horizontally) { width: 100%; } /* First Row Vertically Divided */ .ui[class*="vertically divided"].grid > .row:first-child:before { box-shadow: none; } /* Inverted Divided */ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1); } .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } .ui.inverted[class*="vertically divided"].grid > .row:before { box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1); } /* Relaxed */ .ui.relaxed[class*="vertically divided"].grid > .row:before { margin-left: 1.5rem; margin-right: 1.5rem; width: calc(100% - 3rem); } .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { margin-left: 2.5rem; margin-right: 2.5rem; width: calc(100% - 5rem); } /*---------------------- Celled -----------------------*/ .ui.celled.grid { width: 100%; margin: 1em 0em; box-shadow: 0px 0px 0px 1px #D4D4D5; } .ui.celled.grid > .row { width: 100% !important; margin: 0em; padding: 0em; box-shadow: 0px -1px 0px 0px #D4D4D5; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui.celled.grid > .column:first-child, .ui.celled.grid > .row > .column:first-child { box-shadow: none; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column { padding: 1em; } .ui.relaxed.celled.grid > .column:not(.row), .ui.relaxed.celled.grid > .row > .column { padding: 1.5em; } .ui[class*="very relaxed"].celled.grid > .column:not(.row), .ui[class*="very relaxed"].celled.grid > .row > .column { padding: 2em; } /* Internally Celled */ .ui[class*="internally celled"].grid { box-shadow: none; margin: 0em; } .ui[class*="internally celled"].grid > .row:first-child { box-shadow: none; } .ui[class*="internally celled"].grid > .row > .column:first-child { box-shadow: none; } /*---------------------- Vertically Aligned -----------------------*/ /* Top Aligned */ .ui[class*="top aligned"].grid > .column:not(.row), .ui[class*="top aligned"].grid > .row > .column, .ui.grid > [class*="top aligned"].row > .column, .ui.grid > [class*="top aligned"].column:not(.row), .ui.grid > .row > [class*="top aligned"].column { flex-direction: column; vertical-align: top; align-self: flex-start !important; } /* Middle Aligned */ .ui[class*="middle aligned"].grid > .column:not(.row), .ui[class*="middle aligned"].grid > .row > .column, .ui.grid > [class*="middle aligned"].row > .column, .ui.grid > [class*="middle aligned"].column:not(.row), .ui.grid > .row > [class*="middle aligned"].column { flex-direction: column; vertical-align: middle; align-self: center !important; } /* Bottom Aligned */ .ui[class*="bottom aligned"].grid > .column:not(.row), .ui[class*="bottom aligned"].grid > .row > .column, .ui.grid > [class*="bottom aligned"].row > .column, .ui.grid > [class*="bottom aligned"].column:not(.row), .ui.grid > .row > [class*="bottom aligned"].column { flex-direction: column; vertical-align: bottom; align-self: flex-end !important; } /* Stretched */ .ui.stretched.grid > .row > .column, .ui.stretched.grid > .column, .ui.grid > .stretched.row > .column, .ui.grid > .stretched.column:not(.row), .ui.grid > .row > .stretched.column { display: inline-flex !important; align-self: stretch; flex-direction: column; } .ui.stretched.grid > .row > .column > *, .ui.stretched.grid > .column > *, .ui.grid > .stretched.row > .column > *, .ui.grid > .stretched.column:not(.row) > *, .ui.grid > .row > .stretched.column > * { flex-grow: 1; } /*---------------------- Horizontally Centered -----------------------*/ /* Left Aligned */ .ui[class*="left aligned"].grid > .column, .ui[class*="left aligned"].grid > .row > .column, .ui.grid > [class*="left aligned"].row > .column, .ui.grid > [class*="left aligned"].column.column, .ui.grid > .row > [class*="left aligned"].column.column { text-align: left; align-self: inherit; } /* Center Aligned */ .ui[class*="center aligned"].grid > .column, .ui[class*="center aligned"].grid > .row > .column, .ui.grid > [class*="center aligned"].row > .column, .ui.grid > [class*="center aligned"].column.column, .ui.grid > .row > [class*="center aligned"].column.column { text-align: center; align-self: inherit; } .ui[class*="center aligned"].grid { justify-content: center; } /* Right Aligned */ .ui[class*="right aligned"].grid > .column, .ui[class*="right aligned"].grid > .row > .column, .ui.grid > [class*="right aligned"].row > .column, .ui.grid > [class*="right aligned"].column.column, .ui.grid > .row > [class*="right aligned"].column.column { text-align: right; align-self: inherit; } /* Justified */ .ui.justified.grid > .column, .ui.justified.grid > .row > .column, .ui.grid > .justified.row > .column, .ui.grid > .justified.column.column, .ui.grid > .row > .justified.column.column { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /*---------------------- Colored -----------------------*/ .ui.grid > .row > .red.column, .ui.grid > .row > .orange.column, .ui.grid > .row > .yellow.column, .ui.grid > .row > .olive.column, .ui.grid > .row > .green.column, .ui.grid > .row > .teal.column, .ui.grid > .row > .blue.column, .ui.grid > .row > .violet.column, .ui.grid > .row > .purple.column, .ui.grid > .row > .pink.column, .ui.grid > .row > .brown.column, .ui.grid > .row > .grey.column, .ui.grid > .row > .black.column { margin-top: -1rem; margin-bottom: -1rem; padding-top: 1rem; padding-bottom: 1rem; } /* Red */ .ui.grid > .red.row, .ui.grid > .red.column, .ui.grid > .row > .red.column { background-color: #DB2828 !important; color: #FFFFFF; } /* Orange */ .ui.grid > .orange.row, .ui.grid > .orange.column, .ui.grid > .row > .orange.column { background-color: #F2711C !important; color: #FFFFFF; } /* Yellow */ .ui.grid > .yellow.row, .ui.grid > .yellow.column, .ui.grid > .row > .yellow.column { background-color: #FBBD08 !important; color: #FFFFFF; } /* Olive */ .ui.grid > .olive.row, .ui.grid > .olive.column, .ui.grid > .row > .olive.column { background-color: #B5CC18 !important; color: #FFFFFF; } /* Green */ .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column { background-color: #21BA45 !important; color: #FFFFFF; } /* Teal */ .ui.grid > .teal.row, .ui.grid > .teal.column, .ui.grid > .row > .teal.column { background-color: #00B5AD !important; color: #FFFFFF; } /* Blue */ .ui.grid > .blue.row, .ui.grid > .blue.column, .ui.grid > .row > .blue.column { background-color: #2185D0 !important; color: #FFFFFF; } /* Violet */ .ui.grid > .violet.row, .ui.grid > .violet.column, .ui.grid > .row > .violet.column { background-color: #6435C9 !important; color: #FFFFFF; } /* Purple */ .ui.grid > .purple.row, .ui.grid > .purple.column, .ui.grid > .row > .purple.column { background-color: #A333C8 !important; color: #FFFFFF; } /* Pink */ .ui.grid > .pink.row, .ui.grid > .pink.column, .ui.grid > .row > .pink.column { background-color: #E03997 !important; color: #FFFFFF; } /* Brown */ .ui.grid > .brown.row, .ui.grid > .brown.column, .ui.grid > .row > .brown.column { background-color: #A5673F !important; color: #FFFFFF; } /* Grey */ .ui.grid > .grey.row, .ui.grid > .grey.column, .ui.grid > .row > .grey.column { background-color: #767676 !important; color: #FFFFFF; } /* Black */ .ui.grid > .black.row, .ui.grid > .black.column, .ui.grid > .row > .black.column { background-color: #1B1C1D !important; color: #FFFFFF; } /*---------------------- Equal Width -----------------------*/ .ui[class*="equal width"].grid > .column:not(.row), .ui[class*="equal width"].grid > .row > .column, .ui.grid > [class*="equal width"].row > .column { display: inline-block; flex-grow: 1; } .ui[class*="equal width"].grid > .wide.column, .ui[class*="equal width"].grid > .row > .wide.column, .ui.grid > [class*="equal width"].row > .wide.column { flex-grow: 0; } /*---------------------- Reverse -----------------------*/ /* Mobile */ @media only screen and (max-width: 767px) { .ui[class*="mobile reversed"].grid, .ui[class*="mobile reversed"].grid > .row, .ui.grid > [class*="mobile reversed"].row { flex-direction: row-reverse; } .ui[class*="mobile vertically reversed"].grid, .ui.stackable[class*="mobile reversed"] { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui[class*="tablet reversed"].grid, .ui[class*="tablet reversed"].grid > .row, .ui.grid > [class*="tablet reversed"].row { flex-direction: row-reverse; } .ui[class*="tablet vertically reversed"].grid { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /* Computer */ @media only screen and (min-width: 992px) { .ui[class*="computer reversed"].grid, .ui[class*="computer reversed"].grid > .row, .ui.grid > [class*="computer reversed"].row { flex-direction: row-reverse; } .ui[class*="computer vertically reversed"].grid { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /*------------------- Doubling --------------------*/ /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.doubling.grid { width: auto; } .ui.grid > .doubling.row, .ui.doubling.grid > .row { margin: 0em !important; padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column { display: inline-block !important; padding-top: 1rem !important; padding-bottom: 1rem !important; box-shadow: none !important; margin: 0em; } .ui[class*="two column"].doubling.grid > .row > .column, .ui[class*="two column"].doubling.grid > .column:not(.row), .ui.grid > [class*="two column"].doubling.row.row > .column { width: 100% !important; } .ui[class*="three column"].doubling.grid > .row > .column, .ui[class*="three column"].doubling.grid > .column:not(.row), .ui.grid > [class*="three column"].doubling.row.row > .column { width: 50% !important; } .ui[class*="four column"].doubling.grid > .row > .column, .ui[class*="four column"].doubling.grid > .column:not(.row), .ui.grid > [class*="four column"].doubling.row.row > .column { width: 50% !important; } .ui[class*="five column"].doubling.grid > .row > .column, .ui[class*="five column"].doubling.grid > .column:not(.row), .ui.grid > [class*="five column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="six column"].doubling.grid > .row > .column, .ui[class*="six column"].doubling.grid > .column:not(.row), .ui.grid > [class*="six column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="seven column"].doubling.grid > .row > .column, .ui[class*="seven column"].doubling.grid > .column:not(.row), .ui.grid > [class*="seven column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="eight column"].doubling.grid > .row > .column, .ui[class*="eight column"].doubling.grid > .column:not(.row), .ui.grid > [class*="eight column"].doubling.row.row > .column { width: 25% !important; } .ui[class*="nine column"].doubling.grid > .row > .column, .ui[class*="nine column"].doubling.grid > .column:not(.row), .ui.grid > [class*="nine column"].doubling.row.row > .column { width: 25% !important; } .ui[class*="ten column"].doubling.grid > .row > .column, .ui[class*="ten column"].doubling.grid > .column:not(.row), .ui.grid > [class*="ten column"].doubling.row.row > .column { width: 20% !important; } .ui[class*="eleven column"].doubling.grid > .row > .column, .ui[class*="eleven column"].doubling.grid > .column:not(.row), .ui.grid > [class*="eleven column"].doubling.row.row > .column { width: 20% !important; } .ui[class*="twelve column"].doubling.grid > .row > .column, .ui[class*="twelve column"].doubling.grid > .column:not(.row), .ui.grid > [class*="twelve column"].doubling.row.row > .column { width: 16.66666667% !important; } .ui[class*="thirteen column"].doubling.grid > .row > .column, .ui[class*="thirteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="thirteen column"].doubling.row.row > .column { width: 16.66666667% !important; } .ui[class*="fourteen column"].doubling.grid > .row > .column, .ui[class*="fourteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="fourteen column"].doubling.row.row > .column { width: 14.28571429% !important; } .ui[class*="fifteen column"].doubling.grid > .row > .column, .ui[class*="fifteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="fifteen column"].doubling.row.row > .column { width: 14.28571429% !important; } .ui[class*="sixteen column"].doubling.grid > .row > .column, .ui[class*="sixteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="sixteen column"].doubling.row.row > .column { width: 12.5% !important; } } /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.grid > .doubling.row, .ui.doubling.grid > .row { margin: 0em !important; padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column { padding-top: 1rem !important; padding-bottom: 1rem !important; margin: 0em !important; box-shadow: none !important; } .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { width: 100% !important; } .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.grid { width: auto; margin-left: 0em !important; margin-right: 0em !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column:not(.row), .ui.grid > .stackable.stackable.row > .column { width: 100% !important; margin: 0em 0em !important; box-shadow: none !important; padding: 1rem 1rem !important; } .ui.stackable.grid:not(.vertically) > .row { margin: 0em; padding: 0em; } /* Coupling */ .ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .row > .column { padding-left: 0em !important; padding-right: 0em !important; } /* Don't pad inside segment or nested grid */ .ui.grid .ui.stackable.grid, .ui.segment:not(.vertical) .ui.stackable.page.grid { margin-left: -1rem !important; margin-right: -1rem !important; } /* Divided Stackable */ .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:not(.row):first-child, .ui.stackable.celled.grid > .column:not(.row):first-child { border-top: none !important; } .ui.inverted.stackable.celled.grid > .column:not(.row), .ui.inverted.stackable.divided.grid > .column:not(.row), .ui.inverted.stackable.celled.grid > .row > .column, .ui.inverted.stackable.divided.grid > .row > .column { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.stackable.celled.grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.celled.grid > .row > .column, .ui.stackable.divided:not(.vertically).grid > .row > .column { border-top: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } .ui.stackable.celled.grid > .row { box-shadow: none !important; } .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .row > .column { padding-left: 0em !important; padding-right: 0em !important; } } /*---------------------- Only (Device) -----------------------*/ /* These include arbitrary class repetitions for forced specificity */ /* Mobile Only Hide */ @media only screen and (max-width: 767px) { .ui[class*="tablet only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Tablet Only Hide */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui[class*="mobile only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Computer Only Hide */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Large Screen Only Hide */ @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Widescreen Only Hide */ @media only screen and (min-width: 1920px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* * # Semantic - Menu * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /* Packaged Theme */ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Menu ---------------*/ .ui.menu { display: flex; margin: 1rem 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; background: #FFFFFF; font-weight: normal; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.25rem; min-height: 2.875em; } .ui.menu:after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; } .ui.menu:first-child { margin-top: 0rem; } .ui.menu:last-child { margin-bottom: 0rem; } /*-------------- Sub-Menu ---------------*/ .ui.menu .menu { margin: 0em; } .ui.menu:not(.vertical) > .menu { display: flex; } /*-------------- Item ---------------*/ .ui.menu:not(.vertical) .item { display: flex; align-items: center; } .ui.menu .item { position: relative; vertical-align: middle; line-height: 1; -webkit-text-decoration: none; text-decoration: none; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; -webkit-user-select: none; user-select: none; background: none; padding: 0.9375em 1.125em; text-transform: none; color: #4A3041; font-weight: normal; transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; } .ui.menu > .item:first-child { border-radius: 0.25rem 0px 0px 0.25rem; } /* Border */ .ui.menu .item:before { position: absolute; content: ''; top: 0%; right: 0px; height: 100%; width: 1px; background: rgba(34, 36, 38, 0.1); } /*-------------- Text Content ---------------*/ .ui.menu .text.item > *, .ui.menu .item > a:not(.ui), .ui.menu .item > p:only-child { -webkit-user-select: text; user-select: text; line-height: 1.3; } .ui.menu .item > p:first-child { margin-top: 0; } .ui.menu .item > p:last-child { margin-bottom: 0; } /*-------------- Icons ---------------*/ .ui.menu .item > i.icon { opacity: 0.9; float: none; margin: 0em 0.3125em 0em 0em; } /*-------------- Button ---------------*/ .ui.menu:not(.vertical) .item > .button { position: relative; top: 0em; margin: -0.5em 0em; padding-bottom: 0.8125em; padding-top: 0.8125em; font-size: 1em; } /*---------------- Grid / Container -----------------*/ .ui.menu > .grid, .ui.menu > .container { display: flex; align-items: inherit; flex-direction: inherit; } /*-------------- Inputs ---------------*/ .ui.menu .item > .input { width: 100%; } .ui.menu:not(.vertical) .item > .input { position: relative; top: 0em; margin: -0.5em 0em; } .ui.menu .item > .input input { font-size: 1em; padding-top: 0.5em; padding-bottom: 0.5em; } /*-------------- Header ---------------*/ .ui.menu .header.item, .ui.vertical.menu .header.item { margin: 0em; background: ''; text-transform: normal; font-weight: bold; } .ui.vertical.menu .item > .header:not(.ui) { margin: 0em 0em 0.5em; font-size: 1em; font-weight: bold; } /*-------------- Dropdowns ---------------*/ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0em; float: right; margin: 0em 0em 0em 1em; } /* Menu */ .ui.menu .dropdown.item .menu { min-width: calc(100% - 1px); border-radius: 0em 0em 0.25rem 0.25rem; background: #FFFFFF; margin: 0em 0px 0px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); flex-direction: column !important; } /* Menu Items */ .ui.menu .ui.dropdown .menu > .item { margin: 0; text-align: left; font-size: 1em !important; padding: 0.8125em 1.125em !important; background: transparent !important; color: #4A3041 !important; text-transform: none !important; font-weight: normal !important; box-shadow: none !important; transition: none !important; } .ui.menu .ui.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .selected.item { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .active.item { background: rgba(0, 0, 0, 0.03) !important; font-weight: bold !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { display: block; } .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { display: inline-block; font-size: 1em !important; float: none; margin: 0em 0.75em 0em 0em !important; } /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, .ui.text.menu .dropdown.item > .menu { border-radius: 0.25rem; margin-top: 0.3125em; } /* Pointing */ .ui.menu .pointing.dropdown.item .menu { margin-top: 0.75em; } /* Inverted */ .ui.inverted.menu .search.dropdown.item > .search, .ui.inverted.menu .search.dropdown.item > .text { color: rgba(255, 255, 255, 0.9); } /* Vertical */ .ui.vertical.menu .dropdown.item > .icon { float: right; content: "\f0da"; margin-left: 1em; } .ui.vertical.menu .dropdown.item .menu { left: 100%; min-width: 0; margin: 0em 0em 0em 0em; box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0.25rem 0.25rem 0.25rem; } .ui.vertical.menu .dropdown.item.upward .menu { bottom: 0; } .ui.vertical.menu .dropdown.item:not(.upward) .menu { top: 0; } .ui.vertical.menu .active.dropdown.item { border-top-right-radius: 0em; border-bottom-right-radius: 0em; } .ui.vertical.menu .dropdown.active.item { box-shadow: none; } /* Evenly Divided */ .ui.item.menu .dropdown .menu .item { width: 100%; } /*-------------- Labels ---------------*/ .ui.menu .item > .label { background: #999999; color: #FFFFFF; margin-left: 1em; padding: 0.3em 0.8125em; } .ui.vertical.menu .item > .label { background: #999999; color: #FFFFFF; margin-top: -0.15em; margin-bottom: -0.15em; padding: 0.3em 0.8125em; } .ui.menu .item > .floating.label { padding: 0.3em 0.8125em; } /*-------------- Images ---------------*/ .ui.menu .item > img:not(.ui) { display: inline-block; vertical-align: middle; margin: -0.3em 0em; width: 2.5em; } .ui.vertical.menu .item > img:not(.ui):only-child { display: block; max-width: 100%; width: auto; } /******************************* Coupling *******************************/ /*-------------- List ---------------*/ /* Menu divider shouldnt apply */ .ui.menu .list .item:before { background: none !important; } /*-------------- Sidebar ---------------*/ /* Show vertical dividers below last */ .ui.vertical.sidebar.menu > .item:first-child:before { display: block !important; } .ui.vertical.sidebar.menu > .item::before { top: auto; bottom: 0px; } /*-------------- Container ---------------*/ @media only screen and (max-width: 767px) { .ui.menu > .ui.container { width: 100% !important; margin-left: 0em !important; margin-right: 0em !important; } } @media only screen and (min-width: 768px) { .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { border-left: 1px solid rgba(34, 36, 38, 0.1); } } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover { cursor: pointer; background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Pressed ---------------*/ .ui.link.menu .item:active, .ui.menu .link.item:active, .ui.menu a.item:active { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Active ---------------*/ .ui.menu .active.item { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); font-weight: normal; box-shadow: none; } .ui.menu .active.item > i.icon { opacity: 1; } /*-------------- Active Hover ---------------*/ .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /*-------------- Disabled ---------------*/ .ui.menu .item.disabled, .ui.menu .item.disabled:hover { cursor: default !important; background-color: transparent !important; color: rgba(40, 40, 40, 0.3) !important; } /******************************* Types *******************************/ /*------------------ Floated Menu / Item -------------------*/ /* Left Floated */ .ui.menu:not(.vertical) .left.item, .ui.menu:not(.vertical) :not(.dropdown) > .left.menu { display: flex; margin-right: auto !important; } /* Right Floated */ .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu { display: flex; margin-left: auto !important; } /* Swapped Borders */ .ui.menu .right.item::before, .ui.menu .right.menu > .item::before { right: auto; left: 0; } /*-------------- Vertical ---------------*/ .ui.vertical.menu { display: block; flex-direction: column; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } /*--- Item ---*/ .ui.vertical.menu .item { display: block; background: none; border-top: none; border-right: none; } .ui.vertical.menu > .item:first-child { border-radius: 0.25rem 0.25rem 0px 0px; } .ui.vertical.menu > .item:last-child { border-radius: 0px 0px 0.25rem 0.25rem; } /*--- Label ---*/ .ui.vertical.menu .item > .label { float: right; text-align: center; } /*--- Icon ---*/ .ui.vertical.menu .item > i.icon { width: 1.18em; float: right; margin: 0em 0em 0em 0.5em; } .ui.vertical.menu .item > .label + i.icon { float: none; margin: 0em 0.5em 0em 0em; } /*--- Border ---*/ .ui.vertical.menu .item:before { position: absolute; content: ''; top: 0%; left: 0px; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.vertical.menu .item:first-child:before { display: none !important; } /*--- Sub Menu ---*/ .ui.vertical.menu .item > .menu { margin: 0.5em -1.125em 0em; } .ui.vertical.menu .menu .item { background: none; padding: 0.5em 1.3125em; font-size: 0.875em; color: rgba(0, 0, 0, 0.5); } .ui.vertical.menu .item .menu a.item:hover, .ui.vertical.menu .item .menu .link.item:hover { color: rgba(0, 0, 0, 0.85); } .ui.vertical.menu .menu .item:before { display: none; } /* Vertical Active */ .ui.vertical.menu .active.item { background: rgba(0, 0, 0, 0.05); border-radius: 0em; box-shadow: none; } .ui.vertical.menu > .active.item:first-child { border-radius: 0.25rem 0.25rem 0em 0em; } .ui.vertical.menu > .active.item:last-child { border-radius: 0em 0em 0.25rem 0.25rem; } .ui.vertical.menu > .active.item:only-child { border-radius: 0.25rem; } .ui.vertical.menu .active.item .menu .active.item { border-left: none; } .ui.vertical.menu .item .menu .active.item { background-color: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /*-------------- Tabular ---------------*/ .ui.tabular.menu { border-radius: 0em; box-shadow: none !important; border: none; background: none transparent; border-bottom: 1px solid #D4D4D5; } .ui.tabular.fluid.menu { width: calc(100% + (1px * 2)) !important; } .ui.tabular.menu .item { background: transparent; border-bottom: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; padding: 0.9375em 1.4375em; color: #4A3041; } .ui.tabular.menu .item:before { display: none; } /* Hover */ .ui.tabular.menu .item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.tabular.menu .active.item { background: none #FFFFFF; color: var(--primary-dark-color); border-top-width: 1px; border-color: #D4D4D5; font-weight: bold; margin-bottom: -1px; box-shadow: none; border-radius: 0.25rem 0.25rem 0px 0px !important; } /* Coupling with segment for attachment */ .ui.tabular.menu + .attached:not(.top).segment, .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { border-top: none; margin-left: 0px; margin-top: 0px; margin-right: 0px; width: 100%; } .top.attached.segment + .ui.bottom.tabular.menu { position: relative; width: calc(100% + (1px * 2)); left: -1px; } /* Bottom Vertical Tabular */ .ui.bottom.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-top: 1px solid #D4D4D5; } .ui.bottom.tabular.menu .item { background: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top: none; } .ui.bottom.tabular.menu .active.item { background: none #FFFFFF; color: var(--primary-dark-color); border-color: #D4D4D5; margin: -1px 0px 0px 0px; border-radius: 0px 0px 0.25rem 0.25rem !important; } /* Vertical Tabular (Left) */ .ui.vertical.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-right: 1px solid #D4D4D5; } .ui.vertical.tabular.menu .item { background: none; border-left: 1px solid transparent; border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-right: none; } .ui.vertical.tabular.menu .active.item { background: none #FFFFFF; color: var(--primary-dark-color); border-color: #D4D4D5; margin: 0px -1px 0px 0px; border-radius: 0.25rem 0px 0px 0.25rem !important; } /* Vertical Right Tabular */ .ui.vertical.right.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-right: none; border-left: 1px solid #D4D4D5; } .ui.vertical.right.tabular.menu .item { background: none; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-left: none; } .ui.vertical.right.tabular.menu .active.item { background: none #FFFFFF; color: var(--primary-dark-color); border-color: #D4D4D5; margin: 0px 0px 0px -1px; border-radius: 0px 0.25rem 0.25rem 0px !important; } /* Dropdown */ .ui.tabular.menu .active.dropdown.item { margin-bottom: 0px; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; border-bottom: none; } /*-------------- Pagination ---------------*/ .ui.pagination.menu { margin: 0em; display: inline-flex; vertical-align: middle; } .ui.pagination.menu .item:last-child { border-radius: 0em 0.25rem 0.25rem 0em; } .ui.compact.menu .item:last-child { border-radius: 0em 0.25rem 0.25rem 0em; } .ui.pagination.menu .item:last-child:before { display: none; } .ui.pagination.menu .item { min-width: 3em; text-align: center; } .ui.pagination.menu .icon.item i.icon { vertical-align: top; } /* Active */ .ui.pagination.menu .active.item { border-top: none; padding-top: 0.9375em; background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); box-shadow: none; } /*-------------- Secondary ---------------*/ .ui.secondary.menu { background: none; margin-left: -0.3125em; margin-right: -0.3125em; border-radius: 0em; border: none; box-shadow: none; } /* Item */ .ui.secondary.menu .item { align-self: center; box-shadow: none; border: none; padding: 0.8125em 0.9375em; margin: 0em 0.3125em; background: none; transition: color 0.1s ease; border-radius: 0.25rem; } /* No Divider */ .ui.secondary.menu .item:before { display: none !important; } /* Header */ .ui.secondary.menu .header.item { border-radius: 0em; border-right: none; background: none transparent; } /* Image */ .ui.secondary.menu .item > img:not(.ui) { margin: 0em; } /* Hover */ .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Active */ .ui.secondary.menu .active.item { box-shadow: none; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); border-radius: 0.25rem; } /* Active Hover */ .ui.secondary.menu .active.item:hover { box-shadow: none; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.secondary.inverted.menu .link.item, .ui.secondary.inverted.menu a.item { color: rgba(255, 255, 255, 0.7) !important; } .ui.secondary.inverted.menu .dropdown.item:hover, .ui.secondary.inverted.menu .link.item:hover, .ui.secondary.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff !important; } .ui.secondary.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff !important; } /* Fix item margins */ .ui.secondary.item.menu { margin-left: 0em; margin-right: 0em; } .ui.secondary.item.menu .item:last-child { margin-right: 0em; } .ui.secondary.attached.menu { box-shadow: none; } /* Sub Menu */ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu { margin: 0em -0.9375em; } .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { margin: 0em; padding: 0.4375em 1.3125em; } /*--------------------- Secondary Vertical -----------------------*/ .ui.secondary.vertical.menu > .item { border: none; margin: 0em 0em 0.3125em; border-radius: 0.25rem !important; } .ui.secondary.vertical.menu > .header.item { border-radius: 0em; } /* Sub Menu */ .ui.vertical.secondary.menu .item > .menu .item { background-color: transparent; } /* Inverted */ .ui.secondary.inverted.menu { background-color: transparent; } /*--------------------- Secondary Pointing -----------------------*/ .ui.secondary.pointing.menu { margin-left: 0em; margin-right: 0em; border-bottom: 2px solid rgba(34, 36, 38, 0.15); } .ui.secondary.pointing.menu .item { border-bottom-color: transparent; border-bottom-style: solid; border-radius: 0em; align-self: flex-end; margin: 0em 0em -2px; padding: 0.875em 1.125em; border-bottom-width: 2px; transition: color 0.1s ease; } /* Item Types */ .ui.secondary.pointing.menu .header.item { color: rgba(0, 0, 0, 0.85) !important; } .ui.secondary.pointing.menu .text.item { box-shadow: none !important; } .ui.secondary.pointing.menu .item:after { display: none; } /* Hover */ .ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover { background-color: transparent; color: #4A3041; } /* Pressed */ .ui.secondary.pointing.menu .dropdown.item:active, .ui.secondary.pointing.menu .link.item:active, .ui.secondary.pointing.menu a.item:active { background-color: transparent; border-color: rgba(34, 36, 38, 0.15); } /* Active */ .ui.secondary.pointing.menu .active.item { background-color: transparent; box-shadow: none; border-color: #1B1C1D; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /* Active Hover */ .ui.secondary.pointing.menu .active.item:hover { border-color: #1B1C1D; color: rgba(0, 0, 0, 0.95); } /* Active Dropdown */ .ui.secondary.pointing.menu .active.dropdown.item { border-color: transparent; } /* Vertical Pointing */ .ui.secondary.vertical.pointing.menu { border-bottom-width: 0px; border-right-width: 2px; border-right-style: solid; border-right-color: rgba(34, 36, 38, 0.15); } .ui.secondary.vertical.pointing.menu .item { border-bottom: none; border-right-style: solid; border-right-color: transparent; border-radius: 0em !important; margin: 0em -2px 0em 0em; border-right-width: 2px; } /* Vertical Active */ .ui.secondary.vertical.pointing.menu .active.item { border-color: #1B1C1D; } /* Inverted */ .ui.secondary.inverted.pointing.menu { border-color: rgba(255, 255, 255, 0.1); } .ui.secondary.inverted.pointing.menu { border-width: 2px; border-color: rgba(34, 36, 38, 0.15); } .ui.secondary.inverted.pointing.menu .item { color: rgba(255, 255, 255, 0.9); } .ui.secondary.inverted.pointing.menu .header.item { color: #FFFFFF !important; } /* Hover */ .ui.secondary.inverted.pointing.menu .link.item:hover, .ui.secondary.inverted.pointing.menu a.item:hover { color: rgba(0, 0, 0, 0.95); } /* Active */ .ui.secondary.inverted.pointing.menu .active.item { border-color: #FFFFFF; color: #ffffff; } /*-------------- Text Menu ---------------*/ .ui.text.menu { background: none transparent; border-radius: 0px; box-shadow: none; border: none; margin: 1em -0.4375em; } .ui.text.menu .item { border-radius: 0px; box-shadow: none; align-self: center; margin: 0em 0em; padding: 0.3125em 0.4375em; font-weight: normal; color: rgba(0, 0, 0, 0.6); transition: opacity 0.1s ease; } /* Border */ .ui.text.menu .item:before, .ui.text.menu .menu .item:before { display: none !important; } /* Header */ .ui.text.menu .header.item { background-color: transparent; opacity: 1; color: rgba(0, 0, 0, 0.85); font-size: 0.9375em; text-transform: uppercase; font-weight: bold; } /* Image */ .ui.text.menu .item > img:not(.ui) { margin: 0em; } /*--- fluid text ---*/ .ui.text.item.menu .item { margin: 0em; } /*--- vertical text ---*/ .ui.vertical.text.menu { margin: 1em 0em; } .ui.vertical.text.menu:first-child { margin-top: 0rem; } .ui.vertical.text.menu:last-child { margin-bottom: 0rem; } .ui.vertical.text.menu .item { margin: 0.5em 0em; padding-left: 0em; padding-right: 0em; } .ui.vertical.text.menu .item > i.icon { float: none; margin: 0em 0.3125em 0em 0em; } .ui.vertical.text.menu .header.item { margin: 0.5em 0em 0.625em; } /* Vertical Sub Menu */ .ui.vertical.text.menu .item:not(.dropdown) > .menu { margin: 0em; } .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { margin: 0em; padding: 0.4375em 0em; } /*--- hover ---*/ .ui.text.menu .item:hover { opacity: 1; background-color: transparent; } /*--- active ---*/ .ui.text.menu .active.item { background-color: transparent; border: none; box-shadow: none; font-weight: normal; color: rgba(0, 0, 0, 0.95); } /*--- active hover ---*/ .ui.text.menu .active.item:hover { background-color: transparent; } /* Disable Bariations */ .ui.text.pointing.menu .active.item:after { box-shadow: none; } .ui.text.attached.menu { box-shadow: none; } /* Inverted */ .ui.inverted.text.menu, .ui.inverted.text.menu .item, .ui.inverted.text.menu .item:hover, .ui.inverted.text.menu .active.item { background-color: transparent !important; } /* Fluid */ .ui.fluid.text.menu { margin-left: 0em; margin-right: 0em; } /*-------------- Icon Only ---------------*/ /* Vertical Menu */ .ui.vertical.icon.menu { display: inline-block; width: auto; } /* Item */ .ui.icon.menu .item { height: auto; text-align: center; color: #1B1C1D; } /* Icon */ .ui.icon.menu .item > .icon:not(.dropdown) { margin: 0; opacity: 1; } /* Icon Gylph */ .ui.icon.menu .icon:before { opacity: 1; } /* (x) Item Icon */ .ui.menu .icon.item > .icon { width: auto; margin: 0em auto; } /* Vertical Icon */ .ui.vertical.icon.menu .item > .icon:not(.dropdown) { display: block; opacity: 1; margin: 0em auto; float: none; } /* Inverted */ .ui.inverted.icon.menu .item { color: #FFFFFF; } /*-------------- Labeled Icon ---------------*/ /* Menu */ .ui.labeled.icon.menu { text-align: center; } /* Item */ .ui.labeled.icon.menu .item { min-width: 6em; flex-direction: column; } /* Icon */ .ui.labeled.icon.menu .item > .icon:not(.dropdown) { height: 1em; display: block; font-size: 1.6875em !important; margin: 0em auto 0.5rem !important; } /* Fluid */ .ui.fluid.labeled.icon.menu > .item { min-width: 0em; } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ @media only screen and (max-width: 767px) { .ui.stackable.menu { flex-direction: column; } .ui.stackable.menu .item { width: 100% !important; } .ui.stackable.menu .item:before { position: absolute; content: ''; top: auto; bottom: 0px; left: 0px; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.stackable.menu .left.menu, .ui.stackable.menu .left.item { margin-right: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .right.item { margin-left: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .left.menu { flex-direction: column; } } /*-------------- Colors ---------------*/ /*--- Standard Colors ---*/ .ui.menu .red.active.item, .ui.red.menu .active.item { border-color: #DB2828 !important; color: #DB2828 !important; } .ui.menu .orange.active.item, .ui.orange.menu .active.item { border-color: #F2711C !important; color: #F2711C !important; } .ui.menu .yellow.active.item, .ui.yellow.menu .active.item { border-color: #FBBD08 !important; color: #FBBD08 !important; } .ui.menu .olive.active.item, .ui.olive.menu .active.item { border-color: #B5CC18 !important; color: #B5CC18 !important; } .ui.menu .green.active.item, .ui.green.menu .active.item { border-color: #21BA45 !important; color: #21BA45 !important; } .ui.menu .teal.active.item, .ui.teal.menu .active.item { border-color: #00B5AD !important; color: #00B5AD !important; } .ui.menu .blue.active.item, .ui.blue.menu .active.item { border-color: #2185D0 !important; color: #2185D0 !important; } .ui.menu .violet.active.item, .ui.violet.menu .active.item { border-color: #6435C9 !important; color: #6435C9 !important; } .ui.menu .purple.active.item, .ui.purple.menu .active.item { border-color: #A333C8 !important; color: #A333C8 !important; } .ui.menu .pink.active.item, .ui.pink.menu .active.item { border-color: #E03997 !important; color: #E03997 !important; } .ui.menu .brown.active.item, .ui.brown.menu .active.item { border-color: #A5673F !important; color: #A5673F !important; } .ui.menu .grey.active.item, .ui.grey.menu .active.item { border-color: #767676 !important; color: #767676 !important; } /*-------------- Inverted ---------------*/ .ui.inverted.menu { border: 0px solid transparent; background: #1B1C1D; box-shadow: none; } /* Menu Item */ .ui.inverted.menu .item, .ui.inverted.menu .item > a:not(.ui) { background: transparent; color: rgba(255, 255, 255, 0.9); } .ui.inverted.menu .item.menu { background: transparent; } /*--- Border ---*/ .ui.inverted.menu .item:before { background: rgba(255, 255, 255, 0.08); } .ui.vertical.inverted.menu .item:before { background: rgba(255, 255, 255, 0.08); } /* Sub Menu */ .ui.vertical.inverted.menu .menu .item, .ui.vertical.inverted.menu .menu .item a:not(.ui) { color: rgba(255, 255, 255, 0.5); } /* Header */ .ui.inverted.menu .header.item { margin: 0em; background: transparent; box-shadow: none; } /* Disabled */ .ui.inverted.menu .item.disabled, .ui.inverted.menu .item.disabled:hover { color: rgba(225, 225, 225, 0.3); } /*--- Hover ---*/ .ui.link.inverted.menu .item:hover, .ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.vertical.inverted.menu .item .menu a.item:hover, .ui.vertical.inverted.menu .item .menu .link.item:hover { background: transparent; color: #ffffff; } /*--- Pressed ---*/ .ui.inverted.menu a.item:active, .ui.inverted.menu .link.item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /*--- Active ---*/ .ui.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff !important; } .ui.inverted.vertical.menu .item .menu .active.item { background: transparent; color: #FFFFFF; } .ui.inverted.pointing.menu .active.item:after { background: #3D3E3F !important; margin: 0em !important; box-shadow: none !important; border: none !important; } /*--- Active Hover ---*/ .ui.inverted.menu .active.item:hover { background: rgba(255, 255, 255, 0.15); color: #FFFFFF !important; } .ui.inverted.pointing.menu .active.item:hover:after { background: #3D3E3F !important; } /*-------------- Floated ---------------*/ .ui.floated.menu { float: left; margin: 0rem 0.5rem 0rem 0rem; } .ui.floated.menu .item:last-child:before { display: none; } .ui.right.floated.menu { float: right; margin: 0rem 0rem 0rem 0.5rem; } /*-------------- Inverted ---------------*/ /* Red */ .ui.inverted.menu .red.active.item, .ui.inverted.red.menu { background-color: #DB2828; } .ui.inverted.red.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.red.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Orange */ .ui.inverted.menu .orange.active.item, .ui.inverted.orange.menu { background-color: #F2711C; } .ui.inverted.orange.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.orange.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Yellow */ .ui.inverted.menu .yellow.active.item, .ui.inverted.yellow.menu { background-color: #FBBD08; } .ui.inverted.yellow.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.yellow.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Olive */ .ui.inverted.menu .olive.active.item, .ui.inverted.olive.menu { background-color: #B5CC18; } .ui.inverted.olive.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.olive.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Green */ .ui.inverted.menu .green.active.item, .ui.inverted.green.menu { background-color: #21BA45; } .ui.inverted.green.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.green.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Teal */ .ui.inverted.menu .teal.active.item, .ui.inverted.teal.menu { background-color: #00B5AD; } .ui.inverted.teal.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.teal.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Blue */ .ui.inverted.menu .blue.active.item, .ui.inverted.blue.menu { background-color: #2185D0; } .ui.inverted.blue.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.blue.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Violet */ .ui.inverted.menu .violet.active.item, .ui.inverted.violet.menu { background-color: #6435C9; } .ui.inverted.violet.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.violet.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Purple */ .ui.inverted.menu .purple.active.item, .ui.inverted.purple.menu { background-color: #A333C8; } .ui.inverted.purple.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.purple.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Pink */ .ui.inverted.menu .pink.active.item, .ui.inverted.pink.menu { background-color: #E03997; } .ui.inverted.pink.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.pink.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Brown */ .ui.inverted.menu .brown.active.item, .ui.inverted.brown.menu { background-color: #A5673F; } .ui.inverted.brown.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.brown.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Grey */ .ui.inverted.menu .grey.active.item, .ui.inverted.grey.menu { background-color: #767676; } .ui.inverted.grey.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.grey.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /*-------------- Fitted ---------------*/ .ui.fitted.menu .item, .ui.fitted.menu .item .menu .item, .ui.menu .fitted.item { padding: 0em; } .ui.horizontally.fitted.menu .item, .ui.horizontally.fitted.menu .item .menu .item, .ui.menu .horizontally.fitted.item { padding-top: 0.9375em; padding-bottom: 0.9375em; } .ui.vertically.fitted.menu .item, .ui.vertically.fitted.menu .item .menu .item, .ui.menu .vertically.fitted.item { padding-left: 1.125em; padding-right: 1.125em; } /*-------------- Borderless ---------------*/ .ui.borderless.menu .item:before, .ui.borderless.menu .item .menu .item:before, .ui.menu .borderless.item:before { background: none !important; } /*------------------- Compact --------------------*/ .ui.compact.menu { display: inline-flex; margin: 0em; vertical-align: middle; } .ui.compact.vertical.menu { display: inline-block; } .ui.compact.menu .item:last-child { border-radius: 0em 0.25rem 0.25rem 0em; } .ui.compact.menu .item:last-child:before { display: none; } .ui.compact.vertical.menu { width: auto !important; } .ui.compact.vertical.menu .item:last-child::before { display: block; } /*------------------- Fluid --------------------*/ .ui.menu.fluid, .ui.vertical.menu.fluid { width: 100% !important; } /*------------------- Evenly Sized --------------------*/ .ui.item.menu, .ui.item.menu .item { width: 100%; padding-left: 0em !important; padding-right: 0em !important; margin-left: 0em !important; margin-right: 0em !important; text-align: center; justify-content: center; } .ui.attached.item.menu { margin: 0em -1px !important; } .ui.item.menu .item:last-child:before { display: none; } .ui.menu.two.item .item { width: 50%; } .ui.menu.three.item .item { width: 33.333%; } .ui.menu.four.item .item { width: 25%; } .ui.menu.five.item .item { width: 20%; } .ui.menu.six.item .item { width: 16.666%; } .ui.menu.seven.item .item { width: 14.285%; } .ui.menu.eight.item .item { width: 12.5%; } .ui.menu.nine.item .item { width: 11.11%; } .ui.menu.ten.item .item { width: 10%; } .ui.menu.eleven.item .item { width: 9.09%; } .ui.menu.twelve.item .item { width: 8.333%; } /*-------------- Fixed ---------------*/ .ui.menu.fixed { position: fixed; z-index: 101; margin: 0em; width: 100%; } .ui.menu.fixed, .ui.menu.fixed .item:first-child, .ui.menu.fixed .item:last-child { border-radius: 0px !important; } .ui.fixed.menu, .ui[class*="top fixed"].menu { top: 0px; left: 0px; right: auto; bottom: auto; } .ui[class*="top fixed"].menu { border-top: none; border-left: none; border-right: none; } .ui[class*="right fixed"].menu { border-top: none; border-bottom: none; border-right: none; top: 0px; right: 0px; left: auto; bottom: auto; width: auto; height: 100%; } .ui[class*="bottom fixed"].menu { border-bottom: none; border-left: none; border-right: none; bottom: 0px; left: 0px; top: auto; right: auto; } .ui[class*="left fixed"].menu { border-top: none; border-bottom: none; border-left: none; top: 0px; left: 0px; right: auto; bottom: auto; width: auto; height: 100%; } /* Coupling with Grid */ .ui.fixed.menu + .ui.grid { padding-top: 2.75rem; } /*------------------- Pointing --------------------*/ .ui.pointing.menu .item:after { visibility: hidden; position: absolute; content: ''; top: 100%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); background: none; margin: 0.5px 0em 0em; width: 0.5em; height: 0.5em; border: none; border-bottom: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5; z-index: 2; transition: background 0.1s ease; } .ui.vertical.pointing.menu .item:after { position: absolute; top: 50%; right: 0%; bottom: auto; left: auto; transform: translateX(50%) translateY(-50%) rotate(45deg); margin: 0em -0.5px 0em 0em; border: none; border-top: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5; } /* Active */ .ui.pointing.menu .active.item:after { visibility: visible; } .ui.pointing.menu .active.dropdown.item:after { visibility: hidden; } /* Don't double up pointers */ .ui.pointing.menu .dropdown.active.item:after, .ui.pointing.menu .active.item .menu .active.item:after { display: none; } /* Colors */ .ui.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.pointing.menu .active.item:after { background-color: #F2F2F2; } .ui.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .active.item:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .menu .active.item:after { background-color: #FFFFFF; } /*-------------- Attached ---------------*/ /* Middle */ .ui.attached.menu { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% - (-1px * 2)); max-width: calc(100% - (-1px * 2)); box-shadow: none; } .ui.attached + .ui.attached.menu:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].menu { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1rem; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.menu[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui[class*="bottom attached"].menu { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.25rem 0.25rem; } .ui[class*="bottom attached"].menu:last-child { margin-bottom: 0em; } /* Attached Menu Item */ .ui.top.attached.menu > .item:first-child { border-radius: 0.25rem 0em 0em 0em; } .ui.bottom.attached.menu > .item:first-child { border-radius: 0em 0em 0em 0.25rem; } /* Tabular Attached */ .ui.attached.menu:not(.tabular) { border: 1px solid #D4D4D5; } .ui.attached.inverted.menu { border: none; } .ui.attached.tabular.menu { margin-left: 0; margin-right: 0; width: 100%; } /*-------------- Sizes ---------------*/ /* Mini */ .ui.mini.menu { font-size: 0.6875rem; } .ui.mini.vertical.menu { width: 9rem; } /* Tiny */ .ui.tiny.menu { font-size: 0.75rem; } .ui.tiny.vertical.menu { width: 11rem; } /* Small */ .ui.small.menu { font-size: 0.8125rem; } .ui.small.vertical.menu { width: 13rem; } /* Medium */ .ui.menu { font-size: 1rem; } .ui.vertical.menu { width: 15rem; } /* Large */ .ui.large.menu { font-size: 0.9375rem; } .ui.large.vertical.menu { width: 18rem; } /* Huge */ .ui.huge.menu { font-size: 1.0625rem; } .ui.huge.vertical.menu { width: 22rem; } /* Big */ .ui.big.menu { font-size: 1rem; } .ui.big.vertical.menu { width: 20rem; } /* Massive */ .ui.massive.menu { font-size: 1.125rem; } .ui.massive.vertical.menu { width: 25rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Message * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Packaged Theme */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Message *******************************/ .ui.message { position: relative; min-height: 1em; margin: 1em 0em; background: var(--primary-neutral-color); padding: 1em 1.5em; line-height: 1.6; color: #4A3041; transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; border-radius: 0.25rem; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.message:first-child { margin-top: 0em; } .ui.message:last-child { margin-bottom: 0em; } /*-------------- Content ---------------*/ /* Header */ .ui.message .header { display: block; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; margin: -0.14285714em 0em 0rem 0em; } /* Default font size */ .ui.message .header:not(.ui) { font-size: 1.125em; } /* Paragraph */ .ui.message p { opacity: 1; margin: 0.75em 0em; } .ui.message p:first-child { margin-top: 0em; } .ui.message p:last-child { margin-bottom: 0em; } .ui.message .header + p { margin-top: 0.25em; } /* List */ .ui.message .list:not(.ui) { text-align: left; padding: 0em; opacity: 1; list-style-position: inside; margin: 0.5em 0em 0em; } .ui.message .list:not(.ui):first-child { margin-top: 0em; } .ui.message .list:not(.ui):last-child { margin-bottom: 0em; } .ui.message .list:not(.ui) li { position: relative; list-style-type: none; margin: 0em 0em 0.3em 1em; padding: 0em; } .ui.message .list:not(.ui) li:before { position: absolute; content: '•'; left: -1em; height: 100%; vertical-align: baseline; } .ui.message .list:not(.ui) li:last-child { margin-bottom: 0em; } /* Icon */ .ui.message > .icon { margin-right: 0.6em; } /* Close Icon */ .ui.message > .close.icon { cursor: pointer; position: absolute; margin: 0em; top: 0.7em; right: 0.5em; opacity: 0.7; transition: opacity 0.1s ease; } .ui.message > .close.icon:hover { opacity: 1; } /* First / Last Element */ .ui.message > :first-child { margin-top: 0em; } .ui.message > :last-child { margin-bottom: 0em; } /******************************* Coupling *******************************/ .ui.dropdown .menu > .message { margin: 0px -1px; } /******************************* States *******************************/ /*-------------- Visible ---------------*/ .ui.visible.visible.visible.visible.message { display: block; } .ui.icon.visible.visible.visible.visible.message { display: flex; } /*-------------- Hidden ---------------*/ .ui.hidden.hidden.hidden.hidden.message { display: none; } /******************************* Variations *******************************/ /*-------------- Compact ---------------*/ .ui.compact.message { display: inline-block; } .ui.compact.icon.message { display: inline-flex; } /*-------------- Attached ---------------*/ .ui.attached.message { margin-bottom: -1px; border-radius: 0.25rem 0.25rem 0em 0em; box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset; margin-left: -1px; margin-right: -1px; } .ui.attached + .ui.attached.message:not(.top):not(.bottom) { margin-top: -1px; border-radius: 0em; } .ui.bottom.attached.message { margin-top: -1px; border-radius: 0em 0em 0.25rem 0.25rem; box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui.bottom.attached.message:not(:last-child) { margin-bottom: 1em; } .ui.attached.icon.message { width: auto; } /*-------------- Icon ---------------*/ .ui.icon.message { display: flex; width: 100%; align-items: center; } .ui.icon.message > .icon:not(.close) { display: block; flex: 0 0 auto; width: auto; line-height: 1; vertical-align: middle; font-size: 3em; opacity: 0.8; } .ui.icon.message > .content { display: block; flex: 1 1 auto; vertical-align: middle; } .ui.icon.message .icon:not(.close) + .content { padding-left: 0rem; } .ui.icon.message .circular.icon { width: 1em; } /*-------------- Floating ---------------*/ .ui.floating.message { box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /*-------------- Colors ---------------*/ .ui.black.message { background-color: #1B1C1D; color: rgba(255, 255, 255, 0.9); } /*-------------- Types ---------------*/ /* Positive */ .ui.positive.message { background-color: #FCFFF5; color: #2C662D; } .ui.positive.message, .ui.attached.positive.message { box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.positive.message .header { color: #1A531B; } /* Negative */ .ui.negative.message { background-color: #FFF6F6; color: #9F3A38; } .ui.negative.message, .ui.attached.negative.message { box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.negative.message .header { color: #912D2B; } /* Info */ .ui.info.message { background-color: #F8FFFF; color: #276F86; } .ui.info.message, .ui.attached.info.message { box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.info.message .header { color: #0E566C; } /* Warning */ .ui.warning.message { background-color: #FFFAF3; color: #573A08; } .ui.warning.message, .ui.attached.warning.message { box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.warning.message .header { color: #794B02; } /* Error */ .ui.error.message { background-color: #FFF6F6; color: #9F3A38; } .ui.error.message, .ui.attached.error.message { box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.error.message .header { color: #912D2B; } /* Success */ .ui.success.message { background-color: #FCFFF5; color: #2C662D; } .ui.success.message, .ui.attached.success.message { box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.success.message .header { color: #1A531B; } /* Colors */ .ui.inverted.message, .ui.black.message { background-color: #1B1C1D; color: rgba(255, 255, 255, 0.9); } .ui.red.message { background-color: #FFE8E6; color: #DB2828; box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.red.message .header { color: #c82121; } .ui.orange.message { background-color: #FFEDDE; color: #F2711C; box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.orange.message .header { color: #e7640d; } .ui.yellow.message { background-color: #FFF8DB; color: #B58105; box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.yellow.message .header { color: #9c6f04; } .ui.olive.message { background-color: #FBFDEF; color: #8ABC1E; box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.olive.message .header { color: #7aa61a; } .ui.green.message { background-color: #E5F9E7; color: #1EBC30; box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.green.message .header { color: #1aa62a; } .ui.teal.message { background-color: #E1F7F7; color: #10A3A3; box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.teal.message .header { color: #0e8c8c; } .ui.blue.message { background-color: #DFF0FF; color: #2185D0; box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.blue.message .header { color: #1e77ba; } .ui.violet.message { background-color: #EAE7FF; color: #6435C9; box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.violet.message .header { color: #5a30b5; } .ui.purple.message { background-color: #F6E7FF; color: #A333C8; box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.purple.message .header { color: #922eb4; } .ui.pink.message { background-color: #FFE3FB; color: #E03997; box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.pink.message .header { color: #dd238b; } .ui.brown.message { background-color: #F1E2D3; color: #A5673F; box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.brown.message .header { color: #935b38; } /*-------------- Sizes ---------------*/ .ui.mini.message { font-size: 0.8125em; } .ui.tiny.message { font-size: 0.875em; } .ui.small.message { font-size: 0.9375em; } .ui.message { font-size: 1em; } .ui.large.message { font-size: 1.125em; } .ui.big.message { font-size: 1.3125em; } .ui.huge.message { font-size: 1.4375em; } .ui.massive.message { font-size: 1.6875em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Table * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Packaged Theme */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Table *******************************/ /* Prototype */ .ui.table { width: 100%; background: #FFFFFF; margin: 1em 0em; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.25rem; text-align: left; color: #4A3041; border-collapse: separate; border-spacing: 0px; } .ui.table:first-child { margin-top: 0em; } .ui.table:last-child { margin-bottom: 0em; } /******************************* Parts *******************************/ /* Table Content */ .ui.table th, .ui.table td { transition: background 0.1s ease, color 0.1s ease; } /* Headers */ .ui.table thead { box-shadow: none; } .ui.table thead th { cursor: auto; background: var(--primary-neutral-color); text-align: inherit; color: #4A3041; padding: 0.9375em 0.8125em; vertical-align: inherit; font-style: none; font-weight: bold; text-transform: none; border-bottom: 1px solid rgba(34, 36, 38, 0.1); border-left: none; } .ui.table thead tr > th:first-child { border-left: none; } .ui.table thead tr:first-child > th:first-child { border-radius: 0.25rem 0em 0em 0em; } .ui.table thead tr:first-child > th:last-child { border-radius: 0em 0.25rem 0em 0em; } .ui.table thead tr:first-child > th:only-child { border-radius: 0.25rem 0.25rem 0em 0em; } /* Footer */ .ui.table tfoot { box-shadow: none; } .ui.table tfoot th { cursor: auto; border-top: 1px solid rgba(34, 36, 38, 0.15); background: #F9FAFB; text-align: inherit; color: #4A3041; padding: 0.8125em 0.8125em; vertical-align: middle; font-style: normal; font-weight: normal; text-transform: none; } .ui.table tfoot tr > th:first-child { border-left: none; } .ui.table tfoot tr:first-child > th:first-child { border-radius: 0em 0em 0em 0.25rem; } .ui.table tfoot tr:first-child > th:last-child { border-radius: 0em 0em 0.25rem 0em; } .ui.table tfoot tr:first-child > th:only-child { border-radius: 0em 0em 0.25rem 0.25rem; } /* Table Row */ .ui.table tr td { border-top: 1px solid rgba(34, 36, 38, 0.1); } .ui.table tr:first-child td { border-top: none; } /* Repeated tbody */ .ui.table tbody + tbody tr:first-child td { border-top: 1px solid rgba(34, 36, 38, 0.1); } /* Table Cells */ .ui.table td { padding: 0.8125em 0.8125em; text-align: inherit; } /* Icons */ .ui.table > .icon { vertical-align: baseline; } .ui.table > .icon:only-child { margin: 0em; } /* Table Segment */ .ui.table.segment { padding: 0em; } .ui.table.segment:after { display: none; } .ui.table.segment.stacked:after { display: block; } /* Responsive */ @media only screen and (max-width: 767px) { .ui.table:not(.unstackable) { width: 100%; } .ui.table:not(.unstackable) tbody, .ui.table:not(.unstackable) tr, .ui.table:not(.unstackable) tr > th, .ui.table:not(.unstackable) tr > td { width: auto !important; display: block !important; } .ui.table:not(.unstackable) { padding: 0em; } .ui.table:not(.unstackable) thead { display: block; } .ui.table:not(.unstackable) tfoot { display: block; } .ui.table:not(.unstackable) tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; } .ui.table:not(.unstackable) tr > th, .ui.table:not(.unstackable) tr > td { background: none; border: none !important; padding: 0.25em 0.75em !important; box-shadow: none !important; } .ui.table:not(.unstackable) th:first-child, .ui.table:not(.unstackable) td:first-child { font-weight: bold; } /* Definition Table */ .ui.definition.table:not(.unstackable) thead th:first-child { box-shadow: none !important; } } /******************************* Coupling *******************************/ /* UI Image */ .ui.table th .image, .ui.table th .image img, .ui.table td .image, .ui.table td .image img { max-width: none; } /******************************* Types *******************************/ /*-------------- Complex ---------------*/ .ui.structured.table { border-collapse: collapse; } .ui.structured.table thead th { border-left: none; border-right: none; } .ui.structured.sortable.table thead th { border-left: 1px solid rgba(34, 36, 38, 0.15); border-right: 1px solid rgba(34, 36, 38, 0.15); } .ui.structured.basic.table th { border-left: none; border-right: none; } .ui.structured.celled.table tr th, .ui.structured.celled.table tr td { border-left: 1px solid rgba(34, 36, 38, 0.1); border-right: 1px solid rgba(34, 36, 38, 0.1); } /*-------------- Definition ---------------*/ .ui.definition.table thead:not(.full-width) th:first-child { pointer-events: none; background: transparent; font-weight: normal; color: rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 0px 1px #FFFFFF; } .ui.definition.table tfoot:not(.full-width) th:first-child { pointer-events: none; background: transparent; font-weight: rgba(0, 0, 0, 0.4); color: normal; box-shadow: 1px 1px 0px 1px #FFFFFF; } /* Remove Border */ .ui.celled.definition.table thead:not(.full-width) th:first-child { box-shadow: 0px -1px 0px 1px #FFFFFF; } .ui.celled.definition.table tfoot:not(.full-width) th:first-child { box-shadow: 0px 1px 0px 1px #FFFFFF; } /* Highlight Defining Column */ .ui.definition.table tr td:first-child:not(.ignored), .ui.definition.table tr td.definition { background: rgba(0, 0, 0, 0.03); font-weight: bold; color: rgba(0, 0, 0, 0.95); text-transform: ''; box-shadow: ''; text-align: ''; font-size: 1em; padding-left: ''; padding-right: ''; } /* Fix 2nd Column */ .ui.definition.table thead:not(.full-width) th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table tfoot:not(.full-width) th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table td:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } /******************************* States *******************************/ /*-------------- Positive ---------------*/ .ui.table tr.positive, .ui.table td.positive { box-shadow: 0px 0px 0px #A3C293 inset; } .ui.table tr.positive, .ui.table td.positive { background: #FCFFF5 !important; color: #2C662D !important; } /*-------------- Negative ---------------*/ .ui.table tr.negative, .ui.table td.negative { box-shadow: 0px 0px 0px #E0B4B4 inset; } .ui.table tr.negative, .ui.table td.negative { background: #FFF6F6 !important; color: #9F3A38 !important; } /*-------------- Error ---------------*/ .ui.table tr.error, .ui.table td.error { box-shadow: 0px 0px 0px #E0B4B4 inset; } .ui.table tr.error, .ui.table td.error { background: #FFF6F6 !important; color: #9F3A38 !important; } /*-------------- Warning ---------------*/ .ui.table tr.warning, .ui.table td.warning { box-shadow: 0px 0px 0px #C9BA9B inset; } .ui.table tr.warning, .ui.table td.warning { background: #FFFAF3 !important; color: #573A08 !important; } /*-------------- Active ---------------*/ .ui.table tr.active, .ui.table td.active { box-shadow: 0px 0px 0px #4A3041 inset; } .ui.table tr.active, .ui.table td.active { background: #E0E0E0 !important; color: #4A3041 !important; } /*-------------- Disabled ---------------*/ .ui.table tr.disabled td, .ui.table tr td.disabled, .ui.table tr.disabled:hover, .ui.table tr:hover td.disabled { pointer-events: none; color: rgba(40, 40, 40, 0.3); } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ @media only screen and (max-width: 991px) { .ui[class*="tablet stackable"].table, .ui[class*="tablet stackable"].table tbody, .ui[class*="tablet stackable"].table tr, .ui[class*="tablet stackable"].table tr > th, .ui[class*="tablet stackable"].table tr > td { width: 100% !important; display: block !important; } .ui[class*="tablet stackable"].table { padding: 0em; } .ui[class*="tablet stackable"].table thead { display: block; } .ui[class*="tablet stackable"].table tfoot { display: block; } .ui[class*="tablet stackable"].table tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; } .ui[class*="tablet stackable"].table tr > th, .ui[class*="tablet stackable"].table tr > td { background: none; border: none !important; padding: 0.25em 0.75em; box-shadow: none !important; } /* Definition Table */ .ui.definition[class*="tablet stackable"].table thead th:first-child { box-shadow: none !important; } } /*-------------- Text Alignment ---------------*/ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"] { text-align: left; } .ui.table[class*="center aligned"], .ui.table [class*="center aligned"] { text-align: center; } .ui.table[class*="right aligned"], .ui.table [class*="right aligned"] { text-align: right; } /*------------------ Vertical Alignment ------------------*/ .ui.table[class*="top aligned"], .ui.table [class*="top aligned"] { vertical-align: top; } .ui.table[class*="middle aligned"], .ui.table [class*="middle aligned"] { vertical-align: middle; } .ui.table[class*="bottom aligned"], .ui.table [class*="bottom aligned"] { vertical-align: bottom; } /*-------------- Collapsing ---------------*/ .ui.table th.collapsing, .ui.table td.collapsing { width: 1px; white-space: nowrap; } /*-------------- Fixed ---------------*/ .ui.fixed.table { table-layout: fixed; } .ui.fixed.table th, .ui.fixed.table td { overflow: hidden; text-overflow: ellipsis; } /*-------------- Selectable ---------------*/ .ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.selectable.inverted.table tbody tr:hover, .ui.inverted.table tbody tr td.selectable:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } /* Selectable Cell Link */ .ui.table tbody tr td.selectable { padding: 0em; } .ui.table tbody tr td.selectable > a:not(.ui) { display: block; color: inherit; padding: 0.8125em 0.8125em; } /* Other States */ .ui.selectable.table tr.error:hover, .ui.table tr td.selectable.error:hover, .ui.selectable.table tr:hover td.error { background: #ffe7e7 !important; color: #943634 !important; } .ui.selectable.table tr.warning:hover, .ui.table tr td.selectable.warning:hover, .ui.selectable.table tr:hover td.warning { background: #fff4e4 !important; color: #493107 !important; } .ui.selectable.table tr.active:hover, .ui.table tr td.selectable.active:hover, .ui.selectable.table tr:hover td.active { background: #E0E0E0 !important; color: #4A3041 !important; } .ui.selectable.table tr.positive:hover, .ui.table tr td.selectable.positive:hover, .ui.selectable.table tr:hover td.positive { background: #f7ffe6 !important; color: #275b28 !important; } .ui.selectable.table tr.negative:hover, .ui.table tr td.selectable.negative:hover, .ui.selectable.table tr:hover td.negative { background: #ffe7e7 !important; color: #943634 !important; } /*------------------- Attached --------------------*/ /* Middle */ .ui.attached.table { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% - (-1px * 2)); max-width: calc(100% - (-1px * 2)); box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached + .ui.attached.table:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].table { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1em; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.table[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui[class*="bottom attached"].table { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1em; box-shadow: none, none; border-radius: 0em 0em 0.25rem 0.25rem; } .ui[class*="bottom attached"].table:last-child { margin-bottom: 0em; } /*-------------- Striped ---------------*/ /* Table Striping */ .ui.striped.table > tr:nth-child(2n), .ui.striped.table tbody tr:nth-child(2n) { background-color: rgba(0, 0, 50, 0.02); } /* Stripes */ .ui.inverted.striped.table > tr:nth-child(2n), .ui.inverted.striped.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.05); } /* Allow striped active hover */ .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { background: #EFEFEF !important; color: rgba(0, 0, 0, 0.95) !important; } /*-------------- Single Line ---------------*/ .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; } .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; } /*------------------- Colors --------------------*/ /* Red */ .ui.red.table { border-top: 0.2em solid #DB2828; } .ui.inverted.red.table { background-color: #DB2828 !important; color: #FFFFFF !important; } /* Orange */ .ui.orange.table { border-top: 0.2em solid #F2711C; } .ui.inverted.orange.table { background-color: #F2711C !important; color: #FFFFFF !important; } /* Yellow */ .ui.yellow.table { border-top: 0.2em solid #FBBD08; } .ui.inverted.yellow.table { background-color: #FBBD08 !important; color: #FFFFFF !important; } /* Olive */ .ui.olive.table { border-top: 0.2em solid #B5CC18; } .ui.inverted.olive.table { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ .ui.green.table { border-top: 0.2em solid #21BA45; } .ui.inverted.green.table { background-color: #21BA45 !important; color: #FFFFFF !important; } /* Teal */ .ui.teal.table { border-top: 0.2em solid #00B5AD; } .ui.inverted.teal.table { background-color: #00B5AD !important; color: #FFFFFF !important; } /* Blue */ .ui.blue.table { border-top: 0.2em solid #2185D0; } .ui.inverted.blue.table { background-color: #2185D0 !important; color: #FFFFFF !important; } /* Violet */ .ui.violet.table { border-top: 0.2em solid #6435C9; } .ui.inverted.violet.table { background-color: #6435C9 !important; color: #FFFFFF !important; } /* Purple */ .ui.purple.table { border-top: 0.2em solid #A333C8; } .ui.inverted.purple.table { background-color: #A333C8 !important; color: #FFFFFF !important; } /* Pink */ .ui.pink.table { border-top: 0.2em solid #E03997; } .ui.inverted.pink.table { background-color: #E03997 !important; color: #FFFFFF !important; } /* Brown */ .ui.brown.table { border-top: 0.2em solid #A5673F; } .ui.inverted.brown.table { background-color: #A5673F !important; color: #FFFFFF !important; } /* Grey */ .ui.grey.table { border-top: 0.2em solid #767676; } .ui.inverted.grey.table { background-color: #767676 !important; color: #FFFFFF !important; } /* Black */ .ui.black.table { border-top: 0.2em solid #1B1C1D; } .ui.inverted.black.table { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*-------------- Column Count ---------------*/ /* Grid Based */ .ui.one.column.table td { width: 100%; } .ui.two.column.table td { width: 50%; } .ui.three.column.table td { width: 33.33333333%; } .ui.four.column.table td { width: 25%; } .ui.five.column.table td { width: 20%; } .ui.six.column.table td { width: 16.66666667%; } .ui.seven.column.table td { width: 14.28571429%; } .ui.eight.column.table td { width: 12.5%; } .ui.nine.column.table td { width: 11.11111111%; } .ui.ten.column.table td { width: 10%; } .ui.eleven.column.table td { width: 9.09090909%; } .ui.twelve.column.table td { width: 8.33333333%; } .ui.thirteen.column.table td { width: 7.69230769%; } .ui.fourteen.column.table td { width: 7.14285714%; } .ui.fifteen.column.table td { width: 6.66666667%; } .ui.sixteen.column.table td { width: 6.25%; } /* Column Width */ .ui.table th.one.wide, .ui.table td.one.wide { width: 6.25%; } .ui.table th.two.wide, .ui.table td.two.wide { width: 12.5%; } .ui.table th.three.wide, .ui.table td.three.wide { width: 18.75%; } .ui.table th.four.wide, .ui.table td.four.wide { width: 25%; } .ui.table th.five.wide, .ui.table td.five.wide { width: 31.25%; } .ui.table th.six.wide, .ui.table td.six.wide { width: 37.5%; } .ui.table th.seven.wide, .ui.table td.seven.wide { width: 43.75%; } .ui.table th.eight.wide, .ui.table td.eight.wide { width: 50%; } .ui.table th.nine.wide, .ui.table td.nine.wide { width: 56.25%; } .ui.table th.ten.wide, .ui.table td.ten.wide { width: 62.5%; } .ui.table th.eleven.wide, .ui.table td.eleven.wide { width: 68.75%; } .ui.table th.twelve.wide, .ui.table td.twelve.wide { width: 75%; } .ui.table th.thirteen.wide, .ui.table td.thirteen.wide { width: 81.25%; } .ui.table th.fourteen.wide, .ui.table td.fourteen.wide { width: 87.5%; } .ui.table th.fifteen.wide, .ui.table td.fifteen.wide { width: 93.75%; } .ui.table th.sixteen.wide, .ui.table td.sixteen.wide { width: 100%; } /*-------------- Sortable ---------------*/ .ui.sortable.table thead th { cursor: pointer; white-space: nowrap; border-left: 1px solid rgba(34, 36, 38, 0.15); color: #4A3041; } .ui.sortable.table thead th:first-child { border-left: none; } .ui.sortable.table thead th.sorted, .ui.sortable.table thead th.sorted:hover { -webkit-user-select: none; user-select: none; } .ui.sortable.table thead th:after { display: none; font-style: normal; font-weight: normal; text-decoration: inherit; content: ''; height: 1em; width: auto; opacity: 0.8; margin: 0em 0em 0em 0.5em; font-family: 'Icons'; } .ui.sortable.table thead th.ascending:after { content: '\f0d8'; } .ui.sortable.table thead th.descending:after { content: '\f0d7'; } /* Hover */ .ui.sortable.table th.disabled:hover { cursor: auto; color: rgba(40, 40, 40, 0.3); } .ui.sortable.table thead th:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.8); } /* Sorted */ .ui.sortable.table thead th.sorted { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } .ui.sortable.table thead th.sorted:after { display: inline-block; } /* Sorted Hover */ .ui.sortable.table thead th.sorted:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.sortable.table thead th.sorted { background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); color: #ffffff; } .ui.inverted.sortable.table thead th:hover { background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); color: #ffffff; } .ui.inverted.sortable.table thead th { border-left-color: transparent; border-right-color: transparent; } /*-------------- Inverted ---------------*/ /* Text Color */ .ui.inverted.table { background: #333333; color: rgba(255, 255, 255, 0.9); border: none; } .ui.inverted.table th { background-color: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.9) !important; } .ui.inverted.table tr td { border-color: rgba(255, 255, 255, 0.1) !important; } .ui.inverted.table tr.disabled td, .ui.inverted.table tr td.disabled, .ui.inverted.table tr.disabled:hover td, .ui.inverted.table tr:hover td.disabled { pointer-events: none; color: rgba(225, 225, 225, 0.3); } /* Definition */ .ui.inverted.definition.table tfoot:not(.full-width) th:first-child, .ui.inverted.definition.table thead:not(.full-width) th:first-child { background: #FFFFFF; } .ui.inverted.definition.table tr td:first-child { background: rgba(255, 255, 255, 0.02); color: #ffffff; } /*-------------- Collapsing ---------------*/ .ui.collapsing.table { width: auto; } /*-------------- Basic ---------------*/ .ui.basic.table { background: transparent; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.table thead, .ui.basic.table tfoot { box-shadow: none; } .ui.basic.table th { background: transparent; border-left: none; } .ui.basic.table tbody tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ui.basic.table td { background: transparent; } .ui.basic.striped.table tbody tr:nth-child(2n) { background-color: rgba(0, 0, 0, 0.05) !important; } /* Very Basic */ .ui[class*="very basic"].table { border: none; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th, .ui[class*="very basic"].table:not(.sortable):not(.striped) td { padding: ''; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { padding-left: 0em; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { padding-right: 0em; } .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { padding-top: 0em; } /*-------------- Celled ---------------*/ .ui.celled.table tr th, .ui.celled.table tr td { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.celled.table tr th:first-child, .ui.celled.table tr td:first-child { border-left: none; } /*-------------- Padded ---------------*/ .ui.padded.table th { padding-left: 1em; padding-right: 1em; } .ui.padded.table th, .ui.padded.table td { padding: 1em 1em; } /* Very */ .ui[class*="very padded"].table th { padding-left: 1.5em; padding-right: 1.5em; } .ui[class*="very padded"].table td { padding: 1.5em 1.5em; } /*-------------- Compact ---------------*/ .ui.compact.table th { padding-left: 0.7em; padding-right: 0.7em; } .ui.compact.table td { padding: 0.5em 0.7em; } /* Very */ .ui[class*="very compact"].table th { padding-left: 0.6em; padding-right: 0.6em; } .ui[class*="very compact"].table td { padding: 0.4em 0.6em; } /*-------------- Sizes ---------------*/ /* Small */ .ui.small.table { font-size: 0.9em; } /* Standard */ .ui.table { font-size: 1em; } /* Large */ .ui.large.table { font-size: 1.1em; } /******************************* Site Overrides *******************************/ /* Views */ /*! * # Semantic UI - Ad * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Advertisement *******************************/ /* Packaged Theme */ /******************************* Advertisement *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Advertisement *******************************/ .ui.ad { display: block; overflow: hidden; margin: 1em 0em; } .ui.ad:first-child { margin: 0em; } .ui.ad:last-child { margin: 0em; } .ui.ad iframe { margin: 0em; padding: 0em; border: none; overflow: hidden; } /*-------------- Common ---------------*/ /* Leaderboard */ .ui.leaderboard.ad { width: 728px; height: 90px; } /* Medium Rectangle */ .ui[class*="medium rectangle"].ad { width: 300px; height: 250px; } /* Large Rectangle */ .ui[class*="large rectangle"].ad { width: 336px; height: 280px; } /* Half Page */ .ui[class*="half page"].ad { width: 300px; height: 600px; } /*-------------- Square ---------------*/ /* Square */ .ui.square.ad { width: 250px; height: 250px; } /* Small Square */ .ui[class*="small square"].ad { width: 200px; height: 200px; } /*-------------- Rectangle ---------------*/ /* Small Rectangle */ .ui[class*="small rectangle"].ad { width: 180px; height: 150px; } /* Vertical Rectangle */ .ui[class*="vertical rectangle"].ad { width: 240px; height: 400px; } /*-------------- Button ---------------*/ .ui.button.ad { width: 120px; height: 90px; } .ui[class*="square button"].ad { width: 125px; height: 125px; } .ui[class*="small button"].ad { width: 120px; height: 60px; } /*-------------- Skyscrapers ---------------*/ /* Skyscraper */ .ui.skyscraper.ad { width: 120px; height: 600px; } /* Wide Skyscraper */ .ui[class*="wide skyscraper"].ad { width: 160px; } /*-------------- Banners ---------------*/ /* Banner */ .ui.banner.ad { width: 468px; height: 60px; } /* Vertical Banner */ .ui[class*="vertical banner"].ad { width: 120px; height: 240px; } /* Top Banner */ .ui[class*="top banner"].ad { width: 930px; height: 180px; } /* Half Banner */ .ui[class*="half banner"].ad { width: 234px; height: 60px; } /*-------------- Boards ---------------*/ /* Leaderboard */ .ui[class*="large leaderboard"].ad { width: 970px; height: 90px; } /* Billboard */ .ui.billboard.ad { width: 970px; height: 250px; } /*-------------- Panorama ---------------*/ /* Panorama */ .ui.panorama.ad { width: 980px; height: 120px; } /*-------------- Netboard ---------------*/ /* Netboard */ .ui.netboard.ad { width: 580px; height: 400px; } /*-------------- Mobile ---------------*/ /* Large Mobile Banner */ .ui[class*="large mobile banner"].ad { width: 320px; height: 100px; } /* Mobile Leaderboard */ .ui[class*="mobile leaderboard"].ad { width: 320px; height: 50px; } /******************************* Types *******************************/ /* Mobile Sizes */ .ui.mobile.ad { display: none; } @media only screen and (max-width: 767px) { .ui.mobile.ad { display: block; } } /******************************* Variations *******************************/ .ui.centered.ad { margin-left: auto; margin-right: auto; } .ui.test.ad { position: relative; background: #545454; } .ui.test.ad:after { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translateX(-50%) translateY(-50%); content: 'Ad'; color: #FFFFFF; font-size: 1em; font-weight: bold; } .ui.mobile.test.ad:after { font-size: 0.875em; } .ui.test.ad[data-text]:after { content: attr(data-text); } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Item * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Packaged Theme */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Card ---------------*/ .ui.cards > .card, .ui.card { max-width: 100%; position: relative; display: flex; flex-direction: column; width: 290px; min-height: 0px; background: #FFFFFF; padding: 0em; border: none; border-radius: 0.25rem; box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; transition: box-shadow 0.1s ease, transform 0.1s ease; z-index: ''; } .ui.card { margin: 1em 0em; } .ui.cards > .card a, .ui.card a { cursor: pointer; } .ui.card:first-child { margin-top: 0em; } .ui.card:last-child { margin-bottom: 0em; } /*-------------- Cards ---------------*/ .ui.cards { display: flex; margin: -0.875em -0.5em; flex-wrap: wrap; } .ui.cards > .card { display: flex; margin: 0.875em 0.5em; float: none; } /* Clearing */ .ui.cards:after, .ui.card:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /* Consecutive Card Groups Preserve Row Spacing */ .ui.cards ~ .ui.cards { margin-top: 0.875em; } /*-------------- Rounded Edges ---------------*/ .ui.cards > .card > :first-child, .ui.card > :first-child { border-radius: 0.25rem 0.25rem 0em 0em !important; border-top: none !important; } .ui.cards > .card > :last-child, .ui.card > :last-child { border-radius: 0em 0em 0.25rem 0.25rem !important; } .ui.cards > .card > :only-child, .ui.card > :only-child { border-radius: 0.25rem !important; } /*-------------- Images ---------------*/ .ui.cards > .card > .image, .ui.card > .image { position: relative; display: block; flex: 0 0 auto; padding: 0em; background: rgba(0, 0, 0, 0.05); } .ui.cards > .card > .image > img, .ui.card > .image > img { display: block; width: 100%; height: auto; border-radius: inherit; } .ui.cards > .card > .image:not(.ui) > img, .ui.card > .image:not(.ui) > img { border: none; } /*-------------- Content ---------------*/ .ui.cards > .card > .content, .ui.card > .content { flex-grow: 1; border: none; border-top: 1px solid rgba(34, 36, 38, 0.1); background: none; margin: 0em; padding: 1em 1em; box-shadow: none; font-size: 1em; border-radius: 0em; } .ui.cards > .card > .content:after, .ui.card > .content:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.cards > .card > .content > .header, .ui.card > .content > .header { display: block; margin: ''; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: #4A3041; } /* Default Header Size */ .ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) { font-weight: bold; font-size: 1.3125em; margin-top: -0.3em; line-height: 1.28571429em; } .ui.cards > .card > .content > .meta + .description, .ui.cards > .card > .content > .header + .description, .ui.card > .content > .meta + .description, .ui.card > .content > .header + .description { margin-top: 0.5em; } /*---------------- Floated Content -----------------*/ .ui.cards > .card [class*="left floated"], .ui.card [class*="left floated"] { float: left; } .ui.cards > .card [class*="right floated"], .ui.card [class*="right floated"] { float: right; } /*-------------- Aligned ---------------*/ .ui.cards > .card [class*="left aligned"], .ui.card [class*="left aligned"] { text-align: left; } .ui.cards > .card [class*="center aligned"], .ui.card [class*="center aligned"] { text-align: center; } .ui.cards > .card [class*="right aligned"], .ui.card [class*="right aligned"] { text-align: right; } /*-------------- Content Image ---------------*/ .ui.cards > .card .content img, .ui.card .content img { display: inline-block; vertical-align: middle; width: ''; } .ui.cards > .card img.avatar, .ui.cards > .card .avatar img, .ui.card img.avatar, .ui.card .avatar img { width: 2em; height: 2em; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.cards > .card > .content > .description, .ui.card > .content > .description { clear: both; color: rgba(0, 0, 0, 0.68); } /*-------------- Paragraph ---------------*/ .ui.cards > .card > .content p, .ui.card > .content p { margin: 0em 0em 0.5em; } .ui.cards > .card > .content p:last-child, .ui.card > .content p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.cards > .card .meta, .ui.card .meta { font-size: 1em; color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta *, .ui.card .meta * { margin-right: 0.3em; } .ui.cards > .card .meta :last-child, .ui.card .meta :last-child { margin-right: 0em; } .ui.cards > .card .meta [class*="right floated"], .ui.card .meta [class*="right floated"] { margin-right: 0em; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.cards > .card > .content a:not(.ui), .ui.card > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.cards > .card > .content a:not(.ui):hover, .ui.card > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.cards > .card > .content > a.header, .ui.card > .content > a.header { color: #4A3041; } .ui.cards > .card > .content > a.header:hover, .ui.card > .content > a.header:hover { color: #2f701b; } /* Meta */ .ui.cards > .card .meta > a:not(.ui), .ui.card .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta > a:not(.ui):hover, .ui.card .meta > a:not(.ui):hover { color: #4A3041; } /*-------------- Buttons ---------------*/ .ui.cards > .card > .buttons, .ui.card > .buttons, .ui.cards > .card > .button, .ui.card > .button { margin: 0px -1px; width: calc(100% + 2px ); } /*-------------- Dimmer ---------------*/ .ui.cards > .card .dimmer, .ui.card .dimmer { background-color: ''; z-index: 10; } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.cards > .card > .content .star.icon, .ui.card > .content .star.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .star.icon:hover, .ui.card > .content .star.icon:hover { opacity: 1; color: #FFB70A; } .ui.cards > .card > .content .active.star.icon, .ui.card > .content .active.star.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.cards > .card > .content .like.icon, .ui.card > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .like.icon:hover, .ui.card > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.cards > .card > .content .active.like.icon, .ui.card > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.cards > .card > .extra, .ui.card > .extra { max-width: 100%; min-height: 0em !important; flex-grow: 0; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; position: static; background: none; width: auto; margin: 0em 0em; padding: 0.75em 1em; top: 0em; left: 0em; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; } .ui.cards > .card > .extra a:not(.ui), .ui.card > .extra a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover { color: #2f701b; } /******************************* Variations *******************************/ /*------------------- Raised --------------------*/ .ui.raised.cards > .card, .ui.raised.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } .ui.raised.cards a.card:hover, .ui.link.cards .raised.card:hover, a.ui.raised.card:hover, .ui.link.raised.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); } .ui.raised.cards > .card, .ui.raised.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /*------------------- Centered --------------------*/ .ui.centered.cards { justify-content: center; } .ui.centered.card { margin-left: auto; margin-right: auto; } /*------------------- Fluid --------------------*/ .ui.fluid.card { width: 100%; max-width: 9999px; } /*------------------- Link --------------------*/ .ui.cards a.card, .ui.link.cards .card, a.ui.card, .ui.link.card { transform: none; } .ui.cards a.card:hover, .ui.link.cards .card:hover, a.ui.card:hover, .ui.link.card:hover { cursor: pointer; z-index: 5; background: #FFFFFF; border: none; box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; transform: translateY(-3px); } /*------------------- Colors --------------------*/ /* Red */ .ui.red.cards > .card, .ui.cards > .red.card, .ui.red.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; } .ui.red.cards > .card:hover, .ui.cards > .red.card:hover, .ui.red.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; } /* Orange */ .ui.orange.cards > .card, .ui.cards > .orange.card, .ui.orange.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; } .ui.orange.cards > .card:hover, .ui.cards > .orange.card:hover, .ui.orange.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; } /* Yellow */ .ui.yellow.cards > .card, .ui.cards > .yellow.card, .ui.yellow.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; } .ui.yellow.cards > .card:hover, .ui.cards > .yellow.card:hover, .ui.yellow.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; } /* Olive */ .ui.olive.cards > .card, .ui.cards > .olive.card, .ui.olive.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; } .ui.olive.cards > .card:hover, .ui.cards > .olive.card:hover, .ui.olive.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; } /* Green */ .ui.green.cards > .card, .ui.cards > .green.card, .ui.green.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; } .ui.green.cards > .card:hover, .ui.cards > .green.card:hover, .ui.green.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; } /* Teal */ .ui.teal.cards > .card, .ui.cards > .teal.card, .ui.teal.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; } .ui.teal.cards > .card:hover, .ui.cards > .teal.card:hover, .ui.teal.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; } /* Blue */ .ui.blue.cards > .card, .ui.cards > .blue.card, .ui.blue.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; } .ui.blue.cards > .card:hover, .ui.cards > .blue.card:hover, .ui.blue.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; } /* Violet */ .ui.violet.cards > .card, .ui.cards > .violet.card, .ui.violet.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; } .ui.violet.cards > .card:hover, .ui.cards > .violet.card:hover, .ui.violet.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; } /* Purple */ .ui.purple.cards > .card, .ui.cards > .purple.card, .ui.purple.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; } .ui.purple.cards > .card:hover, .ui.cards > .purple.card:hover, .ui.purple.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; } /* Pink */ .ui.pink.cards > .card, .ui.cards > .pink.card, .ui.pink.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; } .ui.pink.cards > .card:hover, .ui.cards > .pink.card:hover, .ui.pink.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; } /* Brown */ .ui.brown.cards > .card, .ui.cards > .brown.card, .ui.brown.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; } .ui.brown.cards > .card:hover, .ui.cards > .brown.card:hover, .ui.brown.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; } /* Grey */ .ui.grey.cards > .card, .ui.cards > .grey.card, .ui.grey.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; } .ui.grey.cards > .card:hover, .ui.cards > .grey.card:hover, .ui.grey.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; } /* Black */ .ui.black.cards > .card, .ui.cards > .black.card, .ui.black.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; } .ui.black.cards > .card:hover, .ui.cards > .black.card:hover, .ui.black.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; } /*-------------- Card Count ---------------*/ .ui.one.cards { margin-left: 0em; margin-right: 0em; } .ui.one.cards > .card { width: 100%; } .ui.two.cards { margin-left: -1em; margin-right: -1em; } .ui.two.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.three.cards { margin-left: -1em; margin-right: -1em; } .ui.three.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.four.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.five.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.five.cards > .card { width: calc( 20% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.six.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.six.cards > .card { width: calc( 16.66666667% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.seven.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.seven.cards > .card { width: calc( 14.28571429% - 1em ); margin-left: 0.5em; margin-right: 0.5em; } .ui.eight.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.eight.cards > .card { width: calc( 12.5% - 1em ); margin-left: 0.5em; margin-right: 0.5em; font-size: 11px; } .ui.nine.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.nine.cards > .card { width: calc( 11.11111111% - 1em ); margin-left: 0.5em; margin-right: 0.5em; font-size: 10px; } .ui.ten.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.ten.cards > .card { width: calc( 10% - 1em ); margin-left: 0.5em; margin-right: 0.5em; } /*------------------- Doubling --------------------*/ /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.two.doubling.cards { margin-left: 0em; margin-right: 0em; } .ui.two.doubling.cards > .card { width: 100%; margin-left: 0em; margin-right: 0em; } .ui.three.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.three.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.four.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.five.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.five.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.six.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.six.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.seven.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.seven.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.eight.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.nine.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.nine.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.ten.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.ten.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.two.doubling.cards { margin-left: 0em; margin-right: 0em; } .ui.two.doubling.cards > .card { width: 100%; margin-left: 0em; margin-right: 0em; } .ui.three.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.three.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.four.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.five.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.five.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.six.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.six.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.eight.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.eight.doubling.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.nine.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.nine.doubling.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.ten.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.ten.doubling.cards > .card { width: calc( 20% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.cards { display: block !important; } .ui.stackable.cards .card:first-child { margin-top: 0em !important; } .ui.stackable.cards > .card { display: block !important; height: auto !important; margin: 1em 1em; padding: 0 !important; width: calc( 100% - 2em ) !important; } } /*-------------- Size ---------------*/ .ui.cards > .card { font-size: 1em; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ .ui.cards > .card > .content > .description, .ui.card > .content > .description { opacity: 0.9; } /*! * # Semantic UI - Comment * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Comments *******************************/ /*------------------- View --------------------*/ /*------------------- Elements --------------------*/ /* Comment */ /* Nested Comment */ /* Avatar */ /* Content */ /* Author */ /* Metadata */ /* Text */ /* Actions */ /* Reply */ /*------------------- Variations --------------------*/ /* Threaded */ /* Minimal */ /* Packaged Theme */ /******************************* Comments *******************************/ /*------------------- View --------------------*/ /*------------------- Elements --------------------*/ /* Comment */ /* Nested Comment */ /* Avatar */ /* Content */ /* Author */ /* Metadata */ /* Text */ /* Actions */ /* Reply */ /*------------------- Variations --------------------*/ /* Threaded */ /* Minimal */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Comments ---------------*/ .ui.comments { margin: 1.5em 0em; max-width: 650px; } .ui.comments:first-child { margin-top: 0em; } .ui.comments:last-child { margin-bottom: 0em; } /*-------------- Comment ---------------*/ .ui.comments .comment { position: relative; background: none; margin: 0.5em 0em 0em; padding: 0.5em 0em 0em; border: none; border-top: none; line-height: 1.2; } .ui.comments .comment:first-child { margin-top: 0em; padding-top: 0em; } /*-------------------- Nested Comments ---------------------*/ .ui.comments .comment .comments { margin: 0em 0em 0.5em 0.5em; padding: 1em 0em 1em 1em; } .ui.comments .comment .comments:before { position: absolute; top: 0px; left: 0px; } .ui.comments .comment .comments .comment { border: none; border-top: none; background: none; } /*-------------- Avatar ---------------*/ .ui.comments .comment .avatar { display: block; width: 2.5em; height: auto; float: left; margin: 0.2em 0em 0em; } .ui.comments .comment img.avatar, .ui.comments .comment .avatar img { display: block; margin: 0em auto; width: 100%; height: 100%; border-radius: 0.25rem; } /*-------------- Content ---------------*/ .ui.comments .comment > .content { display: block; } /* If there is an avatar move content over */ .ui.comments .comment > .avatar ~ .content { margin-left: 3.5em; } /*-------------- Author ---------------*/ .ui.comments .comment .author { font-size: 1em; color: #4A3041; font-weight: bold; } .ui.comments .comment a.author { cursor: pointer; } .ui.comments .comment a.author:hover { color: #2f701b; } /*-------------- Metadata ---------------*/ .ui.comments .comment .metadata { display: inline-block; margin-left: 0.5em; color: rgba(0, 0, 0, 0.4); font-size: 0.875em; } .ui.comments .comment .metadata > * { display: inline-block; margin: 0em 0.5em 0em 0em; } .ui.comments .comment .metadata > :last-child { margin-right: 0em; } /*-------------------- Comment Text ---------------------*/ .ui.comments .comment .text { margin: 0.25em 0em 0.5em; font-size: 1em; word-wrap: break-word; color: #4A3041; line-height: 1.3; } /*-------------------- User Actions ---------------------*/ .ui.comments .comment .actions { font-size: 0.875em; } .ui.comments .comment .actions a { cursor: pointer; display: inline-block; margin: 0em 0.75em 0em 0em; color: rgba(0, 0, 0, 0.4); } .ui.comments .comment .actions a:last-child { margin-right: 0em; } .ui.comments .comment .actions a.active, .ui.comments .comment .actions a:hover { color: rgba(0, 0, 0, 0.8); } /*-------------------- Reply Form ---------------------*/ .ui.comments > .reply.form { margin-top: 1em; } .ui.comments .comment .reply.form { width: 100%; margin-top: 1em; } .ui.comments .reply.form textarea { font-size: 1em; height: 12em; } /******************************* State *******************************/ .ui.collapsed.comments, .ui.comments .collapsed.comments, .ui.comments .collapsed.comment { display: none; } /******************************* Variations *******************************/ /*-------------------- Threaded ---------------------*/ .ui.threaded.comments .comment .comments { margin: -1.5em 0 -1em 1.25em; padding: 3em 0em 2em 2.25em; box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15); } /*-------------------- Minimal ---------------------*/ .ui.minimal.comments .comment .actions { opacity: 0; position: absolute; top: 0px; right: 0px; left: auto; transition: opacity 0.2s ease; transition-delay: 0.1s; } .ui.minimal.comments .comment > .content:hover > .actions { opacity: 1; } /*------------------- Sizes --------------------*/ .ui.mini.comments { font-size: 0.8125rem; } .ui.tiny.comments { font-size: 0.875rem; } .ui.small.comments { font-size: 0.9375rem; } .ui.comments { font-size: 1rem; } .ui.large.comments { font-size: 1.125rem; } .ui.big.comments { font-size: 1.3125rem; } .ui.huge.comments { font-size: 1.4375rem; } .ui.massive.comments { font-size: 1.6875rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Feed * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Feed *******************************/ /*------------------- Feed --------------------*/ /*------------------- Elements --------------------*/ /* Event */ /* Event Label */ /* Icon Label */ /* Image Label */ /* Content w/ Label */ /* Content */ /* Date */ /* Summary */ /* Summary Image */ /* Summary Date */ /* User */ /* Extra Summary Data */ /* Extra Images */ /* Extra Text */ /* Metadata Group */ /* Like */ /* Metadata Divider */ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Feed *******************************/ /*------------------- Feed --------------------*/ /*------------------- Elements --------------------*/ /* Event */ /* Event Label */ /* Icon Label */ /* Image Label */ /* Content w/ Label */ /* Content */ /* Date */ /* Summary */ /* Summary Image */ /* Summary Date */ /* User */ /* Extra Summary Data */ /* Extra Images */ /* Extra Text */ /* Metadata Group */ /* Like */ /* Metadata Divider */ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Activity Feed *******************************/ .ui.feed { margin: 1em 0em; } .ui.feed:first-child { margin-top: 0em; } .ui.feed:last-child { margin-bottom: 0em; } /******************************* Content *******************************/ /* Event */ .ui.feed > .event { display: flex; flex-direction: row; width: 100%; padding: 0.1875rem 0em; margin: 0em; background: none; border-top: none; } .ui.feed > .event:first-child { border-top: 0px; padding-top: 0em; } .ui.feed > .event:last-child { padding-bottom: 0em; } /* Event Label */ .ui.feed > .event > .label { display: block; flex: 0 0 auto; width: 2.5em; height: auto; align-self: stretch; text-align: left; } .ui.feed > .event > .label .icon { opacity: 1; font-size: 1.5em; width: 100%; padding: 0.25em; background: none; border: none; border-radius: none; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .label img { width: 100%; height: auto; border-radius: 500rem; } .ui.feed > .event > .label + .content { margin: 0.5em 0em 0.3125em 1.125em; } /*-------------- Content ---------------*/ /* Content */ .ui.feed > .event > .content { display: block; flex: 1 1 auto; align-self: stretch; text-align: left; word-wrap: break-word; } .ui.feed > .event:last-child > .content { padding-bottom: 0em; } /* Link */ .ui.feed > .event > .content a { cursor: pointer; } /*-------------- Date ---------------*/ .ui.feed > .event > .content .date { margin: -0.5rem 0em 0em; padding: 0em; font-weight: normal; font-size: 1em; font-style: normal; color: rgba(0, 0, 0, 0.4); } /*-------------- Summary ---------------*/ .ui.feed > .event > .content .summary { margin: 0em; font-size: 1em; font-weight: bold; color: #4A3041; } /* Summary Image */ .ui.feed > .event > .content .summary img { display: inline-block; width: auto; height: 10em; margin: -0.25em 0.25em 0em 0em; border-radius: 0.25em; vertical-align: middle; } /*-------------- User ---------------*/ .ui.feed > .event > .content .user { display: inline-block; font-weight: bold; margin-right: 0em; vertical-align: baseline; } .ui.feed > .event > .content .user img { margin: -0.25em 0.25em 0em 0em; width: auto; height: 10em; vertical-align: middle; } /*-------------- Inline Date ---------------*/ /* Date inside Summary */ .ui.feed > .event > .content .summary > .date { display: inline-block; float: none; font-weight: normal; font-size: 0.875em; font-style: normal; margin: 0em 0em 0em 0.5em; padding: 0em; color: rgba(0, 0, 0, 0.4); } /*-------------- Extra Summary ---------------*/ .ui.feed > .event > .content .extra { margin: 0.5em 0em 0em; background: none; padding: 0em; color: #4A3041; } /* Images */ .ui.feed > .event > .content .extra.images img { display: inline-block; margin: 0em 0.25em 0em 0em; width: 6em; } /* Text */ .ui.feed > .event > .content .extra.text { padding: 0em; border-left: none; font-size: 1em; max-width: 500px; line-height: 1.6; } /*-------------- Meta ---------------*/ .ui.feed > .event > .content .meta { display: inline-block; font-size: 0.875em; margin: 0.5em 0em 0em; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0em; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .content .meta > * { position: relative; margin-left: 0.75em; } .ui.feed > .event > .content .meta > *:after { content: ''; color: rgba(0, 0, 0, 0.2); top: 0em; left: -1em; opacity: 1; position: absolute; vertical-align: top; } .ui.feed > .event > .content .meta .like { color: ''; transition: 0.2s color ease; } .ui.feed > .event > .content .meta .like:hover .icon { color: #FF2733; } .ui.feed > .event > .content .meta .active.like .icon { color: #EF404A; } /* First element */ .ui.feed > .event > .content .meta > :first-child { margin-left: 0em; } .ui.feed > .event > .content .meta > :first-child::after { display: none; } /* Action */ .ui.feed > .event > .content .meta a, .ui.feed > .event > .content .meta > .icon { cursor: pointer; opacity: 1; color: rgba(0, 0, 0, 0.5); transition: color 0.1s ease; } .ui.feed > .event > .content .meta a:hover, .ui.feed > .event > .content .meta a:hover .icon, .ui.feed > .event > .content .meta > .icon:hover { color: rgba(0, 0, 0, 0.95); } /******************************* Variations *******************************/ .ui.small.feed { font-size: 0.9375rem; } .ui.feed { font-size: 1rem; } .ui.large.feed { font-size: 1.125rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Item * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Packaged Theme */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Item ---------------*/ .ui.items > .item { display: flex; margin: 1em 0em; width: 100%; min-height: 0px; background: transparent; padding: 0em; border: none; border-radius: 0rem; box-shadow: none; transition: box-shadow 0.1s ease; z-index: ''; } .ui.items > .item a { cursor: pointer; } /*-------------- Items ---------------*/ .ui.items { margin: 1.5em 0em; } .ui.items:first-child { margin-top: 0em !important; } .ui.items:last-child { margin-bottom: 0em !important; } /*-------------- Item ---------------*/ .ui.items > .item:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item:first-child { margin-top: 0em; } .ui.items > .item:last-child { margin-bottom: 0em; } /*-------------- Images ---------------*/ .ui.items > .item > .image { position: relative; flex: 0 0 auto; display: block; float: none; margin: 0em; padding: 0em; max-height: ''; align-self: top; } .ui.items > .item > .image > img { display: block; width: 100%; height: auto; border-radius: 0.125rem; border: none; } .ui.items > .item > .image:only-child > img { border-radius: 0rem; } /*-------------- Content ---------------*/ .ui.items > .item > .content { display: block; flex: 1 1 auto; background: none; margin: 0em; padding: 0em; box-shadow: none; font-size: 1em; border: none; border-radius: 0em; } .ui.items > .item > .content:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item > .image + .content { min-width: 0; width: auto; display: block; margin-left: 0em; align-self: top; padding-left: 1.5em; } .ui.items > .item > .content > .header { display: inline-block; margin: -0.3em 0em 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.items > .item > .content > .header:not(.ui) { font-size: 1.3125em; } /*-------------- Floated ---------------*/ .ui.items > .item [class*="left floated"] { float: left; } .ui.items > .item [class*="right floated"] { float: right; } /*-------------- Content Image ---------------*/ .ui.items > .item .content img { align-self: middle; width: ''; } .ui.items > .item img.avatar, .ui.items > .item .avatar img { width: ''; height: ''; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.items > .item > .content > .description { margin-top: 0.6em; max-width: auto; font-size: 1em; line-height: 1.6; color: #4A3041; } /*-------------- Paragraph ---------------*/ .ui.items > .item > .content p { margin: 0em 0em 0.5em; } .ui.items > .item > .content p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.items > .item .meta { margin: 0.5em 0em 0.5em; font-size: 1em; line-height: 1em; color: rgba(0, 0, 0, 0.6); } .ui.items > .item .meta * { margin-right: 0.3em; } .ui.items > .item .meta :last-child { margin-right: 0em; } .ui.items > .item .meta [class*="right floated"] { margin-right: 0em; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.items > .item > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.items > .item > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.items > .item > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > a.header:hover { color: #2f701b; } /* Meta */ .ui.items > .item .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta > a:not(.ui):hover { color: #4A3041; } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.items > .item > .content .favorite.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .favorite.icon:hover { opacity: 1; color: #FFB70A; } .ui.items > .item > .content .active.favorite.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.items > .item > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.items > .item > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.items > .item .extra { display: block; position: relative; background: none; margin: 0.5rem 0em 0em; width: 100%; padding: 0em 0em 0em; top: 0em; left: 0em; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; border-top: none; } .ui.items > .item .extra > * { margin: 0.25rem 0.5rem 0.25rem 0em; } .ui.items > .item .extra > [class*="right floated"] { margin: 0.25rem 0em 0.25rem 0.5rem; } .ui.items > .item .extra:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /******************************* Responsive *******************************/ /* Default Image Width */ .ui.items > .item > .image:not(.ui) { width: 175px; } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.items > .item { margin: 1em 0em; } .ui.items > .item > .image:not(.ui) { width: 150px; } .ui.items > .item > .image + .content { display: block; padding: 0em 0em 0em 1em; } } /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.items:not(.unstackable) > .item { flex-direction: column; margin: 2em 0em; } .ui.items:not(.unstackable) > .item > .image { display: block; margin-left: auto; margin-right: auto; } .ui.items:not(.unstackable) > .item > .image, .ui.items:not(.unstackable) > .item > .image > img { max-width: 100% !important; width: auto !important; max-height: 250px !important; } .ui.items:not(.unstackable) > .item > .image + .content { display: block; padding: 1.5em 0em 0em; } } /******************************* Variations *******************************/ /*------------------- Aligned --------------------*/ .ui.items > .item > .image + [class*="top aligned"].content { align-self: flex-start; } .ui.items > .item > .image + [class*="middle aligned"].content { align-self: center; } .ui.items > .item > .image + [class*="bottom aligned"].content { align-self: flex-end; } /*-------------- Relaxed ---------------*/ .ui.relaxed.items > .item { margin: 1.5em 0em; } .ui[class*="very relaxed"].items > .item { margin: 2em 0em; } /*------------------- Divided --------------------*/ .ui.divided.items > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; padding: 1em 0em; } .ui.divided.items > .item:first-child { border-top: none; margin-top: 0em !important; padding-top: 0em !important; } .ui.divided.items > .item:last-child { margin-bottom: 0em !important; padding-bottom: 0em !important; } /* Relaxed Divided */ .ui.relaxed.divided.items > .item { margin: 0em; padding: 1.5em 0em; } .ui[class*="very relaxed"].divided.items > .item { margin: 0em; padding: 2em 0em; } /*------------------- Link --------------------*/ .ui.items a.item:hover, .ui.link.items > .item:hover { cursor: pointer; } .ui.items a.item:hover .content .header, .ui.link.items > .item:hover .content .header { color: #2f701b; } /*-------------- Size ---------------*/ .ui.items > .item { font-size: 1em; } /*--------------- Unstackable ----------------*/ @media only screen and (max-width: 767px) { .ui.unstackable.items > .item > .image, .ui.unstackable.items > .item > .image > img { width: 125px !important; } } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Statistic * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Size */ /* Packaged Theme */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Size */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Statistic *******************************/ /* Standalone */ .ui.statistic { display: inline-flex; flex-direction: column; margin: 1em 0em; max-width: auto; } .ui.statistic + .ui.statistic { margin: 0em 0em 0em 1.5em; } .ui.statistic:first-child { margin-top: 0em; } .ui.statistic:last-child { margin-bottom: 0em; } /******************************* Group *******************************/ /* Grouped */ .ui.statistics { display: flex; align-items: flex-start; flex-wrap: wrap; } .ui.statistics > .statistic { display: inline-flex; flex: 0 1 auto; flex-direction: column; margin: 0em 1.5em 1em; max-width: auto; } .ui.statistics { display: flex; margin: 1em -1.5em -1em; } /* Clearing */ .ui.statistics:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.statistics:first-child { margin-top: 0em; } /******************************* Content *******************************/ /*-------------- Value ---------------*/ .ui.statistics .statistic > .value, .ui.statistic > .value { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 4rem; font-weight: normal; line-height: 1em; color: #1B1C1D; text-transform: uppercase; text-align: center; } /*-------------- Label ---------------*/ .ui.statistics .statistic > .label, .ui.statistic > .label { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; color: #4A3041; text-transform: uppercase; text-align: center; } /* Top Label */ .ui.statistics .statistic > .label ~ .value, .ui.statistic > .label ~ .value { margin-top: 0rem; } /* Bottom Label */ .ui.statistics .statistic > .value ~ .label, .ui.statistic > .value ~ .label { margin-top: 0rem; } /******************************* Types *******************************/ /*-------------- Icon Value ---------------*/ .ui.statistics .statistic > .value .icon, .ui.statistic > .value .icon { opacity: 1; width: auto; margin: 0em; } /*-------------- Text Value ---------------*/ .ui.statistics .statistic > .text.value, .ui.statistic > .text.value { line-height: 1em; min-height: 2em; font-weight: bold; text-align: center; } .ui.statistics .statistic > .text.value + .label, .ui.statistic > .text.value + .label { text-align: center; } /*-------------- Image Value ---------------*/ .ui.statistics .statistic > .value img, .ui.statistic > .value img { max-height: 3rem; vertical-align: baseline; } /******************************* Variations *******************************/ /*-------------- Count ---------------*/ .ui.ten.statistics { margin: 0em 0em -1em; } .ui.ten.statistics .statistic { min-width: 10%; margin: 0em 0em 1em; } .ui.nine.statistics { margin: 0em 0em -1em; } .ui.nine.statistics .statistic { min-width: 11.11111111%; margin: 0em 0em 1em; } .ui.eight.statistics { margin: 0em 0em -1em; } .ui.eight.statistics .statistic { min-width: 12.5%; margin: 0em 0em 1em; } .ui.seven.statistics { margin: 0em 0em -1em; } .ui.seven.statistics .statistic { min-width: 14.28571429%; margin: 0em 0em 1em; } .ui.six.statistics { margin: 0em 0em -1em; } .ui.six.statistics .statistic { min-width: 16.66666667%; margin: 0em 0em 1em; } .ui.five.statistics { margin: 0em 0em -1em; } .ui.five.statistics .statistic { min-width: 20%; margin: 0em 0em 1em; } .ui.four.statistics { margin: 0em 0em -1em; } .ui.four.statistics .statistic { min-width: 25%; margin: 0em 0em 1em; } .ui.three.statistics { margin: 0em 0em -1em; } .ui.three.statistics .statistic { min-width: 33.33333333%; margin: 0em 0em 1em; } .ui.two.statistics { margin: 0em 0em -1em; } .ui.two.statistics .statistic { min-width: 50%; margin: 0em 0em 1em; } .ui.one.statistics { margin: 0em 0em -1em; } .ui.one.statistics .statistic { min-width: 100%; margin: 0em 0em 1em; } /*-------------- Horizontal ---------------*/ .ui.horizontal.statistic { flex-direction: row; align-items: center; } .ui.horizontal.statistics { flex-direction: column; margin: 0em; max-width: none; } .ui.horizontal.statistics .statistic { flex-direction: row; align-items: center; max-width: none; margin: 1em 0em; } .ui.horizontal.statistic > .text.value, .ui.horizontal.statistics > .statistic > .text.value { min-height: 0em !important; } .ui.horizontal.statistics .statistic > .value .icon, .ui.horizontal.statistic > .value .icon { width: 1.18em; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value { display: inline-block; vertical-align: middle; } .ui.horizontal.statistics .statistic > .label, .ui.horizontal.statistic > .label { display: inline-block; vertical-align: middle; margin: 0em 0em 0em 0.75em; } /*-------------- Colors ---------------*/ .ui.red.statistics .statistic > .value, .ui.statistics .red.statistic > .value, .ui.red.statistic > .value { color: #DB2828; } .ui.orange.statistics .statistic > .value, .ui.statistics .orange.statistic > .value, .ui.orange.statistic > .value { color: #F2711C; } .ui.yellow.statistics .statistic > .value, .ui.statistics .yellow.statistic > .value, .ui.yellow.statistic > .value { color: #FBBD08; } .ui.olive.statistics .statistic > .value, .ui.statistics .olive.statistic > .value, .ui.olive.statistic > .value { color: #B5CC18; } .ui.green.statistics .statistic > .value, .ui.statistics .green.statistic > .value, .ui.green.statistic > .value { color: #21BA45; } .ui.teal.statistics .statistic > .value, .ui.statistics .teal.statistic > .value, .ui.teal.statistic > .value { color: #00B5AD; } .ui.blue.statistics .statistic > .value, .ui.statistics .blue.statistic > .value, .ui.blue.statistic > .value { color: #2185D0; } .ui.violet.statistics .statistic > .value, .ui.statistics .violet.statistic > .value, .ui.violet.statistic > .value { color: #6435C9; } .ui.purple.statistics .statistic > .value, .ui.statistics .purple.statistic > .value, .ui.purple.statistic > .value { color: #A333C8; } .ui.pink.statistics .statistic > .value, .ui.statistics .pink.statistic > .value, .ui.pink.statistic > .value { color: #E03997; } .ui.brown.statistics .statistic > .value, .ui.statistics .brown.statistic > .value, .ui.brown.statistic > .value { color: #A5673F; } .ui.grey.statistics .statistic > .value, .ui.statistics .grey.statistic > .value, .ui.grey.statistic > .value { color: #767676; } /*-------------- Inverted ---------------*/ .ui.inverted.statistics .statistic > .value, .ui.inverted.statistic .value { color: #FFFFFF; } .ui.inverted.statistics .statistic > .label, .ui.inverted.statistic .label { color: rgba(255, 255, 255, 0.9); } .ui.inverted.red.statistics .statistic > .value, .ui.statistics .inverted.red.statistic > .value, .ui.inverted.red.statistic > .value { color: #FF695E; } .ui.inverted.orange.statistics .statistic > .value, .ui.statistics .inverted.orange.statistic > .value, .ui.inverted.orange.statistic > .value { color: #FF851B; } .ui.inverted.yellow.statistics .statistic > .value, .ui.statistics .inverted.yellow.statistic > .value, .ui.inverted.yellow.statistic > .value { color: #FFE21F; } .ui.inverted.olive.statistics .statistic > .value, .ui.statistics .inverted.olive.statistic > .value, .ui.inverted.olive.statistic > .value { color: #D9E778; } .ui.inverted.green.statistics .statistic > .value, .ui.statistics .inverted.green.statistic > .value, .ui.inverted.green.statistic > .value { color: #2ECC40; } .ui.inverted.teal.statistics .statistic > .value, .ui.statistics .inverted.teal.statistic > .value, .ui.inverted.teal.statistic > .value { color: #6DFFFF; } .ui.inverted.blue.statistics .statistic > .value, .ui.statistics .inverted.blue.statistic > .value, .ui.inverted.blue.statistic > .value { color: #54C8FF; } .ui.inverted.violet.statistics .statistic > .value, .ui.statistics .inverted.violet.statistic > .value, .ui.inverted.violet.statistic > .value { color: #A291FB; } .ui.inverted.purple.statistics .statistic > .value, .ui.statistics .inverted.purple.statistic > .value, .ui.inverted.purple.statistic > .value { color: #DC73FF; } .ui.inverted.pink.statistics .statistic > .value, .ui.statistics .inverted.pink.statistic > .value, .ui.inverted.pink.statistic > .value { color: #FF8EDF; } .ui.inverted.brown.statistics .statistic > .value, .ui.statistics .inverted.brown.statistic > .value, .ui.inverted.brown.statistic > .value { color: #D67C1C; } .ui.inverted.grey.statistics .statistic > .value, .ui.statistics .inverted.grey.statistic > .value, .ui.inverted.grey.statistic > .value { color: #DCDDDE; } /*-------------- Floated ---------------*/ .ui[class*="left floated"].statistic { float: left; margin: 0em 2em 1em 0em; } .ui[class*="right floated"].statistic { float: right; margin: 0em 0em 1em 2em; } .ui.floated.statistic:last-child { margin-bottom: 0em; } /*-------------- Sizes ---------------*/ /* Mini */ .ui.mini.statistics .statistic > .value, .ui.mini.statistic > .value { font-size: 1.5rem !important; } .ui.mini.horizontal.statistics .statistic > .value, .ui.mini.horizontal.statistic > .value { font-size: 1.5rem !important; } .ui.mini.statistics .statistic > .text.value, .ui.mini.statistic > .text.value { font-size: 1rem !important; } /* Tiny */ .ui.tiny.statistics .statistic > .value, .ui.tiny.statistic > .value { font-size: 2rem !important; } .ui.tiny.horizontal.statistics .statistic > .value, .ui.tiny.horizontal.statistic > .value { font-size: 2rem !important; } .ui.tiny.statistics .statistic > .text.value, .ui.tiny.statistic > .text.value { font-size: 1rem !important; } /* Small */ .ui.small.statistics .statistic > .value, .ui.small.statistic > .value { font-size: 3rem !important; } .ui.small.horizontal.statistics .statistic > .value, .ui.small.horizontal.statistic > .value { font-size: 2rem !important; } .ui.small.statistics .statistic > .text.value, .ui.small.statistic > .text.value { font-size: 1rem !important; } /* Medium */ .ui.statistics .statistic > .value, .ui.statistic > .value { font-size: 4rem !important; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value { font-size: 3rem !important; } .ui.statistics .statistic > .text.value, .ui.statistic > .text.value { font-size: 2rem !important; } /* Large */ .ui.large.statistics .statistic > .value, .ui.large.statistic > .value { font-size: 5rem !important; } .ui.large.horizontal.statistics .statistic > .value, .ui.large.horizontal.statistic > .value { font-size: 4rem !important; } .ui.large.statistics .statistic > .text.value, .ui.large.statistic > .text.value { font-size: 2.5rem !important; } /* Huge */ .ui.huge.statistics .statistic > .value, .ui.huge.statistic > .value { font-size: 6rem !important; } .ui.huge.horizontal.statistics .statistic > .value, .ui.huge.horizontal.statistic > .value { font-size: 5rem !important; } .ui.huge.statistics .statistic > .text.value, .ui.huge.statistic > .text.value { font-size: 2.5rem !important; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /* Modules */ /*! * # Semantic UI - Accordion * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Packaged Theme */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Accordion *******************************/ .ui.accordion, .ui.accordion .accordion { max-width: 100%; } .ui.accordion .accordion { margin: 1em 0em 0em; padding: 0em; } /* Title */ .ui.accordion .title, .ui.accordion .accordion .title { cursor: pointer; } /* Default Styling */ .ui.accordion .title:not(.ui) { padding: 0.5em 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; color: #4A3041; } /* Content */ .ui.accordion .title ~ .content, .ui.accordion .accordion .title ~ .content { display: none; } /* Default Styling */ .ui.accordion:not(.styled) .title ~ .content:not(.ui), .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { margin: ''; padding: 0.5em 0em 1em; } .ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { padding-bottom: 0em; } /* Arrow */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { display: inline-block; float: none; opacity: 1; width: 1.25em; height: 1em; margin: 0em 0.25rem 0em 0rem; padding: 0em; font-size: 1em; transition: transform 0.1s ease, opacity 0.1s ease; vertical-align: baseline; transform: none; } /*-------------- Coupling ---------------*/ /* Menu */ .ui.accordion.menu .item .title { display: block; padding: 0em; } .ui.accordion.menu .item .title > .dropdown.icon { float: right; margin: 0.3em 0em 0em 1em; transform: rotate(180deg); } /* Header */ .ui.accordion .ui.header .dropdown.icon { font-size: 1em; margin: 0em 0.25rem 0em 0rem; } /******************************* States *******************************/ .ui.accordion .active.title .dropdown.icon, .ui.accordion .accordion .active.title .dropdown.icon { transform: rotate(90deg); } .ui.accordion.menu .item .active.title > .dropdown.icon { transform: rotate(90deg); } /******************************* Types *******************************/ /*-------------- Styled ---------------*/ .ui.styled.accordion { width: 600px; } .ui.styled.accordion, .ui.styled.accordion .accordion { border-radius: 0.25rem; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15); } .ui.styled.accordion .title, .ui.styled.accordion .accordion .title { margin: 0em; padding: 0.75em 1em; color: rgba(0, 0, 0, 0.4); font-weight: bold; border-top: 1px solid rgba(34, 36, 38, 0.15); transition: background 0.1s ease, color 0.1s ease; } .ui.styled.accordion > .title:first-child, .ui.styled.accordion .accordion .title:first-child { border-top: none; } /* Content */ .ui.styled.accordion .content, .ui.styled.accordion .accordion .content { margin: 0em; padding: 0.5em 1em 1.5em; } .ui.styled.accordion .accordion .content { padding: 0em; padding: 0.5em 1em 1.5em; } /* Hover */ .ui.styled.accordion .title:hover, .ui.styled.accordion .active.title, .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title { background: transparent; color: #4A3041; } .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title { background: transparent; color: #4A3041; } /* Active */ .ui.styled.accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } .ui.styled.accordion .accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } /******************************* States *******************************/ /*-------------- Active ---------------*/ .ui.accordion .active.content, .ui.accordion .accordion .active.content { display: block; } /******************************* Variations *******************************/ /*-------------- Fluid ---------------*/ .ui.fluid.accordion, .ui.fluid.accordion .accordion { width: 100%; } /*-------------- Inverted ---------------*/ .ui.inverted.accordion .title:not(.ui) { color: rgba(255, 255, 255, 0.9); } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Accordion'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } /* Dropdown Icon */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon { font-family: Accordion; line-height: 1; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.accordion .title .dropdown.icon:before, .ui.accordion .accordion .title .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } /******************************* User Overrides *******************************/ /*! * # Semantic UI - Checkbox * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Checkbox *******************************/ /*-------------- Content ---------------*/ .ui.checkbox { position: relative; display: inline-block; backface-visibility: hidden; outline: none; vertical-align: baseline; font-style: normal; min-height: 17px; font-size: 1rem; line-height: 1.6; min-width: 17px; } /* HTML Checkbox */ .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"] { cursor: pointer; position: absolute; top: 0px; left: 0px; opacity: 0 !important; outline: none; z-index: 3; width: 17px; height: 17px; } /*-------------- Box ---------------*/ .ui.checkbox .box, .ui.checkbox label { cursor: auto; position: relative; display: block; padding-left: 1.85714em; outline: none; font-size: 1em; } .ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; top: 0px; left: 0px; width: 17px; height: 17px; content: ''; background: #FFFFFF; border-radius: 0.1875rem; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; border: 1px solid var(--primary-dark-color); } /*-------------- Checkmark ---------------*/ .ui.checkbox .box:after, .ui.checkbox label:after { position: absolute; font-size: 14px; top: 0px; left: 0px; width: 17px; height: 17px; text-align: center; opacity: 0; color: #4A3041; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; } /*-------------- Label ---------------*/ /* Inside */ .ui.checkbox label, .ui.checkbox + label { color: #4A3041; transition: color 0.1s ease; } /* Outside */ .ui.checkbox + label { vertical-align: middle; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox label:hover, .ui.checkbox + label:hover { color: rgba(74, 48, 65, 0.9); } /*-------------- Down ---------------*/ .ui.checkbox .box:active::before, .ui.checkbox label:active::before { background: #F9FAFB; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox .box:active::after, .ui.checkbox label:active::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:active ~ label { color: var(--primary-dark-color); } /*-------------- Focus ---------------*/ .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before { background: #FFFFFF; border-color: #96C8DA; } .ui.checkbox input:focus ~ .box:after, .ui.checkbox input:focus ~ label:after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:focus ~ label { color: var(--primary-dark-color); } /*-------------- Active ---------------*/ .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { opacity: 1; color: rgba(0, 0, 0, 0.95); } /*-------------- Indeterminate ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, .ui.checkbox input:not([type=radio]):indeterminate ~ label:before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, .ui.checkbox input:not([type=radio]):indeterminate ~ label:after { opacity: 1; color: rgba(0, 0, 0, 0.95); } /*-------------- Active Focus ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .ui.checkbox input:checked:focus ~ .box:before, .ui.checkbox input:checked:focus ~ label:before { background: #FFFFFF; border-color: var(--primary-dark-color); } .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, .ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ label:after { color: rgba(0, 0, 0, 0.95); } /*-------------- Read-Only ---------------*/ .ui.read-only.checkbox, .ui.read-only.checkbox label { cursor: default; } /*-------------- Disabled ---------------*/ .ui.disabled.checkbox .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] ~ .box:after, .ui.checkbox input[disabled] ~ label { cursor: default !important; opacity: 0.8; color: #000000; } /*-------------- Hidden ---------------*/ /* Initialized checkbox moves input below element to prevent manually triggering */ .ui.checkbox input.hidden { z-index: -1; } /* Selectable Label */ .ui.checkbox input.hidden + label { cursor: pointer; -webkit-user-select: none; user-select: none; } /******************************* Types *******************************/ /*-------------- Radio ---------------*/ .ui.radio.checkbox { min-height: 15px; } .ui.radio.checkbox .box, .ui.radio.checkbox label { padding-left: 1.85714em; } /* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { content: ''; transform: none; width: 15px; height: 15px; border-radius: 500rem; top: 1px; left: 0px; } /* Bullet */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: none; content: '' !important; width: 15px; height: 15px; line-height: 15px; } /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { top: 1px; left: 0px; width: 15px; height: 15px; border-radius: 500rem; transform: scale(0.46666667); background-color: #4A3041; } /* Focus */ .ui.radio.checkbox input:focus ~ .box:before, .ui.radio.checkbox input:focus ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus ~ .box:after, .ui.radio.checkbox input:focus ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /* Indeterminate */ .ui.radio.checkbox input:indeterminate ~ .box:after, .ui.radio.checkbox input:indeterminate ~ label:after { opacity: 0; } /* Active */ .ui.radio.checkbox input:checked ~ .box:before, .ui.radio.checkbox input:checked ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:checked ~ .box:after, .ui.radio.checkbox input:checked ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /* Active Focus */ .ui.radio.checkbox input:focus:checked ~ .box:before, .ui.radio.checkbox input:focus:checked ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus:checked ~ .box:after, .ui.radio.checkbox input:focus:checked ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /*-------------- Slider ---------------*/ .ui.slider.checkbox { min-height: 1.25rem; } /* Input */ .ui.slider.checkbox input { width: 3.5rem; height: 1.25rem; } /* Label */ .ui.slider.checkbox .box, .ui.slider.checkbox label { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); } /* Line */ .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before { display: block; position: absolute; content: ''; border: none !important; left: 0em; z-index: 1; top: 0.4rem; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 0.1875rem; transform: none; border-radius: 500rem; transition: background 0.3s ease; } /* Handle */ .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0em; transform: none; border-radius: 500rem; transition: left 0.3s ease; } /* Focus */ .ui.slider.checkbox input:focus ~ .box:before, .ui.slider.checkbox input:focus ~ label:before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.slider.checkbox .box:hover, .ui.slider.checkbox label:hover { color: rgba(0, 0, 0, 0.8); } .ui.slider.checkbox .box:hover::before, .ui.slider.checkbox label:hover::before { background: rgba(0, 0, 0, 0.15); } /* Active */ .ui.slider.checkbox input:checked ~ .box, .ui.slider.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:checked ~ .box:before, .ui.slider.checkbox input:checked ~ label:before { background-color: #545454 !important; } .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ label:after { left: 2rem; } /* Active Focus */ .ui.slider.checkbox input:focus:checked ~ .box, .ui.slider.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:focus:checked ~ .box:before, .ui.slider.checkbox input:focus:checked ~ label:before { background-color: #000000 !important; } /*-------------- Toggle ---------------*/ .ui.toggle.checkbox { min-height: 1.5rem; } /* Input */ .ui.toggle.checkbox input { width: 3.5rem; height: 1.5rem; } /* Label */ .ui.toggle.checkbox .box, .ui.toggle.checkbox label { min-height: 1.5rem; padding-left: 4.5rem; color: #4A3041; } .ui.toggle.checkbox label { padding-top: 0.15em; } /* Switch */ .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before { display: block; position: absolute; content: ''; z-index: 1; transform: none; border: none; top: 0rem; background: rgba(0, 0, 0, 0.05); box-shadow: none; width: 3.5rem; height: 1.5rem; border-radius: 500rem; } /* Handle */ .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 0rem; left: 0em; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ .box:after, .ui.toggle.checkbox input ~ label:after { left: -0.05rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Focus */ .ui.toggle.checkbox input:focus ~ .box:before, .ui.toggle.checkbox input:focus ~ label:before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Active */ .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before { background-color: var(--primary-light-color) !important; } .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after { left: 2.15rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Active Focus */ .ui.toggle.checkbox input:focus:checked ~ .box, .ui.toggle.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before { background-color: var(--primary-light-color) !important; } /******************************* Variations *******************************/ /*-------------- Fitted ---------------*/ .ui.fitted.checkbox .box, .ui.fitted.checkbox label { padding-left: 0em !important; } .ui.fitted.toggle.checkbox, .ui.fitted.toggle.checkbox { width: 3.5rem; } .ui.fitted.slider.checkbox, .ui.fitted.slider.checkbox { width: 3.5rem; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Checkbox'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); } /* Checkmark */ .ui.checkbox label:after, .ui.checkbox .box:after { font-family: 'Checkbox'; } /* Checked */ .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { content: '\e800'; } /* Indeterminate */ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after { font-size: 12px; content: '\e801'; } /* UTF Reference .check:before { content: '\e800'; } .dash:before { content: '\e801'; } .plus:before { content: '\e802'; } */ /******************************* Site Overrides *******************************/ /* The top adjustment is to accommodate a checkbox label line-height of @lineHeight (see checkbox.variables) */ .ui.checkbox .box:before, .ui.checkbox label:before { top: 5px; } .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { top: 3px; } .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { top: 6px; } .ui.radio.checkbox input:checked ~ .box:after, .ui.radio.checkbox input:checked ~ label:after { top: 6px; } .ui.toggle.checkbox input:checked ~ label:after { top: 0px; } /*! * # Semantic UI - Dimmer * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Packaged Theme */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dimmer *******************************/ .dimmable:not(body) { position: relative; } .ui.dimmer { display: none; position: absolute; top: 0em !important; left: 0em !important; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 1em; background-color: rgba(0, 0, 0, 0.85); opacity: 0; line-height: 1; animation-fill-mode: both; animation-duration: 0.5s; transition: background-color 0.5s linear; flex-direction: column; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; will-change: opacity; z-index: 1000; } /* Dimmer Content */ .ui.dimmer > .content { -webkit-user-select: text; user-select: text; color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer { border-radius: inherit !important; } /* Scrollbars */ .ui.dimmer:not(.inverted)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* States *******************************/ /* Animating */ .animating.dimmable:not(body), .dimmed.dimmable:not(body) { overflow: hidden; } /* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer { display: flex; opacity: 1; } /* Disabled */ .ui.disabled.dimmer { width: 0 !important; height: 0 !important; } /******************************* Variations *******************************/ /*-------------- Legacy ---------------*/ /* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.legacy.dimmer, .dimmed.dimmable > .ui.visible.legacy.dimmer, .ui.active.legacy.dimmer { display: block; } /*-------------- Alignment ---------------*/ .ui[class*="top aligned"].dimmer { justify-content: flex-start; } .ui[class*="bottom aligned"].dimmer { justify-content: flex-end; } /*-------------- Page ---------------*/ .ui.page.dimmer { position: fixed; transform-style: ''; perspective: 2000px; transform-origin: center center; } body.animating.in.dimmable, body.dimmed.dimmable { overflow: hidden; } body.dimmable > .dimmer { position: fixed; } /*-------------- Blurring ---------------*/ .blurring.dimmable > :not(.dimmer) { filter: blur(0px) grayscale(0); transition: 800ms filter ease; } .blurring.dimmed.dimmable > :not(.dimmer) { filter: blur(5px) grayscale(0.7); } /* Dimmer Color */ .blurring.dimmable > .dimmer { background-color: rgba(0, 0, 0, 0.6); } .blurring.dimmable > .inverted.dimmer { background-color: rgba(255, 255, 255, 0.6); } /*-------------- Aligned ---------------*/ .ui.dimmer > .top.aligned.content > * { vertical-align: top; } .ui.dimmer > .bottom.aligned.content > * { vertical-align: bottom; } /*-------------- Inverted ---------------*/ .ui.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } .ui.inverted.dimmer > .content > * { color: #FFFFFF; } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dimmer { display: block; overflow: hidden; opacity: 1; width: 0%; height: 0%; z-index: -100; background-color: rgba(0, 0, 0, 0); } .dimmed.dimmable > .ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1; } .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0); } .dimmed.dimmable > .ui.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Dropdown * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dropdown *******************************/ /*------------------- Element --------------------*/ /*------------------- Content --------------------*/ /* Icon */ /* Current Text */ /* Menu */ /* Text */ /* Menu Item */ /* Sub Menu */ /* Menu Header */ /* Menu Divider */ /* Menu Input */ /* Menu Image */ /* Item Sub-Element */ /* Sub-Menu Dropdown Icon */ /* Description */ /* Message */ /* Floated Content */ /*------------------- Types --------------------*/ /*------------ Selection --------------*/ /* */ /* Responsive */ /* Derived */ /* 1px / em size */ /* Hover */ /* Focus */ /* Visible */ /* Visible Hover */ /*-------------- Search --------------*/ /* Search Selection */ /* Inline */ /*-------------- Multiple --------------*/ /* Split Actual Padding Between Child and Parent (allows for label spacing) */ /* Child Elements */ /* Dropdown Icon */ /* Selection Label */ /*------------------- States --------------------*/ /* Hovered */ /* Default Text */ /* Loading */ /* Active Menu Item */ /* Selected */ /* Error */ /* Clearable */ /*------------------- Variations --------------------*/ /* Scrolling */ /* 0px / em size */ /* Upward */ /* Flyout Direction */ /* Left */ /* Simple */ /* Floating */ /* Pointing */ /* Pointing Upward */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dropdown *******************************/ .ui.dropdown { cursor: pointer; position: relative; display: inline-block; outline: none; text-align: left; transition: box-shadow 0.1s ease, width 0.1s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /******************************* Content *******************************/ /*-------------- Menu ---------------*/ .ui.dropdown .menu { cursor: auto; position: absolute; display: none; outline: none; top: 100%; min-width: max-content; margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.25rem; transition: opacity 0.1s ease; z-index: 11; will-change: transform, opacity; } .ui.dropdown .menu > * { white-space: nowrap; } /*-------------- Hidden Input ---------------*/ .ui.dropdown > input:not(.search):first-child, .ui.dropdown > select { display: none !important; } /*-------------- Dropdown Icon ---------------*/ .ui.dropdown > .dropdown.icon { position: relative; width: auto; font-size: 0.75em; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon { width: auto; float: right; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon + .text { margin-right: 1em; } /*-------------- Text ---------------*/ .ui.dropdown > .text { display: inline-block; transition: none; } /*-------------- Menu Item ---------------*/ .ui.dropdown .menu > .item { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: left; border-top: none; line-height: 1em; color: #4A3041; padding: 0.8125rem 1.125rem !important; font-size: 1rem; text-transform: none; font-weight: normal; box-shadow: none; -webkit-touch-callout: none; } .ui.dropdown .menu > .item:first-child { border-top-width: 0px; } /*-------------- Floated Content ---------------*/ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"] { float: right !important; margin-right: 0em !important; margin-left: 1em !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"] { float: left !important; margin-left: 0em !important; margin-right: 1em !important; } .ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated { margin-top: 0em; } /*-------------- Menu Divider ---------------*/ .ui.dropdown .menu > .header { margin: 1rem 0rem 0.75rem; padding: 0em 1.125rem; color: rgba(0, 0, 0, 0.85); font-size: 0.6875em; font-weight: bold; text-transform: uppercase; } .ui.dropdown .menu > .divider { border-top: 1px solid rgba(34, 36, 38, 0.1); height: 0em; margin: 0.5em 0em; } .ui.dropdown.dropdown .menu > .input { width: auto; display: flex; margin: 1.125rem 0.8125rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input { margin-top: 0em; } .ui.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 0.875em; } .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label { padding-top: 0.5em; padding-bottom: 0.5em; } /*----------------- Item Description -------------------*/ .ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description { float: right; margin: 0em 0em 0em 1em; color: rgba(0, 0, 0, 0.4); } /*----------------- Message -------------------*/ .ui.dropdown .menu > .message { padding: 0.8125rem 1.125rem; font-weight: normal; } .ui.dropdown .menu > .message:not(.ui) { color: rgba(0, 0, 0, 0.4); } /*-------------- Sub Menu ---------------*/ .ui.dropdown .menu .menu { top: 0% !important; left: 100%; right: auto; margin: 0em 0em 0em -0.5em !important; border-radius: 0.25rem !important; z-index: 21 !important; } /* Hide Arrow */ .ui.dropdown .menu .menu:after { display: none; } /*-------------- Sub Elements ---------------*/ /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image { margin-top: 0em; } .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-top: 0em; } .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-left: 0em; float: none; margin-right: 0.8125rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { display: inline-block; vertical-align: top; width: auto; margin-top: -0.5em; margin-bottom: -0.5em; max-height: 2em; } /******************************* Coupling *******************************/ /*-------------- Menu ---------------*/ /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before { display: none; } /* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item { border-left: none; } /* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child > .menu, .ui.menu .right.dropdown.item > .menu, .ui.buttons > .ui.dropdown:last-child > .menu { left: auto; right: 0em; } /*-------------- Label ---------------*/ /* Dropdown Menu */ .ui.label.dropdown .menu { min-width: 100%; } /*-------------- Button ---------------*/ /* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon { margin: 0em; } .ui.button.dropdown .menu { min-width: 100%; } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ /* Displays like a select box */ .ui.selection.dropdown { cursor: pointer; word-wrap: break-word; line-height: 1em; white-space: normal; outline: 0; transform: rotateZ(0deg); min-width: 14em; min-height: 2.52678571em; background: #FFFFFF; display: inline-block; padding: 0.6875em 1.975em 0.6875em 0.875em; color: #4A3041; box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.25rem; transition: box-shadow 0.1s ease, width 0.1s ease; } .ui.selection.dropdown.visible, .ui.selection.dropdown.active { z-index: 10; } select.ui.dropdown { height: 38px; padding: 0.5em; border: 1px solid rgba(34, 36, 38, 0.15); visibility: visible; } .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon { cursor: pointer; position: absolute; width: auto; height: auto; line-height: 1.21428571em; top: 0.6875em; right: 0.875em; z-index: 3; margin: -0.6875em; padding: 0.91666667em; opacity: 0.8; transition: opacity 0.1s ease; } /* Compact */ .ui.compact.selection.dropdown { min-width: 0px; } /* Selection Menu */ .ui.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; border-top-width: 0px !important; width: auto; outline: none; margin: 0px -1px; min-width: calc(100% + 2px ); width: calc(100% + 2px ); border-radius: 0em 0em 0.25rem 0.25rem; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); transition: opacity 0.1s ease; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before { display: none; } /*-------------- Message ---------------*/ .ui.selection.dropdown .menu > .message { padding: 0.8125rem 1.125rem; } @media only screen and (max-width: 767px) { .ui.selection.dropdown .menu { max-height: 8.175rem; } } @media only screen and (min-width: 768px) { .ui.selection.dropdown .menu { max-height: 10.9rem; } } @media only screen and (min-width: 992px) { .ui.selection.dropdown .menu { max-height: 16.35rem; } } @media only screen and (min-width: 1920px) { .ui.selection.dropdown .menu { max-height: 21.8rem; } } /* Menu Item */ .ui.selection.dropdown .menu > .item { border-top: 1px solid #FAFAFA; padding: 0.8125rem 1.125rem !important; white-space: normal; word-wrap: normal; } /* User Item */ .ui.selection.dropdown .menu > .hidden.addition.item { display: none; } /* Hover */ .ui.selection.dropdown:hover { border-color: rgba(34, 36, 38, 0.35); box-shadow: none; } /* Active */ .ui.selection.active.dropdown { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Focus */ .ui.selection.dropdown:focus { border-color: #96C8DA; box-shadow: none; } .ui.selection.dropdown:focus .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Visible */ .ui.selection.visible.dropdown > .text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown:hover .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Dropdown Icon */ .ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon { opacity: ''; z-index: 3; } /* Connecting Border */ .ui.active.selection.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } /* Empty Connecting Border */ .ui.active.empty.selection.dropdown { border-radius: 0.25rem !important; box-shadow: none !important; } .ui.active.empty.selection.dropdown .menu { border: none !important; box-shadow: none !important; } /*-------------- Searchable ---------------*/ /* Search Selection */ .ui.search.dropdown { min-width: ''; } /* Search Dropdown */ .ui.search.dropdown > input.search { background: none transparent !important; border: none !important; box-shadow: none !important; cursor: text; top: 0em; left: 1px; width: 100%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; } /* Text Layering */ .ui.search.dropdown > input.search { position: absolute; z-index: 2; } .ui.search.dropdown > .text { cursor: text; position: relative; left: 1px; z-index: 3; } /* Search Selection */ .ui.search.selection.dropdown > input.search { line-height: 1.21428571em; padding: 0.58035714em 1.975em 0.58035714em 0.875em; } /* Used to size multi select input to character width */ .ui.search.selection.dropdown > span.sizer { line-height: 1.21428571em; padding: 0.58035714em 1.975em 0.58035714em 0.875em; display: none; white-space: pre; } /* Active/Visible Search */ .ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search { cursor: auto; } .ui.search.dropdown.active > .text, .ui.search.dropdown.visible > .text { pointer-events: none; } /* Filtered Text */ .ui.active.search.dropdown input.search:focus + .text .icon, .ui.active.search.dropdown input.search:focus + .text .flag { opacity: 0.8; } .ui.active.search.dropdown input.search:focus + .text { color: #d5becd !important; } /* Search Menu */ .ui.search.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { .ui.search.dropdown .menu { max-height: 8.175rem; } } @media only screen and (min-width: 768px) { .ui.search.dropdown .menu { max-height: 10.9rem; } } @media only screen and (min-width: 992px) { .ui.search.dropdown .menu { max-height: 16.35rem; } } @media only screen and (min-width: 1920px) { .ui.search.dropdown .menu { max-height: 21.8rem; } } /*-------------- Multiple ---------------*/ /* Multiple Selection */ .ui.multiple.dropdown { padding: 0.19345238em 1.975em 0.19345238em 0.3125em; } .ui.multiple.dropdown .menu { cursor: auto; } /* Multiple Search Selection */ .ui.multiple.search.dropdown, .ui.multiple.search.dropdown > input.search { cursor: text; } /* Selection Label */ .ui.multiple.dropdown > .label { -webkit-user-select: none; user-select: none; display: inline-block; vertical-align: top; white-space: normal; font-size: 1em; padding: 0.3125em 0.8125em; margin: 0.125rem 0.25rem 0.125rem 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Dropdown Icon */ .ui.multiple.dropdown .dropdown.icon { margin: ''; padding: ''; } /* Text */ .ui.multiple.dropdown > .text { position: static; padding: 0; max-width: 100%; margin: 0.38690476em 0em 0.38690476em 0.5625em; line-height: 1.0625em; } .ui.multiple.dropdown > .label ~ input.search { margin-left: 0.125em !important; } .ui.multiple.dropdown > .label ~ .text { display: none; } /*----------------- Multiple Search -----------------*/ /* Prompt Text */ .ui.multiple.search.dropdown > .text { display: inline-block; position: absolute; top: 0; left: 0; padding: inherit; margin: 0.38690476em 0em 0.38690476em 0.5625em; line-height: 1.0625em; } .ui.multiple.search.dropdown > .label ~ .text { display: none; } /* Search */ .ui.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; margin: 0.38690476em 0em 0.38690476em 0.5625em; width: 2.2em; line-height: 1.0625em; } /*-------------- Inline ---------------*/ .ui.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon { margin: 0em 0.1875em 0em 0.1875em; vertical-align: baseline; } .ui.inline.dropdown > .text { font-weight: bold; } .ui.inline.dropdown .menu { cursor: auto; margin-top: 0.1875em; border-radius: 0.25rem; } /******************************* States *******************************/ /*-------------------- Active ----------------------*/ /* Menu Item Active */ .ui.dropdown .menu .active.item { background: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); box-shadow: none; z-index: 12; } /*-------------------- Hover ----------------------*/ /* Menu Item Hover */ .ui.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); z-index: 13; } /*-------------------- Loading ---------------------*/ .ui.loading.dropdown > i.icon { height: 0.875em !important; } .ui.loading.selection.dropdown > i.icon { padding: 1.3125em 1.125em !important; } .ui.loading.dropdown > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.dropdown > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; box-shadow: 0px 0px 0px 1px transparent; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; animation: dropdown-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; } /* Coupling */ .ui.loading.dropdown.button > i.icon:before, .ui.loading.dropdown.button > i.icon:after { display: none; } @keyframes dropdown-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*-------------------- Default Text ----------------------*/ .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text { color: #ad809d; } .ui.dropdown:not(.button) > input:focus ~ .default.text, .ui.default.dropdown:not(.button) > input:focus ~ .text { color: #d5becd; } /*-------------------- Loading ----------------------*/ .ui.loading.dropdown > .text { transition: none; } /* Used To Check Position */ .ui.dropdown .loading.menu { display: block; visibility: hidden; z-index: -1; } .ui.dropdown > .loading.menu { left: 0px !important; right: auto !important; } .ui.dropdown > .menu .loading.menu { left: 100% !important; right: auto !important; } /*-------------------- Keyboard Select ----------------------*/ /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------------- Search Filtered ----------------------*/ /* Filtered Item */ .ui.dropdown > .filtered.text { visibility: hidden; } .ui.dropdown .filtered.item { display: none !important; } /*-------------------- Error ----------------------*/ .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text { color: #9F3A38; } .ui.selection.dropdown.error { background: #FFF6F6; border-color: #E0B4B4; } .ui.selection.dropdown.error:hover { border-color: #E0B4B4; } .ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu { border-color: #E0B4B4; } .ui.dropdown.error > .menu > .item { color: #9F3A38; } .ui.multiple.selection.error.dropdown > .label { border-color: #E0B4B4; } /* Item Hover */ .ui.dropdown.error > .menu > .item:hover { background-color: #FFF2F2; } /* Item Active */ .ui.dropdown.error > .menu .active.item { background-color: #FDCFCF; } /*-------------------- Clear ----------------------*/ .ui.dropdown > .clear.dropdown.icon { opacity: 0.8; transition: opacity 0.1s ease; } .ui.dropdown > .clear.dropdown.icon:hover { opacity: 1; } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.dropdown, .ui.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; opacity: 0.8; } /******************************* Variations *******************************/ /*-------------- Direction ---------------*/ /* Flyout Direction */ .ui.dropdown .menu { left: 0px; } /* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu { left: 100% !important; right: auto !important; border-radius: 0.25rem !important; } /* Leftward Opening Menu */ .ui.dropdown > .left.menu { left: auto !important; right: 0px !important; } .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu { left: auto; right: 100%; margin: 0em -0.5em 0em 0em !important; border-radius: 0.25rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; margin-right: 0em; } /*-------------- Upward ---------------*/ /* Upward Main Menu */ .ui.upward.dropdown > .menu { top: auto; bottom: 100%; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0.25rem 0.25rem 0em 0em; } /* Upward Sub Menu */ .ui.dropdown .upward.menu { top: auto !important; bottom: 0 !important; } /* Active Upward */ .ui.simple.upward.active.dropdown, .ui.simple.upward.dropdown:hover { border-radius: 0.25rem 0.25rem 0em 0em !important; } .ui.upward.dropdown.button:not(.pointing):not(.floating).active { border-radius: 0.25rem 0.25rem 0em 0em; } /* Selection */ .ui.upward.selection.dropdown .menu { border-top-width: 1px !important; border-bottom-width: 0px !important; box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } .ui.upward.selection.dropdown:hover { box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); } /* Active Upward */ .ui.active.upward.selection.dropdown { border-radius: 0em 0em 0.25rem 0.25rem !important; } /* Visible Upward */ .ui.upward.selection.dropdown.visible { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0em 0.25rem 0.25rem !important; } /* Visible Hover Upward */ .ui.upward.active.selection.dropdown:hover { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); } .ui.upward.active.selection.dropdown:hover .menu { box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } /*-------------- Simple ---------------*/ /* Selection Menu */ .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { overflow-x: hidden; overflow-y: auto; } .ui.scrolling.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; min-width: 100% !important; width: auto !important; } .ui.dropdown .scrolling.menu { position: static; overflow-y: auto; border: none; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; min-width: 100% !important; width: auto !important; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.scrolling.dropdown .menu .item.item.item, .ui.dropdown .scrolling.menu > .item.item.item { border-top: none; } .ui.scrolling.dropdown .menu .item:first-child, .ui.dropdown .scrolling.menu .item:first-child { border-top: none; } .ui.dropdown > .animating.menu .scrolling.menu, .ui.dropdown > .visible.menu .scrolling.menu { display: block; } /* Scrollbar in IE */ @media all and (-ms-high-contrast: none) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { min-width: calc(100% - 17px); } } @media only screen and (max-width: 767px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 10.5rem; } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 15.75rem; } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 21rem; } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 21rem; } } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after { display: none; } .ui.simple.dropdown .menu { position: absolute; display: block; overflow: hidden; top: -9999px !important; opacity: 0; width: 0; height: 0; transition: opacity 0.1s ease; } .ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu { overflow: visible; width: auto; height: auto; top: 100% !important; opacity: 1; } .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown:hover > .menu > .item:hover > .menu { overflow: visible; width: auto; height: auto; top: 0% !important; left: 100% !important; opacity: 1; } .ui.simple.disabled.dropdown:hover .menu { display: none; height: 0px; width: 0px; overflow: hidden; } /* Visible */ .ui.simple.visible.dropdown > .menu { display: block; } /*-------------- Fluid ---------------*/ .ui.fluid.dropdown { display: block; width: 100%; min-width: 0em; } .ui.fluid.dropdown > .dropdown.icon { float: right; } /*-------------- Floating ---------------*/ .ui.floating.dropdown .menu { left: 0; right: auto; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; border-radius: 0.25rem !important; } .ui.floating.dropdown > .menu { margin-top: 0.5em !important; border-radius: 0.25rem !important; } /*-------------- Pointing ---------------*/ .ui.pointing.dropdown > .menu { top: 100%; margin-top: 0.8125rem; border-radius: 0.25rem; } .ui.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; content: ''; visibility: visible; transform: rotate(45deg); width: 0.4375em; height: 0.4375em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); background: #FFFFFF; z-index: 2; } .ui.pointing.dropdown > .menu:after { top: -0.21875em; left: 50%; margin: 0em 0em 0em -0.21875em; } /* Top Left Pointing */ .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu:after { top: -0.21875em; left: 1em; right: auto; margin: 0em; transform: rotate(45deg); } /* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; right: 0%; left: auto; margin: 1em 0em 0em; } .ui.top.pointing.dropdown > .left.menu:after, .ui.top.right.pointing.dropdown > .menu:after { top: -0.21875em; left: auto !important; right: 1em !important; margin: 0em; transform: rotate(45deg); } /* Left Pointing */ .ui.left.pointing.dropdown > .menu { top: 0%; left: 100%; right: auto; margin: 0em 0em 0em 1em; } .ui.left.pointing.dropdown > .menu:after { top: 1em; left: -0.21875em; margin: 0em 0em 0em 0em; transform: rotate(-45deg); } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { left: auto !important; right: 100% !important; margin: 0em 1em 0em 0em; } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { top: 1em; left: auto; right: -0.21875em; margin: 0em 0em 0em 0em; transform: rotate(135deg); } /* Right Pointing */ .ui.right.pointing.dropdown > .menu { top: 0%; left: auto; right: 100%; margin: 0em 1em 0em 0em; } .ui.right.pointing.dropdown > .menu:after { top: 1em; left: auto; right: -0.21875em; margin: 0em 0em 0em 0em; transform: rotate(135deg); } /* Bottom Pointing */ .ui.bottom.pointing.dropdown > .menu { top: auto; bottom: 100%; left: 0%; right: auto; margin: 0em 0em 1em; } .ui.bottom.pointing.dropdown > .menu:after { top: auto; bottom: -0.21875em; right: auto; margin: 0em; transform: rotate(-135deg); } /* Reverse Sub-Menu Direction */ .ui.bottom.pointing.dropdown > .menu .menu { top: auto !important; bottom: 0px !important; } /* Bottom Left */ .ui.bottom.left.pointing.dropdown > .menu { left: 0%; right: auto; } .ui.bottom.left.pointing.dropdown > .menu:after { left: 1em; right: auto; } /* Bottom Right */ .ui.bottom.right.pointing.dropdown > .menu { right: 0%; left: auto; } .ui.bottom.right.pointing.dropdown > .menu:after { left: auto; right: 1em; } /* Upward pointing */ .ui.pointing.upward.dropdown .menu, .ui.top.pointing.upward.dropdown .menu { top: auto !important; bottom: 100% !important; margin: 0em 0em 0.8125rem; border-radius: 0.25rem; } .ui.pointing.upward.dropdown .menu:after, .ui.top.pointing.upward.dropdown .menu:after { top: 100% !important; bottom: auto !important; box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); margin: -0.21875em 0em 0em; } /* Right Pointing Upward */ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 1em 0em 0em; } .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /* Left Pointing Upward */ .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 0em 0em 1em; } .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.dropdown > .dropdown.icon { width: auto; } .ui.dropdown > .dropdown.icon:before { content: '\f0d7'; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before { content: "\f0d9" /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da" /*rtl:"\f0d9"*/; } .ui.dropdown > .clear.icon:before { content: "\f00d"; } /* Icons for Reference (Subsetted in 2.4.0) .dropdown.down:before { content: "\f0d7"; } .dropdown.up:before { content: "\f0d8"; } .dropdown.left:before { content: "\f0d9"; } .dropdown.right:before { content: "\f0da"; } .dropdown.close:before { content: "\f00d"; } */ /******************************* User Overrides *******************************/ .ui.multiple.dropdown > .label { -webkit-text-decoration: none; text-decoration: none; } /*! * # Semantic UI - Video * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Video *******************************/ /*------------------- Element --------------------*/ /* Simple */ /* Placeholder */ /* Placeholder Overlayed Background */ /* Icon */ /*------------------- States --------------------*/ /* Hover */ /*------------------- Variations --------------------*/ /* Aspect Ratios */ /* Packaged Theme */ /******************************* Video *******************************/ /*------------------- Element --------------------*/ /* Simple */ /* Placeholder */ /* Placeholder Overlayed Background */ /* Icon */ /*------------------- States --------------------*/ /* Hover */ /*------------------- Variations --------------------*/ /* Aspect Ratios */ /* Site Theme */ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Types *******************************/ .ui.embed { position: relative; max-width: 100%; height: 0px; overflow: hidden; background: #DCDDDE; padding-bottom: 56.25%; } /*----------------- Embedded Content ------------------*/ .ui.embed iframe, .ui.embed embed, .ui.embed object { position: absolute; border: none; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0em; padding: 0em; } /*----------------- Embed ------------------*/ .ui.embed > .embed { display: none; } /*-------------- Placeholder ---------------*/ .ui.embed > .placeholder { position: absolute; cursor: pointer; top: 0px; left: 0px; display: block; width: 100%; height: 100%; background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); } /*-------------- Icon ---------------*/ .ui.embed > .icon { cursor: pointer; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .ui.embed > .icon:after { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 3; content: ''; background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); opacity: 0.5; transition: opacity 0.5s ease; } .ui.embed > .icon:before { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translateX(-50%) translateY(-50%); color: #FFFFFF; font-size: 6rem; text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2); transition: opacity 0.5s ease, color 0.5s ease; z-index: 10; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.embed .icon:hover:after { background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); opacity: 1; } .ui.embed .icon:hover:before { color: #FFFFFF; } /*-------------- Active ---------------*/ .ui.active.embed > .icon, .ui.active.embed > .placeholder { display: none; } .ui.active.embed > .embed { display: block; } /******************************* Video Overrides *******************************/ /******************************* Site Overrides *******************************/ /******************************* Variations *******************************/ .ui.square.embed { padding-bottom: 100%; } .ui[class*="4:3"].embed { padding-bottom: 75%; } .ui[class*="16:9"].embed { padding-bottom: 56.25%; } .ui[class*="21:9"].embed { padding-bottom: 42.85714286%; } /*! * # Semantic UI - Modal * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Top Aligned */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /* Packaged Theme */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Top Aligned */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Modal *******************************/ .ui.modal { position: absolute; display: none; z-index: 1001; text-align: left; background: #FFFFFF; border: none; box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); transform-origin: 50% 25%; flex: 0 0 auto; border-radius: 0.25rem; -webkit-user-select: text; user-select: text; will-change: top, left, margin, transform, opacity; } .ui.modal > :first-child:not(.icon), .ui.modal > .icon:first-child + * { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .ui.modal > :last-child { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } /******************************* Content *******************************/ /*-------------- Close ---------------*/ .ui.modal > .close { cursor: pointer; position: absolute; top: -2.5rem; right: -2.5rem; z-index: 1; opacity: 0.8; font-size: 1.25em; color: #FFFFFF; width: 2.25rem; height: 2.25rem; padding: 0.625rem 0rem 0rem 0rem; } .ui.modal > .close:hover { opacity: 1; } /*-------------- Header ---------------*/ .ui.modal > .header { display: block; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; background: #FFFFFF; margin: 0em; padding: 1.25rem 1.5rem; box-shadow: none; color: #4A3041; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.modal > .header:not(.ui) { font-size: 1.4375rem; line-height: 1.28571429em; font-weight: bold; } /*-------------- Content ---------------*/ .ui.modal > .content { display: block; width: 100%; font-size: 1em; line-height: 1.4; padding: 1.5rem; background: #FFFFFF; } .ui.modal > .image.content { display: flex; flex-direction: row; } /* Image */ .ui.modal > .content > .image { display: block; flex: 0 1 auto; width: ''; align-self: top; } .ui.modal > [class*="top aligned"] { align-self: top; } .ui.modal > [class*="middle aligned"] { align-self: middle; } .ui.modal > [class*="stretched"] { align-self: stretch; } /* Description */ .ui.modal > .content > .description { display: block; flex: 1 0 auto; min-width: 0px; align-self: top; } .ui.modal > .content > .icon + .description, .ui.modal > .content > .image + .description { flex: 0 1 auto; min-width: ''; width: auto; padding-left: 2em; } /*rtl:ignore*/ .ui.modal > .content > .image > i.icon { margin: 0em; opacity: 1; width: auto; line-height: 1; font-size: 8rem; } /*-------------- Actions ---------------*/ .ui.modal > .actions { background: #F9FAFB; padding: 1rem 1rem; border-top: 1px solid rgba(34, 36, 38, 0.15); text-align: right; } .ui.modal .actions > .button { margin-left: 0.75em; } /*------------------- Responsive --------------------*/ /* Modal Width */ @media only screen and (max-width: 767px) { .ui.modal { width: 95%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 768px) { .ui.modal { width: 88%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 992px) { .ui.modal { width: 850px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1200px) { .ui.modal { width: 900px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1920px) { .ui.modal { width: 950px; margin: 0em 0em 0em 0em; } } /* Tablet and Mobile */ @media only screen and (max-width: 991px) { .ui.modal > .header { padding-right: 2.25rem; } .ui.modal > .close { top: 1.225rem; right: 1rem; color: #4A3041; } } /* Mobile */ @media only screen and (max-width: 767px) { .ui.modal > .header { padding: 0.75rem 1rem !important; padding-right: 2.25rem !important; } .ui.modal > .content { display: block; padding: 1rem !important; } .ui.modal > .close { top: 0.5rem !important; right: 0.5rem !important; } /*rtl:ignore*/ .ui.modal .image.content { flex-direction: column; } .ui.modal .content > .image { display: block; max-width: 100%; margin: 0em auto !important; text-align: center; padding: 0rem 0rem 1rem !important; } .ui.modal > .content > .image > i.icon { font-size: 5rem; text-align: center; } /*rtl:ignore*/ .ui.modal .content > .description { display: block; width: 100% !important; margin: 0em !important; padding: 1rem 0rem !important; box-shadow: none; } /* Let Buttons Stack */ .ui.modal > .actions { padding: 1rem 1rem 0rem !important; } .ui.modal .actions > .buttons, .ui.modal .actions > .button { margin-bottom: 1rem; } } /*-------------- Coupling ---------------*/ .ui.inverted.dimmer > .ui.modal { box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); } /******************************* Types *******************************/ .ui.basic.modal { background-color: transparent; border: none; border-radius: 0em; box-shadow: none !important; color: #FFFFFF; } .ui.basic.modal > .header, .ui.basic.modal > .content, .ui.basic.modal > .actions { background-color: transparent; } .ui.basic.modal > .header { color: #FFFFFF; } .ui.basic.modal > .close { top: 1rem; right: 1.5rem; } .ui.inverted.dimmer > .basic.modal { color: #4A3041; } .ui.inverted.dimmer > .ui.basic.modal > .header { color: rgba(0, 0, 0, 0.85); } /* Resort to margin positioning if legacy */ .ui.legacy.modal, .ui.legacy.page.dimmer > .ui.modal { top: 50%; left: 50%; } .ui.legacy.page.dimmer > .ui.scrolling.modal, .ui.page.dimmer > .ui.scrolling.legacy.modal, .ui.top.aligned.legacy.page.dimmer > .ui.modal, .ui.top.aligned.dimmer > .ui.legacy.modal { top: auto; } /* Tablet and Mobile */ @media only screen and (max-width: 991px) { .ui.basic.modal > .close { color: #FFFFFF; } } /******************************* States *******************************/ .ui.loading.modal { display: block; visibility: hidden; z-index: -1; } .ui.active.modal { display: block; } /******************************* Variations *******************************/ /*-------------- Top Aligned ---------------*/ /* Top Aligned Modal */ .modals.dimmer[class*="top aligned"] .modal { margin: 5vh auto; } @media only screen and (max-width: 767px) { .modals.dimmer[class*="top aligned"] .modal { margin: 1rem auto; } } /* Legacy Top Aligned */ .legacy.modals.dimmer[class*="top aligned"] { padding-top: 5vh; } @media only screen and (max-width: 767px) { .legacy.modals.dimmer[class*="top aligned"] { padding-top: 1rem; } } /*-------------- Scrolling ---------------*/ /* Scrolling Dimmer */ .scrolling.dimmable.dimmed { overflow: hidden; } .scrolling.dimmable > .dimmer { justify-content: flex-start; } .scrolling.dimmable.dimmed > .dimmer { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling.dimmable > .dimmer { position: fixed; } .modals.dimmer .ui.scrolling.modal { margin: 1rem auto; } /* Undetached Scrolling */ .scrolling.undetached.dimmable.dimmed { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling.undetached.dimmable.dimmed > .dimmer { overflow: hidden; } .scrolling.undetached.dimmable .ui.scrolling.modal { position: absolute; left: 50%; margin-top: 1rem !important; } /* Scrolling Content */ .ui.modal .scrolling.content { max-height: calc(80vh - 10em); overflow: auto; } /*-------------- Full Screen ---------------*/ .ui.fullscreen.modal { width: 95% !important; margin: 1em auto; } .ui.fullscreen.modal > .header { padding-right: 2.25rem; } .ui.fullscreen.modal > .close { top: 1.225rem; right: 1rem; color: #4A3041; } /*-------------- Size ---------------*/ .ui.modal { font-size: 1rem; } /* Mini */ .ui.mini.modal > .header:not(.ui) { font-size: 1.3em; } /* Mini Modal Width */ @media only screen and (max-width: 767px) { .ui.mini.modal { width: 95%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 768px) { .ui.mini.modal { width: 35.2%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 992px) { .ui.mini.modal { width: 340px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1200px) { .ui.mini.modal { width: 360px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1920px) { .ui.mini.modal { width: 380px; margin: 0em 0em 0em 0em; } } /* mini */ .ui.small.modal > .header:not(.ui) { font-size: 1.3em; } /* Tiny Modal Width */ @media only screen and (max-width: 767px) { .ui.tiny.modal { width: 95%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 768px) { .ui.tiny.modal { width: 52.8%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 992px) { .ui.tiny.modal { width: 510px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1200px) { .ui.tiny.modal { width: 540px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1920px) { .ui.tiny.modal { width: 570px; margin: 0em 0em 0em 0em; } } /* Small */ .ui.small.modal > .header:not(.ui) { font-size: 1.3em; } /* Small Modal Width */ @media only screen and (max-width: 767px) { .ui.small.modal { width: 95%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 768px) { .ui.small.modal { width: 70.4%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 992px) { .ui.small.modal { width: 680px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1200px) { .ui.small.modal { width: 720px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1920px) { .ui.small.modal { width: 760px; margin: 0em 0em 0em 0em; } } /* Large Modal Width */ .ui.large.modal > .header { font-size: 1.6em; } @media only screen and (max-width: 767px) { .ui.large.modal { width: 95%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 768px) { .ui.large.modal { width: 88%; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 992px) { .ui.large.modal { width: 1020px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1200px) { .ui.large.modal { width: 1080px; margin: 0em 0em 0em 0em; } } @media only screen and (min-width: 1920px) { .ui.large.modal { width: 1140px; margin: 0em 0em 0em 0em; } } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Nag * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Nag *******************************/ /*-------------- Collection ---------------*/ /*-------------- Elements ---------------*/ /* Title */ /*-------------- States ---------------*/ /* Hover */ /*-------------- Variations ---------------*/ /* Top / Bottom */ /* Inverted */ /*-------------- Plural ---------------*/ /* Packaged Theme */ /******************************* Nag *******************************/ /*-------------- Collection ---------------*/ /*-------------- Elements ---------------*/ /* Title */ /*-------------- States ---------------*/ /* Hover */ /*-------------- Variations ---------------*/ /* Top / Bottom */ /* Inverted */ /*-------------- Plural ---------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Nag *******************************/ .ui.nag { display: none; opacity: 0.95; position: relative; top: 0em; left: 0px; z-index: 999; min-height: 0em; width: 100%; margin: 0em; padding: 0.75em 1em; background: #555555; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); font-size: 1rem; text-align: center; color: #4A3041; border-radius: 0em 0em 0.25rem 0.25rem; transition: 0.2s background ease; } a.ui.nag { cursor: pointer; } .ui.nag > .title { display: inline-block; margin: 0em 0.5em; color: #FFFFFF; } .ui.nag > .close.icon { cursor: pointer; opacity: 0.4; position: absolute; top: 50%; right: 1em; font-size: 1em; margin: -0.5em 0em 0em; color: #FFFFFF; transition: opacity 0.2s ease; } /******************************* States *******************************/ /* Hover */ .ui.nag:hover { background: #555555; opacity: 1; } .ui.nag .close:hover { opacity: 1; } /******************************* Variations *******************************/ /*-------------- Static ---------------*/ .ui.overlay.nag { position: absolute; display: block; } /*-------------- Fixed ---------------*/ .ui.fixed.nag { position: fixed; } /*-------------- Bottom ---------------*/ .ui.bottom.nags, .ui.bottom.nag { border-radius: 0.25rem 0.25rem 0em 0em; top: auto; bottom: 0em; } /*-------------- White ---------------*/ .ui.inverted.nags .nag, .ui.inverted.nag { background-color: #F3F4F5; color: rgba(0, 0, 0, 0.85); } .ui.inverted.nags .nag .close, .ui.inverted.nags .nag .title, .ui.inverted.nag .close, .ui.inverted.nag .title { color: rgba(0, 0, 0, 0.4); } /******************************* Groups *******************************/ .ui.nags .nag { border-radius: 0em !important; } .ui.nags .nag:last-child { border-radius: 0em 0em 0.25rem 0.25rem; } .ui.bottom.nags .nag:last-child { border-radius: 0.25rem 0.25rem 0em 0em; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Popup * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Packaged Theme */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Popup *******************************/ .ui.popup { display: none; position: absolute; top: 0px; right: 0px; /* Fixes content being squished when inline (moz only) */ min-width: min-content; z-index: 1900; border: 1px solid #D4D4D5; line-height: 1.6; max-width: 250px; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: #4A3041; border-radius: 0.25rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } .ui.popup > .header { padding: 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.125em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content { padding-top: 0.4375em; } .ui.popup:before { position: absolute; content: ''; width: 0.625em; height: 0.625em; background: #FFFFFF; transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /******************************* Types *******************************/ /*-------------- Tooltip ---------------*/ /* Content */ [data-tooltip] { position: relative; } /* Arrow */ [data-tooltip]:before { pointer-events: none; position: absolute; content: ''; font-size: 1rem; width: 0.625em; height: 0.625em; background: #FFFFFF; transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /* Popup */ [data-tooltip]:after { pointer-events: none; content: attr(data-tooltip); position: absolute; text-transform: none; text-align: left; white-space: nowrap; font-size: 1rem; border: 1px solid #D4D4D5; line-height: 1.6; max-width: none; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: #4A3041; border-radius: 0.25rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); z-index: 1; } /* Default Position (Top Center) */ [data-tooltip]:not([data-position]):before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.0625rem; margin-bottom: 0.125rem; } [data-tooltip]:not([data-position]):after { left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 0.4375em; } /* Animation */ [data-tooltip]:before, [data-tooltip]:after { pointer-events: none; visibility: hidden; } [data-tooltip]:before { opacity: 0; transform: rotate(45deg) scale(0) !important; transform-origin: center top; transition: all 0.1s ease; } [data-tooltip]:after { opacity: 1; transform-origin: center bottom; transition: all 0.1s ease; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; pointer-events: auto; } [data-tooltip]:hover:before { transform: rotate(45deg) scale(1) !important; opacity: 1; } /* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after { transform: translateX(-50%) scale(0) !important; } [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after { transform: translateX(-50%) scale(1) !important; } [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after { transform: translateY(-50%) scale(0) !important; } [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after { transform: translateY(-50%) scale(1) !important; } [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after { transform: scale(0) !important; } [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after { transform: scale(1) !important; } /*-------------- Inverted ---------------*/ /* Arrow */ [data-tooltip][data-inverted]:before { box-shadow: none !important; } /* Arrow Position */ [data-tooltip][data-inverted]:before { background: #1B1C1D; } /* Popup */ [data-tooltip][data-inverted]:after { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } [data-tooltip][data-inverted]:after .header { background-color: none; color: #FFFFFF; } /*-------------- Position ---------------*/ /* Top Center */ [data-position="top center"][data-tooltip]:after { top: auto; right: auto; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 0.4375em; } [data-position="top center"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.0625rem; margin-bottom: 0.125rem; } /* Top Left */ [data-position="top left"][data-tooltip]:after { top: auto; right: auto; left: 0; bottom: 100%; margin-bottom: 0.4375em; } [data-position="top left"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 1em; margin-left: -0.0625rem; margin-bottom: 0.125rem; } /* Top Right */ [data-position="top right"][data-tooltip]:after { top: auto; left: auto; right: 0; bottom: 100%; margin-bottom: 0.4375em; } [data-position="top right"][data-tooltip]:before { top: auto; left: auto; bottom: 100%; right: 1em; margin-left: -0.0625rem; margin-bottom: 0.125rem; } /* Bottom Center */ [data-position="bottom center"][data-tooltip]:after { bottom: auto; right: auto; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.4375em; } [data-position="bottom center"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -0.0625rem; margin-top: 0.125rem; } /* Bottom Left */ [data-position="bottom left"][data-tooltip]:after { left: 0; top: 100%; margin-top: 0.4375em; } [data-position="bottom left"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 1em; margin-left: -0.0625rem; margin-top: 0.125rem; } /* Bottom Right */ [data-position="bottom right"][data-tooltip]:after { right: 0; top: 100%; margin-top: 0.4375em; } [data-position="bottom right"][data-tooltip]:before { bottom: auto; left: auto; top: 100%; right: 1em; margin-left: -0.125rem; margin-top: 0.0625rem; } /* Left Center */ [data-position="left center"][data-tooltip]:after { right: 100%; top: 50%; margin-right: 0.4375em; transform: translateY(-50%); } [data-position="left center"][data-tooltip]:before { right: 100%; top: 50%; margin-top: -0.125rem; margin-right: -0.0625rem; } /* Right Center */ [data-position="right center"][data-tooltip]:after { left: 100%; top: 50%; margin-left: 0.4375em; transform: translateY(-50%); } [data-position="right center"][data-tooltip]:before { left: 100%; top: 50%; margin-top: -0.0625rem; margin-left: 0.125rem; } /* Arrow */ [data-position~="bottom"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px -1px 0px 0px #bababc; } [data-position="left center"][data-tooltip]:before { background: #FFFFFF; box-shadow: 1px -1px 0px 0px #bababc; } [data-position="right center"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px 1px 0px 0px #bababc; } [data-position~="top"][data-tooltip]:before { background: #FFFFFF; } /* Inverted Arrow Color */ [data-inverted][data-position~="bottom"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px -1px 0px 0px #bababc; } [data-inverted][data-position="left center"][data-tooltip]:before { background: #1B1C1D; box-shadow: 1px -1px 0px 0px #bababc; } [data-inverted][data-position="right center"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px 1px 0px 0px #bababc; } [data-inverted][data-position~="top"][data-tooltip]:before { background: #1B1C1D; } [data-position~="bottom"][data-tooltip]:before { transform-origin: center bottom; } [data-position~="bottom"][data-tooltip]:after { transform-origin: center top; } [data-position="left center"][data-tooltip]:before { transform-origin: top center; } [data-position="left center"][data-tooltip]:after { transform-origin: right center; } [data-position="right center"][data-tooltip]:before { transform-origin: right center; } [data-position="right center"][data-tooltip]:after { transform-origin: left center; } /*-------------- Spacing ---------------*/ .ui.popup { margin: 0em; } /* Extending from Top */ .ui.top.popup { margin: 0em 0em 0.625em; } .ui.top.left.popup { transform-origin: left bottom; } .ui.top.center.popup { transform-origin: center bottom; } .ui.top.right.popup { transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup { margin: 0em 0.625em 0em 0em; transform-origin: right 50%; } .ui.right.center.popup { margin: 0em 0em 0em 0.625em; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup { margin: 0.625em 0em 0em; } .ui.bottom.left.popup { transform-origin: left top; } .ui.bottom.center.popup { transform-origin: center top; } .ui.bottom.right.popup { transform-origin: right top; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before { margin-left: -0.2625em; top: -0.2625em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.bottom.left.popup:before { top: -0.2625em; left: 1em; right: auto; bottom: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.bottom.right.popup:before { top: -0.2625em; right: 1em; bottom: auto; left: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } /*--- Above ---*/ .ui.top.center.popup:before { top: auto; right: auto; bottom: -0.2625em; left: 50%; margin-left: -0.2625em; } .ui.top.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.top.left.popup:before { bottom: -0.2625em; left: 1em; top: auto; right: auto; margin-left: 0em; } .ui.top.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.top.right.popup:before { bottom: -0.2625em; right: 1em; top: auto; left: auto; margin-left: 0em; } /*--- Left Center ---*/ /*rtl:rename*/ .ui.left.center.popup:before { top: 50%; right: -0.2625em; bottom: auto; left: auto; margin-top: -0.2625em; box-shadow: 1px -1px 0px 0px #bababc; } /*--- Right Center ---*/ /*rtl:rename*/ .ui.right.center.popup:before { top: 50%; left: -0.2625em; bottom: auto; right: auto; margin-top: -0.2625em; box-shadow: -1px 1px 0px 0px #bababc; } /* Arrow Color By Location */ .ui.bottom.popup:before { background: #FFFFFF; } .ui.right.center.popup:before, .ui.left.center.popup:before { background: #FFFFFF; } .ui.top.popup:before { background: #FFFFFF; } /* Inverted Arrow Color */ .ui.inverted.bottom.popup:before { background: #1B1C1D; } .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before { background: #1B1C1D; } .ui.inverted.top.popup:before { background: #1B1C1D; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) { width: calc(100% + 1.75rem); margin: -0.7rem -0.875rem; } /******************************* States *******************************/ .ui.loading.popup { display: block; visibility: hidden; z-index: -1; } .ui.animating.popup, .ui.visible.popup { display: block; } .ui.visible.popup { transform: translateZ(0px); backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before { display: none; } /*-------------- Wide ---------------*/ .ui.wide.popup { max-width: 350px; } .ui[class*="very wide"].popup { max-width: 550px; } @media only screen and (max-width: 767px) { .ui.wide.popup, .ui[class*="very wide"].popup { max-width: 250px; } } /*-------------- Fluid ---------------*/ .ui.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } .ui.inverted.popup .header { background-color: none; color: #FFFFFF; } .ui.inverted.popup:before { background-color: #1B1C1D; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.mini.popup { font-size: 0.8125rem; } .ui.tiny.popup { font-size: 0.875rem; } .ui.small.popup { font-size: 0.9375rem; } .ui.popup { font-size: 1rem; } .ui.large.popup { font-size: 1.125rem; } .ui.huge.popup { font-size: 1.4375rem; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Progress Bar * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Progress *******************************/ /*------------------- Element --------------------*/ /* Bar */ /* Progress Bar Label */ /* Label */ /*------------------- Types --------------------*/ /*------------------- States --------------------*/ /* Active */ /*------------------- Variations --------------------*/ /* Attached */ /* Inverted */ /* Sizing */ /* Packaged Theme */ /******************************* Progress *******************************/ /*------------------- Element --------------------*/ /* Bar */ /* Progress Bar Label */ /* Label */ /*------------------- Types --------------------*/ /*------------------- States --------------------*/ /* Active */ /*------------------- Variations --------------------*/ /* Attached */ /* Inverted */ /* Sizing */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Progress *******************************/ .ui.progress { position: relative; display: block; max-width: 100%; border: none; margin: 1em 0em 2.5em; box-shadow: none; background: rgba(0, 0, 0, 0.1); padding: 0em; border-radius: 0.25rem; } .ui.progress:first-child { margin: 0em 0em 2.5em; } .ui.progress:last-child { margin: 0em 0em 1.5em; } /******************************* Content *******************************/ /* Activity Bar */ .ui.progress .bar { display: block; line-height: 1; position: relative; width: 0%; min-width: 2em; background: #888888; border-radius: 0.25rem; transition: width 0.1s ease, background-color 0.1s ease; } /* Percent Complete */ .ui.progress .bar > .progress { white-space: nowrap; position: absolute; width: auto; font-size: 0.9375em; top: 50%; right: 0.5em; left: auto; bottom: auto; color: rgba(255, 255, 255, 0.7); text-shadow: none; margin-top: -0.5em; font-weight: bold; text-align: left; } /* Label */ .ui.progress > .label { position: absolute; width: 100%; font-size: 1em; top: 100%; right: auto; left: 0%; bottom: auto; color: #4A3041; font-weight: bold; text-shadow: none; margin-top: 0.2em; text-align: center; transition: color 0.4s ease; } /******************************* Types *******************************/ /* Indicating */ .ui.indicating.progress[data-percent^="1"] .bar, .ui.indicating.progress[data-percent^="2"] .bar { background-color: #D95C5C; } .ui.indicating.progress[data-percent^="3"] .bar { background-color: #EFBC72; } .ui.indicating.progress[data-percent^="4"] .bar, .ui.indicating.progress[data-percent^="5"] .bar { background-color: #E6BB48; } .ui.indicating.progress[data-percent^="6"] .bar { background-color: #DDC928; } .ui.indicating.progress[data-percent^="7"] .bar, .ui.indicating.progress[data-percent^="8"] .bar { background-color: #B4D95C; } .ui.indicating.progress[data-percent^="9"] .bar, .ui.indicating.progress[data-percent^="100"] .bar { background-color: #66DA81; } /* Indicating Label */ .ui.indicating.progress[data-percent^="1"] .label, .ui.indicating.progress[data-percent^="2"] .label { color: #4A3041; } .ui.indicating.progress[data-percent^="3"] .label { color: #4A3041; } .ui.indicating.progress[data-percent^="4"] .label, .ui.indicating.progress[data-percent^="5"] .label { color: #4A3041; } .ui.indicating.progress[data-percent^="6"] .label { color: #4A3041; } .ui.indicating.progress[data-percent^="7"] .label, .ui.indicating.progress[data-percent^="8"] .label { color: #4A3041; } .ui.indicating.progress[data-percent^="9"] .label, .ui.indicating.progress[data-percent^="100"] .label { color: #4A3041; } /* Single Digits */ .ui.indicating.progress[data-percent="1"] .bar, .ui.indicating.progress[data-percent="2"] .bar, .ui.indicating.progress[data-percent="3"] .bar, .ui.indicating.progress[data-percent="4"] .bar, .ui.indicating.progress[data-percent="5"] .bar, .ui.indicating.progress[data-percent="6"] .bar, .ui.indicating.progress[data-percent="7"] .bar, .ui.indicating.progress[data-percent="8"] .bar, .ui.indicating.progress[data-percent="9"] .bar { background-color: #D95C5C; } .ui.indicating.progress[data-percent="1"] .label, .ui.indicating.progress[data-percent="2"] .label, .ui.indicating.progress[data-percent="3"] .label, .ui.indicating.progress[data-percent="4"] .label, .ui.indicating.progress[data-percent="5"] .label, .ui.indicating.progress[data-percent="6"] .label, .ui.indicating.progress[data-percent="7"] .label, .ui.indicating.progress[data-percent="8"] .label, .ui.indicating.progress[data-percent="9"] .label { color: #4A3041; } /* Indicating Success */ .ui.indicating.progress.success .label { color: #1A531B; } /******************************* States *******************************/ /*-------------- Success ---------------*/ .ui.progress.success .bar { background-color: #21BA45 !important; } .ui.progress.success .bar, .ui.progress.success .bar::after { animation: none !important; } .ui.progress.success > .label { color: #1A531B; } /*-------------- Warning ---------------*/ .ui.progress.warning .bar { background-color: #F2C037 !important; } .ui.progress.warning .bar, .ui.progress.warning .bar::after { animation: none !important; } .ui.progress.warning > .label { color: #794B02; } /*-------------- Error ---------------*/ .ui.progress.error .bar { background-color: #DB2828 !important; } .ui.progress.error .bar, .ui.progress.error .bar::after { animation: none !important; } .ui.progress.error > .label { color: #912D2B; } /*-------------- Active ---------------*/ .ui.active.progress .bar { position: relative; min-width: 2em; } .ui.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #FFFFFF; border-radius: 0.25rem; animation: progress-active 2s ease infinite; } @keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; } } /*-------------- Disabled ---------------*/ .ui.disabled.progress { opacity: 0.35; } .ui.disabled.progress .bar, .ui.disabled.progress .bar::after { animation: none !important; } /******************************* Variations *******************************/ /*-------------- Inverted ---------------*/ .ui.inverted.progress { background: rgba(255, 255, 255, 0.08); border: none; } .ui.inverted.progress .bar { background: #888888; } .ui.inverted.progress .bar > .progress { color: #F9FAFB; } .ui.inverted.progress > .label { color: #FFFFFF; } .ui.inverted.progress.success > .label { color: #21BA45; } .ui.inverted.progress.warning > .label { color: #F2C037; } .ui.inverted.progress.error > .label { color: #DB2828; } /*-------------- Attached ---------------*/ /* bottom attached */ .ui.progress.attached { background: transparent; position: relative; border: none; margin: 0em; } .ui.progress.attached, .ui.progress.attached .bar { display: block; height: 0.2rem; padding: 0px; overflow: hidden; border-radius: 0em 0em 0.25rem 0.25rem; } .ui.progress.attached .bar { border-radius: 0em; } /* top attached */ .ui.progress.top.attached, .ui.progress.top.attached .bar { top: 0px; border-radius: 0.25rem 0.25rem 0em 0em; } .ui.progress.top.attached .bar { border-radius: 0em; } /* Coupling */ .ui.segment > .ui.attached.progress, .ui.card > .ui.attached.progress { position: absolute; top: auto; left: 0; bottom: 100%; width: 100%; } .ui.segment > .ui.bottom.attached.progress, .ui.card > .ui.bottom.attached.progress { top: 100%; bottom: auto; } /*-------------- Colors ---------------*/ /* Red */ .ui.red.progress .bar { background-color: #DB2828; } .ui.red.inverted.progress .bar { background-color: #FF695E; } /* Orange */ .ui.orange.progress .bar { background-color: #F2711C; } .ui.orange.inverted.progress .bar { background-color: #FF851B; } /* Yellow */ .ui.yellow.progress .bar { background-color: #FBBD08; } .ui.yellow.inverted.progress .bar { background-color: #FFE21F; } /* Olive */ .ui.olive.progress .bar { background-color: #B5CC18; } .ui.olive.inverted.progress .bar { background-color: #D9E778; } /* Green */ .ui.green.progress .bar { background-color: #21BA45; } .ui.green.inverted.progress .bar { background-color: #2ECC40; } /* Teal */ .ui.teal.progress .bar { background-color: #00B5AD; } .ui.teal.inverted.progress .bar { background-color: #6DFFFF; } /* Blue */ .ui.blue.progress .bar { background-color: #2185D0; } .ui.blue.inverted.progress .bar { background-color: #54C8FF; } /* Violet */ .ui.violet.progress .bar { background-color: #6435C9; } .ui.violet.inverted.progress .bar { background-color: #A291FB; } /* Purple */ .ui.purple.progress .bar { background-color: #A333C8; } .ui.purple.inverted.progress .bar { background-color: #DC73FF; } /* Pink */ .ui.pink.progress .bar { background-color: #E03997; } .ui.pink.inverted.progress .bar { background-color: #FF8EDF; } /* Brown */ .ui.brown.progress .bar { background-color: #A5673F; } .ui.brown.inverted.progress .bar { background-color: #D67C1C; } /* Grey */ .ui.grey.progress .bar { background-color: #767676; } .ui.grey.inverted.progress .bar { background-color: #DCDDDE; } /* Black */ .ui.black.progress .bar { background-color: #1B1C1D; } .ui.black.inverted.progress .bar { background-color: #545454; } /*-------------- Sizes ---------------*/ .ui.tiny.progress { font-size: 0.875rem; } .ui.tiny.progress .bar { height: 0.5em; } .ui.small.progress { font-size: 0.9375rem; } .ui.small.progress .bar { height: 1em; } .ui.progress { font-size: 1rem; } .ui.progress .bar { height: 1.75em; } .ui.large.progress { font-size: 1.125rem; } .ui.large.progress .bar { height: 2.5em; } .ui.big.progress { font-size: 1.3125rem; } .ui.big.progress .bar { height: 3.5em; } /******************************* Progress *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Rating * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Rating *******************************/ /*------------------- Types --------------------*/ /* Standard */ /* Star */ /* Heart */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Rating *******************************/ /*------------------- Types --------------------*/ /* Standard */ /* Star */ /* Heart */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Rating *******************************/ .ui.rating { display: inline-flex; white-space: nowrap; vertical-align: baseline; } .ui.rating:last-child { margin-right: 0em; } /* Icon */ .ui.rating .icon { padding: 0em; margin: 0em; text-align: center; font-weight: normal; font-style: normal; flex: 1 0 auto; cursor: pointer; width: 1.25em; height: auto; transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease; } /******************************* Types *******************************/ /*------------------- Standard --------------------*/ /* Inactive Icon */ .ui.rating .icon { background: transparent; color: rgba(0, 0, 0, 0.15); } /* Active Icon */ .ui.rating .active.icon { background: transparent; color: rgba(0, 0, 0, 0.85); } /* Selected Icon */ .ui.rating .icon.selected, .ui.rating .icon.selected.active { background: transparent; color: #4A3041; } /*------------------- Star --------------------*/ /* Inactive */ .ui.star.rating .icon { width: 1.25em; height: auto; background: transparent; color: rgba(0, 0, 0, 0.15); text-shadow: none; } /* Active Star */ .ui.star.rating .active.icon { background: transparent !important; color: #FFE623 !important; text-shadow: 0px -1px 0px #DDC507, -1px 0px 0px #DDC507, 0px 1px 0px #DDC507, 1px 0px 0px #DDC507 !important; } /* Selected Star */ .ui.star.rating .icon.selected, .ui.star.rating .icon.selected.active { background: transparent !important; color: #FFCC00 !important; text-shadow: 0px -1px 0px #E6A200, -1px 0px 0px #E6A200, 0px 1px 0px #E6A200, 1px 0px 0px #E6A200 !important; } /*------------------- Heart --------------------*/ .ui.heart.rating .icon { width: 1.4em; height: auto; background: transparent; color: rgba(0, 0, 0, 0.15); text-shadow: none !important; } /* Active Heart */ .ui.heart.rating .active.icon { background: transparent !important; color: #FF6D75 !important; text-shadow: 0px -1px 0px #CD0707, -1px 0px 0px #CD0707, 0px 1px 0px #CD0707, 1px 0px 0px #CD0707 !important; } /* Selected Heart */ .ui.heart.rating .icon.selected, .ui.heart.rating .icon.selected.active { background: transparent !important; color: #FF3000 !important; text-shadow: 0px -1px 0px #AA0101, -1px 0px 0px #AA0101, 0px 1px 0px #AA0101, 1px 0px 0px #AA0101 !important; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /* disabled rating */ .ui.disabled.rating .icon { cursor: default; } /*------------------- User Interactive --------------------*/ /* Selected Rating */ .ui.rating.selected .active.icon { opacity: 1; } .ui.rating.selected .icon.selected, .ui.rating .icon.selected { opacity: 1; } /******************************* Variations *******************************/ .ui.mini.rating { font-size: 0.8125rem; } .ui.tiny.rating { font-size: 0.875rem; } .ui.small.rating { font-size: 0.9375rem; } .ui.rating { font-size: 1rem; } .ui.large.rating { font-size: 1.125rem; } .ui.huge.rating { font-size: 1.4375rem; } .ui.massive.rating { font-size: 2rem; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Rating'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtYXCj2pm8AAABHAAAAKRnYXNwAAAAEAAAAcAAAAAIZ2x5ZlJbXMYAAAHIAAARnGhlYWQBGAe5AAATZAAAADZoaGVhA+IB/QAAE5wAAAAkaG10eCzgAEMAABPAAAAAcGxvY2EwXCxOAAAUMAAAADptYXhwACIAnAAAFGwAAAAgbmFtZfC1n04AABSMAAABPHBvc3QAAwAAAAAVyAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxZQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAJAAAAAgACAABAAAAAEAIOYF8AbwDfAj8C7wbvBw8Irwl/Cc8SPxZf/9//8AAAAAACDmAPAE8AzwI/Au8G7wcPCH8JfwnPEj8WT//f//AAH/4xoEEAYQAQ/sD+IPow+iD4wPgA98DvYOtgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAP/tAgAB0wAKABUAAAEvAQ8BFwc3Fyc3BQc3Jz8BHwEHFycCALFPT7GAHp6eHoD/AHAWW304OH1bFnABGRqgoBp8sFNTsHyyOnxYEnFxElh8OgAAAAACAAD/7QIAAdMACgASAAABLwEPARcHNxcnNwUxER8BBxcnAgCxT0+xgB6enh6A/wA4fVsWcAEZGqCgGnywU1OwfLIBHXESWHw6AAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAEAAAAAAgABwAArAAABFA4CBzEHDgMjIi4CLwEuAzU0PgIzMh4CFz4DMzIeAhUCAAcMEgugBgwMDAYGDAwMBqALEgwHFyg2HhAfGxkKChkbHxAeNigXAS0QHxsZCqAGCwkGBQkLBqAKGRsfEB42KBcHDBILCxIMBxcoNh4AAAAAAgAAAAACAAHAACsAWAAAATQuAiMiDgIHLgMjIg4CFRQeAhcxFx4DMzI+Aj8BPgM1DwEiFCIGMTAmIjQjJy4DNTQ+AjMyHgIfATc+AzMyHgIVFA4CBwIAFyg2HhAfGxkKChkbHxAeNigXBwwSC6AGDAwMBgYMDAwGoAsSDAdbogEBAQEBAaIGCgcEDRceEQkREA4GLy8GDhARCREeFw0EBwoGAS0eNigXBwwSCwsSDAcXKDYeEB8bGQqgBgsJBgUJCwagChkbHxA+ogEBAQGiBg4QEQkRHhcNBAcKBjQ0BgoHBA0XHhEJERAOBgABAAAAAAIAAcAAMQAAARQOAgcxBw4DIyIuAi8BLgM1ND4CMzIeAhcHFwc3Jzc+AzMyHgIVAgAHDBILoAYMDAwGBgwMDAagCxIMBxcoNh4KFRMSCC9wQLBwJwUJCgkFHjYoFwEtEB8bGQqgBgsJBgUJCwagChkbHxAeNigXAwUIBUtAoMBAOwECAQEXKDYeAAABAAAAAAIAAbcAKgAAEzQ3NjMyFxYXFhcWFzY3Njc2NzYzMhcWFRQPAQYjIi8BJicmJyYnJicmNQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGBwExPyMkBgYLCgkKCgoKCQoLBgYkIz8/QawFBawCBgUNDg4OFRQTAAAAAQAAAA0B2wHSACYAABM0PwI2FzYfAhYVFA8BFxQVFAcGByYvAQcGByYnJjU0PwEnJjUAEI9BBQkIBkCPEAdoGQMDBgUGgIEGBQYDAwEYaAcBIwsCFoEMAQEMgRYCCwYIZJABBQUFAwEBAkVFAgEBAwUFAwOQZAkFAAAAAAIAAAANAdsB0gAkAC4AABM0PwI2FzYfAhYVFA8BFxQVFAcmLwEHBgcmJyY1ND8BJyY1HwEHNxcnNy8BBwAQj0EFCQgGQI8QB2gZDAUGgIEGBQYDAwEYaAc/WBVsaxRXeDY2ASMLAhaBDAEBDIEWAgsGCGSQAQUNAQECRUUCAQEDBQUDA5BkCQURVXg4OHhVEW5uAAABACMAKQHdAXwAGgAANzQ/ATYXNh8BNzYXNh8BFhUUDwEGByYvASY1IwgmCAwLCFS8CAsMCCYICPUIDAsIjgjSCwkmCQEBCVS7CQEBCSYJCg0H9gcBAQePBwwAAAEAHwAfAXMBcwAsAAA3ND8BJyY1ND8BNjMyHwE3NjMyHwEWFRQPARcWFRQPAQYjIi8BBwYjIi8BJjUfCFRUCAgnCAwLCFRUCAwLCCcICFRUCAgnCAsMCFRUCAsMCCcIYgsIVFQIDAsIJwgIVFQICCcICwwIVFQICwwIJwgIVFQICCcIDAAAAAACAAAAJQFJAbcAHwArAAA3NTQ3NjsBNTQ3NjMyFxYdATMyFxYdARQHBiMhIicmNTczNTQnJiMiBwYdAQAICAsKJSY1NCYmCQsICAgIC/7tCwgIW5MWFR4fFRZApQsICDc0JiYmJjQ3CAgLpQsICAgIC8A3HhYVFRYeNwAAAQAAAAcBbgG3ACEAADcRNDc2NzYzITIXFhcWFREUBwYHBiMiLwEHBiMiJyYnJjUABgUKBgYBLAYGCgUGBgUKBQcOCn5+Cg4GBgoFBicBcAoICAMDAwMICAr+kAoICAQCCXl5CQIECAgKAAAAAwAAACUCAAFuABgAMQBKAAA3NDc2NzYzMhcWFxYVFAcGBwYjIicmJyY1MxYXFjMyNzY3JicWFRQHBiMiJyY1NDcGBzcUFxYzMjc2NTQ3NjMyNzY1NCcmIyIHBhUABihDREtLREMoBgYoQ0RLS0RDKAYlJjk5Q0M5OSYrQREmJTU1JSYRQSuEBAQGBgQEEREZBgQEBAQGJBkayQoKQSgoKChBCgoKCkEoJycoQQoKOiMjIyM6RCEeIjUmJSUmNSIeIUQlBgQEBAQGGBIRBAQGBgQEGhojAAAABQAAAAkCAAGJACwAOABRAGgAcAAANzQ3Njc2MzIXNzYzMhcWFxYXFhcWFxYVFDEGBwYPAQYjIicmNTQ3JicmJyY1MxYXNyYnJjU0NwYHNxQXFjMyNzY1NDc2MzI3NjU0JyYjIgcGFRc3Njc2NyYnNxYXFhcWFRQHBgcGBwYjPwEWFRQHBgcABitBQU0ZGhADBQEEBAUFBAUEBQEEHjw8Hg4DBQQiBQ0pIyIZBiUvSxYZDg4RQSuEBAQGBgQEEREZBgQEBAQGJBkaVxU9MzQiIDASGxkZEAYGCxQrODk/LlACFxYlyQsJQycnBRwEAgEDAwIDAwIBAwUCNmxsNhkFFAMFBBUTHh8nCQtKISgSHBsfIh4hRCUGBAQEBAYYEhEEBAYGBAQaGiPJJQUiIjYzISASGhkbCgoKChIXMRsbUZANCyghIA8AAAMAAAAAAbcB2wA5AEoAlAAANzU0NzY7ATY3Njc2NzY3Njc2MzIXFhcWFRQHMzIXFhUUBxYVFAcUFRQHFgcGKwEiJyYnJisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzMyFxYXFhcWFxYXFhcWOwEyNTQnNjc2NTQnNjU0JyYnNjc2NTQnJisBNDc2NTQnJiMGBwYHBgcGBwYHBgcGBwYHBgcGBwYrARUACwoQTgodEQ4GBAMFBgwLDxgTEwoKDjMdFhYOAgoRARkZKCUbGxsjIQZSEAoLJQUFCAcGBQUGBwgFBUkJBAUFBAQHBwMDBwcCPCUjNwIJBQUFDwMDBAkGBgsLDmUODgoJGwgDAwYFDAYQAQUGAwQGBgYFBgUGBgQJSbcPCwsGJhUPCBERExMMCgkJFBQhGxwWFR4ZFQoKFhMGBh0WKBcXBgcMDAoLDxIHBQYGBQcIBQYGBQgSAQEBAQICAQEDAgEULwgIBQoLCgsJDhQHCQkEAQ0NCg8LCxAdHREcDQ4IEBETEw0GFAEHBwUECAgFBQUFAgO3AAADAAD/2wG3AbcAPABNAJkAADc1NDc2OwEyNzY3NjsBMhcWBxUWFRQVFhUUBxYVFAcGKwEWFRQHBgcGIyInJicmJyYnJicmJyYnIyInJjU3FBcWMzI3NjU0JyYjIgcGFRczMhcWFxYXFhcWFxYXFhcWFxYXFhcWFzI3NjU0JyY1MzI3NjU0JyYjNjc2NTQnNjU0JyYnNjU0JyYrASIHIgcGBwYHBgcGIwYrARUACwoQUgYhJRsbHiAoGRkBEQoCDhYWHTMOCgoTExgPCwoFBgIBBAMFDhEdCk4QCgslBQUIBwYFBQYHCAUFSQkEBgYFBgUGBgYEAwYFARAGDAUGAwMIGwkKDg5lDgsLBgYJBAMDDwUFBQkCDg4ZJSU8AgcHAwMHBwQEBQUECbe3DwsKDAwHBhcWJwIWHQYGExYKChUZHhYVHRoiExQJCgsJDg4MDAwNBg4WJQcLCw+kBwUGBgUHCAUGBgUIpAMCBQYFBQcIBAUHBwITBwwTExERBw0OHBEdHRALCw8KDQ0FCQkHFA4JCwoLCgUICBgMCxUDAgEBAgMBAQG3AAAAAQAAAA0A7gHSABQAABM0PwI2FxEHBgcmJyY1ND8BJyY1ABCPQQUJgQYFBgMDARhoBwEjCwIWgQwB/oNFAgEBAwUFAwOQZAkFAAAAAAIAAAAAAgABtwAqAFkAABM0NzYzMhcWFxYXFhc2NzY3Njc2MzIXFhUUDwEGIyIvASYnJicmJyYnJjUzFB8BNzY1NCcmJyYnJicmIyIHBgcGBwYHBiMiJyYnJicmJyYjIgcGBwYHBgcGFQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGByU1pqY1BgYJCg4NDg0PDhIRDg8KCgcFCQkFBwoKDw4REg4PDQ4NDgoJBgYBMT8jJAYGCwoJCgoKCgkKCwYGJCM/P0GsBQWsAgYFDQ4ODhUUEzA1oJ82MBcSEgoLBgcCAgcHCwsKCQgHBwgJCgsLBwcCAgcGCwoSEhcAAAACAAAABwFuAbcAIQAoAAA3ETQ3Njc2MyEyFxYXFhURFAcGBwYjIi8BBwYjIicmJyY1PwEfAREhEQAGBQoGBgEsBgYKBQYGBQoFBw4Kfn4KDgYGCgUGJZIZef7cJwFwCggIAwMDAwgICv6QCggIBAIJeXkJAgQICAoIjRl0AWP+nQAAAAABAAAAJQHbAbcAMgAANzU0NzY7ATU0NzYzMhcWHQEUBwYrASInJj0BNCcmIyIHBh0BMzIXFh0BFAcGIyEiJyY1AAgIC8AmJjQ1JiUFBQgSCAUFFhUfHhUWHAsICAgIC/7tCwgIQKULCAg3NSUmJiU1SQgFBgYFCEkeFhUVFh43CAgLpQsICAgICwAAAAIAAQANAdsB0gAiAC0AABM2PwI2MzIfAhYXFg8BFxYHBiMiLwEHBiMiJyY/AScmNx8CLwE/AS8CEwEDDJBABggJBUGODgIDCmcYAgQCCAMIf4IFBgYEAgEZaQgC7hBbEgINSnkILgEBJggCFYILC4IVAggICWWPCgUFA0REAwUFCo9lCQipCTBmEw1HEhFc/u0AAAADAAAAAAHJAbcAFAAlAHkAADc1NDc2OwEyFxYdARQHBisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzU0NzYzNjc2NzY3Njc2NzY3Njc2NzY3NjMyFxYXFhcWFxYXFhUUFRQHBgcGBxQHBgcGBzMyFxYVFAcWFRYHFgcGBxYHBgcjIicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQFBQgGDw8OFAkFBAQBAQMCAQIEBAYFBw4KCgcHBQQCAwEBAgMDAgYCAgIBAU8XEBAQBQEOBQUECwMREiYlExYXDAwWJAoHBQY3twcGBQUGB7cIBQUFBQgkBwYFBQYHCAUGBgUIJLcHBQYBEBATGQkFCQgGBQwLBgcICQUGAwMFBAcHBgYICQQEBwsLCwYGCgIDBAMCBBEQFhkSDAoVEhAREAsgFBUBBAUEBAcMAQUFCAAAAAADAAD/2wHJAZIAFAAlAHkAADcUFxYXNxY3Nj0BNCcmBycGBwYdATc0NzY3FhcWFRQHBicGJyY1FzU0NzY3Fjc2NzY3NjcXNhcWBxYXFgcWBxQHFhUUBwYHJxYXFhcWFRYXFhcWFRQVFAcGBwYHBgcGBwYnBicmJyYnJicmJyYnJicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQGBQcKJBYMDBcWEyUmEhEDCwQFBQ4BBRAQEBdPAQECAgIGAgMDAgEBAwIEBQcHCgoOBwUGBAQCAQIDAQEEBAUJFA4PDwYIBQWlBwYFAQEBBwQJtQkEBwEBAQUGB7eTBwYEAQEEBgcJBAYBAQYECZS4BwYEAgENBwUCBgMBAQEXEyEJEhAREBcIDhAaFhEPAQEFAgQCBQELBQcKDAkIBAUHCgUGBwgDBgIEAQEHBQkIBwUMCwcECgcGCRoREQ8CBgQIAAAAAQAAAAEAAJth57dfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAAAAAAoAFAAeAEoAcACKAMoBQAGIAcwCCgJUAoICxgMEAzoDpgRKBRgF7AYSBpgG2gcgB2oIGAjOAAAAAQAAABwAmgAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOEkoWShJKSkpGTkpKRlJGWkgiWkpaRl4+Yj5eNlou2i61/o3OjdJdqi2GLYXVgYGAI+0b7QAWHiIeJhouGi4eNh44I+0b3QAWJjYmNh4+IjoaRg5SElIWVhZSFlYaWh5mGmImYi5gIsIsVi2ucaa9oCPc6+zT3OvczBa+vnK2Lq4ubiZiHl4eXhpSFkoSSg5GCj4KQgo2CjYONgYuBi4KLgIl/hoCGgIWChAiBg4OFhISEhYaFhoaIhoaJhYuFi4aNiJCGkIaRhJGEkoORgZOCkoCRgJB/kICNgosIgYuBi4OJgomCiYKGgoeDhYSEhYSGgod/h3+Jfot7CA77JouyFYv4BAWLkY2Rj5GOkJCPko2PjY+Mj4sI98CLBY+Lj4qPiZGJkIePho+FjYWLhQiL/AQFi4SJhYeGh4aGh4WIiIqGioeLgYuEjoSRCPsS9w37EvsNBYSFg4iCi4eLh4uHjYSOho+IkIeQiZGLkgiwkxX3JvchpHL3DfsIi/f3+7iLi/v3BQ5ni8sVi/c5BYuSjpKQkJCQko6Siwj3VIuLwgWLrpippKSkpKmYrouvi6l+pHKkcpdti2gIi0IFi4aKhoeIh4eHiYaLCHmLBYaLh42Hj4eOipCLkAiL1AWLn4OcfZp9mXqSdot3i3qEfX18fIR6i3cIi1SniwWSi5KIkIaQho6Ei4QIi/s5BYuDiIWGhoaFhImEiwj7p4sFhIuEjYaRhpCIkYuTCA5njPe6FYyQkI6UjQj3I6DM9xYFj5KPj5GLkIuQh4+ECMv7FvcjdgWUiZCIjYaNhoiFhYUIIyak+yMFjIWKhomHiYiIiYaLiIuHjIeNCPsUz/sVRwWHiYeKiIuHi4eNiY6Jj4uQjJEIo/cjI/AFhZGJkY2QCPeB+z0VnILlW3rxiJ6ZmNTS+wydgpxe54v7pwUOZ4vCFYv3SwWLkI2Pjo+Pjo+NkIsI3osFkIuPiY6Ij4eNh4uGCIv7SwWLhomHh4eIh4eKhosIOIsFhouHjIePiI+Jj4uQCLCvFYuGjIePh46IkImQi5CLj42Pjo6PjY+LkIuQiZCIjoePh42Gi4aLhomIh4eIioaLhgjvZxWL90sFi5CNj46Oj4+PjZCLj4ySkJWWlZaVl5SXmJuVl5GRjo6OkI6RjZCNkIyPjI6MkY2TCIySjJGMj4yPjZCOkY6RjpCPjo6Pj42Qi5SLk4qSiZKJkYiPiJCIjoiPho6GjYeMhwiNh4yGjIaMhYuHi4iLiIuHi4eLg4uEiYSJhImFiYeJh4mFh4WLioqJiomJiIqJiokIi4qKiIqJCNqLBZqLmIWWgJaAkH+LfIt6hn2Af46DjYSLhIt9h36Cf4+Bi3+HgImAhYKEhI12hnmAfgh/fXiDcosIZosFfot+jHyOfI5/joOOg41/j32Qc5N8j4SMhouHjYiOh4+Jj4uQCA5ni/c5FYuGjYaOiI+Hj4mQiwjeiwWQi4+Njo+Pjo2Qi5AIi/dKBYuQiZCHjoiPh42Giwg4iwWGi4eJh4eIiImGi4YIi/tKBbD3JhWLkIyPj4+OjpCNkIuQi4+Jj4iOh42Hi4aLhomHiIeHh4eKhouGi4aMiI+Hj4qPi5AI7/snFYv3SwWLkI2Qj46Oj4+NkIuSi5qPo5OZkJePk46TjZeOmo6ajpiMmIsIsIsFpIueg5d9ln6Qeol1koSRgo2Aj4CLgIeAlH+Pfot9i4WJhIiCloCQfIt7i3yFfoGACICAfoZ8iwg8iwWMiIyJi4mMiYyJjYmMiIyKi4mPhI2GjYeNh42GjYOMhIyEi4SLhouHi4iLiYuGioYIioWKhomHioeJh4iGh4eIh4aIh4iFiISJhImDioKLhouHjYiPh4+Ij4iRiJGJkIqPCIqPipGKkomTipGKj4qOiZCJkYiQiJCIjoWSgZZ+nIKXgZaBloGWhJGHi4aLh42HjwiIjomQi48IDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAPFlAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAkAAAACAAIAAEAAAAAQAg5gXwBvAN8CPwLvBu8HDwivCX8JzxI/Fl//3//wAAAAAAIOYA8ATwDPAj8C7wbvBw8Ifwl/Cc8SPxZP/9//8AAf/jGgQQBhABD+wP4g+jD6IPjA+AD3wO9g62AAMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAJrVlLJfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAFAAABwAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal; } .ui.rating .icon { font-family: 'Rating'; line-height: 1; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } /* Empty Star */ .ui.rating .icon:before { content: '\f005'; } /* Active Star */ .ui.rating .active.icon:before { content: '\f005'; } /*------------------- Star --------------------*/ /* Unfilled Star */ .ui.star.rating .icon:before { content: '\f005'; } /* Active Star */ .ui.star.rating .active.icon:before { content: '\f005'; } /* Partial */ .ui.star.rating .partial.icon:before { content: '\f006'; } .ui.star.rating .partial.icon { content: '\f005'; } /*------------------- Heart --------------------*/ /* Empty Heart .ui.heart.rating .icon:before { content: '\f08a'; } */ .ui.heart.rating .icon:before { content: '\f004'; } /* Active */ .ui.heart.rating .active.icon:before { content: '\f004'; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Search * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Search *******************************/ /* Search Prompt */ /* Mobile */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Packaged Theme */ /******************************* Search *******************************/ /* Search Prompt */ /* Mobile */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Search *******************************/ .ui.search { position: relative; } .ui.search > .prompt { margin: 0em; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-shadow: none; font-style: normal; font-weight: normal; line-height: 1.21428571em; padding: 0.58035714em 0.875em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: #4A3041; box-shadow: 0em 0em 0em 0em transparent inset; transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; } .ui.search .prompt { border-radius: 500rem; } /*-------------- Icon ---------------*/ .ui.search .prompt ~ .search.icon { cursor: pointer; } /*-------------- Results ---------------*/ .ui.search > .results { display: none; position: absolute; top: 100%; left: 0%; transform-origin: center top; white-space: normal; text-align: left; text-transform: none; background: #FFFFFF; margin-top: 0.5em; width: 18em; border-radius: 0.25rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); border: 1px solid #D4D4D5; z-index: 998; } .ui.search > .results > :first-child { border-radius: 0.25rem 0.25rem 0em 0em; } .ui.search > .results > :last-child { border-radius: 0em 0em 0.25rem 0.25rem; } /*-------------- Result ---------------*/ .ui.search > .results .result { cursor: pointer; display: block; overflow: hidden; font-size: 1em; padding: 0.875em 1.125em; color: #4A3041; line-height: 1.33; border-bottom: 1px solid rgba(34, 36, 38, 0.1); } .ui.search > .results .result:last-child { border-bottom: none !important; } /* Image */ .ui.search > .results .result .image { float: right; overflow: hidden; background: none; width: 5em; height: 3em; border-radius: 0.25em; } .ui.search > .results .result .image img { display: block; width: auto; height: 100%; } /*-------------- Info ---------------*/ .ui.search > .results .result .image + .content { margin: 0em 6em 0em 0em; } .ui.search > .results .result .title { margin: -0.14285714em 0em 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1em; color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result .description { margin-top: 0; font-size: 0.9375em; color: rgba(0, 0, 0, 0.4); } .ui.search > .results .result .price { float: right; color: #21BA45; } /*-------------- Message ---------------*/ .ui.search > .results > .message { padding: 1em 1em; } .ui.search > .results > .message .header { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: bold; color: #4A3041; } .ui.search > .results > .message .description { margin-top: 0.25rem; font-size: 1em; color: #4A3041; } /* View All Results */ .ui.search > .results > .action { display: block; border-top: none; background: #F3F4F5; padding: 0.9375em 1em; color: #4A3041; font-weight: bold; text-align: center; } /******************************* States *******************************/ /*-------------------- Focus ---------------------*/ .ui.search > .prompt:focus { border-color: rgba(34, 36, 38, 0.35); background: #FFFFFF; color: rgba(0, 0, 0, 0.95); } /*-------------------- Loading ---------------------*/ .ui.loading.search .input > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.search .input > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.65625em 0em 0em -0.65625em; width: 1.3125em; height: 1.3125em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /*-------------- Hover ---------------*/ .ui.search > .results .result:hover, .ui.category.search > .results .category .result:hover { background: #F9FAFB; } .ui.search .action:hover { background: #E0E0E0; } /*-------------- Active ---------------*/ .ui.category.search > .results .category.active { background: #F3F4F5; } .ui.category.search > .results .category.active > .name { color: #4A3041; } .ui.search > .results .result.active, .ui.category.search > .results .category .result.active { position: relative; border-left-color: rgba(34, 36, 38, 0.1); background: #F3F4F5; box-shadow: none; } .ui.search > .results .result.active .title { color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result.active .description { color: rgba(0, 0, 0, 0.85); } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.search { cursor: default; pointer-events: none; opacity: 0.45; } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ .ui.search.selection .prompt { border-radius: 0.25rem; } /* Remove input */ .ui.search.selection > .icon.input > .remove.icon { pointer-events: none; position: absolute; left: auto; opacity: 0; color: ''; top: 0em; right: 0em; transition: color 0.1s ease, opacity 0.1s ease; } .ui.search.selection > .icon.input > .active.remove.icon { cursor: pointer; opacity: 0.8; pointer-events: auto; } .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { right: 1.85714em; } .ui.search.selection > .icon.input > .remove.icon:hover { opacity: 1; color: #DB2828; } /*-------------- Category ---------------*/ .ui.category.search .results { width: 28em; } .ui.category.search .results.animating, .ui.category.search .results.visible { display: table; } /* Category */ .ui.category.search > .results .category { display: table-row; background: #F3F4F5; box-shadow: none; transition: background 0.1s ease, border-color 0.1s ease; } /* Last Category */ .ui.category.search > .results .category:last-child { border-bottom: none; } /* First / Last */ .ui.category.search > .results .category:first-child .name + .result { border-radius: 0em 0.25rem 0em 0em; } .ui.category.search > .results .category:last-child .result:last-child { border-radius: 0em 0em 0.25rem 0em; } /* Category Result Name */ .ui.category.search > .results .category > .name { display: table-cell; text-overflow: ellipsis; width: 100px; white-space: nowrap; background: transparent; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; padding: 0.4em 1em; font-weight: bold; color: rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(34, 36, 38, 0.1); } /* Category Result */ .ui.category.search > .results .category .results { display: table-cell; background: #FFFFFF; border-left: 1px solid rgba(34, 36, 38, 0.15); border-bottom: 1px solid rgba(34, 36, 38, 0.1); } .ui.category.search > .results .category .result { border-bottom: 1px solid rgba(34, 36, 38, 0.1); transition: background 0.1s ease, border-color 0.1s ease; padding: 0.875em 1.125em; } /******************************* Variations *******************************/ /*------------------- Left / Right --------------------*/ .ui[class*="left aligned"].search > .results { right: auto; left: 0%; } .ui[class*="right aligned"].search > .results { right: 0%; left: auto; } /*-------------- Fluid ---------------*/ .ui.fluid.search .results { width: 100%; } /*-------------- Sizes ---------------*/ .ui.mini.search { font-size: 0.8125em; } .ui.small.search { font-size: 0.9375em; } .ui.search { font-size: 1em; } .ui.large.search { font-size: 1.125em; } .ui.big.search { font-size: 1.3125em; } .ui.huge.search { font-size: 1.4375em; } .ui.massive.search { font-size: 1.6875em; } /*-------------- Mobile ---------------*/ @media only screen and (max-width: 767px) { .ui.search .results { max-width: calc(100vw - 2rem); } } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Shape * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Shape *******************************/ /* Animating */ /* Side */ /*-------------- Types ---------------*/ /* Cube */ /* Packaged Theme */ /******************************* Shape *******************************/ /* Animating */ /* Side */ /*-------------- Types ---------------*/ /* Cube */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Shape *******************************/ .ui.shape { position: relative; vertical-align: top; display: inline-block; perspective: 2000px; transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; } .ui.shape .sides { transform-style: preserve-3d; } .ui.shape .side { opacity: 1; width: 100%; margin: 0em !important; backface-visibility: hidden; } .ui.shape .side { display: none; } .ui.shape .side * { backface-visibility: visible !important; } /******************************* Types *******************************/ .ui.cube.shape .side { min-width: 15em; height: 15em; padding: 2em; background-color: #E6E6E6; color: #4A3041; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); } .ui.cube.shape .side > .content { width: 100%; height: 100%; display: table; text-align: center; -webkit-user-select: text; user-select: text; } .ui.cube.shape .side > .content > div { display: table-cell; vertical-align: middle; font-size: 2em; } /******************************* Variations *******************************/ .ui.text.shape.animating .sides { position: static; } .ui.text.shape .side { white-space: nowrap; } .ui.text.shape .side > * { white-space: normal; } /******************************* States *******************************/ /*-------------- Loading ---------------*/ .ui.loading.shape { position: absolute; top: -9999px; left: -9999px; } /*-------------- Animating ---------------*/ .ui.shape .animating.side { position: absolute; top: 0px; left: 0px; display: block; z-index: 100; } .ui.shape .hidden.side { opacity: 0.6; } /*-------------- CSS ---------------*/ .ui.shape.animating .sides { position: absolute; } .ui.shape.animating .sides { transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; } .ui.shape.animating .side { transition: opacity 0.6s ease-in-out; } /*-------------- Active ---------------*/ .ui.shape .active.side { display: block; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Sidebar * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Packaged Theme */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Sidebar *******************************/ /* Sidebar Menu */ .ui.sidebar { position: fixed; top: 0; left: 0; backface-visibility: hidden; transition: none; will-change: transform; transform: translate3d(0, 0, 0); visibility: hidden; -webkit-overflow-scrolling: touch; height: 100% !important; max-height: 100%; border-radius: 0em !important; margin: 0em !important; overflow-y: auto !important; z-index: 102; } /* GPU Layers for Child Elements */ .ui.sidebar > * { backface-visibility: hidden; } /*-------------- Direction ---------------*/ .ui.left.sidebar { right: auto; left: 0px; transform: translate3d(-100%, 0, 0); } .ui.right.sidebar { right: 0px !important; left: auto !important; transform: translate3d(100%, 0%, 0); } .ui.top.sidebar, .ui.bottom.sidebar { width: 100% !important; height: auto !important; } .ui.top.sidebar { top: 0px !important; bottom: auto !important; transform: translate3d(0, -100%, 0); } .ui.bottom.sidebar { top: auto !important; bottom: 0px !important; transform: translate3d(0, 100%, 0); } /*-------------- Pushable ---------------*/ .pushable { height: 100%; overflow-x: hidden; padding: 0em !important; } /* Whole Page */ body.pushable { background: #545454 !important; } /* Page Context */ .pushable:not(body) { transform: translate3d(0, 0, 0); } .pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, .pushable:not(body) > .pusher:after { position: absolute; } /*-------------- Fixed ---------------*/ .pushable > .fixed { position: fixed; backface-visibility: hidden; transition: transform 500ms ease; will-change: transform; z-index: 101; } /*-------------- Page ---------------*/ .pushable > .pusher { position: relative; backface-visibility: hidden; overflow: hidden; min-height: 100%; transition: transform 500ms ease; z-index: 2; } body.pushable > .pusher { background: #FFFFFF; } /* Pusher should inherit background from context */ .pushable > .pusher { background: inherit; } /*-------------- Dimmer ---------------*/ .pushable > .pusher:after { position: fixed; top: 0px; right: 0px; content: ''; background-color: rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; transition: opacity 500ms; will-change: opacity; z-index: 1000; } /*-------------- Coupling ---------------*/ .ui.sidebar.menu .item { border-radius: 0em !important; } /******************************* States *******************************/ /*-------------- Dimmed ---------------*/ .pushable > .pusher.dimmed:after { width: 100% !important; height: 100% !important; opacity: 1 !important; } /*-------------- Animating ---------------*/ .ui.animating.sidebar { visibility: visible; } /*-------------- Visible ---------------*/ .ui.visible.sidebar { visibility: visible; transform: translate3d(0, 0, 0); } /* Shadow Direction */ .ui.left.visible.sidebar, .ui.right.visible.sidebar { box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } .ui.top.visible.sidebar, .ui.bottom.visible.sidebar { box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } /* Visible On Load */ .ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher { transform: translate3d(260px, 0, 0); } .ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher { transform: translate3d(-260px, 0, 0); } .ui.visible.top.sidebar ~ .fixed, .ui.visible.top.sidebar ~ .pusher { transform: translate3d(0, 36px, 0); } .ui.visible.bottom.sidebar ~ .fixed, .ui.visible.bottom.sidebar ~ .pusher { transform: translate3d(0, -36px, 0); } /* opposite sides visible forces content overlay */ .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { transform: translate3d(0, 0, 0); } /*-------------- iOS ---------------*/ /******************************* Variations *******************************/ /*-------------- Width ---------------*/ /* Left / Right */ .ui.thin.left.sidebar, .ui.thin.right.sidebar { width: 150px; } .ui[class*="very thin"].left.sidebar, .ui[class*="very thin"].right.sidebar { width: 60px; } .ui.left.sidebar, .ui.right.sidebar { width: 260px; } .ui.wide.left.sidebar, .ui.wide.right.sidebar { width: 350px; } .ui[class*="very wide"].left.sidebar, .ui[class*="very wide"].right.sidebar { width: 475px; } /* Left Visible */ .ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher { transform: translate3d(150px, 0, 0); } .ui.visible[class*="very thin"].left.sidebar ~ .fixed, .ui.visible[class*="very thin"].left.sidebar ~ .pusher { transform: translate3d(60px, 0, 0); } .ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher { transform: translate3d(350px, 0, 0); } .ui.visible[class*="very wide"].left.sidebar ~ .fixed, .ui.visible[class*="very wide"].left.sidebar ~ .pusher { transform: translate3d(475px, 0, 0); } /* Right Visible */ .ui.visible.thin.right.sidebar ~ .fixed, .ui.visible.thin.right.sidebar ~ .pusher { transform: translate3d(-150px, 0, 0); } .ui.visible[class*="very thin"].right.sidebar ~ .fixed, .ui.visible[class*="very thin"].right.sidebar ~ .pusher { transform: translate3d(-60px, 0, 0); } .ui.visible.wide.right.sidebar ~ .fixed, .ui.visible.wide.right.sidebar ~ .pusher { transform: translate3d(-350px, 0, 0); } .ui.visible[class*="very wide"].right.sidebar ~ .fixed, .ui.visible[class*="very wide"].right.sidebar ~ .pusher { transform: translate3d(-475px, 0, 0); } /******************************* Animations *******************************/ /*-------------- Overlay ---------------*/ /* Set-up */ .ui.overlay.sidebar { z-index: 102; } /* Initial */ .ui.left.overlay.sidebar { transform: translate3d(-100%, 0%, 0); } .ui.right.overlay.sidebar { transform: translate3d(100%, 0%, 0); } .ui.top.overlay.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.overlay.sidebar { transform: translate3d(0%, 100%, 0); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar { transition: transform 500ms ease; } /* End - Sidebar */ .ui.visible.left.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.right.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.top.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.bottom.overlay.sidebar { transform: translate3d(0%, 0%, 0); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher { transform: none !important; } /*-------------- Push ---------------*/ /* Initial */ .ui.push.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.push.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.push.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.push.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.push.sidebar { transform: translate3d(0%, 100%, 0); } /* End */ .ui.visible.push.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Uncover ---------------*/ /* Initial */ .ui.uncover.sidebar { transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar { transform: translate3d(0, 0, 0); transition: transform 500ms ease; } /*-------------- Slide Along ---------------*/ /* Initial */ .ui.slide.along.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.along.sidebar { transform: translate3d(-50%, 0, 0); } .ui.right.slide.along.sidebar { transform: translate3d(50%, 0, 0); } .ui.top.slide.along.sidebar { transform: translate3d(0, -50%, 0); } .ui.bottom.slide.along.sidebar { transform: translate3d(0%, 50%, 0); } /* Animation */ .ui.animating.slide.along.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Slide Out ---------------*/ /* Initial */ .ui.slide.out.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.out.sidebar { transform: translate3d(50%, 0, 0); } .ui.right.slide.out.sidebar { transform: translate3d(-50%, 0, 0); } .ui.top.slide.out.sidebar { transform: translate3d(0%, 50%, 0); } .ui.bottom.slide.out.sidebar { transform: translate3d(0%, -50%, 0); } /* Animation */ .ui.animating.slide.out.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Scale Down ---------------*/ /* Initial */ .ui.scale.down.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.scale.down.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.scale.down.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.scale.down.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.scale.down.sidebar { transform: translate3d(0%, 100%, 0); } /* Pusher - Initial */ .ui.scale.down.left.sidebar ~ .pusher { transform-origin: 75% 50%; } .ui.scale.down.right.sidebar ~ .pusher { transform-origin: 25% 50%; } .ui.scale.down.top.sidebar ~ .pusher { transform-origin: 50% 75%; } .ui.scale.down.bottom.sidebar ~ .pusher { transform-origin: 50% 25%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar { transition: transform 500ms ease; } .ui.visible.scale.down.sidebar ~ .pusher, .ui.animating.scale.down.sidebar ~ .pusher { display: block !important; width: 100%; height: 100%; overflow: hidden !important; } /* End */ .ui.visible.scale.down.sidebar { transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher { transform: scale(0.75); } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Sticky * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Sticky *******************************/ /* Packaged Theme */ /******************************* Sticky *******************************/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Sticky *******************************/ .ui.sticky { position: static; transition: none; z-index: 800; } /******************************* States *******************************/ /* Bound */ .ui.sticky.bound { position: absolute; left: auto; right: auto; } /* Fixed */ .ui.sticky.fixed { position: fixed; left: auto; right: auto; } /* Bound/Fixed Position */ .ui.sticky.bound.top, .ui.sticky.fixed.top { top: 0px; bottom: auto; } .ui.sticky.bound.bottom, .ui.sticky.fixed.bottom { top: auto; bottom: 0px; } /******************************* Types *******************************/ .ui.native.sticky { position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Tab * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Tab *******************************/ /* Loading */ /* Packaged Theme */ /******************************* Tab *******************************/ /* Loading */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* UI Tabs *******************************/ .ui.tab { display: none; } /******************************* States *******************************/ /*-------------------- Active ---------------------*/ .ui.tab.active, .ui.tab.open { display: block; } /*-------------------- Loading ---------------------*/ .ui.tab.loading { position: relative; overflow: hidden; display: block; min-height: 250px; } .ui.tab.loading * { position: relative !important; left: -10000px !important; } .ui.tab.loading:before, .ui.tab.loading.segment:before { position: absolute; content: ''; top: 100px; left: 50%; margin: -1.25em 0em 0em -1.25em; width: 2.5em; height: 2.5em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.tab.loading:after, .ui.tab.loading.segment:after { position: absolute; content: ''; top: 100px; left: 50%; margin: -1.25em 0em 0em -1.25em; width: 2.5em; height: 2.5em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /******************************* Tab Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Transition * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages in the the node-modules semantic-ui-less directory*/ /* Path to site override folder up from the node-modules semantic-ui-less directory */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* NOTE: Primary and secondary brand colors are echoed into pdfStyles.js */ /* Primary Colors */ /* Secondary Colors */ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Transition *******************************/ /* Packaged Theme */ /******************************* Transition *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Transitions *******************************/ .transition { animation-iteration-count: 1; animation-duration: 300ms; animation-timing-function: ease; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { backface-visibility: hidden; visibility: visible !important; } /* Loading */ .loading.transition { position: absolute; top: -99999px; left: -99999px; } /* Hidden */ .hidden.transition { display: none; visibility: hidden; } /* Visible */ .visible.transition { display: block !important; visibility: visible !important; /* backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;*/ } /* Disabled */ .disabled.transition { animation-play-state: paused; } /******************************* Variations *******************************/ .looping.transition { animation-iteration-count: infinite; } /******************************* Transitions *******************************/ /* Some transitions adapted from Animate CSS https://github.com/daneden/animate.css Additional transitions adapted from Glide by Nick Pettit - https://github.com/nickpettit/glide */ /*-------------- Browse ---------------*/ .transition.browse { animation-duration: 500ms; } .transition.browse.in { animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { animation-name: browseOutLeft; } .transition.browse.right.out { animation-name: browseOutRight; } /* In */ @keyframes browseIn { 0% { transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @keyframes browseOutLeft { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { transform-origin: top center; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { animation-name: dropIn; } .drop.transition.out { animation-name: dropOut; } /* Drop */ @keyframes dropIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes dropOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { animation-name: fadeIn; } .transition[class*="fade up"].in { animation-name: fadeInUp; } .transition[class*="fade down"].in { animation-name: fadeInDown; } .transition[class*="fade left"].in { animation-name: fadeInLeft; } .transition[class*="fade right"].in { animation-name: fadeInRight; } .transition.fade.out { animation-name: fadeOut; } .transition[class*="fade up"].out { animation-name: fadeOutUp; } .transition[class*="fade down"].out { animation-name: fadeOutDown; } .transition[class*="fade left"].out { animation-name: fadeOutLeft; } .transition[class*="fade right"].out { animation-name: fadeOutRight; } /* In */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(-10%); } 100% { opacity: 1; transform: translateX(0%); } } /* Out */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(5%); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(-5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(5%); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { animation-duration: 600ms; } .horizontal.flip.transition.in { animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { animation-name: horizontalFlipOut; } .vertical.flip.transition.in { animation-name: verticalFlipIn; } .vertical.flip.transition.out { animation-name: verticalFlipOut; } /* In */ @keyframes horizontalFlipIn { 0% { transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @keyframes horizontalFlipOut { 0% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { animation-name: scaleIn; } .scale.transition.out { animation-name: scaleOut; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Out */ @keyframes scaleOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { animation-duration: 0.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { animation-name: flyIn; } .transition[class*="fly up"].in { animation-name: flyInUp; } .transition[class*="fly down"].in { animation-name: flyInDown; } .transition[class*="fly left"].in { animation-name: flyInLeft; } .transition[class*="fly right"].in { animation-name: flyInRight; } /* Outward */ .transition.fly.out { animation-name: flyOut; } .transition[class*="fly up"].out { animation-name: flyOutUp; } .transition[class*="fly down"].out { animation-name: flyOutDown; } .transition[class*="fly left"].out { animation-name: flyOutLeft; } .transition[class*="fly right"].out { animation-name: flyOutRight; } /* In */ @keyframes flyIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes flyInUp { 0% { opacity: 0; transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes flyInDown { 0% { opacity: 0; transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } @keyframes flyInRight { 0% { opacity: 0; transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } /* Out */ @keyframes flyOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOutUp { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @keyframes flyOutDown { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes flyOutRight { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { animation-name: slideInY; transform-origin: top center; } .transition[class*="slide up"].in { animation-name: slideInY; transform-origin: bottom center; } .transition[class*="slide left"].in { animation-name: slideInX; transform-origin: center right; } .transition[class*="slide right"].in { animation-name: slideInX; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { animation-name: slideOutY; transform-origin: top center; } .transition[class*="slide up"].out { animation-name: slideOutY; transform-origin: bottom center; } .transition[class*="slide left"].out { animation-name: slideOutX; transform-origin: center right; } .transition[class*="slide right"].out { animation-name: slideOutX; transform-origin: center left; } /* In */ @keyframes slideInY { 0% { opacity: 0; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } } @keyframes slideInX { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } /* Out */ @keyframes slideOutY { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } } @keyframes slideOutX { 0% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { animation-duration: 800ms; } .transition[class*="swing down"].in { animation-name: swingInX; transform-origin: top center; } .transition[class*="swing up"].in { animation-name: swingInX; transform-origin: bottom center; } .transition[class*="swing left"].in { animation-name: swingInY; transform-origin: center right; } .transition[class*="swing right"].in { animation-name: swingInY; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { animation-name: swingOutX; transform-origin: top center; } .transition[class*="swing up"].out { animation-name: swingOutX; transform-origin: bottom center; } .transition[class*="swing left"].out { animation-name: swingOutY; transform-origin: center right; } .transition[class*="swing right"].out { animation-name: swingOutY; transform-origin: center left; } /* In */ @keyframes swingInX { 0% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateX(15deg); } 80% { transform: perspective(1000px) rotateX(-7.5deg); } 100% { transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInY { 0% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateY(-17.5deg); } 80% { transform: perspective(1000px) rotateY(7.5deg); } 100% { transform: perspective(1000px) rotateY(0deg); } } /* Out */ @keyframes swingOutX { 0% { transform: perspective(1000px) rotateX(0deg); } 40% { transform: perspective(1000px) rotateX(-7.5deg); } 60% { transform: perspective(1000px) rotateX(17.5deg); } 80% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutY { 0% { transform: perspective(1000px) rotateY(0deg); } 40% { transform: perspective(1000px) rotateY(7.5deg); } 60% { transform: perspective(1000px) rotateY(-10deg); } 80% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /*-------------- Zoom ---------------*/ .transition.zoom.in { animation-name: zoomIn; } .transition.zoom.out { animation-name: zoomOut; } @keyframes zoomIn { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(0); } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { animation-duration: 750ms; animation-name: flash; } .shake.transition { animation-duration: 750ms; animation-name: shake; } .bounce.transition { animation-duration: 750ms; animation-name: bounce; } .tada.transition { animation-duration: 750ms; animation-name: tada; } .pulse.transition { animation-duration: 500ms; animation-name: pulse; } .jiggle.transition { animation-duration: 750ms; animation-name: jiggle; } .transition.glow { animation-duration: 2000ms; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .transition.glow { animation-name: glow; } /* Flash */ @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /* Bounce */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /* Tada */ @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } /* Pulse */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Jiggle */ @keyframes jiggle { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } /* Glow */ @keyframes glow { 0% { background-color: #FCFCFD; } 30% { background-color: #FFF6CD; } 100% { background-color: #FCFCFD; } } /******************************* Site Overrides *******************************/ .header-container{line-height:1;background-color:var(--primary-neutral-color);pointer-events:none;transition:transform 140ms ease-in-out;font-size:var(--semantic-ui-rem)}.header-container .header-wrapper{position:relative;width:100%;box-sizing:border-box;padding:2vw 4vw 2vw 2vw;pointer-events:auto}.header-container .header-wrapper .header-dropshadow{color:hsl(0,0%,7.84%);width:100%;height:100%;box-sizing:border-box;position:absolute;top:0;left:0;pointer-events:none;box-shadow:0 12px 12px 1px;opacity:.15}.header-container .header-wrapper .header-inner{display:flex;justify-content:space-between;padding:1em}.header-container .header-wrapper .header-logo-subtext{padding-top:1em;font-size:23px;font-weight:700;color:var(--primary-dark-color)}@media(max-width: 700px){.header-container .header-wrapper .header-logo-wrapper img{height:20px}.header-container .header-wrapper .header-logo-subtext{font-size:small}}@media(min-width: 700px){.header-container .header-wrapper .header-logo-wrapper img{height:35px}}.header-container .header-wrapper .personal-header-wrapper .userFullName{font-weight:700;font-size:larger;color:var(--primary-dark-color)}.header-container .header-wrapper .mobileMenu{border:none;box-shadow:none;background-color:var(--primary-neutral-color)}.header-container .header-wrapper .mobileMenuButton{background-color:var(--primary-neutral-color)}@media only screen and (pointer: coarse)and (max-width: 1024px),screen and (max-width: 799px){.header .header-announcement-bar-wrapper{padding:6vw}}.footer-container{margin-top:auto;font-size:var(--sqs-rem)}.footer-container .default-footer{position:relative;padding:3em 5em 1em 5em;text-align:left;color:#fff}.footer-container .default-footer .footer-image-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1}.footer-container .default-footer .footer-image-wrapper img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.footer-container .default-footer a{color:#fff;-webkit-text-decoration:underline;text-decoration:underline}.footer-container .footer-content{line-height:25px;font-family:var(--primary-font-family);font-style:normal;font-weight:400}.footer-container .phone-number-wrapper{margin-top:.5em}.footer-container .site-address-wrapper{margin-top:.5em}.footer-container .copyright-wrapper{text-align:center}.footer-container .auxiliary-footer{position:relative;padding-top:1em;padding-bottom:1em;color:var(--primary-dark-color);background-color:var(--primary-neutral-color);font-size:var(--sqs-rem);text-align:center}.footer-container .auxiliary-footer .title-wrapper{margin-top:.5em;font-size:calc(.1vh*var(--sqs-rem));font-weight:700}.footer-container .auxiliary-footer .content-wrapper{margin-top:.5em;font-size:var(--sqs-rem);margin-bottom:.5em}.footer-container .auxiliary-footer .button-prompt{margin-bottom:.5em}.footer-container .auxiliary-footer .faq-button-area{margin-top:1em;margin-bottom:1em;display:flex;justify-content:center}.footer-container .auxiliary-footer .faq-button-area .faq-button-area-inner-column{display:flex;flex-direction:column;gap:20px}.breadcrumb-wrapper{margin-top:1em;margin-left:1em;color:var(--primary-dark-color)}.page-title-wrapper{display:flex;justify-content:center;margin-top:1em;margin-bottom:1em}.page-title-item{font-size:28.8px;font-weight:700;letter-spacing:var(--body-font-letter-spacing);word-wrap:break-word;text-align:center;line-height:1.44em;color:var(--primary-light-color)}@media screen and (min-width: 768px),screen and (max-width: 1928.2px)and (orientation: landscape){.page-title-item{font-size:calc(1.2vw + var(--sqs-rem))}}@media screen and (min-width: 1928.2px){.page-title-item{font-size:calc(2*var(--sqs-rem))}}.page-title-subtext-wrapper{display:flex;justify-content:center;margin:var(--sqs-rem) 0;color:var(--primary-dark-color)}.page-title-subtext{word-wrap:break-word;white-space:pre-wrap;line-height:var(--body-font-line-height)}.page-title-subtext .centered{text-align:center}.page-title-subtext.narrow{width:80%}@media screen and (min-width: 768px),screen and (max-width: 1928.2px)and (orientation: landscape){.page-title-subtext{font-size:calc((var(--large-text-size-value) - 1)*1.2vw + var(--sqs-rem))}.page-title-subtext.smaller{font-size:var(--sqs-rem);width:70%}}@media screen and (min-width: 1928.2px){.page-title-subtext{font-size:calc(var(--large-text-size-value)*var(--sqs-rem))}.page-title-subtext.smaller{font-size:calc(.1vw + var(--sqs-rem));width:70%}}@media screen and (max-width: 767px)and (orientation: portrait){.page-title-subtext{font-size:calc((var(--large-text-size-value) - 1)*.015*min(100vh,900px) + var(--sqs-rem))}.page-title-subtext.smaller{font-size:var(--sqs-rem);width:70%}}#application{min-height:100vh}.full-height-flex-column{min-height:100vh !important;display:flex;flex-direction:column}.centered-flex-content{display:flex;justify-content:center}.centered-flex-content .reduced-divider{width:90%;margin-top:2em}iframe{display:block;width:100%;height:100vh;border:none}.positiveColor{color:var(--positive-color)}.negativeColor{color:var(--negative-color)}.facetedSearchPanel{background-color:var(--facet-background-color) !important}.facetSearchBubbleItem{background-color:var(--facet-bubble-item-color);border-radius:10px;padding:5px}.buttonBarGroup{margin-top:15px !important;display:flex}.buttonBarGroupCentered{margin-top:10px;margin-bottom:10px;display:flex;justify-content:center}.next-previous-button-bar-wrapper{display:flex;align-items:center;margin-top:20px;margin-bottom:10px}.next-previous-button-bar-wrapper .nextButton-padded{margin-left:20px}.lineHeightNormal{line-height:normal !important}.underlined{-webkit-text-decoration:underline;text-decoration:underline}.italic{font-style:italic}.bold{font-weight:700}.marginLeftAuto{margin-left:auto}.marginLeft1em{margin-left:1em}.marginLeft2em{margin-left:2em}.marginRight05em{margin-right:.5em}.marginRight1em{margin-right:1em}.marginRight2m{margin-right:3em}.marginTopAuto{margin-top:auto}.marginTop1em{margin-top:1em}.marginTop2em{margin-top:2em}.marginTop3em{margin-top:3em}.marginBottom1em{margin-bottom:1em}.marginBottom2em{margin-bottom:2em}.marginBottom3em{margin-bottom:3em}.noBottomPadding{padding-bottom:0 !important}.noTopPadding{padding-top:0 !important}.paddingTop1em{padding-top:1em}.paddingBottom1em{padding-bottom:1em}.padding1em{padding:1em}.padding2em{padding:2em}@media only screen and (max-width: 767px){.ui.stackable.grid>.row>.wide.column.noTopPadding,.ui.stackable.grid>.row>.column.noTopPadding{padding-top:0 !important}}.childParagraphsMargin_0 p{margin:0}.heading-1{font-size:2em;font-weight:600;line-height:1.3}.heading-2{font-size:2em;font-weight:700;line-height:1.5}.heading-3{font-size:1.8em;font-weight:700;line-height:1.5}.heading-4{font-size:1.4em;font-weight:700;line-height:1.3}.normal-Text{font-size:medium;font-weight:normal}.centered-text{text-align:center}.displayNone{display:none}.borderPrimaryLight{border:1px solid var(--primary-light-color)}.borderPrimaryDark{border:1px solid var(--primary-dark-color)}.borderPrimaryNeutral{border:1px solid var(--primary-neutral-color)}.primaryInformationPanel{background-color:var(--primary-neutral-color) !important;box-shadow:none !important}.secondaryInformationPanel{background-color:var(--secondary-neutral-color) !important;box-shadow:none !important}.sectionPanel{padding:0 !important;box-shadow:none !important;border-radius:var(--default-panel-border-radius) !important}.sectionPanel .header-wrapper{border-top-left-radius:var(--default-panel-border-radius) !important;border-top-right-radius:var(--default-panel-border-radius) !important;padding:1em;box-shadow:none !important}.sectionPanel .header-wrapper.light{color:var(--primary-white-color);background-color:var(--primary-light-color) !important}.sectionPanel .header-wrapper.dark{color:var(--primary-white-color);background-color:var(--primary-dark-color) !important}.sectionPanel .header-wrapper.neutral{color:var(--primary-dark-color);background-color:var(--primary-neutral-color) !important}.sectionPanel .header-wrapper.centered{text-align:center}.sectionPanel .header-wrapper.underlined{-webkit-text-decoration:underline;text-decoration:underline}.sectionPanel .inner-wrapper{padding-left:1em;padding-right:1em;padding-bottom:1em}.semi-compact-menu{width:auto !important}.paginationPanel{display:flex;flex-direction:row;justify-content:center;align-items:center}.k-block,.k-content,.k-dropdown .k-input,.k-popup,.k-toolbar,.k-widget{color:var(--primary-dark-color) !important}.main-ckeditor-container{font-family:"Lato";margin-left:auto;margin-right:auto}.ck-content{font-family:"Lato";line-height:1.6;word-break:break-word}.ck .ck-editor__main p{margin:0}.react-datepicker-popper{z-index:100 !important}.react-datepicker__close-icon::after{background-color:var(--primary-light-color) !important}.react-numeric-input input{border-radius:.285rem !important;border:1px solid rgba(34,36,38,.15) !important}.react-numeric-input input:focus{border-color:#2185d0 !important}.isDevelopmentEnvironment{color:red;background-color:var(--primary-neutral-color);font-size:2em;width:100%;text-align:center;padding-bottom:24px}.isDevelopmentEnvironment.marginTop20{padding-top:20px} .mainContentArea{background-color:var(--primary-white-color)}.mainContentArea .preambleHeader{width:70%;color:var(--primary-light-color);max-width:750px;margin:0 auto;font-weight:bold;text-align:center;line-height:1.5em;font-family:var(--primary-font-family);font-size:20px;margin-top:10px;padding:20px}.mainContentArea .preamble{width:70%;color:var(--primary-dark-color);max-width:750px;margin:0 auto;text-align:center;line-height:1.5em;font-family:var(--primary-font-family);font-size:20px;margin-top:10px;padding:20px}.headerContainer .ui.compact.menu{margin-top:5px;margin-bottom:5px}.headerContainer .headerLogo{width:322px;height:30px;margin-left:1em;padding-left:1em}.headerContainer .mobileMenuButton{background-color:var(--primary-white-color)}.heroContainer{position:relative;color:#fff;width:100%;min-width:400px;height:25vh;min-height:300px;max-height:400px;background-color:var(--primary-light-color);display:flex;flex-direction:column;justify-content:center}.heroContainer .heroPrimaryText{color:#fff;line-height:1.2992;font-weight:600;font-size:calc(1.8*.012*min(100vh,900px) + 1rem);text-align:center}.heroContainer .subHeroText{margin-top:1em;font-weight:400;font-size:calc(.8*.012*min(100vh,900px) + 1rem);text-align:center}@media(min-width: 768px){.heroContainer .heroPrimaryText{font-size:min(50px,2.16vw + 1rem);width:80%;text-align:center;margin-left:auto;margin-right:auto}.heroContainer .subHeroText{font-size:min(30px,.96vw + 1rem)}}.panelFlexLayout{display:flex;flex-direction:column}.panelFlexLayout .column{flex:1}.panelFlexLayout .tall{min-height:500px}@media(min-width: 768px){.panelFlexLayout{flex-direction:row}}.panelContainer_A{padding:0;background-color:var(--primary-white-color)}.panelContainer_B{padding:0;background-color:var(--primary-neutral-color)}.helpFooterArea{padding:2em;background-color:var(--primary-light-color) !important;color:var(--primary-white-color)}.helpFooterArea .leadText{font-size:1.2em;margin-bottom:.5em}.helpFooterArea .centered{justify-content:center}.helpFooterArea .icon{margin:.5em auto}.helpFooterArea a{color:#fff !important;-webkit-text-decoration:underline;text-decoration:underline}.helpFooterArea .footingChatIcon{width:80px;margin-right:2em;margin-top:auto;height:80px;margin-bottom:auto}@media(min-width: 768px){.helpFooterArea .icon{margin:auto .5em}}.panel{text-align:center;padding:2em}.panel .bold{font-weight:700}.panel .highlightText{color:var(--primary-light-color)}.panel.extraTopPadding{padding-top:5em}.panel .panelMainText{color:var(--primary-dark-color);font-size:24px;margin:0 auto;width:65%;line-height:1.3em}.panel .panelSubText{color:var(--primary-dark-color);margin:1em auto;width:65%;text-align:center;line-height:1.5em}.panel .helpPanelSubText{max-width:500px !important;margin:0 auto;font-size:16px}.panel .helpButtonContainer{margin-top:1.5em;margin-bottom:1.5em}.panel .ui.primary.button{font-size:16px;font-weight:700;border-radius:2em}.displayBox{width:375px;margin:0 auto}.displayBox .formPanel{margin-top:10px;padding:20px}.displayBox .needHelpMessagePanel{padding-top:20px;border-radius:0}.displayBox .ui.form .field>label{color:var(--primary-light-color) !important;font-size:var(--primary-normal-font-size);font-weight:normal}.displayBox .ui.form .field .ui.input,.displayBox .ui.form .fields .field .ui.input,.displayBox .ui.form .wide.field .ui.input{width:100%;border-color:var(--primary-light-color);border-width:2px}.displayBox .ui.form input:not([type]),.displayBox .ui.form input[type=date],.displayBox .ui.form input[type=datetime-local],.displayBox .ui.form input[type=email],.displayBox .ui.form input[type=file],.displayBox .ui.form input[type=number],.displayBox .ui.form input[type=password],.displayBox .ui.form input[type=search],.displayBox .ui.form input[type=tel],.displayBox .ui.form input[type=text],.displayBox .ui.form input[type=time],.displayBox .ui.form input[type=url]{border-color:var(--primary-light-color);border-width:2px}.commonPageChildrenBlock{padding:1.5em 4em 1.5em 4em;background:#fff} /** * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Reset */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-base-foreground: hsl(0, 0%, 98%); --ck-color-base-background: hsl(0, 0%, 100%); --ck-color-base-border: hsl(220, 6%, 81%); --ck-color-base-action: hsl(104, 50.2%, 42.5%); --ck-color-base-focus: hsl(209, 92%, 70%); --ck-color-base-text: hsl(0, 0%, 20%); --ck-color-base-active: hsl(218.1, 100%, 58%); --ck-color-base-active-focus: hsl(218.2, 100%, 52.5%); --ck-color-base-error: hsl(15, 100%, 43%); /* -- Generic colors ------------------------------------------------------------------------ */ --ck-color-focus-border-coordinates: 218, 81.8%, 56.9%; --ck-color-focus-border: hsl(var(--ck-color-focus-border-coordinates)); --ck-color-focus-outer-shadow: hsl(212.4, 89.3%, 89%); --ck-color-focus-disabled-shadow: hsla(209, 90%, 72%,.3); --ck-color-focus-error-shadow: hsla(9,100%,56%,.3); --ck-color-text: var(--ck-color-base-text); --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15); --ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2); --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1); /* -- Buttons ------------------------------------------------------------------------------- */ --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: hsl(0, 0%, 94.1%); --ck-color-button-default-active-background: hsl(0, 0%, 94.1%); --ck-color-button-default-disabled-background: transparent; --ck-color-button-on-background: hsl(212, 100%, 97.1%); --ck-color-button-on-hover-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-active-background: hsl(211.7, 100%, 92.9%); --ck-color-button-on-disabled-background: hsl(211, 15%, 95%); --ck-color-button-on-color: hsl(218.1, 100%, 58%); --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-active-background: hsl(104, 53.2%, 40.2%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); --ck-color-button-action-text: var(--ck-color-base-background); --ck-color-button-save: hsl(120, 100%, 27%); --ck-color-button-cancel: hsl(15, 100%, 43%); --ck-color-switch-button-off-background: hsl(0, 0%, 57.6%); --ck-color-switch-button-off-hover-background: hsl(0, 0%, 49%); --ck-color-switch-button-on-background: var(--ck-color-button-action-background); --ck-color-switch-button-on-hover-background: hsl(104, 53.2%, 40.2%); --ck-color-switch-button-inner-background: var(--ck-color-base-background); --ck-color-switch-button-inner-shadow: hsla(0, 0%, 0%, 0.1); /* -- Dropdown ------------------------------------------------------------------------------ */ --ck-color-dropdown-panel-background: var(--ck-color-base-background); --ck-color-dropdown-panel-border: var(--ck-color-base-border); /* -- Dialog -------------------------------------------------------------------------------- */ --ck-color-dialog-background: var(--ck-custom-background); --ck-color-dialog-form-header-border: var(--ck-custom-border); /* -- Input --------------------------------------------------------------------------------- */ --ck-color-input-background: var(--ck-color-base-background); --ck-color-input-border: var(--ck-color-base-border); --ck-color-input-error-border: var(--ck-color-base-error); --ck-color-input-text: var(--ck-color-base-text); --ck-color-input-disabled-background: hsl(0, 0%, 95%); --ck-color-input-disabled-border: var(--ck-color-base-border); --ck-color-input-disabled-text: hsl(0, 0%, 46%); /* -- List ---------------------------------------------------------------------------------- */ --ck-color-list-background: var(--ck-color-base-background); --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background); --ck-color-list-button-on-background: var(--ck-color-button-on-color); --ck-color-list-button-on-background-focus: var(--ck-color-button-on-color); --ck-color-list-button-on-text: var(--ck-color-base-background); /* -- Panel --------------------------------------------------------------------------------- */ --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); /* -- Toolbar ------------------------------------------------------------------------------- */ --ck-color-toolbar-background: var(--ck-color-base-background); --ck-color-toolbar-border: var(--ck-color-base-border); /* -- Tooltip ------------------------------------------------------------------------------- */ --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); /* -- Engine -------------------------------------------------------------------------------- */ --ck-color-engine-placeholder-text: hsl(0, 0%, 44%); /* -- Upload -------------------------------------------------------------------------------- */ --ck-color-upload-bar-background: hsl(209, 92%, 70%); /* -- Link -------------------------------------------------------------------------------- */ --ck-color-link-default: hsl(240, 100%, 47%); --ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1); --ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3); /* -- Search result highlight ---------------------------------------------------------------- */ --ck-color-highlight-background: hsl(60, 100%, 50%); /* -- Generic colors ------------------------------------------------------------------------- */ --ck-color-light-red: hsl(0, 100%, 90%); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * An opacity value of disabled UI item. */ --ck-disabled-opacity: .5; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * The geometry of the of focused element's outer shadow. */ --ck-focus-outer-shadow-geometry: 0 0 0 3px; /** * A visual style of focused element's outer shadow. */ --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow); /** * A visual style of focused element's outer shadow (when disabled). */ --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow); /** * A visual style of focused element's outer shadow (when has errors). */ --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow); /** * A visual style of focused element's border or outline. */ --ck-focus-ring: 1px solid var(--ck-color-focus-border); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-font-size-base: 13px; --ck-line-height-base: 1.84615; --ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; --ck-font-size-tiny: 0.7em; --ck-font-size-small: 0.75em; --ck-font-size-normal: 1em; --ck-font-size-big: 1.4em; --ck-font-size-large: 1.8em; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* This is super-important. This is **manually** adjusted so a button without an icon is never smaller than a button with icon, additionally making sure that text-less buttons are perfect squares. The value is also shared by other components which should stay "in-line" with buttons. */ --ck-ui-component-min-height: 2.3em; } /** * Resets an element, ignoring its children. */ .ck.ck-reset, .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { box-sizing: border-box; width: auto; height: auto; position: static; /* Do not include inheritable rules here. */ margin: 0; padding: 0; border: 0; background: transparent; -webkit-text-decoration: none; text-decoration: none; vertical-align: middle; transition: none; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */ word-wrap: break-word; } /** * Resets an element AND its children. */ .ck.ck-reset_all, .ck-reset_all *:not(.ck-reset_all-excluded *) { /* These are rule inherited by all children elements. */ border-collapse: collapse; font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face); color: var(--ck-color-text); text-align: left; white-space: nowrap; cursor: auto; float: none; } .ck-reset_all .ck-rtl *:not(.ck-reset_all-excluded *) { text-align: right; } .ck-reset_all iframe:not(.ck-reset_all-excluded *) { /* For IE */ vertical-align: inherit; } .ck-reset_all textarea:not(.ck-reset_all-excluded *) { white-space: pre-wrap; } .ck-reset_all textarea:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"]:not(.ck-reset_all-excluded *) { cursor: text; } .ck-reset_all textarea[disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="text"][disabled]:not(.ck-reset_all-excluded *), .ck-reset_all input[type="password"][disabled]:not(.ck-reset_all-excluded *) { cursor: default; } .ck-reset_all fieldset:not(.ck-reset_all-excluded *) { padding: 10px; border: 2px groove hsl(255, 7%, 88%); } .ck-reset_all button:not(.ck-reset_all-excluded *)::-moz-focus-inner { /* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */ padding: 0; border: 0 } /** * Default UI rules for RTL languages. */ .ck[dir="rtl"], .ck[dir="rtl"] .ck { text-align: right; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Default border-radius value. */ :root{ --ck-border-radius: 2px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /** * A visual style of element's inner shadow (i.e. input). */ --ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset; /** * A visual style of element's drop shadow (i.e. panel). */ --ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop); /** * A visual style of element's active shadow (i.e. comment or suggestion). */ --ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-spacing-unit: 0.6em; --ck-spacing-large: calc(var(--ck-spacing-unit) * 1.5); --ck-spacing-standard: var(--ck-spacing-unit); --ck-spacing-medium: calc(var(--ck-spacing-unit) * 0.8); --ck-spacing-small: calc(var(--ck-spacing-unit) * 0.5); --ck-spacing-tiny: calc(var(--ck-spacing-unit) * 0.3); --ck-spacing-extra-tiny: calc(var(--ck-spacing-unit) * 0.16); } /* Components */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ .ck.ck-autocomplete > .ck-search__results { border-radius: 0; } .ck-rounded-corners .ck.ck-autocomplete > .ck-search__results, .ck.ck-autocomplete > .ck-search__results.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-autocomplete > .ck-search__results { box-shadow: var(--ck-drop-shadow), 0 0; max-height: 200px; overflow-y: auto; background: var(--ck-color-base-background); border: 1px solid var(--ck-color-dropdown-panel-border); min-width: auto; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_n { border-bottom-left-radius: 0; border-bottom-right-radius: 0; /* Prevent duplicated borders between the input and the results pane. */ margin-bottom: -1px; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_s { border-top-left-radius: 0; border-top-right-radius: 0; /* Prevent duplicated borders between the input and the results pane. */ margin-top: -1px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button, a.ck.ck-button { background: var(--ck-color-button-default-background); border-radius: 0; white-space: nowrap; cursor: default; vertical-align: middle; padding: var(--ck-spacing-tiny); text-align: center; /* A very important piece of styling. Go to variable declaration to learn more. */ min-width: var(--ck-ui-component-min-height); min-height: var(--ck-ui-component-min-height); /* Normalize the height of the line. Removing this will break consistent height among text and text-less buttons (with icons). */ line-height: 1; /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; /* Avoid flickering when the foucs border shows up. */ border: 1px solid transparent; /* Apply some smooth transition to the box-shadow and border. */ transition: box-shadow .2s ease-in-out, border .2s ease-in-out; /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */ -webkit-appearance: none; } .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover { background: var(--ck-color-button-default-hover-background); } .ck.ck-button:not(.ck-disabled):active, a.ck.ck-button:not(.ck-disabled):active { background: var(--ck-color-button-default-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck.ck-button.ck-disabled, a.ck.ck-button.ck-disabled { background: var(--ck-color-button-default-disabled-background); } .ck-rounded-corners .ck.ck-button, .ck-rounded-corners a.ck.ck-button, .ck.ck-button.ck-rounded-corners, a.ck.ck-button.ck-rounded-corners { border-radius: var(--ck-border-radius); } @media (prefers-reduced-motion: reduce) { .ck.ck-button, a.ck.ck-button { transition: none; } } .ck.ck-button:active, a.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } /* Allow icon coloring using the text "color" property. */ .ck.ck-button .ck-button__icon use, a.ck.ck-button .ck-button__icon use, .ck.ck-button .ck-button__icon use *, a.ck.ck-button .ck-button__icon use * { color: inherit; } .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; font-weight: inherit; color: inherit; cursor: inherit; /* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and without labels (but with icons) have different sizes in Chrome */ vertical-align: middle; } [dir="ltr"] .ck.ck-button .ck-button__label, [dir="ltr"] a.ck.ck-button .ck-button__label { text-align: left; } [dir="rtl"] .ck.ck-button .ck-button__label, [dir="rtl"] a.ck.ck-button .ck-button__label { text-align: right; } .ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke { color: inherit; } [dir="ltr"] .ck.ck-button .ck-button__keystroke, [dir="ltr"] a.ck.ck-button .ck-button__keystroke { margin-left: var(--ck-spacing-large); } [dir="rtl"] .ck.ck-button .ck-button__keystroke, [dir="rtl"] a.ck.ck-button .ck-button__keystroke { margin-right: var(--ck-spacing-large); } .ck.ck-button .ck-button__keystroke, a.ck.ck-button .ck-button__keystroke { opacity: .5; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ .ck.ck-button.ck-disabled:active, a.ck.ck-button.ck-disabled:active, .ck.ck-button.ck-disabled:focus, a.ck.ck-button.ck-disabled:focus { /* The disabled button should have a slightly less visible shadow when focused. */ box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0; } .ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__icon { opacity: var(--ck-disabled-opacity); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__label { opacity: var(--ck-disabled-opacity); } .ck.ck-button.ck-disabled .ck-button__keystroke, a.ck.ck-button.ck-disabled .ck-button__keystroke { opacity: .3; } .ck.ck-button.ck-button_with-text, a.ck.ck-button.ck-button_with-text { padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); /* stylelint-disable-next-line no-descending-specificity */ } [dir="ltr"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="ltr"] a.ck.ck-button.ck-button_with-text .ck-button__icon { margin-right: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-button.ck-button_with-text .ck-button__icon, [dir="rtl"] a.ck.ck-button.ck-button_with-text .ck-button__icon { margin-left: var(--ck-spacing-medium); } /* stylelint-disable-next-line no-descending-specificity */ .ck.ck-button.ck-button_with-keystroke .ck-button__label, a.ck.ck-button.ck-button_with-keystroke .ck-button__label { flex-grow: 1; } /* A style of the button which is currently on, e.g. its feature is active. */ .ck.ck-button.ck-on, a.ck.ck-button.ck-on { background: var(--ck-color-button-on-background); color: var(--ck-color-button-on-color); } .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover { background: var(--ck-color-button-on-hover-background); } .ck.ck-button.ck-on:not(.ck-disabled):active, a.ck.ck-button.ck-on:not(.ck-disabled):active { background: var(--ck-color-button-on-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck.ck-button.ck-on.ck-disabled, a.ck.ck-button.ck-on.ck-disabled { background: var(--ck-color-button-on-disabled-background); } .ck.ck-button.ck-button-save, a.ck.ck-button.ck-button-save { color: var(--ck-color-button-save); } .ck.ck-button.ck-button-cancel, a.ck.ck-button.ck-button-cancel { color: var(--ck-color-button-cancel); } /* A style of the button which handles the primary action. */ .ck.ck-button-action, a.ck.ck-button-action { background: var(--ck-color-button-action-background); color: var(--ck-color-button-action-text); } .ck.ck-button-action:not(.ck-disabled):hover, a.ck.ck-button-action:not(.ck-disabled):hover { background: var(--ck-color-button-action-hover-background); } .ck.ck-button-action:not(.ck-disabled):active, a.ck.ck-button-action:not(.ck-disabled):active { background: var(--ck-color-button-action-active-background); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ .ck.ck-button-action.ck-disabled, a.ck.ck-button-action.ck-disabled { background: var(--ck-color-button-action-disabled-background); } .ck.ck-button-bold, a.ck.ck-button-bold { font-weight: bold; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature of the component, floating–point numbers have been used which, for the default font size (see: --ck-font-size-base), will generate simple integers. */ :root { /* 34px at 13px font-size */ --ck-switch-button-toggle-width: 2.6153846154em; /* 14px at 13px font-size */ --ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px); --ck-switch-button-translation: calc( var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px /* Border */ ); --ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow); } /* Unlike a regular button, the switch button text color and background should never change. * Changing toggle switch (background, outline) is enough to carry the information about the * state of the entire component (https://github.com/ckeditor/ckeditor5/issues/12519) */ .ck.ck-button.ck-switchbutton, .ck.ck-button.ck-switchbutton:hover, .ck.ck-button.ck-switchbutton:focus, .ck.ck-button.ck-switchbutton:active, .ck.ck-button.ck-switchbutton.ck-on:hover, .ck.ck-button.ck-switchbutton.ck-on:focus, .ck.ck-button.ck-switchbutton.ck-on:active { color: inherit; background: transparent; } [dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__label { /* Separate the label from the switch */ margin-right: calc(2 * var(--ck-spacing-large)); } [dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__label { /* Separate the label from the switch */ margin-left: calc(2 * var(--ck-spacing-large)); } .ck.ck-button.ck-switchbutton .ck-button__toggle { border-radius: 0; } .ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle, .ck.ck-button.ck-switchbutton .ck-button__toggle.ck-rounded-corners { border-radius: var(--ck-border-radius); } [dir="ltr"] .ck.ck-button.ck-switchbutton .ck-button__toggle { /* Make sure the toggle is always to the right as far as possible. */ margin-left: auto; } [dir="rtl"] .ck.ck-button.ck-switchbutton .ck-button__toggle { /* Make sure the toggle is always to the left as far as possible. */ margin-right: auto; } .ck.ck-button.ck-switchbutton .ck-button__toggle { /* Apply some smooth transition to the box-shadow and border. */ /* Gently animate the background color of the toggle switch */ transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out; border: 1px solid transparent; width: var(--ck-switch-button-toggle-width); background: var(--ck-color-switch-button-off-background); } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { border-radius: 0; } .ck-rounded-corners .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner, .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner.ck-rounded-corners { border-radius: var(--ck-border-radius); border-radius: calc(.5 * var(--ck-border-radius)); } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { width: var(--ck-switch-button-toggle-inner-size); height: var(--ck-switch-button-toggle-inner-size); background: var(--ck-color-switch-button-inner-background); /* Gently animate the inner part of the toggle switch */ transition: all 300ms ease; } @media (prefers-reduced-motion: reduce) { .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { transition: none; } } .ck.ck-button.ck-switchbutton .ck-button__toggle:hover { background: var(--ck-color-switch-button-off-hover-background); } .ck.ck-button.ck-switchbutton .ck-button__toggle:hover .ck-button__toggle__inner { box-shadow: var(--ck-switch-button-inner-hover-shadow); } .ck.ck-button.ck-switchbutton.ck-disabled .ck-button__toggle { opacity: var(--ck-disabled-opacity); } /* Overriding default .ck-button:focus styles + an outline around the toogle */ .ck.ck-button.ck-switchbutton:focus { border-color: transparent; outline: none; box-shadow: none; } .ck.ck-button.ck-switchbutton:focus .ck-button__toggle { box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow); outline-offset: 1px; outline: var(--ck-focus-ring); } /* stylelint-disable-next-line no-descending-specificity */ .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle { background: var(--ck-color-switch-button-on-background); } .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle:hover { background: var(--ck-color-switch-button-on-hover-background); } /* * Move the toggle switch to the right. It will be animated. */ [dir="ltr"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner { transform: translateX( var( --ck-switch-button-translation ) ); } [dir="rtl"] .ck.ck-button.ck-switchbutton.ck-on .ck-button__toggle .ck-button__toggle__inner { transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) ); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button.ck-list-item-button { padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); } .ck.ck-button.ck-list-item-button, .ck.ck-button.ck-list-item-button.ck-on { background: var(--ck-color-list-background); color: var(--ck-color-text); } [dir="ltr"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-button.ck-list-item-button:has(.ck-list-item-button__check-holder) { padding-right: var(--ck-spacing-small); } /* * `.ck-on` class and background styling is overridden for `ck-button` in many places. * This is a workaround to make sure that the background is not overridden and uses similar * selector specificity as the other overrides. */ .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover, .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable), .ck.ck-button.ck-list-item-button.ck-on:hover { background: var(--ck-color-list-button-hover-background); } .ck.ck-button.ck-list-item-button:hover:not(.ck-disabled):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-button.ck-on:hover:not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:not(.ck-list-item-button_toggleable):not(.ck-disabled), .ck.ck-button.ck-list-item-button.ck-on:hover:not(.ck-disabled) { color: var(--ck-color-text); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size)); } .ck.ck-collapsible > .ck.ck-button { width: 100%; font-weight: bold; border-radius: 0; color: inherit; } .ck.ck-collapsible > .ck.ck-button:focus { background: transparent; } .ck.ck-collapsible > .ck.ck-button:active, .ck.ck-collapsible > .ck.ck-button:not(:focus), .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) { background: transparent; border-color: transparent; box-shadow: none; } .ck.ck-collapsible > .ck.ck-button > .ck-icon { margin-right: var(--ck-spacing-medium); width: var(--ck-collapsible-arrow-size); } .ck.ck-collapsible > .ck-collapsible__children { padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large); } .ck.ck-collapsible.ck-collapsible_collapsed > .ck.ck-button .ck-icon { transform: rotate(-90deg); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-grid-tile-size: 24px; /* Not using global colors here because these may change but some colors in a pallette * require special treatment. For instance, this ensures no matter what the UI text color is, * the check icon will look good on the black color tile. */ --ck-color-color-grid-check-icon: hsl(212, 81%, 46%); } .ck.ck-color-grid { grid-gap: 5px; padding: 8px; } .ck.ck-color-grid__tile { transition: .2s ease box-shadow; } @media (forced-colors: none) { .ck.ck-color-grid__tile { width: var(--ck-color-grid-tile-size); height: var(--ck-color-grid-tile-size); min-width: var(--ck-color-grid-tile-size); min-height: var(--ck-color-grid-tile-size); padding: 0; border: 0; } .ck.ck-color-grid__tile.ck-on, .ck.ck-color-grid__tile:focus:not( .ck-disabled ), .ck.ck-color-grid__tile:hover:not( .ck-disabled ) { /* Disable the default .ck-button's border ring. */ border: 0; } .ck.ck-color-grid__tile.ck-color-selector__color-tile_bordered { box-shadow: 0 0 0 1px var(--ck-color-base-border); } .ck.ck-color-grid__tile.ck-on { box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text); } .ck.ck-color-grid__tile:focus:not( .ck-disabled ), .ck.ck-color-grid__tile:hover:not( .ck-disabled ) { box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border); } } /* * In high contrast mode, the colors are replaced with text labels. * See https://github.com/ckeditor/ckeditor5/issues/14907. */ @media (forced-colors: active) { .ck.ck-color-grid__tile { width: unset; height: unset; min-width: unset; min-height: unset; padding: 0 var(--ck-spacing-small); } .ck.ck-color-grid__tile .ck-button__label { display: inline-block; } } @media (prefers-reduced-motion: reduce) { .ck.ck-color-grid__tile { transition: none; } } .ck.ck-color-grid__tile.ck-disabled { cursor: unset; transition: unset; } .ck.ck-color-grid__tile .ck.ck-icon { display: none; color: var(--ck-color-color-grid-check-icon); } .ck.ck-color-grid__tile.ck-on .ck.ck-icon { display: block; } .ck.ck-color-grid__label { padding: 0 var(--ck-spacing-standard); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* View fragment with color grids. */ .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { width: 100%; } .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker:not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon { margin-right: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker .ck.ck-icon { margin-left: var(--ck-spacing-standard); } .ck.ck-color-selector .ck-color-grids-fragment label.ck.ck-color-grid__label { font-weight: unset; } /* View fragment with a color picker. */ .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker { padding: 8px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker { height: 100px; min-width: 180px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation) { border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue) { border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(saturation-pointer), .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-picker .hex-color-picker::part(hue-pointer) { width: 15px; height: 15px; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar { padding: 0 8px 8px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 ); --ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%); --ck-dialog-max-width: 100vw; --ck-dialog-max-height: 90vh; --ck-color-dialog-background: var(--ck-color-base-background); --ck-color-dialog-form-header-border: var(--ck-color-base-border); } .ck.ck-dialog-overlay { animation: ck-dialog-fade-in .3s; background: var(--ck-dialog-overlay-background-color); z-index: var(--ck-z-dialog); } .ck.ck-dialog { border-radius: 0; } .ck-rounded-corners .ck.ck-dialog, .ck.ck-dialog.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-dialog { box-shadow: var(--ck-drop-shadow), 0 0; --ck-drop-shadow: var(--ck-dialog-drop-shadow); background: var(--ck-color-dialog-background); max-height: var(--ck-dialog-max-height); max-width: var(--ck-dialog-max-width); border: 1px solid var(--ck-color-base-border); } .ck.ck-dialog .ck.ck-form__header { border-bottom: 1px solid var(--ck-color-dialog-form-header-border); } @keyframes ck-dialog-fade-in { 0% { background: hsla( 0, 0%, 0%, 0 ); } 100% { background: var(--ck-dialog-overlay-background-color); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dialog .ck.ck-dialog__actions { padding: var(--ck-spacing-large); } .ck.ck-dialog .ck.ck-dialog__actions > * + * { margin-left: var(--ck-spacing-large); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size)); } .ck.ck-dropdown { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; } .ck.ck-dropdown .ck-dropdown__arrow { width: var(--ck-dropdown-arrow-size); } [dir="ltr"] .ck.ck-dropdown .ck-dropdown__arrow { right: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-dropdown .ck-dropdown__arrow { left: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-right: var(--ck-spacing-small); } .ck.ck-dropdown.ck-disabled .ck-dropdown__arrow { opacity: var(--ck-disabled-opacity); } [dir="ltr"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) { /* Make sure dropdowns with just an icon have the right inner spacing */ padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) { /* Make sure dropdowns with just an icon have the right inner spacing */ padding-right: var(--ck-spacing-small); } /* #23 */ .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label { width: 7em; overflow: hidden; text-overflow: ellipsis; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-disabled .ck-button__label { opacity: var(--ck-disabled-opacity); } /* https://github.com/ckeditor/ckeditor5/issues/816 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-dropdown__button_label-width_auto .ck-button__label { width: auto; } /* https://github.com/ckeditor/ckeditor5/issues/8699 */ .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active { box-shadow: none; } .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus { box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-dropdown__panel { border-radius: 0; } .ck-rounded-corners .ck.ck-dropdown__panel, .ck.ck-dropdown__panel.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-dropdown__panel { box-shadow: var(--ck-drop-shadow), 0 0; background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; /* Make sure the panel is at least as wide as the drop-down's button. */ min-width: 100%; /* Disabled corner border radius to be consistent with the .dropdown__button https://github.com/ckeditor/ckeditor5/issues/816 */ } .ck.ck-dropdown__panel.ck-dropdown__panel_se { border-top-left-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_sw { border-top-right-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_ne { border-bottom-left-radius: 0; } .ck.ck-dropdown__panel.ck-dropdown__panel_nw { border-bottom-right-radius: 0; } .ck.ck-dropdown__panel:focus { outline: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-dropdown > .ck-dropdown__panel > .ck-list { /* Disabled radius of top-left border to be consistent with .dropdown__button https://github.com/ckeditor/ckeditor5/issues/816 */ border-radius: 0; } .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list, .ck.ck-dropdown > .ck-dropdown__panel > .ck-list.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; } /* Make sure the button belonging to the first/last child of the list goes well with the border radius of the entire panel. */ .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button { border-radius: 0; } .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button, .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:first-child > .ck-button.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button { border-radius: 0; } .ck-rounded-corners .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button, .ck.ck-dropdown > .ck-dropdown__panel > .ck-list .ck-list__item:last-child > .ck-button.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-color-split-button-hover-background: hsl(0, 0%, 92%); --ck-color-split-button-hover-border: hsl(0, 0%, 70%); } /* * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest). */ [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action { /* Don't round the action button on the right side */ border-top-right-radius: unset; border-bottom-right-radius: unset; } [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__action, [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action { /* Don't round the action button on the left side */ border-top-left-radius: unset; border-bottom-left-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow { /* It's a text-less button and since the icon is positioned absolutely in such situation, it must get some arbitrary min-width. */ min-width: unset; } [dir="ltr"] .ck.ck-splitbutton > .ck-splitbutton__arrow { /* Don't round the arrow button on the left side */ border-top-left-radius: unset; border-bottom-left-radius: unset; } [dir="rtl"] .ck.ck-splitbutton > .ck-splitbutton__arrow { /* Don't round the arrow button on the right side */ border-top-right-radius: unset; border-bottom-right-radius: unset; } .ck.ck-splitbutton > .ck-splitbutton__arrow svg { width: var(--ck-dropdown-arrow-size); } /* Make sure the divider stretches 100% height of the button https://github.com/ckeditor/ckeditor5/issues/10936 */ .ck.ck-splitbutton > .ck-splitbutton__arrow:not(:focus) { border-top-width: 0px; border-bottom-width: 0px; } /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling as a whole. The background of both buttons should stand out and there should be a visual separation between both buttons. */ /* When the split button hovered as a whole, not as individual buttons. */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) { background: var(--ck-color-split-button-hover-background); } /* Splitbutton separator needs to be set with the ::after pseudoselector to display properly the borders on focus */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { content: ''; position: absolute; width: 1px; height: 100%; background-color: var(--ck-color-split-button-hover-border); } /* Make sure the divider between the buttons looks fine when the button is focused */ .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:focus::after, .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:focus::after { --ck-color-split-button-hover-border: var(--ck-color-focus-border); } [dir="ltr"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="ltr"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { left: -1px; } [dir="rtl"] .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, [dir="rtl"] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after { right: -1px; } /* Don't round the bottom left and right corners of the buttons when "open" https://github.com/ckeditor/ckeditor5/issues/816 */ .ck.ck-splitbutton.ck-splitbutton_open { border-radius: 0; } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__action, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__action { border-bottom-left-radius: 0; } .ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow { border-bottom-right-radius: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-toolbar-dropdown .ck-toolbar { border: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * All menu buttons. */ .ck.ck-button.ck-dropdown-menu-list__nested-menu__button { width: 100%; padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); border-radius: 0; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus { border-color: transparent; box-shadow: none; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:focus:not(.ck-on) { background: var(--ck-color-button-default-hover-background); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-button__label { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-button__label { opacity: var(--ck-disabled-opacity); } /* Spacing in buttons that miss the icon. */ .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-icon-spacing:not(:has(.ck-button__icon)) > .ck-button__label { margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small)); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { width: var(--ck-dropdown-arrow-size); } [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { transform: rotate(-90deg); /* Nudge the arrow gently to the right because its center of gravity is to the left */ margin-right: calc(-1 * var(--ck-spacing-small)); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { transform: rotate(90deg); /* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */ margin-left: calc(-1 * var(--ck-spacing-small)); } .ck.ck-button.ck-dropdown-menu-list__nested-menu__button.ck-disabled > .ck-dropdown-menu-list__nested-menu__button__arrow { opacity: var(--ck-disabled-opacity); } [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) { padding-left: var(--ck-spacing-small); } [dir="ltr"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { right: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button:not(.ck-button_with-text) { padding-right: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-button.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { left: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-right: var(--ck-spacing-small); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dropdown-menu-menu-item-min-width: 18em; } .ck.ck-dropdown-menu-list__nested-menu__item { min-width: var(--ck-dropdown-menu-menu-item-min-width); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * List item buttons. */ .ck-button.ck-dropdown-menu-list__nested-menu__item__button { border-radius: 0; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container, .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container .ck-spinner { /* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */ --ck-toolbar-spinner-size: 20px; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button > .ck-spinner-container { /* These margins are the same as for .ck-icon. */ margin-left: calc(-1 * var(--ck-spacing-small)); margin-right: var(--ck-spacing-small); } /* * Hovered items automatically get focused. Default focus styles look odd * while moving across a huge list of items so let's get rid of them */ .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus { border-color: transparent; box-shadow: none; } .ck-button.ck-dropdown-menu-list__nested-menu__item__button:focus:not(.ck-on) { background: var(--ck-color-button-default-hover-background); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-dropdown-menu-menu-panel-max-width: 75vw; } .ck.ck-dropdown-menu__nested-menu__panel { box-shadow: var(--ck-drop-shadow), 0 0; background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; height: fit-content; max-width: var(--ck-dropdown-menu-menu-panel-max-width); /* Reset balloon styling */ } .ck.ck-dropdown-menu__nested-menu__panel::after, .ck.ck-dropdown-menu__nested-menu__panel::before { display: none; } /* Corner border radius consistent with the button. */ .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_es, .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_se { border-top-left-radius: 0; } .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ws, .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_sw { border-top-right-radius: 0; } .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_en, .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_ne { border-bottom-left-radius: 0; } .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_wn, .ck.ck-dropdown-menu__nested-menu__panel.ck-balloon-panel_nw { border-bottom-right-radius: 0; } .ck.ck-dropdown-menu__nested-menu__panel:focus { outline: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-accessibility-help-dialog-max-width: 600px; --ck-accessibility-help-dialog-max-height: 400px; --ck-accessibility-help-dialog-border-color: hsl(220, 6%, 81%); --ck-accessibility-help-dialog-code-background-color: hsl(0deg 0% 92.94%); --ck-accessibility-help-dialog-kbd-shadow-color: hsl(0deg 0% 61%); } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content { padding: var(--ck-spacing-large); max-width: var(--ck-accessibility-help-dialog-max-width); max-height: var(--ck-accessibility-help-dialog-max-height); overflow: auto; -webkit-user-select: text; user-select: text; border: 1px solid transparent; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content:focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content * { white-space: normal; } /* Hide the main label of the content container. */ .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content .ck-label { display: none; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3 { font-weight: bold; font-size: 1.2em; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4 { font-weight: bold; font-size: 1em; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content p, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h3, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content h4, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content table { margin: 1em 0; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl { display: grid; grid-template-columns: 2fr 1fr; border-top: 1px solid var(--ck-accessibility-help-dialog-border-color); border-bottom: none; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd { border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color); padding: .4em 0; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dt { grid-column-start: 1; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content dl dd { grid-column-start: 2; text-align: right; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd, .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code { display: inline-block; background: var(--ck-accessibility-help-dialog-code-background-color); padding: .4em; vertical-align: middle; line-height: 1; border-radius: 2px; text-align: center; font-size: .9em; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content code { font-family: monospace; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd { min-width: 1.8em; box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color); margin: 0 1px; } .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content kbd + kbd { margin-left: 2px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ :root { --ck-color-editable-blur-selection: hsl(0, 0%, 85%); } .ck.ck-editor__editable:not(.ck-editor__nested-editable) { border-radius: 0; } .ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable), .ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) { border-radius: var(--ck-border-radius); } .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-inner-shadow), 0 0; } .ck.ck-editor__editable_inline { overflow: auto; padding: 0 var(--ck-spacing-standard); border: 1px solid transparent; } .ck.ck-editor__editable_inline[dir="ltr"] { text-align: left; } .ck.ck-editor__editable_inline[dir="rtl"] { text-align: right; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */ .ck.ck-editor__editable_inline > *:first-child { margin-top: var(--ck-spacing-large); } /* https://github.com/ckeditor/ckeditor5/issues/847 */ .ck.ck-editor__editable_inline > *:last-child { /* * This value should match with the default margins of the block elements (like .media or .image) * to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin-bottom: var(--ck-spacing-large); } /* https://github.com/ckeditor/ckeditor5/issues/6517 */ .ck.ck-editor__editable_inline.ck-blurred ::selection { background: var(--ck-color-editable-blur-selection); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"]::after { border-bottom-color: var(--ck-color-panel-background); } .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"]::after { border-top-color: var(--ck-color-panel-background); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-form-header-height: 44px; } .ck.ck-form__header { padding: var(--ck-spacing-small) var(--ck-spacing-large); height: var(--ck-form-header-height); line-height: var(--ck-form-header-height); border-bottom: 1px solid var(--ck-color-base-border); } [dir="ltr"] .ck.ck-form__header > .ck-icon { margin-right: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-form__header > .ck-icon { margin-left: var(--ck-spacing-medium); } .ck.ck-form__header .ck-form__header__label { --ck-font-size-base: 15px; font-weight: bold; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal)); --ck-icon-font-size: .8333350694em; } .ck.ck-icon { width: var(--ck-icon-size); height: var(--ck-icon-size); /* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */ font-size: var(--ck-icon-font-size); /* Inherit cursor style (#5). */ cursor: inherit; /* This will prevent blurry icons on Firefox. See #340. */ will-change: transform; } .ck.ck-icon * { /* Inherit cursor style (#5). */ cursor: inherit; } /* Allows dynamic coloring of an icon by inheriting its color from the parent. */ .ck.ck-icon.ck-icon_inherit-color { color: inherit; } .ck.ck-icon.ck-icon_inherit-color * { color: inherit; } .ck.ck-icon.ck-icon_inherit-color *:not([fill]) { /* Needed by FF. */ fill: currentColor; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-input-width: 18em; /* Backward compatibility. */ --ck-input-text-width: var(--ck-input-width); } .ck.ck-input { border-radius: 0; } .ck-rounded-corners .ck.ck-input, .ck.ck-input.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-input { background: var(--ck-color-input-background); border: 1px solid var(--ck-color-input-border); padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium); min-width: var(--ck-input-width); /* This is important to stay of the same height as surrounding buttons */ min-height: var(--ck-ui-component-min-height); /* Apply some smooth transition to the box-shadow and border. */ transition: box-shadow .1s ease-in-out, border .1s ease-in-out; } @media (prefers-reduced-motion: reduce) { .ck.ck-input { transition: none; } } .ck.ck-input:focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } .ck.ck-input[readonly] { border: 1px solid var(--ck-color-input-disabled-border); background: var(--ck-color-input-disabled-background); color: var(--ck-color-input-disabled-text); } .ck.ck-input[readonly]:focus { /* The read-only input should have a slightly less visible shadow when focused. */ box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0; } .ck.ck-input.ck-error { border-color: var(--ck-color-input-error-border); animation: ck-input-shake .3s ease both; } @media (prefers-reduced-motion: reduce) { .ck.ck-input.ck-error { animation: none; } } .ck.ck-input.ck-error:focus { box-shadow: var(--ck-focus-error-outer-shadow), 0 0; } @keyframes ck-input-shake { 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { font-weight: bold; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95); --ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium); --ck-labeled-field-label-default-position-x: var(--ck-spacing-medium); --ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base)); --ck-color-labeled-field-label-background: var(--ck-color-base-background); } .ck.ck-labeled-field-view { border-radius: 0; } .ck-rounded-corners .ck.ck-labeled-field-view, .ck.ck-labeled-field-view.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper { width: 100%; } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { top: 0px; } [dir="ltr"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { left: 0px; transform-origin: 0 0; /* By default, display the label scaled down above the field. */ transform: translate(var(--ck-spacing-medium), -6px) scale(.75); } [dir="rtl"] .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { right: 0px; transform-origin: 100% 0; transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75); } .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { pointer-events: none; background: var(--ck-color-labeled-field-label-background); padding: 0 calc(.5 * var(--ck-font-size-tiny)); line-height: initial; font-weight: normal; /* Prevent overflow when the label is longer than the input */ text-overflow: ellipsis; overflow: hidden; max-width: 100%; transition: transform var(--ck-labeled-field-view-transition), padding var(--ck-labeled-field-view-transition), background var(--ck-labeled-field-view-transition); } @media (prefers-reduced-motion: reduce) { .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { transition: none; } } .ck.ck-labeled-field-view.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { color: var(--ck-color-base-error); } .ck.ck-labeled-field-view.ck-error .ck-input:not([readonly]) + .ck.ck-label { color: var(--ck-color-base-error); } .ck.ck-labeled-field-view .ck-labeled-field-view__status { font-size: var(--ck-font-size-small); margin-top: var(--ck-spacing-small); /* Let the info wrap to the next line to avoid stretching the layout horizontally. The status could be very long. */ white-space: normal; } .ck.ck-labeled-field-view .ck-labeled-field-view__status.ck-labeled-field-view__status_error { color: var(--ck-color-base-error); } /* Disabled fields and fields that have no focus should fade out. */ .ck.ck-labeled-field-view.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { color: var(--ck-color-input-disabled-text); } /* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */ /* stylelint-disable-next-line no-descending-specificity */ [dir="ltr"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="ltr"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1); } [dir="rtl"] .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, [dir="rtl"] .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1); } .ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label { /* Compensate for the default translate position. */ max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width)); background: transparent; padding: 0; } /*------ DropdownView integration ----------------------------------------------------------------------------------- */ /* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */ .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button { background: transparent; } /* When the dropdown is "empty", the labeled field label replaces its label. */ .ck.ck-labeled-field-view.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label { opacity: 0; } /* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */ .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label { max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard)); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-labeled-input .ck-labeled-input__status { font-size: var(--ck-font-size-small); margin-top: var(--ck-spacing-small); /* Let the info wrap to the next line to avoid stretching the layout horizontally. The status could be very long. */ white-space: normal; } .ck.ck-labeled-input .ck-labeled-input__status_error { color: var(--ck-color-base-error); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-list { border-radius: 0; } .ck-rounded-corners .ck.ck-list, .ck.ck-list.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-list { list-style-type: none; background: var(--ck-color-list-background); /* A spacing at the beginning and end of the list */ padding: var(--ck-spacing-small) 0; } .ck.ck-list__item { cursor: default; /* Almost as wide as menu bar items. */ min-width: 15em; } .ck.ck-list__item > .ck-button:not(.ck-list-item-button) { padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard)); min-height: unset; width: 100%; border-radius: 0; } [dir="ltr"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) { text-align: left; } [dir="rtl"] .ck.ck-list__item > .ck-button:not(.ck-list-item-button) { text-align: right; } .ck.ck-list__item > .ck-button:not(.ck-list-item-button) .ck-button__label { /* https://github.com/ckeditor/ckeditor5-heading/issues/63 */ line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base)); } .ck.ck-list__item > .ck-button:not(.ck-list-item-button):active { box-shadow: none; } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button) { background: var(--ck-color-list-button-on-background); color: var(--ck-color-list-button-on-text); } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):active { box-shadow: none; } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):hover:not(.ck-disabled) { background: var(--ck-color-list-button-on-background-focus); } .ck.ck-list__item > .ck-button.ck-on:not(.ck-list-item-button):focus:not(.ck-disabled) { border-color: var(--ck-color-base-background); } .ck.ck-list__item > .ck-button:not(.ck-list-item-button):hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background); } /* It's unnecessary to change the background/text of a switch toggle; it has different ways of conveying its state (like the switcher) */ .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on { background: var(--ck-color-list-background); color: inherit; } .ck.ck-list__item > .ck-button.ck-switchbutton.ck-on:hover:not(.ck-disabled) { background: var(--ck-color-list-button-hover-background); color: inherit; } .ck-list .ck-list__group { padding-top: var(--ck-spacing-medium); /* Lists come with an inner vertical padding. Don't duplicate it. */ } .ck-list .ck-list__group:first-child { padding-top: 0; } /* The group should have a border when it's not the first item. */ *:not(.ck-hidden) ~ .ck-list .ck-list__group { border-top: 1px solid var(--ck-color-base-border); } .ck-list .ck-list__group > .ck-label { font-size: 11px; font-weight: bold; padding: var(--ck-spacing-medium) var(--ck-spacing-large) 0; } .ck.ck-list__separator { height: 1px; width: 100%; background: var(--ck-color-base-border); /* Give the separator some air */ margin: var(--ck-spacing-small) 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-menu-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; background: var(--ck-color-base-background); padding: var(--ck-spacing-small); gap: var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); width: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-menu-bar__menu { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; } .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level { max-width: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which indicates that an element holding it is disabled. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements a button of given background color. * * @param {String} $background - Background color of the button. * @param {String} $border - Border color of the button. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * All menu buttons. */ .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button { width: 100%; } .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-button__label { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button.ck-disabled > .ck-button__label { opacity: var(--ck-disabled-opacity); } [dir="ltr"] .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button:not(.ck-button_with-text) { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button:not(.ck-button_with-text) { padding-right: var(--ck-spacing-small); } /* * Top-level menu buttons only. */ .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button { padding: var(--ck-spacing-small) var(--ck-spacing-medium); min-height: unset; } .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button .ck-button__label { width: unset; line-height: unset; } .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button.ck-on { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-menu-bar__menu.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button .ck-icon { display: none; } /* * Sub-menu buttons. */ .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button { border-radius: 0; } .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow { width: var(--ck-dropdown-arrow-size); } [dir="ltr"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow { transform: rotate(-90deg); /* A space to accommodate the triangle. */ margin-left: var(--ck-spacing-standard); /* Nudge the arrow gently to the right because its center of gravity is to the left */ margin-right: calc(-1 * var(--ck-spacing-small)); } [dir="rtl"] .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow { transform: rotate(90deg); left: var(--ck-spacing-standard); /* A space to accommodate the triangle. */ margin-right: var(--ck-spacing-small); /* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */ margin-left: calc(-1 * var(--ck-spacing-small)); } .ck.ck-menu-bar__menu:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button.ck-disabled > .ck-menu-bar__menu__button__arrow { opacity: var(--ck-disabled-opacity); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-menu-bar-menu-item-min-width: 18em; } .ck.ck-menu-bar__menu .ck.ck-menu-bar__menu__item { min-width: var(--ck-menu-bar-menu-item-min-width); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * List item buttons. */ .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button { border-radius: 0; } .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container, .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container .ck-spinner { /* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */ --ck-toolbar-spinner-size: 20px; } .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container { /* This ensures margins corresponding to the .ck-icon. */ font-size: var(--ck-icon-font-size); } [dir="ltr"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container { margin-right: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-menu-bar__menu .ck-button.ck-menu-bar__menu__item__button > .ck-spinner-container { margin-left: var(--ck-spacing-medium); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ :root { --ck-menu-bar-menu-panel-max-width: 75vw; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel { border-radius: 0; } .ck-rounded-corners .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel { box-shadow: var(--ck-drop-shadow), 0 0; background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; height: fit-content; max-width: var(--ck-menu-bar-menu-panel-max-width); /* Corner border radius consistent with the button. */ } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se { border-top-left-radius: 0; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw { border-top-right-radius: 0; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne { border-bottom-left-radius: 0; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw { border-bottom-right-radius: 0; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel:focus { outline: none; } .ck.ck-menu-bar .ck-list-item-button:focus, .ck.ck-menu-bar .ck-list-item-button:active { border-color: transparent; box-shadow: none; } .ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:focus, .ck.ck-menu-bar.ck-menu-bar_focus-border-enabled .ck-list-item-button:active { /* Fix truncated shadows due to rendering order. */ position: relative; z-index: 2; /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-focus-outer-shadow), 0 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-balloon-border-width: 1px; --ck-balloon-arrow-offset: 2px; --ck-balloon-arrow-height: 10px; --ck-balloon-arrow-half-width: 8px; --ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop); } .ck.ck-balloon-panel { border-radius: 0; } .ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-balloon-panel { box-shadow: var(--ck-drop-shadow), 0 0; min-height: 15px; background: var(--ck-color-panel-background); border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before, .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { width: 0; height: 0; border-style: solid; } .ck.ck-balloon-panel[class*="arrow_n"]::before, .ck.ck-balloon-panel[class*="arrow_n"]::after { border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width); } .ck.ck-balloon-panel[class*="arrow_n"]::before { border-color: transparent transparent var(--ck-color-panel-border) transparent; margin-top: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_n"]::after { border-color: transparent transparent var(--ck-color-panel-background) transparent; margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_s"]::before, .ck.ck-balloon-panel[class*="arrow_s"]::after { border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width); } .ck.ck-balloon-panel[class*="arrow_s"]::before { border-color: var(--ck-color-panel-border) transparent transparent; filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow)); margin-bottom: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_s"]::after { border-color: var(--ck-color-panel-background) transparent transparent transparent; margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_e"]::before, .ck.ck-balloon-panel[class*="arrow_e"]::after { border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height); } .ck.ck-balloon-panel[class*="arrow_e"]::before { border-color: transparent transparent transparent var(--ck-color-panel-border); margin-right: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_e"]::after { border-color: transparent transparent transparent var(--ck-color-panel-background); margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_w"]::before, .ck.ck-balloon-panel[class*="arrow_w"]::after { border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0; } .ck.ck-balloon-panel[class*="arrow_w"]::before { border-color: transparent var(--ck-color-panel-border) transparent transparent; margin-left: calc( -1 * var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel[class*="arrow_w"]::after { border-color: transparent var(--ck-color-panel-background) transparent transparent; margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) ); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_n::after { left: 50%; margin-left: calc(-1 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after { left: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_ne::after { right: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_s::after { left: 50%; margin-left: calc(-1 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_sw::after { left: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_se::after { right: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_sme::after { right: 25%; margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_smw::after { left: 25%; margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); bottom: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nme::after { right: 25%; margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nmw::after { left: 25%; margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); top: calc(-1 * var(--ck-balloon-arrow-height)); } .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_e::after { right: calc(-1 * var(--ck-balloon-arrow-height)); margin-top: calc(-1 * var(--ck-balloon-arrow-half-width)); top: 50%; } .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::before, .ck.ck-balloon-panel.ck-balloon-panel_arrow_w::after { left: calc(-1 * var(--ck-balloon-arrow-height)); margin-top: calc(-1 * var(--ck-balloon-arrow-half-width)); top: 50%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { background: var(--ck-color-toolbar-background); border-bottom: 1px solid var(--ck-color-toolbar-border); padding: 0 var(--ck-spacing-small); /* Let's keep similar appearance to `ck-toolbar`. */ } .ck .ck-balloon-rotator__navigation > * { margin-right: var(--ck-spacing-small); margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } /* Gives counter more breath than buttons. */ .ck .ck-balloon-rotator__navigation .ck-balloon-rotator__counter { margin-right: var(--ck-spacing-standard); /* We need to use smaller margin because of previous button's right margin. */ margin-left: var(--ck-spacing-small); } /* Disable default annotation shadow inside rotator with fake panels. */ .ck .ck-balloon-rotator__content .ck.ck-annotation-wrapper { box-shadow: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ :root { --ck-balloon-fake-panel-offset-horizontal: 6px; --ck-balloon-fake-panel-offset-vertical: 6px; } /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */ .ck .ck-fake-panel div { box-shadow: var(--ck-drop-shadow), 0 0; min-height: 15px; background: var(--ck-color-panel-background); border: 1px solid var(--ck-color-panel-border); border-radius: var(--ck-border-radius); width: 100%; height: 100%; } .ck .ck-fake-panel div:nth-child( 1 ) { margin-left: var(--ck-balloon-fake-panel-offset-horizontal); margin-top: var(--ck-balloon-fake-panel-offset-vertical); } .ck .ck-fake-panel div:nth-child( 2 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2); margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2); } .ck .ck-fake-panel div:nth-child( 3 ) { margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3); margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3); } /* If balloon is positioned above element, we need to move fake panel to the top. */ .ck .ck-balloon-panel_arrow_s + .ck-fake-panel, .ck .ck-balloon-panel_arrow_se + .ck-fake-panel, .ck .ck-balloon-panel_arrow_sw + .ck-fake-panel { --ck-balloon-fake-panel-offset-vertical: -6px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { box-shadow: var(--ck-drop-shadow), 0 0; border-width: 0 1px 1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-vertical-form > .ck-button:nth-last-child(2)::after { border-right: 1px solid var(--ck-color-base-border); } .ck.ck-responsive-form { padding: var(--ck-spacing-large); } .ck.ck-responsive-form:focus { /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */ outline: none; } [dir="ltr"] .ck.ck-responsive-form > :not(:first-child) { margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-responsive-form > :not(:last-child) { margin-left: var(--ck-spacing-standard); } @media screen and (max-width: 600px) { .ck.ck-responsive-form { padding: 0; width: calc(.8 * var(--ck-input-width)); } .ck.ck-responsive-form .ck-labeled-field-view { margin: var(--ck-spacing-large) var(--ck-spacing-large) 0; } .ck.ck-responsive-form .ck-labeled-field-view .ck-input-text, .ck.ck-responsive-form .ck-labeled-field-view .ck-input-number { min-width: 0; width: 100%; } /* Let the long error messages wrap in the narrow form. */ .ck.ck-responsive-form .ck-labeled-field-view .ck-labeled-field-view__error { white-space: normal; } /* Styles for two last buttons in the form (save&cancel, edit&unlink, etc.). */ .ck.ck-responsive-form > .ck-button:nth-last-child(2)::after { border-right: 1px solid var(--ck-color-base-border); } .ck.ck-responsive-form > .ck-button:nth-last-child(1), .ck.ck-responsive-form > .ck-button:nth-last-child(2) { padding: var(--ck-spacing-standard); margin-top: var(--ck-spacing-large); border-radius: 0; } .ck.ck-responsive-form > .ck-button:nth-last-child(1):not(:focus), .ck.ck-responsive-form > .ck-button:nth-last-child(2):not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(1), [dir="ltr"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) { margin-left: 0; } [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1), [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2) { margin-left: 0; } [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(1):last-of-type, [dir="rtl"] .ck.ck-responsive-form > .ck-button:nth-last-child(2):last-of-type { border-right: 1px solid var(--ck-color-base-border); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium)); } .ck.ck-search > .ck-labeled-field-view .ck-input { width: 100%; } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon { --ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing); } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon > .ck-labeled-field-view__input-wrapper > .ck-icon { opacity: .5; pointer-events: none; } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input { width: 100%; } [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input { padding-left: var(--ck-search-field-view-horizontal-spacing); } [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-icon .ck-input:not(.ck-input-text_empty) { padding-left: var(--ck-search-field-view-horizontal-spacing); } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset { --ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing); } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset.ck-labeled-field-view_empty { --ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium); } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset { min-width: auto; min-height: auto; background: none; opacity: .5; padding: 0; } [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset { right: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset { left: var(--ck-spacing-medium); } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-search__reset:hover { opacity: 1; } .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input { width: 100%; } [dir="ltr"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input:not(.ck-input-text_empty) { padding-right: var(--ck-search-field-view-horizontal-spacing); } [dir="rtl"] .ck.ck-search > .ck-labeled-field-view.ck-search__query_with-reset .ck-input { padding-right: var(--ck-search-field-view-horizontal-spacing); } .ck.ck-search > .ck-search__results { min-width: 100%; } .ck.ck-search > .ck-search__results > .ck-search__info { width: 100%; padding: var(--ck-spacing-medium) var(--ck-spacing-large); } .ck.ck-search > .ck-search__results > .ck-search__info * { white-space: normal; } .ck.ck-search > .ck-search__results > .ck-search__info > span:first-child { font-weight: bold; } .ck.ck-search > .ck-search__results > .ck-search__info > span:last-child { margin-top: var(--ck-spacing-medium); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-toolbar-spinner-size: 18px; } .ck.ck-spinner-container { width: var(--ck-toolbar-spinner-size); height: var(--ck-toolbar-spinner-size); animation: 1.5s infinite ck-spinner-rotate linear; } @media (prefers-reduced-motion: reduce) { .ck.ck-spinner-container { animation-duration: 3s; } } .ck.ck-spinner { width: var(--ck-toolbar-spinner-size); height: var(--ck-toolbar-spinner-size); border-radius: 50%; border: 2px solid var(--ck-color-text); border-top-color: transparent; } @keyframes ck-spinner-rotate { to { transform: rotate(360deg) } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows. * This bug is especially visible when rows=1. */ .ck-textarea { overflow-x: hidden } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-block-toolbar-button: var(--ck-color-text); --ck-block-toolbar-button-size: var(--ck-font-size-normal); } .ck.ck-block-toolbar-button { color: var(--ck-color-block-toolbar-button); font-size: var(--ck-block-toolbar-size); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-toolbar { border-radius: 0; } .ck-rounded-corners .ck.ck-toolbar, .ck.ck-toolbar.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-toolbar { background: var(--ck-color-toolbar-background); padding: 0 var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); } .ck.ck-toolbar .ck.ck-toolbar__separator { height: var(--ck-icon-size); width: 1px; min-width: 1px; background: var(--ck-color-toolbar-border); /* * These margins make the separators look better in balloon toolbars (when aligned with the "tip"). * See https://github.com/ckeditor/ckeditor5/issues/7493. */ margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } .ck.ck-toolbar .ck-toolbar__line-break { height: 0; } .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break) { /* (#11) Separate toolbar items. */ margin-right: var(--ck-spacing-small); } /* Don't display a separator after an empty items container, for instance, when all items were grouped */ .ck.ck-toolbar > .ck-toolbar__items:empty + .ck.ck-toolbar__separator { display: none; } .ck.ck-toolbar > .ck-toolbar__items > *:not(.ck-toolbar__line-break), .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown { /* Make sure items wrapped to the next line have v-spacing */ margin-top: var(--ck-spacing-small); margin-bottom: var(--ck-spacing-small); } .ck.ck-toolbar.ck-toolbar_vertical { /* Items in a vertical toolbar span the entire width. */ padding: 0; /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */ } .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items > .ck { /* Items in a vertical toolbar should span the horizontal space. */ width: 100%; /* Items in a vertical toolbar should have no margin. */ margin: 0; /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */ border-radius: 0; } .ck.ck-toolbar.ck-toolbar_compact { /* No spacing around items. */ padding: 0; } .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > * { /* Compact toolbar items have no spacing between them. */ margin: 0; /* "Middle" children should have no rounded corners. */ } .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > *:not(:first-child):not(:last-child) { border-radius: 0; } /* * Dropdown button has asymmetric padding to fit the arrow. * This button has no arrow so let's revert that padding back to normal. */ .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button { padding-left: var(--ck-spacing-tiny); } /* A drop-down containing the nested toolbar with configured items. */ /* Prevent empty space in the panel when the dropdown label is visible and long but the toolbar has few items. */ .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-dropdown__panel { min-width: auto; } .ck.ck-toolbar .ck-toolbar__nested-toolbar-dropdown > .ck-button > .ck-button__label { max-width: 7em; width: auto; } .ck.ck-toolbar:focus { outline: none; } .ck-toolbar-container .ck.ck-toolbar { border: 0; } /* stylelint-disable */ /* * Styles for RTL toolbars. * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck { margin-right: 0; } [dir="rtl"] .ck.ck-toolbar:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck, .ck.ck-toolbar[dir="rtl"]:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck { /* (#11) Separate toolbar items. */ margin-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="rtl"] > .ck-toolbar__items > .ck:last-child { margin-left: 0; } /* No rounded corners on the right side of the first child. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* No rounded corners on the left side of the last child. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="rtl"] > .ck-toolbar__items > .ck:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Separate the the separator form the grouping dropdown when some items are grouped. */ [dir="rtl"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="rtl"] > .ck.ck-toolbar__separator { margin-left: var(--ck-spacing-small); } /* Some spacing between the items and the separator before the grouped items dropdown. */ [dir="rtl"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="rtl"] > .ck-toolbar__items:not(:empty):not(:only-child) { margin-left: var(--ck-spacing-small); } /* * Styles for LTR toolbars. * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="ltr"] .ck.ck-toolbar > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar[dir="ltr"] > .ck-toolbar__items > .ck:last-child { margin-right: 0; } /* No rounded corners on the right side of the first child. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:first-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* No rounded corners on the left side of the last child. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_compact > .ck-toolbar__items > .ck:last-child, .ck.ck-toolbar.ck-toolbar_compact[dir="ltr"] > .ck-toolbar__items > .ck:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Separate the the separator form the grouping dropdown when some items are grouped. */ [dir="ltr"] .ck.ck-toolbar > .ck.ck-toolbar__separator, .ck.ck-toolbar[dir="ltr"] > .ck.ck-toolbar__separator { margin-right: var(--ck-spacing-small); } /* Some spacing between the items and the separator before the grouped items dropdown. */ [dir="ltr"] .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child), .ck.ck-toolbar.ck-toolbar_grouping[dir="ltr"] > .ck-toolbar__items:not(:empty):not(:only-child) { margin-right: var(--ck-spacing-small); } /* stylelint-enable */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-balloon-panel.ck-tooltip { --ck-balloon-border-width: 0px; --ck-balloon-arrow-offset: 0px; --ck-balloon-arrow-half-width: 4px; --ck-balloon-arrow-height: 4px; --ck-tooltip-text-padding: 4px; --ck-color-panel-background: var(--ck-color-tooltip-background); padding: 0 var(--ck-spacing-medium); /* Reset balloon panel styles */ box-shadow: none; } .ck.ck-balloon-panel.ck-tooltip .ck-tooltip__text { font-size: .9em; line-height: 1.5; color: var(--ck-color-tooltip-text); } .ck.ck-balloon-panel.ck-tooltip.ck-tooltip_multi-line .ck-tooltip__text { white-space: break-spaces; display: inline-block; padding: var(--ck-tooltip-text-padding) 0; max-width: 200px; } /* Hide the default shadow of the .ck-balloon-panel tip */ .ck.ck-balloon-panel.ck-tooltip::before { display: none; } /* Editor */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content { border-radius: 0; } .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content, .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-rounded-corners { border-radius: var(--ck-border-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content { border: 1px solid var(--ck-color-base-border); border-bottom-width: 0; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-sticky-panel__content_sticky { border-bottom-width: 1px; } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-menu-bar { border: 0; border-bottom: 1px solid var(--ck-color-base-border); } .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar { border: 0; } /* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */ .ck.ck-editor__main > .ck-editor__editable { /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */ background: var(--ck-color-base-background); border-radius: 0; } .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) { border-color: var(--ck-color-base-border); } /* Plugins */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-clipboard-drop-target-dot-width: 12px; --ck-clipboard-drop-target-dot-height: 8px; --ck-clipboard-drop-target-color: var(--ck-color-focus-border); } /* * Vertical drop target (in text). */ .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span { bottom: calc(-.5 * var(--ck-clipboard-drop-target-dot-height)); top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height)); border: 1px solid var(--ck-clipboard-drop-target-color); background: var(--ck-clipboard-drop-target-color); margin-left: -1px; /* The triangle above the marker */ } .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span::after { content: ''; width: 0; height: 0; display: block; position: absolute; left: 50%; top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height)); transform: translateX(-50%); border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent; border-width: calc(var(--ck-clipboard-drop-target-dot-height)) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)); border-style: solid; } /* * Styles of the widget that it a drop target. */ .ck.ck-editor__editable .ck-widget.ck-clipboard-drop-target-range { outline: var(--ck-widget-outline-thickness) solid var(--ck-clipboard-drop-target-color) !important; } /* * Styles of the widget being dragged (its preview). */ .ck.ck-editor__editable .ck-widget:-webkit-drag { zoom: 0.6; outline: none !important; } .ck.ck-clipboard-drop-target-line { height: 0; border: 1px solid var(--ck-clipboard-drop-target-color); background: var(--ck-clipboard-drop-target-color); margin-top: -1px; } .ck.ck-clipboard-drop-target-line::before { content: ''; position: absolute; top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width)); width: 0; height: 0; border-style: solid; } [dir="ltr"] .ck.ck-clipboard-drop-target-line::before { left: -1px; border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height); border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color); } [dir="rtl"] .ck.ck-clipboard-drop-target-line::before { right: -1px; border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0; border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-code-block-label-background: hsl(0, 0%, 46%); } .ck.ck-editor__editable pre[data-language]::after { top: -1px; right: 10px; background: var(--ck-color-code-block-label-background); font-size: 10px; font-family: var(--ck-font-face); line-height: 16px; padding: var(--ck-spacing-tiny) var(--ck-spacing-medium); color: hsl(0, 0%, 100%); white-space: nowrap; } .ck.ck-code-block-dropdown .ck-dropdown__panel { /* There could be dozens of languages available. Use scroll to prevent a 10e6px dropdown. */ max-height: 250px; overflow-y: auto; overflow-x: hidden; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* See ckeditor/ckeditor5#936. */ @media (forced-colors: active) { .ck.ck-placeholder, .ck .ck-placeholder { /* * This is needed for Edge on Windows to use the right color for the placeholder content (::before). * See https://github.com/ckeditor/ckeditor5/issues/14907. */ forced-color-adjust: preserve-parent-color; } } .ck.ck-placeholder::before, .ck .ck-placeholder::before { cursor: text; } @media (forced-colors: none) { .ck.ck-placeholder::before, .ck .ck-placeholder::before { color: var(--ck-color-engine-placeholder-text); } } @media (forced-colors: active) { .ck.ck-placeholder::before, .ck .ck-placeholder::before { /* * In the high contrast mode there is no telling between regular and placeholder text. Using * italic text to address that issue. See https://github.com/ckeditor/ckeditor5/issues/14907. */ font-style: italic; /* * Without this margin, the caret will not show up and blink when the user puts the selection * in the placeholder (Edge on Windows). See https://github.com/ckeditor/ckeditor5/issues/14907. */ margin-left: 1px; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-find-and-replace-form { width: 400px; /* * The
needs tabindex="-1" for proper Esc handling after being clicked * but the side effect is that this creates a nasty focus outline in some browsers. */ } .ck.ck-find-and-replace-form:focus { outline: none; } /* Generic styles for the form inputs and actions. */ .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: stretch; padding: var(--ck-spacing-large); margin: 0; } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button { flex: 0 0 auto; } [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * { margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > * + *, [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > * + * { margin-right: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view { flex: 1 1 auto; } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-labeled-field-view .ck-input, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions .ck-labeled-field-view .ck-input { width: 100%; min-width: 50px; } /* Styles specific for inputs area. */ .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs { /* To display all controls in line when there's an error under the input */ align-items: flex-start; } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-prev > .ck-icon { transform: rotate(90deg); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-button-next > .ck-icon { transform: rotate(-90deg); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter { top: 50%; transform: translateY(-50%); } [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter { right: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter { left: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs .ck-results-counter { color: var(--ck-color-base-border); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace { flex: 0 0 100%; padding-top: var(--ck-spacing-standard); } [dir="ltr"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace { margin-left: 0; } [dir="rtl"] .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs > .ck-labeled-field-replace { margin-right: 0; } /* Styles specific for actions area. */ .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions { flex-wrap: wrap; justify-content: flex-end; margin-top: calc( -1 * var(--ck-spacing-large) ); } .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find { font-weight: bold; /* Beef the find button up a little. It's the main action button in the form */ } .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions > .ck-button-find .ck-button__label { padding-left: var(--ck-spacing-large); padding-right: var(--ck-spacing-large); } .ck.ck-find-and-replace-form .ck-switchbutton { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } @media screen and (max-width: 600px) { .ck.ck-find-and-replace-form { width: 300px; /* Don't let the form overflow from the dialog (https://github.com/cksource/ckeditor5-commercial/issues/5913) */ max-width: 100%; /* Styles specific for inputs area. */ } .ck.ck-find-and-replace-form.ck-find-and-replace-form__input { flex-wrap: wrap; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__input .ck-labeled-field-view { flex: 1 0 auto; width: 100%; margin-bottom: var(--ck-spacing-standard); } .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button { text-align: center; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type { flex: 1 1 auto; } [dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type { margin-left: 0; } [dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type { margin-right: 0; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__input > .ck-button:first-of-type .ck-button__label { width: 100%; text-align: center; } /* Styles specific for actions area. */ .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) { flex-wrap: wrap; flex: 1 1 auto; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button { text-align: center; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type { flex: 1 1 auto; } [dir="ltr"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type { margin-left: 0; } [dir="rtl"] .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button:first-of-type { margin-right: 0; } .ck.ck-find-and-replace-form.ck-find-and-replace-form__actions > :not(.ck-labeled-field-view) > .ck-button .ck-button__label { width: 100%; text-align: center; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Resize dropdown's button label. */ .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label { width: 8em; } .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item { min-width: 18em; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size)); --ck-html-embed-source-height: 10em; --ck-html-embed-unfocused-outline-width: 1px; --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard)); --ck-html-embed-source-disabled-background: var(--ck-color-base-foreground); --ck-html-embed-source-disabled-color: hsl(0deg 0% 45%); } /* The feature container. */ .ck-widget.raw-html-embed { font-size: var(--ck-font-size-base); background-color: var(--ck-color-base-foreground); } .ck-widget.raw-html-embed:not(.ck-widget_selected):not(:hover) { outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border); } /* HTML embed widget itself should respect UI language direction */ .ck-widget.raw-html-embed[dir="ltr"] { text-align: left; } .ck-widget.raw-html-embed[dir="rtl"] { text-align: right; } /* ----- Embed label in the upper left corner ----------------------------------------------- */ .ck-widget.raw-html-embed::before { content: attr(data-html-embed-label); top: calc(-1 * var(--ck-html-embed-unfocused-outline-width)); left: var(--ck-spacing-standard); background: hsl(0deg 0% 60%); transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny); border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); color: var(--ck-color-base-background); font-size: var(--ck-font-size-tiny); font-family: var(--ck-font-face); } .ck-widget.raw-html-embed[dir="rtl"]::before { left: auto; right: var(--ck-spacing-standard); } /* Make space for label but it only collides in LTR languages */ .ck-widget.raw-html-embed[dir="ltr"] .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before { margin-left: 50px; } .ck.ck-editor__editable.ck-blurred .ck-widget.raw-html-embed.ck-widget_selected::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } .ck.ck-editor__editable:not(.ck-blurred) .ck-widget.raw-html-embed.ck-widget_selected::before { top: 0; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); background: var(--ck-color-focus-border); } .ck.ck-editor__editable .ck-widget.raw-html-embed:not(.ck-widget_selected):hover::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } /* ----- Emebed internals --------------------------------------------------------------------- */ .ck-widget.raw-html-embed .raw-html-embed__content-wrapper { padding: var(--ck-spacing-standard); } /* The switch mode button wrapper. */ .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper { top: var(--ck-spacing-standard); right: var(--ck-spacing-standard); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__save-button { color: var(--ck-color-button-save); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__cancel-button { color: var(--ck-color-button-cancel); } .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button:not(:first-child) { margin-top: var(--ck-spacing-small); } .ck-widget.raw-html-embed[dir="rtl"] .raw-html-embed__buttons-wrapper { left: var(--ck-spacing-standard); right: auto; } /* The edit source element. */ .ck-widget.raw-html-embed .raw-html-embed__source { box-sizing: border-box; height: var(--ck-html-embed-source-height); width: var(--ck-html-embed-content-width); resize: none; min-width: 0; padding: var(--ck-spacing-standard); font-family: monospace; tab-size: 4; white-space: pre-wrap; font-size: var(--ck-font-size-base); /* Safari needs this. */ /* HTML code is direction–agnostic. */ text-align: left; direction: ltr; } .ck-widget.raw-html-embed .raw-html-embed__source[disabled] { background: var(--ck-html-embed-source-disabled-background); color: var(--ck-html-embed-source-disabled-color); /* Safari needs this for the proper text color in disabled input (https://github.com/ckeditor/ckeditor5/issues/8320). */ -webkit-text-fill-color: var(--ck-html-embed-source-disabled-color); opacity: 1; } /* The preview data container. */ .ck-widget.raw-html-embed .raw-html-embed__preview { min-height: var(--ck-html-embed-content-min-height); width: var(--ck-html-embed-content-width); /* Disable all mouse interaction as long as the editor is not read–only. */ } .ck-editor__editable:not(.ck-read-only) .ck-widget.raw-html-embed .raw-html-embed__preview { pointer-events: none; } .ck-widget.raw-html-embed .raw-html-embed__preview-content { box-sizing: border-box; background-color: var(--ck-color-base-foreground); } .ck-widget.raw-html-embed .raw-html-embed__preview-content > * { margin-left: auto; margin-right: auto; } .ck-widget.raw-html-embed .raw-html-embed__preview-placeholder { color: var(--ck-html-embed-source-disabled-color) } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-image-insert-insert-by-url-width: 250px; } .ck.ck-image-insert-url { --ck-input-width: 100%; } .ck.ck-image-insert-url .ck-image-insert-url__action-row { grid-column-gap: var(--ck-spacing-large); margin-top: var(--ck-spacing-large); } .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-save, .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-cancel { justify-content: center; min-width: auto; } .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label { color: var(--ck-color-text); } .ck.ck-image-insert-form > .ck.ck-button { display: block; width: 100%; } [dir="ltr"] .ck.ck-image-insert-form > .ck.ck-button { text-align: left; } [dir="rtl"] .ck.ck-image-insert-form > .ck.ck-button { text-align: right; } .ck.ck-image-insert-form > .ck.ck-collapsible { min-width: var(--ck-image-insert-insert-by-url-width); } .ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child) { border-top: 1px solid var(--ck-color-base-border); } .ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child) { border-bottom: 1px solid var(--ck-color-base-border); } /* This is the case when there are no other integrations configured than insert by URL */ .ck.ck-image-insert-form > .ck.ck-image-insert-url { min-width: var(--ck-image-insert-insert-by-url-width); padding: var(--ck-spacing-large); } .ck.ck-image-insert-form:focus { outline: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-image-upload-icon: hsl(0, 0%, 100%); --ck-color-image-upload-icon-background: hsl(120, 100%, 27%); /* Match the icon size with the linked image indicator brought by the link image feature. */ --ck-image-upload-icon-size: 20; --ck-image-upload-icon-width: 2px; --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px); } .ck-image-upload-complete-icon { opacity: 0; background: var(--ck-color-image-upload-icon-background); animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide; animation-fill-mode: forwards, forwards; animation-duration: 500ms, 500ms; /* To make animation scalable. */ font-size: calc(1px * var(--ck-image-upload-icon-size)); /* Hide completed upload icon after 3 seconds. */ animation-delay: 0ms, 3000ms; /* * Use CSS math to simulate container queries. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things */ overflow: hidden; width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size)); height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size)); /* This is check icon element made from border-width mixed with animations. */ } .ck-image-upload-complete-icon::after { /* Because of border transformation we need to "hard code" left position. */ left: 25%; top: 50%; opacity: 0; height: 0; width: 0; transform: scaleX(-1) rotate(135deg); transform-origin: left top; border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon); border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon); animation-name: ck-upload-complete-icon-check; animation-duration: 500ms; animation-delay: 500ms; animation-fill-mode: forwards; /* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */ box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { .ck-image-upload-complete-icon { animation-duration: 0ms; } .ck-image-upload-complete-icon::after { animation: none; opacity: 1; width: 0.3em; height: 0.45em; } } @keyframes ck-upload-complete-icon-show { from { opacity: 0; } to { opacity: 1; } } @keyframes ck-upload-complete-icon-hide { from { opacity: 1; } to { opacity: 0; } } @keyframes ck-upload-complete-icon-check { 0% { opacity: 1; width: 0; height: 0; } 33% { width: 0.3em; height: 0; } 100% { opacity: 1; width: 0.3em; height: 0.45em; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-upload-placeholder-loader: hsl(0, 0%, 70%); --ck-upload-placeholder-loader-size: 32px; --ck-upload-placeholder-image-aspect-ratio: 2.8; } .ck .ck-image-upload-placeholder { /* We need to control the full width of the SVG gray background. */ width: 100%; margin: 0; } .ck .ck-image-upload-placeholder.image-inline { width: calc( 2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio) ); } .ck .ck-image-upload-placeholder img { /* * This is an arbitrary aspect for a 1x1 px GIF to display to the user. Not too tall, not too short. * There's nothing special about this number except that it should make the image placeholder look like * a real image during this short period after the upload started and before the image was read from the * file system (and a rich preview was loaded). */ aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio); } .ck .ck-upload-placeholder-loader { width: 100%; height: 100%; } .ck .ck-upload-placeholder-loader::before { width: var(--ck-upload-placeholder-loader-size); height: var(--ck-upload-placeholder-loader-size); border-radius: 50%; border-top: 3px solid var(--ck-color-upload-placeholder-loader); border-right: 2px solid transparent; animation: ck-upload-placeholder-loader 1s linear infinite; } @keyframes ck-upload-placeholder-loader { to { transform: rotate( 360deg ); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Showing animation. */ .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear { animation: fadeIn 700ms; } @media (prefers-reduced-motion: reduce) { .ck.ck-editor__editable .image.ck-appear, .ck.ck-editor__editable .image-inline.ck-appear { opacity: 1; animation: none; } } /* Upload progress bar. */ .ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar { height: 2px; width: 0; background: var(--ck-color-upload-bar-background); transition: width 100ms; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Class added to span element surrounding currently selected link. */ .ck .ck-link_selected { background: var(--ck-color-link-selected-background); /* Give linked inline images some outline to let the user know they are also part of the link. */ } .ck .ck-link_selected span.image-inline { outline: var(--ck-widget-outline-thickness) solid var(--ck-color-link-selected-background); } /* * Classes used by the "fake visual selection" displayed in the content when an input * in the link UI has focus (the browser does not render the native selection in this state). */ .ck .ck-fake-link-selection { background: var(--ck-color-link-fake-selection); } /* A collapsed fake visual selection. */ .ck .ck-fake-link-selection_collapsed { height: 100%; border-right: 1px solid var(--ck-color-base-text); margin-right: -1px; outline: solid 1px hsla(0, 0%, 100%, .5); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-actions .ck-button.ck-link-actions__preview { padding-left: 0; padding-right: 0; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label { padding: 0 var(--ck-spacing-medium); color: var(--ck-color-link-default); text-overflow: ellipsis; cursor: pointer; /* Match the box model of the link editor form's input so the balloon does not change width when moving between actions and the form. */ max-width: var(--ck-input-width); min-width: 3em; text-align: center; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover { -webkit-text-decoration: underline; text-decoration: underline; } .ck.ck-link-actions .ck-button.ck-link-actions__preview, .ck.ck-link-actions .ck-button.ck-link-actions__preview:hover, .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus, .ck.ck-link-actions .ck-button.ck-link-actions__preview:active { background: none; } .ck.ck-link-actions .ck-button.ck-link-actions__preview:active { box-shadow: none; } .ck.ck-link-actions .ck-button.ck-link-actions__preview:focus .ck-button__label { -webkit-text-decoration: underline; text-decoration: underline; } [dir="ltr"] .ck.ck-link-actions .ck-button:not(:first-child) { margin-left: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-link-actions .ck-button:not(:last-child) { margin-left: var(--ck-spacing-standard); } @media screen and (max-width: 600px) { .ck.ck-link-actions .ck-button.ck-link-actions__preview { margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0; } .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label { min-width: 0; max-width: 100%; } [dir="ltr"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) { margin-left: 0; } [dir="rtl"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) { margin-left: 0; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Style link form differently when manual decorators are available. * See: https://github.com/ckeditor/ckeditor5-link/issues/186. */ .ck.ck-link-form_layout-vertical { padding: 0; min-width: var(--ck-input-width); } .ck.ck-link-form_layout-vertical .ck-labeled-field-view { margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small); } .ck.ck-link-form_layout-vertical .ck-labeled-field-view .ck-input-text { min-width: 0; width: 100%; } .ck.ck-link-form_layout-vertical > .ck-button { padding: var(--ck-spacing-standard); margin: 0; width: 50%; border-radius: 0; } .ck.ck-link-form_layout-vertical > .ck-button:not(:focus) { border-top: 1px solid var(--ck-color-base-border); } [dir="ltr"] .ck.ck-link-form_layout-vertical > .ck-button { margin-left: 0; } [dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button { margin-left: 0; } [dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button:last-of-type { border-right: 1px solid var(--ck-color-base-border); } /* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */ .ck.ck-link-form_layout-vertical .ck.ck-list { margin: 0 var(--ck-spacing-large); } .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton { padding: 0; width: 100%; } .ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton:hover { background: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Match the icon size with the upload indicator brought by the image upload feature. */ --ck-link-image-indicator-icon-size: 20; --ck-link-image-indicator-icon-is-visible: clamp(0px, 100% - 50px, 1px); } /* Linked image indicator */ .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after { content: ""; /* * Smaller images should have the icon closer to the border. * Match the icon position with the upload indicator brought by the image upload feature. */ top: min(var(--ck-spacing-medium), 6%); right: min(var(--ck-spacing-medium), 6%); background-color: hsla(0, 0%, 0%, .4); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTExLjA3NyAxNSAuOTkxLTEuNDE2YS43NS43NSAwIDEgMSAxLjIyOS44NmwtMS4xNDggMS42NGEuNzQ4Ljc0OCAwIDAgMS0uMjE3LjIwNiA1LjI1MSA1LjI1MSAwIDAgMS04LjUwMy01Ljk1NS43NDEuNzQxIDAgMCAxIC4xMi0uMjc0bDEuMTQ3LTEuNjM5YS43NS43NSAwIDEgMSAxLjIyOC44Nkw0LjkzMyAxMC43bC4wMDYuMDAzYTMuNzUgMy43NSAwIDAgMCA2LjEzMiA0LjI5NGwuMDA2LjAwNHptNS40OTQtNS4zMzVhLjc0OC43NDggMCAwIDEtLjEyLjI3NGwtMS4xNDcgMS42MzlhLjc1Ljc1IDAgMSAxLTEuMjI4LS44NmwuODYtMS4yM2EzLjc1IDMuNzUgMCAwIDAtNi4xNDQtNC4zMDFsLS44NiAxLjIyOWEuNzUuNzUgMCAwIDEtMS4yMjktLjg2bDEuMTQ4LTEuNjRhLjc0OC43NDggMCAwIDEgLjIxNy0uMjA2IDUuMjUxIDUuMjUxIDAgMCAxIDguNTAzIDUuOTU1em0tNC41NjMtMi41MzJhLjc1Ljc1IDAgMCAxIC4xODQgMS4wNDVsLTMuMTU1IDQuNTA1YS43NS43NSAwIDEgMS0xLjIyOS0uODZsMy4xNTUtNC41MDZhLjc1Ljc1IDAgMCAxIDEuMDQ1LS4xODR6Ii8+PC9zdmc+"); background-size: 14px; background-repeat: no-repeat; background-position: center; border-radius: 100%; /* * Use CSS math to simulate container queries. * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things */ overflow: hidden; width: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size)); height: calc(var(--ck-link-image-indicator-icon-is-visible) * var(--ck-link-image-indicator-icon-size)); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* When there are no list styles and there is no collapsible. */ .ck.ck-list-properties.ck-list-properties_without-styles { padding: var(--ck-spacing-large); } .ck.ck-list-properties.ck-list-properties_without-styles > * { min-width: 14em; } .ck.ck-list-properties.ck-list-properties_without-styles > * + * { margin-top: var(--ck-spacing-standard); } /* * When the numbered list property fields (start at, reversed) should be displayed, * more horizontal space is needed. Reconfigure the style grid to create that space. */ .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-list-styles-list { grid-template-columns: repeat( 4, auto ); } /* When list styles are rendered and property fields are in a collapsible. */ .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible { border-top: 1px solid var(--ck-color-base-border); } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * { width: 100%; } .ck.ck-list-properties.ck-list-properties_with-numbered-properties > .ck-collapsible > .ck-collapsible__children > * + * { margin-top: var(--ck-spacing-standard); } .ck.ck-list-properties .ck.ck-numbered-list-properties__start-index .ck-input { min-width: auto; width: 100%; } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order { background: transparent; padding-left: 0; padding-right: 0; margin-bottom: calc(-1 * var(--ck-spacing-tiny)); } .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:active, .ck.ck-list-properties .ck.ck-numbered-list-properties__reversed-order:hover { box-shadow: none; border-color: transparent; background: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-list-style-button-size: 44px; } .ck.ck-list-styles-list { grid-template-columns: repeat( 3, auto ); row-gap: var(--ck-spacing-medium); column-gap: var(--ck-spacing-medium); padding: var(--ck-spacing-large); } .ck.ck-list-styles-list .ck-button { /* Make the button look like a thumbnail (the icon "takes it all"). */ width: var(--ck-list-style-button-size); height: var(--ck-list-style-button-size); padding: 0; /* * Buttons are aligned by the grid so disable default button margins to not collide with the * gaps in the grid. */ margin: 0; /* * Make sure the button border (which is displayed on focus, BTW) does not steal pixels * from the button dimensions and, as a result, decrease the size of the icon * (which becomes blurry as it scales down). */ box-sizing: content-box; } .ck.ck-list-styles-list .ck-button .ck-icon { width: var(--ck-list-style-button-size); height: var(--ck-list-style-button-size); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-media-embed-placeholder-icon-size: 3em; --ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%); --ck-color-media-embed-placeholder-url-text-hover: var(--ck-color-base-text); } .ck-media__wrapper { margin: 0 auto; } .ck-media__wrapper .ck-media__placeholder { padding: calc( 3 * var(--ck-spacing-standard) ); background: var(--ck-color-base-foreground); } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon { min-width: var(--ck-media-embed-placeholder-icon-size); height: var(--ck-media-embed-placeholder-icon-size); margin-bottom: var(--ck-spacing-large); background-position: center; background-size: cover; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__icon .ck-icon { width: 100%; height: 100%; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text { color: var(--ck-color-media-embed-placeholder-url-text); white-space: nowrap; text-align: center; font-style: italic; text-overflow: ellipsis; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: var(--ck-color-media-embed-placeholder-url-text-hover); cursor: pointer; -webkit-text-decoration: underline; text-decoration: underline; } .ck-media__wrapper[data-oembed-url*="open.spotify.com"] { max-width: 300px; max-height: 380px; } .ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon, .ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAuMzc4IiBoZWlnaHQ9IjI1NC4xNjciIHZpZXdCb3g9IjAgMCA2Ni4yNDYgNjcuMjQ4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcyLjUzMSAtMjE4LjQ1NSkgc2NhbGUoLjk4MDEyKSI+PHJlY3Qgcnk9IjUuMjM4IiByeD0iNS4yMzgiIHk9IjIzMS4zOTkiIHg9IjE3Ni4wMzEiIGhlaWdodD0iNjAuMDk5IiB3aWR0aD0iNjAuMDk5IiBmaWxsPSIjMzRhNjY4IiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxwYXRoIGQ9Ik0yMDYuNDc3IDI2MC45bC0yOC45ODcgMjguOTg3YTUuMjE4IDUuMjE4IDAgMCAwIDMuNzggMS42MWg0OS42MjFjMS42OTQgMCAzLjE5LS43OTggNC4xNDYtMi4wMzd6IiBmaWxsPSIjNWM4OGM1Ii8+PHBhdGggZD0iTTIyNi43NDIgMjIyLjk4OGMtOS4yNjYgMC0xNi43NzcgNy4xNy0xNi43NzcgMTYuMDE0LjAwNyAyLjc2Mi42NjMgNS40NzQgMi4wOTMgNy44NzUuNDMuNzAzLjgzIDEuNDA4IDEuMTkgMi4xMDcuMzMzLjUwMi42NSAxLjAwNS45NSAxLjUwOC4zNDMuNDc3LjY3My45NTcuOTg4IDEuNDQgMS4zMSAxLjc2OSAyLjUgMy41MDIgMy42MzcgNS4xNjguNzkzIDEuMjc1IDEuNjgzIDIuNjQgMi40NjYgMy45OSAyLjM2MyA0LjA5NCA0LjAwNyA4LjA5MiA0LjYgMTMuOTE0di4wMTJjLjE4Mi40MTIuNTE2LjY2Ni44NzkuNjY3LjQwMy0uMDAxLjc2OC0uMzE0LjkzLS43OTkuNjAzLTUuNzU2IDIuMjM4LTkuNzI5IDQuNTg1LTEzLjc5NC43ODItMS4zNSAxLjY3My0yLjcxNSAyLjQ2NS0zLjk5IDEuMTM3LTEuNjY2IDIuMzI4LTMuNCAzLjYzOC01LjE2OS4zMTUtLjQ4Mi42NDUtLjk2Mi45ODgtMS40MzkuMy0uNTAzLjYxNy0xLjAwNi45NS0xLjUwOC4zNTktLjcuNzYtMS40MDQgMS4xOS0yLjEwNyAxLjQyNi0yLjQwMiAyLTUuMTE0IDIuMDA0LTcuODc1IDAtOC44NDQtNy41MTEtMTYuMDE0LTE2Ljc3Ni0xNi4wMTR6IiBmaWxsPSIjZGQ0YjNlIiBwYWludC1vcmRlcj0ibWFya2VycyBzdHJva2UgZmlsbCIvPjxlbGxpcHNlIHJ5PSI1LjU2NCIgcng9IjUuODI4IiBjeT0iMjM5LjAwMiIgY3g9IjIyNi43NDIiIGZpbGw9IiM4MDJkMjciIHBhaW50LW9yZGVyPSJtYXJrZXJzIHN0cm9rZSBmaWxsIi8+PHBhdGggZD0iTTE5MC4zMDEgMjM3LjI4M2MtNC42NyAwLTguNDU3IDMuODUzLTguNDU3IDguNjA2czMuNzg2IDguNjA3IDguNDU3IDguNjA3YzMuMDQzIDAgNC44MDYtLjk1OCA2LjMzNy0yLjUxNiAxLjUzLTEuNTU3IDIuMDg3LTMuOTEzIDIuMDg3LTYuMjkgMC0uMzYyLS4wMjMtLjcyMi0uMDY0LTEuMDc5aC04LjI1N3YzLjA0M2g0Ljg1Yy0uMTk3Ljc1OS0uNTMxIDEuNDUtMS4wNTggMS45ODYtLjk0Mi45NTgtMi4wMjggMS41NDgtMy45MDEgMS41NDgtMi44NzYgMC01LjIwOC0yLjM3Mi01LjIwOC01LjI5OSAwLTIuOTI2IDIuMzMyLTUuMjk5IDUuMjA4LTUuMjk5IDEuMzk5IDAgMi42MTguNDA3IDMuNTg0IDEuMjkzbDIuMzgxLTIuMzhjMC0uMDAyLS4wMDMtLjAwNC0uMDA0LS4wMDUtMS41ODgtMS41MjQtMy42Mi0yLjIxNS01Ljk1NS0yLjIxNXptNC40MyA1LjY2bC4wMDMuMDA2di0uMDAzeiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjE1LjE4NCAyNTEuOTI5bC03Ljk4IDcuOTc5IDI4LjQ3NyAyOC40NzVjLjI4Ny0uNjQ5LjQ0OS0xLjM2Ni40NDktMi4xMjN2LTMxLjE2NWMtLjQ2OS42NzUtLjkzNCAxLjM0OS0xLjM4MiAyLjAwNS0uNzkyIDEuMjc1LTEuNjgyIDIuNjQtMi40NjUgMy45OS0yLjM0NyA0LjA2NS0zLjk4MiA4LjAzOC00LjU4NSAxMy43OTQtLjE2Mi40ODUtLjUyNy43OTgtLjkzLjc5OS0uMzYzLS4wMDEtLjY5Ny0uMjU1LS44NzktLjY2N3YtLjAxMmMtLjU5My01LjgyMi0yLjIzNy05LjgyLTQuNi0xMy45MTQtLjc4My0xLjM1LTEuNjczLTIuNzE1LTIuNDY2LTMuOTktMS4xMzctMS42NjYtMi4zMjctMy40LTMuNjM3LTUuMTY5bC0uMDAyLS4wMDN6IiBmaWxsPSIjYzNjM2MzIi8+PHBhdGggZD0iTTIxMi45ODMgMjQ4LjQ5NWwtMzYuOTUyIDM2Ljk1M3YuODEyYTUuMjI3IDUuMjI3IDAgMCAwIDUuMjM4IDUuMjM4aDEuMDE1bDM1LjY2Ni0zNS42NjZhMTM2LjI3NSAxMzYuMjc1IDAgMCAwLTIuNzY0LTMuOSAzNy41NzUgMzcuNTc1IDAgMCAwLS45ODktMS40NGMtLjI5OS0uNTAzLS42MTYtMS4wMDYtLjk1LTEuNTA4LS4wODMtLjE2Mi0uMTc2LS4zMjYtLjI2NC0uNDg5eiIgZmlsbD0iI2ZkZGM0ZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJNMjExLjk5OCAyNjEuMDgzbC02LjE1MiA2LjE1MSAyNC4yNjQgMjQuMjY0aC43ODFhNS4yMjcgNS4yMjcgMCAwIDAgNS4yMzktNS4yMzh2LTEuMDQ1eiIgZmlsbD0iI2ZmZiIgcGFpbnQtb3JkZXI9Im1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48L2c+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder { background: hsl(220, 46%, 48%); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMDI0cHgiIGhlaWdodD0iMTAyNHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkZpbGwgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImZMb2dvX1doaXRlIiBmaWxsPSIjRkZGRkZFIj4gICAgICAgICAgICA8cGF0aCBkPSJNOTY3LjQ4NCwwIEw1Ni41MTcsMCBDMjUuMzA0LDAgMCwyNS4zMDQgMCw1Ni41MTcgTDAsOTY3LjQ4MyBDMCw5OTguNjk0IDI1LjI5NywxMDI0IDU2LjUyMiwxMDI0IEw1NDcsMTAyNCBMNTQ3LDYyOCBMNDE0LDYyOCBMNDE0LDQ3MyBMNTQ3LDQ3MyBMNTQ3LDM1OS4wMjkgQzU0NywyMjYuNzY3IDYyNy43NzMsMTU0Ljc0NyA3NDUuNzU2LDE1NC43NDcgQzgwMi4yNjksMTU0Ljc0NyA4NTAuODQyLDE1OC45NTUgODY1LDE2MC44MzYgTDg2NSwyOTkgTDc4My4zODQsMjk5LjAzNyBDNzE5LjM5MSwyOTkuMDM3IDcwNywzMjkuNTI5IDcwNywzNzQuMjczIEw3MDcsNDczIEw4NjAuNDg3LDQ3MyBMODQwLjUwMSw2MjggTDcwNyw2MjggTDcwNywxMDI0IEw5NjcuNDg0LDEwMjQgQzk5OC42OTcsMTAyNCAxMDI0LDk5OC42OTcgMTAyNCw5NjcuNDg0IEwxMDI0LDU2LjUxNSBDMTAyNCwyNS4zMDMgOTk4LjY5NywwIDk2Ny40ODQsMCIgaWQ9IkZpbGwtMSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(220, 100%, 90%); } .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder { background: linear-gradient(-135deg,hsl(246, 100%, 39%),hsl(302, 100%, 36%),hsl(0, 100%, 48%)); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MDRweCIgaGVpZ2h0PSI1MDRweCIgdmlld0JveD0iMCAwIDUwNCA1MDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+Z2x5cGgtbG9nb19NYXkyMDE2PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSIwIDAuMTU5IDUwMy44NDEgMC4xNTkgNTAzLjg0MSA1MDMuOTQgMCA1MDMuOTQiPjwvcG9seWdvbj4gICAgPC9kZWZzPiAgICA8ZyBpZD0iZ2x5cGgtbG9nb19NYXkyMDE2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cC0zIj4gICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+ICAgICAgICAgICAgPC9tYXNrPiAgICAgICAgICAgIDxnIGlkPSJDbGlwLTIiPjwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNMjUxLjkyMSwwLjE1OSBDMTgzLjUwMywwLjE1OSAxNzQuOTI0LDAuNDQ5IDE0OC4wNTQsMS42NzUgQzEyMS4yNCwyLjg5OCAxMDIuOTI3LDcuMTU3IDg2LjkwMywxMy4zODUgQzcwLjMzNywxOS44MjIgNTYuMjg4LDI4LjQzNiA0Mi4yODIsNDIuNDQxIEMyOC4yNzcsNTYuNDQ3IDE5LjY2Myw3MC40OTYgMTMuMjI2LDg3LjA2MiBDNi45OTgsMTAzLjA4NiAyLjczOSwxMjEuMzk5IDEuNTE2LDE0OC4yMTMgQzAuMjksMTc1LjA4MyAwLDE4My42NjIgMCwyNTIuMDggQzAsMzIwLjQ5NyAwLjI5LDMyOS4wNzYgMS41MTYsMzU1Ljk0NiBDMi43MzksMzgyLjc2IDYuOTk4LDQwMS4wNzMgMTMuMjI2LDQxNy4wOTcgQzE5LjY2Myw0MzMuNjYzIDI4LjI3Nyw0NDcuNzEyIDQyLjI4Miw0NjEuNzE4IEM1Ni4yODgsNDc1LjcyMyA3MC4zMzcsNDg0LjMzNyA4Ni45MDMsNDkwLjc3NSBDMTAyLjkyNyw0OTcuMDAyIDEyMS4yNCw1MDEuMjYxIDE0OC4wNTQsNTAyLjQ4NCBDMTc0LjkyNCw1MDMuNzEgMTgzLjUwMyw1MDQgMjUxLjkyMSw1MDQgQzMyMC4zMzgsNTA0IDMyOC45MTcsNTAzLjcxIDM1NS43ODcsNTAyLjQ4NCBDMzgyLjYwMSw1MDEuMjYxIDQwMC45MTQsNDk3LjAwMiA0MTYuOTM4LDQ5MC43NzUgQzQzMy41MDQsNDg0LjMzNyA0NDcuNTUzLDQ3NS43MjMgNDYxLjU1OSw0NjEuNzE4IEM0NzUuNTY0LDQ0Ny43MTIgNDg0LjE3OCw0MzMuNjYzIDQ5MC42MTYsNDE3LjA5NyBDNDk2Ljg0Myw0MDEuMDczIDUwMS4xMDIsMzgyLjc2IDUwMi4zMjUsMzU1Ljk0NiBDNTAzLjU1MSwzMjkuMDc2IDUwMy44NDEsMzIwLjQ5NyA1MDMuODQxLDI1Mi4wOCBDNTAzLjg0MSwxODMuNjYyIDUwMy41NTEsMTc1LjA4MyA1MDIuMzI1LDE0OC4yMTMgQzUwMS4xMDIsMTIxLjM5OSA0OTYuODQzLDEwMy4wODYgNDkwLjYxNiw4Ny4wNjIgQzQ4NC4xNzgsNzAuNDk2IDQ3NS41NjQsNTYuNDQ3IDQ2MS41NTksNDIuNDQxIEM0NDcuNTUzLDI4LjQzNiA0MzMuNTA0LDE5LjgyMiA0MTYuOTM4LDEzLjM4NSBDNDAwLjkxNCw3LjE1NyAzODIuNjAxLDIuODk4IDM1NS43ODcsMS42NzUgQzMyOC45MTcsMC40NDkgMzIwLjMzOCwwLjE1OSAyNTEuOTIxLDAuMTU5IFogTTI1MS45MjEsNDUuNTUgQzMxOS4xODYsNDUuNTUgMzI3LjE1NCw0NS44MDcgMzUzLjcxOCw0Ny4wMTkgQzM3OC4yOCw0OC4xMzkgMzkxLjYxOSw1Mi4yNDMgNDAwLjQ5Niw1NS42OTMgQzQxMi4yNTUsNjAuMjYzIDQyMC42NDcsNjUuNzIyIDQyOS40NjIsNzQuNTM4IEM0MzguMjc4LDgzLjM1MyA0NDMuNzM3LDkxLjc0NSA0NDguMzA3LDEwMy41MDQgQzQ1MS43NTcsMTEyLjM4MSA0NTUuODYxLDEyNS43MiA0NTYuOTgxLDE1MC4yODIgQzQ1OC4xOTMsMTc2Ljg0NiA0NTguNDUsMTg0LjgxNCA0NTguNDUsMjUyLjA4IEM0NTguNDUsMzE5LjM0NSA0NTguMTkzLDMyNy4zMTMgNDU2Ljk4MSwzNTMuODc3IEM0NTUuODYxLDM3OC40MzkgNDUxLjc1NywzOTEuNzc4IDQ0OC4zMDcsNDAwLjY1NSBDNDQzLjczNyw0MTIuNDE0IDQzOC4yNzgsNDIwLjgwNiA0MjkuNDYyLDQyOS42MjEgQzQyMC42NDcsNDM4LjQzNyA0MTIuMjU1LDQ0My44OTYgNDAwLjQ5Niw0NDguNDY2IEMzOTEuNjE5LDQ1MS45MTYgMzc4LjI4LDQ1Ni4wMiAzNTMuNzE4LDQ1Ny4xNCBDMzI3LjE1OCw0NTguMzUyIDMxOS4xOTEsNDU4LjYwOSAyNTEuOTIxLDQ1OC42MDkgQzE4NC42NSw0NTguNjA5IDE3Ni42ODQsNDU4LjM1MiAxNTAuMTIzLDQ1Ny4xNCBDMTI1LjU2MSw0NTYuMDIgMTEyLjIyMiw0NTEuOTE2IDEwMy4zNDUsNDQ4LjQ2NiBDOTEuNTg2LDQ0My44OTYgODMuMTk0LDQzOC40MzcgNzQuMzc5LDQyOS42MjEgQzY1LjU2NCw0MjAuODA2IDYwLjEwNCw0MTIuNDE0IDU1LjUzNCw0MDAuNjU1IEM1Mi4wODQsMzkxLjc3OCA0Ny45OCwzNzguNDM5IDQ2Ljg2LDM1My44NzcgQzQ1LjY0OCwzMjcuMzEzIDQ1LjM5MSwzMTkuMzQ1IDQ1LjM5MSwyNTIuMDggQzQ1LjM5MSwxODQuODE0IDQ1LjY0OCwxNzYuODQ2IDQ2Ljg2LDE1MC4yODIgQzQ3Ljk4LDEyNS43MiA1Mi4wODQsMTEyLjM4MSA1NS41MzQsMTAzLjUwNCBDNjAuMTA0LDkxLjc0NSA2NS41NjMsODMuMzUzIDc0LjM3OSw3NC41MzggQzgzLjE5NCw2NS43MjIgOTEuNTg2LDYwLjI2MyAxMDMuMzQ1LDU1LjY5MyBDMTEyLjIyMiw1Mi4yNDMgMTI1LjU2MSw0OC4xMzkgMTUwLjEyMyw0Ny4wMTkgQzE3Ni42ODcsNDUuODA3IDE4NC42NTUsNDUuNTUgMjUxLjkyMSw0NS41NSBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxwYXRoIGQ9Ik0yNTEuOTIxLDMzNi4wNTMgQzIwNS41NDMsMzM2LjA1MyAxNjcuOTQ3LDI5OC40NTcgMTY3Ljk0NywyNTIuMDggQzE2Ny45NDcsMjA1LjcwMiAyMDUuNTQzLDE2OC4xMDYgMjUxLjkyMSwxNjguMTA2IEMyOTguMjk4LDE2OC4xMDYgMzM1Ljg5NCwyMDUuNzAyIDMzNS44OTQsMjUyLjA4IEMzMzUuODk0LDI5OC40NTcgMjk4LjI5OCwzMzYuMDUzIDI1MS45MjEsMzM2LjA1MyBaIE0yNTEuOTIxLDEyMi43MTUgQzE4MC40NzQsMTIyLjcxNSAxMjIuNTU2LDE4MC42MzMgMTIyLjU1NiwyNTIuMDggQzEyMi41NTYsMzIzLjUyNiAxODAuNDc0LDM4MS40NDQgMjUxLjkyMSwzODEuNDQ0IEMzMjMuMzY3LDM4MS40NDQgMzgxLjI4NSwzMjMuNTI2IDM4MS4yODUsMjUyLjA4IEMzODEuMjg1LDE4MC42MzMgMzIzLjM2NywxMjIuNzE1IDI1MS45MjEsMTIyLjcxNSBaIiBpZD0iRmlsbC00IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNDE2LjYyNywxMTcuNjA0IEM0MTYuNjI3LDEzNC4zIDQwMy4wOTIsMTQ3LjgzNCAzODYuMzk2LDE0Ny44MzQgQzM2OS43MDEsMTQ3LjgzNCAzNTYuMTY2LDEzNC4zIDM1Ni4xNjYsMTE3LjYwNCBDMzU2LjE2NiwxMDAuOTA4IDM2OS43MDEsODcuMzczIDM4Ni4zOTYsODcuMzczIEM0MDMuMDkyLDg3LjM3MyA0MTYuNjI3LDEwMC45MDggNDE2LjYyNywxMTcuNjA0IiBpZD0iRmlsbC01IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgIDwvZz48L3N2Zz4=); } /* stylelint-disable-next-line no-descending-specificity */ .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(302, 100%, 94%); } .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder { /* Use gradient to contrast with focused widget (ckeditor/ckeditor5-media-embed#22). */ background: linear-gradient( to right, hsl(201, 85%, 70%), hsl(201, 85%, 35%) ); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__icon { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMCA0MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDAsMjAwYzAsMTEwLjUtODkuNSwyMDAtMjAwLDIwMFMwLDMxMC41LDAsMjAwUzg5LjUsMCwyMDAsMFM0MDAsODkuNSw0MDAsMjAweiBNMTYzLjQsMzA1LjVjODguNywwLDEzNy4yLTczLjUsMTM3LjItMTM3LjJjMC0yLjEsMC00LjItMC4xLTYuMmM5LjQtNi44LDE3LjYtMTUuMywyNC4xLTI1Yy04LjYsMy44LTE3LjksNi40LTI3LjcsNy42YzEwLTYsMTcuNi0xNS40LDIxLjItMjYuN2MtOS4zLDUuNS0xOS42LDkuNS0zMC42LDExLjdjLTguOC05LjQtMjEuMy0xNS4yLTM1LjItMTUuMmMtMjYuNiwwLTQ4LjIsMjEuNi00OC4yLDQ4LjJjMCwzLjgsMC40LDcuNSwxLjMsMTFjLTQwLjEtMi03NS42LTIxLjItOTkuNC01MC40Yy00LjEsNy4xLTYuNSwxNS40LTYuNSwyNC4yYzAsMTYuNyw4LjUsMzEuNSwyMS41LDQwLjFjLTcuOS0wLjItMTUuMy0yLjQtMjEuOC02YzAsMC4yLDAsMC40LDAsMC42YzAsMjMuNCwxNi42LDQyLjgsMzguNyw0Ny4zYy00LDEuMS04LjMsMS43LTEyLjcsMS43Yy0zLjEsMC02LjEtMC4zLTkuMS0wLjljNi4xLDE5LjIsMjMuOSwzMy4xLDQ1LDMzLjVjLTE2LjUsMTIuOS0zNy4zLDIwLjYtNTkuOSwyMC42Yy0zLjksMC03LjctMC4yLTExLjUtMC43QzExMC44LDI5Ny41LDEzNi4yLDMwNS41LDE2My40LDMwNS41Ii8+PC9zdmc+); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text { color: hsl(201, 100%, 86%); } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck.ck-media__placeholder .ck-media__placeholder__url__text:hover { color: hsl(0, 0%, 100%); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-mention-background: hsla(341, 100%, 30%, 0.1); --ck-color-mention-text: hsl(341, 100%, 30%); } .ck-content .mention { background: var(--ck-color-mention-background); color: var(--ck-color-mention-text); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2); --ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35); --ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4); --ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5); --ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6); } .ck-editor__editable .restricted-editing-exception { transition: .2s ease-in-out background; background-color: var(--ck-color-restricted-editing-exception-background); border: 1px solid; border-image: linear-gradient( to right, var(--ck-color-restricted-editing-exception-brackets) 0%, var(--ck-color-restricted-editing-exception-brackets) 5px, hsla(0, 0%, 0%, 0) 6px, hsla(0, 0%, 0%, 0) calc(100% - 6px), var(--ck-color-restricted-editing-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-exception-brackets) 100% ) 1; } @media (prefers-reduced-motion: reduce) { .ck-editor__editable .restricted-editing-exception { transition: none; } } .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_selected { background-color: var(--ck-color-restricted-editing-selected-exception-background); border-image: linear-gradient( to right, var(--ck-color-restricted-editing-selected-exception-brackets) 0%, var(--ck-color-restricted-editing-selected-exception-brackets) 5px, var(--ck-color-restricted-editing-selected-exception-brackets) calc(100% - 5px), var(--ck-color-restricted-editing-selected-exception-brackets) 100% ) 1; } .ck-editor__editable .restricted-editing-exception.restricted-editing-exception_collapsed { /* Empty exception should have the same width as exception with at least 1 char */ padding-left: 1ch; } .ck-restricted-editing_mode_restricted { cursor: default; /* We also have to override all elements inside the restricted editable to prevent cursor switching between default and text during the pointer movement. */ } .ck-restricted-editing_mode_restricted * { cursor: default; } .ck-restricted-editing_mode_restricted .restricted-editing-exception { cursor: text; } .ck-restricted-editing_mode_restricted .restricted-editing-exception * { cursor: text; } .ck-restricted-editing_mode_restricted .restricted-editing-exception:hover { background: var(--ck-color-restricted-editing-exception-hover-background); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-character-grid-tile-size: 24px; } .ck.ck-character-grid { overflow-y: auto; overflow-x: hidden; } .ck.ck-character-grid .ck-character-grid__tiles { grid-template-columns: repeat(auto-fill, minmax(var(--ck-character-grid-tile-size), 1fr)); margin: var(--ck-spacing-standard) var(--ck-spacing-large); grid-gap: var(--ck-spacing-standard); } .ck.ck-character-grid .ck-character-grid__tile { width: var(--ck-character-grid-tile-size); height: var(--ck-character-grid-tile-size); min-width: var(--ck-character-grid-tile-size); min-height: var(--ck-character-grid-tile-size); font-size: 1.5em; padding: 0; transition: .2s ease box-shadow; border: 0; } @media (prefers-reduced-motion: reduce) { .ck.ck-character-grid .ck-character-grid__tile { transition: none; } } .ck.ck-character-grid .ck-character-grid__tile:focus:not( .ck-disabled ), .ck.ck-character-grid .ck-character-grid__tile:hover:not( .ck-disabled ) { /* Disable the default .ck-button's border ring. */ border: 0; box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border); } /* Make sure the glyph is rendered in the center of the button */ .ck.ck-character-grid .ck-character-grid__tile .ck-button__label { line-height: var(--ck-character-grid-tile-size); width: 100%; text-align: center; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-character-info { padding: var(--ck-spacing-small) var(--ck-spacing-large); border-top: 1px solid var(--ck-color-base-border); } .ck.ck-character-info > * { text-transform: uppercase; font-size: var(--ck-font-size-small); } .ck.ck-character-info .ck-character-info__name { max-width: 280px; text-overflow: ellipsis; overflow: hidden; } .ck.ck-character-info .ck-character-info__code { opacity: .6; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-special-characters-navigation > .ck-label { max-width: 160px; text-overflow: ellipsis; overflow: hidden; } .ck.ck-special-characters-navigation > .ck-dropdown .ck-dropdown__panel { /* There could be dozens of categories available. Use scroll to prevent a 10e6px dropdown. */ max-height: 250px; overflow-y: auto; overflow-x: hidden; } @media screen and (max-width: 600px) { .ck.ck-special-characters-navigation { max-width: 190px; } .ck.ck-special-characters-navigation > .ck-form__header__label { text-overflow: ellipsis; overflow: hidden; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label { font-style: italic; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-button-width: 120px; --ck-style-panel-button-height: 80px; --ck-style-panel-button-label-background: hsl(0, 0%, 94.1%); --ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%); --ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%); } .ck.ck-style-panel .ck-style-grid { row-gap: var(--ck-spacing-large); column-gap: var(--ck-spacing-large); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button { --ck-color-button-default-hover-background: var(--ck-color-base-background); --ck-color-button-default-active-background: var(--ck-color-base-background); padding: 0; width: var(--ck-style-panel-button-width); height: var(--ck-style-panel-button-height); /* Let default .ck-button :focus styles apply */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus) { border: 1px solid var(--ck-color-base-border); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label { height: 22px; line-height: 22px; width: 100%; padding: 0 var(--ck-spacing-medium); overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { width: 100%; overflow: hidden; opacity: .9; padding: var(--ck-spacing-medium); background: var(--ck-color-base-background); border: 2px solid var(--ck-color-base-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled { --ck-color-button-default-disabled-background: var(--ck-color-base-foreground); /* Let default .ck-button :focus styles apply */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus) { border-color: var(--ck-style-panel-button-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview { opacity: .4; border-color: var(--ck-color-base-foreground); filter: saturate(.3); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on { border-color: var(--ck-color-base-active); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label { box-shadow: 0 -1px 0 var(--ck-color-base-active); z-index: 1; /* Stay on top of the preview with the shadow. */ } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover { border-color: var(--ck-color-base-active-focus); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label { background: var(--ck-style-panel-button-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label { background: var(--ck-style-panel-button-hover-label-background); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) { border-color: var(--ck-style-panel-button-hover-border-color); } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview { opacity: 1; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-style-panel .ck-style-panel__style-group > .ck-label { margin: var(--ck-spacing-large) 0; } .ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label { margin-top: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-max-height: 470px; } .ck.ck-style-panel { padding: var(--ck-spacing-large); overflow-y: auto; max-height: var(--ck-style-panel-max-height); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ [dir="ltr"] .ck.ck-input-color > .ck.ck-input-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] .ck.ck-input-color > .ck.ck-input-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Make sure the focused input is always on top of the dropdown button so its outline and border are never cropped (also when the input is read-only). */ .ck.ck-input-color > .ck.ck-input-text:focus { z-index: 0; } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button { padding: 0; } [dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir="ltr"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) { border-left: 1px solid transparent; } [dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button:not(:focus) { border-right: 1px solid transparent; } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button.ck-disabled { background: var(--ck-color-input-disabled-background); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview { border-radius: 0; } .ck-rounded-corners .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview, .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview { width: 20px; height: 20px; border: 1px solid var(--ck-color-input-border); } .ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator { top: -30%; left: 50%; height: 150%; width: 8%; background: hsl(0, 100%, 50%); border-radius: 2px; transform: rotate(45deg); transform-origin: 50%; } .ck.ck-input-color .ck.ck-input-color__remove-color { width: 100%; padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ck.ck-input-color .ck.ck-input-color__remove-color:not(:focus) { border-bottom: 1px solid var(--ck-color-input-border); } [dir="ltr"] .ck.ck-input-color .ck.ck-input-color__remove-color { border-top-right-radius: 0; } [dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color { border-top-left-radius: 0; } .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon { margin-right: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon { margin-right: 0; margin-left: var(--ck-spacing-standard); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form { padding: 0 0 var(--ck-spacing-large); } .ck.ck-form:focus { /* See: https://github.com/ckeditor/ckeditor5/issues/4773 */ outline: none; } .ck.ck-form .ck.ck-input-text { min-width: 100%; width: 0; } .ck.ck-form .ck.ck-dropdown { min-width: 100%; } .ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) { border: 1px solid var(--ck-color-base-border); } .ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label { width: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__row { padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0; /* Ignore labels that work as fieldset legends */ } [dir="ltr"] .ck.ck-form__row > *:not(.ck-label) + * { margin-left: var(--ck-spacing-large); } [dir="rtl"] .ck.ck-form__row > *:not(.ck-label) + * { margin-right: var(--ck-spacing-large); } .ck.ck-form__row > .ck-label { width: 100%; min-width: 100%; } .ck.ck-form__row.ck-table-form__action-row { margin-top: var(--ck-spacing-large); } .ck.ck-form__row.ck-table-form__action-row .ck-button .ck-button__label { color: var(--ck-color-text); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-insert-table-dropdown-padding: 10px; --ck-insert-table-dropdown-box-height: 11px; --ck-insert-table-dropdown-box-width: 12px; --ck-insert-table-dropdown-box-margin: 1px; } .ck .ck-insert-table-dropdown__grid { /* The width of a container should match 10 items in a row so there will be a 10x10 grid. */ width: calc(var(--ck-insert-table-dropdown-box-width) * 10 + var(--ck-insert-table-dropdown-box-margin) * 20 + var(--ck-insert-table-dropdown-padding) * 2); padding: var(--ck-insert-table-dropdown-padding) var(--ck-insert-table-dropdown-padding) 0; } .ck .ck-insert-table-dropdown__label, .ck[dir=rtl] .ck-insert-table-dropdown__label { text-align: center; } .ck .ck-insert-table-dropdown-grid-box { min-width: var(--ck-insert-table-dropdown-box-width); min-height: var(--ck-insert-table-dropdown-box-height); margin: var(--ck-insert-table-dropdown-box-margin); border: 1px solid var(--ck-color-base-border); border-radius: 1px; outline: none; transition: none; } @media (prefers-reduced-motion: reduce) { .ck .ck-insert-table-dropdown-grid-box { transition: none; } } .ck .ck-insert-table-dropdown-grid-box:focus { box-shadow: none; } .ck .ck-insert-table-dropdown-grid-box.ck-on { border-color: var(--ck-color-focus-border); background: var(--ck-color-focus-outer-shadow); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-cell-properties-form { width: 320px; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__padding-row { align-self: flex-end; padding: 0; width: 25%; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar { background: none; /* Compensate for missing input label that would push the margin (toolbar has no inputs). */ margin-top: var(--ck-spacing-standard); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-selector-focused-cell-background: hsla(212, 90%, 80%, .3); } /** * While setting outline is fine, the border should not be modified here * because it overrides the default table cell border color which is not expected. * So do not use `@mixin ck-focus-ring;` here, or any other border styles. * See more: https://github.com/ckeditor/ckeditor5/issues/16979 */ .ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck-widget.table td.ck-editor__nested-editable:focus, .ck-widget.table th.ck-editor__nested-editable:focus { /* A very slight background to highlight the focused cell */ background: var(--ck-color-selector-focused-cell-background); outline: 1px solid var(--ck-color-focus-border); outline-offset: -1px; /* progressive enhancement - no IE support */ } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ :root { --ck-table-properties-error-arrow-size: 6px; --ck-table-properties-min-error-width: 150px; } .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label { font-size: var(--ck-font-size-tiny); text-align: center; } .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style, .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width { width: 80px; min-width: 80px; max-width: 80px; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row { padding: 0; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width, .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height { margin: 0 } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator { align-self: flex-end; display: inline-block; height: var(--ck-ui-component-min-height); line-height: var(--ck-ui-component-min-height); margin: 0 var(--ck-spacing-small); } .ck.ck-table-form .ck.ck-labeled-field-view { padding-top: var(--ck-spacing-standard); } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { border-radius: 0; } .ck-rounded-corners .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status, .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status.ck-rounded-corners { border-radius: var(--ck-border-radius); } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { background: var(--ck-color-base-error); color: var(--ck-color-base-background); padding: var(--ck-spacing-small) var(--ck-spacing-medium); min-width: var(--ck-table-properties-min-error-width); text-align: center; animation: ck-table-form-labeled-view-status-appear .15s ease both; /* The arrow pointing towards the field. */ } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after { border-color: transparent transparent var(--ck-color-base-error) transparent; border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size); border-style: solid; } @media (prefers-reduced-motion: reduce) { .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { animation: none; } } /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */ .ck.ck-table-form .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status { display: none; } @keyframes ck-table-form-labeled-view-status-appear { 0% { opacity: 0; } 100% { opacity: 1; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-properties-form { width: 320px; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row { align-self: flex-end; padding: 0; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar { background: none; /* Compensate for missing input label that would push the margin (toolbar has no inputs). */ margin-top: var(--ck-spacing-standard); } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * { width: 40px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-table-selected-cell-background: hsla(208, 90%, 80%, .3); } .ck.ck-editor__editable .table table td.ck-editor__editable_selected, .ck.ck-editor__editable .table table th.ck-editor__editable_selected { position: relative; caret-color: transparent; outline: unset; box-shadow: unset; /* https://github.com/ckeditor/ckeditor5/issues/6446 */ } .ck.ck-editor__editable .table table td.ck-editor__editable_selected:after, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:after { content: ''; pointer-events: none; background-color: var(--ck-table-selected-cell-background); position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ck.ck-editor__editable .table table td.ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table th.ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table td.ck-editor__editable_selected:focus, .ck.ck-editor__editable .table table th.ck-editor__editable_selected:focus { background-color: transparent; } /* * To reduce the amount of noise, all widgets in the table selection have no outline and no selection handle. * See https://github.com/ckeditor/ckeditor5/issues/9491. */ .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget { outline: unset; } .ck.ck-editor__editable .table table td.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle, .ck.ck-editor__editable .table table th.ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-widget-outline-thickness: 3px; --ck-widget-handler-icon-size: 16px; --ck-widget-handler-animation-duration: 200ms; --ck-widget-handler-animation-curve: ease; --ck-color-widget-blurred-border: hsl(0, 0%, 87%); --ck-color-widget-hover-border: hsl(43, 100%, 62%); --ck-color-widget-editable-focus-background: var(--ck-color-base-background); --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background); } .ck .ck-widget { outline-width: var(--ck-widget-outline-thickness); outline-style: solid; outline-color: transparent; transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); } @media (prefers-reduced-motion: reduce) { .ck .ck-widget { transition: none; } } .ck .ck-widget.ck-widget_selected, .ck .ck-widget.ck-widget_selected:hover { outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border); } .ck .ck-widget:hover { outline-color: var(--ck-color-widget-hover-border); } .ck .ck-editor__nested-editable { border: 1px solid transparent; /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */ } .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus { box-shadow: var(--ck-inner-shadow), 0 0; } @media (forced-colors: none) { .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus { background-color: var(--ck-color-widget-editable-focus-background); } } /** * Focus border should not be applied to table cells because it overrides the default table cell border color. * In other words - in some scenarios, the part of the table cell border has focus color style, which is not expected behavior * because it should be the same as the table cell border color. */ .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused:not(td):not(th), .ck .ck-editor__nested-editable:focus:not(td):not(th) { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { padding: 4px; box-sizing: border-box; /* Background and opacity will be animated as the handler shows up or the widget gets selected. */ background-color: transparent; opacity: 0; /* Transition: * background-color for the .ck-widget_selected state change, * visibility for hiding the handler, * opacity for the proper look of the icon when the handler disappears. */ transition: background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); /* Make only top corners round. */ border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0; /* Place the drag handler outside the widget wrapper. */ transform: translateY(-100%); left: calc(0px - var(--ck-widget-outline-thickness)); top: 0; } @media (prefers-reduced-motion: reduce) { .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { transition: none; } } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon { /* Make sure the dimensions of the icon are independent of the fon-size of the content. */ width: var(--ck-widget-handler-icon-size); height: var(--ck-widget-handler-icon-size); color: var(--ck-color-widget-drag-handler-icon-color); /* The "selected" part of the icon is invisible by default */ } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator { opacity: 0; /* Note: The animation is longer on purpose. Simply feels better. */ transition: opacity 300ms var(--ck-widget-handler-animation-curve); } @media (prefers-reduced-motion: reduce) { .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator { transition: none; } } /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */ .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover .ck-icon .ck-icon__selected-indicator { opacity: 1; } /* Show the selection handler on mouse hover over the widget, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-widget-hover-border); } /* Show the selection handler when the widget is selected, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-focus-border); /* When the widget is selected, notify the user using the proper look of the icon. */ } .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator { opacity: 1; } /* In a RTL environment, align the selection handler to the right side of the widget */ /* stylelint-disable-next-line no-descending-specificity */ .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { left: auto; right: calc(0px - var(--ck-widget-outline-thickness)); } /* https://github.com/ckeditor/ckeditor5/issues/6415 */ .ck.ck-editor__editable.ck-read-only .ck-widget { /* Prevent the :hover outline from showing up because of the used outline-color transition. */ transition: none; } .ck.ck-editor__editable.ck-read-only .ck-widget:not(.ck-widget_selected) { /* Disable visual effects of hover/active widget when CKEditor is in readOnly mode. * See: https://github.com/ckeditor/ckeditor5/issues/1261 * * Leave the unit because this custom property is used in calc() by other features. * See: https://github.com/ckeditor/ckeditor5/issues/6775 */ --ck-widget-outline-thickness: 0px; } .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle, .ck.ck-editor__editable.ck-read-only .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle:hover { background: var(--ck-color-widget-blurred-border); } /* Style the widget when it's selected but the editable it belongs to lost focus. */ /* stylelint-disable-next-line no-descending-specificity */ .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover { outline-color: var(--ck-color-widget-blurred-border); } .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle:hover, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle:hover { background: var(--ck-color-widget-blurred-border); } .ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child, .ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child { /* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable. In fact, anything with overflow: hidden. https://github.com/ckeditor/ckeditor5-block-quote/issues/28 https://github.com/ckeditor/ckeditor5-widget/issues/44 https://github.com/ckeditor/ckeditor5-widget/issues/66 */ margin-top: calc(1em + var(--ck-widget-handler-icon-size)); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-resizer-size: 10px; /* Set the resizer with a 50% offset. */ --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px); --ck-resizer-border-width: 1px; } .ck .ck-widget__resizer { outline: 1px solid var(--ck-color-resizer); } .ck .ck-widget__resizer__handle { width: var(--ck-resizer-size); height: var(--ck-resizer-size); background: var(--ck-color-focus-border); border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%); border-radius: var(--ck-resizer-border-radius); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left { top: var(--ck-resizer-offset); left: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right { top: var(--ck-resizer-offset); right: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right { bottom: var(--ck-resizer-offset); right: var(--ck-resizer-offset); } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left { bottom: var(--ck-resizer-offset); left: var(--ck-resizer-offset); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-widget-type-around-button-size: 20px; --ck-color-widget-type-around-button-active: var(--ck-color-focus-border); --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border); --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border); --ck-color-widget-type-around-button-radar-start-alpha: 0; --ck-color-widget-type-around-button-radar-end-alpha: .3; --ck-color-widget-type-around-button-icon: var(--ck-color-base-background); } /* * Styles of the type around buttons */ .ck .ck-widget .ck-widget__type-around__button { width: var(--ck-widget-type-around-button-size); height: var(--ck-widget-type-around-button-size); background: var(--ck-color-widget-type-around-button); border-radius: 100px; transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ck .ck-widget .ck-widget__type-around__button { transition: none; } } .ck .ck-widget .ck-widget__type-around__button svg { width: 10px; height: 8px; transform: translate(-50%,-50%); transition: transform .5s ease; margin-top: 1px; } @media (prefers-reduced-motion: reduce) { .ck .ck-widget .ck-widget__type-around__button svg { transition: none; } } .ck .ck-widget .ck-widget__type-around__button svg * { stroke-dasharray: 10; stroke-dashoffset: 0; fill: none; stroke: var(--ck-color-widget-type-around-button-icon); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; } .ck .ck-widget .ck-widget__type-around__button svg line { stroke-dasharray: 7; } .ck .ck-widget .ck-widget__type-around__button:hover { /* * Display the "sonar" around the button when hovered. */ animation: ck-widget-type-around-button-sonar 1s ease infinite; /* * Animate active button's icon. */ } .ck .ck-widget .ck-widget__type-around__button:hover svg polyline { animation: ck-widget-type-around-arrow-dash 2s linear; } .ck .ck-widget .ck-widget__type-around__button:hover svg line { animation: ck-widget-type-around-arrow-tip-dash 2s linear; } @media (prefers-reduced-motion: reduce) { .ck .ck-widget .ck-widget__type-around__button:hover { animation: none; } .ck .ck-widget .ck-widget__type-around__button:hover svg polyline { animation: none; } .ck .ck-widget .ck-widget__type-around__button:hover svg line { animation: none; } } /* * Show type around buttons when the widget gets selected or being hovered. */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 1; pointer-events: auto; } /* * Styles for the buttons when the widget is NOT selected (but the buttons are visible * and still can be hovered). */ .ck .ck-widget:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button { background: var(--ck-color-widget-type-around-button-hover); } /* * Styles for the buttons when: * - the widget is selected, * - or the button is being hovered (regardless of the widget state). */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover { background: var(--ck-color-widget-type-around-button-active); } .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after { width: calc(var(--ck-widget-type-around-button-size) - 2px); height: calc(var(--ck-widget-type-around-button-size) - 2px); border-radius: 100px; background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%); } /* * Styles for the "before" button when the widget has a selection handle. Because some space * is consumed by the handle, the button must be moved slightly to the right to let it breathe. */ .ck .ck-widget.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before { margin-left: 20px; } /* * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard. */ .ck .ck-widget .ck-widget__type-around__fake-caret { pointer-events: none; height: 1px; animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards; /* * The semi-transparent-outline+background combo improves the contrast * when the background underneath the fake caret is dark. */ outline: solid 1px hsla(0, 0%, 100%, .5); background: var(--ck-color-base-text); } /* * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation). * Despite the widget being physically selected in the model, its outline should disappear. */ .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before, .ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after { outline-color: transparent; } /* * When the "fake caret" is visible we simulate that the widget is not selected * (despite being physically selected), so the outline color should be for the * unselected widget. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected:hover, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected:hover { outline-color: var(--ck-color-widget-hover-border); } /* * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation). * In this state, the type around buttons would collide with the fake carets so they should disappear. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 0; pointer-events: none; } /* * Fake horizontal caret integration with the selection handle. When the caret is visible, simply * hide the handle because it intersects with the caret (and does not make much sense anyway). */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle { opacity: 0 } /* * Fake horizontal caret integration with the resize UI. When the caret is visible, simply * hide the resize UI because it creates too much noise. It can be visible when the user * hovers the widget, though. */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer { opacity: 0 } /* * Styles for the "before" button when the widget has a selection handle in an RTL environment. * The selection handler is aligned to the right side of the widget so there is no need to create * additional space for it next to the "before" button. */ .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__type-around > .ck-widget__type-around__button_before { margin-left: 0; margin-right: 20px; } /* * Hide type around buttons when the widget is selected as a child of a selected * nested editable (e.g. mulit-cell table selection). * * See https://github.com/ckeditor/ckeditor5/issues/7263. */ .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button { opacity: 0; pointer-events: none; } /* * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor). */ .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) { background: var(--ck-color-widget-type-around-button-blurred-editable); } .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) svg * { stroke: hsl(0,0%,60%); } @keyframes ck-widget-type-around-arrow-dash { 0% { stroke-dashoffset: 10; } 20%, 100% { stroke-dashoffset: 0; } } @keyframes ck-widget-type-around-arrow-tip-dash { 0%, 20% { stroke-dashoffset: 7; } 40%, 100% { stroke-dashoffset: 0; } } @keyframes ck-widget-type-around-button-sonar { 0% { box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } 50% { box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha)); } 100% { box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); } } @keyframes ck-widget-type-around-fake-caret-pulse { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content code { background-color: hsla(0, 0%, 78%, 0.3); padding: .15em; border-radius: 2px; } .ck.ck-editor__editable .ck-code_selected { background-color: hsla(0, 0%, 78%, 0.5); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content blockquote { /* See #12 */ overflow: hidden; /* https://github.com/ckeditor/ckeditor5-block-quote/issues/15 */ padding-right: 1.5em; padding-left: 1.5em; margin-left: 0; margin-right: 0; font-style: italic; border-left: solid 5px hsl(0, 0%, 80%); } .ck-content[dir="rtl"] blockquote { border-left: 0; border-right: solid 5px hsl(0, 0%, 80%); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Based on default CKBox theme colors */ --ck-image-processing-highlight-color: hsl(220, 10%, 98%); --ck-image-processing-background-color: hsl(220, 10%, 90%); } .ck.ck-editor__editable .image.image-processing { position: relative; } .ck.ck-editor__editable .image.image-processing:before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; background: linear-gradient( 90deg, var(--ck-image-processing-background-color), var(--ck-image-processing-highlight-color), var(--ck-image-processing-background-color) ); background-size: 200% 100%; animation: ck-image-processing-animation 2s linear infinite; } .ck.ck-editor__editable .image.image-processing img { height: 100%; } @keyframes ck-image-processing-animation { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Vertical drop target (in text). */ .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position { display: inline; position: relative; pointer-events: none; } .ck.ck-editor__editable .ck.ck-clipboard-drop-target-position span { position: absolute; width: 0; } /* * Styles of the widget being dragged (its preview). */ .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__selection-handle { display: none; } .ck.ck-editor__editable .ck-widget:-webkit-drag > .ck-widget__type-around { display: none; } .ck.ck-clipboard-drop-target-line { position: absolute; pointer-events: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content pre { padding: 1em; color: hsl(0, 0%, 20.8%); background: hsla(0, 0%, 78%, 0.3); border: 1px solid hsl(0, 0%, 77%); border-radius: 2px; /* Code block are language direction–agnostic. */ text-align: left; direction: ltr; tab-size: 4; white-space: pre-wrap; /* Don't inherit the style, e.g. when in a block quote. */ font-style: normal; /* Don't let the code be squashed e.g. when in a table cell. */ min-width: 200px; } .ck-content pre code { background: unset; padding: 0; border-radius: 0; } .ck.ck-editor__editable pre { position: relative; } .ck.ck-editor__editable pre[data-language]::after { content: attr(data-language); position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-editor { /* All the elements within `.ck-editor` are positioned relatively to it. If any element needs to be positioned with respect to the , etc., it must land outside of the `.ck-editor` in DOM. */ position: relative; } .ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar { /* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */ z-index: var(--ck-z-panel); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-menu-bar { border: none; border-bottom: 1px solid var(--ck-color-toolbar-border); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* See ckeditor/ckeditor5#936. */ .ck.ck-placeholder, .ck .ck-placeholder { position: relative; } .ck.ck-placeholder::before, .ck .ck-placeholder::before { position: absolute; left: 0; right: 0; content: attr(data-placeholder); /* See ckeditor/ckeditor5#469. */ pointer-events: none; } /* See ckeditor/ckeditor5#1987. */ .ck.ck-read-only .ck-placeholder::before { display: none; } /* * Rules for the `ck-placeholder` are loaded before the rules for `ck-reset_all` in the base CKEditor 5 DLL build. * This fix overwrites the incorrectly set `position: static` from `ck-reset_all`. * See https://github.com/ckeditor/ckeditor5/issues/11418. */ .ck.ck-reset_all .ck-placeholder { position: relative; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Elements marked by the Renderer as hidden should be invisible in the editor. */ .ck.ck-editor__editable span[data-ck-unsafe-element] { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-find-result { background: var(--ck-color-highlight-background); color: var(--ck-color-text); } .ck-find-result_selected { background: hsl(29, 100%, 60%); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-find-and-replace-form { max-width: 100%; } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions { display: flex; /* The inputs area styles */ } .ck.ck-find-and-replace-form .ck-find-and-replace-form__inputs.ck-find-and-replace-form__inputs .ck-results-counter, .ck.ck-find-and-replace-form .ck-find-and-replace-form__actions.ck-find-and-replace-form__inputs .ck-results-counter { position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */ /* Styles should be prefixed with the `.ck-content` class. See https://github.com/ckeditor/ckeditor5/issues/6636 */ .ck-content .text-tiny { font-size: .7em; } .ck-content .text-small { font-size: .85em; } .ck-content .text-big { font-size: 1.4em; } .ck-content .text-huge { font-size: 1.8em; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-heading_heading1 .ck-button__label { font-size: 20px; } .ck.ck-heading_heading2 .ck-button__label { font-size: 17px; } .ck.ck-heading_heading3 .ck-button__label { font-size: 14px; } .ck[class*="ck-heading_heading"] { font-weight: bold; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-highlight-marker-yellow: hsl(60, 97%, 73%); --ck-highlight-marker-green: hsl(120, 93%, 68%); --ck-highlight-marker-pink: hsl(345, 96%, 73%); --ck-highlight-marker-blue: hsl(201, 97%, 72%); --ck-highlight-pen-red: hsl(0, 85%, 49%); --ck-highlight-pen-green: hsl(112, 100%, 27%); } .ck-content .marker-yellow { background-color: var(--ck-highlight-marker-yellow); } .ck-content .marker-green { background-color: var(--ck-highlight-marker-green); } .ck-content .marker-pink { background-color: var(--ck-highlight-marker-pink); } .ck-content .marker-blue { background-color: var(--ck-highlight-marker-blue); } .ck-content .pen-red { color: var(--ck-highlight-pen-red); /* Override default yellow background of `` from user agent stylesheet */ background-color: transparent; } .ck-content .pen-green { color: var(--ck-highlight-pen-green); /* Override default yellow background of `` from user agent stylesheet */ background-color: transparent; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-editor__editable .ck-horizontal-line { /* Necessary to render properly next to floated objects, e.g. side image case. */ display: flow-root; } .ck-content hr { margin: 15px 0; height: 4px; background: hsl(0, 0%, 87%); border: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* The feature container. */ .ck-widget.raw-html-embed { /* Give the embed some air. */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin: 0.9em auto; position: relative; display: flow-root; /* Give the html embed some minimal width in the content to prevent them from being "squashed" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5/issues/8331) */ min-width: 15em; /* Don't inherit the style, e.g. when in a block quote. */ font-style: normal; /* ----- Emebed label in the upper left corner ----------------------------------------------- */ } .ck-widget.raw-html-embed::before { position: absolute; /* Make sure the content does not cover the label. */ z-index: 1; } /* ----- Emebed internals --------------------------------------------------------------------- */ /* The switch mode button wrapper. */ .ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper { position: absolute; display: flex; flex-direction: column; } .ck-widget.raw-html-embed .raw-html-embed__preview { position: relative; overflow: hidden; display: flex; } .ck-widget.raw-html-embed .raw-html-embed__preview-content { width: 100%; position: relative; margin: auto; /* Gives spacing to the small renderable elements, so they always cover the placeholder. */ display: table; border-collapse: separate; border-spacing: 7px; } .ck-widget.raw-html-embed .raw-html-embed__preview-placeholder { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-html-object-embed-unfocused-outline-width: 1px; } .ck-widget.html-object-embed { font-size: var(--ck-font-size-base); background-color: var(--ck-color-base-foreground); padding: var(--ck-spacing-small); /* Leave space for label */ padding-top: calc(var(--ck-font-size-tiny) + var(--ck-spacing-large)); min-width: calc(76px + var(--ck-spacing-standard)); } .ck-widget.html-object-embed:not(.ck-widget_selected):not(:hover) { outline: var(--ck-html-object-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border); } .ck-widget.html-object-embed::before { font-weight: normal; font-style: normal; position: absolute; content: attr(data-html-object-embed-label); top: 0; left: var(--ck-spacing-standard); background: hsl(0deg 0% 60%); transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); padding: calc(var(--ck-spacing-tiny) + var(--ck-html-object-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny); border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); color: var(--ck-color-base-background); font-size: var(--ck-font-size-tiny); font-family: var(--ck-font-face); } /* Make space for label. */ .ck-widget.html-object-embed .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before { margin-left: 50px; } .ck-widget.html-object-embed .html-object-embed__content { /* Disable user interaction with embed content */ pointer-events: none; } div.ck-widget.html-object-embed { margin: 1em auto; } span.ck-widget.html-object-embed { display: inline-block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-image-caption-background: hsl(0, 0%, 97%); --ck-color-image-caption-text: hsl(0, 0%, 20%); --ck-color-image-caption-highlighted-background: hsl(52deg 100% 50%); } /* Content styles */ .ck-content .image > figcaption { display: table-caption; caption-side: bottom; word-break: break-word; color: var(--ck-color-image-caption-text); background-color: var(--ck-color-image-caption-background); padding: .6em; font-size: .75em; outline-offset: -1px; /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */ } @media (forced-colors: active) { .ck-content .image > figcaption { background-color: unset; color: unset; } } /* Editing styles */ @media (forced-colors: none) { .ck.ck-editor__editable .image > figcaption.image__caption_highlighted { animation: ck-image-caption-highlight .6s ease-out; } } @media (prefers-reduced-motion: reduce) { .ck.ck-editor__editable .image > figcaption.image__caption_highlighted { animation: none; } } @keyframes ck-image-caption-highlight { 0% { background-color: var(--ck-color-image-caption-highlighted-background); } 100% { background-color: var(--ck-color-image-caption-background); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-image-insert-url { width: 400px; padding: var(--ck-spacing-large) var(--ck-spacing-large) 0; } .ck.ck-image-insert-url .ck-image-insert-url__action-row { display: grid; grid-template-columns: repeat(2, 1fr); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Preserve aspect ratio of the resized image after introducing image height attribute. */ .ck-content img.image_resized { height: auto; } .ck-content .image.image_resized { max-width: 100%; /* The `
` element for resized images must not use `display:table` as browsers do not support `max-width` for it well. See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more. Fortunately, since we control the width, there is no risk that the image will look bad. */ display: block; box-sizing: border-box; } .ck-content .image.image_resized img { /* For resized images it is the `
` element that determines the image width. */ width: 100%; } .ck-content .image.image_resized > figcaption { /* The `
` element uses `display:block`, so `
` also has to. */ display: block; } /* The resized inline image nested in the table should respect its parent size. See https://github.com/ckeditor/ckeditor5/issues/9117. */ .ck.ck-editor__editable td .image-inline.image_resized img, .ck.ck-editor__editable th .image-inline.image_resized img { max-width: 100%; } [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon { margin-right: var(--ck-spacing-standard); } [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon { margin-left: var(--ck-spacing-standard); } .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label { width: 4em; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-image-custom-resize-form { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .ck.ck-image-custom-resize-form .ck-labeled-field-view { display: inline-block; } .ck.ck-image-custom-resize-form .ck-label { display: none; } @media screen and (max-width: 600px) { .ck.ck-image-custom-resize-form { flex-wrap: wrap; } .ck.ck-image-custom-resize-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-image-custom-resize-form .ck-button { flex-basis: 50%; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-image-style-spacing: 1.5em; --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2); } /* See: https://github.com/ckeditor/ckeditor5/issues/16317 */ /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback confirming successful application of the style if image width exceeds the editor's size. See https://github.com/ckeditor/ckeditor5/issues/9342 */ .ck-content .image.image-style-block-align-left, .ck-content .image.image-style-block-align-right { max-width: calc(100% - var(--ck-image-style-spacing)); } /* Allows displaying multiple floating images in the same line. See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */ .ck-content .image.image-style-align-left, .ck-content .image.image-style-align-right { clear: none; } .ck-content .image.image-style-side { float: right; margin-left: var(--ck-image-style-spacing); max-width: 50%; } .ck-content .image.image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); } .ck-content .image.image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); } .ck-content .image.image-style-block-align-right { margin-right: 0; margin-left: auto; } .ck-content .image.image-style-block-align-left { margin-left: 0; margin-right: auto; } .ck-content .image-style-align-center { margin-left: auto; margin-right: auto; } .ck-content .image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); } .ck-content .image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); } /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */ .ck-content p + .image.image-style-align-left, .ck-content p + .image.image-style-align-right, .ck-content p + .image.image-style-side { margin-top: 0; } .ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right { margin-top: var(--ck-inline-image-style-spacing); margin-bottom: var(--ck-inline-image-style-spacing); } .ck-content .image-inline.image-style-align-left { margin-right: var(--ck-inline-image-style-spacing); } .ck-content .image-inline.image-style-align-right { margin-left: var(--ck-inline-image-style-spacing); } /* The button should display as a regular drop-down if the action button is forced to fire the same action as the arrow button. */ .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) { background-color: var(--ck-color-button-on-background); } .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__action:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled)::after, .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)::after, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)::after { display: none; } .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) { background-color: var(--ck-color-button-on-hover-background); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-text-alternative-form { display: flex; flex-direction: row; flex-wrap: nowrap; } .ck.ck-text-alternative-form .ck-labeled-field-view { display: inline-block; } .ck.ck-text-alternative-form .ck-label { display: none; } @media screen and (max-width: 600px) { .ck.ck-text-alternative-form { flex-wrap: wrap; } .ck.ck-text-alternative-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-text-alternative-form .ck-button { flex-basis: 50%; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline { position: relative; } /* Upload progress bar. */ .ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar { position: absolute; top: 0; left: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-image-upload-complete-icon { display: block; position: absolute; /* * Smaller images should have the icon closer to the border. * Match the icon position with the linked image indicator brought by the link image feature. */ top: min(var(--ck-spacing-medium), 6%); right: min(var(--ck-spacing-medium), 6%); border-radius: 50%; z-index: 1; } .ck-image-upload-complete-icon::after { content: ""; position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-upload-placeholder-loader { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; } .ck .ck-upload-placeholder-loader::before { content: ''; position: relative; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .image { display: table; clear: both; text-align: center; /* Make sure there is some space between the content and the image. Center image by default. */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin: 0.9em auto; /* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */ min-width: 50px; } .ck-content .image img { /* Prevent unnecessary margins caused by line-height (see #44). */ display: block; /* Center the image if its width is smaller than the content's width. */ margin: 0 auto; /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */ max-width: 100%; /* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */ min-width: 100%; /* Keep proportions of the block image if the height is set and the image is wider than the editor width. See https://github.com/ckeditor/ckeditor5/issues/14542. */ height: auto; } .ck-content .image-inline { /* * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing). * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root. * This strange behavior does not happen with inline-flex. */ display: inline-flex; /* While being resized, don't allow the image to exceed the width of the editing root. */ max-width: 100%; /* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */ align-items: flex-start; /* When the picture is present it must act as a flex container to let the img resize properly */ } .ck-content .image-inline picture { display: flex; } /* When the picture is present, it must act like a resizable img. */ .ck-content .image-inline picture, .ck-content .image-inline img { /* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */ flex-grow: 1; flex-shrink: 1; /* Prevents overflowing the editing root boundaries when an inline image is very wide. */ max-width: 100%; } /* * Inhertit the content styles padding of the
in case the integration overrides `text-align: center` * of `.image` (e.g. to the left/right). This ensures the placeholder stays at the padding just like the native * caret does, and not at the edge of
. */ .ck.ck-editor__editable .image > figcaption.ck-placeholder::before { padding-left: inherit; padding-right: inherit; /* * Make sure the image caption placeholder doesn't overflow the placeholder area. * See https://github.com/ckeditor/ckeditor5/issues/9162. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * See https://github.com/ckeditor/ckeditor5/issues/15115. */ .ck.ck-editor__editable .image { z-index: 1; /* * Make sure the selected image always stays on top of its siblings. * See https://github.com/ckeditor/ckeditor5/issues/9108. */ } .ck.ck-editor__editable .image.ck-widget_selected { z-index: 2; } /* * See https://github.com/ckeditor/ckeditor5/issues/15115. */ .ck.ck-editor__editable .image-inline { z-index: 1; /* * Make sure the selected inline image always stays on top of its siblings. * See https://github.com/ckeditor/ckeditor5/issues/9108. */ } .ck.ck-editor__editable .image-inline.ck-widget_selected { z-index: 2; /* * Make sure the native browser selection style is not displayed. * Inline image widgets have their own styles for the selected state and * leaving this up to the browser is asking for a visual collision. */ } .ck.ck-editor__editable .image-inline.ck-widget_selected ::selection { display: none; } /* Keep proportions of the inline image if the height is set and the image is wider than the editor width. See https://github.com/ckeditor/ckeditor5/issues/14542. */ .ck.ck-editor__editable .image-inline img { height: auto; } /* The inline image nested in the table should have its original size if not resized. See https://github.com/ckeditor/ckeditor5/issues/9117. */ .ck.ck-editor__editable td .image-inline img, .ck.ck-editor__editable th .image-inline img { max-width: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-editor__editable img.image_placeholder { background-size: 100% 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-form { display: flex; align-items: flex-start; } .ck.ck-link-form .ck-label { display: none; } @media screen and (max-width: 600px) { .ck.ck-link-form { flex-wrap: wrap; } .ck.ck-link-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-link-form .ck-button { flex-basis: 50%; } } /* * Style link form differently when manual decorators are available. * See: https://github.com/ckeditor/ckeditor5-link/issues/186. */ .ck.ck-link-form_layout-vertical { display: block; /* * Whether the form is in the responsive mode or not, if there are decorator buttons * keep the top margin of action buttons medium. */ } .ck.ck-link-form_layout-vertical .ck-button.ck-button-save, .ck.ck-link-form_layout-vertical .ck-button.ck-button-cancel { margin-top: var(--ck-spacing-medium); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-link-actions { display: flex; flex-direction: row; flex-wrap: nowrap; } .ck.ck-link-actions .ck-link-actions__preview { display: inline-block; } .ck.ck-link-actions .ck-link-actions__preview .ck-button__label { overflow: hidden; } @media screen and (max-width: 600px) { .ck.ck-link-actions { flex-wrap: wrap; } .ck.ck-link-actions .ck-link-actions__preview { flex-basis: 100%; } .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) { flex-basis: 50%; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* Linked image indicator */ .ck.ck-editor__editable figure.image > a::after, .ck.ck-editor__editable a span.image-inline::after { display: block; position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-editor__editable .ck-list-bogus-paragraph { display: block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-list-styles-list { display: grid; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content ol { list-style-type: decimal; } .ck-content ol ol { list-style-type: lower-latin; } .ck-content ol ol ol { list-style-type: lower-roman; } .ck-content ol ol ol ol { list-style-type: upper-latin; } .ck-content ol ol ol ol ol { list-style-type: upper-roman; } .ck-content ul { list-style-type: disc; } .ck-content ul ul { list-style-type: circle; } .ck-content ul ul ul { list-style-type: square; } .ck-content ul ul ul ul { list-style-type: square; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-todo-list-checkmark-size: 16px; } /* * To-do list content styles. */ .ck-content .todo-list { list-style: none; } .ck-content .todo-list li { position: relative; margin-bottom: 5px; } .ck-content .todo-list li .todo-list { margin-top: 5px; } .ck-content .todo-list .todo-list__label > input { -webkit-appearance: none; display: inline-block; position: relative; width: var(--ck-todo-list-checkmark-size); height: var(--ck-todo-list-checkmark-size); vertical-align: middle; /* Needed on iOS */ border: 0; /* LTR styles */ left: -25px; margin-right: -15px; right: 0; margin-left: 0; /* RTL styles */ } .ck-content[dir=rtl] .todo-list .todo-list__label > input { left: 0; margin-right: 0; right: -25px; margin-left: -15px; } .ck-content .todo-list .todo-list__label > input::before { display: block; position: absolute; box-sizing: border-box; content: ''; width: 100%; height: 100%; border: 1px solid hsl(0, 0%, 20%); border-radius: 2px; transition: 250ms ease-in-out box-shadow; } @media (prefers-reduced-motion: reduce) { .ck-content .todo-list .todo-list__label > input::before { transition: none; } } .ck-content .todo-list .todo-list__label > input::after { display: block; position: absolute; box-sizing: content-box; pointer-events: none; content: ''; /* Calculate tick position, size and border-width proportional to the checkmark size. */ left: calc( var(--ck-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0; transform: rotate(45deg); } .ck-content .todo-list .todo-list__label > input[checked]::before { background: hsl(126, 64%, 41%); border-color: hsl(126, 64%, 41%); } .ck-content .todo-list .todo-list__label > input[checked]::after { border-color: hsl(0, 0%, 100%); } .ck-content .todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; } .ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] { position: absolute; } /* * To-do list editing view styles. */ /* * To-do list should be interactive only during the editing * (https://github.com/ckeditor/ckeditor5/issues/2090). */ .ck-editor__editable.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input { cursor: pointer; } .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before { box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1); } /* * Document Lists - editing view has an additional span around checkbox. */ .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input { -webkit-appearance: none; display: inline-block; position: relative; width: var(--ck-todo-list-checkmark-size); height: var(--ck-todo-list-checkmark-size); vertical-align: middle; /* Needed on iOS */ border: 0; /* LTR styles */ left: -25px; margin-right: -15px; right: 0; margin-left: 0; /* RTL styles */ } .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input { left: 0; margin-right: 0; right: -25px; margin-left: -15px; } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before { display: block; position: absolute; box-sizing: border-box; content: ''; width: 100%; height: 100%; border: 1px solid hsl(0, 0%, 20%); border-radius: 2px; transition: 250ms ease-in-out box-shadow; } @media (prefers-reduced-motion: reduce) { .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before { transition: none; } } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after { display: block; position: absolute; box-sizing: content-box; pointer-events: none; content: ''; /* Calculate tick position, size and border-width proportional to the checkmark size. */ left: calc( var(--ck-todo-list-checkmark-size) / 3 ); top: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); width: calc( var(--ck-todo-list-checkmark-size) / 5.3 ); height: calc( var(--ck-todo-list-checkmark-size) / 2.6 ); border-style: solid; border-color: transparent; border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0; transform: rotate(45deg); } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before { background: hsl(126, 64%, 41%); border-color: hsl(126, 64%, 41%); } .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after { border-color: hsl(0, 0%, 100%); } .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] { position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .media { /* Don't allow floated content overlap the media. https://github.com/ckeditor/ckeditor5-media-embed/issues/53 */ clear: both; /* Make sure there is some space between the content and the media. */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin: 0.9em 0; /* Make sure media is not overriden with Bootstrap default `flex` value. See: https://github.com/ckeditor/ckeditor5/issues/1373. */ display: block; /* Give the media some minimal width in the content to prevent them from being "squashed" in tight spaces, e.g. in table cells (#44) */ min-width: 15em; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-media__wrapper .ck-media__placeholder { display: flex; flex-direction: column; align-items: center; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url { /* Otherwise the URL will overflow when the content is very narrow. */ max-width: 100%; position: relative; } .ck-media__wrapper .ck-media__placeholder .ck-media__placeholder__url .ck-media__placeholder__url__text { overflow: hidden; display: block; } .ck-media__wrapper[data-oembed-url*="twitter.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="google.com/maps"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="goo.gl/maps"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="maps.google.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="maps.app.goo.gl"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="facebook.com"] .ck-media__placeholder__icon *, .ck-media__wrapper[data-oembed-url*="instagram.com"] .ck-media__placeholder__icon * { display: none; } /* Disable all mouse interaction as long as the editor is not read–only. https://github.com/ckeditor/ckeditor5-media-embed/issues/58 */ .ck-editor__editable:not(.ck-read-only) .ck-media__wrapper > *:not(.ck-media__placeholder) { pointer-events: none; } /* Disable all mouse interaction when the widget is not selected (e.g. to avoid opening links by accident). https://github.com/ckeditor/ckeditor5-media-embed/issues/18 */ .ck-editor__editable:not(.ck-read-only) .ck-widget:not(.ck-widget_selected) .ck-media__placeholder { pointer-events: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-vertical-form .ck-button::after { content: ""; width: 0; position: absolute; right: -1px; top: -1px; bottom: -1px; z-index: 1; } .ck-vertical-form .ck-button:focus::after { display: none; } @media screen and (max-width: 600px) { .ck.ck-responsive-form .ck-button::after { content: ""; width: 0; position: absolute; right: -1px; top: -1px; bottom: -1px; z-index: 1; } .ck.ck-responsive-form .ck-button:focus::after { display: none; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-media-form { display: flex; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; width: 400px; } .ck.ck-media-form .ck-labeled-field-view { display: inline-block; width: 100%; } .ck.ck-media-form .ck-label { display: none; } .ck.ck-media-form .ck-input { width: 100%; } @media screen and (max-width: 600px) { .ck.ck-media-form { flex-wrap: wrap; } .ck.ck-media-form .ck-labeled-field-view { flex-basis: 100%; } .ck.ck-media-form .ck-button { flex-basis: 50%; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-mention-list-max-height: 300px; } .ck.ck-mentions { max-height: var(--ck-mention-list-max-height); overflow-y: auto; /* Prevent unnecessary horizontal scrollbar in Safari https://github.com/ckeditor/ckeditor5-mention/issues/41 */ overflow-x: hidden; overscroll-behavior: contain; /* Prevent unnecessary vertical scrollbar in Safari https://github.com/ckeditor/ckeditor5-mention/issues/41 */ } .ck.ck-mentions > .ck-list__item { overflow: hidden; flex-shrink: 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-minimap-tracker-background: 208, 0%, 51%; --ck-color-minimap-iframe-outline: hsl(0deg 0% 75%); --ck-color-minimap-iframe-shadow: hsl(0deg 0% 0% / 11%); --ck-color-minimap-progress-background: hsl(0,0%,40%); } .ck.ck-minimap { position: absolute; -webkit-user-select: none; user-select: none; background: var(--ck-color-base-background); } .ck.ck-minimap, .ck.ck-minimap iframe { width: 100%; height: 100%; } .ck.ck-minimap iframe { border: 0; pointer-events: none; position: relative; outline: 1px solid var(--ck-color-minimap-iframe-outline); box-shadow: 0 2px 5px var(--ck-color-minimap-iframe-shadow); margin: 0; } .ck.ck-minimap .ck.ck-minimap__position-tracker { position: absolute; width: 100%; top: 0; background: hsla( var(--ck-color-minimap-tracker-background), .2 ); z-index: 1; transition: background 100ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .ck.ck-minimap .ck.ck-minimap__position-tracker { transition: none; } } .ck.ck-minimap .ck.ck-minimap__position-tracker:hover { background:hsla( var(--ck-color-minimap-tracker-background), .3 ); } .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging, .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover { background:hsla( var(--ck-color-minimap-tracker-background), .4 ); } .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging::after, .ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover::after { opacity: 1; } .ck.ck-minimap .ck.ck-minimap__position-tracker::after { content: attr(data-progress) "%"; position: absolute; top: 5px; right: 5px; background: var(--ck-color-minimap-progress-background); color: var(--ck-color-base-background); border: 1px solid var(--ck-color-base-background); padding: 2px 4px; font-size: 10px; border-radius: 3px; opacity: 0; transition: opacity 100ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .ck.ck-minimap .ck.ck-minimap__position-tracker::after { transition: none; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .page-break { position: relative; clear: both; padding: 5px 0; display: flex; align-items: center; justify-content: center; } .ck-content .page-break::after { content: ''; position: absolute; border-bottom: 2px dashed hsl(0, 0%, 77%); width: 100%; } .ck-content .page-break__label { position: relative; z-index: 1; padding: .3em .6em; display: block; text-transform: uppercase; border: 1px solid hsl(0, 0%, 77%); border-radius: 2px; font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif; font-size: 0.75em; font-weight: bold; color: hsl(0, 0%, 20%); background: hsl(0, 0%, 100%); box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15); /* Disable the possibility to select the label text by the user. */ -webkit-user-select: none; user-select: none; } /* Do not show the page break element inside the print preview window. */ @media print { .ck-content .page-break { padding: 0; } .ck-content .page-break::after { display: none; } /* * From time to time placing page-break directly after a block element with margin causes appending a new blank page in pagination mode. * Removing margin-bottom from the block element fixes that issue and the margin is not being moved to the next blank page. * * Keep this in sync with the pagination plugins. */ .ck-content *:has(+ .page-break) { margin-bottom: 0; } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-show-blocks-border-color: hsl(0, 0%, 46%); } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address { background-image: url("data:image/svg+xml;utf8,ADDRESS"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address { background-image: url("data:image/svg+xml;utf8,ADDRESS"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address { background-image: url("data:image/svg+xml;utf8,ADDRESS"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) address { background-image: url("data:image/svg+xml;utf8,ADDRESS"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside { background-image: url("data:image/svg+xml;utf8,ASIDE"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside { background-image: url("data:image/svg+xml;utf8,ASIDE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside { background-image: url("data:image/svg+xml;utf8,ASIDE"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) aside { background-image: url("data:image/svg+xml;utf8,ASIDE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote { background-image: url("data:image/svg+xml;utf8,BLOCKQUOTE"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote { background-image: url("data:image/svg+xml;utf8,BLOCKQUOTE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote { background-image: url("data:image/svg+xml;utf8,BLOCKQUOTE"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) blockquote { background-image: url("data:image/svg+xml;utf8,BLOCKQUOTE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details { background-image: url("data:image/svg+xml;utf8,DETAILS"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details { background-image: url("data:image/svg+xml;utf8,DETAILS"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details { background-image: url("data:image/svg+xml;utf8,DETAILS"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) details { background-image: url("data:image/svg+xml;utf8,DETAILS"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *) { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *) { background-image: url("data:image/svg+xml;utf8,DIV"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *) { background-image: url("data:image/svg+xml;utf8,DIV"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *):not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *) { background-image: url("data:image/svg+xml;utf8,DIV"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) div:not(.ck-widget):not(.ck-widget *) { background-image: url("data:image/svg+xml;utf8,DIV"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer { background-image: url("data:image/svg+xml;utf8,FOOTER"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer { background-image: url("data:image/svg+xml;utf8,FOOTER"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer { background-image: url("data:image/svg+xml;utf8,FOOTER"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) footer { background-image: url("data:image/svg+xml;utf8,FOOTER"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 { background-image: url("data:image/svg+xml;utf8,H1"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 { background-image: url("data:image/svg+xml;utf8,H1"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 { background-image: url("data:image/svg+xml;utf8,H1"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h1 { background-image: url("data:image/svg+xml;utf8,H1"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 { background-image: url("data:image/svg+xml;utf8,H2"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 { background-image: url("data:image/svg+xml;utf8,H2"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 { background-image: url("data:image/svg+xml;utf8,H2"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h2 { background-image: url("data:image/svg+xml;utf8,H2"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 { background-image: url("data:image/svg+xml;utf8,H3"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 { background-image: url("data:image/svg+xml;utf8,H3"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 { background-image: url("data:image/svg+xml;utf8,H3"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h3 { background-image: url("data:image/svg+xml;utf8,H3"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 { background-image: url("data:image/svg+xml;utf8,H4"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 { background-image: url("data:image/svg+xml;utf8,H4"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 { background-image: url("data:image/svg+xml;utf8,H4"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h4 { background-image: url("data:image/svg+xml;utf8,H4"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 { background-image: url("data:image/svg+xml;utf8,H5"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 { background-image: url("data:image/svg+xml;utf8,H5"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 { background-image: url("data:image/svg+xml;utf8,H5"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h5 { background-image: url("data:image/svg+xml;utf8,H5"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 { background-image: url("data:image/svg+xml;utf8,H6"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 { background-image: url("data:image/svg+xml;utf8,H6"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 { background-image: url("data:image/svg+xml;utf8,H6"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) h6 { background-image: url("data:image/svg+xml;utf8,H6"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header { background-image: url("data:image/svg+xml;utf8,HEADER"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header { background-image: url("data:image/svg+xml;utf8,HEADER"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header { background-image: url("data:image/svg+xml;utf8,HEADER"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) header { background-image: url("data:image/svg+xml;utf8,HEADER"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main { background-image: url("data:image/svg+xml;utf8,MAIN"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main { background-image: url("data:image/svg+xml;utf8,MAIN"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main { background-image: url("data:image/svg+xml;utf8,MAIN"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) main { background-image: url("data:image/svg+xml;utf8,MAIN"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav { background-image: url("data:image/svg+xml;utf8,NAV"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav { background-image: url("data:image/svg+xml;utf8,NAV"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav { background-image: url("data:image/svg+xml;utf8,NAV"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) nav { background-image: url("data:image/svg+xml;utf8,NAV"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre { background-image: url("data:image/svg+xml;utf8,PRE"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre { background-image: url("data:image/svg+xml;utf8,PRE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre { background-image: url("data:image/svg+xml;utf8,PRE"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) pre { background-image: url("data:image/svg+xml;utf8,PRE"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol { background-image: url("data:image/svg+xml;utf8,OL"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol { background-image: url("data:image/svg+xml;utf8,OL"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol { background-image: url("data:image/svg+xml;utf8,OL"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ol { background-image: url("data:image/svg+xml;utf8,OL"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul { background-image: url("data:image/svg+xml;utf8,UL"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul { background-image: url("data:image/svg+xml;utf8,UL"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul { background-image: url("data:image/svg+xml;utf8,UL"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) ul { background-image: url("data:image/svg+xml;utf8,UL"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p { background-image: url("data:image/svg+xml;utf8,P"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p { background-image: url("data:image/svg+xml;utf8,P"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p { background-image: url("data:image/svg+xml;utf8,P"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) p { background-image: url("data:image/svg+xml;utf8,P"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section { background-image: url("data:image/svg+xml;utf8,SECTION"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section { background-image: url("data:image/svg+xml;utf8,SECTION"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section { background-image: url("data:image/svg+xml;utf8,SECTION"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) section { background-image: url("data:image/svg+xml;utf8,SECTION"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption { background-repeat: no-repeat; padding-top: 15px; /* Fix for Multi-root editor https://github.com/ckeditor/ckeditor5/issues/15969 */ } [dir=ltr] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption { background-image: url("data:image/svg+xml;utf8,FIGCAPTION"); background-position: 1px 1px; } [dir=rtl] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption { background-image: url("data:image/svg+xml;utf8,FIGCAPTION"); background-position: calc(100% - 1px) 1px; } .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption:not(.ck-widget_selected):not(.ck-widget:hover) { outline: 1px dashed var(--ck-show-blocks-border-color); } [dir="ltr"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption { background-image: url("data:image/svg+xml;utf8,FIGCAPTION"); background-position: 1px 1px; } [dir="rtl"] .ck.ck-editor__editable.ck-editor__editable_inline.ck-show-blocks:not(.ck-widget) :where(figure.image, figure.table) figcaption { background-image: url("data:image/svg+xml;utf8,FIGCAPTION"); background-position: calc(100% - 1px) 1px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Implements rounded corner interface for .ck-rounded-corners class. * * @see $ck-border-radius */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A visual style of focused element's border. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A helper to combine multiple shadows. */ /** * Gives an element a drop shadow so it looks like a floating panel. */ .ck-source-editing-area { position: relative; overflow: hidden; } .ck-source-editing-area::after, .ck-source-editing-area textarea { padding: var(--ck-spacing-large); margin: 0; border: 1px solid transparent; line-height: var(--ck-line-height-base); font-size: var(--ck-font-size-normal); font-family: monospace; white-space: pre-wrap; } .ck-source-editing-area::after { content: attr(data-value) " "; visibility: hidden; display: block; } .ck-source-editing-area textarea { position: absolute; width: 100%; height: 100%; resize: none; outline: none; overflow: hidden; box-sizing: border-box; border-color: var(--ck-color-base-border); border-radius: 0; } .ck-rounded-corners .ck-source-editing-area textarea, .ck-source-editing-area textarea.ck-rounded-corners { border-radius: var(--ck-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } .ck-source-editing-area textarea:not([readonly]):focus { /* Disable native outline. */ outline: none; border: var(--ck-focus-ring); box-shadow: var(--ck-inner-shadow), 0 0; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-character-grid { max-width: 100%; } .ck.ck-character-grid .ck-character-grid__tiles { display: grid; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-character-info { display: flex; justify-content: space-between; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Note: This file should contain the wireframe styles only. But since there are no such styles, * it acts as a message to the builder telling that it should look for the corresponding styles * **in the theme** when compiling the editor. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-special-characters > .ck-dialog__content > div { width: 350px; max-width: 100%; height: 100%; display: grid; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories { grid-area: 1 / 1 / 2 / 2; padding: var(--ck-spacing-medium) var(--ck-spacing-large); } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view { padding-top: var(--ck-spacing-standard); width: 100%; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status { background: var(--ck-color-base-error); color: var(--ck-color-base-background); padding: var(--ck-spacing-small) var(--ck-spacing-medium); min-width: var(--ck-table-properties-min-error-width); text-align: center; animation: ck-table-form-labeled-view-status-appear .15s ease both; /* The arrow pointing towards the field. */ } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status::after { border-color: transparent transparent var(--ck-color-base-error) transparent; border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size); border-style: solid; } @media (prefers-reduced-motion: reduce) { .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck.ck-labeled-field-view__status { animation: none; } } /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */ .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status { display: none; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories > .ck-labeled-field-view > .ck-label { font-size: var(--ck-font-size-tiny); text-align: center; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown { display: block; width: 100%; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown > button:not(:focus) { border: 1px solid var(--ck-color-base-border); } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-categories .ck-dropdown > button > span { width: 100%; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-grid { grid-area: 2 / 1 / 3 / 2; max-height: 200px; } .ck.ck-special-characters > .ck-dialog__content > div > .ck-character-info { grid-area: 3 / 1 / 4 / 2; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-style-panel-columns: 3; } .ck.ck-style-panel .ck-style-grid { display: grid; grid-template-columns: repeat(var(--ck-style-panel-columns),auto); justify-content: start; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button { display: flex; justify-content: space-between; flex-direction: column; } .ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview { display: flex; align-content: center; justify-content: flex-start; align-items: center; flex-grow: 1; flex-basis: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck-content .table { /* Give the table widget some air and center it horizontally */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ margin: 0.9em auto; display: table; } .ck-content .table table { /* The table cells should have slight borders */ border-collapse: collapse; border-spacing: 0; /* Table width and height are set on the parent
. Make sure the table inside stretches to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */ width: 100%; height: 100%; /* The outer border of the table should be slightly darker than the inner lines. Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */ border: 1px double hsl(0, 0%, 70%); } .ck-content .table table td, .ck-content .table table th { min-width: 2em; padding: .4em; /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here. However, the border is a content style, so it should use .ck-content (so it works outside the editor). Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */ border: 1px solid hsl(0, 0%, 75%); } .ck-content .table table th { font-weight: bold; background: hsla(0, 0%, 0%, 5%); } /** * Expanding the table to the full height of the parent container is necessary because tables * are rendered inside
elements, which is kinda buggy in table height calculation. * While setting `height: 100%` fixes the issue in the editing mode described here: * https://github.com/ckeditor/ckeditor5/issues/6186 * * it's causing another issue with the table height in the print preview mode here: * https://github.com/ckeditor/ckeditor5/issues/16856 * * For now, resetting the height to `initial` in the print mode works as a workaround. */ @media print { .ck-content .table table { height: initial; } } /* Text alignment of the table header should match the editor settings and override the native browser styling, when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */ .ck-content[dir="rtl"] .table th { text-align: right; } .ck-content[dir="ltr"] .table th { text-align: left; } .ck-editor__editable .ck-table-bogus-paragraph { /* * Use display:inline-block to force Chrome/Safari to limit text mutations to this element. * See https://github.com/ckeditor/ckeditor5/issues/6062. */ display: inline-block; /* * Inline HTML elements nested in the span should always be dimensioned in relation to the whole cell width. * See https://github.com/ckeditor/ckeditor5/issues/9117. */ width: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-insert-table-dropdown__grid { display: flex; flex-direction: row; flex-wrap: wrap; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; /* Ignore labels that work as fieldset legends */ } .ck.ck-form__row > *:not(.ck-label) { flex-grow: 1; } .ck.ck-form__row.ck-table-form__action-row .ck-button-save, .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel { justify-content: center; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row { flex-wrap: wrap; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type { /* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */ flex-grow: 0.57; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type { /* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */ flex-grow: 0.43; } .ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button { flex-grow: 1; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-input-color { width: 100%; display: flex; flex-direction: row-reverse; } .ck.ck-input-color > input.ck.ck-input-text { min-width: auto; flex-grow: 1; } .ck.ck-input-color > div.ck.ck-dropdown { min-width: auto; /* This dropdown has no arrow but a color preview instead. */ } .ck.ck-input-color > div.ck.ck-dropdown > .ck-input-color__button .ck-dropdown__arrow { display: none; } .ck.ck-input-color .ck.ck-input-color__button { /* Resolving issue with misaligned buttons on Safari (see #10589) */ display: flex; } .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview { position: relative; overflow: hidden; } .ck.ck-input-color .ck.ck-input-color__button .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator { position: absolute; display: block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-form .ck-form__row.ck-table-form__border-row { flex-wrap: wrap; } .ck.ck-table-form .ck-form__row.ck-table-form__background-row { flex-wrap: wrap; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row { flex-wrap: wrap; align-items: center; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view { display: flex; flex-direction: column-reverse; align-items: center; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-labeled-field-view .ck.ck-dropdown { flex-grow: 0; } .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator { flex-grow: 0; } .ck.ck-table-form .ck.ck-labeled-field-view { /* Allow absolute positioning of the status (error) balloons. */ position: relative; } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status { position: absolute; left: 50%; bottom: calc( -1 * var(--ck-table-properties-error-arrow-size) ); transform: translate(-50%,100%); /* Make sure the balloon status stays on top of other form elements. */ z-index: 1; /* The arrow pointing towards the field. */ } .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status::after { content: ""; position: absolute; top: calc( -1 * var(--ck-table-properties-error-arrow-size) ); left: 50%; transform: translateX( -50% ); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row { flex-wrap: wrap; flex-basis: 0; align-content: baseline; } .ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items { flex-wrap: nowrap; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-selector-caption-background: hsl(0, 0%, 97%); --ck-color-selector-caption-text: hsl(0, 0%, 20%); --ck-color-selector-caption-highlighted-background: hsl(52deg 100% 50%); } /* Content styles */ .ck-content .table > figcaption { display: table-caption; caption-side: top; word-break: break-word; text-align: center; color: var(--ck-color-selector-caption-text); background-color: var(--ck-color-selector-caption-background); padding: .6em; font-size: .75em; outline-offset: -1px; /* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */ } @media (forced-colors: active) { .ck-content .table > figcaption { background-color: unset; color: unset; } } /* Editing styles */ @media (forced-colors: none) { .ck.ck-editor__editable .table > figcaption.table__caption_highlighted { animation: ck-table-caption-highlight .6s ease-out; } } .ck.ck-editor__editable .table > figcaption.ck-placeholder::before { padding-left: inherit; padding-right: inherit; /* * Make sure the table caption placeholder doesn't overflow the placeholder area. * See https://github.com/ckeditor/ckeditor5/issues/9162. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes ck-table-caption-highlight { 0% { background-color: var(--ck-color-selector-caption-highlighted-background); } 100% { background-color: var(--ck-color-selector-caption-background); } } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-selector-column-resizer-hover: var(--ck-color-base-active); --ck-table-column-resizer-width: 7px; /* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border. The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */ --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px); } .ck-content .table .ck-table-resized { table-layout: fixed; } .ck-content .table table { overflow: hidden; } .ck-content .table td, .ck-content .table th { /* To prevent text overflowing beyond its cell when columns are resized by resize handler (https://github.com/ckeditor/ckeditor5/pull/14379#issuecomment-1589460978). */ overflow-wrap: break-word; position: relative; } .ck.ck-editor__editable .table .ck-table-column-resizer { position: absolute; top: 0; bottom: 0; right: var(--ck-table-column-resizer-position-offset); width: var(--ck-table-column-resizer-width); cursor: col-resize; -webkit-user-select: none; user-select: none; z-index: var(--ck-z-default); } .ck.ck-editor__editable.ck-column-resize_disabled .table .ck-table-column-resizer { display: none; } /* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again, all resizers must be hidden while the table is dragged. */ .ck.ck-editor__editable .table[draggable] .ck-table-column-resizer { display: none; } .ck.ck-editor__editable .table .ck-table-column-resizer:hover, .ck.ck-editor__editable .table .ck-table-column-resizer__active { background-color: var(--ck-color-selector-column-resizer-hover); opacity: 0.25; /* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view, it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally unrealistic height for a single table. */ top: -999999px; bottom: -999999px; } .ck.ck-editor__editable[dir=rtl] .table .ck-table-column-resizer { left: var(--ck-table-column-resizer-position-offset); right: unset; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class which hides an element in DOM. */ .ck-hidden { /* Override selector specificity. Otherwise, all elements with some display style defined will override this one, which is not a desired result. */ display: none !important; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-z-default: 1; --ck-z-panel: calc( var(--ck-z-default) + 999 ); --ck-z-dialog: 9999; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * A class that disables all transitions of the element and its children. */ .ck-transitions-disabled, .ck-transitions-disabled * { transition: none !important; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-powered-by-line-height: 10px; --ck-powered-by-padding-vertical: 2px; --ck-powered-by-padding-horizontal: 4px; --ck-powered-by-text-color: hsl(0, 0%, 31%); --ck-powered-by-border-radius: var(--ck-border-radius); --ck-powered-by-background: hsl(0, 0%, 100%); --ck-powered-by-border-color: var(--ck-color-focus-border); } .ck.ck-balloon-panel.ck-powered-by-balloon { --ck-border-radius: var(--ck-powered-by-border-radius); box-shadow: none; background: var(--ck-powered-by-background); min-height: unset; z-index: calc( var(--ck-z-panel) - 1 ); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by { line-height: var(--ck-powered-by-line-height); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by a { cursor: pointer; display: flex; align-items: center; opacity: .66; filter: grayscale(80%); line-height: var(--ck-powered-by-line-height); padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label { font-size: 7.5px; letter-spacing: -.2px; padding-left: 2px; text-transform: uppercase; font-weight: bold; margin-right: 4px; cursor: pointer; line-height: normal; color: var(--ck-powered-by-text-color); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon { display: block; cursor: pointer; } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by:hover a { filter: grayscale(0%); opacity: 1; } .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_inside"] { border-color: transparent; } .ck.ck-balloon-panel.ck-powered-by-balloon[class*="position_border"] { border: var(--ck-focus-ring); border-color: var(--ck-powered-by-border-color); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button, a.ck.ck-button { -webkit-user-select: none; user-select: none; position: relative; display: inline-flex; align-items: center; } [dir="ltr"] .ck.ck-button, [dir="ltr"] a.ck.ck-button { justify-content: left; } [dir="rtl"] .ck.ck-button, [dir="rtl"] a.ck.ck-button { justify-content: right; } .ck.ck-button .ck-button__label, a.ck.ck-button .ck-button__label { display: none; } .ck.ck-button.ck-button_with-text .ck-button__label, a.ck.ck-button.ck-button_with-text .ck-button__label { display: inline-block; } /* Center the icon horizontally in a button without text. */ .ck.ck-button:not(.ck-button_with-text), a.ck.ck-button:not(.ck-button_with-text) { justify-content: center; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-button.ck-switchbutton .ck-button__toggle { display: block; } .ck.ck-button.ck-switchbutton .ck-button__toggle .ck-button__toggle__inner { display: block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-list-item-button { min-height: unset; width: 100%; border-radius: 0; } [dir="ltr"] .ck.ck-list-item-button { text-align: left; } [dir="rtl"] .ck.ck-list-item-button { text-align: right; } [dir="ltr"] .ck.ck-list-item-button.ck-list-item-button_toggleable { padding-left: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-list-item-button.ck-list-item-button_toggleable { padding-right: var(--ck-spacing-small); } .ck.ck-list-item-button .ck-list-item-button__check-holder { display: inline-flex; width: .9em; height: .9em; } [dir="ltr"] .ck.ck-list-item-button .ck-list-item-button__check-holder { margin-right: var(--ck-spacing-small); } [dir="rtl"] .ck.ck-list-item-button .ck-list-item-button__check-holder { margin-left: var(--ck-spacing-small); } .ck.ck-list-item-button .ck-list-item-button__check-icon { height: 100%; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-color-grid { display: grid; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .color-picker-hex-input { width: max-content; } .color-picker-hex-input .ck.ck-input { min-width: unset; } .ck.ck-color-picker__row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin: var(--ck-spacing-large) 0 0; width: unset; } .ck.ck-color-picker__row .ck.ck-labeled-field-view { padding-top: unset; } .ck.ck-color-picker__row .ck.ck-input-text { width: unset; } .ck.ck-color-picker__row .ck-color-picker__hash-view { padding-top: var(--ck-spacing-tiny); padding-right: var(--ck-spacing-medium); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* View fragment with color grids. */ .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { display: flex; align-items: center; } [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__remove-color, [dir="rtl"] .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker { justify-content: flex-start; } /* View fragment with a color picker. */ .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar { display: flex; flex-direction: row; justify-content: space-around; } .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-save, .ck.ck-color-selector .ck-color-picker-fragment .ck.ck-color-selector_action-bar .ck-button-cancel { flex: 1 } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dialog .ck.ck-dialog__actions { display: flex; justify-content: flex-end; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dialog-overlay { -webkit-user-select: none; user-select: none; overscroll-behavior: none; position: fixed; bottom: 0; left: 0; right: 0; top: 0; } .ck.ck-dialog-overlay.ck-dialog-overlay__transparent { pointer-events: none; animation: none; background: none; } .ck.ck-dialog { overscroll-behavior: none; width: fit-content; position: absolute; } .ck.ck-dialog .ck.ck-form__header { flex-shrink: 0; } .ck.ck-dialog .ck.ck-form__header .ck-form__header__label { cursor: grab; } .ck.ck-dialog-overlay.ck-dialog-overlay__transparent .ck.ck-dialog { pointer-events: all; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-dropdown-max-width: 75vw; } .ck.ck-dropdown { display: inline-block; position: relative; } .ck.ck-dropdown .ck-dropdown__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* Dropdown button should span horizontally, e.g. in vertical toolbars */ .ck.ck-dropdown .ck-button.ck-dropdown__button { width: 100%; } .ck.ck-dropdown .ck-dropdown__panel { display: none; z-index: var(--ck-z-panel); max-width: var(--ck-dropdown-max-width); position: absolute; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel-visible { display: inline-block; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme { bottom: 100%; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s { /* * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays. * See https://github.com/ckeditor/ckeditor5/issues/1053. */ top: 100%; bottom: auto; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se { left: 0px; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw { right: 0px; } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_n { /* Positioning panels relative to the center of the button */ left: 50%; transform: translateX(-50%); } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nmw, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw { /* Positioning panels relative to the middle-west of the button */ left: 75%; transform: translateX(-75%); } .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_nme, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme { /* Positioning panels relative to the middle-east of the button */ left: 25%; transform: translateX(-25%); } /* * Toolbar dropdown panels should be always above the UI (eg. other dropdown panels) from the editor's content. * See https://github.com/ckeditor/ckeditor5/issues/7874 */ .ck.ck-toolbar .ck-dropdown__panel { z-index: calc( var(--ck-z-panel) + 1 ); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-splitbutton { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; } .ck.ck-splitbutton .ck-splitbutton__action:focus { z-index: calc(var(--ck-z-default) + 1); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-toolbar-dropdown-max-width: 60vw; } .ck.ck-toolbar-dropdown > .ck-dropdown__panel { /* https://github.com/ckeditor/ckeditor5/issues/5586 */ width: max-content; max-width: var(--ck-toolbar-dropdown-max-width); } .ck.ck-toolbar-dropdown > .ck-dropdown__panel .ck-button:focus { z-index: calc(var(--ck-z-default) + 1); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dropdown-menu__nested-menu__panel { position: absolute; max-height: 314px; /* With the default settings, this is equal to 10 menu items. */ overflow-y: auto; z-index: calc(var(--ck-z-panel) + 1); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-dropdown-menu-list__nested-menu { display: block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-aria-live-announcer { position: absolute; left: -10000px; top: -10000px; } .ck.ck-aria-live-region-list { list-style-type: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-form__header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .ck.ck-form__header h2.ck-form__header__label { flex-grow: 1; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-icon { vertical-align: middle; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-label { display: block; } .ck.ck-voice-label { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper { display: flex; position: relative; } .ck.ck-labeled-field-view .ck.ck-label { display: block; position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-list { -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; } .ck.ck-list .ck-list__item, .ck.ck-list .ck-list__separator { display: block; } /* Make sure that whatever child of the list item gets focus, it remains on the top. Thanks to that, styles like box-shadow, outline, etc. are not masked by adjacent list items. */ .ck.ck-list .ck-list__item > *:focus { position: relative; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { /* Make sure the balloon arrow does not float over its children. */ --ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3); } .ck.ck-balloon-panel { display: none; position: absolute; z-index: var(--ck-z-panel); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before, .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { content: ""; position: absolute; } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel.ck-balloon-panel_with-arrow::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel[class*="arrow_n"]::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel[class*="arrow_n"]::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel[class*="arrow_s"]::before { z-index: var(--ck-balloon-panel-arrow-z-index); } .ck.ck-balloon-panel[class*="arrow_s"]::after { z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1); } .ck.ck-balloon-panel.ck-balloon-panel_visible { display: block; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-balloon-rotator__navigation { display: flex; align-items: center; justify-content: center; } /* Buttons inside a toolbar should be centered when rotator bar is wider. * See: https://github.com/ckeditor/ckeditor5-ui/issues/495 */ .ck .ck-balloon-rotator__content .ck-toolbar { justify-content: center; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-fake-panel { position: absolute; /* Fake panels should be placed under main balloon content. */ z-index: calc(var(--ck-z-panel) - 1); } .ck .ck-fake-panel div { position: absolute; } .ck .ck-fake-panel div:nth-child( 1 ) { z-index: 2; } .ck .ck-fake-panel div:nth-child( 2 ) { z-index: 1; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-sticky-panel .ck-sticky-panel__content_sticky { z-index: var(--ck-z-panel); /* #315 */ position: fixed; top: 0; } .ck.ck-sticky-panel .ck-sticky-panel__content_sticky_bottom-limit { top: auto; position: absolute; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-autocomplete { position: relative; } .ck.ck-autocomplete > .ck-search__results { position: absolute; z-index: var(--ck-z-panel); } .ck.ck-autocomplete > .ck-search__results.ck-search__results_n { bottom: 100%; } .ck.ck-autocomplete > .ck-search__results.ck-search__results_s { top: 100%; bottom: auto; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { position: absolute; top: 50%; transform: translateY(-50%); } [dir="ltr"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { left: var(--ck-spacing-medium); } [dir="rtl"] .ck.ck-search > .ck-labeled-field-view > .ck-labeled-field-view__input-wrapper > .ck-icon { right: var(--ck-spacing-medium); } .ck.ck-search > .ck-labeled-field-view .ck-search__reset { position: absolute; top: 50%; transform: translateY(-50%); } .ck.ck-search > .ck-search__results > .ck-search__info > span:first-child { display: block; } /* Hide the filtered view when nothing was found */ .ck.ck-search > .ck-search__results > .ck-search__info:not(.ck-hidden) ~ * { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-highlighted-text mark { background: var(--ck-color-highlight-background); vertical-align: initial; font-weight: inherit; line-height: inherit; font-size: inherit; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-balloon-panel.ck-tooltip { -webkit-user-select: none; user-select: none; z-index: calc( var(--ck-z-dialog) + 100 ); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-toolbar-spinner-size: 18px; } .ck.ck-spinner-container { display: block; position: relative; } .ck.ck-spinner { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); z-index: 1; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /** * Makes element unselectable. */ .ck.ck-toolbar { -webkit-user-select: none; user-select: none; display: flex; flex-flow: row nowrap; align-items: center; } .ck.ck-toolbar > .ck-toolbar__items { display: flex; flex-flow: row wrap; align-items: center; flex-grow: 1; } .ck.ck-toolbar .ck.ck-toolbar__separator { display: inline-block; /* * A leading or trailing separator makes no sense (separates from nothing on one side). * For instance, it can happen when toolbar items (also separators) are getting grouped one by one and * moved to another toolbar in the dropdown. */ } .ck.ck-toolbar .ck.ck-toolbar__separator:first-child, .ck.ck-toolbar .ck.ck-toolbar__separator:last-child { display: none; } .ck.ck-toolbar .ck-toolbar__line-break { flex-basis: 100%; } .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items { flex-wrap: nowrap; } .ck.ck-toolbar.ck-toolbar_vertical > .ck-toolbar__items { flex-direction: column; } .ck.ck-toolbar.ck-toolbar_floating > .ck-toolbar__items { flex-wrap: nowrap; } .ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck-dropdown__button .ck-dropdown__arrow { display: none; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-block-toolbar-button { position: absolute; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-menu-bar__menu > .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow { pointer-events: none; z-index: var(--ck-z-default); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-menu-bar-menu-max-width: 75vw; --ck-menu-bar-nested-menu-horizontal-offset: 5px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel { z-index: var(--ck-z-panel); max-width: var(--ck-menu-bar-menu-max-width); position: absolute; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw { bottom: 100%; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw { top: 100%; bottom: auto; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ne, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_se { left: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_nw, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_sw { right: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en { left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) ); } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_es { top: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_en { bottom: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws, .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn { right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) ); } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_ws { top: 0px; } .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel.ck-menu-bar__menu__panel_position_wn { bottom: 0px; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck.ck-menu-bar__menu { display: block; position: relative; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-resizer: var(--ck-color-focus-border); --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%); --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%); --ck-resizer-border-radius: var(--ck-border-radius); --ck-resizer-tooltip-offset: 10px; --ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px); } .ck .ck-widget { /* This is neccessary for type around UI to be positioned properly. */ position: relative; } .ck .ck-widget.ck-widget_with-selection-handle { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { position: absolute; } .ck .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle .ck-icon { /* Make sure the icon in not a subject to font-size or line-height to avoid unnecessary spacing around it. */ display: block; } /* Show the selection handle on mouse hover over the widget, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle:hover > .ck-widget__selection-handle { visibility: visible; } /* Show the selection handle when the widget is selected, but not for nested widgets. */ .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle { visibility: visible; } .ck .ck-size-view { background: var(--ck-color-resizer-tooltip-background); color: var(--ck-color-resizer-tooltip-text); border: 1px solid var(--ck-color-resizer-tooltip-text); border-radius: var(--ck-resizer-border-radius); font-size: var(--ck-font-size-tiny); display: block; padding: 0 var(--ck-spacing-small); height: var(--ck-resizer-tooltip-height); line-height: var(--ck-resizer-tooltip-height); } .ck .ck-size-view.ck-orientation-top-left, .ck .ck-size-view.ck-orientation-top-right, .ck .ck-size-view.ck-orientation-bottom-right, .ck .ck-size-view.ck-orientation-bottom-left, .ck .ck-size-view.ck-orientation-above-center { position: absolute; } .ck .ck-size-view.ck-orientation-top-left { top: var(--ck-resizer-tooltip-offset); left: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-top-right { top: var(--ck-resizer-tooltip-offset); right: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-bottom-right { bottom: var(--ck-resizer-tooltip-offset); right: var(--ck-resizer-tooltip-offset); } .ck .ck-size-view.ck-orientation-bottom-left { bottom: var(--ck-resizer-tooltip-offset); left: var(--ck-resizer-tooltip-offset); } /* Class applied if the widget is too small to contain the size label */ .ck .ck-size-view.ck-orientation-above-center { top: calc(var(--ck-resizer-tooltip-height) * -1); left: 50%; transform: translate(-50%); } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-widget_with-resizer { /* Make the widget wrapper a relative positioning container for the drag handle. */ position: relative; } .ck .ck-widget__resizer { display: none; position: absolute; /* The wrapper itself should not interfere with the pointer device, only the handles should. */ pointer-events: none; left: 0; top: 0; } .ck-focused .ck-widget_with-resizer.ck-widget_selected > .ck-widget__resizer { display: block; } .ck .ck-widget__resizer__handle { position: absolute; /* Resizers are the only UI elements that should interfere with a pointer device. */ pointer-events: all; } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-left, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-right { cursor: nwse-resize; } .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-top-right, .ck .ck-widget__resizer__handle.ck-widget__resizer__handle-bottom-left { cursor: nesw-resize; } /* * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* * Styles of the type around buttons */ .ck .ck-widget .ck-widget__type-around__button { display: block; position: absolute; overflow: hidden; z-index: var(--ck-z-default); } .ck .ck-widget .ck-widget__type-around__button svg { position: absolute; top: 50%; left: 50%; z-index: calc(var(--ck-z-default) + 2); } .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_before { /* Place it in the middle of the outline */ top: calc(-0.5 * var(--ck-widget-outline-thickness)); left: min(10%, 30px); transform: translateY(-50%); } .ck .ck-widget .ck-widget__type-around__button.ck-widget__type-around__button_after { /* Place it in the middle of the outline */ bottom: calc(-0.5 * var(--ck-widget-outline-thickness)); right: min(10%, 30px); transform: translateY(50%); } /* * Styles for the buttons when: * - the widget is selected, * - or the button is being hovered (regardless of the widget state). */ .ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button::after, .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__button:hover::after { content: ""; display: block; position: absolute; top: 1px; left: 1px; z-index: calc(var(--ck-z-default) + 1); } /* * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard. */ .ck .ck-widget > .ck-widget__type-around > .ck-widget__type-around__fake-caret { display: none; position: absolute; left: 0; right: 0; } /* * When the widget is hovered the "fake caret" would normally be narrower than the * extra outline displayed around the widget. Let's extend the "fake caret" to match * the full width of the widget. */ .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__fake-caret { left: calc( -1 * var(--ck-widget-outline-thickness) ); right: calc( -1 * var(--ck-widget-outline-thickness) ); } /* * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation). */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret { top: calc( -1 * var(--ck-widget-outline-thickness) - 1px ); display: block; } /* * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation). */ .ck .ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret { bottom: calc( -1 * var(--ck-widget-outline-thickness) - 1px ); display: block; } /* * Integration with the read-only mode of the editor. */ .ck.ck-editor__editable.ck-read-only .ck-widget__type-around { display: none; } /* * Integration with the restricted editing mode (feature) of the editor. */ .ck.ck-editor__editable.ck-restricted-editing_mode_restricted .ck-widget__type-around { display: none; } /* * Integration with the #isEnabled property of the WidgetTypeAround plugin. */ .ck.ck-editor__editable.ck-widget__type-around_disabled .ck-widget__type-around { display: none; } @charset "UTF-8"; .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before { border-color: #ccc; border-style: solid; border-width: 3px 3px 0 0; content: ""; display: block; height: 9px; position: absolute; top: 6px; width: 9px; } .react-datepicker-wrapper { display: inline-block; padding: 0; border: 0; } .react-datepicker { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-size: 0.8rem; background-color: #fff; color: #000; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; line-height: initial; } .react-datepicker--time-only .react-datepicker__time-container { border-left: 0; } .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker-popper { z-index: 1; line-height: 0; } .react-datepicker-popper .react-datepicker__triangle { stroke: #aeaeae; } .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { fill: #f0f0f0; color: #f0f0f0; } .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle { fill: #fff; color: #fff; } .react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; padding: 8px 0; position: relative; } .react-datepicker__header--time { padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } .react-datepicker__header--time:not(.react-datepicker__header--time--only) { border-top-left-radius: 0; } .react-datepicker__header:not(.react-datepicker__header--has-time-select) { border-top-right-radius: 0.3rem; } .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll { display: inline-block; margin: 0 15px; } .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { margin-top: 0; color: #000; font-weight: bold; font-size: 0.944rem; } h2.react-datepicker__current-month { padding: 0; margin: 0; } .react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .react-datepicker__navigation { align-items: center; background: none; display: flex; justify-content: center; text-align: center; cursor: pointer; position: absolute; top: 2px; padding: 0; border: none; z-index: 1; height: 32px; width: 32px; text-indent: -999em; overflow: hidden; } .react-datepicker__navigation--previous { left: 2px; } .react-datepicker__navigation--next { right: 2px; } .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { right: 85px; } .react-datepicker__navigation--years { position: relative; top: 0; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__navigation--years-previous { top: 4px; } .react-datepicker__navigation--years-upcoming { top: -4px; } .react-datepicker__navigation:hover *::before { border-color: #a6a6a6; } .react-datepicker__navigation-icon { position: relative; top: -1px; font-size: 20px; width: 0; } .react-datepicker__navigation-icon--next { left: -2px; } .react-datepicker__navigation-icon--next::before { transform: rotate(45deg); left: -7px; } .react-datepicker__navigation-icon--previous { right: -2px; } .react-datepicker__navigation-icon--previous::before { transform: rotate(225deg); right: -7px; } .react-datepicker__month-container { float: left; } .react-datepicker__year { margin: 0.4rem; text-align: center; } .react-datepicker__year-wrapper { display: flex; flex-wrap: wrap; max-width: 180px; } .react-datepicker__year .react-datepicker__year-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__month { margin: 0.4rem; text-align: center; } .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__input-time-container { clear: both; width: 100%; float: left; margin: 5px 0 10px 15px; text-align: left; } .react-datepicker__input-time-container .react-datepicker-time__caption { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input { display: inline-block; margin-left: 10px; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input { width: auto; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] { -moz-appearance: textfield; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter { margin-left: 5px; display: inline-block; } .react-datepicker__time-container { float: right; border-left: 1px solid #aeaeae; width: 85px; } .react-datepicker__time-container--with-today-button { display: inline; border: 1px solid #aeaeae; border-radius: 0.3rem; position: absolute; right: -87px; top: 0; } .react-datepicker__time-container .react-datepicker__time { position: relative; background: white; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { width: 85px; overflow-x: hidden; margin: 0 auto; text-align: center; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { list-style: none; margin: 0; height: calc(195px + 1.7rem / 2); overflow-y: scroll; padding-right: 0; padding-left: 0; width: 100%; box-sizing: content-box; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { height: 30px; padding: 5px 10px; white-space: nowrap; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { cursor: pointer; background-color: #f0f0f0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: #216ba5; color: white; font-weight: bold; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { background-color: #216ba5; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { color: #ccc; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { cursor: default; background-color: transparent; } .react-datepicker__week-number { color: #ccc; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__week-number.react-datepicker__week-number--clickable { cursor: pointer; } .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):not(.react-datepicker__week-number--keyboard-selected):hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__week-number--selected { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__week-number--selected:hover { background-color: #1d5d90; } .react-datepicker__week-number--keyboard-selected { border-radius: 0.3rem; background-color: #2a87d0; color: #fff; } .react-datepicker__week-number--keyboard-selected:hover { background-color: #1d5d90; } .react-datepicker__day-names { white-space: nowrap; margin-bottom: -8px; } .react-datepicker__week { white-space: nowrap; } .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text { cursor: pointer; } .react-datepicker__day:not([aria-disabled=true]):hover, .react-datepicker__month-text:not([aria-disabled=true]):hover, .react-datepicker__quarter-text:not([aria-disabled=true]):hover, .react-datepicker__year-text:not([aria-disabled=true]):hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today { font-weight: bold; } .react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted { border-radius: 0.3rem; background-color: #3dcc4a; color: #fff; } .react-datepicker__day--highlighted:not([aria-disabled=true]):hover, .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover, .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover { background-color: #32be3f; } .react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 { color: magenta; } .react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 { color: green; } .react-datepicker__day--holidays, .react-datepicker__month-text--holidays, .react-datepicker__quarter-text--holidays, .react-datepicker__year-text--holidays { position: relative; border-radius: 0.3rem; background-color: #ff6803; color: #fff; } .react-datepicker__day--holidays .overlay, .react-datepicker__month-text--holidays .overlay, .react-datepicker__quarter-text--holidays .overlay, .react-datepicker__year-text--holidays .overlay { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 4px; border-radius: 4px; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease-in-out; } .react-datepicker__day--holidays:not([aria-disabled=true]):hover, .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover, .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover { background-color: #cf5300; } .react-datepicker__day--holidays:hover .overlay, .react-datepicker__month-text--holidays:hover .overlay, .react-datepicker__quarter-text--holidays:hover .overlay, .react-datepicker__year-text--holidays:hover .overlay { visibility: visible; opacity: 1; } .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover, .react-datepicker__month-text--selected:not([aria-disabled=true]):hover, .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover, .react-datepicker__year-text--selected:not([aria-disabled=true]):hover, .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover { background-color: #1d5d90; } .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { border-radius: 0.3rem; background-color: #bad9f1; color: rgb(0, 0, 0); } .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover, .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover { background-color: #1d5d90; } .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) { background-color: rgba(33, 107, 165, 0.5); } .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range) { background-color: #f0f0f0; color: #000; } .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled { cursor: default; color: #ccc; } .react-datepicker__day--disabled .overlay, .react-datepicker__month-text--disabled .overlay, .react-datepicker__quarter-text--disabled .overlay, .react-datepicker__year-text--disabled .overlay { position: absolute; bottom: 70%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 4px; border-radius: 4px; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease-in-out; } .react-datepicker__input-container { position: relative; display: inline-block; width: 100%; } .react-datepicker__input-container .react-datepicker__calendar-icon { position: absolute; padding: 0.5rem; box-sizing: content-box; } .react-datepicker__view-calendar-icon input { padding: 6px 10px 5px 25px; } .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { border: 1px solid transparent; border-radius: 0.3rem; position: relative; } .react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; } .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { border-top-color: #b3b3b3; } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { transform: rotate(135deg); right: -16px; top: 0; } .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown { background-color: #f0f0f0; position: absolute; width: 50%; left: 25%; top: 30px; z-index: 1; text-align: center; border-radius: 0.3rem; border: 1px solid #aeaeae; } .react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover { cursor: pointer; } .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable { height: 150px; overflow-y: scroll; } .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { line-height: 20px; width: 100%; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } .react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type { -webkit-user-select: none; user-select: none; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover { background-color: #ccc; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { border-bottom-color: #b3b3b3; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { border-top-color: #b3b3b3; } .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { position: absolute; left: 15px; } .react-datepicker__close-icon { cursor: pointer; background-color: transparent; border: 0; outline: 0; padding: 0 6px 0 0; position: absolute; top: 0; right: 0; height: 100%; display: table-cell; vertical-align: middle; } .react-datepicker__close-icon::after { cursor: pointer; background-color: #216ba5; color: #fff; border-radius: 50%; height: 16px; width: 16px; padding: 2px; font-size: 12px; line-height: 1; text-align: center; display: table-cell; vertical-align: middle; content: "×"; } .react-datepicker__close-icon--disabled { cursor: default; } .react-datepicker__close-icon--disabled::after { cursor: default; background-color: #ccc; } .react-datepicker__today-button { background: #f0f0f0; border-top: 1px solid #aeaeae; cursor: pointer; text-align: center; font-weight: bold; padding: 5px 0; clear: left; } .react-datepicker__portal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; justify-content: center; align-items: center; display: flex; z-index: 2147483647; } .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 3rem; line-height: 3rem; } @media (max-width: 400px), (max-height: 550px) { .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 2rem; line-height: 2rem; } } .react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header { font-size: 1.44rem; } .react-datepicker__children-container { width: 13.8rem; margin: 0.4rem; padding-right: 0.2rem; padding-left: 0.2rem; height: auto; } .react-datepicker__aria-live { position: absolute; clip-path: circle(0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; white-space: nowrap; } .react-datepicker__calendar-icon { width: 1em; height: 1em; vertical-align: -0.125em; } .progress-bar-wrapper,.progress-bar-wrapper *{box-sizing:border-box}.progress-bar-wrapper{padding:2rem}.progress-bar-wrapper .step-progress-bar{margin:0 0 1rem 0;padding:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.progress-bar-wrapper .progress-step{list-style:none;position:relative;text-align:center;flex:1 1 auto;position:relative}.progress-bar-wrapper .progress-step::before{content:"";position:absolute;top:50%;height:3px;width:100%;right:50%;transform:translateY(-50%);z-index:-1;background:var(--primary-neutral-color);background-size:200% 100%;background-position:right bottom;transition:background-position 200ms ease-in-out}.progress-bar-wrapper .progress-step:first-child::before{content:none}.progress-bar-wrapper .progress-step .step-index,.progress-bar-wrapper .progress-step .step-icon{background-color:var(--primary-neutral-color);color:var(--primary-dark-color);border-radius:50%;height:2.5rem;width:2.5rem;line-height:2.5rem;display:inline-flex;transform-origin:center;align-items:center;justify-content:center}.progress-bar-wrapper .step-index,.progress-bar-wrapper .step-icon{transition:background-color 250ms ease}.progress-bar-wrapper .progress-step .step-label{color:var(--primary-dark-color);position:absolute;top:120%;left:50%;transform:translateX(-50%)}.progress-bar-wrapper .progress-step .step-label-subtitle{display:block}.progress-bar-wrapper .progress-step.completed .step-icon{background-color:var(--primary-light-color);color:#fff;animation:spring-down 400ms ease-in-out forwards}.progress-bar-wrapper .progress-step.completed .step-icon:hover{background-color:var(--primary-light-color)}.progress-bar-wrapper .progress-step.current .step-index{background-color:var(--secondary-neutral-color);border:1px solid var(--primary-light-color);animation:spring-up 400ms ease forwards}.progress-bar-wrapper .progress-step.current .step-index:hover{background-color:var(--primary-light-color);color:var(--primary-neutral-color)}.progress-bar-wrapper .progress-step.completed::before,.progress-bar-wrapper .progress-step.current::before,.progress-bar-wrapper .progress-step.has-error::before{background-position:left bottom}.progress-bar-wrapper .progress-step.has-error .step-icon{color:#fff;background-color:#bb392d;animation:shake 350ms ease-in-out forwards}@keyframes spring-up{0%{transform:scale(1)}10%{transform:scale(0.975)}40%{transform:scale(1.4)}50%,100%{transform:scale(1.2)}}@keyframes spring-down{0%{transform:scale(1.2)}35%,100%{transform:scale(1)}}@keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(0.2rem)}30%,60%{transform:translateX(-0.4rem)}45%,75%{transform:translateX(0.4rem)}90%{transform:translateX(-0.2rem)}100%{transform:translateX(0)}}