@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h4, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /** * @description * Generates keyframe animations * * @author drublic * * @link caniuse http://caniuse.com/#feat=css-animation * @link spec http://www.w3.org/TR/css3-animations/ * * @param values * @returns * -webkit-animation: ; * animation: ; * * @example * .selector { * @include x-animation(jump 1s ease-out); * } */ /* * @example * @include x-keyframes(jump) { * from { top: 0; } * to { top: -10px; } * } */ /** * @description * Generates `appearance` for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance * @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/ * @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance * * @param value * @returns * -webkit-appearance: ; * -moz-appearance: ; * appearance: ; * * @example * .selector { * @include x-appearance(button); * } */ /** * @description * Generates `background-size` output for a given element. * * @author drublic * * @link caniuse http://caniuse.com/background-img-opts * @link spec http://www.w3.org/TR/css3-background/ * * @param value * @returns * -webkit-background-size: $args; * background-size: $args; * * @example * .selector { * @include x-background-size(100% auto); * } */ /** * @description * Generates cross-browser-compatible `border-radius` for a given element * * @author drublic * * @link caniuse http://caniuse.com/border-radius * @link spec http://www.w3.org/TR/css3-background/#corners * * @param values * @returns * -webkit-border-radius: ; * border-radius: ; * * @example * .selector { * @include x-border-radius(20px 10px); * } */ /** * @description * Generates cross-browser-compatible `box-shadow` for a given element * * @author drublic * * @link caniuse http://caniuse.com/css-boxshadow * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow * * @param values * @returns * -webkit-box-shadow: ; * box-shadow: ; * * @example * .selector { * @include x-box-shadow(5px 5px 10px 5px #aaa); * } */ /** * @description * Generates cross-browser-compatible `box-sizing` output for a given element. * * @author drublic * * @link caniuse * @link spec * * @param type * @returns * -webkit-box-sizing: ; * -moz-box-sizing: ; * box-sizing: ; * * @example * .selector { * @include x-box-sizing; * } */ /** * @description * These mixins generates Media Queries * * @author drublic * * @link caniuse http://caniuse.com/#feat=css-mediaqueries * @link spec http://www.w3.org/TR/css3-mediaqueries/ * * Note: Please use the CSS unit `em` for device-width in order to stay * responsive. */ /** * @param device-width {number} * @content * @returns * @media screen and (min-width: ) { * * } * * @example * .selector { * x-at-least(40em) { width: 60%; } * } */ /** * @param device-width {number} * @content * @returns * @media screen and (max-width: ) { * * } * * @example * .selector { * x-until(40em) { width: 100%; } * } */ /** * @author romamatusevich * * @param point{string}, bp-mobile-width{number}, bp-tablet-width{number} * @content * @returns * @media (max-width: ) { * * } * * @example * .selector { * x-breakpoints(mobile, 320px) { width: 100%; } * } */ /** * @description * Generates `calc` function which allows mathematical expressions for a given property * * @author romamatusevich * * @link spec http://www.w3.org/TR/css3-values/#calc * @link caniuse http://caniuse.com/calc * * @param property * @param expression * * @returns * : -webkit-calc(); * : calc(); * * @example * .selector { * @include x-calc(width, "600px - 2em"); * } */ /** * @description * Generates flexbox properties for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/ * @link spec http://www.w3.org/TR/css3-flexbox/ */ /** * @returns * display: -webkit-box; * display: -moz-box; * display: -ms-flexbox; * display: -webkit-flex; * display: flex; * * @example * .selector { * @include x-display-flex; * } */ /** * @param values * @returns * -webkit-box-flex: ; * -moz-box-flex: ; * -webkit-flex: ; * -ms-flex: ; * flex: ; * * @example * .selector { * @include x-flex(1 1 auto); * } */ /** * @param value * @returns * -webkit-box-ordinal-group: ; * -moz-box-ordinal-group: ; * -ms-flex-order: ; * -webkit-order: ; * order: ; * * @example * .selector { * @include x-order(1); * } */ /** * @param value * @returns * -webkit-flex-wrap: ; * -ms-flex-wrap: ; * flex-wrap: ; * * @example * .selector { * @include x-flex-wrap(wrap); * } */ /** * @param value * @returns * -webkit-align-content: ; * -moz-align-content: ; * -ms-flex-line-pack: ; * align-content: ; * @example * .selector { * @include x-align-content(center); * } */ /** * @param value * @returns * -webkit-box-direction: ; * -moz-box-direction: ; * -webkit-box-orient: ; * -moz-box-orient: ; * -webkit-flex-direction: ; * -moz-flex-direction: ; * -ms-flex-direction: ; * flex-direction: ; * @example * .selector { * @include x-flex-direction(row-reverse); * } */ /* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */ /** * @description * Generates a linear gradient for a given element with a fallback color. * * @author drublic * * @link caniuse * @link spec * * @dependency helper-gradient-angle * @param direction {'to bottom'|'to right'|'to top'|'to left'|} * @param fallback {color} * @param from {color} * @param to {color} * @default 'to bottom', #ccc, #ccc, #aaa * * @returns * background-color: ; * background-image: -webkit-gradient(linear, , from(), to()); * background-image: -webkit-linear-gradient(, , ); * background-image: linear-gradient(, , ); * * @example * .selector { * @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb); * } * * Note: By default this linear-gradient-mixin encourages people to use the * latest CSS-syntax for gradients. */ /** * @description * This mixin generates multiple backgrounds * * @author drublic * * @link caniuse http://caniuse.com/css-gradients * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients */ /* * A function for prefixing gradients * * @param mode {'webkit-old'|'webkit'|''} * @param gradient * @returns * --linear-gradient(); */ /* * Generates multiple backgrounds * * @param backgrounds {list} * * @example * .selector { * @include x-multiple-backgrounds( * rgba(0, 0, 0, 0.3), * url('../img/html5_logo.png') top right no-repeat, * (linear-gradient, to bottom, #aaa, #ddd) * ); * } */ /** * @description * This mixin creates (endless) multiple color stops in gradients just with one * call for the mixin. * * @author drublic * * @link caniuse http://caniuse.com/css-gradients * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients * * @param stops {list} * @returns * background-image: -webkit-linear-gradient(top, , , ..., ); * background-image: linear-gradient(to bottom, , , ..., ); * * @example * .selector { * @include x-multiple-colored-gradient( * "top", * #f22 0%, * #f2f 15%, * #22f 30%, * #2ff 45%, * #2f2 60%, * #2f2 75%, * #ff2 90%, * #f22 100% * ); * } * * Note: This mixis does not define a fallback-color for your background as it * is likely you want to add an image or something. Please specify one by * yourself. */ /* * Returns whether a value is a valid keyword direction * * @param value {String} * @returns * */ /** * @description * Generates `opacity` output for a given element and adds a filter for old IE. * * @author bartveneman * * @link caniuse http://caniuse.com/css-opacity * @link spec http://www.w3.org/TR/css3-color/#transparency * * @param value * @returns * opacity: ; * filter: alpha(opacity=); * * @example * .selector { * @include x-opacity(0.3); * } */ /** * @description * Generates `placeholder` content for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/ * * @returns * &::-webkit-input-placeholder { * : ; * ... * : ; * } * &::-moz-placeholder { * : ; * ... * : ; * } * &:-ms-input-placeholder { * : ; * ... * : ; * } * * @example * .selector { * @include x-placeholder { * color: #bada55; * font-weight: bold; * } * } */ /** * @description * This mixin enables you to use the CSS3 value `rem`, which lets you define * property sizes based on the root element's font-size. * * @author drublic * * @link caniuse http://caniuse.com/rem * @link spec http://www.w3.org/TR/css3-values/#relative0 * * Note: Depending on the font-size of the root-element `rem` calculates a * property of a current element. The fallback solution accepts a * `default-font-size`-argument which is 16px by default. */ /* * Returns a number without unit. E.g. 30px -> 30 * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss * * @param value {String} * @returns * */ /* * Outputs properties that use rem with a px fallback. * It also takes px values and converts them to rem. * * @param property * @param values * @param default-font-size int optional * @returns * : px; * : rem; * * @example * .selector { * @include x-rem(font-size, 1.3); * @include x-rem(padding, 20px); * } */ /** * @description * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible * `tab-size` output. * * @author drublic * * @link caniuse http://caniuse.com/css3-tabsize * @link spec http://dev.w3.org/csswg/css-text/#tab-size1 * * @param value int optional * @default 4 * @returns * -moz-tab-size: ; * tab-size: ; * * @example * .selector { * @include x-tab-size(4); * } */ /** * @description * Generates cross-browser-compatible `transform` for a given element * * @author drublic * * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d * @link spec * * @param values * @returns * -webkit-transform: ; * -ms-transform: ; * transform: ; * * @example * .selector { * @include x-transform(rotate(1deg)); * } */ /** * @description * Generates cross-browser-compatible `transition` output for a given element. * * @author drublic * * @link caniuse http://caniuse.com/css-transitions * @link spec * * @param values * @returns * -webkit-transition: ; * transition: ; * * @example * .selector { * @include x-transition(background 0.3s ease-in); * } */ /** * @description * Disables selection of content of a given element * * @author drublic * * @link caniuse http://caniuse.com/user-select-none * * @param value none|auto optional * @default none * @returns * -webkit-user-select: ; * -moz-user-select: ; * -ms-user-select: ; * user-select: ; * * @example * .selector { * @include x-user-select; * } */ /* TEXT SHADOW */ .sidebar { float: left; width: 27.08333%; } .content { float: left; width: 64.58333%; margin-left: 8.33333%; } .half { float: left; width: 50%; } .third { float: left; width: 33.33333%; } .fourth { float: left; width: 25%; } .fifth { float: left; width: 20%; } .sixth { float: left; width: 16.66667%; } /** * @description * Generates keyframe animations * * @author drublic * * @link caniuse http://caniuse.com/#feat=css-animation * @link spec http://www.w3.org/TR/css3-animations/ * * @param values * @returns * -webkit-animation: ; * animation: ; * * @example * .selector { * @include x-animation(jump 1s ease-out); * } */ /* * @example * @include x-keyframes(jump) { * from { top: 0; } * to { top: -10px; } * } */ /** * @description * Generates `appearance` for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance * @link css-tricks http://css-tricks.com/almanac/properties/a/appearance/ * @link spec http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance * * @param value * @returns * -webkit-appearance: ; * -moz-appearance: ; * appearance: ; * * @example * .selector { * @include x-appearance(button); * } */ /** * @description * Generates `background-size` output for a given element. * * @author drublic * * @link caniuse http://caniuse.com/background-img-opts * @link spec http://www.w3.org/TR/css3-background/ * * @param value * @returns * -webkit-background-size: $args; * background-size: $args; * * @example * .selector { * @include x-background-size(100% auto); * } */ /** * @description * Generates cross-browser-compatible `border-radius` for a given element * * @author drublic * * @link caniuse http://caniuse.com/border-radius * @link spec http://www.w3.org/TR/css3-background/#corners * * @param values * @returns * -webkit-border-radius: ; * border-radius: ; * * @example * .selector { * @include x-border-radius(20px 10px); * } */ /** * @description * Generates cross-browser-compatible `box-shadow` for a given element * * @author drublic * * @link caniuse http://caniuse.com/css-boxshadow * @link spec http://www.w3.org/TR/css3-background/#the-box-shadow * * @param values * @returns * -webkit-box-shadow: ; * box-shadow: ; * * @example * .selector { * @include x-box-shadow(5px 5px 10px 5px #aaa); * } */ /** * @description * Generates cross-browser-compatible `box-sizing` output for a given element. * * @author drublic * * @link caniuse * @link spec * * @param type * @returns * -webkit-box-sizing: ; * -moz-box-sizing: ; * box-sizing: ; * * @example * .selector { * @include x-box-sizing; * } */ /** * @description * These mixins generates Media Queries * * @author drublic * * @link caniuse http://caniuse.com/#feat=css-mediaqueries * @link spec http://www.w3.org/TR/css3-mediaqueries/ * * Note: Please use the CSS unit `em` for device-width in order to stay * responsive. */ /** * @param device-width {number} * @content * @returns * @media screen and (min-width: ) { * * } * * @example * .selector { * x-at-least(40em) { width: 60%; } * } */ /** * @param device-width {number} * @content * @returns * @media screen and (max-width: ) { * * } * * @example * .selector { * x-until(40em) { width: 100%; } * } */ /** * @author romamatusevich * * @param point{string}, bp-mobile-width{number}, bp-tablet-width{number} * @content * @returns * @media (max-width: ) { * * } * * @example * .selector { * x-breakpoints(mobile, 320px) { width: 100%; } * } */ /** * @description * Generates `calc` function which allows mathematical expressions for a given property * * @author romamatusevich * * @link spec http://www.w3.org/TR/css3-values/#calc * @link caniuse http://caniuse.com/calc * * @param property * @param expression * * @returns * : -webkit-calc(); * : calc(); * * @example * .selector { * @include x-calc(width, "600px - 2em"); * } */ /** * @description * Generates flexbox properties for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes * @link css-tricks http://css-tricks.com/snippets/css/a-guide-to-flexbox/ * @link spec http://www.w3.org/TR/css3-flexbox/ */ /** * @returns * display: -webkit-box; * display: -moz-box; * display: -ms-flexbox; * display: -webkit-flex; * display: flex; * * @example * .selector { * @include x-display-flex; * } */ /** * @param values * @returns * -webkit-box-flex: ; * -moz-box-flex: ; * -webkit-flex: ; * -ms-flex: ; * flex: ; * * @example * .selector { * @include x-flex(1 1 auto); * } */ /** * @param value * @returns * -webkit-box-ordinal-group: ; * -moz-box-ordinal-group: ; * -ms-flex-order: ; * -webkit-order: ; * order: ; * * @example * .selector { * @include x-order(1); * } */ /** * @param value * @returns * -webkit-flex-wrap: ; * -ms-flex-wrap: ; * flex-wrap: ; * * @example * .selector { * @include x-flex-wrap(wrap); * } */ /** * @param value * @returns * -webkit-align-content: ; * -moz-align-content: ; * -ms-flex-line-pack: ; * align-content: ; * @example * .selector { * @include x-align-content(center); * } */ /** * @param value * @returns * -webkit-box-direction: ; * -moz-box-direction: ; * -webkit-box-orient: ; * -moz-box-orient: ; * -webkit-flex-direction: ; * -moz-flex-direction: ; * -ms-flex-direction: ; * flex-direction: ; * @example * .selector { * @include x-flex-direction(row-reverse); * } */ /* ToDo: add flex-grow, flex-shrink, flex-basis, flex-flow, align-items, align-self, justify-content mixins */ /** * @description * Generates a linear gradient for a given element with a fallback color. * * @author drublic * * @link caniuse * @link spec * * @dependency helper-gradient-angle * @param direction {'to bottom'|'to right'|'to top'|'to left'|} * @param fallback {color} * @param from {color} * @param to {color} * @default 'to bottom', #ccc, #ccc, #aaa * * @returns * background-color: ; * background-image: -webkit-gradient(linear, , from(), to()); * background-image: -webkit-linear-gradient(, , ); * background-image: linear-gradient(, , ); * * @example * .selector { * @include x-linear-gradient("to bottom", #ccc, #ddd, #bbb); * } * * Note: By default this linear-gradient-mixin encourages people to use the * latest CSS-syntax for gradients. */ /** * @description * This mixin generates multiple backgrounds * * @author drublic * * @link caniuse http://caniuse.com/css-gradients * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients */ /* * A function for prefixing gradients * * @param mode {'webkit-old'|'webkit'|''} * @param gradient * @returns * --linear-gradient(); */ /* * Generates multiple backgrounds * * @param backgrounds {list} * * @example * .selector { * @include x-multiple-backgrounds( * rgba(0, 0, 0, 0.3), * url('../img/html5_logo.png') top right no-repeat, * (linear-gradient, to bottom, #aaa, #ddd) * ); * } */ /** * @description * This mixin creates (endless) multiple color stops in gradients just with one * call for the mixin. * * @author drublic * * @link caniuse http://caniuse.com/css-gradients * @link spec http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients * * @param stops {list} * @returns * background-image: -webkit-linear-gradient(top, , , ..., ); * background-image: linear-gradient(to bottom, , , ..., ); * * @example * .selector { * @include x-multiple-colored-gradient( * "top", * #f22 0%, * #f2f 15%, * #22f 30%, * #2ff 45%, * #2f2 60%, * #2f2 75%, * #ff2 90%, * #f22 100% * ); * } * * Note: This mixis does not define a fallback-color for your background as it * is likely you want to add an image or something. Please specify one by * yourself. */ /* * Returns whether a value is a valid keyword direction * * @param value {String} * @returns * */ /** * @description * Generates `opacity` output for a given element and adds a filter for old IE. * * @author bartveneman * * @link caniuse http://caniuse.com/css-opacity * @link spec http://www.w3.org/TR/css3-color/#transparency * * @param value * @returns * opacity: ; * filter: alpha(opacity=); * * @example * .selector { * @include x-opacity(0.3); * } */ /** * @description * Generates `placeholder` content for a given element * * @author romamatusevich * * @link MDN https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder * @link css-tricks http://css-tricks.com/snippets/css/style-placeholder-text/ * * @returns * &::-webkit-input-placeholder { * : ; * ... * : ; * } * &::-moz-placeholder { * : ; * ... * : ; * } * &:-ms-input-placeholder { * : ; * ... * : ; * } * * @example * .selector { * @include x-placeholder { * color: #bada55; * font-weight: bold; * } * } */ /** * @description * This mixin enables you to use the CSS3 value `rem`, which lets you define * property sizes based on the root element's font-size. * * @author drublic * * @link caniuse http://caniuse.com/rem * @link spec http://www.w3.org/TR/css3-values/#relative0 * * Note: Depending on the font-size of the root-element `rem` calculates a * property of a current element. The fallback solution accepts a * `default-font-size`-argument which is 16px by default. */ /* * Returns a number without unit. E.g. 30px -> 30 * Borrowed from https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss * * @param value {String} * @returns * */ /* * Outputs properties that use rem with a px fallback. * It also takes px values and converts them to rem. * * @param property * @param values * @param default-font-size int optional * @returns * : px; * : rem; * * @example * .selector { * @include x-rem(font-size, 1.3); * @include x-rem(padding, 20px); * } */ /** * @description * Sass-mixin for CSS property `tab-size`, generates cross-browser-compatible * `tab-size` output. * * @author drublic * * @link caniuse http://caniuse.com/css3-tabsize * @link spec http://dev.w3.org/csswg/css-text/#tab-size1 * * @param value int optional * @default 4 * @returns * -moz-tab-size: ; * tab-size: ; * * @example * .selector { * @include x-tab-size(4); * } */ /** * @description * Generates cross-browser-compatible `transform` for a given element * * @author drublic * * @link caniuse http://caniuse.com/transforms2d http://caniuse.com/transforms3d * @link spec * * @param values * @returns * -webkit-transform: ; * -ms-transform: ; * transform: ; * * @example * .selector { * @include x-transform(rotate(1deg)); * } */ /** * @description * Generates cross-browser-compatible `transition` output for a given element. * * @author drublic * * @link caniuse http://caniuse.com/css-transitions * @link spec * * @param values * @returns * -webkit-transition: ; * transition: ; * * @example * .selector { * @include x-transition(background 0.3s ease-in); * } */ /** * @description * Disables selection of content of a given element * * @author drublic * * @link caniuse http://caniuse.com/user-select-none * * @param value none|auto optional * @default none * @returns * -webkit-user-select: ; * -moz-user-select: ; * -ms-user-select: ; * user-select: ; * * @example * .selector { * @include x-user-select; * } */ /* TEXT SHADOW */ .hidden { display: none !important; } .centered { position: absolute !important; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .disabled { opacity: 0.4; cursor: not-allowed !important; } .clear { clear: both; } .center { text-align: center; } p.upgrade { font-size: 1em; line-height: 2.3em; margin: 0; } p.upgrade a { color: #8CC63E; } p.upgrade a:hover { color: #71a130; } .spin, .loading-spin, .data-set-picker .sets .loading .loading-spin, #preview .loading-spin, #set-view .importingNotice .loading-spin { -webkit-animation: spin .6s infinite linear; -moz-animation: spin .6s infinite linear; -ms-animation: spin .6s infinite linear; -o-animation: spin .6s infinite linear; animation: spin .6s infinite linear; } .loading-spin { border-bottom: 2px solid rgba(0, 0, 0, 0); border-left: 2px solid rgba(0, 0, 0, 0); border-right: 2px solid #1B22FA; border-top: 2px solid #1B22FA; border-radius: 100%; height: 20px; width: 20px; } @keyframes "spin" { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes "spin" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-ms-keyframes "spin" { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes "spin" { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(359deg); transform: rotate(359deg); } } .animated, .list-empty i, ul.bigChoices li, .datasetCreateTypes li.rejected, #create-form .uploadDropZone.hover .fileupload .blank { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .animated.hinge, .list-empty i.hinge, ul.bigChoices li.hinge, .datasetCreateTypes li.hinge.rejected, #create-form .uploadDropZone.hover .fileupload .hinge.blank { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { opacity: 0; /* make things invisible upon start */ -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; } .fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .fade-in.two { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; } .fade-in.three { -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s; } .fade { -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -ms-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } @-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } @-moz-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } @-ms-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 1000px 1000px; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -moz-transform: scale(1); } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -o-transform: scale(1); } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes wiggle { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes wiggle { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle { -webkit-animation-name: wiggle; -moz-animation-name: wiggle; -o-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse, #create-form .uploadDropZone.hover .fileupload .blank { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp, .list-empty i { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight, ul.bigChoices li { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(0.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(0.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(0.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight, .datasetCreateTypes li.rejected { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } /*** Spectrum Colorpicker v1.1.1 https://github.com/bgrins/spectrum Author: Brian Grinstead License: MIT ***/ .sp-container { position: absolute; top: 0; left: 0; display: inline-block; *display: inline; *zoom: 1; /* https://github.com/bgrins/spectrum/issues/40 */ z-index: 9999994; overflow: hidden; } .sp-container.sp-flat { position: relative; } /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ .sp-top { position: relative; width: 100%; display: inline-block; } .sp-top-inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sp-color { position: absolute; top: 0; left: 0; bottom: 0; right: 10%; border-radius: 4px; } .sp-hue { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 12px; border-radius: 8px; } .sp-fill { padding-top: 80%; } .sp-sat, .sp-val { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-border-radius: 4px; border-radius: 4px; } .sp-alpha-enabled .sp-top { margin-bottom: 24px; } .sp-alpha-enabled .sp-alpha { display: block; } .sp-alpha-handle { position: absolute; top: 0; bottom: -2px; height: 12px; width: 12px; left: 50%; cursor: pointer; background: none; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0.5px 0.5px #DCDFE1; } .sp-alpha { display: none; position: absolute; bottom: -24px; right: 0; left: 0; height: 12px; } /* Don't allow text selection */ .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { -webkit-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; } .sp-container.sp-input-disabled .sp-input-container { display: none; } .sp-container.sp-buttons-disabled .sp-button-container { display: none; } .sp-palette-only .sp-picker-container { display: none; } .sp-palette-disabled .sp-palette-container { display: none; } .sp-initial-disabled .sp-initial { display: none; } /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ .sp-sat { background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); } .sp-val { background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); } .sp-hue { background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } /* IE filters do not support multiple color stops. Generate 6 divs, line them up, and do two color gradients for each. Yes, really. */ .sp-1 { height: 17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); } .sp-2 { height: 16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); } .sp-3 { height: 17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); } .sp-4 { height: 17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); } .sp-5 { height: 16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); } .sp-6 { height: 17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); } .sp-hidden { display: none !important; } .sp-cancel { display: none; } /* Clearfix hack */ .sp-cf:before, .sp-cf:after { content: ""; display: table; } .sp-cf:after { clear: both; } .sp-cf { *zoom: 1; } /* Mobile devices, make hue slider bigger so it is easier to slide */ @media (max-device-width: 480px) { .sp-color { right: 10%; } .sp-hue { left: 63%; } .sp-fill { padding-top: 60%; } } .sp-dragger { border-radius: 50%; height: 12px; width: 12px; border: 2px solid #fff; background: transparent; cursor: pointer; position: absolute; margin: 2px; top: 0; left: 0; box-shadow: 0 0 0.5px 0.5px #DCDFE1; } .sp-slider { position: absolute; top: 0; cursor: pointer; height: 12px; width: 12px; background: none; border: 2px solid #fff; left: 0; right: 0; border-radius: 50%; box-shadow: 0 0 0.5px 0.5px #DCDFE1; transform: rotate(-90deg); } /* Basic display options (colors, fonts, global widths) */ .sp-container { background-color: #FFFFFF; padding: 0; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #DCDFE1; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.05); width: 238px; } .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue { font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; color: #000000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .sp-container [type="text"], .sp-container button [type="text"], .sp-container input [type="text"], .sp-color [type="text"], .sp-hue [type="text"] { height: 28px; width: 100%; margin: 0; } .sp-top { margin-bottom: 3px; } /* Input */ .sp-input-container { float: right; width: 100px; margin-bottom: 4px; } .sp-initial-disabled .sp-input-container { width: 100%; } .sp-input { font-size: 12px !important; border: 1px inset; padding: 4px 5px; margin: 0; width: 100%; background: transparent; border-radius: 3px; color: #222; } .sp-input:focus { border: 1px solid orange; } .sp-input.sp-validation-error { border: 1px solid red; background: #fdd; } .sp-picker-container, .sp-palette-container { position: relative; padding: 10px 10px 0; } /* Palettes */ .sp-palette { margin: -2px; } .sp-palette .sp-thumb-el { display: block; position: relative; float: left; width: 25px; height: 25px; margin: 2px; border: 4px solid #FFFFFF; border-radius: 8px; cursor: pointer; } .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { box-shadow: 0px 0px 1px 1px #1B22FA; } .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { background: none !important; } .sp-thumb-el { position: relative; } /* Initial */ .sp-initial { float: left; } .sp-initial span { width: 30px; height: 25px; border: none; display: block; float: left; margin: 0; } /* Buttons */ .sp-button-container { float: right; padding: 10px 0; } .sp-button-container > * { margin: 0 5px; } .sp-button-container > *:first-child { margin-left: 0; } .sp-button-container > *:last-child { margin-right: 0; } /* Replacer (the little preview div that shows up instead of the ) */ .sp-replacer { margin: 0; overflow: hidden; cursor: pointer; display: inline-block; *zoom: 1; *display: inline; border-radius: 4px; color: #fff; vertical-align: middle; } .sp-replacer:hover, .sp-replacer.sp-active { border-color: #F0C49B; color: #111; } .sp-replacer.sp-disabled { cursor: default; border-color: silver; color: silver; } .sp-dd { padding: 2px 0; height: 16px; line-height: 25px; float: left; font-size: 15px; } .sp-dd:before { content: "\e61e"; font-family: "chart-blocks"; padding: 10px; font-weight: 200; } .sp-preview { position: relative; width: 30px; height: 30px; margin-right: 5px; float: left; z-index: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); } .sp-palette { *width: 220px; max-width: 220px; } .sp-container { padding-bottom: 0; } /* Buttons: http://hellohappy.org/css3-buttons/ */ .sp-container button { padding: 4px 12px; color: white; display: inline-block; text-align: center; background-color: #1B22FA; font-size: 14px; line-height: 20px; border: none; cursor: pointer; -webkit-border-radius: 6px; border-radius: 6px; } .sp-container button:hover { background-color: #0912C5; } .sp-container button:active { background-color: #0912C5; } button.sp-remove { background-color: #FF0000; } button.sp-remove:hover { background-color: #e60000; } button.sp-remove:active { background-color: #e60000; } .sp-cancel { font-size: 14px; line-height: 20px; color: #000000 !important; padding: 4px 0; vertical-align: middle; text-decoration: none; margin-right: 13px; } .sp-cancel:hover { color: #d93f3f !important; text-decoration: underline; } .sp-cancel, .sp-choose { text-transform: capitalize; } .sp-rgb, .sp-hex { display: flex; align-items: center; padding: 0.444rem 0; } .sp-rgb label, .sp-hex label { font-size: 0.778rem; line-height: 1.111rem; flex: 1; margin: 0; margin-left: 0.444rem; } .sp-rgb *, .sp-hex * { display: inline-block; } .sp-rgb input[type="text"] { margin-right: 0.444rem; } .sp-rgb input[type="text"]:last-child { margin-right: 0; } .sp-palette span:hover, .sp-palette span.sp-thumb-active { border-color: #fff; } .sp-preview, .sp-alpha, .sp-thumb-el { position: relative; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); } .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { display: block; position: absolute; border-radius: 4px; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); } .sp-alpha-inner { border-radius: 8px; } .sp-palette .sp-thumb-inner { background-position: 50% 50%; background-repeat: no-repeat; } .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); } .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); } .sp-rgb { margin-top: 10px; } .sp-rgb input[type="text"] { display: inline-block; width: 41px; padding: 0; text-align: center; } .sp-hex input[type="text"] { display: inline-block; width: 74px; padding: 0; text-align: center; margin-right: 0.444rem; } .sp-hex input[type="text"]:last-child { margin-right: 0; } /* IMPORTANT: In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes. No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS classes should alter those! */ .slick-header.ui-state-default, .slick-headerrow.ui-state-default { width: 100%; overflow: hidden; border-left: 0px; } .slick-header-columns, .slick-headerrow-columns { position: relative; white-space: nowrap; cursor: default; overflow: hidden; } .slick-header-column.ui-state-default { position: relative; display: inline-block; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; height: 16px; line-height: 16px; margin: 0; padding: 4px; border-right: 1px solid silver; border-left: 0px; border-top: 0px; border-bottom: 0px; float: left; } .slick-headerrow-column.ui-state-default { padding: 4px; } .slick-header-column-sorted { font-style: italic; } .slick-sort-indicator { display: inline-block; width: 8px; height: 5px; margin-left: 4px; margin-top: 6px; float: left; } .slick-sort-indicator-desc { background: url(images/sort-desc.gif); } .slick-sort-indicator-asc { background: url(images/sort-asc.gif); } .slick-resizable-handle { position: absolute; font-size: 0.1px; display: block; cursor: col-resize; width: 4px; right: 0px; top: 0; height: 100%; } .slick-sortable-placeholder { background: silver; } .grid-canvas { position: relative; outline: 0; } .slick-row.ui-widget-content, .slick-row.ui-state-active { position: absolute; border: 0px; width: 100%; } .slick-cell, .slick-headerrow-column { position: absolute; border: 1px solid transparent; border-right: 1px dotted silver; border-bottom-color: silver; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; vertical-align: middle; z-index: 1; padding: 1px 2px 2px 1px; margin: 0; white-space: nowrap; cursor: default; } .slick-group-toggle { display: inline-block; } .slick-cell.highlighted { background: lightskyblue; background: rgba(0, 0, 255, 0.2); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .slick-cell.flashing { border: 1px solid red !important; } .slick-cell.editable { z-index: 11; overflow: visible; background: white; border-color: black; border-style: solid; } .slick-cell:focus { outline: none; } .slick-reorder-proxy { display: inline-block; background: blue; opacity: 0.15; filter: alpha(opacity=15); cursor: move; } .slick-reorder-guide { display: inline-block; height: 2px; background: blue; opacity: 0.7; filter: alpha(opacity=70); } .slick-selection { z-index: 10; position: absolute; border: 2px dashed black; } /* General Mobile Touch ----------- */ .mobile-touch-overflow { overflow: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .mobile-touch-overflow, .mobile-touch-overflow * { /* some level of transform keeps elements from blinking out of visibility on iOS */ -webkit-transform: rotateY(0); } .icon-pro { -webkit-border-radius: 2px; border-radius: 2px; background-color: #fff; color: #3F602B; margin-left: 5px; padding: 4px 6px; line-height: 1em; font-size: 0.8em; } .colorManager { display: flex; align-items: center; max-width: 360px; } .colorManager * { display: inline-block; } .colorManager .options { margin-left: 6px; width: auto; } .colorManager .add { color: #000000; display: flex; align-items: center; justify-content: center; position: relative; padding: 5px 1px; } .colorManager .add svg { fill: currentColor; transition: fill 0.3s; } .colorManager .add:hover { color: #1B22FA; } .colorManager .sp-replacer { float: left; } .colorManager .colors .sp-replacer { float: left !important; } .colorManager .colors .color { position: relative; display: inline-block; width: 23px; height: 23px; cursor: pointer; margin-left: 5px; border: 1px solid #F2F4F5; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; } .colorManager .colors .color:after { position: absolute; content: ""; width: 50%; height: 100%; right: 0; top: 0; background: rgba(0, 0, 0, 0.2); -webkit-border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0; } .colorManager .colors .color.selected, .colorManager .colors .color:hover { border: 1px solid #888888; } .sp-replacer .sp-preview { margin: 0; } .sp-replacer .sp-dd { display: none; } #editor-toolbar { position: absolute; right: 2.25rem 3.125rem; top: 2.25rem 3.125rem; color: #818181; -webkit-border-radius: 2px; border-radius: 2px; } #editor-toolbar li { display: inline-block; } #editor-toolbar .action > li { position: relative; border-left: solid 1px #F2F4F5; background: #fff; margin: 0; vertical-align: middle; -webkit-transition: background 0.3s; transition: background 0.3s; } #editor-toolbar .action > li:first-child { -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; border-left: none; } #editor-toolbar .action > li:last-child { -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } #editor-toolbar .action > li:hover { color: #1B22FA; background: #F2F4F5; } #editor-toolbar .action > li input { width: 25px; height: 30px; background: none; padding: 0; border: none; margin: 0 20px; } #editor-toolbar .action > li .percent { position: absolute; top: 8px; right: 10px; } #editor-toolbar .action > li a { font-size: 1.2em; padding: 5px 10px; cursor: pointer; line-height: 30px; color: #818181; } #editor-toolbar .action > li a:hover { color: #1B22FA; } #editor-toolbar .action > li a i { font-size: 0.8em; } #editor-toolbar .zoom > li { margin-right: -3px; } #editor-toolbar .history { margin-right: 30px; } #editor-toolbar .history > li { background: #eee; } #editor-toolbar .history > li a { cursor: default; } #editor-toolbar .history > li:hover { background: #eee; } #editor-toolbar .history > li:hover a { color: #818181; } #editor-toolbar .history > li.active { background: #fff; } #editor-toolbar .history > li.active a { cursor: pointer; } #editor-toolbar .history > li.active:hover { background: #F2F4F5; } #editor-toolbar .history > li.active:hover a { color: #1B22FA; } #editor-toolbar .history > li:first-child { -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; border-left: none; } #editor-toolbar .history > li:last-child { -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } #chart-tools .theme { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; padding: 4px 4px 4px 8px; background: #fff; border: 1px solid #DCDFE1; color: #818181; cursor: pointer; -webkit-border-radius: 6px; border-radius: 6px; -webkit-transition: border-color 0.3s, color 0.3s; transition: border-color 0.3s, color 0.3s; } #chart-tools .theme:hover { border-color: #1B22FA; } #chart-tools .theme .theme-icon { display: flex; align-items: center; margin: 0 8px 0 0; } #chart-tools .theme .theme-colors { display: block; float: right; width: auto; height: 20px; -webkit-border-radius: 4px; border-radius: 4px; overflow: hidden; } #chart-tools .theme .theme-colors .color { display: block; float: left; width: 20px; height: 20px; text-indent: -9999px; } .series-chooser { overflow: hidden; padding: 0; } .series-chooser .add > .name { padding: 12px 10px; } .series-chooser .add > .name:before { display: none; } .series-chooser .name, .series-chooser .addSeries { display: flex; align-items: center; font-weight: 500; font-size: 1rem; line-height: 1.5rem; overflow: hidden; padding: 1.25rem; color: #000000; border-bottom: 1px solid #DCDFE1; position: relative; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .series-chooser .name:hover, .series-chooser .name:focus, .series-chooser .addSeries:hover, .series-chooser .addSeries:focus { background-color: #F5F6F7; } .series-chooser .axis.active .name, .series-chooser .series.active .name { border-bottom-color: transparent; } .series-chooser .axis.active .name .toggle-icon, .series-chooser .series.active .name .toggle-icon { transform: rotate(180deg); } .series-chooser .axis .remove, .series-chooser .series .remove { opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .series-chooser .axis .remove svg, .series-chooser .series .remove svg { -webkit-transition: fill 0.3s ease-in-out; transition: fill 0.3s ease-in-out; } .series-chooser .axis .name:hover .remove, .series-chooser .series .name:hover .remove { opacity: 1; } .series-chooser .name a { color: #818181; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .series-chooser .name .toggle-icon { margin-left: 1.25rem; } .series-chooser .name .switch { margin: 0; } .series-chooser .name .series-name, .series-chooser .name .item-name { display: flex; align-items: center; flex: 1; } .series-chooser .name .series-name .remove, .series-chooser .name .item-name .remove { display: flex; align-items: center; margin: 0 0.5rem; } .series-chooser .name .series-name .remove:hover svg, .series-chooser .name .item-name .remove:hover svg { fill: #FF0000; } #chart-toolbar { position: relative; top: 50px; padding: 0.438rem 0; width: 56px; z-index: 2; -webkit-transition: all ease-in 0.4s; transition: all ease-in 0.4s; } #chart-toolbar:empty { display: none; } #chart-toolbar > li { float: none; margin: 0.563rem 0; position: relative; cursor: pointer; z-index: initial; -webkit-transition: background 0.3s; transition: background 0.3s; } #chart-toolbar > li.active { color: #1B22FA; } #chart-toolbar > li.active a { color: inherit; } #chart-toolbar > li:hover a { background-color: #F5F6F7; } #chart-toolbar > li > a { display: flex; align-items: center; justify-content: center; color: #979A9B; height: 30px; width: 30px; padding: 0; margin: auto; border-radius: 4px; -webkit-transition: color 0.3s; transition: color 0.3s; } #chart-toolbar > li > a svg { fill: currentColor; transition: fill 0.3s; } #chart-toolbar > li > a .ui-tooltip { top: auto; z-index: 100; } #chart-toolbar > li .icon-tool-data { width: 19px; height: 22px; } #chart-toolbar > li .icon-tool-chart { width: 22px; height: 22px; } #chart-toolbar > li .icon-tool-dimensions { width: 22px; height: 22px; } #chart-toolbar > li .icon-tool-axes { width: 22px; height: 22px; } #chart-toolbar [class^="icon-"], #chart-toolbar [class*=" icon-"] { display: inline-block; } @media (max-width: 599px) { #chart-toolbar { padding: 0; } #chart-toolbar:before { display: none; } #chart-toolbar li { padding: 0; text-align: center; } #chart-toolbar li span { display: none; } #chart-toolbar li a { text-align: center; display: inline-block; } #chart-toolbar li a [class^="icon-"], #chart-toolbar li a [class*=" icon-"] { margin: 0; } } #chart-toolbox { display: none; } .chart-edit #chart-toolbox { display: block; } #chart-toolbox > .tool { padding: 0; font-size: 10px; position: fixed; opacity: 0; top: 50px; left: 56px; background: #ffffff; min-height: calc(100% - 50px); max-height: calc(100% - 50px); width: 360px; overflow-y: auto; overflow-x: hidden; border: 1px solid #DCDFE1; border-top: none; visibility: hidden; pointer-events: none; color: #818181; -webkit-transition: opacity ease-in-out 0.3s; transition: opacity ease-in-out 0.3s; } #chart-toolbox > .tool.active { opacity: 1; visibility: visible; pointer-events: initial; } #chart-toolbox > .tool.data .series-chooser { height: 100%; } #chart-toolbox > .tool.data .series-chooser .option-group { overflow: auto; } #chart-toolbox > .tool h2, #chart-toolbox > .tool h3 { color: #000000; font-weight: 500; } #chart-toolbox > .tool h2 { font-size: 1rem; line-height: 1.5rem; margin: 0; margin: 1.25rem; margin-bottom: 0; padding: 0; } #chart-toolbox > .tool h2 .switch { margin: 0; } #chart-toolbox > .tool h3 { font-size: 0.875rem; line-height: 1.25rem; margin: 0; margin-bottom: 16px; } #chart-toolbox > .tool .tool-name { color: #000000; font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; padding: 1.25rem; letter-spacing: -0.01em; } #chart-toolbox > .tool .well div { display: none; } #chart-toolbox > .tool .well div.active { display: block; } #chart-toolbox > .tool .chart-type .chart-type-list { width: 360px; } #chart-toolbox > .tool .tooltipDemo { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; padding: 1.8rem 0; background-color: #F5F6F7; border-radius: 8px; } #chart-toolbox > .tool .tooltipDemo svg { border-radius: 8px; } #chart-toolbox > .tool .addSeries { color: #000000; display: flex; align-items: center; font-size: 1rem; line-height: 1.5rem; padding: 1.25rem; border-bottom: 1px solid #DCDFE1; } #chart-toolbox > .tool .addSeries svg { margin-left: auto; } #chart-toolbox > .tool .chart-grid__list { display: flex; margin: -8.5px; width: calc(360px - 1.25rem); } #chart-toolbox > .tool .chart-grid__list li { padding: 0 8.5px; width: 25%; cursor: pointer; } #chart-toolbox > .tool .chart-grid__list li.active .chart-grid__item { border-color: #1B22FA; } #chart-toolbox > .tool .chart-grid__item { position: relative; height: 0; content: ""; padding-top: 100%; border: 1px solid #DCDFE1; border-radius: 8px; width: 100%; transition: border-color 0.3s; } #chart-toolbox > .tool .chart-grid__item img { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; padding: 9px; z-index: 1; transform: translate(-50%, -50%); } #chart-toolbox .name .series-color { height: 18px; width: 18px; margin-right: 5px; display: inline-block; vertical-align: middle; -webkit-border-radius: 4px; border-radius: 4px; } #chart-toolbox .form { border-top: 1px dotted #eee; padding: 10px 0 20px 0; } #chart-toolbox fieldset { padding: 1.25rem; padding-bottom: 0; border-bottom: 1px solid #DCDFE1; width: 100%; } #chart-toolbox fieldset .element { display: flex; align-items: center; position: relative; margin-bottom: 1rem; } #chart-toolbox fieldset .element.charts { padding: 9px 0; } #chart-toolbox fieldset .element:last-child { border-bottom: none; } #chart-toolbox fieldset .element .link-ratio svg { transition: fill 0.3s; } #chart-toolbox fieldset .element .link-ratio.-linked svg { fill: #1B22FA; } #chart-toolbox fieldset .element .switch, #chart-toolbox fieldset .element .checkbox-list-item { margin-right: 0; } #chart-toolbox fieldset .element .switch { flex: none; margin-bottom: 0; } #chart-toolbox fieldset .element .note { font-size: 0.9em; line-height: 30px; } #chart-toolbox fieldset .element .select { position: relative; border: 1px solid #E9EBEC; margin-left: auto; display: inline-block; overflow: hidden; cursor: pointer; flex: 0 !important; -webkit-border-radius: 6px; border-radius: 6px; width: 156px; min-width: 156px; } #chart-toolbox fieldset .element .select:hover select { background-color: rgba(0, 0, 0, 0.05); } #chart-toolbox fieldset .element .select.font-size { width: 64px; min-width: 64px; margin: 0; } #chart-toolbox fieldset .element .select.font-style { width: 91px; min-width: 91px; margin: 0; } #chart-toolbox fieldset .element .select:after { position: absolute; top: 2px; right: 10px; z-index: -1; content: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.78462 4.78462C4.81224 4.81405 4.8456 4.83751 4.88265 4.85355C4.91969 4.86958 4.95963 4.87786 5 4.87786C5.04037 4.87786 5.08031 4.86958 5.11735 4.85355C5.1544 4.83751 5.18776 4.81405 5.21538 4.78462L9 1' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } #chart-toolbox fieldset .element .select > select { border: none; color: #000000; padding: 4px 25px 4px 8px; height: 28px; font-size: 0.875rem; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-appearance: none; text-overflow: ''; overflow: hidden; cursor: pointer; width: 100%; transition: background-color 0.3s; } #chart-toolbox fieldset .element .select select + select { margin-left: 0.5rem; } #chart-toolbox fieldset .element .sp-replacer { position: relative; margin-right: 0.5rem; height: 28px; width: 28px; border: 1px solid #DCDFE1; -webkit-border-radius: 6px; border-radius: 6px; } #chart-toolbox fieldset .element .sp-replacer:last-child { margin-right: 0; } #chart-toolbox fieldset .element .sp-replacer .sp-preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-border-radius: 4px; border-radius: 4px; height: 20px; width: 20px; overflow: hidden; } #chart-toolbox fieldset .element .sp-replacer .sp-preview-inner, #chart-toolbox fieldset .element .sp-replacer .sp-alpha-inner, #chart-toolbox fieldset .element .sp-replacer .sp-thumb-inner { background: none; } #chart-toolbox fieldset .element .sp-replacer .sp-dd { padding: 0; font-size: 10px; line-height: 20px; } #chart-toolbox fieldset .element .sp-replacer .sp-dd:before { padding: 5px; } #chart-toolbox fieldset .element input[type="text"], #chart-toolbox fieldset .element textarea { padding: 0 6px; color: #000000; background: none; position: relative; font-size: 0.875rem; padding: 4px 8px; height: 28px; border: 1px solid #E9EBEC; border-radius: 6px; min-width: 64px; width: 156px; margin: 0; transition: 0.3s border-color, background-color 0.3s; } #chart-toolbox fieldset .element input[type="text"] input[type="text"], #chart-toolbox fieldset .element textarea input[type="text"] { height: 20px; position: relative; } #chart-toolbox fieldset .element input[type="text"]:hover, #chart-toolbox fieldset .element textarea:hover { background-color: #F5F6F7; } #chart-toolbox fieldset .element input[type="text"]:focus, #chart-toolbox fieldset .element textarea:focus { color: #323232; border-color: #1B22FA; outline: 0; } .lt-ie9 #chart-toolbox fieldset .element input[type="text"], .lt-ie9 #chart-toolbox fieldset .element textarea { line-height: 18px; } #chart-toolbox fieldset .element textarea { padding: 8px 12px; } #chart-toolbox fieldset .element input[type="text"].input-small { width: 78px; } #chart-toolbox fieldset .element .slider-container .slider { display: none; } #chart-toolbox fieldset .element .slider-container input[type="text"] { width: 64px; } #chart-toolbox fieldset .element a.pickerTrigger { margin-left: 0.5rem; } #chart-toolbox fieldset .element a.pickerTrigger svg { position: relative; top: 5px; fill: #1B22FA; } #chart-toolbox fieldset .element input.pickerTrigger { width: 141px; } #chart-toolbox fieldset .element .icon-edit { float: right; height: 30px; line-height: 30px; } #chart-toolbox fieldset .element > textarea { padding: 4px 8px; height: 90px; line-height: 20px; resize: none; } #chart-toolbox fieldset .element > label:not(.checkmark):not(.switch):not(.font-size):not(.font-style), #chart-toolbox fieldset .element p { color: #979A9B; margin: 0; font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } #chart-toolbox fieldset .element > label:not(.checkmark):not(.switch):not(.font-size):not(.font-style) { flex: 1; } #chart-toolbox fieldset .element.groupby .select { width: 92px; min-width: 92px; } #chart-toolbox fieldset .element.groupby p { margin: 0 0.5rem; } #chart-toolbox fieldset .checkmark { margin-bottom: 0; } #chart-toolbox fieldset .checkmark input { display: none; } #chart-toolbox fieldset .checkmark__check { position: relative; display: block; height: 16px; width: 16px; border: 1px solid #DCDFE1; border-radius: 4px; cursor: pointer; background-color: #FFFFFF; transition: all 0.3s; } #chart-toolbox fieldset .checkmark__check:hover, #chart-toolbox fieldset .checkmark__check:focus { border-color: #1B22FA; box-shadow: 0 0 0 2px rgba(27, 0, 251, 0.5); } #chart-toolbox fieldset .checkmark__check::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; content: ''; background-size: 14px 10px; background-repeat: no-repeat; background-position: center; } #chart-toolbox fieldset .checkmark input:checked ~ .checkmark__check::after { background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.03567 9.58067L1.05442 5.59942C0.997537 5.54254 0.952415 5.47502 0.92163 5.4007C0.890845 5.32639 0.875 5.24673 0.875 5.16629C0.875 5.08585 0.890845 5.0062 0.92163 4.93189C0.952415 4.85757 0.997537 4.79005 1.05442 4.73317L1.92067 3.86692C1.97755 3.81004 2.04507 3.76491 2.11939 3.73413C2.1937 3.70334 2.27335 3.6875 2.35379 3.6875C2.43423 3.6875 2.51389 3.70334 2.5882 3.73413C2.66252 3.76491 2.73004 3.81004 2.78692 3.86692L5.46879 6.54879L11.2132 0.804419C11.27 0.747537 11.3376 0.702414 11.4119 0.671629C11.4862 0.640845 11.5659 0.625 11.6463 0.625C11.7267 0.625 11.8064 0.640845 11.8807 0.671629C11.955 0.702414 12.0225 0.747537 12.0794 0.804419L12.9457 1.67067C13.0026 1.72755 13.0477 1.79507 13.0785 1.86939C13.1092 1.9437 13.1251 2.02335 13.1251 2.10379C13.1251 2.18423 13.1092 2.26389 13.0785 2.3382C13.0477 2.41252 13.0026 2.48004 12.9457 2.53692L5.90192 9.58067C5.84504 9.63755 5.77752 9.68267 5.7032 9.71346C5.62889 9.74424 5.54923 9.76009 5.46879 9.76009C5.38835 9.76009 5.3087 9.74424 5.23439 9.71346C5.16007 9.68267 5.09255 9.63755 5.03567 9.58067Z' fill='black'/%3E%3C/svg%3E%0A"); } #chart-toolbox h2 + fieldset { padding-top: 1rem; } #chart-toolbox .chart-type .grid { width: 350px; margin: auto; padding: 20px; } #chart-toolbox .tool.meta textarea.description { width: 100%; height: 116px; text-align: left; } #chart-toolbox input[name="limit"] { width: 39%; } @media (max-width: 599px) { #chart-toolbox .tool-close { position: absolute; display: none; top: 0; left: 0; color: #fff; font-weight: 500; font-size: 1.2em; overflow: hidden; padding: 12px; z-index: 500; } #chart-toolbox .tool { width: 100%; min-width: 0; top: 50px; } #chart-toolbox .tool.active { left: 0; } } .element.dimensions .margin { position: relative; height: 134px; width: 100%; margin: 0 50px; } .element.dimensions .margin:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 60px; width: 80px; border: 1px solid #000000; content: ''; } .element.dimensions .input { position: absolute; } .element.dimensions .margin-top, .element.dimensions .margin-bottom { left: 50%; transform: translateX(-50%); } .element.dimensions .margin-right, .element.dimensions .margin-left { top: 50%; transform: translateY(-50%); } .element.dimensions .margin-top { top: 0; } .element.dimensions .margin-right { right: 0; } .element.dimensions .margin-bottom { bottom: 0; } .element.dimensions .margin-left { left: 0; } .element.dimensions .size { position: relative; text-align: center; margin: 30px 0; padding: 25px 0 10px 0; } .element.dimensions .size .input { margin: 0; } .element.dimensions .size input[type="text"] { text-align: center; } .element.dimensions .size span { position: relative; } .element.dimensions .text { position: absolute; right: 12px; top: 8px; color: #888888; } .element.dimensions input[type="text"] { width: 48px !important; padding-left: 0; padding-right: 0; text-align: center; } .element.dimensions span.label { position: absolute; display: block; top: 5px; left: 10px; font-size: 1em; line-height: 1em; padding: 0; } .data-picker { max-width: calc(360px - (1.25rem * 2)); min-width: calc(360px - (1.25rem * 2)); } .data-picker .grid-container { overflow: hidden; height: 260px; /* required for set grid to be high */ border: 1px solid #DCDFE1; border-radius: 6px; margin-bottom: 1rem; } .data-picker .grid-container .grid { margin: -1px; } .data-set-picker .input-search { margin-bottom: 1.625rem; } .data-set-picker input[type="text"] { width: 100%; border-color: #D9D9D9; margin: 0; } .data-set-picker .sets__meta { width: 100%; } .data-set-picker .messages { color: #999999; text-align: left; cursor: default !important; font-size: 0.875em; line-height: 1.25rem; margin-bottom: 0.438rem; } .data-set-picker .messages .message { display: block; } .data-set-picker .sets { max-height: 220px; display: block; margin: 0; border: 1px solid #D9D9D9; -webkit-border-radius: 8px; border-radius: 8px; overflow: auto; } .data-set-picker .sets > .set { display: flex; cursor: pointer; padding: 0.906rem 1.25rem; border-bottom: 1px solid #D9D9D9; transition: background-color 0.3s; } .data-set-picker .sets > .set:last-child { border: none; } .data-set-picker .sets > .set:hover { background-color: #F2F2F2; } .data-set-picker .sets > .set .name, .data-set-picker .sets > .set .date { font-size: 0.875rem; line-height: 1.195rem; font-weight: 500; } .data-set-picker .sets > .set * { display: block; } .data-set-picker .sets > .set .date { margin-left: auto; } .data-set-picker .sets .loading { display: block; font-size: 1.3em; border-bottom: 1px solid #F2F4F5; } .data-set-picker .sets .loading .loading-spin { margin: 3px auto; border-bottom: 2px solid rgba(0, 0, 0, 0); border-left: 2px solid rgba(0, 0, 0, 0); border-right: 2px solid #1B22FA; border-top: 2px solid #1B22FA; border-radius: 100%; height: 20px; width: 20px; } .element.size .input { position: relative; } .element.size .input svg, .element.size .input::before { position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); } .element.size .input svg { fill: #979A9B; } .element.size .input::before { color: #979A9B; font-size: 0.813rem; } .element.size .input.width::before { content: 'W'; } .element.size .input.height::before { content: 'H'; } .element.size .input input[type="text"] { padding-left: 2rem !important; width: 80px !important; } .element.size .input.radius { margin-left: auto; } .element.size .link-ratio { display: flex; padding: 5px; cursor: pointer; margin-left: 0.25rem; } .element.size .input + .input { margin-left: 0.5rem; } #canvas { position: absolute; left: 0; right: 0; width: 100%; height: 100%; background-color: #F5F6F7 !important; overflow: hidden; z-index: 301; } #chart-edit { position: relative; height: 100%; overflow: hidden; z-index: 302; } #chart-edit .draggable { cursor: move; } #chart-container { height: 100%; padding: 1px 0 0 0; text-align: center; position: relative; z-index: -100; border-top: 1px solid #DCDFE1; } #chart-container > div.chart { position: absolute; top: 0; left: 0; text-align: left; margin: 0; padding: 0; border: 1px dashed transparent; background-color: #FFFFFF; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.05); } #chart-container > div.chart:hover { border-color: #1B22FA; } #chart-container > div.chart svg { display: block; height: auto; max-width: 100%; } #chart-editor { position: absolute; left: 0; top: 0; height: 100%; } #chart-toolbox ul.option-group > li > .option { overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #chart-toolbox ul.option-group > li.active > .option { visibility: visible; max-height: 1000px; overflow: auto; opacity: 1; -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } #chart-toolbox ul.option-group > .option > form { padding: 0; } #chart-toolbox ul.option-group > li.active > .option > form { padding: 0; } form { height: 100%; } h2 { padding: 0 0 10px 0; margin: 0 0 15px 0; color: #fff; font-size: 1.2em; font-weight: 500; } h2 > span { float: right; font-size: 0.8em; font-weight: 300; } .halo { fill-opacity: 0.1; fill: #ffffff; stroke: #ffffff; } #chart-container .legend { cursor: pointer; } input:checked + .hider { display: none; } .ui-draggable { cursor: move; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .ui-draggable.ui-draggable-disabled { cursor: default; } .button, input[type="submit"] { padding: 0 1rem; font-size: 0.875rem; color: white; display: inline-flex; align-items: center; text-align: center; justify-content: center; height: 36px; background-color: #1B22FA; line-height: 36px; min-width: 120px; border: 0; cursor: pointer; appearance: none; -webkit-border-radius: 8px; border-radius: 8px; transition: background 0.3s; } .button svg, input[type="submit"] svg { fill: currentColor; margin-right: 0.5rem; } .button.button-compact, input[type="submit"].button-compact { padding: 0 10px; height: 30px; line-height: 30px; } .button.huge, input[type="submit"].huge { height: 45px; line-height: 45px; margin: 10px 0; font-size: 15px; } .button:hover, input[type="submit"]:hover { background-color: #0912C5; color: #FFF; } .button.green, input[type="submit"].green { background-color: #8CC63E; } .button.green i, input[type="submit"].green i { background-color: #7fb535; } .button.green:hover, input[type="submit"].green:hover { background-color: #7fb535; color: #FFF; } .button.red, input[type="submit"].red { background-color: #FF0000; } .button.red:hover, input[type="submit"].red:hover { background-color: #D11F1F; color: #FFF; } .button.yellow, input[type="submit"].yellow { background-color: #FFD006; } .button.yellow i, input[type="submit"].yellow i { color: #FFD006; } .button.yellow:hover, input[type="submit"].yellow:hover { background-color: #ecbf00; color: #FFF; } .button.yellow:hover i, input[type="submit"].yellow:hover i { color: #d2aa00; } .button.purple, input[type="submit"].purple { background-color: #BF64A7; } .button.purple i, input[type="submit"].purple i { color: #BF64A7; } .button.purple:hover, input[type="submit"].purple:hover { background-color: #b8529d; color: #FFF; } .button.purple:hover i, input[type="submit"].purple:hover i { color: #aa4690; } .button.orange, input[type="submit"].orange { background-color: #E47600; } .button.orange i, input[type="submit"].orange i { color: #E47600; } .button.orange:hover, input[type="submit"].orange:hover { background-color: #cb6900; color: #FFF; } .button.orange:hover i, input[type="submit"].orange:hover i { color: #b15c00; } .button.white, input[type="submit"].white { background: none; color: #888888; border: 1px solid #888888; } .button.white i, input[type="submit"].white i { color: #888888; } .button.white:hover, input[type="submit"].white:hover { border: 1px solid #6f6f6f; color: #6f6f6f; } .button.white:hover i, input[type="submit"].white:hover i { color: #6f6f6f; } .button.grey, input[type="submit"].grey { background-color: #888888; } .button.grey i, input[type="submit"].grey i { color: #fff; background-color: #7b7b7b; } .button.grey:hover, input[type="submit"].grey:hover { background-color: #7b7b7b; color: #FFF; } .button.grey:hover i, input[type="submit"].grey:hover i { background-color: #6f6f6f; } .button-social { width: 100%; height: 60px; color: #333333; padding: 1.25rem 1.75rem; font-size: 0.875rem; line-height: 1.25rem; background: white; justify-content: flex-start; border: 1px solid #ECECEC; border-radius: 8px; margin-bottom: 1.5rem; appearance: none; transition: border-color 0.3s; background-repeat: no-repeat; background-size: 24px; background-position: left 20px center; padding-right: 0; min-width: auto; } .button-social:focus, .button-social:hover { color: #000000; background-color: white; border-color: #000000; outline: none; } .button.-facebook { background-image: url("../images/icons/facebook.svg"); padding-left: 56px; } .button.-twitter { background-image: url("../images/icons/twitter.svg"); padding-left: 56px; } .button.-pinterest { background-image: url("../images/icons/pinterest.svg"); } .button-ghost { color: #000000; background: none; border: none; } .button-ghost:hover, .button-ghost:focus { color: #000000; background: none; border: none; } .button-outline { color: #1B22FA; background: none; border: 1px solid #1B22FA; } .button + .button, input[type="submit"] + .button, .button + input[type="submit"], input[type="submit"] + input[type="submit"] { margin-left: 1.5rem; } .navigation .previousStep, .navigation .nextStep { width: 80px; background: #888888; line-height: 10px; padding: 10px; } .multiple-buttons { padding: 0 18px; font-size: 1.4em; color: white; display: inline-block; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); height: 36px; background-color: #1B22FA; line-height: 20px; border: 0; border-right: 1px solid #040ac4; cursor: pointer; margin: 0; } .multiple-buttons:last-child { -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; border-right: 0; } .button-round { text-align: center; height: 40px; display: inline-block; width: 40px; line-height: 40px; text-align: center; border: 2px solid #1B22FA; color: #1B22FA; cursor: pointer; -webkit-border-radius: 50%; border-radius: 50%; } .button-round i { width: 100%; height: 100%; padding: 10px; vertical-align: text-top !important; } .button-round:hover { border-color: #050df6; color: #050df6; } .button-round-green { border: 2px solid #32BBA6; } .button-round-green i { color: #32BBA6; } .button-round-green:hover { border-color: #227f70; } .button-round-green:hover i { color: #227f70; } .button-round-grey { border: 2px solid #888888; } .button-round-grey i { color: #888888; } .button-round-grey:hover { border-color: #7b7b7b; } .button-round-grey:hover i { color: #6f6f6f; } .button-green { background-color: #8CC63E; } .button-green i { background-color: #7fb535; } .button-green:hover { background-color: #7fb535; } .button-grey { background-color: #888888; } .button-grey i { background-color: #7b7b7b; } .button-grey:hover { background-color: #7b7b7b; } .button-grey:hover i { background-color: #6f6f6f; } .button-simple { width: 30px; height: 30px; text-align: center; line-height: 24px; cursor: pointer; padding: 3px; margin: 2px; background: #888888; color: white; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); border-bottom: 3px solid #626262; font-family: chart-blocks; -webkit-border-radius: 2px; border-radius: 2px; } .button-simple i { font-size: 5em; color: #000; } .social-button { position: relative; padding: 0 18px; font-size: 1em; color: white; display: inline-block; text-align: center; height: 33px; background-color: #1B22FA; line-height: 2.3em; border: 0; border-radius: 5px; cursor: pointer; -webkit-border-radius: 2px; border-radius: 2px; } .social-button i { display: block; float: left; margin: 0 12px 0 -18px; padding: 0 12px; width: 40px; height: 40px; height: 33px; text-shadow: 1px 1px #050df6; line-height: 33px; border-right: 1px solid #050df6; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .social-button:hover { background-color: #050df6; color: #FFF; } .social-button:hover i { background-color: #050cdd; } .social-twitter { background-color: #4099FF; text-shadow: 1px 1px #278bff; } .social-twitter i { border-right: 1px solid #278bff; text-shadow: 1px 1px #278bff; } .social-twitter:hover { background-color: #278bff; text-shadow: 1px 1px #0d7eff; } .social-twitter:hover i { background-color: #0d7eff; text-shadow: 1px 1px #0d7eff; } .social-facebook { background-color: #3B5999; text-shadow: 1px 1px #344e87; } .social-facebook i { border-right: 1px solid #344e87; text-shadow: 1px 1px #344e87; } .social-facebook:hover { background-color: #344e87; text-shadow: 1px 1px #2d4474; } .social-facebook:hover i { background-color: #2d4474; text-shadow: 1px 1px #2d4474; } .social-pinterest { background-color: #CB2027; text-shadow: 1px 1px #b51d23; } .social-pinterest i { border-right: 1px solid #b51d23; text-shadow: 1px 1px #b51d23; } .social-pinterest:hover { background-color: #b51d23; text-shadow: 1px 1px #9f191f; } .social-pinterest:hover i { background-color: #9f191f; text-shadow: 1px 1px #9f191f; } .chartList { position: relative; display: flex; flex-wrap: wrap; margin: 0; padding-left: 0.9375rem !important; padding-right: 0.9375rem !important; list-style: none; height: auto !important; width: 100%; } .chartList .chartList-item { margin: 0; padding: 0; margin: 0 0 2.875rem 0; padding-left: 1.875rem; padding-right: 1.875rem; max-width: 100%; height: 100%; flex: 0 0 100%; } .chartList .chartList-item.add-chart a { position: relative; display: block; content: ""; height: 0; width: 100%; padding-top: 85%; overflow: hidden; } .chartList .chartList-item.add-chart a > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; object-fit: cover; z-index: 1; } @media (min-width: 1024px) { .chartList .chartList-item { max-width: 50%; flex: 0 0 50%; } } @media (min-width: 1024px) { .chartList .chartList-item { max-width: 33.33333%; flex: 0 0 33.33333%; } } @media (min-width: 1600px) { .chartList .chartList-item { max-width: 25%; flex: 0 0 25%; } } @media (min-width: 2300px) { .chartList .chartList-item { max-width: 16.66667%; flex: 0 0 16.66667%; } } .chartList .chartList-item a { position: relative; display: block; height: 100%; border: 1px solid #EAEAEA; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .chartList .chartList-item a:hover { color: inherit; border-color: #1B22FA; box-shadow: 10px 10px 10px #EAEAEA; } .chartList .chartList-item a:hover .chartList-name svg, .chartList .chartList-item a:hover .chartList-menu { opacity: 1; } .chartList .chartList-item.add-chart a { color: #000000; display: flex; flex-direction: column; align-content: center; justify-content: center; font-size: 0.875rem; line-height: 1rem; text-align: center; background-color: #F2F4F5; border-color: #EEEEEE; } .chartList .chartList-item.add-chart a p { margin-bottom: 1.75rem; } .chartList .chartList-item__circle { display: flex; align-items: center; justify-content: center; height: 52px; width: 52px; margin: auto; border-radius: 50%; background-color: #1B22FA; } .chartList .chartList-item__icon { fill: #FFFFFF; } .chartList .chartList-item .contextMenu { width: 124px; top: 25px; right: auto; left: -10px; } .chartList .chartList-item .contextMenu:before { display: none; } .chartList .chartList-item .contextMenu .delete { color: #FF0000; } .chartList .chartList-preview { position: relative; height: 0; padding-top: calc(9 / 16 * 100%); width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; background-color: #F2F2F2; border-radius: 4px 4px 0 0; } .chartList .chartList-preview img { position: absolute; top: 50%; left: 50%; max-width: 80%; max-height: 80%; min-height: 1; transform: translate(-50%, -50%); border-radius: 8px; } .chartList .chartList-menu { position: absolute; opacity: 0; top: 3px; right: 12px; z-index: 2; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .chartList .chartList-menu svg { fill: #999999; } .chartList .chartList-menu:hover .contextMenu { visibility: visible; opacity: 1; } .chartList .chartList-details { padding: 1.375rem 1.75rem; } .chartList .chartList-details .chartList-name, .chartList .chartList-details .chartList-editDate { display: block; font-weight: 500; } .chartList .chartList-details .chartList-name { margin: 0; font-size: 0.875em; line-height: 1.25em; margin-bottom: 0.5rem; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chartList .chartList-details .chartList-name:hover { color: #1B22FA; } .chartList .chartList-details .chartList-name svg { opacity: 0; fill: currentColor; margin-left: 0.625rem; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .chartList .chartList-details .chartList-editDate { font-size: 0.75em; line-height: 1em; color: #999999; } .list-empty { position: relative; text-align: center; overflow: hidden; } .list-empty h1, .list-empty h4 { font-weight: 500; margin: 0 0 30px 0; } .list-empty p { font-size: 1.6em; margin: 1em; } .list-empty i { border: solid 3px #818181; display: inline-block; padding: 20px; font-size: 5em; margin-bottom: 0; -webkit-border-radius: 50%; border-radius: 50%; } ul.bigChoices { margin: 10px auto; max-width: 440px; } ul.bigChoices li { position: relative; height: 105px; margin: 0 0 6px 0; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; background-color: #FFFFFF; background-repeat: no-repeat; background-position: 20px 20px; border: 2px solid #F2F4F5; } ul.bigChoices li i { position: absolute; left: 25px; top: 30px; font-size: 3em; color: #1B22FA; } ul.bigChoices li:nth-child(2) a i { color: #bfd74c; } ul.bigChoices li:nth-child(3) a i { color: #E47600; } ul.bigChoices li:hover { background-color: #F2F4F5; } ul.bigChoices li:hover a > i { color: #818181; } ul.bigChoices li:hover a > .example, ul.bigChoices li:hover a .name { width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul.bigChoices li:hover a:before { float: right; margin: -3px 0 0 0; color: #818181; font-size: 5em; line-height: normal; font-family: 'chart-blocks'; font-weight: 200; content: "\e602"; } ul.bigChoices li.coming-soon a { opacity: 0.5; } ul.bigChoices li.coming-soon .coming-soon-banner { position: absolute; top: 10px; left: -10px; background: #FFD006; padding: 10px; color: #fff; } ul.bigChoices li.coming-soon .coming-soon-banner:before { border-style: solid; content: ""; display: block; position: absolute; border-color: #b99600 transparent; border-width: 10px 0 0 10px; left: 0; bottom: -10px; } ul.bigChoices li.blank { background-image: image-url("dataType-blank.png"); } ul.bigChoices li.spreadsheet { background-image: image-url("dataType-spreadsheet.png"); } ul.bigChoices li.datafeed { background-image: image-url("dataType-feed.png"); } ul.bigChoices li.database { background-image: image-url("dataType-database.png"); } ul.bigChoices li:nth-child(2) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -ms-animation-delay: 0.15s; -o-animation-delay: 0.15s; animation-delay: 0.15s; } ul.bigChoices li:nth-child(3) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } ul.bigChoices li:nth-child(4) { -webkit-animation-delay: 0.45s; -moz-animation-delay: 0.45s; -ms-animation-delay: 0.45s; -o-animation-delay: 0.45s; animation-delay: 0.45s; } ul.bigChoices li a { position: relative; display: block; width: auto; font-size: 1.4em; font-weight: 500; padding: 20px 20px 20px 90px; height: 105px; } ul.bigChoices li .name { display: block; margin: 2px 0 4px 0; color: #9b9b9b; font-size: 2em; line-height: 35px; font-weight: 300; overflow: hidden; } ul.bigChoices li .example { display: block; color: #b4b4b4; font-size: 1em; font-weight: 500; } .datasetCreateTypes li.rejected { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } #preview #preview-holder { width: 100%; height: 300px; } #preview .options { text-align: center; } #preview .loading { text-align: center; } #preview .loading-spin { margin: 75px auto; border-bottom: 2px solid rgba(0, 0, 0, 0); border-left: 2px solid rgba(0, 0, 0, 0); border-right: 2px solid #1B22FA; border-top: 2px solid #1B22FA; border-radius: 100%; height: 20px; width: 20px; } #preview .error { color: #FF0000; } #create-form { margin: 0 auto; } #create-form .uploadDropZone { margin-bottom: 2.363rem; } #create-form .uploadDropZone.hover h3 { display: none; } #create-form .uploadDropZone.loading .fileupload__upload { display: none; } #create-form .uploadDropZone p { color: #999999; text-align: center; max-width: 160px; margin: 0.653rem 0 0 0; } #create-form .uploadDropZone p span { color: #1B22FA; } #create-form .uploadDropZone .errors { display: block; text-align: center; padding-bottom: 0.249rem; } #create-form .uploadDropZone .errors p { margin-left: auto; margin-right: auto; } #create-form .uploadDropZone .errors .error { color: #ff0000; } #create-form .uploadDropZone .uploading { display: none; flex-direction: column; text-align: center; } #create-form .uploadDropZone .uploading p { color: #000000; font-size: 0.875rem; line-height: 1.195rem; margin: 0.389rem auto 0 auto; } #create-form .uploadDropZone.loading .uploading { display: flex; } #create-form .uploadDropZone .progress { height: 6px; width: 208px; background-color: #F2F4F5; margin: 0 auto; border-radius: 10px; } #create-form .uploadDropZone .progress > .bar { height: 6px; background-color: #1B22FA; border-radius: 10px; } #create-form .uploadDropZone .fileupload { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 308px; width: 500px; border: 1px dashed #999999; text-align: center; border-radius: 8px; } #create-form .uploadDropZone .fileupload:hover { background-color: rgba(0, 0, 0, 0.1); -webkit-transition: background 0.6s; transition: background 0.6s; } #create-form .uploadDropZone .fileupload h3 { font-size: 1.3em; font-weight: normal; } #create-form .uploadDropZone .fileupload .blank { background-image: image-url("dataType-blank.png"); margin: 50px 0 20px; width: 53px; height: 66px; display: inline-block; } #create-form .uploadDropZone form { display: none; } #create-form .uploadDropZone .file > label { display: block; } #create-form .uploadDropZone input { margin-top: 30px; } #create-form .uploadDropZone small { display: block; margin-top: 15px; text-align: right; } #set-grid-table { margin: 0; padding: 0; } #set-view { background: #fff; } #set-view .importingNotice { position: absolute; bottom: 0; width: 100%; height: 100px; background-color: rgba(200, 200, 200, 0.5); text-align: center; z-index: 1; } #set-view .importingNotice .loading-spin { margin: 15px auto; border-bottom: 2px solid rgba(0, 0, 0, 0); border-left: 2px solid rgba(0, 0, 0, 0); border-right: 2px solid #1B22FA; border-top: 2px solid #1B22FA; border-radius: 100%; height: 20px; width: 20px; } #set-meta { position: absolute; left: 0; right: 0; bottom: 0; height: auto; background: #fff; min-height: 20px; -webkit-box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15); } #set-meta #set-meta-toggle { display: block; padding: 0 10px; height: 20px; line-height: 20px; color: #666; font-weight: 600; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) 2px 5px rgba(0, 0, 0, 0.4); background: linear-gradient(top, #edebe9 0%, #e6e4e2 5%, #e0dedc 10%, #dfdedb 90%, #d5d4d2 95%, #cfcecb 100%); cursor: pointer; } .open #set-meta #set-meta-toggle:after { content: "\as"; } #set-meta #set-meta-toggle:after { float: right; font-size: 3em; font-weight: 300; font-family: "Entypo"; content: "\E75F"; } #set-meta.open #set-meta-toggle:after { content: "\E75C"; } #set-meta .content { height: 0px; overflow: hidden; transition: height .3s ease; } #set-meta.open .content { padding: 10px; height: 160px; } .backgrid-paginator { display: flex; } .backgrid-paginator ul { margin-left: auto; display: flex; } .backgrid-paginator ul li { display: inline-block; transition: background-color 0.1s linear 0s; } .backgrid-paginator ul li a, .backgrid-paginator ul li span { color: #000000; padding: 0 0.25rem; font-size: 0.875rem; text-align: center; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .backgrid-paginator ul li a.active:hover > a, .backgrid-paginator ul li span.active:hover > a { color: #1B22FA; } .backgrid-paginator ul li a[title="First"], .backgrid-paginator ul li a[title="Last"], .backgrid-paginator ul li span[title="First"], .backgrid-paginator ul li span[title="Last"] { display: none; } .backgrid-paginator ul li.active a { color: #1B22FA; } @font-face { font-family: 'Avenir Next'; src: url("../fonts/avenir-next/AvenirNextLTPro-Bold.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Bold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir Next'; src: url("../fonts/avenir-next/AvenirNextLTPro-It.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-It.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: "Avenir Next"; src: url("../fonts/avenir-next/AvenirNextLTPro-Medium.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir Next'; src: url("../fonts/avenir-next/AvenirNextLTPro-Regular.woff2") format("woff2"), url("../fonts/avenir-next/AvenirNextLTPro-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'chart-blocks'; src: url("../fonts/chart-blocks/chart-blocks.eot?v=1.5"); src: url("../fonts/chart-blocks/chart-blocks.eot?#iefix&v=1.5") format("embedded-opentype"), url("../fonts/chart-blocks/chart-blocks.svg?v=1.5") format("svg"), url("../fonts/chart-blocks/chart-blocks.woff?v=1.5") format("woff"), url("../fonts/chart-blocks/chart-blocks.ttf?v=1.5") format("truetype"); font-weight: normal; font-style: normal; } .chart-blocks { font-family: "chart-blocks"; } .hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px white; transition: background 0.2s, color 0.2s; } .no-touch .hi-icon-effect-6 .hi-icon:hover { background: white; color: #64bb5d; } .no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: spinAround 2s linear infinite; } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon-lock:before { content: "\e640"; } .icon-label:before { content: "\e63d"; } .icon-tooltip:before { content: "\e63c"; } .icon-cut:before { content: "\e63b"; } .icon-clone:before { content: "\e600"; } .icon-area-chart:before { content: "\e601"; } .icon-arrow:before { content: "\e602"; } .icon-axis:before { content: "\e603"; } .icon-bar-chart-horizontal-stacked:before { content: "\e604"; } .icon-bar-chart-horizontal:before { content: "\e605"; } .icon-bar-chart-stacked:before { content: "\e606"; } .icon-bar-chart:before { content: "\e607"; } .icon-canvas:before { content: "\e608"; } .icon-chart-data:before { content: "\e609"; } .icon-chart-series:before { content: "\e60a"; } .icon-chart-tools:before { content: "\e60b"; } .icon-cog:before { content: "\e60c"; } .icon-config:before { content: "\e60d"; } .icon-copy:before { content: "\e60e"; } .icon-data:before { content: "\e60f"; } .icon-donut-chart:before { content: "\e610"; } .icon-download:before { content: "\e611"; } .icon-dribbble:before { content: "\e612"; } .icon-edit:before { content: "\e613"; } .icon-election-chart:before { content: "\e614"; } .icon-embed:before { content: "\e615"; } .icon-envelope:before { content: "\e616"; } .icon-facebook-box:before { content: "\e617"; } .icon-facebook:before { content: "\e618"; } .icon-google:before { content: "\e619"; } .icon-heart:before { content: "\e61a"; } .icon-increase:before { content: "\e61b"; } .icon-legend:before { content: "\e61c"; } .icon-line-chart:before { content: "\e61d"; } .icon-linkedin:before { content: "\e61e"; } .icon-list:before { content: "\e61f"; } .icon-search:before { content: "\e620"; } .icon-minus:before { content: "\e621"; } .icon-new-file:before { content: "\e622"; } .icon-paste:before { content: "\e623"; } .icon-people:before { content: "\e624"; } .icon-pepole:before { content: "\e625"; } .icon-pie-chart:before { content: "\e626"; } .icon-pinterest:before { content: "\e627"; } .icon-plus:before { content: "\e628"; } .icon-redo:before { content: "\e629"; } .icon-scatter-chart:before { content: "\e62a"; } .icon-settings:before { content: "\e62c"; } .icon-share:before { content: "\e62d"; } .icon-show:before { content: "\e62e"; } .icon-sort_down:before { content: "\e62f"; } .icon-sort_up:before { content: "\e630"; } .icon-sort:before { content: "\e631"; } .icon-support:before { content: "\e632"; } .icon-table:before { content: "\e633"; } .icon-text:before { content: "\e634"; } .icon-themes:before { content: "\e635"; } .icon-trash:before { content: "\e636"; } .icon-twitter-box:before { content: "\e637"; } .icon-twitter:before { content: "\e638"; } .icon-undo:before { content: "\e639"; } .icon-upload:before { content: "\e63a"; } i, .icon { display: inline-block; font: 16px/1 chart-blocks; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } i.icon-huge, .icon.icon-huge { font-size: 5em; } .chart-blocks { font-family: "chart-blocks"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Avenir Next", sans-serif; font-size: 10px; line-height: normal; } a { text-decoration: none; color: #1B22FA; } a:hover { color: #050cdd; } h1, h4 { font-size: 2.8em; } h3 { font-size: 1.125em; font-weight: 500; margin-bottom: 1.5rem; color: #000000; } h4 { font-size: 1.8em; margin: 1.0em 0 1.6em 0; } p { margin: 1.0em 0 1.6em 0; line-height: 1.2em; } p.-small { font-size: 0.875rem; line-height: 1.25rem; } li { font-family: "Avenir Next", sans-serif; } a { text-decoration: none; } strong { font-weight: 600; } .text-red { color: #FF0000; } form.form { font-size: 1.3em; } form.form .errors { display: none; color: #ff0000; } form.form .messages p { text-align: center; font-size: 0.875rem; color: #ff0000; margin-right: 40px; } form.form .element { padding: 20px 0; border-bottom: 1px solid #E6E6E6; color: #818181; } form.form .element:last-child { border-bottom: none; } form.form .element.submit { text-align: center; } form.form .element label { display: inline-block; width: 150px; text-align: left; margin-right: 15px; } form.form .element label.right { display: inline; text-align: left; margin-right: 15px; } form.form .element input, form.form .element select { display: inline-block; } form.form .element input[type="text"], form.form .element input[type="email"], form.form .element input[type="password"] { width: 50%; } form.form .element input.huge { margin: 1.0em 0 1.6em 0; font-size: 1.2em; } form.form .element.invalid input, form.form .element input.error { background-color: #EED3D7; } form.form .element .element { padding: 20px 0 0 0; border-bottom: none; } form.form .element p { margin: 5px 0px; line-height: 1em 0 0 0; } form.form .element p.description { margin-left: 175px; } label { display: inline-block; font-size: 1rem; line-height: 1.366rem; margin-bottom: 1rem; } input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; height: 52px; color: #333333; padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; background: white; font-family: "Avenir Next", sans-serif; border: 1px solid #ECECEC; border-radius: 8px; margin-bottom: 2rem; appearance: none; transition: border-color 0.3s; } input[type="text"]:focus, input[type="text"]:hover, input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus, input[type="password"]:hover, textarea:focus, textarea:hover { border-color: #000000; outline: none; } input[type="text"][readonly], input[type="text"]::placeholder, input[type="email"][readonly], input[type="email"]::placeholder, input[type="password"][readonly], input[type="password"]::placeholder, textarea[readonly], textarea::placeholder { color: #999999; } input.huge { margin: 1.0em 0 1.6em 0; font-size: 1.2em; } input.short { width: 50px; } input.medium { width: 100px; } .input-search { position: relative; } .input-search input[type="text"], .input-search input[type="email"], .input-search input[type="password"] { padding-left: 3rem; } .input-search__icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); } .grid { font-size: 0.875rem; } .grid .slick-cell.heading { font-weight: 500; color: #000; } .grid .slick-cell.picked.sx.sh { background-color: rgba(27, 34, 250, 0.2); } .grid .slick-cell.picked.sy.sh { background-color: rgba(27, 34, 250, 0.3); } .grid .slick-cell.picked.c { border-left: 1px solid #1B22FA; border-right: 1px solid #1B22FA; } .grid .slick-cell.picked.c + .slick-cell.picked.c { border-left: none; } .grid .slick-cell.picked.r { border-top: 1px solid #1B22FA; border-bottom: 1px solid #1B22FA; } .grid .slick-cell.picked.r.dup { border-top: none; } .grid .slick-header-column.picked { color: #FFFFFF; background-color: #1B22FA; border-color: #1B22FA; } .grid .slick-cell.picked.l0 { color: #FFFFFF; background-color: #1B22FA; border-color: #1B22FA; } .slickgrid, .slickgrid *, .slick-header-column, .slick-cell, .slick-selector { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; } .slick-selector { border: 2px solid #1B22FA !important; } .slick-cell.editable { position: inherit; width: auto; background: white; } .slick-cell.editable:hover { background-color: white; } input.editor-text { background: none; border: none; height: 19px; padding: 0; color: inherit; width: 100%; -webkit-border-radius: 0; border-radius: 0; } input.editor-text:focus { border: none; } .slick-header-columns, .slick-headerrow-columns { border-bottom: 1px solid #DCDFE1; } .slick-header-column.ui-state-default { background-color: #F5F6F7; color: #000; text-align: center; border-color: #DCDFE1; border-top: 1px solid #DCDFE1; border-left: 1px solid transparent; } .slick-header-column.ui-state-default.highlight { color: #FFFFFF; background-color: #1B22FA; border-color: #1B22FA; } .slick-cell.l0 { background-color: #F5F6F7; text-align: center; border-width: 1px 0 0 1px !important; border-style: solid; line-height: 20px; border-bottom: 1px solid #DCDFE1; border-right: 1px solid #DCDFE1; } .slick-cell.l0.highlight { color: #FFFFFF; background-color: #1B22FA; border-color: #1B22FA; } .slick-cell, .slickgrid_854021 { height: 20px !important; margin-top: -1px; } .slick-cell, .slick-headerrow-column { border-style: solid; padding: 2px 2px 2px 5px; line-height: 17px; border-width: 1px 0 1px 1px; border-color: #DCDFE1; } .slick-header-column:first-child { border-left: 1px solid #DCDFE1; width: 31px !important; } .slick-cell.selected { z-index: 11; background: white; margin-right: -1px; border-color: #1B22FA; border-style: solid; border-width: 1px; } .grid-series-picker .slick-header-column.picked:after, .grid-series-picker .slick-cell.l0 .axes { content: attr(title); position: absolute; letter-spacing: 5px; text-transform: capitalize; background-color: #050cdd; border-color: #050cdd; width: 15px; font-size: 0.5rem; text-align: center; border-width: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .grid-series-picker .slick-header-column.picked:after { top: 2px; right: 5px; padding: 2px 0 2px 5px; } .grid-series-picker .slick-cell.l0 .axes { top: 0; left: 5px; padding: 0 0 0 5px; } .grid-list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -0.844rem; margin-bottom: 3.063rem; } .grid-list__name, .grid-list__example { display: block; } .grid-list__name { font-size: 0.875rem; line-height: 1.25rem; } .grid-list__example { color: #999999; font-size: 0.75rem; line-height: 1rem; } .grid-list.-chart-type { justify-content: flex-start; } .grid-list.-chart-type > li { flex: 1 1 190px; max-width: 210px; } .grid-list.-chart-type > li a { padding-bottom: 2.313rem; } .grid-list.-chart-type > li a img { max-height: auto; margin: 2rem 0; } .grid-list > li { padding: 0 0.844rem; flex: 1; margin-bottom: 1.688rem; max-width: 275px; } .grid-list > li:hover a { border-color: #1B22FA; box-shadow: 10px 10px 10px #EAEAEA; } .grid-list > li a { color: inherit; display: flex; height: 100%; flex-direction: column; padding: 0 1.75rem 1.375rem 1.75rem; border: 1px solid #DFDFDF; cursor: pointer; text-align: left; background: #fff; box-shadow: 10px 10px 10px transparent; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .grid-list > li a img { max-height: 113px; margin: 3.438rem 0; } .grid-list .ui-tooltip { margin-top: 10px; } .menu { height: 50px; line-height: 50px; color: #000; } .menu > li { float: left; } .menu .menu { position: relative; margin: 0; -webkit-transition: background 0.3s; transition: background 0.3s; } .menu .menu:hover > .contextMenu { visibility: visible; opacity: 1; } .menu .menu > a:not(.button) { height: 50px; color: #000000; font-size: 0.875em; font-weight: 500; cursor: pointer; display: flex; align-items: center; -webkit-transition: color 0.3s; transition: color 0.3s; } .menu .menu > a:not(.button):hover { color: #888888; } .menu .menu .profile-avatar { height: 35px; width: 35px; font-size: 0.5rem; margin-right: 0.625rem; } .fayt { position: relative; display: flex; width: auto; height: auto; align-items: center; margin-right: 0.875rem; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .fayt svg { position: absolute; left: 0.75rem; } .fayt input { height: 28px; width: 0; font-size: 0.875rem; line-height: 1.25rem; padding: 0 0 0 2.25rem !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; border-color: transparent; transition: width 0.3s; } .fayt:hover input, .fayt input:focus { width: 160px; } .fayt:hover input { border-color: #EAEAEA; width: 160px; } .fayt input:focus { border-color: #1B22FA; } #toolbar { color: black; padding: 2rem 3rem; padding-bottom: 2.25rem 3.125rem; } .chart-edit #toolbar, .data-view #toolbar { background: #F5F6F7; padding: 0 1.5rem; } .chart-edit #toolbar .space-parent, .data-view #toolbar .space-parent { height: 68px; } .chart-edit #toolbar .toolbar__right, .data-view #toolbar .toolbar__right { flex: 1; } .data-view #toolbar { border-left: 1px solid #DCDFE1; } #toolbar .space-parent { display: flex; align-items: center; width: 100%; } #toolbar .space-parent .toolbar__right { display: flex; align-items: center; margin-left: auto; } #toolbar .space-parent .toolbar__right .saving { margin-left: 1rem; } #toolbar .label.label-info { margin: 0.9rem 0 0 1.5rem; } #toolbar .mainTitle { display: inline-block; align-items: center; font-size: 1.125rem; line-height: 1.25rem; font-weight: 500; } #toolbar .mainTitle.editing { display: flex; } .chart-edit #toolbar .mainTitle { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; } #toolbar .mainTitle svg { margin-right: 0.875rem; } #headerbar .space-parent, #toolbar .space-parent { display: flex; align-items: center; justify-content: space-between; width: 100%; } #headerbar { position: fixed; display: flex; align-items: center; color: #000000; height: 50px; background: #FFFFFF; border-bottom: 1px solid #DCDFE1; z-index: 400; width: 100%; } #headerbar .space-parent { padding: 0 1.063rem; } #headerbar .logo { color: inherit; display: flex; align-items: center; } #headerbar .logo img { width: 21px; height: 22px; } #headerbar .logo span { font-size: 0.875rem; margin-left: 1rem; } #toolbar #toolbar-utilities .saving { color: #979A9B; font-size: 0.625rem; line-height: 1rem; white-space: nowrap; -webkit-transition: all ease-in 0.4s; transition: all ease-in 0.4s; } #toolbar #toolbar-tools { display: block; text-align: right; margin-left: auto; } #toolbar #toolbar-tools .button { min-width: auto; } #toolbar #toolbar-tools > ul { display: flex; align-items: center; } #toolbar #toolbar-tools > ul > li { position: relative; margin-right: 1.25rem; } #toolbar #toolbar-tools > ul > li:hover .contextMenu { opacity: 1; visibility: visible; } #toolbar #toolbar-tools > ul > li:last-child { margin-right: 0; } #toolbar #toolbar-tools > ul > li > a:not(.button) { display: flex; color: #000000; cursor: pointer; } #toolbar #toolbar-tools > ul > li > a:not(.button):hover { color: #1B22FA; } #toolbar #toolbar-tools > ul > li > a:not(.button) svg { fill: currentColor; } #toolbar #toolbar-tools .zoom { display: flex; height: 28px; align-items: center; padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid #DCDFE1; } #toolbar #toolbar-tools .zoom__amount input[type="text"] { padding: 0; height: auto; width: 30px; border: none; margin: 0; text-align: right; background: none; min-width: auto; border-radius: 0; font-size: 1rem; font-weight: 500; line-height: 1.25rem; } #toolbar #toolbar-tools .zoom__percent { font-size: 1rem; font-weight: 500; line-height: 1.25rem; } #toolbar #toolbar-tools .zoom__out, #toolbar #toolbar-tools .zoom__in { padding: 0.5rem; } #toolbar #toolbar-tools .zoom > * { display: flex; align-items: center; } #toolbar > i { display: none; } #toolbar .loading-spin { display: inline-block; margin-left: 20px; } .profileImage { -webkit-border-radius: 50%; border-radius: 50%; vertical-align: middle; width: 24px; } #toolbar-utilities .loadingRotator { top: 15px; } #toolbar h1 .editable, #toolbar h4 .editable, #toolbar div.mainTitle .editable { margin-right: 5px; } #toolbar h1 .editable:hover, #toolbar h4 .editable:hover, #toolbar div.mainTitle .editable:hover { color: #bbb; } #toolbar h1 .editable form, #toolbar h4 .editable form, #toolbar div.mainTitle .editable form { width: 100%; } #toolbar h1 .editable form input, #toolbar h4 .editable form input, #toolbar div.mainTitle .editable form input { margin: -10px -1px; font-size: 1em; border: 0; background: none; overflow: visible; font-family: "Avenir Next", sans-serif; font-weight: 300; color: #bbb; width: 100%; } #toolbar h1.editing, #toolbar h4.editing, #toolbar div.mainTitle.editing { grid-template-columns: max-content auto; } #toolbar h1.editing .editable, #toolbar h4.editing .editable, #toolbar div.mainTitle.editing .editable { background: inherit; } .toggle-nav { display: none; } #toolbar-menus > li:hover > .contextMenu { visibility: visible; opacity: 1; } .toolbar-loading:before { -webkit-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -ms-animation: move 2s linear infinite; animation: move 2s linear infinite; } @media (max-width: 599px) { #toolbar { height: 160px; } #toolbar h1, #toolbar h4, #toolbar div.mainTitle { font-size: 1.125em; margin: 0 10px; } #toolbar .toggle-nav { background-image: url("../images/icon-nav.png"); background-position: 15px 50%; background-repeat: no-repeat; cursor: pointer; display: inline-block; height: 80px; opacity: 0.5; position: relative; text-indent: -9999px; width: 48px; } #toolbar > div > h1 > .editable input, #toolbar > div > h4 > .editable input { min-width: 100px; } } .messages li { border-radius: 4px; margin-bottom: 20px; padding: 10px; font-weight: 500; font-size: 1.3em; background-color: #F2DEDE; border-color: #EED3D7; color: #B94A48; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .alert { border: 1px solid rgba(0, 0, 0, 0); margin-bottom: 20px; padding: 15px; font-size: 1.3em; -webkit-border-radius: 4px; border-radius: 4px; } .alert .close { position: relative; cursor: pointer; top: -2px; color: #8dcab6; font-weight: 700; } .alert .close:hover { color: #888888; } .alert-success { background-color: #e4f2ee; border-color: #B0DACC; color: #6bb99f; } .alert-info { background-color: #a8ddf6; border-color: #63C2EE; color: #1798d4; } .alert-warning { background-color: #ffde53; border-color: #FFD006; color: #9f8100; } .alert-danger { background-color: #ff4d4d; border-color: #FF0000; color: #990000; } .label { display: inline-block; padding: 5px 10px; font-size: 0.8em; line-height: 1.3em; -webkit-border-radius: 4px; border-radius: 4px; } .label.label-info { background-color: #1B22FA; color: #FFFFFF; } .infoDialog { position: absolute; bottom: 2.25rem 3.125rem; left: 300px2.25rem 3.125rem; border: solid 1px #F2F4F5; border-bottom: 4px solid #F2F4F5; background: #FFF; color: #818181; width: 350px; padding: 10px; z-index: 900000; -webkit-border-radius: 4px; border-radius: 4px; } .infoDialog h3 { margin: 0; } .infoDialog .dismiss { position: absolute; top: 10px; right: 10px; font-size: 1.5em; cursor: pointer; color: #1B22FA; } .infoDialog .dismiss:hover { color: #818181; } .infoDialog .cancel { margin-left: 10px; color: #323232; } .infoDialog.notice { top: 2.25rem 3.125rem; bottom: auto; left: 50%; margin-left: -175px; z-index: 900001; } .note-message { margin-bottom: 20px; padding: 0.2em 0.6em 0.3em; color: #fff; text-align: center; vertical-align: baseline; white-space: nowrap; font-size: 60%; -webkit-border-radius: 4px; border-radius: 4px; } .note-green { background-color: #B0DACC; } .note-blue { background-color: #24B0D0; } .note-yellow { background-color: #FFD006; } .note-red { background-color: #FF0000; } #notice { position: absolute; top: 50px; width: 100%; text-align: center; color: #fff; z-index: 1000; } #notice code { font-family: monospace; background-color: #F5F6F7; color: #1B22FA; padding: 5px 10px; } #notice .close { float: right; cursor: pointer; } #notice .success { background-color: #8CC63E; padding: 10px; } #notice .info { background-color: #1B22FA; padding: 10px; } #notice .warning { background-color: #FFD006; padding: 10px; } #notice .error { background-color: #FF0000; padding: 10px; } .modal { position: fixed; width: 544px; min-height: 100px; padding: 0; top: 50% !important; margin-top: 0 !important; left: 0; right: 0; margin: auto; background: #fff; z-index: 900; overflow: hidden; transform: translateY(-50%); -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .modal.-template { width: 912px; } .modal.in { display: block !important; } .modal .modal-close { position: absolute; right: 17px; top: 17px; cursor: pointer; } .modal .modal-close svg { fill: #979A9B; } .modal .modal-close:hover svg { fill: #000000; } .modal header { text-align: center; padding: 40px; } .modal header h1, .modal header h4 { font-size: 1.5rem; line-height: 2.25rem; letter-spacing: -0.01em; } .modal-content { padding: 0 40px; } .modal-content .template-actions { margin: 20px 0; } .modal-footer { padding: 40px; background-color: #F5F6F7; } .modal .templates-holder { height: 350px; overflow: auto; } .modal .templates-holder .grid-list { margin-left: -15px; margin-right: -15px; } .modal .templates-holder .grid-list > li { position: relative; padding: 0 15px; margin: 0 0 30px 0; border-width: 1px; flex: 1 1 33.33333%; max-width: 33.33333%; } .modal .templates-holder .grid-list > li .chart-container { position: relative; display: flex; align-items: center; justify-content: center; line-height: 0; overflow: hidden; border: 1px solid #DCDFE1; border-radius: 8px; width: 100%; cursor: pointer; transition: border-color 0.3s; } .modal .templates-holder .grid-list > li .chart-container:hover { border-color: #1B22FA; } .modal .templates-holder .grid-list > li .chart-container .chart { max-width: 100%; max-height: 100%; min-height: 1; } .modal .templates-holder .grid-list > li .chart-container .chart svg { display: block; height: auto; max-width: 100%; } .modal .templates-holder .grid-list > li .chart-container .loading-spin { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .modal .templates-holder li:hover .chartblocks-hover { opacity: 1; } .modal .templates-holder .chartblocks-hover { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: rgba(27, 34, 250, 0.5); color: #fff; text-align: center; font-size: 1.5em; opacity: 0; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .modal .templates-holder .chartblocks-hover span { position: absolute; left: 50%; top: 50%; display: block; font-size: 0.8em; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-shadow: 0 0 8px rgba(0, 0, 0, 0.8) 2px 5px rgba(0, 0, 0, 0.4); } .modal footer { padding: 40px 40px 0 40px; } .modal footer .button { float: right; } .modal .social { display: flex; margin-left: -0.5rem; margin-right: -0.5rem; } .modal .social li { flex-basis: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .modal .social li .button { height: 44px; padding: 0.781rem 0 0.781rem 3.75rem; margin-bottom: 0; } .modal-scrollable { position: relative; } .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 500; } .modal-scrollable .modal-download .download { width: 100%; text-align: center; padding: 80px 0; } .modal-scrollable .modal-download .download > li { display: inline-block; margin-left: 48px; width: 53px; height: 66px; background-image: image-url("dataType-blank.png"); } .modal-scrollable .modal-download .download > li:hover { opacity: 0.8; transition: opacity 0.2s ease 0s; } .modal-scrollable .modal-download .download > li a.download { display: block; padding: 15px 5px; font-size: 1.3em; color: #fff; width: 100%; height: 100%; } .modal-scrollable .modal-download .download > li a.download i { display: block; margin: 8px 0; } .modal-scrollable .modal-download .download > li a.download:hover { color: #1B22FA; } .modal-scrollable .modal-download .download > li:first-child { margin-left: 0; } .modal.share { padding: 0; } .modal.share .social-button { width: 100%; margin-bottom: 10px; } .modal.share h3 { color: #979A9B; font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; margin-bottom: 0.5em; } .modal.share .makePublic { padding: 20px 20px 0 20px; text-align: center; } .modal.share .makePublic input:checked + span { color: #fff; } .modal.share .makePublic .public-text { font-size: 1.5em; line-height: 1.5; } .modal.share fieldset { position: relative; margin-bottom: 1.5rem; } .modal.share fieldset input, .modal.share fieldset textarea { width: 100%; padding-right: 3.6rem; margin-bottom: 0; } .modal.share fieldset textarea { height: 111px; } .modal.share fieldset a.copy { position: absolute; right: 1rem; top: 0.75rem; color: #1B22FA; padding: 3px 5px; font-size: 0.875rem; line-height: 1.25rem; } .modal.share input:checked + .public { display: block; } nav { position: relative; width: 300px; padding: 2.063rem 0 1.563rem 0; margin-top: 50px; background: #F5F6F7; z-index: 500; } .chart-edit nav { display: none; } nav > div { display: flex; flex-direction: column; height: 100%; } nav .nav-item { position: relative; margin: 0; } nav .nav-item > a { display: flex; align-items: center; font-size: 0.875rem; padding: 0.656rem 2.5rem; color: #787878; overflow: hidden; -webkit-transition: all 0.6s; transition: all 0.6s; } nav .nav-item > a svg { fill: currentColor; } nav .nav-item__text { margin-left: 0.938rem; } nav .nav-item.active > a, nav .nav-item:hover > a { color: #000000 !important; } .nav { margin: 0; } .nav__bottom { display: flex; align-items: center; justify-content: center; margin-top: auto; } .nav__bottom .nav-item a { padding: 0 1.094rem; } .nav-item a:hover > .ui-tooltip { visibility: visible; opacity: 1; color: #FFFFFF; right: -75px; } @media (max-width: 599px) { .nav .nav-item > a i { font-size: 1.6em; } .nav .ui-tooltip { top: 0; display: none; } nav.nav-hide { display: none; } } .ui-tooltip-hover:hover .ui-tooltip { visibility: visible; opacity: 1; } .ui-tooltip { position: absolute; top: 50%; z-index: 100; visibility: hidden; padding: 0.25rem 0.5rem; background: #303234; color: #fff; font-size: 0.75em; line-height: 1rem; opacity: 0; -webkit-transition: opacity 0.5s ease-out, padding 0.5s ease-out, visibility; transition: opacity 0.5s ease-out, padding 0.5s ease-out, visibility; -webkit-border-radius: 6px; border-radius: 6px; } .ui-tooltip:before { position: absolute; display: block; border-style: solid; border-color: transparent #303234; content: ""; } .ui-tooltip.ui-tooltip--left { right: 0; } .ui-tooltip.ui-tooltip--left:before { top: 50%; right: -5px; margin-top: -5px; border-width: 5px 0 5px 5px; } .ui-tooltip.ui-tooltip--right { left: 100%; } .ui-tooltip.ui-tooltip--right:before { top: 50%; left: -5px; margin-top: -5px; border-width: 5px 5px 5px 0; } .ui-tooltip.ui-tooltip--top { bottom: 0; } .ui-tooltip.ui-tooltip--top:before { left: 50%; top: -5px; margin-left: -5px; border-width: 0 5px 5px 5px; border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0); } .ui-tooltip.ui-tooltip--bottom { top: 0; } .ui-tooltip.ui-tooltip--bottom:before { left: 50%; bottom: -5px; margin-left: -5px; border-width: 5px 5px 0 5px; border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0); } .content-container.plan { margin-bottom: 20px; } .profile-avatar { color: #4223FF; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1; font-weight: 500; height: 40px; width: 40px; border: 1px solid #1B22FA; border-radius: 50%; } .profile-avatar .first, .profile-avatar .last { text-transform: uppercase; font-size: 0; } .profile-avatar .first::first-letter, .profile-avatar .last::first-letter { font-size: 0.875rem; } .account-profile { max-width: 600px; } .account-profile__field-edit { display: flex; } .account-profile__field-edit a { font-size: 0.875rem; margin-left: auto; } .account-profile__api, .account-profile__support { margin-top: 4.875rem; } .account-profile__api p, .account-profile__support p { margin-bottom: 2.5rem; } .account-profile .plan, .account-profile .itemList, .account-profile .account-users { margin-bottom: 4.375rem; } .account-profile__element .switch { margin-right: 0.813rem; } .account-profile__element label { font-size: 0.875rem; } .account-profile .element.-delete { padding: 0; } .account-profile .element.-delete label { font-size: 0.875rem; line-height: 1.25rem; color: #000000; } .account-profile form.form .element { border-bottom: none; } .account-users { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 20px; } .account-users .account-user { flex: 0 0 50%; max-width: 50%; text-align: center; font-size: 0.875rem; line-height: 1.138rem; margin-bottom: 1.125rem; } .account-users .account-user > a { color: #000000; display: flex; align-items: center; } .account-users .account-user .user-name { display: block; margin-left: 0.938rem; max-width: 65%; text-align: left; } .account-users .account-user span { clear: both; } .account-users .add-user a { display: flex; align-items: center; } .account-users .add-user a .account-add { color: #4223FF; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #000000; -webkit-border-radius: 50%; border-radius: 50%; } .account-users .add-user a .account-add svg { fill: #4223FF; } .account-users .add-user p { font-size: 1em; } .upgrade-account p { font-size: 1rem; margin: 0; } ul#plans { margin: 0 auto; width: 100%; list-style: none !important; overflow: auto; max-width: 1200px; } ul#plans li { position: relative; float: left; overflow: hidden; margin: 20px 0 0 0; width: 33.33333%; background-color: #fff; text-align: center; z-index: 1; } ul#plans li.free { margin-left: -4px; } ul#plans li.free h3 { color: #fff; background-color: #8dc63f; } ul#plans li.free .price { color: #8dc63f; } ul#plans li.free .button { color: #fff; background-color: #8dc63f; border-color: #8dc63f; } ul#plans li.free .button:hover { background-color: #7db235; } ul#plans li.free:first-child { margin-left: 0; } ul#plans li.personal { margin-left: -4px; } ul#plans li.personal h3 { color: #fff; background-color: #f47321; } ul#plans li.personal .price { color: #f47321; } ul#plans li.personal .button { color: #fff; background-color: #f47321; border-color: #f47321; } ul#plans li.personal .button:hover { background-color: #eb620c; } ul#plans li.personal:first-child { margin-left: 0; } ul#plans li.elite { margin-left: -4px; } ul#plans li.elite h3 { color: #fff; background-color: #92278f; } ul#plans li.elite .price { color: #92278f; } ul#plans li.elite .button { color: #fff; background-color: #92278f; border-color: #92278f; } ul#plans li.elite .button:hover { background-color: #7a2177; } ul#plans li.elite:first-child { margin-left: 0; } ul#plans li.agency { display: none; } ul#plans li.professional { margin-top: 0; -webkit-border-radius: 4px; border-radius: 4px; z-index: 2; -webkit-box-shadow: 0 2px 12px -5px rgba(0, 0, 0, 0.56); box-shadow: 0 2px 12px -5px rgba(0, 0, 0, 0.56); } ul#plans li.professional h3 { color: #fff; background-color: #20409a; } ul#plans li.professional .price { color: #20409a; } ul#plans li.professional .button { color: #fff; background-color: #20409a; border-color: #20409a; } ul#plans li.professional .button:hover { background-color: #1b3581; } ul#plans li.professional .price { padding: 30px 0; } ul#plans li.professional table { border-color: #20409a; border-width: 4px; } ul#plans li:first-child { border-left-width: 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } ul#plans li.elite { border-right-width: 4px; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } ul#plans li.elite table { border-width: 0 4px 4px 4px; } ul#plans li .info li { display: inline-block; } ul#plans h3 { font-size: 1.5rem; font-weight: 400; color: #fff; margin: 0; padding: 30px 0; background-color: #F2F4F5; } ul#plans .figure { font-size: 4rem; line-height: 1em; } ul#plans .timeframe { display: block; clear: both; font-size: 1.4rem; } ul#plans table { margin: 0; padding: 20px 10px; width: 100%; border-style: solid; border-color: #F2F4F5; border-width: 0 0 4px 4px; } ul#plans td { text-align: center; font-size: 1rem; line-height: normal; border: none; padding: 10px 0; } ul#plans td:not(.price):not(.button-container):not(.views):before { content: '\2713'; display: inline-block; color: #8CC63E; font-weight: 500; padding: 0 6px 0 0; } ul#plans td span { color: inherit; } ul#plans tr { background: none; } ul#plans tr:hover td { background: none; } ul#plans .button { margin-top: 15px; margin-bottom: 5px; width: 80%; color: #fff; } @media (min-width: 1024px) { ul#plans h3 { padding: 20px 0; } ul#plans table { padding: 10px 5px; } ul#plans td { padding: 5px 0; } } .planName { text-align: center; } #checkout input[type="text"] { position: relative; z-index: 1; border-color: #d5dcdf; width: 44.1%; } #checkout input[type="text"]:focus { z-index: 2; border-color: #1B22FA; } #checkout input[data-stripe="number"] { -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; margin-bottom: -2px; } #checkout input[data-stripe=exp_month] { -webkit-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; width: 80px; } #checkout input[data-stripe=exp_year] { -webkit-border-radius: 0; border-radius: 0; margin-left: -5px; width: 80px; } #checkout input[data-stripe=cvc] { -webkit-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; margin-left: -6px; width: 90px; } #checkout input[name="coupon"] { margin-bottom: 10px; } #checkout .element.submit { padding-bottom: 0; } #checkout .element.submit p { margin-bottom: 20px; } #checkout .planPrice { font-size: 2em; } .progress { position: relative; display: flex; width: 314px; margin: 0 auto; } .progress__label { color: #000000; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; margin-top: 1rem; } .progress__bar { position: relative; } .progress__bar-full { position: absolute; left: 0; right: 0; height: 8px; width: 100%; background-color: #DCDCDC; border-radius: 4px; } .progress__bar::before { position: absolute; left: 0; right: 0; height: 8px; width: 100%; content: ''; background-color: #1B22FA; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .progress li { flex-grow: 1; text-align: center; } .progress li.active + li .progress__bar::before, .progress li.active + li + li .progress__bar::before, .progress li.active + li + li + li .progress__bar::before, .progress li.active + li + li + li + li .progress__bar::before, .progress li.active + li + li + li + li + li .progress__bar::before { opacity: 0; } .progress li.active + li .progress__label, .progress li.active + li + li .progress__label, .progress li.active + li + li + li .progress__label, .progress li.active + li + li + li + li .progress__label, .progress li.active + li + li + li + li + li .progress__label { color: #A0A0A0; } .progress li:nth-child(2) .progress__bar::before { border-radius: 4px 0 0 4px; } .progress li.active .progress__bar::before { border-radius: 0 4px 4px 0; } .progress li.active:nth-child(2) .progress__bar::before { border-radius: 4px; } .wizard { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; flex: 1; position: relative; background-color: #E5E5E5; } .wizard__close { position: absolute; top: 0; right: 0; padding: 17px; } .wizard__close:hover svg path { stroke: #000000; } .wizard__close svg path { transition: stroke 0.3s; } .wizard__header { margin: auto; padding-bottom: 1.875rem; } .wizard__header h3 { margin: 0; } .wizard__title { font-size: 1.5rem; margin-bottom: 3.063rem; } .wizard__content { position: relative; padding: 2.938rem 2.5rem 1.938rem 2.5rem; background: #fff; border-radius: 8px; text-align: center; width: 75%; max-width: 1140px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.06); } .wizard__content.-small { max-width: 640px; } .wizard__content.-small input[type="text"] { width: 100% !important; } .wizard__content.-small .wizard__inner { padding: 0; } .wizard__content .element { padding: 0; } .wizard__inner { padding: 0 3.438rem; max-height: 500px; overflow: auto; } .wizard__row { display: flex; height: 370px; margin-bottom: 3.574rem; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; } .wizard .data-set-picker { margin-bottom: 3.119rem; } .wizard .grid-container { flex: 1; margin: -2px; font-size: 0.75rem; font-weight: normal; text-align: left; border: solid 1px #F2F4F5; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1); } .wizard .grid-container.grid-series-picker .slick-header-column:first-child { width: 41px !important; } .wizard .type .grid-list { width: auto; } .wizard .type .grid-list > li { min-height: 245px; } .wizard .template .grid-list { width: 100%; } .wizard .template .grid-list li { padding: 0; border-width: 1px; } .wizard .template .grid-list li .chart-container { min-height: 200px; line-height: 0; overflow: hidden; } .wizard .template .grid-list li:hover .chartblocks-hover { opacity: 1; } .wizard .template .grid-list .chartblocks-hover { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; background: rgba(27, 34, 250, 0.5); color: #fff; text-align: center; font-size: 2.5em; opacity: 0; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .wizard .template .grid-list .chartblocks-hover span { position: absolute; left: 50%; top: 50%; display: block; font-size: 1.2em; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-shadow: 0 0 8px rgba(0, 0, 0, 0.8) 2px 5px rgba(0, 0, 0, 0.4); } .wizard .series-builder { position: relative; overflow: hidden; width: 260px; height: 100%; text-align: left; background-color: #FFFFFF; border-left: 1px solid #D9D9D9; } .wizard .series-builder__data-label { white-space: pre; } .wizard .series-builder.-data { padding: 1rem; } .wizard .series-builder.-data fieldset { padding: 0; } .wizard .series-builder.-data h4 { font-size: 0.875rem; line-height: 1.25rem; margin: 0 0 0.875rem 0; } .wizard .series-builder.-data p { color: #999999; font-size: 0.75rem; line-height: 1.25rem; margin-bottom: 0.2rem; } .wizard .series-builder.-data input[type="text"], .wizard .series-builder.-data input[type="email"], .wizard .series-builder.-data input[type="password"] { height: 28px; font-size: 0.875rem; padding: 0.25rem 0.75rem; margin-top: 0; } .wizard .series-builder.-data ul { padding-left: 15px; } .wizard .series-builder.-data ul li { font-size: 0.75rem; line-height: 1.25rem; } .wizard .series-builder.-data ul li::before { content: "\2022"; color: #1B22FA; font-weight: 500; display: inline-block; width: 1em; margin-left: -1em; } .wizard .series-builder fieldset { padding: 1rem; } .wizard .series-builder label { display: flex; align-items: center; color: #999999; font-size: 0.875rem; line-height: 1.25rem; } .wizard .series-builder label:last-child { margin-bottom: 0; } .wizard .series-builder label [type="checkbox"] { display: none; } .wizard .series-builder label .checkmark { display: flex; align-items: center; justify-content: center; height: 16px; width: 16px; border: 1px solid #ECECEC; border-radius: 50%; margin-left: auto; transition: background-color 0.3s; } .wizard .series-builder label .checkmark svg { opacity: 0; fill: #FFFFFF; transition: opacity 0.3s; } .wizard .series-builder label [type="checkbox"]:checked ~ .checkmark { background-color: #1B22FA; } .wizard .series-builder label [type="checkbox"]:checked ~ .checkmark svg { opacity: 1; } .wizard .series-builder .series-container { position: relative; overflow: auto; max-height: 300px; padding-bottom: 44px; border-top: 1px solid #D9D9D9; height: 100%; } .wizard .series-builder .series-container fieldset { padding: 0.875rem 0.5rem 1rem 0.75rem; } .wizard .series-builder .series-container fieldset .element { margin-bottom: 10px; float: left; line-height: 25px; } .wizard .series-builder .series-container fieldset .element label { float: left; display: block; font-size: 0.875rem; line-height: 1.25rem; } .wizard .series-builder .series-container fieldset .element .select { float: right; } .wizard .series-builder .series-container fieldset .element .select select { margin: 0; background: #fff; font-size: 0.875em; border: 1px solid #D9D9D9; height: 30px; padding: 0 5px; margin-left: 2.5rem; -webkit-border-radius: 4px; border-radius: 4px; } .wizard .series-builder .series-container fieldset .element .select select[name="x"], .wizard .series-builder .series-container fieldset .element .select select[name="y"] { width: 156px; } .wizard .series-builder .series-container fieldset .element:last-child { margin: 0; } .wizard .series-builder .series-container .series { overflow: hidden; padding: 1rem; border-bottom: 1px solid #D9D9D9; } .wizard .series-builder .series-container .series:last-child { border-bottom: none; } .wizard .series-builder .series-container .series .title { display: flex; overflow: hidden; } .wizard .series-builder .series-container .series .title .editable { display: inline-block; text-overflow: ellipsis; max-width: 122px; white-space: nowrap; overflow: hidden; vertical-align: bottom; } .wizard .series-builder .series-container .series .title .editable form { display: inline-block; text-overflow: ellipsis; } .wizard .series-builder .series-container .series .title .editable input { margin: -10px -1px; font-size: 1em; border: 0; background: none; overflow: hidden; font-family: "Avenir Next", sans-serif; font-weight: 300; max-width: 122px; vertical-align: baseline; } .wizard .series-builder .series-container .series .title a { color: #888888; } .wizard .series-builder .series-container .series .title a:hover { color: #626262; } .wizard .series-builder .series-container .series .title h4 { margin: 0; font-weight: 500; font-size: 0.875rem; } .wizard .series-builder .series-container .series .title .removeSeries { margin-left: auto; } .wizard .series-builder .series-container .series .advanced-toggle { float: right; margin: 0 25px 10px 0; display: block; } .wizard .series-builder .series-container .series .advanced-toggle:before { position: absolute; content: "\e631"; font-family: "chart-blocks"; right: 10px; } .wizard .series-builder .series-container .series .advanced-toggle:active:before { content: "\e630"; } .wizard .series-builder .series-container .series .advanced { clear: right; border-top: solid 1px #e1e1e1; } .wizard .series-builder .series-container .series .advanced .text { float: left; } .wizard .series-builder .series-container .series .advanced .text:first-child { margin-right: 10px; } .wizard .series-builder .series-container .series .advanced .text label { float: left; display: block; font-size: 1.3em; line-height: 25px; margin: 0 5px 0 0; } .wizard .series-builder .series-container .series .advanced .text input[type="text"] { float: right; width: 40px; height: 25px; padding: 5px; } .wizard .series-builder .addSeries { color: #1B22FA; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; line-height: 1.195rem; display: flex; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid #D9D9D9; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; background: #FFFFFF; } .wizard .series-builder .addSeries svg { fill: currentColor; margin-left: auto; } .wizard .loading { margin: 0 auto; } .wizard .confirm .chart-container { text-align: center; margin: 0 auto; } .wizard .confirm .button-container { text-align: center; display: block; margin-bottom: 20px; } .wizard .confirm .button-container .button { display: inline-block; width: 200px; margin: 0 10px; } .wizard #create-form .uploadDropZone .fileupload { width: 100%; } .utility { text-align: right; } .utility label { font-size: 1.2em; margin-bottom: 5px; display: inline-block; } .grid-list > .demi { width: 32.3%; margin: 0 1% 1% 0; min-height: 1px !important; } @media (min-width: 1366px) { .grid-list > .demi { width: 49%; } } @media (min-width: 1024px) { .grid-list > .demi { width: 97%; } } .wizard__navigation { display: flex; } .wizard__navigation .nextStep { margin-left: auto; } article { position: absolute; top: 0px; height: 100%; max-height: 100%; left: 300px; right: 0; padding: 50px 0 0 0; z-index: 300; } .chart-edit article { left: 416px; } article #workarea { height: calc(100% - 84px); overflow: auto; } article #workarea > * { position: relative; height: 100%; } article .workspace-tools { background: rgba(0, 0, 0, 0.07); min-height: 100px; border-bottom: 1px solid #fff; } @media (max-width: 599px) { article { padding: 160px 0 0 0; left: 0; } } .contextMenu { visibility: hidden; position: absolute; opacity: 0; top: 45px; right: 50%; margin: 0 -30px 0 0; line-height: 1em; color: #000000; border: 1px solid #EAEAEA; font-family: "Avenir Next", sans-serif; white-space: nowrap; background: #FFFFFF; z-index: 1000; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: opacity 0.2s ease-out, padding 0.2s ease-out, visibility 0.2s ease-out; transition: opacity 0.2s ease-out, padding 0.2s ease-out, visibility 0.2s ease-out; } .contextMenu:before { display: block; width: 0; height: 0; content: url("data:image/svg+xml,%0A%3Csvg width='20px' height='9px' viewBox='0 0 20 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group' transform='translate(1.000000, 1.000000)'%3E%3Cpolygon id='Path' fill='%23FFFFFF' fill-rule='nonzero' points='9 0 17 8 1 8 4.6 4.3636'%3E%3C/polygon%3E%3Cpolyline id='Path' stroke='%23EAEAEA' stroke-linecap='square' points='18 7.5 17 7.5 16.65 7.2381 9 0 1 7.5 0 7.5'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); position: absolute; top: -13px; left: 50%; margin-left: -10px; transform: translateX(-50%); } .contextMenu.settings, .contextMenu.versions { width: 164px; padding: 0.125rem; } .contextMenu.settings::before, .contextMenu.versions::before { display: none; } .contextMenu.settings .contextMenu-item, .contextMenu.versions .contextMenu-item { border-radius: 6px; border-bottom: none; } .contextMenu.settings .contextMenu-item > a, .contextMenu.settings .contextMenu-item > span, .contextMenu.versions .contextMenu-item > a, .contextMenu.versions .contextMenu-item > span { display: block; padding: 0.375rem 0.625rem; font-size: 0.875rem; line-height: 1.25rem; } .contextMenu.settings .contextMenu-item > a:hover, .contextMenu.settings .contextMenu-item > a:focus, .contextMenu.settings .contextMenu-item > span:hover, .contextMenu.settings .contextMenu-item > span:focus, .contextMenu.versions .contextMenu-item > a:hover, .contextMenu.versions .contextMenu-item > a:focus, .contextMenu.versions .contextMenu-item > span:hover, .contextMenu.versions .contextMenu-item > span:focus { color: #000000; } .contextMenu.settings .contextMenu-item:first-child, .contextMenu.settings .contextMenu-item:last-child, .contextMenu.versions .contextMenu-item:first-child, .contextMenu.versions .contextMenu-item:last-child { -webkit-border-radius: 6px; border-radius: 6px; } .contextMenu.settings { left: 50%; right: auto; transform: translateX(-50%); } .contextMenu .versions { right: 0; } .contextMenu .contextMenu-title { padding: 0 10px; font-size: 1.6em; font-weight: 500; line-height: 26.66667px; background: #1B22FA; color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 2px; border-radius: 2px; } .contextMenu .contextMenu-item { line-height: 33.6px; border-bottom: 1px solid #EAEAEA; overflow: hidden; } .contextMenu .contextMenu-item:first-child { -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .contextMenu .contextMenu-item:last-child { border-bottom: none; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .contextMenu .contextMenu-item > a, .contextMenu .contextMenu-item > span { display: block; padding: 0 0.75rem; font-size: 0.75rem; text-align: left; color: #000000; -webkit-border-radius: 2px; border-radius: 2px; -webkit-transition: background 0.2s ease-out; transition: background 0.2s ease-out; } .contextMenu .contextMenu-item > a:hover, .contextMenu .contextMenu-item > span:hover { background: #F2F2F2; } .contextMenu .contextMenu-item i { display: inline-block; margin: 0 0 0 5px; padding: 0; vertical-align: middle; width: 25px; height: 25px; line-height: 25px; text-align: center; color: #fff; -webkit-border-radius: 50%; border-radius: 50%; } .contextMenu .contextMenu-item .version__name, .contextMenu .contextMenu-item .version__date { display: block; } .contextMenu .contextMenu-item .version__name { font-size: 0.875rem; line-height: 1.25rem; } .contextMenu .contextMenu-item .version__date { color: #979A9B; font-size: 0.625rem; line-height: 1rem; } table { width: 100%; border: none; margin-bottom: 35px; } table th, table td { padding: 0.906rem 0.75rem; line-height: 1.195rem; font-size: 0.875em; font-weight: 500; text-align: left; } table th a, table td a { color: #000000; } table th { position: relative; font-weight: 500; } table th i { font-family: "chart-blocks"; font-size: 4em; height: 90px; line-height: 90px; color: #000; } table th.sortable a { cursor: pointer; } table th b { padding: 0 0 0 5px; color: #4a5c66; font-size: 12px; font-weight: 300; font-family: chart-blocks; } table td:first-child { border-radius: 8px 0 0 8px; } table td:last-child { text-align: right; border-radius: 0 8px 8px 0; padding-right: 1.375rem; } table td a + a { margin-left: 0.625rem; } table tbody tr { text-align: left; } table tbody tr:nth-child(odd) td { background: #F2F2F2; } table.itemList { border-collapse: separate; border-spacing: 0; } table.itemList td { font-size: 1em; font-weight: 500; border-radius: 0; padding: 0.688rem 0.5rem; border: solid #D9D9D9; border-width: 0 0 1px 0; } table.itemList td:first-child { border-left-width: 1px; } table.itemList td:last-child { border-right-width: 1px; } table.itemList td:first-child, table.itemList td:last-child { border-radius: 0; } table.itemList td:last-child { padding-right: 0.5rem; } table.itemList td .icon { vertical-align: middle; } table.itemList tr:first-child td { border-top-width: 1px; } table.itemList tr:first-child td:first-child { border-top-left-radius: 8px; } table.itemList tr:first-child td:last-child { border-top-right-radius: 8px; } table.itemList tr:last-child td:first-child { border-bottom-left-radius: 8px; } table.itemList tr:last-child td:last-child { border-bottom-right-radius: 8px; } table.itemList tbody tr:nth-child(odd) td { background: none; } .datagrid .sort-caret:after { content: "\e631"; } .datagrid .ascending b:after { content: "\e630"; } .datagrid .descending b:after { content: "\e62f"; } .ellipse { display: inline-block; font-weight: 500; font-size: 0.8em; line-height: 1; min-width: 10px; padding: 3px 7px; text-align: center; vertical-align: baseline; white-space: nowrap; -webkit-border-radius: 10px; border-radius: 10px; } .ellipse-grey { background-color: #888888; color: #fff; border: solid 2px #bbbbbb; } .ellipse-white { background-color: #fff; color: #888888; } .ellipse-green { background-color: #B0DACC; color: #fff; border: solid 2px #f5fbf9; } .ellipse-blue { background-color: #24B0D0; color: #fff; border: solid 2px #73d1e7; } .ellipse-red { background-color: #FF0000; color: #fff; border: solid 2px #ff6666; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :-moz-placeholder { color: #b8c3c9; } ::-moz-placeholder { color: #b8c3c9; } ::-webkit-input-placeholder { color: #b8c3c9; } :-ms-input-placeholder { color: #b8c3c9; } ::-moz-focus-inner { border: 0; padding: 0; } :focus { outline: none; } :-moz-focus-inner { border: 0; } html { height: 100%; } body, #viewport { height: 100%; background: #FFFFFF; } .pull-right { float: right; } .margin { padding: 2.25rem 3.125rem; padding-top: 0; } article { z-index: 300; } ul.tabs li { float: left; } ul.tabs + div.well { clear: left; } ul.tabs + div.well > *:not(:first-child) { display: none; } .pills > * { display: none; } .pills > *.active { display: block; } .editable { position: relative; } .editable:hover { background-color: #DDD8FF; } :focus { outline: none; } ::-moz-focus-inner { border: 0; } /*! * jQuery contextMenu - Plugin for simple contextMenu handling * * Version: git-master * * Authors: Rodney Rehm, Addy Osmani (patches for FF) * Web: http://medialize.github.com/jQuery-contextMenu/ * * Licensed under * MIT License http://www.opensource.org/licenses/mit-license * GPL v3 http://opensource.org/licenses/GPL-3.0 * */ .context-menu-list { margin: -28px 0 0 26px; padding: 0; min-width: 120px; max-width: 250px; display: inline-block; position: absolute; list-style-type: none; border: 1px solid #AAAAAA; border-radius: 4px; background: #fff; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); font-family: "Avenir Next", sans-serif; font-size: 1em; z-index: 400 !important; } .context-menu-list:before { display: block; width: 0; height: 0; content: " "; position: absolute; top: 2px; left: -14px; border-top: 15px solid transparent; border-right: 14px solid #AAAAAA; border-bottom: 15px solid transparent; } .context-menu-item { display: block; padding: 10px; position: relative; font-family: "Avenir Next", sans-serif; font-size: 1.1em; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; } .context-menu-item span { position: relative; vertical-align: text-top; } .context-menu-separator { padding-bottom: 0; border-bottom: 1px solid #AAAAAA; } .context-menu-item > label > input, .context-menu-item > label > textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .context-menu-item.hover { cursor: pointer; background-color: #39F; color: #fff; } .context-menu-item.disabled { color: #666; } .context-menu-input.hover, .context-menu-item.disabled.hover { cursor: default; background-color: #EEE; } .context-menu-submenu:after { content: ">"; color: #666; position: absolute; top: 0; right: 3px; z-index: 1; } /* icons #protip: In case you want to use sprites for icons (which I would suggest you do) have a look at http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement .context-menu-item.icon:before {} */ .context-menu-item.icon:before { margin-right: 10px; font-size: 16px; font-family: "chart-blocks"; } /*.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }*/ .context-menu-item.icon-cut:before { content: "\e63b"; } /*.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }*/ /*.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }*/ .context-menu-item.icon-delete:before { content: "\e636"; } .context-menu-item.icon-add:before { content: "\e628"; } /*.context-menu-item.icon-quit { background-image: url(images/door.png); }*/ /* vertically align inside labels */ .context-menu-input > label > * { vertical-align: top; } /* position checkboxes and radios as icons */ .context-menu-input > label > input[type="checkbox"], .context-menu-input > label > input[type="radio"] { margin-left: -17px; } .context-menu-input > label > span { margin-left: 5px; } .context-menu-input > label, .context-menu-input > label > input[type="text"], .context-menu-input > label > textarea, .context-menu-input > label > select { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .context-menu-input > label > textarea { height: 100px; } .context-menu-item > .context-menu-list { display: none; /* re-positioned by js */ right: -5px; top: 5px; } .context-menu-item.hover > .context-menu-list { display: block; } .context-menu-accesskey { text-decoration: underline; } /* General CSS resets; * The target itself is not affected, allowing * the remainder of the document to use an * alternate box-sizing model; * Support for box-sizing is wide spread: * http://caniuse.com/#search=box-sizing */ .noUi-target * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -ms-touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; } /* Main slider bar; * Standard styles no longer incorrectly force a * width or height on the slider. */ .noUi-base { width: 100%; height: 40px; position: relative; max-width: 100%; max-height: 100%; border: 1px solid #BFBFBF; z-index: 1; } /* Handles + active state; * The :after pseudo-element wont inherit * box-sizing, so it needs to applied manually. */ .noUi-handle { background: #EEE; height: 44px; width: 44px; border: 1px solid #BFBFBF; margin: -3px 0 0 -23px; } .noUi-active { background: #E9E9E9; } .noUi-active:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; content: ""; display: block; height: 100%; border: 1px solid #DDD; } /* Styling-only classes; * Structured to prevent double declarations * for various states of the slider. */ .noUi-connect { background: Teal; } .noUi-background { background: #DDD; } /* Functional styles for handle positioning; * Note that the origins have z-index 0, the base has * z-index 1; This fixes a bug where borders become invisible. */ .noUi-origin { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; border-radius: inherit; } .noUi-origin-upper { background: inherit !important; } .noUi-z-index { z-index: 10; } /* Adaptations for the vertical slider; * Some standard styles have been extended to keep * exceptions for the vertical slider as minimal as possible. */ .noUi-vertical { width: 40px; height: 100%; } .noUi-vertical .noUi-origin { bottom: 0; left: 0; } .noUi-vertical .noUi-handle { margin: -23px 0 0 -3px; } /* Various alternate slider states; * Support for transition is widely available, * Only IE7, IE8 and IE9 will ignore these rules. * Since this is merely a progressive enhancement, * this is no problem at all. * http://caniuse.com/#search=transition */ .noUi-target[disabled] .noUi-base { background: #999; } .noUi-target[disabled] .noUi-connect { background: #BBB; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s; } .switch { position: relative; display: inline-block; vertical-align: top; width: 40px !important; height: 20px; padding: 0 3px; cursor: pointer; -webkit-border-radius: 10px; border-radius: 10px; } .switch-input { position: absolute; top: 0; left: 0; opacity: 0; } .switch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #999999; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.1); -webkit-transition: opacity 0.15s ease-out, background 0.15s ease-out; transition: opacity 0.15s ease-out, background 0.15s ease-out; } .switch-label:disabled { background-color: grey; } .switch-input:checked ~ .switch-label { background: #66CC00; } .switch-input:checked ~ .switch-label:before { opacity: 0; } .switch-input:checked ~ .switch-label:after { opacity: 1; } .switch-handle { position: absolute; top: 2px; left: 5px; width: 16px; height: 16px; background: white; -webkit-border-radius: 50%; border-radius: 50%; background: linear-gradient(top, white 40%, #f0f0f0); -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; } .switch-input:checked ~ .switch-handle { left: 19px; } .switch-green > .switch-input:checked ~ .switch-label { background: #4fb845; } /* * Copyright (c) 2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ .tasks-list-item { cursor: pointer; position: relative; } .tasks-list-cb { display: none; } .tasks-list-mark { position: relative; display: inline-block; vertical-align: top; width: 20px; height: 20px; } .tasks-list-mark:before { content: "\e62e"; font-family: "chart-blocks"; color: #8a9a9b; font-size: 1.4em; } .tasks-list-mark:after { content: ''; display: block; position: absolute; right: 0; top: 8px; width: 8px; border: solid #FF0000; border-width: 0 0 2px 14px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tasks-list-cb:checked ~ .tasks-list-mark { color: #24B0D0; } .tasks-list-cb:checked ~ .tasks-list-mark:before { color: #24B0D0; } .tasks-list-cb:checked ~ .tasks-list-mark:after { display: none; } .tasks-list-desc { font-weight: bold; color: #8a9a9b; } .tasks-list-cb:checked ~ .tasks-list-desc { color: #24B0D0; } .checkbox-list-item { line-height: 24px; position: relative; cursor: pointer; top: 3px; } .checkbox-list-item + .checkbox-list-item { border-top: 1px solid #f0f2f3; } .checkbox-list-cb { display: none; } .checkbox-list-mark { position: relative; display: inline-block; vertical-align: top; width: 20px; height: 20px; border: 2px solid #c4cbd2; border-radius: 12px; } .checkbox-list-mark:before { content: ''; display: none; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -6px; height: 4px; width: 8px; border: solid #39ca74; border-width: 0 0 4px 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .checkbox-list-cb:checked ~ .checkbox-list-mark { border-color: #39ca74; } .checkbox-list-cb:checked ~ .checkbox-list-mark:before { display: block; } .checkbox-list-desc { font-weight: bold; color: #8a9a9b; } .checkbox-list-cb:checked ~ .checkbox-list-desc { color: #34bf6e; text-decoration: line-through; } html { height: 100%; } body { height: 100%; margin: 0; padding: 0; color: #000000; font-family: "Avenir Next", sans-serif; font-weight: 500 !important; font-size: 16px; line-height: 1.366rem; overflow: hidden; } body #viewport { position: relative; overflow: hidden; } .main-container { display: flex; height: 100%; flex: 1; } .content-container { position: relative; max-width: 1200px; padding: 20px; margin: 0 auto 0 auto; color: #818181; -webkit-border-radius: 4px; border-radius: 4px; } .content-container.boxed { background: #fff; border: 1px solid #E6E6E6; border-bottom: 4px solid #E6E6E6; } .content-container.large { width: 820px; } .content-container.medium { width: 600px; } .content-container.small { width: 300px; } .content-container.auto { width: auto; margin: auto; display: table; } .content-container .content-container-body { position: relative; height: 72%; overflow-x: hidden; overflow-y: auto; } .content-container h3 { font-size: 1.8em; font-weight: 600; margin-top: 0; } .meta-details { display: flex; align-items: center; margin-bottom: 2.5rem; } .meta-details h3 { margin: 0; } .meta-details .button, .meta-details .search { margin-left: auto; } .template-actions { margin-top: 20px; } .max-height { height: 100%; } .scroll-y { overflow-y: auto; } .font-small { font-size: 70%; } .font-medium { font-size: 120%; } .font-large { font-size: 150%; } .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { min-height: 1px; float: left; position: relative; height: auto; } .row { width: 100%; margin: 0px 0px 20px 0px; } .c1 { width: 8.33%; } .c2 { width: 16.66%; } .c3 { width: 25%; } .c4 { width: 33.3%; } .c5 { width: 41.66%; } .c6 { width: 50%; } .c7 { width: 58.33%; } .c8 { width: 66.66%; } .c9 { width: 75%; } .c10 { width: 83.33%; } .c11 { width: 91.66%; } .c12 { width: 100%; } .clearfix { clear: both; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .mt { margin-top: 20px; } .mr { margin-right: 20px; } .mb { margin-bottom: 20px; } .ml { margin-left: 20px; } @media (min-width: 1024px) { .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { clear: left; width: 100%; } }