:root {
    --main-color-gradient: linear-gradient(to right, rgba(37, 64, 143, 1), rgba(48, 209, 201, 1) 80%);
    --secondry-color-gradient: linear-gradient(to right, rgba(210, 35, 42, 1), rgba(22, 4, 68, 1) 80%);
    --yellow-color: rgb(239, 239, 0);
    --yellow-hover: #FFC107;
    --red-color: rgba(210, 35, 42, 1);
    --bluedark-color: #00334c;
    --bluelight-color: rgb(78, 194, 192);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-login {
    margin-top: 40px;
    text-align: right;
    flex: 1;
}

.login-content {
    margin-top: 90px;
}

.login-content h3 {
    font-family: 'DG Forsha Scribble';
    font-size: 32px;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 11px;
    color: var(--yellow-color);
}

.login-content h3 span {
    background: var(--main-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.login-content .info {
    color: var(--bluedark-color);
    font-family: 'El Messiri';
    font-weight: bold;
    margin-top: 25px;
}

.login-content form label {
    color: var(--bluedark-color);
    font-family: 'El Messiri';
    font-weight: bold;
    font-size: 19px;
    display: block;
}

.login-content form label svg {
    color: var(--bluelight-color);
}

.login-content form input {
    display: block;
    font-family: 'Hacen Algeria Bd';
    font-size: 20px;
    margin-bottom: 8px;
    width: 100%;
    padding: 4px 10px;
    border: 3px var(--bluedark-color) solid;
    border-radius: 10px;
    position: relative;
}


.login-content form input:focus {
    border: 3px var(--bluedark-color) solid;
    box-shadow: 0 0px 9px var(--bluelight-color);
    outline: none;
}

.login-content form input:nth-of-type(3), .submit {
    width: fit-content;
    font-family: 'El Messiri';
    font-weight: bold;
    background: var(--main-color-gradient);
    color: #fff;
    border: 3px #fff solid;
    border-radius: 30px;
    padding: 5px 10px;
    transition: all linear 0.7s;
    cursor: pointer;
}

.login-content form input:nth-of-type(3):hover {
    color: var(--bluedark-color);
    background: #fff;
    border: 3px var(--bluelight-color) solid;
}

.login-content form .forget-password,
.login-content .new-account {
    font-family: 'El Messiri';
    font-weight: bold;
    margin-top: 17px;
    color: var(--bluedark-color);
}

.login-content form .forget-password a,
.login-content .new-account a {
    background: var(--secondry-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.3s;
}

.login-content form .forget-password a:hover,
.login-content .new-account a:hover {
    background: var(--main-color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.error-message {
    background: var(--red-color);
    font-family: 'Hacen Algeria Bd', 'Expo Arabic Book';
    color: #fff;
    padding: 5px 6px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.swal-custom-popup {
    font-family: 'El Messiri', sans-serif;
    border-radius: 15px;
}

.swal2-popup {
    font-family: 'El Messiri', sans-serif !important;
    border-radius: 15px !important;
}

.swal2-title {
    font-family: 'DG Forsha Scribble', sans-serif !important;
    font-size: 28px !important;
    color: var(--bluedark-color) !important;
}

.swal2-html-container {
    font-family:  'Expo Arabic Book', sans-serif !important;
    font-size: 18px !important;
    color: #fff !important;
}

.swal-confirm-button {
  color: #000 !important;
  background-color: #FFD700 !important;
  border-radius: 20px;
  padding: 0 !important;
}



.swal2-confirm:hover {
    background-color: var(--yellow-hover) !important;
    color: #001f33 !important;
}

.main-login .login-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-login .login-img img {
    width: 100%;
}
.swal-confirm-button {
  font-size: 22px !important;
  font-weight: bold;
  padding: 10px 30px !important;
  color: #000 !important; 
}
.toggle-password {
  position: absolute;
  left: 30px;
  margin-top: -40px;
  cursor: pointer;
  color: #666;
  font-size: 18px;
  z-index: 10;
}
.toggle-password:hover {
  color: #667eea;
}
input[type="password"], input[type="text"] {
  padding-left: 40px !important;
}