/* membership directory page */
body {
  font-family: 'Montserrat', sans-serif;
  /* line-height: 30px; */
}
.mobile-nav2{
  width: 100%;
  padding: 1% 10px;
  display: none; justify-content: center;
}

.mobile-nav2 select { padding: 10px; margin-left: 10px; border:none; border-radius:5px;  background-color: rgb(255, 89, 0); color: #fff;}
@media screen and (max-width:600px){
  .mobile-nav2{
    display: flex;
  }
}
.mini-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 50px;
  z-index: 1;
  padding-bottom: 20px;
  margin-left: -10px;
  padding-left: 20px;
}

.mini-nav a, .mini-nav i {
  margin-right: 10px;
  text-decoration: none;
  color: grey;
}

.mini-nav a:last-child {
  color: #5d5d5d;
  font-size: 0.8rem;
  font-weight: 600;
}

.spreadsheet_container {
  width: 100%;
}

.spreadsheet_container .spreadsheet {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
      grid-template-columns: 100%;
  row-gap: 5px;
}

.spreadsheet_container .cells {
  border: 1px solid red;
  padding: 20px;
}

.textbox {
  width: 100%;
  padding: 0.75rem;
  border-radius: 4px;
  border: 2px solid transparent;
  -webkit-box-shadow: 0 0 1px rgba(108, 108, 108, 0.748);
          box-shadow: 0 0 1px rgba(108, 108, 108, 0.748);
  outline: 5px solid transparent;
  -webkit-transition: border ease 0.3s, outline ease-in 0.1s;
  transition: border ease 0.3s, outline ease-in 0.1s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.textbox:focus {
  outline: 5px solid rgba(59, 47, 174, 0.2);
  border: 2px solid #3b2fae;
}

.textbox:hover {
  border: 2px solid #3b2fae;
}

.h-line {
  width: 100%;
  height: 1px;
  background-color: lightgray;
}

body {
  display: block; 
  /* overflow: hidden !important; */
}

.banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 350px;
  border: solid;
  overflow: hidden;
  display: none;
}

.banner .bancont {
  width: 500px;
  height: inherit;
}

.banner .bancont img {
  width: 100%;
  height: auto;
}

#member-dir-main {
  height: 100vh;
  background-color: #f8f8f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%; 
}

#member-dir-main .floatingbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: fixed;
  background: conic-gradient(#6f4cc3 45%, transparent 0), -webkit-gradient(linear, left top, left bottom, from(#f3f3f3c6), to(#f3f3f3c6));
  background: conic-gradient(#6f4cc3 45%, transparent 0), linear-gradient(#f3f3f3c6, #f3f3f3c6);
  -webkit-box-shadow: 11px 20px 40px 9px rgba(0, 0, 0, 0.353);
          box-shadow: 11px 20px 40px 9px rgba(0, 0, 0, 0.353);
  bottom: 5%;
  right: 5%;
  z-index: 5;
  cursor: pointer;
  visibility: hidden;
}

#member-dir-main .floatingbtn > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
}

#member-dir-main aside {
  width: 200px;
  background-color: #fff;
  height: 100%; padding-top: 20px;
}

#member-dir-main aside .active, #member-dir-main aside .active a {
  color: #6f4cc3;
  font-weight: 650;
}

#member-dir-main aside details {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  color: grey;
  cursor: pointer; 
}

#member-dir-main aside details[open] ul {
  padding: 0.5rem 0 0 1rem;
  list-style: none;
  border-left: thin solid #f3f3f3;
  margin-left: 5px;
}

#member-dir-main aside details[open] ul li {
  margin-bottom: 10px;
  font-size: 0.85rem;
}
#member-dir-main .member-filter{
  padding: 20px 3%; 
}
#member-dir-main .member-filter details{
  margin-bottom: 20px;
}
#member-dir-main .nate-hyrachy summary::marker{
  content: '';
}

#member-dir-main .nate-hyrachy details{
    width: 100%; padding: 10px 20px;
}
  #member-dir-main .nate-hyrachy details:hover{
      background-color: #f2f2f2;
  }

  @media screen and (max-width:600px){
    #member-dir-main aside{
      display: none !important;
    } 
  }


#member-dir-main article {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%; overflow-y: scroll; height: 100%;
  padding-bottom: 100px;
}

#member-dir-main article .container > div, #member-dir-main article .container > section{
  padding: 20px;
  width: 100%;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 2px lightgrey;
          box-shadow: 0 0 2px lightgrey;
  background-color: #fff;
  margin-bottom: 10px; height: max-content;
}

