html,
body {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #5d7dbd;
  margin: 0;
  padding: 0;
}

* {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', sans-serif;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container {
  margin: 0px;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
}

@media (max-width: 600px) {
  .md-card {
    padding: 24px 16px;
  }
}

.md-card {
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  position: relative;
  padding: 45px 24px;
  border-radius: 2px;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.logo {
  margin-bottom: 15px;
  display: block;
  text-align: center;
}

.logo img {
  height: 60px;
}

input {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  color: #404040;
  font-size: .875rem;
  line-height: 1.7;
  outline: 0;
  margin: 0 0 12px;
  padding: 8px 10px;
  width: calc(100% - 25px);
}

#login-form .btn-block {
  display: block;
  width: 100%;
  max-width: 100%;
  background-color: #3f82ef;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  margin-bottom: 15px;
}

#login-form .btn-block span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#login-form .forgot-password {
  display: block;
  color: #9a9a9a;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}

#login-form .separator {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  min-height: 21px;
  position: relative;
  z-index: 1;
}

#login-form .separator:before {
  background-color: #dedede;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 10;
}

#login-form .separator .separator-text {
  background-color: #fff;
  color: #a5a5a5;
  font-size: 14px;
  line-height: 21px;
  padding: 0 11px;
  margin: 0 auto -1px;
  position: relative;
  text-align: center;
  z-index: 100;
}

#login-form .btn-google {
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: block;
  padding: 11px 40px;
  position: relative;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

#login-form .btn-google span {
  color: #404040;
  font-size: 14px;
  font-weight: 600;
}

#login-form .btn-google:before {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzRweCIgaGVpZ2h0PSIzNHB4IiB2aWV3Qm94PSIwIDAgMzQgMzQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM0IDM0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjx0aXRsZT5nb29nbGU8L3RpdGxlPg0KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQo8ZyBpZD0iU3ltYm9scyI+DQoJPGcgaWQ9Ikdvb2dsZS1sb2dpbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMDAwMDAwLCAtNC4wMDAwMDApIj4NCgkJPGcgaWQ9Ikdvb2dsZS1sb2dpbi0tLXdoaXRlIj4NCgkJCTxnIGlkPSJnb29nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuMDAwMDAwLCA0LjAwMDAwMCkiPg0KCQkJCTxnIGlkPSJsb2dvX2dvb2dsZWdfNDhkcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC45NDczNjgsIDguOTQ3MzY4KSI+DQoJCQkJCTxwYXRoIGlkPSJTaGFwZSIgZmlsbD0iIzQyODVGNCIgZD0iTTE1Ljc4Myw4LjIzNmMwLTAuNTcxLTAuMDUxLTEuMTItMC4xNDYtMS42NDdIOC4wNTN2My4xMTVoNC4zMzQNCgkJCQkJCWMtMC4xODcsMS4wMDctMC43NTQsMS44NTktMS42MDcsMi40M3YyLjAyaDIuNjAyQzE0LjkwNSwxMi43NTIsMTUuNzgzLDEwLjY4OCwxNS43ODMsOC4yMzZMMTUuNzgzLDguMjM2eiIvPg0KCQkJCQk8cGF0aCBpZD0iU2hhcGVfMV8iIGZpbGw9IiMzNEE4NTMiIGQ9Ik04LjA1MywxNi4xMDVjMi4xNzQsMCwzLjk5Ny0wLjcyMSw1LjMyOS0xLjk1MWwtMi42MDItMi4wMg0KCQkJCQkJYy0wLjcyMSwwLjQ4My0xLjY0MywwLjc2OS0yLjcyNywwLjc2OWMtMi4wOTcsMC0zLjg3My0xLjQxNy00LjUwNi0zLjMyaC0yLjY5djIuMDg2QzIuMTgyLDE0LjMwMSw0LjkwNSwxNi4xMDUsOC4wNTMsMTYuMTA1DQoJCQkJCQlMOC4wNTMsMTYuMTA1eiIvPg0KCQkJCQk8cGF0aCBpZD0iU2hhcGVfMl8iIGZpbGw9IiNGQkJDMDUiIGQ9Ik0zLjU0Nyw5LjU4M2MtMC4xNjEtMC40ODMtMC4yNTMtMC45OTktMC4yNTMtMS41M3MwLjA5Mi0xLjA0NywwLjI1My0xLjUzVjQuNDM2aC0yLjY5DQoJCQkJCQlDMC4zMTEsNS41MjMsMCw2Ljc1MywwLDguMDUzczAuMzExLDIuNTI5LDAuODU3LDMuNjE2TDMuNTQ3LDkuNTgzTDMuNTQ3LDkuNTgzeiIvPg0KCQkJCQk8cGF0aCBpZD0iU2hhcGVfM18iIGZpbGw9IiNFQTQzMzUiIGQ9Ik04LjA1MywzLjIwM2MxLjE4MiwwLDIuMjQ0LDAuNDA2LDMuMDc4LDEuMjA0bDIuMzEtMi4zMUMxMi4wNDYsMC43OTgsMTAuMjIzLDAsOC4wNTMsMA0KCQkJCQkJQzQuOTA1LDAsMi4xODIsMS44MDUsMC44NTYsNC40MzZsMi42OSwyLjA4NkM0LjE4LDQuNjE5LDUuOTU1LDMuMjAzLDguMDUzLDMuMjAzTDguMDUzLDMuMjAzeiIvPg0KCQkJCQk8cG9seWdvbiBpZD0iU2hhcGVfNF8iIGZpbGw9Im5vbmUiIHBvaW50cz0iMCwwIDE2LjEwNSwwIDE2LjEwNSwxNi4xMDUgMCwxNi4xMDUgCQkJCQkiLz4NCgkJCQk8L2c+DQoJCQk8L2c+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==") no-repeat;
  background-size: 34px;
  content: '';
  display: block;
  height: 34px;
  left: 2px;
  position: absolute;
  top: 4px;
  width: 34px;
}