/* */ /*! * # Semantic UI - Reset * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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! */ } /******************************* Theme Overrides *******************************/ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * Correct `block` display not defined in IE 8/9. */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /******************************* Site Overrides *******************************/ @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'); /* */ /*! * # Semantic UI - Site * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Page *******************************/ html, body { height: 100%; } html { font-size: 14px; } body { margin: 0px; padding: 0px; overflow-x: hidden; min-width: 320px; background: #ffffff; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); font-smoothing: antialiased; } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 1.2857em; margin: calc(2rem - 0.14285em ) 0em 1rem; font-weight: bold; padding: 0em; } h1 { min-height: 1rem; font-size: 2rem; } h2 { font-size: 1.714rem; } h3 { font-size: 1.28rem; } h4 { font-size: 1.071rem; } 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.4285em; } p:first-child { margin-top: 0em; } p:last-child { margin-bottom: 0em; } /*------------------- Links --------------------*/ a { color: #4183c4; text-decoration: none; } a:hover { color: #195d9f; text-decoration: none; } /******************************* Highlighting *******************************/ /* Site */ ::-webkit-selection { background-color: #cce2ff; color: rgba(0, 0, 0, 0.87); } ::-moz-selection { background-color: #cce2ff; color: rgba(0, 0, 0, 0.87); } ::selection { background-color: #cce2ff; color: rgba(0, 0, 0, 0.87); } /* Form */ textarea::-webkit-selection, input::-webkit-selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } textarea::-moz-selection, input::-moz-selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } textarea::selection, input::selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } /******************************* Global Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Container * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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: 723px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 723px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 723px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 723px + 5rem ) !important; } } /* Small Monitor */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui.container { width: 933px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 933px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 933px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 933px + 5rem ) !important; } } /* Large Monitor */ @media only screen and (min-width: 1200px) { .ui.container { width: 1127px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container { width: calc( 1127px + 2rem ) !important; } .ui.relaxed.grid.container { width: calc( 1127px + 3rem ) !important; } .ui.very.relaxed.grid.container { width: calc( 1127px + 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.14285714rem; } /* 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; -ms-hyphens: auto; hyphens: auto; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Grid * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; -webkit-box-align: stretch; -ms-flex-align: stretch; 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 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 1rem 1rem; } .ui.grid .column + .ui.vertical.divider { height: calc(50% - 1rem ); } /* 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ui.centered.grid > .column:not(.aligned):not(.row), .ui.centered.grid > .row > .column:not(.aligned), .ui.grid .centered.row > .column:not(.aligned) { 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; } /* 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: 5rem; margin-right: 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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; vertical-align: top; -ms-flex-item-align: start !important; 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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; vertical-align: middle; -ms-flex-item-align: center !important; 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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; vertical-align: bottom; -ms-flex-item-align: end !important; 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: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -ms-flex-item-align: stretch; align-self: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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 > * { -webkit-box-flex: 1; -ms-flex-positive: 1; 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 { text-align: left; -ms-flex-item-align: inherit; 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 { text-align: center; -ms-flex-item-align: inherit; align-self: inherit; } .ui[class*="center aligned"].grid { -webkit-box-pack: center; -ms-flex-pack: center; 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 { text-align: right; -ms-flex-item-align: inherit; 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 { text-align: justify; -webkit-hyphens: auto; -ms-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; -webkit-box-flex: 1; -ms-flex-positive: 1; 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 { -webkit-box-flex: 0; -ms-flex-positive: 0; 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 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .ui[class*="mobile vertically reversed"].grid, .ui.stackable[class*="mobile reversed"] { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; 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 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .ui[class*="tablet vertically reversed"].grid { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; 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 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .ui[class*="computer vertically reversed"].grid { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; 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; } } /* Mobily 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 UI - Header * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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.14285em ) 0em 1rem; padding: 0em 0em; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.2857em; text-transform: none; color: rgba(0, 0, 0, 0.87); } .ui.header:first-child { margin-top: -0.14285em; } .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: 0.14285em; vertical-align: middle; } /* With Text Node */ .ui.header .icon:only-child { display: inline-block; padding: 0em; margin-right: 0.75rem; } /*------------------- Image --------------------*/ .ui.header > .image, .ui.header > img { display: inline-block; margin-top: 0.14285em; width: 2.5em; height: auto; vertical-align: middle; } .ui.header > .image: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.714rem; } h3.ui.header { font-size: 1.28rem; } h4.ui.header { font-size: 1.071rem; } h5.ui.header { font-size: 1rem; } /* Sub Header */ h1.ui.header .sub.header { font-size: 1.14285714rem; } h2.ui.header .sub.header { font-size: 1.14285714rem; } h3.ui.header .sub.header { font-size: 1rem; } h4.ui.header .sub.header { font-size: 1rem; } h5.ui.header .sub.header { font-size: 0.92857143rem; } /*-------------- Content Heading ---------------*/ .ui.huge.header { min-height: 1em; font-size: 2em; } .ui.large.header { font-size: 1.714em; } .ui.medium.header { font-size: 1.28em; } .ui.small.header { font-size: 1.071em; } .ui.tiny.header { font-size: 1em; } /* Sub Header */ .ui.huge.header .sub.header { font-size: 1.14285714rem; } .ui.large.header .sub.header { font-size: 1.14285714rem; } .ui.header .sub.header { font-size: 1rem; } .ui.small.header .sub.header { font-size: 1rem; } .ui.tiny.header .sub.header { font-size: 0.92857143rem; } /*-------------- Sub Heading ---------------*/ .ui.sub.header { padding: 0em; margin-bottom: 0.14285714rem; font-weight: bold; font-size: 0.85714286em; text-transform: uppercase; color: ''; } .ui.small.sub.header { font-size: 0.71428571em; } .ui.sub.header { font-size: 0.85714286em; } .ui.large.sub.header { font-size: 0.92857143em; } .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; } .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 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; border-color: transparent; } .ui.inverted.block.header { background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); 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: #d41616 !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: #f36101 !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: #a8bf0b !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: #daec59 !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: #13ae38 !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: #1ec231 !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: #1378c5 !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: #5624c0 !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: #9823bf !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: #e9168d !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: #9d592e !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: #ca6f0e !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: #cad0d6 !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; } /*------------------- Fittted --------------------*/ .ui.fitted.header { padding: 0em; } /*------------------- Dividing --------------------*/ .ui.dividing.header { padding-bottom: 0.21428571rem; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.dividing.header .sub.header { padding-bottom: 0.21428571rem; } .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.71428571rem 1rem; box-shadow: none; border: 1px solid #d4d4d5; border-radius: 0.28571429rem; } .ui.tiny.block.header { font-size: 0.85714286rem; } .ui.small.block.header { font-size: 0.92857143rem; } .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.14285714rem; } .ui.huge.block.header { font-size: 1.42857143rem; } /*------------------- Attached --------------------*/ .ui.attached.header { background: #ffffff; padding: 0.71428571rem 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.28571429rem 0.28571429rem 0em 0em; } .ui.bottom.attached.header { margin-top: 0em; border-top: none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Attached Sizes */ .ui.tiny.attached.header { font-size: 0.85714286em; } .ui.small.attached.header { font-size: 0.92857143em; } .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.14285714em; } .ui.huge.attached.header { font-size: 1.42857143em; } /*------------------- Sizing --------------------*/ .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1.28em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Image * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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.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.71428571rem; } .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg, .ui.tiny.image { width: 80px; height: auto; font-size: 0.85714286rem; } .ui.small.images .image, .ui.small.images img, .ui.small.images svg, .ui.small.image { width: 150px; height: auto; font-size: 0.92857143rem; } .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.14285714rem; } .ui.big.images .image, .ui.big.images img, .ui.big.images svg, .ui.big.image { width: 600px; height: auto; font-size: 1.28571429rem; } .ui.huge.images .image, .ui.huge.images img, .ui.huge.images svg, .ui.huge.image { width: 800px; height: auto; font-size: 1.42857143rem; } .ui.massive.images .image, .ui.massive.images img, .ui.massive.images svg, .ui.massive.image { width: 960px; height: auto; font-size: 1.71428571rem; } /******************************* 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 - 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 */ /* 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 */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Menu ---------------*/ .ui.menu { display: -webkit-box; display: -ms-flexbox; 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.28571429rem; min-height: 2.85714286em; } .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: -webkit-box; display: -ms-flexbox; display: flex; } /*-------------- Item ---------------*/ .ui.menu:not(.vertical) .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ui.menu .item { position: relative; vertical-align: middle; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none; padding: 0.92857143em 1.14285714em; text-transform: none; color: rgba(0, 0, 0, 0.87); font-weight: normal; -webkit-transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; } .ui.menu > .item:first-child { border-radius: 0.28571429rem 0px 0px 0.28571429rem; } /* 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; -moz-user-select: text; -ms-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.35714286em 0em 0em; } /*-------------- Button ---------------*/ .ui.menu:not(.vertical) .item > .button { position: relative; top: 0em; margin: -0.5em 0em; padding-bottom: 0.71428571em; padding-top: 0.71428571em; font-size: 1em; } /*---------------- Grid / Container -----------------*/ .ui.menu > .grid, .ui.menu > .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: inherit; -ms-flex-align: inherit; align-items: inherit; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: 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.57142857em; padding-bottom: 0.57142857em; } /*-------------- 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; } /*-------------- Popup ---------------*/ .ui.menu .ui.popup { display: none; } .ui.menu .ui.visible.popup { display: block; } /*-------------- Dropdowns ---------------*/ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0em; float: right; margin: 0em 0em 0em 1em; } /* Menu */ .ui.menu .dropdown.item .menu { left: 0px; min-width: calc(100% - 1px); border-radius: 0em 0em 0.28571429rem 0.28571429rem; background: #ffffff; margin: 0em 0px 0px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } /* Menu Items */ .ui.menu .ui.dropdown .menu > .item { margin: 0; text-align: left; font-size: 1em !important; padding: 0.71428571em 1.14285714em !important; background: transparent !important; color: rgba(0, 0, 0, 0.87) !important; text-transform: none !important; font-weight: normal !important; box-shadow: none !important; -webkit-transition: 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; } /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, .ui.text.menu .dropdown.item > .menu { border-radius: 0.28571429rem; margin-top: 0.35714286em; } /* 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 { top: 0% !important; 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.28571429rem 0.28571429rem 0.28571429rem; } .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.71428571em; } .ui.vertical.menu .item > .label { background: #999999; color: #ffffff; margin-top: -0.15em; margin-bottom: -0.15em; padding: 0.3em 0.71428571em; } .ui.menu .item > .floating.label { padding: 0.3em 0.71428571em; } /*-------------- 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 *******************************/ /*-------------- 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; background-color: transparent !important; color: rgba(40, 40, 40, 0.3); } /******************************* Types *******************************/ /*------------------ Floated Menu / Item -------------------*/ /* Left Floated */ .ui.menu:not(.vertical) .left.item, .ui.menu:not(.vertical) .left.menu { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: auto !important; } /* Right Floated */ .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu { display: -webkit-box; display: -ms-flexbox; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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.28571429rem 0.28571429rem 0px 0px; } .ui.vertical.menu > .item:last-child { border-radius: 0px 0px 0.28571429rem 0.28571429rem; } /*--- 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%; background: rgba(34, 36, 38, 0.1); height: 1px; } .ui.vertical.menu .item:first-child:before { display: none !important; } /*--- Sub Menu ---*/ .ui.vertical.menu .item > .menu { margin: 0.5em -1.14285714em 0em; } .ui.vertical.menu .menu .item { background: none; padding: 0.5em 1.33333333em; font-size: 0.85714286em; 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.28571429rem 0.28571429rem 0em 0em; } .ui.vertical.menu > .active.item:last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.vertical.menu > .active.item:only-child { border-radius: 0.28571429rem; } .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% + 2px ) !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.92857143em 1.42857143em; color: rgba(0, 0, 0, 0.87); } .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: rgba(0, 0, 0, 0.95); border-top-width: 1px; border-color: #d4d4d5; font-weight: bold; margin-bottom: -1px; box-shadow: none; border-radius: 0.28571429rem 0.28571429rem 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: 0px; width: 100%; } .top.attached.segment + .ui.bottom.tabular.menu { position: relative; width: calc(100% + 2px ); 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: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: -1px 0px 0px 0px; border-radius: 0px 0px 0.28571429rem 0.28571429rem !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: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: 0px -1px 0px 0px; border-radius: 0.28571429rem 0px 0px 0.28571429rem !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: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: 0px 0px 0px -1px; border-radius: 0px 0.28571429rem 0.28571429rem 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: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .ui.pagination.menu .item:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui.compact.menu .item:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 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.92857143em; 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.35714286em; margin-right: -0.35714286em; border-radius: 0em; border: none; box-shadow: none; } /* Item */ .ui.secondary.menu .item { -ms-flex-item-align: center; align-self: center; box-shadow: none; border: none; padding: 0.71428571em 0.92857143em; margin: 0em 0.35714286em; background: none; -webkit-transition: color 0.1s ease; transition: color 0.1s ease; border-radius: 0.28571429rem; } /* 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.28571429rem; } /* 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.92857143em; } .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { margin: 0em; padding: 0.5em 1.33333333em; } /*--------------------- Secondary Vertical -----------------------*/ .ui.secondary.vertical.menu > .item { border: none; margin: 0em 0em 0.35714286em; border-radius: 0.28571429rem !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; -ms-flex-item-align: end; align-self: flex-end; margin: 0em 0em -2px; padding: 0.85714286em 1.14285714em; border-bottom-width: 2px; -webkit-transition: color 0.1s ease; 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: rgba(0, 0, 0, 0.87); } /* 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 .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.5em; } .ui.text.menu .item { border-radius: 0px; box-shadow: none; -ms-flex-item-align: center; align-self: center; margin: 0em 0em; padding: 0.35714286em 0.5em; font-weight: normal; color: rgba(0, 0, 0, 0.6); -webkit-transition: opacity 0.1s ease; 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.92857143em; 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.57142857em 0em; } .ui.vertical.text.menu .item > i.icon { float: none; margin: 0em 0.35714286em 0em 0em; } .ui.vertical.text.menu .header.item { margin: 0.57142857em 0em 0.71428571em; } /* 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.5em 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Icon */ .ui.labeled.icon.menu .item > .icon:not(.dropdown) { height: 1em; display: block; font-size: 1.71428571em !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 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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%; background: rgba(34, 36, 38, 0.1); height: 1px; } } /*-------------- 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, .ui.inverted.menu a.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.92857143em; padding-bottom: 0.92857143em; } .ui.vertically.fitted.menu .item, .ui.vertically.fitted.menu .item .menu .item, .ui.menu .vertically.fitted.item { padding-left: 1.14285714em; padding-right: 1.14285714em; } /*-------------- 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: -webkit-inline-box; display: -ms-inline-flexbox; 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.28571429rem 0.28571429rem 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .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.500%; } .ui.menu.nine.item .item { width: 11.11%; } .ui.menu.ten.item .item { width: 10.0%; } .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%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); background: none; margin: 0.5px 0em 0em; width: 0.57142857em; height: 0.57142857em; border: none; border-bottom: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5; z-index: 2; -webkit-transition: background 0.1s ease; transition: background 0.1s ease; } .ui.vertical.pointing.menu .item:after { position: absolute; top: 50%; right: 0%; bottom: auto; left: auto; -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); 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% + 2px ); max-width: calc(100% + 2px ); 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.28571429rem 0.28571429rem 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.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].menu:last-child { margin-bottom: 0em; } /* Attached Menu Item */ .ui.top.attached.menu > .item:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui.bottom.attached.menu > .item:first-child { border-radius: 0em 0em 0em 0.28571429rem; } /* 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 ---------------*/ /* Small */ .ui.small.menu { font-size: 0.92857143rem; } .ui.small.vertical.menu { width: 13rem; } /* Medium */ .ui.menu { font-size: 1rem; } .ui.vertical.menu { width: 15rem; } /* Large */ .ui.large.menu { font-size: 1.14285714rem; } .ui.large.vertical.menu { width: 18rem; } /* Huge */ .ui.huge.menu { font-size: 1.42857143rem; } .ui.huge.vertical.menu { width: 20rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Divider * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 *******************************/ /******************************* 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: 0.05em; color: rgba(0, 0, 0, 0.85); -webkit-user-select: none; -moz-user-select: none; -ms-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: ''; overflow: hidden; 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; -webkit-transform: translateX(-50%); 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; -webkit-transform: none; 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 - Dropdown * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 */ /*------------------- 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; -webkit-transition: box-shadow 0.1s ease, width 0.1s ease; 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: -webkit-max-content; min-width: -moz-max-content; 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.28571429rem; -webkit-transition: opacity 0.1s ease; 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.85714286em; 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; -webkit-transition: none; 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: rgba(0, 0, 0, 0.87); padding: 0.71428571rem 1.14285714rem !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.14285714rem; color: rgba(0, 0, 0, 0.85); font-size: 0.78571429em; 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 .menu > .input { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.14285714rem 0.71428571rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input { margin-top: 0em; } .ui.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 1em; } .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.71428571rem 1.14285714rem; 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% !important; right: auto !important; margin: 0em 0em 0em -0.5em !important; border-radius: 0.28571429rem !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.71428571rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { display: inline-block; vertical-align: middle; width: auto; 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; -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); min-width: 14em; min-height: 2.7142em; background: #ffffff; display: inline-block; padding: 0.78571429em 2.6em 0.78571429em 1em; color: rgba(0, 0, 0, 0.87); box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-transition: box-shadow 0.1s ease, width 0.1s ease; 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; top: auto; width: auto; z-index: 3; margin: -0.78571429em; padding: 0.78571429em; right: 1em; opacity: 0.8; -webkit-transition: opacity 0.1s ease; 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; -webkit-backface-visibility: hidden; 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.28571429rem 0.28571429rem; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); -webkit-transition: opacity 0.1s ease; 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.71428571rem 1.14285714rem; } @media only screen and (max-width: 767px) { .ui.selection.dropdown .menu { max-height: 7.58571429rem; } } @media only screen and (min-width: 768px) { .ui.selection.dropdown .menu { max-height: 10.11428571rem; } } @media only screen and (min-width: 992px) { .ui.selection.dropdown .menu { max-height: 15.17142857rem; } } @media only screen and (min-width: 1920px) { .ui.selection.dropdown .menu { max-height: 20.22857143rem; } } /* Menu Item */ .ui.selection.dropdown .menu > .item { border-top: 1px solid #fafafa; padding: 0.71428571rem 1.14285714rem !important; white-space: normal; word-wrap: normal; } /* 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: 1; z-index: 3; } /* Connecting Border */ .ui.active.selection.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !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: pointer; top: 0em; left: 0em; 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; z-index: 3; } /* Search Selection */ .ui.search.selection.dropdown > input.search { line-height: 1.2142em; padding: 0.67861429em 2.6em 0.67861429em 1em; } /* 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.45; } .ui.active.search.dropdown input.search:focus + .text { color: rgba(0, 0, 0, 0.4) !important; } /* Search Menu */ .ui.search.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { .ui.search.dropdown .menu { max-height: 7.58571429rem; } } @media only screen and (min-width: 768px) { .ui.search.dropdown .menu { max-height: 10.11428571rem; } } @media only screen and (min-width: 992px) { .ui.search.dropdown .menu { max-height: 15.17142857rem; } } @media only screen and (min-width: 1920px) { .ui.search.dropdown .menu { max-height: 20.22857143rem; } } /*-------------- Multiple ---------------*/ /* Multiple Selection */ .ui.multiple.dropdown { padding: 0.22620476em 2.6em 0.22620476em 0.28571429em; } .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; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; vertical-align: top; white-space: normal; font-size: 1em; padding: 0.35714286em 0.71428571em; margin: 0.21428571em 0.28571429rem 0.21428571em 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Dropdown Icon */ .ui.multiple.dropdown .dropdown.icon { margin: 0em -0.71428571em 0em 0em; padding: 0.5em; } /* Text */ .ui.multiple.dropdown > .text { position: static; padding: 0; max-width: 100%; margin: 0.45240952em 0em 0.45240952em 0.71428571em; line-height: 1.2142em; } .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.45240952em 0em 0.45240952em 0.71428571em; line-height: 1.2142em; } .ui.multiple.search.dropdown > .label ~ .text { display: none; } /* Search */ .ui.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; margin: 0.45240952em 0em 0.45240952em 0.71428571em; width: 2.2em; line-height: 1.2142em; } /*-------------- Inline ---------------*/ .ui.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon { margin: 0em 0.5em 0em 0.25em; vertical-align: baseline; } .ui.inline.dropdown > .text { font-weight: bold; } .ui.inline.dropdown .menu { cursor: auto; margin-top: 0.25em; border-radius: 0.28571429rem; } /******************************* 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 ---------------------*/ /* Positioning */ .ui.loading.dropdown > i.icon:before, .ui.loading.dropdown > i.icon:after { left: 30% !important; } .ui.loading.dropdown > i.icon { top: 50% !important; } .ui.multiple.loading.dropdown > i.icon:before, .ui.multiple.loading.dropdown > i.icon:after { top: 0% !important; left: 0% !important; } .ui.loading.dropdown > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; 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.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: dropdown-spin 0.6s linear; animation: dropdown-spin 0.6s linear; -webkit-animation-iteration-count: infinite; 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; } @-webkit-keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------- Default Text ----------------------*/ .ui.dropdown > .default.text, .ui.default.dropdown > .text { color: rgba(179, 179, 179, 0.7); } .ui.dropdown:hover > .default.text, .ui.default.dropdown:hover > .text { color: rgba(179, 179, 179, 0.7); } /*-------------------- Loading ----------------------*/ .ui.loading.dropdown > .text { -webkit-transition: none; transition: none; } /* Used To Check Position */ .ui.dropdown .loading.menu { display: block; visibility: hidden; z-index: -1; } /*-------------------- 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; } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.dropdown, .ui.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; opacity: 0.45; } /******************************* 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.28571429rem !important; } /* Left Flyout Menu */ .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu { left: auto !important; right: 100% !important; border-radius: 0.28571429rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0.71428571rem 0em 0em; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0.71428571rem 0em 0em; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; } /*-------------- 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.28571429rem 0.28571429rem 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.28571429rem 0.28571429rem 0em 0em !important; } .ui.upward.dropdown.button:not(.pointing):not(.floating).active { border-radius: 0.28571429rem 0.28571429rem 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.28571429rem 0.28571429rem !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.28571429rem 0.28571429rem !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; -webkit-backface-visibility: hidden; 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; padding-right: calc( 1.14285714rem + 17px ) !important; } .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: 9.71428571rem; } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 14.57142857rem; } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 19.42857143rem; } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 19.42857143rem; } } /*-------------- 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; -webkit-transition: opacity 0.1s ease; 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.08) !important; border-radius: 0.28571429rem !important; } .ui.floating.dropdown > .menu { margin-top: 0.5em !important; border-radius: 0.28571429rem !important; } /*-------------- Pointing ---------------*/ .ui.pointing.dropdown > .menu { top: 100%; margin-top: 0.71428571rem; border-radius: 0.28571429rem; } .ui.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; content: ''; visibility: visible; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 0.5em; height: 0.5em; box-shadow: -1px -1px 0px 1px rgba(34, 36, 38, 0.15); background: #ffffff; z-index: 2; } .ui.pointing.dropdown > .menu:after { top: -0.25em; left: 50%; margin: 0em 0em 0em -0.25em; } /* 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.25em; left: 1em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); 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.right.pointing.dropdown > .menu:after { top: -0.25em; left: auto; right: 1em; margin: 0em; -webkit-transform: rotate(45deg); 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.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* 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.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); 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.25em; right: auto; margin: 0em; -webkit-transform: rotate(-135deg); 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.upward.pointing.dropdown > .menu, .ui.upward.top.pointing.dropdown > .menu { top: auto; bottom: 100%; margin: 0em 0em 0.71428571rem; border-radius: 0.28571429rem; } .ui.upward.pointing.dropdown > .menu:after, .ui.upward.top.pointing.dropdown > .menu:after { top: 100%; bottom: auto; box-shadow: 1px 1px 0px 1px rgba(34, 36, 38, 0.15); margin: -0.25em 0em 0em; } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; -webkit-backface-visibility: hidden; 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"*/; } /* Icons for Reference .dropdown.down.icon { content: "\f0d7"; } .dropdown.up.icon { content: "\f0d8"; } .dropdown.left.icon { content: "\f0d9"; } .dropdown.icon.icon { content: "\f0da"; } */ /******************************* User Overrides *******************************/ /* */ /*! * # Semantic UI - Segment * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Piled */ /* Circular */ /* Stacked */ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Packaged Theme */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Piled */ /* Circular */ /* Stacked */ /* 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.28571429rem; 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.28571429rem; } /* 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 *******************************/ /*------------------- 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 { -webkit-transform: rotate(-1.2deg); transform: rotate(-1.2deg); top: 0; z-index: -2; } .ui.piled.segments:after, .ui.piled.segment:after { -webkit-transform: rotate(1.2deg); 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; } /*------------------- Compact --------------------*/ .ui.compact.segment { display: table; } /* Compact Group */ .ui.compact.segments { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .ui.compact.segments .segment, .ui.segments .compact.segment { display: block; -webkit-box-flex: 0; -ms-flex: 0 1 auto; 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.08); } /******************************* Groups *******************************/ /* Group */ .ui.segments { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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.28571429rem; } .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.28571429rem 0.28571429rem 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.28571429rem 0.28571429rem; } /* 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; 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.28571429rem; 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 { -webkit-box-flex: 1; 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; point-events: none; text-shadow: none !important; color: transparent !important; -webkit-transition: all 0s linear; 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.28571429rem; 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; -webkit-animation: segment-spin 0.6s linear; animation: segment-spin 0.6s linear; -webkit-animation-iteration-count: infinite; 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; } @-webkit-keyframes segment-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes segment-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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; } .ui.inverted.red.segment { background-color: #db2828 !important; color: #ffffff !important; } /* Orange */ .ui.orange.segment:not(.inverted) { border-top: 2px solid #f2711c; } .ui.inverted.orange.segment { background-color: #f2711c !important; color: #ffffff !important; } /* Yellow */ .ui.yellow.segment:not(.inverted) { border-top: 2px solid #fbbd08; } .ui.inverted.yellow.segment { background-color: #fbbd08 !important; color: #ffffff !important; } /* Olive */ .ui.olive.segment:not(.inverted) { border-top: 2px solid #b5cc18; } .ui.inverted.olive.segment { background-color: #b5cc18 !important; color: #ffffff !important; } /* Green */ .ui.green.segment:not(.inverted) { border-top: 2px solid #21ba45; } .ui.inverted.green.segment { background-color: #21ba45 !important; color: #ffffff !important; } /* Teal */ .ui.teal.segment:not(.inverted) { border-top: 2px solid #00b5ad; } .ui.inverted.teal.segment { background-color: #00b5ad !important; color: #ffffff !important; } /* Blue */ .ui.blue.segment:not(.inverted) { border-top: 2px solid #2185d0; } .ui.inverted.blue.segment { background-color: #2185d0 !important; color: #ffffff !important; } /* Violet */ .ui.violet.segment:not(.inverted) { border-top: 2px solid #6435c9; } .ui.inverted.violet.segment { background-color: #6435c9 !important; color: #ffffff !important; } /* Purple */ .ui.purple.segment:not(.inverted) { border-top: 2px solid #a333c8; } .ui.inverted.purple.segment { background-color: #a333c8 !important; color: #ffffff !important; } /* Pink */ .ui.pink.segment:not(.inverted) { border-top: 2px solid #e03997; } .ui.inverted.pink.segment { background-color: #e03997 !important; color: #ffffff !important; } /* Brown */ .ui.brown.segment:not(.inverted) { border-top: 2px solid #a5673f; } .ui.inverted.brown.segment { background-color: #a5673f !important; color: #ffffff !important; } /* Grey */ .ui.grey.segment:not(.inverted) { border-top: 2px solid #767676; } .ui.inverted.grey.segment { background-color: #767676 !important; color: #ffffff !important; } /* Black */ .ui.black.segment:not(.inverted) { border-top: 2px solid #1b1c1d; } .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: rgba(0, 0, 0, 0.87); } .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 -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); 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 -webkit-linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%); 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% + 2px ); max-width: calc(100% + 2px ); box-shadow: none; border: 1px solid #d4d4d5; } .ui.attached + .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.28571429rem 0.28571429rem 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.28571429rem 0.28571429rem; } .ui.segment[class*="bottom attached"]:last-child { margin-bottom: 0em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Button * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 */ /* 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 */ /* 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.78571429em 1.5em 0.78571429em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.28571429rem; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; 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; -webkit-transition: all 0s linear, opacity 0.1s ease; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; 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.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: button-spin 0.6s linear; animation: button-spin 0.6s linear; -webkit-animation-iteration-count: infinite; 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; } @-webkit-keyframes button-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes button-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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; } /* 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 { -webkit-transition: right 0.3s ease 0s; 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 { -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease; transition: top 0.3s ease, -webkit-transform 0.3s ease; transition: top 0.3s ease, transform 0.3s ease; transition: top 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; } .ui.vertical.animated.button .visible.content { -webkit-transform: translateY(0%); 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 { -webkit-transform: translateY(200%); 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 { -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; } .ui.fade.animated.button .visible.content { left: auto; right: auto; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .ui.fade.animated.button .hidden.content { opacity: 0; left: 0%; right: auto; -webkit-transform: scale(1.5); transform: scale(1.5); } .ui.fade.animated.button:focus .visible.content, .ui.fade.animated.button:hover .visible.content { left: auto; right: auto; opacity: 0; -webkit-transform: scale(0.75); transform: scale(0.75); } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content { left: 0%; right: auto; opacity: 1; -webkit-transform: scale(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: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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: #2b4b8f; color: #ffffff; text-shadow: none; } .ui.facebook.button:active { background-color: #2d4373; color: #ffffff; text-shadow: none; } /* Twitter */ .ui.twitter.button { background-color: #0084b4; 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: #00719b; color: #ffffff; text-shadow: none; } .ui.twitter.button:active { background-color: #005f81; color: #ffffff; text-shadow: none; } /* Google Plus */ .ui.google.plus.button { background-color: #dc4a38; 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: #e22f19; color: #ffffff; text-shadow: none; } .ui.google.plus.button:active { background-color: #bf3322; color: #ffffff; text-shadow: none; } /* Linked In */ .ui.linkedin.button { background-color: #1f88be; color: #ffffff; text-shadow: none; } .ui.linkedin.button:hover { background-color: #127bb2; color: #ffffff; text-shadow: none; } .ui.linkedin.button:active { background-color: #186992; color: #ffffff; text-shadow: none; } /* YouTube */ .ui.youtube.button { background-color: #cc181e; 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: #bf0b11; color: #ffffff; text-shadow: none; } .ui.youtube.button:active { background-color: #9e1317; 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: #376a95; color: #ffffff; text-shadow: none; } .ui.instagram.button:active { background-color: #395c79; color: #ffffff; text-shadow: none; } /* Pinterest */ .ui.pinterest.button { background-color: #00aced; 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: #0099d4; color: #ffffff; text-shadow: none; } .ui.pinterest.button:active { background-color: #0087ba; 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: #3a6491; color: #ffffff; } .ui.vk.button:active { background-color: #3c5876; color: #ffffff; } /*-------------- Icon ---------------*/ .ui.button > .icon:not(.button) { height: 0.85714286em; opacity: 0.8; margin: 0em 0.42857143em 0em -0.21428571em; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; vertical-align: ''; color: ''; } .ui.button > .right.icon:not(.button) { margin: 0em -0.21428571em 0em 0.42857143em; } /******************************* 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.58928571em 1.125em 0.58928571em; } .ui.compact.icon.buttons .button, .ui.compact.icon.button { padding: 0.58928571em 0.58928571em 0.58928571em; } .ui.compact.labeled.icon.buttons .button, .ui.compact.labeled.icon.button { padding: 0.58928571em 3.69642857em 0.58928571em; } /*------------------- Sizes --------------------*/ .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button { font-size: 0.71428571rem; } .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button { font-size: 0.85714286rem; } .ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button { font-size: 0.92857143rem; } .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.14285714rem; } .ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button { font-size: 1.28571429rem; } .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button { font-size: 1.42857143rem; } .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button { font-size: 1.71428571rem; } /*-------------- Icon Only ---------------*/ .ui.icon.buttons .button, .ui.icon.button { padding: 0.78571429em 0.78571429em 0.78571429em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: 0.9; margin: 0em; 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.28571429rem; 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.28571429rem; } .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); box-shadow: rgba(34, 36, 38, 0.35); } .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: rgba(34, 36, 38, 0.35) inset; } /* 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: 4.07142857em !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.57142857em; 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: 4.07142857em !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; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .ui.labeled.icon.buttons .button > .icon { border-radius: 0em; } .ui.labeled.icon.buttons .button:first-child > .icon { border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.labeled.icon.buttons .button:last-child > .icon { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon { border-radius: 0em; border-top-left-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon { border-radius: 0em; border-bottom-left-radius: 0.28571429rem; } /* 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: #13ae38 !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.57142857em; 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.89285714em; margin-left: -0.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; 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.28571429rem 0.28571429rem 0em 0em; } .ui.attached.bottom.button { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Left / Right */ .ui.left.attached.button { display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui.right.attached.button { display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0em 0.28571429rem 0.28571429rem 0em; } /* Plural */ .ui.attached.buttons { position: relative; display: -webkit-box; display: -ms-flexbox; 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.28571429rem 0.28571429rem 0em 0em; } .ui[class*="top attached"].buttons .button:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui[class*="top attached"].buttons .button:last-child { border-radius: 0em 0.28571429rem 0em 0em; } .ui[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:first-child { border-radius: 0em 0em 0em 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:last-child { border-radius: 0em 0em 0.28571429rem 0em; } /* Left / Right */ .ui[class*="left attached"].buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0em; margin-left: -1px; border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui[class*="left attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0em 0.28571429rem 0em 0em; } .ui[class*="left attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0em 0em 0.28571429rem 0em; } .ui[class*="right attached"].buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0em; margin-right: -1px; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui[class*="right attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0.28571429rem 0em 0em 0em; } .ui[class*="right attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0em 0em 0em 0.28571429rem; } /*------------------- 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.500%; } .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: -webkit-box; display: -ms-flexbox; 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.500%; } .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: #cad0d6; } .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus { background-color: #bcc9d5; } .ui.inverted.grey.buttons .active.button, .ui.inverted.grey.active.button { background-color: #c8d0d9; } .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 #cad0d6 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 #bcc9d5 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 #c8d0d9 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: #9d592e; color: #ffffff; text-shadow: none; } .ui.brown.buttons .button:focus, .ui.brown.button:focus { background-color: #9a5121; 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: #a25829; 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 #9d592e inset !important; color: #9d592e !important; } .ui.basic.brown.buttons .button:focus, .ui.basic.brown.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #9a5121 inset !important; color: #9d592e !important; } .ui.basic.brown.buttons .active.button, .ui.basic.brown.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #a25829 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: #ca6f0e; } .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.button:focus { background-color: #c66803; } .ui.inverted.brown.buttons .active.button, .ui.inverted.brown.active.button { background-color: #d06f09; } .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 #ca6f0e 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 #c66803 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 #d06f09 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: #1378c5; color: #ffffff; text-shadow: none; } .ui.blue.buttons .button:focus, .ui.blue.button:focus { background-color: #0771c1; 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: #0d79ca; 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 #1378c5 inset !important; color: #1378c5 !important; } .ui.basic.blue.buttons .button:focus, .ui.basic.blue.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #0771c1 inset !important; color: #1378c5 !important; } .ui.basic.blue.buttons .active.button, .ui.basic.blue.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #0d79ca 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: #13ae38; color: #ffffff; text-shadow: none; } .ui.green.buttons .button:focus, .ui.green.button:focus { background-color: #09a92f; 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: #0fb335; 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 #13ae38 inset !important; color: #13ae38 !important; } .ui.basic.green.buttons .button:focus, .ui.basic.green.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #09a92f inset !important; color: #13ae38 !important; } .ui.basic.green.buttons .active.button, .ui.basic.green.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #0fb335 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-shadlightOw: none !important; color: #ffffff; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover { background-color: #1ec231; } .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus { background-color: #12c025; } .ui.inverted.green.buttons .active.button, .ui.inverted.green.active.button { background-color: #18c82c; } .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 #1ec231 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 #12c025 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 #18c82c 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: #f36101; 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 #f36101 inset !important; color: #f36101 !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: #f36101 !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: #e9168d; color: #ffffff; text-shadow: none; } .ui.pink.buttons .button:focus, .ui.pink.button:focus { background-color: #e80886; 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: #f0108e; 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 #e9168d inset !important; color: #e9168d !important; } .ui.basic.pink.buttons .button:focus, .ui.basic.pink.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #e80886 inset !important; color: #e9168d !important; } .ui.basic.pink.buttons .active.button, .ui.basic.pink.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #f0108e 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: #5624c0; color: #ffffff; text-shadow: none; } .ui.violet.buttons .button:focus, .ui.violet.button:focus { background-color: #4c17be; 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: #541fc6; 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 #5624c0 inset !important; color: #5624c0 !important; } .ui.basic.violet.buttons .button:focus, .ui.basic.violet.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #4c17be inset !important; color: #5624c0 !important; } .ui.basic.violet.buttons .active.button, .ui.basic.violet.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #541fc6 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: #9823bf; color: #ffffff; text-shadow: none; } .ui.purple.buttons .button:focus, .ui.purple.button:focus { background-color: #9316bd; 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: #9b1dc5; 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 #9823bf inset !important; color: #9823bf !important; } .ui.basic.purple.buttons .button:focus, .ui.basic.purple.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #9316bd inset !important; color: #9823bf !important; } .ui.basic.purple.buttons .active.button, .ui.basic.purple.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #9b1dc5 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: #d41616; color: #ffffff; text-shadow: none; } .ui.red.buttons .button:focus, .ui.red.button:focus { background-color: #d10909; 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: #da1010; 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 #d41616 inset !important; color: #d41616 !important; } .ui.basic.red.buttons .button:focus, .ui.basic.red.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #d10909 inset !important; color: #d41616 !important; } .ui.basic.red.buttons .active.button, .ui.basic.red.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #da1010 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: #a8bf0b; color: #ffffff; text-shadow: none; } .ui.olive.buttons .button:focus, .ui.olive.button:focus { background-color: #a3ba01; 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: #acc406; 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 #a8bf0b inset !important; color: #a8bf0b !important; } .ui.basic.olive.buttons .button:focus, .ui.basic.olive.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #a3ba01 inset !important; color: #a8bf0b !important; } .ui.basic.olive.buttons .active.button, .ui.basic.olive.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #acc406 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: #daec59; } .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.button:focus { background-color: #def541; } .ui.inverted.olive.buttons .active.button, .ui.inverted.olive.active.button { background-color: #ddf155; } .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 #daec59 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 #def541 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 #ddf155 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 --------------------*/ .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: #1378c5; color: #ffffff; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: #0771c1; 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.active.button { background-color: #0d79ca; color: #ffffff; text-shadow: none; } /*------------------- Secondary --------------------*/ .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: #23292e; color: #ffffff; text-shadow: none; } .ui.secondary.buttons .button:focus, .ui.secondary.button:focus { background-color: #25303c; 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.active.button { background-color: #212930; color: #ffffff; text-shadow: none; } /*--------------- Positive ----------------*/ .ui.positive.buttons .button, .ui.positive.button { background-color: #21ba45 !important; 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: #13ae38 !important; color: #ffffff; text-shadow: none; } .ui.positive.buttons .button:focus, .ui.positive.button:focus { background-color: #09a92f !important; color: #ffffff; text-shadow: none; } .ui.positive.buttons .button:active, .ui.positive.button:active { background-color: #198f35 !important; color: #ffffff; text-shadow: none; } .ui.positive.buttons .active.button, .ui.positive.active.button, .ui.positive.buttons .active.button:active { background-color: #0fb335; color: #ffffff; text-shadow: none; } /*--------------- Negative ----------------*/ .ui.negative.buttons .button, .ui.negative.button { background-color: #db2828 !important; 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: #d41616 !important; color: #ffffff; text-shadow: none; } .ui.negative.buttons .button:focus, .ui.negative.button:focus { background-color: #d10909 !important; color: #ffffff; text-shadow: none; } .ui.negative.buttons .button:active, .ui.negative.button:active { background-color: #b21e1e !important; color: #ffffff; text-shadow: none; } .ui.negative.buttons .active.button, .ui.negative.active.button, .ui.negative.buttons .active.button:active { background-color: #da1010; color: #ffffff; text-shadow: none; } /******************************* Groups *******************************/ .ui.buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; 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 { -webkit-box-flex: 1; -ms-flex: 1 0 auto; 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.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.buttons .button:last-child { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } /* Vertical Style */ .ui.vertical.buttons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .ui.vertical.buttons .button { display: block; float: none; width: 100%; margin: 0px 0px 0px 0px; box-shadow: none; } .ui.vertical.buttons .button:first-child, .ui.vertical.buttons .mini.button:first-child, .ui.vertical.buttons .tiny.button:first-child, .ui.vertical.buttons .small.button:first-child, .ui.vertical.buttons .massive.button:first-child, .ui.vertical.buttons .huge.button:first-child { border-radius: 0.28571429rem 0.28571429rem 0px 0px; } .ui.vertical.buttons .button:last-child, .ui.vertical.buttons .mini.button:last-child, .ui.vertical.buttons .tiny.button:last-child, .ui.vertical.buttons .small.button:last-child, .ui.vertical.buttons .massive.button:last-child, .ui.vertical.buttons .huge.button:last-child, .ui.vertical.buttons .gigantic.button:last-child { margin-bottom: 0px; border-radius: 0px 0px 0.28571429rem 0.28571429rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - List * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 Ordereded */ /* 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 Ordereded */ /* 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.21428571em 0em; line-height: 1.14285714em; } 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.14285714em 0em; line-height: inherit; } /* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon { display: table-cell; margin: 0em; padding-top: 0.07142857em; padding-right: 0.28571429em; vertical-align: top; -webkit-transition: color 0.1s ease; 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.14285714em; } .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; 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; } .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: rgba(0, 0, 0, 0.87); } /* 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: #4183c4; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { color: #195d9f; } /* 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: #4183c4 !important; } .ui.list .list > .item a.header:hover, .ui.list > .item a.header:hover { color: #195d9f !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.21428571em 0em; line-height: 1.14285714em; } .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.21428571em; padding-bottom: 0.21428571em; } /* 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: rgba(0, 0, 0, 0.87); } /******************************* 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: #195d9f; } /* 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: #195d9f !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); -webkit-transition: 0.1s color ease; transition: 0.1s color ease; } .ui.link.list a.item:hover, .ui.link.list .item a:not(.ui):hover { color: rgba(0, 0, 0, 0.8); } .ui.link.list a.item:active, .ui.link.list .item a:not(.ui):active { color: rgba(0, 0, 0, 0.9); } .ui.link.list .active.item, .ui.link.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 a.item:hover, .ui.inverted.link.list .item a:not(.ui):hover { color: #ffffff; } .ui.inverted.link.list a.item:active, .ui.inverted.link.list .item a:not(.ui):active { color: #ffffff; } .ui.inverted.link.list a.active.item, .ui.inverted.link.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; -webkit-transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; 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 { -webkit-transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; 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; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; position: absolute; top: auto; left: auto; margin-left: -1.25rem; content: '•'; opacity: 1; color: inherit; vertical-align: top; } 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: rgba(0, 0, 0, 0.87); } 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; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; margin-left: -1.25rem; counter-increment: ordered; content: counters(ordered, ".") " "; text-align: right; color: rgba(0, 0, 0, 0.87); 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.21428571em; } .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 { 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.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.21428571em; padding-bottom: 0.21428571em; } /* 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.21428571em; } /* 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.21428571em; } .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 { padding-top: 0.42857143em; padding-bottom: 0.42857143em; } .ui.relaxed.list:not(.horizontal) .list > .item { padding-top: 0.21428571em; padding-bottom: 0.21428571em; } .ui.horizontal.relaxed.list > .item { padding-left: 1rem; padding-right: 1rem; } /* Very Relaxed */ .ui[class*="very relaxed"].list:not(.horizontal) > .item { padding-top: 0.85714286em; padding-bottom: 0.85714286em; } .ui[class*="very relaxed"].list:not(.horizontal) .list > .item { padding-top: 0.28571429em; padding-bottom: 0.28571429em; } .ui.horizontal[class*="very relaxed"].list .list > .item, .ui.horizontal[class*="very relaxed"].list > .item { padding-left: 1.5rem; padding-right: 1.5rem; } /*------------------- Sizes --------------------*/ .ui.mini.list { font-size: 0.71428571em; } .ui.tiny.list { font-size: 0.85714286em; } .ui.small.list { font-size: 0.92857143em; } .ui.list { font-size: 1em; } .ui.large.list { font-size: 1.14285714em; } .ui.big.list { font-size: 1.28571429em; } .ui.huge.list { font-size: 1.42857143em; } .ui.massive.list { font-size: 1.71428571em; } .ui.mini.horizontal.list .list > .item, .ui.mini.horizontal.list > .item { font-size: 0.71428571rem; } .ui.tiny.horizontal.list .list > .item, .ui.tiny.horizontal.list > .item { font-size: 0.85714286rem; } .ui.small.horizontal.list .list > .item, .ui.small.horizontal.list > .item { font-size: 0.92857143rem; } .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.14285714rem; } .ui.big.horizontal.list .list > .item, .ui.big.horizontal.list > .item { font-size: 1.28571429rem; } .ui.huge.horizontal.list .list > .item, .ui.huge.horizontal.list > .item { font-size: 1.42857143rem; } .ui.massive.horizontal.list .list > .item, .ui.massive.horizontal.list > .item { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /* */ /*! * # Semantic UI - Item * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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 */ /* Sizes */ /* 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 */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Item ---------------*/ .ui.items > .item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1em 0em; width: 100%; min-height: 0px; background: transparent; padding: 0em; border: none; border-radius: 0rem; box-shadow: none; -webkit-transition: box-shadow 0.1s ease; 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; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; float: none; margin: 0em; padding: 0em; max-height: ''; -ms-flex-item-align: top; 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; -webkit-box-flex: 1; -ms-flex: 1 1 auto; 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; -ms-flex-item-align: top; align-self: top; padding-left: 1.5em; } .ui.items > .item > .content > .header { display: inline-block; margin: -0.21425em 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.28571429em; } /*-------------- Floated ---------------*/ .ui.items > .item [class*="left floated"] { float: left; } .ui.items > .item [class*="right floated"] { float: right; } /*-------------- Content Image ---------------*/ .ui.items > .item .content img { -ms-flex-item-align: middle; 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.4285em; color: rgba(0, 0, 0, 0.87); } /*-------------- 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: ''; -webkit-transition: color 0.1s ease; 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: #195d9f; } /* Meta */ .ui.items > .item .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta > a:not(.ui):hover { color: rgba(0, 0, 0, 0.87); } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.items > .item > .content .favorite.icon { cursor: pointer; opacity: 0.75; -webkit-transition: color 0.1s ease; 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; -webkit-transition: color 0.1s ease; 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; -webkit-transition: color 0.1s ease; 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; } } /* Mobily Only */ @media only screen and (max-width: 767px) { .ui.items > .item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 2em 0em; } .ui.items > .item > .image { display: block; margin-left: auto; margin-right: auto; } .ui.items > .item > .image, .ui.items > .item > .image > img { max-width: 100% !important; width: auto !important; max-height: 250px !important; } .ui.items > .item > .image + .content { display: block; padding: 1.5em 0em 0em; } } /******************************* Variations *******************************/ /*------------------- Aligned --------------------*/ .ui.items > .item > .image + [class*="top aligned"].content { -ms-flex-item-align: start; align-self: flex-start; } .ui.items > .item > .image + [class*="middle aligned"].content { -ms-flex-item-align: center; align-self: center; } .ui.items > .item > .image + [class*="bottom aligned"].content { -ms-flex-item-align: end; 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: #195d9f; } /*-------------- Size ---------------*/ .ui.items > .item { font-size: 1em; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /* */ /*! * # Semantic UI - Icon * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Icon *******************************/ /*------------------- Icon Variables --------------------*/ /* Variations */ /* Packaged Theme */ /******************************* Icon *******************************/ /*------------------- Icon Variables --------------------*/ /* Variations */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Icon *******************************/ @font-face { font-family: 'Icons'; src: url(/assets/semantic_ui/themes/default/assets/fonts/icons-cbb644d0ee730ea57dd5fbae35ef5ba4a41d57a254a6b1215de5c9ff8a321c2d.eot); src: url(/assets/semantic_ui/themes/default/assets/fonts/icons-cbb644d0ee730ea57dd5fbae35ef5ba4a41d57a254a6b1215de5c9ff8a321c2d.eot?#iefix) format('embedded-opentype'), url(/assets/semantic_ui/themes/default/assets/fonts/icons-aadc3580d2b64ff5a7e6f1425587db4e8b033efcbf8f5c332ca52a5ed580c87c.woff2) format('woff2'), url(/assets/semantic_ui/themes/default/assets/fonts/icons-e3870de89716b72cb61a4bba0e17c75783b361cdaba35ea96961c3070bd8ca18.woff) format('woff'), url(/assets/semantic_ui/themes/default/assets/fonts/icons-9e540a087924a6e64790149d735cac022640e4fa6bff6bd65f5e9f41529bf0b3.ttf) format('truetype'), url(/assets/semantic_ui/themes/default/assets/fonts/icons-bfdef833219a6edffd9c3cbc28db72739d22bb4d20cc2e2f8d56a7a4d408a206.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; -webkit-backface-visibility: hidden; backface-visibility: hidden; } i.icon:before { background: none !important; } /******************************* Types *******************************/ /*-------------- Loading ---------------*/ i.icon.loading { height: 1em; line-height: 1; -webkit-animation: icon-loading 2s linear infinite; animation: icon-loading 2s linear infinite; } @-webkit-keyframes icon-loading { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes icon-loading { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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; } /*------------------- Link --------------------*/ i.link.icon { cursor: pointer; opacity: 0.8; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } i.link.icon:hover { opacity: 1 !important; } /*------------------- Circular --------------------*/ i.circular.icon { border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0.5em !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 { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } i.vertically.flipped.icon { -webkit-transform: scale(1, -1); transform: scale(1, -1); } /*------------------- Rotated --------------------*/ i.rotated.icon, i.right.rotated.icon, i.clockwise.rotated.icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } i.left.rotated.icon, i.counterclockwise.rotated.icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /*------------------- Bordered --------------------*/ i.bordered.icon { line-height: 1; vertical-align: baseline; width: 2em; height: 2em; padding: 0.5em 0.41em !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.bordeblack.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.71428571rem; } i.tiny.icon, i.tiny.icons { line-height: 1; font-size: 0.85714286rem; } i.small.icon, i.small.icons { line-height: 1; font-size: 0.92857143em; } 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%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); margin: 0em; margin: 0; } i.icons .icon:first-child { position: static; width: auto; height: auto; vertical-align: top; -webkit-transform: none; transform: none; margin-right: 0.25rem; } /* Corner Icon */ i.icons .corner.icon { top: auto; left: auto; right: 0; bottom: 0; -webkit-transform: none; 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 .inverted.corner.icon { text-shadow: -1px -1px 0 #1b1c1d, 1px -1px 0 #1b1c1d, -1px 1px 0 #1b1c1d, 1px 1px 0 #1b1c1d; } /* * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, 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 *******************************/ /* Web Content */ i.icon.search:before { content: "\f002"; } i.icon.mail.outline:before { content: "\f003"; } i.icon.external:before { content: "\f08e"; } i.icon.signal:before { content: "\f012"; } i.icon.setting:before { content: "\f013"; } i.icon.home:before { content: "\f015"; } i.icon.inbox:before { content: "\f01c"; } i.icon.browser:before { content: "\f022"; } i.icon.tag:before { content: "\f02b"; } i.icon.tags:before { content: "\f02c"; } i.icon.calendar:before { content: "\f073"; } i.icon.comment:before { content: "\f075"; } i.icon.comments:before { content: "\f086"; } i.icon.shop:before { content: "\f07a"; } i.icon.privacy:before { content: "\f084"; } i.icon.settings:before { content: "\f085"; } i.icon.trophy:before { content: "\f091"; } i.icon.payment:before { content: "\f09d"; } i.icon.feed:before { content: "\f09e"; } i.icon.alarm.outline:before { content: "\f0a2"; } i.icon.tasks:before { content: "\f0ae"; } i.icon.cloud:before { content: "\f0c2"; } i.icon.lab:before { content: "\f0c3"; } i.icon.mail:before { content: "\f0e0"; } i.icon.idea:before { content: "\f0eb"; } i.icon.dashboard:before { content: "\f0e4"; } i.icon.sitemap:before { content: "\f0e8"; } i.icon.alarm:before { content: "\f0f3"; } i.icon.terminal:before { content: "\f120"; } i.icon.code:before { content: "\f121"; } i.icon.protect:before { content: "\f132"; } i.icon.calendar.outline:before { content: "\f133"; } i.icon.ticket:before { content: "\f145"; } i.icon.external.square:before { content: "\f14c"; } i.icon.map:before { content: "\f14e"; } i.icon.bug:before { content: "\f188"; } i.icon.mail.square:before { content: "\f199"; } i.icon.history:before { content: "\f1da"; } i.icon.options:before { content: "\f1de"; } i.icon.comment.outline:before { content: "\f0e5"; } i.icon.comments.outline:before { content: "\f0e6"; } i.icon.text.telephone:before { content: "\f1e4"; } i.icon.find:before { content: "\f1e5"; } i.icon.wifi:before { content: "\f1eb"; } i.icon.alarm.slash:before { content: "\f1f6"; } i.icon.alarm.slash.outline:before { content: "\f1f7"; } i.icon.copyright:before { content: "\f1f9"; } i.icon.at:before { content: "\f1fa"; } i.icon.eyedropper:before { content: "\f1fb"; } i.icon.paint.brush:before { content: "\f1fc"; } i.icon.heartbeat:before { content: "\f21e"; } /* User Actions */ i.icon.download:before { content: "\f019"; } i.icon.repeat:before { content: "\f01e"; } i.icon.refresh:before { content: "\f021"; } i.icon.lock:before { content: "\f023"; } i.icon.bookmark:before { content: "\f02e"; } i.icon.print:before { content: "\f02f"; } i.icon.write:before { content: "\f040"; } i.icon.theme:before { content: "\f043"; } i.icon.adjust:before { content: "\f042"; } i.icon.edit:before { content: "\f044"; } i.icon.external.share:before { content: "\f045"; } i.icon.ban:before { content: "\f05e"; } i.icon.mail.forward:before { content: "\f064"; } i.icon.share:before { content: "\f064"; } i.icon.expand:before { content: "\f065"; } i.icon.compress:before { content: "\f066"; } i.icon.unhide:before { content: "\f06e"; } i.icon.hide:before { content: "\f070"; } i.icon.random:before { content: "\f074"; } i.icon.retweet:before { content: "\f079"; } i.icon.sign.out:before { content: "\f08b"; } i.icon.pin:before { content: "\f08d"; } i.icon.sign.in:before { content: "\f090"; } i.icon.upload:before { content: "\f093"; } i.icon.call:before { content: "\f095"; } i.icon.call.square:before { content: "\f098"; } i.icon.remove.bookmark:before { content: "\f097"; } i.icon.unlock:before { content: "\f09c"; } i.icon.configure:before { content: "\f0ad"; } i.icon.filter:before { content: "\f0b0"; } i.icon.wizard:before { content: "\f0d0"; } i.icon.undo:before { content: "\f0e2"; } i.icon.exchange:before { content: "\f0ec"; } i.icon.cloud.download:before { content: "\f0ed"; } i.icon.cloud.upload:before { content: "\f0ee"; } i.icon.reply:before { content: "\f112"; } i.icon.reply.all:before { content: "\f122"; } i.icon.erase:before { content: "\f12d"; } i.icon.unlock.alternate:before { content: "\f13e"; } i.icon.archive:before { content: "\f187"; } i.icon.translate:before { content: "\f1ab"; } i.icon.recycle:before { content: "\f1b8"; } i.icon.send:before { content: "\f1d8"; } i.icon.send.outline:before { content: "\f1d9"; } i.icon.share.alternate:before { content: "\f1e0"; } i.icon.share.alternate.square:before { content: "\f1e1"; } i.icon.wait:before { content: "\f017"; } i.icon.write.square:before { content: "\f14b"; } i.icon.share.square:before { content: "\f14d"; } i.icon.add.to.cart:before { content: "\f217"; } i.icon.in.cart:before { content: "\f218"; } i.icon.add.user:before { content: "\f234"; } i.icon.remove.user:before { content: "\f235"; } /* Messages */ i.icon.help.circle:before { content: "\f059"; } i.icon.info.circle:before { content: "\f05a"; } i.icon.warning:before { content: "\f12a"; } i.icon.warning.circle:before { content: "\f06a"; } i.icon.warning.sign:before { content: "\f071"; } i.icon.help:before { content: "\f128"; } i.icon.info:before { content: "\f129"; } i.icon.announcement:before { content: "\f0a1"; } i.icon.birthday:before { content: "\f1fd"; } /* Users */ i.icon.users:before { content: "\f0c0"; } i.icon.doctor:before { content: "\f0f0"; } i.icon.child:before { content: "\f1ae"; } i.icon.user:before { content: "\f007"; } i.icon.handicap:before { content: "\f193"; } i.icon.student:before { content: "\f19d"; } i.icon.spy:before { content: "\f21b"; } /* Gender & Sexuality */ i.icon.female:before { content: "\f182"; } i.icon.male:before { content: "\f183"; } i.icon.woman:before { content: "\f221"; } i.icon.man:before { content: "\f222"; } i.icon.non.binary.transgender:before { content: "\f223"; } i.icon.intergender:before { content: "\f224"; } i.icon.transgender:before { content: "\f225"; } i.icon.lesbian:before { content: "\f226"; } i.icon.gay:before { content: "\f227"; } i.icon.heterosexual:before { content: "\f228"; } i.icon.other.gender:before { content: "\f229"; } i.icon.other.gender.vertical:before { content: "\f22a"; } i.icon.other.gender.horizontal:before { content: "\f22b"; } i.icon.neuter:before { content: "\f22c"; } /* View Adjustment */ i.icon.grid.layout:before { content: "\f00a"; } i.icon.list.layout:before { content: "\f00b"; } i.icon.block.layout:before { content: "\f009"; } i.icon.zoom:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } i.icon.resize.vertical:before { content: "\f07d"; } i.icon.resize.horizontal:before { content: "\f07e"; } i.icon.maximize:before { content: "\f0b2"; } i.icon.crop:before { content: "\f125"; } /* Literal Objects */ i.icon.cocktail:before { content: "\f000"; } i.icon.road:before { content: "\f018"; } i.icon.flag:before { content: "\f024"; } i.icon.book:before { content: "\f02d"; } i.icon.gift:before { content: "\f06b"; } i.icon.leaf:before { content: "\f06c"; } i.icon.fire:before { content: "\f06d"; } i.icon.plane:before { content: "\f072"; } i.icon.magnet:before { content: "\f076"; } i.icon.legal:before { content: "\f0e3"; } i.icon.lemon:before { content: "\f094"; } i.icon.world:before { content: "\f0ac"; } i.icon.travel:before { content: "\f0b1"; } i.icon.shipping:before { content: "\f0d1"; } i.icon.money:before { content: "\f0d6"; } i.icon.lightning:before { content: "\f0e7"; } i.icon.rain:before { content: "\f0e9"; } i.icon.treatment:before { content: "\f0f1"; } i.icon.suitcase:before { content: "\f0f2"; } i.icon.bar:before { content: "\f0fc"; } i.icon.flag.outline:before { content: "\f11d"; } i.icon.flag.checkered:before { content: "\f11e"; } i.icon.puzzle:before { content: "\f12e"; } i.icon.fire.extinguisher:before { content: "\f134"; } i.icon.rocket:before { content: "\f135"; } i.icon.anchor:before { content: "\f13d"; } i.icon.bullseye:before { content: "\f140"; } i.icon.sun:before { content: "\f185"; } i.icon.moon:before { content: "\f186"; } i.icon.fax:before { content: "\f1ac"; } i.icon.life.ring:before { content: "\f1cd"; } i.icon.bomb:before { content: "\f1e2"; } i.icon.soccer:before { content: "\f1e3"; } i.icon.calculator:before { content: "\f1ec"; } i.icon.diamond:before { content: "\f219"; } /* Shapes */ i.icon.crosshairs:before { content: "\f05b"; } i.icon.asterisk:before { content: "\f069"; } i.icon.certificate:before { content: "\f0a3"; } i.icon.circle:before { content: "\f111"; } i.icon.quote.left:before { content: "\f10d"; } i.icon.quote.right:before { content: "\f10e"; } i.icon.ellipsis.horizontal:before { content: "\f141"; } i.icon.ellipsis.vertical:before { content: "\f142"; } i.icon.cube:before { content: "\f1b2"; } i.icon.cubes:before { content: "\f1b3"; } i.icon.circle.notched:before { content: "\f1ce"; } i.icon.circle.thin:before { content: "\f1db"; } i.icon.square.outline:before { content: "\f096"; } i.icon.square:before { content: "\f0c8"; } /* Item Selection */ i.icon.checkmark:before { content: "\f00c"; } i.icon.remove:before { content: "\f00d"; } i.icon.checkmark.box:before { content: "\f046"; } i.icon.move:before { content: "\f047"; } i.icon.add.circle:before { content: "\f055"; } i.icon.minus.circle:before { content: "\f056"; } i.icon.remove.circle:before { content: "\f057"; } i.icon.check.circle:before { content: "\f058"; } i.icon.remove.circle.outline:before { content: "\f05c"; } i.icon.check.circle.outline:before { content: "\f05d"; } i.icon.plus:before { content: "\f067"; } i.icon.minus:before { content: "\f068"; } i.icon.add.square:before { content: "\f0fe"; } i.icon.radio:before { content: "\f10c"; } i.icon.selected.radio:before { content: "\f192"; } i.icon.minus.square:before { content: "\f146"; } i.icon.minus.square.outline:before { content: "\f147"; } i.icon.check.square:before { content: "\f14a"; } i.icon.plus.square.outline:before { content: "\f196"; } i.icon.toggle.off:before { content: "\f204"; } i.icon.toggle.on:before { content: "\f205"; } /* Media */ i.icon.film:before { content: "\f008"; } i.icon.sound:before { content: "\f025"; } i.icon.photo:before { content: "\f030"; } i.icon.bar.chart:before { content: "\f080"; } i.icon.camera.retro:before { content: "\f083"; } i.icon.newspaper:before { content: "\f1ea"; } i.icon.area.chart:before { content: "\f1fe"; } i.icon.pie.chart:before { content: "\f200"; } i.icon.line.chart:before { content: "\f201"; } /* Pointers */ i.icon.arrow.circle.outline.down:before { content: "\f01a"; } i.icon.arrow.circle.outline.up:before { content: "\f01b"; } i.icon.chevron.left:before { content: "\f053"; } i.icon.chevron.right:before { content: "\f054"; } i.icon.arrow.left:before { content: "\f060"; } i.icon.arrow.right:before { content: "\f061"; } i.icon.arrow.up:before { content: "\f062"; } i.icon.arrow.down:before { content: "\f063"; } i.icon.chevron.up:before { content: "\f077"; } i.icon.chevron.down:before { content: "\f078"; } i.icon.pointing.right:before { content: "\f0a4"; } i.icon.pointing.left:before { content: "\f0a5"; } i.icon.pointing.up:before { content: "\f0a6"; } i.icon.pointing.down:before { content: "\f0a7"; } 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.circle.down:before { content: "\f0ab"; } i.icon.caret.down:before { content: "\f0d7"; } i.icon.caret.up:before { content: "\f0d8"; } i.icon.caret.left:before { content: "\f0d9"; } i.icon.caret.right:before { content: "\f0da"; } 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.double.down:before { content: "\f103"; } i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } i.icon.angle.up:before { content: "\f106"; } i.icon.angle.down:before { content: "\f107"; } 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.circle.down:before { content: "\f13a"; } i.icon.toggle.down:before { content: "\f150"; } i.icon.toggle.up:before { content: "\f151"; } i.icon.toggle.right:before { content: "\f152"; } i.icon.long.arrow.down:before { content: "\f175"; } i.icon.long.arrow.up:before { content: "\f176"; } i.icon.long.arrow.left:before { content: "\f177"; } i.icon.long.arrow.right:before { content: "\f178"; } i.icon.arrow.circle.outline.right:before { content: "\f18e"; } i.icon.arrow.circle.outline.left:before { content: "\f190"; } i.icon.toggle.left:before { content: "\f191"; } /* Computer */ i.icon.power:before { content: "\f011"; } i.icon.trash:before { content: "\f1f8"; } i.icon.trash.outline:before { content: "\f014"; } i.icon.disk.outline:before { content: "\f0a0"; } i.icon.desktop:before { content: "\f108"; } i.icon.laptop:before { content: "\f109"; } i.icon.tablet:before { content: "\f10a"; } i.icon.mobile:before { content: "\f10b"; } i.icon.game:before { content: "\f11b"; } i.icon.keyboard:before { content: "\f11c"; } i.icon.plug:before { content: "\f1e6"; } /* File System */ i.icon.folder:before { content: "\f07b"; } i.icon.folder.open:before { content: "\f07c"; } i.icon.level.up:before { content: "\f148"; } i.icon.level.down:before { content: "\f149"; } i.icon.file:before { content: "\f15b"; } i.icon.file.outline:before { content: "\f016"; } i.icon.file.text:before { content: "\f15c"; } i.icon.file.text.outline:before { content: "\f0f6"; } i.icon.folder.outline:before { content: "\f114"; } i.icon.folder.open.outline:before { content: "\f115"; } i.icon.file.pdf.outline:before { content: "\f1c1"; } i.icon.file.word.outline:before { content: "\f1c2"; } i.icon.file.excel.outline:before { content: "\f1c3"; } i.icon.file.powerpoint.outline:before { content: "\f1c4"; } i.icon.file.image.outline:before { content: "\f1c5"; } i.icon.file.archive.outline:before { content: "\f1c6"; } i.icon.file.audio.outline:before { content: "\f1c7"; } i.icon.file.video.outline:before { content: "\f1c8"; } i.icon.file.code.outline:before { content: "\f1c9"; } /* Technologies */ i.icon.barcode:before { content: "\f02a"; } i.icon.qrcode:before { content: "\f029"; } i.icon.fork:before { content: "\f126"; } i.icon.html5:before { content: "\f13b"; } i.icon.css3:before { content: "\f13c"; } i.icon.rss:before { content: "\f09e"; } i.icon.rss.square:before { content: "\f143"; } i.icon.openid:before { content: "\f19b"; } i.icon.database:before { content: "\f1c0"; } i.icon.server:before { content: "\f233"; } /* Rating */ i.icon.heart:before { content: "\f004"; } i.icon.star:before { content: "\f005"; } i.icon.empty.star:before { content: "\f006"; } i.icon.thumbs.outline.up:before { content: "\f087"; } i.icon.thumbs.outline.down:before { content: "\f088"; } i.icon.star.half:before { content: "\f089"; } i.icon.empty.heart:before { content: "\f08a"; } i.icon.smile:before { content: "\f118"; } i.icon.frown:before { content: "\f119"; } i.icon.meh:before { content: "\f11a"; } i.icon.star.half.empty:before { content: "\f123"; } i.icon.thumbs.up:before { content: "\f164"; } i.icon.thumbs.down:before { content: "\f165"; } /* Audio */ i.icon.music:before { content: "\f001"; } i.icon.video.play.outline:before { content: "\f01d"; } i.icon.volume.off:before { content: "\f026"; } i.icon.volume.down:before { content: "\f027"; } i.icon.volume.up:before { content: "\f028"; } i.icon.record:before { content: "\f03d"; } i.icon.step.backward:before { content: "\f048"; } i.icon.fast.backward:before { content: "\f049"; } i.icon.backward:before { content: "\f04a"; } i.icon.play:before { content: "\f04b"; } i.icon.pause:before { content: "\f04c"; } i.icon.stop:before { content: "\f04d"; } i.icon.forward:before { content: "\f04e"; } i.icon.fast.forward:before { content: "\f050"; } i.icon.step.forward:before { content: "\f051"; } i.icon.eject:before { content: "\f052"; } i.icon.unmute:before { content: "\f130"; } i.icon.mute:before { content: "\f131"; } i.icon.video.play:before { content: "\f144"; } i.icon.closed.captioning:before { content: "\f20a"; } /* Map, Locations, & Transportation */ i.icon.marker:before { content: "\f041"; } i.icon.coffee:before { content: "\f0f4"; } i.icon.food:before { content: "\f0f5"; } i.icon.building.outline:before { content: "\f0f7"; } i.icon.hospital:before { content: "\f0f8"; } i.icon.emergency:before { content: "\f0f9"; } i.icon.first.aid:before { content: "\f0fa"; } i.icon.military:before { content: "\f0fb"; } i.icon.h:before { content: "\f0fd"; } i.icon.location.arrow:before { content: "\f124"; } i.icon.space.shuttle:before { content: "\f197"; } i.icon.university:before { content: "\f19c"; } i.icon.building:before { content: "\f1ad"; } i.icon.paw:before { content: "\f1b0"; } i.icon.spoon:before { content: "\f1b1"; } i.icon.car:before { content: "\f1b9"; } i.icon.taxi:before { content: "\f1ba"; } i.icon.tree:before { content: "\f1bb"; } i.icon.bicycle:before { content: "\f206"; } i.icon.bus:before { content: "\f207"; } i.icon.ship:before { content: "\f21a"; } i.icon.motorcycle:before { content: "\f21c"; } i.icon.street.view:before { content: "\f21d"; } i.icon.hotel:before { content: "\f236"; } i.icon.train:before { content: "\f238"; } i.icon.subway:before { content: "\f239"; } /* Tables */ i.icon.table:before { content: "\f0ce"; } i.icon.columns:before { content: "\f0db"; } i.icon.sort:before { content: "\f0dc"; } i.icon.sort.ascending:before { content: "\f0de"; } i.icon.sort.descending:before { content: "\f0dd"; } i.icon.sort.alphabet.ascending:before { content: "\f15d"; } i.icon.sort.alphabet.descending:before { content: "\f15e"; } i.icon.sort.content.ascending:before { content: "\f160"; } i.icon.sort.content.descending:before { content: "\f161"; } i.icon.sort.numeric.ascending:before { content: "\f162"; } i.icon.sort.numeric.descending:before { content: "\f163"; } /* Text Editor */ i.icon.font:before { content: "\f031"; } i.icon.bold:before { content: "\f032"; } i.icon.italic:before { content: "\f033"; } i.icon.text.height:before { content: "\f034"; } i.icon.text.width:before { content: "\f035"; } i.icon.align.left:before { content: "\f036"; } i.icon.align.center:before { content: "\f037"; } i.icon.align.right:before { content: "\f038"; } i.icon.align.justify:before { content: "\f039"; } i.icon.list:before { content: "\f03a"; } i.icon.outdent:before { content: "\f03b"; } i.icon.indent:before { content: "\f03c"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.cut:before { content: "\f0c4"; } i.icon.copy:before { content: "\f0c5"; } i.icon.attach:before { content: "\f0c6"; } i.icon.save:before { content: "\f0c7"; } i.icon.content:before { content: "\f0c9"; } i.icon.unordered.list:before { content: "\f0ca"; } i.icon.ordered.list:before { content: "\f0cb"; } i.icon.strikethrough:before { content: "\f0cc"; } i.icon.underline:before { content: "\f0cd"; } i.icon.paste:before { content: "\f0ea"; } i.icon.unlink:before { content: "\f127"; } i.icon.superscript:before { content: "\f12b"; } i.icon.subscript:before { content: "\f12c"; } i.icon.header:before { content: "\f1dc"; } i.icon.paragraph:before { content: "\f1dd"; } /* Currency */ i.icon.euro:before { content: "\f153"; } i.icon.pound:before { content: "\f154"; } i.icon.dollar:before { content: "\f155"; } i.icon.rupee:before { content: "\f156"; } i.icon.yen:before { content: "\f157"; } i.icon.ruble:before { content: "\f158"; } i.icon.won:before { content: "\f159"; } i.icon.lira:before { content: "\f195"; } i.icon.shekel:before { content: "\f20b"; } /* Payment Options */ i.icon.paypal:before { content: "\f1ed"; } i.icon.paypal.card:before { content: "\f1f4"; } i.icon.google.wallet:before { content: "\f1ee"; } i.icon.visa:before { content: "\f1f0"; } i.icon.mastercard:before { content: "\f1f1"; } i.icon.discover:before { content: "\f1f2"; } i.icon.american.express:before { content: "\f1f3"; } i.icon.stripe:before { content: "\f1f5"; } /* Networks and Websites*/ i.icon.twitter.square:before { content: "\f081"; } i.icon.facebook.square:before { content: "\f082"; } i.icon.linkedin.square:before { content: "\f08c"; } i.icon.github.square:before { content: "\f092"; } i.icon.twitter:before { content: "\f099"; } i.icon.facebook:before { content: "\f09a"; } i.icon.github:before { content: "\f09b"; } i.icon.pinterest:before { content: "\f0d2"; } i.icon.pinterest.square:before { content: "\f0d3"; } i.icon.google.plus.square:before { content: "\f0d4"; } i.icon.google.plus:before { content: "\f0d5"; } i.icon.linkedin:before { content: "\f0e1"; } i.icon.github.alternate:before { content: "\f113"; } i.icon.maxcdn:before { content: "\f136"; } i.icon.bitcoin:before { content: "\f15a"; } i.icon.youtube.square:before { content: "\f166"; } i.icon.youtube:before { content: "\f167"; } i.icon.xing:before { content: "\f168"; } i.icon.xing.square:before { content: "\f169"; } i.icon.youtube.play:before { content: "\f16a"; } i.icon.dropbox:before { content: "\f16b"; } i.icon.stack.overflow:before { content: "\f16c"; } i.icon.instagram:before { content: "\f16d"; } i.icon.flickr:before { content: "\f16e"; } i.icon.adn:before { content: "\f170"; } i.icon.bitbucket:before { content: "\f171"; } i.icon.bitbucket.square:before { content: "\f172"; } i.icon.tumblr:before { content: "\f173"; } i.icon.tumblr.square:before { content: "\f174"; } i.icon.apple:before { content: "\f179"; } i.icon.windows:before { content: "\f17a"; } i.icon.android:before { content: "\f17b"; } i.icon.linux:before { content: "\f17c"; } i.icon.dribbble:before { content: "\f17d"; } i.icon.skype:before { content: "\f17e"; } i.icon.foursquare:before { content: "\f180"; } i.icon.trello:before { content: "\f181"; } i.icon.gittip:before { content: "\f184"; } i.icon.vk:before { content: "\f189"; } i.icon.weibo:before { content: "\f18a"; } i.icon.renren:before { content: "\f18b"; } i.icon.pagelines:before { content: "\f18c"; } i.icon.stack.exchange:before { content: "\f18d"; } i.icon.vimeo:before { content: "\f194"; } i.icon.slack:before { content: "\f198"; } i.icon.wordpress:before { content: "\f19a"; } i.icon.yahoo:before { content: "\f19e"; } i.icon.google:before { content: "\f1a0"; } i.icon.reddit:before { content: "\f1a1"; } i.icon.reddit.square:before { content: "\f1a2"; } i.icon.stumbleupon.circle:before { content: "\f1a3"; } i.icon.stumbleupon:before { content: "\f1a4"; } i.icon.delicious:before { content: "\f1a5"; } i.icon.digg:before { content: "\f1a6"; } i.icon.pied.piper:before { content: "\f1a7"; } i.icon.pied.piper.alternate:before { content: "\f1a8"; } i.icon.drupal:before { content: "\f1a9"; } i.icon.joomla:before { content: "\f1aa"; } i.icon.behance:before { content: "\f1b4"; } i.icon.behance.square:before { content: "\f1b5"; } i.icon.steam:before { content: "\f1b6"; } i.icon.steam.square:before { content: "\f1b7"; } i.icon.spotify:before { content: "\f1bc"; } i.icon.deviantart:before { content: "\f1bd"; } i.icon.soundcloud:before { content: "\f1be"; } i.icon.vine:before { content: "\f1ca"; } i.icon.codepen:before { content: "\f1cb"; } i.icon.jsfiddle:before { content: "\f1cc"; } i.icon.rebel:before { content: "\f1d0"; } i.icon.empire:before { content: "\f1d1"; } i.icon.git.square:before { content: "\f1d2"; } i.icon.git:before { content: "\f1d3"; } i.icon.hacker.news:before { content: "\f1d4"; } i.icon.tencent.weibo:before { content: "\f1d5"; } i.icon.qq:before { content: "\f1d6"; } i.icon.wechat:before { content: "\f1d7"; } i.icon.slideshare:before { content: "\f1e7"; } i.icon.twitch:before { content: "\f1e8"; } i.icon.yelp:before { content: "\f1e9"; } i.icon.lastfm:before { content: "\f202"; } i.icon.lastfm.square:before { content: "\f203"; } i.icon.ioxhost:before { content: "\f208"; } i.icon.angellist:before { content: "\f209"; } i.icon.meanpath:before { content: "\f20c"; } i.icon.buysellads:before { content: "\f20d"; } i.icon.connectdevelop:before { content: "\f20e"; } i.icon.dashcube:before { content: "\f210"; } i.icon.forumbee:before { content: "\f211"; } i.icon.leanpub:before { content: "\f212"; } i.icon.sellsy:before { content: "\f213"; } i.icon.shirtsinbulk:before { content: "\f214"; } i.icon.simplybuilt:before { content: "\f215"; } i.icon.skyatlas:before { content: "\f216"; } i.icon.whatsapp:before { content: "\f232"; } i.icon.viacoin:before { content: "\f237"; } i.icon.medium:before { content: "\f23a"; } /******************************* Aliases *******************************/ i.icon.like:before { content: "\f004"; } i.icon.favorite:before { content: "\f005"; } i.icon.video:before { content: "\f008"; } i.icon.check:before { content: "\f00c"; } i.icon.close:before { content: "\f00d"; } i.icon.cancel:before { content: "\f00d"; } i.icon.delete:before { content: "\f00d"; } i.icon.x:before { content: "\f00d"; } i.icon.user.times:before { content: "\f235"; } i.icon.user.close:before { content: "\f235"; } i.icon.user.cancel:before { content: "\f235"; } i.icon.user.delete:before { content: "\f235"; } i.icon.user.x:before { content: "\f235"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.magnify:before { content: "\f00e"; } i.icon.shutdown:before { content: "\f011"; } i.icon.clock:before { content: "\f017"; } i.icon.time:before { content: "\f017"; } i.icon.play.circle.outline:before { content: "\f01d"; } i.icon.headphone:before { content: "\f025"; } i.icon.camera:before { content: "\f030"; } i.icon.video.camera:before { content: "\f03d"; } i.icon.picture:before { content: "\f03e"; } i.icon.pencil:before { content: "\f040"; } i.icon.compose:before { content: "\f040"; } i.icon.point:before { content: "\f041"; } i.icon.tint:before { content: "\f043"; } i.icon.signup:before { content: "\f044"; } i.icon.plus.circle:before { content: "\f055"; } i.icon.dont:before { content: "\f05e"; } i.icon.minimize:before { content: "\f066"; } i.icon.add:before { content: "\f067"; } i.icon.eye:before { content: "\f06e"; } i.icon.attention:before { content: "\f06a"; } i.icon.cart:before { content: "\f07a"; } i.icon.shuffle:before { content: "\f074"; } i.icon.talk:before { content: "\f075"; } i.icon.chat:before { content: "\f075"; } i.icon.shopping.cart:before { content: "\f07a"; } i.icon.bar.graph:before { content: "\f080"; } i.icon.area.graph:before { content: "\f1fe"; } i.icon.pie.graph:before { content: "\f200"; } i.icon.line.graph:before { content: "\f201"; } i.icon.key:before { content: "\f084"; } i.icon.cogs:before { content: "\f085"; } i.icon.discussions:before { content: "\f086"; } i.icon.like.outline:before { content: "\f087"; } i.icon.dislike.outline:before { content: "\f088"; } i.icon.heart.outline:before { content: "\f08a"; } i.icon.log.out:before { content: "\f08b"; } i.icon.thumb.tack:before { content: "\f08d"; } i.icon.winner:before { content: "\f091"; } i.icon.bookmark.outline:before { content: "\f097"; } i.icon.phone:before { content: "\f095"; } i.icon.phone.square:before { content: "\f098"; } i.icon.credit.card:before { content: "\f09d"; } i.icon.hdd.outline:before { content: "\f0a0"; } i.icon.bullhorn:before { content: "\f0a1"; } i.icon.bell:before { content: "\f0f3"; } i.icon.bell.outline:before { content: "\f0a2"; } i.icon.bell.slash:before { content: "\f1f6"; } i.icon.bell.slash.outline:before { content: "\f1f7"; } i.icon.hand.outline.right:before { content: "\f0a4"; } i.icon.hand.outline.left:before { content: "\f0a5"; } i.icon.hand.outline.up:before { content: "\f0a6"; } i.icon.hand.outline.down:before { content: "\f0a7"; } i.icon.globe:before { content: "\f0ac"; } i.icon.wrench:before { content: "\f0ad"; } i.icon.briefcase:before { content: "\f0b1"; } i.icon.group:before { content: "\f0c0"; } i.icon.flask:before { content: "\f0c3"; } i.icon.sidebar:before { content: "\f0c9"; } i.icon.bars:before { content: "\f0c9"; } i.icon.list.ul:before { content: "\f0ca"; } i.icon.list.ol:before { content: "\f0cb"; } i.icon.numbered.list:before { content: "\f0cb"; } i.icon.magic:before { content: "\f0d0"; } i.icon.truck:before { content: "\f0d1"; } i.icon.currency:before { content: "\f0d6"; } i.icon.triangle.down:before { content: "\f0d7"; } i.icon.dropdown:before { content: "\f0d7"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } i.icon.envelope:before { content: "\f0e0"; } i.icon.conversation:before { content: "\f0e6"; } i.icon.umbrella:before { content: "\f0e9"; } i.icon.clipboard:before { content: "\f0ea"; } i.icon.lightbulb:before { content: "\f0eb"; } i.icon.ambulance:before { content: "\f0f9"; } i.icon.medkit:before { content: "\f0fa"; } i.icon.fighter.jet:before { content: "\f0fb"; } i.icon.beer:before { content: "\f0fc"; } i.icon.plus.square:before { content: "\f0fe"; } i.icon.computer:before { content: "\f108"; } i.icon.circle.outline:before { content: "\f10c"; } i.icon.intersex:before { content: "\f10c"; } i.icon.asexual:before { content: "\f10c"; } i.icon.spinner:before { content: "\f110"; } i.icon.gamepad:before { content: "\f11b"; } i.icon.star.half.full:before { content: "\f123"; } i.icon.question:before { content: "\f128"; } i.icon.eraser:before { content: "\f12d"; } i.icon.microphone:before { content: "\f130"; } i.icon.microphone.slash:before { content: "\f131"; } i.icon.shield:before { content: "\f132"; } i.icon.target:before { content: "\f140"; } i.icon.play.circle:before { content: "\f144"; } i.icon.pencil.square:before { content: "\f14b"; } i.icon.compass:before { content: "\f14e"; } i.icon.amex:before { content: "\f1f3"; } i.icon.eur:before { content: "\f153"; } i.icon.gbp:before { content: "\f154"; } i.icon.usd:before { content: "\f155"; } i.icon.inr:before { content: "\f156"; } i.icon.cny:before, i.icon.rmb:before, i.icon.jpy:before { content: "\f157"; } i.icon.rouble:before, i.icon.rub:before { content: "\f158"; } i.icon.krw:before { content: "\f159"; } i.icon.btc:before { content: "\f15a"; } i.icon.sheqel:before, i.icon.ils:before { content: "\f20b"; } i.icon.try:before { content: "\f195"; } i.icon.zip:before { content: "\f187"; } i.icon.dot.circle.outline:before { content: "\f192"; } i.icon.sliders:before { content: "\f1de"; } i.icon.wi-fi:before { content: "\f1eb"; } i.icon.graduation:before { content: "\f19d"; } i.icon.weixin:before { content: "\f1d7"; } i.icon.binoculars:before { content: "\f1e5"; } i.icon.gratipay:before { content: "\f184"; } i.icon.genderless:before { content: "\f1db"; } i.icon.teletype:before { content: "\f1e4"; } i.icon.power.cord:before { content: "\f1e6"; } i.icon.tty:before { content: "\f1e4"; } i.icon.cc:before { content: "\f20a"; } i.icon.plus.cart:before { content: "\f217"; } i.icon.arrow.down.cart:before { content: "\f218"; } i.icon.detective:before { content: "\f21b"; } i.icon.venus:before { content: "\f221"; } i.icon.mars:before { content: "\f222"; } i.icon.mercury:before { content: "\f223"; } i.icon.venus.double:before { content: "\f226"; } i.icon.female.homosexual:before { content: "\f226"; } i.icon.mars.double:before { content: "\f227"; } i.icon.male.homosexual:before { content: "\f227"; } i.icon.venus.mars:before { content: "\f228"; } i.icon.mars.stroke:before { content: "\f229"; } i.icon.mars.alternate:before { content: "\f229"; } i.icon.mars.vertical:before { content: "\f22a"; } i.icon.mars.horizontal:before { content: "\f22b"; } i.icon.mars.stroke.vertical:before { content: "\f22a"; } i.icon.mars.stroke.horizontal:before { content: "\f22b"; } i.icon.facebook.official { content: "\f230"; } i.icon.pinterest.official { content: "\f231"; } i.icon.bed:before { content: "\f236"; } /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Sidebar * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- 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; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: none; transition: none; will-change: transform; -webkit-transform: translate3d(0, 0, 0); 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 > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*-------------- Direction ---------------*/ .ui.left.sidebar { right: auto; left: 0px; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .ui.right.sidebar { right: 0px !important; left: auto !important; -webkit-transform: translate3d(100%, 0%, 0); 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; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .ui.bottom.sidebar { top: auto !important; bottom: 0px !important; -webkit-transform: translate3d(0, 100%, 0); 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) { -webkit-transform: translate3d(0, 0, 0); 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; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; will-change: transform; z-index: 101; } /*-------------- Page ---------------*/ .pushable > .pusher { position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; min-height: 100%; -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-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; -webkit-transition: opacity 500ms; 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; -webkit-transform: translate3d(0, 0, 0); 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 { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } .ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher { -webkit-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0); } .ui.visible.top.sidebar ~ .fixed, .ui.visible.top.sidebar ~ .pusher { -webkit-transform: translate3d(0, 36px, 0); transform: translate3d(0, 36px, 0); } .ui.visible.bottom.sidebar ~ .fixed, .ui.visible.bottom.sidebar ~ .pusher { -webkit-transform: translate3d(0, -36px, 0); 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 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*-------------- iOS ---------------*/ /* iOS incorrectly sizes document when content is presented outside of view with 2Dtranslate */ html.ios { overflow-x: hidden; -webkit-overflow-scrolling: touch; } html.ios, html.ios body { height: initial !important; } /******************************* 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 { -webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0); } .ui.visible[class*="very thin"].left.sidebar ~ .fixed, .ui.visible[class*="very thin"].left.sidebar ~ .pusher { -webkit-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } .ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher { -webkit-transform: translate3d(350px, 0, 0); transform: translate3d(350px, 0, 0); } .ui.visible[class*="very wide"].left.sidebar ~ .fixed, .ui.visible[class*="very wide"].left.sidebar ~ .pusher { -webkit-transform: translate3d(475px, 0, 0); transform: translate3d(475px, 0, 0); } /* Right Visible */ .ui.visible.thin.right.sidebar ~ .fixed, .ui.visible.thin.right.sidebar ~ .pusher { -webkit-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0); } .ui.visible[class*="very thin"].right.sidebar ~ .fixed, .ui.visible[class*="very thin"].right.sidebar ~ .pusher { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } .ui.visible.wide.right.sidebar ~ .fixed, .ui.visible.wide.right.sidebar ~ .pusher { -webkit-transform: translate3d(-350px, 0, 0); transform: translate3d(-350px, 0, 0); } .ui.visible[class*="very wide"].right.sidebar ~ .fixed, .ui.visible[class*="very wide"].right.sidebar ~ .pusher { -webkit-transform: translate3d(-475px, 0, 0); transform: translate3d(-475px, 0, 0); } /******************************* Animations *******************************/ /*-------------- Overlay ---------------*/ /* Set-up */ .ui.overlay.sidebar { z-index: 102; } /* Initial */ .ui.left.overlay.sidebar { -webkit-transform: translate3d(-100%, 0%, 0); transform: translate3d(-100%, 0%, 0); } .ui.right.overlay.sidebar { -webkit-transform: translate3d(100%, 0%, 0); transform: translate3d(100%, 0%, 0); } .ui.top.overlay.sidebar { -webkit-transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0); } .ui.bottom.overlay.sidebar { -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End - Sidebar */ .ui.visible.left.overlay.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } .ui.visible.right.overlay.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } .ui.visible.top.overlay.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } .ui.visible.bottom.overlay.sidebar { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher { -webkit-transform: none !important; transform: none !important; } /*-------------- Push ---------------*/ /* Initial */ .ui.push.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.push.sidebar { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .ui.right.push.sidebar { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .ui.top.push.sidebar { -webkit-transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0); } .ui.bottom.push.sidebar { -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0); } /* End */ .ui.visible.push.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } /*-------------- Uncover ---------------*/ /* Initial */ .ui.uncover.sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; } /*-------------- Slide Along ---------------*/ /* Initial */ .ui.slide.along.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.along.sidebar { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .ui.right.slide.along.sidebar { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .ui.top.slide.along.sidebar { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .ui.bottom.slide.along.sidebar { -webkit-transform: translate3d(0%, 50%, 0); transform: translate3d(0%, 50%, 0); } /* Animation */ .ui.animating.slide.along.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } /*-------------- Slide Out ---------------*/ /* Initial */ .ui.slide.out.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.out.sidebar { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .ui.right.slide.out.sidebar { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .ui.top.slide.out.sidebar { -webkit-transform: translate3d(0%, 50%, 0); transform: translate3d(0%, 50%, 0); } .ui.bottom.slide.out.sidebar { -webkit-transform: translate3d(0%, -50%, 0); transform: translate3d(0%, -50%, 0); } /* Animation */ .ui.animating.slide.out.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } /*-------------- Scale Down ---------------*/ /* Initial */ .ui.scale.down.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.scale.down.sidebar { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .ui.right.scale.down.sidebar { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .ui.top.scale.down.sidebar { -webkit-transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0); } .ui.bottom.scale.down.sidebar { -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0); } /* Pusher - Initial */ .ui.scale.down.left.sidebar ~ .pusher { -webkit-transform-origin: 75% 50%; transform-origin: 75% 50%; } .ui.scale.down.right.sidebar ~ .pusher { -webkit-transform-origin: 25% 50%; transform-origin: 25% 50%; } .ui.scale.down.top.sidebar ~ .pusher { -webkit-transform-origin: 50% 75%; transform-origin: 50% 75%; } .ui.scale.down.bottom.sidebar ~ .pusher { -webkit-transform-origin: 50% 25%; transform-origin: 50% 25%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar { -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-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 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher { -webkit-transform: scale(0.75); transform: scale(0.75); } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* */ /*! * # Semantic UI - Transition * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 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 */ /* Path to site override folder */ /******************************* 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 */ /* Line Height Default For Inputs in Browser */ /*------------------- 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 --------------------*/ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*------------------- 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 */ /*------------------- 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. */ /*------------------- 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 */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- 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 *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Transition *******************************/ /* Packaged Theme */ /******************************* Transition *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Transitions *******************************/ .transition { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { -webkit-backface-visibility: hidden; 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 { -webkit-animation-play-state: paused; animation-play-state: paused; } /******************************* Variations *******************************/ .looping.transition { -webkit-animation-iteration-count: infinite; 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 { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .transition.browse.in { -webkit-animation-name: browseIn; animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { -webkit-animation-name: browseOutLeft; animation-name: browseOutLeft; } .transition.browse.right.out { -webkit-animation-name: browseOutRight; animation-name: browseOutRight; } /* In */ @-webkit-keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } @keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @-webkit-keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @-webkit-keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { -webkit-animation-name: dropIn; animation-name: dropIn; } .drop.transition.out { -webkit-animation-name: dropOut; animation-name: dropOut; } /* Drop */ @-webkit-keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .transition[class*="fade up"].in { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .transition[class*="fade down"].in { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .transition[class*="fade left"].in { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .transition[class*="fade right"].in { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .transition.fade.out { -webkit-animation-name: fadeOut; animation-name: fadeOut; } .transition[class*="fade up"].out { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } .transition[class*="fade down"].out { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } .transition[class*="fade left"].out { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .transition[class*="fade right"].out { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /* In */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } /* Out */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { -webkit-animation-duration: 600ms; animation-duration: 600ms; } .horizontal.flip.transition.in { -webkit-animation-name: horizontalFlipIn; animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { -webkit-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut; } .vertical.flip.transition.in { -webkit-animation-name: verticalFlipIn; animation-name: verticalFlipIn; } .vertical.flip.transition.out { -webkit-animation-name: verticalFlipOut; animation-name: verticalFlipOut; } /* In */ @-webkit-keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @-webkit-keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @-webkit-keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { -webkit-animation-name: scaleIn; animation-name: scaleIn; } .scale.transition.out { -webkit-animation-name: scaleOut; animation-name: scaleOut; } @-webkit-keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Out */ @-webkit-keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { -webkit-animation-name: flyIn; animation-name: flyIn; } .transition[class*="fly up"].in { -webkit-animation-name: flyInUp; animation-name: flyInUp; } .transition[class*="fly down"].in { -webkit-animation-name: flyInDown; animation-name: flyInDown; } .transition[class*="fly left"].in { -webkit-animation-name: flyInLeft; animation-name: flyInLeft; } .transition[class*="fly right"].in { -webkit-animation-name: flyInRight; animation-name: flyInRight; } /* Outward */ .transition.fly.out { -webkit-animation-name: flyOut; animation-name: flyOut; } .transition[class*="fly up"].out { -webkit-animation-name: flyOutUp; animation-name: flyOutUp; } .transition[class*="fly down"].out { -webkit-animation-name: flyOutDown; animation-name: flyOutDown; } .transition[class*="fly left"].out { -webkit-animation-name: flyOutLeft; animation-name: flyOutLeft; } .transition[class*="fly right"].out { -webkit-animation-name: flyOutRight; animation-name: flyOutRight; } /* In */ @-webkit-keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } /* Out */ @-webkit-keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes flyOutUp { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes flyOutUp { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes flyOutDown { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes flyOutDown { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center left; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } /* Out */ @-webkit-keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .transition[class*="swing down"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center left; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @-webkit-keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } @keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } /* Out */ @-webkit-keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @-webkit-keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } @keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: flash; animation-name: flash; } .shake.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: shake; animation-name: shake; } .bounce.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: bounce; animation-name: bounce; } .tada.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: tada; animation-name: tada; } .pulse.transition { -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-name: pulse; animation-name: pulse; } .jiggle.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: jiggle; animation-name: jiggle; } /* Flash */ @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } /* Bounce */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } /* Tada */ @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } /* Pulse */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* Rubberband */ @-webkit-keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /******************************* Site Overrides *******************************/ /* */ .hidden.menu { display: none; } .ui[class*="equal height"].grid > .row > .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .ui[class*="equal height"].grid > .row p { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 0.5em 0em 2em; } .ui.stripe { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); padding: 4em 0; } .ui.stripe .grid .row { margin: 2rem 0rem; } #landing.index .column > p { font-size: 16px; line-height: 1.6; margin: 1em 0em; } /* ========================================================================== Following bar ========================================================================== */ #landing.index .light.following.bar { padding: 1em 0em; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04); } #landing.index .following.bar { position: fixed; top: 0px; z-index: 900; left: 0%; padding: 2em 0em; width: 100%; box-shadow: 0px 0px 0px 0px transparent; border-bottom: 1px solid transparent; -webkit-transition: padding 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, border 0.5s ease; transition: padding 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, border 0.5s ease; } /* ========================================================================== Masthead ========================================================================== */ #landing.index .masthead { position: relative; overflow: hidden; text-align: center; padding: 0em; color: rgba(255, 255, 255, 0.9); margin-bottom: 0px; border-bottom: none; background-color: #000000; background-position: 50% 50%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #landing.index .masthead.segment h1 { font-size: 3em; color: #ffffff; line-height: 1.2; margin: 0px 0px 0px; padding-bottom: 0px; -webkit-perspective: 500px; perspective: 500px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #landing.index .masthead:after { -webkit-transition: background 6s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 6s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s; transition: background 6s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 6s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s; } #landing.index .masthead > .container { height: 55vh; margin-left: auto !important; margin-right: auto !important; min-height: 600px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .masthead:after { position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; content: ''; background-size: cover; opacity: 0.45; } .masthead.bg4:after { background-image: url(/assets/bg4-9dc932898f0880f61851ca6b97490e184efe4731678a4e2ea9f15973957b694f.jpg); } .masthead h1.ui.header { margin-top: 3em; margin-bottom: 0em; } .masthead h1.ui.header .company { display: block; font-size: 1.75em; font-weight: bold; } .masthead h1.ui.header .tagline { font-size: 0.75em; } .following .secondary.menu .toc.item { display: none; } .following .ui.text.menu { margin: 0; } @media only screen and (max-width: 700px) { .ui.fixed.menu { display: none !important; } .following .secondary.menu .item { display: none; } .following .secondary.menu .menu { display: none; } .following .secondary.menu .toc.item { display: block; } .following .secondary.menu .right.item.filler { display: none !important; } .following .secondary.menu .content.left.aligned { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .masthead.segment { min-height: 350px; } .masthead h1.ui.header { font-size: 2em; margin-top: 1.5em; } .masthead h2 { margin-top: 0.5em; font-size: 1.5em; } } .pitchin-logo-white { text-align: center; max-width: 100%; max-height: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .copyright-text > p { padding-left: 10px; text-align: left; font-size: 0.8em !important; color: darkgray; } .footer.segment { padding: 5em 0em; } .footer .toggle.button { min-width: 180px; } ul.list.address { margin-left: 0; } ul.list.address li { color: rgba(255, 255, 255, 0.5); } ul.list.address li:before { content: ''; } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * */