:root {
    --primary: #16243f;
    --secondary: #2fd2c6;
    --third: #219188;
    --white: #ffffff;
    --black: #000000;
}

img.shayalLogo {
    width: 180px;
}

.auth-page {
    background-color: var(--primary);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%232FD2C6' stroke-width='73' stroke-opacity='0.06' %3E%3Ccircle fill='%2316243F' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%2316243f' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%2316243F' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
.login-wrapper {
    width: 450px;
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgb(0 0 0 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 6%), 0 1px 0px 0 rgb(0, 0, 0, 2%);
}
.login-card {
    font-family: "Almarai-Regular";
    padding: 30px 20px;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 20%);
}
.login-card input {
    color: var(--secondary);
    margin-top: 10px;
    transition: 0.3s ease all;
    border: 1px solid var(--white) !important;
    background: rgba(255, 255, 255, 0.1);
}
.login-card input:focus {
    border: 1px solid var(--secondary) !important;
    box-shadow: none !important;
}
.login-card label {
    color: var(--white);
}

.login-card input[type="checkbox"] {
    cursor: pointer;
    color: var(--third);
    width: 17px;
    height: 17px;
    margin-left: 10px;
}
.login-card input[type="checkbox"] + span {
    color: var(--white);
}

.login-card .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.login-card button {
    background-color: var(--third) !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 50%;
    transition: 0.5s ease all;
}
.login-card button:hover {
    background-color: var(--primary) !important;
}

.login-card button:focus{
  box-shadow: none;
  border: none;
}

.auth-page .shape{
  position: absolute;
  left: 20px;
  bottom: 0;
  animation: fadeInLeft 2s ease-in-out;
}
.auth-page .shape img{
  height: 300px;
}


@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
  }
}