body { padding: 0px; margin: 0px; }
.content { position: absolute; display: block; top: 0px; 
z-index: 99999; width: 360px; margin: 0 auto;
    
}
.content-container { width: 28%; margin: 0 auto; }
.logo img { width: 100%; }
.login .wrapper {
    background: url("../images/bg-white-lock.png") repeat;
    width: 360px;
    margin: 0 auto;
    margin-bottom: 0px;
    padding: 15px;
}
.content label { color: #fff; }
h3, .h3 { font-size: 24px; }
.login .content h3 { color: #eee; }
.login .content .form-control { background-color: #fff; border-radius: 0px; }
.input-icon input { padding-left: 33px !important; border-radius: 0px; }
#mobile {
    background: #fff url("../images/phone.jpg") left 4% top 43% no-repeat;
}
#password {
    background: #fff url("../images/password.jpg") left 4% top 43% no-repeat;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-weight: 300 !important; }
label { font-weight: 400; }
.logo { margin: 15px 0px; }
.btn.blue { color: white; text-shadow: none; background-color: #4d90fe; }
.login .content .form-actions .btn { margin-top: 1px; border-radius: 0px; height: 35px; }
.blue {
    background: url("../images/arrow.png") right 5% top 48% no-repeat;
    padding-right: 22px;
}
.form-title { margin-bottom: 19px; }
.login .content h4 { color: #eee; }
.login .content p, .login .content label { color: #fff; font-size: 13px; margin-bottom: 30px; }
a { text-shadow: none !important; color: #0d638f; }
.login .content .forget-password { margin-top: 118px; }
.form-control { height: 30px; }
.copyright { text-align: center; margin: 0 auto; padding: 10px; color: #eee; font-size: 12px; }
.grey {
    background: #e8e8e8 url("../images/sign-up-icon.png") top 42% left 9% no-repeat;
    padding-left: 25px;
}
#email {
    background: #fff url("../images/email.png") left 4% top 43% no-repeat;
}
#password2 {
    background: #fff url("../images/password.png") left 4% top 43% no-repeat;
}
#re-Password {
    background: #fff url("../images/password.png") left 4% top 43% no-repeat;
} div.checker input { }
.form-title span { font-size: 14px; }
.checker { float: left; padding-right: 6px; }
.back {
    background: #e8e8e8 url("../images/back.png") top 48% left 12% no-repeat;
} @media (max-width:360px) {
.login .wrapper { width: 100% !important; }
}
 @media (min-width:320px) and (max-width:600px) {
.content { width: 93% !important; }
.content-container { margin: 0px auto; width: 93% !important; }
}
 @media (min-width:640px) and (max-width:800px) {
.content-container { width: 50%; margin: 0px auto; }
}
 @media (min-width:480px) and (max-width:600px) {
.login .wrapper { width: 80% !important; }
.logo { margin: 15px 0px; width: 100%; text-align: center; }
}
.clear { clear: both; }

/************************************************************************************
GENERAL
*************************************************************************************/
body { font-family: Arial, Helvetica, sans-serif; color: #666; padding: 0px; margin: 0px; font-size: 13px; }
a { text-decoration: none; color: #39C; }
h1, h2 { line-height: 120%; margin: 0 0 10px; color: #000; }
header { content: " "; display: table; width: 100%; }
/************************************************************************************
STRUCTURE
*************************************************************************************/
.container { width: 1150px; margin: 0 auto; }
#pagewrap { width: 90%; max-width: 100%; margin: 0 auto; background-color: #FDFDFD; border: 1px solid #ECEBEB; padding: 1%; }
#container-fluid { background-color: #ECEBEB; height: 35px; }
#content { clear: both; border-top: solid 1px #ccc; padding-top: 20px; margin: 20px 0; }
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap { }
/* menu icon */
#menu-icon { display: none; /* hide menu icon initially */ }
#nav, #nav li { margin: 0; padding: 0; }
#nav li { list-style: none; float: left; }
/* nav link */
#nav a { padding: 11px 15px; display: block; color: #224D61; border-right: 1px solid #E0E0E0; text-transform: uppercase; font-size: 12px; }
#nav a:hover { background: #224D61; color: #fff; }
/* nav dropdown */
#nav ul { background: #ECEBEB; padding: 2px; position: absolute; border: solid 1px #ccc; display: none; /* hide dropdown */ width: 200px; }
#nav ul li { float: none; margin: 0; padding: 0; }
#nav li:hover > ul { display: block; /* show dropdown on hover */ }

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {
	.form-wrapper table td
	{
		width:100% !important;
		display:table;
	}
	.form-wrapper table td input {
    width: 100% !important;
    float: left !important;
}
.form-wrapper table td select {
    width: 100% !important;
    float: left !important;
}
	#submit {
    width: 100%;
	}
	.container
{
	width:100%;
}
/* nav-wrap */
#nav-wrap { position: relative; }
/* menu icon */
    #menu-icon {
        color: #000;
        width: 100%;
        height: 30px;
        background: #ecebeb url("../images/menu-icon.png") no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block; /* show menu icon */
    } #menu-icon:hover { background-color: #f8f8f8; }
#menu-icon.active { background-color: #bbb; }
/* main nav */
#nav { clear: both; position: absolute; top: 38px; width: 100%; z-index: 10000; padding: 5px; background: #f8f8f8; border: solid 1px #999; display: none; /* visibility will be toggled with jquery */ }
#nav li { clear: both; float: none; margin: 5px 0 5px 10px; }
#nav a, #nav ul a { font: inherit; background: none; display: inline; padding: 0; color: #666; border: none; }
#nav a:hover, #nav ul a:hover { background: none; color: #000; }
/* dropdown */
#nav ul { width: auto; position: static; display: block; border: none; background: inherit; }
#nav ul li { margin: 3px 0 3px 15px; }
}
 @media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav { display: block !important; }
}
.logo-wrapper { background-color: #224d61; width: 100%; padding: 10px 0px; text-align: center; }
.main-content h3 { text-align: center; line-height: 23px; color: #224D61; font-size: 18px; }
.main-content span { font-weight: 100; }
.heading { text-align: center; margin: 20px 0px; font-size: 19px;font-weight:bold;color:#224d61 }
.form-wrapper table td input { width: 68%; padding: 5px; border: 1px solid #CACACA; margin: 5px 0px; float: right; }
.form-wrapper table td select { color: #676666; font-size: 12px; width: 70.4%; padding: 5px; border: 1px solid #CACACA; margin: 5px 0px; float: right; }
.main-content { width: 80%; margin: 0 auto; }
#submit { cursor:pointer; width: 16%; margin: 0 auto; border-radius: 5px; padding: 10px 0px; float: none; margin-top: 32px; font-size: 15px; text-transform: uppercase; background-color: #224D61; color: #fff; }
.registration table td input{ width:89.8%; float:none;}.registration table td select{ width:94%; float:none;}
.form-wrapper table td textarea {
    color: #676666;
    font-size: 12px;
    width: 90.2%;
    padding: 5px;
    border: 1px solid #CACACA;
    margin: 5px 0px;
    height: 53px; 
}
.copyrighted
{
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #224D61;
    padding: 12px 0px;
}
.signature
{
    border: 1px solid #CCCCCC;
    width: 69%;
    height: 85px;
    margin: 0 auto;
}










.page_wrap { width: 90%; max-width:100%; margin:0 auto;}
.mid_wrap {float:left; width:98%;background-color: #FDFDFD; border: 1px solid #ECEBEB; padding:1%;}

.form_DIV { float:left; width:100%;}
.form_DIV p {font-size:13px; line-height:16px; text-align:justify;}
.L_DIV {width:50%; float:left; margin:5px 0;} .L_DIV span {width:40%; float:left; padding-top:3px;} .L_DIV input {width:45%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;text-transform:uppercase;} .L_DIV select {width:47.4%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;}
.L_DIV textarea {width:45%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%; resize:none; }

.R_DIV {width:50%; float:right; margin:5px 0;} .R_DIV span {width:40%; float:left; padding-top:3px; } .R_DIV input {width:45%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;text-transform:uppercase;} .R_DIV select {width:47.4%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;}
.R_DIV textarea {width:45%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%; resize:none;}

.inpt_WD {width:19.5% !important;}
.LR_both {width:100%; float:left; margin:5px 0;} .LR_both span {width:19.5%; float:left; padding-top:3px;} .LR_both select {width:23.6%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;}
.LR_both input {width:22.4%; padding:5px; border:1px solid #999; font-size:12px; color:#333; margin-left:1%;}

.sign_DIV { border:1px solid #CCCCCC; width:24%; height:80px; float:right; margin-right:5.5%;text-align:center;padding-top:10px}
.sign_text {width: 93%; float: left; text-align: right; font-size: 11px; line-height: 20px;}
.copyright_Div {text-align:center; margin-top: 20px; border-top: 1px solid #224D61; padding: 12px 0px; float:left; width:100%;}

.btn_log{background:none;border:none;cursor:pointer;color:Maroon;text-transform:uppercase;font-size:12px;padding:11px 15px}
.btn_log:hover{color:Yellow;background:#224D61;padding:11px 15px}


/*login page new*/

/*login*/
#particles {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f0f4f8;
    z-index: -1;
}
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: #f5f5f5 url(../images/new-bg-3.jpg) no-repeat center/cover;
}

.login-page .inner {
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    max-width: 640px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    animation: fadeIn 1.2s ease-out forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    .login-page .rgt-side {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(21deg, #27548a 0%, #ddecff 100%);
        position: relative;
        overflow: hidden;
        padding: 10px;
    }



    .login-page .lft-side form {
        background: #fff;
        margin-left: auto;
        z-index: 11;
        position: relative;
        padding: 15px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
        -moz-box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
        box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
    }

    .login-page .lft-side .input-field label {
        display: block;
        color: #000;
        margin-bottom: 7px;
        font-weight: 600;
        font-size: 17px;
    }

    .login-page .lft-side .input-field input {
        width: 100%;
        height: 55px;
        line-height: 55px;
        border: none;
        background: #fff;
        box-shadow: 0 0 5px #ccc;
        padding-left: 10px;
        font-size: 16px;
        font-weight: 600;
        outline: none;
        border-radius: 100px;
    }

    .login-page .lft-side .input-field {
        position: relative;
        margin-bottom: 20px;
    }

        .login-page .lft-side .input-field i {
            position: absolute;
            left: 6px;
            top: 49px;
            color: #000;
        }

            .login-page .lft-side .input-field i.inner-icon {
                top: 37px;
                color: #000;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: #dde9f9;
                border-radius: 50%;
            }

        .login-page .lft-side .input-field .eye-icon i {
            left: auto;
            right: 15px;
        }

    .login-page .lft-side h3 {
        text-align: center;
        font-size: 25px;
        font-weight: 700 !important;
        margin-bottom: 20px;
        color:#000;
    }

    .login-page .lft-side .forgot-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        color: #000;
    }

    .login-page .lft-side .forgot-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        color: #000;
    }

    .login-page .lft-side .sub-btn {
        text-align: center;
        margin-bottom: 20px;
    }

        .login-page .lft-side .sub-btn button, .login-page .lft-side .sub-btn input {
            background: #27548a;
            color: #fff;
            padding: 12px 20px;
            border-radius: 9px;
            width: auto;
            font-weight: 700;
            font-size: 18px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            border-color: #000;
            border-style: solid;
            border-width: 1px 1px 3px 1px;
        }

            .login-page .lft-side .sub-btn button:before, .login-page .lft-side .sub-btn input:before {
                content: '';
                position: absolute;
                width: 0;
                height: 100%;
                background: #000;
                top: 0;
                left: 0;
                z-index: -1;
                transition: 0.8s width ease-in-out;
            }

.lft-side .sub-btn input:hover {
    background: #000;
}

.login-page .lft-side .sub-btn button:hover:before, .login-page .lft-side .sub-btn input:hover:before {
    width: 100%;
}

.login-page .lft-side .sign-up-btns {
    text-align: center;
}

.lft-side.login-attandce form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .lft-side.login-attandce form .form-title, .lft-side.login-attandce form .input-field, .lft-side.login-attandce form .sub-btn {
        flex: 0 0 100%;
    }

        .lft-side.login-attandce form .input-field.half {
            flex: 0 0 48%;
        }

.login-page .rgt-side .logo-main .img img {
    max-width: 290px;
    object-fit: contain;
}

.login-page .rgt-side .logo-main .img {
    text-align: center;
    background: #ffffff85;
    padding: 18px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
    -moz-box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
    box-shadow: 0px 0px 51px -4px rgba(0,0,0,0.34);
    position: relative;
}

    .login-page .rgt-side .logo-main .img h4 {
        color: #000;
    }



@media (max-width:1399px) {

    .login-page .lft-side .input-field i.inner-icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        top: 35px;
    }

    .login-page .lft-side .input-field i {
        top: 42px;
    }

    .login-page .lft-side .sub-btn button, .login-page .lft-side .sub-btn input {
        padding: 8px 20px;
        font-size: 17px;
    }

    .login-page .lft-side form {
        padding: 10px 15px;
    }

    .login-page .rgt-side .logo-main .img {
        padding: 10px;
    }
}

@media (max-width:991px) {
    .login-page .rgt-side {
        order: 1;
        flex: 0 0 100%;
        height: auto;
        border-radius: 0;
        padding: 20px 10px;
        margin-bottom: 20px;
    }

    .login-page .lft-side {
        order: 2;
        flex: 0 0 100%;
    }

    .login-page .inner {
        flex-wrap: wrap;
        box-shadow:none;
    }

    .login-page {
        align-items: baseline;
    }

        .login-page .lft-side form {
            max-width: 100%;
            margin: 10px 10px;
            box-shadow: 0 0 5px #ccc;
        }

        .login-page .inner::before, .login-page .inner::after {
            display: none;
        }

        .login-page .rgt-side .logo-main .img img {
            height: 80px;
        }

        .login-page .rgt-side .logo-main .img h4 {
            font-size: 16px;
        }
}