@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap);
/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* Global Css File: Anything imported here will be added to the `dist/shared.css` bundle File is imported into: Pages/userHomepage/v1/index.jsx Widgets/globalNav/v1/index.jsx 2 imports triggers code-splitter & adds anything in this file to `dist/shared.css` */
@keyframes animate-opacity-in { from { opacity: 0; }
  to { opacity: 1; } }

.animate-opacity-in { animation: animate-opacity-in 0.2s; }

@keyframes bg-position { 0% { background-position: -500px 0; }
  100% { background-position: 500px 0; } }

@keyframes bg-pulse { 0% { opacity: 0.1; }
  50% { opacity: 0.2; }
  100% { opacity: 0.1; } }

.f-animate-pulse { animation: 1.5s ease-in-out infinite forwards bg-pulse; background: #444647; }

.animate-background, .animate-foreground { animation: 1s ease-in-out infinite forwards bg-position; }

.animate-background { background: #f5f5f6; background: linear-gradient(to right, #f5f5f6 8%, #d5d9db 18%, #f5f5f6 33%); background-size: 800px 104px; position: relative; z-index: 0; }

.animate-foreground { background: #d5d9db; background: linear-gradient(to right, #d5d9db 8%, #f5f5f6 18%, #d5d9db 33%); background-size: 800px 104px; }

@keyframes animate-ellipsis { to { width: 1.25em; } }

.animate-ellipsis { display: inline-block; font-size: 12px; width: 10px; }

.animate-ellipsis::after { animation: animate-ellipsis steps(4, end) 1400ms infinite; content: '\2026'; display: inline-block; overflow: hidden; vertical-align: text-bottom; width: 0; }

.fractal-animate-in { opacity: 1; transition: opacity 0.2s ease-in-out; }

.fractal-animate-out { opacity: 0; transition: opacity 0.2s ease-in-out; visibility: hidden; }

/* #region misc classes */
.fractal-auto-scroll { overflow: auto; }

.fractal-hide-scroll { overflow: hidden; }

.fractal-inline { display: inline; }

.fractal-list-base { list-style-type: none; }

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

.fractal-hidden { display: none; }

.fractal-round { border-radius: 1000px; }

.fractal-loading { filter: blur(4px); opacity: 0.5; }

.fractal-margin-10 { margin: 10px; }

.fractal-pointer { cursor: pointer; }

.f-block-screen { align-items: center; background: rgba(0, 0, 0, 0.2); display: flex; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999; }

/* #endregion */
body .__react_component_tooltip { font-size: 12px !important; font-weight: normal; height: auto; line-height: normal; padding: 8px; text-align: left; z-index: 2147483600; }

.__react_component_tooltip.f-member-flyover-tooltip { padding: 0; }

.__react_component_tooltip.show { opacity: 0.9; }

.__react_component_tooltip.type-dark { background: #444647; }

.__react_component_tooltip.type-dark.place-bottom { margin-top: 0; }

.__react_component_tooltip.type-dark.place-bottom::after { border-bottom-color: #444647; }

.__react_component_tooltip.type-dark.place-left::after { border-left-color: #444647; }

.__react_component_tooltip.type-dark.place-right::after { border-right-color: #444647; }

.__react_component_tooltip.type-dark.place-top::after { border-top-color: #444647; }

/* #region file extensions */
.ext { background-color: #bdc3c7; border-radius: 5px; color: #fff; height: 30px; margin-right: 5px; max-width: 30px; text-align: center; text-transform: uppercase; transition: all 0.3s linear 0.5s; }

.ext.ext-xls, .ext.ext-xlsx { background-color: #009e48; }

.ext.ext-ppt, .ext.ext-pptx { background-color: #dd5800; }

.ext.ext-pdf { background-color: #f00; }

.ext.ext-ai { background-color: #f39c12; }

.ext.ext-doc, .ext.ext-docx, .ext.ext-psd, .ext.ext-mov, .ext.ext-csv { background-color: #0071c5; }

.ext.ext-zip, .ext.ext-rar, .ext.ext-7z { background-color: #f4d313; }

/* #endregion */
/* #region fractal font awesome utility classes */
.fa.f-fa-centered { /** Tried to do via text centering which may be a little more ideal in some cases https://stackoverflow.com/a/19163276 https://stackoverflow.com/a/29392660 however this leads to oddities with rotating transforms So just flexboxing it: https://stackoverflow.com/a/22218694 */ align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; /* &.fa-pencil-square-o { &::before { margin-left: 1px; } } &.f-fa-rotated-90 { &.fa-bars { &::before { // @todo Shift 0.5px to center horizontally // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin // Shift left (it's rotated 90 degrees, need transform-origin to move sub-pixel level, having trouble making that work) // transform-origin: left .5px; } } } */ }

.fa.f-fa-rotated-45 { display: inline-flex; }

.fa.f-fa-rotated-45::before { transform: rotate(45deg); }

.fa.f-fa-rotated-90 { display: inline-flex; }

.fa.f-fa-rotated-90::before { transform: rotate(90deg); }

.fa-icon-blue { color: #3498db; }

/* #endregion */
@media all and (-ms-high-contrast: none) { .fractal-loading { opacity: 0.2; } }

/* Fontawesome 5.15.4 import Not adding duotone as we do not use them for now, to add: add webfont files to ./vendors/fontawesome/webfonts Define @font-face here Import './vendors/fontawesome/css/brands.min' */
/* FA5 Default fonts */
@font-face { font-display: auto; font-family: 'Font Awesome 5 Pro'; font-style: normal; font-weight: 300; src: url(/fractal/dist/font/fa-light-300.eot); src: url(/fractal/dist/font/fa-light-300.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-light-300.woff2) format("woff2"), url(/fractal/dist/font/fa-light-300.woff) format("woff"), url(/fractal/dist/font/fa-light-300.ttf) format("truetype"); }

.fal { font-family: 'Font Awesome 5 Pro'; font-weight: 300; }

@font-face { font-display: auto; font-family: 'Font Awesome 5 Pro'; font-style: normal; src: url(/fractal/dist/font/fa-regular-400.eot); src: url(/fractal/dist/font/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-regular-400.woff2) format("woff2"), url(/fractal/dist/font/fa-regular-400.woff) format("woff"), url(/fractal/dist/font/fa-regular-400.ttf) format("truetype"); }

.far { font-family: 'Font Awesome 5 Pro'; font-weight: 400; }

@font-face { font-display: auto; font-family: 'Font Awesome 5 Pro'; font-style: normal; font-weight: 900; src: url(/fractal/dist/font/fa-solid-900.eot); src: url(/fractal/dist/font/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-solid-900.woff2) format("woff2"), url(/fractal/dist/font/fa-solid-900.woff) format("woff"), url(/fractal/dist/font/fa-solid-900.ttf) format("truetype"); }

.fa, .fas { font-family: 'Font Awesome 5 Pro'; font-weight: 900; }

/* FA5 Brands */
@font-face { font-family: 'Font Awesome 5 Brands'; src: url(/fractal/dist/font/fa-brands-400.eot); src: url(/fractal/dist/font/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-brands-400.woff2) format("woff2"), url(/fractal/dist/font/fa-brands-400.woff) format("woff"), url(/fractal/dist/font/fa-brands-400.ttf) format("truetype"); }

.fab { font-family: 'Font Awesome 5 Brands'; }

/* Catch all for any css still using font-family: FontAwesome */
@font-face { font-family: 'FontAwesome'; font-style: normal; src: url(/fractal/dist/font/fa-solid-900.eot); }

/* Mobile fontawesome 5 overwrites */
@font-face { font-display: auto; font-family: FontAwesome5_Pro_Light; font-style: normal; font-weight: normal; src: url(/fractal/dist/font/fa-light-300.eot); src: url(/fractal/dist/font/fa-light-300.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-light-300.woff2) format("woff2"), url(/fractal/dist/font/fa-light-300.woff) format("woff"), url(/fractal/dist/font/fa-light-300.ttf) format("truetype"); }

@font-face { font-display: auto; font-family: FontAwesome5_Regular; font-style: normal; font-weight: normal; src: url(/fractal/dist/font/fa-regular-400.eot); src: url(/fractal/dist/font/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-regular-400.woff2) format("woff2"), url(/fractal/dist/font/fa-regular-400.woff) format("woff"), url(/fractal/dist/font/fa-regular-400.ttf) format("truetype"); }

@font-face { font-display: auto; font-family: FontAwesome5_Solid; font-style: normal; font-weight: normal; src: url(/fractal/dist/font/fa-solid-900.eot); src: url(/fractal/dist/font/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/font/fa-solid-900.woff2) format("woff2"), url(/fractal/dist/font/fa-solid-900.woff) format("woff"), url(/fractal/dist/font/fa-solid-900.ttf) format("truetype"); }

/*! Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) */
.fa, .fab, .fad, .fal, .far, .fas { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; }

.fa-lg { font-size: 1.33333em; line-height: .75em; vertical-align: -.0667em; }

.fa-xs { font-size: .75em; }

.fa-sm { font-size: .875em; }

.fa-1x { font-size: 1em; }

.fa-2x { font-size: 2em; }

.fa-3x { font-size: 3em; }

.fa-4x { font-size: 4em; }

.fa-5x { font-size: 5em; }

.fa-6x { font-size: 6em; }

.fa-7x { font-size: 7em; }

.fa-8x { font-size: 8em; }

.fa-9x { font-size: 9em; }

.fa-10x { font-size: 10em; }

.fa-fw { text-align: center; width: 1.25em; }

.fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0; }

.fa-ul > li { position: relative; }

.fa-li { left: -2em; position: absolute; text-align: center; width: 2em; line-height: inherit; }

.fa-border { border: .08em solid #eee; border-radius: .1em; padding: .2em .25em .15em; }

.fa-pull-left { float: left; }

.fa-pull-right { float: right; }

.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left { margin-right: .3em; }

.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right { margin-left: .3em; }

.fa-spin { -webkit-animation: fa-spin 2s linear infinite; animation: fa-spin 2s linear infinite; }

.fa-pulse { -webkit-animation: fa-spin 1s steps(8) infinite; animation: fa-spin 1s steps(8) infinite; }

@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -webkit-transform: rotate(1turn);
    transform: rotate(1turn); } }

@keyframes fa-spin { 0% { -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -webkit-transform: rotate(1turn);
    transform: rotate(1turn); } }

.fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); }

.fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

.fa-flip-vertical { -webkit-transform: scaleY(-1); transform: scaleY(-1); }

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical, .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; }

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { -webkit-transform: scale(-1); transform: scale(-1); }

:root .fa-flip-both, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270 { -webkit-filter: none; filter: none; }

.fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; }

.fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; }

.fa-stack-1x { line-height: inherit; }

.fa-stack-2x { font-size: 2em; }

.fa-inverse { color: #fff; }

.fa-500px:before { content: "\f26e"; }

.fa-abacus:before { content: "\f640"; }

.fa-accessible-icon:before { content: "\f368"; }

.fa-accusoft:before { content: "\f369"; }

.fa-acorn:before { content: "\f6ae"; }

.fa-acquisitions-incorporated:before { content: "\f6af"; }

.fa-ad:before { content: "\f641"; }

.fa-address-book:before { content: "\f2b9"; }

.fa-address-card:before { content: "\f2bb"; }

.fa-adjust:before { content: "\f042"; }

.fa-adn:before { content: "\f170"; }

.fa-adversal:before { content: "\f36a"; }

.fa-affiliatetheme:before { content: "\f36b"; }

.fa-air-conditioner:before { content: "\f8f4"; }

.fa-air-freshener:before { content: "\f5d0"; }

.fa-airbnb:before { content: "\f834"; }

.fa-alarm-clock:before { content: "\f34e"; }

.fa-alarm-exclamation:before { content: "\f843"; }

.fa-alarm-plus:before { content: "\f844"; }

.fa-alarm-snooze:before { content: "\f845"; }

.fa-album:before { content: "\f89f"; }

.fa-album-collection:before { content: "\f8a0"; }

.fa-algolia:before { content: "\f36c"; }

.fa-alicorn:before { content: "\f6b0"; }

.fa-alien:before { content: "\f8f5"; }

.fa-alien-monster:before { content: "\f8f6"; }

.fa-align-center:before { content: "\f037"; }

.fa-align-justify:before { content: "\f039"; }

.fa-align-left:before { content: "\f036"; }

.fa-align-right:before { content: "\f038"; }

.fa-align-slash:before { content: "\f846"; }

.fa-alipay:before { content: "\f642"; }

.fa-allergies:before { content: "\f461"; }

.fa-amazon:before { content: "\f270"; }

.fa-amazon-pay:before { content: "\f42c"; }

.fa-ambulance:before { content: "\f0f9"; }

.fa-american-sign-language-interpreting:before { content: "\f2a3"; }

.fa-amilia:before { content: "\f36d"; }

.fa-amp-guitar:before { content: "\f8a1"; }

.fa-analytics:before { content: "\f643"; }

.fa-anchor:before { content: "\f13d"; }

.fa-android:before { content: "\f17b"; }

.fa-angel:before { content: "\f779"; }

.fa-angellist:before { content: "\f209"; }

.fa-angle-double-down:before { content: "\f103"; }

.fa-angle-double-left:before { content: "\f100"; }

.fa-angle-double-right:before { content: "\f101"; }

.fa-angle-double-up:before { content: "\f102"; }

.fa-angle-down:before { content: "\f107"; }

.fa-angle-left:before { content: "\f104"; }

.fa-angle-right:before { content: "\f105"; }

.fa-angle-up:before { content: "\f106"; }

.fa-angry:before { content: "\f556"; }

.fa-angrycreative:before { content: "\f36e"; }

.fa-angular:before { content: "\f420"; }

.fa-ankh:before { content: "\f644"; }

.fa-app-store:before { content: "\f36f"; }

.fa-app-store-ios:before { content: "\f370"; }

.fa-apper:before { content: "\f371"; }

.fa-apple:before { content: "\f179"; }

.fa-apple-alt:before { content: "\f5d1"; }

.fa-apple-crate:before { content: "\f6b1"; }

.fa-apple-pay:before { content: "\f415"; }

.fa-archive:before { content: "\f187"; }

.fa-archway:before { content: "\f557"; }

.fa-arrow-alt-circle-down:before { content: "\f358"; }

.fa-arrow-alt-circle-left:before { content: "\f359"; }

.fa-arrow-alt-circle-right:before { content: "\f35a"; }

.fa-arrow-alt-circle-up:before { content: "\f35b"; }

.fa-arrow-alt-down:before { content: "\f354"; }

.fa-arrow-alt-from-bottom:before { content: "\f346"; }

.fa-arrow-alt-from-left:before { content: "\f347"; }

.fa-arrow-alt-from-right:before { content: "\f348"; }

.fa-arrow-alt-from-top:before { content: "\f349"; }

.fa-arrow-alt-left:before { content: "\f355"; }

.fa-arrow-alt-right:before { content: "\f356"; }

.fa-arrow-alt-square-down:before { content: "\f350"; }

.fa-arrow-alt-square-left:before { content: "\f351"; }

.fa-arrow-alt-square-right:before { content: "\f352"; }

.fa-arrow-alt-square-up:before { content: "\f353"; }

.fa-arrow-alt-to-bottom:before { content: "\f34a"; }

.fa-arrow-alt-to-left:before { content: "\f34b"; }

.fa-arrow-alt-to-right:before { content: "\f34c"; }

.fa-arrow-alt-to-top:before { content: "\f34d"; }

.fa-arrow-alt-up:before { content: "\f357"; }

.fa-arrow-circle-down:before { content: "\f0ab"; }

.fa-arrow-circle-left:before { content: "\f0a8"; }

.fa-arrow-circle-right:before { content: "\f0a9"; }

.fa-arrow-circle-up:before { content: "\f0aa"; }

.fa-arrow-down:before { content: "\f063"; }

.fa-arrow-from-bottom:before { content: "\f342"; }

.fa-arrow-from-left:before { content: "\f343"; }

.fa-arrow-from-right:before { content: "\f344"; }

.fa-arrow-from-top:before { content: "\f345"; }

.fa-arrow-left:before { content: "\f060"; }

.fa-arrow-right:before { content: "\f061"; }

.fa-arrow-square-down:before { content: "\f339"; }

.fa-arrow-square-left:before { content: "\f33a"; }

.fa-arrow-square-right:before { content: "\f33b"; }

.fa-arrow-square-up:before { content: "\f33c"; }

.fa-arrow-to-bottom:before { content: "\f33d"; }

.fa-arrow-to-left:before { content: "\f33e"; }

.fa-arrow-to-right:before { content: "\f340"; }

.fa-arrow-to-top:before { content: "\f341"; }

.fa-arrow-up:before { content: "\f062"; }

.fa-arrows:before { content: "\f047"; }

.fa-arrows-alt:before { content: "\f0b2"; }

.fa-arrows-alt-h:before { content: "\f337"; }

.fa-arrows-alt-v:before { content: "\f338"; }

.fa-arrows-h:before { content: "\f07e"; }

.fa-arrows-v:before { content: "\f07d"; }

.fa-artstation:before { content: "\f77a"; }

.fa-assistive-listening-systems:before { content: "\f2a2"; }

.fa-asterisk:before { content: "\f069"; }

.fa-asymmetrik:before { content: "\f372"; }

.fa-at:before { content: "\f1fa"; }

.fa-atlas:before { content: "\f558"; }

.fa-atlassian:before { content: "\f77b"; }

.fa-atom:before { content: "\f5d2"; }

.fa-atom-alt:before { content: "\f5d3"; }

.fa-audible:before { content: "\f373"; }

.fa-audio-description:before { content: "\f29e"; }

.fa-autoprefixer:before { content: "\f41c"; }

.fa-avianex:before { content: "\f374"; }

.fa-aviato:before { content: "\f421"; }

.fa-award:before { content: "\f559"; }

.fa-aws:before { content: "\f375"; }

.fa-axe:before { content: "\f6b2"; }

.fa-axe-battle:before { content: "\f6b3"; }

.fa-baby:before { content: "\f77c"; }

.fa-baby-carriage:before { content: "\f77d"; }

.fa-backpack:before { content: "\f5d4"; }

.fa-backspace:before { content: "\f55a"; }

.fa-backward:before { content: "\f04a"; }

.fa-bacon:before { content: "\f7e5"; }

.fa-bacteria:before { content: "\e059"; }

.fa-bacterium:before { content: "\e05a"; }

.fa-badge:before { content: "\f335"; }

.fa-badge-check:before { content: "\f336"; }

.fa-badge-dollar:before { content: "\f645"; }

.fa-badge-percent:before { content: "\f646"; }

.fa-badge-sheriff:before { content: "\f8a2"; }

.fa-badger-honey:before { content: "\f6b4"; }

.fa-bags-shopping:before { content: "\f847"; }

.fa-bahai:before { content: "\f666"; }

.fa-balance-scale:before { content: "\f24e"; }

.fa-balance-scale-left:before { content: "\f515"; }

.fa-balance-scale-right:before { content: "\f516"; }

.fa-ball-pile:before { content: "\f77e"; }

.fa-ballot:before { content: "\f732"; }

.fa-ballot-check:before { content: "\f733"; }

.fa-ban:before { content: "\f05e"; }

.fa-band-aid:before { content: "\f462"; }

.fa-bandcamp:before { content: "\f2d5"; }

.fa-banjo:before { content: "\f8a3"; }

.fa-barcode:before { content: "\f02a"; }

.fa-barcode-alt:before { content: "\f463"; }

.fa-barcode-read:before { content: "\f464"; }

.fa-barcode-scan:before { content: "\f465"; }

.fa-bars:before { content: "\f0c9"; }

.fa-baseball:before { content: "\f432"; }

.fa-baseball-ball:before { content: "\f433"; }

.fa-basketball-ball:before { content: "\f434"; }

.fa-basketball-hoop:before { content: "\f435"; }

.fa-bat:before { content: "\f6b5"; }

.fa-bath:before { content: "\f2cd"; }

.fa-battery-bolt:before { content: "\f376"; }

.fa-battery-empty:before { content: "\f244"; }

.fa-battery-full:before { content: "\f240"; }

.fa-battery-half:before { content: "\f242"; }

.fa-battery-quarter:before { content: "\f243"; }

.fa-battery-slash:before { content: "\f377"; }

.fa-battery-three-quarters:before { content: "\f241"; }

.fa-battle-net:before { content: "\f835"; }

.fa-bed:before { content: "\f236"; }

.fa-bed-alt:before { content: "\f8f7"; }

.fa-bed-bunk:before { content: "\f8f8"; }

.fa-bed-empty:before { content: "\f8f9"; }

.fa-beer:before { content: "\f0fc"; }

.fa-behance:before { content: "\f1b4"; }

.fa-behance-square:before { content: "\f1b5"; }

.fa-bell:before { content: "\f0f3"; }

.fa-bell-exclamation:before { content: "\f848"; }

.fa-bell-on:before { content: "\f8fa"; }

.fa-bell-plus:before { content: "\f849"; }

.fa-bell-school:before { content: "\f5d5"; }

.fa-bell-school-slash:before { content: "\f5d6"; }

.fa-bell-slash:before { content: "\f1f6"; }

.fa-bells:before { content: "\f77f"; }

.fa-betamax:before { content: "\f8a4"; }

.fa-bezier-curve:before { content: "\f55b"; }

.fa-bible:before { content: "\f647"; }

.fa-bicycle:before { content: "\f206"; }

.fa-biking:before { content: "\f84a"; }

.fa-biking-mountain:before { content: "\f84b"; }

.fa-bimobject:before { content: "\f378"; }

.fa-binoculars:before { content: "\f1e5"; }

.fa-biohazard:before { content: "\f780"; }

.fa-birthday-cake:before { content: "\f1fd"; }

.fa-bitbucket:before { content: "\f171"; }

.fa-bitcoin:before { content: "\f379"; }

.fa-bity:before { content: "\f37a"; }

.fa-black-tie:before { content: "\f27e"; }

.fa-blackberry:before { content: "\f37b"; }

.fa-blanket:before { content: "\f498"; }

.fa-blender:before { content: "\f517"; }

.fa-blender-phone:before { content: "\f6b6"; }

.fa-blind:before { content: "\f29d"; }

.fa-blinds:before { content: "\f8fb"; }

.fa-blinds-open:before { content: "\f8fc"; }

.fa-blinds-raised:before { content: "\f8fd"; }

.fa-blog:before { content: "\f781"; }

.fa-blogger:before { content: "\f37c"; }

.fa-blogger-b:before { content: "\f37d"; }

.fa-bluetooth:before { content: "\f293"; }

.fa-bluetooth-b:before { content: "\f294"; }

.fa-bold:before { content: "\f032"; }

.fa-bolt:before { content: "\f0e7"; }

.fa-bomb:before { content: "\f1e2"; }

.fa-bone:before { content: "\f5d7"; }

.fa-bone-break:before { content: "\f5d8"; }

.fa-bong:before { content: "\f55c"; }

.fa-book:before { content: "\f02d"; }

.fa-book-alt:before { content: "\f5d9"; }

.fa-book-dead:before { content: "\f6b7"; }

.fa-book-heart:before { content: "\f499"; }

.fa-book-medical:before { content: "\f7e6"; }

.fa-book-open:before { content: "\f518"; }

.fa-book-reader:before { content: "\f5da"; }

.fa-book-spells:before { content: "\f6b8"; }

.fa-book-user:before { content: "\f7e7"; }

.fa-bookmark:before { content: "\f02e"; }

.fa-books:before { content: "\f5db"; }

.fa-books-medical:before { content: "\f7e8"; }

.fa-boombox:before { content: "\f8a5"; }

.fa-boot:before { content: "\f782"; }

.fa-booth-curtain:before { content: "\f734"; }

.fa-bootstrap:before { content: "\f836"; }

.fa-border-all:before { content: "\f84c"; }

.fa-border-bottom:before { content: "\f84d"; }

.fa-border-center-h:before { content: "\f89c"; }

.fa-border-center-v:before { content: "\f89d"; }

.fa-border-inner:before { content: "\f84e"; }

.fa-border-left:before { content: "\f84f"; }

.fa-border-none:before { content: "\f850"; }

.fa-border-outer:before { content: "\f851"; }

.fa-border-right:before { content: "\f852"; }

.fa-border-style:before { content: "\f853"; }

.fa-border-style-alt:before { content: "\f854"; }

.fa-border-top:before { content: "\f855"; }

.fa-bow-arrow:before { content: "\f6b9"; }

.fa-bowling-ball:before { content: "\f436"; }

.fa-bowling-pins:before { content: "\f437"; }

.fa-box:before { content: "\f466"; }

.fa-box-alt:before { content: "\f49a"; }

.fa-box-ballot:before { content: "\f735"; }

.fa-box-check:before { content: "\f467"; }

.fa-box-fragile:before { content: "\f49b"; }

.fa-box-full:before { content: "\f49c"; }

.fa-box-heart:before { content: "\f49d"; }

.fa-box-open:before { content: "\f49e"; }

.fa-box-tissue:before { content: "\e05b"; }

.fa-box-up:before { content: "\f49f"; }

.fa-box-usd:before { content: "\f4a0"; }

.fa-boxes:before { content: "\f468"; }

.fa-boxes-alt:before { content: "\f4a1"; }

.fa-boxing-glove:before { content: "\f438"; }

.fa-brackets:before { content: "\f7e9"; }

.fa-brackets-curly:before { content: "\f7ea"; }

.fa-braille:before { content: "\f2a1"; }

.fa-brain:before { content: "\f5dc"; }

.fa-bread-loaf:before { content: "\f7eb"; }

.fa-bread-slice:before { content: "\f7ec"; }

.fa-briefcase:before { content: "\f0b1"; }

.fa-briefcase-medical:before { content: "\f469"; }

.fa-bring-forward:before { content: "\f856"; }

.fa-bring-front:before { content: "\f857"; }

.fa-broadcast-tower:before { content: "\f519"; }

.fa-broom:before { content: "\f51a"; }

.fa-browser:before { content: "\f37e"; }

.fa-brush:before { content: "\f55d"; }

.fa-btc:before { content: "\f15a"; }

.fa-buffer:before { content: "\f837"; }

.fa-bug:before { content: "\f188"; }

.fa-building:before { content: "\f1ad"; }

.fa-bullhorn:before { content: "\f0a1"; }

.fa-bullseye:before { content: "\f140"; }

.fa-bullseye-arrow:before { content: "\f648"; }

.fa-bullseye-pointer:before { content: "\f649"; }

.fa-burger-soda:before { content: "\f858"; }

.fa-burn:before { content: "\f46a"; }

.fa-buromobelexperte:before { content: "\f37f"; }

.fa-burrito:before { content: "\f7ed"; }

.fa-bus:before { content: "\f207"; }

.fa-bus-alt:before { content: "\f55e"; }

.fa-bus-school:before { content: "\f5dd"; }

.fa-business-time:before { content: "\f64a"; }

.fa-buy-n-large:before { content: "\f8a6"; }

.fa-buysellads:before { content: "\f20d"; }

.fa-cabinet-filing:before { content: "\f64b"; }

.fa-cactus:before { content: "\f8a7"; }

.fa-calculator:before { content: "\f1ec"; }

.fa-calculator-alt:before { content: "\f64c"; }

.fa-calendar:before { content: "\f133"; }

.fa-calendar-alt:before { content: "\f073"; }

.fa-calendar-check:before { content: "\f274"; }

.fa-calendar-day:before { content: "\f783"; }

.fa-calendar-edit:before { content: "\f333"; }

.fa-calendar-exclamation:before { content: "\f334"; }

.fa-calendar-minus:before { content: "\f272"; }

.fa-calendar-plus:before { content: "\f271"; }

.fa-calendar-star:before { content: "\f736"; }

.fa-calendar-times:before { content: "\f273"; }

.fa-calendar-week:before { content: "\f784"; }

.fa-camcorder:before { content: "\f8a8"; }

.fa-camera:before { content: "\f030"; }

.fa-camera-alt:before { content: "\f332"; }

.fa-camera-home:before { content: "\f8fe"; }

.fa-camera-movie:before { content: "\f8a9"; }

.fa-camera-polaroid:before { content: "\f8aa"; }

.fa-camera-retro:before { content: "\f083"; }

.fa-campfire:before { content: "\f6ba"; }

.fa-campground:before { content: "\f6bb"; }

.fa-canadian-maple-leaf:before { content: "\f785"; }

.fa-candle-holder:before { content: "\f6bc"; }

.fa-candy-cane:before { content: "\f786"; }

.fa-candy-corn:before { content: "\f6bd"; }

.fa-cannabis:before { content: "\f55f"; }

.fa-capsules:before { content: "\f46b"; }

.fa-car:before { content: "\f1b9"; }

.fa-car-alt:before { content: "\f5de"; }

.fa-car-battery:before { content: "\f5df"; }

.fa-car-building:before { content: "\f859"; }

.fa-car-bump:before { content: "\f5e0"; }

.fa-car-bus:before { content: "\f85a"; }

.fa-car-crash:before { content: "\f5e1"; }

.fa-car-garage:before { content: "\f5e2"; }

.fa-car-mechanic:before { content: "\f5e3"; }

.fa-car-side:before { content: "\f5e4"; }

.fa-car-tilt:before { content: "\f5e5"; }

.fa-car-wash:before { content: "\f5e6"; }

.fa-caravan:before { content: "\f8ff"; }

.fa-caravan-alt:before { content: "\e000"; }

.fa-caret-circle-down:before { content: "\f32d"; }

.fa-caret-circle-left:before { content: "\f32e"; }

.fa-caret-circle-right:before { content: "\f330"; }

.fa-caret-circle-up:before { content: "\f331"; }

.fa-caret-down:before { content: "\f0d7"; }

.fa-caret-left:before { content: "\f0d9"; }

.fa-caret-right:before { content: "\f0da"; }

.fa-caret-square-down:before { content: "\f150"; }

.fa-caret-square-left:before { content: "\f191"; }

.fa-caret-square-right:before { content: "\f152"; }

.fa-caret-square-up:before { content: "\f151"; }

.fa-caret-up:before { content: "\f0d8"; }

.fa-carrot:before { content: "\f787"; }

.fa-cars:before { content: "\f85b"; }

.fa-cart-arrow-down:before { content: "\f218"; }

.fa-cart-plus:before { content: "\f217"; }

.fa-cash-register:before { content: "\f788"; }

.fa-cassette-tape:before { content: "\f8ab"; }

.fa-cat:before { content: "\f6be"; }

.fa-cat-space:before { content: "\e001"; }

.fa-cauldron:before { content: "\f6bf"; }

.fa-cc-amazon-pay:before { content: "\f42d"; }

.fa-cc-amex:before { content: "\f1f3"; }

.fa-cc-apple-pay:before { content: "\f416"; }

.fa-cc-diners-club:before { content: "\f24c"; }

.fa-cc-discover:before { content: "\f1f2"; }

.fa-cc-jcb:before { content: "\f24b"; }

.fa-cc-mastercard:before { content: "\f1f1"; }

.fa-cc-paypal:before { content: "\f1f4"; }

.fa-cc-stripe:before { content: "\f1f5"; }

.fa-cc-visa:before { content: "\f1f0"; }

.fa-cctv:before { content: "\f8ac"; }

.fa-centercode:before { content: "\f380"; }

.fa-centos:before { content: "\f789"; }

.fa-certificate:before { content: "\f0a3"; }

.fa-chair:before { content: "\f6c0"; }

.fa-chair-office:before { content: "\f6c1"; }

.fa-chalkboard:before { content: "\f51b"; }

.fa-chalkboard-teacher:before { content: "\f51c"; }

.fa-charging-station:before { content: "\f5e7"; }

.fa-chart-area:before { content: "\f1fe"; }

.fa-chart-bar:before { content: "\f080"; }

.fa-chart-line:before { content: "\f201"; }

.fa-chart-line-down:before { content: "\f64d"; }

.fa-chart-network:before { content: "\f78a"; }

.fa-chart-pie:before { content: "\f200"; }

.fa-chart-pie-alt:before { content: "\f64e"; }

.fa-chart-scatter:before { content: "\f7ee"; }

.fa-check:before { content: "\f00c"; }

.fa-check-circle:before { content: "\f058"; }

.fa-check-double:before { content: "\f560"; }

.fa-check-square:before { content: "\f14a"; }

.fa-cheese:before { content: "\f7ef"; }

.fa-cheese-swiss:before { content: "\f7f0"; }

.fa-cheeseburger:before { content: "\f7f1"; }

.fa-chess:before { content: "\f439"; }

.fa-chess-bishop:before { content: "\f43a"; }

.fa-chess-bishop-alt:before { content: "\f43b"; }

.fa-chess-board:before { content: "\f43c"; }

.fa-chess-clock:before { content: "\f43d"; }

.fa-chess-clock-alt:before { content: "\f43e"; }

.fa-chess-king:before { content: "\f43f"; }

.fa-chess-king-alt:before { content: "\f440"; }

.fa-chess-knight:before { content: "\f441"; }

.fa-chess-knight-alt:before { content: "\f442"; }

.fa-chess-pawn:before { content: "\f443"; }

.fa-chess-pawn-alt:before { content: "\f444"; }

.fa-chess-queen:before { content: "\f445"; }

.fa-chess-queen-alt:before { content: "\f446"; }

.fa-chess-rook:before { content: "\f447"; }

.fa-chess-rook-alt:before { content: "\f448"; }

.fa-chevron-circle-down:before { content: "\f13a"; }

.fa-chevron-circle-left:before { content: "\f137"; }

.fa-chevron-circle-right:before { content: "\f138"; }

.fa-chevron-circle-up:before { content: "\f139"; }

.fa-chevron-double-down:before { content: "\f322"; }

.fa-chevron-double-left:before { content: "\f323"; }

.fa-chevron-double-right:before { content: "\f324"; }

.fa-chevron-double-up:before { content: "\f325"; }

.fa-chevron-down:before { content: "\f078"; }

.fa-chevron-left:before { content: "\f053"; }

.fa-chevron-right:before { content: "\f054"; }

.fa-chevron-square-down:before { content: "\f329"; }

.fa-chevron-square-left:before { content: "\f32a"; }

.fa-chevron-square-right:before { content: "\f32b"; }

.fa-chevron-square-up:before { content: "\f32c"; }

.fa-chevron-up:before { content: "\f077"; }

.fa-child:before { content: "\f1ae"; }

.fa-chimney:before { content: "\f78b"; }

.fa-chrome:before { content: "\f268"; }

.fa-chromecast:before { content: "\f838"; }

.fa-church:before { content: "\f51d"; }

.fa-circle:before { content: "\f111"; }

.fa-circle-notch:before { content: "\f1ce"; }

.fa-city:before { content: "\f64f"; }

.fa-clarinet:before { content: "\f8ad"; }

.fa-claw-marks:before { content: "\f6c2"; }

.fa-clinic-medical:before { content: "\f7f2"; }

.fa-clipboard:before { content: "\f328"; }

.fa-clipboard-check:before { content: "\f46c"; }

.fa-clipboard-list:before { content: "\f46d"; }

.fa-clipboard-list-check:before { content: "\f737"; }

.fa-clipboard-prescription:before { content: "\f5e8"; }

.fa-clipboard-user:before { content: "\f7f3"; }

.fa-clock:before { content: "\f017"; }

.fa-clone:before { content: "\f24d"; }

.fa-closed-captioning:before { content: "\f20a"; }

.fa-cloud:before { content: "\f0c2"; }

.fa-cloud-download:before { content: "\f0ed"; }

.fa-cloud-download-alt:before { content: "\f381"; }

.fa-cloud-drizzle:before { content: "\f738"; }

.fa-cloud-hail:before { content: "\f739"; }

.fa-cloud-hail-mixed:before { content: "\f73a"; }

.fa-cloud-meatball:before { content: "\f73b"; }

.fa-cloud-moon:before { content: "\f6c3"; }

.fa-cloud-moon-rain:before { content: "\f73c"; }

.fa-cloud-music:before { content: "\f8ae"; }

.fa-cloud-rain:before { content: "\f73d"; }

.fa-cloud-rainbow:before { content: "\f73e"; }

.fa-cloud-showers:before { content: "\f73f"; }

.fa-cloud-showers-heavy:before { content: "\f740"; }

.fa-cloud-sleet:before { content: "\f741"; }

.fa-cloud-snow:before { content: "\f742"; }

.fa-cloud-sun:before { content: "\f6c4"; }

.fa-cloud-sun-rain:before { content: "\f743"; }

.fa-cloud-upload:before { content: "\f0ee"; }

.fa-cloud-upload-alt:before { content: "\f382"; }

.fa-cloudflare:before { content: "\e07d"; }

.fa-clouds:before { content: "\f744"; }

.fa-clouds-moon:before { content: "\f745"; }

.fa-clouds-sun:before { content: "\f746"; }

.fa-cloudscale:before { content: "\f383"; }

.fa-cloudsmith:before { content: "\f384"; }

.fa-cloudversify:before { content: "\f385"; }

.fa-club:before { content: "\f327"; }

.fa-cocktail:before { content: "\f561"; }

.fa-code:before { content: "\f121"; }

.fa-code-branch:before { content: "\f126"; }

.fa-code-commit:before { content: "\f386"; }

.fa-code-merge:before { content: "\f387"; }

.fa-codepen:before { content: "\f1cb"; }

.fa-codiepie:before { content: "\f284"; }

.fa-coffee:before { content: "\f0f4"; }

.fa-coffee-pot:before { content: "\e002"; }

.fa-coffee-togo:before { content: "\f6c5"; }

.fa-coffin:before { content: "\f6c6"; }

.fa-coffin-cross:before { content: "\e051"; }

.fa-cog:before { content: "\f013"; }

.fa-cogs:before { content: "\f085"; }

.fa-coin:before { content: "\f85c"; }

.fa-coins:before { content: "\f51e"; }

.fa-columns:before { content: "\f0db"; }

.fa-comet:before { content: "\e003"; }

.fa-comment:before { content: "\f075"; }

.fa-comment-alt:before { content: "\f27a"; }

.fa-comment-alt-check:before { content: "\f4a2"; }

.fa-comment-alt-dollar:before { content: "\f650"; }

.fa-comment-alt-dots:before { content: "\f4a3"; }

.fa-comment-alt-edit:before { content: "\f4a4"; }

.fa-comment-alt-exclamation:before { content: "\f4a5"; }

.fa-comment-alt-lines:before { content: "\f4a6"; }

.fa-comment-alt-medical:before { content: "\f7f4"; }

.fa-comment-alt-minus:before { content: "\f4a7"; }

.fa-comment-alt-music:before { content: "\f8af"; }

.fa-comment-alt-plus:before { content: "\f4a8"; }

.fa-comment-alt-slash:before { content: "\f4a9"; }

.fa-comment-alt-smile:before { content: "\f4aa"; }

.fa-comment-alt-times:before { content: "\f4ab"; }

.fa-comment-check:before { content: "\f4ac"; }

.fa-comment-dollar:before { content: "\f651"; }

.fa-comment-dots:before { content: "\f4ad"; }

.fa-comment-edit:before { content: "\f4ae"; }

.fa-comment-exclamation:before { content: "\f4af"; }

.fa-comment-lines:before { content: "\f4b0"; }

.fa-comment-medical:before { content: "\f7f5"; }

.fa-comment-minus:before { content: "\f4b1"; }

.fa-comment-music:before { content: "\f8b0"; }

.fa-comment-plus:before { content: "\f4b2"; }

.fa-comment-slash:before { content: "\f4b3"; }

.fa-comment-smile:before { content: "\f4b4"; }

.fa-comment-times:before { content: "\f4b5"; }

.fa-comments:before { content: "\f086"; }

.fa-comments-alt:before { content: "\f4b6"; }

.fa-comments-alt-dollar:before { content: "\f652"; }

.fa-comments-dollar:before { content: "\f653"; }

.fa-compact-disc:before { content: "\f51f"; }

.fa-compass:before { content: "\f14e"; }

.fa-compass-slash:before { content: "\f5e9"; }

.fa-compress:before { content: "\f066"; }

.fa-compress-alt:before { content: "\f422"; }

.fa-compress-arrows-alt:before { content: "\f78c"; }

.fa-compress-wide:before { content: "\f326"; }

.fa-computer-classic:before { content: "\f8b1"; }

.fa-computer-speaker:before { content: "\f8b2"; }

.fa-concierge-bell:before { content: "\f562"; }

.fa-confluence:before { content: "\f78d"; }

.fa-connectdevelop:before { content: "\f20e"; }

.fa-construction:before { content: "\f85d"; }

.fa-container-storage:before { content: "\f4b7"; }

.fa-contao:before { content: "\f26d"; }

.fa-conveyor-belt:before { content: "\f46e"; }

.fa-conveyor-belt-alt:before { content: "\f46f"; }

.fa-cookie:before { content: "\f563"; }

.fa-cookie-bite:before { content: "\f564"; }

.fa-copy:before { content: "\f0c5"; }

.fa-copyright:before { content: "\f1f9"; }

.fa-corn:before { content: "\f6c7"; }

.fa-cotton-bureau:before { content: "\f89e"; }

.fa-couch:before { content: "\f4b8"; }

.fa-cow:before { content: "\f6c8"; }

.fa-cowbell:before { content: "\f8b3"; }

.fa-cowbell-more:before { content: "\f8b4"; }

.fa-cpanel:before { content: "\f388"; }

.fa-creative-commons:before { content: "\f25e"; }

.fa-creative-commons-by:before { content: "\f4e7"; }

.fa-creative-commons-nc:before { content: "\f4e8"; }

.fa-creative-commons-nc-eu:before { content: "\f4e9"; }

.fa-creative-commons-nc-jp:before { content: "\f4ea"; }

.fa-creative-commons-nd:before { content: "\f4eb"; }

.fa-creative-commons-pd:before { content: "\f4ec"; }

.fa-creative-commons-pd-alt:before { content: "\f4ed"; }

.fa-creative-commons-remix:before { content: "\f4ee"; }

.fa-creative-commons-sa:before { content: "\f4ef"; }

.fa-creative-commons-sampling:before { content: "\f4f0"; }

.fa-creative-commons-sampling-plus:before { content: "\f4f1"; }

.fa-creative-commons-share:before { content: "\f4f2"; }

.fa-creative-commons-zero:before { content: "\f4f3"; }

.fa-credit-card:before { content: "\f09d"; }

.fa-credit-card-blank:before { content: "\f389"; }

.fa-credit-card-front:before { content: "\f38a"; }

.fa-cricket:before { content: "\f449"; }

.fa-critical-role:before { content: "\f6c9"; }

.fa-croissant:before { content: "\f7f6"; }

.fa-crop:before { content: "\f125"; }

.fa-crop-alt:before { content: "\f565"; }

.fa-cross:before { content: "\f654"; }

.fa-crosshairs:before { content: "\f05b"; }

.fa-crow:before { content: "\f520"; }

.fa-crown:before { content: "\f521"; }

.fa-crutch:before { content: "\f7f7"; }

.fa-crutches:before { content: "\f7f8"; }

.fa-css3:before { content: "\f13c"; }

.fa-css3-alt:before { content: "\f38b"; }

.fa-cube:before { content: "\f1b2"; }

.fa-cubes:before { content: "\f1b3"; }

.fa-curling:before { content: "\f44a"; }

.fa-cut:before { content: "\f0c4"; }

.fa-cuttlefish:before { content: "\f38c"; }

.fa-d-and-d:before { content: "\f38d"; }

.fa-d-and-d-beyond:before { content: "\f6ca"; }

.fa-dagger:before { content: "\f6cb"; }

.fa-dailymotion:before { content: "\e052"; }

.fa-dashcube:before { content: "\f210"; }

.fa-database:before { content: "\f1c0"; }

.fa-deaf:before { content: "\f2a4"; }

.fa-debug:before { content: "\f7f9"; }

.fa-deer:before { content: "\f78e"; }

.fa-deer-rudolph:before { content: "\f78f"; }

.fa-deezer:before { content: "\e077"; }

.fa-delicious:before { content: "\f1a5"; }

.fa-democrat:before { content: "\f747"; }

.fa-deploydog:before { content: "\f38e"; }

.fa-deskpro:before { content: "\f38f"; }

.fa-desktop:before { content: "\f108"; }

.fa-desktop-alt:before { content: "\f390"; }

.fa-dev:before { content: "\f6cc"; }

.fa-deviantart:before { content: "\f1bd"; }

.fa-dewpoint:before { content: "\f748"; }

.fa-dharmachakra:before { content: "\f655"; }

.fa-dhl:before { content: "\f790"; }

.fa-diagnoses:before { content: "\f470"; }

.fa-diamond:before { content: "\f219"; }

.fa-diaspora:before { content: "\f791"; }

.fa-dice:before { content: "\f522"; }

.fa-dice-d10:before { content: "\f6cd"; }

.fa-dice-d12:before { content: "\f6ce"; }

.fa-dice-d20:before { content: "\f6cf"; }

.fa-dice-d4:before { content: "\f6d0"; }

.fa-dice-d6:before { content: "\f6d1"; }

.fa-dice-d8:before { content: "\f6d2"; }

.fa-dice-five:before { content: "\f523"; }

.fa-dice-four:before { content: "\f524"; }

.fa-dice-one:before { content: "\f525"; }

.fa-dice-six:before { content: "\f526"; }

.fa-dice-three:before { content: "\f527"; }

.fa-dice-two:before { content: "\f528"; }

.fa-digg:before { content: "\f1a6"; }

.fa-digging:before { content: "\f85e"; }

.fa-digital-ocean:before { content: "\f391"; }

.fa-digital-tachograph:before { content: "\f566"; }

.fa-diploma:before { content: "\f5ea"; }

.fa-directions:before { content: "\f5eb"; }

.fa-disc-drive:before { content: "\f8b5"; }

.fa-discord:before { content: "\f392"; }

.fa-discourse:before { content: "\f393"; }

.fa-disease:before { content: "\f7fa"; }

.fa-divide:before { content: "\f529"; }

.fa-dizzy:before { content: "\f567"; }

.fa-dna:before { content: "\f471"; }

.fa-do-not-enter:before { content: "\f5ec"; }

.fa-dochub:before { content: "\f394"; }

.fa-docker:before { content: "\f395"; }

.fa-dog:before { content: "\f6d3"; }

.fa-dog-leashed:before { content: "\f6d4"; }

.fa-dollar-sign:before { content: "\f155"; }

.fa-dolly:before { content: "\f472"; }

.fa-dolly-empty:before { content: "\f473"; }

.fa-dolly-flatbed:before { content: "\f474"; }

.fa-dolly-flatbed-alt:before { content: "\f475"; }

.fa-dolly-flatbed-empty:before { content: "\f476"; }

.fa-donate:before { content: "\f4b9"; }

.fa-door-closed:before { content: "\f52a"; }

.fa-door-open:before { content: "\f52b"; }

.fa-dot-circle:before { content: "\f192"; }

.fa-dove:before { content: "\f4ba"; }

.fa-download:before { content: "\f019"; }

.fa-draft2digital:before { content: "\f396"; }

.fa-drafting-compass:before { content: "\f568"; }

.fa-dragon:before { content: "\f6d5"; }

.fa-draw-circle:before { content: "\f5ed"; }

.fa-draw-polygon:before { content: "\f5ee"; }

.fa-draw-square:before { content: "\f5ef"; }

.fa-dreidel:before { content: "\f792"; }

.fa-dribbble:before { content: "\f17d"; }

.fa-dribbble-square:before { content: "\f397"; }

.fa-drone:before { content: "\f85f"; }

.fa-drone-alt:before { content: "\f860"; }

.fa-dropbox:before { content: "\f16b"; }

.fa-drum:before { content: "\f569"; }

.fa-drum-steelpan:before { content: "\f56a"; }

.fa-drumstick:before { content: "\f6d6"; }

.fa-drumstick-bite:before { content: "\f6d7"; }

.fa-drupal:before { content: "\f1a9"; }

.fa-dryer:before { content: "\f861"; }

.fa-dryer-alt:before { content: "\f862"; }

.fa-duck:before { content: "\f6d8"; }

.fa-dumbbell:before { content: "\f44b"; }

.fa-dumpster:before { content: "\f793"; }

.fa-dumpster-fire:before { content: "\f794"; }

.fa-dungeon:before { content: "\f6d9"; }

.fa-dyalog:before { content: "\f399"; }

.fa-ear:before { content: "\f5f0"; }

.fa-ear-muffs:before { content: "\f795"; }

.fa-earlybirds:before { content: "\f39a"; }

.fa-ebay:before { content: "\f4f4"; }

.fa-eclipse:before { content: "\f749"; }

.fa-eclipse-alt:before { content: "\f74a"; }

.fa-edge:before { content: "\f282"; }

.fa-edge-legacy:before { content: "\e078"; }

.fa-edit:before { content: "\f044"; }

.fa-egg:before { content: "\f7fb"; }

.fa-egg-fried:before { content: "\f7fc"; }

.fa-eject:before { content: "\f052"; }

.fa-elementor:before { content: "\f430"; }

.fa-elephant:before { content: "\f6da"; }

.fa-ellipsis-h:before { content: "\f141"; }

.fa-ellipsis-h-alt:before { content: "\f39b"; }

.fa-ellipsis-v:before { content: "\f142"; }

.fa-ellipsis-v-alt:before { content: "\f39c"; }

.fa-ello:before { content: "\f5f1"; }

.fa-ember:before { content: "\f423"; }

.fa-empire:before { content: "\f1d1"; }

.fa-empty-set:before { content: "\f656"; }

.fa-engine-warning:before { content: "\f5f2"; }

.fa-envelope:before { content: "\f0e0"; }

.fa-envelope-open:before { content: "\f2b6"; }

.fa-envelope-open-dollar:before { content: "\f657"; }

.fa-envelope-open-text:before { content: "\f658"; }

.fa-envelope-square:before { content: "\f199"; }

.fa-envira:before { content: "\f299"; }

.fa-equals:before { content: "\f52c"; }

.fa-eraser:before { content: "\f12d"; }

.fa-erlang:before { content: "\f39d"; }

.fa-ethereum:before { content: "\f42e"; }

.fa-ethernet:before { content: "\f796"; }

.fa-etsy:before { content: "\f2d7"; }

.fa-euro-sign:before { content: "\f153"; }

.fa-evernote:before { content: "\f839"; }

.fa-exchange:before { content: "\f0ec"; }

.fa-exchange-alt:before { content: "\f362"; }

.fa-exclamation:before { content: "\f12a"; }

.fa-exclamation-circle:before { content: "\f06a"; }

.fa-exclamation-square:before { content: "\f321"; }

.fa-exclamation-triangle:before { content: "\f071"; }

.fa-expand:before { content: "\f065"; }

.fa-expand-alt:before { content: "\f424"; }

.fa-expand-arrows:before { content: "\f31d"; }

.fa-expand-arrows-alt:before { content: "\f31e"; }

.fa-expand-wide:before { content: "\f320"; }

.fa-expeditedssl:before { content: "\f23e"; }

.fa-external-link:before { content: "\f08e"; }

.fa-external-link-alt:before { content: "\f35d"; }

.fa-external-link-square:before { content: "\f14c"; }

.fa-external-link-square-alt:before { content: "\f360"; }

.fa-eye:before { content: "\f06e"; }

.fa-eye-dropper:before { content: "\f1fb"; }

.fa-eye-evil:before { content: "\f6db"; }

.fa-eye-slash:before { content: "\f070"; }

.fa-facebook:before { content: "\f09a"; }

.fa-facebook-f:before { content: "\f39e"; }

.fa-facebook-messenger:before { content: "\f39f"; }

.fa-facebook-square:before { content: "\f082"; }

.fa-fan:before { content: "\f863"; }

.fa-fan-table:before { content: "\e004"; }

.fa-fantasy-flight-games:before { content: "\f6dc"; }

.fa-farm:before { content: "\f864"; }

.fa-fast-backward:before { content: "\f049"; }

.fa-fast-forward:before { content: "\f050"; }

.fa-faucet:before { content: "\e005"; }

.fa-faucet-drip:before { content: "\e006"; }

.fa-fax:before { content: "\f1ac"; }

.fa-feather:before { content: "\f52d"; }

.fa-feather-alt:before { content: "\f56b"; }

.fa-fedex:before { content: "\f797"; }

.fa-fedora:before { content: "\f798"; }

.fa-female:before { content: "\f182"; }

.fa-field-hockey:before { content: "\f44c"; }

.fa-fighter-jet:before { content: "\f0fb"; }

.fa-figma:before { content: "\f799"; }

.fa-file:before { content: "\f15b"; }

.fa-file-alt:before { content: "\f15c"; }

.fa-file-archive:before { content: "\f1c6"; }

.fa-file-audio:before { content: "\f1c7"; }

.fa-file-certificate:before { content: "\f5f3"; }

.fa-file-chart-line:before { content: "\f659"; }

.fa-file-chart-pie:before { content: "\f65a"; }

.fa-file-check:before { content: "\f316"; }

.fa-file-code:before { content: "\f1c9"; }

.fa-file-contract:before { content: "\f56c"; }

.fa-file-csv:before { content: "\f6dd"; }

.fa-file-download:before { content: "\f56d"; }

.fa-file-edit:before { content: "\f31c"; }

.fa-file-excel:before { content: "\f1c3"; }

.fa-file-exclamation:before { content: "\f31a"; }

.fa-file-export:before { content: "\f56e"; }

.fa-file-image:before { content: "\f1c5"; }

.fa-file-import:before { content: "\f56f"; }

.fa-file-invoice:before { content: "\f570"; }

.fa-file-invoice-dollar:before { content: "\f571"; }

.fa-file-medical:before { content: "\f477"; }

.fa-file-medical-alt:before { content: "\f478"; }

.fa-file-minus:before { content: "\f318"; }

.fa-file-music:before { content: "\f8b6"; }

.fa-file-pdf:before { content: "\f1c1"; }

.fa-file-plus:before { content: "\f319"; }

.fa-file-powerpoint:before { content: "\f1c4"; }

.fa-file-prescription:before { content: "\f572"; }

.fa-file-search:before { content: "\f865"; }

.fa-file-signature:before { content: "\f573"; }

.fa-file-spreadsheet:before { content: "\f65b"; }

.fa-file-times:before { content: "\f317"; }

.fa-file-upload:before { content: "\f574"; }

.fa-file-user:before { content: "\f65c"; }

.fa-file-video:before { content: "\f1c8"; }

.fa-file-word:before { content: "\f1c2"; }

.fa-files-medical:before { content: "\f7fd"; }

.fa-fill:before { content: "\f575"; }

.fa-fill-drip:before { content: "\f576"; }

.fa-film:before { content: "\f008"; }

.fa-film-alt:before { content: "\f3a0"; }

.fa-film-canister:before { content: "\f8b7"; }

.fa-filter:before { content: "\f0b0"; }

.fa-fingerprint:before { content: "\f577"; }

.fa-fire:before { content: "\f06d"; }

.fa-fire-alt:before { content: "\f7e4"; }

.fa-fire-extinguisher:before { content: "\f134"; }

.fa-fire-smoke:before { content: "\f74b"; }

.fa-firefox:before { content: "\f269"; }

.fa-firefox-browser:before { content: "\e007"; }

.fa-fireplace:before { content: "\f79a"; }

.fa-first-aid:before { content: "\f479"; }

.fa-first-order:before { content: "\f2b0"; }

.fa-first-order-alt:before { content: "\f50a"; }

.fa-firstdraft:before { content: "\f3a1"; }

.fa-fish:before { content: "\f578"; }

.fa-fish-cooked:before { content: "\f7fe"; }

.fa-fist-raised:before { content: "\f6de"; }

.fa-flag:before { content: "\f024"; }

.fa-flag-alt:before { content: "\f74c"; }

.fa-flag-checkered:before { content: "\f11e"; }

.fa-flag-usa:before { content: "\f74d"; }

.fa-flame:before { content: "\f6df"; }

.fa-flashlight:before { content: "\f8b8"; }

.fa-flask:before { content: "\f0c3"; }

.fa-flask-poison:before { content: "\f6e0"; }

.fa-flask-potion:before { content: "\f6e1"; }

.fa-flickr:before { content: "\f16e"; }

.fa-flipboard:before { content: "\f44d"; }

.fa-flower:before { content: "\f7ff"; }

.fa-flower-daffodil:before { content: "\f800"; }

.fa-flower-tulip:before { content: "\f801"; }

.fa-flushed:before { content: "\f579"; }

.fa-flute:before { content: "\f8b9"; }

.fa-flux-capacitor:before { content: "\f8ba"; }

.fa-fly:before { content: "\f417"; }

.fa-fog:before { content: "\f74e"; }

.fa-folder:before { content: "\f07b"; }

.fa-folder-download:before { content: "\e053"; }

.fa-folder-minus:before { content: "\f65d"; }

.fa-folder-open:before { content: "\f07c"; }

.fa-folder-plus:before { content: "\f65e"; }

.fa-folder-times:before { content: "\f65f"; }

.fa-folder-tree:before { content: "\f802"; }

.fa-folder-upload:before { content: "\e054"; }

.fa-folders:before { content: "\f660"; }

.fa-font:before { content: "\f031"; }

.fa-font-awesome:before { content: "\f2b4"; }

.fa-font-awesome-alt:before { content: "\f35c"; }

.fa-font-awesome-flag:before { content: "\f425"; }

.fa-font-awesome-logo-full:before { content: "\f4e6"; }

.fa-font-case:before { content: "\f866"; }

.fa-fonticons:before { content: "\f280"; }

.fa-fonticons-fi:before { content: "\f3a2"; }

.fa-football-ball:before { content: "\f44e"; }

.fa-football-helmet:before { content: "\f44f"; }

.fa-forklift:before { content: "\f47a"; }

.fa-fort-awesome:before { content: "\f286"; }

.fa-fort-awesome-alt:before { content: "\f3a3"; }

.fa-forumbee:before { content: "\f211"; }

.fa-forward:before { content: "\f04e"; }

.fa-foursquare:before { content: "\f180"; }

.fa-fragile:before { content: "\f4bb"; }

.fa-free-code-camp:before { content: "\f2c5"; }

.fa-freebsd:before { content: "\f3a4"; }

.fa-french-fries:before { content: "\f803"; }

.fa-frog:before { content: "\f52e"; }

.fa-frosty-head:before { content: "\f79b"; }

.fa-frown:before { content: "\f119"; }

.fa-frown-open:before { content: "\f57a"; }

.fa-fulcrum:before { content: "\f50b"; }

.fa-function:before { content: "\f661"; }

.fa-funnel-dollar:before { content: "\f662"; }

.fa-futbol:before { content: "\f1e3"; }

.fa-galactic-republic:before { content: "\f50c"; }

.fa-galactic-senate:before { content: "\f50d"; }

.fa-galaxy:before { content: "\e008"; }

.fa-game-board:before { content: "\f867"; }

.fa-game-board-alt:before { content: "\f868"; }

.fa-game-console-handheld:before { content: "\f8bb"; }

.fa-gamepad:before { content: "\f11b"; }

.fa-gamepad-alt:before { content: "\f8bc"; }

.fa-garage:before { content: "\e009"; }

.fa-garage-car:before { content: "\e00a"; }

.fa-garage-open:before { content: "\e00b"; }

.fa-gas-pump:before { content: "\f52f"; }

.fa-gas-pump-slash:before { content: "\f5f4"; }

.fa-gavel:before { content: "\f0e3"; }

.fa-gem:before { content: "\f3a5"; }

.fa-genderless:before { content: "\f22d"; }

.fa-get-pocket:before { content: "\f265"; }

.fa-gg:before { content: "\f260"; }

.fa-gg-circle:before { content: "\f261"; }

.fa-ghost:before { content: "\f6e2"; }

.fa-gift:before { content: "\f06b"; }

.fa-gift-card:before { content: "\f663"; }

.fa-gifts:before { content: "\f79c"; }

.fa-gingerbread-man:before { content: "\f79d"; }

.fa-git:before { content: "\f1d3"; }

.fa-git-alt:before { content: "\f841"; }

.fa-git-square:before { content: "\f1d2"; }

.fa-github:before { content: "\f09b"; }

.fa-github-alt:before { content: "\f113"; }

.fa-github-square:before { content: "\f092"; }

.fa-gitkraken:before { content: "\f3a6"; }

.fa-gitlab:before { content: "\f296"; }

.fa-gitter:before { content: "\f426"; }

.fa-glass:before { content: "\f804"; }

.fa-glass-champagne:before { content: "\f79e"; }

.fa-glass-cheers:before { content: "\f79f"; }

.fa-glass-citrus:before { content: "\f869"; }

.fa-glass-martini:before { content: "\f000"; }

.fa-glass-martini-alt:before { content: "\f57b"; }

.fa-glass-whiskey:before { content: "\f7a0"; }

.fa-glass-whiskey-rocks:before { content: "\f7a1"; }

.fa-glasses:before { content: "\f530"; }

.fa-glasses-alt:before { content: "\f5f5"; }

.fa-glide:before { content: "\f2a5"; }

.fa-glide-g:before { content: "\f2a6"; }

.fa-globe:before { content: "\f0ac"; }

.fa-globe-africa:before { content: "\f57c"; }

.fa-globe-americas:before { content: "\f57d"; }

.fa-globe-asia:before { content: "\f57e"; }

.fa-globe-europe:before { content: "\f7a2"; }

.fa-globe-snow:before { content: "\f7a3"; }

.fa-globe-stand:before { content: "\f5f6"; }

.fa-gofore:before { content: "\f3a7"; }

.fa-golf-ball:before { content: "\f450"; }

.fa-golf-club:before { content: "\f451"; }

.fa-goodreads:before { content: "\f3a8"; }

.fa-goodreads-g:before { content: "\f3a9"; }

.fa-google:before { content: "\f1a0"; }

.fa-google-drive:before { content: "\f3aa"; }

.fa-google-pay:before { content: "\e079"; }

.fa-google-play:before { content: "\f3ab"; }

.fa-google-plus:before { content: "\f2b3"; }

.fa-google-plus-g:before { content: "\f0d5"; }

.fa-google-plus-square:before { content: "\f0d4"; }

.fa-google-wallet:before { content: "\f1ee"; }

.fa-gopuram:before { content: "\f664"; }

.fa-graduation-cap:before { content: "\f19d"; }

.fa-gramophone:before { content: "\f8bd"; }

.fa-gratipay:before { content: "\f184"; }

.fa-grav:before { content: "\f2d6"; }

.fa-greater-than:before { content: "\f531"; }

.fa-greater-than-equal:before { content: "\f532"; }

.fa-grimace:before { content: "\f57f"; }

.fa-grin:before { content: "\f580"; }

.fa-grin-alt:before { content: "\f581"; }

.fa-grin-beam:before { content: "\f582"; }

.fa-grin-beam-sweat:before { content: "\f583"; }

.fa-grin-hearts:before { content: "\f584"; }

.fa-grin-squint:before { content: "\f585"; }

.fa-grin-squint-tears:before { content: "\f586"; }

.fa-grin-stars:before { content: "\f587"; }

.fa-grin-tears:before { content: "\f588"; }

.fa-grin-tongue:before { content: "\f589"; }

.fa-grin-tongue-squint:before { content: "\f58a"; }

.fa-grin-tongue-wink:before { content: "\f58b"; }

.fa-grin-wink:before { content: "\f58c"; }

.fa-grip-horizontal:before { content: "\f58d"; }

.fa-grip-lines:before { content: "\f7a4"; }

.fa-grip-lines-vertical:before { content: "\f7a5"; }

.fa-grip-vertical:before { content: "\f58e"; }

.fa-gripfire:before { content: "\f3ac"; }

.fa-grunt:before { content: "\f3ad"; }

.fa-guilded:before { content: "\e07e"; }

.fa-guitar:before { content: "\f7a6"; }

.fa-guitar-electric:before { content: "\f8be"; }

.fa-guitars:before { content: "\f8bf"; }

.fa-gulp:before { content: "\f3ae"; }

.fa-h-square:before { content: "\f0fd"; }

.fa-h1:before { content: "\f313"; }

.fa-h2:before { content: "\f314"; }

.fa-h3:before { content: "\f315"; }

.fa-h4:before { content: "\f86a"; }

.fa-hacker-news:before { content: "\f1d4"; }

.fa-hacker-news-square:before { content: "\f3af"; }

.fa-hackerrank:before { content: "\f5f7"; }

.fa-hamburger:before { content: "\f805"; }

.fa-hammer:before { content: "\f6e3"; }

.fa-hammer-war:before { content: "\f6e4"; }

.fa-hamsa:before { content: "\f665"; }

.fa-hand-heart:before { content: "\f4bc"; }

.fa-hand-holding:before { content: "\f4bd"; }

.fa-hand-holding-box:before { content: "\f47b"; }

.fa-hand-holding-heart:before { content: "\f4be"; }

.fa-hand-holding-magic:before { content: "\f6e5"; }

.fa-hand-holding-medical:before { content: "\e05c"; }

.fa-hand-holding-seedling:before { content: "\f4bf"; }

.fa-hand-holding-usd:before { content: "\f4c0"; }

.fa-hand-holding-water:before { content: "\f4c1"; }

.fa-hand-lizard:before { content: "\f258"; }

.fa-hand-middle-finger:before { content: "\f806"; }

.fa-hand-paper:before { content: "\f256"; }

.fa-hand-peace:before { content: "\f25b"; }

.fa-hand-point-down:before { content: "\f0a7"; }

.fa-hand-point-left:before { content: "\f0a5"; }

.fa-hand-point-right:before { content: "\f0a4"; }

.fa-hand-point-up:before { content: "\f0a6"; }

.fa-hand-pointer:before { content: "\f25a"; }

.fa-hand-receiving:before { content: "\f47c"; }

.fa-hand-rock:before { content: "\f255"; }

.fa-hand-scissors:before { content: "\f257"; }

.fa-hand-sparkles:before { content: "\e05d"; }

.fa-hand-spock:before { content: "\f259"; }

.fa-hands:before { content: "\f4c2"; }

.fa-hands-heart:before { content: "\f4c3"; }

.fa-hands-helping:before { content: "\f4c4"; }

.fa-hands-usd:before { content: "\f4c5"; }

.fa-hands-wash:before { content: "\e05e"; }

.fa-handshake:before { content: "\f2b5"; }

.fa-handshake-alt:before { content: "\f4c6"; }

.fa-handshake-alt-slash:before { content: "\e05f"; }

.fa-handshake-slash:before { content: "\e060"; }

.fa-hanukiah:before { content: "\f6e6"; }

.fa-hard-hat:before { content: "\f807"; }

.fa-hashtag:before { content: "\f292"; }

.fa-hat-chef:before { content: "\f86b"; }

.fa-hat-cowboy:before { content: "\f8c0"; }

.fa-hat-cowboy-side:before { content: "\f8c1"; }

.fa-hat-santa:before { content: "\f7a7"; }

.fa-hat-winter:before { content: "\f7a8"; }

.fa-hat-witch:before { content: "\f6e7"; }

.fa-hat-wizard:before { content: "\f6e8"; }

.fa-hdd:before { content: "\f0a0"; }

.fa-head-side:before { content: "\f6e9"; }

.fa-head-side-brain:before { content: "\f808"; }

.fa-head-side-cough:before { content: "\e061"; }

.fa-head-side-cough-slash:before { content: "\e062"; }

.fa-head-side-headphones:before { content: "\f8c2"; }

.fa-head-side-mask:before { content: "\e063"; }

.fa-head-side-medical:before { content: "\f809"; }

.fa-head-side-virus:before { content: "\e064"; }

.fa-head-vr:before { content: "\f6ea"; }

.fa-heading:before { content: "\f1dc"; }

.fa-headphones:before { content: "\f025"; }

.fa-headphones-alt:before { content: "\f58f"; }

.fa-headset:before { content: "\f590"; }

.fa-heart:before { content: "\f004"; }

.fa-heart-broken:before { content: "\f7a9"; }

.fa-heart-circle:before { content: "\f4c7"; }

.fa-heart-rate:before { content: "\f5f8"; }

.fa-heart-square:before { content: "\f4c8"; }

.fa-heartbeat:before { content: "\f21e"; }

.fa-heat:before { content: "\e00c"; }

.fa-helicopter:before { content: "\f533"; }

.fa-helmet-battle:before { content: "\f6eb"; }

.fa-hexagon:before { content: "\f312"; }

.fa-highlighter:before { content: "\f591"; }

.fa-hiking:before { content: "\f6ec"; }

.fa-hippo:before { content: "\f6ed"; }

.fa-hips:before { content: "\f452"; }

.fa-hire-a-helper:before { content: "\f3b0"; }

.fa-history:before { content: "\f1da"; }

.fa-hive:before { content: "\e07f"; }

.fa-hockey-mask:before { content: "\f6ee"; }

.fa-hockey-puck:before { content: "\f453"; }

.fa-hockey-sticks:before { content: "\f454"; }

.fa-holly-berry:before { content: "\f7aa"; }

.fa-home:before { content: "\f015"; }

.fa-home-alt:before { content: "\f80a"; }

.fa-home-heart:before { content: "\f4c9"; }

.fa-home-lg:before { content: "\f80b"; }

.fa-home-lg-alt:before { content: "\f80c"; }

.fa-hood-cloak:before { content: "\f6ef"; }

.fa-hooli:before { content: "\f427"; }

.fa-horizontal-rule:before { content: "\f86c"; }

.fa-hornbill:before { content: "\f592"; }

.fa-horse:before { content: "\f6f0"; }

.fa-horse-head:before { content: "\f7ab"; }

.fa-horse-saddle:before { content: "\f8c3"; }

.fa-hospital:before { content: "\f0f8"; }

.fa-hospital-alt:before { content: "\f47d"; }

.fa-hospital-symbol:before { content: "\f47e"; }

.fa-hospital-user:before { content: "\f80d"; }

.fa-hospitals:before { content: "\f80e"; }

.fa-hot-tub:before { content: "\f593"; }

.fa-hotdog:before { content: "\f80f"; }

.fa-hotel:before { content: "\f594"; }

.fa-hotjar:before { content: "\f3b1"; }

.fa-hourglass:before { content: "\f254"; }

.fa-hourglass-end:before { content: "\f253"; }

.fa-hourglass-half:before { content: "\f252"; }

.fa-hourglass-start:before { content: "\f251"; }

.fa-house:before { content: "\e00d"; }

.fa-house-damage:before { content: "\f6f1"; }

.fa-house-day:before { content: "\e00e"; }

.fa-house-flood:before { content: "\f74f"; }

.fa-house-leave:before { content: "\e00f"; }

.fa-house-night:before { content: "\e010"; }

.fa-house-return:before { content: "\e011"; }

.fa-house-signal:before { content: "\e012"; }

.fa-house-user:before { content: "\e065"; }

.fa-houzz:before { content: "\f27c"; }

.fa-hryvnia:before { content: "\f6f2"; }

.fa-html5:before { content: "\f13b"; }

.fa-hubspot:before { content: "\f3b2"; }

.fa-humidity:before { content: "\f750"; }

.fa-hurricane:before { content: "\f751"; }

.fa-i-cursor:before { content: "\f246"; }

.fa-ice-cream:before { content: "\f810"; }

.fa-ice-skate:before { content: "\f7ac"; }

.fa-icicles:before { content: "\f7ad"; }

.fa-icons:before { content: "\f86d"; }

.fa-icons-alt:before { content: "\f86e"; }

.fa-id-badge:before { content: "\f2c1"; }

.fa-id-card:before { content: "\f2c2"; }

.fa-id-card-alt:before { content: "\f47f"; }

.fa-ideal:before { content: "\e013"; }

.fa-igloo:before { content: "\f7ae"; }

.fa-image:before { content: "\f03e"; }

.fa-image-polaroid:before { content: "\f8c4"; }

.fa-images:before { content: "\f302"; }

.fa-imdb:before { content: "\f2d8"; }

.fa-inbox:before { content: "\f01c"; }

.fa-inbox-in:before { content: "\f310"; }

.fa-inbox-out:before { content: "\f311"; }

.fa-indent:before { content: "\f03c"; }

.fa-industry:before { content: "\f275"; }

.fa-industry-alt:before { content: "\f3b3"; }

.fa-infinity:before { content: "\f534"; }

.fa-info:before { content: "\f129"; }

.fa-info-circle:before { content: "\f05a"; }

.fa-info-square:before { content: "\f30f"; }

.fa-inhaler:before { content: "\f5f9"; }

.fa-innosoft:before { content: "\e080"; }

.fa-instagram:before { content: "\f16d"; }

.fa-instagram-square:before { content: "\e055"; }

.fa-instalod:before { content: "\e081"; }

.fa-integral:before { content: "\f667"; }

.fa-intercom:before { content: "\f7af"; }

.fa-internet-explorer:before { content: "\f26b"; }

.fa-intersection:before { content: "\f668"; }

.fa-inventory:before { content: "\f480"; }

.fa-invision:before { content: "\f7b0"; }

.fa-ioxhost:before { content: "\f208"; }

.fa-island-tropical:before { content: "\f811"; }

.fa-italic:before { content: "\f033"; }

.fa-itch-io:before { content: "\f83a"; }

.fa-itunes:before { content: "\f3b4"; }

.fa-itunes-note:before { content: "\f3b5"; }

.fa-jack-o-lantern:before { content: "\f30e"; }

.fa-java:before { content: "\f4e4"; }

.fa-jedi:before { content: "\f669"; }

.fa-jedi-order:before { content: "\f50e"; }

.fa-jenkins:before { content: "\f3b6"; }

.fa-jira:before { content: "\f7b1"; }

.fa-joget:before { content: "\f3b7"; }

.fa-joint:before { content: "\f595"; }

.fa-joomla:before { content: "\f1aa"; }

.fa-journal-whills:before { content: "\f66a"; }

.fa-joystick:before { content: "\f8c5"; }

.fa-js:before { content: "\f3b8"; }

.fa-js-square:before { content: "\f3b9"; }

.fa-jsfiddle:before { content: "\f1cc"; }

.fa-jug:before { content: "\f8c6"; }

.fa-kaaba:before { content: "\f66b"; }

.fa-kaggle:before { content: "\f5fa"; }

.fa-kazoo:before { content: "\f8c7"; }

.fa-kerning:before { content: "\f86f"; }

.fa-key:before { content: "\f084"; }

.fa-key-skeleton:before { content: "\f6f3"; }

.fa-keybase:before { content: "\f4f5"; }

.fa-keyboard:before { content: "\f11c"; }

.fa-keycdn:before { content: "\f3ba"; }

.fa-keynote:before { content: "\f66c"; }

.fa-khanda:before { content: "\f66d"; }

.fa-kickstarter:before { content: "\f3bb"; }

.fa-kickstarter-k:before { content: "\f3bc"; }

.fa-kidneys:before { content: "\f5fb"; }

.fa-kiss:before { content: "\f596"; }

.fa-kiss-beam:before { content: "\f597"; }

.fa-kiss-wink-heart:before { content: "\f598"; }

.fa-kite:before { content: "\f6f4"; }

.fa-kiwi-bird:before { content: "\f535"; }

.fa-knife-kitchen:before { content: "\f6f5"; }

.fa-korvue:before { content: "\f42f"; }

.fa-lambda:before { content: "\f66e"; }

.fa-lamp:before { content: "\f4ca"; }

.fa-lamp-desk:before { content: "\e014"; }

.fa-lamp-floor:before { content: "\e015"; }

.fa-landmark:before { content: "\f66f"; }

.fa-landmark-alt:before { content: "\f752"; }

.fa-language:before { content: "\f1ab"; }

.fa-laptop:before { content: "\f109"; }

.fa-laptop-code:before { content: "\f5fc"; }

.fa-laptop-house:before { content: "\e066"; }

.fa-laptop-medical:before { content: "\f812"; }

.fa-laravel:before { content: "\f3bd"; }

.fa-lasso:before { content: "\f8c8"; }

.fa-lastfm:before { content: "\f202"; }

.fa-lastfm-square:before { content: "\f203"; }

.fa-laugh:before { content: "\f599"; }

.fa-laugh-beam:before { content: "\f59a"; }

.fa-laugh-squint:before { content: "\f59b"; }

.fa-laugh-wink:before { content: "\f59c"; }

.fa-layer-group:before { content: "\f5fd"; }

.fa-layer-minus:before { content: "\f5fe"; }

.fa-layer-plus:before { content: "\f5ff"; }

.fa-leaf:before { content: "\f06c"; }

.fa-leaf-heart:before { content: "\f4cb"; }

.fa-leaf-maple:before { content: "\f6f6"; }

.fa-leaf-oak:before { content: "\f6f7"; }

.fa-leanpub:before { content: "\f212"; }

.fa-lemon:before { content: "\f094"; }

.fa-less:before { content: "\f41d"; }

.fa-less-than:before { content: "\f536"; }

.fa-less-than-equal:before { content: "\f537"; }

.fa-level-down:before { content: "\f149"; }

.fa-level-down-alt:before { content: "\f3be"; }

.fa-level-up:before { content: "\f148"; }

.fa-level-up-alt:before { content: "\f3bf"; }

.fa-life-ring:before { content: "\f1cd"; }

.fa-light-ceiling:before { content: "\e016"; }

.fa-light-switch:before { content: "\e017"; }

.fa-light-switch-off:before { content: "\e018"; }

.fa-light-switch-on:before { content: "\e019"; }

.fa-lightbulb:before { content: "\f0eb"; }

.fa-lightbulb-dollar:before { content: "\f670"; }

.fa-lightbulb-exclamation:before { content: "\f671"; }

.fa-lightbulb-on:before { content: "\f672"; }

.fa-lightbulb-slash:before { content: "\f673"; }

.fa-lights-holiday:before { content: "\f7b2"; }

.fa-line:before { content: "\f3c0"; }

.fa-line-columns:before { content: "\f870"; }

.fa-line-height:before { content: "\f871"; }

.fa-link:before { content: "\f0c1"; }

.fa-linkedin:before { content: "\f08c"; }

.fa-linkedin-in:before { content: "\f0e1"; }

.fa-linode:before { content: "\f2b8"; }

.fa-linux:before { content: "\f17c"; }

.fa-lips:before { content: "\f600"; }

.fa-lira-sign:before { content: "\f195"; }

.fa-list:before { content: "\f03a"; }

.fa-list-alt:before { content: "\f022"; }

.fa-list-music:before { content: "\f8c9"; }

.fa-list-ol:before { content: "\f0cb"; }

.fa-list-ul:before { content: "\f0ca"; }

.fa-location:before { content: "\f601"; }

.fa-location-arrow:before { content: "\f124"; }

.fa-location-circle:before { content: "\f602"; }

.fa-location-slash:before { content: "\f603"; }

.fa-lock:before { content: "\f023"; }

.fa-lock-alt:before { content: "\f30d"; }

.fa-lock-open:before { content: "\f3c1"; }

.fa-lock-open-alt:before { content: "\f3c2"; }

.fa-long-arrow-alt-down:before { content: "\f309"; }

.fa-long-arrow-alt-left:before { content: "\f30a"; }

.fa-long-arrow-alt-right:before { content: "\f30b"; }

.fa-long-arrow-alt-up:before { content: "\f30c"; }

.fa-long-arrow-down:before { content: "\f175"; }

.fa-long-arrow-left:before { content: "\f177"; }

.fa-long-arrow-right:before { content: "\f178"; }

.fa-long-arrow-up:before { content: "\f176"; }

.fa-loveseat:before { content: "\f4cc"; }

.fa-low-vision:before { content: "\f2a8"; }

.fa-luchador:before { content: "\f455"; }

.fa-luggage-cart:before { content: "\f59d"; }

.fa-lungs:before { content: "\f604"; }

.fa-lungs-virus:before { content: "\e067"; }

.fa-lyft:before { content: "\f3c3"; }

.fa-mace:before { content: "\f6f8"; }

.fa-magento:before { content: "\f3c4"; }

.fa-magic:before { content: "\f0d0"; }

.fa-magnet:before { content: "\f076"; }

.fa-mail-bulk:before { content: "\f674"; }

.fa-mailbox:before { content: "\f813"; }

.fa-mailchimp:before { content: "\f59e"; }

.fa-male:before { content: "\f183"; }

.fa-mandalorian:before { content: "\f50f"; }

.fa-mandolin:before { content: "\f6f9"; }

.fa-map:before { content: "\f279"; }

.fa-map-marked:before { content: "\f59f"; }

.fa-map-marked-alt:before { content: "\f5a0"; }

.fa-map-marker:before { content: "\f041"; }

.fa-map-marker-alt:before { content: "\f3c5"; }

.fa-map-marker-alt-slash:before { content: "\f605"; }

.fa-map-marker-check:before { content: "\f606"; }

.fa-map-marker-edit:before { content: "\f607"; }

.fa-map-marker-exclamation:before { content: "\f608"; }

.fa-map-marker-minus:before { content: "\f609"; }

.fa-map-marker-plus:before { content: "\f60a"; }

.fa-map-marker-question:before { content: "\f60b"; }

.fa-map-marker-slash:before { content: "\f60c"; }

.fa-map-marker-smile:before { content: "\f60d"; }

.fa-map-marker-times:before { content: "\f60e"; }

.fa-map-pin:before { content: "\f276"; }

.fa-map-signs:before { content: "\f277"; }

.fa-markdown:before { content: "\f60f"; }

.fa-marker:before { content: "\f5a1"; }

.fa-mars:before { content: "\f222"; }

.fa-mars-double:before { content: "\f227"; }

.fa-mars-stroke:before { content: "\f229"; }

.fa-mars-stroke-h:before { content: "\f22b"; }

.fa-mars-stroke-v:before { content: "\f22a"; }

.fa-mask:before { content: "\f6fa"; }

.fa-mastodon:before { content: "\f4f6"; }

.fa-maxcdn:before { content: "\f136"; }

.fa-mdb:before { content: "\f8ca"; }

.fa-meat:before { content: "\f814"; }

.fa-medal:before { content: "\f5a2"; }

.fa-medapps:before { content: "\f3c6"; }

.fa-medium:before { content: "\f23a"; }

.fa-medium-m:before { content: "\f3c7"; }

.fa-medkit:before { content: "\f0fa"; }

.fa-medrt:before { content: "\f3c8"; }

.fa-meetup:before { content: "\f2e0"; }

.fa-megaphone:before { content: "\f675"; }

.fa-megaport:before { content: "\f5a3"; }

.fa-meh:before { content: "\f11a"; }

.fa-meh-blank:before { content: "\f5a4"; }

.fa-meh-rolling-eyes:before { content: "\f5a5"; }

.fa-memory:before { content: "\f538"; }

.fa-mendeley:before { content: "\f7b3"; }

.fa-menorah:before { content: "\f676"; }

.fa-mercury:before { content: "\f223"; }

.fa-meteor:before { content: "\f753"; }

.fa-microblog:before { content: "\e01a"; }

.fa-microchip:before { content: "\f2db"; }

.fa-microphone:before { content: "\f130"; }

.fa-microphone-alt:before { content: "\f3c9"; }

.fa-microphone-alt-slash:before { content: "\f539"; }

.fa-microphone-slash:before { content: "\f131"; }

.fa-microphone-stand:before { content: "\f8cb"; }

.fa-microscope:before { content: "\f610"; }

.fa-microsoft:before { content: "\f3ca"; }

.fa-microwave:before { content: "\e01b"; }

.fa-mind-share:before { content: "\f677"; }

.fa-minus:before { content: "\f068"; }

.fa-minus-circle:before { content: "\f056"; }

.fa-minus-hexagon:before { content: "\f307"; }

.fa-minus-octagon:before { content: "\f308"; }

.fa-minus-square:before { content: "\f146"; }

.fa-mistletoe:before { content: "\f7b4"; }

.fa-mitten:before { content: "\f7b5"; }

.fa-mix:before { content: "\f3cb"; }

.fa-mixcloud:before { content: "\f289"; }

.fa-mixer:before { content: "\e056"; }

.fa-mizuni:before { content: "\f3cc"; }

.fa-mobile:before { content: "\f10b"; }

.fa-mobile-alt:before { content: "\f3cd"; }

.fa-mobile-android:before { content: "\f3ce"; }

.fa-mobile-android-alt:before { content: "\f3cf"; }

.fa-modx:before { content: "\f285"; }

.fa-monero:before { content: "\f3d0"; }

.fa-money-bill:before { content: "\f0d6"; }

.fa-money-bill-alt:before { content: "\f3d1"; }

.fa-money-bill-wave:before { content: "\f53a"; }

.fa-money-bill-wave-alt:before { content: "\f53b"; }

.fa-money-check:before { content: "\f53c"; }

.fa-money-check-alt:before { content: "\f53d"; }

.fa-money-check-edit:before { content: "\f872"; }

.fa-money-check-edit-alt:before { content: "\f873"; }

.fa-monitor-heart-rate:before { content: "\f611"; }

.fa-monkey:before { content: "\f6fb"; }

.fa-monument:before { content: "\f5a6"; }

.fa-moon:before { content: "\f186"; }

.fa-moon-cloud:before { content: "\f754"; }

.fa-moon-stars:before { content: "\f755"; }

.fa-mortar-pestle:before { content: "\f5a7"; }

.fa-mosque:before { content: "\f678"; }

.fa-motorcycle:before { content: "\f21c"; }

.fa-mountain:before { content: "\f6fc"; }

.fa-mountains:before { content: "\f6fd"; }

.fa-mouse:before { content: "\f8cc"; }

.fa-mouse-alt:before { content: "\f8cd"; }

.fa-mouse-pointer:before { content: "\f245"; }

.fa-mp3-player:before { content: "\f8ce"; }

.fa-mug:before { content: "\f874"; }

.fa-mug-hot:before { content: "\f7b6"; }

.fa-mug-marshmallows:before { content: "\f7b7"; }

.fa-mug-tea:before { content: "\f875"; }

.fa-music:before { content: "\f001"; }

.fa-music-alt:before { content: "\f8cf"; }

.fa-music-alt-slash:before { content: "\f8d0"; }

.fa-music-slash:before { content: "\f8d1"; }

.fa-napster:before { content: "\f3d2"; }

.fa-narwhal:before { content: "\f6fe"; }

.fa-neos:before { content: "\f612"; }

.fa-network-wired:before { content: "\f6ff"; }

.fa-neuter:before { content: "\f22c"; }

.fa-newspaper:before { content: "\f1ea"; }

.fa-nimblr:before { content: "\f5a8"; }

.fa-node:before { content: "\f419"; }

.fa-node-js:before { content: "\f3d3"; }

.fa-not-equal:before { content: "\f53e"; }

.fa-notes-medical:before { content: "\f481"; }

.fa-npm:before { content: "\f3d4"; }

.fa-ns8:before { content: "\f3d5"; }

.fa-nutritionix:before { content: "\f3d6"; }

.fa-object-group:before { content: "\f247"; }

.fa-object-ungroup:before { content: "\f248"; }

.fa-octagon:before { content: "\f306"; }

.fa-octopus-deploy:before { content: "\e082"; }

.fa-odnoklassniki:before { content: "\f263"; }

.fa-odnoklassniki-square:before { content: "\f264"; }

.fa-oil-can:before { content: "\f613"; }

.fa-oil-temp:before { content: "\f614"; }

.fa-old-republic:before { content: "\f510"; }

.fa-om:before { content: "\f679"; }

.fa-omega:before { content: "\f67a"; }

.fa-opencart:before { content: "\f23d"; }

.fa-openid:before { content: "\f19b"; }

.fa-opera:before { content: "\f26a"; }

.fa-optin-monster:before { content: "\f23c"; }

.fa-orcid:before { content: "\f8d2"; }

.fa-ornament:before { content: "\f7b8"; }

.fa-osi:before { content: "\f41a"; }

.fa-otter:before { content: "\f700"; }

.fa-outdent:before { content: "\f03b"; }

.fa-outlet:before { content: "\e01c"; }

.fa-oven:before { content: "\e01d"; }

.fa-overline:before { content: "\f876"; }

.fa-page-break:before { content: "\f877"; }

.fa-page4:before { content: "\f3d7"; }

.fa-pagelines:before { content: "\f18c"; }

.fa-pager:before { content: "\f815"; }

.fa-paint-brush:before { content: "\f1fc"; }

.fa-paint-brush-alt:before { content: "\f5a9"; }

.fa-paint-roller:before { content: "\f5aa"; }

.fa-palette:before { content: "\f53f"; }

.fa-palfed:before { content: "\f3d8"; }

.fa-pallet:before { content: "\f482"; }

.fa-pallet-alt:before { content: "\f483"; }

.fa-paper-plane:before { content: "\f1d8"; }

.fa-paperclip:before { content: "\f0c6"; }

.fa-parachute-box:before { content: "\f4cd"; }

.fa-paragraph:before { content: "\f1dd"; }

.fa-paragraph-rtl:before { content: "\f878"; }

.fa-parking:before { content: "\f540"; }

.fa-parking-circle:before { content: "\f615"; }

.fa-parking-circle-slash:before { content: "\f616"; }

.fa-parking-slash:before { content: "\f617"; }

.fa-passport:before { content: "\f5ab"; }

.fa-pastafarianism:before { content: "\f67b"; }

.fa-paste:before { content: "\f0ea"; }

.fa-patreon:before { content: "\f3d9"; }

.fa-pause:before { content: "\f04c"; }

.fa-pause-circle:before { content: "\f28b"; }

.fa-paw:before { content: "\f1b0"; }

.fa-paw-alt:before { content: "\f701"; }

.fa-paw-claws:before { content: "\f702"; }

.fa-paypal:before { content: "\f1ed"; }

.fa-peace:before { content: "\f67c"; }

.fa-pegasus:before { content: "\f703"; }

.fa-pen:before { content: "\f304"; }

.fa-pen-alt:before { content: "\f305"; }

.fa-pen-fancy:before { content: "\f5ac"; }

.fa-pen-nib:before { content: "\f5ad"; }

.fa-pen-square:before { content: "\f14b"; }

.fa-pencil:before { content: "\f040"; }

.fa-pencil-alt:before { content: "\f303"; }

.fa-pencil-paintbrush:before { content: "\f618"; }

.fa-pencil-ruler:before { content: "\f5ae"; }

.fa-pennant:before { content: "\f456"; }

.fa-penny-arcade:before { content: "\f704"; }

.fa-people-arrows:before { content: "\e068"; }

.fa-people-carry:before { content: "\f4ce"; }

.fa-pepper-hot:before { content: "\f816"; }

.fa-perbyte:before { content: "\e083"; }

.fa-percent:before { content: "\f295"; }

.fa-percentage:before { content: "\f541"; }

.fa-periscope:before { content: "\f3da"; }

.fa-person-booth:before { content: "\f756"; }

.fa-person-carry:before { content: "\f4cf"; }

.fa-person-dolly:before { content: "\f4d0"; }

.fa-person-dolly-empty:before { content: "\f4d1"; }

.fa-person-sign:before { content: "\f757"; }

.fa-phabricator:before { content: "\f3db"; }

.fa-phoenix-framework:before { content: "\f3dc"; }

.fa-phoenix-squadron:before { content: "\f511"; }

.fa-phone:before { content: "\f095"; }

.fa-phone-alt:before { content: "\f879"; }

.fa-phone-laptop:before { content: "\f87a"; }

.fa-phone-office:before { content: "\f67d"; }

.fa-phone-plus:before { content: "\f4d2"; }

.fa-phone-rotary:before { content: "\f8d3"; }

.fa-phone-slash:before { content: "\f3dd"; }

.fa-phone-square:before { content: "\f098"; }

.fa-phone-square-alt:before { content: "\f87b"; }

.fa-phone-volume:before { content: "\f2a0"; }

.fa-photo-video:before { content: "\f87c"; }

.fa-php:before { content: "\f457"; }

.fa-pi:before { content: "\f67e"; }

.fa-piano:before { content: "\f8d4"; }

.fa-piano-keyboard:before { content: "\f8d5"; }

.fa-pie:before { content: "\f705"; }

.fa-pied-piper:before { content: "\f2ae"; }

.fa-pied-piper-alt:before { content: "\f1a8"; }

.fa-pied-piper-hat:before { content: "\f4e5"; }

.fa-pied-piper-pp:before { content: "\f1a7"; }

.fa-pied-piper-square:before { content: "\e01e"; }

.fa-pig:before { content: "\f706"; }

.fa-piggy-bank:before { content: "\f4d3"; }

.fa-pills:before { content: "\f484"; }

.fa-pinterest:before { content: "\f0d2"; }

.fa-pinterest-p:before { content: "\f231"; }

.fa-pinterest-square:before { content: "\f0d3"; }

.fa-pizza:before { content: "\f817"; }

.fa-pizza-slice:before { content: "\f818"; }

.fa-place-of-worship:before { content: "\f67f"; }

.fa-plane:before { content: "\f072"; }

.fa-plane-alt:before { content: "\f3de"; }

.fa-plane-arrival:before { content: "\f5af"; }

.fa-plane-departure:before { content: "\f5b0"; }

.fa-plane-slash:before { content: "\e069"; }

.fa-planet-moon:before { content: "\e01f"; }

.fa-planet-ringed:before { content: "\e020"; }

.fa-play:before { content: "\f04b"; }

.fa-play-circle:before { content: "\f144"; }

.fa-playstation:before { content: "\f3df"; }

.fa-plug:before { content: "\f1e6"; }

.fa-plus:before { content: "\f067"; }

.fa-plus-circle:before { content: "\f055"; }

.fa-plus-hexagon:before { content: "\f300"; }

.fa-plus-octagon:before { content: "\f301"; }

.fa-plus-square:before { content: "\f0fe"; }

.fa-podcast:before { content: "\f2ce"; }

.fa-podium:before { content: "\f680"; }

.fa-podium-star:before { content: "\f758"; }

.fa-police-box:before { content: "\e021"; }

.fa-poll:before { content: "\f681"; }

.fa-poll-h:before { content: "\f682"; }

.fa-poll-people:before { content: "\f759"; }

.fa-poo:before { content: "\f2fe"; }

.fa-poo-storm:before { content: "\f75a"; }

.fa-poop:before { content: "\f619"; }

.fa-popcorn:before { content: "\f819"; }

.fa-portal-enter:before { content: "\e022"; }

.fa-portal-exit:before { content: "\e023"; }

.fa-portrait:before { content: "\f3e0"; }

.fa-pound-sign:before { content: "\f154"; }

.fa-power-off:before { content: "\f011"; }

.fa-pray:before { content: "\f683"; }

.fa-praying-hands:before { content: "\f684"; }

.fa-prescription:before { content: "\f5b1"; }

.fa-prescription-bottle:before { content: "\f485"; }

.fa-prescription-bottle-alt:before { content: "\f486"; }

.fa-presentation:before { content: "\f685"; }

.fa-print:before { content: "\f02f"; }

.fa-print-search:before { content: "\f81a"; }

.fa-print-slash:before { content: "\f686"; }

.fa-procedures:before { content: "\f487"; }

.fa-product-hunt:before { content: "\f288"; }

.fa-project-diagram:before { content: "\f542"; }

.fa-projector:before { content: "\f8d6"; }

.fa-pump-medical:before { content: "\e06a"; }

.fa-pump-soap:before { content: "\e06b"; }

.fa-pumpkin:before { content: "\f707"; }

.fa-pushed:before { content: "\f3e1"; }

.fa-puzzle-piece:before { content: "\f12e"; }

.fa-python:before { content: "\f3e2"; }

.fa-qq:before { content: "\f1d6"; }

.fa-qrcode:before { content: "\f029"; }

.fa-question:before { content: "\f128"; }

.fa-question-circle:before { content: "\f059"; }

.fa-question-square:before { content: "\f2fd"; }

.fa-quidditch:before { content: "\f458"; }

.fa-quinscape:before { content: "\f459"; }

.fa-quora:before { content: "\f2c4"; }

.fa-quote-left:before { content: "\f10d"; }

.fa-quote-right:before { content: "\f10e"; }

.fa-quran:before { content: "\f687"; }

.fa-r-project:before { content: "\f4f7"; }

.fa-rabbit:before { content: "\f708"; }

.fa-rabbit-fast:before { content: "\f709"; }

.fa-racquet:before { content: "\f45a"; }

.fa-radar:before { content: "\e024"; }

.fa-radiation:before { content: "\f7b9"; }

.fa-radiation-alt:before { content: "\f7ba"; }

.fa-radio:before { content: "\f8d7"; }

.fa-radio-alt:before { content: "\f8d8"; }

.fa-rainbow:before { content: "\f75b"; }

.fa-raindrops:before { content: "\f75c"; }

.fa-ram:before { content: "\f70a"; }

.fa-ramp-loading:before { content: "\f4d4"; }

.fa-random:before { content: "\f074"; }

.fa-raspberry-pi:before { content: "\f7bb"; }

.fa-ravelry:before { content: "\f2d9"; }

.fa-raygun:before { content: "\e025"; }

.fa-react:before { content: "\f41b"; }

.fa-reacteurope:before { content: "\f75d"; }

.fa-readme:before { content: "\f4d5"; }

.fa-rebel:before { content: "\f1d0"; }

.fa-receipt:before { content: "\f543"; }

.fa-record-vinyl:before { content: "\f8d9"; }

.fa-rectangle-landscape:before { content: "\f2fa"; }

.fa-rectangle-portrait:before { content: "\f2fb"; }

.fa-rectangle-wide:before { content: "\f2fc"; }

.fa-recycle:before { content: "\f1b8"; }

.fa-red-river:before { content: "\f3e3"; }

.fa-reddit:before { content: "\f1a1"; }

.fa-reddit-alien:before { content: "\f281"; }

.fa-reddit-square:before { content: "\f1a2"; }

.fa-redhat:before { content: "\f7bc"; }

.fa-redo:before { content: "\f01e"; }

.fa-redo-alt:before { content: "\f2f9"; }

.fa-refrigerator:before { content: "\e026"; }

.fa-registered:before { content: "\f25d"; }

.fa-remove-format:before { content: "\f87d"; }

.fa-renren:before { content: "\f18b"; }

.fa-repeat:before { content: "\f363"; }

.fa-repeat-1:before { content: "\f365"; }

.fa-repeat-1-alt:before { content: "\f366"; }

.fa-repeat-alt:before { content: "\f364"; }

.fa-reply:before { content: "\f3e5"; }

.fa-reply-all:before { content: "\f122"; }

.fa-replyd:before { content: "\f3e6"; }

.fa-republican:before { content: "\f75e"; }

.fa-researchgate:before { content: "\f4f8"; }

.fa-resolving:before { content: "\f3e7"; }

.fa-restroom:before { content: "\f7bd"; }

.fa-retweet:before { content: "\f079"; }

.fa-retweet-alt:before { content: "\f361"; }

.fa-rev:before { content: "\f5b2"; }

.fa-ribbon:before { content: "\f4d6"; }

.fa-ring:before { content: "\f70b"; }

.fa-rings-wedding:before { content: "\f81b"; }

.fa-road:before { content: "\f018"; }

.fa-robot:before { content: "\f544"; }

.fa-rocket:before { content: "\f135"; }

.fa-rocket-launch:before { content: "\e027"; }

.fa-rocketchat:before { content: "\f3e8"; }

.fa-rockrms:before { content: "\f3e9"; }

.fa-route:before { content: "\f4d7"; }

.fa-route-highway:before { content: "\f61a"; }

.fa-route-interstate:before { content: "\f61b"; }

.fa-router:before { content: "\f8da"; }

.fa-rss:before { content: "\f09e"; }

.fa-rss-square:before { content: "\f143"; }

.fa-ruble-sign:before { content: "\f158"; }

.fa-ruler:before { content: "\f545"; }

.fa-ruler-combined:before { content: "\f546"; }

.fa-ruler-horizontal:before { content: "\f547"; }

.fa-ruler-triangle:before { content: "\f61c"; }

.fa-ruler-vertical:before { content: "\f548"; }

.fa-running:before { content: "\f70c"; }

.fa-rupee-sign:before { content: "\f156"; }

.fa-rust:before { content: "\e07a"; }

.fa-rv:before { content: "\f7be"; }

.fa-sack:before { content: "\f81c"; }

.fa-sack-dollar:before { content: "\f81d"; }

.fa-sad-cry:before { content: "\f5b3"; }

.fa-sad-tear:before { content: "\f5b4"; }

.fa-safari:before { content: "\f267"; }

.fa-salad:before { content: "\f81e"; }

.fa-salesforce:before { content: "\f83b"; }

.fa-sandwich:before { content: "\f81f"; }

.fa-sass:before { content: "\f41e"; }

.fa-satellite:before { content: "\f7bf"; }

.fa-satellite-dish:before { content: "\f7c0"; }

.fa-sausage:before { content: "\f820"; }

.fa-save:before { content: "\f0c7"; }

.fa-sax-hot:before { content: "\f8db"; }

.fa-saxophone:before { content: "\f8dc"; }

.fa-scalpel:before { content: "\f61d"; }

.fa-scalpel-path:before { content: "\f61e"; }

.fa-scanner:before { content: "\f488"; }

.fa-scanner-image:before { content: "\f8f3"; }

.fa-scanner-keyboard:before { content: "\f489"; }

.fa-scanner-touchscreen:before { content: "\f48a"; }

.fa-scarecrow:before { content: "\f70d"; }

.fa-scarf:before { content: "\f7c1"; }

.fa-schlix:before { content: "\f3ea"; }

.fa-school:before { content: "\f549"; }

.fa-screwdriver:before { content: "\f54a"; }

.fa-scribd:before { content: "\f28a"; }

.fa-scroll:before { content: "\f70e"; }

.fa-scroll-old:before { content: "\f70f"; }

.fa-scrubber:before { content: "\f2f8"; }

.fa-scythe:before { content: "\f710"; }

.fa-sd-card:before { content: "\f7c2"; }

.fa-search:before { content: "\f002"; }

.fa-search-dollar:before { content: "\f688"; }

.fa-search-location:before { content: "\f689"; }

.fa-search-minus:before { content: "\f010"; }

.fa-search-plus:before { content: "\f00e"; }

.fa-searchengin:before { content: "\f3eb"; }

.fa-seedling:before { content: "\f4d8"; }

.fa-sellcast:before { content: "\f2da"; }

.fa-sellsy:before { content: "\f213"; }

.fa-send-back:before { content: "\f87e"; }

.fa-send-backward:before { content: "\f87f"; }

.fa-sensor:before { content: "\e028"; }

.fa-sensor-alert:before { content: "\e029"; }

.fa-sensor-fire:before { content: "\e02a"; }

.fa-sensor-on:before { content: "\e02b"; }

.fa-sensor-smoke:before { content: "\e02c"; }

.fa-server:before { content: "\f233"; }

.fa-servicestack:before { content: "\f3ec"; }

.fa-shapes:before { content: "\f61f"; }

.fa-share:before { content: "\f064"; }

.fa-share-all:before { content: "\f367"; }

.fa-share-alt:before { content: "\f1e0"; }

.fa-share-alt-square:before { content: "\f1e1"; }

.fa-share-square:before { content: "\f14d"; }

.fa-sheep:before { content: "\f711"; }

.fa-shekel-sign:before { content: "\f20b"; }

.fa-shield:before { content: "\f132"; }

.fa-shield-alt:before { content: "\f3ed"; }

.fa-shield-check:before { content: "\f2f7"; }

.fa-shield-cross:before { content: "\f712"; }

.fa-shield-virus:before { content: "\e06c"; }

.fa-ship:before { content: "\f21a"; }

.fa-shipping-fast:before { content: "\f48b"; }

.fa-shipping-timed:before { content: "\f48c"; }

.fa-shirtsinbulk:before { content: "\f214"; }

.fa-shish-kebab:before { content: "\f821"; }

.fa-shoe-prints:before { content: "\f54b"; }

.fa-shopify:before { content: "\e057"; }

.fa-shopping-bag:before { content: "\f290"; }

.fa-shopping-basket:before { content: "\f291"; }

.fa-shopping-cart:before { content: "\f07a"; }

.fa-shopware:before { content: "\f5b5"; }

.fa-shovel:before { content: "\f713"; }

.fa-shovel-snow:before { content: "\f7c3"; }

.fa-shower:before { content: "\f2cc"; }

.fa-shredder:before { content: "\f68a"; }

.fa-shuttle-van:before { content: "\f5b6"; }

.fa-shuttlecock:before { content: "\f45b"; }

.fa-sickle:before { content: "\f822"; }

.fa-sigma:before { content: "\f68b"; }

.fa-sign:before { content: "\f4d9"; }

.fa-sign-in:before { content: "\f090"; }

.fa-sign-in-alt:before { content: "\f2f6"; }

.fa-sign-language:before { content: "\f2a7"; }

.fa-sign-out:before { content: "\f08b"; }

.fa-sign-out-alt:before { content: "\f2f5"; }

.fa-signal:before { content: "\f012"; }

.fa-signal-1:before { content: "\f68c"; }

.fa-signal-2:before { content: "\f68d"; }

.fa-signal-3:before { content: "\f68e"; }

.fa-signal-4:before { content: "\f68f"; }

.fa-signal-alt:before { content: "\f690"; }

.fa-signal-alt-1:before { content: "\f691"; }

.fa-signal-alt-2:before { content: "\f692"; }

.fa-signal-alt-3:before { content: "\f693"; }

.fa-signal-alt-slash:before { content: "\f694"; }

.fa-signal-slash:before { content: "\f695"; }

.fa-signal-stream:before { content: "\f8dd"; }

.fa-signature:before { content: "\f5b7"; }

.fa-sim-card:before { content: "\f7c4"; }

.fa-simplybuilt:before { content: "\f215"; }

.fa-sink:before { content: "\e06d"; }

.fa-siren:before { content: "\e02d"; }

.fa-siren-on:before { content: "\e02e"; }

.fa-sistrix:before { content: "\f3ee"; }

.fa-sitemap:before { content: "\f0e8"; }

.fa-sith:before { content: "\f512"; }

.fa-skating:before { content: "\f7c5"; }

.fa-skeleton:before { content: "\f620"; }

.fa-sketch:before { content: "\f7c6"; }

.fa-ski-jump:before { content: "\f7c7"; }

.fa-ski-lift:before { content: "\f7c8"; }

.fa-skiing:before { content: "\f7c9"; }

.fa-skiing-nordic:before { content: "\f7ca"; }

.fa-skull:before { content: "\f54c"; }

.fa-skull-cow:before { content: "\f8de"; }

.fa-skull-crossbones:before { content: "\f714"; }

.fa-skyatlas:before { content: "\f216"; }

.fa-skype:before { content: "\f17e"; }

.fa-slack:before { content: "\f198"; }

.fa-slack-hash:before { content: "\f3ef"; }

.fa-slash:before { content: "\f715"; }

.fa-sledding:before { content: "\f7cb"; }

.fa-sleigh:before { content: "\f7cc"; }

.fa-sliders-h:before { content: "\f1de"; }

.fa-sliders-h-square:before { content: "\f3f0"; }

.fa-sliders-v:before { content: "\f3f1"; }

.fa-sliders-v-square:before { content: "\f3f2"; }

.fa-slideshare:before { content: "\f1e7"; }

.fa-smile:before { content: "\f118"; }

.fa-smile-beam:before { content: "\f5b8"; }

.fa-smile-plus:before { content: "\f5b9"; }

.fa-smile-wink:before { content: "\f4da"; }

.fa-smog:before { content: "\f75f"; }

.fa-smoke:before { content: "\f760"; }

.fa-smoking:before { content: "\f48d"; }

.fa-smoking-ban:before { content: "\f54d"; }

.fa-sms:before { content: "\f7cd"; }

.fa-snake:before { content: "\f716"; }

.fa-snapchat:before { content: "\f2ab"; }

.fa-snapchat-ghost:before { content: "\f2ac"; }

.fa-snapchat-square:before { content: "\f2ad"; }

.fa-snooze:before { content: "\f880"; }

.fa-snow-blowing:before { content: "\f761"; }

.fa-snowboarding:before { content: "\f7ce"; }

.fa-snowflake:before { content: "\f2dc"; }

.fa-snowflakes:before { content: "\f7cf"; }

.fa-snowman:before { content: "\f7d0"; }

.fa-snowmobile:before { content: "\f7d1"; }

.fa-snowplow:before { content: "\f7d2"; }

.fa-soap:before { content: "\e06e"; }

.fa-socks:before { content: "\f696"; }

.fa-solar-panel:before { content: "\f5ba"; }

.fa-solar-system:before { content: "\e02f"; }

.fa-sort:before { content: "\f0dc"; }

.fa-sort-alpha-down:before { content: "\f15d"; }

.fa-sort-alpha-down-alt:before { content: "\f881"; }

.fa-sort-alpha-up:before { content: "\f15e"; }

.fa-sort-alpha-up-alt:before { content: "\f882"; }

.fa-sort-alt:before { content: "\f883"; }

.fa-sort-amount-down:before { content: "\f160"; }

.fa-sort-amount-down-alt:before { content: "\f884"; }

.fa-sort-amount-up:before { content: "\f161"; }

.fa-sort-amount-up-alt:before { content: "\f885"; }

.fa-sort-circle:before { content: "\e030"; }

.fa-sort-circle-down:before { content: "\e031"; }

.fa-sort-circle-up:before { content: "\e032"; }

.fa-sort-down:before { content: "\f0dd"; }

.fa-sort-numeric-down:before { content: "\f162"; }

.fa-sort-numeric-down-alt:before { content: "\f886"; }

.fa-sort-numeric-up:before { content: "\f163"; }

.fa-sort-numeric-up-alt:before { content: "\f887"; }

.fa-sort-shapes-down:before { content: "\f888"; }

.fa-sort-shapes-down-alt:before { content: "\f889"; }

.fa-sort-shapes-up:before { content: "\f88a"; }

.fa-sort-shapes-up-alt:before { content: "\f88b"; }

.fa-sort-size-down:before { content: "\f88c"; }

.fa-sort-size-down-alt:before { content: "\f88d"; }

.fa-sort-size-up:before { content: "\f88e"; }

.fa-sort-size-up-alt:before { content: "\f88f"; }

.fa-sort-up:before { content: "\f0de"; }

.fa-soundcloud:before { content: "\f1be"; }

.fa-soup:before { content: "\f823"; }

.fa-sourcetree:before { content: "\f7d3"; }

.fa-spa:before { content: "\f5bb"; }

.fa-space-shuttle:before { content: "\f197"; }

.fa-space-station-moon:before { content: "\e033"; }

.fa-space-station-moon-alt:before { content: "\e034"; }

.fa-spade:before { content: "\f2f4"; }

.fa-sparkles:before { content: "\f890"; }

.fa-speakap:before { content: "\f3f3"; }

.fa-speaker:before { content: "\f8df"; }

.fa-speaker-deck:before { content: "\f83c"; }

.fa-speakers:before { content: "\f8e0"; }

.fa-spell-check:before { content: "\f891"; }

.fa-spider:before { content: "\f717"; }

.fa-spider-black-widow:before { content: "\f718"; }

.fa-spider-web:before { content: "\f719"; }

.fa-spinner:before { content: "\f110"; }

.fa-spinner-third:before { content: "\f3f4"; }

.fa-splotch:before { content: "\f5bc"; }

.fa-spotify:before { content: "\f1bc"; }

.fa-spray-can:before { content: "\f5bd"; }

.fa-sprinkler:before { content: "\e035"; }

.fa-square:before { content: "\f0c8"; }

.fa-square-full:before { content: "\f45c"; }

.fa-square-root:before { content: "\f697"; }

.fa-square-root-alt:before { content: "\f698"; }

.fa-squarespace:before { content: "\f5be"; }

.fa-squirrel:before { content: "\f71a"; }

.fa-stack-exchange:before { content: "\f18d"; }

.fa-stack-overflow:before { content: "\f16c"; }

.fa-stackpath:before { content: "\f842"; }

.fa-staff:before { content: "\f71b"; }

.fa-stamp:before { content: "\f5bf"; }

.fa-star:before { content: "\f005"; }

.fa-star-and-crescent:before { content: "\f699"; }

.fa-star-christmas:before { content: "\f7d4"; }

.fa-star-exclamation:before { content: "\f2f3"; }

.fa-star-half:before { content: "\f089"; }

.fa-star-half-alt:before { content: "\f5c0"; }

.fa-star-of-david:before { content: "\f69a"; }

.fa-star-of-life:before { content: "\f621"; }

.fa-star-shooting:before { content: "\e036"; }

.fa-starfighter:before { content: "\e037"; }

.fa-starfighter-alt:before { content: "\e038"; }

.fa-stars:before { content: "\f762"; }

.fa-starship:before { content: "\e039"; }

.fa-starship-freighter:before { content: "\e03a"; }

.fa-staylinked:before { content: "\f3f5"; }

.fa-steak:before { content: "\f824"; }

.fa-steam:before { content: "\f1b6"; }

.fa-steam-square:before { content: "\f1b7"; }

.fa-steam-symbol:before { content: "\f3f6"; }

.fa-steering-wheel:before { content: "\f622"; }

.fa-step-backward:before { content: "\f048"; }

.fa-step-forward:before { content: "\f051"; }

.fa-stethoscope:before { content: "\f0f1"; }

.fa-sticker-mule:before { content: "\f3f7"; }

.fa-sticky-note:before { content: "\f249"; }

.fa-stocking:before { content: "\f7d5"; }

.fa-stomach:before { content: "\f623"; }

.fa-stop:before { content: "\f04d"; }

.fa-stop-circle:before { content: "\f28d"; }

.fa-stopwatch:before { content: "\f2f2"; }

.fa-stopwatch-20:before { content: "\e06f"; }

.fa-store:before { content: "\f54e"; }

.fa-store-alt:before { content: "\f54f"; }

.fa-store-alt-slash:before { content: "\e070"; }

.fa-store-slash:before { content: "\e071"; }

.fa-strava:before { content: "\f428"; }

.fa-stream:before { content: "\f550"; }

.fa-street-view:before { content: "\f21d"; }

.fa-stretcher:before { content: "\f825"; }

.fa-strikethrough:before { content: "\f0cc"; }

.fa-stripe:before { content: "\f429"; }

.fa-stripe-s:before { content: "\f42a"; }

.fa-stroopwafel:before { content: "\f551"; }

.fa-studiovinari:before { content: "\f3f8"; }

.fa-stumbleupon:before { content: "\f1a4"; }

.fa-stumbleupon-circle:before { content: "\f1a3"; }

.fa-subscript:before { content: "\f12c"; }

.fa-subway:before { content: "\f239"; }

.fa-suitcase:before { content: "\f0f2"; }

.fa-suitcase-rolling:before { content: "\f5c1"; }

.fa-sun:before { content: "\f185"; }

.fa-sun-cloud:before { content: "\f763"; }

.fa-sun-dust:before { content: "\f764"; }

.fa-sun-haze:before { content: "\f765"; }

.fa-sunglasses:before { content: "\f892"; }

.fa-sunrise:before { content: "\f766"; }

.fa-sunset:before { content: "\f767"; }

.fa-superpowers:before { content: "\f2dd"; }

.fa-superscript:before { content: "\f12b"; }

.fa-supple:before { content: "\f3f9"; }

.fa-surprise:before { content: "\f5c2"; }

.fa-suse:before { content: "\f7d6"; }

.fa-swatchbook:before { content: "\f5c3"; }

.fa-swift:before { content: "\f8e1"; }

.fa-swimmer:before { content: "\f5c4"; }

.fa-swimming-pool:before { content: "\f5c5"; }

.fa-sword:before { content: "\f71c"; }

.fa-sword-laser:before { content: "\e03b"; }

.fa-sword-laser-alt:before { content: "\e03c"; }

.fa-swords:before { content: "\f71d"; }

.fa-swords-laser:before { content: "\e03d"; }

.fa-symfony:before { content: "\f83d"; }

.fa-synagogue:before { content: "\f69b"; }

.fa-sync:before { content: "\f021"; }

.fa-sync-alt:before { content: "\f2f1"; }

.fa-syringe:before { content: "\f48e"; }

.fa-table:before { content: "\f0ce"; }

.fa-table-tennis:before { content: "\f45d"; }

.fa-tablet:before { content: "\f10a"; }

.fa-tablet-alt:before { content: "\f3fa"; }

.fa-tablet-android:before { content: "\f3fb"; }

.fa-tablet-android-alt:before { content: "\f3fc"; }

.fa-tablet-rugged:before { content: "\f48f"; }

.fa-tablets:before { content: "\f490"; }

.fa-tachometer:before { content: "\f0e4"; }

.fa-tachometer-alt:before { content: "\f3fd"; }

.fa-tachometer-alt-average:before { content: "\f624"; }

.fa-tachometer-alt-fast:before { content: "\f625"; }

.fa-tachometer-alt-fastest:before { content: "\f626"; }

.fa-tachometer-alt-slow:before { content: "\f627"; }

.fa-tachometer-alt-slowest:before { content: "\f628"; }

.fa-tachometer-average:before { content: "\f629"; }

.fa-tachometer-fast:before { content: "\f62a"; }

.fa-tachometer-fastest:before { content: "\f62b"; }

.fa-tachometer-slow:before { content: "\f62c"; }

.fa-tachometer-slowest:before { content: "\f62d"; }

.fa-taco:before { content: "\f826"; }

.fa-tag:before { content: "\f02b"; }

.fa-tags:before { content: "\f02c"; }

.fa-tally:before { content: "\f69c"; }

.fa-tanakh:before { content: "\f827"; }

.fa-tape:before { content: "\f4db"; }

.fa-tasks:before { content: "\f0ae"; }

.fa-tasks-alt:before { content: "\f828"; }

.fa-taxi:before { content: "\f1ba"; }

.fa-teamspeak:before { content: "\f4f9"; }

.fa-teeth:before { content: "\f62e"; }

.fa-teeth-open:before { content: "\f62f"; }

.fa-telegram:before { content: "\f2c6"; }

.fa-telegram-plane:before { content: "\f3fe"; }

.fa-telescope:before { content: "\e03e"; }

.fa-temperature-down:before { content: "\e03f"; }

.fa-temperature-frigid:before { content: "\f768"; }

.fa-temperature-high:before { content: "\f769"; }

.fa-temperature-hot:before { content: "\f76a"; }

.fa-temperature-low:before { content: "\f76b"; }

.fa-temperature-up:before { content: "\e040"; }

.fa-tencent-weibo:before { content: "\f1d5"; }

.fa-tenge:before { content: "\f7d7"; }

.fa-tennis-ball:before { content: "\f45e"; }

.fa-terminal:before { content: "\f120"; }

.fa-text:before { content: "\f893"; }

.fa-text-height:before { content: "\f034"; }

.fa-text-size:before { content: "\f894"; }

.fa-text-width:before { content: "\f035"; }

.fa-th:before { content: "\f00a"; }

.fa-th-large:before { content: "\f009"; }

.fa-th-list:before { content: "\f00b"; }

.fa-the-red-yeti:before { content: "\f69d"; }

.fa-theater-masks:before { content: "\f630"; }

.fa-themeco:before { content: "\f5c6"; }

.fa-themeisle:before { content: "\f2b2"; }

.fa-thermometer:before { content: "\f491"; }

.fa-thermometer-empty:before { content: "\f2cb"; }

.fa-thermometer-full:before { content: "\f2c7"; }

.fa-thermometer-half:before { content: "\f2c9"; }

.fa-thermometer-quarter:before { content: "\f2ca"; }

.fa-thermometer-three-quarters:before { content: "\f2c8"; }

.fa-theta:before { content: "\f69e"; }

.fa-think-peaks:before { content: "\f731"; }

.fa-thumbs-down:before { content: "\f165"; }

.fa-thumbs-up:before { content: "\f164"; }

.fa-thumbtack:before { content: "\f08d"; }

.fa-thunderstorm:before { content: "\f76c"; }

.fa-thunderstorm-moon:before { content: "\f76d"; }

.fa-thunderstorm-sun:before { content: "\f76e"; }

.fa-ticket:before { content: "\f145"; }

.fa-ticket-alt:before { content: "\f3ff"; }

.fa-tiktok:before { content: "\e07b"; }

.fa-tilde:before { content: "\f69f"; }

.fa-times:before { content: "\f00d"; }

.fa-times-circle:before { content: "\f057"; }

.fa-times-hexagon:before { content: "\f2ee"; }

.fa-times-octagon:before { content: "\f2f0"; }

.fa-times-square:before { content: "\f2d3"; }

.fa-tint:before { content: "\f043"; }

.fa-tint-slash:before { content: "\f5c7"; }

.fa-tire:before { content: "\f631"; }

.fa-tire-flat:before { content: "\f632"; }

.fa-tire-pressure-warning:before { content: "\f633"; }

.fa-tire-rugged:before { content: "\f634"; }

.fa-tired:before { content: "\f5c8"; }

.fa-toggle-off:before { content: "\f204"; }

.fa-toggle-on:before { content: "\f205"; }

.fa-toilet:before { content: "\f7d8"; }

.fa-toilet-paper:before { content: "\f71e"; }

.fa-toilet-paper-alt:before { content: "\f71f"; }

.fa-toilet-paper-slash:before { content: "\e072"; }

.fa-tombstone:before { content: "\f720"; }

.fa-tombstone-alt:before { content: "\f721"; }

.fa-toolbox:before { content: "\f552"; }

.fa-tools:before { content: "\f7d9"; }

.fa-tooth:before { content: "\f5c9"; }

.fa-toothbrush:before { content: "\f635"; }

.fa-torah:before { content: "\f6a0"; }

.fa-torii-gate:before { content: "\f6a1"; }

.fa-tornado:before { content: "\f76f"; }

.fa-tractor:before { content: "\f722"; }

.fa-trade-federation:before { content: "\f513"; }

.fa-trademark:before { content: "\f25c"; }

.fa-traffic-cone:before { content: "\f636"; }

.fa-traffic-light:before { content: "\f637"; }

.fa-traffic-light-go:before { content: "\f638"; }

.fa-traffic-light-slow:before { content: "\f639"; }

.fa-traffic-light-stop:before { content: "\f63a"; }

.fa-trailer:before { content: "\e041"; }

.fa-train:before { content: "\f238"; }

.fa-tram:before { content: "\f7da"; }

.fa-transgender:before { content: "\f224"; }

.fa-transgender-alt:before { content: "\f225"; }

.fa-transporter:before { content: "\e042"; }

.fa-transporter-1:before { content: "\e043"; }

.fa-transporter-2:before { content: "\e044"; }

.fa-transporter-3:before { content: "\e045"; }

.fa-transporter-empty:before { content: "\e046"; }

.fa-trash:before { content: "\f1f8"; }

.fa-trash-alt:before { content: "\f2ed"; }

.fa-trash-restore:before { content: "\f829"; }

.fa-trash-restore-alt:before { content: "\f82a"; }

.fa-trash-undo:before { content: "\f895"; }

.fa-trash-undo-alt:before { content: "\f896"; }

.fa-treasure-chest:before { content: "\f723"; }

.fa-tree:before { content: "\f1bb"; }

.fa-tree-alt:before { content: "\f400"; }

.fa-tree-christmas:before { content: "\f7db"; }

.fa-tree-decorated:before { content: "\f7dc"; }

.fa-tree-large:before { content: "\f7dd"; }

.fa-tree-palm:before { content: "\f82b"; }

.fa-trees:before { content: "\f724"; }

.fa-trello:before { content: "\f181"; }

.fa-triangle:before { content: "\f2ec"; }

.fa-triangle-music:before { content: "\f8e2"; }

.fa-trophy:before { content: "\f091"; }

.fa-trophy-alt:before { content: "\f2eb"; }

.fa-truck:before { content: "\f0d1"; }

.fa-truck-container:before { content: "\f4dc"; }

.fa-truck-couch:before { content: "\f4dd"; }

.fa-truck-loading:before { content: "\f4de"; }

.fa-truck-monster:before { content: "\f63b"; }

.fa-truck-moving:before { content: "\f4df"; }

.fa-truck-pickup:before { content: "\f63c"; }

.fa-truck-plow:before { content: "\f7de"; }

.fa-truck-ramp:before { content: "\f4e0"; }

.fa-trumpet:before { content: "\f8e3"; }

.fa-tshirt:before { content: "\f553"; }

.fa-tty:before { content: "\f1e4"; }

.fa-tumblr:before { content: "\f173"; }

.fa-tumblr-square:before { content: "\f174"; }

.fa-turkey:before { content: "\f725"; }

.fa-turntable:before { content: "\f8e4"; }

.fa-turtle:before { content: "\f726"; }

.fa-tv:before { content: "\f26c"; }

.fa-tv-alt:before { content: "\f8e5"; }

.fa-tv-music:before { content: "\f8e6"; }

.fa-tv-retro:before { content: "\f401"; }

.fa-twitch:before { content: "\f1e8"; }

.fa-twitter:before { content: "\f099"; }

.fa-twitter-square:before { content: "\f081"; }

.fa-typewriter:before { content: "\f8e7"; }

.fa-typo3:before { content: "\f42b"; }

.fa-uber:before { content: "\f402"; }

.fa-ubuntu:before { content: "\f7df"; }

.fa-ufo:before { content: "\e047"; }

.fa-ufo-beam:before { content: "\e048"; }

.fa-uikit:before { content: "\f403"; }

.fa-umbraco:before { content: "\f8e8"; }

.fa-umbrella:before { content: "\f0e9"; }

.fa-umbrella-beach:before { content: "\f5ca"; }

.fa-uncharted:before { content: "\e084"; }

.fa-underline:before { content: "\f0cd"; }

.fa-undo:before { content: "\f0e2"; }

.fa-undo-alt:before { content: "\f2ea"; }

.fa-unicorn:before { content: "\f727"; }

.fa-union:before { content: "\f6a2"; }

.fa-uniregistry:before { content: "\f404"; }

.fa-unity:before { content: "\e049"; }

.fa-universal-access:before { content: "\f29a"; }

.fa-university:before { content: "\f19c"; }

.fa-unlink:before { content: "\f127"; }

.fa-unlock:before { content: "\f09c"; }

.fa-unlock-alt:before { content: "\f13e"; }

.fa-unsplash:before { content: "\e07c"; }

.fa-untappd:before { content: "\f405"; }

.fa-upload:before { content: "\f093"; }

.fa-ups:before { content: "\f7e0"; }

.fa-usb:before { content: "\f287"; }

.fa-usb-drive:before { content: "\f8e9"; }

.fa-usd-circle:before { content: "\f2e8"; }

.fa-usd-square:before { content: "\f2e9"; }

.fa-user:before { content: "\f007"; }

.fa-user-alien:before { content: "\e04a"; }

.fa-user-alt:before { content: "\f406"; }

.fa-user-alt-slash:before { content: "\f4fa"; }

.fa-user-astronaut:before { content: "\f4fb"; }

.fa-user-chart:before { content: "\f6a3"; }

.fa-user-check:before { content: "\f4fc"; }

.fa-user-circle:before { content: "\f2bd"; }

.fa-user-clock:before { content: "\f4fd"; }

.fa-user-cog:before { content: "\f4fe"; }

.fa-user-cowboy:before { content: "\f8ea"; }

.fa-user-crown:before { content: "\f6a4"; }

.fa-user-edit:before { content: "\f4ff"; }

.fa-user-friends:before { content: "\f500"; }

.fa-user-graduate:before { content: "\f501"; }

.fa-user-hard-hat:before { content: "\f82c"; }

.fa-user-headset:before { content: "\f82d"; }

.fa-user-injured:before { content: "\f728"; }

.fa-user-lock:before { content: "\f502"; }

.fa-user-md:before { content: "\f0f0"; }

.fa-user-md-chat:before { content: "\f82e"; }

.fa-user-minus:before { content: "\f503"; }

.fa-user-music:before { content: "\f8eb"; }

.fa-user-ninja:before { content: "\f504"; }

.fa-user-nurse:before { content: "\f82f"; }

.fa-user-plus:before { content: "\f234"; }

.fa-user-robot:before { content: "\e04b"; }

.fa-user-secret:before { content: "\f21b"; }

.fa-user-shield:before { content: "\f505"; }

.fa-user-slash:before { content: "\f506"; }

.fa-user-tag:before { content: "\f507"; }

.fa-user-tie:before { content: "\f508"; }

.fa-user-times:before { content: "\f235"; }

.fa-user-unlock:before { content: "\e058"; }

.fa-user-visor:before { content: "\e04c"; }

.fa-users:before { content: "\f0c0"; }

.fa-users-class:before { content: "\f63d"; }

.fa-users-cog:before { content: "\f509"; }

.fa-users-crown:before { content: "\f6a5"; }

.fa-users-medical:before { content: "\f830"; }

.fa-users-slash:before { content: "\e073"; }

.fa-usps:before { content: "\f7e1"; }

.fa-ussunnah:before { content: "\f407"; }

.fa-utensil-fork:before { content: "\f2e3"; }

.fa-utensil-knife:before { content: "\f2e4"; }

.fa-utensil-spoon:before { content: "\f2e5"; }

.fa-utensils:before { content: "\f2e7"; }

.fa-utensils-alt:before { content: "\f2e6"; }

.fa-vaadin:before { content: "\f408"; }

.fa-vacuum:before { content: "\e04d"; }

.fa-vacuum-robot:before { content: "\e04e"; }

.fa-value-absolute:before { content: "\f6a6"; }

.fa-vector-square:before { content: "\f5cb"; }

.fa-venus:before { content: "\f221"; }

.fa-venus-double:before { content: "\f226"; }

.fa-venus-mars:before { content: "\f228"; }

.fa-vest:before { content: "\e085"; }

.fa-vest-patches:before { content: "\e086"; }

.fa-vhs:before { content: "\f8ec"; }

.fa-viacoin:before { content: "\f237"; }

.fa-viadeo:before { content: "\f2a9"; }

.fa-viadeo-square:before { content: "\f2aa"; }

.fa-vial:before { content: "\f492"; }

.fa-vials:before { content: "\f493"; }

.fa-viber:before { content: "\f409"; }

.fa-video:before { content: "\f03d"; }

.fa-video-plus:before { content: "\f4e1"; }

.fa-video-slash:before { content: "\f4e2"; }

.fa-vihara:before { content: "\f6a7"; }

.fa-vimeo:before { content: "\f40a"; }

.fa-vimeo-square:before { content: "\f194"; }

.fa-vimeo-v:before { content: "\f27d"; }

.fa-vine:before { content: "\f1ca"; }

.fa-violin:before { content: "\f8ed"; }

.fa-virus:before { content: "\e074"; }

.fa-virus-slash:before { content: "\e075"; }

.fa-viruses:before { content: "\e076"; }

.fa-vk:before { content: "\f189"; }

.fa-vnv:before { content: "\f40b"; }

.fa-voicemail:before { content: "\f897"; }

.fa-volcano:before { content: "\f770"; }

.fa-volleyball-ball:before { content: "\f45f"; }

.fa-volume:before { content: "\f6a8"; }

.fa-volume-down:before { content: "\f027"; }

.fa-volume-mute:before { content: "\f6a9"; }

.fa-volume-off:before { content: "\f026"; }

.fa-volume-slash:before { content: "\f2e2"; }

.fa-volume-up:before { content: "\f028"; }

.fa-vote-nay:before { content: "\f771"; }

.fa-vote-yea:before { content: "\f772"; }

.fa-vr-cardboard:before { content: "\f729"; }

.fa-vuejs:before { content: "\f41f"; }

.fa-wagon-covered:before { content: "\f8ee"; }

.fa-walker:before { content: "\f831"; }

.fa-walkie-talkie:before { content: "\f8ef"; }

.fa-walking:before { content: "\f554"; }

.fa-wallet:before { content: "\f555"; }

.fa-wand:before { content: "\f72a"; }

.fa-wand-magic:before { content: "\f72b"; }

.fa-warehouse:before { content: "\f494"; }

.fa-warehouse-alt:before { content: "\f495"; }

.fa-washer:before { content: "\f898"; }

.fa-watch:before { content: "\f2e1"; }

.fa-watch-calculator:before { content: "\f8f0"; }

.fa-watch-fitness:before { content: "\f63e"; }

.fa-watchman-monitoring:before { content: "\e087"; }

.fa-water:before { content: "\f773"; }

.fa-water-lower:before { content: "\f774"; }

.fa-water-rise:before { content: "\f775"; }

.fa-wave-sine:before { content: "\f899"; }

.fa-wave-square:before { content: "\f83e"; }

.fa-wave-triangle:before { content: "\f89a"; }

.fa-waveform:before { content: "\f8f1"; }

.fa-waveform-path:before { content: "\f8f2"; }

.fa-waze:before { content: "\f83f"; }

.fa-webcam:before { content: "\f832"; }

.fa-webcam-slash:before { content: "\f833"; }

.fa-weebly:before { content: "\f5cc"; }

.fa-weibo:before { content: "\f18a"; }

.fa-weight:before { content: "\f496"; }

.fa-weight-hanging:before { content: "\f5cd"; }

.fa-weixin:before { content: "\f1d7"; }

.fa-whale:before { content: "\f72c"; }

.fa-whatsapp:before { content: "\f232"; }

.fa-whatsapp-square:before { content: "\f40c"; }

.fa-wheat:before { content: "\f72d"; }

.fa-wheelchair:before { content: "\f193"; }

.fa-whistle:before { content: "\f460"; }

.fa-whmcs:before { content: "\f40d"; }

.fa-wifi:before { content: "\f1eb"; }

.fa-wifi-1:before { content: "\f6aa"; }

.fa-wifi-2:before { content: "\f6ab"; }

.fa-wifi-slash:before { content: "\f6ac"; }

.fa-wikipedia-w:before { content: "\f266"; }

.fa-wind:before { content: "\f72e"; }

.fa-wind-turbine:before { content: "\f89b"; }

.fa-wind-warning:before { content: "\f776"; }

.fa-window:before { content: "\f40e"; }

.fa-window-alt:before { content: "\f40f"; }

.fa-window-close:before { content: "\f410"; }

.fa-window-frame:before { content: "\e04f"; }

.fa-window-frame-open:before { content: "\e050"; }

.fa-window-maximize:before { content: "\f2d0"; }

.fa-window-minimize:before { content: "\f2d1"; }

.fa-window-restore:before { content: "\f2d2"; }

.fa-windows:before { content: "\f17a"; }

.fa-windsock:before { content: "\f777"; }

.fa-wine-bottle:before { content: "\f72f"; }

.fa-wine-glass:before { content: "\f4e3"; }

.fa-wine-glass-alt:before { content: "\f5ce"; }

.fa-wix:before { content: "\f5cf"; }

.fa-wizards-of-the-coast:before { content: "\f730"; }

.fa-wodu:before { content: "\e088"; }

.fa-wolf-pack-battalion:before { content: "\f514"; }

.fa-won-sign:before { content: "\f159"; }

.fa-wordpress:before { content: "\f19a"; }

.fa-wordpress-simple:before { content: "\f411"; }

.fa-wpbeginner:before { content: "\f297"; }

.fa-wpexplorer:before { content: "\f2de"; }

.fa-wpforms:before { content: "\f298"; }

.fa-wpressr:before { content: "\f3e4"; }

.fa-wreath:before { content: "\f7e2"; }

.fa-wrench:before { content: "\f0ad"; }

.fa-x-ray:before { content: "\f497"; }

.fa-xbox:before { content: "\f412"; }

.fa-xing:before { content: "\f168"; }

.fa-xing-square:before { content: "\f169"; }

.fa-y-combinator:before { content: "\f23b"; }

.fa-yahoo:before { content: "\f19e"; }

.fa-yammer:before { content: "\f840"; }

.fa-yandex:before { content: "\f413"; }

.fa-yandex-international:before { content: "\f414"; }

.fa-yarn:before { content: "\f7e3"; }

.fa-yelp:before { content: "\f1e9"; }

.fa-yen-sign:before { content: "\f157"; }

.fa-yin-yang:before { content: "\f6ad"; }

.fa-yoast:before { content: "\f2b1"; }

.fa-youtube:before { content: "\f167"; }

.fa-youtube-square:before { content: "\f431"; }

.fa-zhihu:before { content: "\f63f"; }

.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* @todo - stop using v4 icons? refactor with v5? */
/*! Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) */
.fa.fa-glass:before { content: "\f000"; }

.fa.fa-meetup { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-star-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-star-o:before { content: "\f005"; }

.fa.fa-close:before, .fa.fa-remove:before { content: "\f00d"; }

.fa.fa-gear:before { content: "\f013"; }

.fa.fa-trash-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-trash-o:before { content: "\f2ed"; }

.fa.fa-file-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-o:before { content: "\f15b"; }

.fa.fa-clock-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-clock-o:before { content: "\f017"; }

.fa.fa-arrow-circle-o-down { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-arrow-circle-o-down:before { content: "\f358"; }

.fa.fa-arrow-circle-o-up { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-arrow-circle-o-up:before { content: "\f35b"; }

.fa.fa-play-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-play-circle-o:before { content: "\f144"; }

.fa.fa-repeat:before, .fa.fa-rotate-right:before { content: "\f01e"; }

.fa.fa-refresh:before { content: "\f021"; }

.fa.fa-list-alt { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-dedent:before { content: "\f03b"; }

.fa.fa-video-camera:before { content: "\f03d"; }

.fa.fa-picture-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-picture-o:before { content: "\f03e"; }

.fa.fa-photo { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-photo:before { content: "\f03e"; }

.fa.fa-image { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-image:before { content: "\f03e"; }

.fa.fa-pencil:before { content: "\f303"; }

.fa.fa-map-marker:before { content: "\f3c5"; }

.fa.fa-pencil-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-pencil-square-o:before { content: "\f044"; }

.fa.fa-share-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-share-square-o:before { content: "\f14d"; }

.fa.fa-check-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-check-square-o:before { content: "\f14a"; }

.fa.fa-arrows:before { content: "\f0b2"; }

.fa.fa-times-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-times-circle-o:before { content: "\f057"; }

.fa.fa-check-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-check-circle-o:before { content: "\f058"; }

.fa.fa-mail-forward:before { content: "\f064"; }

.fa.fa-expand:before { content: "\f424"; }

.fa.fa-compress:before { content: "\f422"; }

.fa.fa-eye, .fa.fa-eye-slash { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-warning:before { content: "\f071"; }

.fa.fa-calendar:before { content: "\f073"; }

.fa.fa-arrows-v:before { content: "\f338"; }

.fa.fa-arrows-h:before { content: "\f337"; }

.fa.fa-bar-chart { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-bar-chart:before { content: "\f080"; }

.fa.fa-bar-chart-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-bar-chart-o:before { content: "\f080"; }

.fa.fa-facebook-square, .fa.fa-twitter-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-gears:before { content: "\f085"; }

.fa.fa-thumbs-o-up { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-thumbs-o-up:before { content: "\f164"; }

.fa.fa-thumbs-o-down { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-thumbs-o-down:before { content: "\f165"; }

.fa.fa-heart-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-heart-o:before { content: "\f004"; }

.fa.fa-sign-out:before { content: "\f2f5"; }

.fa.fa-linkedin-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-linkedin-square:before { content: "\f08c"; }

.fa.fa-thumb-tack:before { content: "\f08d"; }

.fa.fa-external-link:before { content: "\f35d"; }

.fa.fa-sign-in:before { content: "\f2f6"; }

.fa.fa-github-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-lemon-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-lemon-o:before { content: "\f094"; }

.fa.fa-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-square-o:before { content: "\f0c8"; }

.fa.fa-bookmark-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-bookmark-o:before { content: "\f02e"; }

.fa.fa-facebook, .fa.fa-twitter { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-facebook:before { content: "\f39e"; }

.fa.fa-facebook-f { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-facebook-f:before { content: "\f39e"; }

.fa.fa-github { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-credit-card { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-feed:before { content: "\f09e"; }

.fa.fa-hdd-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hdd-o:before { content: "\f0a0"; }

.fa.fa-hand-o-right { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-o-right:before { content: "\f0a4"; }

.fa.fa-hand-o-left { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-o-left:before { content: "\f0a5"; }

.fa.fa-hand-o-up { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-o-up:before { content: "\f0a6"; }

.fa.fa-hand-o-down { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-o-down:before { content: "\f0a7"; }

.fa.fa-arrows-alt:before { content: "\f31e"; }

.fa.fa-group:before { content: "\f0c0"; }

.fa.fa-chain:before { content: "\f0c1"; }

.fa.fa-scissors:before { content: "\f0c4"; }

.fa.fa-files-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-files-o:before { content: "\f0c5"; }

.fa.fa-floppy-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-floppy-o:before { content: "\f0c7"; }

.fa.fa-navicon:before, .fa.fa-reorder:before { content: "\f0c9"; }

.fa.fa-google-plus, .fa.fa-google-plus-square, .fa.fa-pinterest, .fa.fa-pinterest-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-google-plus:before { content: "\f0d5"; }

.fa.fa-money { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-money:before { content: "\f3d1"; }

.fa.fa-unsorted:before { content: "\f0dc"; }

.fa.fa-sort-desc:before { content: "\f0dd"; }

.fa.fa-sort-asc:before { content: "\f0de"; }

.fa.fa-linkedin { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-linkedin:before { content: "\f0e1"; }

.fa.fa-rotate-left:before { content: "\f0e2"; }

.fa.fa-legal:before { content: "\f0e3"; }

.fa.fa-dashboard:before, .fa.fa-tachometer:before { content: "\f3fd"; }

.fa.fa-comment-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-comment-o:before { content: "\f075"; }

.fa.fa-comments-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-comments-o:before { content: "\f086"; }

.fa.fa-flash:before { content: "\f0e7"; }

.fa.fa-clipboard, .fa.fa-paste { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-paste:before { content: "\f328"; }

.fa.fa-lightbulb-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-lightbulb-o:before { content: "\f0eb"; }

.fa.fa-exchange:before { content: "\f362"; }

.fa.fa-cloud-download:before { content: "\f381"; }

.fa.fa-cloud-upload:before { content: "\f382"; }

.fa.fa-bell-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-bell-o:before { content: "\f0f3"; }

.fa.fa-cutlery:before { content: "\f2e7"; }

.fa.fa-file-text-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-text-o:before { content: "\f15c"; }

.fa.fa-building-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-building-o:before { content: "\f1ad"; }

.fa.fa-hospital-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hospital-o:before { content: "\f0f8"; }

.fa.fa-tablet:before { content: "\f3fa"; }

.fa.fa-mobile-phone:before, .fa.fa-mobile:before { content: "\f3cd"; }

.fa.fa-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-circle-o:before { content: "\f111"; }

.fa.fa-mail-reply:before { content: "\f3e5"; }

.fa.fa-github-alt { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-folder-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-folder-o:before { content: "\f07b"; }

.fa.fa-folder-open-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-folder-open-o:before { content: "\f07c"; }

.fa.fa-smile-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-smile-o:before { content: "\f118"; }

.fa.fa-frown-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-frown-o:before { content: "\f119"; }

.fa.fa-meh-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-meh-o:before { content: "\f11a"; }

.fa.fa-keyboard-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-keyboard-o:before { content: "\f11c"; }

.fa.fa-flag-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-flag-o:before { content: "\f024"; }

.fa.fa-mail-reply-all:before { content: "\f122"; }

.fa.fa-star-half-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-star-half-o:before { content: "\f089"; }

.fa.fa-star-half-empty { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-star-half-empty:before { content: "\f089"; }

.fa.fa-star-half-full { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-star-half-full:before { content: "\f089"; }

.fa.fa-code-fork:before { content: "\f126"; }

.fa.fa-chain-broken:before { content: "\f127"; }

.fa.fa-shield:before { content: "\f3ed"; }

.fa.fa-calendar-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-calendar-o:before { content: "\f133"; }

.fa.fa-css3, .fa.fa-html5, .fa.fa-maxcdn { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-ticket:before { content: "\f3ff"; }

.fa.fa-minus-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-minus-square-o:before { content: "\f146"; }

.fa.fa-level-up:before { content: "\f3bf"; }

.fa.fa-level-down:before { content: "\f3be"; }

.fa.fa-pencil-square:before { content: "\f14b"; }

.fa.fa-external-link-square:before { content: "\f360"; }

.fa.fa-compass { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-caret-square-o-down { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-caret-square-o-down:before { content: "\f150"; }

.fa.fa-toggle-down { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-toggle-down:before { content: "\f150"; }

.fa.fa-caret-square-o-up { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-caret-square-o-up:before { content: "\f151"; }

.fa.fa-toggle-up { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-toggle-up:before { content: "\f151"; }

.fa.fa-caret-square-o-right { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-caret-square-o-right:before { content: "\f152"; }

.fa.fa-toggle-right { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-toggle-right:before { content: "\f152"; }

.fa.fa-eur:before, .fa.fa-euro:before { content: "\f153"; }

.fa.fa-gbp:before { content: "\f154"; }

.fa.fa-dollar:before, .fa.fa-usd:before { content: "\f155"; }

.fa.fa-inr:before, .fa.fa-rupee:before { content: "\f156"; }

.fa.fa-cny:before, .fa.fa-jpy:before, .fa.fa-rmb:before, .fa.fa-yen:before { content: "\f157"; }

.fa.fa-rouble:before, .fa.fa-rub:before, .fa.fa-ruble:before { content: "\f158"; }

.fa.fa-krw:before, .fa.fa-won:before { content: "\f159"; }

.fa.fa-bitcoin, .fa.fa-btc { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-bitcoin:before { content: "\f15a"; }

.fa.fa-file-text:before { content: "\f15c"; }

.fa.fa-sort-alpha-asc:before { content: "\f15d"; }

.fa.fa-sort-alpha-desc:before { content: "\f881"; }

.fa.fa-sort-amount-asc:before { content: "\f160"; }

.fa.fa-sort-amount-desc:before { content: "\f884"; }

.fa.fa-sort-numeric-asc:before { content: "\f162"; }

.fa.fa-sort-numeric-desc:before { content: "\f886"; }

.fa.fa-xing, .fa.fa-xing-square, .fa.fa-youtube, .fa.fa-youtube-play, .fa.fa-youtube-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-youtube-play:before { content: "\f167"; }

.fa.fa-adn, .fa.fa-bitbucket, .fa.fa-bitbucket-square, .fa.fa-dropbox, .fa.fa-flickr, .fa.fa-instagram, .fa.fa-stack-overflow { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-bitbucket-square:before { content: "\f171"; }

.fa.fa-tumblr, .fa.fa-tumblr-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-long-arrow-down:before { content: "\f309"; }

.fa.fa-long-arrow-up:before { content: "\f30c"; }

.fa.fa-long-arrow-left:before { content: "\f30a"; }

.fa.fa-long-arrow-right:before { content: "\f30b"; }

.fa.fa-android, .fa.fa-apple, .fa.fa-dribbble, .fa.fa-foursquare, .fa.fa-gittip, .fa.fa-gratipay, .fa.fa-linux, .fa.fa-skype, .fa.fa-trello, .fa.fa-windows { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-gittip:before { content: "\f184"; }

.fa.fa-sun-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-sun-o:before { content: "\f185"; }

.fa.fa-moon-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-moon-o:before { content: "\f186"; }

.fa.fa-pagelines, .fa.fa-renren, .fa.fa-stack-exchange, .fa.fa-vk, .fa.fa-weibo { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-arrow-circle-o-right { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-arrow-circle-o-right:before { content: "\f35a"; }

.fa.fa-arrow-circle-o-left { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-arrow-circle-o-left:before { content: "\f359"; }

.fa.fa-caret-square-o-left { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-caret-square-o-left:before { content: "\f191"; }

.fa.fa-toggle-left { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-toggle-left:before { content: "\f191"; }

.fa.fa-dot-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-dot-circle-o:before { content: "\f192"; }

.fa.fa-vimeo-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-try:before, .fa.fa-turkish-lira:before { content: "\f195"; }

.fa.fa-plus-square-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-plus-square-o:before { content: "\f0fe"; }

.fa.fa-openid, .fa.fa-slack, .fa.fa-wordpress { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-bank:before, .fa.fa-institution:before { content: "\f19c"; }

.fa.fa-mortar-board:before { content: "\f19d"; }

.fa.fa-delicious, .fa.fa-digg, .fa.fa-drupal, .fa.fa-google, .fa.fa-joomla, .fa.fa-pied-piper-alt, .fa.fa-pied-piper-pp, .fa.fa-reddit, .fa.fa-reddit-square, .fa.fa-stumbleupon, .fa.fa-stumbleupon-circle, .fa.fa-yahoo { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-spoon:before { content: "\f2e5"; }

.fa.fa-behance, .fa.fa-behance-square, .fa.fa-steam, .fa.fa-steam-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-automobile:before { content: "\f1b9"; }

.fa.fa-envelope-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-envelope-o:before { content: "\f0e0"; }

.fa.fa-deviantart, .fa.fa-soundcloud, .fa.fa-spotify { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-file-pdf-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-pdf-o:before { content: "\f1c1"; }

.fa.fa-file-word-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-word-o:before { content: "\f1c2"; }

.fa.fa-file-excel-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-excel-o:before { content: "\f1c3"; }

.fa.fa-file-powerpoint-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-powerpoint-o:before { content: "\f1c4"; }

.fa.fa-file-image-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-image-o:before { content: "\f1c5"; }

.fa.fa-file-photo-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-photo-o:before { content: "\f1c5"; }

.fa.fa-file-picture-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-picture-o:before { content: "\f1c5"; }

.fa.fa-file-archive-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-archive-o:before { content: "\f1c6"; }

.fa.fa-file-zip-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-zip-o:before { content: "\f1c6"; }

.fa.fa-file-audio-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-audio-o:before { content: "\f1c7"; }

.fa.fa-file-sound-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-sound-o:before { content: "\f1c7"; }

.fa.fa-file-video-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-video-o:before { content: "\f1c8"; }

.fa.fa-file-movie-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-movie-o:before { content: "\f1c8"; }

.fa.fa-file-code-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-file-code-o:before { content: "\f1c9"; }

.fa.fa-codepen, .fa.fa-jsfiddle, .fa.fa-vine { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-life-bouy, .fa.fa-life-ring { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-life-bouy:before { content: "\f1cd"; }

.fa.fa-life-buoy { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-life-buoy:before { content: "\f1cd"; }

.fa.fa-life-saver { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-life-saver:before { content: "\f1cd"; }

.fa.fa-support { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-support:before { content: "\f1cd"; }

.fa.fa-circle-o-notch:before { content: "\f1ce"; }

.fa.fa-ra, .fa.fa-rebel { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-ra:before { content: "\f1d0"; }

.fa.fa-resistance { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-resistance:before { content: "\f1d0"; }

.fa.fa-empire, .fa.fa-ge { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-ge:before { content: "\f1d1"; }

.fa.fa-git, .fa.fa-git-square, .fa.fa-hacker-news, .fa.fa-y-combinator-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-y-combinator-square:before { content: "\f1d4"; }

.fa.fa-yc-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-yc-square:before { content: "\f1d4"; }

.fa.fa-qq, .fa.fa-tencent-weibo, .fa.fa-wechat, .fa.fa-weixin { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-wechat:before { content: "\f1d7"; }

.fa.fa-send:before { content: "\f1d8"; }

.fa.fa-paper-plane-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-paper-plane-o:before { content: "\f1d8"; }

.fa.fa-send-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-send-o:before { content: "\f1d8"; }

.fa.fa-circle-thin { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-circle-thin:before { content: "\f111"; }

.fa.fa-header:before { content: "\f1dc"; }

.fa.fa-sliders:before { content: "\f1de"; }

.fa.fa-futbol-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-futbol-o:before { content: "\f1e3"; }

.fa.fa-soccer-ball-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-soccer-ball-o:before { content: "\f1e3"; }

.fa.fa-slideshare, .fa.fa-twitch, .fa.fa-yelp { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-newspaper-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-newspaper-o:before { content: "\f1ea"; }

.fa.fa-cc-amex, .fa.fa-cc-discover, .fa.fa-cc-mastercard, .fa.fa-cc-paypal, .fa.fa-cc-stripe, .fa.fa-cc-visa, .fa.fa-google-wallet, .fa.fa-paypal { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-bell-slash-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-bell-slash-o:before { content: "\f1f6"; }

.fa.fa-trash:before { content: "\f2ed"; }

.fa.fa-copyright { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-eyedropper:before { content: "\f1fb"; }

.fa.fa-area-chart:before { content: "\f1fe"; }

.fa.fa-pie-chart:before { content: "\f200"; }

.fa.fa-line-chart:before { content: "\f201"; }

.fa.fa-angellist, .fa.fa-ioxhost, .fa.fa-lastfm, .fa.fa-lastfm-square { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-cc { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-cc:before { content: "\f20a"; }

.fa.fa-ils:before, .fa.fa-shekel:before, .fa.fa-sheqel:before { content: "\f20b"; }

.fa.fa-meanpath { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-meanpath:before { content: "\f2b4"; }

.fa.fa-buysellads, .fa.fa-connectdevelop, .fa.fa-dashcube, .fa.fa-forumbee, .fa.fa-leanpub, .fa.fa-sellsy, .fa.fa-shirtsinbulk, .fa.fa-simplybuilt, .fa.fa-skyatlas { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-diamond { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-diamond:before { content: "\f3a5"; }

.fa.fa-intersex:before { content: "\f224"; }

.fa.fa-facebook-official { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-facebook-official:before { content: "\f09a"; }

.fa.fa-pinterest-p, .fa.fa-whatsapp { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-hotel:before { content: "\f236"; }

.fa.fa-medium, .fa.fa-viacoin, .fa.fa-y-combinator, .fa.fa-yc { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-yc:before { content: "\f23b"; }

.fa.fa-expeditedssl, .fa.fa-opencart, .fa.fa-optin-monster { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-battery-4:before, .fa.fa-battery:before { content: "\f240"; }

.fa.fa-battery-3:before { content: "\f241"; }

.fa.fa-battery-2:before { content: "\f242"; }

.fa.fa-battery-1:before { content: "\f243"; }

.fa.fa-battery-0:before { content: "\f244"; }

.fa.fa-object-group, .fa.fa-object-ungroup, .fa.fa-sticky-note-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-sticky-note-o:before { content: "\f249"; }

.fa.fa-cc-diners-club, .fa.fa-cc-jcb { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-clone, .fa.fa-hourglass-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hourglass-o:before { content: "\f254"; }

.fa.fa-hourglass-1:before { content: "\f251"; }

.fa.fa-hourglass-2:before { content: "\f252"; }

.fa.fa-hourglass-3:before { content: "\f253"; }

.fa.fa-hand-rock-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-rock-o:before { content: "\f255"; }

.fa.fa-hand-grab-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-grab-o:before { content: "\f255"; }

.fa.fa-hand-paper-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-paper-o:before { content: "\f256"; }

.fa.fa-hand-stop-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-stop-o:before { content: "\f256"; }

.fa.fa-hand-scissors-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-scissors-o:before { content: "\f257"; }

.fa.fa-hand-lizard-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-lizard-o:before { content: "\f258"; }

.fa.fa-hand-spock-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-spock-o:before { content: "\f259"; }

.fa.fa-hand-pointer-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-pointer-o:before { content: "\f25a"; }

.fa.fa-hand-peace-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-hand-peace-o:before { content: "\f25b"; }

.fa.fa-registered { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-chrome, .fa.fa-creative-commons, .fa.fa-firefox, .fa.fa-get-pocket, .fa.fa-gg, .fa.fa-gg-circle, .fa.fa-internet-explorer, .fa.fa-odnoklassniki, .fa.fa-odnoklassniki-square, .fa.fa-opera, .fa.fa-safari, .fa.fa-tripadvisor, .fa.fa-wikipedia-w { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-television:before { content: "\f26c"; }

.fa.fa-500px, .fa.fa-amazon, .fa.fa-contao { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-calendar-plus-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-calendar-plus-o:before { content: "\f271"; }

.fa.fa-calendar-minus-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-calendar-minus-o:before { content: "\f272"; }

.fa.fa-calendar-times-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-calendar-times-o:before { content: "\f273"; }

.fa.fa-calendar-check-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-calendar-check-o:before { content: "\f274"; }

.fa.fa-map-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-map-o:before { content: "\f279"; }

.fa.fa-commenting:before { content: "\f4ad"; }

.fa.fa-commenting-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-commenting-o:before { content: "\f4ad"; }

.fa.fa-houzz, .fa.fa-vimeo { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-vimeo:before { content: "\f27d"; }

.fa.fa-black-tie, .fa.fa-edge, .fa.fa-fonticons, .fa.fa-reddit-alien { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-credit-card-alt:before { content: "\f09d"; }

.fa.fa-codiepie, .fa.fa-fort-awesome, .fa.fa-mixcloud, .fa.fa-modx, .fa.fa-product-hunt, .fa.fa-scribd, .fa.fa-usb { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-pause-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-pause-circle-o:before { content: "\f28b"; }

.fa.fa-stop-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-stop-circle-o:before { content: "\f28d"; }

.fa.fa-bluetooth, .fa.fa-bluetooth-b, .fa.fa-envira, .fa.fa-gitlab, .fa.fa-wheelchair-alt, .fa.fa-wpbeginner, .fa.fa-wpforms { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-wheelchair-alt:before { content: "\f368"; }

.fa.fa-question-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-question-circle-o:before { content: "\f059"; }

.fa.fa-volume-control-phone:before { content: "\f2a0"; }

.fa.fa-asl-interpreting:before { content: "\f2a3"; }

.fa.fa-deafness:before, .fa.fa-hard-of-hearing:before { content: "\f2a4"; }

.fa.fa-glide, .fa.fa-glide-g { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-signing:before { content: "\f2a7"; }

.fa.fa-first-order, .fa.fa-google-plus-official, .fa.fa-pied-piper, .fa.fa-snapchat, .fa.fa-snapchat-ghost, .fa.fa-snapchat-square, .fa.fa-themeisle, .fa.fa-viadeo, .fa.fa-viadeo-square, .fa.fa-yoast { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-google-plus-official:before { content: "\f2b3"; }

.fa.fa-google-plus-circle { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-google-plus-circle:before { content: "\f2b3"; }

.fa.fa-fa, .fa.fa-font-awesome { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-fa:before { content: "\f2b4"; }

.fa.fa-handshake-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-handshake-o:before { content: "\f2b5"; }

.fa.fa-envelope-open-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-envelope-open-o:before { content: "\f2b6"; }

.fa.fa-linode { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-address-book-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-address-book-o:before { content: "\f2b9"; }

.fa.fa-vcard:before { content: "\f2bb"; }

.fa.fa-address-card-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-address-card-o:before { content: "\f2bb"; }

.fa.fa-vcard-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-vcard-o:before { content: "\f2bb"; }

.fa.fa-user-circle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-user-circle-o:before { content: "\f2bd"; }

.fa.fa-user-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-user-o:before { content: "\f007"; }

.fa.fa-id-badge { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-drivers-license:before { content: "\f2c2"; }

.fa.fa-id-card-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-id-card-o:before { content: "\f2c2"; }

.fa.fa-drivers-license-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-drivers-license-o:before { content: "\f2c2"; }

.fa.fa-free-code-camp, .fa.fa-quora, .fa.fa-telegram { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-thermometer-4:before, .fa.fa-thermometer:before { content: "\f2c7"; }

.fa.fa-thermometer-3:before { content: "\f2c8"; }

.fa.fa-thermometer-2:before { content: "\f2c9"; }

.fa.fa-thermometer-1:before { content: "\f2ca"; }

.fa.fa-thermometer-0:before { content: "\f2cb"; }

.fa.fa-bathtub:before, .fa.fa-s15:before { content: "\f2cd"; }

.fa.fa-window-maximize, .fa.fa-window-restore { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-times-rectangle:before { content: "\f410"; }

.fa.fa-window-close-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-window-close-o:before { content: "\f410"; }

.fa.fa-times-rectangle-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-times-rectangle-o:before { content: "\f410"; }

.fa.fa-bandcamp, .fa.fa-eercast, .fa.fa-etsy, .fa.fa-grav, .fa.fa-imdb, .fa.fa-ravelry { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-eercast:before { content: "\f2da"; }

.fa.fa-snowflake-o { font-family: "Font Awesome 5 Pro"; font-weight: 400; }

.fa.fa-snowflake-o:before { content: "\f2dc"; }

.fa.fa-superpowers, .fa.fa-wpexplorer { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

.fa.fa-cab:before { content: "\f1ba"; }

/* @todo upgrade whole site to v5.11.2, delete these */
/* These are areas where past css has overwritten default behavior... breaking the shims */
.fa.fa-fw.fa-tachometer, .fa.fa-sign-out, .fa.fa-clock-o { font-family: 'Font Awesome 5 Pro'; font-weight: 900; }

.fa-circle-check::before { content: '\f058'; }

.fa-circle-user::before { content: '\f2bd'; }

.fa-right-from-bracket::before { content: '\f2f5'; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-spinner-outer .spinner-inner { text-align: center; }

.fractal-spinner-outer .spinner-inner i.fa-spinner { color: #797d7f; display: inline-block; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-size: 30px; font-style: normal; font-weight: normal; }

@charset "UTF-8";
/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-button-link:hover { text-decoration: none; }

.fractal-button { border: none; border-radius: 4px; color: #fff; cursor: pointer; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-weight: 500; margin: 8px; padding: 0 16px; position: relative; text-align: center; }

.fractal-button:focus { outline: none; }

.fractal-button.bi-button-success-sm, .fractal-button.bi-button-primary-sm { font-size: 12px; font-weight: bold; }

.fractal-button.f-button-show-loading .fractal-spinner-outer { display: block; }

.fractal-button.f-button-show-loading .fractal-spinner-outer .spinner-inner { display: flex; }

.fractal-button.f-button-show-loading span { opacity: 0; }

.fractal-button .fractal-spinner-outer { display: none; }

.fractal-button .fractal-spinner-outer .spinner-inner { align-items: center; display: none; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; }

.fractal-button .fractal-spinner-outer .spinner-inner i.fa-spinner { color: #fff; font-size: 24px; }

.fractal-button.f-btn-disabled, .fractal-button[disabled] { cursor: not-allowed; opacity: 0.6; }

.fractal-button.f-btn-primary { background: #2ecc71; }

.fractal-button.f-btn-primary:hover { background: #1e8248; }

.fractal-button.f-btn-primary:focus-visible { background: #1e8248; }

.fractal-button.f-btn-primary:focus-visible:not(:active) { box-shadow: 0 0 0 2px #114929; }

.fractal-button.f-btn-primary:active, .fractal-button.f-btn-primary.f-btn-active, .fractal-button.f-btn-primary.f-btn-active:focus { background: #114929; box-shadow: none; }

.fractal-button.f-btn-primary.f-btn-disabled, .fractal-button.f-btn-primary[disabled] { background: rgba(46, 204, 113, 0.5); }

.fractal-button.f-btn-secondary { background: #3498db; }

.fractal-button.f-btn-secondary:hover { background: #217dbb; }

.fractal-button.f-btn-secondary:focus-visible { background: #217dbb; }

.fractal-button.f-btn-secondary:focus-visible:not(:active) { box-shadow: 0 0 0 2px #196090; }

.fractal-button.f-btn-secondary:active, .fractal-button.f-btn-secondary.f-btn-active, .fractal-button.f-btn-secondary.f-btn-active:focus { background: #196090; box-shadow: none; }

.fractal-button.f-btn-secondary.f-btn-disabled, .fractal-button.f-btn-secondary[disabled] { background: #3498db; }

.fractal-button.f-btn-standard { background: #fff; border: 1px solid #bdc3c7; color: #797d7f; }

.fractal-button.f-btn-standard:hover { background: #e7e9eb; border-color: #bdc3c7; }

.fractal-button.f-btn-standard:hover:visited { color: #797d7f; }

.fractal-button.f-btn-standard:active, .fractal-button.f-btn-standard.f-btn-active, .fractal-button.f-btn-standard.f-btn-active:focus, .fractal-button.f-btn-standard:focus-visible { border-color: transparent; color: #fff; }

.fractal-button.f-btn-standard:focus-visible { background: #bdc3c7; }

.fractal-button.f-btn-standard:focus-visible:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.fractal-button.f-btn-standard:active, .fractal-button.f-btn-standard.f-btn-active, .fractal-button.f-btn-standard.f-btn-active:focus { background: #999ea1; box-shadow: none; }

.fractal-button.f-btn-standard.f-btn-disabled, .fractal-button.f-btn-standard[disabled] { background: #f5f5f6; border: none; color: #bdc3c7; }

.fractal-button.f-btn-error { background: #fff; border: 1px solid #bdc3c7; color: #797d7f; border: 1px solid #e74c3c; color: #e74c3c; }

.fractal-button.f-btn-error:hover { background: #e7e9eb; border-color: #bdc3c7; }

.fractal-button.f-btn-error:hover:visited { color: #797d7f; }

.fractal-button.f-btn-error:active, .fractal-button.f-btn-error.f-btn-active, .fractal-button.f-btn-error.f-btn-active:focus, .fractal-button.f-btn-error:focus-visible { border-color: transparent; color: #fff; }

.fractal-button.f-btn-error:focus-visible { background: #bdc3c7; }

.fractal-button.f-btn-error:focus-visible:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.fractal-button.f-btn-error:active, .fractal-button.f-btn-error.f-btn-active, .fractal-button.f-btn-error.f-btn-active:focus { background: #999ea1; box-shadow: none; }

.fractal-button.f-btn-error.f-btn-disabled, .fractal-button.f-btn-error[disabled] { background: #f5f5f6; border: none; color: #bdc3c7; }

.fractal-button.f-btn-error:hover { border-color: #e74c3c; }

.fractal-button.f-btn-error:hover:visited { color: #e74c3c; }

.fractal-button.f-btn-subtle { background: #fff; color: #797d7f; }

.fractal-button.f-btn-subtle.f-btn-transparent { background: transparent; }

.fractal-button.f-btn-subtle:hover { background: #e7e9eb; }

.fractal-button.f-btn-subtle:focus, .fractal-button.f-btn-subtle:active, .fractal-button.f-btn-subtle.f-btn-active, .fractal-button.f-btn-subtle.f-btn-active:focus { color: #fff; }

.fractal-button.f-btn-subtle:focus-visible { background: #bdc3c7; }

.fractal-button.f-btn-subtle:focus-visible:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.fractal-button.f-btn-subtle:active, .fractal-button.f-btn-subtle.f-btn-active, .fractal-button.f-btn-subtle.f-btn-active:focus { background: #999ea1; box-shadow: none; }

.fractal-button.f-btn-subtle.f-btn-disabled, .fractal-button.f-btn-subtle[disabled] { color: #bdc3c7; }

.fractal-button.f-btn-subtle.f-btn-disabled:hover, .fractal-button.f-btn-subtle[disabled]:hover { background: transparent; }

.fractal-button.f-btn-kill { background: #e74c3c; }

.fractal-button.f-btn-kill:hover { background: #d04436; }

.fractal-button.f-btn-kill:focus-visible { background: #d04436; }

.fractal-button.f-btn-kill:focus-visible:not(:active) { box-shadow: 0 0 0 2px #943126; }

.fractal-button.f-btn-kill:active, .fractal-button.f-btn-kill.f-btn-active, .fractal-button.f-btn-kill.f-btn-active:focus { background: #943126; }

.fractal-button.f-btn-kill.f-btn-disabled, .fractal-button.f-btn-kill[disabled] { background: rgba(231, 76, 60, 0.5); }

.fractal-button.f-btn-timer { background: #e23259; }

.fractal-button.f-btn-timer:hover { background: #bf2043; }

.fractal-button.f-btn-timer:focus-visible { background: #bf2043; }

.fractal-button.f-btn-timer:focus-visible:not(:active) { box-shadow: 0 0 0 2px #9b0c2c; }

.fractal-button.f-btn-timer:active, .fractal-button.f-btn-timer.f-btn-active, .fractal-button.f-btn-timer.f-btn-active:focus { background: #9b0c2c; }

.fractal-button.f-btn-timer.f-btn-disabled, .fractal-button.f-btn-timer[disabled] { background: rgba(231, 76, 60, 0.2); }

.fractal-button.f-btn-link { background: transparent; }

.fractal-button.f-btn-link.f-btn-standard { color: #3498db; }

.fractal-button.f-btn-link span { border: 1px dashed transparent; display: inline-block; margin: -1px; padding: 1px; }

.fractal-button.f-btn-link:hover span, .fractal-button.f-btn-link:active span, .fractal-button.f-btn-link.f-btn-active span, .fractal-button.f-btn-link.f-btn-active:focus span { text-decoration: underline; }

.fractal-button.f-btn-link:focus-visible span { border: 1px dashed #3498db; text-decoration: underline; }

.fractal-button.f-btn-link.f-btn-disabled, .fractal-button.f-btn-link[disabled] { display: none; }

.fractal-button.f-btn-link-animated { background: none; color: #444647; font-weight: normal; }

.fractal-button.f-btn-link-animated.f-btn-sm { line-height: 32px; }

.fractal-button.f-btn-link-animated::after { border-bottom: solid 2px #444647; content: ''; display: block; margin-bottom: 10px; margin-top: -5px; transform: scaleX(0); transition: transform 0.2s ease-in-out; }

.fractal-button.f-btn-link-animated:hover { text-decoration: none; }

.fractal-button.f-btn-link-animated:hover::after { transform: scaleX(1); }

.fractal-button.f-btn-link-animated:active, .fractal-button.f-btn-link-animated.f-btn-active, .fractal-button.f-btn-link-animated.f-btn-active:focus, .fractal-button.f-btn-link-animated:focus { text-decoration: none; }

.fractal-button.f-btn-link-animated.active::after { transform: scaleX(1); }

.fractal-button.f-btn-info { background-color: rgba(0, 0, 0, 0.5); border: 0; color: #fff; font-weight: normal; }

.fractal-button.f-btn-info:hover { background: rgba(0, 0, 0, 0.25); }

.fractal-button.f-btn-info:focus { background: rgba(0, 0, 0, 0.9); outline: 0; }

.fractal-button.f-btn-info:active, .fractal-button.f-btn-info.f-btn-active, .fractal-button.f-btn-info.f-btn-active:focus { background: rgba(0, 0, 0, 0.9); }

.fractal-button.f-btn-xs { font-size: 14px; height: 24px; padding: 0 8px; }

.fractal-button.f-btn-xs.fractal-button-link { line-height: 22px; }

.fractal-button.f-btn-sm { font-size: 14px; height: 32px; padding: 0 16px; }

.fractal-button.f-btn-sm.fractal-button-link { line-height: 30px; }

.fractal-button.f-btn-md { font-size: 14px; height: 48px; padding: 0 20px; }

.fractal-button.f-btn-md.fractal-button-link { line-height: 46px; }

.fractal-button.f-btn-lg { font-size: 16px; height: 64px; padding: 0 24px; }

.fractal-button.f-btn-lg.fractal-button-link { line-height: 62px; }

.fractal-button.f-btn-combined-right { border-radius: 4px 0 0 4px; border-right: none; margin-right: 0; padding: 6px 16px; }

.fractal-submission-form-builder-v1 .f-question-wrapper .fractal-button.f-btn-combined-right { padding: 6px 16px; }

.fractal-button.f-btn-icon, .fractal-button.f-btn-icon-24, .fractal-button.f-btn-icon-32 { flex-direction: column; max-width: 32px; }

.fractal-button.f-btn-icon-24 { height: 24px; line-height: 24px; }

.fractal-button.f-btn-icon-32 { height: 32px; line-height: 32px; }

.fractal-button.f-close-btn-subtle { align-items: center; border-radius: 50%; cursor: pointer; display: flex; font-size: 16px; height: 24px; justify-content: center; margin: 10px; padding: 0; width: 24px; }

.fractal-button.f-close-btn-subtle:hover { background: #f5f5f6; }

.fractal-button.f-close-btn-subtle:focus { background: #bdc3c7; }

.fractal-button.angle-down::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.envelope::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-caret-down-after::after { padding-left: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-check::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-chevron-down-after::after { padding-left: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-ellipsis-h::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-ellipsis-h::before { padding-left: 8px; }

.fractal-button.fa-gear::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-gear::before { padding-left: 8px; }

.fractal-button.fa-expand::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-file-excel-o::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-file-image-o::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-filter::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-magic::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-minus-circle::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-sliders::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-star-o::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.fa-star-o::before { display: inline-block; transform: translateX(-7px); }

.fractal-button.fa-th-list::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.far-fa-copy::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.pencil-square::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.pencil-square-o::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.plus::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.plus-circle::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.rss::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.thumbs-o-down::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.thumbs-o-up::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.fractal-button.times::before { padding-right: 8px; content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.darkMode .fractal-button { align-items: center; color: #fff; display: flex; justify-content: center; }

.darkMode .fractal-button.f-btn-standard { background: #444647; border: 2px solid rgba(0, 0, 0, 0.2); }

.darkMode .fractal-button.f-btn-standard:hover, .darkMode .fractal-button.f-btn-standard:focus { background-color: rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: none; }

.darkMode .fractal-button.f-btn-standard:active, .darkMode .fractal-button.f-btn-standard.f-btn-active, .darkMode .fractal-button.f-btn-standard.f-btn-active:focus, .darkMode .fractal-button.f-btn-standard.f-selected { background-color: rgba(0, 0, 0, 0.2); border-color: transparent; }

.darkMode .fractal-button.f-btn-subtle { background: transparent; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal-header { align-items: center; background: none; border-bottom: 1px solid #f5f5f6; display: flex; flex: 0 0 auto; height: auto; justify-content: space-between; width: auto; }

.fractal-modal-header .close-buttons { display: inline-block; float: right; font-size: 18px; user-select: none; }

.fractal-modal-header .close-buttons .handle { cursor: pointer; }

.fractal-modal-header .close-buttons .fa-times { font-size: 18px; }

.fractal-modal-header .handle { float: right; font-size: 20px; margin: 7px 10px; opacity: 1; }

.fractal-modal-header .handle:hover { opacity: 0.8; }

.fractal-modal-header .modal-close { width: 120px; }

.fractal-modal-header ~ .modal-close { padding: 8px; }

.fractal-modal-header .title { color: #444647; display: inline-block; font-size: 18px; font-weight: 500; line-height: inherit; margin-left: 0; padding: 8px 16px; }

.fractal-modal-header .close-button { align-items: center; border-radius: 50%; cursor: pointer; display: flex; height: 24px; justify-content: center; margin: 0 16px; width: 24px; }

.fractal-modal-header .close-button:hover { background: #f5f5f6; }

.fractal-modal-header .close-button:focus { background: #bdc3c7; }

.fractal-modal-header .close-button img { height: 16px; width: 16px; }

.fractal-modal-header .fa-times { color: #797d7f; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { display: flex; flex-direction: column; height: 100%; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { flex-grow: 1; overflow: auto; padding: 24px; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .fractal-modal-header { font-size: 16px; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { align-items: center; background: none; border-top: 1px solid #f5f5f6; display: flex; flex-shrink: 0; justify-content: flex-end; padding: 12px 16px; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer.f-justified-footer { justify-content: space-between; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal .f-modal-design-titleHeaderBody-v1 { display: flex; flex-direction: column; height: 100%; max-height: 400px; }

.ReactModalPortal .f-modal-design-titleHeaderBody-v1 .f-modal-body { flex-grow: 1; overflow: auto; }

.ReactModalPortal .f-modal-design-titleHeaderBody-v1 .fractal-modal-header { font-size: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal { background-color: rgba(0, 0, 0, 0.5); font-family: Lato, 'Open Sans', arial, sans serif; height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; z-index: 2147483589; }

.ReactModalPortal * { box-sizing: border-box; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; overflow: hidden; }

.ReactModalPortal .ReactModal__Overlay { align-items: center; display: flex; height: 100vh; justify-content: center; width: 100%; }

@media (min-width: 1px) and (max-width: 767px) { .ReactModalPortal .ReactModal__Overlay .ReactModal__Content { height: 100%; left: 0; right: 0; top: 0; width: 100%; } }

.ReactModalPortal .ReactModal__Content { opacity: 0; }

.ReactModalPortal .ReactModal__Content.ReactModal__Content--after-open { opacity: 1; transition: opacity 150ms; }

.ReactModalPortal .ReactModal__Content.ReactModal__Content--before-close { opacity: 0; }

.ReactModalPortal.f-modal-defaults .ReactModal__Content { border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); width: 400px; }

.ReactModalPortal.f-modal-defaults .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.ReactModalPortal.f-modal-defaults .f-modal-body { padding: 24px 24px 32px; }

.ReactModalPortal.f-modal-defaults .f-modal-body p { margin-bottom: 12px; }

.ReactModalPortal.f-modal-defaults .f-modal-body p:last-child { margin-bottom: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.flyover-component-v1 { color: #797d7f; min-width: 336px; padding: 20px; width: 336px; }

.flyover-component-v1 * { box-sizing: border-box; }

.flyover-component-v1 .flyover-user-photo-container { display: inline-block; margin: 0 16px 16px 0; position: relative; vertical-align: top; }

.flyover-component-v1 .flyover-user-photo-container::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.flyover-component-v1 .flyover-user-photo-container div { align-items: center; background: #1abc9c; border-radius: 50%; color: #fff; display: inline-flex; height: 64px; justify-content: center; text-align: center; text-decoration: none; width: 64px; }

.flyover-component-v1 .flyover-user-photo-container span { display: inline-block; font-size: 20px; font-weight: 600; }

.flyover-component-v1 .flyover-user-photo { border-radius: 50%; height: 48px; }

.flyover-component-v1 ul.flyover-user-info, .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; height: 48px; justify-content: center; list-style-type: none; margin-bottom: 24px; position: relative; text-align: left; width: 206px; }

#view-idea-main-content .flyover-component-v1 ul.flyover-user-info, #view-idea-main-content .flyover-component-v1 .flyover-user-info { margin-left: 0; padding-left: 0; }

.fractal-widget-highlights .f-activity-items .flyover-component-v1 ul.flyover-user-info, .fractal-widget-highlights .f-activity-items .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; justify-content: center; }

.flyover-component-v1 ul.flyover-user-info li, .flyover-component-v1 .flyover-user-info li { display: block; }

.flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; cursor: pointer; display: block; font-size: 18px; font-weight: normal; line-height: 28px; max-width: 206px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 .flyover-user-info .flyover-user-name a { font-size: 18px; }

.f-activity-items .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .f-activity-items .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; font-size: 18px; }

.flyover-component-v1 .flyover-user-job-title, .flyover-component-v1 .flyover-user-location { font-size: 14px; line-height: 20px; }

.flyover-component-v1 .flyover-links { display: flex; }

.flyover-component-v1 .flyover-links .fractal-button { flex: 1; }

.flyover-component-v1 .flyover-link-item { margin: 0; }

.flyover-component-v1 .flyover-link-item + .flyover-link-item { margin-left: 16px; }

.flyover-component-v1 .flyover-link-item.hidden { display: none; }

.flyover-component-v1 .flyover-link-item.fractal-button i.fa-spinner { color: #797d7f; font-size: 16px; }

.__react_component_tooltip .flyover-component-v1 { padding: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.flyover-component-v1 { color: #797d7f; min-width: 336px; padding: 20px; width: 336px; }

.flyover-component-v1 * { box-sizing: border-box; }

.flyover-component-v1 .flyover-user-photo-container { display: inline-block; margin: 0 16px 16px 0; position: relative; vertical-align: top; }

.flyover-component-v1 .flyover-user-photo-container::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.flyover-component-v1 .flyover-user-photo-container div { align-items: center; background: #1abc9c; border-radius: 50%; color: #fff; display: inline-flex; height: 64px; justify-content: center; text-align: center; text-decoration: none; width: 64px; }

.flyover-component-v1 .flyover-user-photo-container span { display: inline-block; font-size: 20px; font-weight: 600; }

.flyover-component-v1 .flyover-user-photo { border-radius: 50%; height: 48px; }

.flyover-component-v1 ul.flyover-user-info, .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; height: 48px; justify-content: center; list-style-type: none; margin-bottom: 24px; position: relative; text-align: left; width: 206px; }

#view-idea-main-content .flyover-component-v1 ul.flyover-user-info, #view-idea-main-content .flyover-component-v1 .flyover-user-info { margin-left: 0; padding-left: 0; }

.fractal-widget-highlights .f-activity-items .flyover-component-v1 ul.flyover-user-info, .fractal-widget-highlights .f-activity-items .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; justify-content: center; }

.flyover-component-v1 ul.flyover-user-info li, .flyover-component-v1 .flyover-user-info li { display: block; }

.flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; cursor: pointer; display: block; font-size: 18px; font-weight: normal; line-height: 28px; max-width: 206px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 .flyover-user-info .flyover-user-name a { font-size: 18px; }

.f-activity-items .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .f-activity-items .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; font-size: 18px; }

.flyover-component-v1 .flyover-user-job-title, .flyover-component-v1 .flyover-user-location { font-size: 14px; line-height: 20px; }

.flyover-component-v1 .flyover-links { display: flex; }

.flyover-component-v1 .flyover-links .fractal-button { flex: 1; }

.flyover-component-v1 .flyover-link-item { margin: 0; }

.flyover-component-v1 .flyover-link-item + .flyover-link-item { margin-left: 16px; }

.flyover-component-v1 .flyover-link-item.hidden { display: none; }

.flyover-component-v1 .flyover-link-item.fractal-button i.fa-spinner { color: #797d7f; font-size: 16px; }

.__react_component_tooltip .flyover-component-v1 { padding: 12px; }

.member-image-v1 { cursor: pointer; display: inline-block; margin-right: 3px; position: relative; }

.member-image-v1::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.member-image-v1 .__react_component_tooltip.place-top.show { margin-top: -5px; }

.member-image-v1 .__react_component_tooltip.place-bottom.show { margin-top: 5px; }

.member-image-v1 .member-img { border-radius: 50%; height: 30px; }

.member-image-v1 .member-initial { border-radius: 50%; color: #fff; display: block; font-size: 12px; font-weight: 600; height: 32px; position: relative; text-align: center; text-decoration: none; width: 32px; }

.member-image-v1 .member-initial::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.member-image-v1 .member-initial span { display: inline-block; position: relative; top: 50%; transform: translateY(-50%); }

.member-image-v1:hover { text-decoration: none; }

.member-image-v1 .__react_component_tooltip { border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); margin-top: 4px; opacity: 1; pointer-events: auto; }

.member-image-v1 .__react_component_tooltip.show { opacity: 1; }

.member-image-v1 .__react_component_tooltip.place-bottom { margin-top: inherit; }

.member-image-v1 .__react_component_tooltip.place-right { margin-left: inherit; }

.member-image-v1 .__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.member-image-v1 .__react_component_tooltip.type-light.place-top::before { border-top: 8px solid rgba(0, 0, 0, 0.1); }

@media (max-width: 1000px) { .member-image-v1 .__react_component_tooltip { display: none; } }

.f-member-flyover-tooltip:hover { opacity: 1; visibility: visible; }

.f-member-flyover-tooltip.__react_component_tooltip { box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); opacity: 1; pointer-events: auto; }

.f-member-flyover-tooltip.__react_component_tooltip.show { opacity: 1; }

.f-member-flyover-tooltip.__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.f-member-flyover-tooltip.__react_component_tooltip.type-light.place-top::before { border-top: 8px solid rgba(0, 0, 0, 0.1); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-member-typeahead { width: 100%; }

.fractal-member-typeahead .react-autosuggest__container { position: relative; width: 100%; }

.fractal-member-typeahead .react-autosuggest__input { border: 1px solid #bdc3c7; border-radius: 4px; color: #444647; font-size: 12px; font-weight: 300; height: 32px; padding: 0 5px; width: 100%; /* Chrome/Opera/Safari */ /* Firefox 19+ */ /* IE 10+ */ /* Firefox 18- */ }

.fractal-member-typeahead .react-autosuggest__input::-webkit-input-placeholder { color: #999ea1; }

.fractal-member-typeahead .react-autosuggest__input::-moz-placeholder { color: #999ea1; }

.fractal-member-typeahead .react-autosuggest__input:-ms-input-placeholder { color: #999ea1; }

.fractal-member-typeahead .react-autosuggest__input:-moz-placeholder { color: #999ea1; }

.fractal-member-typeahead .react-autosuggest__input--focused { outline: none; }

.fractal-member-typeahead .react-autosuggest__suggestions-container { display: none; width: 100%; }

.fractal-member-typeahead .react-autosuggest__suggestions-container--open { background-color: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); display: block; font-size: 12px; font-weight: 300; max-height: 150px; overflow: auto; position: absolute; z-index: 2; }

.fractal-member-typeahead .react-autosuggest__suggestions-list { list-style-type: none; margin: 0; padding: 0; }

.fractal-member-typeahead .react-autosuggest__suggestion { cursor: pointer; padding: 3px 10px; }

.fractal-member-typeahead .react-autosuggest__suggestion .member-image-v1 { margin-right: 8px; vertical-align: middle; }

.fractal-member-typeahead .react-autosuggest__suggestion .member-image-v1 .member-img, .fractal-member-typeahead .react-autosuggest__suggestion .member-image-v1 .member-initial { height: 28px; width: 28px; }

.fractal-member-typeahead .react-autosuggest__suggestion .suggestion-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-member-typeahead .react-autosuggest__suggestion--highlighted { background-color: #d5d9db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-modal-private-message-v1-portal .f-recipient-typeahead .react-autosuggest__suggestions-container--open { top: 102px; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; width: 400px; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-private-message-v1.f-body { padding: 15px; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-private-message-v1.f-body .f-recipient { font-weight: bold; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-private-message-v1.f-body input { border: 1px solid #bdc3c7; border-radius: 3px; height: 24px; margin: 10px 0; padding: 5px; width: 100%; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-private-message-v1.f-body .f-message-body { border: 1px solid #bdc3c7; color: #1e1f20; font-size: 11px; height: 120px; margin-bottom: -2px; margin-left: 0; margin-top: 10px; padding: 2px; width: 100%; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-private-message-v1.f-body .f-validation-error { border: 1px solid #f00; }

.ReactModalPortal.f-modal-private-message-v1-portal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer .f-submit-btn { margin-right: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-deleteUserModal * { box-sizing: border-box; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body p { font-size: 14px; margin: 0 0 12px; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body span { font-size: 14px; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body .f-delete-user-stats { list-style-type: disc; padding-bottom: 25px; padding-left: 60px; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body .f-delete-user-stats li { font-size: 14px; padding-bottom: 5px; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body .f-delete-user-checkbox { align-items: center; display: flex; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body .f-delete-user-checkbox > span { margin-left: 8px; }

.fractal-widget-deleteUserModal .f-delete-user-modal-body .f-delete-user-checkbox input { margin-top: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
#schedule-recurring-report-list * { box-sizing: border-box; }

#schedule-recurring-report-list .f-report-list-container { color: #444647; display: flex; flex-direction: column; font-size: 14px; line-height: 2.4rem; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-row { display: flex; margin-bottom: 10px; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-row .f-report-list-col, #schedule-recurring-report-list .f-report-list-container .f-report-list-row .f-report-list-col div { margin-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 220px; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-row .f-report-link { color: #3498db; cursor: pointer; text-decoration: none; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-row .f-report-list-col-del button { margin: 0; padding: 5px; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-header { border-bottom: 1px solid #e7e9eb; font-weight: 700; }

#schedule-recurring-report-list .f-report-list-container .f-report-list-header .f-report-list-col { margin-right: 0; }

#schedule-recurring-report-list .f-report-list-container.no-schedule { font-size: 12px; }

.fractal-widget-schedule-recurring-reportList .f-modal-body #f-schedule-recurring-modal-delete-body { padding: 20px; }

.fractal-widget-schedule-recurring-reportList #f-modal-submit { background: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-recently-viewed-list li { align-items: center; display: flex; padding: 4px 16px; position: relative; }

.fractal-recently-viewed-list li:hover { background: #e7e9eb; }

.fractal-recently-viewed-list li a { color: #444647; display: flex; font-weight: normal; }

.fractal-recently-viewed-list li a:visited, .fractal-recently-viewed-list li a:link { color: #444647; }

.fractal-recently-viewed-list li a:hover { text-decoration: none; }

.fractal-recently-viewed-list li a .item-image { border-radius: 4px; height: 32px; margin-right: 8px; width: 32px; }

.fractal-recently-viewed-list li a .item-right { line-height: 16px; overflow: hidden; width: 296px; }

.fractal-recently-viewed-list li a .item-right .item-title { display: block; font-size: 12px; font-weight: 600; margin: 0; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }

.fractal-recently-viewed-list li a .item-right .item-type { color: #999ea1; font-size: 12px; }

.fractal-recently-viewed-list li a .member-image-v1 { margin-right: 8px; }

.fractal-recently-viewed-list li .admin-buttons { align-items: center; display: flex; height: 40px; position: absolute; right: 20px; top: 0; }

.fractal-recently-viewed-list li .admin-buttons a { align-items: center; background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; display: flex; font-size: 18px; height: 32px; justify-content: center; width: 32px; }

.fractal-recently-viewed-list li .admin-buttons a:not(:last-child) { margin-right: 6px; }

.fractal-recently-viewed-list li .admin-buttons a:focus, .fractal-recently-viewed-list li .admin-buttons a:hover { background: #d5d9db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-recently-viewed-list { background: #fff; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); box-sizing: border-box; color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; line-height: normal; max-height: 0; opacity: 0; overflow-x: hidden; overflow-y: auto; transition: opacity 0.2s ease-in-out; width: 380px; }

.fractal-recently-viewed-list * { box-sizing: border-box; }

.fractal-recently-viewed-list .f-recent-view-list-title { color: #999ea1; font-size: 14px; font-weight: 700; line-height: 20px; margin: 0 16px; padding: 16px 0 12px; text-transform: uppercase; }

.fractal-recently-viewed-list.f-hide { max-height: 0; opacity: 0; }

.fractal-recently-viewed-list.f-show { max-height: 468px; opacity: 1; position: relative; }

.fractal-recently-viewed-list .empty-state { align-items: center; display: none; flex-direction: column; height: 300px; justify-content: center; }

.fractal-recently-viewed-list .empty-state i { font-size: 32px; margin-bottom: 6px; }

.fractal-recently-viewed-list .empty-state span { font-size: 14px; font-weight: 600; }

.fractal-recently-viewed-list .empty-state.f-show { display: flex; }

.fractal-recently-viewed-list .empty-state .spinner-inner > .fa-spinner { position: static; }

.fractal-recently-viewed-list .bottomOverlay { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)); bottom: 0; height: 24px; position: absolute; width: 380px; }

.fractal-recently-viewed-list .recent-list { display: inline-block; margin: 0; max-height: 418px; overflow-y: auto; padding-left: 0; width: 380px; }

.fractal-recently-viewed-list .recent-list li { align-items: center; display: flex; padding: 4px 16px; position: relative; }

.fractal-recently-viewed-list .recent-list li:hover { background: #e7e9eb; }

.fractal-recently-viewed-list .recent-list li a { color: #444647; display: flex; font-weight: normal; }

.fractal-recently-viewed-list .recent-list li a:visited, .fractal-recently-viewed-list .recent-list li a:link { color: #444647; }

.fractal-recently-viewed-list .recent-list li a:hover { text-decoration: none; }

.fractal-recently-viewed-list .recent-list li a .item-image { border-radius: 4px; height: 32px; margin-right: 8px; width: 32px; }

.fractal-recently-viewed-list .recent-list li a .item-right { line-height: 15px; overflow: hidden; width: 296px; }

.fractal-recently-viewed-list .recent-list li a .item-right .item-title { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-recently-viewed-list .recent-list li a .item-right .item-type { font-size: 12px; }

.fractal-recently-viewed-list .recent-list li a .member-image-v1 { margin-right: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-input input { background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; color: #444647; display: block; font-size: 14px; line-height: 1.42857; max-height: 32px; padding: 6px 12px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.fractal-input input:focus { border-color: #1abc9c; box-shadow: none !important; outline: none !important; }

.fractal-input input.warning-border { border: 1px solid #e74c3c; }

.fractal-input input::placeholder { color: #999ea1; }

.fractal-input input.f-input-truncate-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-input.f-input-search { position: relative; }

.fractal-input.f-input-search input { padding-left: 28px; }

.fractal-input.f-input-search::before { content: '\F002'; display: block; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-size: 14px; font-weight: normal; left: 9px; position: absolute; top: 7px; }

.fractal-input label { font-weight: normal; margin-right: 10px; }

.fractal-input .fractal-input-pre { display: inline-block; left: 12px; position: relative; width: 0; }

.fractal-input .fractal-input-post { display: inline-block; position: relative; right: 12px; width: 0; }

.fractal-input.input-xs input { width: 75px; }

.fractal-input.input-sm input { width: 100px; }

.fractal-input.input-md input { width: 200px; }

.fractal-input.input-lg input { width: 100%; }

.darkMode .fractal-input input { background-color: rgba(0, 0, 0, 0.2); border-color: transparent; color: #fff; }

.darkMode .filter-inline-input { color: #fff; }

@charset "UTF-8";
/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-input.fa-search input { padding-left: 27px; }

.fractal-input.fa-search::before { content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; margin-top: 10px; position: absolute; padding-left: 10px; }

.fractal-input.fa-robot input { padding-left: 27px; }

.fractal-input.fa-robot::before { content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; margin-top: 10px; position: absolute; padding-left: 10px; }

.fractal-input.fa-robot input { padding-left: 36px; }

.fractal-input.fa-robot::before { font-family: FontAwesome5_Solid; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-placeholder-v1 * { box-sizing: border-box; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-placeholder-v1 .f-placeholder-row { display: flex; margin: 10px 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-placeholder-v1 { /* @todo update to accept more colors */ }

.f-placeholder-v1 .f-placeholder-circle, .f-placeholder-v1 .f-placeholder-rect { background: #d5d9db; }

.f-placeholder-v1 .f-placeholder-circle { border-radius: 50%; }

.f-placeholder-v1 .f-placeholder-rect { height: 100%; }

.f-placeholder-v1 .f-animate-placeholder-gray { background: linear-gradient(to right, #f5f5f6 8%, #d5d9db 18%, #f5f5f6 33%); position: relative; z-index: 0; }

.f-placeholder-v1 .f-animate-placeholder-gray { animation: 1s ease-in-out infinite forwards bg-position; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-upload-files-link { position: relative; }

.fractal-fileupload-v2 .f-upload-files-link * { box-sizing: border-box; }

.fractal-fileupload-v2 .f-upload-files-link .f-upload-link { height: 0.1px; opacity: 0; overflow: hidden; position: absolute; width: 0.1px; z-index: -1; }

.fractal-fileupload-v2 .f-upload-files-link .f-upload-link:focus + .f-upload-link-label .fa, .fractal-fileupload-v2 .f-upload-files-link .f-upload-link:focus-within + .f-upload-link-label .fa { background-color: #f5f5f6; }

.fractal-fileupload-v2 .f-upload-files-link .f-upload-link-label { cursor: pointer; display: inline-block; font-size: 12px; font-weight: 400; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-dropzone-wrapper { cursor: pointer; height: 100px; width: 100%; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone { align-items: center; background-color: #fff; border: 2px #797d7f dashed; border-radius: 8px; box-sizing: border-box; color: #444647; display: flex; flex-direction: column; height: 100%; justify-content: center; width: 100%; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone.drag-active { background: #f5f5f6; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone .f-dropzone-dnd-text { font-weight: bold; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone .f-dropzone-browse-text { font-weight: bold; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone input { position: absolute; }

.fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone label { padding-left: 16px; }

#main_idea_container .f-dropzone-browse-text { font-size: inherit; }

#main_idea_container .f-dropzone-browse-text:hover, #main_idea_container .f-dropzone-browse-text:active, #main_idea_container .f-dropzone-browse-text:focus { text-decoration: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
@keyframes closeWindow { 0% { opacity: 1; }
  100% { opacity: 0; } }

.ril__outer { background-color: rgba(0, 0, 0, 0.85); outline: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; height: 100%; -ms-content-zooming: none; -ms-user-select: none; -ms-touch-select: none; touch-action: none; }

.ril__outerClosing { opacity: 0; }

.ril__inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.ril__image, .ril__imagePrev, .ril__imageNext { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: none; -ms-content-zooming: none; -ms-user-select: none; -ms-touch-select: none; touch-action: none; }

.ril__imageDiscourager { background-repeat: no-repeat; background-position: center; background-size: contain; }

.ril__navButtons { border: none; position: absolute; top: 0; bottom: 0; width: 20px; height: 34px; padding: 40px 30px; margin: auto; cursor: pointer; opacity: 0.7; }

.ril__navButtons:hover { opacity: 1; }

.ril__navButtons:active { opacity: 0.7; }

.ril__navButtonPrev { left: 0; background: rgba(0, 0, 0, 0.2) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==) no-repeat center; }

.ril__navButtonNext { right: 0; background: rgba(0, 0, 0, 0.2) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+) no-repeat center; }

.ril__downloadBlocker { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); background-size: cover; }

.ril__caption, .ril__toolbar { background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; }

.ril__caption { bottom: 0; max-height: 150px; overflow: auto; }

.ril__captionContent { padding: 10px 20px; color: #fff; }

.ril__toolbar { top: 0; height: 50px; }

.ril__toolbarSide { height: 50px; margin: 0; }

.ril__toolbarLeftSide { padding-left: 20px; padding-right: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

.ril__toolbarRightSide { padding-left: 0; padding-right: 20px; flex: 0 0 auto; }

.ril__toolbarItem { display: inline-block; line-height: 50px; padding: 0; color: #fff; font-size: 120%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ril__toolbarItemChild { vertical-align: middle; }

.ril__builtinButton { width: 40px; height: 35px; cursor: pointer; border: none; opacity: 0.7; }

.ril__builtinButton:hover { opacity: 1; }

.ril__builtinButton:active { outline: none; }

.ril__builtinButtonDisabled { cursor: default; opacity: 0.5; }

.ril__builtinButtonDisabled:hover { opacity: 0.5; }

.ril__closeButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat center; }

.ril__zoomInButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+) no-repeat center; }

.ril__zoomOutButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=) no-repeat center; }

.ril__outerAnimating { animation-name: closeWindow; }

@keyframes pointFade { 0%, 19.999%, 100% { opacity: 0; }
  20% { opacity: 1; } }

.ril__loadingCircle { width: 60px; height: 60px; position: relative; }

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

.ril__loadingCirclePoint::before { content: ''; display: block; margin: 0 auto; width: 11%; height: 30%; background-color: #fff; border-radius: 30%; animation: pointFade 800ms infinite ease-in-out both; }

.ril__loadingCirclePoint:nth-of-type(1) { transform: rotate(0deg); }

.ril__loadingCirclePoint:nth-of-type(7) { transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(1)::before, .ril__loadingCirclePoint:nth-of-type(7)::before { animation-delay: -800ms; }

.ril__loadingCirclePoint:nth-of-type(2) { transform: rotate(30deg); }

.ril__loadingCirclePoint:nth-of-type(8) { transform: rotate(210deg); }

.ril__loadingCirclePoint:nth-of-type(2)::before, .ril__loadingCirclePoint:nth-of-type(8)::before { animation-delay: -666ms; }

.ril__loadingCirclePoint:nth-of-type(3) { transform: rotate(60deg); }

.ril__loadingCirclePoint:nth-of-type(9) { transform: rotate(240deg); }

.ril__loadingCirclePoint:nth-of-type(3)::before, .ril__loadingCirclePoint:nth-of-type(9)::before { animation-delay: -533ms; }

.ril__loadingCirclePoint:nth-of-type(4) { transform: rotate(90deg); }

.ril__loadingCirclePoint:nth-of-type(10) { transform: rotate(270deg); }

.ril__loadingCirclePoint:nth-of-type(4)::before, .ril__loadingCirclePoint:nth-of-type(10)::before { animation-delay: -400ms; }

.ril__loadingCirclePoint:nth-of-type(5) { transform: rotate(120deg); }

.ril__loadingCirclePoint:nth-of-type(11) { transform: rotate(300deg); }

.ril__loadingCirclePoint:nth-of-type(5)::before, .ril__loadingCirclePoint:nth-of-type(11)::before { animation-delay: -266ms; }

.ril__loadingCirclePoint:nth-of-type(6) { transform: rotate(150deg); }

.ril__loadingCirclePoint:nth-of-type(12) { transform: rotate(330deg); }

.ril__loadingCirclePoint:nth-of-type(6)::before, .ril__loadingCirclePoint:nth-of-type(12)::before { animation-delay: -133ms; }

.ril__loadingCirclePoint:nth-of-type(7) { transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(13) { transform: rotate(360deg); }

.ril__loadingCirclePoint:nth-of-type(7)::before, .ril__loadingCirclePoint:nth-of-type(13)::before { animation-delay: 0ms; }

.ril__loadingContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.ril__imagePrev .ril__loadingContainer, .ril__imageNext .ril__loadingContainer { display: none; }

.ril__errorContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; color: #fff; }

.ril__imagePrev .ril__errorContainer, .ril__imageNext .ril__errorContainer { display: none; }

.ril__loadingContainer__icon { color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

.ReactModalPortal .ReactModal__Overlay { z-index: 100003 !important; }

.f-lightbox-custom-display { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }

.f-lightbox-custom-display .f-lightbox-file-column { align-items: center; color: #fff; display: flex; flex-direction: column; font-size: 14px; }

.f-lightbox-custom-display .f-lightbox-file-icon { font-size: 36px; }

.f-lightbox-custom-display .f-lightbox-file-name { margin-top: 16px; }

.f-lightbox-custom-display .f-lightbox-file-size { margin-bottom: 16px; }

.f-lightbox-custom-display .fractal-button { color: #fff; line-height: 32px; text-decoration: none; }

.fractal-lightbox-v2.ril__outer { background-color: rgba(0, 0, 0, 0.6); }

.fractal-lightbox-v2.ril__outer .ril__toolbarTop { align-items: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); font-size: 18px; height: 96px; }

.fractal-lightbox-v2.ril__outer .ril__toolbarBottom { align-items: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); bottom: 0; height: 96px; justify-content: center; top: auto; width: 100%; }

.fractal-lightbox-v2.ril__outer .ril__toolbarItemChild { font-size: 18px; }

.fractal-lightbox-v2.ril__outer .ril__toolbarItemChild:active i { transform: scale(0.9); }

.fractal-lightbox-v2.ril__outer .ril__builtinButton { background: transparent; color: #fff; }

.fractal-lightbox-v2.ril__outer .ril__navButtons { align-items: center; background: inherit; border-radius: 4px; color: #fff; display: flex; font-size: 36px; height: 48px; justify-content: center; line-height: 48px; padding: 0; text-align: center; top: 45px; width: 48px; }

.fractal-lightbox-v2.ril__outer .ril__navButtons:hover { background-color: rgba(0, 0, 0, 0.4); }

.fractal-lightbox-v2.ril__outer .ril__navButtons:focus { background-color: rgba(0, 0, 0, 0.6); }

.fractal-lightbox-v2.ril__outer .ril__navButtons:active { background-color: rgba(0, 0, 0, 0.8); }

.fractal-lightbox-v2.ril__outer .ril__toolbarLeftSide { padding-left: 24px; }

.fractal-lightbox-v2.ril__outer .ril__toolbarRightSide { padding-right: 24px; }

.fractal-lightbox-v2.ril__outer .ril__navButtonNext { margin-right: 24px; }

.fractal-lightbox-v2.ril__outer .ril__navButtonPrev { margin-left: 24px; }

.fractal-lightbox-v2.ril__outer .ril__navButtonPrev, .fractal-lightbox-v2.ril__outer .ril__navButtonNext { background: transparent; font-weight: 500; }

.fractal-lightbox-v2.ril__outer .ril__navButtonPrev:active i, .fractal-lightbox-v2.ril__outer .ril__navButtonNext:active i { transform: scale(0.9); }

.fractal-lightbox-v2.ril__outer .f-ril-topbarButton { height: 50px; text-decoration: none; }

.fractal-lightbox-v2.ril__outer .fa-download { font-size: 24px; margin: 0 16px 4px; }

.fractal-lightbox-v2.ril__outer .fa-search-minus, .fractal-lightbox-v2.ril__outer .fa-search-plus, .fractal-lightbox-v2.ril__outer .fa-times { font-size: 32px; }

.fractal-lightbox-v2.ril__outer .f-zoom-level { color: #fff; font-size: 18px; margin: 0 16px; }

.fractal-lightbox-v2.ril__outer .fa-image-polaroid { cursor: pointer; font-size: 24px; font-weight: 100; height: 50px; opacity: 0.7; padding-top: 12px; width: 32px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-color-picker { position: absolute; z-index: 1000; }

.fractal-color-picker .block-picker { border: 1px solid rgba(0, 0, 0, 0.25) !important; }

.fractal-color-picker .alpha { height: 10px; position: relative; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-dropdownPopout { position: relative; }

.fractal-dropdownPopout > button { display: flex; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; }

.fractal-dropdownPopout .fractal-dropdownPopout-popout-container { background-color: #fff; border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.35); cursor: default; display: inline-block; opacity: 0; padding: 0 8px 8px; position: absolute; right: 0; transition: opacity 0.2s ease-in; visibility: hidden; }

.fractal-dropdownPopout .fractal-dropdownPopout-popout-container.open { opacity: 1; visibility: visible; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-checkbox { align-items: center; display: flex; }

.f-checkbox .f-checkbox-wrapper { align-items: center; display: flex; height: 24px; margin: 0; }

.f-checkbox .f-checkbox-wrapper * { box-sizing: border-box; }

.f-checkbox .f-checkbox-wrapper .f-checkbox-outer { align-items: center; background-color: #bdc3c7; border-radius: 4px; cursor: pointer; display: flex; height: 20px; justify-content: center; width: 20px; }

.f-checkbox .f-checkbox-wrapper .f-checkbox-outer:hover { box-shadow: 0 0 0 8px #f5f5f6; }

.f-checkbox .f-checkbox-wrapper .f-checkbox-outer:focus { box-shadow: 0 0 0 8px #e7e9eb; }

.f-checkbox .f-checkbox-wrapper .f-checkbox-outer:active { box-shadow: 0 0 0 8px #d5d9db; }

.f-checkbox .f-checkbox-wrapper .f-checkbox-inner { align-items: center; background-color: #fff; display: flex; height: 16px; justify-content: center; width: 16px; }

.f-checkbox .f-checkbox-wrapper i { color: transparent; font-size: 12px; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked .f-checkbox-outer { background-color: #1abc9c; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked .f-checkbox-outer:hover { box-shadow: 0 0 0 8px #d1f2eb; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked .f-checkbox-outer:focus { box-shadow: 0 0 0 8px #ade7dc; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked .f-checkbox-outer:active { box-shadow: 0 0 0 8px #6dd4c0; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked .f-checkbox-inner { background-color: #1abc9c; height: 12px; justify-content: flex-start; width: 12px; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked i { color: #fff; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-checked.f-checkbox-disabled { opacity: 0.3; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled { cursor: not-allowed; opacity: 0.3; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled label { color: #444647; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled label:hover { cursor: not-allowed; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled:not(.f-checkbox-checked) label { color: #bdc3c7; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled:not(.f-checkbox-checked) .f-checkbox-outer { background-color: #e7e9eb; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-disabled .f-checkbox-outer:hover { box-shadow: none; cursor: not-allowed; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-error { background-color: #e74c3c; }

.f-checkbox .f-checkbox-wrapper.f-checkbox-partial i::before { content: '\F068'; }

.f-checkbox .f-checkbox-wrapper span { display: inline-block; margin-left: 12px; }

.f-checkbox .f-checkbox-wrapper input { visibility: hidden; }

body .f-checkbox label { cursor: pointer; font-weight: normal; margin-bottom: 0; margin-left: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-tags-typeahead .react-tags { align-items: center; background: #f4f4f4; border: 1px solid #cdcdcd; border-radius: 4px; cursor: text; font-family: Lato, 'Open Sans', arial, sans serif; position: relative; width: 425px; }

.f-tags-typeahead .react-tags.is-focused { border-color: #1abc9c; }

.f-tags-typeahead .react-tags .react-tags__search { align-items: center; display: inline-flex; height: 26px; margin: 2px 0 2px 4px; }

.f-tags-typeahead .react-tags .react-tags__search-input { background: transparent; border: 0; font-size: inherit; line-height: inherit; margin: 0; max-width: 100%; outline: none; padding: 0; width: 100%; }

.f-tags-typeahead .react-tags .react-tags__search-input:focus { border: 0 !important; }

.f-tags-typeahead .react-tags .react-tags__suggestions { background: #fff; border: 1px solid #999ea1; border-radius: 4px; left: 0; position: absolute; top: 100%; width: 100%; z-index: 2147483600; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-parent-exists { align-items: center; background: #ade7dc; display: flex; justify-content: space-between; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-parent-exists::after { color: #1abc9c; content: '\F00C'; font-family: 'Font Awesome 5 Pro'; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-parent-exists:hover { background: #6dd4c0; }

.f-tags-typeahead .react-tags .react-tags__suggestions ul { padding: 9px 0; }

.f-tags-typeahead .react-tags .react-tags__suggestions li { cursor: pointer; list-style: none; padding: 4px; }

.f-tags-typeahead .react-tags .react-tags__suggestions li:hover, .f-tags-typeahead .react-tags .react-tags__suggestions li.is-active { background: #d5d9db; }

.f-tags-typeahead .react-tags .react-tags__suggestions .fractal-button { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper { align-items: center; display: flex; font-size: 14px; height: 24px; line-height: 20px; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-tag-suggestion-name { color: #444647; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-tag-suggestion-count { color: #797d7f; margin-left: auto; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-tag-add-new { margin-bottom: 0; margin-top: 0; }

.f-tags-typeahead .react-tags .react-tags__suggestions .f-tag-add-new i { margin-right: 4px; }

.f-tags-typeahead .react-tags .react-tags__selected { display: inline; vertical-align: middle; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-wrapper { align-items: center; background: #d5d9db; border-radius: 16px; display: inline-flex; height: 26px; margin: 2px 0 2px 4px; padding: 4px 8px; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-tag-active { background-color: #bac0c3; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-wrapper span { white-space: nowrap; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-wrapper .fa-times { color: #797d7f; cursor: pointer; margin-left: 4px; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-count { background: #3498db; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 12px; box-sizing: border-box; color: #fff; font-size: 8px; font-weight: 600; line-height: 18px; margin-right: 5px; padding: 0 5px; }

.f-tags-typeahead .react-tags .react-tags__selected .f-tag-name { color: #444647; font-size: 14px; line-height: 20px; }

.f-tags-typeahead.f-tags-typeahead-results-overflow .react-tags .react-tags__suggestions ul { overflow-y: auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-confirmWarningModal { font-family: Lato, 'Open Sans', arial, sans serif; }

.fractal-widget-confirmWarningModal .f-confirm-warning-modal-body p { font-size: 14px; line-height: 20px; margin: 0 0 12px; }

.fractal-widget-confirmWarningModal .fractal-button.f-btn-warn { background: #f00; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-inline-message { align-items: center; background-color: #fff; border-radius: 4px; display: flex; font-family: Lato, 'Open Sans', arial, sans serif; line-height: 18px; padding: 24px; position: relative; }

.f-inline-message .f-inline-message-icon { font-size: 16px; margin-right: 8px; transform: translateX(-10px); }

.f-inline-message.f-icon-top .f-inline-message-icon { align-self: flex-start; transform: none; }

.f-inline-message.f-inline-message-error { border: 1px solid #e74c3c; }

.f-inline-message.f-inline-message-error .f-inline-message-icon { color: #e74c3c; }

.f-inline-message.f-inline-message-info { border: 1px solid #3498db; }

.f-inline-message.f-inline-message-info .f-inline-message-icon { color: #3498db; }

.f-inline-message.f-inline-message-success { background: #b4eccc; border: 1px solid #2ecc71; }

.f-inline-message.f-inline-message-success .f-inline-message-icon { color: #2ecc71; }

.f-inline-message.f-inline-message-warning { border: 1px solid #f1c40f; }

.f-inline-message.f-inline-message-warning .f-inline-message-icon { color: #f1c40f; }

.f-inline-message.f-inline-message-borderless { background: transparent; border: none; padding: 0; }

.f-inline-message.f-inline-message-borderless .f-inline-message-icon { display: none; }

.f-inline-message .f-collapse-btn { border-radius: 50%; padding: 0; position: absolute; right: 0; top: 0; width: 24px; }

.f-inline-message.f-collapsed { padding: 8px 16px; }

.f-inline-message .f-collapsible-link { cursor: pointer; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-tabs-container * { box-sizing: border-box; }

.f-tabs-row { align-self: flex-start; width: 100%; }

.f-tab { background: transparent; font-size: 14px; height: 30px; margin: 0; padding: 0; }

.f-tabs-header-container { overflow-x: auto; overflow-y: hidden; width: 100%; }

.f-tabs-header { border-bottom: 1px solid #d5d9db; display: flex; padding-left: 4px; width: 100%; }

.f-tabs-header.f-no-bottom-border { border-color: transparent; }

.f-tabs-header-right { align-content: center; display: flex; flex: 1; justify-content: flex-end; }

.f-tab-underline { align-items: flex-end; border-bottom-color: #27ae60; display: flex; font-size: 18px; height: 28px; margin-right: 30px; }

.f-tab-underline > span { color: #999ea1; cursor: pointer; line-height: 1.42857; }

.f-tab-underline > span::after { border-bottom: solid 2px #16a085; content: ''; display: block; position: relative; top: 2px; transform: scaleX(0); transition: transform 0.2s ease-in-out; }

.f-tab-underline > span.f-tab-selected { color: #444647; }

.f-tab-underline > span.f-tab-selected::after { transform: scaleX(1); }

.f-tab-underline > span:hover { color: #444647; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-tab-content-inner .f-tab-content-inner { overflow: hidden; } }

.f-tab-content { display: flex; flex-direction: column; font-size: 14px; padding-top: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-nav-search-wrapper-v2 .f-tab-empty, .fractal-global-nav .f-nav-search .f-tab-empty, .f-global-nav .f-tab-empty { align-items: center; box-sizing: border-box; color: #797d7f; display: flex; flex-direction: column; height: 300px; justify-content: center; padding: 30px; text-align: center; }

.f-nav-search-wrapper-v2 .f-tab-empty *, .fractal-global-nav .f-nav-search .f-tab-empty *, .f-global-nav .f-tab-empty * { line-height: 1.42857; }

.f-nav-search-wrapper-v2 .f-tab-empty i, .f-nav-search-wrapper-v2 .f-tab-empty .fa-search, .fractal-global-nav .f-nav-search .f-tab-empty i, .fractal-global-nav .f-nav-search .f-tab-empty .fa-search, .f-global-nav .f-tab-empty i, .f-global-nav .f-tab-empty .fa-search { color: #797d7f; font-size: 36px; margin-bottom: 24px; }

.f-nav-search-wrapper-v2 .f-tab-empty h2, .f-nav-search-wrapper-v2 .f-tab-empty p, .fractal-global-nav .f-nav-search .f-tab-empty h2, .fractal-global-nav .f-nav-search .f-tab-empty p, .f-global-nav .f-tab-empty h2, .f-global-nav .f-tab-empty p { margin-bottom: 16px; }

.f-nav-search-wrapper-v2 .f-tab-empty p, .fractal-global-nav .f-nav-search .f-tab-empty p, .f-global-nav .f-tab-empty p { font-size: 14px; }

.f-nav-search-wrapper-v2 .f-tab-empty h2, .fractal-global-nav .f-nav-search .f-tab-empty h2, .f-global-nav .f-tab-empty h2 { font-size: 22px; font-weight: 400; }

.f-nav-search-wrapper-v2 .f-tab-empty .spinner-inner > .fa-spinner, .fractal-global-nav .f-nav-search .f-tab-empty .spinner-inner > .fa-spinner, .f-global-nav .f-tab-empty .spinner-inner > .fa-spinner { position: static; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-nav-search-wrapper-v2 .f-tab-loading, .fractal-global-nav .f-nav-search .f-tab-loading, .f-global-nav .f-tab-loading { align-items: center; box-sizing: border-box; color: #797d7f; display: flex; flex-direction: column; height: 300px; justify-content: center; padding: 20px; text-align: center; }

.f-nav-search-wrapper-v2 .f-tab-loading .f-result-loading, .fractal-global-nav .f-nav-search .f-tab-loading .f-result-loading, .f-global-nav .f-tab-loading .f-result-loading { align-items: flex-start; margin: 0 0 12px; padding: 0; width: 100%; }

.f-nav-search-wrapper-v2 .f-tab-loading .f-result-loading:last-child, .fractal-global-nav .f-nav-search .f-tab-loading .f-result-loading:last-child, .f-global-nav .f-tab-loading .f-result-loading:last-child { margin: 0; }

.f-nav-search-wrapper-v2 .f-tab-loading .f-result-loading .f-result-image, .fractal-global-nav .f-nav-search .f-tab-loading .f-result-loading .f-result-image, .f-global-nav .f-tab-loading .f-result-loading .f-result-image { background-size: 320px 32px; border-radius: 4px; height: 32px; margin-right: 8px; width: 32px; }

.f-nav-search-wrapper-v2 .f-tab-loading .f-result-loading .f-result-text, .fractal-global-nav .f-nav-search .f-tab-loading .f-result-loading .f-result-text, .f-global-nav .f-tab-loading .f-result-loading .f-result-text { background-size: 960px 32px; border-radius: 4px; flex: 1; height: 32px; width: calc(100% - 40px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-nav-search-wrapper-v2 .f-result, .fractal-global-nav .f-nav-search .f-result, .f-global-nav .f-result { align-items: center; display: flex; padding: 4px 16px; }

.f-nav-search-wrapper-v2 .f-result:focus, .fractal-global-nav .f-nav-search .f-result:focus, .f-global-nav .f-result:focus { text-decoration: none; }

.f-nav-search-wrapper-v2 .f-result .member-img, .fractal-global-nav .f-nav-search .f-result .member-img, .f-global-nav .f-result .member-img { height: 32px; width: 32px; }

.f-nav-search-wrapper-v2 .f-result:hover, .fractal-global-nav .f-nav-search .f-result:hover, .f-global-nav .f-result:hover { background: #e7e9eb; text-decoration: none; }

.f-nav-search-wrapper-v2 .f-result .f-result-image, .fractal-global-nav .f-nav-search .f-result .f-result-image, .f-global-nav .f-result .f-result-image { border-radius: 4px; height: 32px; width: 32px; }

.f-nav-search-wrapper-v2 .f-result .fa, .f-nav-search-wrapper-v2 .f-result .far, .fractal-global-nav .f-nav-search .f-result .fa, .fractal-global-nav .f-nav-search .f-result .far, .f-global-nav .f-result .fa, .f-global-nav .f-result .far { border-radius: 4px; color: #999ea1; display: flex; font-family: 'Font Awesome 5 Pro'; font-size: 24px; font-weight: 300; height: 32px; justify-content: center; line-height: 32px; width: 32px; }

.f-nav-search-wrapper-v2 .f-result .f-result-text, .fractal-global-nav .f-nav-search .f-result .f-result-text, .f-global-nav .f-result .f-result-text { color: #999ea1; display: flex; flex: 1; flex-direction: column; font-size: 14px; font-weight: 400; line-height: 16px; min-width: 0; padding-left: 10px; text-decoration: none; }

.f-nav-search-wrapper-v2 .f-result .f-result-text span, .fractal-global-nav .f-nav-search .f-result .f-result-text span, .f-global-nav .f-result .f-result-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 290px; }

.f-nav-search-wrapper-v2 .f-result .f-result-text .f-result-bold, .fractal-global-nav .f-nav-search .f-result .f-result-text .f-result-bold, .f-global-nav .f-result .f-result-text .f-result-bold { color: #444647; font-weight: 600; }

#bi-page-ct-a-view-idea .f-result .fa-comment { color: #999ea1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-global-nav-search-results .f-inner-search-results { max-height: 500px; overflow-y: auto; }

.f-global-nav-search-results .f-advance-search-result .f-result:hover, .f-global-nav-search-results .f-advance-search-result .f-result:focus-within { background: #e7e9eb; }

.f-global-nav-search-results .f-results-see-all { align-items: center; border-top: 1px solid #f5f5f6; cursor: pointer; display: flex; flex-shrink: 0; font-size: 14px; height: 48px; justify-content: center; }

.f-global-nav-search-results .f-results-see-all .fa-search { color: inherit; padding: 0 4px; vertical-align: baseline !important; }

.f-global-nav-search-results .f-results-see-all a { cursor: pointer; font-weight: 400; }

.f-global-nav-search-results .f-result-header { align-items: center; color: #999ea1; display: flex; justify-content: space-between; line-height: 20px; padding: 16px 16px 12px; }

.f-global-nav-search-results .f-result-header .f-header-left { align-items: center; display: flex; font-size: 14px; text-transform: uppercase; }

.f-global-nav-search-results .f-result-header .f-header-left h2 { font-size: 14px; font-weight: 700; margin: 0; }

.f-global-nav-search-results .f-result-header .f-of { cursor: pointer; font-size: 14px; font-weight: 400; }

.f-global-nav-search-results .f-result-header .f-of:focus-visible { text-decoration: underline; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-recently-viewed-list-v2 li { align-items: center; display: flex; padding: 4px 16px; position: relative; text-align: left; width: 100%; }

.fractal-recently-viewed-list-v2 li:hover, .fractal-recently-viewed-list-v2 li:focus-within { background: #e7e9eb; }

.fractal-recently-viewed-list-v2 li a { color: #444647; display: flex; font-weight: normal; width: 100%; }

.fractal-recently-viewed-list-v2 li a:visited, .fractal-recently-viewed-list-v2 li a:link { color: #444647; }

.fractal-recently-viewed-list-v2 li a:hover { text-decoration: none; }

.fractal-recently-viewed-list-v2 li a .item-image { border-radius: 4px; height: 32px; margin-right: 8px; width: 32px; }

.fractal-recently-viewed-list-v2 li a .item-right { line-height: 16px; overflow: hidden; width: 296px; }

.fractal-recently-viewed-list-v2 li a .item-right .item-title { display: block; font-size: 12px; font-weight: 600; margin: 0; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }

.fractal-recently-viewed-list-v2 li a .item-right .item-type { color: #999ea1; font-size: 12px; }

.fractal-recently-viewed-list-v2 li a .member-image-v1 { margin-right: 8px; }

.fractal-recently-viewed-list-v2 li .admin-buttons { align-items: center; display: flex; height: 40px; position: absolute; right: 20px; top: 0; }

.fractal-recently-viewed-list-v2 li .admin-buttons a { align-items: center; background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; display: flex; font-size: 18px; height: 32px; justify-content: center; width: 32px; }

.fractal-recently-viewed-list-v2 li .admin-buttons a:not(:last-child) { margin-right: 6px; }

.fractal-recently-viewed-list-v2 li .admin-buttons a:focus, .fractal-recently-viewed-list-v2 li .admin-buttons a:hover { background: #d5d9db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-recently-viewed-list-v2 { background: #fff; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); box-sizing: border-box; color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; line-height: normal; overflow-x: hidden; overflow-y: hidden; transition: opacity 0.2s ease-in-out; width: 380px; }

.fractal-recently-viewed-list-v2 * { box-sizing: border-box; }

.fractal-recently-viewed-list-v2.f-show-filtered-results { box-shadow: none; }

.fractal-recently-viewed-list-v2 .recent-list { display: block; margin: 0; max-height: 418px; overflow-y: auto; padding: 8px 0; width: 380px; }

.fractal-recently-viewed-list-v2 .recent-list li { align-items: center; display: flex; padding: 0; position: relative; }

.fractal-recently-viewed-list-v2 .recent-list li a { color: #444647; display: flex; font-weight: normal; }

.fractal-recently-viewed-list-v2 .recent-list li a:visited, .fractal-recently-viewed-list-v2 .recent-list li a:link { color: #444647; }

.fractal-recently-viewed-list-v2 .recent-list li a:hover { text-decoration: none; }

.fractal-recently-viewed-list-v2 .recent-list li a .member-image-v1 { margin-right: 0; }

.f-results-see-all { align-items: center; border-top: 0; cursor: pointer; display: flex; flex-shrink: 0; font-size: 14px; height: 48px; justify-content: center; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-nav-search-wrapper-v2 { flex-grow: 1; max-width: 380px; }

.f-nav-search-wrapper-v2 .__react_component_tooltip.show { opacity: 1; }

.f-nav-search-wrapper-v2 .f-nav-search { align-items: center; background: rgba(0, 0, 0, 0.1); border-radius: 4px; color: #fff; display: flex; margin: 0 10px; position: relative; }

.f-nav-search-wrapper-v2 .fa-search { color: #fff; padding: 0 10px; }

.f-nav-search-wrapper-v2 .fa-spinner { color: #fff; font-size: 20px; margin-right: 8px; position: absolute; right: 0; top: 4px; }

.f-nav-search-wrapper-v2 .f-nav-search .fractal-input { width: 90%; }

.f-nav-search-wrapper-v2 .f-nav-search .fractal-input input { background: transparent; border: none; border-radius: 0; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 12px; padding-left: 5px !important; width: 100%; }

.f-nav-search-wrapper-v2 .f-nav-search .fractal-input input:focus { outline: none; }

.f-nav-search-wrapper-v2 .f-nav-search .fractal-input input::placeholder { color: #fff; }

.f-nav-search-wrapper-v2 .f-nav-search .fractal-input input::-ms-clear { display: none; }

.f-nav-search-wrapper-v2 .f-nav-search-tag { align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 4px; color: #d5d9db; display: flex; flex: 0 0 auto; font-weight: 100; height: 18px; justify-content: center; margin-left: 3px; padding: 3px 10px; }

.f-nav-search-wrapper-v2 .f-nav-search-tag .fa-times { padding-left: 10px; }

.f-nav-search-wrapper-v2 .f-empty { align-items: center; color: #999ea1; display: flex; flex-direction: column; font-size: 17px; font-weight: bold; justify-content: center; margin: 25px; }

.f-nav-search-wrapper-v2 .f-empty .fa { font-size: 87px; margin-bottom: 25px; }

.f-nav-search-wrapper-v2 .f-empty .fa-search { color: #999ea1; }

.f-nav-search-wrapper-v2 .f-tab-content { padding-top: 0; }

.f-nav-search-wrapper-v2 .f-tab-underline { font-size: 14px; }

.f-nav-search-wrapper-v2 .f-tab-underline .fa-search { color: inherit !important; padding: 0 !important; }

.f-nav-search-wrapper-v2 .f-tabs-header { border-bottom: 0; margin: 13px 16px 0; padding-left: 0; width: auto; }

.f-nav-search-wrapper-v2 .f-tabs-header button:focus-visible .f-tab-underline > span { background-color: #d1f2eb; color: #444647; }

.f-nav-search-wrapper-v2.f-focus { background: rgba(0, 0, 0, 0.25); }

.f-nav-search-wrapper-v2.f-focus .fractal-input { width: 90%; }

.f-nav-search-wrapper-v2.f-tag-shown .fractal-input { width: 66%; }

.f-nav-search-wrapper-v2 label { display: none !important; }

.f-nav-search-wrapper-v2 .f-hide { opacity: 0; visibility: hidden; }

.f-nav-search-wrapper-v2 .f-show { opacity: 1; visibility: visible; }

.f-nav-search-wrapper-v2 .f-result-container { background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; left: 0; position: absolute; top: 30px; width: 380px; z-index: 1000; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all { border-top: 1px solid #d5d9db; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all .fa-search { color: inherit; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all:hover { background-color: #e7e9eb; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a { display: flex; min-width: 0; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a span:nth-of-type(1), .f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a span:nth-of-type(3) { flex-shrink: 0; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a span:nth-of-type(1) { padding-left: 8px; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a span:nth-of-type(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-nav-search-wrapper-v2 .f-result-container .f-results-see-all a span:nth-of-type(3) { padding-right: 16px; }

.f-nav-search-wrapper-v2 .f-tab-content { border-top: 1px solid #d5d9db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal { background: rgba(0, 0, 0, 0.5); font-family: Lato, 'Open Sans', arial, sans serif; font-size: 12px; height: 100%; left: 0; min-height: 100%; min-width: 100%; overflow: hidden; position: fixed; top: 0; z-index: 100002; }

.fractal-modal.modal-transition.modal-appear { opacity: 0.01; }

.fractal-modal.modal-transition.modal-appear.modal-appear-active { opacity: 1; transition: opacity 200ms ease-in; }

.fractal-modal.modal-transition.modal-exit { opacity: 1; }

.fractal-modal.modal-transition.modal-exit.modal-exit-active { opacity: 0.01; transition: opacity 200ms ease-in; }

.fractal-modal .wrapper-inner { background: #fff; border-radius: 8px; box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); display: block; height: 100%; overflow: hidden; position: relative; width: 100%; }

.fractal-modal .wrapper-outer { border-radius: 8px; height: 80%; margin: 0 auto; max-width: 700px; padding: 6px; position: relative; top: 50%; transform: translateY(-50%); transition: width 0.2s ease-in-out, height 0.2s ease-in-out; width: 45%; }

@media (max-width: 399px) { .fractal-modal .wrapper-outer { height: 100%; padding: 0; width: 100%; } }

@media (min-width: 1px) and (max-width: 767px) { .fractal-modal .wrapper-outer { height: 100%; padding: 0; width: 100%; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-textarea label { float: left; font-weight: normal; margin-right: 5px; }

.fractal-textarea textarea { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #444647; display: block; font-size: 14px; height: auto; line-height: 1.42857; padding: 6px 12px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.fractal-textarea textarea:focus { border-color: #1abc9c; outline: none !important; }

.fractal-textarea textarea.f-textarea-error { border-color: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal-footer { align-items: center; background: none; border-top: 1px solid #f5f5f6; display: flex; justify-content: flex-end; padding: 15px; }

.fractal-modal-footer .fractal-button { margin: 0; }

.fractal-modal-footer .fractal-button .f-btn-subtle { margin-right: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal-header { align-items: center; background: none; border-bottom: 1px solid #f5f5f6; display: flex; flex: 0 0 auto; height: auto; justify-content: space-between; width: auto; }

.fractal-modal-header .close-buttons { display: inline-block; float: right; font-size: 18px; user-select: none; }

.fractal-modal-header .close-buttons .handle { cursor: pointer; }

.fractal-modal-header .handle { float: right; font-size: 20px; margin: 7px 10px; opacity: 1; }

.fractal-modal-header .handle:hover { opacity: 0.8; }

.fractal-modal-header .modal-close { width: 120px; }

.fractal-modal-header .title { color: #444647; display: inline-block; font-size: 18px; font-weight: 500; line-height: inherit; margin-left: 0; padding: 8px 16px; }

.fractal-modal-header .close-button { align-items: center; border-radius: 50%; cursor: pointer; display: flex; font-size: 16px; height: 24px; justify-content: center; margin: 0 16px; padding: 0; width: 24px; }

.fractal-modal-header .close-button:hover { background: #f5f5f6; }

.fractal-modal-header .close-button:focus { background: #bdc3c7; }

.fractal-modal-header .close-button img { height: 16px; width: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-radio-wrapper { align-items: center; display: flex; height: 24px; margin: 4px 0; }

.f-radio-wrapper * { box-sizing: border-box; }

.f-radio-wrapper .f-radio-outer { align-items: center; background-color: #fff; border: 2px solid #bdc3c7; border-radius: 100%; cursor: pointer; display: flex; height: 20px; justify-content: center; width: 20px; }

.f-radio-wrapper .f-radio-outer:hover { box-shadow: 0 0 0 8px #f5f5f6; }

.f-radio-wrapper .f-radio-outer:focus { box-shadow: 0 0 0 8px #e7e9eb; }

.f-radio-wrapper .f-radio-outer:active { box-shadow: 0 0 0 8px #d5d9db; }

.f-radio-wrapper .f-radio-inner { background-color: #fff; border-radius: 100%; height: 12px; width: 12px; }

.f-radio-wrapper.f-radio-checked .f-radio-outer { border-color: #1abc9c; }

.f-radio-wrapper.f-radio-checked .f-radio-outer:hover { box-shadow: 0 0 0 8px #d1f2eb; }

.f-radio-wrapper.f-radio-checked .f-radio-outer:focus { box-shadow: 0 0 0 8px #ade7dc; }

.f-radio-wrapper.f-radio-checked .f-radio-outer:active { box-shadow: 0 0 0 8px #6dd4c0; }

.f-radio-wrapper.f-radio-checked .f-radio-inner { background-color: #1abc9c; }

.f-radio-wrapper.f-radio-checked.f-radio-disabled .f-radio-outer { border-color: #1abc9c; }

.f-radio-wrapper.f-radio-disabled { cursor: not-allowed; }

.f-radio-wrapper.f-radio-disabled.f-radio-checked { opacity: 0.3; }

.f-radio-wrapper.f-radio-disabled.f-radio-checked .f-radio-outer:hover { box-shadow: none; cursor: not-allowed; }

.f-radio-wrapper.f-radio-disabled:not(.f-radio-checked) label { color: #bdc3c7; }

.f-radio-wrapper.f-radio-disabled:not(.f-radio-checked) .f-radio-outer:hover { box-shadow: none; cursor: not-allowed; }

.f-radio-wrapper.f-radio-disabled label:hover { cursor: not-allowed; }

.f-radio-wrapper.f-radio-disabled .f-radio-outer { border-color: #e7e9eb; }

.f-radio-wrapper.f-radio-error { border-color: #e74c3c; }

.f-radio-wrapper span { display: inline-block; letter-spacing: 1px; margin-left: 12px; }

.f-radio-wrapper input { visibility: hidden; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-htmlpreview img { max-width: 100%; }

.fractal-htmlpreview table { width: 100%; }

.fractal-htmlpreview i:empty { min-width: 1em; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-admin-info-box { align-items: center; display: flex; justify-content: center; width: 100%; }

.f-admin-info-box .f-user-roles-info-wrapper { font-size: 12px; }

.f-admin-info-box .f-user-roles-info-wrapper p { margin-bottom: 0; padding-bottom: 8px; }

.f-admin-info-box .f-user-roles-info-wrapper p:last-of-type { padding-bottom: 0; }

.f-admin-info-box .f-user-roles-info-wrapper .f-licenses-available { padding-bottom: 4px; }

.f-admin-info-box .f-user-roles-info-wrapper .f-licenses-available:last-of-type { padding-bottom: 8px; }

.f-admin-info-box .f-user-roles-info-wrapper .fractal-htmlpreview { padding-bottom: 8px; }

.f-admin-info-box .f-user-roles-info-wrapper .f-info-receive { font-size: 10px; }

.f-admin-info-box .fas { color: #2980b9; margin-left: 0; margin-right: 4px; }

.f-admin-info-box .fas.f-idea-box-color { color: #7e3393; }

.f-admin-info-box .fas.f-moderator-color { color: #797d7f; }

.f-admin-info-box a { font-weight: normal; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-admin-modal .title .fa-award { color: #2980b9; margin-right: 8px; }

.f-admin-modal .title .f-upgrade { margin-right: 4px; }

.f-admin-modal .title .f-idea-box-color { color: #7e3393; margin-right: 8px; }

.f-admin-modal .title .f-moderator-color { color: #797d7f; }

.f-admin-modal .f-admin-license-modal { font-size: 12px; width: 500px; }

.f-admin-modal .f-admin-license-modal p, .f-admin-modal .f-admin-license-modal .fractal-htmlpreview { color: #444647; font-size: 12px; margin-top: 0; padding: 8px 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-member-typeahead { position: relative; width: 425px; }

.f-member-typeahead .react-tags { align-items: center; background: #fff; border: 1px solid #cdcdcd; border-radius: 4px; cursor: text; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 12px; padding: 4px 0 0 8px; position: relative; }

.f-member-typeahead .react-tags.is-focused { border-color: #1abc9c; }

.f-member-typeahead .react-tags .react-tags__search { align-items: center; display: inline-flex; height: 24px; margin: -1px 0 3px; }

.f-member-typeahead .react-tags .react-tags__search-input { background: transparent; border: 0; font-family: Lato, 'Open Sans', arial, sans serif; font-size: inherit; margin: 0; max-width: 100%; min-width: 112px; outline: none; padding: 0; }

.f-member-typeahead .react-tags .react-tags__search-input:focus { border: 0 !important; }

.f-member-typeahead .react-tags .react-tags__search-input::placeholder { color: #999ea1; }

.f-member-typeahead .react-tags .react-tags__suggestions { background: #fff; border: 1px solid #999ea1; border-radius: 4px; left: 0; position: absolute; top: 100%; width: 100%; z-index: 2147483600; }

.f-member-typeahead .react-tags .react-tags__suggestions ul { padding: 8px 0; }

.f-member-typeahead .react-tags .react-tags__suggestions li { align-items: center; cursor: pointer; display: flex; height: 40px; list-style: none; padding: 4px 8px; }

.f-member-typeahead .react-tags .react-tags__suggestions li:hover, .f-member-typeahead .react-tags .react-tags__suggestions li.is-active { background: #d5d9db; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper { align-items: center; display: flex; justify-content: space-between; width: 100%; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper .fa-users { font-size: 18px; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper .member-image-v1 { margin-right: 8px; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper .member-image-v1 img { height: 32px; width: 32px; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-wrapper.f-disabled { cursor: not-allowed; opacity: 0.3; }

.f-member-typeahead .react-tags .react-tags__suggestions .fa-user-plus { color: #2ecc71; font-size: 12px; margin-left: 4px; margin-right: 8px; margin-top: 1px; }

.f-member-typeahead .react-tags .react-tags__suggestions .fa-users { font-size: 12px; margin-left: 4px; margin-right: 8px; margin-top: 1px; }

.f-member-typeahead .react-tags .react-tags__suggestions .fa-award { color: #2980b9; font-size: 16px; margin-right: 8px; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-idea-box-color { color: #8e44ad; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-moderator-color { color: #797d7f; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info-wrapper { align-items: center; display: flex; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info { display: flex; flex-direction: column; line-height: 1.2; word-break: break-all; }

.f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-name { font-weight: 700; }

.f-member-typeahead .react-tags .react-tags__selected { display: inline; vertical-align: top; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper { align-items: center; background: #fff; border: 1px solid #d5d9db; border-radius: 12px; display: inline-flex; height: 24px; margin: 0 8px 4px 0; padding: 4px 0 4px 4px; vertical-align: bottom; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .fa-user-plus { color: #999ea1; font-size: 12px; margin-left: 4px; margin-right: 4px; margin-top: 1px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-admin { background: #d6eaf8; border: 0; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-admin .fa-user-plus { color: #2980b9; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-admin .f-tag-remove:hover { background: rgba(0, 0, 0, 0.1); }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-idea-box-bg-color { background: #d2b4de; border: 0; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-idea-box-bg-color .fa-user-plus { color: #9b59b6; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-idea-box-bg-color .f-tag-remove:hover { background: rgba(0, 0, 0, 0.1); }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-brightidea-user { background: #d5d9db; border: 0; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-brightidea-user .f-tag-remove:hover { background: rgba(0, 0, 0, 0.1); }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .f-group-icon { align-items: center; background: #3498db; border-radius: 50%; display: flex; height: 16px; justify-content: center; margin-right: 4px; width: 16px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .fa-users { color: #fff; font-size: 8px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper span { white-space: nowrap; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .member-image-v1 { align-items: center; cursor: auto; display: inline-flex; margin-right: 4px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .member-image-v1 img { height: 16px; width: 16px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .member-initial { font-size: 8px; height: 16px; width: 16px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .f-tag-remove { align-items: center; border-radius: 50%; cursor: pointer; display: flex; height: 24px; justify-content: center; margin-left: 4px; width: 24px; }

.f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .f-tag-remove:hover { background: #d5d9db; }

.f-member-typeahead .react-tags .f-no-member { align-items: baseline; display: flex; }

.f-member-typeahead .react-tags .f-char { align-items: center; background: #bdc3c7; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 16px; color: #fff; display: flex; font-size: 18px; height: 32px; justify-content: center; margin-right: 8px; width: 32px; }

.f-member-typeahead .fractal-spinner-outer { position: absolute; right: 4px; top: 8px; }

.f-member-typeahead .fractal-spinner-outer i.fa-spinner { color: #444647; font-size: 14px; }

.f-member-typeahead.f-member-typeahead-results-overflow .react-tags .react-tags__suggestions ul { height: 220px; overflow-y: auto; }

.f-member-typeahead .f-new-user-role { display: inline-block; font-size: 11px; font-style: italic; transform: translate(0, -16px); }

.f-member-typeahead .f-new-user-link { display: block; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-duplicateInitiativeModal * { box-sizing: border-box; }

#dup-initiative-modal { padding: 20px; width: 650px; }

#dup-initiative-modal .section { margin-bottom: 17px; margin-top: 5px; }

#dup-initiative-modal .section > label { display: inline-block; font-size: 12px; font-weight: bold; margin-bottom: 7px; }

#dup-initiative-modal .element-select { margin-bottom: 7px; width: 205px; }

#dup-initiative-modal .chk-label { font-size: 12px; font-weight: normal; margin: 0 10px 0 5px; }

#dup-initiative-modal .form-input { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #000; font-family: Open Sans, sans-serif; font-size: 13px; height: 30px; padding: 5px; }

#dup-initiative-modal .input-error { border-color: #e74c3c; }

#dup-initiative-modal input, #dup-initiative-modal select, #dup-initiative-modal textarea { margin-left: 0; width: calc(100% - 24px); }

#dup-initiative-modal input[type='radio'], #dup-initiative-modal select[type='radio'], #dup-initiative-modal textarea[type='radio'] { width: auto; }

#dup-initiative-modal textarea.form-input { height: 100px; }

#dup-initiative-modal #error_message { background-color: #d4322d; border: 1px solid #bdc3c7; color: #fff; display: block; font-size: 12px; padding: 10px; }

#dup-initiative-modal #member-typeahead-wrapper { width: calc(100% - 24px); }

#dup-initiative-modal .react-autosuggest__input { margin: 0; width: 100%; }

#dup-initiative-modal .subhead { background-color: #fff1cc; border: 1px solid #fedeac; height: 45px; margin-bottom: 10px; padding: 10px 15px; width: auto; }

#dup-initiative-modal .subhead #bi-header { color: #393738; font-size: 16px; font-weight: bold; line-height: 24px; vertical-align: middle; }

#dup-initiative-modal .subhead #bi-header i { font-size: 24px; margin-right: 10px; padding-bottom: 5px; vertical-align: middle; }

#dup-initiative-modal .owner-user-selection-list { font-size: 12px; margin-bottom: 10px; margin-left: 15px; }

#dup-initiative-modal .owner-user-selection-list div { margin: 5px; }

#dup-initiative-modal .owner-user-selection-list span { color: #3498db; cursor: pointer; display: inline-block; font-size: 10px; font-weight: normal; margin-left: 5px; margin-right: 0; transition: all 0.2s ease-in-out; }

#dup-initiative-modal #modal-body { margin: 10px; }

#dup-initiative-modal .react-autosuggest__suggestions-container { max-width: 432px; position: fixed; }

#dup-initiative-modal .dup-form { margin: 10px; }

#dup-initiative-modal .dup-form-label { font-weight: bold; }

#dup-initiative-modal .dup-form-input { padding: 10px 0; }

#dup-initiative-modal .f-member-typeahead { width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-adminNav-widget { align-items: center; box-sizing: border-box; color: #444647; cursor: pointer; display: flex; height: 32px; position: relative; }

.fractal-adminNav-widget > button { background: transparent; }

.fractal-adminNav-widget > button:focus .fractal-adminNav-selected-btn { background-color: #797d7f; border-color: #797d7f; color: #fff; }

.fractal-adminNav-widget > button:focus .fractal-adminNav-selected-btn.fractal-adminNav-popout-open { background-color: #444647; border-color: #444647; color: #fff; }

.fractal-adminNav-widget * { box-sizing: border-box; /* #region align with ws_css.bix */ margin: 0; padding: 0; /* #endregion */ }

.fractal-adminNav-widget .fractal-fixed-width-icon { display: inline-block; font-family: 'Font Awesome 5 Pro'; font-weight: 900; margin-right: 10px; text-align: center; width: 25px; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn { align-items: center; background-color: #fff; border: 1px solid #444647; border-radius: 4px; color: #444647; display: flex; font-weight: normal; height: 100%; user-select: none; width: 200px; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn.fractal-adminNav-popout-open { background-color: #444647; color: #fff; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn .fractal-adminNav-selected { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn i { font-size: 14px; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn i.fa-angle-down { margin-left: auto; padding: 0 15px; }

.fractal-adminNav-widget .fractal-adminNav-selected-btn i:first-child { padding: 0 10px; }

.fractal-adminNav-widget .fractal-dropdownPopout-popout-container { height: auto; padding: 8px; right: 0; top: 37px; width: 224px; z-index: 2; }

.fractal-adminNav-widget .fractal-dropdownPopout-popout-container a[aria-hidden='true'] { display: none; }

.fractal-adminNav-widget .fractal-adminNav-options li { height: 32px; list-style: none; }

.fractal-adminNav-widget .fractal-adminNav-options li a { padding: 8px 0 8px 10px; }

.fractal-adminNav-widget .fractal-adminNav-options li a:hover { text-decoration: none; }

.fractal-adminNav-widget .fractal-adminNav-options li.admin-divider { border-bottom: 1px solid #bdc3c7; height: 0; margin-bottom: 4px; padding: 4px 0 0; }

.fractal-adminNav-widget .fractal-adminNav-options li.fractal-adminNav-options-header { color: #444647; cursor: default; padding: 8px 0 8px 10px; text-align: left; }

.fractal-adminNav-widget .fractal-adminNav-options li.fractal-adminNav-options-header h1 { font-size: 14px; font-weight: 600; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item { display: flex; width: 100%; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item a { align-items: center; color: #444647; display: flex; font-weight: normal; width: 100%; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item a:focus { background-color: #f5f5f6; text-decoration: none; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item a:focus i, .fractal-adminNav-widget .fractal-adminNav-options li.nav-item a:focus span { color: #444647; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item i { font-size: 14px; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item.current-location-item { align-items: center; background-color: #3498db; display: flex; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item.current-location-item i, .fractal-adminNav-widget .fractal-adminNav-options li.nav-item.current-location-item span { color: #fff; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item .nav-item-label { font-size: 14px; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item:not(.current-location-item) { cursor: pointer; }

.fractal-adminNav-widget .fractal-adminNav-options li.nav-item:not(.current-location-item):hover { background-color: #f5f5f6; }

.darkMode .fractal-adminNav-selected-btn.fractal-adminNav-popout-open { background: rgba(0, 0, 0, 0.2); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal-body { background: #fff; margin: 0 auto; max-height: calc(100% - 115px); -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: auto; padding: 5px 35px; width: 100%; }

.fractal-modal-body .f-close-button { font-size: 16px; height: 24px; padding: 0; position: absolute; right: 8px; top: 4px; width: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-click-to-confirm-modal-body-v1 .fractal-modal-body { font-size: 14px; font-weight: 500; height: auto !important; max-height: none; padding: 20px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-click-to-confirm-modal-body-v1 .fractal-modal-body { font-size: 14px; font-weight: 500; height: auto !important; max-height: none; padding: 20px; }

.fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal { font-family: Lato, sans-serif; font-size: 14px; height: 130px; line-height: 20px; margin-top: 1rem; overflow: auto; resize: none; width: 100%; }

.fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal::-webkit-input-placeholder, .fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal::-moz-placeholder, .fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal:-ms-input-placeholder, .fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal:-moz-placeholder { font-family: Lato, sans-serif; font-size: 14px; line-height: 20px; }

.fractal-click-to-confirm-modal-body-v1 .fractal-textarea-modal.fractal-textarea-error { border-color: red; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-click-to-confirm-modal-v1 { display: block; position: relative; z-index: 2147483589; /* Disable standard modal esc behavior */ }

.fractal-click-to-confirm-modal-v1 * { box-sizing: border-box; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer { height: auto; max-height: 200px; max-width: 400px; padding: 0; width: auto; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer .wrapper-inner { display: flex; flex-direction: column; height: auto; position: inherit; width: auto; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer .wrapper-inner .fractal-modal-body { padding: 15px; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer .wrapper-inner .fractal-modal-footer { background: none; border-top: 1px solid #f5f5f6; height: auto; padding: 15px; position: inherit; width: auto; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer .wrapper-inner .fractal-modal-footer .fractal-button { margin: 0; }

.fractal-click-to-confirm-modal-v1 .wrapper-outer .wrapper-inner .fractal-modal-footer .f-btn-subtle { margin-right: 10px; }

.fractal-click-to-confirm-modal-v1 .__react_component_tooltip { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll { align-items: center; display: flex; overflow-x: auto; padding-bottom: 15px; width: 100%; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block { cursor: pointer; margin-right: 14px; position: relative; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; bottom: 0; box-sizing: content-box; content: ''; height: 102px; left: 0; margin: 1px; position: absolute; right: 0; top: 0; width: 126px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block img { border: 1px solid transparent; border-radius: 4px; box-sizing: content-box; height: 104px; min-height: 104px; min-width: 128px; object-fit: cover; width: 128px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block .f-file-progress-bar { border-radius: 0; bottom: 0; position: absolute; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block:hover .f-image-hover-content { display: flex; font-size: 12px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block .f-image-hover-content { background: rgba(0, 0, 0, 0.4); border: 1px solid transparent; border-radius: 4px; box-sizing: content-box; color: #fff; display: none; flex-direction: column; height: 102px; justify-content: space-between; left: 0; margin: 1px; position: absolute; top: 0; width: 126px; word-break: break-all; z-index: 1; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block .f-image-hover-content span { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; margin: 8px; overflow: hidden; text-align: left; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block .f-image-hover-hide { display: none; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block { cursor: pointer; margin-right: 14px; position: relative; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block a { background: #d5d9db; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; color: #444647; display: flex; flex-direction: column; font-weight: normal; height: 102px; justify-content: space-between; text-decoration: none; width: 128px; word-break: break-all; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block a:hover { background: rgba(0, 0, 0, 0.4); color: #fff; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block span { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; margin: 8px; overflow: hidden; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block .f-file-progress-bar { border-radius: 0; bottom: 0; position: absolute; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list { display: flex; flex-direction: column; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file { align-items: flex-start; display: flex; flex-direction: column; margin-bottom: 10px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file .f-list-file-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 2px; width: 100%; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-name { color: #3498db; font-weight: 500; margin: 0; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-size { display: flex; font-size: 11px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file .f-list-file-error-message { margin: 0; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file-error { color: #e74c3c; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file-error .f-list-file-row .f-list-file-name { color: #e74c3c; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file-error .f-list-file-row .f-file-progress-bar { background: #e74c3c; margin-right: 10px; width: 100%; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-vertical-list .f-list-file-error .f-list-file-row .fa-times { cursor: pointer; font-size: 12px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .fa-play-circle { color: #fff; font-size: 36px; left: calc(50% - 18px); position: absolute; top: calc(50% - 18px); }

.fractal-fileupload-v2 .f-filedisplay-image-slide .fa-trash-o { align-items: center; background: #fff; border-radius: 50%; bottom: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); color: #444647; display: flex; font-size: 13px; height: 24px; justify-content: center; position: absolute; right: 8px; transition: color 0.2s ease-in-out; width: 24px; z-index: 2; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .fa-trash-o:hover { color: #e74c3c; cursor: pointer; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .fa-user-secret { height: 14px; margin-right: 8px; padding: 4px 2px; width: 14px; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .fa-image-polaroid { align-items: center; background: #fff; border-radius: 50%; bottom: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); color: #444647; display: flex; font-size: 14px; height: 24px; justify-content: center; position: absolute; right: 38px; transition: color 0.2s ease-in-out; width: 24px; z-index: 1; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-progress-bar { background: #1abc9c; border-radius: 10px; height: 10px; transition: all 0.2s ease-in-out 0s; }

.fractal-fileupload-v2 .f-filedisplay-image-slide .f-progress-hidden { display: none !important; }

.f-change-idea-image .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; max-width: 400px; }

.f-change-idea-image .f-change-idea-content .f-change-img { background-position: center; background-size: cover; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; height: 112px; min-height: 112px; min-width: 144px; width: 144px; }

.f-change-idea-image .f-change-idea-content .f-change-images { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; }

.f-change-idea-image .f-change-idea-content p { margin: 24px 0; }

.f-change-idea-image .f-change-idea-content p:first-of-type { margin: 0 0 8px; }

.f-change-idea-image .f-change-idea-content i { font-size: 24px; margin: 0 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list { display: flex; flex-direction: column; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file { align-items: flex-start; display: flex; flex-direction: column; margin-bottom: 10px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 2px; width: 100%; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-icon { border-radius: 5px; color: #fff; height: 30px; line-height: 30px; text-align: center; text-transform: uppercase; width: 30px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-icon.ext-avi, .fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-icon.ext-mov, .fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-icon.ext-mp4, .fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-icon.ext-wmv { background-color: #bdc3c7; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-preview { height: 30px; width: 30px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-private i { color: #d4322d; font-size: 15px; padding-right: 15px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .fa-trash-o { font-size: 14px; margin-left: 5px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .fa-trash-o:hover { color: #e74c3c; cursor: pointer; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-name { color: #3498db; flex: 1; font-weight: 500; margin-left: 7px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-row .f-list-file-size { display: flex; font-size: 11px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file .f-list-file-error-message { margin: 0; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file-error { color: #e74c3c; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file-error .f-list-file-row .f-list-file-name { color: #e74c3c; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file-error .f-list-file-row .f-file-progress-bar { background: #e74c3c; margin-right: 10px; width: 100%; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-vertical-list .f-list-file-error .f-list-file-row .fa-times { cursor: pointer; font-size: 12px; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-file-progress-bar { background: #27ae60; border-radius: 10px; height: 10px; transition: all 0.2s ease-in-out 0s; }

.fractal-fileupload-v2 .f-filedisplay-file-list .f-progress-hidden { display: none !important; }

.fractal-fileupload-v2 .f-file-block { font-size: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-dropzone-wrapper-preview { text-align: center; }

.fractal-fileupload-v2 .f-dropzone-wrapper-preview .f-dropzone .f-dropzone-dnd-text { font-size: 18px; font-weight: normal; }

.fractal-fileupload-v2 .f-dropzone-wrapper-preview .f-dropzone .f-dropzone-description { font-size: 14px; margin-top: 32px; max-width: 344px; }

.fractal-fileupload-v2 .f-dropzone-wrapper-preview .f-dropzone .f-dropzone-button { margin: 32px auto 16px; }

.fractal-fileupload-v2 .f-dropzone-wrapper-preview .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block { margin-right: 0; }

.fractal-fileupload-v2 .f-dropzone-compressed .f-dropzone .f-dropzone-description { margin-top: 12px; }

.fractal-fileupload-v2 .f-dropzone-compressed .f-dropzone .f-dropzone-button { margin: 12px auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload-v2 .f-secret-dropzone-wrapper { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 104; }

.fractal-fileupload-v2 .f-secret-dropzone-wrapper.f-secret-dropzone-show { display: block; }

.fractal-fileupload-v2 .f-secret-dropzone-wrapper .f-secret-dropzone { align-items: center; background-color: #fff; border: 2px #337ab7 dashed; border-radius: 8px; box-sizing: border-box; color: #444647; display: flex; font-size: 20px; height: 100%; justify-content: center; width: 100%; }

.fractal-fileupload-v2 .f-secret-dropzone-wrapper .f-secret-dropzone.drag-active { color: #999ea1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-attachmentsmain-v2 { height: 100%; overflow: auto; }

.fractal-widget-attachmentsmain-v2 .f-attachment-file-display { margin-top: 20px; }

.webstorm-level #main_idea_container #form .set-section.upload-attachments.invalid legend { color: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* Redactor 3 http://imperavi.com/redactor/ Copyright (c) 2009-2018, Imperavi LLC. License: http://imperavi.com/redactor/license/ */
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; } }

.redactor-animate-hide { display: none !important; }

.redactor-fadeIn { opacity: 0; animation: fadeIn .2s ease-in-out; }

.redactor-fadeOut { opacity: 1; animation: fadeOut .2s ease-in-out; }

@font-face { font-family: 'Redactor'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBkcAAAC8AAAAYGNtYXAXVtKwAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zuxdz/8AAAF4AAAkQGhlYWQPMte3AAAluAAAADZoaGVhB7gD6wAAJfAAAAAkaG10eK4BD60AACYUAAAAuGxvY2GyjqiGAAAmzAAAAF5tYXhwADkBcwAAJywAAAAgbmFtZVDOJQoAACdMAAABknBvc3QAAwAAAAAo4AAAACAAAwP0AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpKQPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Sn//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAADAAAAgAQAAwAAEgAoADwAABMhMhYVMRUUBiMhIiY1MTU0NjMDITIWFTEVFAYjITgBMSImPQE0NjMxEyEyFhUxFRQGIzEhIiY1MTU0NjO7AooZIiIZ/XYZIiIZgAOKGSIiGfx2GCMiGYACihkiIhn9dhkiIhkDACIZChkiIhkKGSL/ACIZCRkiIhgKGSL/ACIZChkiIhkKGSIAAAADAAAAgAQAAwAAEwApAD4AABMhMhYVMRUUBiMhIiY1MTU0NjMxESEyFhUxFRQGIyE4ATEiJj0BNDYzMREhMhYVMRUUBiMxISImNTE1NDYzMTsCyhkiIhn9NhkiIhkDihkiIhn8dhgjIhkCyhkiIhn9NhkiIhkDACIZChkiIhkKGSL/ACIZCRkiIhgKGSL/ACIZChkiIhkKGSIAAAADAAAAgAQAAwAAEgAoADwAABMhMhYVMRUUBiMhIiY1MTU0NjMDITIWFTEVFAYjITgBMSImPQE0NjMxEyEyFhUxFRQGIzEhIiY1MTU0NjP7AsoZIiIZ/TYZIiIZwAOKGSIiGfx2GCMiGcACyhkiIhn9NhkiIhkDACIZChkiIhkKGSL/ACIZCRkiIhgKGSL/ACIZChkiIhkKGSIAAAADARkARwLnAwAAKwA0AFUAACU+ATU0JjUxNjQ1NCYvAT4BNzE8ATU0JicxLgEjKgEjMSIHETMyFjMyNjcHAzIVFCMiIzUzAzoBMzIWFyceARUcARU1HAEVFAYHFQ4BIyImIzMiJzUzAp8hJwEBSDcCJjABIRshUS0CBQI4iM8DBgMwWCQByWp3HxxGBwUJBRw0FgEQEhUSFjQcBAkEARcmQIAZSiwBBAEDBwM9XRABEEUrAQMBJj8WGBsG/U4BHxsBAhdPWqb+/w4OAQ4oFwIFAgECBQIZLA4BDQ8BA+MAAAIAwAAAA0ADgAAsADgAACUiJicxJwcOASM4ATkBKgEjIiYnNRE+ATM6ATMxIToBMzIWFzERDgEjKgEjMQERNz4BMzIWFzEXEQMACxMI2toIEwsBAgEYIgICIhgBAgECAAECARgiAgIiGAECAf5AmgcUCgsTCJsABwWOjgYGIBcBAxAYICEX/PAXIQMQ/ZhlBgYGBmUCaAAABQBAAAADwAOAABMAFwAnADcARwAAASEiBhUxERQWMzEhMjY1MRE0JiMRIREhBSEyFhUUBiMxISImNTQ2MxUhMhYVFAYjMSEiJjU0NjMVITIWFRQGIzEhIiY1NDYzA0D9gDVLSzUCgDVLSzX9gAKA/gABgBslJRv+gBslJRsBgBslJRv+gBslJRsBgBslJRv+gBslJRsDgEs1/YA1S0s1AoA1S/0AAoBAJRsbJSUbGyXAJRsbJSUbGyXAJRsbJSUbGyUAAAMAQAAAA8ADgAATABcAWQAAASEiBhUxERQWMzEhMjY1MRE0JiMRIREhAzEHDgEjOAE5ASoBIyImJzE0NjcxNyMwIjEiJicxNDY3MTc+ATM4ATkBOgEzMhYXMRQGBzEHMzAyMTIWFzEUBgcxA0D9gDVLSzUCgDVLSzX9gAKAiMAFEAkBAQEOFAIEBJTpAg4VAQQEwAUQCQEBAQ4UAgQElOkCDhUBBAQDgEs1/YA1S0s1AoA1S/0AAoD+reAGBxIOBQoErRIOBQoE4AYHEg4FCgStEg4FCgQAAAEAgAA8A4ADAQCDAAABIy4BJyMnLgEnFy4BJzUuATUwNDUxPAE1NDY3MT4BMzoBMzEeARcjHgEXIzcuASMqAQczKgEjIgYHMQ4BFRwBFTEcARUUFhc1HgEfAiEVIRceARUxHAEVFAYHMQ4BIyoBIzEuAScXLgEnFwceATM6ATMjMhYzMjY3MT4BNzEuAScXMwOA9BIoFwI5FSMRAQgOBQUFDw0NIxMCBAITJBECEB0NARscQiQHDgYBAgQCJkQaGR0PDRIxHQIv/p0BxAQJChIPESoYAQQBEyQRAhIhDgEiH0wpAgQDAQMHAyxOIB0iAQEIBwHTAYASHQsbChUNAQcSCgEKFw0BAQEBARQiDQsOAQYGBA4IURETARsYFz8lAQMBAQICHDUXARkmCwEWQAQOIREBAQEWJg4OEAEHBgEGEAsBVhUWAR0aF0QoFCYSAgAAAAACAEAAAAPAA4AAHQA9AAABBzMyFhUUBisBIiY1MTU0NjMyFhUxFTceARcVFDY/ASMiJjU0NjMxMzIWFTEVFAYjIiY1MTUHLgEnNTQGNwHA50cTGhoTsxMaGhMSG+YYIgYGeudHExoaE7MTGhoTEhvmGCIGBgYBQOYbEhMaGhOzExoaE0fnBSMXAQkP+uYbEhMaGhOzExoaE0fnBSMXAQkPBgAAAAMAQABAA8ADgAAbAB4AIgAAASMVMxEhETM1IyIGFTERFBYzMSEyNjUxETQmIwEHISczESMDQICA/YCAgDVLSzUCgDVLSzX+wIABAKpUVAKAgP7AAUCASzX+wDVLSzUBQDVLAQDaIP66AAAAAAMAQAAAA8ADgAADABcAHwAAATMnBwEhIgYVMREUFjMxITI2NTERNCYjAycjByMTMxMBuI1GRwGI/YA1S0s1AoA1S0s1sivIKHPoLuoBgdHRAf9LNf2ANUtLNQKANUv9QHNzAkD9wAAABAA/AMADvwL/AAcACgB5ALAAACUDIwMzNzMXJyM3AREwNDU0JicXLgEnMS4BJyMuASMqATkBOAExIgYHMwYHBgcGBxU+ATczPgEzMToBMzIWFzEeARUwFBUxFSMmIiMiBgczDgEVHAEVNRQwFRQWFyceARcxHgEXMx4BMzoBMzE4ATEyNjcjPgE3MRczJw4BDwEOAQcjMCIjIiYnMS4BJzEuASc1LgE1OAE5ATQwNTQ2NzE+ATcxPgE3Mz4BMzoBMzEzFQJA6i7pcynIK0mMRgKABgUBBQ8JChcNAQ0eDwECChMKAhMREBAPDA0fEQMOIBACBAIQHgwKC04DBwQfOBgBFBcEBAEECwcIEwoBCxoOAQIBEiIQAhMfDQE7Qg0eEQELGg4BAQEHDgYGCQQEBQICAQMCAwgGBg4IAQgUCwEBAVPAAj/9wXNzwNH+egEEAgEOGgwBDBMIBwwDBAQBAQIEAwQEBTsGCgQEBAsJChoPAgEhARIPDiwaAQICAQEBCxUKAQoRBwcLBAQFCAYIFg4zaAwWCAEGBwEDAgIGBAQIBQEECwUBAQcOBgYLBAUHAgMCQwAAAAAHAD8AQAPRA0AABwAKAA4AEgAWABoAHgAAJQMjAzM3MxcnIzclMxEjExcHJzcHFzcDNycHFyc3FwJA6i7pcynIK0mMRgHBQEAkLbUtrS21La0ttS2tLbUtwAI//cFzc8DR7/0AAvEttS21LbUt/dMttS21LbUtAAABAMAAQANAA0AAMgAAASEqASMiBgczDgEHMw4BBxUOARUcARUxFBYXNR4BFzEeARczHgEzOgEzMREzETMRMxEzA0D+YAIFAhgsFQIUJA8BDxYIBgcJBwgXDg4hEwEULRgCBAFcgFxoA0AHBgYUDAwdEQEPIhICBQITJBABER4MDRUHCAf+cwKr/VUCqwAAAAAC//EAswQEAtwABQALAAABLQEnCQEBDQEXCQEBn/8AAQBR/qMBXQEJAQD/AFABXf6jAQDIxk7+7P7rAdzIxk0BFAEUAAYAQABAA8ADQAADAB8AIgAlADgATAAAAREhEQU6ATMyFhcxDgEjKgEjMSoBIyImJzE+ATM6ATMHNxcxNxcBITIWFTEVFAYjISImNTE1NDYzESEyFhUxFRQGIzEhIiY1MTU0NjMBAAIA/qsBAgIVHgMDHhUCAgEBAwEVHwICHxUBAwFcTUh0bf22AwoZIiIZ/PYZIiIZAwoZIiIZ/PYZIiIZAoD+gAGAShwUFRsbFRQc9lBQgIACACIZChkiIhkKGSL9gCIZChkiIhkKGSIAAAAHAEAAgAPAAwAAEgApAD0AQQBeAGEAZAAAATMyFhUxFRQGKwEiJjUxNTQ2MxEzMhYVMRUUBiMxIzgBMSImPQE0NjMxASEyFhUxFRQGIzEhIiY1MTU0NjMDESERBTAyMzIWFzEOASMqATkBKgExIiYnMT4BMzAyMzEHNxcjNxcCu8oZIiIZyhkiIhnJGSIiGckYIyIZ/cADChkiIhn89hkiIhk7AcD+1gEBFB0BAR0UAQEBARQdAQEdFAEBUUNAA2hgAwAiGQoZIiIZChki/wAiGQkZIiIYChki/wAiGQoZIiIZChkiAgD+gAGAShwUFBwcFBQc9lBQgIAAAAAHAEAAgAPAAwAAEwAtAEEARQBaAF0AYAAAEzMyFhUxFRQGIzEjIiY1MTU0NjMRMzIWFTEVFDAxFAYjOAExIyImNTE1NDYzMREhMhYVMRUUBiMxISImNTE1NDYzAREhEQUwMjMyFhcxDgEjIiYnMT4BMzoBMwc3Fyc3F3vKGSIiGcoZIiIZyhkiIhnKGSIiGQMKGSIiGfz2GSIiGQGFAcD+1gEBFB0BAx0VFB0DAR0UAQEBUURABGVjAwAiGQoZIiIZChki/wAiGQkBGSIiGQoZIv8AIhkKGSIiGQoZIgIA/oABgEocFBQbGxQUHPZPUAGAgAAABAAAAAAEAAOAAAMAIAAjACYAABMRIREFOgEzMhYXMQ4BIyoBIzEqASMiJicxPgEzOgEzMQM3FzUbAQAEAP1UAQEBL0MBAUMvAQEBAQEBL0MBAUMvAQEBt5uR6NoDgPyAA4CsQS8vQUEvL0H9xbe7BAEn/tQAAAAABQAAAIAEAAMAABMAKgA+AEEARQAAEyEyFhUxFRQGIyEiJjUxNTQ2MzEBITIWFTEVFAYjMSE4ATEiJj0BNDYzMREhMhYVMRUUBiMxISImNTE1NDYzJwcRBzMVIzsDihkiIhn8dhkiIhkBwAHJGSIiGf43GCMiGQHKGSIiGf42GSIiGbvAgICAAwAiGQoZIiIZChki/wAiGQkZIiIYChki/wAiGQoZIiIZChkiIaEBQIBAAAAAAgDAAAADgAOAACQASQAAJTEqASMiJy4BJyYnNDc+ATc2MzIXHgEXFhUxBgcOAQcGIyoBIzU6ATMyNz4BNzY3MTQnLgEnJiMiBw4BBwYVFhceARcWMzoBMzECIAEDAUc/P14bHAExMHw5OREROTl8MDEBHBtePz9HAQMBAQIBNS8vRxQVASYlXisqCgoqK14lJgEVFEcvLzUBAgEAGxpdPj5HR2BfrTw8PDytX2BHRz4+XRobVRQURi4vNTVKSYUvLy8vhUlKNTUvLkYUFAAAAAEBswBIAowC9gADAAAlEyMDAhN5X3pIAq79UgABAAABgQQAAgAAFQAAEyEyFhUxFRQGIyE4ATEiJj0BNDYzMTsDihkiIhn8dhgjIhkCACIZCRkiIhgKGSIAAAAAAwAAAL8EAALBADgAPAB5AAAlIiYnFzUzHgE7ATIWMzI2PwEuASMqASMzDgEHNyM1PgE7ATI2MzIXHgEXFhcVBgcOAQcGIyImIzMBIRUhJw4BBzcjFQ4BFRQWFzEVMx4BMzI2NwczFQ4BKwEiBiMiJy4BJyYnNTY3PgE3NjMyFjMjMhYXJxUjLgEnIwLcKUshAj0TKxcBAwkEQF4IAQhfQAQJBAEYLBQCPSBKKAEDCQU2MTBKFxcEBBcXSjAxNgUJBAH+kQEl/ttJFywUAjwSExMSPBMrFxgsFAI9IEooAQMJBTYxMEoXFwQEFxdKMDE2BQkEASlLIQI9EysXAcAUEgFbCAoBVD4BP1QBCgkBWxEUARQURS8vNQE2Ly9FFBQBAUCA0wEKCQEpES0ZGi0RKAgKCgkBWxEUARQURS8vNQE2Ly9FFBQBFBIBWwkJAQAABQAaAIAEAAMAABIAKAA8AEYAdAAAASEyFhUxFRQGIyEiJjUxNTQ2MxEhMhYVMRUUBiMhOAExIiY9ATQ2MzERITIWFTEVFAYjMSEiJjUxNTQ2MwM1Iw4BByMVNxUTNSM3PgE3MTY0NTQmJzEuASMiBiMzMCIxIgYHMQ4BBzEXPgE7ATIVDgEHMQcVATsCihkiIhn9dhkiIhkCihkiIhn9dhgjIhkCihkiIhn9dhkiIhm2EA4kFAEvVVYvCg0CAQsJCxkOAgICAQEKFAgIDQQbBRUMAR8CCwlJAwAiGQoZIiIZChki/wAiGQkZIiIYChki/wAiGQoZIiIZChkiAQjlEBsKJxyl/oAkRw4gEgEBAQwWBwgJAQUGBA4JFgsOGhAbC2kMAAUAAACABAADAAATACoAPgBBAEUAABMhMhYVMRUUBiMhIiY1MTU0NjMxASEyFhUxFRQGIzEhOAExIiY9ATQ2MzERITIWFTEVFAYjMSEiJjUxNTQ2MyUXERUzFSM7A4oZIiIZ/HYZIiIZAcAByRkiIhn+NxgjIhkByhkiIhn+NhkiIhn+BcCAgAMAIhkKGSIiGQoZIv8AIhkJGSIiGAoZIv8AIhkKGSIiGQoZIiGhAUCAQAAAAAYAAP/ABAADwAAdADsAPwBDAEcASwAAASIHDgEHBhUUFx4BFxYzMjc+ATc2NTE0Jy4BJyYjESInLgEnJjU0Nz4BNzYzMhceARcWFTEUBw4BBwYjAyEVIREhFSEbARcDNxMXAwIAal1eiygoKCiLXl1qal1eiygoKCiLXl1qUEVGaR4eHh5pRkVQUEVGaR4eHh5pRkVQwAGA/oABgP6AQEo2SkpKN0sDwCgoi15dampdXosoKCgoi15dampdXosoKPyAHh5pRkVQUEVGaR4eHh5pRkVQUEVGaR4eAUBAAQBA/tsB5Rv+GxsB5Rr+GgAAAAUAAACABAADAAATADMASABoAH8AABMhMhYVMRUUBiMhIiY1MTU0NjMxATMyMDEyFhU4ATkBFRQwMRQGIzgBMSMiJjUxNTQ2MzEBITIWFTEVFAYjMSEiJjUxNTQ2MzEBMzIwMTIWFTgBOQEVFDAxFAYjOAExIyImNTE1NDYzMTsBMhYVMRUUBiMxIzgBMSImPQE0NjMxOwOKGSIiGfx2GSIiGQEACQEZIiIZChkiIhn/AAOKGSIiGfx2GSIiGQHACQEZIiIZChkiIhnACRkiIhkJGCMiGQMAIhkKGSIiGQoZIv8AIhkJARkiIhkKGSL/ACIZChkiIhkKGSIBACIZCQEZIiIZChkiIhkJGSIiGAoZIgAAAAEAwACAA0ADAABHAAA3MDIxMjY1OAE5ATU0NjMxIQcOARUUFjMyNjcxNz4BNTQmLwEuASMiBhUUFh8BITgBMSIHDgEHBhU4ATkBFTgBMRQWMzgBOQHoARAYXUMBB4QGBhgQCA8FyAYGBgbIBQ8IEBgGBoT++DIrLEETExcRgBcRoEJehAUOCRAYBwXIBQ8ICA8FyAYGFxEIDgaEExJCKywyoBEXAAAAAAIAQAAAA4ADgAAeADwAAAEHMzIWFRQGKwEiJjUxNTQ2MzIWFTEVNx4BFxUUNgcBNyMiJjU0NjsBMhYVMRUUBiMiJj0BBy4BJzU0BjcDgOdHExoaE7MTGhoTEhvmGCIGBgb8wOdHExoaE7MTGhoTEhvmGCIGBgYDQOYbEhMaGhOzExoaE0fnBSMXAQkPBv0A5hsSExoaE7MTGhoTR+cFIxcBCQ8GAAAAAAEAgAA+A38DQADGAAAlIiMHPgE3Iz4BNzU+AT8BPgE1PAE1MTwBNTQmJxcuAScjLgEnIy4BIyoBIzEqASMiBgc3DgEHMQ4BDwEOARUcARU1FDAxFBYXNR4BFyceAR8BHgEfASciKwEVMBQxFBYXMR4BMzoBOQEhNS4BJxUuAS8BLgEnNS4BNTwBOQE8ATU0NjcVPgE3MT4BNzM+ATMyFhcjHgEXIx4BHwEeARUcARUxMBQVFAYHNw4BBzUOAQ8BDgEHIxUhOgExMjY3MT4BNTA0OQE1AvYXFy0ZLBQBFCIPDhcIAQcJEA8BDikYARk6IAIgSSYBAgEBAgEmSSICIjwZGSgOAQ4PCQgIFw8BDyITARMsFwItFxaKBgYFDwgBAQEZFSYQER4MAQwVBwcICwoJHBERJxYBFjEZGjEYAxgoEQESGwkBCQsIBwEIFA0MHhEBECUVAQEZAQEJDgYFBqgFCRgPDyQUARQuGAMXNhwBAQEBAQEmRyACITcXFiMMDQ0ODQENJBcXNx8CH0YmAQIBAQEdNxoCGi8UARUkDwEOGAkBBkABCA4FBQaRBA8MAQ0eEQESKBcCFjEaAQEBAwEcNBgBFicPDxcICAgICAcYDw8mFgEXNBwBAwEBARoyGAMYKhIBEh4MAQsPBI8GBQUOCAFAAAAAAAIBFQAWA+kCnQALAD0AACUnNyMHJyMXBzM3FwU1Izc+ATc1PAE1NCYnIy4BIyoBIzMqASMiBgc3DgEPARc+ATcxPgEzMTIVDgEHMQcVAsy7q111al2dq2FygAGBj1IQFQMQDQEPJxUCBAIBAQEBEB0NAQwRBAEgBQ0ICBMLOQMSD3PI8OWhoeXwq6uwLYAWNB0BAQMBEyEMCw0IBwEHFAwBGgkNBQUGMxowE7AKAAAAAgEVAMgD6QONAAsAPQAAJSc3IwcnIxcHMzcXATUjNz4BNzU8ATU0JicjLgEjKgEjMTAiIyIGBzMOAQcVFz4BNzE+ATcxMhUOAQc1BxUCzLurXXVqXZ2rYXKAAYGPUhAVAxANARAoFgEDAQIBEB0NAQwRBCAEDQgIFAo5AhMPcsjw5aGh5fCrqwFQLYAWNB0BAQMBEyEMDQ4IBwYUDAEaCA4FBQUBMxsvFAGxCgAAAAAGAEAAQAPAAwAAAwAHAAsADwATABcAABMhFSElIRUhBSEVISUhFSEFIRUhJSEVIUABov5eAd4Bov5e/iIBov5eAd4Bov5e/iIBov5eAd4Bov5eAwDAwMBAwMDAQMDAwAACAIAAQQOAA0AALgBfAAABMhYVMBQVFAYHNQchMhYVFAYjIRceARUcATkBFAYjIiYnNScuATU0NjcxNz4BMwExFx4BFRQGBzEHDgEjMSImNTA0MTQ2NzE3IQYmNTQ2MyEnLgE1PAE5ATQ2MzIWFxUBEBQcCAYOAiwUHBwU/dQOBwccFAsRBmAGCAgGYAYRCwIAYAcHBwdgBhELFBwIBg791hQcHBQCLA4HBxwUCxEGA0AmGgEBDBYKARMmGhomEwkWDAEBGiYKCAGACRcNDBcKgAgL/m2ACRcNDBcKgAgKJRsBDRYJEwEmGhomEwkWDAEBGiYKCAEAAAQBAACAAwEDAAADAAcACwAPAAABJzcXFzcnBwMHFzc3FwcnASkp6ynDKuwpwynrKcMq7CkCACfZJtom2ib+pibaJ9kn2ScAAAIA0P/AAxADDgA5AD0AAAEcARUUFhcxHgEzMjYzIzoBMzI2NxU+ATU8ATUVESMRHAEVFAYHMQ4BIyoBIzEqASMiJjU0NjUxESMDNSEVARIfGx5LKgUKBQEDBwMsTR8cIVgUERIxGwIEAgEEAzVLAVhCAkABTAMHAylJGhgcAR0aARtIKgMGAwEBwP5GAQQCGy8SERRLNQIDAgG2/Lc4OAABAMAAgANAAwAANgAAJSImNTE1NCYjMSEXHgEVFAYjIiYnMScuATU0Nj8BPgEzMhYVFAYHMQchMhceARcWFTEVFAYjMQMYEBdeQv73hAYGGBAIDwXIBgYGBsgFDwgQGAYGhAEIMissQRMTFxGAFxGgQl6EBQ4JEBgHBcgFDwgIDwXIBgYXEQgOBoQTE0EsLDGgERcABgAAAIAEAAMAABIAKAA8AFAAcACEAAATITIWFTEVFAYjISImNTE1NDYzESEyFhUxFRQGIyE4ATEiJj0BNDYzMREhMhYVMRUUBiMxISImNTE1NDYzIzMyFhUxFRQGIzEjIiY1MTU0NjMRMzIwMTIWFTgBOQEVFDAxFAYjOAExIyImNTE1NDYzMREzMhYVMRUUBiMxIyImNTE1NDYz+wLKGSIiGf02GSIiGQLKGSIiGf02GCMiGQLKGSIiGf02GSIiGcAKGSIiGQoZIiIZCQEZIiIZChkiIhkKGSIiGQoZIiIZAwAiGQoZIiIZChki/wAiGQkZIiIYChki/wAiGQoZIiIZChkiIhkKGSIiGQoZIgEAIhkJARkiIhkKGSIBACIZChkiIhkKGSIAAAAAAwBeAE4DrwMdAKcBUgFwAAAlMzUjKgEjIiYnMS4BNTwBNTE0NzY1NjQ1NCYnFS4BJzE1PgE3MT4BNTwBJxU0JyY1PAE1NDY3MT4BMzIWMzEzNSMwIiMiBgczDgEHMQ4BDwEOARUcARU1FBcWFxYXFhUwFDEUBgcxDgEHMQ4BByMOASMqASMxFToBMzIWFyMeARcxHgEXFR4BFzEUBwYHBgcGFRwBFRQWFyceARcxHgEXMx4BMzoBMyMFMzoBMTI2NyM+ATcxPgE3MT4BNTQmNTE0JyYnJicmNTgBMTQ2NxU+ATcxPgE3NT4BMzAyMzE1KgExIiYnFy4BJzEuASc1LgE1OAE5ATQ3Njc2NzY3PAE1NCYnFS4BJzEuAS8BLgEjKgEjMSMVMzoBMzIWFzEeARUUBhUxFAcGFRwBFRQWFyMeARczFQ4BBzEOARUcARU1FBcWFRwBFRQGBzcOASMqASMxIxUlMzc2NzY3MxYXFh8BMyc3IwcGBwYHIyYnJi8BIxcBBC0TAQMCChIGBQYCAgEIBgcWDQ0WBwcHAQICBgUGEgoCAwETLQIBCxYKAQoQBgYKAgEDAwECAQEBAQECAgYEBAsGAQcQCAEBAQEBAQgRBwEHCwUDBgICAQECAQECAQEDBAEDCgYGEAkBCRYLAQIBAQHXLQEBDBYLAgoQBgcJAwMEAQEBAQIBAQIBAgYEBAsHBxAJAgEBAgkQCAEGCwUEBgIBAgECAQEBAQEEAwMJBwYQCQEJFgsBAQEtEwIDAQsRBwUGAQICBwcBCBUNAQ4VCAYHAgIFBgEHEQsBAwIT/mVcOgkJCAoDCwkKCjtgioJcNAgICAkDCwgJCTZgglE0CAcKFgwCBAIkISIoAgQDDx0NAQsPAwMDDwsMHRACBQIBKCIiJAEFAgwWCgYJATUDAwIKBwcSCQEMGg0BAgIBFxITEhESEhQBBgsFBgkEBQcDAwM6AwMDBwUECgUBBQsHFBESEhETExYBAgEOGwwBChIHBwkDAgMDAwIDCQcHEgoMGg4BAgEWExISERISFAYMBgEGCgQFBwIBAgM7AwMBAwcFBAoFAQQMBhUREhIRExMWAQIBDhoNAgsSBwYKAgECAzQIBwkXCwMEAiQhIigCBAMPHQ0KDwMDAw8LDB0QAgQDASgiISQCBAMMFgoBBwg0c2kSERIUFBIREmnj3WMQEBEUFBARD2TaAAAEAAAAQAQAA0AAIwA3AFwAXwAAASEiBw4BBwYVMREUFx4BFxYzMSEyNz4BNzY1MRE0Jy4BJyYjExQGIzEhIiY1MRE0NjMxITIWFTEFMQcOASMwIjkBKgEjIiYnMTU+ATM6ATMxMhYXIxceARUUBgcVJzcnAwD+ADUvLkYUFBQURi4vNQIANS8uRhQUFBRGLi81gEs1/gA1S0s1AgA1S/7pmgYNCAEBAgESGwICGxIBAgEIDgcBmgoNDQqACAsDQBQURi4vNf8ANS8uRhQUFBRGLi81AQA1Ly5GFBT+ADVLSzUBADVLSzWjVgMEGRKqEhkEBFUEEwwLEwQBHgUGAAAACgBAAAADwAOAAA8AJQAzAEEAUgBnAHgAjgCfALUAAAEjIiY1NDYzMTMyFhUUBiMnDgEjIiY1NDY3MTc+ATMyFhUUBgcxASImNTQ2MzIWFTEUBiM1IgYVFBYzMjY1MTQmIzUiJjUxNTQ2MzIWFTEVFAYjBycuATU0NjMyFh8BHgEVFAYjIiYnFxQGIzEjIiY1NDYzMTMyFhUHPgEzMhYVFAYHMQcOASMiJjU0NjcxJTIWFTEVFAYjIiY1MTU0NjM3Fx4BFRQGIyImJzEnLgE1NDYzMhYXA4hwFyEhF3AXISEXmggUCxchCAdQBxULFyEJB/7DRmJiRkZiYkYXISEXFyEhFxchIRcXISEX7k8HCSEXCxUHUAcIIRcLFAgOIRdwFyEhF3AXIQ4IFAsXIQgHUAcVCxchCQcBPRchIRcXISEX7k8HCCEXCxQHUAcIIRcLFAgBiCEXFyEhFxch1gcIIRcLFAhPBwkhFwsVB/5qYkZGYmJGRmLgIRcXISEXFyGoIRdwFyEhF3AXIUJQBxULFyEJB08IFAsXIQgHnhchIRcXISEXngcIIRcLFAhPBwkhFwsVBw4hF3AXISEXcBchQlAHFAsXIQgHTwgUCxchCAcAAAAAAQAAAAEAAIeeNh1fDzz1AAsEAAAAAADWD0mdAAAAANYPSZ3/8f/ABAQDwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAP/x//wEBAABAAAAAAAAAAAAAAAAAAAALgQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAEZBAAAwAQAAEAEAABABAAAgAQAAEAEAABABAAAQAQAAD8EAAA/BAAAwAQA//EEAABABAAAQAQAAEAEAAAABAAAAAQAAMAEAAGzBAAAAAQAAAAEAAAaBAAAAAQAAAAEAAAABAAAwAQAAEAEAACABAABFQQAARUEAABABAAAgAQAAQAEAADQBAAAwAQAAAAEAABeBAAAAAQAAEAAAAAAAAoAFAAeAGwAugEIAXgBxAImApIDPAOOA8QD+ATUBRAFWAV6BeIGYAbaBxYHcAfYB+YIBgiuCUAJmgoSCpwK8AtEDEAMmAzwDSANnA3ADhAOWg7wELYRNhIgAAAAAQAAAC4BcQAKAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAgAAAABAAAAAAACAAcAaQABAAAAAAADAAgAOQABAAAAAAAEAAgAfgABAAAAAAAFAAsAGAABAAAAAAAGAAgAUQABAAAAAAAKABoAlgADAAEECQABABAACAADAAEECQACAA4AcAADAAEECQADABAAQQADAAEECQAEABAAhgADAAEECQAFABYAIwADAAEECQAGABAAWQADAAEECQAKADQAsFJlZGFjdG9yAFIAZQBkAGEAYwB0AG8AclZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMFJlZGFjdG9yAFIAZQBkAGEAYwB0AG8AclJlZGFjdG9yAFIAZQBkAGEAYwB0AG8AclJlZ3VsYXIAUgBlAGcAdQBsAGEAclJlZGFjdG9yAFIAZQBkAGEAYwB0AG8AckZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype"); font-weight: normal; font-style: normal; }

[class^="re-icon-"], [class*=" re-icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'Redactor' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.re-icon-aligncenter:before { content: "\e900"; }

.re-icon-alignment:before, .re-icon-alignleft:before { content: "\e901"; }

.re-icon-alignright:before { content: "\e902"; }

.re-icon-bold:before { content: "\e903"; }

.re-icon-bookmark:before { content: "\e904"; }

.re-icon-clips:before { content: "\e905"; }

.re-icon-codesnippets:before { content: "\e906"; }

.re-icon-deleted:before { content: "\e907"; }

.re-icon-expand:before { content: "\e908"; }

.re-icon-file:before { content: "\e909"; }

.re-icon-fontcolor:before { content: "\e90a"; }

.re-icon-fontfamily:before { content: "\e90b"; }

.re-icon-fontsize:before { content: "\e90c"; }

.re-icon-format:before { content: "\e90d"; }

.re-icon-html:before { content: "\e90e"; }

.re-icon-imagecenter:before { content: "\e90f"; }

.re-icon-imageleft:before { content: "\e910"; }

.re-icon-imageright:before { content: "\e911"; }

.re-icon-image:before { content: "\e912"; }

.re-icon-indent:before { content: "\e913"; }

.re-icon-inline:before { content: "\e914"; }

.re-icon-italic:before { content: "\e915"; }

.re-icon-line:before, .re-icon-horizontalrule:before { content: "\e916"; }

.re-icon-link:before { content: "\e917"; }

.re-icon-ol:before, .re-icon-ordered:before { content: "\e918"; }

.re-icon-outdent:before { content: "\e919"; }

.re-icon-properties:before { content: "\e91a"; }

.re-icon-readmore:before { content: "\e91b"; }

.re-icon-redo:before { content: "\e91c"; }

.re-icon-retract:before { content: "\e91d"; }

.re-icon-specialcharacters:before { content: "\e91e"; }

.re-icon-sub:before { content: "\e91f"; }

.re-icon-sup:before { content: "\e920"; }

.re-icon-table:before { content: "\e921"; }

.re-icon-textdirection:before { content: "\e922"; }

.re-icon-toggle:before { content: "\e923"; }

.re-icon-underline:before { content: "\e924"; }

.re-icon-undo:before { content: "\e925"; }

.re-icon-ul:before, .re-icon-lists:before, .re-icon-unordered:before { content: "\e926"; }

.re-icon-variable:before { content: "\e927"; }

.re-icon-video:before { content: "\e928"; }

.re-icon-widget:before { content: "\e929"; }

.redactor-box, .redactor-box textarea { z-index: auto; }

.redactor-box { position: relative; box-sizing: border-box; }

.redactor-box.redactor-styles-on { margin: 0; padding: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.075); border-radius: 3px; box-shadow: none; }

.redactor-box.redactor-inline { position: static; }

.redactor-focus.redactor-styles-on, .redactor-focus:focus.redactor-styles-on { border-color: #82b7ec !important; }

.redactor-over:hover.redactor-styles-on { border-color: #ee698a !important; }

.redactor-source-view, .redactor-source-view.redactor-styles-on { border-color: #000 !important; }

.redactor-in { position: relative; overflow: auto; white-space: normal; box-sizing: border-box; }

.redactor-in:focus { outline: none; }

.redactor-inline .redactor-in { overflow: hidden; }

.redactor-in *, .redactor-read-only * { outline: none !important; }

.redactor-in h1:empty, .redactor-in h2:empty, .redactor-in h3:empty, .redactor-in h4:empty, .redactor-in h5:empty, .redactor-in h6:empty, .redactor-in p:empty, .redactor-in blockquote:empty, .redactor-in div[data-redactor-tag=br]:empty, .redactor-in div[data-redactor-tag=tbr]:empty { min-height: 1.5em; }

.redactor-in div[data-redactor-tag=br], .redactor-in div[data-redactor-tag=tbr] { margin-top: 0; margin-bottom: 0; }

.redactor-in strong:empty, .redactor-in b:empty, .redactor-in em:empty, .redactor-in i:empty, .redactor-in span:empty, .redactor-in sup:empty, .redactor-in sub:empty, .redactor-in u:empty, .redactor-in ins:empty { display: inline-block; min-width: 1px; min-height: 1rem; }

.redactor-in table { empty-cells: show; }

.redactor-in li figure { width: auto; display: inline-block; margin: 0; vertical-align: top; }

.redactor-in figcaption:focus, .redactor-in figure code:focus, .redactor-in figure pre:focus, .redactor-in table td:focus, .redactor-in table th:focus { outline: none; }

.redactor-in figure[data-redactor-type=line] { margin-top: 1em; padding: 6px 0; vertical-align: baseline; }

.redactor-in figure[data-redactor-type=line] hr { margin: 0; height: 3px; border: none; background: rgba(0, 0, 0, 0.1); }

.redactor-script-tag { display: none !important; }

.redactor-component { position: relative; }

.redactor-component[data-redactor-type="widget"]:before, .redactor-component[data-redactor-type="video"]:before { width: 100%; height: 100%; content: ""; display: block; position: absolute; z-index: 1; }

.redactor-component[data-redactor-type=image], .redactor-component[data-redactor-type=widget] { clear: both; }

.redactor-component[data-redactor-type=variable] { white-space: nowrap; background: rgba(0, 125, 255, 0.75); color: #fff; display: inline-block; padding: 3px 6px; line-height: 1; border-radius: 4px; cursor: pointer; }

.redactor-component-active { outline: 5px solid rgba(0, 125, 255, 0.5) !important; }

.redactor-component-active[data-redactor-type=image] { outline: none !important; }

.redactor-component-active[data-redactor-type=image] img { outline: 5px solid rgba(0, 125, 255, 0.5) !important; }

.redactor-component-active[data-redactor-type=variable] { outline: none !important; background: #ee698a; }

.redactor-component-active[data-redactor-type=video] { outline: none !important; }

.redactor-component-active[data-redactor-type=video] iframe { outline: 5px solid rgba(0, 125, 255, 0.5) !important; }

.redactor-blur.redactor-styles-on .redactor-component-active { outline: 5px solid #ddd !important; }

.redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=image] { outline: none !important; }

.redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=image] img { outline: 5px solid #ddd !important; }

.redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=video] { outline: none !important; }

.redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=video] iframe { outline: 5px solid #ddd !important; }

.redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=variable] { outline: none !important; background: #ddd; }

.redactor-component-caret { position: absolute; left: -9999px; }

.redactor-textnodes-wrapper { display: inline-block; }

#redactor-image-resizer { position: absolute; z-index: 1050; background-color: rgba(0, 125, 255, 0.9); width: 13px; height: 13px; border: 1px solid #fff; cursor: move; cursor: nwse-resize; }

.redactor-file-item { display: inline-block; line-height: 1; padding: 4px 12px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.2); }

.redactor-file-remover { margin-left: 2px; position: relative; right: -3px; display: inline-block; padding: 0 3px; cursor: pointer; opacity: .5; }

.redactor-file-remover:hover { opacity: 1; }

#redactor-overlay { position: fixed; z-index: 1051; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); }

#redactor-overlay > .redactor-close { position: fixed; top: 1rem; right: 1rem; }

.redactor-source, .redactor-source:hover, .redactor-source:focus { text-align: left; box-sizing: border-box; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; width: 100%; display: block; margin: 0; border: none; box-shadow: none; border-radius: 0; background: #252525; color: #ccc; font-size: 15px; outline: none; padding: 10px 18px 20px 18px; line-height: 1.5; resize: vertical; }

.redactor-box[dir="rtl"] .redactor-source { direction: ltr; }

.redactor-placeholder:before { position: absolute; content: attr(placeholder); color: rgba(0, 0, 0, 0.4); font-weight: normal; }

.redactor-in figcaption[placeholder]:empty:before { content: attr(placeholder); color: rgba(0, 0, 0, 0.4); font-weight: normal; }

.redactor-in figcaption[placeholder]:empty:focus:before { content: ""; }

.redactor-statusbar { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; margin: 0; padding: 8px 10px; position: relative; overflow: hidden; list-style: none; background: #f8f8f8; box-sizing: border-box; border: none; }

.redactor-statusbar li { float: left; font-size: 12px; color: rgba(0, 0, 0, 0.5); padding: 0 10px; line-height: 16px; border-right: 1px solid rgba(0, 0, 0, 0.1); }

.redactor-statusbar li:last-child { border-right-color: transparent; }

.redactor-statusbar a { color: rgba(0, 0, 0, 0.5); text-decoration: underline; }

.redactor-statusbar a:hover { color: #f03c69; text-decoration: underline; }

.redactor-statusbar:empty { display: none; }

.redactor-toolbar-wrapper { position: relative; }

.redactor-toolbar, .redactor-air { z-index: 100; font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Tahoma, sans-serif; position: relative; margin: 0 !important; padding: 0; list-style: none !important; line-height: 1 !important; background: none; border: none; box-sizing: border-box; }

.redactor-box.redactor-styles-on .redactor-toolbar { padding: 18px 16px 0 16px; }

.redactor-toolbar a, .redactor-air a { display: inline-block; box-sizing: border-box; font-size: 14px; text-align: center; padding: 10px 15px 9px 15px; cursor: pointer; outline: none; border: none; vertical-align: middle; text-decoration: none; zoom: 1; position: relative; color: rgba(0, 0, 0, 0.85); border-radius: 2px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); margin-right: 5px; margin-bottom: 4px; }

.redactor-toolbar a.re-button-icon, .redactor-air a.re-button-icon { font-size: 16px; padding: 9px 15px 6px 15px; }

.redactor-toolbar a:hover, .redactor-air a:hover { outline: none; color: #fff; background: #449aef; }

.redactor-toolbar a.redactor-button-active { background: rgba(245, 245, 245, 0.95); color: rgba(0, 0, 0, 0.4); }

.redactor-toolbar a.redactor-button-disabled, .redactor-air a.redactor-button-disabled { opacity: 0.3; }

.redactor-toolbar a.redactor-button-disabled:hover, .redactor-air a.redactor-button-disabled:hover { color: #333; outline: none; background-color: transparent !important; cursor: default; }

.redactor-source-view .redactor-toolbar { background: #252525; }

.redactor-source-view .redactor-toolbar a { background: #000; color: #fff; }

.redactor-source-view .redactor-toolbar a:hover { background: #449aef; }

.redactor-source-view .redactor-toolbar a.redactor-button-disabled:hover { color: #fff !important; background-color: #000 !important; }

.re-button-tooltip { display: none; position: absolute; white-space: nowrap; top: 0; z-index: 1052; background: rgba(0, 0, 0, 0.9); border-radius: 3px; padding: 5px 9px; color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 1; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; }

.re-button-tooltip:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: none; border-bottom-color: rgba(0, 0, 0, 0.9); border-width: 4px; margin-left: -4px; }

.redactor-toolbar-wrapper-air { position: absolute; z-index: 100; }

.redactor-air { padding: 6px 3px 2px 8px; max-width: 576px; min-width: 200px; border-radius: 4px; background: rgba(0, 0, 0, 0.97); }

.redactor-air a { background: rgba(37, 37, 37, 0.95); box-shadow: none; color: rgba(255, 255, 255, 0.9); }

.redactor-air a:hover { background: #3d79f2; }

.redactor-air a.redactor-button-active { background-color: rgba(255, 255, 255, 0.15); color: #fff; }

.redactor-air a.redactor-button-disabled:hover { color: #fff; }

.redactor-air-helper { position: absolute; right: 0; top: 0; line-height: 1; font-size: 15px; color: #000; background: rgba(255, 255, 255, 0.85); border-bottom-left-radius: 4px; padding: 7px 10px 6px 10px; cursor: pointer; }

.redactor-air-helper:hover { background: #fff; }

.redactor-voice-label { display: none; }

.redactor-context-toolbar { position: absolute; top: 0; left: 0; z-index: 1051; background-color: rgba(0, 0, 0, 0.95); color: #555; border-radius: 4px; padding: 6px 18px 7px 18px; line-height: 1.5; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; }

.redactor-context-toolbar a { font-size: 12px; color: #ccc; text-decoration: none; display: inline-block; padding: 2px 0 1px 12px; }

.redactor-context-toolbar a:first-child { padding-left: 0; }

.redactor-context-toolbar a i { position: relative; top: 3px; font-size: 16px; }

.redactor-context-toolbar a:before { content: ''; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.3); }

.redactor-context-toolbar a:hover { color: #fff; }

.redactor-context-toolbar a:first-child:before { padding-left: 0; border-left: none; }

.redactor-context-toolbar[dir="rtl"] a { padding: 2px 12px 1px 0; }

.redactor-context-toolbar[dir="rtl"] a:first-child { padding-right: 0; }

.redactor-context-toolbar[dir="rtl"] a:before { padding-left: 0px; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.3); border-left: none; }

.redactor-context-toolbar[dir="rtl"] a:first-child:before { padding-right: 0; border-right: none; }

.redactor-dropdown { font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Tahoma, sans-serif; display: none; position: absolute; z-index: 1051; background-color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); border-radius: 2px; width: 264px; min-height: 40px; max-height: 250px; margin: 0; margin-top: -1px; overflow: auto; font-size: 15px; padding: 0; }

.redactor-dropdown a span { display: inline-block; line-height: 1; padding: 2px 4px; border-radius: 3px; }

.redactor-dropdown a { display: block; text-decoration: none; padding: 10px 8px; white-space: nowrap; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.redactor-dropdown a:last-child { border-bottom-color: transparent; }

.redactor-dropdown a { color: #000; }

.redactor-dropdown a:hover { color: #fff !important; background-color: #449aef !important; }

.redactor-dropdown a.redactor-dropdown-item-disabled { color: rgba(0, 0, 0, 0.4); background: #fff; }

.redactor-dropdown-cells { margin: 10px auto; }

.redactor-dropdown-cells a, .redactor-dropdown-cells span { float: left; cursor: pointer; box-sizing: border-box; text-align: center; padding: 0; margin: 0; font-size: 14px; }

.redactor-dropdown-selector { display: flex; text-align: center; }

.redactor-dropdown-selector span { flex-grow: 1; font-size: 12px; padding: 8px; cursor: pointer; }

.redactor-dropdown-selector span:hover { background: #eee; }

.redactor-dropdown-selector span.active { cursor: text; color: rgba(0, 0, 0, 0.3); background: #eee; }

.redactor-dropdown-format .redactor-dropdown-item-blockquote { color: rgba(0, 0, 0, 0.4); font-style: italic; }

.redactor-dropdown-format .redactor-dropdown-item-pre { font-family: monospace, sans-serif; }

.redactor-dropdown-format .redactor-dropdown-item-h1 { font-size: 40px; font-weight: bold; line-height: 32px; }

.redactor-dropdown-format .redactor-dropdown-item-h2 { font-size: 32px; font-weight: bold; line-height: 32px; }

.redactor-dropdown-format .redactor-dropdown-item-h3 { font-size: 24px; font-weight: bold; line-height: 24px; }

.redactor-dropdown-format .redactor-dropdown-item-h4 { font-size: 21px; font-weight: bold; line-height: 24px; }

.redactor-dropdown-format .redactor-dropdown-item-h5 { font-size: 18px; font-weight: bold; line-height: 24px; }

.redactor-dropdown-format .redactor-dropdown-item-h6 { font-size: 14px; text-transform: uppercase; font-weight: bold; line-height: 24px; }

#redactor-modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow-x: hidden; overflow-y: auto; z-index: 1051; font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Tahoma, sans-serif; line-height: 24px; }

.redactor-modal { position: relative; margin: 16px auto; padding: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 15px rgba(80, 80, 80, 0.25); border-radius: 3px; color: #000; }

.redactor-modal form { margin: 0; padding: 0; box-sizing: border-box; }

.redactor-modal input, .redactor-modal select, .redactor-modal textarea { box-sizing: border-box; display: block; width: 100%; font-family: inherit; font-size: 16px; height: 40px; outline: none; vertical-align: middle; background-color: #fff; border: 1px solid #cacfd4; border-radius: 0.1875em; box-shadow: none; padding: 0 .5em; }

.redactor-modal textarea { padding: .5em; height: auto; line-height: 1.5; vertical-align: top; }

.redactor-modal select { -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"12\" viewBox=\"0 0 9 12\"><path fill=\"rgba%280, 0, 0, .4%29;\" d=\"M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z\"/></svg>"); background-repeat: no-repeat; background-position: right .65em center; padding-right: 28px; }

.redactor-modal select[multiple] { background-image: none; height: auto; padding: .5em .75em; }

.redactor-modal input[type="file"] { width: auto; border: none; padding: 0; height: auto; background: none; box-shadow: none; display: inline-block; }

.redactor-modal input[type="radio"], .redactor-modal input[type="checkbox"] { display: inline-block; width: auto; height: auto; padding: 0; vertical-align: middle; position: relative; bottom: 0.15rem; font-size: 115%; margin-right: 3px; }

.redactor-modal .form-item { margin-bottom: 20px; }

.redactor-modal .form-item:last-child { margin-bottom: 0; }

.redactor-modal fieldset { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 16px; padding-bottom: 20px; margin-bottom: 20px; }

.redactor-modal fieldset .form-item { margin-bottom: 12px; }

.redactor-modal label { display: block; color: #555; margin-bottom: 0.25em; font-size: 14px; }

.redactor-modal label .desc, .redactor-modal label .success, .redactor-modal label .error { text-transform: none; font-weight: normal; }

.redactor-modal label.checkbox { font-size: 16px; line-height: 1.5; cursor: pointer; color: inherit; }

.redactor-modal .form-checkboxes label.checkbox { display: inline-block; margin-right: 1em; }

.redactor-modal input:hover, .redactor-modal textarea:hover, .redactor-modal select:hover { outline: none; background-color: #fff; border-color: #969fa9; box-shadow: none; }

.redactor-modal input:focus, .redactor-modal textarea:focus, .redactor-modal select:focus { transition: all linear .2s; outline: none; background-color: #fff; border-color: rgba(0, 125, 255, 0.5); box-shadow: 0 0 3px rgba(0, 125, 255, 0.5); }

.redactor-modal input.error, .redactor-modal textarea.error, .redactor-modal select.error { background-color: rgba(255, 50, 101, 0.1); border: 1px solid #ff7f9e; }

.redactor-modal input.error:focus, .redactor-modal textarea.error:focus, .redactor-modal select.error:focus { border-color: #ff3265; box-shadow: 0 0 1px #ff3265; }

.redactor-modal input.success, .redactor-modal textarea.success, .redactor-modal select.success { background-color: rgba(47, 196, 182, 0.1); border: 1px solid #65dacf; }

.redactor-modal input.success:focus, .redactor-modal textarea.success:focus, .redactor-modal select.success:focus { border-color: #2fc4b6; box-shadow: 0 0 1px #2fc4b6; }

.redactor-modal input:disabled, .redactor-modal input:disabled:hover, .redactor-modal input.disabled, .redactor-modal input.disabled:hover, .redactor-modal textarea:disabled, .redactor-modal textarea:disabled:hover, .redactor-modal textarea.disabled, .redactor-modal textarea.disabled:hover, .redactor-modal select:disabled, .redactor-modal select:disabled:hover, .redactor-modal select.disabled, .redactor-modal select.disabled:hover { resize: none; opacity: .6; cursor: default; font-style: italic; color: rgba(0, 0, 0, 0.5); border: 1px solid #cacfd4; box-shadow: none; background-color: #fff; }

.redactor-modal .req { position: relative; top: 1px; font-weight: bold; color: #ff3265; font-size: 110%; }

.redactor-modal .desc { color: rgba(51, 51, 51, 0.5); font-size: 12px; }

.redactor-modal span.desc { margin-left: 0.25em; }

.redactor-modal div.desc { margin-top: 0.25em; }

.redactor-modal span.success, .redactor-modal span.error { font-size: 12px; margin-left: 0.25em; }

.redactor-modal div.desc { margin-bottom: -0.5em; }

.redactor-modal .redactor-close { position: absolute; top: 16px; right: 12px; font-size: 30px; line-height: 30px; padding: 0px 4px; color: #000; opacity: .3; cursor: pointer; }

.redactor-modal .redactor-close:hover { opacity: 1; }

.redactor-modal .redactor-close:before { content: '\00d7'; }

.redactor-modal button { display: inline-flex; align-items: center; text-decoration: none; text-align: center; font-family: inherit; font-size: 15px; font-weight: 500; color: #007dff; background-color: #fff; border-radius: 3px; border: 2px solid #007dff; min-height: 40px; outline: none; padding: 0.5em 1.25em; cursor: pointer; line-height: 1.2; vertical-align: middle; -webkit-appearance: none; }

.redactor-modal button:hover { outline: none; text-decoration: none; background: none; color: rgba(0, 125, 255, 0.6); border-color: rgba(0, 125, 255, 0.5); }

.redactor-modal button.redactor-button-secondary { border-color: #2a2e34; color: #2a2e34; }

.redactor-modal button.redactor-button-secondary:hover { color: rgba(42, 46, 52, 0.6); border-color: rgba(42, 46, 52, 0.5); }

.redactor-modal button.redactor-button-danger, .redactor-modal button.redactor-button-unstyled { background: none; border-color: transparent; color: rgba(42, 46, 52, 0.6); }

.redactor-modal button.redactor-button-danger:hover, .redactor-modal button.redactor-button-unstyled:hover { background: none; border-color: transparent; color: #ff3265; text-decoration: underline; }

.redactor-modal .redactor-modal-group:after { content: ""; display: table; clear: both; }

.redactor-modal .redactor-modal-side { float: left; width: 30%; margin-right: 4%; }

.redactor-modal .redactor-modal-side img { max-width: 100%; height: auto; display: block; }

.redactor-modal .redactor-modal-area { float: left; width: 66%; }

.redactor-modal[dir="rtl"] .redactor-close { left: 12px; right: auto; }

.redactor-modal[dir="rtl"] textarea { direction: ltr; text-align: left; }

.redactor-modal[dir="rtl"] .redactor-modal-footer button.redactor-button-unstyled { float: left; margin-left: 0; }

.redactor-modal-header { padding: 20px; font-size: 18px; line-height: 24px; font-weight: bold; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.redactor-modal-header:empty { display: none; }

.redactor-modal-body { padding: 32px 48px; padding-bottom: 40px; }

.redactor-modal-footer { padding: 24px; border-top: 1px solid rgba(0, 0, 0, 0.05); overflow: hidden; }

.redactor-modal-footer button { margin-right: 4px; }

.redactor-modal-footer button.redactor-button-unstyled { margin-right: 0; float: right; }

.redactor-modal-footer:empty { display: none; }

.redactor-modal-tabs { display: flex; border-bottom: 2px solid rgba(0, 0, 0, 0.05); margin-bottom: 1em; }

.redactor-modal-tabs a { font-size: 15px; padding: 2px 0; text-decoration: none; color: rgba(0, 0, 0, 0.5); border-bottom: 2px solid transparent; margin-bottom: -2px; margin-right: 14px; }

.redactor-modal-tabs a:hover { transition: all linear .2s; }

.redactor-modal-tabs a:hover, .redactor-modal-tabs a.active { font-weight: 500; color: #007dff; border-bottom-color: #007dff; }

.redactor-styles { margin: 0; padding: 16px 18px; color: #333; font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-size: 1em; line-height: 1.5; box-sizing: border-box; }

.redactor-styles *, .redactor-styles *:before, .redactor-styles *:after { box-sizing: inherit; }

.redactor-styles[dir="rtl"] { direction: rtl; unicode-bidi: embed; }

.redactor-styles[dir="rtl"] ul li, .redactor-styles[dir="rtl"] ol li { text-align: right; }

.redactor-styles[dir="rtl"] ul, .redactor-styles[dir="rtl"] ol, .redactor-styles[dir="rtl"] ul ul, .redactor-styles[dir="rtl"] ol ol, .redactor-styles[dir="rtl"] ul ol, .redactor-styles[dir="rtl"] ol ul { margin: 0 1.5em 0 0; }

.redactor-styles[dir="rtl"] figcaption { text-align: right; }

.redactor-styles ul[dir="rtl"], .redactor-styles ul[dir="rtl"] ul, .redactor-styles ul[dir="rtl"] ol, .redactor-styles ol[dir="rtl"], .redactor-styles ol[dir="rtl"] ul, .redactor-styles ol[dir="rtl"] ol { margin: 0 1.5em 0 0; }

.redactor-styles ul[dir="rtl"] li, .redactor-styles ol[dir="rtl"] li { text-align: right; }

.redactor-styles a, .redactor-styles a:hover { color: #3397ff; }

.redactor-styles p, .redactor-styles dl, .redactor-styles blockquote, .redactor-styles hr, .redactor-styles pre, .redactor-styles table, .redactor-styles figure, .redactor-styles address { padding: 0; margin: 0; margin-bottom: 1em; }

.redactor-styles ul, .redactor-styles ol { padding: 0; }

.redactor-styles ul, .redactor-styles ul ul, .redactor-styles ul ol, .redactor-styles ol, .redactor-styles ol ul, .redactor-styles ol ol { margin: 0 0 0 1.5em; }

.redactor-styles ul li, .redactor-styles ol li { text-align: left; }

.redactor-styles ol ol li { list-style-type: lower-alpha; }

.redactor-styles ol ol ol li { list-style-type: lower-roman; }

.redactor-styles ul, .redactor-styles ol { margin-bottom: 1em; }

.redactor-styles h1, .redactor-styles h2, .redactor-styles h3, .redactor-styles h4, .redactor-styles h5, .redactor-styles h6 { font-weight: bold; color: #111; text-rendering: optimizeLegibility; margin: 0; padding: 0; margin-bottom: 0.5em; line-height: 1.2; }

.redactor-styles h1 { font-size: 2.0736em; }

.redactor-styles h2 { font-size: 1.728em; }

.redactor-styles h3 { font-size: 1.44em; }

.redactor-styles h4 { font-size: 1.2em; }

.redactor-styles h5 { font-size: 1em; }

.redactor-styles h6 { font-size: 0.83333em; text-transform: uppercase; letter-spacing: .035em; }

.redactor-styles blockquote { font-style: italic; color: rgba(0, 0, 0, 0.5); border: none; }

.redactor-styles table { width: 100%; }

.redactor-styles time, .redactor-styles small, .redactor-styles var, .redactor-styles code, .redactor-styles kbd, .redactor-styles mark { display: inline-block; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 87.5%; line-height: 1; color: rgba(51, 51, 51, 0.9); }

.redactor-styles var, .redactor-styles cite { opacity: .6; }

.redactor-styles var { font-style: normal; }

.redactor-styles dfn, .redactor-styles abbr { text-transform: uppercase; }

.redactor-styles dfn[title], .redactor-styles abbr[title] { text-decoration: none; border-bottom: 1px dotted rgba(0, 0, 0, 0.5); cursor: help; }

.redactor-styles code, .redactor-styles kbd { position: relative; top: -1px; padding: 0.25em; padding-bottom: 0.2em; border-radius: 2px; }

.redactor-styles code { background-color: #bdc3c7; }

.redactor-styles mark { border-radius: 2px; padding: 0.125em 0.25em; background-color: #fdb833; }

.redactor-styles kbd { border: 1px solid #e5e7e9; }

.redactor-styles sub, .redactor-styles sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

.redactor-styles sub { bottom: -0.25em; }

.redactor-styles sup { top: -0.5em; }

.redactor-styles pre { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: .9em; }

.redactor-styles pre, .redactor-styles pre code { background-color: #f6f7f8; padding: 0; top: 0; display: block; line-height: 1.5; color: rgba(51, 51, 51, 0.85); overflow: none; white-space: pre-wrap; }

.redactor-styles pre { padding: 1rem; }

.redactor-styles table { border-collapse: collapse; max-width: 100%; width: 100%; }

.redactor-styles table caption { text-transform: uppercase; padding: 0; color: rgba(0, 0, 0, 0.5); font-size: 11px; }

.redactor-styles table th, .redactor-styles table td { border: 1px solid #eee; padding: 16px; padding-bottom: 15px; }

.redactor-styles table tfoot th, .redactor-styles table tfoot td { color: rgba(0, 0, 0, 0.5); }

.redactor-styles img, .redactor-styles video, .redactor-styles audio, .redactor-styles embed, .redactor-styles object { max-width: 100%; }

.redactor-styles img, .redactor-styles video, .redactor-styles embed, .redactor-styles object { height: auto !important; }

.redactor-styles img { vertical-align: middle; -ms-interpolation-mode: bicubic; }

.redactor-styles figcaption { display: block; opacity: .6; font-size: 12px; font-style: italic; text-align: left; }

.upload-redactor-box { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; border: 5px dashed rgba(0, 125, 255, 0.15); position: relative; width: 100%; min-height: 220px; background: #fff; cursor: pointer; overflow: hidden; text-align: center; }

.upload-redactor-placeholder { font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.3); font-style: italic; }

.upload-redactor-hover { background-color: rgba(0, 125, 255, 0.075); }

.upload-redactor-error { background-color: rgba(255, 50, 101, 0.075); }

.upload-redactor-box-hover { outline: 5px dashed rgba(0, 125, 255, 0.3); }

.upload-redactor-box-error { outline: 5px dashed rgba(255, 50, 101, 0.3); }

.redactor-structure h1, .redactor-structure h2, .redactor-structure h3, .redactor-structure h4, .redactor-structure h5, .redactor-structure h6, .redactor-structure div { position: relative; }

.redactor-structure h1:before, .redactor-structure h2:before, .redactor-structure h3:before, .redactor-structure h4:before, .redactor-structure h5:before, .redactor-structure h6:before, .redactor-structure div:before { width: 24px; position: absolute; font-size: 10px; font-weight: normal; opacity: .5; left: -26px; top: 50%; margin-top: -7px; text-align: right; }

.redactor-structure h1:before { content: "h1"; }

.redactor-structure h2:before { content: "h2"; }

.redactor-structure h3:before { content: "h3"; }

.redactor-structure h4:before { content: "h4"; }

.redactor-structure h5:before { content: "h5"; }

.redactor-structure h6:before { content: "h6"; }

.redactor-structure div:before { content: "div"; }

#redactor-progress { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000000; height: 10px; }

#redactor-progress span { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; display: block; width: 100%; height: 100%; background-color: #007dff; background-size: 40px 40px; }

@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; }
  to { background-position: 0 0; } }

@-o-keyframes progress-bar-stripes { from { background-position: 40px 0; }
  to { background-position: 0 0; } }

@keyframes progress-bar-stripes { from { background-position: 40px 0; }
  to { background-position: 0 0; } }

.redactor-box-fullscreen { z-index: 1051; position: fixed; top: 0; left: 0; width: 100%; }

.redactor-box-fullscreen-target { position: absolute !important; }

.redactor-body-fullscreen .redactor-dropdown, .redactor-body-fullscreen .redactor-context-toolbar { z-index: 1052; }

.redactor-body-fullscreen #redactor-overlay { z-index: 1098; }

.redactor-body-fullscreen #redactor-modal { z-index: 1099; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.redactor-dropdown-box-format .redactor-dropdown-p { font-family: 'Open Sans' !important; font-size: 12px; line-height: 24px; }

.redactor-dropdown-box-format .redactor-dropdown-h1 { font-family: 'Open Sans' !important; font-size: 32px; font-weight: bold; line-height: 40px; }

.redactor-dropdown-box-format .redactor-dropdown-h2 { font-family: 'Open Sans' !important; font-size: 24px; line-height: 30px; }

.redactor-dropdown-box-format .redactor-dropdown-h3 { font-family: 'Open Sans' !important; font-size: 14px; line-height: 15px; }

.redactor-dropdown-box-format .redactor-dropdown-h4 { font-family: 'Open Sans' !important; font-size: 13px; line-height: 13px; }

.redactor-dropdown-box-format .redactor-dropdown-h5 { font-family: 'Open Sans' !important; font-size: 12px; line-height: 12px; }

.redactor-dropdown-box-format .redactor-dropdown-h6 { font-family: 'Open Sans' !important; font-size: 11px; line-height: 11px; }

.redactor-air { background: rgba(255, 255, 255, 0.9); min-width: 70px; }

.redactor-air li a { color: rgba(0, 0, 0, 0.75); height: 34px; }

.redactor-air li a.re-button-icon { font-size: 12px; padding: 12px; }

#redactor-modal-overlay { background-color: rgba(0, 0, 0, 0.5); }

.fractal-redactor { position: relative; }

.fractal-redactor .redactor-box { border: none; }

.fractal-redactor .redactor-styles blockquote { border-left: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); font-style: italic; margin-bottom: 16px; padding-left: 24px; position: relative; }

.fractal-redactor .redactor-styles div { font-family: 'Open Sans' !important; font-size: 12px; line-height: normal; }

.fractal-redactor .redactor-styles h1 { font-family: 'Open Sans' !important; font-size: 32px; font-weight: bold; line-height: 40px; margin-bottom: 16px; }

.fractal-redactor .redactor-styles h2 { font-family: 'Open Sans' !important; font-size: 24px; line-height: 30px; margin-bottom: 14px; }

.fractal-redactor .redactor-styles h3 { font-family: 'Open Sans' !important; font-size: 14px; line-height: 15px; margin-bottom: 12px; }

.fractal-redactor .redactor-styles h4 { font-family: 'Open Sans' !important; font-size: 13px; line-height: 13px; margin-bottom: 11px; }

.fractal-redactor .redactor-styles h5 { font-family: 'Open Sans' !important; font-size: 12px; line-height: 12px; margin-bottom: 10px; }

.fractal-redactor .redactor-styles h6 { font-family: 'Open Sans' !important; font-size: 11px; line-height: 11px; margin-bottom: 5px; }

.fractal-redactor .redactor-styles ul { margin: 0 0 16px 24px; }

.fractal-redactor .redactor-styles li { line-height: 24px; }

.fractal-redactor .redactor-styles p { font-family: 'Open Sans' !important; font-size: 12px; line-height: 24px; margin-bottom: 16px; }

.fractal-redactor .redactor-styles p:empty { min-height: 0; }

.fractal-redactor .redactor-styles p + h3, .fractal-redactor .redactor-styles ul + h3 { margin-top: 0; }

.fractal-redactor .redactor-styles pre { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.75); font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 90%; font-style: normal; line-height: 24px; margin-bottom: 16px; margin-top: 16px; padding: 16px 20px; word-wrap: normal; }

.fractal-redactor .redactor-styles ul { font-family: 'Open Sans'; font-size: 12px; line-height: normal; }

.fractal-redactor .redactor-styles figure { margin-bottom: 0; }

.fractal-redactor .redactor-styles.dynamic-resize-large::before, .fractal-redactor .redactor-styles.dynamic-resize-large p, .fractal-redactor .redactor-styles.dynamic-resize-large div, .fractal-redactor .redactor-styles.dynamic-resize-large a { font-size: 24px; line-height: 32px; }

.fractal-redactor .redactor-styles.dynamic-resize-small::before, .fractal-redactor .redactor-styles.dynamic-resize-small p, .fractal-redactor .redactor-styles.dynamic-resize-small div, .fractal-redactor .redactor-styles.dynamic-resize-small a { font-size: 14px; }

.fractal-redactor .redactor-styles .video-container { padding-bottom: 30%; }

.fractal-redactor .redactor-toolbar li { height: 34px; }

.fractal-redactor .redactor-toolbar li a { height: 34px; }

.fractal-redactor .redactor-toolbar li a.re-button-icon { font-size: 12px; padding: 12px; }

.fractal-redactor .redactor-toolbar a.re-button { color: #444647; }

.fractal-redactor .redactor-toolbar .fa-spinner { float: right; font-size: 14px; margin: 10px; }

.fractal-redactor .redactor-toolbar-box .re-button-tooltip { display: none; visibility: hidden; }

.fractal-redactor .f-redactor-word-count { font-size: 10px; padding-top: 4px; position: absolute; right: 0; }

.redactor-dropdown-ai.redactor-dropdown a { border-bottom: none; font-family: 'Lato', sans-serif; font-weight: normal; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-disabled { color: #999ea1; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2 { padding: 8px 8px 4px; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading span, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2 span { color: #797d7f; font-weight: 700; text-transform: uppercase; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading:hover, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2:hover { background-color: #fff; color: inherit; cursor: default; }

.redactor-dropdown-ai.redactor-dropdown .fa-robot { padding-right: 8px; }

.redactor-dropdown-customformat .redactor-dropdown-item-0 { font-size: 12px; font-weight: 400; line-height: 20px; }

.redactor-dropdown-customformat .redactor-dropdown-item-1 { font-size: 14px; font-weight: 600; line-height: 20px; }

.redactor-dropdown-customformat .redactor-dropdown-item-2 { font-size: 18px; font-weight: 400; line-height: 28px; }

.redactor-dropdown-customformat .redactor-dropdown-item-3 { font-size: 24px; font-weight: 400; line-height: 36px; }

.redactor-dropdown-item-disabled { cursor: not-allowed; }

.redactor-dropdown a:not(.redactor-dropdown-item-disabled) span { color: #000; }

.redactor-context-toolbar { z-index: 2147483600; }

#redactor-modal { z-index: 100002; }

#redactor-modal .redactor-ai-modal-text { font-family: 'Lato', sans-serif; font-size: 14px; padding-bottom: 16px; }

#redactor-modal .redactor-ai-modal-text + textarea { font-family: 'Lato', sans-serif; font-size: 14px; resize: none; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { html { overflow: auto; padding-right: 0 !important; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-dropdown { position: relative; }

.fractal-dropdown * { box-sizing: border-box; }

.fractal-dropdown.f-dropdown-align-left .f-dropdown-options { left: 0; right: auto; }

.f-dropdown-btn { align-items: center; border-radius: 4px; color: #797d7f; cursor: pointer; display: flex; font-size: 14px; font-weight: 500; height: 32px; justify-content: center; line-height: 32px; padding: 0 16px; }

.f-dropdown-btn i { margin-left: 10px; }

.f-dropdown-btn .fa-ellipsis-h { font-size: 14px; margin: 0; }

.f-dropdown-btn:hover { background: #e7e9eb; border-color: #e7e9eb; }

.f-dropdown-btn:focus:not(.f-btn-primary) { background-color: #bdc3c7; border-color: #999ea1; color: #fff; outline: none; }

.f-dropdown-btn:focus:not(.f-btn-primary):not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.f-dropdown-btn:active:not(.f-btn-primary) { background: #999ea1; box-shadow: none; color: #fff; }

.f-dropdown-btn:disabled, .f-dropdown-btn.f-disabled { background: #fff; color: #bdc3c7; cursor: not-allowed; }

.f-dropdown-btn.f-dropdown-open:not(.f-btn-primary) { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

.f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):active, .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):focus, .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):focus:not(:active) { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

.f-dropdown-btn.f-dropdown-open.f-btn-primary { background: #1e8248; border-color: #1e8248; }

.f-dropdown-btn.f-dropdown-open.f-btn-primary:active, .f-dropdown-btn.f-dropdown-open.f-btn-primary:focus, .f-dropdown-btn.f-dropdown-open.f-btn-primary:focus:not(:active) { background: #1e8248; border-color: #1e8248; }

.f-dropdown-btn.f-dropdown-btn-round { border-radius: 50%; color: #fff; height: 24px; padding: 0; width: 24px; }

.f-dropdown-btn.f-dropdown-btn-round span { display: flex; font-size: 14px; margin-bottom: 8px; }

.f-dropdown-btn.f-dropdown-btn-round .fa-chevron-down { display: none; }

.f-dropdown-btn.f-dropdown-btn-round:hover, .f-dropdown-btn.f-dropdown-btn-round.f-dropdown-open, .f-dropdown-btn.f-dropdown-btn-round:focus { background-color: rgba(0, 0, 0, 0.25); border-color: transparent; }

.f-dropdown-btn.f-dropdown-btn-round:hover:not(:active), .f-dropdown-btn.f-dropdown-btn-round.f-dropdown-open:not(:active), .f-dropdown-btn.f-dropdown-btn-round:focus:not(:active) { box-shadow: none; }

.f-dropdown-btn.f-dropdown-btn-square { align-items: center; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; height: 32px; width: 32px; }

.f-dropdown-btn.f-dropdown-btn-square i { font-size: 14px; margin-left: 0; }

.f-dropdown-btn.f-dropdown-btn-square:focus { color: #797d7f; }

.f-dropdown-btn.f-dropdown-combined { border-radius: 0 4px 4px 0; margin-left: 0; padding: 6px 16px 6px 4px; }

.f-dropdown-btn.f-btn-borderless { border: none; }

.f-dropdown-arrow .f-dropdown-options li.f-selected-option:not(.f-init-selected) { background-color: #fff; }

.f-dropdown-arrow .f-dropdown-options li.f-selected-option:not(.f-init-selected):hover { background-color: #e7e9eb; }

.f-dropdown-options { background: #fff; border: 1px solid #e7e9eb; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); cursor: pointer; list-style: none; margin-top: 4px; overflow: auto; padding-bottom: 8px; padding-top: 8px; position: absolute; right: 0; top: 32px; width: 197px; z-index: 100001; }

.f-dropdown-options.f-options-nested { overflow: initial; }

.f-dropdown-options li { align-items: center; box-sizing: border-box; display: flex; font-size: 14px; font-weight: 500; height: 32px; line-height: 32px; padding-left: 16px; white-space: nowrap; width: 100%; }

.f-dropdown-options li span { overflow: hidden; text-overflow: ellipsis; }

.f-dropdown-options li.f-selected-option { background: #e7e9eb; }

.f-dropdown-options li.f-selected-option.f-warning { background: rgba(231, 76, 60, 0.2); }

.f-dropdown-options li:hover, .f-dropdown-options li:focus { background: #e7e9eb; }

.f-dropdown-options li.f-disabled, .f-dropdown-options li.f-disabled:hover, .f-dropdown-options li.f-disabled:focus { background: #fff; color: #999ea1; cursor: not-allowed; }

.f-dropdown-options li.f-warning { color: #e74c3c; }

.f-dropdown-options li.f-dropdown-divider { border-top: 1px solid #d5d9db; cursor: default; height: auto; margin: 8px 0 8px 16px; padding: 0; pointer-events: none; width: calc(100% - 32px); }

.f-dropdown-options li.f-dropdown-divider:hover, .f-dropdown-options li.f-dropdown-divider.f-selected-option { background: #fff; }

.f-dropdown-options li i { align-items: center; display: inline-flex; font-weight: normal; height: 24px; justify-content: center; margin-right: 4px; width: 24px; }

.f-dropdown-options > li > a:hover { background-color: transparent; }

.f-dropdown-options .fa-check { color: transparent; flex: 0; margin: 0 0 0 8px; }

.f-dropdown-options .fa-check.f-dropdown-item-selected { color: #1abc9c; }

.f-dropdown-options li.f-init-selected { align-items: center; background: #ade7dc; display: flex; }

.f-dropdown-options li.f-init-selected .fa-check { margin: 0 8px; }

.f-dropdown-options li.f-init-selected:hover, .f-dropdown-options li.f-init-selected:focus { background: #6dd4c0; }

.f-dropdown-options.f-dropdown-options-nested { left: 182px; top: -13px; }

.f-dropdown-options.f-nested-left { overflow: visible; right: 8px; }

.f-dropdown-options.f-nested-left .f-dropdown-options-nested { left: -214px; }

.f-dropdown-options.f-nested-left li.f-nested-left-parent { display: block; }

.f-dropdown-options.f-nested-left li.f-nested-left-parent .f-menu-item { position: relative; }

.f-dropdown-wide { width: 100%; }

.f-dropdown-wide .fa-chevron-down { color: #444647; }

.f-dropdown-wide .f-dropdown-btn { height: 40px; justify-content: space-between; line-height: initial; margin: 0 8px; padding: 0; }

.f-dropdown-wide .f-dropdown-btn:hover, .f-dropdown-wide .f-dropdown-btn:active, .f-dropdown-wide .f-dropdown-btn.f-dropdown-open { background-color: transparent; border-color: transparent; color: inherit; outline: none; }

.f-dropdown-wide .f-dropdown-btn:hover:not(:active), .f-dropdown-wide .f-dropdown-btn:active:not(:active), .f-dropdown-wide .f-dropdown-btn.f-dropdown-open:not(:active) { box-shadow: 0 0 0 2px transparent; }

.f-dropdown-wide .f-dropdown-options { padding-bottom: 0; padding-top: 0; top: 100%; width: 100%; }

.f-dropdown-wide .f-dropdown-options li { height: auto; line-height: initial; min-height: 40px; padding-left: 8px; }

.f-dropdown-wide .f-dropdown-options li .fa-check { margin: 0 8px 0 0; }

.f-dropdown-full-click .f-dropdown-options:not(.f-options-nested) li * { display: inline-flex; width: 100%; }

.f-dropdown-full-click .f-dropdown-options:not(.f-options-nested) li .fa-check { margin: 0 8px 0 0; }

.f-dropdown-full-click .f-options-nested li .f-menu-item, .f-dropdown-full-click .f-nested-left li .f-menu-item { display: block; height: 32px; width: 100%; }

.f-dropdown-full-click .f-options-nested li .fa-check, .f-dropdown-full-click .f-nested-left li .fa-check { margin: 0 8px 0 0; }

.f-options-nested .f-menu-item { position: relative; }

.f-options-nested .f-menu-item span { white-space: nowrap; }

.f-options-nested .f-menu-item .fa-caret-right { display: block; font-weight: 900; left: auto; margin-top: 0; position: absolute; right: 0; top: 10px; width: 16px; }

.f-dropdown-defaults { color: #444647; font-family: 'Lato', 'Open Sans', sans-serif; }

.darkMode .f-dropdown-btn { background-color: #444647; border: 2px solid rgba(0, 0, 0, 0.2); color: #fff; }

.darkMode .f-dropdown-btn:hover, .darkMode .f-dropdown-btn:focus { background-color: rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.2); }

.darkMode .f-dropdown-btn:active, .darkMode .f-dropdown-btn.f-dropdown-open { background-color: rgba(0, 0, 0, 0.2); border-color: transparent; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-duplicate-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { color: #444647; height: 90vh; }

.fractal-duplicate-modal.ReactModalPortal .f-modal-body { max-width: 600px; padding: 24px; }

.fractal-duplicate-modal.ReactModalPortal .f-modal-body > p { font-size: 14px; margin-bottom: 24px; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form > div, .fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-memo-dup .fractal-input { align-items: center; display: flex; margin-bottom: 16px; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-error { border: 1px solid #e74c3c; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-memo-dup { align-items: flex-start; padding-left: 0; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-memo-dup .fractal-clickoutside { align-items: center; display: flex; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-memo-dup .fractal-input { margin-bottom: 0; margin-top: 8px; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-memo-dup .fractal-input label { margin-left: -22px; }

.fractal-duplicate-modal.ReactModalPortal .f-duplicate-form .f-name-error { color: #e74c3c; display: flex; font-size: 12px; margin-left: 208px; margin-top: -16px; }

.fractal-duplicate-modal.ReactModalPortal label { font-size: 12px; margin-top: 8px; }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead { width: auto; }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead .fractal-spinner-outer { right: 16px; }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead .__react_component_tooltip { max-width: 300px; }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead .f-new-user-role { flex-basis: 100%; transform: translate(208px, 4px); }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead .f-tag-wrapper { max-width: 315px; }

.fractal-duplicate-modal.ReactModalPortal .f-member-typeahead .f-tag-wrapper > span { overflow: hidden; text-overflow: ellipsis; }

.fractal-duplicate-modal.ReactModalPortal .fractal-dropdown .f-dropdown-btn { border: 1px solid #bdc3c7; justify-content: space-between; max-height: 30px; padding: 8px; width: 335px; }

.fractal-duplicate-modal.ReactModalPortal .fractal-dropdown li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-duplicate-modal.ReactModalPortal .fractal-dropdown .f-dropdown-options { width: 335px; }

.fractal-duplicate-modal.ReactModalPortal .fractal-input input { background: transparent; font-size: 13px; max-height: 30px; padding-left: 8px; width: 335px; }

.fractal-duplicate-modal.ReactModalPortal .fractal-textarea textarea { background: transparent; font-size: 13px; height: 64px; resize: none; width: 335px; }

.fractal-duplicate-modal.ReactModalPortal .f-char-count { color: #999ea1; font-size: 10px; margin: -12px 0 16px 208px; }

.fractal-duplicate-modal.ReactModalPortal .f-access-text { color: #444647; }

.fractal-duplicate-modal.ReactModalPortal .f-access-text strong { font-weight: bold; }

.fractal-duplicate-modal.ReactModalPortal .react-tags { flex-shrink: 60; padding: 4px 0 0 4px; width: 335px; }

.bs .fractal-duplicate-modal label { align-self: baseline; display: flex; justify-content: left; margin-bottom: 0; margin-right: 8px; width: 200px; }

.bs .fractal-duplicate-modal label span.f-required { color: #e74c3c; }

.bs .fractal-duplicate-modal label .fa-info-circle { color: #3498db; }

.bs .fractal-duplicate-modal .f-memo-dup .f-radio-wrapper label { font-size: 14px; justify-content: left; margin-left: 8px; margin-right: 0; margin-top: 4px; }

.bs .fractal-duplicate-modal .f-memo-dup .fractal-clickoutside label { justify-content: right; margin-left: -22px; margin-right: 8px; }

.f-working-it { align-items: center; background: rgba(0, 0, 0, 0.5); display: flex; height: 100%; justify-content: center; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999999999; }

.f-working-it span { color: #fff; font-size: 22px; font-weight: bold; }

.f-working-it .fractal-spinner-outer { position: absolute; }

.f-working-it .fractal-spinner-outer .spinner-inner .fa-spinner { color: #fff; font-size: 34px; margin-top: 90px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn { background-color: #fff; border: 1px solid #444647; color: #444647; font-size: 14px; height: 32px; margin-top: 4px; padding: 8px; width: 200px; }

.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 200px; }

.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn i { margin-left: 4px; padding-right: 8px; }

.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn i.fa-chevron-down { font-size: 12px; }

.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn.f-dropdown-open, .f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn:active { background-color: #444647; color: #fff; }

.f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn.f-dropdown-open i.fa-chevron-down, .f-community-admin-nav-dropdown .f-nav-dropdown.f-dropdown-btn:active i.fa-chevron-down { color: #fff; }

.f-community-admin-nav-dropdown ul.f-dropdown-options { color: #797d7f; max-width: none; white-space: nowrap; width: 200px; z-index: 999; }

.f-community-admin-nav-dropdown ul.f-dropdown-options li { font-size: 14px; font-weight: normal; padding-left: 16px; }

.f-community-admin-nav-dropdown .f-dropdown-open { background: #444647; color: #fff; }

.f-community-admin-nav-dropdown .fa-sort { margin-left: 0; margin-right: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-toast { align-items: center; border-radius: 5px; color: #fff; display: flex; font-size: 12px; left: 50%; line-height: 16px; max-width: 454px; padding: 20px; position: fixed; top: 18px; transform: translateX(-50%); z-index: 100000000001; /* @todo only need 1 failure style, rm one */ }

.fractal-toast a, .fractal-toast a:focus, .fractal-toast a:focus-visible, .fractal-toast a:visited { color: #fff; text-decoration: underline; }

.fractal-toast a:hover, .fractal-toast a:focus:hover, .fractal-toast a:focus-visible:hover, .fractal-toast a:visited:hover { color: #fff; text-decoration: underline; }

.fractal-toast .icon-wrapper { display: inline-block; font-size: 16px; margin-right: 16px; top: calc(50% - 12px); }

.fractal-toast .icon-wrapper i { height: 26px; width: 26px; }

.fractal-toast span { display: inline-block; max-width: 300px; }

.fractal-toast.center-align span { line-height: 26px; }

.fractal-toast.info { background-color: #3498db; }

.fractal-toast.success { background-color: #30a14a; }

.fractal-toast.error, .fractal-toast.failure { background-color: #e74c3c; }

.fractal-toast.warn { background-color: #fff; border: solid 1px; border-color: #e74c3c; color: #444647; }

.fractal-toast.warn .icon-wrapper { color: #e74c3c; font-size: 16px; }

.fractal-toast.delay { background-color: #fcf3cf; border: solid 1px; border-color: #f1c40f; color: #444647; }

.fractal-toast.delay .icon-wrapper.fa-exclamation-circle { color: #f1c40f; font-size: 16px; }

.fractal-toast.delay .icon-wrapper.fa-times { left: 14px; position: relative; }

.fractal-toast.delay .icon-wrapper.fa-times:hover { cursor: pointer; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-modal.fractal-spark-create-modal * { box-sizing: content-box; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer { height: auto; max-width: 400px; padding: 0; width: auto; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner { height: auto; min-width: 420px; padding: 20px; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-header { border: none; margin-bottom: 18px; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-header .title { padding: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-header .close-button { margin: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body { height: auto !important; margin: 8px 0 0; padding: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor { border-bottom: 1px solid #999ea1; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor .redactor-box { background: none; border: 0; font-family: 'Open Sans'; font-size: 24px; font-weight: 400; padding: 0; resize: none; width: 100%; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor .redactor-box::placeholder { color: #999ea1; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor .redactor-box:focus { outline: none; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor .redactor-box .redactor-styles { margin-bottom: 12px; min-height: 35px; padding: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .fractal-redactor .redactor-box .redactor-styles div { font-size: 24px; word-wrap: break-word; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload { margin-top: 12px; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload .f-list-file-error-row .f-list-file-name { color: #e74c3c; font-weight: 600; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload .f-upload-files-link { bottom: 25px; left: 20px; position: absolute; z-index: 103; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload .f-upload-files-link .fa { align-items: center; border-radius: 50%; cursor: pointer; display: flex; font-size: 22px; font-weight: 300; height: 32px; justify-content: center; width: 32px; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload .f-upload-files-link .fa:hover { background: #f5f5f6; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-body .f-new-spark-fileupload .f-upload-files-link .fa:focus { background: #bdc3c7; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer { align-items: center; background: none; border: none; display: flex; height: auto; justify-content: flex-end; padding: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-save-spark-button { margin: 8px 15px 8px 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-save-spark-button:nth-child(2) { margin-right: 0; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-add-details-button i.fa-spinner { color: #797d7f; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-upload-button { align-items: center; border-radius: 50%; cursor: pointer; display: flex; height: 32px; justify-content: center; margin-left: 9px; width: 32px; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-upload-button:hover { background: #f5f5f6; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-upload-button:focus { background: #bdc3c7; }

.fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-upload-button .fa { font-size: 22px; }

@media (max-width: 399px) { .fractal-modal.fractal-spark-create-modal .wrapper-outer { height: 100%; }
  .fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner { height: 100%; }
  .fractal-modal.fractal-spark-create-modal .wrapper-outer .wrapper-inner .fractal-modal-footer { position: relative; } }

.f-white-toast-link { color: white; font-weight: 400; margin-left: 4px; text-decoration: underline; }

.f-white-toast-link:link, .f-white-toast-link:focus, .f-white-toast-link:hover, .f-white-toast-link:visited { color: white; text-decoration: underline; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle { color: #797d7f; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle[disabled], .darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle[disabled]:hover, .darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle[disabled]:active, .darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle[disabled]:focus { background: transparent; box-shadow: none; color: #bdc3c7; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle:hover { background: #e7e9eb; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle:focus { background: #bdc3c7; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle:focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; color: #fff; }

.darkMode .fractal-modal.fractal-spark-create-modal .fractal-button.f-btn-subtle:active { background: #999ea1; box-shadow: none; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav-search-results { background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; left: 0; position: absolute; top: 30px; width: 380px; z-index: 1; }

.fractal-global-nav-search-results .f-inner-search-results { max-height: 500px; overflow-y: auto; }

.fractal-global-nav-search-results .f-results-see-all { align-items: center; border-top: 1px solid #f5f5f6; display: flex; flex-shrink: 0; font-size: 11px; height: 50px; justify-content: center; }

.fractal-global-nav-search-results .f-results-see-all a { cursor: pointer; font-weight: bold; }

.fractal-global-nav-search-results .f-result-header { align-items: center; background: #f5f5f6; color: #444647; display: flex; height: 40px; justify-content: space-between; padding: 0 8px 0 15px; }

.fractal-global-nav-search-results .f-result-header .f-header-left { align-items: center; display: flex; font-size: 15px; }

.fractal-global-nav-search-results .f-result-header .f-header-left .fa { padding-right: 15px; }

.fractal-global-nav-search-results .f-result-header .f-header-left h2 { font-size: 14px; font-weight: 600; margin: 0; }

.fractal-global-nav-search-results .f-result-header .f-of { cursor: pointer; font-size: 11px; font-weight: bold; }

.fractal-global-nav-search-results .f-result { align-items: center; display: flex; padding: 4px 8px; }

.fractal-global-nav-search-results .f-result .member-img { height: 32px; width: 32px; }

.fractal-global-nav-search-results .f-result:hover, .fractal-global-nav-search-results .f-result:focus { background: #f5f5f6; text-decoration: none; }

.fractal-global-nav-search-results .f-result .f-result-image { height: 24px; width: 24px; }

.fractal-global-nav-search-results .f-result .f-result-text { color: #444647; display: flex; flex: 1; flex-direction: column; font-size: 11px; min-width: 0; padding-left: 10px; text-decoration: none; }

.fractal-global-nav-search-results .f-result .f-result-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-global-nav-search-results .f-result .f-result-text .f-result-bold { font-weight: bold; line-height: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav .f-nav-search-wrapper { flex-grow: 1; max-width: 380px; }

.fractal-global-nav .f-nav-search { align-items: center; background: rgba(0, 0, 0, 0.1); border-radius: 4px; color: #fff; display: flex; margin: 0 10px; position: relative; }

.fractal-global-nav .f-nav-search .fa-search { color: #fff; padding: 0 10px; }

.fractal-global-nav .f-nav-search .fa-spinner { color: #fff; font-size: 20px; margin-right: 8px; position: absolute; right: 0; top: 4px; }

.fractal-global-nav .f-nav-search .fractal-input { width: 90%; }

.fractal-global-nav .f-nav-search .fractal-input input { background: transparent; border: none; border-radius: 0; color: #fff; font-size: 12px; padding-left: 5px; width: 100%; }

.fractal-global-nav .f-nav-search .fractal-input input:focus { outline: none; }

.fractal-global-nav .f-nav-search .fractal-input input::placeholder { color: #fff; }

.fractal-global-nav .f-nav-search .fractal-input input::-ms-clear { display: none; }

.fractal-global-nav .f-nav-search .f-nav-search-tag { align-items: center; background: rgba(0, 0, 0, 0.2); border-radius: 4px; color: #d5d9db; display: flex; flex: 0 0 auto; font-weight: 100; justify-content: center; margin-left: 3px; padding: 3px 10px; }

.fractal-global-nav .f-nav-search .f-nav-search-tag .fa-times { padding-left: 10px; }

.fractal-global-nav .f-nav-search.f-focus { background: rgba(0, 0, 0, 0.25); }

.fractal-global-nav .f-nav-search.f-focus .f-empty .fa-search { color: #999ea1; }

.fractal-global-nav .f-nav-search.f-focus .fractal-input { width: 90%; }

.fractal-global-nav .f-nav-search.f-tag-shown .fractal-input { width: 66%; }

.fractal-global-nav .f-nav-search .fractal-recently-viewed-list { left: 0; position: absolute; top: 30px; }

.darkMode .fractal-global-nav input { background: transparent; color: inherit; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav { cursor: pointer; position: relative; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav button:focus span { border: 1px solid transparent; text-decoration: none; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-main-icon { font-size: 24px; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content { left: -148px; padding: 20px 0; width: 230px; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li { font-size: 13px; list-style: none; margin: 0 20px; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li i { margin-right: 10px; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li a { align-items: center; color: #797d7f; display: flex; padding: 7px 10px; text-decoration: none; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li a:focus span { border: 1px dashed #3498db; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li a:hover:focus span { border-color: transparent; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content li:hover { background: #f5f5f6; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content .f-menu-divider { border-bottom: 1px solid #d5d9db; margin: 5px 20px; padding: 0; }

.fractal-global-nav .f-nav-wrapper .f-global-nav-gear-nav .f-nav-content .f-nub { left: 160px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-item-list { max-height: 400px; overflow-y: auto; }

.f-item-list a.f-item:hover { text-decoration: none; }

.f-item-list .f-item-wrapper:last-of-type .f-item { border: 0; }

.f-item-list .f-item { border-bottom: 1px solid #d5d9db; color: #444647; display: flex; flex-direction: column; font-size: 11px; font-weight: normal; padding: 8px; text-decoration: none; }

.f-item-list .f-item .f-item-top { color: #444647; display: flex; }

.f-item-list .f-item .f-item-top img:not(.member-img) { height: 24px; width: 24px; }

.f-item-list .f-item .f-item-top .fractal-htmlpreview, .f-item-list .f-item .f-item-top .f-item-text { flex: 1; margin-left: 8px; }

.f-item-list .f-item .f-item-bottom { color: #797d7f; display: flex; font-size: 9px; justify-content: space-between; margin: 4px 0 0 32px; }

.f-item-list .f-item.f-unread { background: #f5f5f6; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav-messages .f-item-list .f-item .f-item-top .member-img, .fractal-global-nav-messages .f-item-list .f-item .f-item-top .member-initial { font-size: 16px; height: 50px; width: 50px; }

.fractal-global-nav-messages .f-item-list .f-item .f-item-top .f-member-info { display: flex; flex-direction: column; font-size: 11px; font-weight: bold; justify-content: center; margin-left: 8px; overflow: hidden; }

.fractal-global-nav-messages .f-item-list .f-item .f-item-top .f-member-info .f-message-body, .fractal-global-nav-messages .f-item-list .f-item .f-item-top .f-member-info .f-message-date { color: #797d7f; font-weight: normal; }

.fractal-global-nav-messages .f-item-list .f-item .f-item-top .f-member-info .f-message-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-global-nav-messages .f-item-list .f-item .f-item-top .f-member-info .f-message-date { font-size: 9px; line-height: 18px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav-notifications .f-item-wrapper { position: relative; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-top .member-image-v1 { height: 24px; width: 24px; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-top .member-image-v1 .member-img { height: 24px; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-top .member-image-v1 .member-initial { height: 24px; width: 24px; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-top .f-item-top-image { border-radius: 50%; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-top .fractal-htmlpreview { margin-right: 10px; word-wrap: break-word; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-name { display: flex; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-name .f-item-icon { height: 12px; width: 12px; }

.fractal-global-nav-notifications .f-item-wrapper .f-item-name span { padding-left: 4px; }

.fractal-global-nav-notifications .f-item-wrapper .fa-times-circle { font-size: 15px; position: absolute; right: 5px; top: 5px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-nav-icons { display: flex; }

.f-nav-icons .f-nav-icon { margin: 0 10px; position: relative; }

.f-nav-icons .f-nav-icon button { margin: 0; padding: 0; }

.f-nav-icons .f-nav-icon button:hover span { text-decoration: none; }

.f-nav-icons .f-nav-icon button:focus span { border: 1px solid transparent; text-decoration: none; }

.f-nav-icons .f-nav-icon .f-main-icon { cursor: pointer; font-family: 'Font Awesome 5 Pro'; font-weight: 900; }

.f-nav-icons .f-nav-icon .f-nub { height: 16px; left: 50%; overflow: hidden; position: absolute; top: -16px; transform: translateX(-50%); width: 32px; }

.f-nav-icons .f-nav-icon .f-nub::after { background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); content: ''; height: 16px; left: 50%; position: absolute; top: 100%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 16px; }

.f-nav-icons .f-nav-icon .f-empty .fa { font-size: 87px; }

.f-nav-icons .f-nav-icon .f-nav-icon-count { background: #e74c3c; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-sizing: content-box; color: #fff; font-size: 9px; min-width: 10px; padding: 2px; position: absolute; right: -6px; text-align: center; top: -6px; }

.f-nav-icons .f-user-menu-ft-days.f-nav-icon { color: #f4f4f4; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; }

#appcues-launch { display: none; }

.darkMode .f-global-nav .f-nav-icon .f-main-icon, .darkMode .f-global-nav .fractal-spark-nav-button-v1 .fa { color: #fff; }

.darkMode .f-global-nav .f-nav-icon .f-main-icon:hover:not(.f-active), .darkMode .f-global-nav .fractal-spark-nav-button-v1 .fa:hover:not(.f-active), .darkMode .f-global-nav .f-nav-icon .f-main-icon.f-active, .darkMode .f-global-nav .fractal-spark-nav-button-v1 .fa.f-active { color: #e7e9eb; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-user-menu-public-wrapper { position: relative; }

.f-user-menu-public-wrapper .f-user-menu-public { cursor: pointer; }

.f-user-menu-public-wrapper .f-user-menu-public img { border-radius: 50%; height: 35px; width: 35px; }

.f-user-menu-public-wrapper .f-public-user-dropdown { background: #fff; border-radius: 3px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); padding: 16px; position: absolute; right: -4px; top: calc(100% + 16px); width: 96px; z-index: 2147483600; }

.f-user-menu-public-wrapper .f-public-user-dropdown a { color: #444647; font-weight: 600; text-decoration: none; }

.f-user-menu-public-wrapper .f-public-user-dropdown a:active, .f-user-menu-public-wrapper .f-public-user-dropdown a:hover, .f-user-menu-public-wrapper .f-public-user-dropdown a:visited { color: #444647; }

.f-user-menu-public-wrapper .f-public-user-dropdown a .f-public-user-dropdown-row { align-items: center; cursor: pointer; display: flex; padding: 4px; }

.f-user-menu-public-wrapper .f-public-user-dropdown a .f-public-user-dropdown-row:hover { background: #f5f5f6; }

.f-user-menu-public-wrapper .f-public-user-dropdown a i { font-size: 14px; margin-right: 8px; }

.f-user-menu-public-wrapper .f-public-user-dropdown-nub { background: #fff; box-shadow: -1px -1px rgba(0, 0, 0, 0.3); height: 16px; position: absolute; right: 14px; top: -8px; transform: rotate(45deg); width: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-user-menu { color: #444647; margin-left: 10px; position: relative; }

.f-user-menu button { margin: 0; padding: 0; }

.f-user-menu button.fractal-button.f-btn-link:focus span { border: 1px dashed transparent; }

.f-user-menu .f-nub { height: 16px; overflow: hidden; position: absolute; right: -13px; top: -16px; transform: translateX(-50%); width: 32px; }

.f-user-menu .f-nub::after { background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); content: ''; height: 16px; left: 50%; position: absolute; top: 100%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 16px; }

.f-user-menu .member-img { border: 1px solid rgba(0, 0, 0, 0.1); height: 35px; max-width: 35px; min-height: 35px; min-width: 35px; width: 35px; }

.f-user-menu .member-image-v1::after { display: none; }

.f-user-menu .f-user-menu-display { background: #fff; border-radius: 3px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -moz-box-sizing: unset; -webkit-box-sizing: unset; box-sizing: unset; padding: 15px; position: absolute; right: 0; top: 50px; transition: opacity 500ms ease-in-out; width: 250px; z-index: 2147483600; }

.f-user-menu .f-user-menu-display .f-user-menu-top { display: flex; justify-content: center; }

.f-user-menu .f-user-menu-display .f-user-menu-top .member-image-v1 { cursor: default; margin: 0 15px 15px 0; }

.f-user-menu .f-user-menu-display .f-user-menu-top .member-image-v1 .member-initial { background: #1abc9c; border-radius: 50%; color: #fff; display: inline-block; height: 60px; text-align: center; text-decoration: none; width: 60px; }

.f-user-menu .f-user-menu-display .f-user-menu-top .member-image-v1 .member-initial span { display: inline-block; font-size: 20px; font-weight: 600; position: relative; top: 50%; transform: translateY(-50%); }

.f-user-menu .f-user-menu-display .f-user-menu-top .member-image-v1 img { max-height: 60px; max-width: 60px; min-height: 60px; min-width: 60px; }

.f-user-menu .f-user-menu-display .f-user-menu-top .f-user-menu-name-container { display: flex; flex-direction: column; justify-content: center; margin-bottom: 15px; max-width: 150px; }

.f-user-menu .f-user-menu-display .f-user-menu-top .f-user-menu-name-container .f-user-menu-name { font-size: 14px; font-weight: 600; }

.f-user-menu .f-user-menu-display .f-user-menu-top .f-user-menu-name-container span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 155px; }

.f-user-menu .f-user-menu-display .f-user-menu-links { text-align: center; }

.f-user-menu .f-user-menu-display .f-user-menu-ft { align-items: center; display: flex; flex-direction: column; font-family: Lato, 'Open Sans', arial, sans serif; justify-content: center; margin: 10px -15px -15px; padding: 0 20px 15px; text-align: center; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-days { font-style: italic; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn { align-items: center; background: #3498db; border-radius: 4px; box-sizing: border-box; color: #fff; display: flex; font-size: 18px; font-weight: 500; height: 40px; justify-content: center; letter-spacing: 0.36px; line-height: 48px; margin-top: 10px; padding: 0 20px; text-align: center; text-decoration: none; width: 174px; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn i { margin-right: 12px; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn i, .f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn a { color: #fff; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn a { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; }

.f-user-menu .f-user-menu-display .f-user-menu-ft .f-user-menu-ft-btn:hover { cursor: pointer; opacity: 0.95; }

.f-user-menu .f-pill { align-items: center; background-color: #f39c12; border-radius: 10px; color: #fff; display: flex; font-family: 'Lato', 'Open Sans', arial, sans serif; font-size: 10px; font-weight: 700; height: 15px; justify-content: center; margin-left: 8px; text-align: center; text-transform: uppercase; width: 53px; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display { width: 194px; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top { align-items: center; border-bottom: 1px solid #d5d9db; flex-direction: column; margin-bottom: 8px; position: relative; text-align: center; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .f-user-menu-name-container { max-width: 100%; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .member-image-v1 { margin-right: 0; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .f-user-menu-edit { background-color: rgba(0, 0, 0, 0.6); border-radius: 4px; color: #fff; font-size: 10px; height: 20px; line-height: 20px; position: absolute; right: 68px; top: 40px; width: 20px; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .fa-pencil { display: block; font-family: 'Font Awesome 5 Pro'; line-height: 20px; margin: 0 auto; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .f-user-menu-name { margin-bottom: 8px; }

.f-user-menu.f-user-menu-v2 .f-user-menu-display .f-user-menu-top .f-user-menu-name + span { color: #797d7f; }

.f-user-menu.f-user-menu-v2 nav li { font-size: 14px; list-style: none; margin: 0; }

.f-user-menu.f-user-menu-v2 nav li i { font-size: 14px; margin-right: 10px; width: 18px; }

.f-user-menu.f-user-menu-v2 nav li a { align-items: center; color: #797d7f; display: flex; padding: 7px 10px; text-decoration: none; }

.f-user-menu.f-user-menu-v2 nav li a:focus span { border: 1px dashed #3498db; }

.f-user-menu.f-user-menu-v2 nav li a:hover:focus span { border-color: transparent; }

.f-user-menu.f-user-menu-v2 nav li:hover { background: #f5f5f6; }

.f-user-menu.f-user-menu-v2 nav li.f-with-pill a { padding: 7px 0 7px 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-globalNavPlaceholder .f-placeholder-logo { height: 25px; width: 160px; }

.fractal-globalNavPlaceholder .f-placeholder-search { height: 25px; }

.fractal-globalNavPlaceholder .f-placeholder-circular { border-radius: 50%; height: 20px; margin: 0 10px; width: 20px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-global-nav { background: #f5f5f6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); font-size: 12px; height: 50px; position: sticky; top: 0; width: 100%; z-index: 1000; /* region: for when OPT_ENT_GLOBAL_NAV_UPDATES is disabled (weird global styles) */ /* end region */ }

.fractal-global-nav#global-nav-bar { height: auto; }

.fractal-global-nav .global-nav-btn { background: none; float: none; height: auto; }

.fractal-global-nav .global-nav-btn button { margin: 0; padding: 0; }

.fractal-global-nav.f-fixed { position: fixed; top: 0; }

.fractal-global-nav a { font-weight: normal; }

.fractal-global-nav .f-nav-wrapper { align-items: center; display: flex; height: 50px; justify-content: space-between; margin: 0 15px; }

.fractal-global-nav .f-nav-wrapper .f-nav-left { flex-grow: 1; margin-left: 16px; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-nav-subscription-links-container { align-items: center; display: flex; justify-content: center; width: 100%; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-nav-subscription-links-container .f-selected { font-weight: bold; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-nav-subscription-links-container .f-nav-subscription-link { color: #bdc3c7; cursor: pointer; font-size: 16px; margin-left: 40px; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-nav-subscription-links-container .f-nav-subscription-link i { cursor: auto; font-weight: normal; margin: 0 -23px 0 20px; }

.fractal-global-nav .f-nav-wrapper .f-nav-right { margin-right: 16px; }

.fractal-global-nav .f-nav-wrapper .f-nav-right #google_translate_element a { pointer-events: none; }

@media screen and (max-width: 830px) { .fractal-global-nav .f-nav-wrapper .f-nav-right { margin-left: 40px; } }

.fractal-global-nav .f-nav-wrapper .f-nav-left, .fractal-global-nav .f-nav-wrapper .f-nav-right { align-items: center; display: flex; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-nav-divider, .fractal-global-nav .f-nav-wrapper .f-nav-right .f-nav-divider { border-left: 1px solid rgba(0, 0, 0, 0.25); height: 24px; margin: 0 10px; width: 0; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .f-main-icon, .fractal-global-nav .f-nav-wrapper .f-nav-left .fa-plus-circle, .fractal-global-nav .f-nav-wrapper .f-nav-right .f-main-icon, .fractal-global-nav .f-nav-wrapper .f-nav-right .fa-plus-circle { font-size: 22px; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .fa-bell, .fractal-global-nav .f-nav-wrapper .f-nav-right .fa-bell { font-size: 20px; }

.fractal-global-nav .f-nav-wrapper .f-nav-left .fa-plus-circle, .fractal-global-nav .f-nav-wrapper .f-nav-right .fa-plus-circle { cursor: pointer; padding: 0 10px; }

.fractal-global-nav .f-nav-wrapper .f-empty { align-items: center; color: #999ea1; display: flex; flex-direction: column; font-size: 17px; font-weight: bold; justify-content: center; margin: 25px; }

.fractal-global-nav .f-nav-wrapper .f-empty .fa { font-size: 87px; margin-bottom: 25px; }

.fractal-global-nav .f-nav-wrapper .f-nav-logo { margin-right: 16px; }

.fractal-global-nav .f-nav-wrapper .f-nav-logo img { height: auto; max-height: 40px; max-width: 180px; width: auto; }

.fractal-global-nav .f-nav-wrapper .f-nav-content { background: #fff; border-radius: 3px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); position: absolute; top: 44px; transition: opacity 500ms ease-in-out; width: 300px; z-index: 2147483600; }

.fractal-global-nav .f-nav-wrapper .f-nav-content .f-item-header { border-bottom: 1px solid #bdc3c7; display: flex; justify-content: space-between; padding: 10px 8px 10px 0; }

.fractal-global-nav .f-nav-wrapper .f-nav-content .f-item-header h2 { align-items: center; display: flex; font-size: 12px; font-weight: 600; margin: 0; padding-left: 8px; }

.fractal-global-nav .f-nav-wrapper .f-nav-content .f-item-header .fa-spinner { font-size: 20px; }

.fractal-global-nav .f-nav-wrapper .f-nav-content .f-item-footer { align-items: center; border-top: 1px solid #bdc3c7; cursor: pointer; display: flex; height: 40px; justify-content: center; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-action-items { left: -196px; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-action-items .f-nub { left: 68%; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-messages { left: -154px; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-messages .f-nub { left: 55%; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-notifications { left: -112px; }

.fractal-global-nav .f-nav-wrapper .f-nav-content.fractal-global-nav-notifications .f-nub { left: 41%; }

.fractal-global-nav .f-nav-wrapper .f-hide { opacity: 0; visibility: hidden; }

.fractal-global-nav .f-nav-wrapper .f-show { opacity: 1; visibility: visible; }

@media (min-width: 1px) and (max-width: 767px) { .fractal-global-nav .f-nav-search, .fractal-global-nav .f-nav-icons, .fractal-global-nav .f-nav-divider, .fractal-global-nav .fractal-spark-nav-button-v1 { display: none; }
  .fractal-global-nav .f-nav-wrapper { width: calc(100% - 30px); /* minus margin */ }
  .fractal-global-nav .f-nav-wrapper .f-nav-right .f-placeholder-circular:not(:last-child) { display: none; } }

/* @todo revisit when we enable global nav component on other pages */
.enterprise-level .f-nav-wrapper, .webstorm-level .f-nav-wrapper, .f-global-nav-center .f-nav-wrapper { margin: 0 auto; max-width: 1200px; }

html body a.skip-main { align-items: center; background: rgba(0, 0, 0, 0.8); color: #fff; display: flex; font-size: 18px; height: 35px; left: -999px; padding: 8px; position: absolute; text-decoration: none; transform: translateX(-100%); transition: transform 0.3s; z-index: 999999999; }

html body a.skip-main:focus, html body a.skip-main:active { color: #fff; left: 0; outline: none; text-decoration: none; transform: translateX(0%); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-dynamic-triangle-banner { background: #3498db; display: flex; height: 240px; justify-content: center; min-width: 1000px; position: relative; }

.f-dynamic-triangle-banner .f-triangle-container { height: 100%; position: absolute; width: 100%; }

.f-dynamic-triangle-banner .f-banner-title { color: #f5f5f6; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 64px; font-style: normal; font-weight: bold; margin-top: 40px; z-index: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-unregistered-container .f-hidden { height: 0; visibility: hidden; }

.f-unregistered-container .f-error { border: 1px solid #f00; }

.f-unregistered-container .f-unregistered-input { background-color: #fff; width: 100%; }

.f-unregistered-container .fractal-submissionField .submission-field-label .question-index { height: 28px; }

.f-unregistered-container .fractal-spinner-outer { position: absolute; right: 34px; top: 60px; }

.f-unregistered-container .fractal-spinner-outer i.fa-spinner { color: #444647; font-size: 18px; }

.f-unregistered-container .submission-field-input { position: relative; }

.f-unregistered-container .submission-field-input .fractal-spinner-outer { right: 12px; top: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-manager-body { margin-top: 16px; }

.f-share-manager-body .f-admin-info-box { width: 536px; }

.f-share-manager-body .f-inline-message { margin-bottom: 16px; }

.f-share-manager-body .f-invite-label { font-size: 12px; font-weight: bold; }

.f-share-manager-body .f-invite-container { display: flex; position: relative; }

.f-share-manager-body .f-dropdown-btn { font-size: 12px; margin-left: 8px; }

.f-share-manager-body .f-dropdown-options { margin-top: 0; }

.f-share-manager-body .f-dropdown-options li { font-size: 12px; }

.f-share-manager-body .f-send-invite { margin-bottom: 0; margin-right: 0; margin-top: 0; }

.f-share-manager-body .f-member-list { margin-top: 8px; max-height: 172px; overflow: hidden; overflow-y: auto; }

.f-share-manager-body .f-member-list .member-img { height: 32px; width: 32px; }

.f-share-manager-body .f-member-list .f-member-remove-container { display: flex; flex: 0 0 120px; justify-content: flex-end; }

.f-share-manager-body .f-member-list .f-member-remove-container.f-admin-remove { flex: 0 0 144px; }

.f-share-manager-body .f-member-list .fractal-button { align-items: center; border-radius: 50%; display: flex; font-size: 12px; justify-content: center; margin: 0; padding: 0; width: 24px; }

.f-share-manager-body .f-member-list .fa-times { cursor: pointer; }

.f-share-manager-body .f-member-row { align-items: center; display: flex; flex-direction: row; justify-content: space-between; padding: 4px; }

.f-share-manager-body .f-member-row:last-of-type { margin-bottom: 16px; }

.f-share-manager-body .f-member-row:hover { background: #f5f5f6; border-radius: 4px; }

.f-share-manager-body .f-member-row .member-img { height: 24px; width: 24px; }

.f-share-manager-body .f-member-row .member-initial { font-size: 10px; height: 24px; width: 24px; }

.f-share-manager-body .f-member { align-items: center; display: flex; flex: 1; flex-direction: row; font-size: 12px; }

.f-share-manager-body .member-image-v1 { margin-right: 8px; }

.f-share-manager-body .f-member-admin-text { flex: 1; font-size: 12px; text-align: right; }

.f-share-manager-body .f-tag-wrapper span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

.f-share-manager-body .react-tags__search-input { max-width: 220px !important; /* inline style created by react tag library */ }

.f-share-manager-body .f-new-user-role { transform: none; }

.f-share-manager-body .f-with-manager-dropdown .f-suggestion-user-info { width: calc(256px - 72px); }

.f-share-manager-body .f-with-manager-dropdown .f-suggestion-user-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-participant-body { display: flex; flex-direction: row; }

.f-share-participant-body.f-end-user { margin-top: 0; }

.f-share-participant-body .f-invite-label { font-size: 12px; font-weight: bold; }

.f-share-participant-body .f-invite-container { display: flex; }

.f-share-participant-body .f-send-invite { margin-bottom: 0; margin-right: 0; margin-top: 0; }

.f-share-participant-body .f-member-list { margin-top: 8px; max-height: 172px; overflow: hidden; overflow-y: auto; }

.f-share-participant-body .f-member-list .member-img { height: 24px; width: 24px; }

.f-share-participant-body .f-member-list .member-initial { font-size: 10px; height: 24px; width: 24px; }

.f-share-participant-body .f-member-list .f-group-icon { align-items: center; background: #3498db; border-radius: 50%; display: flex; height: 24px; justify-content: center; margin-right: 8px; width: 24px; }

.f-share-participant-body .f-member-list .fa-users { color: #fff; font-size: 12px; }

.f-share-participant-body .f-member-list .fractal-button { align-items: center; border-radius: 50%; display: flex; font-size: 12px; justify-content: center; margin: 0; padding: 0; width: 24px; }

.f-share-participant-body .f-member-list .fa-times { cursor: pointer; }

.f-share-participant-body .f-member-row { align-items: center; display: flex; flex-direction: row; justify-content: space-between; padding: 4px; }

.f-share-participant-body .f-member-row:last-of-type { margin-bottom: 16px; }

.f-share-participant-body .f-member-row:hover { background: #f5f5f6; border-radius: 4px; }

.f-share-participant-body .f-member { align-items: center; display: flex; flex-direction: row; font-size: 12px; }

.f-share-participant-body .member-image-v1 { margin-right: 8px; }

.f-share-participant-body .f-import-container { background: #d2efff; border-radius: 4px; font-size: 12px; height: 100%; margin: 16px; padding: 16px; }

.f-share-participant-body .f-import-container ol { list-style: revert; padding-left: 16px; }

.f-share-participant-body .f-import-download { cursor: pointer; font-weight: normal; }

.f-share-participant-body input[type='file'] { display: none; }

.f-share-participant-body .f-import-file-btn { margin-right: 0; }

.f-share-participant-body .f-filename { align-items: center; display: flex; font-size: 10px; margin-bottom: 4px; }

.f-share-participant-body .f-filename .fa-times { margin-left: 4px; }

.f-share-participant-body .f-import-group-name { font-size: 12px; height: 24px; width: 100%; }

.f-share-participant-body .f-group-exists-border { border: 1px solid #f00; }

.f-share-participant-body .f-group-exists { color: #f00; }

.f-share-participant-body .f-import-btn-container { display: flex; justify-content: flex-end; }

.f-share-participant-body .f-import-btn-container .fractal-button { margin-bottom: 0; }

.f-share-participant-body .f-import-btn-container .f-btn-subtle { background: transparent; }

.f-share-participant-body .f-import-btn-container .f-btn-standard { margin-right: 0; }

.f-share-participant-body .f-new-user-role { transform: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-main .f-tab { font-size: 14px; height: 30px; }

.f-share-main .f-tabs-row { border-bottom: 1px solid #d5d9db; display: flex; padding-left: 8px; width: 100%; }

.f-share-main .f-tab-underline { align-items: center; border-bottom-color: #27ae60; display: flex; font-size: 14px; height: 30px; margin-right: 30px; }

.f-share-main .f-tab-underline.f-tab-selected { border-bottom-style: solid; border-bottom-width: 2px; }

.f-share-main .f-tab-underline.f-tab-selected span { color: #444647; }

.f-share-main .f-tab-underline span { color: #999ea1; cursor: pointer; text-transform: capitalize; }

.f-share-main .f-share-main-spinner { padding: 32px; width: 528px; }

.f-share-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.f-share-modal .f-footer .f-or-import-link { color: #0072bc; cursor: pointer; font-weight: normal; margin-left: 0; padding-left: 0; }

.f-share-modal .f-footer .f-btn-subtle { display: none; }

.f-share-modal .f-footer .f-btn-standard { margin-right: 0; }

#f-share-dialog-btn { margin-right: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-subscribe-button .subscribe-button { background: rgba(0, 0, 0, 0.6); border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-size: 12px; height: 24px; padding: 0 10px; width: auto; }

.fractal-subscribe-button .__react_component_tooltip.place-bottom.show { margin-top: 10px; }

#bi-page-ct-a-view-idea .fractal-subscribe-button { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-gigApplication * { box-sizing: border-box; }

.fractal-widget-gigApplication .f-gig-app-apply-btn, .fractal-widget-gigApplication .f-gig-app-cancel-btn { margin-left: 0; width: 200px; }

.fractal-widget-gigApplication .f-gig-app-cancel-btn { margin: 0; }

.fractal-widget-gigApplication .ReactModal__Content { height: 80%; max-width: 700px; width: 45%; }

.fractal-widget-gigApplication .f-modal-body { padding: 25px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper { margin-top: 25px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper:first-of-type { margin-top: 0; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper p .required { color: #f00; margin-left: 3px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper label { float: none; font-size: 12px; font-weight: 600; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper label .f-required { color: #f00; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper { margin-top: 5px; padding: 5px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper .f-gig-app-expertise-list { margin-top: 5px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper .f-gig-app-expertise-list .f-gig-app-expertise-item { font-size: 12px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper p { font-weight: 600; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper p.errorText { font-size: 12px; font-weight: 400; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper p.subText { color: #2980b9; cursor: pointer; font-weight: normal; margin-top: 10px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper p.subText:hover { text-decoration: underline; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper p.f-gig-app-modal-contact-msg { font-size: 12px; margin-bottom: 10px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-expertise-wrapper.error { border: solid 1px #f00; border-radius: 5px; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input { background: #fff; color: #444647; font-size: 12px; margin-top: 5px; width: 100%; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input.error, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input.error { border: solid 1px #f00; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input :-ms-input-placeholder, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input ::-ms-input-placeholder, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input ::placeholder, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input :-ms-input-placeholder, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input ::-ms-input-placeholder, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input ::placeholder { color: #999ea1; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-message-input { box-shadow: none; max-height: 180px; min-height: 124px; overflow-y: auto; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-email-input { width: 50%; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-modal-contact-email { font-weight: bold; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-modal-label, .fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-modal-label-secondary { color: #999ea1; font-size: 12px; font-weight: bold; line-height: 32px; padding: 10px; vertical-align: middle; }

.fractal-widget-gigApplication .f-gig-app-modal-input-wrapper .f-gig-app-modal-label-secondary { color: #2980b9; cursor: pointer; font-size: 12px; }

.fractal-widget-gigApplication .f-gig-expertise .react-tags__suggestions { max-height: 140px; overflow: auto; }

.fractal-widget-gigApplication .f-gig-expertise h3 { margin-bottom: 8px; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .react-tags__search-wrapper { margin-left: 4px; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .react-tags { background: #fff; padding: 4px; width: 100%; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .react-tags .react-tags__selected i.fa-times { border-radius: 100%; color: #444647; height: auto; margin-left: 2px; margin-right: -8px; opacity: 1; padding: 4px 8px; width: auto; z-index: 0; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .react-tags .react-tags__selected i.fa-times:hover { background: rgba(0, 0, 0, 0.1); }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .react-tags__selected .react-tags__selected-tag { margin: 2px 4px; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .f-tag-count { display: none; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .f-rmv-tag { color: #444647; margin-left: 8px; }

.fractal-widget-gigApplication .f-gig-expertise .f-tags-typeahead .f-tag-wrapper { margin: 2px 4px; }

.fractal-widget-gigApplication.f-gig-vI3-wrapper .f-gig-app-apply-btn span::before { content: '\f830'; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-weight: 100; margin-right: 8px; }

.fractal-widget-gigApplication.f-gig-vI3-wrapper .f-gig-app-cancel-btn { white-space: nowrap; width: 170px; }

.fractal-widget-gigApplication.f-gig-vI3-wrapper .f-gig-app-cancel-btn span::before { content: '\f00d'; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-weight: 100; margin-right: 8px; }

.fractal-widget-gigApplication.f-gig-vI3 .f-modal-body { height: 395px; }

.fractal-widget-gigApplication.f-gig-vI3 .fractal-textarea label, .fractal-widget-gigApplication.f-gig-vI3 .f-gig-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.fractal-widget-gigApplication.f-gig-vI3 .f-checkbox { display: inline-flex; }

.fractal-widget-gigApplication.f-submitted { width: 100%; }

.fractal-widget-gigApplication.f-submitted .f-gig-cancel-wrapper { align-items: center; display: flex; width: 100%; }

.fractal-widget-gigApplication.f-submitted .f-gig-cancel-wrapper > p { font-weight: 400; margin-left: 24px; }

.fractal-widget-gigApplication.f-submitted .f-gig-cancel-wrapper > p .fa-check { color: #2ecc71; margin-right: 8px; }

.fractal-widget-gigCancellation .ReactModal__Content { height: 225px; width: 425px; }

.fractal-widget-gigCancellation .ReactModal__Content .f-modal-body { height: 125px; }

.fractal-widget-gigCancellation .ReactModal__Content p { font-size: 14px; line-height: 20px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-dynamic-nav-v1 ul.desktop-nav-core-items { margin: 0 auto; max-width: 1200px; }

.fractal-dynamic-nav-v1.fixed .nav-desktop, .fractal-dynamic-nav-v1.fixed div.nav-mobile { position: fixed; }

.fractal-dynamic-nav-v1.fixed .nav-desktop, .fractal-dynamic-nav-v1.fixed .nav-mobile, .fractal-dynamic-nav-v1.fixed .nav-mobile-bar { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

.fractal-dynamic-nav-v1.f-dynamic-nav-enterprise .nav-desktop { height: 40px; position: relative; }

.fractal-dynamic-nav-v1.f-dynamic-nav-enterprise .nav-mobile { height: 60px; position: relative; }

.fractal-dynamic-nav-v1.fractal-loading .nav-desktop, .fractal-dynamic-nav-v1.fractal-loading .nav-mobile { position: static; }

.fractal-dynamic-nav-v1 .nav-desktop { font-size: 14px; height: 66px; left: 0; position: fixed; transform: translateZ(0); transition: opacity 0.2s ease-in-out; width: 100%; will-change: transform; z-index: 1; }

.fractal-dynamic-nav-v1 .nav-desktop .desktop-nav-core-items { align-content: center; align-items: center; display: flex; flex-direction: row; height: 100%; justify-content: flex-start; }

.fractal-dynamic-nav-v1 .nav-desktop .desktop-nav-core-items .desktop-nav-last-item { align-items: center; display: flex; list-style: none; margin-left: auto; }

.fractal-dynamic-nav-v1 .nav-desktop .fractal-subscribe-button button.subscribe-button { align-items: center; background-color: transparent; border: 1px solid #fff; color: #fff; display: flex; font-size: 12px; font-weight: 600; height: 30px; line-height: 32px; margin-left: 0; margin-right: 8px; padding: 0 16px; position: initial; transition: 0.2s ease; }

.fractal-dynamic-nav-v1 .nav-desktop .fractal-subscribe-button button.subscribe-button:hover { background-color: #fff; color: #444647; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-parent { align-items: center; display: flex; flex-direction: row-reverse; height: 100%; position: relative; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-parent .nav-item-hover { border-bottom: solid 1px #fff; margin-top: 14px; position: absolute; transform: scaleX(0); transition: transform 250ms ease-in-out; width: 100%; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-parent.is-current-route .nav-item-hover { transform: scaleX(1); }

.fractal-dynamic-nav-v1 .nav-desktop .nav-parent.nav-active:hover .nav-item-hover { transform: scaleX(1); }

.fractal-dynamic-nav-v1 .nav-desktop .nav-parent i.fa-angle-down { margin-left: 3px; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-campaign-image { align-items: center; border-radius: 4px; display: flex; height: 100%; margin-right: 20px; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-campaign-image img { border-radius: 4px; height: 32px; width: 32px; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children { background: #fff; border-radius: 4px; box-shadow: 2px 4px 10px -2px rgba(0, 0, 0, 0.6); left: 0; overflow: hidden; padding: 16px 0; position: absolute; top: 55px; transition: all 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children a { color: #797d7f; font-weight: normal; transition: color 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li { display: block; height: 32px; line-height: 32px; margin: 0; min-width: 150px; padding: 0; white-space: nowrap; width: auto; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li a { display: block; padding: 0 20px; width: auto; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li:hover { background: #d5d9db; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li:hover a { color: #fff; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li:active { background: rgba(0, 0, 0, 0.5); }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children li:active a { color: #fff; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-children-hidden { max-height: 0; opacity: 0; visibility: hidden; }

.fractal-dynamic-nav-v1 .nav-desktop .nav-subscribe { margin-left: auto; }

.fractal-dynamic-nav-v1 .nav-desktop .custom-label-nav-badge { background: #d5d9db; box-sizing: initial; height: 20px; padding: 15px 0 10px 20px; }

.fractal-dynamic-nav-v1 .nav-mobile { box-shadow: 0 1px 150px -20px black; left: 0; position: fixed; transform: translateZ(0); transition: opacity 0.2s ease-in-out; width: 100%; will-change: transform; z-index: 1; }

.fractal-dynamic-nav-v1 .nav-mobile * { box-sizing: border-box; }

.fractal-dynamic-nav-v1 .nav-mobile a { color: #fff; display: inline-block; line-height: 50px; padding-left: 16px; transform: scale(1); transition: all 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-mobile a.nav-logo-link:hover { transform: scale(1.02); }

.fractal-dynamic-nav-v1 .nav-mobile a:hover { text-decoration: none; }

.fractal-dynamic-nav-v1 .nav-mobile a.nav-logo-link:focus-visible { outline: 1px dashed #fff; outline-offset: 5px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fractal-dynamic-nav-v1 .nav-mobile a .nav-logo-link:focus { outline: 1px dashed #fff; outline-offset: -6px; } }

.fractal-dynamic-nav-v1 .nav-mobile li { display: block; margin: 0; padding: 0; }

.fractal-dynamic-nav-v1 .nav-mobile ul { overflow: hidden; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-parent button { font-size: 10px; margin: 0; padding: 16px; text-align: left; text-transform: uppercase; width: 85%; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-logo-link { padding-left: 0; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children li { padding: 0; position: relative; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children li a { display: block; padding-left: 40px; width: 100%; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children li a[aria-hidden='true'] { display: none; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children li a i { left: 16px; line-height: 50px; position: absolute; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children-visible { margin-bottom: 10px; opacity: 1; transition: max-height 0.15s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-children-hidden { max-height: 0; opacity: 0; transition: max-height 0.15s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar { align-items: center; display: flex; height: 66px; overflow: hidden; transition: opacity 0.2s ease-in-out; width: 100%; z-index: 0; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon { cursor: pointer; float: right; margin: 0 25px; margin-left: auto; padding: 0; transform: scale(1); transition: all 0.2s ease-in-out; width: 30px; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon::after, .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon::before, .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon div { background-color: #fff; border-radius: 3px; content: ''; display: block; height: 3px; margin: 7px 0; transition: all 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon:hover { transform: scale(1.1); }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon:focus-visible { outline: 1px dashed #fff; outline-offset: 4px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-icon:focus { outline: 1px dashed #fff; outline-offset: 4px; } }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-logo { align-items: center; display: flex; height: 100%; margin: 0 0 0 16px; opacity: 1; transition: opacity 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar.nav-mobile-deployed { position: static; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar.nav-mobile-deployed .nav-icon::after { transform: translateY(-8px) rotate(-135deg); }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar.nav-mobile-deployed .nav-icon::before { transform: translateY(12px) rotate(135deg); }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar.nav-mobile-deployed .nav-icon div { transform: scale(0); }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar.nav-mobile-deployed .nav-logo { opacity: 0; transition: opacity 0.2s ease-in-out; visibility: hidden; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar .nav-logo-link img { max-height: 50px; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.2s ease-in-out; visibility: hidden; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu > ul { border-bottom: 1px solid rgba(0, 0, 0, 0.25); }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .nav-parent-list > li { border-top: 1px solid rgba(255, 255, 255, 0.5); box-sizing: border-box; line-height: 50px; min-height: 50px; width: 100%; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .nav-parent-list > li.has-children > a { cursor: pointer; width: 80%; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .nav-parent-list a:focus { outline: 1px dashed #fff; outline-offset: -5px; } }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .nav-parent-list a { height: 50px; width: 100%; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .nav-parent-list a:focus-visible { outline: 1px dashed #fff; outline-offset: -5px; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu.nav-mobile-deployed { max-height: calc(100vh - 60px); opacity: 1; overflow-y: auto; visibility: visible; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .mobile-toggle-children-btn-container { background-color: transparent; box-sizing: border-box; cursor: pointer; display: flex; float: right; height: 50px; justify-content: center; left: -5px; padding: 5px 25px; position: relative; text-align: center; width: 70px; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .mobile-toggle-children-btn-container:focus-visible { outline: 1px dashed #fff; outline-offset: -6px; }

.fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .mobile-toggle-children-btn-container i.mobile-toggle-children-btn { color: #fff; position: relative; top: 15px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu .mobile-toggle-children-btn-container:focus { outline: 1px dashed #fff; outline-offset: -6px; } }

.fractal-dynamic-nav-v1 .nav-parent, .fractal-dynamic-nav-v1 .nav-children.li { list-style: none; margin-right: 30px; transition: background 0.2s ease-in-out; }

.fractal-dynamic-nav-v1 .nav-parent a, .fractal-dynamic-nav-v1 .nav-children.li a { color: #fff; font-weight: normal; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }

.fractal-dynamic-nav-v1 .nav-parent a:hover, .fractal-dynamic-nav-v1 .nav-children.li a:hover { text-decoration: none; }

.fractal-dynamic-nav-v1 .nav-parent .f-btn-link, .fractal-dynamic-nav-v1 .nav-children.li .f-btn-link { margin: 0; padding: 0; text-transform: uppercase; }

@media (min-width: 1001px) { .fractal-dynamic-nav-v1 .nav-desktop { opacity: 1; }
  .fractal-dynamic-nav-v1.f-dynamic-nav-enterprise .nav-mobile { height: 0; }
  .fractal-dynamic-nav-v1 .nav-mobile { height: 0; opacity: 0; visibility: hidden; }
  .fractal-dynamic-nav-v1 .nav-mobile .mobile-toggle-children-btn-container { display: none; }
  .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-menu.nav-mobile-deployed { visibility: hidden; } }

@media (max-width: 1000px) { .fractal-dynamic-nav-v1 .nav-desktop { height: 0; opacity: 0; visibility: hidden; }
  .fractal-dynamic-nav-v1.f-dynamic-nav-enterprise .nav-desktop { height: 0; }
  .fractal-dynamic-nav-v1 .nav-mobile { opacity: 1; } }

#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR { height: 66px; position: relative; z-index: 390; }

.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR #dynamic_navigation_bar { position: static; width: auto !important; }

.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR #dynamic_navigation_bar .fractal-dynamic-nav-v1 .nav-desktop ul { /** Override this 'important' css from CT/CSS/ws_setup.css which breaks nav layout on webstorm setup (ct_admin_options_new.bix): ul { margin:0px !important; } @todo When webstorm setup redone in fractal, try to remove this override */ margin: 0 auto !important; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-fourohfour-background { align-items: center; background: #f5f5f6; display: flex; height: 100%; justify-content: center; width: 100%; }

.f-fourohfour-holder { background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.12); box-sizing: border-box; display: flex; flex-direction: column; margin: 0 auto; max-width: 80%; padding: 48px; }

@media (min-width: 1024px) { .f-fourohfour-holder { flex-direction: row; padding: 96px; width: 950px; } }

.f-fourohfour-holder h1 { color: #e74c3c; font-size: 48px; line-height: 64px; margin-bottom: 24px; }

.f-fourohfour-holder p { font-size: 24px; line-height: 36px; margin-bottom: 24px; }

.f-fourohfour-holder img { display: block; flex: 1; height: 289px; margin: 0 auto; width: 210px; }

.f-fourohfour-image { order: 1; }

@media (min-width: 1024px) { .f-fourohfour-image { order: 2; } }

.f-fourohfour-text { order: 2; padding: 32px; text-align: center; }

@media (min-width: 1024px) { .f-fourohfour-text { order: 1; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-status-indicator { border-radius: 4px; display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.42876; min-width: 32px; overflow: hidden; padding: 2px 4px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.f-status-indicator.f-status-indicator-admin { background-color: #f1c40f; color: #000; }

.f-status-indicator.f-status-indicator-admin.f-status-indicator-outline { border: 1px solid #f1c40f; color: #f1c40f; }

.f-status-indicator.f-status-indicator-admin .f-status-indicator-icon { color: #000; }

.f-status-indicator.f-status-indicator-kill { background-color: #e74c3c; color: #fff; }

.f-status-indicator.f-status-indicator-kill.f-status-indicator-outline { border: 1px solid #e74c3c; color: #e74c3c; }

.f-status-indicator.f-status-indicator-kill .f-status-indicator-icon { color: #fff; }

.f-status-indicator.f-status-indicator-info { background-color: #3498db; color: #fff; }

.f-status-indicator.f-status-indicator-info.f-inline-pinned-comment { background-color: #fff; color: #3498db; }

.f-status-indicator.f-status-indicator-info.f-inline-pinned-comment .f-status-indicator-icon { color: #3498db; }

.f-status-indicator.f-status-indicator-info.f-status-indicator-outline { border: 1px solid #3498db; color: #3498db; }

.f-status-indicator.f-status-indicator-info .f-status-indicator-icon { color: #fff; }

.f-status-indicator.f-status-indicator-primary { background-color: #2ecc71; color: #fff; }

.f-status-indicator.f-status-indicator-primary.f-status-indicator-outline { border: 1px solid #2ecc71; color: #2ecc71; }

.f-status-indicator.f-status-indicator-primary .f-status-indicator-icon { color: #fff; }

.f-status-indicator.f-status-indicator-progress { background-color: #1abc9c; color: #fff; }

.f-status-indicator.f-status-indicator-progress.f-status-indicator-outline { border: 1px solid #1abc9c; color: #1abc9c; }

.f-status-indicator.f-status-indicator-progress .f-status-indicator-icon { color: #fff; }

.f-status-indicator.f-status-indicator-warning { background-color: #f39c12; color: #fff; }

.f-status-indicator.f-status-indicator-warning.f-status-indicator-outline { border: 1px solid #f39c12; color: #f39c12; }

.f-status-indicator.f-status-indicator-warning .f-status-indicator-icon { color: #fff; }

.f-status-indicator.f-status-indicator-default { background-color: #bdc3c7; color: #000; }

.f-status-indicator.f-status-indicator-default.f-status-indicator-outline { border: 1px solid #bdc3c7; }

.f-status-indicator.f-status-indicator-default .f-status-indicator-icon { color: #000; }

.f-status-indicator.f-status-indicator-outline { background-color: transparent; padding: 1px 4px; }

.f-status-indicator .f-status-indicator-icon { margin-right: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
[data-class='f-link-style f-member-flyover-tooltip'] { font-family: 'Lato', 'Open Sans', arial, sans-serif; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-comment-placeholder .f-comment-container { display: flex; flex-direction: row; margin-top: 24px; }

.f-comment-placeholder .f-comment-bubble { position: relative; width: 100%; }

.f-comment-placeholder .f-comment-nub { border-left: 8px solid transparent; border-top: 8px solid #f5f5f6; height: 0; left: -8px; position: absolute; width: 0; }

.f-comment-placeholder .f-comment-wrapper { background: rgba(0, 0, 0, 0.03); border-radius: 16px; border-top-left-radius: 0; padding: 16px; width: 100%; }

.f-comment-placeholder .f-animate-placeholder-gray { background-size: 1200px 104px; }

.f-comment-placeholder .f-placeholder-v1 .f-placeholder-circle, .f-comment-placeholder .f-placeholder-v1 .f-placeholder-rect { background: #e7e9eb; }

.f-comment-placeholder .f-comment-member { margin: 8px 8px 0 0; }

.f-comment-placeholder .f-row-1 { margin-bottom: 16px; margin-top: 0; }

.f-comment-placeholder .f-row-2 { margin-bottom: 4px; }

.f-comment-placeholder .f-row-3 { margin-top: 4px; }

.f-comment-placeholder .f-row-4 { margin-bottom: 0; }

.f-comment-placeholder .f-comment-actions { margin-right: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
#ws_view_idea_2 .f-comment-input-reply { max-width: 600px; }

.f-comment-input-web { max-width: calc(100% - 58px); width: 642px; }

.f-comment-input-web div, .f-comment-input-web span { font-family: 'Lato', 'Open Sans', arial, sans-serif; }

.f-comment-input-web .f-upload-link:focus + .f-upload-link-label .f-btn-subtle { background: #bdc3c7; box-shadow: 0 0 0 2px #999ea1; color: #fff; }

.f-comment-input-web .f-upload-link:active .f-comment-file-button { background: #999ea1; color: #fff; }

.f-comment-input-web .f-upload-link-label { margin-bottom: 0; margin-left: 8px; }

.f-comment-input-web .fa-at { transform: translateY(-1px); }

.f-comment-input-web .f-comment-file-button { background: transparent; height: 32px; margin: 0; margin-left: -8px; padding: 7px 8px; transform: translateX(-7px); }

.f-comment-input-web .f-comment-tagging-button { background: transparent; border: none; bottom: 0; cursor: pointer; font-size: 16px; height: 32px; left: 42px; margin: 0; padding: 6px 8px; position: absolute; width: 32px; }

.f-comment-input-web .f-comment-tagging-closed { display: none; }

.f-comment-input-web .f-comment-emoji-button { background: transparent; border: none; border-radius: 4px; bottom: 0; cursor: pointer; font-size: 16px; height: 32px; left: 82px; padding: 6px 8px; position: absolute; width: 32px; }

.f-comment-input-web .f-comment-emoji-button.f-comment-emoji-open { background: #797d7f; color: #fff; }

.f-comment-input-web .f-comment-emoji-button.f-comment-emoji-open:focus { box-shadow: none; }

.f-comment-input-web .f-comment-emoji-button .fa-smile { transform: translateY(-1px); }

.f-comment-input-web .fractal-dropdown { margin-right: 8px; }

.f-comment-input-web .fractal-dropdown .f-dropdown-btn div { align-items: center; display: flex; }

.f-comment-input-web .fractal-dropdown .f-dropdown-btn .fa, .f-comment-input-web .fractal-dropdown .f-dropdown-btn .fal { font-size: 14px; margin-right: 8px; }

.f-comment-input-web .fractal-dropdown .f-status-indicator { line-height: 20px; padding: 0 4px; }

.f-comment-input-web.extended { min-width: 676px; }

.f-comment-input-web .f-comment-input, .f-slate-comment-input-body .f-comment-input { background: #fff; border: 1px solid #e7e9eb; border-radius: 16px; color: #444647; max-width: none; padding: 0 16px; position: relative; width: auto; }

.f-comment-input-web .f-comment-input.f-focused, .f-slate-comment-input-body .f-comment-input.f-focused { border-color: #1abc9c; box-shadow: none; outline: none; }

@media (max-width: 560px) { .f-comment-input-web .f-comment-input, .f-slate-comment-input-body .f-comment-input { padding: 0 8px; } }

.f-comment-input-web .f-comment-input .f-comment-input-placeholder, .f-slate-comment-input-body .f-comment-input .f-comment-input-placeholder { color: #999ea1; font-size: 14px; padding: 14px 0; position: absolute; }

.f-comment-input-web .f-comment-input .f-comment-input-textarea, .f-slate-comment-input-body .f-comment-input .f-comment-input-textarea { box-sizing: content-box; font-size: 14px; line-height: 20px; min-height: 19px; outline: none; padding: 14px 0; }

.f-comment-input-web .f-comment-input .f-comment-input-textarea .f-comment-tagged-user, .f-slate-comment-input-body .f-comment-input .f-comment-input-textarea .f-comment-tagged-user { background: #bdc3c7; border-radius: 4px; color: #444647; padding: 1px 4px; }

.f-comment-input-web .f-comment-input .f-comment-input-textarea .f-comment-tagged-user.invited, .f-slate-comment-input-body .f-comment-input .f-comment-input-textarea .f-comment-tagged-user.invited { background: #2ecc71; }

.f-comment-input-web .f-comment-input .f-comment-input-actions-row, .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row { align-items: center; display: flex; justify-content: space-between; padding-bottom: 14px; }

@media (max-width: 560px) { .f-comment-input-web .f-comment-input .f-comment-input-actions-row, .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row { flex-wrap: wrap; }
  .f-comment-input-web .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(1), .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(1) { flex-basis: 50%; margin-bottom: 8px; }
  .f-comment-input-web .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(2), .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(2) { flex-basis: 100%; justify-content: space-between; } }

.f-comment-input-web .f-comment-input .f-comment-input-actions-row .fractal-button, .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row .fractal-button { font-size: 14px; margin: 0; }

.f-comment-input-web .f-comment-input .f-comment-input-actions-row .fractal-button.f-btn-cancel-edit, .f-slate-comment-input-body .f-comment-input .f-comment-input-actions-row .fractal-button.f-btn-cancel-edit { margin-right: 8px; }

.f-comment-input-web .f-comment-input .f-dropdown-options, .f-slate-comment-input-body .f-comment-input .f-dropdown-options { width: 324px; }

.f-comment-input-web .f-comment-input .f-dropdown-options li, .f-slate-comment-input-body .f-comment-input .f-dropdown-options li { height: auto; padding: 8px 16px; }

.f-comment-input-web .f-comment-input .f-dropdown-options .f-status-indicator, .f-slate-comment-input-body .f-comment-input .f-dropdown-options .f-status-indicator { align-items: center; display: inline-flex; }

.f-comment-input-web .f-comment-input .f-dropdown-options span, .f-slate-comment-input-body .f-comment-input .f-dropdown-options span { color: #797d7f; display: block; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; margin-top: 8px; }

.f-comment-input-web .f-comment-input .f-comment-input-row, .f-slate-comment-input-body .f-comment-input .f-comment-input-row { align-items: center; display: flex; position: relative; }

.f-comment-input-web .f-comment-input .f-comment-input-row .fa-at, .f-comment-input-web .f-comment-input .f-comment-input-row .fa-paperclip, .f-comment-input-web .f-comment-input .f-comment-input-row .fa-smile, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .fa-at, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .fa-paperclip, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .fa-smile { cursor: pointer; font-size: 16px; }

.f-comment-input-web .f-comment-input .f-comment-input-row .f-dropdown-btn, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0; }

.f-comment-input-web .f-comment-input .f-comment-input-row .f-comment-emoji-button, .f-comment-input-web .f-comment-input .f-comment-input-row .f-comment-tagging-button, .f-comment-input-web .f-comment-input .f-comment-input-row .f-comment-file-button, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-comment-emoji-button, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-comment-tagging-button, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-comment-file-button { height: 32px; position: static; }

@media (max-width: 560px) { .f-comment-input-web .f-comment-input .f-comment-input-row, .f-slate-comment-input-body .f-comment-input .f-comment-input-row { padding: 0 4px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row .f-dropdown-btn, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0 4px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row i.fa-globe-americas, .f-slate-comment-input-body .f-comment-input .f-comment-input-row i.fa-globe-americas { margin-left: 4px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row .f-dropdown-options, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-dropdown-options { right: auto; } }

@media (max-width: 410px) { .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) .fractal-dropdown, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) .fractal-dropdown { margin-right: 0; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn { padding: 0 2px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn span, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn span { font-size: 10px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) i.fa-globe-americas, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) i.fa-globe-americas { font-size: 10px; margin: 0 4px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) i.fa-chevron-down, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) i.fa-chevron-down { font-size: 10px; margin: 0 4px; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-options, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-options { width: 70vw; }
  .f-comment-input-web .f-comment-input .f-comment-input-row:nth-child(2) .fractal-button, .f-slate-comment-input-body .f-comment-input .f-comment-input-row:nth-child(2) .fractal-button { font-size: 10px; padding: 0 8px; } }

.f-comment-input-web .f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-btn span, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-btn span { margin-left: 5px; max-height: 32px; max-width: 150px; min-width: 120px; overflow: hidden; }

.f-comment-input-web .f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-options, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-options { max-width: 250px; }

.f-comment-input-web .f-comment-input .f-comment-input-row .f-cls-required .f-dropdown-btn, .f-slate-comment-input-body .f-comment-input .f-comment-input-row .f-cls-required .f-dropdown-btn { border: 1px solid #f00; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel { background-color: #fff; border: 1px solid #d5d9db; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); position: absolute; z-index: 1; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .fa-spinner, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .fa-spinner { background: #fff; color: #d5d9db; font-size: 14px; line-height: 32px; width: 100%; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist { max-height: 212px; min-height: 32px; min-width: 448px; overflow-x: hidden; overflow-y: auto; padding-bottom: 8px; padding-top: 8px; position: relative; text-align: center; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member { align-items: center; cursor: pointer; display: flex; height: 32px; min-width: 448px; padding: 0 16px; width: 448px; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member.f-comment-input-member-active, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member.f-comment-input-member-active { background: #e7e9eb; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1 { margin-right: 8px; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1 .member-initial, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1 .member-initial { height: 24px; width: 24px; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1 .member-img, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .member-image-v1 .member-img { height: 24px; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .f-comment-input-memberlist-name, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .f-comment-input-memberlist-name { box-sizing: border-box; color: #444647; display: flex; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .fa-user-plus, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member .fa-user-plus { align-items: center; background-color: #2ecc71; border-radius: 50%; color: #fff; display: flex; font-size: 12px; font-weight: 600; height: 24px; justify-content: center; margin-right: 8px; width: 24px; }

.f-comment-input-web .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member-loading, .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-member-loading { justify-content: center; }

.f-comment-input-web .f-comment-input .f-btn-primary, .f-slate-comment-input-body .f-comment-input .f-btn-primary { font-size: 14px; }

.f-comment-input-web .f-comment-input .f-btn-narrow, .f-slate-comment-input-body .f-comment-input .f-btn-narrow { padding: 0; width: 62px; }

/* stylelint-disable selector-type-no-unknown */
em-emoji-picker { bottom: -436px; left: 72px; position: absolute; text-align: left; z-index: 10; }

/* stylelint-enable selector-type-no-unknown */
.f-custom-label-badge { background-color: #ecf0f1; border-radius: 4px; padding: 2px 8px; }

#view-idea-main-content ul.emoji-mart-category-list { margin: 0; padding: 0; }

@media (max-width: 460px) { /* stylelint-disable selector-type-no-unknown */
  em-emoji-picker { left: -1em !important; width: calc(100% + 9em) !important; }
  /* stylelint-enable selector-type-no-unknown */ }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-comment-input { background: #fff; border: 1px solid #e7e9eb; border-radius: 16px; color: #444647; max-width: calc(100% - 58px); padding: 0 16px; width: 642px; }

@media (max-width: 560px) { .f-comment-input { padding: 0 8px; } }

.f-comment-input .comment-form-container { display: grid; grid-template-columns: 1fr 1fr; margin: 12px auto; }

.f-comment-input .comment-form-container .selected-option { display: inline-block; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 268px; }

.f-comment-input .f-comment-input-actions-row { align-items: center; display: flex; justify-content: flex-end; padding-bottom: 14px; }

@media (max-width: 560px) { .f-comment-input .f-comment-input-actions-row { flex-wrap: wrap; }
  .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(1) { flex-basis: 50%; margin-bottom: 8px; }
  .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(2) { flex-basis: 100%; justify-content: space-between; } }

.f-comment-input .f-comment-input-actions-row .fractal-button { font-size: 14px; margin: 0; margin-left: 24px; }

.f-comment-input .f-comment-input-actions-row .fractal-button.f-btn-cancel-edit { margin-right: 8px; }

.f-comment-input .f-dropdown-options { margin: 4px; width: 324px; }

.f-comment-input .f-dropdown-options li { height: auto; padding: 8px 16px; }

.f-comment-input .f-dropdown-options .f-status-indicator { align-items: center; display: inline-flex; }

.f-comment-input .f-dropdown-options span { color: #797d7f; display: block; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; margin-top: 8px; }

.f-comment-input .f-comment-input-row { align-items: center; display: flex; position: relative; }

.f-comment-input .f-comment-input-row .fa-at, .f-comment-input .f-comment-input-row .fa-paperclip, .f-comment-input .f-comment-input-row .fa-smile { cursor: pointer; font-size: 16px; }

.f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0; }

@media (max-width: 560px) { .f-comment-input .f-comment-input-row { padding: 0 4px; }
  .f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0 4px; }
  .f-comment-input .f-comment-input-row i.fa-globe-americas { margin-left: 4px; }
  .f-comment-input .f-comment-input-row .f-dropdown-options { right: auto; } }

@media (max-width: 410px) { .f-comment-input .f-comment-input-row:nth-child(2) .fractal-dropdown { margin-right: 0; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn { padding: 0 2px; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn span { font-size: 10px; }
  .f-comment-input .f-comment-input-row:nth-child(2) i.fa-globe-americas { font-size: 10px; margin: 0 4px; }
  .f-comment-input .f-comment-input-row:nth-child(2) i.fa-chevron-down { font-size: 10px; margin: 0 4px; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-options { width: 70vw; }
  .f-comment-input .f-comment-input-row:nth-child(2) .fractal-button { font-size: 10px; padding: 0 8px; } }

.f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-btn span { margin-left: 5px; max-height: 32px; max-width: 150px; min-width: 120px; overflow: hidden; }

.f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-options { max-width: 250px; }

.f-comment-input .f-comment-input-row .f-cls-required .f-dropdown-btn { border: 1px solid #f00; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-comment-input { background: #b6daf2; border: 1px solid #3498db; border-radius: 16px; color: #444647; max-width: calc(100% - 58px); padding: 0 16px; width: 642px; }

@media (max-width: 560px) { .f-comment-input { padding: 0 8px; } }

.f-comment-input .comment-pinned-form-container { display: grid; grid-template-columns: 1fr 1fr; margin: 12px auto; }

.f-comment-input .comment-pinned-form-container .selected-option { color: #000; display: inline-block; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 268px; }

.f-comment-input .f-comment-input-actions-row { align-items: center; display: flex; justify-content: flex-end; padding-bottom: 14px; }

@media (max-width: 560px) { .f-comment-input .f-comment-input-actions-row { flex-wrap: wrap; }
  .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(1) { flex-basis: 50%; margin-bottom: 8px; }
  .f-comment-input .f-comment-input-actions-row > .f-comment-input-row:nth-child(2) { flex-basis: 100%; justify-content: space-between; } }

.f-comment-input .f-comment-input-actions-row .fractal-button { font-size: 14px; margin: 0; margin-left: 24px; }

.f-comment-input .f-comment-input-actions-row .fractal-button.f-btn-cancel-edit { margin-right: 8px; }

.f-comment-input .f-dropdown-options { margin: 4px; width: 324px; }

.f-comment-input .f-dropdown-options li { height: auto; padding: 8px 16px; }

.f-comment-input .f-dropdown-options .f-status-indicator { align-items: center; display: inline-flex; }

.f-comment-input .f-dropdown-options span { color: #797d7f; display: block; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; margin-top: 8px; }

.f-comment-input .f-comment-input-row { align-items: center; display: flex; position: relative; }

.f-comment-input .f-comment-input-row .fa-at, .f-comment-input .f-comment-input-row .fa-paperclip, .f-comment-input .f-comment-input-row .fa-smile { cursor: pointer; font-size: 16px; }

.f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0; }

@media (max-width: 560px) { .f-comment-input .f-comment-input-row { padding: 0 4px; }
  .f-comment-input .f-comment-input-row .f-dropdown-btn { padding: 0 4px; }
  .f-comment-input .f-comment-input-row i.fa-globe-americas { margin-left: 4px; }
  .f-comment-input .f-comment-input-row .f-dropdown-options { right: auto; } }

@media (max-width: 410px) { .f-comment-input .f-comment-input-row:nth-child(2) .fractal-dropdown { margin-right: 0; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn { padding: 0 2px; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-btn span { font-size: 10px; }
  .f-comment-input .f-comment-input-row:nth-child(2) i.fa-globe-americas { font-size: 10px; margin: 0 4px; }
  .f-comment-input .f-comment-input-row:nth-child(2) i.fa-chevron-down { font-size: 10px; margin: 0 4px; }
  .f-comment-input .f-comment-input-row:nth-child(2) .f-dropdown-options { width: 70vw; }
  .f-comment-input .f-comment-input-row:nth-child(2) .fractal-button { font-size: 10px; padding: 0 8px; } }

.f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-btn span { margin-left: 5px; max-height: 32px; max-width: 150px; min-width: 120px; overflow: hidden; }

.f-comment-input .f-comment-input-row .f-custom-label-selector .f-dropdown-options { max-width: 250px; }

.f-comment-input .f-comment-input-row .f-cls-required .f-dropdown-btn { border: 1px solid #f00; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
[data-class='f-comment-body'], [data-class='f-comment-reply-btn-text'] { font-family: 'Lato', 'Open Sans', arial, sans-serif; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
[data-class='f-comment-info-bar'] [data-class='f-member-flyover-tooltip'], [data-class='f-comment-view-replies'], [data-class='f-comment-edited'], [data-class='f-rnw-web-text'] { font-family: 'Lato', 'Open Sans', arial, sans-serif; }

[data-class='f-comment-info-bar'] { z-index: 4; }

.fractal-widget-changeperm .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; }

.fractal-widget-changeperm .f-change-permission:first-of-type { margin-top: 16px; }

.fractal-widget-changeperm .f-comment-permission-row { display: flex; flex-direction: row; margin-bottom: 16px; }

.fractal-widget-changeperm .f-comment-permission-row:last-of-type { margin-bottom: 8px; }

.fractal-widget-changeperm .f-modal-body { max-width: 400px; padding: 16px; }

.fractal-widget-changeperm .f-modal-body > p { font-size: 14px; }

.fractal-widget-changeperm .f-radio-wrapper { margin: 0 8px 0 0; }

.fractal-widget-changeperm span[class^='f-color'] { border-radius: 4px; display: inline-block; font-weight: bold; margin-top: 2px; padding: 2px 4px; text-transform: uppercase; }

.fractal-widget-changeperm span[class^='f-color'] + p { padding-top: 4px; }

.fractal-widget-changeperm .f-color-silver { background: #bdc3c7; }

.fractal-widget-changeperm .f-color-sunflower { background: #f1c40f; }

.fractal-widget-changeperm .f-color-emerald { background: #2ecc71; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
#comments-component-render [data-class='f-comment-info-bar']:hover, #idea-comments-container [data-class='f-comment-info-bar']:hover { position: relative; z-index: 3; }

#comments-component-render .fractal-dropdown, #idea-comments-container .fractal-dropdown { /* Overwrite old css that makes this red */ }

#comments-component-render .fractal-dropdown .f-dropdown-options, #idea-comments-container .fractal-dropdown .f-dropdown-options { padding-left: 0; }

#comments-component-render .fractal-dropdown .f-dropdown-btn .fa-comment, #idea-comments-container .fractal-dropdown .f-dropdown-btn .fa-comment { color: #444647; }

#comments-component-render .fractal-dropdown .f-dropdown-btn.f-dropdown-open .fa-comment, #idea-comments-container .fractal-dropdown .f-dropdown-btn.f-dropdown-open .fa-comment { color: #fff; }

#comments-component-render div[data-class='f-link-style']:focus, #idea-comments-container div[data-class='f-link-style']:focus { text-decoration: underline; }

#comments-component-render div[data-class='f-rnw-web-text'], #comments-component-render [data-class='f-comment-body'], #idea-comments-container div[data-class='f-rnw-web-text'], #idea-comments-container [data-class='f-comment-body'] { user-select: text; }

#comments-component-render .__react_component_tooltip .fa-spinner, #idea-comments-container .__react_component_tooltip .fa-spinner { color: #fff; }

#comments-component-render .f-filedisplay-image-slide > .f-images-horizontal-scroll, #idea-comments-container .f-filedisplay-image-slide > .f-images-horizontal-scroll { padding-bottom: 0; }

#comments-component-render .f-image-block, #comments-component-render .f-file-block, #idea-comments-container .f-image-block, #idea-comments-container .f-file-block { margin-bottom: 8px; margin-top: 8px; }

div[data-class='reaction-count-button']:hover { background: #e7e9eb; border: 1px solid #bdc3c7; }

div[data-class='reaction-count-button']:active { background: #999ea1; border: 1px solid #999ea1; color: #fff; }

div[data-class='reaction-count-button']:active div div { color: #fff; }

#ws_view_idea_2 #comments-component-render { padding-bottom: 88px; }

.f-web-dropdown .fractal-dropdown .f-dropdown-btn { height: 24px; margin-left: 8px; padding: 0 8px; }

.f-web-dropdown .f-dropdown-options { top: 24px; width: 207px; }

.f-web-dropdown .f-dropdown-options li { height: auto; line-height: normal; padding: 0 16px; }

.f-web-dropdown .f-dropdown-options .f-warning > div { width: 100%; }

.f-web-dropdown .f-dropdown-options .f-edit-comment-options { font-size: 14px; height: 32px; line-height: 32px; width: 100%; }

#view-idea-main-content .f-dropdown-options { padding-left: 0; }

[data-subclass='f-rnw-comments-header'], [data-class='f-rnw-comment-load-more-btn'] { font-family: 'Lato', 'Open Sans', arial, sans-serif; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-company-preview { display: flex; flex-direction: column; }

.f-company-preview .f-preview-section-header { margin-bottom: 4px; margin-top: 16px; }

.f-company-preview .f-preview-logo { border-radius: 6px; height: 40px; margin-top: 8px; width: 40px; }

.f-company-preview .f-preview-name { font-size: 14px; margin-left: 4px; margin-top: 8px; }

.f-company-preview .f-preview-bottom-actions { align-items: center; display: flex; flex-direction: column; margin-top: 8px; }

.f-company-preview .f-preview-bottom-actions .f-btn-standard { font-size: 14px; }

.f-company-preview h4 { font-weight: 900; }

.f-company-preview p { line-height: 18px; }

.f-company-preview p.f-missing-data { color: #999ea1; }

.f-company-preview p.f-foot-note { color: #999ea1; font-size: 10px; line-height: 12px; margin-top: 8px; }

.f-company-preview a { font-size: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-combobox .f-combobox-input-wrapper { align-items: center; display: flex; flex-direction: row; min-width: 80px; position: relative; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-input { border: 1px solid #bdc3c7; border-radius: 4px; color: #444647; flex: 1; font-size: 14px; font-weight: 500; height: 32px; margin: 0; padding: 0 10px; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-input::placeholder { color: #999ea1; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-input.f-combobox-input-readonly:hover { cursor: pointer; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-input:focus, .fractal-combobox .f-combobox-input-wrapper .f-combobox-input:focus[data-focusvisible-polyfill='true'], .fractal-combobox .f-combobox-input-wrapper .f-combobox-input:focus-visible { border: 2px solid #1abc9c; outline: none; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-input-error { border: 1px solid #e74c3c; outline: none; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-dropdown-button { background: rgba(255, 255, 255, 0); height: 30px; margin: 0; position: absolute; right: 0; top: 0; width: 24px; }

.fractal-combobox .f-combobox-input-wrapper .f-combobox-dropdown-button .f-combobox-caret { color: #bdc3c7; font-size: 16px; vertical-align: middle; }

.fractal-combobox .fractal-button .fractal-spinner-outer .spinner-inner i.fa-spinner { color: #bdc3c7; font-size: 14px; }

.f-combobox-list { align-items: flex-start; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); display: flex; flex: 1; flex-direction: column; max-height: 400px; overflow: auto; position: fixed; z-index: 2147483600; }

.f-combobox-list .f-combobox-list-item { background-color: #fff; box-sizing: border-box; color: #444647; cursor: pointer; display: flex; font-size: 14px; font-weight: 500; justify-content: space-between; line-height: 32px; max-height: 32px; min-height: 32px; min-width: 100%; padding: 0 8px; width: 100%; }

.f-combobox-list .f-combobox-list-item:hover { background-color: #f5f5f6; }

.f-combobox-list .f-combobox-list-item .f-combobox-list-item-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 98%; }

.f-combobox-list .f-combobox-list-item-match:not(.f-combobox-list-item-divider) { background-color: #f5f5f6; min-width: 100%; }

.f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-divider), .f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-disabled) { background-color: #1abc9c; color: #fff; min-width: 100%; }

.f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-divider):hover, .f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-disabled):hover { background-color: #1abc9c; color: #fff; }

.f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-divider) i.fa-check, .f-combobox-list .f-combobox-list-item-selected:not(.f-combobox-list-item-disabled) i.fa-check { align-items: center; color: #1abc9c; display: flex; margin-right: 4px; }

.f-combobox-list .f-combobox-list-item-select-icons.f-combobox-list-item-selected { background-color: #fff; color: #444647; }

.f-combobox-list .f-combobox-list-item-select-icons.f-combobox-list-item-selected:hover { background-color: #f5f5f6; color: #444647; }

.f-combobox-list .f-combobox-list-item-select-icons .f-combobox-list-item-content { width: calc(98% - 24px); }

.f-combobox-list .f-combobox-list-item-disabled { background-color: #fff; line-height: 40px; }

.f-combobox-list .f-combobox-list-item-divider { color: #444647; display: block; font-size: 12px; font-weight: 700; text-align: left; text-transform: uppercase; }

.f-combobox-list .f-combobox-list-item-divider:hover { background-color: #fff; }

.f-combobox-list .f-combobox-list-item-divider:not(:first-child) { line-height: 28px; max-height: 100px; min-height: 44px; }

.f-combobox-list .f-combobox-list-item-divider:not(:first-child)::before { background-color: #d5d9db; content: ''; display: block; height: 1px; margin: 8px 0; width: 100%; }

.f-combobox-list .fractal-spinner-outer .spinner-inner i.fa-spinner { color: #bdc3c7; font-size: 24px; }

.f-combobox-inline { cursor: pointer; width: 100%; }

.f-combobox-inline div, .f-combobox-inline input, .f-combobox-inline span { font-family: 'Open Sans', sans-serif; }

.f-combobox-inline .f-combobox-input-wrapper { height: 100%; overflow: auto; padding: 0; width: 100%; }

.f-combobox-inline .f-combobox-input-wrapper .f-combobox-input { border: 2px solid transparent; }

.f-combobox-inline .f-combobox-input-wrapper .f-combobox-input::placeholder { color: #444647; font-family: 'Open Sans', sans-serif; }

.f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus, .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus[data-focusvisible-polyfill='true'], .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus-visible, .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:hover { border-color: #1abc9c; }

.f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus + .f-combobox-dropdown-button, .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus[data-focusvisible-polyfill='true'] + .f-combobox-dropdown-button, .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:focus-visible + .f-combobox-dropdown-button, .f-combobox-inline .f-combobox-input-wrapper .f-combobox-input:hover + .f-combobox-dropdown-button { opacity: 1; }

.f-combobox-inline .f-combobox-input-wrapper:not(:focus) .f-combobox-dropdown-button { opacity: 0; }

.f-combobox-inline .f-combobox-input-wrapper:hover .f-combobox-dropdown-button { opacity: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-company-details { font-family: Lato, 'Open Sans', arial, sans serif; max-height: 600px; min-height: 480px; overflow-y: auto; padding: 16px; padding-top: 0; width: 100%; }

.f-company-details .fractal-spinner-outer { align-items: center; display: flex; height: 480px; justify-content: center; }

.f-company-details .f-company-tab-contents { max-height: 304px; width: 100%; }

.f-company-details .f-company-logo { border-radius: 8px; height: 64px; margin-right: 8px; width: 64px; }

.f-company-details .f-company-title { color: #444647; font-size: 16px; }

.f-company-details .f-company-subtitle { font-size: 12px; margin-top: 4px; }

.f-company-details .fractal-button.f-btn-link-animated { color: #999ea1; height: 28px; line-height: 28px; margin-bottom: 1px; padding: 0; }

.f-company-details .fractal-button.f-btn-link-animated::after { border-color: #16a085; margin-top: 0; }

.f-company-details .fractal-button.f-btn-link-animated.active { color: #444647; }

.f-company-details .f-company-logo-row { margin-top: 16px; }

.f-company-details .f-company-tabs-row { background-color: #fff; border-bottom: 1px solid #d5d9db; margin-bottom: 16px; position: -webkit-sticky; position: sticky; top: 0; }

.f-company-details .f-company-details-header { align-items: center; display: flex; justify-content: space-between; }

.f-company-details .f-company-tab-details .f-company-description { color: #444647; font-size: 14px; line-height: 20px; margin-bottom: 16px; }

.f-company-details .f-company-tab-details .f-company-col-50 { margin-bottom: 12px; }

.f-company-details .f-company-tab-details .f-company-col-50 a { font-size: 12px; }

.f-company-details .f-company-tab-details .f-company-col-50 p { font-size: 12px; line-height: 18px; }

.f-company-details .f-company-tab-details .f-company-col-50 .f-details-item-header { font-weight: 600; }

.f-company-details .f-company-tab-details .f-company-col-50 .f-details-item { color: #444647; }

.f-company-details .f-company-tab-funding { font-size: 12px; }

.f-company-details .f-company-tab-funding p { color: #444647; line-height: 16px; margin-right: 40px; }

.f-company-details .f-company-tab-funding .f-company-details-table { margin-top: 16px; }

.f-company-details .f-company-tab-investment { font-size: 12px; }

.f-company-details .f-company-tab-investment p { line-height: 16px; margin-right: 24px; }

.f-company-details .f-company-tab-investment .f-company-details-table { margin-top: 16px; }

.f-company-details .f-company-tab-people { margin-bottom: 24px; }

.f-company-details .f-company-tab-people .f-people-group-header { color: #444647; font-size: 18px; font-weight: 500; margin-bottom: 16px; }

.f-company-details .f-company-tab-people .f-people-list { display: flex; flex-flow: row wrap; }

.f-company-details .f-company-tab-people .f-people-list .f-people-item { margin-bottom: 12px; margin-left: 2%; margin-right: 2%; width: 29%; }

.f-company-details .f-company-tab-people .f-people-list .f-people-name { color: #444647; font-size: 14px; font-weight: 500; }

.f-company-details .f-company-tab-people .f-people-list .f-people-title { color: #797d7f; font-size: 12px; margin-bottom: 4px; }

.f-company-details .f-company-tab-people .f-people-show-area { text-align: center; width: 100%; }

.f-company-details .f-company-tab-people .f-people-show-area .f-people-show-more { cursor: pointer; font-size: 14px; }

.f-company-details .f-company-details-table { color: #444647; }

.f-company-details .f-company-details-table .f-company-table-header { color: #797d7f; font-weight: 600; text-transform: uppercase; }

.f-company-details .f-company-details-table .f-company-row { margin-bottom: 12px; }

.f-company-details .f-company-col { display: flex; flex-direction: column; }

.f-company-details .f-company-row { align-items: center; display: flex; }

.f-company-details .f-company-row-top { align-items: flex-start; display: flex; }

.f-company-details .f-company-col-50 { display: flex; flex-direction: column; width: 50%; }

.f-company-details .f-company-25 { width: 25%; }

.f-company-details .f-company-50 { width: 50%; }

.f-company-details .f-missing-data { color: #999ea1; font-size: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-crunchbase-company-modal h3 { color: #444647; font-size: 14px; padding: 2px 16px; }

.f-crunchbase-company-modal .f-company-modal-content { padding-bottom: 16px; width: 688px; }

.f-crunchbase-company-modal .f-company-modal-content .f-company-search { margin-bottom: 16px; }

.f-crunchbase-company-modal .f-company-modal-content .f-company-search .fractal-combobox { margin-top: 8px; width: 320px; }

.f-crunchbase-company-modal .f-company-modal-content .f-company-search .fractal-combobox .f-combobox-input-error { border: 1px solid #bdc3c7; }

.f-crunchbase-company-modal .f-company-search-row { align-items: center; display: flex; justify-content: space-between; padding: 16px; }

.f-crunchbase-company-modal .f-company-search-row .f-crunchbase-logo { width: 160px; }

.f-crunchbase-company-modal .f-company-preview { align-items: center; display: flex; justify-content: center; min-height: 320px; width: 100%; }

.f-crunchbase-company-modal .f-company-preview .f-company-empty p { color: #999ea1; font-size: 14px; }

.f-combobox-list .f-organization-combobox-item { align-items: center; display: flex; }

.f-combobox-list .f-organization-combobox-logo { border-radius: 50px; height: 28px; margin-right: 4px; width: 28px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-crunchbase-company-modal .f-delete-company-modal-content { font-size: 14px; padding: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-crunchbase-view-company-modal .f-company-modal-content { align-items: center; display: flex; justify-content: center; padding-bottom: 16px; width: 688px; }

.f-crunchbase-view-company-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-widget-edit-organization-reference * { box-sizing: border-box; }

.f-crunchbase-widget { font-family: Lato, 'Open Sans', arial, sans serif; padding: 4px 2px; }

.f-crunchbase-widget .f-crunchbase-title { font-size: 16px; }

.f-crunchbase-widget .f-crunchbase-company .f-crunchbase-empty { color: #bdc3c7; font-size: 12px; margin-top: 32px; text-align: center; }

.f-crunchbase-widget .f-crunchbase-actions { display: flex; flex-direction: column; margin-top: 16px; }

.f-crunchbase-widget .f-crunchbase-actions .f-crunchbase-action { cursor: pointer; font-size: 12px; margin-top: 8px; }

.f-crunchbase-widget .f-crunchbase-actions .f-crunchbase-action .fa-plus-circle, .f-crunchbase-widget .f-crunchbase-actions .f-crunchbase-action .fa-trash { width: 14px; }

.f-crunchbase-widget .f-crunchbase-actions .f-crunchbase-action.action-delete { color: #e74c3c; }

.f-crunchbase-widget .f-company-col { display: flex; flex-direction: column; }

.f-crunchbase-widget .f-company-row { align-items: center; display: flex; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-progress-bar { background-color: #d5d9db; border-radius: 4px; height: 15px; margin-top: 10px; overflow: hidden; }

.fractal-progress-bar .f-progress-bar { background: #27ae60; height: 100%; transition: all 0.2s ease-in-out 0s; }

.fractal-progress-bar .f-progress-bar-indeterminate { background: #27ae60; border-radius: 4px; height: 100%; transition: all 1.5s linear 0s; width: 50%; }

.fractal-progress-bar.f-progress-bar-v2 { background-color: #d1f2eb; border-radius: 4px; height: 8px; }

.fractal-progress-bar.f-progress-bar-v2 .f-progress-bar { background: #1abc9c; border-radius: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-confirmWarningModal { font-family: Lato, 'Open Sans', arial, sans serif; }

.fractal-widget-confirmWarningModal .f-confirm-warning-modal-body { font-size: 14px; }

.fractal-widget-confirmWarningModal .f-confirm-warning-modal-body ul { list-style: disc; margin-left: 32px; }

.fractal-widget-confirmWarningModal .f-confirm-warning-modal-body ul li { line-height: 20px; }

.fractal-widget-confirmWarningModal .f-confirm-warning-modal-body .f-confirm-warning-modal-text { line-height: 20px; margin: 0 0 12px; }

.fractal-widget-confirmWarningModal .f-confirm-warning-model-checkbox { padding-top: 12px; }

.fractal-widget-confirmWarningModal .fractal-button.f-btn-warn { background: #f00; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-highchart-base .highcharts-tooltip .tooltip-formatted { background-color: #fff; border-radius: 10px; padding: 10px; }

.fractal-highchart-base .highcharts-tooltip .tooltip-title { font-size: 14px; font-weight: bold; margin-bottom: 5px; }

.fractal-highchart-base .highcharts-tooltip .tooltip-series { font-size: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-dalle-image-wrapper { background-position: center; background-size: cover; border-radius: 4px; cursor: pointer; height: 181px; margin: 0; position: relative; width: 181px; }

.f-dalle-image-wrapper::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.f-dalle-image-wrapper .f-dalle-download { height: 181px; left: 0; position: absolute; top: 0; width: 181px; }

.f-dalle-image-wrapper .f-radio-wrapper { left: 6px; position: absolute; top: 6px; z-index: 9; }

.f-dalle-image-wrapper .f-dropdown-defaults { position: absolute; right: 0; z-index: 1; }

.f-dalle-image-wrapper .f-dropdown-options { margin-top: 0; right: 8px; width: 160px; }

.f-dalle-image-wrapper .f-dropdown-options li span { width: 100%; }

.f-dalle-image-wrapper .f-disabled { color: #bdc3c7; cursor: not-allowed; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-dalle-list { display: flex; flex-wrap: wrap; height: 296px; justify-content: space-between; list-style: none; overflow-y: auto; width: 100%; }

.f-dalle-list .f-dalle-item { border-radius: 4px; height: 181px; margin: 16px 0 0; width: 181px; }

.f-dalle-list .f-dalle-item.f-animate-pulse { border: 1px solid rgba(0, 0, 0, 0.1); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-dalle { height: 100%; }

.f-dalle .f-dalle-wrapper { display: block; height: calc(100% - 36px); }

.f-dalle .f-dalle-wrapper-empty { align-items: center; display: flex; height: 280px; justify-content: center; width: 100%; }

.f-dalle .f-dalle-loading-link { margin-top: 16px; }

.f-dalle .f-dalle-input-container { display: flex; position: relative; }

.f-dalle .fractal-input, .f-dalle .f-dalle-input { width: 100%; }

.f-dalle .fractal-input input { background: #fff; height: 40px; max-height: 40px; padding-right: 102px; }

.f-dalle .fractal-input input::-ms-clear { display: none; }

.f-dalle .f-dalle-button { position: absolute; right: 4px; top: 4px; }

.f-dalle .f-dalle-empty { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0 140px; text-align: center; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-search-wrapper { display: inline-flex; position: relative; }

.f-search-wrapper .fractal-input.fa-search::before { font-weight: normal; margin-top: 7px; }

.f-search-wrapper .fa-search { width: 100%; }

.f-search-wrapper .fa-times-circle { color: #bdc3c7; position: absolute; right: 4px; top: 10px; }

.f-search-wrapper .fa-times-circle:hover { color: #797d7f; cursor: pointer; }

.f-search-wrapper .__react_component_tooltip.type-dark.place-bottom { margin-top: 8px; position: fixed; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.rc-slider { position: relative; height: 14px; padding: 5px 0; width: 100%; border-radius: 6px; touch-action: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.rc-slider * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.rc-slider-rail { position: absolute; width: 100%; background-color: #e9e9e9; height: 4px; border-radius: 6px; }

.rc-slider-track { position: absolute; left: 0; height: 4px; border-radius: 6px; background-color: #abe2fb; }

.rc-slider-handle { position: absolute; width: 14px; height: 14px; cursor: pointer; cursor: -webkit-grab; margin-top: -5px; cursor: grab; border-radius: 50%; border: solid 2px #96dbfa; background-color: #fff; touch-action: pan-x; }

.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging { border-color: #57c5f7; box-shadow: 0 0 0 5px #96dbfa; }

.rc-slider-handle:focus { outline: none; }

.rc-slider-handle-click-focused:focus { border-color: #96dbfa; box-shadow: unset; }

.rc-slider-handle:hover { border-color: #57c5f7; }

.rc-slider-handle:active { border-color: #57c5f7; box-shadow: 0 0 5px #57c5f7; cursor: -webkit-grabbing; cursor: grabbing; }

.rc-slider-mark { position: absolute; top: 18px; left: 0; width: 100%; font-size: 12px; }

.rc-slider-mark-text { position: absolute; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: #999; }

.rc-slider-mark-text-active { color: #666; }

.rc-slider-step { position: absolute; width: 100%; height: 4px; background: transparent; }

.rc-slider-dot { position: absolute; bottom: -2px; margin-left: -4px; width: 8px; height: 8px; border: 2px solid #e9e9e9; background-color: #fff; cursor: pointer; border-radius: 50%; vertical-align: middle; }

.rc-slider-dot-active { border-color: #96dbfa; }

.rc-slider-dot-reverse { margin-right: -4px; }

.rc-slider-disabled { background-color: #e9e9e9; }

.rc-slider-disabled .rc-slider-track { background-color: #ccc; }

.rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-dot { border-color: #ccc; box-shadow: none; background-color: #fff; cursor: not-allowed; }

.rc-slider-disabled .rc-slider-mark-text, .rc-slider-disabled .rc-slider-dot { cursor: not-allowed !important; }

.rc-slider-vertical { width: 14px; height: 100%; padding: 0 5px; }

.rc-slider-vertical .rc-slider-rail { height: 100%; width: 4px; }

.rc-slider-vertical .rc-slider-track { left: 5px; bottom: 0; width: 4px; }

.rc-slider-vertical .rc-slider-handle { margin-left: -5px; touch-action: pan-y; }

.rc-slider-vertical .rc-slider-mark { top: 0; left: 18px; height: 100%; }

.rc-slider-vertical .rc-slider-step { height: 100%; width: 4px; }

.rc-slider-vertical .rc-slider-dot { left: 2px; margin-bottom: -4px; }

.rc-slider-vertical .rc-slider-dot:first-child { margin-bottom: -4px; }

.rc-slider-vertical .rc-slider-dot:last-child { margin-bottom: -4px; }

.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear { animation-duration: 0.3s; animation-fill-mode: both; display: block !important; animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-leave { animation-duration: 0.3s; animation-fill-mode: both; display: block !important; animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { animation-name: rcSliderTooltipZoomDownIn; animation-play-state: running; }

.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { animation-name: rcSliderTooltipZoomDownOut; animation-play-state: running; }

.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear { transform: scale(0, 0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

.rc-slider-tooltip-zoom-down-leave { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }

@keyframes rcSliderTooltipZoomDownIn { 0% { opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0); }
  100% { transform-origin: 50% 100%;
    transform: scale(1, 1); } }

@keyframes rcSliderTooltipZoomDownOut { 0% { transform-origin: 50% 100%;
    transform: scale(1, 1); }
  100% { opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0); } }

.rc-slider-tooltip { position: absolute; left: -9999px; top: -9999px; visibility: visible; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.rc-slider-tooltip * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.rc-slider-tooltip-hidden { display: none; }

.rc-slider-tooltip-placement-top { padding: 4px 0 8px 0; }

.rc-slider-tooltip-inner { padding: 6px 2px; min-width: 24px; height: 24px; font-size: 12px; line-height: 1; color: #fff; text-align: center; text-decoration: none; background-color: #6c6c6c; border-radius: 6px; box-shadow: 0 0 4px #d9d9d9; }

.rc-slider-tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }

.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { bottom: 4px; left: 50%; margin-left: -4px; border-width: 4px 4px 0; border-top-color: #6c6c6c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-unsplash-image-wrapper { background-position: center; background-size: cover; border-radius: 4px; cursor: pointer; height: 112px; margin: 0; overflow: hidden; position: relative; width: 176px; }

.f-unsplash-image-wrapper .f-unsplash-download { height: 112px; left: 0; position: absolute; top: 0; width: 176px; }

.f-unsplash-image-wrapper .f-unsplash-credit { bottom: 8px; color: #fff; font-weight: normal; opacity: 0; position: absolute; right: 12px; transition: opacity 0.4s; }

.f-unsplash-image-wrapper .f-radio-wrapper { left: 6px; position: absolute; top: 6px; z-index: 9; }

.f-unsplash-image-wrapper:hover .f-unsplash-credit { opacity: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-slider .rc-slider { cursor: pointer; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-reviews { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; position: absolute; right: 8px; top: 98px; width: 420px; }

.f-memo-reviews .fractal-button { font-family: 'Lato', 'Open Sans', sans-serif; }

.f-memo-reviews * { box-sizing: border-box; }

.f-memo-reviews .f-heading { align-items: center; border-bottom: 1px solid #e7e9eb; display: flex; justify-content: space-between; padding: 16px; }

.f-memo-reviews .f-heading .f-btn-xs { font-size: 14px; margin: 0; }

.f-memo-reviews .f-body { max-height: calc(100vh - 163px); overflow: auto; padding: 8px 16px 16px; }

.f-memo-reviews .f-no-open-review { align-items: center; display: flex; height: 214px; justify-content: center; }

.f-memo-reviews .f-tab-content { padding-top: 8px; }

.f-memo-reviews .f-tab-underline { font-size: 14px; }

.f-memo-review-item-container { position: relative; }

.f-memo-review-item-container.f-just-completed { align-items: center; background: #b4eccc; border: 1px solid #2ecc71; border-radius: 4px; display: flex; padding: 16px; }

.f-memo-review-item-container.f-just-completed .fa-check-circle { color: #2ecc71; font-size: 24px; margin-right: 8px; }

.f-memo-review-item-container.f-just-completed a { color: #3498db; cursor: pointer; }

.f-memo-review-item-container.f-has-gradient { height: 300px; overflow: hidden; }

.f-memo-review-item-container.f-has-gradient::after { background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 80%); bottom: 0; content: ''; height: 148px; position: absolute; width: 100%; }

.f-memo-review-item-container .f-show-gradient-container { align-items: center; bottom: 16px; display: flex; justify-content: center; position: absolute; width: 100%; z-index: 1; }

.f-memo-review-item-container .f-separator { border-bottom: 1px dashed #bdc3c7; margin: 8px 0; }

.f-memo-review-item-container .fractal-slider { height: 34px; margin-right: 8px; width: 282px; }

.f-memo-review-item-container .fractal-slider .rc-slider { display: flex; height: inherit; margin-left: 8px; padding: 0; top: 14px; width: 258px; }

.f-memo-review-item-container .fractal-slider .rc-slider-dot { display: none; }

.f-memo-review-item-container .fractal-slider .rc-slider-mark { display: flex; font-size: 12px; justify-content: space-between; left: initial; margin-top: 12px; position: static; top: initial; width: 298px; }

.f-memo-review-item-container .fractal-slider .rc-slider-mark-text { color: inherit; position: inherit; transform: none !important; }

.f-memo-review-item-container input { background-color: #fff; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 16px; font-weight: 700; height: 24px; margin-right: 8px; padding: 8px; width: 54px; }

.f-memo-review-item-container input::-webkit-outer-spin-button, .f-memo-review-item-container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.f-memo-review-item-container input[type='number'] { -moz-appearance: textfield; }

.f-memo-review-item-container .f-review-comment-textarea:not(.f-no-nub) { position: relative; }

.f-memo-review-item-container .f-review-comment-textarea:not(.f-no-nub)::before { border-bottom: 8px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ''; margin-top: -5px; position: absolute; right: 8px; top: 0; }

.f-memo-review-item-container .f-review-comment-textarea:not(.f-no-nub)::after { border-bottom: 7px solid #1abc9c; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ''; margin-top: -6px; position: absolute; right: 8px; top: 0; }

.f-memo-review-item-container textarea { background-color: #fff; font-family: 'Lato', 'Open Sans', arial, sans-serif; width: 100%; }

.f-memo-review-item-container .f-invalid { border: 1px solid #e74c3c; }

.f-memo-review-item-container .fractal-textarea textarea { max-width: 388px; }

.f-memo-review-item-container .f-item-complete-header { align-items: center; display: flex; justify-content: space-between; }

.f-memo-review-item-container .f-item-open-header { align-items: center; display: flex; justify-content: flex-end; padding-bottom: 8px; }

.f-memo-review-item-container .f-item-open-header.f-is-view-idea { justify-content: space-between; }

.f-memo-review-item-container .f-memo-link { color: #3498db; font-weight: bold; }

.f-memo-review-item-container .f-item-due-date { color: #797d7f; }

.f-memo-review-item-container .f-completed-on { color: #797d7f; }

.f-memo-review-item-container .f-question { padding: 8px 0; }

.f-memo-review-item-container .f-question:first-of-type { padding-top: 0; }

.f-memo-review-item-container .f-question-header { font-weight: 700; }

.f-memo-review-item-container .f-question-header .fa-info-circle { margin-left: 4px; }

.f-memo-review-item-container .f-question-header .f-question-tooltip { margin-top: 4px; }

.f-memo-review-item-container .f-question-slider { align-items: center; display: flex; justify-content: space-between; position: relative; }

.f-memo-review-item-container .f-question-slider .f-btn-subtle { margin: 0; }

.f-memo-review-item-container .f-question-text-container { display: none; margin-top: 16px; }

.f-memo-review-item-container .f-question-text-container.f-shown { display: block; }

.f-memo-review-item-container .f-add-comment-btn { color: #797d7f; }

.f-memo-review-item-container .f-add-comment-btn.f-comment-showing { background: #1abc9c; color: #fff; }

.f-memo-review-item-container .f-add-comment-btn.f-has-comment { background: rgba(0, 0, 0, 0); color: #1abc9c; }

.f-memo-review-item-container .rc-slider-disabled { background-color: inherit; cursor: not-allowed; }

.f-memo-review-item-container .rc-slider-handle { border-color: #8e44ad; height: 16px; margin-top: -4px; width: 16px; }

.f-memo-review-item-container .rc-slider-rail, .f-memo-review-item-container .rc-slider-track { height: 8px; }

.f-memo-review-item-container .f-completed-value { font-weight: 700; position: relative; top: -6px; }

.f-memo-review-item-container .f-completed:nth-of-type(2) { padding-top: 0; }

.f-memo-review-item-container .f-completed .fractal-slider { height: 34px; width: 88%; }

.f-memo-review-item-container .f-completed .fractal-slider .rc-slider { top: 8px; width: 324px; }

.f-memo-review-item-container .f-completed .fractal-slider .rc-slider-mark { width: 340px; }

.f-memo-review-item-container .f-question-input-container { position: relative; }

.f-memo-review-item-container .f-input-clear { border-radius: 50%; font-size: 12px; height: 16px; padding: 0; position: absolute; right: 12px; top: 4px; width: 16px; }

.f-memo-review-item-container .f-memo-rev-footer { align-items: center; display: flex; justify-content: center; padding: 16px; }

.f-idea-modal .f-memo-review-item-container .rc-slider { width: 228px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-component-hover-container { height: 100%; position: absolute; right: 0; top: 0; width: 100%; }

.f-component-edit-hover { display: flex; position: absolute; right: 0; top: 0; }

.f-component-edit-hover .fractal-button { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); font-size: 14px; margin: 8px 8px 8px 0; }

.f-component-edit-hover .f-btn-cog::before { content: '\F013'; font-family: 'Font Awesome 5 Pro'; font-weight: 300; }

.f-component-edit-hover .f-btn-trash::before { content: '\F1F8'; font-family: 'Font Awesome 5 Pro'; font-weight: 300; }

.f-component-edit { background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; box-sizing: border-box; left: -244px; margin-right: 8px; padding: 20px 16px 16px; position: absolute; top: 0; width: 240px; z-index: 103; }

.f-component-edit .f-teams-link { display: flex; justify-content: center; margin: 16px 0 8px; }

.f-component-edit .f-edit-modal-link { display: inline-block; font-size: 14px; font-weight: bold; margin: 16px 0 0; text-align: center; width: 100%; }

.f-component-edit .f-edit-arrow { height: 16px; overflow: hidden; position: absolute; right: -12px; top: 0; transform: translateY(50%); width: 16px; }

.f-component-edit .f-edit-arrow::after { background: #fff; border: 1px solid #bdc3c7; content: ''; height: 16px; left: 0; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 16px; }

.f-component-edit .f-edit-heading { font-weight: bold; }

.f-component-edit .f-edit-attributes-heading { margin-top: 16px; }

.f-component-edit .f-edit-row { align-items: center; display: flex; }

.f-component-edit .f-edit-row .fractal-input input { width: 100%; }

.f-component-edit .f-edit-buttons { align-items: center; display: flex; justify-content: center; margin-top: 8px; }

.f-component-edit .f-edit-buttons .fractal-button { font-size: 14px; }

.f-component-edit .f-close-button { border-radius: 50%; font-size: 16px; height: 24px; margin: 0; padding: 0; position: absolute; right: 8px; top: 4px; width: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-quest-c { margin-top: 16px; }

.f-quest-c.f-q-error { background-color: rgba(231, 76, 60, 0.5); }

.f-quest-c h3 { display: block; margin-bottom: 8px; }

.f-quest-c .fa-info-circle { margin-left: 4px; }

.f-quest-c .f-quest-c-required { color: #e74c3c; }

.f-quest-c .fa-info-circle:hover { cursor: pointer; }

.f-quest-c .f-quest-radio label { margin-left: 8px; }

.f-quest-c .f-quest-radio .f-radio-wrapper { margin: 0 0 4px; }

.f-quest-c .f-quest-radio .f-radio-wrapper:last-of-type { margin-bottom: 0; }

.f-quest-c .f-quest-check .f-checkbox-wrapper { margin: 0 0 4px; }

.f-quest-c .f-quest-check .f-checkbox-wrapper:last-of-type { margin-bottom: 0; }

.f-quest-c .f-quest-check .f-checkbox-wrapper span { margin-left: 8px; }

.f-quest-c .f-quest-check .f-checkbox-wrapper i { transform: translate(2px, 1px); }

.f-quest-c input { background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; font-family: Lato, 'Open Sans', arial, sans serif; height: 30px; outline: none; padding: 0 8px; width: 100%; }

.f-quest-c textarea { background-color: #fff; font-family: Lato, 'Open Sans', arial, sans serif; min-height: 92px; padding: 6px 8px; resize: none; width: 100%; }

.f-quest-c .f-quest-select .f-dropdown-btn { background-color: #fff; justify-content: space-between; padding: 0 8px; width: 100%; }

.f-quest-c .f-quest-select .f-dropdown-options { width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-action-item { background: #f5f5f6; border-radius: 4px; margin: 16px 0; max-height: 400px; overflow: hidden; padding: 16px; position: relative; }

.f-action-item.f-scorecard-showing { max-height: none; }

.f-action-item .f-updated-scorecard { align-items: center; display: flex; justify-content: center; margin-top: 16px; }

.f-action-item .f-updated-scorecard .f-btn-link { height: 20px; margin: 0 4px; padding: 0; }

.f-action-item .f-updated-scorecard .f-btn-link:hover { text-decoration: underline; }

.f-action-item .f-open-scorecard { display: flex; flex-direction: column; margin-left: -16px; width: 110%; }

.f-action-item .f-open-scorecard .f-quest-c { margin-top: 8px; padding: 8px 16px; }

.f-action-item .f-open-scorecard.f-score-long::after { background: linear-gradient(179.72deg, rgba(245, 245, 246, 0) 0.24%, #f5f5f6 86.19%); content: ''; height: 220px; left: 0; position: absolute; top: 180px; width: 100%; z-index: 0; }

.f-action-item .f-scorecard-submit { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; margin: 16px auto 0; width: 149px; }

.f-action-item .f-scorecard-show-btn { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; left: calc(50% - 70px); position: absolute; top: 348px; z-index: 1; }

.f-action-item .f-action-item-header { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

.f-action-item .f-action-item-type { color: #3498db; flex-basis: 40%; font-weight: bold; }

.f-action-item .f-completed-label { color: #444647; padding: 0 4px; }

.f-action-item .f-single-complete { background-color: #d5f5e3; border-radius: 4px; color: #2ecc71; padding: 0 4px; text-transform: uppercase; }

.f-action-item .f-single-scale-question { display: inline-flex; padding: 16px 0; }

.f-action-item .f-rating-container { display: flex; justify-content: center; overflow: hidden; }

.f-action-item .f-rating { align-items: center; border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 14px; font-weight: bold; height: 32px; justify-content: center; margin-right: 4px; position: relative; width: 32px; }

.f-action-item .f-rating:last-of-type { margin-right: 0; }

.f-action-item .f-rating.f-rating-unselected { background-color: #bdc3c7; }

.f-action-item .f-rating.f-rating-1 { background-color: #e74c3c; }

.f-action-item .f-rating.f-rating-2 { background-color: #e7683c; }

.f-action-item .f-rating.f-rating-3 { background-color: #e67e22; }

.f-action-item .f-rating.f-rating-4 { background-color: #f1c40f; }

.f-action-item .f-rating.f-rating-5 { background-color: #e7e144; }

.f-action-item .f-rating.f-rating-6 { background-color: #e7e144; }

.f-action-item .f-rating.f-rating-7 { background-color: #d2e744; }

.f-action-item .f-rating.f-rating-8 { background-color: #92e070; }

.f-action-item .f-rating.f-rating-9 { background-color: #2ecc71; }

.f-action-item .f-rating.f-rating-10 { background-color: #1ab55b; }

.f-action-item .f-rating::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.f-action-item .f-rating:hover { background-color: #999ea1; }

.f-action-item .f-action-btn { align-items: center; display: flex; margin: 24px auto 0; }

.f-action-item .f-due-label, .f-action-item .f-completed-label { display: flex; flex-basis: 60%; justify-content: flex-end; }

.f-action-item .fractal-spinner-outer { margin: 8px 0; }

.f-action-item .f-single-score-show { align-items: center; border-radius: 4px; color: #fff; display: flex; font-size: 48px; height: 100%; justify-content: center; left: 0; opacity: 0; position: absolute; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); top: 0; transition: opacity 1s; width: 100%; z-index: 2; }

.f-action-item .f-single-score-show.f-rating-1-select { background-color: rgba(231, 76, 60, 0.4); }

.f-action-item .f-single-score-show.f-rating-2-select { background-color: rgba(231, 104, 60, 0.4); }

.f-action-item .f-single-score-show.f-rating-3-select { background-color: rgba(230, 126, 34, 0.4); }

.f-action-item .f-single-score-show.f-rating-4-select { background-color: rgba(241, 196, 15, 0.4); }

.f-action-item .f-single-score-show.f-rating-5-select { background-color: rgba(231, 225, 68, 0.4); }

.f-action-item .f-single-score-show.f-rating-6-select { background-color: rgba(231, 225, 68, 0.4); }

.f-action-item .f-single-score-show.f-rating-7-select { background-color: rgba(210, 231, 68, 0.4); }

.f-action-item .f-single-score-show.f-rating-8-select { background-color: rgba(146, 224, 112, 0.4); }

.f-action-item .f-single-score-show.f-rating-9-select { background-color: rgba(46, 204, 113, 0.4); }

.f-action-item .f-single-score-show.f-rating-10-select { background-color: rgba(26, 181, 91, 0.4); }

.f-action-item .f-single-score-show.f-activate { opacity: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-action-items .f-action-items-header { align-items: center; display: flex; justify-content: space-between; }

.f-idea-action-items .f-action-items-header .fractal-button { color: #999ea1; font-family: 'Lato', 'Open Sans', arial, sans-serif; margin: 0; padding: 0 8px; }

.f-idea-action-items .f-action-items-header .fractal-button.active { color: #444647; }

.f-idea-action-items .f-action-items-header .fractal-button::after { border-bottom-color: #444647; }

.f-idea-action-items .f-message { align-items: center; border-radius: 4px; display: flex; justify-content: center; margin: 4px 0; padding: 8px; }

.f-idea-action-items .f-view-completed { color: #3498db; cursor: pointer; font-weight: bold; padding-left: 4px; }

.f-idea-action-items .f-action-wrapper { border-radius: 4px; }

.f-idea-action-items .f-memo-review-item-container { background: #f5f5f6; border-radius: 4px; margin-bottom: 8px; padding: 16px 16px 0; }

.f-idea-action-items .f-memo-review-item-container:last-of-type { margin-bottom: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-button.f-gig-applicants-view { font-weight: 700; margin: 24px 0 16px; padding: 0 16px; white-space: nowrap; width: 126px; }

.fractal-button.f-gig-applicants-view .f-applicants-number { align-items: center; background-color: #3498db; border-radius: 2px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 700; height: 18px; justify-content: center; margin-right: 6px; width: 18px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-attachments:not(.f-component-configure) { padding: 0 0 0 12px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure):not(.f-component-draggable) { margin-left: -12px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure).f-attachments-edit .fa-trash-o { display: flex; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fa-trash-o { display: none; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-attachment-header { display: flex; justify-content: space-between; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title { align-items: center; background: #fff; border: none; border-radius: 4px; color: #797d7f; display: flex; font-family: 'Open Sans'; font-size: 14px; font-weight: 500; height: 24px; margin: 0 8px; outline: none; padding: 0 8px; position: relative; text-align: center; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:hover { background: #e7e9eb; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:focus, .f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:active { color: #fff; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:focus { background: #bdc3c7; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title:active { background: #999ea1; box-shadow: none; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attchment-title i { margin-right: 8px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-add-attachments .f-upload-link-label { font-size: 14px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-file-block a, .f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-image-block a { height: 128px; min-height: 128px; min-width: 160px; width: 160px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll { padding-bottom: 0; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block::after { height: 126px; width: 158px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block img { height: 128px; min-height: 128px; min-width: 160px; width: 160px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-filedisplay-image-slide .f-images-horizontal-scroll .f-image-block .f-image-hover-content { height: 127px; min-height: 127px; min-width: 159px; width: 159px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-empty-attachments { align-items: flex-start; color: #999ea1; display: flex; flex-direction: column; font-size: 14px; padding: 10px 0; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-empty-attachments i { color: #797d7f; margin-bottom: 8px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .f-empty-attachments .f-add-attach-link { font-size: 14px; margin-top: 8px; }

.f-idea-page-main .f-idea-attachments:not(.f-component-configure) .fractal-fileupload-v2 .f-secret-dropzone-wrapper { opacity: 0.8; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-widget-edit { margin: -4px 0; position: relative; }

.f-widget-edit .f-dropdown-btn { align-items: center; border: 1px solid transparent; border-radius: 4px; display: flex; height: auto; justify-content: space-between; margin: 0; min-height: 40px; padding: 0 8px; transform: translateX(-8px); width: calc(100% + 8px); }

.f-widget-edit .f-dropdown-btn > div { padding-right: 20px; }

.f-widget-edit .f-dropdown-btn .fa-pencil { color: #3498db; cursor: pointer; display: none; font-size: 14px; margin-right: 4px; position: absolute; right: 8px; }

.f-widget-edit .f-dropdown-btn:hover { background: #e7e9eb; border: 1px solid #e7e9eb; cursor: pointer; }

.f-widget-edit .f-dropdown-btn:hover .fa-pencil { display: inline-block; margin-right: 0; }

.f-widget-edit .f-dropdown-btn:focus, .f-widget-edit .f-dropdown-btn:active { background: #fff; border: 1px solid #2ecc71; box-shadow: 0 0 0 2px transparent; color: inherit; outline: none; }

.f-widget-edit .f-dropdown-btn .fa-chevron-down { display: none; }

.f-widget-edit .f-dropdown-btn.f-dropdown-open, .f-widget-edit .f-dropdown-btn.f-dropdown-open:hover, .f-widget-edit .f-dropdown-btn:focus:not(:hover) { background: #fff; border: 1px solid #2ecc71; color: inherit; }

.f-widget-edit .f-dropdown-btn.f-dropdown-open a, .f-widget-edit .f-dropdown-btn.f-dropdown-open:hover a, .f-widget-edit .f-dropdown-btn:focus:not(:hover) a { color: #444647; }

.f-widget-edit .f-dropdown-btn.f-dropdown-open .fa-chevron-down, .f-widget-edit .f-dropdown-btn.f-dropdown-open:hover .fa-chevron-down, .f-widget-edit .f-dropdown-btn:focus:not(:hover) .fa-chevron-down { display: block; }

.f-widget-edit .f-dropdown-btn.f-dropdown-open .fa-pencil, .f-widget-edit .f-dropdown-btn.f-dropdown-open:hover .fa-pencil, .f-widget-edit .f-dropdown-btn:focus:not(:hover) .fa-pencil { display: none; }

.f-widget-edit .f-dropdown-btn .fractal-clickoutside { width: 100%; }

.f-widget-edit .f-dropdown-wide .f-dropdown-options { width: calc(100% + 8px); }

.f-widget-edit .f-radio-wrapper { margin: 0 8px 0 0; }

.f-escape-dropdown { width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-category-edit { width: 100%; z-index: 101; }

.f-category-edit .f-widget-edit .f-dropdown-btn:hover:active { background: #e7e9eb; border-color: #e7e9eb; }

.f-category-edit .f-widget-edit .f-dropdown-btn.f-dropdown-open:focus { background: #fff; border-color: #2ecc71; color: inherit; }

.f-category-edit .f-category-subscribe { border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); }

.f-category-edit .f-category-subscribe button { margin: 0; }

.f-category-edit .f-category-subscribe.show { opacity: 1; }

.f-category-edit .f-category-subscribe::after { border: 10px solid #000; border-color: transparent transparent #fff #fff !important; box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.1); left: 50% !important; margin-left: 0.9em !important; top: 1px !important; transform: rotate(135deg); transform-origin: 0 0; }

.f-category-edit .f-category-subscribe.place-top::after { left: 30% !important; top: 100% !important; transform: rotate(-45deg); }

.f-category-edit .f-category-subscribe:hover { opacity: 1 !important; visibility: visible !important; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-comments > div { margin-left: 0; padding-top: 0; z-index: 1; }

.f-idea-comments > div > div { padding-top: 0; }

.f-idea-comments .fa, .f-idea-comments .fas { font-family: 'Font Awesome 5 Pro'; }

@media (max-width: 767px) { .f-idea-comments > div { margin: 0; } }

.f-idea-comments [data-subclass='f-rnw-comments-header'] { text-indent: -99999px; }

.f-idea-comments .f-comment-input-web { max-width: calc(100% - 56px); width: calc(100% - 56px); }

.f-idea-comments .f-comment-input { max-width: 100%; width: 100%; }

.f-idea-comments .f-comment-title { margin-bottom: -38px; margin-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-crunchbase { background: #fff; border-radius: 4px; padding: 16px; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-description { min-height: 40px; }

.f-idea-page-main .f-idea-description video { margin-bottom: 16px; width: 70%; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview { align-items: center; display: flex; margin-left: -8px; padding: 10px; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview > div { overflow-wrap: break-word; width: calc(100% - 16px); }

.f-idea-page-main .f-idea-description .fractal-htmlpreview p, .f-idea-page-main .f-idea-description .fractal-htmlpreview figure { margin-bottom: 16px; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview p:last-child, .f-idea-page-main .f-idea-description .fractal-htmlpreview figure:last-child { margin-bottom: 0; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview ul, .f-idea-page-main .f-idea-description .fractal-htmlpreview ol { margin-bottom: 16px; margin-left: 32px; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview ul:last-child, .f-idea-page-main .f-idea-description .fractal-htmlpreview ol:last-child { margin-bottom: 0; }

.f-idea-page-main .f-idea-description .fractal-htmlpreview ol { list-style-type: decimal; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-widget-edit-redactor { border-radius: 4px; display: flex; justify-content: space-between; min-height: 40px; position: relative; width: calc(100% + 8px); }

.f-widget-edit-redactor.f-hover-redactor:not(.f-edit-description):hover { background: #e7e9eb; cursor: pointer; }

.f-widget-edit-redactor.f-hover-redactor:not(.f-edit-description):hover .fa-pencil { align-items: center; display: flex; justify-content: center; }

.f-widget-edit-redactor.f-redactor-disable { pointer-events: none; }

.f-widget-edit-redactor.f-edit-redactor { border: 1px solid #2ecc71; margin-left: -8px; }

.f-widget-edit-redactor.f-redactor-error { border: 1px solid #e74c3c; }

.f-widget-edit-redactor.f-no-answer-redactor { color: #999ea1; }

.f-widget-edit-redactor .fa-pencil { color: #3498db; display: none; }

.f-widget-edit-redactor .fractal-redactor { width: 100%; }

.f-widget-edit-redactor .fractal-redactor .redactor-toolbar { padding: 0; }

.f-widget-edit-redactor .fractal-redactor .re-button { color: #444647; margin-right: 0; }

.f-widget-edit-redactor .f-hover-redactor { background: #d5d9db; border: 1px solid #d5d9db; cursor: pointer; }

.f-widget-edit-redactor .f-edit-textarea-btns { bottom: -40px; display: flex; left: 0; position: absolute; z-index: 1; }

.f-widget-edit-redactor .f-edit-textarea-btns button { align-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: flex; height: 26px; justify-content: center; width: 34px; }

.f-widget-edit-redactor .f-edit-textarea-btns .f-add-textarea-btn { margin-left: 0; margin-right: 4px; }

.f-widget-edit-redactor .f-edit-textarea-btns .f-end-textarea-btn { margin-left: 0; }

.f-widget-edit-redactor .f-edit-textarea-btns i { font-size: 14px; }

.f-widget-edit-redactor p, .f-widget-edit-redactor figure { margin-bottom: 16px; }

.f-widget-edit-redactor p:last-child, .f-widget-edit-redactor figure:last-child { margin-bottom: 0; }

.f-widget-edit-redactor ul, .f-widget-edit-redactor ol { margin-bottom: 16px; margin-left: 32px; }

.f-widget-edit-redactor ul:last-child, .f-widget-edit-redactor ol:last-child { margin-bottom: 0; }

.f-widget-edit-redactor ol { list-style-type: decimal; }

.f-idea-modal ~ .redactor-context-toolbar, .f-idea-modal ~ #redactor-modal, .f-idea-modal ~ .redactor-dropdown { z-index: 2147483500; }

.userhome-body .f-widget-edit-redactor .fractal-redactor .re-button { color: #444647; margin-right: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-unsplash-list { display: flex; flex-wrap: wrap; height: 296px; justify-content: space-between; overflow-y: scroll; width: 100%; }

.f-unsplash-list .f-unsplash-item { background: #f5f5f6; border-radius: 4px; height: 112px; margin: 16px 0 0; width: 176px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-unsplash-wrapper { display: block; }

.f-unsplash-wrapper-empty { align-items: center; display: flex; height: 280px; justify-content: center; width: 100%; }

.f-unsplash-loading-link { margin-top: 16px; }

.f-search-wrapper, .f-unsplash-input { width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactCrop { position: relative; display: inline-block; cursor: crosshair; overflow: hidden; max-width: 100%; }

.ReactCrop *, .ReactCrop *::before, .ReactCrop *::after { box-sizing: border-box; }

.ReactCrop--disabled, .ReactCrop--locked { cursor: inherit; }

.ReactCrop__image { display: block; max-width: 100%; touch-action: none; }

.ReactCrop__crop-selection { position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); cursor: move; box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5); touch-action: none; border: 1px dashed #fff; }

.ReactCrop--disabled .ReactCrop__crop-selection { cursor: inherit; }

.ReactCrop--circular-crop .ReactCrop__crop-selection { border-radius: 50%; box-shadow: 0px 0px 1px 1px #fff, 0 0 0 9999em rgba(0, 0, 0, 0.5); }

.ReactCrop__crop-selection:focus { outline: none; border-color: blue; border-style: solid; }

.ReactCrop--invisible-crop .ReactCrop__crop-selection { display: none; }

.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { content: ""; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.4); }

.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after { width: 1px; height: 100%; }

.ReactCrop__rule-of-thirds-vt::before { left: 33.3333%; left: 33.3333333333%; }

.ReactCrop__rule-of-thirds-vt::after { left: 66.6666%; left: 66.6666666667%; }

.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { width: 100%; height: 1px; }

.ReactCrop__rule-of-thirds-hz::before { top: 33.3333%; top: 33.3333333333%; }

.ReactCrop__rule-of-thirds-hz::after { top: 66.6666%; top: 66.6666666667%; }

.ReactCrop__drag-handle { position: absolute; }

.ReactCrop__drag-handle::after { position: absolute; content: ""; display: block; width: 10px; height: 10px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); outline: 1px solid transparent; }

.ReactCrop__drag-handle:focus::after { border-color: blue; background: #2dbfff; }

.ReactCrop .ord-nw { top: 0; left: 0; margin-top: -5px; margin-left: -5px; cursor: nw-resize; }

.ReactCrop .ord-nw::after { top: 0; left: 0; }

.ReactCrop .ord-n { top: 0; left: 50%; margin-top: -5px; margin-left: -5px; cursor: n-resize; }

.ReactCrop .ord-n::after { top: 0; }

.ReactCrop .ord-ne { top: 0; right: 0; margin-top: -5px; margin-right: -5px; cursor: ne-resize; }

.ReactCrop .ord-ne::after { top: 0; right: 0; }

.ReactCrop .ord-e { top: 50%; right: 0; margin-top: -5px; margin-right: -5px; cursor: e-resize; }

.ReactCrop .ord-e::after { right: 0; }

.ReactCrop .ord-se { bottom: 0; right: 0; margin-bottom: -5px; margin-right: -5px; cursor: se-resize; }

.ReactCrop .ord-se::after { bottom: 0; right: 0; }

.ReactCrop .ord-s { bottom: 0; left: 50%; margin-bottom: -5px; margin-left: -5px; cursor: s-resize; }

.ReactCrop .ord-s::after { bottom: 0; }

.ReactCrop .ord-sw { bottom: 0; left: 0; margin-bottom: -5px; margin-left: -5px; cursor: sw-resize; }

.ReactCrop .ord-sw::after { bottom: 0; left: 0; }

.ReactCrop .ord-w { top: 50%; left: 0; margin-top: -5px; margin-left: -5px; cursor: w-resize; }

.ReactCrop .ord-w::after { left: 0; }

.ReactCrop__disabled .ReactCrop__drag-handle { cursor: inherit; }

.ReactCrop__drag-bar { position: absolute; }

.ReactCrop__drag-bar.ord-n { top: 0; left: 0; width: 100%; height: 6px; margin-top: -3px; }

.ReactCrop__drag-bar.ord-e { right: 0; top: 0; width: 6px; height: 100%; margin-right: -3px; }

.ReactCrop__drag-bar.ord-s { bottom: 0; left: 0; width: 100%; height: 6px; margin-bottom: -3px; }

.ReactCrop__drag-bar.ord-w { top: 0; left: 0; width: 6px; height: 100%; margin-left: -3px; }

.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar { display: none; }

.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w { display: none; }

@media (pointer: coarse) { .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w { display: none; }
  .ReactCrop__drag-handle { width: 24px; height: 24px; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.webstorm-level .f-image-modal, .f-image-modal { z-index: 2147483600; }

.webstorm-level .f-image-modal .f-modal-design-titleHeaderSubmitFooter-v1, .f-image-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.webstorm-level .f-image-modal .f-modal-body, .f-image-modal .f-modal-body { padding: 16px; width: 624px; }

.webstorm-level .f-image-modal .f-unsplash-list, .f-image-modal .f-unsplash-list { list-style: none; }

.webstorm-level .f-image-modal .f-tab-underline, .f-image-modal .f-tab-underline { font-size: 14px; }

.webstorm-level .f-image-modal .f-dropzone-description, .f-image-modal .f-dropzone-description { display: none; }

.webstorm-level .f-image-modal .fractal-fileupload-v2, .f-image-modal .fractal-fileupload-v2 { height: 100%; }

.webstorm-level .f-image-modal .f-dropzone-wrapper, .f-image-modal .f-dropzone-wrapper { height: inherit; }

.webstorm-level .f-image-modal .f-image-modal-loading, .f-image-modal .f-image-modal-loading { align-items: center; display: flex; height: 355px; justify-content: center; }

.fractal-widget-imageCropModal .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto !important; }

.fractal-widget-imageCropModal .f-modal-design-titleHeaderSubmitFooter-v1 #crop-modal-wrapper { text-align: center; width: 800px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-image-modal.ReactModalPortal { display: flex; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign { position: relative; z-index: 1; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign:hover, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover { z-index: 10; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-image, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-image { position: relative; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-voting-wrapper, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-voting-wrapper { opacity: 1; visibility: visible; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .__react_component_tooltip:last-child, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .__react_component_tooltip:last-child { position: absolute; }

.f-card-voting-wrapper { background: rgba(0, 0, 0, 0.6); border-radius: 4px; box-sizing: border-box; height: 96px; left: 20px; opacity: 0; padding: 8px; position: absolute; top: calc(50% - 48px); transition: opacity 0.5s; visibility: hidden; width: 40px; }

.f-card-voting-wrapper .f-vote { align-items: center; background: #fff; border-color: transparent; border-radius: 4px; color: #797d7f; display: flex; font-size: 14px; height: 24px; justify-content: center; margin: 0; padding: 0; position: relative; text-align: center; width: 24px; }

.f-card-voting-wrapper .f-vote-arrow-container { display: flex; flex-direction: column; height: 100%; justify-content: space-between; position: relative; }

.f-card-voting-wrapper .f-view-idea-up-vote.f-voted { background-color: #b4eccc; border-color: transparent; color: #2ecc71; }

.f-card-voting-wrapper .f-view-idea-down-vote.f-voted { background-color: #f7bfb9; border-color: transparent; color: #e74c3c; }

.f-card-voting-wrapper .f-vote-count { color: #fff; font-size: 14px; text-align: center; }

.f-card-voting-wrapper.f-card-small { height: 66px; top: calc(50% - 33px); }

.f-card-voting-wrapper.f-card-small .f-vote-arrow-container { justify-content: space-around; }

.f-card-voting-wrapper.f-card-small.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { top: 20px !important; }

.f-card-voting-wrapper.f-card-small .f-vote-count { align-items: center; display: flex; height: 28px; justify-content: center; }

.f-card-voting-wrapper.f-card-voting-clear { background: transparent; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote-count { color: #444647; font-size: 18px; font-weight: bold; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote { border-color: #bdc3c7; font-size: 16px; height: 32px; width: 32px; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote:hover .__react_component_tooltip { left: 32px !important; top: -2px !important; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:hover, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:focus { border-color: #f5f5f6; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled.f-view-idea-up-vote.f-voted, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:hover.f-view-idea-up-vote.f-voted, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:focus.f-view-idea-up-vote.f-voted { border-color: #b4eccc; }

.f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled.f-view-idea-down-vote.f-voted, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:hover.f-view-idea-down-vote.f-voted, .f-card-voting-wrapper.f-card-voting-clear .f-vote:disabled:focus.f-view-idea-down-vote.f-voted { border-color: #f7bfb9; }

.f-card-voting-wrapper.f-card-voting-clear .f-view-idea-up-vote.f-voted { border-color: #2ecc71; }

.f-card-voting-wrapper.f-card-voting-clear .f-view-idea-down-vote.f-voted { border-color: #e74c3c; }

.f-card-voting-wrapper.f-card-voting-clear.f-vote-large { height: 108px; padding: 0 8px; top: calc(50% - 54px); width: 32px; }

.f-card-voting-wrapper.f-card-voting-clear.f-vote-large.f-card-small { height: 74px; }

.f-card-voting-wrapper.f-card-disabled { cursor: not-allowed; }

.f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { left: 40px !important; position: absolute !important; top: 30px !important; white-space: nowrap; }

.fractal-secondary-ideas-view-list .f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { top: 48px !important; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { left: 48px !important; top: 40px !important; } }

.f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip::before { border-bottom: 6px solid transparent; border-top: 6px solid transparent; left: -8px; margin-top: -5px; top: 50%; }

.f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip::after { border-bottom: 5px solid transparent; border-right: 6px solid #444647; border-top: 5px solid transparent; left: -6px; margin-top: -4px; top: 50%; }

.f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container:hover .__react_component_tooltip { opacity: 1; visibility: visible; }

.f-card-voting-wrapper.f-card-voting.f-vote-large { height: 116px; padding: 8px; top: calc(50% - 58px); width: 48px; }

.f-card-voting-wrapper.f-card-voting.f-vote-large.f-card-small { height: 82px; }

.f-card-voting-wrapper.f-card-voting.f-vote-large .fas { line-height: 30px; }

.f-card-voting-wrapper.f-card-voting.f-vote-large .f-vote-count { font-size: 18px; font-weight: bold; }

.f-card-voting-wrapper.f-card-voting.f-vote-large .f-vote { font-size: 16px; height: 32px; width: 32px; }

.f-card-voting-wrapper.f-card-voting.f-vote-large .f-vote .__react_component_tooltip { left: 38px !important; top: 2px !important; }

.f-card-voting-wrapper.f-card-voting.f-vote-large.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { left: 45px !important; top: 40px !important; }

.f-card-voting-wrapper.f-card-voting.f-vote-large.f-card-disabled.f-card-small .f-vote-arrow-container .__react_component_tooltip { top: 30px !important; }

.f-card-voting-wrapper.f-card-voting.f-voting-visible { opacity: 1; visibility: visible; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal { height: 40px; left: 0; top: 0; width: 112px; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal .f-vote { border-color: #bdc3c7; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal .f-vote:disabled { border-color: transparent; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal .f-view-idea-up-vote.f-voted { border-color: #2ecc71; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal .f-view-idea-down-vote.f-voted { border-color: #e74c3c; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-xlarge { width: 136px; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-xlarge .f-vote { font-size: 16px; height: 40px; width: 40px; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-xlarge .fas { line-height: 40px; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-card-small { width: 70px; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-card-small .f-vote-arrow-container { justify-content: space-between; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-card-disabled .f-vote-arrow-container { justify-content: space-between; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { left: 104px !important; position: absolute !important; text-align: center; top: -7px !important; white-space: nowrap; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-large .f-vote-arrow-container .__react_component_tooltip { left: 44px !important; top: 1px !important; }

.f-card-voting-wrapper.f-card-voting.f-voting-horizontal .f-vote-arrow-container { flex-direction: row; }

.f-card-voting-wrapper .fas { display: block; height: 100%; line-height: 22px; width: 100%; }

.f-card-voting-wrapper .f-view-idea-up-vote .fas::before { content: '\F357'; }

.f-card-voting-wrapper .f-view-idea-up-vote .far::before { content: '\F357'; }

.f-card-voting-wrapper .f-view-idea-down-vote .fas::before { content: '\F354'; }

.f-card-voting .f-vote { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.3s; }

.f-card-voting .f-vote:disabled, .f-card-voting .f-vote:disabled:hover, .f-card-voting .f-vote:disabled:focus { background-color: #f5f5f6; border-color: transparent; opacity: 1; }

.f-card-voting .f-vote:disabled.f-view-idea-up-vote.f-voted, .f-card-voting .f-vote:disabled:hover.f-view-idea-up-vote.f-voted, .f-card-voting .f-vote:disabled:focus.f-view-idea-up-vote.f-voted { background-color: #b4eccc; border-color: transparent; }

.f-card-voting .f-vote:disabled.f-view-idea-up-vote.f-voted .fas, .f-card-voting .f-vote:disabled:hover.f-view-idea-up-vote.f-voted .fas, .f-card-voting .f-vote:disabled:focus.f-view-idea-up-vote.f-voted .fas { color: #79dea4; }

.f-card-voting .f-vote:disabled.f-view-idea-down-vote.f-voted, .f-card-voting .f-vote:disabled:hover.f-view-idea-down-vote.f-voted, .f-card-voting .f-vote:disabled:focus.f-view-idea-down-vote.f-voted { background-color: #f7bfb9; border-color: transparent; }

.f-card-voting .f-vote:disabled.f-view-idea-down-vote.f-voted .fas, .f-card-voting .f-vote:disabled:hover.f-view-idea-down-vote.f-voted .fas, .f-card-voting .f-vote:disabled:focus.f-view-idea-down-vote.f-voted .fas { color: #f08d82; }

.f-card-voting .f-vote:disabled .fas, .f-card-voting .f-vote:disabled:hover .fas, .f-card-voting .f-vote:disabled:focus .fas { color: #bdc3c7; }

.f-card-voting .f-vote:focus:not(:active) { box-shadow: none; }

.f-card-voting .f-vote:hover { border-color: transparent; overflow: visible; }

.f-card-voting .f-vote:hover .__react_component_tooltip { left: 28px !important; opacity: 1; position: absolute; top: -5px !important; visibility: visible; white-space: nowrap; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-card-voting .f-vote:hover .__react_component_tooltip { left: 36px !important; top: 6px !important; } }

.f-card-voting .f-vote:hover .__react_component_tooltip::before { border-bottom: 6px solid transparent; border-top: 6px solid transparent; left: -8px; margin-top: -5px; top: 50%; }

.f-card-voting .f-vote:hover .__react_component_tooltip::after { border-bottom: 5px solid transparent; border-right: 6px solid #444647; border-top: 5px solid transparent; left: -6px; margin-top: -4px; top: 50%; }

.f-card-voting.f-card-disabled { cursor: not-allowed; }

.f-card-voting.f-card-disabled .f-vote-arrow-container .f-vote { cursor: not-allowed; }

.f-card-voting .f-single-promote-btn .__react_component_tooltip { left: 122px !important; position: absolute; text-align: center; top: 0 !important; white-space: nowrap; }

.f-card-voting .f-promote-btn { align-items: center; display: flex; margin: 0 8px 0 0; padding: 8px; }

.f-card-voting .f-promote-btn:hover { border-color: #bdc3c7; }

.f-card-voting .f-promote-btn .fa-thumbs-up { font-size: 16px; margin-right: 8px; }

.f-card-voting .f-promote-btn span { font-size: 14px; }

.f-card-voting .f-promote-btn span:not(:last-of-type) { margin-right: 8px; }

.f-card-voting .f-promote-btn .f-votes-count { align-items: center; background-color: #bdc3c7; border-radius: 2px; color: #fff; display: flex; height: 18px; justify-content: center; padding: 3px; }

.f-card-voting .f-promote-btn.f-positive-vote .f-votes-count { background: #2ecc71; }

.f-card-voting .f-promote-btn.f-positive-vote:disabled .f-votes-count { background: #79dea4; }

.f-card-voting .f-promote-btn.f-positive-vote.f-voted { background: #d5f5e3; border-color: #2ecc71; color: #2ecc71; }

.f-card-voting .f-promote-btn.f-large-btn { height: 40px; }

.f-idea-header-large .f-card-voting .f-single-promote-btn .__react_component_tooltip { top: 4px !important; }

.f-idea-header-medium .f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-large .f-vote-arrow-container .__react_component_tooltip { left: 36px !important; top: -2px !important; }

.f-idea-header-small .f-card-voting-wrapper.f-card-voting.f-voting-horizontal.f-vote-large .f-vote-arrow-container .__react_component_tooltip { left: 32px !important; top: -2px !important; }

#voting-component-render .f-card-voting-wrapper.f-vote-large { border-radius: 8px; left: 16px; top: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-vote-animation { position: relative; }

.f-vote-animation::before, .f-vote-animation::after { border-radius: 50%; content: ''; display: block; height: 1px; left: 50%; margin: -1px 0 0; position: absolute; top: 50%; width: 1px; }

.f-vote-animation::before { border: solid 36px transparent; height: 2px; margin: -37px; transform: scale(0); width: 2px; z-index: -1; }

.f-vote-animation.f-single-promote-btn::after { transform: scale(5); }

.f-vote-animation::after { box-shadow: 18px 18px 0 -3px #2ecc71, 18px -18px 0 -3px #2ecc71, -18px 18px 0 -3px #2ecc71, -18px -18px 0 -3px #2ecc71, 26px 0 0 -3px #2ecc71, 0 -26px 0 -3px #2ecc71, -26px 0 0 -3px #2ecc71, 0 26px 0 -3px #2ecc71, 24px 10px 0 -3px #2ecc71, 10px -24px 0 -3px #2ecc71, -24px 10px 0 -3px #2ecc71, 10px 24px 0 -3px #2ecc71, 24px -10px 0 -3px #2ecc71, -10px -24px 0 -3px #2ecc71, -10px 24px 0 -3px #2ecc71, -24px -10px 0 -3px #2ecc71; }

.f-vote-animation.f-vote-animation-demote::after { box-shadow: 18px 18px 0 -3px #e74c3c, 18px -18px 0 -3px #e74c3c, -18px 18px 0 -3px #e74c3c, -18px -18px 0 -3px #e74c3c, 26px 0 0 -3px #e74c3c, 0 -26px 0 -3px #e74c3c, -26px 0 0 -3px #e74c3c, 0 26px 0 -3px #e74c3c, 24px 10px 0 -3px #e74c3c, 10px -24px 0 -3px #e74c3c, -24px 10px 0 -3px #e74c3c, 10px 24px 0 -3px #e74c3c, 24px -10px 0 -3px #e74c3c, -10px -24px 0 -3px #e74c3c, -10px 24px 0 -3px #e74c3c, -24px -10px 0 -3px #e74c3c; }

.f-show-animation { animation: button 1s cubic-bezier(0.08, 0.69, 0.39, 0.97); will-change: font-size; }

.f-show-animation svg { fill: #2ecc71; }

.f-show-animation > .f-vote { animation: pulse 0.4s ease-in-out; will-change: height, width; }

.f-show-animation::before { animation-delay: 0.4s; will-change: transform, border-width, border-color; }

.f-show-animation::after { animation-delay: 0.4s; will-change: opacity, box-shadow; }

.f-show-animation.f-vote-animation-promote::after { animation: particlesGreen 1s ease-out; }

.f-show-animation.f-vote-animation-promote::before { animation: bubble 1s ease-out; will-change: transform, border-width, border-color; }

.f-show-animation.f-vote-animation-promote:active, .f-show-animation.f-vote-animation-promote:focus { background-color: #b4eccc; border-color: #2ecc71; color: #2ecc71; }

.f-show-animation.f-vote-animation-demote::after { animation: particlesRed 1s ease-out; }

.f-show-animation.f-vote-animation-demote::before { animation: bubbleRed 1s ease-out; will-change: transform, border-width, border-color; }

.f-show-animation.f-vote-animation-demote:active, .f-show-animation.f-vote-animation-demote:focus { background-color: #f7bfb9; border-color: #e74c3c; color: #e74c3c; }

.f-vote-focused .f-view-idea-up-vote { background-color: #fff; border-color: #bdc3c7; color: #797d7f; }

.f-vote-focused .f-view-idea-up-vote:active, .f-vote-focused .f-view-idea-up-vote:focus { background-color: #fff; border-color: #bdc3c7; color: #797d7f; }

.f-vote-focused .f-view-idea-down-vote { background-color: #fff; border-color: #bdc3c7; color: #797d7f; }

.f-vote-focused .f-view-idea-down-vote:active, .f-vote-focused .f-view-idea-down-vote:focus { background-color: #fff; border-color: #bdc3c7; color: #797d7f; }

@keyframes button { 0%, 10% { font-size: 0; } }

@keyframes pulse { 0%, 30% { transform: scale(0.1); } }

@keyframes bubble { 25% { border-color: rgba(180, 236, 204, 0.4);
    border-width: 36px;
    transform: scale(1); }
  30%, 100% { border-color: transparent;
    border-width: 0;
    transform: scale(0); } }

@keyframes bubbleRed { 25% { border-color: rgba(231, 76, 60, 0.5);
    border-width: 36px;
    transform: scale(1); }
  30%, 100% { border-color: transparent;
    border-width: 0;
    transform: scale(0); } }

@keyframes particlesGreen { 0%, 5% { opacity: 1;
    transform: rotate(0deg), scale(0); }
  20%, 30% { box-shadow: 23px 23px 0 2px #2ecc71, 23px -23px 0 2px #2ecc71, -23px 23px 0 2px #2ecc71, -23px -23px 0 2px #2ecc71, 31px 0 0 2px #2ecc71, 0 -31px 0 2px #2ecc71, -31px 0 0 2px #2ecc71, 0 31px 0 2px #2ecc71, 29px 12px 0 2.4px #2ecc71, 12px -29px 0 2.4px #2ecc71, -29px 12px 0 2.4px #2ecc71, 12px 29px 0 2.4px #2ecc71, 29px -12px 0 2.4px #2ecc71, -12px -29px 0 2.4px #2ecc71, -12px 29px 0 2.4px #2ecc71, -29px -12px 0 2.4px #2ecc71;
    opacity: 1;
    transform: rotate(15deg);
    transform: scale(1); } }

@keyframes particlesRed { 0%, 5% { opacity: 1;
    transform: rotate(0deg), scale(0); }
  20%, 30% { box-shadow: 23px 23px 0 2px #e74c3c, 23px -23px 0 2px #e74c3c, -23px 23px 0 2px #e74c3c, -23px -23px 0 2px #e74c3c, 31px 0 0 2px #e74c3c, 0 -31px 0 2px #e74c3c, -31px 0 0 2px #e74c3c, 0 31px 0 2px #e74c3c, 29px 12px 0 2.4px #e74c3c, 12px -29px 0 2.4px #e74c3c, -29px 12px 0 2.4px #e74c3c, 12px 29px 0 2.4px #e74c3c, 29px -12px 0 2.4px #e74c3c, -12px -29px 0 2.4px #e74c3c, -12px 29px 0 2.4px #e74c3c, -29px -12px 0 2.4px #e74c3c;
    opacity: 1;
    transform: rotate(15deg);
    transform: scale(1); } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-connect-to-jira-modal-body { padding: 16px 16px 24px; }

.f-connect-to-jira-modal-body p { font-size: 14px; margin: 0 0 12px; white-space: pre-wrap; }

.f-connect-to-jira-hide-button { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-send-to-jira-modal-body p { font-size: 14px; margin: 0 0 12px; }

.f-send-to-jira-modal-body .f-jira-modal-spacer { height: 16px; }

.f-send-to-jira-modal-body .f-jira-modal-label { font-size: 14px; line-height: 20px; padding-bottom: 8px; }

.fractal-widget-jiraModal .title { font-size: 16px; font-weight: 500; line-height: 28px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-link-to-jira-modal-body p { font-size: 14px; margin: 0 0 12px; }

.f-link-to-jira-modal-body .f-jira-modal-spacer { height: 16px; }

.f-link-to-jira-modal-body .f-jira-modal-label { font-size: 14px; line-height: 20px; padding-bottom: 8px; }

.fractal-widget-jiraModal .title { font-size: 16px; font-weight: 500; line-height: 28px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-jira-toast .f-jira-toast-body { display: flex; font-size: 14px; }

.f-jira-toast .fa-check-circle, .f-jira-toast .fa-exclamation-triangle { font-size: 16px; }

.f-jira-toast .fa-external-link { margin: 0 4px; }

.f-jira-toast .f-jira-toast-body a { color: white; margin-left: 2px; text-decoration: underline; }

.f-jira-toast .f-jira-toast-body a:visited, .f-jira-toast .f-jira-toast-body a:active, .f-jira-toast .f-jira-toast-body a:hover, .f-jira-toast .f-jira-toast-body a:focus { color: white; text-decoration: underline; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-label-editable { position: relative; }

.f-label-editable:hover .f-edit-panel { display: block; }

.f-label-editable .f-edit-panel { background: #d3e8f2; border: 4px solid rgba(0, 0, 0, 0.35); border-radius: 4px; display: none; padding: 4px; position: fixed; width: 120px; z-index: 200; }

.f-label-editable .f-edit-panel .f-edit-label-value { font-size: 11px; margin: 6px 0; width: 96%; }

.f-label-editable .f-edit-panel .f-edit-panel-button { width: 50px; }

.f-label-editable .f-label-value-editable { background-color: #fc6; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-jira-linked-issues { margin-bottom: 16px; }

.f-jira-linked-issues .f-jira-icon, .f-jira-linked-issues .f-jira-unlink-icon { height: 14px; margin-right: 4px; min-height: 14px; min-width: 14px; width: 14px; }

.f-jira-linked-issues .f-jira-unlink-icon { color: #e74c3c; cursor: pointer; display: none; }

.f-jira-linked-issues .f-jira-linked-issue-list { display: flex; flex-direction: column; }

.f-jira-linked-issues .f-jira-linked-issue { display: flex; margin-top: 12px; }

.f-jira-linked-issues .f-jira-linked-issue .f-jira-img-name { align-items: center; display: flex; }

.f-jira-linked-issues .f-jira-linked-issue .f-jira-status { display: flex; }

.f-jira-linked-issues .f-jira-linked-issue .f-jira-linked-issue-link { margin-top: 0; }

.f-jira-linked-issues .f-jira-linked-issue:hover .f-jira-icon { display: none; }

.f-jira-linked-issues .f-jira-linked-issue:hover .f-jira-unlink-icon { display: block; }

.f-jira-linked-issues .f-jira-linked-issue .f-status-indicator { display: inline; font-size: 8px; margin: 2px; }

.f-jira-linked-issues .f-jira-linked-issue-link { cursor: pointer; font-size: 12px; font-weight: 600; margin-top: 8px; }

.f-jira-linked-issues .fractal-spinner-outer .spinner-inner i.fa-spinner { font-size: 18px; margin-top: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-jira-actions .f-jira-actions-action { cursor: pointer; display: block; font-size: 12px; font-weight: 400; margin-bottom: 4px; margin-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-jira-issues { padding: 4px 2px; }

.f-jira-issues .f-jira-header { align-items: center; display: flex; }

.f-jira-issues .f-jira-header .f-jira-subheader { font-size: 12px; font-weight: 600; line-height: 22px; margin: 0; }

.f-jira-issues .f-jira-action-btns { align-items: flex-start; display: flex; flex-direction: column; }

.f-jira-issues .f-jira-action-btns button { margin-bottom: 0; margin-left: 0; }

.f-jira-issues .f-auth-btn { margin-left: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-userflyover { width: 100%; }

.f-userflyover .f-userflyover-section { align-items: center; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px; text-align: center; }

.f-userflyover .f-userflyover-name { display: inline-flex; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; font-weight: bold; }

.f-userflyover .f-userflyover-name a { color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; font-weight: bold; letter-spacing: 0.02em; line-height: 20px; margin-bottom: 8px; word-break: break-all; }

.f-userflyover .f-userflyover-name a:hover { color: #444647; text-decoration: none; }

.f-userflyover .f-userflyover-name span { display: inline-block; }

.f-userflyover .f-userflyover-name span + span { margin-left: 4px; }

.f-userflyover .f-userflyover-view-profile { color: #3498db; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; margin: 0; padding: 0; }

.f-userflyover .f-userflyover-view-profile:hover { color: #3498db; text-decoration: underline; }

.f-member-image .__react_component_tooltip { border: none; border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); margin-top: 4px; opacity: 1; pointer-events: auto; width: 192px; }

.f-member-image .__react_component_tooltip.show { opacity: 1; }

.f-member-image .__react_component_tooltip.place-bottom { margin-top: inherit; }

.f-member-image .__react_component_tooltip.place-right { margin-left: inherit; }

.f-member-image .__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.f-member-image .__react_component_tooltip.type-light.place-top::before { border-top: 8px solid rgba(0, 0, 0, 0.1); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-member-image { border: 2px solid #1abc9c; border-radius: 50%; box-sizing: border-box; cursor: pointer; height: 28px; overflow: hidden; position: relative; width: 28px; }

.f-member-image * { box-sizing: border-box; }

.f-member-image .f-member-initial, .f-member-image .f-member-photo { background-size: cover; border-radius: 50%; height: 24px; width: 24px; }

.f-member-image .f-member-initial { align-items: center; color: white; display: flex; justify-content: center; line-height: 24px; }

.f-member-image .f-member-initial:hover { text-decoration: none; }

.f-member-image + .f-member-image { margin-left: 8px; }

.f-member-image.f-member-image-sm { height: 24px; width: 24px; }

.f-member-image.f-member-image-sm + .f-member-image-sm { margin-left: 3px; }

.f-member-image.f-member-image-sm .f-member-initial, .f-member-image.f-member-image-sm .f-member-photo { font-size: 14px; height: 24px; line-height: 24px; width: 24px; }

.f-member-image.f-member-image-sm .f-member-initial { transform: translate(-2px, -3px); }

.f-member-image.f-member-image-xs { height: 20px; width: 20px; }

.f-member-image.f-member-image-xs + .f-member-image-xs { margin-left: 3px; }

.f-member-image.f-member-image-xs .f-member-initial, .f-member-image.f-member-image-xs .f-member-photo { font-size: 12px; height: 18px; line-height: 18px; width: 18px; }

.f-member-image.f-member-image-xs .f-member-initial { transform: translate(-1px, -1px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate-assign-lockup { align-items: center; color: #444647; display: flex; font-size: 14px; padding: 0 12px; width: calc(100% - 24px); }

.f-slate-assign-lockup .f-slate-single-assign { color: #444647; display: inline-block; font-weight: 700; margin-left: 6px; }

.f-slate-assign-lockup .f-checkbox-wrapper { transform: translateY(2px); }

.f-slate-assign-lockup .f-dropdown-btn { color: #444647; font-weight: 700; padding: 0 6px; }

.f-slate-assign-lockup .f-dropdown-btn.f-dropdown-open, .f-slate-assign-lockup .f-dropdown-btn.f-dropdown-open:active, .f-slate-assign-lockup .f-dropdown-btn.f-dropdown-open:focus, .f-slate-assign-lockup .f-dropdown-btn.f-dropdown-open:focus:not(:active) { background: #fff; border-color: #fff; box-shadow: none; color: #444647; }

.f-slate-assign-lockup .f-dropdown-btn span, .f-slate-assign-lockup .f-dropdown-full-click .f-dropdown-options li span { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 12px); }

.f-slate-assign-lockup .f-dropdown-btn span { height: 14px; line-height: 12px; max-width: 160px; transform: translateY(2px); width: 100%; }

.f-slate-assigned-header { background-color: rgba(52, 152, 219, 0.2); color: #444647; font-size: 14px; padding: 8px 12px 10px; }

.f-slate-assigned-header .fa-clock { margin-right: 4px; }

.f-slate-assigned-header .fa-check { float: right; font-size: 18px; transform: translateY(2px); }

.f-slate-assigned-header span { display: inline-block; font-weight: 700; line-height: 17px; margin-left: 1px; max-width: 66%; overflow: hidden; text-overflow: ellipsis; transform: translateY(3px); white-space: nowrap; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate-comment-input-body { padding: 8px 12px; }

.f-slate-comment-input-body a, .f-slate-comment-input-body a:active, .f-slate-comment-input-body a:visited { color: #2f89cc; }

.f-slate-comment-input-body .f-slate-comment-input { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; padding: 0 12px; }

.f-slate-comment-input-body .f-slate-comment-input:focus { border-color: #1abc9c; box-shadow: none !important; outline: none !important; }

.f-slate-comment-input-body .f-slate-comment-input.warning-border { border: 1px solid #e74c3c; }

.f-slate-comment-input-body .f-slate-comment-input::placeholder { color: #999ea1; }

.f-slate-comment-input-body .f-slate-comment-input .f-comment-input-placeholder, .f-slate-comment-input-body .f-slate-comment-input .f-comment-input-textarea { padding: 8px 0; }

.f-slate-comment-header .fractal-dropdownPopout .fractal-dropdownPopout-popout-container { background-color: transparent; box-shadow: none; }

.f-slate-comment-header .fractal-dropdownPopout .f-btn-borderless { margin: 0; }

.f-slate-comment-header .fractal-dropdownPopout .fractal-button.fractal-drop-open.f-dropdown-btn.f-dropdown-btn-square.f-btn-borderless { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

.f-slate-comment-header .fractal-dropdownPopout .f-dropdown-options { top: 0; }

.f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel { transform: translateY(-20px); }

.f-slate-comment { transition: all 0.3s; }

.f-slate-comment-hidden { display: none; }

.f-slate-comment-shown { max-height: 100vh; opacity: 1; position: static; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate-all-comments-list { background: #fff; border-radius: 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); max-height: calc(100vh - 72px); padding: 0; position: fixed; right: 20px; top: 46px; width: 320px; z-index: 2147483501; }

.f-slate-all-comments-list .f-slate-all-comments-scroll { max-height: calc(100vh - 130px); overflow: auto; }

.f-slate-all-comments-list .f-slate-comments-loading { align-items: center; display: flex; justify-content: center; min-height: 25vh; }

.f-slate-all-comments-list .f-slate-comments-container { display: none; position: relative; }

.f-slate-all-comments-list .f-slate-comments-container-shown { border-bottom: 1px solid #e7e9eb; display: block; }

.f-slate-all-comments-list .f-slate-comment + .f-slate-comment { border: none; }

.f-slate-all-comments-list .f-slate-comments-container-header { align-items: center; border-bottom: 1px solid #e7e9eb; display: flex; justify-content: space-between; min-height: 30px; padding: 12px; }

.f-slate-all-comments-list .f-slate-comments-container-header .f-dropdown-btn.f-dropdown-btn-square.f-dropdown-open { color: #797d7f; }

.f-slate-all-comments-list .f-slate-comments-container-header .f-dropdown-btn.f-dropdown-btn-square.f-dropdown-open:focus, .f-slate-all-comments-list .f-slate-comments-container-header .f-dropdown-btn.f-dropdown-btn-square.f-dropdown-open:active .f-slate-all-comments-list .f-slate-comments-container-header .f-dropdown-btn.f-dropdown-btn-square.f-dropdown-open:focus:not(:active) { color: #fff; }

.f-slate-all-comments-list .f-slate-comments-container-header .fa-chevron-left { margin-right: 8px; }

.f-slate-all-comments-list .f-slate-comments-container-header .f-return-to-comments { align-items: center; cursor: pointer; display: flex; justify-content: flex-start; }

.f-slate-all-comments-list .f-comments-all-filter { cursor: pointer; }

.f-slate-all-comments-list .f-slate-comments-container-footer { align-items: center; display: flex; justify-content: space-between; margin: 6px 12px 12px; }

.f-slate-all-comments-list .f-show-replies { color: #2f89cc; cursor: pointer; display: inline-block; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 14px; font-weight: 700; }

.f-slate-all-comments-list .f-marked-resolved { color: #797d7f; display: inline-block; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 14px; font-style: italic; font-weight: 400; }

.f-slate-all-comments-list .f-slate-assigned-header { margin-top: 12px; }

.f-slate-all-comments-list .f-slate-assigned-header span { font-weight: 600; max-width: 54%; }

.f-slate-all-comments-list .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel { left: 0 !important; width: 292px; }

.f-slate-all-comments-list .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist { min-width: 292px; width: 292px; }

.f-slate-all-comments-list .f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist .f-comment-input-member { min-width: 260px; width: 260px; }

.f-comment-open-btn i { font-size: 14px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-input-clear { cursor: pointer; display: flex; height: 100%; position: absolute; right: 10px; top: 0; }

.fractal-input-clear .fa-times-circle { align-self: center; color: #999ea1; font-size: 16px; }

.fractal-input-clear:hover { color: #121313; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-teamWorkspaceTeam { width: 100%; }

.fractal-teamWorkspaceTeam.workspacePage { padding: 20px 10px; }

.fractal-teamWorkspaceTeam .add-new-user { border: solid 1px #444647; border-radius: 50%; cursor: pointer; height: 35px; line-height: 35px; width: 35px; }

.fractal-teamWorkspaceTeam .add-new-user i { line-height: 35px; text-align: center; width: 100%; }

.fractal-teamWorkspaceTeam .add-new-user:hover { transform: scale(1.04); }

.fractal-teamWorkspaceTeam .team-top { display: flex; }

.fractal-teamWorkspaceTeam .team-top .team-title { font-size: 12px; font-weight: bold; }

.fractal-teamWorkspaceTeam .team-top a { cursor: pointer; flex: 1; font-size: 12px; font-weight: 600; text-align: right; }

.fractal-teamWorkspaceTeam .team-members { display: flex; flex-wrap: wrap; margin-top: 5px; }

.fractal-teamWorkspaceTeam .team-member-container { margin: 5px; position: relative; width: 32px; }

.fractal-teamWorkspaceTeam .team-member-container .team-owner { background: #f1c40f; border: solid 1px #fff; border-radius: 50%; color: #fff; font-size: 8px; padding: 4px; position: absolute; right: -6px; top: -6px; }

.fractal-teamWorkspaceTeam .team-member-container .member-initial { height: 35px; width: 35px; }

.fractal-teamWorkspaceTeam .team-member-container .member-img { height: 35px; }

.fractal-teamWorkspaceHomeMembers * { box-sizing: border-box; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body { box-sizing: border-box; display: flex; flex-direction: row; padding: 0; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .column-header { padding: 10px 0; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .column-header .header-left { float: left; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .column-header .header-right { float: right; margin-right: 9px; text-align: center; width: 60px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column, .fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column { width: 50%; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column { padding: 10px 20px 0; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container { align-items: center; display: flex; position: relative; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .fractal-input { flex: 1 0 auto; width: 100%; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .fractal-input .team-members-search { background: #fff; color: #444647; font-size: 12px; width: 100%; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .fractal-input .team-members-search:focus { outline: none; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .fractal-input .team-members-search::placeholder { color: #999ea1; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .fractal-input .team-members-search::-ms-clear { display: none; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column { border-left: 1px solid #f5f5f6; padding: 10px 20px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list { background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; overflow-y: auto; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list.f-team-loading { align-items: center; display: flex; justify-content: center; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .f-teams-loader { align-items: center; display: flex; height: 0; justify-content: center; width: 100%; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list.team-list-left { height: calc(100% - 115px); margin-top: 20px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list.team-list-right { height: calc(100% - 60px); margin-top: 10px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .team-list-selection .fa-chevron-right { float: right; margin-top: 10px; transition: color 0.2s ease-in-out; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .fa, .fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .far { color: #bdc3c7; cursor: pointer; float: right; font-size: 16px; margin-top: 6px; transition: color 0.2s ease-in-out; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .fa-key.owner { color: #444647; margin-right: 19px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .fa-key.not-owner { margin-right: 7px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .fa-key.not-owner:hover { color: #444647; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .fa-trash:hover { color: #c0392b; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .no-results { display: block; padding-top: 25px; text-align: center; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .team-list-member { border-bottom: 1px dotted #bdc3c7; cursor: pointer; padding: 3px 10px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .team-list-member .member-initial { height: 24px; line-height: 35px; width: 24px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .team-list-member .member-img { height: 24px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-body .team-list .team-list-member .member-name { line-height: 30px; margin: 5px; padding-left: 5px; vertical-align: text-bottom; }

.fractal-teamWorkspaceHomeMembers .f-flex-columns { display: flex; height: 286px; margin-top: -12px; }

.fractal-teamWorkspaceHomeMembers .f-full-column { display: flex; flex-direction: column; padding: 10px 16px 0; width: 100%; }

.fractal-teamWorkspaceHomeMembers .f-full-column .fa-team-name { position: relative; }

.fractal-teamWorkspaceHomeMembers .f-full-column .fa-team-name::before { align-items: center; background-color: #3498db; border-radius: 50%; color: #fff; content: '\f0c0'; font-family: 'Font Awesome 5 Pro'; font-size: 12px; font-weight: 800; height: 24px; left: 8px; line-height: 24px; margin: 0; padding: 0; position: absolute; text-align: center; top: 8px; width: 24px; }

.fractal-teamWorkspaceHomeMembers .f-full-column .fa-team-name .f-team-name-input { height: 40px; max-height: 40px; padding-left: 40px; width: 100%; }

.fractal-teamWorkspaceHomeMembers .f-full-column .f-teamname-limit { font-style: italic; margin-top: 2px; text-align: right; }

.fractal-teamWorkspaceHomeMembers .f-full-column + .f-flex-columns { display: flex; height: 286px; margin-top: -12px; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-header .title { font-weight: normal; }

.fractal-teamWorkspaceHomeMembers .fractal-modal-footer .f-btn-subtle { margin-right: 10px; }

.f-with-team-name .fractal-modal-body { flex-direction: column; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactCollapse--collapse { transition: height 500ms cubic-bezier(0, 0, 0.5, 1); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.collapsible-header-section .tab-header { align-items: center; border-bottom: 1px solid #999ea1; cursor: pointer; display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 10px 0; width: 100%; }

.collapsible-header-section .tab-header-image-icon { transform: scale(0.6); }

.collapsible-header-section .tab-icon-left { margin-right: 10px; }

.collapsible-header-section .tab-icon-right { color: #3498db; float: right; margin-left: auto; margin-right: 5px; transition: color 0.2s ease-in-out; }

.collapsible-header-section .tab-icon-right:active { color: #124364; }

.collapsible-header-section .tab-icon-right:hover { color: #196090; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-request-body .f-body-text { display: flex; font-weight: 600; padding-bottom: 4px; }

.f-request-body .f-body-text.f-error { color: #e74c3c; }

.f-request-body .f-error-border:not(.f-member-typeahead) { border: 1px solid #e74c3c; }

.f-request-body .f-checkbox-wrapper { margin: 8px 0 12px; }

.f-request-body .f-checkbox-wrapper label span { margin-left: 4px; }

.f-request-body .f-member-typeahead { margin-bottom: 12px; width: 302px; }

.f-request-body .f-member-typeahead .f-new-user-role { transform: none; }

.f-request-body .f-member-typeahead .member-image-v1 { display: flex; }

.f-request-body .f-member-typeahead.f-error-border .react-tags { border: 1px solid #e74c3c; }

.f-request-body .f-review-round-name { background: inherit; margin-bottom: 12px; width: 100%; }

.f-request-body .fractal-combobox { margin-bottom: 12px; }

.f-request-body .f-review-template-container { align-items: center; display: flex; justify-content: space-between; }

.f-request-body .f-review-template-container a { padding-bottom: 4px; }

.f-request-body .fractal-combobox.f-error .f-combobox-input { border: 1px solid #e74c3c; }

.f-request-body .f-review-due-date-container { align-items: center; display: flex; padding-bottom: 12px; }

.f-request-body .f-review-due-date-container input { background: #fff; margin-right: 4px; width: 54px; }

.f-request-body .f-review-remind-container .f-checkbox-wrapper { margin-top: 0; }

.f-request-body .f-review-remind-container .f-checkbox-wrapper span { display: inline; }

.f-request-body .f-review-remind-container .fractal-input { display: inline; }

.f-request-body .f-review-remind-container .fractal-input input { background: #fff; display: inline; visibility: visible; width: 42px; }

.f-request-body .f-review-remind-container .fractal-input input::-webkit-outer-spin-button, .f-request-body .f-review-remind-container .fractal-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.f-request-body .f-review-remind-container .fractal-input input[type='number'] { -moz-appearance: textfield; }

.f-request-body .f-radio-wrapper.f-radio-last-result { margin-bottom: 12px; }

.f-request-body .f-radio-wrapper label { margin-left: 8px; }

.f-request-body a { color: #3498db; cursor: pointer; display: flex; }

.f-request-body .fractal-input input { height: 32px; }

.f-request-body textarea { background: #fff; font-family: 'Lato', 'Open Sans', arial, sans-serif; height: 96px; resize: vertical; width: 302px; }

.f-request-body .react-tags__search { font-size: 14px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-memo-results-modal { display: flex; font-family: 'Lato', 'Open Sans', arial, sans-serif; }

.fractal-memo-results-modal.f-loading-memo-results .f-modal-design-titleHeaderSubmitFooter-v1 { height: 100%; }

.fractal-memo-results-modal.ReactModalPortal.f-display-footer .f-modal-body { display: flex; flex-direction: column; justify-content: space-between; }

.fractal-memo-results-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-title-container { align-items: center; display: flex; }

.fractal-memo-results-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-title-container .f-btn-standard { margin: 0 8px; }

.fractal-memo-results-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-title-container .f-btn-standard:last-of-type { margin-left: 0; }

.fractal-memo-results-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { padding: 0; position: relative; width: 800px; }

.fractal-memo-results-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { display: none; }

.fractal-memo-results-modal .ReactModal__Content { height: 80%; }

.fractal-memo-results-modal .f-results-loading { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }

.fractal-memo-results-modal .f-round-config { color: #3498db; cursor: pointer; font-size: 14px; position: absolute; right: 24px; top: 116px; }

.fractal-memo-results-modal .f-tabs-header { padding-left: 24px; }

.fractal-memo-results-modal .f-tab-underline { font-size: 14px; }

.fractal-memo-results-modal .f-tab-content { padding: 24px 24px 24px 0; }

.fractal-memo-results-modal .f-kpis { align-items: center; display: flex; justify-content: space-between; margin: 16px 24px; }

.fractal-memo-results-modal .f-kpi-box { align-items: center; border: 1px solid #bdc3c7; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; padding: 16px 0; position: relative; width: 172px; }

.fractal-memo-results-modal .f-kpi-box:last-of-type { margin-right: 0; }

.fractal-memo-results-modal .f-kpi-remind { position: absolute; right: 0; top: 0; }

.fractal-memo-results-modal .f-kpi-score { align-items: center; background: #bdc3c7; border-radius: 4px; display: flex; height: 24px; justify-content: center; width: 42px; }

.fractal-memo-results-modal .f-kpi-score.f-green { background: #b4eccc; }

.fractal-memo-results-modal .f-kpi-score.f-orange { background: #f7c067; }

.fractal-memo-results-modal .f-kpi-score.f-red { background: #f08d82; }

.fractal-memo-results-modal .f-kpi-value { font-size: 16px; font-weight: 700; }

.fractal-memo-results-modal .f-kpi-value.f-trend-kpi { align-items: center; display: flex; }

.fractal-memo-results-modal .f-kpi-value.f-trend-kpi .f-trend-icon { align-items: center; border-radius: 4px; display: flex; height: 24px; justify-content: center; margin-right: 8px; width: 32px; }

.fractal-memo-results-modal .f-kpi-value.f-trend-kpi .f-trend-icon.f-up { background: #b4eccc; }

.fractal-memo-results-modal .f-kpi-value.f-trend-kpi .f-trend-icon.f-down { background: #f7bfb9; }

.fractal-memo-results-modal .f-kpi-title { color: #999ea1; font-size: 14px; font-weight: 700; }

.fractal-memo-results-modal .f-kpi-title .fa-info-circle { margin-left: 4px; }

.fractal-memo-results-modal .f-kpi-title .__react_component_tooltip { width: 260px; }

.fractal-memo-results-modal .f-heading { display: flex; font-weight: 700; padding: 16px 0 8px; }

.fractal-memo-results-modal .f-reviewers-container { align-items: center; display: flex; }

.fractal-memo-results-modal .f-reviewer-info { align-items: center; display: flex; margin-bottom: 8px; }

.fractal-memo-results-modal .f-reviewer-info:last-of-type { margin-bottom: 0; }

.fractal-memo-results-modal .f-reviewer-info-container { display: flex; flex-direction: column; }

.fractal-memo-results-modal .f-reviewer-score { align-items: center; background: #f5f5f6; border-radius: 4px; display: flex; font-weight: 700; height: 24px; justify-content: center; margin-right: 8px; width: 32px; }

.fractal-memo-results-modal .f-row-title { color: #797d7f; display: inline-flex; font-weight: 700; width: 148px; }

.fractal-memo-results-modal .f-row-title.f-reviewers-title { align-self: self-start; display: flex; }

.fractal-memo-results-modal .f-round-info-row { align-items: center; display: flex; padding: 8px 0; }

.fractal-memo-results-modal .f-round-info-row:first-of-type { padding: 0; }

.fractal-memo-results-modal .fractal-progress-bar { height: 8px; margin-right: 8px; margin-top: 0; width: 60%; }

.fractal-memo-results-modal .f-progress-text { align-items: center; display: flex; justify-content: space-between; width: 490px; }

.fractal-memo-results-modal .f-progress-text .fa-alarm-clock { margin-right: 4px; }

.fractal-memo-results-modal .f-remind-kpi { margin: 0 8px; }

.fractal-memo-results-modal .f-results-summary-container { display: flex; }

.fractal-memo-results-modal .f-question-container, .fractal-memo-results-modal .f-filter-container { margin-bottom: 16px; overflow: auto; }

.fractal-memo-results-modal .f-question-container .f-checkbox, .fractal-memo-results-modal .f-filter-container .f-checkbox { margin-bottom: 8px; }

.fractal-memo-results-modal .f-question-container .f-checkbox-wrapper.f-filter-member, .fractal-memo-results-modal .f-filter-container .f-checkbox-wrapper.f-filter-member { position: relative; top: 4px; }

.fractal-memo-results-modal .f-question-container .f-checkbox-wrapper input[type='checkbox'], .fractal-memo-results-modal .f-filter-container .f-checkbox-wrapper input[type='checkbox'] { margin: 0; }

.fractal-memo-results-modal .f-question-container .f-checkbox-label-user, .fractal-memo-results-modal .f-filter-container .f-checkbox-label-user { display: flex; float: left; margin-right: 10px; overflow: hidden; position: relative; top: 4px; white-space: nowrap; }

.fractal-memo-results-modal .f-question-container .f-checkbox-label-user .f-checkbox-user-name, .fractal-memo-results-modal .f-filter-container .f-checkbox-label-user .f-checkbox-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 115px; }

.fractal-memo-results-modal .f-results-info-container { height: 100%; overflow: auto; padding-left: 24px; }

.fractal-memo-results-modal .f-filter-title { color: #797d7f; font-size: 12px; font-weight: 700; text-transform: uppercase; }

.fractal-memo-results-modal .f-quick-jump-container { margin-bottom: 16px; }

.fractal-memo-results-modal .f-quick-jump-item { align-items: center; border-radius: 4px; cursor: pointer; display: flex; list-style: none; margin-right: 16px; padding: 8px; white-space: nowrap; }

.fractal-memo-results-modal .f-quick-jump-item:hover { background: #3498db; color: #fff; }

.fractal-memo-results-modal .f-quick-jump-item span { overflow: hidden; text-overflow: ellipsis; }

.fractal-memo-results-modal .f-question-container { flex: 1; width: 100%; }

.fractal-memo-results-modal .f-result-question { background: #f5f5f6; border-radius: 4px; margin-bottom: 16px; padding: 12px; }

.fractal-memo-results-modal .f-result-question:last-of-type { margin-bottom: 0; }

.fractal-memo-results-modal .f-result-question .ReactCollapse--content { margin-left: 12px; }

.fractal-memo-results-modal .f-result-question .f-title { font-weight: 700; margin-bottom: 4px; }

.fractal-memo-results-modal .f-result-question .fractal-slider { margin-left: 8px; width: 84%; }

.fractal-memo-results-modal .f-result-question .rc-slider-disabled { background-color: initial; }

.fractal-memo-results-modal .f-result-question .rc-slider-mark { display: none; }

.fractal-memo-results-modal .f-result-question .rc-slider-handle { border-color: #8e44ad; height: 20px; margin-top: -8px; width: 20px; }

.fractal-memo-results-modal .f-result-question .rc-slider-dot { background-color: #bdc3c7; border-color: #bdc3c7; }

.fractal-memo-results-modal .f-result-question .f-separator { border-top: 1px dashed #d5d9db; margin: 16px 0; }

.fractal-memo-results-modal .f-result-question .f-user-container { margin-bottom: 8px; }

.fractal-memo-results-modal .f-result-question .f-user-container:last-of-type { margin-bottom: 0; }

.fractal-memo-results-modal .f-result-question .f-user { align-items: center; display: flex; }

.fractal-memo-results-modal .f-result-question .f-user-info { align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px; width: 100%; }

.fractal-memo-results-modal .f-result-question .f-user-info.f-is-textarea { justify-content: flex-start; }

.fractal-memo-results-modal .f-result-question .f-user-info > * { margin-right: 8px; }

.fractal-memo-results-modal .f-result-question .f-user-info .f-user-name { align-items: center; display: flex; }

.fractal-memo-results-modal .f-result-question .f-user-info .f-user-name .member-image-v1 { height: 24px; margin-right: 8px; width: 24px; }

.fractal-memo-results-modal .f-result-question .f-user-info .f-score { background: #fff; font-size: 12px; height: 20px; margin-right: 0; width: 24px; }

.fractal-memo-results-modal .f-summary-slider-question { background: #e7e9eb; border-radius: 6px; height: 4px; margin-left: 8px; position: relative; width: 384px; }

.fractal-memo-results-modal .f-slider-dot { position: absolute; top: -10px; }

.fractal-memo-results-modal .f-slider-dot .member-image-v1 { height: 8px; width: 8px; }

.fractal-memo-results-modal .f-slider-dot .member-image-v1 .member-img, .fractal-memo-results-modal .f-slider-dot .member-image-v1 .member-initial { font-size: 6px; height: 8px; width: 8px; }

.fractal-memo-results-modal .f-slider-dot .member-image-v1 .member-img { position: absolute; top: 1px; }

.fractal-memo-results-modal .f-slider-dot .member-image-v1::after { display: none; }

.fractal-memo-results-modal .f-slider-dot.f-hovered { top: -12px; }

.fractal-memo-results-modal .f-slider-dot.f-hovered .member-image-v1 { height: 18px; width: 18px; }

.fractal-memo-results-modal .f-slider-dot.f-hovered .member-image-v1 .member-img, .fractal-memo-results-modal .f-slider-dot.f-hovered .member-image-v1 .member-initial { font-size: 10px; height: 18px; width: 18px; }

.fractal-memo-results-modal .f-slider-dot.f-hovered .member-image-v1 .member-img { top: 4px; }

.fractal-memo-results-modal .f-summary-slider-avg { background: #8e44ad; border-radius: 50%; height: 20px; top: -8px; width: 20px; }

.fractal-memo-results-modal .f-score-container { align-items: center; display: flex; justify-content: space-between; }

.fractal-memo-results-modal .f-score { align-items: center; background: #e7e9eb; border-radius: 4px; display: flex; font-weight: 700; height: 32px; justify-content: center; width: 32px; }

.fractal-memo-results-modal .f-score.f-sm { background: #fff; font-size: 12px; height: 20px; width: 20px; }

.fractal-memo-results-modal .f-filter-container { flex-basis: 268px; padding-left: 24px; }

.fractal-memo-results-modal .f-filter-member { margin: 0 0 8px; }

.fractal-memo-results-modal .f-filter-member .f-checkbox-label-container { align-items: center; display: flex; justify-content: space-between; }

.fractal-memo-results-modal .f-filter-member .f-checkbox-label-user { align-items: center; display: flex; }

.fractal-memo-results-modal .f-filter-member .f-checkbox-user-name { display: inline-block; margin-left: 0; overflow: hidden; padding-right: 4px; text-overflow: ellipsis; white-space: nowrap; width: 130px; }

.fractal-memo-results-modal .f-filter-member .member-image-v1 { height: 24px; margin-left: 4px; margin-right: 8px; width: 24px; }

.fractal-memo-results-modal .f-filter-member .f-score { font-size: 12px; height: 20px; width: 30px; }

.fractal-memo-results-modal .f-filter-member label { display: flex; }

.fractal-memo-results-modal .f-filter-member label span { margin-left: 0; }

.fractal-memo-results-modal .member-image-v1 { height: 24px; width: 24px; }

.fractal-memo-results-modal .member-image-v1 .member-img { height: 24px; }

.fractal-memo-results-modal .member-image-v1 .member-initial { height: 24px; width: 24px; }

.fractal-memo-results-modal .f-request-body { font-size: 14px; overflow: auto; padding: 24px; }

.fractal-memo-results-modal .f-request-body .f-member-typeahead, .fractal-memo-results-modal .f-request-body .f-review-round-name, .fractal-memo-results-modal .f-request-body textarea, .fractal-memo-results-modal .f-request-body .fractal-dropdown, .fractal-memo-results-modal .f-request-body .f-inline-message { width: 60%; }

.fractal-memo-results-modal .f-request-body .f-inline-message { margin-bottom: 16px; }

.fractal-memo-results-modal .f-request-footer { align-items: center; border-top: 1px solid #f5f5f6; display: flex; justify-content: space-between; padding: 16px; }

.f-remind-popup-container { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; font-size: 14px; padding: 16px; position: absolute; width: 236px; z-index: 2147483600; }

.f-remind-popup-container .fractal-button { margin: 8px 0; width: 114px; }

.f-remind-popup-container .f-remind-date { color: #999ea1; font-style: italic; }

.f-memo-round-delete-text { display: block; margin-bottom: 8px; }

.f-idea-modal ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg), .view-idea-3 ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg), .webstorm-level .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) { top: -2px; }

.f-idea-modal ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-image-v1, .view-idea-3 ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-image-v1, .webstorm-level .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-image-v1 { display: flex; }

.f-idea-modal ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-img, .view-idea-3 ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-img, .webstorm-level .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg) .member-img { position: relative; top: 0; }

.f-idea-modal ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered, .view-idea-3 ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered, .webstorm-level .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered { top: -7px; }

.f-idea-modal ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered .member-image-v1 .member-img, .view-idea-3 ~ .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered .member-image-v1 .member-img, .webstorm-level .fractal-memo-results-modal .f-slider-dot:not(.f-summary-slider-avg).f-hovered .member-image-v1 .member-img { top: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-review-results { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; position: absolute; right: 8px; top: 98px; }

.f-memo-review-results * { box-sizing: border-box; }

.f-memo-review-results .f-heading { align-items: center; border-bottom: 1px solid #e7e9eb; display: flex; justify-content: space-between; padding: 16px; }

.f-memo-review-results .f-heading .f-btn-xs { font-size: 14px; margin: 0; }

.f-memo-review-results .f-body { max-height: calc(100vh - 163px); overflow: auto; padding: 16px; }

.f-memo-review-results .f-body .f-loading { align-items: center; display: flex; height: 163px; justify-content: center; width: 302px; }

.f-memo-review-results .f-round-container { background: #f5f5f6; border-radius: 4px; cursor: pointer; margin-bottom: 16px; padding: 16px; width: 302px; }

.f-memo-review-results .f-round-container:last-of-type { margin-bottom: 0; }

.f-memo-review-results .f-round-container:hover { background: #e7e9eb; }

.f-memo-review-results .f-round-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }

.f-memo-review-results .f-round-name { font-weight: 700; }

.f-memo-review-results .f-round-score-container { align-items: center; background: #bdc3c7; border-radius: 4px; display: flex; height: 24px; justify-content: center; width: 30px; }

.f-memo-review-results .f-round-score-container.f-green { background: #b4eccc; }

.f-memo-review-results .f-round-score-container.f-orange { background: #f7c067; }

.f-memo-review-results .f-round-score-container.f-red { background: #f08d82; }

.f-memo-review-results .f-round-score { font-size: 14px; font-weight: 700; }

.f-memo-review-results .fractal-progress-bar { height: 8px; margin-bottom: 8px; }

.f-memo-review-results .f-round-complete-container { align-items: center; color: #797d7f; display: flex; font-weight: 700; justify-content: space-between; }

.f-memo-review-results .f-round-complete-text { color: #2ecc71; }

.f-memo-review-results .f-round-complete-text i { margin-right: 4px; }

.f-memo-review-results .f-due-date-past { color: #e74c3c; }

.f-memo-review-results .f-round-footer { align-items: center; display: flex; justify-content: flex-end; }

.f-memo-review-results .f-round-footer .f-btn-standard { margin-bottom: 0; margin-right: 0; }

.f-memo-review-results .f-round-no-results { align-items: center; display: flex; height: 248px; justify-content: center; width: 302px; }

.f-memo-review-results .f-round-no-results-text { font-weight: 700; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-tab { padding: 20px; }

.fractal-widget-evaluation-tab * { box-sizing: border-box; }

.fractal-widget-evaluation-tab .highcharts-title { font-family: 'Open Sans', arial, sans serif; font-size: 14px !important; }

.fractal-widget-evaluation-tab .highcharts-yaxis-title, .fractal-widget-evaluation-tab .highcharts-xaxis-title { color: #797d7f !important; fill: #797d7f !important; }

.fractal-widget-evaluation-tab .highcharts-yaxis-labels text, .fractal-widget-evaluation-tab .highcharts-xaxis-labels text { color: #797d7f !important; fill: #797d7f !important; }

.fractal-widget-evaluation-tab .fractal-eval-tab-empty-state { color: #797d7f; font-size: 18px; margin-top: 120px; text-align: center; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance .f-memo-review-results { box-shadow: none; position: relative; right: inherit; top: inherit; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance .f-memo-review-results .f-body { max-height: inherit; overflow: inherit; padding: 0; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance .f-memo-review-results .f-body .f-loading { width: inherit; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance .f-memo-review-results .f-round-container { width: inherit; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-tab * { box-sizing: border-box; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance { margin-bottom: 20px; }

.fractal-widget-evaluation-tab .fractal-widget-evaluation-instance:last-of-type { margin-bottom: 0; }

.fractal-widget-evaluation-tab .fractal-evaluationHeader { background: #afb6ba; color: #fff; font-size: 16px; margin-bottom: 20px; padding: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-tab .breakdown-scorecard-container { padding: 30px 0; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container * { box-sizing: border-box; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table { padding-top: 20px; width: 100%; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-toggle-question { background-color: #f5f5f6; border: none; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .text-answers-table .text-answer-container { align-items: center; display: flex; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .text-answers-table .text-answer-container .member-image-v1 { margin: 15px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .text-answers-table .text-answer-container .fractal-question-text { overflow-wrap: break-word; width: 90%; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table { margin-left: 15px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header { display: flex; font-weight: bold; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-row { display: flex; justify-content: left; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-answer-choices-col { padding-bottom: 10px; width: 400px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-evaluators-col { text-align: center; width: 100px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-pts-earned-col { text-align: center; width: 100px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-value-col { text-align: center; width: 100px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-eval-question-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-eval-question-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-eval-question-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-eval-question-col { width: 75%; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-eval-question-col.text-question, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-eval-question-col.text-question, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-eval-question-col.text-question, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-eval-question-col.text-question { width: 90%; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-eval-points-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-eval-points-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-eval-points-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-eval-points-col { text-align: center; width: 14%; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-eval-points-col .fa-info-circle, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-eval-points-col .fa-info-circle, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-eval-points-col .fa-info-circle, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-eval-points-col .fa-info-circle { margin-left: 3px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-toggle-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-toggle-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-toggle-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-toggle-col { align-items: center; background-color: #f5f5f6; color: #0072bc; display: flex; justify-content: center; width: 40px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-toggle-col .fractal-toggle-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-toggle-col .fractal-toggle-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-toggle-col .fractal-toggle-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-toggle-col .fractal-toggle-icon { color: #0072bc; cursor: pointer; font-size: 14px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .question-row, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .question-row-header, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .question-row, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .question-row-header, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .question-row, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .question-row-header, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .question-row, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .question-row-header { align-items: center; display: flex; justify-content: center; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-header .fractal-eval-table-cell, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .fractal-eval-table-body .fractal-eval-table-cell, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-header .fractal-eval-table-cell, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .fractal-eval-table-body .fractal-eval-table-cell { background-color: #f5f5f6; height: 50px; margin: 3px; padding: 15px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container .tooltip-question, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container .tooltip-question { display: inline-block; margin-left: 3px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded { background-color: #fff; border: 2px #3498db solid; margin: 3px 12px; padding-bottom: 20px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-eval-question-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-eval-question-col { margin: 15px; margin-bottom: 0; padding: 10px 0; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-eval-points-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-eval-points-col { margin-left: auto; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-eval-table-cell, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-eval-table-cell { height: auto; padding: 5px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-imgWrapper, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-imgWrapper { align-items: center; background: #f5f5f6; border: 4px solid #fff; border-radius: 50%; display: flex; height: 40px; justify-content: center; margin: 12px; overflow: hidden; position: relative; width: 40px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-imgWrapper span.fa, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-imgWrapper span.fa { color: #999ea1; transform: scale(1.5); }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-toggle-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .fractal-toggle-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .fractal-scorecard-questions-table .question-row-container.answers-expanded .text-question, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-toggle-col, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .fractal-toggle-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .point-answers-table .question-row-container.answers-expanded .text-question { background-color: #fff; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container { display: flex; font-size: 16px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .breakdown-scorecard-header, .fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .show-breakdown-btn { display: inline-block; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .breakdown-scorecard-header .show-questions-icon, .fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .show-breakdown-btn .show-questions-icon { cursor: pointer; margin: 0 5px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .breakdown-scorecard-title { color: #444647; font-size: 14px; height: 20px; }

.fractal-widget-evaluation-tab .breakdown-scorecard-container .breakdown-scorecard-header-container .show-breakdown-btn { color: #3498db; cursor: pointer; font-size: 14px; margin-left: auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-tab .progress { margin-top: -20px; }

.fractal-widget-evaluation-tab .progress * { box-sizing: border-box; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ribbonWrapper { align-items: center; background: url(/fractal/dist/images/6a12e341e6a949d810e0.png) no-repeat center center; background-size: 100%; display: flex; margin-bottom: 30px; margin-top: 30px; padding: 0 70px; }

.ribbonWrapper .ribbonBox { color: #444647; flex-grow: 1; padding-bottom: 12px; text-align: center; width: 165px; }

.ribbonWrapper .ribbonBox .figure { display: block; font-size: 36px; font-weight: 500; line-height: 36px; }

.ribbonWrapper .ribbonBox .figure .percentage, .ribbonWrapper .ribbonBox .figure .smallerText { font-size: 24px; line-height: 1; }

.ribbonWrapper .ribbonBox .figure .percentage { position: relative; }

.ribbonWrapper .ribbonBox .figureOverview { display: inline; font-size: 10px; font-weight: 200; line-height: 14px; text-align: center; }

.ribbonWrapper .ribbonChart { align-items: center; border-radius: 100%; display: flex; height: 165px; justify-content: center; margin-left: 18px; margin-top: -185px; width: 165px; }

.ribbonWrapper .ribbonChart .percentileNumber { color: #1abc9c; font-size: 36px; font-weight: bold; }

.ribbonWrapper .ribbonChart sup { color: #1abc9c; font-size: 24px; vertical-align: top; }

.ribbonWrapper .ribbonChart .centerFigures { margin-top: 50px; text-align: center; z-index: 1; }

.ribbonWrapper .ribbonChart .centerFigures :first-child { display: block; }

.ribbonWrapper .ribbonChart .centerFigures span { color: #444647; font-size: 10px; }

@media (max-width: 480px) { .ribbonWrapper { background-size: auto; justify-content: center; }
  .ribbonWrapper .ribbonBox .figure { font-size: 24px; }
  .ribbonWrapper .ribbonBox .figure .smallerText { font-size: 16px; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorsContent { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorsHeader { color: #444647; font-size: 14px; height: 20px; margin-bottom: 30px; margin-top: 30px; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-showMore { margin-top: 20px; text-align: center; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-showMoreEvaluators { cursor: pointer; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember { display: inline-block; min-height: 100px; text-align: center; width: 19%; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .member-image-v1 { margin-right: 0; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .img-circle { background: #f5f5f6; display: inline; height: 100%; width: auto; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .fractal-imgWrapper { align-items: center; background: #f5f5f6; border: 4px solid #fff; border-radius: 50%; display: flex; height: 45px; justify-content: center; margin-top: -25px; overflow: hidden; position: relative; right: 10px; width: 45px; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .fractal-imgWrapper span.fa { color: #999ea1; transform: scale(1.5); }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .fractal-evaluatorWrapper { height: auto; margin: 0 auto; width: 75px; }

.fractal-widget-evaluation-tab .evaluators-list-container-wrapper .fractal-evaluatorMember .fractal-ranked-wrapper { border: 2px solid #d5d9db; border-radius: 50%; height: 65px; line-height: 65px; text-align: center; width: 65px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-evaluation-distro-chart { border: 1px solid #e7e9eb; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-tabs-row .fractal-widget-evaluation-tab { padding: 0; }

.f-tabs-row .fractal-widget-evaluation-tab .fractal-eval-tab-empty-state { margin-bottom: 120px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-tags.f-tags-typeahead { align-items: center; border: 1px solid transparent; border-radius: 4px; display: flex; height: 100%; justify-content: space-between; left: -8px; padding: 4px; position: relative; width: calc(100% + 8px); }

.f-edit-tags.f-tags-typeahead .react-tags__search { margin: 0; width: 0; }

.f-edit-tags.f-tags-typeahead .react-tags__search > div:not(.react-tags__suggestions) { padding-left: 4px; }

.f-edit-tags.f-tags-typeahead .react-tags__search .react-tags__search-input { width: auto; }

.f-edit-tags.f-tags-typeahead .react-tags__search .react-tags__search-input::placeholder { color: #999ea1; }

.f-edit-tags.f-tags-typeahead.f-type-tag li:nth-child(n + 3).f-typeahead-active:not(.f-parent-exists), .f-edit-tags.f-tags-typeahead.f-type-tag li:nth-child(n + 3):hover:not(.f-parent-exists) { background: #e7e9eb; }

.f-edit-tags.f-tags-typeahead.f-type-tag li:nth-child(n + 3).f-typeahead-active.f-parent-exists { background: #6dd4c0; }

.f-edit-tags.f-tags-typeahead.f-type-tag input[value=''] { width: 79px !important; }

.f-edit-tags.f-tags-typeahead.f-type-admin li:nth-child(n + 3).f-typeahead-active, .f-edit-tags.f-tags-typeahead.f-type-admin li:nth-child(n + 3):hover { background: rgba(241, 196, 15, 0.2); }

.f-edit-tags.f-tags-typeahead.f-type-admin input[value=''] { width: 120px !important; }

.f-edit-tags.f-tags-typeahead.f-multi-types .react-tags__suggestions li:nth-child(-n + 2).f-typeahead-active > div { border-bottom: 2px solid #2ecc71; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions { border: 1px solid #e7e9eb; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); left: -4px; top: calc(100% + 1em); width: calc(100% + 8px); }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions.f-loading-tags li:first-child { display: flex; justify-content: center; pointer-events: none; width: 100%; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions.f-loading-tags li:first-child.f-typeahead-active > div { border: none; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions.f-loading-tags li:nth-of-type(n + 2) { display: none; pointer-events: none; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li { padding: 8px; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li.is-active { background: transparent; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li.nav .f-tag-suggestion-name { color: #999ea1; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li.nav:hover { background: transparent; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li.nav:hover .f-tag-suggestion-name { color: #444647; }

.f-edit-tags.f-tags-typeahead .react-tags__suggestions li:nth-child(-n + 2).f-typeahead-active .f-tag-suggestion-name { color: #444647; }

.f-edit-tags.f-tags-typeahead:hover:not(.f-edit-tags-focus) { background: #e7e9eb; border: 1px solid #e7e9eb; cursor: pointer; }

.f-edit-tags.f-tags-typeahead:hover:not(.f-edit-tags-focus) input:hover { cursor: pointer; }

.f-edit-tags.f-tags-typeahead:hover:not(.f-edit-tags-focus) > .react-tags:hover { cursor: pointer; }

.f-edit-tags.f-tags-typeahead:hover:not(.f-edit-tags-focus) .fa-pencil { opacity: 1; }

.f-edit-tags.f-tags-typeahead:not(.f-edit-tags-focus) > .react-tags .react-tags__selected i.fa-times { height: 0; opacity: 0; position: absolute; width: 0; z-index: -1; }

.f-edit-tags.f-tags-typeahead .f-tag-count { display: none; }

.f-edit-tags.f-tags-typeahead > .react-tags { background: transparent; border: none; max-width: 100%; width: 100%; z-index: 1; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected { display: inline-block; max-width: 95%; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected .react-tags__selected-tag { margin: 2px 4px; text-transform: lowercase; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected .f-tag-active { outline: none; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected .f-admin-tag { background: #f1c40f; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected .f-admin-tag.f-tag-active { background-color: #c29d0b; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected i.fa-times { border-radius: 100%; color: #444647; height: auto; margin-left: 2px; margin-right: -8px; opacity: 1; padding: 4px 8px; width: auto; z-index: 0; }

.f-edit-tags.f-tags-typeahead > .react-tags .react-tags__selected i.fa-times:hover { background: rgba(0, 0, 0, 0.1); }

.f-edit-tags.f-tags-typeahead > .react-tags:hover { cursor: pointer; }

.f-edit-tags.f-tags-typeahead > .fa-pencil { align-items: center; color: #3498db; display: flex; height: 24px; opacity: 0; position: absolute; right: 8px; z-index: 0; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus.f-multi-types .react-tags__suggestions ul li:nth-of-type(1), .f-edit-tags.f-tags-typeahead.f-edit-tags-focus.f-multi-types .react-tags__suggestions ul li:nth-of-type(2) { float: right; padding: 8px 16px; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus.f-multi-types .react-tags__suggestions ul li:nth-of-type(3) { display: flex; width: 100%; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus { border: 1px solid #2ecc71; z-index: 4; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus .react-tags__selected { display: inline; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus .react-tags__search { height: 26px; margin: 2px 0 2px 4px; width: auto; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus .f-suggestion-wrapper { justify-content: flex-start; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus .f-suggestion-wrapper .f-tag-suggestion-count { margin-left: 0; }

.f-edit-tags.f-tags-typeahead.f-edit-tags-focus .f-suggestion-wrapper .f-tag-add-new { background: transparent; border: none; color: #444647; height: auto; margin-left: 4px; padding: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-expertise { position: relative; z-index: 102; }

.f-idea-expertise .f-edit-tags { height: inherit; }

.f-idea-expertise .f-edit-tags.f-tags-typeahead.f-type-tag input[value=''] { width: 106px !important; }

.f-idea-expertise .f-edit-tags.f-type-tag li.f-typeahead-active, .f-idea-expertise .f-edit-tags.f-type-tag li:hover { background: #e7e9eb; }

.f-idea-expertise .f-edit-tags.f-type-tag li.f-typeahead-active.f-parent-exists { background: #6dd4c0; }

.f-idea-expertise .react-tags .react-tags__selected .f-tag-wrapper { background: #b6daf2; }

.f-idea-expertise .react-tags .react-tags__selected .f-tag-wrapper.f-tag-active { background: #5faee3; }

.f-idea-expertise .react-tags li.f-typeahead-active .f-tag-suggestion-name { color: #444647; }

.f-idea-expertise .f-expertise-container { display: flex; flex-flow: wrap; min-height: 40px; }

.f-idea-expertise .f-expertise-container .f-expertise-wrapper { margin: 2px 4px 2px 0; text-transform: lowercase; }

.f-idea-expertise .f-expertise-container .f-expertise-wrapper .f-expertise { background-color: #b6daf2; border-radius: 14px; color: #444647; display: block; height: 24px; line-height: 24px; padding: 0 8px; transition: background-color 0.3s; }

.f-idea-expertise .f-expertise-container .f-expertise-wrapper .f-expertise:hover { background-color: #5faee3; text-decoration: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-dropdown .fractal-button { margin-left: 0; margin-right: 0; margin-top: 0; }

.f-idea-dropdown .f-dropdown-options { top: 24px; }

.f-idea-dropdown .f-dropdown-options li > div { width: 100%; }

.f-idea-dropdown .f-dropdown-options li div[class*='f-'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-btn-icon { height: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-favorite { align-items: center; border: 1px solid #bdc3c7; border-radius: 4px; color: #fff; cursor: pointer; display: flex; font-family: 'Open Sans', sans-serif; font-weight: 500; justify-content: center; margin-top: 6px; padding: 0; position: relative; text-align: center; width: 32px; }

.f-idea-favorite.f-idea-favorite-selected, .f-idea-favorite.f-idea-favorite-selected:hover, .f-idea-favorite.f-idea-favorite-selected:focus, .f-idea-favorite.f-idea-favorite-selected:active { background: #fcf3cf; border-color: #f1c40f; color: #f1c40f; }

.f-idea-favorite i { margin: 0 auto; }

.f-idea-favorite.f-idea-favorite-circle { border-radius: 50%; bottom: -16px; font-size: 14px; height: 32px; position: absolute; right: 20px; top: 240px; width: 32px; z-index: 1; }

.f-idea-favorite.f-idea-favorite-circle .__react_component_tooltip { text-align: center; white-space: nowrap; }

.f-idea-favorite.f-idea-favorite-circle:hover { transform: scale(1.05); }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-favorite-circle { display: none; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-favorite-circle.f-idea-favorite-selected { display: flex; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .ideaboard-card-custom-label { padding: 20px 20px 0; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .ideaboard-card-custom-label span { background-color: #e7e7e7; color: #888; padding: 2px 5px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-idea-favorite-circle { right: 22px; top: 22px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-absolute-elements .f-idea-favorite-circle { display: flex; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-favorite { flex: 1 0 auto; margin-left: 0; margin-top: 0; padding: 0; width: 32px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-hidden-banner { align-items: center; border: 1px solid #3498db; border-radius: 4px; display: flex; height: 56px; justify-content: space-between; margin: 0 32px; padding: 0 24px; width: calc(100% - 64px); }

.f-idea-hidden-banner > div { align-items: center; display: flex; }

.f-idea-hidden-banner .fa-eye-slash { color: #3498db; font-size: 20px; margin-right: 16px; }

.f-idea-hidden-banner.f-fade-out { animation: fadeOutUp 0.75s forwards; }

.f-idea-header.f-remove-padding { animation: removePadding 0.75s forwards; }

.f-toggle-visible { height: 24px; line-height: 22px; }

.f-idea-hidden-text { color: #999ea1; margin-top: 128px; text-align: center; width: 100%; }

.f-idea-hidden-text .fal, .f-idea-hidden-text .fas { font-size: 36px; margin-bottom: 24px; }

.f-idea-hidden-text .fa-lock, .f-idea-hidden-text .fa-low-vision { color: #444647; }

.f-idea-hidden-text .f-link { display: block; font-size: 14px; margin-top: 30px; }

.f-idea-hidden-text h1 { font-size: 18px; font-weight: normal; margin-bottom: 16px; }

.f-idea-no-access .f-idea-hidden-holder { align-items: center; display: flex; height: 100%; margin-top: 0; }

.f-idea-no-access .f-idea-hidden-holder .f-idea-hidden-text { margin-top: 0; }

.f-idea-no-access h1 { color: #444647; font-size: 24px; }

.f-idea-no-access p { color: #797d7f; }

.f-memo-record.f-idea-page-wrapper .f-hide-memo-record { margin-bottom: -24px; padding-top: 0; top: -24px; }

.f-memo-record .f-idea-hidden-banner { background: #fefad1; border: 0; height: 30px; justify-content: flex-start; margin: 0; width: 100%; }

.f-memo-record .fa-eye-slash { color: #000; }

.f-idea-modal .f-idea-modal-container .f-memo-record.f-idea-page-wrapper .f-hide-memo-record { margin-bottom: 0; top: 0; }

@keyframes removePadding { 0% { padding-top: 32px; }
  100% { padding-top: 0; } }

@keyframes fadeOutUp { 0% { height: 56px;
    opacity: 1; }
  50% { height: 56px;
    opacity: 0; }
  100% { height: 0;
    opacity: 0; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-image-widget { height: 32px; opacity: 0; position: absolute; right: 10px; top: 16px; visibility: hidden; width: 154px; }

.f-edit-image-widget.f-open-image-widget { opacity: 1; visibility: visible; }

.f-edit-image-widget.f-open-image-widget .f-edit-image-btn { background: #999ea1; box-shadow: none; color: #fff; }

.f-edit-image-widget.f-empty-possible .fractal-dropdownPopout-popout-container { left: -31px; width: 185px; }

.f-edit-image-widget.f-empty-possible .fractal-dropdownPopout-popout-container .f-possible-img-container { margin-bottom: 0; }

.f-edit-image-widget.f-mini-image-btn { height: 25px; right: 8px; top: 8px; width: 34px; }

.f-edit-image-widget.f-mini-image-btn .f-edit-image-btn { justify-content: center; }

.f-edit-image-widget.f-mini-image-btn.f-empty-possible .fractal-dropdownPopout-popout-container { right: -152px; }

.f-edit-image-widget.f-mini-image-btn .fractal-dropdownPopout-popout-container { left: auto; right: -311px; top: 29px; }

.f-edit-image-widget.f-two-images .fractal-dropdownPopout-popout-container .f-possible-img:last-of-type { margin-right: -12px; }

.f-edit-image-widget .f-edit-image-btn { align-items: center; display: flex; height: 100%; justify-content: space-between; margin-left: 0; margin-top: 0; padding: 0 16px; position: absolute; width: 100%; }

.f-edit-image-widget .f-edit-image-btn > div { align-items: center; display: flex; justify-content: space-between; width: 100%; }

.f-edit-image-widget .f-edit-image-btn span { line-height: 32px; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container { box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); left: auto; padding: 16px 16px 0; right: 0; top: 40px; z-index: 2; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-dropzone p:nth-of-type(2) { display: none; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-possible-img-container { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; max-height: 170px; overflow: auto; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-possible-img { background-position: center; background-size: cover; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; height: 64px; width: 96px; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-possible-img:hover { cursor: pointer; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-possible-img:last-of-type { margin-right: 0; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-possible-img.f-active-img { border: 3px solid #1abc9c; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-dropzone-wrapper { height: 52px; margin-bottom: 16px; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-dropzone-wrapper .f-dropzone { border: 2px dashed #797d7f; border-radius: 4px; padding: 8px; text-align: center; z-index: 105; }

.f-edit-image-widget .fractal-dropdownPopout-popout-container .f-dropzone-wrapper .f-name-separator { display: none; }

.f-idea-header-medium .f-edit-image-widget .f-edit-image-btn > div { width: auto; }

.f-idea-image-container:hover .f-edit-image-widget, .f-idea-image-container:focus .f-edit-image-widget, .f-idea-image-container:active .f-edit-image-widget { opacity: 1; visibility: visible; }

.webstorm-level .f-add-cover-image-modal .f-dropzone-wrapper .f-dropzone { border: 2px #797d7f dashed; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-chips-vote-wrapper .f-chips-vote-btn { align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; font-size: 14px; margin-left: 0; padding: 0 8px; transition: background-color 0.3s; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-lg-chip-btn { font-size: 14px; height: 40px; margin-bottom: 0; padding: 0 12px; }

.f-chips-vote-wrapper .f-chips-vote-btn .f-chips-btn-content { align-items: center; display: flex; white-space: nowrap; }

.f-chips-vote-wrapper .f-chips-vote-btn .f-chips-btn-text { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }

.f-chips-vote-wrapper .f-chips-vote-btn i { font-size: 16px; margin-right: 8px; }

.f-chips-vote-wrapper .f-chips-vote-btn .f-chips-count { align-items: center; background: #bdc3c7; border-radius: 2px; color: #fff; display: flex; height: 18px; justify-content: center; margin-left: 8px; width: 25px; }

.f-chips-vote-wrapper .f-chips-vote-btn.fractal-drop-open { background: #999ea1; box-shadow: none; }

.f-chips-vote-wrapper .f-chips-vote-btn.fractal-drop-open .f-chips-btn-content { color: #fff; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary { background: #b4eccc; border: 1px solid #2ecc71; color: #444647; font-size: 14px; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):hover { background: #79dea4; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):hover .f-chips-count { color: #fff; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):active, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):focus, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.fractal-drop-open { background: #2ecc71; color: #fff; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):active .f-chips-count, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):focus .f-chips-count, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.fractal-drop-open .f-chips-count { background: #1e8248; color: #fff; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):active i, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary:not(.f-disabled-droppop-btn):focus i, .f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.fractal-drop-open i { color: #fff; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary i { color: #2ecc71; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.f-disabled-droppop-btn { border: none; color: #999ea1; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.f-disabled-droppop-btn:hover { cursor: not-allowed; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up.f-btn-primary.f-disabled-droppop-btn i { color: #999ea1; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-up .f-chips-count { background: #2ecc71; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-vote-btn.f-disabled-droppop-btn { background: #f5f5f6; border: none; color: #999ea1; }

.f-chips-vote-wrapper .f-chips-vote-btn.f-chips-vote-btn.f-disabled-droppop-btn:hover { cursor: not-allowed; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container { color: #444647; font-family: 'Lato', 'Open Sans', arial, sans serif; left: 0; padding: 16px 16px 8px; right: auto; top: calc(100% + 4px); z-index: 110; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-top { text-align: center; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-top p { margin-bottom: 8px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-top button { font-size: 14px; margin: 0; padding: 0; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container hr { margin-bottom: 8px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom p { font-weight: bold; margin-bottom: 8px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom input { width: 196px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom input.f-error-chips { border-color: #f00; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom .f-chips-action-btns { align-items: center; display: flex; justify-content: space-between; margin-top: 8px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom button { align-items: center; display: flex; font-size: 14px; margin-left: 0; padding: 0 8px; }

.f-chips-vote-wrapper .fractal-dropdownPopout-popout-container .f-chip-bottom .f-btn-return { font-size: 14px; margin: 0; padding-right: 0; }

.f-investment-modal-container .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; }

.f-investment-modal-container .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { display: none; }

.f-investment-modal-container.editing .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { display: flex; }

.f-chips-disabled input, .f-chips-disabled .fractal-dropdownPopout-popout-container > button, .f-chips-disabled .fractal-dropdownPopout-popout-container { cursor: not-allowed; }

.webstorm-level .f-chips-vote-wrapper .f-chips-vote-btn.fractal-drop-open, .webstorm-level .f-chips-vote-wrapper .f-chips-vote-btn.fractal-drop-open:hover { background: #999ea1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-votes .f-card-voting-wrapper { background: transparent; height: 32px; padding-left: 0; position: inherit; }

.f-idea-page-main .f-idea-votes .f-card-voting-wrapper .f-view-idea-up-vote { align-self: inherit; }

.f-idea-page-main .f-idea-votes .f-vote-arrow-container { align-items: center; }

.f-idea-page-main .f-idea-votes .f-vote-count { color: #797d7f; }

.f-idea-page-main .f-modern-large .f-card-voting-wrapper { height: 40px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-image-container { margin-right: 24px; position: relative; }

@media (max-width: 1023px) { .f-idea-page-main .f-idea-image-container { margin-right: 0; } }

.f-idea-page-main .f-idea-image-container .f-image-overlay { align-items: center; background: rgba(0, 0, 0, 0.6); display: flex; height: 100%; justify-content: center; position: absolute; width: 100%; z-index: 5; }

.f-idea-page-main .f-idea-image-container .f-image-overlay .fa-spinner { color: #fff; }

.f-idea-page-main .f-idea-image-container .f-idea-image { background-position: center center; background-size: cover; border-radius: 4px; cursor: pointer; height: 125px; width: 125px; }

.f-idea-page-main .f-idea-image-container .f-idea-image::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 12.78%, rgba(0, 0, 0, 0) 12.79%, rgba(0, 0, 0, 0) 86.29%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 12.78%, rgba(0, 0, 0, 0) 12.79%, rgba(0, 0, 0, 0) 86.29%, rgba(0, 0, 0, 0.1) 100%); border-radius: 4px; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

@media (max-width: 1023px) { .f-idea-page-main .f-idea-image-container .f-idea-image, .f-idea-page-main .f-idea-image-container .f-idea-image img { border-radius: 0; height: 266px; object-fit: cover; width: 100%; } }

.f-idea-page-main .f-idea-image-container .f-image-large { height: 332px; object-fit: cover; width: 100%; }

.f-idea-page-main .f-idea-image-container.f-with-votes { position: relative; }

.f-idea-page-main .f-idea-image-container.f-with-votes .f-idea-votes { left: -20px; position: absolute; top: 55px; }

@media (max-width: 1023px) { .f-idea-page-main .f-idea-image-container { margin-bottom: 24px; } }

.f-idea-page-main .f-idea-header-large .f-idea-image-container { margin-right: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-jira-widget .f-jira-linked-issues { margin-bottom: 8px; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue-list { max-height: 245px; overflow: auto; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue-list .f-jira-linked-issue-link:first-of-type { margin-top: 0; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue { align-items: center; justify-content: space-between; margin-top: 8px; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue:first-of-type { margin-top: 0; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue .f-jira-img-name { overflow: hidden; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue .f-jira-linked-issue-link { font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-jira-widget .f-jira-linked-issues .f-jira-linked-issue .f-status-indicator { font-size: 12px; }

.f-jira-widget .f-jira-header { display: none; }

.f-jira-widget .f-jira-icon { height: 14px; margin-right: 4px; width: 14px; }

.f-jira-widget .f-jira-action-btns button i { margin-right: 4px; }

.f-jira-widget .f-jira-issues p { margin-bottom: 12px; }

.f-jira-widget .f-jira-issues p:last-of-type { margin-bottom: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-score-footer { align-items: center; display: flex; justify-content: space-between; width: 100%; }

.f-idea-score-footer.f-draft-footer { justify-content: flex-end; }

.f-idea-score-footer .fa-trash-o { font-size: 16px; }

.f-idea-score-footer .fa-trash-o:hover { color: #f00; }

.f-idea-score-footer .f-idea-draft-delete span { display: block; padding: 10px; }

.f-idea-score-footer .f-idea-score-scores { display: flex; }

.f-idea-score-footer .f-idea-score-footer-item .f-idea-score-footer-text { font-weight: 400; margin-left: 5px; }

.f-idea-score-footer .f-idea-score-footer-item:first-child { margin-right: 10px; }

.f-idea-score-footer .f-idea-score-favorite { font-size: 17px; }

.f-idea-score-footer .f-idea-score-favorite.f-is-favorite { color: #f1c40f; }

.f-idea-score-footer .f-idea-score-favorite:not(.f-is-favorite):hover { color: #999ea1; }

.f-idea-score-footer .f-idea-score-favorite:hover { cursor: pointer; cursor: hand; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipelineViewRollover { background: #fff; border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); box-sizing: border-box; color: #444647; font-size: 14px; line-height: 20px; padding: 16px; position: absolute; transition: opacity 0.5s ease-in-out; width: 300px; z-index: 2147483601; }

.fractal-pipelineViewRollover .rollover-arrow { height: 32px; left: -7px; overflow: hidden; position: absolute; top: calc(50% - 16px); /* 50% minus half of the height of the arrow */ transform: translateX(-50%); width: 15px; }

.fractal-pipelineViewRollover .rollover-arrow::after { background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); content: ''; height: 15px; left: 100%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 15px; }

.fractal-pipelineViewRollover.f-top .rollover-arrow { height: 16px; left: 50%; top: 100%; width: 32px; }

.fractal-pipelineViewRollover.f-top .rollover-arrow::after { height: 16px; left: 50%; top: 0; width: 16px; }

.fractal-pipelineViewRollover.f-left .rollover-arrow { left: 307px; }

.fractal-pipelineViewRollover.f-left .rollover-arrow::after { left: 0; }

.fractal-pipelineViewRollover .ideaboard-card-custom-label { margin-bottom: 12px; }

.fractal-pipelineViewRollover .ideaboard-card-custom-label span { background-color: #e7e7e7; color: #888; padding: 2px 5px; }

.fractal-pipelineViewRollover .idea-title { color: #3498db; display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-member { align-items: center; display: flex; margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-member .member-image-v1 { margin-right: 6px; }

.fractal-pipelineViewRollover .idea-member .member-description a { color: #3498db; font-weight: normal; }

.fractal-pipelineViewRollover .f-card-member-team-icon .member-image-v1 .member-initial { align-items: center; background-color: #3498db; display: flex; justify-content: center; }

.fractal-pipelineViewRollover .idea-creation, .fractal-pipelineViewRollover .idea-category, .fractal-pipelineViewRollover .idea-description { margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-creation a, .fractal-pipelineViewRollover .idea-category a, .fractal-pipelineViewRollover .idea-description a { color: #3498db; font-weight: normal; }

.fractal-pipelineViewRollover .idea-status { margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-status span:not(.idea-tool-title) { border-radius: 4px; font-size: 12px; font-weight: 600; padding: 2px 4px; text-transform: uppercase; }

.fractal-pipelineViewRollover .idea-workspace { color: #3498db; display: block; font-weight: normal; margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-campaign { margin-bottom: 8px; }

.fractal-pipelineViewRollover .idea-campaign a { color: #3498db; font-weight: 400; }

.fractal-pipelineViewRollover .idea-tool-title { font-weight: 600; margin-right: 2px; }

.fractal-pipelineViewRollover .f-idea-score-footer { color: #797d7f; justify-content: space-between; }

.fractal-pipelineViewRollover .f-idea-score-footer .f-idea-score-footer-item:first-child { margin-right: 8px; }

.fractal-pipelineViewRollover .f-idea-score-footer .f-idea-score-favorite { border: 1px solid #999ea1; border-radius: 4px; font-size: 14px; padding: 4px 8px; }

.fractal-pipelineViewRollover .f-idea-score-footer .f-idea-score-favorite[data-favorite='1'] { background: #f1c40f; border-color: transparent; color: #fff; }

.fractal-pipelineViewRollover .idea-hidden { border: 1px solid #3498db; border-radius: 4px; margin-bottom: 16px; padding: 12px; }

.fractal-pipelineViewRollover .idea-hidden i { color: #3498db; margin-right: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-linked-ideas .f-linked-idea-list { display: flex; flex-direction: column; list-style: none; }

.f-linked-ideas .f-link-idea-btn { font-size: 14px; margin-left: 0; margin-top: 16px; padding: 0 8px; }

.f-linked-ideas .fa-link { margin-right: 8px; }

.f-linked-ideas .fractal-combobox { margin-top: 6px; }

.f-linked-ideas .f-combobox-dropdown-button { display: none; }

.f-linked-ideas .f-link-btns { display: flex; justify-content: flex-end; }

.f-linked-ideas .f-link-btns button { font-size: 14px; margin: 8px 0 0 8px; padding: 0 8px; }

.f-linked-ideas .f-link-btns .f-btn-primary { margin-right: 0; }

.f-linked-ideas .f-linked-idea { align-items: center; display: flex; justify-content: space-between; padding: 8px 8px 8px 0; position: relative; }

.f-linked-ideas .f-linked-idea .f-linked-title-wrapper { flex: 1; min-width: 0; }

.f-linked-ideas .f-linked-idea a { align-items: center; display: flex; flex: 1; font-weight: 700; min-width: 0; }

.f-linked-ideas .f-linked-idea .f-linked-status { align-items: center; border: 1px solid; border-radius: 4px; display: flex; flex-direction: row; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 20px; margin-left: 5px; padding: 0 4px; text-transform: uppercase; }

.f-linked-ideas .f-linked-idea .f-linked-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-linked-ideas .f-linked-idea > img { border-radius: 4px; height: 24px; margin-right: 9px; /* fixes IE11 issue */ min-width: 24px; width: 24px; }

.f-linked-ideas .f-linked-idea > img::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.f-linked-ideas .f-linked-idea > i.fa-unlink { align-items: center; background-color: #c4c4c4; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; display: flex; height: 24px; justify-content: center; margin-right: 9px; min-width: 24px; width: 24px; }

.f-linked-ideas .f-linked-idea > i.fa-unlink:hover { cursor: pointer; }

.f-linked-ideas .f-no-links { align-items: flex-start; display: flex; flex-direction: column; }

.f-linked-ideas .f-no-links.f-links-editing { align-items: normal; }

.f-no-ideas .f-no-link-title { color: #999ea1; }

.f-link-idea-option { align-items: center; display: flex; width: 100%; }

.f-link-idea-option img { border-radius: 4px; height: 24px; margin-right: 4px; width: 24px; }

.f-link-idea-option span { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-unlink .f-modal-design-titleHeaderSubmitFooter-v1 { height: 160px; }

.fractal-widget-unlink .f-modal-body { align-items: center; display: flex; font-size: 14px; justify-content: center; padding: 0 16px; }

@media (max-width: 1023px) { .fractal-pipelineViewRollover { display: none; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-content { position: relative; }

.f-idea-page-content.f-parent-merge, .f-idea-page-content.f-child-merge { margin-top: 74px; }

.f-idea-page-content .f-merged-tabs { display: flex; left: 0; position: absolute; top: -40px; }

.f-idea-page-content .f-merge-tab { background: #e7e9eb; border-radius: 4px 4px 0 0; color: #444647; display: flex; font-size: 14px; margin-right: 4px; padding: 8px 12px; }

.f-idea-page-content .f-merge-tab > div { align-items: center; display: flex; justify-content: center; }

.f-idea-page-content .f-merge-tab i { align-items: center; background-color: #c4c4c4; border-radius: 4px; display: flex; height: 24px; justify-content: center; padding: 6px; width: 24px; }

.f-idea-page-content .f-merge-tab:hover, .f-idea-page-content .f-merge-tab:focus { text-decoration: none; }

.f-idea-page-content .f-active-merge-tab { background-color: #fff; }

.f-idea-page-content .f-merge-title { margin-left: 8px; }

.fractal-idea-page .f-idea-page-main .f-idea-page-wrapper { border-radius: 0 4px 4px; }

.f-idea-modal .f-idea-modal-container { background-color: #f5f5f6; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-member-typeahead { max-width: 100%; }

.f-edit-member-typeahead .f-member-typeahead { max-width: 100%; }

.f-edit-member-typeahead .f-member-typeahead .react-tags { border: none; padding-left: 0; }

.f-edit-member-typeahead .f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper { border: none; margin-right: 0; }

.f-edit-member-typeahead .f-member-typeahead .react-tags .react-tags__selected .member-image-v1 > img { height: 24px; width: 24px; }

.f-edit-member-typeahead .f-member-typeahead .react-tags .react-tags__selected .f-tag-remove { display: none; }

.f-edit-member-typeahead .f-member-typeahead .react-tags .react-tags__selected span { font-size: 14px; }

.f-edit-member-typeahead .f-member-typeahead .react-tags .react-tags__search input { font-size: 14px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-member-wrapper { align-items: center; display: flex; padding: 0; }

.f-member-wrapper .member-image-v1 { align-items: center; display: inline-flex; margin-left: 0; }

.f-member-wrapper .member-image-v1 > span { display: inline-block; margin-left: 8px; }

.f-member-wrapper .member-image-v1::after { display: none; }

.f-member-wrapper .f-member-name { display: inline-block; font-size: 14px; line-height: 14px; margin-left: 4px; }

.f-member-wrapper .f-member-anonymous .f-member-name { margin-left: 0; }

.f-member-wrapper .f-member-name-unassigned { color: #999ea1; cursor: unset; }

.f-member-wrapper .member-image-v1 .member-initial, .f-member-wrapper .member-img { height: 24px; width: 24px; }

.f-member-wrapper .member-image-v1 .member-initial span, .f-member-wrapper .member-img span { margin-left: 0; }

.f-member-icon { color: #fff; font-size: 17px; }

.f-member-icon::after { border-color: rgba(0, 0, 0, 0.1); border-radius: 50%; border-width: 1px; height: 32px; left: 0; position: absolute; top: 0; width: 32px; }

.f-member-icon-wrapper { align-items: center; border-radius: 50%; display: flex; height: 24px; justify-content: center; margin-right: 8px; width: 24px; }

.f-member-icon-wrapper .f-member-icon { font-size: 12px; }

.f-member-icon-wrapper-anonymous { background-color: #95a5a6; }

.f-idea-header-large .f-idea-team-wrapper .f-member-anonymous, .f-idea-header-large .f-idea-team-wrapper .f-member-name, .f-idea-header-large .f-idea-team-wrapper .f-member-name > a, .f-idea-header-large .f-member-wrapper .f-member-anonymous, .f-idea-header-large .f-member-wrapper .f-member-name, .f-idea-header-large .f-member-wrapper .f-member-name > a { font-size: 18px; line-height: 18px; }

.f-idea-header-large .f-idea-team-wrapper .f-member-icon-wrapper, .f-idea-header-large .f-idea-team-wrapper .member-image-v1 .member-initial, .f-idea-header-large .f-idea-team-wrapper .member-img, .f-idea-header-large .f-member-wrapper .f-member-icon-wrapper, .f-idea-header-large .f-member-wrapper .member-image-v1 .member-initial, .f-idea-header-large .f-member-wrapper .member-img { height: 32px; width: 32px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-owner .f-hover-owner { align-items: center; border-radius: 4px; display: flex; height: 40px; justify-content: space-between; margin-left: -8px; padding: 8px; width: calc(100% + 8px); }

.f-idea-owner .f-hover-owner:not(.f-edit-owner):hover { background: #e7e9eb; cursor: pointer; }

.f-idea-owner .f-hover-owner:not(.f-edit-owner):hover .fa-pencil { align-items: center; display: flex; height: 24px; justify-content: center; width: 24px; }

.f-idea-owner .f-edit-owner { border: 1px solid #2ecc71; min-width: 100%; }

.f-idea-owner .f-edit-owner .f-tag-wrapper > span { background: #accef7; }

.f-idea-owner .f-edit-owner-typeahead { max-width: 100%; width: 100%; }

.f-idea-owner .f-edit-owner-typeahead .fractal-spinner-outer { display: none; }

.f-idea-owner .f-edit-owner-typeahead .f-member-typeahead { max-width: 100%; position: relative; width: 100%; }

.f-idea-owner .f-edit-owner-typeahead .f-member-typeahead .react-tags .react-tags__selected .f-tag-remove { background: #999ea1; color: #fff; display: flex; height: 20px; position: absolute; right: 0; width: 20px; }

.f-idea-owner .f-edit-owner-typeahead .f-member-typeahead .react-tags .react-tags__selected .f-tag-remove .fa-times { font-weight: 600; }

.f-idea-owner .f-edit-owner-typeahead .f-member-typeahead .react-tags__search .f-suggestion-wrapper img.member-img { height: 24px; width: 24px; }

.f-idea-owner .f-edit-owner-typeahead .f-no-text .react-tags__search::after { color: #999ea1; content: 'Search users'; font-size: 14px; position: absolute; }

.f-idea-owner .f-edit-owner-typeahead .react-tags { border: none; padding-left: 0; }

.f-idea-owner .f-edit-owner-typeahead .f-char { font-size: 12px; height: 24px; width: 24px; }

.f-idea-owner .f-edit-owner-typeahead .react-tags .react-tags__selected .f-tag-wrapper { padding-left: 0; }

.f-idea-owner .f-edit-owner-typeahead .react-tags .react-tags__selected .f-tag-wrapper span { font-size: 14px; }

.f-idea-owner .fa-pencil { color: #3498db; display: none; }

.f-idea-row .f-edit-member-typeahead.f-edit-owner-typeahead .react-tags .react-tags__suggestions { left: -8px; top: calc(100% + 0.5em); width: calc(100% + 1.5em); }

.f-idea-row .f-edit-member-typeahead.f-edit-owner-typeahead .react-tags .member-initial { height: 24px; width: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-progress-container { display: flex; flex-direction: column; width: 100%; }

.f-progress-container .f-progress-bar { background-color: #c4c4c4; border-radius: 4px; display: flex; height: 8px; justify-content: space-evenly; margin-bottom: 8px; }

.f-progress-container span:first-of-type { margin-bottom: 8px; }

.f-progress-container [class^='f-stage'] { border-right: 1px solid #fff; width: 100%; }

.f-progress-container [class^='f-stage']:first-of-type { border-bottom-left-radius: 4px; border-top-left-radius: 4px; }

.f-progress-container [class^='f-stage']:last-of-type { border: none; border-bottom-right-radius: 4px; border-top-right-radius: 4px; }

.f-progress-container .f-active-stages { background-color: #1abc9c; }

.f-empty-progress { color: #999ea1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-project-room-widget .f-no-rooms { color: #999ea1; margin-bottom: 16px; }

.f-project-room-widget .f-send-to-pr-btn { margin: 8px 0 0; }

.f-project-room-widget .f-project-room { align-items: center; display: flex; margin-bottom: 16px; }

.f-project-room-widget .f-project-room a { align-items: center; display: flex; width: 100%; }

.f-project-room-widget .f-project-room .f-project-room-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-project-room-widget .f-project-room .f-project-room-icon { align-items: center; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; display: flex; height: 24px; justify-content: center; margin-right: 8px; min-width: 24px; }

.f-project-room-widget .f-project-room .f-project-room-icon:hover { cursor: pointer; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-questions { display: flex; flex-direction: column; }

.f-idea-page-main .f-idea-questions .f-dropdown-btn.f-dropdown-open:focus { background: #fff; border-color: #2ecc71; color: inherit; }

.f-idea-page-main .f-idea-questions .f-question { align-items: center; display: flex; flex-direction: row; justify-content: space-between; }

.f-idea-page-main .f-idea-questions .f-add-attachments { padding-bottom: 8px; }

.f-idea-page-main .f-idea-questions .f-add-attachments .f-upload-link-label { font-size: 14px; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title { align-items: center; background: #fff; border: none; border-radius: 4px; color: #797d7f; display: flex; font-family: 'Open Sans'; font-size: 14px; font-weight: 500; height: 24px; margin: 0 8px; outline: none; padding: 0 8px; position: relative; text-align: center; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title:hover { background: #e7e9eb; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title:focus, .f-idea-page-main .f-idea-questions .f-add-attchment-title:active { color: #fff; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title:focus { background: #bdc3c7; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title:focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title:active { background: #999ea1; box-shadow: none; }

.f-idea-page-main .f-idea-questions .f-add-attchment-title i { margin-right: 8px; }

.f-idea-page-main .f-idea-questions .f-dev-file { align-items: center; border-radius: 4px; display: flex; justify-content: space-between; margin-left: -8px; padding: 10px 8px; }

.f-idea-page-main .f-idea-questions .f-dev-file.f-hover-answer { border: 0; cursor: default; }

.f-idea-page-main .f-idea-questions .f-dev-file .fa-trash { color: #e74c3c; cursor: pointer; }

.f-idea-page-main .f-idea-questions .f-question-wrapper { margin-bottom: 24px; }

.f-idea-page-main .f-idea-questions .f-question-wrapper:last-child { margin-bottom: 0; }

.f-idea-page-main .f-idea-questions .f-admin-question { color: #f1c40f; font-weight: normal; }

.f-idea-page-main .f-idea-questions .f-dev-question { color: #2ecc71; font-weight: normal; }

.f-idea-page-main .f-idea-questions .f-question-asterisk { color: #e74c3c; }

.f-idea-page-main .f-idea-questions .f-no-answer { color: #999ea1; }

.f-idea-page-main .f-idea-questions .f-answer-error { border: 1px solid #e74c3c; }

.f-idea-page-main .f-idea-questions .fa-info-circle { font-size: 16px; margin-left: 4px; }

.f-idea-page-main .f-idea-questions .fa-info-circle:hover { cursor: pointer; }

.f-idea-page-main .f-idea-questions #f-idea-questions-tooltip { max-width: 480px; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview { align-items: center; border: 1px solid transparent; border-radius: 4px; display: flex; justify-content: space-between; margin-left: -8px; padding: 10px 0; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview > div { overflow-wrap: break-word; padding-right: 26px; width: 100%; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview:hover > div { padding-right: 0; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview > * { font-size: inherit; padding-left: 8px; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview p { padding: 5px 0 10px; white-space: pre-wrap; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview p:last-child { padding: 0; }

.f-idea-page-main .f-idea-questions .fractal-htmlpreview ul, .f-idea-page-main .f-idea-questions .fractal-htmlpreview ol { margin-bottom: 16px; margin-left: 30px; padding-left: 2em; }

.f-idea-page-main .f-idea-questions .f-edit-radio { align-items: center; display: flex; justify-content: center; }

.f-idea-page-main .f-idea-questions .f-hover-answer { background: #e7e9eb; border: 1px solid #e7e9eb; cursor: pointer; }

.f-idea-page-main .f-idea-questions .f-checkbox-no-edit .f-checkbox-selected-view { margin-bottom: 8px; }

.f-idea-page-main .f-idea-questions .f-checkbox-no-edit span { color: #999ea1; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-edit-checkbox { align-items: center; display: flex; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-init-selected { background: transparent; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-init-selected::after { content: ''; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-selected-option { background: #e7e9eb; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox i.fa-check { margin-right: -2px; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-checkbox-wrapper { margin: 0 0 -2px; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-checkbox-tooltip { display: block; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open > div { display: flex; max-width: 97%; overflow: auto; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-selected-check-ans { align-items: center; background: #d5d9db; border-radius: 12px; display: flex; height: 24px; margin-bottom: 0; margin-right: 8px; padding: 1px 8px; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-active-selection .f-selected-check-ans { background: #bdc3c7; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-selected-check-ans span { max-width: 200px; overflow: hidden; padding-left: 0; text-overflow: ellipsis; white-space: nowrap; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-remove-check { background: transparent; border-radius: 100%; color: #444647; display: flex; height: auto; margin-left: 0; margin-right: -8px; opacity: 1; padding: 4px 8px; width: auto; z-index: 0; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-remove-check:hover { background: rgba(0, 0, 0, 0.1); }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-dropdown-btn.f-dropdown-open .f-remove-check i { margin-left: 0; margin-top: 2px; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-question-drop:not(.f-dropdown-open) .f-selected-check-ans:first-of-type { margin-top: 8px; }

.f-idea-page-main .f-idea-questions .f-drop-checkbox .f-selected-check-ans { color: #444647; margin-bottom: 8px; }

.f-idea-page-main .f-idea-questions .f-checkbox-tooltip { display: none; max-width: 300px; padding: 8px; }

.f-idea-page-main .f-idea-questions .f-dropdown-btn .f-remove-check { display: none; }

.f-idea-page-main .f-idea-questions .fa-pencil { color: #3498db; font-size: 14px; margin-right: 8px; }

.f-idea-page-main .f-idea-questions .f-edit-textarea-wrapper { margin-left: -8px; }

.f-idea-page-main .f-idea-questions .f-edit-textarea-btns { left: 0; }

.f-idea-page-main .f-idea-questions .f-no-dev-attach { color: #999ea1; padding: 10px 0; }

.f-idea-page-main .f-idea-questions .f-dev-file-type { background: #ccc; border-radius: 4px; color: #fff; font-size: 12px; margin-right: 8px; padding: 2px 4px; text-transform: uppercase; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-subscribe-idea-button .subscribe-container { position: relative; }

.fractal-subscribe-idea-button .subscribe-button-container { display: flex; }

.fractal-subscribe-idea-button .subscribe-button-container .subscribe-button-side::before { font-size: 16px; padding: 0; }

.fractal-subscribe-idea-button .subscribe-button { background: rgba(0, 0, 0, 0.6); border: 0; border-radius: 14px; color: #fff; cursor: pointer; font-size: 12px; height: 32px; margin: 0; padding: 0 10px; width: auto; }

.fractal-subscribe-idea-button .subscribe-others-dropdown { background-color: #fff; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); font-family: Lato, 'Open Sans', arial, sans serif; margin-top: 5px; padding: 15px; position: absolute; right: 0; width: 221px; z-index: 99; }

.fractal-subscribe-idea-button .subscribe-others-dropdown i.fa-times { cursor: pointer; position: absolute; right: 16px; }

.fractal-subscribe-idea-button .subscribe-others-dropdown .fractal-member-typeahead { margin-top: 15px; position: relative; }

.fractal-subscribe-idea-button .subscribe-others-dropdown .fractal-member-typeahead:not(.fractal-input-typed)::before { color: #444647; content: '\f002'; font-family: 'Font Awesome 5 Pro'; left: 8px; position: absolute; top: 8px; z-index: 1; }

.fractal-subscribe-idea-button .subscribe-others-dropdown .fractal-member-typeahead input[value=''] { text-indent: 20px; }

.fractal-subscribe-idea-button .subscribe-others-dropdown .fractal-member-typeahead input::placeholder { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; position: relative; top: 2px; }

.fractal-subscribe-idea-button .subscribe-others-dropdown .subscribe-others-title { font-weight: 600; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv { padding: 8px 16px; z-index: 102; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribe-btn-adv { border-radius: 0; color: #444647; font-size: 14px; left: -16px; margin: 0 0 8px; position: relative; text-align: left; width: calc(100% + 32px); }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribe-btn-adv i { margin-right: 4px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .member-img, .fractal-subscribe-idea-button .f-subscribe-drop-adv .member-initial { height: 24px; width: 24px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead { margin-top: 8px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead .react-autosuggest__suggestions-container--open { border-radius: 4px; font-size: 14px; font-weight: 400; margin-top: 4px; padding: 8px 0; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead .member-img, .fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead .member-initial { height: 24px; width: 24px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead:not(.fractal-input-typed)::before { display: none; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead input { border-color: #1abc9c; padding: 8px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead input::placeholder { font-weight: 400; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .fractal-member-typeahead input[value=''] { text-indent: 0; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list { border-bottom: 1px solid #d5d9db; border-top: 1px solid #d5d9db; left: -16px; max-height: 195px; overflow: auto; padding: 0 16px; position: relative; width: calc(100% + 32px); }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list.f-empty-list { align-items: center; color: #999ea1; display: flex; justify-content: center; min-height: 70px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list + .f-subscribe-btn-adv { margin-bottom: 0; margin-top: 8px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list h3 { color: #797d7f; margin: 8px 0; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list ul { list-style: none; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list li { align-items: center; display: flex; flex-direction: row; margin-bottom: 8px; position: relative; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list li .f-subscriber-name { flex: 1; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list li i { color: #797d7f; padding: 5px 8px; right: -8px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list li i:hover { background: #e7e9eb; border-radius: 4px; }

.fractal-subscribe-idea-button .f-subscribe-drop-adv .f-subscribed-list .f-member-image { margin-right: 4px; }

.fractal-subscribe-idea-button .subscribe-button-main { background-color: #fff; border: #bdc3c7 1px solid; color: #797d7f; min-width: 30px; padding: 0 15px; }

.fractal-subscribe-idea-button .subscribe-button-main:hover { background-color: #e7e9eb; border-color: #bdc3c7; }

.fractal-subscribe-idea-button .subscribe-button-main:active { background-color: #999ea1; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main:focus { background-color: #bdc3c7; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main:focus:active { background-color: #999ea1; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribed { background-color: #d6eaf8; border-color: #3498db; color: #3498db; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribed:hover { background-color: #3498db; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribed:active { background-color: #22628c; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribed .spinner-inner i.fa-spinner { color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main .spinner-inner i.fa-spinner { color: #797d7f; font-size: 14px; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button { border-color: #bdc3c7; border-radius: 14px 0 0 14px; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button.subscribed { border-color: #3498db; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button:not(.subscribed):hover { background-color: #e7e9eb; border-color: #bdc3c7; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button:not(.subscribed):active { background-color: #999ea1; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button:not(.subscribed):focus { background-color: #bdc3c7; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button:not(.subscribed):focus:active { background-color: #999ea1; }

.fractal-subscribe-idea-button .subscribe-button-side { background-color: #fff; border: #bdc3c7 1px solid; border-left: none; border-radius: 0 14px 14px 0; color: #797d7f; }

.fractal-subscribe-idea-button .subscribe-button-side.subscribed { background-color: #d6eaf8; border-color: #3498db; color: #3498db; }

.fractal-subscribe-idea-button .subscribe-button-side.subscribed:hover { background-color: #3498db; border-color: #3498db; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side.subscribed:active { background-color: #22628c; border-color: #22628c; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side.subscribed.subscribe-others-open { background-color: #22628c; border-color: #22628c; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):hover { background-color: #e7e9eb; border-color: #bdc3c7; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):active { background-color: #999ea1; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):focus { background-color: #bdc3c7; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):focus:active { background-color: #999ea1; }

.fractal-subscribe-idea-button .subscribe-button-side.subscribe-others-open { background-color: #797d7f; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content { height: 60%; max-width: 700px; width: 100%; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-footer { height: auto; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-gig-app-decide-modal { padding: 25px; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-gig-app-decide-modal .f-gig-app-decide-modal-instruction-text { color: #000; line-height: 16px; margin: 0 0 25px; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-gig-app-decide-modal .f-gig-app-decide-modal-contact-msg-wrapper { margin-top: 10px; width: 100%; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-gig-app-decide-modal .f-gig-app-decide-modal-contact-msg-wrapper label { color: #000; float: none; }

.ReactModalPortal.f-modal-gig-applicants-portal .ReactModal__Content .f-gig-app-decide-modal .f-gig-app-decide-modal-contact-msg-wrapper textarea { margin-top: 15px; min-height: 124px; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-gigApplicants { background: #fff; min-height: 500px; padding: 15px; }

.fractal-widget-gigApplicants.f-gig-applicants-vI3 { padding: 0; }

.fractal-widget-gigApplicants .f-gig-app-tab-no-applicants { color: #444647; font-size: 26px; margin: 225px auto; text-align: center; width: 200px; }

.fractal-widget-gigApplicants .f-gig-no-applicants-vi3 { color: #797d7f; font-family: Lato, arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0.28px; line-height: 24px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item { border: solid 1px #bdc3c7; border-bottom: none; padding: 15px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item:last-of-type { border-bottom: solid 1px #bdc3c7; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-clearfix { clear: both; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-user-info { display: inline-block; font-size: 12px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-user-info img { vertical-align: text-top; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-user-info .f-gig-app-tab-applicant-user-name { display: inline-block; font-weight: bold; margin-left: 8px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision { color: #d5d9db; float: right; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-accept, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-decline { cursor: pointer; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-accept:hover, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-decline:hover { text-decoration: underline; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-accept { margin-right: 13px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-decline { margin-left: 13px; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-accepted { color: #2ecc71; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-make-decision .f-gig-app-tab-applicant-disabled-declined { color: #797d7f; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-private-message-btn-open-modal, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-private-messages-btn-link { cursor: pointer; float: right; }

.fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-date-submitted, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-email, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-expertise, .fractal-widget-gigApplicants .f-gig-app-tab-applicant-item .f-gig-app-tab-applicant-message { color: #444647; display: block; margin: 8px 0 13px; white-space: break-spaces; }

.fractal-widget-gigApplicants .f-gig-applicants-item { background-image: linear-gradient(to right, #bdc3c7 33%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-repeat: repeat-x; background-size: 12px 1px; padding: 16px 0; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-header, .fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-row { display: flex; justify-content: space-between; margin-bottom: 12px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-user-info { display: inline-flex; flex-direction: column; margin-left: 8px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .member-image-v1 .member-initial { height: 40px; width: 40px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-user-name { color: #444647; font-size: 16px; font-weight: 700; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-email { font-size: 14px; font-weight: 400; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-decide-btn { display: inline-block; line-height: 20px; margin: 0; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-decide-btn + .f-gig-applicant-decide-btn { margin-left: 12px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-decide-btn:hover { text-decoration: none; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-decide-btn::before { content: '\f00d'; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-weight: 400; margin-right: 8px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-app-tab-applicant-accept::before { content: '\f00c'; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-expertise { color: #797d7f; font-size: 14px; }

.fractal-widget-gigApplicants .f-gig-applicants-item .f-gig-applicant-message { color: #444647; font-size: 14px; font-style: italic; line-height: 24px; }

@charset "UTF-8";
/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before { border-color: #ccc; border-style: solid; border-width: 3px 3px 0 0; content: ""; display: block; height: 9px; position: absolute; top: 6px; width: 9px; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { margin-left: -4px; position: absolute; width: 0; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { box-sizing: content-box; position: absolute; border: 8px solid transparent; height: 0; width: 1px; content: ""; z-index: -1; border-width: 8px; left: -8px; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle { top: 0; margin-top: -8px; }

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { border-top: none; border-bottom-color: #f0f0f0; }

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { top: 0; }

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { top: -1px; border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle { bottom: 0; margin-bottom: -8px; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after { border-bottom: none; border-top-color: #fff; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after { bottom: 0; }

.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before { bottom: -1px; border-top-color: #aeaeae; }

.react-datepicker-wrapper { display: inline-block; padding: 0; border: 0; }

.react-datepicker { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-size: 0.8rem; background-color: #fff; color: #000; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; }

.react-datepicker--time-only .react-datepicker__triangle { left: 35px; }

.react-datepicker--time-only .react-datepicker__time-container { border-left: 0; }

.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }

.react-datepicker__triangle { position: absolute; left: 50px; }

.react-datepicker-popper { z-index: 1; }

.react-datepicker-popper[data-placement^=bottom] { padding-top: 10px; }

.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle { left: auto; right: 50px; }

.react-datepicker-popper[data-placement^=top] { padding-bottom: 10px; }

.react-datepicker-popper[data-placement^=right] { padding-left: 8px; }

.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle { left: auto; right: 42px; }

.react-datepicker-popper[data-placement^=left] { padding-right: 8px; }

.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle { left: 42px; right: auto; }

.react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; padding: 8px 0; position: relative; }

.react-datepicker__header--time { padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }

.react-datepicker__header--time:not(.react-datepicker__header--time--only) { border-top-left-radius: 0; }

.react-datepicker__header:not(.react-datepicker__header--has-time-select) { border-top-right-radius: 0.3rem; }

.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll { display: inline-block; margin: 0 15px; }

.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { margin-top: 0; color: #000; font-weight: bold; font-size: 0.944rem; }

.react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.react-datepicker__navigation { align-items: center; background: none; display: flex; justify-content: center; text-align: center; cursor: pointer; position: absolute; top: 2px; padding: 0; border: none; z-index: 1; height: 32px; width: 32px; text-indent: -999em; overflow: hidden; }

.react-datepicker__navigation--previous { left: 2px; }

.react-datepicker__navigation--next { right: 2px; }

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { right: 85px; }

.react-datepicker__navigation--years { position: relative; top: 0; display: block; margin-left: auto; margin-right: auto; }

.react-datepicker__navigation--years-previous { top: 4px; }

.react-datepicker__navigation--years-upcoming { top: -4px; }

.react-datepicker__navigation:hover *::before { border-color: #a6a6a6; }

.react-datepicker__navigation-icon { position: relative; top: -1px; font-size: 20px; width: 0; }

.react-datepicker__navigation-icon--next { left: -2px; }

.react-datepicker__navigation-icon--next::before { transform: rotate(45deg); left: -7px; }

.react-datepicker__navigation-icon--previous { right: -2px; }

.react-datepicker__navigation-icon--previous::before { transform: rotate(225deg); right: -7px; }

.react-datepicker__month-container { float: left; }

.react-datepicker__year { margin: 0.4rem; text-align: center; }

.react-datepicker__year-wrapper { display: flex; flex-wrap: wrap; max-width: 180px; }

.react-datepicker__year .react-datepicker__year-text { display: inline-block; width: 4rem; margin: 2px; }

.react-datepicker__month { margin: 0.4rem; text-align: center; }

.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text { display: inline-block; width: 4rem; margin: 2px; }

.react-datepicker__input-time-container { clear: both; width: 100%; float: left; margin: 5px 0 10px 15px; text-align: left; }

.react-datepicker__input-time-container .react-datepicker-time__caption { display: inline-block; }

.react-datepicker__input-time-container .react-datepicker-time__input-container { display: inline-block; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input { display: inline-block; margin-left: 10px; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input { width: auto; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] { -moz-appearance: textfield; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter { margin-left: 5px; display: inline-block; }

.react-datepicker__time-container { float: right; border-left: 1px solid #aeaeae; width: 85px; }

.react-datepicker__time-container--with-today-button { display: inline; border: 1px solid #aeaeae; border-radius: 0.3rem; position: absolute; right: -87px; top: 0; }

.react-datepicker__time-container .react-datepicker__time { position: relative; background: white; border-bottom-right-radius: 0.3rem; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { width: 85px; overflow-x: hidden; margin: 0 auto; text-align: center; border-bottom-right-radius: 0.3rem; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { list-style: none; margin: 0; height: calc(195px + (1.7rem / 2)); overflow-y: scroll; padding-right: 0; padding-left: 0; width: 100%; box-sizing: content-box; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { height: 30px; padding: 5px 10px; white-space: nowrap; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { cursor: pointer; background-color: #f0f0f0; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: #216ba5; color: white; font-weight: bold; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { background-color: #216ba5; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { color: #ccc; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { cursor: default; background-color: transparent; }

.react-datepicker__week-number { color: #ccc; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; }

.react-datepicker__week-number.react-datepicker__week-number--clickable { cursor: pointer; }

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover { border-radius: 0.3rem; background-color: #f0f0f0; }

.react-datepicker__day-names, .react-datepicker__week { white-space: nowrap; }

.react-datepicker__day-names { margin-bottom: -8px; }

.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; }

.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text { cursor: pointer; }

.react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover { border-radius: 0.3rem; background-color: #f0f0f0; }

.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today { font-weight: bold; }

.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted { border-radius: 0.3rem; background-color: #3dcc4a; color: #fff; }

.react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover { background-color: #32be3f; }

.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 { color: magenta; }

.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 { color: green; }

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; }

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover { background-color: #1d5d90; }

.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { border-radius: 0.3rem; background-color: #bad9f1; color: black; }

.react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover { background-color: #1d5d90; }

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) { background-color: rgba(33, 107, 165, 0.5); }

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) { background-color: #f0f0f0; color: #000; }

.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled { cursor: default; color: #ccc; }

.react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover { background-color: transparent; }

.react-datepicker__input-container { position: relative; display: inline-block; width: 100%; }

.react-datepicker__input-container .react-datepicker__calendar-icon { position: absolute; padding: 0.5rem; }

.react-datepicker__view-calendar-icon input { padding: 6px 10px 5px 25px; }

.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { border: 1px solid transparent; border-radius: 0.3rem; position: relative; }

.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; }

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { border-top-color: #b3b3b3; }

.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { transform: rotate(135deg); right: -16px; top: 0; }

.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown { background-color: #f0f0f0; position: absolute; width: 50%; left: 25%; top: 30px; z-index: 1; text-align: center; border-radius: 0.3rem; border: 1px solid #aeaeae; }

.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover { cursor: pointer; }

.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable { height: 150px; overflow-y: scroll; }

.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { line-height: 20px; width: 100%; display: block; margin-left: auto; margin-right: auto; }

.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }

.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover { background-color: #ccc; }

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { border-bottom-color: #b3b3b3; }

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { border-top-color: #b3b3b3; }

.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { position: absolute; left: 15px; }

.react-datepicker__close-icon { cursor: pointer; background-color: transparent; border: 0; outline: 0; padding: 0 6px 0 0; position: absolute; top: 0; right: 0; height: 100%; display: table-cell; vertical-align: middle; }

.react-datepicker__close-icon::after { cursor: pointer; background-color: #216ba5; color: #fff; border-radius: 50%; height: 16px; width: 16px; padding: 2px; font-size: 12px; line-height: 1; text-align: center; display: table-cell; vertical-align: middle; content: "×"; }

.react-datepicker__today-button { background: #f0f0f0; border-top: 1px solid #aeaeae; cursor: pointer; text-align: center; font-weight: bold; padding: 5px 0; clear: left; }

.react-datepicker__portal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; justify-content: center; align-items: center; display: flex; z-index: 2147483647; }

.react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 3rem; line-height: 3rem; }

@media (max-width: 400px), (max-height: 550px) { .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 2rem; line-height: 2rem; } }

.react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header { font-size: 1.44rem; }

.react-datepicker__children-container { width: 13.8rem; margin: 0.4rem; padding-right: 0.2rem; padding-left: 0.2rem; height: auto; }

.react-datepicker__aria-live { position: absolute; clip-path: circle(0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; white-space: nowrap; }

.react-datepicker__calendar-icon { width: 1em; height: 1em; vertical-align: -0.125em; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-datepicker { clear: both; }

.fractal-datepicker div:first-of-type { display: inline-block; }

.fractal-datepicker input { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #444647; display: block; font-size: 14px; line-height: 1.42857; padding: 6px 12px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }

.fractal-datepicker input:focus { border-color: #1abc9c; box-shadow: none !important; }

.fractal-datepicker .f-date-error { border: 1px solid #e74c3c; outline: none; }

.fractal-datepicker label { float: left; font-weight: normal; margin: 8px 10px 0; }

.fractal-datepicker .react-datepicker__input-container { position: static; }

.fractal-datepicker .fa-calendar { font-size: 15px; margin-left: -40px; pointer-events: none; }

.react-datepicker__day--keyboard-selected, .react-datepicker__day--selected { background: #1abc9c !important; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-schedule-recurring-reportModal * { box-sizing: border-box; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body { font-size: 14px; line-height: 2.4rem; padding: 20px; width: 500px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body .f-greyed-out { background: #bdc3c7; color: #444647; cursor: not-allowed; opacity: 0.7; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body p { margin-bottom: 8px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body span.section-title { display: block; font-weight: bold; margin-top: 12px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.feature-row span:first-child { display: block; float: left; height: 40px; width: 100px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.feature-row span:first-child.included-data { float: left; height: 100%; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.feature-row span:nth-child(2) { display: block; height: 40px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.feature-row span:nth-child(2).included-data { float: left; height: auto; width: 360px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.feature-row.included-data { min-height: 20px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row { margin-top: 12px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row p { font-style: italic; margin-left: 100px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row span { display: block; float: left; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row span:first-child { width: 100px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row .margin_left_16px { margin-right: 16px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row .fractal-datepicker { clear: none; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row #repeat-type, .fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row #weekly-date-options, .fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row #monthly-date-options, .fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row #repeat-send-time { float: left; margin-right: 16px; }

.fractal-widget-schedule-recurring-reportModal #f-schedule-recurring-modal-body div.detail-row .clearfix { clear: both; }

.fractal-widget-schedule-recurring-reportModal.ReactModalPortal { z-index: 3000001; }

.ReactModal__Body--open .react-datepicker-popper { z-index: 3000000000001; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-widget-edit-date { display: flex; justify-content: space-between; margin-left: -8px; }

.f-widget-edit-date .fa-pencil { margin-top: 14px; }

.f-widget-edit-date .fa-pencil:hover { cursor: pointer; }

.f-widget-edit-date.f-no-date, .f-widget-edit-date input::placeholder { color: #999ea1; }

.f-widget-edit-date.f-hover-date { background: #e7e9eb; border-radius: 4px; }

.f-widget-edit-date.f-hover-date input { cursor: pointer; }

.f-widget-edit-date.f-editing-date { background: #fff; }

.f-widget-edit-date.f-editing-date input { border: 1px solid #2ecc71; }

.f-widget-edit-date.f-editing-date input::placeholder { color: #999ea1; }

.f-widget-edit-date.f-date-error input { border-color: #e74c3c; }

.f-widget-edit-date .fa-calendar { color: #444647; }

.f-widget-edit-date .fa-times-circle { font-size: 18px; margin-left: -27px; position: relative; top: 2px; }

.f-widget-edit-date .fa-times-circle:hover { cursor: pointer; }

.f-widget-edit-date div, .f-widget-edit-date input { width: 100%; }

.f-widget-edit-date input { background: transparent; border: 1px solid transparent; outline: none; padding: 10px 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-numbers { align-items: center; border-radius: 4px; display: flex; justify-content: space-between; margin-left: -8px; padding-left: 8px; position: relative; /* Fixes issue FF has with spinner buttons on number input */ }

.f-edit-numbers .fractal-htmlpreview { width: calc(100% - 16px); }

.f-edit-numbers input { border: none; margin-left: -8px; outline: none; padding: 12px 18px 12px 8px; width: calc(100% + 8px); }

@supports (-moz-appearance: none) { .f-edit-numbers input { padding: 12px 0 12px 8px; } }

.f-edit-numbers.f-hover-numbers { background: #e7e9eb; color: inherit; cursor: pointer; }

.f-edit-numbers.f-editing-numbers input[type='number']::-webkit-inner-spin-button, .f-edit-numbers.f-editing-numbers input[type='number']::-webkit-outer-spin-button { display: block; height: 40px; opacity: 1; position: absolute; right: 0; top: 0; }

.f-edit-numbers.f-editing-numbers input { background: #fff; border: 1px solid #2ecc71; border-radius: 4px; }

.f-edit-numbers.f-numbers-error input { border: 1px solid #e74c3c; }

.f-edit-numbers .f-clear-number { color: #999ea1; font-size: 18px; position: absolute; right: 28px; }

.f-edit-numbers .f-clear-number:hover { cursor: pointer; }

.f-edit-numbers .f-edit-number-btns { bottom: -40px; display: flex; left: 0; position: absolute; z-index: 1; }

.f-edit-numbers .f-edit-number-btns button { align-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: flex; height: 26px; justify-content: center; width: 34px; }

.f-edit-numbers .f-edit-number-btns .f-add-number-btn { margin-left: 0; margin-right: 4px; }

.f-edit-numbers .f-edit-number-btns .f-end-number-btn { margin-left: 0; }

.f-edit-numbers .f-edit-number-btns i { font-size: 14px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-users { align-items: center; border-radius: 4px; display: flex; justify-content: space-between; margin-left: -8px; min-height: 40px; padding: 8px 0 8px 8px; }

.f-edit-users .f-no-users { color: #999ea1; }

.f-edit-users.f-editing-users { border: 1px solid #2ecc71; padding: 0 8px; }

.f-edit-users.f-editing-users .f-edit-member-typeahead, .f-edit-users.f-editing-users .f-member-typeahead { width: 100%; }

.f-edit-users.f-editing-users .fractal-spinner-outer { display: none; }

.f-edit-users.f-editing-users .f-member-typeahead .react-tags .react-tags__selected .f-tag-remove { background: #999ea1; color: #fff; display: flex; height: 20px; position: absolute; right: 0; width: 20px; }

.f-edit-users.f-editing-users .f-member-typeahead .react-tags .react-tags__selected .f-tag-remove .fa-times { font-weight: 600; }

.f-edit-users.f-editing-users .react-tags__suggestions { left: -8px; top: calc(100% + 0.7em); width: calc(100% + 16px); }

.f-edit-users.f-editing-users .react-tags .react-tags__selected .f-tag-wrapper .member-initial { height: 24px; width: 24px; }

.f-edit-users.f-editing-users .react-tags .react-tags__selected .f-tag-wrapper { padding-left: 0; }

.f-edit-users.f-editing-users .react-tags .react-tags__selected .f-tag-wrapper:nth-of-type(n + 2) .member-image-v1 { margin-left: 4px; }

.f-edit-users.f-editing-users .react-tags .f-no-member .f-char { font-size: 12px; height: 24px; width: 24px; }

.f-edit-users .f-user-selected { align-items: center; color: #3498db; display: flex; margin-bottom: 8px; }

.f-edit-users .f-user-selected:last-of-type { margin-bottom: 0; }

.f-edit-users .f-member-image { margin-right: 8px; }

.f-edit-users.f-edit-users-hover { background: #e7e9eb; color: inherit; cursor: pointer; }

.f-edit-users.f-users-error { border: 1px solid #e74c3c; }

.f-editing-multi-users .fa-key { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-edit-textarea-wrapper { position: relative; width: 100%; }

.f-edit-textarea-wrapper .f-edit-textarea { background: transparent; border: 1px solid #2ecc71; border-radius: 4px; display: flex; font-family: Lato, 'Open Sans', arial, sans serif; padding: 10px 8px; position: relative; resize: none; transition: none; width: calc(100% + 8px); }

.f-edit-textarea-wrapper .f-edit-textarea:focus { border-color: #2ecc71; }

.f-edit-textarea-wrapper .f-edit-textarea:hover:not(.f-focus-edit-textarea) { background: #d5d9db; border: 1px solid #d5d9db; cursor: pointer; }

.f-edit-textarea-wrapper .f-edit-textarea.f-edit-textarea-disable { pointer-events: none; }

.f-edit-textarea-wrapper .f-focus-edit-textarea { outline: none; }

.f-edit-textarea-wrapper .f-focus-edit-textarea::placeholder { opacity: 0; }

.f-edit-textarea-wrapper .f-edit-textarea-btns { bottom: -40px; display: flex; left: -8px; position: absolute; z-index: 1; }

.f-edit-textarea-wrapper .f-edit-textarea-btns button { align-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: flex; height: 26px; justify-content: center; width: 34px; }

.f-edit-textarea-wrapper .f-edit-textarea-btns .f-add-textarea-btn { margin-left: 0; margin-right: 4px; }

.f-edit-textarea-wrapper .f-edit-textarea-btns .f-end-textarea-btn { margin-left: 0; }

.f-edit-textarea-wrapper .f-edit-textarea-btns i { font-size: 14px; }

.f-edit-textarea-wrapper .f-edit-textarea-btns.f-hide-btns { display: none; }

.f-escape-textarea { width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-member-details-modal { display: block; font-family: Lato, sans-serif; margin: 16px 16px 0; min-height: 368px; width: 368px; }

.f-member-details-modal * { font-family: Lato, sans-serif; }

.f-member-details-modal .f-member-detail-wrap { max-height: 310px; overflow: auto; }

.f-member-details-modal .f-tab-content { overflow: auto; }

.f-member-details-modal .member-image-v1 div.member-initial { height: 24px; width: 24px; }

.f-member-details-modal .f-tab-underline { font-size: 14px; }

.f-member-details-modal .f-member-modal-wrapper { display: block; margin-bottom: 16px; }

.f-member-details-modal .f-member-modal-reason { font-size: 14px; margin-top: 8px; }

.f-member-details-modal .f-member-modal-member { align-items: center; display: flex; flex-direction: row; }

.f-member-details-modal .member-image-v1 { margin-right: 4px; }

.f-member-details-modal .member-image-v1 .member-img { height: 24px; }

.f-member-details-modal .f-member-name { font-size: 14px; font-weight: normal; }

.f-member-details-modal .f-member-empty { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }

.f-member-details-modal .f-member-empty span { color: #797d7f; margin-top: -80px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-investor-modal { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; min-width: 390px; padding: 24px 32px 32px; }

.f-investor-modal .f-investor-headers { border-bottom: 1px solid #d5d9db; color: #444647; display: flex; justify-content: space-between; padding-bottom: 4px; }

.f-investor-modal .f-member-modal-wrapper { align-items: center; display: flex; flex-direction: row; justify-content: space-between; }

.f-investor-modal .f-member-modal-wrapper:first-of-type { margin-top: 18px; }

.f-investor-modal .f-member-modal-member { align-items: center; display: flex; margin-bottom: 12px; }

.f-investor-modal .f-member-modal-member .member-initial, .f-investor-modal .f-member-modal-member img { height: 24px; width: 24px; }

.f-investor-modal .f-member-modal-member a { font-weight: normal; }

.f-investor-modal .f-invest-edit-wrap { display: flex; justify-content: space-between; margin-bottom: 24px; }

.f-investor-modal .f-invest-edit-wrap .f-btn-link { height: auto; margin: 0; padding: 0; }

.f-investor-modal .f-investors-list { max-height: 190px; overflow: auto; }

.f-investor-modal .f-member-chips { color: #444647; font-weight: bold; margin-right: 8px; }

.f-investor-modal .f-my-investments { padding: 16px 0 16px 8px; }

.f-investor-modal .f-my-investment-img-wrap { align-items: center; display: flex; flex-basis: 91%; flex-shrink: 1; }

.f-investor-modal .f-my-investment-img-wrap a { max-width: 255px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-investor-modal .f-my-investment-item { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }

.f-investor-modal .f-my-investment-img { background-position: center; background-size: cover; border-radius: 4px; height: 24px; margin-right: 4px; width: 24px; }

.f-investor-modal .fractal-input { margin-left: 8px; }

.f-investor-modal .f-my-investment { background: #fff; border: none; border-radius: 4px; color: #444647; flex-shrink: 1; height: 32px; padding: 0; text-align: right; width: 45px; }

.f-investor-modal .f-my-investment.f-edit-my-investment { border: 1px solid #bdc3c7; }

.f-investor-modal .f-my-investment.f-invest-error { border: 1px solid #e74c3c; }

.f-investor-modal .f-remain-error { color: #e74c3c; }

.f-investment-modal-container.editing .f-investor-modal { padding: 24px 32px 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-stats { width: 100%; }

.f-idea-stats dl { display: flex; flex-flow: wrap; }

.f-idea-stats dd { text-align: right; width: 25%; }

.f-idea-stats dd.f-dd-flex { align-items: flex-end; display: flex; justify-content: flex-end; }

.f-idea-stats dt { width: 75%; }

.f-idea-stats .f-member-viewed-list { align-items: flex-end; display: flex; justify-content: flex-end; margin-right: 8px; }

.f-idea-stats .f-member-image-tiny { height: 22px; width: 22px; }

.f-idea-stats .f-member-image-tiny + .f-member-image-tiny { margin-left: -4px; }

.f-idea-stats .f-member-image-tiny .member-initial, .f-idea-stats .f-member-image-tiny .member-img { font-size: 10px; height: 22px; width: 22px; }

.f-idea-stats .f-member-image-tiny .member-image-v1 { background-color: #fff; border: 2px solid #fff; border-radius: 50%; }

.f-idea-stats .fractal-button.f-btn-link { margin: 0; padding: 0; text-align: right; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-status { border-radius: 4px; display: inline; padding: 0; width: 100%; }

.f-status .f-status-indicator { display: inline-block; line-height: 1.42876; }

.f-status .f-status-edit .f-status-indicator { background-color: #fff; }

.f-status .f-status-edit .f-dropdown-btn.f-dropdown-open:focus, .f-status .f-status-edit .f-dropdown-btn.f-dropdown-open:active { background: #fff; border-color: #2ecc71; color: inherit; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-submitter-heading { font-weight: bold; padding: 0 0 4px; }

.f-idea-page-main .f-submitter-header-wrapper { align-items: center; display: flex; flex-direction: row; padding: 4px 0; }

.f-idea-page-main .f-idea-team-wrapper { align-items: center; cursor: pointer; display: flex; font-size: 14px; }

.f-idea-page-main .f-idea-team-wrapper a { margin-left: 4px; }

.f-idea-page-main .f-idea-team-wrapper:hover { text-decoration: underline; }

.f-idea-page-main .f-team-icon-wrapper { background-color: #3498db; display: inline-flex; }

.f-idea-page-main .f-team-member-tooltip { padding: 8px 12px; }

.f-idea-page-main .f-team-member-tooltip .f-member-name { color: #fff; font-size: 12px; font-weight: 200; margin-left: 6px; }

.f-idea-page-main .f-team-member-tooltip .f-member-wrapper { margin-bottom: 8px; }

.f-idea-page-main .f-team-member-tooltip .f-member-wrapper:last-of-type { margin-bottom: 0; }

.f-idea-page-main .f-team-member-tooltip .f-member-wrapper span { font-size: 10px; }

.f-idea-page-main .f-team-member-tooltip .f-member-wrapper .member-initial span { margin-left: 0; }

.f-idea-page-main .f-team-member-tooltip .member-image-v1 .member-img, .f-idea-page-main .f-team-member-tooltip .member-image-v1 div.member-initial { height: 20px; width: 20px; }

.f-idea-page-main .f-idea-header-large .f-idea-team-wrapper { font-size: 18px; }

.f-idea-page-main .f-submitter { max-width: calc(100% + 8px); }

.f-idea-page-main .f-submitter .fa-pencil { color: #3498db; display: none; position: relative; right: 8px; }

.f-idea-page-main .f-idea-inner-row .f-submitter { align-items: center; border: 1px solid transparent; border-radius: 4px; box-sizing: content-box; display: flex; justify-content: space-between; margin-left: -8px; padding: 4px 0 4px 8px; }

.f-idea-page-main .f-idea-inner-row .f-edit-submitter { border: 1px solid #2ecc71; min-width: 100%; }

.f-idea-page-main .f-idea-inner-row .f-edit-submitter .f-tag-wrapper > span { background: #accef7; }

.f-idea-page-main .f-idea-inner-row .f-edit-submitter .react-tags .react-tags__selected .member-image-v1 > .member-initial { height: 24px; width: 24px; }

.f-idea-page-main .f-idea-inner-row .f-edit-submitter .react-tags .react-tags__suggestions { left: -10px; top: 3.7em; }

.f-idea-page-main .f-idea-inner-row .f-hover-submitter { width: calc(100% + 8px); }

.f-idea-page-main .f-idea-inner-row .f-hover-submitter:not(.f-edit-submitter):hover { background: #e7e9eb; cursor: pointer; }

.f-idea-page-main .f-idea-inner-row .f-hover-submitter:not(.f-edit-submitter):hover .fa-pencil { display: block; }

.f-idea-inner-row .f-edit-submitter-wrapper .react-tags .react-tags__selected .member-image-v1 > .member-initial { height: 32px; width: 32px; }

.f-idea-inner-row .f-edit-submitter-wrapper .react-tags .react-tags__selected .f-tag-wrapper > span { font-size: 18px; }

.f-idea-inner-row .f-edit-submitter-wrapper .react-tags .react-tags__search input { font-size: 18px; }

.f-idea-inner-row .f-edit-submitter-wrapper .react-tags .react-tags__suggestions { left: -8px; width: calc(100% + 1.8em); }

.f-idea-page-main .f-modern-large .f-edit-submitter-wrapper .f-member-typeahead .react-tags .react-tags__selected .member-image-v1 > img { height: 32px; width: 32px; }

.f-idea-modal .f-idea-inner-row .f-edit-submitter-wrapper .react-tags .react-tags__suggestions, .f-idea-modal .f-idea-row .f-edit-submitter-wrapper .react-tags .react-tags__suggestions { width: calc(100% + 16.8em); }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers { position: relative; z-index: 2147483500; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fa, .view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fas, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fa, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fas { font-family: 'Font Awesome 5 Pro'; font-weight: 900; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .wrapper-outer, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .wrapper-outer { max-height: 470px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .wrapper-outer .fractal-modal-header .title, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .wrapper-outer .fractal-modal-header .title { padding: 10px 16px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .member-image-v1, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .member-image-v1 { margin-right: 4px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column { border: none; padding: 16px 16px 0 0; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .column-header, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .column-header { display: none; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list-right, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list-right { height: calc(100% - 16px); margin-top: 0; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit h3, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit h3 { display: flex; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 16px; justify-content: space-between; margin-bottom: 16px; margin-top: 8px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit .fa-exclamation-triangle, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit .fa-exclamation-triangle { color: #f1c40f; margin-right: 4px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit .__react_component_tooltip, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit .__react_component_tooltip { width: 170px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit ~ .team-list-right, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .f-team-limit ~ .team-list-right { height: calc(100% - 63px); }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member { border: none; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member.f-team-owner:hover, .view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member.f-team-owner .member-image-v1:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member.f-team-owner:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member.f-team-owner .member-image-v1:hover { cursor: default; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member .member-name, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member .member-name { font-size: 14px; margin-left: 0; padding-left: 0; vertical-align: super; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times { color: #797d7f; font-size: 14px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times.f-disabled, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times.f-disabled { color: #e7e9eb; cursor: default; pointer-events: none; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times.f-disabled:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times.f-disabled:hover { color: #e7e9eb; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-times:hover { color: #797d7f; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key { font-size: 14px; margin-right: 20px; margin-top: 8px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.not-owner, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.not-owner { color: #bdc3c7; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.not-owner:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.not-owner:hover { color: #797d7f; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.owner, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .right-column .team-list .team-list-member i.fa-key.owner { color: #797d7f; margin-right: 20px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column { padding: 16px 16px 0; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .column-header, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .column-header { display: none; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list-left, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list-left { height: calc(100% - 64px); margin-top: 8px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list-left.f-submit-no-results, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list-left.f-submit-no-results { align-items: center; display: flex; justify-content: center; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .no-results, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .no-results { color: #999ea1; padding: 0; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member { border: none; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member .member-name, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member .member-name { font-size: 14px; margin-left: 0; padding-left: 0; vertical-align: super; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member i.fa-chevron-double-right, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member i.fa-chevron-double-right { color: #3498db !important; display: none; float: right; font-size: 14px; margin-top: 8px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member:hover, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member:hover { background-color: #e7e9eb; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member:hover i.fa-chevron-double-right, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .team-list .team-list-member:hover i.fa-chevron-double-right { display: block; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .team-members-search, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .f-team-member-search-container .team-members-search { font-size: 14px; min-height: 40px; padding-left: 34px; }

.view-idea-3 ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .fractal-input.fa-search::before, .f-idea-modal ~ div.fractal-teamWorkspaceHomeMembers .fractal-modal-body .left-column .fractal-input.fa-search::before { align-items: center; display: flex; font-family: 'Font Awesome 5 Pro'; font-size: 16px; font-weight: 400; height: 24px; left: 8px; margin: 0; padding: 0; text-align: center; top: 8px; width: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-subscribe-idea-button { margin-right: 8px; }

.fractal-subscribe-idea-button .subscribe-button { border-radius: 4px; font-size: 14px; height: 24px; padding: 0 8px; }

.fractal-subscribe-idea-button .subscribe-button-main { padding: 0 8px; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button { border-color: #bdc3c7; border-radius: 4px 0 0 4px; }

.fractal-subscribe-idea-button .subscribe-button-main.subscribe-has-side-button.subscribed { border-color: #3498db; }

.fractal-subscribe-idea-button .subscribe-button-side { background-color: #fff; border: #bdc3c7 1px solid; border-left: none; border-radius: 0 4px 4px 0; color: #797d7f; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):hover { background-color: #e7e9eb; border-color: #bdc3c7; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):active { background-color: #999ea1; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):focus { background-color: #bdc3c7; border-color: transparent; color: #fff; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):focus:active { background-color: #999ea1; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed):focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.fractal-subscribe-idea-button .subscribe-button-side:not(.subscribed).subscribe-others-open { background-color: #797d7f; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-dropzone { cursor: pointer; }

.fractal-dropzone .default { background-color: transparent; border: 2px dashed #797d7f; border-radius: 5px; box-sizing: border-box; font-size: 12px; padding: 20px; text-align: center; transition: background 0.1s linear 0s; width: 100%; }

.fractal-dropzone .default.focused { border-color: #1abc9c; }

.fractal-dropzone .default input { border: 0; display: block !important; height: 0; opacity: 0; overflow: hidden; width: 0; }

.fractal-dropzone .drag-active { background: #f5f5f6; }

.fractal-dropzone .browse-text { color: #1abc9c; font-weight: bold; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload .f-file-error { margin: 10px 0; }

.fractal-fileupload .f-file-error .f-file-error-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 5px; }

.fractal-fileupload .f-file-error .f-file-error-row .f-filename { color: #e74c3c; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.fractal-fileupload .f-file-error .f-file-error-row .fa-times { color: #e74c3c; font-size: 10px; }

.fractal-fileupload .f-file-error .f-file-error-row .failed-bar { background: #e74c3c; border-radius: 10px; height: 10px; width: 95%; }

.fractal-fileupload .f-file-error .f-file-error-row span { color: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.grid::after { clear: both; content: ''; display: table; }

.grid-inline-block { display: inline-block; }

[class*='col-'] { float: left; min-height: 1px; }

[class*='col-'] .grid:last-of-type { padding-right: 0; }

.col-2-3 { width: 66.66%; }

.col-1-3 { width: 33.33%; }

.col-1-2 { width: 50%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

.col-3-8 { width: 37.5%; }

.col-1-5 { width: 20%; }

.col-2-5 { width: 40%; }

.col-3-5 { width: 60%; }

.col-4-5 { width: 60%; }

.col-3-16 { width: 18.75%; }

.col-1-16 { width: 6.25%; }

.fractal-fileblock { font-size: 11px; margin: 10px 0 20px; }

.fractal-fileblock .grid { margin-bottom: 10px; }

.fractal-fileblock .col-2-3, .fractal-fileblock .col-1-3, .fractal-fileblock .progress { display: table; height: 30px; }

.fractal-fileblock .col-2-3 div, .fractal-fileblock .col-2-3 a, .fractal-fileblock .col-1-3 div, .fractal-fileblock .col-1-3 a, .fractal-fileblock .progress div, .fractal-fileblock .progress a { display: table-cell; vertical-align: middle; }

.fractal-fileblock .col-2-3 div.image-preview, .fractal-fileblock .col-2-3 a.image-preview, .fractal-fileblock .col-1-3 div.image-preview, .fractal-fileblock .col-1-3 a.image-preview, .fractal-fileblock .progress div.image-preview, .fractal-fileblock .progress a.image-preview { width: 30px; }

.fractal-fileblock .col-2-3 span, .fractal-fileblock .col-1-3 span, .fractal-fileblock .progress span { padding: 2px 10px 0; }

.fractal-fileblock .col-2-3 span.filename, .fractal-fileblock .col-1-3 span.filename, .fractal-fileblock .progress span.filename { color: inherit; display: table-cell; padding: 0; vertical-align: middle; }

.fractal-fileblock .col-2-3 .fa-times, .fractal-fileblock .col-1-3 .fa-times, .fractal-fileblock .progress .fa-times { color: #e74c3c; font-size: 10px; }

.fractal-fileblock .col-2-3 .progress-bar, .fractal-fileblock .col-1-3 .progress-bar, .fractal-fileblock .progress .progress-bar { background: #27ae60; border-radius: 10px; height: 10px; width: 0; }

.fractal-fileblock .col-2-3 .remove-upload, .fractal-fileblock .col-1-3 .remove-upload, .fractal-fileblock .progress .remove-upload { color: #797d7f; cursor: pointer; font-size: 15px; transition: color 0.2s ease-in-out; }

.fractal-fileblock .col-2-3 .remove-upload:hover, .fractal-fileblock .col-1-3 .remove-upload:hover, .fractal-fileblock .progress .remove-upload:hover { color: #e74c3c; }

.fractal-fileblock .hidden { display: none; }

.fractal-fileblock .progress { height: 10px; transition: all 1.5s ease-in-out 0s; width: 95%; }

.fractal-fileblock .preview { border-radius: 4px; margin-right: 5px; width: 30px; }

.fractal-fileblock .filename { color: #1abc9c; font-weight: 600; overflow: hidden; text-decoration: none; text-overflow: ellipsis; }

.fractal-fileblock .size, .fractal-fileblock .remove { float: right; }

.fractal-fileblock .remove { cursor: pointer; }

.fractal-fileblock .ext + a { padding-left: 5px; }

.fractal-fileblock .ext span { padding: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-filelist { font-size: 11px; margin: 10px 0 20px; }

.fractal-filelist .grid { margin-bottom: 10px; }

.fractal-filelist .col-2-3, .fractal-filelist .col-1-3, .fractal-filelist .progress { display: table; height: 30px; }

.fractal-filelist .col-2-3 div, .fractal-filelist .col-2-3 a, .fractal-filelist .col-1-3 div, .fractal-filelist .col-1-3 a, .fractal-filelist .progress div, .fractal-filelist .progress a { display: table-cell; vertical-align: middle; }

.fractal-filelist .col-2-3 div.image-preview, .fractal-filelist .col-2-3 a.image-preview, .fractal-filelist .col-1-3 div.image-preview, .fractal-filelist .col-1-3 a.image-preview, .fractal-filelist .progress div.image-preview, .fractal-filelist .progress a.image-preview { width: 30px; }

.fractal-filelist .col-2-3 span, .fractal-filelist .col-1-3 span, .fractal-filelist .progress span { padding: 2px 10px 0; }

.fractal-filelist .col-2-3 span.filename, .fractal-filelist .col-1-3 span.filename, .fractal-filelist .progress span.filename { color: inherit; display: table-cell; padding: 0; vertical-align: middle; }

.fractal-filelist .col-2-3 .fa-times, .fractal-filelist .col-1-3 .fa-times, .fractal-filelist .progress .fa-times { color: #e74c3c; font-size: 10px; }

.fractal-filelist .col-2-3 .progress-bar, .fractal-filelist .col-1-3 .progress-bar, .fractal-filelist .progress .progress-bar { background: #27ae60; border-radius: 10px; height: 10px; width: 0; }

.fractal-filelist .col-2-3 .remove-upload, .fractal-filelist .col-1-3 .remove-upload, .fractal-filelist .progress .remove-upload { color: #797d7f; cursor: pointer; font-size: 15px; transition: color 0.2s ease-in-out; }

.fractal-filelist .col-2-3 .remove-upload:hover, .fractal-filelist .col-1-3 .remove-upload:hover, .fractal-filelist .progress .remove-upload:hover { color: #e74c3c; }

.fractal-filelist .hidden { display: none; }

.fractal-filelist .progress { height: 10px; transition: all 1.5s ease-in-out 0s; width: 95%; }

.fractal-filelist .preview { border-radius: 4px; margin-right: 5px; width: 30px; }

.fractal-filelist .filename { color: #1abc9c; font-weight: 600; overflow: hidden; text-decoration: none; text-overflow: ellipsis; }

.fractal-filelist .size, .fractal-filelist .remove { float: right; }

.fractal-filelist .remove { cursor: pointer; }

.fractal-filelist .ext + a { padding-left: 5px; }

.fractal-filelist .ext span { padding: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
@keyframes closeWindow { 0% { opacity: 1; }
  100% { opacity: 0; } }

.ril__outer { background-color: rgba(0, 0, 0, 0.85); outline: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; height: 100%; -ms-content-zooming: none; -ms-user-select: none; -ms-touch-select: none; touch-action: none; }

.ril__outerClosing { opacity: 0; }

.ril__inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.ril__image, .ril__imagePrev, .ril__imageNext { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: none; -ms-content-zooming: none; -ms-user-select: none; -ms-touch-select: none; touch-action: none; }

.ril__imageDiscourager { background-repeat: no-repeat; background-position: center; background-size: contain; }

.ril__navButtons { border: none; position: absolute; top: 0; bottom: 0; width: 20px; height: 34px; padding: 40px 30px; margin: auto; cursor: pointer; opacity: 0.7; }

.ril__navButtons:hover { opacity: 1; }

.ril__navButtons:active { opacity: 0.7; }

.ril__navButtonPrev { left: 0; background: rgba(0, 0, 0, 0.2) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==) no-repeat center; }

.ril__navButtonNext { right: 0; background: rgba(0, 0, 0, 0.2) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+) no-repeat center; }

.ril__downloadBlocker { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); background-size: cover; }

.ril__caption, .ril__toolbar { background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; }

.ril__caption { bottom: 0; max-height: 150px; overflow: auto; }

.ril__captionContent { padding: 10px 20px; color: #fff; }

.ril__toolbar { top: 0; height: 50px; }

.ril__toolbarSide { height: 50px; margin: 0; }

.ril__toolbarLeftSide { padding-left: 20px; padding-right: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

.ril__toolbarRightSide { padding-left: 0; padding-right: 20px; flex: 0 0 auto; }

.ril__toolbarItem { display: inline-block; line-height: 50px; padding: 0; color: #fff; font-size: 120%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ril__toolbarItemChild { vertical-align: middle; }

.ril__builtinButton { width: 40px; height: 35px; cursor: pointer; border: none; opacity: 0.7; }

.ril__builtinButton:hover { opacity: 1; }

.ril__builtinButton:active { outline: none; }

.ril__builtinButtonDisabled { cursor: default; opacity: 0.5; }

.ril__builtinButtonDisabled:hover { opacity: 0.5; }

.ril__closeButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat center; }

.ril__zoomInButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+) no-repeat center; }

.ril__zoomOutButton { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=) no-repeat center; }

.ril__outerAnimating { animation-name: closeWindow; }

@keyframes pointFade { 0%, 19.999%, 100% { opacity: 0; }
  20% { opacity: 1; } }

.ril__loadingCircle { width: 60px; height: 60px; position: relative; }

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

.ril__loadingCirclePoint::before { content: ''; display: block; margin: 0 auto; width: 11%; height: 30%; background-color: #fff; border-radius: 30%; animation: pointFade 800ms infinite ease-in-out both; }

.ril__loadingCirclePoint:nth-of-type(1) { transform: rotate(0deg); }

.ril__loadingCirclePoint:nth-of-type(7) { transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(1)::before, .ril__loadingCirclePoint:nth-of-type(7)::before { animation-delay: -800ms; }

.ril__loadingCirclePoint:nth-of-type(2) { transform: rotate(30deg); }

.ril__loadingCirclePoint:nth-of-type(8) { transform: rotate(210deg); }

.ril__loadingCirclePoint:nth-of-type(2)::before, .ril__loadingCirclePoint:nth-of-type(8)::before { animation-delay: -666ms; }

.ril__loadingCirclePoint:nth-of-type(3) { transform: rotate(60deg); }

.ril__loadingCirclePoint:nth-of-type(9) { transform: rotate(240deg); }

.ril__loadingCirclePoint:nth-of-type(3)::before, .ril__loadingCirclePoint:nth-of-type(9)::before { animation-delay: -533ms; }

.ril__loadingCirclePoint:nth-of-type(4) { transform: rotate(90deg); }

.ril__loadingCirclePoint:nth-of-type(10) { transform: rotate(270deg); }

.ril__loadingCirclePoint:nth-of-type(4)::before, .ril__loadingCirclePoint:nth-of-type(10)::before { animation-delay: -400ms; }

.ril__loadingCirclePoint:nth-of-type(5) { transform: rotate(120deg); }

.ril__loadingCirclePoint:nth-of-type(11) { transform: rotate(300deg); }

.ril__loadingCirclePoint:nth-of-type(5)::before, .ril__loadingCirclePoint:nth-of-type(11)::before { animation-delay: -266ms; }

.ril__loadingCirclePoint:nth-of-type(6) { transform: rotate(150deg); }

.ril__loadingCirclePoint:nth-of-type(12) { transform: rotate(330deg); }

.ril__loadingCirclePoint:nth-of-type(6)::before, .ril__loadingCirclePoint:nth-of-type(12)::before { animation-delay: -133ms; }

.ril__loadingCirclePoint:nth-of-type(7) { transform: rotate(180deg); }

.ril__loadingCirclePoint:nth-of-type(13) { transform: rotate(360deg); }

.ril__loadingCirclePoint:nth-of-type(7)::before, .ril__loadingCirclePoint:nth-of-type(13)::before { animation-delay: 0ms; }

.ril__loadingContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.ril__imagePrev .ril__loadingContainer, .ril__imageNext .ril__loadingContainer { display: none; }

.ril__errorContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; color: #fff; }

.ril__imagePrev .ril__errorContainer, .ril__imageNext .ril__errorContainer { display: none; }

.ril__loadingContainer__icon { color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

.ReactModalPortal .ReactModal__Overlay { z-index: 100003 !important; }

/* REACT-IMAGE-LIGHTBOX OVERRIDES */
.fractal-lightbox { background: rgba(62, 62, 62, 0.95); }

.fractal-lightbox .ril-toolbar .ril-toolbar__item .ril__toolbarItemChild { background: inherit; color: #fff; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-size: 20px; height: 100%; }

.fractal-lightbox .ril-toolbar .ril-toolbar__item .ril__toolbarItemChild.ril__zoomInButton::before { content: '\f00e'; }

.fractal-lightbox .ril-toolbar .ril-toolbar__item .ril__toolbarItemChild.ril__zoomOutButton::before { content: '\f010'; }

.fractal-lightbox .ril-toolbar .ril-toolbar__item .ril__toolbarItemChild.ril__closeButton::before { content: '\f00d'; }

.fractal-lightbox .ril-toolbar .ril-toolbar__item .ril__toolbarItemChild.f-ril-download { align-items: center; display: flex; justify-content: center; }

.fractal-lightbox .ril-toolbar .ril-toolbar__item span.ril__toolbarItemChild { font-family: 'Open Sans'; font-size: 16px; }

.fractal-lightbox .ril__navButtons { background: inherit; color: #fff; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-size: 40px; height: 48px; line-height: 48px; padding: 0; text-align: center; width: 34px; }

.fractal-lightbox .ril__navButtons.ril-next-button::before { content: '\F105'; }

.fractal-lightbox .ril__navButtons.ril-prev-button::before { content: '\F104'; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.grid::after { clear: both; content: ''; display: table; }

.grid-inline-block { display: inline-block; }

[class*='col-'] { float: left; min-height: 1px; }

[class*='col-'] .grid:last-of-type { padding-right: 0; }

.col-2-3 { width: 66.66%; }

.col-1-3 { width: 33.33%; }

.col-1-2 { width: 50%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

.col-3-8 { width: 37.5%; }

.col-1-5 { width: 20%; }

.col-2-5 { width: 40%; }

.col-3-5 { width: 60%; }

.col-4-5 { width: 60%; }

.col-3-16 { width: 18.75%; }

.col-1-16 { width: 6.25%; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll { align-items: center; display: flex; overflow-x: auto; width: 100%; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll .f-image-block { margin-right: 14px; position: relative; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll .f-image-block img { border-radius: 4px; cursor: pointer; height: 110px; object-fit: cover; width: 110px; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll .f-image-block .fa-trash-o { color: #797d7f; font-size: 22px; position: absolute; right: 4px; top: 4px; transition: color 0.2s ease-in-out; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll .f-image-block .fa-trash-o:hover { color: #e74c3c; cursor: pointer; }

.fractal-fileupload .f-fileupload-image-slide .f-images-horizontal-scroll .f-image-block .progress-bar { background: #27ae60; height: 10px; transition: all 1.5s ease-in-out 0s; width: 0; }

.fractal-fileupload .f-fileupload-image-slide .fractal-fileblock .grid { margin: 0; }

.fractal-fileupload .f-fileupload-image-slide .fractal-fileblock .grid .filename { font-size: 12px; font-weight: 400; }

.fractal-fileupload .f-fileupload-image-slide .f-file-grid { margin-top: 10px; }

.fractal-fileupload .f-fileupload-image-slide .grid { margin-bottom: 0; }

.fractal-fileupload .f-fileupload-image-slide .grid .size { padding: 7px; }

.fractal-fileupload .f-fileupload-image-slide .grid .fa-trash-o { cursor: pointer; font-size: 14px; }

.fractal-fileupload .f-fileupload-image-slide .grid .fa-trash-o:hover { color: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-hidden-dropzone-wrapper { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.f-hidden-dropzone-wrapper.f-hidden-dropzone-show { display: block; }

.f-hidden-dropzone-wrapper .f-hidden-dropzone { align-items: center; background-color: #fff; border: 2px #337ab7 dashed; border-radius: 8px; box-sizing: border-box; color: #444647; display: flex; font-size: 20px; height: 100%; justify-content: center; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-fileupload .f-input-files-link { position: relative; }

.fractal-fileupload .f-input-files-link .f-input-link { height: 0.1px; opacity: 0; overflow: hidden; position: absolute; width: 0.1px; z-index: -1; }

.fractal-fileupload .f-input-files-link .f-input-label { cursor: pointer; display: inline-block; font-size: 12px; font-weight: 400; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.comments-v1 { font-size: 12px; margin-top: 20px; }

.comments-v1 * { box-sizing: border-box; }

.comments-v1 > input { height: 40px; width: 100%; }

.comments-v1 a, .comments-v1 a:link, .comments-v1 a:visited { color: #3498db; font-weight: normal; text-decoration: none; }

.comments-v1 .comment-updatebox-container .fractal-redactor .redactor-box { border: 1px solid #bdc3c7; overflow: hidden; }

.comments-v1 .member-img { height: 32px; }

.comments-v1 .comment-inputbox-container { border: 1px solid #bdc3c7; border-radius: 0.25em; clear: both; height: auto; overflow: hidden; padding: 15px 20px; }

.comments-v1 .comment-inputbox-container .comment-input-element { border: none; display: inline-block; height: 50px; margin-left: 20px; width: 90%; }

.comments-v1 .comment-inputbox-container .fractal-redactor { margin-left: 40px; }

.comments-v1 .comment-inputbox-container .fractal-redactor .redactor-box { overflow: hidden; }

.comments-v1 .comment-inputbox-container .fractal-redactor .redactor-box .redactor-styles { border: #bdc3c7; border-radius: 4px; color: #1e1f20; font-family: 'Open Sans' !important; font-size: 14px; font-weight: 400; height: auto; line-height: normal; padding: 5px; top: 0; }

.comments-v1 .comment-inputbox-container .fractal-redactor .redactor-box .redactor-styles.redactor-placeholder { color: #999ea1; }

.comments-v1 .comment-inputbox-container .fractal-redactor .redactor-box .redactor-styles p { font-size: 14px; line-height: normal; margin: 0; }

.comments-v1 .comment-inputbox-container .member-image-v1 { float: left; }

.comments-v1 .comment-updatebox-container .comment-inputbox-actions { margin-top: 0; }

.comments-v1 .comment-updatebox-container .comment-inputbox-actions hr { margin-bottom: 0; }

.comments-v1 .comment-updatebox-container .comment-inputbox-actions .actions-right { display: flex; }

.comments-v1 .comment-updatebox-container .comment-inputbox-actions .actions-right :last-child { margin-right: 0; }

.comments-v1 .comment-updatebox-container .comment-inputbox-actions .actions-right .comment-cancel { align-items: center; cursor: pointer; display: flex; height: 32px; margin-top: 10px; }

.comments-v1 .comment-updatebox-container .redactor-styles { color: #1e1f20; font-family: 'Open Sans' !important; font-size: 14px; font-weight: 400; height: auto; line-height: normal; padding: 10px; }

.comments-v1 .comment-updatebox-container .redactor-styles.redactor-placeholder { color: #999ea1; }

.comments-v1 .comment-updatebox-container .redactor-styles p { font-size: 14px; line-height: normal; margin: 0; }

.comments-v1 .comment-inputbox-container .fractal-fileupload, .comments-v1 .comment-updatebox-container .fractal-fileupload { margin-top: 10px; }

.comments-v1 .comment-inputbox-container .fractal-fileupload .browse-text, .comments-v1 .comment-updatebox-container .fractal-fileupload .browse-text { color: #3498db; }

.comments-v1 .comment-inputbox-container .fractal-fileupload .fractal-filelist, .comments-v1 .comment-updatebox-container .fractal-fileupload .fractal-filelist { margin: 10px 0 0; }

.comments-v1 .comment-inputbox-actions { margin-top: 20px; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-enter { max-height: 0; opacity: 0; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-enter.btn-post-animation-enter-active { max-height: 100px; opacity: 1; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-enter.btn-post-animation-enter-active .actions-box { max-height: 100px; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-enter .actions-box { max-height: 0; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-exit { max-height: 100px; opacity: 1; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-exit.btn-post-animation-exit-active { max-height: 0; opacity: 0; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-exit.btn-post-animation-exit-active .actions-box { max-height: 0; opacity: 0; }

.comments-v1 .comment-inputbox-actions.btn-post-animation-exit .actions-box { max-height: 100px; opacity: 1; }

.comments-v1 .comment-inputbox-actions hr { border: 1px solid #bdc3c7; border-bottom-width: 0; margin-bottom: 0; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; }

.comments-v1 .comment-inputbox-actions .actions-box { display: flex; justify-content: space-between; max-height: 100px; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; }

.comments-v1 .comment-inputbox-actions .actions-box :last-child .fractal-button { margin-right: 0; }

.comments-v1 .comment-inputbox-actions .actions-box .attachments-icon { align-items: center; border: 1px solid #444647; border-radius: 50%; color: #444647; cursor: pointer; display: flex; font-size: 14px; height: 32px; justify-content: center; margin-top: 10px; width: 32px; }

.comments-v1 .comment-inputbox-actions .actions-box .attachments-icon:hover, .comments-v1 .comment-inputbox-actions .actions-box .attachments-icon:focus { outline: none; transform: scale(1.04); }

.comments-v1 .comment-inputbox-actions .actions-box .attachments-icon:active { outline: none; transform: scale(1); }

.comments-v1 .comment-inputbox-actions .actions-box .attachments-icon.attachments-shown { background: #999ea1; color: #fff; }

.comments-v1 .comment-inputbox-actions .actions-box .comment-inputbox-limit { display: inline-block; height: 30px; margin: 10px 10px 0; }

.comments-v1 .comment-inputbox-actions .actions-box .fractal-button { display: inline-block; margin-bottom: 0; }

.comments-v1 .fractal-list-comments.comments { margin-top: 20px; }

.comments-v1 .fractal-list-comments { line-height: 18px; transition: opacity 1s ease-in-out, max-height 1s ease-in-out; }

.comments-v1 .fractal-list-comments .comment-animation-enter { max-height: 0; opacity: 0; }

.comments-v1 .fractal-list-comments .comment-animation-enter.comment-animation-enter-active { max-height: 1000px; opacity: 1; transition: opacity 2s ease-in-out, max-height 2s ease-in-out; }

.comments-v1 .fractal-list-comments .fractal-comment-box { background-color: #fff; transition: opacity 0.3s ease-in-out 0.25s, max-height 1s ease-in-out; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent { border: 1px solid #bdc3c7; border-radius: 4px; margin: 15px 0; overflow: hidden; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .fractal-htmlpreview { min-height: inherit; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .fractal-htmlpreview p, .comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .fractal-htmlpreview span { line-height: 18px; word-wrap: break-word; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .fractal-comment-box-nested .fractal-comment-nested { transition: opacity 0.3s ease-in-out, max-height 1s ease-in-out; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .spacer { height: 2px; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent .comment-inputbox-container { background-color: #f5f5f6; border: none; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-shown .comment-animation-placeholder { max-height: 99999px; transition: max-height 1s ease-in; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-shown .fractal-comment-box-nested { max-height: 99999px; opacity: 1; visibility: visible; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-shown .fractal-comment-box-nested .fractal-comment-nested { max-height: 99999px; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-hidden .comment-animation-placeholder { max-height: 0; transition: max-height 0s; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-hidden .fractal-comment-box-nested { max-height: 0; opacity: 0; transition: opacity 0s ease-in-out, max-height 1s ease-in-out; visibility: hidden; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-top-parent.comment-hidden .fractal-comment-box-nested .fractal-comment-nested { max-height: 0; opacity: 0; visibility: hidden; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-box-nested { background-color: #f5f5f6; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment { padding: 15px 20px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment a.total-nested-comments { cursor: pointer; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-attachments { list-style-type: none; margin-top: 10px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-attachments .fractal-comment-attachment { margin-top: 5px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-attachments .fractal-comment-attachment i.fa { margin-right: 5px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-footer { margin: 10px 0; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-btn { border: 1px solid; cursor: pointer; transition: all 0.2s ease-in-out; border-color: 1px solid #999ea1; border-radius: 5px; display: inline-block; margin-right: 10px; padding: 2px 4px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-btn:hover { transform: scale(1.04); }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .fractal-comment-btn:active { transform: scale(1); }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment .total-nested-comments { display: inline-block; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header { align-items: center; display: flex; justify-content: space-between; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .fractal-comment-member-wrapper { align-items: flex-start; display: flex; margin: 0 0 10px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .fractal-comment-member-wrapper .fractal-member-name { margin: 0 3px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container { display: flex; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container.comment-editing .comment-icon { color: #999ea1; cursor: default; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container.comment-editing .comment-icon:hover { background: none; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container.comment-editing .comment-icon i:hover { color: #999ea1; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon { align-items: center; border-radius: 50%; color: #797d7f; cursor: pointer; display: flex; font-size: 14px; height: 24px; justify-content: center; margin: 0; width: 24px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon:hover { background: #f5f5f6; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon:focus { background: #bdc3c7; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon i:hover { color: #444647; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon i:focus { color: #1e1f20; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon i.fa-pencil-square-o { margin-bottom: -2px; margin-right: -2px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .comment-icon-container .comment-icon .__react_component_tooltip.place-bottom.show { margin-top: 10px; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .fractal-comment-date { font-size: 10px; line-height: normal; margin-left: 3px; margin-right: auto; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-header .fractal-member-badge { background-color: #f1c40f; border-radius: 5px; color: white; font-size: 10px; margin-bottom: 28px; margin-left: 5px; margin-right: auto; padding: 0 5px; }

.comments-v1 .fractal-list-comments .fractal-comment-box.fractal-comment-body { margin: 15px 0; }

.comments-v1 .fractal-list-comments .fractal-comment-box .fractal-comment-nested { padding-left: 40px; }

.comments-v1 .fractal-list-comments .load-more-btn { border: 1px solid; cursor: pointer; transition: all 0.2s ease-in-out; border-color: #3498db; border-radius: 5px; color: #3498db; margin: 0 auto; padding: 5px; text-align: center; width: 75px; }

.comments-v1 .fractal-list-comments .load-more-btn:hover { transform: scale(1.04); }

.comments-v1 .fractal-list-comments .load-more-btn:active { transform: scale(1); }

.comments-v1 .fractal-list-comments .load-more-btn i.fa-spinner { color: #3498db; font-size: 16px; }

.comments-v1 .mobile-view-comments-btn { border: 1px solid; cursor: pointer; transition: all 0.2s ease-in-out; border-color: #3498db; border-radius: 40px; color: #3498db; display: none; margin: 20px auto 0; padding: 10px 8px; text-align: center; width: 190px; }

.comments-v1 .mobile-view-comments-btn:hover { transform: scale(1.04); }

.comments-v1 .mobile-view-comments-btn:active { transform: scale(1); }

@media (min-width: 1001px) { .comments-v1 .mobile-view-comments-btn { display: none; } }

@media (max-width: 1000px) { .comments-v1.comments-hidden .comments { max-height: 0; opacity: 0; visibility: hidden; }
  .comments-v1.comments-hidden .mobile-view-comments-btn { display: block; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-select { display: block; }

.fractal-select:focus { border: 1px solid #16a085; }

.fractal-select.gray-theme { background-color: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #000; font-size: 13px; height: 32px; line-height: 32px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-table div.fractal-table-head { display: flex; }

.fractal-table div.fractal-table-header-cell { display: flex; flex-grow: 0; flex-shrink: 0; padding: 5px; position: relative; width: 100px; }

.fractal-table th span:hover { color: #999ea1; cursor: pointer; }

.fractal-table th i { margin-left: 10px; position: absolute; }

.fractal-table th i .hidden { visibility: hidden; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-table .fractal-table-cell { box-sizing: border-box; flex-grow: 0; flex-shrink: 0; min-height: 27px; padding: 5px; width: 100px; }

.fractal-table .fractal-table-cell > span { display: block; }

.fractal-table .fractal-table-cell .table-cell-delete { align-self: flex-end; color: #797d7f; cursor: pointer; margin-right: 3px; margin-top: -15px; transition: all 0.2s ease-in-out; }

.fractal-table .fractal-table-cell .table-cell-delete:hover { color: #e74c3c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-table .fractal-table-row { display: inline-flex; }

.fractal-table .fractal-table-row .empty-rearrange { display: inline-block; height: 23px; width: 8px; }

.fractal-table .fractal-table-row .rearrange-icon { background-image: url(/fractal/dist/images/fb097becd72c5ba4e1b1.svg); cursor: move; display: inline-block; height: 23px; width: 8px; }

.fractal-table .fractal-table-row .table-row-delete, .fractal-table .fractal-table-row .table-subrow-add { background: #d5d9db; border-radius: 100px 0 0 100px; color: #797d7f; cursor: pointer; height: 25px; left: 3px; margin-top: 5px; padding: 5px 1px 3px 10px; position: absolute; text-decoration: none; transition: all 0.2s ease-in-out; width: 25px; }

.fractal-table .fractal-table-row .table-row-delete:hover, .fractal-table .fractal-table-row .table-subrow-add:hover { color: #e74c3c; left: 3px; transform: scale(1.04); }

.fractal-table .fractal-table-row .table-row-delete:active, .fractal-table .fractal-table-row .table-subrow-add:active { transform: scale(1); }

.fractal-table .fractal-table-row .table-row-delete .fa, .fractal-table .fractal-table-row .table-subrow-add .fa { position: absolute; }

.fractal-table .fractal-table-row .table-subrow-add { border-radius: 0 100px 100px 0; position: relative; width: 22px; }

.fractal-table .fractal-table-row .table-subrow-add:hover { color: #217dbb; left: 3px; transform: scale(1.04); }

.fractal-table .fractal-table-row .table-subrow-add .fa { left: 5px; top: 6px; }

.fractal-table .fractal-table-row .table-row-rearrange { cursor: move; left: 3px; padding-top: 6px; position: absolute; transition: all 0.2s ease-in-out; }

.fractal-table .fractal-table-row.delete-icon-on-right .table-row-delete { align-items: center; background: none; border: 1px solid #bdc3c7; border-radius: 50%; display: flex; justify-content: center; left: unset; margin-left: -30px; margin-right: 5px; margin-top: 0; padding: 0; position: static; }

.fractal-table .fractal-table-row.delete-icon-on-right .table-row-delete:hover { border-color: #e74c3c; }

.fractal-table .fractal-table-row.delete-icon-on-right .table-row-delete a { position: static; }

.fractal-table .fractal-table-row.delete-icon-on-right .table-row-delete i { font-size: 15px; }

.fractal-table .fractal-table-row.is-drag-layer { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }

.fractal-table .fractal-table-row.is-dragging { opacity: 0.2; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-attachmentsmain-v1 { height: 100%; overflow: auto; }

.fractal-widget-attachmentsmain-v1 .fractal-fileupload { box-sizing: border-box; display: inline-block; height: calc(100vh - 280px); width: 100%; }

.fractal-widget-attachmentsmain-v1 .fractal-fileupload .fractal-fileblock { height: calc(100vh - 375px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-table { font-size: 12px; font-weight: normal; }

.fractal-table * { box-sizing: border-box; }

.fractal-table .row-animation-enter { max-height: 0; opacity: 0; }

.fractal-table .row-animation-enter.row-animation-enter-active { max-height: 100px; opacity: 1; transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out; }

.fractal-table .row-animation-exit { max-height: 100px; opacity: 1; }

.fractal-table .row-animation-exit.row-animation-leave-exit { max-height: 0; opacity: 0; transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out; }

.fractal-table.financial-table-flex > div { display: flex; flex-direction: column; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* override white background in NGA tabs view */
#idea-content-holder #view-idea-main-content .fractal-widget-history-tab, #action_item_idea_container #view-idea-main-content .fractal-widget-history-tab { background: inherit; }

#view-idea-main-content .fractal-widget-history-tab, .fractal-widget-history-tab { background: #fff; font: 12px Open Sans, sans-serif; line-height: initial; min-height: 500px; position: relative; padding: 20px; }

#view-idea-main-content .fractal-widget-history-tab *, .fractal-widget-history-tab * { box-sizing: border-box; }

#view-idea-main-content .fractal-widget-history-tab ul, .fractal-widget-history-tab ul { margin: 0; padding-left: 0; }

#view-idea-main-content .fractal-widget-history-tab ul li, .fractal-widget-history-tab ul li { list-style-type: none; }

#view-idea-main-content .fractal-widget-history-tab ul li:last-of-type .f-item .f-main, .fractal-widget-history-tab ul li:last-of-type .f-item .f-main { margin-bottom: 0; }

#view-idea-main-content .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item, .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item { border: 1px solid #f1c40f; border-radius: 4px; margin-bottom: 0; padding: 20px; }

#view-idea-main-content .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-lollipop .f-icon, .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-lollipop .f-icon { border: 0; height: 100%; margin-right: 20px; }

#view-idea-main-content .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-lollipop .f-icon .fa::before, .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-lollipop .f-icon .fa::before { color: #f1c40f; }

#view-idea-main-content .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-main, .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-main { margin-bottom: 0; }

#view-idea-main-content .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-rules-engine, .fractal-widget-history-tab ul li.f-item-type-derivative_type_warning .f-item .f-rules-engine { display: none; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item, .fractal-widget-history-tab ul li .f-item { display: flex; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-lollipop, .fractal-widget-history-tab ul li .f-item .f-lollipop { display: flex; flex-direction: column; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-lollipop .f-icon, .fractal-widget-history-tab ul li .f-item .f-lollipop .f-icon { border: 1px solid #999ea1; border-radius: 19px; font-size: 18px; height: 38px; margin-right: 10px; width: 38px; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-lollipop .f-icon .fa::before, .fractal-widget-history-tab ul li .f-item .f-lollipop .f-icon .fa::before { color: #797d7f; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-lollipop .f-vertical-connector, .fractal-widget-history-tab ul li .f-item .f-lollipop .f-vertical-connector { flex-grow: 1; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-main, .fractal-widget-history-tab ul li .f-item .f-main { align-self: center; flex: 1 1 auto; margin-bottom: 10px; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-main .f-text, .fractal-widget-history-tab ul li .f-item .f-main .f-text { color: #444647; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-main .f-text .__react_component_tooltip, .fractal-widget-history-tab ul li .f-item .f-main .f-text .__react_component_tooltip { border: 1px solid #bdc3c7; box-shadow: 0 0 9px -7px #444647; pointer-events: auto; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-main .f-text .__react_component_tooltip.place-bottom.show, .fractal-widget-history-tab ul li .f-item .f-main .f-text .__react_component_tooltip.place-bottom.show { margin-top: 10px; }

#view-idea-main-content .fractal-widget-history-tab ul li .f-item .f-main .f-timestamp, .fractal-widget-history-tab ul li .f-item .f-main .f-timestamp { color: #797d7f; }

#view-idea-main-content .fractal-widget-history-tab .f-vertical-connector, .fractal-widget-history-tab .f-vertical-connector { background-color: #999ea1; margin: 0 0 0 19px; min-height: 10px; width: 1px; }

#view-idea-main-content .fractal-widget-history-tab .load-more-btn, .fractal-widget-history-tab .load-more-btn { border: 1px solid; cursor: pointer; transition: all 0.2s ease-in-out; border-color: #3498db; border-radius: 5px; color: #3498db; font-weight: 600; margin: 20px auto; padding: 8px 0; text-align: center; width: 92px; }

#view-idea-main-content .fractal-widget-history-tab .load-more-btn:hover, .fractal-widget-history-tab .load-more-btn:hover { transform: scale(1.04); }

#view-idea-main-content .fractal-widget-history-tab .load-more-btn:active, .fractal-widget-history-tab .load-more-btn:active { transform: scale(1); }

#view-idea-main-content .fractal-widget-history-tab .load-more-btn i.fa-spinner, .fractal-widget-history-tab .load-more-btn i.fa-spinner { color: #3498db; font-size: 18px; }

#view-idea-main-content .fractal-widget-history-tab .__react_component_tooltip.show, .fractal-widget-history-tab .__react_component_tooltip.show { opacity: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-droplist { background: white; box-shadow: 1px 1px 5px -1px grey; display: block; min-height: 20px; min-width: 200px; padding: 10px; position: absolute; z-index: 2; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.business-impact-buttons :first-child { align-items: center; display: flex; }

.business-impact-buttons .f-btn-subtle { margin-right: 0; padding: 0 10px; }

.business-impact-buttons .f-btn-primary, .business-impact-buttons .f-btn-secondary { margin: 10px; }

.business-impact-buttons .business-impact-button-editing { display: inline-block; font-style: italic; margin: 0 10px; }

.business-impact-buttons .business-impact-button-editing :first-child { display: inline-block; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.business-impact-blank .business-impact-blank-message { font-size: 14px; margin: 40px auto 0; text-align: center; }

.business-impact-blank .business-impact-blank-button .fractal-button { display: block; margin: 30px auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-business-impact .financial-impact .datepicker-label { border-bottom: 1px solid #bdc3c7; border-left: 1px solid #bdc3c7; border-radius: 4px 0 0 4px; border-top: 1px solid #bdc3c7; display: inline-block; font-size: 12px; font-weight: normal; height: 30px; padding: 6px 10px; vertical-align: top; }

.fractal-widget-business-impact .financial-impact .fractal-datepicker { background: #fff; display: inline-block; height: 32px; margin-bottom: 10px; margin-right: auto; width: 180px; }

.fractal-widget-business-impact .financial-impact .fractal-datepicker input { border-radius: 0 4px 4px 0; cursor: pointer; display: inline-block; font-size: 12px; height: 30px; }

.fractal-widget-business-impact .financial-impact .fractal-datepicker input::-ms-clear { display: none; }

.react-datepicker-popper { z-index: 60000; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* Override for background of table first cell in row when used in NGA */
#idea-content-holder .fractal-table-body .fractal-table-cell:first-of-type { background-color: #e7e9eb; }

.fractal-widget-business-impact .financial-impact .fa-info-circle { color: #3498db; margin: 0 8px; }

.fractal-widget-business-impact .financial-impact .financial-impact-date { font-size: 12px; font-weight: normal; margin-bottom: 10px; }

.fractal-widget-business-impact .financial-impact .financial-impact-notes { box-sizing: border-box; font-size: 12px; font-weight: normal; margin-bottom: 10px; min-height: 50px; padding-top: 10px; width: 100%; }

.fractal-widget-business-impact .financial-impact .financial-impact-notes.financial-impact-notes-preview { font-style: italic; min-height: 0; }

.fractal-widget-business-impact .financial-impact .financial-impact-results { transition: color 0.2s ease-in-out; }

.fractal-widget-business-impact .financial-impact .financial-impact-results.negative-result { color: #f00; }

.fractal-widget-business-impact .financial-impact .financial-impact-row-currency { float: right; padding-right: 10px; }

.fractal-widget-business-impact .financial-impact .f-financial-impact-tooltip { max-width: 250px; }

.fractal-widget-business-impact .financial-impact .financial-table-container { border: 1px solid #d5d9db; border-radius: 4px; }

.fractal-widget-business-impact .financial-impact .financial-table-container .financial-table { border-radius: 4px; display: inline-block; overflow-x: auto; width: 100%; }

.fractal-widget-business-impact .financial-impact .financial-table-container .financial-table .financial-table-flex { display: flex; }

.fractal-widget-business-impact .financial-impact .fractal-fileupload { margin-top: 20px; max-width: calc(100% - 4px); }

.fractal-widget-business-impact .financial-impact .fractal-fileupload .default { padding: 10px 0; }

.fractal-widget-business-impact .financial-impact .financial-table-add-benefits .fractal-table-row:first-of-type { padding-right: 30px; }

.fractal-widget-business-impact .financial-impact .financial-table-add-costs .fractal-table-row:first-of-type { height: 60px; }

.fractal-widget-business-impact .financial-impact .financial-table-benefits .fractal-table-row:last-of-type, .fractal-widget-business-impact .financial-impact .financial-table-costs .fractal-table-row:last-of-type { height: 40px; }

.fractal-widget-business-impact .financial-impact .financial-table-benefits .fractal-table-row .financial-cell-preview, .fractal-widget-business-impact .financial-impact .financial-table-costs .fractal-table-row .financial-cell-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header, .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader { font-weight: 600; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell, .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader .fractal-table-cell { text-align: center; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell { align-items: center; background: #f5f5f6; display: flex; flex-direction: column; width: 200px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell a { display: none; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell:first-of-type { border-right: 1px solid #d5d9db; left: 0; position: sticky; width: 150px; z-index: 1; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell:first-of-type a { display: none; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell:last-of-type a { display: block; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell:nth-of-type(even) { background: #e7e9eb; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .fractal-table-cell span { margin-left: 20px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-header .delete-animation-placeholder { display: inline-block; width: 20px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader .fractal-table-cell { background: #f5f5f6; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader .fractal-table-cell:first-of-type { border-right: 1px solid #d5d9db; left: 0; position: sticky; width: 150px; z-index: 1; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader .fractal-table-cell:nth-of-type(4n - 2), .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subheader .fractal-table-cell:nth-of-type(4n - 5) { background: #e7e9eb; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:first-of-type { background: #fff; border-right: 1px solid #d5d9db; left: 0; padding: 5px 5px 0; position: sticky; width: 150px; z-index: 2; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:not(:first-of-type) { text-align: right; z-index: 1; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:not(:first-of-type) input { text-align: right; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:nth-of-type(4n - 2), .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:nth-of-type(4n - 5) { background: #f5f5f6; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell:nth-of-type(4n - 2) { border-right: 1px solid #dadade; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell .empty-result { padding-right: 25px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell > span { padding: 0 12px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell input, .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .fractal-table-cell select { height: 25px; width: 100%; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .table-row-delete { left: 1px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .table-row-delete:hover { left: 1px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-subrow .fractal-table-cell:first-of-type { padding-left: 20px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell .financial-impact-add-year { background-color: #fff; border-color: #3498db; color: #3498db; margin: 10px; width: 100px; border: 1px solid; cursor: pointer; transition: all 0.2s ease-in-out; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell .financial-impact-add-year:hover { transform: scale(1.04); }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell .financial-impact-add-year:active { transform: scale(1); }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell .financial-impact-add-year span { white-space: nowrap; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell:first-of-type { background: #fff; border-right: 1px solid #d5d9db; left: 0; padding: 5px 5px 0 0; position: sticky; width: 150px; z-index: 1; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell:nth-of-type(4n - 2):not(:last-of-type), .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell:nth-of-type(4n - 5):not(:last-of-type) { background: #f5f5f6; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-buttons .fractal-table-cell:nth-of-type(4n - 2):not(:last-of-type) { border-right: 1px solid #dadade; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-summary, .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-totals { font-weight: 600; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-summary .fractal-table-cell .empty-result, .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-totals .fractal-table-cell .empty-result { padding-right: 35px; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-summary { border-bottom: 1px solid #444647; }

.fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-totals { border-top: 1px solid #444647; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-business-impact .non-financial-impact .add-button { width: 300px; }

.fractal-widget-business-impact .non-financial-impact .fractal-fileupload { max-width: calc(100% - 4px); }

.fractal-widget-business-impact .non-financial-impact .fractal-fileupload .default { padding: 10px 0; }

.fractal-widget-business-impact .non-financial-impact .fractal-table { overflow-x: scroll; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-body-row { border-bottom: 1px solid #bdc3c7; margin-top: 5px; padding-bottom: 7px; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-header { font-weight: bold; margin-bottom: 5px; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-header .fractal-table-cell { background: #f5f5f6; text-align: left; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-row { flex-wrap: wrap; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-row .table-subrow-add { display: none; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(1) { padding-left: 0; width: 30%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(1) input { height: 25px; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(1) span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(2) { width: 30%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(2) select { cursor: pointer; height: 25px; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(3), .fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(4) { width: 20%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(3) input, .fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(4) input { border-radius: 5px; cursor: pointer; font-size: 12px; height: 25px; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(4) { padding-right: 0; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(5) { padding-left: 0; padding-right: 0; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(5) span { font-style: italic; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell:nth-of-type(5) textarea { font-size: 12px; min-height: 50px; width: 100%; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell span { padding: 0 12px; }

.fractal-widget-business-impact .non-financial-impact .fractal-table .fractal-table-cell .react-datepicker__input-container input { display: inline; }

.fractal-widget-business-impact .non-financial-impact .f-non-financial-impact-tooltip { max-width: 250px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-business-impact .business-impact-tab { font-size: 14px; font-weight: 600; }

.fractal-widget-business-impact .business-impact-tab .tab-body { overflow: hidden; transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out; }

.fractal-widget-business-impact .business-impact-tab .tab-body .tab-body-header { display: flex; justify-content: space-between; }

.fractal-widget-business-impact .business-impact-tab .tab-header { border-bottom: 1px solid #999ea1; cursor: pointer; margin-bottom: 10px; padding: 10px 0; }

.fractal-widget-business-impact .business-impact-tab .tab-icon-left { margin-right: 10px; }

.fractal-widget-business-impact .business-impact-tab .tab-icon-right { color: #3498db; float: right; margin-right: 10px; margin-top: 5px; transition: color 0.2s ease-in-out; }

.fractal-widget-business-impact .business-impact-tab .tab-icon-right:active { color: #124364; }

.fractal-widget-business-impact .business-impact-tab .tab-icon-right:hover { color: #196090; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.flyover-component-v1 { color: #797d7f; min-width: 336px; padding: 20px; width: 336px; }

.flyover-component-v1 * { box-sizing: border-box; }

.flyover-component-v1 .flyover-user-photo-container { display: inline-block; margin: 0 16px 16px 0; position: relative; vertical-align: top; }

.flyover-component-v1 .flyover-user-photo-container::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.flyover-component-v1 .flyover-user-photo-container div { align-items: center; background: #1abc9c; border-radius: 50%; color: #fff; display: inline-flex; height: 64px; justify-content: center; text-align: center; text-decoration: none; width: 64px; }

.flyover-component-v1 .flyover-user-photo-container span { display: inline-block; font-size: 20px; font-weight: 600; }

.flyover-component-v1 .flyover-user-photo { border-radius: 50%; height: 48px; }

.flyover-component-v1 ul.flyover-user-info, .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; height: 48px; justify-content: center; list-style-type: none; margin-bottom: 24px; position: relative; text-align: left; width: 206px; }

#view-idea-main-content .flyover-component-v1 ul.flyover-user-info, #view-idea-main-content .flyover-component-v1 .flyover-user-info { margin-left: 0; padding-left: 0; }

.fractal-widget-highlights .f-activity-items .flyover-component-v1 ul.flyover-user-info, .fractal-widget-highlights .f-activity-items .flyover-component-v1 .flyover-user-info { align-items: flex-start; display: inline-flex; flex-direction: column; justify-content: center; }

.flyover-component-v1 ul.flyover-user-info li, .flyover-component-v1 .flyover-user-info li { display: block; }

.flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; cursor: pointer; display: block; font-size: 18px; font-weight: normal; line-height: 28px; max-width: 206px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .fractal-widget-business-impact .financial-impact-sections .section-header .flyover-component-v1 .flyover-user-info .flyover-user-name a { font-size: 18px; }

.f-activity-items .flyover-component-v1 ul.flyover-user-info .flyover-user-name a, .f-activity-items .flyover-component-v1 .flyover-user-info .flyover-user-name a { color: #444647; font-size: 18px; }

.flyover-component-v1 .flyover-user-job-title, .flyover-component-v1 .flyover-user-location { font-size: 14px; line-height: 20px; }

.flyover-component-v1 .flyover-links { display: flex; }

.flyover-component-v1 .flyover-links .fractal-button { flex: 1; }

.flyover-component-v1 .flyover-link-item { margin: 0; }

.flyover-component-v1 .flyover-link-item + .flyover-link-item { margin-left: 16px; }

.flyover-component-v1 .flyover-link-item.hidden { display: none; }

.flyover-component-v1 .flyover-link-item.fractal-button i.fa-spinner { color: #797d7f; font-size: 16px; }

.__react_component_tooltip .flyover-component-v1 { padding: 12px; }

/* override white background in NGA tabs view */
#idea-content-holder .fractal-widget-business-impact, #action_item_idea_container .tab-content-container .fractal-widget-business-impact { background: inherit; }

.fractal-widget-business-impact { background: #fff; font: 12px Open Sans, sans-serif; line-height: initial; min-height: 500px; position: relative; padding: 10px 25px; }

.fractal-widget-business-impact * { box-sizing: border-box !important; }

.fractal-widget-business-impact.fractal-loading-display-none .financial-impact-sections { display: none; }

.fractal-widget-business-impact input, .fractal-widget-business-impact select { font: 12px 'Open Sans', sans-serif; }

.fractal-widget-business-impact h4 { display: inline-block; margin-top: 5px; }

.fractal-widget-business-impact .add-button { color: #3498db; cursor: pointer; font-size: 12px; font-weight: normal; margin: 5px 0; padding: 5px 0 0 8px; transition: color 0.2s ease-in-out; width: 150px; }

.fractal-widget-business-impact .add-button:active { color: #0a2639; }

.fractal-widget-business-impact .add-button:hover { color: #196090; }

.fractal-widget-business-impact .add-button-column { color: #3498db; cursor: pointer; display: inline-table; font-size: 12px; font-weight: normal; height: 100%; margin-top: 20%; overflow: hidden; text-align: center; transition: color 0.2s ease-in-out; vertical-align: top; width: 80px; }

.fractal-widget-business-impact .add-button-column:active { color: #0a2639; }

.fractal-widget-business-impact .add-button-column:hover { color: #196090; }

.fractal-widget-business-impact .financial-impact-datepicker.datepicker-error input { border: 1px solid #f00; }

.fractal-widget-business-impact .financial-impact-empty-section { color: #999ea1; font-weight: normal; padding: 50px; text-align: center; }

.fractal-widget-business-impact .financial-impact-empty-section .empty-section-notes { display: block; font-size: 12px; margin-top: 10px; }

.fractal-widget-business-impact .financial-impact-input { border: 1px solid #bdc3c7; border-radius: 4px; height: 21px; padding-left: 10px; transition: border 0.2s ease-in-out; width: calc(100% - 12px); }

.fractal-widget-business-impact .financial-impact-input:active, .fractal-widget-business-impact .financial-impact-input:focus { border: 1px solid #1abc9c; }

.fractal-widget-business-impact .financial-impact-input.input-error { border: 1px solid #f00; }

.fractal-widget-business-impact .financial-impact-sections .business-impact-buttons { float: right; }

.fractal-widget-business-impact .financial-impact-sections .clear-both { clear: both; }

.fractal-widget-business-impact .financial-impact-sections .financial-impact-versions a:not(.flyover-link-item) { font-weight: normal; margin: 0; }

.fractal-widget-business-impact .financial-impact-sections .section-header { border: none; color: initial; height: 50px; padding: 0; position: relative; }

.fractal-widget-business-impact .financial-impact-sections .section-header span, .fractal-widget-business-impact .financial-impact-sections .section-header a { font-size: 12px; }

.fractal-widget-business-impact .financial-impact-sections .section-header .fractal-droplist { left: 130px; top: 45px; }

.fractal-widget-business-impact .financial-impact-sections .section-footer { padding-bottom: 140px; }

.fractal-widget-business-impact .financial-impact-select { border: 1px solid #bdc3c7; cursor: pointer; height: 23px; transition: border 0.2s ease-in-out; width: 100%; }

.fractal-widget-business-impact .financial-impact-select:active, .fractal-widget-business-impact .financial-impact-select:focus { border: 1px solid #1abc9c; }

.fractal-widget-business-impact .financial-impact-select.select-error { border: 1px solid #f00; }

.fractal-widget-business-impact .financial-impact-versions { display: inline-block; font-style: italic; max-width: 400px; overflow: hidden; padding: 20px 0; text-overflow: ellipsis; white-space: nowrap; }

.fractal-widget-business-impact .financial-impact-versions .chevron { cursor: pointer; display: inline-block; margin-left: 10px; width: 20px; }

.fractal-widget-business-impact .financial-impact-versions .chevron::before { border-style: solid; border-width: 2px 2px 0 0; content: ''; display: inline-block; height: 5px; transform: rotate(135deg); vertical-align: middle; width: 5px; }

.fractal-widget-business-impact .financial-impact-versions .chevron.top::before { transform: rotate(-45deg); }

.fractal-widget-business-impact .financial-impact-versions .chevron.bottom::before { top: 0; }

.fractal-widget-business-impact .financial-impact-versions .chevron.left::before { left: 0.25em; transform: rotate(-135deg); }

.fractal-widget-business-impact .financial-impact-versions .chevron.right::before { left: 0; transform: rotate(45deg); }

.fractal-widget-business-impact .financial-impact-versions .chevron.bottom { vertical-align: 20%; }

.fractal-widget-business-impact .financial-impact-versions .version-member { color: #3498db; cursor: pointer; }

.fractal-widget-business-impact .financial-impact-versions .version-member .__react_component_tooltip { margin-left: 15px; margin-top: 17px !important; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip { border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); margin-top: 4px; opacity: 1; pointer-events: auto; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip.show { opacity: 1; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip.place-bottom { margin-top: inherit; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip.place-right { margin-left: inherit; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip.type-light.place-top::before { border-top: 8px solid rgba(0, 0, 0, 0.1); }

.fractal-widget-business-impact .financial-impact-versions .flyover-component-v1 { font-style: normal; }

.fractal-widget-business-impact .financial-impact-versions .__react_component_tooltip { margin-left: 25px; margin-top: 15px !important; }

.fractal-widget-business-impact .financial-impact-versions-droplist { border: 15px solid #fff; max-height: 300px; overflow: auto; padding: 0 15px; z-index: 3; }

.fractal-widget-business-impact .financial-impact-versions-droplist .droplist-version { color: #1e1f20; margin: 8px 0; transition: color 0.2s ease-in-out; }

.fractal-widget-business-impact .financial-impact-versions-droplist .droplist-version:not(.version-selected):hover { color: #3498db; cursor: pointer; }

.fractal-widget-business-impact .financial-impact-versions-droplist span { margin-left: 3px; }

.fractal-widget-business-impact .financial-impact-versions-droplist .version-selected::before { color: #3498db; content: '\f00c'; font-family: FontAwesome, 'Font Awesome 5 Pro'; left: 0; margin-top: 2px; position: absolute; }

.fractal-widget-business-impact .fractal-datepicker .fa-calendar { font-size: 12px; }

.fractal-widget-business-impact .fractal-dropzone .default { border: 2px dashed #bdc3c7; font-weight: normal; }

.fractal-widget-business-impact .fractal-textarea textarea { padding: 6px 10px; }

.fractal-widget-business-impact .version-button { color: #3498db; display: inline-block; float: right; height: 32px; padding-top: 20px; transition: color 0.2s ease-in-out; }

.fractal-widget-business-impact .version-button:hover { color: #217dbb; cursor: pointer; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-history-tab { padding: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-chrome-extension-popup { background: linear-gradient(164.51deg, #9b59b6 4.79%, #8e44ad 92.04%); border-bottom-left-radius: 4px; border-top-left-radius: 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 14px; padding: 12px; position: fixed; right: 0; top: calc(50% - 74px); width: 124px; }

.f-chrome-extension-popup .f-title { font-weight: 700; padding: 8px 0; }

.f-chrome-extension-popup .f-body { color: #f5f5f6; font-size: 12px; }

.f-chrome-extension-popup .f-btn-subtle { border-radius: 4px; color: #fff; position: absolute; right: 0; top: 0; }

.f-chrome-extension-popup .f-btn-subtle:hover { color: #797d7f; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-modal-inset { align-items: center; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: flex; height: 64px; justify-content: flex-start; margin-top: 8px; padding-left: 16px; }

.f-modal-inset .f-modal-inset-image-wrap { align-items: center; display: inline-flex; justify-content: center; margin-right: 8px; width: 32px; }

.f-modal-inset .f-modal-inset-image { height: auto; max-height: 28px; width: auto; }

.f-modal-inset > div { display: flex; flex-direction: column; }

.f-modal-inset span { color: #444647; font-size: 14px; font-weight: 700; }

.f-modal-inset .f-subtext { color: #797d7f; font-size: 12px; font-weight: 400; line-height: 14px; }

.f-modal-inset .f-modal-inset-children { margin-top: 16px; }

.f-modal-inset.f-type-selected { border: 3px solid #1abc9c; padding-left: 14px; }

.f-modal-inset.f-type-selected:hover { filter: none; }

.f-modal-inset.f-modal-inset-large { font-size: 14px; height: auto; margin-top: 16px; min-height: 90px; padding: 16px 22px; }

.f-modal-inset.f-modal-inset-large .f-subtext { font-size: 14px; margin-top: 4px; }

.f-modal-inset.f-modal-inset-large .f-modal-inset-image-wrap { margin-right: 20px; }

.f-modal-inset.f-modal-inset-large.f-type-selected { padding-left: 20px; }

.f-modal-inset.f-modal-inset-large:first-child { margin-top: 0; }

.f-modal-inset.f-modal-inset-large:first-child.f-type-selected { margin-bottom: -2px; margin-top: -2px; }

.f-modal-inset:hover { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)); }

.f-modal-inset:first-child { margin-top: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-split-menu { align-items: center; display: flex; height: 32px; position: relative; }

.f-split-menu .fractal-button.f-split-menu-btn:not(.f-solo-btn).f-btn-sm, .f-split-menu .fractal-button.f-split-menu-btn:not(.f-solo-btn).f-btn-md, .f-split-menu .fractal-button.f-split-menu-btn:not(.f-solo-btn).f-btn-lg, .f-split-menu .fractal-button.f-split-menu-btn:not(.f-solo-btn).f-btn-xs { border-bottom-right-radius: 0; border-right: 0; border-top-right-radius: 0; margin: 0; margin-right: 0; white-space: nowrap; }

.f-split-menu .fractal-button.f-split-menu-btn:not(.f-solo-btn).f-solo-btn { border-bottom-right-radius: 4px; border-top-right-radius: 4px; }

.f-split-menu .f-dropdown-btn { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; margin-right: 0; padding: 0 16px; }

.f-split-menu .f-dropdown-btn .fa-chevron-down { margin-left: 0; }

.f-split-menu .f-dropdown-btn.f-btn-primary { border-left: 1px solid rgba(0, 0, 0, 0.2); color: #fff; }

.f-split-menu .f-dropdown-btn.f-dropdown-open, .f-split-menu .f-dropdown-btn:focus:not(:active) { box-shadow: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-wizard-modal .fractal-button.f-btn-standard:focus { color: #bdc3c7; }

.f-wizard-modal .f-modal-body { width: 720px; }

.f-wizard-modal .f-wizard-progress-bar-wrapper { align-items: center; color: #797d7f; display: flex; flex-direction: row; height: 10px; justify-content: flex-start; width: calc(100% - 80px); }

.f-wizard-modal .f-wizard-progress-bar-wrapper .fractal-progress-bar { margin-right: 8px; margin-top: 0; width: 224px; }

.f-wizard-modal .f-wizard-progress-bar-wrapper > span { font-size: 12px; white-space: nowrap; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-connected-modal p, .ReactModalPortal.f-connected-modal span, .ReactModalPortal.f-add-existing-modal p, .ReactModalPortal.f-add-existing-modal span { font-family: Lato, 'Open Sans', arial, 'sans serif'; margin-bottom: 12px; }

.ReactModalPortal.f-connected-modal input, .ReactModalPortal.f-add-existing-modal input { width: 100%; }

.ReactModalPortal.f-connected-modal .f-modal-body, .ReactModalPortal.f-add-existing-modal .f-modal-body { font-size: 14px; min-height: 100px; padding: 16px; width: 400px; }

.ReactModalPortal.f-connected-modal .f-error-message, .ReactModalPortal.f-add-existing-modal .f-error-message { color: #e74c3c; display: inline-block; font-size: 12px; margin-top: 4px; text-align: right; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-dropdown-create-memo-wrapper .f-menu-item { font-size: 14px; }

.f-dropdown-create-memo-wrapper .f-menu-item .f-dropdown-options-nested { width: 228px; }

.f-dropdown-create-memo-wrapper .f-menu-item .f-dropdown-options-nested .f-menu-item { font-size: 14px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-template-item { cursor: pointer; margin-right: 16px; position: relative; }

.f-template-item .f-dropdown-btn { position: absolute; right: 34px; top: 2px; width: 30px; z-index: 9999; }

.f-template-item .f-dropdown-options { margin: 8px 12px 0 0; max-width: 166px; }

.f-template-item .f-thumbnail { background: #fff; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 4px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.25); height: 164px; margin-bottom: 8px; transition: box-shadow 0.3s ease; width: 100%; }

.f-template-item .f-thumbnail::after { align-items: center; background-color: transparent; border-radius: 4px; box-sizing: border-box; color: #fff; content: 'Create from\ATemplate'; display: flex; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; height: 100%; justify-content: center; opacity: 0; padding: 10px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; white-space: pre-wrap; width: 100%; }

.f-template-item .f-blank { background: #2ecc71; }

.f-template-item .f-blank::after { align-items: center; background-color: transparent; border-radius: 4px; color: #fff; content: '\f067'; display: flex; font-family: FontAwesome, 'Font Awesome 5 Pro'; font-size: 48px; font-weight: 300; height: 100%; justify-content: center; opacity: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; width: 100%; }

.f-template-item .f-new-blank::after { content: 'Create Whiteboard'; }

.f-template-item .f-view-all::after { content: 'View All'; }

.f-template-item .f-thumbnail-loading { background: #e7e9eb; }

.f-template-item .f-thumbnail-loading::after { content: ''; }

.f-template-item .f-greyed-out { background: #bdc3c7; }

.f-template-item .f-template-title { color: #444647; display: inline-block; font-size: 12px; font-weight: bold; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-template-item .f-thumbnail-loading-title { background-color: #d5d9db; display: inline-block; height: 20px; width: 132px; }

.f-template-item.f-template-item-memo .f-dropdown-btn { position: absolute; right: 0; top: 2px; }

.f-template-item.f-template-item-memo .f-thumbnail::after { content: "Create from" "\a" "Template"; white-space: pre; }

.f-template-item.f-template-item-memo .f-new-blank::after { content: 'Create Blank Memo'; }

.f-template-item .fa-thumbtack.fal { color: #797d7f; }

.f-template-item .f-btn-pinned-container { height: 24px; position: absolute; right: 8px; top: 2px; width: 30px; }

.f-template-item .f-btn-pinned { border: 1px solid #999ea1; color: #797d7f; margin-right: 0; position: absolute; right: 0; top: 0; width: 30px; }

.f-template-item .f-btn-pinned:hover { background: #e7e9eb; border-color: #bdc3c7; color: #797d7f; }

.f-template-item .f-btn-pinned.f-btn-pinned-selected, .f-template-item .f-btn-pinned.f-btn-pinned-selected:focus, .f-template-item .f-btn-pinned.f-btn-pinned-selected:active { background: #fff; border-color: #3498db; color: #3498db; position: absolute; right: 0; top: 0; }

.f-template-item .f-btn-pinned.f-btn-pinned-selected:hover, .f-template-item .f-btn-pinned.f-btn-pinned-selected:focus:hover, .f-template-item .f-btn-pinned.f-btn-pinned-selected:active:hover { background: #ebf4fb; border-color: #2a7aaf; color: #2a7aaf; }

.f-template-item:hover .f-thumbnail { box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.1); }

.f-template-item:hover .f-thumbnail::after { background-color: rgba(17, 17, 17, 0.6); opacity: 1; }

.f-template-item:hover .f-thumbnail-loading::after { background-color: transparent; }

.f-template-main-memo .f-template-item.f-template-item-memo .f-thumbnail::after { content: 'Add Template'; }

.f-template-item-small { margin-bottom: 24px; margin-right: 0; }

.f-template-item-small .f-thumbnail { background-position: center; background-size: cover; height: 144px; position: relative; }

.f-template-item-small .f-btn-pinned { border: 1px solid #999ea1; color: #797d7f; position: absolute; right: 0; top: 0; }

.f-template-item-small.f-template-item-memo .f-thumbnail { height: 128px; }

.f-template-item-small.f-template-item-selected .f-thumbnail::before { border: 3px solid #1abc9c; border-radius: 3px; box-shadow: 0 1px 4px rgba(26, 188, 156, 0.5); content: ''; display: block; height: calc(100% + 8px); left: -7px; position: absolute; top: -7px; width: calc(100% + 8px); }

.f-template-item-small.f-template-hide-text .f-thumbnail::after { content: ''; }

.f-template-item-xsmall { margin-right: 0; }

.f-template-item-xsmall:last-child { margin: 0; }

.f-template-item-xsmall .f-thumbnail { background-position: center; background-size: cover; height: 123px; width: 100%; }

.f-wizard-main .f-template-item.f-template-item-memo .f-thumbnail::after { content: ''; }

.f-wizard-main .f-template-item.f-template-item-memo .f-new-blank::after { content: ''; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-wizard-main .f-templates-container { display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; overflow: visible; padding: 6px; width: 100%; }

.f-wizard-main .f-templates-container .f-template-item-wrapper { min-width: 30%; }

.f-wizard-main .f-wizard-step { min-height: 420px; }

.f-wizard-main .f-wizard-step h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 20px; margin-bottom: 32px; text-align: center; }

.f-create-memo-loading-overlay { align-items: center; display: flex; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; width: 100vw; }

.f-create-memo-loading-overlay .f-loading-spinner-box { align-items: center; background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; display: flex; height: 150px; justify-content: center; width: 150px; }

.f-create-memo-loading-overlay .fractal-spinner-outer .spinner-inner i.fa-spinner { color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-memo, .f-userhome-memos .f-idea-memo { min-height: 50vh; width: 100%; }

.f-idea-page-main .f-idea-memo a, .f-userhome-memos .f-idea-memo a { cursor: pointer; }

.f-idea-page-main .f-idea-memo a:hover, .f-userhome-memos .f-idea-memo a:hover { text-decoration: none; }

.f-idea-page-main .f-idea-memo .f-slate, .f-userhome-memos .f-idea-memo .f-slate { border: 1px solid #bdc3c7; border-radius: 4px; }

.f-idea-page-main .f-idea-memo .f-idea-memo-header, .f-userhome-memos .f-idea-memo .f-idea-memo-header { align-items: center; display: flex; justify-content: space-between; }

.f-idea-page-main .f-idea-memo .f-idea-memo-header .fa-angle-left, .f-userhome-memos .f-idea-memo .f-idea-memo-header .fa-angle-left { font-size: 24px; }

.f-idea-page-main .f-idea-memo .f-memo-thumbnail, .f-userhome-memos .f-idea-memo .f-memo-thumbnail { border: 1px solid #d5d9db; }

.f-idea-page-main .f-idea-memo .f-memo-thumbnail-body, .f-userhome-memos .f-idea-memo .f-memo-thumbnail-body { background: #f5f5f6; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-body, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-body { background: #e7e9eb; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-header-left .f-memo-thumbnail-icon, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-header-left .f-memo-thumbnail-icon { width: 24px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-header-left > div .f-placeholder-line:first-child, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-header-left > div .f-placeholder-line:first-child { margin-bottom: 8px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:first-child, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:first-child { margin-right: 8px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:first-child .animate-foreground, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:first-child .animate-foreground { width: 139px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:nth-child(2) .animate-foreground, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line:nth-child(2) .animate-foreground { width: 32px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line .f-placeholder-right, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .f-placeholder-line .f-placeholder-right { align-items: flex-start; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .animate-foreground, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-memo-thumbnail-actions .animate-foreground { border-radius: 4px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .animate-foreground, .f-userhome-memos .f-idea-memo .f-memo-no-memos .animate-foreground { background: rgba(0, 0, 0, 0.3); background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0.3) 33%); background-size: 800px 104px; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-placeholder-line, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-placeholder-line { display: flex; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-placeholder-line .f-placeholder-right, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-placeholder-line .f-placeholder-right { align-items: center; display: flex; }

.f-idea-page-main .f-idea-memo .f-memo-no-memos .f-placeholder-line .f-placeholder-right div, .f-userhome-memos .f-idea-memo .f-memo-no-memos .f-placeholder-line .f-placeholder-right div { height: 20px; width: 115px; }

.f-idea-page-main .f-idea-memo .f-memo-back, .f-userhome-memos .f-idea-memo .f-memo-back { margin-left: 0; }

.f-idea-page-main .f-idea-memo .f-memo-create, .f-userhome-memos .f-idea-memo .f-memo-create { margin-left: 0; margin-right: 0; }

.f-idea-page-main .f-idea-memo.f-idea-memo-empty, .f-userhome-memos .f-idea-memo.f-idea-memo-empty { align-items: center; display: flex; justify-content: center; }

.f-idea-page-main .f-memo-no-memos p:nth-of-type(2), .f-userhome-memos .f-memo-no-memos p:nth-of-type(2) { margin: 24px 0; }

.f-idea-page-main .f-memo-no-memos:not(.f-userhomepage-card) { align-items: center; display: flex; flex-direction: column; }

.webstorm-level .f-idea-page-main .f-create-memo-btn > .fractal-button { border-right: 0; }

.f-userhome-memos .f-create-memo-btn .fractal-button { margin-left: 0; }

.f-userhome-memos .f-create-memo-btn .fractal-dropdown .f-dropdown-open { background: #27ae60; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-request-review { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); font-size: 14px; min-height: 230px; min-width: 334px; position: absolute; right: 8px; top: 98px; }

.f-memo-request-review * { box-sizing: border-box; }

.f-memo-request-review .f-loading-container { align-items: center; display: flex; height: 278px; justify-content: center; }

.f-memo-request-review .f-heading { align-items: center; border-bottom: 1px solid #e7e9eb; display: flex; justify-content: space-between; padding: 16px; }

.f-memo-request-review .f-heading .f-btn-xs { font-size: 14px; margin: 0; }

.f-memo-request-review .f-request-success { background: #b4eccc; border: 1px solid #2ecc71; border-radius: 4px; display: flex; font-family: 'Lato', 'Open Sans', sans-serif; margin: 16px; padding: 16px; width: 302px; }

.f-memo-request-review .f-request-success .f-request-success-container { display: flex; flex-direction: column; justify-content: center; }

.f-memo-request-review .f-request-success .fa-check-circle { color: #2ecc71; font-size: 24px; margin-right: 16px; }

.f-memo-request-review .f-request-success a { color: #3498db; cursor: pointer; }

.f-memo-request-review .f-request-success .f-btn-standard { margin-left: 0; margin-top: 16px; width: 154px; }

.f-memo-request-review .f-request-success .f-btn-standard .fa-history { margin-right: 8px; }

.f-memo-request-review .f-request-body { max-height: calc(100vh - 228px); overflow: auto; padding: 16px; }

.f-memo-request-review .f-footer { align-items: center; border-top: 1px solid #e7e9eb; display: flex; justify-content: flex-end; padding: 16px; }

.f-request-review-modal { font-size: 14px; }

.f-request-review-modal a { font-weight: normal; }

.f-request-review-modal .f-request-body { max-height: 250px; }

.f-request-review-modal .f-request-body .f-checkbox { margin: 8px 0 12px; }

.f-request-review-modal .f-request-body .f-checkbox-wrapper { margin: 0; }

.f-request-review-modal .f-request-body .f-review-due-date-container input { width: 64px; }

.f-request-review-modal .f-request-body .f-review-remind-container .f-checkbox { margin-top: 0; }

.f-request-review-modal .f-request-body .f-review-remind-container label input { margin: 0 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-review-dropdown { align-items: center; display: flex; margin-left: 8px; }

.f-memo-review-dropdown.f-idea-page-review-memo > button { align-items: center; border-radius: 4px; border-right: 1px solid; display: flex; height: 24px; margin-right: 4px; margin-top: 0; white-space: nowrap; }

.f-memo-review-dropdown li i, .f-memo-review-dropdown .fa-user-clock { margin-left: 0; padding-right: 8px; }

.f-memo-review-dropdown .f-heading { color: #444647; cursor: default; font-weight: 600; }

.f-memo-review-dropdown .f-memo-review-selection { align-items: center; background: #f5eef8; border-bottom-right-radius: 0; border-color: #8e44ad; border-right: 0; border-top-right-radius: 0; color: #8e44ad; display: flex; font-size: 14px; height: 32px; margin-right: 0; }

.f-memo-review-dropdown .f-memo-review-selection:hover { background: #d2b4de; border-color: #8e44ad; }

.f-memo-review-dropdown .f-memo-review-selection:active { background: #8e44ad; border-color: #8e44ad; box-shadow: none; }

.f-memo-review-dropdown .f-memo-review-selection:focus, .f-memo-review-dropdown .f-memo-review-selection:focus:not(:active) { background: #bb8fce; border-color: #8e44ad; box-shadow: none; }

.f-memo-review-dropdown .f-memo-review-selection .fa-check, .f-memo-review-dropdown .f-memo-review-selection .fa-history, .f-memo-review-dropdown .f-memo-review-selection .fa-clock { font-family: 'FontAwesome5_Solid'; margin-left: 0; padding-right: 8px; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn { background: #f5eef8; border-bottom-left-radius: 0; border-color: #8e44ad; border-top-left-radius: 0; color: #8e44ad; margin-left: 0; margin-right: 0; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn i { font-weight: 400; margin-left: 0; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn.f-dropdown-open { background: #8e44ad; border-color: #8e44ad; color: #fff; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn.f-dropdown-open:focus { background: #8e44ad; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn:hover { background: #d2b4de; border-color: #8e44ad; }

.f-memo-review-dropdown .f-review-dropdown .f-review-dropdown-btn:focus { background: #bb8fce; border-color: #8e44ad; }

.f-memo-review-dropdown .f-review-dropdown .f-dropdown-options { right: 8px; }

.f-memo-review-dropdown .f-review-dropdown .f-dropdown-options span { width: 100%; }

@charset "UTF-8";
/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-dropdown-participant .f-dropdown-options li:last-child { display: block; height: 32px; margin-top: 12px; width: 100%; }

.f-share-dropdown-participant .f-dropdown-options li:last-child::before { border-top: 1px solid #bdc3c7; content: ''; display: block; margin: 0; transform: translateY(-6px); width: 92%; }

.f-share-dropdown-participant .f-wb-share-options.f-option-delete { color: #e74c3c; width: 100%; }

.f-canvas-share-modal-v3 .f-sharemodal-footer .f-for-memo .f-dropdown-btn::before { content: ""; font-family: FontAwesome, 'Font Awesome 5 Pro'; padding-right: 8px; }

.f-canvas-share-modal-v3 .f-sharemodal-footer .f-for-memo .f-dropdown-options { width: 220px; }

.f-canvas-share-modal-v3 .f-sharemodal-footer .f-for-memo .f-dropdown-options li { padding-left: 10px; }

.f-canvas-share-modal-v3 .f-sharemodal-footer .f-dropdown-btn { padding: 0 8px 0 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-main-v2 .f-tab { font-size: 14px; height: 30px; }

.f-share-main-v2 .f-tabs-row { border-bottom: 1px solid #d5d9db; display: flex; padding-left: 8px; width: 100%; }

.f-share-main-v2 .f-tab-underline { align-items: center; border-bottom-color: #27ae60; display: flex; font-size: 14px; height: 30px; margin-right: 30px; }

.f-share-main-v2 .f-tab-underline.f-tab-selected { border-bottom-style: solid; border-bottom-width: 2px; }

.f-share-main-v2 .f-tab-underline.f-tab-selected span { color: #444647; }

.f-share-main-v2 .f-tab-underline span { color: #999ea1; cursor: pointer; text-transform: capitalize; }

.f-share-main-v2 .f-share-main-spinner { padding: 32px; width: 528px; }

.f-share-main-v2 .f-member-typeahead { flex: 1; width: auto; }

.f-share-main-v2 .f-member-typeahead .react-tags { font-size: 14px; min-height: 32px; padding-top: 3px; }

.f-share-main-v2 .f-member-typeahead .react-tags input { font-size: 14px; margin-top: 1px; }

.f-share-main-v2 .f-member-typeahead .react-tags .react-tags__search-input { color: #444647; min-width: 188px; }

.f-share-main-v2 .f-member-typeahead .react-tags .react-tags__search-input::placeholder { color: #999ea1; }

.f-share-main-v2 .f-send-invite { font-size: 14px; margin-bottom: 0; margin-right: 0; margin-top: 0; width: 108px; }

.f-canvas-share-modal .ReactModal__Content { max-width: 560px; }

.f-canvas-share-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { overflow: visible; }

.f-canvas-share-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { padding: 6px 16px; }

.f-canvas-share-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.f-canvas-share-modal .f-footer { height: 40px; }

.f-canvas-share-modal .f-footer .f-canvas-copy-link { font-size: 14px; }

.f-canvas-share-modal .f-footer .f-canvas-copy-link a { color: #0072bc; cursor: pointer; font-weight: normal; }

.f-canvas-share-modal .f-footer .f-btn-subtle, .f-canvas-share-modal .f-footer .f-btn-primary { display: none; }

.f-canvas-share-modal .fractal-modal-header .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-canvas-share-warning .ReactModal__Content { max-width: 480px; }

.f-canvas-share-warning .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.f-canvas-share-warning .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { font-size: 14px; padding: 20px 0; }

.f-canvas-share-warning .ReactModal__Overlay { background-color: rgba(0, 0, 0, 0.12) !important; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-modal-design-titleHeaderSubmitFooter-v1 { height: 60vh; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { height: calc(100% - 200px); overflow: visible; padding-bottom: 0; position: relative; z-index: 2; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .ReactModal__Content { max-width: 572px; width: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { height: 108px; padding: 16px; width: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-modal-design-titleHeaderSubmitFooter-v1 .f-sharemodal-footer { height: 108px; width: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-modal-design-titleHeaderSubmitFooter-v1 .fractal-button.f-btn-sm { line-height: 30px; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-share-main-v2 { height: calc(100% - 24px); }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-share-main-v2 .f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper { margin: 0 8px 3px 0; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-share-main-v2 .f-member-typeahead .react-tags .react-tags__search-input { min-width: 60px; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-share-participant-body { height: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-share-participant-body .f-member-list { max-height: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-sharemodal-link { align-items: center; display: flex; font-size: 14px; height: 60px; justify-content: space-between; width: 100%; }

.f-canvas-share-modal.ReactModalPortal.f-canvas-share-modal-v3 .f-btn-copy-link { margin: 0; }

#f-share-dialog-btn { margin-left: 10px; margin-right: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-participant-body { display: flex; flex-direction: column; }

.f-share-participant-body .f-toggle-inner { top: auto; }

.f-share-participant-body .fractal-toggle .f-toggle-tooltip .__react_component_tooltip { margin-left: 12px; max-width: 220px; }

.f-share-participant-body .f-invite-label { font-size: 12px; font-weight: bold; }

.f-share-participant-body .f-invite-container { display: flex; }

.f-share-participant-body .f-invite-container.f-disable-share { opacity: 0.5; pointer-events: none; }

.f-share-participant-body .f-invite-container.f-disable-share ~ .f-member-share-toggle .fractal-toggle.f-toggle-has-label > span { cursor: not-allowed; }

.f-share-participant-body .f-dropdown-disabled:hover, .f-share-participant-body .f-dropdown-disabled:active, .f-share-participant-body .f-dropdown-disabled:focus { background: none; border-color: transparent; box-shadow: none; }

.f-share-participant-body .f-dropdown-disabled:hover { cursor: default; }

.f-share-participant-body h3 { color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; font-weight: bold; line-height: 20px; margin-top: 16px; }

.f-share-participant-body .f-member-share-toggle { margin: 12px 0 8px; }

.f-share-participant-body .f-member-list { margin-top: 0; max-height: 172px; }

.f-share-participant-body .f-member-list .member-img { height: 24px; width: 24px; }

.f-share-participant-body .f-member-list .member-initial { font-size: 10px; height: 24px; width: 24px; }

.f-share-participant-body .f-member-list .f-group-icon { align-items: center; background: #3498db; border-radius: 50%; display: flex; height: 24px; justify-content: center; margin-right: 8px; width: 24px; }

.f-share-participant-body .f-member-list .fa-users { color: #fff; font-size: 12px; }

.f-share-participant-body .f-member-list .fractal-button { align-items: center; border-radius: 50%; display: flex; font-size: 16px; justify-content: center; margin: 0; padding: 0; width: 24px; }

.f-share-participant-body .f-member-list .fa-times { cursor: pointer; }

.f-share-participant-body .f-member-row { align-items: center; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 4px; padding: 4px; transform: translateX(-4px); width: calc(100% + 4px); }

.f-share-participant-body .f-member-row:last-of-type { margin-bottom: 24px; }

.f-share-participant-body .f-member-row:hover { background: #f5f5f6; border-radius: 4px; }

.f-share-participant-body .f-member-row.f-member-row-disabled .f-btn-subtle { opacity: 0; visibility: hidden; }

.f-share-participant-body .f-member-row .member-image-v1 { height: 24px; }

.f-share-participant-body .f-member { align-items: center; display: flex; flex-direction: row; font-size: 14px; }

.f-share-participant-body .f-member-attr { align-items: center; display: flex; font-size: 14px; min-width: 66px; }

.f-share-participant-body .f-member-attr.f-member-no-readonly { min-width: 0; }

.f-share-participant-body .f-member-attr span { margin-right: 8px; }

.f-share-participant-body .member-image-v1 { margin-right: 4px; }

.f-share-participant-body .f-member-typeahead .react-tags { width: 350px; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__search { font-size: 14px; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper { max-width: 97%; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper .member-image-v1::after { bottom: 10px; top: 10px; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__selected .f-tag-wrapper span { overflow: hidden; text-overflow: ellipsis; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions { font-size: 12px; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info-wrapper { width: 100%; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info-wrapper .member-image-v1 { display: flex; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info-wrapper .member-image-v1 .member-initial::after { display: none; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info-wrapper .member-image-v1::after { bottom: 2px; }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-info { width: calc(100% - 40px); }

.f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-name, .f-share-participant-body .f-member-typeahead .react-tags .react-tags__suggestions .f-suggestion-user-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-share-participant-body-v3 h3 { margin-bottom: 12px; margin-top: 0; }

.f-share-participant-body-v3 .f-invite-search-lockup { display: flex; margin-bottom: 12px; }

.f-share-participant-body-v3 .f-invite-search-lockup .f-member-typeahead { width: 314px; }

.f-share-participant-body-v3 .f-invite-search-lockup .f-member-typeahead .react-tags { border-radius: 4px 0 0 4px; width: 314px; }

.f-share-participant-body-v3 .f-invite-search-lockup .f-member-typeahead .fractal-spinner-outer { justify-content: flex-end; top: 2px; }

.f-share-participant-body-v3 .f-invite-search-lockup .f-dropdown-btn { border: 1px solid #bdc3c7; border-left: none; border-radius: 0 4px 4px 0; }

.f-share-participant-body-v3 .f-invite-search-lockup .f-dropdown-btn * { box-sizing: border-box; white-space: nowrap; }

.f-share-participant-body-v3 .f-member-row { padding: 4px 0 4px 4px; transform: none; }

.f-share-participant-body-v3 .f-member-row.f-member-row-active { z-index: 2; }

.f-share-participant-body-v3 .f-member-row .f-dropdown-btn { left: -12px; padding-right: 0; position: relative; }

.f-share-participant-body-v3 .f-member-row .f-dropdown-btn:active, .f-share-participant-body-v3 .f-member-row .f-dropdown-btn.active, .f-share-participant-body-v3 .f-member-row .f-dropdown-btn.f-dropdown-open, .f-share-participant-body-v3 .f-member-row .f-dropdown-btn:focus, .f-share-participant-body-v3 .f-member-row .f-dropdown-btn:hover { left: -4px; padding-right: 8px; }

.f-share-participant-body-v3 .f-member-row .f-dropdown-options { transform: translateX(-4px); }

.f-share-participant-body-v3 .f-member { max-width: calc(100% - 140px); }

.f-share-participant-body-v3 .f-member span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-share-participant-body-v3 .f-member-attr.f-member-no-readonly span { color: #444647; display: inline-block; padding-right: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-memo-modal .f-modal-design-titleHeaderSubmitFooter-v1 { color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; width: 400px; }

.fractal-memo-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { font-size: 14px; padding: 15px; }

.fractal-memo-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body .fractal-combobox { margin-top: 10px; }

.fractal-memo-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { padding: 15px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-thumbnail { border-radius: 4px; font-family: 'Lato', 'Open Sans', arial, sans-serif; margin-bottom: 16px; }

.f-memo-thumbnail-header { background: #fff; border-bottom: 1px solid #d5d9db; border-radius: 4px 4px 0 0; display: flex; justify-content: space-between; padding: 12px 16px 10px; }

.f-memo-thumbnail-header .fractal-button.f-btn-xs { font-size: 14px; margin: 0 8px 0 0; white-space: nowrap; }

.f-memo-thumbnail-header .fractal-button.f-btn-xs.fa-ellipsis-h { margin: 0; }

.f-memo-thumbnail-header #f-share-dialog-btn { margin: 0 8px 0 0; }

.f-memo-thumbnail-header-left { display: flex; flex-direction: row; justify-content: flex-start; width: 80%; }

.f-memo-thumbnail-header-left > div { margin-top: -4px; width: calc(100% - 40px); }

.f-memo-thumbnail-header-left .f-status-indicator { background: #fff; display: flex; margin-top: 6px; max-width: fit-content; }

.f-memo-thumbnail-header-left .f-memo-tag-private { align-items: center; background: #fff; border: 1px solid #797d7f; border-radius: 4px; color: #797d7f; display: flex; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 12px; font-weight: 700; margin-top: 6px; max-width: fit-content; padding: 1px 4px; text-transform: uppercase; }

.f-memo-thumbnail-header-left .f-memo-tag-private i { margin-right: 4px; }

.f-memo-thumbnail-title { color: #444647; display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-memo-thumbnail-byline { font-size: 12px; }

.f-memo-thumbnail-date { color: #797d7f; }

.f-memo-thumbnail-date a, .f-memo-thumbnail-date a:visited { color: #3498db; }

.f-memo-thumbnail-icon { background: url(/fractal/dist/images/87ef700418a1804c4c14.svg) no-repeat center transparent; background-size: 100%; display: block; height: 24px; margin-right: 12px; width: 20px; }

.f-memo-thumbnail-icon.f-icon-microsoft_graph_drive_item { background: url(/fractal/dist/images/ff57833efa91d815a804.svg) no-repeat center transparent; background-size: 100%; width: 24px; }

.f-memo-thumbnail-icon.f-icon-google_api_drive_item { background: url(/fractal/dist/images/e1e99555c5a81299e8cc.svg) no-repeat center transparent; background-size: 100%; width: 20px; }

.f-memo-thumbnail-actions { display: flex; flex-direction: row; padding: 0 0 0 16px; }

.f-memo-thumbnail-actions.f-memo-show-review-action { align-items: baseline; display: flex; }

.f-memo-thumbnail-actions .f-dropdown-options { margin-top: -4px; }

.f-memo-thumbnail-body { cursor: pointer; height: 446px; padding: 42px 48px 0; }

.f-memo-thumb-wrapper { background-color: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); height: 100%; overflow: hidden; width: 100%; }

.f-memo-thumbnail-image { background-position: -2px -2px; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; width: 102%; }

.f-memo-thumbnail-full { display: block; width: 100%; }

.f-memo-thumbnail-small { display: block; width: 100%; }

.f-memo-thumbnail-small #f-share-dialog-btn { display: none; }

.f-memo-thumbnail-small .fractal-button.fa-expand::before { padding-right: 0; }

.f-memo-thumbnail-small .f-memo-thumbnail-body { height: 220px; padding: 24px 24px 0; }

.f-memo-thumbnail-small .f-memo-thumbnail-header-left { width: 232px; }

.f-memo-thumbnail-small .f-memo-thumbnail-actions { padding-left: 8px; }

.f-idea-column .f-memo-thumbnail-image { background-position: -4px -4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-memo-list-wrapper { display: flex; flex-direction: column; width: 100%; }

.f-idea-memo-list-wrapper > a:hover { text-decoration: none; }

.f-idea-memo-list { display: grid; gap: 16px; grid-template-columns: repeat(2, 50%); width: calc(100% - 16px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-tags { display: flex; flex-direction: column; }

.f-idea-page-main .f-idea-tags .f-tag { background-color: #d5d9db; border-radius: 14px; color: #444647; display: block; height: 24px; line-height: 24px; padding: 0 8px; transition: background-color 0.3s; }

.f-idea-page-main .f-idea-tags .f-tag:hover { background-color: #bdc3c7; text-decoration: none; }

.f-idea-page-main .f-idea-tags .f-tags-container { display: flex; flex-flow: wrap; min-height: 40px; }

.f-idea-page-main .f-idea-tags .f-tags-container.f-no-tags .react-tags__search input { min-width: 398px; padding: 10px 0; }

.f-idea-page-main .f-idea-tags .f-tags-container.f-tags-no-edit { left: 2px; margin-top: 7px; }

.f-idea-page-main .f-idea-tags .f-tags-container.f-tags-no-edit .f-tags-wrapper { margin: 2px 4px 2px 0; text-transform: lowercase; }

.f-idea-page-main .f-idea-tags .f-admin-label { background-color: #f1c40f; color: #444647; }

.f-idea-page-main .f-idea-tags .f-admin-label:hover { background-color: #dab10d; }

.f-idea-page-main .f-idea-tags .f-tag-text { color: #fff; }

.f-idea-page-main .f-idea-tags .f-no-tags { color: #999ea1; }

.f-escape-tags { height: 100%; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-team .f-team-deactive p { color: #999ea1; margin-bottom: 16px; }

.f-idea-team .f-team-wrapper { margin: -8px 0 -4px -8px; padding: 8px 0 4px 8px; }

.f-idea-team .f-hover-team { align-items: center; background: #e7e9eb; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; }

.f-idea-team .f-hover-team .fa-pencil { color: #3498db; margin-right: 8px; }

.f-idea-team .f-team-list .f-team-member { align-items: center; display: flex; margin-bottom: 8px; position: relative; }

.f-idea-team .f-team-list .f-member-image { align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; height: 24px; width: 24px; }

.f-idea-team .f-team-list .f-leader-indicator { align-items: center; background-color: #3498db; border: 2px solid #fff; border-radius: 8px; color: #fff; display: flex; font-size: 6px; height: 16px; justify-content: center; left: 12px; position: absolute; top: -4px; width: 16px; }

.f-idea-team .f-team-list .f-leader-indicator:hover { cursor: pointer; }

.f-idea-team .f-team-list .f-member-image { margin-right: 4px; }

.f-idea-team .f-team-limit { align-items: center; color: #444647; display: flex; margin-bottom: 16px; }

.f-idea-team .f-team-limit .fa-users-slash { color: #f1c40f; margin: 0 8px 0 4px; }

.f-idea-team .f-btn-participants { align-items: center; display: flex; font-weight: 700; justify-content: space-between; margin: 8px 0 0; text-align: unset; width: 162px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-idea-title { color: #444647; font-size: 36px; line-height: 1.42857; margin-bottom: 0; width: 100%; }

.f-idea-page-main .f-title-container { align-items: center; border: 1px solid transparent; border-radius: 4px; box-sizing: content-box; display: flex; justify-content: space-between; margin-left: -8px; padding: 2px 0 2px 8px; width: 100%; }

.f-idea-page-main .f-title-container.f-hover-title { background: #e7e9eb; border: 1px solid #e7e9eb; cursor: pointer; }

.f-idea-page-main .f-title-container .fa-pencil { color: #3498db; font-size: 14px; position: relative; right: 8px; }

.f-idea-page-main .f-title-container .f-edit-title { font-size: 24px; margin-left: -8px; padding: 0 0 0 8px; }

.f-idea-page-main .f-title-container .f-title-error { border: 1px solid #e74c3c; }

.f-idea-page-main .f-title-container .f-edit-input-btns { left: -8px; }

.f-idea-page-main .f-static-title { display: block; max-width: 98%; }

.f-idea-page-main .f-static-title .link { font-size: 75%; margin-left: 4px; }

.f-idea-page-main .f-title-small { font-size: 16px; }

.f-idea-page-main .f-title-med { font-size: 24px; }

.f-idea-page-main .f-title-large { font-size: 24px; }

.f-idea-page-main .f-modern-small .f-idea-title { font-size: 24px; max-width: calc(100% - 300px); }

@media (max-width: 1023px) { .f-idea-page-main .f-modern-small .f-idea-title { max-width: 100%; } }

.f-idea-page-main .f-memo-record .f-idea-title { width: 63%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-voting-details { align-items: center; display: flex; justify-content: flex-end; max-height: 32px; }

.f-idea-voting-details * { font-family: Lato, sans-serif; }

.f-idea-voting-details .f-votes-btn-link { font-weight: normal; margin: 8px 0; padding-left: 4px; padding-right: 0; white-space: nowrap; }

.f-idea-voting-details .f-votes-btn-link:hover { text-decoration: underline; }

.f-idea-voting-details .f-vote-image { background: #fff; border-radius: 100%; display: block; height: 32px; text-align: center; width: 32px; }

.f-idea-voting-details .f-vote-image ~ .f-vote-image { margin-left: -8px; position: relative; }

.f-idea-voting-details .f-vote-image .member-image-v1::after { content: none; }

.f-idea-voting-details .f-vote-image .member-image-v1 .member-img { border: 2px solid #fff; height: 32px; }

.f-idea-voting-details .f-vote-image .member-image-v1 .member-initial { border: 2px solid #fff; }

.f-idea-voting-details.f-chips-details { max-width: 200px; position: relative; top: -4px; }

.f-idea-voting-details .f-chips-invested { border-right: 1px solid; padding-right: 8px; }

.f-idea-voting-details .f-investors-btn-link { align-items: center; display: flex; margin-left: 0; margin-right: 0; max-width: 100px; padding-left: 8px; padding-right: 0; }

.f-idea-voting-details .f-investors-btn-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-idea-voting-details .f-chips-invested { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-idea-header-small .f-idea-voting-details .f-vote-image { height: 28px; width: 28px; }

.f-idea-header-small .f-idea-voting-details.f-chips-details { top: 0; }

.f-idea-header-small .f-idea-voting-details .f-vote-image .member-image-v1 { height: 28px; }

.f-idea-header-small .f-idea-voting-details .f-vote-image .member-image-v1 .member-img { height: 28px; }

.f-idea-header-small .f-idea-voting-details .f-vote-image .member-image-v1 div.member-initial { height: 28px; width: 28px; }

.f-idea-header-medium .f-idea-voting-details { margin-left: 24px; }

.f-idea-header-medium .f-idea-voting-details .f-vote-image { height: 24px; width: 24px; }

.f-idea-header-medium .f-idea-voting-details.f-chips-details { max-width: 380px; top: 0; }

.f-idea-header-medium .f-investors-btn-link { max-width: 220px; }

.f-idea-header-medium .f-idea-voting-details .f-vote-image .member-image-v1 { height: 24px; }

.f-idea-header-medium .f-idea-voting-details .f-vote-image .member-image-v1 .member-img { height: 24px; }

.f-idea-header-medium .f-idea-voting-details .f-vote-image .member-image-v1 .member-img::after { top: 3px; }

.f-idea-header-medium .f-idea-voting-details .f-vote-image .member-image-v1 div.member-initial { height: 24px; width: 24px; }

.userhome-body .f-idea-voting-details .f-votes-btn-link { color: inherit; }

.f-idea-modal .f-modern-large .f-chips-invested { max-width: 85px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-whiteboard-container { display: flex; flex-direction: column; position: relative; }

.f-whiteboard-container a:hover, .f-whiteboard-container a:focus, .f-whiteboard-container a:active { text-decoration: none; }

.f-whiteboard-container .f-whiteboard-options { position: absolute; right: 8px; top: 8px; }

.f-whiteboard-container .f-whiteboard-options .f-dropdown-btn { margin: 0; }

.f-whiteboard-container .f-whiteboard-options .f-wb-dropdown-options { color: #444647; }

.f-whiteboard-container .f-no-wb-img { align-items: center; background: #bdc3c7; color: #fff; display: flex; flex-direction: column; font-size: 18px; height: 17rem; justify-content: center; width: 100%; }

.f-whiteboard-container .f-no-wb-img p { color: #fff; }

.f-whiteboard-container .f-no-wb-img .fa-info-circle { display: block; font-size: 24px; margin-bottom: 12px; }

.f-whiteboard-container .f-add-whiteboard-btn { align-self: flex-start; margin: 16px 0 0; }

.f-whiteboard-container .f-whiteboard-info { border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); position: relative; }

.f-whiteboard-container .f-whiteboard-info h4 { color: #444647; padding: 16px 16px 8px; }

.f-whiteboard-container .f-whiteboard-info p { color: #797d7f; padding: 0 0 16px 16px; }

.f-whiteboard-container .f-whiteboard-info img { max-width: 100%; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-workspace .f-no-workspace-wrapper { align-items: flex-start; display: flex; flex-direction: column; }

.f-idea-workspace .f-no-workspace-wrapper .f-create-workspace-btn { font-size: 14px; margin-left: 0; margin-top: 16px; padding: 0 8px; }

.f-idea-workspace .f-no-workspace-wrapper .f-no-workspace-title { color: #999ea1; }

.f-idea-workspace .f-workspace-heading { display: flex; font-weight: bold; padding: 4px 0; }

.f-idea-workspace .f-workspace-header { align-items: center; display: flex; justify-content: space-between; padding-bottom: 4px; }

.f-idea-workspace .f-workspace-team { display: flex; flex-direction: column; width: 100%; }

.f-idea-workspace .f-workspace-team .f-workspace-team-member-row { align-items: center; display: flex; justify-content: space-between; padding-bottom: 4px; }

.f-idea-workspace .f-workspace-team .f-workspace-team-member-row .f-workspace-team-member-wrapper { align-items: center; display: flex; }

.f-idea-workspace .f-workspace-team .f-workspace-team-member-row .f-workspace-team-member-wrapper .f-member-name { margin-left: 4px; }

.f-idea-workspace .f-workspace-team .f-workspace-team-member-row .f-workspace-team-member-wrapper .member-image-v1 .member-initial, .f-idea-workspace .f-workspace-team .f-workspace-team-member-row .f-workspace-team-member-wrapper .member-image-v1 .member-img { height: 24px; width: 24px; }

.f-idea-workspace .f-workspace-team .f-workspace-team-member-row .f-key-icon { align-items: center; background-color: #bdc3c7; border-radius: 50%; color: #fff; display: flex; font-size: 10px; height: 16px; justify-content: center; width: 16px; }

.f-idea-workspace .f-workspace-stats { margin-top: 8px; padding-bottom: 8px; }

.f-idea-workspace .f-workspace-stat-row { display: flex; justify-content: space-between; margin-bottom: 4px; }

.f-idea-workspace .f-workspace-todos { display: flex; flex-direction: column; }

.f-idea-workspace .f-workspace-todo-row { align-items: center; display: flex; margin: 4px 0; }

.f-idea-workspace .f-workspace-todo-row i { font-size: 18px; margin-right: 4px; }

.f-idea-workspace .fa-square { color: #bdc3c7; }

.f-idea-workspace .fa-check-square { color: #2ecc71; }

.f-idea-workspace .f-add-todo { margin: 8px 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-tabs-row-content .fractal-widget-history-tab { min-height: 0; }

.f-tabs-row-content .f-tab-inner-component { margin-bottom: 18px; }

.f-tabs-row-content .f-tab-inner-component.f-memo-tab hr { background: #d5d9db; border: none; height: 1px; margin-bottom: 16px; }

.f-tabs-row-content.f-no-tabs .f-tab-content { padding-top: 0; }

.f-tabs-row-content.f-tabs-dropzone { border: 2px dashed #797d7f; border-radius: 4px; left: -10px; padding: 8px; top: -10px; width: calc(100% + 16px); }

.f-tabs-row-content .f-last-tab-drop { height: 26px; margin-bottom: -26px; position: relative; }

.f-tabs-row-content .f-tab-underline > span { white-space: nowrap; }

.f-tabs-row-content .fractal-widget-business-impact .financial-impact-sections .section-footer { padding-bottom: 0; }

.f-tabs-row-content .fractal-table .fractal-table-row .table-row-delete { left: -22px; }

.f-tabs-row-content .fractal-widget-business-impact .financial-impact .fractal-table .fractal-table-body .table-row-delete { left: -25px; }

.f-tabs-row-content .fractal-widget-business-impact { padding: 0; }

.f-tabs-row-content .fractal-widget-business-impact.fractal-blank-impact { min-height: auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-wrapper a { font-weight: normal; }

.f-idea-page-wrapper .fa, .f-idea-page-wrapper .fas, .f-idea-page-wrapper .far { font-family: 'Font Awesome 5 Pro'; }

.f-idea-page-wrapper .f-idea-row { display: flex; flex-direction: row; flex-shrink: 0; padding: 0 32px; position: relative; width: 100%; }

.f-idea-page-wrapper .f-idea-row:last-child { margin-bottom: 0; }

.f-idea-page-wrapper .f-idea-row [class*='f-idea-column-right'] { margin-left: 24px; }

.f-idea-page-wrapper .f-idea-page-content > .f-idea-row .f-idea-column > div { height: 100%; }

.f-idea-page-wrapper .f-idea-column { display: flex; flex-direction: column; width: 100%; }

.f-idea-page-wrapper .f-idea-column-auto { height: 100%; width: auto; }

.f-idea-page-wrapper .f-idea-fill { flex-grow: 1; }

.f-idea-page-wrapper .f-idea-column-left-small, .f-idea-page-wrapper .f-idea-column-left-body { flex-shrink: 0; max-width: 700px; width: 62%; }

.f-idea-page-wrapper .f-idea-column-right-small, .f-idea-page-wrapper .f-idea-column-right-body { max-width: 36%; width: 412px; }

.f-idea-page-wrapper .f-idea-column-right-small #f-autofill-submission-links, .f-idea-page-wrapper .f-idea-column-right-body #f-autofill-submission-links { text-align: center; }

.f-idea-page-wrapper .f-idea-column-right-small #f-autofill-submission-links form, .f-idea-page-wrapper .f-idea-column-right-body #f-autofill-submission-links form { display: inline; }

.f-idea-page-wrapper .f-idea-column-right-small #f-autofill-submission-links .fractal-button, .f-idea-page-wrapper .f-idea-column-right-body #f-autofill-submission-links .fractal-button { width: 45%; }

.f-idea-page-wrapper .f-idea-column-left-medium { width: 79%; }

.f-idea-page-wrapper .f-idea-column-right-medium { width: 21%; }

.f-idea-page-wrapper .f-idea-column-6 { width: 50%; }

.f-idea-page-wrapper .f-main-col { margin-right: 28px; width: 70%; }

.f-idea-page-wrapper .f-idea-inner-row { align-items: center; display: flex; flex-direction: row; margin-bottom: 8px; width: 100%; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-idea-inner-row .f-submitter { width: 76%; } }

@media (min-width: 768px) and (max-width: 1023px) { .f-idea-page-wrapper .f-idea-inner-row .f-submitter { width: 82%; } }

.f-idea-page-wrapper .f-idea-inner-row.f-flex-column { flex-direction: column; }

.f-idea-page-wrapper .f-idea-inner-row.f-row-align-bottom { align-items: flex-end; }

.f-idea-page-wrapper .f-idea-inner-row:last-child { align-items: flex-end; margin-bottom: 0; }

.f-idea-page-wrapper .f-flex-bottom { align-items: flex-end; justify-content: center; }

.f-idea-page-wrapper .f-flex-left { align-items: flex-start; }

.f-idea-page-wrapper .f-sticky-note, .f-idea-page-wrapper .f-two-column-small, .f-idea-page-wrapper .f-three-column { display: flex; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-sticky-note, .f-idea-page-wrapper .f-two-column-small, .f-idea-page-wrapper .f-three-column { flex-direction: column; } }

.f-idea-page-wrapper .f-sticky-note .f-idea-column, .f-idea-page-wrapper .f-two-column-small .f-idea-column, .f-idea-page-wrapper .f-three-column .f-idea-column { background: transparent; max-width: 224px; width: auto; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-sticky-note .f-idea-column, .f-idea-page-wrapper .f-two-column-small .f-idea-column, .f-idea-page-wrapper .f-three-column .f-idea-column { max-width: inherit; } }

.f-idea-page-wrapper .f-sticky-note .f-sub-column, .f-idea-page-wrapper .f-two-column-small .f-sub-column, .f-idea-page-wrapper .f-three-column .f-sub-column { background: #fff; border-radius: 4px; margin-top: 32px; padding: 16px; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-sticky-note .f-sub-column, .f-idea-page-wrapper .f-two-column-small .f-sub-column, .f-idea-page-wrapper .f-three-column .f-sub-column { display: none; } }

.f-idea-page-wrapper .f-sticky-note .f-idea-image img, .f-idea-page-wrapper .f-two-column-small .f-idea-image img, .f-idea-page-wrapper .f-three-column .f-idea-image img { height: 224px; width: 224px; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-sticky-note .f-idea-image img, .f-idea-page-wrapper .f-two-column-small .f-idea-image img, .f-idea-page-wrapper .f-three-column .f-idea-image img { border-radius: 0; height: 266px; object-fit: cover; width: 100%; } }

.f-idea-page-wrapper .f-sticky-note .f-main-col, .f-idea-page-wrapper .f-two-column-small .f-main-col, .f-idea-page-wrapper .f-three-column .f-main-col { background: #fff; border-radius: 4px; margin-left: 32px; margin-right: 0; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-sticky-note .f-main-col, .f-idea-page-wrapper .f-two-column-small .f-main-col, .f-idea-page-wrapper .f-three-column .f-main-col { margin-left: 0; width: auto; } }

.f-idea-page-wrapper .f-sticky-note .f-tabs-row, .f-idea-page-wrapper .f-two-column-small .f-tabs-row, .f-idea-page-wrapper .f-three-column .f-tabs-row { padding-left: 16px; }

.f-idea-page-wrapper .f-sticky-note .f-body, .f-idea-page-wrapper .f-two-column-small .f-body, .f-idea-page-wrapper .f-three-column .f-body { padding: 16px; }

.f-idea-page-wrapper .f-two-column-small .f-idea-details, .f-idea-page-wrapper .f-three-column .f-idea-details { align-items: center; flex: 1; flex-flow: wrap; flex-direction: row; }

.f-idea-page-wrapper .f-two-column-small .f-idea-details > div, .f-idea-page-wrapper .f-two-column-small .f-idea-details > span, .f-idea-page-wrapper .f-three-column .f-idea-details > div, .f-idea-page-wrapper .f-three-column .f-idea-details > span { margin-right: 16px; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-three-column { flex-direction: column; } }

.f-idea-page-wrapper .f-three-column .f-main-col { margin-right: 32px; width: 50%; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-three-column .f-main-col { margin-right: 0; width: auto; } }

.f-idea-page-wrapper .f-three-column .f-sub-column.f-col-3 { background: transparent; margin-top: 0; padding: 0; width: 224px; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-three-column .f-sub-column.f-col-3 { display: flex; width: auto; } }

.f-idea-page-wrapper .f-two-column-hero { background: #fff; border-radius: 4px; width: 1144px; }

.f-idea-page-wrapper .f-two-column-hero .f-card-voting-wrapper { left: 0; }

.f-idea-page-wrapper .f-two-column-no-image { background: #fff; border-radius: 4px; padding-left: 40px; position: relative; width: 1144px; }

.f-idea-page-wrapper .f-two-column-no-image .f-idea-votes { left: -8px; position: absolute; top: 56px; }

.f-idea-page-wrapper .f-idea-columns { display: flex; padding: 16px 16px 16px 12px; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-columns { flex-direction: column-reverse; } }

.f-idea-page-wrapper .f-idea-details { align-items: flex-start; display: flex; flex-direction: column; }

.f-idea-page-wrapper .f-detail-heading { font-size: 14px; font-weight: 600; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-idea-row, .f-idea-page-wrapper .f-idea-inner-row { align-items: flex-start; } }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-row { align-items: flex-start; flex-direction: column; }
  .f-idea-page-wrapper .f-idea-row-mobile { flex-direction: row; }
  .f-idea-page-wrapper .f-idea-row-mobile .f-idea-column, .f-idea-page-wrapper .f-idea-row-mobile [class*='f-idea-column-'] { width: 50%; }
  .f-idea-page-wrapper .f-idea-column, .f-idea-page-wrapper [class*='f-idea-column-'] { max-width: 100%; width: 100%; }
  .f-idea-page-wrapper .f-idea-column + .f-idea-column, .f-idea-page-wrapper [class*='f-idea-column-'] + .f-idea-column { margin-left: 0; } }

@media (max-width: 767px) { .f-idea-page-wrapper .f-idea-row { padding: 0 16px; } }

.f-idea-page-wrapper .f-component { margin-bottom: 16px; position: relative; }

.f-idea-page-wrapper .f-idea-header { display: flex; flex-direction: column; padding-top: 32px; position: relative; width: 100%; }

.f-idea-page-wrapper .f-idea-header.f-idea-header-small, .f-idea-page-wrapper .f-idea-header.f-idea-header-medium, .f-idea-page-wrapper .f-idea-header.f-idea-header-large { margin-bottom: 32px; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-header.f-idea-header-small, .f-idea-page-wrapper .f-idea-header.f-idea-header-medium, .f-idea-page-wrapper .f-idea-header.f-idea-header-large { margin-bottom: 16px; } }

.f-idea-page-wrapper .f-idea-header .f-component { margin-bottom: 0; }

.f-idea-page-wrapper .f-component-title { color: #444647; display: block; font-size: 16px; font-weight: 700; padding: 0 0 8px; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-component-title { font-size: 14px; } }

.f-idea-page-wrapper .f-idea-column-right-body .f-component-title { font-size: 14px; }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-idea-title { margin-top: 16px; } }

@media (min-width: 768px) and (max-width: 1023px) { .f-idea-page-wrapper .f-idea-title { margin-top: 16px; } }

.f-idea-page-wrapper .f-idea-extras { align-items: flex-start; flex-direction: row; height: 24px; justify-content: flex-end; padding-top: 6px; position: absolute; right: 34px; top: 32px; width: auto; }

.f-idea-page-wrapper .f-idea-extras > div:last-of-type { margin-right: 0; }

.f-idea-page-wrapper .f-idea-extras + .f-idea-inner-row { height: 100%; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-extras { position: relative; right: 0; top: 38px; } }

.f-idea-page-wrapper .f-idea-header-large .f-idea-extras { padding-top: 0; top: 0; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-header-large .f-idea-extras { position: relative; top: 40px; } }

.f-idea-page-wrapper .f-idea-header-large .f-idea-inner-row .f-submitter { margin-bottom: auto; }

.f-idea-page-wrapper .f-idea-header-large .f-idea-inner-row .f-idea-column { height: 100%; }

.f-idea-page-wrapper .f-idea-header-large .f-idea-inner-row .f-idea-column.f-idea-column-height-auto { height: auto; }

.f-idea-page-wrapper .f-idea-header-large .f-idea-title { margin-top: 32px; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-header-large .f-idea-title { margin-top: 16px; } }

.f-idea-page-wrapper .f-idea-header-medium .f-idea-extras { top: -6px; }

@media (max-width: 1023px) { .f-idea-page-wrapper .f-idea-header-medium .f-idea-extras { position: relative; right: 0; top: 34px; } }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-idea-header-medium.f-idea-header { margin-bottom: 16px; } }

@media (min-width: 768px) and (max-width: 1023px) { .f-idea-page-wrapper .f-idea-header-small { padding-top: 0; } }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-wrapper .f-idea-header-small { padding-top: 0; } }

.f-idea-page-wrapper .f-idea-header-small .f-idea-title { margin-bottom: 6px; }

.f-idea-page-wrapper .f-idea-header-small .f-idea-extras { padding-top: 0; }

.f-idea-page-wrapper .f-idea-header-small .f-idea-row { position: initial; }

.f-idea-page-wrapper .f-idea-header-small .f-row-align-bottom { flex-direction: row; }

.f-idea-page-wrapper .f-idea-header .fractal-widget-gigApplication { font-weight: 700; margin-top: 24px; }

.f-idea-page-wrapper .fractal-widget-gigApplication { margin: 12px 0 16px; }

.f-idea-page-wrapper.f-memo-record .f-idea-favorite { margin-bottom: 0; }

.f-idea-page-wrapper.f-memo-record .f-idea-dropdown { margin-bottom: -8px; }

body:not(.ReactModal__Body--open) .redactor-dropdown.redactor-dropdown-lists, body:not(.ReactModal__Body--open) .redactor-dropdown.redactor-dropdown-ai { z-index: 5; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-loading .f-idea-page-content { display: block; height: 80vh; }

.f-loading .f-idea-placeholder { animation-duration: 0.6s; animation-name: fadein; background: #f5f5f6; border-radius: 4px; min-height: 190px; }

.f-loading .f-idea-placeholder.f-idea-header { margin-top: 32px; }

.f-loading .f-idea-column { min-height: calc(80vh - 274px); }

.f-idea-page-main .f-idea-page-wrapper.f-idea-hidden { height: 60vh; min-height: 10px; overflow: hidden; }

.f-idea-page-main .f-idea-page-wrapper.f-idea-hidden .f-idea-page-content { height: 100%; margin-bottom: 32px; }

.f-idea-page-main .f-idea-page-wrapper.f-idea-hidden .f-idea-placeholder { background: #bdc3c7; }

.f-idea-page-main .f-idea-page-wrapper.f-idea-hidden .f-idea-column { height: calc(60vh - 170px); min-height: 10px; }

@keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-queuedModal .f-btn-hidden { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-missingDevQuestionsModal * { box-sizing: border-box; }

.fractal-widget-missingDevQuestionsModal .f-missing-dev-questions-modal-body { font-size: 12px; }

.fractal-widget-missingDevQuestionsModal .f-missing-dev-questions-modal-body .f-missing-dev-questions-options-container::before { content: '\A'; white-space: pre; }

.fractal-widget-missingDevQuestionsModal .f-radio-wrapper label { font-weight: normal; margin-left: 6px; margin-top: 4px; }

.fractal-widget-moveIdeaModal * { box-sizing: border-box; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body { font-size: 12px; line-height: 28px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body p { font-size: 14px; margin: 0 0 8px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .fractal-select { width: 455px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .fractal-select:active, .fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .fractal-select:focus { border: 1px solid #16a085; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .fractal-select.select-error { border: 1px solid #e74c3c; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-missing-dev-question-warning-message-wrapper { margin-top: 8px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-category-dropdown-container, .fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-pipeline-dropdown-container, .fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-status-dropdown-container { padding-bottom: 16px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-modal-checkbox-container input { margin-right: 8px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-modal-checkbox-container i { padding-left: 8px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .f-move-idea-modal-checkbox-container label { font-weight: normal; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-body .__react_component_tooltip { max-width: 480px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-progress-body { font-size: 14px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-progress-body p { font-size: 14px; margin: 0 0 16px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-progress-body .f-status-info { color: #999ea1; display: flex; justify-content: space-between; margin-top: 8px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-progress-body .f-success-container { align-items: center; border: 1px solid #27ae60; border-radius: 5px; display: flex; padding-bottom: 16px; padding-top: 16px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-move-idea-modal-progress-body .f-success-container .fa-check-circle { color: #27ae60; margin-left: 16px; margin-right: 16px; }

.fractal-widget-moveIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer .f-btn-hidden { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-queuedModal .f-btn-hidden { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-copyIdeaModal * { box-sizing: border-box; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body { font-size: 12px; line-height: 28px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body p { font-size: 14px; margin: 0 0 12px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-checkbox-container input { margin-right: 5px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-checkbox-container i { padding-left: 5px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-checkbox-container label { font-weight: normal; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-dropdown-container { padding-bottom: 20px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-dropdown-container .fractal-select { width: 455px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-dropdown-container .fractal-select:active, .fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-dropdown-container .fractal-select:focus { border: 1px solid #16a085; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-copy-idea-modal-dropdown-container .fractal-select.select-error { border: 1px solid #e74c3c; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .f-missing-dev-question-warning-message-wrapper { margin-top: 8px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-body .__react_component_tooltip { max-width: 480px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-progress-body { font-size: 14px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-progress-body p { font-size: 14px; margin: 0 0 16px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-progress-body .f-status-info { color: #999ea1; display: flex; justify-content: space-between; margin-top: 8px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-progress-body .f-success-container { align-items: center; border: 1px solid #27ae60; border-radius: 5px; display: flex; padding-bottom: 16px; padding-top: 16px; }

.fractal-widget-copyIdeaModal .f-modal-design-titleHeaderSubmitFooter-v1 .f-copy-idea-modal-progress-body .f-success-container .fa-check-circle { color: #27ae60; margin-left: 16px; margin-right: 16px; }

.fractal-widget-copyIdeaModal .f-footer .f-btn-hidden { display: none; }

.fractal-widget-missingDevQuestionsModal * { box-sizing: border-box; }

.fractal-widget-missingDevQuestionsModal .f-missing-dev-questions-modal-body { font-size: 12px; }

.fractal-widget-missingDevQuestionsModal .f-missing-dev-questions-modal-body .f-missing-dev-questions-options-container::before { content: '\A'; white-space: pre; }

.fractal-widget-missingDevQuestionsModal .f-radio-wrapper label { font-weight: normal; margin-left: 6px; margin-top: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-rooms-add-main { min-width: 380px; }

.f-rooms-add-main input { font-family: 'Lato', 'Open Sans', sans-serif; width: 100%; }

.f-rooms-add-main .f-rooms-link-name { margin-bottom: 8px; }

.f-rooms-add-main label[for='f-rooms-link-url'] span { color: #f00; }

.f-rooms-add-main label { font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; margin-bottom: 0; margin-left: 8px; }

.f-rooms-add-main h2 { font-size: 14px; line-height: 28px; }

.f-rooms-add-main .f-radio-wrapper { margin: 8px 0; }

.f-rooms-add-main .f-radio-wrapper:nth-of-type(2) { margin-bottom: 0; }

.f-rooms-add-main .f-radio-wrapper.f-radio-checked { margin-bottom: 16px; }

.f-rooms-add-main:not(.f-add-idea) .fractal-combobox { margin-left: 28px; margin-top: -10px; }

.f-rooms-add-main:not(.f-add-idea).f-add-vi3_add_whiteboard .fractal-combobox { margin-left: 0; margin-top: 0; }

.f-rooms-add-main :not(.f-rooms-link-main) .fractal-input { margin-left: 28px; margin-top: -10px; }

.f-rooms-add-main :not(.f-rooms-link-main) .fractal-input input { background-color: #fff; }

.f-rooms-add-main .f-rooms-link-main label { margin-left: 0; }

.f-rooms-link-modal { position: relative; }

.f-rooms-link-modal .ReactModal__Content { max-width: 724px; }

.f-rooms-link-modal .ReactModal__Content .f-modal-body { width: 400px; }

.f-rooms-link-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.bs .f-rooms-add-main input { font-size: 14px; }

.bs .f-rooms-add-main label { font-family: 'Lato', 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; margin-bottom: 0; margin-left: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-whiteboard-smart-matrix-modal p, .ReactModalPortal.f-whiteboard-smart-matrix-modal h2, .ReactModalPortal.f-whiteboard-smart-matrix-modal span, .ReactModalPortal.f-whiteboard-smart-matrix-modal input { font-family: Lato, 'Open Sans', arial, sans serif; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .ReactModal__Content { border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); width: 500px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-modal { padding: 0 24px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-modal h2 { font-size: 14px; font-weight: 600; line-height: 20px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-modal p { font-size: 14px; line-height: 20px; margin-top: 4px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-modal a { color: #3498db; text-decoration: none; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-group { margin-bottom: 16px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-matrix-name { background-color: #fff; margin-top: 12px; width: 100%; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-axis-label { font-size: 14px; font-weight: 600; margin-right: 8px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-axis { align-items: center; display: flex; margin-top: 14px; max-height: 32px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-axis .fractal-combobox .f-combobox-input-wrapper .f-combobox-input { width: 208px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-custom-axis-label-error { border-color: #e74c3c; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-custom-axis { align-items: flex-end; display: flex; flex-direction: column; margin-left: 8px; transform: translate(0, 7px); }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-custom-axis-char-count { color: #999ea1; font-size: 10px; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-custom-axis-char-count.f-custom-axis-max-length { color: #e74c3c; }

.ReactModalPortal.f-whiteboard-smart-matrix-modal .f-smart-matrix-connect .fractal-combobox { margin-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-send-to-whiteboard-canvas-modal .f-modal-design-titleHeaderSubmitFooter-v1 { max-height: 75vh; overflow: auto; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-modal-container { list-style-type: none; width: 400px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-modal-container ul { list-style-type: none; margin-bottom: 12px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-modal-container li { margin-bottom: 0; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-modal-container .f-send-to-whiteboard-list-item-2 { margin-bottom: 12px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-modal-section-header { font-weight: bold; margin-bottom: 12px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-list-item { align-items: center; display: flex; min-height: 32px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-list-item-2 { margin-left: 28px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-list-item-2 input { font-size: 14px; width: 100%; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-radio-title { margin-left: 8px; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-checkbox-title { margin-left: 0; }

.f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-radio-title:hover, .f-send-to-whiteboard-canvas-modal .f-send-to-whiteboard-checkbox-title:hover { cursor: pointer; }

.f-send-to-whiteboard-canvas-modal .f-checkbox .f-checkbox-wrapper i { position: relative; }

.f-send-to-whiteboard-canvas-modal .f-checkbox .f-checkbox-wrapper input { display: none; }

.f-send-to-whiteboard-canvas-modal .hide-element { display: none; }

.f-send-to-whiteboard-canvas-modal p { font-size: 14px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-modal-settings h2 { font-size: 14px; font-weight: bold; line-height: 20px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-modal-settings p { font-size: 14px; line-height: 20px; margin-top: 4px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-modal-settings a { color: #3498db; text-decoration: none; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-group { margin-top: 16px; }

.f-send-to-whiteboard-canvas-modal .f-matrix-name { background-color: #fff; font-size: 14px; margin-top: 12px; width: 100%; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-axis-label { font-size: 14px; font-weight: bold; margin-right: 8px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-axis { align-items: center; display: flex; margin-top: 8px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-axis .fractal-combobox .f-combobox-input-wrapper .f-combobox-input { width: 208px; }

.f-send-to-whiteboard-canvas-modal .f-smart-matrix-connect .fractal-combobox { margin-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-abuse-report-modal .f-modal-body { padding: 24px; }

.fractal-abuse-report-modal .f-modal-body span { color: #444647; font-size: 14px; font-weight: bold; }

.fractal-abuse-report-modal .redactor-styles { font-size: 14px; height: 96px; min-height: 0; padding: 8px; resize: none; width: 458px; word-break: break-word; }

.fractal-abuse-report-modal .redactor-styles p { font-size: 14px; line-height: 20px; }

.fractal-abuse-report-modal .redactor-styles-on.redactor-box { margin-top: 12px; }

.fractal-abuse-report-modal .redactor-styles-on.redactor-focus { border: 1px solid #1abc9c !important; }

.fractal-abuse-report-modal .redactor-styles-on.redactor-blur { border: 1px solid #e7e9eb; }

.fractal-abuse-report-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { height: auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-toggle { position: relative; }

.fractal-toggle .f-toggle-label { align-items: center; border-radius: 4px; cursor: pointer; display: flex; height: 32px; margin-bottom: 0; width: 60px; }

.fractal-toggle .f-toggle-label.f-toggle-off { background: #bdc3c7; }

.fractal-toggle .f-toggle-label.f-toggle-off:focus-visible:not(:active) { box-shadow: 0 0 0 2px #999ea1; outline: none; }

.fractal-toggle .f-toggle-label.f-toggle-on { background: #2ecc71; }

.fractal-toggle .f-toggle-label.f-toggle-on:focus-visible:not(:active) { box-shadow: 0 0 0 2px #1e8248; outline: none; }

.fractal-toggle .f-toggle-label.f-toggle-disabled { cursor: not-allowed; opacity: 0.7; }

.fractal-toggle .f-toggle-tooltip { font-size: 14px; }

.fractal-toggle .f-toggle-tooltip .fa-info-circle { display: block; margin-left: 8px; }

.fractal-toggle .f-toggle-tooltip .__react_component_tooltip { margin-left: 12px; max-width: 300px; }

.fractal-toggle .f-toggle-tooltip .__react_component_tooltip span { font-size: 12px; margin-left: 0; }

.fractal-toggle.f-toggle-info .fa-info-circle { color: #3498db; }

.fractal-toggle.f-toggle-small .f-toggle-label { height: 24px; width: 40px; }

.fractal-toggle.f-toggle-small .f-toggle-inner { height: 16px; width: 16px; }

.fractal-toggle.f-toggle-small .f-dropdown-btn { border: 1px solid #d5d9db; color: #444647; height: 24px; line-height: 24px; margin-left: 8px; padding: 0 8px; }

.fractal-toggle.f-toggle-medium .f-toggle-inner { height: 24px; width: 24px; }

.fractal-toggle.f-toggle-has-label { align-items: center; display: flex; }

.fractal-toggle.f-toggle-has-label span { cursor: pointer; font-size: 14px; margin-left: 8px; }

.fractal-toggle .f-toggle-input { display: none; }

.fractal-toggle .f-toggle-inner { background: #e7e9eb; border-radius: 2px; height: 24px; position: absolute; top: 4px; width: 24px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-change-template-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.f-change-template-modal h3 { margin-bottom: 4px; }

.f-change-template-modal .f-template-modal-body { color: #444647; font-family: Lato, sans-serif; font-size: 14px; letter-spacing: 0.02em; line-height: 20px; width: 644px; }

.f-change-template-modal .f-template-modal-body ul { list-style-type: none; }

.f-change-template-modal .f-template-modal-body ul > li > ul { margin-left: 26px; }

.f-change-template-modal .f-template-modal-body ul > li > ul div { font-family: Lato, sans-serif; white-space: nowrap; }

.f-change-template-modal .f-idea-template-modal-images { background-color: #e7e9eb; border-radius: 4px; display: flex; flex-direction: column; height: 222px; justify-content: space-around; padding: 24px; text-align: center; width: 100%; }

.f-change-template-modal .f-idea-template-modal-images img { height: 100%; padding: 20px; position: relative; top: -12px; }

.f-change-template-modal .f-idea-template-modal-images span { position: relative; top: -12px; }

.f-change-template-modal .f-template-modal-row { display: flex; flex-direction: row; width: 100%; }

.f-change-template-modal .f-template-modal-column { display: flex; flex-direction: column; }

.f-change-template-modal .f-template-modal-column-radios { width: 45%; }

.f-change-template-modal .f-template-modal-column-image { width: 55%; }

.f-change-template-modal .f-template-modal-subheader { color: #444647; font-family: Lato, sans-serif; font-size: 14px; letter-spacing: 0.02em; line-height: 20px; margin-bottom: 20px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-change-template-modal { /* IE10+ CSS styles go here */ }
  .f-change-template-modal .f-template-modal-column-radios li div { box-sizing: content-box; } }

@media (max-width: 767px) { .f-change-template-modal .f-template-modal-body { width: 100%; } }

@media (max-width: 640px) { .f-change-template-modal .f-modal-design-titleHeaderSubmitFooter-v1 { overflow-y: scroll; }
  .f-change-template-modal .f-template-modal-row { flex-direction: column; }
  .f-change-template-modal .f-template-modal-column-radios { margin-top: 30px; order: 1; width: 100%; }
  .f-change-template-modal .f-template-modal-column-image { order: 0; width: 100%; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-page-main .f-admin-icon { align-items: center; background-color: #bdc3c7; border-radius: 50%; bottom: 30px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); color: #fff; cursor: pointer; display: flex; font-size: 24px; height: 60px; justify-content: center; left: 30px; position: fixed; transition: box-shadow 200ms linear; width: 60px; z-index: 2; }

.f-idea-page-main .f-admin-icon:hover { box-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }

.f-idea-page-main .f-admin-wrapper { background: white; border-radius: 4px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); left: 0; padding: 8px 20px 16px; position: absolute; top: -226px; }

.f-idea-page-main .f-admin-row { align-items: center; background-color: transparent; box-sizing: border-box; color: #444647; cursor: pointer; display: flex; font-size: 13px; font-weight: bold; line-height: 18px; padding: 12px 0; text-decoration: none; width: 205px; }

.f-idea-page-main .f-admin-row.f-disabled { color: #d5d9db; cursor: not-allowed; }

.f-idea-page-main .f-admin-row .fractal-toggle { margin-right: 16px; }

.f-idea-page-main .f-admin-row i { color: #999ea1; margin: 0 8px; }

.f-idea-page-main .f-admin-rollover-arrow { height: 16px; left: 30px; overflow: hidden; position: absolute; top: 100%; transform: translateX(-50%); width: 32px; }

.f-idea-page-main .f-admin-rollover-arrow::after { background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); content: ''; height: 16px; left: 50%; position: absolute; top: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 16px; }

.f-idea-page-main .f-widget-admin-menu-divider { background: none repeat scroll 0 0 #d5d9db; color: #d5d9db; height: 1px; margin: 5px 0; width: 205px; }

.f-idea-page-main .f-widget-admin-link { color: #444647; text-decoration: none; }

.f-idea-page-main .f-widget-admin-link:hover, .f-idea-page-main .f-widget-admin-link:active, .f-idea-page-main .f-widget-admin-link:focus { color: #444647; text-decoration: none; }

.f-idea-page-main .f-widget-admin-link-item { background-color: transparent; box-sizing: border-box; color: #444647; cursor: pointer; display: block; font-size: 13px; font-weight: normal; line-height: 18px; padding: 10px 0; text-decoration: none; width: 205px; }

.f-idea-page-main .f-widget-admin-link-item:hover { background-color: #e7e9eb; }

.f-idea-page-main .f-widget-admin-link-item i { color: #797d7f; margin: 0 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-widget-editor { background: #fff; display: flex; flex-direction: column; height: 100%; padding: 16px; position: fixed; width: 298px; }

.f-widget-editor.f-nav-fixed { top: 50px; }

.f-widget-editor.f-nav-fixed .f-widgets-unavailable { margin-top: -40px; }

.f-widget-editor h2 { color: #444647; font-size: 18px; font-weight: 500; padding-bottom: 16px; }

.f-widget-editor .f-widgets-unavailable { align-items: center; color: #bdc3c7; display: flex; font-size: 18px; height: 100%; justify-content: center; left: 0; margin-top: -90px; position: absolute; width: 100%; }

.f-widget-editor .f-dropdown-btn { border: 1px solid #bdc3c7; justify-content: space-between; margin-top: 4px; }

.f-widget-editor .f-dropdown-options { width: 100%; }

.f-widget-editor .f-widget { align-items: center; background: #d5d9db; border-radius: 4px; color: #444647; cursor: move; display: flex; height: 40px; margin: 4px 0; padding-left: 16px; width: 100%; }

.f-widget-editor .f-widget.f-widget-dragging, .f-widget-editor .f-widget.f-widget-dragging:hover { background: transparent; border: 2px dashed #e7e9eb; }

.f-widget-editor .f-widget.f-widget-dragging span, .f-widget-editor .f-widget.f-widget-dragging:hover span { visibility: hidden; }

.f-widget-editor .f-widget:hover { background: #bdc3c7; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
@media (max-width: 1000px) { .fractal-idea-page #banner, .fractal-idea-page #global-nav-bar, .fractal-idea-page #global-nav, .fractal-idea-page #global-nav-placeholder, .fractal-idea-page #masthead-placeholder { display: none; } }

.view-idea-3 { height: 100%; }

.f-idea-page-main { font-family: Lato, 'Open Sans', arial, sans serif; /* START: shared across components */ /* .f-component-hover { background: $color-flatui-peterriver; border-radius: 4px; height: 8px; margin: 4px 0; width: 100%; } */ /* END: shared across components */ }

.f-idea-page-main * { box-sizing: border-box; }

.f-idea-page-main .f-dynamic-nav-wrapper { height: 66px; position: relative; z-index: 390; }

.f-idea-page-main .f-idea-page-wrapper { background-color: #fff; border-radius: 4px; font-size: 14px; margin: 24px auto 0; position: relative; width: 1200px; }

@media (max-width: 1248px) { .f-idea-page-main .f-idea-page-wrapper { margin: 0; width: calc(100% - 48px); } }

@media (max-width: 768px) { .f-idea-page-main .f-idea-page-wrapper { margin: 0; } }

@media (min-width: 1px) and (max-width: 767px) { .f-idea-page-main .f-idea-page-wrapper { width: inherit; } }

@media (min-width: 768px) and (max-width: 1023px) { .f-idea-page-main .f-idea-page-wrapper { width: inherit; } }

.f-idea-page-main .f-idea-page-wrapper.f-loading { min-height: 80vh; }

.f-idea-page-main .fractal-spinner-outer { align-items: center; display: flex; justify-content: center; }

.f-idea-page-main .f-configure-open { margin-left: 310px; }

.f-idea-page-main .f-component-configure { border: 2px dashed #bdc3c7; border-radius: 4px; cursor: auto; display: flex; flex-direction: column; justify-content: center; min-height: 45px; position: relative; }

.f-idea-page-main .f-component-draggable { cursor: move; }

.f-idea-page-main .f-component-draggable:hover { border-color: #3498db; }

.f-idea-page-main .f-container-above-tabs { position: relative; }

.f-idea-page-main .f-container-above-tabs .f-above-tabs { height: 20px; position: absolute; width: 100%; }

.f-idea-page-main .f-container-above-tabs .f-above-tabs.f-bottom-css { bottom: -35px; }

.f-idea-page-main .f-container-above-tabs .f-above-tabs.f-top-css { top: -25px; width: 99%; }

.f-idea-page-main .f-container-above-tabs .f-above-tabs.f-over::before { top: 0; }

.f-idea-page-main .f-last-area { height: 100%; width: 100%; }

.f-idea-page-main .f-last-area.f-empty-col { height: 100%; }

.f-idea-page-main .f-over::before { background: #3498db; border-radius: 4px; content: ''; height: 8px; left: 0; position: absolute; top: -12px; width: 100%; }

.f-idea-page-footer { align-items: center; background-color: #e7e9eb; display: flex; height: 132px; justify-content: center; margin-top: 24px; text-align: center; }

/* regrion: reset; don't change this, reset idential to ws_css.bix */
* { margin: 0; padding: 0; }

a { outline: none; text-decoration: none; }

a:hover { text-decoration: underline; }

/* end region */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: url(/fractal/dist/c656cbb3e8abfad0c3bc.eot); src: url(/fractal/dist/c656cbb3e8abfad0c3bc.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/172c52736bbf77fb25fa.woff) format("woff"), url(/fractal/dist/9cce1e2d75ece4d565e5.ttf) format("truetype"), url(/fractal/dist/images/d8dfb5c505d59140f2cb.svg#open_sansregular) format("svg"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url(/fractal/dist/fdf56b22f9fbdf2f583f.woff); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: bold; src: url(/fractal/dist/4900389b61d2a6bba56b.eot?v=1.1.0); src: url(/fractal/dist/4900389b61d2a6bba56b.eot?#iefix&v=1.1.0) format("embedded-opentype"), url(/fractal/dist/1a12317389afca44fc29.woff2?v=1.1.0) format("woff2"), url(/fractal/dist/08328bf7467540700abe.woff?v=1.1.0) format("woff"), url(/fractal/dist/1576987ece25952e65c5.ttf?v=1.1.0) format("truetype"), url(/fractal/dist/images/cfa6cd05c6dd58203c3d.svg#Bold) format("svg"); }

/* #region full page body */
body { background: #f5f5f6; color: #444647; }

body.fractal-body { display: flex; flex-direction: column; font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 1.42857; margin: 0; max-width: 100%; min-height: 100%; overflow-x: hidden; padding: 0; }

/* #endregion */
.vi3-nga .f-last-area { height: auto; }

.vi3-nga .f-idea-page-wrapper { border-radius: 0; }

.vi3-nga .f-edit-image-widget.f-mini-image-btn .fractal-dropdownPopout-popout-container { right: 0; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper { margin-left: 0; margin-top: 0; width: 100%; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper [class*='f-idea-column-'], .vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper .f-idea-image-container { max-width: 100%; width: 100%; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper .f-idea-column + .f-idea-column, .vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper [class*='f-idea-column-'] + .f-idea-column { margin-left: 0; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper .f-idea-image { border-radius: 0; height: 266px; object-fit: cover; width: 100%; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper .f-title-container { padding-top: 0; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper .f-idea-title { margin-top: 16px; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper.f-modern-small .f-idea-header-small { margin-bottom: 16px; padding-top: 0; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper.f-modern-small .f-idea-title { max-width: 100%; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-page-wrapper.f-modern-small .f-idea-extras { top: 38px; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-row { align-items: flex-start; flex-direction: column; }

.vi3-nga.oneCol .f-idea-page-main .f-last-area { display: none; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-extras { position: relative; right: 0; top: 42px; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-extras + .f-idea-inner-row { width: 75%; }

.vi3-nga.oneCol .f-idea-page-main .f-idea-header.f-idea-header-large { margin-bottom: 16px; }

.vi3-nga.oneCol .f-idea-page-main .f-hide-memo-record { margin-bottom: 0; top: 0; }

.vi3-nga.oneCol .f-memo-record .f-idea-header { padding-top: 16px; }

.vi3-nga.oneCol .f-memo-record .f-idea-extras { position: absolute; right: 32px; top: 38px; }

.vi3-nga.twoCol .f-idea-page-wrapper { margin-top: 0; }

.vi3-nga.twoCol .f-idea-page-main .f-hide-memo-record { margin-bottom: 0; top: 0; }

.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { color: #383838; }

.view-idea-3 + .fractal-toast a, .view-idea-3 + .fractal-toast a:hover, .view-idea-3 + .fractal-toast a:visited, .view-idea-3 + .fractal-toast a:link, .view-idea-3 + .fractal-toast a:active { color: #fff; }

.fractal-widget-gigApplication.ReactModalPortal .ReactModal__Content.ReactModal__Content--after-open { height: 495px; width: 497px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-modal { z-index: 2147483500; }

.f-idea-modal.ReactModalPortal .f-modal-design-titleHeaderSubmitFooter-v1 { height: 100%; }

.f-idea-modal .ReactModal__Content { height: 90vh; max-width: 1200px; overflow: hidden; width: 80%; }

.f-idea-modal .ReactModal__Content .f-modal-body { height: 100%; overflow: auto; padding: 0; }

.f-idea-modal .ReactModal__Content .f-footer { display: none; }

.f-idea-modal .f-idea-modal-container { height: 100%; overflow: auto; position: relative; }

.f-idea-modal .f-idea-modal-container .f-idea-page-main { height: 90%; }

.f-idea-modal .f-idea-modal-container .f-idea-page-wrapper { margin-top: 0; overflow: visible; width: inherit; }

@media (max-width: 1248px) { .f-idea-modal .f-idea-modal-container .f-idea-page-wrapper { margin: 0 auto; } }

.f-idea-modal .f-nav-idea-btn { align-items: center; border-radius: 4px; color: #fff; display: flex; font-size: 36px; height: 48px; justify-content: center; position: absolute; top: 50vh; width: 48px; z-index: 2147483600; }

.f-idea-modal .f-nav-idea-btn:hover { background-color: rgba(0, 0, 0, 0.4); }

.f-idea-modal .f-nav-idea-btn:focus { background-color: rgba(0, 0, 0, 0.6); }

.f-idea-modal .f-nav-idea-btn:active { background-color: rgba(0, 0, 0, 0.8); }

.f-idea-modal .f-nav-idea-btn.fa-chevron-left { left: 24px; }

.f-idea-modal .f-nav-idea-btn.fa-chevron-right { right: 24px; }

.f-idea-modal .f-nav-idea-btn:hover { cursor: pointer; }

@media (max-width: 767px) { .f-idea-modal .f-idea-row { padding: 0 16px; }
  .f-idea-modal .fal { display: none; } }

.webstorm-level .f-idea-modal .f-status-edit .f-dropdown-btn, .webstorm-level .f-idea-modal .f-category-edit .f-dropdown-btn { background-color: transparent; border: none; color: #797d7f; margin: 0; padding: 8px; }

.webstorm-level .f-idea-modal .f-status-edit .f-dropdown-btn:hover, .webstorm-level .f-idea-modal .f-category-edit .f-dropdown-btn:hover { background: #d5d9db; border: 1px solid #d5d9db; }

.webstorm-level .f-idea-modal .f-status-edit .f-dropdown-btn:focus, .webstorm-level .f-idea-modal .f-category-edit .f-dropdown-btn:focus { background: #fff; border: 1px solid #2ecc71; box-shadow: 0 0 0 2px transparent; outline: none; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn { align-items: center; border-radius: 4px; color: #797d7f; cursor: pointer; display: flex; font-size: 14px; font-weight: 500; height: 32px; justify-content: center; line-height: 32px; padding: 0 16px; background: transparent; border: none; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn i { margin-left: 10px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn .fa-ellipsis-h { font-size: 14px; margin: 0; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn:hover { background: #e7e9eb; border-color: #e7e9eb; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn:focus:not(.f-btn-primary) { background-color: #bdc3c7; border-color: #999ea1; color: #fff; outline: none; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn:focus:not(.f-btn-primary):not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn:active:not(.f-btn-primary) { background: #999ea1; box-shadow: none; color: #fff; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn:disabled, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-disabled { background: #fff; color: #bdc3c7; cursor: not-allowed; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary) { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):active, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):focus, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open:not(.f-btn-primary):focus:not(:active) { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open.f-btn-primary { background: #1e8248; border-color: #1e8248; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open.f-btn-primary:active, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open.f-btn-primary:focus, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-open.f-btn-primary:focus:not(:active) { background: #1e8248; border-color: #1e8248; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round { border-radius: 50%; color: #fff; height: 24px; padding: 0; width: 24px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round span { display: flex; font-size: 14px; margin-bottom: 8px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round .fa-chevron-down { display: none; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round:hover, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round.f-dropdown-open, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round:focus { background-color: rgba(0, 0, 0, 0.25); border-color: transparent; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round:hover:not(:active), .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round.f-dropdown-open:not(:active), .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-round:focus:not(:active) { box-shadow: none; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-square { align-items: center; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; height: 32px; width: 32px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-square i { font-size: 14px; margin-left: 0; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-btn-square:focus { color: #797d7f; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-dropdown-combined { border-radius: 0 4px 4px 0; margin-left: 0; padding: 6px 16px 6px 4px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn.f-btn-borderless { border: none; }

@media (max-width: 560px) { .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn { padding: 0 4px; }
  .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-btn i.fa-globe-americas { margin-left: 5px; } }

.webstorm-level .f-idea-modal .f-idea-comments .fa { font-family: 'Font Awesome 5 Pro'; font-weight: 400; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options { background: #fff; border: 1px solid #e7e9eb; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); cursor: pointer; list-style: none; margin-top: 4px; overflow: auto; padding-bottom: 8px; padding-top: 8px; position: absolute; right: 0; top: 32px; width: 197px; z-index: 100001; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options.f-options-nested { overflow: initial; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li { align-items: center; box-sizing: border-box; display: flex; font-size: 14px; font-weight: 500; height: 32px; line-height: 32px; padding-left: 16px; white-space: nowrap; width: 100%; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li span { overflow: hidden; text-overflow: ellipsis; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-selected-option { background: #e7e9eb; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-selected-option.f-warning { background: rgba(231, 76, 60, 0.2); }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li:hover, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li:focus { background: #e7e9eb; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-disabled, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-disabled:hover, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-disabled:focus { background: #fff; color: #999ea1; cursor: not-allowed; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-warning { color: #e74c3c; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-dropdown-divider { border-top: 1px solid #d5d9db; cursor: default; height: auto; margin: 8px 0 8px 16px; padding: 0; pointer-events: none; width: calc(100% - 32px); }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-dropdown-divider:hover, .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li.f-dropdown-divider.f-selected-option { background: #fff; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options li i { align-items: center; display: inline-flex; font-weight: normal; height: 24px; justify-content: center; margin-right: 4px; width: 24px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options > li > a:hover { background-color: transparent; }

@media (max-width: 560px) { .webstorm-level .f-idea-modal .f-idea-comments .f-dropdown-options { right: auto; } }

.webstorm-level .f-idea-modal .f-idea-comments div[data-class='f-comment-container'] .f-dropdown-btn { height: 24px; padding: 0 8px; }

.webstorm-level .f-idea-modal .f-idea-comments .f-comment-input .f-dropdown-btn { height: 32px; padding: 0; }

.webstorm-level .f-idea-modal .f-idea-comments .f-comment-input .f-dropdown-options { width: 324px; }

@media (max-width: 410px) { .webstorm-level .f-idea-modal .f-idea-comments .f-comment-input .f-dropdown-options { width: 70vw; } }

.webstorm-level .f-idea-modal .f-idea-comments .f-comment-input .f-dropdown-options li { height: auto; padding: 8px 16px; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection) { background: #fff; border: 1px solid #bdc3c7; color: #797d7f; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):hover { background: #e7e9eb; border-color: #bdc3c7; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):hover:visited { color: #797d7f; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):active, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-btn-active, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-btn-active:focus, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):focus-visible { border-color: transparent; color: #fff; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):focus-visible { background: #bdc3c7; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):focus-visible:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):active, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-btn-active, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-btn-active:focus { background: #999ea1; box-shadow: none; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-btn-disabled, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection)[disabled] { background: #f5f5f6; border: none; color: #bdc3c7; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):focus, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):hover, .webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection):active { border-width: 1px; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-idea-favorite i { margin: 0; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-view-idea-up-vote.f-voted { background-color: #b4eccc; border-color: #2ecc71; color: #2ecc71; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-promote-btn.f-voted { background: #d5f5e3; border-color: #2ecc71; color: #2ecc71; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-view-idea-down-vote.f-voted { background-color: #f7bfb9; border-color: #e74c3c; color: #e74c3c; }

.webstorm-level .f-idea-modal .f-btn-standard:not(.f-memo-review-selection).f-idea-favorite-selected { background: #fcf3cf; border-color: #f1c40f; color: #f1c40f; }

.ReactModal__Body--open .react-datepicker-popper { z-index: 2147483501; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate .f-slate-subtoolbar { bottom: -32px; height: 32px; left: 0; position: absolute; width: 100%; z-index: 900; }

@media (max-width: 1110px) { .f-slate .f-slate-subtoolbar.f-slate-show-writeit, .f-slate .f-slate-subtoolbar.f-slate-show-xray, .f-slate .f-slate-subtoolbar.f-slate-show-silentread { position: fixed; top: 135px; } }

@media (max-width: 579px) { .f-slate .f-slate-subtoolbar.f-slate-show-writeit, .f-slate .f-slate-subtoolbar.f-slate-show-xray, .f-slate .f-slate-subtoolbar.f-slate-show-silentread { position: absolute; top: 80px; } }

@media (max-width: 363px) { .f-slate .f-slate-subtoolbar.f-slate-show-writeit, .f-slate .f-slate-subtoolbar.f-slate-show-xray, .f-slate .f-slate-subtoolbar.f-slate-show-silentread { top: 117px; } }

.f-slate .f-slate-subtoolbar .f-slate-toolbar-content { align-items: center; display: flex; height: 32px; justify-content: space-between; margin: 0 auto; width: 680px; }

@media (max-width: 810px) { .f-slate .f-slate-subtoolbar .f-slate-toolbar-content { justify-content: flex-start; } }

.f-slate .f-slate-subtoolbar .f-slate-toolbar-title { font-size: 14px; font-weight: 700; }

.f-slate .f-slate-subtoolbar .f-slate-toolbar-title i { font-size: 16px; margin-right: 8px; }

.f-slate .f-slate-subtoolbar .f-slate-toolbar-title i.fa-question-circle { font-size: 14px; margin-left: 8px; margin-top: 1px; }

.f-slate .f-slate-subtoolbar .__react_component_tooltip { line-height: 20px; max-width: 386px; }

.f-slate .f-slate-subtoolbar .fractal-button { font-size: 14px; margin: 0; }

.f-slate .f-slate-subtoolbar .fractal-button.f-btn-modal-toggle { height: 24px; margin-left: 4px; padding: 0 8px; }

.f-slate .f-slate-subtoolbar.f-slate-xray-toolbar { background-color: #bdc3c7; }

.f-slate .f-slate-subtoolbar.f-slate-writeit-toolbar { background-color: #d2b4de; }

.f-slate .f-slate-subtoolbar .fa-question-circle { cursor: pointer; }

.f-slate .f-slate-subtoolbar.f-slate-silentread-toolbar { background: #76d7c4; }

.f-slate-collaborators { display: flex; }

.f-slate-collaborators .f-slate-collaborators-more { color: #3498db; cursor: pointer; margin-left: 8px; margin-top: 2px; }

.f-slate-collaborators-modal { display: block; font-family: Lato, sans-serif; margin: 16px 16px 0; min-height: 368px; width: 368px; }

.f-slate-collaborators-modal .f-member-modal-member { align-items: center; display: flex; flex-direction: row; margin-bottom: 12px; }

.f-slate-collaborators-modal .f-member-name { font-size: 14px; font-weight: normal; margin-left: 4px; }

.f-slate .f-has-comments .f-slate-subtoolbar .f-slate-toolbar-content { margin-left: 103px; width: 1082px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate-comment-input-body { padding: 8px 12px; }

.f-slate-comment-input-body.f-slate-comment-min-height { min-height: 38px; }

.f-slate-comment-input-body.f-slate-comment-min-height .f-slate-comment-input-placeholder .f-comment-input-placeholder { color: #999ea1; display: inline-block; font-size: 14px; }

.f-slate-comment-input-body a, .f-slate-comment-input-body a:active, .f-slate-comment-input-body a:visited { color: #2f89cc; }

.f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist { min-width: 360px; width: 360px; }

.f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel .f-comment-input-memberlist .f-comment-input-member { min-width: 360px; width: 360px; }

.f-slate-comment-input-body .f-slate-comment-input { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; padding: 0 12px; }

.f-slate-comment-input-body .f-slate-comment-input:focus { border-color: #1abc9c; box-shadow: none !important; outline: none !important; }

.f-slate-comment-input-body .f-slate-comment-input.warning-border { border: 1px solid #e74c3c; }

.f-slate-comment-input-body .f-slate-comment-input::placeholder { color: #999ea1; }

.f-slate-comment-input-body .f-slate-comment-input .f-comment-input-placeholder, .f-slate-comment-input-body .f-slate-comment-input .f-comment-input-textarea { padding: 8px 0; }

.f-slate-comment-input-body .f-comment-input .f-comment-input-tagging-panel { transform: translateY(-20px); }

.f-slate-comment .f-slate-comment-header .f-btn-borderless { margin: 0; }

.f-slate-comment .f-slate-comment-header .fractal-button.f-dropdown-btn.f-dropdown-open.f-dropdown-btn-square.f-btn-borderless { background: #999ea1; border-color: #999ea1; box-shadow: none; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-comment-popovers { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; left: 50%; margin-left: 385px; margin-top: 32px; min-height: calc(100vh - 88px); position: absolute; top: 0; width: 385px; z-index: 3; }

.f-comment-popovers.f-has-comments { margin-left: 120px; width: 385px; }

.f-slate-fs-comment-btn { position: absolute; z-index: 999999; }

.f-print-layout .f-comment-popovers .f-slate-fs-comment-btn { left: -64px; }

.f-print-layout .f-comment-popovers.f-has-comments { margin-left: 146px; }

.f-print-layout .f-comment-popovers.f-has-comments .f-slate-fs-comment-btn { left: -35px; }

.f-slate-comment-btn { align-items: center; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); display: flex; height: 40px; justify-content: center; left: 0; margin: 0; padding: 0; width: 40px; }

.f-slate-comment-btn .fa-comment-alt-medical { color: #2ecc71; font-size: 16px; }

.f-slate-comment-thread-popover { background: #fff; border-radius: 4px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); left: 0; margin: 4px auto 0; position: relative; transition: margin 0.2s, top 0.33s; width: 385px; z-index: 1; }

.f-slate-comment-thread-popover.f-slate-comment-input-popover { margin-left: -40px; }

.f-slate-comment { padding-bottom: 4px; }

.f-slate-comment + .f-slate-comment { border-top: 1px solid #e7e9eb; }

.f-dropdown-btn-round { background: #fff; border-radius: 50%; color: #000; height: 24px; width: 24px; }

.f-slate-comment-header { align-items: center; display: flex; justify-content: space-between; padding: 12px 12px 0; }

.f-slate-comment-user { align-items: center; display: flex; }

.f-slate-comment-user .f-member-image { margin-right: 8px; }

.f-slate-comment-user-name { color: #2f89cc; font-size: 14px; font-weight: bold; margin-right: 12px; }

.f-slate-comment-date { color: #999ea1; font-size: 14px; }

.f-slate-comment-body { color: #444647; font-size: 14px; padding: 12px; }

.f-slate-comment-reply-container { border-top: 1px solid #e7e9eb; }

.f-slate-comment-reply-container input { height: 32px; }

.f-slate-comment-input-container .fractal-input { padding: 12px; }

.f-slate-comment-input-container input { width: 100%; }

.f-slate-comment-input-footer { align-items: center; display: flex; flex-direction: row; justify-content: flex-end; padding: 0 12px 12px; }

.f-btn-primary { margin-bottom: 0; margin-top: 0; }

.f-btn-sm { height: 24px; line-height: 24px; margin: 0 0 0 12px; }

.f-slate-comment-reply-btn { margin-right: 0; }

.f-slate-comment-reply-container .f-slate-comment-input-placeholder .f-comment-input-placeholder { color: #999ea1; display: inline-block; font-size: 14px; }

.f-slate-comment-reply-container .f-slate-comment-input-body { min-height: 38px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-message-modal .ReactModal__Content { border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); width: 400px; }

.ReactModalPortal.f-message-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.ReactModalPortal.f-message-modal .f-memo-message-modal { padding: 24px 24px 32px; }

.ReactModalPortal.f-message-modal .f-memo-message-modal p { margin-bottom: 12px; }

.ReactModalPortal.f-message-modal .f-memo-message-modal p:last-child { margin-bottom: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate-add-image-modal { display: flex; }

.f-slate-add-image-modal .f-tabs-container { width: 100%; }

.f-slate-add-image-modal .f-tab-underline { font-size: 14px; }

.f-slate-add-image-modal .f-unsplash-item { list-style: none; }

.f-slate-add-image-modal .f-dropzone-wrapper { height: inherit; }

.f-slate-add-image-modal .f-dropzone-description { display: none; }

.f-add-image-modal .ReactModal__Content .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; width: 100%; }

.f-add-image-modal .ReactModal__Content .f-modal-body { padding: 16px; width: 624px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
@font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 400; src: url(/fractal/dist/fccf8d1e71f52fb89f4f.woff2) format("woff2"); }

@font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; src: url(/fractal/dist/19380f938f389762a8be.woff2) format("woff2"); }

@font-face { font-family: 'Balsamiq Sans'; font-style: normal; font-weight: 400; src: url(/fractal/dist/0856531d50c3c2b0b724.woff2) format("woff2"); }

@font-face { font-family: 'Gloria Hallelujah'; font-style: normal; font-weight: 400; src: url(/fractal/dist/607c8adbe0843ccb0b12.woff2) format("woff2"); }

@font-face { font-family: 'Indie Flower'; font-style: normal; font-weight: 400; src: url(/fractal/dist/f403a749172b7e38bdfc.woff2) format("woff2"); }

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url(/fractal/dist/65e877e527022735c1a1.woff2) format("woff2"); }

@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url(/fractal/dist/7f65400c6b61f9dd1187.woff2) format("woff2"); }

@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; src: url(/fractal/dist/5d8da75aca3a31f37c5f.woff2) format("woff2"); }

@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: url(/fractal/dist/ae5963c91e524f379bf2.woff2) format("woff2"); }

@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; src: url(/fractal/dist/156353f656cd9a34cd80.woff2) format("woff2"); }

@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: url(/fractal/dist/bd982c23c848c3486469.woff2) format("woff2"); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(/fractal/dist/4673b4537a84c7f7a130.woff2) format("woff2"); }

@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: url(/fractal/dist/535bc89d4af715503b01.woff2) format("woff2"); }

@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: url(/fractal/dist/839e5a2027e92f878f78.woff2) format("woff2"); }

@font-face { font-family: 'Yanone Kaffeesatz'; font-style: normal; font-weight: 400; src: url(/fractal/dist/19044fddda80838dd60d.woff2) format("woff2"); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-slate { display: flex; flex-direction: column; font-family: 'Lato'; height: 100%; }

.f-slate * { box-sizing: border-box; }

.f-slate .f-hidden { visibility: hidden; }

.f-slate .fractal-spinner-outer { align-items: center; display: flex; height: 100%; justify-content: center; }

.f-slate .f-slate-container { color: #000; padding-bottom: 200px; position: relative; top: 90px; width: 100%; }

.f-slate .f-slate-container.f-print-layout:not(.f-has-pages) { background: #f5f5f6; }

.f-slate .f-slate-container.f-print-layout:not(.f-has-pages) [data-slate-editor] { background: #fff; border-radius: 4px; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25); margin: 12px 0 0; padding: 52px 64px 64px; width: 680px; }

.f-slate .f-slate-container.f-print-layout.f-has-pages { background: #f5f5f6; counter-reset: page; }

.f-slate .f-slate-container.f-print-layout.f-has-pages .f-slate-page { background: #fff; border-radius: 4px; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25); height: 1056px; margin-top: 12px; overflow-x: hidden; position: relative; width: 680px; }

.f-slate .f-slate-container.f-print-layout.f-has-pages.f-show-pages .f-slate-page::after { bottom: 16px; color: #797d7f; content: counter(page); counter-increment: page; left: 16px; position: absolute; }

.f-slate .f-slate-container.f-web-layout.f-has-pages { counter-reset: page; }

.f-slate .f-slate-container.f-web-layout.f-has-pages .f-slate-page { background: #fff; height: 1056px; margin-top: 12px; position: relative; width: 680px; }

.f-slate .f-slate-container.f-web-layout.f-has-pages.f-show-pages .f-slate-page::after { bottom: 16px; color: #797d7f; content: counter(page); counter-increment: page; left: 16px; position: absolute; }

.f-slate .f-slate-container.f-show-subtoolbar { top: 120px; }

.f-slate .f-slate-header { border-bottom: 1px solid transparent; padding: 32px 32px 0; }

.f-slate .f-slate-header.f-focused { border-bottom: 1px dashed #bdc3c7; }

.f-slate .f-slate-cursor-overlay { display: flex; justify-content: center; min-height: calc(100vh - 88px); width: 100%; }

.f-slate .f-slate-cursor-overlay.f-has-comments { transform: translateX(-210px); }

.f-slate [data-slate-placeholder] { left: 0; max-width: inherit !important; top: 0; width: 250px !important; }

.f-slate .f-web-layout:not(.f-has-pages) [data-slate-editor] { margin: 0; padding: 64px; width: 680px; }

.f-slate [data-slate-editor] blockquote { border-left: 2px solid #d5d9db; color: #bdc3c7; font-style: italic; margin-left: 0; margin-right: 0; padding-left: 10px; }

.f-slate [data-slate-editor] :not(pre) > code { background-color: #e7e9eb; font-family: monospace; padding: 3px; }

.f-slate [data-slate-editor] table td.f-cell-selected, .f-slate [data-slate-editor] table th.f-cell-selected { box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.2); }

.f-slate [data-slate-editor] table td.f-resize-cursor, .f-slate [data-slate-editor] table th.f-resize-cursor { cursor: col-resize; }

.f-slate .f-has-pages .f-slate-page-inner > [data-slate-node='element']:not(.f-slate-page) { padding: 0 64px; }

.f-slate .f-has-pages .f-slate-page-inner > [data-slate-node='element']:not(.f-slate-page).f-slate-header { margin-bottom: 32px; padding: 32px 64px 0; }

.f-slate .f-has-pages .f-slate-page-inner > :not(.f-slate-header):first-child { padding-top: 52px; }

.f-slate .f-resize-handle { border-right: 2px solid transparent; cursor: col-resize; display: block; position: absolute; right: 0; top: 0; width: 5px; z-index: 1; }

.f-slate .f-slate-whiteboard-link { align-self: flex-start; background: #d5d9db; border-radius: 4px; color: #444647; cursor: pointer; display: inline-flex; flex-direction: column; padding: 2px; position: relative; vertical-align: sub; width: 380px; }

.f-slate .f-slate-whiteboard-link.f-no-access-whiteboard { width: auto; }

.f-slate .f-slate-whiteboard-link .f-slate-whiteboard-title-wrapper { display: flex; padding: 2px; }

.f-slate .f-slate-whiteboard-link .f-slate-whiteboard-icon { background-position: center; background-size: cover; margin-right: 4px; }

.f-slate .f-slate-whiteboard-link .f-slate-whiteboard-link-image { background-position: center; background-repeat: no-repeat; background-size: cover; border: 1px solid #d5d9db; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-sizing: border-box; height: 160px; position: relative; width: 100%; }

.f-slate .f-slate-cell-toolbar { background: #fff; border: 1px solid #e7e9eb; border-radius: 4px; display: flex; flex-direction: column; padding: 16px 0; position: absolute; width: 193px; z-index: 1; }

.f-slate .f-slate-cell-toolbar button { border: none; border-radius: 0; box-sizing: content-box; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 12px; height: auto; margin: 0; padding: 4px 16px; text-align: left; }

.f-slate .f-slate-cell-toolbar button.last { margin-bottom: 8px; }

.f-slate .f-slate-cell-toolbar hr { background: #bdc3c7; border: none; height: 1px; margin: 2px 8px; }

.f-slate .f-slate-cell-toolbar hr + button { margin-top: 8px; }

.f-slate .f-slate-toolbar .fractal-combobox { margin-left: 6px; }

.f-slate .f-slate-toolbar .fractal-combobox .f-combobox-input:focus, .f-slate .f-slate-toolbar .fractal-combobox .f-combobox-input :focus-visible { border-width: 1px; }

.f-slate .f-slate-toolbar .fractal-combobox .f-combobox-input-wrapper { margin-right: 6px; }

.f-slate .f-slate-toolbar .f-split-menu.f-single-split { flex: 0 0 auto; }

.f-slate .f-slate-toolbar .f-split-menu.f-single-split button { margin-left: 0; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn { color: #444647; padding: 0 8px; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn .fa-robot { margin-right: 4px; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested { width: 220px; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested li.f-selected-option { background: transparent; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested li.f-selected-option:hover { background: #e7e9eb; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested li > span { align-items: center; display: flex; justify-content: space-between; padding-right: 8px; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested .f-hotkeys { align-items: center; font-size: 12px; width: auto; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-btn + div .f-options-nested .fa-angle-up { margin-left: 4px; width: auto; }

.f-slate .f-slate-toolbar .f-split-menu .f-ai-right-menu ul { right: -80px; }

@media (min-width: 1031px) and (max-width: 1088px) { .f-slate .f-slate-toolbar .f-split-menu .f-ai-right-menu ul { right: 0; } }

.f-slate .f-slate-toolbar .f-divider { border-left: 1px solid #bdc3c7; height: 20px; margin: 0 4px; }

.f-slate .f-slate-toolbar .f-slate-format-container .f-combobox-input-wrapper { max-width: 120px; width: calc(18vw - 20px); }

.f-slate .f-slate-toolbar .f-slate-format-container input { width: 100%; }

.f-slate .f-slate-toolbar .f-slate-font-container .f-combobox-input-wrapper { max-width: 168px; width: calc(18vw - 20px); }

.f-slate .f-slate-toolbar .f-slate-font-container input { width: 100%; }

.f-slate .f-slate-toolbar .f-slate-font-size-input .f-combobox-input-wrapper { width: 64px; }

@media (max-width: 550px) { .f-slate .f-slate-toolbar .f-slate-font-size-input .f-combobox-input-wrapper { min-width: 50px; width: 50px; } }

.f-slate .f-slate-toolbar .f-slate-font-size-input input { width: 100%; }

.f-slate .f-slate-thread { background: rgba(241, 196, 15, 0.4); }

.f-slate .f-slate-thread.f-active { background: #f1c40f; }

.f-slate .f-slate-selection { background: #e7e9eb; }

.f-slate .f-slate-image-container { display: inline-block; position: relative; }

.f-slate .f-slate-image-loader { align-items: center; display: flex; justify-content: center; }

.f-slate .f-slate-image-resize { display: block; left: 0; max-width: 100%; position: absolute; top: 0; }

.f-slate .f-slate-image-resize .f-img-resize-handle { color: #bdc3c7; display: block; position: absolute; z-index: 1; }

.f-slate .f-slate-image-resize .f-resize-nw { cursor: nw-resize; left: -6px; top: -6px; }

.f-slate .f-slate-image-resize .f-resize-n { cursor: n-resize; left: 50%; margin: 0 auto; top: -6px; }

.f-slate .f-slate-image-resize .f-resize-ne { cursor: ne-resize; right: -6px; top: -6px; }

.f-slate .f-slate-image-resize .f-resize-w { cursor: w-resize; left: -6px; margin: auto 0; top: 50%; }

.f-slate .f-slate-image-resize .f-resize-e { cursor: e-resize; margin: auto 0; right: -6px; top: 50%; }

.f-slate .f-slate-image-resize .f-resize-sw { bottom: -6px; cursor: sw-resize; left: -6px; }

.f-slate .f-slate-image-resize .f-resize-s { bottom: -6px; cursor: s-resize; left: 50%; margin: 0 auto; }

.f-slate .f-slate-image-resize .f-resize-se { bottom: -6px; cursor: se-resize; right: -6px; }

.f-slate .f-slate-image { display: block; margin-right: 6px; }

.f-slate .f-slate-image-delete { background-color: #fff; left: 0.5em; position: absolute; top: 0.5em; }

.f-slate .f-color-picker-group { box-shadow: none; display: inline-block; vertical-align: bottom; }

.f-slate .f-combobox-input-wrapper { margin-right: 8px; }

.f-slate .f-slate-mention .member-img, .f-slate .f-slate-mention .member-initial { height: 20px; user-select: none; width: 20px; }

.f-slate-member-tag-portal { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); padding: 8px 0; position: absolute; z-index: 1; }

.f-slate-member-tag-portal .f-slate-member-tag-item { align-items: center; display: flex; padding: 4px 13px; }

.f-slate-member-tag-portal .f-slate-member-tag-item span { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 14px; }

.f-slate-member-tag-portal .f-slate-member-tag-item.f-selected { background: #d5d9db; }

.f-slate-member-tag-portal .f-slate-member-tag-item:hover { background: #e7e9eb; }

.f-slate-member-tag-portal .member-image-v1 { margin-right: 8px; }

.f-slate-member-tag-portal .member-image-v1 div.member-initial, .f-slate-member-tag-portal .member-image-v1 .member-img { height: 24px; width: 24px; }

.f-slate-link-popover, .f-slate-table-popover { align-items: center; background: #fff; border-radius: 4px; box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); display: flex; padding: 8px; z-index: 10; }

.f-slate-link-popover .fractal-button, .f-slate-table-popover .fractal-button { margin: 0 8px; }

.f-slate-link-popover .f-slate-unlink-btn, .f-slate-table-popover .f-slate-unlink-btn { margin-left: 0; }

.f-slate-table-popover { flex-direction: column; }

.f-slate-table-popover .f-slate-table-count { margin-top: 4px; }

.f-slate-table-selection { border-right: 1px solid #bdc3c7; border-top: 1px solid #bdc3c7; }

.f-slate-table-selection .f-slate-select-row { display: flex; }

.f-slate-table-selection .f-slate-select-cell { border-bottom: 1px solid #bdc3c7; border-left: 1px solid #bdc3c7; height: 16px; width: 16px; }

.f-slate-table-selection .f-slate-select-cell.selected { background: rgba(52, 152, 219, 0.2); }

.f-slate-toolbar > .f-btn-subtle, .f-slate-toolbar .f-memo-additional-btns > .f-btn-subtle { height: 32px; margin: 0 2px; padding: 0; width: 32px; }

.f-slate-toolbar > .f-btn-subtle:not(.f-btn-active), .f-slate-toolbar .f-memo-additional-btns > .f-btn-subtle:not(.f-btn-active) { color: #444647; }

.f-slate-toolbar > .f-btn-subtle.f-history-active, .f-slate-toolbar .f-memo-additional-btns > .f-btn-subtle.f-history-active { background-color: #bdc3c7; }

.f-slate-toolbar > .f-btn-subtle.f-btn-silent-read.f-btn-selected, .f-slate-toolbar .f-memo-additional-btns > .f-btn-subtle.f-btn-silent-read.f-btn-selected { background-color: rgba(26, 188, 156, 0.6); }

.f-slate-toolbar > .f-btn-subtle:nth-child(1) { margin-left: 0; }

.f-slate-toolbar > .f-btn-subtle:last-of-type { margin-right: 0; }

.f-slate-toolbar .f-split-menu .f-dropdown-btn.f-dropdown-disabled { background: #f5f5f6; color: #797d7f; opacity: 0.6; }

.f-slate-toolbar .f-split-menu .f-dropdown-btn.f-dropdown-disabled:hover { cursor: not-allowed; }

.f-slate-access-denied { align-items: center; display: flex; height: calc(100% + 48px); justify-content: center; }

.memo-body [data-slate-editor], .userhome-body [data-slate-editor] { font-size: 12px; }

.memo-body .__react_component_tooltip, .userhome-body .__react_component_tooltip { box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }

.memo-body .__react_component_tooltip.show, .userhome-body .__react_component_tooltip.show { opacity: 1; }

.memo-body .__react_component_tooltip.type-light.place-bottom::before, .userhome-body .__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.memo-body .__react_component_tooltip.type-light.place-top::before, .userhome-body .__react_component_tooltip.type-light.place-top::before { border-top: 8px solid rgba(0, 0, 0, 0.1); }

.memo-body .__react_component_tooltip.f-slate-user-flyover, .userhome-body .__react_component_tooltip.f-slate-user-flyover { padding: 8px; }

.memo-body .__react_component_tooltip .f-slate-user-history-flyover, .userhome-body .__react_component_tooltip .f-slate-user-history-flyover { align-items: center; display: flex; }

.memo-body .__react_component_tooltip .f-slate-user-flyover-info, .userhome-body .__react_component_tooltip .f-slate-user-flyover-info { display: flex; flex-direction: column; }

.memo-body .__react_component_tooltip .f-slate-user-flyover-date, .userhome-body .__react_component_tooltip .f-slate-user-flyover-date { color: #797d7f; font-size: 11px; }

.memo-body .__react_component_tooltip .f-member-image, .memo-body .__react_component_tooltip .member-image-v1, .userhome-body .__react_component_tooltip .f-member-image, .userhome-body .__react_component_tooltip .member-image-v1 { margin-right: 4px; }

.memo-body .f-slate-whiteboard-actions, .userhome-body .f-slate-whiteboard-actions { position: absolute; right: 8px; top: 3px; }

.memo-body .f-slate-whiteboard-actions > button, .userhome-body .f-slate-whiteboard-actions > button { background-color: #999ea1; padding: 2px 4px; }

.memo-body .f-slate-whiteboard-actions .fractal-dropdownPopout-popout-container, .userhome-body .f-slate-whiteboard-actions .fractal-dropdownPopout-popout-container { padding: 0; z-index: 1; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts { padding: 16px; white-space: nowrap; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts ul, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts ul { margin-left: 0; padding-bottom: 8px; width: 100%; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb { border-top: 1px solid #e7e9eb; padding-top: 8px; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb li, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb li { margin-left: 18px; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb li button, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .f-slate-rmv-thumb li button { color: #e74c3c; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts li, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts li { cursor: pointer; list-style: none; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts li button, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts li button { background-color: transparent; color: #444647; margin: 0; padding: 0; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .fa-check, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .fa-check { color: #1abc9c; margin-right: 4px; }

.memo-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .fa-check.hide-thumb, .userhome-body .f-slate-whiteboard-actions .f-slate-whiteboard-opts .fa-check.hide-thumb { opacity: 0; visibility: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-main.f-print-layout { background-color: #f5f5f6; }

.f-memo-main .f-memo-top-bar { align-items: center; background: #fff; border-bottom: 1px solid #f5f5f6; display: flex; height: 48px; justify-content: space-between; padding: 0 16px; position: fixed; top: 0; width: calc(100% - 32px); z-index: 2147483500; }

.f-memo-main .f-memo-top-bar-left { align-items: center; display: flex; min-width: 50%; }

.f-memo-main .f-memo-top-bar-left .f-back-btn { border: 0; height: 32px; margin: 0 12px 0 0; padding: 0; width: 32px; }

.f-memo-main .f-memo-top-bar-left .f-back-btn .fa-angle-left { color: #1e1f20; font-size: 30px; }

.f-memo-main .f-memo-top-bar-left .f-status-indicator { align-items: center; cursor: default; display: flex; justify-content: center; }

.f-memo-main .f-memo-top-bar-left .f-status-indicator i { margin-right: 4px; }

.f-memo-main .f-memo-top-bar-left img { margin-right: 8px; width: 32px; }

.f-memo-main .f-memo-top-bar-left .f-tooltip-bottom { text-align: center; width: 330px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu { border-left: 1px solid #bdc3c7; padding-left: 4px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-dropdown-btn { border: 0; color: #1e1f20; padding: 0 8px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-dropdown-btn > div { display: flex; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-dropdown-btn .fa-bars { font-size: 20px; margin-left: 0; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-dropdown-btn.f-dropdown-open { background-color: #3498db; color: #fff; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options { left: 12px; overflow: inherit; right: auto; width: 192px; z-index: 2147483600; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options li.f-no-link { color: #bdc3c7; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options li.f-selected-option { background: none; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options li:hover { background: #e7e9eb; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options li:not(.f-dropdown-divider) { height: 24px; padding: 0 16px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu > .f-dropdown-options .f-dropdown-options-nested { left: 176px; overflow: initial; top: -8px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item { align-items: center; display: flex; font-size: 12px; justify-content: space-between; margin-right: -8px; position: relative; width: 188px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item.f-menu-item-disabled { color: #bdc3c7; cursor: not-allowed; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .f-menu-item { justify-content: space-between; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item a { color: #444647; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item a:hover { color: #444647; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .fa-caret-right { margin-right: 0; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .f-menu-sub-menu { font-size: 12px; left: 162px; margin-left: 16px; margin-right: 0; margin-top: 0; position: absolute; top: -5px; width: 190px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .f-hot-key-and-check { align-items: flex-start; display: flex; width: 24px; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .fa-check { color: #1abc9c; margin: 0; }

.f-memo-main .f-memo-top-bar-left .f-top-bar-menu .f-menu-item .f-empty { height: 24px; width: 24px; }

.f-memo-main .f-memo-top-bar-right { align-items: center; display: flex; }

.f-memo-main .f-memo-top-bar-right #f-share-dialog-btn { font-size: 14px; margin-left: 12px; margin-right: 0; }

.f-memo-main .f-memo-viewers { align-items: center; display: flex; }

.f-memo-main .f-input-sizer { align-items: center; display: flex; height: 32px; justify-content: space-between; min-width: 100px; position: relative; width: auto; }

.f-memo-main .f-input-sizer .fractal-input { width: 100%; }

.f-memo-main .f-memo-title { align-items: center; border: 1px solid transparent; border-radius: 4px; color: #444647; display: flex; flex: 1; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; height: 32px; margin-right: 8px; max-width: calc(100vw - 560px); overflow: hidden; padding: 0 8px; position: relative; transition: background-color 0.2s; width: 100%; }

.f-memo-main .f-memo-title > span { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-memo-main .f-memo-title .fa-lock { margin-right: 4px; }

.f-memo-main .f-memo-title:not(.f-read-only):hover { background: #f5f5f6; cursor: pointer; }

.f-memo-main .f-memo-title ~ .f-tooltip-bottom { margin-top: 12px; }

.f-memo-main .f-hidden-memo-title { bottom: 0; display: inline-block; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; max-width: calc(100vw - 560px); opacity: 0; position: fixed; right: 0; }

.f-memo-main .f-middle-wrapper { max-width: calc(100vw - 500px); }

.f-memo-main .f-status-padding { margin-left: 8px; }

.f-memo-main .fractal-input .f-memo-title { align-items: center; background-color: #fff; border-radius: 4px; box-sizing: border-box; color: #444647; display: flex; flex: 1; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; height: 32px; left: 0; margin-right: 8px; max-width: calc(100vw - 500px); min-width: 100px; padding: 0 8px; top: 0; transition: background-color 0.2s; width: 100%; }

.f-memo-main .fractal-input .f-memo-title:hover { background-color: #fff; }

.f-memo-main .fractal-input .f-memo-title.f-rename-has-error, .f-memo-main .fractal-input .f-memo-title.f-rename-has-error:focus { border-color: #e74c3c; }

.f-memo-main .f-slate { width: 100%; }

.f-memo-main .f-slate-toolbar { align-items: center; background: #fff; border-bottom: 1px solid #e7e9eb; box-sizing: border-box; display: flex; justify-content: center; padding: 4px 16px; position: fixed; top: 50px; width: 100%; z-index: 10; }

.f-memo-main .f-slate-toolbar .f-memo-btns-ellipsis { align-items: center; display: flex; }

.f-memo-main .f-slate-toolbar .f-memo-more-btn { height: 32px; margin: 0 2px; padding: 0; width: 32px; }

.f-memo-main .f-slate-toolbar .f-memo-more-btn.f-btn-active + .f-memo-additional-btns { align-items: center; display: flex; }

.f-memo-main .f-slate-toolbar .f-split-menu { margin: 0 8px; }

.f-memo-main .f-slate-toolbar .f-memo-additional-btns { background-color: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: none; padding: 4px 2px; position: absolute; right: 18px; top: 38px; z-index: 999; }

@media (max-width: 680px) { .f-memo-main .f-slate-toolbar .f-memo-additional-btns { flex-wrap: wrap; left: 0; position: fixed; top: 90px; } }

.f-memo-main .f-slate-toolbar .f-memo-additional-btns button:not(.f-ai-btn):not(.f-slate-xray-btn):not(.f-slate-silentread-btn) { height: 32px; margin: 2px; padding: 0 8px; width: 32px; }

.f-memo-main .f-slate-toolbar .f-memo-additional-btns .f-split-menu { margin: 0 0 0 8px; }

.f-memo-main .f-slate-toolbar .f-memo-additional-btns .f-divider { display: none; }

.memo { height: 100%; }

.fractal-body.memo-body { background: #fff; }

.fractal-body.memo-body .f-fourohfour-background { height: 100vh; }

.fractal-body.memo-body.f-memo-body-print-layout { background-color: #f5f5f6; }

.f-memo-noaccess { align-items: center; display: flex; flex-direction: column; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; height: calc(100vh - 380px); justify-content: center; width: 100%; }

.f-memo-noaccess i { color: #444647; font-size: 36px; margin-bottom: 16px; }

.f-memo-noaccess h1 { color: #444647; font-size: 24px; font-weight: 400; margin-bottom: 32px; }

.f-memo-noaccess p { color: #797d7f; font-size: 18px; margin: 0 auto 32px; max-width: 600px; text-align: center; }

.f-memo-noaccess a { color: #3498db; text-decoration: none; }

.f-memo-noaccess .f-icon-memos { background-image: url(/fractal/dist/images/8e0a5cb35be5b2951a99.png); background-position: 3px 3px; background-repeat: no-repeat; display: block; height: 43px; width: 40px; }

.f-rooms-content .f-memo-main .f-hidden-memo-title, .f-rooms-content .f-memo-main .f-memo-title { max-width: calc(100vw - 820px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-send-to-batch { align-items: center; color: #444647; display: flex; font-family: Lato, 'Open Sans', arial, sans serif; margin-left: 8px; }

.f-send-to-batch .f-send-to-batch-button { align-items: center; background: #f5eef8; border-color: #8e44ad; color: #8e44ad; display: flex; font-size: 14px; height: 32px; margin-right: 0; }

.f-send-to-batch .f-send-to-batch-button:hover { background: #d2b4de; border-color: #8e44ad; }

.f-send-to-batch .f-send-to-batch-button:active { background: #8e44ad; border-color: #8e44ad; box-shadow: none; }

.f-send-to-batch .f-send-to-batch-button:focus, .f-send-to-batch .f-send-to-batch-button:focus:not(:active) { background: #bb8fce; border-color: #8e44ad; box-shadow: none; }

.f-send-to-batch .f-send-to-batch-button .fa-paper-plane { font-family: 'FontAwesome5_Solid'; margin-left: 0; padding-right: 8px; }

.f-send-to-batch .f-send-to-batch-container { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); font-size: 14px; min-height: 230px; position: absolute; right: 8px; top: 98px; width: 370px; }

.f-send-to-batch .f-send-to-batch-container * { box-sizing: border-box; }

.f-send-to-batch .f-send-to-batch-container .f-batch-heading { align-items: center; border-bottom: 1px solid #e7e9eb; display: flex; font-size: 16px; font-weight: 600; justify-content: space-between; padding: 16px; }

.f-send-to-batch .f-send-to-batch-container .f-batch-heading .f-btn-xs { font-size: 14px; margin: 0; }

.f-send-to-batch .f-send-to-batch-container .f-batch-body { max-height: calc(100vh - 228px); overflow: auto; padding: 16px; }

.f-send-to-batch .f-send-to-batch-container .f-batch-body .fractal-combobox { margin-top: 12px; }

.f-send-to-batch .f-send-to-batch-container .f-batch-footer { align-items: center; border-top: 1px solid #e7e9eb; display: flex; justify-content: flex-end; padding: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-template-main { height: 545px; left: 24px; overflow-y: auto; padding-top: 24px; position: absolute; top: 0; width: 676px; }

.f-template-main.f-templates-loading { align-content: center; display: flex; flex-direction: column; justify-content: center; }

.f-template-main.f-templates-loading .fractal-spinner-outer { height: 30px; }

.f-template-main .f-templates-container { display: flex; flex-wrap: wrap; list-style-type: none; overflow: visible; padding: 4px; width: 100%; }

.f-template-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { height: 545px; overflow: hidden; padding-bottom: 0; position: relative; width: 720px; }

.f-template-modal .ReactModal__Content { max-width: 720px; }

.f-template-modal .f-modal-design-titleHeaderSubmitFooter-v1 { height: inherit; }

.f-template-modal .f-template-list-item { margin-right: 24px; position: relative; width: calc(33% - 16px); }

.f-template-modal .f-template-list-item:nth-child(3n) { margin-right: 0; }

.f-template-modal .f-template-list-item .f-radio-wrapper { position: absolute; right: 16px; top: 8px; z-index: 2; }

.f-template-modal-memo { overflow: visible; }

.f-template-modal-memo .f-modal-design-titleHeaderSubmitFooter-v1 { height: 350px; overflow: visible; }

.f-template-modal-memo .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body { height: 250px; overflow: visible; }

.f-template-modal-memo .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body .f-template-main-memo { height: auto; overflow: visible; width: 670px; }

.f-template-modal-memo .f-modal-design-titleHeaderSubmitFooter-v1 .f-modal-body .f-template-main-memo .f-templates-container { column-gap: 0; display: flex; justify-content: space-between; margin: 10px auto; width: calc(100% - 16px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-click-to-confirm-modal-v2 { display: block; }

.fractal-click-to-confirm-modal-v2 * { box-sizing: border-box; }

.fractal-click-to-confirm-modal-v2 .fractal-modal { /* Disable standard modal esc behavior */ }

.fractal-click-to-confirm-modal-v2 .fractal-modal .f-modal-body-spacing { margin-bottom: 12px; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer { height: auto; max-height: 200px; max-width: 600px; padding: 0; width: auto; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner { display: flex; flex-direction: column; height: auto; position: inherit; width: auto; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-body { padding: 24px; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-footer { background: none; border-top: 1px solid #f5f5f6; height: auto; padding: 12px 16px; position: inherit; width: auto; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .fractal-button { margin: 0; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-footer .f-btn-subtle { margin-right: 10px; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .__react_component_tooltip { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-colorpicker-trigger { background-color: #fff; border: 2px solid transparent; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; height: 32px; width: 32px; }

.f-colorpicker-trigger.f-colorpicker-open { border: 2px solid #1abc9c; }

.f-color-picker-group { height: 32px; position: relative; width: 32px; }

.f-color-picker-group .fractal-color-picker { left: 0; position: absolute; top: 40px; }

.f-color-picker-group.f-top-left .fractal-color-picker { right: 40px; top: -194px; }

.f-color-picker-group .chrome-picker > div:nth-child(2) > .flexbox-fix:first-child { align-items: center; margin-bottom: -8px; }

.f-color-picker-portal .f-color-portal-wrapper { position: fixed; z-index: 2147483600; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-input input.f-warning-border { border-color: #e74c3c; }

.fractal-input input.f-warning-border:focus { border-color: #e74c3c; }

.fractal-input input.f-input-loading:focus { border-color: #bdc3c7; }

.f-input-status { position: absolute; right: -22px; top: 2px; }

.f-input-status .fractal-spinner-outer .spinner-inner i.fa-spinner { font-size: 18px; }

.f-input-status .fa-check { color: #2ecc71; }

.f-input-error { color: #e74c3c; display: inline-block; font-size: 12px; line-height: 18px; margin-top: 4px; text-align: right; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-analytics-dashboards-lander { display: flex; flex-direction: column; padding: 14px; }

.f-analytics-dashboards-lander h2 { font-weight: 600; margin-bottom: 16px; }

.f-analytics-dashboards-lander .fa-bar-chart { margin-right: 4px; }

.f-analytics-dashboards-lander .f-analytic-item { border-radius: 4px; display: flex; min-height: 124px; padding: 12px; position: relative; width: 100%; }

.f-analytics-dashboards-lander .f-analytic-icon { border: 1px solid #bdc3c7; border-radius: 4px; width: 100px; }

.f-analytics-dashboards-lander .f-analytic-icon img { height: 100px; width: 100%; }

.f-analytics-dashboards-lander .f-analytic-info { padding: 10px 0 10px 40px; width: calc(100% - 375px); }

.f-analytics-dashboards-lander .f-analytic-info .f-title { font-size: 14px; font-weight: bold; }

.f-analytics-dashboards-lander .f-analytic-info .f-description { font-size: 12px; margin-bottom: 0; }

.f-analytics-dashboards-lander .f-analytic-action { align-items: center; background: rgba(0, 0, 0, 0.5); border-radius: 4px; bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; transform: translateY(0); z-index: 1; }

.f-analytics-dashboards-lander .f-analytic-action .f-btn-info { background: transparent; border: 2px solid #fff; }

.f-analytics-dashboards-lander .f-analytic-action .f-btn-info:hover { background: rgba(255, 255, 255, 0.25); }

.f-analytics-dashboards-lander .f-analytic-action .f-btn-info:focus { background: rgba(255, 255, 255, 0.7); outline: 0; }

.f-analytics-dashboards-lander .f-analytic-action .f-btn-info:active, .f-analytics-dashboards-lander .f-analytic-action .f-btn-info.f-btn-active, .f-analytics-dashboards-lander .f-analytic-action .f-btn-info.f-btn-active:focus { background: rgba(255, 255, 255, 0.7); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-icontitledescription { color: #797d7f; display: block; text-align: center; }

.fractal-icontitledescription h2 { font-size: 14px; font-weight: bold; margin-bottom: 10px; margin-top: 10px; }

.fractal-icontitledescription i { color: #bdc3c7; display: block; font-size: 32px; margin-top: 50px; }

.fractal-icontitledescription span { display: block; font-size: 13px; font-weight: normal; margin-top: 5px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-last-updated { color: #797d7f; font-size: 12px; margin-top: 20px; text-align: right; width: 100%; }

.f-last-updated.f-last-updated-reverse-margin { margin-bottom: 0; margin-top: 0; }

.f-last-updated .f-date-tooltip-trigger { cursor: default; text-decoration: underline; }

.f-last-updated + .__react_component_tooltip { white-space: nowrap; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-pagination-v1 { color: #bdc3c7; display: flex; margin-bottom: 24px; margin-top: 24px; }

.f-pagination-v1 ul { display: flex; margin: auto; padding-left: 0; }

.f-pagination-v1 li { border: 1px solid #bdc3c7; cursor: pointer; height: 32px; margin-left: -1px; padding: 5px 10px; }

.f-pagination-v1 .f-pagination-arrow { background-color: #f5f5f6; }

.f-pagination-v1 .f-pagination-arrow.f-arrow-left { border-radius: 4px 0 0 4px; }

.f-pagination-v1 .f-pagination-arrow.f-arrow-right { border-radius: 0 4px 4px 0; }

.f-pagination-v1 .f-current-page { background-color: #3498db; color: #fff; cursor: default; }

.f-pagination-v1 .f-disabled-arrow { border: 1px solid #e7e9eb; color: #d5d9db; cursor: not-allowed; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 { min-height: 500px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table { border: 1px solid #bdc3c7; width: 100%; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table thead { background-color: #f5f5f6; border: 1px solid #bdc3c7; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table tr { border: 1px solid #d5d9db; height: 40px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .fa-sort-asc, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .fa-sort-desc { margin-left: 3px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .fa-sort-asc { margin-top: 7px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .fa-sort-desc { margin-top: 2px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .first-col { overflow: hidden; padding-left: 15px; white-space: nowrap; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .center-col { padding-right: 18px; text-align: center; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .idea-cell { align-items: center; display: flex; width: 200px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 table .idea-cell img { height: 20px; margin-right: 5px; width: 20px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .f-table-search { height: 35px; margin: auto 0 auto auto; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .f-table-search input { padding-left: 30px; width: 230px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .f-table-search input::-ms-clear { display: none; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .f-table-search .fa-search { color: #444647; margin-left: 5px; margin-top: 5px; position: absolute; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .f-table-search .fa-times-circle { color: #999ea1; font-size: 16px; position: absolute; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .search-icon { position: relative; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .input-clear { cursor: pointer; height: 16px; left: 205px; position: relative; top: -25px; width: 16px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-description { font-size: 13px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-header { display: flex; margin-bottom: 15px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-title { margin: auto auto auto 0; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-spinner { display: none; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-spinner { position: relative; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-spinner.loading { display: block; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .fractal-spinner-outer { left: 50%; margin-top: 0; position: absolute; top: 130px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-element { display: block; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-element.loading #submission-table { border: none; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-element.loading #submission-table tbody { visibility: hidden; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterprise-dashboard-table-v1 .table-element.loading #submission-table tr { border: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-enterpriseDashboardBusinessImpact-v1 * { box-sizing: border-box; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-enterprise-dashboard-empty { transform: translateY(50%); }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-enterprise-dashboard-empty a { font-size: 14px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-enterprise-dashboard-empty .fa-university { color: #797d7f; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-spinner-outer { margin-top: 25%; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-main-content { padding: 10px 10px 35px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-business-updated { padding-right: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-enterpriseDashboardBusinessImpact-v1.target-popup-transition-wrapper.popup-appear { opacity: 0.01; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1.target-popup-transition-wrapper.popup-appear.popup-appear-active { opacity: 1; transition: opacity 200ms ease-in; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1.target-popup-transition-wrapper.popup-exit { opacity: 1; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1.target-popup-transition-wrapper.popup-exit.popup-exit-active { opacity: 0.01; transition: opacity 200ms ease-in; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container { background-color: #fff; border: 1px solid #bdc3c7; display: flex; flex-flow: column; font-size: 12px; height: 260px; margin-right: 10px; max-width: 907px; min-width: 450px; padding: 10px; position: absolute; right: 0; top: 60px; width: auto; z-index: 11; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container * { box-sizing: border-box; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-title-row { font-weight: bold; margin: 15px 0; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row { display: flex; height: 75px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-dynamic-years { display: flex; margin-right: 10px; overflow-x: auto; -ms-overflow-y: hidden; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container { display: inline-block; margin-right: 10px; padding: 0 4px; text-align: center; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .year { display: inline-block; font-weight: bold; line-height: 16px; margin-bottom: 5px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .fa-trash-o { color: #e74c3c; cursor: pointer; display: none; font-size: 14px; padding-left: 2px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .f-target-input { display: inline-block; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container input { background-color: #fff; margin: 0; width: 150px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-dynamic-years .f-year-and-field-item-container:last-child:hover i { display: inline-block; padding-left: 3px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper { display: inline-block; margin-bottom: 5px; text-align: right; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-empty-space { display: inline-block; margin-bottom: 5px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-empty-space:active, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-empty-space:hover, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-empty-space:focus { background-color: #e7e9eb; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container { align-items: center; background-color: #fff; border: 1px solid #3498db; border-radius: 5px; color: #3498db; cursor: pointer; display: flex; padding-left: 8px; transition: all 0.2s ease-in-out; width: 85px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container .add-year { background-color: inherit; color: #3498db; font-weight: normal; padding: 0; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container .fractal-button { margin: 0; padding-left: 5px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:hover { transform: scale(1.05); }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:active { transform: scale(1); }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:active, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:hover, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:focus { background-color: #e7e9eb; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-total-and-clear-target-row { align-items: center; display: flex; justify-content: flex-end; margin-left: auto; margin-top: 10px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-total-and-clear-target-row .f-total-target { font-weight: 600; width: 150px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-total-and-clear-target-row .f-total-target .fractal-currency { padding-left: 10px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-total-and-clear-target-row .f-clear-target-btn { margin-left: 10px; margin-right: 5px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-total-and-clear-target-row .f-clear-target-btn .fractal-button { margin: 0; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-cancel-and-save-row { display: flex; justify-content: center; margin: auto auto 20px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container .f-cancel-and-save-row .cancel-btn { margin-right: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-enterpriseDashboardBusinessImpact-v1 * { box-sizing: border-box; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; margin-top: 20px; position: relative; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-subtitle { font-size: 12px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-subtitle span { display: block; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center { align-items: center; display: flex; justify-content: center; margin-left: 10px; margin-right: 10px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center .f-chart-stats { align-items: center; display: flex; flex-direction: column; margin-right: 3%; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center #chart-actual-total { color: #1abc9c; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center #chart-projected-total { color: #3498db; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center #chart-target-total { color: #e74c3c; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right { display: flex; justify-content: flex-end; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right .fa-cog { border: 1px solid #bdc3c7; border-radius: 4px; cursor: pointer; margin-left: 10px; margin-right: 10px; padding: 10px; z-index: 10; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right .fa-cog.f-disabled { background-color: #d5d9db; color: #444647; cursor: default; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right select { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #000; font-family: Open Sans, sans-serif; font-size: 13px; padding-left: 5px; top: -30px; width: 175px; z-index: 10; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-total-text { font-size: 12px; margin: 0 2px; text-align: center; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-left, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right { width: 33%; }

@media (max-width: 768px) { .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper { display: block; }
  .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-left, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-center, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-chart-title-wrapper .f-chart-title-right { justify-content: center; margin-bottom: 10px; text-align: center; width: 100%; } }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-gross-benefits-over-time-chart-container .highcharts-container, .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-gross-benefits-over-time-chart-container .highcharts-container > svg { overflow: visible !important; width: calc(100% - 1px) !important; }

@media (min-width: 1px) and (max-width: 767px) { .fractal-widget-enterpriseDashboardBusinessImpact-v1 .f-target-popup-container { margin-right: 5%; max-width: 90%; min-width: 90%; top: 155px; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterpriseDashboardBusinessImpactExport .f-enterprise-dashboard-export-wrapper { display: inline-block; width: 100%; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1 .fractal-enterpriseDashboardBusinessImpactExport .f-enterprise-dashboard-export-wrapper .f-export-button { background-color: #fff; border: 0 none; box-sizing: content-box; color: #2ecc71; cursor: pointer; display: block; float: right; font-size: 20px; margin-top: 15px; }

.fractal-widget-enterpriseDashboardBusinessImpact-v1.fractal-click-to-confirm-modal-v1 .f-click-to-confirm-button-confirm { background-color: #2ecc71; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-engagement-pipeline-dashboards-container { margin-top: 24px; }

.f-engagement-pipeline-dashboards-container .f-engagement-updated { color: #797d7f; display: flex; font-size: 12px; justify-content: flex-end; margin-right: 16px; }

.f-engagement-pipeline-dashboards-container .f-engagement-section { margin: 32px 0; padding: 0 16px; width: 100%; }

.f-engagement-pipeline-dashboards-container .f-engagement-section.f-first-container { margin-top: 8px; }

.f-engagement-pipeline-dashboards-container .f-engagement-title { font-size: 16px; font-weight: 500; }

.f-engagement-pipeline-dashboards-container .f-engagement-title .f-grey { color: #bdc3c7; }

.f-engagement-pipeline-dashboards-container .f-engagement-desc { font-size: 12px; }

.f-engagement-pipeline-dashboards-container .f-empty-chart-container { align-items: center; display: flex; height: 300px; justify-content: center; }

.f-engagement-pipeline-dashboards-container .f-spinner-container { align-items: center; display: flex; height: 300px; justify-content: center; }

.f-engagement-pipeline-dashboards-container .f-engagement-top-row { display: flex; }

.f-engagement-pipeline-dashboards-container .f-engagement-top-row > div { flex: 1; }

.f-engagement-pipeline-dashboards-container .f-engagement-dropdown-container, .f-engagement-pipeline-dashboards-container .f-engagement-picker-container { align-items: center; display: flex; justify-content: flex-end; }

.f-engagement-pipeline-dashboards-container .f-engagement-dropdown-container .fractal-datepicker, .f-engagement-pipeline-dashboards-container .f-engagement-picker-container .fractal-datepicker { margin: 0 32px 8px 8px; }

.f-engagement-pipeline-dashboards-container .f-engagement-dropdown-container .fractal-datepicker:last-of-type, .f-engagement-pipeline-dashboards-container .f-engagement-picker-container .fractal-datepicker:last-of-type { margin-right: 14px; }

.f-engagement-pipeline-dashboards-container .f-engagement-dropdown-container .f-dropdown-btn:last-of-type, .f-engagement-pipeline-dashboards-container .f-engagement-picker-container .f-dropdown-btn:last-of-type { margin-right: 0; }

.f-engagement-pipeline-dashboards-container .f-view-label { font-size: 12px; }

.f-engagement-pipeline-dashboards-container .f-metrics-container { display: grid; gap: 16px; width: calc(100% - 8px); }

.f-engagement-pipeline-dashboards-container .f-metric-group { display: flex; }

.f-engagement-pipeline-dashboards-container .f-metric { align-items: center; border: 1px solid #bdc3c7; border-right: none; display: flex; flex: 1; flex-direction: column; height: 120px; justify-content: center; padding: 8px; text-align: center; }

.f-engagement-pipeline-dashboards-container .f-metric h2 { font-weight: normal; }

.f-engagement-pipeline-dashboards-container .f-metric span { font-size: 11px; }

.f-engagement-pipeline-dashboards-container .f-metric:last-of-type { border-right: 1px solid #bdc3c7; }

.f-engagement-pipeline-dashboards-container .f-cross-collab-chart .collaborator-chart-tooltip { background-color: #fff; border: 1px solid #3498db; margin: 10px; padding: 14px; }

.f-engagement-pipeline-dashboards-container .f-cross-collab-chart .collaborator-header { font-weight: bold; }

.f-engagement-pipeline-dashboards-container .f-cross-collab-chart .collaborator-section { margin-top: 3px; }

.f-engagement-pipeline-dashboards-container .f-cross-collab-chart .collaborator-links { list-style-type: none; padding-left: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-v1.target-popup-transition-wrapper .popup-appear { opacity: 0.01; }

.fractal-pipeline-dashboard-v1.target-popup-transition-wrapper.popup-appear.popup-appear-active { opacity: 1; transition: opacity 200ms ease-in; }

.fractal-pipeline-dashboard-v1.target-popup-transition-wrapper.popup-exit { opacity: 1; }

.fractal-pipeline-dashboard-v1.target-popup-transition-wrapper.popup-exit.popup-exit-active { opacity: 0.01; transition: opacity 200ms ease-in; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container { background-color: #fff; border: 1px solid #bdc3c7; display: flex; flex-flow: column; font-size: 12px; height: 260px; margin-right: 10px; max-width: 907px; min-width: 450px; padding: 10px; position: absolute; right: 0; top: 65px; width: auto; z-index: 11; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container * { box-sizing: border-box; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-title-row { font-weight: bold; margin: 15px 0; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row { display: flex; height: 75px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-dynamic-years { display: flex; margin-right: 10px; overflow-x: auto; -ms-overflow-y: hidden; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container { display: inline-block; margin-right: 10px; padding: 0 4px; text-align: center; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .year { display: inline-block; font-weight: bold; line-height: 16px; margin-bottom: 5px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .fa-trash-o { color: #e74c3c; cursor: pointer; display: none; font-size: 14px; padding-left: 2px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container .f-target-input { display: inline-block; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-year-and-field-item-container input { background-color: #fff; margin: 0; width: 150px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-dynamic-years .f-year-and-field-item-container:last-child:hover i { display: inline-block; padding-left: 3px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper { display: inline-block; margin-bottom: 5px; text-align: right; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-empty-space { display: inline-block; margin-bottom: 5px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container { align-items: center; background-color: #fff; border: 1px solid #3498db; border-radius: 5px; color: #3498db; cursor: pointer; display: flex; padding-left: 8px; transition: all 0.2s ease-in-out; width: 85px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container .add-year { background-color: inherit; color: #3498db; font-weight: normal; padding: 0; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container .fractal-button { margin: 0; padding-left: 5px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:hover { transform: scale(1.05); }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:active { transform: scale(1); }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:active, .fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:hover, .fractal-pipeline-dashboard-v1 .f-target-popup-container .f-year-and-field-row .f-add-year-btn-container-wrapper .f-add-year-btn-container:focus { background: #e7e9eb; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-total-and-clear-target-row { align-items: center; display: flex; justify-content: flex-end; margin-left: auto; margin-top: 10px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-total-and-clear-target-row .f-total-target { font-weight: 600; width: 150px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-total-and-clear-target-row .f-total-target .fractal-currency { padding-left: 10px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-total-and-clear-target-row .f-clear-target-btn { margin-left: 10px; margin-right: 5px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-total-and-clear-target-row .f-clear-target-btn .fractal-button { margin: 0; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-cancel-and-save-row { display: flex; justify-content: center; margin: auto auto 20px; }

.fractal-pipeline-dashboard-v1 .f-target-popup-container .f-cancel-and-save-row .cancel-btn { margin-right: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-v1 * { box-sizing: border-box; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; margin-top: 20px; position: relative; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-subtitle { font-size: 12px; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-subtitle span { display: block; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center { align-items: center; display: flex; justify-content: center; margin-left: 10px; margin-right: 10px; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center .f-chart-stats { align-items: center; display: flex; flex-direction: column; margin-right: 3%; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center #chart-actual-total { color: #1abc9c; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center #chart-projected-total { color: #3498db; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center #chart-target-total { color: #e74c3c; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right { display: flex; justify-content: flex-end; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right .fa-cog { border: 1px solid #bdc3c7; border-radius: 4px; cursor: pointer; margin-left: 10px; margin-right: 10px; padding: 10px; z-index: 10; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right .fa-cog.f-disabled { background-color: #d5d9db; color: #444647; cursor: default; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right select { background: #f5f5f6; border: 1px solid #bdc3c7; border-radius: 4px; color: #000; font-family: Open Sans, sans-serif; font-size: 13px; padding-left: 5px; top: -30px; width: 175px; z-index: 10; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-total-text { font-size: 12px; margin: 0 2px; text-align: center; }

.fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-left, .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center, .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right { width: 33%; }

@media (max-width: 768px) { .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper { display: block; }
  .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-left, .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-center, .fractal-pipeline-dashboard-v1 .f-chart-title-wrapper .f-chart-title-right { justify-content: center; margin-bottom: 10px; text-align: center; width: 100%; } }

.fractal-pipeline-dashboard-v1 .f-gross-benefits-over-time-chart-container .highcharts-container, .fractal-pipeline-dashboard-v1 .f-gross-benefits-over-time-chart-container .highcharts-container > svg { overflow: visible !important; width: calc(100% - 1px) !important; }

@media (min-width: 1px) and (max-width: 767px) { .fractal-pipeline-dashboard-v1 .f-target-popup-container { margin-right: 5%; max-width: 90%; min-width: 90%; top: 165px; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .idea-details-tab { height: 223px; margin-top: -10px; max-height: 243px; overflow-y: auto; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .fractal-htmlpreview { display: inline; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .fractal-htmlpreview > div { display: inline; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .idea-section { font-size: 12px; margin-top: 10px; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .idea-section:first-of-type { margin-top: 0; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .idea-status { border-radius: 4px; color: #fff; display: inline-block; padding: 3px 5px; }

.fractal-pipeline-dashboard-table-v1 .idea-details-tab .idea-title { margin-right: 5px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .submission-idea-experiments-tab .experiment-title { display: block; font-size: 12px; font-weight: 600; }

.fractal-pipeline-dashboard-table-v1 .submission-idea-experiments-tab ul { list-style-type: disc; padding-left: 17px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .submission-idea-loading-tab .fractal-icontitledescription i { margin: 0 auto; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .milestone-tab { height: 223px; margin-top: -10px; max-height: 243px; overflow-y: auto; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab table { border-collapse: separate; border-spacing: 0 6px; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab table thead, .fractal-pipeline-dashboard-table-v1 .milestone-tab table tr { background: none !important; border: none !important; font-size: 12px; height: 15px !important; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab table thead { font-weight: 600; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab table .fa { color: #e7e9eb; font-size: 16px; margin-right: 10px; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab .fa.fa-map-marker { color: #999ea1; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab .milestone-name { display: inline-block; max-width: 400px; vertical-align: top; }

.fractal-pipeline-dashboard-table-v1 .milestone-tab .milestone-see-more { margin-top: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .risks-tab { height: 223px; margin-top: -10px; max-height: 243px; overflow-y: auto; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .fa-asterisk { color: #999ea1; margin-right: 5px; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-section { margin-top: 10px; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-section:first-of-type { margin-bottom: 10px; margin-top: 0; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-section:last-of-type { margin-bottom: 10px; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-name { display: inline-block; max-width: 500px; vertical-align: top; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-title { font-weight: 600; }

.fractal-pipeline-dashboard-table-v1 .risks-tab .risk-see-more { margin-top: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .task-tab { height: 223px; margin-top: -10px; max-height: 243px; overflow-y: auto; }

.fractal-pipeline-dashboard-table-v1 .task-tab table { border-collapse: separate; border-spacing: 0 6px; }

.fractal-pipeline-dashboard-table-v1 .task-tab table thead, .fractal-pipeline-dashboard-table-v1 .task-tab table tr { background: none !important; border: none !important; font-size: 12px; height: 15px !important; }

.fractal-pipeline-dashboard-table-v1 .task-tab table thead { font-weight: 600; }

.fractal-pipeline-dashboard-table-v1 .task-tab table .fa { color: #e7e9eb; font-size: 16px; margin-right: 10px; }

.fractal-pipeline-dashboard-table-v1 .task-tab .task-name { display: inline-block; max-width: 400px; vertical-align: top; }

.fractal-pipeline-dashboard-table-v1 .task-tab .task-see-more { margin-top: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-table-v1 .submission-tooltip { height: 280px; max-height: 280px; min-width: 500px; overflow-y: hidden; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header { border-bottom: 1px solid #bdc3c7; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .fa { font-size: 15px; margin-right: 5px; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab { border-bottom: 2px solid #fff; color: #999ea1; display: inline-block; font-weight: 400; padding: 10px 20px 5px; transition: all 0.2s ease-in-out; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab.active { background: #fff; border-bottom: 2px solid #1abc9c; color: #444647; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab:first-of-type { color: #444647; font-size: 14px; font-weight: 600; padding-left: 30px; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab:first-of-type::after { border-right: 1px solid #bdc3c7; content: ''; height: 17px; margin-left: 10px; position: absolute; width: 10px; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab:hover { color: #444647; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab:last-of-type { padding-right: 30px; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-header .submission-tooltip-header-tab:not(:first-of-type):hover { cursor: pointer; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-body { height: 243px; max-width: 700px; overflow: hidden; padding: 20px; white-space: normal; }

.fractal-pipeline-dashboard-table-v1 .submission-tooltip .submission-tooltip-body .fractal-icontitledescription h2 { font-weight: normal; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 { min-height: 500px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table { border: 1px solid #bdc3c7; width: 100%; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table thead { background-color: #f5f5f6; border: 1px solid #bdc3c7; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table tr { border: 1px solid #d5d9db; height: 40px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .fa-sort-asc { margin-left: 3px; margin-top: 5px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .fa-sort-desc { margin-left: 3px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .first-col { overflow: hidden; padding-left: 15px; white-space: nowrap; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .center-col { text-align: center; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .idea-cell { align-items: center; display: flex; width: 200px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .idea-cell img { height: 20px; margin-right: 5px; width: 20px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .submission-tooltip-wrapper { display: none; position: absolute; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .submission-tooltip-wrapper.before-show-tooltip { display: block; visibility: hidden; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .submission-tooltip-wrapper.show-tooltip { display: block; position: fixed; visibility: visible; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 #submission-table .submission-tooltip { background-color: #fff; box-shadow: 0 0 7px -1px rgba(0, 0, 0, 0.5); margin-top: 3px; opacity: 1; padding: 0; pointer-events: auto; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .f-table-search { height: 35px; margin: auto 0 auto auto; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .f-table-search input { padding-left: 30px; width: 230px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .f-table-search input::-ms-clear { display: none; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .f-table-search .fa-search { color: #444647; margin-left: 5px; margin-top: 5px; position: absolute; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .f-table-search .fa-times-circle { color: #999ea1; font-size: 16px; position: absolute; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .search-icon { position: relative; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .input-clear { cursor: pointer; height: 16px; left: 205px; position: relative; top: -25px; width: 16px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-description { font-size: 13px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-header { display: flex; margin-bottom: 15px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-title { margin: auto auto auto 0; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-spinner { display: none; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-spinner { position: relative; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-spinner.loading { display: block; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .fractal-spinner-outer { left: 50%; margin-top: 0; position: absolute; top: 130px; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-element { display: block; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-element.loading #submission-table { border: none; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-element.loading #submission-table tbody { visibility: hidden; }

.fractal-pipeline-dashboard-v1 .fractal-pipeline-dashboard-table-v1 .table-element.loading #submission-table tr { border: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-donut-chart-container { margin-left: 0; min-height: 350px; position: relative; width: 100%; }

.fractal-donut-chart-container * { box-sizing: border-box; }

.fractal-donut-chart-container .fractal-row { display: flex; height: 100%; }

.fractal-donut-chart-container .fractal-row .chart-column { height: 100%; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper { display: inline-block; height: 100%; max-width: 300px; position: relative; width: 100%; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .inner-content { font-size: 12px; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart { height: 100%; max-width: 300px; min-width: 200px; overflow: visible !important; width: 100%; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart .highcharts-container { overflow: visible !important; z-index: initial !important; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart .highcharts-container g.highcharts-tooltip { display: none; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart .highcharts-container div.highcharts-tooltip { z-index: 2; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart .highcharts-container div.highcharts-tooltip .fractal-donut-chart-tooltip { background-color: #fff; border: 1px solid #797d7f; border-radius: 2px; box-shadow: 1px 1px 2px 0 rgba(119, 119, 119, 0.62); display: table; font-size: 9pt; height: 80px; opacity: 1; padding: 15px 30px; text-align: center; }

.fractal-donut-chart-container .fractal-row .fractal-donut-chart-wrapper .fractal-donut-chart .highcharts-container div.highcharts-tooltip .fractal-donut-chart-tooltip-content { display: table-cell; vertical-align: middle; }

.fractal-donut-chart-container .fractal-row .legend-column { align-items: center; display: flex; }

.fractal-donut-chart-container .fractal-row .fractal-legend-container-wrapper { align-items: center; display: flex; height: 100%; }

.fractal-donut-chart-container .fractal-row .fractal-legend-container-wrapper .fractal-legend-container { column-count: 2; column-gap: 10px; display: inline-block; }

.fractal-donut-chart-container .fractal-row .fractal-legend-container-wrapper .fractal-legend-container .fractal-legend-name-container { margin-bottom: 25px; }

.fractal-donut-chart-container .fractal-row .fractal-legend-container-wrapper .fractal-legend-container .fractal-legend-name-container * { display: inline-block; }

.fractal-donut-chart-container .fractal-row .fractal-legend-container-wrapper .fractal-legend-container .fractal-legend-color { display: inline-block; height: 10px; margin-right: 5px; width: 10px; }

@media (max-width: 800px) { .fractal-donut-chart-container .fractal-row { flex-direction: column; }
  .fractal-donut-chart-container .fractal-row .legend-column { display: flex; flex-direction: column; height: auto !important; margin-left: 50px; position: relative; width: 300px; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-indicators-config-modal-v1 { display: block; }

.fractal-widget-indicators-config-modal-v1 * { box-sizing: border-box; }

.fractal-widget-indicators-config-modal-v1 .indicators-container { display: flex; flex-wrap: wrap; }

.fractal-widget-indicators-config-modal-v1 .indicators-container .indicators-box { align-content: center; border: 1px solid #d5d9db; border-radius: 4px; cursor: pointer; display: flex; flex-wrap: wrap; height: 125px; margin: 10px 5px; padding: 10px 20px; text-align: center; width: 175px; }

.fractal-widget-indicators-config-modal-v1 .indicators-container .indicators-box .indicators-data { font-size: 16px; font-weight: 600; margin: 0 auto; }

.fractal-widget-indicators-config-modal-v1 .indicators-container .indicators-box .indicators-title { font-size: 12px; margin: auto; width: 152px; }

.fractal-widget-indicators-config-modal-v1 .indicators-container .indicators-box.selected { background-color: #d5d9db; }

.fractal-widget-indicators-config-modal-v1 .f-btn-subtle { margin-right: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-dashboard-overall-charts * { box-sizing: border-box; }

.fractal-dashboard-overall-charts .section-container { margin-top: 40px; }

.fractal-dashboard-overall-charts .section-container .section-header { margin-bottom: 10px; }

.fractal-dashboard-overall-charts .section-container .section-title-container { color: #444647; height: 18px; }

.fractal-dashboard-overall-charts .section-container .f-section-title { font-size: 16px; font-weight: 500; }

.fractal-dashboard-overall-charts .section-container .section-subtitle { font-size: 12px; }

.fractal-dashboard-overall-charts .section-container .__react_component_tooltip { max-width: 300px; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-header { display: flex; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-header .top-indicators-header-text { margin-right: auto; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-header .btn-indicators-config-open { align-items: center; border: 1px solid #bdc3c7; border-radius: 3px; cursor: pointer; display: flex; height: 35px; margin-left: auto; padding: 3px 10px; width: 35px; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-boxes { display: flex; flex-wrap: wrap; margin-left: -1px; margin-top: -1px; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-boxes .top-indicators-box { border-radius: 5px; display: inline-block; margin-left: 1px; margin-top: 1px; min-width: 168px; outline: 1px solid #bdc3c7; padding: 20px; width: calc((100% - 42px) / 5); }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-boxes .top-indicators-box .top-indicators-content { display: block; text-align: center; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-boxes .top-indicators-box .top-indicators-data { font-size: 16px; font-weight: 600; }

.fractal-dashboard-overall-charts .top-indicators-container .top-indicators-boxes .top-indicators-box .top-indicators-title { font-size: 12px; }

.fractal-dashboard-overall-charts .pipeline-activity-container .highcharts-title { color: #444647 !important; fill: #444647 !important; font-size: 14px !important; font-weight: 500 !important; }

.fractal-dashboard-overall-charts .activity-header-container { align-items: center; display: flex; }

.fractal-dashboard-overall-charts .activity-header-container .btn-pipeline-activity-select { display: flex; height: 25px; margin-left: auto; }

.fractal-dashboard-overall-charts .activity-header-container .btn-pipeline-activity-select .fractal-select { margin-left: auto; }

.fractal-dashboard-overall-charts .activity-header-container .btn-pipeline-activity-select .fractal-select:active, .fractal-dashboard-overall-charts .activity-header-container .btn-pipeline-activity-select .fractal-select:focus { border: 1px solid #16a085; }

.fractal-dashboard-overall-charts .donut-chart-container { width: 100%; }

.fractal-dashboard-overall-charts .donut-chart-container .donut-chart-title { position: relative; z-index: 2; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-visual-participants-loading .background-placeholder { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: move; animation-timing-function: ease-in-out; background: #f6f7f8; background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%); background-size: 800px 104px; height: 120px; position: relative; width: 100%; z-index: 0; }

.fractal-visual-participants-loading .masking-circle { border: 1.5px solid #fff; height: 30px; width: 30px; }

.fractal-visual-participants-loading .masking-row { background: #fff; position: absolute; }

.fractal-visual-participants-loading .row-1a { height: 10px; top: 20px; width: 100%; }

.fractal-visual-participants-loading .row-1b { height: 20px; right: 0; top: 0; width: 150px; }

.fractal-visual-participants-loading .row-2a { position: absolute; top: 30px; }

.fractal-visual-participants-loading .row-2b { height: 33px; left: 330px; top: 30px; width: 25px; }

.fractal-visual-participants-loading .row-3a { height: 7px; top: 63px; width: 100%; }

.fractal-visual-participants-loading .row-4a { height: 10px; top: 90px; width: 100%; }

@keyframes move { 0% { background-position: -500px 0; }
  100% { background-position: 500px 0; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-visualparticipantsmodal .modal-header { border-bottom: 1px solid #bdc3c7; font-weight: 500; padding: 20px 20px 0; }

.fractal-widget-visualparticipantsmodal .modal-header .modal-tab { border-bottom: 2px solid transparent; cursor: pointer; display: inline-block; margin: 0 10px; padding-bottom: 2px; transition: border 0.2s ease-in-out; }

.fractal-widget-visualparticipantsmodal .modal-header .modal-tab:first-of-type { margin-left: 0; }

.fractal-widget-visualparticipantsmodal .modal-header .modal-tab.selected { border-bottom: 2px solid #1abc9c; }

.fractal-widget-visualparticipantsmodal .modal-body { padding: 10px 20px; }

.fractal-widget-visualparticipantsmodal .modal-body.modal-scrollable { height: calc(100% - 100px); overflow: auto; }

.fractal-widget-visualparticipantsmodal .modal-body .hidden { display: none; }

.fractal-widget-visualparticipantsmodal .modal-body .member-wrapper { margin-bottom: 15px; }

.fractal-widget-visualparticipantsmodal .modal-body .member-bottom { min-height: 8px; }

.fractal-widget-visualparticipantsmodal .modal-body .member-description { display: inline-block; margin-left: 10px; vertical-align: bottom; }

.fractal-widget-visualparticipantsmodal .modal-body .member-description a { font-weight: normal; }

.fractal-widget-visualparticipantsmodal .modal-body .modal-section { transition: opacity 0.2s ease-in-out; }

.fractal-widget-visualparticipantsmodal .modal-body .visible { display: initial; }

.fractal-widget-visualparticipantsmodal .fractal-spinner-outer { position: relative; top: -50%; }

.fractal-widget-visualparticipantsmodal .fractal-spinner-outer .spinner-inner { font-size: 40px; }

.fractal-widget-visualparticipantsmodal .modal-member-list-empty-state { font-size: 14px; font-weight: lighter; position: relative; text-align: center; top: 35%; }

.fractal-widget-visualparticipantsmodal .modal-member-list-empty-state p { margin: 10px 0; }

.fractal-widget-visualparticipantsmodal .modal-member-list-empty-state p a { font-weight: lighter; }

.fractal-widget-visualparticipantsmodal .visual-wrapper { margin: 10px 0; }

.fractal-widget-visualparticipantsmodal .visual-flyover { padding: 0 10px 10px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-photo { float: left; margin: 10px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-photo img { border-radius: 50%; height: 60px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-participant-info { display: inline-block; list-style-type: none; margin: 10px 0 0; position: relative; text-align: left; width: 50%; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-participant-info .visual-participant-name { font-size: 14px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-participant-info li { line-height: 20px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-flyover-links { clear: both; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-flyover-links .visual-flyover-link-item { border: 1px solid lightgrey; border-radius: 3px; display: inline-block; margin: 0 3px; text-align: center; width: 80px; }

.fractal-widget-visualparticipantsmodal .visual-flyover .visual-flyover-links .visual-flyover-link-item a { color: #797d7f; cursor: pointer; display: inline-block; font-weight: normal; padding: 4px; text-decoration: none; width: 90%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-visual-participants-loaded .visual-participants-admin { margin-top: 10px; }

.fractal-visual-participants-loaded .visual-participants-wrapper { margin: 10px 0; }

.fractal-visual-participants-loaded .visual-participants-wrapper a { cursor: pointer; }

.fractal-visual-participants-loaded .visual-participants-wrapper > div { line-height: 24px; }

.fractal-visual-participants-loaded .visual-photo { display: inline-block; }

.fractal-visual-participants-loaded .visual-photo-counter { background: #bdc3c7; border-radius: 50px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; height: 30px; position: relative; text-align: center; width: 30px; }

.fractal-visual-participants-loaded .visual-photo-counter::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.fractal-visual-participants-loaded .visual-photo-counter span { display: inline-block; position: relative; text-shadow: 0 0 8px rgba(0, 0, 0, 0.1); top: 50%; transform: translateY(-50%); }

.fractal-visual-participants-loaded .visual-photo-wrapper { margin: 10px 0; }

.fractal-visual-participants-loaded .visual-photo-wrapper .visual-participant-link-item { display: inline-block; }

.fractal-visual-participants-loaded .visual-photo-wrapper .member-image-v1 { vertical-align: top; }

.fractal-visual-participants-loaded .visual-stats-wrapper { font-weight: bold; word-spacing: 1px; }

.fractal-visual-participants-loaded .visual-stats-wrapper a { font-weight: bold; }

.fractal-visual-participants-loaded .visual-stats-wrapper .fa-circle { font-size: 7px; margin: 0 10px; vertical-align: middle; }

.fractal-visual-participants-loaded .visual-stats-wrapper .link { color: inherit; cursor: pointer; display: inline-block; text-decoration: none; }

.fractal-visual-participants-loaded .visual-stats-wrapper .__react_component_tooltip.place-bottom.show { margin-top: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-visual-participants .hidden { height: 0; opacity: 0; visibility: hidden; }

.fractal-visual-participants .visible { max-height: 200px; opacity: 1; visibility: visible; }

.fractal-visual-participants .wrapper { transition: opacity 0.2s ease-in-out; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-join-event-btn { margin: 0; }

.f-join-event-btn.f-btn-link { padding: 0; }

.f-join-event-btn.f-btn-link:hover { text-decoration: underline; }

.webstorm-level .widget_container p.f-joined-date { font-size: 16px; font-style: italic; margin-bottom: 8px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body { max-width: 557px; min-height: 344px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .react-tags__suggestions { max-height: 140px; overflow: auto; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body > * { margin-bottom: 16px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body h3 { margin-bottom: 8px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .react-tags__search-wrapper { margin-left: 4px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .react-tags { background: #fff; padding: 4px; width: 100%; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .react-tags .react-tags__selected i.fa-times { border-radius: 100%; color: #444647; height: auto; margin-left: 2px; margin-right: -8px; opacity: 1; padding: 4px 8px; width: auto; z-index: 0; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .react-tags .react-tags__selected i.fa-times:hover { background: rgba(0, 0, 0, 0.1); }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .react-tags__selected .react-tags__selected-tag { margin: 2px 4px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .f-tag-count { display: none; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .f-rmv-tag { color: #444647; margin-left: 8px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-body .f-tags-typeahead .f-tag-wrapper { margin: 2px 4px; }

.ReactModalPortal.fractal-join-event-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer.f-justified-footer { justify-content: flex-end; }

.ReactModalPortal.fractal-join-event-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer.f-justified-footer .f-btn-leave { margin-left: 0; margin-right: auto; }

.ReactModalPortal.fractal-join-event-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer.f-justified-footer .f-btn-leave .fa-door-closed { margin-right: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-backtotop { background: #fff; border-radius: 50px; bottom: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); color: #797d7f; cursor: pointer; font-size: 30px; height: 70px; position: fixed; right: 20px; text-align: center; transition: all 0.2s ease-in-out; width: 70px; }

.fractal-backtotop .fa { transform: translateY(60%); }

.fractal-backtotop:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-secondary-ideas-view-grid .ideaboard-card, .fractal-secondary-ideas-view-list .ideaboard-card { background: #fff; border-radius: 2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer; font-weight: 600; margin: 10px; transition: all 0.2s ease-in-out; /* Nov 2019, ideaboard card redesign - Adding to userhome & package systems for now @todo make this default style, delete above code (could mess with user custom css) */ }

.fractal-secondary-ideas-view-grid .ideaboard-card a, .fractal-secondary-ideas-view-list .ideaboard-card a { text-decoration: none; }

.fractal-secondary-ideas-view-grid .ideaboard-card:hover, .fractal-secondary-ideas-view-list .ideaboard-card:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transform: scale(1.01); z-index: 1; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-description, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-description { color: #444647; font-size: 12px; font-weight: normal; height: 90px; overflow: hidden; padding: 20px 15px 0; text-overflow: ellipsis; word-wrap: break-word; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-footer, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-footer { background: #fff; border-radius: 0 0 2px 2px; color: #444647; height: 40px; padding: 10px 15px 15px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image { background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 2px 2px 0 0; display: flex; flex-direction: column; height: 220px; justify-content: space-between; padding: 15px; transition: height 0.2s ease-in-out; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-title, .fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-campaign-title, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-title, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-campaign-title { color: #fff; display: block; font-weight: 600; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); word-wrap: break-word; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-title, .fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-campaign-title, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-title, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-campaign-title { display: table-caption; min-width: 200px; } }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-status-row, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-status-row { align-items: center; display: flex; justify-content: flex-start; margin-top: 10px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-status-row .f-card-status, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-status-row .f-card-status { font-weight: 400; margin-right: 4px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-status-row .f-card-eye, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-status-row .f-card-eye { border: 1px solid #fff; border-radius: 24%; color: #fff; padding: 2px 5px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-campaign-row, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-campaign-row { align-items: center; display: flex; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-campaign-row .f-card-campaign-image, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-campaign-row .f-card-campaign-image { border: 1px solid #fff; border-radius: 4px; height: 32px; margin-right: 8px; min-width: 32px; width: 32px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-campaign-row .f-card-campaign-title, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-campaign-row .f-card-campaign-title { max-height: 34px; overflow: hidden; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-member-row, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-member-row { align-items: center; display: flex; flex-direction: row; height: 50px; margin-bottom: -32px; margin-top: auto; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-member-row .f-card-screenname, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-member-row .f-card-screenname { color: #fff; font-weight: 600; margin-left: 6px; margin-top: -14px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-member-row .f-card-member-image, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-member-row .f-card-member-image { align-items: center; background-repeat: no-repeat; background-size: cover; border: 2px solid #fff; border-radius: 1000px; color: #fff; display: flex; height: 50px; justify-content: center; min-width: 50px; width: 50px; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-card-image .f-card-member-row .f-card-member-initial, .fractal-secondary-ideas-view-list .ideaboard-card .f-card-image .f-card-member-row .f-card-member-initial { color: #fff; font-size: 20px; font-weight: 100; }

.fractal-secondary-ideas-view-grid .ideaboard-card .__react_component_tooltip.show, .fractal-secondary-ideas-view-list .ideaboard-card .__react_component_tooltip.show { opacity: 1; }

.fractal-secondary-ideas-view-grid .ideaboard-card .__react_component_tooltip.type-light, .fractal-secondary-ideas-view-list .ideaboard-card .__react_component_tooltip.type-light { border: 1px solid #bdc3c7; box-shadow: 0 0 9px -7px #444647; pointer-events: auto; }

.fractal-secondary-ideas-view-grid .ideaboard-card .__react_component_tooltip.type-light.place-bottom::before, .fractal-secondary-ideas-view-list .ideaboard-card .__react_component_tooltip.type-light.place-bottom::before { border-bottom: 8px solid rgba(0, 0, 0, 0.1); }

.fractal-secondary-ideas-view-grid .ideaboard-card .__react_component_tooltip.type-dark, .fractal-secondary-ideas-view-list .ideaboard-card .__react_component_tooltip.type-dark { border: 1px solid #444647; }

.fractal-secondary-ideas-view-grid .ideaboard-card .__react_component_tooltip .f-hidden-card-tooltip, .fractal-secondary-ideas-view-list .ideaboard-card .__react_component_tooltip .f-hidden-card-tooltip { display: inline-block; white-space: nowrap; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign { background: #fff; border-radius: 4px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; margin: 8px; position: initial; transition: all 0.3s ease; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign a, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign a { text-decoration: none; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign:hover, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover { box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.1); transform: scale(1); }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements { position: relative; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite { align-items: center; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 50%; bottom: -16px; color: #999ea1; display: flex; font-size: 14px; height: 32px; justify-content: center; position: absolute; width: 32px; z-index: 1; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite.f-is-favorite, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite.f-is-favorite { background: #f1c40f; border: 1px solid #f1c40f; color: #fff; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite:hover, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite:hover { transform: scale(1.05); }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-hidden-indicator, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-hidden-indicator { border-bottom: 36px solid #bdc3c7; border-left: 36px solid transparent; border-right: 36px solid transparent; position: absolute; right: -24px; top: -6px; transform: rotate(45deg); }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-hidden-indicator i, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-hidden-indicator i { background: #bdc3c7; bottom: -30px; color: #fff; font-size: 16px; left: -10px; position: absolute; transform: rotate(-45deg); }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-top .f-card-title, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-top .f-card-title { -webkit-box-orient: vertical; color: #444647; display: -webkit-box; font-size: 18px; font-weight: 600; -webkit-line-clamp: 2; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image { border-radius: 0; height: 144px; margin: 0; padding: 0; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member { align-items: center; display: flex; margin: -32px 24px 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper { background: #f5f5f6; border: 2px solid #fff; border-radius: 4px; height: 40px; margin-left: -2px; min-width: 40px; position: relative; width: 40px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper .f-card-campaign-image, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper .f-card-campaign-image { border-radius: 4px; height: 100%; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper::after, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-image-wrapper::after { background: transparent; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; content: ''; height: 34px; left: 0; position: absolute; top: 0; width: 34px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-title, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-screenname, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-campaign-title, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-screenname { color: #797d7f; font-size: 12px; font-weight: 100; height: 24px; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-teamname, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-teamname { text-transform: capitalize; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-member-image, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-member-image { align-items: center; background: #797d7f; background-repeat: no-repeat; background-size: cover; border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; height: 40px; justify-content: center; min-width: 40px; width: 40px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-member-image .f-card-member-initial, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .f-card-member-image .f-card-member-initial { font-size: 16px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .fa-user-secret, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member .fa-user-secret { font-size: 16px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description { margin-bottom: 0; padding: 20px; position: relative; z-index: 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .fractal-htmlpreview, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .fractal-htmlpreview { -webkit-box-orient: vertical; color: #797d7f; display: -webkit-box; font-size: 12px; font-weight: 400; -webkit-line-clamp: 3; line-height: 20px; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row { display: flex; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row .f-idea-scores, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row .f-idea-scores { display: flex; transform: translateY(-3px); }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row .f-idea-score-footer-item, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-info-row .f-idea-score-footer-item { align-items: center; color: #797d7f; display: flex; justify-content: space-between; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-draft-indicator, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-draft-indicator { border: 1px solid #bdc3c7; color: #bdc3c7; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-btn-link, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-btn-link { font-size: 14px; margin: 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-hidden-card-tooltip-wrap, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-hidden-card-tooltip-wrap { position: absolute !important; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { white-space: nowrap; }

.fractal-secondary-ideas-view-grid .ideaboard-card .f-idea-select-checkbox, .fractal-secondary-ideas-view-list .ideaboard-card .f-idea-select-checkbox { position: absolute; right: 10px; top: 10px; }

.fractal-secondary-ideas-view-grid .ideaboard-card { min-height: 350px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { min-height: 394px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-top { height: 112px; padding: 20px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-top .f-card-title { height: 48px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-info-row { justify-content: space-between; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-footer-item { margin-left: 8px; min-width: 20px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-footer-item:first-child { margin-left: 16px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-footer-item .f-idea-score-footer-text { margin-left: 4px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-description { height: 138px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .fractal-htmlpreview { height: 60px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-favorite { right: 20px; top: 240px; }

.fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-voting-wrapper.f-card-disabled .f-vote-arrow-container .__react_component_tooltip { top: 28px !important; }

.fractal-secondary-ideas-view-list { max-width: 100%; transition: max-width 0.3s ease-in-out; width: 100%; }

.fractal-secondary-ideas-view-list .ideaboard-card { width: calc(100% - 20px); }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign { flex-direction: row; margin-bottom: 24px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .fractal-textarea-modal { overflow: auto; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite { display: none; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-absolute-elements .f-idea-score-favorite.f-is-favorite { display: flex; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign > a { width: 100%; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign.f-card-has-pinned-comment { justify-content: space-between; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign.f-card-has-pinned-comment > a { display: block; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-voting-wrapper { display: flex; left: 0; margin: 24px 0 24px 24px; opacity: 1; padding: 0; position: relative; top: 0; visibility: visible; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-info-row { justify-content: unset; margin-bottom: 12px; }

@media (max-width: 1023px) { .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-info-row { flex-wrap: wrap; line-height: 24px; }
  .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-info-row .f-status-indicator { margin-right: 24px; }
  .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-info-row .f-idea-score-footer-item { font-size: 14px; margin-left: 0; } }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-screenname, .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-date { color: #797d7f; font-family: Lato, sans-serif; font-size: 14px; margin-right: 24px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-status-indicator { transform: translateY(-2px); }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-top { padding: 20px 20px 0; }

@media (max-width: 1023px) { .fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-top { padding: 20px 70px 0 20px; } }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description-wrap { padding-bottom: 24px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description { height: auto; padding: 20px 20px 4px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .f-card-showmore { background: #fff; border: none; cursor: pointer; display: inline; font-size: 12px; font-weight: normal; padding-left: 8px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description .fractal-htmlpreview { display: inline; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description.f-card-short-description { max-height: 130px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description.f-card-long-description { max-height: 150vh; transition: max-height 1s; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-card-description.f-card-long-description .fractal-htmlpreview { -webkit-box-orient: initial; display: inline; -webkit-line-clamp: 99999; overflow: visible; text-overflow: unset; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-footer-item { font-size: 14px; margin-left: 24px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-footer-item .f-idea-score-footer-text { margin-left: 4px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign .f-idea-score-favorite { right: 22px; top: 22px; }

.fractal-secondary-ideas-view-list .ideaboard-card.f-nov-2019-card-redesign:hover .f-card-absolute-elements .f-idea-score-favorite { display: flex; }

.fractal-secondary-ideas-view-list .f-idea-board-pinned-comment { margin: 0; max-width: calc(100% - 20px); padding: 0 0 0 20px; }

.fractal-secondary-ideas-view-list .f-idea-board-pinned-comment .f-image-block, .fractal-secondary-ideas-view-list .f-idea-board-pinned-comment .f-file-block { margin-top: 8px; }

.fractal-secondary-ideas-view-list .f-idea-board-pinned-comment [data-class='f-comment-wrapper-pinned'] .__react_component_tooltip { left: -70px !important; top: -50px !important; }

@media (min-width: 1260px) { .fractal-secondary-ideas-view-list .f-idea-board-pinned-comment [data-class='f-comment-wrapper-pinned'] .__react_component_tooltip { left: -68px !important; top: -36px !important; width: 188px !important; } }

@media (max-width: 1259px) { .fractal-secondary-ideas-view-list .f-idea-board-pinned-comment [data-class='f-comment-wrapper-pinned'] .__react_component_tooltip.place-top::after { left: 75% !important; } }

.ideaboard-sidebarred .fractal-secondary-ideas-view-list { max-width: calc(100% - 260px); transition: max-width 0.2s ease-in-out; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-vote-chips { background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); color: #444647; font-family: Lato, sans-serif; height: 68px; margin: 2rem 0 2rem 2rem; padding: 8px; position: relative; text-align: center; width: 48px; }

.f-vote-chip-count { display: block; font-size: 18px; font-weight: 500; height: 28px; letter-spacing: 0.02em; line-height: 28px; margin: 0 auto 4px; text-align: center; width: 100%; }

.f-vote-chip-text { font-size: 12px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder { background: #e7e9eb; border: 1px solid #d5d9db; border-radius: 2px; height: 351px; margin: 10px; transition: all 0.2s ease-in-out; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder:hover, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder:hover { box-shadow: 0 5px 15px -6px #444647; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-1, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-1 { background-color: #d5d9db; height: 15px; top: 0; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-2, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-2 { background-color: #d5d9db; height: 220px; top: 0; width: 20px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-3, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-3 { background-color: #d5d9db; height: 15px; top: 205px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-4, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-4 { background-color: #d5d9db; height: 220px; right: 0; top: 0; width: 20px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-5, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-5 { background-color: #d5d9db; border: 2px solid #fff; border-radius: 1000px; height: 50px; left: 10px; top: 185px; width: 50px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-6, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-6 { height: 20px; left: 20px; top: 185px; width: 55px; z-index: -1; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-7, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-7 { background: #fff; height: 22px; top: 219px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-8, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-8 { background: #fff; height: 110px; left: 0; top: 235px; width: 18px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-9, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-9 { background: #fff; height: 110px; right: 0; top: 235px; width: 18px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-10, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-10 { background: #fff; height: 5px; right: 0; top: 255px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-11, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-11 { background: #fff; height: 5px; right: 0; top: 273px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-12, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-12 { background: #fff; height: 5px; right: 0; top: 291px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-13, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-13 { background: #fff; height: 50px; right: 0; top: 310px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-14, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-14 { background-color: #d5d9db; height: 160px; top: 30px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row.row-14::before, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row.row-14::before { background-color: #d5d9db; bottom: -20px; content: ''; display: block; height: 30px; left: 0; position: absolute; width: 80px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-background, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-background { height: 100%; overflow: hidden; position: relative; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-footer, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-footer { bottom: 0; display: flex; justify-content: space-between; margin-bottom: -2px; padding: 16px; position: absolute; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-footer .f-footer-stats, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-footer .f-footer-stats { display: flex; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-footer .fa-arrow-up, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-footer .fa-arrow-up { margin-right: 22px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-footer .fa-star-o, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-footer .fa-star-o { font-size: 16px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .card-image, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .card-image { background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; height: 161px; margin-top: 30px; padding: 20px; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder .masking-row, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder .masking-row { background: #e7e9eb; position: absolute; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign div, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign div { height: 16px; margin-bottom: 8px; position: static; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top { margin-bottom: 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:first-child, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:first-child { width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:nth-child(2), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:nth-child(2) { margin-bottom: 24px; width: 50%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:nth-child(3), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top div:nth-child(3) { width: 46%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-image, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-image { background: #bdc3c7; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description { margin-bottom: 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:first-child, .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:first-child { width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(2), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(2) { margin-bottom: 48px; width: 100%; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(3), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(3) { width: 50%; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder { background: #fff; border-radius: 4px; height: 172px; padding: 26px 24px 26px 80px; width: calc(100% - 20px); }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign { flex-direction: column; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign div { border-radius: 4px; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-top-vote { display: block; height: 64px; left: -56px; position: absolute; top: 0; width: 32px; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top { height: auto; padding: 0; position: relative; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top > div:first-child { height: 20px; margin-bottom: 15px; width: 529px; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top > div:nth-child(2), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top > div:nth-child(3), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top > div:nth-child(4), .fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-top > div:nth-child(5) { display: inline-block; height: 20px; margin-bottom: 15px; margin-right: 24px; position: relative; width: 104px; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description { clear: both; padding: 0; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:first-child { height: 20px; margin-bottom: 6px; width: 100%; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(2) { height: 20px; margin-bottom: 0; width: 439px; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-description div:nth-child(3) { display: none; }

.fractal-secondary-ideas-view-list .ideaboard-card-placeholder.f-nov-2019-card-redesign .f-card-image { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-participant-card { background: #fff; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); font-size: 14px; margin: 0 10px 16px 8px; padding: 24px; width: 100%; }

.f-participant-card > .f-btn-link { font-size: 14px; margin: 0; padding: 0; text-align: initial; width: 100%; }

.f-participant-card > .f-btn-link:hover span { text-decoration: none; }

.f-participant-card.f-participant-member { background: #e9f6ff; margin-bottom: 32px; position: relative; }

.f-participant-card.f-participant-member::after { border-bottom: 2px dashed #bdc3c7; bottom: -17px; content: ''; height: 1px; left: 0; position: absolute; width: 100%; }

.f-participant-card.f-no-participant { display: flex; justify-content: center; }

.f-participant-card:first-of-type { margin-top: 10px; }

.f-participant-card .f-participant-user-info { display: flex; justify-content: space-between; }

.f-participant-card .f-participant-user-info .f-participant-name-header { align-items: center; display: flex; }

.f-participant-card .f-participant-user-info .f-participant-name-header a { font-size: 12px; font-weight: 400; margin-left: 4px; }

.f-participant-card .f-participant-user-info .f-participant-naming-wrap { display: flex; }

.f-participant-card .f-participant-user-info .f-participant-actions { display: flex; }

.f-participant-card .f-participant-user-info .f-participant-actions .f-dropdown-btn { margin: 0 0 0 16px; }

.f-participant-card .f-participant-user-info .f-participant-actions .f-dropdown-options { margin-top: 0; top: 28px; }

.f-participant-card .f-participant-user-info .f-participant-actions p { align-items: center; display: flex; height: 24px; margin-right: 16px; margin-top: 0; }

.f-participant-card .f-participant-user-info .f-participant-actions p i { margin-right: 4px; }

.f-participant-card .f-participant-user-info .f-participant-actions .f-toggle-label { height: 24px; width: 44px; }

.f-participant-card .f-participant-user-info .f-participant-actions .f-toggle-inner { height: 18px; top: 3px; width: 18px; }

.f-participant-card .f-participant-user-info .f-participant-actions .fa-times { color: #e74c3c; }

.f-participant-card .f-participant-user-info .f-participant-actions .fa-check { color: #2ecc71; }

.f-participant-card .f-participant-user-info h3 { color: #444647; font-size: 16px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-participant-card .f-participant-user-info p { color: #797d7f; }

.f-participant-card .f-participant-expertise-container { display: flex; justify-content: space-between; margin-top: 12px; }

.f-participant-card .f-participant-expertise-container .f-participant-expertise p { color: #797d7f; margin-top: 4px; max-width: 420px; }

.f-participant-card .f-participant-expertise-container .f-participant-projects { flex-basis: 50%; }

.f-participant-card .f-participant-expertise-container .f-no-project { color: #999ea1; font-style: italic; }

.f-participant-card p { margin-top: 4px; }

.f-participant-card h4 { color: #444647; }

.f-participant-card .member-image-v1 { margin-right: 12px; }

.f-participant-card .member-image-v1 .member-initial, .f-participant-card .member-image-v1 .member-img { height: 40px; width: 40px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-secondary-ideas-view-list .participant-card-placeholder, .fractal-secondary-ideas-view-grid .participant-card-placeholder { background: #fff; border-radius: 4px; flex-direction: column; padding: 24px; transition: all 0.2s ease-in-out; width: 100%; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info, .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info { display: block; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info div, .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info div { border-radius: 4px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info > div:nth-child(n + 2), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info > div:nth-child(n + 2) { height: 16px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info > div:nth-child(2), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info > div:nth-child(2) { margin-bottom: 8px; width: 90px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info > div:nth-child(3), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info > div:nth-child(3) { width: 320px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info, .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info { display: flex; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info .f-text, .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info .f-text { display: flex; flex-direction: column; margin-left: 16px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info .f-text div:nth-child(1), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info .f-text div:nth-child(1) { margin-bottom: 4px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info .f-text div, .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info .f-text div { height: 16px; margin-bottom: 12px; width: 140px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info .f-text div:nth-child(2), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info .f-text div:nth-child(2) { width: 90px; }

.fractal-secondary-ideas-view-list .participant-card-placeholder .f-card-info .f-img-info > div:nth-child(1), .fractal-secondary-ideas-view-grid .participant-card-placeholder .f-card-info .f-img-info > div:nth-child(1) { border-radius: 100%; height: 40px; width: 40px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-secondary-ideas-view-grid { align-content: baseline; display: flex; flex-basis: auto; flex-wrap: wrap; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* below filter-breakpoint, sidebar (filter) slides into fixed position overlaying grid */
.fractal-secondary-ideas-view-grid { /** Explicit grid wrapper widths avoids having to worry about how it would be calculated otherwise Single card needs their calcs to work off of the full width (not just one as would be with `width: auto`) Cards with longstringsofnonbreakingtext in .card-description would otherwise affect width of this ancestor .fractal-secondary-ideas-view-grid We now have reliable widths for the cards to calculate %'s off of */ width: 100%; /** Responsive card widths Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row */ /* Full width no sidebar */ /** END: Responsive card widths */ }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-grid .ideaboard-card { transition: all 0.3s; width: calc((100% - 100px) / 5); }

@media (max-width: 1170px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 80px) / 4); } }

@media (max-width: 895px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 60px) / 3); } }

@media (max-width: 700px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 40px) / 2); } }

@media (max-width: 425px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-secondary-ideas-view-grid .ideaboard-card { min-width: 200px; width: 100%; } }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 80px) / 5); }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .ideaboard-card-custom-label, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .ideaboard-card-custom-label { padding: 20px 20px 0; }

.fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign .ideaboard-card-custom-label span, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .ideaboard-card-custom-label span { background-color: #e7e7e7; color: #888; padding: 2px 5px; }

@media (max-width: 1170px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 64px) / 4); } }

@media (max-width: 895px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 48px) / 3); } }

@media (max-width: 700px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 32px) / 2); } }

@media (max-width: 425px) { .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { min-width: 200px; width: 100%; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-biw-spinner-outer { align-items: center; display: flex; justify-content: center; }

.f-biw-spinner-outer .f-biw-spinner-inner { background-color: rgba(0, 0, 0, 0.35); border-radius: 100%; height: 256px; width: 256px; }

.f-biw-spinner-outer .f-biw-spinner-inner img { transform: rotate(-10deg); width: 100%; }

.f-biw-spinner-outer.f-biw-sm .f-biw-spinner-inner { height: 128px; width: 128px; }

.darkMode .f-biw-spinner-inner { background-color: rgba(255, 255, 255, 0.1); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-left-wing { background: #d5d9db; border-right: 4px solid #e7e9eb; border-top: 2px solid #e7e9eb; box-sizing: border-box; color: #444647; height: 100vh; left: 0; padding: 16px 0; position: fixed; top: 99px; width: 224px; z-index: 1; }

.f-best-idea-left-wing .f-header { align-items: center; display: flex; justify-content: space-between; padding: 0 16px; }

.f-best-idea-left-wing h2 { font-size: 14px; }

.f-best-idea-left-wing.f-empty-list-left { display: flex; flex-direction: column; }

.f-best-idea-left-wing.f-empty-list-left .f-list-container { align-items: center; color: #797d7f; display: flex; height: 100%; }

.f-best-idea-left-wing.f-empty-list-left .f-list-container span { transform: translateY(-75px); }

.f-best-idea-left-wing .f-list-container { margin: 8px 0; }

.f-best-idea-left-wing .f-list-container span { font-size: 14px; padding: 0 20px; text-align: center; }

.f-best-idea-left-wing .f-list-container .f-list-item-name { text-align: left; }

.f-best-idea-left-wing .f-add-button { align-items: center; background: transparent; border-radius: 50%; color: #444647; display: flex; font-size: 12px; height: 24px; justify-content: center; margin: 0; padding: 0; width: 24px; }

.f-best-idea-left-wing .f-list-dragging { background: #3498db; height: 2px; width: 100%; }

.f-best-idea-left-wing li { align-items: center; cursor: pointer; display: flex; font-size: 14px; justify-content: space-between; list-style: none; padding: 4px 16px; }

.f-best-idea-left-wing li.f-selected .f-list-item-name .fa-check { color: #1abc9c; font-size: 10px; margin-left: -18px; margin-right: 8px; }

.f-best-idea-left-wing li.f-renaming { margin-left: 0; }

.f-best-idea-left-wing li .f-dropdown-btn { color: #444647; }

.f-best-idea-left-wing li .f-dropdown-btn:hover { background: #e7e9eb; }

.f-best-idea-left-wing li .f-dropdown-btn:focus, .f-best-idea-left-wing li .f-dropdown-btn:focus:not(:active) { background: #bdc3c7; box-shadow: 0 0 0 2px #999ea1; color: #fff; }

.f-best-idea-left-wing li .f-dropdown-btn:active { background: #999ea1; color: #fff; }

.f-best-idea-left-wing li .f-dropdown-options { margin-top: 0; }

.f-best-idea-left-wing li .f-dropdown-options li { padding: 0; }

.f-best-idea-left-wing li .f-dropdown-options li span { display: flex; padding-left: 16px; width: 100%; }

.f-best-idea-left-wing .f-create-container { align-items: center; display: flex; flex-direction: row; margin-left: 16px; }

.f-best-idea-left-wing .f-create-button { margin-left: 4px; margin-right: 0; padding: 0; width: 26px; }

.f-best-idea-left-wing .f-cancel-create-button { margin-left: 4px; margin-right: 0; padding: 0; width: 26px; }

.f-best-idea-left-wing .f-create-list-btn { display: block; font-size: 14px; margin: 8px auto 0; }

.f-best-idea-left-wing .fractal-input input { background: #fff; font-size: 12px; height: 24px; width: 130px; }

.darkMode .f-best-idea-left-wing { background-color: #797d7f; border-color: #1e1f20; color: #fff; }

.darkMode .f-best-idea-left-wing .f-btn-subtle:hover { background: rgba(255, 255, 255, 0.2); }

.darkMode .f-best-idea-left-wing .f-btn-subtle:active { background: rgba(255, 255, 255, 0.7); color: #797d7f; }

.darkMode .f-best-idea-left-wing .f-btn-subtle:focus { background: rgba(255, 255, 255, 0.5); color: #797d7f; }

.darkMode .f-best-idea-left-wing .f-dropdown-btn { background: transparent; border: none; color: #fff; }

.darkMode .f-best-idea-left-wing .f-dropdown-btn:hover { background: rgba(255, 255, 255, 0.2); }

.darkMode .f-best-idea-left-wing .f-dropdown-btn:active { background: rgba(255, 255, 255, 0.7); }

.darkMode .f-best-idea-left-wing .f-dropdown-btn:focus { background: rgba(255, 255, 255, 0.5); }

.darkMode .f-best-idea-left-wing .f-dropdown-options { color: #444647; }

.darkMode .f-best-idea-left-wing input { color: #444647; }

.darkMode .f-best-idea-left-wing.f-empty-list-left .f-list-container { color: #fff; }

.cozy .f-best-idea-left-wing { top: 100px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-biw-skeleton { overflow-x: scroll; transition: all 0.2s ease-in-out; }

.f-biw-skeleton .idea { background: #f5f5f6; border: 1px solid #d5d9db; border-radius: 4px; display: flex; padding: 6px 0; }

.f-biw-skeleton .idea .image { border-radius: 4px; height: 32px; width: 32px; }

.f-biw-skeleton .idea .left { margin-left: 8px; }

.f-biw-skeleton .idea .right { margin: 0 8px; width: 100%; }

.f-biw-skeleton .idea .right :first-child { height: 14px; width: 60%; }

.f-biw-skeleton .idea .right :last-child { height: 14px; margin-top: 5px; width: 100%; }

.cozy .f-biw-skeleton .idea { padding: 4px 0; }

.cozy .f-biw-skeleton .idea .image { border-radius: 2px; height: 24px; width: 24px; }

.cozy .f-biw-skeleton .idea .left { margin-left: 4px; }

.cozy .f-biw-skeleton .idea .right { margin: 0 8px 0 4px; }

.cozy .f-biw-skeleton .idea .right :first-child { margin-top: 2px; }

.cozy .f-biw-skeleton .idea .right :last-child { margin-top: 4px; }

.cozy .f-biw-skeleton .idea .right > * { height: 8px; }

.darkMode .f-biw-skeleton .idea { background: rgba(0, 0, 0, 0.2); border: none; }

.darkMode .f-biw-skeleton .idea .animate-foreground { background: rgba(0, 0, 0, 0.3); background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.6) 18%, rgba(0, 0, 0, 0.3) 33%); background-size: 800px 104px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-right-wing { background: #d5d9db; border-left: 4px solid #e7e9eb; border-top: 2px solid #e7e9eb; box-sizing: border-box; color: #444647; height: calc(100vh - 100px); padding: 16px 0; position: fixed; right: 0; top: 99px; width: 224px; z-index: 1; }

.f-best-idea-right-wing.f-right-loading { align-items: center; display: flex; justify-content: center; }

.f-best-idea-right-wing h2 { font-size: 14px; margin-left: 16px; }

.f-best-idea-right-wing .f-drop-container { height: 100%; margin: 8px 0; overflow-y: auto; padding: 0 4px; }

.f-best-idea-right-wing .f-drop-container.f-empty-list-right { display: flex; }

.f-best-idea-right-wing .f-drop-container.f-empty-list-right .f-scroll-lists { align-items: center; display: flex; flex-direction: column; justify-content: center; }

.f-best-idea-right-wing .f-drop-container.f-empty-list-right span:not(.f-scroll-lists) { color: #797d7f; font-size: 12px; margin: 0 40px; text-align: center; transform: translateY(-75px); }

.f-best-idea-right-wing .f-drop-container.f-hover { border: 2px dashed #797d7f; }

.f-best-idea-right-wing .f-idea { background: #fff; border: 0; }

.f-best-idea-right-wing .f-list-skel { background: #fff; }

.darkMode .f-best-idea-right-wing { background-color: #797d7f; border-color: #1e1f20; color: #fff; }

.darkMode .f-best-idea-right-wing.f-right-loading i, .darkMode .f-best-idea-right-wing .f-spinner i { color: #fff; }

.darkMode .f-best-idea-right-wing .f-drop-container.f-hover { border-color: #fff; }

.darkMode .f-best-idea-right-wing .f-empty-list-right span { color: #fff; }

.darkMode .f-best-idea-right-wing .f-idea-title span { color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-eval-results-square, .f-eval-results-circle { align-items: center; box-sizing: content-box; color: #444647; display: flex; font-size: 10px; height: 12px; justify-content: center; margin: 8px; padding: 8px; position: relative; width: 12px; }

.f-eval-results-square .__react_component_tooltip.show, .f-eval-results-circle .__react_component_tooltip.show { min-width: 144px; opacity: 1; text-align: center; }

.f-eval-results-square .f-results-square-tip, .f-eval-results-circle .f-results-square-tip { font-size: 10px; }

.f-eval-results-square .f-results-square-tip a, .f-eval-results-circle .f-results-square-tip a { color: #3498db; }

.f-eval-results-square .f-score-text, .f-eval-results-circle .f-score-text { font-weight: bold; }

.f-eval-results-square .f-matrix-link, .f-eval-results-circle .f-matrix-link { display: block; font-weight: normal; margin-top: 4px; }

.f-eval-results-square { background: #fff; border-radius: 4px; }

.f-eval-results-square.f-has-score .f-score-text-top { transform: translateY(-4px); }

.f-eval-results-square.f-has-score.f-step-completed .f-score-text { color: #16a085; }

.f-eval-results-circle { background-color: #e7e9eb; border: 1px solid #d5d9db; border-radius: 50%; }

.f-eval-results-circle.f-has-score { color: #fff; }

.f-score-progress-container { background-color: #d5d9db; border-radius: 0 0 4px 4px; bottom: 0; height: 8px; left: 0; position: absolute; width: 100%; }

.f-score-progress-container .f-score-progress-bar { background-color: #2ecc71; display: block; height: 8px; }

.f-score-progress-tooltip-container { background-color: #d5d9db; border-radius: 4px; height: 4px; margin: 4px 4px 6px; width: calc(100% - 8px); }

.f-score-progress-tooltip-container .f-score-progress-bar { background-color: #2ecc71; border-radius: 4px; display: block; height: 4px; }

.darkMode .f-eval-results-square .f-results-square-tip a, .darkMode .f-eval-results-circle .f-results-square-tip a { color: #3498db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea { align-items: center; background: #f5f5f6; border: 1px solid #d5d9db; border-radius: 4px; color: #444647; display: flex; font-size: 12px; font-weight: normal; height: 48px; line-height: 12px; margin-bottom: 4px; position: relative; text-decoration: none; width: 100%; }

.f-idea .f-idea-selected-by { border-top-left-radius: 4px; border-top-right-radius: 4px; color: #fff; max-width: 200px; overflow: hidden; padding: 0 4px; position: absolute; text-overflow: ellipsis; top: -16px; white-space: nowrap; }

.f-idea a { color: #1e1f20; cursor: pointer; }

.f-idea:hover { background-color: #e7e9eb; }

.f-idea img { border-radius: 4px; height: 32px; margin: 8px; min-width: 32px; width: 32px; }

.f-idea img::after { border: solid 1px rgba(0, 0, 0, 0.1); border-radius: 4px; bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; }

.f-idea.f-idea-dragging { opacity: 0.6; }

.f-idea.f-drag-cursor { cursor: move; }

.f-idea .f-idea-wrapper { align-items: center; display: flex; }

.f-idea .f-idea-title { -webkit-box-orient: vertical; display: -webkit-box; flex: 1; -webkit-line-clamp: 2; line-height: 16px; max-height: 34px; overflow: hidden; }

.f-idea .f-idea-no-img { margin: 8px 0 8px 8px; }

.f-idea .f-idea-score { align-items: center; background: #2f89cc; border-radius: 50%; display: flex; height: 24px; justify-content: center; margin: 8px; width: 24px; }

.f-idea .f-idea-score span { color: #fff; font-size: 12px; font-weight: 600; }

.f-idea .f-idea-score-btn { align-items: center; background: #bdc3c7; border-color: #bdc3c7; color: #fff; cursor: inherit; display: flex; font-size: 12px; height: 24px; justify-content: center; margin-right: 8px; padding: 0 8px; }

.f-idea .f-idea-score-btn.f-positive-score { background: #d5f5e3; border-color: #2ecc71; color: #2ecc71; }

.f-idea .f-idea-score-btn.f-negative-score { background: #f7bfb9; border-color: #e74c3c; color: #e74c3c; }

.f-idea .f-idea-score-btn .f-scores-count { margin-left: 4px; }

.f-idea .f-card-footer-left { display: inline-flex; }

.f-idea .f-card-footer-left .f-member-wrapper { margin-left: 0; margin-right: 7px; }

.f-idea.f-idea-large { align-items: flex-start; box-sizing: border-box; flex-direction: column; height: auto; justify-content: space-between; }

.f-idea.f-idea-large * { box-sizing: border-box; }

.f-idea.f-idea-large img { margin: 0 8px 0 0; }

.f-idea.f-idea-large .f-idea-title:hover { cursor: pointer; text-decoration: underline; }

.f-idea.f-idea-large .f-idea-title span { font-size: 12px; font-weight: 700; }

.f-idea.f-idea-large .f-card-row { align-items: center; display: flex; padding: 8px; width: 100%; }

.f-idea.f-idea-large .f-card-row + .f-card-row { padding-top: 0; }

.f-idea.f-idea-large .f-eval-results-square { height: 28px; width: 28px; }

.f-idea.f-idea-large .f-card-step-label { display: inline-block; margin-right: 8px; }

.f-idea.f-idea-large .f-card-step-days { color: #797d7f; display: inline-block; font-size: 10px; font-style: italic; margin-left: 4px; }

.f-idea.f-idea-large .f-card-link { color: #3498db; }

.f-idea.f-idea-large .f-card-link:hover { cursor: pointer; text-decoration: underline; }

.f-idea.f-idea-large .fa-heartbeat { color: #27ae60; display: inline-block; font-size: 14px; margin-right: 8px; }

.f-idea.f-idea-large .fa-heartbeat.f-heartbeat-red { color: #e74c3c; }

.f-idea.f-idea-large .f-progress-container .f-progress-bar { margin-bottom: 6px; margin-top: 4px; }

.f-idea.f-idea-large .fa-clock { color: #444647; display: inline-block; font-size: 14px; margin-right: 4px; }

.f-idea.f-idea-large .f-memo-thumbnail-date { color: #797d7f; font-size: 10px; font-style: italic; }

.f-idea.f-idea-large .f-card-footer { height: auto; justify-content: space-between; }

.f-idea.f-idea-large .f-card-footer-left { align-items: center; display: inline-flex; justify-content: flex-start; }

.f-idea.f-idea-large .f-card-footer-left .f-idea-action-items-open { display: inline-block; }

.f-idea.f-idea-large .f-card-footer-left .fa-clock { transform: translateY(1px); }

.f-idea.f-idea-large .f-card-footer-left .__react_component_tooltip.place-bottom.show { margin-top: 15px; }

.darkMode .f-idea { background-color: rgba(0, 0, 0, 0.2); border: none; color: #fff; }

.darkMode .f-idea:hover { background-color: rgba(0, 0, 0, 0.4); box-shadow: none; }

.darkMode .f-idea a { color: #fff; }

.darkMode .f-idea .f-idea-score { background-color: #2f89cc; }

.darkMode .f-idea .f-round-score-container span { color: #1e1f20; }

.darkMode .f-idea.f-idea-large .f-memo-thumbnail-date { color: rgba(255, 255, 255, 0.6); }

.darkMode .f-idea.f-idea-large .f-card-step-label, .darkMode .f-idea.f-idea-large .f-idea-step-score, .darkMode .f-idea.f-idea-large .f-card-link, .darkMode .f-idea.f-idea-large .f-card-step-days, .darkMode .f-idea.f-idea-large .f-card-step-days .f-card-link, .darkMode .f-idea.f-idea-large .fa-clock, .darkMode .f-idea.f-idea-large .f-memo-collaborators .fa-users { color: #fff; }

.cozy .f-idea { max-height: 32px; }

.cozy .f-idea .f-idea-title { font-size: 10px; line-height: 12px; margin: 4px 0; max-height: 24px; }

.cozy .f-idea .f-idea-no-img { margin: 4px; }

.cozy .f-idea .f-idea-score { margin: 4px; }

.cozy .f-idea img { border-radius: 2px; height: 24px; margin: 4px; min-width: 24px; width: 24px; }

.cozy .f-idea.f-idea-large { max-height: 9999px; }

.cozy .f-idea.f-idea-large * { font-size: 10px; }

.cozy .f-idea.f-idea-large .f-idea-title span { font-size: 10px; }

.cozy .f-idea.f-idea-large .f-card-row { padding: 2px 4px; }

.cozy .f-idea.f-idea-large .f-progress-container { margin-bottom: 0; padding-bottom: 0; transform: translateY(0); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-idea-owner-filter.f-member-wrapper { align-items: center; display: flex; margin-left: 4px; margin-right: 0; padding: 0; }

.f-idea-owner-filter.f-member-wrapper .member-image-v1 { align-items: center; display: inline-flex; margin-left: 0; }

.f-idea-owner-filter.f-member-wrapper .member-image-v1 > span { display: inline-block; margin-left: 8px; }

.f-idea-owner-filter.f-member-wrapper .member-image-v1::after { display: none; }

.f-idea-owner-filter.f-member-wrapper .f-member-name { display: inline-block; font-size: 14px; line-height: 14px; margin-left: 4px; }

.f-idea-owner-filter.f-member-wrapper .f-member-anonymous .f-member-name { margin-left: 0; }

.f-idea-owner-filter.f-member-wrapper .f-member-name-unassigned { color: #999ea1; cursor: unset; margin-right: 5px; }

.f-idea-owner-filter.f-member-wrapper .member-image-v1 .member-initial, .f-idea-owner-filter.f-member-wrapper .member-img { height: 16px; width: 16px; }

.f-idea-owner-filter.f-member-wrapper .member-image-v1 .member-initial span, .f-idea-owner-filter.f-member-wrapper .member-img span { margin-left: 0; }

.f-member-icon-wrapper-anonymous { background-color: #95a5a6; }

.fractal-ideafilters-tabs .filter-inline-input .f-member-wrapper + .filter-label { margin-left: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-member-wrapper { align-items: center; display: flex; margin-right: 4px; padding: 0; }

.f-member-wrapper .member-image-v1 { align-items: center; display: inline-flex; margin-left: 0; }

.f-member-wrapper .member-image-v1 > span { display: inline-block; margin-left: 8px; }

.f-member-wrapper .member-image-v1::after { display: none; }

.f-member-wrapper .f-member-name { display: inline-block; font-size: 14px; line-height: 14px; margin-left: 4px; }

.f-member-wrapper .f-member-anonymous .f-member-name { margin-left: 0; }

.f-member-wrapper .f-member-name-unassigned { color: #999ea1; cursor: unset; }

.f-member-wrapper .member-image-v1 .member-initial, .f-member-wrapper .member-img { height: 24px; width: 24px; }

.f-member-wrapper .member-image-v1 .member-initial span, .f-member-wrapper .member-img span { margin-left: 0; }

.f-idea-large .f-member-wrapper .member-image-v1 .member-initial, .f-idea-large .f-member-wrapper .member-img { font-size: 10px; height: 20px; margin: 0; min-width: 20px; width: 20px; }

.f-idea-large .f-member-wrapper .member-image-v1, .f-idea-large .f-member-wrapper .member-image-v1 .member-image-v1, .f-idea-large .f-member-wrapper .member-image-v1 .member-image-v1 .member-img { margin: 0; }

.f-member-icon-wrapper-anonymous { background-color: #95a5a6; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.filter-generic-checkboxes-wrapper .f-load-more { cursor: pointer; font-weight: normal; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-memo-collaborators { display: inline-block; margin-right: 12px; }

.f-memo-collaborators .fa-users { color: #444647; display: inline-block; font-size: 14px; margin-right: 4px; transform: translateY(1px); }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-ideafilters-tab { font-size: 14px; }

.fractal-ideafilters-tab .tab-body { overflow: hidden; transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out; }

.fractal-ideafilters-tab .tab-body .tab-body-header { display: flex; justify-content: space-between; }

.fractal-ideafilters-tab .tab-header { color: #444647; font-weight: 600; padding: 10px 0 5px; }

.fractal-ideafilters-tab .tab-header .f-tab-header-title-wrapper { display: flex; justify-content: space-between; }

.fractal-ideafilters-tab .tab-header .f-tab-header-title-wrapper .tab-header-title { color: #444647; font-weight: 600; margin-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; }

.fractal-ideafilters-tab .tab-header .f-tab-header-title-wrapper .f-tab-header-buttons { align-items: center; display: flex; }

.fractal-ideafilters-tab .tab-header .tab-filter-clear { color: #3498db; cursor: pointer; font-size: 10px; margin-right: 0; transition: all 0.2s ease-in-out; }

.fractal-ideafilters-tab .tab-header .tab-filter-clear:hover { color: #196090; }

.fractal-ideafilters-tab .tab-header.tab-collapsable { cursor: pointer; }

.fractal-ideafilters-tab .tab-header.tab-collapsable .tab-filter-clear { margin-right: 10px; }

.fractal-ideafilters-tab .tab-icon-left { margin-right: 10px; }

.fractal-ideafilters-tab .tab-icon-right { color: #3498db; transition: color 0.2s ease-in-out; }

.fractal-ideafilters-tab .tab-icon-right:active { color: #124364; }

.fractal-ideafilters-tab .tab-icon-right:hover { color: #196090; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-progress-container { display: flex; flex-direction: column; width: 100%; }

.f-progress-container .f-progress-bar { background-color: #d5d9db; border-radius: 4px; display: flex; height: 4px; justify-content: space-evenly; width: 100%; }

.f-progress-container span:first-of-type { margin-bottom: 8px; }

.f-progress-container [class^='f-step'] { width: 100%; }

.f-progress-container [class^='f-step']:first-of-type { border-bottom-left-radius: 4px; border-top-left-radius: 4px; }

.f-progress-container [class^='f-step']:last-of-type { border: none; border-bottom-right-radius: 4px; border-top-right-radius: 4px; }

.f-progress-container .f-active-steps { background-color: #1abc9c; }

.f-progress-container.f-progress-mini .f-progress-bar { height: 4px; }

.f-progress-container.f-has-gaps [class^='f-step'] { border-right: 2px solid transparent; }

.f-progress-container.f-has-gaps .f-active-steps { border-right: 2px solid #d5d9db; }

.f-idea.f-idea-large .f-progress-container { margin-bottom: 0; padding-bottom: 0; transform: translateY(-4px); }

.darkMode .f-progress-container.f-card-row .f-progress-bar { background-color: rgba(26, 188, 156, 0.4); }

.darkMode .f-progress-container.f-card-row .f-active-steps { background-color: #1abc9c; }

.darkMode .f-progress-container.f-card-row [class^='f-step']:last-of-type { border: none; }

.darkMode .f-progress-container.f-card-row.f-has-gaps [class^='f-step']:last-of-type { border: none; }

.darkMode .f-progress-container.f-card-row.f-has-gaps [class^='f-step'] { border-right: 2px solid #1abc9c; }

.darkMode .f-progress-container.f-card-row.f-has-gaps [class^='f-step'].f-active-steps { border-right: 2px solid rgba(26, 188, 156, 0.4); margin-right: 2px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-ideafilters-tabs .filter-business-values { display: flex; font-size: 12px; justify-content: space-between; }

.fractal-ideafilters-tabs .filter-category .fractal-collapse, .fractal-ideafilters-tabs .filter-stage .fractal-collapse, .fractal-ideafilters-tabs .filter-status .fractal-collapse { overflow-y: auto; }

.fractal-ideafilters-tabs .filter-tag .filter-generic-checkboxes-wrapper { max-height: 160px; }

.fractal-ideafilters-tabs .filter-inline-input { align-items: center; display: flex; min-height: 17px; position: relative; }

.fractal-ideafilters-tabs .filter-inline-input .filter-label { color: #444647; font-size: 12px; font-weight: normal; margin-bottom: 0; margin-left: 5px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

.fractal-ideafilters-tabs .filter-inline-input .filter-label:hover { cursor: pointer; }

.fractal-ideafilters-tabs .filter-inline-input .filter-label span { display: block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

.fractal-ideafilters-tabs .filter-inline-input .filter-label .f-filter-blank { font-style: italic; padding-right: 3px; }

.fractal-ideafilters-tabs .filter-user-selection-list { font-size: 12px; margin-left: 10px; }

.fractal-ideafilters-tabs .filter-user-selection-list div { display: block; margin-bottom: 3px; }

.fractal-ideafilters-tabs .filter-user-selection-list div span { color: #3498db; cursor: pointer; display: inline-block; font-size: 10px; font-weight: normal; margin-left: 5px; margin-right: 0; transition: all 0.2s ease-in-out; }

.fractal-ideafilters-tabs .filter-none { font-size: 12px; }

.fractal-ideafilters-tabs .filter-search-clear { color: #444647; cursor: pointer; position: absolute; right: 26px; top: 10px; transition: color 0.2s ease-in-out; }

.fractal-ideafilters-tabs .filter-search-clear:hover { color: #121313; }

.fractal-ideafilters-tabs .filter-search-clear .fa-times { margin-left: -16px; }

.fractal-ideafilters-tabs .filter-inline-input .__react_component_tooltip { margin-left: -12px; }

.fractal-ideafilters-tabs .filter-search-input, .fractal-ideafilters-tabs .filter-search-generics-input { color: #444647; font-size: 12px; width: 175px; }

.fractal-ideafilters-tabs .filter-search-input::placeholder, .fractal-ideafilters-tabs .filter-search-generics-input::placeholder { color: #999ea1; }

.fractal-ideafilters-tabs .filter-search-input::-ms-clear, .fractal-ideafilters-tabs .filter-search-generics-input::-ms-clear { display: none; }

.fractal-ideafilters-tabs .filter-search-generics-input { margin-bottom: 10px; }

.fractal-ideafilters-tabs .filter-status-color { border-radius: 100px; display: inline-block; margin-bottom: -1px; margin-left: 5px; padding: 5px; }

.fractal-ideafilters-tabs .filter-generic-checkboxes-wrapper { margin-top: 1px; max-height: 120px; overflow-y: auto; }

.fractal-ideafilters-tabs .filter-select-links { cursor: pointer; font-size: 12px; margin-bottom: 5px; }

.fractal-ideafilters-tabs .filter-title { color: #444647; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; padding: 10px 0; }

.fractal-ideafilters-tabs .fractal-collapse { max-height: 180px; }

.fractal-ideafilters-tabs .fractal-slider { flex: 1; height: 40px; padding: 0 15px 0 7px; }

.fractal-ideafilters-tabs .my-evaluations-tooltip { width: 120px; }

.fractal-ideafilters-tabs .rc-slider-dot { border-color: #999ea1; }

.fractal-ideafilters-tabs .rc-slider-dot-active { border-color: #2980b9; }

.fractal-ideafilters-tabs .rc-slider-handle { background: #2980b9; border: 2px solid #2980b9; transition: all 0.2s ease-in-out; }

.fractal-ideafilters-tabs .rc-slider-handle:active, .fractal-ideafilters-tabs .rc-slider-handle:focus { background: #164666; border: 2px solid #164666; }

.fractal-ideafilters-tabs .rc-slider-rail { background: #fff; }

.fractal-ideafilters-tabs .rc-slider-mark-text { font-size: 10px; }

.fractal-ideafilters-tabs .f-filter-score .rc-slider-dot { background-color: transparent; border-color: transparent; }

.fractal-ideafilters-tabs .f-filter-score .rc-slider-dot:nth-child(odd) { background-color: #fff; border-color: #999ea1; }

.fractal-ideafilters-tabs .f-filter-score .rc-slider-mark-text { visibility: hidden; }

.fractal-ideafilters-tabs .f-filter-score .rc-slider-mark-text:nth-child(odd) { visibility: visible; }

.fractal-ideafilters-tabs .top-header { color: #444647; font-weight: 600; padding: 10px 0; }

.fractal-ideafilters-tabs .rc-slider-track { background: #3498db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .f-export-button { background-color: #fff; border: 0 none; box-sizing: content-box; color: #2ecc71; cursor: pointer; display: block; font-size: 20px; margin-left: auto; margin-top: 15px; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter { margin-bottom: -5px; margin-left: 0; margin-top: 20px; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter.active, .fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter:active, .fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter:focus { background: #d5d9db; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter.filtering { background: #f1c40f; border: 1px solid #f1c40f; color: #fff; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fa-filter::after { padding-right: 0; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fractal-droplist { border-radius: 4px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); margin-top: 10px; padding: 15px; z-index: 11; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fractal-droplist .tab-header { padding: 5px 0; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fractal-droplist #filter-tab-status { padding: 0 0 5px; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .fractal-droplist .filter-status { margin-bottom: 10px; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .pipeline-dashboard-export-wrapper { display: inline-block; float: right; margin-right: 12px; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .pipeline-dashboard-filter-clear { color: #3498db; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin-left: 10px; margin-top: 25px; transition: color 0.2s ease-in-out; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .pipeline-dashboard-filter-clear:active, .fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .pipeline-dashboard-filter-clear:focus { color: #196090; }

.fractal-pipeline-dashboard-v1 .fractal-pipelineDashboardBusinessImpactFilters .pipeline-dashboard-filter-clear:hover { color: #217dbb; }

.fractal-pipeline-dashboard-v1.fractal-click-to-confirm-modal-v1 .f-click-to-confirm-button-confirm { background-color: #2ecc71; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-pipeline-dashboard-v1 * { box-sizing: border-box; }

.fractal-pipeline-dashboard-v1 .pipeline-dashboard-empty { transform: translateY(50%); }

.fractal-pipeline-dashboard-v1 .pipeline-dashboard-empty a { font-size: 14px; }

.fractal-pipeline-dashboard-v1 .pipeline-dashboard-empty .fa-university { color: #797d7f; }

.fractal-pipeline-dashboard-v1 .fractal-spinner-outer { margin-top: 25%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-round-score-container { align-items: center; background: #bdc3c7; border-radius: 4px; display: flex; height: 24px; justify-content: center; width: 24px; }

.f-round-score-container.f-green { background: #b4eccc; }

.f-round-score-container.f-orange { background: #f7c067; }

.f-round-score-container.f-red { background: #f08d82; }

.f-card-row .__react_component_tooltip.show { opacity: 1; }

.f-results-square-tip { min-width: 190px; }

.f-section-separate { align-items: center; display: flex; justify-content: space-between; }

.f-arrow-stock-icon { background-color: #b4eccc; background-position: center; background-repeat: no-repeat; background-size: 14px; border-radius: 2px; height: 14px; margin: 0 3px 0 0; padding: 8px 4px; transform: translateY(4px); width: 22px; }

.fa-arrow-trend-down { background-color: rgba(231, 76, 60, 0.4); background-image: url(/fractal/dist/images/8aa0874b51e799e7f537.svg); }

.fa-arrow-trend-up { background-image: url(/fractal/dist/images/443a4c622aca125b5448.svg); }

.f-memo-results-tooltip .f-completed { color: #797d7f; }

.f-memo-results-tooltip .f-tooltip-section { padding: 4px 0; }

.f-memo-results-tooltip .f-tooltip-section > span { cursor: pointer; }

.f-memo-results-tooltip a { color: #3498db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-stack { background: #fff; border-radius: 4px; box-sizing: border-box; flex: 0 0 100%; margin-left: 8px; max-width: 256px; padding-top: 33px; position: relative; }

.f-best-idea-stack.f-disabled { opacity: 0.3; }

.f-best-idea-stack.f-disabled .f-idea { cursor: default; }

.f-best-idea-stack.f-stack-hidden { display: none; }

.f-best-idea-stack .f-stack-header { align-items: center; display: flex; flex-direction: row; height: 33px; justify-content: space-between; left: 0; position: absolute; top: 0; width: 100%; }

.f-best-idea-stack .f-stack-header .fractal-dropdown { margin-right: 0; }

.f-best-idea-stack .f-stack-header .f-dropdown-btn-round { color: #444647; }

.f-best-idea-stack .f-stack-header .f-dropdown-options div { width: 100%; }

.f-best-idea-stack .f-stack-header .f-dropdown-options span { display: block; height: 100%; width: 100%; }

.f-best-idea-stack .f-stack-title { align-items: center; color: #444647; display: flex; font-size: 14px; font-weight: 600; margin: 8px 12px; }

.f-best-idea-stack .f-stack-title span { overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }

.f-best-idea-stack .f-stack-title span:first-of-type { margin-right: 4px; max-width: 180px; }

.f-best-idea-stack .f-stack-scroll-area { height: 100%; overflow-y: auto; padding: 0 4px; }

.f-best-idea-stack .f-spinner-center { align-items: center; display: flex; height: calc(100% - 40px); justify-content: center; }

.f-best-idea-stack .f-spinner { margin-top: 8px; }

.f-best-idea-stack.f-stack-drop { background: #d2b4de; }

.darkMode .f-best-idea-stack { background-color: #444647; }

.darkMode .f-best-idea-stack.f-stack-drop { background: rgba(210, 180, 222, 0.8); }

.darkMode .f-stack-title { color: #fff; }

.cozy .f-best-idea-stack { margin-left: 4px; max-width: 192px; }

.cozy .f-stack-title { font-size: 10px; line-height: 20px; margin: 4px; max-width: 185px; }

.cozy .f-stack-title span:first-of-type { margin-right: 2px; max-width: 160px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ReactModalPortal.f-edit-modal .ReactModal__Content { border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); width: 400px; }

.ReactModalPortal.f-edit-modal .fractal-modal-header { border-color: #e7e9eb; }

.ReactModalPortal.f-edit-modal .fractal-modal-header .title { padding: 8px 0 10px 16px; }

.ReactModalPortal.f-edit-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { border-color: #e7e9eb; padding: 15px; }

.ReactModalPortal.f-edit-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-btn-sm { font-size: 14px; margin: 0; }

.ReactModalPortal.f-edit-modal .f-modal-design-titleHeaderSubmitFooter-v1 .f-submit-btn { margin-left: 4px; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal h3 { color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; margin-bottom: 12px; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal .fractal-combobox .f-combobox-input { border-width: 1px; outline: none; padding: 0 8px; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal .fractal-combobox .f-combobox-dropdown-button { align-items: center; display: flex; justify-content: center; width: 36px; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal .fractal-combobox .f-combobox-dropdown-button i { color: #444647; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal .f-tags-typeahead .react-tags { width: auto; }

.ReactModalPortal.f-edit-modal .f-best-idea-edit-modal .f-tags-typeahead .react-tags .react-tags__selected .f-tag-wrapper.f-tag-admin { background: #f08d82; }

.ReactModalPortal.f-edit-modal + .f-combobox-list { border-color: #e7e9eb; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); }

.ReactModalPortal.f-edit-modal + .f-combobox-list .f-combobox-list-item { align-items: center; display: flex; height: 40px; min-height: 40px; }

.ReactModalPortal.f-edit-modal + .f-combobox-list .f-combobox-list-item-selected, .ReactModalPortal.f-edit-modal + .f-combobox-list .f-combobox-list-item:hover { background: #e7e9eb; color: #444647; }

.darkMode .f-edit-modal .f-combobox-dropdown-button { border: none; }

.darkMode .f-edit-modal .fractal-button.f-btn-subtle { color: #797d7f; }

.darkMode .f-edit-modal .fractal-button.f-btn-subtle:hover { background: #e7e9eb; }

.darkMode .f-edit-modal .fractal-button.f-btn-subtle:focus { background: #bdc3c7; }

.darkMode .f-edit-modal .fractal-button.f-btn-subtle:active { background: #999ea1; color: #fff; }

.darkMode .f-edit-modal .fractal-button.f-btn-subtle:focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ideaboard-sorts .f-sort-tab-header-title { color: #444647; display: block; font-size: 14px; font-weight: 600; padding: 10px 0 5px; }

.ideaboard-sorts .f-sort-label { padding-left: 5px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-ideaboard .ideaboard-filters .filter-inline-input { align-items: center; display: flex; position: relative; }

.fractal-widget-ideaboard .ideaboard-filters .filter-inline-input .fractal-input { flex: 1 0 auto; width: 100%; }

.fractal-widget-ideaboard .ideaboard-filters .filter-inline-input .fractal-input .filter-search-input { color: #444647; font-size: 12px; width: 100%; }

.fractal-widget-ideaboard .ideaboard-filters .filter-inline-input .fractal-input .filter-search-input::placeholder { color: #999ea1; }

.fractal-widget-ideaboard .ideaboard-filters .filter-inline-input .fractal-input .filter-search-input::-ms-clear { display: none; }

.fractal-widget-ideaboard .ideaboard-filters .top-header-button { color: #797d7f; cursor: pointer; float: right; font-weight: normal; text-decoration: none; }

.fractal-widget-ideaboard .ideaboard-filters .top-header-button .fa-times-circle { font-size: 16px; }

@media (min-width: 1001px) { .fractal-widget-ideaboard .ideaboard-filters .ideaboard-sorts { display: none; } }

.f-ideaboard-best-idea .filter-inline-input, .ideaboard-filter-bar .filter-inline-input { margin-right: 8px; position: relative; }

.f-ideaboard-best-idea .filter-inline-input input, .ideaboard-filter-bar .filter-inline-input input { box-sizing: border-box; font-family: Lato, 'Open Sans', arial, sans-serif; height: 32px; padding: 6px 30px; }

.f-ideaboard-filter-search-icon { font-size: 14px; left: 8px; position: absolute; top: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-best-idea .f-filters { background: #fff; border: 1px solid #d5d9db; border-radius: 2px; flex: 1; height: calc(100% - 12px); max-width: 245px; padding-bottom: 10px; }

.fractal-best-idea .f-filters-wrapper { height: calc(100% - 145px); overflow-y: auto; padding: 0 16px 10px 10px; }

.fractal-best-idea .f-filters-done { align-items: center; border-top: 1px solid #d5d9db; display: flex; justify-content: center; }

.fractal-best-idea .f-filters-editing { position: absolute; top: 0; }

.fractal-best-idea .f-filter-header { display: flex; flex-direction: column; justify-content: space-between; padding: 0 10px; }

.fractal-best-idea .f-filter-header .fractal-input { margin-top: 16px; }

.fractal-best-idea .f-filter-header .fractal-input .f-error { border: 1px solid #c0392b; }

.fractal-best-idea .f-filter-header .fractal-dropdown { padding-top: 12px; }

.fractal-best-idea .f-filter-header .f-dropdown-btn div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fractal-best-idea .f-filter-header .f-dropdown-options { width: 100%; }

.fractal-best-idea .f-filter-header .f-dropdown-options li { height: 100%; }

.fractal-best-idea .f-filters-arrow { height: 32px; overflow: hidden; position: absolute; top: 8px; transform: translateX(-50%); width: 15px; }

.fractal-best-idea .f-filters-arrow::after { background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); content: ''; height: 15px; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 15px; }

.fractal-best-idea .f-filters-arrow-left { left: -7px; }

.fractal-best-idea .f-filters-arrow-left::after { left: 100%; }

.fractal-best-idea .f-filters-arrow-right { right: -22px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-panel { background: #fff; border: 1px solid #bdc3c7; display: flex; flex-direction: column; height: 100%; position: absolute; right: 0; top: 0; width: 35%; }

.f-best-idea-panel .f-header { border-bottom: 1px solid #bdc3c7; display: flex; flex: 0 0 auto; justify-content: flex-end; padding: 4px 8px 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-biw-no-categories { align-items: center; display: flex; flex-direction: column; font-size: 14px; justify-content: center; width: 100%; }

.f-biw-no-categories .fa-folders { font-size: 24px; margin-bottom: 16px; }

.f-biw-no-categories h1 { font-size: 18px; }

.f-biw-no-categories p { padding: 8px 0; }

.f-biw-no-categories a { padding-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-biw-no-ideas { align-items: center; display: flex; flex-direction: column; font-size: 14px; justify-content: center; width: 100%; }

.f-biw-no-ideas .fa-lightbulb { font-size: 24px; margin-bottom: 16px; }

.f-biw-no-ideas h1 { font-size: 18px; }

.f-biw-no-ideas p { padding: 8px 0; }

.f-biw-no-ideas a { cursor: pointer; padding-top: 8px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-right-click-menu { background: #fff; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); list-style: none; padding: 8px 0; position: absolute; z-index: 1; }

.f-best-idea-right-click-menu li { color: #444647; cursor: pointer; font-size: 14px; font-weight: normal; padding: 4px 16px; text-decoration: none; }

.f-best-idea-right-click-menu li:hover { background: #e7e9eb; }

.f-best-idea-right-click-menu li.f-disabled { cursor: not-allowed; opacity: 0.6; }

.f-best-idea-right-click-menu hr { border-bottom: 1px solid #bdc3c7; border-top: 0; margin: 8px 16px; }

.f-best-idea-right-click-menu .f-idea-out-of-initiative { background: #d6eaf8; border-radius: 4px; cursor: default; font-size: 10px; margin: 4px 16px; max-width: 160px; padding: 4px 8px; }

.f-best-idea-right-click-menu .f-idea-out-of-initiative:hover { background: #d6eaf8; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-best-idea { height: calc(100vh - 126px); margin-right: 8px; margin-top: 8px; position: relative; }

.fractal-best-idea .f-biw-sm { width: 100%; z-index: 1; }

.fractal-best-idea .f-view-loading { align-items: center; background: #000; border-radius: 4px; display: flex; height: 75px; justify-content: center; left: 50%; opacity: 0.5; position: fixed; top: 50%; width: 75px; z-index: 1; }

.fractal-best-idea .f-view-loading i { font-size: 50px; }

.fractal-best-idea .f-stack-wrapper { display: flex; flex-wrap: nowrap; height: 101.5%; overflow-x: auto; position: relative; scroll-behavior: smooth; }

.fractal-best-idea.f-loading { align-items: center; display: flex; justify-content: center; }

.fractal-best-idea.f-loading .f-stack-wrapper { align-items: center; justify-content: center; width: 100%; }

.fractal-best-idea .f-stack-empty { flex: 0 0 222px; }

.fractal-best-idea .f-no-sets { align-items: center; display: flex; flex-direction: column; justify-content: center; width: 100%; }

.fractal-best-idea .f-no-sets p { font-size: 16px; }

.fractal-best-idea .f-no-sets i { font-size: 48px; padding: 32px 0; }

.fractal-best-idea .f-no-sets .fractal-button { margin-top: 0; }

.fractal-best-idea .filter-search .filter-inline-input { position: relative; }

.fractal-best-idea .fractal-ideafilters-tabs .filter-search-clear.clear-tags { margin-left: 0; margin-top: -12px; }

.fractal-best-idea .f-close-button { align-items: center; border-radius: 50%; cursor: pointer; display: flex; font-size: 16px; height: 24px; justify-content: center; margin: 0; margin-top: 4px; padding: 0; width: 24px; }

.fractal-best-idea .f-add-stack { align-items: center; background: rgba(255, 255, 255, 0.5); border-radius: 4px; cursor: pointer; display: flex; flex: 0 0 100%; justify-content: center; margin: 0 4px; max-width: 256px; overflow-y: auto; padding: 0 10px 10px; transition: all 0.3s; }

.fractal-best-idea .f-add-stack span { align-items: center; background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; box-sizing: border-box; display: flex; flex-direction: row; height: 32px; padding: 0 16px; }

.fractal-best-idea .f-add-stack:hover { border-color: #444647; }

.fractal-best-idea .f-best-idea-not-authorized { align-items: center; display: flex; font-size: 16px; font-weight: 600; height: 100%; justify-content: center; }

.webstorm-level #bi-page-ct-list { background-color: #e7e9eb; }

.webstorm-level #bi-page-ct-list #main_content.f-best-idea-main-content { margin-top: 2.4rem; max-width: inherit; }

.webstorm-level #bi-page-ct-list #main_content.f-best-idea-main-content .ideaboard-filter-right { margin-right: 16px; }

.f-user-share-cursor { background: #bdc3c7; border-radius: 4px; color: #fff; display: flex; padding: 2px; position: absolute; }

.f-user-share-cursor .f-user-cursor-arrow { border-color: #bdc3c7 transparent; border-style: solid; border-width: 12px 12px 0 0; height: 0; left: -8px; position: absolute; top: -8px; width: 0; }

.darkMode #bi-page-ct-list { background-color: #1e1f20; }

.darkMode .f-biw-sm .f-biw-spinner-inner { background-color: rgba(0, 0, 0, 0.9); }

.darkMode .f-add-stack span { background: #444647; border: 2px solid rgba(0, 0, 0, 0.2); color: #fff; }

.darkMode .f-filters .fractal-input input, .darkMode .f-filters-modal .fractal-input input { background-color: #f5f5f6; border: 1px solid #bdc3c7; color: #444647; }

.darkMode .f-filters .fractal-button, .darkMode .f-filters-modal .fractal-button { border: none; }

.darkMode .f-filters .fractal-button.f-btn-subtle, .darkMode .f-filters-modal .fractal-button.f-btn-subtle { background-color: #fff; color: #797d7f; }

.darkMode .f-filters .fractal-button.f-btn-subtle:hover, .darkMode .f-filters-modal .fractal-button.f-btn-subtle:hover { background: #e7e9eb; }

.darkMode .f-filters .fractal-button.f-btn-subtle:focus, .darkMode .f-filters .fractal-button.f-btn-subtle:active, .darkMode .f-filters-modal .fractal-button.f-btn-subtle:focus, .darkMode .f-filters-modal .fractal-button.f-btn-subtle:active { color: #fff; }

.darkMode .f-filters .fractal-button.f-btn-subtle:focus, .darkMode .f-filters-modal .fractal-button.f-btn-subtle:focus { background: #bdc3c7; }

.darkMode .f-filters .fractal-button.f-btn-subtle:focus:not(:active), .darkMode .f-filters-modal .fractal-button.f-btn-subtle:focus:not(:active) { box-shadow: 0 0 0 2px #999ea1; }

.darkMode .f-filters .fractal-button.f-btn-subtle:active, .darkMode .f-filters-modal .fractal-button.f-btn-subtle:active { background: #999ea1; }

.darkMode .f-filters .fractal-button.f-btn-subtle.f-btn-disabled, .darkMode .f-filters .fractal-button.f-btn-subtle[disabled], .darkMode .f-filters-modal .fractal-button.f-btn-subtle.f-btn-disabled, .darkMode .f-filters-modal .fractal-button.f-btn-subtle[disabled] { color: #bdc3c7; }

.darkMode .f-filters .fractal-button.f-btn-subtle.f-btn-disabled:hover, .darkMode .f-filters .fractal-button.f-btn-subtle[disabled]:hover, .darkMode .f-filters-modal .fractal-button.f-btn-subtle.f-btn-disabled:hover, .darkMode .f-filters-modal .fractal-button.f-btn-subtle[disabled]:hover { background: transparent; }

.darkMode .f-filters .f-btn-primary, .darkMode .f-filters-modal .f-btn-primary { background: #2ecc71; }

.darkMode .f-filters .f-btn-primary:hover, .darkMode .f-filters-modal .f-btn-primary:hover { background: #1e8248; }

.darkMode .f-filters .f-btn-primary:focus, .darkMode .f-filters-modal .f-btn-primary:focus { background: #1e8248; }

.darkMode .f-filters .f-btn-primary:focus:not(:active), .darkMode .f-filters-modal .f-btn-primary:focus:not(:active) { box-shadow: 0 0 0 2px #114929; }

.darkMode .f-filters .f-btn-primary:active, .darkMode .f-filters-modal .f-btn-primary:active { background: #114929; }

.darkMode .f-filters .f-btn-primary.f-btn-disabled, .darkMode .f-filters .f-btn-primary[disabled], .darkMode .f-filters-modal .f-btn-primary.f-btn-disabled, .darkMode .f-filters-modal .f-btn-primary[disabled] { background: rgba(46, 204, 113, 0.5); }

.darkMode .f-filters .f-dropdown-btn, .darkMode .f-filters-modal .f-dropdown-btn { background: transparent; border: none; color: #797d7f; }

.darkMode .f-filters .f-dropdown-btn:hover, .darkMode .f-filters-modal .f-dropdown-btn:hover { background-color: #e7e9eb; }

.darkMode .f-filters .f-dropdown-btn.f-dropdown-open, .darkMode .f-filters-modal .f-dropdown-btn.f-dropdown-open { background-color: #999ea1; border-color: #999ea1; color: #fff; }

.cozy .fractal-best-idea { height: calc(100vh - 104px); margin-right: 4px; margin-top: 4px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView .fractal-pipelineViewIdeas .idea { align-items: center; background: #fff; border: 1px solid #d5d9db; border-radius: 4px; box-shadow: 0 0 10px -4px #bdc3c7; color: #444647; cursor: pointer; display: flex; font-size: 12px; font-weight: normal; margin-bottom: 5px; padding: 7px; position: static; text-decoration: none; }

.fractal-widget-pipelineView .fractal-pipelineViewIdeas .idea:hover { box-shadow: 0 0 10px -2px #bdc3c7; }

.fractal-widget-pipelineView .fractal-pipelineViewIdeas .idea img { border-radius: 4px; height: 34px; min-width: 34px; width: 34px; }

.fractal-widget-pipelineView .fractal-pipelineViewIdeas .idea .idea-right { max-height: 34px; overflow: hidden; padding-left: 10px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView .fractal-pipelineViewCombined .__react_component_tooltip { max-width: 550px; }

.fractal-widget-pipelineView .fractal-pipelineViewCombined .fa-info-circle { color: #3498db; }

.fractal-widget-pipelineView .fractal-pipelineViewCombined .lane { width: inherit; }

.fractal-widget-pipelineView .fractal-pipelineViewCombined .list { display: flex; height: calc(100% - 40px); }

.fractal-widget-pipelineView .fractal-pipelineViewCombined .step { background: #f5f5f6; box-shadow: 0 0 10px -6px #797d7f; padding-right: 0; width: 270px; }

.fractal-widget-pipelineView .fractal-pipelineViewCombined .empty-lane { min-width: 25px; z-index: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder { overflow-x: scroll; transition: all 0.2s ease-in-out; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step { align-items: center; background: #f5f5f6; border: 1px solid #d5d9db; border-radius: 4px; display: flex; flex-direction: column; margin: 0 10px 0 0; min-width: 270px; padding: 0; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .title { height: 16px; margin: 10px 0; width: 157px; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas { visibility: visible; width: 100%; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas .idea { background: #fff; border: 1px solid #d5d9db; border-radius: 4px; display: flex; margin: 0 0 5px 10px; padding: 7px; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas .idea .image { border-radius: 4px; height: 35px; width: 35px; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas .idea .right { margin: 0 10px; width: 100%; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas .idea .right :first-child { height: 14px; width: 100%; }

.fractal-widget-pipelineView .fractal-pipelineViewPlaceholder .step .ideas .idea .right :last-child { height: 14px; margin-top: 5px; width: 50%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView .fractal-pipelineViewStages * { box-sizing: border-box; }

.fractal-widget-pipelineView .fractal-pipelineViewStages .stage { display: flex; flex-direction: column; min-width: 270px; padding-right: 0; }

.fractal-widget-pipelineView .fractal-pipelineViewStages .empty-lane { min-width: 25px; z-index: 1; }

.fractal-widget-pipelineView .fractal-pipelineViewStages .__react_component_tooltip { max-width: 550px; }

.fractal-widget-pipelineView .fractal-pipelineViewStages .fa-info-circle { color: #3498db; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView .fractal-pipelineViewSteps * { box-sizing: border-box; }

.fractal-widget-pipelineView .fractal-pipelineViewSteps .step { min-width: 270px; padding-right: 0; }

.fractal-widget-pipelineView .fractal-pipelineViewSteps .empty-lane { min-width: 25px; z-index: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-pipelineView { height: 100%; margin-top: 10px; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; position: relative; }

.fractal-widget-pipelineView * { box-sizing: border-box; }

.fractal-widget-pipelineView > div::after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f5f5f6 100%); content: ''; display: block; height: 100%; position: absolute; right: 0; width: 3%; }

.fractal-widget-pipelineView .lane { background: #f5f5f6; border: 1px solid #d5d9db; border-radius: 2px; display: inline-block; margin: 0 4px; padding: 0 10px 10px; vertical-align: top; width: 300px; }

.fractal-widget-pipelineView .lane-wrapper { display: flex; flex-wrap: nowrap; height: 100%; overflow-x: auto; }

.fractal-widget-pipelineView .dont-use-this-class::-ms-backdrop, .fractal-widget-pipelineView .lane-wrapper { overflow-x: scroll; }

.fractal-widget-pipelineView .ideas { height: calc(100% - 35px); overflow: hidden; padding-right: 10px; visibility: hidden; }

.fractal-widget-pipelineView .ideas .fractal-pipelineViewIdeas, .fractal-widget-pipelineView .ideas:focus, .fractal-widget-pipelineView .ideas:hover { overflow-y: auto; visibility: visible; }

.fractal-widget-pipelineView .title { align-items: center; color: #444647; display: flex; font-weight: 600; height: 40px; justify-content: center; text-align: center; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-share-modal .f-best-idea-share-modal { min-width: 400px; }

.f-share-modal .f-invite-input { display: flex; flex-direction: row; }

.f-share-modal .f-send-invite { margin-top: 0; white-space: nowrap; }

.f-share-modal .f-member-container { margin-top: 4px; }

.f-share-modal .f-member-row { align-items: center; display: flex; flex-direction: row; justify-content: space-between; margin: 4px 0; }

.f-share-modal .f-member { align-items: center; display: flex; flex-direction: row; }

.f-share-modal .member-image-v1 { margin-right: 8px; }

.f-share-modal .f-member-remove { cursor: pointer; margin-right: 8px; }

.f-share-modal .f-member-remove:hover { color: #f00; }

.f-share-modal .f-copy-link { cursor: pointer; display: block; font-size: 11px; font-weight: normal; margin-top: 16px; text-decoration: none; }

.f-share-modal .f-footer .f-submit-btn { line-height: inherit; }

.f-share-modal .f-footer .f-btn-subtle { display: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-top-left-bar { align-items: center; display: flex; }

.f-best-idea-top-left-bar .f-campaign-img { border-radius: 4px; margin-left: 16px; margin-right: 8px; max-height: 32px; max-width: 32px; }

.f-best-idea-top-left-bar .f-best-idea-set-name { color: #444647; font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 700; }

.f-best-idea-top-left-bar .f-best-idea-set-name span { font-weight: 400; }

.f-best-idea-top-left-bar .fractal-button.f-add-set-btn { margin-bottom: 0; margin-right: 8px; margin-top: 0; }

.f-best-idea-top-left-bar .fractal-dropdown { margin-right: 8px; }

.f-best-idea-top-left-bar .fractal-dropdown .fa-sort-amount-down { margin-left: 0; margin-right: 8px; }

.f-best-idea-top-left-bar .f-dropdown-btn { border: 1px solid transparent; }

.f-best-idea-top-left-bar .f-dropdown-btn-round { background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; color: #000; height: 32px; width: 32px; }

.f-best-idea-top-left-bar .f-dropdown-options { left: 0; max-width: 197px; right: initial; width: initial; }

.f-best-idea-top-left-bar .f-dropdown-options .f-dropdown-divider { background: #d5d9db; border: none; font-size: 10px; font-weight: bold; height: auto; line-height: normal; margin: 0; padding: 4px 8px; text-transform: uppercase; width: 100%; }

.f-best-idea-top-left-bar .f-dropdown-options span { overflow-x: hidden; padding-right: 16px; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.f-best-idea-top-left-bar .f-shared-wrapper { align-items: center; display: flex; }

.f-best-idea-top-left-bar .f-shared-wrapper span { font-size: 14px; }

.f-best-idea-top-left-bar .filter-inline-input { position: relative; }

.f-best-idea-top-left-bar .f-sets-dropdown { max-width: 256px; }

.f-best-idea-top-left-bar .f-sets-dropdown .f-dropdown-btn { border: 1px solid #bdc3c7; border-radius: 4px; }

.f-best-idea-top-left-bar .f-sets-dropdown .f-dropdown-btn i.fa-bars { margin-left: 0; margin-right: 8px; }

.f-best-idea-top-left-bar .f-sets-dropdown .f-dropdown-btn > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-best-idea-top-left-bar .f-sets-dropdown .f-dropdown-options { max-width: 256px; min-width: 128px; z-index: 999; }

.f-best-idea-top-left-bar .f-sets-dropdown .f-dropdown-options i.fa-plus { margin-left: -7px; }

.f-best-idea-top-left-bar .f-sets-dropdown ul li:first-of-type { border-bottom: 1px solid #d5d9db; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-options { z-index: 999; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn { color: #797d7f; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn:hover { background-color: #e7e9eb; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn.f-dropdown-open, .f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn:active { background-color: #999ea1; color: #fff; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn:focus { color: #fff; }

.f-best-idea-top-left-bar .f-sets-options .f-dropdown-btn:focus:not(:active):not(.f-dropdown-open) { box-shadow: 0 0 0 2px #999ea1; }

.darkMode .f-best-idea-set-name { color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-quick-add-dropdown { background-color: #fff; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); font-size: 14px; left: 0; padding: 16px; position: absolute; top: 35px; width: 380px; z-index: 101; }

.f-quick-add-dropdown .f-quick-add-options { display: flex; }

.f-quick-add-dropdown .f-quick-add-options .f-radio-wrapper { margin-right: 8px; margin-top: 0; }

.f-quick-add-dropdown .f-quick-add-options .f-radio-wrapper .f-radio-outer:hover { box-shadow: 0 0 0 8px #f5f5f6; }

.f-quick-add-dropdown .f-quick-add-options .f-radio-wrapper.f-radio-checked .f-radio-outer:hover { box-shadow: 0 0 0 4px #d1f2eb; }

.f-quick-add-dropdown .f-quick-add-options label { font-weight: 400; margin-bottom: 0; margin-left: 4px; }

.f-quick-add-dropdown > * { margin-bottom: 8px; }

.f-quick-add-dropdown .f-quickadd-content { margin-bottom: 0; }

.f-quick-add-dropdown .f-quickadd-content label { display: inline-block; font-weight: normal; margin-bottom: 8px; }

.f-quick-add-dropdown .f-button-primary { background: #2ecc71; border: none; height: 24px; }

.f-quick-add-dropdown .f-button-primary:hover, .f-quick-add-dropdown .f-button-primary:focus { background: #1e8248; }

.f-quick-add-dropdown .f-button-primary:focus:not(:active) { box-shadow: 0 0 0 2px #114929; }

.f-quick-add-dropdown .f-button-primary:active { background: #114929; }

.f-quick-add-dropdown input { background: #fff; padding: 6px 8px; width: 348px; }

.f-quick-add-dropdown textarea { background-color: #fff; border-radius: 4px; font-family: 'Lato', 'Open Sans', arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 8px; padding: 8px; resize: none; width: 100%; }

.f-quick-add-dropdown textarea::placeholder { color: #999ea1; }

.f-quick-add-dropdown .f-member-typeahead { background: #fff; width: 348px; }

.f-quick-add-dropdown .f-quick-add-memo-title { font-size: 14px; }

.f-quick-add-dropdown .f-member-typeahead .react-tags .react-tags__search-input::placeholder { font-size: 14px; }

.f-quick-add-dropdown .f-member-typeahead.f-typeahead-empty input[value=''] { width: 200px !important; }

.f-quick-add-dropdown .f-member-typeahead .react-tags__search-wrapper input { min-width: 0; }

.f-quick-add-dropdown .f-quickadd-more { display: flex; justify-content: space-between; margin-bottom: 0; margin-top: 24px; }

.f-quick-add-dropdown .f-quickadd-more.f-qa-more-idea { justify-content: flex-end; }

.f-quick-add-dropdown .f-quickadd-more .fractal-button { font-family: 'Lato', 'Open Sans', arial, sans serif; font-size: 14px; margin: 0; }

.f-quick-add-dropdown .f-quickadd-more .f-btn-cancel { margin-right: 8px; }

.f-quick-add-dropdown .f-quickadd-more .f-show-btn { margin-left: -16px; }

.f-quick-add-dropdown .f-btn-link { color: #3498db; }

.f-quick-add-dropdown .f-btn-link:focus { text-decoration: underline; }

.f-quick-add-dropdown .f-quickadd-title-counter { display: flex; font-size: 11px; justify-content: flex-end; }

.f-quick-add-dropdown .f-quickadd-more-fields { margin-top: 8px; }

.f-quick-add-dropdown .f-quickadd-more-fields label { display: inline-block; font-family: 'Lato', 'Open Sans', arial, sans serif; font-weight: 500; margin-bottom: 8px; }

.f-quick-add-dropdown .f-quickadd-more-fields > div:not(.f-quickadd-status) { margin-bottom: 8px; }

.f-toast-quick-add { color: #fff; opacity: 0; transition: all 1s; }

.f-toast-quick-add.success, .f-toast-quick-add.error { opacity: 1; }

.darkMode .ideaboard-filter-bar .f-quick-idea-category .f-dropdown-btn { background: #fff; border: 1px solid #bdc3c7; color: #797d7f; }

.darkMode .ideaboard-filter-bar .f-quick-idea-category .f-dropdown-btn:hover, .darkMode .ideaboard-filter-bar .f-quick-idea-category .f-dropdown-btn.f-dropdown-open { background: inherit; border: 1px solid #1abc9c; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-toast-idea-name { font-weight: 700; }

.f-quick-add-wrapper { color: #444647; margin-right: 8px; position: relative; }

.f-quick-add-wrapper .f-dropdown-full-click .f-dropdown-options li.f-dropdown-divider { border-top: none; color: #444647; font-size: 12px; -webkit-font-smoothing: antialiased; font-weight: 700; margin-bottom: 0; text-transform: uppercase; }

.f-quick-add-wrapper .f-dropdown-full-click .f-dropdown-options li.f-dropdown-divider:hover { cursor: default; }

.f-quick-add-wrapper .f-dropdown-full-click .f-dropdown-options li.f-dropdown-divider:nth-child(1) { margin-top: 0; }

.f-quick-add-wrapper .f-dropdown-full-click .f-dropdown-options-nested { width: 222px; }

.f-quick-add-wrapper .f-quickadd-more div { display: flex; }

.f-quick-add-wrapper .f-quickadd-more .f-btn-primary { margin-right: 0; }

.f-quick-add-wrapper .f-show-btn { margin-left: -16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-filters-modal .ReactModal__Content { width: 80%; }

.f-filters-modal .f-global-filter-modal .fractal-ideafilters-tabs { display: flex; flex-wrap: wrap; }

.f-filters-modal .f-global-filter-modal .fractal-ideafilters-tabs > * { background: #e7e9eb; flex: 1 0 200px; margin: 8px 8px 8px 0; padding: 8px; }

.f-filters-modal .f-global-filter-modal .filter-tag .filter-inline-input:not(.bianalytics-browse-tags) { margin-bottom: 10px; }

.f-filters-modal .f-global-filter-modal .filter-tag .filter-search-generics-input { margin-bottom: 0; }

.f-filters-modal .f-global-filter-modal .filter-search { margin-bottom: 8px; }

.f-filters-modal .f-global-filter-modal .filter-search-clear { right: auto; top: 10px; }

.f-filters-modal .f-footer { justify-content: flex-end; }

.f-filters-modal .f-footer .f-clear-filter { border: none; margin-right: auto; padding: 0; }

.f-filters-modal .f-footer .f-clear-filter:hover, .f-filters-modal .f-footer .f-clear-filter:active, .f-filters-modal .f-footer .f-clear-filter:focus { background: none; border: none; text-decoration: underline; }

.darkMode .f-filters-modal .f-footer .f-clear-filter { background: transparent; border: none; }

.darkMode .f-filters-modal .f-footer .f-clear-filter:hover, .darkMode .f-filters-modal .f-footer .f-clear-filter:active, .darkMode .f-filters-modal .f-footer .f-clear-filter:focus { background: transparent; border: none; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ideaboard-filter-bar .biw-gear li:first-of-type { cursor: default; margin-bottom: 4px; }

.ideaboard-filter-bar .biw-gear .f-dropdown-btn:not(.f-btn-primary) { align-items: center; border: 1px solid #bdc3c7; border-radius: 4px; height: 32px; z-index: 2; }

.ideaboard-filter-bar .biw-gear i { font-size: 14px; margin-left: 0; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options { min-width: 200px; z-index: 999; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options h1 { color: #444647; font-size: 14px; font-weight: 700; text-transform: uppercase; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options ul { display: flex; flex-direction: column; list-style: none; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options li > span { align-items: center; color: #444647; display: flex; flex-direction: row; font-size: 12px; justify-content: space-between; width: 100%; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options li > span.f-option-disabled { color: #bdc3c7; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-dropdown-divider { cursor: default; pointer-events: initial; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-wrapper { display: none; width: 20px; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-wrapper.f-checkbox-checked { display: flex; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-disabled .f-checkbox-wrapper { display: none; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-inner, .ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-outer { background-color: transparent; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-inner { justify-content: initial; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .f-checkbox-outer:hover { box-shadow: none; }

.ideaboard-filter-bar .biw-gear .f-dropdown-options .fa-check { color: #1abc9c; font-size: 14px; }

.ideaboard-filter-bar .f-biw-mylist-container { display: flex; justify-content: space-between; width: calc(100% - 32px); }

.darkMode .ideaboard-filter-bar .f-best-idea-sort .f-dropdown-btn, .darkMode .ideaboard-filter-bar .biw-gear .f-dropdown-btn { border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: none; }

.darkMode .ideaboard-filter-bar .f-best-idea-sort .f-dropdown-btn:hover, .darkMode .ideaboard-filter-bar .biw-gear .f-dropdown-btn:hover { border: 2px solid rgba(0, 0, 0, 0.2); }

.darkMode .ideaboard-filter-bar .f-best-idea-sort .f-dropdown-btn.f-dropdown-open, .darkMode .ideaboard-filter-bar .biw-gear .f-dropdown-btn.f-dropdown-open { background: rgba(0, 0, 0, 0.2); border-color: transparent; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-best-idea-top-right-bar { display: flex; }

.f-best-idea-top-right-bar > * { height: 32px; }

.f-best-idea-top-right-bar .f-users-list { display: flex; margin-right: 8px; }

.f-best-idea-top-right-bar .f-users-list .flyover-links a { color: #797d7f; }

.f-best-idea-top-right-bar .member-img { height: 32px; width: 32px; }

.f-best-idea-top-right-bar .f-dropdown-full-click .f-dropdown-options li > span { align-items: center; }

.f-best-idea-top-right-bar .f-dropdown-full-click .f-dropdown-options li .f-tag-beta { background-color: #1abc9c; border-radius: 2px; color: #fff; display: inline-block; font-size: 12px; height: 20px; line-height: 1; margin-left: 4px; padding: 4px; text-transform: uppercase; width: auto; }

.f-best-idea-top-right-bar .filter-search-input { background-color: #fff; }

.f-best-idea-top-right-bar .f-users-list-overflow { align-items: center; background: #bdc3c7; border-radius: 50%; color: #fff; display: flex; font-size: 12px; font-weight: 600; height: 32px; justify-content: center; position: relative; text-decoration: none; width: 32px; }

.f-best-idea-top-right-bar .f-users-list-overflow::after { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; }

.f-best-idea-top-right-bar .f-users-list-overflow .f-user-wrapper { align-items: center; display: flex; }

.f-best-idea-top-right-bar .f-users-list-overflow .f-user-circle { border-radius: 50%; height: 8px; margin-right: 4px; width: 8px; }

.f-best-idea-top-right-bar .fractal-dropdown:not(.f-quick-add-more-options) { margin-right: 8px; }

.f-best-idea-top-right-bar .fractal-dropdown:not(.f-quick-add-more-options) .f-dropdown-options { white-space: nowrap; width: auto; }

.f-best-idea-top-right-bar .fractal-dropdown:not(.f-quick-add-more-options) .f-dropdown-options li { padding-right: 16px; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-options { z-index: 999; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-btn { border: 1px solid #bdc3c7; font-size: 14px; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-btn div { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-btn.f-dropdown-open, .f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-btn:active { background-color: #999ea1; color: #fff; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-open { background: #444647; color: #fff; }

.f-best-idea-top-right-bar .f-best-idea-sort .f-dropdown-options { max-width: none; }

.f-best-idea-top-right-bar .f-best-idea-sort .fa-sort { margin-left: 0; margin-right: 8px; }

.f-best-idea-top-right-bar .fractal-button, .f-best-idea-top-right-bar .fractal-button.f-btn-sm { align-items: center; display: flex; font-size: 14px; margin: 0; margin-right: 8px; }

.f-best-idea-top-right-bar .fractal-button .fa-filter, .f-best-idea-top-right-bar .fractal-button.f-btn-sm .fa-filter { font-size: 12px; margin-right: 8px; }

.f-best-idea-top-right-bar .fractal-button.f-add-set-btn, .f-best-idea-top-right-bar .fractal-button.f-btn-sm.f-add-set-btn { line-height: initial; margin-bottom: 0; margin-right: 8px; margin-top: 0; }

.f-best-idea-top-right-bar .f-quick-add-dropdown { color: #444647; }

.f-best-idea-top-right-bar .f-qa-memo-more > div { display: flex; }

.f-best-idea-top-right-bar .f-qa-memo-more .fractal-button { font-family: 'Lato', 'Open Sans', arial, sans serif; font-size: 14px; margin: 0; }

.f-best-idea-top-right-bar .f-qa-memo-more .f-btn-cancel { margin-right: 8px; }

.f-best-idea-top-right-bar .f-qa-memo-more .f-show-btn { margin-left: -16px; }

.f-best-idea-top-right-bar .fractal-button.f-has-global-filter, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover { background: #f1c40f; border: 2px solid #f1c40f; box-shadow: none; color: #fff; }

.f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:active, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:focus, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:focus:not(:active), .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover:hover, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover:active, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover:focus, .f-best-idea-top-right-bar .fractal-button.f-has-global-filter:hover:focus:not(:active) { background: #f1c40f; border: 2px solid #bdc3c7; box-shadow: none; }

.f-best-idea-top-right-bar .f-my-lists-btn { align-items: center; display: flex; flex-direction: row-reverse; margin-right: 8px; white-space: nowrap; }

.f-best-idea-top-right-bar .f-my-lists-btn i { padding-top: 8px; }

.__react_component_tooltip.type-dark.place-top.f-my-lists-btn-tooltip { margin-bottom: 8px; z-index: 2147483600; }

.filter-inline-input + .__react_component_tooltip { align-items: center; box-sizing: content-box; display: flex; justify-content: center; max-width: 160px; text-align: center; z-index: 2147483600; }

.ideaboard-filter-bar .fractal-button.f-share-btn, .ideaboard-filter-bar .fractal-button.f-view-sets-btn, .ideaboard-filter-bar .fractal-button.f-my-lists-btn { margin-right: 8px; }

.ideaboard-filter-bar .fractal-button.f-quick-add-btn { margin-right: 0; }

.ideaboard-filter-bar .f-view-sets-btn span { white-space: nowrap; }

.f-is-community-layout .f-best-idea-sort { background: #fff; }

.darkMode .ideaboard-filter-bar .f-quick-add-wrapper .f-quick-add-more-options > .f-dropdown-btn, .darkMode .ideaboard-filter-bar .f-dropdown-btn { background: #444647; border: 2px solid rgba(0, 0, 0, 0.2); color: #fff; }

.darkMode .ideaboard-filter-bar .f-quick-add-wrapper .f-quick-add-more-options > .f-dropdown-btn:hover, .darkMode .ideaboard-filter-bar .f-dropdown-btn:hover { background: rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.2); }

.darkMode .ideaboard-filter-bar .fractal-button.f-has-global-filter { background: #f1c40f; border: 2px solid #f1c40f; color: #fff; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.ideaboard-filter-bar { display: flex; justify-content: space-between; margin-bottom: 5px; }

.ideaboard-filter-bar .f-btn-link-animated, .ideaboard-filter-bar .f-btn-link-export-powerpoint { color: #444647; height: 32px; line-height: 32px; margin: 0 10px; padding: 0 10px; }

.ideaboard-filter-bar .ideaboard-filter-left { align-items: center; display: flex; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar { border: 2px solid #bdc3c7; font-weight: normal; height: 32px; margin: 0 10px; padding: 0 20px; transition: all 0.2s ease-in-out; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.active { background: #bdc3c7; border: 2px solid #bdc3c7; color: #fff; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.active:active, .ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.active:focus, .ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.active:focus:not(:active) { box-shadow: none; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.filtering { background: #f1c40f; border: 2px solid #f1c40f; color: #fff; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.filtering:active, .ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.filtering:focus, .ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-button-sidebar.filtering:focus:not(:active) { box-shadow: none; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-clear { color: #3498db; cursor: pointer; font-size: 14px; font-weight: bold; margin-left: 10px; transition: color 0.2s ease-in-out; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-clear:active, .ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-clear:focus { color: #196090; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-clear:hover { color: #217dbb; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-total { font-size: 14px; font-weight: 600; margin-left: 10px; }

.ideaboard-filter-bar .ideaboard-filter-left .ideaboard-filter-total.no-filter { margin-left: 12px; }

.ideaboard-filter-bar .ideaboard-filter-grid-button { align-items: center; background: #fff; border: 1px solid #bdc3c7; cursor: pointer; display: inline-flex; font-size: 20px; height: 32px; justify-content: center; transition: background 0.2s ease-in-out; width: 50px; }

.ideaboard-filter-bar .ideaboard-filter-grid-button .fa { -webkit-backface-visibility: hidden; }

.ideaboard-filter-bar .ideaboard-filter-grid-button.ideaboard-filter-button:first-of-type { border-radius: 4px 0 0 4px; border-right: none; }

.ideaboard-filter-bar .ideaboard-filter-grid-button.ideaboard-filter-button:last-of-type { border-left: none; border-radius: 0 4px 4px 0; }

.ideaboard-filter-bar .ideaboard-filter-grid-button:hover { background: #d5d9db; }

.ideaboard-filter-bar .ideaboard-filter-grid-button:active, .ideaboard-filter-bar .ideaboard-filter-grid-button.active { background: #bdc3c7; color: #fff; }

.ideaboard-filter-bar .ideaboard-filter-grid-button:focus { background: #bdc3c7; }

.ideaboard-filter-bar .ideaboard-filter-right { align-items: center; display: flex; margin-right: 10px; }

.ideaboard-filter-bar .ideaboard-filter-right > button:last-of-type { padding-right: 0; }

.ideaboard-filter-bar .ideaboard-filter-right a { color: #444647; }

.ideaboard-filter-bar .ideaboard-filter-right .__react_component_tooltip.show.place-top { margin-top: 0; }

@media (max-width: 1000px) { .ideaboard-filter-bar .ideaboard-filter-right .ideaboard-sorts { display: none; } }

.ideaboard-filter-bar .ideaboard-filter-right .idea-count { left: 60%; position: fixed; }

.ideaboard-filter-bar .fractal-button, .ideaboard-filter-bar .f-ideaboard-filterbar-btn-wrap { margin-right: 0; }

.ideaboard-filter-bar .f-ideaboard-filterbar-btn-wrap { display: inline-block; }

.ideaboard-filter-bar .f-dropdown-btn:not(.f-btn-primary):hover { border: 1px solid #bdc3c7; }

.ideaboard-filter-bar .ideaboard-filter-bar-actions .f-dropdown-btn i, .ideaboard-filter-bar .ideaboard-filter-bar-actions .f-dropdown-options i { margin-left: 0; }

.ideaboard-filter-bar .ideaboard-filter-bar-actions .f-dropdown-btn i:first-child, .ideaboard-filter-bar .ideaboard-filter-bar-actions .f-dropdown-options i:first-child { margin-right: 8px; }

.ideaboard-filter-bar .ideaboard-filter-bar-actions.ideaboard-filter-bar-actions-list { margin-left: 14px; }

.ideaboard-filter-bar .ideaboard-filter-bar-actions i.fa-th-large { font-weight: normal; }

.f-is-community-layout .ideaboard-filter-bar { margin-top: 16px; }

.f-is-community-layout .f-ideaboard-best-idea { margin-top: 2px; }

.f-is-community-layout .f-ideaboard-best-idea .f-ideaboard-filter-search-icon { top: 7px; }

.f-ideaboard-best-idea { background-color: #fff; margin-bottom: 0; margin-top: -2.4rem; min-height: 48px; }

.darkMode .f-ideaboard-best-idea { background-color: #444647; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* below filter-breakpoint, sidebar (filter) slides into fixed position overlaying grid */
.fractal-widget-ideaboard { /** Responsive card widths (When sidebar open) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo BPD-23765 Abstract all the grids / cards */ /* With sidebar (filter) taking ~255px of space on left */ /** END: Responsive card widths */ }

.fractal-widget-ideaboard .ideaboard-filters-placeholder, .fractal-widget-ideaboard .ideaboard-sidebar { position: relative; }

.fractal-widget-ideaboard .ideaboard-filters-placeholder .top-header, .fractal-widget-ideaboard .ideaboard-sidebar .top-header { display: none; }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid { width: calc(100% - 255px); }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid { width: 100%; } }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { /* Contained layout allows us to always cap at 4 cards per row */ width: calc((100% - 80px) / 4); /** Desktop screen sizes where sidebar (filter) floats taking up space **/ /** Small screens where sidebar (filter) slides over taking no space **/ }

@media (max-width: 1200px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 60px) / 3); } }

@media (max-width: 950px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 40px) / 2); } }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 40px) / 2); } }

@media (max-width: 425px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { min-width: 200px; width: 100%; } }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 64px) / 4); }

@media (max-width: 1200px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 48px) / 3); } }

@media (max-width: 950px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 32px) / 2); } }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 32px) / 2); } }

@media (max-width: 425px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { min-width: 200px; width: 100%; } }

.fractal-widget-ideaboard .ideaboard-sidebar { height: 100%; margin: 10px; min-height: 400px; min-width: 0; overflow-y: auto; transition: all 0.2s ease-in-out; width: 0; }

.fractal-widget-ideaboard .ideaboard-sidebar .f-idea-filters-section { padding: 0 20px 20px; }

.fractal-widget-ideaboard .ideaboard-sidebar .ideaboard-sidebar-float { background: #f5f5f6; border: 1px solid #d5d9db; border-radius: 2px; min-height: 400px; min-width: 0; overflow-y: auto; padding: 0 0 15px; transition: all 0.2s ease-in-out; width: 0; }

.fractal-widget-ideaboard .ideaboard-sidebar .list .ideaboard-sidebar-float { height: 100%; }

.fractal-widget-ideaboard .ideaboard-sidebar.show { min-width: 240px; overflow-x: hidden; width: 240px; }

.fractal-widget-ideaboard .ideaboard-sidebar.show .ideaboard-sidebar-float { min-width: 240px; width: 240px; }

.fractal-widget-ideaboard .ideaboard-sidebar.fixed .ideaboard-sidebar-float { position: fixed; }

.fractal-widget-ideaboard .ideaboard-sidebar.fixed-at-200 .ideaboard-sidebar-float { top: 67px; }

.fractal-widget-ideaboard .ideaboard-sidebar.fixed-at-400 .ideaboard-sidebar-float { top: -133px; }

.fractal-widget-ideaboard .ideaboard-sidebar.hide { border: 0; margin: 20px 0; min-width: 0; padding: 20px 0; pointer-events: none; width: 0; }

.fractal-widget-ideaboard .ideaboard-sidebar.relative .ideaboard-sidebar-float { position: relative; top: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
/* below filter-breakpoint, sidebar (filter) slides into fixed position overlaying grid */
.fractal-widget-ideaboard { /** Responsive card widths (When sidebar open) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo BPD-23765 Abstract all the grids / cards */ /* With sidebar (filter) taking ~255px of space on left */ /** END: Responsive card widths */ }

.fractal-widget-ideaboard .ideaboard-filters-placeholder, .fractal-widget-ideaboard .ideaboard-sidebar { position: relative; }

.fractal-widget-ideaboard .ideaboard-filters-placeholder .top-header, .fractal-widget-ideaboard .ideaboard-sidebar .top-header { display: none; }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid { width: calc(100% - 255px); }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid { width: 100%; } }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { /* Contained layout allows us to always cap at 4 cards per row */ width: calc((100% - 80px) / 4); /** Desktop screen sizes where sidebar (filter) floats taking up space **/ /** Small screens where sidebar (filter) slides over taking no space **/ }

@media (max-width: 1200px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 60px) / 3); } }

@media (max-width: 950px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 40px) / 2); } }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { width: calc((100% - 40px) / 2); } }

@media (max-width: 425px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card { min-width: 200px; width: 100%; } }

.fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 64px) / 4); }

@media (max-width: 1200px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 48px) / 3); } }

@media (max-width: 950px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 32px) / 2); } }

@media (max-width: 700px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { width: calc((100% - 32px) / 2); } }

@media (max-width: 425px) { .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card-placeholder.f-nov-2019-card-redesign, .fractal-widget-ideaboard .ideaboard-sidebarred .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign { min-width: 200px; width: 100%; } }

@media (max-width: 700px) { body.ideaboard-sidebar-open { overflow-y: hidden; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .f-idea-filters-section { height: calc(100% - 50px); overflow: auto; overflow-x: hidden; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-filters-placeholder, body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebar { border-bottom: 0; border-radius: 0; border-top: 0; bottom: 0; left: 0; margin: 0; opacity: 1; overflow-y: auto; position: fixed; top: 0; transition: left 0.5s; z-index: 1000; /* Different styles for css transition full height left slide */ }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-filters-placeholder .ideaboard-sidebar-float, body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebar .ideaboard-sidebar-float { border-bottom: 0; border-radius: 0; border-top: 0; height: 100%; overflow-x: hidden; overflow-y: auto; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-filters-placeholder .top-header, body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebar .top-header { display: block; height: 50px; padding-top: 15px; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-filters-placeholder.hide, body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebar.hide { left: -235px; margin-top: 0; padding-top: 0; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-filters-placeholder.fixed .ideaboard-sidebar-float, body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebar.fixed .ideaboard-sidebar-float { top: 0; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred { min-width: 0; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show { height: 100%; min-width: 320px; padding-left: 0; padding-right: 0; position: fixed; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show .top-header { border-bottom: 1px solid #bdc3c7; padding-left: 20px; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show .ideaboard-sidebar-float { height: 100%; min-width: 320px; padding: 0; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show .ideaboard-sidebar-float .ideaboard-filters { height: 100%; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show .ideaboard-sidebar-float .top-header-button { padding-right: 20px; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .ideaboard-sidebarred .ideaboard-sidebar.show .ideaboard-sidebar-float .top-header-button .f-close-text { position: relative; right: 3px; top: -1px; }
  body.ideaboard-sidebar-open .fractal-widget-ideaboard .f-ideaboard-overlay.show { background: rgba(0, 0, 0, 0.35); bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 900; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-ideaboard .ideaboard-filter-bar-placeholder { display: flex; justify-content: space-between; }

.fractal-widget-ideaboard .ideaboard-filter-bar-placeholder .filter-button { background: #d5d9db; border: 0; border-radius: 4px; height: 32px; margin-left: 10px; width: 92px; }

.fractal-widget-ideaboard .ideaboard-filter-bar-placeholder .right { align-items: center; display: flex; }

.fractal-widget-ideaboard .ideaboard-filter-bar-placeholder .right .filter-sorts { background: #d5d9db; border: 0; border-radius: 1px; height: 21px; margin-right: 15px; width: 244px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-ideaboard-empty { align-items: center; display: flex; height: calc(100vh - 176px); justify-content: center; width: 100%; }

.f-ideaboard-empty.f-participant-empty { height: auto; }

.f-ideaboard-empty .f-ideaboard-content { align-items: center; display: flex; flex-direction: column; }

.f-ideaboard-empty .f-ideaboard-content .f-ideaboard-empty-title { color: #999ea1; font-size: 18px; font-weight: 500; margin-bottom: 8px; }

.f-ideaboard-empty .f-ideaboard-content .f-ideaboard-empty-subtext { font-size: 14px; font-weight: 300; margin-bottom: 16px; }

.f-ideaboard-empty .f-ideaboard-content .f-ideaboard-empty-submit { font-size: 14px; font-weight: 500; text-decoration: none; }

.f-ideaboard-empty .f-ideaboard-content .f-ideaboard-empty-submit:hover { cursor: pointer; }

.f-ideaboard-empty .f-join-event-btn { font-size: 14px !important; height: 32px; padding: 0 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-widget-ideaboard * { box-sizing: border-box; }

.fractal-widget-ideaboard .ideaboard-bottom { display: flex; }

.fractal-widget-ideaboard .ideaboard-bottom.global-nav-showing { height: calc(100vh - 192px); }

.fractal-widget-ideaboard .ideaboard-bottom.global-nav-showing.masthead-showing { height: calc(100vh - 252px); }

.fractal-widget-ideaboard .ideaboard-bottom.global-nav-not-showing { height: calc(100vh - 142px); }

.fractal-widget-ideaboard .ideaboard-bottom.global-nav-not-showing.masthead-showing { height: calc(100vh - 202px); }

.fractal-widget-ideaboard .fractal-secondary-ideas-view-grid .ideaboard-card.f-nov-2019-card-redesign .f-card-image .f-card-member { margin: -32px 18px 0; }

#bi-page-ct-list #main_content { margin-top: 15px; width: 100%; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-toast { margin-top: 35px; }

.f-subscription-page-container { background: url(/fractal/dist/images/a17ddf3d35494143aab9.png); background-repeat: no-repeat; background-size: cover; color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 18px; min-height: calc(100vh - 4.2889vh - 50px); text-align: left; }

.f-subscription-page-container.f-services { min-height: 1400px; }

@media screen and (max-width: 1393px) { .f-subscription-page-container.f-services { min-height: 2200px; } }

.f-subscription-page-container .f-subscription-page-plans-prices-btn, .f-subscription-page-container .f-subscription-page-checkout-btn, .f-subscription-page-container .f-subscription-page-services-btn, .f-subscription-page-container .f-subscription-page-tips-btn { user-select: none; }

.f-subscription-page-container .f-subscription-page-plans-prices-btn:hover, .f-subscription-page-container .f-subscription-page-checkout-btn:hover, .f-subscription-page-container .f-subscription-page-services-btn:hover, .f-subscription-page-container .f-subscription-page-tips-btn:hover { cursor: pointer; opacity: 0.9; }

.f-subscription-page-container i { margin-right: 5px; }

.f-subscription-page-container .f-btn-i { margin-right: 10px; }

.f-subscription-page-container .f-add-to-cart.fractal-button.f-btn-sm { background-color: #2980b9; font-size: 18px; height: 52px; margin-left: 0; margin-top: 40px; width: 218px; }

.f-subscription-page-container .f-subscription-page-title { color: #444647; font-size: 32px; line-height: 80px; margin-left: 60px; text-align: left; }

.f-subscription-page-container .f-row { align-items: center; display: flex; justify-content: space-between; }

.f-subscription-page-container .f-col { display: flex; flex-direction: column; min-width: 138px; }

.f-subscription-page-container .f-manager-price { color: #2ecc71; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.01em; line-height: 64px; }

.f-subscription-page-container .f-num-managers { font-family: Lato, 'Open Sans', arial, sans serif; font-size: 32px; font-weight: 400; letter-spacing: 0; line-height: 40px; text-align: center; user-select: none; }

.f-subscription-page-container .f-subscription-page-plans-prices-btn, .f-subscription-page-container .f-subscription-page-services-btn button { background: #3498db; border-radius: 8px; color: #fff; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 16px; font-weight: 700; line-height: 36px; }

.f-subscription-page-container .f-subscription-page-services-price, .f-subscription-page-container .f-remove { color: #797d7f; }

.f-subscription-page-container .f-hint-text { color: #999ea1; }

.f-subscription-page-container .f-subscription-page-plans-title { font-size: 24px; font-weight: bold; line-height: 36px; margin-bottom: 20px; }

.f-subscription-page-container .f-subscription-page-plans, .f-subscription-page-container .f-subscription-page-services, .f-subscription-page-container .f-subscription-page-cart, .f-subscription-page-container .f-subscription-page-tips { background-color: #fff; border-radius: 10px; margin-top: 160px; }

.f-subscription-page-container .f-subscription-page-plans, .f-subscription-page-container .f-subscription-page-tips, .f-subscription-page-container .f-subscription-page-services, .f-subscription-page-container .f-subscription-page-cart { box-shadow: 0 0 6px 5px #d5d9db; }

.f-subscription-page-container .f-subscription-page-inner-container { align-items: center; display: flex; justify-content: center; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-tips { height: 692px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-tips { padding: 40px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-checkout { background-color: #2ecc71; color: #fff; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-managers-number { align-items: center; color: #444647; display: flex; justify-content: space-evenly; margin-right: -17px; width: 180px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-managers-number .f-manager-btn { align-items: center; background: white; border: 1px solid #bdc3c7; color: #999ea1; cursor: pointer; display: flex; height: 36px; justify-content: center; width: 36px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-managers-number .f-manager-btn i { font-size: 16px; margin: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-title, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-tips-title { font-weight: 700; line-height: 42px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container { display: flex; margin-right: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans { height: 640px; width: 654px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans.f-memo { height: 650px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans .f-ribbon-container { display: flex; justify-content: flex-end; margin-bottom: -20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans .f-ribbon-container .f-ribbon { border-bottom: 24px solid #9b59b6; border-left: 25px solid transparent; border-right: 10px solid #9b59b6; border-top: 24px solid #9b59b6; bottom: 20px; height: 40px; left: 40px; position: relative; width: 260px; z-index: 1; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans .f-ribbon-container .f-ribbon .f-ribbon-text { color: #fff; margin-left: 14px; position: absolute; top: -12px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans .f-subscription-page-plans-point { font-size: 16px; font-weight: 400; line-height: 16.8px; margin-top: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips { height: 650px; margin-left: 40px; width: 415px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-title { line-height: 34px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-text { color: #797d7f; font-size: 16px; margin-bottom: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-img { align-items: center; justify-content: center; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-img img { width: 200px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-btn { align-items: center; display: flex; justify-content: center; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-tips .f-subscription-page-tips-btn button { background-color: #bdc3c7; border-radius: 8px; color: #fff; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 16px; font-weight: 700; margin-top: 60px; width: 200px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container { border-top: 1px dashed #bdc3c7; margin-top: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-row { padding-right: 80px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-btn { align-items: center; background: #3498db; border-radius: 8px; color: #fff; cursor: pointer; display: flex; height: 48px; justify-content: center; margin-left: 210px; margin-top: 30px; width: 170px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-price, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-managers-number { margin-top: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle { font-weight: 400; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label::before { margin-left: 15px; margin-right: 35px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label::before, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label::after { content: ' '; display: inline-block; width: 55px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label.f-toggle-off::after, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-on .f-toggle-inner::before { content: 'Annual'; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label.f-toggle-on::before, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-off .f-toggle-inner::before { content: 'Monthly'; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label { background: #797d7f; border-radius: 55px; box-shadow: 0 0 0 2px #797d7f; color: white; height: 40px; line-height: 36px; width: 175px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-toggle .f-toggle-label .f-toggle-inner { align-items: center; background: white; border-radius: 66px; box-shadow: #797d7f 0 4px 8px; color: black; display: flex; height: 45px; justify-content: center; top: -3px; width: 100px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-subscription-page-plans-prices-subheading2 { color: #bdc3c7; font-size: 12px; margin-left: 8px; margin-top: 10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-inner-container .f-subscription-page-plans-prices .f-green { color: #1abc9c; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-container .f-subscription-page-plans-prices-container .f-subscription-page-plans-prices-btn .f-add-to-cart { width: 574px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session { background-color: #f5f5f6; margin-top: 20px; padding: 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-you-get { font-size: 20px; margin-bottom: 10px; margin-top: -15px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session i { align-self: flex-start; margin-top: 3px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-subscription-page-plans-title { font-size: 20px; margin-top: -10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-subscription-page-services-description { padding-right: 40px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-subscription-page-services-session-price { margin-right: 10px; text-align: right; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-subscription-page-services-session-price.f-col .f-hint-text { margin-top: 10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session .f-subscription-page-services-btn button { height: 40px; width: 130px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo { background-color: inherit; border: 1px solid #797d7f; border-radius: 5px; font-size: 16px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo:hover { background-color: rgba(41, 128, 185, 0.1); cursor: pointer; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo.f-selected { background-color: rgba(41, 128, 185, 0.28); }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-plans-title { font-size: 16px; margin-bottom: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-description { max-width: 350px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-col { min-width: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price { align-items: center; justify-content: center; margin-right: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price .f-subscription-page-services-price { font-size: 16px; margin-right: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price .f-hint-text { font-size: 16px; margin-top: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price.f-bordered { border-left: 1px solid #999ea1; border-right: 1px solid #999ea1; height: 130px; min-width: 100px; padding: 0 30px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price.f-last { margin-left: -5px; margin-right: 10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-session-price.f-last.f-one-hour { padding-right: 10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services { margin-right: 20px; max-width: 800px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services.f-memo .f-subscription-page-services-description { font-size: 16px; padding-right: 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services.f-memo .f-selection-container { justify-content: right; margin-top: 40px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services.f-memo .f-selection-container .f-add-selection { font-size: 16px; height: 65px; justify-content: center; padding: 0 20px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services .f-subscription-page-plans-title.f-section { padding-top: 40px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-price { font-size: 30px; font-weight: 400; letter-spacing: 0; line-height: 36px; text-align: right; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart { align-self: flex-start; width: 525px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-cart-title { margin-bottom: -5px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-subscription-page-cart-item { border: 1px solid #bdc3c7; border-radius: 6px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-subscription-page-cart-item .f-subscription-page-plans-managers-number .f-manager-btn { padding-top: 8px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-subscription-page-checkout-btn { align-items: center; background: #2ecc71; border-radius: 6px; cursor: pointer; display: flex; font-size: 20px; font-weight: 700; justify-content: center; line-height: 36px; margin-top: 20px; padding: 10px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-subscription-page-checkout-btn.f-cart-btn-disabled { background-color: #e7e9eb; cursor: not-allowed; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-subscription-page-checkout-btn.f-cart-btn-disabled .fa-spinner { color: #fff; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart .f-no-plan { font-size: 18px; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart-item.f-subscription-page-services-session { background-color: #fff; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart-item.f-subscription-page-services-session .f-remove { cursor: pointer; justify-content: flex-end; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart-item.f-subscription-page-services-session .f-remove i { margin: -10px -10px -20px 0; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart-item.f-subscription-page-services-session i { line-height: initial; }

.f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart-item.f-subscription-page-services-session .f-subscription-page-plans-prices-subheading1 { margin-top: 5px; }

.f-subscription-page-container .f-subscription-page-inner-container * { box-sizing: border-box; }

.f-idea-page-footer.no-margin { margin-top: 0; }

@media screen and (max-width: 1392px) { .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart, .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-tips { padding: 24px; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services { max-width: 60%; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart { align-self: flex-start; width: 33%; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-managers-subheading { font-size: 16px; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-plans-managers-subheading:nth-child(2) { text-align: right; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-subscription-page-services-description { max-width: 100%; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services-session.f-memo .f-col { max-width: 50%; } }

@media screen and (max-width: 1024px) { .f-subscription-page-container .f-subscription-page-inner-container { align-items: center; display: flex; flex-direction: column; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-services { margin-right: 0; max-width: 90%; }
  .f-subscription-page-container .f-subscription-page-inner-container .f-subscription-page-cart { align-self: center; margin-top: 50px; width: 90%; } }

.f-subscription-page-container.f-expired { min-height: 500px; }

/* regrion: reset; don't change this, reset idential to ws_css.bix */
* { margin: 0; padding: 0; }

a { outline: none; text-decoration: none; }

a:hover { text-decoration: underline; }

/* end region */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: url(/fractal/dist/c656cbb3e8abfad0c3bc.eot); src: url(/fractal/dist/c656cbb3e8abfad0c3bc.eot?#iefix) format("embedded-opentype"), url(/fractal/dist/172c52736bbf77fb25fa.woff) format("woff"), url(/fractal/dist/9cce1e2d75ece4d565e5.ttf) format("truetype"), url(/fractal/dist/images/d8dfb5c505d59140f2cb.svg#open_sansregular) format("svg"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url(/fractal/dist/fdf56b22f9fbdf2f583f.woff); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: bold; src: url(/fractal/dist/4900389b61d2a6bba56b.eot?v=1.1.0); src: url(/fractal/dist/4900389b61d2a6bba56b.eot?#iefix&v=1.1.0) format("embedded-opentype"), url(/fractal/dist/1a12317389afca44fc29.woff2?v=1.1.0) format("woff2"), url(/fractal/dist/08328bf7467540700abe.woff?v=1.1.0) format("woff"), url(/fractal/dist/1576987ece25952e65c5.ttf?v=1.1.0) format("truetype"), url(/fractal/dist/images/cfa6cd05c6dd58203c3d.svg#Bold) format("svg"); }

/* #region full page body */
body { background: #f5f5f6; color: #444647; }

body.fractal-body { display: flex; flex-direction: column; font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 1.42857; margin: 0; max-width: 100%; min-height: 100%; overflow-x: hidden; padding: 0; }

/* #endregion */

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
#f-subscription { width: 914px; }

.f-subscription-detail-container { color: #444647; font-family: Lato, 'Open Sans', arial, sans serif; font-size: 16px; height: 100%; padding: 20px 40px; text-align: left; }

.f-subscription-detail-container .f-bold { font-weight: 700; }

.f-subscription-detail-container .f-row { margin-bottom: 5px; }

.f-subscription-detail-container .f-col { flex: 1; }

.f-subscription-detail-container .f-product { flex: 4; }

.f-subscription-detail-container .f-plan { flex: 3; }

.f-subscription-detail-container .f-subscription-detail-product, .f-subscription-detail-container .f-subscription-detail-subtotal { font-weight: 600; }

.f-subscription-detail-container .f-row, .f-subscription-detail-container .f-subscription-detail-billing, .f-subscription-detail-container .f-subscription-detail-right-container { display: flex; }

.f-subscription-detail-container .f-subscription-userhome-header { font-size: 24px; }

.f-subscription-detail-container .f-subscription-detail-table, .f-subscription-detail-container .f-subscription-box { background: #fff; }

.f-subscription-detail-container .f-subscription-detail-right-container { justify-content: flex-end; margin-bottom: 60px; margin-top: -30px; }

.f-subscription-detail-container .f-subscription-detail-right-container .fractal-dropdown { background: #fff; border: 1px solid #bdc3c7; }

.f-subscription-detail-container .f-subscription-detail-right-container .fractal-dropdown .f-dropdown-btn i { color: #999ea1; }

.f-subscription-detail-container .f-subscription-detail-right-container .f-subscription-detail-billing-date { color: #797d7f; font-style: italic; padding-right: 20px; padding-top: 8px; }

.f-subscription-detail-container .f-row, .f-subscription-detail-container .f-subscription-detail-billing { justify-content: space-between; }

.f-subscription-detail-container .f-subscription-detail-inner-container { margin-top: -40px; padding-bottom: 20px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing { flex-direction: column; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-detail-table { border-radius: 5px; padding: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-detail-table .f-subscription-detail-header { border-bottom: 1px solid #e7e9eb; color: #999ea1; font-size: 14px; margin-bottom: 10px; padding-bottom: 5px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-detail-table .f-subscription-detail-status { border: 1px solid #27ae60; border-radius: 80px; color: #27ae60; margin-right: 12px; padding: 0 5px; width: 78px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-detail-table .inactive { border: 1px solid #e74c3c; color: #e74c3c; margin-left: -30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-enhance { font-size: 24px; margin-bottom: 30px; margin-top: 50px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container { align-items: flex-start; display: flex; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box { border-radius: 10px; box-shadow: 0 0 6px 5px #d5d9db; flex: 1; padding: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box:first-child { margin-right: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-current-row { margin-top: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-current-orders { margin-bottom: 30px; margin-left: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-current-orders ul { list-style: disc; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-total { color: #797d7f; font-size: 20px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-addons { border-bottom: 1px solid #e7e9eb; margin-bottom: 30px; margin-top: 20px; padding-bottom: 20px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-addons .f-addons-list span { max-width: 330px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-checkout-container { align-items: center; display: flex; flex-direction: column; justify-content: center; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-checkout-container .f-checkout { background-color: #2ecc71; border-radius: 6px; color: #fff; cursor: pointer; margin-top: 20px; padding: 15px; user-select: none; width: 129px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-checkout-container .f-checkout .fa-spinner { color: #fff; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-checkout-container .f-inactive { background-color: #e7e9eb; cursor: not-allowed; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-checkout-container .f-update-plan-subtitle { color: #999ea1; margin-top: 20px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item { margin-top: 20px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item:first-child { margin-top: 0; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-subscription-page-plans-title { font-weight: bold; line-height: 20px; margin-bottom: 10px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-subscription-page-plans-managers-number { align-items: center; color: #444647; display: flex; justify-content: space-evenly; margin-right: -17px; width: 180px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-subscription-page-services-price { color: #797d7f; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-num-managers, .f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-subscription-page-services-price { font-size: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-manager-btn { align-items: center; background: white; border: 1px solid #bdc3c7; border-radius: 5px; color: #999ea1; cursor: pointer; display: flex; height: 30px; justify-content: center; width: 30px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-subscription-item .f-manager-btn i { font-size: 14px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-subscription-detail-billing .f-subscription-box-container .f-subscription-box .f-addon-divider { border-top: 1px solid #e7e9eb; margin-bottom: -20px; margin-left: 20px; min-width: 342px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-dropdown-btn { background: #999ea1; color: #fff; margin-top: 5px; }

.f-subscription-detail-container .f-subscription-detail-inner-container .f-dropdown-options { width: 183px; }

.f-subscription-detail-container.f-subscription-idea-box { color: #444647; padding: 0; }

.f-subscription-detail-container.f-subscription-idea-box .f-subscription-detail-inner-container { margin-top: 20px; padding-bottom: 0; padding-left: 0; padding-top: 4px; }

.f-subscription-detail-container.f-subscription-idea-box .f-subscription-detail-inner-container .fractal-dropdown { background: inherit; }

.f-subscription-detail-container.f-subscription-idea-box .f-subscription-detail-inner-container .f-subscription-detail-table { background: inherit; padding: 0; }

.f-subscription-detail-container.f-subscription-idea-box .f-subscription-detail-right-container { margin-top: -90px; }

.f-subscription-modal .close-button { margin-right: -10px; margin-top: -50px; }

.f-subscription-modal .f-hidden { display: none; }

.f-subscription-modal .ReactModal__Content.ReactModal__Content--after-open .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer { border-top: 0; justify-content: center; margin-top: 20px; }

.f-subscription-modal .ReactModal__Content.ReactModal__Content--after-open .f-modal-design-titleHeaderSubmitFooter-v1 .f-footer button { border: 1px solid #bdc3c7; }

.f-subscription-modal .fractal-modal-header { border-bottom: 0; }

.f-subscription-modal .fractal-modal-header .title { color: #797d7f; font-weight: 600; margin-left: 50px; width: 350px; }

.f-subscription-modal .f-modal-design-titleHeaderSubmitFooter-v1 { padding: 20px; text-align: center; width: 500px; }

.f-subscription-modal .f-btn-cancel-subscription { background: #3498db; color: #fff; margin-left: 40px; }

.f-subscription-modal .f-btn-cancel-subscription:hover { background: #3498db; opacity: 0.85; }

.f-cancelled .fractal-modal-header .close-button { margin-top: -40px; }


/*# sourceMappingURL=shared.css.map?a0e0612ef42f90941a03*/