@font-face {
  font-family: "WeblySleekUISemilight";
  src: url("../fonts/weblysleekuisl.eot");
  src: url("../fonts/weblysleekuisl.eot?#iefix") format("embedded-opentype"),
    url("../fonts/weblysleekuisl.woff") format("woff"),
    url("../fonts/weblysleekuisl.ttf") format("truetype"),
    url("../fonts/weblysleekuisl.svg#WeblySleekUISemilight") format("svg");
}

@font-face {
  font-family: "Almarai";
  src: url("../fonts/Almarai-Regular.ttf") format("truetype");
}

  @font-face {
  font-family: "MarkaziText";
  src: url("../fonts/MarkaziText-SemiBold.ttf") format("truetype");
}


* {
  font-family: "Almarai", sans-serif;
}

.btn-group .notActive,#radioBtn .notActive{
  color: gray;
  border-color: gray;
  background-color: #fff;
  border-style: dotted;
  opacity: 0.5;
}

.nooo1 .notActive{
  color: #fff;
  border-color: #fff;
  background-color: gray;
  border-style: dotted;
  opacity: 0.5;
}

.badge{
word-wrap: break-word;
padding: 10px;
font-weight: 400;
font-size: 1em;
line-height: 1.2em;
cursor: pointer;
white-space: pre-wrap;
}

.tag{
padding: 6px;
line-height: 1.4em;
font-size: 0.9em;
}


.tag-addon:last-child {

  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}
.tag-addon {
padding: 5px;
margin: -6px 6px -6px -6px;
}

.nav-pills .nav-item .nav-link{
padding: 10px !important;
}

.noline:hover{
text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before{

content: "›" !important;

vertical-align:top;

color: #408080;

font-size:24px;

line-height:18px;
}





/* Timeline style */

.htimeline {list-style: none; padding: 0; margin: 10px 0 0; }

.htimeline .step { 
float: right; 
border-bottom-style: solid; 
border-bottom-width: 5px; 
position: relative; 
margin-bottom: 10px; 
text-align: right; 
padding: 0px 0 5px 0px; 
background-color: #ddd; 
color: #333; height: 60px; 
vertical-align: middle; 
border-right: solid 1px #bbb; 
transition: all 0.8s ease;
}

.htimeline .step:nth-child(odd) { background-color: #eee; }
.htimeline .step:first-child { border-right: solid 1px #bbb; }
.htimeline .step:hover { background-color: #ccc; border-bottom-width: 6px; }

.htimeline .step div { margin: 0 5px; font-size: 14px; vertical-align: top; padding: 0;}

.htimeline .step.green { border-bottom-color: #348F50;}
.htimeline .step.orange { border-bottom-color: #F09819;}
.htimeline .step.red { border-bottom-color: #C04848;}
.htimeline .step.blue { border-bottom-color: #49a09d;}

.htimeline .step::before { width: 15px; height: 15px; border-radius: 50px; content: ' '; background-color: white; position: absolute; bottom: -10px; left: 0px; border-style: solid; border-width: 3px; transition: all 0.8s ease;}
.htimeline .step:hover::before { width: 18px; height: 18px; bottom: -12px; }
.htimeline .step.green::before {border-color: #348F50;}
.htimeline .step.orange::before {border-color: #F09819;}
.htimeline .step.red::before {border-color: #C04848;}
.htimeline .step.blue::before {border-color: #49a09d;}

.htimeline .step.green::before { 
width: 15px; 
height: 15px; 
border-radius: 0; 
content: ' '; 
background-color: white; 
}

.htimeline .step.red::before { 
width: 15px; 
height: 15px; 
border-radius: 0; 
content: ' '; 
background-color: white; 
}



.htimeline .step::after { 
content: attr(data-date); 
position: absolute; 
bottom: 0px; 
right: 17px; 
font-size: 11px; 
font-style: italic; 
color: #888}

/* End Timeline Style */