html, body {
 width: 100%;
  height: 100%;
  padding:0px;
  margin:0px;
/* display: flex;
   background-color: #999;*/
  scroll-behavior: smooth;
}

a{
margin:auto;
	text-decoration: none;
}
a:link, a:visited { /* or a[href] */
 color:white;
}
th.menu{
color:white;text-align:center;width:50px;height:50px;padding:10px 10px 10px 10px;border:solid 0px #000;cursor:pointer;
}
th.menuname{
color:white;text-align:center;min-width:50px;height:50px;padding:10px 10px 10px 10px;border:solid 0px #000;
}

th.menu:hover{
	background:linear-gradient(to top, #0b4583 50%, #6699FF 100%);
	
	
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  width:100%;
  transform: translate(-50%, -50%);
}

.left{
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 20px;
  width:40px;
    transform: translate(0, -50%);       
}
.right{
   cursor: pointer;
  position: absolute;
  top: 50%;
   right: 20px;
  width:40px;
    transform: translate(0, -50%);
}


.logininput{
width:49%;height:40px;text-align:center;margin:0px 0px 0px 0px;border:thin;color:gray
}

td.footer{
	color:white;text-align:left;height:20px;padding: 3px 3px 3px 3px;font-size:medium;
}

.mapouter{
	background:black;padding:10px 10px 10px 10px;
}

p.list{
	color:white;text-align:left;border-color:#818181;border-style:solid;border-width:1px;margin:0px 0px 5px 0px;padding:15px 0px 0px 5px;height:40px;font-size:small;vertical-align:middle
}
p.list:hover{
	background-color:rgb(23,53,114);border-style:inset
}
div.list{
	color:white;text-align:left;border-color:#818181;border-style:solid;border-width:1px;margin:0px 5px 5px 0px;min-height:40px;font-size:small;vertical-align:middle;cursor:pointer
}
div.list:hover{
	background-color:rgb(23,53,114);border-style:inset
}

div.list2{
	color:white;text-align:left;border-color:#818181;border-style:solid;border-width:1px;margin:0px 5px 5px 0px;height:40px;font-size:small;vertical-align:middle;cursor:pointer
}
div.list2:hover{
	background-color:rgb(23,53,114);border-style:inset
}

td.phase{
	padding:5px 5px 0px 5px;white-space:nowrap
}

a.file{
     color:white;font-size:medium;font-weight:normal;cursor:pointer;
	 display:inline-block;    
    line-height:48px; /* check your icon height */    
    padding-left:54px;    
    background: transparent url(../images/ficons/blank.png)  center left  no-repeat; 
}
a.file:hover{
	color:green;
}

td.list{
	color:white;text-align:left;background-color:transparent;border-color:#818181;border-style:solid;border-width:1px;margin:0px 0px 5px 0px;min-height:40px;font-size:medium;vertical-align:middle;text-align:center;font-weight:bold;cursor:pointer;white-space:normal
}

td.iconlist{
	color:white;background-color:transparent;border-color:#818181;border-style:solid;border-width:1px;margin:0px 0px 5px 0px;height:40px;font-size:small;vertical-align:middle;text-align:center;font-weight:normal;cursor:pointer;white-space:normal
}

td.list:hover{
	background-color:rgb(23,53,114);
}

td.selectedlist{
	color:white;text-align:left;background-color:red;border-color:#818181;border-style:solid;border-width:1px;margin:0px 0px 5px 0px;height:40px;font-size:medium;vertical-align:middle;text-align:center;font-weight:bold;cursor:pointer
}
td.selectedlist:hover{
	background-color:rgb(23,53,114);
}



ul.pro
{
color:white;
 height:100%;
 width:100%;
    list-style-type:none;
    padding:0px;
    margin:0px;
    overflow:hidden;
    vertical-align:top;
}

<!-- خصائص القائمة -->
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   

  height: 100vh;
  width: 0;
  position:absolute; /* Stay in place */

  left: 0;
  top: 0;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  background-color: rgba(0,0,0, 0.9);
  background-color: rgb(0,0,0); /* Black fallback color */
   /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  /* position:relative; */
  top: 0%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  /* margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 0px;
  text-decoration: none;
  color:#f1f1f1;
    display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color:white ;
   font-weight:bold;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
z-index: 1;
position: absolute;
top:2px;
right: 10px;
font-size: 35px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 20px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 0px;
    right: 35px;
  }
}

img.gallery1{
 max-width:100%;max-height:100%;border-style:none;border-color:white;cursor:pointer;margin:auto
}
img.gallery1:hover{
 border-style:none;border-color:white;
}



p.powerdby{	
	 text-decoration: none;
  color:#818181;
    display: block; /* Display block instead of inline */
  transition: 0.3s;
}
  p.powerdby:hover {
  color: #f1f1f1;
}
div.gallery{
	
	width:200px;height:200px;border-style:solid;border-width:thin;border-color:#999999;cursor:pointer;text-align:center;vertical-align:center;display:flex;margin:auto

}
div.gallery:hover{
 border-style:outset;border-color:white;
}

