:root {
  --theme-primary: #27509b;
  --theme-primary-lighten: #3562b7;
  --theme-logo: url(../img/logo.michelin_connected_fleet.svg);
  --pf-global--BorderColor--300: #d0d0d0;
}

/* ~~~ Default Keycloak overrides ~~~ */
.login-pf {
  background: none;
}
.login-pf body {
  background-color: #fff;
  background-attachment: fixed;
  background-position: left -25vh;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' height='100' width='100'%3E%3Ccircle cx='100%25' cy='0' r='50%25' fill='%23a1d5b2' fill-opacity='0.07'/%3E%3Ccircle cx='0' cy='75%25' r='50%25' fill='%23a1d5b2' fill-opacity='0.07'/%3E%3C/svg%3E");
}

div.kc-logo-text {
  padding-top: 8vh;
}

.form-group.login-pf-settings {
  align-items: center;
}
/* Change the color of bottom border for inputs on hover/focus */
.pf-c-form-control:hover,
.pf-c-form-control:focus {
  --pf-global--primary-color--100: var(--theme-primary);
}

input[type="checkbox"]:checked:before {
  background-color: var(--theme-primary);
}

.card-pf {
  border-radius: 16px;
  background: #f8fcfa;
  box-shadow: 20px 20px 60px #d3d6d5, -20px -20px 60px #ffffff;
}

.pf-c-button {
  --pf-c-button--m-primary--BackgroundColor: var(--theme-primary);
  --pf-c-button--m-primary--BackgroundColor--Hover: var(
    --theme-primary-lighten
  );
  --pf-c-button--m-primary--active--BackgroundColor: var(--theme-primary);
  --pf-c-button--BorderRadius: 4px;
  border-radius: var(--pf-c-button--BorderRadius);
}

a:hover {
  color: var(--theme-primary);
}
a:focus {
  outline-color: var(--theme-primary);
}

/* Change the focus ring of inputs to be our green */
:focus-visible {
  outline-color: var(--theme-primary);
}

.login-pf-page .card-pf {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/*IE compatibility*/
.pf-c-form-control {
  font-size: 14px;
  font-size: var(--pf-global--FontSize--sm);
  border-width: 1px;
  border-width: var(--pf-global--BorderWidth--sm);
  border-color: #ededed #ededed #8a8d90 #ededed;
  border-color: var(--pf-global--BorderColor--300)
    var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--200)
    var(--pf-global--BorderColor--300);
  background-color: #ffffff;
  background-color: var(--pf-global--BackgroundColor--100);
  height: 36px;
  height: calc(
    var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) +
      var(--pf-c-form-control--BorderWidth) * 2 +
      var(--pf-c-form-control--PaddingTop) +
      var(--pf-c-form-control--PaddingBottom)
  );
  padding: 5px 0.5rem;
  padding: var(--pf-c-form-control--PaddingTop)
    var(--pf-c-form-control--PaddingRight)
    var(--pf-c-form-control--PaddingBottom)
    var(--pf-c-form-control--PaddingLeft);
}

.pf-c-form-control:hover,
.pf-c-form-control:focus {
  border-bottom-color: #0066cc;
  border-bottom-color: var(--pf-global--primary-color--100);
  border-bottom-width: 2px;
  border-bottom-width: var(--pf-global--BorderWidth--md);
}

.pf-c-form-control[aria-invalid="true"] {
  border-bottom-color: #c9190b;
  border-bottom-color: var(--pf-global--danger-color--100);
  border-bottom-width: 2px;
  border-bottom-width: var(--pf-global--BorderWidth--md);
}

/* ~~~ End Keycloak overrides ~~~ */

/* Theme needs this to use local files */
#kc-header-wrapper {
  background-image: var(--theme-logo);
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 10vh;
  background-size: contain;
}

.pf-c-button {
  --pf-c-button--m-primary--BackgroundColor: var(--theme-primary);
  --pf-c-button--m-primary--BackgroundColor--Hover: var(--theme-primary);
  --pf-c-button--m-primary--active--BackgroundColor: var(--theme-primary);
}

.pf-c-button.pf-m-control::after {
  --pf-c-button--m-control--hover--after--BorderBottomColor: var(
    --theme-primary
  );
  --pf-c-button--m-control--active--after--BorderBottomColor: var(
    --theme-primary
  );
  --pf-c-button--m-control--focus--after--BorderBottomColor: var(
    --theme-primary
  );
  border-radius: var(--pf-c-button--BorderRadius);
}

/* Change the focus ring of inputs to be our green */
:focus-visible {
  outline-color: var(--theme-primary);
}

#kc-form-buttons .pf-m-primary {
  background-color: var(--pf-c-button--m-primary--BackgroundColor);
  outline: 3px solid transparent;
  transition: all 0.3s ease;
  border: 2px solid var(--pf-c-button--m-primary--BackgroundColor);
  border-radius: 4px;
}

#kc-form-buttons .pf-m-primary:hover {
  background-color: transparent;
  color: var(--pf-c-button--m-primary--BackgroundColor);
}

#kc-form-buttons .pf-m-primary:focus {
  background-color: var(--pf-c-button--m-primary--BackgroundColor--Hover);
  outline: 3px solid var(--pf-c-button--m-primary--BackgroundColor--Hover);
  outline-offset: 4px;
}

.card-pf {
  background: white;
}