@charset "UTF-8"; /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ /* NEW */ /** * Typography */ /** * Accessibility */ /* Grid System Nova UI Toolkit includes a flexbox based grid system called gridlex. You can check the documentation at : http://gridlex.devlint.fr/ Weight: 2 Styleguide grid */ /* stylelint-disable */ /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ @font-face { font-family: "nova-icons-1afe74a5d0c0e65e8a2"; src: url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.eot?9721c9c4e01704f75ec6929d88c1167f?#iefix") format("embedded-opentype"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.woff2?9721c9c4e01704f75ec6929d88c1167f") format("woff2"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.woff?9721c9c4e01704f75ec6929d88c1167f") format("woff"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.ttf?9721c9c4e01704f75ec6929d88c1167f") format("truetype"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.svg?9721c9c4e01704f75ec6929d88c1167f#nova-icons-1afe74a5d0c0e65e8a2") format("svg"); } .nova-toast-error:before, .nova-toast-warning:before, .nova-toast-success:before, .nova-toast-info:before, .nova-control-checkbox input:checked ~ .nova-control-indicator:before, .nova-control-checkbox input:indeterminate ~ .nova-control-indicator:before, .nova-datetimepicker .react-calendar .react-calendar__navigation__prev-button:before, .nova-datetimepicker .react-calendar .react-calendar__navigation__next-button:before, .nova-icon-weather:before, .nova-icon-warning:before, .nova-icon-user:before, .nova-icon-user-management:before, .nova-icon-tools:before, .nova-icon-terminal:before, .nova-icon-tag:before, .nova-icon-share:before, .nova-icon-select-arrow:before, .nova-icon-security:before, .nova-icon-security-cam:before, .nova-icon-search:before, .nova-icon-sdk:before, .nova-icon-scene:before, .nova-icon-rule-engine:before, .nova-icon-right:before, .nova-icon-right-2:before, .nova-icon-refresh:before, .nova-icon-quick-start:before, .nova-icon-question:before, .nova-icon-preview:before, .nova-icon-prediction:before, .nova-icon-play:before, .nova-icon-pending:before, .nova-icon-pause:before, .nova-icon-org:before, .nova-icon-on-off:before, .nova-icon-more:before, .nova-icon-machine-learning:before, .nova-icon-lock:before, .nova-icon-location:before, .nova-icon-introduction:before, .nova-icon-info:before, .nova-icon-industry:before, .nova-icon-import:before, .nova-icon-home:before, .nova-icon-health:before, .nova-icon-header-user:before, .nova-icon-header-search:before, .nova-icon-header-help:before, .nova-icon-from-device:before, .nova-icon-file:before, .nova-icon-field-group:before, .nova-icon-farm:before, .nova-icon-external-link:before, .nova-icon-expand-all:before, .nova-icon-exclamation-circle:before, .nova-icon-error:before, .nova-icon-edit:before, .nova-icon-duration:before, .nova-icon-draggable:before, .nova-icon-download:before, .nova-icon-down:before, .nova-icon-down-circle:before, .nova-icon-down-alt:before, .nova-icon-devicetype:before, .nova-icon-devicetype-alt:before, .nova-icon-device-sharing:before, .nova-icon-delete:before, .nova-icon-data-management:before, .nova-icon-connect-cloud:before, .nova-icon-collapse-all:before, .nova-icon-cog:before, .nova-icon-close:before, .nova-icon-clone:before, .nova-icon-clock:before, .nova-icon-check:before, .nova-icon-check-circle:before, .nova-icon-case-study:before, .nova-icon-calendar:before, .nova-icon-calendar-right:before, .nova-icon-calendar-left:before, .nova-icon-bulb:before, .nova-icon-bank:before, .nova-icon-api:before, .nova-icon-add:before, .nova-icon-add-circle:before, .nova-icon-action:before { font-family: "nova-icons-1afe74a5d0c0e65e8a2"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-feature-settings: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; } .nova-icon-action:before { content: "\F101"; } .nova-icon-add-circle:before { content: "\F102"; } .nova-icon-add:before { content: "\F103"; } .nova-icon-api:before { content: "\F104"; } .nova-icon-bank:before { content: "\F105"; } .nova-icon-bulb:before { content: "\F106"; } .nova-icon-calendar-left:before { content: "\F107"; } .nova-icon-calendar-right:before { content: "\F108"; } .nova-icon-calendar:before { content: "\F109"; } .nova-icon-case-study:before { content: "\F10A"; } .nova-icon-check-circle:before { content: "\F10B"; } .nova-icon-check:before { content: "\F10C"; } .nova-icon-clock:before { content: "\F10D"; } .nova-icon-clone:before { content: "\F10E"; } .nova-icon-close:before { content: "\F10F"; } .nova-icon-cog:before { content: "\F110"; } .nova-icon-collapse-all:before { content: "\F111"; } .nova-icon-connect-cloud:before { content: "\F112"; } .nova-icon-data-management:before { content: "\F113"; } .nova-icon-delete:before { content: "\F114"; } .nova-icon-device-sharing:before { content: "\F115"; } .nova-icon-devicetype-alt:before { content: "\F116"; } .nova-icon-devicetype:before { content: "\F117"; } .nova-icon-down-alt:before { content: "\F118"; } .nova-icon-down-circle:before { content: "\F119"; } .nova-icon-down:before { content: "\F11A"; } .nova-icon-download:before { content: "\F11B"; } .nova-icon-draggable:before { content: "\F11C"; } .nova-icon-duration:before { content: "\F11D"; } .nova-icon-edit:before { content: "\F11E"; } .nova-icon-error:before { content: "\F11F"; } .nova-icon-exclamation-circle:before { content: "\F120"; } .nova-icon-expand-all:before { content: "\F121"; } .nova-icon-external-link:before { content: "\F122"; } .nova-icon-farm:before { content: "\F123"; } .nova-icon-field-group:before { content: "\F124"; } .nova-icon-file:before { content: "\F125"; } .nova-icon-from-device:before { content: "\F126"; } .nova-icon-header-help:before { content: "\F127"; } .nova-icon-header-search:before { content: "\F128"; } .nova-icon-header-user:before { content: "\F129"; } .nova-icon-health:before { content: "\F12A"; } .nova-icon-home:before { content: "\F12B"; } .nova-icon-import:before { content: "\F12C"; } .nova-icon-industry:before { content: "\F12D"; } .nova-icon-info:before { content: "\F12E"; } .nova-icon-introduction:before { content: "\F12F"; } .nova-icon-location:before { content: "\F130"; } .nova-icon-lock:before { content: "\F131"; } .nova-icon-machine-learning:before { content: "\F132"; } .nova-icon-more:before { content: "\F133"; } .nova-icon-on-off:before { content: "\F134"; } .nova-icon-org:before { content: "\F135"; } .nova-icon-pause:before { content: "\F136"; } .nova-icon-pending:before { content: "\F137"; } .nova-icon-play:before { content: "\F138"; } .nova-icon-prediction:before { content: "\F139"; } .nova-icon-preview:before { content: "\F13A"; } .nova-icon-question:before { content: "\F13B"; } .nova-icon-quick-start:before { content: "\F13C"; } .nova-icon-refresh:before { content: "\F13D"; } .nova-icon-right-2:before { content: "\F13E"; } .nova-icon-right:before { content: "\F13F"; } .nova-icon-rule-engine:before { content: "\F140"; } .nova-icon-scene:before { content: "\F141"; } .nova-icon-sdk:before { content: "\F142"; } .nova-icon-search:before { content: "\F143"; } .nova-icon-security-cam:before { content: "\F144"; } .nova-icon-security:before { content: "\F145"; } .nova-icon-select-arrow:before { content: "\F146"; } .nova-icon-share:before { content: "\F147"; } .nova-icon-tag:before { content: "\F148"; } .nova-icon-terminal:before { content: "\F149"; } .nova-icon-tools:before { content: "\F14A"; } .nova-icon-user-management:before { content: "\F14B"; } .nova-icon-user:before { content: "\F14C"; } .nova-icon-warning:before { content: "\F14D"; } .nova-icon-weather:before { content: "\F14E"; } /* Animations Nova UI Toolkit includes ReactTransitionGroup which allow to do simple animations. You can check the documentation at : https://facebook.github.io/react/docs/animation.html Weight: 2 Styleguide Animations */ .fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .popin-enter { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; } .popin-enter-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: opacity 300ms, -webkit-transform 300ms, -webkit-filter 300ms; transition: opacity 300ms, -webkit-transform 300ms, -webkit-filter 300ms; transition: opacity 300ms, transform 300ms, filter 300ms; transition: opacity 300ms, transform 300ms, filter 300ms, -webkit-transform 300ms, -webkit-filter 300ms; } .popin-exit { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-filter: blur(5px); filter: blur(5px); } .popin-exit-active { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; -webkit-transition: opacity 300ms, -webkit-transform 300ms, -webkit-filter 300ms; transition: opacity 300ms, -webkit-transform 300ms, -webkit-filter 300ms; transition: opacity 300ms, transform 300ms, filter 300ms; transition: opacity 300ms, transform 300ms, filter 300ms, -webkit-transform 300ms, -webkit-filter 300ms; -webkit-filter: blur(0); filter: blur(0); } @-webkit-keyframes tooltipZoomInEffect { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes tooltipZoomInEffect { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes tooltipZoomOutEffect { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } } @keyframes tooltipZoomOutEffect { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } } .zoom-in-fast-appear, .zoom-in-fast-enter, .zoom-in-fast-leave { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .zoom-in-fast-appear, .zoom-in-fast-enter { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .zoom-in-fast-appear-active, .zoom-in-fast-enter-active { -webkit-animation-name: tooltipZoomInEffect; animation-name: tooltipZoomInEffect; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .zoom-in-fast-leave { -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); } .zoom-in-fast-leave-active { -webkit-animation-name: tooltipZoomOutEffect; animation-name: tooltipZoomOutEffect; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } /* Components Lots and lots of components Weight: 6 Styleguide components */ /* ========================================================================== GRIDLEX Just a Flexbox Grid System - v. 2.7.1 ========================================================================== */ [class~=grid], [class*=grid-], [class*=grid_] { box-sizing: border-box; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; margin: 0 -0.75rem; } [class~=col], [class*=col-], [class*=col_] { box-sizing: border-box; padding: 0 0.75rem 1.5rem; max-width: 100%; } [class~=col], [class*=col_] { -webkit-box-flex: 1; flex: 1 1 0%; } [class*=col-] { -webkit-box-flex: 0; flex: none; } [class~=grid][class~=col], [class~=grid][class*=col-], [class~=grid][class*=col_], [class*=grid-][class~=col], [class*=grid-][class*=col-], [class*=grid-][class*=col_], [class*=grid_][class~=col], [class*=grid_][class*=col-], [class*=grid_][class*=col_] { margin: 0; padding: 0; } /************************ HELPERS SUFFIXES *************************/ [class*=grid-][class*=-noGutter] { margin: 0; } [class*=grid-][class*=-noGutter] > [class~=col], [class*=grid-][class*=-noGutter] > [class*=col-] { padding: 0; } [class*=grid-][class*=-noWrap] { flex-wrap: nowrap; } [class*=grid-][class*=-center] { -webkit-box-pack: center; justify-content: center; } [class*=grid-][class*=-right] { -webkit-box-pack: end; justify-content: flex-end; align-self: flex-end; margin-left: auto; } [class*=grid-][class*=-top] { -webkit-box-align: start; align-items: flex-start; } [class*=grid-][class*=-middle] { -webkit-box-align: center; align-items: center; } [class*=grid-][class*=-bottom] { -webkit-box-align: end; align-items: flex-end; } [class*=grid-][class*=-reverse] { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; } [class*=grid-][class*=-column] { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } [class*=grid-][class*=-column] > [class*=col-] { flex-basis: auto; } [class*=grid-][class*=-column-reverse] { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } [class*=grid-][class*=-spaceBetween] { -webkit-box-pack: justify; justify-content: space-between; } [class*=grid-][class*=-spaceAround] { justify-content: space-around; } [class*=grid-][class*=-equalHeight] > [class~=col], [class*=grid-][class*=-equalHeight] > [class*=col-], [class*=grid-][class*=-equalHeight] > [class*=col_] { align-self: stretch; } [class*=grid-][class*=-equalHeight] > [class~=col] > *, [class*=grid-][class*=-equalHeight] > [class*=col-] > *, [class*=grid-][class*=-equalHeight] > [class*=col_] > * { height: 100%; } [class*=grid-][class*=-noBottom] > [class~=col], [class*=grid-][class*=-noBottom] > [class*=col-], [class*=grid-][class*=-noBottom] > [class*=col_] { padding-bottom: 0; } [class*=col-][class*=-top] { align-self: flex-start; } [class*=col-][class*=-middle] { align-self: center; } [class*=col-][class*=-bottom] { align-self: flex-end; } [class*=col-][class*=-first] { -webkit-box-ordinal-group: 0; order: -1; } [class*=col-][class*=-last] { -webkit-box-ordinal-group: 2; order: 1; } /************************ GRID BY NUMBER *************************/ [class*=grid-1] > [class~=col], [class*=grid-1] > [class*=col-], [class*=grid-1] > [class*=col_] { flex-basis: 100%; max-width: 100%; } [class*=grid-2] > [class~=col], [class*=grid-2] > [class*=col-], [class*=grid-2] > [class*=col_] { flex-basis: 50%; max-width: 50%; } [class*=grid-3] > [class~=col], [class*=grid-3] > [class*=col-], [class*=grid-3] > [class*=col_] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class*=grid-4] > [class~=col], [class*=grid-4] > [class*=col-], [class*=grid-4] > [class*=col_] { flex-basis: 25%; max-width: 25%; } [class*=grid-5] > [class~=col], [class*=grid-5] > [class*=col-], [class*=grid-5] > [class*=col_] { flex-basis: 20%; max-width: 20%; } [class*=grid-6] > [class~=col], [class*=grid-6] > [class*=col-], [class*=grid-6] > [class*=col_] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class*=grid-7] > [class~=col], [class*=grid-7] > [class*=col-], [class*=grid-7] > [class*=col_] { flex-basis: 14.2857142857%; max-width: 14.2857142857%; } [class*=grid-8] > [class~=col], [class*=grid-8] > [class*=col-], [class*=grid-8] > [class*=col_] { flex-basis: 12.5%; max-width: 12.5%; } [class*=grid-9] > [class~=col], [class*=grid-9] > [class*=col-], [class*=grid-9] > [class*=col_] { flex-basis: 11.1111111111%; max-width: 11.1111111111%; } [class*=grid-10] > [class~=col], [class*=grid-10] > [class*=col-], [class*=grid-10] > [class*=col_] { flex-basis: 10%; max-width: 10%; } [class*=grid-11] > [class~=col], [class*=grid-11] > [class*=col-], [class*=grid-11] > [class*=col_] { flex-basis: 9.0909090909%; max-width: 9.0909090909%; } [class*=grid-12] > [class~=col], [class*=grid-12] > [class*=col-], [class*=grid-12] > [class*=col_] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } @media (max-width: 80em) { [class*=_lg-1] > [class~=col], [class*=_lg-1] > [class*=col-], [class*=_lg-1] > [class*=col_] { flex-basis: 100%; max-width: 100%; } [class*=_lg-2] > [class~=col], [class*=_lg-2] > [class*=col-], [class*=_lg-2] > [class*=col_] { flex-basis: 50%; max-width: 50%; } [class*=_lg-3] > [class~=col], [class*=_lg-3] > [class*=col-], [class*=_lg-3] > [class*=col_] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class*=_lg-4] > [class~=col], [class*=_lg-4] > [class*=col-], [class*=_lg-4] > [class*=col_] { flex-basis: 25%; max-width: 25%; } [class*=_lg-5] > [class~=col], [class*=_lg-5] > [class*=col-], [class*=_lg-5] > [class*=col_] { flex-basis: 20%; max-width: 20%; } [class*=_lg-6] > [class~=col], [class*=_lg-6] > [class*=col-], [class*=_lg-6] > [class*=col_] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class*=_lg-7] > [class~=col], [class*=_lg-7] > [class*=col-], [class*=_lg-7] > [class*=col_] { flex-basis: 14.2857142857%; max-width: 14.2857142857%; } [class*=_lg-8] > [class~=col], [class*=_lg-8] > [class*=col-], [class*=_lg-8] > [class*=col_] { flex-basis: 12.5%; max-width: 12.5%; } [class*=_lg-9] > [class~=col], [class*=_lg-9] > [class*=col-], [class*=_lg-9] > [class*=col_] { flex-basis: 11.1111111111%; max-width: 11.1111111111%; } [class*=_lg-10] > [class~=col], [class*=_lg-10] > [class*=col-], [class*=_lg-10] > [class*=col_] { flex-basis: 10%; max-width: 10%; } [class*=_lg-11] > [class~=col], [class*=_lg-11] > [class*=col-], [class*=_lg-11] > [class*=col_] { flex-basis: 9.0909090909%; max-width: 9.0909090909%; } [class*=_lg-12] > [class~=col], [class*=_lg-12] > [class*=col-], [class*=_lg-12] > [class*=col_] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } } @media (max-width: 64em) { [class*=_md-1] > [class~=col], [class*=_md-1] > [class*=col-], [class*=_md-1] > [class*=col_] { flex-basis: 100%; max-width: 100%; } [class*=_md-2] > [class~=col], [class*=_md-2] > [class*=col-], [class*=_md-2] > [class*=col_] { flex-basis: 50%; max-width: 50%; } [class*=_md-3] > [class~=col], [class*=_md-3] > [class*=col-], [class*=_md-3] > [class*=col_] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class*=_md-4] > [class~=col], [class*=_md-4] > [class*=col-], [class*=_md-4] > [class*=col_] { flex-basis: 25%; max-width: 25%; } [class*=_md-5] > [class~=col], [class*=_md-5] > [class*=col-], [class*=_md-5] > [class*=col_] { flex-basis: 20%; max-width: 20%; } [class*=_md-6] > [class~=col], [class*=_md-6] > [class*=col-], [class*=_md-6] > [class*=col_] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class*=_md-7] > [class~=col], [class*=_md-7] > [class*=col-], [class*=_md-7] > [class*=col_] { flex-basis: 14.2857142857%; max-width: 14.2857142857%; } [class*=_md-8] > [class~=col], [class*=_md-8] > [class*=col-], [class*=_md-8] > [class*=col_] { flex-basis: 12.5%; max-width: 12.5%; } [class*=_md-9] > [class~=col], [class*=_md-9] > [class*=col-], [class*=_md-9] > [class*=col_] { flex-basis: 11.1111111111%; max-width: 11.1111111111%; } [class*=_md-10] > [class~=col], [class*=_md-10] > [class*=col-], [class*=_md-10] > [class*=col_] { flex-basis: 10%; max-width: 10%; } [class*=_md-11] > [class~=col], [class*=_md-11] > [class*=col-], [class*=_md-11] > [class*=col_] { flex-basis: 9.0909090909%; max-width: 9.0909090909%; } [class*=_md-12] > [class~=col], [class*=_md-12] > [class*=col-], [class*=_md-12] > [class*=col_] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } } @media (max-width: 48em) { [class*=_sm-1] > [class~=col], [class*=_sm-1] > [class*=col-], [class*=_sm-1] > [class*=col_] { flex-basis: 100%; max-width: 100%; } [class*=_sm-2] > [class~=col], [class*=_sm-2] > [class*=col-], [class*=_sm-2] > [class*=col_] { flex-basis: 50%; max-width: 50%; } [class*=_sm-3] > [class~=col], [class*=_sm-3] > [class*=col-], [class*=_sm-3] > [class*=col_] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class*=_sm-4] > [class~=col], [class*=_sm-4] > [class*=col-], [class*=_sm-4] > [class*=col_] { flex-basis: 25%; max-width: 25%; } [class*=_sm-5] > [class~=col], [class*=_sm-5] > [class*=col-], [class*=_sm-5] > [class*=col_] { flex-basis: 20%; max-width: 20%; } [class*=_sm-6] > [class~=col], [class*=_sm-6] > [class*=col-], [class*=_sm-6] > [class*=col_] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class*=_sm-7] > [class~=col], [class*=_sm-7] > [class*=col-], [class*=_sm-7] > [class*=col_] { flex-basis: 14.2857142857%; max-width: 14.2857142857%; } [class*=_sm-8] > [class~=col], [class*=_sm-8] > [class*=col-], [class*=_sm-8] > [class*=col_] { flex-basis: 12.5%; max-width: 12.5%; } [class*=_sm-9] > [class~=col], [class*=_sm-9] > [class*=col-], [class*=_sm-9] > [class*=col_] { flex-basis: 11.1111111111%; max-width: 11.1111111111%; } [class*=_sm-10] > [class~=col], [class*=_sm-10] > [class*=col-], [class*=_sm-10] > [class*=col_] { flex-basis: 10%; max-width: 10%; } [class*=_sm-11] > [class~=col], [class*=_sm-11] > [class*=col-], [class*=_sm-11] > [class*=col_] { flex-basis: 9.0909090909%; max-width: 9.0909090909%; } [class*=_sm-12] > [class~=col], [class*=_sm-12] > [class*=col-], [class*=_sm-12] > [class*=col_] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } } @media (max-width: 36em) { [class*=_xs-1] > [class~=col], [class*=_xs-1] > [class*=col-], [class*=_xs-1] > [class*=col_] { flex-basis: 100%; max-width: 100%; } [class*=_xs-2] > [class~=col], [class*=_xs-2] > [class*=col-], [class*=_xs-2] > [class*=col_] { flex-basis: 50%; max-width: 50%; } [class*=_xs-3] > [class~=col], [class*=_xs-3] > [class*=col-], [class*=_xs-3] > [class*=col_] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class*=_xs-4] > [class~=col], [class*=_xs-4] > [class*=col-], [class*=_xs-4] > [class*=col_] { flex-basis: 25%; max-width: 25%; } [class*=_xs-5] > [class~=col], [class*=_xs-5] > [class*=col-], [class*=_xs-5] > [class*=col_] { flex-basis: 20%; max-width: 20%; } [class*=_xs-6] > [class~=col], [class*=_xs-6] > [class*=col-], [class*=_xs-6] > [class*=col_] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class*=_xs-7] > [class~=col], [class*=_xs-7] > [class*=col-], [class*=_xs-7] > [class*=col_] { flex-basis: 14.2857142857%; max-width: 14.2857142857%; } [class*=_xs-8] > [class~=col], [class*=_xs-8] > [class*=col-], [class*=_xs-8] > [class*=col_] { flex-basis: 12.5%; max-width: 12.5%; } [class*=_xs-9] > [class~=col], [class*=_xs-9] > [class*=col-], [class*=_xs-9] > [class*=col_] { flex-basis: 11.1111111111%; max-width: 11.1111111111%; } [class*=_xs-10] > [class~=col], [class*=_xs-10] > [class*=col-], [class*=_xs-10] > [class*=col_] { flex-basis: 10%; max-width: 10%; } [class*=_xs-11] > [class~=col], [class*=_xs-11] > [class*=col-], [class*=_xs-11] > [class*=col_] { flex-basis: 9.0909090909%; max-width: 9.0909090909%; } [class*=_xs-12] > [class~=col], [class*=_xs-12] > [class*=col-], [class*=_xs-12] > [class*=col_] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } } /************************ COLS SIZES *************************/ [class~=grid] > [class*=col-1], [class*=grid-] > [class*=col-1], [class*=grid_] > [class*=col-1] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } [class~=grid] > [class*=col-2], [class*=grid-] > [class*=col-2], [class*=grid_] > [class*=col-2] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class~=grid] > [class*=col-3], [class*=grid-] > [class*=col-3], [class*=grid_] > [class*=col-3] { flex-basis: 25%; max-width: 25%; } [class~=grid] > [class*=col-4], [class*=grid-] > [class*=col-4], [class*=grid_] > [class*=col-4] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class~=grid] > [class*=col-5], [class*=grid-] > [class*=col-5], [class*=grid_] > [class*=col-5] { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } [class~=grid] > [class*=col-6], [class*=grid-] > [class*=col-6], [class*=grid_] > [class*=col-6] { flex-basis: 50%; max-width: 50%; } [class~=grid] > [class*=col-7], [class*=grid-] > [class*=col-7], [class*=grid_] > [class*=col-7] { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } [class~=grid] > [class*=col-8], [class*=grid-] > [class*=col-8], [class*=grid_] > [class*=col-8] { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } [class~=grid] > [class*=col-9], [class*=grid-] > [class*=col-9], [class*=grid_] > [class*=col-9] { flex-basis: 75%; max-width: 75%; } [class~=grid] > [class*=col-10], [class*=grid-] > [class*=col-10], [class*=grid_] > [class*=col-10] { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } [class~=grid] > [class*=col-11], [class*=grid-] > [class*=col-11], [class*=grid_] > [class*=col-11] { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } [class~=grid] > [class*=col-12], [class*=grid-] > [class*=col-12], [class*=grid_] > [class*=col-12] { flex-basis: 100%; max-width: 100%; } [class~=grid] > [data-push-left*=off-0], [class*=grid-] > [data-push-left*=off-0], [class*=grid_] > [data-push-left*=off-0] { margin-left: 0; } [class~=grid] > [data-push-left*=off-1], [class*=grid-] > [data-push-left*=off-1], [class*=grid_] > [data-push-left*=off-1] { margin-left: 8.3333333333%; } [class~=grid] > [data-push-left*=off-2], [class*=grid-] > [data-push-left*=off-2], [class*=grid_] > [data-push-left*=off-2] { margin-left: 16.6666666667%; } [class~=grid] > [data-push-left*=off-3], [class*=grid-] > [data-push-left*=off-3], [class*=grid_] > [data-push-left*=off-3] { margin-left: 25%; } [class~=grid] > [data-push-left*=off-4], [class*=grid-] > [data-push-left*=off-4], [class*=grid_] > [data-push-left*=off-4] { margin-left: 33.3333333333%; } [class~=grid] > [data-push-left*=off-5], [class*=grid-] > [data-push-left*=off-5], [class*=grid_] > [data-push-left*=off-5] { margin-left: 41.6666666667%; } [class~=grid] > [data-push-left*=off-6], [class*=grid-] > [data-push-left*=off-6], [class*=grid_] > [data-push-left*=off-6] { margin-left: 50%; } [class~=grid] > [data-push-left*=off-7], [class*=grid-] > [data-push-left*=off-7], [class*=grid_] > [data-push-left*=off-7] { margin-left: 58.3333333333%; } [class~=grid] > [data-push-left*=off-8], [class*=grid-] > [data-push-left*=off-8], [class*=grid_] > [data-push-left*=off-8] { margin-left: 66.6666666667%; } [class~=grid] > [data-push-left*=off-9], [class*=grid-] > [data-push-left*=off-9], [class*=grid_] > [data-push-left*=off-9] { margin-left: 75%; } [class~=grid] > [data-push-left*=off-10], [class*=grid-] > [data-push-left*=off-10], [class*=grid_] > [data-push-left*=off-10] { margin-left: 83.3333333333%; } [class~=grid] > [data-push-left*=off-11], [class*=grid-] > [data-push-left*=off-11], [class*=grid_] > [data-push-left*=off-11] { margin-left: 91.6666666667%; } [class~=grid] > [data-push-right*=off-0], [class*=grid-] > [data-push-right*=off-0], [class*=grid_] > [data-push-right*=off-0] { margin-right: 0; } [class~=grid] > [data-push-right*=off-1], [class*=grid-] > [data-push-right*=off-1], [class*=grid_] > [data-push-right*=off-1] { margin-right: 8.3333333333%; } [class~=grid] > [data-push-right*=off-2], [class*=grid-] > [data-push-right*=off-2], [class*=grid_] > [data-push-right*=off-2] { margin-right: 16.6666666667%; } [class~=grid] > [data-push-right*=off-3], [class*=grid-] > [data-push-right*=off-3], [class*=grid_] > [data-push-right*=off-3] { margin-right: 25%; } [class~=grid] > [data-push-right*=off-4], [class*=grid-] > [data-push-right*=off-4], [class*=grid_] > [data-push-right*=off-4] { margin-right: 33.3333333333%; } [class~=grid] > [data-push-right*=off-5], [class*=grid-] > [data-push-right*=off-5], [class*=grid_] > [data-push-right*=off-5] { margin-right: 41.6666666667%; } [class~=grid] > [data-push-right*=off-6], [class*=grid-] > [data-push-right*=off-6], [class*=grid_] > [data-push-right*=off-6] { margin-right: 50%; } [class~=grid] > [data-push-right*=off-7], [class*=grid-] > [data-push-right*=off-7], [class*=grid_] > [data-push-right*=off-7] { margin-right: 58.3333333333%; } [class~=grid] > [data-push-right*=off-8], [class*=grid-] > [data-push-right*=off-8], [class*=grid_] > [data-push-right*=off-8] { margin-right: 66.6666666667%; } [class~=grid] > [data-push-right*=off-9], [class*=grid-] > [data-push-right*=off-9], [class*=grid_] > [data-push-right*=off-9] { margin-right: 75%; } [class~=grid] > [data-push-right*=off-10], [class*=grid-] > [data-push-right*=off-10], [class*=grid_] > [data-push-right*=off-10] { margin-right: 83.3333333333%; } [class~=grid] > [data-push-right*=off-11], [class*=grid-] > [data-push-right*=off-11], [class*=grid_] > [data-push-right*=off-11] { margin-right: 91.6666666667%; } @media (max-width: 80em) { [class~=grid] > [class*=_lg-1], [class*=grid-] > [class*=_lg-1], [class*=grid_] > [class*=_lg-1] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } [class~=grid] > [class*=_lg-2], [class*=grid-] > [class*=_lg-2], [class*=grid_] > [class*=_lg-2] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class~=grid] > [class*=_lg-3], [class*=grid-] > [class*=_lg-3], [class*=grid_] > [class*=_lg-3] { flex-basis: 25%; max-width: 25%; } [class~=grid] > [class*=_lg-4], [class*=grid-] > [class*=_lg-4], [class*=grid_] > [class*=_lg-4] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class~=grid] > [class*=_lg-5], [class*=grid-] > [class*=_lg-5], [class*=grid_] > [class*=_lg-5] { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } [class~=grid] > [class*=_lg-6], [class*=grid-] > [class*=_lg-6], [class*=grid_] > [class*=_lg-6] { flex-basis: 50%; max-width: 50%; } [class~=grid] > [class*=_lg-7], [class*=grid-] > [class*=_lg-7], [class*=grid_] > [class*=_lg-7] { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } [class~=grid] > [class*=_lg-8], [class*=grid-] > [class*=_lg-8], [class*=grid_] > [class*=_lg-8] { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } [class~=grid] > [class*=_lg-9], [class*=grid-] > [class*=_lg-9], [class*=grid_] > [class*=_lg-9] { flex-basis: 75%; max-width: 75%; } [class~=grid] > [class*=_lg-10], [class*=grid-] > [class*=_lg-10], [class*=grid_] > [class*=_lg-10] { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } [class~=grid] > [class*=_lg-11], [class*=grid-] > [class*=_lg-11], [class*=grid_] > [class*=_lg-11] { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } [class~=grid] > [class*=_lg-12], [class*=grid-] > [class*=_lg-12], [class*=grid_] > [class*=_lg-12] { flex-basis: 100%; max-width: 100%; } [class~=grid] > [data-push-left*=_lg-0], [class*=grid-] > [data-push-left*=_lg-0], [class*=grid_] > [data-push-left*=_lg-0] { margin-left: 0; } [class~=grid] > [data-push-left*=_lg-1], [class*=grid-] > [data-push-left*=_lg-1], [class*=grid_] > [data-push-left*=_lg-1] { margin-left: 8.3333333333%; } [class~=grid] > [data-push-left*=_lg-2], [class*=grid-] > [data-push-left*=_lg-2], [class*=grid_] > [data-push-left*=_lg-2] { margin-left: 16.6666666667%; } [class~=grid] > [data-push-left*=_lg-3], [class*=grid-] > [data-push-left*=_lg-3], [class*=grid_] > [data-push-left*=_lg-3] { margin-left: 25%; } [class~=grid] > [data-push-left*=_lg-4], [class*=grid-] > [data-push-left*=_lg-4], [class*=grid_] > [data-push-left*=_lg-4] { margin-left: 33.3333333333%; } [class~=grid] > [data-push-left*=_lg-5], [class*=grid-] > [data-push-left*=_lg-5], [class*=grid_] > [data-push-left*=_lg-5] { margin-left: 41.6666666667%; } [class~=grid] > [data-push-left*=_lg-6], [class*=grid-] > [data-push-left*=_lg-6], [class*=grid_] > [data-push-left*=_lg-6] { margin-left: 50%; } [class~=grid] > [data-push-left*=_lg-7], [class*=grid-] > [data-push-left*=_lg-7], [class*=grid_] > [data-push-left*=_lg-7] { margin-left: 58.3333333333%; } [class~=grid] > [data-push-left*=_lg-8], [class*=grid-] > [data-push-left*=_lg-8], [class*=grid_] > [data-push-left*=_lg-8] { margin-left: 66.6666666667%; } [class~=grid] > [data-push-left*=_lg-9], [class*=grid-] > [data-push-left*=_lg-9], [class*=grid_] > [data-push-left*=_lg-9] { margin-left: 75%; } [class~=grid] > [data-push-left*=_lg-10], [class*=grid-] > [data-push-left*=_lg-10], [class*=grid_] > [data-push-left*=_lg-10] { margin-left: 83.3333333333%; } [class~=grid] > [data-push-left*=_lg-11], [class*=grid-] > [data-push-left*=_lg-11], [class*=grid_] > [data-push-left*=_lg-11] { margin-left: 91.6666666667%; } [class~=grid] > [data-push-right*=_lg-0], [class*=grid-] > [data-push-right*=_lg-0], [class*=grid_] > [data-push-right*=_lg-0] { margin-right: 0; } [class~=grid] > [data-push-right*=_lg-1], [class*=grid-] > [data-push-right*=_lg-1], [class*=grid_] > [data-push-right*=_lg-1] { margin-right: 8.3333333333%; } [class~=grid] > [data-push-right*=_lg-2], [class*=grid-] > [data-push-right*=_lg-2], [class*=grid_] > [data-push-right*=_lg-2] { margin-right: 16.6666666667%; } [class~=grid] > [data-push-right*=_lg-3], [class*=grid-] > [data-push-right*=_lg-3], [class*=grid_] > [data-push-right*=_lg-3] { margin-right: 25%; } [class~=grid] > [data-push-right*=_lg-4], [class*=grid-] > [data-push-right*=_lg-4], [class*=grid_] > [data-push-right*=_lg-4] { margin-right: 33.3333333333%; } [class~=grid] > [data-push-right*=_lg-5], [class*=grid-] > [data-push-right*=_lg-5], [class*=grid_] > [data-push-right*=_lg-5] { margin-right: 41.6666666667%; } [class~=grid] > [data-push-right*=_lg-6], [class*=grid-] > [data-push-right*=_lg-6], [class*=grid_] > [data-push-right*=_lg-6] { margin-right: 50%; } [class~=grid] > [data-push-right*=_lg-7], [class*=grid-] > [data-push-right*=_lg-7], [class*=grid_] > [data-push-right*=_lg-7] { margin-right: 58.3333333333%; } [class~=grid] > [data-push-right*=_lg-8], [class*=grid-] > [data-push-right*=_lg-8], [class*=grid_] > [data-push-right*=_lg-8] { margin-right: 66.6666666667%; } [class~=grid] > [data-push-right*=_lg-9], [class*=grid-] > [data-push-right*=_lg-9], [class*=grid_] > [data-push-right*=_lg-9] { margin-right: 75%; } [class~=grid] > [data-push-right*=_lg-10], [class*=grid-] > [data-push-right*=_lg-10], [class*=grid_] > [data-push-right*=_lg-10] { margin-right: 83.3333333333%; } [class~=grid] > [data-push-right*=_lg-11], [class*=grid-] > [data-push-right*=_lg-11], [class*=grid_] > [data-push-right*=_lg-11] { margin-right: 91.6666666667%; } [class~=grid] [class*=_lg-first], [class*=grid-] [class*=_lg-first], [class*=grid_] [class*=_lg-first] { -webkit-box-ordinal-group: 0; order: -1; } [class~=grid] [class*=_lg-last], [class*=grid-] [class*=_lg-last], [class*=grid_] [class*=_lg-last] { -webkit-box-ordinal-group: 2; order: 1; } } @media (max-width: 64em) { [class~=grid] > [class*=_md-1], [class*=grid-] > [class*=_md-1], [class*=grid_] > [class*=_md-1] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } [class~=grid] > [class*=_md-2], [class*=grid-] > [class*=_md-2], [class*=grid_] > [class*=_md-2] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class~=grid] > [class*=_md-3], [class*=grid-] > [class*=_md-3], [class*=grid_] > [class*=_md-3] { flex-basis: 25%; max-width: 25%; } [class~=grid] > [class*=_md-4], [class*=grid-] > [class*=_md-4], [class*=grid_] > [class*=_md-4] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class~=grid] > [class*=_md-5], [class*=grid-] > [class*=_md-5], [class*=grid_] > [class*=_md-5] { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } [class~=grid] > [class*=_md-6], [class*=grid-] > [class*=_md-6], [class*=grid_] > [class*=_md-6] { flex-basis: 50%; max-width: 50%; } [class~=grid] > [class*=_md-7], [class*=grid-] > [class*=_md-7], [class*=grid_] > [class*=_md-7] { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } [class~=grid] > [class*=_md-8], [class*=grid-] > [class*=_md-8], [class*=grid_] > [class*=_md-8] { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } [class~=grid] > [class*=_md-9], [class*=grid-] > [class*=_md-9], [class*=grid_] > [class*=_md-9] { flex-basis: 75%; max-width: 75%; } [class~=grid] > [class*=_md-10], [class*=grid-] > [class*=_md-10], [class*=grid_] > [class*=_md-10] { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } [class~=grid] > [class*=_md-11], [class*=grid-] > [class*=_md-11], [class*=grid_] > [class*=_md-11] { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } [class~=grid] > [class*=_md-12], [class*=grid-] > [class*=_md-12], [class*=grid_] > [class*=_md-12] { flex-basis: 100%; max-width: 100%; } [class~=grid] > [data-push-left*=_md-0], [class*=grid-] > [data-push-left*=_md-0], [class*=grid_] > [data-push-left*=_md-0] { margin-left: 0; } [class~=grid] > [data-push-left*=_md-1], [class*=grid-] > [data-push-left*=_md-1], [class*=grid_] > [data-push-left*=_md-1] { margin-left: 8.3333333333%; } [class~=grid] > [data-push-left*=_md-2], [class*=grid-] > [data-push-left*=_md-2], [class*=grid_] > [data-push-left*=_md-2] { margin-left: 16.6666666667%; } [class~=grid] > [data-push-left*=_md-3], [class*=grid-] > [data-push-left*=_md-3], [class*=grid_] > [data-push-left*=_md-3] { margin-left: 25%; } [class~=grid] > [data-push-left*=_md-4], [class*=grid-] > [data-push-left*=_md-4], [class*=grid_] > [data-push-left*=_md-4] { margin-left: 33.3333333333%; } [class~=grid] > [data-push-left*=_md-5], [class*=grid-] > [data-push-left*=_md-5], [class*=grid_] > [data-push-left*=_md-5] { margin-left: 41.6666666667%; } [class~=grid] > [data-push-left*=_md-6], [class*=grid-] > [data-push-left*=_md-6], [class*=grid_] > [data-push-left*=_md-6] { margin-left: 50%; } [class~=grid] > [data-push-left*=_md-7], [class*=grid-] > [data-push-left*=_md-7], [class*=grid_] > [data-push-left*=_md-7] { margin-left: 58.3333333333%; } [class~=grid] > [data-push-left*=_md-8], [class*=grid-] > [data-push-left*=_md-8], [class*=grid_] > [data-push-left*=_md-8] { margin-left: 66.6666666667%; } [class~=grid] > [data-push-left*=_md-9], [class*=grid-] > [data-push-left*=_md-9], [class*=grid_] > [data-push-left*=_md-9] { margin-left: 75%; } [class~=grid] > [data-push-left*=_md-10], [class*=grid-] > [data-push-left*=_md-10], [class*=grid_] > [data-push-left*=_md-10] { margin-left: 83.3333333333%; } [class~=grid] > [data-push-left*=_md-11], [class*=grid-] > [data-push-left*=_md-11], [class*=grid_] > [data-push-left*=_md-11] { margin-left: 91.6666666667%; } [class~=grid] > [data-push-right*=_md-0], [class*=grid-] > [data-push-right*=_md-0], [class*=grid_] > [data-push-right*=_md-0] { margin-right: 0; } [class~=grid] > [data-push-right*=_md-1], [class*=grid-] > [data-push-right*=_md-1], [class*=grid_] > [data-push-right*=_md-1] { margin-right: 8.3333333333%; } [class~=grid] > [data-push-right*=_md-2], [class*=grid-] > [data-push-right*=_md-2], [class*=grid_] > [data-push-right*=_md-2] { margin-right: 16.6666666667%; } [class~=grid] > [data-push-right*=_md-3], [class*=grid-] > [data-push-right*=_md-3], [class*=grid_] > [data-push-right*=_md-3] { margin-right: 25%; } [class~=grid] > [data-push-right*=_md-4], [class*=grid-] > [data-push-right*=_md-4], [class*=grid_] > [data-push-right*=_md-4] { margin-right: 33.3333333333%; } [class~=grid] > [data-push-right*=_md-5], [class*=grid-] > [data-push-right*=_md-5], [class*=grid_] > [data-push-right*=_md-5] { margin-right: 41.6666666667%; } [class~=grid] > [data-push-right*=_md-6], [class*=grid-] > [data-push-right*=_md-6], [class*=grid_] > [data-push-right*=_md-6] { margin-right: 50%; } [class~=grid] > [data-push-right*=_md-7], [class*=grid-] > [data-push-right*=_md-7], [class*=grid_] > [data-push-right*=_md-7] { margin-right: 58.3333333333%; } [class~=grid] > [data-push-right*=_md-8], [class*=grid-] > [data-push-right*=_md-8], [class*=grid_] > [data-push-right*=_md-8] { margin-right: 66.6666666667%; } [class~=grid] > [data-push-right*=_md-9], [class*=grid-] > [data-push-right*=_md-9], [class*=grid_] > [data-push-right*=_md-9] { margin-right: 75%; } [class~=grid] > [data-push-right*=_md-10], [class*=grid-] > [data-push-right*=_md-10], [class*=grid_] > [data-push-right*=_md-10] { margin-right: 83.3333333333%; } [class~=grid] > [data-push-right*=_md-11], [class*=grid-] > [data-push-right*=_md-11], [class*=grid_] > [data-push-right*=_md-11] { margin-right: 91.6666666667%; } [class~=grid] [class*=_md-first], [class*=grid-] [class*=_md-first], [class*=grid_] [class*=_md-first] { -webkit-box-ordinal-group: 0; order: -1; } [class~=grid] [class*=_md-last], [class*=grid-] [class*=_md-last], [class*=grid_] [class*=_md-last] { -webkit-box-ordinal-group: 2; order: 1; } } @media (max-width: 48em) { [class~=grid] > [class*=_sm-1], [class*=grid-] > [class*=_sm-1], [class*=grid_] > [class*=_sm-1] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } [class~=grid] > [class*=_sm-2], [class*=grid-] > [class*=_sm-2], [class*=grid_] > [class*=_sm-2] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class~=grid] > [class*=_sm-3], [class*=grid-] > [class*=_sm-3], [class*=grid_] > [class*=_sm-3] { flex-basis: 25%; max-width: 25%; } [class~=grid] > [class*=_sm-4], [class*=grid-] > [class*=_sm-4], [class*=grid_] > [class*=_sm-4] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class~=grid] > [class*=_sm-5], [class*=grid-] > [class*=_sm-5], [class*=grid_] > [class*=_sm-5] { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } [class~=grid] > [class*=_sm-6], [class*=grid-] > [class*=_sm-6], [class*=grid_] > [class*=_sm-6] { flex-basis: 50%; max-width: 50%; } [class~=grid] > [class*=_sm-7], [class*=grid-] > [class*=_sm-7], [class*=grid_] > [class*=_sm-7] { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } [class~=grid] > [class*=_sm-8], [class*=grid-] > [class*=_sm-8], [class*=grid_] > [class*=_sm-8] { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } [class~=grid] > [class*=_sm-9], [class*=grid-] > [class*=_sm-9], [class*=grid_] > [class*=_sm-9] { flex-basis: 75%; max-width: 75%; } [class~=grid] > [class*=_sm-10], [class*=grid-] > [class*=_sm-10], [class*=grid_] > [class*=_sm-10] { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } [class~=grid] > [class*=_sm-11], [class*=grid-] > [class*=_sm-11], [class*=grid_] > [class*=_sm-11] { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } [class~=grid] > [class*=_sm-12], [class*=grid-] > [class*=_sm-12], [class*=grid_] > [class*=_sm-12] { flex-basis: 100%; max-width: 100%; } [class~=grid] > [data-push-left*=_sm-0], [class*=grid-] > [data-push-left*=_sm-0], [class*=grid_] > [data-push-left*=_sm-0] { margin-left: 0; } [class~=grid] > [data-push-left*=_sm-1], [class*=grid-] > [data-push-left*=_sm-1], [class*=grid_] > [data-push-left*=_sm-1] { margin-left: 8.3333333333%; } [class~=grid] > [data-push-left*=_sm-2], [class*=grid-] > [data-push-left*=_sm-2], [class*=grid_] > [data-push-left*=_sm-2] { margin-left: 16.6666666667%; } [class~=grid] > [data-push-left*=_sm-3], [class*=grid-] > [data-push-left*=_sm-3], [class*=grid_] > [data-push-left*=_sm-3] { margin-left: 25%; } [class~=grid] > [data-push-left*=_sm-4], [class*=grid-] > [data-push-left*=_sm-4], [class*=grid_] > [data-push-left*=_sm-4] { margin-left: 33.3333333333%; } [class~=grid] > [data-push-left*=_sm-5], [class*=grid-] > [data-push-left*=_sm-5], [class*=grid_] > [data-push-left*=_sm-5] { margin-left: 41.6666666667%; } [class~=grid] > [data-push-left*=_sm-6], [class*=grid-] > [data-push-left*=_sm-6], [class*=grid_] > [data-push-left*=_sm-6] { margin-left: 50%; } [class~=grid] > [data-push-left*=_sm-7], [class*=grid-] > [data-push-left*=_sm-7], [class*=grid_] > [data-push-left*=_sm-7] { margin-left: 58.3333333333%; } [class~=grid] > [data-push-left*=_sm-8], [class*=grid-] > [data-push-left*=_sm-8], [class*=grid_] > [data-push-left*=_sm-8] { margin-left: 66.6666666667%; } [class~=grid] > [data-push-left*=_sm-9], [class*=grid-] > [data-push-left*=_sm-9], [class*=grid_] > [data-push-left*=_sm-9] { margin-left: 75%; } [class~=grid] > [data-push-left*=_sm-10], [class*=grid-] > [data-push-left*=_sm-10], [class*=grid_] > [data-push-left*=_sm-10] { margin-left: 83.3333333333%; } [class~=grid] > [data-push-left*=_sm-11], [class*=grid-] > [data-push-left*=_sm-11], [class*=grid_] > [data-push-left*=_sm-11] { margin-left: 91.6666666667%; } [class~=grid] > [data-push-right*=_sm-0], [class*=grid-] > [data-push-right*=_sm-0], [class*=grid_] > [data-push-right*=_sm-0] { margin-right: 0; } [class~=grid] > [data-push-right*=_sm-1], [class*=grid-] > [data-push-right*=_sm-1], [class*=grid_] > [data-push-right*=_sm-1] { margin-right: 8.3333333333%; } [class~=grid] > [data-push-right*=_sm-2], [class*=grid-] > [data-push-right*=_sm-2], [class*=grid_] > [data-push-right*=_sm-2] { margin-right: 16.6666666667%; } [class~=grid] > [data-push-right*=_sm-3], [class*=grid-] > [data-push-right*=_sm-3], [class*=grid_] > [data-push-right*=_sm-3] { margin-right: 25%; } [class~=grid] > [data-push-right*=_sm-4], [class*=grid-] > [data-push-right*=_sm-4], [class*=grid_] > [data-push-right*=_sm-4] { margin-right: 33.3333333333%; } [class~=grid] > [data-push-right*=_sm-5], [class*=grid-] > [data-push-right*=_sm-5], [class*=grid_] > [data-push-right*=_sm-5] { margin-right: 41.6666666667%; } [class~=grid] > [data-push-right*=_sm-6], [class*=grid-] > [data-push-right*=_sm-6], [class*=grid_] > [data-push-right*=_sm-6] { margin-right: 50%; } [class~=grid] > [data-push-right*=_sm-7], [class*=grid-] > [data-push-right*=_sm-7], [class*=grid_] > [data-push-right*=_sm-7] { margin-right: 58.3333333333%; } [class~=grid] > [data-push-right*=_sm-8], [class*=grid-] > [data-push-right*=_sm-8], [class*=grid_] > [data-push-right*=_sm-8] { margin-right: 66.6666666667%; } [class~=grid] > [data-push-right*=_sm-9], [class*=grid-] > [data-push-right*=_sm-9], [class*=grid_] > [data-push-right*=_sm-9] { margin-right: 75%; } [class~=grid] > [data-push-right*=_sm-10], [class*=grid-] > [data-push-right*=_sm-10], [class*=grid_] > [data-push-right*=_sm-10] { margin-right: 83.3333333333%; } [class~=grid] > [data-push-right*=_sm-11], [class*=grid-] > [data-push-right*=_sm-11], [class*=grid_] > [data-push-right*=_sm-11] { margin-right: 91.6666666667%; } [class~=grid] [class*=_sm-first], [class*=grid-] [class*=_sm-first], [class*=grid_] [class*=_sm-first] { -webkit-box-ordinal-group: 0; order: -1; } [class~=grid] [class*=_sm-last], [class*=grid-] [class*=_sm-last], [class*=grid_] [class*=_sm-last] { -webkit-box-ordinal-group: 2; order: 1; } } @media (max-width: 36em) { [class~=grid] > [class*=_xs-1], [class*=grid-] > [class*=_xs-1], [class*=grid_] > [class*=_xs-1] { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } [class~=grid] > [class*=_xs-2], [class*=grid-] > [class*=_xs-2], [class*=grid_] > [class*=_xs-2] { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } [class~=grid] > [class*=_xs-3], [class*=grid-] > [class*=_xs-3], [class*=grid_] > [class*=_xs-3] { flex-basis: 25%; max-width: 25%; } [class~=grid] > [class*=_xs-4], [class*=grid-] > [class*=_xs-4], [class*=grid_] > [class*=_xs-4] { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } [class~=grid] > [class*=_xs-5], [class*=grid-] > [class*=_xs-5], [class*=grid_] > [class*=_xs-5] { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } [class~=grid] > [class*=_xs-6], [class*=grid-] > [class*=_xs-6], [class*=grid_] > [class*=_xs-6] { flex-basis: 50%; max-width: 50%; } [class~=grid] > [class*=_xs-7], [class*=grid-] > [class*=_xs-7], [class*=grid_] > [class*=_xs-7] { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } [class~=grid] > [class*=_xs-8], [class*=grid-] > [class*=_xs-8], [class*=grid_] > [class*=_xs-8] { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } [class~=grid] > [class*=_xs-9], [class*=grid-] > [class*=_xs-9], [class*=grid_] > [class*=_xs-9] { flex-basis: 75%; max-width: 75%; } [class~=grid] > [class*=_xs-10], [class*=grid-] > [class*=_xs-10], [class*=grid_] > [class*=_xs-10] { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } [class~=grid] > [class*=_xs-11], [class*=grid-] > [class*=_xs-11], [class*=grid_] > [class*=_xs-11] { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } [class~=grid] > [class*=_xs-12], [class*=grid-] > [class*=_xs-12], [class*=grid_] > [class*=_xs-12] { flex-basis: 100%; max-width: 100%; } [class~=grid] > [data-push-left*=_xs-0], [class*=grid-] > [data-push-left*=_xs-0], [class*=grid_] > [data-push-left*=_xs-0] { margin-left: 0; } [class~=grid] > [data-push-left*=_xs-1], [class*=grid-] > [data-push-left*=_xs-1], [class*=grid_] > [data-push-left*=_xs-1] { margin-left: 8.3333333333%; } [class~=grid] > [data-push-left*=_xs-2], [class*=grid-] > [data-push-left*=_xs-2], [class*=grid_] > [data-push-left*=_xs-2] { margin-left: 16.6666666667%; } [class~=grid] > [data-push-left*=_xs-3], [class*=grid-] > [data-push-left*=_xs-3], [class*=grid_] > [data-push-left*=_xs-3] { margin-left: 25%; } [class~=grid] > [data-push-left*=_xs-4], [class*=grid-] > [data-push-left*=_xs-4], [class*=grid_] > [data-push-left*=_xs-4] { margin-left: 33.3333333333%; } [class~=grid] > [data-push-left*=_xs-5], [class*=grid-] > [data-push-left*=_xs-5], [class*=grid_] > [data-push-left*=_xs-5] { margin-left: 41.6666666667%; } [class~=grid] > [data-push-left*=_xs-6], [class*=grid-] > [data-push-left*=_xs-6], [class*=grid_] > [data-push-left*=_xs-6] { margin-left: 50%; } [class~=grid] > [data-push-left*=_xs-7], [class*=grid-] > [data-push-left*=_xs-7], [class*=grid_] > [data-push-left*=_xs-7] { margin-left: 58.3333333333%; } [class~=grid] > [data-push-left*=_xs-8], [class*=grid-] > [data-push-left*=_xs-8], [class*=grid_] > [data-push-left*=_xs-8] { margin-left: 66.6666666667%; } [class~=grid] > [data-push-left*=_xs-9], [class*=grid-] > [data-push-left*=_xs-9], [class*=grid_] > [data-push-left*=_xs-9] { margin-left: 75%; } [class~=grid] > [data-push-left*=_xs-10], [class*=grid-] > [data-push-left*=_xs-10], [class*=grid_] > [data-push-left*=_xs-10] { margin-left: 83.3333333333%; } [class~=grid] > [data-push-left*=_xs-11], [class*=grid-] > [data-push-left*=_xs-11], [class*=grid_] > [data-push-left*=_xs-11] { margin-left: 91.6666666667%; } [class~=grid] > [data-push-right*=_xs-0], [class*=grid-] > [data-push-right*=_xs-0], [class*=grid_] > [data-push-right*=_xs-0] { margin-right: 0; } [class~=grid] > [data-push-right*=_xs-1], [class*=grid-] > [data-push-right*=_xs-1], [class*=grid_] > [data-push-right*=_xs-1] { margin-right: 8.3333333333%; } [class~=grid] > [data-push-right*=_xs-2], [class*=grid-] > [data-push-right*=_xs-2], [class*=grid_] > [data-push-right*=_xs-2] { margin-right: 16.6666666667%; } [class~=grid] > [data-push-right*=_xs-3], [class*=grid-] > [data-push-right*=_xs-3], [class*=grid_] > [data-push-right*=_xs-3] { margin-right: 25%; } [class~=grid] > [data-push-right*=_xs-4], [class*=grid-] > [data-push-right*=_xs-4], [class*=grid_] > [data-push-right*=_xs-4] { margin-right: 33.3333333333%; } [class~=grid] > [data-push-right*=_xs-5], [class*=grid-] > [data-push-right*=_xs-5], [class*=grid_] > [data-push-right*=_xs-5] { margin-right: 41.6666666667%; } [class~=grid] > [data-push-right*=_xs-6], [class*=grid-] > [data-push-right*=_xs-6], [class*=grid_] > [data-push-right*=_xs-6] { margin-right: 50%; } [class~=grid] > [data-push-right*=_xs-7], [class*=grid-] > [data-push-right*=_xs-7], [class*=grid_] > [data-push-right*=_xs-7] { margin-right: 58.3333333333%; } [class~=grid] > [data-push-right*=_xs-8], [class*=grid-] > [data-push-right*=_xs-8], [class*=grid_] > [data-push-right*=_xs-8] { margin-right: 66.6666666667%; } [class~=grid] > [data-push-right*=_xs-9], [class*=grid-] > [data-push-right*=_xs-9], [class*=grid_] > [data-push-right*=_xs-9] { margin-right: 75%; } [class~=grid] > [data-push-right*=_xs-10], [class*=grid-] > [data-push-right*=_xs-10], [class*=grid_] > [data-push-right*=_xs-10] { margin-right: 83.3333333333%; } [class~=grid] > [data-push-right*=_xs-11], [class*=grid-] > [data-push-right*=_xs-11], [class*=grid_] > [data-push-right*=_xs-11] { margin-right: 91.6666666667%; } [class~=grid] [class*=_xs-first], [class*=grid-] [class*=_xs-first], [class*=grid_] [class*=_xs-first] { -webkit-box-ordinal-group: 0; order: -1; } [class~=grid] [class*=_xs-last], [class*=grid-] [class*=_xs-last], [class*=grid_] [class*=_xs-last] { -webkit-box-ordinal-group: 2; order: 1; } } /************************ HIDING COLS *************************/ @media (max-width: 80em) { [class*=lg-hidden] { display: none; } } @media (max-width: 64em) { [class*=md-hidden] { display: none; } } @media (max-width: 48em) { [class*=sm-hidden] { display: none; } } @media (max-width: 36em) { [class*=xs-hidden] { display: none; } } /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /** * React Select Plus * ================= * MIT License: https://github.com/HubSpot/react-select-plus */ @keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } .Select { position: relative; } .Select input::-webkit-contacts-auto-fill-button, .Select input::-webkit-credentials-auto-fill-button { display: none !important; } .Select input::-ms-clear { display: none !important; } .Select input::-ms-reveal { display: none !important; } .Select, .Select div, .Select input, .Select span { box-sizing: border-box; } .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; } .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .Select.is-disabled > .Select-control:hover { box-shadow: none; } .Select.is-searchable.is-open > .Select-control { cursor: text; } .Select.is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .Select.is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #fff; border-color: #b3b3b3 #ccc #d9d9d9; } .Select.is-open > .Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px; } .Select.is-focused > .Select-control { background: #fff; } .Select.is-focused:not(.is-open) > .Select-control { border-color: #08c #0099e6 #0099e6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(#08c, 50%); } .Select.has-value.is-clearable.Select--single > .Select-control .Select-value { padding-right: 42px; } .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: #333; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { color: #08c; outline: none; text-decoration: underline; } .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { background: #fff; } .Select.has-value.is-pseudo-focused .Select-input { opacity: 0; } .Select.is-open .Select-arrow, .Select .Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; } .Select.Select--rtl { direction: rtl; text-align: right; } .Select-control { background-color: #fff; border-color: #d9d9d9 #ccc #b3b3b3; border-radius: 4px; border: 1px solid #ccc; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 36px; outline: none; overflow: hidden; position: relative; width: 100%; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .Select-control .Select-input:focus { outline: none; background: #fff; } .Select-placeholder, .Select--single > .Select-control .Select-value { bottom: 0; color: #aaa; left: 0; line-height: 34px; padding-left: 10px; padding-right: 10px; position: absolute; right: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .Select-input > input { background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-family: inherit; font-size: inherit; margin: 0; outline: none; line-height: 17px; /* For IE 8 compatibility */ padding: 8px 0 12px; /* For IE 8 compatibility */ -webkit-appearance: none; } .is-focused .Select-input > input { cursor: text; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px; } .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle; } .Select-clear-zone { -webkit-animation: Select-animation-fadeIn 200ms; animation: Select-animation-fadeIn 200ms; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px; } .Select-clear-zone:hover { color: #D0021B; } .Select-clear { display: inline-block; font-size: 18px; line-height: 1; } .Select--multi .Select-clear-zone { width: 17px; } .Select--multi .Select-multi-value-wrapper { display: inline-block; } .Select .Select-aria-only { position: absolute; display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; padding-right: 5px; } .Select--rtl .Select-arrow-zone { padding-right: 0; padding-left: 5px; } .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative; } @-webkit-keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes Select-animation-fadeIn { from { opacity: 0; } to { opacity: 1; } } .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .Select-option.is-selected { background-color: #f5faff; color: #333; } .Select-option.is-focused { background-color: #f2f9fc; color: #333; } .Select-option.is-disabled { color: #cccccc; cursor: default; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .Select--multi.Select--rtl .Select-input { margin-left: 0; margin-right: 10px; } .Select--multi.has-value .Select-input { margin-left: 5px; } .Select--multi .Select-value { background-color: #f2f9fc; border-radius: 2px; border: 1px solid #c9e6f2; color: #08c; display: inline-block; font-size: 0.9em; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi .Select-value-icon, .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .Select--multi a.Select-value-label { color: #08c; cursor: pointer; text-decoration: none; } .Select--multi a.Select-value-label:hover { text-decoration: underline; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c9e6f2; padding: 1px 5px 3px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { background-color: #ddeff7; color: #0077b3; } .Select--multi .Select-value-icon:active { background-color: #c9e6f2; } .Select--multi.Select--rtl .Select-value { margin-left: 0; margin-right: 5px; } .Select--multi.Select--rtl .Select-value-icon { border-right: none; border-left: 1px solid #c9e6f2; } .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } @keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } } /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ /* Colors Styleguide colors */ /* Primary Colors @react-docs PrimaryColorsPalette Weight: 1 Styleguide colors.primary */ /* Gray scale @react-docs GrayscalePalette Weight: 2 Styleguide colors.grays */ /* Extended Colors @react-docs ColorsExtendedPalette Weight: 3 Styleguide colors.extended */ /* Nesting colors */ /* NEW */ /** * Typography */ /** * Accessibility */ /* Typography Styleguide typography */ /* Font variables Typically, correct typography styles should be achieved by using the proper HTML tag (`

` for text, `` for headings, `` for code, etc.). The following variables are provided for the rare cases where custom styling is necessary and should be used sparingly: - `$nova-font-family` Styleguide typography.variables */ body { text-transform: none; line-height: 1.5; letter-spacing: 0; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 15px; font-weight: 500; color: #252525; } /* Headings Markup:

Page Title (h1)

Page Title (h2)

Subpage Title (h3)

Section Title (h4)

Section Title (h5)
Section Title (h6)
Weight: 3 Styleguide typography.headings */ h1 { margin: 0 0 10px; padding: 0; line-height: 56px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 48px; font-weight: 700; } h2 { margin: 0 0 10px; padding: 0; line-height: 40px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 36px; font-weight: 500; } h3 { margin: 0 0 10px; padding: 0; line-height: 32px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 24px; font-weight: 500; } h4 { margin: 0 0 10px; padding: 0; line-height: 24px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 20px; font-weight: 700; } h5 { margin: 0 0 10px; padding: 0; line-height: 24px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 18px; font-weight: 700; } h6 { margin: 0 0 10px; padding: 0; line-height: 24px; font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif"; font-size: 16px; font-weight: 700; } /* UI text Markup:

This is body copy (p)



Hint Text Weight: 4 Styleguide typography.ui-text */ .nova-label { display: inline-block; margin: 0 0 15px; line-height: 16px; font-size: 14px; font-weight: 700; } .nova-label-small { font-size: 13px; } .nova-hint { line-height: 16px; font-size: 13px; font-weight: 400; } /* Code Block Use `.nova-code-block` along with `
` and ``
to represent preformatted text


Markup:



<h3>Sample title here...</h3>
<p>Paragraph text goes here...</p>




Weight: 8

Styleguide typography.code-block
*/

.nova-code-block pre,
.nova-code-block code {
  text-transform: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 13px;
}

.nova-code-block code {
  border-radius: 3px;
  background-color: #F5F5F5;
  padding: 2px 5px;
}

.nova-code-block pre > code {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  white-space: pre-wrap;
  color: inherit;
  font-size: inherit;
}

/*
Lists


Markup:

    
  
  • Item the first
    • 
  
  • Item the second
    • 
  
  • Item the third
    • 



    
  
  1. Item the first
    2. 
  
  2. Item the second
    3. 
  
  3. Item the third
    4. 



.nova-list - Add a little spacing between items for readability.
.nova-list-unstyled - Remove all list styling (including indicators) so you can add your own.


Weight: 8

Styleguide typography.lists
*/

ol,
ul {
  margin: 0;
  padding-left: 40px;
}

.nova-list li:not(:last-child) {
  padding-bottom: 5px;
}

.nova-list li :last-child {
  margin-bottom: 0;
}

.nova-list ol,
.nova-list ul {
  margin-top: 5px;
}

.nova-list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nova-list-unstyled li {
  padding: 0;
}

/*
Text Modifiers

Standardized treatment of type

Markup:


  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Maecenas vitae tortor id ex scelerisque interdum eget quis sem.



.nova-text-mute - Change text color to grey, usually used to de-emphasize the texts.
.nova-text-overflow-ellipsis - Truncates a single line of text with an ellipsis if it overflows.

Weight: 9

Styleguide typography.utilities
 */

.nova-text-mute {
  color: #79808A;
}

.nova-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
Links

Simply use an `` tag as you normally would. No class is necessary for Blueprint styles.
Links are underlined only when hovered.

Weight: 8

Styleguide typography.links
*/

a {
  text-decoration: none;
  color: #2068D3;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #133c7a;
}

/*
Icons

@react-docs IconsGrid

Styleguide icons
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

/*
Accordion

Styleguide components.accordion
*/

/*
CSS API

Markup:


  

    

      
      header 1
    

    

      body 1
    

  

  

    

      
      header 2
    

    

      body 2
    

  




Styleguide components.accordion.css
*/

.nova-accordion-item > button {
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

.nova-accordion-item-title {
  position: relative;
  cursor: pointer;
  padding-left: 20px;
}

.nova-accordion-item-chevron {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.nova-accordion-item-chevron::before {
  font-size: 16px;
}

.nova-accordion-item-body {
  display: none;
}

.nova-accordion-item.active > button .nova-accordion-item-chevron {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

.nova-accordion-item.active > .nova-accordion-item-body {
  display: block;
}

/*
JavaScript API


@interface Accordion

@react-example AccordionExample

```jsx

  
    body 1
  
  
    body 2
  

```

Styleguide components.accordion.js
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

/*
Buttons

Buttons trigger actions when clicked.

Styleguide components.button
*/

/*
CSS API

Markup:


.nova-button-primary - Most important button on the page
.nova-button-danger - Sometimes it is important to warn user before they taking an action
.nova-button-outline - In need of a button, but not the hefty background colors they bring?
.nova-button-naked - Less important button
.nova-button-minimal - no padding, no height
:disabled - Disabed button


Styleguide components.button.css
*/

.nova-button {
  font-size: 14px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  outline: 0;
  border: none;
  border-radius: 40px;
  box-sizing: border-box;
  background-color: #F5F5F5;
  cursor: pointer;
  height: 40px;
  padding: 0 16px;
  vertical-align: middle;
  line-height: 40px;
  white-space: nowrap;
  color: inherit;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  /*
  Buttons with icons

  Add an icon before the button text with `nova-icon-*` classes.

  Markup:
    

  Weight: -1

  Styleguide components.button.css.icon
  */
}

.nova-button:disabled, .nova-button.nova-button-disabled {
  cursor: not-allowed;
}

.nova-button[class*=nova-icon]::before {
  float: left;
  margin-right: 4px;
  margin-left: -2px;
}

.nova-button.nova-button-icon-after[class*=nova-icon]::before {
  float: right;
  margin-right: -3px;
  margin-left: 3px;
}

.nova-button .nova-button-right-icon::before {
  float: right;
  margin-right: -3px;
  margin-left: 3px;
}

.nova-button + .nova-button {
  margin-left: 10px;
}

.nova-button {
  background-color: #F5F5F5;
  color: #515151;
}

.nova-button .nova-single-ball-beat > div {
  background-color: #515151;
}

.nova-button:hover, .nova-button:active, .nova-button:visited, .nova-button.nova-active {
  color: #515151;
}

.nova-button:hover {
  background-color: #e8e8e8;
}

.nova-button:active, .nova-button.nova-active {
  background-color: #d6d6d6;
}

.nova-button:disabled, .nova-button.nova-button-disabled {
  background-color: #F8F9FA;
  color: #79808A;
}

.nova-button:disabled .nova-single-ball-beat > div, .nova-button.nova-button-disabled .nova-single-ball-beat > div {
  background-color: #79808A;
}

.nova-button-outline,
.nova-button-minimal,
.nova-button-naked {
  border-width: 2px;
  border-style: solid;
  background-color: transparent;
  line-height: 38px;
  border-color: #515151;
  color: #515151;
}

.nova-button-outline:visited,
.nova-button-minimal:visited,
.nova-button-naked:visited {
  color: #515151;
}

.nova-button-outline:hover,
.nova-button-minimal:hover,
.nova-button-naked:hover {
  color: #444444;
}

.nova-button-outline:active, .nova-button-outline.nova-active,
.nova-button-minimal:active,
.nova-button-minimal.nova-active,
.nova-button-naked:active,
.nova-button-naked.nova-active {
  color: #323232;
}

.nova-button-outline:disabled, .nova-button-outline.nova-button-disabled,
.nova-button-minimal:disabled,
.nova-button-minimal.nova-button-disabled,
.nova-button-naked:disabled,
.nova-button-naked.nova-button-disabled {
  color: #79808A;
}

.nova-button-outline:active, .nova-button-outline:hover, .nova-button-outline:disabled, .nova-button-outline.nova-active, .nova-button-outline.nova-button-disabled,
.nova-button-minimal:active,
.nova-button-minimal:hover,
.nova-button-minimal:disabled,
.nova-button-minimal.nova-active,
.nova-button-minimal.nova-button-disabled,
.nova-button-naked:active,
.nova-button-naked:hover,
.nova-button-naked:disabled,
.nova-button-naked.nova-active,
.nova-button-naked.nova-button-disabled {
  background-color: transparent;
}

.nova-button-outline {
  height: 40px;
  padding: 0 19px;
}

.nova-button-outline, .nova-button-outline:active, .nova-button-outline:hover, .nova-button-outline:disabled, .nova-button-outline.nova-active, .nova-button-outline.nova-button-disabled {
  background-color: #FFFFFF;
}

.nova-button-outline.nova-button-disabled, .nova-button-outline:disabled {
  border-color: #79808A;
}

.nova-button-naked,
.nova-button-minimal {
  border-color: transparent;
}

.nova-button-minimal {
  border: none;
  height: auto;
  padding: 0;
  line-height: inherit;
}

.nova-button-loader.nova-loader {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
}

.nova-button-loader.nova-loader .nova-single-ball-beat {
  min-width: 8px;
  min-height: 8px;
}

.nova-button-loader.nova-loader .nova-single-ball-beat > div {
  margin: -4px;
  width: 8px;
  height: 8px;
}

.nova-button-primary {
  background-color: #2068D3;
  color: #FFFFFF;
}

.nova-button-primary .nova-single-ball-beat > div {
  background-color: #FFFFFF;
}

.nova-button-primary:hover, .nova-button-primary:active, .nova-button-primary:visited, .nova-button-primary.nova-active {
  color: #FFFFFF;
}

.nova-button-primary:hover {
  background-color: #1d5dbd;
}

.nova-button-primary:active, .nova-button-primary.nova-active {
  background-color: #184e9e;
}

.nova-button-primary:disabled, .nova-button-primary.nova-button-disabled {
  background-color: #91CDFF;
  color: #FFFFFF;
}

.nova-button-primary:disabled .nova-single-ball-beat > div, .nova-button-primary.nova-button-disabled .nova-single-ball-beat > div {
  background-color: #FFFFFF;
}

.nova-button-outline-primary,
.nova-button-minimal-primary,
.nova-button-naked-primary {
  border-width: 2px;
  border-style: solid;
  background-color: transparent;
  line-height: 38px;
  border-color: #2068D3;
  color: #2068D3;
}

.nova-button-outline-primary:visited,
.nova-button-minimal-primary:visited,
.nova-button-naked-primary:visited {
  color: #2068D3;
}

.nova-button-outline-primary:hover,
.nova-button-minimal-primary:hover,
.nova-button-naked-primary:hover {
  color: #1d5dbd;
}

.nova-button-outline-primary:active, .nova-button-outline-primary.nova-active,
.nova-button-minimal-primary:active,
.nova-button-minimal-primary.nova-active,
.nova-button-naked-primary:active,
.nova-button-naked-primary.nova-active {
  color: #184e9e;
}

.nova-button-outline-primary:disabled, .nova-button-outline-primary.nova-button-disabled,
.nova-button-minimal-primary:disabled,
.nova-button-minimal-primary.nova-button-disabled,
.nova-button-naked-primary:disabled,
.nova-button-naked-primary.nova-button-disabled {
  color: #91CDFF;
}

.nova-button-outline-primary:disabled .nova-single-ball-beat > div, .nova-button-outline-primary.nova-button-disabled .nova-single-ball-beat > div,
.nova-button-minimal-primary:disabled .nova-single-ball-beat > div,
.nova-button-minimal-primary.nova-button-disabled .nova-single-ball-beat > div,
.nova-button-naked-primary:disabled .nova-single-ball-beat > div,
.nova-button-naked-primary.nova-button-disabled .nova-single-ball-beat > div {
  background-color: #91CDFF;
}

.nova-button-outline-primary .nova-single-ball-beat > div,
.nova-button-minimal-primary .nova-single-ball-beat > div,
.nova-button-naked-primary .nova-single-ball-beat > div {
  background-color: #2068D3;
}

.nova-button-outline-primary:active, .nova-button-outline-primary:hover, .nova-button-outline-primary:disabled, .nova-button-outline-primary.nova-active, .nova-button-outline-primary.nova-button-disabled,
.nova-button-minimal-primary:active,
.nova-button-minimal-primary:hover,
.nova-button-minimal-primary:disabled,
.nova-button-minimal-primary.nova-active,
.nova-button-minimal-primary.nova-button-disabled,
.nova-button-naked-primary:active,
.nova-button-naked-primary:hover,
.nova-button-naked-primary:disabled,
.nova-button-naked-primary.nova-active,
.nova-button-naked-primary.nova-button-disabled {
  background-color: transparent;
}

.nova-button-outline-primary {
  height: 40px;
  padding: 0 19px;
}

.nova-button-outline-primary, .nova-button-outline-primary:active, .nova-button-outline-primary:hover, .nova-button-outline-primary:disabled, .nova-button-outline-primary.nova-active, .nova-button-outline-primary.nova-button-disabled {
  background-color: #FFFFFF;
}

.nova-button-outline-primary.nova-button-disabled, .nova-button-outline-primary:disabled {
  border-color: #91CDFF;
}

.nova-button-naked-primary,
.nova-button-minimal-primary {
  border-color: transparent;
}

.nova-button-minimal-primary {
  border: none;
  height: auto;
  padding: 0;
  line-height: inherit;
}

.nova-button-loader.nova-loader {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
}

.nova-button-loader.nova-loader .nova-single-ball-beat {
  min-width: 8px;
  min-height: 8px;
}

.nova-button-loader.nova-loader .nova-single-ball-beat > div {
  margin: -4px;
  width: 8px;
  height: 8px;
}

.nova-button-danger {
  background-color: #D0021B;
  color: #FFFFFF;
}

.nova-button-danger .nova-single-ball-beat > div {
  background-color: #FFFFFF;
}

.nova-button-danger:hover, .nova-button-danger:active, .nova-button-danger:visited, .nova-button-danger.nova-active {
  color: #FFFFFF;
}

.nova-button-danger:hover {
  background-color: #b70218;
}

.nova-button-danger:active, .nova-button-danger.nova-active {
  background-color: #930113;
}

.nova-button-danger:disabled, .nova-button-danger.nova-button-disabled {
  background-color: #FFCBD0;
  color: #FFFFFF;
}

.nova-button-danger:disabled .nova-single-ball-beat > div, .nova-button-danger.nova-button-disabled .nova-single-ball-beat > div {
  background-color: #FFFFFF;
}

.nova-button-outline-danger,
.nova-button-minimal-danger,
.nova-button-naked-danger {
  border-width: 2px;
  border-style: solid;
  background-color: transparent;
  line-height: 38px;
  border-color: #D0021B;
  color: #D0021B;
}

.nova-button-outline-danger:visited,
.nova-button-minimal-danger:visited,
.nova-button-naked-danger:visited {
  color: #D0021B;
}

.nova-button-outline-danger:hover,
.nova-button-minimal-danger:hover,
.nova-button-naked-danger:hover {
  color: #b70218;
}

.nova-button-outline-danger:active, .nova-button-outline-danger.nova-active,
.nova-button-minimal-danger:active,
.nova-button-minimal-danger.nova-active,
.nova-button-naked-danger:active,
.nova-button-naked-danger.nova-active {
  color: #930113;
}

.nova-button-outline-danger:disabled, .nova-button-outline-danger.nova-button-disabled,
.nova-button-minimal-danger:disabled,
.nova-button-minimal-danger.nova-button-disabled,
.nova-button-naked-danger:disabled,
.nova-button-naked-danger.nova-button-disabled {
  color: #FFCBD0;
}

.nova-button-outline-danger:disabled .nova-single-ball-beat > div, .nova-button-outline-danger.nova-button-disabled .nova-single-ball-beat > div,
.nova-button-minimal-danger:disabled .nova-single-ball-beat > div,
.nova-button-minimal-danger.nova-button-disabled .nova-single-ball-beat > div,
.nova-button-naked-danger:disabled .nova-single-ball-beat > div,
.nova-button-naked-danger.nova-button-disabled .nova-single-ball-beat > div {
  background-color: #FFCBD0;
}

.nova-button-outline-danger .nova-single-ball-beat > div,
.nova-button-minimal-danger .nova-single-ball-beat > div,
.nova-button-naked-danger .nova-single-ball-beat > div {
  background-color: #D0021B;
}

.nova-button-outline-danger:active, .nova-button-outline-danger:hover, .nova-button-outline-danger:disabled, .nova-button-outline-danger.nova-active, .nova-button-outline-danger.nova-button-disabled,
.nova-button-minimal-danger:active,
.nova-button-minimal-danger:hover,
.nova-button-minimal-danger:disabled,
.nova-button-minimal-danger.nova-active,
.nova-button-minimal-danger.nova-button-disabled,
.nova-button-naked-danger:active,
.nova-button-naked-danger:hover,
.nova-button-naked-danger:disabled,
.nova-button-naked-danger.nova-active,
.nova-button-naked-danger.nova-button-disabled {
  background-color: transparent;
}

.nova-button-outline-danger {
  height: 40px;
  padding: 0 19px;
}

.nova-button-outline-danger, .nova-button-outline-danger:active, .nova-button-outline-danger:hover, .nova-button-outline-danger:disabled, .nova-button-outline-danger.nova-active, .nova-button-outline-danger.nova-button-disabled {
  background-color: #FFFFFF;
}

.nova-button-outline-danger.nova-button-disabled, .nova-button-outline-danger:disabled {
  border-color: #FFCBD0;
}

.nova-button-naked-danger,
.nova-button-minimal-danger {
  border-color: transparent;
}

.nova-button-minimal-danger {
  border: none;
  height: auto;
  padding: 0;
  line-height: inherit;
}

.nova-button-loader.nova-loader {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
}

.nova-button-loader.nova-loader .nova-single-ball-beat {
  min-width: 8px;
  min-height: 8px;
}

.nova-button-loader.nova-loader .nova-single-ball-beat > div {
  margin: -4px;
  width: 8px;
  height: 8px;
}

a.nova-button {
  text-decoration: none;
}

/*
JavaScript API


Styleguide components.button.js
*/

/*
Anchor button

An AnchorButton renders to an anchor element

```html

// renders to:

  test button

```

Styleguide: components.button.js.anchor-button
*/

/*
Button

A Button renders to a button element

```html

```
@react-example ButtonsExample

@interface abstractButton

Styleguide: components.button.js.button
*/

/*
SmartButton

A SmartButton is a Button where the onClick handler accepts two parameters, event and done.
Both are optional. if you add the done parameter, the button will be disabled
until the done callback is invoked.
Optionally, you can display a loading anination and a custom loading text.

```jsx
 setTimeout(() => done(), 3000)}