@keyframes rotation {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(359deg);
		}
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
  animation: rotation 2s infinite linear;
}
.parent {
  margin: auto;
  display:flex;
  height: 100%;
  width: 100%;
  background: rgb(23,53,114) url('../images/whiteonly.png') no-repeat fixed center center;
}

.circle{
	 margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
   animation: rotation 2s infinite linear;
	border:8px red solid;
	border-radius :50%;
	width:160px;height:160px;background-color:transparent;border-color:green;
	clip-path: circle(85% at 0%);
	 display:flex;

}
.innercircle{
	 margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
     animation-delay:2s;
   animation: rotation 4s infinite;
   animation-direction:reverse;
	border:thick red solid;
	border-radius :90%;
	width:140px;height:140px;background-color:transparent;border-color:white;
clip-path: circle(50% at 0%);


	
}

a.file[href$='.pdf'] {    
        background-image:url(../images/ficons/pdf.png)
}   
a.file[href$='.bmp'] {    
        background-image:url(../images/ficons/bmp.png)
}   
a.file[href$='.doc'] {    
        background-image:url(../images/ficons/doc.png)
}   
a.file[href$='.docx'] {    
        background-image:url(../images/ficons/docx.png)
}   
a.file[href$='.dwg'] {    
        background-image:url(../images/ficons/dwg.png)
}   
a.file[href$='.dxf'] {    
        background-image:url(../images/ficons/dxf.png)
}   
a.file[href$='.exe'] {    
        background-image:url(../images/ficons/exe.png)
}  
a.file[href$='.flv'] {    
        background-image:url(../images/ficons/flv.png)
}   
a.file[href$='.gif'] {    
        background-image:url(../images/ficons/gif.png)
}   
a.file[href$='.html'] {    
        background-image:url(../images/ficons/html.png)
}   
a.file[href$='.jpg'] {    
        background-image:url(../images/ficons/jpg.png)
}   
a.file[href$='.mid'] {    
        background-image:url(../images/ficons/mid.png)
}   
a.file[href$='.mov'] {    
        background-image:url(../images/ficons/mov.png)
}   
a.file[href$='.mp3'] {    
        background-image:url(../images/ficons/mp3.png)
}   
a.file[href$='.mp4'] {    
        background-image:url(../images/ficons/mp4.png)
}   
a.file[href$='.mpg'] {    
        background-image:url(../images/ficons/mpg.png)
}    
a.file[href$='.php'] {    
        background-image:url(../images/ficons/php.png)
}   
a.file[href$='.png'] {    
        background-image:url(../images/ficons/png.png)
}   
a.file[href$='.psd'] {    
        background-image:url(../images/ficons/psd.png)
}   
a.file[href$='.rar'] {    
        background-image:url(../images/ficons/rar.png)
}   
a.file[href$='.rtf'] {    
        background-image:url(../images/ficons/rtf.png)
}   
a.file[href$='.tiff'] {    
        background-image:url(../images/ficons/tiff.png)
}   
a.file[href$='.txt'] {    
        background-image:url(../images/ficons/txt.png)
}   
a.file[href$='.wav'] {    
        background-image:url(../images/ficons/wav.png)
}   
a.file[href$='.xls'] {    
        background-image:url(../images/ficons/xls.png)
}   
a.file[href$='.xlsx'] {    
        background-image:url(../images/ficons/xlsx.png)
}   
a.file[href$='.xml'] {    
        background-image:url(../images/ficons/xml.png)
}   
a.file[href$='.zip'] {    
        background-image:url(../images/ficons/zip.png)
}    





/* change padding-right to padding left and background 
position center right to center left 
if you want  to display icon on the left side */