:root {
  --textColor: #f6f5f7;
  --textOffColor: #7c858d;
  --baseColor: #ffffff;
  --baseDarkColor: #1e2b36;
  --baseLightColor: #283b48;
  --secColor: #11f7e2;

  --app-title-hex: #2c4964;
  --light-hex: #07c5a9;
  --info-hex: #07B3A7;
  --border-app: 3px solid #F3F3F3;
  --sm-border-app: 3px solid #F3F3F3;
  --jss-color-light: 3px solid var(--light-hex);
  --border-radius: 30px;
  --border-radius-md: 20px;
  --border-radius-sm: 10px;   
  --app-box-shadow: 0px 5px 8px rgb(0 0 0 / 25%);
  --bg-liner-gradient: linear-gradient(0deg, rgb(240, 245, 255, 0.9) 0%, rgba(240, 245, 255, 0.8) 20%, rgba(240, 245, 255, 0) 100%);
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
  --inner-shadow: linear-gradient(0deg, rgba(12, 17, 26, 0.7) 0%, rgba(20, 29, 43, 0.6) 10%, rgba(189, 195, 196, 0.2) 100%);
  
  --jss-hover-hex: #4aaf9c; /* old #F1416C */
  --jss-color-rgba-opacity: rgba(8, 167, 139, 0.75);
  --jss-color-light-rgba: rgba(95, 201, 181, 1);
  --jss-color-rgba: rgba(8, 167, 139, 1);
  --jss-color: #08A78B;
  --jss-color-light: #5FC9B5;
  --jss-color-bg-text: #C9F4EB;
  --jss-color-bg-text-light: #C9F4EB;
  --jss-linear-gradient: linear-gradient(44deg, rgb(25 133 114 / 97%) 20%, rgba(95, 201, 181, 0.92) 95%, rgba(95, 201, 181, 0.9) 30%) !important;
}


body {
  background: #fff url(../img/keycloak-bg.png);
  background-size: cover;
  color: var(--jss-color);
  font-size: 13px;
  font-family: Poppins !important;
}

/* Login Card */
.login-pf-page .card-pf {
  border-radius: 20px;
  background: transparent;
  /* background: var(--baseColor); */
}

/* Card Title */
.login-pf-page .login-pf-header {
  margin-bottom: 0px;
}

#kc-page-title {
  font-size: 1.75rem;
  /* text-transform: uppercase; */
  font-weight: 600;
}

/* Login Form */
.login-pf-page .form-group {
  margin-bottom: 30px;
}
.login-pf-page .form-control::placeholder {
  font-style: normal;
  color: var(--jss-color);
}

/* Remember Me Toggle */
#kc-form-options .checkbox {
  /* font-size: 13px; */
  color: var(--jss-color);
  margin-bottom: 0;
}

#kc-form-options label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding-left: 8px;
}

#kc-form-options .toggle {
  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  /* box-shadow: -8px -4px 8px var(--baseLightColor), 8px 4px 12px var(--baseDarkColor),
    4px 4px 4px var(--baseDarkColor) inset, -4px -4px 4px var(--baseLightColor) inset; */
}

#rememberMe {
  /* display: none; */
}

#kc-form-options .dot {
  height: 100%;
  width: 200%;
  background: var(--baseColor);
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  /* box-shadow: -8px -4px 8px var(--baseLightColor), 8px 4px 12px var(--baseDarkColor); */
}

#rememberMe:checked ~ .dot {
  transform: translate3d(25%, 0, 0);
}

#kc-form-options .label-text {
  margin-left: 16px;
}

/* Reset Password Link */
#kc-form-reset-psw a {
  font-size: 16px;
  color: var(--secColor);
  padding-right: 8px;
}

#kc-form-buttons {
  margin-top: 30px;
}