/* ----------------------------------------------------
GENERAL & GLOBAL
---------------------------------------------------- */
:root {
  --purewhite: #ffffff;
  --white: #ffffff;
  --pureblack: #1e1f1f;
  --black: #272929;
  --grey8: #444646;
  --grey7: #6e7271;
  --grey6: #858a89;
  --grey5: #9a9f9f;
  --grey4: #aaafaf;
  --grey3: #dadddd;
  --grey2: #eff0f0;
  --grey1: #f6f6f6;
  --primary: #3196f1;
  --primary25: #3196f125;
  --primary75: #3196f175;
  --primary-highlight: #61b4ff;
  --card: #3196f1;
  --card35: #3196f135;
  --card75: #3196f175;
  --query: #06c0ac;
  --style: #af4bc3;
  --style-highlight: #d68fe4;
  --decision: #88ba44;
  --data: #dca90d;
  --data35: #dca90d35;
  --data75: #dca90d75;
  --function: #e4834d;
  --function35: #e4834d35;
  --function75: #e4834d75;
  --agent: #e05c5c;
  --action: #e05c99;
  --action35: #e05c9935;
  --action75: #e05c9975;
  --component: #565ef5;
  --plugin: #42ad5b;
  --screen: var(--grey8);
  --success: #79ca1e;
  --error: #e95472;
  --error35: #e9547235;
  --error75: #e9547275;
  --shade: rgba(25, 27, 27, 0.98);
  --shade-medium: rgba(25, 27, 27, 0.78);
  --shade-light: rgba(25, 27, 27, 0.58);
  --shade-xlight: rgba(25, 27, 27, 0.38);
  --shade-xxlight: rgba(25, 27, 27, 0.18);
  --shade-xxxlight: rgba(25, 27, 27, 0.08);
  --shade-primary: rgba(49, 150, 241, 0.28);
  --highlight: rgba(254, 254, 253, 0.98);
  --highlight-high: rgba(255, 255, 254, 0.88);
  --highlight-medium: rgba(254, 254, 253, 0.78);
  --highlight-light: rgba(254, 254, 253, 0.58);
  --highlight-xlight: rgba(254, 254, 253, 0.38);
  --highlight-xxlight: rgba(254, 254, 253, 0.18);
  --highlight-xxxlight: rgba(254, 254, 253, 0.08);
  --transparent: transparent;
  --xxxs: 2px;
  --xxs: 3px;
  --xs: 6px;
  --font-min: 10px;
  --font-xs: 11px;
  --s: 12px;
  --sm: 14px;
  --m: 16px;
  --ml: 20px;
  --l: 24px;
  --xl: 32px;
  --xxl: 48px;
  --xxxl: 64px;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body {
  font-family: "Inter", Inter, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: var(--sm);
  color: var(--grey8);
  background: var(--white);
}

div {
  position: relative;
}

a {
  text-decoration: none;
  color: var(--primary);
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  margin-top: var(--xxxs);
}
h1 {
  font-size: var(--l);
  margin-bottom: var(--sm);
}
h2 {
  font-size: var(--ml);
  margin-bottom: var(--s);
}
h3 {
  font-size: var(--m);
  margin-bottom: var(--xs);
}
h4 {
  font-size: var(--sm);
  margin-bottom: var(--xxs);
}

input,
textarea {
  outline: none;
  line-height: 16px;
  padding: var(--xs) var(--s);
  border: 1px solid var(--grey2);
  transition: 0.25s all ease-in-out;
}
input:focus,
textarea:focus {
  border-color: var(--primary) !important;
  background: var(--white) !important;
  box-shadow: 0 1px 6px 0 var(--shade-primary);
}
input.ghost {
  border-color: transparent !important;
  background: transparent !important;
}
input.ghost:focus {
  border-color: var(--primary) !important;
  background: var(--white) !important;
}
input[readonly],
input[readonly="true"] {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
td input.checkbox-input {
  margin: 6px;
}

.error input,
.has-error input,
input.error,
input.has-error {
  border-color: var(--error) !important;
}

label {
  cursor: inherit;
}

code {
  margin-bottom: 2px;
}

hr {
  flex-shrink: 0;
  border: none;
  outline: none;
  margin: var(--s) 0;
  height: 1px;
  background: var(--shade-xxxlight);
  width: 100%;
}
vr {
  display: block;
  position: relative;
  flex-shrink: 0;
  border: none;
  outline: none;
  margin: 0 var(--xs);
  width: 1px;
  background: var(--shade-xxxlight);
  height: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  margin-block-start: 1em;
  margin-block-end: 1em;
}
ul {
  list-style: none;
}
ul.bullets {
  list-style: disc;
  margin-left: var(--sm);
}
ul.bullets > li {
  padding-left: var(--xxs);
}
ol {
  margin-left: var(--m);
  padding: 0;
}
ol > li {
  padding-left: var(--xxs);
}

::-webkit-input-placeholder {
  color: var(--grey4);
}
::-moz-placeholder {
  color: var(--grey4);
}
:-ms-input-placeholder {
  color: var(--grey4);
}
:-moz-placeholder {
  color: var(--grey4);
}

/* ----------------------------------------------------
USEFUL OVERRIDES - LAYOUT, TYPE, SIZING
---------------------------------------------------- */

.center-justify {
  text-align: center !important;
}
.left-justify {
  text-align: left !important;
}
.right-justify {
  text-align: right !important;
}

.relative {
  position: relative !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}

.block {
  display: block !important;
}
.inlineblock {
  display: inline-block !important;
}

.pushdown-0 {
  margin-bottom: 0 !important;
}
.pushdown-xxsmall {
  margin-bottom: var(--xxxs) !important;
}
.pushdown-xsmall {
  margin-bottom: var(--xs) !important;
}
.pushdown-small {
  margin-bottom: var(--s) !important;
}
.pushdown-medium {
  margin-bottom: var(--l) !important;
}
.pushdown-large {
  margin-bottom: var(--xxl) !important;
}

.pushup-0 {
  margin-top: 0 !important;
}
.pushup-xsmall {
  margin-top: var(--xs) !important;
}
.pushup-small {
  margin-top: var(--s) !important;
}
.pushup-medium {
  margin-top: var(--l) !important;
}
.pushup-large {
  margin-top: var(--xxl) !important;
}

.pushright-0 {
  margin-right: 0 !important;
}
.pushright-xsmall {
  margin-right: var(--xs) !important;
}
.pushright-small {
  margin-right: var(--s) !important;
}
.pushright-medium {
  margin-right: var(--l) !important;
}
.pushright-large {
  margin-right: var(--xxl) !important;
}

.pushleft-0 {
  margin-left: 0 !important;
}
.pushleft-xsmall {
  margin-left: var(--xs) !important;
}
.pushleft-small {
  margin-left: var(--s) !important;
}
.pushleft-medium {
  margin-left: var(--l) !important;
}
.pushleft-large {
  margin-left: var(--xxl) !important;
}

.push-0 {
  margin: 0 !important;
}
.push-xsmall {
  margin: var(--xs) !important;
}
.push-small {
  margin: var(--s) !important;
}
.push-medium {
  margin: var(--m) !important;
}
.push-large {
  margin: var(--l) !important;
}

.padded-0 {
  padding: 0 !important;
}
.padded-xsmall {
  padding: var(--xs) !important;
}
.padded-small {
  padding: var(--s) !important;
}
.padded-medium {
  padding: var(--m) !important;
}
.padded-large {
  padding: var(--l) !important;
}
.padded-xlarge {
  padding: var(--xl) !important;
}

.w100 {
  width: 100% !important;
}
.w50 {
  width: 50% !important;
}
.w340 {
  width: 340px !important;
}
.w480 {
  width: 480px !important;
}
.w580 {
  width: 580px !important;
}
.w640 {
  width: 640px !important;
}
.w1020 {
  width: 1020px !important;
}
.w1280 {
  width: 1280px !important;
}

.h100 {
  height: 100% !important;
}
.h360 {
  height: 320px !important;
}

.overflow {
  overflow: auto !important;
}

.no-select {
  user-select: none !important;
}
.clickable {
  cursor: pointer !important;
}

.hide,
.is-hidden {
  display: none !important;
}
.invisible,
.is-invisible {
  visibility: hidden !important;
}
.is-fade-out {
  visibility: hidden !important;
  animation: fadeout 0.25s forwards !important;
  display: none !important;
}
.is-fade-in-row {
  visibility: visible !important;
  animation: fadein 0.25s forwards !important;
  display: table-row !important;
}
.is-fade-in-col {
  visibility: visible !important;
  animation: fadein 0.25s forwards !important;
  display: table-cell !important;
}
.is-fade-in-flex {
  visibility: visible !important;
  animation: fadein 0.25s forwards !important;
  display: flex !important;
}

.mdi {
  display: block;
  font-size: inherit;
  line-height: inherit;
}
.mdi.medium {
  font-size: 21px !important;
}
.mdi.small {
  font-size: var(--ml) !important;
}
.mdi.xsmall {
  font-size: var(--m) !important;
}

.font-white {
  color: var(--white) !important;
}
.font-xlight {
  color: var(--grey3) !important;
}
.font-light {
  color: var(--grey4) !important;
}
.font-medium {
  color: var(--grey6) !important;
}
.font-dark {
  color: var(--grey8) !important;
}
.font-black {
  color: var(--black) !important;
}
.font-primary {
  color: var(--primary) !important;
}
.font-data {
  color: var(--data) !important;
}
.font-query {
  color: var(--query) !important;
}
.font-decision {
  color: var(--decision) !important;
}
.font-action {
  color: var(--action) !important;
}
.font-agent {
  color: var(--agent) !important;
}
.font-function {
  color: var(--function) !important;
}
.font-component {
  color: var(--component) !important;
}
.font-screen {
  color: var(--screen) !important;
}
.font-style {
  color: var(--style) !important;
}
.font-success {
  color: var(--success) !important;
}
.font-error {
  color: var(--error) !important;
}

.font-xs {
  font-size: var(--s) !important;
}
.font-s {
  font-size: var(--sm) !important;
}
.font-m {
  font-size: var(--m) !important;
}
.font-l {
  font-size: var(--ml) !important;
}
.font-xl {
  font-size: var(--l) !important;
}

.uppercase {
  text-transform: uppercase !important;
}
.bold {
  font-weight: 500 !important;
}
.italic {
  font-style: italic !important;
}

.truncate,
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-primary {
  background: var(--primary) !important;
}
.bg-query {
  background: var(--query) !important;
}
.bg-style {
  background: var(--style) !important;
}
.bg-decision {
  background: var(--decision) !important;
}
.bg-data {
  background: var(--data) !important;
}
.bg-function {
  background: var(--function) !important;
}
.bg-agent {
  background: var(--agent) !important;
}
.bg-action {
  background: var(--action) !important;
}
.bg-component {
  background: var(--component) !important;
}
.bg-screen {
  background: var(--black) !important;
}
.bg-success {
  background: var(--success) !important;
}
.bg-error {
  background: var(--error) !important;
}
.bg-shade {
  background: var(--shade) !important;
}
.bg-trans {
  background: var(--transparent) !important;
}
.bg-white {
  background: var(--white) !important;
}
.bg-grey1 {
  background: var(--grey1) !important;
}
.bg-grey2 {
  background: var(--grey2) !important;
}
.bg-grey3 {
  background: var(--grey3) !important;
}

.bgg-0 {
  background-image: linear-gradient(to bottom, var(--style) 0%, var(--component) 100%) !important;
}
.bgg-1 {
  background-image: linear-gradient(to bottom, var(--component) 0%, var(--primary) 100%) !important;
}
.bgg-2 {
  background-image: linear-gradient(to bottom, var(--primary) 0%, var(--query) 100%) !important;
}
.bgg-3 {
  background-image: linear-gradient(to bottom, var(--query) 0%, var(--decision) 100%) !important;
}
.bgg-4 {
  background-image: linear-gradient(to bottom, var(--decision) 0%, var(--data) 100%) !important;
}
.bgg-5 {
  background-image: linear-gradient(to bottom, var(--data) 0%, var(--function) 100%) !important;
}
.bgg-6 {
  background-image: linear-gradient(to bottom, var(--function) 0%, var(--agent) 100%) !important;
}
.bgg-7 {
  background-image: linear-gradient(to bottom, var(--agent) 0%, var(--action) 100%) !important;
}
.bgg-8 {
  background-image: linear-gradient(to bottom, var(--action) 0%, var(--style) 100%) !important;
}

.float-left {
  float: left;
}
.float-right {
  float: right;
}

.muted {
  opacity: 0.5 !important;
}

/* ----------------------------------------------------
FLEX
---------------------------------------------------- */

.flex-H {
  display: flex;
  flex-direction: row !important;
}
.flex-V {
  display: flex;
  flex-direction: column !important;
}

.flex-aligned {
  align-items: center !important;
}
.flex-stretched {
  align-items: stretch !important;
}
.flex-aligned-start {
  align-items: flex-start !important;
}
.flex-aligned-end {
  align-items: flex-end !important;
}

.flex-center {
  justify-content: center !important;
}
.flex-start {
  justify-content: flex-start !important;
}
.flex-right {
  justify-content: flex-end !important;
}
.flex-split {
  justify-content: space-between !important;
}

.flex-grow {
  flex-grow: 1 !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
.flex-dont-grow {
  flex-grow: 0 !important;
}
.flex-dont-shrink {
  flex-shrink: 0 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-me-stretch {
  align-self: stretch !important;
}
.flex-me-pull-left {
  align-self: flex-start !important;
}
.flex-me-pull-right {
  align-self: flex-end !important;
}
.flex-me-center {
  align-self: center !important;
}

.flex-push-right {
  margin-right: auto !important;
}
.flex-push-left {
  margin-left: auto !important;
}

/* ----------------------------------------------------
EDITABLE WIDGET
---------------------------------------------------- */

.editable * {
  transition: all 0.3s ease-in-out;
}
.editable {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  margin-bottom: var(--xxl);
  margin-right: var(--m);
  background: var(--grey2);
  color: var(--grey6);
  line-height: 20px;
}

#email {
  width: 300px;
  height: 44px;
}

.editable > span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 20px;
  padding: var(--s);
  border: 1px solid transparent;
  outline: none;
}
.editable .hint {
  color: var(--grey5) !important;
  opacity: 0.5;
  pointer-events: none;
}
.editable.focussed .hint {
  opacity: 0.5;
  font-size: 10px;
  line-height: 14px;
  padding-top: var(--xxs);
}

.editable .value {
  color: var(--grey7) !important;
}
.editable .value:focus {
  border: 1px solid var(--primary);
}
.editable .value.valid {
  border: 1px solid var(--query);
}
.editable .value.invalid {
  border: 1px solid var(--error);
}
.editable.focussed .value {
  padding-top: var(--m);
}

.editable .message {
  height: 28px;
  margin-top: 45px;
  padding: var(--xs) var(--s);
  color: var(--grey6);
  line-height: 14px;
}

/* ----------------------------------------------------
FANCY SPINNING SCREENS
---------------------------------------------------- */

.scene {
  width: 420px;
  height: 1px;
  margin: 220px;
  perspective: 480px;
  box-shadow: 0 420px 80px 2px rgba(0, 0, 0, 0.5);
}

.cube {
  width: 420px;
  height: 240px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-160px);
}

.cube.is-spinning {
  animation: spinCube 24s infinite linear;
}

@keyframes spinCube {
  0% {
    transform: translateZ(-160px) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: translateZ(-160px) rotateX(360deg) rotateY(360deg);
  }
}

.cube__face {
  position: absolute;
  width: 420px;
  height: 240px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: border-box;
}

.cube__face--front {
  background-image: url(../images/graph.png);
  background-color: var(--card35);
}
.cube__face--back {
  background-image: url(../images/card.png);
  background-color: var(--data35);
}
.cube__face--top {
  background-image: url(../images/query.png);
  background-color: var(--function35);
}
.cube__face--bottom {
  background-image: url(../images/dashboard.png);
  background-color: var(--action35);
}

.cube__face--front {
  transform: rotateY(0deg) translateZ(160px);
}
.cube__face--right {
  transform: rotateY(90deg) translateZ(160px);
}
.cube__face--back {
  transform: rotateY(180deg) translateZ(160px);
}
.cube__face--left {
  transform: rotateY(-90deg) translateZ(160px);
}
.cube__face--top {
  transform: rotateX(90deg) translateZ(160px);
}
.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(160px);
}

.cube.is-backface-hidden .cube__face {
  backface-visibility: hidden;
}