:root {
   --grayColor: #F5F5F5;
}

*{box-sizing: border-box; margin: 0px; padding: 0px;}


/*offcanvas styling start here*/
.offcanvas{
    width: 300px !important;
    transition: transform 0.6s ease-in-out;
}

.offcanvas ul{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

.offcanvas ul li{
   margin-top: 16px;
}

.offcanvas ul li a{
   font-size: 16px;
   font-weight: 300;
   color: black;
   text-decoration: none;
}

.offcanvas ul li a:hover{
   text-decoration: underline;
}
/*offcanvas styling end here*/

/*navbar styling start here*/
.navbar .nav .nav-item{
  margin-right: 10px;
}

.navbar .nav .nav-item a{
   text-decoration: none;
   background-color: #fff; 
   color: black;
   font-size: 14px;
   font-weight: 600;
   padding: 10px 15px;
   border-radius: 5px;
   letter-spacing: 0.2px;
   border: 1px solid #fff;
}

.navbar .nav .nav-item:nth-of-type(2) a{
   text-decoration: none;
    background-color: transparent;  
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    letter-spacing: 0.2px;    
}

.navbar .nav .nav-item a:hover{
   background-color: #339933;
   border: 1px solid #339933;
}

.navbar .nav .nav-item i{
   color: #fff;
   font-size: 24px !important;
   cursor: pointer;
}
@media only screen and (max-width: 508px){
   .navbar .navbar-brand span{
      display: none;
   }
}

@media only screen and (max-width: 410px) {
  .navbar .nav .nav-item{
    margin-right: 5px;
   }  
  .navbar .nav .nav-item a{
   padding: 10px 5px;
   font-size: 12px;
   font-weight: 400;
  }
  .navbar .nav .nav-item:nth-of-type(2) a{
     padding: 10px 5px;
     font-size: 12px;
     font-weight: 400;
  }
}
/*navbar styling end here*/

/*filter-section styling start here*/
#filter-section{
   margin-top: 70px !important;
   padding: 20px 0px;
   background-color: var(--grayColor) !important;   
}

#filter-section select{
   font-weight: 300px;
   font-size: 16px;
}
#filter-section button{
   font-weight: 300px;
   font-size: 16px;
}
#filter-section select:focus{
   outline: none !important;
   box-shadow: none;
   border: 1px solid gray;
}
/*filter-section styling end here*/

/*menu-bar styling start here*/
#menu-bar .row-category{
   max-height: 90px;
   overflow-y: hidden;
   position: relative;
}

#menu-bar .col-category{
   padding: 10px 10px;
   margin:  5px 5px;
   text-align: center;
   font-weight: 600;   
}

#menu-bar .col-category a{
   text-decoration: none;
   color: black;
}

#menu-bar .col-category a i{
   font-size: 30px;
}

#menu-bar .col-category a i:hover{
   color: #339933;
}

#menu-bar .row-category .col-category span{
   display: block;
   margin-top: 8px;
   font-size: 14px;
   letter-spacing: 0.5px;
   font-weight: 500;
}

#expend_category{    
    padding: 5px 12px;
    font-weight: 400;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    background-color: #6c757d;
    color: #fff;
    text-transform: uppercase;
    position: absolute;    
    left: 45%;
}

@media only screen and (max-width: 640px) {
  #expend_category{
     left: 35%;
  }
}
/*menu-bar styling end here*/

/*group-bar styling start here*/
#group-bar{
   background-color: var(--grayColor) !important;
}

#card-links-container{   
   height: 50px;   
}
#group-bar .card-links{
   text-decoration: none;   
   color: gray;
   font-size: 12px;   
   font-weight: 500;         
}
#group-bar .card-links i{
   color: black;
   margin-right: 2px;
}
#group-bar .card-links:hover{
   color: blue;
}


#group-bar .container .joinGroupButton{
  /* background-color: #6c757d;*/
   border: none;
   font-weight: 400 !important;
   letter-spacing: 0.5px;
   font-size: 14px;
}

#group-bar .card-title a{
   text-decoration: none;
   color: black;
}

#group-bar .card-title{  
   font-size: 16px;
   font-weight: 600;   
   margin: 3px 0px;   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#group-bar .card-text{
   font-size: 14px;
   font-weight: 400;
   text-align: justify;
   height: 88px !important;
   overflow: hidden;   
   margin-bottom: 5px;
}

.loadmore_btn{
   background-color: #fff;
   color: green;
   border: 1px solid silver;
}
.loadmore_btn:hover{
   background-color: silver;
}

#footer{
   background-color: #292f3b;
   color: #fff;
   height: 100%;
}

#footer .copy{
   font-size: 14px;
   text-align: right;
}

#footer a{
   text-decoration: none;
   color: #fff;
   margin-left: 16px;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.2px;
}

#footer a:hover{
   color: #339933;
}

@media only screen and (max-width: 991px) {
  #footer .link{
     text-align: center; 
  } 
  #footer .copy{   
     margin-top: 10px;  
     text-align: center;
   }
}

/*add group styling start here*/
#add-group{
    background-color: var(--grayColor) !important;
    margin-top: 65px;
    height: 100%;
}
#add-group form span{
   font-size: 12px;
   font-weight: 500;
}
#add-group form span{
   font-size: 12px;
   font-weight: 500;
}


#add-group form button{
   border: none;
}
#add-group .card-body p{
   font-size: 14px;
   font-weight: 500;
}
/*add group styling end here*/

/*join group styling start here*/
#join-group{
    background-color: var(--grayColor) !important;
    margin-top: 65px;
    height: 100%;
}
#join-group .card .card-body h6{
   font-weight: 800;
}

#join-group .button-container a{
   text-decoration: none;
   padding: 16px 40px;
   font-size: 18px;
   color: black;
   font-weight: 600;   
}
/*join group styling end here*/

.group-detail ul a{
   text-decoration: none;
}

#leftFixedButton{
   position: fixed; 
   top:84%; 
   left:0.5%; 
   letter-spacing: 0.5px; 
   text-decoration: none; 
   color: #fff; 
   padding:5px 15px; 
   border-radius: 10px;
}

#rightFixedButton{
   position: fixed;
   top:84%;
   right: 0.5%;
   letter-spacing: 0.5px;
   padding: 10px;
   text-decoration: none; 
   color: #fff; 
   padding:5px 15px; 
   border-radius: 10px;
}
@media only screen and (max-width: 365px){
   /*#leftFixedButton{*/
   /*   display: none;*/
   /*}*/
   /*#rightFixedButton{*/
   /*   display: none;*/
   /*}*/
}

/*Detail Page reportGroup div styling*/
#reportGroup{   
   padding: 15px 50px;      
}

#reportGroup form select:focus{
   outline: none !important;
   box-shadow: none;
}

#reportGroup form textarea:focus{
   outline: none !important;
   box-shadow: none;
}