html, body {
  margin: 0;
  padding: 0;
  font-family: "national2condensedbold", sans-serif;
}

body {
  display: flex;
  height: 100vh;
  flex-direction: row;
}

.wider-logo {
  text-align: center;
}

.wider-logo > img {
  width: 250px;
}

.button {
  width: 100%;
  margin: 0 auto;
  padding: 12px 24px;
  text-align: center;
  font-size: 16px;
  border-radius: 15px;
  line-height: 150%;
  border: none;
}

.button-primary {
  background-color: #1f4cb3;
  color: #fff;
  margin: 30px 0;
}

.button-primary:hover, .button-primary:focus {
  background-color: #1e5edb;
}

.button:hover {
  cursor: pointer;
}

.card-pf {
  width: 60%;
  margin: 0 auto;
  color: #000;
}

.control-label {
  display: block;
  color: #000;
}

.form-control {
  box-sizing: border-box;
  width: 100%;
  margin: 5px 0 0 0;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #dbe0e0;
}

input.form-control:focus {
  outline: none;
  border-color: #000;
}

.form-group {
  margin: 0 0 30px 0;
}

#kc-form-buttons {
  margin: 15px 0 0 0;
}

.login-pf-settings {
  margin-top: 15px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
}

a {
  color: #1C5273;
  text-decoration: none;
}

.alert-error {
  color: #000;
  border: 2px solid #f7a36e;
  border-radius: 10px;
  padding: 12px 24px;
  margin-bottom: 30px;
}

.alert-warning {
  margin-bottom: 20px;
}

.alert-success {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #00cc00;
  padding: 10px;
  margin-bottom: 20px;
}

#kc-locale ul {
  display: none;
  position: absolute;
  background-color: #fff;
  list-style: none;
  right: 0;
  top: 20px;
  min-width: 100px;
  padding: 2px 0;
  border: solid 1px #bbb;
}

#kc-locale:hover ul {
  display: block;
  margin: 0;
}

#kc-locale ul li a {
  display: block;
  padding: 5px 14px;
  color: #000 !important;
  text-decoration: none;
  line-height: 20px;
}

#kc-locale ul li a:hover {
  color: #4d5258;
  background-color: #d4edfa;
}

#kc-locale-dropdown a {
  color: #4d5258;
  background: 0 0;
  padding: 0 15px 0 0;
  font-weight: 300;
}

#kc-locale-dropdown a:hover {
  text-decoration: none;
}

a#kc-current-locale-link {
  display: block;
  padding: 12px 5px;
}

a#kc-current-locale-link::after {
  content: "\2c5";
  margin-left: 4px;
}

.login-pf .container {
  padding-top: 40px;
}

.login-pf a:hover {
  color: #0099d3;
}

#kc-logo {
  width: 100%;
}

div.kc-logo-text span {
  display: none;
}

#kc-header {
  color: #ededed;
  overflow: visible;
  white-space: nowrap;
}

#kc-header-wrapper {
  font-size: 29px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.2em;
  padding: 62px 10px 20px;
  white-space: normal;
}

#kc-content {
  width: 100%;
}

#kc-content h1 {
  margin-bottom: 30px;
}


#kc-info {
  padding-bottom: 200px;
  margin-bottom: -200px;
}

#kc-info-wrapper {
  font-size: 13px;
}

#kc-form-options span {
  display: block;
}

#kc-form-options .checkbox {
  margin-top: 0;
  color: #72767b;
}

#kc-form-options .checkbox label {
  color: #000;
  display: flex;
  align-items: center;
}

#kc-form-options .checkbox label input {
  width: 18px;
  height: 18px;
  flex: 0 0 30px;
}

#kc-form-options .checkbox label input:checked {
  accent-color: #136c68;
}

.form-options span a, #domain-user a {
  color: #1f4cb3;
}

#kc-terms-text {
  margin-bottom: 20px;
}

#kc-registration {
  margin-bottom: 15px;
}

/* TOTP */

ol#kc-totp-settings {
  margin: 0;
  padding-left: 20px;
}

ul#kc-totp-supported-apps {
  margin-bottom: 10px;
}

#kc-totp-secret-qr-code {
  max-width: 150px;
  max-height: 150px;
}

#kc-totp-secret-key {
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  padding: 10px 0;
}

