/*add to the final element containing the text*/
/*http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/*/
/*https://codepen.io/natonischuk/pen/QbGWBa*/
/*adjustHeight parameter is needed because Chrome seems to not be consistent with other browsers and for small screen sizes displays top of the letters in the line that should be hidden - and we need to minimally adjust to cover that*/
@media only screen and (min-width: 350px) {
  .wrap-categories {
    width: 70% !important; }
  .wrap-regions {
    width: 30% !important; } }

@media only screen and (min-width: 500px) {
  .wrap-categories {
    width: 70% !important; }
  .wrap-regions {
    width: 30% !important; } }

/*
.category-container-desktop {
    display: none;
}
*/
.category-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  line-height: 8px;
  width: 99%; }

.category-container .desktop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.category-container .desktop .category-item-container {
  width: auto;
  background-color: #FFF;
  cursor: pointer;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.category-container .desktop .category-item-container .wrapp-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.category-container .desktop .category-item-container .wrapp-item .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 5px 0 5px; }

.category-container .desktop .category-item-container .wrapp-item .items p {
  font-size: 16px;
  color: #666; }

.category-container .desktop .category-item-container .wrapp-item .items p span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: block;
  line-height: 17px; }

.category-container .desktop .category-item-container .wrapp-item .category-item-selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 4px;
  background-color: #979797; }

.category-container .desktop .category-item-container:first-child {
  width: 15%; }

.category-container .desktop .category-item-container:first-child .items {
  padding: 0 5px; }

.category-container .desktop .category-item-container:first-child .items p {
  width: auto; }

.category-container .desktop .show-more-container {
  width: auto;
  background-color: #FFF;
  cursor: pointer;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 20%;
  padding-top: 4px;
  position: relative;
  padding-left: 15px; }

.category-container .desktop .show-more-container .show-more-header {
  width: 100%;
  position: relative; }

.category-container .desktop .show-more-container .show-more-header .arrow-down {
  display: block;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #666;
  position: absolute;
  width: 0;
  height: 0;
  top: 32%;
  right: 0;
  left: 10%; }

.category-container .desktop .show-more-container .show-more-header p {
  font-size: 16px;
  color: #666;
  padding-left: 30px;
  text-align: left; }

.category-container .desktop .show-more-container .show-more-categories-container {
  position: absolute;
  top: 90%;
  margin-left: 0;
  z-index: 10;
  width: auto;
  background-color: #FFF;
  cursor: pointer;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: inline-block;
  width: auto;
  left: -134px;
  border-left: 1px solid #E7E7E7;
  border-right: 1px solid #E7E7E7; }

.category-container .desktop .show-more-container .show-more-categories-container .show-more-categories-list {
  border-bottom: 1px solid #E7E7E7;
  width: 100%; }

.category-container .desktop .show-more-container .show-more-categories-container .show-more-categories-list p {
  font-size: 16px;
  color: #666;
  text-align: left;
  padding-left: 10px;
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 17px; }

.category-container .desktop .show-more-container .show-more-categories-container .show-more-categories-list:first-child {
  border-top: 1px solid #E7E7E7; }

.category-container .desktop .show-more-categories-list:hover p {
  font-weight: bold; }

.category-container .mobile {
  display: none;
  position: relative;
  cursor: pointer; }

.category-container .mobile .category-button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.category-container .mobile .category-button .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  margin-right: 10px; }

.category-container .mobile .category-button .wrapper .arrow-container {
  position: relative; }

.category-container .mobile .category-button .wrapper .arrow-container .arrow-down {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #666;
  position: absolute;
  width: 0;
  height: 0;
  top: 16px;
  right: 0;
  left: 0; }

.category-container .mobile .category-button .wrapper p {
  font-size: 16px;
  color: #666;
  padding-left: 20px;
  text-transform: capitalize;
  text-align: left; }

.category-container .mobile .list-container {
  position: absolute;
  border: 1px solid #d9d9d9;
  padding: 10px 25px 15px 15px;
  border-radius: 5px;
  z-index: 500;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  display: inline-block;
  background-color: #FFF;
  width: 280px; }

.category-container .mobile .list-container .categories-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: auto; }

.category-container .mobile .list-container .categories-list .category-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  border-bottom: 1px solid #E7E7E7; }

.category-container .mobile .list-container .categories-list .category-item .item-name {
  display: inline-block;
  width: 95%; }

.category-container .mobile .list-container .categories-list .category-item .item-name p {
  font-size: 16px;
  color: #666;
  padding-left: 10px;
  text-transform: capitalize;
  text-align: left; }

.category-container .mobile .list-container .categories-list .category-item .item-name .bold {
  font-weight: bold; }

.category-container .mobile .list-container .categories-list .category-item .checked-wrapper {
  display: inline-block;
  width: 5%;
  padding-top: 10px; }

.category-container .mobile .list-container .categories-list .category-item .checked-wrapper .checked {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  height: 20px;
  width: 12px;
  border-bottom: 6px solid #78b13f;
  border-right: 6px solid #78b13f; }

@media only screen and (max-width: 650px) {
  .category-container .desktop {
    display: none !important; }
  .category-container .desktop .category-item-container .items {
    padding: 0 10px 0 10px; }
  .category-container .desktop .category-item-container .items p span {
    max-width: 150px; }
  .category-container .desktop .category-item-container:first-child {
    width: 9%; }
  .category-container .desktop .show-more-container .show-more-categories-container {
    left: 10%; }
  .category-container .mobile {
    display: inline !important; } }