@blockle/blocks 0.1.0 → 0.2.0

package/dist/blocks.css

@@ -1,2554 +0,0 @@
-.Badge {
-  display: inline-block;
-  border-radius: 10px;
-  padding: 4px 8px;
-  background-color: var(--accent-primary);
-  color: #fff;
-  line-height: 1;
-  text-transform: uppercase;
-  margin: 1px;
-}
-
-/* alignItems */
-.bb-alignItems-stretch {
-  align-items: stretch;
-}
-.bb-alignItems-center {
-  align-items: center;
-}
-.bb-alignItems-flex-start {
-  align-items: flex-start;
-}
-.bb-alignItems-flex-end {
-  align-items: flex-end;
-}
-.bb-alignItems-baseline {
-  align-items: baseline;
-}
-/* display */
-.bb-display-block {
-  display: block;
-}
-.bb-display-inline {
-  display: inline;
-}
-.bb-display-inline-block {
-  display: inline-block;
-}
-.bb-display-flex {
-  display: flex;
-}
-.bb-display-inline-flex {
-  display: inline-flex;
-}
-.bb-display-grid {
-  display: grid;
-}
-.bb-display-inline-grid {
-  display: inline-grid;
-}
-.bb-display-none {
-  display: none;
-}
-/* flexDirection */
-.bb-flexDirection-row {
-  flex-direction: row;
-}
-.bb-flexDirection-row-reverse {
-  flex-direction: row-reverse;
-}
-.bb-flexDirection-column {
-  flex-direction: column;
-}
-.bb-flexDirection-column-reverse {
-  flex-direction: column-reverse;
-}
-/* flexGrow */
-.bb-flexGrow-0 {
-  flex-grow: 0;
-}
-.bb-flexGrow-1 {
-  flex-grow: 1;
-}
-/* flexShrink */
-.bb-flexShrink-0 {
-  flex-shrink: 0;
-}
-/* flexWrap */
-.bb-flexWrap-nowrap {
-  flex-wrap: nowrap;
-}
-.bb-flexWrap-wrap {
-  flex-wrap: wrap;
-}
-.bb-flexWrap-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-/* height */
-.bb-height-full {
-  height: 100%;
-}
-/* justifyContent */
-.bb-justifyContent-flex-start {
-  justify-content: flex-start;
-}
-.bb-justifyContent-flex-end {
-  justify-content: flex-end;
-}
-.bb-justifyContent-center {
-  justify-content: center;
-}
-.bb-justifyContent-space-between {
-  justify-content: space-between;
-}
-.bb-justifyContent-space-around {
-  justify-content: space-around;
-}
-/* overflow */
-.bb-overflow-auto {
-  overflow: auto;
-}
-.bb-overflow-scroll {
-  overflow: scroll;
-}
-.bb-overflow-hidden {
-  overflow: hidden;
-}
-.bb-overflow-visible {
-  overflow: visible;
-}
-/* overflowX */
-.bb-overflowX-auto {
-  overflow-x: auto;
-}
-.bb-overflowX-scroll {
-  overflow-x: scroll;
-}
-.bb-overflowX-hidden {
-  overflow-x: hidden;
-}
-.bb-overflowX-visible {
-  overflow-x: visible;
-}
-/* overflowY */
-.bb-overflowY-auto {
-  overflow-y: auto;
-}
-.bb-overflowY-scroll {
-  overflow-y: scroll;
-}
-.bb-overflowY-hidden {
-  overflow-y: hidden;
-}
-.bb-overflowY-visible {
-  overflow-y: visible;
-}
-/* padding */
-.bb-padding-gutter {
-  padding: var(--space-gutter);
-}
-.bb-padding-xsmall {
-  padding: var(--space-xsmall);
-}
-.bb-padding-small {
-  padding: var(--space-small);
-}
-.bb-padding-medium {
-  padding: var(--space-medium);
-}
-.bb-padding-large {
-  padding: var(--space-large);
-}
-.bb-padding-xlarge {
-  padding: var(--space-xlarge);
-}
-/* paddingBottom */
-.bb-paddingBottom-gutter {
-  padding-bottom: var(--space-gutter);
-}
-.bb-paddingBottom-xsmall {
-  padding-bottom: var(--space-xsmall);
-}
-.bb-paddingBottom-small {
-  padding-bottom: var(--space-small);
-}
-.bb-paddingBottom-medium {
-  padding-bottom: var(--space-medium);
-}
-.bb-paddingBottom-large {
-  padding-bottom: var(--space-large);
-}
-.bb-paddingBottom-xlarge {
-  padding-bottom: var(--space-xlarge);
-}
-/* paddingLeft */
-.bb-paddingLeft-gutter {
-  padding-left: var(--space-gutter);
-}
-.bb-paddingLeft-xsmall {
-  padding-left: var(--space-xsmall);
-}
-.bb-paddingLeft-small {
-  padding-left: var(--space-small);
-}
-.bb-paddingLeft-medium {
-  padding-left: var(--space-medium);
-}
-.bb-paddingLeft-large {
-  padding-left: var(--space-large);
-}
-.bb-paddingLeft-xlarge {
-  padding-left: var(--space-xlarge);
-}
-/* paddingRight */
-.bb-paddingRight-gutter {
-  padding-right: var(--space-gutter);
-}
-.bb-paddingRight-xsmall {
-  padding-right: var(--space-xsmall);
-}
-.bb-paddingRight-small {
-  padding-right: var(--space-small);
-}
-.bb-paddingRight-medium {
-  padding-right: var(--space-medium);
-}
-.bb-paddingRight-large {
-  padding-right: var(--space-large);
-}
-.bb-paddingRight-xlarge {
-  padding-right: var(--space-xlarge);
-}
-/* paddingTop */
-.bb-paddingTop-gutter {
-  padding-top: var(--space-gutter);
-}
-.bb-paddingTop-xsmall {
-  padding-top: var(--space-xsmall);
-}
-.bb-paddingTop-small {
-  padding-top: var(--space-small);
-}
-.bb-paddingTop-medium {
-  padding-top: var(--space-medium);
-}
-.bb-paddingTop-large {
-  padding-top: var(--space-large);
-}
-.bb-paddingTop-xlarge {
-  padding-top: var(--space-xlarge);
-}
-/* paddingX */
-.bb-paddingX-gutter {
-  padding-left: var(--space-gutter);
-  padding-right: var(--space-gutter);
-}
-.bb-paddingX-xsmall {
-  padding-left: var(--space-xsmall);
-  padding-right: var(--space-xsmall);
-}
-.bb-paddingX-small {
-  padding-left: var(--space-small);
-  padding-right: var(--space-small);
-}
-.bb-paddingX-medium {
-  padding-left: var(--space-medium);
-  padding-right: var(--space-medium);
-}
-.bb-paddingX-large {
-  padding-left: var(--space-large);
-  padding-right: var(--space-large);
-}
-.bb-paddingX-xlarge {
-  padding-left: var(--space-xlarge);
-  padding-right: var(--space-xlarge);
-}
-/* paddingY */
-.bb-paddingY-gutter {
-  padding-top: var(--space-gutter);
-  padding-bottom: var(--space-gutter);
-}
-.bb-paddingY-xsmall {
-  padding-top: var(--space-xsmall);
-  padding-bottom: var(--space-xsmall);
-}
-.bb-paddingY-small {
-  padding-top: var(--space-small);
-  padding-bottom: var(--space-small);
-}
-.bb-paddingY-medium {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-medium);
-}
-.bb-paddingY-large {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
-}
-.bb-paddingY-xlarge {
-  padding-top: var(--space-xlarge);
-  padding-bottom: var(--space-xlarge);
-}
-/* position */
-.bb-position-relative {
-  position: relative;
-}
-.bb-position-fixed {
-  position: fixed;
-}
-.bb-position-absolute {
-  position: absolute;
-}
-.bb-position-sticky {
-  position: -webkit-sticky;
-  position: sticky;
-}
-/* textAlign */
-.bb-textAlign-left {
-  text-align: left;
-}
-.bb-textAlign-right {
-  text-align: right;
-}
-.bb-textAlign-center {
-  text-align: center;
-}
-.bb-textAlign-justify {
-  text-align: justify;
-}
-/* textTransform */
-.bb-textTransform-capitalise {
-  text-transform: capitalize;
-}
-.bb-textTransform-none {
-  text-transform: none;
-}
-.bb-textTransform-uppercase {
-  text-transform: uppercase;
-}
-.bb-textTransform-lowercase {
-  text-transform: lowercase;
-}
-/* width */
-.bb-width-full {
-  width: 100%;
-}
-/* fontSize */
-.bb-fontSize-xsmall {
-  font-size: var(--font-xsmall);
-}
-.bb-fontSize-small {
-  font-size: var(--font-small);
-}
-.bb-fontSize-medium {
-  font-size: var(--font-medium);
-}
-.bb-fontSize-large {
-  font-size: var(--font-large);
-}
-.bb-fontSize-xlarge {
-  font-size: var(--font-xlarge);
-}
-/* fontWeight */
-.bb-fontWeight-regular {
-  font-weight: 400;
-}
-.bb-fontWeight-bold {
-  font-weight: 700;
-}
-/* color */
-.bb-color-black {
-  color: var(--color-black);
-}
-.bb-color-danger {
-  color: var(--color-danger);
-}
-.bb-color-dark {
-  color: var(--color-dark);
-}
-.bb-color-gray {
-  color: var(--color-gray);
-}
-.bb-color-lightGray {
-  color: var(--color-light-gray);
-}
-.bb-color-info {
-  color: var(--color-info);
-}
-.bb-color-primary {
-  color: var(--color-primary);
-}
-.bb-color-secondary {
-  color: var(--color-secondary);
-}
-.bb-color-success {
-  color: var(--color-success);
-}
-.bb-color-warning {
-  color: var(--color-warning);
-}
-.bb-color-white {
-  color: var(--color-white);
-}
-.bb-color-card {
-  color: var(--color-card);
-}
-/* backgroundColor */
-.bb-backgroundColor-black {
-  background-color: var(--color-black);
-}
-.bb-backgroundColor-danger {
-  background-color: var(--color-danger);
-}
-.bb-backgroundColor-dark {
-  background-color: var(--color-dark);
-}
-.bb-backgroundColor-gray {
-  background-color: var(--color-gray);
-}
-.bb-backgroundColor-lightGray {
-  background-color: var(--color-light-gray);
-}
-.bb-backgroundColor-info {
-  background-color: var(--color-info);
-}
-.bb-backgroundColor-primary {
-  background-color: var(--color-primary);
-}
-.bb-backgroundColor-secondary {
-  background-color: var(--color-secondary);
-}
-.bb-backgroundColor-success {
-  background-color: var(--color-success);
-}
-.bb-backgroundColor-warning {
-  background-color: var(--color-warning);
-}
-.bb-backgroundColor-white {
-  background-color: var(--color-white);
-}
-.bb-backgroundColor-card {
-  background-color: var(--color-card);
-}
-/* gridGap */
-.bb-gridGap-gutter {
-  grid-gap: var(--space-gutter);
-}
-.bb-gridGap-xsmall {
-  grid-gap: var(--space-xsmall);
-}
-.bb-gridGap-small {
-  grid-gap: var(--space-small);
-}
-.bb-gridGap-medium {
-  grid-gap: var(--space-medium);
-}
-.bb-gridGap-large {
-  grid-gap: var(--space-large);
-}
-.bb-gridGap-xlarge {
-  grid-gap: var(--space-xlarge);
-}
-/* negativeMarginTop */
-.bb-negativeMarginTop-gutter {
-  margin-top: calc(var(--space-gutter) * -1);
-}
-.bb-negativeMarginTop-xsmall {
-  margin-top: calc(var(--space-xsmall) * -1);
-}
-.bb-negativeMarginTop-small {
-  margin-top: calc(var(--space-small) * -1);
-}
-.bb-negativeMarginTop-medium {
-  margin-top: calc(var(--space-medium) * -1);
-}
-.bb-negativeMarginTop-large {
-  margin-top: calc(var(--space-large) * -1);
-}
-.bb-negativeMarginTop-xlarge {
-  margin-top: calc(var(--space-xlarge) * -1);
-}
-/* negativeMarginLeft */
-.bb-negativeMarginLeft-gutter {
-  margin-left: calc(var(--space-gutter) * -1);
-}
-.bb-negativeMarginLeft-xsmall {
-  margin-left: calc(var(--space-xsmall) * -1);
-}
-.bb-negativeMarginLeft-small {
-  margin-left: calc(var(--space-small) * -1);
-}
-.bb-negativeMarginLeft-medium {
-  margin-left: calc(var(--space-medium) * -1);
-}
-.bb-negativeMarginLeft-large {
-  margin-left: calc(var(--space-large) * -1);
-}
-.bb-negativeMarginLeft-xlarge {
-  margin-left: calc(var(--space-xlarge) * -1);
-}
-/* fontStyle */
-.bb-fontStyle-normal {
-  font-style: normal;
-}
-.bb-fontStyle-italic {
-  font-style: italic;
-}
-@media (min-width: 500px) {
-  .bb-alignItems-stretch-bp1 {
-    align-items: stretch;
-  }
-
-  .bb-alignItems-center-bp1 {
-    align-items: center;
-  }
-
-  .bb-alignItems-flex-start-bp1 {
-    align-items: flex-start;
-  }
-
-  .bb-alignItems-flex-end-bp1 {
-    align-items: flex-end;
-  }
-
-  .bb-alignItems-baseline-bp1 {
-    align-items: baseline;
-  }
-
-  .bb-display-block-bp1 {
-    display: block;
-  }
-
-  .bb-display-inline-bp1 {
-    display: inline;
-  }
-
-  .bb-display-inline-block-bp1 {
-    display: inline-block;
-  }
-
-  .bb-display-flex-bp1 {
-    display: flex;
-  }
-
-  .bb-display-inline-flex-bp1 {
-    display: inline-flex;
-  }
-
-  .bb-display-grid-bp1 {
-    display: grid;
-  }
-
-  .bb-display-inline-grid-bp1 {
-    display: inline-grid;
-  }
-
-  .bb-display-none-bp1 {
-    display: none;
-  }
-
-  .bb-flexDirection-row-bp1 {
-    flex-direction: row;
-  }
-
-  .bb-flexDirection-row-reverse-bp1 {
-    flex-direction: row-reverse;
-  }
-
-  .bb-flexDirection-column-bp1 {
-    flex-direction: column;
-  }
-
-  .bb-flexDirection-column-reverse-bp1 {
-    flex-direction: column-reverse;
-  }
-
-  .bb-flexGrow-0-bp1 {
-    flex-grow: 0;
-  }
-
-  .bb-flexGrow-1-bp1 {
-    flex-grow: 1;
-  }
-
-  .bb-flexShrink-0-bp1 {
-    flex-shrink: 0;
-  }
-
-  .bb-flexWrap-nowrap-bp1 {
-    flex-wrap: nowrap;
-  }
-
-  .bb-flexWrap-wrap-bp1 {
-    flex-wrap: wrap;
-  }
-
-  .bb-flexWrap-wrap-reverse-bp1 {
-    flex-wrap: wrap-reverse;
-  }
-
-  .bb-height-full-bp1 {
-    height: 100%;
-  }
-
-  .bb-justifyContent-flex-start-bp1 {
-    justify-content: flex-start;
-  }
-
-  .bb-justifyContent-flex-end-bp1 {
-    justify-content: flex-end;
-  }
-
-  .bb-justifyContent-center-bp1 {
-    justify-content: center;
-  }
-
-  .bb-justifyContent-space-between-bp1 {
-    justify-content: space-between;
-  }
-
-  .bb-justifyContent-space-around-bp1 {
-    justify-content: space-around;
-  }
-
-  .bb-overflow-auto-bp1 {
-    overflow: auto;
-  }
-
-  .bb-overflow-scroll-bp1 {
-    overflow: scroll;
-  }
-
-  .bb-overflow-hidden-bp1 {
-    overflow: hidden;
-  }
-
-  .bb-overflow-visible-bp1 {
-    overflow: visible;
-  }
-
-  .bb-overflowX-auto-bp1 {
-    overflow-x: auto;
-  }
-
-  .bb-overflowX-scroll-bp1 {
-    overflow-x: scroll;
-  }
-
-  .bb-overflowX-hidden-bp1 {
-    overflow-x: hidden;
-  }
-
-  .bb-overflowX-visible-bp1 {
-    overflow-x: visible;
-  }
-
-  .bb-overflowY-auto-bp1 {
-    overflow-y: auto;
-  }
-
-  .bb-overflowY-scroll-bp1 {
-    overflow-y: scroll;
-  }
-
-  .bb-overflowY-hidden-bp1 {
-    overflow-y: hidden;
-  }
-
-  .bb-overflowY-visible-bp1 {
-    overflow-y: visible;
-  }
-
-  .bb-padding-gutter-bp1 {
-    padding: var(--space-gutter);
-  }
-
-  .bb-padding-xsmall-bp1 {
-    padding: var(--space-xsmall);
-  }
-
-  .bb-padding-small-bp1 {
-    padding: var(--space-small);
-  }
-
-  .bb-padding-medium-bp1 {
-    padding: var(--space-medium);
-  }
-
-  .bb-padding-large-bp1 {
-    padding: var(--space-large);
-  }
-
-  .bb-padding-xlarge-bp1 {
-    padding: var(--space-xlarge);
-  }
-
-  .bb-paddingBottom-gutter-bp1 {
-    padding-bottom: var(--space-gutter);
-  }
-
-  .bb-paddingBottom-xsmall-bp1 {
-    padding-bottom: var(--space-xsmall);
-  }
-
-  .bb-paddingBottom-small-bp1 {
-    padding-bottom: var(--space-small);
-  }
-
-  .bb-paddingBottom-medium-bp1 {
-    padding-bottom: var(--space-medium);
-  }
-
-  .bb-paddingBottom-large-bp1 {
-    padding-bottom: var(--space-large);
-  }
-
-  .bb-paddingBottom-xlarge-bp1 {
-    padding-bottom: var(--space-xlarge);
-  }
-
-  .bb-paddingLeft-gutter-bp1 {
-    padding-left: var(--space-gutter);
-  }
-
-  .bb-paddingLeft-xsmall-bp1 {
-    padding-left: var(--space-xsmall);
-  }
-
-  .bb-paddingLeft-small-bp1 {
-    padding-left: var(--space-small);
-  }
-
-  .bb-paddingLeft-medium-bp1 {
-    padding-left: var(--space-medium);
-  }
-
-  .bb-paddingLeft-large-bp1 {
-    padding-left: var(--space-large);
-  }
-
-  .bb-paddingLeft-xlarge-bp1 {
-    padding-left: var(--space-xlarge);
-  }
-
-  .bb-paddingRight-gutter-bp1 {
-    padding-right: var(--space-gutter);
-  }
-
-  .bb-paddingRight-xsmall-bp1 {
-    padding-right: var(--space-xsmall);
-  }
-
-  .bb-paddingRight-small-bp1 {
-    padding-right: var(--space-small);
-  }
-
-  .bb-paddingRight-medium-bp1 {
-    padding-right: var(--space-medium);
-  }
-
-  .bb-paddingRight-large-bp1 {
-    padding-right: var(--space-large);
-  }
-
-  .bb-paddingRight-xlarge-bp1 {
-    padding-right: var(--space-xlarge);
-  }
-
-  .bb-paddingTop-gutter-bp1 {
-    padding-top: var(--space-gutter);
-  }
-
-  .bb-paddingTop-xsmall-bp1 {
-    padding-top: var(--space-xsmall);
-  }
-
-  .bb-paddingTop-small-bp1 {
-    padding-top: var(--space-small);
-  }
-
-  .bb-paddingTop-medium-bp1 {
-    padding-top: var(--space-medium);
-  }
-
-  .bb-paddingTop-large-bp1 {
-    padding-top: var(--space-large);
-  }
-
-  .bb-paddingTop-xlarge-bp1 {
-    padding-top: var(--space-xlarge);
-  }
-
-  .bb-paddingX-gutter-bp1 {
-    padding-left: var(--space-gutter);
-    padding-right: var(--space-gutter);
-  }
-
-  .bb-paddingX-xsmall-bp1 {
-    padding-left: var(--space-xsmall);
-    padding-right: var(--space-xsmall);
-  }
-
-  .bb-paddingX-small-bp1 {
-    padding-left: var(--space-small);
-    padding-right: var(--space-small);
-  }
-
-  .bb-paddingX-medium-bp1 {
-    padding-left: var(--space-medium);
-    padding-right: var(--space-medium);
-  }
-
-  .bb-paddingX-large-bp1 {
-    padding-left: var(--space-large);
-    padding-right: var(--space-large);
-  }
-
-  .bb-paddingX-xlarge-bp1 {
-    padding-left: var(--space-xlarge);
-    padding-right: var(--space-xlarge);
-  }
-
-  .bb-paddingY-gutter-bp1 {
-    padding-top: var(--space-gutter);
-    padding-bottom: var(--space-gutter);
-  }
-
-  .bb-paddingY-xsmall-bp1 {
-    padding-top: var(--space-xsmall);
-    padding-bottom: var(--space-xsmall);
-  }
-
-  .bb-paddingY-small-bp1 {
-    padding-top: var(--space-small);
-    padding-bottom: var(--space-small);
-  }
-
-  .bb-paddingY-medium-bp1 {
-    padding-top: var(--space-medium);
-    padding-bottom: var(--space-medium);
-  }
-
-  .bb-paddingY-large-bp1 {
-    padding-top: var(--space-large);
-    padding-bottom: var(--space-large);
-  }
-
-  .bb-paddingY-xlarge-bp1 {
-    padding-top: var(--space-xlarge);
-    padding-bottom: var(--space-xlarge);
-  }
-
-  .bb-position-relative-bp1 {
-    position: relative;
-  }
-
-  .bb-position-fixed-bp1 {
-    position: fixed;
-  }
-
-  .bb-position-absolute-bp1 {
-    position: absolute;
-  }
-
-  .bb-position-sticky-bp1 {
-    position: -webkit-sticky;
-    position: sticky;
-  }
-
-  .bb-textAlign-left-bp1 {
-    text-align: left;
-  }
-
-  .bb-textAlign-right-bp1 {
-    text-align: right;
-  }
-
-  .bb-textAlign-center-bp1 {
-    text-align: center;
-  }
-
-  .bb-textAlign-justify-bp1 {
-    text-align: justify;
-  }
-
-  .bb-textTransform-capitalise-bp1 {
-    text-transform: capitalize;
-  }
-
-  .bb-textTransform-none-bp1 {
-    text-transform: none;
-  }
-
-  .bb-textTransform-uppercase-bp1 {
-    text-transform: uppercase;
-  }
-
-  .bb-textTransform-lowercase-bp1 {
-    text-transform: lowercase;
-  }
-
-  .bb-width-full-bp1 {
-    width: 100%;
-  }
-
-  .bb-fontSize-xsmall-bp1 {
-    font-size: var(--font-xsmall);
-  }
-
-  .bb-fontSize-small-bp1 {
-    font-size: var(--font-small);
-  }
-
-  .bb-fontSize-medium-bp1 {
-    font-size: var(--font-medium);
-  }
-
-  .bb-fontSize-large-bp1 {
-    font-size: var(--font-large);
-  }
-
-  .bb-fontSize-xlarge-bp1 {
-    font-size: var(--font-xlarge);
-  }
-
-  .bb-fontWeight-regular-bp1 {
-    font-weight: 400;
-  }
-
-  .bb-fontWeight-bold-bp1 {
-    font-weight: 700;
-  }
-
-  .bb-color-black-bp1 {
-    color: var(--color-black);
-  }
-
-  .bb-color-danger-bp1 {
-    color: var(--color-danger);
-  }
-
-  .bb-color-dark-bp1 {
-    color: var(--color-dark);
-  }
-
-  .bb-color-gray-bp1 {
-    color: var(--color-gray);
-  }
-
-  .bb-color-lightGray-bp1 {
-    color: var(--color-light-gray);
-  }
-
-  .bb-color-info-bp1 {
-    color: var(--color-info);
-  }
-
-  .bb-color-primary-bp1 {
-    color: var(--color-primary);
-  }
-
-  .bb-color-secondary-bp1 {
-    color: var(--color-secondary);
-  }
-
-  .bb-color-success-bp1 {
-    color: var(--color-success);
-  }
-
-  .bb-color-warning-bp1 {
-    color: var(--color-warning);
-  }
-
-  .bb-color-white-bp1 {
-    color: var(--color-white);
-  }
-
-  .bb-color-card-bp1 {
-    color: var(--color-card);
-  }
-
-  .bb-backgroundColor-black-bp1 {
-    background-color: var(--color-black);
-  }
-
-  .bb-backgroundColor-danger-bp1 {
-    background-color: var(--color-danger);
-  }
-
-  .bb-backgroundColor-dark-bp1 {
-    background-color: var(--color-dark);
-  }
-
-  .bb-backgroundColor-gray-bp1 {
-    background-color: var(--color-gray);
-  }
-
-  .bb-backgroundColor-lightGray-bp1 {
-    background-color: var(--color-light-gray);
-  }
-
-  .bb-backgroundColor-info-bp1 {
-    background-color: var(--color-info);
-  }
-
-  .bb-backgroundColor-primary-bp1 {
-    background-color: var(--color-primary);
-  }
-
-  .bb-backgroundColor-secondary-bp1 {
-    background-color: var(--color-secondary);
-  }
-
-  .bb-backgroundColor-success-bp1 {
-    background-color: var(--color-success);
-  }
-
-  .bb-backgroundColor-warning-bp1 {
-    background-color: var(--color-warning);
-  }
-
-  .bb-backgroundColor-white-bp1 {
-    background-color: var(--color-white);
-  }
-
-  .bb-backgroundColor-card-bp1 {
-    background-color: var(--color-card);
-  }
-
-  .bb-gridGap-gutter-bp1 {
-    grid-gap: var(--space-gutter);
-  }
-
-  .bb-gridGap-xsmall-bp1 {
-    grid-gap: var(--space-xsmall);
-  }
-
-  .bb-gridGap-small-bp1 {
-    grid-gap: var(--space-small);
-  }
-
-  .bb-gridGap-medium-bp1 {
-    grid-gap: var(--space-medium);
-  }
-
-  .bb-gridGap-large-bp1 {
-    grid-gap: var(--space-large);
-  }
-
-  .bb-gridGap-xlarge-bp1 {
-    grid-gap: var(--space-xlarge);
-  }
-
-  .bb-negativeMarginTop-gutter-bp1 {
-    margin-top: calc(var(--space-gutter) * -1);
-  }
-
-  .bb-negativeMarginTop-xsmall-bp1 {
-    margin-top: calc(var(--space-xsmall) * -1);
-  }
-
-  .bb-negativeMarginTop-small-bp1 {
-    margin-top: calc(var(--space-small) * -1);
-  }
-
-  .bb-negativeMarginTop-medium-bp1 {
-    margin-top: calc(var(--space-medium) * -1);
-  }
-
-  .bb-negativeMarginTop-large-bp1 {
-    margin-top: calc(var(--space-large) * -1);
-  }
-
-  .bb-negativeMarginTop-xlarge-bp1 {
-    margin-top: calc(var(--space-xlarge) * -1);
-  }
-
-  .bb-negativeMarginLeft-gutter-bp1 {
-    margin-left: calc(var(--space-gutter) * -1);
-  }
-
-  .bb-negativeMarginLeft-xsmall-bp1 {
-    margin-left: calc(var(--space-xsmall) * -1);
-  }
-
-  .bb-negativeMarginLeft-small-bp1 {
-    margin-left: calc(var(--space-small) * -1);
-  }
-
-  .bb-negativeMarginLeft-medium-bp1 {
-    margin-left: calc(var(--space-medium) * -1);
-  }
-
-  .bb-negativeMarginLeft-large-bp1 {
-    margin-left: calc(var(--space-large) * -1);
-  }
-
-  .bb-negativeMarginLeft-xlarge-bp1 {
-    margin-left: calc(var(--space-xlarge) * -1);
-  }
-
-  .bb-fontStyle-normal-bp1 {
-    font-style: normal;
-  }
-
-  .bb-fontStyle-italic-bp1 {
-    font-style: italic;
-  }
-
-}
-@media (min-width: 800px) {
-  .bb-alignItems-stretch-bp2 {
-    align-items: stretch;
-  }
-
-  .bb-alignItems-center-bp2 {
-    align-items: center;
-  }
-
-  .bb-alignItems-flex-start-bp2 {
-    align-items: flex-start;
-  }
-
-  .bb-alignItems-flex-end-bp2 {
-    align-items: flex-end;
-  }
-
-  .bb-alignItems-baseline-bp2 {
-    align-items: baseline;
-  }
-
-  .bb-display-block-bp2 {
-    display: block;
-  }
-
-  .bb-display-inline-bp2 {
-    display: inline;
-  }
-
-  .bb-display-inline-block-bp2 {
-    display: inline-block;
-  }
-
-  .bb-display-flex-bp2 {
-    display: flex;
-  }
-
-  .bb-display-inline-flex-bp2 {
-    display: inline-flex;
-  }
-
-  .bb-display-grid-bp2 {
-    display: grid;
-  }
-
-  .bb-display-inline-grid-bp2 {
-    display: inline-grid;
-  }
-
-  .bb-display-none-bp2 {
-    display: none;
-  }
-
-  .bb-flexDirection-row-bp2 {
-    flex-direction: row;
-  }
-
-  .bb-flexDirection-row-reverse-bp2 {
-    flex-direction: row-reverse;
-  }
-
-  .bb-flexDirection-column-bp2 {
-    flex-direction: column;
-  }
-
-  .bb-flexDirection-column-reverse-bp2 {
-    flex-direction: column-reverse;
-  }
-
-  .bb-flexGrow-0-bp2 {
-    flex-grow: 0;
-  }
-
-  .bb-flexGrow-1-bp2 {
-    flex-grow: 1;
-  }
-
-  .bb-flexShrink-0-bp2 {
-    flex-shrink: 0;
-  }
-
-  .bb-flexWrap-nowrap-bp2 {
-    flex-wrap: nowrap;
-  }
-
-  .bb-flexWrap-wrap-bp2 {
-    flex-wrap: wrap;
-  }
-
-  .bb-flexWrap-wrap-reverse-bp2 {
-    flex-wrap: wrap-reverse;
-  }
-
-  .bb-height-full-bp2 {
-    height: 100%;
-  }
-
-  .bb-justifyContent-flex-start-bp2 {
-    justify-content: flex-start;
-  }
-
-  .bb-justifyContent-flex-end-bp2 {
-    justify-content: flex-end;
-  }
-
-  .bb-justifyContent-center-bp2 {
-    justify-content: center;
-  }
-
-  .bb-justifyContent-space-between-bp2 {
-    justify-content: space-between;
-  }
-
-  .bb-justifyContent-space-around-bp2 {
-    justify-content: space-around;
-  }
-
-  .bb-overflow-auto-bp2 {
-    overflow: auto;
-  }
-
-  .bb-overflow-scroll-bp2 {
-    overflow: scroll;
-  }
-
-  .bb-overflow-hidden-bp2 {
-    overflow: hidden;
-  }
-
-  .bb-overflow-visible-bp2 {
-    overflow: visible;
-  }
-
-  .bb-overflowX-auto-bp2 {
-    overflow-x: auto;
-  }
-
-  .bb-overflowX-scroll-bp2 {
-    overflow-x: scroll;
-  }
-
-  .bb-overflowX-hidden-bp2 {
-    overflow-x: hidden;
-  }
-
-  .bb-overflowX-visible-bp2 {
-    overflow-x: visible;
-  }
-
-  .bb-overflowY-auto-bp2 {
-    overflow-y: auto;
-  }
-
-  .bb-overflowY-scroll-bp2 {
-    overflow-y: scroll;
-  }
-
-  .bb-overflowY-hidden-bp2 {
-    overflow-y: hidden;
-  }
-
-  .bb-overflowY-visible-bp2 {
-    overflow-y: visible;
-  }
-
-  .bb-padding-gutter-bp2 {
-    padding: var(--space-gutter);
-  }
-
-  .bb-padding-xsmall-bp2 {
-    padding: var(--space-xsmall);
-  }
-
-  .bb-padding-small-bp2 {
-    padding: var(--space-small);
-  }
-
-  .bb-padding-medium-bp2 {
-    padding: var(--space-medium);
-  }
-
-  .bb-padding-large-bp2 {
-    padding: var(--space-large);
-  }
-
-  .bb-padding-xlarge-bp2 {
-    padding: var(--space-xlarge);
-  }
-
-  .bb-paddingBottom-gutter-bp2 {
-    padding-bottom: var(--space-gutter);
-  }
-
-  .bb-paddingBottom-xsmall-bp2 {
-    padding-bottom: var(--space-xsmall);
-  }
-
-  .bb-paddingBottom-small-bp2 {
-    padding-bottom: var(--space-small);
-  }
-
-  .bb-paddingBottom-medium-bp2 {
-    padding-bottom: var(--space-medium);
-  }
-
-  .bb-paddingBottom-large-bp2 {
-    padding-bottom: var(--space-large);
-  }
-
-  .bb-paddingBottom-xlarge-bp2 {
-    padding-bottom: var(--space-xlarge);
-  }
-
-  .bb-paddingLeft-gutter-bp2 {
-    padding-left: var(--space-gutter);
-  }
-
-  .bb-paddingLeft-xsmall-bp2 {
-    padding-left: var(--space-xsmall);
-  }
-
-  .bb-paddingLeft-small-bp2 {
-    padding-left: var(--space-small);
-  }
-
-  .bb-paddingLeft-medium-bp2 {
-    padding-left: var(--space-medium);
-  }
-
-  .bb-paddingLeft-large-bp2 {
-    padding-left: var(--space-large);
-  }
-
-  .bb-paddingLeft-xlarge-bp2 {
-    padding-left: var(--space-xlarge);
-  }
-
-  .bb-paddingRight-gutter-bp2 {
-    padding-right: var(--space-gutter);
-  }
-
-  .bb-paddingRight-xsmall-bp2 {
-    padding-right: var(--space-xsmall);
-  }
-
-  .bb-paddingRight-small-bp2 {
-    padding-right: var(--space-small);
-  }
-
-  .bb-paddingRight-medium-bp2 {
-    padding-right: var(--space-medium);
-  }
-
-  .bb-paddingRight-large-bp2 {
-    padding-right: var(--space-large);
-  }
-
-  .bb-paddingRight-xlarge-bp2 {
-    padding-right: var(--space-xlarge);
-  }
-
-  .bb-paddingTop-gutter-bp2 {
-    padding-top: var(--space-gutter);
-  }
-
-  .bb-paddingTop-xsmall-bp2 {
-    padding-top: var(--space-xsmall);
-  }
-
-  .bb-paddingTop-small-bp2 {
-    padding-top: var(--space-small);
-  }
-
-  .bb-paddingTop-medium-bp2 {
-    padding-top: var(--space-medium);
-  }
-
-  .bb-paddingTop-large-bp2 {
-    padding-top: var(--space-large);
-  }
-
-  .bb-paddingTop-xlarge-bp2 {
-    padding-top: var(--space-xlarge);
-  }
-
-  .bb-paddingX-gutter-bp2 {
-    padding-left: var(--space-gutter);
-    padding-right: var(--space-gutter);
-  }
-
-  .bb-paddingX-xsmall-bp2 {
-    padding-left: var(--space-xsmall);
-    padding-right: var(--space-xsmall);
-  }
-
-  .bb-paddingX-small-bp2 {
-    padding-left: var(--space-small);
-    padding-right: var(--space-small);
-  }
-
-  .bb-paddingX-medium-bp2 {
-    padding-left: var(--space-medium);
-    padding-right: var(--space-medium);
-  }
-
-  .bb-paddingX-large-bp2 {
-    padding-left: var(--space-large);
-    padding-right: var(--space-large);
-  }
-
-  .bb-paddingX-xlarge-bp2 {
-    padding-left: var(--space-xlarge);
-    padding-right: var(--space-xlarge);
-  }
-
-  .bb-paddingY-gutter-bp2 {
-    padding-top: var(--space-gutter);
-    padding-bottom: var(--space-gutter);
-  }
-
-  .bb-paddingY-xsmall-bp2 {
-    padding-top: var(--space-xsmall);
-    padding-bottom: var(--space-xsmall);
-  }
-
-  .bb-paddingY-small-bp2 {
-    padding-top: var(--space-small);
-    padding-bottom: var(--space-small);
-  }
-
-  .bb-paddingY-medium-bp2 {
-    padding-top: var(--space-medium);
-    padding-bottom: var(--space-medium);
-  }
-
-  .bb-paddingY-large-bp2 {
-    padding-top: var(--space-large);
-    padding-bottom: var(--space-large);
-  }
-
-  .bb-paddingY-xlarge-bp2 {
-    padding-top: var(--space-xlarge);
-    padding-bottom: var(--space-xlarge);
-  }
-
-  .bb-position-relative-bp2 {
-    position: relative;
-  }
-
-  .bb-position-fixed-bp2 {
-    position: fixed;
-  }
-
-  .bb-position-absolute-bp2 {
-    position: absolute;
-  }
-
-  .bb-position-sticky-bp2 {
-    position: -webkit-sticky;
-    position: sticky;
-  }
-
-  .bb-textAlign-left-bp2 {
-    text-align: left;
-  }
-
-  .bb-textAlign-right-bp2 {
-    text-align: right;
-  }
-
-  .bb-textAlign-center-bp2 {
-    text-align: center;
-  }
-
-  .bb-textAlign-justify-bp2 {
-    text-align: justify;
-  }
-
-  .bb-textTransform-capitalise-bp2 {
-    text-transform: capitalize;
-  }
-
-  .bb-textTransform-none-bp2 {
-    text-transform: none;
-  }
-
-  .bb-textTransform-uppercase-bp2 {
-    text-transform: uppercase;
-  }
-
-  .bb-textTransform-lowercase-bp2 {
-    text-transform: lowercase;
-  }
-
-  .bb-width-full-bp2 {
-    width: 100%;
-  }
-
-  .bb-fontSize-xsmall-bp2 {
-    font-size: var(--font-xsmall);
-  }
-
-  .bb-fontSize-small-bp2 {
-    font-size: var(--font-small);
-  }
-
-  .bb-fontSize-medium-bp2 {
-    font-size: var(--font-medium);
-  }
-
-  .bb-fontSize-large-bp2 {
-    font-size: var(--font-large);
-  }
-
-  .bb-fontSize-xlarge-bp2 {
-    font-size: var(--font-xlarge);
-  }
-
-  .bb-fontWeight-regular-bp2 {
-    font-weight: 400;
-  }
-
-  .bb-fontWeight-bold-bp2 {
-    font-weight: 700;
-  }
-
-  .bb-color-black-bp2 {
-    color: var(--color-black);
-  }
-
-  .bb-color-danger-bp2 {
-    color: var(--color-danger);
-  }
-
-  .bb-color-dark-bp2 {
-    color: var(--color-dark);
-  }
-
-  .bb-color-gray-bp2 {
-    color: var(--color-gray);
-  }
-
-  .bb-color-lightGray-bp2 {
-    color: var(--color-light-gray);
-  }
-
-  .bb-color-info-bp2 {
-    color: var(--color-info);
-  }
-
-  .bb-color-primary-bp2 {
-    color: var(--color-primary);
-  }
-
-  .bb-color-secondary-bp2 {
-    color: var(--color-secondary);
-  }
-
-  .bb-color-success-bp2 {
-    color: var(--color-success);
-  }
-
-  .bb-color-warning-bp2 {
-    color: var(--color-warning);
-  }
-
-  .bb-color-white-bp2 {
-    color: var(--color-white);
-  }
-
-  .bb-color-card-bp2 {
-    color: var(--color-card);
-  }
-
-  .bb-backgroundColor-black-bp2 {
-    background-color: var(--color-black);
-  }
-
-  .bb-backgroundColor-danger-bp2 {
-    background-color: var(--color-danger);
-  }
-
-  .bb-backgroundColor-dark-bp2 {
-    background-color: var(--color-dark);
-  }
-
-  .bb-backgroundColor-gray-bp2 {
-    background-color: var(--color-gray);
-  }
-
-  .bb-backgroundColor-lightGray-bp2 {
-    background-color: var(--color-light-gray);
-  }
-
-  .bb-backgroundColor-info-bp2 {
-    background-color: var(--color-info);
-  }
-
-  .bb-backgroundColor-primary-bp2 {
-    background-color: var(--color-primary);
-  }
-
-  .bb-backgroundColor-secondary-bp2 {
-    background-color: var(--color-secondary);
-  }
-
-  .bb-backgroundColor-success-bp2 {
-    background-color: var(--color-success);
-  }
-
-  .bb-backgroundColor-warning-bp2 {
-    background-color: var(--color-warning);
-  }
-
-  .bb-backgroundColor-white-bp2 {
-    background-color: var(--color-white);
-  }
-
-  .bb-backgroundColor-card-bp2 {
-    background-color: var(--color-card);
-  }
-
-  .bb-gridGap-gutter-bp2 {
-    grid-gap: var(--space-gutter);
-  }
-
-  .bb-gridGap-xsmall-bp2 {
-    grid-gap: var(--space-xsmall);
-  }
-
-  .bb-gridGap-small-bp2 {
-    grid-gap: var(--space-small);
-  }
-
-  .bb-gridGap-medium-bp2 {
-    grid-gap: var(--space-medium);
-  }
-
-  .bb-gridGap-large-bp2 {
-    grid-gap: var(--space-large);
-  }
-
-  .bb-gridGap-xlarge-bp2 {
-    grid-gap: var(--space-xlarge);
-  }
-
-  .bb-negativeMarginTop-gutter-bp2 {
-    margin-top: calc(var(--space-gutter) * -1);
-  }
-
-  .bb-negativeMarginTop-xsmall-bp2 {
-    margin-top: calc(var(--space-xsmall) * -1);
-  }
-
-  .bb-negativeMarginTop-small-bp2 {
-    margin-top: calc(var(--space-small) * -1);
-  }
-
-  .bb-negativeMarginTop-medium-bp2 {
-    margin-top: calc(var(--space-medium) * -1);
-  }
-
-  .bb-negativeMarginTop-large-bp2 {
-    margin-top: calc(var(--space-large) * -1);
-  }
-
-  .bb-negativeMarginTop-xlarge-bp2 {
-    margin-top: calc(var(--space-xlarge) * -1);
-  }
-
-  .bb-negativeMarginLeft-gutter-bp2 {
-    margin-left: calc(var(--space-gutter) * -1);
-  }
-
-  .bb-negativeMarginLeft-xsmall-bp2 {
-    margin-left: calc(var(--space-xsmall) * -1);
-  }
-
-  .bb-negativeMarginLeft-small-bp2 {
-    margin-left: calc(var(--space-small) * -1);
-  }
-
-  .bb-negativeMarginLeft-medium-bp2 {
-    margin-left: calc(var(--space-medium) * -1);
-  }
-
-  .bb-negativeMarginLeft-large-bp2 {
-    margin-left: calc(var(--space-large) * -1);
-  }
-
-  .bb-negativeMarginLeft-xlarge-bp2 {
-    margin-left: calc(var(--space-xlarge) * -1);
-  }
-
-  .bb-fontStyle-normal-bp2 {
-    font-style: normal;
-  }
-
-  .bb-fontStyle-italic-bp2 {
-    font-style: italic;
-  }
-
-}
-.Button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: 100px;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-  border: none;
-  outline: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  min-height: 36px
-}
-.Button:focus {
-    box-shadow: var(--outline);
-  }
-.Button.is-disabled {
-    pointer-events: none;
-  }
-.Button {
-
-  /* TODO Replace this with a solid solution.. */
-  /* .Icon + *,
-  * + .Icon {
-    margin-left: var(--space-xsmall);
-  } */
-}
-
-.Card {
-  width: 100%;
-  border-radius: 4px;
-  margin: 0;
-  outline: 0
-}
-.Card.is-clickable {
-    cursor: pointer;
-  }
-.Card:focus {
-    box-shadow: var(--outline);
-  }
-.Card.shadow-1 {
-    box-shadow: var(--shadow-1)
-  }
-.Card.shadow-1:focus {
-      box-shadow: var(--shadow-1), var(--outline);
-    }
-.Card.shadow-2 {
-    box-shadow: var(--shadow-2)
-  }
-.Card.shadow-2:focus {
-      box-shadow: var(--shadow-2), var(--outline);
-    }
-.Card.shadow-3 {
-    box-shadow: var(--shadow-3)
-  }
-.Card.shadow-3:focus {
-      box-shadow: var(--shadow-3), var(--outline);
-    }
-
-.Icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 0
-}
-.Icon svg,
-  .Icon svg path {
-    fill: currentColor;
-  }
-.Icon.size-xsmall,
-  .Icon.size-xsmall svg {
-    max-width: 16px;
-    max-height: 16px;
-  }
-.Icon.size-small,
-  .Icon.size-small svg {
-    max-width: 20px;
-    max-height: 20px;
-  }
-.Icon.size-medium,
-  .Icon.size-medium svg {
-    max-width: 26px;
-    max-height: 26px;
-  }
-.Icon.size-large,
-  .Icon.size-large svg {
-    max-width: 42px;
-    max-height: 42px;
-  }
-
-.IconButton {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  margin: 0;
-  border: 0;
-  background-color: transparent;
-  border-radius: 50%;
-  cursor: pointer;
-  width: 30px;
-  height: 30px
-}
-.IconButton:focus {
-    box-shadow: var(--outline);
-  }
-.IconButton.is-disabled {
-    color: green;
-  }
-
-/* .Stack > * + * {
-  margin-top: 10px;
-} */
-
-.Stack > :empty {
-  display: none;
-}
-
-.DialogContainer {
-  contain: layout;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.DialogBack {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.2);
-  opacity: 0;
-  -webkit-animation-name: DialogBack-Enter;
-          animation-name: DialogBack-Enter;
-  -webkit-animation-duration: 200ms;
-          animation-duration: 200ms;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both
-}
-
-.DialogBack.is-leave {
-    -webkit-animation-name: DialogBack-Leave;
-            animation-name: DialogBack-Leave;
-  }
-
-@-webkit-keyframes DialogBack-Enter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes DialogBack-Enter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes DialogBack-Leave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes DialogBack-Leave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.Dialog {
-  background-color: #ffff;
-  overflow: hidden;
-  border: 1px solid #f0f3f4;
-  border-radius: 4px;
-  opacity: 0;
-  transform: translateY(20%);
-  min-height: 40px;
-  max-height: 94%;
-  min-width: 94%;
-  max-width: 94%;
-  -webkit-animation-name: Dialog-Enter;
-          animation-name: Dialog-Enter;
-  -webkit-animation-duration: 200ms;
-          animation-duration: 200ms;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both
-}
-
-.Dialog.is-leave {
-    -webkit-animation-name: Dialog-Leave;
-            animation-name: Dialog-Leave;
-  }
-
-@media (max-height: 400px) {
-
-.Dialog {
-    max-height: 96%
-}
-  }
-
-@media (min-width: 340px) {
-
-.Dialog {
-    min-width: 320px
-}
-  }
-
-@media (min-width: 620px) {
-
-.Dialog {
-    max-width: 600px
-}
-  }
-
-@-webkit-keyframes Dialog-Enter {
-  0% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes Dialog-Enter {
-  0% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes Dialog-Leave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-}
-
-@keyframes Dialog-Leave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-}
-
-.Divider {
-  border-width: 0;
-  border-top: 1px solid var(--color-light-gray);
-  margin: 0;
-  margin: var(--gutter-large) 0;
-}
-
-.Drawer {
-  visibility: hidden;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  max-width: 256px;
-  background-color: #fff;
-  opacity: 0;
-  transition-property: visibility, opacity, transform;
-  transition-duration: 300ms
-}
-
-.Drawer.position-left {
-    left: 0;
-    transform: translateX(-100%);
-  }
-
-.Drawer.position-right {
-    right: 0;
-    transform: translateX(100%);
-  }
-
-.Drawer.is-open {
-    visibility: visible;
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-.Drawer-Back {
-  visibility: hidden;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.2);
-  opacity: 0;
-  transition-property: visibility, opacity;
-  transition-duration: 300ms
-}
-
-.Drawer-Back.is-open {
-    visibility: visible;
-    opacity: 1;
-  }
-
-.Dropdown-select {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: 1px solid #ebebeb;
-  background-color: #fff;
-  font-family: inherit;
-  outline: 0;
-  margin: 0;
-  border-radius: 4px
-}
-
-.Dropdown-select.is-invalid {
-    border-color: var(--color-warning);
-  }
-
-.Dropdown-select:focus {
-    box-shadow: var(--outline);
-  }
-
-.Dropdown-icon {
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-}
-
-.FlatButton {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: 4px;
-  cursor: pointer;
-  text-transform: uppercase;
-  background-color: transparent;
-  border: none;
-  line-height: 1;
-  outline: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none
-}
-.FlatButton:focus {
-    box-shadow: var(--outline);
-  }
-.FlatButton.is-disabled {
-    pointer-events: none;
-  }
-
-.Link {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.Loader .Icon {
-  -webkit-animation: BlockleUi-Spin 1s ease-in-out 0s infinite both;
-          animation: BlockleUi-Spin 1s ease-in-out 0s infinite both;
-}
-
-@-webkit-keyframes BlockleUi-Spin {
-  0% {
-    transform: rotateZ(0deg);
-  }
-
-  80% {
-    transform: rotateZ(359deg);
-  }
-
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-@keyframes BlockleUi-Spin {
-  0% {
-    transform: rotateZ(0deg);
-  }
-
-  80% {
-    transform: rotateZ(359deg);
-  }
-
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-.OutlineButton {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: 100px;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid var(--color-primary);
-  outline: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  transition: border-color 160ms, color 160ms
-}
-
-.OutlineButton:focus {
-    box-shadow: var(--outline);
-  }
-
-.OutlineButton.is-disabled {
-    pointer-events: none;
-    border: 1px solid var(--color-light-gray);
-  }
-
-.OutlineButton > * + .Icon,
-.OutlineButton > .Icon + * {
-  margin-left: var(--space-small);
-}
-
-.Panel-Container {
-  contain: layout;
-  z-index: 200;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.Panel-Back {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  -webkit-animation-name: Panel-Back-Enter;
-          animation-name: Panel-Back-Enter;
-  -webkit-animation-duration: 280ms;
-          animation-duration: 280ms;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both
-}
-
-.Panel-Back.is-leave {
-    -webkit-animation-name: Panel-Back-Leave;
-            animation-name: Panel-Back-Leave;
-  }
-
-@-webkit-keyframes Panel-Back-Enter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes Panel-Back-Enter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes Panel-Back-Leave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes Panel-Back-Leave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.Panel {
-  border-radius: 24px 24px 0 0;
-  overflow: hidden;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: #fff;
-  box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.1);
-  padding: var(--gutter-large) var(--gutter-large) var(--gutter-small) var(--gutter-large);
-  -webkit-animation-name: Dialog-Enter;
-          animation-name: Dialog-Enter;
-  -webkit-animation-duration: 280ms;
-          animation-duration: 280ms;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both
-}
-
-.Panel.is-leave {
-    -webkit-animation-name: Panel-Leave;
-            animation-name: Panel-Leave;
-  }
-
-@-webkit-keyframes Panel-Enter {
-  0% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes Panel-Enter {
-  0% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes Panel-Leave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-}
-
-@keyframes Panel-Leave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(20%);
-  }
-}
-
-.Paper {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  opacity: 0;
-  background-color: #fff;
-  transition-property: opacity, transform;
-  will-change: transform, opacity
-}
-
-.Paper.is-fit {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-.Paper.is-transparent {
-    background-color: none;
-  }
-
-.Paper.is-shadow {
-    box-shadow: 0 4px 24px 0 rgba(37, 38, 94, 0.1);
-  }
-
-.Paper.effect-fade {
-    -webkit-animation-name: Paper-FadeEnter;
-            animation-name: Paper-FadeEnter;
-    -webkit-animation-duration: 280ms;
-            animation-duration: 280ms;
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both
-  }
-
-.Paper.effect-fade.is-leave {
-      -webkit-animation-name: Paper-FadeLeave;
-              animation-name: Paper-FadeLeave;
-    }
-
-.Paper.effect-slideUp {
-    -webkit-animation-name: Paper-SlideUpEnter;
-            animation-name: Paper-SlideUpEnter;
-    -webkit-animation-duration: 280ms;
-            animation-duration: 280ms;
-    -webkit-animation-fill-mode: both;
-            animation-fill-mode: both
-  }
-
-.Paper.effect-slideUp.is-leave {
-      -webkit-animation-name: Paper-SlideUpLeave;
-              animation-name: Paper-SlideUpLeave;
-    }
-
-@-webkit-keyframes Paper-FadeEnter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes Paper-FadeEnter {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes Paper-FadeLeave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes Paper-FadeLeave {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes Paper-SlideUpEnter {
-  0% {
-    opacity: 0;
-    transform: scale(0.96) translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes Paper-SlideUpEnter {
-  0% {
-    opacity: 0;
-    transform: scale(0.96) translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes Paper-SlideUpLeave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(0.92) translateY(16%);
-  }
-}
-
-@keyframes Paper-SlideUpLeave {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(0.92) translateY(16%);
-  }
-}
-
-.Text {
-  margin: 0;
-  padding: 0;
-}
-
-.Tag {
-  border-radius: 80px;
-  border: 1px solid var(--color-primary);
-  outline: 0;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none
-}
-.Tag:hover {
-    background-color: rgb(77, 161, 255, 0.1);
-  }
-.Tag:active,
-  .Tag:focus {
-    box-shadow: var(--outline);
-  }
-
-
-  .TextField.is-disabled {
-    opacity: 0.4;
-  }
-
-.TextField-Label {
-  display: block;
-  position: absolute;
-  left: var(--space-small);
-  top: -10px;
-  transition: transform 200ms cubic-bezier(0, 0, 0.4, 1), opacity 200ms cubic-bezier(0, 0, 0.4, 1),
-    color 80ms cubic-bezier(0, 0, 0.4, 1), visibility 200ms;
-  transform: scale(1.1);
-  transform-origin: left;
-  opacity: 0
-}
-
-.TextField-Label.is-visible {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-.TextField-Input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  position: relative;
-  width: 100%;
-  background-color: transparent;
-  border: 1px solid var(--color-gray);
-  outline: 0;
-  font-family: inherit;
-  font-size: var(--font-medium);
-  margin: 0;
-  padding: var(--space-medium);
-  border-radius: 4px;
-  color: var(--color-gray);
-  -webkit-text-fill-color: var(--color-gray);
-  transition: border-color 160ms cubic-bezier(0, 0, 0.4, 1)
-}
-
-.TextField-Input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset;
-  }
-
-.TextField-Input:focus {
-    box-shadow: var(--outline);
-    border: 1px solid var(--color-primary);
-  }
-
-.TextField-Input:focus,
-  .TextField-Input.is-filled {
-    color: var(--color-black);
-    -webkit-text-fill-color: var(--color-black);
-  }
-
-.TextField-Input.is-invalid {
-    border: 1px solid var(--color-warning);
-  }
-
-.TextField-Bottom {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-/* https://stackoverflow.com/questions/29580704/change-input-background-to-transparent-on-autocomplete-form */
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  -webkit-transition: background-color 50000s ease-in-out 0s;
-  transition: background-color 50000s ease-in-out 0s;
-  -webkit-text-fill-color: var(--color-dark) !important;
-}
-
-/*# sourceMappingURL=blocks.css.map */