.box {
  border-radius: 10px;width:70%;padding:10px;margin:100%;
  background-color: #FFFFFF;
  margin:0 auto;
  box-shadow: 2px 2px 2px #aaaaaa;

}
.mdbox{
width:100%;
padding:50px;
margin-top:-5%;

}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #E6E6E6;
  
}

li {
  float: right;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size:18px;
}


li a:hover:not(.active) {
  background-color: rgba(214,214,214,0.2);;
}


#menup{
width:100%;height:10%;background:#E6E6E6;padding:0;text:left;position:fixed;
z-index:99;

}

.menuw{display:none}

.right{
float:right;
}
.left{
float:left;

}
.menus{	
        width:25%;
        position:fixed;
        top:5%;
		left:0%;
		z-index:999999;
		display:none;

		}
		
.menus ul li{
    display:block;
	width:100%;
    text-align:right;
	
	border:1px solid #F2F2F2;
    background:#FFFFFF;
}
.menus ul li a{width:100%;text-align:right;}








@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .Box {
    background-color:#ccc;
    }
#genpass{position:relative;top:35px;right:-95%;}
#watch ,#inwatch{position:relative;top:-35px;right:-87%};	
}

@media only screen and (max-width: 600px) {
.front{
display:inline-block;
width:100%
}
.showstart{width:100%}

#menup{
width:100%;
background:none;

}

li , .right,{
  float:none;
  
}
.menus{
left:20%;

}





}


body {
  background-color: rgba(214,214,214,0.2);;
  
}
#ulone{ float:right;}
#ultwo{
float:right;

width:90%;
}
#fp{
 width:100%;border:1px solid #D8D8D8;margin-right:-15PX;background-color: #f2f2f2;

}
#fp div{
padding:5px;margin-top:10%;
	
}
#p1{
width:40%;
float:right;	
}
#p2{
width:50%;
float:left;	
}
.imgp{float: right;width:10%;margin-right:25px}

.textp{direction: rtl;font-size:18px;float:left;width:80%;}
 #menu2{
display:none;
padding:5px;
cursor:pointer;
float:left;

}

 .timestamp{cursor:pointer}
  
 



.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  margin:15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor:pointer;
}

.highlight{ 
  background:#00FF00; 
  padding:1px; 
  border:#00CC00 dotted 1px; 
}
.intro{display:inline-block;padding:10px;width:100%}
.audtra  {cursor: pointer}
.audtra span {display:none}

.saudio{display:inline-block;padding:10px;border:1px solid #F2F2F2;height:150px;overflow-x: hidden;overflow-y: scroll;width:44%;text-align:left}
.Pdecta{display:inline-block;padding:10px;width:45%;}
#spelld{position:fixed;top:0;left:29%;width:42%;background-color:#bddbfa;height:100%;display:none;z-index:99999}
.ifram{border:1px solid #bddbfa;position:fixed;top:50px;left:29%;width:42%;background-color:#bddbfa;height:100%;z-index:99;}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 90%;
  min-height: 250px;
  margin:0 auto;
  margin-top:-50px;
  display:none;

}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  
}

.container {
  padding: 2px 16px;
  min-height: 150px;
  background:white;
  
}


input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
}

input[type=submit]:hover {
  background-color: #45a049;
}
textarea {
  width: 100%;
  height: 70px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  font-size:24px;
}
div {
  border-radius: 5px;
  padding: 10px;
}


.vertical-menu {
  width: 105%;
  margin-top:-17px;
  margin-left:-17px;
}

.vertical-menu span {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu span:hover {
  background-color: #ccc;
}

.vertical-menu span.active {
  background-color: #04AA6D;
  color: white;
}

.button ,.bword{
  background-color: rgba(0, 173, 14); /* Green */
  border: none;
  color: white;
  padding: 11px 45px;
  margin:15px ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  cursor:pointer;
  border-radius: 20px;

}
.bword{
  background-color: white;
  border: none;
  padding: ;
  margin:0 ;
  color: black;
  font-size: 20px;
}

  a:link {
    color:#000;
    text-decoration: none;
  }
  a:visited {
    color:#000;
  }
  a:hover {
    color:#33F;
  }
 
  .center {
    padding: 10px;
    text-align: center;
  }
  .final {
    color: black;
    padding-right: 3px; 
  }
  .interim {
    color: gray;
  }
  .info {
    font-size: 14px;
    text-align: center;
    color: #777;
    display: none;
  }
  
  .sidebyside {
    display: inline-block;
    width: 45%;
    min-height: 40px;
    text-align: left;
    vertical-align: top;
  }
  #headline {
    font-size: 100px;
    font-weight: 300;
  }
  #info {
    font-size: 30px;
    text-align: center;
    color: #777;
    visibility: hidden;
  }
  #results {
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: left;
    min-height: 100px;
	width:90%;
	
	margin:0 auto;
  }
  #start_button {
    border: 0;
    background-color:transparent;
    padding: 0;
	position:fixed;
	left:47%;
	bottom:10px;
	width:9%;
	z-index:999999;
	display:none
  }
