@charset "UTF-8"; /* Artifakt Element definitions. */ @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Hair.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Hair.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Hair.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Hair.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Hair.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 100; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Thin.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Thin.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Thin.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Thin.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Thin.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 200; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Light.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Light.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Light.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Light.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Light.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 300; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Regular.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Regular.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Regular.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Regular.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Bold.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Bold.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Bold.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Bold.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 500; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Book.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Book.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Book.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Book.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Book.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 600; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Medium.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Medium.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Medium.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Medium.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Medium.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 700; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Black.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Black.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Black.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Black.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Black.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 800; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Heavy.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Heavy.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Heavy.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Heavy.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Heavy.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 900; font-style: normal; } /* Artifakt Legend definitions. */ @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Hair.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Hair.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Hair.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Hair.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Hair.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 100; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Thin.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Thin.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Thin.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Thin.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Thin.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 200; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Light.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Light.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Light.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Light.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Light.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 300; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Regular.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Regular.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Regular.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Regular.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Bold.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Bold.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Bold.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Bold.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 500; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Book.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Book.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Book.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Book.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Book.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 600; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Medium.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Medium.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Medium.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Medium.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Medium.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 700; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Black.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Black.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Black.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Black.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Black.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 800; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Heavy.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Heavy.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Heavy.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Heavy.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Heavy.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 900; font-style: normal; } /* ----------- BASE VARS ----------- */ /* ----------- LAYOUT ----------- */ /* ----------- HORIZONTAL GRID ----------- */ /* ----------- RESPONSIVE ----------- */ /* ----------- VERTICAL GRID ----------- */ /* ----------- COLORS GENERAL ----------- */ /* ----------- SIGN UP ----------- */ /* ----------- COLORS EDITOR ----------- */ /* ----------- HOVERS ----------- */ /* ----------- PARTNERS ----------- */ /* ----------- FONT & SIZES ----------- */ /* ----------- ADDITIONAL TITLE PROPERTIES ----------- */ /* ----------- BODY ----------- */ /* ----------- TEXT ----------- */ /* ----------- LINK ----------- */ /* ----------- BUTTON ----------- */ /* ----------- LISTS ----------- */ /* ----------- CONTENT STYLING THEMES ----------- */ /* ----------- FORMS ----------- */ /* ----------------- BUTTON COLORS ----------------- */ /* ----------------- PARTNER COLORING ----------------- */ /* ----------------- RESPONSIVE GRID ----------------- */ /* ----------------- RESPONSIVE HIDE ----------------- */ @media only screen and (max-width: 991px) { .mobile--hide { display: none; } } @media only screen and (min-width: 480px) and (max-width: 991px) { .tablet--hide { display: none; } } @media only screen and (min-width: 600px) { .tablet--large--hide { display: none; } } @media only screen and (max-width: 599px) { .tablet--large--down--hide { display: none; } } @media only screen and (min-width: 800px) { .width--800--hide { display: none; } } @media only screen and (max-width: 799px) { .width--800--down--hide { display: none; } } @media only screen and (min-width: 1000px) { .width--1000--hide { display: none; } } @media only screen and (max-width: 999px) { .width--1000--down--hide { display: none; } } @media only screen and (min-width: 992px) { .desktop--hide { display: none; } } @media only screen and (max-width: 1199px) { .desktop--small--hide { display: none; } } @media only screen and (min-width: 1200px) { .desktop--large--hide { display: none; } } @media only screen and (min-width: 1800px) { .desktop--huge--hide { display: none; } } /* ----------------- VENDOR PREFIXER ----------------- */ /* ----------------- VENDOR KEYFRAME ----------------- */ /* ----------------- Placehoolder mixin https://gist.github.com/antsa/2170024 ----------------- */ /* ----------------- Hover buttons style ----------------- */ /* ----------------- Ease Transitions ----------------- */ /* ----------------- No Highlighting ----------------- */ /* ----------------- Flexbox ----------------- */ /* ----------- RESPONSIVE ----------- */ /* ----------- COLORS GENERAL ----------- */ /* ----------- PARTNERS ----------- */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type=search] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { height: 100%; } body { font-family: "ArtifaktElement", "Roboto", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, 宋体, SimSun, 华文细黑, STXihei, 新細明體, PMingLiU, 蘋果儷細宋, Apple LiSung Light, sans-serif; background-color: #f4f5f6; color: #34495e; font-size: 15px; min-height: 100%; } /*------------------------------------*\ $VARIABLES \*------------------------------------*/ /** * Set the spacing between your grid items. */ /** * Would you like push and pull classes enabled? */ /** * Using `inline-block` means that the grid items need their whitespace removing * in order for them to work correctly. Set the following to true if you are * going to achieve this by manually removing/commenting out any whitespace in * your HTML yourself. * * Setting this to false invokes a hack which cannot always be guaranteed, * please see the following for more detail: * * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 */ /** * Define your breakpoints. The first value is the prefix that shall be used for * your classes (e.g. `.palm--one-half`), the second value is the media query * that the breakpoint fires at. */ /** * Define which namespaced breakpoints you would like to generate for each of * widths, push and pull. This is handy if you only need pull on, say, desk, or * you only need a new width breakpoint at mobile sizes. It allows you to only * compile as much CSS as you need. All are turned on by default, but you can * add and remove breakpoints at will. * * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive` * have been set to ‘true’. */ /*------------------------------------*\ $GRID SETUP \*------------------------------------*/ /** * 1. Allow the grid system to be used on lists. * 2. Remove any margins and paddings that might affect the grid system. * 3. Apply a negative `margin-left` to negate the columns’ gutters. */ .grid { list-style: none; /* [1] */ margin: 0; /* [2] */ padding: 0; /* [2] */ margin-left: -20px; /* [3] */ letter-spacing: -0.31em; } /* Opera hack */ .opera:-o-prefocus, .grid { word-spacing: -0.43em; } /** * 1. Cause columns to stack side-by-side. * 2. Space columns apart. * 3. Align columns to the tops of each other. * 4. Full-width unless told to behave otherwise. * 5. Required to combine fluid widths and fixed gutters. */ .grid__item { display: inline-block; /* [1] */ padding-left: 20px; /* [2] */ vertical-align: top; /* [3] */ width: 100%; /* [4] */ -webkit-box-sizing: border-box; /* [5] */ -moz-box-sizing: border-box; /* [5] */ box-sizing: border-box; /* [5] */ letter-spacing: normal; word-spacing: normal; } /** * Reversed grids allow you to structure your source in the opposite order to * how your rendered layout will appear. Extends `.grid`. */ .grid--rev { direction: rtl; text-align: left; } .grid--rev > .grid__item { direction: ltr; text-align: left; } /** * Gutterless grids have all the properties of regular grids, minus any spacing. * Extends `.grid`. */ .grid--full { margin-left: 0; } .grid--full > .grid__item { padding-left: 0; } /** * Align the entire grid to the right. Extends `.grid`. */ .grid--right { text-align: right; } .grid--right > .grid__item { text-align: left; } /** * Centered grids align grid items centrally without needing to use push or pull * classes. Extends `.grid`. */ .grid--center { text-align: center; } .grid--center > .grid__item { text-align: left; } /** * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends * `.grid`. */ .grid--middle > .grid__item { vertical-align: middle; } .grid--bottom > .grid__item { vertical-align: bottom; } /** * Create grids with narrower gutters. Extends `.grid`. */ .grid--narrow { margin-left: -10px; } .grid--narrow > .grid__item { padding-left: 10px; } /** * Create grids with wider gutters. Extends `.grid`. */ .grid--wide { margin-left: -40px; } .grid--wide > .grid__item { padding-left: 40px; } /*------------------------------------*\ $WIDTHS \*------------------------------------*/ /** * Create our width classes, prefixed by the specified namespace. */ /** * Our regular, non-responsive width classes. */ /** * Whole */ .one-whole { width: 100%; } /** * Halves */ .one-half, .six-twelfths, .five-tenths, .four-eighths, .three-sixths, .two-quarters { width: 50%; } /** * Thirds */ .one-third, .four-twelfths, .two-sixths { width: 33.333%; } .two-thirds, .eight-twelfths, .four-sixths { width: 66.666%; } /** * Quarters */ .one-quarter, .three-twelfths, .two-eighths { width: 25%; } .three-quarters, .nine-twelfths, .six-eighths { width: 75%; } /** * Fifths */ .one-fifth, .two-tenths { width: 20%; } .two-fifths, .four-tenths { width: 40%; } .three-fifths, .six-tenths { width: 60%; } .four-fifths, .eight-tenths { width: 80%; } /** * Sixths */ .one-sixth, .two-twelfths { width: 16.666%; } .five-sixths, .ten-twelfths { width: 83.333%; } /** * Eighths */ .one-eighth { width: 12.5%; } .three-eighths { width: 37.5%; } .five-eighths { width: 62.5%; } .seven-eighths { width: 87.5%; } /** * Tenths */ .one-tenth { width: 10%; } .three-tenths { width: 30%; } .seven-tenths { width: 70%; } .nine-tenths { width: 90%; } /** * Twelfths */ .one-twelfth { width: 8.333%; } .five-twelfths { width: 41.666%; } .seven-twelfths { width: 58.333%; } .eleven-twelfths { width: 91.666%; } /** * Our responsive classes, if we have enabled them. */ @media only screen and (max-width: 991px) { /** * Whole */ .mobile--one-whole { width: 100%; } /** * Halves */ .mobile--one-half, .mobile--six-twelfths, .mobile--five-tenths, .mobile--four-eighths, .mobile--three-sixths, .mobile--two-quarters { width: 50%; } /** * Thirds */ .mobile--one-third, .mobile--four-twelfths, .mobile--two-sixths { width: 33.333%; } .mobile--two-thirds, .mobile--eight-twelfths, .mobile--four-sixths { width: 66.666%; } /** * Quarters */ .mobile--one-quarter, .mobile--three-twelfths, .mobile--two-eighths { width: 25%; } .mobile--three-quarters, .mobile--nine-twelfths, .mobile--six-eighths { width: 75%; } /** * Fifths */ .mobile--one-fifth, .mobile--two-tenths { width: 20%; } .mobile--two-fifths, .mobile--four-tenths { width: 40%; } .mobile--three-fifths, .mobile--six-tenths { width: 60%; } .mobile--four-fifths, .mobile--eight-tenths { width: 80%; } /** * Sixths */ .mobile--one-sixth, .mobile--two-twelfths { width: 16.666%; } .mobile--five-sixths, .mobile--ten-twelfths { width: 83.333%; } /** * Eighths */ .mobile--one-eighth { width: 12.5%; } .mobile--three-eighths { width: 37.5%; } .mobile--five-eighths { width: 62.5%; } .mobile--seven-eighths { width: 87.5%; } /** * Tenths */ .mobile--one-tenth { width: 10%; } .mobile--three-tenths { width: 30%; } .mobile--seven-tenths { width: 70%; } .mobile--nine-tenths { width: 90%; } /** * Twelfths */ .mobile--one-twelfth { width: 8.333%; } .mobile--five-twelfths { width: 41.666%; } .mobile--seven-twelfths { width: 58.333%; } .mobile--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 480px) and (max-width: 991px) { /** * Whole */ .tablet--one-whole { width: 100%; } /** * Halves */ .tablet--one-half, .tablet--six-twelfths, .tablet--five-tenths, .tablet--four-eighths, .tablet--three-sixths, .tablet--two-quarters { width: 50%; } /** * Thirds */ .tablet--one-third, .tablet--four-twelfths, .tablet--two-sixths { width: 33.333%; } .tablet--two-thirds, .tablet--eight-twelfths, .tablet--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--one-quarter, .tablet--three-twelfths, .tablet--two-eighths { width: 25%; } .tablet--three-quarters, .tablet--nine-twelfths, .tablet--six-eighths { width: 75%; } /** * Fifths */ .tablet--one-fifth, .tablet--two-tenths { width: 20%; } .tablet--two-fifths, .tablet--four-tenths { width: 40%; } .tablet--three-fifths, .tablet--six-tenths { width: 60%; } .tablet--four-fifths, .tablet--eight-tenths { width: 80%; } /** * Sixths */ .tablet--one-sixth, .tablet--two-twelfths { width: 16.666%; } .tablet--five-sixths, .tablet--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--one-eighth { width: 12.5%; } .tablet--three-eighths { width: 37.5%; } .tablet--five-eighths { width: 62.5%; } .tablet--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--one-tenth { width: 10%; } .tablet--three-tenths { width: 30%; } .tablet--seven-tenths { width: 70%; } .tablet--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--one-twelfth { width: 8.333%; } .tablet--five-twelfths { width: 41.666%; } .tablet--seven-twelfths { width: 58.333%; } .tablet--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 600px) { /** * Whole */ .tablet--large--one-whole { width: 100%; } /** * Halves */ .tablet--large--one-half, .tablet--large--six-twelfths, .tablet--large--five-tenths, .tablet--large--four-eighths, .tablet--large--three-sixths, .tablet--large--two-quarters { width: 50%; } /** * Thirds */ .tablet--large--one-third, .tablet--large--four-twelfths, .tablet--large--two-sixths { width: 33.333%; } .tablet--large--two-thirds, .tablet--large--eight-twelfths, .tablet--large--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--large--one-quarter, .tablet--large--three-twelfths, .tablet--large--two-eighths { width: 25%; } .tablet--large--three-quarters, .tablet--large--nine-twelfths, .tablet--large--six-eighths { width: 75%; } /** * Fifths */ .tablet--large--one-fifth, .tablet--large--two-tenths { width: 20%; } .tablet--large--two-fifths, .tablet--large--four-tenths { width: 40%; } .tablet--large--three-fifths, .tablet--large--six-tenths { width: 60%; } .tablet--large--four-fifths, .tablet--large--eight-tenths { width: 80%; } /** * Sixths */ .tablet--large--one-sixth, .tablet--large--two-twelfths { width: 16.666%; } .tablet--large--five-sixths, .tablet--large--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--large--one-eighth { width: 12.5%; } .tablet--large--three-eighths { width: 37.5%; } .tablet--large--five-eighths { width: 62.5%; } .tablet--large--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--large--one-tenth { width: 10%; } .tablet--large--three-tenths { width: 30%; } .tablet--large--seven-tenths { width: 70%; } .tablet--large--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--large--one-twelfth { width: 8.333%; } .tablet--large--five-twelfths { width: 41.666%; } .tablet--large--seven-twelfths { width: 58.333%; } .tablet--large--eleven-twelfths { width: 91.666%; } } @media only screen and (max-width: 600px) { /** * Whole */ .tablet--large-down--one-whole { width: 100%; } /** * Halves */ .tablet--large-down--one-half, .tablet--large-down--six-twelfths, .tablet--large-down--five-tenths, .tablet--large-down--four-eighths, .tablet--large-down--three-sixths, .tablet--large-down--two-quarters { width: 50%; } /** * Thirds */ .tablet--large-down--one-third, .tablet--large-down--four-twelfths, .tablet--large-down--two-sixths { width: 33.333%; } .tablet--large-down--two-thirds, .tablet--large-down--eight-twelfths, .tablet--large-down--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--large-down--one-quarter, .tablet--large-down--three-twelfths, .tablet--large-down--two-eighths { width: 25%; } .tablet--large-down--three-quarters, .tablet--large-down--nine-twelfths, .tablet--large-down--six-eighths { width: 75%; } /** * Fifths */ .tablet--large-down--one-fifth, .tablet--large-down--two-tenths { width: 20%; } .tablet--large-down--two-fifths, .tablet--large-down--four-tenths { width: 40%; } .tablet--large-down--three-fifths, .tablet--large-down--six-tenths { width: 60%; } .tablet--large-down--four-fifths, .tablet--large-down--eight-tenths { width: 80%; } /** * Sixths */ .tablet--large-down--one-sixth, .tablet--large-down--two-twelfths { width: 16.666%; } .tablet--large-down--five-sixths, .tablet--large-down--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--large-down--one-eighth { width: 12.5%; } .tablet--large-down--three-eighths { width: 37.5%; } .tablet--large-down--five-eighths { width: 62.5%; } .tablet--large-down--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--large-down--one-tenth { width: 10%; } .tablet--large-down--three-tenths { width: 30%; } .tablet--large-down--seven-tenths { width: 70%; } .tablet--large-down--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--large-down--one-twelfth { width: 8.333%; } .tablet--large-down--five-twelfths { width: 41.666%; } .tablet--large-down--seven-twelfths { width: 58.333%; } .tablet--large-down--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .desktop--one-whole { width: 100%; } /** * Halves */ .desktop--one-half, .desktop--six-twelfths, .desktop--five-tenths, .desktop--four-eighths, .desktop--three-sixths, .desktop--two-quarters { width: 50%; } /** * Thirds */ .desktop--one-third, .desktop--four-twelfths, .desktop--two-sixths { width: 33.333%; } .desktop--two-thirds, .desktop--eight-twelfths, .desktop--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--one-quarter, .desktop--three-twelfths, .desktop--two-eighths { width: 25%; } .desktop--three-quarters, .desktop--nine-twelfths, .desktop--six-eighths { width: 75%; } /** * Fifths */ .desktop--one-fifth, .desktop--two-tenths { width: 20%; } .desktop--two-fifths, .desktop--four-tenths { width: 40%; } .desktop--three-fifths, .desktop--six-tenths { width: 60%; } .desktop--four-fifths, .desktop--eight-tenths { width: 80%; } /** * Sixths */ .desktop--one-sixth, .desktop--two-twelfths { width: 16.666%; } .desktop--five-sixths, .desktop--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--one-eighth { width: 12.5%; } .desktop--three-eighths { width: 37.5%; } .desktop--five-eighths { width: 62.5%; } .desktop--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--one-tenth { width: 10%; } .desktop--three-tenths { width: 30%; } .desktop--seven-tenths { width: 70%; } .desktop--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--one-twelfth { width: 8.333%; } .desktop--five-twelfths { width: 41.666%; } .desktop--seven-twelfths { width: 58.333%; } .desktop--eleven-twelfths { width: 91.666%; } } @media only screen and (max-width: 1199px) { /** * Whole */ .desktop--small--one-whole { width: 100%; } /** * Halves */ .desktop--small--one-half, .desktop--small--six-twelfths, .desktop--small--five-tenths, .desktop--small--four-eighths, .desktop--small--three-sixths, .desktop--small--two-quarters { width: 50%; } /** * Thirds */ .desktop--small--one-third, .desktop--small--four-twelfths, .desktop--small--two-sixths { width: 33.333%; } .desktop--small--two-thirds, .desktop--small--eight-twelfths, .desktop--small--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--small--one-quarter, .desktop--small--three-twelfths, .desktop--small--two-eighths { width: 25%; } .desktop--small--three-quarters, .desktop--small--nine-twelfths, .desktop--small--six-eighths { width: 75%; } /** * Fifths */ .desktop--small--one-fifth, .desktop--small--two-tenths { width: 20%; } .desktop--small--two-fifths, .desktop--small--four-tenths { width: 40%; } .desktop--small--three-fifths, .desktop--small--six-tenths { width: 60%; } .desktop--small--four-fifths, .desktop--small--eight-tenths { width: 80%; } /** * Sixths */ .desktop--small--one-sixth, .desktop--small--two-twelfths { width: 16.666%; } .desktop--small--five-sixths, .desktop--small--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--small--one-eighth { width: 12.5%; } .desktop--small--three-eighths { width: 37.5%; } .desktop--small--five-eighths { width: 62.5%; } .desktop--small--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--small--one-tenth { width: 10%; } .desktop--small--three-tenths { width: 30%; } .desktop--small--seven-tenths { width: 70%; } .desktop--small--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--small--one-twelfth { width: 8.333%; } .desktop--small--five-twelfths { width: 41.666%; } .desktop--small--seven-twelfths { width: 58.333%; } .desktop--small--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 1200px) { /** * Whole */ .desktop--large--one-whole { width: 100%; } /** * Halves */ .desktop--large--one-half, .desktop--large--six-twelfths, .desktop--large--five-tenths, .desktop--large--four-eighths, .desktop--large--three-sixths, .desktop--large--two-quarters { width: 50%; } /** * Thirds */ .desktop--large--one-third, .desktop--large--four-twelfths, .desktop--large--two-sixths { width: 33.333%; } .desktop--large--two-thirds, .desktop--large--eight-twelfths, .desktop--large--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--large--one-quarter, .desktop--large--three-twelfths, .desktop--large--two-eighths { width: 25%; } .desktop--large--three-quarters, .desktop--large--nine-twelfths, .desktop--large--six-eighths { width: 75%; } /** * Fifths */ .desktop--large--one-fifth, .desktop--large--two-tenths { width: 20%; } .desktop--large--two-fifths, .desktop--large--four-tenths { width: 40%; } .desktop--large--three-fifths, .desktop--large--six-tenths { width: 60%; } .desktop--large--four-fifths, .desktop--large--eight-tenths { width: 80%; } /** * Sixths */ .desktop--large--one-sixth, .desktop--large--two-twelfths { width: 16.666%; } .desktop--large--five-sixths, .desktop--large--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--large--one-eighth { width: 12.5%; } .desktop--large--three-eighths { width: 37.5%; } .desktop--large--five-eighths { width: 62.5%; } .desktop--large--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--large--one-tenth { width: 10%; } .desktop--large--three-tenths { width: 30%; } .desktop--large--seven-tenths { width: 70%; } .desktop--large--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--large--one-twelfth { width: 8.333%; } .desktop--large--five-twelfths { width: 41.666%; } .desktop--large--seven-twelfths { width: 58.333%; } .desktop--large--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 1800px) { /** * Whole */ .desktop--huge--one-whole { width: 100%; } /** * Halves */ .desktop--huge--one-half, .desktop--huge--six-twelfths, .desktop--huge--five-tenths, .desktop--huge--four-eighths, .desktop--huge--three-sixths, .desktop--huge--two-quarters { width: 50%; } /** * Thirds */ .desktop--huge--one-third, .desktop--huge--four-twelfths, .desktop--huge--two-sixths { width: 33.333%; } .desktop--huge--two-thirds, .desktop--huge--eight-twelfths, .desktop--huge--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--huge--one-quarter, .desktop--huge--three-twelfths, .desktop--huge--two-eighths { width: 25%; } .desktop--huge--three-quarters, .desktop--huge--nine-twelfths, .desktop--huge--six-eighths { width: 75%; } /** * Fifths */ .desktop--huge--one-fifth, .desktop--huge--two-tenths { width: 20%; } .desktop--huge--two-fifths, .desktop--huge--four-tenths { width: 40%; } .desktop--huge--three-fifths, .desktop--huge--six-tenths { width: 60%; } .desktop--huge--four-fifths, .desktop--huge--eight-tenths { width: 80%; } /** * Sixths */ .desktop--huge--one-sixth, .desktop--huge--two-twelfths { width: 16.666%; } .desktop--huge--five-sixths, .desktop--huge--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--huge--one-eighth { width: 12.5%; } .desktop--huge--three-eighths { width: 37.5%; } .desktop--huge--five-eighths { width: 62.5%; } .desktop--huge--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--huge--one-tenth { width: 10%; } .desktop--huge--three-tenths { width: 30%; } .desktop--huge--seven-tenths { width: 70%; } .desktop--huge--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--huge--one-twelfth { width: 8.333%; } .desktop--huge--five-twelfths { width: 41.666%; } .desktop--huge--seven-twelfths { width: 58.333%; } .desktop--huge--eleven-twelfths { width: 91.666%; } } /*------------------------------------*\ $PUSH \*------------------------------------*/ /** * Push classes, to move grid items over to the right by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*=push--] { position: relative; } /** * Whole */ .push--one-whole { left: 100%; } /** * Halves */ .push--one-half, .push--six-twelfths, .push--five-tenths, .push--four-eighths, .push--three-sixths, .push--two-quarters { left: 50%; } /** * Thirds */ .push--one-third, .push--four-twelfths, .push--two-sixths { left: 33.333%; } .push--two-thirds, .push--eight-twelfths, .push--four-sixths { left: 66.666%; } /** * Quarters */ .push--one-quarter, .push--three-twelfths, .push--two-eighths { left: 25%; } .push--three-quarters, .push--nine-twelfths, .push--six-eighths { left: 75%; } /** * Fifths */ .push--one-fifth, .push--two-tenths { left: 20%; } .push--two-fifths, .push--four-tenths { left: 40%; } .push--three-fifths, .push--six-tenths { left: 60%; } .push--four-fifths, .push--eight-tenths { left: 80%; } /** * Sixths */ .push--one-sixth, .push--two-twelfths { left: 16.666%; } .push--five-sixths, .push--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--one-eighth { left: 12.5%; } .push--three-eighths { left: 37.5%; } .push--five-eighths { left: 62.5%; } .push--seven-eighths { left: 87.5%; } /** * Tenths */ .push--one-tenth { left: 10%; } .push--three-tenths { left: 30%; } .push--seven-tenths { left: 70%; } .push--nine-tenths { left: 90%; } /** * Twelfths */ .push--one-twelfth { left: 8.333%; } .push--five-twelfths { left: 41.666%; } .push--seven-twelfths { left: 58.333%; } .push--eleven-twelfths { left: 91.666%; } @media only screen and (max-width: 991px) { /** * Whole */ .push--mobile--one-whole { left: 100%; } /** * Halves */ .push--mobile--one-half, .push--mobile--six-twelfths, .push--mobile--five-tenths, .push--mobile--four-eighths, .push--mobile--three-sixths, .push--mobile--two-quarters { left: 50%; } /** * Thirds */ .push--mobile--one-third, .push--mobile--four-twelfths, .push--mobile--two-sixths { left: 33.333%; } .push--mobile--two-thirds, .push--mobile--eight-twelfths, .push--mobile--four-sixths { left: 66.666%; } /** * Quarters */ .push--mobile--one-quarter, .push--mobile--three-twelfths, .push--mobile--two-eighths { left: 25%; } .push--mobile--three-quarters, .push--mobile--nine-twelfths, .push--mobile--six-eighths { left: 75%; } /** * Fifths */ .push--mobile--one-fifth, .push--mobile--two-tenths { left: 20%; } .push--mobile--two-fifths, .push--mobile--four-tenths { left: 40%; } .push--mobile--three-fifths, .push--mobile--six-tenths { left: 60%; } .push--mobile--four-fifths, .push--mobile--eight-tenths { left: 80%; } /** * Sixths */ .push--mobile--one-sixth, .push--mobile--two-twelfths { left: 16.666%; } .push--mobile--five-sixths, .push--mobile--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--mobile--one-eighth { left: 12.5%; } .push--mobile--three-eighths { left: 37.5%; } .push--mobile--five-eighths { left: 62.5%; } .push--mobile--seven-eighths { left: 87.5%; } /** * Tenths */ .push--mobile--one-tenth { left: 10%; } .push--mobile--three-tenths { left: 30%; } .push--mobile--seven-tenths { left: 70%; } .push--mobile--nine-tenths { left: 90%; } /** * Twelfths */ .push--mobile--one-twelfth { left: 8.333%; } .push--mobile--five-twelfths { left: 41.666%; } .push--mobile--seven-twelfths { left: 58.333%; } .push--mobile--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .push--desktop--one-whole { left: 100%; } /** * Halves */ .push--desktop--one-half, .push--desktop--six-twelfths, .push--desktop--five-tenths, .push--desktop--four-eighths, .push--desktop--three-sixths, .push--desktop--two-quarters { left: 50%; } /** * Thirds */ .push--desktop--one-third, .push--desktop--four-twelfths, .push--desktop--two-sixths { left: 33.333%; } .push--desktop--two-thirds, .push--desktop--eight-twelfths, .push--desktop--four-sixths { left: 66.666%; } /** * Quarters */ .push--desktop--one-quarter, .push--desktop--three-twelfths, .push--desktop--two-eighths { left: 25%; } .push--desktop--three-quarters, .push--desktop--nine-twelfths, .push--desktop--six-eighths { left: 75%; } /** * Fifths */ .push--desktop--one-fifth, .push--desktop--two-tenths { left: 20%; } .push--desktop--two-fifths, .push--desktop--four-tenths { left: 40%; } .push--desktop--three-fifths, .push--desktop--six-tenths { left: 60%; } .push--desktop--four-fifths, .push--desktop--eight-tenths { left: 80%; } /** * Sixths */ .push--desktop--one-sixth, .push--desktop--two-twelfths { left: 16.666%; } .push--desktop--five-sixths, .push--desktop--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--desktop--one-eighth { left: 12.5%; } .push--desktop--three-eighths { left: 37.5%; } .push--desktop--five-eighths { left: 62.5%; } .push--desktop--seven-eighths { left: 87.5%; } /** * Tenths */ .push--desktop--one-tenth { left: 10%; } .push--desktop--three-tenths { left: 30%; } .push--desktop--seven-tenths { left: 70%; } .push--desktop--nine-tenths { left: 90%; } /** * Twelfths */ .push--desktop--one-twelfth { left: 8.333%; } .push--desktop--five-twelfths { left: 41.666%; } .push--desktop--seven-twelfths { left: 58.333%; } .push--desktop--eleven-twelfths { left: 91.666%; } } /*------------------------------------*\ $PULL \*------------------------------------*/ /** * Pull classes, to move grid items back to the left by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*=pull--] { position: relative; } /** * Whole */ .pull--one-whole { right: 100%; } /** * Halves */ .pull--one-half, .pull--six-twelfths, .pull--five-tenths, .pull--four-eighths, .pull--three-sixths, .pull--two-quarters { right: 50%; } /** * Thirds */ .pull--one-third, .pull--four-twelfths, .pull--two-sixths { right: 33.333%; } .pull--two-thirds, .pull--eight-twelfths, .pull--four-sixths { right: 66.666%; } /** * Quarters */ .pull--one-quarter, .pull--three-twelfths, .pull--two-eighths { right: 25%; } .pull--three-quarters, .pull--nine-twelfths, .pull--six-eighths { right: 75%; } /** * Fifths */ .pull--one-fifth, .pull--two-tenths { right: 20%; } .pull--two-fifths, .pull--four-tenths { right: 40%; } .pull--three-fifths, .pull--six-tenths { right: 60%; } .pull--four-fifths, .pull--eight-tenths { right: 80%; } /** * Sixths */ .pull--one-sixth, .pull--two-twelfths { right: 16.666%; } .pull--five-sixths, .pull--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--one-eighth { right: 12.5%; } .pull--three-eighths { right: 37.5%; } .pull--five-eighths { right: 62.5%; } .pull--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--one-tenth { right: 10%; } .pull--three-tenths { right: 30%; } .pull--seven-tenths { right: 70%; } .pull--nine-tenths { right: 90%; } /** * Twelfths */ .pull--one-twelfth { right: 8.333%; } .pull--five-twelfths { right: 41.666%; } .pull--seven-twelfths { right: 58.333%; } .pull--eleven-twelfths { right: 91.666%; } @media only screen and (max-width: 991px) { /** * Whole */ .pull--mobile--one-whole { right: 100%; } /** * Halves */ .pull--mobile--one-half, .pull--mobile--six-twelfths, .pull--mobile--five-tenths, .pull--mobile--four-eighths, .pull--mobile--three-sixths, .pull--mobile--two-quarters { right: 50%; } /** * Thirds */ .pull--mobile--one-third, .pull--mobile--four-twelfths, .pull--mobile--two-sixths { right: 33.333%; } .pull--mobile--two-thirds, .pull--mobile--eight-twelfths, .pull--mobile--four-sixths { right: 66.666%; } /** * Quarters */ .pull--mobile--one-quarter, .pull--mobile--three-twelfths, .pull--mobile--two-eighths { right: 25%; } .pull--mobile--three-quarters, .pull--mobile--nine-twelfths, .pull--mobile--six-eighths { right: 75%; } /** * Fifths */ .pull--mobile--one-fifth, .pull--mobile--two-tenths { right: 20%; } .pull--mobile--two-fifths, .pull--mobile--four-tenths { right: 40%; } .pull--mobile--three-fifths, .pull--mobile--six-tenths { right: 60%; } .pull--mobile--four-fifths, .pull--mobile--eight-tenths { right: 80%; } /** * Sixths */ .pull--mobile--one-sixth, .pull--mobile--two-twelfths { right: 16.666%; } .pull--mobile--five-sixths, .pull--mobile--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--mobile--one-eighth { right: 12.5%; } .pull--mobile--three-eighths { right: 37.5%; } .pull--mobile--five-eighths { right: 62.5%; } .pull--mobile--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--mobile--one-tenth { right: 10%; } .pull--mobile--three-tenths { right: 30%; } .pull--mobile--seven-tenths { right: 70%; } .pull--mobile--nine-tenths { right: 90%; } /** * Twelfths */ .pull--mobile--one-twelfth { right: 8.333%; } .pull--mobile--five-twelfths { right: 41.666%; } .pull--mobile--seven-twelfths { right: 58.333%; } .pull--mobile--eleven-twelfths { right: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .pull--desktop--one-whole { right: 100%; } /** * Halves */ .pull--desktop--one-half, .pull--desktop--six-twelfths, .pull--desktop--five-tenths, .pull--desktop--four-eighths, .pull--desktop--three-sixths, .pull--desktop--two-quarters { right: 50%; } /** * Thirds */ .pull--desktop--one-third, .pull--desktop--four-twelfths, .pull--desktop--two-sixths { right: 33.333%; } .pull--desktop--two-thirds, .pull--desktop--eight-twelfths, .pull--desktop--four-sixths { right: 66.666%; } /** * Quarters */ .pull--desktop--one-quarter, .pull--desktop--three-twelfths, .pull--desktop--two-eighths { right: 25%; } .pull--desktop--three-quarters, .pull--desktop--nine-twelfths, .pull--desktop--six-eighths { right: 75%; } /** * Fifths */ .pull--desktop--one-fifth, .pull--desktop--two-tenths { right: 20%; } .pull--desktop--two-fifths, .pull--desktop--four-tenths { right: 40%; } .pull--desktop--three-fifths, .pull--desktop--six-tenths { right: 60%; } .pull--desktop--four-fifths, .pull--desktop--eight-tenths { right: 80%; } /** * Sixths */ .pull--desktop--one-sixth, .pull--desktop--two-twelfths { right: 16.666%; } .pull--desktop--five-sixths, .pull--desktop--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--desktop--one-eighth { right: 12.5%; } .pull--desktop--three-eighths { right: 37.5%; } .pull--desktop--five-eighths { right: 62.5%; } .pull--desktop--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--desktop--one-tenth { right: 10%; } .pull--desktop--three-tenths { right: 30%; } .pull--desktop--seven-tenths { right: 70%; } .pull--desktop--nine-tenths { right: 90%; } /** * Twelfths */ .pull--desktop--one-twelfth { right: 8.333%; } .pull--desktop--five-twelfths { right: 41.666%; } .pull--desktop--seven-twelfths { right: 58.333%; } .pull--desktop--eleven-twelfths { right: 91.666%; } } .vertical-spacing { margin-top: 20px; margin-bottom: 20px; } .vertical-spacing--half { margin-top: 10px; margin-bottom: 10px; } .vertical-spacing--double { margin-top: 40px; margin-bottom: 40px; } .vertical-spacing--bottom { margin-bottom: 20px; } .vertical-spacing--bottom--half { margin-bottom: 10px; } .vertical-spacing--bottom--double { margin-bottom: 40px; } .vertical-spacing--top { margin-top: 20px; } .vertical-spacing--top--half { margin-top: 10px; } .vertical-spacing--top--double { margin-top: 40px; } .vertical-spacing--title { margin-bottom: 16px; } .vertical-spacing--content-block { margin-top: 48px; margin-bottom: 48px; } .link-blue { color: #0696d7; } .link-blue:hover, .link-blue:focus { color: rgb(5.3076923077, 132.6923076923, 190.1923076923); outline: none; } a { text-decoration: none; color: #34495e; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:hover { color: #0696d7; text-decoration: none; } a.link { text-decoration: underline; } a.btn, a.editor__form__file__label { text-decoration: none; } a.btn:hover, a.editor__form__file__label:hover { text-decoration: none; } .cio-ui-icon, .editor__inspector__item__tool__svg, .btn__icon { position: relative; width: 30px; height: 30px; } .cio-ui-icon svg, .editor__inspector__item__tool__svg svg, .btn__icon svg { -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; } .cio-ui-icon-link svg * { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -ms-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; fill: #8d9eb0; } .cio-ui-icon-link:hover svg * { fill: #0696d7; } .btn, .editor__form__file__label { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -ms-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; display: inline-block; cursor: pointer; font-style: normal; font-weight: 500; border: 1px solid #0696d7; vertical-align: middle; } .btn:hover, .editor__form__file__label:hover { outline: none; } .btn.disabled, .disabled.editor__form__file__label { cursor: not-allowed; color: #586675; opacity: 0.5; } .btn__icon { float: left; } .btn__icon svg { float: left; line-height: 0; } .btn__txt { float: left; } @media only screen and (max-width: 991px) { .btn--collapsable > :nth-child(2) { display: none; } } .btn--justify { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .btn--align-left { width: 100%; } .btn--xxxl { font-size: 18px; line-height: 48px; padding-right: 30px; padding-left: 20px; } .btn--xxxl .btn__txt { margin-left: 10px; } .btn--xxxl .btn__icon svg { margin: 9px 0; } @media only screen and (max-width: 991px) { .btn--xxxl.btn--collapsable svg { margin: 9px -20px 9px -10px; } } .btn--xxl { font-size: 16px; line-height: 43px; padding-right: 11px; padding-left: 6px; } .btn--xxl .btn__txt { margin-left: 6px; } .btn--xxl .btn__icon svg { margin: 4px 0; } @media only screen and (max-width: 991px) { .btn--xxl.btn--collapsable svg { margin: 4px -4px 4px 0; } } .btn--xl { font-size: 16px; line-height: 38px; padding-right: 11px; padding-left: 6px; } .btn--xl .btn__txt { margin-left: 6px; } .btn--xl .btn__icon svg { margin: 4px 0; } @media only screen and (max-width: 991px) { .btn--xl.btn--collapsable svg { margin: 4px -4px 4px 0; } } input.btn--xl { padding-left: 12px; } .btn--m, .editor__form__file__label { font-size: 14px; line-height: 30px; padding-right: 10px; padding-left: 5px; } .btn--m .btn__txt, .editor__form__file__label .btn__txt { margin-left: 5px; } .btn--m .btn__icon svg, .editor__form__file__label .btn__icon svg { margin: 0; } .btn--m .btn__icon--single, .editor__form__file__label .btn__icon--single { margin-right: -8px; margin-left: -2px; } @media only screen and (max-width: 991px) { .btn--m.btn--collapsable svg, .btn--collapsable.editor__form__file__label svg { margin: 0 -8px 0 -3px; } } input.btn--m, input.editor__form__file__label { padding-left: 10px; } .btn--s { font-size: 14px; line-height: 26px; padding: 0 9px; } .btn--s .btn__txt { padding: 0; } .btn--accent_white_accent, .btn--accent_none_accent, .editor__form__file__label, .editor__tab__subnav__button__btn--active { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--accent_white_accent:focus, .btn--accent_none_accent:focus, .editor__form__file__label:focus, .editor__tab__subnav__button__btn--active:focus { color: #ffffff; } .btn--accent_white_accent svg *, .btn--accent_none_accent svg *, .editor__form__file__label svg *, .editor__tab__subnav__button__btn--active svg * { fill: #ffffff; } .btn--accent_white_accent:hover, .btn--accent_none_accent:hover, .editor__form__file__label:hover, .editor__tab__subnav__button__btn--active:hover { background: rgb(4.6153846154, 115.3846153846, 165.3846153846); border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #ffffff; } .btn--accent_white_accent:hover svg *, .btn--accent_none_accent:hover svg *, .editor__form__file__label:hover svg *, .editor__tab__subnav__button__btn--active:hover svg * { fill: #ffffff; } .btn--dark_modal { background: #3B4454; color: #ffffff; border-color: #BEC8D2; } .btn--dark_modal:focus { color: #ffffff; } .btn--dark_modal svg * { fill: #ffffff; } .btn--dark_modal:hover { background: rgb(37.958041958, 43.7482517483, 54.041958042); border-color: rgb(159.8636363636, 174.5, 189.1363636364); color: #ffffff; } .btn--dark_modal:hover svg * { fill: #ffffff; } .btn--none_accent_accent { background: none; color: #0696d7; border-color: #0696d7; } .btn--none_accent_accent:focus { color: #0696d7; } .btn--none_accent_accent svg * { fill: #0696d7; } .btn--none_accent_accent:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--none_accent_accent:hover svg * { fill: #0696d7; } .btn--none_accent_none { background: none; color: #0696d7; border: none; } .btn--none_accent_none:focus { color: #0696d7; } .btn--none_accent_none svg * { fill: #0696d7; } .btn--none_accent_none:hover { background: none; border-color: none; color: #0696d7; } .btn--none_accent_none:hover svg * { fill: #0696d7; } .btn--none_base_borders, .editor__inspector__item__button--normal { background: none; color: #586675; border-color: #dfe3e8; } .btn--none_base_borders:focus, .editor__inspector__item__button--normal:focus { color: #586675; } .btn--none_base_borders svg *, .editor__inspector__item__button--normal svg * { fill: #586675; } .btn--none_base_borders:hover, .editor__inspector__item__button--normal:hover { background: none; border-color: rgb(193.3272727273, 201.0363636364, 210.6727272727); color: #586675; } .btn--none_base_borders:hover svg *, .editor__inspector__item__button--normal:hover svg * { fill: #586675; } .btn--none_base_borders.active, .active.editor__inspector__item__button--normal { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--none_base_borders.active:focus, .active.editor__inspector__item__button--normal:focus { color: #ffffff; } .btn--none_base_borders.active svg *, .active.editor__inspector__item__button--normal svg * { fill: #ffffff; } .btn--base_white_base { background: #586675; color: #ffffff; border-color: #586675; } .btn--base_white_base:focus { color: #ffffff; } .btn--base_white_base svg * { fill: #ffffff; } .btn--base_white_base:hover { background: rgb(66.1073170732, 76.6243902439, 87.8926829268); border-color: rgb(66.1073170732, 76.6243902439, 87.8926829268); color: #ffffff; } .btn--base_white_base:hover svg * { fill: #ffffff; } .btn--none_base_base, .editor__tab__subnav__button__btn { background: none; color: #586675; border-color: #586675; } .btn--none_base_base:focus, .editor__tab__subnav__button__btn:focus { color: #586675; } .btn--none_base_base svg *, .editor__tab__subnav__button__btn svg * { fill: #586675; } .btn--none_base_base:hover, .editor__tab__subnav__button__btn:hover { background: none; border-color: rgb(66.1073170732, 76.6243902439, 87.8926829268); color: #586675; } .btn--none_base_base:hover svg *, .editor__tab__subnav__button__btn:hover svg * { fill: #586675; } .btn--none_base_base:hover, .editor__tab__subnav__button__btn:hover { background: #586675; border-color: #586675; color: #ffffff; } .btn--none_base_base:hover svg *, .editor__tab__subnav__button__btn:hover svg * { fill: #ffffff; } .btn--background_base_borders { background: #f4f5f6; color: #586675; border-color: #dfe3e8; } .btn--background_base_borders:focus { color: #586675; } .btn--background_base_borders svg * { fill: #586675; } .btn--background_base_borders:hover { background: #dfe3e8; border-color: #dfe3e8; color: #586675; } .btn--background_base_borders:hover svg * { fill: #586675; } .btn--background_base_borders.active { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--background_base_borders.active:focus { color: #ffffff; } .btn--background_base_borders.active svg * { fill: #ffffff; } .btn--none_level2_borders { background: none; color: #8d9eb0; border-color: #dfe3e8; } .btn--none_level2_borders:focus { color: #8d9eb0; } .btn--none_level2_borders svg * { fill: #8d9eb0; } .btn--none_level2_borders:hover { background: none; border-color: #c5cfd9; color: #586675; } .btn--none_level2_borders:hover svg * { fill: #586675; } .btn--white_level2_level3 { background: #ffffff; color: #8d9eb0; border-color: #c5cfd9; } .btn--white_level2_level3:focus { color: #8d9eb0; } .btn--white_level2_level3 svg * { fill: #8d9eb0; } .btn--white_level2_level3:hover { background: #ffffff; border-color: rgb(181.59375, 194.25, 206.90625); color: #586675; } .btn--white_level2_level3:hover svg * { fill: #586675; } .btn--level2_dark_level2, .editor--dark .editor__tab__toolbar .btn--active, .editor--dark .editor__tab__subnav__button__btn--active, .editor__inspector__item__button--active { background: #8d9eb0; color: #11181f; border-color: #8d9eb0; } .btn--level2_dark_level2:focus, .editor--dark .editor__tab__toolbar .btn--active:focus, .editor--dark .editor__tab__subnav__button__btn--active:focus, .editor__inspector__item__button--active:focus { color: #11181f; } .btn--level2_dark_level2 svg *, .editor--dark .editor__tab__toolbar .btn--active svg *, .editor--dark .editor__tab__subnav__button__btn--active svg *, .editor__inspector__item__button--active svg * { fill: #11181f; } .btn--level2_dark_level2:hover, .editor--dark .editor__tab__toolbar .btn--active:hover, .editor--dark .editor__tab__subnav__button__btn--active:hover, .editor__inspector__item__button--active:hover { background: rgb(110.8756476684, 132.3678756477, 155.1243523316); border-color: rgb(110.8756476684, 132.3678756477, 155.1243523316); color: #11181f; } .btn--level2_dark_level2:hover svg *, .editor--dark .editor__tab__toolbar .btn--active:hover svg *, .editor--dark .editor__tab__subnav__button__btn--active:hover svg *, .editor__inspector__item__button--active:hover svg * { fill: #11181f; } .btn--level2_white_level2 { background: #8d9eb0; color: #ffffff; border-color: #8d9eb0; } .btn--level2_white_level2:focus { color: #ffffff; } .btn--level2_white_level2 svg * { fill: #ffffff; } .btn--none_white_white { background: none; color: #ffffff; border-color: #ffffff; } .btn--none_white_white:focus { color: #ffffff; } .btn--none_white_white svg * { fill: #ffffff; } .btn--none_white_white:hover { background: none; border-color: rgb(229.5, 229.5, 229.5); color: #ffffff; } .btn--none_white_white:hover svg * { fill: #ffffff; } .btn--dark_level2_borders-on-black, .editor--dark .editor__tab__toolbar .btn, .editor--dark .editor__tab__toolbar .editor__form__file__label, .editor--dark .editor__tab__subnav__button__btn { background: #11181f; color: #8d9eb0; border-color: #2f3943; } .btn--dark_level2_borders-on-black:focus, .editor--dark .editor__tab__toolbar .btn:focus, .editor--dark .editor__tab__toolbar .editor__form__file__label:focus, .editor--dark .editor__tab__subnav__button__btn:focus { color: #8d9eb0; } .btn--dark_level2_borders-on-black svg *, .editor--dark .editor__tab__toolbar .btn svg *, .editor--dark .editor__tab__toolbar .editor__form__file__label svg *, .editor--dark .editor__tab__subnav__button__btn svg * { fill: #8d9eb0; } .btn--dark_level2_borders-on-black:hover, .editor--dark .editor__tab__toolbar .btn:hover, .editor--dark .editor__tab__toolbar .editor__form__file__label:hover, .editor--dark .editor__tab__subnav__button__btn:hover { background: #2f3943; border-color: #2f3943; color: #ffffff; } .btn--dark_level2_borders-on-black:hover svg *, .editor--dark .editor__tab__toolbar .btn:hover svg *, .editor--dark .editor__tab__toolbar .editor__form__file__label:hover svg *, .editor--dark .editor__tab__subnav__button__btn:hover svg * { fill: #ffffff; } .btn--dark_level2_borders-on-black.active, .editor--dark .editor__tab__toolbar .active.btn, .editor--dark .editor__tab__toolbar .active.editor__form__file__label, .editor--dark .active.editor__tab__subnav__button__btn { background: #8d9eb0; color: #11181f; border-color: #8d9eb0; } .btn--dark_level2_borders-on-black.active:focus, .editor--dark .editor__tab__toolbar .active.btn:focus, .editor--dark .editor__tab__toolbar .active.editor__form__file__label:focus, .editor--dark .active.editor__tab__subnav__button__btn:focus { color: #11181f; } .btn--dark_level2_borders-on-black.active svg *, .editor--dark .editor__tab__toolbar .active.btn svg *, .editor--dark .editor__tab__toolbar .active.editor__form__file__label svg *, .editor--dark .active.editor__tab__subnav__button__btn svg * { fill: #11181f; } .btn--error_white_error { background: #ff5f48; color: #ffffff; border-color: #ff5f48; } .btn--error_white_error:focus { color: #ffffff; } .btn--error_white_error svg * { fill: #ffffff; } .btn--error_white_error:hover { background: rgb(255, 50.4098360656, 21); border-color: rgb(255, 50.4098360656, 21); color: #ffffff; } .btn--error_white_error:hover svg * { fill: #ffffff; } .btn--projectignite_none_projectignite { background: #f28558; color: #ffffff; border-color: #f28558; } .btn--projectignite_none_projectignite:focus { color: #ffffff; } .btn--projectignite_none_projectignite svg * { fill: #ffffff; } .btn--projectignite_none_projectignite:hover { background: rgb(238.3166666667, 98.4333333333, 40.6833333333); border-color: rgb(238.3166666667, 98.4333333333, 40.6833333333); color: #ffffff; } .btn--projectignite_none_projectignite:hover svg * { fill: #ffffff; } .btn--level3_white_level3 { background: #c5cfd9; color: #ffffff; border-color: #c5cfd9; } .btn--level3_white_level3:focus { color: #ffffff; } .btn--level3_white_level3 svg * { fill: #ffffff; } .btn--level3_white_level3:hover { background: rgb(166.1875, 181.5, 196.8125); border-color: rgb(166.1875, 181.5, 196.8125); color: #ffffff; } .btn--level3_white_level3:hover svg * { fill: #ffffff; } .btn--none_base_none { background: none; color: #586675; border: none; } .btn--none_base_none:focus { color: #586675; } .btn--none_base_none svg * { fill: #586675; } .btn--none_base_none:hover { background: none; border-color: none; color: #586675; } .btn--none_base_none:hover svg * { fill: #586675; } .btn--none_empty_none { background: none; color: #ffffff; border: none; } .btn--none_empty_none:focus { color: #ffffff; } .btn--none_empty_none svg * { fill: #ffffff; } .btn--none_base_none_hover:hover { background: none; border-color: none; color: #0696d7; } .btn--none_base_none_hover:hover svg * { fill: #0696d7; } .btn--starred_empty_empty { background: #FFA200; color: #ffffff; border-color: #ffffff; } .btn--starred_empty_empty:focus { color: #ffffff; } .btn--starred_empty_empty svg * { fill: #ffffff; } .btn--hub_lab { background: #6E9E56; color: #ffffff; border-color: #6E9E56; } .btn--hub_lab:focus { color: #ffffff; } .btn--hub_lab svg * { fill: #ffffff; } .btn--hub_lab:hover { background: rgb(87.0081967213, 124.9754098361, 68.0245901639); border-color: rgb(87.0081967213, 124.9754098361, 68.0245901639); color: #ffffff; } .btn--hub_lab:hover svg * { fill: #ffffff; } .btn--hub_lab--empty { background: none; color: #6E9E56; border-color: #6E9E56; } .btn--hub_lab--empty:focus { color: #6E9E56; } .btn--hub_lab--empty svg * { fill: #6E9E56; } .btn--hub_lab--empty:hover { background: none; border-color: rgb(87.0081967213, 124.9754098361, 68.0245901639); color: #6E9E56; } .btn--hub_lab--empty:hover svg * { fill: #6E9E56; } .btn--hub_pcb { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--hub_pcb:focus { color: #ffffff; } .btn--hub_pcb svg * { fill: #ffffff; } .btn--hub_pcb:hover { background: rgb(4.6153846154, 115.3846153846, 165.3846153846); border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #ffffff; } .btn--hub_pcb:hover svg * { fill: #ffffff; } .btn--hub_pcb--empty { background: none; color: #0696d7; border-color: #0696d7; } .btn--hub_pcb--empty:focus { color: #0696d7; } .btn--hub_pcb--empty svg * { fill: #0696d7; } .btn--hub_pcb--empty:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--hub_pcb--empty:hover svg * { fill: #0696d7; } .btn--hub_circuitscribe { background: #00adef; color: #ffffff; border-color: #00adef; } .btn--hub_circuitscribe:focus { color: #ffffff; } .btn--hub_circuitscribe svg * { fill: #ffffff; } .btn--hub_circuitscribe:hover { background: rgb(0, 136.0836820084, 188); border-color: rgb(0, 136.0836820084, 188); color: #ffffff; } .btn--hub_circuitscribe:hover svg * { fill: #ffffff; } .btn--hub_circuitscribe--empty { background: none; color: #00adef; border-color: #00adef; } .btn--hub_circuitscribe--empty:focus { color: #00adef; } .btn--hub_circuitscribe--empty svg * { fill: #00adef; } .btn--hub_circuitscribe--empty:hover { background: none; border-color: rgb(0, 136.0836820084, 188); color: #00adef; } .btn--hub_circuitscribe--empty:hover svg * { fill: #00adef; } .btn--hub_mesh { background: #7FBF34; color: #ffffff; border-color: #7FBF34; } .btn--hub_mesh:focus { color: #ffffff; } .btn--hub_mesh svg * { fill: #ffffff; } .btn--hub_mesh:hover { background: rgb(100.3456790123, 150.9135802469, 41.0864197531); border-color: rgb(100.3456790123, 150.9135802469, 41.0864197531); color: #ffffff; } .btn--hub_mesh:hover svg * { fill: #ffffff; } .btn--hub_mesh--empty { background: none; color: #7FBF34; border-color: #7FBF34; } .btn--hub_mesh--empty:focus { color: #7FBF34; } .btn--hub_mesh--empty svg * { fill: #7FBF34; } .btn--hub_mesh--empty:hover { background: none; border-color: rgb(100.3456790123, 150.9135802469, 41.0864197531); color: #7FBF34; } .btn--hub_mesh--empty:hover svg * { fill: #7FBF34; } .btn--social_facebook { background: #3b5997; color: #ffffff; border-color: #3b5997; } .btn--social_facebook:focus { color: #ffffff; } .btn--social_facebook svg * { fill: #ffffff; } .btn--social_facebook:hover { background: rgb(44.6714285714, 67.3857142857, 114.3285714286); border-color: rgb(44.6714285714, 67.3857142857, 114.3285714286); color: #ffffff; } .btn--social_facebook:hover svg * { fill: #ffffff; } .btn--social_twitter { background: #54abee; color: #ffffff; border-color: #54abee; } .btn--social_twitter:focus { color: #ffffff; } .btn--social_twitter svg * { fill: #ffffff; } .btn--social_twitter:hover { background: rgb(37.6117021277, 148.2127659574, 233.3882978723); border-color: rgb(37.6117021277, 148.2127659574, 233.3882978723); color: #ffffff; } .btn--social_twitter:hover svg * { fill: #ffffff; } .btn--social_reddit { background: #cee3f8; color: #586675; border-color: #cee3f8; } .btn--social_reddit:focus { color: #586675; } .btn--social_reddit svg * { fill: #586675; } .btn--social_reddit:hover { background: rgb(161.375, 201.5, 241.625); border-color: rgb(161.375, 201.5, 241.625); color: #586675; } .btn--social_reddit:hover svg * { fill: #586675; } .btn--hover--none_accent_accent:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--hover--none_accent_accent:hover svg * { fill: #0696d7; } .btn--hover--none_red_red:hover { background: none; border-color: rgb(255, 50.4098360656, 21); color: #ff5f48; } .btn--hover--none_red_red:hover svg * { fill: #ff5f48; } .btn--hover--empty_level2_cancel:hover { background: rgb(229.5, 229.5, 229.5); border-color: rgb(110.8756476684, 132.3678756477, 155.1243523316); color: #586675; } .btn--hover--empty_level2_cancel:hover svg * { fill: #586675; } .throbber { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -25px; width: 50px; height: 10px; text-align: center; } .throbber > div { width: 10px; height: 10px; background-color: #0696d7; border-radius: 100%; display: inline-block; -webkit-animation: throbber__bouncedelay 1.4s infinite ease-in-out; animation: throbber__bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .throbber--light > div { background-color: #ffffff; } .throbber .throbber__bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .throbber .throbber__bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes throbber__bouncedelay { 10% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(0); } 80% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @keyframes throbber__bouncedelay { 10% { transform: scale(1); -webkit-transform: scale(1); } 40% { transform: scale(0); -webkit-transform: scale(0); } 80% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); } } .editor { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; } .editor__holder, .editor__holder__yield { bottom: 0; height: 100%; left: 0; position: relative; right: 0; top: 0; overflow: hidden; } .editor__holder canvas, .editor__holder__yield canvas { width: 100% !important; height: 100% !important; } .editor__warning__banner { margin: 0px; padding: 20px; background-color: orange; width: 100%; } .editor__master__topnav { position: absolute; top: 0; left: 0; right: 0; height: 48px; } .editor__master__content { position: absolute; top: 49px; left: 0; right: 0; bottom: 0; } .editor__master__content__tabs { position: relative; width: auto; height: 100%; overflow: hidden; } .editor__topnav { position: absolute; right: 0; left: 0; top: 0; min-width: 300px; color: #34495e; background: #ffffff; height: 48px; line-height: 48px; -webkit-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); } .editor__topnav--view { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border-bottom: 1px solid #dfe3e8; } .editor__topnav__left { float: left; } .editor__topnav__logo { line-height: 0; height: 48px; width: 48px; } .editor__topnav__logo__tag { -webkit-transition: background-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in; -o-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } .editor__topnav__logo__tag:hover { background-color: #0696d7; } .editor__topnav__logo__tag__text { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #0696d7; color: #ffffff; border-radius: 5px; padding: 2px 10px; margin: 0 10px; font-size: 10px; cursor: pointer; } .editor__topnav__title { font-size: 16px; font-weight: 500; text-decoration: none; color: #34495e; margin-left: 14px; } .editor__topnav__title--inactive { pointer-events: none; } .editor__topnav__title__span:hover { border-bottom: 1px dashed #34495e; } .editor__topnav__right { position: absolute; right: 0; top: 0; } .editor__topnav__connection-menu { margin: 0; padding: 0 15px 0 10px; line-height: 48px; font-size: 16px; font-weight: 500; background: #ffffff; margin-right: 15px; } .editor__topnav__connection-menu--normal { color: #c5cfd9; } .editor__topnav__connection-menu--warning { color: #f48220; } .editor__topnav__connection-menu--error { color: #ff5f48; } .editor__topnav__connection-menu--versions:hover { cursor: pointer; } .editor__topnav__connection-menu__icon { padding-top: 17px; display: inline-block; } .editor__topnav__connection-menu__icon svg * { fill: #c5cfd9; } .editor__topnav__connection-menu:hover .editor__topnav__connection-menu__icon svg * { fill: #586675; } .editor__topnav__version { font-size: 16px; font-weight: 500; margin-top: 9px; margin-right: 20px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; padding-left: 10px; padding-right: 10px; } .editor__topnav__version__btn { color: white; border-radius: 5px; padding: 3px 10px 2px 10px; } .editor__topnav__version__btn--draft { background: #FF5E41; } .editor__topnav__version__btn--draft:hover { background: #FE4D2D; cursor: pointer; } .editor__topnav__version__btn--version { background: #86BB40; } .editor__topnav__version__btn--version:hover { background: #7AAA3A; cursor: pointer; } .editor__topnav__version__message--draft { padding-right: 10px; } .editor__topnav__version__message--empty { display: none; } .editor__topnav__info { font-size: 16px; font-weight: 500; color: #8d9eb0; padding-left: 18px; } .editor__topnav__info--pcb { color: #8d9eb0; } .editor__topnav__tabbutton { position: relative; } .editor__topnav__tabbutton__notification { position: absolute; top: 6px; right: 6px; width: 12px; height: 10px; border-radius: 50%; line-height: 11px; font-size: 11px; background: #ff5f48; color: #ffffff; z-index: 1; text-align: center; padding: 5px 4px; } .editor__topnav__tabbutton__link { position: relative; height: 48px; width: 49px; text-align: center; } .editor__topnav__tabbutton__link svg { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__topnav__tabbutton__link svg * { fill: #34495e; } .editor__topnav__tabbutton__link:hover svg * { fill: #0696d7; } .editor__topnav__tabbutton__link--active { background-color: #0696d7; } .editor__topnav__tabbutton__link--active svg * { fill: #ffffff; } .editor__topnav__tabbutton__link--active:hover svg * { fill: #ffffff; } .editor__topnav__tabbutton__link--leftborder { border-left: 1px solid #dfe3e8; } .editor__topnav__tabbutton__link--rightborder { border-right: 1px solid #dfe3e8; } .editor__topnav__tabbutton__link > .editor__topnav__tabbutton__icondiv { min-width: 48px; min-height: 48px; background-size: contain; background-repeat: no-repeat; } .editor__topnav__avatar { position: relative; height: 48px; width: 49px; text-align: center; border-left: 1px solid #dfe3e8; } .editor__topnav__avatar img { margin: 8px 0 0 0; width: 32px; height: 32px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .editor__tab { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #f4f5f6; } .editor__tab__yield { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .editor__tab__yield--sub { top: 48px; } .editor__tab__toolbar { position: absolute; top: 8px; pointer-events: none; } .editor__tab__toolbar--left { left: 8px; } .editor__tab__toolbar--right { right: 8px; } .editor__tab__toolbar__modeswitcher { margin-bottom: 8px; pointer-events: all; } .editor__tab__toolbar__tool { margin-bottom: 8px; } .editor__tab__toolbar__tool .btn, .editor__tab__toolbar__tool .editor__form__file__label { pointer-events: all; } .editor__tab__toolbar__offsettool { margin-left: 20px; margin-bottom: 8px; } .editor__tab__toolbar__offsettool .btn, .editor__tab__toolbar__offsettool .editor__form__file__label { pointer-events: all; } .editor__tab__subnav { position: absolute; right: 0; left: 0; top: 0; min-width: 300px; height: 48px; line-height: 48px; background-color: #f4f5f6; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); } .editor__tab__subnav__title { padding-left: 14px; font-weight: 500; color: #8d9eb0; } .editor__tab__subnav__group { border-right: 1px solid #dfe3e8; } .editor__tab__subnav__message { padding-left: 14px; font-weight: 500; color: #8d9eb0; } .editor__tab__subnav__tool:first-child { margin-left: 6px; } .editor__tab__subnav__tool:last-child { margin-right: 6px; } .editor__tab__subnav__tool__svg { position: relative; text-align: center; width: 30px; height: 48px; margin: 0 4px; } .editor__tab__subnav__tool__svg svg { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tab__subnav__tool__svg svg * { fill: #34495e; } .editor__tab__subnav__tool__svg:hover svg * { fill: #0696d7; } .editor__tab__subnav__tool--disabled { pointer-events: none; } .editor__tab__subnav__tool--disabled svg * { fill: #c5cfd9; } .editor__tab__subnav__tool--active svg * { fill: #0696d7; } .editor__tab__subnav__button { margin-left: 6px; /* height: 100%; */ } .editor__tab__subnav__button .pushDown { margin-top: 8px; } .editor__tab__subnav__button:first-child { margin-left: 6px; } .editor__tab__subnav__button:last-child { margin-right: 6px; } .editor__inspector__item__selectable__imagegroup__container--read__only, .editor__inspector__item__select--read__only, .editor__inspector__item__checkbox_container--read__only, .editor__inspector__item__textinput--readonly { cursor: not-allowed; opacity: 0.6; } .editor__inspector { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; width: 230px; background: #f4f5f6; border: 1px solid #dfe3e8; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow-y: hidden; overflow-x: hidden; } .editor__inspector__group.light * { color: black !important; } .editor__inspector__title { background: #f4f5f6; color: #34495e; border-bottom: 1px solid #dfe3e8; padding: 0 8px; line-height: 28px; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); } .editor__inspector__title--inverted { background: #dfe3e8; color: #34495e; border-color: 1px solid #dfe3e8; } .editor__inspector__title__text { font-size: 14px; font-weight: 500; display: inline-block; } .editor__inspector__items { max-height: 600px; overflow-y: auto; padding: 0 8px; } .editor__inspector__item { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; position: relative; border-bottom: 1px solid #dfe3e8; padding: 8px 0; float: left; line-height: 28px; font-size: 12px; width: 100%; color: #34495e; /*&:last-child { margin-bottom: 7px; padding-bottom: 0; border-bottom: none; }*/ } .editor__inspector__item--center { -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; } .editor__inspector__item__label { padding-right: 6px; float: left; line-height: 28px; white-space: nowrap; -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: 0; -moz-flex-basis: 0; -ms-flex-basis: 0; -o-flex-basis: 0; flex-basis: 0; } .editor__inspector__item__error { background: #EC4A41; color: #ffffff; transition: background 1000ms linear; } .editor__inspector__item__textinput { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; outline: none; border: 1px solid #dfe3e8; font-size: 12px; color: #34495e; padding: 0 6px; height: 28px; background-color: #ffffff; min-width: 40px; -webkit-flex-grow: 2; -moz-flex-grow: 2; -ms-flex-grow: 2; -o-flex-grow: 2; flex-grow: 2; } .editor__inspector__item__textinput--readonly { background: #f4f5f6; color: #c5cfd9; } .editor__inspector__item__textinput--disabled { background-color: #f4f5f6 !important; } .editor__inspector__item__textinput--align-right { text-align: right; } .editor__inspector__item__textinput:focus { color: #34495e; border-color: #34495e; outline: none; } .editor__inspector__item__fixedunit { line-height: 28px; padding-left: 4px; -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; } .editor__inspector__item__fixedunit:empty { display: none; } .editor__inspector__item__checkbox_container { line-height: 0; margin: 3px 0 0 5px; width: 20px; position: absolute; right: 10px; } .editor__inspector__item__checkbox_container--read__only > * { pointer-events: none; } .editor__inspector__item__checkbox_container label { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: #ffffff; border-radius: 4px; border: 1px solid #dfe3e8; } .editor__inspector__item__checkbox_container label:after { content: ""; width: 9px; height: 5px; position: absolute; top: 5px; left: 5px; border: 2px solid #34495e; border-top: none; border-right: none; background: transparent; opacity: 0; transform: rotate(-45deg); } .editor__inspector__item__checkbox_container label:hover { border-color: #34495e; } .editor__inspector__item__checkbox_container label:hover::after { opacity: 0; } .editor__inspector__item__checkbox_container input[type=checkbox] { visibility: hidden; } .editor__inspector__item__checkbox_container input[type=checkbox]:checked + label:after { opacity: 1; } .editor__inspector__item__select { background: #ffffff; border: 1px solid #dfe3e8; margin-left: 6px; height: 28px; font-size: 11px; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1; } .editor__inspector__item__button { width: 100%; text-align: center; font-weight: normal; font-size: 12px; } .editor__inspector__item__image { margin: 0 auto; border: none; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .editor__inspector__item__image--active { background-color: #34495e; } .editor__inspector__item__tool { -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; cursor: pointer; } .editor__inspector__item__tool__svg svg * { fill: #34495e; } .editor__inspector__item__tool__svg:hover svg * { fill: #0696d7; } .editor__inspector__item__tool--disabled { pointer-events: none; opacity: 0.6; } .editor__inspector__item__tool--disabled svg * { fill: #c5cfd9; } .editor__inspector__item__tool--disabled .editor__inspector__item__tool__button { color: #c5cfd9; } .editor__inspector__item--multiple, .editor__inspector__item__selectable__imagegroup__container { width: 100%; display: inline-block; } .editor__inspector__item--multiple > *, .editor__inspector__item__selectable__imagegroup__container > * { border: none; width: auto; height: 28px; padding: 0 6px 0 0; } .editor__inspector__item__selectable__imagegroup__container--read__only > * { pointer-events: none; } .editor__inspector__item--multiple.flex__container { display: flex; } .editor__inspector__item--multiple.flex__container > * { border: none; width: 30% !important; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; -ms-flex-shrink: 1; -o-flex-shrink: 1; flex-shrink: 1; } .editor__inspector__item__loader { margin: 0px auto 10px; text-align: center; } .editor__inspector__item__loader > div { width: 10px; height: 10px; background-color: #000000; border-radius: 100%; display: inline-block; -webkit-animation: throbber__bouncedelay 1.4s infinite ease-in-out; animation: throbber__bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .editor__inspector__item__loader .throbber__bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .editor__inspector__item__loader .throbber__bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes throbber__bouncedelay { 10% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(0); } 80% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @keyframes throbber__bouncedelay { 10% { transform: scale(1); -webkit-transform: scale(1); } 40% { transform: scale(0); -webkit-transform: scale(0); } 80% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); } } .editor__window { position: absolute; width: 160px; background: #ffffff; -webkit-box-shadow: 0px 0px 3px 0px #dfe3e8; -moz-box-shadow: 0px 0px 3px 0px #dfe3e8; -ms-box-shadow: 0px 0px 3px 0px #dfe3e8; -o-box-shadow: 0px 0px 3px 0px #dfe3e8; box-shadow: 0px 0px 3px 0px #dfe3e8; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; max-height: 500px; overflow-y: auto; overflow-x: hidden; } .editor__window__title { background: #ffffff; color: #34495e; line-height: 32px; font-size: 14px; font-weight: 500; padding: 0 10px; border-bottom: 1px solid #dfe3e8; } .editor__window__listitem { border-bottom: 1px solid #dfe3e8; font-size: 14px; font-weight: 500; line-height: 32px; height: 32px; } .editor__window__listitem__icon { padding: 5px; } .editor__window__listitem:last-child { border: none; } .editor__window__layer { border-bottom: 1px solid #dfe3e8; font-size: 14px; font-weight: 500; line-height: 32px; height: 32px; cursor: pointer; } .editor__window__layer__layercircle { margin: 9px 9px 0 9px; width: 10px; height: 10px; border: 2px solid #2f3943; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } .editor__window__layer__icon { margin-right: 4px; } .editor__window__layer:hover { background: #dfe3e8; } .editor__window__layer.active { background: #dfe3e8; } .editor__window__layer:last-child { border: none; } .editor__tray { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #dfe3e8; } .editor__tray__draggable { position: absolute; } .editor__tray__draggable--top { top: -10px; left: 0; right: 0; height: 20px; } .editor__tray__draggable--top:hover { cursor: row-resize; } .editor__tray__inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tray__cannotfind { margin: 25px 20px; } .editor__tray__cannotfind__title { font-size: 14px; } .editor__tray__cannotfind__expand { font-size: 16px; font-weight: 500; } .editor__tray__cannotfind__more_info { margin-top: 2em; font-size: 15px; } .editor__tray__cannotfind a { text-decoration: underline; } .editor__tray__tabs { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tray__tabs__top { position: absolute; top: 0; height: 49px; left: 0; right: 0; border-bottom: 1px solid #dfe3e8; } .editor__tray__tabs__top__title { margin-right: 20px; } .editor__tray__tabs__top__title_a { line-height: 49px; height: 49px; padding: 15px 0 13px 0; font-weight: 500; } .editor__tray__tabs__top__title_a.active, .editor__tray__tabs__top__title_a:hover { color: #0696d7; border-bottom: 1px solid #0696d7; } .editor__tray__tabs__top__left { float: left; margin-left: 20px; } .editor__tray__tabs__top__right { float: right; } .editor__tray__tabs__top__switch { border-left: 1px solid #dfe3e8; float: right; padding: 0px 8px; margin-left: 8px; line-height: 50px; width: 32px; text-align: center; } .editor__tray__tabs__top__button { margin: 8px 0 0 8px; } .editor__tray__tabs__top__searchcontainer { overflow: hidden; height: 50px; } .editor__tray__tabs__top__search { position: relative; width: 300px; float: right; border-left: 1px solid #dfe3e8; height: 50px; } .editor__tray__tabs__top__search__btn__search { position: absolute; top: 0; left: 0; margin: 13px; } .editor__tray__tabs__top__search__input { position: relative; left: 46px; border: none; line-height: 46px; width: 220px; } .editor__tray__tabs__top__search__input:focus { outline: 0; border: none; } .editor__tray__tabs__top__search__btn__clear { position: absolute; right: 0; top: 0; border-right: 1px solid #dfe3e8; height: 50px; } .editor__tray__tabs__top__search__btn__clear a { position: absolute; top: 15px; width: 32px; right: 0; } .editor__tray__tabs__top__search__btn__clear:hover { display: block; } .editor__tray__tabs__top__search__input:focus ~ .editor__tray__tabs__top__search__btn__clear { display: block; } .editor__tray__tabs__top__btn__searchfilter { position: relative; float: right; border-right: 1px solid #dfe3e8; height: 24px; padding: 13px; } .editor__tray__tabs__sub { position: absolute; top: 50px; left: 0; right: 0; } .editor__tray__tabs__sub__searchfilter { height: 49px; line-height: 49px; padding-left: 20px; background-color: #efefef; border-bottom: 1px solid #dfe3e8; } .editor__tray__tabs__sub__searchfilter__name { position: relative; float: left; margin-right: 8px; width: 70px; } .editor__tray__tabs__sub__searchfilter__input { top: 9px; float: left; margin-right: 8px; line-height: 30px; height: 30px; width: -webkit-calc(95% - 210px); margin-top: 10px; } .editor__tray__tabs__sub__searchfilter__description { position: relative; display: inline-block; white-space: nowrap; margin-left: 10px; height: 30px; overflow: hidden; text-overflow: ellipsis; width: -webkit-calc(100% - 200px); margin-bottom: -10px; } .editor__tray__tabs__sub__searchfilter__btn__add { position: relative; float: right; margin: 0 20px 0 0; } .editor__tray__tabs__sub__searchfilter__btn__remove { position: relative; float: left; } .editor__tray__tabs__sub__searchfilter__filter__key { margin: 11px 20px 0 10px; position: relative; float: left; } .editor__tray__tabs__content { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: auto; } .editor__tray__largecomponents { margin: 0; } .editor__tray__largecomponents--dark .editor__tray__largecomponents__item__inner__img img { background: #11181f; } .editor__tray__largecomponents__item { padding: 10px; } .editor__tray__largecomponents__item__inner { padding: 10px; border: 1px solid #dfe3e8; } .editor__tray__largecomponents__item__inner__img { position: relative; overflow: hidden; } .editor__tray__largecomponents__item__inner__img img { width: 100%; } .editor__tray__largecomponents__item__inner__img__loading { width: 100%; } .editor__tray__largecomponents__item__inner__img__preview { top: 0; left: 0; bottom: 0; margin: auto; position: absolute; } .editor__tray__largecomponents__item__inner__img__info { top: 0px; left: 0px; width: 100%; z-index: 1; height: 100%; padding: 10px; display: none; position: absolute; height: calc(100% - 5px); overflow: hidden; background: rgba(34, 33, 33, 0.575); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .editor__tray__largecomponents__item__inner__img__info__property { margin: 0px; padding: 0px; color: #fff; font-size: 12px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .editor__tray__largecomponents__item__inner__img__info__property__name { font-weight: bold; width: 100px; } .editor__tray__largecomponents__item__inner__img__info__property__value { float: right; font-weight: medium; } .editor__tray__largecomponents__item__inner__block { margin-top: 6px; position: relative; } .editor__tray__largecomponents__item__inner__block__title { overflow: hidden; text-align: left; height: 20px; font-size: 15px; } .editor__tray__largecomponents__item__inner__block__info { top: 0px; right: 0px; width: 12px; height: 12px; position: absolute; } .editor__tray__largecomponents__item__inner__block__info svg { width: 100%; height: 100%; } .editor__tray__largecomponents__item__inner__block__info svg:hover path { fill: #86b5ee; } .editor__tray__largecomponents__item__inner:hover { border-color: #0696d7; } .editor__tray__listcomponents--dark .editor__tray__listcomponents__item__thumb img { background: #11181f; } .editor__tray__listcomponents__top { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; line-height: 48px; font-size: 15px; font-weight: 500; border-bottom: 1px solid #dfe3e8; padding: 0 0 0 20px; width: 100%; overflow: hidden; } .editor__tray__listcomponents__top__total { color: #c5cfd9; width: 95px; margin-right: 15px; float: left; } .editor__tray__listcomponents__top__name { float: left; text-align: center; } .editor__tray__listcomponents__top__rightitem { float: right; text-align: center; width: 120px; display: inline; } .editor__tray__listcomponents__top__leftitems { display: inline; float: left; width: calc(100% - 430px); overflow: hidden; height: 48px; margin-left: 95px; position: absolute; } .editor__tray__listcomponents__top__leftitem { float: left; text-align: center; width: 120px; display: inline; margin-left: 22px; } .editor__tray__listcomponents__top__used { float: right; min-width: 100px; margin-right: 20px; } .editor__tray__listcomponents__top__description { margin-left: 600px; } .editor__tray__listcomponents__top__nosort { display: inline; } .editor__tray__listcomponents__top__nosort__name { display: inline; float: center; } .editor__tray__listcomponents__top__nosort:hover, .editor__tray__listcomponents__top__nosort.active { color: black; cursor: default; } .editor__tray__listcomponents__top__sort { width: 120px; } .editor__tray__listcomponents__top__sort__name { float: right; } .editor__tray__listcomponents__top__sort__arrow { opacity: 0; float: right; padding: 0 5px; } .editor__tray__listcomponents__top__sort__arrow.flipped { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .editor__tray__listcomponents__top__sort:hover, .editor__tray__listcomponents__top__sort.active { color: #0696d7; } .editor__tray__listcomponents__top__sort:hover .editor__tray__listcomponents__top__sort__arrow, .editor__tray__listcomponents__top__sort.active .editor__tray__listcomponents__top__sort__arrow { opacity: 1; } .editor__tray__listcomponents__top__sort:hover svg *, .editor__tray__listcomponents__top__sort.active svg * { fill: #0696d7; } .editor__tray__listcomponents__top__sortdropdown { float: right; width: 210px; text-align: right; } .editor__tray__listcomponents__top__sortdropdown__prefix { float: right; } .editor__tray__listcomponents__top__sortdropdown__select { position: relative; float: right; margin-right: 10px; } .editor__tray__listcomponents__top__sortdropdown__select__triangle { pointer-events: none; position: absolute; right: 10px; top: -2px; } .editor__tray__listcomponents__top__sortdropdown__select select { width: 105px; margin-left: 10px; line-height: 32px; height: 32px; -webkit-appearance: none; border: 1px solid #dfe3e8; background: #ffffff; padding: 0px 20px 0 6px; } .editor__tray__listcomponents__content { width: 100%; } .editor__tray__listcomponents__item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid #dfe3e8; padding: 20px 20px; } .editor__tray__listcomponents__item__thumb { margin-top: 10px; line-height: 0; width: 84px; margin-right: 15px; float: left; position: relative; } .editor__tray__listcomponents__item__thumb img { height: 50px; } .editor__tray__listcomponents__item__name { font-weight: 500; float: left; position: absolute; margin-left: 80px; margin-top: 20px; white-space: nowrap; width: 230px; height: 30px; overflow: hidden; text-overflow: ellipsis; } .editor__tray__listcomponents__item__name a:hover { text-decoration: underline; } .editor__tray__listcomponents__item__rightitem { float: right; text-align: center; width: 120px; display: inline; } .editor__tray__listcomponents__item__leftitems { display: inline; float: left; width: calc(100% - 426px); overflow: hidden; height: 24px; margin-left: 170px; margin-top: 20px; position: absolute; } .editor__tray__listcomponents__item__leftitem { float: left; text-align: right; width: 120px; display: inline; margin-left: 22.5px; } .editor__tray__listcomponents__item__leftitem__description { margin-left: 180px; width: 1200px; } .editor__tray__listcomponents__item__used { font-weight: 500; } .editor__tray__listcomponents__item__description { margin-left: 600px; } .editor__tray__listcomponents__item__extra { float: right; width: 180px; text-align: right; margin-top: 15px; } .editor__split__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .editor__split__left { position: absolute; left: 0; right: 50%; top: 0; bottom: 0; border-right: 1px solid black; } .editor__split__middle { position: absolute; right: 48%; left: 48%; top: 0; bottom: 0; } .editor__split__right { position: absolute; right: 0; left: 50%; top: 0; bottom: 0; } .editor__switcher { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .editor__switcher__multileveltitle { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 14px; color: #c5cfd9; font-weight: 500; margin-top: 40px; cursor: pointer; } .editor__switcher__multileveltitle:first-child { margin-top: 10px; } .editor__switcher__item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; cursor: pointer; width: 165px; margin: 0 auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .editor__switcher__item:first-child { margin-top: 10px; } .editor__switcher__item__inner { border: 1px solid #2f3943; } .editor__switcher__item__inner__border { border: 2px solid #11181f; } .editor__switcher__item__inner:hover { border-color: #c5cfd9; } .editor__switcher__item--active .editor__switcher__item__inner, .editor__switcher__item--active .editor__switcher__item__inner__border, .editor__switcher__multileveltitle.editor__switcher__item--active + .editor__switcher__item .editor__switcher__item__inner, .editor__switcher__multileveltitle.editor__switcher__item--active + .editor__switcher__item .editor__switcher__item__inner__border { border-color: #c5cfd9; } .editor__switcher__item__title { text-align: center; word-wrap: break-word; font-size: 12px; font-weight: 500; color: #c5cfd9; padding: 10px 0 8px 0; } .editor__switcher__item__img { height: 80px; text-align: center; } .editor__switcher__item__img img { max-height: 80px; } .editor__switcher__content { position: absolute; top: 0; bottom: 0; left: 0; right: 185px; } .editor__switcher__sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: 185px; border-left: 1px solid #2f3943; overflow: auto; } .editor__switcher__sidebar__items { position: absolute; top: 0; right: 0; left: 0; bottom: 48px; overflow: auto; } .editor__switcher__sidebar__buttons { background: #11181f; position: absolute; bottom: 0; line-height: 48px; height: 48px; left: 0; right: 0; border-top: 1px solid #2f3943; text-align: center; } .editor__switcher__sidebar__buttons__button { display: inline-block; margin: 4px 5px; width: 30px; height: 30px; } .editor__switcher__sidebar__buttons__button svg * { fill: #c5cfd9; } .editor__switcher__sidebar__buttons__button:hover svg * { fill: #8d9eb0; } .editor__form { max-width: 960px; margin: 30px auto; padding: 0 30px; } .editor__form__element { margin-bottom: 30px; } .editor__form__element.settings-container > .editor__form__element__container { background: #ffffff; border: 1px solid #DFE3E8; color: #8D9EB0; } .editor__form__element.settings-container .file_input_container { display: inline-block; margin: 15px; } .editor__form__element.settings-container .text-input-container { display: inline-block; width: 60%; } .editor__form__element.settings-container input { background: #fff; border: 1px solid #c5cfd9; font-weight: 500; color: #34495e; padding: 10px; width: 95%; } .editor__form__element.settings-container .or_container { display: inline-block; margin-right: 15px; padding: 0; } .editor__form__element.settings-container .btn-container { display: inline-block; margin: 15px; } .editor__form__element.settings-container .btn-submit { background: #0696d7; color: white; } .editor__form__element__label { font-size: 18px; font-weight: 500; padding-bottom: 7px; margin-bottom: 10px; width: 100%; border-bottom: 1px solid #dfe3e8; } .editor__form__element__subhead { font-size: 14px; font-weight: 500; color: #8d9eb0; margin: 10px 0; } .editor__form__element__moreinfo { margin-top: 10px; font-size: 12px; font-weight: 500; } .editor__form__element__moreinfo a, .editor__form__element__moreinfo a:visited { color: #34495e; } .editor__form__textinput { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 16px; font-weight: 500; padding: 11px 14px 12px; border: 1px solid #dfe3e8; } .editor__form__textinput__url { background: #fff; border: 1px solid #c5cfd9; font-weight: 500; color: #34495e; padding: 10px; width: 97%; } .editor__form__textinput--disabled { opacity: 0.8; background-color: #F4F5F6; font-weight: normal; } .editor__form__textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 16px; font-weight: 500; padding: 11px 14px 12px; border: 1px solid #dfe3e8; } .editor__form__textarea--disabled { opacity: 0.8; background-color: #F4F5F6; font-weight: normal; } .editor__form__file__input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .editor__modal, .editor__modal__list { background: #f4f5f6; border: 1px solid #dfe3e8; left: 50%; margin: 0 0 0 -200px; position: fixed; top: 30%; width: 400px; border-radius: 3px; /* code for preventing text inside modal from going outside*/ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .editor__modal__top { position: relative; line-height: 40px; border-bottom: 1px solid #dfe3e8; border-radius: 3px 0 0 0; } .editor__modal__top__title { padding-left: 10px; font-weight: 500; } .editor__modal__top__close { position: absolute; right: 10px; top: 0; } .editor__modal__top__close__x { font-weight: 500; } .editor__modal__body { padding: 10px; } .editor__modal__body__row { padding: 10px; } .editor__modal__body__row__title { display: inline; font-weight: bold; margin-right: 10px; } .editor__modal__body__row__subtext { display: inline; font-size: 12px; } .editor__modal__body__row__subtext__secondrow { padding-top: 4px; } .editor__modal__body__row__buttonarea { margin: 10px 0 0 0; } .editor__modal__body__row__buttonarea .btn, .editor__modal__body__row__buttonarea .editor__form__file__label { margin: 0 10px 0 0; } .editor__modal__body__row__buttonarea__buttons { text-align: left; } .editor__modal__body__row__buttonarea__buttons .btn:first-child, .editor__modal__body__row__buttonarea__buttons .editor__form__file__label:first-child { float: left; } .editor__modal__body__row__buttonarea__issue { margin-top: -5px; font-size: 12px; padding-top: 3px; } .editor__modal__body__buttons { margin: 10px 0 10px 0; text-align: right; } .editor__modal__body__buttons .btn:first-child, .editor__modal__body__buttons .editor__form__file__label:first-child { float: right; } .editor__modal__body__buttons .btn, .editor__modal__body__buttons .editor__form__file__label { margin: 0 10px 0 0; } .editor__modal__body__buttons:after { content: ""; display: table; clear: both; } .editor__modal__body__checkbox__container { margin: 20px 0 20px 0; } .editor__modal__body__selectbox__container { margin: 20px 0 20px 0; } .editor__modal__body__selectbox__label { float: left; padding-right: 10px; } .editor__modal--error { color: #ff5f48; border-color: #ff5f48; } .editor__modal--error .editor__modal__top { background: #ff5f48; color: #ffffff; } .editor__modal--error .editor__modal__top__close__x { cursor: pointer; } .editor__modal--error .editor__modal__top__close__x svg * { fill: #ffffff; } .editor__modal--dark { color: #ffffff; background: #3B4454; border-color: #BEC8D2; } .editor__modal--dark .editor__modal__top { background: #748291; color: #ffffff; } .editor__modal--dark .editor__modal__top__close__x { cursor: pointer; } .editor__modal--dark .editor__modal__top__close__x svg * { fill: #ffffff; } .editor__modal--dark .editor__modal__body a { color: #86b5ee; } .editor__modal--dark .editor__modal__body a:hover { color: #0696d7; } .editor__modal--dark .editor__modal__body__selectbox { background-color: #3B4454; } .editor__modal__bg-overlay { background-color: rgba(0, 0, 0, 0.3); bottom: 0; height: 100%; left: 0; margin: auto; position: fixed; right: 0; top: 0; width: 100%; } .editor__modal__list { width: 50%; height: 60%; top: 15%; left: 36%; } .editor__modal__list__body { height: 88%; overflow: auto; } .editor__modal__list__select__item { padding-bottom: 10px; border-bottom: 2px solid #adc4e0; } .editor__processing { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .editor__processing__message { color: #ffffff; position: absolute; top: 60%; left: 50%; margin: -50px 0 0 -200px; width: 400px; height: 100px; text-align: center; } .editor__tooltip { font-size: 10px; position: absolute; pointer-events: none; max-width: 300px; padding: 5px; } .editor__tooltip__inner { background-color: #11181f; color: #ffffff; max-width: 200px; padding: 5px 8px 5px 8px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .editor__tooltip__arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #11181f; } .editor__tooltip__arrow__n { border-bottom-color: #11181f; } .editor__tooltip__arrow__s { border-top-color: #11181f; } .editor__tooltip__arrow__e { border-left-color: #11181f; } .editor__tooltip__arrow__w { border-right-color: #11181f; } .editor__tooltip--n .editor__tooltip__arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .editor__tooltip--s .editor__tooltip__arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .editor__tooltip--e .editor__tooltip__arrow { right: 0; top: 12px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .editor__tooltip--w .editor__tooltip__arrow { left: 0; top: 12px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } .editor__splashscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f4f5f6; } .editor__splashscreen__inner { width: 320px; position: absolute; top: 30%; left: 50%; margin-left: -160px; text-align: center; } .editor__splashscreen__inner__icon img { width: 48px; height: 48px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .editor__splashscreen__inner__title { font-size: 32px; color: #0696d7; margin-top: 12px; } .editor__splashscreen__inner__description { color: #8d9eb0; font-size: 14px; margin-top: 14px; } .editor__splashscreen__inner__spinner { display: flex; height: auto; justify-content: center; margin-top: 70px; position: relative; text-align: center; } .editor__splashscreen__inner__spinner .throbber { display: block; height: 18px; left: auto; margin-bottom: 100px; margin-left: 0; margin-right: 0; text-align: center; top: auto; width: 50px; } .editor__sidebar { height: 100%; width: 250px; overflow: auto; background: #f4f5f6; } .editor__sidebar__versions__header { background: #f4f5f6; line-height: 48px; padding-left: 15px; border-bottom: 1px solid #dfe3e8; } .editor__sidebar__versions__header__title { float: left; font-size: 14px; font-weight: 500; } .editor__sidebar__versions__header__close { float: right; margin: 10px 10px 0 0; cursor: pointer; } .editor__sidebar__versions__item { border-bottom: 1px solid #dfe3e8; padding: 15px; font-size: 14px; } .editor__sidebar__versions__item--draft { background: #dfe3e8; } .editor__sidebar__versions__item__title { font-weight: 500; } .editor__sidebar__versions__item__description { color: #8d9eb0; } .editor__sidebar__versions__item__time { color: #607b96; } .editor__sidebar__versions__item__textinput { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: 1px solid #dfe3e8; font-size: 14px; padding: 5px 9px; height: 32px; width: 100%; margin-bottom: 6px; resize: none; } .editor__sidebar__versions__item__textinput--description { height: 52px; } .asset_update_orange_button, .editor__library__global__asset__update { background: #FFA847; color: white; } .editor__library { float: left; width: 60%; height: 100%; overflow: auto; position: absolute; } @media only screen and (max-width: 768px) { .editor__library { width: 100%; } } .editor__library__top { width: 100%; height: 25px; border-top: 2px solid #dfe3e8; border-bottom: 2px solid #dfe3e8; background-color: #ebedef; float: left; } .editor__library__top__type, .editor__library__top__name, .editor__library__top__summary, .editor__library__top__version, .editor__library__top__date, .editor__library__top__alert__info { float: left; height: inherit; border-right: 2px solid #e0e3e8; display: block; align-items: center; padding-left: 10px; } .editor__library__top__type__text, .editor__library__top__name__text, .editor__library__top__summary__text, .editor__library__top__version__text, .editor__library__top__date__text, .editor__library__top__alert__info__text { float: left; color: #34495E; font-weight: 400; } .editor__library__top__name__sort__arrow, .editor__library__top__date__sort__arrow { float: right; margin-left: auto; margin-right: 5px; opacity: 0; } .editor__library__top__name__sort__arrow.active, .editor__library__top__name__sort__arrow.hover, .editor__library__top__date__sort__arrow.active, .editor__library__top__date__sort__arrow.hover { opacity: 0.6; } .editor__library__top__name__sort__arrow.flipped, .editor__library__top__date__sort__arrow.flipped { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .editor__library__top__type { width: 12%; } .editor__library__top__name { width: 15%; } @media only screen and (max-width: 575px) { .editor__library__top__name { width: 50%; } } .editor__library__top__summary { width: 18%; } .editor__library__top__version { width: 17%; } .editor__library__top__date { width: 19%; } .editor__library__top__alert__info { width: 12%; border-right: none; } .editor__library__group { width: 100%; height: 35px; border-top: 1px solid #e5e5e5; clear: left; background-color: white; /*&:hover { background-color: #f0f9ff; }*/ } .editor__library__group__asset__update { padding-top: 3px; float: left; display: none; } .editor__library__group__asset__update--show { display: block; } .editor__library__group__selected { background-color: #0696D7 !important; } .editor__library__group__selected > .editor__library__group__type__container svg path, .editor__library__group__selected > .editor__library__group__type__container svg polygon, .editor__library__group__selected > .editor__library__group__name svg path, .editor__library__group__selected > .editor__library__group__name svg polygon, .editor__library__group__selected > .editor__library__group__summary svg path, .editor__library__group__selected > .editor__library__group__summary svg polygon, .editor__library__group__selected > .editor__library__group__date svg path, .editor__library__group__selected > .editor__library__group__date svg polygon, .editor__library__group__selected > .editor__library__group__version svg path, .editor__library__group__selected > .editor__library__group__version svg polygon, .editor__library__group__selected > .editor__library__group__alert__info__container svg path, .editor__library__group__selected > .editor__library__group__alert__info__container svg polygon { fill: white !important; } .editor__library__group__selected > .editor__library__group__type__container svg circle, .editor__library__group__selected > .editor__library__group__name svg circle, .editor__library__group__selected > .editor__library__group__summary svg circle, .editor__library__group__selected > .editor__library__group__date svg circle, .editor__library__group__selected > .editor__library__group__version svg circle, .editor__library__group__selected > .editor__library__group__alert__info__container svg circle { stroke: white !important; } .editor__library__group__selected > .editor__library__group__type__container .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__type__container .btn__txt, .editor__library__group__selected > .editor__library__group__name .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__name .btn__txt, .editor__library__group__selected > .editor__library__group__summary .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__summary .btn__txt, .editor__library__group__selected > .editor__library__group__date .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__date .btn__txt, .editor__library__group__selected > .editor__library__group__version .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__version .btn__txt, .editor__library__group__selected > .editor__library__group__alert__info__container .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__alert__info__container .btn__txt { color: white; } .editor__library__group__child { clear: left; height: 35px; } .editor__library__group__child > .editor__library__group { background-color: #f6f6f6 !important; } .editor__library__group__child > .editor__library__group__selected { background-color: #0696D7 !important; } .editor__library__group__reference { background-color: #f6f6f6; } .editor__library__group__collapseicon { float: left; margin-top: 3px; padding-left: 10px; padding-right: 5px; display: inline-block; width: 10px; } .editor__library__group__collapseicon--closed svg { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__library__group__collapseicon__link svg path, .editor__library__group__collapseicon__link svg polygon { fill: #8d9eb0; } .editor__library__group__type__container, .editor__library__group__name, .editor__library__group__summary, .editor__library__group__version, .editor__library__group__date, .editor__library__group__alert__info__container { float: left; display: block; padding-left: 10px; height: 100%; } .editor__library__group__type__container { width: 12%; } .editor__library__group__name { width: 15%; } @media only screen and (max-width: 575px) { .editor__library__group__name { width: 50%; } } .editor__library__group__name .editor__library__group__field__text { font-weight: 400; } .editor__library__group__summary { width: 18%; } .editor__library__group__version { width: 17%; } .editor__library__group__date { width: 15%; } .editor__library__group__alert__info__container { width: 12%; text-align: center; float: right; } .editor__library__group__edit { padding-left: 10px; padding-top: 3px; float: left; margin-right: 6px; } .editor__library__group__delete { padding-top: 1px; margin-right: 6px; display: none; } .editor__library__group__delete--show { display: block; } .editor__library__group__summary .editor__library__group__field__text, .editor__library__group__date .editor__library__group__field__text, .editor__library__group__version .editor__library__group__field__text { font-weight: 200; } .editor__library__group__version .editor__library__group__field__text { width: 25%; float: left; } .editor__library__group__alert__info { padding-top: 5px; display: none; } .editor__library__group__alert__info--show { display: block; } .editor__library__group__alert__info__link svg path, .editor__library__group__alert__info__link svg polygon { fill: #FFA847; } .editor__library__group__alert__info__link svg circle { stroke: #FFA847; } .editor__library__group__type { height: 35px; padding-top: 6px; display: inline-block; vertical-align: middle; } .editor__library__group__type svg path, .editor__library__group__type svg polygon { fill: #8d9eb0; } .editor__library__group__field__text { padding-left: 5px; padding-top: 6px; color: #34495E; width: 95%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: middle; height: 35px; } .editor__library__section { float: left; clear: left; width: 100%; } .editor__library__section__header { border-top: 1px solid #d4d9dc; border-bottom: 1px solid #d4d9dc; background-color: #f0f9ff; height: 22px; } .editor__library__section__collapseicon { float: left; vertical-align: middle; text-align: center; padding-left: 5px; margin-top: -2px; } .editor__library__section__collapseicon--closed svg { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__library__section__text { padding-left: 5px; font-weight: 500; color: #34495E; float: left; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .editor__library__section__count { float: left; margin-left: 5px; color: #34495E; } .editor__library__section__count > * { float: left; } .editor__library__preview { background-color: #f4f5f6; border-left: 1px solid #d4d9dc; border-top: 1px solid #d4d9dc; display: block; height: 100%; position: absolute; right: 0; width: 40%; } @media only screen and (max-width: 768px) { .editor__library__preview { display: none; } } .editor__library__preview > * { padding-left: 20px; } .editor__library__preview__library__name { font-weight: 500; font-size: 22.5px; color: #34495E; padding-bottom: 20px; padding-top: 20px; } .editor__library__preview__library__details__header { font-weight: 200; font-size: 17.5px; padding-bottom: 20px; } .editor__library__preview__library__info { border-top: 2px solid #eceef0; padding-top: 20px; } .editor__library__preview__library__info tr { vertical-align: top; } .editor__library__preview__library__info__user__text, .editor__library__preview__library__info__summary__text, .editor__library__preview__library__info__date__text { color: #34495E; font-weight: 500; } .editor__library__preview__library__info__user__value, .editor__library__preview__library__info__summary__value, .editor__library__preview__library__info__date__value { color: #34495E; font-weight: 200; padding-left: 40px; } .editor__library__preview__library__asset__info { padding-bottom: 20px; } .editor__library__preview__library__asset__info__component__count, .editor__library__preview__library__asset__info__symbol__count, .editor__library__preview__library__asset__info__footprint__count, .editor__library__preview__library__asset__info__package__count { padding-left: 40px; color: #34495E; font-weight: 200; } .editor__library__preview__asset__details { padding-top: 20px; padding-bottom: 20px; float: left; clear: left; width: 100%; } .editor__library__preview__asset__details > table { table-layout: fixed; width: 98%; } .editor__library__preview__asset__details > table tr { vertical-align: top; } .editor__library__preview hr { width: 95%; border: 1px solid #eceef0; } .editor__library__preview__editor { padding-left: 0; height: 50%; width: 100%; } .editor__library__preview__editor > img { height: 100%; } .editor__library__preview__editor > iframe { width: 100%; height: 100%; border: 2px solid rgb(236, 238, 240); } .editor__library__preview__asset__header { padding-top: 20px; float: left; width: 100%; } .editor__library__preview__asset__close { float: left; padding-left: 10px; display: none; } @media only screen and (max-width: 768px) { .editor__library__preview__asset__close { display: block; } } .editor__library__preview__asset__edit { padding-left: 10px; float: left; } .editor__library__preview__asset__edit--disabled { pointer-events: none; opacity: 0.4; } .editor__library__preview__asset__update { padding-left: 10px; float: left; display: none; } .editor__library__preview__asset__update--show { display: block; } .editor__library__preview__asset__name { font-weight: 500; font-size: 22.5px; color: #34495E; float: left; } .editor__library__preview__asset__info__text { color: #34495E; font-weight: 500; width: 15%; } .editor__library__preview__asset__info__value { color: #34495E; font-weight: 200; padding-left: 40px; width: 75%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .editor__library__preview__asset__child__list, .editor__library__preview__asset__parent__list { clear: left; float: left; padding-bottom: 20px; padding-top: 20px; width: 100%; } .editor__library__preview__asset__child__list svg path, .editor__library__preview__asset__child__list svg polygon, .editor__library__preview__asset__parent__list svg path, .editor__library__preview__asset__parent__list svg polygon { fill: #8d9eb0; } .editor__library__preview__asset__child__list > table, .editor__library__preview__asset__parent__list > table { width: 98%; table-layout: fixed; } .editor__library__preview__asset__child__list > table tr, .editor__library__preview__asset__parent__list > table tr { border: 1px solid #ccd4dc; background-color: #eaedf1; height: 35px; } .editor__library__preview__asset__child__list__type, .editor__library__preview__asset__parent__list__type { width: 7%; padding-left: 10px; padding-top: 7px; float: left; } .editor__library__preview__asset__child__list__name, .editor__library__preview__asset__parent__list__name { width: 30%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 10px; padding-top: 6px; float: left; } .editor__library__preview__asset__child__list__summary, .editor__library__preview__asset__parent__list__summary { width: 40%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 10px; padding-top: 6px; float: left; } .editor__library__preview__asset__child__list__edit__container, .editor__library__preview__asset__parent__list__edit__container { width: 20%; padding-left: 10px; } .editor__library__preview__asset__child__list__edit, .editor__library__preview__asset__parent__list__edit { float: right; margin-right: 15px; padding-top: 3px; padding-left: 10px; } .editor__library__preview__asset__child__list__header, .editor__library__preview__asset__parent__list__header { color: #34495E; font-weight: 500; padding-bottom: 10px; } .editor__library__preview__asset__child__list__alert__update, .editor__library__preview__asset__parent__list__alert__update { float: right; padding-top: 6px; padding-left: 10px; display: none; } .editor__library__preview__asset__child__list__alert__update--show, .editor__library__preview__asset__parent__list__alert__update--show { display: block; } .editor__library__preview__asset__child__list__alert__update svg path, .editor__library__preview__asset__child__list__alert__update svg polygon, .editor__library__preview__asset__parent__list__alert__update svg path, .editor__library__preview__asset__parent__list__alert__update svg polygon { fill: #8d9eb0; } .editor__library__preview__asset__child__list__alert__update svg circle, .editor__library__preview__asset__parent__list__alert__update svg circle { stroke: #8d9eb0; } .editor__library__preview__asset__child__list__update, .editor__library__preview__asset__parent__list__update { padding-top: 10px; display: none; } .editor__library__preview__asset__child__list__update--show, .editor__library__preview__asset__parent__list__update--show { display: block; } .editor__library__preview__details { height: 50%; width: 100%; overflow-x: hidden; } .editor__library__global__asset__update { border: none; } .editor__library__global__asset__update:hover { background: #f99b32; color: white; } .editor__library__global__asset__update svg path { fill: white !important; } @media only screen and (min-width: 576px) and (max-width: 991px) { .editor__library__top__type, .editor__library__top__type__container, .editor__library__group__type, .editor__library__group__type__container { width: 15%; } .editor__library__top__name, .editor__library__group__name { width: 30%; } .editor__library__top__version, .editor__library__group__version { width: 22%; } .editor__library__top__alert__info__container, .editor__library__group__alert__info__container { width: 20%; } .editor__library__top__summary, .editor__library__top__date, .editor__library__group__summary, .editor__library__group__date { display: none; } } @media only screen and (max-width: 575px) { .editor__library__top__type, .editor__library__top__type__container, .editor__library__group__type, .editor__library__group__type__container { width: 17%; } .editor__library__top__name, .editor__library__group__name { width: 50%; } .editor__library__top__alert__info__container, .editor__library__group__alert__info__container { width: 25%; } .editor__library__top__version, .editor__library__top__summary, .editor__library__top__date, .editor__library__group__version, .editor__library__group__summary, .editor__library__group__date { display: none; } .editor__library__preview { width: 90%; } } @media only screen and (max-width: 768px) { .editor__library__preview { width: 90%; } } .editor--dark { background-color: #11181f; } .editor--dark .editor__tab__subnav { background-color: #11181f; border-bottom: 1px solid #2f3943; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .editor--dark .editor__tab__subnav__group { border-color: #2f3943; } .editor--dark .editor__tab__subnav__tool__svg svg * { fill: #8d9eb0; } .editor--dark .editor__tab__subnav__tool__svg:hover svg * { fill: #c5cfd9; } .editor--dark .editor__tab__subnav__tool--disabled { pointer-events: none; } .editor--dark .editor__tab__subnav__tool--disabled svg * { fill: #c5cfd9; } .editor--dark .editor__tab__subnav__tool--active svg * { fill: #0696d7; } .editor--dark .editor__tab__toolbar__select { background-color: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector { background-color: #11181f; border: 1px solid #2f3943; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #8d9eb0; } .editor--dark .editor__inspector__title { background: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector__title--inverted { background: #8d9eb0; border-color: #2f3943; color: #11181f; } .editor--dark .editor__inspector__item { border-color: #2f3943; color: #8d9eb0; } .editor--dark .editor__inspector__item__button.btn--none_base_borders, .editor--dark .editor__inspector__item__button.editor__inspector__item__button--normal { color: #8d9eb0; border-color: #2f3943; } .editor--dark .editor__inspector__item__textinput, .editor--dark .editor__inspector__item__select { background-color: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector__item__textinput--disabled, .editor--dark .editor__inspector__item__select--disabled { background-color: #2b353f !important; } .editor--dark .editor__inspector__item__loader > div { background-color: #8d9eb0; } .editor--dark .editor__inspector__item__tool__svg svg * { fill: #8d9eb0; } .editor--dark .editor__inspector__item__tool__svg:hover svg * { fill: #2f3943; } .editor--dark .editor__inspector__item__checkbox_container label { background: #11181f; border-color: #2f3943; } .editor--dark .editor__inspector__item__checkbox_container label:after { border-color: #dfe3e8; } .editor--dark .editor__inspector__item__checkbox_container label:hover { border-color: #dfe3e8; } .editor--dark .editor__window { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: #11181f; border: 1px solid #2f3943; } .editor--dark .editor__window__title { background: #8d9eb0; border-color: #2f3943; color: #11181f; } .editor--dark .editor__window__listitem, .editor--dark .editor__window__layer { border-color: #2f3943; } .editor--dark .editor__window__listitem:hover, .editor--dark .editor__window__layer:hover { background: #2f3943; } .editor--dark .editor__window__listitem.active, .editor--dark .editor__window__layer.active { background: #2f3943; } .editor--dark .editor__window__listitem__title, .editor--dark .editor__window__layer__title { color: #8d9eb0; } .editor--dark .editor__window__listitem svg *, .editor--dark .editor__window__layer svg * { fill: #8d9eb0; } .editor--white { background-color: #ffffff; } .editor__tab { z-index: 3000; } .editor__tab__yield { z-index: 3010; } .editor__tab__toolbar { z-index: 3020; } .editor__tab__subnav { z-index: 3030; } .editor__inspector { z-index: 4000; } .editor__inspector__modalbox { z-index: 4010; } .editor__tray { z-index: 4100; } .editor__subnav { z-index: 8000; } .editor__topnav { z-index: 9000; } .editor__sidebar { z-index: 9005; } .editor__processing { z-index: 9020; } .editor__dashboard__dialog { z-index: 10000; } .editor__tooltip { z-index: 11000; } .editor__splashscreen { z-index: 12000; } .editor__modal__bg-overlay { z-index: 13000; } .editor__modal, .editor__modal__list { z-index: 13010; } .hide { display: none; } .invisible { visibility: hidden; } .no-opacity { opacity: 0; } .hide-scrollbars { overflow: hidden; } .visuallyhidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px none; } .non-selectable, .cio-ui-icon, .btn__icon, .editor__inspector__item__tool__svg { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } .left, .float { float: left; } .right { float: right; } .mouse--action { cursor: pointer; } .mouse--draggable { cursor: move; } .mouse--disabled { pointer-events: none; cursor: not-allowed; } .mouse--sortable { cursor: move; } .mouse--not-allowed, .mouse--not-allowed:hover { cursor: not-allowed !important; } .mouse--move { cursor: move; } .center { text-align: center; } .bold { font-weight: 500; } small { font-size: 85%; } strong { font-weight: 500; } em { font-style: italic; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } @charset "UTF-8"; /* Artifakt Element definitions. */ @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Hair.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Hair.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Hair.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Hair.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Hair.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 100; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Thin.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Thin.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Thin.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Thin.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Thin.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 200; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Light.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Light.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Light.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Light.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Light.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 300; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Regular.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Regular.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Regular.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Regular.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Bold.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Bold.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Bold.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Bold.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 500; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Book.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Book.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Book.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Book.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Book.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 600; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Medium.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Medium.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Medium.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Medium.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Medium.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 700; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Black.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Black.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Black.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Black.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Black.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 800; font-style: normal; } @font-face { font-family: "ArtifaktElement"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Heavy.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/EOT/Artifakt%20Element%20Heavy.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF2/Artifakt%20Element%20Heavy.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/WOFF/Artifakt%20Element%20Heavy.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktElement/TTF/Artifakt%20Element%20Heavy.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 900; font-style: normal; } /* Artifakt Legend definitions. */ @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Hair.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Hair.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Hair.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Hair.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Hair.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 100; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Thin.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Thin.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Thin.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Thin.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Thin.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 200; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Light.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Light.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Light.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Light.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Light.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 300; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Regular.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Regular.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Regular.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Regular.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Bold.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Bold.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Bold.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Bold.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 500; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Book.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Book.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Book.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Book.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Book.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 600; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Medium.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Medium.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Medium.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Medium.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Medium.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 700; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Black.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Black.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Black.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Black.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Black.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 800; font-style: normal; } @font-face { font-family: "ArtifaktLegend"; src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Heavy.eot"); /* IE9 Compat Modes */ src: url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/EOT/Artifakt%20Legend%20Heavy.eot?#iefix") format("embedded-opentype"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF2/Artifakt%20Legend%20Heavy.woff2") format("woff2"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/WOFF/Artifakt%20Legend%20Heavy.woff") format("woff"), url("//123d-circuits-assets.s3.amazonaws.com/fonts/ArtifaktLegend/TTF/Artifakt%20Legend%20Heavy.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: 900; font-style: normal; } /* ----------- BASE VARS ----------- */ /* ----------- LAYOUT ----------- */ /* ----------- HORIZONTAL GRID ----------- */ /* ----------- RESPONSIVE ----------- */ /* ----------- VERTICAL GRID ----------- */ /* ----------- COLORS GENERAL ----------- */ /* ----------- SIGN UP ----------- */ /* ----------- COLORS EDITOR ----------- */ /* ----------- HOVERS ----------- */ /* ----------- PARTNERS ----------- */ /* ----------- FONT & SIZES ----------- */ /* ----------- ADDITIONAL TITLE PROPERTIES ----------- */ /* ----------- BODY ----------- */ /* ----------- TEXT ----------- */ /* ----------- LINK ----------- */ /* ----------- BUTTON ----------- */ /* ----------- LISTS ----------- */ /* ----------- CONTENT STYLING THEMES ----------- */ /* ----------- FORMS ----------- */ /* ----------------- BUTTON COLORS ----------------- */ /* ----------------- PARTNER COLORING ----------------- */ /* ----------------- RESPONSIVE GRID ----------------- */ /* ----------------- RESPONSIVE HIDE ----------------- */ @media only screen and (max-width: 991px) { .mobile--hide { display: none; } } @media only screen and (min-width: 480px) and (max-width: 991px) { .tablet--hide { display: none; } } @media only screen and (min-width: 600px) { .tablet--large--hide { display: none; } } @media only screen and (max-width: 599px) { .tablet--large--down--hide { display: none; } } @media only screen and (min-width: 800px) { .width--800--hide { display: none; } } @media only screen and (max-width: 799px) { .width--800--down--hide { display: none; } } @media only screen and (min-width: 1000px) { .width--1000--hide { display: none; } } @media only screen and (max-width: 999px) { .width--1000--down--hide { display: none; } } @media only screen and (min-width: 992px) { .desktop--hide { display: none; } } @media only screen and (max-width: 1199px) { .desktop--small--hide { display: none; } } @media only screen and (min-width: 1200px) { .desktop--large--hide { display: none; } } @media only screen and (min-width: 1800px) { .desktop--huge--hide { display: none; } } /* ----------------- VENDOR PREFIXER ----------------- */ /* ----------------- VENDOR KEYFRAME ----------------- */ /* ----------------- Placehoolder mixin https://gist.github.com/antsa/2170024 ----------------- */ /* ----------------- Hover buttons style ----------------- */ /* ----------------- Ease Transitions ----------------- */ /* ----------------- No Highlighting ----------------- */ /* ----------------- Flexbox ----------------- */ /* ----------- RESPONSIVE ----------- */ /* ----------- COLORS GENERAL ----------- */ /* ----------- PARTNERS ----------- */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type=search] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html { height: 100%; } body { font-family: "ArtifaktElement", "Roboto", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, 宋体, SimSun, 华文细黑, STXihei, 新細明體, PMingLiU, 蘋果儷細宋, Apple LiSung Light, sans-serif; background-color: #f4f5f6; color: #34495e; font-size: 15px; min-height: 100%; } /*------------------------------------*\ $VARIABLES \*------------------------------------*/ /** * Set the spacing between your grid items. */ /** * Would you like push and pull classes enabled? */ /** * Using `inline-block` means that the grid items need their whitespace removing * in order for them to work correctly. Set the following to true if you are * going to achieve this by manually removing/commenting out any whitespace in * your HTML yourself. * * Setting this to false invokes a hack which cannot always be guaranteed, * please see the following for more detail: * * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 */ /** * Define your breakpoints. The first value is the prefix that shall be used for * your classes (e.g. `.palm--one-half`), the second value is the media query * that the breakpoint fires at. */ /** * Define which namespaced breakpoints you would like to generate for each of * widths, push and pull. This is handy if you only need pull on, say, desk, or * you only need a new width breakpoint at mobile sizes. It allows you to only * compile as much CSS as you need. All are turned on by default, but you can * add and remove breakpoints at will. * * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive` * have been set to ‘true’. */ /*------------------------------------*\ $GRID SETUP \*------------------------------------*/ /** * 1. Allow the grid system to be used on lists. * 2. Remove any margins and paddings that might affect the grid system. * 3. Apply a negative `margin-left` to negate the columns’ gutters. */ .grid { list-style: none; /* [1] */ margin: 0; /* [2] */ padding: 0; /* [2] */ margin-left: -20px; /* [3] */ letter-spacing: -0.31em; } /* Opera hack */ .opera:-o-prefocus, .grid { word-spacing: -0.43em; } /** * 1. Cause columns to stack side-by-side. * 2. Space columns apart. * 3. Align columns to the tops of each other. * 4. Full-width unless told to behave otherwise. * 5. Required to combine fluid widths and fixed gutters. */ .grid__item { display: inline-block; /* [1] */ padding-left: 20px; /* [2] */ vertical-align: top; /* [3] */ width: 100%; /* [4] */ -webkit-box-sizing: border-box; /* [5] */ -moz-box-sizing: border-box; /* [5] */ box-sizing: border-box; /* [5] */ letter-spacing: normal; word-spacing: normal; } /** * Reversed grids allow you to structure your source in the opposite order to * how your rendered layout will appear. Extends `.grid`. */ .grid--rev { direction: rtl; text-align: left; } .grid--rev > .grid__item { direction: ltr; text-align: left; } /** * Gutterless grids have all the properties of regular grids, minus any spacing. * Extends `.grid`. */ .grid--full { margin-left: 0; } .grid--full > .grid__item { padding-left: 0; } /** * Align the entire grid to the right. Extends `.grid`. */ .grid--right { text-align: right; } .grid--right > .grid__item { text-align: left; } /** * Centered grids align grid items centrally without needing to use push or pull * classes. Extends `.grid`. */ .grid--center { text-align: center; } .grid--center > .grid__item { text-align: left; } /** * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends * `.grid`. */ .grid--middle > .grid__item { vertical-align: middle; } .grid--bottom > .grid__item { vertical-align: bottom; } /** * Create grids with narrower gutters. Extends `.grid`. */ .grid--narrow { margin-left: -10px; } .grid--narrow > .grid__item { padding-left: 10px; } /** * Create grids with wider gutters. Extends `.grid`. */ .grid--wide { margin-left: -40px; } .grid--wide > .grid__item { padding-left: 40px; } /*------------------------------------*\ $WIDTHS \*------------------------------------*/ /** * Create our width classes, prefixed by the specified namespace. */ /** * Our regular, non-responsive width classes. */ /** * Whole */ .one-whole { width: 100%; } /** * Halves */ .one-half, .six-twelfths, .five-tenths, .four-eighths, .three-sixths, .two-quarters { width: 50%; } /** * Thirds */ .one-third, .four-twelfths, .two-sixths { width: 33.333%; } .two-thirds, .eight-twelfths, .four-sixths { width: 66.666%; } /** * Quarters */ .one-quarter, .three-twelfths, .two-eighths { width: 25%; } .three-quarters, .nine-twelfths, .six-eighths { width: 75%; } /** * Fifths */ .one-fifth, .two-tenths { width: 20%; } .two-fifths, .four-tenths { width: 40%; } .three-fifths, .six-tenths { width: 60%; } .four-fifths, .eight-tenths { width: 80%; } /** * Sixths */ .one-sixth, .two-twelfths { width: 16.666%; } .five-sixths, .ten-twelfths { width: 83.333%; } /** * Eighths */ .one-eighth { width: 12.5%; } .three-eighths { width: 37.5%; } .five-eighths { width: 62.5%; } .seven-eighths { width: 87.5%; } /** * Tenths */ .one-tenth { width: 10%; } .three-tenths { width: 30%; } .seven-tenths { width: 70%; } .nine-tenths { width: 90%; } /** * Twelfths */ .one-twelfth { width: 8.333%; } .five-twelfths { width: 41.666%; } .seven-twelfths { width: 58.333%; } .eleven-twelfths { width: 91.666%; } /** * Our responsive classes, if we have enabled them. */ @media only screen and (max-width: 991px) { /** * Whole */ .mobile--one-whole { width: 100%; } /** * Halves */ .mobile--one-half, .mobile--six-twelfths, .mobile--five-tenths, .mobile--four-eighths, .mobile--three-sixths, .mobile--two-quarters { width: 50%; } /** * Thirds */ .mobile--one-third, .mobile--four-twelfths, .mobile--two-sixths { width: 33.333%; } .mobile--two-thirds, .mobile--eight-twelfths, .mobile--four-sixths { width: 66.666%; } /** * Quarters */ .mobile--one-quarter, .mobile--three-twelfths, .mobile--two-eighths { width: 25%; } .mobile--three-quarters, .mobile--nine-twelfths, .mobile--six-eighths { width: 75%; } /** * Fifths */ .mobile--one-fifth, .mobile--two-tenths { width: 20%; } .mobile--two-fifths, .mobile--four-tenths { width: 40%; } .mobile--three-fifths, .mobile--six-tenths { width: 60%; } .mobile--four-fifths, .mobile--eight-tenths { width: 80%; } /** * Sixths */ .mobile--one-sixth, .mobile--two-twelfths { width: 16.666%; } .mobile--five-sixths, .mobile--ten-twelfths { width: 83.333%; } /** * Eighths */ .mobile--one-eighth { width: 12.5%; } .mobile--three-eighths { width: 37.5%; } .mobile--five-eighths { width: 62.5%; } .mobile--seven-eighths { width: 87.5%; } /** * Tenths */ .mobile--one-tenth { width: 10%; } .mobile--three-tenths { width: 30%; } .mobile--seven-tenths { width: 70%; } .mobile--nine-tenths { width: 90%; } /** * Twelfths */ .mobile--one-twelfth { width: 8.333%; } .mobile--five-twelfths { width: 41.666%; } .mobile--seven-twelfths { width: 58.333%; } .mobile--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 480px) and (max-width: 991px) { /** * Whole */ .tablet--one-whole { width: 100%; } /** * Halves */ .tablet--one-half, .tablet--six-twelfths, .tablet--five-tenths, .tablet--four-eighths, .tablet--three-sixths, .tablet--two-quarters { width: 50%; } /** * Thirds */ .tablet--one-third, .tablet--four-twelfths, .tablet--two-sixths { width: 33.333%; } .tablet--two-thirds, .tablet--eight-twelfths, .tablet--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--one-quarter, .tablet--three-twelfths, .tablet--two-eighths { width: 25%; } .tablet--three-quarters, .tablet--nine-twelfths, .tablet--six-eighths { width: 75%; } /** * Fifths */ .tablet--one-fifth, .tablet--two-tenths { width: 20%; } .tablet--two-fifths, .tablet--four-tenths { width: 40%; } .tablet--three-fifths, .tablet--six-tenths { width: 60%; } .tablet--four-fifths, .tablet--eight-tenths { width: 80%; } /** * Sixths */ .tablet--one-sixth, .tablet--two-twelfths { width: 16.666%; } .tablet--five-sixths, .tablet--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--one-eighth { width: 12.5%; } .tablet--three-eighths { width: 37.5%; } .tablet--five-eighths { width: 62.5%; } .tablet--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--one-tenth { width: 10%; } .tablet--three-tenths { width: 30%; } .tablet--seven-tenths { width: 70%; } .tablet--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--one-twelfth { width: 8.333%; } .tablet--five-twelfths { width: 41.666%; } .tablet--seven-twelfths { width: 58.333%; } .tablet--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 600px) { /** * Whole */ .tablet--large--one-whole { width: 100%; } /** * Halves */ .tablet--large--one-half, .tablet--large--six-twelfths, .tablet--large--five-tenths, .tablet--large--four-eighths, .tablet--large--three-sixths, .tablet--large--two-quarters { width: 50%; } /** * Thirds */ .tablet--large--one-third, .tablet--large--four-twelfths, .tablet--large--two-sixths { width: 33.333%; } .tablet--large--two-thirds, .tablet--large--eight-twelfths, .tablet--large--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--large--one-quarter, .tablet--large--three-twelfths, .tablet--large--two-eighths { width: 25%; } .tablet--large--three-quarters, .tablet--large--nine-twelfths, .tablet--large--six-eighths { width: 75%; } /** * Fifths */ .tablet--large--one-fifth, .tablet--large--two-tenths { width: 20%; } .tablet--large--two-fifths, .tablet--large--four-tenths { width: 40%; } .tablet--large--three-fifths, .tablet--large--six-tenths { width: 60%; } .tablet--large--four-fifths, .tablet--large--eight-tenths { width: 80%; } /** * Sixths */ .tablet--large--one-sixth, .tablet--large--two-twelfths { width: 16.666%; } .tablet--large--five-sixths, .tablet--large--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--large--one-eighth { width: 12.5%; } .tablet--large--three-eighths { width: 37.5%; } .tablet--large--five-eighths { width: 62.5%; } .tablet--large--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--large--one-tenth { width: 10%; } .tablet--large--three-tenths { width: 30%; } .tablet--large--seven-tenths { width: 70%; } .tablet--large--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--large--one-twelfth { width: 8.333%; } .tablet--large--five-twelfths { width: 41.666%; } .tablet--large--seven-twelfths { width: 58.333%; } .tablet--large--eleven-twelfths { width: 91.666%; } } @media only screen and (max-width: 600px) { /** * Whole */ .tablet--large-down--one-whole { width: 100%; } /** * Halves */ .tablet--large-down--one-half, .tablet--large-down--six-twelfths, .tablet--large-down--five-tenths, .tablet--large-down--four-eighths, .tablet--large-down--three-sixths, .tablet--large-down--two-quarters { width: 50%; } /** * Thirds */ .tablet--large-down--one-third, .tablet--large-down--four-twelfths, .tablet--large-down--two-sixths { width: 33.333%; } .tablet--large-down--two-thirds, .tablet--large-down--eight-twelfths, .tablet--large-down--four-sixths { width: 66.666%; } /** * Quarters */ .tablet--large-down--one-quarter, .tablet--large-down--three-twelfths, .tablet--large-down--two-eighths { width: 25%; } .tablet--large-down--three-quarters, .tablet--large-down--nine-twelfths, .tablet--large-down--six-eighths { width: 75%; } /** * Fifths */ .tablet--large-down--one-fifth, .tablet--large-down--two-tenths { width: 20%; } .tablet--large-down--two-fifths, .tablet--large-down--four-tenths { width: 40%; } .tablet--large-down--three-fifths, .tablet--large-down--six-tenths { width: 60%; } .tablet--large-down--four-fifths, .tablet--large-down--eight-tenths { width: 80%; } /** * Sixths */ .tablet--large-down--one-sixth, .tablet--large-down--two-twelfths { width: 16.666%; } .tablet--large-down--five-sixths, .tablet--large-down--ten-twelfths { width: 83.333%; } /** * Eighths */ .tablet--large-down--one-eighth { width: 12.5%; } .tablet--large-down--three-eighths { width: 37.5%; } .tablet--large-down--five-eighths { width: 62.5%; } .tablet--large-down--seven-eighths { width: 87.5%; } /** * Tenths */ .tablet--large-down--one-tenth { width: 10%; } .tablet--large-down--three-tenths { width: 30%; } .tablet--large-down--seven-tenths { width: 70%; } .tablet--large-down--nine-tenths { width: 90%; } /** * Twelfths */ .tablet--large-down--one-twelfth { width: 8.333%; } .tablet--large-down--five-twelfths { width: 41.666%; } .tablet--large-down--seven-twelfths { width: 58.333%; } .tablet--large-down--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .desktop--one-whole { width: 100%; } /** * Halves */ .desktop--one-half, .desktop--six-twelfths, .desktop--five-tenths, .desktop--four-eighths, .desktop--three-sixths, .desktop--two-quarters { width: 50%; } /** * Thirds */ .desktop--one-third, .desktop--four-twelfths, .desktop--two-sixths { width: 33.333%; } .desktop--two-thirds, .desktop--eight-twelfths, .desktop--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--one-quarter, .desktop--three-twelfths, .desktop--two-eighths { width: 25%; } .desktop--three-quarters, .desktop--nine-twelfths, .desktop--six-eighths { width: 75%; } /** * Fifths */ .desktop--one-fifth, .desktop--two-tenths { width: 20%; } .desktop--two-fifths, .desktop--four-tenths { width: 40%; } .desktop--three-fifths, .desktop--six-tenths { width: 60%; } .desktop--four-fifths, .desktop--eight-tenths { width: 80%; } /** * Sixths */ .desktop--one-sixth, .desktop--two-twelfths { width: 16.666%; } .desktop--five-sixths, .desktop--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--one-eighth { width: 12.5%; } .desktop--three-eighths { width: 37.5%; } .desktop--five-eighths { width: 62.5%; } .desktop--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--one-tenth { width: 10%; } .desktop--three-tenths { width: 30%; } .desktop--seven-tenths { width: 70%; } .desktop--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--one-twelfth { width: 8.333%; } .desktop--five-twelfths { width: 41.666%; } .desktop--seven-twelfths { width: 58.333%; } .desktop--eleven-twelfths { width: 91.666%; } } @media only screen and (max-width: 1199px) { /** * Whole */ .desktop--small--one-whole { width: 100%; } /** * Halves */ .desktop--small--one-half, .desktop--small--six-twelfths, .desktop--small--five-tenths, .desktop--small--four-eighths, .desktop--small--three-sixths, .desktop--small--two-quarters { width: 50%; } /** * Thirds */ .desktop--small--one-third, .desktop--small--four-twelfths, .desktop--small--two-sixths { width: 33.333%; } .desktop--small--two-thirds, .desktop--small--eight-twelfths, .desktop--small--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--small--one-quarter, .desktop--small--three-twelfths, .desktop--small--two-eighths { width: 25%; } .desktop--small--three-quarters, .desktop--small--nine-twelfths, .desktop--small--six-eighths { width: 75%; } /** * Fifths */ .desktop--small--one-fifth, .desktop--small--two-tenths { width: 20%; } .desktop--small--two-fifths, .desktop--small--four-tenths { width: 40%; } .desktop--small--three-fifths, .desktop--small--six-tenths { width: 60%; } .desktop--small--four-fifths, .desktop--small--eight-tenths { width: 80%; } /** * Sixths */ .desktop--small--one-sixth, .desktop--small--two-twelfths { width: 16.666%; } .desktop--small--five-sixths, .desktop--small--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--small--one-eighth { width: 12.5%; } .desktop--small--three-eighths { width: 37.5%; } .desktop--small--five-eighths { width: 62.5%; } .desktop--small--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--small--one-tenth { width: 10%; } .desktop--small--three-tenths { width: 30%; } .desktop--small--seven-tenths { width: 70%; } .desktop--small--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--small--one-twelfth { width: 8.333%; } .desktop--small--five-twelfths { width: 41.666%; } .desktop--small--seven-twelfths { width: 58.333%; } .desktop--small--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 1200px) { /** * Whole */ .desktop--large--one-whole { width: 100%; } /** * Halves */ .desktop--large--one-half, .desktop--large--six-twelfths, .desktop--large--five-tenths, .desktop--large--four-eighths, .desktop--large--three-sixths, .desktop--large--two-quarters { width: 50%; } /** * Thirds */ .desktop--large--one-third, .desktop--large--four-twelfths, .desktop--large--two-sixths { width: 33.333%; } .desktop--large--two-thirds, .desktop--large--eight-twelfths, .desktop--large--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--large--one-quarter, .desktop--large--three-twelfths, .desktop--large--two-eighths { width: 25%; } .desktop--large--three-quarters, .desktop--large--nine-twelfths, .desktop--large--six-eighths { width: 75%; } /** * Fifths */ .desktop--large--one-fifth, .desktop--large--two-tenths { width: 20%; } .desktop--large--two-fifths, .desktop--large--four-tenths { width: 40%; } .desktop--large--three-fifths, .desktop--large--six-tenths { width: 60%; } .desktop--large--four-fifths, .desktop--large--eight-tenths { width: 80%; } /** * Sixths */ .desktop--large--one-sixth, .desktop--large--two-twelfths { width: 16.666%; } .desktop--large--five-sixths, .desktop--large--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--large--one-eighth { width: 12.5%; } .desktop--large--three-eighths { width: 37.5%; } .desktop--large--five-eighths { width: 62.5%; } .desktop--large--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--large--one-tenth { width: 10%; } .desktop--large--three-tenths { width: 30%; } .desktop--large--seven-tenths { width: 70%; } .desktop--large--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--large--one-twelfth { width: 8.333%; } .desktop--large--five-twelfths { width: 41.666%; } .desktop--large--seven-twelfths { width: 58.333%; } .desktop--large--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 1800px) { /** * Whole */ .desktop--huge--one-whole { width: 100%; } /** * Halves */ .desktop--huge--one-half, .desktop--huge--six-twelfths, .desktop--huge--five-tenths, .desktop--huge--four-eighths, .desktop--huge--three-sixths, .desktop--huge--two-quarters { width: 50%; } /** * Thirds */ .desktop--huge--one-third, .desktop--huge--four-twelfths, .desktop--huge--two-sixths { width: 33.333%; } .desktop--huge--two-thirds, .desktop--huge--eight-twelfths, .desktop--huge--four-sixths { width: 66.666%; } /** * Quarters */ .desktop--huge--one-quarter, .desktop--huge--three-twelfths, .desktop--huge--two-eighths { width: 25%; } .desktop--huge--three-quarters, .desktop--huge--nine-twelfths, .desktop--huge--six-eighths { width: 75%; } /** * Fifths */ .desktop--huge--one-fifth, .desktop--huge--two-tenths { width: 20%; } .desktop--huge--two-fifths, .desktop--huge--four-tenths { width: 40%; } .desktop--huge--three-fifths, .desktop--huge--six-tenths { width: 60%; } .desktop--huge--four-fifths, .desktop--huge--eight-tenths { width: 80%; } /** * Sixths */ .desktop--huge--one-sixth, .desktop--huge--two-twelfths { width: 16.666%; } .desktop--huge--five-sixths, .desktop--huge--ten-twelfths { width: 83.333%; } /** * Eighths */ .desktop--huge--one-eighth { width: 12.5%; } .desktop--huge--three-eighths { width: 37.5%; } .desktop--huge--five-eighths { width: 62.5%; } .desktop--huge--seven-eighths { width: 87.5%; } /** * Tenths */ .desktop--huge--one-tenth { width: 10%; } .desktop--huge--three-tenths { width: 30%; } .desktop--huge--seven-tenths { width: 70%; } .desktop--huge--nine-tenths { width: 90%; } /** * Twelfths */ .desktop--huge--one-twelfth { width: 8.333%; } .desktop--huge--five-twelfths { width: 41.666%; } .desktop--huge--seven-twelfths { width: 58.333%; } .desktop--huge--eleven-twelfths { width: 91.666%; } } /*------------------------------------*\ $PUSH \*------------------------------------*/ /** * Push classes, to move grid items over to the right by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*=push--] { position: relative; } /** * Whole */ .push--one-whole { left: 100%; } /** * Halves */ .push--one-half, .push--six-twelfths, .push--five-tenths, .push--four-eighths, .push--three-sixths, .push--two-quarters { left: 50%; } /** * Thirds */ .push--one-third, .push--four-twelfths, .push--two-sixths { left: 33.333%; } .push--two-thirds, .push--eight-twelfths, .push--four-sixths { left: 66.666%; } /** * Quarters */ .push--one-quarter, .push--three-twelfths, .push--two-eighths { left: 25%; } .push--three-quarters, .push--nine-twelfths, .push--six-eighths { left: 75%; } /** * Fifths */ .push--one-fifth, .push--two-tenths { left: 20%; } .push--two-fifths, .push--four-tenths { left: 40%; } .push--three-fifths, .push--six-tenths { left: 60%; } .push--four-fifths, .push--eight-tenths { left: 80%; } /** * Sixths */ .push--one-sixth, .push--two-twelfths { left: 16.666%; } .push--five-sixths, .push--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--one-eighth { left: 12.5%; } .push--three-eighths { left: 37.5%; } .push--five-eighths { left: 62.5%; } .push--seven-eighths { left: 87.5%; } /** * Tenths */ .push--one-tenth { left: 10%; } .push--three-tenths { left: 30%; } .push--seven-tenths { left: 70%; } .push--nine-tenths { left: 90%; } /** * Twelfths */ .push--one-twelfth { left: 8.333%; } .push--five-twelfths { left: 41.666%; } .push--seven-twelfths { left: 58.333%; } .push--eleven-twelfths { left: 91.666%; } @media only screen and (max-width: 991px) { /** * Whole */ .push--mobile--one-whole { left: 100%; } /** * Halves */ .push--mobile--one-half, .push--mobile--six-twelfths, .push--mobile--five-tenths, .push--mobile--four-eighths, .push--mobile--three-sixths, .push--mobile--two-quarters { left: 50%; } /** * Thirds */ .push--mobile--one-third, .push--mobile--four-twelfths, .push--mobile--two-sixths { left: 33.333%; } .push--mobile--two-thirds, .push--mobile--eight-twelfths, .push--mobile--four-sixths { left: 66.666%; } /** * Quarters */ .push--mobile--one-quarter, .push--mobile--three-twelfths, .push--mobile--two-eighths { left: 25%; } .push--mobile--three-quarters, .push--mobile--nine-twelfths, .push--mobile--six-eighths { left: 75%; } /** * Fifths */ .push--mobile--one-fifth, .push--mobile--two-tenths { left: 20%; } .push--mobile--two-fifths, .push--mobile--four-tenths { left: 40%; } .push--mobile--three-fifths, .push--mobile--six-tenths { left: 60%; } .push--mobile--four-fifths, .push--mobile--eight-tenths { left: 80%; } /** * Sixths */ .push--mobile--one-sixth, .push--mobile--two-twelfths { left: 16.666%; } .push--mobile--five-sixths, .push--mobile--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--mobile--one-eighth { left: 12.5%; } .push--mobile--three-eighths { left: 37.5%; } .push--mobile--five-eighths { left: 62.5%; } .push--mobile--seven-eighths { left: 87.5%; } /** * Tenths */ .push--mobile--one-tenth { left: 10%; } .push--mobile--three-tenths { left: 30%; } .push--mobile--seven-tenths { left: 70%; } .push--mobile--nine-tenths { left: 90%; } /** * Twelfths */ .push--mobile--one-twelfth { left: 8.333%; } .push--mobile--five-twelfths { left: 41.666%; } .push--mobile--seven-twelfths { left: 58.333%; } .push--mobile--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .push--desktop--one-whole { left: 100%; } /** * Halves */ .push--desktop--one-half, .push--desktop--six-twelfths, .push--desktop--five-tenths, .push--desktop--four-eighths, .push--desktop--three-sixths, .push--desktop--two-quarters { left: 50%; } /** * Thirds */ .push--desktop--one-third, .push--desktop--four-twelfths, .push--desktop--two-sixths { left: 33.333%; } .push--desktop--two-thirds, .push--desktop--eight-twelfths, .push--desktop--four-sixths { left: 66.666%; } /** * Quarters */ .push--desktop--one-quarter, .push--desktop--three-twelfths, .push--desktop--two-eighths { left: 25%; } .push--desktop--three-quarters, .push--desktop--nine-twelfths, .push--desktop--six-eighths { left: 75%; } /** * Fifths */ .push--desktop--one-fifth, .push--desktop--two-tenths { left: 20%; } .push--desktop--two-fifths, .push--desktop--four-tenths { left: 40%; } .push--desktop--three-fifths, .push--desktop--six-tenths { left: 60%; } .push--desktop--four-fifths, .push--desktop--eight-tenths { left: 80%; } /** * Sixths */ .push--desktop--one-sixth, .push--desktop--two-twelfths { left: 16.666%; } .push--desktop--five-sixths, .push--desktop--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--desktop--one-eighth { left: 12.5%; } .push--desktop--three-eighths { left: 37.5%; } .push--desktop--five-eighths { left: 62.5%; } .push--desktop--seven-eighths { left: 87.5%; } /** * Tenths */ .push--desktop--one-tenth { left: 10%; } .push--desktop--three-tenths { left: 30%; } .push--desktop--seven-tenths { left: 70%; } .push--desktop--nine-tenths { left: 90%; } /** * Twelfths */ .push--desktop--one-twelfth { left: 8.333%; } .push--desktop--five-twelfths { left: 41.666%; } .push--desktop--seven-twelfths { left: 58.333%; } .push--desktop--eleven-twelfths { left: 91.666%; } } /*------------------------------------*\ $PULL \*------------------------------------*/ /** * Pull classes, to move grid items back to the left by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*=pull--] { position: relative; } /** * Whole */ .pull--one-whole { right: 100%; } /** * Halves */ .pull--one-half, .pull--six-twelfths, .pull--five-tenths, .pull--four-eighths, .pull--three-sixths, .pull--two-quarters { right: 50%; } /** * Thirds */ .pull--one-third, .pull--four-twelfths, .pull--two-sixths { right: 33.333%; } .pull--two-thirds, .pull--eight-twelfths, .pull--four-sixths { right: 66.666%; } /** * Quarters */ .pull--one-quarter, .pull--three-twelfths, .pull--two-eighths { right: 25%; } .pull--three-quarters, .pull--nine-twelfths, .pull--six-eighths { right: 75%; } /** * Fifths */ .pull--one-fifth, .pull--two-tenths { right: 20%; } .pull--two-fifths, .pull--four-tenths { right: 40%; } .pull--three-fifths, .pull--six-tenths { right: 60%; } .pull--four-fifths, .pull--eight-tenths { right: 80%; } /** * Sixths */ .pull--one-sixth, .pull--two-twelfths { right: 16.666%; } .pull--five-sixths, .pull--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--one-eighth { right: 12.5%; } .pull--three-eighths { right: 37.5%; } .pull--five-eighths { right: 62.5%; } .pull--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--one-tenth { right: 10%; } .pull--three-tenths { right: 30%; } .pull--seven-tenths { right: 70%; } .pull--nine-tenths { right: 90%; } /** * Twelfths */ .pull--one-twelfth { right: 8.333%; } .pull--five-twelfths { right: 41.666%; } .pull--seven-twelfths { right: 58.333%; } .pull--eleven-twelfths { right: 91.666%; } @media only screen and (max-width: 991px) { /** * Whole */ .pull--mobile--one-whole { right: 100%; } /** * Halves */ .pull--mobile--one-half, .pull--mobile--six-twelfths, .pull--mobile--five-tenths, .pull--mobile--four-eighths, .pull--mobile--three-sixths, .pull--mobile--two-quarters { right: 50%; } /** * Thirds */ .pull--mobile--one-third, .pull--mobile--four-twelfths, .pull--mobile--two-sixths { right: 33.333%; } .pull--mobile--two-thirds, .pull--mobile--eight-twelfths, .pull--mobile--four-sixths { right: 66.666%; } /** * Quarters */ .pull--mobile--one-quarter, .pull--mobile--three-twelfths, .pull--mobile--two-eighths { right: 25%; } .pull--mobile--three-quarters, .pull--mobile--nine-twelfths, .pull--mobile--six-eighths { right: 75%; } /** * Fifths */ .pull--mobile--one-fifth, .pull--mobile--two-tenths { right: 20%; } .pull--mobile--two-fifths, .pull--mobile--four-tenths { right: 40%; } .pull--mobile--three-fifths, .pull--mobile--six-tenths { right: 60%; } .pull--mobile--four-fifths, .pull--mobile--eight-tenths { right: 80%; } /** * Sixths */ .pull--mobile--one-sixth, .pull--mobile--two-twelfths { right: 16.666%; } .pull--mobile--five-sixths, .pull--mobile--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--mobile--one-eighth { right: 12.5%; } .pull--mobile--three-eighths { right: 37.5%; } .pull--mobile--five-eighths { right: 62.5%; } .pull--mobile--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--mobile--one-tenth { right: 10%; } .pull--mobile--three-tenths { right: 30%; } .pull--mobile--seven-tenths { right: 70%; } .pull--mobile--nine-tenths { right: 90%; } /** * Twelfths */ .pull--mobile--one-twelfth { right: 8.333%; } .pull--mobile--five-twelfths { right: 41.666%; } .pull--mobile--seven-twelfths { right: 58.333%; } .pull--mobile--eleven-twelfths { right: 91.666%; } } @media only screen and (min-width: 992px) { /** * Whole */ .pull--desktop--one-whole { right: 100%; } /** * Halves */ .pull--desktop--one-half, .pull--desktop--six-twelfths, .pull--desktop--five-tenths, .pull--desktop--four-eighths, .pull--desktop--three-sixths, .pull--desktop--two-quarters { right: 50%; } /** * Thirds */ .pull--desktop--one-third, .pull--desktop--four-twelfths, .pull--desktop--two-sixths { right: 33.333%; } .pull--desktop--two-thirds, .pull--desktop--eight-twelfths, .pull--desktop--four-sixths { right: 66.666%; } /** * Quarters */ .pull--desktop--one-quarter, .pull--desktop--three-twelfths, .pull--desktop--two-eighths { right: 25%; } .pull--desktop--three-quarters, .pull--desktop--nine-twelfths, .pull--desktop--six-eighths { right: 75%; } /** * Fifths */ .pull--desktop--one-fifth, .pull--desktop--two-tenths { right: 20%; } .pull--desktop--two-fifths, .pull--desktop--four-tenths { right: 40%; } .pull--desktop--three-fifths, .pull--desktop--six-tenths { right: 60%; } .pull--desktop--four-fifths, .pull--desktop--eight-tenths { right: 80%; } /** * Sixths */ .pull--desktop--one-sixth, .pull--desktop--two-twelfths { right: 16.666%; } .pull--desktop--five-sixths, .pull--desktop--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--desktop--one-eighth { right: 12.5%; } .pull--desktop--three-eighths { right: 37.5%; } .pull--desktop--five-eighths { right: 62.5%; } .pull--desktop--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--desktop--one-tenth { right: 10%; } .pull--desktop--three-tenths { right: 30%; } .pull--desktop--seven-tenths { right: 70%; } .pull--desktop--nine-tenths { right: 90%; } /** * Twelfths */ .pull--desktop--one-twelfth { right: 8.333%; } .pull--desktop--five-twelfths { right: 41.666%; } .pull--desktop--seven-twelfths { right: 58.333%; } .pull--desktop--eleven-twelfths { right: 91.666%; } } .vertical-spacing { margin-top: 20px; margin-bottom: 20px; } .vertical-spacing--half { margin-top: 10px; margin-bottom: 10px; } .vertical-spacing--double { margin-top: 40px; margin-bottom: 40px; } .vertical-spacing--bottom { margin-bottom: 20px; } .vertical-spacing--bottom--half { margin-bottom: 10px; } .vertical-spacing--bottom--double { margin-bottom: 40px; } .vertical-spacing--top { margin-top: 20px; } .vertical-spacing--top--half { margin-top: 10px; } .vertical-spacing--top--double { margin-top: 40px; } .vertical-spacing--title { margin-bottom: 16px; } .vertical-spacing--content-block { margin-top: 48px; margin-bottom: 48px; } .link-blue { color: #0696d7; } .link-blue:hover, .link-blue:focus { color: rgb(5.3076923077, 132.6923076923, 190.1923076923); outline: none; } a { text-decoration: none; color: #34495e; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:hover { color: #0696d7; text-decoration: none; } a.link { text-decoration: underline; } a.btn, a.editor__form__file__label { text-decoration: none; } a.btn:hover, a.editor__form__file__label:hover { text-decoration: none; } .cio-ui-icon, .editor__inspector__item__tool__svg, .btn__icon { position: relative; width: 30px; height: 30px; } .cio-ui-icon svg, .editor__inspector__item__tool__svg svg, .btn__icon svg { -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; } .cio-ui-icon-link svg * { -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -ms-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; fill: #8d9eb0; } .cio-ui-icon-link:hover svg * { fill: #0696d7; } .btn, .editor__form__file__label { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -ms-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; display: inline-block; cursor: pointer; font-style: normal; font-weight: 500; border: 1px solid #0696d7; vertical-align: middle; } .btn:hover, .editor__form__file__label:hover { outline: none; } .btn.disabled, .disabled.editor__form__file__label { cursor: not-allowed; color: #586675; opacity: 0.5; } .btn__icon { float: left; } .btn__icon svg { float: left; line-height: 0; } .btn__txt { float: left; } @media only screen and (max-width: 991px) { .btn--collapsable > :nth-child(2) { display: none; } } .btn--justify { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .btn--align-left { width: 100%; } .btn--xxxl { font-size: 18px; line-height: 48px; padding-right: 30px; padding-left: 20px; } .btn--xxxl .btn__txt { margin-left: 10px; } .btn--xxxl .btn__icon svg { margin: 9px 0; } @media only screen and (max-width: 991px) { .btn--xxxl.btn--collapsable svg { margin: 9px -20px 9px -10px; } } .btn--xxl { font-size: 16px; line-height: 43px; padding-right: 11px; padding-left: 6px; } .btn--xxl .btn__txt { margin-left: 6px; } .btn--xxl .btn__icon svg { margin: 4px 0; } @media only screen and (max-width: 991px) { .btn--xxl.btn--collapsable svg { margin: 4px -4px 4px 0; } } .btn--xl { font-size: 16px; line-height: 38px; padding-right: 11px; padding-left: 6px; } .btn--xl .btn__txt { margin-left: 6px; } .btn--xl .btn__icon svg { margin: 4px 0; } @media only screen and (max-width: 991px) { .btn--xl.btn--collapsable svg { margin: 4px -4px 4px 0; } } input.btn--xl { padding-left: 12px; } .btn--m, .editor__form__file__label { font-size: 14px; line-height: 30px; padding-right: 10px; padding-left: 5px; } .btn--m .btn__txt, .editor__form__file__label .btn__txt { margin-left: 5px; } .btn--m .btn__icon svg, .editor__form__file__label .btn__icon svg { margin: 0; } .btn--m .btn__icon--single, .editor__form__file__label .btn__icon--single { margin-right: -8px; margin-left: -2px; } @media only screen and (max-width: 991px) { .btn--m.btn--collapsable svg, .btn--collapsable.editor__form__file__label svg { margin: 0 -8px 0 -3px; } } input.btn--m, input.editor__form__file__label { padding-left: 10px; } .btn--s { font-size: 14px; line-height: 26px; padding: 0 9px; } .btn--s .btn__txt { padding: 0; } .btn--accent_white_accent, .btn--accent_none_accent, .editor__form__file__label, .editor__tab__subnav__button__btn--active { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--accent_white_accent:focus, .btn--accent_none_accent:focus, .editor__form__file__label:focus, .editor__tab__subnav__button__btn--active:focus { color: #ffffff; } .btn--accent_white_accent svg *, .btn--accent_none_accent svg *, .editor__form__file__label svg *, .editor__tab__subnav__button__btn--active svg * { fill: #ffffff; } .btn--accent_white_accent:hover, .btn--accent_none_accent:hover, .editor__form__file__label:hover, .editor__tab__subnav__button__btn--active:hover { background: rgb(4.6153846154, 115.3846153846, 165.3846153846); border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #ffffff; } .btn--accent_white_accent:hover svg *, .btn--accent_none_accent:hover svg *, .editor__form__file__label:hover svg *, .editor__tab__subnav__button__btn--active:hover svg * { fill: #ffffff; } .btn--dark_modal { background: #3B4454; color: #ffffff; border-color: #BEC8D2; } .btn--dark_modal:focus { color: #ffffff; } .btn--dark_modal svg * { fill: #ffffff; } .btn--dark_modal:hover { background: rgb(37.958041958, 43.7482517483, 54.041958042); border-color: rgb(159.8636363636, 174.5, 189.1363636364); color: #ffffff; } .btn--dark_modal:hover svg * { fill: #ffffff; } .btn--none_accent_accent { background: none; color: #0696d7; border-color: #0696d7; } .btn--none_accent_accent:focus { color: #0696d7; } .btn--none_accent_accent svg * { fill: #0696d7; } .btn--none_accent_accent:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--none_accent_accent:hover svg * { fill: #0696d7; } .btn--none_accent_none { background: none; color: #0696d7; border: none; } .btn--none_accent_none:focus { color: #0696d7; } .btn--none_accent_none svg * { fill: #0696d7; } .btn--none_accent_none:hover { background: none; border-color: none; color: #0696d7; } .btn--none_accent_none:hover svg * { fill: #0696d7; } .btn--none_base_borders, .editor__inspector__item__button--normal { background: none; color: #586675; border-color: #dfe3e8; } .btn--none_base_borders:focus, .editor__inspector__item__button--normal:focus { color: #586675; } .btn--none_base_borders svg *, .editor__inspector__item__button--normal svg * { fill: #586675; } .btn--none_base_borders:hover, .editor__inspector__item__button--normal:hover { background: none; border-color: rgb(193.3272727273, 201.0363636364, 210.6727272727); color: #586675; } .btn--none_base_borders:hover svg *, .editor__inspector__item__button--normal:hover svg * { fill: #586675; } .btn--none_base_borders.active, .active.editor__inspector__item__button--normal { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--none_base_borders.active:focus, .active.editor__inspector__item__button--normal:focus { color: #ffffff; } .btn--none_base_borders.active svg *, .active.editor__inspector__item__button--normal svg * { fill: #ffffff; } .btn--base_white_base { background: #586675; color: #ffffff; border-color: #586675; } .btn--base_white_base:focus { color: #ffffff; } .btn--base_white_base svg * { fill: #ffffff; } .btn--base_white_base:hover { background: rgb(66.1073170732, 76.6243902439, 87.8926829268); border-color: rgb(66.1073170732, 76.6243902439, 87.8926829268); color: #ffffff; } .btn--base_white_base:hover svg * { fill: #ffffff; } .btn--none_base_base, .editor__tab__subnav__button__btn { background: none; color: #586675; border-color: #586675; } .btn--none_base_base:focus, .editor__tab__subnav__button__btn:focus { color: #586675; } .btn--none_base_base svg *, .editor__tab__subnav__button__btn svg * { fill: #586675; } .btn--none_base_base:hover, .editor__tab__subnav__button__btn:hover { background: none; border-color: rgb(66.1073170732, 76.6243902439, 87.8926829268); color: #586675; } .btn--none_base_base:hover svg *, .editor__tab__subnav__button__btn:hover svg * { fill: #586675; } .btn--none_base_base:hover, .editor__tab__subnav__button__btn:hover { background: #586675; border-color: #586675; color: #ffffff; } .btn--none_base_base:hover svg *, .editor__tab__subnav__button__btn:hover svg * { fill: #ffffff; } .btn--background_base_borders { background: #f4f5f6; color: #586675; border-color: #dfe3e8; } .btn--background_base_borders:focus { color: #586675; } .btn--background_base_borders svg * { fill: #586675; } .btn--background_base_borders:hover { background: #dfe3e8; border-color: #dfe3e8; color: #586675; } .btn--background_base_borders:hover svg * { fill: #586675; } .btn--background_base_borders.active { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--background_base_borders.active:focus { color: #ffffff; } .btn--background_base_borders.active svg * { fill: #ffffff; } .btn--none_level2_borders { background: none; color: #8d9eb0; border-color: #dfe3e8; } .btn--none_level2_borders:focus { color: #8d9eb0; } .btn--none_level2_borders svg * { fill: #8d9eb0; } .btn--none_level2_borders:hover { background: none; border-color: #c5cfd9; color: #586675; } .btn--none_level2_borders:hover svg * { fill: #586675; } .btn--white_level2_level3 { background: #ffffff; color: #8d9eb0; border-color: #c5cfd9; } .btn--white_level2_level3:focus { color: #8d9eb0; } .btn--white_level2_level3 svg * { fill: #8d9eb0; } .btn--white_level2_level3:hover { background: #ffffff; border-color: rgb(181.59375, 194.25, 206.90625); color: #586675; } .btn--white_level2_level3:hover svg * { fill: #586675; } .btn--level2_dark_level2, .editor--dark .editor__tab__toolbar .btn--active, .editor--dark .editor__tab__subnav__button__btn--active, .editor__inspector__item__button--active { background: #8d9eb0; color: #11181f; border-color: #8d9eb0; } .btn--level2_dark_level2:focus, .editor--dark .editor__tab__toolbar .btn--active:focus, .editor--dark .editor__tab__subnav__button__btn--active:focus, .editor__inspector__item__button--active:focus { color: #11181f; } .btn--level2_dark_level2 svg *, .editor--dark .editor__tab__toolbar .btn--active svg *, .editor--dark .editor__tab__subnav__button__btn--active svg *, .editor__inspector__item__button--active svg * { fill: #11181f; } .btn--level2_dark_level2:hover, .editor--dark .editor__tab__toolbar .btn--active:hover, .editor--dark .editor__tab__subnav__button__btn--active:hover, .editor__inspector__item__button--active:hover { background: rgb(110.8756476684, 132.3678756477, 155.1243523316); border-color: rgb(110.8756476684, 132.3678756477, 155.1243523316); color: #11181f; } .btn--level2_dark_level2:hover svg *, .editor--dark .editor__tab__toolbar .btn--active:hover svg *, .editor--dark .editor__tab__subnav__button__btn--active:hover svg *, .editor__inspector__item__button--active:hover svg * { fill: #11181f; } .btn--level2_white_level2 { background: #8d9eb0; color: #ffffff; border-color: #8d9eb0; } .btn--level2_white_level2:focus { color: #ffffff; } .btn--level2_white_level2 svg * { fill: #ffffff; } .btn--none_white_white { background: none; color: #ffffff; border-color: #ffffff; } .btn--none_white_white:focus { color: #ffffff; } .btn--none_white_white svg * { fill: #ffffff; } .btn--none_white_white:hover { background: none; border-color: rgb(229.5, 229.5, 229.5); color: #ffffff; } .btn--none_white_white:hover svg * { fill: #ffffff; } .btn--dark_level2_borders-on-black, .editor--dark .editor__tab__toolbar .btn, .editor--dark .editor__tab__toolbar .editor__form__file__label, .editor--dark .editor__tab__subnav__button__btn { background: #11181f; color: #8d9eb0; border-color: #2f3943; } .btn--dark_level2_borders-on-black:focus, .editor--dark .editor__tab__toolbar .btn:focus, .editor--dark .editor__tab__toolbar .editor__form__file__label:focus, .editor--dark .editor__tab__subnav__button__btn:focus { color: #8d9eb0; } .btn--dark_level2_borders-on-black svg *, .editor--dark .editor__tab__toolbar .btn svg *, .editor--dark .editor__tab__toolbar .editor__form__file__label svg *, .editor--dark .editor__tab__subnav__button__btn svg * { fill: #8d9eb0; } .btn--dark_level2_borders-on-black:hover, .editor--dark .editor__tab__toolbar .btn:hover, .editor--dark .editor__tab__toolbar .editor__form__file__label:hover, .editor--dark .editor__tab__subnav__button__btn:hover { background: #2f3943; border-color: #2f3943; color: #ffffff; } .btn--dark_level2_borders-on-black:hover svg *, .editor--dark .editor__tab__toolbar .btn:hover svg *, .editor--dark .editor__tab__toolbar .editor__form__file__label:hover svg *, .editor--dark .editor__tab__subnav__button__btn:hover svg * { fill: #ffffff; } .btn--dark_level2_borders-on-black.active, .editor--dark .editor__tab__toolbar .active.btn, .editor--dark .editor__tab__toolbar .active.editor__form__file__label, .editor--dark .active.editor__tab__subnav__button__btn { background: #8d9eb0; color: #11181f; border-color: #8d9eb0; } .btn--dark_level2_borders-on-black.active:focus, .editor--dark .editor__tab__toolbar .active.btn:focus, .editor--dark .editor__tab__toolbar .active.editor__form__file__label:focus, .editor--dark .active.editor__tab__subnav__button__btn:focus { color: #11181f; } .btn--dark_level2_borders-on-black.active svg *, .editor--dark .editor__tab__toolbar .active.btn svg *, .editor--dark .editor__tab__toolbar .active.editor__form__file__label svg *, .editor--dark .active.editor__tab__subnav__button__btn svg * { fill: #11181f; } .btn--error_white_error { background: #ff5f48; color: #ffffff; border-color: #ff5f48; } .btn--error_white_error:focus { color: #ffffff; } .btn--error_white_error svg * { fill: #ffffff; } .btn--error_white_error:hover { background: rgb(255, 50.4098360656, 21); border-color: rgb(255, 50.4098360656, 21); color: #ffffff; } .btn--error_white_error:hover svg * { fill: #ffffff; } .btn--projectignite_none_projectignite { background: #f28558; color: #ffffff; border-color: #f28558; } .btn--projectignite_none_projectignite:focus { color: #ffffff; } .btn--projectignite_none_projectignite svg * { fill: #ffffff; } .btn--projectignite_none_projectignite:hover { background: rgb(238.3166666667, 98.4333333333, 40.6833333333); border-color: rgb(238.3166666667, 98.4333333333, 40.6833333333); color: #ffffff; } .btn--projectignite_none_projectignite:hover svg * { fill: #ffffff; } .btn--level3_white_level3 { background: #c5cfd9; color: #ffffff; border-color: #c5cfd9; } .btn--level3_white_level3:focus { color: #ffffff; } .btn--level3_white_level3 svg * { fill: #ffffff; } .btn--level3_white_level3:hover { background: rgb(166.1875, 181.5, 196.8125); border-color: rgb(166.1875, 181.5, 196.8125); color: #ffffff; } .btn--level3_white_level3:hover svg * { fill: #ffffff; } .btn--none_base_none { background: none; color: #586675; border: none; } .btn--none_base_none:focus { color: #586675; } .btn--none_base_none svg * { fill: #586675; } .btn--none_base_none:hover { background: none; border-color: none; color: #586675; } .btn--none_base_none:hover svg * { fill: #586675; } .btn--none_empty_none { background: none; color: #ffffff; border: none; } .btn--none_empty_none:focus { color: #ffffff; } .btn--none_empty_none svg * { fill: #ffffff; } .btn--none_base_none_hover:hover { background: none; border-color: none; color: #0696d7; } .btn--none_base_none_hover:hover svg * { fill: #0696d7; } .btn--starred_empty_empty { background: #FFA200; color: #ffffff; border-color: #ffffff; } .btn--starred_empty_empty:focus { color: #ffffff; } .btn--starred_empty_empty svg * { fill: #ffffff; } .btn--hub_lab { background: #6E9E56; color: #ffffff; border-color: #6E9E56; } .btn--hub_lab:focus { color: #ffffff; } .btn--hub_lab svg * { fill: #ffffff; } .btn--hub_lab:hover { background: rgb(87.0081967213, 124.9754098361, 68.0245901639); border-color: rgb(87.0081967213, 124.9754098361, 68.0245901639); color: #ffffff; } .btn--hub_lab:hover svg * { fill: #ffffff; } .btn--hub_lab--empty { background: none; color: #6E9E56; border-color: #6E9E56; } .btn--hub_lab--empty:focus { color: #6E9E56; } .btn--hub_lab--empty svg * { fill: #6E9E56; } .btn--hub_lab--empty:hover { background: none; border-color: rgb(87.0081967213, 124.9754098361, 68.0245901639); color: #6E9E56; } .btn--hub_lab--empty:hover svg * { fill: #6E9E56; } .btn--hub_pcb { background: #0696d7; color: #ffffff; border-color: #0696d7; } .btn--hub_pcb:focus { color: #ffffff; } .btn--hub_pcb svg * { fill: #ffffff; } .btn--hub_pcb:hover { background: rgb(4.6153846154, 115.3846153846, 165.3846153846); border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #ffffff; } .btn--hub_pcb:hover svg * { fill: #ffffff; } .btn--hub_pcb--empty { background: none; color: #0696d7; border-color: #0696d7; } .btn--hub_pcb--empty:focus { color: #0696d7; } .btn--hub_pcb--empty svg * { fill: #0696d7; } .btn--hub_pcb--empty:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--hub_pcb--empty:hover svg * { fill: #0696d7; } .btn--hub_circuitscribe { background: #00adef; color: #ffffff; border-color: #00adef; } .btn--hub_circuitscribe:focus { color: #ffffff; } .btn--hub_circuitscribe svg * { fill: #ffffff; } .btn--hub_circuitscribe:hover { background: rgb(0, 136.0836820084, 188); border-color: rgb(0, 136.0836820084, 188); color: #ffffff; } .btn--hub_circuitscribe:hover svg * { fill: #ffffff; } .btn--hub_circuitscribe--empty { background: none; color: #00adef; border-color: #00adef; } .btn--hub_circuitscribe--empty:focus { color: #00adef; } .btn--hub_circuitscribe--empty svg * { fill: #00adef; } .btn--hub_circuitscribe--empty:hover { background: none; border-color: rgb(0, 136.0836820084, 188); color: #00adef; } .btn--hub_circuitscribe--empty:hover svg * { fill: #00adef; } .btn--hub_mesh { background: #7FBF34; color: #ffffff; border-color: #7FBF34; } .btn--hub_mesh:focus { color: #ffffff; } .btn--hub_mesh svg * { fill: #ffffff; } .btn--hub_mesh:hover { background: rgb(100.3456790123, 150.9135802469, 41.0864197531); border-color: rgb(100.3456790123, 150.9135802469, 41.0864197531); color: #ffffff; } .btn--hub_mesh:hover svg * { fill: #ffffff; } .btn--hub_mesh--empty { background: none; color: #7FBF34; border-color: #7FBF34; } .btn--hub_mesh--empty:focus { color: #7FBF34; } .btn--hub_mesh--empty svg * { fill: #7FBF34; } .btn--hub_mesh--empty:hover { background: none; border-color: rgb(100.3456790123, 150.9135802469, 41.0864197531); color: #7FBF34; } .btn--hub_mesh--empty:hover svg * { fill: #7FBF34; } .btn--social_facebook { background: #3b5997; color: #ffffff; border-color: #3b5997; } .btn--social_facebook:focus { color: #ffffff; } .btn--social_facebook svg * { fill: #ffffff; } .btn--social_facebook:hover { background: rgb(44.6714285714, 67.3857142857, 114.3285714286); border-color: rgb(44.6714285714, 67.3857142857, 114.3285714286); color: #ffffff; } .btn--social_facebook:hover svg * { fill: #ffffff; } .btn--social_twitter { background: #54abee; color: #ffffff; border-color: #54abee; } .btn--social_twitter:focus { color: #ffffff; } .btn--social_twitter svg * { fill: #ffffff; } .btn--social_twitter:hover { background: rgb(37.6117021277, 148.2127659574, 233.3882978723); border-color: rgb(37.6117021277, 148.2127659574, 233.3882978723); color: #ffffff; } .btn--social_twitter:hover svg * { fill: #ffffff; } .btn--social_reddit { background: #cee3f8; color: #586675; border-color: #cee3f8; } .btn--social_reddit:focus { color: #586675; } .btn--social_reddit svg * { fill: #586675; } .btn--social_reddit:hover { background: rgb(161.375, 201.5, 241.625); border-color: rgb(161.375, 201.5, 241.625); color: #586675; } .btn--social_reddit:hover svg * { fill: #586675; } .btn--hover--none_accent_accent:hover { background: none; border-color: rgb(4.6153846154, 115.3846153846, 165.3846153846); color: #0696d7; } .btn--hover--none_accent_accent:hover svg * { fill: #0696d7; } .btn--hover--none_red_red:hover { background: none; border-color: rgb(255, 50.4098360656, 21); color: #ff5f48; } .btn--hover--none_red_red:hover svg * { fill: #ff5f48; } .btn--hover--empty_level2_cancel:hover { background: rgb(229.5, 229.5, 229.5); border-color: rgb(110.8756476684, 132.3678756477, 155.1243523316); color: #586675; } .btn--hover--empty_level2_cancel:hover svg * { fill: #586675; } .throbber { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -25px; width: 50px; height: 10px; text-align: center; } .throbber > div { width: 10px; height: 10px; background-color: #0696d7; border-radius: 100%; display: inline-block; -webkit-animation: throbber__bouncedelay 1.4s infinite ease-in-out; animation: throbber__bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .throbber--light > div { background-color: #ffffff; } .throbber .throbber__bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .throbber .throbber__bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes throbber__bouncedelay { 10% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(0); } 80% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @keyframes throbber__bouncedelay { 10% { transform: scale(1); -webkit-transform: scale(1); } 40% { transform: scale(0); -webkit-transform: scale(0); } 80% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); } } .editor { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; } .editor__holder, .editor__holder__yield { bottom: 0; height: 100%; left: 0; position: relative; right: 0; top: 0; overflow: hidden; } .editor__holder canvas, .editor__holder__yield canvas { width: 100% !important; height: 100% !important; } .editor__warning__banner { margin: 0px; padding: 20px; background-color: orange; width: 100%; } .editor__master__topnav { position: absolute; top: 0; left: 0; right: 0; height: 48px; } .editor__master__content { position: absolute; top: 49px; left: 0; right: 0; bottom: 0; } .editor__master__content__tabs { position: relative; width: auto; height: 100%; overflow: hidden; } .editor__topnav { position: absolute; right: 0; left: 0; top: 0; min-width: 300px; color: #34495e; background: #ffffff; height: 48px; line-height: 48px; -webkit-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 1px 4px 0px rgba(52, 73, 94, 0.15); } .editor__topnav--view { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border-bottom: 1px solid #dfe3e8; } .editor__topnav__left { float: left; } .editor__topnav__logo { line-height: 0; height: 48px; width: 48px; } .editor__topnav__logo__tag { -webkit-transition: background-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in; -o-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } .editor__topnav__logo__tag:hover { background-color: #0696d7; } .editor__topnav__logo__tag__text { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #0696d7; color: #ffffff; border-radius: 5px; padding: 2px 10px; margin: 0 10px; font-size: 10px; cursor: pointer; } .editor__topnav__title { font-size: 16px; font-weight: 500; text-decoration: none; color: #34495e; margin-left: 14px; } .editor__topnav__title--inactive { pointer-events: none; } .editor__topnav__title__span:hover { border-bottom: 1px dashed #34495e; } .editor__topnav__right { position: absolute; right: 0; top: 0; } .editor__topnav__connection-menu { margin: 0; padding: 0 15px 0 10px; line-height: 48px; font-size: 16px; font-weight: 500; background: #ffffff; margin-right: 15px; } .editor__topnav__connection-menu--normal { color: #c5cfd9; } .editor__topnav__connection-menu--warning { color: #f48220; } .editor__topnav__connection-menu--error { color: #ff5f48; } .editor__topnav__connection-menu--versions:hover { cursor: pointer; } .editor__topnav__connection-menu__icon { padding-top: 17px; display: inline-block; } .editor__topnav__connection-menu__icon svg * { fill: #c5cfd9; } .editor__topnav__connection-menu:hover .editor__topnav__connection-menu__icon svg * { fill: #586675; } .editor__topnav__version { font-size: 16px; font-weight: 500; margin-top: 9px; margin-right: 20px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; padding-left: 10px; padding-right: 10px; } .editor__topnav__version__btn { color: white; border-radius: 5px; padding: 3px 10px 2px 10px; } .editor__topnav__version__btn--draft { background: #FF5E41; } .editor__topnav__version__btn--draft:hover { background: #FE4D2D; cursor: pointer; } .editor__topnav__version__btn--version { background: #86BB40; } .editor__topnav__version__btn--version:hover { background: #7AAA3A; cursor: pointer; } .editor__topnav__version__message--draft { padding-right: 10px; } .editor__topnav__version__message--empty { display: none; } .editor__topnav__info { font-size: 16px; font-weight: 500; color: #8d9eb0; padding-left: 18px; } .editor__topnav__info--pcb { color: #8d9eb0; } .editor__topnav__tabbutton { position: relative; } .editor__topnav__tabbutton__notification { position: absolute; top: 6px; right: 6px; width: 12px; height: 10px; border-radius: 50%; line-height: 11px; font-size: 11px; background: #ff5f48; color: #ffffff; z-index: 1; text-align: center; padding: 5px 4px; } .editor__topnav__tabbutton__link { position: relative; height: 48px; width: 49px; text-align: center; } .editor__topnav__tabbutton__link svg { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__topnav__tabbutton__link svg * { fill: #34495e; } .editor__topnav__tabbutton__link:hover svg * { fill: #0696d7; } .editor__topnav__tabbutton__link--active { background-color: #0696d7; } .editor__topnav__tabbutton__link--active svg * { fill: #ffffff; } .editor__topnav__tabbutton__link--active:hover svg * { fill: #ffffff; } .editor__topnav__tabbutton__link--leftborder { border-left: 1px solid #dfe3e8; } .editor__topnav__tabbutton__link--rightborder { border-right: 1px solid #dfe3e8; } .editor__topnav__tabbutton__link > .editor__topnav__tabbutton__icondiv { min-width: 48px; min-height: 48px; background-size: contain; background-repeat: no-repeat; } .editor__topnav__avatar { position: relative; height: 48px; width: 49px; text-align: center; border-left: 1px solid #dfe3e8; } .editor__topnav__avatar img { margin: 8px 0 0 0; width: 32px; height: 32px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .editor__tab { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #f4f5f6; } .editor__tab__yield { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .editor__tab__yield--sub { top: 48px; } .editor__tab__toolbar { position: absolute; top: 8px; pointer-events: none; } .editor__tab__toolbar--left { left: 8px; } .editor__tab__toolbar--right { right: 8px; } .editor__tab__toolbar__modeswitcher { margin-bottom: 8px; pointer-events: all; } .editor__tab__toolbar__tool { margin-bottom: 8px; } .editor__tab__toolbar__tool .btn, .editor__tab__toolbar__tool .editor__form__file__label { pointer-events: all; } .editor__tab__toolbar__offsettool { margin-left: 20px; margin-bottom: 8px; } .editor__tab__toolbar__offsettool .btn, .editor__tab__toolbar__offsettool .editor__form__file__label { pointer-events: all; } .editor__tab__subnav { position: absolute; right: 0; left: 0; top: 0; min-width: 300px; height: 48px; line-height: 48px; background-color: #f4f5f6; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); } .editor__tab__subnav__title { padding-left: 14px; font-weight: 500; color: #8d9eb0; } .editor__tab__subnav__group { border-right: 1px solid #dfe3e8; } .editor__tab__subnav__message { padding-left: 14px; font-weight: 500; color: #8d9eb0; } .editor__tab__subnav__tool:first-child { margin-left: 6px; } .editor__tab__subnav__tool:last-child { margin-right: 6px; } .editor__tab__subnav__tool__svg { position: relative; text-align: center; width: 30px; height: 48px; margin: 0 4px; } .editor__tab__subnav__tool__svg svg { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tab__subnav__tool__svg svg * { fill: #34495e; } .editor__tab__subnav__tool__svg:hover svg * { fill: #0696d7; } .editor__tab__subnav__tool--disabled { pointer-events: none; } .editor__tab__subnav__tool--disabled svg * { fill: #c5cfd9; } .editor__tab__subnav__tool--active svg * { fill: #0696d7; } .editor__tab__subnav__button { margin-left: 6px; /* height: 100%; */ } .editor__tab__subnav__button .pushDown { margin-top: 8px; } .editor__tab__subnav__button:first-child { margin-left: 6px; } .editor__tab__subnav__button:last-child { margin-right: 6px; } .editor__inspector__item__selectable__imagegroup__container--read__only, .editor__inspector__item__select--read__only, .editor__inspector__item__checkbox_container--read__only, .editor__inspector__item__textinput--readonly { cursor: not-allowed; opacity: 0.6; } .editor__inspector { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; width: 230px; background: #f4f5f6; border: 1px solid #dfe3e8; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow-y: hidden; overflow-x: hidden; } .editor__inspector__group.light * { color: black !important; } .editor__inspector__title { background: #f4f5f6; color: #34495e; border-bottom: 1px solid #dfe3e8; padding: 0 8px; line-height: 28px; -webkit-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -moz-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -ms-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); -o-box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); box-shadow: 0px 0px 3px 0px rgba(52, 73, 94, 0.15); } .editor__inspector__title--inverted { background: #dfe3e8; color: #34495e; border-color: 1px solid #dfe3e8; } .editor__inspector__title__text { font-size: 14px; font-weight: 500; display: inline-block; } .editor__inspector__items { max-height: 600px; overflow-y: auto; padding: 0 8px; } .editor__inspector__item { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; position: relative; border-bottom: 1px solid #dfe3e8; padding: 8px 0; float: left; line-height: 28px; font-size: 12px; width: 100%; color: #34495e; /*&:last-child { margin-bottom: 7px; padding-bottom: 0; border-bottom: none; }*/ } .editor__inspector__item--center { -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; } .editor__inspector__item__label { padding-right: 6px; float: left; line-height: 28px; white-space: nowrap; -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: 0; -moz-flex-basis: 0; -ms-flex-basis: 0; -o-flex-basis: 0; flex-basis: 0; } .editor__inspector__item__error { background: #EC4A41; color: #ffffff; transition: background 1000ms linear; } .editor__inspector__item__textinput { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; outline: none; border: 1px solid #dfe3e8; font-size: 12px; color: #34495e; padding: 0 6px; height: 28px; background-color: #ffffff; min-width: 40px; -webkit-flex-grow: 2; -moz-flex-grow: 2; -ms-flex-grow: 2; -o-flex-grow: 2; flex-grow: 2; } .editor__inspector__item__textinput--readonly { background: #f4f5f6; color: #c5cfd9; } .editor__inspector__item__textinput--disabled { background-color: #f4f5f6 !important; } .editor__inspector__item__textinput--align-right { text-align: right; } .editor__inspector__item__textinput:focus { color: #34495e; border-color: #34495e; outline: none; } .editor__inspector__item__fixedunit { line-height: 28px; padding-left: 4px; -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; } .editor__inspector__item__fixedunit:empty { display: none; } .editor__inspector__item__checkbox_container { line-height: 0; margin: 3px 0 0 5px; width: 20px; position: absolute; right: 10px; } .editor__inspector__item__checkbox_container--read__only > * { pointer-events: none; } .editor__inspector__item__checkbox_container label { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: #ffffff; border-radius: 4px; border: 1px solid #dfe3e8; } .editor__inspector__item__checkbox_container label:after { content: ""; width: 9px; height: 5px; position: absolute; top: 5px; left: 5px; border: 2px solid #34495e; border-top: none; border-right: none; background: transparent; opacity: 0; transform: rotate(-45deg); } .editor__inspector__item__checkbox_container label:hover { border-color: #34495e; } .editor__inspector__item__checkbox_container label:hover::after { opacity: 0; } .editor__inspector__item__checkbox_container input[type=checkbox] { visibility: hidden; } .editor__inspector__item__checkbox_container input[type=checkbox]:checked + label:after { opacity: 1; } .editor__inspector__item__select { background: #ffffff; border: 1px solid #dfe3e8; margin-left: 6px; height: 28px; font-size: 11px; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1; } .editor__inspector__item__button { width: 100%; text-align: center; font-weight: normal; font-size: 12px; } .editor__inspector__item__image { margin: 0 auto; border: none; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .editor__inspector__item__image--active { background-color: #34495e; } .editor__inspector__item__tool { -webkit-flex-grow: 0; -moz-flex-grow: 0; -ms-flex-grow: 0; -o-flex-grow: 0; flex-grow: 0; cursor: pointer; } .editor__inspector__item__tool__svg svg * { fill: #34495e; } .editor__inspector__item__tool__svg:hover svg * { fill: #0696d7; } .editor__inspector__item__tool--disabled { pointer-events: none; opacity: 0.6; } .editor__inspector__item__tool--disabled svg * { fill: #c5cfd9; } .editor__inspector__item__tool--disabled .editor__inspector__item__tool__button { color: #c5cfd9; } .editor__inspector__item--multiple, .editor__inspector__item__selectable__imagegroup__container { width: 100%; display: inline-block; } .editor__inspector__item--multiple > *, .editor__inspector__item__selectable__imagegroup__container > * { border: none; width: auto; height: 28px; padding: 0 6px 0 0; } .editor__inspector__item__selectable__imagegroup__container--read__only > * { pointer-events: none; } .editor__inspector__item--multiple.flex__container { display: flex; } .editor__inspector__item--multiple.flex__container > * { border: none; width: 30% !important; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; -moz-flex-shrink: 1; -ms-flex-shrink: 1; -o-flex-shrink: 1; flex-shrink: 1; } .editor__inspector__item__loader { margin: 0px auto 10px; text-align: center; } .editor__inspector__item__loader > div { width: 10px; height: 10px; background-color: #000000; border-radius: 100%; display: inline-block; -webkit-animation: throbber__bouncedelay 1.4s infinite ease-in-out; animation: throbber__bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .editor__inspector__item__loader .throbber__bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .editor__inspector__item__loader .throbber__bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes throbber__bouncedelay { 10% { -webkit-transform: scale(1); } 40% { -webkit-transform: scale(0); } 80% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @keyframes throbber__bouncedelay { 10% { transform: scale(1); -webkit-transform: scale(1); } 40% { transform: scale(0); -webkit-transform: scale(0); } 80% { transform: scale(0); -webkit-transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); } } .editor__window { position: absolute; width: 160px; background: #ffffff; -webkit-box-shadow: 0px 0px 3px 0px #dfe3e8; -moz-box-shadow: 0px 0px 3px 0px #dfe3e8; -ms-box-shadow: 0px 0px 3px 0px #dfe3e8; -o-box-shadow: 0px 0px 3px 0px #dfe3e8; box-shadow: 0px 0px 3px 0px #dfe3e8; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; max-height: 500px; overflow-y: auto; overflow-x: hidden; } .editor__window__title { background: #ffffff; color: #34495e; line-height: 32px; font-size: 14px; font-weight: 500; padding: 0 10px; border-bottom: 1px solid #dfe3e8; } .editor__window__listitem { border-bottom: 1px solid #dfe3e8; font-size: 14px; font-weight: 500; line-height: 32px; height: 32px; } .editor__window__listitem__icon { padding: 5px; } .editor__window__listitem:last-child { border: none; } .editor__window__layer { border-bottom: 1px solid #dfe3e8; font-size: 14px; font-weight: 500; line-height: 32px; height: 32px; cursor: pointer; } .editor__window__layer__layercircle { margin: 9px 9px 0 9px; width: 10px; height: 10px; border: 2px solid #2f3943; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } .editor__window__layer__icon { margin-right: 4px; } .editor__window__layer:hover { background: #dfe3e8; } .editor__window__layer.active { background: #dfe3e8; } .editor__window__layer:last-child { border: none; } .editor__tray { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #dfe3e8; } .editor__tray__draggable { position: absolute; } .editor__tray__draggable--top { top: -10px; left: 0; right: 0; height: 20px; } .editor__tray__draggable--top:hover { cursor: row-resize; } .editor__tray__inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tray__cannotfind { margin: 25px 20px; } .editor__tray__cannotfind__title { font-size: 14px; } .editor__tray__cannotfind__expand { font-size: 16px; font-weight: 500; } .editor__tray__cannotfind__more_info { margin-top: 2em; font-size: 15px; } .editor__tray__cannotfind a { text-decoration: underline; } .editor__tray__tabs { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .editor__tray__tabs__top { position: absolute; top: 0; height: 49px; left: 0; right: 0; border-bottom: 1px solid #dfe3e8; } .editor__tray__tabs__top__title { margin-right: 20px; } .editor__tray__tabs__top__title_a { line-height: 49px; height: 49px; padding: 15px 0 13px 0; font-weight: 500; } .editor__tray__tabs__top__title_a.active, .editor__tray__tabs__top__title_a:hover { color: #0696d7; border-bottom: 1px solid #0696d7; } .editor__tray__tabs__top__left { float: left; margin-left: 20px; } .editor__tray__tabs__top__right { float: right; } .editor__tray__tabs__top__switch { border-left: 1px solid #dfe3e8; float: right; padding: 0px 8px; margin-left: 8px; line-height: 50px; width: 32px; text-align: center; } .editor__tray__tabs__top__button { margin: 8px 0 0 8px; } .editor__tray__tabs__top__searchcontainer { overflow: hidden; height: 50px; } .editor__tray__tabs__top__search { position: relative; width: 300px; float: right; border-left: 1px solid #dfe3e8; height: 50px; } .editor__tray__tabs__top__search__btn__search { position: absolute; top: 0; left: 0; margin: 13px; } .editor__tray__tabs__top__search__input { position: relative; left: 46px; border: none; line-height: 46px; width: 220px; } .editor__tray__tabs__top__search__input:focus { outline: 0; border: none; } .editor__tray__tabs__top__search__btn__clear { position: absolute; right: 0; top: 0; border-right: 1px solid #dfe3e8; height: 50px; } .editor__tray__tabs__top__search__btn__clear a { position: absolute; top: 15px; width: 32px; right: 0; } .editor__tray__tabs__top__search__btn__clear:hover { display: block; } .editor__tray__tabs__top__search__input:focus ~ .editor__tray__tabs__top__search__btn__clear { display: block; } .editor__tray__tabs__top__btn__searchfilter { position: relative; float: right; border-right: 1px solid #dfe3e8; height: 24px; padding: 13px; } .editor__tray__tabs__sub { position: absolute; top: 50px; left: 0; right: 0; } .editor__tray__tabs__sub__searchfilter { height: 49px; line-height: 49px; padding-left: 20px; background-color: #efefef; border-bottom: 1px solid #dfe3e8; } .editor__tray__tabs__sub__searchfilter__name { position: relative; float: left; margin-right: 8px; width: 70px; } .editor__tray__tabs__sub__searchfilter__input { top: 9px; float: left; margin-right: 8px; line-height: 30px; height: 30px; width: -webkit-calc(95% - 210px); margin-top: 10px; } .editor__tray__tabs__sub__searchfilter__description { position: relative; display: inline-block; white-space: nowrap; margin-left: 10px; height: 30px; overflow: hidden; text-overflow: ellipsis; width: -webkit-calc(100% - 200px); margin-bottom: -10px; } .editor__tray__tabs__sub__searchfilter__btn__add { position: relative; float: right; margin: 0 20px 0 0; } .editor__tray__tabs__sub__searchfilter__btn__remove { position: relative; float: left; } .editor__tray__tabs__sub__searchfilter__filter__key { margin: 11px 20px 0 10px; position: relative; float: left; } .editor__tray__tabs__content { position: absolute; top: 50px; left: 0; right: 0; bottom: 0; overflow: auto; } .editor__tray__largecomponents { margin: 0; } .editor__tray__largecomponents--dark .editor__tray__largecomponents__item__inner__img img { background: #11181f; } .editor__tray__largecomponents__item { padding: 10px; } .editor__tray__largecomponents__item__inner { padding: 10px; border: 1px solid #dfe3e8; } .editor__tray__largecomponents__item__inner__img { position: relative; overflow: hidden; } .editor__tray__largecomponents__item__inner__img img { width: 100%; } .editor__tray__largecomponents__item__inner__img__loading { width: 100%; } .editor__tray__largecomponents__item__inner__img__preview { top: 0; left: 0; bottom: 0; margin: auto; position: absolute; } .editor__tray__largecomponents__item__inner__img__info { top: 0px; left: 0px; width: 100%; z-index: 1; height: 100%; padding: 10px; display: none; position: absolute; height: calc(100% - 5px); overflow: hidden; background: rgba(34, 33, 33, 0.575); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .editor__tray__largecomponents__item__inner__img__info__property { margin: 0px; padding: 0px; color: #fff; font-size: 12px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } .editor__tray__largecomponents__item__inner__img__info__property__name { font-weight: bold; width: 100px; } .editor__tray__largecomponents__item__inner__img__info__property__value { float: right; font-weight: medium; } .editor__tray__largecomponents__item__inner__block { margin-top: 6px; position: relative; } .editor__tray__largecomponents__item__inner__block__title { overflow: hidden; text-align: left; height: 20px; font-size: 15px; } .editor__tray__largecomponents__item__inner__block__info { top: 0px; right: 0px; width: 12px; height: 12px; position: absolute; } .editor__tray__largecomponents__item__inner__block__info svg { width: 100%; height: 100%; } .editor__tray__largecomponents__item__inner__block__info svg:hover path { fill: #86b5ee; } .editor__tray__largecomponents__item__inner:hover { border-color: #0696d7; } .editor__tray__listcomponents--dark .editor__tray__listcomponents__item__thumb img { background: #11181f; } .editor__tray__listcomponents__top { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; line-height: 48px; font-size: 15px; font-weight: 500; border-bottom: 1px solid #dfe3e8; padding: 0 0 0 20px; width: 100%; overflow: hidden; } .editor__tray__listcomponents__top__total { color: #c5cfd9; width: 95px; margin-right: 15px; float: left; } .editor__tray__listcomponents__top__name { float: left; text-align: center; } .editor__tray__listcomponents__top__rightitem { float: right; text-align: center; width: 120px; display: inline; } .editor__tray__listcomponents__top__leftitems { display: inline; float: left; width: calc(100% - 430px); overflow: hidden; height: 48px; margin-left: 95px; position: absolute; } .editor__tray__listcomponents__top__leftitem { float: left; text-align: center; width: 120px; display: inline; margin-left: 22px; } .editor__tray__listcomponents__top__used { float: right; min-width: 100px; margin-right: 20px; } .editor__tray__listcomponents__top__description { margin-left: 600px; } .editor__tray__listcomponents__top__nosort { display: inline; } .editor__tray__listcomponents__top__nosort__name { display: inline; float: center; } .editor__tray__listcomponents__top__nosort:hover, .editor__tray__listcomponents__top__nosort.active { color: black; cursor: default; } .editor__tray__listcomponents__top__sort { width: 120px; } .editor__tray__listcomponents__top__sort__name { float: right; } .editor__tray__listcomponents__top__sort__arrow { opacity: 0; float: right; padding: 0 5px; } .editor__tray__listcomponents__top__sort__arrow.flipped { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .editor__tray__listcomponents__top__sort:hover, .editor__tray__listcomponents__top__sort.active { color: #0696d7; } .editor__tray__listcomponents__top__sort:hover .editor__tray__listcomponents__top__sort__arrow, .editor__tray__listcomponents__top__sort.active .editor__tray__listcomponents__top__sort__arrow { opacity: 1; } .editor__tray__listcomponents__top__sort:hover svg *, .editor__tray__listcomponents__top__sort.active svg * { fill: #0696d7; } .editor__tray__listcomponents__top__sortdropdown { float: right; width: 210px; text-align: right; } .editor__tray__listcomponents__top__sortdropdown__prefix { float: right; } .editor__tray__listcomponents__top__sortdropdown__select { position: relative; float: right; margin-right: 10px; } .editor__tray__listcomponents__top__sortdropdown__select__triangle { pointer-events: none; position: absolute; right: 10px; top: -2px; } .editor__tray__listcomponents__top__sortdropdown__select select { width: 105px; margin-left: 10px; line-height: 32px; height: 32px; -webkit-appearance: none; border: 1px solid #dfe3e8; background: #ffffff; padding: 0px 20px 0 6px; } .editor__tray__listcomponents__content { width: 100%; } .editor__tray__listcomponents__item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid #dfe3e8; padding: 20px 20px; } .editor__tray__listcomponents__item__thumb { margin-top: 10px; line-height: 0; width: 84px; margin-right: 15px; float: left; position: relative; } .editor__tray__listcomponents__item__thumb img { height: 50px; } .editor__tray__listcomponents__item__name { font-weight: 500; float: left; position: absolute; margin-left: 80px; margin-top: 20px; white-space: nowrap; width: 230px; height: 30px; overflow: hidden; text-overflow: ellipsis; } .editor__tray__listcomponents__item__name a:hover { text-decoration: underline; } .editor__tray__listcomponents__item__rightitem { float: right; text-align: center; width: 120px; display: inline; } .editor__tray__listcomponents__item__leftitems { display: inline; float: left; width: calc(100% - 426px); overflow: hidden; height: 24px; margin-left: 170px; margin-top: 20px; position: absolute; } .editor__tray__listcomponents__item__leftitem { float: left; text-align: right; width: 120px; display: inline; margin-left: 22.5px; } .editor__tray__listcomponents__item__leftitem__description { margin-left: 180px; width: 1200px; } .editor__tray__listcomponents__item__used { font-weight: 500; } .editor__tray__listcomponents__item__description { margin-left: 600px; } .editor__tray__listcomponents__item__extra { float: right; width: 180px; text-align: right; margin-top: 15px; } .editor__split__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .editor__split__left { position: absolute; left: 0; right: 50%; top: 0; bottom: 0; border-right: 1px solid black; } .editor__split__middle { position: absolute; right: 48%; left: 48%; top: 0; bottom: 0; } .editor__split__right { position: absolute; right: 0; left: 50%; top: 0; bottom: 0; } .editor__switcher { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .editor__switcher__multileveltitle { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 14px; color: #c5cfd9; font-weight: 500; margin-top: 40px; cursor: pointer; } .editor__switcher__multileveltitle:first-child { margin-top: 10px; } .editor__switcher__item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; cursor: pointer; width: 165px; margin: 0 auto 10px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .editor__switcher__item:first-child { margin-top: 10px; } .editor__switcher__item__inner { border: 1px solid #2f3943; } .editor__switcher__item__inner__border { border: 2px solid #11181f; } .editor__switcher__item__inner:hover { border-color: #c5cfd9; } .editor__switcher__item--active .editor__switcher__item__inner, .editor__switcher__item--active .editor__switcher__item__inner__border, .editor__switcher__multileveltitle.editor__switcher__item--active + .editor__switcher__item .editor__switcher__item__inner, .editor__switcher__multileveltitle.editor__switcher__item--active + .editor__switcher__item .editor__switcher__item__inner__border { border-color: #c5cfd9; } .editor__switcher__item__title { text-align: center; word-wrap: break-word; font-size: 12px; font-weight: 500; color: #c5cfd9; padding: 10px 0 8px 0; } .editor__switcher__item__img { height: 80px; text-align: center; } .editor__switcher__item__img img { max-height: 80px; } .editor__switcher__content { position: absolute; top: 0; bottom: 0; left: 0; right: 185px; } .editor__switcher__sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: 185px; border-left: 1px solid #2f3943; overflow: auto; } .editor__switcher__sidebar__items { position: absolute; top: 0; right: 0; left: 0; bottom: 48px; overflow: auto; } .editor__switcher__sidebar__buttons { background: #11181f; position: absolute; bottom: 0; line-height: 48px; height: 48px; left: 0; right: 0; border-top: 1px solid #2f3943; text-align: center; } .editor__switcher__sidebar__buttons__button { display: inline-block; margin: 4px 5px; width: 30px; height: 30px; } .editor__switcher__sidebar__buttons__button svg * { fill: #c5cfd9; } .editor__switcher__sidebar__buttons__button:hover svg * { fill: #8d9eb0; } .editor__form { max-width: 960px; margin: 30px auto; padding: 0 30px; } .editor__form__element { margin-bottom: 30px; } .editor__form__element.settings-container > .editor__form__element__container { background: #ffffff; border: 1px solid #DFE3E8; color: #8D9EB0; } .editor__form__element.settings-container .file_input_container { display: inline-block; margin: 15px; } .editor__form__element.settings-container .text-input-container { display: inline-block; width: 60%; } .editor__form__element.settings-container input { background: #fff; border: 1px solid #c5cfd9; font-weight: 500; color: #34495e; padding: 10px; width: 95%; } .editor__form__element.settings-container .or_container { display: inline-block; margin-right: 15px; padding: 0; } .editor__form__element.settings-container .btn-container { display: inline-block; margin: 15px; } .editor__form__element.settings-container .btn-submit { background: #0696d7; color: white; } .editor__form__element__label { font-size: 18px; font-weight: 500; padding-bottom: 7px; margin-bottom: 10px; width: 100%; border-bottom: 1px solid #dfe3e8; } .editor__form__element__subhead { font-size: 14px; font-weight: 500; color: #8d9eb0; margin: 10px 0; } .editor__form__element__moreinfo { margin-top: 10px; font-size: 12px; font-weight: 500; } .editor__form__element__moreinfo a, .editor__form__element__moreinfo a:visited { color: #34495e; } .editor__form__textinput { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 16px; font-weight: 500; padding: 11px 14px 12px; border: 1px solid #dfe3e8; } .editor__form__textinput__url { background: #fff; border: 1px solid #c5cfd9; font-weight: 500; color: #34495e; padding: 10px; width: 97%; } .editor__form__textinput--disabled { opacity: 0.8; background-color: #F4F5F6; font-weight: normal; } .editor__form__textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 16px; font-weight: 500; padding: 11px 14px 12px; border: 1px solid #dfe3e8; } .editor__form__textarea--disabled { opacity: 0.8; background-color: #F4F5F6; font-weight: normal; } .editor__form__file__input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .editor__modal, .editor__modal__list { background: #f4f5f6; border: 1px solid #dfe3e8; left: 50%; margin: 0 0 0 -200px; position: fixed; top: 30%; width: 400px; border-radius: 3px; /* code for preventing text inside modal from going outside*/ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .editor__modal__top { position: relative; line-height: 40px; border-bottom: 1px solid #dfe3e8; border-radius: 3px 0 0 0; } .editor__modal__top__title { padding-left: 10px; font-weight: 500; } .editor__modal__top__close { position: absolute; right: 10px; top: 0; } .editor__modal__top__close__x { font-weight: 500; } .editor__modal__body { padding: 10px; } .editor__modal__body__row { padding: 10px; } .editor__modal__body__row__title { display: inline; font-weight: bold; margin-right: 10px; } .editor__modal__body__row__subtext { display: inline; font-size: 12px; } .editor__modal__body__row__subtext__secondrow { padding-top: 4px; } .editor__modal__body__row__buttonarea { margin: 10px 0 0 0; } .editor__modal__body__row__buttonarea .btn, .editor__modal__body__row__buttonarea .editor__form__file__label { margin: 0 10px 0 0; } .editor__modal__body__row__buttonarea__buttons { text-align: left; } .editor__modal__body__row__buttonarea__buttons .btn:first-child, .editor__modal__body__row__buttonarea__buttons .editor__form__file__label:first-child { float: left; } .editor__modal__body__row__buttonarea__issue { margin-top: -5px; font-size: 12px; padding-top: 3px; } .editor__modal__body__buttons { margin: 10px 0 10px 0; text-align: right; } .editor__modal__body__buttons .btn:first-child, .editor__modal__body__buttons .editor__form__file__label:first-child { float: right; } .editor__modal__body__buttons .btn, .editor__modal__body__buttons .editor__form__file__label { margin: 0 10px 0 0; } .editor__modal__body__buttons:after { content: ""; display: table; clear: both; } .editor__modal__body__checkbox__container { margin: 20px 0 20px 0; } .editor__modal__body__selectbox__container { margin: 20px 0 20px 0; } .editor__modal__body__selectbox__label { float: left; padding-right: 10px; } .editor__modal--error { color: #ff5f48; border-color: #ff5f48; } .editor__modal--error .editor__modal__top { background: #ff5f48; color: #ffffff; } .editor__modal--error .editor__modal__top__close__x { cursor: pointer; } .editor__modal--error .editor__modal__top__close__x svg * { fill: #ffffff; } .editor__modal--dark { color: #ffffff; background: #3B4454; border-color: #BEC8D2; } .editor__modal--dark .editor__modal__top { background: #748291; color: #ffffff; } .editor__modal--dark .editor__modal__top__close__x { cursor: pointer; } .editor__modal--dark .editor__modal__top__close__x svg * { fill: #ffffff; } .editor__modal--dark .editor__modal__body a { color: #86b5ee; } .editor__modal--dark .editor__modal__body a:hover { color: #0696d7; } .editor__modal--dark .editor__modal__body__selectbox { background-color: #3B4454; } .editor__modal__bg-overlay { background-color: rgba(0, 0, 0, 0.3); bottom: 0; height: 100%; left: 0; margin: auto; position: fixed; right: 0; top: 0; width: 100%; } .editor__modal__list { width: 50%; height: 60%; top: 15%; left: 36%; } .editor__modal__list__body { height: 88%; overflow: auto; } .editor__modal__list__select__item { padding-bottom: 10px; border-bottom: 2px solid #adc4e0; } .editor__processing { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .editor__processing__message { color: #ffffff; position: absolute; top: 60%; left: 50%; margin: -50px 0 0 -200px; width: 400px; height: 100px; text-align: center; } .editor__tooltip { font-size: 10px; position: absolute; pointer-events: none; max-width: 300px; padding: 5px; } .editor__tooltip__inner { background-color: #11181f; color: #ffffff; max-width: 200px; padding: 5px 8px 5px 8px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .editor__tooltip__arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #11181f; } .editor__tooltip__arrow__n { border-bottom-color: #11181f; } .editor__tooltip__arrow__s { border-top-color: #11181f; } .editor__tooltip__arrow__e { border-left-color: #11181f; } .editor__tooltip__arrow__w { border-right-color: #11181f; } .editor__tooltip--n .editor__tooltip__arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .editor__tooltip--s .editor__tooltip__arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .editor__tooltip--e .editor__tooltip__arrow { right: 0; top: 12px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .editor__tooltip--w .editor__tooltip__arrow { left: 0; top: 12px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } .editor__splashscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f4f5f6; } .editor__splashscreen__inner { width: 320px; position: absolute; top: 30%; left: 50%; margin-left: -160px; text-align: center; } .editor__splashscreen__inner__icon img { width: 48px; height: 48px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .editor__splashscreen__inner__title { font-size: 32px; color: #0696d7; margin-top: 12px; } .editor__splashscreen__inner__description { color: #8d9eb0; font-size: 14px; margin-top: 14px; } .editor__splashscreen__inner__spinner { display: flex; height: auto; justify-content: center; margin-top: 70px; position: relative; text-align: center; } .editor__splashscreen__inner__spinner .throbber { display: block; height: 18px; left: auto; margin-bottom: 100px; margin-left: 0; margin-right: 0; text-align: center; top: auto; width: 50px; } .editor__sidebar { height: 100%; width: 250px; overflow: auto; background: #f4f5f6; } .editor__sidebar__versions__header { background: #f4f5f6; line-height: 48px; padding-left: 15px; border-bottom: 1px solid #dfe3e8; } .editor__sidebar__versions__header__title { float: left; font-size: 14px; font-weight: 500; } .editor__sidebar__versions__header__close { float: right; margin: 10px 10px 0 0; cursor: pointer; } .editor__sidebar__versions__item { border-bottom: 1px solid #dfe3e8; padding: 15px; font-size: 14px; } .editor__sidebar__versions__item--draft { background: #dfe3e8; } .editor__sidebar__versions__item__title { font-weight: 500; } .editor__sidebar__versions__item__description { color: #8d9eb0; } .editor__sidebar__versions__item__time { color: #607b96; } .editor__sidebar__versions__item__textinput { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: 1px solid #dfe3e8; font-size: 14px; padding: 5px 9px; height: 32px; width: 100%; margin-bottom: 6px; resize: none; } .editor__sidebar__versions__item__textinput--description { height: 52px; } .asset_update_orange_button, .editor__library__global__asset__update { background: #FFA847; color: white; } .editor__library { float: left; width: 60%; height: 100%; overflow: auto; position: absolute; } @media only screen and (max-width: 768px) { .editor__library { width: 100%; } } .editor__library__top { width: 100%; height: 25px; border-top: 2px solid #dfe3e8; border-bottom: 2px solid #dfe3e8; background-color: #ebedef; float: left; } .editor__library__top__type, .editor__library__top__name, .editor__library__top__summary, .editor__library__top__version, .editor__library__top__date, .editor__library__top__alert__info { float: left; height: inherit; border-right: 2px solid #e0e3e8; display: block; align-items: center; padding-left: 10px; } .editor__library__top__type__text, .editor__library__top__name__text, .editor__library__top__summary__text, .editor__library__top__version__text, .editor__library__top__date__text, .editor__library__top__alert__info__text { float: left; color: #34495E; font-weight: 400; } .editor__library__top__name__sort__arrow, .editor__library__top__date__sort__arrow { float: right; margin-left: auto; margin-right: 5px; opacity: 0; } .editor__library__top__name__sort__arrow.active, .editor__library__top__name__sort__arrow.hover, .editor__library__top__date__sort__arrow.active, .editor__library__top__date__sort__arrow.hover { opacity: 0.6; } .editor__library__top__name__sort__arrow.flipped, .editor__library__top__date__sort__arrow.flipped { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .editor__library__top__type { width: 12%; } .editor__library__top__name { width: 15%; } @media only screen and (max-width: 575px) { .editor__library__top__name { width: 50%; } } .editor__library__top__summary { width: 18%; } .editor__library__top__version { width: 17%; } .editor__library__top__date { width: 19%; } .editor__library__top__alert__info { width: 12%; border-right: none; } .editor__library__group { width: 100%; height: 35px; border-top: 1px solid #e5e5e5; clear: left; background-color: white; /*&:hover { background-color: #f0f9ff; }*/ } .editor__library__group__asset__update { padding-top: 3px; float: left; display: none; } .editor__library__group__asset__update--show { display: block; } .editor__library__group__selected { background-color: #0696D7 !important; } .editor__library__group__selected > .editor__library__group__type__container svg path, .editor__library__group__selected > .editor__library__group__type__container svg polygon, .editor__library__group__selected > .editor__library__group__name svg path, .editor__library__group__selected > .editor__library__group__name svg polygon, .editor__library__group__selected > .editor__library__group__summary svg path, .editor__library__group__selected > .editor__library__group__summary svg polygon, .editor__library__group__selected > .editor__library__group__date svg path, .editor__library__group__selected > .editor__library__group__date svg polygon, .editor__library__group__selected > .editor__library__group__version svg path, .editor__library__group__selected > .editor__library__group__version svg polygon, .editor__library__group__selected > .editor__library__group__alert__info__container svg path, .editor__library__group__selected > .editor__library__group__alert__info__container svg polygon { fill: white !important; } .editor__library__group__selected > .editor__library__group__type__container svg circle, .editor__library__group__selected > .editor__library__group__name svg circle, .editor__library__group__selected > .editor__library__group__summary svg circle, .editor__library__group__selected > .editor__library__group__date svg circle, .editor__library__group__selected > .editor__library__group__version svg circle, .editor__library__group__selected > .editor__library__group__alert__info__container svg circle { stroke: white !important; } .editor__library__group__selected > .editor__library__group__type__container .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__type__container .btn__txt, .editor__library__group__selected > .editor__library__group__name .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__name .btn__txt, .editor__library__group__selected > .editor__library__group__summary .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__summary .btn__txt, .editor__library__group__selected > .editor__library__group__date .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__date .btn__txt, .editor__library__group__selected > .editor__library__group__version .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__version .btn__txt, .editor__library__group__selected > .editor__library__group__alert__info__container .editor__library__group__field__text, .editor__library__group__selected > .editor__library__group__alert__info__container .btn__txt { color: white; } .editor__library__group__child { clear: left; height: 35px; } .editor__library__group__child > .editor__library__group { background-color: #f6f6f6 !important; } .editor__library__group__child > .editor__library__group__selected { background-color: #0696D7 !important; } .editor__library__group__reference { background-color: #f6f6f6; } .editor__library__group__collapseicon { float: left; margin-top: 3px; padding-left: 10px; padding-right: 5px; display: inline-block; width: 10px; } .editor__library__group__collapseicon--closed svg { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__library__group__collapseicon__link svg path, .editor__library__group__collapseicon__link svg polygon { fill: #8d9eb0; } .editor__library__group__type__container, .editor__library__group__name, .editor__library__group__summary, .editor__library__group__version, .editor__library__group__date, .editor__library__group__alert__info__container { float: left; display: block; padding-left: 10px; height: 100%; } .editor__library__group__type__container { width: 12%; } .editor__library__group__name { width: 15%; } @media only screen and (max-width: 575px) { .editor__library__group__name { width: 50%; } } .editor__library__group__name .editor__library__group__field__text { font-weight: 400; } .editor__library__group__summary { width: 18%; } .editor__library__group__version { width: 17%; } .editor__library__group__date { width: 15%; } .editor__library__group__alert__info__container { width: 12%; text-align: center; float: right; } .editor__library__group__edit { padding-left: 10px; padding-top: 3px; float: left; margin-right: 6px; } .editor__library__group__delete { padding-top: 1px; margin-right: 6px; display: none; } .editor__library__group__delete--show { display: block; } .editor__library__group__summary .editor__library__group__field__text, .editor__library__group__date .editor__library__group__field__text, .editor__library__group__version .editor__library__group__field__text { font-weight: 200; } .editor__library__group__version .editor__library__group__field__text { width: 25%; float: left; } .editor__library__group__alert__info { padding-top: 5px; display: none; } .editor__library__group__alert__info--show { display: block; } .editor__library__group__alert__info__link svg path, .editor__library__group__alert__info__link svg polygon { fill: #FFA847; } .editor__library__group__alert__info__link svg circle { stroke: #FFA847; } .editor__library__group__type { height: 35px; padding-top: 6px; display: inline-block; vertical-align: middle; } .editor__library__group__type svg path, .editor__library__group__type svg polygon { fill: #8d9eb0; } .editor__library__group__field__text { padding-left: 5px; padding-top: 6px; color: #34495E; width: 95%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: middle; height: 35px; } .editor__library__section { float: left; clear: left; width: 100%; } .editor__library__section__header { border-top: 1px solid #d4d9dc; border-bottom: 1px solid #d4d9dc; background-color: #f0f9ff; height: 22px; } .editor__library__section__collapseicon { float: left; vertical-align: middle; text-align: center; padding-left: 5px; margin-top: -2px; } .editor__library__section__collapseicon--closed svg { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__library__section__text { padding-left: 5px; font-weight: 500; color: #34495E; float: left; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .editor__library__section__count { float: left; margin-left: 5px; color: #34495E; } .editor__library__section__count > * { float: left; } .editor__library__preview { background-color: #f4f5f6; border-left: 1px solid #d4d9dc; border-top: 1px solid #d4d9dc; display: block; height: 100%; position: absolute; right: 0; width: 40%; } @media only screen and (max-width: 768px) { .editor__library__preview { display: none; } } .editor__library__preview > * { padding-left: 20px; } .editor__library__preview__library__name { font-weight: 500; font-size: 22.5px; color: #34495E; padding-bottom: 20px; padding-top: 20px; } .editor__library__preview__library__details__header { font-weight: 200; font-size: 17.5px; padding-bottom: 20px; } .editor__library__preview__library__info { border-top: 2px solid #eceef0; padding-top: 20px; } .editor__library__preview__library__info tr { vertical-align: top; } .editor__library__preview__library__info__user__text, .editor__library__preview__library__info__summary__text, .editor__library__preview__library__info__date__text { color: #34495E; font-weight: 500; } .editor__library__preview__library__info__user__value, .editor__library__preview__library__info__summary__value, .editor__library__preview__library__info__date__value { color: #34495E; font-weight: 200; padding-left: 40px; } .editor__library__preview__library__asset__info { padding-bottom: 20px; } .editor__library__preview__library__asset__info__component__count, .editor__library__preview__library__asset__info__symbol__count, .editor__library__preview__library__asset__info__footprint__count, .editor__library__preview__library__asset__info__package__count { padding-left: 40px; color: #34495E; font-weight: 200; } .editor__library__preview__asset__details { padding-top: 20px; padding-bottom: 20px; float: left; clear: left; width: 100%; } .editor__library__preview__asset__details > table { table-layout: fixed; width: 98%; } .editor__library__preview__asset__details > table tr { vertical-align: top; } .editor__library__preview hr { width: 95%; border: 1px solid #eceef0; } .editor__library__preview__editor { padding-left: 0; height: 50%; width: 100%; } .editor__library__preview__editor > img { height: 100%; } .editor__library__preview__editor > iframe { width: 100%; height: 100%; border: 2px solid rgb(236, 238, 240); } .editor__library__preview__asset__header { padding-top: 20px; float: left; width: 100%; } .editor__library__preview__asset__close { float: left; padding-left: 10px; display: none; } @media only screen and (max-width: 768px) { .editor__library__preview__asset__close { display: block; } } .editor__library__preview__asset__edit { padding-left: 10px; float: left; } .editor__library__preview__asset__edit--disabled { pointer-events: none; opacity: 0.4; } .editor__library__preview__asset__update { padding-left: 10px; float: left; display: none; } .editor__library__preview__asset__update--show { display: block; } .editor__library__preview__asset__name { font-weight: 500; font-size: 22.5px; color: #34495E; float: left; } .editor__library__preview__asset__info__text { color: #34495E; font-weight: 500; width: 15%; } .editor__library__preview__asset__info__value { color: #34495E; font-weight: 200; padding-left: 40px; width: 75%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .editor__library__preview__asset__child__list, .editor__library__preview__asset__parent__list { clear: left; float: left; padding-bottom: 20px; padding-top: 20px; width: 100%; } .editor__library__preview__asset__child__list svg path, .editor__library__preview__asset__child__list svg polygon, .editor__library__preview__asset__parent__list svg path, .editor__library__preview__asset__parent__list svg polygon { fill: #8d9eb0; } .editor__library__preview__asset__child__list > table, .editor__library__preview__asset__parent__list > table { width: 98%; table-layout: fixed; } .editor__library__preview__asset__child__list > table tr, .editor__library__preview__asset__parent__list > table tr { border: 1px solid #ccd4dc; background-color: #eaedf1; height: 35px; } .editor__library__preview__asset__child__list__type, .editor__library__preview__asset__parent__list__type { width: 7%; padding-left: 10px; padding-top: 7px; float: left; } .editor__library__preview__asset__child__list__name, .editor__library__preview__asset__parent__list__name { width: 30%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 10px; padding-top: 6px; float: left; } .editor__library__preview__asset__child__list__summary, .editor__library__preview__asset__parent__list__summary { width: 40%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-left: 10px; padding-top: 6px; float: left; } .editor__library__preview__asset__child__list__edit__container, .editor__library__preview__asset__parent__list__edit__container { width: 20%; padding-left: 10px; } .editor__library__preview__asset__child__list__edit, .editor__library__preview__asset__parent__list__edit { float: right; margin-right: 15px; padding-top: 3px; padding-left: 10px; } .editor__library__preview__asset__child__list__header, .editor__library__preview__asset__parent__list__header { color: #34495E; font-weight: 500; padding-bottom: 10px; } .editor__library__preview__asset__child__list__alert__update, .editor__library__preview__asset__parent__list__alert__update { float: right; padding-top: 6px; padding-left: 10px; display: none; } .editor__library__preview__asset__child__list__alert__update--show, .editor__library__preview__asset__parent__list__alert__update--show { display: block; } .editor__library__preview__asset__child__list__alert__update svg path, .editor__library__preview__asset__child__list__alert__update svg polygon, .editor__library__preview__asset__parent__list__alert__update svg path, .editor__library__preview__asset__parent__list__alert__update svg polygon { fill: #8d9eb0; } .editor__library__preview__asset__child__list__alert__update svg circle, .editor__library__preview__asset__parent__list__alert__update svg circle { stroke: #8d9eb0; } .editor__library__preview__asset__child__list__update, .editor__library__preview__asset__parent__list__update { padding-top: 10px; display: none; } .editor__library__preview__asset__child__list__update--show, .editor__library__preview__asset__parent__list__update--show { display: block; } .editor__library__preview__details { height: 50%; width: 100%; overflow-x: hidden; } .editor__library__global__asset__update { border: none; } .editor__library__global__asset__update:hover { background: #f99b32; color: white; } .editor__library__global__asset__update svg path { fill: white !important; } @media only screen and (min-width: 576px) and (max-width: 991px) { .editor__library__top__type, .editor__library__top__type__container, .editor__library__group__type, .editor__library__group__type__container { width: 15%; } .editor__library__top__name, .editor__library__group__name { width: 30%; } .editor__library__top__version, .editor__library__group__version { width: 22%; } .editor__library__top__alert__info__container, .editor__library__group__alert__info__container { width: 20%; } .editor__library__top__summary, .editor__library__top__date, .editor__library__group__summary, .editor__library__group__date { display: none; } } @media only screen and (max-width: 575px) { .editor__library__top__type, .editor__library__top__type__container, .editor__library__group__type, .editor__library__group__type__container { width: 17%; } .editor__library__top__name, .editor__library__group__name { width: 50%; } .editor__library__top__alert__info__container, .editor__library__group__alert__info__container { width: 25%; } .editor__library__top__version, .editor__library__top__summary, .editor__library__top__date, .editor__library__group__version, .editor__library__group__summary, .editor__library__group__date { display: none; } .editor__library__preview { width: 90%; } } @media only screen and (max-width: 768px) { .editor__library__preview { width: 90%; } } .editor--dark { background-color: #11181f; } .editor--dark .editor__tab__subnav { background-color: #11181f; border-bottom: 1px solid #2f3943; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .editor--dark .editor__tab__subnav__group { border-color: #2f3943; } .editor--dark .editor__tab__subnav__tool__svg svg * { fill: #8d9eb0; } .editor--dark .editor__tab__subnav__tool__svg:hover svg * { fill: #c5cfd9; } .editor--dark .editor__tab__subnav__tool--disabled { pointer-events: none; } .editor--dark .editor__tab__subnav__tool--disabled svg * { fill: #c5cfd9; } .editor--dark .editor__tab__subnav__tool--active svg * { fill: #0696d7; } .editor--dark .editor__tab__toolbar__select { background-color: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector { background-color: #11181f; border: 1px solid #2f3943; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #8d9eb0; } .editor--dark .editor__inspector__title { background: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector__title--inverted { background: #8d9eb0; border-color: #2f3943; color: #11181f; } .editor--dark .editor__inspector__item { border-color: #2f3943; color: #8d9eb0; } .editor--dark .editor__inspector__item__button.btn--none_base_borders, .editor--dark .editor__inspector__item__button.editor__inspector__item__button--normal { color: #8d9eb0; border-color: #2f3943; } .editor--dark .editor__inspector__item__textinput, .editor--dark .editor__inspector__item__select { background-color: #11181f; border-color: #2f3943; color: #dfe3e8; } .editor--dark .editor__inspector__item__textinput--disabled, .editor--dark .editor__inspector__item__select--disabled { background-color: #2b353f !important; } .editor--dark .editor__inspector__item__loader > div { background-color: #8d9eb0; } .editor--dark .editor__inspector__item__tool__svg svg * { fill: #8d9eb0; } .editor--dark .editor__inspector__item__tool__svg:hover svg * { fill: #2f3943; } .editor--dark .editor__inspector__item__checkbox_container label { background: #11181f; border-color: #2f3943; } .editor--dark .editor__inspector__item__checkbox_container label:after { border-color: #dfe3e8; } .editor--dark .editor__inspector__item__checkbox_container label:hover { border-color: #dfe3e8; } .editor--dark .editor__window { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: #11181f; border: 1px solid #2f3943; } .editor--dark .editor__window__title { background: #8d9eb0; border-color: #2f3943; color: #11181f; } .editor--dark .editor__window__listitem, .editor--dark .editor__window__layer { border-color: #2f3943; } .editor--dark .editor__window__listitem:hover, .editor--dark .editor__window__layer:hover { background: #2f3943; } .editor--dark .editor__window__listitem.active, .editor--dark .editor__window__layer.active { background: #2f3943; } .editor--dark .editor__window__listitem__title, .editor--dark .editor__window__layer__title { color: #8d9eb0; } .editor--dark .editor__window__listitem svg *, .editor--dark .editor__window__layer svg * { fill: #8d9eb0; } .editor--white { background-color: #ffffff; } .editor__tab { z-index: 3000; } .editor__tab__yield { z-index: 3010; } .editor__tab__toolbar { z-index: 3020; } .editor__tab__subnav { z-index: 3030; } .editor__inspector { z-index: 4000; } .editor__inspector__modalbox { z-index: 4010; } .editor__tray { z-index: 4100; } .editor__subnav { z-index: 8000; } .editor__topnav { z-index: 9000; } .editor__sidebar { z-index: 9005; } .editor__processing { z-index: 9020; } .editor__dashboard__dialog { z-index: 10000; } .editor__tooltip { z-index: 11000; } .editor__splashscreen { z-index: 12000; } .editor__modal__bg-overlay { z-index: 13000; } .editor__modal, .editor__modal__list { z-index: 13010; } .hide { display: none; } .invisible { visibility: hidden; } .no-opacity { opacity: 0; } .hide-scrollbars { overflow: hidden; } .visuallyhidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px none; } .non-selectable, .cio-ui-icon, .btn__icon, .editor__inspector__item__tool__svg { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } .left, .float { float: left; } .right { float: right; } .mouse--action { cursor: pointer; } .mouse--draggable { cursor: move; } .mouse--disabled { pointer-events: none; cursor: not-allowed; } .mouse--sortable { cursor: move; } .mouse--not-allowed, .mouse--not-allowed:hover { cursor: not-allowed !important; } .mouse--move { cursor: move; } .center { text-align: center; } .bold { font-weight: 500; } small { font-size: 85%; } strong { font-weight: 500; } em { font-style: italic; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .adsk-gdpr-footer-wrapper { display: none !important; } .editor__sidebar__package__generator__fork__btn .btn, .editor__sidebar__package__generator__fork__btn .editor__form__file__label, .editor__sidebar__package__generator__finish__btn .btn, .editor__sidebar__package__generator__finish__btn .editor__form__file__label { font-size: 16px; font-weight: 500; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; border-radius: 5px; color: white; padding-left: 10px; padding-right: 10px; border: none; } .editor__sidebar__package__generator { font-family: Arial; width: 100%; height: 100%; overflow: hidden; } .editor__sidebar__package__generator * { font-family: inherit; } .editor__sidebar__package__generator__header { line-height: 48px; display: flex; } .editor__sidebar__package__generator__header.dark { border-bottom: 1px solid #2f3943; border-right: 1px solid #2f3943; background: #11181f; font-family: "ArtifaktElement"; } .editor__sidebar__package__generator__back { line-height: 45px; display: inline-block; cursor: pointer; } .editor__sidebar__package__generator__back svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__sidebar__package__generator__back.dark svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .editor__sidebar__package__generator__back.dark svg * { fill: white !important; } .editor__sidebar__package__generator__finish__btn { float: right; padding-right: 10px; } .editor__sidebar__package__generator__finish__btn .btn, .editor__sidebar__package__generator__finish__btn .editor__form__file__label { background: #86BB40; } .editor__sidebar__package__generator__fork__btn { float: right; padding-right: 10px; } .editor__sidebar__package__generator__fork__btn .btn, .editor__sidebar__package__generator__fork__btn .editor__form__file__label { background: #0696d7; } .editor__sidebar__package__generator__title { font-size: 14px; font-weight: 700; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: middle; padding-left: 10px; } .editor__sidebar__package__generator__title.dark { color: #dfe3e8; font-family: "ArtifaktElement"; flex-grow: 1; } .editor__sidebar__package__generator__title.light { padding-left: 0px; } .editor__sidebar__package__generator__search { float: right; flex-grow: 1; width: auto; } .editor__sidebar__package__generator__search__button, .editor__sidebar__package__generator__search__close__button { float: right; width: 35px; } .editor__sidebar__package__generator__search__button svg, .editor__sidebar__package__generator__search__close__button svg { vertical-align: middle; } .editor__sidebar__package__generator__search__button svg *, .editor__sidebar__package__generator__search__close__button svg * { fill: gray !important; } .editor__sidebar__package__generator__search__button.light, .editor__sidebar__package__generator__search__close__button.light { width: 60px; } .editor__sidebar__package__generator__search__box { width: auto; } .editor__sidebar__package__generator__search__box__input { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; width: calc(100% - 55px); outline: none; margin-left: 5px; padding: 3px; vertical-align: middle; border: solid 1px gray; } .editor__sidebar__package__generator__search.dark svg * { fill: white !important; } .editor__sidebar__package__generator__search.light input { width: calc(100% - 75px); border: solid 1px lightgray; margin-left: 2px; } .editor__sidebar__package__generator__input__container { height: 100%; } .editor__sidebar__package__generator__list { display: flex; overflow: auto; align-items: flex-start; align-content: flex-start; flex-flow: row wrap; height: calc(100% - 48px); } .editor__sidebar__package__generator__list__item { width: 150px; height: 165px; cursor: pointer; margin: 2px; padding-left: 8px; user-select: none; } .editor__sidebar__package__generator__list__item.light { border: 1px solid lightgray; } .editor__sidebar__package__generator__list__item.dark { background-color: #2F3943; border: 0.96px solid #2F3943; padding-left: 0px; } .editor__sidebar__package__generator__list__item__thumbnail { width: 100%; } .editor__sidebar__package__generator__list__item__thumbnail img { width: 100%; } .editor__sidebar__package__generator__list__item__title { float: left; width: 100%; font-size: 13px; font-weight: bold; line-height: 16px; text-align: center; padding-bottom: 2px; overflow-wrap: break-word; } .editor__sidebar__package__generator__list__item__title.dark { color: white; font-family: "ArtifaktElement"; } .editor__sidebar__package__generator__form { overflow: auto; padding-left: 5px; padding-right: 5px; height: calc(100% - (48px + 32px + 175px)); } .editor__sidebar__package__generator__button { cursor: pointer; text-align: center; color: white; line-height: 32px; font-size: 15px; font-weight: bold; background: #465666; position: fixed; bottom: 0; } .editor__sidebar__package__generator__button.disabled { pointer-events: none; opacity: 0.4; } .editor__sidebar__package__generator__button.dark { font-family: "ArtifaktElement"; } .editor__sidebar__package__generator__button.dark.blue { background: #0696d7 !important; } .editor__sidebar__package__generator__button.dark:hover { background: #0584db !important; } .editor__sidebar__package__generator__button.light.blue { background: #0696d7 !important; } .editor__sidebar__package__generator__button.light:hover { background: #0584db !important; } .editor__sidebar__package__generator__ref__image { width: 100%; } .editor__sidebar__package__generator__ref__image img { display: block; margin-left: auto; margin-right: auto; } /*# sourceMappingURL=package-editor-app.v2.css.map*/