#member-dir-main article .container #section2 {
  /* margin-bottom: 10px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#member-dir-main article .container #section2 > .content-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(200px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  position: relative;
  width: 100%; min-height: 350px;
  padding: 10px;
}

#member-dir-main article .container #section2 > .content-wrapper .content {
  width: 100%;
  /* height: 300px; */
  /* border: solid; */
}

#member-dir-main article .container #section2 .pagination {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#member-dir-main article .container #section2 .pagination button {
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  font-size: 0.8rem;
  margin-left: 10px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
}

#member-dir-main article .container #section2 .pagination button:hover {
  border: 2px solid #ed5720b1;
}

#member-dir-main article .container #section2 .pagination .active {
  background-color: #ed5720b1;
  color: #fff;
}  

#section2 .section-header{
width: 100%; display: flex; justify-content: flex-start;
  
}
#section2 .section-header .filter-tabs{
display: flex;
}
#section2 .section-header .filter-tabs .tab{
background-color: rgba(211, 211, 211, 0.062); border: thin solid lightgrey; padding: 8px 10px; border-radius: 50px; margin-left: 10px; font-size:0.8rem ; user-select: none;

}
#section2 .section-header .filter-tabs .tab i{
margin-left: 8px; cursor: pointer;
}



/* infocard */
.infocard {
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.179); */
  background-color: white;
  border-radius: 10px;
  /* width: 80%; */
  /* max-width: 800px; */
  margin: auto;
  /* padding: 20px 30px; */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 50px;
  font-family: 'Montserrat';
}

.infocard-img {
  height: 200px;
  /* min-height: 300px; */
  width: 250px;
  min-width: 250px;
  border-radius: 10px;
}

.infocard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.infocard-info {
  line-height: 30px;
}

.infocard-title {
  line-height: 40px;
  font-size: 25px;
}

@media only screen and (max-width: 850px) {
  .infocard {
      flex-direction: column;
  }

  .infocard-info {
      text-align: center;
  }
}

.infocard-details {
  display: flex;
  gap: 10px;
}

.infocard-contact {
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.179); */
  /* width: 50%; */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.103);
}

.infocard-status {
  min-width: 300px;
}

.infocard-contact-info {
  margin-bottom: 10px;
}

.contact-header {
  background-color: rgb(255, 89, 0);
  color: white;
  padding: 10px 10px;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.contact-body {
  padding: 10px;
  line-height: 30px;
}
.stats p{
  font-size: 1.5rem;  font-weight: 500; padding: 10px;
}
.stats p:nth-child(odd){
  background-color: #f6f6f6; 
}

@media only screen and (max-width: 500px) {
  .infocard-details {
      flex-direction: column;
  }

  .infocard-contact {
      width: 100%;
  }
}

/* cards */

.about-cont{
  width: 100%; box-shadow: 0 0 4px lightgrey; overflow: hidden; border-radius: 5px;
}

.img-block{
  max-width:100%;
  height:230px;
  overflow: hidden;
}
.img-block img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

.text-block{
  max-width:100%;
  padding:10px;
  display: flex;
  flex-direction: column;
  background-color: #fff; 
}

.btn-block{
  background-color:rgb(231, 86, 33);
  border: 1px solid transparent;
  border-radius: 5px;
  width: max-content;
  padding: 5px 10px;
  font-size: 15px;
  margin-top: 10px;
  /* width:100px; */
  /* height:30px; */
  /* margin-bottom: 5px; */
  /* margin-left:130px; */
  color: #fff;
}
.btn-block .icon{
  color:#fff;
}

#group-cont{
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(300px, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; width: 100%;
}

#group-cont .item >div:first-child{font-size: 1.3rem; border-bottom: thin solid lightgrey;padding: 10px;user-select: none; }

#group-cont .item{
width: 100%; height: 300px; border: thin solid lightgrey; border-radius: 5px;overflow: hidden;
}
#group-cont .item .img img{width: 100%; height: 100%; object-fit: cover;}
#group-cont .item .img{
width: 100%; height: 300px; overflow: hidden;
}

#group-cont .item .group-stats{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-size: 3rem;
font-weight: 500;
text-align: center;
background-color: #00000080;
color: #fff;
padding: 10%;
}

.popup_i .reviewed-fees img{
width: 100%;
}
@media screen and (max-width:500px){

.popup_i #popup {
width: 100%;
height: 100%;
}
}