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, center,
dl, dt, dd, ol, ul, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
:root {
--guruwhitebg: #f2f2f2;
--gurubluebg: #262626;
--gururedbg: #F03E3E;
--guruborderbg: #a6a6a6;
--gururedbutton: #F03E3E;
--gurubluebutton: #262626;
--gurubluetext: #262626;
--guruyesil: #28a745;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body, html {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
background: var(--guruwhitebg);
}
section {
height: 100%;
}
.hidden {
display: none;
}
.logo {
width: 100%;
}
.logo a {
width: 200px;
padding: 20px;
display: block;
}
.logo a img {
width: 100%;
}
.logo a img.mobile_logo {
display: none;
}
.login {
position: relative;
width: 100%;
height: 100%;
background: var(--guruwhitebg);
padding: 50px 0px 0px 100px;
}
@media screen and (max-width: 790px) {
.login {
padding: 0px 0px 0px 0px;
}
}
.form {
width: 100%;
max-width: 340px;
padding: 15px 17px;
/* background: #000; */
border-radius: 0.3rem;
z-index: 9999;
position: absolute;
right: 25%;
margin-right: -170px;
top: calc(50% - 180px);
font-size: 1rem;
/* box-shadow: 0 0.6rem 1rem rgb(0 0 0 / 29%);*/
}
.form .top {
width: 100%;
text-align: right;
border-bottom: 1px solid var(--guruborderbg);
}
.form .top h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 34px;
color: var(--gurubluetext);
}
.form .top span {
display: inline-block;
color: var(--gurubluetext);
margin: 0px 0 10px 0;
font-size: 14px;
}f
.form .top a {
width: 100%;
height: 40px;
background-position: right center !important;
background-size: contain !important;
max-width: 180px;
display: block;
background: url(/staticFile/newLogo.png) no-repeat;
float: right;
}
.form .middle .input-fields {
margin-top: 15px;
position: relative;
}
.form .middle .input-fields label {
color: var(--gurubluetext);
width: 100%;
margin: 10px 0;
font-size: 14px;
}
.form .middle .input-fields input {
width: 100%;
padding: 9px 5px;
border-radius: 5px;
color: var(--gurubluetext);
outline: none;
border: 1px solid var(--guruborderbg);
}
.form .middle .input-fields .show-pass {
position: absolute;
width: 24px;
height: 24px;
right: 10px;
top: 43px;
cursor: pointer;
}
.form .bottom {
margin-top: 20px;
display: inline-block;
width: 100%;
}
.form .bottom span:not(#passstrength) {
display: inline-block;
color: red;
padding: 10px;
border: 1px solid red;
margin-bottom: 10px;
}
.form .bottom a {
color: #fff;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.form .bottom .btnForgotPassword {
text-decoration: underline;
margin-top: 13px;
color: var(--gurubluetext);
/* text-decoration: none; */
display: inline-block;
font-size: 14px;
}
.form .bottom .btnLogin {
background: var(--gurubluebg);
padding: 13px 38px;
border-radius: 4px;
float: right;
color: var(--guruwhitebg);
text-decoration: none;
display: inline-block;
font-size: 14px;
border: none;
}
.login-right {
position: absolute;
right: 40px;
bottom: 40px;
text-align: right;
}
.login-right .input-field label {
position: relative;
padding-right: 40px;
cursor: pointer;
margin-bottom: 15px;
}
.login-right .input-field label a {
color: var(--gurubluebutton);
text-decoration: underline;
}
.login-right .input-field input[type="checkbox"] {
display: none;
}
.login-right .input-field label:after {
position: absolute;
content: "";
width: 24px;
height: 24px;
top: -7px;
right: 0;
border: 1px solid var(--gurubluebutton);
border-radius: 3px;
}
.login-right .input-field label:before {
display: none;
content: "";
position: absolute;
right: 7px;
top: -4px;
transform: rotate(30deg);
height: 15px;
width: 10px;
border-bottom: 4px solid var(--gurubluebutton);
border-right: 4px solid var(--gurubluebutton);
}
.login-right .input-field input[type="checkbox"]:checked + label::before {
display: block;
}
.changepass .form {
/*background: #EF7823;*/
}
.changepass .form .bottom a.btnSave {
background: var(--gurubluebutton);
padding: 11px 38px;
float: right;
outline: none;
}
.changepass h2 {
font-size: 36px;
font-weight: bold;
line-height: 46px;
}
.changepass p {
font-size: 24px;
line-height: 28px;
}
.changepass .warn {
position: absolute;
right: 34%;
top: calc(50% - 215px);
width: 210px;
transform: translate(-36%, 50%);
text-align: right;
}
.changepass .warn h2 {
padding-left: 20px;
}
.modal {
display: none;
position: fixed;
left: 0;
right: 0;
background: transparent;
padding: 0;
max-height: 70%;
width: 55%;
margin: auto;
overflow-y: auto;
border-radius: 2px;
will-change: top, opacity;
}
.lean-overlay {
position: fixed;
z-index: 999;
top: -100px;
left: 0;
bottom: 0;
right: 0;
height: 125%;
width: 100%;
background: #000;
display: none;
will-change: opacity;
}
.modal .modal-content {
padding: 24px;
border: none;
box-shadow: none;
border-radius: 0;
}
.modal .modal-footer {
border-radius: 0;
background-color: #fff;
border: none;
padding: 4px 6px;
height: 56px;
width: 100%;
}
.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
float: right;
margin: 6px 0;
}
.modal .modal-close {
cursor: pointer;
}
.captchaContainer {
margin-top: 10px;
}
#loginConfirm {
background: #EF7823;
padding: 25px;
}
#loginConfirm {
background: #EF7823;
padding: 25px;
}
#loginConfirm p {
line-height: 22px;
}
#loginConfirm .btnClose {
width: 20px;
opacity: 1;
color: var(--gurubluetext);
}
.passwordBar {
position: absolute;
left: 50%;
background: rgba(0, 0, 0, 0.7);
width: 210px;
border-radius: 10px;
z-index: 999;
margin-left: -105px;
top: -150px;
padding: 10px 0;
font-size: 12px;
}
.passwordBar::after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 80px;
right: auto;
top: auto;
bottom: -44px;
border: 22px solid;
border-color: rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.passwordBar b {
display: block;
padding-left: 10px;
color: #fff;
font-weight: normal;
}
.passwordBar b.checked {
text-decoration: line-through;
}
.passwordBar.littlePasswordBar {
left: 50%;
transform: scale(0.7);
-webkit-transform: scale(0.7);
top: -100px;
}
#passstrength {
padding: 10px;
color: rgb(255, 255, 255);
}
#loginForgot .close {
width: 20px;
opacity: 1;
float: left;
color: var(--gurubluetext);
font-size: 24px;
font-weight: 400;
}
@media (max-width: 1365px) {
.form {
max-width: 340px;
margin: 0 auto;
position: absolute;
right: 11vw;
top: calc(50% - 180px);
}
.login-right {
right: 2vw;
}
.changepass .warn {
right: 38%;
}
}
@media (max-width: 980px) {
.form {
max-width: 340px;
margin: 0 auto;
position: absolute;
right: 11vw;
top: calc(50% - 180px);
}
.login-right {
right: 2vw;
}
.changepass .warn {
right: 46%;
}
}
@media (max-width: 780px) {
.logo a {
margin: 0 auto;
}
.logo a {
width: 150px;
}
.logo a img {
display: none;
}
.logo a img.mobile_logo {
display: block;
}
.form {
position: relative;
margin: 0 auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
.form .top {
margin-top: 20px
}
.login-right {
position: relative;
margin: 50px auto 0 auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
max-width: 340px;
padding: 15px 17px;
}
.changepass .warn {
transform: none;
top: auto;
margin: 20px auto 0px 35px;
position: relative;
right: auto;
width: 340px;
text-align: left;
}
.changepass .warn h2 {
padding-left: 0;
}
.changepass h2 {
font-size: 22px;
font-weight: bold;
line-height: 22px;
}
.changepass p {
font-size: 18px;
line-height: 22px;
}
.modal .modal-footer .btn, .modal .modal-footer .btn-flat {
display: inline-block;
background: var(--gurubluebg);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
margin: 6px;
}
}
/*toast.css*/
.notification-toast.top-right {
position: fixed;
width: 100%;
z-index: 999999;
max-width: 300px;
width: 100%;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -50px;
text-align: center;
}
.toast {
border: 0;
padding: 20px;
border-radius: 12px;
}
.toast-header,
.toast-body {
color: var(--guruwhitebg);
background-color: inherit;
}
.toast.success {
background: var(--guruyesil);
}
.toast.info {
background: #F89749;
}
.toast.error {
background: var(--gururedbg);
}
.toast .close {
text-shadow: none;
color: var(--guruwhitebg);
opacity: 1;
}
.postit {
z-index: 999;
position: absolute;
left: 50%;
top: 0px;
background: #fcd20b;
padding: 15px;
font-size: 15px;
color: #000;
width: 300px;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
margin: 0 auto;
}
.closepost {
position: absolute;
right: 10px;
top: 10px;
font-size: 1.4em;
}
.closepost:hover {
cursor: pointer;
}
.postit h2 {
font-size: 1.2em;
float: left;
padding: 10px;
margin: 0;
text-align: center;
float: left;
width: 100%;
font-weight: 700;
font-family: 'Sriracha', cursive;
}
.postit p {
font-size: 18px;
min-height: 340px;
width: 100%;
float: left;
max-height: 340px;
overflow-y: auto;
line-height: 24px;
font-family: 'Sriracha', cursive;
}
.postit.form-signin {
left: 10%;
}
@media (max-width: 780px) {
#loginForgot .close {
margin-top: 27px;
}
}