html, body {
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
}

body {
    font-size: 16px;
    justify-content: center;
    align-items: center;
}

header{
    background-color:#FFFFFF;
    align-items: center;
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100px;
    align-items: center;
    box-shadow: -3px 2px 5px 1px rgba(0,0,0,0.47);
}

input{
    width: 100%;
    outline: none;
    border:1px solid #87D8B3;
    background-color: #EBEBEB;
    border-radius: 20px;
    width: 100%;
    min-height: 40px;
    color:#444 ;
    padding-left: 40px;
}

header.header .logo{
    justify-content: center;
    align-items: center;
    width: 262px;
    margin: 20px;
}

main{
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 100px;
    border: solid 1px #c9c9c9;
    background-image: url("/images/background02.jpg");
    background-size: cover;
}


.login-card{
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 100%;
    box-shadow: 3px -2px 14px 5px rgba(0, 0, 0, 0.2);
}

.login-card .card-header{
    border: none;
}
.login-card .card-header > h2 {
    font-family: Montserrat;
}

.login-card .form-group{
    /* display: flex; */
    width: 100%;
    margin-bottom: 15px;
    max-height: 48px;
}

.login-card .card-footer{
    border: none;
}


.card .card-body .form-group i{
    padding: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #87D8B3;
    position: absolute;
    left: 3;
}

.login-card .card-body .form-group .text-area{
    color:#444 ;
    padding-left: 40px;
}

.login-card .card-body .form-group .pass-area{
    color: #444;
    padding-left: 40px;
}

.login-card .card-footer{
    display: flex;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 100%;
    min-width: 40px;
}


.button-sbmt{
    background-color: #87D8B3;
    border: none;
}

.button-secondary{
    background-color: #444;
    border: none;
    border-radius: 40px;
    height: 40px;
    width: 100%;
}

.login-card .card-footer .forgotpass{
    text-decoration: underline;
    color:#87D8B3;
    align-self: flex-start;
    font-style: italic;
}

.contact{
    padding-top: 10px;
}

.contact .unid{
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.contact h4, .contact p{
    text-align: center;
}

.contact .unid h4 {
    font-size: small;
}
.contact .unid p{
    font-weight: 600;
    font-size: x-small;
    margin-bottom: 5px;
}

.email{
    /* text-decoration: underline; */
}


footer.footer {
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    background-color: #FFFFFF;

    padding: 10px;
}

footer.footer > span{
    font-size: small;
}

::-webkit-input-placeholder {
    color:#87D8B3;
 }

#test2 {
    height: 50% !important;
}
div.bmd-form-group {
    padding-top: 0;
}


@media (min-width:320px) {
    #test2 {
        height: 50% !important;
    }
}

@media (min-width:480px) {
    #test2 {
        height: 54% !important;
    }
}

@media (min-width:600px) {
    #test2 {
        height: 63% !important;
    }
}

@media (min-width:801px) {
    #test2 {
        height: 63% !important;
    }
}

@media (min-width:1025px) {
    #test2 {
        height: 63% !important;
    }
}

@media (min-width:1367px) {
    #test2 {
        height: 65% !important;
    }
}

@media (min-width:1800px) {
    #test2 {
        height: 70% !important;
    }
}