/>
```

@react-example SmartButtonsExample

@interface SmartButton

Styleguide: components.button.js.smart-button
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

/*
Card

A card is a bounded piece of UI content with a solid background color.

Styleguide components.card
*/

/*
CSS API

Markup:


  
My Card

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nullam ut ipsum lobortis, egestas est eget, tincidunt eros.
  




.nova-card-elevation-2 - With Elevation
.nova-card-dynamic-elevation-2 - Interactive, with elevation.
.nova-card-border-1 - With Border

Styleguide components.card.css
*/

.nova-card {
  display: inline-block;
  position: relative;
  border-radius: 3px;
  background-color: #FFFFFF;
  padding: 30px;
  -webkit-transition: box-shadow 0.2s ease-out;
  transition: box-shadow 0.2s ease-out;
}

.nova-card-fullsize {
  width: 100%;
  height: 100%;
}

.nova-card-fullwidth {
  width: 100%;
}

.nova-card-fullheight {
  height: 100%;
}

.nova-card-border-1 {
  border: 1px solid #E5E5E5;
}

.nova-card-border-2 {
  border: 2px solid #E5E5E5;
}

.nova-card-border-3 {
  border: 3px solid #E5E5E5;
}

.nova-card,
.nova-card-dynamic {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}

.nova-card-dynamic:hover {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}

.nova-card-elevation-1,
.nova-card-dynamic-elevation-1 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.nova-card-dynamic-elevation-1:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.nova-card-elevation-2,
.nova-card-dynamic-elevation-2 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.nova-card-dynamic-elevation-2:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.nova-card-elevation-3,
.nova-card-dynamic-elevation-3 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.nova-card-dynamic-elevation-3:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/*
JavaScript API

@react-example CardExample

```jsx

  
House of Cards

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nullam ut ipsum lobortis, egestas est eget, tincidunt eros.
  


