@font-face {
 font-family: "OpenSans-Regular";
 src: url("/assets/fonts/OpenSans-Regular.ttf");
}
@font-face {
 font-family: "OpenSans-Bold";
 src: url("/assets/fonts/OpenSans-Bold.ttf");
}

.input-wrapper {
 margin-bottom: 16px;
}

.input-wrapper ion-label {
 display: block;
 font-size: 14px;
 margin-bottom: 6px;
 color: var(--ion-color-medium);
}

.input-box {
 position: relative;
 display: flex;
 align-items: center;
 background: rgba(255, 255, 255, 0.5);
 border: 1px solid #1584d4;
 border-radius: 10px;
 padding: 4px 10px;
}

.input-box ion-input {
 flex: 1;
 padding-left: 36px;
 font-size: 16px;
}

.input-box .input-icon {
 position: absolute;
 left: 10px;
 color: var(--ion-color-primary);
 font-size: 20px;
}

.logo {
 max-width: 100%;
 max-height: 50px;
 margin-top: 50px;
 margin-bottom: 25px;
 width: auto;
}

.blue-background {
 background-color: #323a54;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: auto;
 height: 50vh; /* Adjust the height as needed */
}

.login-card {
 border-radius: 20px;
 margin: auto;
 margin-top: -20vh;
 background-color: #daeafe;
 max-width: 90vw;
 padding: 20px 5px 20px 5px;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
 z-index: 999999999999999999 !important ;
}

.custom-input {
 height: 50px; /* Increase input height */
 font-size: 18px;
 margin-bottom: 20px;
 background: white !important;
 width: 98%;
 padding: 10px !important;
}

.Ion-label {
 font-size: 20px !important;
}

.card-title {
 text-align: center;
 font-size: 28px;
 margin-bottom: 20px;
}

.forgot-password {
 display: block;
 text-align: right;
 margin-bottom: 20px;
 color: #007bff;
}

.create-account {
 text-align: center;
 margin-top: 20px;
}

.create-account p {
 margin: 0;
}

.custom-login-btn {
 font-size: 20px;
}

 html.ion-palette-dark .login-card {
  background-color: #444;
 }
 html.ion-palette-dark  .custom-input {
  background: #333 !important;
 }