body{
  /* font-family: 'Reem Kufi', sans-serif; */
  font-family: 'Reem Kufi', sans-serif;
font-family: 'Cairo', sans-serif;
}
/* =============================================
categories page
================================================= */
.nav ul li{
  list-style-type: none;
  font-size: 18px;
}
.nav ul li a{
     color: #186ec2;
    }
.list{
  padding: 0;
}
.nav label {
  display: block;
  color: #333;
  background-color: #fff;
  transition: all .25s ease-in;
  /* box-shadow: inset 0 -1px #eee; */
  /* padding: 7px 0; */
}
.list li,
/* .group_list , */
.sub_group_list li{
  box-shadow: inset 0 -1px #eee;
  /* padding: 7px 0; */
  padding: 7px 0;
}
.sub_group_list li{
  padding: 0
}
/* .list .sub_group_list li:last-child{
  box-shadow: none;
} */
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
  color: rgba(39, 39, 39, 0.5);
  /* background: #eee; */
}
.nav label {
  cursor: pointer;
}
.group_list a,
.group_list label {
  padding-left: 2rem;
  /* background: #eee; */
  /* box-shadow: inset 0 -1px #eee; */
}
.group_list a:focus, .group_list a:hover
{
  /* background: #fff; */
}
.fatawa-mokhtara,
.calendar-block{
  background: #f5fdff;
  padding: 0;
  border: 1px solid #60aee4;
  margin-bottom: 51px;
}
.sub_group_list a,
.sub_group_list label {
  /* background: #e4e4e4; */
  /* box-shadow: inset 0 -1px #eee; */
  display: inline-block;
  padding: 7px;
}
.sub_group_list a:focus, .sub_group_list a:hover,
.sub_group_list label:focus,
.sub_group_list label:hover {
  /* background: #186ec2; */
  /* color:#fff; */
  text-decoration: none
}
.sub-sub-group-list a,
.sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #eee;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
  /* background: #616161; */
}

.list-container,
.sub-group-list-container ,
.sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
}

.list input[type=checkbox]:checked + label + .list-container ,
.list input[type=checkbox]:checked + label + .sub-group-list-container {
  /* reset the height when checkbox is checked */
  /*max-height: fit-content;*/
  max-height: fit-content;
  max-height: -moz-max-content;
  box-shadow: none;
}
.list input[type=checkbox]:checked + label + .list-container .group_list:last-child li,
.list input[type=checkbox]:checked + label + .sub-group-list-container .sub_group_list:last-child li
{
  box-shadow: none;
}
label > span {
  float: left;
  transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
  transition: transform .65s ease, -webkit-transform .65s ease;
  color: #186ec2;
}

.list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.list img{
    width: 20px;
}
/* =============================================
tobics page
================================================= */
.download,
.add{
  overflow: hidden;
  display: block;
  white-space: wrap;
  padding-bottom: 10px;
  color: #333;
  padding-right: 5px;
}
.download:hover,
.add:hover{
  text-decoration: none;
}
.news{
  list-style-type: circle;
  padding-right: 11px;
}
.news li {
  border-bottom: 1px dashed #eee;
  margin-top: 6px;
  color: #1763af;
}
/* =============================================
answer page
================================================= */
.badge {
  position: relative;
  margin: 1.5em 2em;
  width: 4em;
  height: 6.2em;
  border-radius: 10px;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;
}
.badge:before, .badge:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge:before {
  transform: rotate(60deg);
}
.badge:after {
  transform: rotate(-60deg);
}
.badge:hover {
  top: -4px;
}
.badge .circle {
  width: 100%;
  height: 50%;
  position: absolute;
  background: #fff;
  z-index: 10;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge .circle i.fa {
  font-size: 2em;
  margin-top: 10px;
}
.blue {
  background: linear-gradient(to bottom right, #277bd2 0%, #3cb4df 100%);
  /*color: #2479ca;*/
}
.text-blue {
    color: #2479ca;
}
.send-friend-form{
  margin: 100px auto;
}
.alert-info strong {
  display: block
}
#sendFriendModalLabel{
  font-size: 16px;
}
#sendFriend_form input,
.modal-footer button,
.alert-info{
  border-radius: 10px !important;
}
#sendFriend_form label{
  font-weight: bold;
}
/* ==================================================
pagination
======================================================*/
.pagination ul li{
  float: right;
    margin-right: 25px;
    list-style-type: none;
}
.pagination{
  text-align: center;
  display: block;
}
.pagination ul{
  display: inline-block;
}
.pagination ul li:nth-child(n+3)span a:nth-last-child(n+3)span a {
  border: 1px solid;
  border-radius: 100px !important;
  padding: 5px;
  width: 25px;
  height: 25px;
  line-height: 1;
  background: #1b63ae;
}
.pagination ul li:nth-child(n+3)span a:nth-last-child(n+3)span a{
  color:#fff;
}

