/* css platform comments*/
	body {background-color:#eeffff;}
	.h1 {color:#FF00FF ; text-align:center; font-family:"Comic Sans Ms" ;font-size:70px ; font-weight: bold ;  }
	h2 {color:#AAA239; text-align: center; font-family: sans-serif; font-size: 17px ;}
	.h2-2 {color: #AAA239; text-align: center; font-family: sans-serif ; font-size: 17px }
	.l1 { font-weight: bold; font-style:italic;font-family: monospace; clear: left; text-align: left; color: black}
	.l2 { font-weight: bold; font-style: italic; font-family: monospace;text-align: left; color:  black}
	li {text-align: center;}
	input[type="text"] {background-color: white; }
	input[type="Password"] {background-color: white;}
	a {color: blue;}
	a:visited {color: red}
	a:hover{color: white ; background-color: purple}
	.table-shading-1>tr:nth-child(2n+1) {background-color:purple; color: white; font-weight:bold; }
	.table-shading-2>tr:nth-child(2n) {background-color:lightgrey;}
	.button-list li{list-style-type: none;width: 200px }
	.shadow { box-shadow: 5px 5px 5px lightgreen ; background-color:#505000}
	.border {border: 2px solid blue; border-radius:10px; box-shadow: 3px 3px 3px gray  ; width:100%; margin: auto; text-align: center;  }

.demotext1 {
color: #e0dfdc;
background-color: #567;
letter-spacing: .1em;
text-shadow: 0 -1px 0 #fff;
}
	.left-layer2 {position: relative; left: 10px; top: 0px; width: 25%; }
	.left-layer1 {position: absolute; left: 0px; top: 140px; width: 30%; }
	.right-layer2{  position: relative; top: -80px;left:85% ;width:350px ; padding-left: 1% }
	.right-layer1{ position: relative; top: -100px;left:85% ;width:350px ; padding-left: 1% }
	.center{position: absolute; top: 40px ;left: 30% ;width:40% ; height: 120px}
	.center1{position: absolute; top: 125px ;left: 30% ;width:40%; padding-left: 1% ; }
	.center2{position: absolute; top: 150px  ; width:100%; padding-left: 1% }
	.center3{position: relative; top: 510px  ;width:50%; left:0px;padding-left: 1% }
	.footer {position: absolute; top:640px ;width: 100%; text-align: center; border: 1px black dashed; height: 80px; padding-top: 1px;}
	.button-list a {background-color: lightgrey ;color: blue ;text-decoration: none ;box-shadow: 5px 5px 5px gray; margin-bottom: 2px; border-radius: 6px; display: block;}
	.button-list a:hover {background-color: white; box-shadow: 3px 3px 3px gray;border: none;}
	ul li {display: none}
	ul:hover >li {display: block;}
	.Sign-in {position:sticky; top: 25px; ; left:10px ; color: white; width: 200px; height: 25px; color: black; font-weight: bolder;}
	.prompt {position: absolute; left: 0px; top: 0px; display: none;}
	.Background {width: 80% ; position: absolute; right: 10px ;top: 0px; text-align: center;border: 2px solid darkred; height: 25px; color: white}
	#background-color {width: 300px}
	.label{font-size:20px; font-family:calibri; font-weight:bolder; font-weight: bolder;  }
	.log{border:1px solid black; width: 200px; position:absolute; top: 40px; ; left:10px; text-align: center;display: none; background-color: white;  }
	.page_2_top {position: absolute; top: 0px;left:0 ; width: 100%; height: 50px ; font-size:30px ;  text-align: center; display: none }
	.page_2_bottom {position: absolute; top: 100px;left:0 ; width: 100%; height: 200px ; font-size:30px ;  text-align: center ; display:none; }
    .full-page {position: absolute; top: 0px;left:0 ; width: 100%; height: 100% ; font-size:30px ;  text-align: center }
#Egypt {display:none; top: 100px ; position:absolute; width:100% } 
#Saudi  {display:none; top: 100px ; position:absolute; width:100% } 

.Description {padding-left:5px; font-family:"Comic Sans Ms" ;font-size :12px ;overflow: auto; background-color:white ; width:340px ; height: 60px ; border: 2px solid grey; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 2px; top: -10px;  }

.task {padding-left:5px; font-family:"Comic Sans Ms";font-size:15px ;background-color:lightpink ; width:350px ; height: 120px ; border: 2px solid lightpink; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 10px; top: 5px;  }

.Status {padding-left:5px; font-family:"Comic Sans Ms" ;font-size :12px;background-color:lightpink ; width:210px ; height: 20px ; border: 2px solid lightpink; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 130px; top: -13px;  }

.completedStatus {padding-left:5px; font-family:"Comic Sans Ms";font-size :12px ;background-color:lightgreen ; width:210px ; height: 20px ; border: 2px solid lightgreen; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 130px; top: -13px;  }
	
.completedTask {padding-left:5px; font-family:"Comic Sans Ms";font-size :15px ;background-color:lightgreen ; width:350px ; height: 120px ; border: 2px solid lightgreen; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 10px; top: 5px;  }


.Status2 {padding-left:5px; font-family:"Comic Sans Ms" ;font-size:12px;background-color:orange ; width:210px ; height: 20px ; border: 2px solid orange; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 130px; top: -13px;  }
	
.task2 {padding-left:5px; font-family:"Comic Sans Ms" ;font-size :15px;background-color:orange ; width:350px ; height: 120px ; border: 2px solid orange; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 10px; top: 5px;  }

	
.show-distance {background-color:white ; width:340px ; height: 25px ; border: 2px solid red; border-radius:10px; box-shadow: 3px 3px 3px gray ; position: relative; left: 90px; top:  10px;  }