@charset "utf-8";

$primary: 'indigo';

@import "base/variables";
@import "base/colors";
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@import "base/base";

@import "libs/animate";

@import 'components/button';
@import 'components/footer';
@import 'components/form';
@import 'components/grid';
@import 'components/modal';
@import 'components/nav';
@import 'components/panel';
@import 'components/typography';

.welcome {
	text-align: center;
	padding: 50px 0 15px 0;
	color: mc('grey', '700');

	h2 {
		margin: 0;
	}

}

i.icon-loader {
  display: inline-block;
  color: mc('indigo', '500')
}
i.icon-check {
  color: mc('green', '500')
}
i.icon-square-cross {
  color: mc('red', '500')
}
i.icon-warning-outline {
  color: mc('orange', '500')
}

.tst-welcome-leave-active, .tst-welcome-enter-active {
  transition: all .5s;
  overflow-y: hidden;
}
.tst-welcome-leave, .tst-welcome-enter-to {
  opacity: 1;
  max-height: 200px;
}
.tst-welcome-leave-to, .tst-welcome-enter {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
}

.progress-bar {
  width: 150px;
  height: 10px;
  background-color: mc('indigo', '50');
  border:1px solid mc('indigo', '100');
  border-radius: 3px;
  position: absolute;
  left: 15px;
  top: 21px;
  padding: 1px;

  > div {
    width: 5px;
    height: 6px;
    background-color: mc('indigo', '200');
    border-radius: 2px;
    transition: all 1s ease;
  }

}