:root{
	
	--font-family : "zhbf" , tahoma ;
	
	--body-bg-color : #24303A;
	--modal-bg-color : #080b0f;
	--modal-bg-lcolor : #5f7696;
}


body,html{
	
	direction:rtl;
	text-align:right;
	font-family:var(--font-family);
	margin:0;
	padding:0;
	font-size:12px;
	background-color:var(--body-bg-color);
}

body{
	
	
	 min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;
	
	flex-wrap:wrap;

}






.content{
	overflow-wrap: break-word;
	word-wrap: break-word;
  
 

}



@media screen and (max-width:960px){
	
	.content{
		
		width:96%;
	}
	
	
}


@media screen and (min-width:961px) and (max-width:1300px){
	
	.content{
		
		width:850px;
	}
	
	
}





@media screen and (min-width:1300px ){
	
	.content{
		
		width:1100px;
	}
	
	
}






a{
	text-decoration:none;
}


.modal{
	color:#fff;
}
.modal .modal-content{
		color:#fff;
	background-color:var(--modal-bg-color);
	border-radius:15px;
}
.modal .modal-header{
		border:none;
		position:relative;
}

.modal-backdrop {
   
    --bs-backdrop-bg: #fff;
    --bs-backdrop-opacity: 0.3;
	filter:blur(3px);
}

.modal .modal-close {
   position:absolute;
   left:9px;
   top:9px;
   font-weight:bold;
   font-size:3rem;
   color:#fff;
   line-height:2.5rem;
   
}





.mycard{
	
	
 background-color:	var(--modal-bg-color);
 
 color:#fff;
 
 box-sizing:border-box;
	
 border-radius:20px;
 
 padding:20px;	
	
	
	
	
}


.btitle{
	text-align:right;
	font-size:1.3rem;
	color:var(--modal-bg-lcolor );
	margin:15px 5px 15px 5px;
	padding:0 10px 8px 10px;
	border-bottom: solid 1px var(--modal-bg-lcolor );
}


.mobile{
	
	direction:ltr;
	text-align:center;
	font-size:2rem;
	font-weight:bold;
	
	letter-spacing:4px;
	
}


.text-center-l{
	
	direction:ltr;
	text-align:center;
	
}

.text-left{
	
	direction:ltr;
	text-align:left;
	
}