/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: #ffffff;
}
/**Typeo CSS End**/
.signinform-scn, .signinform-scn * {
--page-width: 1230px;
--base-fm: 'Rubik', sans-serif;
--title-size: 30px;
--base-size: 16px;
--base-clr: #2e2e2e;
--white-clr: #ffffff;
--theme-clr: #404472;
--bg-clr: #efedeb;
}
.page-width {
max-width: var(--page-width);
margin: auto;
width: 100%;
padding: 0 15px;
}
.signinform-scn {
background-size: cover;
background-position: center center;
padding:25px 0px;
justify-content: center;
display: flex;
flex-flow: row wrap;
min-height: 100vh;
font-family: var(--base-fm);
font-size: var(--base-size);
color: var(--white-clr);
align-items: center;
}
.signinform-group {
width: 100%;
}
.signinform-scn h1 {
font-size: var(--title-size);
color: var(--white-clr);
font-weight: 500;
text-align: center;
display: block;
width: 100%;
margin: 30px 0px;
}
.signinform-inner {
display: flex;
flex-flow: row wrap;
width: 100%;

}
.signinform-inner .signinform-img {
width: 300px;
}
.signinform-inner .signinform-img img {
max-width: 100%;
display: block;
height: 100%;
}
.signinform-inner .form-tabs {
width: 170px;
display: flex;
flex-flow: row wrap;
background-color: var(--bg-clr);
color: var(--base-clr);
}
.f-tab-item .flabel {
display: block;
width: 100%;
text-align: center;
font-weight: 500;
margin-top: 5px;
}
.signinform-inner .form-tabs .f-tab-item {
display: flex;
width: 100%;
text-align: center;
flex-flow: row wrap;
justify-content: center;
align-content: center;
cursor: pointer;
transition: 0.5s all;
}
.signinform-inner .form-tabs .f-tab-item * {
pointer-events: none;
}
.signinform-inner .form-tabs .f-tab-item:hover,
.signinform-inner .form-tabs .f-tab-item.active {
background-color: var(--theme-clr);
color: var(--white-clr);
}
.signinform-inner .form-tabs .f-tab-item:hover path,
.signinform-inner .form-tabs .f-tab-item.active path {
fill: var(--white-clr)
}
.cw-form-info {
box-sizing: border-box;
padding: 2em 3em;
width: calc(100% - 500px);
background: #fff;
margin-left: 30px;
min-height: 525px;
}
.cmn-form-group {
display: none;
color: var(--base-clr);
line-height: 1.4;
}
.signinform-scn input{
font-size: var(--base-size);
color: var(--base-clr);
text-align: left;
padding: 14px 0px 12px 0px;
width: 100%;
display: inline-block;
box-sizing: border-box;
border: none;
outline: none;
background: transparent;
letter-spacing: .5px;
font-family: var(--base-fm);
}
.cw-form-info .input-group {
margin-bottom: 15px;
padding: 0px 0px;
border-bottom: 1px solid #e5e5e5;
position: relative;
}
.cw-form-info h2 {
color: var(--base-clr);
font-size: calc(var(--title-size) - 4px);
font-weight: 500;
margin-top: 0px;
}
.form-row {
display: flex;
justify-content: space-between;
}
.form-row .forgot {
color: var(--base-clr);
text-decoration: none;
cursor: pointer;
}
.form-row .forgot:hover {
text-decoration: underline;
}
.signinform-scn .cmn-btn {
color: var(--white-clr);
background-color: var(--theme-clr);
margin-top: 30px;
outline: none;
width: 100%;
padding: 15px 15px;
cursor: pointer;
font-size: 20px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border: none;
transition: 0.5s all;
}
.cmn-btn:hover {
opacity: 0.9;
}
.form-row .form-check input[type="checkbox"]+label:before {
border-radius: 3px;
border: 1px solid #e2e2e2;
color: transparent;
content: "\2714";
display: inline-block;
height: 18px;
margin-right: 5px;
transition: 0.2s;
vertical-align: inherit;
width: 18px;
text-align: center;
line-height: 20px;
}
.form-row .form-check input[type="checkbox"] {
display: none;
}
.form-row .form-check input[type="checkbox"]:checked+label:before {
background-color: var(--theme-clr);
border-color: var(--theme-clr);
color: var(--white-clr);
}
.form-row .form-check input[type="checkbox"]+label {
cursor: pointer;
color: var(--base-clr);
}

.login-continue {
position: relative;
text-align: center;
display: block;
width: 90%;
margin: 30px auto;
}
.login-continue:before {
content: '';
position: absolute;
left: 0px;
top: 50%;
width: 100%;
height: 1px;
background-color: var(--bg-clr);
}
.login-continue span {
color: var(--base-clr);
position: relative;
z-index: 1;
background-color: var(--white-clr);
padding: 0px 15px;
}
.social-login a {
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
background: #3b5998;
margin: 0px 10px;
text-decoration: none;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.social-login a svg {
max-height: 16px;
}
.social-login a.facebook svg {
max-height: 20px;
}
.social-login .twitter {
background: #1da1f2;
}
.social-login .google {
background: #ea4335;
}
.social-login {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.account-link {
margin: 30px 0px 0px 0px;
text-align: center;
color: var(--base-clr);
}
.account-link span {
color: var(--theme-clr);
cursor: pointer;
text-decoration: underline;
}
.account-link span:hover {
text-decoration: none;
}
.cancel-link {
text-align: center;
display: flex;
justify-content: center;
cursor: pointer;
color: var(--base-clr);
margin-top: 20px;
font-size: 18px;
text-decoration: underline;
}
.cancel-link:hover {
text-decoration: none;
}
.showform {
display: block;
}
@media(max-width: 992px) {
.signinform-inner .signinform-img {
display: none;
}
.cw-form-info {
width: calc(100% - 185px);
margin-left: 15px;
}
}
@media(max-width: 767px) {
.signinform-scn h1 {
padding:  0 20px 20px 20px;
margin: 0px;
font-size: calc(var(--title-size) - 8px);
}
.cw-form-info {
padding: 15px;
width: 100%;
margin-left: 0;
min-height: inherit;
}
.signinform-inner .form-tabs {
width: 100%;
margin-bottom: 4px;
}
.signinform-inner .form-tabs .f-tab-item {
width: 33.33%;
font-size: calc(var(--base-size) - 4px);
padding: 10px;
}
}

//First Tab & Tab Data class
  document.querySelector('.signinform-inner .form-tabs .f-tab-item:first-child').classList.add('active');
  document.querySelector('.cmn-form-group:first-child').classList.add('showform')
  //Tab Code
  let tabitems = document.querySelectorAll('.signinform-inner .form-tabs .f-tab-item');
  tabitems.forEach(function(item) {
  item.addEventListener('click', function(e) {
  // Remove active class from all tab items
  tabitems.forEach(function(item) {
  item.classList.remove('active');
  });
  
  // Add active class to clicked tab item
  e.target.classList.add('active');
  let tabDataItems = document.querySelectorAll('.cmn-form-group');
  tabDataItems.forEach(function(dItem) {
  dItem.classList.remove('showform');
  })
  let datatab = e.target.getAttribute('data-tab');
  document.querySelector(`.${datatab}`).classList.add('showform');
  });
  });
  /**Desktop Tab Code End**/