@font-face {
    font-family: 'Cairo-Regular';
    src: url('Cairo-Regular.ttf') format('woff');
}

body {
    font-family: 'Cairo-Regular' !important;
}

.ArFont {
    font-family: 'Cairo-Regular' !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo-Regular' !important;
}

.dirRL {
    direction: rtl;
}

.label-green {
    color: Green;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.label-dark-green {
    color: #071713;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.label-light-green {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    background-color: #5bbd44;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.label-gold {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: Black;
    background-color: #fcff00;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.label-orange {
    color: #ff6600;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.label-light_orange {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    background-color: #fdb632;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.label-red {
    color: Red;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.label-purple {
    color: #88258f;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.label-blue {
    color: #5382ca;
    font-size: 100%;
    font-weight: 900;
    text-align: center;
}

.fab, .far, .fas {
    width: 20px;
}
/*madayn red box style*/
.box.box-solid.box-madaynred {
    border: 1px solid #B04A5A;
}

    .box.box-solid.box-madaynred > .box-header {
        color: #fff;
        background: #B04A5A;
        background-color: #B04A5A;
    }
        .box.box-solid.box-madaynred > .box-header a, .box.box-solid.box-madaynred > .box-header .btn {
            color: #fff;
        }
.box.box-madaynred {
    border-top-color: #B04A5A;
}
/*madayn purple panel style*/
.panel-madayn-purple {
  border-color: #d4c2ea;
}
.panel-madayn-purple > .panel-heading {
  color: white !important;
  background-color: #2E1A47;
  border-color: #d4c2ea;
}
.panel-madayn-purple > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-madayn-purple > .panel-heading .badge {
  color: #dff0d8;
  background-color: #2E1A47;
}
.panel-madayn-purple > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d4c2ea;
}
/*Madayn yellow callout*/
.callout.callout-madaynyellow {
  background-color:#E59E6D;
  border-color: #e58b4d;
  color:#fff;
}
/*Madayn yellow alert*/
.alert-madaynyellow {
 background-color:#E59E6D;
  border-color: #e58b4d;
  color:#fff;

}
/*Madayn yellow Button*/
.btn-madaynyellow {
  background-color: #E59E6D;
  border-color: #e58b4d;
  color:#fff !important;

}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.hover {
  background-color: #e58b4d;
  color:#fff !important;

}
/*Madayn red Button*/
.btn-madaynred {
    background-color: #B04A5A;
    border-color: #ae4858;
    color: white;
}

    .btn-madaynred:hover, .btn-madaynred:active, .btn-madaynred.hover {
        background-color: #c66473;
        color: #fff !important;
    }

/*progressbar bar */
.progressbar {
  counter-reset: step;
  padding:0px;
  text-align:center;
}
.progressbar li {
  list-style: none;
  display: inline-block;
  width: 16.779%;
  /*position: relative;*/
  text-align: center;
  z-index : 1;

}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height : 30px;
  border: 1px solid #ddd;
  border-radius: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  background-color: #fff;
  z-index : 0;

}
.progressbar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 15px;
  left: -50%;
  z-index : -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color:#B04A5A;
  font-weight:bold;
}
.progressbar li.active:before {
  border-color: #B04A5A;

} 
.progressbar li.active + li:after {
  background-color: #B04A5A;

}