/*
* The purpose of this file is to apply as minimal changes as possible to the
* default KCv2 login theme for it to feel Cabify-ish. Don't strive for
* perfection, just make it look good enough and easy to maintain.
*/

/* Our custom font */
@font-face {
  font-family: 'CabifyCircular';
  src: url('../fonts/CabifyCircularWeb-Bold.eot');
  src: url('../fonts/CabifyCircularWeb-Bold.eot') format('embedded-opentype'),
    url('../fonts/CabifyCircularWeb-Bold.woff2') format('woff2'),
    url('../fonts/CabifyCircularWeb-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'CabifyCircular';
  src: url('../fonts/CabifyCircularWeb-Book.eot');
  src: url('../fonts/CabifyCircularWeb-Book.eot') format('embedded-opentype'),
    url('../fonts/CabifyCircularWeb-Book.woff2') format('woff2'),
    url('../fonts/CabifyCircularWeb-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'CabifyCircular';
  src: url('../fonts/CabifyCircularWeb-Light.eot');
  src: url('../fonts/CabifyCircularWeb-Light.eot') format('embedded-opentype'),
    url('../fonts/CabifyCircularWeb-Light.woff2') format('woff2'),
    url('../fonts/CabifyCircularWeb-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

/* Apply it to all elements */
* {
  font-family: "CabifyCircular", "Avenir Next", "Avenir", "Segoe UI", sans-serif !important;
}

/* Restore the Font Awesome font on the icons */
.fa, .fas {
  font-family: Font Awesome\ 5 Free !important;
}

/* Remove the default background */
body#keycloak-bg {
  background: none;
}

.kc-logo-text {
    background-position: center;
    height: 125px !important;
    width: 150px !important;
}
.pf-v5-c-brand {
    /* Otherwise the logo is too high above the form */
    margin-block-end: 0px !important;
}
.pf-v5-c-login__main-header {
    /* Otherwise the logo is too high above the form */
    padding-block-start: 1rem !important;
}
.pf-v5-c-login__header {
    /* Otherwise the logo pushes the form too far down */
    margin-block-start: 0px !important;
}

/* Remove the shadow around the login form and makes it thinner */
.pf-v5-c-login__main {
  box-shadow: none;
  max-width: 400px;
  padding: 0px;
}

/* Remove the padding around the main body */
.pf-v5-c-login__main-body {
  padding: 5px;
}

/* Add some padding so that labels are not touching the textboxes */
.pf-v5-c-form__label {
  padding-bottom: 5px;
}

/* Hack to add 1Password as a supported app explicitly without modifying the
* HTML */
#kc-totp-supported-apps::before {
    content: "1Password";
    display: list-item;
    padding-bottom: 6px;
}

/* Add a margin to alerts so that they dont touch the content below */
.pf-v5-c-alert {
  margin-bottom: 15px;
}

.pf-v5-c-login__container {
    grid-template-columns: 25rem;
    width: auto;
}

/* Makes the little icons inside textboxes, eg the ! sign when you send bad
* password properly aligned vertically */
.pf-v5-c-form-control__utilities {
  padding-top: 12px;
}

/* Similarly, separate the errors from the text boxes a bit more */
.pf-v5-c-helper-text__item.pf-m-error {
  padding-top: 10px;
}

.pf-v5-c-form-control::after, .pf-m-control::after {
  border-block-end: none;
}

.pf-v5-c-form-control::before, .pf-m-control::after {
  border-style: none;
}

/* The button style */
.pf-v5-c-button.pf-m-primary {
	background-color: rgb(113, 69, 214);
	color: white;
	box-shadow: rgba(26, 26, 56, 0.08) 0px 0px 4px, rgba(26, 26, 56, 0.08) 0px 1px 2px;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: rgb(140, 92, 255);
  box-shadow: rgba(26, 26, 56, 0.08) 0px 0px 4px, rgba(26, 26, 56, 0.16) 0px 2px 8px;
}

/* still button style */
.pf-m-block {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 18px;
  line-height: 1.3;

  padding: 0px 24px;
  min-width: 96px;
  min-height: 56px;

  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: 0.3s linear;
  transform: translate3d(0px, 0px, 0px);
}

/* Remove the eye thingy to display the password */
button.pf-m-control {
  display: none;
}

/* Background and other styles for the textboxes */
.pf-v5-c-form-control {
  position: relative;
  border-radius: 8px;
  background-color: rgb(242, 242, 250);
  transition: 0.3s linear;
}

.pf-v5-c-form-control:hover {
  box-shadow: rgb(210, 191, 255) 0px 0px 0px 2px;
}

.pf-v5-c-form-control:focus-within {
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(140, 92, 255) 0px 0px 0px 2px;
}

input#username, input#password, input#totp, input#userLabel, input#password-new, input#password-confirm, input#otp, input#kc-attempted-username {
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 14px;
  line-height: 1.3;

  align-items: center;
  margin: 0px;
  padding-right: 16px;
  padding-left: 16px;
  width: 100%;
  border: 0px;
  border-radius: 8px;
  text-align: left;

  padding: 16px;
  height: 56px;

  outline: none;
}

input#username, input#password, input#totp, input#userLabel, input#password-new, input#password-confirm, input#kc-attempted-username {
  background-color: transparent;
  transition: padding 0.15s ease-out;
}

/* Changes to the "username" label in the OTP step when logging in */
div#kc-username.pf-v5-c-form__group {
  color: #62628a;
  text-align: end;
}

/* Makes the header ("Sign in...") text fit in a single line, fuck css */
.pf-v5-c-login__main-header {
  grid-template-columns: auto;
  text-align: center;
}
@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        grid-template-columns: 100%;
    }
}

/* Remove the border around the "Try Another Way" button, so that it */
/* appears as a link */
#try-another-way::after {
    border-width: 0px;
}
/* makes the "Try Another Way" text smaller */
#try-another-way {
    font-size: 14px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-top: 10px;
  margin-bottom: 5px;
  margin-left: 20px;
  text-align: left;
}

/* Hide the language selector */
.pf-v5-c-login__main-header-utilities {
  display: none;
}