@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.content-wrapper-login {
     padding-top: 80px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     width: 100%;
 }

 /* Library PIN page: same layout as main login, card sits a bit higher */
 .content-wrapper-login.content-wrapper-login--library {
     padding-top: 48px;
 }

 .login-wrapper {
     width: 700px;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     background: #f1f1f1;
     border-radius: 6px;
     overflow: hidden;
     box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), 0px 1px 5px rgba(0, 0, 0, 0.125);
     border: 1px solid #ccc;
 }

 .login-image img {
     width: 100%;
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: -webkit-fill-available;
 }

 .login-image {
     width: 50%;
 }

 .login-box-content {
     width: 50%;
     padding: 15px;
     background: #fff;
 }

 .login-logo img {
     width: 80%;
     margin: 0 auto;
     object-fit: cover;
 }

 .login-logo {
     display: flex;
     margin-bottom: 30px;
 }

 .login-title {
     text-align: center;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 0;
 }

 .login-sub-title {
     text-align: center;
     font-size: 14px;
     color: #999;
     margin-bottom: 30px;
 }

 .login-form-inner-wrapper form.re-form {
     width: 100% !important;
 }

 .login-form-field-wrapper label {
     font-size: 13px;
     color: #999;
 }

 .login-form-field-wrapper {
     margin-bottom: 15px;
 }

 .login-form-field-wrapper:last-child {
     margin-bottom: 0 !important;
 }

 .icon-fiels {
     border: 1px solid #ccc;
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 8px;
     border-radius: 5px;
 }

 .icon-fiels #email,
 .icon-fiels #password,
 .icon-fiels #lcode,
 .icon-fiels #pin {
     border: none;
     padding: 0 !important;
     font-size: 12px;
     font-family: "Poppins", sans-serif;
 }

 .icon-fiels #email:focus,
 .icon-fiels #password:focus,
 .icon-fiels #lcode:focus,
 .icon-fiels #pin:focus {
     outline: none !important;
     box-shadow: none !important;
     border: none !important;

 }

 .icon-fiels #email:hover,
 .icon-fiels #password:hover,
 .icon-fiels #lcode:hover,
 .icon-fiels #pin:hover {
     border: none !important;
     box-shadow: none !important;
 }

 .icon-fiels span {
     display: flex;
     align-items: center;
 }

 .form-group {
     display: block;
     align-items: center;
     justify-content: space-between;
     margin: 25px 0px;
 }

 .form-check {
     margin-bottom: 0;
 }

 .forgot-password {
     font-size: 13px;
     color: #007bff;
     text-decoration: none;
 }

 .forgot-password:hover {
     text-decoration: underline;
 }

 .error-email {
     display: ruby-text;
 }

 #password,
 #pin {
     font-family: monospace;
     letter-spacing: 0.2em;
 }

 #password::placeholder,
 #pin::placeholder {
     letter-spacing: normal;
     font-family: inherit;
 }

 .content-wrapper-login--library .form-check-library {
     padding-left: 30px;
     margin-bottom: 0;
 }

 @-moz-document url-prefix() {
     .login-image img {
         width: calc(100% - 2%);
     }
 }