@font-face {
  font-family: "Markazi Text";
  src: url("../fonts/MarkaziText-Regular.ttf");
  font-family: "Droid Arabic Kufi";
  /*src: url("../fonts/Droid.Arabic.Kufi_DownloadSoftware.iR_.ttf");*/
    src: url("../fonts/DroidArabicKufi.ttf");
     /*font-family: "Aljazeera";*/
  /*src: url("../fonts/Aljazeera-font.ttf");*/
    
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  /*--color1: #2f5e9b;*/
 --color1: #283982;
  --color2: #4177BC;

}

#pscode {
font-size: 35px;
color: red;
}

body {
  font-family:  "Droid Arabic Kufi" , "Markazi Text" , serif;
  font-size: 16px;
  /* overflow: auto; */
}
a {
text-decoration: none;   
color: var(--color1);
}
a:hover {
  color: red;
}

#moe{
    position:relative;
    right: 0px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /*max-height: 600px;*/
}

.wrapper {
  position: relative;
  min-height: 100vh;
  position: relative;
  /*min-height: calc(100vh - 60px);*/

}

.main {
    padding: 15px 15px 60px 15px;    /* Footer height */
}


.header {
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid silver;
}

.headerleft{
    float: left;
}
.headerright{
    float: right;
}
.mm{
    min-width:60px;
    height:64px;
}
.oi{
margin-right:15px;
}
.header img {
  margin: 2px 5px 0px 5px;
  height: 60pX;
}

.home {
  /*float: left;*/
  width: 40px;
  height: 40px;
  line-height: 42px;
  text-align: center;
  margin: 10px 6px;
   background-color: var(--color1);
  border-radius: 10%;
  color: #ffffff;
  font-size: 25px;
}
.home:hover{
      background-color: var(--color2);

}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;            /* Footer height */
  border-top: 1px solid silver;
  background-color: #f3f3f3;
  text-align: center;
  font-size: 12px;
  padding: 1px;
  color: #333333;
   /*clear: both;*/
  /*margin-top: 10px;*/
  font-family: serif , "Markazi Text" ,"Droid Arabic Kufi";
}

.footer a {
  text-decoration: none;
  color: #3f1184;
}

.nav {
  position: absolute;
  text-align: right;
  top: 100%;
  left: 0;
  /* background: var(--color1); */
  width: 100%;
  /* display: none; */
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: flex;
   /*margin-bottom: 1px; */
  align-items: center;
  white-space: nowrap;
  background-color: var(--color1);
   /*border-top: 1px solid #ffffff; */
}

/*nav li:nth-child(1) {*/
/*  border-bottom: solid 1px #000000;*/
/*}*/

/*nav li:nth-child(3) {*/
/*  border-bottom: solid 1px #000000;*/
/*}*/

nav li a {
  text-decoration: none;
  color: #fff;
  width: 100%;
  font-size: 18px;
}

nav li a div {
  color: #ffffff;
  padding: 12px;
}

nav li a div .ff {
  color: #ffffff;
  width: 30px;
  font-size: 20px;
}

nav li a div:hover {
  color: #fff;
  background-color: #00000030;
  border-radius: 4px;
}

.nav-toggle:checked ~ nav {
  display: block;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
    /*display: flex;*/
  /*position: absolute;*/
  /*top: -8px;*/
  right: 0;
  /*margin-right: 1em;*/
  height: 100%;
  width: auto;
  /*align-items: center;*/
  font-size: 2rem;
  cursor: pointer;
  margin: 12px 12px 12px 1px;
/*background-color: red;*/
}

/**/

nav {
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

nav a {
  opacity: 0;
  transition: opacity 100ms ease-in-out 20ms;
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 400ms ease-in-out 100ms;
}






.table_container {
  width: 100%;
  margin: auto;
   /*overflow-x: scroll; */
}

.content-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.7rem;
  min-width: 100%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   /*overflow-x: scroll; */
}

.content-table th,
.content-table td {
  padding: 8px 8px 8px 0px;
}

.content-table thead tr {
  background-color: var(--color1);
  color: #ffffff;
  text-align: right;
  /*font-weight: bold;*/
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #909090;
}

.content-table tbody tr:hover {
  background-color: #00987a29;
}