/* Code */
#kc-code textarea {
  width: 100%;
  height: 8em;
}

/* Social */

@media (min-width: 768px) {
  #kc-container-wrapper {
    position: absolute;
    width: 100%;
  }

  .login-pf .container {
    padding-right: 80px;
  }

  #kc-locale {
    position: relative;
    text-align: right;
    z-index: 9999;
  }
}

@media (max-width: 767px) {
  .login-pf body {
    background: white;
  }

  #kc-header {
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    text-align: left;
  }

  #kc-form {
    float: none;
  }

  #kc-info-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 15px;
  }

  .login-pf .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  #kc-locale {
    position: absolute;
    width: 200px;
    top: 20px;
    right: 20px;
    text-align: right;
    z-index: 9999;
  }

  #kc-logo-wrapper {
    background-size: 100px 21px;
    height: 21px;
    width: 100px;
    margin: 20px 0 0 20px;
  }
}

@media (min-height: 646px) {
  #kc-container-wrapper {
    bottom: 12%;
  }
}

@media (max-height: 645px) {
  #kc-container-wrapper {
    padding-top: 50px;
    top: 20%;
  }
}

.login-pf-page {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-pf-page .login-pf-brand {
  margin-top: 20px;
  max-width: 360px;
}

/*tablet*/
@media (max-width: 840px) {
  .login-pf-page .card-pf {
    max-width: none;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 20px 30px 20px;
  }
}

@media (max-width: 767px) {
  .login-pf-page .card-pf {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
  }

  .card-pf.login-pf-accounts {
    max-width: none;
  }
}

.login-pf-page .login-pf-signup {
  font-size: 15px;
  color: #72767b;
}

#kc-content-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

.login-pf-page.login-pf-page-accounts {
  margin-left: auto;
  margin-right: auto;
}

.login-pf-page .btn-primary {
  margin-top: 0;
}

.left-side {
  width: 50%;
  background: #0F4146;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.left-side h1 {
  font-weight: 500;
}

#domain-user {
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
}

button[data-password-toggle][aria-label="Show password"] i::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23136c68" fill-rule="evenodd" d="M23 12c0.9138 -0.4061 0.9137 -0.4065 0.9135 -0.4068L23 12Zm0.9135 -0.4068 -0.0015 -0.0033 -0.0032 -0.0073 -0.011 -0.0241c-0.0092 -0.0202 -0.0224 -0.0488 -0.0395 -0.0852 -0.0342 -0.0727 -0.0841 -0.1766 -0.1494 -0.3072 -0.1305 -0.2611 -0.3232 -0.6297 -0.576 -1.0702 -0.5045 -0.87872 -1.2553 -2.05486 -2.2397 -3.23608C18.9526 4.53102 15.9477 2 12 2 8.05233 2 5.04744 4.53102 3.10678 6.85982 2.12243 8.04104 1.37156 9.21718 0.867122 10.0959c-0.252869 0.4405 -0.445473 0.8091 -0.576002 1.0702 -0.065301 0.1306 -0.115173 0.2345 -0.149384 0.3072 -0.017108 0.0364 -0.03031 0.065 -0.039575 0.0852l-0.010946 0.0241 -0.0032543 0.0073 -0.0010716 0.0024C0.0867295 11.5926 0.0861884 11.5939 1 12l-0.9138116 -0.4061c-0.1149179 0.2585 -0.1149179 0.5537 0 0.8122l-0.0000029 0c-0.0000565 -0.0002 0.0014449 -0.0008 0.1138185 -0.0507 0.113805 -0.0505 0.341326 -0.1515 0.796109 -0.3537l-0.9099246 0.4044 0.0017723 0.004 0.0032543 0.0073 0.010946 0.0241c0.009265 0.0202 0.022467 0.0488 0.039575 0.0852 0.034211 0.0727 0.084083 0.1766 0.149384 0.3072 0.130529 0.2611 0.323133 0.6297 0.576002 1.0702 0.504438 0.8787 1.255308 2.0549 2.239658 3.2361C5.04744 19.469 8.05233 22 12 22c3.9477 0 6.9526 -2.531 8.8932 -4.8598 0.9844 -1.1812 1.7352 -2.3574 2.2397 -3.2361 0.2528 -0.4405 0.4455 -0.8091 0.576 -1.0702 0.0653 -0.1306 0.1152 -0.2345 0.1494 -0.3072 0.0171 -0.0364 0.0303 -0.065 0.0395 -0.0852l0.011 -0.0241 0.0032 -0.0073 0.0011 -0.0024c0.0002 -0.0003 0.0007 -0.0016 -0.9131 -0.4077l0.9138 0.4061c0.1149 -0.2585 0.1146 -0.5544 -0.0003 -0.8129ZM7.5 12c0 -2.48528 2.01472 -4.5 4.5 -4.5 2.4853 0 4.5 2.01472 4.5 4.5 0 2.4853 -2.0147 4.5 -4.5 4.5 -2.48528 0 -4.5 -2.0147 -4.5 -4.5Z" clip-rule="evenodd" stroke-width="1"/></svg>') no-repeat center;
  background-size: contain;
}

