/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*--reset--*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*--start editing from here--*/
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*--end reset--*/
body {
    font-family: 'Signika', sans-serif;
    background: url(../images/banner1.png)repeat 0px 0px;
    background-attachment: fixed;
    background-size: cover;
}

/*-- main --*/
.main {
    margin: 5em auto;
}

.login-form {
    width: 42%;
    margin: 4em auto;
}

h1 {
    font-size: 3em;
    text-align: center;
    color: #9199E1;
    font-family: 'Righteous', cursive;
}

.login-left {
    float: left;
    width: 25%;
    background: url(../images/banner.png)no-repeat 0px 0px;
    background-size: cover;
    padding: 0.5em;
    height: 19.55em;

    align-items: center;
    display: flex;
}

.login-right {
    float: left;
    width: 25%;
    background: url(../images/banner2.png)no-repeat 0px 0px;
    background-size: cover;
    padding: 0.5em;
    height: 19.55em;

    align-items: center;
    display: flex;
}

.login-center {
    float: left;
    width: 50%;
    background-color: #fff;
    opacity: 0.98;
    padding: 2em 0 1em;
    height: 19.55em;
}

.logo {
    text-align: center;
}

.login-left h2,
.login-right h2 {
    font-size: 1.8em;
    color: #fff;
    margin-top: 0.5em;
}

.login-left p,
.login-right p {
    font-size: 0.9em;
    color: #fff;
    margin-top: 0.5em;
}

.logo-bottom {
    margin-top: 2em;
}

.social-icons {
    margin-top: 2em;
}

.social-icons ul li {
    display: inline-block;
}

.social-icons ul li a {
    display: block;
    width: 65px;
    height: 36px;
    text-align: center;
    background-color: #3B5998;
}

.social-icons ul li a.twt {
    background-color: #55acee;
}

.social-icons ul li a.ggl {
    background-color: #dc4e41;
}

.social-icons ul li a img {
    padding-top: 0.5em;
}

.social-icons ul li a:hover img {
    transform: rotatey(360deg);
    transition: .5s all;
}

.login-center input[type="text"],
.login-center input[type="password"] {
    outline: none;
    font-size: 1em;
    color: #377383;
    padding: 19px 30px 10px 10px;
    margin: 0;
    width: 89.87%;
    border: none;
    border-bottom: 2px solid #cecfd3;
    -webkit-appearance: none;
    opacity: 1;
}

.login-center input.name {
    background: url(../images/l1.png) no-repeat 98% 67%;
}

.login-center input.email {
    background: url(../images/l2.png) no-repeat 98% 67%;
}

.login-center input.password {
    background: url(../images/l3.png) no-repeat 98% 67%;
}

.login-center input[type="text"]:hover,
.login-center input[type="password"]:hover {
    border-bottom-color: rgba(132, 141, 215, 0.52);
}

.login-top {
    padding: 0.2em 1em 1em 1em;
}

.login-top.sign-top {
    margin-top: 0.5em;
}

.submit {
    float: left;
}

.login-text {
    margin-top: 1.2em;
}

.login-text ul li {
    display: inline-block;
}

.login-text ul li:nth-child(2) {
    margin-left: 6em;
}

.login-text ul li label,
.login-text ul li a {
    color: #555;
    font-size: 1em;
}

.login-text ul li label input[type="checkbox"] {
    vertical-align: bottom;
    cursor: pointer;
}

.login-text ul li a:hover {
    color: #286e72;
}

.login-bottom ul {
    padding: 0;
    float: left;
    margin-left: 2.2em;
}

.login-bottom ul li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.login-bottom ul li p {
    color: #555;
    font-size: 1em;
    margin-right: 1.5em;
}

.login-bottom ul li a {
    display: block;
    width: 35px;
    height: 30px;
    text-align: center;
    background-color: #919BE3;
}

.login-bottom ul li a img {
    padding-top: 0.35em;
}

.login-bottom ul li a:hover {
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.login-bottom {
    margin-top: 1.9em;
}

.login-bottom.login-bottom1 {
    /*margin-top: 11.6%;*/
}

.submit input[type="submit"] {
    font-size: 13px;
    color: #286e72;
    background: #fff;
    border: 2px solid #caad80;
    outline: none;
    cursor: pointer;
    padding: 6px 13px;
}

.submit input[type="submit"]:hover {
    background: #caad80;
    color: #fff;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
}

/******** SAP ************/
.sap_tabs {
    clear: both;
}

.tab_box {
    background: #fd926d;
    padding: 2em;
}

.top1 {
    margin-top: 2%;
}

.resp-tabs-list {
    list-style: none;
    padding-left: 19px;
    text-align: left;
}

.resp-tab-item {
    color: #d8dcdf;
    font-size: 18px;
    cursor: pointer;
    padding: 0px 0px;
    display: inline-block;
    margin: 0;
    text-align: center;
    list-style: none;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    margin: 0 5px;
}

.resp-tab-active {
    text-shadow: none;
    color: #caad80;
}

.resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
}