.content-table tfoot {
  background-color: var(--color1);
  color: #ffffff;
  /*text-align: center;*/
  /*font-weight: bold;*/
}




.headlabel {
  width: 100%;
  margin: 10px 0px;
  padding: 10px 10px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid gray;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.errorlabel {
  width: 100%;
  margin: 100px auto 10px auto;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 5px solid red;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  
  
}

fieldset {
  /*width: 100%;*/
  /*font-size: 1rem;*/
  /*border-radius: 5px;*/
  /*margin: auto;*/
  /*padding: 0px 10px;*/
  
    margin: 60px auto;
  border-radius: 5px;
  max-width: 95%;
  padding: 20px;
  box-shadow: 5px 5px 14px #88888848;
}

input[type="text"],
input[type="password"]
{
  /*float: right;*/
  /*text-align: right;*/
  /*width: 100%;*/
  /*border-radius: 5px;*/
  /*border: 1px solid #ccc;*/
  /*overflow: hidden;*/
  /*padding: 4px 4px;*/
  /*font-size: 1rem;*/
  /*box-sizing: border-box;*/
  /*clear: both;*/
  
    display: block;
  width: 100%;
  margin: 5px auto 15px auto;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

label {
  margin: 10px 0px 0px 5px;
}
.labelinfo {
  margin: 0px;
}
.button-row {
  margin: 5px;
}
/*.button {*/
/*  padding: 4px 40px;*/
/*  font-size: 1rem;*/
/*  box-sizing: border-box;*/
/*  border-radius: 4px;*/
/*  border: solid 1px gray;*/
/*  color: #ffffff;*/
/*  background-color: var(--color1);*/
/*  font-family: "Droid Arabic Kufi" , "Markazi Text", serif;*/
/*}*/
.button {
    margin:2px 6px;
  /*padding: 4px 40px;*/
  max-height: 36px;
  min-width: 140px;
  font-size: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  /*border: solid 1px gray;*/
  color: #ffffff;
  background-color: var(--color1);
  font-family: "Droid Arabic Kufi" , "Markazi Text", serif;
}
.button:hover {
  background-color: var(--color2);
  cursor: pointer;
}

select {
  float: right;
  text-align: right;
  width: 100%;
  border-width: 1px;
  border-color: gray;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 4px;
  margin: 5px 5px 5px 5px;
  font-size: 1rem;
  box-sizing: border-box;
  clear: both;
  font-family: "Droid Arabic Kufi" , "Markazi Text", serif;
}


.userpage {
  display: block;
  /* position: absolute; */
  /* width: 100%; */
  margin: 0px 10px;
}

.userpage ul {
  list-style: none;
  padding: 0;
}

.userpage a {
  text-decoration: none;
  color: #fff;
  /* width: 100%; */
  font-size: 18px;
  display: flex;
  margin: 5px 5px;
  align-items: center;
  white-space: nowrap;
  background-color: var(--color1);
}

.userpage div {
  padding: 8px;
  width: 100%;
}

.userpage .ff {
  width: 30px;
  font-size: 20px;
}

.userpage div:hover {
  background-color: #00000030;
  border-radius: 4px;
}

.content-table tbody tr td .ff {
  color: gray;
}








.w3-mySlides {
  display: none;
  width: 100%;
}

.w3-content {
  margin-left: auto;
  margin-right: auto;
  /*max-width: 900px;*/
  position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.w3-badge {
  background-color: #000;
  color: #fff;
  display: inline-block;
  text-align: center;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  cursor: pointer;
  /* padding: 0; */
  border: 1px solid #ccc !important;
  background-color: transparent !important;
}

.w3-container {
  padding: 0.01em 16px;
  text-align: center !important;
  display: inline-block;
  width: auto;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  font-size: 18px !important;
  color: #fff !important;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  width: 100%;
}

.w3-white,
.w3-hover-white:hover {
  color: #000 !important;
  background-color: #fff !important;
}

.w3-left {
  float: left !important;
  cursor: pointer;
}

.w3-right {
  float: right !important;
  cursor: pointer;
}





@media screen and (min-width: 900px) {
  .main {
  width: 90%;
  margin: auto;
  /*padding: 10px 10px;*/
}

.content-table 
{
  font-size: 1rem;
}

.errorlabel {
  width: 80%
}

fieldset {
   width: 600px; 
}

    }