@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --login-background-color: radial-gradient(#01B4EE, #1E4B84);
    --login-input-background: rgba(178, 183, 232, 0.2);
    --login-background-white: #000;
    --login-dark-color: #1E4B84;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background: var(--login-background-color) !important;
    font-family: "Inter", sans-serif;
}

.fuzulev-logo {
    width: 15em;
}

.login-button {
    background-color: white !important;
    color: var(--login-dark-color) !important;
    max-height: 50px;
    padding: 16px 16px 16px 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 18px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    transition: 0.6s;
}

    .login-button:hover {
        background-color: var(--login-input-background) !important;
        border: 1px solid #fff !important;
        color: #fff !important;
    }

.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
}

.form-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.form input {
    max-height: 50px !important;
    background: var(--login-input-background);
    border-radius: .675rem;
    border: 1px solid #fff;
    padding: 16px 16px 16px 16px;
    color: #fff;
    font-weight: 500;
    outline: none;
    width: 100%;
}

.form-password {
    position: relative;
}

.show-password-button {
    position: absolute;
    text-decoration: none;
    right: 20px;
    top: 12.5px;
}

    .show-password-button i {
        color: #fff;
    }

.input-form-group {
    gap: 5px;
}

.input-form-group label {
   font-weight: 500;
   font-size: 14px;
   font-family: "Inter", sans-serif;
}

.form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

.waves {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -5;
}

.bubble {
    display: flex;
    width: 100%;
    height: 100vh;
    z-index: -5;
}

.column-1::before {
    content: '';
    transform: rotate(-90deg);
    clip-path: polygon(100% 0%, 0% 0%, 0% 57.50%, 1% 57.49%, 2% 57.47%, 3% 57.42%, 4% 57.36%, 5% 57.29%, 6% 57.20%, 7% 57.09%, 8% 56.96%, 9% 56.82%, 10% 56.67%, 11% 56.49%, 12% 56.31%, 13% 56.11%, 14% 55.89%, 15% 55.67%, 16% 55.43%, 17% 55.17%, 18% 54.91%, 19% 54.63%, 20% 54.35%, 21% 54.05%, 22% 53.75%, 23% 53.43%, 24% 53.11%, 25% 52.78%, 26% 52.45%, 27% 52.11%, 28% 51.76%, 29% 51.42%, 30% 51.06%, 31% 50.71%, 32% 50.35%, 33% 50.00%, 34% 49.64%, 35% 49.28%, 36% 48.93%, 37% 48.58%, 38% 48.23%, 39% 47.88%, 40% 47.54%, 41% 47.21%, 42% 46.88%, 43% 46.56%, 44% 46.24%, 45% 45.94%, 46% 45.64%, 47% 45.36%, 48% 45.08%, 49% 44.82%, 50% 44.57%, 51% 44.33%, 52% 44.10%, 53% 43.89%, 54% 43.69%, 55% 43.50%, 56% 43.33%, 57% 43.17%, 58% 43.03%, 59% 42.91%, 60% 42.80%, 61% 42.71%, 62% 42.63%, 63% 42.58%, 64% 42.53%, 65% 42.51%, 66% 42.50%, 67% 42.51%, 68% 42.53%, 69% 42.58%, 70% 42.64%, 71% 42.71%, 72% 42.81%, 73% 42.92%, 74% 43.04%, 75% 43.18%, 76% 43.34%, 77% 43.51%, 78% 43.70%, 79% 43.90%, 80% 44.11%, 81% 44.34%, 82% 44.58%, 83% 44.83%, 84% 45.10%, 85% 45.37%, 86% 45.66%, 87% 45.96%, 88% 46.26%, 89% 46.57%, 90% 46.90%, 91% 47.22%, 92% 47.56%, 93% 47.90%, 94% 48.24%, 95% 48.59%, 96% 48.95%, 97% 49.30%, 98% 49.66%, 99% 50.01%, 100% 50.37%, 101% 50.73%, 102% 51.09%, 103% 51.45%, 104% 51.80%, 105% 52.15%, 106% 52.50%, 107% 52.84%, 108% 53.17%, 109% 53.49%, 110% 53.80%, 111% 54.10%, 112% 54.39%, 113% 54.66%, 114% 54.92%, 115% 55.17%, 116% 55.41%, 117% 55.63%, 118% 55.83%, 119% 56.02%, 120% 56.20%, 121% 56.36%, 122% 56.50%, 123% 56.63%, 124% 56.74%, 125% 56.83%, 126% 56.91%, 127% 56.97%, 128% 57.01%, 129% 57.03%, 130% 57.04%, 131% 57.02%, 132% 56.99%, 133% 56.94%, 134% 56.87%, 135% 56.78%, 136% 56.68%, 137% 56.56%, 138% 56.42%, 139% 56.27%, 140% 56.10%, 141% 55.92%, 142% 55.73%, 143% 55.52%, 144% 55.30%, 145% 55.07%, 146% 54.83%, 147% 54.58%, 148% 54.32%, 149% 54.05%, 150% 53.78%, 151% 53.50%, 152% 53.21%, 153% 52.91%, 154% 52.61%, 155% 52.31%, 156% 52.00%, 157% 51.68%, 158% 51.37%, 159% 51.05%, 160% 50.72%, 161% 50.40%, 162% 50.08%, 163% 49.75%, 164% 49.43%, 165% 49.11%, 166% 48.79%, 167% 48.47%, 168% 48.16%, 169% 47.85%, 170% 47.54%, 171% 47.23%, 172% 46.93%, 173% 46.64%, 174% 46.35%, 175% 46.06%, 176% 45.78%, 177% 45.51%, 178% 45.25%, 179% 45.00%, 180% 44.75%, 180% 0%, 100% 0%);
    position: absolute;
    right: -70%;
    top: 0%;
    z-index: -4;
    width: 100vh;
    background-color: white;
    height: 100%;
}

.column-1,
.column-2 {
    width: 40%;
    height: 100vh;
}

.column-1 {
    background-color: white;
    position: relative;
    z-index: -5;
}

.form-link {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
}

    .form-link:hover {
        text-decoration: underline;
    }

@media only screen and (max-width: 1366px) {
    .login-container {
        display:block;
        width:100%;
        align-content:center;
        justify-content:center;
        padding:1.2em;
    }
    .waves{
        display:none;
    }
}
@media only screen and (min-width: 1366px) {
    .column-1::before {
        content: '';
        right: -72%;
    }
}