@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css); 

body{
	margin: auto;
	color: #666666;
	font-family: 'Noto Kufi Arabic', sans-serif;
	font-size: 18px;
    height: 100%;
    direction: rtl;
    background: #eaeaea;
    
     margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
}


/* Shared styles for both table and result boxes */
    .result-box, .result-table {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .result-row {
        display: flex;
        flex-wrap: wrap;
    }

    .result-column {
        flex: 1;
        padding: 5px;
    }

    /* Media query for devices with max-width 768px (typical tablets and phones) */
    @media (max-width: 768px) {
        /* Hide the table on devices with max-width 768px */
        .result-table {
            display: none;
        }
        
        /* Show results in boxes on devices with max-width 768px */
        .result-box {
            display: block;
            background-color: #f9f9f9;
        }

        /* For mobile, display data in two columns */
        .result-column {
            flex: 1 0 50%; /* Two columns */
            width: 50%; /* Two columns */
        }
    }

    /* Media query for devices with min-width 769px (typical desktops) */
    @media (min-width: 769px) {
        /* Hide results in boxes on devices with min-width 769px */
        .result-box {
            display: none;
        }

        /* Show the table on devices with min-width 769px */
        .result-table {
            display: table;
            border-collapse: collapse;
            width: 100%;
        }

        .result-table th, .result-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        .result-table th {
            background-color: #f2f2f2;
        }

        .result-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .result-table tr:hover {
            background-color: #e9e9e9;
        }
    }

p {
	font-family: 'Noto Kufi Arabic', sans-serif;
}

a,a:visited,a:hover,a:active,a:focus {
	text-decoration: none; 
	
}

.head{
	padding:5px;
    text-align:center;
    border:#fff solid 2px;
    width:90%;
	border-radius:12px;
    margin:auto;
background:#f6f5f6;
} 

.head span{
font-weight:bold;
color:#333;
font-size:13px;
} 
.box{
padding:15px;
direction:rtl;
width:95%;
height:auto;
border-radius:12px;
margin:20px auto;
background:#fff;
border:#e8e8e8 solid 2px;
} 


.box span{
color:#5c5c5c;
font-size:17px;
direction:rtl;
text-align:right;
} 

.stat{
font-weight:bold;
color:#d00bb2;
font-size:15px;
direction:rtl;
margin-top:11px;
text-align:center;

} 

form input{
	height: 45px;
   width:90%;
		margin:8px;
	padding: 5px 10px ;
COLOR:#84776f;
	border-radius: 3px;
	border:solid #dedede 1px;
	font-size:16px;
direction:rtl;
}
select{
	height: 45px;
	width:90%;
	border-radius: 3px;
	border:solid #dedede 1px;
	margin:8px;
	padding: 5px 10px ;
	font-size:16px;
line-height:37px;
COLOR:#84776f;
}

form input:last-child{
	margin-bottom:0px;
}
form .submit{
   width:90%;
	height: 40px;
	    color: #fff;
    background:#0099FF;  
	font-size: 14px;
border:1px #0099FF solid;
text-decoration: none;
}
.r22
 {
 width:100%;
	margin-right:25px;
   text-align:right ;
   padding:5px;
   float:right;
}


.fourm{
   text-align:center;


margin:auto;
} 
.td
 {

   	background: #fff;
    color: #333;
	border: 1px solid #eee;
margin:5px;
    font-size: 15px;
	    HEIGHT: 35px;
		font-weight:none !important;
   text-align:center;
}
.td2
 {

   	background: #fbe8fc;
    color: #ff0000;
	border: 1px solid #fff;
margin:5px;
    font-size: 15px;
	    HEIGHT: 35px;
		font-weight:none !important;
   text-align:center;
}
.copy{
	padding:5px;
    text-align:right;
    border:#eee solid 1px;
    width:90%;
	border-radius:12px;
    margin:auto;
background:#fff;
} 
.copy span  a{
font-weight:none;
color:#ff0000;
font-size:11px;
text-decoration:none;
    margin-right:11px;
} 


  .city
{
display: inline-block;
padding-left: 8px;
padding-right: 8px;
text-align: center;
background-color: #d37c43 !important;
margin-bottom: 16px !important;
font-size: 14px !important;
}

.city a {
    color: #fff !important; /* Change to valid hex color code */
}

.note
{
        margin: 20px; /* Adjust as needed */
     background-color: #dff0d8;
     border-right: solid 4px #3498db;
       overflow: hidden;
     padding: 12px;
     	width:97%;
     	border-radius:10px;
     	text-align: center;
}

h2 {
    display: block;
    background-color: #3cae08 !important;
    color: #fff !important;
    border-color: #3cae08;
        border-right-color: rgb(0, 151, 188);
    border-radius: 3px;
    margin: 0 0 20px 0;
    padding: 8px 15px 8px 8px;
    border-right: 5px solid #206201;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


h3 {
    display: block;
    background-color: #3cae08 !important;
    color: #fff !important;
    border-color: #3cae08;
        border-right-color: rgb(0, 151, 188);
    border-radius: 3px;
    margin: 0 0 20px 0;
    padding: 8px 15px 8px 8px;
    border-right: 5px solid #206201;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h4 {
    display: block;
    background-color: #3cae08 !important;
    color: #fff !important;
    border-color: #3cae08;
        border-right-color: rgb(0, 151, 188);
    border-radius: 3px;
    margin: 0 0 20px 0;
    padding: 8px 15px 8px 8px;
    border-right: 5px solid #206201;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content {

padding:15px;
margin:20px auto;
width:95%;
text-align: right;
direction: right;
border:#e8e8e8 solid 2px;
border-radius:12px;

}

.content-title {

border-bottom: 3px solid #00a9e9;
border-top: 3px solid #00a65a;
text-align:center;
padding:5px;
}

#lab_social_icon_footer {
  padding: 40px 0;
  background-color: #dedede;
}

#lab_social_icon_footer a {
  color: #333;
}