```

@interface Card

Styleguide components.card.js
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

/*
Confirm

A convenient way to add a confirm Modal or Popover to UI actions.
Just wrap an element with an onClick property (`
  


Styleguide components.emptystate.css
*/

.nova-empty-state {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  height: 100%;
}

.nova-empty-state-visual {
  margin-bottom: 10px;
  text-align: center;
}

.nova-empty-state-visual .nova-icon::before {
  line-height: 80px;
  color: #CDCDCD;
  font-size: 80px;
}

.nova-empty-state-title {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
  text-align: center;
  color: #515151;
  font-weight: 700;
}

.nova-empty-state-description {
  margin-top: 10px;
  max-width: 100%;
  text-align: center;
}

.nova-empty-state-description p {
  line-height: inherit;
}

.nova-empty-state-action {
  margin-top: 20px;
  max-width: 100%;
  text-align: center;
}

/*
Javascript API

@react-example EmptyStateExample

```jsx
}
/>
```

@interface EmptyState

Styleguide components.emptystate.js
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

.error > .nova-input-group .nova-input,
.error > .nova-input-group .nova-input:not(:last-child),
.error > .nova-input-group .nova-input:not(:first-child),
.error > .nova-input {
  border-color: #F84746;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.error > .nova-input-group .nova-input:focus,
.error > .nova-input-group .nova-input:not(:last-child):focus,
.error > .nova-input-group .nova-input:not(:first-child):focus,
.error > .nova-input:focus {
  border-color: #F84746;
  box-shadow: inset 0 1px 3px 0 white;
}

.error .nova-input-group-addon,
.error .nova-input-group-addon:not(:first-child),
.error .nova-input-group-addon:not(:last-child) {
  border-color: #F84746;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: white;
  color: #F84746;
}

/*
Text Inputs

Markup:


:disabled - Disabled
:readonly - Readonly


Weight: 3

Styleguide components.forms.input
*/

