.m-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  border-radius: 100%;
  opacity: 0 ;
  filter: alpha(opacity=0) ;
  -webkit-animation: m-spinner-scaleout 0.9s infinite ease-in-out;
  -moz-animation: m-spinner-scaleout 0.9s infinite ease-in-out;
  -ms-animation: m-spinner-scaleout 0.9s infinite ease-in-out;
  -o-animation: m-spinner-scaleout 0.9s infinite ease-in-out;
  animation: m-spinner-scaleout 0.9s infinite ease-in-out; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .m-spinner {
      animation: none !important; } }
  .m-spinner.m-spinner--lg {
    width: 2rem;
    height: 2rem; }
  .m-spinner.m-spinner--sm {
    width: 1.2rem;
    height: 1.2rem; }
  .btn .m-spinner {
    position: relative;
    line-height: 0; }

@-webkit-keyframes m-spinner-scaleout {
  0% {
    opacity: 0.3 ;
    filter: alpha(opacity=30) ;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1 ;
    filter: alpha(opacity=100) ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

@-moz-keyframes m-spinner-scaleout {
  0% {
    opacity: 0.3 ;
    filter: alpha(opacity=30) ;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1 ;
    filter: alpha(opacity=100) ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

@-o-keyframes m-spinner-scaleout {
  0% {
    opacity: 0.3 ;
    filter: alpha(opacity=30) ;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1 ;
    filter: alpha(opacity=100) ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

@keyframes m-spinner-scaleout {
  0% {
    opacity: 0.3 ;
    filter: alpha(opacity=30) ;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1 ;
    filter: alpha(opacity=100) ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

.m-spinner {
  background-color: #e2e5ec; }

.m-spinner.m-spinner--skin-dark {
  background-color: #a9acb8; }

.m-spinner.m-spinner--brand {
  background-color: #716aca; }

.m-spinner.m-spinner--metal {
  background-color: #c4c5d6; }

.m-spinner.m-spinner--light {
  background-color: #ffffff; }

.m-spinner.m-spinner--accent {
  background-color: #00c5dc; }

.m-spinner.m-spinner--focus {
  background-color: #9816f4; }

.m-spinner.m-spinner--primary {
  background-color: #5867dd; }

.m-spinner.m-spinner--success {
  background-color: #34bfa3; }

.m-spinner.m-spinner--info {
  background-color: #36a3f7; }

.m-spinner.m-spinner--warning {
  background-color: #ffb822; }

.m-spinner.m-spinner--danger {
  background-color: #f4516c; }

.m-loader {
  position: relative; }
  .m-loader:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 2px solid #07d;
    border-right: 2px solid transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: m-loader-rotate 0.6s linear infinite;
    -moz-animation: m-loader-rotate 0.6s linear infinite;
    -ms-animation: m-loader-rotate 0.6s linear infinite;
    -o-animation: m-loader-rotate 0.6s linear infinite;
    animation: m-loader-rotate 0.6s linear infinite; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .m-loader:before {
        animation: none !important; } }
  .m-loader:before {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
    margin-left: -0.7rem;
    border-top-width: 2px;
    border-right-width: 2px; }
  .m-loader.m-loader--lg:before {
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    margin-left: -1rem;
    border-top-width: 3px;
    border-right-width: 3px; }
  .m-loader.m-loader--sm:before {
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    border-top-width: 1px;
    border-right-width: 1px; }
  .m-loader.m-loader--right:before {
    left: auto;
    right: 0.7rem; }
  .m-loader.m-loader--right.m-loader--lg:before {
    right: 1rem; }
  .m-loader.m-loader--right.m-loader--sm:before {
    right: 0.5rem; }
  .m-loader.m-loader--right.btn {
    padding-right: 3.1rem; }
    .m-loader.m-loader--right.btn.m-loader--lg {
      padding-right: 4.5rem; }
    .m-loader.m-loader--right.btn.m-loader--sm {
      padding-right: 2.25rem; }
  .m-loader.m-loader--left:before {
    left: 1.4rem; }
  .m-loader.m-loader--left.m-loader--lg:before {
    left: 2rem; }
  .m-loader.m-loader--left.m-loader--sm:before {
    left: 1rem; }
  .m-loader.m-loader--left.btn {
    padding-left: 3.1rem; }
    .m-loader.m-loader--left.btn.m-loader--lg {
      padding-left: 4.5rem; }
    .m-loader.m-loader--left.btn.m-loader--sm {
      padding-left: 2.25rem; }

@-webkit-keyframes m-loader-rotate {
  to {
    transform: rotate(360deg); } }

@-moz-keyframes m-loader-rotate {
  to {
    transform: rotate(360deg); } }

@-o-keyframes m-loader-rotate {
  to {
    transform: rotate(360deg); } }

@keyframes m-loader-rotate {
  to {
    transform: rotate(360deg); } }

.m-loader:before {
  border-top-color: #dfe2ea; }

.m-loader.m-loader--skin-dark:before {
  border-top-color: #acafba; }

.m-loader.m-loader--brand:before {
  border-top-color: #716aca; }

.m-loader.m-loader--metal:before {
  border-top-color: #c4c5d6; }

.m-loader.m-loader--light:before {
  border-top-color: #ffffff; }

.m-loader.m-loader--accent:before {
  border-top-color: #00c5dc; }

.m-loader.m-loader--focus:before {
  border-top-color: #9816f4; }

.m-loader.m-loader--primary:before {
  border-top-color: #5867dd; }

.m-loader.m-loader--success:before {
  border-top-color: #34bfa3; }

.m-loader.m-loader--info:before {
  border-top-color: #36a3f7; }

.m-loader.m-loader--warning:before {
  border-top-color: #ffb822; }

.m-loader.m-loader--danger:before {
  border-top-color: #f4516c; }