button[data-password-toggle][aria-label="Hide password"] i::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23136c68" fill-rule="evenodd" d="M0 2.12132 21.8787 24 24 21.8787l-3.873 -3.873c0.2715 -0.2881 0.5269 -0.5784 0.7662 -0.8655 0.9844 -1.1812 1.7352 -2.3574 2.2397 -3.2361 0.2528 -0.4405 0.4455 -0.8091 0.576 -1.0702 0.0653 -0.1306 0.1152 -0.2345 0.1494 -0.3072 0.0171 -0.0364 0.0303 -0.065 0.0395 -0.0852l0.011 -0.0241 0.0032 -0.0073 0.0011 -0.0024c0.0002 -0.0003 0.0007 -0.0016 -0.9131 -0.4077l0.9138 0.4061c0.1149 -0.2585 0.1146 -0.5544 -0.0003 -0.8129l-0.0015 -0.0033 -0.0032 -0.0073 -0.011 -0.0241c-0.0092 -0.0202 -0.0224 -0.0488 -0.0395 -0.0852 -0.0342 -0.0727 -0.0841 -0.1766 -0.1494 -0.3072 -0.1305 -0.2611 -0.3232 -0.6297 -0.576 -1.0702 -0.5045 -0.87872 -1.2553 -2.05487 -2.2397 -3.23608C18.9526 4.53102 15.9477 2 12 2c-2.2798 0 -4.24518 0.84413 -5.87273 2.00595L2.12132 0 0 2.12132Zm10.0597 5.81711c1.6727 -0.79907 3.7368 -0.50587 5.1223 0.87959 1.3855 1.38548 1.6787 3.44958 0.8796 5.12228l-6.0019 -6.00187ZM23 12c0.9138 -0.4061 0.9137 -0.4065 0.9135 -0.4068L23 12Zm-6.9022 9.0476L2.5753 7.52504c-0.72709 0.94867 -1.29879 1.85771 -1.708178 2.57086 -0.252869 0.4405 -0.445473 0.8091 -0.576002 1.0702 -0.065301 0.1306 -0.115173 0.2345 -0.149384 0.3072 -0.017108 0.0364 -0.03031 0.065 -0.039575 0.0852l-0.010946 0.0241 -0.0032543 0.0073 -0.0010716 0.0024C0.0867295 11.5926 0.0861884 11.5939 1 12l-0.9138116 -0.4061c-0.1149179 0.2585 -0.1149179 0.5537 0 0.8122l-0.0000029 0c-0.0000565 -0.0002 0.0014449 -0.0008 0.1138185 -0.0507l0.796109 -0.3537 -0.9099246 0.4044 0.0017723 0.004 0.0032543 0.0073 0.010946 0.0241c0.009265 0.0202 0.022467 0.0488 0.039575 0.0852 0.034211 0.0727 0.084083 0.1766 0.149384 0.3072 0.130529 0.2611 0.323133 0.6297 0.576002 1.0702 0.504438 0.8787 1.255308 2.0549 2.239658 3.2361C5.04744 19.469 8.05233 22 12 22c1.5053 0 2.8734 -0.368 4.0978 -0.9524Z" clip-rule="evenodd" stroke-width="1"/></svg>') no-repeat center;
  background-size: contain;
}

button[data-password-toggle] {
  position: absolute;
  background: transparent;
  border: none;
  margin: 14px -40px;
  cursor: pointer;
}