body{
    font-size:15px;
    direction:rtl;
    height:100%;
    margin:0px;
    padding:0px;
    overflow: hidden;
    background-size:100%;
    background-repeat: no-repeat;
    background-position:top;
}
p{
	font-family: 'MyFontName';
	color: #3c3c53;
	font-size: 0.8rem;
	height: 2vh;
	margin-top: 0vh;
	
}
.matn{
	
	text-align: center;
	width:25vw ;
	position: relative;
	top: 10rem;
	padding: 2rem;
	padding-top: 5rem;
	float: none; 
	margin:auto;
	font-family: MyFontName;
	font-size: 1rem;
	border-color: darkgreen;

	border-style: dashed;
	background-color: rgba(4, 167, 113, 0.116);
	
}
.forms{
	min-height: 400px; 	
	width: 85%; 
	float: none;
	margin:auto; 
	/*height: 300px; */
	top:3%; 
	position: absolute;
}
/*,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,*/
.checkbox {
	opacity: 0;
	position: absolute;
	
  }
  
  .checkbox,
  .checkbox-label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
	cursor: pointer;
	font-family: 'MyFontName';
	
  }
  
  .checkbox-label {
	position: relative;
	
  }
  
  .checkbox + .checkbox-label:before {
	content: '';
	background: #fff;
	border: 2px solid #44436e;
	display: inline-block;
	vertical-align: middle;
	
	width: 1rem;
	height: 1rem;
	margin-right: 0.05rem;
	text-align: right;
	line-height: 1;
	border-radius: 0.2rem;
  }
  
  /*Simply Change the content to any font awesome unicode here to add your own check icon*/
  .checkbox:checked + .checkbox-label:before {
	font-family: 'FontAwesome';
	background: #fac42e;
	color: #fff;
	text-align: right;
	vertical-align: middle;
  }
  .checkbox:focus + .checkbox-label {
	outline: 1px solid #ddd;
	/* focus style */
  }
/*,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,*/
.MainDiv{
	width: 60vw; 
	float: none;
	margin: auto; 
	height: 60vh; 
	border-radius: 3px;
	position: relative; 
	top: 33vh;

	display: flex; 
	justify-content: center; 
}

.boxesDiv{

	width: 100%;
	float:initial;
	position: relative;
	/*height: 50vh;*/
	margin: 1vh auto;
	display: flex;
	flex-flow: row;
	
}
.right{
	width: 40%; 
	margin: auto;
	margin-top: 0vh;
	transition-duration: 0.5s;
}
.left{
	width: 40%; 
	margin: auto;
	margin-top: 0vh;
	transition-duration: 0.5s;
}
.bottomDiv{
	width: 100%; 
	text-align: center; 
	display: block; 
	margin:0%; 
}
.select{
	width: 94%;
	
	margin:5px auto 20px auto;
	background-color: #ffffff;
	font-family: 'MyFontName';
	border-radius: 0.3rem;
	height: 4vh;
	float:none;
	color: black;
	border: 0.1rem solid rgb(1, 21, 136);
	background:rgb(255, 255, 255);
	display:block;
	position: relative;
	transition-duration: 0.4s;
}
.select:hover{
	border:0.1rem solid #faca2e;
}
.boxes{
	/*border-color: #000000;*/
	width: 92%;
	
	margin:5px auto 20px auto;
/*	background-color: #ffffff;*/
	font-family: 'MyFontName';
	border-radius: 0.5rem;
	height: 4vh;

	color: black;
	border: 0.1rem solid rgb(1, 21, 136);
	background:rgb(255, 255, 255);
	display:block;
	position: relative;
	transition-duration: 0.2s;
}
.boxes:hover{
	border:0.1rem solid #faca2e;
}

.MinBox{
	background-color: #ffffff;
	border-radius: 0.2rem;
	border: 0.1rem solid rgb(1, 21, 136);
	background:rgb(255, 255, 255);
	margin:0.2rem auto 0.2rem auto;
	width: 4rem;
	height: 3.2vh;
	vertical-align: center;
	text-align: center;
	font-family: 'MyFontName';
}