.nova-input {
  display: block;
  border: 2px solid #E5E5E5;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  width: 100%;
  padding: 7px 10px;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 700;
}

.nova-input::-webkit-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-input::-moz-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-input:-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-input::-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-input::placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-input:focus {
  outline: none;
  border-color: #2068D3;
}

.nova-input:disabled, .nova-input[readonly] {
  background-color: #F8F9FA;
}

.nova-input:disabled {
  cursor: not-allowed;
}

/*
Sliders

Markup:


:disabled - Disabled


Weight: 3

Styleguide components.forms.slider
*/

.nova-slider {
  -webkit-appearance: none;
}

.nova-slider::-moz-range-thumb {
  margin-top: -8px;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #2068D3;
  width: 20px;
  height: 20px;
}

.nova-slider::-webkit-slider-thumb {
  margin-top: -8px;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #2068D3;
  width: 20px;
  height: 20px;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
}

.nova-slider::-webkit-slider-runnable-track {
  border-radius: 2px;
  background: #2068D3;
  cursor: pointer;
  width: 100%;
  height: 4px;
}

.nova-slider::-moz-track {
  border-radius: 2px;
  background: #2068D3;
  cursor: pointer;
  width: 100%;
  height: 4px;
}

/*
Text Areas

Markup:


:disabled - Disabled
:readonly - Readonly

Weight: 3

Styleguide components.forms.textarea
*/

