body {
    background: url('../img/dashboard.png');
    background-size: cover;
    height: 100%;
}

.logo_styles {
    height: 4rem;
    width: 16rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

:root {
    --keycloak-logo-url: url('../img/ma_white_logo.png');
    --keycloak-bg-logo-url: rgb(39, 17, 29);
    --keycloak-logo-height: 63px;
    --keycloak-logo-width: 300px;
    --keycloak-card-top-color: var(--pf-v5-global--palette--blue-400);
}

.pf-v5-c-login__container {
    grid-template-columns: 34rem;
    grid-template-areas: "header"
                         "main";
 
}

.pf-v5-c-login__main {
    background-color: white !important;
    border-radius: 10px;
}

.pf-v5-c-login__main-header {
    border-top: 4px solid var(--keycloak-card-top-color);
}

/* Info section - top margin + bottom padding */
.pf-v5-c-login__main-footer-band:first-child {
    margin-block-start: var(--pf-v5-global--spacer--lg);
}

.pf-v5-c-login__main-footer-band:last-child {
    padding-bottom: 0;
}
/* Info section */

/* .login-pf body {
    background: rgb(17 24 39);
    background-size: cover;
    height: 100%;
} */

div.kc-logo-text {
    background-image: var(--keycloak-logo-url);
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

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

.kc-login-tooltip {
    position: relative;
    display: inline-block;
}

.kc-login-tooltip .kc-tooltip-text{
    top:-3px;
    left:160%;
    background-color: black;
    visibility: hidden;
    color: #fff;

    min-width:130px;
    text-align: center;
    border-radius: 2px;
    box-shadow:0 1px 8px rgba(0,0,0,0.6);
    padding: 5px;

    position: absolute;
    opacity:0;
    transition:opacity 0.5s;
}

/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
    visibility: visible;
    opacity:0.7;
}

/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
    content: " ";
    position: absolute;
    top: 15px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

#kc-recovery-codes-list {
    columns: 2;
}

#certificate_subjectDN {
    overflow-wrap: break-word
}

#kc-verify-email-form {
    margin-top: 24px;
    margin-bottom: 24px;
}

#kc-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#kc-logo-project-name {
  margin: 0;
  padding: 0.3rem 1.0rem;
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Segoe UI', sans-serif;
  letter-spacing: 1px;
  text-align: center;
  text-transform: none !important;

  /* Background and text color */
  /* background: rgba(237, 237, 238, 0.4); */
  border-radius: 10px;
  backdrop-filter: blur(0px);
  color: #ffffff;
  bottom: 1rem;
  text-shadow: 4px 4px 4px rgb(0 1 5);
}
#kc-header-wrapper {
    font-size: 29px;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2em;
    white-space: normal;
    color: var(--pf-v5-global--Color--light-100) !important;
    text-align: center;
}

hr {
    margin-top: var(--pf-v5-global--spacer--sm);
    margin-bottom: var(--pf-v5-global--spacer--md);
}

#kc-social-providers svg:not(.google) {
    filter: invert(47%) sepia(88%) saturate(7486%) hue-rotate(199deg) brightness(91%) contrast(101%);
}

#kc-social-providers svg {
    height: var(--pf-v5-global--FontSize--xl);
}

/* custom.css */

/* Change label text color */
.pf-v5-c-form__label-text {
    color: black !important; /* your desired label color */
    font-weight: 600;
  }
  
  /* Optional: style input fields */
  input.pf-v5-c-form-control {
    border-color: #FF5722;
    border-radius: 4px;
  }
  
  /* Optional: change button style */
  #kc-login {
    background-color: rgb(79 70 229);
    border-color: rgb(79 70 229)
  }
  
  /* #kc-login:hover {
    background-color: unset;
  } */

  /* Style for the span wrapper */
.pf-v5-c-form-control {
    position: relative;
    display: block;
    background-color: white ;  /* Light background */
    /* border: 2px solid #FF5722;  Orange border */
    border-radius: 6px;
    /* padding: 2px;  Adds spacing around input */
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Style for the input inside the span */

  
  /* Focus effect */
  .pf-v5-c-form-control input:focus {
    outline: none;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-color: rgb(96, 165, 250) !important;
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.5) !important;
  }
  .pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  content: none !important;   /* Remove generated content */   
  background: none !important;
}
  

span.pf-v5-c-form-control input[name="password"] {
    /* border-top-left-radius: 6px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    padding-right: 2px; */
}

.pf-v5-c-form-control__utilities {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }






@media (prefers-color-scheme: dark) {
    #kc-social-providers svg:not(.google) {
        filter: invert(54%) sepia(96%) saturate(2028%) hue-rotate(174deg) brightness(99%) contrast(97%);
    }
}

@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        /* grid-template-columns: 70% 30%; */
    }
}

.pf-m-error {
    color: rgb(156 163 175)
}

.pf-v5-c-check__label {
    color: rgb(156 163 175)
}
/* Username input (direct styling if outside input group) */
.pf-v5-c-form-control input[type="text"] {
  all: unset;
  border: 2px solid black !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  padding: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Password input group wrapper */
.pf-v5-c-input-group {
  border: 2px solid black !important;
  border-radius: 6px !important;
  display: flex !important;
  overflow: hidden !important;
  background: white !important;
}

/* Inside input group - input field */
.pf-v5-c-input-group__item.pf-m-fill input {
  all: unset;
  border: none !important;
  border-radius: 6px 0 0 6px !important;
  padding: 8px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Inside input group - button (eye icon) */
.pf-v5-c-button.pf-m-control {
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: black !important;
}