

/* SIDEBAR */
.sidebar-catagory-title{ position: relative;}
.seemore-link{
  position: absolute;
  bottom: 13px;
  right: 0px;
  font-style: italic;
  font-size: 12px !important; 
  padding-right: 5px;
  -webkit-transition: all ease-out 0.4s;
  -moz-transition: all ease-out 0.4s;
  -o-transition: all ease-out 0.4s;
  transition: all ease-out 0.4s;
}
.seemore-link:hover{ padding-right: 0px;}
.seemore-link i{
  padding-left: 0;

  -webkit-transition: all ease-out 0.4s;
  -moz-transition: all ease-out 0.4s;
  -o-transition: all ease-out 0.4s;
  transition: all ease-out 0.4s;
}
.seemore-link:hover i{padding-left: 5px;}
.sbar-news .news-date{
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 12px;
  font-style: italic;
  float: right;
  text-align: right;
  margin: 0;
  margin-right: 10px;
}
.sbar-news ul li{
  display: inline-block;
  width: 100%;
  border-bottom: 1px dashed #ececec;
  padding: 15px 0 10px 0;;
}
.sbar-news ul li:first-child{ padding-top: 0;}
.sbar-news ul li:last-child{ border: none;}


/* SIDEBAR */
.sidebar-catagory {
  background-color: #fff;
  border-bottom: 5px solid #d9d9d9;
  color: #949494;
  min-height: 100px;
  margin-bottom: 35px;
  padding: 0;
}
#side-bar > .widget{
  margin-bottom: 20px;
  background: #fff;
}
.sidebar .widget-categories {border-bottom: none;margin-bottom: 0 !important; }
.custom-vertical-nav ul {list-style: none;position: relative;}
ul.main-list { padding-left: 0; background: #fff; margin-bottom: 0;}
ul.main-list li{ margin-bottom: 5px; }
ul.main-list li, 
ul.main-list li > a{ 
  width: 100%; display: inline-block;
}
ul.main-list a:hover { color: #d7272a;}
ul.main-list li img {margin-right: 5px;}
ul.main-list li:hover img {filter: brightness(0) invert(1);}
ul.main-list li ul.dropdown-list li {border: none;}
ul.main-list li.dropdown > a::after {
  font-family: fontawesome;
  content: "\f106";
  position: absolute;
  right: 0;
  height: 25px;
  color: #8c8c8c;
}
ul.main-list li.dropdown.active > a::after {
  content: "\f106";
}
ul.main-list li a {
 font-size: 18px;
 color: #8a4c62;
 line-height: 2.8;
 -webkit-transition: all .15s ease-out;
 transition: all .15s ease-out;
 background: #E5E5E5;
 padding: 0 20px;
 background: #f4d3df;
}
/*ul.main-list li.dropdown a {color: #8a4d61 !important;}*/
ul.main-list a:not(.active):hover,
.tabs.tabs-sidebar .sbar .dropdown-active > a{
  background: #ed9aba !important; 
  color: #d21c63 !important;
}
.submenu-active{ color: #d21c63 !important; }

ul.main-list li.active > a{
  background: #DE5C8E;
  /*color: #fff !important;*/
}
ul.main-list a span { font-size: 14px;  }
ul.dropdown-list {padding-left: 0;}
ul.dropdown-list i {font-size: 10px;position: relative;top: -1px;margin-right: 3px;}
ul.dropdown-list a { padding-left: 25px; }
ul.dropdown-list ul.dropdown-list a { padding-left: 40px; }
ul.dropdown-list ul.dropdown-list ul.dropdown-list a { padding-left: 60px; }
li.dropdown.active > ul.dropdown-list {display: block;}
ul.dropdown-list {display: none;}
ul li.dropdown.active > a {
  /*color: #000 !important; */
  color: #8a4c62;
}
ul li.dropdown.active > a img {filter: brightness(0) invert(1);}
ul li.dropdown.active li.dropdown.active > a {
  /*color: #696969 !important;*/
  color: #d21c63 !important;
}
.widget-title{margin-top: 30px;}
.sidebar .widget-title::after{border: none;margin-top: 0;}


.widget .widget-title, 
.widget > h4{
  margin: 0;
  padding: 10px 0;
  line-height: 1.4;
  margin: 10px 0 15px;
  padding-bottom: 10px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: normal;
  color: #fff;
  font-size: 1.25em;
}

.widget .widget-title:after, 
.widget .widget-title:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 0
}
.widget .widget-title:before{
  width: 100%;
  border-bottom: 1px solid #ececec;
}
.widget .widget-title:after{
  width: 50px;
  border-bottom: 1px solid #c11b59;
}

/* SEARCH */
#custom-search-input{
  padding: 3px;
  border: solid 1px #E4E4E4;
  /*border-radius: 6px;*/
  background-color: #fff;
}
#custom-search-input input{
  border: 0;
  box-shadow: none;
}
#custom-search-input button{
  margin: 2px 0 0 0;
  background: none;
  box-shadow: none;
  border: 0;
  color: #666666;
  padding: 0 8px 0 10px;
  border-left: solid 1px #ccc;
}
#custom-search-input button i{ margin-right: 0;}
#custom-search-input button:hover{
  border: 0;
  box-shadow: none;
  border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{font-size: 23px;}


