/* FONT FACE */
.u-flex {
  display: flex; }

.u-inlineflex {
  display: inline-flex; }

.u-flex__direction--row {
  flex-direction: row !important; }

.u-flex__direction--column {
  flex-direction: column !important; }

.u-flex__justify--start {
  justify-content: flex-start !important; }

.u-flex__justify--end {
  justify-content: flex-end !important; }

.u-flex__justify--between {
  justify-content: space-between !important; }

.u-flex__justify--around {
  justify-content: space-around !important; }

.u-flex__justify--center {
  justify-content: center !important; }

.u-flex__align--start {
  align-items: flex-start !important; }

.u-flex__self--start {
  align-items: flex-start !important; }

.u-flex__align--end {
  align-items: flex-end !important; }

.u-flex__self--end {
  align-items: flex-end !important; }

.u-flex__align--center {
  align-items: center !important; }

.u-flex__self--center {
  align-items: center !important; }

.u-flex__align--baseline {
  align-items: baseline !important; }

.u-flex__self--baseline {
  align-items: baseline !important; }

.u-flex__align--stretch {
  align-items: stretch !important; }

.u-flex__self--stretch {
  align-items: stretch !important; }

.u-flex__grow--1 {
  flex-grow: 1; }

.u-p--0 {
  padding: 0 !important; }

.u-pt--0 {
  padding-top: 0px; }

.u-pr--0 {
  padding-right: 0px; }

.u-pb--0 {
  padding-bottom: 0px; }

.u-pl--0 {
  padding-left: 0px; }

.u-pt--4 {
  padding-top: 4px; }

.u-pr--4 {
  padding-right: 4px; }

.u-pb--4 {
  padding-bottom: 4px; }

.u-pl--4 {
  padding-left: 4px; }

.u-pt--8 {
  padding-top: 8px; }

.u-pr--8 {
  padding-right: 8px; }

.u-pb--8 {
  padding-bottom: 8px; }

.u-pl--8 {
  padding-left: 8px; }

.u-pt--10 {
  padding-top: 10px; }

.u-pr--10 {
  padding-right: 10px; }

.u-pb--10 {
  padding-bottom: 10px; }

.u-pl--10 {
  padding-left: 10px; }

.u-pt--12 {
  padding-top: 12px; }

.u-pr--12 {
  padding-right: 12px; }

.u-pb--12 {
  padding-bottom: 12px; }

.u-pl--12 {
  padding-left: 12px; }

.u-pt--16 {
  padding-top: 16px; }

.u-pr--16 {
  padding-right: 16px; }

.u-pb--16 {
  padding-bottom: 16px; }

.u-pl--16 {
  padding-left: 16px; }

.u-pt--20 {
  padding-top: 20px; }

.u-pr--20 {
  padding-right: 20px; }

.u-pb--20 {
  padding-bottom: 20px; }

.u-pl--20 {
  padding-left: 20px; }

.u-pt--24 {
  padding-top: 24px; }

.u-pr--24 {
  padding-right: 24px; }

.u-pb--24 {
  padding-bottom: 24px; }

.u-pl--24 {
  padding-left: 24px; }

.u-pt--28 {
  padding-top: 28px; }

.u-pr--28 {
  padding-right: 28px; }

.u-pb--28 {
  padding-bottom: 28px; }

.u-pl--28 {
  padding-left: 28px; }

.u-pt--32 {
  padding-top: 32px; }

.u-pr--32 {
  padding-right: 32px; }

.u-pb--32 {
  padding-bottom: 32px; }

.u-pl--32 {
  padding-left: 32px; }

.u-pt--36 {
  padding-top: 36px; }

.u-pr--36 {
  padding-right: 36px; }

.u-pb--36 {
  padding-bottom: 36px; }

.u-pl--36 {
  padding-left: 36px; }

.u-pt--40 {
  padding-top: 40px; }

.u-pr--40 {
  padding-right: 40px; }

.u-pb--40 {
  padding-bottom: 40px; }

.u-pl--40 {
  padding-left: 40px; }

.u-pt--48 {
  padding-top: 48px; }

.u-pr--48 {
  padding-right: 48px; }

.u-pb--48 {
  padding-bottom: 48px; }

.u-pl--48 {
  padding-left: 48px; }

.u-pt--60 {
  padding-top: 60px; }

.u-pr--60 {
  padding-right: 60px; }

.u-pb--60 {
  padding-bottom: 60px; }

.u-pl--60 {
  padding-left: 60px; }

.u-pt--64 {
  padding-top: 64px; }

.u-pr--64 {
  padding-right: 64px; }

.u-pb--64 {
  padding-bottom: 64px; }

.u-pl--64 {
  padding-left: 64px; }

.u-pt--72 {
  padding-top: 72px; }

.u-pr--72 {
  padding-right: 72px; }

.u-pb--72 {
  padding-bottom: 72px; }

.u-pl--72 {
  padding-left: 72px; }

.u-pt--80 {
  padding-top: 80px; }

.u-pr--80 {
  padding-right: 80px; }

.u-pb--80 {
  padding-bottom: 80px; }

.u-pl--80 {
  padding-left: 80px; }

.u-pt--96 {
  padding-top: 96px; }

.u-pr--96 {
  padding-right: 96px; }

.u-pb--96 {
  padding-bottom: 96px; }

.u-pl--96 {
  padding-left: 96px; }

.u-pt--120 {
  padding-top: 120px; }

.u-pr--120 {
  padding-right: 120px; }

.u-pb--120 {
  padding-bottom: 120px; }

.u-pl--120 {
  padding-left: 120px; }

.u-m--0 {
  margin: 0 !important; }

.u-mt--0 {
  margin-top: 0px; }

.u-mr--0 {
  margin-right: 0px; }

.u-mb--0 {
  margin-bottom: 0px; }

.u-ml--0 {
  margin-left: 0px; }

.u-mt--4 {
  margin-top: 4px; }

.u-mr--4 {
  margin-right: 4px; }

.u-mb--4 {
  margin-bottom: 4px; }

.u-ml--4 {
  margin-left: 4px; }

.u-mt--8 {
  margin-top: 8px; }

.u-mr--8 {
  margin-right: 8px; }

.u-mb--8 {
  margin-bottom: 8px; }

.u-ml--8 {
  margin-left: 8px; }

.u-mt--10 {
  margin-top: 10px; }

.u-mr--10 {
  margin-right: 10px; }

.u-mb--10 {
  margin-bottom: 10px; }

.u-ml--10 {
  margin-left: 10px; }

.u-mt--12 {
  margin-top: 12px; }

.u-mr--12 {
  margin-right: 12px; }

.u-mb--12 {
  margin-bottom: 12px; }

.u-ml--12 {
  margin-left: 12px; }

.u-mt--16 {
  margin-top: 16px; }

.u-mr--16 {
  margin-right: 16px; }

.u-mb--16 {
  margin-bottom: 16px; }

.u-ml--16 {
  margin-left: 16px; }

.u-mt--20 {
  margin-top: 20px; }

.u-mr--20 {
  margin-right: 20px; }

.u-mb--20 {
  margin-bottom: 20px; }

.u-ml--20 {
  margin-left: 20px; }

.u-mt--24 {
  margin-top: 24px; }

.u-mr--24 {
  margin-right: 24px; }

.u-mb--24 {
  margin-bottom: 24px; }

.u-ml--24 {
  margin-left: 24px; }

.u-mt--28 {
  margin-top: 28px; }

.u-mr--28 {
  margin-right: 28px; }

.u-mb--28 {
  margin-bottom: 28px; }

.u-ml--28 {
  margin-left: 28px; }

.u-mt--32 {
  margin-top: 32px; }

.u-mr--32 {
  margin-right: 32px; }

.u-mb--32 {
  margin-bottom: 32px; }

.u-ml--32 {
  margin-left: 32px; }

.u-mt--36 {
  margin-top: 36px; }

.u-mr--36 {
  margin-right: 36px; }

.u-mb--36 {
  margin-bottom: 36px; }

.u-ml--36 {
  margin-left: 36px; }

.u-mt--40 {
  margin-top: 40px; }

.u-mr--40 {
  margin-right: 40px; }

.u-mb--40 {
  margin-bottom: 40px; }

.u-ml--40 {
  margin-left: 40px; }

.u-mt--48 {
  margin-top: 48px; }

.u-mr--48 {
  margin-right: 48px; }

.u-mb--48 {
  margin-bottom: 48px; }

.u-ml--48 {
  margin-left: 48px; }

.u-mt--60 {
  margin-top: 60px; }

.u-mr--60 {
  margin-right: 60px; }

.u-mb--60 {
  margin-bottom: 60px; }

.u-ml--60 {
  margin-left: 60px; }

.u-mt--64 {
  margin-top: 64px; }

.u-mr--64 {
  margin-right: 64px; }

.u-mb--64 {
  margin-bottom: 64px; }

.u-ml--64 {
  margin-left: 64px; }

.u-mt--72 {
  margin-top: 72px; }

.u-mr--72 {
  margin-right: 72px; }

.u-mb--72 {
  margin-bottom: 72px; }

.u-ml--72 {
  margin-left: 72px; }

.u-mt--80 {
  margin-top: 80px; }

.u-mr--80 {
  margin-right: 80px; }

.u-mb--80 {
  margin-bottom: 80px; }

.u-ml--80 {
  margin-left: 80px; }

.u-mt--96 {
  margin-top: 96px; }

.u-mr--96 {
  margin-right: 96px; }

.u-mb--96 {
  margin-bottom: 96px; }

.u-ml--96 {
  margin-left: 96px; }

.u-mt--120 {
  margin-top: 120px; }

.u-mr--120 {
  margin-right: 120px; }

.u-mb--120 {
  margin-bottom: 120px; }

.u-ml--120 {
  margin-left: 120px; }

.u-transparent {
  opacity: 0; }

.u-inner {
  margin: 0 auto;
  padding: 0 12px; }

.u-capitalize {
  text-transform: capitalize; }

.u-breakLongWords {
  word-break: break-word; }

