body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: center;
    /*position:relative;*/
    overflow-y: hidden;
    /*
	PSD COLOURS - b1f93f
	0abcef
	*/
}

body {
    /*background: url(../images/ggl-png-burner-ls-1.jpg) no-repeat center center fixed;*/
    background: url(../images/iocl_background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
background-position:top;
}

.lables {
    font-weight: bold;
    display: inline-block;
    font-size: 12px;
}


/*------------------------------------NEW------------------------------------*/

/*#box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height:80%;
    width:80%;
    background-color:#fff;
    -webkit-box-shadow: 0px 3px 17px -3px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 3px 17px -3px rgba(50, 50, 50, 1);
box-shadow:         0px 3px 17px -3px rgba(50, 50, 50, 1);
text-align:center;
}*/


#loginbox {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    height: auto;
    /*width:auto;*/
    width: 400px;
    margin: 0 auto;
}



#defaultloginbox {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    height: auto;
    /*width:auto;*/
    width: 450px;
    margin: 0 auto;
}


/*------------------------------------NEW------------------------------------*/

p {
    font-size: 18px;
    /*font-size:3vh;*/
    color: #fff;
    font-family: Roboto, sans-serif;
    line-height: 30px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-weight: 300;
    width: auto;
    font-style: italic;
}






.logintable {
    width: 100%;
    margin: auto;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    /* border: 1px solid #034999; */
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.1);
}

.defaultlogintable {
    width: 100%;
    height: 150px;
    margin: auto;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    /* border: 1px solid #034999; */
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.1);
}

.box {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    width:90%;
    /*width: 80%;*/
    text-align: justify;
    margin: 5px auto;
    padding: 0px;
}

.passshowhidebutton {
    float: right;
    margin-top: 12px;
    margin-right: 10px;
    background: #ffffff;
    border: none;
    padding: 2px;
    outline-style: none;
    cursor: pointer;
}

.logintextbox {
    height: 40px;
    line-height: 40px;
    /*width: 80%;*/
    width: 70%;
    border: none;
    padding-left: 10px;
    /*margin-top: 13px;*/
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    /*border-radius: 4px;*/
    background-color: rgba(255, 255, 255, 1);
    outline-style: none;
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
}

    .logintextbox:focus {
        background-color: rgba(255, 255, 255, 1);
    }

.loginbluebutton {
    background: #03a2e3;
    color: #fff;
    border: none;
    height: 40px;
    border-radius: 50px;
    padding: 0 30px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    -webkit-box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    -moz-box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    /*margin-top:30px;*/
    margin-top: 20px;
    margin-bottom: 10px;
    outline-style: none;
}

.loginbluebutton {
    background: #03a2e3;
    color: #fff;
    border: none;
    height: 30px;
    border-radius: 50px;
    padding: 0 30px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    -webkit-box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    -moz-box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    box-shadow: 0px 6px 10px -4px rgba(0,0,0,0.73);
    /* margin-top: 30px; */
    margin-top: 4px;
    margin-bottom: 4px;
    outline-style: none;
}

    .loginbluebutton:hover {
        background-color: #0065b3;
        color: #fff;
    }



    .loginbluebutton:active {
        -webkit-box-shadow: 0px 6px 2px -4px rgba(0,0,0,0.73);
        -moz-box-shadow: 0px 6px 2px -4px rgba(0,0,0,0.73);
        box-shadow: 0px 6px 2px -4px rgba(0,0,0,0.73);
        position: relative;
        top: 1px;
    }

    .loginbluebutton:focus {
        background-color: #0065b3;
        color: #fff;
    }

.note {
    font-size: 12px;
    font-style: italic;
    color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    padding: 3px 17px;
    border-radius: 20px;
}

.loginlogo {
    /*height:200px;*/
    height: 130px;
}

@media screen and (max-width:500px) {
    #loginbox {
        position: absolute;
        top: auto;
        left: auto;
        transform: none;
        ;
        height: auto;
        width: 100%;
        /*margin:50px auto;*/
        margin: 0px auto;
    }

    .loginlogo {
        /*width:80%;*/
        width: 50%;
        height: auto;
    }

    /*.box2 {
        width: 44% !important;
        margin-left: 10% !important;
    }

    .refreshcaptcha {
        margin-left: 4px !important;
    }

    .captchaimage {
        width: 49% !important;
    }*/
}

/*@media screen and (max-width:400px) {
    .box2 {
        width: 42% !important;
        margin-left: 35px !important;
    }

    .refreshcaptcha {
        margin-left: 2px !important;
    }

    .captchaimage {
        width:52% !important;
    }*/




/* ===== Footer ===== */
footer.app-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    padding: 10px 14px;
    text-align: center;
    font-size: 14px; 
    line-height: 1.5;
    background: #0A2142; 
    color: #E6EDF6;
    z-index: 50; 
}
 
    footer.app-footer a {
        color: #FFD36E;
        text-decoration: none;
    }
 
        footer.app-footer a:hover {
            text-decoration: underline;
        }
 
body {
    padding-bottom: 56px;
}
 
 
/* Footer Contact Us*/
footer.app-footer a.contact-link {
    color: #FFD36E !important;
}
 
 
    /* white card */
    #contactusmodal .contact-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
    }
.ui-widget-overlay {
    z-index: 1100 !important;
}
 
.ui-dialog {
    z-index: 1110 !important;
    border-radius: 10px;
}
footer.app-footer a.bottomlink {
    color: #0d6efd !important;
}