textarea.nova-input {
  display: block;
  border: 2px solid #E5E5E5;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  width: 100%;
  padding: 7px 10px;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 700;
}

textarea.nova-input::-webkit-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

textarea.nova-input::-moz-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

textarea.nova-input:-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

textarea.nova-input::-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

textarea.nova-input::placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

textarea.nova-input:focus {
  outline: none;
  border-color: #2068D3;
}

textarea.nova-input:disabled, textarea.nova-input[readonly] {
  background-color: #F8F9FA;
}

textarea.nova-input:disabled {
  cursor: not-allowed;
}

/* stylelint-disable */

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

@font-face {
  font-family: "nova-icons-1afe74a5d0c0e65e8a2";

  src: url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.eot?9721c9c4e01704f75ec6929d88c1167f?#iefix") format("embedded-opentype"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.woff2?9721c9c4e01704f75ec6929d88c1167f") format("woff2"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.woff?9721c9c4e01704f75ec6929d88c1167f") format("woff"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.ttf?9721c9c4e01704f75ec6929d88c1167f") format("truetype"), url("/workspace/static/fonts/nova-icons-1afe74a5d0c0e65e8a2.svg?9721c9c4e01704f75ec6929d88c1167f#nova-icons-1afe74a5d0c0e65e8a2") format("svg");
}

