/*  -----------   Login box ------------ */

@media screen and (max-width: 720px) {

    .loginSection 
    {
        display:block;
        height: 100%;
        width: 100%;
        text-align:center;
    }

    .loginLogo
    {
        width: 100%;
        color: darkgray;
        text-align: left;
        padding-bottom: .5em;
        padding-top: .5em;
        background-color:#ffffff;
    }

    .loginLogo > img
    {
        z-index: 2;
        max-height: 3.75rem;
    }


    .loginWelcomeMessage 
    {
        width: 100%;
        height: 1.875em;
        background-color: #002459;
        text-align: justify;
        display:none;
    }


    .loginBoxContainer 
    {
        width: 100%;
        height: auto;
        background-image: url($background.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .loginLayoutTemplate 
    {
        display:block;
        height: 100%;
        width: 100%;
        /*font-size:1.2em;*/
    }

    .loginbox
    {
        color: #555555;
        /*margin-top: 8%;*/
        width: 20em; 
        display: inline-block;
        text-align: center;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        background: #ffffff;
        opacity: .9;
        border-radius:10px;
    }

    .loginInnerBox
    {
	    width: 100%; 
    }

    .loginMessage, .loginUsername, .loginPassword, .loginFailureText, .loginFooter
    {
        display:block;
        /*height:2em;*/
        padding-bottom:1.5em;
        padding-top:1.5em;
        vertical-align: middle;
    }

    .loginHeader 
    {
        background: none;
        display:block;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        border:0px;
        /*border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;*/
    }

    .loginHeader > span
    {
        display:block;
        text-align: center;
    }


    .loginMessage > span
    {
        display: block;
        text-align: center;
        vertical-align: middle;
        color:red;
    }


    .loginUsername, .loginPassword
    {
        text-align: left;
        vertical-align: middle;
        height:auto;
    }

    .loginUsername > *, .loginPassword > *
    {
        display: inline-block;
    }

    .loginUsername > label, .loginPassword > label
    {
        width:100%;
    }

    .loginUsername > input, .loginPassword > input
    {
        width:95%!important;
    }

    .loginUsername > span, .loginPassword > span
    {
        width:1%;
        color: #ff0000;
    }


    .loginFooter 
    {
        text-align:right;
        height:auto;
    }

    .loginFooter > .loginTerms, .loginFooter > input[type=submit]
    {
        display: inline-block;
        padding-bottom:.5em;
        padding-top:.5em;
    }

    .loginFooter > .loginTerms
    {
        width:100%;
        text-align:left;
    }

    .loginFooter > input[type=submit]
    {
        /*width: 25%;*/
        vertical-align: top;
        margin-right: 3%;
    }


    .loginForgetPassword 
    {
        display:block;
        text-align:left;
        height:2em;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
    }


    .loginLink
    {
        display:block;
        text-align:left;
        height:2em;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        border-color: #aaaaaa;
        border-style: solid;
        border-width: 1px 0 0 0;
    }


    .loginDisclaimer 
    {
        font-size: 1.3em;
        text-align: center;
        background-color: #008c99;
        padding: 1em;
        color: #ffffff;
    }

    .loginDisclaimer a, 
    .loginDisclaimer a:active, 
    .loginDisclaimer a:hover,
    .loginDisclaimer a:visited
    {
        color:#ffffff;
    }

}

@media screen and (min-width: 721px) {

    .loginSection 
    {
        display:block;
        height: 100%;
        width: 100%;
        text-align:center;
    }

    .loginLogo
    {
        width: 100%;
        color: darkgray;
        text-align: left;
        padding-bottom: .5em;
        padding-top: 15em;
        background-color: #ffffff;
    }

    .loginLogo > img
    {
        z-index: 2;
        margin-left: 5%;
    }


    .loginWelcomeMessage 
    {
        width: 100%;
        height: 1.875em;
        background-color: #002459;
        text-align: justify;
        display: none;
    }


    .loginBoxContainer 
    {
        width: 100%;
        height: 50em;
        background-image: url($background.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .loginLayoutTemplate 
    {
        display:block;
        height: 100%;
        width: 100%;
        /*font-size:1.2em;*/
    }

    .loginbox
    {
        color: #555555;
        margin-top: 4em;
        width: 36em;
        display: inline-block;
        text-align: center;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        border-radius: 10px;
    }

    .loginInnerBox
    {
	    width: 100%; 
    }

    .loginMessage, .loginUsername, .loginPassword, .loginFailureText, .loginFooter
    {
        display:block;
        /*height:2em;*/
        padding-bottom:1.5em;
        padding-top:1.5em;
        vertical-align: middle;
    }

    .loginHeader 
    {
        background: none;
        border:0px;
        display:block;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        /*border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;*/
    }

    .loginHeader > span
    {
        display:block;
        text-align: center;
        font-size:1.3em;
    }


    .loginMessage > span
    {
        display: block;
        text-align: center;
        vertical-align: middle;
        color:red;
    }


    .loginUsername, .loginPassword
    {
        text-align: left;
        vertical-align: middle;
    }

    .loginUsername > *, .loginPassword > *
    {
        display: inline-block;
    }

    .loginUsername > label, .loginPassword > label
    {
        width:25%;
    }

    .loginUsername > input, .loginPassword > input
    {
        width:70%!important;
    }

    .loginUsername > span, .loginPassword > span
    {
        width:1%;
        color: #ff0000;
    }


    .loginFooter 
    {
        text-align:right;
    }

    .loginFooter > .loginTerms, .loginFooter > input[type=submit]
    {
        display: inline-block;
    }

    .loginFooter > .loginTerms
    {
        width:72%;
        text-align:left;
        float:left;
    }

    .loginFooter > input[type=submit]
    {
        margin-right: 3%;
        vertical-align: top;
    }


    .loginForgetPassword 
    {
        display:block;
        text-align:left;
        height:2em;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
    }


    .loginLink
    {
        display:block;
        text-align:left;
        height:2em;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        border-color: #aaaaaa;
        border-style: solid;
        border-width: 1px 0 0 0;
    }


    .loginDisclaimer 
    {
        font-size: 1.3em;
        text-align: center;
        background-color: #008c99;
        padding: 3em 0em;
        width: 100%;
        color: #ffffff;
    }

    .loginDisclaimer a, 
    .loginDisclaimer a:active, 
    .loginDisclaimer a:hover,
    .loginDisclaimer a:visited
    {
        color:#ffffff;
    }

}

/*----------- End of Login Box ----------*/




/*  -----------   Reset Login Box ------------ */

@media screen and (max-width: 720px) {
    
    .resetLoginLayoutTemplate 
    {
        display:block;
        height: 100%;
        width: 100%;
        /*font-size:1.2em;*/
    }

    .resetLoginBox
    {
        color: #555555;
        /*margin-top: 8%;*/
        width: 20em; 
        display: inline-block;
        text-align: center;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        background: #ffffff;
        opacity: .9;
        border-radius:10px;
    }

    .resetLoginInnerBox
    {
	    width: 100%; 
    }

    .resetLoginMessage, .resetLoginRadioButtons, .resetLoginUsername, .resetLoginEmail, .resetLoginFailureText, .resetLoginFooter
    {
        display:block;
        /*height:2em;*/
        padding-bottom:1.5em;
        padding-top:1.5em;
        vertical-align: middle;
    }


    .resetLoginHeader 
    {
        background: none;
        display:block;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        border:0px;
        /*border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;*/
    }

    .resetLoginHeader > span
    {
        display:block;
        text-align: center;
    }


    .resetLoginMessage > span
    {
        display: block;
        text-align: center;
        vertical-align: middle;
        color:red;
    }


    .resetLoginUsername, .resetLoginEmail
    {
        text-align: left;
        vertical-align: middle;
        height:auto;
    }

    .resetLoginUsername > *, .resetLoginEmail > *
    {
        display: inline-block;
    }

    .resetLoginUsername > label, .resetLoginEmail > label
    {
        width:100%;
    }

    .resetLoginUsername > input, .resetLoginEmail > input
    {
        width:95%!important;
    }

    .resetLoginUsername > span, .resetLoginEmail > span
    {
        width:1%;
        color: #ff0000;
    }

    .resetLoginEmailValidator 
    {
        color: Red;
        width: 100%!important;
    }

    .resetLoginFooter 
    {
        text-align:right;
        height:auto;
    }

    .resetLoginFooter > .resetLoginTerms, .resetLoginFooter > input[type=submit]
    {
        display: inline-block;
        padding-bottom:.5em;
        padding-top:.5em;
    }

    .resetLoginFooter > .resetLoginTerms
    {
        width:100%;
        text-align:left;
    }

    .resetLoginFooter > input[type=submit]
    {
        /*width: 25%;*/
        vertical-align: top;
        margin-right: 3%;
    }

    .resetLoginDisclaimer 
    {
        font-size: 1.3em;
        text-align: center;
        background-color: #008c99;
        padding: 1em;
        /* width: 100%; */
        background-color: #002459;
        color: #ffffff;
        /* height: 30%; */
    }

    .resetLoginDisclaimer a, 
    .resetLoginDisclaimer a:active, 
    .resetLoginDisclaimer a:hover,
    .resetLoginDisclaimer a:visited
    {
        color:#ffffff;
    }

}

@media screen and (min-width: 721px) {

    .resetLoginLayoutTemplate 
    {
        display:block;
        height: 100%;
        width: 100%;
        /*font-size:1.2em;*/
    }

    .resetLoginBox
    {
        color: #555555;
        margin-top: 4em;
        width: 36em;
        display: inline-block;
        text-align: center;
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2em;
        border-radius:10px;
    }

    .resetLoginInnerBox
    {
	    width: 100%; 
    }

    .resetLoginMessage, .resetLoginRadioButtons, .resetLoginUsername, .resetLoginEmail, .resetLoginFailureText, .resetLoginFooter
    {
        display:block;
        /*height:2em;*/
        padding-bottom:1.5em;
        padding-top:1.5em;
        vertical-align: middle;
    }

    .resetLoginHeader 
    {
        background: none;
        border:0px;
        display:block;
        padding-bottom:.5em;
        padding-top:.5em;
        vertical-align: middle;
        /*border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;*/
    }

    .resetLoginHeader > span
    {
        display:block;
        text-align: center;
        font-size:1.3em;
    }


    .resetLoginMessage > span
    {
        display: block;
        text-align: center;
        vertical-align: middle;
        color:red;
    }


    .resetLoginUsername, .resetLoginEmail
    {
        text-align: left;
        vertical-align: middle;
    }

    .resetLoginUsername > *, .resetLoginEmail > *
    {
        display: inline-block;
    }

    .resetLoginUsername > label, .resetLoginEmail > label
    {
        width:25%;
    }

    .resetLoginUsername > input, .resetLoginEmail > input
    {
        width:70%!important;
    }

    .resetLoginUsername > span, .resetLoginEmail > span
    {
        width:1%;
        color: #ff0000;
    }

    .resetLoginEmailValidator 
    {
        color: Red;
        width: 100%!important;
        margin-left: 26%;
    }

    .resetLoginFooter 
    {
        text-align:right;
    }

    .resetLoginFooter > .resetLoginTerms, .resetLoginFooter > input[type=submit]
    {
        display: inline-block;
    }

    .resetLoginFooter > .resetLoginTerms
    {
        width:72%;
        text-align:left;
        float:left;
    }

    .resetLoginFooter > input[type=submit]
    {
        margin-right: 3%;
        vertical-align: top;
    }


    .resetLoginDisclaimer 
    {
        font-size: 1.3em;
        text-align: center;
        background-color: #008c99;
        padding: 3em 0em;
        width: 100%;
        background-color: #002459;
        color: #ffffff;
    }

    .resetLoginDisclaimer a, 
    .resetLoginDisclaimer a:active, 
    .resetLoginDisclaimer a:hover,
    .resetLoginDisclaimer a:visited
    {
        color:#ffffff;
    }

}

/*----------- End of Reset Login Box ----------*/