.pagination a.active  {
      border-radius: 100px !important;
      background: #1b63ae;
      color: #fff;
      padding-left: 9px;
      text-align: center;
      padding-right: 8px;
}

.channel_logo{
  display: inline;
  /* margin: 30px; */
  margin: 15px 0 0 0;
}

.channel_logo img{
  margin-bottom: 30px;
}
/* =========================================
calendar
============================================ */
.fa-calendar{
  font-size: 20px !important;
}
.fa-hand-pointer-o,
.fa-info,
.fa-plus{
  /*font-size: 28px!important;*/
}

    .right {
      text-align: right;
    }
    .center {
      text-align: center;
    }
    .pointer {
      cursor: pointer;
    }
    .group:after {
      content: "";
      display: table;
      clear: both;
    }
    .calendar {
      position: relative;
      max-width: 43em;
      min-height: 15em;
      margin: .5em auto;
      overflow: hidden;
      color: #040404;
    background: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 50px;
    }

    /*Styles for dropdown*/
    .calendar-ympicker{
      position: absolute;
      max-width: 19.5em; /*stop more years causing overflow*/
      min-height: 15em;
      padding: .5em .5em 1em;
      transform: translateY(-100%); /*Start offscreen*/
      transition: transform ease-in-out 0.2s;
      background: rgb(51, 51, 51);
      z-index: 2;
    }
    .calendar-ympicker-header div{
      display: inline-block;
      color:#428bca;
      cursor: pointer;
    }
    .calendar-ympicker .close{
      text-align: right;
      border: 1px transparent solid;
    }
    .calendar-ympicker li{
      display: inline-block;
      line-height: 2em;
      border: 1px transparent solid;
      text-align: center;
      cursor: pointer;
    }
    .calendar-ympicker li:hover{
      border-color: #428bca;
      color: #428bca;
    }
    .calendar-ympicker-months{
      border-bottom: 1px solid #444;
    }
    .calendar-ympicker-months li{
      width: 30%;
    }
    .calendar-ympicker-years{
      overflow-x: scroll;
      white-space: nowrap;
      padding: 0.5em 0;
    }
    .calendar-ympicker-years li{
      width: 25%;
    }
    /*Years scroll bar*/
    .calendar-ympicker-years::-webkit-scrollbar-thumb:horizontal:hover {
      background:#428bca;
    }
    .calendar-ympicker-years::-webkit-scrollbar {
      height: 8px;
    }
    .calendar-ympicker-years::-webkit-scrollbar-track {
      background-color: #555;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
    .calendar-ympicker-years::-webkit-scrollbar-thumb {
      background-color: #aaa;
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }

    /*Styles for main part of calander*/
    .calendar-header {
      padding: .5em .5em 0 .5em;
      margin-bottom: .3em;
      color: #428bca;
    }
    .calendar-header .arrow{
      position: absolute;
      width: 10%;
      left: 10px;
      top: 8px;
    }
    .calendar-header .minusmonth{
      right: 3.5em;
      text-align: right;
    }
    .calendar-header .arrow span{
      display: inline-block;
      transition: transform ease-in-out 0.2s;
    }
    .calendar-header .monthname:hover ~ .addmonth span{
      transform: rotateZ(90deg);
    }
    .calendar-header .monthname:hover ~ .minusmonth span{
      transform: rotateZ(-90deg);
    }

    .calendar-days{
      padding: 0 .5em; /*Right and Left*/
      border-bottom: 1px solid #444;
      color: #666;
    }

    /*Dates*/
    .calendar-body{
      padding: 0 .5em .5em .5em;
    }
    .calendar-body li, .calendar-days li{
      float: right;
      width: -webkit-calc(100%/7);
      padding: .25em 0;
      border: 1px transparent solid;
      text-align: center;
      cursor: pointer;
    }
    .calendar-body li:hover {
      border: 1px solid #428bca;
      color: #428bca;
    }
    .calendar li.active{
      background-color: #428bca;
      color: #ddd;
    }
    .calendar-body .today{
      border: 1px solid #444;
    }
    .calendar-body li.noclick{
      cursor: default;
    }
    .calendar li{
      list-style-type: none;
    } 
 /* ===========================================
    video
    ========================================= */
    #container-video{
      background: #49b8d87a;
      display: none;
      opacity: 1;
      text-align: center;
      width: 100%;
    margin: auto;
    height: 100%;
    border-radius: 15px !important;
    z-index: 99999;
    box-shadow: 0px 0px 20px 0px rgb(69, 182, 217), 0 6px 20px 0 rgb(61, 181, 223);
    }
