body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.blurdiv{
   filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}


 .wrap {
     display:none;
     width: 450px;
     margin: 50px auto;
     background: #fafafa;
     position: absolute;
     align-items: center;
     justify-content: center;
     z-index: 999;  
     left: 0;
     
  right: 0;
  top: 150px;
  margin: 0 auto; 
}

.login-form
{
   width: 350px;
   margin: 0 auto;
   border: 1px solid #1DA1F2;
   padding: 2rem;
   background-color:#121d1d;
    /* backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    background-color: rgba(11, 10, 10, 0.87);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3); */
   color: #1DA1F2;
   border-radius: 6px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.form-input{
   background: #fafafa;
   border: 1px solid #eeeeee;
   padding: 12px;
   width: 100%;
   border-radius: 6px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.form-group{
   margin-bottom: 1rem;
}

.form-button{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #0a6bff;
border-radius: 4px;
border: 0;
box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset,rgba(0,44,97,.1) 0 3px 6px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
/* display: inherit; */
font-family: "Space Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin: 0;
min-height: 40px;

padding: 16px 20px;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
transition: all .2s cubic-bezier(.22, .61, .36, 1);

}
.form-button:hover{
background-color: #065dd8;
transform: translateY(-2px);
}


.form-buttonlogin{
  
   background-color: #0a6bff;
border-radius: 4px;
border: 0;
box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset,rgba(0,44,97,.1) 0 3px 6px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
/* display: inherit; */
font-family: "Space Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin: 0;
min-height: 40px;

padding: 16px 20px;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
transition: all .2s cubic-bezier(.22, .61, .36, 1);

}
.form-buttonlogin:hover{
background-color: #065dd8;
transform: translateY(-2px);
}











.form-header{
text-align: center;

margin-bottom : 2rem;
}
.form-header h3{
    padding-bottom: 5px;

}
.form-footer{
text-align: center;
}
.flipcard{
background-color: transparent;
width : 350px;
perspective: 1000px;
}
.flipcard-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flipcard-front, .flipcard-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flipcard-front{
color: black;
}
.flipcard-back{
background-color: dodgerblue;				
transform: rotateY(180deg);
}		
input[type="checkbox"]:checked + .flipcard .flipcard-inner{
transform: rotateY(180deg);
}
.form-button-register{
background: #2c91d8;
}
.form-button-register:hover{
background: #2c91a8;
}
.switch_form:before{
content: " ";
display: block;
background:red;
}
.label-highlight{
color: #ffffff;
text-decoration: underline;
cursor: pointer;
}
.form-button .text{
width: 70%;

}
.google-icon {


width: 30%;
position:relative;


width: 20px;
height: 20px;



}


.close {
    position: relative;
    right: -315px;
    top: 25px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    opacity: 1;
   
  
  }
  .close:hover {
    opacity: 1;
  }
  .close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 25px;
    width: 2px;
  
    background-color: #FFF;
  }
  .close:before {
    transform: rotate(45deg);
  }
  .close:after {
    transform: rotate(-45deg);
  }