/*****************************************************************************
 * Copyright 2025 Parabon NanoLabs, Inc.  This software is confidential
 * and is the copyright and proprietary property of Parabon NanoLabs, Inc.  
 * Neither the source code nor its graphical rendering may be reproduced 
 * for any reason without prior written permission.  All rights not 
 * specifically granted in writing are reserved to Parabon NanoLabs, Inc.
*****************************************************************************/
:root {
  --textColor: #0792db;
  --textOffColor: #7c858d;
  --baseColor: #fffffe;
  --baseDarkColor: #1e2b36;
  --baseLightColor: #283b48;
  --secColor: #0792db;
}

body {
  /* background: var(--baseColor) !important;
  color: var(--textColor);
*/
  background: url("../img/body-wallpaper-light-blue.png") no-repeat center center fixed;
  background-size: cover;
  font-size: 18px;
}

/* Login Card */

.login-pf-page .card-pf {
  border-radius: 15px;
  background: var(--baseColor);
  box-shadow: 5px 5px 10px var(--baseDarkColor), -5px -5px 10px var(--baseLightColor);
}

/* Card Title */

.login-pf-page .login-pf-header {
  margin-bottom: 10px;
}

#kc-page-title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Login Form */

.login-pf-page .form-group {
  margin-bottom: 10px;
}

.login-pf-page .form-control {
  border: none;
  padding: 22px 30px;
  font-size: 18px;
  color: var(--textColor);
  height: auto;

  border-radius: 20px;
  background: var(--baseColor);
  box-shadow: inset 5px 5px 10px var(--baseDarkColor), inset -5px -5px 10px var(--baseLightColor);
}

.login-pf-page .form-control::placeholder {
  font-style: normal;
  color: var(--textOffColor);
}

/* Remember Me Toggle */

#kc-form-options .checkbox {
  font-size: 14px;
  color: var(--textOffColor);
  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: 20px;
}

/* Login Button */

#kc-login {
  border: none;
  padding: 5px 10px;
  font-size: 14px;
  color: var(--secColor) !important;
  background: var(--baseColor) !important;

  border-radius: 20px;
  background: linear-gradient(145deg, #253743, #202e39);
  box-shadow: 5px 5px 10px var(--baseDarkColor), -5px -5px 10px var(--baseLightColor);
}

#kc-login:active:focus {
  background: linear-gradient(145deg, #202e39, #253743) !important;
  outline: none;
}