.FlashMessage {
width: 100%;
background: #FFF7DF; }
.FlashMessage > .u-inner {
display: flex;
flex-direction: column;
justify-content: center;
height: 80px;
line-height: 24px; }
.FlashMessage.FlashMessage--inDialogWithFiltersNavListing {
position: fixed;
z-index: 2;
top: 157px;
border-bottom: 1px solid #dddddd; }
.FlashMessage.FlashMessage--inDialogWithFiltersNavListing > .u-inner {
justify-content: center; }
.FlashMessage--success {
background: #E8F0D6; }
.FlashMessage--error {
background: #FFDBDB; }
.FlashMessage--warning {
background: #FFFFD9; }
.FlashMessage--main {
background: #F0F7FC; }
.FlashMessage--text {
font-family: 'Montserrat';
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 16px;
text-align: right; }
.FlashMessage-info {
color: #333333;
font-size: 15px; }
.FlashMessage-detail {
color: #999999;
font-size: 13px; }
.FlashMessage-info--larger {
max-width: 720px; }
.FlashMessage-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%; }
.FlashMessage--button {
box-sizing: border-box;
height: 28px;
padding: 0 20px;
border: 1px solid white;
border-radius: 4px;
border-color: #0090d7;
outline: none;
background-color: #0090d7;
color: #FFF;
font-size: 12px;
font-weight: 500;
line-height: 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase; }
.FlashMessage--button:hover {
background-color: #007fbd; }
.Logo {
display: inline-block;
position: relative; }
.Logo--avatar {
display: inline-block;
width: 36px;
height: 36px;
transition: border-radius 0.2s linear;
border-radius: 4px;
background: #FFF;
line-height: 46px;
text-align: center;
vertical-align: top; }
.Logo--avatar i {
color: #3C93D8;
font-size: 22px; }
.Logo--avatar i.Logo-icon--dark {
color: #2E3C43; }
.Logo--footer {
margin-right: 20px;
background: #2E3C43; }
.Logo--footer i {
color: #FFF; }
.Logo--grey {
width: 36px;
min-width: 36px;
height: 36px;
border-radius: 3px;
background-color: #CCC;
line-height: 48px;
text-align: center; }
.Logo--grey .CDB-IconFont {
color: #FFF;
font-size: 24px; }
.Logo-sub {
position: absolute;
z-index: 1;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
animation: fade-and-bounce-up 0.6s 350ms ease-in-out backwards;
border-radius: 24px; }
.Logo-sub--google {
background: url("/assets/1.0.0-assets.279/images/layout/google-platform-logo.png") no-repeat center center #FFFFFF; }
.Logo.is-loading .Logo--avatar {
border-radius: 37px; }
.Logo.is-loading::after {
animation: spin 0.7s linear infinite;
opacity: 1; }
@keyframes spin {
100% {
transform: rotate(360deg); } }
@keyframes fade-and-bounce-up {
0% {
transform: translateY(6px);
opacity: 0; }
15% {
transform: translateY(-3px);
opacity: 0.8; }
45% {
transform: translateY(2px);
opacity: 1; }
70% {
transform: translateY(-1px); }
100% {
transform: translateY(0);
opacity: 1; } }
/*
* Styles for tipsy tooltip
*/
.tipsy {
position: absolute;
z-index: 100000;
padding: 8px;
font-family: 'Open Sans';
font-size: 10px;
line-height: 14px; }
.tipsy-inner {
max-width: 200px;
padding: 8px 16px 10px;
background-color: #000;
color: #FFF;
text-align: center; }
/* Rounded corners */
.tipsy-inner {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; }
/* Uncomment for shadow */
/* .tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; } */
.tipsy-arrow {
position: absolute;
width: 0;
height: 0;
border: 4px dashed #000;
line-height: 0; }
/* Rules to colour arrows */
.tipsy-arrow-n {
border-bottom-color: #000; }
.tipsy-arrow-s {
border-top-color: #000; }
.tipsy-arrow-e {
border-left-color: #000; }
.tipsy-arrow-w {
border-right-color: #000; }
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -8px;
border-top: none;
border-bottom-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
border-top: none;
border-bottom-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
border-top: none;
border-bottom-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-s .tipsy-arrow {
bottom: 4px;
left: 50%;
margin-left: -8px;
border-bottom: none;
border-top-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
border-bottom: none;
border-top-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-se .tipsy-arrow {
right: 10px;
bottom: 0;
border-bottom: none;
border-top-style: solid;
border-right-color: transparent;
border-left-color: transparent; }
.tipsy-e .tipsy-arrow {
top: 50%;
right: 0;
margin-top: -8px;
border-right: none;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow {
top: 50%;
left: 0;
margin-top: -8px;
border-left: none;
border-right-style: solid;
border-top-color: transparent;
border-bottom-color: transparent; }
/* dark style */
.tipsy.dark .tipsy-inner {
background-color: WHITE;
color: #333; }
.tipsy.dark .tipsy-arrow-n {
border-bottom-color: #FFF; }
.tipsy.dark .tipsy-arrow-s {
border-top-color: #FFF; }
.tipsy.dark .tipsy-arrow-e {
border-left-color: #FFF; }
.tipsy.dark .tipsy-arrow-w {
border-right-color: #FFF; }
@charset "UTF-8";
/* ADDS A BROWSER PREFIX TO THE PROPERTY */
/* FONT FACE */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; }
table {
border-collapse: collapse;
border-spacing: 0; }
button {
margin: 0;
padding: 0;
border: none;
background: transparent;
box-sizing: border-box;
outline: none; }
dd, dt {
display: inline-block; }
/* ==========================================================================
Normalize.scss settings
========================================================================== */
/**
* Includes legacy browser support IE6/7
*
* Set to false if you want to drop support for IE6 and IE7
*/
/* Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
* 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
*/
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 6/7/8/9 and Firefox 3.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Prevents 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/10/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 of focused elements when they are also in an
* active/hover state.
*/
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; }
/**
* Addresses 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
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 8/9/10.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0; }
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
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.
* 4. Improves appearance and consistency in all browsers.
*/
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.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
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; }
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
outline: none;
cursor: pointer; }
input[type=range]::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none; }
/**
* 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.
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
box-sizing: content-box;
/* 2 */ }
/**
* 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.
* 3. Corrects text not wrapping in Firefox 3.
* 4. Corrects alignment displayed oddly in IE 6/7.
*/
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; }
/* Forms
========================================================================== */
/**
* Remove default styles for forms
*/
input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none; }
input[type="checkbox"], input[type="radio"] {
cursor: pointer; }
body {
color: #2E3C43; }
a {
color: #0E64B0;
text-decoration: none; }
a:hover {
text-decoration: underline; }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Light.eot);
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Light.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Light.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Light.ttf) format("truetype"); }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Regular.eot);
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Regular.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Regular.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Regular.ttf) format("truetype"); }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Semibold.eot);
src: url(/assets/1.0.0-assets.279/fonts/OpenSans-Semibold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Semibold.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/OpenSans-Semibold.ttf) format("truetype"); }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(/assets/1.0.0-assets.279/fonts/Montserrat-Regular.eot);
src: local("Montserrat Regular"), local("Montserrat-Regular"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Regular.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Regular.woff2) format("woff2"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Regular.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Regular.ttf) format("truetype"), url(/assets/1.0.0-assets.279/images/Montserrat-Regular.svg#Montserrat) format("svg"); }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url(/assets/1.0.0-assets.279/fonts/Montserrat-Semibold.eot);
src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Semibold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Semibold.woff2) format("woff2"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Semibold.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Semibold.ttf) format("truetype"), url(/assets/1.0.0-assets.279/images/Montserrat-Semibold.svg#Montserrat) format("svg"); }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url(/assets/1.0.0-assets.279/fonts/Montserrat-Bold.eot);
src: local("Montserrat Bold"), local("Montserrat-Bold"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Bold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Bold.woff2) format("woff2"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Bold.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/Montserrat-Bold.ttf) format("truetype"), url(/assets/1.0.0-assets.279/images/Montserrat-Bold.svg#Montserrat) format("svg"); }
@font-face {
font-family: 'CartoIcon';
src: url(/assets/1.0.0-assets.279/fonts/cartoIcon.eot);
src: url(/assets/1.0.0-assets.279/fonts/cartoIcon.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.279/fonts/cartoIcon.woff) format("woff"), url(/assets/1.0.0-assets.279/fonts/cartoIcon.ttf) format("truetype"), url(/assets/1.0.0-assets.279/images/cartoIcon.svg#cartoIcon) format("svg");
font-weight: normal;
font-style: normal; }
.CDB-IconFont {
display: inline-block;
font-family: 'CartoIcon';
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1; }
.CDB-IconFont--center {
vertical-align: middle; }
.CDB-IconFont--top {
vertical-align: top; }
.CDB-IconFont--small {
font-size: 11px; }
/* SG
# Typography/Icon font
All available icons in CartoDB.
```
clock
stats
heartEmpty
heartFill
alert
rows
check
dribbble
twitter
caretDown
lightbulb
explore
drop
edition
view
odyssey
settings
downloadCircle
pencilMenu
mobile
wizard
undo
redo
lArrowLight
hide
info
fork
facebook
folder
dropbox
cloud
step
addDocument
arrowNext
arrowPrev
close
cartoFante
lock
cartoDB
lens
closeLimits
defaultUser
cockroach
floppy
trash
wifi
unlock
unlockWithEllipsis
gift
people
play
add
map
anchor
key
calendar
document
eye
marker
progressBar
book
notes
rectangles
mountain
points
snake
boss
rocket
barometer
dollar
email
label
outside
jigsaw
tools
question
layerStack
alarm
cloudDownArrow
pencil
fountainPen
emptyDoc
mergeArrow
mergeColumns
mergeSpatial
globe
chevronDown
streets
keys
facebookSquare
fullscreen
rArrowLight
share
linkedin
calendarBlank
creativeCommons
bubble
bars
arrowMenuLight
tieFighter
ray
markup
table
airlock
pin
attache
download
group
dashboard
spinner
mapsearch
rArrow
```
*/
.CDB-IconFont-clock::before {
content: '\E001'; }
.CDB-IconFont-stats::before {
content: '\E002'; }
.CDB-IconFont-heartEmpty::before {
content: '\E003'; }
.CDB-IconFont-heartFill::before {
content: '\E004'; }
.CDB-IconFont-alert::before {
content: '\E005'; }
.CDB-IconFont-rows::before {
content: '\E006'; }
.CDB-IconFont-check::before {
content: '\E007'; }
.CDB-IconFont-dribbble::before {
content: '\E008'; }
.CDB-IconFont-twitter::before {
content: '\E009'; }
.CDB-IconFont-caretDown::before {
content: '\E00A'; }
.CDB-IconFont-lightbulb::before {
content: '\E00B'; }
.CDB-IconFont-explore::before {
content: '\E00C'; }
.CDB-IconFont-drop::before {
content: '\E00D'; }
.CDB-IconFont-edition::before {
content: '\E00E'; }
.CDB-IconFont-view::before {
content: '\E00F'; }
.CDB-IconFont-odyssey::before {
content: '\E010'; }
.CDB-IconFont-settings::before {
content: '\E011'; }
.CDB-IconFont-downloadCircle::before {
content: '\E012'; }
.CDB-IconFont-pencilMenu::before {
content: '\E013'; }
.CDB-IconFont-mobile::before {
content: '\E014'; }
.CDB-IconFont-wizard::before {
content: '\E015'; }
.CDB-IconFont-undo::before {
content: '\E016'; }
.CDB-IconFont-redo::before {
content: '\E017'; }
.CDB-IconFont-lArrowLight::before {
content: '\E018'; }
.CDB-IconFont-hide::before {
content: '\E019'; }
.CDB-IconFont-info::before {
content: '\E01A'; }
.CDB-IconFont-fork::before {
content: '\E01B'; }
.CDB-IconFont-facebook::before {
content: '\E01C'; }
.CDB-IconFont-folder::before {
content: '\E01D'; }
.CDB-IconFont-dropbox::before {
content: '\E01E'; }
.CDB-IconFont-cloud::before {
content: '\E01F'; }
.CDB-IconFont-step::before {
content: '\E020'; }
.CDB-IconFont-addDocument::before {
content: '\E021'; }
.CDB-IconFont-arrowNext::before {
content: '\E022'; }
.CDB-IconFont-arrowPrev::before {
content: '\E023'; }
.CDB-IconFont-close::before {
content: '\E024'; }
.CDB-IconFont-cartoFante::before {
content: '\E025'; }
.CDB-IconFont-lock::before {
content: '\E026'; }
.CDB-IconFont-cartoDB::before {
content: '\E027'; }
.CDB-IconFont-lens::before {
content: '\E028'; }
.CDB-IconFont-closeLimits::before {
content: '\E029'; }
.CDB-IconFont-defaultUser::before {
content: '\E02A'; }
.CDB-IconFont-cockroach::before {
content: '\E02B'; }
.CDB-IconFont-floppy::before {
content: '\E02C'; }
.CDB-IconFont-trash::before {
content: '\E02D'; }
.CDB-IconFont-wifi::before {
content: '\E02E'; }
.CDB-IconFont-unlock::before {
content: '\E02F'; }
.CDB-IconFont-unlockWithEllipsis::before {
content: '\E030'; }
.CDB-IconFont-gift::before {
content: '\E031'; }
.CDB-IconFont-people::before {
content: '\E032'; }
.CDB-IconFont-play::before {
content: '\E033'; }
.CDB-IconFont-add::before {
content: '\E034'; }
.CDB-IconFont-map::before {
content: '\E035'; }
.CDB-IconFont-anchor::before {
content: '\E036'; }
.CDB-IconFont-key::before {
content: '\E037'; }
.CDB-IconFont-calendar::before {
content: '\E038'; }
.CDB-IconFont-document::before {
content: '\E039'; }
.CDB-IconFont-eye::before {
content: '\E03A'; }
.CDB-IconFont-marker::before {
content: '\E03B'; }
.CDB-IconFont-progressBar::before {
content: '\E03C'; }
.CDB-IconFont-book::before {
content: '\E03D'; }
.CDB-IconFont-notes::before {
content: '\E03E'; }
.CDB-IconFont-rectangles::before {
content: '\E03F'; }
.CDB-IconFont-mountain::before {
content: '\E040'; }
.CDB-IconFont-points::before {
content: '\E041'; }
.CDB-IconFont-snake::before {
content: '\E042'; }
.CDB-IconFont-boss::before {
content: '\E043'; }
.CDB-IconFont-rocket::before {
content: '\E044'; }
.CDB-IconFont-barometer::before {
content: '\E045'; }
.CDB-IconFont-dollar::before {
content: '\E046'; }
.CDB-IconFont-email::before {
content: '\E047'; }
.CDB-IconFont-label::before {
content: '\E048'; }
.CDB-IconFont-outside::before {
content: '\E049'; }
.CDB-IconFont-jigsaw::before {
content: '\E04A'; }
.CDB-IconFont-tools::before {
content: '\E04B'; }
.CDB-IconFont-question::before {
content: '\E04C'; }
.CDB-IconFont-layerStack::before {
content: '\E04D'; }
.CDB-IconFont-alarm::before {
content: '\E04E'; }
.CDB-IconFont-cloudDownArrow::before {
content: '\E04F'; }
.CDB-IconFont-pencil::before {
content: '\E050'; }
.CDB-IconFont-fountainPen::before {
content: '\E051'; }
.CDB-IconFont-emptyDoc::before {
content: '\E052'; }
.CDB-IconFont-mergeArrow::before {
content: '\E053'; }
.CDB-IconFont-mergeColumns::before {
content: '\E054'; }
.CDB-IconFont-mergeSpatial::before {
content: '\E055'; }
.CDB-IconFont-globe::before {
content: '\E056'; }
.CDB-IconFont-chevronDown::before {
content: '\E057'; }
.CDB-IconFont-streets::before {
content: '\E058'; }
.CDB-IconFont-keys::before {
content: '\E059'; }
.CDB-IconFont-facebookSquare::before {
content: '\E05A'; }
.CDB-IconFont-fullscreen::before {
content: '\E05B'; }
.CDB-IconFont-rArrowLight::before {
content: '\E05C'; }
.CDB-IconFont-share::before {
content: '\E05D'; }
.CDB-IconFont-linkedin::before {
content: '\E05E'; }
.CDB-IconFont-calendarBlank::before {
content: '\E05F'; }
.CDB-IconFont-creativeCommons::before {
content: '\E060'; }
.CDB-IconFont-bubble::before {
content: '\E061'; }
.CDB-IconFont-bars::before {
content: '\E062'; }
.CDB-IconFont-arrowMenuLight::before {
content: '\E063'; }
.CDB-IconFont-tieFighter::before {
content: '\E064'; }
.CDB-IconFont-ray::before {
content: '\E065'; }
.CDB-IconFont-markup::before {
content: '\E066'; }
.CDB-IconFont-table::before {
content: '\E067'; }
.CDB-IconFont-airlock::before {
content: '\E068'; }
.CDB-IconFont-pin::before {
content: '\E069'; }
.CDB-IconFont-attache::before {
content: '\E06A'; }
.CDB-IconFont-download::before {
content: '\E06B'; }
.CDB-IconFont-group::before {
content: '\E06C'; }
.CDB-IconFont-dashboard::before {
content: '\E06D'; }
.CDB-IconFont-spinner::before {
content: '\E06E'; }
.CDB-IconFont-mapsearch::before {
content: '\E06F'; }
.CDB-IconFont-rArrow::before {
content: '\E070'; }
/* Margins */
.u-tSpace {
margin-top: 4px; }
.u-tSpace--m {
margin-top: 8px; }
.u-tSpace-xl {
margin-top: 12px; }
.u-rSpace--s {
margin-right: 2px; }
.u-rSpace {
margin-right: 4px; }
.u-rSpace--m {
margin-right: 8px; }
.u-rSpace--xl {
margin-right: 12px; }
.u-bSpace {
margin-bottom: 4px; }
.u-bSpace--m {
margin-bottom: 8px; }
.u-bSpace--xl {
margin-bottom: 12px; }
.u-lSpace {
margin-left: 4px; }
.u-lSpace--s {
margin-left: 2px; }
.u-lSpace--m {
margin-left: 8px; }
.u-lSpace--xl {
margin-left: 12px; }
.u-lSpace--xxl {
margin-left: 16px; }
.u-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.u-actionTextColor {
color: #0E64B0; }
.u-actionTextColor:hover {
color: #082539; }
.u-mainTextColor {
color: #2E3C43; }
.u-secondaryTextColor {
color: #636D72; }
.u-altTextColor {
color: #979EA1; }
.u-hintTextColor {
color: #CBCED0; }
.u-alertTextColor {
color: #F19243; }
.u-whiteTextColor {
color: #FFF; }
.u-errorTextColor {
color: #F15743; }
/* Displays */
.u-iBlock {
display: inline-block;
vertical-align: middle; }
.u-showDesktop {
display: block !important; }
.u-showMobile {
display: none !important; }
/* Decoration */
.u-upperCase {
text-transform: uppercase; }
/* Flex */
.u-flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.u-justifySpace {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-ms-flex-pack: space-between; }
.u-justifyCenter {
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center; }
.u-justifyStart {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-ms-flex-pack: flex-start; }
.u-justifyEnd {
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
-ms-flex-pack: flex-end; }
.u-alignStart {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: flex-start; }
.u-alignCenter {
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-ms-flex-align: center; }
.u-alignEnd {
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
-ms-flex-align: flex-end; }
/* Clearfix */
.u-clearfix::after {
display: table;
clear: both;
content: ''; }
/* Media queries*/
@media only screen and (max-width: 600px) {
.u-showDesktop {
display: none !important; }
.u-showMobile {
display: block !important; } }
/* helper mixins */
.ps-container {
-ms-touch-action: auto;
touch-action: auto;
overflow: hidden !important;
-ms-overflow-style: none; }
@supports (-ms-overflow-style: none) {
.ps-container {
overflow: auto !important; } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps-container {
overflow: auto !important; } }
.ps-container.ps-active-x > .ps-scrollbar-x-rail {
display: block;
background: linear-gradient(180deg, transparent 50%, #EEE 50%);
cursor: default !important; }
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
display: block;
background: linear-gradient(90deg, transparent 50%, #EEE 50%);
cursor: default !important; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
opacity: 1;
height: 16px;
background: linear-gradient(180deg, transparent 50%, #EEE 50%); }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background: #AAA;
height: 8px; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
opacity: 1;
width: 16px;
background: linear-gradient(90deg, transparent 50%, #EEE 50%); }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background: #AAA;
width: 8px; }
.ps-container > .ps-scrollbar-x-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 1;
transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
bottom: 0;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px; }
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* please don't change 'position' */
background: #AAA;
border-radius: 0;
transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
bottom: 0;
/* there must be 'bottom' for ps-scrollbar-x */
height: 4px; }
.ps-container > .ps-scrollbar-x-rail:hover, .ps-container > .ps-scrollbar-x-rail:active {
height: 16px; }
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
height: 8px; }
.ps-container > .ps-scrollbar-y-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 1;
transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
right: 0;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 8px; }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* please don't change 'position' */
background: #AAA;
border-radius: 0;
transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
right: 0;
/* there must be 'right' for ps-scrollbar-y */
width: 4px; }
.ps-container > .ps-scrollbar-y-rail:hover, .ps-container > .ps-scrollbar-y-rail:active {
width: 16px; }
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
width: 8px; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
opacity: 1;
height: 16px;
background: linear-gradient(180deg, transparent 50%, #EEE 50%); }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background: #AAA;
height: 8px; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
opacity: 1;
width: 16px;
background: linear-gradient(90deg, transparent 50%, #EEE 50%); }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background: #AAA;
width: 8px; }
.ps-container:hover > .ps-scrollbar-x-rail,
.ps-container:hover > .ps-scrollbar-y-rail {
opacity: 1; }
.ps-container:hover > .ps-scrollbar-x-rail:hover {
opacity: 1;
background: linear-gradient(180deg, transparent 50%, #EEE 50%); }
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
background: #AAA; }
.ps-container:hover > .ps-scrollbar-y-rail:hover {
opacity: 1;
background: linear-gradient(90deg, transparent 50%, #EEE 50%); }
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background: #AAA; }
/* SG
# Forms/Checkbox
```
```
*/
.CDB-Checkbox {
position: absolute;
width: 16px;
height: 16px;
opacity: 0;
vertical-align: middle;
z-index: 1; }
.CDB-Checkbox-face {
position: relative;
width: 16px;
height: 16px;
border: 1px solid #DDD;
border-radius: 3px;
background: #FFF;
cursor: pointer;
box-sizing: border-box;
z-index: 2;
pointer-events: none; }
.CDB-Checkbox-face::before, .CDB-Checkbox-face::after {
display: block;
position: absolute;
bottom: 3px;
width: 2px;
border-radius: 1px;
background: #FFF;
content: ''; }
.CDB-Checkbox-face::before {
right: 4px;
height: 8px;
transform: rotate(45deg); }
.CDB-Checkbox-face::after {
left: 4px;
height: 6px;
transform: rotate(-45deg); }
.CDB-Checkbox:checked + .CDB-Checkbox-face {
transition: background 300ms;
border: 1px solid #0E64B0;
background: #0E64B0; }
.CDB-Checkbox:checked + .CDB-Checkbox-face::before, .CDB-Checkbox:checked + .CDB-Checkbox-face::after {
background: #FFF; }
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
border: 1px solid #0E64B0; }
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face::before, .CDB-Checkbox:checked:hover + .CDB-Checkbox-face::after {
background: #FFF; }
.CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid #082539; }
.CDB-Checkbox:hover + .CDB-Checkbox-face::before, .CDB-Checkbox:hover + .CDB-Checkbox-face::after {
background: #AAA; }
.CDB-Checkbox:active + .CDB-Checkbox-face {
border: 1px solid #0E64B0; }
.CDB-Checkbox:active + .CDB-Checkbox-face::before, .CDB-Checkbox:active + .CDB-Checkbox-face::after {
background: #0E64B0; }
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid rgba(8, 37, 57, 0.08);
background: #F9F9F9; }
.CDB-Checkbox:disabled + .CDB-Checkbox-face::before, .CDB-Checkbox:disabled + .CDB-Checkbox-face::after {
opacity: 0; }
.CDB-Checkbox:checked:disabled + .CDB-Checkbox-face {
border: 1px solid rgba(8, 37, 57, 0.08);
background: #F9F9F9; }
.CDB-Checkbox:checked:disabled + .CDB-Checkbox-face::before, .CDB-Checkbox:checked:disabled + .CDB-Checkbox-face::after {
background: #979EA1;
opacity: 1; }
/* SG
# Forms/Dropdowns
```
```
*/
.CDB-DropdownContainer {
position: relative;
height: 250px; }
.CDB-Dropdown {
display: flex;
position: absolute;
top: 40px;
flex-direction: row;
max-height: 200px; }
.CDB-Dropdown-calculations {
box-sizing: border-box;
padding: 14px;
border-right: 1px solid #DDD;
border-radius: 4px 0 0 4px;
background-color: #F2F6F9; }
.CDB-Dropdown-calculationsElement {
margin-bottom: 16px;
color: #082539;
font-size: 10px; }
.CDB-Dropdown-calculationsElement:last-child {
margin-bottom: 0; }
.CDB-Dropdown-options {
width: 160px;
border-radius: 0 4px 4px 0;
background-color: #FFF;
vertical-align: top; }
.CDB-Dropdown-optionsElement {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px 10px;
border-bottom: 1px solid #DDD;
color: #0E64B0; }
.CDB-Dropdown-optionsElement:last-child {
border-bottom: 0; }
.CDB-Dropdown-optionsElement:hover {
background-color: rgba(14, 100, 176, 0.08);
color: #082539;
cursor: pointer; }
.CDB-Dropdown-optionsElement.is-selected {
color: #082539; }
.CDB-Dropdown-optionsElement.is-disabled {
color: #CBCED0; }
.CDB-Dropdown-optionsElement.is-disabled:hover {
background-color: transparent;
cursor: default; }
/* SG
# Forms/Inputs
```
```
*/
.CDB-InputText {
width: 100%;
min-height: 32px;
padding: 7px 8px;
border: 1px solid #DDD;
border-radius: 4px;
font-size: 12px;
line-height: 16px;
box-sizing: border-box; }
.CDB-InputText.is-cursor {
cursor: pointer; }
.CDB-InputText.is-empty {
color: #CBCED0; }
.CDB-InputText.is-number {
color: #5fcc79; }
.CDB-InputText.is-null {
color: #CBCED0;
font-style: italic; }
.CDB-InputText:hover {
border: 1px solid #082539; }
.CDB-InputText:focus {
border: 1px solid #2E3C43;
outline: none; }
.CDB-InputText:disabled, .CDB-InputText.is-disabled {
border-color: rgba(8, 37, 57, 0.08);
background: #F9F9F9;
cursor: default; }
.CDB-InputText.has-icon {
padding-right: 32px; }
.CDB-InputText.has-error {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
.CDB-InputTextPlain {
width: 100%;
border: 0;
background: transparent;
font-size: 12px;
line-height: 16px;
box-sizing: border-box; }
.CDB-FieldError .CDB-InputText {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
/* SG
# Forms/Labels
```
```
*/
.CDB-Legend {
width: 96px; }
.CDB-Legend--big {
width: 192px; }
.CDB-Fieldset {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-ms-flex-align: center; }
.CDB-Fieldset-block {
width: 100%; }
/* SG
# Forms/Option input
```
```
*/
.CDB-OptionInput {
box-sizing: border-box;
width: 100%;
height: 30px;
border-radius: 4px;
vertical-align: middle; }
.CDB-OptionInput-container {
display: flex;
align-content: center;
align-items: center; }
.CDB-OptionInput-container--noMargin {
margin: 0; }
.CDB-OptionInput-item {
display: flex;
position: relative;
box-sizing: content-box;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px; }
.CDB-OptionInput-item.is-active, .CDB-OptionInput-item:hover, .CDB-OptionInput-item:focus {
cursor: pointer; }
.CDB-OptionInput-item:not(:only-child):first-child {
width: auto;
margin-right: 8px; }
.CDB-OptionInput-item:last-child {
width: 100%; }
.CDB-OptionInput-container--border .CDB-OptionInput-item {
border: 1px solid #DDD; }
.CDB-OptionInput-container--border .CDB-OptionInput-item:hover {
border: 1px solid #082539; }
.CDB-OptionInput-container--border .CDB-OptionInput-item.is-active, .CDB-OptionInput-container--border .CDB-OptionInput-item:focus {
border: 1px solid #2E3C43; }
.CDB-OptionInput-container--border .CDB-OptionInput-item:first-child {
margin-right: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px; }
.CDB-OptionInput-container--border .CDB-OptionInput-item:first-child:hover + .CDB-OptionInput-item::after {
content: none; }
.CDB-OptionInput-container--border .CDB-OptionInput-item:last-child {
border-radius: 4px; }
.CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item.is-active::after, .CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item:focus::after, .CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item:hover::after {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 32px;
content: ''; }
.CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item:hover::after {
background-color: #082539; }
.CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item.is-active::after, .CDB-OptionInput-container--border .CDB-OptionInput-item + .CDB-OptionInput-item:focus::after {
background-color: #2E3C43; }
.CDB-OptionInput-content {
display: flex;
box-sizing: content-box;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 8px;
color: #082539;
white-space: nowrap; }
.CDB-OptionInput-content:hover {
text-decoration: none; }
/* SG
# Forms/Radio
```
```
*/
.CDB-Radio {
position: absolute;
width: 16px;
height: 16px;
opacity: 0;
vertical-align: middle;
z-index: 1; }
.CDB-Radio-face {
position: relative;
width: 16px;
height: 16px;
border: 1px solid #DDD;
border-radius: 50%;
background: #FFF;
text-indent: 20px;
cursor: pointer;
box-sizing: border-box; }
.CDB-Radio-face::before {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: #FFF;
content: ''; }
.CDB-Radio:checked + .CDB-Radio-face {
transition: background 300ms;
border: 1px solid #0E64B0;
background: #0E64B0; }
.CDB-Radio:checked + .CDB-Radio-face::before {
background: #FFF; }
.CDB-Radio:disabled + .CDB-Radio-face {
border: 1px solid rgba(8, 37, 57, 0.08);
background: #F9F9F9; }
.CDB-Radio:disabled + .CDB-Radio-face::before {
opacity: 0; }
.CDB-Radio:disabled:hover + .CDB-Radio-face {
border: 1px solid rgba(8, 37, 57, 0.08); }
.CDB-Radio:hover + .CDB-Radio-face {
border: 1px solid #082539; }
.CDB-Radio:hover + .CDB-Radio-face::before {
background: #AAA; }
.CDB-Radio:focus + .CDB-Radio-face,
.CDB-Radio:checked:hover + .CDB-Radio-face {
border: 1px solid #0E64B0; }
.CDB-Radio:checked:hover + .CDB-Radio-face::before {
background: #FFF; }
.CDB-Radio:active + .CDB-Radio-face::before {
background: #0E64B0; }
/* SG
# Forms/Selects
```
DejaVu Sans
DejaVu Sans
null
46,594
```
*/
.CDB-Select {
position: relative; }
.CDB-SelectItem {
position: absolute;
top: 40px; }
.CDB-SelectFake {
-webkit-appearance: none;
appearance: none;
width: 100%;
padding: 7px 8px 6px;
border: 1px solid #DDD;
border-radius: 4px;
background: #FFF;
font-size: 12px;
line-height: 16px;
box-sizing: border-box; }
.CDB-SelectFake:hover {
border: 1px solid #082539; }
.CDB-SelectFake:focus {
border: 1px solid #2E3C43;
outline: none; }
.CDB-SelectFake:disabled {
border-color: rgba(8, 37, 57, 0.08);
background: #F9F9F9; }
.CDB-SelectFake.has-error {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
.CDB-SelectFake.is-cursor {
cursor: pointer; }
.CDB-FieldError .CDB-Select,
.CDB-FieldError .CDB-SelectFake {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
/* SG
# Forms/TabsForms
```
```
*/
.CDB-TabsForms {
border: 1px solid #DDD;
border-radius: 4px; }
.CDB-TabsForms-inner {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.CDB-TabsForms-item {
border-left: 1px solid rgba(8, 37, 57, 0.08); }
.CDB-TabsForms-item:first-child {
border-left: 0; }
.CDB-TabsForms-button {
padding: 7px 8px; }
/* SG
# Forms/Textareas
```
```
*/
.CDB-Textarea {
width: 100%;
padding: 7px 8px 6px;
border: 1px solid #DDD;
border-radius: 4px;
font-size: 12px;
line-height: 16px;
box-sizing: border-box; }
.CDB-Textarea:hover {
border: 1px solid #AAA; }
.CDB-Textarea:focus {
border: 1px solid #0E64B0;
outline-color: transparent;
outline-style: none; }
.CDB-Textarea:disabled, .CDB-Textarea.is-disabled {
border-color: rgba(8, 37, 57, 0.08);
background: #F9F9F9; }
.CDB-Textarea:has-error {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
.CDB-FieldError .CDB-Textarea,
.CDB-Textarea.has-error {
border: 1px solid rgba(241, 87, 67, 0.48);
background: rgba(241, 87, 67, 0.04);
color: #F15743; }
/* SG
# Forms/Toggle
```
```
*/
.CDB-Toggle {
position: absolute;
width: 32px;
height: 16px;
opacity: 0;
z-index: 1; }
.CDB-Toggle:hover + .CDB-ToggleFace {
background: #9C9FA1; }
.CDB-Toggle:hover:checked + .CDB-ToggleFace {
background: #82BB90; }
.CDB-Toggle + .CDB-ToggleFace {
position: relative;
width: 32px;
height: 16px;
margin: 0 2px;
transition: background 300ms;
border-radius: 50px;
background: #CBCED0; }
.CDB-Toggle + .CDB-ToggleFace::before {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: ''; }
.CDB-Toggle:checked + .CDB-ToggleFace {
background: #9DE0AD; }
.CDB-Toggle:checked + .CDB-ToggleFace::before {
right: 2px;
left: auto; }
.Toggle .is-disabled {
opacity: 0.24;
pointer-events: none; }
/* SG
# Shapes/Add
Description
```
16px
12px
```
*/
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center; }
.CDB-Shape--medium {
width: 24px;
height: 24px; }
.CDB-Shape:hover {
cursor: pointer; }
.CDB-Shape-add {
position: relative;
height: 100%; }
.CDB-Shape-add::before {
display: block;
position: absolute;
right: 1px;
bottom: 7px;
left: 0;
height: 1px;
background: #082539;
content: ''; }
.CDB-Shape-add::after {
display: block;
position: absolute;
top: 1;
bottom: 0;
left: 7px;
width: 1px;
background: #082539;
content: ''; }
.CDB-Shape-add.is-small::before {
display: block;
position: absolute;
right: 3px;
bottom: 7px;
left: 4px;
height: 1px;
background: #082539;
content: ''; }
.CDB-Shape-add.is-small::after {
display: block;
position: absolute;
top: 4px;
bottom: 3px;
left: 8px;
width: 1px;
background: #082539;
content: ''; }
.CDB-Shape-add.is-blue::before, .CDB-Shape-add.is-blue::after {
background: #0E64B0; }
.CDB-Shape-add.is-white::before, .CDB-Shape-add.is-white::after {
background: #FFF; }
/* SG
# Shapes/Arrow
Description
```
```
*/
.CDB-Shape-Arrow {
position: relative;
width: 1px;
height: 8px;
background: #082539; }
.CDB-Shape-Arrow::before {
display: block;
position: absolute;
top: 2px;
left: 0;
width: 5px;
height: 1px;
transform: rotate(45deg);
background: #082539;
content: ''; }
.CDB-Shape-Arrow::after {
display: block;
position: absolute;
top: 2px;
left: -4px;
width: 5px;
height: 1px;
transform: rotate(-45deg);
background: #082539;
content: ''; }
.CDB-Shape-Arrow.is-up {
top: 6px;
right: 9px;
transform: rotate(45deg); }
.CDB-Shape-Arrow.is-down {
top: 13px;
left: 46px;
transform: rotate(-135deg); }
.CDB-Shape-Arrow.is-blue {
background: #0E64B0; }
.CDB-Shape-Arrow.is-blue::before {
background: #0E64B0; }
.CDB-Shape-Arrow.is-blue::after {
background: #0E64B0; }
.CDB-Shape-Arrow.is-white {
background: #FFF; }
.CDB-Shape-Arrow.is-white::before {
background: #FFF; }
.CDB-Shape-Arrow.is-white::after {
background: #FFF; }
/* SG
# Shapes/Check circle
Description
```
16px
12px
```
*/
.CDB-Shape-CircleItem {
width: 14px;
height: 14px;
border: 1px solid #082539;
border-radius: 50%; }
.CDB-Shape-CircleItem.is-small {
width: 12px;
height: 12px;
transform: translateY(2px); }
.CDB-Shape-CircleItem.is-blue {
border: 1px solid #0E64B0; }
.CDB-Shape-CircleItem.is-white {
border: 1px solid #FFF; }
.CDB-Shape-tick {
display: block;
position: relative;
height: 100%; }
.CDB-Shape-tick::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: #082539;
content: ''; }
.CDB-Shape-tick::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: #082539;
content: ''; }
.CDB-Shape-tick.is-medium::before {
top: 5px;
left: 4px;
height: 4px; }
.CDB-Shape-tick.is-medium::after {
top: 3px;
right: 5px;
height: 6px; }
.CDB-Shape-tick.is-small::before {
top: 4px;
left: 2px;
height: 3px; }
.CDB-Shape-tick.is-small::after {
top: 2px;
right: 3px;
height: 5px; }
.CDB-Shape-tick.is-blue::before {
background: #0E64B0; }
.CDB-Shape-tick.is-blue::after {
background: #0E64B0; }
.CDB-Shape-tick.is-white::before {
background: #FFF; }
.CDB-Shape-tick.is-white::after {
background: #FFF; }
.CDB-Shape-tick.is-green::before {
background: #9DE0AD; }
.CDB-Shape-tick.is-green::after {
background: #9DE0AD; }
/* SG
# Shapes/Close
Description
```
16px
12px
```
*/
.CDB-Shape-close {
display: block;
position: relative;
height: 100%; }
.CDB-Shape-close::before {
display: block;
position: absolute;
width: 1px;
transform: rotate(-45deg);
background: #082539;
content: ''; }
.CDB-Shape-close::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
background: #082539;
content: ''; }
.CDB-Shape-close.is-huge::before {
top: -2px;
left: 7px;
height: 20px; }
.CDB-Shape-close.is-huge::after {
top: -2px;
right: 8px;
height: 20px; }
.CDB-Shape-close.is-large::before {
top: 2px;
left: 7px;
height: 12px; }
.CDB-Shape-close.is-large::after {
top: 2px;
right: 8px;
height: 12px; }
.CDB-Shape-close.is-medium::before {
top: 3px;
left: 6px;
height: 7px; }
.CDB-Shape-close.is-medium::after {
top: 3px;
right: 6px;
height: 7px; }
.CDB-Shape-close.is-small::before {
top: 2px;
left: 4px;
height: 5px; }
.CDB-Shape-close.is-small::after {
top: 2px;
right: 4px;
height: 5px; }
.CDB-Shape-close.is-blue::before {
background: #0E64B0; }
.CDB-Shape-close.is-blue::after {
background: #0E64B0; }
.CDB-Shape-close.is-white::before {
background: #FFF; }
.CDB-Shape-close.is-white::after {
background: #FFF; }
.CDB-Shape-close.is-red::before {
background: #F15743; }
.CDB-Shape-close.is-red::after {
background: #F15743; }
/* SG
# Shapes/Dash
Description
```
16px
12px
```
*/
.CDB-Shape-dash {
position: relative;
height: 100%; }
.CDB-Shape-dash::before {
display: block;
position: absolute;
right: 2px;
bottom: 7px;
left: 2px;
height: 1px;
background: #082539;
content: ''; }
.CDB-Shape-dash.is-small::before {
right: 3px;
left: 3px; }
.CDB-Shape-dash.is-blue::before {
background: #0E64B0; }
.CDB-Shape-dash.is-white::before {
background: #FFF; }
/* SG
# Shapes/Dataset
Description
```
16px
12px
```
*/
.CDB-Shape-Dataset {
padding-top: 1px; }
.CDB-Shape-Dataset.is-small {
padding-top: 0; }
.CDB-Shape-DatasetItem {
display: inline-block;
width: 9px;
height: 9px;
margin-left: -10px;
border: 1px solid #082539;
border-radius: 50%;
background: #FFF; }
.CDB-Shape-DatasetItem:first-child {
position: relative;
margin-left: 0;
box-shadow: 3px 0 0 #FFF;
z-index: 1; }
.CDB-Shape-Dataset.is-small .CDB-Shape-DatasetItem {
width: 6px;
height: 6px;
margin-left: -7px; }
.CDB-Shape-Dataset.is-small .CDB-Shape-DatasetItem:first-child {
margin-left: 0;
box-shadow: 2px 0 0 #FFF; }
.CDB-Shape-Dataset.is-blue .CDB-Shape-DatasetItem {
border: 1px solid #0E64B0; }
.CDB-Shape-Dataset.is-grey .CDB-Shape-DatasetItem {
border: 1px solid #AAA; }
.CDB-Shape-Dataset.is-white .CDB-Shape-DatasetItem {
border: 1px solid #AAA;
background: #082539; }
.CDB-Shape-Dataset.is-white .CDB-Shape-DatasetItem:first-child {
box-shadow: 3px 0 #082539; }
.CDB-Shape-Dataset.is-white.is-small .CDB-Shape-DatasetItem:first-child {
box-shadow: 2px 0 #082539; }
/* SG
# Shapes/Dots
You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
```
```
*/
.CDB-Shape-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(8, 37, 57, 0.08); }
.CDB-Shape-dot.is-selected {
background: #636D72; }
/* SG
# Shapes/Error circle
Description
```
16px
12px
```
*/
.CDB-Shape-CircleItem {
width: 13px;
height: 13px;
border: 1px solid #082539;
border-radius: 50%; }
.CDB-Shape-CircleItem.is-small {
width: 9px;
height: 9px;
margin: 0 auto; }
.CDB-Shape-CircleItem.is-blue {
border: 1px solid #0E64B0; }
.CDB-Shape-CircleItem.is-white {
border: 1px solid #FFF; }
.CDB-Shape-CircleItem.is-green {
border: 1px solid #9DE0AD; }
.CDB-Shape-CircleItem.is-red {
border: 1px solid #F15743; }
.CDB-Shape-CircleItem--fill.is-blue {
border: 1px solid #0E64B0;
background: #0E64B0; }
.CDB-Shape-CircleItem--fill.is-white {
border: 1px solid #FFF;
background: #FFF; }
.CDB-Shape-CircleItem--fill.is-green {
border: 1px solid #9DE0AD;
background: #9DE0AD; }
.CDB-Shape-CircleItem--fill.is-red {
border: 1px solid #F15743;
background: #F15743; }
/* SG
# Shapes/Hamburguer
Description
```
```
*/
.CDB-Shape-hamburguer {
width: 16px; }
.CDB-Shape-hamburguer:hover {
cursor: pointer; }
.CDB-Shape-hamburguerItem {
height: 2px;
margin-bottom: 2px;
background: #082539; }
.CDB-Shape-hamburguerItem:last-child {
margin-bottom: 0; }
.CDB-Shape-hamburguer.is-blue .CDB-Shape-hamburguerItem {
background: #0E64B0; }
.CDB-Shape-hamburguer.is-white .CDB-Shape-hamburguerItem {
background: #FFF; }
/* SG
# Shapes/Magnify
Description
```
16px
12px
```
*/
.CDB-Shape-magnify {
display: block;
position: relative;
height: 100%; }
.CDB-Shape-magnify::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border: 1px solid #082539;
border-radius: 50%;
content: ''; }
.CDB-Shape-magnify::after {
display: block;
position: absolute;
right: 2px;
bottom: -1px;
width: 1px;
height: 7px;
transform: rotate(314deg);
background: #082539;
content: ''; }
.CDB-Shape-magnify.is-blue::before {
border: 1px solid #0E64B0; }
.CDB-Shape-magnify.is-blue::after {
background: #0E64B0; }
.CDB-Shape-magnify.is-white::before {
border: 1px solid #FFF; }
.CDB-Shape-magnify.is-white::after {
background: #FFF; }
.CDB-Shape-magnify.is-small::before {
top: 3px;
left: 4px;
width: 5px;
height: 5px; }
.CDB-Shape-magnify.is-small::after {
display: block;
position: absolute;
right: 4px;
bottom: 3px;
width: 1px;
height: 5px;
transform: rotate(314deg);
content: ''; }
/* SG
# Shapes/Move
Description
```
16px
12px
```
*/
.CDB-Shape-rectsHandle {
position: relative;
padding: 1px 0 0; }
.CDB-Shape-rectsHandle.is-small {
padding: 3px 0 0 1px; }
.CDB-Shape-rectsHandle.is-small .CDB-Shape-rectsHandleItem {
height: 2px;
margin-bottom: 2px; }
.CDB-Shape-rectsHandle.is-small .CDB-Shape-rectsHandleItem::before {
left: 5px;
width: 2px;
height: 2px; }
.CDB-Shape-rectsHandle.is-small .CDB-Shape-rectsHandleItem::after {
width: 2px;
height: 2px; }
.CDB-Shape-rectsHandleItem {
height: 3px;
margin-bottom: 3px; }
.CDB-Shape-rectsHandleItem:last-child {
margin-bottom: 0; }
.CDB-Shape-rectsHandleItem::before {
display: block;
position: absolute;
left: 4px;
width: 3px;
height: 3px;
background: #082539;
content: ''; }
.CDB-Shape-rectsHandleItem::after {
display: block;
position: absolute;
left: 9px;
width: 3px;
height: 3px;
background: #082539;
content: ''; }
.CDB-Shape-rectsHandleItem--blue::before, .CDB-Shape-rectsHandleItem--blue::after {
background: #0E64B0; }
.CDB-Shape-rectsHandleItem--white::before, .CDB-Shape-rectsHandleItem--white::after {
background: #FFF; }
.CDB-Shape-rectsHandleItem--grey::before, .CDB-Shape-rectsHandleItem--grey::after {
background: #AAA; }
/* SG
# Shapes/Paragrapgh
Description
```
16px
```
*/
.CDB-Shape-paragraph {
padding-top: 3px;
text-align: left; }
.CDB-Shape-paragraph.is-center {
text-align: center; }
.CDB-Shape-paragraph.is-right {
text-align: right; }
.CDB-Shape-paragraphItem {
height: 1px;
margin-bottom: 2px; }
.CDB-Shape-paragraphItem:last-child {
margin-bottom: 0; }
.CDB-Shape-paragraphBar {
display: inline-block;
height: 1px;
margin-bottom: 2px;
background: rgba(8, 37, 57, 0.08);
vertical-align: top; }
.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
background: #0E64B0; }
.CDB-Shape-paragraphBar--01 {
width: 12px; }
.CDB-Shape-paragraphBar--02 {
width: 6px; }
.CDB-Shape-paragraphBar--03 {
width: 8px; }
.CDB-Shape-paragraphBar--04 {
width: 4px; }
/* SG
# Shapes/Three Points
Description
```
24px
16px
12px
```
*/
.CDB-Shape-threePoints {
display: inline-block;
padding: 0 4px; }
.CDB-Shape-threePoints.is-horizontal {
transform: rotate(90deg);
padding: 4px 0; }
.CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 5px;
background: #082539; }
.CDB-Shape-threePointsItem.is-round {
border-radius: 50%; }
.CDB-Shape-threePointsItem:last-child {
margin-bottom: 0; }
.CDB-Shape-threePoints.is-small {
padding-top: 2px; }
.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
width: 2px;
height: 2px;
margin-bottom: 3px; }
.CDB-Shape-threePoints.is-medium {
padding-top: 2px; }
.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
width: 4px;
height: 4px;
margin-bottom: 3px; }
.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
background: #0E64B0; }
.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
background: #FFF; }
/* SG
# Shapes/Toogle Arrows
Description
```
16px
12px
16px
12px
```
*/
.CDB-ArrowToogle {
position: relative;
height: 100%; }
.CDB-ArrowToogle::before {
display: block;
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 1px;
transform: rotate(-45deg);
background: #082539;
content: ''; }
.CDB-ArrowToogle::after {
display: block;
position: absolute;
top: 8px;
right: -1px;
width: 10px;
height: 1px;
transform: rotate(45deg);
background: #082539;
content: ''; }
.CDB-ArrowToogle.is-down {
transform: rotate(180deg); }
.CDB-ArrowToogle.is-small::before {
left: 2px;
width: 8px; }
.CDB-ArrowToogle.is-small::after {
right: 1px;
width: 8px; }
.CDB-ArrowToogle.is-mini::before {
left: 3px;
width: 6px; }
.CDB-ArrowToogle.is-mini::after {
right: 3px;
width: 6px; }
.CDB-ArrowToogle.is-blue::before {
background: #0E64B0; }
.CDB-ArrowToogle.is-blue::after {
background: #0E64B0; }
.CDB-ArrowToogle.is-white::before {
background: #FFF; }
.CDB-ArrowToogle.is-white::after {
background: #FFF; }
/* SG
# Shapes/Type
Description
```
8px
```
*/
.CDB-Shape {
width: 16px;
height: 16px;
text-align: center; }
.CDB-Shape--small {
width: 8px;
height: 8px; }
.CDB-Shape--medium {
width: 24px;
height: 24px; }
.CDB-Shape:hover {
cursor: pointer; }
.CDB-Type {
position: relative;
width: 100%;
height: 100%; }
.CDB-Type-circle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #AAA; }
.CDB-Type-circle--01 {
top: 0;
left: 0; }
.CDB-Type-circle--02 {
top: 0;
right: 0; }
.CDB-Type-circle--03 {
bottom: 0;
left: 0; }
.CDB-Type-circle--04 {
right: 0;
bottom: 0; }
.CDB-Type--polygon::before {
display: block;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
border: 1px solid #AAA;
content: ''; }
.CDB-Type--line::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3px;
width: 1px;
transform: rotate(45deg);
background: #AAA;
content: ''; }
/* SG
# Avatars/List
```
```
*/
.CDB-AvatarList {
padding-left: 12px; }
.CDB-AvatarList-item {
display: inline-block;
margin-left: -12px;
border: 2px solid #FFF;
border-radius: 50%;
vertical-align: middle; }
.CDB-AvatarList-itemMore {
display: inline-block;
margin-left: -12px;
padding: 2px 6px;
border-left: 2px solid #FFF;
border-radius: 50px;
background: rgba(8, 37, 57, 0.08); }
.CDB-AvatarList-itemMedia {
width: 16px;
height: 16px;
border-radius: 50%; }
/* SG
# Boxes/Dropdown
```
```
*/
.CDB-Box-modal {
min-width: 160px;
border: 1px solid #DDD;
border-radius: 4px;
background: #FFF;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
box-sizing: border-box; }
.CDB-Box-modalHeader {
background: #F2F6F9; }
.CDB-Box-modalHeaderItem {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
padding: 12px 16px;
border-bottom: 1px solid #DDD; }
.CDB-Box-modalHeaderItem--block {
display: block; }
.CDB-Box-modalHeaderItem--paddingHorizontal {
padding: 0 16px; }
.CDB-Box-modalHeaderItem--paddingVertical {
padding: 12px 0; }
.CDB-Box-modalOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99; }
/* SG
# Buttons/Primary
Layout Component:
[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
```
```
*/
.CDB-Button {
position: relative;
padding: 8px 20px;
transition: background, 300ms;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box; }
.CDB-Button .CDB-Button-Text {
display: block; }
.CDB-Button.is-disabled {
opacity: 0.24;
cursor: default; }
.CDB-Button.is-disabled:active {
pointer-events: none; }
.CDB-Button--noPadding {
padding: 0; }
.CDB-Button--loading .CDB-Button-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: 50%;
opacity: 0;
z-index: 10; }
.CDB-Button--loading .CDB-Button-Text {
transition: all 600ms; }
.CDB-Button--loading.is-loading {
cursor: default; }
.CDB-Button--loading.is-loading .CDB-Button-loader {
animation-name: showIn;
animation-duration: 600ms;
animation-fill-mode: forwards; }
.CDB-Button--loading.is-loading .CDB-Button-Text {
opacity: 0; }
@keyframes showIn {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0; }
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1; } }
.CDB-Button--small {
padding: 4px 12px;
border-radius: 3px; }
.CDB-Button--big {
padding: 11px 20px; }
.CDB-Button--wide {
width: 100%; }
.CDB-Button--icon {
padding: 7px 9px; }
.CDB-Button--primary {
background: #0E64B0;
color: #FFF; }
.CDB-Button--primary:hover, .CDB-Button--primary:active {
background: #082539; }
.CDB-Button--primary.is-loading:hover, .CDB-Button--primary.is-loading:active {
background: #0E64B0; }
.CDB-Button--primary.is-disabled:hover, .CDB-Button--primary.is-disabled:active {
background: #0E64B0; }
.CDB-Button--alert {
background: #F19243;
color: #FFF; }
.CDB-Button--alert:hover, .CDB-Button--alert:active {
background: #ee7c1d; }
.CDB-Button--alert.is-disabled:hover, .CDB-Button--alert.is-disabled:active {
background: #F19243; }
.CDB-Button--error,
.CDB-Button--negative {
background: #F15743;
color: #FFF; }
.CDB-Button--error:hover, .CDB-Button--error:active,
.CDB-Button--negative:hover,
.CDB-Button--negative:active {
background: #ee351d; }
.CDB-Button--error.is-disabled:hover, .CDB-Button--error.is-disabled:active,
.CDB-Button--negative.is-disabled:hover,
.CDB-Button--negative.is-disabled:active {
background: #F15743; }
.CDB-Button--dashed {
padding: 13px 0;
border: 1px dashed #CBCED0;
color: #0E64B0; }
.CDB-Button--dashed:hover {
border-color: #0E64B0; }
.CDB-Button--dashed.is-disabled:hover {
border-color: #CBCED0; }
/* SG
# Buttons/Secondary
```
```
*/
.CDB-Button--secondary {
color: #0E64B0;
box-shadow: inset 0 0 0 1px #0E64B0; }
.CDB-Button--secondary:hover {
background: rgba(14, 100, 176, 0.08);
box-shadow: inset 0 0 0 2px #082539; }
.CDB-Button--secondary:active {
background: #0E64B0;
color: #FFF; }
.CDB-Button--secondary.is-disabled:hover {
background: transparent;
box-shadow: inset 0 0 0 1px #0E64B0; }
.CDB-Button--secondary.is-disabled:active {
background: transparent; }
.CDB-Button--secondary.is-loading {
cursor: default; }
.CDB-Button--secondary.is-loading:hover, .CDB-Button--secondary.is-loading:active {
background: none;
color: #0E64B0; }
.CDB-Button--secondary--background {
background-color: #FFF; }
.CDB-Button--white {
color: #FFF;
box-shadow: inset 0 0 0 1px #FFF; }
.CDB-Button--white:hover {
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 0 2px #ebebeb; }
.CDB-Button--white:active {
background: rgba(8, 37, 57, 0.08);
color: #FFF; }
.CDB-Button--white.is-disabled {
opacity: 0.24; }
.CDB-Button--white.is-disabled:hover {
background: transparent;
box-shadow: inset 0 0 0 1px #FFF; }
.CDB-Button--white.is-disabled:active {
background: transparent;
color: #FFF; }
.CDB-Button--white.is-loading {
cursor: default; }
.CDB-Button--white.is-loading:hover, .CDB-Button--white.is-loading:active {
background: none;
color: #FFF; }
/* SG
# Colors/structure
```
```
*/
.Color-Blue {
background: #0E64B0; }
.Color-White {
border: 1px solid #E5E5E5;
background: #FFF; }
.Color-Dark {
background: #000; }
.Color-MainDark {
background: #082539; }
.Color-SecondaryDark {
background: #282C2F; }
.Color-SecondaryBackground {
background: #F2F6F9; }
.Color-ThirdBackground {
background: #F9F9F9; }
/* SG
# Colors/line
```
```
*/
.Color-HoverLine {
background: #AAA; }
.Color-MainLine {
background: #DDD; }
.Color-SecondaryLine {
background: rgba(8, 37, 57, 0.08); }
/* SG
# Colors/typography
```
```
*/
.Color-Type02 {
background: #636D72; }
.Color-Type03 {
background: #979EA1; }
.Color-Type04 {
background: #CBCED0; }
/* SG
# Colors/other
```
```
*/
.Color-Higlight {
background: #9DE0AD; }
.Color-Alert {
background: #F19243; }
.Color-Public {
background: #5FCC79; }
.Color-Link {
background: #FEB100; }
.Color-Password {
background: #FB7B23; }
.Color-Error {
background: #F15743; }
/* SG
# Headers
```
```
*/
.CDB-HeaderInfo {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-ms-flex-align: flex-start; }
.CDB-HeaderInfo.is-block {
display: block; }
.CDB-HeaderInfo-listItem {
display: inline-block;
margin-right: 8px;
vertical-align: middle; }
.CDB-HeaderInfo-listItem:last-child {
margin-right: 0; }
.CDB-HeaderInfo-inner {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
.CDB-HeaderInfo-back {
margin-top: 7px; }
.CDB-HeaderInfo-title {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-ms-flex-align: center; }
.CDB-HeaderInfo-titleText {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 0;
padding-right: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.CDB-HeaderInfo-actionsItem {
display: inline-block;
margin-left: 4px;
vertical-align: middle; }
.CDB-HeaderNumeration {
width: 24px;
min-width: 24px;
height: 24px;
border: 1px solid #DDD;
border-radius: 4px;
background-color: #FFF;
color: #979EA1;
font-size: 10px;
line-height: 23px;
text-align: center;
box-sizing: border-box; }
/* SG
# Lists/Lists Decorations
```
```
*/
.CDB-ListDecoration-item {
border-bottom: 1px solid rgba(8, 37, 57, 0.08); }
.CDB-ListDecoration-item:last-child {
border-bottom: 0; }
.CDB-ListDecoration-itemPadding {
padding: 12px 16px; }
.CDB-ListDecoration-itemPadding--horizontal {
padding: 0 16px; }
.CDB-ListDecoration-itemPadding--vertical {
padding: 12px 0; }
.CDB-ListDecoration-itemLink {
display: block;
max-width: 100%;
padding: 12px 16px;
text-align: left; }
/* SG
# Loader/principal
This is the generic loader for widgets, maps, components, ...
```
```
*/
.CDB-Loader {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 3px;
transform: translateX(-200%);
background-image: linear-gradient(90deg, #0e64b0 0%, #32BBFE 90%, #FAFEFF 95%);
z-index: 2; }
.CDB-Loader.is-visible {
-webkit-animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
-khtml-animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
-moz-animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
-ms-animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
-o-animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite; }
@-webkit-keyframes loader-progress {
from {
transform: translateX(-200%); }
to {
transform: translateX(200%); } }
@-moz-keyframes loader-progress {
from {
transform: translateX(-200%); }
to {
transform: translateX(200%); } }
@-ms-keyframes loader-progress {
from {
transform: translateX(-200%); }
to {
transform: translateX(200%); } }
@-o-keyframes loader-progress {
from {
transform: translateX(-200%); }
to {
transform: translateX(200%); } }
@keyframes loader-progress {
from {
transform: translateX(-200%); }
to {
transform: translateX(200%); } }
/* SG
# Loader/circle
```
```
*/
.CDB-LoaderIcon {
width: 16px;
height: 16px; }
.CDB-LoaderIcon-spinner {
animation: rotate 2s linear infinite;
width: 16px;
height: 16px; }
.CDB-LoaderIcon--small,
.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
width: 14px;
height: 14px; }
.CDB-LoaderIcon--big,
.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
width: 40px;
height: 40px; }
.CDB-LoaderIcon-path {
stroke: rgba(255, 255, 255, 0.88);
stroke-linecap: round;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite;
stroke-width: 4px; }
.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
stroke-width: 2px; }
.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
stroke: rgba(0, 0, 0, 0.24); }
.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
stroke: #0E64B0; }
@keyframes rotate {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0; }
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35; }
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124; } }
/* SG
# Menu/Navigation
```
```
*/
.CDB-NavMenu {
position: relative;
z-index: 2; }
.CDB-NavMenu-inner {
position: relative;
margin-bottom: 18px;
border-bottom: 1px solid #DDD; }
.CDB-NavMenu-inner--no-margin {
margin-bottom: 0; }
.CDB-NavMenu-inner--is-dropdown {
padding-top: 8px;
padding-right: 0;
padding-bottom: 0;
padding-left: 16px; }
.CDB-NavMenu-link {
display: block;
margin-bottom: -1px;
padding: 4px 0 11px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: #0E64B0;
touch-action: manipulation; }
.CDB-NavMenu-link:hover {
border-bottom: 2px solid #082539; }
.CDB-NavMenu-item,
.CDB-NavSubmenu-item {
display: inline-block;
margin-right: 12px;
vertical-align: middle; }
.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid #2E3C43;
color: #2E3C43; }
.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
color: #CBCED0;
cursor: default; }
.CDB-NavSubmenu {
border-bottom: 1px solid rgba(8, 37, 57, 0.08); }
.CDB-NavSubmenu--inside {
position: absolute;
right: 0;
left: 0;
padding-top: 14px; }
.CDB-NavSubmenu--outside {
margin-top: -5px;
margin-bottom: 18px; }
.CDB-NavSubmenu-link {
display: block;
margin-bottom: -1px;
padding-bottom: 12px;
transition: border-color 0.2s ease-in;
border-bottom: 2px solid transparent;
border-radius: 0;
color: #0E64B0;
touch-action: manipulation; }
.CDB-NavSubmenu-link:hover {
border-bottom: 2px solid #082539; }
.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid #2E3C43;
color: #2E3C43; }
.CDB-NavSubmenu-item.is-disabled .CDB-NavSubmenu-link {
pointer-events: none;
color: #CBCED0;
cursor: default; }
.CDB-NavSubmenu-status {
margin-left: 2px; }
.CDB-NavMenu.is-dark .CDB-NavMenu-inner,
.CDB-NavMenu.is-dark .CDB-NavSubmenu {
border-bottom: 1px solid #636D72; }
.CDB-NavMenu.is-dark .CDB-NavMenu-link,
.CDB-NavMenu.is-dark .CDB-NavSubmenu-link {
margin-bottom: -1px;
transition: none;
color: #FFF; }
.CDB-NavMenu.is-dark .CDB-NavMenu-link:hover,
.CDB-NavMenu.is-dark .CDB-NavSubmenu-link:hover {
border-bottom: 2px solid #c9c9c9; }
.CDB-NavMenu.is-dark .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
pointer-events: none;
cursor: default;
opacity: 0.24; }
.CDB-NavMenu.is-dark .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
border-bottom: 2px solid #979EA1;
color: #979EA1; }
.CDB-NavMenu.is-dark .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
border-bottom: 2px solid #979EA1;
color: #979EA1; }
.CDB-NavMenu.is-dark .CDB-NavSubmenu-status {
color: #636D72; }
/* SG
# Tags / Privacy
```
```
*/
.CDB-Tag {
padding: 0 3px;
border: 1px solid #0E64B0;
border-radius: 2px;
color: #0E64B0; }
.CDB-Tag.is-public {
border: 1px solid #5FCC79;
color: #5FCC79; }
.CDB-Tag.is-link {
border: 1px solid #FEB100;
color: #FEB100; }
.CDB-Tag.is-password {
border: 1px solid #FB7B23;
color: #FB7B23; }
.CDB-Tag.is-private {
border: 1px solid #F15743;
color: #F15743; }
.CDB-Tag.is-gray {
border: 1px solid #999;
color: #999; }
/* SG
# Tags / Metadata
```
```
*/
.CDB-ListTag {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.CDB-ListTag-item {
margin-right: 8px; }
.CDB-Tag.CDB-Tag--withLink {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
padding: 4px 4px 4px 8px;
border-radius: 4px;
background: rgba(14, 100, 176, 0.16); }
/* SG
# Tags / Data Type
```
```
*/
.CDB-Tag.CDB-Tag--opaque {
padding: 2px 4px;
border: 0;
border-radius: 2px;
background: rgba(0, 0, 0, 0.04);
text-transform: uppercase; }
/* SG
# Info Tooltip
```
```
*/
.CDB-InfoTooltip {
display: inline-block;
position: absolute;
padding: 8px;
border-radius: 4px;
background: rgba(8, 37, 57, 0.8); }
.CDB-InfoTooltip::after {
display: block;
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
content: ''; }
.is-black.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: rgba(8, 37, 57, 0.8); }
.is-black.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: rgba(8, 37, 57, 0.8); }
.is-black.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: rgba(8, 37, 57, 0.8); }
.is-black.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: rgba(8, 37, 57, 0.8); }
.is-error.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
border-bottom-color: #F15743; }
.is-error.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
border-top-color: #F15743; }
.is-error.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
border-right-color: #F15743; }
.is-error.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
border-left-color: #F15743; }
.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
top: -8px;
left: calc(50% - 4px);
border-top-width: 4px;
border-top-style: solid; }
.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
bottom: -8px;
left: calc(50% - 4px);
border-top-width: 4px;
border-top-style: solid; }
.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
top: calc(50% - 4px);
left: -8px;
border-right-width: 4px;
border-right-style: solid; }
.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
top: calc(50% - 4px);
right: -8px;
border-right-width: 4px;
border-right-style: solid; }
.CDB-InfoTooltip.is-error {
background: #F15743; }
.CDB-InfoTooltip-text {
color: #FFF; }
/* SG
# Typography
```
Open Sans 26/34 Regular
Open Sans 26/34 Light
Open Sans 16/22 Regular
Open Sans 12/16 Semibold
Open Sans 12/16 Semibold Uppercase
Open Sans 12/16 Regular
Open Sans 12/16 Regular
Open Sans 12/16 Regular
Open Sans 10/14 Semibold
Open Sans 10/14 Regular
?
```
*/
.CDB-Text {
font-family: 'Open Sans'; }
.CDB-Text.is-semibold {
font-weight: 600; }
.CDB-Text.is-light {
font-weight: 300; }
.is-underlined {
border-bottom: 1px dotted #DDD; }
.CDB-Size-huge {
font-size: 26px;
line-height: 34px; }
.CDB-Size-large {
font-size: 16px;
line-height: 22px; }
.CDB-Size-medium {
font-size: 12px;
line-height: 16px; }
.CDB-Size-small {
font-size: 10px;
line-height: 14px; }
.CDB-Size-small.u-whiteTextColor {
-webkit-font-smoothing: initial; }
.CDB-FontSize-small {
font-size: 10px; }
.CDB-FontSize-medium {
font-size: 12px; }
.CDB-IconFont.is-disabled {
opacity: 0.24; }
/* SG
# Layer selector and letters
```
b0
```
*/
.CDB-SelectorLayer {
position: relative; }
.CDB-SelectorLayer.is-disabled {
background-color: #F9F9F9; }
.CDB-SelectorLayer-letter {
height: 14px;
padding: 1px 5px;
border-radius: 2px; }
@font-face {
font-family: 'Roboto Medium';
font-style: normal;
font-weight: 500;
src: font-files("Roboto-Medium.woff"); }
.Sessions-oauthHeader {
padding-top: 16px;
font-size: 12px;
font-weight: 600; }
.Sessions-oauthContainer {
display: flex;
justify-content: space-between; }
.Sessions-oauthContainer .Sessions-oauthButton {
margin-left: 8px; }
.Sessions-oauthContainer .Sessions-oauthButton:first-child {
margin-left: 0; }
.Sessions-oauthButton {
flex: 1;
width: 100%;
min-width: 156px;
max-width: 320px;
height: 40px;
padding-left: 52px;
transition: all 0.15s;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
background: #FFF;
box-shadow: 0 0.5px rgba(0, 0, 0, 0.2);
color: #757575;
font-family: 'Roboto Medium', sans-serif;
line-height: 40px;
vertical-align: text-bottom;
cursor: pointer; }
.Sessions-oauthButton:hover {
box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
text-decoration: none; }
.Sessions-githubButton {
background-image: url("/assets/1.0.0-assets.279/images/layout/sessions/GitHub-Mark-32px.png");
background-repeat: no-repeat;
background-position: 15px 11px;
background-size: 18px 18px; }
.Sessions-googleButton {
background-image: url("/assets/1.0.0-assets.279/images/layout/sessions/g-normal.png");
background-repeat: no-repeat;
background-position: 15px 11px;
background-size: 18px 18px; }
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html,
body {
min-width: 360px;
height: 100%;
margin: 0;
padding: 0; }
body {
background-color: #FFF;
color: #666;
font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 25px;
-webkit-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility; }
a {
color: #397DBA;
text-decoration: none; }
a:hover {
text-decoration: underline; }
strong {
font-weight: 700; }
em {
font-style: italic; }
abbr {
border-bottom: 1px dotted #DDD; }
button {
margin: 0;
border: 0;
outline: none;
cursor: pointer; }
.Browser {
width: 560px;
height: 430px;
margin: 20px 0;
border-radius: 4px;
background: #F2F2F2;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 2px 10px 6px rgba(0, 0, 0, 0.05); }
.Browser--oneclick {
height: 423px;
margin-top: 0; }
.Browser--oneclick .Browser-media {
height: 357px; }
.Browser-actions {
width: auto;
padding: 10px;
overflow: hidden;
list-style: none; }
.Browser-actionsItem {
width: 9px;
height: 9px;
margin-right: 5px;
float: left;
border-radius: 50%;
background: #DDD; }
.Browser-bar {
position: relative;
padding: 10px;
background: #DDD; }
.Browser-bar::before, .Browser-bar::after {
content: "";
position: absolute;
top: -24px;
width: 57px;
height: 27px;
border-radius: 8px;
background: #DDD; }
.Browser-bar::after {
left: 110px;
-webkit-transform: matrix(1, 0, 0.45, 1, -32, 7.133);
transform: matrix(1, 0, 0.45, 1, -32, 7.133); }
.Browser-bar::before {
left: 90px;
-webkit-transform: matrix(1, 0, 0.45, 1, -32, 7.133);
transform: matrix(1, 0, -0.45, 1, -32, 7.133); }
.Browser-address {
height: 17px;
border-radius: 12px;
background: #FFF;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.11); }
.Browser-media {
position: relative;
height: 364px;
overflow: hidden;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #FFF; }
.Progress {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 0;
height: 2px;
-webkit-animation: animationProgress 5s linear 0s infinite;
animation: animationProgress 5s linear 0s infinite;
background: #7ED321; }
.Btn {
display: inline-block;
transition: all 0.15s;
border-radius: 50px;
font-weight: 400;
line-height: 1;
text-align: center;
white-space: nowrap; }
.Btn:hover {
text-decoration: none; }
.Btn.has-border {
border-width: 2px;
border-style: solid; }
.Btn > span {
display: block;
border-radius: 50px;
font-weight: 400; }
.Btn--background {
background: #FFF; }
.Btn--m > span {
padding: 12px 20px;
font-size: 12px; }
.Btn--m.has-border > span {
padding: 10px 20px; }
.Btn--l > span {
padding: 16px 35px;
font-size: 14px; }
.Btn--l.has-border > span {
padding: 14px 35px; }
.Btn--white {
border-color: rgba(255, 255, 255, 0.3);
color: #FFF; }
.Btn--white:hover {
background: #FFF;
color: #333; }
.Btn--green {
border-color: #8EB83F;
color: #8EB83F; }
.Btn--green:hover {
background: #8EB83F;
color: #FFF; }
.Btn--green.is-highlight {
background: #8EB83F;
color: #FFF; }
.Btn--green.is-highlight:hover {
background: #FFF;
color: #8EB83F; }
.Btn--blue {
border-color: #397EB9;
color: #397EB9; }
.Btn--blue:hover {
background: #397EB9;
color: #FFF; }
.Btn--blue.is-highlight {
background: #397EB9;
color: #FFF; }
.Btn--blue.is-highlight:hover {
background: #FFF;
color: #397EB9; }
.Carrousel-nav {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
left: 0;
padding: 50px 0 10px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000', endColorstr='#99000000', GradientType=0); }
.Carrousel-navItem {
position: relative;
margin-left: 5px;
text-indent: -9000px; }
.Carrousel-navItem:first-child {
margin-left: 0; }
.Carrousel-navItem.is-active .Carrousel-navLink {
background: #364046; }
.Carrousel-navLink {
display: block;
position: relative;
z-index: 2;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFF; }
.Carrousel-slide {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
background-color: #F7F7F7; }
.Carrousel-slide.is-active {
-webkit-animation: slideIn 0.8s ease 0.3s;
animation: slideIn 0.8s ease 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Carrousel-slide.is-disabled picture,
.Carrousel-slide.is-disabled img {
opacity: 0.6; }
.Carrousel-slide--01 {
background: url("/assets/1.0.0-assets.279/images/layout/signup/slide-01-bg.png") no-repeat; }
.Carrousel-slide--01.is-active .Carrousel-card {
position: absolute;
width: 110px;
height: 110px;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
opacity: 0;
background-repeat: no-repeat;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Carrousel-card--01,
.Carrousel-card--06 {
background-image: url("/assets/1.0.0-assets.279/images/layout/signup/slide-01-card-01-bg.png"); }
.Carrousel-card--02,
.Carrousel-card--03,
.Carrousel-card--07 {
background-image: url("/assets/1.0.0-assets.279/images/layout/signup/slide-01-card-02-bg.png"); }
.Carrousel-card--04,
.Carrousel-card--05,
.Carrousel-card--08 {
background-image: url("/assets/1.0.0-assets.279/images/layout/signup/slide-01-card-03-bg.png"); }
.Carrousel-card--01 {
top: 160px;
left: 26px;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s; }
.Carrousel-card--02 {
top: 160px;
left: 156px;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s; }
.Carrousel-card--03 {
top: 160px;
left: 284px;
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.Carrousel-card--04 {
top: 160px;
left: 412px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s; }
.Carrousel-card--05 {
top: 293px;
left: 28px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s; }
.Carrousel-card--06 {
top: 293px;
left: 156px;
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s; }
.Carrousel-card--07 {
top: 293px;
left: 284px;
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s; }
.Carrousel-card--08 {
top: 293px;
left: 412px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s; }
.Carrousel-text {
position: relative;
height: 44px; }
.Carrousel-textItem {
position: absolute;
left: 20px;
width: 100%;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
opacity: 0;
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
font-weight: 200;
line-height: 42px;
text-align: center; }
.Carrousel-textItem.is-active {
left: 0;
opacity: 1; }
.Carrousel-textIcon {
display: inline-block;
width: 42px;
height: 42px;
margin-right: 20px;
vertical-align: middle; }
.Carrousel-slide--02 {
background: url("/assets/1.0.0-assets.279/images/layout/signup/slide-02-bg.png") no-repeat; }
.Carrousel-slide--02.is-active .Carrousel-slide--02-inner {
opacity: 1;
background-position: center; }
.Carrousel-slide--02-inner,
.Carrousel-slide--04-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: all 0.4s ease-out 1s;
transition: all 0.4s ease-out 1s;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-position: center 0; }
.Carrousel-slide--02-inner {
background-image: url("/assets/1.0.0-assets.279/images/layout/signup/slide-02-upload.png"); }
.Carrousel-slide--03 {
background: url("/assets/1.0.0-assets.279/images/layout/signup/slide-03-bg.png") no-repeat; }
.Carrousel-slide--03.is-active .Carrousel-point {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.Carrousel-slide--03.is-active .Carrousel-slide--03-inner {
right: 0; }
.Carrousel-slide--03-inner {
position: absolute;
z-index: 1001;
right: -120px;
bottom: 0;
width: 211px;
height: 330px;
-webkit-transition: all 0.3s ease-out 1.5s;
transition: all 0.3s ease-out 1.5s;
background: url("/assets/1.0.0-assets.279/images/layout/signup/slide-03-editor.png") no-repeat; }
.Carrousel-points {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.Carrousel-point {
position: absolute;
z-index: 1000;
width: 15px;
height: 15px;
-webkit-transform: scale(0);
transform: scale(0);
border: 2px solid #FFF;
border-radius: 50%;
opacity: 0;
background: #ED9259; }
.Carrousel-point--01 {
top: 150px;
left: 150px;
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s; }
.Carrousel-point--02 {
top: 252px;
left: 124px;
-webkit-animation-delay: 3s;
animation-delay: 3s; }
.Carrousel-point--03 {
top: 332px;
left: 124px;
-webkit-animation-delay: 3.3s;
animation-delay: 3.3s; }
.Carrousel-point--04 {
top: 274px;
left: 150px;
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s; }
.Carrousel-point--05 {
top: 304px;
left: 216px;
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s; }
.Carrousel-point--06 {
top: 246px;
left: 216px;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s; }
.Carrousel-point--07 {
top: 246px;
left: 246px;
-webkit-animation-delay: 4s;
animation-delay: 4s; }
.Carrousel-point--08 {
top: 238px;
left: 266px;
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s; }
.Carrousel-point--09 {
top: 216px;
left: 314px;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s; }
.Carrousel-point--10 {
top: 180px;
left: 294px;
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s; }
.Carrousel-slide--04 {
background: url("/assets/1.0.0-assets.279/images/layout/signup/slide-04-bg.png") no-repeat; }
.Carrousel-slide--04.is-active .Carrousel-slide--04-inner {
opacity: 1;
background-position: center; }
.Carrousel-slide--04-inner {
background-image: url("/assets/1.0.0-assets.279/images/layout/signup/slide-04-share.png"); }
@-webkit-keyframes slideIn {
0% {
-webkit-transform: translateX(-100%);
opacity: 0; }
100% {
-webkit-transform: translateX(0%);
opacity: 1; } }
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0; }
100% {
transform: translateX(0%);
opacity: 1; } }
@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0; }
100% {
-webkit-transform: scale(1);
opacity: 1; } }
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0; }
100% {
transform: scale(1);
opacity: 1; } }
@-webkit-keyframes animationProgress {
0% {
width: 0; }
100% {
width: 100%; } }
@keyframes animationProgress {
0% {
width: 0; }
100% {
width: 100%; } }
@-webkit-keyframes slideOut {
0% {
-webkit-transform: translateX(0);
opacity: 1; }
100% {
-webkit-transform: translateX(-100%);
opacity: 0; } }
@keyframes slideOut {
0% {
transform: translateX(0);
opacity: 1; }
100% {
transform: translateX(-100%);
opacity: 0; } }
.Navbar::before,
.Navbar::after {
content: " ";
display: table; }
.Navbar::after {
clear: both; }
.Navbar {
padding: 20px 0;
text-align: center; }
.Navbar--left {
text-align: left; }
.Navbar-brand {
display: flex;
justify-content: center;
max-width: 92px;
height: 48px;
margin: 0 auto;
margin-bottom: 40px; }
.Navbar-brand img {
height: 100%; }
.Navbar-menu {
float: right; }
.Navbar-menuItem {
position: relative;
margin: -20px 0 -20px 20px;
padding: 20px 0;
float: left;
color: #999; }
.Navbar-menuItem:first-child {
margin-left: 0; }
.Navbar-menuItem.is-selected {
color: #333; }
.Navbar-menuItem.is-selected::after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
background: #397DBA; }
.Navbar-text {
margin-top: 18px;
color: rgba(255, 255, 255, 0.5);
font-size: 16px; }
.Navbar-textLink {
color: rgba(255, 255, 255, 0.5);
text-decoration: underline; }
.Navbar-textLink:hover {
color: WHITE; }
.Navbar-link {
color: #FFF; }
/* FONT FACE */
@font-face {
font-family: 'Roboto Medium';
font-style: normal;
font-weight: 500;
src: font-files("Roboto-Medium.woff"); }
.Sessions-oauthHeader {
padding-top: 16px;
font-size: 12px;
font-weight: 600; }
.Sessions-oauthContainer {
display: flex;
justify-content: space-between; }
.Sessions-oauthContainer .Sessions-oauthButton {
margin-left: 8px; }
.Sessions-oauthContainer .Sessions-oauthButton:first-child {
margin-left: 0; }
.Sessions-oauthButton {
flex: 1;
width: 100%;
min-width: 156px;
max-width: 320px;
height: 40px;
padding-left: 52px;
transition: all 0.15s;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
background: #FFF;
box-shadow: 0 0.5px rgba(0, 0, 0, 0.2);
color: #757575;
font-family: 'Roboto Medium', sans-serif;
line-height: 40px;
vertical-align: text-bottom;
cursor: pointer; }
.Sessions-oauthButton:hover {
box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
text-decoration: none; }
.Sessions-githubButton {
background-image: url("/assets/1.0.0-assets.279/images/layout/sessions/GitHub-Mark-32px.png");
background-repeat: no-repeat;
background-position: 15px 11px;
background-size: 18px 18px; }
.Sessions-googleButton {
background-image: url("/assets/1.0.0-assets.279/images/layout/sessions/g-normal.png");
background-repeat: no-repeat;
background-position: 15px 11px;
background-size: 18px 18px; }
.Spinner {
position: relative;
margin: 0 auto;
animation: load8 1.1s infinite linear;
border-top: 2px solid #DDD;
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
border-left: 2px solid #0090D7; }
.Spinner,
.Spinner::after {
width: 36px;
height: 36px;
border-radius: 50%; }
.Spinner--formIcon,
.Spinner--formIcon::after {
position: absolute;
width: 12px;
height: 12px; }
.Spinner.Spinner--center {
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 -18px; }
@keyframes load8 {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.Sessions {
display: flex;
flex-direction: column;
min-height: 100vh;
background-size: cover; }
.Sessions-navy {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #162945;
background-size: cover; }
.Sessions-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 180px; }
.Sessions-centered div.header, .Sessions-centered div.footer {
text-align: center;
width: 562px; }
.Sessions-centered div.footer {
margin-top: 35px; }
.Sessions-centered h1.Sessions-title {
font-size: 30px;
font-weight: 700;
letter-spacing: -1px;
line-height: 31px;
margin: 0; }
.Sessions-centered p.Sessions-text {
color: #b1b8c1;
font-size: 13px;
font-weight: 400;
line-height: 20px;
margin: 15px 0; }
.Sessions-centered p.Sessions-link a {
color: #1785fb;
font-size: 13px;
font-weight: 400; }
.Sessions-centered p.Sessions-text--qrCode {
font-size: 11px; }
.Sessions-centered img.qr, .Sessions-centered p.Sessions-text--qrCode {
width: 180px; }
.Sessions-centered p.Sessions-text--sharedSecret {
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
text-align: center;
line-height: 220px; }
.Sessions-centered .Sessions-sharedSecretContainer {
width: 100%;
background: rgba(255, 255, 255, 0.1);
height: 244px;
border-radius: 4px; }
.Sessions-centered p.Sessions-text--code {
font-weight: 500;
font-size: 12px; }
.Sessions-centered p.Sessions-text--code a {
text-decoration: underline; }
.Sessions-noMargin {
margin: 0; }
.Sessions-content {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
padding: 40px 0; }
.Sessions-inner {
display: flex;
justify-content: space-between; }
.Sessions .Sessions-title {
color: #162945;
font-size: 32px;
font-weight: 300;
line-height: 48px; }
.Sessions-navy .Sessions-title {
color: #FFF;
font-size: 32px;
font-weight: 300;
line-height: 48px; }
.Sessions-logoContainer {
display: block; }
.Sessions .Sessions-description {
margin-bottom: 16px;
color: #979EA1;
font-size: 13px;
font-weight: 200;
line-height: 20px;
text-align: center; }
.Sessions .Sessions-description .Sessions-text--code, .Sessions .Sessions-description .Sessions-text--sharedSecret {
color: #979EA1; }
.Sessions .Sessions-description a {
color: #1785FB;
text-decoration: none; }
.Sessions .Sessions-description a:hover {
text-decoration: underline; }
.Sessions-navy .Sessions-description {
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
font-weight: 200;
line-height: 20px;
text-align: center; }
.Sessions-navy .Sessions-description .Sessions-text--code, .Sessions-navy .Sessions-description .Sessions-text--sharedSecret {
color: #FFF; }
.Sessions-navy .Sessions-description a {
color: #FFF;
text-decoration: none; }
.Sessions-navy .Sessions-description a:hover {
text-decoration: underline; }
.Sessions-loggedin,
.Sessions-notloggedin,
.Sessions-toggle {
display: none; }
.Sessions-loggedin.is-active,
.Sessions-notloggedin.is-active,
.Sessions-toggle.is-active {
display: block; }
.users.create .Sessions-notloggedin {
display: block; }
.users.create .Sessions-loggedin {
display: none; }
.Sessions-left {
display: flex;
flex-direction: column;
width: 320px; }
.Sessions-leftInner {
width: 100%;
margin: auto; }
.Sessions-right {
width: 560px; }
.Sessions-field {
position: relative;
width: 100%;
margin-bottom: 5px;
float: left; }
.Sessions-field:last-child {
margin-bottom: 0; }
.Sessions-input {
width: 100%;
height: 48px;
padding: 10px;
border: 1px solid #EEE;
outline: none;
background: #FFF;
color: #162746;
font-size: 14px;
font-weight: 300; }
.Sessions-input::-webkit-input-placeholder {
color: #B1B8C1; }
.Sessions-input:-moz-placeholder {
color: #B1B8C1; }
.Sessions-input::-moz-placeholder {
color: #B1B8C1; }
.Sessions-input:-ms-input-placeholder {
color: #B1B8C1; }
.Sessions-input:focus {
border: 1px solid #1785FB; }
.Sessions-input.inputWithError {
border-color: #FFF; }
.Sessions-input.inputWithError:focus {
border: 1px solid #1785FB; }
.Sessions-navy-input {
width: 100%;
height: 48px;
padding: 10px;
border: 1px solid #0E1C2E;
outline: none;
background: #0E1C2E;
color: #FFF;
font-size: 14px;
font-weight: 300; }
.Sessions-navy-input::-webkit-input-placeholder {
color: #B1B8C1; }
.Sessions-navy-input:-moz-placeholder {
color: #B1B8C1; }
.Sessions-navy-input::-moz-placeholder {
color: #B1B8C1; }
.Sessions-navy-input:-ms-input-placeholder {
color: #B1B8C1; }
.Sessions-navy-input:focus {
border: 1px solid #1785FB; }
.Sessions-navy-input.inputWithError {
border-color: #0E1C2E; }
.Sessions-navy-input.inputWithError:focus {
border: 1px solid #1785FB; }
.Sessions-input.topBorderRadius,
.Sessions-navy-input.topBorderRadius {
border-radius: 4px 4px 0 0; }
.Sessions-input.bottomBorderRadius,
.Sessions-navy-input.bottomBorderRadius {
border-radius: 0 0 4px 4px; }
.Sessions-input.withBorderRadius,
.Sessions-navy-input.withBorderRadius {
border-radius: 4px; }
.Sessions-button:hover .Loading-itemInner, .Sessions-button:active .Loading-itemInner {
background: #8EB83F; }
.Sessions-submitButton {
width: 100%;
height: 48px;
margin: 2px 0 7px;
border-radius: 4px;
background-color: #F74D51;
color: #FFF;
font-size: 12px;
text-transform: uppercase; }
.Sessions-submitButton:hover {
background-color: #BB3A3D; }
.Sessions-text {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
font-weight: 200; }
.Sessions-text a {
color: #1785FB;
text-decoration: none; }
.Sessions-text a:hover {
text-decoration: underline; }
.Sessions-navy .Sessions-text a {
color: #FFF; }
.Sessions .Sessions-inputLinkAside {
position: absolute;
top: 0;
right: 0;
height: 48px;
margin-right: 10px;
color: #1785FB;
font-size: 14px;
font-weight: 200;
line-height: 50px; }
.Sessions .Sessions-inputLinkAside a {
color: #1785FB; }
.Sessions-navy .Sessions-inputLinkAside {
position: absolute;
top: 0;
right: 0;
height: 48px;
margin-right: 10px;
color: #1785FB;
font-size: 14px;
font-weight: 200;
line-height: 50px; }
.Sessions-navy .Sessions-inputLinkAside a {
color: #FFF; }
.Sessions-text--forgotButton {
line-height: 41px; }
.Sessions-text--footer {
margin-bottom: 16px;
padding: 0 20px;
color: #979EA1; }
.Sessions-text--footer:last-child {
margin-bottom: 0; }
.Sessions-fieldError {
position: absolute;
top: 14px;
right: -32px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #F24440;
color: #FFF;
font-weight: 400;
line-height: 22px;
text-align: center; }
.Sessions-fieldError:hover {
cursor: pointer; }
.Loading-item {
display: inline-block;
position: relative;
width: 8px;
height: 8px;
margin-left: 1px;
list-style-type: none; }
.Loading-item:first-child {
margin-left: 0; }
.Loading-itemInner {
display: block;
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
-webkit-animation-name: loading;
animation-name: loading;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 50%;
opacity: 0.2;
background: #FFF; }
.Loading-itemInner--01 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.Loading-itemInner--02 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.Loading-itemInner--03 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.tipsy {
font-size: 13px; }
.Sessions-referrer {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
width: 300px;
height: 60px;
margin-top: -30px;
margin-left: -150px;
border-radius: 4px;
background: #FFF;
text-align: center; }
.Sessions-referrer picture,
.Sessions-referrer img {
display: inline-block;
width: 100px;
height: 50px;
vertical-align: middle; }
.Sessions-referrerItem {
display: inline-block;
width: 100px;
height: 50px; }
.Sessions-footer {
margin-bottom: 32px; }
@media (max-width: 960px) {
.Sessions-inner {
justify-content: center; }
.Sessions-right {
display: none; } }
@media (max-width: 425px) {
.Sessions-fieldError {
display: none; }
.Sessions-input.inputWithError {
border-color: #F24440; } }
@media (max-width: 960px) {
.Sessions-inner {
justify-content: center; }
.Sessions-right {
display: none; } }
@-webkit-keyframes loading {
0% {
-webkit-transform: scale3d(1, 1, 1);
opacity: 0.2; }
50% {
-webkit-transform: scale3d(1.4, 1.4, 1);
opacity: 0.6; }
100% {
-webkit-transform: scale3d(1, 1, 1);
opacity: 0.2; } }
@keyframes loading {
0% {
transform: scale3d(1, 1, 1);
opacity: 0.2; }
50% {
transform: scale3d(1.4, 1.4, 1);
opacity: 0.6; }
100% {
transform: scale3d(1, 1, 1);
opacity: 0.2; } }
.u-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px; }
.u-left {
float: left; }
.u-right {
float: right; }
.u-pa {
position: absolute; }
.u-pr {
position: relative; }
.u-ov {
overflow: hidden; }
.u-iblock {
display: inline-block; }
.u-ilist > li {
display: inline-block; }
.u-malign {
vertical-align: middle; }
.u-talign {
vertical-align: top; }
.u-balign {
vertical-align: bottom; }
.u-txt-center {
text-align: center; }
.u-txt-left {
text-align: left; }
.u-txt-right {
text-align: right; }
.u-tupper {
text-transform: uppercase; }
.u-valign::before {
content: "";
display: inline-block;
height: 100%;
margin-left: -5px;
vertical-align: middle; }
.u-vspace-xl {
margin-bottom: 60px; }
.u-vspace-l {
margin-bottom: 40px; }
.u-vspace-m {
margin-bottom: 25px; }
.u-vspace-s {
margin-bottom: 12px; }
.u-vspace-xs {
margin-bottom: 8px; }
.u-lspace-xl {
margin-left: 60px; }
.u-lspace-l {
margin-left: 40px; }
.u-lspace-m {
margin-left: 25px; }
.u-lspace-s {
margin-left: 12px; }
.u-lspace-xs {
margin-left: 8px; }
.u-rspace-xl {
margin-right: 60px; }
.u-rspace-l {
margin-right: 40px; }
.u-rspace-m {
margin-right: 25px; }
.u-rspace-s {
margin-right: 12px; }
.u-rspace-xs {
margin-right: 8px; }
.u-tspace-xl {
margin-top: 60px; }
.u-tspace-l {
margin-top: 40px; }
.u-tspace-m {
margin-top: 25px; }
.u-tspace-s {
margin-top: 12px; }
.u-tspace-xs {
margin-top: 8px; }
.u-img-circle {
border-radius: 50%; }
/*# sourceMappingURL=sessions.css.map*/ 