/* PRICE RANGE */
section.range-slider {
  position: relative;
  width: 100%;
  height: 70px;
  float: left;
}
section.range-slider input[type="range"] {
  pointer-events: none;
  position: absolute;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 2);
  border: none;
  border-radius: 14px;
  background: #F1EFEF;
  box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
  -webkit-box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
  overflow: hidden;
  left: 0;
  top: 30px;
  width: 100%;
  outline: none;
  height: 10px;
  margin: 0;
  padding: 0;
}
section.range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dad8da), color-stop(100%, #413F41));
  /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top, #dad8da 0, #413F41 100%);
  /* older mobile safari and android > 2.2 */
  background-image: linear-gradient(to bottom, #dad8da 0, #413F41 100%);
}
section.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 14px;
  background-image: linear-gradient(to bottom, #dad8da 0, #413F41 100%);
  /* W3C */
}
section.range-slider input[type="range"]::-ms-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -ms-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 14px;
  border: 0;
  background-image: linear-gradient(to bottom, #dad8da 0, #413F41 100%);
  /* W3C */
}
section.range-slider input[type=range]::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: black;
  border: 0;
}
section.range-slider input[type=range]:last-of-type::-moz-range-track {
  -moz-appearance: none;
  background: none transparent;
  border: 0;
}
section.range-slider input[type=range]::-moz-focus-outer {border: 0;}
.range-slider  .bar-wrap{
  display: inline-block;
  width: 70%;
  float: left;
  position: relative;
}
.range-slider .btn-wrap{
  width: 30%;
  float: right;
  display: inline-block;
}
.rangeValues{
  color: #333;
  font-weight: 600;
  font-size: 10px;
}
.range-slider .search-price-btn{
  padding: 6px 5px;
  margin-left: 10px;
  display: inline-block;
  color: #333;
  font-weight: 600;
  border: 2px solid #333;
  border-radius: 3px;
}
.range-slider .search-price-btn:hover{ background: #333; color: #fff !important;} 
.menu-show-xs{ display: none;}


.sidebar-catagory-title{ position: relative;}
.sidebar-catagory-title .seemore-link{
  position: absolute;
  bottom: 13px;
  right: 0px;
  font-style: italic;
  font-size: 12px !important; 
  padding-right: 5px;
  -webkit-transition: all ease-out 0.4s;
  -moz-transition: all ease-out 0.4s;
  -o-transition: all ease-out 0.4s;
  transition: all ease-out 0.4s;
}
.sidebar-catagory-title .seemore-link:hover{ padding-right: 0px;}
.sidebar-catagory-title .seemore-link i{
  padding-left: 0;

  -webkit-transition: all ease-out 0.4s;
  -moz-transition: all ease-out 0.4s;
  -o-transition: all ease-out 0.4s;
  transition: all ease-out 0.4s;
}
.sidebar-catagory-title .seemore-link:hover i{padding-left: 5px;}
.sbar-news .news-date{
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 12px;
  font-style: italic;
  float: right;
  text-align: right;
  margin: 0;
  margin-right: 10px;
}
.sbar-news ul li{
  display: inline-block;
  width: 100%;
  border-bottom: 1px dashed #ececec;
  padding: 15px 0 10px 0;;
}
.sbar-news ul li:first-child{ padding-top: 0;}
.sbar-news ul li:last-child{ border: none;}



.sbar{ 
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
}
#side-bar.active:before{ background-color: #fff !important;}
.subpage-content-area{ padding-left: 60px;}
.page-wrapper-area{ position: relative; }
#side-bar-hidden-mobile{ display: none; }

.custom-vertical-nav .widget-title{ display: none; }

/* sidebar-tabs  */
.tabs .nav-tabs .nav-link{ margin-top: -1px; }
.tabs.tabs-sidebar .sbar .nav-tabs{ border: 0; }
.tabs.tabs-sidebar .sbar .nav-tabs .nav-link{ margin-top: 0; }
.tabs.tabs-sidebar .sbar .nav-tabs .nav-link{ border-radius: 0; }
.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item .btn-dropdown-toggle:before,
.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item .btn-dropdown-submenu-toggle:before{
  font-family: "inspiro-icons";
  content: "\e930";
  line-height: 50px;
  position: absolute;
  right: 15px;
}
.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item.dropdown-active .btn-dropdown-toggle:before,
.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item .ddp.submenu-active .btn-dropdown-submenu-toggle:before{
  transform: rotate(90deg);
}
.tabs.tabs-sidebar .custom-vertical-nav .sbar .nav-tabs > .nav-item{ margin-bottom: 10px; }
.tabs.tabs-sidebar .sbar .nav-tabs .nav-link,
.tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item{
  font-family: 'chulalongkornbold';
  font-size: 18px;
  line-height: 50px;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-out;
  padding: 0 20px;
  color: #b23562;
  background: #f5bed2;
  border: none;
  float: left;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;

}
/*.tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item{ background: transparent; }*/
.tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active .dropdown-menu{ 
  display: inline-block;
  /*background: #eeb2c9;*/
  border-radius: 0;
}


.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item > .nav-link.active,
.tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active .dropdown-menu .dropdown-item.active,
.tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item.chosen{
  background: #DE5C8E;
  color: #fff !important;
  border: none;
}
.tabs.tabs-sidebar .sbar .nav-tabs > .nav-item > .nav-link .dropdown-menu .nav-link.dropdown-item.active{
  background: #DE5C8E !important;
}
.tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu{ 
  width: 100%;
  padding: 0;
  position: relative !important;
  transform: translate(0) !important;
}


.tabs.tabs-sidebar .sbar .nav-tabs .nav-link i{
  float: right;
  line-height: 50px;
  margin: 0;
}

/* SUBMENU */
.tabs.tabs-sidebar .sbar .dropdown-menu > a{ padding-left: 20px !important; }
.tabs.tabs-sidebar .sbar .ddp .dropdown-submenu{ display: none; }
.tabs.tabs-sidebar .sbar .ddp.submenu-active .dropdown-submenu{ display: inline-block; width: 100%; }
.tabs.tabs-sidebar .sbar .dropdown-submenu > a{ 
  padding-left: 30px !important; 
}

.tabs.tabs-sidebar .sbar .dropdown-submenu > a{
 color: #c75d83;
 background: #f5bed2;
}

/* HOVER  */
.tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active > .btn-dropdown-toggle,
.tabs.tabs-sidebar .sbar .nav-tabs .nav-link:hover,
.tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item:hover,
.tabs.tabs-sidebar .sbar .dropdown-submenu > a: hover{
  background: #ed9aba !important;
  color: #d21c63 !important;
  cursor: pointer;
}


.sbar.sbar-banner .flickity-page-dots{ margin-bottom: 0; }



@media screen{
  #body-wrapper-disable {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  #body-wrapper-disable.active {
    visibility: visible;
    opacity: 1;
  }
}
@media(max-width: 1367px){
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-link, .tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item{
    font-size: 16px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    line-height: 50px;
    height: 50px;
  }
}
@media(max-width: 1024px){
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-item{ width: 100%; padding-top: 10px;}
  .tabs.tabs-sidebar .sbar .nav-tabs > .nav-item{ margin-bottom: 0; padding-top: 0;}
}
@media(max-width: 991px){
  html.disable-scroll .section-subpage{ z-index: 200; }
  .custom-vertical-nav{ top: 20px; }
  .custom-vertical-nav .widget-title{ display: inline-block; width: 100%;}

  #mainMenu:not(.menu-overlay) nav{ padding-top: 20px; }
  #mainMenu:not(.menu-overlay) nav > ul > li > a{ font-size: 18px; padding: 14px 0;}
  #side-bar-hidden-mobile{ display: inline-block; }
  .mainMenu-open #header #mainMenu{ width: 100%; }
  #mainMenu:not(.menu-overlay) nav > ul > li > a{ font-size: 16px; }
  html.disable-scroll, html.disable-scroll > body {overflow: hidden !important;}
  #body-wrapper-disable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6099;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    /*z-index: 1;*/
    z-index: 4;
    /*display: none;*/
  }
  #side-bar > .widget, ul.main-list, ul.main-list li a, ul.main-list a{ background: transparent; }
  .subpage-content-area{ width: 100%; padding-left: 0px; max-width: 100%;}
  .custom-vertical-nav{
    position: fixed;
    width: 400px;
    top: 20px;
    bottom: 0;
    background: #cf5181 !Important;
    border-radius: 0 20px 20px 0;
    padding: 2em;
    padding-left: 60px; 
    left: -400px;
    z-index: 199;
    height: 100%;
    overflow: scroll;
  }
  .page-with-sidebar.sidebar-active .page-wrapper-area{ left: 300px; position: relative; }
  .page-with-sidebar.sidebar-active .custom-vertical-nav{ left: 0; }
  
  #side-bar-hidden-mobile{
    position: fixed;
    left: 0;
    top: 45vh;
    font-size: 2em;
    z-index: 200;
  }
  .sidebar-btn{
    width: 50px;
    height: 170px;
    line-height: 170px;
    display: inline-block;
    background: url(../images/sidebar-btn.png) no-repeat;
    background-size: 100%;
    background-position: left center;
    text-align: center;
    font-size: 30px;
    z-index: 200;
  }
  .sidebar-btn i{ line-height: 170px !important; color: #fff !important;}
  .sidebar-btn.active i{ transform: rotate(180deg); margin-right: 10px;}
  
  ul.main-list li a{ color: #fff; }

  .tabs.tabs-sidebar .sbar .nav-tabs > .nav-item{ box-shadow: 0 1px 0 rgba(196, 26, 92, 0.83);}
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active .dropdown-menu{ margin-bottom: 10px; }
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active > .btn-dropdown-toggle, 
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-link:hover, 
  .tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item:hover,
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active .dropdown-menu{
    background: transparent;
  }
  .tabs.tabs-sidebar .sbar .nav-tabs > .nav-item > .nav-link{
    background: transparent;
    color: #fff;
  }
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-link, 
  .tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item{ 
    /*color: #fff; */
  }
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-item.dropdown.dropdown-active > .btn-dropdown-toggle, 
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-link:hover, 
  .tabs.tabs-sidebar .sbar .nav-tabs .dropdown-menu .dropdown-item:hover{
    color: #850c3b !important;
    background: transparent;
  }

}
@media(max-width: 912px){ #side-bar{ left: -365px; } }
@media(max-width: 820px){ #side-bar{ left: -360px; } }
@media(max-width: 540px){ #side-bar{     width: 300px; left: -345px; } }

@media(max-width: 480px){
  .sidebar-btn{ width: 28px; font-size: 24px;}
  .custom-vertical-nav{ padding-left: 40px; }
  #side-bar.active{ width: 96%; left: -16px;}
  #side-bar{ width: 300px; left: -320px;}
  #side-bar-hidden-mobile{ top: 105px; right: -32px;width: fit-content; }
  .page-with-sidebar.sidebar-active .page-wrapper-area{ left: 0; }
  .page-with-sidebar.sidebar-active .subpage-content-area{  opacity: 0; visibility: collapse;}
  /*ul.main-list li.dropdown a {color: #fff !important;}*/
}
@media(max-width: 375px){
  .custom-vertical-nav{ width: 98%; padding-left: 40px;}
}
@media(max-width: 320px){
  .tabs.tabs-sidebar .sbar .nav-tabs .nav-link{
    padding: 0 10px;
  }
}
