:root {
  --normal-background: #404040;
  --dark-background: #262626;
  --transition-time: 250ms;
  font-family: 'Avenir', 'helvetica', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.cst-left > .liquid-child {
  overflow: inherit;
}

.cardstack-authentication {
  position: relative;
  height: 100%;
  min-width: 68px;
  background-color: var(--normal-background);
  transition: min-width var(--transition-time);
}
.cardstack-authentication.open {
  min-width: 300px;
}

.cardstack-rail-item {
  position: relative;
  float: left;
  clear: left;
  min-width: 68px;
  min-height: 68px;
  cursor: pointer;
}

.cardstack-rail-item.active,
.cardstack-rail-item:hover {
  opacity: 1;
  pointer-events: auto;
  background-color: var(--dark-background);
}

.cardstack-rail-item.cardstack-non-interactive,
.cardstack-rail-item.cardstack-non-interactive:hover {
  cursor: default;
  background-color: transparent;
}

.cardstack-network-icon {
  height: 40px;
  width: 40px;
  margin: 14px auto 0;
  border-radius: 4px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}