@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i");
@import url("https://fonts.googleapis.com/css?family=PT+Mono:300,300i,400,400i,500,500i");

.debug * {
  outline: 1px solid #3a87ad !important;
}

body {
  position: relative;
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: #fff;

  font-family: "Rubik", "Helvetica Neue", sans-serif;
}

textarea,
pre {
  font-family: "PT Mono", monospace;
}

[disabled] {
  opacity: 0.5;
  cursor: default;
}

.hero-btn {
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  height: 5rem;
  margin: 2rem;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.16);
  color: #2141ab;
  font-weight: 500;
  font-size: 1.7rem;
  font-size: 1.6rem;
  line-height: 5.2rem;
  text-decoration: none !important;
}

.btn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  min-width: 6.25rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
  margin-right: 1rem;
  box-sizing: content-box;
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.1);
  color: #444;
  font-weight: 500;
  font-size: 1rem;
  line-height: 2.5rem;
  text-align: center;
  text-decoration: none !important;
  transition: all 150ms ease-out;
}

.btn:hover {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0px 5px 5px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-0.2rem);
  background: #fdfdfd;
}

.btn:active {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(0rem);
  background: #f5f5f5;
}

.btn.--positive {
  color: white !important;
  background: #40b8a8;
}

.btn.--flush {
  margin: 0;
}

.btn.--negative {
  color: white !important;
  background: #f13b4d;
}

.btn.--primary {
  color: white !important;
  background: #3b65ef;
}

.btn.--mystery {
  color: white !important;
  background: #b974ff;
}

.btn.--meh {
  color: #444 !important;
  background: #f9f9f9;
}

.btn.--disabled {
  opacity: 0.5;
  transform: none !important;
  cursor: initial !important;
  box-shadow: 0rem 0rem 0.1rem 0 rgba(0, 0, 0, 0.1),
    0rem 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.1) !important;
}

.btn.--login {
  display: inline-block;
  min-width: 13rem;
  margin-bottom: 1rem;
  text-align: left;
}

.btn.--block {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 1rem;
}

.btn img {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  top: -1px;
  margin-right: 0.4rem;
}

#login-guest img {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  margin-top: -8px;
  left: 4px;
  top: 4px;
}

@keyframes inFromFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.in-from-fade-1 {
  /* opacity: 0;
    animation: inFromFade ease-out 500ms;
    animation-fill-mode: forwards; */
}

.in-from-fade-2 {
  opacity: 0;
  animation: inFromFade ease-out 500ms;
  animation-delay: 100ms;
  animation-fill-mode: forwards;
}

.in-from-fade-3 {
  opacity: 0;
  animation: inFromFade ease-out 500ms;
  animation-delay: 200ms;
  animation-fill-mode: forwards;
}

.in-from-fade-4 {
  opacity: 0;
  animation: inFromFade ease-out 500ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
}

@keyframes inFromLeft {
  from {
    transform: translateX(-3rem);
    opacity: 0;
  }

  to {
    transform: translateX(0rem);
    opacity: 1;
  }
}

.in-from-left {
  opacity: 0;
  animation: inFromLeft ease-out 500ms;
  animation-delay: 150ms;
  animation-fill-mode: forwards;
}

@keyframes inFromRight {
  from {
    transform: translateX(3rem);
    opacity: 0;
  }

  to {
    transform: translateX(0rem);
    opacity: 1;
  }
}

.in-from-right {
  opacity: 0;
  animation: inFromRight ease-out 500ms;
  animation-delay: 150ms;
  animation-fill-mode: forwards;
}

.bg-b-gray {
  background-color: #eff3f6;
}

.bg-c1 {
  background-color: #3b65ef;
}

.text-c1 {
  color: #3b65ef;
}

.border-c1 {
  border-color: #3b65ef;
}

.bg-c2 {
  background-color: #1156df;
}

.text-c2 {
  color: #1156df;
}

.border-c2 {
  border-color: #1156df;
}

.bg-c3 {
  background-color: #2141ab;
}

.text-c3 {
  color: rgb(33, 65, 171);
}

.border-c3 {
  border-color: rgb(33, 65, 171);
}

.hover\:bg-wo:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hover\:text-wo:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hover\:border-wo:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.active\:bg-wo:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.active\:text-wo:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.active\:border-wo:active {
  border-color: rgba(255, 255, 255, 0.05);
}

.bg-primary {
  background-color: #3b65ef;
}

.bg-primary-dark {
  background-color: #0e2f9b;
}

.bg-positive {
  background-color: #40b8a8;
}

.bg-negative {
  background-color: #f13b4d;
}

.bg-observe {
  background-color: #ff9f43;
}

.bg-mystery {
  background-color: #b974ff;
}

.text-primary {
  color: #3b65ef;
}

.text-positive {
  color: #40b8a8;
}

.text-negative {
  color: #f13b4d;
}

.text-observe {
  color: #ff9f43;
}

.text-mystery {
  color: #b974ff;
}

.text-primary {
  border-color: #3b65ef;
}

.text-positive {
  border-color: #40b8a8;
}

.text-negative {
  border-color: #f13b4d;
}

.text-observe {
  border-color: #ff9f43;
}

.text-mystery {
  border-color: #b974ff;
}

.seb {
  display: inline-block;
  background-image: url("../svg/sebsprite.svg");
  background-size: 500% 100%;
  width: 16rem;
  height: 16rem;
}

.seb.--edit {
  background-position: 297% 0%;
}

.seb.--inspect {
  background-position: -1.1% 0%;
}

.seb.--public {
  background-position: 397.8% 0%;
}

.seb.--private {
  background-position: 198.2% 0%;
}

.seb.--teach {
  background-position: 100% 0%;
}

.seb-alt {
  display: inline-block;
  background-image: url("../svg/sebspritealt.svg");
  background-size: 400% 100%;
  width: 16rem;
  height: 16rem;
}

.seb-alt.--dead {
  background-position: 0% 0%;
}

.seb-alt.--confused {
  background-position: 100% 0%;
}

.seb-alt.--security {
  background-position: 200% 0%;
}

.seb-alt.--snooze {
  background-position: 300% 0%;
}

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.hr-label {
  font-weight: 500;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  display: block;
  padding: 1rem;
}

@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.img-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.img-md {
  width: 2rem;
  height: 2rem;
}

.loader-sm {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(75 85 99 / 50%);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-lg {
  width: 48px;
  height: 48px;
  border: 4px solid rgb(75 85 99 / 50%);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}