body {
    background: #F5F5F5;
}

.main-page {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #FFF;
}

.partner-banner {
    display: flex;
    padding: 32px;
    width: 70%;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

    .partner-banner img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        object-fit: contain;
    }

.validation-summary-errors ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.validation-summary-errors {
    width: 100%;
    background: #F65063;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

.validation-summary-succes ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.validation-summary-succes {
    width: 100%;
    background: #007B84;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

.login {
    display: flex;
    padding: 24px 20px;
    align-self: stretch;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    background: #222222;
    box-shadow: 20px 0px 30.8px -23px rgba(0, 0, 0, 0.25) inset;
    min-width: 540px;
}

.price-safari {
    display: flex;
    height: 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

    .price-safari img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        object-fit: contain;
    }

.login-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 85%;
    max-width: 500px;
    gap: 10px;
    align-self: center;
}

.login-box-head {
    display: flex;
    gap: 4px;
    align-self: stretch;
    flex-direction: column;
    margin-bottom: 16px;
}

.login-box-title {
    color: rgba(255, 255, 255, 1);
    font-size: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 100;
    text-shadow: 0px 4.986px 4.986px rgba(0, 0, 0, 0.25);
}

.form-floating {
    display: flex;
    align-self: stretch;
    flex: 1;
    border: none;
    flex-direction: column;
}

    .form-floating .form-control {
        height: calc(2.8rem + 2px) !important;
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
        background-color: #FFFFFF;
        border: none;
    }

    .form-floating > label {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        font-size: 0.75rem;
        transform: scale(0.85) translateY(-0.30rem) translateX(0.15rem);
    }

.other-function {
    display: flex;
    padding: 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.form-control:focus {
    outline: none;
    border: 2px solid #41C7C7;
    background-color: #FFFFFF;
    box-shadow: none;
    transition: none;
}

.form-check-input {
    background-color: #FFFFFF;
    outline: none;
    box-shadow: none;
    border: 1px solid #FFFFFF;
}

    .form-check-input:focus {
        outline: none;
        box-shadow: none;
    }

    .form-check-input:checked {
        outline: none;
        border: 1px solid #41C7C7;
        background-color: #41C7C7;
        box-shadow: none;
    }

.checkbox {
    color: #fff;
}

    .checkbox:hover {
        color: #41C7C7;
    }

.checkbox-blank {
    color: #fff;
}

.form-label {
    margin: 0px;
}

.login-button {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 34px;
    border: 2px solid rgba(6, 6, 6, 0.92);
    background: rgba(6, 6, 6, 0.6);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    width: 100%;
    margin-top: 12px;
    transition: box-shadow 0.2s ease;
    text-decoration: none;
}

    .login-button:hover {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: rgba(6, 6, 6, 0.7);
        text-decoration: none;
        color: #fff;
    }

.links {
    color: #fff;
    text-decoration: none;
}

    .links:hover {
        color: #41C7C7;
    }

.links-underline {
    color: #fff !important;
}

    .links-underline:hover {
        color: #41C7C7 !important;
    }

.Main-Text {
    display: flex;
    margin-TOP: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    flex-direction: column;
    flex-wrap: wrap;
}

.Main-button {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 34px;
    border: 2px solid rgba(6, 6, 6, 0.92);
    background: rgba(6, 6, 6, 0.6);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    width: 100%;
    margin-top: 12px;
    transition: box-shadow 0.2s ease;
    text-decoration: none;
}

    .Main-button:hover {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: rgba(6, 6, 6, 0.8);
        text-decoration: none;
        color: #fff;
    }

.Join-button {
    display: inline-flex;
    width: 200px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 2px solid rgba(6, 6, 6, 0.92);
    background: rgba(6, 6, 6, 0.6);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    margin-top: 36px;
    transition: box-shadow 0.3s ease;
    text-decoration: none;
}

    .Join-button:hover {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        text-decoration: none;
        color: #fff;
    }

.Vert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
}

@media (max-width: 1360px) {

    .main-page {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        background: #151515;
    }

    .login {
        order: 1;
        width: 100%;
        min-width: auto;
        flex: none;
        padding: 40px 20px;
        box-shadow: none;
        height: 940px;
    }

    .login-box {
        width: 100%;
        padding: 0 10px;
    }

    .login-box-title {
        font-size: 32px;
    }
}