html {
    height:100%;

}

body {
    margin: 0px;
    height: 100%;
}
header {
    height:100px;
}

footer {
    height: 60px;
    width: 100%;
    /*background-color: #313131;*/
    position: absolute;
    bottom: 0;
    background: rgba(48,48,48,1);
    background: -moz-linear-gradient(left, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 84%, rgba(77,77,77,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(48,48,48,1)), color-stop(84%, rgba(77,77,77,1)), color-stop(100%, rgba(77,77,77,1)));
    background: -webkit-linear-gradient(left, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 84%, rgba(77,77,77,1) 100%);
    background: -o-linear-gradient(left, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 84%, rgba(77,77,77,1) 100%);
    background: -ms-linear-gradient(left, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 84%, rgba(77,77,77,1) 100%);
    background: linear-gradient(to right, rgba(48,48,48,1) 0%, rgba(77,77,77,1) 84%, rgba(77,77,77,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#4d4d4d', GradientType=1 );
}

#content {
    height:100%;
}
.card {
    width: 430px;
    height: 60%;
    max-height:490px;
    border-radius: 10px;
    margin: 0px auto;
    padding: 0px;
    padding-bottom: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative !important;

}

.frmMedium {
    width: 100%;
    height: 50%;
    margin: 0px;
    border-radius: 10px 10px 0px 0px;
    background-color: #498de1;

}
.frmFooter {
    padding: 10px;
    height: 40%;
    width: 50%;
    position: absolute;
    bottom: 0;
    justify-content: center;
    align-items: center;
    position:center !important;
    left: 26% !important;
}

.image-login {
    padding: 10px;
    background-size: 80% 80%;
}

#imgVTSoft {
    border-radius:10px;
    width:90px;
    height:30px;
}

#aVTLink {
    font-family: Calibri, Eras Medium ITC, Verdana, Sans-Serif;
    color: white;
    font-size:12pt;
}

#btnLogin {
    font-size: 12pt;
    background-color: #498de1 !important;
    color: white;
    width: 150px;
    height: 30px !important;
    display: inline !important;
    border-color: #498de1;
    border-radius: 5px;
    border: none;
}

#middle {
    background:url("../img/Distributor-report-icon.png");
    background-size:cover;
    height:50%;
    width:50%;
    display:block;
    top:10%;
    left:25%;
    position:absolute;
}



@media (max-width: 600px) {
    .card {
        width: 285px;
        height: 60%;
    }

    #middle {
        height: 156px;
        width: 55%;
        top:5%;
    }

    .frmFooter {
        padding: 3px;
        top:50%;
    }

    #btnLogin {
        width: 132px;
    }
}
@media (max-height: 700px) {
    .card {
        width: 285px;
        height: 60%;
    }

    #middle {
        height: 156px;
        width: 55%;
        top: 5%;
    }

    .frmFooter {
        padding: 1px;
        top: 50%;
    }

    #btnLogin {
        width: 132px;
    }
}