.MinBox.option:hover{
	border:0.1rem solid #faca2e;
}
.MinBox:focus{
	border: 1px solid #6b7274;
}

.MinBox:hover{
	border:0.1rem solid #faca2e;
}
.pishraftDivMain{
height: 1.6vh;
width: 30vw;
background-color: #989999;
border-radius: 0.8vh;
margin: auto;
position: relative;
float: none;
}
.pishraftDiv{
	height: 2vh;
	width: 100%;
	text-align: center;
	display: block;
	
}
.pishraft{
	height: 1.6vh;
	background-color: rgb(1, 21, 136);
	border-radius: 0.8vh;
	float: right;
	position:absolute;
	text-align: left;
	margin: 0%;

}
.pishraftText{
	color: rgb(252, 241, 87);
	font-size:0.6rem;
	height: 1.5vh;
	font-family:MyFontName ;
	position:relative;
	float: left;
	margin: 0%;
	margin-top: 0%;
	padding-top: 0%;
	
}

.hidDiv{
	height: 0vh;
	width: 100%;
	overflow: hidden;
	transition-duration: 0.4s;
	display: flex;
	flex-flow: row;
	
}
.checkDiv{
	display: flex;
	flex-flow: row; 
	transition-duration: 0.5s;
	border-radius: 3px;
	margin: 0rem;
	padding: 0.05rem;
	width: 100%;
	text-align: right;
}
.checkDiv:hover{
	
	background-color: #cecab9;
}
.alertP{
	color: red; 
	display: flex; 
	justify-content: center; 
	height:1.5vh; 
	margin:0%;
	width: 100%;
}
.button1{
	background-color:#031B37;
	border-radius: 4px;
	height: 30px;
	border: none;
	text-align: center;
    text-decoration: none;
    color: white;
	font-size: 18px;
	font-family: MyFontName;
    display:block;
	transition-duration: 0.4s;
	float:none;

	width: 20vw; 
	margin:1vh auto; 
	position: relative;	
	
}

.button1:hover
{
	background-color:#b38902;
    color: #014857;
}
@font-face
{
	font-family: 'MyFontName';
	src: url(font/BYekan+.ttf);

}

.lable{
	direction: rtl;
	width: 200px;
	text-align: right;
	font-family: MyFontName ;
	float:right;
    font-size: 1rem;
    
}
.TavallodDiv{
	width: 520px;
	height: 80px;
	float: left;
	
}
.TavallodLabelsDiv{
	height: 40px;
	width: 520px;
	float: left;

}
.TavallodBoxesDiv{
	width: 520px;
	height: 40px;
	text-align: left;
float: left;
}

.lableT{
	text-align: center;
}

@media screen (min-width:1024){
	.boxesDiv{width: 90%; height: 50vh;}
	.MainDiv{width: 80%;}
	body{
        background-size:100vw 100vh;
        background-repeat: no-repeat;
        background-position:top;
	}
}

@media screen and (min-width:768px)and(max-width:1023){
	.boxesDiv{width: 90%; height: 50vh;}
	.MainDiv{width: 80%;}
	body{
		
        background-size:100vw 100vh;
        background-repeat: no-repeat;
        background-position:top;
	}
	.forms{
		width:85%;
	}
}

@media screen and (max-width:767px){
	body{
		overflow-y: scroll;

	}

	.MainDiv{
		width: 100%;
		top: 26vh;
	}
	.pishraftDivMain{
		width: 45%;
	}
	.boxesDiv{	
        flex-flow: column;
		width: 90%;
	}
    .right{
    	width: 80%;
    }
	.left{
		width: 80%;
	}
	.boxes{
		height: 4vh;
	}
	.select{
		height: 4.3vh;
	}
	.button1{
		width: 60%;
	}
}