#lab_social_icon_footer .social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#lab_social_icon_footer .social {
  -webkit-transform: scale(0.8);
  /* Browser Variations: */
  
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
/*
    Multicoloured Hover Variations
*/

#lab_social_icon_footer #social-fb:hover {
  color: #3B5998;
}

#lab_social_icon_footer #social-tw:hover {
  color: #4099FF;
}

#lab_social_icon_footer #social-gp:hover {
  color: #d34836;
}

#lab_social_icon_footer #social-em:hover {
  color: #f39c12;
}

    /* Basic styling for the header */
header {
background: linear-gradient(to left, #dff4ff, #FFCDCD);
color: #000;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
  margin-left: auto;
margin-right: auto;
width:100%;
}

.logo {
    display: flex;
    align-items: center; /* Center vertically */
}

.logo img {
    max-width: 100%;
    display: block; /* Ensure the image is treated as a block element */
    margin: 0 auto; /* Center horizontally */
}

.menu ul {
    list-style: none;
    padding: 0;
    display: flex;
}

.menu li {
    margin-right: 20px;
}

.menu a {
    text-decoration: none;
    color: #000;
}

.mobile-menu-icon {
    display: none;
}

/* Show mobile-menu-icon and adjust the menu on screens with a maximum width of 768px or less (mobile devices) */
@media screen and (max-width: 768px) {
    .logo {
        text-align: center;
        flex: 1;
    }

    .menu {
        display: none;
background: linear-gradient(to left, #B3DFB8, #D3C5F2);
position: absolute;
        top: 50px;
        right: 10px;
        z-index: 1;
    }

    .menu.active {
        display: block;
        width:95%;
        position: absolute;
        z-index: 1;
        margin-top: 40px;
    }

    .menu ul {
        display: block;
        padding: 0;
    }

    .menu li {
        margin: 10px 0; /* Add margin to separate the links */
    }

    .mobile-menu-icon {
        display: block;
        cursor: pointer;
    }
}

  .container {
max-width: 800px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Shortened to one line */
    display: flex;
    flex-direction: column; /* Stack child divs vertically */
    align-items: center; /* Center child divs horizontally */
        }
        

        .notice {
  margin: 20px; /* Adjust as needed */
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  width: 97%;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 0 2px 0 rgba(19,18,18,.12),0 2px 2px 0 rgba(29,27,27,.24);
  text-align: center;
}