.u-ellipsLongText {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.u-hide,
.u-showOnMobile,
.u-showOnTablet {
  display: none !important; }

.u-disabled {
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */ }

.u-iblock {
  display: inline-block; }

.u-txt-center {
  text-align: center; }

.u-txt-left {
  text-align: left; }

.u-txt-right {
  text-align: right; }

.u-whiteSpace-nowrap {
  white-space: nowrap; }

.u-valign::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.u-malign {
  vertical-align: middle; }

.u-vspace-xxl {
  margin-bottom: 120px; }

.u-vspace-xl {
  margin-bottom: 60px; }

.u-vspace-l {
  margin-bottom: 40px; }

.u-vspace-m {
  margin-bottom: 24px; }

.u-vspace-s {
  margin-bottom: 12px; }

.u-vspace-xs {
  margin-bottom: 8px; }

.u-tspace-xl {
  margin-top: 60px; }

.u-tspace-l {
  margin-top: 40px; }

.u-tspace-m {
  margin-top: 24px; }

.u-tspace-s {
  margin-top: 12px; }

.u-tspace-xs {
  margin-top: 8px; }

.u-rspace-xl {
  margin-right: 60px; }

.u-rspace-l {
  margin-right: 40px; }

.u-rspace-m {
  margin-right: 24px; }

.u-rspace-s {
  margin-right: 12px; }

.u-rspace-xs {
  margin-right: 8px; }

.u-tspace--20 {
  margin-top: 20px; }

.u-rspace--20 {
  margin-right: 20px; }

.u-vspace--20 {
  margin-bottom: 20px; }

.u-lspace-28 {
  margin-left: 28px; }

.u-lspace-23 {
  margin-left: 23px; }

.u-tupper {
  text-transform: uppercase; }

.u-border-bottom {
  box-shadow: 0px 1px 0px #dddddd; }

@media (min-width: 960px) {
  .u-inner {
    width: 940px;
    padding: 0; } }

@media (max-width: 760px) {
  .u-hideOnMobile {
    display: none !important; }
  .u-showOnMobile {
    display: inline-block !important; } }

@media (max-width: 960px) {
  .u-hideOnTablet {
    display: none !important; }
  .u-showOnTablet {
    display: inline-block !important; } }

@media (min-width: 761px) {
  .u-block--mobile {
    display: none !important; } }

@media (max-width: 760px) {
  .u-mobile-hide {
    display: none !important; }
  .u-block--mobile {
    display: block !important; } }

/* FONT FACE */
.CDB-IconFont--super::before {
  vertical-align: super; }

.CDB-IconFont-play::before {
  vertical-align: 6px; }

.CDB-IconFont.CDB-IconFont--withLabel {
  margin-right: 5px; }

.CDB-IconFont.CDB-IconFont--withLabel::before {
  display: flex;
  align-items: center; }

.CDB-IconFont.CDB-IconFont--small::before {
  font-size: 9px; }

.CDB-IconFont.CDB-IconFont--big::before {
  font-size: 19px; }

.FormAccount-Section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 48px; }

.FormAccount-container {
  margin-top: 25px; }

.FormAccount-container--short {
  margin-top: 16px; }

.FormAccount-Content {
  display: block;
  position: relative;
  width: 65%; }

.FormAccount-title {
  display: inline-block;
  width: 100%;
  margin: 0 0 28px; }

.FormAccount-titleHeader {
  display: block;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
  color: #333333; }

.FormAccount-titleText {
  color: #666666; }

.FormAccount-titleText--negative {
  color: #f15743; }

.FormAccount-subtitleText {
  font-size: 75%; }

.FormAccount-list {
  padding: 0 0 20px 160px;
  list-style-type: disc;
  color: #666666; }

.FormAccount-listItem {
  color: #666666; }

.VerticalAligned--FormRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.FormAccount-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 0 32px; }

.FormAccount-row--smallMarginBottom {
  margin-bottom: 16px; }

.FormAccount-row--wideMarginBottom {
  margin-bottom: 100px; }

.FormAccount-title + .FormAccount-row {
  padding-top: 0; }

.FormAccount-row.FormAccount-row--centered {
  justify-content: center; }

.FormAccount-row.FormAccount-row--step {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 28px; }
  .FormAccount-row.FormAccount-row--step::before {
    content: '';
    margin-right: 12px;
    padding: 5px 10px;
    border: 1px solid #dddddd;
    border-radius: 50px;
    color: #666666; }
  .FormAccount-row.FormAccount-row--step:first-child::before {
    content: '1'; }
  .FormAccount-row.FormAccount-row--step:nth-child(2)::before {
    content: '2'; }
  .FormAccount-row.FormAccount-row--step:nth-child(3)::before {
    content: '3'; }
  .FormAccount-row.FormAccount-row--step:nth-child(4)::before {
    content: '4'; }
  .FormAccount-row.FormAccount-row--step:nth-child(5)::before {
    content: '5'; }

.FormAccount-row.FormAccount-row--step:first-child {
  padding-top: 0; }

.FormAccount-row.FormAccount-row--step.is-done::before {
  border-color: #8EB83F;
  color: #8EB83F; }

.FormAccount-row.has-label {
  flex-direction: row;
  margin: 0;
  margin-left: -140px;
  padding: 10px 0; }
  .FormAccount-row.has-label .FormAccount-rowLabel {
    width: 140px;
    margin-right: 20px;
    line-height: 40px;
    text-align: right; }

.FormAccount-rowLabel {
  margin-bottom: 8px;
  text-align: left; }

.FormAccount-rowLabel.FormAccount-rowLabel--leftAligned {
  width: 140px;
  margin-right: 20px;
  text-align: left; }

.FormAccount-label {
  color: #666666;
  text-transform: capitalize; }

.FormAccount-label.FormAccount-label--verticalAlignTop {
  line-height: inherit; }

.FormAccount-label--multipleLines {
  line-height: 20px; }

.FormAccount-label.FormAccount-label--large {
  font-size: 15px; }

.FormAccount-label.FormAccount-label--step {
  flex-grow: 1; }

.FormAccount-rowPreview {
  width: 600px; }

.FormAccount-separator {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 16px;
  background-color: rgba(0, 0, 0, 0.1); }

.FormAccount-separator--marginTop {
  margin-top: 30px; }

.FormAccount-rowData {
  display: flex;
  position: relative;
  align-items: center; }

.FormAccount-rowData.in-block {
  flex-direction: column;
  align-items: flex-start; }

.FormAccount-planTag {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #8fb83f;
  color: #FFF; }

.FormAccount-rowData.FormAccount-rowData--alignLeft {
  justify-content: flex-start; }

.FormAccount-rowData--withLabel {
  margin-bottom: 30px; }

.FormAccount-rowData--noMargin {
  margin: 0; }

.FormAccount-rowData--full {
  width: 100%; }

.FormAccount-rowData--longer {
  width: 460px; }

.FormAccount-rowData--long {
  width: 380px; }

.FormAccount-rowData--med {
  width: 300px; }

.FormAccount-rowData--short {
  width: 170px; }

.FormAccount-rowData--step {
  width: 260px;
  margin-right: 0; }

.FormAccount-rowDataExtra {
  position: absolute;
  right: -52px; }

.FormAccount-rowData ~ .FormAccount-rowDataExtra {
  top: 10px; }

.FormAccount-rowData--step ~ .FormAccount-rowDataExtra {
  top: 0; }

.FormAccount-input {
  position: relative;
  z-index: 2;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #CCC;
  border-radius: 4px;
  outline: none;
  color: #666; }
  .FormAccount-input:focus {
    border-color: #999; }

.FormAccount-input.FormAccount-input--error {
  border-color: rgba(221, 59, 55, 0.6); }

.FormAccount-input.FormAccount-input--error:focus,
.FormAccount-input.FormAccount-input--error:hover {
  border-color: #dd3b37; }

.FormAccount-input::-webkit-input-placeholder {
  color: #AAA;
  font-style: italic; }

.FormAccount-input:-moz-placeholder {
  color: #AAA;
  font-style: italic; }

.FormAccount-input::-moz-placeholder {
  color: #AAA;
  font-style: italic; }

.FormAccount-input:-ms-input-placeholder {
  color: #AAA;
  font-style: italic; }

.FormAccount-input--totalwidth {
  width: 100% !important; }

.field_with_errors {
  width: 100%; }

.FormAccount-input--longer {
  width: 434px !important; }

.FormAccount-input--long {
  width: 354px !important; }

.FormAccount-input--med {
  width: 274px !important; }

.FormAccount-input--small {
  width: 131px !important; }

.FormAccount-input--short {
  width: 114px !important; }

.FormAccount-input--number {
  width: 54px !important; }

.FormAccount-input.has-icon {
  padding: 0 42px 0 12px; }
  .FormAccount-input.has-icon.FormAccount-input--longer {
    width: 414px; }
  .FormAccount-input.has-icon.FormAccount-input--long {
    width: 324px; }
  .FormAccount-input.has-icon.FormAccount-input--short {
    width: 92px; }
  .FormAccount-input.has-icon.FormAccount-input--longerMorePadding {
    width: 356px;
    padding-right: 100px; }

.FormAccount-input.has-submit {
  padding: 0 95px 0 12px; }
  .FormAccount-input.has-submit.FormAccount-input--longer {
    width: 351px; }
  .FormAccount-input.has-submit.FormAccount-input--long {
    width: 297px; }

.FormAccount-inputSubmit {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 5px;
  height: 28px;
  padding: 0 18px;
  background: none; }

.FormAccount-inputIcon {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 14px;
  color: #cccccc;
  font-size: 16px; }

.FormAccount-inputIcon--clock {
  top: 11px; }

.FormAccount-inputIcon--noIcon {
  width: 100%;
  height: 100%;
  color: #cccccc;
  font-size: 13px;
  line-height: 100px;
  text-align: center;
  text-transform: uppercase; }

.FormAccount-inputError {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 38px;
  padding: 0 12px;
  transition: top 200ms ease-in-out;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: #FFF4F4;
  color: #f15743;
  line-height: 38px; }

.FormAccount-inputError.is-visible {
  top: 36px; }

.FormAccount-input.is-disabled {
  background: #f9f9f9; }

.FormAccount-input.is-invalid {
  border-color: #f15743; }

.FormAccount-input--noBorder {
  border: none; }

.FormAccount-input--noBkg,
.FormAccount-input--noBkg.is-disabled {
  background: transparent; }

.FormAccount-textarea {
  min-height: 60px;
  max-height: 110px;
  padding: 9px 12px; }

.FormAccount-textarea.no-resize {
  resize: none; }

.FormAccount-textarea--longHeight {
  height: 90px; }

.FormAccount-textarea.is-disabled {
  color: #cccccc; }

.FormAccount-copyIcon {
  position: relative;
  top: 0;
  right: 30px;
  font-size: 18px; }

.FormAccount-copyIcon.hover {
  color: #666666; }

.FormAccount-text--preview {
  color: #999999;
  font-size: 13px;
  line-height: 22px; }

.FormAccount-row.FormAccount-rowHorizontal {
  flex-direction: row;
  justify-content: space-between; }

.FormAccount-userRole {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 20px; }

.FormAccount-avatarPreview {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #FFF; }

.FormAccount-avatarPreviewImage {
  position: relative;
  max-width: 100px;
  border-radius: 4px;
  background: #FFF; }

.FormAccount-avatarPreviewLoader {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4); }

.Spinner.FormAccount-avatarPreviewSpinner {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px; }

.FormAccount-fileAvatar {
  margin-left: 20px; }

.FormAccount-avatar .input-group {
  position: absolute;
  top: 14px;
  left: 114px; }

.FormAccount-avatar .form-control {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  border: none;
  color: #999999; }

.FormAccount-avatar .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  color: #3aa9e3;
  font-size: 12px; }
  .FormAccount-avatar .btn:hover {
    color: #227dbd;
    text-decoration: underline;
    cursor: pointer; }

.FormAccount-avatar .btn[disabled] {
  color: #cccccc; }
  .FormAccount-avatar .btn[disabled]:hover {
    color: #cccccc;
    text-decoration: none;
    cursor: default; }

.FormAccount-link {
  color: #1181FB;
  font-weight: normal; }
  .FormAccount-link:hover {
    text-decoration: underline;
    cursor: pointer; }

.FormAccount-link.is-disabled {
  color: #cccccc;
  text-decoration: none; }
  .FormAccount-link.is-disabled:hover {
    color: #cccccc;
    cursor: default; }

.FormAccount-file:hover .Button--main {
  background: #007FBD; }

.FormAccount-file:hover .Button--negative {
  background-color: #b93f37; }

.FormAccount-file input[type='file'] {
  position: absolute;
  top: 0;
  left: -118px;
  margin: 0;
  -moz-transform: translate(26px, 0) scale(1);
  border: solid transparent;
  border-width: 1px 0 24px;
  opacity: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  direction: ltr; }

.FormAccount-fileLabel {
  width: 300px;
  color: #999999;
  font-size: 13px; }

.FormAccount-fileLabel--error {
  display: none;
  color: #f15743; }

.FormAccount .dz-preview {
  display: none; }

.FormAccount-fileDropzone {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px dashed #dddddd;
  border-radius: 4px;
  background: #f9f9f9;
  color: #999999;
  font-size: 15px;
  line-height: 38px;
  text-align: center; }

.FormAccount-rowInfo {
  display: flex; }
  .FormAccount-rowInfo.FormAccount-rowInfo--marginLeft {
    width: 224px;
    margin-left: 12px; }
  .FormAccount-rowInfo.FormAccount-rowInfoText--multipleLines {
    width: 500px; }

.FormAccount-rowInfoText {
  color: #999999;
  font-size: 13px;
  font-weight: 300; }
  .FormAccount-rowInfoText.warning {
    color: #FFB713; }

.FormAccount-rowInfoText--centered {
  text-align: center; }

.FormAccount-rowInfoText--smaller {
  width: 180px; }

.FormAccount-rowInfoText--block {
  width: 100%; }

.FormAccount-rowInfoText--maxWidth {
  max-width: 480px; }

.FormAccount-rowInfoText--error {
  color: #DD3B37; }

.FormAccount-rowInfoText--error .FormAccount-link {
  color: #DD3B37;
  text-decoration: underline; }

.FormAccount-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0 100px;
  padding: 20px 0;
  border-top: 1px solid #dddddd; }

.FormAccount-footerItemAsFirst {
  order: 1; }

.FormAccount-footerItemAsSecond {
  order: 2; }

.FormAccount-footer--noMarginBottom {
  margin-bottom: 0; }

.FormAccount-footerText {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: #999999;
  font-size: 13px;
  font-weight: 300;
  line-height: 22px; }

.FormAccount-footerIcon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #F2C000;
  border-radius: 20px;
  background: #F6D35C;
  color: #FFF;
  font-size: 13px;
  line-height: 20px !important;
  text-align: center; }

.FormAccount-tags {
  position: relative;
  z-index: 2;
  width: 308px;
  min-height: 38px;
  padding: 0;
  border: 1px solid #CCC;
  border-radius: 4px;
  outline: none;
  background: #FFF; }

.FormAccount-tagsList.tagit {
  padding: 0 5px 5px; }

.FormAccount-tagsList.tagit .tagit-choice {
  margin: 5px 5px 0 0;
  padding: 0 30px 0 11px;
  border-radius: 2px;
  background: #EFF8FF;
  color: #746E76;
  line-height: 28px; }

.FormAccount-tagsList.tagit .tagit-choice .tagit-close {
  right: 10px;
  line-height: normal; }

.FormAccount-tagsList.tagit .tagit-close .text-icon {
  display: inline-block;
  color: #C5CCD1; }
  .FormAccount-tagsList.tagit .tagit-close .text-icon:hover {
    color: #AAA; }

.FormAccount-tagsList.tagit .tagit-new {
  width: 160px;
  padding: 7px 4px 2px 7px; }

.FormAccount-tagsList.tagit .ui-autocomplete-input::-webkit-input-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.FormAccount-tagsList.tagit .ui-autocomplete-input::-moz-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.FormAccount-tagsList.tagit .ui-autocomplete-input:-ms-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.FormAccount-tags.is-focus {
  border-color: #999; }

.FormAccount-tags.is-disabled {
  background: #f9f9f9; }
  .FormAccount-tags.is-disabled .tagit-choice {
    padding: 0 11px; }
  .FormAccount-tags.is-disabled .tagit-choice .tagit-close {
    display: none; }

.FormAccount-tagsList--placeholder {
  position: absolute;
  top: 12px;
  left: 12px;
  font-style: italic; }

.FormAccount-button--deleteAccount,
.FormAccount-button--deleteOrganization {
  color: #f71800;
  cursor: pointer; }
  .FormAccount-button--deleteAccount:hover,
  .FormAccount-button--deleteOrganization:hover {
    text-decoration: underline; }

.FormAccount-GooglePlus-iframe {
  display: none; }

.OrganizationNotification-submissionRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.AssetItem {
  display: inline-block;
  position: relative;
  width: 58px;
  height: 58px;
  margin: 0 20px 20px 0;
  overflow: hidden;
  border: 1px solid #DDD;
  border-radius: 3px;
  background: url("/assets/1.0.0-assets.162/images/layout/loader_transparent.gif") no-repeat center; }
  .AssetItem:nth-child(12n) {
    margin-right: 0; }

.AssetItem .image {
  position: absolute;
  width: 60px;
  max-width: 60px;
  height: 60px;
  max-height: 60px;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 60px;
  text-align: center;
  vertical-align: top; }

.AssetItem:hover .delete {
  display: block;
  opacity: 1; }

.AssetItem.AssetItem-User.is-selected .image {
  top: 1px;
  left: 1px;
  width: 56px;
  height: 56px;
  background-color: #FFF; }

.AssetItem.is-selected {
  border: 1px solid #BBD7F2; }

.AssetItem.is-selected .image {
  background-color: #FFF; }

.AssetItem .delete {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 10px;
  padding: 0;
  transition: opacity 100ms;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 2px;
  opacity: 0;
  background: #333;
  background: rgba(0, 0, 0, 0.5);
  text-indent: 0; }

.AssetItem .delete::before {
  content: ' ';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 0;
  height: 0;
  border-top: 3px solid white;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent; }

.AssetItem.destroying:hover a.delete {
  display: none; }

.AssetItem.simpleicon a {
  background-size: auto 24px !important; }

.AssetItem.pin-maps a {
  background-size: auto 24px !important; }

/**
  *  Progress element styles
  *
  *  It needs:
  *  - Height of the progress "bar".
  *  - Border radius of the element.
  *  - If it needs a white gradient over it.
  *  - If bars needs a min width.
  *
  */
/* FONT FACE */
.ImportItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  margin: 0 20px;
  border-bottom: 1px solid #dddddd; }

.ImportItem--sticky {
  margin: 0;
  padding: 0 20px;
  background: #f5fafe; }

.ImportItem:last-child {
  border: none; }

.ImportItem-text {
  display: block;
  width: 207px;
  overflow: hidden;
  color: #666666;
  text-overflow: ellipsis;
  white-space: nowrap; }

.ImportItem-text.is-long {
  width: 380px; }

.ImportItem-textState {
  text-transform: capitalize; }

.ImportItem-text.is-completed {
  width: 280px;
  max-width: 280px;
  color: #8fb83f; }

.ImportItem-text.is-alerted {
  width: 280px;
  max-width: 280px;
  color: #c67b44; }

.ImportItem-text.is-failed {
  width: 280px;
  max-width: 280px;
  color: #f15743; }

.ImportItem-text.has-warnings {
  width: 280px;
  max-width: 280px;
  color: orange; }

.ImportItem-progress {
  width: 124px; }
  .ImportItem-progress div.progress-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: #F5F5F5; }
    .ImportItem-progress div.progress-bar.overflow-visible {
      overflow: visible; }
    .ImportItem-progress div.progress-bar .bar-3,
    .ImportItem-progress div.progress-bar .bar-2,
    .ImportItem-progress div.progress-bar .bar-1,
    .ImportItem-progress div.progress-bar .bar-0 {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 6px;
      min-width: 3px; }
    .ImportItem-progress div.progress-bar .bar-3 {
      z-index: 3;
      border-right: 1px solid #FFF;
      background: #7DD4FF; }
    .ImportItem-progress div.progress-bar .bar-2 {
      z-index: 2;
      background: #0090D7; }
    .ImportItem-progress div.progress-bar .bar-1 {
      z-index: 1;
      background: #E5E5E5; }
      .ImportItem-progress div.progress-bar .bar-1::after {
        display: none; }
      .ImportItem-progress div.progress-bar .bar-1::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        border-right: 1px solid white; }
    .ImportItem-progress div.progress-bar .bar-0 {
      background: url("/assets/1.0.0-assets.162/images/layout/unassigned_bkg.png") repeat-x left 0;
      z-index: 0; }
      .ImportItem-progress div.progress-bar .bar-0::after {
        display: none; }
    .ImportItem-progress div.progress-bar .danger {
      background: #f15743; }
    .ImportItem-progress div.progress-bar .caution {
      background: #f8b85c; }
  .ImportItem-progress div.progress-bar span.bar-2 {
    animation: move 1s linear infinite;
    background-color: #5DA1D6;
    background-image: -webkit-linear-gradient(-45deg, #5580c5 25%, transparent 25%, transparent 50%, #5580c5 50%, #5580c5 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #5580c5 25%, transparent 25%, transparent 50%, #5580c5 50%, #5580c5 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #5580c5 25%, transparent 25%, transparent 50%, #5580c5 50%, #5580c5 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg #5580c5 25%, transparent 25%, transparent 50%, #5580c5 50%, #5580c5 75%, transparent 75%, transparent);
    background-size: 12px 12px; }

@keyframes move {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 12px 12px; } }

.ImportItem-closeButton {
  width: 24px;
  height: 24px;
  margin-left: 5px;
  border: 1px solid #bbbbbb;
  border-radius: 22px;
  outline: none;
  background: transparent;
  line-height: 26px;
  text-align: center; }

.ImportItem-closeButtonIcon {
  color: #cccccc;
  font-size: 13px; }

.ImportItem-closeButton:hover {
  border-color: #888888; }
  .ImportItem-closeButton:hover .ImportItem-closeButtonIcon {
    color: #888888; }

.BackgroundPollingDetails-body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 560px;
  min-width: initial;
  margin: 0 auto;
  padding: 28px 0;
  border-top: 1px solid #dddddd;
  border-bottom: 0; }

.BackgroundPollingDetails-body--noBorderTop {
  border-top: 0; }

.BackgroundPollingDetails-icon {
  margin-right: 20px;
  font-size: 28px; }

.BackgroundPollingDetails-icon .CDB-IconFont-dollar {
  margin-bottom: 8px;
  /* :( */ }

.BackgroundPollingDetails-icon.is-nonFree {
  border-color: #D4BD7F;
  box-shadow: rgba(212, 189, 127, 0.1) 0 0 2px 2px;
  color: #D4BD7F; }

.BackgroundPollingDetails-icon.is-free {
  border-color: #8fb83f;
  box-shadow: rgba(143, 184, 63, 0.2) 0 0 2px 2px;
  color: #8fb83f; }

.BackgroundPollingDetails-infoTitle {
  color: #666666;
  font-size: 16px;
  font-weight: normal; }

.BackgroundPollingDetails-infoText {
  margin-top: 3px;
  font-size: 13px; }

.BackgroundPollingDetails-footer {
  width: 560px;
  margin: 0 auto;
  padding: 28px 0;
  border-top: 0;
  text-align: center; }

.Button.BackgroundPollingDetails-footerButton {
  display: inline-block; }

.Button.BackgroundPollingDetails-footerButton span {
  line-height: 42px; }

.BackgroundPolling {
  position: fixed;
  z-index: 10;
  bottom: -255px;
  left: 20px;
  width: 420px;
  transition: all 300ms;
  border: 1px solid #CCC;
  border-radius: 4px;
  opacity: 0;
  background: white;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); }

.BackgroundPolling.is-visible {
  bottom: 20px;
  opacity: 1; }

.BackgroundPolling-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 65px;
  padding: 0 20px;
  border-bottom: 1px solid #dddddd;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #f9f9f9; }

.BackgroundPolling-headerTitle {
  width: 220px;
  margin-left: 20px;
  color: #666666;
  font-family: 'Lato';
  font-size: 15px; }

.BackgroundPolling-headerBadge {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid #CCC;
  border-radius: 3px;
  line-height: 42px;
  text-align: center; }

.BackgroundPolling-headerBadgeIcon {
  color: #cccccc;
  font-size: 23px; }

.BackgroundPolling-headerBadge.has-failures {
  border-color: #f15743; }
  .BackgroundPolling-headerBadge.has-failures .BackgroundPolling-headerBadgeIcon {
    color: #f15743; }

.BackgroundPolling-headerBadgeCount {
  /* "backwards" to use the first keyframe's styles before animation starts */
  animation: fade-and-bounce-up 0.6s 350ms ease-in-out backwards; }

.BackgroundPolling-headerButton {
  border: 1px solid #CCC;
  background-color: transparent;
  color: #666666; }
  .BackgroundPolling-headerButton:hover {
    border-color: #333333;
    color: #333333; }

.BackgroundPolling-list {
  max-height: 230px;
  overflow: auto; }

@keyframes fade-and-scale-in {
  0% {
    transform: scale(2);
    opacity: 0; }
  10% {
    transform: scale(1.1);
    opacity: 0.9; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@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; } }

@keyframes fade-and-scale-out {
  0% {
    transform: scale(1);
    opacity: 1; }
  80% {
    transform: scale(1.4);
    opacity: 0.05; }
  100% {
    transform: scale(2);
    opacity: 0; } }

.TwitterImportDetails-header .Dialog-headerIcon {
  border-color: #649DD0;
  color: #649DD0; }

/* FONT FACE */
.Badge {
  display: block;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 17px;
  height: 17px;
  border-radius: 23px;
  background-color: #cccccc;
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  /* same as width/height */
  text-align: center; }
  .Badge.is-icon {
    position: relative;
    top: auto;
    right: auto; }

.Badge--negative {
  background-color: #F15743; }

.Badge--positive {
  background-color: #8fb83f; }

.Badge--alert {
  background-color: #F19243; }

.BuilderOnboarding {
  display: flex;
  height: 100%;
  pointer-events: auto; }

.BuilderOnboarding-footer {
  margin-top: 24px; }

.BuilderOnboarding-footerButtons {
  margin-bottom: 14px; }

.BuilderOnboarding-contentWrapper {
  display: flex;
  z-index: 5;
  flex: 1;
  align-items: center;
  height: 100%;
  background: rgba(46, 60, 67, 0.88);
  pointer-events: all; }

.BuilderOnboarding-contentWrapper.is-step0 {
  justify-content: center; }

.BuilderOnboarding-contentWrapper.is-step1,
.BuilderOnboarding-contentWrapper.is-step2,
.BuilderOnboarding-contentWrapper.is-step3 {
  justify-content: flex-start; }

.BuilderOnboarding-contentWrapper.is-step4 {
  justify-content: flex-end; }

.BuilderOnboarding-forget,
.BuilderOnboarding-header,
.BuilderOnboarding-footer,
.BuilderOnboarding-step {
  display: none; }

.BuilderOnboarding-forget,
.BuilderOnboarding-header,
.BuilderOnboarding-footer {
  min-width: 300px; }

.BuilderOnboarding-footer .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper .BuilderOnboarding-header p,
.BuilderOnboarding-contentWrapper .BuilderOnboarding-step p {
  transition: opacity 200ms ease-in-out 1s;
  opacity: 0; }

.BuilderOnboarding-contentWrapper.is-step4 .BuilderOnboarding-step p {
  transition: opacity 100ms ease-in-out 100ms; }

.BuilderOnboarding-contentWrapper.is-step0 .BuilderOnboarding-footer.is-step0 .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper.is-step1 .BuilderOnboarding-footer.is-step1 .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper.is-step2 .BuilderOnboarding-footer.is-step2 .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper.is-step3 .BuilderOnboarding-footer.is-step3 .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper.is-step4 .BuilderOnboarding-footer.is-step4 .BuilderOnboarding-footerButtons,
.BuilderOnboarding-contentWrapper.is-step0 .BuilderOnboarding-header.is-step0 p,
.BuilderOnboarding-contentWrapper.is-step0 .BuilderOnboarding-step.is-step0 p,
.BuilderOnboarding-contentWrapper.is-step1 .BuilderOnboarding-step.is-step1 p,
.BuilderOnboarding-contentWrapper.is-step2 .BuilderOnboarding-step.is-step2 p,
.BuilderOnboarding-contentWrapper.is-step3 .BuilderOnboarding-step.is-step3 p,
.BuilderOnboarding-contentWrapper.is-step4 .BuilderOnboarding-step.is-step4 p {
  opacity: 1; }

.BuilderOnboarding.is-step0 .BuilderOnboarding-header,
.BuilderOnboarding.is-step0 .BuilderOnboarding-footer.is-step0,
.BuilderOnboarding.is-step1 .BuilderOnboarding-footer.is-step1,
.BuilderOnboarding.is-step2 .BuilderOnboarding-footer.is-step2,
.BuilderOnboarding.is-step3 .BuilderOnboarding-footer.is-step3,
.BuilderOnboarding.is-step4 .BuilderOnboarding-footer.is-step4,
.BuilderOnboarding.is-step0 .BuilderOnboarding-step.is-step0,
.BuilderOnboarding.is-step1 .BuilderOnboarding-step.is-step1,
.BuilderOnboarding.is-step2 .BuilderOnboarding-step.is-step2,
.BuilderOnboarding.is-step3 .BuilderOnboarding-step.is-step3,
.BuilderOnboarding.is-step4 .BuilderOnboarding-step.is-step4 {
  display: block; }

.BuilderOnboarding.is-step0 .BuilderOnboarding-step.is-step1 {
  opacity: 0; }

.BuilderOnboarding-body {
  width: auto;
  margin: 0 80px; }

.BuilderOnboarding-description {
  width: 445px;
  margin-bottom: 12px;
  transition: width 100ms ease-in-out;
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px; }

.BuilderOnboarding-pad,
.BuilderOnboarding-pad4 {
  opacity: 0.88;
  background: #2E3C43; }

.BuilderOnboarding-pad4,
.BuilderOnboarding-pad5 {
  position: absolute;
  z-index: 0;
  top: 0;
  right: -378px;
  width: 378px;
  height: 100%;
  transition: all 200ms ease-in-out 300ms;
  background: url("/assets/1.0.0-assets.162/images/layout/widgets.png") no-repeat center center;
  background-color: #F2F6F9;
  background-position: 50% 0; }

.BuilderOnboarding-pad,
.BuilderOnboarding-pad2,
.BuilderOnboarding-pad3,
.BuilderOnboarding-pad4 {
  z-index: 10;
  width: 0;
  height: 100%;
  transition: width 300ms ease-in-out; }

.BuilderOnboarding.is-step1 .BuilderOnboarding-body {
  width: 0; }

.BuilderOnboarding.is-step1 .BuilderOnboarding-pad2 {
  width: 72px; }
  @media (max-width: 1200px) {
    .BuilderOnboarding.is-step1 .BuilderOnboarding-pad2 {
      width: 48px; } }

.BuilderOnboarding.is-step1 .BuilderOnboarding-description {
  width: 550px; }

.BuilderOnboarding.is-step2 .BuilderOnboarding-body {
  width: 0; }

.BuilderOnboarding.is-step2 .BuilderOnboarding-pad {
  width: 72px; }
  @media (max-width: 1200px) {
    .BuilderOnboarding.is-step2 .BuilderOnboarding-pad {
      width: 48px; } }

.BuilderOnboarding.is-step2 .BuilderOnboarding-pad2 {
  width: 345px; }

.BuilderOnboarding.is-step2 .BuilderOnboarding-pad5 {
  right: -378px;
  transition: right 0 ease-in-out 0; }

.BuilderOnboarding.is-step2 .BuilderOnboarding-description {
  width: 550px; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-body {
  width: 0; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-pad2 {
  width: 0; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-pad3 {
  flex: 1; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-description {
  width: 200px; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-pad4 {
  right: 0;
  width: 365px;
  transition: right 0 ease-in-out 0;
  background: #2E3C43; }

.BuilderOnboarding.is-step3 .BuilderOnboarding-contentWrapper {
  flex: 0 0 416px; }
  @media (max-width: 1200px) {
    .BuilderOnboarding.is-step3 .BuilderOnboarding-contentWrapper {
      flex: 0 0 392px; } }

.BuilderOnboarding.is-step3 .BuilderOnboarding-pad5 {
  right: 0; }

.BuilderOnboarding.is-step4 .BuilderOnboarding-body {
  width: 285px; }

.BuilderOnboarding.is-step4 .BuilderOnboarding-pad {
  display: none; }

.BuilderOnboarding.is-step4 .BuilderOnboarding-pad4 {
  position: relative;
  width: 378px;
  background: none; }

.BuilderOnboarding.is-step4 .BuilderOnboarding-description {
  width: auto; }

.BuilderOnboarding.is-step4 .BuilderOnboarding-pad5 {
  right: 0; }

.BuilderOnboarding-shadow {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 365px;
  height: 60px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF); }

.Button {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 29px;
  border: 1px solid white;
  border-radius: 4px;
  outline: none;
  text-align: center;
  text-decoration: none; }

.Button--inline {
  display: inline-block;
  margin: 0 12px; }

.Button--centered {
  margin: auto; }

.Button,
.Button span {
  box-sizing: border-box;
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap; }

.Button-inner {
  line-height: 40px; }

.Button-arrowMenu {
  margin-top: 2px;
  margin-left: 3px;
  font-size: 8px;
  vertical-align: top; }

.Button.is-hidden {
  display: none; }

.Button:hover,
.Button span:hover {
  text-decoration: none; }

.Button.is-disabled {
  opacity: 0.5; }
  .Button.is-disabled:hover {
    cursor: default; }

.Button--main {
  border-color: #0090d7;
  background-color: #0090d7; }
  .Button--main:hover {
    background-color: #007fbd; }
  .Button--main.is-disabled:hover {
    background-color: #0090d7; }

.Button--positive {
  border-color: #8fb83f;
  background-color: #8fb83f; }
  .Button--positive:hover {
    border-color: #7fa538;
    background-color: #7fa538; }
  .Button--positive.is-disabled:hover {
    border-color: #8fb83f;
    background-color: #8fb83f; }

.Button--invert {
  border-color: #3aa9e3;
  background-color: none;
  color: #3aa9e3; }
  .Button--invert span {
    color: #3aa9e3; }
  .Button--invert:hover {
    background-color: #3aa9e3;
    color: #FFF; }
    .Button--invert:hover span {
      color: #FFF; }

.Button--negative {
  border-color: #f15743;
  background-color: #f15743; }
  .Button--negative:hover {
    background-color: #b93f37; }

.Button--alert {
  border-color: orange;
  background-color: orange; }
  .Button--alert:hover {
    background-color: orange; }

.Button--secondary {
  border: 1px solid #bbbbbb;
  background-color: white; }
  .Button--secondary span {
    color: #bbbbbb; }
  .Button--secondary .Button-arrowMenu {
    color: #777; }
  .Button--secondary:hover {
    border-color: #888888; }
    .Button--secondary:hover span {
      color: #888888; }
    .Button--secondary:hover .Button-arrowMenu {
      color: #444; }

.Button--secondaryTransparentBkg {
  background-color: transparent; }

.Button.is-smaller {
  height: 30px;
  padding: 0 15px; }

.Button--secondaryBlue {
  border-color: transparent;
  background-color: white; }
  .Button--secondaryBlue span {
    color: #0090d7; }
  .Button--secondaryBlue:hover span {
    color: #007fbd; }

.Button--light {
  border: 1px solid #FFF;
  background-color: white;
  color: #384047; }
  .Button--light:hover {
    background-color: #384047;
    color: #FFF; }

.Button--link {
  color: #3aa9e3;
  text-transform: inherit; }
  .Button--link:hover {
    color: #333333;
    text-decoration: underline; }

.Button--link.is-inline {
  padding-right: 0;
  padding-left: 0; }

.Button--link.is-destructive {
  color: #f15743; }
  .Button--link.is-destructive:hover {
    color: #f15743; }

.Button--headerPositive {
  border: 2px solid #FFF;
  color: #FFF; }
  .Button--headerPositive:hover {
    background-color: #FFF; }
    .Button--headerPositive:hover span {
      color: #227dbd; }

.Button-importShowDetails {
  height: 24px;
  padding: 0 11px;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: transparent;
  color: #666666;
  font-size: 12px;
  line-height: 24px; }
  .Button-importShowDetails:hover {
    border-color: #666666;
    color: #666666; }

.Button--gray {
  display: inline-block;
  margin: auto;
  transition: opacity 150ms ease-in-out;
  border: 1px solid #CCC;
  border-radius: 4px;
  background-color: transparent;
  color: #2e3c43;
  font-size: 12px;
  line-height: 24px; }
  .Button--gray:hover {
    border-color: #888; }

.ChangePrivacy-upgradeBanner {
  padding: 20px 0;
  background: #F0F7FC; }

.UpgradeElement.ChangePrivacy-upgradeBannerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 28px;
  padding: 0;
  border: none;
  background: none; }

.ChangePrivacy-shareBanner {
  display: flex;
  align-items: center;
  justify-content: center; }

.ChangePrivacy-shareBannerIcon {
  margin-right: 12px; }

.ChangePrivacy-startFooter {
  display: flex;
  align-content: space-between;
  align-items: stretch;
  justify-content: center; }

.ChangePrivacy-shareHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: none; }

.ChangePrivacy-shareHeaderBackIcon {
  margin-right: 20px; }

.ChangePrivacy-passwordInput {
  margin-top: 12px; }

.ChangePrivacy-shareListItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px; }

.ChangePrivacy-shareListItem:not(:nth-child(1)) {
  border-top: 1px solid #dddddd; }

.ChangePrivacy-shareListItemInfo {
  display: flex;
  justify-content: flex-start;
  max-width: 400px; }

.ChangePrivacy-shareListItemToggler {
  margin-right: 8px; }

.ChangePrivacy-shareListItemTogglerContainer {
  margin-right: 30px; }

.ChangePrivacy-shareListItemIcon {
  margin-right: 12px; }

.ChangePrivacy-infoIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-right: 12px;
  border: 1px solid #F2C000;
  border-radius: 30px;
  background-color: #F6D35C;
  color: WHITE; }

.ChangePrivacy-shareFooter {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  height: 97px;
  border-top: 1px solid #dddddd;
  background-color: #f9f9f9; }

/* FONT FACE */
.ConnectDialog .Dialog-content {
  width: 100%; }

.Dialog-body.ConnectDialog-body {
  min-height: 700px;
  padding: 0;
  background: #f9f9f9; }

.ConnectDialog .Filters-separator {
  background: #DDD; }

.ConnectDialog .Filters-row {
  justify-content: center; }

.ConnectDialog-footer {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 50%;
  margin-left: -470px;
  border: none;
  text-align: center; }

.ConnectDialog-footerInfo {
  color: #999999;
  font-size: 16px;
  font-weight: 300; }

.ConnectDialog-footerInfoIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #F2C000;
  border-radius: 20px;
  background: #F6D35C;
  color: white;
  font-size: 13px;
  line-height: 20px !important;
  text-align: center;
  vertical-align: top; }

.ConnectDialog-footerButton {
  display: none; }

.ConnectDialog-footerButton.is-enabled {
  display: inline-block; }

.ContentFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 28px 0; }

/* REVIEW IF THIS CLASS IS NECESSARY */
.ContentFooter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.ContentFooter-inner--paginationOnly {
  justify-content: center; }

.ContentFooter-lockedIcon {
  margin-right: 4px;
  color: #cccccc;
  font-size: 11px; }

@media only screen and (max-width: 984px) {
  .ContentFooter {
    display: block; }
  .ContentFooter-inner--paginationOnly {
    justify-content: flex-end; } }

@media only screen and (max-width: 600px) and (min-width: 400px) {
  .ContentFooter {
    display: block; }
  .ContentFooter-inner--paginationOnly {
    justify-content: flex-end; } }

@media only screen and (min-width: 600px) {
  .ContentFooter {
    display: block; }
  .ContentFooter-inner--paginationOnly {
    justify-content: flex-end; } }

@media only screen and (min-width: 760px) {
  .ContentFooter-inner--paginationOnly {
    justify-content: flex-end; } }

@media (min-width: 960px) {
  .ContentFooter {
    display: flex;
    width: 940px; } }

@media (min-width: 760px) {
  .ContentFooter-inner {
    flex-direction: row;
    justify-content: space-between; }
  .ContentFooter-inner--paginationOnly {
    justify-content: flex-end; } }

/* FONT FACE */
.ContentResult {
  width: 460px;
  min-height: 360px;
  margin: 0 auto;
  padding-top: 160px;
  text-align: center; }

.ContentResult.is-empty {
  width: auto;
  min-height: 0;
  margin: 0 auto;
  padding-top: 0; }

.ContentResult.no-datasets {
  position: relative;
  z-index: 9;
  width: auto;
  height: 232px;
  min-height: 0;
  margin: 0 auto;
  padding: 28px 0 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
  .ContentResult.no-datasets::after, .ContentResult.no-datasets::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0; }
  .ContentResult.no-datasets .NoDatasets-illustration {
    position: absolute;
    bottom: -52px;
    left: 50%;
    width: 671px;
    height: 195px;
    margin-left: -335px;
    background-image: url("/assets/1.0.0-assets.162/images/layout/search_lens_bkg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%; }
  .ContentResult.no-datasets .NoDatasets-illustration--secondary {
    background: url("/assets/1.0.0-assets.162/images/layout/connect-dataset.png") center center no-repeat; }

.ContentResult-smallLoader {
  position: absolute;
  z-index: 10;
  top: -2px;
  right: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: transparent; }
  .ContentResult-smallLoader::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    width: 600px;
    height: 2px;
    animation: pulsate 1.5s linear infinite;
    background: rgba(0, 0, 0, 0.55); }

.ContentResult-icon {
  display: inline-block;
  width: 38px;
  height: 38px;
  border: 1px solid #dddddd;
  border-radius: 2px;
  color: #cccccc;
  font-size: 22px;
  line-height: 36px;
  vertical-align: top; }

.ContentResult-iconNegative {
  border-color: #f15743;
  color: #f15743; }

.ContentResult-iconPositive {
  border-color: #8fb83f;
  color: #8fb83f; }

.ContentResult-iconAlert {
  border-color: #c67b44;
  color: #c67b44; }

.ContentResult-title {
  display: block;
  margin: 15px 0 10px;
  color: #666666;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px; }

.ContentResult-text {
  display: block;
  color: #666666;
  font-size: 15px;
  font-weight: 300; }

.ContentResult-textTitle {
  color: #3aa9e3;
  text-decoration: underline; }
  .ContentResult-textTitle:hover {
    color: #227dbd; }

@keyframes pulsate {
  0% {
    right: 100%; }
  50% {
    right: 0%; }
  100% {
    right: -100%; } }

.CreateDialog-footer {
  position: fixed;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  text-align: center; }

.CreateDialog-footerInner {
  display: flex;
  position: relative;
  align-items: baseline;
  justify-content: space-between;
  min-height: 72px;
  margin: 0 auto;
  padding: 16px 40px;
  background: #f9f9f9; }

@media (min-width: 760px) {
  .CreateDialog-footerInner {
    width: 760px; } }

@media (min-width: 940px) {
  .CreateDialog-footerInner {
    width: 940px; } }

.CreateDialog-footerShadow {
  position: absolute;
  z-index: 2;
  top: -19px;
  left: 50%;
  width: 1020px;
  height: 18px;
  margin-left: -510px;
  background-image: linear-gradient(to bottom, rgba(249, 249, 249, 0), #f9f9f9); }

.CreateDialog-footerLine {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 50%;
  width: 940px;
  height: 1px;
  margin-left: -470px;
  background: #dddddd; }

.CreateDialog-footerInner.is-centered {
  display: block;
  justify-content: initial; }

.CreateDialog-footerInfoIcon {
  margin-right: 8px; }

.CreateDialog-footerInfoEnquiry {
  padding-bottom: 10px; }

.CreateDialog-footerActions {
  display: flex;
  align-items: center; }

.CreateDialog-footerActionsButton.is-separated {
  margin-right: 10px; }

.CreateDialog-header {
  min-height: 100px !important;
  max-height: 156px; }

.CreateDialog-header.with-separator {
  border-bottom: 1px solid #dddddd; }

.CreateDialog-headerSteps {
  display: block;
  text-align: center; }

.CreateDialog-headerStep {
  display: inline-block;
  width: auto;
  min-width: 130px;
  margin-right: 98px; }

.CreateDialog-headerStep:last-child {
  margin-right: 0; }

.CreateDialog-header .Dialog-headerIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-color: #CCC;
  line-height: 42px; }

.CreateDialog-header .Dialog-headerIcon .CDB-IconFont {
  color: #CCC; }

.CreateDialog-header .CDB-IconFont-add {
  font-size: 20px; }

.CreateDialog-header .Dialog-headerTitle {
  color: #cccccc;
  font-size: 16px;
  line-height: 22px; }

.CreateDialog-header .Dialog-headerText {
  color: #cccccc;
  font-size: 14px;
  font-weight: 300; }

.CreateDialog-header .Dialog-headerIconBadge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 15px;
  height: 15px;
  border: 1px solid #CCC;
  border-radius: 15px;
  background: white;
  line-height: 15px;
  text-align: center; }

.CreateDialog-header .Dialog-headerIconBadge .CDB-IconFont {
  margin-top: 1px;
  color: #999999;
  font-size: 10px;
  vertical-align: top; }

.CreateDialog-headerButton {
  display: block;
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 30px;
  width: 38px;
  height: 38px;
  border: 1px solid #CCC;
  border-radius: 40px;
  outline: none;
  background: none;
  color: #CCC;
  font-size: 18px;
  font-weight: 300;
  line-height: 38px; }
  .CreateDialog-headerButton:hover {
    border: 1px solid #999;
    color: #999; }

.CreateDialog-headerStep.is-selected .Dialog-headerIcon,
.CreateDialog-headerStep.is-selectable:hover .Dialog-headerIcon {
  border-color: #666666; }

.CreateDialog-headerStep.is-selected .CDB-IconFont,
.CreateDialog-headerStep.is-selectable:hover .CDB-IconFont {
  color: #666666; }

.CreateDialog-headerStep.is-selected .Dialog-headerText,
.CreateDialog-headerStep.is-selected .Dialog-headerTitle,
.CreateDialog-headerStep.is-selectable:hover .Dialog-headerText,
.CreateDialog-headerStep.is-selectable:hover .Dialog-headerTitle {
  color: #666666; }

.CreateDialog-headerStep.is-selected .Dialog-headerIconBadge,
.CreateDialog-headerStep.is-selectable:hover .Dialog-headerIconBadge {
  border-color: #0090d7;
  color: #8fb83f; }

.CreateDialog-headerStep.CreateDialog-headerStep--single .Dialog-headerText,
.CreateDialog-headerStep.CreateDialog-headerStep--single .Dialog-headerTitle {
  color: #666666; }

.CreateDialog-headerStep.is-selectable:hover {
  cursor: pointer; }

/* FONT FACE */
.CreateDialog-listing {
  display: block;
  padding-top: 52px; }

.CreateDialog-listing.CreateDialog-listing--withFlashMessage {
  padding-top: 126px; }

.CreateDialog-listing.CreateDialog-listing--noPaddingTop {
  padding-top: 0; }

.DatasetsPaginator {
  width: 940px;
  margin: 0 auto;
  padding: 30px 0; }
  .DatasetsPaginator:empty {
    padding-top: 0;
    padding-bottom: 0; }

.DatasetsPaginator .Pagination {
  justify-content: flex-end; }

.ImportPanel {
  width: 780px;
  margin: 0 auto; }

.ImportPanel-header {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 28px 0;
  text-align: center; }

.ImportPanel-headerIcon {
  display: inline-block;
  margin-bottom: 20px;
  text-align: center; }

.ImportPanel-headerDescription {
  width: 465px;
  margin: 5px auto 0; }

.ImportPanel-headerDescription--normalWeight {
  font-weight: 500; }

.ImportPanel-headerDescription--withoutWidth {
  width: auto; }

.ImportPanel-headerDescription--negative {
  color: #f15743; }

.ImportPanel-headerDescription--negative,
.ImportPanel-headerDescriptionLink {
  color: #f15743;
  text-decoration: underline; }
  .ImportPanel-headerDescription--negative:hover,
  .ImportPanel-headerDescriptionLink:hover {
    color: #f15743; }

.ImportPanel-headerButton {
  position: absolute;
  top: 28px;
  left: 0; }

.ImportPanel-headerLink {
  margin-top: 30px; }

.ImportPanel-body {
  display: block;
  position: relative;
  width: 100%; }

.ImportPanel-bodyWrapper {
  margin: 0 auto; }

.ImportPanel-state {
  display: none;
  width: 780px; }

.ImportPanel-list {
  width: 320px;
  margin: 0 auto;
  padding-left: 80px;
  list-style-type: disc; }

.ImportPanel-listItem {
  margin-bottom: 10px;
  color: #666666;
  font-size: 14px;
  font-weight: 300; }

.ImportPanel-actions {
  text-align: center; }

.ImportPanel-actionsButton {
  display: inline-block; }

.ImportPanel-sidebar {
  width: 200px; }
  .ImportPanel-sidebar .ip-block {
    padding: 18px 24px;
    border: 1px solid #DDD;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    line-height: 15px; }

.DatasetSelected {
  width: 820px;
  margin: 0 0 0 -20px;
  border: 1px solid #1785FB;
  border-radius: 4px;
  background: #FFF; }

.DatasetSelected-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px; }

.DatasetSelected-itemExt {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid #1785FB;
  border-radius: 4px;
  color: #1785FB;
  font-size: 15px;
  line-height: 38px;
  text-align: center;
  text-transform: uppercase; }

.DatasetSelected-itemInfo {
  margin-left: 20px; }

.DatasetSelected-itemTitle {
  display: block;
  color: #333333;
  font-size: 16px;
  font-weight: 500; }

.DatasetSelected-itemDescription {
  display: block;
  margin-top: 3px;
  color: #999999;
  font-size: 13px; }

.DatasetSelected-sync {
  display: block;
  overflow: hidden;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #FFF; }

.DatasetSelected-syncOptions {
  display: flex;
  align-items: center;
  margin: 0 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #dddddd; }

.DatasetSelected-syncLabel {
  width: 100px;
  border-right: 1px solid rgba(0, 0, 0, 0.06); }

.DatasetSelected-syncOptionsList {
  display: flex;
  align-items: center; }

.DatasetSelected-syncOptionsList--syncView {
  margin-left: auto; }

.DatasetSelected-syncOptionsItem {
  margin-left: 24px; }

.UpgradeElement.DatasetSelected-upgrade {
  padding: 20px;
  border-top: 1px solid #BBD7F2 !important;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 0 4px 4px; }

.DatasetSelected-upgradeButton {
  padding-right: 40px;
  padding-left: 40px; }

/* FONT FACE */
.TwitterCategory .Form-inputIcon {
  top: 8px;
  font-size: 20px; }

.TwitterCategory .Form-inputIcon.is-highlighted {
  color: #6F9FD0; }

.TwitterCategory {
  height: 0;
  overflow: hidden;
  transition: all 250ms linear;
  opacity: 0; }

.TwitterCategory.enabled {
  height: 60px;
  opacity: 1; }

.DatePicker-info {
  max-width: 140px !important;
  line-height: 20px !important; }

.ImportTwitterPanel-creditsUsage {
  margin-bottom: 10px; }

.CreditsUsage-info {
  width: 300px;
  color: #666666; }

@charset "UTF-8";
.ImportOptions {
  position: relative;
  width: 940px;
  margin: 8px auto 20px; }
  .ImportOptions__category-title {
    margin-top: 24px;
    margin-bottom: 8px; }
  .ImportOptions__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 106px; }
  .ImportOptions__input--long {
    box-sizing: border-box !important;
    width: 540px; }
  .ImportOptions__label {
    max-width: 100px;
    padding-top: 12px; }
  .ImportOptions__form-error {
    position: relative;
    width: 465px;
    padding-left: 20px;
    color: #f15743;
    font-size: 12px;
    line-height: 16px; }
    .ImportOptions__form-error::before {
      content: '\1F6AB';
      position: absolute;
      left: 0;
      line-height: 18px; }
  .ImportOptions__input-error {
    margin-top: -4px;
    padding: 10px 12px;
    border: 1px solid #f15743;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #FFF4F4;
    color: #f15743;
    font-size: 12px;
    line-height: 16px; }
  .ImportOptions__CodeMirror {
    position: relative;
    width: 540px; }
    .ImportOptions__CodeMirror .CodeMirror {
      position: relative;
      height: 150px;
      margin-top: 0;
      margin-bottom: 0;
      padding: 10px 0;
      border-radius: 4px;
      background-color: #2b3c43;
      line-height: 13px; }
      .ImportOptions__CodeMirror .CodeMirror pre {
        padding-left: 14px; }
        .ImportOptions__CodeMirror .CodeMirror pre.CodeMirror-placeholder {
          color: rgba(255, 255, 255, 0.24); }
    .ImportOptions__CodeMirror .CodeMirror-code > div {
      margin-bottom: 3px; }
  .ImportOptions__hint {
    width: 540px; }
  .ImportOptions__feedback {
    padding-top: 60px;
    text-align: center; }

div[class^="gtm-connectors"] {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 100%; }

.ImportOptions-navigationButton {
  position: absolute;
  top: 28px;
  padding: 0;
  line-height: 40px !important; }

.ImportOptions-navigationButton--prev {
  left: -80px; }

.ImportOptions-navigationButton--next {
  right: -80px; }

.ImportOptions-navigationButton.is-disabled:hover {
  border-color: #cccccc;
  color: #cccccc; }

.ImportOptions-tabs {
  display: block;
  width: 940px;
  padding: 28px 0;
  overflow-x: hidden; }

.ImportOptions-tabsList {
  display: flex;
  flex-wrap: nowrap;
  transition: margin 150ms; }

.ImportOptions-tab {
  min-width: 140px;
  margin: 0 20px 0 0;
  text-align: center; }

.ImportButton {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 174px;
  height: 102px;
  margin-right: 16px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background-color: white;
  color: #636d72;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 16px; }
  .ImportButton:hover {
    border-color: #1785FB; }
  .ImportButton.is-disabled {
    background-color: transparent; }
  .ImportButton__taglist {
    position: absolute;
    top: 0;
    left: 0; }
  .ImportButton__tag {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    height: 16px;
    margin-right: 4px;
    padding: 1px 6px 2px;
    border: 1px solid #dddddd;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: #F0F0F0;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px; }
    .ImportButton__tag--enterprise::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 11px;
      margin-right: 6px;
      background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/locked.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    .ImportButton__tag:first-of-type, .ImportButton:not(.is-enterprise) .ImportButton__tag--beta {
      border-left: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 0; }

.is-disabled .ImportButton__icon,
.is-disabled .ImportButton__name {
  opacity: 0.4; }

.is-beta .ImportButton__tag--beta,
.is-enterprise .ImportButton__tag--enterprise {
  display: inline-block; }

.ImportButton .is-box {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/box.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-dropbox {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/dropbox.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-gdrive {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/gdrive.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-bigquery {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/bigquery.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-hive {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/hive.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-sqlserver {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/sqlserver.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-mysql {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/mysql.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-postgresql {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/postgresql.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.ImportButton .is-arcgis {
  display: block;
  width: 65px;
  height: 30px;
  margin-bottom: 8px;
  background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/arcgis.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

.SelectedImport__header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 940px;
  margin: 10px auto 0;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dddddd; }

.SelectedImport__icon {
  margin-right: 8px; }

.SelectedImport__back {
  position: absolute;
  left: 0; }

.SelectedImport__desc {
  margin-top: 20px;
  margin-bottom: 32px; }

.SelectedImport__tag {
  display: inline-block;
  align-self: center;
  margin-left: 26px;
  padding: 0 4px;
  border: 1px solid #979ea1;
  border-radius: 2px;
  color: #636d72; }

.ImportOther {
  margin-right: 16px; }

.ImportOther__step1,
.ImportOther__step2,
.ImportOther__step3,
.ImportOther__step4 {
  display: none; }
  .ImportOther__step1.is-active,
  .ImportOther__step2.is-active,
  .ImportOther__step3.is-active,
  .ImportOther__step4.is-active {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: white;
    color: #636d72;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 16px; }

.ImportOther__step1.is-active {
  color: #1785FB; }

.ImportOther__step2,
.ImportOther__step3,
.ImportOther__step4 {
  flex-direction: column;
  width: 174px;
  height: 104px;
  border: 1px solid #1785FB; }

.ImportOther__step1 {
  flex-direction: row;
  width: 174px;
  height: 102px;
  border: 1px solid #dddddd; }
  .ImportOther__step1:hover {
    border-color: #1785FB; }
  .ImportOther__step1 .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/add.svg");
    background-repeat: no-repeat;
    background-position: left center; }

.ImportOther__step2 .ImportOther__input {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 32px;
  margin-top: 12px;
  padding: 0 48px 0 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  outline: none;
  color: #666; }
  .ImportOther__step2 .ImportOther__input:focus {
    border-color: #999; }

.ImportOther__step2 .ImportOther__inputSubmit {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 24px;
  height: 54px;
  margin-top: -14px;
  padding: 0;
  opacity: 1;
  background: none; }
  .ImportOther__step2 .ImportOther__inputSubmit.is-disabled {
    opacity: 0.4;
    cursor: default; }

.ImportOther__step3 .ImportOther__spinner {
  margin-top: 12px; }

.ImportOther__step4 .ImportOther_requestText {
  margin: 0 20px; }

.ImportOther__step4 .ImportOther__requestButton {
  box-sizing: content-box;
  margin-top: 12px; }

.ImportOther__step4 .ImportOther__requestButton {
  width: 60px; }
  .ImportOther__step4 .ImportOther__requestButtonText {
    display: block;
    margin-right: -20px;
    margin-left: -8px;
    background-image: url("/assets/1.0.0-assets.162/images/layout/connectors/request-success.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12px; }

.ImportOther__step4.hasError {
  border-color: #f8b85c; }
  .ImportOther__step4.hasError .ImportOther__requestButton {
    width: auto; }
    .ImportOther__step4.hasError .ImportOther__requestButtonText {
      margin: auto;
      background: none; }

.ServiceList {
  display: block;
  width: 780px;
  margin: 0 auto; }

.ServiceList-header {
  padding: 28px 0 16px; }

.ServiceList-items {
  display: block; }

.ServiceList-item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  transition: border 200ms ease-in;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #FFF; }

.ServiceList-item:last-child {
  margin: 0; }

.ServiceList-item:hover {
  border: 1px solid #AAA; }

.ServiceList-itemInfoTitle {
  box-sizing: border-box;
  max-width: 550px;
  padding-right: 24px; }

.ServiceList-itemExt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 1px solid #CCC;
  border-radius: 4px;
  color: #CCC;
  text-transform: uppercase; }

.ServiceList-itemInfo {
  flex: 1; }

.ServiceList-itemDescription {
  margin-top: 3px; }

.ServiceList-itemButton {
  padding: 0 44px;
  border: 1px solid #CCC;
  background: transparent;
  color: #666666; }

.IntermediateInfo.ServiceList-empty {
  width: 100%;
  min-height: 250px; }

.DatasetCard {
  position: relative;
  width: 288px;
  margin: 0 auto;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  background-color: white; }

.DatasetCard-title {
  width: 100%;
  margin: 0 0 3px; }

.DatasetCard-content {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px 16px;
  transition: opacity 250ms;
  border-radius: 4px;
  opacity: 1; }

.DatasetCard-contentFooter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between; }

.DatasetCard-contentFooter > *:not(:last-child) {
  margin-right: 20px; }

.DatasetCard-contentBody {
  width: 100%; }

.DatasetCard-contentBodyRow {
  margin-bottom: 4px; }

.DatasetCard-contentBodyRow--flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%; }

.DatasetCard-contentBodyDetails--left {
  display: flex; }

.DatasetCard-contentBodyDetails--right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%; }

@keyframes pulsate {
  0% {
    right: 100%; }
  50% {
    right: 0%; }
  100% {
    right: -100%; } }

@media (min-width: 760px) {
  .DatasetCard {
    width: 298px; } }

@media only screen and (max-width: 544px) {
  .DatasetCard-contentFooter > *:not(:last-child) {
    margin-right: 10px; } }

/* FONT FACE */
/* compensate for the negative margins and border */
.DatasetsList {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px 0 20px; }

.DatasetsList.is-hidden {
  display: none; }

.DatasetsList-item {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: -1px;
  padding: 16px;
  transition: border 200ms ease-in;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

.DatasetsList-item--selectable:hover,
.DatasetsList-item--selectable.is--selected {
  border-radius: 4px; }

.DatasetsList-item--selectable:hover {
  border: 1px solid #AAA;
  cursor: pointer; }

.DatasetsList-item--selectable.is--selected {
  border: 1px solid #AAA; }
  .DatasetsList-item--selectable.is--selected:hover {
    cursor: default; }

.DatasetsList-fake {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 250ms;
  opacity: 0;
  background: url("/assets/1.0.0-assets.162/images/layout/dataset-placeholder.png") no-repeat center center; }

.DatasetsList.is-loading .DatasetsList-item,
.DatasetsList.is-loading .DatasetsList-item--selectable,
.DatasetsList.is-loading .DatasetsList-item--selectable.is--selected,
.DatasetsList.is-loading .DatasetsList-item:hover,
.DatasetsList.is-loading .DatasetsList-item--selectable:hover,
.DatasetsList.is-loading .DatasetsList-item--selectable:hover.is--selected {
  margin: 0;
  padding: 28px 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: none;
  cursor: default; }
  .DatasetsList.is-loading .DatasetsList-item .DatasetsList-itemCategory,
  .DatasetsList.is-loading .DatasetsList-item--selectable .DatasetsList-itemCategory,
  .DatasetsList.is-loading .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory,
  .DatasetsList.is-loading .DatasetsList-item:hover .DatasetsList-itemCategory,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover .DatasetsList-itemCategory,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover.is--selected .DatasetsList-itemCategory {
    opacity: 0; }
  .DatasetsList.is-loading .DatasetsList-item .DatasetsList-itemInfo,
  .DatasetsList.is-loading .DatasetsList-item--selectable .DatasetsList-itemInfo,
  .DatasetsList.is-loading .DatasetsList-item--selectable.is--selected .DatasetsList-itemInfo,
  .DatasetsList.is-loading .DatasetsList-item:hover .DatasetsList-itemInfo,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover .DatasetsList-itemInfo,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover.is--selected .DatasetsList-itemInfo {
    opacity: 0; }
  .DatasetsList.is-loading .DatasetsList-item .DatasetsList-fake,
  .DatasetsList.is-loading .DatasetsList-item--selectable .DatasetsList-fake,
  .DatasetsList.is-loading .DatasetsList-item--selectable.is--selected .DatasetsList-fake,
  .DatasetsList.is-loading .DatasetsList-item:hover .DatasetsList-fake,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover .DatasetsList-fake,
  .DatasetsList.is-loading .DatasetsList-item--selectable:hover.is--selected .DatasetsList-fake {
    opacity: 1; }

.DatasetsList-itemCategory {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 40px;
  height: 40px;
  margin-top: 3px;
  margin-right: 20px;
  transition: opacity 250ms ease-in-out;
  border: none;
  opacity: 1;
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -160px 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-itemCategory {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -160px 0;
      background-size: 200px 120px; } }

.DatasetsList-itemCategory.is--lineDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -40px 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-itemCategory.is--lineDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -40px 0;
      background-size: 200px 120px; } }

.DatasetsList-itemCategory.is--polygonDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -80px 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-itemCategory.is--polygonDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -80px 0;
      background-size: 200px 120px; } }

.DatasetsList-itemCategory.is--pointDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat 0 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-itemCategory.is--pointDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: 0 0;
      background-size: 200px 120px; } }

.DatasetsList-itemCategory.is--rasterDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -120px 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-itemCategory.is--rasterDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -120px 0;
      background-size: 200px 120px; } }

.DatasetsList-item--selectable:hover .DatasetsList-itemCategory,
.DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -160px -40px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--selectable:hover .DatasetsList-itemCategory,
    .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -160px -40px;
      background-size: 200px 120px; } }

.DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--lineDataset,
.DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--lineDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -40px -40px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--lineDataset,
    .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--lineDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -40px -40px;
      background-size: 200px 120px; } }

.DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--polygonDataset,
.DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--polygonDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -80px -40px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--polygonDataset,
    .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--polygonDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -80px -40px;
      background-size: 200px 120px; } }

.DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--pointDataset,
.DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--pointDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat 0 -40px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--pointDataset,
    .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--pointDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: 0 -40px;
      background-size: 200px 120px; } }

.DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--rasterDataset,
.DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--rasterDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -120px -40px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--selectable:hover .DatasetsList-itemCategory.is--rasterDataset,
    .DatasetsList-item--selectable.is--selected .DatasetsList-itemCategory.is--rasterDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -120px -40px;
      background-size: 200px 120px; } }

.DatasetsList-itemStatus {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -8px;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.85);
  color: #c67b44;
  font-size: 9px;
  line-height: 17px !important;
  text-align: center; }

.DatasetsList-aditionalItemStatus {
  top: auto;
  bottom: -8px; }

.DatasetsList-itemStatus.CDB-IconFont-book {
  font-size: 12px; }

.DatasetsList-itemStatus.is-public {
  color: #8fb83f; }

.DatasetsList-itemStatus.is-banned {
  color: #E1A7A5; }

.DatasetsList-itemStatus.is-failure {
  color: #f15743; }

.DatasetsList-itemStatus.is-success {
  color: #8fb83f; }

.DatasetsList-itemInfo {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
  flex-direction: column;
  transition: opacity 250ms;
  opacity: 1; }

.DatasetsList-itemPrimaryInfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%; }

.DatasetsList-itemSecondaryInfo {
  width: 100%;
  margin-top: 0; }

.DatasetsList-itemTitle {
  display: flex;
  align-items: center; }

.DatasetsList-itemTitle.is-disabled {
  color: #cccccc;
  font-weight: normal; }

.DatasetsList-itemTitlePermission {
  margin-left: 12px;
  background: WHITE; }

.DatasetsList-itemTimeDiff .UserAvatar {
  height: 18px;
  margin-left: 4px; }

.DatasetsList-itemSource {
  display: flex;
  margin-left: 4px; }

.DatasetsList-itemMeta {
  display: flex;
  align-items: center;
  margin-bottom: 8px; }

.DatasetsList-itemTags {
  margin-top: 4px; }

.DatasetsList-itemMeta > * {
  margin-right: 12px; }

.DatasetsList-itemMeta > *:last-child {
  margin-right: 0; }

.DatasetsList-itemMeta > *:nth-child(2) {
  order: 2; }

.DatasetsList-itemMeta > *:nth-child(3) {
  order: 3; }

.DatasetsList-itemMeta > *:nth-child(4) {
  order: 4; }

.DatasetsList-itemMeta > *:nth-child(5) {
  order: 5; }

.DatasetsList-itemTags.EditableField {
  text-align: right; }
  .DatasetsList-itemTags.EditableField .EditableField-input {
    width: 70%;
    text-align: right; }

.DatasetsList-itemDescription {
  height: 16px;
  margin-top: 4px; }

.DatasetsList-item--banned .DatasetsList-itemCategory {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -160px -80px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--banned .DatasetsList-itemCategory {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -160px -80px;
      background-size: 200px 120px; } }

.DatasetsList-item--banned .DatasetsList-itemCategory.is--lineDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -40px -80px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--banned .DatasetsList-itemCategory.is--lineDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -40px -80px;
      background-size: 200px 120px; } }

.DatasetsList-item--banned .DatasetsList-itemCategory.is--polygonDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -80px -80px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--banned .DatasetsList-itemCategory.is--polygonDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -80px -80px;
      background-size: 200px 120px; } }

.DatasetsList-item--banned .DatasetsList-itemCategory.is--pointDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat 0 -80px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--banned .DatasetsList-itemCategory.is--pointDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: 0 -80px;
      background-size: 200px 120px; } }

.DatasetsList-item--banned .DatasetsList-itemCategory.is--rasterDataset {
  background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons.png") no-repeat -120px -80px; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .DatasetsList-item--banned .DatasetsList-itemCategory.is--rasterDataset {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/geometry-types-icons@2x.png");
      background-position: -120px -80px;
      background-size: 200px 120px; } }

@media only screen and (max-width: 400px) and (max-width: 959px) {
  .DatasetsList {
    width: 100%; }
  .DatasetsList-itemTitle {
    margin-bottom: 3px; }
  .DatasetsList-itemMeta {
    align-items: center; }
  .DatasetsList-itemMeta > * {
    width: auto;
    margin-right: 10px;
    text-align: center; }
  .DatasetsList-itemMeta > *:last-child {
    margin-right: 0; }
  .DatasetsList-itemMeta > *:nth-child(2) {
    order: 2; }
  .DatasetsList-itemMeta > *:nth-child(3) {
    order: 3; }
  .DatasetsList-itemMeta > *:nth-child(4) {
    order: 4; }
  .DatasetsList-itemMeta > *:nth-child(5) {
    order: 5; } }

@media only screen and (max-width: 760px) {
  .DatasetsList {
    width: 100%; }
  .DatasetsList-itemTitle {
    margin-bottom: 3px; }
  .DatasetsList-itemMeta {
    align-items: center; }
  .DatasetsList-itemMeta > * {
    width: auto;
    margin-right: 10px;
    text-align: center; }
  .DatasetsList-itemMeta > *:last-child {
    margin-right: 0; }
  .DatasetsList-itemMeta > *:nth-child(2) {
    order: 2; }
  .DatasetsList-itemMeta > *:nth-child(3) {
    order: 3; }
  .DatasetsList-itemMeta > *:nth-child(4) {
    order: 4; } }

@media (min-width: 960px) {
  .DatasetsList {
    width: 940px;
    padding-right: 0;
    padding-left: 0; }
  .DatasetsList-itemInfo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }
  .DatasetsList-itemPrimaryInfo {
    width: 440px; }
  .DatasetsList-itemSecondaryInfo {
    display: flex;
    flex-direction: column; }
  .DatasetsList-itemTitle {
    margin-bottom: 0; }
  .DatasetsList-itemMeta {
    justify-content: flex-end;
    margin-bottom: 0; }
  .DatasetsList-itemMeta > * {
    margin-right: 12px; }
  .DatasetsList-itemMeta > *:last-child {
    margin-right: 0; }
  .DatasetsList-itemMeta > *:nth-child(2) {
    order: 2; }
  .DatasetsList-itemMeta > *:nth-child(3) {
    order: 3; }
  .DatasetsList-itemMeta > *:nth-child(4) {
    order: 4; } }

/**
 *  Date picker component
 *  Defaults for dates range picker, i.e. two calendars and all that
 *  - Unfortunately re-using datepicker plugin styles :(
 */
.DatePicker {
  position: relative;
  z-index: 3; }

.DatePicker-dates {
  display: block;
  position: relative;
  box-sizing: content-box;
  width: 434px;
  height: 38px;
  padding: 0 12px;
  outline: none;
  color: #cccccc;
  text-align: left; }

.DatePicker--withBorder .DatePicker-dates {
  border: 1px solid #CCC;
  border-radius: 4px;
  background: WHITE; }

.DatePicker-dates.has-icon {
  width: 394px;
  padding-right: 52px; }

.DatePicker-dates.DatePicker-dates--singleDate {
  width: 86px; }

.DatePicker-dates strong {
  color: #666666;
  font-weight: 500; }

.DatePicker-datesIcon {
  position: absolute;
  top: 11px;
  right: 15px;
  color: #cccccc;
  font-size: 16px; }

.DatePicker-dates:hover,
.DatePicker-dates:focus {
  border-color: #999; }
  .DatePicker-dates:hover .DatePicker-datesIcon,
  .DatePicker-dates:focus .DatePicker-datesIcon {
    color: #999999; }

.DatePicker-dates.is-disabled {
  opacity: 0.5; }
  .DatePicker-dates.is-disabled:hover {
    border-color: #CCC;
    color: #cccccc; }
    .DatePicker-dates.is-disabled:hover .DatePicker-datesIcon {
      color: #cccccc; }

.DatePicker-dropdown {
  position: absolute;
  right: 0;
  bottom: 43px;
  left: 0;
  width: 458px;
  padding: 0;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: WHITE;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 2px 2px; }

.DatePicker-dropdown::after,
.DatePicker-dropdown::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%; }

.DatePicker-dropdown::before {
  z-index: 1;
  bottom: -8px;
  margin-left: -4px;
  border-top: 8px solid #f5fafe;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent; }

.DatePicker-dropdown::after {
  z-index: 0;
  bottom: -10px;
  margin-left: -6px;
  border-top: 10px solid #CCC;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent; }

.DatePicker-simpleDropdown {
  position: absolute;
  top: 49px;
  right: -16px;
  width: 236px;
  padding: 0;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: #FFF;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 2px 2px;
  font: normal 13px/20px "Lato", sans-serif; }

.DatePicker-simpleDropdown::after,
.DatePicker-simpleDropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%; }

.DatePicker-simpleDropdown::after {
  z-index: 1;
  top: -8px;
  margin-left: -4px;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #f5fafe;
  border-left: 8px solid transparent; }

.DatePicker-simpleDropdown::before {
  z-index: 0;
  top: -10px;
  margin-left: -6px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #CCC;
  border-left: 10px solid transparent; }

.DatePicker-timers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px; }

.DatePicker-timersFrom,
.DatePicker-timersTo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding: 10px 10px 0;
  border-top: 1px solid #dddddd; }

.DatePicker-timersLabel {
  margin-right: 5px;
  color: #666666;
  font-size: 11px;
  text-transform: uppercase; }

.DatePicker-shortcuts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 422px;
  height: 39px;
  margin-top: 9px;
  padding: 0 18px;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #f5fafe; }

.DatePicker-shortcutsText {
  color: #666666;
  font-size: 10px; }

.DatePicker-calendar {
  width: 422px;
  height: 196px;
  margin: 16px 18px;
  font-size: 11px;
  cursor: default; }

.datepickerContainer {
  background: WHITE; }

.datepickerHidden {
  display: none; }

.DatePicker-calendar table {
  border-collapse: collapse; }

.DatePicker-calendar a {
  outline: none;
  text-decoration: none;
  cursor: pointer; }

.DatePicker-calendar table td {
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  text-align: center; }

.DatePicker-calendar th {
  font-weight: normal;
  text-align: center; }

.DatePicker-calendar tbody th {
  text-align: left; }

.DatePicker-calendar tbody a {
  display: block; }

.datepickerDays a {
  width: 24px;
  height: 20px;
  border: 1px solid white;
  line-height: 20px; }

.datepickerYears a,
.datepickerMonths a {
  width: 44px;
  height: 36px;
  line-height: 36px;
  text-align: center; }

tbody.datepickerDays td.datepickerSelected {
  background: #0090d7; }

tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
  background: #17384D; }

tbody.datepickerYears td.datepickerSelected,
tbody.datepickerMonths td.datepickerSelected {
  background: #17384D; }

.DatePicker-calendar tbody th {
  text-align: left; }

.datepickerSpace div {
  width: 20px; }

.datepickerGoNext a,
.datepickerGoPrev a,
.datepickerMonth a {
  color: #666;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  text-align: center;
  text-transform: uppercase; }

.datepickerGoNext a {
  width: 20px;
  float: right; }

.datepickerGoPrev a {
  width: 20px;
  float: left; }

table.datepickerViewDays tbody.datepickerMonths,
table.datepickerViewDays tbody.datepickerYears {
  display: none; }

table.datepickerViewMonths tbody.datepickerDays,
table.datepickerViewMonths tbody.datepickerYears,
table.datepickerViewMonths tr.datepickerDoW {
  display: none; }

table.datepickerViewYears tbody.datepickerDays,
table.datepickerViewYears tbody.datepickerMonths,
table.datepickerViewYears tr.datepickerDoW {
  display: none; }

td.datepickerDisabled a,
td.datepickerDisabled.datepickerNotInMonth a {
  opacity: 0.5;
  color: #333; }

td.datepickerDisabled a:hover {
  opacity: 0.5;
  color: #333; }

td.datepickerSpecial a {
  background: #700; }

td.datepickerSpecial.datepickerSelected a {
  background: #A00; }

.datepickerDoW {
  margin: 10px 0;
  border-bottom: 1px solid #CCC; }
  .datepickerDoW th {
    height: 30px;
    text-align: center !important; }
    .datepickerDoW th:first-child {
      display: none; }
    .datepickerDoW th span {
      color: #CCC;
      font-size: 9px;
      text-transform: uppercase; }

tbody.datepickerDays::before {
  content: "-";
  display: block;
  color: WHITE;
  line-height: 5px; }

th.datepickerWeek {
  text-align: center !important; }
  th.datepickerWeek a {
    color: #CCC; }

td.datepickerSelected a {
  border-color: #0090d7;
  color: WHITE; }

tbody.datepickerDays td.datepickerSelectedFirst.datepickerSelected,
tbody.datepickerDays td.datepickerSelectedLast.datepickerSelected {
  background: #0090d7; }
  tbody.datepickerDays td.datepickerSelectedFirst.datepickerSelected a,
  tbody.datepickerDays td.datepickerSelectedLast.datepickerSelected a {
    border-radius: 22px;
    border-color: #0090d7;
    background: WHITE;
    color: #0090d7; }

td.datepickerSelectedFirst {
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px; }

td.datepickerSelectedLast {
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px; }

.datepickerNotInMonth a {
  color: #999; }

tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected {
  background: #E7EAEC; }
  tbody.datepickerDays td.datepickerNotInMonth.datepickerSelected a {
    border-color: #E7EAEC; }

table.datepickerViewDays {
  margin: 0 10px; }

thead > tr.datepickerDoW > th:first-child,
.datepickerWeek {
  display: none; }

.datepickerContainer > table > tbody > tr td thead th.datepickerGoNext a,
.datepickerContainer > table > tbody > tr td thead th.datepickerGoPrev a {
  display: none; }

.datepickerMonth a:hover {
  cursor: default; }

.DatePicker-calendar.DatePicker-calendar--simple {
  width: 200px;
  padding-top: 12px; }
  .DatePicker-calendar.DatePicker-calendar--simple .datepickerGoNext a,
  .DatePicker-calendar.DatePicker-calendar--simple .datepickerGoPrev a {
    display: block; }

/* FONT FACE */
.DefaultDescription {
  position: relative;
  overflow-wrap: break-word; }

.DefaultDescription > * {
  margin: 0;
  padding: 0; }

.DefaultDescription--error {
  color: #f15743; }

.DefaultParagraph {
  color: #666666;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px; }

.DefaultParagraph--secondary {
  color: #999999; }

.DefaultParagraph--error {
  color: #f15743; }
  .DefaultParagraph--error .Button--link {
    color: #f15743;
    text-decoration: underline; }

.DefaultParagraph--tertiary {
  color: #999999;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px; }

.DefaultParagraph--short {
  width: 500px; }

.DefaultParagraph--centered {
  margin: 0 auto; }

.DefaultParagraph--spaced {
  margin-top: 10px;
  margin-bottom: 10px; }

.DefaultParagraph--normalSize {
  font-size: 13px;
  line-height: 20px; }

@media (min-width: 400px) {
  .DefaultParagraph--short {
    width: 200px; } }

@media (min-width: 760px) {
  .DefaultParagraph--short {
    width: 500px; } }

.DefaultTimeDiff {
  display: flex;
  align-items: center; }

.DefaultTimeDiff-icon {
  margin-right: 5px;
  color: #cccccc;
  font-size: 12px; }

.DefaultTimeDiff p {
  margin-left: 5px; }

.DefaultTitle {
  color: #666666;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px; }

.DefaultTitle.is-disabled {
  color: rgba(102, 102, 102, 0.4); }

.DefaultTitle a {
  color: #666; }

/* FONT FACE */
* {
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility; }

body {
  background: white;
  font: normal 13px/20px "Lato", sans-serif;
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased; }

ul {
  list-style: none; }

a {
  color: #1181FB;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

i {
  font-style: normal; }

button {
  border: 0;
  background: transparent; }

button:focus {
  outline: none; }

/* set by base dialog */
body.is-inDialog {
  overflow: hidden; }

.Dialog {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.9) 100%); }

.Dialog-contentWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }

/* If the animation duration is changed make sure to update the timeout value in Dialog's view! */
.Dialog.is-opening {
  animation: fade-and-scale-in 100ms ease-out; }

.Dialog.is-closing {
  /* "forwards" to keep the last keyframe's styles after animation ended */
  animation: fade-and-scale-out 80ms ease-in forwards; }

.Dialog.is-sticky .Dialog-closeBtn {
  display: none; }

.Dialog-closeBtn {
  position: fixed;
  z-index: 2;
  top: 28px;
  right: 40px; }

.Dialog-backBtn {
  position: fixed;
  top: 28px;
  left: 40px; }

.Dialog-content {
  width: 100%; }

.Dialog-content--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%; }

.Dialog-header--expanded {
  flex-grow: 1; }

.Dialog-body--expanded {
  flex-grow: 100;
  background-color: #f9f9f9; }

.Dialog-footer--expanded {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f9f9f9; }

.Dialog-content.is-newContent {
  animation: fade-and-scale-in 100ms ease-out; }

.Dialog-header {
  padding: 28px 0;
  text-align: center; }

.Dialog-body {
  width: 940px;
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid #dddddd; }

.Dialog-body.Dialog-body--tall {
  padding-top: 40px;
  padding-bottom: 40px; }

.Dialog-body.Dialog-body--noPaddingTop {
  padding-top: 0; }

.Dialog-body.Dialog-body--withoutBorder {
  border-top: none; }

.Dialog-body.Dialog-body--create {
  position: relative;
  width: 100%;
  margin-bottom: 104px;
  overflow: auto; }

.Dialog-body.Dialog-body--share {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0; }
  .Dialog-body.Dialog-body--share .u-inner {
    width: 620px; }

.Dialog-body.Dialog-body--small {
  width: 670px; }

.Dialog-Stretcher {
  display: flex;
  justify-content: center;
  width: 940px; }

.Dialog-Stretcher--small {
  width: 700px; }

.Dialog-Stretcher--medium {
  width: 830px; }

.Filters.Dialog-bodyFilters {
  position: relative;
  background: none; }

.Filters.Dialog-bodyFilters {
  position: relative;
  background: none; }

.Dialog-body .ListingContent {
  margin-bottom: 100px; }

.Dialog-footer {
  padding: 28px 0;
  text-align: center; }

.Dialog-footer--withoutBorder {
  border-top: none; }

.Dialog-footer--simple {
  display: flex;
  justify-content: center; }

.Dialog-footer--small {
  width: 670px; }

.Dialog-footerContent {
  display: flex;
  justify-content: center; }

.Dialog-footerWarning {
  color: #f15743; }

.Dialog-preFooter {
  position: fixed;
  z-index: 3;
  right: 5%;
  bottom: 100px;
  left: 0;
  left: 5%;
  width: 90%;
  background: #f9f9f9; }
  .Dialog-preFooter::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: -18px;
    width: 100%;
    height: 18px;
    background-image: linear-gradient(to bottom, rgba(249, 249, 249, 0), #f9f9f9); }

.Dialog-headerIcon {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  font-size: 22px;
  line-height: 44px; }

.Dialog-headerIcon--neutral {
  border-color: #666666 !important; }
  .Dialog-headerIcon--neutral .CDB-IconFont {
    color: #666666 !important; }

.Dialog-headerIcon--twitter {
  border-color: #55ACEE;
  color: #55ACEE; }

.Dialog-headerIcon--negative {
  border-color: #F15743;
  color: #F15743; }

.Dialog-headerIcon--positive {
  border-color: #8fb83f;
  color: #8fb83f; }

.Dialog-headerIcon--alert {
  border-color: orange;
  color: orange; }

.Dialog-headerIcon--small {
  position: relative;
  top: -3px;
  font-size: 10px;
  vertical-align: middle; }

.Dialog-headerIconBadge {
  /* "backwards" to use the first keyframe's styles before animation starts */
  animation: fade-and-bounce-up 0.6s 350ms ease-in-out backwards; }

.Dialog-headerTitle {
  color: #666666;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px; }

.Dialog-headerTitle--warning {
  color: orange; }

.Dialog-headerTitle--error {
  color: #f15743; }

.Dialog-headerText {
  color: #666666;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px; }

.Dialog-headerText:not(:last-child) {
  margin-bottom: 12px; }

.Dialog-headerText--centered {
  margin: auto; }

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

.Dialog-headerText--small {
  width: 670px; }

.Dialog-footerBtn {
  margin-right: 20px; }

.Dialog-affectedEntities {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.Dialog-content--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%; }

.Dialog-header--expanded {
  flex-grow: 1;
  min-height: 100px; }

.Dialog-expandedSubContent {
  flex-grow: 100;
  margin-bottom: 97px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #dddddd;
  background-color: #f9f9f9; }

.Dialog-expandedSubContentInner {
  position: relative; }

.Dialog-bodyInnerExpandedWithSubFooter {
  padding-bottom: 97px; }

.Dialog-bodyInnerExpandedWithPreFooter {
  padding-bottom: 197px; }

.Dialog-stickyFooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 97px;
  background-color: #f9f9f9; }

.Dialog-contentSubHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #dddddd; }

.Dialog-resultsBody {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 620px; }

.Dialog-resultsBody--vcenter {
  align-items: center; }

.Dialog-resultsBodyIcon {
  margin-right: 20px; }

.Dialog-resultsBodyTexts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 520px; }

.Dialog-narrowerContent {
  width: 620px; }

.Dialog-countryBack {
  margin-left: 12px;
  float: right;
  pointer-events: auto; }

@keyframes fade-and-scale-in {
  0% {
    transform: scale(2);
    opacity: 0; }
  10% {
    transform: scale(1.1);
    opacity: 0.9; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@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; } }

@keyframes fade-and-scale-out {
  0% {
    transform: scale(1);
    opacity: 1; }
  80% {
    transform: scale(1.4);
    opacity: 0.05; }
  100% {
    transform: scale(2);
    opacity: 0; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .Dialog-body .ListingContent {
    margin-bottom: 200px; } }

/* FONT FACE */
.DropdownLink {
  position: relative;
  padding-right: 12px;
  cursor: pointer; }
  .DropdownLink::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-top: 4px solid #cccccc;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent; }
  .DropdownLink:hover::after {
    border-top-color: #666666; }

.Dropdownlink--secondary::after {
  border-top-color: #999999; }

.Dropdownlink--secondary:hover {
  border-top-color: #999999; }
  .Dropdownlink--secondary:hover::after {
    border-top-color: #999999; }

.DropdownLink--white::after {
  border-top-color: white; }

.DropdownLink--white:hover {
  border-top-color: white; }
  .DropdownLink--white:hover::after {
    border-top-color: white; }

/*
 * Dropdown styles, with a subtle blurry border, and a triangle "tick" popping out of the dropdown box to indicate where it is anchored.
 *
 * The tick is composed by two injected elements by ::before and ::after the .Dropdown's content.
 * ::before injects a square box, rotated 45 degrees, which has a box-shadow attached to it.
 * ::after injects a rectangle with same background as the dropdown content, which overlaps ::before's content to.
 *
 *            /\         <-- tick_x::before, the visible half of the rotated square
 *   ________/..\_____
 *  |      :      :   |  <-- tick_x::after, the rectangle covering the other half of ::before
 *  |      :......:   |
 *
 * The tick can be placed horizontally by .tick_left/center/right, or vertically by .tick_top/middle/bottom, in
 * combination with horizontal_left/right and vertical_top/bottom.
 */
.Dropdown {
  display: none;
  position: absolute;
  z-index: 100000000;
  border-radius: 4px;
  background: white;
  /* x-offset, y-offset, blur, size, color */
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2), 0 0 1px 0 rgba(0, 0, 0, 0.3); }
  .Dropdown::before {
    content: ' ';
    display: block !important;
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background-color: white;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); }
  .Dropdown::after {
    content: ' ';
    display: block !important;
    position: absolute;
    background-color: white; }
  .Dropdown.tick_top.horizontal_left::before, .Dropdown.tick_middle.horizontal_left::before, .Dropdown.tick_bottom.horizontal_left::before {
    left: -5px; }
  .Dropdown.tick_top.horizontal_left::after, .Dropdown.tick_middle.horizontal_left::after, .Dropdown.tick_bottom.horizontal_left::after {
    left: 0; }
  .Dropdown.tick_top.horizontal_right::before, .Dropdown.tick_middle.horizontal_right::before, .Dropdown.tick_bottom.horizontal_right::before {
    right: -5px; }
  .Dropdown.tick_top.horizontal_right::after, .Dropdown.tick_middle.horizontal_right::after, .Dropdown.tick_bottom.horizontal_right::after {
    right: 0; }
  .Dropdown.tick_top::after, .Dropdown.tick_middle::after, .Dropdown.tick_bottom::after {
    width: 10px;
    height: 22px; }
  .Dropdown.tick_top::before {
    top: 12px; }
  .Dropdown.tick_top::after {
    top: 6px; }
  .Dropdown.tick_middle::before {
    top: 50%;
    margin-top: -3px; }
  .Dropdown.tick_middle::after {
    top: 50%;
    margin-top: -9px; }
  .Dropdown.tick_bottom::before {
    bottom: 12px; }
  .Dropdown.tick_bottom::after {
    bottom: 6px; }
  .Dropdown.tick_left.vertical_top::before, .Dropdown.tick_center.vertical_top::before, .Dropdown.tick_right.vertical_top::before {
    bottom: -5px; }
  .Dropdown.tick_left.vertical_top::after, .Dropdown.tick_center.vertical_top::after, .Dropdown.tick_right.vertical_top::after {
    bottom: 0; }
  .Dropdown.tick_left.vertical_bottom::before, .Dropdown.tick_center.vertical_bottom::before, .Dropdown.tick_right.vertical_bottom::before {
    top: -5px; }
  .Dropdown.tick_left.vertical_bottom::after, .Dropdown.tick_center.vertical_bottom::after, .Dropdown.tick_right.vertical_bottom::after {
    top: 0; }
  .Dropdown.tick_left::after, .Dropdown.tick_center::after, .Dropdown.tick_right::after {
    width: 22px;
    height: 10px; }
  .Dropdown.tick_left::before {
    left: 12px; }
  .Dropdown.tick_left::after {
    left: 6px; }
  .Dropdown.tick_center::before {
    left: 50%;
    margin-left: -3px; }
  .Dropdown.tick_center::after {
    left: 50%;
    margin-left: -9px; }
  .Dropdown.tick_right::before {
    right: 12px; }
  .Dropdown.tick_right::after {
    right: 6px; }
  .Dropdown.short {
    width: 164px !important; }
  .Dropdown.tiny {
    width: 105px !important; }

.Dropdown--withScroll {
  height: 100%;
  max-height: 300px; }

.Dropdown > ul {
  position: relative;
  margin: 20px;
  padding: 0;
  overflow: visible; }

.Dropdown > ul > li:first-child {
  margin-top: 0;
  border-top: 0; }

.Dropdown > ul > li:last-child {
  margin-bottom: 0; }

.Dropdown > ul > li > p:first-child {
  margin-top: 0; }

.Dropdown-content {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  max-height: 300px; }
  .Dropdown-content .ScrollView {
    flex-basis: auto;
    margin: 0;
    padding: 0; }
    .Dropdown-content .ScrollView .ScrollView-wrapper {
      margin: 0;
      padding: 0; }
    .Dropdown-content .ScrollView .ScrollView-content {
      padding: 0; }
  .Dropdown-content .ps-scrollbar-y-rail {
    z-index: 3;
    right: 6px !important;
    width: 4px !important;
    background: #EEE; }
  .Dropdown-content .ps-scrollbar-y {
    right: 0 !important;
    width: 4px !important;
    background: #AAA; }
    .Dropdown-content .ps-scrollbar-y:hover {
      cursor: all-scroll;
      cursor: -webkit-grab; }
    .Dropdown-content .ps-scrollbar-y:active {
      cursor: -webkit-grabbing; }
  .Dropdown-content .ps-scrollbar-x-rail {
    z-index: 3;
    height: 2px !important;
    border-top: 12px solid #FFF;
    border-bottom: 2px solid #FFF;
    background: #EEE; }
  .Dropdown-content .ps-scrollbar-x-rail .ps-scrollbar-x {
    bottom: -1px !important;
    height: 4px !important;
    opacity: 0.6;
    pointer-events: all; }
  .Dropdown-content .ps-container > .ps-scrollbar-x-rail,
  .Dropdown-content .ps-container > .ps-scrollbar-y-rail {
    opacity: 0.6; }

.Dropdown-content--withScroll {
  height: 100%;
  max-height: 288px;
  padding: 6px 0;
  overflow: hidden; }

.DropdownList {
  display: block !important;
  margin: 2px 15px !important; }

.DropdownList--list {
  margin: 0 16px !important;
  padding: 0; }

.DropdownList-item {
  display: block !important;
  margin: 0 !important;
  padding: 16px;
  border-top: none;
  border-bottom: 1px solid #dddddd; }

.DropdownList-item--verticalPadding {
  padding: 16px 0; }

.DropdownList-item--noPadding {
  padding: 8px; }

.DropdownList-item:last-child {
  border-top: none;
  border-bottom: none; }

.Dropdown--public {
  width: 236px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  .Dropdown--public .SettingsDropdown {
    margin: 12px 20px; }
  .Dropdown--public::before, .Dropdown--public::after {
    content: ' ';
    background-color: #FFF; }

/* FONT FACE */
.EditableField .EditableField-button {
  margin-right: 0; }
  .EditableField .EditableField-button:hover {
    text-decoration: underline; }

.EditableField .EditableField-input {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: none;
  outline: none;
  background: none;
  background: -webkit-linear-gradient(bottom, #DFE8EC 0%, transparent 8%) 0 0;
  background: -moz-linear-gradient(bottom, #DFE8EC 0%, transparent 8%) 0 0;
  background: -ms-linear-gradient(bottom, #DFE8EC 0%, transparent 8%) 0 0;
  background: -o-linear-gradient(bottom, #DFE8EC 0%, transparent 8%) 0 0;
  background: linear-gradient(bottom, #DFE8EC 0%, transparent 8%) 0 0;
  /* stylelint-disable-line */
  background-size: 100% 16px; }

.EditableField.is-editing {
  width: 100%; }
  .EditableField.is-editing .EditableField-button {
    display: none; }
  .EditableField.is-editing .EditableField-input {
    display: block;
    resize: none; }

.ErrorDetails-header .Dialog-headerIcon {
  margin-bottom: 15px;
  line-height: 40px; }

.ErrorDetails-header .Dialog-headerTitle {
  color: #f15743; }

.ErrorDetails-header .Dialog-headerText {
  font-size: 14px; }

.ErrorDetails-body {
  width: 620px;
  min-width: initial; }

.ErrorDetails-body--no-line {
  padding: 0;
  border-top: none; }

.ErrorDetails-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #dddddd; }

.ErrorDetails-item:first-child {
  padding-top: 0; }

.ErrorDetails-item:last-child {
  padding-bottom: 0;
  border-bottom: none; }

.ErrorDetails-itemStep {
  width: 38px;
  height: 38px;
  margin-right: 20px;
  border: 1px solid #CCC;
  border-radius: 38px;
  color: #666666;
  font-size: 13px;
  line-height: 38px;
  text-align: center; }

.ErrorDetails-itemIcon {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  font-size: 22px;
  line-height: 44px; }

.ErrorDetails-itemIcon--success {
  border-color: #9BC63B;
  color: #9BC63B; }

.ErrorDetails-itemIcon--alert {
  border-color: orange;
  color: orange; }

.ErrorDetails-itemStep--lessProminent {
  border-color: #DDD;
  color: #DDD; }

.ErrorDetails-itemText {
  width: 500px; }

.ErrorDetails-itemTextStrong {
  color: #333333; }

.ErrorDetails-footer {
  width: 620px;
  margin: 0 auto;
  text-align: center; }

.ErrorDetails-footer--no-line {
  border-top: none; }

.ErrorDetails-footerButton {
  display: inline-block;
  padding-right: 40px;
  padding-left: 40px;
  line-height: 40px; }

/* FONT FACE */
.Filters {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; }

.Filters--thin .Filters-row {
  height: 60px; }

.Filters--thin .Filters-separator {
  top: 60px; }

.Filters.is-relative {
  position: relative; }

.Filters.is-fixed {
  position: fixed;
  background: WHITE; }

.Filters.with-long-separator::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 80px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06); }

.Filters.with-long-separator .Filters-separator {
  display: none; }

.Filters > .u-inner {
  display: block;
  position: relative;
  height: 81px;
  padding: 0;
  overflow: hidden; }

.Filters-inner {
  display: block;
  padding: 0;
  transition: margin 150ms; }

.Filters-inner.show-second-row {
  margin-top: -75px; }
  .Filters-inner.show-second-row .Filters-row:last-child {
    margin-top: 4px; }

.Filters-separator {
  position: absolute;
  z-index: 0;
  top: 74px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06); }

.Filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 73px; }

.Filters-row--centered {
  justify-content: center; }

.Filters-group {
  display: flex;
  align-items: center; }
  .Filters-group:not(:first-child) {
    margin-left: 10px; }

.Filters-group.is-hidden,
.Filters-addLayer.is-hidden {
  display: none; }

.Filters-group.is-searching {
  width: 100%; }

.Filters-typeItem {
  position: relative;
  margin-right: 32px; }
  .Filters-typeItem:last-child {
    margin-right: 0; }

.Filters-typeItem.Filters-typeItem--moreMargins {
  margin-right: 15px;
  margin-left: 15px; }

.Filters-typeItem--searchField {
  display: none;
  flex-grow: 1;
  margin-right: 0; }

.Filters-typeItem--moreMargins {
  margin-right: 15px;
  margin-left: 15px; }

.Filters-searchLink {
  display: block;
  color: #1181FB; }

.Filters-searchLink::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  width: 1px;
  height: 20px;
  margin-top: -10px;
  background: rgba(0, 0, 0, 0.06); }

.Filters-searchLinkIcon {
  display: inline-block;
  margin-right: 5px;
  margin-left: 1px;
  vertical-align: top;
  vertical-align: middle; }

a.Filters-searchLink:hover {
  color: #333; }

.Filters-searchForm {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px; }

.Filters-searchInput {
  width: 100%;
  padding-left: 5px;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  font-weight: 300; }

.Filters-cleanSearch {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px; }

.Filters-cleanSearch.Filters-cleanSearch--short {
  right: -10px; }

a.Filters-cleanSearch {
  line-height: 32px; }

.Filters-searchInput::-webkit-input-placeholder {
  color: #DDD;
  font-style: italic;
  font-weight: 500; }

.Filters-searchInput::-moz-placeholder {
  color: #DDD;
  font-style: italic;
  font-weight: 500; }

.Filters-searchInput:-ms-placeholder {
  color: #DDD;
  font-style: italic;
  font-weight: 500; }

.Filters-typeLink:hover {
  color: #227dbd;
  text-decoration: none; }

.Filters-typeLink.Filters-typeLink--grey {
  color: #979EA1; }
  .Filters-typeLink.Filters-typeLink--grey:hover {
    color: #979EA1; }

.Filters-typeLink.is-selected {
  display: block;
  height: 16px;
  color: #333333; }
  .Filters-typeLink.is-selected::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #333333; }
  .Filters-typeLink.is-selected:hover {
    text-decoration: none;
    cursor: default; }

.Filters-typeLink.is-disabled {
  color: rgba(0, 0, 0, 0.3); }
  .Filters-typeLink.is-disabled:hover {
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    cursor: default; }

.Filters-orderItem {
  display: inline-block;
  margin-right: 24px;
  color: #999999;
  line-height: normal;
  vertical-align: top; }

.Filters-orderLink {
  display: inline-block;
  color: #CCC;
  font-size: 19px;
  line-height: 19px;
  vertical-align: top; }
  .Filters-orderLink:hover {
    color: #666; }

.Filters-orderLink.is-selected {
  color: #666; }
  .Filters-orderLink.is-selected:hover {
    cursor: default; }

.Filters-orderLink--graph {
  line-height: 26px; }

.Filters-orderLink--size {
  font-size: 17px;
  line-height: 17px; }

.Filters-actionButton {
  margin-right: 10px; }

.Filters-actionsList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px; }

.Filters-actionsText {
  padding-left: 25px;
  color: #cccccc;
  font-size: 13px; }

.Filters-actionsLink {
  padding-left: 25px; }

.Filters-actionsLink.is--critical {
  color: #FF6C6C; }

.Filters-inner.items--selected {
  margin-top: -81px; }

.Filters-searchEnabler {
  display: inline;
  min-width: 65px; }

.Filters-typeItem.Filters-typeItem--searchField,
.Filters-searchItem {
  display: inherit; }

.Filters-typeItem.Filters-typeItem--searchEnabler {
  margin-right: 32px;
  padding-right: 32px; }

.Filters-typeItem.is-searching {
  display: none; }

.Filters-link:hover {
  text-decoration: none; }
  .Filters-link:hover .Filters-progressSize {
    color: #666666; }

@media only screen and (max-width: 959px) {
  .Filters-row {
    padding: 0 20px; } }

.Filters--navListing {
  position: fixed;
  top: 157px;
  left: 50%;
  width: 1000px;
  margin-left: -500px;
  background: #f9f9f9; }

.Filters--navListing.Filters--navListing--withFlashMessage {
  top: 238px; }

.Filters--navListing::after {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: 50%;
  width: 1020px;
  height: 18px;
  margin-left: -510px;
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, #f9f9f9, rgba(249, 249, 249, 0)); }

.Filters--navListing .Filters-separator {
  background-color: #dddddd; }

.Filters--navListing .Filters-searchInput {
  margin-top: -2px; }

/* hacking line-height between search and input */
.Filters--navListing .Button--create {
  height: 34px;
  margin-top: 48px;
  font-size: 11px; }

.Filters--navListing .Button--create.is-disabled:hover {
  background: none;
  color: #3aa9e3; }

.Filters--navListing.no-shadow::after {
  display: none; }

.Filters--static {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 81px;
  min-height: 81px;
  margin-left: auto; }

.Filters-darrow {
  position: relative;
  top: -1px;
  font-size: 6px; }

.Filters__margin-fix {
  margin-top: -28px; }

@media only screen and (max-width: 500px) {
  .Filters-searchEnabler {
    min-width: 0; }
  .Filters-searchLink span {
    display: none; }
  .categoriesDropdown-label {
    max-width: 80px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; } }

.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; }

/* FONT FACE */
.Footer {
  display: block;
  position: relative;
  width: 100%;
  padding: 40px 0;
  border-top: 1px solid rgba(46, 60, 67, 0.08);
  background: #F9F9F9; }

.Footer--light {
  background: WHITE; }

.Footer.Footer--public {
  padding-bottom: 0;
  overflow: hidden;
  border-top: 0;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility; }

.Footer-inner {
  margin-top: 40px; }

.Footer-inner.Footer-inner--public * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.Footer-inner .Footer-logo {
  position: absolute;
  top: 14px;
  left: 50%;
  margin-left: -20px; }

.Footer-inner--public .Footer-logo {
  position: static;
  top: auto;
  left: auto;
  margin: 0; }

.Footer-columns {
  border-top: 1px solid #EEE; }

.Footer-columns--footer {
  padding-bottom: 60px; }
  @media (max-width: 760px) {
    .Footer-columns--footer {
      padding-bottom: 40px; } }

.Footer-columns--noBorder {
  border-top: 0; }

.Footer-column {
  padding-bottom: 40px; }

.Footer-column--mobile {
  border-top: 1px solid #EEE; }

.Footer-columnTitle {
  margin-bottom: 12px;
  color: #2E3C43;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase; }

.Footer-link {
  transition: color 0.2s ease;
  color: #3AA9E3;
  line-height: 28px; }
  .Footer-link:hover {
    color: #2E3C43;
    text-decoration: none; }

.Footer-logo,
.Footer-credits {
  display: inline-block;
  vertical-align: middle; }

.Footer-credits {
  color: #979EA1;
  text-align: left; }

.Footer-title {
  display: block;
  color: #2E3C43;
  font-weight: 600; }

.Colophon {
  padding-top: 13px;
  text-align: right; }
  @media (max-width: 750px) {
    .Colophon {
      padding-top: 0;
      text-align: left; } }

.Colophon-item {
  display: inline-block; }

.Footer-item {
  display: block; }

.Newsletter {
  position: relative; }
  .Newsletter .hs-form {
    margin-right: 0 !important;
    padding-left: 0; }
    .Newsletter .hs-form .input {
      margin-right: 0;
      margin-bottom: 0; }
    .Newsletter .hs-form .hs-input {
      padding-right: 88px; }

.hs-newsletter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  transition: all 0.15s;
  border: 0;
  border-radius: 0 4px 4px 0;
  outline: none;
  background: #3AA9E3;
  color: #FFF;
  font: 400 13px Lato, sans-serif;
  text-transform: none;
  cursor: pointer; }
  .hs-newsletter:hover {
    background: #249fe0;
    color: #FFF; }

@media only screen and (max-width: 400px) {
  .Footer-inner .Footer-logo {
    position: absolute;
    left: 50%;
    margin-left: -20px; }
  .Footer-inner--public .Footer-logo {
    position: static;
    top: auto;
    left: auto;
    margin: 0; }
  .Footer-logo.Logo.Logo--grey {
    top: 25px; }
  .Footer .Footer-inner {
    margin-top: 45px; } }

@media (min-width: 760px) {
  .Footer-list {
    display: flex;
    align-items: center;
    width: 450px;
    padding: 0 14px; }
  .Footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto; }
  .Footer-inner .Footer-logo {
    position: static;
    top: auto;
    left: auto;
    margin: 0; }
  .Footer-list--primary {
    justify-content: flex-start; }
  .Footer-list--secondary {
    justify-content: flex-end; }
  .Footer-listItem {
    padding: 0 12px; }
  .Footer-listItem:first-child {
    padding-left: 0; }
  .Footer-listItem:last-child {
    padding-right: 0; } }

@media (min-width: 960px) {
  .Footer-list {
    padding: 0; }
  .Footer-inner .Footer-logo {
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    margin-left: auto; } }

/* FONT FACE */
.Form--minHeight {
  min-height: 400px; }

.Form-title {
  display: block;
  width: 100%;
  margin: 40px 0; }

.Form-titleHeader {
  display: block;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dddddd;
  color: #333333;
  font-size: 13px;
  font-weight: 700; }

.Form-titleText {
  width: 460px;
  color: #666666;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 22px; }

.Form-titleText--negative {
  color: #f15743; }

.Form-list {
  padding: 0 0 20px 160px;
  list-style-type: disc;
  color: #666666; }

.Form-listItem {
  color: #666666;
  font-size: 14px;
  font-weight: 300; }

.Form-modal {
  align-items: center;
  justify-content: center;
  width: 100%; }

.Form-row {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0; }

.Form-title + .Form-row {
  padding-top: 0; }

.Form-row.Form-row--centered {
  justify-content: center; }

.Form-row.Form-row--step {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 28px; }
  .Form-row.Form-row--step::before {
    content: '';
    margin-right: 12px;
    padding: 5px 10px;
    border: 1px solid #dddddd;
    border-radius: 50px;
    color: #666666;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px; }
  .Form-row.Form-row--step:first-child::before {
    content: '1'; }
  .Form-row.Form-row--step:nth-child(2)::before {
    content: '2'; }
  .Form-row.Form-row--step:nth-child(3)::before {
    content: '3'; }
  .Form-row.Form-row--step:nth-child(4)::before {
    content: '4'; }
  .Form-row.Form-row--step:nth-child(5)::before {
    content: '5'; }

.Form-row.Form-row--step:first-child {
  padding-top: 0; }

.Form-row.Form-row--step.is-done::before {
  border-color: #8EB83F;
  color: #8EB83F; }

.Form-row.has-label {
  margin-left: -140px; }

.Form-row.Form-row--spaced {
  padding: 20px 0; }

.Form-rowLabel {
  width: 140px;
  margin-right: 20px;
  text-align: right; }

.Form-rowLabel.Form-rowLabel--leftAligned {
  width: 140px;
  margin-right: 20px;
  text-align: left; }

.Form-rowLabel--small {
  width: 60px; }

.Form-label {
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  line-height: 40px;
  text-transform: capitalize; }

.Form-label.has-error {
  color: #f15743; }

.Form-label.Form-label--verticalAlignTop {
  line-height: inherit; }

.Form-label--multipleLines {
  line-height: 20px; }

.Form-label.Form-label--large {
  font-size: 15px; }

.Form-label.Form-label--step {
  flex-grow: 1;
  line-height: normal; }

.Form-rowPreview {
  width: 735px; }

.Form-rowData {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 380px;
  min-height: 40px;
  margin-right: 20px; }

.Form-rowData.Form-rowData--alignLeft {
  justify-content: flex-start; }

.Form-rowData--withLabel {
  margin-bottom: 30px; }

.Form-rowData--noMargin {
  margin: 0; }

.Form-rowData--noMinHeight {
  min-height: 0; }

.Form-rowData--full {
  width: 100%; }

.Form-rowData--longer {
  width: 460px; }

.Form-rowData--long {
  width: 380px; }

.Form-rowData--med {
  width: 300px; }

.Form-rowData--short {
  width: 170px; }

.Form-rowData--shorter {
  width: 130px; }

.Form-rowData--step {
  width: 260px;
  margin-right: 0; }

.Form-rowDataExtra {
  position: absolute;
  right: -52px; }

.Form-rowData ~ .Form-rowDataExtra {
  top: 10px; }

.Form-rowData--step ~ .Form-rowDataExtra {
  top: 0; }

.Form-input {
  position: relative;
  z-index: 2;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #CCC;
  border-radius: 4px;
  outline: none;
  color: #666; }
  .Form-input:focus {
    border-color: #999; }

.Form-inputField {
  position: relative;
  z-index: 2;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #CCC;
  border-radius: 4px;
  outline: none;
  color: #666; }

.Form-inputField--withLabel {
  padding: 0 12px;
  background: #FFF; }
  .Form-inputField--withLabel:hover {
    border-color: #999; }

.Form-inputField--withLabel.has-error {
  border-color: rgba(221, 59, 55, 0.6);
  color: #f15743; }

.Form-inputField--withLabel.has-error .Form-inputLabel {
  color: rgba(241, 87, 67, 0.6); }

.Form-inputField--withLabel.has-error .Form-input {
  color: #f15743; }

.Form-inputField--withLabel.has-error.is-focused {
  border-color: rgba(221, 59, 55, 0.6); }

.Form-inputField .Form-input {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none; }

.Form-inputField .Form-inputLabel {
  color: #CCC; }

.Form-input.Form-input--error {
  border-color: rgba(221, 59, 55, 0.6); }

.Form-input.Form-input--error:focus,
.Form-input.Form-input--error:hover {
  border-color: #dd3b37; }

.Form-input::-webkit-input-placeholder {
  color: #AAA; }

.Form-input:-moz-placeholder {
  color: #AAA; }

.Form-input::-moz-placeholder {
  color: #AAA; }

.Form-input:-ms-input-placeholder {
  color: #AAA; }

.Form-input--longer {
  width: 434px; }

.Form-input--long {
  width: 354px; }

.Form-input--med {
  width: 274px; }

.Form-input--short {
  width: 114px; }

.Form-input--shorter {
  width: 30px; }

.Form-input.has-icon {
  padding: 0 42px 0 12px; }
  .Form-input.has-icon.Form-input--longer {
    width: 414px; }
  .Form-input.has-icon.Form-input--long {
    width: 324px; }
  .Form-input.has-icon.Form-input--short {
    width: 92px; }
  .Form-input.has-icon.Form-input--longerMorePadding {
    width: 356px;
    padding-right: 100px; }

.Form-input.has-submit {
  padding: 0 70px 0 12px; }
  .Form-input.has-submit.Form-input--longer {
    width: 387px; }
  .Form-input.has-submit.Form-input--long {
    width: 333px; }
  .Form-input.has-submit.Form-input--med {
    width: 227px; }

.Form-inputSubmit {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 12px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  background: none; }

.Form-inputIcon {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 14px;
  color: #cccccc;
  font-size: 16px; }

.Form-inputIcon--clock {
  top: 11px; }

.Form-inputError {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: 38px;
  margin-top: -20px;
  padding: 0 12px;
  transition: margin 200ms ease-in-out;
  border: 1px solid #CCC;
  border-radius: 4px;
  background: #FFF4F4;
  color: #f15743;
  font-size: 13px;
  line-height: 38px; }

.Form-inputError.is-visible {
  margin-top: 15px; }

.Form-input.is-disabled {
  background: #f9f9f9; }

.Form-input.is-invalid {
  border-color: #f15743; }

.Form-inputField.is-focused {
  border-color: #999999; }

.Form-input--noBorder {
  border: none; }

.Form-input--noBkg,
.Form-input--noBkg.is-disabled {
  background: transparent; }

.Form-textarea {
  min-height: 110px;
  max-height: 110px;
  padding: 9px 12px; }

.Form-textarea.is-disabled {
  color: #cccccc; }

.Form-copyIcon {
  top: 10px;
  right: 12px;
  font-size: 18px; }

.Form-copyIcon.hover {
  color: #666666; }

.Form-text--preview {
  color: #999999;
  font-size: 13px;
  line-height: 22px; }

.Form-avatarPreview {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #f9f9f9; }

.Form-avatarPreviewImage {
  position: relative;
  max-width: 100px;
  border-radius: 4px;
  background: #f9f9f9; }

.Form-avatarPreviewLoader {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4); }

.Spinner.Form-avatarPreviewSpinner {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px; }

.Form-avatar .input-group {
  position: absolute;
  top: 10px;
  left: 120px; }

.Form-avatar .form-control {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  border: none;
  color: #999999; }

.Form-avatar .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
  color: #3aa9e3; }
  .Form-avatar .btn:hover {
    color: #227dbd;
    text-decoration: underline;
    cursor: pointer; }

.Form-avatar .btn[disabled] {
  color: #cccccc; }
  .Form-avatar .btn[disabled]:hover {
    color: #cccccc;
    text-decoration: none;
    cursor: default; }

.Form-link {
  color: #3aa9e3;
  text-decoration: underline; }
  .Form-link:hover {
    color: #227dbd;
    cursor: pointer; }

.Form-link.is-disabled {
  color: #cccccc;
  text-decoration: none; }
  .Form-link.is-disabled:hover {
    color: #cccccc;
    cursor: default; }

.Form-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 213px;
  height: 50px;
  padding: 0 10px 0 74px;
  border: 1px dashed #dddddd;
  border-radius: 2px;
  background: url("/assets/1.0.0-assets.162/images/layout/export-files.png") no-repeat 10px 10px #F3F3F3; }

.Form-upload.is-dropping {
  border-color: rgba(0, 0, 0, 0.4); }
  .Form-upload.is-dropping .Form-fileButton {
    display: none; }
  .Form-upload.is-dropping .Form-fileLabel {
    color: rgba(0, 0, 0, 0.4); }

.Form-file:hover .Button--main {
  background: #007FBD; }

.Form-file:hover .Button--negative {
  background-color: #b93f37; }

.Form-file input[type="file"] {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  margin: 0;
  -moz-transform: translate(26px, 0) scale(1);
  border: solid transparent;
  border-width: 1px 0 24px;
  opacity: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  direction: ltr; }

.Form-fileLabel {
  width: 130px;
  color: #999999;
  font-size: 12px;
  line-height: 17px; }

.Form-fileLabel--error {
  display: none;
  color: #f15743; }

.Form-fileButton {
  height: 26px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500; }

.Form .dz-preview {
  display: none; }

.Form-fileDropzone {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px dashed #dddddd;
  border-radius: 4px;
  background: #f9f9f9;
  color: #999999;
  font-size: 15px;
  line-height: 38px;
  text-align: center; }

.Form-rowInfo {
  display: flex;
  max-width: 380px;
  line-height: 40px; }

.Form-rowInfoText {
  color: #cccccc;
  font-size: 13px; }

.Form-rowInfoText--centered {
  text-align: center; }

.Form-rowInfoText--smaller {
  font-size: 12px; }

.Form-rowInfoText--block {
  width: 100%; }

.Form-rowInfoText--multipleLines {
  line-height: 20px; }

.Form-rowInfoText--error {
  color: #DD3B37; }

.Form-rowInfoText--error .Form-link {
  color: #DD3B37;
  text-decoration: underline; }

.Form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0;
  padding: 20px 0;
  border-top: 1px solid #dddddd; }

.Form-footerText {
  color: #999999;
  font-size: 15px;
  font-weight: 300; }

.Form-footerIcon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #F2C000;
  border-radius: 20px;
  background: #F6D35C;
  color: WHITE;
  font-size: 13px;
  line-height: 20px !important;
  text-align: center; }

.Form-tags {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 38px;
  padding: 0;
  border: 1px solid #CCC;
  border-radius: 4px;
  outline: none;
  background: WHITE;
  font-size: 12px;
  line-height: 16px; }

.Form-tagsList.tagit {
  display: flex;
  align-items: flex-start;
  padding: 0 5px 5px; }

.Form-tagsList.tagit .tagit-choice {
  margin: 5px 5px 0 0;
  padding: 0 30px 0 11px;
  border-radius: 2px;
  background: #EFF8FF;
  color: #746E76;
  line-height: 28px; }

.Form-tagsList.tagit .tagit-choice .tagit-close {
  right: 10px;
  line-height: normal; }

.Form-tagsList.tagit .tagit-choice .tagit-close .text-icon {
  display: inline-block;
  color: #C5CCD1; }
  .Form-tagsList.tagit .tagit-choice .tagit-close .text-icon:hover {
    color: #AAA; }

.Form-tagsList.tagit li.tagit-new {
  flex: 1;
  padding: 7px 4px 2px 7px; }

.Form-tagsList.tagit .ui-autocomplete-input::-webkit-input-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.Form-tagsList.tagit .ui-autocomplete-input::-moz-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.Form-tagsList.tagit .ui-autocomplete-input:-ms-placeholder {
  color: #AAA;
  font-style: italic;
  font-weight: 500; }

.Form-tags.is-focus {
  border-color: #1181FB; }

.Form-tags.is-disabled {
  background: #f9f9f9; }
  .Form-tags.is-disabled .tagit-choice {
    padding: 0 11px; }
  .Form-tags.is-disabled .tagit-choice .tagit-close {
    display: none; }

@charset "UTF-8";
.Checkbox {
  display: flex;
  align-items: center; }

.Checkbox-input {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #dddddd;
  border-radius: 3px;
  outline: none;
  background: white; }
  .Checkbox-input:hover {
    border-color: #AAA; }

.Checkbox-input:focus {
  border-color: #AAA; }

.Checkbox-input.is-checked::after {
  content: "\2714";
  position: absolute;
  top: -3px;
  left: 1px;
  color: #0090D7;
  font-size: 16px; }

.Checkbox-label {
  margin-left: 8px;
  color: #999999; }

.Checkbox.is-disabled .Checkbox-input {
  opacity: 0.4; }
  .Checkbox.is-disabled .Checkbox-input:hover {
    border-color: #dddddd;
    cursor: default; }
  .Checkbox.is-disabled .Checkbox-input:focus {
    border-color: #dddddd; }

.Checkbox.is-disabled .Checkbox-label {
  opacity: 0.4; }

.Checkbox-strong {
  color: #2E3C43; }

/* FONT FACE */
.ColorPicker {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 3px; }
  .ColorPicker::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px; }

.UserSettings-ColorPicker {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 3px; }
  .UserSettings-ColorPicker::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 98px;
    height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px; }

.Input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #666666; }
  .Input ::-webkit-input-placeholder {
    color: #cccccc; }
  .Input :-moz-placeholder {
    color: #cccccc; }
  .Input ::-moz-placeholder {
    color: #cccccc; }
  .Input :-ms-input-placeholder {
    color: #cccccc; }

.Input--slim {
  height: 28px;
  padding-right: 10px;
  padding-left: 10px; }

.Input.is-loading {
  background: url("/assets/1.0.0-assets.162/images/layout/loader_transparent.gif") no-repeat 10px 50%; }

/*
  <div class="form_spinner">
    <input class="value" type="text" value="0.6" />
    <a href="#plus" class="plus"></a>
    <a href="#minus" class="minus"></a>
  </div>
*/
.form_spinner {
  display: inline-block;
  position: relative;
  width: auto;
  min-width: 20px;
  margin: 0;
  padding: 2px 19px 2px 4px;
  border: 1px solid #9E9E9E;
  border-radius: 3px;
  background: white;
  line-height: 20px; }
  .form_spinner:hover {
    cursor: pointer; }
  .form_spinner:hover,
  .form_spinner .input:hover {
    border: 1px solid #7E7E7E; }
  .form_spinner:hover input.value {
    color: #333; }
  .form_spinner input.value {
    width: 25px;
    margin: 0;
    padding: 0;
    float: none;
    border: none;
    background: none;
    color: #666;
    font-size: 13px;
    line-height: 15px;
    text-align: left; }
    .form_spinner input.value:focus {
      outline: none;
      color: #333; }
  .form_spinner a {
    position: absolute;
    right: 0;
    width: 14px;
    height: 11px;
    border-left: 1px solid #A8A8A8;
    text-indent: -9999px; }
    .form_spinner a::before {
      content: ' ';
      position: absolute;
      left: 5px;
      width: 0;
      height: 0;
      border-right: 2px solid transparent;
      border-left: 2px solid transparent; }
    .form_spinner a.plus {
      top: 0;
      border-bottom: 1px solid #A8A8A8; }
      .form_spinner a.plus::before {
        top: 4px;
        border-bottom: 3px solid #999; }
    .form_spinner a.minus {
      bottom: 0;
      height: 12px; }
      .form_spinner a.minus::before {
        top: 5px;
        border-top: 3px solid #999; }
    .form_spinner a:hover.plus::before {
      border-bottom: 3px solid #666; }
    .form_spinner a:hover.minus {
      bottom: 0; }
      .form_spinner a:hover.minus::before {
        border-top: 3px solid #666; }
  .form_spinner.disabled {
    background: #F4F4F4 !important; }
    .form_spinner.disabled a {
      opacity: 0.5;
      background: #F4F4F4 !important; }
      .form_spinner.disabled a:hover {
        cursor: default; }
    .form_spinner.disabled:hover {
      cursor: default; }

.RadioButton {
  display: flex;
  align-items: center; }

.RadioButton-input {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #dddddd;
  border-radius: 16px;
  outline: none;
  background: #FFF; }
  .RadioButton-input:hover {
    border-color: #AAA; }

.RadioButton-input.is-checked::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 12px;
  background: #4A90E2; }

.RadioButton-input.is-disabled {
  cursor: default; }
  .RadioButton-input.is-disabled::before {
    background: #DDD;
    cursor: default; }

.RadioButton-label {
  margin-left: 8px;
  color: #999999; }

.RadioButton-label.dark-color {
  color: #333333; }

.RadioButton.is-checked .RadioButton-label {
  color: #333333; }

.RadioButton.is-alert .RadioButton-label {
  color: #ea703d; }

.RadioButton.is-alert .RadioButton-input {
  border-color: #ea703d; }
  .RadioButton.is-alert .RadioButton-input::before {
    background: #ea703d; }

.RadioButton.is-warning .RadioButton-label {
  color: #c67b44; }

.RadioButton.is-warning .RadioButton-input {
  border-color: #c67b44; }
  .RadioButton.is-warning .RadioButton-input::before {
    background: #c67b44; }

.RadioButton.is-disabled .RadioButton-input {
  opacity: 0.4; }
  .RadioButton.is-disabled .RadioButton-input:hover {
    border-color: #dddddd;
    cursor: default; }
  .RadioButton.is-disabled .RadioButton-input:focus {
    border-color: #dddddd; }

.RadioButton.is-disabled .RadioButton-label {
  opacity: 0.4; }

.RadioButtonInput {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  opacity: 0;
  vertical-align: middle;
  cursor: pointer; }

.RadioButtonInput-face {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #dddddd;
  border-radius: 50%;
  outline: none;
  background: #FFF;
  cursor: pointer; }
  .RadioButtonInput-face::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%; }

.RadioButtonInput:checked + .RadioButtonInput-face::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4A90E2; }

.RadioButtonInput:disabled + .RadioButtonInput-face {
  opacity: 0.4; }
  .RadioButtonInput:disabled + .RadioButtonInput-face:focus {
    border-color: #dddddd; }
  .RadioButtonInput:disabled + .RadioButtonInput-face:hover {
    border-color: #dddddd;
    cursor: default; }

.RadioButtonInput:hover + .RadioButtonInput-face {
  border-color: #AAA; }

.UISlider {
  position: relative;
  width: 140px;
  height: 10px; }

.UISlider.ui-slider {
  border-radius: 10px;
  background: white; }

.UISlider.ui-slider::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px; }

.UISlider .ui-slider-range-min {
  height: 10px;
  border-radius: 10px;
  background-color: #1181FB; }

.UISlider .ui-slider-handle {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 2px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border-radius: 18px;
  outline: none;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px; }
  .UISlider .ui-slider-handle.ui-state-active, .UISlider .ui-slider-handle.ui-state-focus, .UISlider .ui-slider-handle.ui-state-hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px; }

.UISlider.ui-slider-disabled {
  opacity: 0.6; }

.UISlider.ui-slider-disabled .ui-slider-handle {
  cursor: default; }

.Toggler {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 20px; }

.Toggler.is-disabled {
  opacity: 0.4; }
  .Toggler.is-disabled label {
    cursor: default; }

.Toggler input {
  visibility: hidden; }

.Toggler label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 20px;
  transition: all 150ms ease;
  border-radius: 30px;
  background-color: #DDD;
  cursor: pointer; }

.Toggler label::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  transition: all 150ms ease;
  border-radius: 30px;
  background-color: #FFF; }

.Toggler input:checked + label::before {
  left: 20px; }

.Toggler input:checked + label {
  background-color: #73C86B; }

.Toggler--grey label {
  width: 34px;
  height: 18px;
  border: 1px solid #BBB;
  background: #FFF;
  box-shadow: none; }

.Toggler--grey label::before {
  top: 3px;
  background: #BBB; }

.Toggler--grey input:checked + label::before {
  left: 19px; }

.Toggler--grey input:checked + label {
  background-color: #FFF; }

/* FONT FACE */
.Grid {
  display: flex; }

.Grid-inner {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin-right: -20px;
  margin-left: -20px; }

.Grid-inner--hcenter {
  justify-content: center; }

.Grid-inner--vcenter {
  align-items: center; }

.Grid-inner--bottom {
  margin-bottom: -20px; }

.Grid-cell {
  padding-right: 20px;
  padding-left: 20px; }

.Grid-inner--nopadding {
  margin-right: -5px;
  margin-left: -5px; }
  .Grid-inner--nopadding > .Grid-cell {
    padding-right: 5px;
    padding-left: 5px; }

.Grid-inner--between {
  align-items: center;
  justify-content: space-between; }

.Grid-inner--shortPadding {
  margin-right: -10px;
  margin-left: -10px; }
  .Grid-inner--shortPadding > .Grid-cell {
    padding-right: 10px;
    padding-left: 10px; }

.Grid-cell--col1 {
  flex: 0 0 8.3334%;
  max-width: 8.3334%; }

.Grid-cell--col2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%; }

.Grid-cell--5cols {
  flex: 0 0 20%;
  max-width: 20%; }

.Grid-cell--col3 {
  flex: 0 0 25%;
  max-width: 25%; }

.Grid-cell--col4 {
  flex: 0 0 33.3334%;
  max-width: 33.3334%; }

.Grid-cell--col5 {
  flex: 0 0 41.6665%;
  max-width: 41.6665%; }

.Grid-cell--col6 {
  flex: 0 0 50%;
  max-width: 50%; }

.Grid-cell--col7 {
  flex: 0 0 58.3331%;
  max-width: 58.331%; }

.Grid-cell--col8 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%; }

.Grid-cell--col9 {
  flex: 0 0 75%;
  max-width: 75%; }

.Grid-cell--col10 {
  flex: 0 0 83.33%;
  max-width: 83.33%; }

.Grid-cell--col11 {
  flex: 0 0 91.6666%;
  max-width: 91.6666%; }

.Grid-cell--col12 {
  flex: 100%;
  max-width: 100%; }

@media (max-width: 960px) {
  .Grid-cell--col3--tablet {
    flex: 0 0 25%;
    max-width: 25%; }
  .Grid-cell--col6--tablet {
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--col4--tablet {
    flex: 0 0 33.3334%;
    max-width: 33.3334%; }
  .Grid-cell--col12--tablet {
    flex: 0 0 100%;
    max-width: 100%; } }

@media (max-width: 760px) {
  .Grid-cell--col8--mobile {
    flex: 0 0 66.6666%;
    max-width: 66.6666%; }
  .Grid-cell--col6--mobile {
    flex: 0 0 50%;
    max-width: 50%; }
  .Grid-cell--col12--mobile {
    flex: 0 0 100%;
    max-width: 100%; } }

@media (max-width: 400px) {
  .Grid-cell--col12--small,
  .Grid-cell--col6--mobile {
    flex: 0 0 100%;
    max-width: 100%; } }

.Header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  background: #1785FB; }

.Header-inner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between; }

.Header-navigationList {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.Header-navigationBreadcrumb {
  display: flex;
  align-items: center;
  margin-left: 14px; }

.Header-navigationBreadcrumbItem {
  padding-left: 6px;
  color: rgba(255, 255, 255, 0.6); }

.Header-navigationBreadcrumbParagraph {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap; }

.Header-navigationItem {
  margin-left: 24px; }

.Header-navigationLink {
  transition: all 0.15s;
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 27px; }
  .Header-navigationLink:hover {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none; }

.Header-navigationBreadcrumbItem:first-child {
  padding-left: 0; }

.Header-navigationBreadcrumbLink {
  color: #FFF; }
  .Header-navigationBreadcrumbLink.is-disabled {
    color: rgba(255, 255, 255, 0.8);
    cursor: default; }

.Header-settingsList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%; }

.Header-settingsItem {
  position: relative;
  margin-left: 24px;
  text-transform: uppercase; }

.Header-settingsLink--public {
  font-size: 13px;
  font-weight: 700;
  text-transform: none; }

.Header-settingsLink {
  transition: all 0.2s;
  color: #FFF; }
  .Header-settingsLink:hover {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none; }

.Header-settingsLink.Header-settingsLink--dashboard {
  color: #FFF; }

.Header-settingsLink.Header-settingsLink--dashboard:hover {
  text-decoration: underline; }

.Header-darrow {
  position: relative;
  top: -1px;
  font-size: 6px; }

@media (min-width: 400px) {
  .Header-logoText {
    margin-left: 12px; } }

@media only screen and (max-width: 360px) {
  .Header .Header-inner {
    height: 64px; }
  .Header {
    height: 64px; }
  .Header-settingsItem--avatar {
    height: 32px; }
  .Header .Header-settingsList .UserAvatar-img--medium {
    width: 32px;
    height: 32px; }
  .Header .Header-settingsList .Button {
    height: 32px;
    padding: 0 20px; }
  .Header .Logo--avatar {
    width: 32px;
    height: 32px;
    line-height: 45px; }
  .Header .Logo--avatar i {
    font-size: 22px; } }

/* FONT FACE */
.BreadcrumbsDropdown {
  width: 260px; }

.BreadcrumbsDropdown--compact {
  width: 120px; }

.BreadcrumbsDropdown-list {
  display: block;
  width: 100%;
  margin: 0 !important; }

.BreadcrumbsDropdown-listItem {
  display: block;
  margin-top: 0 !important;
  padding: 16px; }

.BreadcrumbsDropdown-listItem.is-dark {
  border-radius: 0 0 2px 2px;
  background: #f9f9f9; }

.BreadcrumbsDropdown-listItem.is-first {
  border-radius: 2px; }

.BreadcrumbsDropdown-options {
  display: inline-block;
  vertical-align: top; }

.BreadcrumbsDropdown-icon {
  width: 20px; }

.BreadcrumbsDropdown-optionsItem {
  display: block;
  font-size: 13px;
  font-weight: 500; }

.BreadcrumbsDropdown-optionsItem.has-margin {
  margin-top: 10px; }

.BreadcrumbsDropdown-optionsItem.is-selected {
  color: #333333; }
  .BreadcrumbsDropdown-optionsItem.is-selected:hover {
    text-decoration: none;
    cursor: default; }

.BreadcrumbsDropdown-lockIcon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: #cccccc;
  color: white;
  font-size: 10px;
  font-weight: 300; }

/* FONT FACE */
/**
  *  Progress element styles
  *
  *  It needs:
  *  - Height of the progress "bar".
  *  - Border radius of the element.
  *  - If it needs a white gradient over it.
  *  - If bars needs a min width.
  *
  */
/* FONT FACE */
.SettingsDropdown {
  min-width: 220px; }

.SettingsDropdown-item:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }

.SettingsDropdown-item:last-child {
  margin-bottom: 0 !important; }

.SettingsDropdown-sameline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between; }

.SettingsDropdown-itemLink.SettingsDropdown-itemButtonLink {
  color: #3aa9e3; }

.SettingsDropdown-itemLink.SettingsDropdown-itemButtonLink:hover {
  color: #227dbd;
  text-decoration: none; }

.SettingsDropdown-itemLink:hover {
  text-decoration: none; }
  .SettingsDropdown-itemLink:hover .SettingsDropdown-itemLinkText {
    text-decoration: underline; }

.SettingsDropdown-accountType {
  padding: 2px 8px;
  background: #F9F9F9; }

.SettingsDropdown-email {
  margin-top: 3px !important; }

.SettingsDropdown-progressBar {
  position: relative; }
  .SettingsDropdown-progressBar div.progress-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 9px;
    background: #F5F5F5; }
    .SettingsDropdown-progressBar div.progress-bar.overflow-visible {
      overflow: visible; }
    .SettingsDropdown-progressBar div.progress-bar .bar-3,
    .SettingsDropdown-progressBar div.progress-bar .bar-2,
    .SettingsDropdown-progressBar div.progress-bar .bar-1,
    .SettingsDropdown-progressBar div.progress-bar .bar-0 {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 9px; }
    .SettingsDropdown-progressBar div.progress-bar .bar-3 {
      z-index: 3;
      border-right: 1px solid #FFF;
      background: #7DD4FF; }
    .SettingsDropdown-progressBar div.progress-bar .bar-2 {
      z-index: 2;
      background: #0090D7; }
    .SettingsDropdown-progressBar div.progress-bar .bar-1 {
      z-index: 1;
      background: #E5E5E5; }
      .SettingsDropdown-progressBar div.progress-bar .bar-1::after {
        display: none; }
      .SettingsDropdown-progressBar div.progress-bar .bar-1::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        border-right: 1px solid white; }
    .SettingsDropdown-progressBar div.progress-bar .bar-0 {
      background: url("/assets/1.0.0-assets.162/images/layout/unassigned_bkg.png") repeat-x left 0;
      z-index: 0; }
      .SettingsDropdown-progressBar div.progress-bar .bar-0::after {
        display: none; }
    .SettingsDropdown-progressBar div.progress-bar .danger {
      background: #f15743; }
    .SettingsDropdown-progressBar div.progress-bar .caution {
      background: #f8b85c; }

.SettingsDropdown-progressBar.is--inAlert div.progress-bar span {
  background: #f8b85c !important; }

.SettingsDropdown-progressBar.is--inDanger div.progress-bar span {
  background: #f15743 !important; }

.SettingsDropdown-itemLink--public {
  display: inline-block;
  transition: color 0.2s ease;
  color: #3AA9E3; }
  .SettingsDropdown-itemLink--public:hover {
    color: #2E3C43; }

.Dropdown > ul > li.SettingsDropdown-item--public > p {
  margin-top: 0; }
  .Dropdown > ul > li.SettingsDropdown-item--public > p:not(:last-child) {
    margin-bottom: 8px; }

/* FONT FACE */
.HighlightIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  line-height: 20px !important;
  text-align: center;
  vertical-align: top; }

.HighlightIcon.HighlightIcon--warning {
  border: 1px solid #F2C000;
  background: #F6D35C; }

/* FONT FACE */
.IllustrationIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  color: white;
  font-size: 20px; }

.IllustrationIcon--neutral {
  background-color: #0090d7; }

.IllustrationIcon--positive {
  background-color: #5fcc79; }

.IllustrationIcon--notice {
  background-color: #f2c000; }

.IllustrationIcon--sunrise {
  background-color: #f5a623; }

.IllustrationIcon--alert {
  background-color: #ea703d; }

.IllustrationIcon--negative {
  background-color: #cb3f29; }

.IllustrationIcon--cyan {
  background-color: #55c9af; }

.IllustrationIcon--royal {
  background-color: #7882b9; }

.IllustrationIcon--royalDark {
  background-color: #9013fe; }

.IllustrationIcon--magenta {
  background-color: #bd10e0; }

.IllustrationIcon--lingon {
  background-color: #ac638b; }

.IllustrationIcon--smaltBlue {
  background-color: #577590; }

.IllustrationIcon-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  text-transform: uppercase; }

/* FONT FACE */
.LayoutIcon {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  color: #cccccc;
  font-size: 22px; }

.LayoutIcon--positive {
  border-color: #8fb83f;
  color: #8fb83f; }

.LayoutIcon--negative {
  border-color: #f15743;
  color: #f15743; }

.LayoutIcon--warning {
  border-color: #f5a623;
  color: #f5a623; }

.LayoutIcon--darkGrey {
  border-color: rgba(0, 0, 0, 0.6);
  color: #666666; }

/* FONT FACE */
.AssetPane {
  position: relative;
  width: 945px;
  margin: 67px auto 60px; }

.AssetsList {
  display: block;
  position: relative;
  height: auto;
  max-height: none;
  margin: 35px 0 70px;
  padding-left: 5px;
  overflow: auto; }

.Form-row.Form-row--streched {
  width: 780px;
  margin: auto; }

.CreateDialog-footerShadow.CreateDialog-footerShadow--tall {
  top: -48px;
  height: 48px; }

.ImportPanel-state.is-active {
  display: block; }

/* stylelint-disable */
.IntermediateInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  text-align: center; }

_:-ms-lang(x),
.IntermediateInfo {
  padding-top: 100px; }

.IntermediateInfo--flex {
  min-height: 0; }

.IntermediateInfo-title--error {
  color: #f15743; }

.IntermediateInfo.IntermediateInfo--pullUp {
  margin-top: -50px;
  padding: 0 0 50px; }

.LayerOnboarding {
  display: flex;
  height: 100%;
  pointer-events: auto; }

.LayerOnboarding-footer {
  margin-top: 28px; }

.LayerOnboarding-footerButtons {
  margin-bottom: 20px; }

.LayerOnboarding-contentWrapper {
  display: flex;
  z-index: 5;
  flex: 1;
  align-items: center;
  height: 100%;
  background: rgba(46, 60, 67, 0.88);
  pointer-events: all; }

.LayerOnboarding-headerTitle {
  margin-bottom: 22px;
  color: #FFF;
  font-size: 26px;
  font-weight: 300; }

.LayerOnboarding-body {
  position: absolute;
  top: 32px;
  left: 380px;
  transition: top 0.3s ease-in-out, left 0.3s ease-in-out; }

.LayerOnboarding-contentBody {
  display: none; }

.LayerOnboarding-contentBody.is-step0 {
  display: block;
  z-index: 20;
  width: 0;
  margin: 0 80px; }

.LayerOnboarding-footer,
.LayerOnboarding-step {
  display: none; }

.LayerOnboarding-footer .LayerOnboarding-footerButtons,
.LayerOnboarding-contentWrapper .LayerOnboarding-step p {
  transition: opacity 200ms ease-in-out 1s;
  opacity: 1; }

.LayerOnboarding-header,
.LayerOnboarding-footer {
  min-width: 300px; }

.LayerOnboarding-headerText {
  width: 550px;
  margin-top: -12px;
  margin-bottom: 16px;
  color: #FFF;
  font-size: 26px;
  line-height: 34px; }

.LayerOnboarding-headerText.is-step4 {
  width: 285px; }

.LayerOnboarding-description {
  width: 445px;
  margin-bottom: 12px;
  transition: width 100ms ease-in-out;
  color: #FFF;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px; }

.LayerOnboarding-description.is-step4 {
  width: 285px; }

.Onboarding-listItem .LayerOnboarding-description {
  font-size: 15px; }

.LayerOnboarding-toolbarOverlay,
.LayerOnboarding-pads {
  z-index: 10;
  height: 100%;
  transition: width 300ms ease-in-out; }

.LayerOnboarding-padTop,
.LayerOnboarding-padMiddle,
.LayerOnboarding-padBottom {
  display: block;
  width: 100%;
  transition: height 300ms ease-in-out; }

.LayerOnboarding-toolbarOverlay,
.LayerOnboarding-padTop,
.LayerOnboarding-padBottom {
  opacity: 0.88;
  background: #2E3C43; }

.LayerOnboarding-padMiddle {
  position: relative;
  opacity: 1;
  background: transparent; }

.LayerOnboarding-padBottom {
  position: relative; }

.LayerOnboarding-contentBody--analysis.is-step0 {
  width: auto; }

.LayerOnboarding--analysis .LayerOnboarding-footer {
  display: block; }

.LayerOnboarding-contentWrapper--analysis {
  justify-content: center; }

.LayerOnboarding-description--analysis {
  width: 550px; }

.LayerOnboarding-description--style {
  width: 550px; }

.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.162/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; } }

.MamufasDialog .Dialog-headerIcon {
  margin-bottom: 12px;
  line-height: 41px; }
  .MamufasDialog .Dialog-headerIcon .CDB-IconFont-step {
    font-size: 24px; }

.MamufasDialog .Dialog-headerTitle {
  font-size: 16px; }

.MamufasDialog .Dialog-headerText {
  font-size: 14px; }

.MamufasDialog-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 0; }

.MamufasDialog .MamufasDialog-dropZone {
  position: relative;
  flex-grow: 100;
  width: 940px;
  margin: 0 auto 50px;
  border: 2px dashed #dddddd;
  border-radius: 4px; }

.MamufasDialog-dropZoneIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -26px;
  color: #cccccc;
  font-size: 60px; }

.MamufasDialog-footer {
  border-top: none;
  text-align: center; }

.MamufasDialog-footerInfo {
  color: #999999;
  font-size: 15px;
  font-weight: 300; }

.MamufasDialog-footerInfoIcon {
  width: 20px;
  height: 20px;
  border: 1px solid #F2C000;
  border-radius: 20px;
  background-color: #F6D35C;
  color: #FFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: center; }

/* FONT FACE */
.MapCard {
  position: relative;
  width: 288px;
  margin: 0 auto;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  background-color: white; }

.MapCard.MapCard--borderless .MapCard-header::after {
  display: none; }

.MapCard.MapCard--explore .MapCard-content {
  height: auto; }

.MapCard.MapCard--explore .MapCard-contentFooter {
  padding-top: 0;
  border-top: none; }

.MapCard.MapCard--explore .MapCard-header {
  background: url("/assets/1.0.0-assets.162/images/layout/default-map-big-bkg.png") no-repeat center 0;
  height: 220px;
  background-color: #DDD; }

.MapCard.MapCard--long .MapCard-content {
  height: auto; }

.MapCard.MapCard--long .MapCard-contentFooter {
  padding-top: 0;
  border-top: none; }

.MapCard.MapCard--long .MapCard-header {
  background: url("/assets/1.0.0-assets.162/images/layout/default-map-big-bkg.png") no-repeat center 0;
  background-color: #DDD; }

.MapCard.MapCard--squared .MapCard-content {
  height: 75px;
  padding: 17px 20px 20px; }

.MapCard.MapCard--squared .MapCard-contentFooter {
  justify-content: space-between;
  padding-top: 0;
  border-top: none; }

.MapCard.MapCard--squared .MapCard-contentFooter > *:not(:last-child) {
  margin-right: 20px; }

.MapCard.MapCard--squared .MapCard-contentFooter .MapCard-contentFooterIcon {
  margin-right: 0; }

.MapCard-contentFooterDetails--left {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.MapCard-contentFooterDetails--left > *:not(:last-child) {
  margin-right: 14px; }

.MapCard.MapCard--squared .MapCard-header {
  background: url("/assets/1.0.0-assets.162/images/layout/default-map-squared-bkg.png") no-repeat center 0;
  height: 220px; }

.MapCard-title {
  width: 100%; }

.MapCard-desc {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 40px; }
  .MapCard-desc .DefaultDescription {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; }
    .MapCard-desc .DefaultDescription::after {
      content: ' ';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 40px;
      height: 20px;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); }

.MapCard-desc--fake {
  display: block;
  width: auto;
  margin-bottom: 14px;
  padding: 0 30px;
  text-align: center; }

.MapCard-tags {
  position: relative;
  min-height: 18px; }
  .MapCard-tags a {
    line-height: 18px; }

.MapCard--selectable:hover {
  border-color: #AAA; }
  .MapCard--selectable:hover .MapviewsGraph-bar {
    fill: white;
    cursor: pointer; }

.MapCard--selectable.is-selected {
  border-color: rgba(23, 133, 251, 0.48); }
  .MapCard--selectable.is-selected .MapviewsGraph-bar {
    fill: white;
    cursor: pointer; }

.MapCard-header {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 168px;
  overflow: hidden;
  transition: opacity 250ms;
  border-radius: 2px 2px 0 0;
  opacity: 1;
  background: url("/assets/1.0.0-assets.162/images/layout/default-map-bkg.png") no-repeat center 0; }

.MapCard-header.is-loading .MapCard-loader {
  display: block; }

.MapCard-header--compact {
  height: 130px; }

.MapCard-header--mCompact {
  height: 96px; }

.MapCard-header--fake,
.MapCard.MapCard--squared .MapCard-header--fake {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: white; }

.MapCard-header--fake::after,
.MapCard.MapCard--squared .MapCard-header.MapCard-header--fake::after {
  right: 14px;
  left: 14px; }

.MapCard-headerFakeIcon {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #EEE;
  border-radius: 50px;
  background: transparent;
  color: #EEE;
  font-size: 20px;
  line-height: 48px !important;
  text-align: center; }

.MapCard-headerFakeIcon.CDB-IconFont-people {
  font-size: 30px;
  line-height: 35px !important; }

.MapCard-headerFakeIcon.CDB-IconFont-snake {
  font-size: 30px;
  line-height: 33px !important; }

.MapCard-headerFakeIcon.CDB-IconFont-points {
  font-size: 24px;
  line-height: 38px !important; }

.MapCard-headerFakeIcon.CDB-IconFont-notes {
  font-size: 26px; }

.MapCard-headerFakeIcon.CDB-IconFont-mountain {
  font-size: 28px;
  line-height: 40px !important; }

.MapCard-headerFakeIcon.CDB-IconFont-rectangles {
  font-size: 22px; }

.MapCard-header .MapCard-loader {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: transparent; }

.MapCard-header .MapCard-loader::before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  width: 600px;
  height: 2px;
  animation: pulsate 1.5s linear infinite;
  background: rgba(0, 0, 0, 0.25); }

.MapCard-preview {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 0 0; }

.MapCard.has-error .MapCard-error {
  display: block; }

.MapCard-error {
  background: url("/assets/1.0.0-assets.162/images/layout/map-card-error.png") no-repeat center 0;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 59px;
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 4px 4px 0 0; }

.MapCard-content {
  display: flex;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 185px;
  /* We should try avoid fix heights. For review */
  padding: 16px;
  transition: opacity 250ms;
  border-radius: 4px;
  opacity: 1; }

.MapCard-content--compact {
  height: auto;
  min-height: 44px; }

.MapCard-contentBody {
  width: 100%; }

.MapCard-itemTitlePermission {
  background-color: white; }

.MapCard-editButton {
  position: absolute;
  top: 0;
  right: 18px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  transition: opacity 250ms, top 200ms ease-in;
  border-radius: 50px;
  opacity: 0;
  background: #1181FB;
  color: #FFF;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  text-decoration: none; }
  .MapCard-editButton:hover {
    background: #046DDF;
    color: #FFF;
    text-decoration: none; }

.MapCard-editButton.CDB-IconFont {
  display: flex;
  align-items: center;
  justify-content: center; }

.MapCard:hover .MapCard-editButton {
  top: -25px;
  opacity: 1; }

.MapCard-contentBodyRow--flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between; }

.MapCard-contentBodyRow--fake {
  display: flex;
  align-items: center;
  justify-content: center; }

.MapCard-contentFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06); }

.MapCard.MapCard--borderless .MapCard-contentFooter {
  border-top: none; }

.MapCard-contentFooter.MapCard-contentFooter--lefty {
  justify-content: flex-start; }

.MapCard-contentFooter.MapCard-contentFooter--lefty > *:not(:last-child) {
  margin-right: 20px; }

.MapCard-contentFooter.MapCard-contentFooter--lefty .CDB-IconFont {
  margin-right: 3px; }

.MapCard--squared .MapCard-contentFooterIcons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between; }

.MapCard-contentFooterIcon,
.MapCard-contentFooterIcon .CDB-IconFont {
  color: #979EA1; }
  .MapCard-contentFooterIcon::before,
  .MapCard-contentFooterIcon .CDB-IconFont::before {
    color: #CBCED0; }

.MapCard-contentFooterDetails {
  display: inline-block;
  width: 100%; }

.MapCard-contentFooterDetails-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.MapCard-contentFooterDetails-actions > *:not(:last-child) {
  margin-right: 14px; }

.MapCard-contentFooterTitle {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between; }

.MapCard-contentFooterDetails--left {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.MapCard-contentFooterDetails--left > *:not(:last-child) {
  margin-right: 14px; }

.MapCard-contentFooterDetails--noright {
  justify-content: initial; }

.MapCard-contentBodyTimeDiff .UserAvatar,
.MapCard-contentFooterTimeDiff .UserAvatar {
  height: 18px;
  margin-left: 5px; }

.MapCard-fake {
  background: url("/assets/1.0.0-assets.162/images/layout/map-placeholder.png") no-repeat center center;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 300px;
  height: 352px;
  transition: opacity 250ms;
  opacity: 0; }

.MapsList.is-loading .MapCard,
.MapsList.is-loading .MapCard--selectable,
.MapsList.is-loading .MapCard--selectable.is-selected {
  border: 1px solid transparent;
  background-color: transparent;
  pointer-events: none; }
  .MapsList.is-loading .MapCard .MapCard-header,
  .MapsList.is-loading .MapCard--selectable .MapCard-header,
  .MapsList.is-loading .MapCard--selectable.is-selected .MapCard-header {
    opacity: 0; }
  .MapsList.is-loading .MapCard .MapCard-content,
  .MapsList.is-loading .MapCard--selectable .MapCard-content,
  .MapsList.is-loading .MapCard--selectable.is-selected .MapCard-content {
    opacity: 0; }
  .MapsList.is-loading .MapCard .MapCard-fake,
  .MapsList.is-loading .MapCard--selectable .MapCard-fake,
  .MapsList.is-loading .MapCard--selectable.is-selected .MapCard-fake {
    opacity: 1; }

.MapsList.is-loading .MapCard:hover,
.MapsList.is-loading .MapCard--selectable:hover,
.MapsList.is-loading .MapCard--selectable.is-selected {
  border: 1px solid transparent;
  background-color: transparent;
  cursor: default; }
  .MapsList.is-loading .MapCard:hover .MapCard-header,
  .MapsList.is-loading .MapCard--selectable:hover .MapCard-header,
  .MapsList.is-loading .MapCard--selectable.is-selected .MapCard-header {
    cursor: default; }

@keyframes pulsate {
  0% {
    right: 100%; }
  50% {
    right: 0%; }
  100% {
    right: -100%; } }

@media (min-width: 760px) {
  .MapCard {
    width: 298px; } }

@media only screen and (max-width: 320px) {
  .MapCard-contentFooter.MapCard-contentFooter--lefty {
    justify-content: flex-start; } }

@media only screen and (min-width: 321px) and (max-width: 760px) {
  .MapCard-contentFooter.MapCard-contentFooter--lefty {
    justify-content: flex-start; } }

@media only screen and (max-width: 544px) {
  .MapCard.MapCard--squared .MapCard-contentFooter > *:not(:last-child) {
    margin-right: 10px; }
  .MapCard-contentFooter.MapCard-contentFooter--lefty > *:not(:last-child) {
    margin-right: 10px !important; }
  .MapCardIcon-label {
    display: none; } }

.MapsList {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 960px;
  max-height: calc(100vh - 430px);
  margin: 4px auto 0;
  padding-right: 12px;
  padding-left: 12px;
  overflow: scroll; }

.MapsList-footer {
  width: 984px; }

.MapsList--centerItems {
  justify-content: center; }

.MapsList.is-hidden {
  display: none; }

.MapsList.is-bottom {
  margin-bottom: 120px; }

.MapsList-item {
  position: relative;
  width: 300px;
  margin: 20px 10px 0; }

.MapsList-item--wRightMargins {
  margin: 0 20px 0 0; }

.MapsList-item--woTopBottomMargins {
  margin-top: 0;
  margin-bottom: 0; }

.MapsList .MapsList-item.MapsList-item--fake {
  opacity: 0.6; }

@media only screen and (max-width: 400px) {
  .MapsList {
    padding: 0; }
  .MapsList .MapsList-item.MapsList-item--fake {
    display: none; }
  .MapsList .MapsList-item {
    margin: 10px auto; } }

@media only screen and (max-width: 760px) {
  .MapsList {
    flex-direction: row;
    justify-content: flex-start; }
  .MapsList .MapsList-item.MapsList-item--fake {
    display: none !important; } }

@media (min-width: 960px) {
  .MapsList .MapsList-item.MapsList-item--fake {
    display: block; } }

@media only screen and (max-width: 984px) {
  .MapsList {
    justify-content: center;
    width: 640px;
    padding: 0; }
  .MapsList .MapsList-item.MapsList-item--fake {
    display: block; }
  .MapsList .MapsList-item {
    margin: 10px auto; } }

@media only screen and (max-width: 663px) {
  .MapsList {
    justify-content: center;
    width: 100%;
    padding: 0; }
  .MapsList .MapsList-item.MapsList-item--fake {
    display: block; }
  .MapsList .MapsList-item {
    margin: 10px auto; } }

/* FONT FACE */
.MapviewsGraph {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25px;
  padding: 22px 16px 0;
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(70%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%); }

.MapviewsGraph-bar {
  fill: rgba(255, 255, 255, 0.5); }

.MapviewsGraph-tooltip {
  margin-left: 1px; }

.Modal-listActions {
  margin-top: 32px; }

.Modal-listActionsitem,
.Modal-icon {
  margin-right: 16px; }

.Modal-listActionsitem:last-child {
  margin-right: 0; }

.Modal-icon {
  margin-top: 6px;
  line-height: 34px;
  /* align-items: baseline doesnt work correctly in ff */ }

.Modal-icon--svg {
  width: 25px;
  height: 25px; }

.Modal-listTextItem {
  margin-top: 32px; }

.Modal-listTextHighlight {
  display: inline-block;
  padding: 4px 5px;
  border-radius: 2px;
  background: #F9F9F9; }

.Modal-listTextHighlight.is-code {
  font: 500 12px 'Monaco', 'Monospace'; }

.Modal-listForm {
  margin-left: 24px; }

.Modal-listFormItem {
  margin-right: 32px; }

.Modal-listFormItem.is-disabled {
  color: #CBCED0; }

.Modal-listFormItem:last-child {
  margin-right: 0; }

.Modal-addItem {
  width: 40px;
  height: 40px;
  border: 1px solid #DDD;
  border-radius: 4px; }

.Modal-titleBasemap {
  margin: 24px 0; }

.Modal-intervalLabel {
  font-size: 10px; }

/* animation analysis */
.Analysis-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 304px;
  height: 96px;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #2E3C43; }

.Analysis-animation.is-rounded {
  border-radius: 4px; }

.ModalBlockList-item.is-disabled .Analysis-animation {
  opacity: 0.6;
  background-color: transparent;
  pointer-events: none;
  filter: grayscale(100); }

.ModalBlockList-item.is-disabled .u-actionTextColor {
  display: none; }

.Analysis-info {
  padding: 16px; }

.SubmenuModal {
  margin-bottom: 32px;
  padding-bottom: 24px; }

.SubmenuModal-item::after {
  content: '';
  width: 3px;
  height: 6px;
  margin-left: 12px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iM3B4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDMgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5MaW5lIENvcHkgOTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPiAgICAgICAgPHBvbHlsaW5lIGlkPSJMaW5lLUNvcHktOSIgc3Ryb2tlPSIjQ0JDRUQwIiBzdHJva2Utd2lkdGg9IjEuMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS43NTAwMDAsIDMuMDAwMDAwKSByb3RhdGUoLTkwLjAwMDAwMCkgdHJhbnNsYXRlKC0xLjc1MDAwMCwgLTMuMDAwMDAwKSAiIHBvaW50cz0iLTAuMjQ5OTk5OTk2IDIuMjUgMS43NTAwMDAwMSAzLjI1IDMuNzUgMi4yNSI+PC9wb2x5bGluZT4gICAgPC9nPjwvc3ZnPg==); }

.SubmenuModal-item:last-child::after {
  display: none; }

.Analysis-moreInfo {
  width: 624px; }

.Analysis-moreInfoTitle {
  margin: 32px 0 20px; }

/* FONT FACE */
.NavButton {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #bbbbbb;
  border-radius: 30px;
  outline: none;
  background: transparent;
  color: #bbbbbb;
  font-size: 18px;
  font-weight: 300;
  line-height: 42px; }
  .NavButton:hover {
    border-color: #888888;
    color: #888888;
    text-decoration: none; }
  .NavButton > * {
    margin-right: auto;
    margin-left: auto; }

.NavButton--withText {
  color: #666666;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px; }

.NavButton--back {
  line-height: 40px; }

.Navmenu {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #dddddd; }

.Navmenu.Navmenu--white {
  background: white; }

.Navmenu.Navmenu--top {
  position: absolute;
  width: 100%; }

.Navmenu.is-fixed {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%; }

.Navmenu.Navmenu--borderless {
  border-bottom: none; }

.Navmenu.Navmenu--borderless .Navmenu-item {
  position: relative; }

.Navmenu.Navmenu--borderless .Navmenu-link {
  display: inline-block;
  line-height: 80px; }

.Navmenu-link.is-selected {
  color: #333333;
  font-weight: bold; }
  .Navmenu-link.is-selected::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #1181FB; }
  .Navmenu-link.is-selected:hover {
    text-decoration: none;
    cursor: default; }

.Navmenu-list {
  display: inline-block;
  height: 81px; }

.Navmenu-list::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.Navmenu-list.Navmenu-list--owner {
  float: left; }

.Navmenu-list.Navmenu-list--avatar {
  margin-right: 40px; }

.Navmenu-item {
  margin-right: 40px; }

.Navmenu-subItem {
  margin-left: 28px; }

.Navmenu-item.Navmenu-item:last-child {
  margin-right: 0; }

.Navmenu-item.Navmenu-item--buttons {
  position: relative;
  top: 3px; }

.Navmenu-item.Navmenu-item--like {
  position: relative;
  top: 2px; }

.Navmenu-item.Navmenu-item--withsep {
  position: relative; }

.Navmenu-subItem.Navmenu-subItem:first-child {
  margin-left: 0; }

.Navmenu-item,
.Navmenu-subItem {
  display: inline-block;
  text-transform: uppercase;
  vertical-align: middle; }

.Navmenu-rarrow {
  position: relative;
  top: -1px;
  width: 3px;
  height: 9px;
  margin-right: 20px;
  margin-left: -20px;
  color: #AAA;
  font-size: 6px; }

.Navmenu-separator {
  position: absolute;
  z-index: 0;
  top: 80px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06); }

.Navmenu-sep {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 1px;
  height: 20px;
  margin-right: 20px;
  margin-left: -20px;
  background-color: #DDD; }

.Navmenu-link {
  transition: all 0.3s;
  color: #979ea1; }

.Navmenu-link:hover {
  color: #2e3c43;
  text-decoration: none; }

.Navmenu-link.Navmenu-link--owner {
  display: inline-block;
  max-width: 150px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.Navmenu-link--action,
.Navmenu-item--action {
  color: #0090D7; }
  .Navmenu-link--action:hover,
  .Navmenu-item--action:hover {
    color: #007FBD; }

.Navmenu-icon {
  transition: all 0.2s;
  color: #BEC5C9;
  font-size: 18px; }

.Navmenu-icon:hover {
  color: #AAA; }

.Navmenu-icon.Navmenu-icon--twitter {
  position: relative;
  top: -2px;
  font-size: 22px; }

.Navmenu-hireLink:hover {
  color: #FFF; }

.Navmenu-editLink {
  display: none;
  width: auto;
  height: 36px;
  border: 1px solid #bbbbbb;
  color: #bbbbbb;
  font-size: 12px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle; }
  .Navmenu-editLink.Navmenu-editLink--create, .Navmenu-editLink.Navmenu-editLink--edit {
    border-color: #0090D7;
    color: #FFF; }

.Navmenu-editLink.Navmenu-editLink--edit {
  margin-left: 40px;
  border-color: #0090D7;
  color: #FFF; }

.Navmenu-editLink.Navmenu-editLink--oneclick {
  margin-left: 0; }

.Navmenu-editLink.Navmenu-editLink--more {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  padding: 0 16px;
  border-radius: 28px; }

.Navmenu-editLink.Navmenu-editLink--more:hover {
  border-color: #888888;
  color: #888888; }

.Navmenu-editLink:hover {
  text-decoration: none; }

.Navmenu-editLink.is-active {
  display: inline-block; }

.Navmenu-share {
  display: inline-block;
  vertical-align: middle; }

.Navmenu-shareLink {
  display: none;
  position: relative;
  top: 2px;
  margin-right: 12px; }

.Navmenu-shareList {
  display: inline-block;
  transition: all 0.2s; }

.Navmenu-closeLink {
  position: relative;
  top: -2px; }

.Navmenu-actionIcon {
  margin-right: 5px;
  font-size: 10px; }

.Navmenu-tableIcon {
  position: relative;
  top: -2px; }

div.cartodb-timeslider {
  margin-bottom: 0; }

@media (max-width: 960px) {
  .Navmenu-shareLink {
    display: inline-block; }
  .Navmenu-shareList {
    display: block;
    position: absolute;
    right: 10px;
    height: 81px;
    margin-top: 0;
    background: #FFF; }
  .Navmenu-shareList.is-active {
    width: 200%;
    margin-top: -81px; }
  .Navmenu-sep {
    top: 0; }
  .Navmenu-item.Navmenu-item.last-child {
    margin-right: 0; }
  .Navmenu-editLink {
    display: block; } }

.NoResults {
  color: #cccccc;
  font-size: 13px;
  font-style: italic;
  line-height: 20px; }
  .NoResults:hover {
    text-decoration: none; }

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  margin: 0.67em 0;
  font-size: 2em; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #FF0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  /* 3 */
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 3 */
  -webkit-appearance: button;
  /* 2 */ }

/**
 * 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 {
  padding: 0;
  border: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using ` !important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
  -webkit-appearance: textfield;
  /* 1 */ }

/**
 * 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 {
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 1px solid #C0C0C0; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  padding: 0;
  /* 2 */
  border: 0;
  /* 1 */ }

/**
 * 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-spacing: 0;
  border-collapse: collapse; }

td,
th {
  padding: 0; }

/* FONT FACE */
.NotSupportedDialog {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: 50%;
  width: 356px;
  height: 213px;
  margin-top: -107px;
  margin-left: -178px;
  padding: 0;
  background-color: WHITE;
  color: #666666;
  text-align: center; }

.NotSupportedDialog-title {
  display: inline-block;
  width: 77px;
  margin: 30px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #dddddd;
  font-size: 13px;
  font-weight: bold;
  vertical-align: top; }

.NotSupportedDialog-desc {
  display: block;
  margin: 12px 0 0;
  padding: 0 40px;
  font-size: 15px; }

.NotSupportedDialog-list {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #dddddd;
  list-style: none; }

.NotSupportedDialog-item {
  margin: 0;
  padding: 0;
  float: left;
  border-right: 1px solid #dddddd; }
  .NotSupportedDialog-item.is-last {
    border: none; }

.NotSupportedDialog-itemLink {
  display: block;
  width: 118px;
  height: 74px;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px; }

.NotSupportedDialog-itemLink--Safari {
  background: url("/assets/1.0.0-assets.162/images/layout/safari.png") no-repeat center center; }

.NotSupportedDialog-itemLink--Chrome {
  background: url("/assets/1.0.0-assets.162/images/layout/chrome.png") no-repeat center center; }

.NotSupportedDialog-itemLink--Firefox {
  background: url("/assets/1.0.0-assets.162/images/layout/firefox.png") no-repeat center center; }

/* === COLORS === */
/* Primary */
/* Neutral */
/* Accents */
/* Theme */
/* === TYPE === */
/* === LAYOUT === */
/* === COMPONENTS === */
/* defaults */
/* buttons */
/* header */
/* subheader */
/* navbar */
/* form */
/* dropdowns */
/* progressbar */
/* cards */
/* badges */
/* notification warning */
/* === PAGES === */
/* onboarding */
/* Jupyter code blocks
  Not our palette color, just copying jupyter look and feel */
/* lockout */
/* === Z_INDEX === */
/* === DEPRECATED === */
.NotificationBadge {
  display: inline-flex;
  align-items: center;
  margin: 0 1em 30px;
  padding: 0.4em 1em;
  border-radius: 30px;
  font-size: 12px; }
  .NotificationBadge--info {
    background-color: rgba(4, 122, 230, 0.2); }
    .NotificationBadge--info .NotificationBadge__icon {
      background-image: url("/assets/1.0.0-assets.162/images/info-icon.svg"); }
  .NotificationBadge--warning {
    background-color: rgba(255, 195, 0, 0.2); }
    .NotificationBadge--warning .NotificationBadge__icon {
      background-image: url("/assets/1.0.0-assets.162/images/warning-icon.svg"); }
  .NotificationBadge.no-margin {
    margin: 0; }
  .NotificationBadge__icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px; }

/* FONT FACE */
.NotificationsDropdown {
  width: 258px;
  margin: 0 !important;
  padding: 0 !important; }

.NotificationsDropdown-item {
  position: relative;
  margin: 15px !important;
  padding: 0 0 15px 25px !important; }

.NotificationsDropdown-item:not(:last-child) {
  margin: 0 15px;
  border-bottom: 1px solid #dddddd; }

.NotificationsDropdown-item:last-child {
  padding: 0 0 0 25px !important; }

.NotificationsDropdown-item ul {
  padding-left: 16px;
  list-style-type: disc; }

.NotificationsDropdown-item em {
  font-style: italic; }

.NotificationsDropdown-item strong {
  font-weight: bold; }

.NotificationsDropdown-item code {
  margin: 0;
  padding: 3px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.05);
  font-size: 85%;
  line-height: 20px; }

.NotificationsDropdown-icon {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  color: #B1B8C1;
  font-size: 11px;
  line-height: 20px;
  text-align: center; }

.NotificationsDropdown-title {
  color: #333333;
  font-size: 15px;
  line-height: 22px;
  text-transform: capitalize; }

.NotificationsDropdown-text {
  margin-top: 0 !important;
  color: #999999; }

.Notifications-iconCount {
  top: 21px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 20px;
  background: #cccccc;
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center; }

.Notifications-iconCount.new--items {
  background: #c74b43; }

.NotificationsDropdown-header {
  display: flex;
  align-items: center;
  background: none; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-text {
  color: #162945; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-icon {
  color: inherit; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-itemIcon--alert {
  border-color: #73C86B;
  color: #73C86B; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-itemIcon--positive {
  border-color: #8fb83f;
  color: #8fb83f; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-itemIcon--negative {
  border-color: #f15743;
  color: #f15743; }

.NotificationsDropdown-item.is-new .NotificationsDropdown-itemIcon--main {
  border-color: #0090d7;
  color: #0090d7; }

.NotificationsDropdown-item.NotificationsDropdown-item--no-notifications {
  padding-left: 0 !important; }

/* FONT FACE */
.OrganizationNotifications {
  margin: 40px 0 100px; }

.OrganizationNotifications-button {
  height: 34px; }

.OrganizationNotifications-textarea {
  height: 80px; }

.Md-container {
  position: absolute;
  z-index: 10;
  right: 1px;
  bottom: 1px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6); }

.field_with_errors .OrganizationNotifications-textarea {
  border: 1px solid rgba(241, 87, 67, 0.48);
  background: rgba(241, 87, 67, 0.04);
  color: #f15743; }

.field_with_errors + .Md-container {
  bottom: 3px; }

.Md-icon,
.Md-text {
  float: left; }

.Md-icon {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  background: #DDD;
  text-align: center; }

.Md-buttonInner {
  position: relative;
  top: -2px; }

.NotificationsList {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  margin: 0 auto; }

.NotificationsList-item {
  display: flex;
  position: relative;
  box-sizing: border-box;
  margin-bottom: -1px;
  padding: 20px 0;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
  .NotificationsList-item:first-child {
    padding-top: 0; }

.NotificationsList-itemCategory {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 40px;
  height: 40px;
  margin-top: 3px;
  margin-right: 16px;
  transition: opacity 250ms ease-in-out;
  border: none;
  opacity: 1;
  background: url("/assets/1.0.0-assets.162/images/layout/notification-types-icons.png") no-repeat 0 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .NotificationsList-itemCategory {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/notification-types-icons@2x.png");
      background-position: 0 0;
      background-size: 40px 40px; } }

.NotificationsList-itemCategory--warning {
  background: url("/assets/1.0.0-assets.162/images/layout/notification-types-icons.png") no-repeat 0 0; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .NotificationsList-itemCategory--warning {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/notification-types-icons@2x.png");
      background-position: 0 0;
      background-size: 40px 40px; } }

.NotificationsList-itemInfo {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  transition: opacity 250ms;
  opacity: 1; }

.NotificationsList-itemPrimaryInfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 400px;
  margin-right: 20px; }

.NotificationsList-itemSecondaryInfo {
  display: flex;
  flex-direction: column;
  margin-top: 0; }

.NotificationsList-itemMeta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px; }

.NotificationsList-itemTitle {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word; }
  .NotificationsList-itemTitle ul,
  .NotificationsList-itemTitle ol {
    padding-left: 20px;
    list-style-type: disc; }
  .NotificationsList-itemTitle ol {
    list-style-type: decimal; }
  .NotificationsList-itemTitle ul {
    list-style-type: disc; }
  .NotificationsList-itemTitle em {
    font-style: italic; }
  .NotificationsList-itemTitle strong {
    font-weight: 600; }
  .NotificationsList-itemTitle code {
    margin: 0;
    padding: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 85%;
    line-height: 25px; }

.NotificationsList-itemDescription {
  height: 16px;
  margin-top: 4px; }
  .NotificationsList-itemDescription abbr[title] {
    border: 0; }

.NotificationsList-itemLink {
  font-size: 12px; }

.Md-counter.Md-counter--negative,
.NotificationsList-itemLink--remove {
  color: #f15743; }

.onboardingNotification {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  color: #FFF;
  text-align: center; }

.onboardingNotification-link {
  color: #FFF;
  text-decoration: underline;
  cursor: pointer; }

.onboardingNotification-closeButton {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px; }

.Onboarding {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

.AnalysisCompletionDetails {
  display: flex;
  height: 100%; }

.Onboarding-fake {
  flex: 0 0 415px;
  height: 100%; }
  .is-editing .Onboarding-fake {
    flex: 0 0 560px; }

.Onboarding-body {
  width: 466px; }

.Onboarding-contentWrapper {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.88;
  background: #2E3C43;
  pointer-events: all; }

.Onboarding-headerTitle {
  margin-bottom: 12px;
  color: #FFF;
  font-size: 26px;
  font-weight: 300; }

.Onboarding-headerText {
  width: 550px;
  margin-bottom: 28px;
  color: #FFF;
  font-size: 26px;
  font-weight: 500;
  line-height: 22px; }

.Onboarding-headerDescription {
  margin-bottom: 28px;
  color: #FFF;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px; }

.Onboarding-description {
  margin-bottom: 12px;
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px; }

.Onboarding-footer {
  margin-top: 40px; }

.Onboarding-footerButtons {
  margin-bottom: 20px; }

.Onboarding-footer--marginRight {
  margin-right: 16px; }

.Onboarding-list {
  margin-left: 28px; }

.Onboarding-listItem {
  margin-bottom: 12px;
  color: #FFF;
  list-style: disc; }

.Onboarding-listItemValue {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 5px;
  border-radius: 2px;
  background: #1E272B;
  color: #FFF;
  font-family: 'Monaco', 'Monospace';
  font-size: 12px;
  font-weight: 500; }

.Onboarding-listItem .Onboarding-listItemDescription {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px; }

.Onboarding-readMore {
  color: #FFF;
  text-decoration: underline; }

.Onboarding-readMore:hover {
  text-decoration: none; }

.Onboarding.is-closing {
  /* "forwards" to keep the last keyframe's styles after animation ended */
  animation: fade-and-scale-out 80ms ease-in forwards; }

.Onboarding.is-opening {
  animation: fade-and-scale-in 100ms ease-out; }

@keyframes fade-and-scale-out {
  0% {
    transform: scale(1);
    opacity: 1; }
  80% {
    transform: scale(1.4);
    opacity: 0.05; }
  100% {
    transform: scale(2);
    opacity: 0; } }

@keyframes fade-and-scale-in {
  0% {
    transform: scale(2);
    opacity: 0; }
  10% {
    transform: scale(1.1);
    opacity: 0.9; }
  100% {
    transform: scale(1);
    opacity: 1; } }

.has-dark-text .Onboarding-headerTitle,
.has-dark-text .Onboarding-headerText,
.has-dark-text .Onboarding-headerDescription,
.has-dark-text .Onboarding-description,
.has-dark-text .Onboarding-listItem,
.has-dark-text .Onboarding-listItemValue,
.has-dark-text .Onboarding-readMore {
  color: #333; }

.OptionCards {
  display: flex;
  align-content: space-between;
  align-items: stretch;
  justify-content: center; }

.OptionCard {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-content: space-between;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background-color: white;
  text-align: center; }

.OptionCard--blocky {
  position: relative;
  min-width: 220px;
  max-width: 230px;
  padding: 32px 24px 27px; }

.OptionCard--code {
  position: relative;
  align-items: flex-start;
  max-height: 200px;
  overflow: hidden;
  background-color: #f9f9f9;
  color: #2E3C43;
  font-family: monospace;
  text-align: left; }

.OptionCard--codeRequest pre {
  white-space: pre-wrap; }

.OptionCard--codeResult {
  padding-bottom: 0; }

.OptionCard--codeResult,
.OptionCard--codeResult pre {
  overflow: hidden; }

.OptionCard--blocky .OptionCard-title {
  margin-bottom: 0; }

.OptionCard--blocky .OptionCard-desc {
  width: 100%;
  margin-top: 12px;
  margin-bottom: -12px; }

.OptionCard--onlyIcons {
  justify-content: center;
  min-height: 114px; }

.OptionCard.is-disabled {
  opacity: 0.4; }

.OptionCard.is-selected {
  border-color: #9dc2e0;
  background-color: #eff6fc;
  cursor: default; }

.OptionCard--static {
  cursor: default; }

.OptionCard:not(.is-disabled):not(.is-selected):not(.OptionCard--static):hover {
  border-color: #9dc2e0;
  background-color: #f5fafe;
  cursor: pointer; }

.OptionCard:not(:last-child) {
  margin-right: 20px; }

.OptionCard-icon {
  margin-bottom: 12px; }

.OptionCard-title {
  margin-bottom: 4px; }

.OptionCard-desc {
  width: 100%;
  margin-bottom: 12px; }

.OptionCard-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: linear-gradient(to bottom, rgba(249, 249, 249, 0.04) 0%, rgba(249, 249, 249, 0.95) 100%); }

/*
 * Represents a field in the export dialog with a check inside:
 *   ____________________________________
 *  |                                    |
 *  | [ ] Label                          |
 *  |____________________________________|
 *
 */
.OptionCheck {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #DDD;
  border-radius: 4px;
  background-color: #F9F9F9; }

.Pagination {
  display: flex;
  align-items: center;
  justify-content: center; }

.Pagination--shareList {
  display: flex;
  justify-content: flex-end;
  padding: 30px 0;
  border-top: 1px solid #dddddd; }

.Pagination--search {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%); }

.Pagination--searchShare {
  z-index: 5;
  bottom: 30px; }

.Pagination-label {
  margin-right: 16px; }

.Pagination-list {
  display: flex;
  align-items: center;
  justify-content: center; }

.Pagination-listItem {
  border: 1px #dddddd solid;
  border-right-width: 0; }

.Pagination-listItemInner {
  display: inline-block;
  padding: 10px 15px;
  border: none;
  outline: none;
  background: white; }

.Pagination-listItemInner--more {
  background-color: #f9f9f9;
  color: #cccccc; }

.Pagination-listItem:first-child {
  border-radius: 5px 0 0 5px; }
  .Pagination-listItem:first-child .Pagination-listItemInner {
    border-radius: 5px 0 0 5px; }

.Pagination-listItem:last-child {
  border-right-width: 1px;
  border-radius: 0 5px 5px 0; }
  .Pagination-listItem:last-child .Pagination-listItemInner {
    border-radius: 0 5px 5px 0; }

.Pagination-listItem.is-current,
.Pagination-listItem.is-current .Pagination-listItemInner--link,
.Pagination-listItem.is-current .Pagination-listItemInner--link:hover {
  color: #333333;
  text-decoration: none;
  cursor: default; }

/* FONT FACE */
.MapsGallery {
  width: 940px;
  margin: auto;
  padding: 40px 0;
  clear: both;
  overflow: hidden;
  border-top: 1px solid #DDD; }

.PecanMap-MapsList {
  display: block;
  position: relative;
  width: 5000px;
  height: 247px;
  margin: 0;
  padding: 0;
  clear: both;
  overflow: hidden;
  transition: margin 150ms; }

.PecanMap-MapsList.is--centered {
  margin: auto;
  transition: none; }

.MapCard-content--small {
  height: 35px;
  padding-top: 18px; }

.PecanMap-MapsList .DefaultTitle,
.PecanMap-MapsList .DefaultTitle a {
  color: #999;
  font-weight: 300; }

.PecanMap-MapsList .DefaultTitle strong {
  color: #666;
  font-weight: normal; }

.PecanMap-MapsList .DefaultTitle a:hover {
  color: #666; }

.PecanMap-navigation {
  position: absolute;
  z-index: 100000;
  width: 940px; }

.PecanMap-navigation.is-hidden {
  display: none; }

.PecanMap-navigationButton {
  position: absolute;
  top: 90px;
  padding: 0;
  transition: opacity 150ms;
  line-height: 40px !important; }

.PecanMap-navigationButton--prev {
  left: -80px; }

.PecanMap-navigationButton--next {
  right: -80px; }

.PencaMap-navigationButton.is-disabled:hover {
  border-color: #CCC;
  color: #CCC; }

.GalleryList-item.MapsList-item {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: top; }
  .GalleryList-item.MapsList-item:last-child {
    margin: 0; }

.Pecan-TorqueWirzardIcon {
  background: url("/assets/1.0.0-assets.162/images/layout/pecan_torque_wizard.png") center center;
  position: absolute;
  z-index: 10;
  top: 49px;
  left: 50%;
  width: 84px;
  height: 84px;
  margin-left: -42px; }

.PecanCard-footer {
  position: relative;
  margin: 0;
  padding: 0;
  border-top: 0; }

.NullCount {
  color: #999;
  font-size: 11px;
  font-style: italic;
  line-height: 0; }

.CategoryList {
  margin: 0;
  padding: 0;
  float: left;
  line-height: 0; }

.CategoryList .CategoryList-item {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2px 0 0;
  border-radius: 50%;
  background: #DDD;
  vertical-align: top; }

.CategoryList .CategoryList-item:last-child {
  margin: 0; }

/* -----------------------

 John Snow
 $20/month
-----------
 Up to 1MB
 ---------
 4 layers
 ---------
    ...
-----------

------------------------- */
.PricePlans {
  display: inline-block;
  width: 100%; }

.PricePlans-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 15px; }

.PricePlans-yearly {
  display: flex; }

.PricePlans-yearlyText {
  margin-left: 8px;
  color: #636d72;
  font-size: 15px; }

.PricePlans-yearlyText--highlight {
  color: #8fb83f;
  font-style: normal; }

.PricePlans-list {
  display: flex;
  justify-content: space-between;
  padding: 0;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background: #FFF; }

.PricePlans-item {
  width: 100%;
  padding: 20px 0 10px; }

.PricePlans-item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.PricePlans-item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.PricePlans-item.is-highlighted {
  background: #F6FBFE; }

.PricePlans-itemHeader {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 85px;
  text-align: center; }

.PricePlans-itemTitle {
  color: #2e3c43;
  font-size: 13px;
  text-transform: uppercase; }

.PricePlans-itemPrice {
  margin-top: 10px;
  color: #2e3c43;
  font-size: 14px; }

.PricePlans-itemPriceFigure {
  font-size: 32px; }

.PricePlans-itemPriceRest {
  color: #979ea1; }

.PricePlans-itemPriceException {
  margin-top: 5px;
  color: #979ea1;
  font-size: 12px; }

.PricePlans-button {
  display: block;
  width: 140px;
  margin: 0 auto;
  line-height: 38px; }

.PricePlans-button--grey {
  display: block;
  background-color: #cccccc;
  color: #FFF; }

.PricePlans-itemContent {
  padding: 0 30px; }

.PricePlans-itemContentAttr {
  display: block;
  padding: 10px 0;
  color: #2e3c43;
  font-size: 13px;
  text-align: center; }

.PricePlans-itemContentAttr.is-disabled {
  color: rgba(102, 102, 102, 0.4); }

.PricePlans-itemContentAttr.is-highlighted {
  color: #333333;
  font-weight: 700; }

.PricePlans-trialText {
  color: #636d72;
  font-size: 15px; }

.PricePlans-trialIcon {
  margin-left: 3px;
  color: #0090D7; }

.PrivacyToggler {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 40px;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle; }
  .PrivacyToggler:hover {
    text-decoration: none; }

.PrivacyToggler .CDB-IconFont {
  line-height: 20px; }

.PrivacyToggler--PUBLIC,
.PrivacyToggler--PUBLIC:hover {
  border-color: #8fb83f;
  color: #8fb83f; }

.PrivacyToggler--PRIVATE,
.PrivacyToggler--PRIVATE:hover {
  border-color: #f15743;
  color: #f15743; }

.PrivacyToggler.is-disabled {
  opacity: 0.5; }

/* FONT FACE */
/*
.PrivacyIndicator {
  display: inline-block;
  position: relative;
  color: $cTypography-secondary;
}
.PrivacyIndicator:hover {
  text-decoration: none;
  color: $cTypography-secondary;
}
.PrivacyIndicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: $cTypography-help;
  border-radius: 100%;
  margin: 2px 5px 0 0;
}
.PrivacyIndicator.is-public::before {
  background-color: $cPrivacy-public;
}
.PrivacyIndicator.is-private::before {
  background-color: $cPrivacy-private;
}
.PrivacyIndicator.is-link::before,
.PrivacyIndicator.is-password::before {
  background-color: $cPrivacy-other;
} */

/* FONT FACE */
.ServiceIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background: url("/assets/1.0.0-assets.162/images/layout/new_import_icons.png") no-repeat 0 0;
  vertical-align: middle; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .ServiceIcon {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/new_import_icons@2x.png");
      background-position: 0 0;
      background-size: 223px 40px; } }

.ServiceIcon--dropbox {
  width: 22px;
  height: 20px;
  background-position: -18px -20px; }

.ServiceIcon--gdrive {
  width: 25px;
  height: 20px;
  background-position: -40px -20px; }

.ServiceIcon--mailchimp {
  width: 18px;
  height: 20px;
  background-position: -65px -20px; }

.ServiceIcon--instagram {
  width: 20px;
  height: 20px;
  background-position: -145px -20px; }

.ServiceIcon--box {
  width: 29px;
  height: 20px;
  background-position: -194px -20px; }

.ServiceIcon--bigquery {
  width: 23px;
  background: url("/assets/1.0.0-assets.162/images/layout/connectors/bigquery.svg") no-repeat; }

/* FONT FACE */
/**
  *  Progress element styles
  *
  *  It needs:
  *  - Height of the progress "bar".
  *  - Border radius of the element.
  *  - If it needs a white gradient over it.
  *  - If bars needs a min width.
  *
  */
/* FONT FACE */
.SideMenu {
  display: block;
  z-index: 10;
  width: 260px;
  min-height: 600px;
  background: transparent; }

.SideMenu-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0; }

.SideMenu-progressBar {
  width: 140px; }
  .SideMenu-progressBar div.progress-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 9px;
    background: #F5F5F5; }
    .SideMenu-progressBar div.progress-bar.overflow-visible {
      overflow: visible; }
    .SideMenu-progressBar div.progress-bar .bar-3,
    .SideMenu-progressBar div.progress-bar .bar-2,
    .SideMenu-progressBar div.progress-bar .bar-1,
    .SideMenu-progressBar div.progress-bar .bar-0 {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 9px; }
    .SideMenu-progressBar div.progress-bar .bar-3 {
      z-index: 3;
      border-right: 1px solid #FFF;
      background: #7DD4FF; }
    .SideMenu-progressBar div.progress-bar .bar-2 {
      z-index: 2;
      background: #0090D7; }
    .SideMenu-progressBar div.progress-bar .bar-1 {
      z-index: 1;
      background: #E5E5E5; }
      .SideMenu-progressBar div.progress-bar .bar-1::after {
        display: none; }
      .SideMenu-progressBar div.progress-bar .bar-1::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        border-right: 1px solid white; }
    .SideMenu-progressBar div.progress-bar .bar-0 {
      background: url("/assets/1.0.0-assets.162/images/layout/unassigned_bkg.png") repeat-x left 0;
      z-index: 0; }
      .SideMenu-progressBar div.progress-bar .bar-0::after {
        display: none; }
    .SideMenu-progressBar div.progress-bar .danger {
      background: #f15743; }
    .SideMenu-progressBar div.progress-bar .caution {
      background: #f8b85c; }

.SideMenu-separator {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); }

.SideMenu-list {
  align-items: center;
  justify-content: space-between; }

.SideMenu-typeItem {
  position: relative;
  margin-bottom: 20px; }
  .SideMenu-typeItem:first-child {
    margin-left: 0; }
  .SideMenu-typeItem:last-child {
    margin-right: 0; }

.SideMenu-typeLink {
  display: inline-block;
  border: none;
  outline: none;
  background: transparent;
  color: #1181FB;
  font-size: 14px; }
  .SideMenu-typeLink:hover {
    text-decoration: underline; }

.SideMenu-typeLink.is-selected {
  color: #333333;
  font-weight: bold; }
  .SideMenu-typeLink.is-selected:hover {
    text-decoration: none;
    cursor: default; }

.SideMenu-typeLink.is-disabled {
  color: rgba(0, 0, 0, 0.3); }
  .SideMenu-typeLink.is-disabled:hover {
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    cursor: default; }

.SideMenu-typeLink.is-disabled {
  color: rgba(0, 0, 0, 0.3); }
  .SideMenu-typeLink.is-disabled:hover {
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    cursor: default; }

.SideMenu-separator {
  display: flex;
  width: 240px;
  height: 1px;
  margin: 20px 0;
  background-color: rgba(0, 0, 0, 0.1); }

/* FONT FACE */
.Spinner {
  position: relative;
  margin: 0 auto;
  animation: load8 1.1s infinite linear;
  border-top: 2px solid #dddddd;
  border-right: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  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); } }

/* FONT FACE */
.SupportBanner {
  display: block;
  width: 100%;
  padding: 20px 0 40px; }

.SupportBanner-inner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between; }

.SupportBanner-link {
  display: block; }

.SupportBanner-info {
  width: 640px; }

.SupportBanner-infoDescription {
  margin-top: 4px; }

.SupportBanner-infoDescriptionLink {
  color: #999999;
  text-decoration: underline; }
  .SupportBanner-infoDescriptionLink:hover {
    color: #666666; }

/* FONT FACE */
.TabsPanel > .TabLink {
  border-radius: 0; }
  .TabsPanel > .TabLink:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .TabsPanel > .TabLink:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }

.TabLink {
  display: block;
  box-sizing: content-box;
  width: 138px;
  height: 38px;
  padding: 0;
  border: 1px solid #dddddd;
  border-radius: 4px;
  color: #999999;
  font-size: 14px;
  line-height: 38px; }
  .TabLink:hover {
    border-color: #bbd7f2;
    background: #FFF;
    color: #666666;
    text-decoration: none; }

.TabLink:hover {
  border-color: #bbd7f2; }

.is-selected > .TabLink,
.is-selected > .TabLink:hover,
.TabLink.selected,
.TabLink.selected:hover {
  border-color: #dddddd;
  background: #FFF;
  color: #666666;
  cursor: default; }

.TabLink.TabLink--positive.selected,
.TabLink.TabLink--positive.selected:hover {
  border-color: #bbd7f2; }

.TabLink.disabled {
  opacity: 0.5; }
  .TabLink.disabled:hover {
    border-color: #dddddd;
    background: transparent;
    color: #999999;
    text-decoration: none;
    cursor: default; }

.TabLink.TabLink--textCenterUpcase {
  color: #666666;
  text-align: center;
  text-transform: uppercase; }
  .TabLink.TabLink--textCenterUpcase.selected, .TabLink.TabLink--textCenterUpcase.selected:hover {
    border-color: #9dc2e0;
    background: #eff6fc;
    color: #666666; }

.TabLink.arcgis {
  width: 160px; }

.TabLink.box {
  display: block;
  width: auto;
  height: auto;
  margin: 0; }

.TabIcon {
  display: inline-block;
  height: 20px;
  margin: 0 6px 3px 0;
  background: url("/assets/1.0.0-assets.162/images/layout/new_import_icons.png") no-repeat 0 0;
  vertical-align: middle; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    .TabIcon {
      /* on retina, use image that's scaled by 2 */
      background: url("/assets/1.0.0-assets.162/images/layout/new_import_icons@2x.png");
      background-position: 0 0;
      background-size: 223px 40px; } }

.TabIcon.is-dropbox {
  width: 22px;
  height: 20px;
  background-position: -18px 0; }

.is-selected > .TabLink .TabIcon.is-dropbox,
.is-selected > .TabLink:hover .TabIcon.is-dropbox,
.TabLink.selected .TabIcon.is-dropbox,
.TabLink:hover .TabIcon.is-dropbox {
  background-position: -18px -20px; }

.TabLink.disabled .TabIcon.is-dropbox,
.TabLink.disabled:hover .TabIcon.is-dropbox {
  background-position: -18px 0; }

.TabIcon.is-gdrive {
  width: 25px;
  height: 20px;
  background-position: -40px 0; }

.is-selected > .TabLink .TabIcon.is-gdrive,
.is-selected > .TabLink:hover .TabIcon.is-gdrive,
.TabLink.selected .TabIcon.is-gdrive,
.TabLink:hover .TabIcon.is-gdrive {
  background-position: -40px -20px; }

.TabLink.disabled .TabIcon.is-gdrive,
.TabLink.disabled:hover .TabIcon.is-gdrive {
  background-position: -40px 0; }

.TabIcon.is-mailchimp {
  width: 18px;
  height: 20px;
  background-position: -65px 0; }

.is-selected > .TabLink .TabIcon.is-mailchimp,
.is-selected > .TabLink:hover .TabIcon.is-mailchimp,
.TabLink.selected .TabIcon.is-mailchimp,
.TabLink:hover .TabIcon.is-mailchimp {
  background-position: -65px -20px; }

.TabLink.disabled .TabIcon.is-mailchimp,
.TabLink.disabled:hover .TabIcon.is-mailchimp {
  background-position: -65px 0; }

.TabIcon.is-arcgis {
  width: 19px;
  height: 20px;
  background-position: -83px 0; }

.is-selected > .TabLink .TabIcon.is-arcgis,
.is-selected > .TabLink:hover .TabIcon.is-arcgis,
.TabLink.selected .TabIcon.is-arcgis,
.TabLink:hover .TabIcon.is-arcgis {
  background-position: -83px -20px; }

.TabLink.disabled .TabIcon.is-arcgis,
.TabLink.disabled:hover .TabIcon.is-arcgis {
  background-position: -83px 0; }

.TabIcon.is-twitter {
  width: 25px;
  height: 20px;
  background-position: -102px 0; }

.is-selected > .TabLink .TabIcon.is-twitter,
.is-selected > .TabLink:hover .TabIcon.is-twitter,
.TabLink.selected .TabIcon.is-twitter,
.TabLink:hover .TabIcon.is-twitter {
  background-position: -102px -20px; }

.TabLink.disabled .TabIcon.is-twitter,
.TabLink.disabled:hover .TabIcon.is-twitter {
  background-position: -102px 0; }

.TabIcon.is-file {
  width: 18px;
  height: 20px;
  background-position: -127px 0; }

.is-selected > .TabLink .TabIcon.is-file,
.is-selected > .TabLink:hover .TabIcon.is-file,
.TabLink.selected .TabIcon.is-file,
.TabLink:hover .TabIcon.is-file {
  background-position: -127px -20px; }

.TabLink.disabled .TabIcon.is-file,
.TabLink.disabled:hover .TabIcon.is-file {
  background-position: -127px 0; }

.TabIcon.is-instagram {
  width: 20px;
  height: 20px;
  background-position: -145px 0; }

.is-selected > .TabLink .TabIcon.is-instagram,
.is-selected > .TabLink:hover .TabIcon.is-instagram,
.TabLink.selected .TabIcon.is-instagram,
.TabLink:hover .TabIcon.is-instagram {
  background-position: -145px -20px; }

.TabLink.disabled .TabIcon.is-instagram,
.TabLink.disabled:hover .TabIcon.is-instagram {
  background-position: -145px 0; }

.TabIcon.is-salesforce {
  width: 29px;
  height: 20px;
  background-position: -165px 0; }

.is-selected > .TabLink .TabIcon.is-salesforce,
.is-selected > .TabLink:hover .TabIcon.is-salesforce,
.TabLink.selected .TabIcon.is-salesforce,
.TabLink:hover .TabIcon.is-salesforce {
  background-position: -165px -20px; }

.TabLink.disabled .TabIcon.is-salesforce,
.TabLink.disabled:hover .TabIcon.is-salesforce {
  background-position: -165px 0; }

.TabIcon.is-box {
  width: 29px;
  height: 20px;
  background-position: -194px 0; }

.is-selected > .TabLink .TabIcon.is-box,
.is-selected > .TabLink:hover .TabIcon.is-box,
.TabLink.selected .TabIcon.is-box,
.TabLink:hover .TabIcon.is-box {
  background-position: -194px -20px; }

.TabLink.disabled .TabIcon.is-box,
.TabLink.disabled:hover .TabIcon.is-box {
  background-position: -194px 0; }

.Title {
  font-weight: 400; }

.Title--l {
  font-size: 48px;
  line-height: 58px; }

.Title--m {
  font-size: 34px;
  line-height: 48px; }

.Title--s {
  font-size: 26px;
  line-height: 33px; }

.Title--xs {
  font-size: 20px;
  line-height: 30px; }

.Title--light {
  font-weight: 300; }

.Title--bold {
  font-weight: 500; }

.Title--dark {
  color: #333; }

.Title--grey {
  color: #CCC; }

.Title--white {
  color: #FFF; }

.Title--em {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-style: italic;
  font-weight: 200;
  line-height: 1; }

.Title--bold {
  font-weight: 500; }

.Title-small {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 19px;
  text-transform: uppercase; }

@media (max-width: 960px) {
  .Title--l {
    font-size: 36px;
    line-height: 42px; } }

@media (max-width: 400px) {
  .Title--l {
    font-size: 34px;
    line-height: 40px; } }

/*
   * 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; }

/* FONT FACE */
.UpgradeElement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 20px;
  border-radius: 3px;
  background: #f5fafe; }

.UpgradeElement--fixed {
  width: 500px;
  margin: 30px 0; }

.UpgradeElement--noMargins {
  padding: 0;
  border: none;
  border-radius: 0; }

.UpgradeElement-info {
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.UpgradeElement-infoIcon {
  margin-right: 20px;
  border-color: #1899DD;
  color: #008EDA;
  line-height: 20px; }

.UpgradeElement-infoText {
  font-family: 'Montserrat';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 16px;
  text-align: right; }

.UpgradeElement-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.UpgradeElement-trial {
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.UpgradeElement-trialIcon,
.UpgradeElement-trialText {
  color: #666666;
  font-size: 13px;
  line-height: 20px; }

.UpgradeElement-trialText {
  margin-left: 5px; }

.UpgradeElement-button {
  margin-left: 20px; }

.UserAvatar {
  display: flex;
  align-items: center; }

.UserAvatar.is-in-list {
  margin-left: 4px; }

.UserAvatar.is-error::before {
  content: 'x';
  display: flex;
  position: absolute;
  top: -8px;
  right: -8px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 30px;
  background-color: #f15743;
  color: #FFF;
  font-size: 12px;
  text-align: center; }

.UserAvatar-img {
  border-right: 0;
  border-left: 0;
  background: #FFF; }

.UserAvatar-img--no-src {
  background-image: url("/assets/1.0.0-assets.162/images/avatars/avatar_ghost_red.png"); }

.UserAvatar-img--textReplacement {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3aa9e3;
  font-size: 11px; }
  .UserAvatar-img--textReplacement:hover {
    border-color: #3aa9e3; }

.UserAvatar-img.is-error {
  border-radius: 4px;
  border-color: #f15743; }

.UserAvatar-img--large {
  width: 96px;
  height: 96px;
  border-radius: 4px;
  background-size: 96px; }

.UserAvatar-img--big {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background-size: 60px; }

.UserAvatar-img--medium-large {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background-size: 42px; }

.UserAvatar-img--medium {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background-size: 36px; }

.UserAvatar-img--small {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background-size: 20px; }

.UserAvatar-img--smaller {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-size: 16px; }

.UserAvatar-moreItems {
  display: flex;
  align-items: baseline;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #cccccc inset;
  color: #cccccc;
  font-size: 26px;
  font-weight: 500;
  line-height: 26px; }

.UserAvatar-moreItems::before {
  content: '...'; }

.UserNotifications {
  display: flex;
  position: relative;
  color: #99CAEF;
  text-decoration: none !important; }

.UserNotifications:hover {
  color: WHITE; }

.UserNotifications-Icon {
  color: #FFF;
  font-size: 15px; }
  .UserNotifications-Icon:hover {
    color: WHITE; }

.UserNotifications-badge {
  transform: scale(0);
  transition: all 0.5s ease-in-out;
  opacity: 0;
  background-color: #73C86B;
  color: #f15743; }

.UserNotifications.has--alerts {
  color: WHITE; }
  .UserNotifications.has--alerts .UserNotifications-badge {
    transform: scale(1);
    transition: all 0.1s ease-in-out;
    opacity: 1;
    color: WHITE; }

.UserNotifications.has--alerts:hover .UserNotifications-badge {
  transform: scale(1.1);
  transition: all 0.1s ease-in-out; }

.UserRoleIndicator {
  display: inline-block;
  padding: 0 8px;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  background: #FFF;
  font: bold 10px 'Open Sans';
  line-height: 18px;
  text-transform: uppercase; }

.UserRoleIndicator--filled {
  color: #FFF; }

.UserRoleIndicator--filled.is-green {
  border-color: #8EB83F;
  background: #8EB83F; }

.UserRoleIndicator--filled.is-grey {
  border-color: #979EA1;
  background: #979EA1; }

.u-flex {
  display: flex; }

.u-inlineflex {
  display: inline-flex; }

.u-flex__direction--row {
  flex-direction: row !important; }

.u-flex__direction--column {
  flex-direction: column !important; }

.u-flex__justify--start {
  justify-content: flex-start !important; }

.u-flex__justify--end {
  justify-content: flex-end !important; }

.u-flex__justify--between {
  justify-content: space-between !important; }

.u-flex__justify--around {
  justify-content: space-around !important; }

.u-flex__justify--center {
  justify-content: center !important; }

.u-flex__align--start {
  align-items: flex-start !important; }

.u-flex__self--start {
  align-items: flex-start !important; }

.u-flex__align--end {
  align-items: flex-end !important; }

.u-flex__self--end {
  align-items: flex-end !important; }

.u-flex__align--center {
  align-items: center !important; }

.u-flex__self--center {
  align-items: center !important; }

.u-flex__align--baseline {
  align-items: baseline !important; }

.u-flex__self--baseline {
  align-items: baseline !important; }

.u-flex__align--stretch {
  align-items: stretch !important; }

.u-flex__self--stretch {
  align-items: stretch !important; }

.u-flex__grow--1 {
  flex-grow: 1; }

.u-p--0 {
  padding: 0 !important; }

.u-pt--0 {
  padding-top: 0px; }

.u-pr--0 {
  padding-right: 0px; }

.u-pb--0 {
  padding-bottom: 0px; }

.u-pl--0 {
  padding-left: 0px; }

.u-pt--4 {
  padding-top: 4px; }

.u-pr--4 {
  padding-right: 4px; }

.u-pb--4 {
  padding-bottom: 4px; }

.u-pl--4 {
  padding-left: 4px; }

.u-pt--8 {
  padding-top: 8px; }

.u-pr--8 {
  padding-right: 8px; }

.u-pb--8 {
  padding-bottom: 8px; }

.u-pl--8 {
  padding-left: 8px; }

.u-pt--10 {
  padding-top: 10px; }

.u-pr--10 {
  padding-right: 10px; }

.u-pb--10 {
  padding-bottom: 10px; }

.u-pl--10 {
  padding-left: 10px; }

.u-pt--12 {
  padding-top: 12px; }

.u-pr--12 {
  padding-right: 12px; }

.u-pb--12 {
  padding-bottom: 12px; }

.u-pl--12 {
  padding-left: 12px; }

.u-pt--16 {
  padding-top: 16px; }

.u-pr--16 {
  padding-right: 16px; }

.u-pb--16 {
  padding-bottom: 16px; }

.u-pl--16 {
  padding-left: 16px; }

.u-pt--20 {
  padding-top: 20px; }

.u-pr--20 {
  padding-right: 20px; }

.u-pb--20 {
  padding-bottom: 20px; }

.u-pl--20 {
  padding-left: 20px; }

.u-pt--24 {
  padding-top: 24px; }

.u-pr--24 {
  padding-right: 24px; }

.u-pb--24 {
  padding-bottom: 24px; }

.u-pl--24 {
  padding-left: 24px; }

.u-pt--28 {
  padding-top: 28px; }

.u-pr--28 {
  padding-right: 28px; }

.u-pb--28 {
  padding-bottom: 28px; }

.u-pl--28 {
  padding-left: 28px; }

.u-pt--32 {
  padding-top: 32px; }

.u-pr--32 {
  padding-right: 32px; }

.u-pb--32 {
  padding-bottom: 32px; }

.u-pl--32 {
  padding-left: 32px; }

.u-pt--36 {
  padding-top: 36px; }

.u-pr--36 {
  padding-right: 36px; }

.u-pb--36 {
  padding-bottom: 36px; }

.u-pl--36 {
  padding-left: 36px; }

.u-pt--40 {
  padding-top: 40px; }

.u-pr--40 {
  padding-right: 40px; }

.u-pb--40 {
  padding-bottom: 40px; }

.u-pl--40 {
  padding-left: 40px; }

.u-pt--48 {
  padding-top: 48px; }

.u-pr--48 {
  padding-right: 48px; }

.u-pb--48 {
  padding-bottom: 48px; }

.u-pl--48 {
  padding-left: 48px; }

.u-pt--60 {
  padding-top: 60px; }

.u-pr--60 {
  padding-right: 60px; }

.u-pb--60 {
  padding-bottom: 60px; }

.u-pl--60 {
  padding-left: 60px; }

.u-pt--64 {
  padding-top: 64px; }

.u-pr--64 {
  padding-right: 64px; }

.u-pb--64 {
  padding-bottom: 64px; }

.u-pl--64 {
  padding-left: 64px; }

.u-pt--72 {
  padding-top: 72px; }

.u-pr--72 {
  padding-right: 72px; }

.u-pb--72 {
  padding-bottom: 72px; }

.u-pl--72 {
  padding-left: 72px; }

.u-pt--80 {
  padding-top: 80px; }

.u-pr--80 {
  padding-right: 80px; }

.u-pb--80 {
  padding-bottom: 80px; }

.u-pl--80 {
  padding-left: 80px; }

.u-pt--96 {
  padding-top: 96px; }

.u-pr--96 {
  padding-right: 96px; }

.u-pb--96 {
  padding-bottom: 96px; }

.u-pl--96 {
  padding-left: 96px; }

.u-pt--120 {
  padding-top: 120px; }

.u-pr--120 {
  padding-right: 120px; }

.u-pb--120 {
  padding-bottom: 120px; }

.u-pl--120 {
  padding-left: 120px; }

.u-m--0 {
  margin: 0 !important; }

.u-mt--0 {
  margin-top: 0px; }

.u-mr--0 {
  margin-right: 0px; }

.u-mb--0 {
  margin-bottom: 0px; }

.u-ml--0 {
  margin-left: 0px; }

.u-mt--4 {
  margin-top: 4px; }

.u-mr--4 {
  margin-right: 4px; }

.u-mb--4 {
  margin-bottom: 4px; }

.u-ml--4 {
  margin-left: 4px; }

.u-mt--8 {
  margin-top: 8px; }

.u-mr--8 {
  margin-right: 8px; }

.u-mb--8 {
  margin-bottom: 8px; }

.u-ml--8 {
  margin-left: 8px; }

.u-mt--10 {
  margin-top: 10px; }

.u-mr--10 {
  margin-right: 10px; }

.u-mb--10 {
  margin-bottom: 10px; }

.u-ml--10 {
  margin-left: 10px; }

.u-mt--12 {
  margin-top: 12px; }

.u-mr--12 {
  margin-right: 12px; }

.u-mb--12 {
  margin-bottom: 12px; }

.u-ml--12 {
  margin-left: 12px; }

.u-mt--16 {
  margin-top: 16px; }

.u-mr--16 {
  margin-right: 16px; }

.u-mb--16 {
  margin-bottom: 16px; }

.u-ml--16 {
  margin-left: 16px; }

.u-mt--20 {
  margin-top: 20px; }

.u-mr--20 {
  margin-right: 20px; }

.u-mb--20 {
  margin-bottom: 20px; }

.u-ml--20 {
  margin-left: 20px; }

.u-mt--24 {
  margin-top: 24px; }

.u-mr--24 {
  margin-right: 24px; }

.u-mb--24 {
  margin-bottom: 24px; }

.u-ml--24 {
  margin-left: 24px; }

.u-mt--28 {
  margin-top: 28px; }

.u-mr--28 {
  margin-right: 28px; }

.u-mb--28 {
  margin-bottom: 28px; }

.u-ml--28 {
  margin-left: 28px; }

.u-mt--32 {
  margin-top: 32px; }

.u-mr--32 {
  margin-right: 32px; }

.u-mb--32 {
  margin-bottom: 32px; }

.u-ml--32 {
  margin-left: 32px; }

.u-mt--36 {
  margin-top: 36px; }

.u-mr--36 {
  margin-right: 36px; }

.u-mb--36 {
  margin-bottom: 36px; }

.u-ml--36 {
  margin-left: 36px; }

.u-mt--40 {
  margin-top: 40px; }

.u-mr--40 {
  margin-right: 40px; }

.u-mb--40 {
  margin-bottom: 40px; }

.u-ml--40 {
  margin-left: 40px; }

.u-mt--48 {
  margin-top: 48px; }

.u-mr--48 {
  margin-right: 48px; }

.u-mb--48 {
  margin-bottom: 48px; }

.u-ml--48 {
  margin-left: 48px; }

.u-mt--60 {
  margin-top: 60px; }

.u-mr--60 {
  margin-right: 60px; }

.u-mb--60 {
  margin-bottom: 60px; }

.u-ml--60 {
  margin-left: 60px; }

.u-mt--64 {
  margin-top: 64px; }

.u-mr--64 {
  margin-right: 64px; }

.u-mb--64 {
  margin-bottom: 64px; }

.u-ml--64 {
  margin-left: 64px; }

.u-mt--72 {
  margin-top: 72px; }

.u-mr--72 {
  margin-right: 72px; }

.u-mb--72 {
  margin-bottom: 72px; }

.u-ml--72 {
  margin-left: 72px; }

.u-mt--80 {
  margin-top: 80px; }

.u-mr--80 {
  margin-right: 80px; }

.u-mb--80 {
  margin-bottom: 80px; }

.u-ml--80 {
  margin-left: 80px; }

.u-mt--96 {
  margin-top: 96px; }

.u-mr--96 {
  margin-right: 96px; }

.u-mb--96 {
  margin-bottom: 96px; }

.u-ml--96 {
  margin-left: 96px; }

.u-mt--120 {
  margin-top: 120px; }

.u-mr--120 {
  margin-right: 120px; }

.u-mb--120 {
  margin-bottom: 120px; }

.u-ml--120 {
  margin-left: 120px; }

@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: #1785FB;
  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.162/fonts/OpenSans-Light.eot);
  src: url(/assets/1.0.0-assets.162/fonts/OpenSans-Light.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/OpenSans-Light.woff) format("woff"), url(/assets/1.0.0-assets.162/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.162/fonts/OpenSans-Regular.eot);
  src: url(/assets/1.0.0-assets.162/fonts/OpenSans-Regular.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/OpenSans-Regular.woff) format("woff"), url(/assets/1.0.0-assets.162/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.162/fonts/OpenSans-Semibold.eot);
  src: url(/assets/1.0.0-assets.162/fonts/OpenSans-Semibold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/OpenSans-Semibold.woff) format("woff"), url(/assets/1.0.0-assets.162/fonts/OpenSans-Semibold.ttf) format("truetype"); }

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/1.0.0-assets.162/fonts/Montserrat-Regular.eot);
  src: local("Montserrat Regular"), local("Montserrat-Regular"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Regular.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Regular.woff2) format("woff2"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Regular.woff) format("woff"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Regular.ttf) format("truetype"), url(/assets/1.0.0-assets.162/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.162/fonts/Montserrat-Semibold.eot);
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Semibold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Semibold.woff2) format("woff2"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Semibold.woff) format("woff"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Semibold.ttf) format("truetype"), url(/assets/1.0.0-assets.162/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.162/fonts/Montserrat-Bold.eot);
  src: local("Montserrat Bold"), local("Montserrat-Bold"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Bold.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Bold.woff2) format("woff2"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Bold.woff) format("woff"), url(/assets/1.0.0-assets.162/fonts/Montserrat-Bold.ttf) format("truetype"), url(/assets/1.0.0-assets.162/images/Montserrat-Bold.svg#Montserrat) format("svg"); }

@font-face {
  font-family: 'CartoIcon';
  src: url(/assets/1.0.0-assets.162/fonts/cartoIcon.eot);
  src: url(/assets/1.0.0-assets.162/fonts/cartoIcon.eot?#iefix) format("embedded-opentype"), url(/assets/1.0.0-assets.162/fonts/cartoIcon.woff) format("woff"), url(/assets/1.0.0-assets.162/fonts/cartoIcon.ttf) format("truetype"), url(/assets/1.0.0-assets.162/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.

```


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">clock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">stats</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">heartEmpty</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">heartFill</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">alert</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">rows</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">check</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">dribbble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">twitter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">caretDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">lightbulb</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">explore</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">drop</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">edition</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">view</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">odyssey</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">settings</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mobile</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">wizard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">undo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">redo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">hide</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">info</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">fork</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">facebook</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">folder</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">dropbox</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">cloud</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">step</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">addDocument</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">arrowNext</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">arrowPrev</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">close</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">cartoFante</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">lock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">cartoDB</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">lens</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">closeLimits</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">defaultUser</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">cockroach</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">floppy</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">trash</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">wifi</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">unlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">unlockWithEllipsis</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">gift</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">people</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">play</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">add</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">map</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">anchor</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">key</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">calendar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">document</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">eye</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">marker</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">progressBar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">book</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">notes</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">rectangles</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mountain</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">points</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">snake</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">boss</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">rocket</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">barometer</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">dollar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">email</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">label</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">outside</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">jigsaw</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">tools</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">question</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">layerStack</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">alarm</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">cloudDownArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">pencil</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">fountainPen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">emptyDoc</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mergeArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mergeColumns</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mergeSpatial</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">globe</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">chevronDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">streets</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">keys</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">facebookSquare</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">fullscreen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">rArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">share</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">linkedin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">calendarBlank</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">creativeCommons</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">bubble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">bars</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">arrowMenuLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">tieFighter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">ray</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">markup</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">table</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">airlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">pin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">attache</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">download</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">group</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">dashboard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">spinner</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mapsearch</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">rArrow</h4>
  </div>

```
*/
.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: #1785FB; }
  .u-actionTextColor:hover {
    color: #0F6CD2; }

.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

```
<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
```
*/
.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 #1785FB;
  background: #1785FB; }
  .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 #1785FB; }
  .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 #0F6CD2; }
  .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 #1785FB; }
  .CDB-Checkbox:active + .CDB-Checkbox-face::before, .CDB-Checkbox:active + .CDB-Checkbox-face::after {
    background: #1785FB; }

.CDB-Checkbox:disabled + .CDB-Checkbox-face {
  border: 1px solid rgba(46, 60, 67, 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(46, 60, 67, 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

```
<div class="CDB-DropdownContainer">
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
  <div class="CDB-Dropdown CDB-Box-Modal">
    <ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">COUNT</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="02">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">SUM</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="03">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">AVG</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="04">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">MAX</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="05">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">MIN</label>
      </li>
    </ul>

    <ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
      <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
      <li class="CDB-Dropdown-optionsElement" title="active">active</li>
      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
    </ul>
  </div>
</div>


  <div class="CDB-Box-Modal">
    <div class="CDB-Box-ModalHeader">
      <nav class="CDB-NavMenu">
        <ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
          <li class="CDB-NavMenu-Item">
            <button class="CDB-NavMenu-Link">SOLID</button>
          </li>
          <li class="CDB-NavMenu-Item is-selected">
            <button class="CDB-NavMenu-Link">BY VALUE</button>
          </li>
        </ul>
      </nav>
      <div class="CDB-Box-ModalHeaderItem">
        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
        <button class="u-lSpace--xl">
          <div class="CDB-Shape">
            <div class="CDB-Shape-magnify is-blue is-small"></div>
          </div>
        </button>
      </div>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>

  <br/>
  <br/>
  <br/>
  <br/>

  <div class="CDB-Box-Modal">
    <div class="CDB-Box-modalHeader">
      <nav class="CDB-NavMenu">
        <ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
          <li class="CDB-NavMenu-Item">
            <button class="CDB-NavMenu-Link">SOLID</button>
          </li>
          <li class="CDB-NavMenu-Item is-selected">
            <button class="CDB-NavMenu-Link">BY VALUE</button>
          </li>
        </ul>
      </nav>
      <div class="CDB-Box-modalHeaderItem">
        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
        <button class="u-lSpace--xl">
          <div class="CDB-Shape">
            <div class="CDB-Shape-close is-blue is-large"></div>
          </div>
        </button>
      </div>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>


```
*/
.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: #2E3C43;
  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: #1785FB; }
  .CDB-Dropdown-optionsElement:last-child {
    border-bottom: 0; }
  .CDB-Dropdown-optionsElement:hover {
    background-color: rgba(23, 133, 251, 0.08);
    color: #2E3C43;
    cursor: pointer; }
  .CDB-Dropdown-optionsElement.is-selected {
    color: #2E3C43; }
  .CDB-Dropdown-optionsElement.is-disabled {
    color: #CBCED0; }
    .CDB-Dropdown-optionsElement.is-disabled:hover {
      background-color: transparent;
      cursor: default; }

/* SG
# Forms/Inputs

```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">
```
*/
.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 #0F6CD2; }
  .CDB-InputText:focus {
    border: 1px solid #2E3C43;
    outline: none; }
  .CDB-InputText:disabled, .CDB-InputText.is-disabled {
    border-color: rgba(46, 60, 67, 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

```
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Radio" type="radio" name="veritas" value="01">
  <span class="u-iBlock CDB-Radio-face"></span>
  <label class="u-iBlock u-lSpace">True</label>
</div>
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
  <span class="u-iBlock CDB-Radio-face"></span>
  <label class="u-iBlock u-lSpace">False</label>
</div>

<br/>
<br/>
<br/>

<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
  <span class="u-iBlock CDB-Checkbox-face"></span>
  <label class="u-iBlock u-lSpace">Sport</label>
</div>
<label class="u-iblock CDB-Text CDB-Size-medium">
  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
  <span class="u-iBlock CDB-Checkbox-face"></span>
  <label class="u-iBlock u-lSpace">Travel</label>
</label>

<br/>
<br/>
<br/>

<div class="CDB-Fieldset">
  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
    <li class="u-rSpace--xl u-iblock">
      <div class="u-iblock CDB-Size-medium">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Sport</label>
      </div>
    </li>
    <li class="u-iblock">
      <label class="u-iblock CDB-Size-medium">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Travel</label>
      </label>
    </li>
  </ul>
</div>
<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>

<br/>
<br/>
<br/>

<div class="CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
    <input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
  </p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>

<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
    <input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
  </p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>
```
*/
.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

```
<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-OptionInput-content">8px</button>
    </li>

    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">solid</button>
    </li>

    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
      </button>
    </li>
  </ul>
</div>

<br/>

<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">8...12</button>
    </li>

    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
      </button>
    </li>
  </ul>
</div>

<br/>

<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">8...12</button>
    </li>
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">solid</button>
    </li>

    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
      </button>
    </li>
  </ul>
</div>

<br/>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
  </div>
</button>

<br/>
<br/>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <ul class="CDB-ColorBarContainer">
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
    </ul>
  </div>
</button>

<br/>
<br/>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <ul class="CDB-ColorBarContainer">
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
    </ul>
  </div>
</button>
```
*/
.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 #0F6CD2; }
  .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: #0F6CD2; }
    .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: #2E3C43;
  white-space: nowrap; }
  .CDB-OptionInput-content:hover {
    text-decoration: none; }

/* SG
# Forms/Radio

```
<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
  <span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="02">
  <span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
  <span class="u-iBlock CDB-Radio-face"></span>
</div>
```
*/
.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 #1785FB;
  background: #1785FB; }
  .CDB-Radio:checked + .CDB-Radio-face::before {
    background: #FFF; }

.CDB-Radio:disabled + .CDB-Radio-face {
  border: 1px solid rgba(46, 60, 67, 0.08);
  background: #F9F9F9; }
  .CDB-Radio:disabled + .CDB-Radio-face::before {
    opacity: 0; }

.CDB-Radio:disabled:hover + .CDB-Radio-face {
  border: 1px solid rgba(46, 60, 67, 0.08); }

.CDB-Radio:hover + .CDB-Radio-face {
  border: 1px solid #0F6CD2; }
  .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 #1785FB; }

.CDB-Radio:checked:hover + .CDB-Radio-face::before {
  background: #FFF; }

.CDB-Radio:active + .CDB-Radio-face::before {
  background: #1785FB; }

/* SG
# Forms/Selects

```
<div class="CDB-Select" style="height: 250px;">
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
  <div class="CDB-Box-Modal CDB-SelectItem">
    <ul class="CDB-Text CDB-Size-medium">
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
    </ul>
  </div>
</div>

<br/>
<br/>
<br/>


<div class="CDB-Select" style="height: 250px;">
  <div class="CDB-InputText CDB-Text">DejaVu Sans</div>
  <div class="CDB-Box-Modal CDB-SelectItem">
    <ul class="CDB-Text CDB-Size-medium">
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
    </ul>
  </div>
</div>

<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
<br/>
<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
<br/>
<select name="select" class="CDB-SelectFake CDB-Text">
  <option value="value1" selected>Choose an option</option>
  <option value="value2">Hide</option>
  <option value="value3">Rename</option>
  <option value="value4">Change source dataset…</option>
  <option value="value5">Delete this layer…</option>
</select>


```
*/
.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 #0F6CD2; }
  .CDB-SelectFake:focus {
    border: 1px solid #2E3C43;
    outline: none; }
  .CDB-SelectFake:disabled {
    border-color: rgba(46, 60, 67, 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

```
<div class="CDB-TabsForms u-iBlock">
  <ul class="CDB-TabsForms-inner">
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-left">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-center">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-right is-active">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
  </ul>
</div>
```
*/
.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(46, 60, 67, 0.08); }

.CDB-TabsForms-item:first-child {
  border-left: 0; }

.CDB-TabsForms-button {
  padding: 7px 8px; }

/* SG
# Forms/Textareas

```
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea has-error CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea is-disabled CDB-Text" disabled></textarea>
```
*/
.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 #1785FB;
    outline-color: transparent;
    outline-style: none; }
  .CDB-Textarea:disabled, .CDB-Textarea.is-disabled {
    border-color: rgba(46, 60, 67, 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


```
<div class="Toggle">
  <div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
    <label class="u-iBlock">TOOLS</label>
    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
    <span class="u-iBlock CDB-ToggleFace"></span>
    <label class="u-iBlock">SQL</label>
  </div>
</div>

<br/>

<div class="Toggle">
  <div class="CDB-Text CDB-Size-small is-semibold is-disabled u-rSpace--xl">
    <label class="u-iBlock">TOOLS</label>
    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis" disabled >
    <span class="u-iBlock CDB-ToggleFace"></span>
    <label class="u-iBlock">SQL</label>
  </div>
</div>
```
*/
.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

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-add is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-add is-white is-small"></div>
  </div>
</div>
```
*/
.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: #2E3C43;
    content: ''; }
  .CDB-Shape-add::after {
    display: block;
    position: absolute;
    top: 1;
    bottom: 0;
    left: 7px;
    width: 1px;
    background: #2E3C43;
    content: ''; }

.CDB-Shape-add.is-small::before {
  display: block;
  position: absolute;
  right: 3px;
  bottom: 7px;
  left: 4px;
  height: 1px;
  background: #2E3C43;
  content: ''; }

.CDB-Shape-add.is-small::after {
  display: block;
  position: absolute;
  top: 4px;
  bottom: 3px;
  left: 8px;
  width: 1px;
  background: #2E3C43;
  content: ''; }

.CDB-Shape-add.is-blue::before, .CDB-Shape-add.is-blue::after {
  background: #1785FB; }

.CDB-Shape-add.is-white::before, .CDB-Shape-add.is-white::after {
  background: #FFF; }

/* SG
# Shapes/Arrow

Description

```
<div style="padding: 20px;">
  <div class="CDB-Shape-Arrow"></div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape-Arrow is-blue"></div>
</div>
<div style="padding: 20px; background: #2E3C43">
  <div class="CDB-Shape-Arrow is-white"></div>
</div>
```
*/
.CDB-Shape-Arrow {
  position: relative;
  width: 1px;
  height: 8px;
  background: #2E3C43; }
  .CDB-Shape-Arrow::before {
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    width: 5px;
    height: 1px;
    transform: rotate(45deg);
    background: #2E3C43;
    content: ''; }
  .CDB-Shape-Arrow::after {
    display: block;
    position: absolute;
    top: 2px;
    left: -4px;
    width: 5px;
    height: 1px;
    transform: rotate(-45deg);
    background: #2E3C43;
    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: #1785FB; }
  .CDB-Shape-Arrow.is-blue::before {
    background: #1785FB; }
  .CDB-Shape-Arrow.is-blue::after {
    background: #1785FB; }

.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

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem">
      <div class="CDB-Shape-tick is-medium"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue">
      <div class="CDB-Shape-tick is-medium is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white">
      <div class="CDB-Shape-tick is-medium is-white"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-small">
      <div class="CDB-Shape-tick is-small"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue is-small">
      <div class="CDB-Shape-tick is-small is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white is-small">
      <div class="CDB-Shape-tick is-small is-white"></div>
    </div>
  </div>
</div>
```
*/
.CDB-Shape-CircleItem {
  width: 14px;
  height: 14px;
  border: 1px solid #2E3C43;
  border-radius: 50%; }
  .CDB-Shape-CircleItem.is-small {
    width: 12px;
    height: 12px;
    transform: translateY(2px); }
  .CDB-Shape-CircleItem.is-blue {
    border: 1px solid #1785FB; }
  .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: #2E3C43;
    content: ''; }
  .CDB-Shape-tick::after {
    display: block;
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
    background: #2E3C43;
    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: #1785FB; }

.CDB-Shape-tick.is-blue::after {
  background: #1785FB; }

.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

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-huge"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-blue is-huge"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-close is-white is-huge"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-large"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-blue is-large"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-close is-white is-large"></div>
  </div>
</div>
```
*/
.CDB-Shape-close {
  display: block;
  position: relative;
  height: 100%; }
  .CDB-Shape-close::before {
    display: block;
    position: absolute;
    width: 1px;
    transform: rotate(-45deg);
    background: #2E3C43;
    content: ''; }
  .CDB-Shape-close::after {
    display: block;
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
    background: #2E3C43;
    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: #1785FB; }

.CDB-Shape-close.is-blue::after {
  background: #1785FB; }

.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

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-dash is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-dash is-white is-small"></div>
  </div>
</div>
```
*/
.CDB-Shape-dash {
  position: relative;
  height: 100%; }
  .CDB-Shape-dash::before {
    display: block;
    position: absolute;
    right: 2px;
    bottom: 7px;
    left: 2px;
    height: 1px;
    background: #2E3C43;
    content: ''; }

.CDB-Shape-dash.is-small::before {
  right: 3px;
  left: 3px; }

.CDB-Shape-dash.is-blue::before {
  background: #1785FB; }

.CDB-Shape-dash.is-white::before {
  background: #FFF; }

/* SG
# Shapes/Dataset

Description

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-blue">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-grey">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-white">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<br>
<br>
<br>
<br>

<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-blue">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-grey">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-white">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
```
*/
.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 #2E3C43;
  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 #1785FB; }

.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: #2E3C43; }
  .CDB-Shape-Dataset.is-white .CDB-Shape-DatasetItem:first-child {
    box-shadow: 3px 0 #2E3C43; }

.CDB-Shape-Dataset.is-white.is-small .CDB-Shape-DatasetItem:first-child {
  box-shadow: 2px 0 #2E3C43; }

/* SG
# Shapes/Dots

You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:

```
<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
```
*/
.CDB-Shape-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(46, 60, 67, 0.08); }
  .CDB-Shape-dot.is-selected {
    background: #636D72; }

/* SG
# Shapes/Error circle

Description

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem">
      <div class="CDB-Shape-close is-medium"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue">
      <div class="CDB-Shape-close is-medium is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white">
      <div class="CDB-Shape-close is-medium is-white"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-small">
      <div class="CDB-Shape-close is-small"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue is-small">
      <div class="CDB-Shape-close is-small is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white is-small">
      <div class="CDB-Shape-close is-small is-white"></div>
    </div>
  </div>
</div>
```
*/
.CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
  border: 1px solid #2E3C43;
  border-radius: 50%; }
  .CDB-Shape-CircleItem.is-small {
    width: 9px;
    height: 9px;
    margin: 0 auto; }
  .CDB-Shape-CircleItem.is-blue {
    border: 1px solid #1785FB; }
  .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 #1785FB;
  background: #1785FB; }

.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

```
<div style="padding: 20px">
  <div class="CDB-Shape-hamburguer">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>

<div style="padding: 20px;">
  <div class="CDB-Shape-hamburguer is-blue">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>

<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape-hamburguer is-white">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>
```
*/
.CDB-Shape-hamburguer {
  width: 16px; }
  .CDB-Shape-hamburguer:hover {
    cursor: pointer; }

.CDB-Shape-hamburguerItem {
  height: 2px;
  margin-bottom: 2px;
  background: #2E3C43; }
  .CDB-Shape-hamburguerItem:last-child {
    margin-bottom: 0; }

.CDB-Shape-hamburguer.is-blue .CDB-Shape-hamburguerItem {
  background: #1785FB; }

.CDB-Shape-hamburguer.is-white .CDB-Shape-hamburguerItem {
  background: #FFF; }

/* SG
# Shapes/Magnify

Description

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-blue"></div>
  </div>
</div>
<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-white"></div>
  </div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-blue is-small"></div>
  </div>
</div>
<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-white is-small"></div>
  </div>
</div>
```
*/
.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 #2E3C43;
    border-radius: 50%;
    content: ''; }
  .CDB-Shape-magnify::after {
    display: block;
    position: absolute;
    right: 2px;
    bottom: -1px;
    width: 1px;
    height: 7px;
    transform: rotate(314deg);
    background: #2E3C43;
    content: ''; }

.CDB-Shape-magnify.is-blue::before {
  border: 1px solid #1785FB; }

.CDB-Shape-magnify.is-blue::after {
  background: #1785FB; }

.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

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem is-first"></div>
      <div class="CDB-Shape-rectsHandleItem is-second"></div>
      <div class="CDB-Shape-rectsHandleItem is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem is-first"></div>
      <div class="CDB-Shape-rectsHandleItem is-second"></div>
      <div class="CDB-Shape-rectsHandleItem is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape">
    <div class="CDB-Shape-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
    </div>
  </div>
</div>
```
*/
.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: #2E3C43;
    content: ''; }
  .CDB-Shape-rectsHandleItem::after {
    display: block;
    position: absolute;
    left: 9px;
    width: 3px;
    height: 3px;
    background: #2E3C43;
    content: ''; }

.CDB-Shape-rectsHandleItem--blue::before, .CDB-Shape-rectsHandleItem--blue::after {
  background: #1785FB; }

.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

```
<h2>16px</h2>
<br/>
<br/>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-right">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-center">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-active">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</div>
```
*/
.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(46, 60, 67, 0.08);
  vertical-align: top; }

.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
  background: #1785FB; }

.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

```
<h2>24px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-horizontal is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>16px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-blue">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-white">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-blue is-small">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-white is-small">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
```
*/
.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: #2E3C43; }

.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: #1785FB; }

.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
  background: #FFF; }

/* SG
# Shapes/Toogle Arrows

Description

```
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-small"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-down"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-down"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-down"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-small is-down"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-small is-down"></div>
  </div>
</div>
```
*/
.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: #2E3C43;
    content: ''; }
  .CDB-ArrowToogle::after {
    display: block;
    position: absolute;
    top: 8px;
    right: -1px;
    width: 10px;
    height: 1px;
    transform: rotate(45deg);
    background: #2E3C43;
    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: #1785FB; }

.CDB-ArrowToogle.is-blue::after {
  background: #1785FB; }

.CDB-ArrowToogle.is-white::before {
  background: #FFF; }

.CDB-ArrowToogle.is-white::after {
  background: #FFF; }

/* SG
# Shapes/Type

Description

```
<h2>8px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--point">
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
    </div>
  </div>
</div>
<br/>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--line">
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
    </div>
  </div>
</div>
<br/>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--polygon">
      <div class="CDB-Type-circle CDB-Type-circle--01"></div>
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
    </div>
  </div>
</div>
```
*/
.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

```
<ul class="CDB-AvatarList">
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
  </li>
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
  </li>
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
  </li>
  <li class="CDB-AvatarList-itemMore">
    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
  </li>
</ul>
```
*/
.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(46, 60, 67, 0.08); }

.CDB-AvatarList-itemMedia {
  width: 16px;
  height: 16px;
  border-radius: 50%; }

/* SG
# Boxes/Dropdown


```
  <div class="CDB-Box-modal">&nbsp;</div>
```
*/
.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]

```

<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>


<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

<button class="CDB-Button CDB-Button--primary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>

<br/>
<br/>
<br/>

<button class="CDB-Button CDB-Button--alert CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>


<button class="CDB-Button CDB-Button--alert">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--alert is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--alert CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>


<br/>
<br/>
<br/>

<button class="CDB-Button CDB-Button--error CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>


<button class="CDB-Button CDB-Button--error">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--error is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--error CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--error CDB-Button--icon">
  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>

<br/>
<br/>
<br/>

<div style="background: #2E3C43; padding: 20px;">

  <button class="CDB-Button CDB-Button--primary CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
  </button>

</div>

```
*/
.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: #1785FB;
  color: #FFF; }
  .CDB-Button--primary:hover, .CDB-Button--primary:active {
    background: #0F6CD2; }
  .CDB-Button--primary.is-loading:hover, .CDB-Button--primary.is-loading:active {
    background: #1785FB; }
  .CDB-Button--primary.is-disabled:hover, .CDB-Button--primary.is-disabled:active {
    background: #1785FB; }

.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: #1785FB; }
  .CDB-Button--dashed:hover {
    border-color: #1785FB; }
  .CDB-Button--dashed.is-disabled:hover {
    border-color: #CBCED0; }

/* SG
# Buttons/Secondary

```

<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>


<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>


<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>


<button class="CDB-Button CDB-Button--secondary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>


<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<br/>
<br/>
<br/>

<div style="background: #2E3C43; padding: 20px;">
  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
      </svg>
    </div>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
      </svg>
    </div>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>
</div>

```
*/
.CDB-Button--secondary {
  color: #1785FB;
  box-shadow: inset 0 0 0 1px #1785FB; }
  .CDB-Button--secondary:hover {
    background: rgba(23, 133, 251, 0.08);
    box-shadow: inset 0 0 0 2px #0F6CD2; }
  .CDB-Button--secondary:active {
    background: #1785FB;
    color: #FFF; }
  .CDB-Button--secondary.is-disabled:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px #1785FB; }
  .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: #1785FB; }
  .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(46, 60, 67, 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


```
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
```
*/
.Color-Blue {
  background: #1785FB; }

.Color-White {
  border: 1px solid #E5E5E5;
  background: #FFF; }

.Color-Dark {
  background: #000; }

.Color-MainDark {
  background: #2E3C43; }

.Color-SecondaryDark {
  background: #282C2F; }

.Color-SecondaryBackground {
  background: #F2F6F9; }

.Color-ThirdBackground {
  background: #F9F9F9; }

/* SG
# Colors/line


```
<div class="box Color-Blue"></div>
<div class="box Color-HoverLine"></div>
<div class="box Color-MainLine"></div>
<div class="box Color-SecondaryLine"></div>
```
*/
.Color-HoverLine {
  background: #AAA; }

.Color-MainLine {
  background: #DDD; }

.Color-SecondaryLine {
  background: rgba(46, 60, 67, 0.08); }

/* SG
# Colors/typography


```
<div class="box Color-MainDark"></div>
<div class="box Color-Type02"></div>
<div class="box Color-Type03"></div>
<div class="box Color-Type04"></div>
<div class="box Color-White"></div>
<div class="box Color-Blue"></div>
```
*/
.Color-Type02 {
  background: #636D72; }

.Color-Type03 {
  background: #979EA1; }

.Color-Type04 {
  background: #CBCED0; }

/* SG
# Colors/other


```
<div class="box Color-Higlight"></div>
<div class="box Color-Alert"></div>
<div class="box Color-Public"></div>
<div class="box Color-Link"></div>
<div class="box Color-Password"></div>
<div class="box Color-Error"></div>
```
*/
.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

```
<div class="CDB-HeaderInfo is-block">
  <div class="CDB-HeaderInfo-title u-bSpace">
    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
    <div class="CDB-HeaderInfo-Actions">
      <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-Shape-threePoints is-blue is-small">
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
            </div>
          </div>
      </a>
    </div>
  </div>
  <ul class="CDB-HeaderInfo-List">
    <li class="CDB-HeaderInfo-listItem">
      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
        PUBLIC
      </button>
    </li>
    <li class="CDB-HeaderInfo-listItem">
      <ul class="CDB-AvatarList u-iBlock">
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
        </li>
        <li class="CDB-AvatarList-itemMore">
          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
        </li>
      </ul>
    </li>
    <li class="CDB-HeaderInfo-listItem">
      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
    </li>
  </ul>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <div class="CDB-HeaderInfo-inner">
    <div class="CDB-HeaderInfo-title u-bSpace">
      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
      <ul class="CDB-HeaderInfo-Actions">
        <li class="CDB-HeaderInfo-actionsItem">
          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
          </button>
        </li>
        <li class="CDB-HeaderInfo-actionsItem">
          <a href="#">
              <div class="CDB-Shape">
                <div class="CDB-Shape-threePoints is-blue is-small">
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                </div>
              </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <div class="CDB-HeaderInfo-inner">
    <div class="CDB-HeaderInfo-title u-bSpace">
      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
      <div class="CDB-HeaderInfo-actions">
        <a href="#">
            <div class="CDB-Shape">
              <div class="CDB-Shape-threePoints is-blue is-small">
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
              </div>
            </div>
        </a>
      </div>
    </div>
    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <div class="CDB-HeaderInfo-inner">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="CDB-HeaderInfo">
  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>

  <div class="CDB-HeaderInfo-inner CDB-Text">
    <div class="CDB-HeaderInfo-title u-bSpace--m">
      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>

      <div class="CDB-HeaderInfo-actions">
        <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
          </div>
        </a>
      </div>
    </div>

    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
  </div>
</div>

<br/>
<br/>
<br/>
```
*/
.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


```
  <div class="CDB-Box-modal">&nbsp;</div>
```
*/
.CDB-ListDecoration-item {
  border-bottom: 1px solid rgba(46, 60, 67, 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, ...

```
<div class="CDB-Loader is-visible"></div>

```
*/
.CDB-Loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 3px;
  transform: translateX(-200%);
  background-image: linear-gradient(90deg, #1785fb 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

```
<div style="padding: 20px;">
  <div class="CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>

  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #F9F9F9;">
  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #E27D61;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>
  </div>
</div>

```
*/
.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: #1785FB; }

@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


```
<nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">DATA</button>
    </li>
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">STYLE</button>
    </li>
    <li class="CDB-NavMenu-item is-selected">
      <button class="CDB-NavMenu-link">POP-UP</button>
      <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
        <li class="CDB-NavSubmenu-item is-selected">
          <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
        </li>
        <li class="CDB-NavSubmenu-item">
          <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
        </li>
      </ul>
    </li>
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">LEGEND</button>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
    <!-- ready for a button -->
  </div>
</nav>

<br/><br/>
<br/><br/>

<div style="background: #2E3C43; height: 100px; padding: 20px;">
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-item CDB-Text">
        <button class="CDB-NavMenu-link">DATA</button>
      </li>
      <li class="CDB-NavMenu-item">
        <button class="CDB-NavMenu-link">STYLE</button>
      </li>
      <li class="CDB-NavMenu-item is-selected">
        <button class="CDB-NavMenu-link">POP-UP</button>
        <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
          <li class="CDB-NavSubmenu-item is-selected">
            <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status">NONE</span></button>
          </li>
          <li class="CDB-NavSubmenu-item">
            <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
          </li>
        </ul>
      </li>
      <li class="CDB-NavMenu-item">
        <button class="CDB-NavMenu-link">LEGEND</button>
      </li>
    </ul>
  </nav>
</div>

<br/><br/>
<br/><br/>

<nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">DATA</button>
    </li>
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">STYLE</button>
    </li>
    <li class="CDB-NavMenu-item is-selected">
      <button class="CDB-NavMenu-link">POP-UP</button>
    </li>
    <li class="CDB-NavMenu-item">
      <button class="CDB-NavMenu-link">LEGEND</button>
    </li>
  </ul>

  <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
    <li class="CDB-NavSubmenu-item is-selected">
      <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
    </li>
    <li class="CDB-NavSubmenu-item">
      <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
    </li>
  </ul>
</nav>


<br/><br/>
<br/><br/>

<div style="background: #2E3C43; height: 100px; padding: 20px;">
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-item">
        <button class="CDB-NavMenu-link">DATA</button>
      </li>
      <li class="CDB-NavMenu-item">
        <button class="CDB-NavMenu-link">STYLE</button>
      </li>
      <li class="CDB-NavMenu-item is-selected">
        <button class="CDB-NavMenu-link">POP-UP</button>
      </li>
      <li class="CDB-NavMenu-item">
        <button class="CDB-NavMenu-link">LEGEND</button>
      </li>
    </ul>

    <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
      <li class="CDB-NavSubmenu-item is-selected">
        <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
      </li>
      <li class="CDB-NavSubmenu-item">
        <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
      </li>
    </ul>
  </nav>
</div>

```
*/
.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: #1785FB;
  touch-action: manipulation; }
  .CDB-NavMenu-link:hover {
    border-bottom: 2px solid #0F6CD2; }

.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(46, 60, 67, 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: #1785FB;
  touch-action: manipulation; }
  .CDB-NavSubmenu-link:hover {
    border-bottom: 2px solid #0F6CD2; }

.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

```
<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
  PUBLIC
</button>
<button class="CDB-Tag is-link CDB-Text is-semibold CDB-Size-small u-iBlock">
  LINK
</button>
<button class="CDB-Tag is-password CDB-Text is-semibold CDB-Size-small u-iBlock">
  PASSWORD
</button>
<button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
  PRIVATE
</button>
<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
  TAG
</button>
```
*/
.CDB-Tag {
  padding: 0 3px;
  border: 1px solid #1785FB;
  border-radius: 2px;
  color: #1785FB; }
  .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

```
<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      trees
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      table_merge
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      word
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
</ul>

```
*/
.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(23, 133, 251, 0.16); }

/* SG
# Tags / Data Type

```
<ul class="CDB-ListTag">
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      Number
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      Text
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      String
    </button>
  </li>
</ul>

```
*/
.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


```
<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>


<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>



```
*/
.CDB-InfoTooltip {
  display: inline-block;
  position: absolute;
  padding: 8px;
  border-radius: 4px;
  background: rgba(46, 60, 67, 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(46, 60, 67, 0.8); }

.is-black.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
  border-top-color: rgba(46, 60, 67, 0.8); }

.is-black.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
  border-right-color: rgba(46, 60, 67, 0.8); }

.is-black.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
  border-left-color: rgba(46, 60, 67, 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

```
<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
<p class="CDB-Text is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
<span class="CDB-Text CDB-Size-small is-underlined">?</span>
```
*/
.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


```
  <span class="CDB-SelectorLayer-letter CDB-Text CDB-Size-small u-whiteTextColor u-rSpace u-upperCase" style="background-color: #E65176">b0</span>
```
*/
.CDB-SelectorLayer {
  position: relative; }

.CDB-SelectorLayer.is-disabled {
  background-color: #F9F9F9; }

.CDB-SelectorLayer-letter {
  height: 14px;
  padding: 1px 5px;
  border-radius: 2px; }

/* BASICS */
.CodeMirror-editor {
  flex: 1 1 auto;
  position: relative; }

.CodeMirror-console {
  border-top: 1px solid #3A484E;
  border-bottom: 1px solid #3A484E;
  color: #4F5B60;
  font: 11px/24px Monaco, monospace;
  text-align: center; }

.CodeMirror-bullet {
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -25px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #F15743;
  z-index: 5; }

.CodeMirror-error {
  display: flex;
  padding: 4px 10px;
  border-top: 1px solid #3A484E;
  background-color: #27333A;
  line-height: 16px;
  text-align: left; }

.CodeMirror-errorMessage {
  flex: 1 1 auto;
  list-style-type: disc; }

.CodeMirror-error,
.CodeMirror-linenumber.has-error {
  color: #F15743; }

.CodeMirror-error a,
.CodeMirror-warning a {
  color: #FFF; }

.CodeMirror-error span {
  color: #4F5B60; }

.CodeMirror-warning {
  display: flex;
  align-items: self-start;
  justify-content: flex-start;
  margin: 0 0 24px;
  padding: 8px 16px;
  background-color: #27333A;
  color: #FEB714;
  line-height: 16px;
  text-align: left; }

.CodeMirror-warning-icon__wrapper {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 8px; }

.CodeMirror-warning-icon {
  width: 16px;
  height: 16px; }

.CodeMirror-readonlyLine {
  background: #4F5B60; }

.CodeMirror-readonlyLine ~ .CodeMirror-line span {
  color: #FFF !important; }

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 100%;
  font-family: monospace; }

/* PADDING */
.CodeMirror-lines {
  padding: 4px 0;
  /* Vertical padding around content */ }

.CodeMirror pre {
  padding: 0 14px;
  /* Horizontal padding of content */ }

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: #fff;
  /* The little square between H and V scrollbars */ }

/* GUTTER */
.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap; }

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap; }

.CodeMirror-guttermarker {
  color: black; }

.CodeMirror-guttermarker-subtle {
  color: #999; }

/* CURSOR */
.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0; }

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver; }

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7; }

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1; }

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7; }

@-moz-keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

@-webkit-keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

@keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

/* Can style cursor different in overwrite (non-insert) mode */
.cm-tab {
  display: inline-block;
  text-decoration: inherit; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute; }

/* DEFAULT THEME */
.cm-s-default .cm-header {
  color: blue; }

.cm-s-default .cm-quote {
  color: #090; }

.cm-negative {
  color: #d44; }

.cm-positive {
  color: #292; }

.cm-header, .cm-strong {
  font-weight: bold; }

.cm-em {
  font-style: italic; }

.cm-link {
  text-decoration: underline; }

.cm-strikethrough {
  text-decoration: line-through; }

.cm-s-default .cm-keyword {
  color: #708; }

.cm-s-default .cm-atom {
  color: #219; }

.cm-s-default .cm-number {
  color: #164; }

.cm-s-default .cm-def {
  color: #00f; }

.cm-s-default .cm-variable-2 {
  color: #05a; }

.cm-s-default .cm-variable-3 {
  color: #085; }

.cm-s-default .cm-comment {
  color: #a50; }

.cm-s-default .cm-string {
  color: #a11; }

.cm-s-default .cm-string-2 {
  color: #f50; }

.cm-s-default .cm-meta {
  color: #555; }

.cm-s-default .cm-qualifier {
  color: #555; }

.cm-s-default .cm-builtin {
  color: #30a; }

.cm-s-default .cm-bracket {
  color: #997; }

.cm-s-default .cm-tag {
  color: #170; }

.cm-s-default .cm-attribute {
  color: #00c; }

.cm-s-default .cm-hr {
  color: #999; }

.cm-s-default .cm-link {
  color: #00c; }

.cm-color:hover {
  cursor: pointer; }

.cm-s-default .cm-error {
  color: #f00; }

.cm-invalidchar {
  color: #f00; }

.CodeMirror-composing {
  border-bottom: 2px solid; }

/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0f0; }

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #f22; }

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3); }

.CodeMirror-activeline-background {
  background: #e8f2ff; }

/* STOP */
/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */
.CodeMirror {
  overflow: hidden;
  background-color: #2B3C43;
  color: #e9eded; }

.CodeMirror-scroll {
  overflow: scroll !important;
  /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px;
  margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none;
  /* Prevent dragging from highlighting the element */
  position: relative; }

.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent; }

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none; }

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll; }

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll; }

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0; }

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0; }

.CodeMirror-gutters {
  background: #2B3C43;
  color: #537f7e;
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3; }

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
  /* Hack to make IE7 behave */
  *zoom: 1;
  *display: inline; }

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important; }

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4; }

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4; }

.CodeMirror-gutter-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px;
  /* prevents collapsing before first draw */ }

.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none; }

.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal; }

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0; }

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  overflow: auto; }

.CodeMirror-code {
  outline: none; }

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden; }

.CodeMirror-cursor {
  position: absolute;
  border-left: 1px solid #f8f8f0; }

.CodeMirror-measure pre {
  position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3; }

div.CodeMirror-dragcursors {
  visibility: visible; }

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible; }

.CodeMirror-selected {
  background: #d9d9d9; }

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0; }

.CodeMirror-crosshair {
  cursor: crosshair; }

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
  background: #d7d4f0; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0; }

.cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, 0.4); }

/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span {
  *vertical-align: text-bottom; }

/* Used to force a border model for a node */
.cm-force-border {
  padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden; } }

/* See issue #2901 */
.cm-tab-wrap-hack:after {
  content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
  background: none; }

.cm-s-material {
  background-color: #2B3C43;
  color: #e9eded; }

.cm-s-material .CodeMirror-gutters {
  background: #2B3C43;
  color: #537f7e;
  border: none; }

.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber {
  color: #537f7e; }

.cm-s-material .CodeMirror-linenumber.has-error {
  color: #F15743; }

.cm-s-material .CodeMirror-cursor {
  border-left: 1px solid #f8f8f0; }

.cm-s-material div.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.15); }

.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1); }

.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection {
  background: rgba(255, 255, 255, 0.1); }

.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection {
  background: rgba(255, 255, 255, 0.1); }

.cm-s-material .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0); }

.cm-s-material .cm-keyword {
  color: #c792ea; }

.cm-s-material .cm-operator {
  color: #e9eded; }

.cm-s-material .cm-variable-2 {
  color: #80CBC4; }

.cm-s-material .cm-variable-3 {
  color: #82B1FF; }

.cm-s-material .cm-builtin {
  color: #DECB6B; }

.cm-s-material .cm-atom {
  color: #F77669; }

.cm-s-material .cm-number {
  color: #F77669; }

.cm-s-material .cm-def {
  color: #e9eded; }

.cm-s-material .cm-string {
  color: #C3E88D; }

.cm-s-material .cm-string-2 {
  color: #80CBC4; }

.cm-s-material .cm-comment {
  color: #546E7A; }

.cm-s-material .cm-variable {
  color: #82B1FF; }

.cm-s-material .cm-tag {
  color: #80CBC4; }

.cm-s-material .cm-meta {
  color: #80CBC4; }

.cm-s-material .cm-attribute {
  color: #FFCB6B; }

.cm-s-material .cm-property {
  color: #80CBAE; }

.cm-s-material .cm-qualifier {
  color: #DECB6B; }

.cm-s-material .cm-variable-3 {
  color: #DECB6B; }

.cm-s-material .cm-tag {
  color: #ff5370; }

.cm-s-material .cm-error {
  color: white;
  background-color: #EC5F67; }

.cm-s-material .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important; }

.cm-mustache,
.cm-mustache-text {
  color: #e9eded; }

.cm-mustache-error {
  color: #F15743; }

.cm-mustache-text {
  color: #83B1FA; }

.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
  position: absolute;
  background: #636D72;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 2px; }

.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
  position: absolute;
  z-index: 6;
  background: #27333A; }

.CodeMirror-simplescroll-horizontal {
  bottom: 0;
  left: 0;
  height: 2px; }

.CodeMirror-simplescroll-horizontal div {
  bottom: 0;
  height: 100%; }

.CodeMirror-simplescroll-vertical {
  right: 0;
  top: 0;
  width: 2px; }

.CodeMirror-simplescroll-vertical div {
  right: 0;
  width: 100%; }

.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler {
  display: none; }

.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
  position: absolute;
  background: #bcd;
  border-radius: 3px; }

.CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical {
  position: absolute;
  z-index: 6; }

.CodeMirror-overlayscroll-horizontal {
  bottom: 0;
  left: 0;
  height: 2px; }

.CodeMirror-overlayscroll-horizontal div {
  bottom: 0;
  height: 100%; }

.CodeMirror-overlayscroll-vertical {
  right: 0;
  top: 0;
  width: 2px; }

.CodeMirror-overlayscroll-vertical div {
  right: 0;
  width: 100%; }

.CodeMirror-formInput {
  height: 90px; }
  .CodeMirror-formInput .CodeMirror {
    border-radius: 4px; }
    .CodeMirror-formInput .CodeMirror pre.CodeMirror-line, .CodeMirror-formInput .CodeMirror pre.CodeMirror-placeholder {
      padding: 0 4px; }
  .CodeMirror-formInput .cm-s-material .CodeMirror-gutters {
    background: transparent; }
  .CodeMirror-formInput .CodeMirror-selected {
    left: 4px; }

.CodeMirror pre.CodeMirror-placeholder {
  color: rgba(255, 255, 255, 0.24); }


/*# sourceMappingURL=common_new.css.map*/