.nova-toast-error:before, .nova-toast-warning:before, .nova-toast-success:before, .nova-toast-info:before, .nova-control-checkbox input:checked ~ .nova-control-indicator:before,
.nova-control-checkbox input:indeterminate ~ .nova-control-indicator:before, .nova-icon-action:before, .nova-icon-add-circle:before, .nova-icon-add:before, .nova-icon-api:before, .nova-icon-bank:before, .nova-icon-bulb:before, .nova-icon-calendar-left:before, .nova-icon-calendar-right:before, .nova-icon-calendar:before, .nova-icon-case-study:before, .nova-icon-check-circle:before, .nova-icon-check:before, .nova-icon-clock:before, .nova-icon-clone:before, .nova-icon-close:before, .nova-icon-cog:before, .nova-icon-collapse-all:before, .nova-icon-connect-cloud:before, .nova-icon-data-management:before, .nova-icon-delete:before, .nova-icon-device-sharing:before, .nova-icon-devicetype-alt:before, .nova-icon-devicetype:before, .nova-icon-down-alt:before, .nova-icon-down-circle:before, .nova-icon-down:before, .nova-icon-download:before, .nova-icon-draggable:before, .nova-icon-duration:before, .nova-icon-edit:before, .nova-icon-error:before, .nova-icon-exclamation-circle:before, .nova-icon-expand-all:before, .nova-icon-external-link:before, .nova-icon-farm:before, .nova-icon-field-group:before, .nova-icon-file:before, .nova-icon-from-device:before, .nova-icon-header-help:before, .nova-icon-header-search:before, .nova-icon-header-user:before, .nova-icon-health:before, .nova-icon-home:before, .nova-icon-import:before, .nova-icon-industry:before, .nova-icon-info:before, .nova-icon-introduction:before, .nova-icon-location:before, .nova-icon-lock:before, .nova-icon-machine-learning:before, .nova-icon-more:before, .nova-icon-on-off:before, .nova-icon-org:before, .nova-icon-pause:before, .nova-icon-pending:before, .nova-icon-play:before, .nova-icon-prediction:before, .nova-icon-preview:before, .nova-icon-question:before, .nova-icon-quick-start:before, .nova-icon-refresh:before, .nova-icon-right-2:before, .nova-icon-right:before, .nova-icon-rule-engine:before, .nova-icon-scene:before, .nova-icon-sdk:before, .nova-icon-search:before, .nova-icon-security-cam:before, .nova-icon-security:before, .nova-icon-select-arrow:before, .nova-icon-share:before, .nova-icon-tag:before, .nova-icon-terminal:before, .nova-icon-tools:before, .nova-icon-user-management:before, .nova-icon-user:before, .nova-icon-warning:before, .nova-icon-weather:before, .nova-datetimepicker .react-calendar .react-calendar__navigation__next-button:before, .nova-datetimepicker .react-calendar .react-calendar__navigation__prev-button:before {
  font-family: "nova-icons-1afe74a5d0c0e65e8a2";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-feature-settings: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.nova-icon-action:before {
  content: "\F101";
}

.nova-icon-add-circle:before {
  content: "\F102";
}

.nova-icon-add:before {
  content: "\F103";
}

.nova-icon-api:before {
  content: "\F104";
}

.nova-icon-bank:before {
  content: "\F105";
}

.nova-icon-bulb:before {
  content: "\F106";
}

.nova-icon-calendar-left:before {
  content: "\F107";
}

.nova-icon-calendar-right:before {
  content: "\F108";
}

.nova-icon-calendar:before {
  content: "\F109";
}

.nova-icon-case-study:before {
  content: "\F10A";
}

.nova-icon-check-circle:before {
  content: "\F10B";
}

.nova-icon-check:before {
  content: "\F10C";
}

.nova-icon-clock:before {
  content: "\F10D";
}

.nova-icon-clone:before {
  content: "\F10E";
}

.nova-icon-close:before {
  content: "\F10F";
}

.nova-icon-cog:before {
  content: "\F110";
}

.nova-icon-collapse-all:before {
  content: "\F111";
}

.nova-icon-connect-cloud:before {
  content: "\F112";
}

.nova-icon-data-management:before {
  content: "\F113";
}

.nova-icon-delete:before {
  content: "\F114";
}

.nova-icon-device-sharing:before {
  content: "\F115";
}

.nova-icon-devicetype-alt:before {
  content: "\F116";
}

.nova-icon-devicetype:before {
  content: "\F117";
}

.nova-icon-down-alt:before {
  content: "\F118";
}

.nova-icon-down-circle:before {
  content: "\F119";
}

.nova-icon-down:before {
  content: "\F11A";
}

.nova-icon-download:before {
  content: "\F11B";
}

.nova-icon-draggable:before {
  content: "\F11C";
}

.nova-icon-duration:before {
  content: "\F11D";
}

.nova-icon-edit:before {
  content: "\F11E";
}

.nova-icon-error:before {
  content: "\F11F";
}

.nova-icon-exclamation-circle:before {
  content: "\F120";
}

.nova-icon-expand-all:before {
  content: "\F121";
}

.nova-icon-external-link:before {
  content: "\F122";
}

.nova-icon-farm:before {
  content: "\F123";
}

.nova-icon-field-group:before {
  content: "\F124";
}

.nova-icon-file:before {
  content: "\F125";
}

.nova-icon-from-device:before {
  content: "\F126";
}

.nova-icon-header-help:before {
  content: "\F127";
}

.nova-icon-header-search:before {
  content: "\F128";
}

.nova-icon-header-user:before {
  content: "\F129";
}

.nova-icon-health:before {
  content: "\F12A";
}

.nova-icon-home:before {
  content: "\F12B";
}

.nova-icon-import:before {
  content: "\F12C";
}

.nova-icon-industry:before {
  content: "\F12D";
}

.nova-icon-info:before {
  content: "\F12E";
}

.nova-icon-introduction:before {
  content: "\F12F";
}

.nova-icon-location:before {
  content: "\F130";
}

.nova-icon-lock:before {
  content: "\F131";
}

.nova-icon-machine-learning:before {
  content: "\F132";
}

.nova-icon-more:before {
  content: "\F133";
}

.nova-icon-on-off:before {
  content: "\F134";
}

.nova-icon-org:before {
  content: "\F135";
}

.nova-icon-pause:before {
  content: "\F136";
}

.nova-icon-pending:before {
  content: "\F137";
}

.nova-icon-play:before {
  content: "\F138";
}

.nova-icon-prediction:before {
  content: "\F139";
}

.nova-icon-preview:before {
  content: "\F13A";
}

.nova-icon-question:before {
  content: "\F13B";
}

.nova-icon-quick-start:before {
  content: "\F13C";
}

.nova-icon-refresh:before {
  content: "\F13D";
}

.nova-icon-right-2:before {
  content: "\F13E";
}

.nova-icon-right:before {
  content: "\F13F";
}

.nova-icon-rule-engine:before {
  content: "\F140";
}

.nova-icon-scene:before {
  content: "\F141";
}

.nova-icon-sdk:before {
  content: "\F142";
}

.nova-icon-search:before {
  content: "\F143";
}

.nova-icon-security-cam:before {
  content: "\F144";
}

.nova-icon-security:before {
  content: "\F145";
}

.nova-icon-select-arrow:before {
  content: "\F146";
}

.nova-icon-share:before {
  content: "\F147";
}

.nova-icon-tag:before {
  content: "\F148";
}

.nova-icon-terminal:before {
  content: "\F149";
}

.nova-icon-tools:before {
  content: "\F14A";
}

.nova-icon-user-management:before {
  content: "\F14B";
}

.nova-icon-user:before {
  content: "\F14C";
}

.nova-icon-warning:before {
  content: "\F14D";
}

.nova-icon-weather:before {
  content: "\F14E";
}

.nova-control {
  display: block;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  padding-left: 26px;
  text-transform: none;
  line-height: 16px;
}

.nova-control input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1; /* stylelint-disable-line property-blacklist */
}

