.bg {
  box-sizing: border-box;
  min-height: 207px;
  max-height: 314px;
  transition-property: background-image;
  transition-duration: 180ms;
  transition-timing-function: ease-in-out;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;  
}

.bg-small {
  box-sizing: border-box;
  min-height: 103px;
  max-height: 157px;
  width: 392px;
  max-width: 392px;
  transition-property: background-image;
  transition-duration: 180ms;
  transition-timing-function: ease-in-out;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}


.blur{
  background-color: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);
  color: white;
  /* max-width:max-content; */
  padding:5px;
  margin: 5px;
}


.community-card-container {
  padding: 2px 16px;
}

.community-card-container-description{
  font-size: 0.75em;color: #4d4d4d;margin-bottom: 0.5em;
}

/* Add rounded corners to the top left and the top right corner of the image */
.community-img {
  border-radius: 2rem 2rem 0 0;
  min-height: 157px;
}
.community-card {
  /* Add shadows to create the "card" effect */
  max-width: 300px;
  min-width: 300px;
  transition: 0.3s;
  /* border-radius: 2rem ; 5px rounded corners */
  margin: 20px;
  min-height: 90%;
  overflow: hidden;
}

.community-header-card{
  border-radius: 2rem ; /* 5px rounded corners */
  margin: 20px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* On mouse-over, add a deeper shadow */
/* .community-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
} */

/* Add some padding inside the card container */
.community-container {
  /* overflow-y:scroll; */
  display:flex;
  flex-direction: column;
  padding:15px;
  justify-content: space-between;
  align-items: center;
  /* max-height: 600px; */
  overflow-x:hidden;
}

.additionalInfo{
  font-size: 0.75em;color: #4d4d4d;margin-bottom: 0.5em;

}

.discussion-card{
  display: flex;
  flex-direction: column;
}

.discussion-content{
  padding: 0px 20px;
  /* overflow: scroll; */
}

@media (max-width:500px)  {
  .community-container {
  }
}

@media (max-width:400px)  {
  .community-card {
    max-width: 200px;
    min-width: 200px;
  }
  .community-card-container-description{
    font-size: 1.0em;color: #4d4d4d;margin-bottom: 0.5em;
  }

  .feed{
    font-size: 1.0em;color: #4d4d4d;margin-bottom: 0.5em;
    max-width: 200px;
    min-width: 200px;
  }

  .btn{
    font-size: 1.0em;
  }

  .q-hidden{
    max-height: 100px;
  }
}

.shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 2rem;}

.clickable:hover{
  cursor: pointer;
  text-decoration: none;
}

.q-hidden{
  max-height: 200px;
  overflow-y: hidden;
}

.q-show-more a{
  color: #ff8600 !important;
  padding: 50px;
}

.keyword{
  display: inline-block;
  font-size: .8em;
  font-weight: 500;
  line-height: 2em;
  padding: 0 .7em;
  border-radius: 5px;
  background-color: #eee;
  margin: .3em .4em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 145px;
  text-overflow: ellipsis;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.05), 0 2px 5px 0 rgba(0,0,0,.1);
}

.keyword-show-all{
  overflow: visible;
  max-width: fit-content;
}

.index-body{
  display: flex;
  flex-direction: row;
  padding: 10p;
}

.block{
  margin: 15px;
  padding: 5px;
}


.block-5{
  margin: 5px;
  padding: 5px;
}

.editor-container{
  max-width: 600px;
}

#q-editor{
  overflow-y: scroll;
  max-height: 300px;
}


.btn-success {
  color: #fff;
  background-color: #5cb85c !important;
  border-color: #4cae4c !important;
}

.border{
  border-style: solid;
  border-width: 1px;
  border-color: #dee0e1;
  border-radius: 2rem;
}

.border-top{
  border-top: 2px solid rgba(204, 203, 203, 0.3);
}

.border-bottom{
  border-bottom: 2px solid rgba(204, 203, 203, 0.3);
}

.des{
  color:#888; font-size:14px;
}

.who{
  padding: 5px;
  font-size:16px;
  align-self: flex-end;
}


.user{
  padding-bottom: 10px;
  display: flex;
}


.content{
  font-size: .9em;
  color: #494949;
  line-height: 1.6em;
  text-align: justify;
}

.content a{
  color: #5cb85c;
}

.content p{
  display: grid;
  /* text-align: left; */
} 

.ql-align-right {
  text-align: right !important;
}

.ql-direction-rtl{
  text-align: right !important;
}

.content-show{
  /* overflow-y: scroll; */
  max-height: 100%;
}

.add-member{
  padding: 20px;
}

.add-interested-member{
  padding: 20px;
}

.event-header{
  margin-bottom: 5px;
}

.posts{
  /* overflow-y: scroll; */
  /* max-height: 500px; */
}

/* .post:hover{
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.29);
} */

.f-right{
  float: right;
}

.f-left{
  float: left;
}

.question-header{
  width: 93%;
  line-height: 1.4em;
  margin-left: 10px;
  font-size: 1.2em;
  display: inline-block;
  overflow: hidden;
  max-width: 90%;
  text-overflow: ellipsis;
}

.discussion-header{
  width: 93%;
  line-height: 1.4em;
  padding-left: 15px;
  margin-left: 10px;
  font-size: 1.2em;
  display: inline-block;
  overflow: hidden;
  max-width: 90%;
  text-overflow: ellipsis;
}

.question-header:hover{
  color: #ff8600 !important;
}

.question-content{
  text-overflow: ellipsis;
}

.additionalInfo{
  padding: 10px;
}


.discussion{
  overflow-y: scroll;
  max-height: 800px;
}

.scroller::-webkit-scrollbar { width: 15px;}
.scroller::-webkit-scrollbar-track { background: #fdfdfd;}
.scroller::-webkit-scrollbar-thumb { background: #00a55a; cursor: pointer;}
.scroller::-webkit-scrollbar-thumb:hover {background: #ff8600;}


.stat_count{
  color: #00a55a;
}

.member-card{
  display: flex;
  justify-content: space-between;
}

.member-card .button-side{
  display: flex;
  align-items: center;
}

.member-active{
  overflow-y: scroll;
  max-height: 600px;
}


.member-unactive{
  overflow-y: scroll;
  max-height: 600px;
}

.rounded{
  border-radius: 2rem;
}


.pagination > li > a, .pagination > li > span {
  color: #00a55a !important ;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
  color: #00a55a !important ;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
  background-color:#4cae4c!important;
  border-color: #4cae4c!important;
  color: white !important;
}

.container-float-left{
    max-width: fit-content;
    margin-right: 0px;
}

.feed{
  width: 90%;
}

.ql-editor{
  height: 150px !important;
}

.ql-blank{
  text-align: right !important;
}

.padding-5{
  padding: 5px;
}

#new-post-form{
  display: none;
}