@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
@import url(https://rsms.me/inter/inter.css);
/*
* Arwin
*
* Theme Template
* @version 0.1
*
*/
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-up-in {
  0% {
    opacity: 0;
    transform: translateY(30px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fade-scalex-in {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left; }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left; } }

@keyframes fade-down-in {
  0% {
    opacity: 0;
    transform: scaleY(0); }
  100% {
    opacity: 1;
    transform: scaleY(1); } }

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0); }
  80% {
    opacity: 1;
    transform: scale(1.4); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes scale-fade-in {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes pulse {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }

@keyframes spin {
  0% {
    transform: rotate(135deg); }
  50% {
    transform: rotate(225deg); }
  100% {
    transform: rotate(135deg); } }

@keyframes sonarWave {
  from {
    opacity: 0.4;
    transform: scale(0.4); }
  to {
    transform: scale(1);
    opacity: 0; } }

@keyframes sonarWave-high-opacity {
  from {
    opacity: 1;
    transform: scale(0.4); }
  to {
    transform: scale(1);
    opacity: 0; } }

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1; }
  20% {
    transform: scale(20, 20);
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(50, 50); } }

@keyframes ripple-small {
  0% {
    transform: scale(0, 0);
    opacity: 1; }
  20% {
    transform: scale(10, 10);
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(30, 30); } }

/*
$background-main: $N10;

$text-subtle: $N30;
$text-extra-subtle: $N60;
$text-subtle-background-light: $N100;

$font-color-main: $N500;
$font-color-secondary: $N600;
$font-color-secondary-alt: $N30;
$font-color-subtle: $N100;
$font-color-subtler: $N200;
$font-color-bright: $N10;
$font-color-subtle-blue: $N50;
*/
.loadingPulse {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #06C4F8;
  cursor: pointer;
  animation: pulse 2s infinite;
  margin: auto; }

@keyframes pulse {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }

.loadingSpinner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: #04a9d6;
  height: 100%;
  width: 100%; }
  .loadingSpinner.none {
    margin: 0; }
  .loadingSpinner.extra-small svg {
    font-size: 11px; }
  .loadingSpinner.small svg {
    font-size: 18px; }
  .loadingSpinner.medium svg {
    font-size: 28px; }
  .loadingSpinner.large svg {
    font-size: 32px; }
  .loadingSpinner.subtle {
    color: #73839f; }
  .loadingSpinner.warning {
    color: #ee2846; }
  .loadingSpinner.inverse {
    color: #ffffff; }
    .loadingSpinner.inverse.subtle {
      color: #919db3; }
  .loadingSpinner svg {
    animation: rotate 400ms 2 linear, rotate 800ms infinite 800ms ease-out; }

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

body {
  margin: 0; }