.video{
  box-shadow: 0px 0px 20px 0px rgb(0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0.98);
}
   .video_content{
         display: inline-block;
         padding-top: 15%
        }
        .close-video{
          position: absolute;
          top: 7%;
          right: 7%;
          font-size: 45px;
          font-weight: bold;
          color: #010001;
          cursor: pointer;
        }
        .play-btn{
          position: absolute;
    margin: auto;
    top: 45%;
    right: 49%;
    z-index: 999999;
    font-size: 50px;
    font-family: FontAwesome;
    color: #eee;
    display: none !important;
        }
        .video_content:hover .play-btn {
          display: block!important;
          cursor: pointer;
        }
        @media (max-width: 767px) {
        .video{
          width: 80% !important;
        }
        #container-video{
      
          width: auto ;
        margin: auto;
        height:  auto;
      
        }
        .video_content {
          display: inline-block;
          padding-top: 40%;
      }
      .close-video {
      
        top: 10%;
        right: 10%;
        font-size: 35px;
      
    }
    .play-btn {
      top: 35%;
      right: 45%;
      font-size: 45px;
  }
        }
        @media (max-width: 768px){
          .news {
            padding-right: 30px;
        }
        .at-icon {
          fill: #fff;
          border: 0;
          width: 22px !important;
          height: 22px !important;
          float: right;
      }
      .at-share-tbx-element .at-share-btn{
        height: 22px;
    width: 22px;
      }
      .addthis_sharing_toolbox{
        width: 100%;
            }
          .portlet > .portlet-title > .caption {
           
            font-size: 13px!important;
          }
          .portlet.box > .portlet-body {
            background-color: #fff;
            padding: 5px;
        }
        .thumbs {
          float: right;
          width: 50% !important;
          height: 155px;
          overflow: hidden;
          text-align: center;
          margin-top: auto!important;
          margin-right: auto!important;
          margin-bottom: 15px!important;
          margin-left: auto!important;
          display: inline-block!important;
      }

      .thumbs img{
        display: block;
        width: 100%;
      }
      .sm-header-list .list-inline{
        text-align: center;
      }
    .sm-header-list .list-inline li {
      display: inline-block;
      padding: 0 10px;
    }
    .sm-additional-nav{
      float: none!important;
    }
    .sm-additional-nav ul{
      width: 100%;
    }
    .sm-additional-nav ul li{
      display: inline-block !important;
    }
    .sm-additional-nav ul li:first-child {
      float: right;
  }
  .footer ul.social-footer {
    float: left!important;
}
.channel-info td{
  display: block!important;
}
.pagination {
  text-align: center;
  display: block;
  margin: auto;
  width: 100%;
  float: none !important;
}
.pagination ul {
  display: inline-block;
  margin: auto;
  padding: 0;
}
.p-5{
  padding: 5px;
}
.channel_logo {
  display: inline-block!important;
 
  width: 49%!important;
  margin: 0!important;
  padding: 0!important;
}
    }

    .fl-l{
      float: left
    }

    .answer-p{
      overflow-x: hidden;
    line-height: 2.2!important;
    overflow-y: scroll;
    text-overflow: initial;
    display: -webkit-box;
    max-height: 200px;
    -webkit-box-orient: vertical;
    padding-left: 15px;
    color: #186ec2;
    }
    .auther-name{
      color:#fff !important;
    }
   /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow:  0 0 5px #f5fdff; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #186ec2;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #186ec2; 
}

.fa-question,
.fa-list-ul{
  font-size: 25px!important;
    line-height: 0.5!important;
}
.series-overflow {
    height: auto;
}