@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.droid-arabic-kufi{font-family: 'Inter', serif;}



.card  {
  font-family: 'Inter', serif ;
  font-size: medium;
       font-weight: bold;

  margin: 5px;
  border: 1px solid ;
  border-radius: 25px;
  float: left;
     width: 400px;
    box-shadow: #969696 2px 2px 5px;
  text-align: left;}

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

table {
  table-layout: fixed;
  width: 100%;
  font-size: 18px;
}

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

h4.cv {
  font-family: 'Inter';
  font-style: bold;
  color: #0b6f77;
  text-align: center;
}

p.card-text {
  font-family: 'Inter';
  text-align: center;

}

td {
  text-align: center;
}

th[scope="row"] {
  text-align: left;
  width: 30%;
  background-color: #0b6f77;
  color: white;
}
th[scope="col"] {
   font-family: 'Inter';
  text-align: center;
 
  background-color: #0b6f77;
  color: white;
  font-size: 17px;
}
span.email{color: black;}
table.cv {
  text-align: center;
}
ol.research {
  text-align: center;
  width: 90%;
}

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


a.nav-link{font-weight: bold;}

th {color: #0b6f77;}




/*=====================================================================*/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent 

/*================================================*/
.ac-container{
	width: 100%;
	margin: 10px auto 30px auto;
	text-align: left;
}
.ac-container label{
	font-family: 'Inter',  sans-serif;
	padding: 5px 20px;
	font-size: medium;
	position: relative;
	z-index: 20;
	display: block;
	height: 50px;
	cursor: pointer;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	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: 'Inter';
	font-size: medium;
	font-style: : bold;
	text-shadow : 0px 1px 1px rgba(255,255,255, 0.6);
	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;
	right: 13px;
	top: 7px;
	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);
}
.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;
}