:root {
    --colorTheme: #F48326;  
}

input {
    color: #686868 !important;
} 

button {
    padding: 10px 16px !important;
    font-size: 18px !important;
    line-height: 1.3333333 !important;
    font-family: 'Lato', sans-serif; 
}

label {
    color: #FFF;
    font-size: 16px;
}

input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-bottom: 4px;
    vertical-align: middle;
}

.button.default {
    background-color: #ffffff;
    color: #0a0a0a;
}

body {
    background-image: url('/Asset/BMDPSINGAPORE/Image/BMDPimg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; 
}

#container-prelogin {
    margin-top: 10%;
    margin-bottom: 10%;
}

#dropdown-language {
    font-size: 18px;
    cursor: pointer;
    color: #706F6F;
}

#dropdown-language:hover {
    color: #3b3b3b;
}
     
#container-header-prelogin {
    background: url('/Asset/SG/Image/logo.png') no-repeat center;
    background-color: #999;
}

#container-header-content-dummy {
    width: 177px;
    height: 122px;
}

#container-content-prelogin {  
    background-color: #B8D734;
    padding: 50px;
}

#container-language {
    background-color: #706f6f;
    color: #fff;
    border: 1px solid #595959;
    width: auto;
    padding: 0;
}

#container-language > ul {
    margin: 0;
}

#container-language > ul > li {
    border-bottom: 1px solid #595959;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

#container-language > ul > li:last-child {
    border-bottom: none;
}

#container-language > ul > li > img {
    height: 25px;
}

.container-content-prelogin-title {
    color: var(--colorTheme);
    font-size: 36px;
    margin-bottom: 21px;
}

.white-text {
    color: #ffffff;
}

    .white-text:hover {
        color: #ffffff;
    }

.container-content-prelogin-instruction {
    color: var(--colorTheme);
    font-size: 18px;
    margin: 0;
    margin-bottom: 21px;
}

#container-content-prelogin-buildversion {
    margin-top: 10px;
    color: #686868;
    font-size: 12px;
}


/**************** CUSTOM ****************/

input[type=text], input[type=password] {
    width: 100%;
    padding: 13px 20px;
    margin: 5px 0;
    display: inline-block;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #3A3A3A;
    border: 1px solid var(--colorTheme);
}

[type='text']:focus, [type='password']:focus {
    outline: none;
    border: 1px solid var(--colorTheme);
    background-color: white !important; 
}

.clearfix { 
    margin-right:5% !important;
}

.clearfix i {
    font-size:25px; 
}

.fontText {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #3A3A3A;
    text-decoration: none;
}

.copyright {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    line-height: 1 !important;
}

/* BOTTOM */

.bottom {
    display: block;
    position: relative;
    margin-top: 0%;
    margin-left: 0%;
}

.boxCopyright {
    padding-top: 0%;
    padding-bottom: 1%;
}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    margin-top: -5%;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 1;
    background-color:var(--colorTheme);
}

    .dropdown-content a {
        color: #FFFFFF;
        padding: 10% 10%;
        text-decoration: none;
        display: block;
        text-align: left;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 16px;
        background-color: var(--colorTheme);
    }

        .dropdown-content a:hover {
            color: #3A3A3A;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.loginTextbox {
    border: 1px solid var(--colorTheme);
}

.buttonStyle1 {
    background-color: var(--colorTheme) !important;
    color: white !important;
    border-radius: 10px !important;
    margin-top: 7px !important;
    line-height: 1 !important;
}

.container {
    background-color: white;
    padding: 20px;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 10px;
}

.backToLogin {
    color: black;
    font-size: large;
}

.logoImage {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

.errorMsgStyle1 {
    width: 50% !important;
    margin:0 auto !important;
    color:red !important; 
}

.themeLabel {
    color:var(--colorTheme);
}


/********************************/

/* RESPONSIVE */

/* SCREEN 1920PX */
@media screen and (min-width: 1920px){
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    } 
}

/* SCREEN 1536PX */
@media screen and (min-width: 1536px){ 
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    }
}

/*IPAD / TABLET 1024px */
@media screen and (max-width: 1024px) { 
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    }
}

/*IPAD / TABLET 768 PX */
@media screen and (max-width: 768px) { 
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    }
}


/*MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE PORTRAIT*/
@media screen and (max-width: 600px) {
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    }
}

/*MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE MOBILE DEVICE PORTRAIT IPHONE X*/
@media screen and (max-width: 375px) {
    .containerFirstTime, .containerForgotUsername, .containerForgotPassword, .containerVerification, 
    .containerResetPassword, .containerNewDonor{
            width: 80%;
    }
}