.divLoginBackgroundContainer:before {content:'';background-image:url(word.png);display:block;width:500px;height:92px;position:absolute;top:180px;left:50px;background-size:cover;}
.divLoginBackgroundContainer:after {content:'';background-image:url(hand.png);display:block;width:900px;height:668px;position:absolute;top:150px;left:550px;background-size:cover;}
.divLoginBackgroundContainer {flex:8;background-image:url(building-dark.png);position:relative;overflow:hidden;}
.divLoginBackgroundWrapper {display:none}
.frmLogin {flex:4;background-image:url(building-light.png);background-size:cover;position:relative;}
.frmLogin:before {content:''; background-image:url(logo.png);display:block;width:201px;height:110px;position:absolute;top:17%;left:50%;margin-left:-100px;margin-top:-82px;background-size:cover;}
.frmLogin:after {content:'For best experience, Google Chrome is recommended.\A \A www.kossan.com.my';display:block;width:100%;position:absolute;bottom:180px;text-align:center;font-size:12px;white-space:pre-wrap}
.loginBox {width:75%;}
.loginHeader {text-align:center}
.loginBodyWrapper {background-color:transparent}
.loginInput input {background-color:transparent}
.loginInputWrapper:nth-last-child(1) {justify-content:center}
.loginInputWrapper .btn {background:#cddcef;color:#444}

@media(max-width:1366px)
{
    .divLoginBackgroundContainer:before {width:350px;height:64px;}
    .divLoginBackgroundContainer:after {width:750px;height:557px;top:150px;left:395px;}
    .frmLogin:after {bottom:100px;}
}

@media(max-width:991px)
{
    .frmLogin:after {content:'For best experience, Google Chrome is recommended.\A www.kossan.com.my';bottom:0px}
}


@media(max-width:599px)
{
    .divLoginBackgroundContainer {flex:3;}
    .frmLogin {flex:4;justify-content:flex-end;padding-bottom:40px;}
    .frmLogin:before {width:150px;height:83px;margin-left:-75px;margin-top:-50px;}
    .loginBox {width:100%;margin:10px auto;}
    .divLoginBackgroundContainer:before {width:250px;height:46px;top:90px;}
    .divLoginBackgroundContainer:after {width:350px;height:260px;top:85px;left:300px;}
    .frmLogin:after {content:'For best experience, Google Chrome is recommended.\A www.kossan.com.my';bottom:0px}
}

@media(max-width:450px)
{
    .divLoginBackgroundContainer:before {width:150px;height:27px;top:90px;left:20px;}
    .divLoginBackgroundContainer:after {width:300px;height:223px;top:80px;left:170px;}
    .frmLogin:after {content:'For best experience, Google Chrome is recommended.\A www.kossan.com.my';bottom:0px}
}

@media(max-height:400px)
{
    .frmLogin:before {width:100px;height:55px;top:17%;left:50%;margin-left:-50px;margin-top:-55px;}
    .loginBox {width:90%;margin:0 auto;}
    .divLoginBackgroundContainer:before {width:200px;height:37px;top:100px;}
    .divLoginBackgroundContainer:after {width:400px;height:297px;top:85px;left:252px;}
    .loginBodyWrapper .hr30 {margin-top:10px}
    .loginInputWrapper {height:auto;}
    .loginInput input {height:18px;}
    .alert {padding:5px;}
}


@media(max-width:599px) and (max-height:779px)
{
    .divLoginBackgroundContainer {flex:2;}
    .divLoginBackgroundContainer:before { top:40px }
    .divLoginBackgroundContainer:after { top:35px }
}


@media(max-width:599px) and (max-height:669px)
{
    .divLoginBackgroundContainer {flex:1;}
    .divLoginBackgroundContainer:after { display:none }
}

@media(max-width:599px) and (max-height:599px)
{
    .divLoginBackgroundContainer {flex:0;}
    .loginBodyWrapper > .hr30 { margin-top: 10px; }
}