commit 4636a982d10d4cec4be7db4b26b0441ca01e4463 Author: Łukasz Stolcman Date: Mon May 14 09:56:19 2018 +0200 Initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..dd7e6c1 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# Gitea - Darkmode + +A Github theme for Gitea. + +## Screenshots + +![Repository Page](/images/1.png) + +![Commits List](/images/2.png) + +## Directions + +Put `public/styles.css` into the `public/` directory of your gitea installation (you may need to create it), and place `templates/custom/header.tmpl` into the `templates/custom/` directory of your gitea installation. + +## Credit + +Style is loosely based on: + +- https://github.com/go-gitea/gitea/issues/56 +- https://github.com/go-gitea/gitea/issues/56#issuecomment-275918020 +- http://pastebin.com/NJF5wg9W + +Additional changes are in the end of a file. + diff --git a/images/1.png b/images/1.png new file mode 100644 index 0000000..4153252 Binary files /dev/null and b/images/1.png differ diff --git a/images/2.png b/images/2.png new file mode 100644 index 0000000..5e97f92 Binary files /dev/null and b/images/2.png differ diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..7a57574 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,16473 @@ +/*! + * # Semantic UI 2.1.8 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + 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 +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Page +*******************************/ + +html, +body { + height: 100%; +} +html { + font-size: 13px; +} +body { + margin: 0px; + padding: 0px; + overflow-x: visible; + min-width: 1049px; + background: #FFFFFF; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 13px; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); + font-smoothing: antialiased; +} + + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Arial', '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: 2.25em; +} +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: #4078C0; + text-decoration: none; +} +a:hover { + color: #4078C0; + text-decoration: underline; +} + + +/******************************* + 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); +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Breadcrumb + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Breadcrumb +*******************************/ + +.ui.breadcrumb { + line-height: 1; + display: inline-block; + margin: 0em 0em; + vertical-align: middle; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} + + +/******************************* + Content +*******************************/ + + +/* Divider */ +.ui.breadcrumb .divider { + display: inline-block; + opacity: 1; + margin: 0em 0 0em; + font-size: 1.38461538rem; + color: inherit; + vertical-align: baseline; +} + +/* Link */ +.ui.breadcrumb a { + color: #4078C0; +} +.ui.breadcrumb a:hover { + color: #4078C0; +} + +/* Icon Divider */ +.ui.breadcrumb .icon.divider { + font-size: 0.84615385em; + vertical-align: baseline; +} + +/* Section */ +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: 0em; + padding: 0em; +} + +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: 0.69230769em 1em; +} + + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: bold; +} + + +/******************************* + Variations +*******************************/ + +.ui.mini.breadcrumb { + font-size: 0.69230769rem; +} +.ui.tiny.breadcrumb { + font-size: 0.84615385rem; +} +.ui.small.breadcrumb { + font-size: 0.92307692rem; +} +.ui.breadcrumb { + font-size: 1rem; +} +.ui.large.breadcrumb { + font-size: 1.15384615rem; +} +.ui.big.breadcrumb { + font-size: 1.38461538rem; +} +.ui.huge.breadcrumb { + font-size: 1.46153846rem; +} +.ui.massive.breadcrumb { + font-size: 1.69230769rem; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Button +*******************************/ + +.ui.button { + cursor: pointer; + display: inline-block; + min-height: 1em; + outline: none; + border: none; + vertical-align: baseline; + background: #FBFBFB -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05)); + background: #FBFBFB linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05)); + color: #333333; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + margin: 0em 0.23076923rem 0em 0em; + padding: 0.53846154em 0.92307692em 0.53846154em; + text-transform: none; + text-shadow: none; + font-weight: bold; + line-height: 1.53184em; + font-style: normal; + text-align: center; + text-decoration: none; + border-radius: 0.2307em; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease, background 0.1s ease; + transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease, background 0.1s ease; + will-change: ''; + -webkit-tap-highlight-color: transparent; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-color: #F0F0F0; + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); + background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; + color: rgba(0, 0, 0, 0.8); +} +.ui.button:hover .icon { + opacity: 0.85; +} + +/*-------------- + Focus +---------------*/ + +.ui.button:focus { + background-color: #F0F0F0; + color: rgba(0, 0, 0, 0.8); + background-image: '' !important; + box-shadow: 0px 0px 0px 1px #51A7E8, 0 0 5px rgba(81, 167, 232, 0.5) !important; +} +.ui.button:focus .icon { + opacity: 0.85; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: ''; + background-image: ''; + color: rgba(0, 0, 0, 0.9); + box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 0 3px 5px rgba(0, 0, 0, 0.15) inset !important; +} + +/*-------------- + Active +---------------*/ + +.ui.active.button { + background-color: #DFDFDF; + background-image: none; + box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 0 3px 5px rgba(0, 0, 0, 0.1) inset !important; + color: rgba(0, 0, 0, 0.95); +} +.ui.active.button:hover { + background-color: #DFDFDF; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} +.ui.active.button:active { + background-color: #DFDFDF; + 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.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + 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.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + -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.3 !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: 0.92307692em; +} +.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.76592em; +} +.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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 0px 0px -1px !important; + padding: ''; + font-size: 0.84615385em; + border-color: rgba(0, 0, 0, 0.13); +} + +/* 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: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.facebook.button:hover { + background-color: #304d8a; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.facebook.button:active { + background-color: #2d4373; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Twitter */ +.ui.twitter.button { + background-color: #0084B4; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.twitter.button:hover { + background-color: #00719b; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.twitter.button:active { + background-color: #005f81; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Google Plus */ +.ui.google.plus.button { + background-color: #DC4A38; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.google.plus.button:hover { + background-color: #de321d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.google.plus.button:active { + background-color: #bf3322; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Linked In */ +.ui.linkedin.button { + background-color: #1F88BE; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.linkedin.button:hover { + background-color: #147baf; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.linkedin.button:active { + background-color: #186992; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* YouTube */ +.ui.youtube.button { + background-color: #CC181E; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.youtube.button:hover { + background-color: #bd0d13; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.youtube.button:active { + background-color: #9e1317; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Instagram */ +.ui.instagram.button { + background-color: #49769C; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.instagram.button:hover { + background-color: #3d698e; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.instagram.button:active { + background-color: #395c79; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Pinterest */ +.ui.pinterest.button { + background-color: #00ACED; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.pinterest.button:hover { + background-color: #0099d4; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.pinterest.button:active { + background-color: #0087ba; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* VK */ +.ui.vk.button { + background-color: #4D7198; + color: #FFFFFF; + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.vk.button:hover { + background-color: #41648a; + color: #FFFFFF; +} +.ui.vk.button:active { + background-color: #3c5876; + color: #FFFFFF; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: 18px; + opacity: 1; + margin: 0em 0.07692308em 0em -0.03846154em; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; + vertical-align: ''; + color: ''; +} +.ui.button > .right.icon:not(.button) { + margin: 0em -0.03846154em 0em 0.07692308em; +} + + +/******************************* + 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.30769231em 0.76923077em 0.30769231em; +} +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: 0.30769231em 0.30769231em 0.30769231em; +} +.ui.compact.labeled.icon.buttons .button, +.ui.compact.labeled.icon.button { + padding: 0.30769231em 2.84615385em 0.30769231em; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: 10px; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: 11px; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: 12px; +} +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: 13px; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: 15px; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: 16px; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: 18px; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: 24px; +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button { + padding: 0.53846154em 0.53846154em 0.53846154em; +} +.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: #4078C0 !important; + font-weight: bold; + border-radius: 0.2307em; + text-transform: none; + text-shadow: none !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset; +} +.ui.basic.buttons { + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.13); + border-radius: 0.2307em; +} +.ui.basic.buttons .button { + border-radius: 0em; +} +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background: #E0E0E0 !important; + color: #4078C0 !important; + box-shadow: 0px 0px 0px 1px #51A7E8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + background: #E0E0E0 !important; + color: #4078C0 !important; + box-shadow: 0px 0px 0px 1px #51A7E8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0.13) 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(0, 0, 0, 0.13) 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: #51A7E8; +} +.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 #51A7E8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0.13) 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(0, 0, 0, 0.13) inset inset; +} +.ui.basic.buttons .active.button { + box-shadow: #51A7E8 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: 0 -1px 0 rgba(0, 0, 0, 0.15); + 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(0, 0, 0, 0.13); + 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(0, 0, 0, 0.13); +} +.ui.basic.vertical.buttons .button:first-child { + border-top-width: 0px; +} + +/*-------------- + Labeled Icon +---------------*/ + +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: 3.17307692em !important; + padding-right: 0.92307692em !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.07692308em; + background-color: transparent; + color: ''; + box-shadow: -1px 0px 0px 0px transparent inset; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + top: 0em; + left: 0em; +} + +/* Right Labeled */ +.ui[class*="right labeled"].icon.button { + padding-right: 3.17307692em !important; + padding-left: 0.92307692em !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.2307em; + border-bottom-left-radius: 0.2307em; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.2307em; + border-bottom-right-radius: 0.2307em; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: 0.2307em; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: 0.2307em; +} + +/* Fluid Labeled */ +.ui.fluid[class*="left labeled"].icon.button, +.ui.fluid[class*="right labeled"].icon.button { + padding-left: 0.92307692em !important; + padding-right: 0.92307692em !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: #84D767 !important; + box-shadow: none !important; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + color: #FFFFFF !important; +} +.ui.button.toggle.active:hover { + background-color: #5DC438 !important; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + 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.07692308em; + 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: 0 -1px 0 rgba(0, 0, 0, 0.15); + margin-top: -0.76923077em; + margin-left: -0.76923077em; + width: 1.53846154em; + height: 1.53846154em; + line-height: 1.53846154em; + color: rgba(0, 0, 0, 0.4); + font-style: normal; + font-weight: bold; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) 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(0, 0, 0, 0.13) !important; +} + +/* Top / Bottom */ +.ui.attached.top.button { + border-radius: 0.2307em 0.2307em 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em 0.2307em 0.2307em; +} + +/* Left / Right */ +.ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + padding-right: 0.75em; + border-radius: 0.2307em 0em 0em 0.2307em; +} +.ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: 0.75em; + border-radius: 0em 0.2307em 0.2307em 0em; +} + +/* Plural */ +.ui.attached.buttons { + position: relative; + display: -webkit-box; + display: -webkit-flex; + 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.2307em 0.2307em 0em 0em; +} +.ui[class*="top attached"].buttons .button:first-child { + border-radius: 0.2307em 0em 0em 0em; +} +.ui[class*="top attached"].buttons .button:last-child { + border-radius: 0em 0.2307em 0em 0em; +} +.ui[class*="bottom attached"].buttons { + margin-top: -1px; + border-radius: 0em 0em 0.2307em 0.2307em; +} +.ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0em 0em 0em 0.2307em; +} +.ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0em 0em 0.2307em 0em; +} + +/* Left / Right */ +.ui[class*="left attached"].buttons { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-right: 0em; + margin-left: -1px; + border-radius: 0em 0.2307em 0.2307em 0em; +} +.ui[class*="left attached"].buttons .button:first-child { + margin-left: -1px; + border-radius: 0em 0.2307em 0em 0em; +} +.ui[class*="left attached"].buttons .button:last-child { + margin-left: -1px; + border-radius: 0em 0em 0.2307em 0em; +} +.ui[class*="right attached"].buttons { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: 0em; + margin-right: -1px; + border-radius: 0.2307em 0em 0em 0.2307em; +} +.ui[class*="right attached"].buttons .button:first-child { + margin-left: -1px; + border-radius: 0.2307em 0em 0em 0em; +} +.ui[class*="right attached"].buttons .button:last-child { + margin-left: -1px; + border-radius: 0em 0em 0em 0.2307em; +} + +/*------------------- + 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: -webkit-flex; + 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: #333333; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.black.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #404040; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.black.buttons .button:focus, +.ui.black.button:focus { + background-color: #474747; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #4d4d4d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.black.buttons .active.button, +.ui.black.buttons .active.button:active, +.ui.black.active.button, +.ui.black.button .active.button:active { + background-color: #262626; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.black.buttons .button, +.ui.basic.black.button { + box-shadow: 0px 0px 0px 1px #333333 inset !important; + color: #333333 !important; +} +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #404040 inset !important; + color: #404040 !important; +} +.ui.basic.black.buttons .button:focus, +.ui.basic.black.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #474747 inset !important; + color: #404040 !important; +} +.ui.basic.black.buttons .active.button, +.ui.basic.black.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #262626 inset !important; + color: #4d4d4d !important; +} +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + box-shadow: 0px 0px 0px 1px #4d4d4d inset !important; + color: #4d4d4d !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 #DDDDDD 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: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.grey.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.grey.buttons .button:hover, +.ui.grey.button:hover { + background-color: #838383; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.grey.buttons .button:focus, +.ui.grey.button:focus { + background-color: #8a8a8a; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.grey.buttons .button:active, +.ui.grey.button:active { + background-color: #909090; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.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: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* 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 #DDDDDD 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: #333333; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover { + background-color: #cfd0d2; +} +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus { + background-color: #c7c9cb; +} +.ui.inverted.grey.buttons .active.button, +.ui.inverted.grey.active.button { + background-color: #cfd0d2; +} +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + background-color: #c2c4c5; +} + +/* Inverted Basic */ +.ui.inverted.grey.basic.buttons .button, +.ui.inverted.grey.buttons .basic.button, +.ui.inverted.grey.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:hover, +.ui.inverted.grey.buttons .basic.button:hover, +.ui.inverted.grey.basic.button:hover { + box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.button:focus { + box-shadow: 0px 0px 0px 2px #c7c9cb inset !important; + color: #DCDDDE !important; +} +.ui.inverted.grey.basic.buttons .active.button, +.ui.inverted.grey.buttons .basic.active.button, +.ui.inverted.grey.basic.active.button { + box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:active, +.ui.inverted.grey.buttons .basic.button:active, +.ui.inverted.grey.basic.button:active { + box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important; + color: #FFFFFF !important; +} + +/*--- Brown ---*/ + +.ui.brown.buttons .button, +.ui.brown.button { + background-color: #A5673F; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.brown.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.brown.buttons .button:hover, +.ui.brown.button:hover { + background-color: #975b33; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.brown.buttons .button:focus, +.ui.brown.button:focus { + background-color: #90532b; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.brown.buttons .button:active, +.ui.brown.button:active { + background-color: #805031; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.brown.buttons .active.button, +.ui.brown.buttons .active.button:active, +.ui.brown.active.button, +.ui.brown.button .active.button:active { + background-color: #995a31; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + box-shadow: 0px 0px 0px 1px #A5673F inset !important; + color: #A5673F !important; +} +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #975b33 inset !important; + color: #975b33 !important; +} +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #90532b inset !important; + color: #975b33 !important; +} +.ui.basic.brown.buttons .active.button, +.ui.basic.brown.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #995a31 inset !important; + color: #805031 !important; +} +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + box-shadow: 0px 0px 0px 1px #805031 inset !important; + color: #805031 !important; +} +.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.brown.buttons .button, +.ui.inverted.brown.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #D67C1C inset !important; + color: #D67C1C; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover, +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus, +.ui.inverted.brown.buttons .button.active, +.ui.inverted.brown.button.active, +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover { + background-color: #c86f11; +} +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus { + background-color: #c16808; +} +.ui.inverted.brown.buttons .active.button, +.ui.inverted.brown.active.button { + background-color: #cc6f0d; +} +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + background-color: #a96216; +} + +/* Inverted Basic */ +.ui.inverted.brown.basic.buttons .button, +.ui.inverted.brown.buttons .basic.button, +.ui.inverted.brown.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.brown.basic.buttons .button:hover, +.ui.inverted.brown.buttons .basic.button:hover, +.ui.inverted.brown.basic.button:hover { + box-shadow: 0px 0px 0px 2px #c86f11 inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.button:focus { + box-shadow: 0px 0px 0px 2px #c16808 inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .active.button, +.ui.inverted.brown.buttons .basic.active.button, +.ui.inverted.brown.basic.active.button { + box-shadow: 0px 0px 0px 2px #cc6f0d inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .button:active, +.ui.inverted.brown.buttons .basic.button:active, +.ui.inverted.brown.basic.button:active { + box-shadow: 0px 0px 0px 2px #a96216 inset !important; + color: #D67C1C !important; +} + +/*--- Blue ---*/ + +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #80A6CD; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.blue.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover { + background-color: #6999ca; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.blue.buttons .button:focus, +.ui.blue.button:focus { + background-color: #5991cb; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #5b8cbf; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.blue.buttons .active.button, +.ui.blue.buttons .active.button:active, +.ui.blue.active.button, +.ui.blue.button .active.button:active { + background-color: #6799cc; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + box-shadow: 0px 0px 0px 1px #80A6CD inset !important; + color: #80A6CD !important; +} +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #6999ca inset !important; + color: #6999ca !important; +} +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #5991cb inset !important; + color: #6999ca !important; +} +.ui.basic.blue.buttons .active.button, +.ui.basic.blue.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #6799cc inset !important; + color: #5b8cbf !important; +} +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + box-shadow: 0px 0px 0px 1px #5b8cbf inset !important; + color: #5b8cbf !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: #78CB5B; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.green.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background-color: #65cb41; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.green.buttons .button:focus, +.ui.green.button:focus { + background-color: #59cd30; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #5bb83b; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.green.buttons .active.button, +.ui.green.buttons .active.button:active, +.ui.green.active.button, +.ui.green.button .active.button:active { + background-color: #64ce3e; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.green.buttons .button, +.ui.basic.green.button { + box-shadow: 0px 0px 0px 1px #78CB5B inset !important; + color: #78CB5B !important; +} +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #65cb41 inset !important; + color: #65cb41 !important; +} +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #59cd30 inset !important; + color: #65cb41 !important; +} +.ui.basic.green.buttons .active.button, +.ui.basic.green.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #64ce3e inset !important; + color: #5bb83b !important; +} +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + box-shadow: 0px 0px 0px 1px #5bb83b inset !important; + color: #5bb83b !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: #22be34; +} +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus { + background-color: #19b82b; +} +.ui.inverted.green.buttons .active.button, +.ui.inverted.green.active.button { + background-color: #1fc231; +} +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + background-color: #25a233; +} + +/* Inverted Basic */ +.ui.inverted.green.basic.buttons .button, +.ui.inverted.green.buttons .basic.button, +.ui.inverted.green.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.green.basic.buttons .button:hover, +.ui.inverted.green.buttons .basic.button:hover, +.ui.inverted.green.basic.button:hover { + box-shadow: 0px 0px 0px 2px #22be34 inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.button:focus { + box-shadow: 0px 0px 0px 2px #19b82b inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .active.button, +.ui.inverted.green.buttons .basic.active.button, +.ui.inverted.green.basic.active.button { + box-shadow: 0px 0px 0px 2px #1fc231 inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .button:active, +.ui.inverted.green.buttons .basic.button:active, +.ui.inverted.green.basic.button:active { + box-shadow: 0px 0px 0px 2px #25a233 inset !important; + color: #2ECC40 !important; +} + +/*--- Orange ---*/ + +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #D26911; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.orange.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover { + background-color: #c35c07; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.orange.buttons .button:focus, +.ui.orange.button:focus { + background-color: #ba5500; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #a3510d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.orange.buttons .active.button, +.ui.orange.buttons .active.button:active, +.ui.orange.active.button, +.ui.orange.button .active.button:active { + background-color: #c75c02; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + box-shadow: 0px 0px 0px 1px #D26911 inset !important; + color: #D26911 !important; +} +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #c35c07 inset !important; + color: #c35c07 !important; +} +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #ba5500 inset !important; + color: #c35c07 !important; +} +.ui.basic.orange.buttons .active.button, +.ui.basic.orange.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #c75c02 inset !important; + color: #a3510d !important; +} +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + box-shadow: 0px 0px 0px 1px #a3510d inset !important; + color: #a3510d !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: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.pink.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.pink.buttons .button:hover, +.ui.pink.button:hover { + background-color: #e61a8d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.pink.buttons .button:focus, +.ui.pink.button:focus { + background-color: #e10f85; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.pink.buttons .button:active, +.ui.pink.button:active { + background-color: #c71f7e; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.pink.buttons .active.button, +.ui.pink.buttons .active.button:active, +.ui.pink.active.button, +.ui.pink.button .active.button:active { + background-color: #ea158d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + box-shadow: 0px 0px 0px 1px #E03997 inset !important; + color: #E03997 !important; +} +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #e61a8d inset !important; + color: #e61a8d !important; +} +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #e10f85 inset !important; + color: #e61a8d !important; +} +.ui.basic.pink.buttons .active.button, +.ui.basic.pink.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #ea158d inset !important; + color: #c71f7e !important; +} +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + box-shadow: 0px 0px 0px 1px #c71f7e inset !important; + color: #c71f7e !important; +} +.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.pink.buttons .button, +.ui.inverted.pink.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #FF8EDF inset !important; + color: #FF8EDF; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover, +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus, +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active, +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover { + background-color: #ff74d8; +} +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus { + background-color: #ff65d3; +} +.ui.inverted.pink.buttons .active.button, +.ui.inverted.pink.active.button { + background-color: #ff74d8; +} +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + background-color: #ff5bd1; +} + +/* Inverted Basic */ +.ui.inverted.pink.basic.buttons .button, +.ui.inverted.pink.buttons .basic.button, +.ui.inverted.pink.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.pink.basic.buttons .button:hover, +.ui.inverted.pink.buttons .basic.button:hover, +.ui.inverted.pink.basic.button:hover { + box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.button:focus { + box-shadow: 0px 0px 0px 2px #ff65d3 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .active.button, +.ui.inverted.pink.buttons .basic.active.button, +.ui.inverted.pink.basic.active.button { + box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .button:active, +.ui.inverted.pink.buttons .basic.button:active, +.ui.inverted.pink.basic.button:active { + box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important; + color: #FF8EDF !important; +} + +/*--- Violet ---*/ + +.ui.violet.buttons .button, +.ui.violet.button { + background-color: #6435C9; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.violet.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.violet.buttons .button:hover, +.ui.violet.button:hover { + background-color: #5829bb; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.violet.buttons .button:focus, +.ui.violet.button:focus { + background-color: #4f20b5; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.violet.buttons .button:active, +.ui.violet.button:active { + background-color: #502aa1; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.violet.buttons .active.button, +.ui.violet.buttons .active.button:active, +.ui.violet.active.button, +.ui.violet.button .active.button:active { + background-color: #5626bf; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + box-shadow: 0px 0px 0px 1px #6435C9 inset !important; + color: #6435C9 !important; +} +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #5829bb inset !important; + color: #5829bb !important; +} +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #4f20b5 inset !important; + color: #5829bb !important; +} +.ui.basic.violet.buttons .active.button, +.ui.basic.violet.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #5626bf inset !important; + color: #502aa1 !important; +} +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + box-shadow: 0px 0px 0px 1px #502aa1 inset !important; + color: #502aa1 !important; +} +.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.violet.buttons .button, +.ui.inverted.violet.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #A291FB inset !important; + color: #A291FB; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover, +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus, +.ui.inverted.violet.buttons .button.active, +.ui.inverted.violet.button.active, +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover { + background-color: #8a73ff; +} +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus { + background-color: #7d64ff; +} +.ui.inverted.violet.buttons .active.button, +.ui.inverted.violet.active.button { + background-color: #8a73ff; +} +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + background-color: #7860f9; +} + +/* Inverted Basic */ +.ui.inverted.violet.basic.buttons .button, +.ui.inverted.violet.buttons .basic.button, +.ui.inverted.violet.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.violet.basic.buttons .button:hover, +.ui.inverted.violet.buttons .basic.button:hover, +.ui.inverted.violet.basic.button:hover { + box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.button:focus { + box-shadow: 0px 0px 0px 2px #7d64ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .active.button, +.ui.inverted.violet.buttons .basic.active.button, +.ui.inverted.violet.basic.active.button { + box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .button:active, +.ui.inverted.violet.buttons .basic.button:active, +.ui.inverted.violet.basic.button:active { + box-shadow: 0px 0px 0px 2px #7860f9 inset !important; + color: #A291FB !important; +} + +/*--- Purple ---*/ + +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #A333C8; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.purple.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover { + background-color: #9627ba; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.purple.buttons .button:focus, +.ui.purple.button:focus { + background-color: #8f1eb4; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #82299f; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.purple.buttons .active.button, +.ui.purple.buttons .active.button:active, +.ui.purple.active.button, +.ui.purple.button .active.button:active { + background-color: #9724be; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + box-shadow: 0px 0px 0px 1px #A333C8 inset !important; + color: #A333C8 !important; +} +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #9627ba inset !important; + color: #9627ba !important; +} +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important; + color: #9627ba !important; +} +.ui.basic.purple.buttons .active.button, +.ui.basic.purple.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #9724be inset !important; + color: #82299f !important; +} +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + box-shadow: 0px 0px 0px 1px #82299f inset !important; + color: #82299f !important; +} +.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.purple.buttons .button, +.ui.inverted.purple.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #DC73FF inset !important; + color: #DC73FF; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover, +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus, +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active, +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover { + background-color: #d65aff; +} +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus { + background-color: #d24aff; +} +.ui.inverted.purple.buttons .active.button, +.ui.inverted.purple.active.button { + background-color: #d65aff; +} +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + background-color: #cf40ff; +} + +/* Inverted Basic */ +.ui.inverted.purple.basic.buttons .button, +.ui.inverted.purple.buttons .basic.button, +.ui.inverted.purple.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.basic.buttons .button:hover, +.ui.inverted.purple.buttons .basic.button:hover, +.ui.inverted.purple.basic.button:hover { + box-shadow: 0px 0px 0px 2px #d65aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.button:focus { + box-shadow: 0px 0px 0px 2px #d24aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .active.button, +.ui.inverted.purple.buttons .basic.active.button, +.ui.inverted.purple.basic.active.button { + box-shadow: 0px 0px 0px 2px #d65aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .button:active, +.ui.inverted.purple.buttons .basic.button:active, +.ui.inverted.purple.basic.button:active { + box-shadow: 0px 0px 0px 2px #cf40ff inset !important; + color: #DC73FF !important; +} + +/*--- Red ---*/ + +.ui.red.buttons .button, +.ui.red.button { + background-color: #DB2828; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.red.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover { + background-color: #d01919; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.red.buttons .button:focus, +.ui.red.button:focus { + background-color: #ca1010; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #b21e1e; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.red.buttons .active.button, +.ui.red.buttons .active.button:active, +.ui.red.active.button, +.ui.red.button .active.button:active { + background-color: #d41515; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.red.buttons .button, +.ui.basic.red.button { + box-shadow: 0px 0px 0px 1px #DB2828 inset !important; + color: #DB2828 !important; +} +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #d01919 inset !important; + color: #d01919 !important; +} +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #ca1010 inset !important; + color: #d01919 !important; +} +.ui.basic.red.buttons .active.button, +.ui.basic.red.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #d41515 inset !important; + color: #b21e1e !important; +} +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + box-shadow: 0px 0px 0px 1px #b21e1e inset !important; + color: #b21e1e !important; +} +.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.red.buttons .button, +.ui.inverted.red.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #FF695E inset !important; + color: #FF695E; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover, +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus, +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active, +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover { + background-color: #ff5144; +} +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus { + background-color: #ff4335; +} +.ui.inverted.red.buttons .active.button, +.ui.inverted.red.active.button { + background-color: #ff5144; +} +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + background-color: #ff392b; +} + +/* Inverted Basic */ +.ui.inverted.red.basic.buttons .button, +.ui.inverted.red.buttons .basic.button, +.ui.inverted.red.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.red.basic.buttons .button:hover, +.ui.inverted.red.buttons .basic.button:hover, +.ui.inverted.red.basic.button:hover { + box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.button:focus { + box-shadow: 0px 0px 0px 2px #ff4335 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .active.button, +.ui.inverted.red.buttons .basic.active.button, +.ui.inverted.red.basic.active.button { + box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .button:active, +.ui.inverted.red.buttons .basic.button:active, +.ui.inverted.red.basic.button:active { + box-shadow: 0px 0px 0px 2px #ff392b inset !important; + color: #FF695E !important; +} + +/*--- Teal ---*/ + +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.teal.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover { + background-color: #009c95; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.teal.buttons .button:focus, +.ui.teal.button:focus { + background-color: #008c86; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00827c; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.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: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* 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: #333333; +} +.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: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.olive.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.olive.buttons .button:hover, +.ui.olive.button:hover { + background-color: #a7bd0d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.olive.buttons .button:focus, +.ui.olive.button:focus { + background-color: #a0b605; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.olive.buttons .button:active, +.ui.olive.button:active { + background-color: #8d9e13; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.olive.buttons .active.button, +.ui.olive.buttons .active.button:active, +.ui.olive.active.button, +.ui.olive.button .active.button:active { + background-color: #aac109; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* Basic */ +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + box-shadow: 0px 0px 0px 1px #B5CC18 inset !important; + color: #B5CC18 !important; +} +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #a7bd0d inset !important; + color: #a7bd0d !important; +} +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #a0b605 inset !important; + color: #a7bd0d !important; +} +.ui.basic.olive.buttons .active.button, +.ui.basic.olive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px 1px #aac109 inset !important; + color: #8d9e13 !important; +} +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + box-shadow: 0px 0px 0px 1px #8d9e13 inset !important; + color: #8d9e13 !important; +} +.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.olive.buttons .button, +.ui.inverted.olive.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px #D9E778 inset !important; + color: #D9E778; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover, +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus, +.ui.inverted.olive.buttons .button.active, +.ui.inverted.olive.button.active, +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + box-shadow: none !important; + color: #333333; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover { + background-color: #d8ea5c; +} +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus { + background-color: #daef47; +} +.ui.inverted.olive.buttons .active.button, +.ui.inverted.olive.active.button { + background-color: #daed59; +} +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + background-color: #cddf4d; +} + +/* Inverted Basic */ +.ui.inverted.olive.basic.buttons .button, +.ui.inverted.olive.buttons .basic.button, +.ui.inverted.olive.basic.button { + background-color: transparent; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.olive.basic.buttons .button:hover, +.ui.inverted.olive.buttons .basic.button:hover, +.ui.inverted.olive.basic.button:hover { + box-shadow: 0px 0px 0px 2px #d8ea5c inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.button:focus { + box-shadow: 0px 0px 0px 2px #daef47 inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .active.button, +.ui.inverted.olive.buttons .basic.active.button, +.ui.inverted.olive.basic.active.button { + box-shadow: 0px 0px 0px 2px #daed59 inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .button:active, +.ui.inverted.olive.buttons .basic.button:active, +.ui.inverted.olive.basic.button:active { + box-shadow: 0px 0px 0px 2px #cddf4d inset !important; + color: #D9E778 !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.buttons .button, +.ui.yellow.button { + background-color: #FBBD08; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.yellow.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.yellow.buttons .button:hover, +.ui.yellow.button:hover { + background-color: #eaae00; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.yellow.buttons .button:focus, +.ui.yellow.button:focus { + background-color: #daa300; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.yellow.buttons .button:active, +.ui.yellow.button:active { + background-color: #cd9903; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.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: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* 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: #333333; +} +.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: #78CB5B; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.primary.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: #65cb41; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: #59cd30; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #5bb83b; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.primary.buttons .active.button, +.ui.primary.active.button { + background-color: #64ce3e; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/*------------------- + Secondary +--------------------*/ + +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #333333; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.secondary.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover { + background-color: #404040; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.secondary.buttons .button:focus, +.ui.secondary.button:focus { + background-color: #474747; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #4d4d4d; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.secondary.buttons .active.button, +.ui.secondary.active.button { + background-color: #404040; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/*--------------- + Positive +----------------*/ + +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #84D767 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.positive.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: #5DC438 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: #63dc39 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #63cc3f !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.positive.buttons .active.button, +.ui.positive.active.button, +.ui.positive.buttons .active.button:active { + background-color: #6fdb49; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/*--------------- + Negative +----------------*/ + +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #DB2828 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); + background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +} +.ui.negative.button { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background-color: #d01919 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: #ca1010 !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #b21e1e !important; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} +.ui.negative.buttons .active.button, +.ui.negative.active.button, +.ui.negative.buttons .active.button:active { + background-color: #d41515; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); +} + + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + font-size: 0em; + vertical-align: baseline; + margin: 0em 0.23076923rem 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; + -webkit-flex: 1 0 auto; + -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 rgba(0, 0, 0, 0.13) inset, 0px 0em 0px 0px rgba(0, 0, 0, 0.13) inset; +} +.ui.buttons .button:first-child { + border-left: none; + margin-left: 0em; + border-top-left-radius: 0.2307em; + border-bottom-left-radius: 0.2307em; +} +.ui.buttons .button:last-child { + border-top-right-radius: 0.2307em; + border-bottom-right-radius: 0.2307em; +} + +/* Vertical Style */ +.ui.vertical.buttons { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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.2307em 0.2307em 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.2307em 0.2307em; +} + + +/******************************* + Overrides +*******************************/ + +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: 0.30769231em 0.76923077em 0.30769231em; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Container +*******************************/ + + +/* All Sizes */ +.ui.container { + display: block; + max-width: 100% !important; +} + +/* Mobile */ +@media only screen and (max-width: 1048px) { + .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: 1049px) and (max-width: 1048px) { + .ui.container { + width: 1006px; + margin-left: auto !important; + margin-right: auto !important; + } + .ui.grid.container { + width: calc( 1006px + 2rem ) !important; + } + .ui.relaxed.grid.container { + width: calc( 1006px + 3rem ) !important; + } + .ui.very.relaxed.grid.container { + width: calc( 1006px + 5rem ) !important; + } +} + +/* Small Monitor */ +@media only screen and (min-width: 1049px) and (max-width: 1048px) { + .ui.container { + width: 993px; + margin-left: auto !important; + margin-right: auto !important; + } + .ui.grid.container { + width: calc( 993px + 2rem ) !important; + } + .ui.relaxed.grid.container { + width: calc( 993px + 3rem ) !important; + } + .ui.very.relaxed.grid.container { + width: calc( 993px + 5rem ) !important; + } +} + +/* Large Monitor */ +@media only screen and (min-width: 1049px) { + .ui.container { + width: 980px; + margin-left: auto !important; + margin-right: auto !important; + } + .ui.grid.container { + width: calc( 980px + 2rem ) !important; + } + .ui.relaxed.grid.container { + width: calc( 980px + 3rem ) !important; + } + .ui.very.relaxed.grid.container { + width: calc( 980px + 5rem ) !important; + } +} + + +/******************************* + Types +*******************************/ + + +/* Text Container */ +.ui.text.container { + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + max-width: 700px !important; + line-height: 1.5; +} +.ui.text.container { + font-size: 1.15384615rem; +} + +/* 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; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + 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 2.1.8 - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Dropdown +*******************************/ + +.ui.dropdown { + cursor: pointer; + position: relative; + display: inline-block; + outline: none; + text-align: left; + -webkit-transition: width 0.1s ease; + transition: 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: 0.38461538em 0px; + background: #FFFFFF; + font-size: 1em; + text-shadow: none; + text-align: left; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13); + border: 1px solid rgba(0, 0, 0, 0.13); + border-radius: 0.2307em; + -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.92307692em; + margin: 0em 0em 0em 2px; +} +.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.61538462em 1.07692308em !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: 0em; + padding: 0.46153846em 1.07692308em; + color: #767676; + font-size: 0.92307692em; + font-weight: normal; + text-transform: none; +} +.ui.dropdown .menu > .divider { + border-top: 1px solid rgba(0, 0, 0, 0.06); + height: 0em; + margin: 0.61538462em 0em; +} +.ui.dropdown .menu > .input { + width: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1.15384615rem 0.69230769rem; + min-width: 10rem; +} +.ui.dropdown .menu > .header + .input { + margin-top: 0em; +} +.ui.dropdown .menu > .input:not(.transparent) input { + padding: 0.5em 1.07692308em; +} +.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.61538462em 1.07692308em; + 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.2307em !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.69230769rem; +} + +/*-------------- + 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.82958462em; + background: #FFFFFF; + display: inline-block; + padding: 0.84615385em 2.67692308em 0.84615385em 1.07692308em; + color: rgba(0, 0, 0, 0.87); + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.13); + border-radius: 0.2307em; + -webkit-transition: width 0.1s ease; + transition: 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(0, 0, 0, 0.13); + 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.84615385em; + padding: 0.84615385em; + right: 1.07692308em; + 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.2307em 0.2307em; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13); + -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.61538462em 1.07692308em; +} +@media only screen and (max-width: 1048px) { + .ui.selection.dropdown .menu { + max-height: 6.99230769em; + } +} +@media only screen and (min-width: 1049px) { + .ui.selection.dropdown .menu { + max-height: 9.32307692em; + } +} +@media only screen and (min-width: 1049px) { + .ui.selection.dropdown .menu { + max-height: 13.98461538em; + } +} +@media only screen and (min-width: 1920px) { + .ui.selection.dropdown .menu { + max-height: 18.64615385em; + } +} + +/* Menu Item */ +.ui.selection.dropdown .menu > .item { + border-top: 1px solid #FAFAFA; + padding: 0.61538462em 1.07692308em !important; + white-space: normal; + word-wrap: normal; +} + +/* Hover */ +.ui.selection.dropdown:hover { + border-color: #51A7E8; + box-shadow: none; +} + +/* Active */ +.ui.selection.active.dropdown { + border-color: #96C8DA; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13); +} +.ui.selection.active.dropdown .menu { + border-color: #96C8DA; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13); +} + +/* 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(0, 0, 0, 0.13); +} + +/* 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(0, 0, 0, 0.13); +} +.ui.selection.active.dropdown:hover .menu { + border-color: #96C8DA; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13); +} + +/* 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.73905385em 2.67692308em 0.73905385em 1.07692308em; +} + +/* 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.6; +} +.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: 1048px) { + .ui.search.dropdown .menu { + max-height: 6.99230769em; + } +} +@media only screen and (min-width: 1049px) { + .ui.search.dropdown .menu { + max-height: 9.32307692em; + } +} +@media only screen and (min-width: 1049px) { + .ui.search.dropdown .menu { + max-height: 13.98461538em; + } +} +@media only screen and (min-width: 1920px) { + .ui.search.dropdown .menu { + max-height: 18.64615385em; + } +} + +/*-------------- + Multiple +---------------*/ + + +/* Multiple Selection */ +.ui.multiple.dropdown { + padding: 0.24635128em 2.67692308em 0.24635128em 0.38461538em; +} +.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.38461538em 0.69230769em; + margin: 0.23076923em 0.30769231rem 0.23076923em 0em; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.13) inset; +} + +/* Dropdown Icon */ +.ui.multiple.dropdown .dropdown.icon { + margin: 0em -0.69230769em 0em 0em; + padding: 0.5em; +} + +/* Text */ +.ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + margin: 0.49270256em 0em 0.49270256em 0.69230769em; + 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.49270256em 0em 0.49270256em 0.69230769em; + 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.49270256em 0em 0.49270256em 0.69230769em; + 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.2307em; +} + + +/******************************* + 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: #4078C0; + color: #FFFFFF; + 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.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + 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.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + -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: #991111; +} +.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: #991111; +} +.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.6; +} + + +/******************************* + 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.2307em !important; +} + +/* Left Flyout Menu */ +.ui.dropdown > .left.menu .menu, +.ui.dropdown .menu .left.menu { + left: auto !important; + right: 100% !important; + border-radius: 0.2307em !important; +} +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: left; + margin: 0em 0.69230769rem 0em 0em; +} +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: left; + margin: 0em 0.69230769rem 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.2307em 0.2307em 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.2307em 0.2307em 0em 0em !important; +} +.ui.upward.dropdown.button:not(.pointing):not(.floating).active { + border-radius: 0.2307em 0.2307em 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.2307em 0.2307em !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.2307em 0.2307em !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(0, 0, 0, 0.13); +} +.ui.scrolling.dropdown .menu .item.item.item, +.ui.dropdown .scrolling.menu > .item.item.item { + border-top: none; + padding-right: calc( 1.07692308em + 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: 1048px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 8.92307692em; + } +} +@media only screen and (min-width: 1049px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 13.38461538em; + } +} +@media only screen and (min-width: 1049px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 17.84615385em; + } +} +@media only screen and (min-width: 1920px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 17.84615385em; + } +} + +/*-------------- + 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.2307em !important; +} +.ui.floating.dropdown > .menu { + margin-top: 0.5em !important; + border-radius: 0.2307em !important; +} + +/*-------------- + Pointing +---------------*/ + +.ui.pointing.dropdown > .menu { + top: 100%; + margin-top: 0.69230769rem; + border-radius: 0.2307em; +} +.ui.pointing.dropdown > .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: ''; + visibility: visible; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + width: 0.69230769em; + height: 0.69230769em; + box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.13); + background: #FFFFFF; + z-index: 2; +} +.ui.pointing.dropdown > .menu:after { + top: -0.34615385em; + left: 50%; + margin: 0em 0em 0em -0.34615385em; +} + +/* 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.34615385em; + 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.34615385em; + 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.34615385em; + 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.34615385em; + 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.34615385em; + 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.69230769rem; + border-radius: 0.2307em; +} +.ui.upward.pointing.dropdown > .menu:after, +.ui.upward.top.pointing.dropdown > .menu:after { + top: 100%; + bottom: auto; + box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.13); + margin: -0.34615385em 0em 0em; +} + + +/******************************* + User Overrides +*******************************/ + + +/* Smaller Icon */ +.ui.dropdown > .dropdown.icon { + font-size: 12px; +} + +/* 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"*/; +} + + +/******************************* + User Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: stretch; + -webkit-align-items: 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: inherit; + -webkit-justify-content: inherit; + -ms-flex-pack: inherit; + justify-content: inherit; + -webkit-box-align: stretch; + -webkit-align-items: 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; + -webkit-flex-grow: 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; + -webkit-justify-content: 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: top; + -webkit-align-self: flex-start !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: middle; + -webkit-align-self: center !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: bottom; + -webkit-align-self: flex-end !important; + -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: -webkit-inline-flex !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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; + -webkit-flex-grow: 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; + -webkit-align-self: inherit; + -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; + -webkit-align-self: inherit; + -ms-flex-item-align: inherit; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + -webkit-box-pack: center; + -webkit-justify-content: 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; + -webkit-align-self: inherit; + -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; + -moz-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; + -webkit-flex-grow: 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; + -webkit-flex-grow: 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; + -webkit-flex-direction: row-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; + -webkit-flex-direction: column-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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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 2.1.8 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Header +*******************************/ + + +/* Standard */ +.ui.header { + border: none; + margin: calc(2rem - 0.14285em ) 0em 1rem; + padding: 0em 0em; + font-family: 'Arial', '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.30769231rem; +} + +/*------------------- + 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.30769231rem; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: top; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: 0.30769231rem; + vertical-align: middle; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: 0.30769231rem; + 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: 2.25em; +} +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.15384615rem; +} +h2.ui.header .sub.header { + font-size: 1.15384615rem; +} +h3.ui.header .sub.header { + font-size: 1rem; +} +h4.ui.header .sub.header { + font-size: 1rem; +} +h5.ui.header .sub.header { + font-size: 0.92307692rem; +} + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: 2.25em; +} +.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.15384615rem; +} +.ui.large.header .sub.header { + font-size: 1.15384615rem; +} +.ui.header .sub.header { + font-size: 1rem; +} +.ui.small.header .sub.header { + font-size: 1rem; +} +.ui.tiny.header .sub.header { + font-size: 0.92307692rem; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: 0.15384615rem; + font-weight: bold; + font-size: 0.84615385em; + text-transform: uppercase; + color: ''; +} +.ui.small.sub.header { + font-size: 0.69230769em; +} +.ui.sub.header { + font-size: 0.84615385em; +} +.ui.large.sub.header { + font-size: 0.92307692em; +} +.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.3; +} + + +/******************************* + 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: #d01919 !important; +} +.ui.red.dividing.header { + border-bottom: 2px solid #DB2828; +} + +/* Inverted */ +.ui.inverted.red.header { + color: #FF695E !important; +} +a.ui.inverted.red.header:hover { + color: #ff5144 !important; +} + +/*--- Orange ---*/ + +.ui.orange.header { + color: #D26911 !important; +} +a.ui.orange.header:hover { + color: #c35c07 !important; +} +.ui.orange.dividing.header { + border-bottom: 2px solid #D26911; +} + +/* Inverted */ +.ui.inverted.orange.header { + color: #FF851B !important; +} +a.ui.inverted.orange.header:hover { + color: #ff7701 !important; +} + +/*--- Olive ---*/ + +.ui.olive.header { + color: #B5CC18 !important; +} +a.ui.olive.header:hover { + color: #a7bd0d !important; +} +.ui.olive.dividing.header { + border-bottom: 2px solid #B5CC18; +} + +/* Inverted */ +.ui.inverted.olive.header { + color: #D9E778 !important; +} +a.ui.inverted.olive.header:hover { + color: #d8ea5c !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.header { + color: #FBBD08 !important; +} +a.ui.yellow.header:hover { + color: #eaae00 !important; +} +.ui.yellow.dividing.header { + border-bottom: 2px solid #FBBD08; +} + +/* Inverted */ +.ui.inverted.yellow.header { + color: #FFE21F !important; +} +a.ui.inverted.yellow.header:hover { + color: #ffdf05 !important; +} + +/*--- Green ---*/ + +.ui.green.header { + color: #78CB5B !important; +} +a.ui.green.header:hover { + color: #65cb41 !important; +} +.ui.green.dividing.header { + border-bottom: 2px solid #78CB5B; +} + +/* Inverted */ +.ui.inverted.green.header { + color: #2ECC40 !important; +} +a.ui.inverted.green.header:hover { + color: #22be34 !important; +} + +/*--- Teal ---*/ + +.ui.teal.header { + color: #00B5AD !important; +} +a.ui.teal.header:hover { + color: #009c95 !important; +} +.ui.teal.dividing.header { + border-bottom: 2px solid #00B5AD; +} + +/* Inverted */ +.ui.inverted.teal.header { + color: #6DFFFF !important; +} +a.ui.inverted.teal.header:hover { + color: #54ffff !important; +} + +/*--- Blue ---*/ + +.ui.blue.header { + color: #80A6CD !important; +} +a.ui.blue.header:hover { + color: #6999ca !important; +} +.ui.blue.dividing.header { + border-bottom: 2px solid #80A6CD; +} + +/* Inverted */ +.ui.inverted.blue.header { + color: #54C8FF !important; +} +a.ui.inverted.blue.header:hover { + color: #3ac0ff !important; +} + +/*--- Violet ---*/ + +.ui.violet.header { + color: #6435C9 !important; +} +a.ui.violet.header:hover { + color: #5829bb !important; +} +.ui.violet.dividing.header { + border-bottom: 2px solid #6435C9; +} + +/* Inverted */ +.ui.inverted.violet.header { + color: #A291FB !important; +} +a.ui.inverted.violet.header:hover { + color: #8a73ff !important; +} + +/*--- Purple ---*/ + +.ui.purple.header { + color: #A333C8 !important; +} +a.ui.purple.header:hover { + color: #9627ba !important; +} +.ui.purple.dividing.header { + border-bottom: 2px solid #A333C8; +} + +/* Inverted */ +.ui.inverted.purple.header { + color: #DC73FF !important; +} +a.ui.inverted.purple.header:hover { + color: #d65aff !important; +} + +/*--- Pink ---*/ + +.ui.pink.header { + color: #E03997 !important; +} +a.ui.pink.header:hover { + color: #e61a8d !important; +} +.ui.pink.dividing.header { + border-bottom: 2px solid #E03997; +} + +/* Inverted */ +.ui.inverted.pink.header { + color: #FF8EDF !important; +} +a.ui.inverted.pink.header:hover { + color: #ff74d8 !important; +} + +/*--- Brown ---*/ + +.ui.brown.header { + color: #A5673F !important; +} +a.ui.brown.header:hover { + color: #975b33 !important; +} +.ui.brown.dividing.header { + border-bottom: 2px solid #A5673F; +} + +/* Inverted */ +.ui.inverted.brown.header { + color: #D67C1C !important; +} +a.ui.inverted.brown.header:hover { + color: #c86f11 !important; +} + +/*--- Grey ---*/ + +.ui.grey.header { + color: #767676 !important; +} +a.ui.grey.header:hover { + color: #838383 !important; +} +.ui.grey.dividing.header { + border-bottom: 2px solid #767676; +} + +/* Inverted */ +.ui.inverted.grey.header { + color: #DCDDDE !important; +} +a.ui.inverted.grey.header:hover { + color: #cfd0d2 !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: 0.5em; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: 0.5em; +} + +/*------------------- + Fittted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: 0.23076923rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.13); +} +.ui.dividing.header .sub.header { + padding-bottom: 0.23076923rem; +} +.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.69230769rem 1rem; + box-shadow: none; + border: 1px solid #DDDDDD; + border-radius: 0.2307em; +} +.ui.tiny.block.header { + font-size: 0.84615385rem; +} +.ui.small.block.header { + font-size: 0.92307692rem; +} +.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.15384615rem; +} +.ui.huge.block.header { + font-size: 1.46153846rem; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: #FFFFFF; + padding: 0.69230769rem 1rem; + margin-left: -1px; + margin-right: -1px; + box-shadow: none; + border: 1px solid #DDDDDD; +} +.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.2307em 0.2307em 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em 0.2307em 0.2307em; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: 0.84615385em; +} +.ui.small.attached.header { + font-size: 0.92307692em; +} +.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.15384615em; +} +.ui.huge.attached.header { + font-size: 1.46153846em; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: 1.28em; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: normal; + font-style: normal; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + color: rgba(0, 0, 0, 0.87); +} +.ui.input input { + margin: 0em; + max-width: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: left; + line-height: 1.2142em; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + padding: 0.43136154em 0.61538462em; + background: #FFFFFF; + border: 1px solid #CCCCCC; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.2307em; + -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease; + transition: box-shadow 0.1s ease, border-color 0.1s ease; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; +} + +/*-------------------- + Placeholder +---------------------*/ + + +/* browsers require these rules separate */ +.ui.input input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} +.ui.input input::-moz-placeholder { + color: rgba(0, 0, 0, 0.4); +} +.ui.input input::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input input[disabled] { + opacity: 0.3; +} +.ui.disabled.input input { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input input:active, +.ui.input.down input { + border-color: rgba(0, 0, 0, 0.3); + background: #FAFAFA; + color: rgba(0, 0, 0, 0.87); + box-shadow: none; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} +.ui.loading.loading.input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.69230769em 0em 0em -0.69230769em; + width: 1.38461538em; + height: 1.38461538em; + -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: #767676 transparent transparent; + border-style: solid; + border-width: 0.2em; + box-shadow: 0px 0px 0px 1px transparent; +} + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus input, +.ui.input input:focus { + border-color: #51A7E8; + background: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5); +} +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: rgba(0, 0, 0, 0.87); +} +.ui.input.focus input::-ms-input-placeholder, +.ui.input input:focus::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: #FFF6F6; + border-color: #E0B4B4; + color: #9F3A38; + box-shadow: none; +} + +/* Error Placeholder */ +.ui.input.error input::-webkit-input-placeholder { + color: #e7bdbc; +} +.ui.input.error input::-moz-placeholder { + color: #e7bdbc; +} +.ui.input.error input::-ms-input-placeholder { + color: #e7bdbc; +} + +/* Focused Error Placeholder */ +.ui.input.error input:focus::-webkit-input-placeholder { + color: #da9796; +} +.ui.input.error input:focus::-moz-placeholder { + color: #da9796; +} +.ui.input.error input:focus::-ms-input-placeholder { + color: #da9796; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Transparent +---------------------*/ + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: 1.1em; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: 2em !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: 2em !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: #FFFFFF; +} +.ui.transparent.inverted.input input { + color: inherit; +} +.ui.transparent.inverted.input input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} +.ui.transparent.inverted.input input::-moz-placeholder { + color: rgba(255, 255, 255, 0.5); +} +.ui.transparent.inverted.input input::-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + width: 2.17692308em; + opacity: 0.5; + border-radius: 0em 0.2307em 0.2307em 0em; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input input { + padding-right: 2.17692308em !important; +} +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: -0.5em; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: 0.35em; + right: 0.5em; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: 1px; + border-radius: 0.2307em 0em 0em 0.2307em; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: 0.5em; +} +.ui[class*="left icon"].input > input { + padding-left: 2.17692308em !important; + padding-right: 0.61538462em !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + + +/* Adjacent Label */ +.ui.labeled.input > .label { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin: 0; + font-size: 1em; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: 0.53846154em; + padding-bottom: 0.53846154em; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: #51A7E8; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="right labeled"].input input:focus { + border-right-color: #51A7E8 !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: 1px; + right: 1px; + font-size: 0.69230769em; + border-radius: 0em 0.2307em 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { + padding-right: 2.5em !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: 3.25em !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: 1.25em; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input input { + padding-left: 2.5em !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: 3.25em !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: 1.25em; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: 1px; + right: 1px; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: 1px; +} + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: 0.53846154em; + padding-bottom: 0.53846154em; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown, +.ui.action.input:not([class*="left action"]) > .button, +.ui.action.input:not([class*="left action"]) > .buttons > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px 0.2307em 0.2307em 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) input:focus { + border-right-color: #51A7E8 !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: 0.2307em 0px 0px 0.2307em; +} + +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: #51A7E8 !important; +} + +/*-------------------- + Inverted +---------------------*/ + + +/* Standard */ +.ui.inverted.input input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: 0.69230769em; +} +.ui.small.input { + font-size: 0.92307692em; +} +.ui.input { + font-size: 1em; +} +.ui.large.input { + font-size: 1.15384615em; +} +.ui.big.input { + font-size: 1.38461538em; +} +.ui.huge.input { + font-size: 1.46153846em; +} +.ui.massive.input { + font-size: 1.69230769em; +} + + +/******************************* + Input +*******************************/ + + +/* Labeled Input has padding */ +.ui.labeled.input { + background-color: #FFFFFF; + border: 1px solid #CCCCCC; + border-radius: 0.2307em !important; +} +.ui.labeled.input input { + box-shadow: none !important; + border: none !important; +} +.ui.labeled.input .label { + font-weight: normal; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + font-size: 12px; + margin: 0.15384615rem; + border-radius: 0.2307em !important; + padding: 0.38461538em 0.61538462em !important; +} + +/* GitHub Uses Focus Group with class name added */ +.ui.labeled.input.focused { + border-color: #51A7E8; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5); +} +.ui.labeled.input.focused .label { + background-color: #E1EAF5; + color: #4078C0; +} + +/* Prevent button from matching padding */ +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: 0px; + padding-bottom: 0px; +} +.ui.action.input > .button .icon, +.ui.action.input > .buttons > .button .icon { + margin-top: -3px; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: baseline; + margin: 0em 0.15384615em; + background-color: #E8E8E8; + background-image: none; + padding: 0.5833em 0.833em; + color: rgba(0, 0, 0, 0.6); + text-transform: none; + font-weight: bold; + border: 0px solid transparent; + border-radius: 0.30769231rem; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: 0.5; + -webkit-transition: 0.1s opacity ease; + transition: 0.1s opacity ease; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: 2.1666em !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em 0.75em 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: bold; + margin-left: 1em; + opacity: 0.8; +} +.ui.label > .detail .icon { + margin: 0em 0.25em 0em 0em; +} + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: 0.5em; + font-size: 0.92307692em; + opacity: 0.5; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em 0.5em 0.5em 0em; +} + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: -0.29165em; +} + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached) { + margin-top: 2rem !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: 2rem !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + background: #E8E8E8; + padding: 0.5833em 0.833em 0.5833em 0.5em; + border-radius: 0.30769231rem; + box-shadow: none; +} +.ui.image.label img { + display: inline-block; + vertical-align: top; + height: 2.1666em; + margin: -0.5833em 0.5em -0.5833em -0.5em; + border-radius: 0.30769231rem 0em 0em 0.30769231rem; +} +.ui.image.label .detail { + background: rgba(0, 0, 0, 0.1); + margin: -0.5833em -0.833em -0.5833em 0.5em; + padding: 0.5833em 0.833em; + border-radius: 0em 0.30769231rem 0.30769231rem 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: 1.5em; + padding-right: 1.5em; + border-radius: 0em 0.30769231rem 0.30769231rem 0em; + -webkit-transition: none; + transition: none; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg); + transform: translateY(-50%) translateX(50%) rotate(-45deg); + top: 50%; + right: 100%; + content: ''; + background-color: inherit; + background-image: none; + width: 1.56em; + height: 1.56em; + -webkit-transition: none; + transition: none; +} +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -0.25em; + margin-top: -0.25em; + background-color: #FFFFFF !important; + width: 0.5em; + height: 0.5em; + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + border-radius: 500rem; +} + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + border-color: #E8E8E8; + width: 4em; + height: 4em; + z-index: 1; + -webkit-transition: border-color 0.1s ease; + transition: border-color 0.1s ease; +} + +/* Icon Label */ +.ui.corner.label { + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + width: 0em; + height: 0em; + background-color: transparent !important; + border-top: 0em solid transparent; + border-right: 4em solid transparent; + border-bottom: 4em solid transparent; + border-left: 0em solid transparent; + border-right-color: inherit; + -webkit-transition: border-color 0.1s ease; + transition: border-color 0.1s ease; +} +.ui.corner.label .icon { + cursor: default; + position: relative; + top: 0.69230769em; + left: 0.84615385em; + font-size: 1.15384615em; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: 4em solid transparent; + border-right: 4em solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -0.84615385em; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + border-radius: 0em 0.30769231rem 0.30769231rem 0em; + border-color: rgba(0, 0, 0, 0.15); +} +.ui.ribbon.label:after { + position: absolute; + content: ''; + top: 100%; + left: 0%; + background-color: transparent !important; + border-style: solid; + border-width: 0em 1.2em 1.2em 0em; + border-color: transparent; + border-right-color: inherit; + width: 0em; + height: 0em; +} + +/* Positioning */ +.ui.ribbon.label { + left: calc( -1rem - 1.2em ); + margin-right: -1.2em; + padding-left: calc( 1rem + 1.2em ); + padding-right: 1.2em; +} +.ui[class*="right ribbon"].label { + left: calc(100% + 1rem + 1.2em ); + padding-left: 1.2em; + padding-right: calc( 1rem + 1.2em ); +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + border-radius: 0.30769231rem 0em 0em 0.30769231rem; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + border-style: solid; + border-width: 1.2em 1.2em 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: 1rem; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: calc( 0.05rem - 1.2em ); +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: calc(100% + -0.05rem + 1.2em ); + padding-left: 0.833em; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: calc( -0.69230769em - 1.2em ); +} +.ui.table td > .ui[class*="right ribbon"].label { + left: calc(100% + 0.69230769em + 1.2em ); + padding-left: 0.833em; +} + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + padding: 0.75em 1em; + border-radius: 0.23076923rem 0.23076923rem 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em 0.23076923rem 0.23076923rem; +} +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: 0.23076923rem 0em 0.30769231rem 0em; +} +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em 0.23076923rem 0em 0.30769231rem; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em 0.30769231rem 0em 0.23076923rem; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: 0.30769231rem 0em 0.23076923rem 0em; +} + + +/******************************* + States +*******************************/ + + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: #E0E0E0; + border-color: #E0E0E0; + background-image: none; + color: rgba(0, 0, 0, 0.8); +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: rgba(0, 0, 0, 0.8); +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: #D0D0D0; + border-color: #D0D0D0; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} +.ui.active.label:before { + background-color: #D0D0D0; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: #C8C8C8; + border-color: #C8C8C8; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: #C8C8C8; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + + +/*--- Red ---*/ + +.ui.red.labels .label, +.ui.red.label { + background-color: #DB2828 !important; + border-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover { + background-color: #d01919 !important; + border-color: #d01919 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.red.ribbon.label { + border-color: #b21e1e !important; +} + +/* Basic */ +.ui.basic.red.label { + background-color: #FFFFFF !important; + color: #DB2828 !important; + border-color: #DB2828 !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: #FFFFFF !important; + color: #d01919 !important; + border-color: #d01919 !important; +} + +/*--- Orange ---*/ + +.ui.orange.labels .label, +.ui.orange.label { + background-color: #D26911 !important; + border-color: #D26911 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover { + background-color: #c35c07 !important; + border-color: #c35c07 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: #a3510d !important; +} + +/* Basic */ +.ui.basic.orange.label { + background-color: #FFFFFF !important; + color: #D26911 !important; + border-color: #D26911 !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: #FFFFFF !important; + color: #c35c07 !important; + border-color: #c35c07 !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: #FBBD08 !important; + border-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover { + background-color: #eaae00 !important; + border-color: #eaae00 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: #cd9903 !important; +} + +/* Basic */ +.ui.basic.yellow.label { + background-color: #FFFFFF !important; + color: #FBBD08 !important; + border-color: #FBBD08 !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: #FFFFFF !important; + color: #eaae00 !important; + border-color: #eaae00 !important; +} + +/*--- Olive ---*/ + +.ui.olive.labels .label, +.ui.olive.label { + background-color: #B5CC18 !important; + border-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover { + background-color: #a7bd0d !important; + border-color: #a7bd0d !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: #5bb83b !important; +} + +/* Basic */ +.ui.basic.olive.label { + background-color: #FFFFFF !important; + color: #B5CC18 !important; + border-color: #B5CC18 !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: #FFFFFF !important; + color: #a7bd0d !important; + border-color: #a7bd0d !important; +} + +/*--- Green ---*/ + +.ui.green.labels .label, +.ui.green.label { + background-color: #78CB5B !important; + border-color: #78CB5B !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover { + background-color: #65cb41 !important; + border-color: #65cb41 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.green.ribbon.label { + border-color: #5bb83b !important; +} + +/* Basic */ +.ui.basic.green.label { + background-color: #FFFFFF !important; + color: #78CB5B !important; + border-color: #78CB5B !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: #FFFFFF !important; + color: #65cb41 !important; + border-color: #65cb41 !important; +} + +/*--- Teal ---*/ + +.ui.teal.labels .label, +.ui.teal.label { + background-color: #00B5AD !important; + border-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover { + background-color: #009c95 !important; + border-color: #009c95 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: #00827c !important; +} + +/* Basic */ +.ui.basic.teal.label { + background-color: #FFFFFF !important; + color: #00B5AD !important; + border-color: #00B5AD !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: #FFFFFF !important; + color: #009c95 !important; + border-color: #009c95 !important; +} + +/*--- Blue ---*/ + +.ui.blue.labels .label, +.ui.blue.label { + background-color: #80A6CD !important; + border-color: #80A6CD !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover { + background-color: #6999ca !important; + border-color: #6999ca !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: #5b8cbf !important; +} + +/* Basic */ +.ui.basic.blue.label { + background-color: #FFFFFF !important; + color: #80A6CD !important; + border-color: #80A6CD !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: #FFFFFF !important; + color: #6999ca !important; + border-color: #6999ca !important; +} + +/*--- Violet ---*/ + +.ui.violet.labels .label, +.ui.violet.label { + background-color: #6435C9 !important; + border-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover { + background-color: #5829bb !important; + border-color: #5829bb !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: #502aa1 !important; +} + +/* Basic */ +.ui.basic.violet.label { + background-color: #FFFFFF !important; + color: #6435C9 !important; + border-color: #6435C9 !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: #FFFFFF !important; + color: #5829bb !important; + border-color: #5829bb !important; +} + +/*--- Purple ---*/ + +.ui.purple.labels .label, +.ui.purple.label { + background-color: #A333C8 !important; + border-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover { + background-color: #9627ba !important; + border-color: #9627ba !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: #82299f !important; +} + +/* Basic */ +.ui.basic.purple.label { + background-color: #FFFFFF !important; + color: #A333C8 !important; + border-color: #A333C8 !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: #FFFFFF !important; + color: #9627ba !important; + border-color: #9627ba !important; +} + +/*--- Pink ---*/ + +.ui.pink.labels .label, +.ui.pink.label { + background-color: #E03997 !important; + border-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover { + background-color: #e61a8d !important; + border-color: #e61a8d !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: #c71f7e !important; +} + +/* Basic */ +.ui.basic.pink.label { + background-color: #FFFFFF !important; + color: #E03997 !important; + border-color: #E03997 !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: #FFFFFF !important; + color: #e61a8d !important; + border-color: #e61a8d !important; +} + +/*--- Brown ---*/ + +.ui.brown.labels .label, +.ui.brown.label { + background-color: #A5673F !important; + border-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover { + background-color: #975b33 !important; + border-color: #975b33 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.brown.label { + background-color: #FFFFFF !important; + color: #A5673F !important; + border-color: #A5673F !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: #FFFFFF !important; + color: #975b33 !important; + border-color: #975b33 !important; +} + +/*--- Grey ---*/ + +.ui.grey.labels .label, +.ui.grey.label { + background-color: #767676 !important; + border-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover { + background-color: #838383 !important; + border-color: #838383 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.grey.label { + background-color: #FFFFFF !important; + color: #767676 !important; + border-color: #767676 !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: #FFFFFF !important; + color: #838383 !important; + border-color: #838383 !important; +} + +/*--- Black ---*/ + +.ui.black.labels .label, +.ui.black.label { + background-color: #333333 !important; + border-color: #333333 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover { + background-color: #404040 !important; + border-color: #404040 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.black.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.black.label { + background-color: #FFFFFF !important; + color: #333333 !important; + border-color: #333333 !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: #FFFFFF !important; + color: #404040 !important; + border-color: #404040 !important; +} + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: none #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.13); + color: rgba(0, 0, 0, 0.87); + box-shadow: none; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: none #FFFFFF; + color: #4078C0; + box-shadow: 1px solid rgba(0, 0, 0, 0.13); + box-shadow: none; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: rgba(255, 255, 255, 0.9) !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em 0.5em 0em 0em; + padding: 0.4em 0.833em; + min-width: 3em; + text-align: center; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: 2em; + min-height: 2em; + padding: 0.5em !important; + line-height: 1em; + text-align: center; + border-radius: 500rem; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: 0.5em; + height: 0.5em; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} +.ui.attached.pointing.label { + position: absolute; +} +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: inherit; +} + +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + background-image: none; + z-index: 2; + width: 0.6666em; + height: 0.6666em; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} + +/*--- Above ---*/ + +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: 1em; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: 1px 0px 0px 1px; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} + +/*--- Below ---*/ + +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: 1em; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px 1px 1px 0px; + top: auto; + right: auto; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} + +/*--- Left ---*/ + +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: 0.6666em; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px 1px 1px; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + +/*--- Right ---*/ + +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: 0.6666em; +} +.ui[class*="right pointing"].label:before { + border-width: 1px 1px 0px 0px; + -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ + +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: -1px; +} + +/*--- Below ---*/ + +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: 1px; +} + +/*--- Left ---*/ + +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: -1px; +} + +/*--- Right ---*/ + +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: -1px; +} + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin: 0em 0em 0em -1.5em !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: 0.69230769rem; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: 0.76923077rem; +} +.ui.small.labels .label, +.ui.small.label { + font-size: 0.84615385rem; +} +.ui.labels .label, +.ui.label { + font-size: 0.92307692rem; +} +.ui.large.labels .label, +.ui.large.label { + font-size: 1rem; +} +.ui.big.labels .label, +.ui.big.label { + font-size: 1.38461538rem; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: 1.46153846rem; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: 1.69230769rem; +} + + +/******************************* + Site Overrides +*******************************/ + + +/* Notification Label on GitHub */ +.ui.floating.blue.label { + border: 2px solid #f3f3f3 !important; + background-image: -webkit-linear-gradient(#7aa1d3, #4078c0) !important; + background-image: linear-gradient(#7aa1d3, #4078c0) !important; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + 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: #1e70bf; +} + +/* 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: #1e70bf !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: #1e70bf; +} + +/* 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: #1e70bf !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 - Menu + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Menu +---------------*/ + +.ui.menu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1rem 0em; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + background: #FFFFFF; + font-weight: normal; + border: 1px solid rgba(0, 0, 0, 0.13); + box-shadow: none; + border-radius: 0.2307em; + min-height: 2.84615385em; +} +.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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -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.92307692em 1.15384615em; + text-transform: none; + color: #767676; + 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.2307em 0px 0px 0.2307em; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + height: 100%; + width: 1px; + background: rgba(0, 0, 0, 0.06); +} + +/*-------------- + 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.5; + float: none; + margin: 0em 0.38461538em 0em 0em; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: -0.15em; + margin: -0.5em 0em; + padding-bottom: 0.75em; + padding-top: 0.75em; + font-size: 1em; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: inherit; + -webkit-align-items: inherit; + -ms-flex-align: inherit; + align-items: inherit; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: inherit; + -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.46153846em; + padding-bottom: 0.46153846em; +} + +/*-------------- + 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 0.92307692em; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + left: 0px; + min-width: calc(100% - 1px); + border-radius: 0em 0em 0.2307em 0.2307em; + background: #FFFFFF; + margin: 0em 0px 0px; + box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.15); + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -webkit-flex-direction: column !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.46153846em 1.07692308em !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: #4078C0 !important; + color: #FFFFFF !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.2307em; + margin-top: 0.38461538em; +} + +/* 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.2307em 0.2307em 0.2307em; +} +.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: #EEEEEE; + color: #666666; + margin-left: 0.30769231rem; + padding: 0.15384615em 0.38461538em; +} +.ui.vertical.menu .item > .label { + background: #EEEEEE; + color: #666666; + margin-top: 0px; + margin-bottom: 0px; + padding: 0.15384615em 0.38461538em; +} +.ui.menu .item > .floating.label { + padding: 0.15384615em 0.38461538em; +} + +/*-------------- + 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: 1048px) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0em !important; + margin-right: 0em !important; + } +} +@media only screen and (min-width: 1049px) { + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { + border-left: 1px solid rgba(0, 0, 0, 0.06); + } +} + + +/******************************* + 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: none transparent; + color: #4078C0; +} + +/*-------------- + Pressed +---------------*/ + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + background: none transparent; + color: #4078C0; +} + +/*-------------- + 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: -webkit-flex; + 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: -webkit-flex; + 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #FFFFFF; + box-shadow: none; +} + +/*--- Item ---*/ + +.ui.vertical.menu .item { + display: block; + background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); + background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: 0.2307em 0.2307em 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px 0.2307em 0.2307em; +} + +/*--- Label ---*/ + +.ui.vertical.menu .item > .label { + float: right; + text-align: center; +} + +/*--- Icon ---*/ + +.ui.vertical.menu .item > i.icon { + width: 1.18em; + float: none; + margin: 0em 0.07692308em 0em 0em; +} +.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(0, 0, 0, 0.06); + height: 1px; +} +.ui.vertical.menu .item:first-child:before { + display: none !important; +} + +/*--- Sub Menu ---*/ + +.ui.vertical.menu .item > .menu { + margin: 0.5em -1.15384615em 0em; +} +.ui.vertical.menu .menu .item { + background: none; + padding: 0.5em 1.34615385em; + font-size: 0.84615385em; + 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.2307em 0.2307em 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em 0.2307em 0.2307em; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: 0.2307em; +} +.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 #EEEEEE; +} +.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.53846154em 1.15384em; + color: #767676; +} +.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: #EEEEEE; + font-weight: bold; + margin-bottom: -1px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05); + border-radius: 0.2307em 0.2307em 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 #EEEEEE; +} +.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: #EEEEEE; + margin: -1px 0px 0px 0px; + border-radius: 0px 0px 0.2307em 0.2307em !important; +} + +/* Vertical Tabular (Left) */ +.ui.vertical.tabular.menu { + background: -webkit-linear-gradient(right, #f6f6f6 0%, #fff 8px) transparent; + background: linear-gradient(to left, #f6f6f6 0%, #fff 8px) transparent; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: 1px solid #EEEEEE; +} +.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: #EEEEEE; + margin: 0px -1px 0px 0px; + border-radius: 0.2307em 0px 0px 0.2307em !important; +} + +/* Vertical Right Tabular */ +.ui.vertical.right.tabular.menu { + background: -webkit-linear-gradient(right, #f6f6f6 0%, #fff 8px) transparent; + background: linear-gradient(to left, #f6f6f6 0%, #fff 8px) transparent; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: none; + border-left: 1px solid #EEEEEE; +} +.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: #EEEEEE; + margin: 0px 0px 0px -1px; + border-radius: 0px 0.2307em 0.2307em 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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0em 0.2307em 0.2307em 0em; +} +.ui.compact.menu .item:last-child { + border-radius: 0em 0.2307em 0.2307em 0em; +} +.ui.pagination.menu .item:last-child:before { + display: none; +} +.ui.pagination.menu .item { + min-width: 3.5em; + 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.92307692em; + 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.38461538em; + margin-right: -0.38461538em; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + box-shadow: none; + border: none; + padding: 0.69230769em 0.92307692em; + margin: 0em 0.38461538em; + background: none; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; + border-radius: 0.2307em; +} + +/* 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.2307em; +} + +/* 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.92307692em; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: 0em; + padding: 0.53846154em 1.34615385em; +} + +/*--------------------- + Secondary Vertical +-----------------------*/ + +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0em 0em 0.38461538em; + border-radius: 0.2307em !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(0, 0, 0, 0.13); +} +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0em; + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; + margin: 0em 0em -2px; + padding: 0.84615385em 1.15384615em; + 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(0, 0, 0, 0.13); +} + +/* Active */ +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + box-shadow: none; + border-color: #333333; + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/* Active Hover */ +.ui.secondary.pointing.menu .active.item:hover { + border-color: #333333; + 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(0, 0, 0, 0.13); +} +.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: #333333; +} + +/* 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(0, 0, 0, 0.13); +} +.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.61538462em; +} +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + margin: 0em 0em; + padding: 0.38461538em 0.61538462em; + font-weight: normal; + color: #333333; + -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.92307692em; + 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.61538462em 0em; +} +.ui.vertical.text.menu .item > i.icon { + float: none; + margin: 0em 0.38461538em 0em 0em; +} +.ui.vertical.text.menu .header.item { + margin: 0.61538462em 0em 0.76923077em; +} + +/* 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.53846154em 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: #333333; +} + +/* 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +/* Icon */ +.ui.labeled.icon.menu .item > .icon:not(.dropdown) { + height: 1em; + display: block; + font-size: 1.69230769em !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: 1048px) { + .ui.stackable.menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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(0, 0, 0, 0.06); + 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: #D26911 !important; + color: #D26911 !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: #78CB5B !important; + color: #78CB5B !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: #80A6CD !important; + color: #80A6CD !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: #333333 -webkit-linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0)); + background: #333333 linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0)); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(255, 255, 255, 0.15); +} + +/* 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(0, 0, 0, 0.06); +} +.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: #D26911; +} +.ui.inverted.orange.menu .item:before { + background-color: rgba(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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: #78CB5B; +} +.ui.inverted.green.menu .item:before { + background-color: rgba(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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: #80A6CD; +} +.ui.inverted.blue.menu .item:before { + background-color: rgba(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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(0, 0, 0, 0.06); +} +.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.92307692em; + padding-bottom: 0.92307692em; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: 1.15384615em; + padding-right: 1.15384615em; +} + +/*-------------- + 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: -webkit-inline-flex; + 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.2307em 0.2307em 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; + -webkit-justify-content: 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.61538462em; + height: 0.61538462em; + border: none; + border-bottom: 1px solid #DDDDDD; + border-right: 1px solid #DDDDDD; + 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 #DDDDDD; + border-right: 1px solid #DDDDDD; +} + +/* 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.2307em 0.2307em 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: none, none; + border-radius: 0em 0em 0.2307em 0.2307em; +} +.ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0em; +} + +/* Attached Menu Item */ +.ui.top.attached.menu > .item:first-child { + border-radius: 0.2307em 0em 0em 0em; +} +.ui.bottom.attached.menu > .item:first-child { + border-radius: 0em 0em 0em 0.2307em; +} + +/* Tabular Attached */ +.ui.attached.menu:not(.tabular) { + border: 1px solid #DDDDDD; +} +.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.92307692rem; +} +.ui.small.vertical.menu { + width: 13rem; +} + +/* Medium */ +.ui.menu { + font-size: 1rem; +} +.ui.vertical.menu { + width: 15rem; +} + +/* Large */ +.ui.large.menu { + font-size: 1.15384615rem; +} +.ui.large.vertical.menu { + width: 18rem; +} + +/* Huge */ +.ui.huge.menu { + font-size: 1.46153846rem; +} +.ui.huge.vertical.menu { + width: 20rem; +} + + +/******************************* + Site Overrides +*******************************/ + + +/*-------------- + Tabular +---------------*/ + +.ui.vertical.tabular.menu { + padding: 1rem 0em; +} +.ui.vertical.tabular.menu .item { + margin-top: 0.38461538em; + margin-bottom: 0.38461538em; + border-radius: 0px; +} + +/* Special Hover */ +.ui.vertical.tabular.menu a.item:not(.active):hover { + box-shadow: 2px 0px 0px #CCCCCC inset; +} +.ui.vertical.tabular.menu a.item:not(.active):hover .icon { + opacity: 1; +} + +/* Special Active */ +.ui.tabular.menu:not(.vertical) .active.item { + border-top: 3px solid #D26911 !important; + box-shadow: none; +} +.ui.vertical.tabular.menu:not(.right) .active.item { + border-left: 3px solid #D26911 !important; + box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.05); +} + +/* Right Side */ +.ui.vertical.right.tabular.menu { + background: -webkit-linear-gradient(left, #f6f6f6 0%, #FFFFFF 8px) transparent; + background: linear-gradient(to right, #f6f6f6 0%, #FFFFFF 8px) transparent; +} +.ui.vertical.right.tabular.menu .active.item { + border-right: 3px solid #D26911 !important; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Message +*******************************/ + +.ui.message { + position: relative; + min-height: 1em; + margin: 1em 0em; + background: #FEFEFE; + padding: 15px 15px; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + border-radius: 0.2307em; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; +} +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} + +/*-------------- + Content +---------------*/ + + +/* Header */ +.ui.message .header { + display: block; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + margin: -0.14285em 0em 0rem 0em; +} + +/* Default font size */ +.ui.message .header:not(.ui) { + font-size: 1.15em; +} + +/* Paragraph */ +.ui.message p { + opacity: 0.85; + margin: 0.75em 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: 0.25em; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0em; + opacity: 0.85; + list-style-position: inside; + margin: 0.5em 0em 0em; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0em; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0em; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0em 0em 0.3em 1em; + padding: 0em; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0em; +} + +/* Icon */ +.ui.message > .icon { + margin-right: 0.6em; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0em; + top: 14.78575px; + right: 0.5em; + opacity: 0.7; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} + + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0px -1px; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Visible +---------------*/ + +.ui.visible.visible.visible.visible.message { + display: block; +} +.ui.icon.visible.visible.visible.visible.message { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: -1px; + border-radius: 0.2307em 0.2307em 0em 0em; + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.13) inset; + margin-left: -1px; + margin-right: -1px; +} +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: -1px; + border-radius: 0em; +} +.ui.bottom.attached.message { + margin-top: -1px; + border-radius: 0em 0em 0.2307em 0.2307em; + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.13) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.13); +} +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: 1em; +} +.ui.attached.icon.message { + width: auto; +} + +/*-------------- + Icon +---------------*/ + +.ui.icon.message { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + line-height: 1; + vertical-align: middle; + font-size: 3em; + opacity: 0.8; +} +.ui.icon.message > .content { + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + vertical-align: middle; +} +.ui.icon.message .icon:not(.close) + .content { + padding-left: 0rem; +} +.ui.icon.message .circular.icon { + width: 1em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.message { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; +} + +/*-------------- + Colors +---------------*/ + +.ui.black.message { + background-color: #333333; + color: rgba(255, 255, 255, 0.9); +} + +/*-------------- + Types +---------------*/ + + +/* Positive */ +.ui.positive.message { + background-color: #FCFFF5; + color: #2C662D; +} +.ui.positive.message, +.ui.attached.positive.message { + box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.positive.message .header { + color: #1A531B; +} + +/* Negative */ +.ui.negative.message { + background-color: #FFF6F6; + color: #9F3A38; +} +.ui.negative.message, +.ui.attached.negative.message { + box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.negative.message .header { + color: #912D2B; +} + +/* Info */ +.ui.info.message { + background-color: #E6F1F6; + color: #4E575B; +} +.ui.info.message, +.ui.attached.info.message { + box-shadow: 0px 0px 0px 1px #B7C7CF inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.info.message .header { + color: #0E566C; +} + +/* Warning */ +.ui.warning.message { + background-color: #FFFAF3; + color: #613A00; +} +.ui.warning.message, +.ui.attached.warning.message { + box-shadow: 0px 0px 0px 1px #DCA874 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.warning.message .header { + color: #794B02; +} + +/* Error */ +.ui.error.message { + background-color: #FFF6F6; + color: #991111; +} +.ui.error.message, +.ui.attached.error.message { + box-shadow: 0px 0px 0px 1px #DA9797 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.error.message .header { + color: #912D2B; +} + +/* Success */ +.ui.success.message { + background-color: #FCFFF5; + color: #2C662D; +} +.ui.success.message, +.ui.attached.success.message { + box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.success.message .header { + color: #1A531B; +} + +/* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: #333333; + color: rgba(255, 255, 255, 0.9); +} +.ui.red.message { + background-color: #FFE8E6; + color: #DB2828; +} +.ui.red.message .header { + color: #c82121; +} +.ui.orange.message { + background-color: #FFEDDE; + color: #D26911; +} +.ui.orange.message .header { + color: #ba5d0f; +} +.ui.yellow.message { + background-color: #FFF8DB; + color: #B58105; +} +.ui.yellow.message .header { + color: #9c6f04; +} +.ui.olive.message { + background-color: #FBFDEF; + color: #8ABC1E; +} +.ui.olive.message .header { + color: #7aa61a; +} +.ui.green.message { + background-color: #E5F9E7; + color: #1EBC30; +} +.ui.green.message .header { + color: #1aa62a; +} +.ui.teal.message { + background-color: #E1F7F7; + color: #10A3A3; +} +.ui.teal.message .header { + color: #0e8c8c; +} +.ui.blue.message { + background-color: #DFF0FF; + color: #80A6CD; +} +.ui.blue.message .header { + color: #6e99c6; +} +.ui.violet.message { + background-color: #EAE7FF; + color: #6435C9; +} +.ui.violet.message .header { + color: #5a30b5; +} +.ui.purple.message { + background-color: #F6E7FF; + color: #A333C8; +} +.ui.purple.message .header { + color: #922eb4; +} +.ui.pink.message { + background-color: #FFE3FB; + color: #E03997; +} +.ui.pink.message .header { + color: #dd238b; +} +.ui.brown.message { + background-color: #F1E2D3; + color: #A5673F; +} +.ui.brown.message .header { + color: #935b38; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.message { + font-size: 0.92307692em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.15384615em; +} +.ui.huge.message { + font-size: 1.46153846em; +} +.ui.massive.message { + font-size: 1.69230769em; +} + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Popup +*******************************/ + +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + +/* Fixes content being squished when inline (moz only) */ + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + z-index: 1900; + border: 1px solid #DDDDDD; + line-height: 1.4285em; + max-width: 250px; + background: #FFFFFF; + padding: 0.53846154em 0.84615385em; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.2307em; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); +} +.ui.popup > .header { + padding: 0em; + font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup > .header + .content { + padding-top: 0.5em; +} +.ui.popup:before { + position: absolute; + content: ''; + width: 0.75em; + height: 0.75em; + background: #FFFFFF; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + box-shadow: 1px 1px 0px 0px #c4c4c4; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0em; +} + +/* Extending from Top */ +.ui.top.popup { + margin: 0em 0em 0.75em; +} +.ui.top.left.popup { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} +.ui.top.center.popup { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +.ui.top.right.popup { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { + margin: 0em 0.75em 0em 0em; + -webkit-transform-origin: right 50%; + transform-origin: right 50%; +} +.ui.right.center.popup { + margin: 0em 0em 0em 0.75em; + -webkit-transform-origin: left 50%; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: 0.75em 0em 0em; +} +.ui.bottom.left.popup { + -webkit-transform-origin: left top; + transform-origin: left top; +} +.ui.bottom.center.popup { + -webkit-transform-origin: center top; + transform-origin: center top; +} +.ui.bottom.right.popup { + -webkit-transform-origin: right top; + transform-origin: right top; +} + +/*-------------- + Pointer +---------------*/ + + +/*--- Below ---*/ + +.ui.bottom.center.popup:before { + margin-left: -0.325em; + top: -0.325em; + left: 50%; + right: auto; + bottom: auto; + box-shadow: -1px -1px 0px 0px #c4c4c4; +} +.ui.bottom.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.bottom.left.popup:before { + top: -0.325em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #c4c4c4; +} +.ui.bottom.right.popup { + margin-right: 0em; +} +/*rtl:rename*/ +.ui.bottom.right.popup:before { + top: -0.325em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #c4c4c4; +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.325em; + left: 50%; + margin-left: -0.325em; +} +.ui.top.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.top.left.popup:before { + bottom: -0.325em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} +.ui.top.right.popup { + margin-right: 0em; +} +/*rtl:rename*/ +.ui.top.right.popup:before { + bottom: -0.325em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ + +/*rtl:rename*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.325em; + bottom: auto; + left: auto; + margin-top: -0.325em; + box-shadow: 1px -1px 0px 0px #c4c4c4; +} + +/*--- Right Center ---*/ + +/*rtl:rename*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.325em; + bottom: auto; + right: auto; + margin-top: -0.325em; + box-shadow: -1px 1px 0px 0px #c4c4c4; +} + +/* Arrow Color By Location */ +.ui.bottom.popup:before { + background: #FFFFFF; +} +.ui.right.center.popup:before, +.ui.left.center.popup:before { + background: #FFFFFF; +} +.ui.top.popup:before { + background: #FFFFFF; +} + +/* Inverted Arrow Color */ +.ui.inverted.bottom.popup:before { + background: #333333; +} +.ui.inverted.right.center.popup:before, +.ui.inverted.left.center.popup:before { + background: #333333; +} +.ui.inverted.top.popup:before { + background: #333333; +} + + +/******************************* + Coupling +*******************************/ + + +/* Immediate Nested Grid */ +.ui.popup > .ui.grid:not(.padded) { + width: calc(100% + 1.75rem); + margin: -0.7rem -0.875rem; +} + + +/******************************* + States +*******************************/ + +.ui.loading.popup { + display: block; + visibility: hidden; + z-index: -1; +} +.ui.animating.popup, +.ui.visible.popup { + display: block; +} +.ui.visible.popup { + -webkit-transform: translateZ(0px); + transform: translateZ(0px); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Basic +---------------*/ + +.ui.basic.popup:before { + display: none; +} + +/*-------------- + Wide +---------------*/ + +.ui.wide.popup { + max-width: 350px; +} +.ui[class*="very wide"].popup { + max-width: 550px; +} +@media only screen and (max-width: 1048px) { + .ui.wide.popup, + .ui[class*="very wide"].popup { + max-width: 250px; + } +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.popup { + width: 100%; + max-width: none; +} + +/*-------------- + Colors +---------------*/ + + +/* Inverted colors */ +.ui.inverted.popup { + background: #333333; + color: #FFFFFF; + border: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: none; + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #333333; + box-shadow: none !important; +} + +/*-------------- + Flowing +---------------*/ + +.ui.flowing.popup { + max-width: none; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.popup { + font-size: 0.69230769rem; +} +.ui.tiny.popup { + font-size: 0.84615385rem; +} +.ui.small.popup { + font-size: 0.76923077em; +} +.ui.popup { + font-size: 0.84615385em; +} +.ui.large.popup { + font-size: 1em; +} +.ui.huge.popup { + font-size: 1.46153846rem; +} + + +/******************************* + User Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: 3 !important; + -webkit-transition: all 0.5s ease 0.1s; + transition: all 0.5s ease 0.1s; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: 2 !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: 4 !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} +.ui.slide.reveal > .content { + display: block; + width: 100%; + float: left; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s ease 0.1s; + transition: -webkit-transform 0.5s ease 0.1s; + transition: transform 0.5s ease 0.1s; + transition: transform 0.5s ease 0.1s, -webkit-transform 0.5s ease 0.1s; +} +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .visible.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.up.reveal > .hidden.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + -webkit-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} +.ui.slide.down.reveal > .hidden.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + -webkit-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} +.ui.move.reveal > .content { + display: block; + float: left; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; +} +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.conten, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + -webkit-transform: rotate(-110deg); + transform: rotate(-110deg); +} + + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + -webkit-transform: none !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + -webkit-transition-delay: 0s !important; + transition-delay: 0s !important; +} + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: 1rem !important; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: #FFFFFF; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075); + margin: 1rem 0em; + padding: 20px 20px; + border-radius: 4px; + border: 1px solid #D8DEE2; +} +.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(0, 0, 0, 0.13); +} +.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: 40px; + padding-bottom: 40px; +} +.ui.grid.segment { + margin: 1rem 0em; + border-radius: 4px; +} + +/* Table */ +.ui.basic.table.segment { + background: #FFFFFF; + border: 1px solid #D8DEE2; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075); +} +.ui[class*="very basic"].table.segment { + padding: 20px 20px; +} + + +/******************************* + 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 #D8DEE2; + 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: 20.4px; +} +.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(0, 0, 0, 0.13); + 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 #51A7E8; +} + +/*------------------- + 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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -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 1px 3px rgba(0, 0, 0, 0.075); +} + + +/******************************* + Groups +*******************************/ + + +/* Group */ +.ui.segments { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + margin: 1rem 0em; + border: 1px solid #D8DEE2; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075); + border-radius: 4px; +} +.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 #D8DEE2; +} +.ui.segments:not(.horizontal) > .segment:first-child { + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: 0px; + border-radius: 4px 4px 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: 0px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075), none; + border-radius: 0em 0em 4px 4px; +} + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: 1px solid #D8DEE2; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: #FFFFFF; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075); + margin: 1rem 0em; + border-radius: 4px; + border: 1px solid #D8DEE2; +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-top: 1px solid #D8DEE2; +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + 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(0, 0, 0, 0.13); +} + +/* 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.3; + 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: 4px; + 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: 0.5em solid #DB2828; +} +.ui.inverted.red.segment { + background-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: 0.5em solid #D26911; +} +.ui.inverted.orange.segment { + background-color: #D26911 !important; + color: #FFFFFF !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: 0.5em solid #FBBD08; +} +.ui.inverted.yellow.segment { + background-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: 0.5em solid #B5CC18; +} +.ui.inverted.olive.segment { + background-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: 0.5em solid #78CB5B; +} +.ui.inverted.green.segment { + background-color: #78CB5B !important; + color: #FFFFFF !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: 0.5em solid #00B5AD; +} +.ui.inverted.teal.segment { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: 0.5em solid #80A6CD; +} +.ui.inverted.blue.segment { + background-color: #80A6CD !important; + color: #FFFFFF !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: 0.5em solid #6435C9; +} +.ui.inverted.violet.segment { + background-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: 0.5em solid #A333C8; +} +.ui.inverted.purple.segment { + background-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: 0.5em solid #E03997; +} +.ui.inverted.pink.segment { + background-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: 0.5em solid #A5673F; +} +.ui.inverted.brown.segment { + background-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: 0.5em solid #767676; +} +.ui.inverted.grey.segment { + background-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: 0.5em solid #333333; +} +.ui.inverted.black.segment { + background-color: #333333 !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: #333333; + 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: #F9F9F9; + color: rgba(0, 0, 0, 0.87); +} +.ui.secondary.inverted.segment { + background: #555555; + color: rgba(0, 0, 0, 0.87); +} + +/* Tertiary */ +.ui.tertiary.segment { + background: #F0F0F0; + color: rgba(0, 0, 0, 0.87); +} +.ui.tertiary.inverted.segment { + background: #333333; + color: rgba(0, 0, 0, 0.87); +} + +/*------------------- + 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 #DDDDDD; +} +.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: 4px 4px 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 3px rgba(0, 0, 0, 0.075), none; + border-radius: 0em 0em 4px 4px; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + + +/******************************* + Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + +/*! + * # Semantic UI 2.1.8 - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Table +*******************************/ + + +/* Prototype */ +.ui.table { + width: 100%; + background: #FFFFFF; + margin: 1em 0em; + border: 1px solid rgba(0, 0, 0, 0.13); + box-shadow: none; + border-radius: 0.2307em; + text-align: left; + color: rgba(0, 0, 0, 0.87); + border-collapse: separate; + border-spacing: 0px; +} +.ui.table:first-child { + margin-top: 0em; +} +.ui.table:last-child { + margin-bottom: 0em; +} + + +/******************************* + Parts +*******************************/ + + +/* Table Content */ +.ui.table th, +.ui.table td { + -webkit-transition: background 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, color 0.1s ease; +} + +/* Headers */ +.ui.table thead { + box-shadow: none; +} +.ui.table thead th { + cursor: auto; + background: #F9FAFB; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.92307692em 0.61538462em; + vertical-align: inherit; + font-style: none; + font-weight: bold; + text-transform: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + border-left: none; +} +.ui.table thead tr > th:first-child { + border-left: none; +} +.ui.table thead tr:first-child > th:first-child { + border-radius: 0.2307em 0em 0em 0em; +} +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em 0.2307em 0em 0em; +} +.ui.table thead tr:first-child > th:only-child { + border-radius: 0.2307em 0.2307em 0em 0em; +} + +/* Footer */ +.ui.table tfoot { + box-shadow: none; +} +.ui.table tfoot th { + cursor: auto; + border-top: 1px solid rgba(0, 0, 0, 0.13); + background: #F9FAFB; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.46153846em 0.61538462em; + vertical-align: middle; + font-style: normal; + font-weight: normal; + text-transform: none; +} +.ui.table tfoot tr > th:first-child { + border-left: none; +} +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em 0.2307em; +} +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em 0.2307em 0em; +} +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em 0.2307em 0.2307em; +} + +/* Table Row */ +.ui.table tr td { + border-top: 1px solid rgba(0, 0, 0, 0.06); +} +.ui.table tr:first-child td { + border-top: none; +} + +/* Table Cells */ +.ui.table td { + padding: 0.46153846em 0.61538462em; + text-align: inherit; +} + +/* Icons */ +.ui.table > .icon { + vertical-align: baseline; +} +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0em; +} +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} + +/* Responsive */ +@media only screen and (max-width: 1048px) { + .ui.table:not(.unstackable) { + width: 100%; + } + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + width: auto !important; + display: block !important; + } + .ui.table:not(.unstackable) { + padding: 0em; + } + .ui.table:not(.unstackable) thead { + display: block; + } + .ui.table:not(.unstackable) tfoot { + display: block; + } + .ui.table:not(.unstackable) tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em !important; + box-shadow: none !important; + } + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: bold; + } + +/* Definition Table */ + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + + +/******************************* + Coupling +*******************************/ + + +/* UI Image */ +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} +.ui.structured.table thead th { + border-left: none; + border-right: none; +} +.ui.structured.sortable.table thead th { + border-left: 1px solid rgba(0, 0, 0, 0.13); + border-right: 1px solid rgba(0, 0, 0, 0.13); +} +.ui.structured.basic.table th { + border-left: none; + border-right: none; +} +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: 1px solid rgba(0, 0, 0, 0.06); + border-right: 1px solid rgba(0, 0, 0, 0.06); +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: normal; + color: rgba(0, 0, 0, 0.4); + box-shadow: -1px -1px 0px 1px #FFFFFF; +} +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: rgba(0, 0, 0, 0.4); + color: normal; + box-shadow: 1px 1px 0px 1px #FFFFFF; +} + +/* Remove Border */ +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -1px 0px 1px #FFFFFF; +} +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px 1px 0px 1px #FFFFFF; +} + +/* Highlight Defining Column */ +.ui.definition.table tr td:first-child { + background: rgba(0, 0, 0, 0.03); + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/* Fix 2nd Column */ +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(0, 0, 0, 0.13); +} +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(0, 0, 0, 0.13); +} +.ui.definition.table td:nth-child(2) { + border-left: 1px solid rgba(0, 0, 0, 0.13); +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: 0px 0px 0px #A3C293 inset; +} +.ui.table tr.positive, +.ui.table td.positive { + background: #FCFFF5 !important; + color: #2C662D !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: 0px 0px 0px #E0B4B4 inset; +} +.ui.table tr.negative, +.ui.table td.negative { + background: #FFF6F6 !important; + color: #9F3A38 !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: 0px 0px 0px #E0B4B4 inset; +} +.ui.table tr.error, +.ui.table td.error { + background: #FFF6F6 !important; + color: #991111 !important; +} + +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: 0px 0px 0px #C9BA9B inset; +} +.ui.table tr.warning, +.ui.table td.warning { + background: #FFFAF3 !important; + color: #613A00 !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset; +} +.ui.table tr.active, +.ui.table td.active { + background: #E0E0E0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: rgba(40, 40, 40, 0.3); +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: 1048px) { + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + width: 100% !important; + display: block !important; + } + .ui[class*="tablet stackable"].table { + padding: 0em; + } + .ui[class*="tablet stackable"].table thead { + display: block; + } + .ui[class*="tablet stackable"].table tfoot { + display: block; + } + .ui[class*="tablet stackable"].table tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em; + box-shadow: none !important; + } + +/* Definition Table */ + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: #F5F5F5 !important; + color: rgba(0, 0, 0, 0.87) !important; +} +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: rgba(255, 255, 255, 0.08) !important; + color: #ffffff !important; +} + +/* Selectable Cell Link */ +.ui.table tbody tr td.selectable { + padding: 0em; +} +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: 0.46153846em 0.61538462em; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: #ffe7e7 !important; + color: #8b0f0f !important; +} +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: #fff4e4 !important; + color: #523100 !important; +} +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: #E0E0E0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: #f7ffe6 !important; + color: #275b28 !important; +} +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: #ffe7e7 !important; + color: #943634 !important; +} + +/*------------------- + Attached +--------------------*/ + + +/* Middle */ +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em -1px; + width: calc(100% + 2px ); + max-width: calc(100% + 2px ); + box-shadow: none; + border: 1px solid #DDDDDD; +} +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: 0px; + margin-top: 1em; + border-radius: 0.2307em 0.2307em 0em 0em; +} +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: 0px; + margin-bottom: 1em; + box-shadow: none, none; + border-radius: 0em 0em 0.2307em 0.2307em; +} +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); +} + +/* Stripes */ +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.05); +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +.ui.red.table { + border-top: 0.2em solid #DB2828; +} +.ui.inverted.red.table { + background-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Orange */ +.ui.orange.table { + border-top: 0.2em solid #D26911; +} +.ui.inverted.orange.table { + background-color: #D26911 !important; + color: #FFFFFF !important; +} + +/* Yellow */ +.ui.yellow.table { + border-top: 0.2em solid #FBBD08; +} +.ui.inverted.yellow.table { + background-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Olive */ +.ui.olive.table { + border-top: 0.2em solid #B5CC18; +} +.ui.inverted.olive.table { + background-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Green */ +.ui.green.table { + border-top: 0.2em solid #78CB5B; +} +.ui.inverted.green.table { + background-color: #78CB5B !important; + color: #FFFFFF !important; +} + +/* Teal */ +.ui.teal.table { + border-top: 0.2em solid #00B5AD; +} +.ui.inverted.teal.table { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Blue */ +.ui.blue.table { + border-top: 0.2em solid #80A6CD; +} +.ui.inverted.blue.table { + background-color: #80A6CD !important; + color: #FFFFFF !important; +} + +/* Violet */ +.ui.violet.table { + border-top: 0.2em solid #6435C9; +} +.ui.inverted.violet.table { + background-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Purple */ +.ui.purple.table { + border-top: 0.2em solid #A333C8; +} +.ui.inverted.purple.table { + background-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Pink */ +.ui.pink.table { + border-top: 0.2em solid #E03997; +} +.ui.inverted.pink.table { + background-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Brown */ +.ui.brown.table { + border-top: 0.2em solid #A5673F; +} +.ui.inverted.brown.table { + background-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Grey */ +.ui.grey.table { + border-top: 0.2em solid #767676; +} +.ui.inverted.grey.table { + background-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Black */ +.ui.black.table { + border-top: 0.2em solid #333333; +} +.ui.inverted.black.table { + background-color: #333333 !important; + color: #FFFFFF !important; +} + +/*-------------- + Column Count +---------------*/ + + +/* Grid Based */ +.ui.one.column.table td { + width: 100%; +} +.ui.two.column.table td { + width: 50%; +} +.ui.three.column.table td { + width: 33.33333333%; +} +.ui.four.column.table td { + width: 25%; +} +.ui.five.column.table td { + width: 20%; +} +.ui.six.column.table td { + width: 16.66666667%; +} +.ui.seven.column.table td { + width: 14.28571429%; +} +.ui.eight.column.table td { + width: 12.5%; +} +.ui.nine.column.table td { + width: 11.11111111%; +} +.ui.ten.column.table td { + width: 10%; +} +.ui.eleven.column.table td { + width: 9.09090909%; +} +.ui.twelve.column.table td { + width: 8.33333333%; +} +.ui.thirteen.column.table td { + width: 7.69230769%; +} +.ui.fourteen.column.table td { + width: 7.14285714%; +} +.ui.fifteen.column.table td { + width: 6.66666667%; +} +.ui.sixteen.column.table td { + width: 6.25%; +} + +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: 1px solid rgba(0, 0, 0, 0.13); + color: rgba(0, 0, 0, 0.87); +} +.ui.sortable.table thead th:first-child { + border-left: none; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: auto; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; +} +.ui.sortable.table thead th.ascending:after { + content: '\f0d8'; +} +.ui.sortable.table thead th.descending:after { + content: '\f0d7'; +} + +/* Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: rgba(40, 40, 40, 0.3); +} +.ui.sortable.table thead th:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.8); +} + +/* Sorted */ +.ui.sortable.table thead th.sorted { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ +.ui.sortable.table thead th.sorted:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ +.ui.inverted.sortable.table thead th.sorted { + background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} +.ui.inverted.sortable.table thead th:hover { + background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} +.ui.inverted.sortable.table thead th { + border-left-color: transparent; + border-right-color: transparent; +} + +/*-------------- + Inverted +---------------*/ + + +/* Text Color */ +.ui.inverted.table { + background: #333333; + color: rgba(255, 255, 255, 0.9); + border: none; +} +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + border-color: rgba(255, 255, 255, 0.1) !important; + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.table tr td { + border-color: rgba(255, 255, 255, 0.1) !important; +} +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: rgba(225, 225, 225, 0.3); +} + +/* Definition */ +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: #FFFFFF; +} +.ui.inverted.definition.table tr td:first-child { + background: rgba(255, 255, 255, 0.02); + color: #ffffff; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: transparent; + border: 1px solid rgba(0, 0, 0, 0.13); + box-shadow: none; +} +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} +.ui.basic.table th { + background: transparent; + border-left: none; +} +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.basic.table td { + background: transparent; +} +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +/* Very Basic */ +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: ''; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: 1px solid rgba(0, 0, 0, 0.06); +} +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: 1em; + padding-right: 1em; +} +.ui.padded.table th, +.ui.padded.table td { + padding: 1em 1em; +} + +/* Very */ +.ui[class*="very padded"].table th { + padding-left: 1.5em; + padding-right: 1.5em; +} +.ui[class*="very padded"].table td { + padding: 1.5em 1.5em; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: 0.7em; + padding-right: 0.7em; +} +.ui.compact.table td { + padding: 0.5em 0.7em; +} + +/* Very */ +.ui[class*="very compact"].table th { + padding-left: 0.6em; + padding-right: 0.6em; +} +.ui[class*="very compact"].table td { + padding: 0.4em 0.6em; +} + +/*-------------- + Sizes +---------------*/ + + +/* Small */ +.ui.small.table { + font-size: 0.9em; +} + +/* Standard */ +.ui.table { + font-size: 1em; +} + +/* Large */ +.ui.large.table { + font-size: 1.1em; +} + +.menu { + right: -100.328px; +} + + + + + + + + + + + + + +/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ +/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ +/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ +/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ +/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ + + +/* Repo icon */ +.repository .header-grid .mega-octicon { + font-size: 16px; + color: #959da5; +} + +.repository .header-wrapper .ui.tabular .octicon { + color: rgba(27,31,35,0.3); +} + +/* Page width */ +.ui.container { + width: 980px; +} + +.repository.file.list #repo-files-table thead th { + background-color: #f1f8ff; +} + +.repository.file.list #repo-files-table tbody .octicon { + color: rgba(3,47,98,0.5); +} + + + +.repository.file.list #repo-files-table tbody .octicon.octicon-file-directory, .repository.file.list #repo-files-table tbody .octicon.octicon-file-submodule, .repository.file.list #repo-files-table tbody .octicon.octicon-file-symlink-directory { + color: rgba(3,47,98,0.5); +} + +.following.bar.light { + background-color: #fff; + border-bottom: 1px solid #DDD; + box-shadow: 0 2px 3px rgba(0,0,0,.04); +} + +.following.bar { + margin: 0px; +} + +.repository .header-grid .ui.huge.breadcrumbn { + line-height: 26px; + font-size: 18px; +} + + +.repository.file.list #file-buttons .ui.button { + color: #24292e; + background-color: #e6ebf1; + background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%); + font-weight: 600; +} + + +.ui.tabular.menu:not(.vertical) .active.item { + border-right-color: rgb(225, 228, 232); + border-bottom-color: transparent; + border-left-color: rgb(225, 228, 232); +} + +.repository .ui.tabs.container .ui.menu { + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 14px; + line-height: 1.5; + color: #24292e; +} diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl new file mode 100644 index 0000000..a472b7f --- /dev/null +++ b/templates/custom/header.tmpl @@ -0,0 +1 @@ +