/* ==============================================================
   Widget NER Facetting
   style declarations for widget_nerFacetting.xhtml
   ==============================================================*/
#widgetNerFacetting {
    border: @border;
    h2 {
        margin: 0;
        padding: .7rem 1.5rem;
    	font-size: @fontNormal;
    	font-weight: 400;
        color: @white;
        border-bottom: 1px solid @ci-color1;
        background-color: @ci-color1;
    }
    .facetting-content {
        .nav-tabs {
		border-bottom: @border;
            li {
                a {
					background: @bg-content-box;
                    border: none;
                    border-radius: 0;
                    border-bottom: 1px solid @middlegray;
                    .fa {}
                    .glyphicon {}
                }
                	a {
	                	&.active {
							background: @bg-hover;
						}
					}
            }
        }
        .tab-content {
			background: @bg-content-box;
            .tab-pane {
                &.active {}
                h3 {}                
            }
        }
    }
}

/* OVERVIEW & SECTION */
#overview,
#section {
    border: none;
    .tag-filter-description {}
    .filter-tags {
        li {
            a {
                &:hover {}
                &[data-type="person"] {
				color: @personColor;
				& when (@colorModes = true) {
					.mx-dark-mode-rules ({
						color: @lk-general;
					});
					.mx-light-mode-rules ({
						color: @personColor;
					});
				}
			}
                &[data-type="location"] {}
                &[data-type="corporation"] {}
            }
        }
    }
}

/* OVERVIEW */
#overview {
    .current-tags {
		background: @bg-hover;
        &:before {}
        .page-tag {
            &.empty {}
            &.person {
				color: @personColor;
				& when (@colorModes = true) {
					.mx-dark-mode-rules ({
						color: @lk-general;
					});
					.mx-light-mode-rules ({
						color: @personColor;
					});
				}
            }
            &.location {
                color: @locationColor;
            }
            &.corporation {
                color: @corporationColor;
            }
        }
    }
    .set-tag-range {}
    .overview-content {
        .overview-scale {
            li {
                div {}
                .page-number {
                    a {
						color: @lk-general;
                        &:hover,
                        &:active,
                        &:focus {
							color: @lh-general;
						}
                    }
                }
                .tag-container {
                    .page-tag {
                        &:hover {}
                        &.empty {}
                        &.person {
							color: @personColor;
							& when (@colorModes = true) {
								.mx-dark-mode-rules ({
									color: @lk-general;
								});
								.mx-light-mode-rules ({
									color: @personColor;
								});
							}
			            }
                        &.location {}
                        &.corporation {}
						&:hover {
							background: @bg-hover;
						}
                    }
                }
            }
        }
    }
}

/* SECTION */
#section {}

#sliderScale {
    .scale-page {
        &.start {}
        &.end {}
    }
    .slider-description {}
    .scale-stripes {
        li {
            &.middle {}
            &:last-child {}
        }
    }
    .scale-section-stripe {}
}

#sliderVertical {
    .ui-slider-handle {
        &:after {}
        &:focus {}
        .page-bubble {
            &:before {}
        }
    }
}

#sectionTags {
    .page-tag {
        &:hover {}
        &.empty {}
        &.person {}
        &.location {}
        &.corporation {}
    }
}

/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}