/* styling for filter inputs */

.orderby-displaynumber.withFilter {
  margin-bottom: 0px;
  padding: 0px;
  position: relative;
}
.orderby-displaynumber.withFilter > div.row-fluid {
  padding: 15px 0px;
}

/* Filter button - position */
.row-fluid div.span3.myFilterButtonPos,
div.myFilterButtonPos {
  padding-right: 20px;
  text-align: right;
  /*position: relative;*/
  min-height: 43px;
}
/* Filter button - count text */
div.myFilterButtonPos > div.myCount {
  position: absolute;
  right: 20px;
  /*top: calc(100% + 15px);*/
  top: 100%;
  line-height: 20px;
  font-size: 12px;
  /*z-index: -1;*/
}
/* Filter button - button */
div.myButtonFilter {
  background-color: #009de0;
  height: 43px;
  line-height: 43px;
  color: white;
  font-weight: bold;
  text-align: left;
  width: 230px;
  max-width: 100%;
  display: inline-block;
  /*border-radius: 16px;*/
  border-radius: 20px;
  cursor: pointer;
  /*padding-left: 35px;*/
  padding-left: 14%;
  /*padding-right: 24px;*/
  padding-right: 9.8%;
}
div.myButtonFilter.myOpen {
  background-color: #b0c800;
}
div.myButtonFilter:before {
  content: "\f107";
  font: normal normal normal 14px/1 FontAwesome;
  float: right;
  display: block;
  line-height: 43px;
  font-size: 20px;
  font-weight: bold;
  margin-left: 7px;
}

/* Filter MODULES */
div.myProductsList.even-odd.container-fluid {
  margin-top: 20px;
}
div#myFilterModules {
  /*margin-bottom: 20px;*/
  /*display: none;*/
  position: relative;
  overflow: hidden;
  height: 0px;
}
div#myFilterModules.myOpen {
  /*display: block;*/
  height: auto;
}
div#myFilterModules div.mySpacer {
  background-color: #eeeeee;
  border: 1px solid #cacaca;
  padding: 10px;
}
div#myFilterModules form {
  margin-bottom: 0px;
  display: table;
  width: 100%;
}
div#myFilterModules div.myCover {
  display: table;
  width: 100%;
}
div#myFilterModules div.myCover > div {
  /*float: left;*/
  display: table-cell;
  vertical-align: top;
}
div#myFilterModules div.myButtons {
  width: 20%;
}
div#myFilterModules div.myContents {
  width: 80%;
  background-color: white;
  padding: 10px;
}
/* Filter MODULES - button format */
div#myFilterModules div.myButtons > div {
  background-color: #009de0;
  color: white;
  line-height: 18px;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 16px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  cursor: pointer;
  margin-bottom: 4px;
  position: relative;
  padding-right: 32px;
}
div#myFilterModules div.myButtons > div:last-child {
  margin-bottom: 0px;
}
div#myFilterModules div.myButtons > div.myOpen {
  background-color: #b0c800;
}
div#myFilterModules div.myButtons > div .myCount {
  position: absolute;
  display: none;
  top: 0px;
  bottom: 0px;
  right: 7px;
  margin: auto;
  color: black;
  background-color: white;
  /*width: 20px;*/
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 100%;
}
div#myFilterModules div.myButtons > div.myY .myCount {
  display: block;
}
/* Filter MODULES - content format */
div#myFilterModules div.myContents > div {
  margin-bottom: 25px;
  display: table;
  width: 100%;
  overflow: hidden;
}
div#myFilterModules div.myContents > div:last-child {
  margin-bottom: 0px;
}
div#myFilterModules div.myContents > div.myClose {
  display: none;
}
div#myFilterModules div.myContents > div.myOpen {
  margin-bottom: 0px;
}
div#myFilterModules div.myContents p.myTitle {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 20px;
  font-weight: normal;
  color: #009de0;
}
div#myFilterModules div.myContents p.myTitle:nth-child(n+2) {
  margin-top: 30px;
}
/* Filter MODULES - content format - range */
div#myFilterModules div.myContents div.myRangeCol {
  display: table;
  width: 100%;
}
div#myFilterModules div.myContents div.myRange {
  width: 50%;
  float: left;
}
div#myFilterModules div.myContents div.myRange p {
  margin-bottom: 7px;
}
div#myFilterModules div.myContents div.myRange span {
  line-height: 26px;
  display: inline-block;
  vertical-align: top;
  margin-right: 7px;
}
div#myFilterModules div.myContents div.myRange input[type="number"] {
  margin: 0px;
  vertical-align: top;
  height: 26px;
  width: 74px;
}
/* Filter MODULES - content format - list ul */
div#myFilterModules div.myContents ul {/* change to flex position - not used */
  list-style-type: none;
  margin: 0px;
  /*-webkit-column-count: 3;*/
  /*-webkit-column-gap: 30px;*/
  /*-moz-column-count: 3;*/
  /*-moz-column-gap: 30px;*/
  column-count: 3;
  column-gap: 20px;
  /*column-rule: 4px outset #ff00ff;*/
  /* change to flex position */
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  /*width: calc(100% + 20px);*/
  /*max-width: calc(100% + 20px);*/
}
div#myFilterModules div.myContents ul li {/* change to flex position - not used */
  margin-bottom: 10px;
  display: table;
  width: 100%;
  vertical-align: top;
  line-height: 20px;
  /* change to flex position */
  /*width: calc(33.33% - 20px);*/
  /*margin-right: 20px;*/
}
div#myFilterModules div.myContents input[type="checkbox"],
div#myFilterModules div.myContents label {
  margin: 0px;
  vertical-align: top;
  line-height: 20px;
}
div#myFilterModules div.myContents input[type="checkbox"] {
  width: 16px;
  height: 20px;
  margin-right: 7px;
  display: inline-block;
}
div#myFilterModules div.myContents label {
  display: inline;
}
/* Filter MODULES - send button */
div#myFilterModules .mySendButton,
div#myFilterModules .myResetButton {
  float: right;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 7px 16px;
  border: 0px;
  border-radius: 20px;
  color: white;
  background-color: #009de0;
}
div#myFilterModules .myResetButton {
  text-decoration: none;
  margin-right: 10px;
}
div#myFilterModules .mySendButton:hover,
div#myFilterModules .myResetButton:hover {
  background-color: #b0c800;
}



