html 
  {
     height: 100%;
     direction:rtl;
     font-family: 'El Messiri';
    }
    @font-face {
      font-family: 'El Messiri';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(el.woff2) format('woff2');
      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    }
    body {
      background-color:#FAFAFA;
      direction: rtl;
      font-family: "El Messiri";	
      line-height: 22px;
      color: #01113f;
      font-size:16px;
      }

  h2 {
    padding: 8px;
    line-height: 28px;
    font-size: 17px;
    font-family: "El Messiri";	
    text-align: center;
    color: #ED632C;
  }
  .btn-secondary { background: #e4f0ff; color:#0251a0;}
  .alert-info {
    background: #fff9ec;
    transition: all 0.5s;
    z-index: 997;
    padding: 8px 0;
    box-shadow: 0px 2px 15px #835700;
    border: 1px solid #fcf1cb;
    }
    .alert-primary 
    {   background: rgb(255, 223, 204);  border: 1px solid #fcf1cb; }
.img-responsive {  height: auto;  }
  @media (max-width: 992px) {
    .alert-info  { padding: 14px 0; font-size:12px;}
    .img-responsive { width: 80%;}
    .alert-info ,.sub-tittle-info ,.alert-info h3,h5,em,h4,h6 {font-size:11px;}
  }
  
  /*--------------------------------------------------------------*/
   h6,h5,h4 {
     text-align: right;
     font-size: 20px;
     font-weight: 550;
     color: #5f2600;
     text-shadow: #e0e0e0 2px 1px 2px; 
     margin-right: 20px;  
   }
   h4 {text-align: center; font-size: 20px;}
    i { font-size: 31px;color:#82a0b9;}

.top-wrapper  { margin-top: 228px; text-align: center; }

h3
  { color:#ED632C; font-size: 18px; padding-top: 6px; text-shadow: 1px 1px 2px #d6c9a0; text-align: center}

.wrapper {
    padding: 10px;
    border-radius : 35px;
    font-size: 16px;
    box-shadow: 13px 13px 20px #cfcbbd, -13px -13px 20px #fff;
	  border: 1px solid #f0e0a9; 
     }
     .logo 
     { width: 90px; height: 88px; margin: auto; }
    
  .login 
    { width: 86px; height: 86px; margin: auto; }
  .login img {
    width: 94%;
    height: 91%;
    object-fit: cover;
    border-radius: 50%;   
   box-shadow: 0px 0px 0px 5px #fff5dc,
        8px 8px 15px #a79b81,
        -8px -8px 15px #fff;
  }

  .login 
    { width: 86px; height: 86px; margin: auto; }

.wrapper .name {
  text-align: center;
    font-weight: 410;
    font-size: 20px;
    letter-spacing: 1.2px;
    padding: 3px ;
    text-shadow: #d9ebff 2px 1px 2px;
    color: #aa4303;
}
.wrapper .form-field input {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #aa4303;
    padding: 6px;  
}
.wrapper .form-field {
    padding-left: 6px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: inset 5px 5px 6px #c9c4b6, inset -5px -5px 10px #fff;
    border: 1px solid #f9eac7; 
}
fieldset, form {margin-bottom:0px; }
em { color: #9e3900; font-style: normal}
::placeholder
 {  color: rgb(212, 197, 165); opacity: 1; /* Firefox */}
.fas {color: #aa4303;  padding: 10px ;font-size:20px; }
.wrapper .btn {
    width: 100%;
    background-color:#fff1d1;
    color:#aa4303;
    text-shadow: 2px 1px 1px #d3dfe7;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    box-shadow: 2px 2px 2px #b1b1b1,-3px -3px 3px #fff;
    border: 1px solid rgb(249, 250, 249); 
    font-size:20px;
}
.wrapper .btn:hover {border: 1px solid rgb(245, 212, 140); }
@media(max-width: 380px) {
    .wrapper {
        margin: 30px 20px;
        padding: 40px 15px 15px 15px;
    }
}
.btn-done ,.btn-del , .btn-inst, .btn-print, .btn-exit ,.btn-back
{
  background-color: #fff0ce;
  color:#aa4303;
  border-radius: 10px;
  display:inline-block;
  cursor:pointer;
  font-size:20px;
  text-decoration:none;
  padding: 7px 14px;
  border: none;
  box-shadow: 2px 2px 2px #b1b1b1,-3px -3px 3px #fff;
  border: 1px solid rgb(249, 250, 249); 
}
.btn-inst { background-color: #c6f4ce; align-items: flex-start;}
.btn-exit { background-color: rgb(201, 202, 201);}
.btn-del { background-color: rgb(245, 111, 78);} 
.btn-back { background-color: rgb(247, 248, 179);} 
.btn-print { background-color: #f0e6cc; align-items: flex-start} 
.btn-done:hover , .btn-del:hover , .btn-inst:hover , .btn-exit:hover ,.btn-back:hover
              { box-shadow: 3px 3px 3px #f1e6f0,-3px -3px 3px #b0cacc; }
/*---------------------------------# Sections General--------------------------------------*/
section {
  padding: 12px 0;
  overflow: hidden;
  margin-bottom: 10px;
  transition: all .3s;
}
.section-title {text-align: right; width:100%;}
.sub-tittle-odd , .sub-tittle-even ,.sub-tittle-info , .sub-tittle-select , .sub-tittle-stu 
  {  
    padding: 12px;  
    text-align: center; 
   color:#033d80;
   text-shadow: 2px 1px 1px #d3dfe7;
   background-color:#fff1cf;
   border-top-right-radius : 15px;
   border-top-left-radius : 15px;
   margin-bottom: 5px;
   box-shadow: 2px 2px 2px #b1b1b1,-3px -3px 3px #fff;
   border: 1px solid rgb(248, 246, 246); 
  }

  .sub-tittle-even
  { background-color: #e9f1d6;}
  .sub-tittle-info
   { background-color: rgb(255, 223, 204);}
  .sub-tittle-select
  { background-color: rgb(248, 216, 197); text-align: right;  }
  .sub-tittle-stu , .table-striped
  {  
   text-align: right; 
   color:#f54e00;
   font-size: 18px;
   text-shadow: 2px 1px 1px #d6ecfa;
   background-color: rgb(255, 255, 255);
   border: 1px solid  rgb(255, 188, 126);; 
   }

   .alert-dark
   { background-color: #fff;}
   .alert-success {background-color: #fff0ce;}
/*--------------------------- Footer---------------------------------------------------------*/
#footer {
   padding: 0 0 12px 0;
   background-color: #EDDEBD;
   color: #602826;
    font-size: 16px;
    font-family: 'El Messiri';
    box-shadow: 2px 3px 2px #cdcece,-2px -3px 2px #f5f6f7; 
  }
#footer .copyright { text-align: center; padding-top: 22px;}

@media print {
  #content {
    margin-top:590px;
    display: none !important; 
   }  
}