.login-container{
    $width: 480px;
    $breakpoint: 800px;
    background-color: white;
    height: 100%;
/*
    @media(max-width: $width) {
        padding: 0;
    }

    @media(min-width: $width) {
        padding: 1rem;
    }*/

    .logincard, .row, .logincard-left, .logincard-right{
        height: 100%;
    }

    .logincard{
        margin: auto;
        background-color: white;
        border-radius: 1rem;
        width: 100%;
        margin: auto;

        .logincard-left{
            padding: 4rem;
            text-align: center;
            margin: auto;

            @media(max-width: $breakpoint) {
                display: none; 
            }

            .version-label{
                font-size: 0.9rem;
                font-weight: 600;
                background-color: #ffff5e;
                padding: 0.25rem 0.8rem;
                border-radius: 0.2rem;
            }

            img{
                width: 100%;
                max-width: 600px;           
            }
        }

        .logincard-right{   
  
            background-color: rgb(223, 247, 255);

            @media(min-width: $breakpoint) {
                max-width: $width;
                width: $width;
                padding: 4rem;
            }

            .form-control{
                //background-color: rgb(129, 129, 129);
                border-radius: 0.25rem;
            }
            button{
                border-radius: 0.25rem;
                padding: 0.5rem;

                &:hover {
                    background-color: lighten($primary-color, 10);
                  }
            }
        }

    }
}

