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:#f4faff;
      direction: rtl;
      font-family: "El Messiri";	
      line-height: 22px;
      color: #01113f;
      font-size:16px;
      }
    .teal-color { color:rgb(5, 125, 224); font-size:20px; }
    .red-color {color:rgb(168, 5, 13); font-size:20px;  }
    .row-select{box-shadow: 0px 2px 15px #0f71c6;}
  /*---------------------------Top Bar----------------------------------------------------*/
#topbar {
    background: #065dad;
    color: #fff;
    height: 110px;
    font-size: 16px;
    font-weight: 500;
    z-index: 996;
    transition: all 0.5s;
    display: inline;
  }
  #topbar.topbar-scrolled {top: -40px;}
  #topbar i {padding-right: 6px; line-height: 0;  }
  h2 {
    padding: 8px;
    line-height: 40px;
    font-size: 25px;
    font-family: "El Messiri";	
    text-align: center;
  }
  .btn-secondary {background: #e4f0ff; color:#0251a0;}
  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  .alert-info {
    background: #ffffff;
    transition: all 0.5s;
    z-index: 997;
    padding: 8px 0;
    box-shadow: 0px 2px 15px #0f71c6;
   }
   .img-responsive {  height: auto;  }
   @media (max-width: 992px) {
    .alert-info  { padding: 14px 5px; 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: #046cce;
     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:#eb640b; font-size: 18px; padding-top: 6px; text-shadow: 1px 1px 2px #cadee4; text-align: center}

  .blue-style
  {
    font-weight: 370;
    margin: -20px -20px 18px -20px;
    padding: 18px 6px;
    font-size: 18px;
    color: #025ce4;
    background:#D5E7F9;
    border-top: 6px solid #9ac5fd;
  }

.wrapper {
    padding: 10px;
    border-radius : 35px;
    font-size: 16px;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
	  border: 1px solid rgb(100, 178, 252); 
     }
     .logo 
     { width: 90px; height: 88px; margin: auto; }
     .logo img {
      width: 90%;
      height: 88%;
      object-fit: cover;
      border-radius: 50%; 
      box-shadow: 0px 5px 14px #8eb1f1,
        0px 0px 0px 5px #0254a1,
        5px 5px 15px #afeafc,
        -5px 5px 15px #a2c6f5;
  }
  .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 #edf4fc,
        8px 8px 15px #a7aaa7,
        -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: #cfdff1 2px 1px 2px;
    color: #0377e4;
}
.wrapper .form-field input {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #666;
    padding: 6px;  
}
.wrapper .form-field {
    padding-left: 6px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: inset 5px 5px 6px #cbced1, inset -5px -5px 10px #fff;
    border: 1px solid rgb(214, 235, 245); 
}
fieldset, form {margin-bottom:0px; }
em { color: #0b7fdf; font-style: normal}
::placeholder
 {  color: rgb(165, 193, 212); opacity: 1; /* Firefox */}
.fas {color: #0b7fdf;  padding: 10px ;font-size:20px; }
.wrapper .btn {
    width: 100%;
    background-color:#a9cdf9;
    color:#0248a3;
    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: rgb(155, 211, 248);
  color:#033d80;
  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: #cde1f2; 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: rgb(189, 224, 248);
   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: rgb(192, 252, 232);}
  .sub-tittle-info
   { background-color: rgb(241, 250, 204);}
  .sub-tittle-select
  { background-color: rgb(248, 216, 197); text-align: right;  }
  .sub-tittle-stu
  {  
   text-align: right; 
   color:#e96711;
   font-size: 18px;
   text-shadow: 2px 1px 1px #d6ecfa;
   background-color: rgb(255, 255, 255);
   border: 1px solid rgb(243, 166, 104); 
  }

   .card-header , .card-radio {text-align: center; color: #1b6ec2;}
   .form-check-label ,.card-radio { text-align: right; padding-left: 12px; font-size: 16px;}
  .card-header h2 
  {
    font-family: "El Messiri";
    color: #1b6ec2;
    text-shadow: 2px 1px 1px #304857;
    font-size: 21px;
    text-align: center;
 }
.card
 {border: 1px solid #498ed4;text-align:right;  color: #1b6ec2; font-size: 17px; margin: 10px;}
 .card span { color:#e96711;text-shadow: 2px 1px 1px #d6ecfa; font-size: 19px; padding: 10px;}

/*--------------------------- Footer---------------------------------------------------------*/
#footer {
   padding: 0 0 12px 0;
   background-color: #0359a8;
   color: #ecf0f3;
    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; 
   }  
}