/**
This file handles basic common styles to enable smooth and identical UI responses to different viewport sizes 
*/
.discussion-breadcrump-main-wrap{
  display: flex;
  padding-top: 2px;
}
.trending-discussion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  margin: 0px 5px;
  background-color: #ececec;
  height: fit-content;
  overflow: hidden;
  width: calc( 100% - 60px );
  min-width: 230px;
}
.discussion-breadcrumb {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
.breadcrumb-link {
  background-color: #e8e8e8;
}
.breadcrumb-selected {
  background-color: rgb(255, 0, 106);
}
.trending-discussion-title {
  padding: 4px 20px;
  font-size: 14px !important;
  color: white;
  font-weight: normal;
  text-decoration: none;
  margin-right: 1px;
}
.trending-discussion-title:hover {
  background-color: rgb(0, 207, 0);
}
/*NB: Not used in this version of application*/
.sort-by {
  display: none;
  width: 70px;
  margin-left: 30px;
  color: grey;
  font-size: 14px;
  color: #f0f0f0;
  color: black !important;
}
.discussion-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  justify-content: flex-end;
  border-radius: 2px;
  color: black !important;
  
  margin-left: 3px;
}
/*Destination filter button on breadcrumb for Mega-Menu*/
.destination-filter {
  padding: 7px 0px;
  border: none;
  border-radius: 4px;
  color: #3c3c3c;
  cursor: pointer;
}
.svg-holder-submenu {
  
  padding: 5px;
  width: 40px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  /*! position: absolute; */
  /*! right: -10px; */
  background-color: #9b9b9b;
  cursor: pointer;
}
.svg-holder-submenu.destination-filter-submenu:hover {
  background-color: #57575752;
}
/*Megamenu*/
.activate-destination-filter-submenu {
  background-color: rgba(240, 240, 240, 0.79);
  padding: 10px 20px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  position: fixed;
  top: 47px;
  left: 0px;
  right: 0px;
  z-index: 2;
  backdrop-filter: blur(10px);
  overflow-y: auto;
  bottom: 0px;
  padding-bottom: 150px;
}
.mega-menu-tagged-destination {
  margin: 4px auto;
  padding: 5px 5px;
  border-radius: 4px;
  color: #515151;
  font-size: 13px;
  width: 96%;
  cursor: pointer;
  list-style: circle;
  height: 30px;
  font-weight: bold;
}
.mega-menu-tagged-destination:hover {
  transition: all 150ms 0ms ease-in-out;
  color: #ff006a;
}


@media all and (min-width:1001px) {
  .main-body{
    flex-direction:row;
  }
  .activate-destination-filter-submenu {
    grid-template-columns: repeat(3,1fr);
  }
  @media all and (min-width:1280px) {
  }
}

@media all and (max-width:1000px) {
  .main-body{
    flex-direction:column;
  }
  .discussion-breadcrump-main-wrap {
    display: flex;
    padding-top: 0px;
  }
  .activate-destination-filter-submenu {
    grid-template-columns: repeat(3,1fr);
  }
  @media all and (max-width:900px) {
     .activate-destination-filter-submenu {
      grid-template-columns: repeat(2,1fr);
    }
    @media all and (max-width:800px) {
      
      .activate-destination-filter-submenu {
        grid-template-columns: repeat(2,1fr);
      }
      @media all and (max-width:700px) {
        
        .activate-destination-filter-submenu {
          grid-template-columns: repeat(2,1fr);
          z-index: 6;
        }
        @media all and (max-width:600px) {
        
        .activate-destination-filter-submenu {
          grid-template-columns: repeat(1,1fr);
          z-index: 6;
        }
        @media all and (max-width:500px) {
        
          .activate-destination-filter-submenu {
            grid-template-columns: repeat(1,1fr);
            z-index: 6;
          }
          .activate-destination-filter-submenu option{
/*             font-size: 12px !important; */
            padding: 4px 2px;
            margin: 2px 2px;
/*             font-weight: normal; */
          }
          @media all and (max-width:400px) {
          
            .activate-destination-filter-submenu {
              grid-template-columns: repeat(1,1fr);
            }
          }
        }
      }
      }
    }
  }
}
.overlay-open {
  overflow-y: hidden !important;
  height: 100vh;
}