.login-section{
    background-color: var(--muse-bg-gray);
}
.login-card-wrapper{
    display: flex;
    padding: 2rem;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    min-height: 100vh;
}
.login-card{
    display: grid;
    min-height: 650px;
    width: 100%;
    max-width: 1100px;
    overflow: hidden;
    border-radius: 0.5rem;
    border-width: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    background-color: var(--white-color);
}
.login-card .login-card-image{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
/* .login-card .title{
    color: var(--secondary-green);
} */
.login-card .card-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}
.login-card .card-header {
    margin-bottom: 1.5rem;
}
.form-group {
  margin-bottom: 2rem;
}
.form-group .form-floating label {
  padding: 0.375rem 0.75rem;
  color: var(--text-gray);
}

.form-group .form-floating > .form-control:focus,
.form-group .form-floating > .form-control:not(:placeholder-shown),
.form-group .form-floating > .form-control-plaintext:focus,
.form-group .form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding: 0.375rem 0.75rem;
}
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{
   display: none;
}
.form-group .form-floating > .form-control:focus ~ label,
.form-group .form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-group .form-floating > .form-control-plaintext ~ label,
.form-group .form-floating > .form-select ~ label {
  transform: scale(0.85) translateY(-2rem) translateX(0rem);
  opacity: 1;
  padding-left: 0;
  color: var(--text-gray);
  background-color: transparent;
}
.form-group .form-floating > textarea:focus ~ label::after,
.form-group .form-floating > textarea:not(:placeholder-shown) ~ label::after {
  background-color: transparent;
}
.form-group .form-control {
  padding: 0.375rem 0.75rem;
  height: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid #d8d8d8;
  border-radius: 0.25rem;
  font-size: 1rem;
  color: var(--text-gray);
}
.form-group .form-control:focus {
  border-color: var(--primary-green);
  box-shadow: none;
}
.form-group .form-control.is-invalid {
  border-color: var(--error-red);
}
.login-header{
    border-bottom: 1px solid var(--hr-gray);
    margin-bottom: 2rem;
}
.login-header .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;        
    width: 230px;
}
.login-header .brand-logo .logo {
    max-width: 100%;
    transition: opacity .3s ease, transform .3s ease;
}
.form-group--submit .btn-primary {
    width: 100%;
}
.from-link-text{
    font-family: var(--regular-font);
    font-size: 1rem;
    color: var(--text-gray);
}
.from-link-text:hover{
    color: var(--primary-green);
}
.form-group--submit .from-link-text{
    color: var(--muse-dark-green);
    font-family: var(--medium-font);
}
.form-group--submit .from-link-text:hover{
    color: var(--primary-green);
}
.toggle-password{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23727271"><path d="M480.18-353.85q60.97 0 103.47-42.68t42.5-103.65q0-60.97-42.68-103.47t-103.65-42.5q-60.97 0-103.47 42.68t-42.5 103.65q0 60.97 42.68 103.47t103.65 42.5ZM480-392q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm.11 152q-129.96 0-236.88-70.73Q136.31-381.46 83.08-500q53.23-118.54 160.04-189.27T479.89-760q129.96 0 236.88 70.73Q823.69-618.54 876.92-500q-53.23 118.54-160.04 189.27T480.11-240ZM480-500Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>');
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    /* top: 26px; */
}
.toggle-password.active{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23727271"><path d="M617.85-454.15 586-486q9-52.38-29.69-90.69Q517.62-615 466-606l-31.85-31.85q10.08-4.15 21.04-6.23 10.96-2.07 24.81-2.07 61.15 0 103.65 42.5 42.5 42.5 42.5 103.65 0 13.85-2.07 25.58-2.08 11.73-6.23 20.27Zm126.46 122.92L714-358q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-31.23-31.23q34.85-13.15 70.92-18.96Q443.77-760 480-760q130.23 0 238.23 71.58 108 71.57 158.69 188.42-21.46 48.23-54.34 90.65-32.89 42.43-78.27 78.12Zm44.61 216.77L633.23-269.69q-26.54 11.77-65.88 20.73Q528-240 480-240q-131 0-238.23-71.58Q134.54-383.15 83.08-500q23.3-53 61.46-99.27 38.15-46.27 81.46-77.65l-111.54-112 28.31-28.31 674.46 674.46-28.31 28.31ZM254.31-648.62q-34.39 24.47-70.31 64.31-35.92 39.85-56 84.31 50 101 143.5 160.5T480-280q34.62 0 69.77-6.73t52.85-13.58L537.38-366q-9.46 5.31-26.38 8.73-16.92 3.42-31 3.42-61.15 0-103.65-42.5-42.5-42.5-42.5-103.65 0-13.31 3.42-29.85 3.42-16.53 8.73-27.53l-91.69-91.24ZM541-531Zm-112.54 56.54Z"/></svg>');
}