@import "@material/button/mdc-button";
@import "inputs";
@import "style";

.spanned-btn {
   width: 100%;
   background: $primary !important; //   text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}

* {
   box-sizing: border-box;
}

body {
   font-family: Helvetica;
   background: #eee;
   -webkit-font-smoothing: antialiased;
}

header {
   text-align: center;
   margin-top: 4em;
}

h1,
h3 {
   font-weight: 300;
}

h1 {
   color: #636363;
}

h3 {
   color: $primary;
}

form {
   max-width: 380px;
   margin: 4em auto;
   padding: 3em 2em 2em 2em;
   background: #fafafa;
   border: 1px solid #ebebeb;
   box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px,
      rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
   position: relative;
}

.loader_box {
   width: 64px;
   height: 64px;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

.loader {
   display: inline-block;
   position: relative;
   z-index: 100;
}
.loader:after {
   content: " ";
   display: block;
   width: 46px;
   height: 46px;
   margin: 1px;
   border-radius: 50%;
   border: 5px solid #000000;
   border-color: #000000 transparent #000000 transparent;
   animation: loader 1.2s linear infinite;
}
@keyframes loader {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

footer {
   text-align: center;
}

footer p {
   color: #888;
   font-size: 13px;
   letter-spacing: 0.4px;
}

footer a {
   color: $primary;
   text-decoration: none;
   transition: all 0.2s ease;
}

footer a:hover {
   color: #666;
   text-decoration: underline;
}

footer img {
   width: 80px;
   transition: all 0.2s ease;
}

footer img:hover {
   opacity: 0.83;
}

footer img:focus,
footer a:focus {
   outline: none;
}

.invisible {
   display: none;
}

.errorColor {
   background: $error !important;
}

.error {
   color: $error;
   margin-top: 5px;
   font-size: 13px;
}