#partial-filters h3 {
    margin-left:25px;/* overwrites */
}

#partial-filters .filter-block {
    width:224px;
    margin-left:10px;
}

#partial-filters .filter-block:last-child {
    margin-bottom:20px;
}

#partial-filters .filterblock-button,
#partial-filters .filterblock-header
{
    display:block;
    
    width: 224px;
    text-align: left;
    padding:10px 15px;
    
    border:solid 1px #d6d5d5;
    border-top:0;
    border-bottom-color:#c3c2c2;

    /*background:white url('/img/icon-open.png') no-repeat 192px center;*/
    background-color: white;
    
    font-size:12px;
    color:#565555;
    
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#partial-filters .filter-block.active .filterblock-button
{
    background-color: #f6f6f6;
}

#partial-filters .filterblock-button .filterheader-icon
{
    margin: 3px 0;
    padding-right: 15px;
}

#partial-filters .filterblock-header {
    background:white url('/img/icon-open.png') no-repeat 192px center;
    width:182px; /* 224 - border - padding */ 
    padding:10px 25px 10px 15px;
}

#partial-filters #filters-selected .filterblock-header,
#partial-filters #favorite-filter .filterblock-button {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

#partial-filters #filters-selected {
    margin-bottom:20px;
}

#partial-filters .filterselected-container {
    margin-bottom:20px;
}

#partial-filters .filterselected-title {
    padding-bottom:10px;
    border-bottom:solid 1px #c3c2c2;
    margin-bottom:10px;
    
    font-size:12px;
    font-weight:bold;
    color:#202020;
}

#partial-filters .filterselected-value {     
    display:block;
    width:191px;
    padding-right:11px;
    height:15px;
    line-height:15px;
    margin-bottom:5px;
    
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    
    background:transparent url('/img/icon-filter-remove.png') no-repeat 191px center;
    
    font-size:12px;
    color:#202020;
}

#partial-filters #filterselected-removeall {
    display:block;
    text-align:center;
    
    font-weight:bold;
    font-size:12px;
    
    color:#cf3900;
}

#partial-filters img.filterheader-icon {
    margin-right:10px;
    vertical-align:-3px;
}

/* tag icoon uitlijnen: */
#partial-filters #tag-filter img.filterheader-icon {
    vertical-align:0;
}
    
#partial-filters #tag-filter input#tagfilter-submit {
    
    width:20px;
    height:30px;
    
    margin:0;
    padding:0;
    border:0;
    margin-left:2px;
    
    background:transparent url('/img/icon-filter-submit.png') no-repeat center;
}

#partial-filters #tag-filter input#tagfilter-submit.disabled
{
    background:transparent url('/img/icon-filter-submit-disabled.png') no-repeat center;
}

#partial-filters .filterblock-body {
    width:202px; /* 224 - border - padding */ 
    padding:15px 10px;
    border:solid 1px #d6d5d5;
    border-top:0;
    border-bottom-color:#c3c2c2;
    
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(234,236,237,0) 5%,rgba(234,236,237,0) 95%,rgba(0,0,0,0.1) 100%);
    
    font-size:12px;
    color:#202020;
}

/** ""filterblock-close" = class die dynamisch door js kan worderden toegekend **/
#partial-filters .filter-block.filterblock-closed .filterblock-header {
    background-image:url('/img/icon-closed.png');
}
#partial-filters .filter-block.filterblock-closed .filterblock-body {
    display:none;
}

#partial-filters #favorite-filter.filter-block.filterblock-closed .filterblock-header {
    background-image: none;
    padding: 5px 25px 5px 15px
}

#partial-filters #favorite-filter.filter-block.filterblock-closed .filterblock-header .star {
    font-size: 22px;
}

#partial-filters .filterblock-body label {
    display:block;
    /*height:15px;*/
    margin-bottom:10px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* NOTICE: Doesn't work for filetype, because it has 2 colums */
#partial-filters .filterblock-body label:last-of-type {
    margin-bottom:0;
}

#partial-filters #format-filter .filterblock-body label {
    width:101px;
    float:left;
}

#partial-filters .filterblock-body input[type=checkbox],
#partial-filters .filterblock-body input[type=radio] {
    margin-right:5px;
    vertical-align:-2px;
}

