.episerver-login {
    margin: 0;
    overflow: hidden;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.top-bar {
    background: #1456f1;
    padding: 14px 0 5px;
    text-align: center;
}

    .top-bar .logo {
        height: 30px;
        width: auto;
    }

.login-wrapper {
    background-origin: center center;
    background-size: cover;
    height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    justify-content: center;
    align-items: center;
}

    .login-wrapper.img {
        background-image: url('images/Pictures_Page_1-min.jpg');
    }

.modal {
    background: rgba(255, 255, 255, 0.5);
    max-width: 50%;
    padding: 32px 20px;
    width: 500px;
    -webkit-animation: modalGrow 0.15s 0.5s ease-out both;
    animation: modalGrow 0.15s 0.5s ease-out both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

    .modal ol {
        display: block;
        list-style: none;
        margin: 0 auto;
        padding: 0;
        max-width: 325px;
        width: auto;
    }

        .modal ol li {
            margin-bottom: 15px;
            text-align: center;
        }

        .modal ol label {
            display: block;
            font-size: 14px;
            text-align: left;
            margin-bottom: 4px;
        }

        .modal ol input {
            box-sizing: border-box;
            font-size: 16px;
            padding: 10px;
            width: 100%;
        }

            .modal ol input[type='text'],
            .modal ol input[type='password'] {
                background: #ffffff;
                border: 1px solid #818181;
                border-radius: 2px;
                color: #01062b;
                outline: none;
                transition: all 0.2s ease-in-out;
            }

            .modal ol input[type='submit'] {
                background: #1456f1;
                border: 0 solid;
                border-radius: 2px;
                color: #fff;
                cursor: pointer;
            }

    .modal .logo {
        display: block;
        margin-bottom: 20px;
        width: 100%;
    }

.text--error {
    color: #f44336;
    font-weight: normal;
}

.setup .modal {
    max-width: unset;
    width: 50%;
    display: flex;
}

    .setup .modal ol {
        width: 50%;
    }

.description {
    margin-bottom: 10px;
    width: 50%;
}

    .description .title {
        font-size: 24px;
        margin-bottom: 10px;
    }

@media only screen and (max-width: 1023px) {
    .setup .modal {
        flex-direction: column;
    }

        .description,
        .setup .modal ol {
            width: 100%;
        }
}

.separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.separator:before, .separator:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background-color: #ccc;
}

.separator:before {
    left: 0;
}

.separator:after {
    right: 0;
}

.separator span {
    background-color: white;
    padding: 0 10px;
    color: #666;
    font-size: 14px;
}

.Button--azure {
    background-color: #1557f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.Button--azure:hover {
    background-color: #1456f1;
    color: white;
    text-decoration: none;
}

.azure-icon {
    height: 20px;
    margin-right: 10px;
}

.unauthorized-message {
    text-align: center;
    padding: 30px;
}

.unauthorized-message h2 {
    color: #d32f2f;
    margin-bottom: 20px;
}

.unauthorized-message p {
    margin-bottom: 20px;
    color: #666;
}
.warning-message {
    color: #ff6b6b;
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    font-weight: bold;
    background-color: #fff3f3;
    padding: 10px;
    border-radius: 4px;
}