#final_span{
font-size: 50px;
width:100%;
color:black;
	
}


.spcho {
cursor:pointer;
width:100%;
display:block;
margin:2px;
}
.spcho b{
margin:-5px;
margin-right:5px;

}
.cho {
margin:5px;	
}

#titlepha{position:absolute;
   top:0px;}
.titlepha{position:absolute;
   right:70PX;} 

  
.ftitle{
	background-color:#f2f2f2;
    text-align:center;
    position:fixed;
    top:-10px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width:100%;
    z-index:99999;
    margin:0px;
    padding-top:20%;
	width:100%;
  }
.spcho {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:transparent;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	width:20%;
	min-height:100PX;
	vertical-align:top;
}
.spcho:hover {
	background-color:transparent;
}
.spcho:active {
	position:relative;
	top:1px;
}

@keyframes blink {
   
    0% {
      opacity: .2;
    }
   
    20% {
      opacity: 1;
    }
   
    100% {
      opacity: .2;
    }
}
.saving,.startPhase{
    
	margin-top:-10%;
	}
.saving span , .startPhase span{
    font-size:124px;
	margin-top:-20%;
    animation-name: blink;
	animation-duration: 1.4s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color:black;
}

.saving span:nth-child(2) , .startPhase  span:nth-child(2){
   
    animation-delay: .2s;
}

.saving span:nth-child(3) , .startPhase span:nth-child(3){
   
    animation-delay: .4s;
}
.grid-container {
 
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
  gap: 10px;
  padding: 10px; 
  align-items:self-start;
}

.grid-item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  min-height: 200px;
}
.grid-item:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  
}
.grid-item a{font-size:20px;}
.phase{
  width: 20px;
  height: 20px;
  line-height: 20px;
  display:inline-block;
  border-radius: 50%;
  font-size: 25px;
  color: #fff;
  text-align: center;
  cursor:pointer;
  background-color: rgba(0, 173, 14); 

}
#dphase{
   position:absolute;
   left:0;
}
#addUrtrans{ 
       cursor:pointer;float:right;margin-top:5px;
    }
.cphrase{ 
       margin-left:70px;font-size:30px
    }
.cphrasear{
	 margin-right:150px;
}
#db{       
   position:absolute;
   bottom:0;
   left:-25px;
   width:100%;
   height:100px;
   z-index:999;
   display:none
  }

.startwl2{
	cursor:pointer;
	display:inlin-block;
	
	
}
#next{
	cursor:pointer;
	display:inlin-block;
	
	
} 
 
.Check{
	background:#D8D8D8;
	color:848484;
	cursor:unset;
	display:inlin-block;
}
#msg{
	   position:absolute;
    left:0;
   cursor:default;
   bottom:0px;
   width:47%;
   min-height:70px;
   z-index:999;
   text-align:center;
   display:none}
	
#phrasear{
	margin-right:150px;
	margin-top:-20px;
	display:none
	}
.phrase{
	margin-left:70px;
    margin-top:-20px;
	font-size:20px;
	display:none}	
#words{margin-top:-20px;position:relative;
z-index:9999;
   bottom:10PX;}		
.trans{width:70.5%;margin:0 auto;margin-top:-60px;
}	
.msg{       
   position:fixed;
   left:-20px;
   bottom:160px;
   width:70%;
   height:100px;
   z-index:999;
   text-align:center;
   display:none
  }
.dcho{display:none}

.myButton{
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:4px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}

.page{display:inlin-block;border:1px solid #D8D8D8;padding:5px;cursor:pointer;font-weight:bold;}
.Cpage{border : 2px solid green;}
#daudio_file,#FromURl{text-align:center;width:30%;cursor:pointer}

@media only screen and (max-width: 600px) {
#fp,#p1,#p2{
width:100%;
}
#fp div{
padding:0px;
}
.imgp{
	float:none;
    width:20%;
    margin-right:40%;
	padding:5px;
	   }

.textp{float:none;width:100%;padding:5px;
}
 	
