/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.start-container {
    height: 100vh;
    width: 100%;
    background: #f4f4f4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.login-container {
    background: white;
    padding: 32px;
    width: 448px;
    z-index: 3;
}

    .login-container small {
        margin-top: 4px;
        margin-bottom: 40px;
    }

    .login-container small > a {
       cursor:pointer;
    }

    .login-container .input-container {
        padding-top:16px;
        margin-bottom:16px;
    }

    .login-container .action-container{
        margin-bottom:24px;
    }

    .login-container .remember-me{
        margin-bottom:40px;
    }

    .login-container button{
        min-width:100%;
    }

    .login-container .forget-link {
        position: absolute;
        right: 32px;
        cursor: pointer;
    }

    .login-container .divider-40-16 {
        border-bottom: 1px solid #c3c3c3;
        margin-top: 40px;
        margin-bottom: 16px;
    }

    .login-container .divider-32-16 {
        border-bottom: 1px solid #c3c3c3;
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .login-container .bx--btn-set > .bx--btn {
        max-width: 192px;
        min-width: 192px;
    }


    .marketing-container {
        flex: 1;
    }

.marketing-image {
    background-image: url('images/Startbild.png');
    height: 60%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.top-marketing-container {
    padding: 42px;
    font-size: 16px;
    Line-height: 22px;
    font-weight: 400;
    Letter-spacing: 0px
}

    .top-marketing-container .header {
        font-size: 20px;
        Line-height: 26px;
        font-weight: 400;
        Letter-spacing: 0px
    }


.bottom-marketing-container {
    width: 460px;
    height: 300px;
    position: absolute;
    bottom: 0;
    margin: 0 42px;
}

.bottom-marketing-container iframe {
    width: 100%;
    height: 100%;
}

.contact-info-hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear;
}

.contact-info-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s linear;
}

.padding-8 {
    padding: 8px;
}

.padding-16 {
    padding: 16px;
}

.blog-title {
    text-decoration: none;
    color: black;
}

.blog-title:hover {
    color: #B0B3B8;
}

.progress-container {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-bar {
    height: 100%;
    width: 100%;
    background-color: #0f62fe;
    animation: progress-loading 2s linear infinite;
    transform: translateX(-100%);
}

@keyframes progress-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}