/* ==============================================================
   View Timematrix
   style declarations for viewTimematrix.xhtml
   ==============================================================*/
.timematrix {
    h1 {}
    p {}
    h2 {}
    &__subarea {}
    &__selection-header {}
    &__loader {
    	img {}
    }
    &__loaderImg {
    	img {}
    }
    &__selection {
        background-color: @bg-content-box;
        border: @border;
        #locateTimematrix {}
        #slider-range {
            .ui-slider-range {}
            .ui-slider-handle {
                border: 1px solid @ci-color1;
                background-color: @ci-color1;
                &.top {}
                &:focus {}
                .timematrix-slider-bubble-startDate,
                .timematrix-slider-bubble-endDate {}
                .timematrix-slider-bubble-endDate {}
            }
			.ui-slider-handle {
                &::before {}
                &:last-child {
                	&::before {}
                }
            }
        }
        .btn {}
    	button {}
    }
    &__selectionRangeInput {}
    &__bar {}
    &__period {
      label, input {
        background-color: @bg-content-box;
        color: @fg-content-box;
      }
    	span {
			&:last-of-type {}
    	}
    }
    &__hitsForm {
      label, input {
        background-color: @bg-content-box;
        color: @fg-content-box;
      }
		label::after {}
	}
	&__hitsInput {
		span {}
		input {}
	}
	&__objects {}

	&__content {
		border: @border;
	}
	&__img {
		img {}
		img[onError] {}
	}
	&__text {
		&:hover {}
		 p {}
		a {
			&:hover,
			&:focus,
			&:active {}
		}
	}
	&__img img:hover + &__text {}
	&__footer {
		a {
		&:hover,
		&:active,
		&:focus {}
		}
	}
}

.tpl-timeMatrix__text {}


/* 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) {}