.nova-control input:focus ~ .nova-control-indicator {
  outline: #2068D3 auto 2px;
  outline-offset: 2px;
  -moz-outline-radius: 6px;
}

.nova-control:hover .nova-control-indicator {
  border-color: #79808A;
}

.nova-control-indicator {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  border: 2px solid #ACACAC;
  box-sizing: border-box;
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.nova-control-indicator::before {
  position: absolute;
  top: -1px;
  left: -1.5px;
}

.nova-control-text {
  position: relative;
}

.nova-control input:checked ~ .nova-control-indicator {
  border-color: #2068D3;
  background-color: #FFFFFF;
  color: #FFFFFF;
}

.nova-control-disabled {
  cursor: not-allowed;
  color: #ABAFB6;
}

.nova-control input:disabled ~ .nova-control-indicator {
  border-color: #E5E5E5;
  cursor: not-allowed;
}

.nova-control input:checked:disabled ~ .nova-control-indicator {
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  cursor: not-allowed;
}

/*
Checkbox

* Used for selecting multiple values from several options.
* Custom styling with the use of an extra `.nova-control-indicator` element.
* If you use only one checkbox, it is the same as using Switch to toggle between two states.
* Support for `:indeterminate` state.

Styleguide components.forms.checkbox

*/

/*
CSS API

Markup:


:checked  - Checked.
:disabled - Disabled. Also add `.nova-control-disabled` to `.nova-control-checkbox`
            to change text color (not shown below).
:indeterminate - Indeterminate. (set via JavaScript `inputEl.indeterminate = true`)
.nova-control-switch - Show the Checkboxs as a switch control

Styleguide components.forms.checkbox.css
*/

.nova-control-checkbox .nova-control-indicator {
  border-radius: 1.5px;
  background-color: #FFFFFF;
}

.nova-control-checkbox input:checked ~ .nova-control-text,
.nova-control-checkbox input:indeterminate ~ .nova-control-text, .nova-control-checkbox:hover input:indeterminate ~ .nova-control-text {
  font-weight: 700;
}

.nova-control-checkbox input:checked ~ .nova-control-indicator,
.nova-control-checkbox input:indeterminate ~ .nova-control-indicator, .nova-control-checkbox:hover input:indeterminate ~ .nova-control-indicator {
  border-color: #2068D3;
  background-color: #2068D3;
}

.nova-control-checkbox input:checked ~ .nova-control-indicator:before,
.nova-control-checkbox input:indeterminate ~ .nova-control-indicator:before {
  content: "\F10C";
}

.nova-control-checkbox input:indeterminate ~ .nova-control-indicator::before {
  position: absolute;
  top: 5px;
  left: 2px;
  background-color: #FFFFFF;
  width: 8px;
  height: 2px;
  content: "";
}

.nova-control-checkbox input:disabled:indeterminate ~ .nova-control-indicator {
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  cursor: not-allowed;
}

.nova-control-switch {
  padding-left: 44px;
  line-height: 24px;
}

.nova-control-switch .nova-control-indicator {
  border: none;
  border-radius: 2000px;
  background-color: #E5E5E5;
  width: 40px;
  height: 24px;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}

.nova-control-switch .nova-control-indicator::before {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  background: #FFFFFF;
  width: 20px;
  height: 20px;
  content: "";
  -webkit-transition: left 0.2s ease-out;
  transition: left 0.2s ease-out;
}

.nova-control-switch input:checked ~ .nova-control-indicator {
  background-color: #2068D3;
}

.nova-control-switch input:checked ~ .nova-control-indicator::before {
  left: 18px;
}

.nova-control-switch input:disabled:indeterminate ~ .nova-control-indicator {
  background-color: #E5E5E5;
}

/*
Javascript API

@interface abstractControl

@interface Checkbox

```jsx

```

@react-example CheckboxExample

Styleguide components.forms.checkbox.js
*/

/*
Radio

* Used to select a single state in multiple options.
* The difference between Select is that Radio is visible to user and can
  facilitate the comparison of choice.

Styleguide components.forms.radio
*/

/*
CSS API

Markup:


:checked  - Checked.
:disabled - Disabled.Also add `.nova-control-disabled` to `.nova-control-radio`
            to change text color (not shown below).

Styleguide components.forms.radio.css
*/

.nova-control-radio .nova-control-indicator {
  border-radius: 50%;
}

.nova-control-radio input:checked ~ .nova-control-text {
  font-weight: 700;
}

.nova-control-radio input:checked ~ .nova-control-indicator::before {
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #2068D3;
  width: 8px;
  height: 8px;
  content: "";
}

.nova-control-radio-button {
  display: inline-block;
  padding: 10px 20px;
}

.nova-control-radio-button .nova-control-text {
  font-size: 14px;
  font-weight: 700;
  color: #79808A;
}

.nova-control-radio-button .nova-control-indicator {
  border: none;
  box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.12);
  background-color: #F5F5F5;
  width: 100%;
  height: 100%;
}