/* styling for filter categories */
div.myFiltrCategories {
  margin-bottom: 32px;
}
div.myFiltrCategories > div.myTitle {
  color: #009de2;
  font-size: 28px;
  font-weight: 600;
  line-height: normal;
}
div.myFiltrCategories div.myListCategories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*flex-wrap: nowrap;*/
  align-items: center;
  /*align-items: flex-start;*/
  /*justify-content: space-between;*/
  /*justify-content: space-around;*/
}
div.myFiltrCategories div.myListCategories > span {
  /*margin-top: 16px;*/
  /*margin-right: 24px;*/
  line-height: 100%;
  /*max-width: 100px;*/
    margin-top: 20px;
    margin-right: 7px;
    min-height: 25px;
  
}
div.myFiltrCategories div.myListCategories > span a,
div.myFiltrCategories div.myListCategories > div a {
  /*color: #2f66af;*/
  color: white;
  background-color: #b1c900;
  padding: 8px;
  text-decoration: none;
}
div.myFiltrCategories div.myListCategories > div a {
  background-color: #009de0;
}
div.myFiltrCategories div.myListCategories > span.myActive a {
  font-weight: bold;
  /*text-decoration: underline;*/
  /*color: #4a4a4a;*/
  background-color: #646464;
}
div.myFiltrCategories div.myListCategories > span a:hover,
div.myFiltrCategories div.myListCategories > div a:hover {
  background-color: #646464;
  text-decoration: none;
}
div.myFiltrCategories div.myListCategories > div {
  width: 100%;
  flex: auto;
  font-weight: bold;
  line-height: normal;
}
div.myFiltrCategories div.myListCategories > div.myBack {
  text-align: right;
}
div.myFiltrCategories div.myListCategories > div.myNoCat {
  margin-top: 14px;
}
/* styling for filter categories - related products with used jquery */
div#myFilterProductsRelated.myFiltrCategories.myOff div.myBack {
  display: none;
}
div#myFilterProductsRelated.myFiltrCategories a {
  cursor: pointer;
}
div#related.vmj_tabcontent div.row-fluid.tft-modules > div.tf-module.myOff {
  display: none;
}


/* styling for my change ordering */
div.orderby-displaynumber.withFilter div.span9.floatleft.display-number > div {
  margin-left: 20px;
  margin-right: 0px;
}
div.myOrderListContainer {
  margin: 0px 20px;
}
div.myOrderListContainer .myTitle {
  color: #009de0;
  font-weight: 600;
  font-size: 16px;
  line-height: 43px;
  margin-right: 20px;
}
div.myOrderListContainer select,
div.myManufacturerContainer select {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #cacaca;
  background: white;
  color: #646464;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  /*font-family: 'Roboto';*/
  margin: 0px;
  height: 43px;
  vertical-align: top;
  padding: 0px !important;
  padding-left: 20px !important;
}
div.myPageSwitchContainer > span.display-results-no {
  line-height: 43px;
  margin: 0px;
  margin-right: 10px;
}
