/*##########################################################################

##

## oc core

##

##########################################################################*/

.sf3 .box-content{

    padding: 0px 0px 10px 0px;

}



.sf3 .box-heading{

    border-bottom:0px;

    background:#E8E8E9

}



/*##########################################################################

##

## sf3 filter housing

##

##########################################################################*/



.sf3-searchbox-wrapper{

    padding: 5px;

    margin-top: -4px;

    background: #E8E8E8 url('../images/lupa.png');

    background-repeat: no-repeat;

    padding-left: 25px;

    background-position: 5px 8px; 

    border-bottom: 1px solid #c0c0c0;

}



.sf3-searchbox-wrapper.sf3-price{

    padding-left: 5px;

    background: #E8E8E8;

    text-align: center;

}



.sf3-element{

    margin-bottom: 10px;

}

.sf3-table input[type="radio"] {
    /*-webkit-appearance: checkbox;  Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}


.sf3-filter {

    padding: 5px 1px 5px 5px;

}



.sf3-searchbox{

    margin-bottom: 5px;

    border-radius: 5px;

    border: 1px solid #CCCCCC;

    padding: 5px;

    font-size: .8em;

}



.sf3-searchbox.sf3-price{

    width: 25%;

     

}





.sf3-body{

    /*padding: 0px 10px 10px 10px;*/

}



/*##########################################################################

##

## filter inner elements

##





table.sf3-table td{

    font-size: .7em;

}
##########################################################################*/


.sf3-searchbox input[type='text'], .sf3-body select

{

    width:100%;

    border-radius: 5px;

}



.sf3 ul{

    margin:0px;

    padding:0px;

    list-style-type:none;

}



.sf3 li{

    cursor:pointer;

    font-size: .8em;

}



.sf3 li input{

    margin-left:0px;

}



.sf3 li:hover{

    background:#f5f5f5;

}





/*##########################################################################

##

## filter elements titles and stuff

##

##########################################################################*/



.sf3-element-wrapper{

}



.label-wrapper {

    AAAdisplay: inline-block;

    display:inline;

}



.sf3-element-header{

    background-color: #E8E8E9;

    margin-bottom: 5px;

    border-top:1px solid #c0c0c0;     

    height:22px; 

    line-height:22px;

    cursor:default;

}



.sf3-title{

    padding:5px 0px 5px 10px;

    margin-left: 5px;

    font-weight: bold;

    display:inline;

    font-size: 11px;

}



.sf3-totals::before{

	content:"("

}



.sf3-totals::after{

	content:")"

}



/*##########################################################################

##

## behavior stuff

##

##########################################################################*/



td.active {

  background: #dadada;

}



.greyout{

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    opacity: .5;

    

}

.hide{

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    height:0px;

    amargin-top:-20px;

    

}

.poshide{

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    opacity: 0!important;

    display:flex;

}



.sf3-toggle{    

    width: 24px;

    height: 22px;

    float: right;    

}



.sf3-loading{    

    background: url('../image/loading.gif');

    width: 10px;

    height: 10px;

    float:right;

    margin: 3px 0px 0px 4px;       

}



.sf3-expanded .sf3-toggle{

    background: url('../image/sf3-theme1-expanded.png');

}

.sf3-collapsed .sf3-toggle{

    background: url('../image/sf3-theme1-collapsed.png');

}





.sf3-label-slider input[type='text'] {

    text-align: center;

    border: 0px;

    background: transparent;

    font-size: inherit;

    width: 100%;

    color: #ffffff;

}



.sf3-clear{

    box-shadow: 1px 1px 1px 1px #c0c0c0;

    position: relative;

    top: -3px;

    right: -5px;

    font-size: 9px;

    padding: 1px 5px;

    color: #fff;

    background-color: #fb9075;

    border-radius: 3px;

    display: inline-block;    

    height: 18px;

    line-height: 18px;

    text-align: center;   

    float:right;

    cursor:pointer;

}



.sf3-table{

    width:100%

}



.sf3-table tr{

    cursor:pointer;

}



.sf3-scrollable .sf3-table{

    width: 95%;

}



.sf3-showmore{

    padding: 10px 10px 0px 10px;

    text-align: right;

    display: block;

    text-decoration:none;

    cursor:pointer;

    color:#38B0E3;

} 





.sf3-help{

    background: #E8E8E8 url('../images/help.png');

    width: 16px;

    height: 16px;

    display: inline-block;

    background-repeat: no-repeat;

    vertical-align: middle;

    margin-top: -2px;

    cursor:pointer;     

}