.nova-control-radio-button:last-child .nova-control-indicator {
  box-shadow: none;
}

.nova-control-radio-button input:checked ~ .nova-control-indicator {
  border: none;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  background-color: #CCCCCC;
  color: #666666;
}

.nova-control-radio-button input:checked ~ .nova-control-text {
  color: #666666;
}

.nova-control-radio-button input:focus ~ .nova-control-indicator,
.nova-control-radio-button input:focus ~ .nova-control-text {
  /* stylelint-disable-next-line property-blacklist */
  z-index: 1;
}

/*
Javascript API

The `Radio` and `RadioButton` elements are available individually but they are
typically used in a `RadioGroup` (see below). `Radio` and `RadioButton` share
the same interface and therefore accept the same props.

@interface abstractControl

```jsx


```

Styleguide components.forms.radio.js
*/

/*
RadioGroup

Responsible for managing state and interaction. It is used with a series of `Radio` as children.

@interface RadioGroup

```jsx
 this.setState({ selectedValue: e.currentTarget.value })}
>
  
  
  
  
  
  
  

```

@react-example RadioGroupExample

Weight: 3

Styleguide components.forms.radio.radiogroup.js
*/

.nova-radio-group .nova-label {
  display: block;
}

.nova-radio-group > .nova-control-radio-button .nova-control-indicator {
  border-radius: 3px 0 0 3px;
}

.nova-radio-group > .nova-control-radio-button ~ .nova-control-radio-button .nova-control-indicator {
  border-radius: 0;
}

.nova-radio-group > .nova-control-radio-button:last-child .nova-control-indicator {
  border-radius: 0 3px 3px 0;
}

/*
RadioButtonGroup

Responsible for managing state and interaction.
It is used with a series of `RadioButton` as children.
`RadioButton` shouldn't be used when they are too many options.
Typically if there more than 3 options, you should favor the more traditional `Radio` UI.

```jsx
 this.setState({ selectedValue: e.currentTarget.value })}
>
  
  
  

```

@react-example RadioButtonGroupExample

Weight: 1

Styleguide components.forms.radio.radiobuttongroup.js
*/

/*
Input Groups

Markup:


  

    @
    
  

  

  

    
    @samsung.com
  

  

  

    $
    
    .00
  





Weight: 3

Styleguide components.forms.input-group
*/

.nova-input-group {
  display: -webkit-box;
  display: flex;
  position: relative;
  width: 100%;
}

.nova-input-group .nova-input {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  position: relative;
  margin-bottom: 0;
  width: 1%;
}

.nova-input-group-addon,
.nova-input-group .nova-input {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}

.nova-input-group-addon:not(:first-child):not(:last-child),
.nova-input-group .nova-input:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.nova-input-group-addon {
  vertical-align: middle;
  white-space: nowrap;
}

.nova-input-group-addon {
  border: 2px solid #E5E5E5;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #F8F9FA;
  padding: 7px 10px;
  line-height: 1.5;
  color: #9B9B9B;
  font-family: inherit;
  font-weight: bold;
}

.nova-input-group .nova-input:not(:last-child),
.nova-input-group-addon:not(:last-child) {
  border-radius: 3px 0 0 3px;
}

.nova-input-group-addon:not(:last-child) {
  border-right: 0;
}

.nova-input + .nova-input-group-addon:not(:first-child) {
  border-left: 0;
}

.nova-input-group .nova-input:not(:first-child),
.nova-input-group-addon:not(:first-child) {
  border-radius: 0 3px 3px 0;
}

/*
Selects

Markup:


:disabled - Disabled

Weight: 4

Styleguide components.forms.select
*/

.nova-select {
  display: block;
  border: 2px solid #E5E5E5;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  width: 100%;
  padding: 7px 10px;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 700;
  height: 40px;
}

.nova-select::-webkit-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-select::-moz-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-select:-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-select::-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-select::placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-select:focus {
  outline: none;
  border-color: #2068D3;
}

.nova-select:disabled, .nova-select[readonly] {
  background-color: #F8F9FA;
}

.nova-select:disabled {
  cursor: not-allowed;
}

.nova-react-select.nova-primary .Select-arrow-zone {
  padding-right: 0;
}

.nova-react-select.nova-primary .Select-arrow-zone, .nova-react-select.nova-primary .Select-arrow-zone:hover {
  background-color: #2068D3;
}

.nova-react-select.nova-primary .Select-arrow-zone > .Select-arrow, .nova-react-select.nova-primary .Select-arrow-zone:hover > .Select-arrow {
  border-top-color: #FFFFFF;
}

.nova-react-select.nova-primary.is-open .Select-arrow-zone > .Select-arrow {
  border-bottom-color: #FFFFFF;
}

.nova-react-select .Select-input {
  height: 36px;
}

.nova-react-select .Select-placeholder, .nova-react-select .Select-value {
  line-height: 40px !important;
}

.nova-react-select .Select-control {
  border: 2px solid #E5E5E5;
  height: 40px;
}

.nova-react-select .Select-value-label {
  color: #333;
  font-weight: 700;
}

.nova-react-select .Select-option:not(.is-disabled) {
  color: #2068D3;
  font-weight: 700;
}

.nova-react-select .Select-option:not(.is-disabled):hover {
  background: #E3F3FF;
}

.nova-react-select .Select-option-group-label {
  padding: 5px 10px;
  color: #515151;
  font-size: 13px;
  font-weight: 700;
}

.nova-react-select.Select.is-open > .Select-control, .nova-react-select.Select.is-focused > .Select-control {
  border-color: #2068D3;
}

.nova-react-select .Select-menu-outer {
  top: 108%;
}

.nova-react-select .nova-option-label .nova-mute-text {
  margin-left: 0.5em;
}

.nova-react-select .Select-option-group .Select-option-group-label {
  background: #F7F7F7;
}

.nova-react-select .Select-option-group .Select-option-group .Select-option-group-label {
  background: #F8F9FA;
}

.nova-react-select .Select-option-group .Select-option-group .Select-option-group .Select-option-group-label {
  background: #F5F5F5;
}

.nova-react-select .Select-option-group .Select-option-group .Select-option-group .Select-option-group .Select-option-group-label {
  background: #E5E5E5;
}

.nova-react-select .Select-option-group .Select-option-group .Select-option-group .Select-option-group .Select-option-group .Select-option-group-label {
  background: #CDCDCD;
}

/*
JavaScript API

A Select renders a dropdown menu that can be searchable and multivalued
with support for option groups

```jsx

  
  


Weight: 4

Styleguide components.forms.spinner
*/

.nova-spinner-input {
  position: relative;
  height: 36px;
  font-family: "SamsungOne", "Helvetica Neue", "Arial", "sans-serif";
}

.nova-spinner-input > input {
  display: block;
  border: 2px solid #E5E5E5;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  width: 100%;
  padding: 7px 10px;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 700;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 5px !important;
  text-align: center;
  font-family: inherit;
}

.nova-spinner-input > input::-webkit-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-spinner-input > input::-moz-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-spinner-input > input:-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-spinner-input > input::-ms-input-placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-spinner-input > input::placeholder {
  color: #9B9B9B;
  font-weight: 700;
}

.nova-spinner-input > input:focus {
  outline: none;
  border-color: #2068D3;
}

.nova-spinner-input > input:disabled, .nova-spinner-input > input[readonly] {
  background-color: #F8F9FA;
}

.nova-spinner-input > input:disabled {
  cursor: not-allowed;
}

.nova-spinner-input.arrows-shown > input {
  padding: 5px 10px !important;
  text-align: left;
}

.nova-spinner-input .nova-spinner-button {
  position: absolute;
  right: -1px;
  /* stylelint-disable */
  z-index: 2;
  margin: 1px;
  outline: none;
  border: none;
  background-color: #DDDDDD;
  height: calc(50% - 1px);
  padding: 1px 6px;
  font-family: inherit;
  font-size: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* stylelint-enable */
}

.nova-spinner-input .nova-spinner-button:hover {
  background-color: #D4D4D4;
}

.nova-spinner-input .nova-spinner-button:active {
  background-color: #CDCDCD;
}

.nova-spinner-input .nova-spinner-button[disabled] {
  background-color: #DDDDDD;
  color: #AAAAAA;
}

.nova-spinner-input .nova-spinner-button[disabled]:hover, .nova-spinner-input .nova-spinner-button[disabled]:active {
  background-color: #DDDDDD;
}

.nova-spinner-input .nova-spinner-button-up {
  top: 0;
  border-radius: 0 4px 0 0;
}

.nova-spinner-input .nova-spinner-button-down {
  bottom: 0;
  border-top: 1px solid #CDCDCD;
  border-radius: 0 0 4px;
}

/*
JavaScript API

@react-example SpinnerExample

```jsx

Uncontrolled component




Controlled component

 {
    this.setState({ value: v });
  }}
  minValue={0}
  maxValue={999}
  precision="int"
  noEmptyValue
  zeroLeftPadding={3}
/>
```

@interface Spinner

Styleguide components.forms.spinner.js
*/

/*
Colors

Styleguide colors
*/

/*
Primary Colors

@react-docs PrimaryColorsPalette

Weight: 1

Styleguide colors.primary

*/

/*
Gray scale

@react-docs GrayscalePalette

Weight: 2

Styleguide colors.grays
*/

/*
Extended Colors

@react-docs ColorsExtendedPalette

Weight: 3

Styleguide colors.extended
*/

/*
Nesting colors

*/

/*
Footer

A universal responsive page footer.

Links are environment-specific and will be generated using
a set of three hosts passed as props (see props table, defaults to prod hosts).

Copyright dates are generated using a JavaScript `Date` instance.

Styleguide components.footer
*/

.nova-footer {
  background: #252525;
  width: 100%;
  padding: 45px 0 30px;
  font-weight: 700;
}

.nova-footer-inner {
  margin: 0 auto;
  padding: 0 24px;
}

.nova-footer-st-directory-column-title {
  color: #FFFFFF;
  font-size: 16px;
}

.nova-footer-st-directory-column-list {
  margin: 20px 0 35px;
  padding: 0;
  list-style: none;
}

.nova-footer-st-directory-column-item {
  margin-bottom: 10px;
}

.nova-footer-st-directory-column-link {
  color: #9B9B9B;
  font-size: 14px;
}

.nova-footer-st-directory-column-link:hover {
  text-decoration: none;
  color: #FFFFFF;
}

.nova-footer-st-directory-st-column .st-logo {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-align: center;
          align-items: center;
  width: 210px;
}

.nova-footer-st-directory-st-column .st-logo-copyright {
  margin-top: 2px;
  margin-left: 10px;
  white-space: nowrap;
  color: #E5E5E5;
  font-size: 12px;
}

.nova-footer-st-directory-st-column .st-logo-copyright:hover {
  text-decoration: none;
}

.nova-footer-legal {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  border-top: 2px solid #515151;
  padding: 25px 0 0;
}

.nova-footer-legal-links {
  margin-left: 20px;
}

.nova-footer-legal-copyright, .nova-footer-legal-link {
  color: #9B9B9B;
  font-size: 14px;
}

.nova-footer-legal-link:visited, .nova-footer-legal-link:hover {
  text-decoration: none;
  color: #FFFFFF;
}

/*
Javascript API

@react-example FooterExample

```jsx