#menu2{
display:block;	
margin-top:-17%;

}

}
#loadimg {
	     display:none;
         position:fixed;
         top:50%;
         left:45%;
         z-index:9999999
      }
#logo{font-size:20px;float:left;}
#closeq{float:right;cursor:pointer;color:white;margin-top:-30px;font-size:30px;padding:10px;   
   }	  
@-moz-document url-prefix() { 
#titlepha{position:absolute;
   top:-10px;}

#closeq{float:right;cursor:pointer;color:white;margin-top:-30px;font-size:30px;padding:10px;   
   }
}

.box2{height:100%;display:none;background:#E6E6E6;position:fixed;top:0px;left:14.50%;z-index:999999999999;width:70%}
form{background-color: white;height: 290px;border: 1px dotted black; overflow-x: hidden;overflow-y: scroll;width:89%;margin:0 auto}
#pagedwl{background-color: #eee;min-height: 30px;border: 1px dotted black; text-align:center}
#pagi{float:right;}
#dl{float:left;}
.inputsc{width:90%}
.decta{vertical-align:top; ;width:90% ; background-color: #f2f2f2;}

.decta > div{padding:50px}
#trans,#transR{margin:10px;font-size:24px;padding:10px;border:1px solid #F2F2F2;height:150px;overflow-x: hidden;overflow-y: scroll;width:95%}
#norsltt{margin:10%;text-align:center;width:100%;position:relative;right:90%;}

#dotmor{
  height: 50px;
  width: 50px;
  background-color: orange;
  border-radius: 50%;
  display:none;
  position:fixed;
  right:3%;
  bottom:3%;
  z-index:9999;
  cursor:pointer;
	
	}
#dotmor p{
  width: 20px;
  height: 20px;
  line-height: 20px;
  display:inline-block;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;color:white;position:relative;top:-100%;left:-10%	}
#playp{margin-left:110px} 


.hsm1{display:none}

#hsm,#hsmm{
padding:5px;
display:inline-block;
width:50%;cursor:pointer;
border:0;
float:right;
margin-top:15%;text-align:center
}
#hsmm{display:none}
#ultwo{
float:right

width:100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: right;
  padding: 8px;
}


tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}


input[type=text],input[type=password],#category{
  border-radius: 10px;
  width:90%;
  padding:10px;
  margin:10px;
  box-shadow: 5px 5px 5px #aaaaaa;
  font-size:25px;
}


input[type=submit] ,.botton{
  border-radius: 10px;
  width:50%;padding:10px;margin:10px;box-shadow: 5px 5px 5px #aaaaaa;
  background-color: #01DFA5;
  color:white;
  font-size:25px;
}


#container{
    width:200px;
    margin:0 auto;
    margin-top:10%;
}

form {
    width:87%;
    padding: 30px;
    border: 1px solid #f1f1f1;
    background: #fff;
}

#container h1{
    width: 38%;
    margin: 0 auto;
    padding-bottom: 10px;
}



input[type=submit],.myButton,.bactive{
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:4px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}
input[type=submit]{
	padding:12px;
	width:95%;
	border-radius: 10px;
	
  
	
}
.bactive{
	background:none;
}
.action{cursor:pointer}


.grid-container > div {
  
  text-align: center;
  
  font-size: 30px;
}
#addUrtransF{
	background:#E6E6E6;display:none;position:fixed;top:0px;left:14.50%;z-index:8;width:70%;
	
  }
#recorder{
	background:#E6E6E6;display:none;position:fixed;top:100px;left:14.50%;z-index:999999;width:75%;height:300PX
         }
#Rphrase{
	     margin-top:-10PX;
		 height: 50%;
		 overflow-x: hidden;
		 overflow-y: scroll;
		 direction:ltr;
		 }
#recordingsList{
	       width:55%;margin:0 auto
		   }		 
#dcontrols{
	       width:100%;
		   
		   
		   }
#dlistfiles{
	       display:none;background:#E6E6E6;position:fixed;top:0px;left:14.50%;z-index:9999999;width:75%;height:100%;overflow-x: hidden;
		   overflow-y: scroll;
		   direction:ltr;
		   }
		   
		   