/*##########################################################################

##

## cluster styling

##

##########################################################################*/



.sf3-cluster-list{

    margin-bottom:2px;

    cursor: pointer;

    padding:2px;

}



.sf3-cluster-list img{

    vertical-align: middle;    

}



.sf3-cluster-list-label{

    font-size: 9px;

    color: #000;

    margin-left:5px;

}



.sf3-cluster-mosaic{

    margin:1px;

    display:inline-block;

    cursor: pointer;

    padding:2px;

    border:1px solid #eaeaea;

}



.sf3-cluster-mosaic-active{

    border:1px solid red;

}



.sf3-cluster-list-active{

    border:1px solid red;

}



/*##########################################################################

##

## debugging

##

##########################################################################*/

#sf3-debug{

    width: 300px;

    height: 300px;

    padding: 0.5em;

    background: rgb(255, 202, 202);    

    z-index: 100;

    opacity: .9;

    left: 5px;

    position: absolute !important;

    top: 5px;

    border: 2px solid #dadada;  

}



#sf3-debug .inner{

    overflow-y: scroll;

    height:90%;

}



#sf3-debug h1 {

    background: #989898;

    color: #ffffff;

    font-size: 2em;

    margin: -6px -6px 0px -6px;

    padding: 5px;

    cursor: move;

}



/*##########################################################################

##

## sliders

##

##########################################################################*/



.irs-from, .irs-to, .irs-single {

    color: #fff;

    background: #fb9075!important;

}



/*##########################################################################

##

## levels

##

##########################################################################*/



li.level1{

    padding-left:25px;

}



td.level-1{

	width:20px

}



/*##########################################################################

##

## bars

##

##########################################################################*/



.sf3-filter-line {

    height: 20px;

}



.sf3-input-wrapper img{

    /*width:20px;

    height:20px;*/   

}



.sf3-image-from-option-image{

    display:inline;

}

.sf3-image-from-option-image img{

    /*width:20px;

    height:20px;*/      

}



.sf3-image-from-option-name{

    /*width:20px;

    height:20px;*/      

}



.sf3-image-from-option-name.mosaic{

    margin:1px;

    display: inline-block;

    cursor: pointer;

}



div.sf3-input-wrapper{

    display: inline-block;

    height: 20px;

    vertical-align: sub;

}



div.sf3-bar-wrapper{

    display: inline-block;

    float:right;

    height:20px;

}



div.sf3-bar-box{

    display: inline-block;

    border: 1px solid #E4E4E4;

    float: right;

    height:10px;

    margin-top:5px;

}



div.sf3-bar-content{

    display:inline;

    background: #38B0E3;

    height: 10px;

    float: right;    

    AAAborder:1px solid red;

}



.imgbar{

    -webkit-transition: width .3s ease-in-out;

    -moz-transition: width .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: width .3s ease-in-out;

    transition: width .3s ease-in-out;    

}



/*##########################################################################

##

## expand/collapse

##

##########################################################################*/

.animate-show.ng-hide-add.ng-hide-add-active,

.animate-show.ng-hide-remove.ng-hide-remove-active {

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

}

.animate-show.ng-hide {

    opacity: 0;

}

.collapsible:hover{

    

}

.collapsible-trigger{

    background: url('../images/arrow.png');

    height: 12px;

    width: 12px;

    display: inline-block;

    float: right;

    margin: 5px;

    cursor:pointer;

}

.collapsible-trigger.down{

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

}

.collapsible-trigger.up{

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;  

      

    -moz-transform: rotate(-90deg);

    -webkit-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    transform: rotate(-90deg);

}



/*##########################################################################

##

## tooltip

##

##########################################################################*/



 .ui-tooltip, .arrow:after {

    background: black;

    border: 2px solid white;

  }

  .ui-tooltip {

    padding: 10px 20px;

    color: white;

    border-radius: 20px;

    font: bold 14px "Helvetica Neue", Sans-Serif;

    text-transform: uppercase;

    box-shadow: 0 0 7px black;

  }

  .arrow {

    width: 70px;

    height: 16px;

    overflow: hidden;

    position: absolute;

    left: 50%;

    margin-left: -35px;

    bottom: -16px;

  }

  .arrow.top {

    top: -16px;

    bottom: auto;

  }

  .arrow.left {

    left: 20%;

  }

  .arrow:after {

    content: "";

    position: absolute;

    left: 20px;

    top: -20px;

    width: 25px;

    height: 25px;

    box-shadow: 6px 5px 9px -9px black;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

  }

  .arrow.top:after {

    bottom: -20px;

    top: auto;

  }