@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*Boxed layout width*/
/**
 * Table Of Content
 *
 * 	1. Colors
 *	2. Typography
 *	3. Forms
 *	4. Tabs
 */
/*******************
 Gradiant mixin
*******************/
.auth-wrapper {
  min-height: 100vh;
  position: relative;
  }
  .auth-wrapper .auth-box {
    /* background: #fff; */
    padding: 4px;
    /* box-shadow: 0 5px 35px #00000078; */
    /* max-width: 400px; */
    /* width: 90%; */
    flex: 0 0 60%;
    border-radius: 15px;
    /* background: linear-gradient(var(--gradient-angle), rgb(190 148 26), rgb(0 42 79)); */
    animation: rotation 5s linear 0s infinite normal forwards;
    /* backdrop-filter: blur(50px); */
    display: flex;
    justify-content: center;
    align-items: center;
  }
 .auth-wrapper #loginform{
  /* background-color: #ffffff; */
  /* border-radius: 11px; */
  transition: all 0.2s;
  /* backdrop-filter: blur(5px); */
  /* padding: 30px; */
 flex: 0 0 470px;
  }
  @keyframes rotation 
        {
           0%
           {
                --gradient-angle : 0deg;
           }
           100%
           {
                --gradient-angle : 360deg;
           }
        }
        @property --gradient-angle
        {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        @property --angle {
          syntax: '<angle>';
          inherits: true;
          initial-value: 0deg;
        }

.login-btn, .login-btn-span{ position: relative;}
.login-btn-span{
	/* width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: linear-gradient(white, white) padding-box, conic-gradient(from var(--angle), #ffffff, #c5c5c5) border-box;
	border: 2px solid transparent;
	border-radius: 8px;
	animation: rotate-gradient 3s infinite linear;
	display: block; */
	}
  .login-front-wrap{
    padding: 30px;
    display: flex;
    justify-content: space-between;
    background-image: url(https://leadconnect.co.in/crm/assets/images/login-bg-3.jpg);
    background-position: center; background-repeat: no-repeat; background-size: cover;
}

 .login-front-wrap .auth-box-right{
    flex: 0 0 40%;
    border-radius: 20px;
    background: url(https://leadconnect.co.in/crm/assets/images/login-bg-2.jpg) no-repeat center center;
}
.login-front-wrap h2{
    font-weight: 700;
    color: #65558f;
    font-size: 36px;
}
.login-front-wrap .input-field{ margin-bottom: 15px;}
.login-frnt-body{ background-color: #fff;}

  @keyframes rotate-gradient {
    from { --angle: 0deg; }
    to { --angle: 360deg; }
  }

    .auth-wrapper .auth-box .logo {
      /* text-align: center; */
          margin-bottom: 60px;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 15px;
      }
  .auth-wrapper #recoverform {
    display: none; }
  .auth-wrapper .auth-sidebar {
    position: fixed;
    height: 100%;
    right: 0px;
    overflow: auto;
    margin: 0px;
    top: 0px; }
.login-form-hm .input-field input{height: 50px;}
.login-form-hm .input-field label{ padding-left: 0;
    position: initial;
    margin-bottom: 6px;
    display: inline-block;
    transform: initial; color: #333333;}
.login-form-hm .input-field>label:not(.label-icon).active {
  transform: initial;
  transform-origin: 0 0;
}
.login-form-hm input.invalid[type=text]:not(.browser-default), 
.login-form-hm input.invalid[type=password]:not(.browser-default):focus, .login-form-hm input.invalid[type=password]:not(.browser-default), .login-form-hm input[type=password]:not(.browser-default)
{ border-bottom: none; box-shadow: 0 0 0 0 transparent; border: 1px solid #c9ced7;}
.login-form-hm input[type=text]:not(.browser-default):focus:not([readonly]),
.login-form-hm input[type=password]:not(.browser-default):focus:not([readonly]){ border-bottom: 1px solid #5e35b1;
  box-shadow: 0 1px 0 0 #5e35b1;}
.login-form-hm .input-field{ margin-bottom: 0px;}
.login-form-hm .login-btn:hover{ box-shadow: 0px 11px 33px rgba(186, 125, 194, .7);}

.login-form-hm ::-webkit-input-placeholder {color: #6b6b6b !important;}
.login-form-hm :-moz-placeholder {color: #6b6b6b !important;}
.login-form-hm ::-moz-placeholder { color: #6b6b6b !important;}
.login-form-hm :-ms-input-placeholder { color: #6b6b6b !important;}

@media (max-width: 980px) {
.auth-wrapper #loginform { flex: 0 0 100%;}
}

@media (max-width: 767px) {
  .auth-wrapper .auth-sidebar {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 40px 0 60px; }
  .auth-wrapper .demo-text {
    margin-top: 30px; } 
  .login-front-wrap{ flex-direction: column; justify-content: center; padding: 100px; background: url(https://leadconnect.co.in/crm/assets/images/login-bg-2.jpg) no-repeat center center;}
  .auth-box-right{ display: none;}
 .auth-wrapper .auth-box{ background-color: #fff; padding: 40px; background-image: url(https://leadconnect.co.in/crm/assets/images/login-bg-3.jpg);
    background-position: center; background-repeat: no-repeat; background-size: cover;}

  }

@media (max-width: 575px) {
    .login-front-wrap { padding: 25px 25px;}
  .auth-wrapper .auth-box { padding: 25px;}
}
  
@media (max-width: 360px) {
    .auth-wrapper .auth-box {
        padding: 20px;
    }
}