.search-form {
  border-radius: 30px 0px 0px 30px !important;
  margin-top:5px;
  width:350px !important;
}
ul.list-group > li {
  border-radius: 50px !important;
}
.archived{
  background-image: linear-gradient(to bottom right,rgba(0,0,0,.05) 25%,transparent 0,transparent 50%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 75%,transparent 0,transparent);
    background-color: #fdfae5;
    background-size: 14px 14px;
    min-height: 30px;
    padding: 12px 12px 12px 50px;
    position: relative;
}
 td .importance_row  tr{
  background-color: midnightblue;
  color: antiquewhite;
}

.activeGroupedBtn {
  box-shadow: 1px 5px 50px mediumvioletred;
}
.search-btn {
  border-radius: 0px 30px 30px 0px !important;
  margin-top:5px;
  cursor:pointer;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.rounded-circle {
  border-radius: 50% !important;
}
.ADMdtp.rtl .masterInput input, .dtpNewBox{
  border-radius: 50px !important;
}
.ADMdtpTime span, .dtp-ig {
 
  border-radius: 50px !important;
}
/* here you can put your own css to customize and override the theme */
.borderDownOnly{
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
  border-top: none;
  border-bottom: 1px solid #EBEBEB;
  border-left: none;
  border-right: none;
}
.notebook::before{
  margin-top: -20px;
  display: block;
  background: url(../img/up.png) repeat-x;
  content: "";
  height: 7px;
  /* width: 400px; */
  z-index: 5;
}
.highcharts-title , .highcharts-axis-labels , .highcharts-subtitle , .highcharts-axis-title , .highcharts-legend-item {
  font-family: 'Sahel' !important;
}

/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
	width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
	text-indent: 0;
}


/* switch box */
.switch input { 
  display:none;
}
.switch {
  display:inline-block;
  width:60px;
  height:30px;
  margin:8px;
  transform:translateY(50%);
  position:relative;
}
.holderswitch{
  
 
 
  border-radius:30px !important;
  box-shadow:0 0 0 2px rgb(238, 120, 120), 0 0 4px #777;

  border:4px solid transparent;
  overflow:hidden;
   transition:.4s;
  
}

.slider {
  width:60px;
  height:30px;
  position:absolute;
  top:-5px;
  bottom:0;
  left:0;
  right:0;
  border-radius:30px !important;
  box-shadow:0 0 0 2px rgb(238, 120, 120), 0 0 4px #777;
  cursor:pointer;
  border:4px solid transparent;
  overflow:hidden;
   transition:.4s;
}
.slider:before {
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  background:#585bb1;
  border-radius:30px;
  transform:translateX(-30px);
  transition:.4s;
}

input:checked + .slider:before {
  transform:translateX(30px);
  background:limeGreen;
}
input:checked + .slider {
  box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
}






.notebook::after {
  display: block;
  background: url(../img/down.png) repeat-x;
  content: "";
  height: 7px;
}
@font-face {
  font-family: Sahel;
  src: url("../fonts/Sahel-FD.eot");
  src: url("../fonts/Sahel-FD.eot?#iefix") format("embedded-opentype"), url("../fonts/Sahel-FD.woff") format("woff"), url("../fonts/Sahel-FD.ttf") format("truetype");
  font-weight: normal; }
@font-face {
  font-family: Sahel;
  src: url("../fonts/Sahel-Bold-FD.eot");
  src: url("../fonts/Sahel-Bold-FD.eot?#iefix") format("embedded-opentype"), url("../fonts/Sahel-Bold-FD.woff") format("woff"), url("../fonts/Sahel-Bold-FD.ttf") format("truetype");
  font-weight: bold; }
