.pattern {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-repeat: repeat;
    background-size: 30px;
}

.content-block .pattern {
    position: absolute;
}

.filter-preview .pattern {
    background-repeat: repeat;
    background-size: 30px;	
	color: #000;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-medium); 
	font-weight: var(--medium-font-weight);
	font-size: 0.75em;
	letter-spacing: 0.15em;
	padding-top: 10px;
    overflow: hidden;
    height: 70px;
    width: 100%;
    padding: .5rem;
    line-height: 1.35;
}

.filter-preview {
    border-radius:8px;
    position: relative;
}

.filter-preview {
    cursor: pointer;
}

.pattern.cover-pattern {
	background-size: 80px;
}
.pattern.cover-edit {
	margin-top: 58px;
}

.pattern:not(.light) .pattern-text{
	color: #1F1F1F !important;
}

.pattern.light .pattern-text{
	color: #FFFFFF !important;
    filter: invert(99%);
}

.pattern.light {
    filter: invert(100%);
}

.filter-preview .pattern.light::before, .filter-preview .pattern.light::after, .filter-preview:hover .pattern.light::before, .filter-preview:hover .pattern.light::after {
    filter: invert(99%);
}

.filter-preview .pattern.slide-active::after, .filter-preview:hover .pattern::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 17px;
    position: absolute;
    bottom: 12px;
    right:12px;
    background: var(--button-green);
    z-index: 98;
}

.filter-preview:hover .pattern:not(.slide-active)::after {
    background: #DFECE7;
}

.filter-preview .pattern.slide-active::before, .filter-preview:hover .pattern::before {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    position: absolute;
    bottom: 22px;
    right:18px;
    transform: rotate(-45deg);
    z-index: 99;
}

.filter-preview:hover .pattern:not(.slide-active)::before {
    border-color: var(--button-green);
}

/* Output */
.pattern.circles-crosses {
    background-image: url("../images/patterns/circles-crosses.svg");
}
.pattern.circuit-board {
    background-size: 8vw;
    background-image: url("../images/patterns/circuit-board.svg");
}
.pattern.connected-plus {
    background-image: url("../images/patterns/connected-plus.svg");
}
.pattern.diagonal-lines {
    background-image: url("../images/patterns/diagonal-lines.svg");
}
.pattern.diagonal-stripes {
    background-image: url("../images/patterns/diagonal-stripes.svg");
}
.pattern.double-zigzag {
    background-image: url("../images/patterns/double-zigzag.svg");
	background-size: 100px;
}
.pattern.endless-clouds {
    background-image: url("../images/patterns/endless-clouds.svg");
}
.pattern.falling-triangles {
    background-image: url("../images/patterns/falling-triangles.svg");
}
.pattern.gradient {
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3));
}
.pattern.grid {
    background-image: url("../images/patterns/grid.svg");
}
.pattern.horizontal-lines {
    background-image: url("../images/patterns/horizontal-lines.svg");
}
.pattern.jello {
    background-image: url("../images/patterns/jello.svg");
}
.pattern.leaves {
    background-image: url("../images/patterns/leaves.svg");
}
.pattern.metal {
    background-size: 15vw;
    background-image: url("../images/patterns/metal.svg");
}
.pattern.plus {
    background-image: url("../images/patterns/plus.svg");
	background-size: 50px;
}
.pattern.polka-dots {
    background-image: url("../images/patterns/polka-dots.svg");
}
.pattern.sayagata {
    background-size: 14vw;
    background-image: url("../images/patterns/sayagata.svg");
}
.pattern.spider {
    background-size: 11vw;
    background-image: url("../images/patterns/spider.svg");
}
.pattern.square {
    background-image: url("../images/patterns/square.svg");
}
.pattern.vertical {
    background-image: url("../images/patterns/vertical.svg");
}
.pattern.zig-zag {
    background-image: url("../images/patterns/zig-zag.svg");
}


/* Sidebar Preview Slider */
.filter-preview .pattern.circles-crosses {
    background-image: url("../images/patterns/circles-crosses.svg");
}
.filter-preview .pattern.circuit-board {
    background-image: url("../images/patterns/circuit-board.svg");
}
.filter-preview .pattern.connected-plus {
    background-image: url("../images/patterns/connected-plus.svg");
}
.filter-preview .pattern.diagonal-lines {
    background-image: url("../images/patterns/diagonal-lines.svg");
}
.filter-preview .pattern.diagonal-stripes {
    background-image: url("../images/patterns/diagonal-stripes.svg");
}
.filter-preview .pattern.double-zigzag {
    background-image: url("../images/patterns/double-zigzag.svg");
	background-size: 100px;
}
.filter-preview .pattern.endless-clouds {
    background-image: url("../images/patterns/endless-clouds.svg");
}
.filter-preview .pattern.falling-triangles {
    background-image: url("../images/patterns/falling-triangles.svg");
}
.filter-preview .pattern.gradient {
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(0,0,0,0), rgba(0,0,0,0.3));
}
.filter-preview .pattern.grid {
    background-image: url("../images/patterns/grid.svg");
}
.filter-preview .pattern.horizontal-lines {
    background-image: url("../images/patterns/horizontal-lines.svg");
}
.filter-preview .pattern.jello {
    background-image: url("../images/patterns/jello.svg");
}
.filter-preview .pattern.leaves {
    background-image: url("../images/patterns/leaves.svg");
}
.filter-preview .pattern.metal {
    background-image: url("../images/patterns/metal.svg");
}
.filter-preview .pattern.plus {
    background-image: url("../images/patterns/plus.svg");
}
.filter-preview .pattern.polka-dots {
    background-image: url("../images/patterns/polka-dots.svg");
}
.filter-preview .pattern.sayagata {
    background-image: url("../images/patterns/sayagata.svg");
}
.filter-preview .pattern.spider {
    background-image: url("../images/patterns/spider.svg");
}
.filter-preview .pattern.square {
    background-image: url("../images/patterns/square.svg");
}
.filter-preview .pattern.vertical {
    background-image: url("../images/patterns/vertical.svg");
}
.filter-preview .pattern.zig-zag {
    background-image: url("../images/patterns/zig-zag.svg");
}