@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

body {
  background: #f6f7fc;
  /* background-image: url("../img/background.svg"); */
  /* background-position: center;
  background-size: cover; */
  font-family: "Roboto", sans-serif;
}
.logo {
  height: 80px;
  vertical-align: middle;
}
.title {
  margin-bottom: 15px;
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  color: #2d61b5;
}

/* without this, the fields all expand
   when the MDC JavaScript is run. */
.mdc-text-field {
  margin-top: 16px;
}

#kc-header,
#kc-content {
  margin-left: auto;
  margin-right: auto;
}

#kc-header {
  width: 90%;
  font-size: 35px;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 300;
  color: rgb(68, 68, 68);
}

#kc-content {
  background: white;
  padding: 20px;
  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

#kc-reset-password-form #kc-form-options {
  float: left;
}

#kc-reset-password-form #kc-form-buttons {
  float: right;
}

#kc-register-form #kc-form-options {
  float: left;
}

#kc-register-form #kc-form-buttons {
  float: right;
}

.clearfix {
  float: none;
  clear: both;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.24);
}

@media (max-width: 768px) {
  #kc-content {
    width: 90%;
  }
}

@media (min-width: 769px) {
  #kc-content {
    width: 400px;
  }
}

.mdc-text-field {
  width: 100%;
}

#kc-form-login #kc-form-options {
  margin-top: 15px;
}

#kc-login {
  float: right;
  width: 100%;
  background-color: #2d61b5;
}

#kc-error-message p {
  margin: 0;
}

.remember-me-checkbox {
  float: left;
  margin-bottom: 5px;
}

.register .register-field {
  margin-bottom: 15px;
}

.register .register-button-container {
  margin-top: 20px;
}

.reset-password .reset-password-field {
  margin-bottom: 15px;
}

.update-password .update-password-field {
  margin-bottom: 15px;
}

.update-password .update-password-button-container {
  margin-top: 20px;
}

.config-totp .config-totp-button-container {
  margin-top: 15px;
}

.totp .totp-button-container {
  margin-top: 15px;
}

.update-profile .update-profile-field {
  margin-top: 15px;
}

.update-profile .update-profile-button-container {
  margin-top: 20px;
}

.template .language-picker {
  position: relative;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  width: 195px;
}

.template .language-picker .language-icon {
  float: left;
  color: rgba(0, 0, 0, 0.54);
}

.template .language-picker .mdc-select {
  float: right;
  margin-top: -25px;
}

.template .language-picker .mdc-select option {
  font-weight: normal;
  display: block;
  white-space: pre;
  min-height: 1.2em;
  padding: 0px 2px 1px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s;
  -webkit-text-fill-color: #000 !important;
}

/* Form style */

/* Border khi idle */
.mdc-notched-outline__idle {
  border-color: #2d61b5 !important;
}
/* Outline khi active */
.mdc-notched-outline__path {
  stroke: #2d61b5 !important;
}
/* Icon trong input */
.mdc-text-field__icon {
  color: #2d61b5 !important;
}
/* Màu place holder - floating label */
.mdc-floating-label {
  color: #2d61b5 !important;
}