.resp-content-active,
.resp-accordion-active {
    display: block;
}

.resp-tab-item label {
    margin-right: 8px;
}

/*-----------------*/
/*--copyright--*/
.copyright {
    margin: 2em;
    text-align: center;
}

.copyright p {
    color: #333;
}

.copyright p a {
    color: #333;
}

.copyright p a:hover {
    color: #858ED4;
}

/*--//copyright--*/
/*---- responsive-design -----*/
@media(max-width:4000px) {
    .login-form {
        width: 40%;
    }
}

@media(max-width:1600px) {
    .login-form {
        width: 45%;
    }
}

@media(max-width:1350px) {
    .login-form {
        width: 50%;
    }
}

@media(max-width:1200px) {
    .login-form {
        width: 60%;
    }
}

@media(max-width:1050px) {
    .login-form {
        width: 70%;
    }
}

@media(max-width:900px) {
    .login-form {
        width: 80%;
    }
}

@media(max-width:780px) {
    .login-form {
        width: 90%;
    }

    .login-text ul li:nth-child(2) {
        margin-left: 5em;
    }

    .login-bottom ul {
        margin-left: 1.5em;
    }

    .login-bottom ul li p {
        margin-right: 1em;
    }

    .login-bottom.login-bottom1 {
        /*margin-top: 13.5%;*/
    }

    .login-bottom {
        /*margin-top: 16%;*/
    }

    h1 {
        font-size: 2.6em;
    }
}

@media(max-width:640px) {
    .login-form {
        width: 90%;
    }

    .social-icons ul li a {
        width: 57px;
    }

    .login-top {
        margin-top: 0;
    }

    .login-center input[type="text"],
    .login-center input[type="password"] {
        font-size: 0.9em;
        width: 86%;
        opacity: 1;
    }

    .login-wrapper input[type="text"],
    .login-wrapper input[type="password"] {
        font-size: 0.9em;
        width: 86%;
        opacity: 1;
    }

    .login-text ul li label,
    .login-text ul li a {
        font-size: 0.9em;
    }

    .login-text ul li:nth-child(2) {
        margin-left: 3em;
    }

    .login-bottom ul {
        margin-left: 0.5em;
    }

    .login-bottom ul li p {
        margin-right: 0.5em;
        font-size: 0.9em;
    }

    .login-bottom ul li {
        margin-left: 1px;
    }

    .login-bottom ul li a {
        width: 33px;
        height: 33px;
    }

    .login-bottom ul li a img {
        padding-top: 0.5em;
        width: 52%;
    }

    .login-bottom.login-bottom1 {
        /*margin-top: 18.5%;*/
    }

    .login-bottom {
        /*margin-top: 17.5%;*/
    }
}

@media(max-width:480px) {

    .login-left,
    .login-right {
        display: none;
    }

    .login-center {
        width: 100%;
    }

    .main {
        margin: 3em auto;
    }

    .logo img {
        width: 78%;
    }

    .login-form {
        width: 70%;
        margin: 2em auto;
    }

    .logo img {
        width: 35%;
    }

    .login-left h2,
    .login-right h2 {
        font-size: 1.5em;
        margin-top: 0.3em;
    }

    .login-left p,
    .login-right p {
        font-size: 0.8em;
        margin-top: 0.2em;
    }

    .login-bottom ul {
        margin-left: 1em;
    }

    .social-icons {
        margin-top: 1em;
    }

    .social-icons ul li {
        margin-left: 3px;
    }

    .social-icons ul li a {
        width: 81px;
    }

    .copyright p {
        font-size: 0.9em;
    }
}

@media (max-width: 320px) {
    .pp-fields {
        margin-bottom: 15px;
        ;
    }

    /* [class*="col-"]:not(:last-child){
        margin-bottom: 15px;
    } */
}

@media(max-width:320px) {
    .main {
        margin: 2em auto;
    }

    h1 {
        font-size: 2em;
    }

    .login-form {
        width: 90%;
    }

    .login-left,
    .login-right {
        /*width: 77%;*/
        display: none;
    }

    .login-left h2,
    .login-right h2 {
        font-size: 1.3em;
        margin-top: 0.2em;
    }

    .login-left p,
    .login-right p {
        font-size: 0.7em;
    }

    .social-icons ul li a {
        width: 64px;
    }

    .resp-tab-item {
        font-size: 15px;
    }

    .login-text ul li label,
    .login-text ul li a {
        font-size: 0.8em;
    }

    .login-text ul li:nth-child(2) {
        margin-left: 2em;
    }

    .submit input[type="submit"] {
        font-size: 11px;
    }

    .login-bottom ul li p {
        font-size: 0.75em;
    }

    .login-bottom ul li a {
        width: 25px;
        height: 25px;
    }

    .login-bottom ul li a img {
        padding-top: 0.4em;
        width: 47%;
    }

    .login-bottom ul {
        margin-left: 0.8em;
    }

    .copyright {
        margin: 2em 1em;
        font-size: 13px;
    }
}

