@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800");
/*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%;
    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);
  }
 .auth-wrapper #loginform{
  background-color: #ffffff;
  border-radius: 11px;
  transition: all 0.2s;
  backdrop-filter: blur(5px);
  padding: 30px;
  }
#loginform .logo img{ width: 135px;}



  @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;
	}

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

    .auth-wrapper .auth-box .logo {
      text-align: center; margin-bottom: 20px; }
  .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: 46px;}
.login-form-hm .input-field label{ padding-left: 15px;}


@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; } }