#partial-filters .filterblock-body input[type=search] {
    height:30px;
    width:176px;
    padding:0;
    text-indent: 30px;
    margin:0;
    margin-bottom:10px;
    border: 0;
    /*border:1px solid #fff;*/ /* set "invisible" border to have the same width and height as when the red border is set.  */
    border-radius:5px;
    
    background:white url('/img/icon-filter-search.png') no-repeat 10px center;
}

#partial-filters .filterblock-body input[type="search"].tag-no-result
{
    border: 1px solid red;
}

#partial-filters #customfield-filter .filterblock-body .custom-field-container {
    margin-bottom:10px;
    width:202px;
    overflow:hidden;
}

#partial-filters #customfield-filter .filterblock-body label.custom-field-label {
    display:block;/*overwrites*/
    margin: 10px 0;
}

/* make sure only the first label of the filterblock is bold, the others should be checkbox lables */
#partial-filters #customfield-filter .filterblock-body label.custom-field-label:first-child {
    font-weight:bold;
}

/* These should be radio labels */
#partial-filters #customfield-filter .filterblock-body label:not(.custom-field-label) {
    display:block;
    float:left;
    /*margin-bottom: 10px;*/
}

#partial-filters #customfield-filter .filterblock-body select {
    border: 1px solid #d6d5d5;
    border-radius: 2px;
    height: 25px;
    margin: 0;
    padding: 0 0 0 5px;
    width:100%;
}

#partial-filters #customfield-filter .filterblock-body input[type="radio"] {
    margin: 0 5px;
}

#partial-filters .filterblock-body input.datepicker {
    height:30px;
    width:91px;
    padding:0;
    padding-left:5px;
    margin:10px 0 5px 0;
    border:0;
    border-radius:5px;
}

#partial-filters .filterblock-body input.datepicker:first-child {
    margin-right:5px;
}

/* quick and dirty way of positioning sub filters in their parent 
* without redoing all the css. TODO: less quick and clean */
#partial-filters .filter-block.filterblock-sub {
    margin-left:0;/* overwrites */
    margin-bottom:0;
    
    position:relative;
    left:-11px;
    bottom:-16px;
}

#partial-filters .filterblock-sub .filterblock-header {
    background-color:#f3f4f4;/* overwrites */
}

#partial-filters .filterblock-sub .filterblock-header img.filterheader-icon {
    margin-left: 15px;
    margin-right: 5px; /* overwrites */
}


/* 
* Styles and overwrites for jquery ui autocomplete 
* NATHAN 2018-06: NOTICE: This overwrits jquery ui autocomplete in general
*/
ul.ui-autocomplete {
    background-color:white;
    color:black;
    
    border-top:solid 1px #d6d5d5;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

ul.ui-autocomplete .ui-menu-item {
    height:40px;
    border-bottom:solid 1px #d6d5d5;
}

ul.ui-autocomplete .ui-menu-item:last-child {
    border-bottom:0;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

ul.ui-autocomplete .ui-menu-item a {
    display:block;
    height:40px;
    line-height:40px;
    color:black;
    padding:0 10px;
    text-overflow: ellipsis;
    white-space:nowrap;
    cursor:pointer;
    overflow:hidden;
    text-decoration:none;
}

ul.ui-autocomplete .ui-menu-item.ui-state-focus,
ul.ui-autocomplete .ui-menu-item.ui-state-active {
    text-decoration:underline;
    margin:0; /* don't ask me why but jquery ui sets this to -1 */
}

/* custom added to the plugin: */
ul.ui-autocomplete .ui-menu-item a {
    position:relative; /* for positioning child "span" */
}

ul.ui-autocomplete .ui-menu-item a span {
    background-color:#d3d3d3;/* should be overwritten by themeBgColour*/
    padding:5px 10px;
    height:10px;
    line-height:10px;
    color:white;
    border-radius:10px;
    position:absolute;
    right:5px;
    top:10px;
}
/* CC-41: label badges inside the "Labels" filter block */
#partial-filters #label-filter .filterblock-body label .label-badge {
    vertical-align:middle;
    max-width:120px;
}