@font-face {
  font-family: Sahel;
  src: url("../fonts/Sahel-Black-FD.eot");
  src: url("../fonts/Sahel-Black-FD.eot?#iefix") format("embedded-opentype"), url("../fonts/Sahel-Black-FD.woff") format("woff"), url("../fonts/Sahel-Black-FD.ttf") format("truetype");
  font-weight: 900; }
  html, body,ul {
    font-family: 'Sahel'  !important;
    line-height: 1.62 !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased; }
    html button.btn, body button.btn {
      font-weight: bold; }
    html .en, body .en {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
      html .en::-webkit-input-placeholder, body .en::-webkit-input-placeholder {
        font-family: 'Sahel'  !important;
        -webkit-transition: .6s all;
        transition: .6s all; }
      html .en::-moz-placeholder, body .en::-moz-placeholder {
        font-family: 'Sahel'  !important;
        -webkit-transition: .6s all;
        transition: .6s all; }
      html .en:-ms-input-placeholder, body .en:-ms-input-placeholder {
        font-family: 'Sahel'  !important;
        -webkit-transition: .6s all;
        transition: .6s all; }
      html .en::placeholder, body .en::placeholder {
        font-family: 'Sahel'  !important;
        -webkit-transition: .6s all;
        transition: .6s all; }
      html .en:focus, body .en:focus {
        direction: ltr; }

  .font-xs {
    font-size: 12px !important;
    font-size: .75rem !important; }

  .font-sm {
    font-size: 13px !important;
    font-size: .85rem !important; }

  .font-lg {
    font-size: 16px !important;
    font-size: 1rem !important; }

  .font-xl {
    font-size: 20px !important;
    font-size: 1.25rem !important; }

  .font-2xl {
    font-size: 24px !important;
    font-size: 1.5rem !important; }

  .font-3xl {
    font-size: 28px !important;
    font-size: 1.75rem !important; }

  .font-4xl {
    font-size: 32px !important;
    font-size: 2rem !important; }

  .font-5xl {

    font-size: 40px !important;
    font-size: 2.5rem !important;
   }
   /* paganation */

   .pagination {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin-top: 10px;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)))!important;
  }
  .pagination li {
    display: inline;
    text-align: center;
  }
  .pagination a {
    float: left;
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 12px;
    color: #fff;
    margin-left: -1px;
    border: 1px solid transparent;
    line-height: 1.5;
  }
  .pagination a.active {
    cursor: default;
    color: rgb(235, 223, 115) !important;
    background-color: #424a56 !important;
  }

  .pagination a:active {
    outline: none;
    color: rgb(197, 151, 150) !important;
    background-color: #424a56 !important;

  }
  .modal-6 {

    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    border-radius: 50px !important;

  }
  .modal-6 a {
    border-color: #ddd;
    color: rgb(147, 154, 223);
    background: #db7311;
    padding: 10px 15px;
  }
  .modal-6 a:hover {
    color: rgb(197, 151, 150) !important;
    background-color: #424a56 !important;
  }
  .modal-6 a.prev {
    -moz-border-radius: 50px 0 0 50px !important;
    -webkit-border-radius: 50px !important;
    border-radius: 50px 0 0 50px !important;
    width: 50px;
    position: relative;
  }
  .modal-6 a.prev:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    right: 0;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)!important;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)!important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)!important;
  }
  .modal-6 a.next {
    -moz-border-radius: 0 50px 50px 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 50px 50px 0 !important;
    width: 50px;
    position: relative;
  }
  .modal-6 a.next:after {
    content: '' !important;
    position: absolute !important;
    width: 10px !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) !important;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%) !important;
  }
  .modal-6 a.active {
    border-color: #bbb !important;
    background: #fff !important;
    color: #E34E48 !important;

  }

  /* timeline */
  .main-timeline-section{
    position: relative; 
    width: 100%;  
    margin:auto; 
    height:300px;
  }
  .main-timeline-section .timeline-start,
  .main-timeline-section .timeline-end{
    position: absolute;
    background:#F2635F;
    border-radius:100px!important;
    top:50%;
    transform: translateY(-50%);
    width:30px;
    height:30px;
  }
  .main-timeline-section .timeline-end{
    left:0px;
  }
  .main-timeline-section .conference-center-line{
    position: absolute;
    width:100%;
    height:5px;
    top:50%;
    transform: translateY(-50%);
    background:#F2635F;
  }
  .timeline-article{
      width: 20%;
      position: relative;
      min-height: 300px;
      float:right;
  }
  .timeline-article .content-date{
      position: absolute;
      top: 35%;
      left: -30px; 
      font-size:18px;
  }
  .timeline-article .meta-date{
      position: absolute;
      top: 50%;
      left: 0px;
      transform: translateY(-50%); 
      width:20px;
      height:20px;
      border-radius: 100% !important;
      background:#fff;
      border:1px solid #F2635F;
  }
  .timeline-article .content-box{
    box-shadow: 2px 2px 4px 0px #c1c1c1;
    border:1px solid #F2635F;
    border-radius: 50px!important;
    background-color: #fff;
  
    position: absolute;
    top: 60%;
    left: -40px; 
    padding:10px;
  }
  .timeline-article-top .content-box:before{
    content: " ";
    position:absolute; 
    left:50%;
    transform: translateX(-50%);
    top:-20px;
    border:10px solid transparent;
    border-bottom-color: #F2635F;
  }
  .timeline-article-bottom .content-date{
    top: 59%;
  }
  .timeline-article-bottom .content-box{
    top: 75px;
  }
  .timeline-article-bottom .content-box:before{
    content: " ";
    position:absolute; 
    left:50%;
    transform: translateX(-50%);
    bottom:-20px;
    border:10px solid transparent;
    border-top-color:#F2635F;
  }