.metrics-dashboard .btn.active{
  background: #337ab7;
}
.metrics-dashboard .btn{
    border: 0;
    background: #808080;
    border-radius: 0;
    color: #fff;
    padding: 10px 16px;
    font-size: 16px;
    margin-right: 6px;
    transition: all 0.3s;
    margin-bottom: 5px;
}
.dash-box{
  text-align: center;
  padding: 20px;
}
.dash-box i{    
  font-size: 8em;
}
.dash-box h3{
  font-size: 20px;
  max-width: 150px;
  margin-right: auto;
  margin-left: auto;
}
.dash-box svg{
  height: 90px;
  width: 80px;
}
.prayer-box svg{
    height: 130px;
    width: 130px;
    margin-top: -45px;
}
.metrics-dashboard table td{
  word-break: break-word;
}
.img__description{
  
  font-size: 18px !important;
  text-transform: none;
  }
 .topnav {
      overflow: hidden;
      display: inline-block;
      background-color: #333;
      padding: 0px;
      width: 100%;
      height: 100%;
      margin-left: 0px;
      transition: all 0.3s;
      padding-top: 40px;
   }
   .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      width: 100%;
      transition: all 0.3s;
   }
   .topnav a:hover {
      background-color: #ddd;
      color: black;
   }
   .topnav a:focus, .topnav li.active a{
      background:#1373ae;
      color: #fff;
   }
   .topnav .icon {
     display: none;
   }
   .tab-pane{
      transition: all 0.3s;
      padding: 40px;
      font-size: 14px;
   }
   .pannel_s{
       box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
       border-radius: 0 0 5px 5px;
       padding: 30px;
       background: white;
   }
   .pannel_header{
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
      border-radius: 5px 5px 0 0;
      padding: 15px 30px;
      background: white;
      border-bottom: 1px solid #e5e5e5;
      align-items: center;
   }
   li{
    list-style-type: none;
   }
   .p-0{
     padding: 0;
   }
   .m-0{
     margin: 0;
   }
   .bcrumb{
      background: none;
      padding: 0;
   }

   @media screen and (max-width: 767px) {
      .topnav li a {display: none;}
      .topnav a.icon {
         float: right;
         display: block;
      }
   }
   @media screen and (min-width: 767px){
      .flex{
         display: flex;
      }
   }
   @media screen and (max-width: 767px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
         position: absolute;
         right: 0;
         top: 0;
      }
      .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
      }
   }
   @media screen and (max-width: 560px) {
    .tab-pane,.pannel_s,.pannel_header{
      padding: 15px;
    }
    .tab-pane h3{
      font-size: 18px;
    }

   }
}