#gocon{ display:none;background:#E6E6E6;position:fixed;top:0px;left:14.50%;z-index:9999999;width:70%}
.dlogin{background:#E6E6E6;position:fixed;top:0px;z-index:9999999;width:90%}
.imgbasket{width : 70px; height:70px;}
.quantity{width : 150px;height:70px;text-align:center;font-size:20PX}	
.txtprice,.ttxtprice{
	text-align:right;font-size:20PX;
	}	
.tgtxtprice{
	   border:1px solid rgba(214,214,214,0.2);width:50%;
	   text-align:left;
	   float:left;
	   }
@media only screen and (max-width: 600px){
#dotmor{display:inline-block}
.mop{display:none ;margin-right:-110px}	
.bmop{width:110%;text-align:center}
#ulone{ float:unset}
#floatBar{display:none;}
.bfloatBar{width:100%;margin-right:-20px;text-align:center;}
#titlepha{font-size:20px}	
	
.box2{width:100%;left:-10PX;}	
form{width:78%;}
#pagedwl{width:99%;}
#pagi{float:none;}
#dl{float:none;}
#words{margin-top:-30px;}
.grid-container {
    grid-template-columns: auto;
  }
 
.grid-item { margin-left:-12px;}

#dphase{
	position:static;
	float:left;
   text-align:center;
   margin-left:-10px;
   margin-top:-30px;

   width:100%
}
.phase{
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 18px;
 

}
#speech{margin-top:-30px;}
#info{font-size:18px}
#final_span{font-size:24px}
.card {margin-top:-70px;}

#db{       
 
   bottom:10px;margin-right:-15PX;
 text-align:center;
  }
.cphrase{ 
       margin-left:10px;
	   font-size:24px
	   
    }
.cphrasear{
	 margin-right:10px;
	 font-size:24px
}
  
#msg{       
  
   bottom:25px;
  
   left:50%;
   transform: translate(-50%, -50%);
  }  
  
#phrasear{
	margin-right:15px;
	margin-top:10px;
	}
.phrase{
	margin-left:15px;
   }
.trans{width:90%;}	   
#start_button {
    
	
	left:53%;
	bottom:19%;
	
  }  
  
#loadimg ,.saving{
	    
         
         left:40%;
         
      }  
#spelld,.ifram{left:0;width:100%;}
.decta > div{padding:12PX;}
.Pdecta{padding:5px;width:100%;}
#daudio_file,#FromURl{width:70%;margin-left:-15PX}
.saudio{width:99%;margin-left:-15PX;margin-bottom:15PX}
.practice{margin-left:-15PX;}
#trans,#transR,#btn-export{margin-left:-18PX;;width:110%}
#norsltt{right:-20%;}
.startwl2{
	width:15%;
	position:static;
	margin-right:-15PX;
   
}
#startwl{margin-right:-20PX;} 
#next,.Check{
	width:15%;
	position:static;
    
} 
#playp{margin-left:30px} 

#ultwo{
float:right;

width:100%;
}

#menu2{
display:block;	
margin-top:-12.3%;

}
#hsmm{
padding:0;
display:inline-block;

width:15%;

float:right;
margin-top:-12.3%;margin-left:20%;
}
#hsm,#ultwo{display:none;}
.menus{	
        width:100%;
        
        top:5%;
		left:-4%;
		z-index:999999999999;
		

		}
		
#gocon{ width:100%;height:100%;left:0%;}
#gocon > form{margin-left:0%;width:70%;}
.dlogin{width:100%;left:-12PX}		
#addUrtransF{
	left:0%;
	width:100%;
	height:70%;
	
  }
#addUrtransF > form{
	margin-left:0%;
	width:70%;
	height:100%;
	
  }		
		
#Rphrase{
	     width:100%;
		 }	
		 
#recorder{
	     width:95%;
		 left:0%;
         }		
#recordingsList{
	       width:110%;
		   margin-right:-20PX;
		   }		 
#dcontrols{
	       width:100%;margin-left:-20PX;
		   
		  }
#dlistfiles{
	       width:100%;margin-left:-40PX;
		   }
#menu2{
         float:left;
         

        }
#hsmm{
        float:left;
        
        }		  
table, thead, tbody, th, td, tr { 
		display: block; 
		text-align:center;
		width : 100%;
		
	}
tr { 
		
		border-bottom:10px solid gray;
	}	
th {display:none}	
	
.imgbasket{width : 100%; height:100%;}
.quantity{
	width : 90%;
    height:70px;
	font-size: 50px;
	text-align:center}	
.txtprice,.ttxtprice,.tgtxtprice{
	
	font-size: 50px;
	text-align:center
	}		
.tgtxtprice{width:100%}	
		  
 @-moz-document url-prefix() {
	 
	 .grid-item { margin-left:0PX;}
     #next,.Check,.startwl2{
	    width:11%;
      }
	  #dotmor p{
               left:-20%	}
	  .mop{margin-right:-50px}	
	   #menu2{

         margin-top:-17%;

        }
       #hsmm{
        
        margin-top:-16%;
        }
	 }
}