@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.Noto-Kufi-Arabic{font-family: 'Noto Kufi Arabic', serif;}


*{text-align: right;}
.card  {
  font-family: 'Noto Kufi Arabic', serif;
  font-size: medium;
   font-weight: bold;
  margin: 5px;
  border: 1px solid ;
  border-radius: 25px;
  float: right;
     width: 345px;
    box-shadow: #969696 2px 2px 5px;
  text-align: right;
 direction: rtl;

}
.row{
  direction: rtl;

}
img.card-img-top {
  display: block;
  margin-left: auto;
  margin-right: auto;
 width: 150px;
  height: 180px;
  padding: 5px; 
}


table {
  table-layout: fixed;
  width: 100%;
  font-family: 'Noto Kufi Arabic' ;
}

h3.job-title{color: white; text-align: center; background-color: #0b6f77;
  font-family: 'Noto Kufi Arabic';
}
h4.card-title {
  color: #0b6f77;
  font-family: 'Noto Kufi Arabic';
  text-align: center;
}

h4.cv {
  font-family: 'Noto Kufi Arabic';
  font-style: bold;
  color: #0b6f77;
  text-align: center;
}
a{
  color:black;
}
p.card-text {
  font-family: 'Noto Kufi Arabic';
  text-align: center;

}

td {
  text-align: center;
}

th[scope="row"] {
   font-family: 'Noto Kufi Arabic';
  text-align: right;
 
  background-color: #0b6f77;
  color: white;
  font-size: 17px;
}
th[scope="col"] {
   font-family: 'Noto Kufi Arabic';
  text-align: center;
 
  background-color: #0b6f77;
  color: white;
  font-size: 15px;
}
table.cv {
  text-align: center;
}
ol.research {
  text-align: center;
  width: 50%;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
 
    margin-right: 10%;
    margin-left: 10%;
}



th {color: #0b6f77;}

.address{  
  text-align: center;
  padding: 10px; 
}






/*=====================================================================*/
.ac-container{
  width: 100%;
  margin: 10px auto 30px auto;
  text-align: right;
}
.ac-container label{
  font-family:'Noto Kufi Arabic';
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 50px;
  cursor: pointer;
  color: #ffffff;
 
  line-height: 33px;
  font-size: medium;
  background: #0b6f77;
  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
  box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
    0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
  background: #fff;
  color: #0b6f77;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
  background: #09585d;
  color: #fff;
  font-family: 'Noto Kufi Arabic';
  font-size: medium;
  font-style:bold;
  
  box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  left: 13px;
  top: 9px;
  background: transparent url(../images/arrow_down.png) no-repeat center center; 

}
.ac-container input:checked + label:hover:after{
  background-image: url(../images/arrow_up.png);
  position: absolute;}
.ac-container input{
  display: none;
}
.ac-container article{
  background: rgba(255, 255, 255, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container input:checked ~ article{
  -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-large{
  height: auto;
}