/*--//responsive-design---*/

/*--login [Jan 10, 2023] --*/
#login_title_container {
    /* color: white; */
    /* color: black; */
    color: blue;
    margin-bottom: 1rem;
}
/*--//login [Jan 10, 2023] --*/

/*--login [Mar 1, 2024] --*/
.login-form-container {
    /* height: fit-content !important; */
    display: flex !important;
    justify-content: center;
}
.login-form-container .login-wrapper {
    height: fit-content !important;
    /* float: left; */
    width: 100%;
    background-color: #fff;
    /* opacity: 0.98; */
    padding: 2em 0 1em;
    /* height: 19.55em; */
    max-width: 350px;
    margin: 0px 50px;

    /* background-color: rgba(0, 0, 0, 0.286); */
    background-color: rgba(255, 255, 255);
    /* backdrop-filter: blur(10px);  */
    /* border: 10px solid rgba(255, 255, 255, 0.5); */
    /* border-radius: 10px;  */
}

.login-wrapper .resp-tabs-list {
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.0) !important;
}

.login-wrapper .resp-tabs-container {
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #fff;
}

.login-wrapper input[type="text"],
.login-wrapper input[type="password"] {
    outline: none;
    font-size: 1em;
    color: #377383; 
    /* color: #fff; */
    /* padding: 19px 30px 10px 10px; */
    padding: 9px 30px 10px 10px;
    /* margin: 0; */
    margin: 0px 0px 10px 0px ;
    /* width: 89.87%;*/
    width: 100%;
    border: none;
    /* border-bottom: 2px solid #cecfd3; */
    border-bottom: 2px solid #51bcda;
    -webkit-appearance: none;
    opacity: 1;
}

/* .login-wrapper input[type="text"],
.login-wrapper input[type="password"] {
    margin: 10px 5px;
    width: 100%;
} */

.login-wrapper .login-top {
    /* text-align: center; */
}

.login-wrapper .login-bottom .submit{
    float: unset !important;
}

.login-wrapper input[type="text"]::placeholder,
.login-wrapper input[type="password"]::placeholder {
    /* color: #fff; */
    /* color: #cecfd3; */
    color: navy !important;
    opacity: 1; /* Firefox */
  }
  
  .login-wrapper input[type="text"]::-ms-input-placeholder,
  .login-wrapper input[type="password"]::-ms-input-placeholder { /* Edge 12 -18 */
    /* color: #fff; */
    /* color: #cecfd3; */
    color: navy !important;
}

.login-wrapper input.name {
    background: url(../images/l1.png) no-repeat 98% 67%;
}

.login-wrapper input.email {
    background: url(../images/l2.png) no-repeat 98% 67%;
}

.login-wrapper input.password {
    background: url(../images/l3.png) no-repeat 98% 67%;
}

.login-wrapper input[type="text"]:hover,
.login-wrapper input[type="password"]:hover {
    border-bottom-color: rgba(132, 141, 215, 0.52);
}

.login-wrapper .login-text .login-bottom {
    margin-top: 0px;
}

.login-wrapper .login-text ul a {
    /* color: #fff !important; */
    color: #377383 !important;
}

#login_title_container h5 {
    font-weight: 700;
}

.login-wrapper label {
    /* color: #51bcda !important; */
    color: navy !important;
    font-size: 12px;
}

.login-wrapper label span.required {
    color: red !important;
}

#login_register_container {
    margin-top: 20px;
    font-size: 14px;   
}

#login_forgot_container {
    margin: 10px 0 20px 0;
    font-size: 14px;
    /* color: #26A59A !important; */
    color: navy !important;
}

.login-wrapper .login-text {
    margin: unset;
}

.login-wrapper #login-btn {
    /* background-color: #26A59A !important;
    border-color: #26A59A !important; */
    background-color: navy !important;
    border-color: navy !important;
}

.login-wrapper #login-btn:hover {
    /* background-color: #157a71 !important;
    border-color: #157a71 !important; */
    background-color: #0000a1 !important;
    border-color: #0000a1 !important;
}

.main-body .alert {
    max-width: 350px;
}

.main-body {
    margin-top: 10em;
}

@media (min-width: 319px) and (max-width: 481px) {
    .login-form-container .login-wrapper {
        margin: 0 10px;
    }
}

.div-hide {
    display: none;
}

/*--//login [Mar 1, 2024] --*/