body {
}

button {
    font-family: inherit;
    color: #000000 ;
    font-size: 14px;
    padding: 10px 21px;
    border-radius: 0px;
    border: none;
    background: #FCB07E;
    transition:.2s;
}
    button:hover {
        cursor: pointer;
        background: #FFC999;
    }

.darkbackgroundcolor {
    background: #FCB07E;
}
.lightbackgroundcolor {
    background: #FFC999
}
.leftborder{
    border-top-left-radius:4px;
}
.largecard {
    min-width: 400px;
    margin-left: 50px;
    padding: 0px;
    transition: .2s;
}
.formscontainer {
    padding: 10px;

}

#heading{
    margin-top:30px;
    text-align:center;
}

.login {

    padding:50px;
    padding-top:10px;
}

label{
    margin-bottom:10px;
}
.passwordcontainer{
    margin-top:15px;
}


.buttoncontainer{
  
    display:flex;
    justify-content:center;
}


.logincontainer{
    display:flex;
    justify-content:center;
    align-items:center;
    height:90vh;
    transition:.2s;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .logincontainer
    {
        flex-direction:column;
    }
    .largecard{
        margin-left:0px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .logincontainer {
        flex-direction: column;
    }

    .largecard {
        margin-left: 0px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .logincontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction:row;
        height: 90vh;
        transition: .2s;
    }
    .largecard {
        margin-left: 50px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}