@charset "utf-8";
/* CSS Document */

/**********************************************************************************
**************************** THEME CONTROLS ***************************************
***********************************************************************************/

/* BACKGROUND COLOUR*/
.theme-background {
	background-color: #fff!important;
}


/*BUTTONS - background-color defaults to theme color, activate below to change */
.tools-menu.theme-background.theme-btn span .tools-button .item a, .theme-btn, .theme-btn a {
	color: #000;
	/*background-color:#fff*/
}
/*BUTTONS - HOVER & ACTIVE*/
.tools-menu.theme-background.theme-btn span .tools-button .item a:hover,
.tools-menu.theme-background.theme-btn span .tools-button.active .item a,
.theme-btn:hover,
.theme-btn .active, 
.header-icon-active {
	color:#337ab7;
/*	background-color:#fff*/
}
 
/*HIGHLIGHT COLOUR*/
.theme-highlight {
	background-color: #337ab7!important;
	color:#fff;
}

.theme-footer {
		border-bottom: thick solid #337ab7;
	/*background-color: #337AB7;*/
}

/*NOTE: Use theme-icons.psd to change icon colours (save exiting theme-icons folder contents to new folder)
1. Use Layer Style: Color Overlay and copy and paste for each group (apply to each item not at group level)
2. Highlight all items for 1 group
3. Right Click and quick export as png, export all to images/theme-icons


/**************************** END THEME CONTROLS ***********************************/


.color-code-filter-wrapper {
	flex-wrap: nowrap;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-start;
	width:400px; 		
	z-index: 3;
	top:0px;
	position: fixed;
    left: 0px;
    background-color: #fff;
    padding: 0px 0 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    border-radius: 2px;
/*    box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;*/
	max-height: 80%;
	
	}








.color-code-header {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	text-align: center;
	padding: 10px;
}

.color-code-table-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: 75%;
	width: 100%;
	min-height: 0
}

#color-code-panel {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	overflow: auto;
	cursor: pointer;
}
	
#color-code-panel .table>tbody>tr>td  {
	vertical-align: middle
}

#color-code-dropdown {
	width: 100%;
	text-align: center;
}



#selected-filters {
	padding: 10px;
    border-top: thin solid rgb(128, 128, 128);
}
.filter-tags-wrapper {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	display: flex;
}

.tag {
	font-size: 12px;
	padding: 0.3em 0.4em 0.3em;
	margin: 5px 0 0 5px;
	display: inline-block;
	max-width: 100%;
}
.tag > span {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}
.tag a {
	display: inline-block;
	color: #bbb;
	cursor: pointer;
	opacity: 0.6;
	margin: 0 0 0 0.3em;
}
.tag a:hover {
  	opacity: 1.0;
}
.tag a .glyphicon-white {
	color: #fff;
	margin-bottom: 2px;
}
.tag .remove {
	vertical-align: bottom;
	top: 0;
}
#filter-options-container .selected-filters {
	font-size: 14px; 
	color:red;
	display: block;
	white-space: normal;
	max-width: 95%;
}
	

/* Filter Page list items  */

/*fix height of autocomplete dropdowns*/
.ui-autocomplete {
    max-height: 250px;
	width:  254px;
    overflow-y: auto; 
    overflow-x: hidden;
 }

.color-code-filter-wrapper .btn-lg {
	text-align: left;
	white-space: normal;
	background-color: floralwhite
}
.color-code-filter-wrapper .btn-lg .glyphicon {
	position: absolute;
	right: 16px;
	top: 35%;
	}

.filter-subpanel {height: 400px}
	
.clear-filters-btn {display: none}
	
.filter-subpanel h3 {padding:0 10px}

.filter-list-container {padding:10px; width: 100%}
.filter-list-container input {width:100%}

.color-code-filter-wrapper .btn-back  {
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: left;
	margin-top: 20px;
}

#filter-types-page {padding-bottom: 40px}

.btn-icon {
    background-color: rgba(255,255,255,0.80);
    min-width: 50px;
    min-height: 50px;
    border-radius: 40px;
    padding-top: 4px;
	font-size: 22px;
    cursor: pointer;
    position: absolute;
 	top: 10px;
    color: #337ab7 ;
	display: inline; }
		
.btn-icon:hover{
	color: white;
	background-color: #337ab7 
}
.open-filters {
	left: 8px;
}
	
#share-btn{right:77px}
#settings-btn {right:8px}
#open-export-panel {right: 146px}

.btn-mini {
	font-size: 20px;
	margin-left: -12px;
}
	
.total-filters {
    font-weight: 700;
    font-size: 11px! important;
}
#auto-fit-row-spacing-btn {
	padding: 5px 9px;
	font-size: 9px;
}
.ui-wrapper {
	max-width: 100%
}

input[type=checkbox], input[type=radio] {cursor: pointer}




@media only screen and (max-device-width: 790px){ 

	.color-code-filter-wrapper	{	
		max-height: 100%;
		width: 100%;
		min-height: 100%
	}
	.floating-btns-top-right {
		position: inherit; width: 100%; top: 0; right: 0
	}
	.jumbotron {
		padding-top: 0
	}
	.filter-subpanel, #filter-types-page {
		height: 100%
	}
}





@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		.color-code-filter-wrapper {height:1200px; max-height: 100%}
}


.ui-dialog {max-width: 100%; max-height: 100%; overflow: auto
}