*,
*::before,
*::after {
  box-sizing: border-box;
}
        
        @font-face {
  font-family:'Samim';
  font-style: normal;
  font-weight: bolder;
 
  src: url("../fonts/Samim-FD.woff") format('truetype');
}

        body{
          
            background: linear-gradient(90deg, #C7C5F4, #776BCC);	
            
        }
        .background{
             transition: 2s;
                    direction: rtl;
          	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
    width: 100%;  
        }
        .login-container{
            background: linear-gradient(90deg, #5D54A4, #7C78B8);	
       width: 320px;
            height: 90vh;
            position: relative;
             direction: rtl;
            text-align: right;
          	display: flex;
            flex-direction: column;
	align-items: center;
	justify-content: center;
            	box-shadow: 0px 0px 24px #5C5696;
                        overflow: hidden;

        }
        .form-register{
z-index: 100;
    padding: 1rem ;
            background-color: #5C569690;
              backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
            width: 90%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            	box-shadow: 0px 0px 2px #ffffff;
            border-radius: 5px;
            
            
        }
        .field{
            margin: .5rem ;
            display: flex;
            flex-direction: row;
            align-items: center;
            
        }
        .field label{
            text-align: right;
               font-family:'Samim';
        }
        .field input{
 
            background-color:aliceblue;
            transition:  all .3s ease-in;
/*            border: 1px solid #A392C7;*/
            border: none;
            border-radius: 2px;
            height: 25px;
                      border-bottom: 1px solid #A392C7;
                            font-family:'Samim';
            
        }
        .field input:hover,  .field input:focus,  .field input:active{
            border-bottom: 2px solid #A392C7;
                         outline: 0px solid transparent;
        }
        .btn-login{
            width: 100px;
            height: 30px;
   line-height: 0;
            text-decoration: none;
            font-family: samim;
            padding: 1rem 1.5rem;
            margin:.5rem 1rem;
            align-self: center;
            border-radius: 5px;
             border: 1px solid #A392C7;
              background-image:linear-gradient(90deg, #5D54A4, #7C78B8); 
                   transition: all .3s;
            color: #fff;
            font-weight: bold;
            font-size: .8rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
 
       .btn-login:hover{
  
                                background-image:linear-gradient(90deg, #fff, #fff);
            color: #5D54A4;
        }
 
        #sex{
         
            outline: none;
            padding:0 1rem;
             border: 1px solid #A392C7;
                border-radius: 5px;
              align-items: center;
            color: #4E4A4A;
                   font-family: samim;
 
 
        }
        .agree{
        direction: rtl;
            font-size: .8rem;
            color: #fff;
        }
        chekbox{
            background-color: #A392C7;
            
        }
        .ruls{
            text-decoration: none;
  
    background-color: #ffffff80;
            padding: .5rem;font-family: samim;
            border-radius: 6px;
            cursor: pointer;
            color:red;
            border: none;
            outline: none;
            
        }
.error-login{
    z-index: 100;
    color: #fff;;
    margin: 1rem auto;
    font-size: 1rem;
    font-family: samim;
        padding: 1rem ;
            background-color: #F7131780;
              backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
       	box-shadow: 0px 0px 24px #5C5696;border-radius: 3px;
 
}
        .screen__background {		
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);	
}

.screen__background__shape {
	transform: rotate(45deg);
	position: absolute;
 
}


.screen__background__shape1 {
	height: 520px;
	width: 520px;
	background: #FFF;	
	top: -50px;
	right: 120px;	
	border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
	height: 200px;
	width: 250px;
	background: #6C63AC;	
	top: -172px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape3 {
	height: 580px;
	width: 190px;
	background: linear-gradient(270deg, #5D54A4, #6A679E);
	top: -24px;
	right: 0;	
	border-radius: 32px;
}

.screen__background__shape4 {
	height: 400px;
	width: 200px;
	background: #7E7BB9;	
	top: 460px;
	right: 50px;	
	border-radius: 60px;
}

.alet-msg{
    z-index: 100;
    margin: 1rem auto;
    color:deeppink;
}       
 
.err {
    color: #fff;border-bottom: 1px solid red;
    padding: 0.5rem;
    font-family: samim;
    font-size: .8rem;
    text-align: right;
}

/*=====================*/
 
.center{
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.modal-parent{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  display: none;
    z-index: 1000;

 
}
.modal{
  background: #00000050;
  width: 70%;
    height: 70%;
  padding: 30px;
    margin: 1rem;
  border-radius: 6px;
border: 1px solid #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  position: relative;
  animation: 0.5s drop;
    direction: rtl;
    overflow: auto;

}
.modal h1{
    margin: 3rem auto;
    font-size: 1.2rem;
    text-align: center;
    font-family: samim!important;
    color: #fff;
    
}
.modal p{
        font-size: 1rem;
        text-align: right;
    font-family: samim!important;
    line-height: 35px;
        color: #fff;
}
.a-btn{
padding: 2rem 1rem;
}
@keyframes drop {
  0%{
    top: -100px;
  }
  100%{
    top: 50%;
  }
}
.X{
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 2rem;
  cursor: pointer;
    color: #fff;
    border-radius: 6px;
    border: 1px solid #fff;
    padding: 0 .6rem;
    background: #00000050;
    transition: .2s;
 
 

}
.X:hover{
    
    background-color: red;
}
       .login__icon{
     color:#fff;
            margin-left: .5rem;
        }


.red-text{
    color: red;
}
.form-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
@media screen and (max-width:500px)
{
    .modal{
        width: 100%;
  transform: translate(-55%, -50%);
    }
 .modal h1{
    font-size: 1rem;
    text-align: center;
    font-family: samim!important;
    
}
.modal p{
        font-size: .8rem;
        text-align: right;
    font-family: samim!important;
  
 
    
}   
}