/*Common*/
.cfg-viewer {
	padding: 0 4px 8px;
    overflow: hidden;
    background-color: #222;
    margin: 0 -4px 16px;
}
.cfg-viewer h3.cfg-mod-title {
	margin: 0 auto;
    padding: 16px 8px;
	text-align: center;
}
.cfg-viewer .cfg-preset {
	background-color: #222;
    position: relative;
    overflow: hidden;
	margin: 0 4px 16px;
	padding: 8px 16px;
    box-shadow: 0 4px 8px -5px rgb(0, 0, 0), 0 0 10px -8px rgba(0, 0, 0, 0.5);
}
.cfg-preset .cfg-prst-title.title_one_line {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-preset .cfg-prst-img > img {
	cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    transition: opacity .3s;
}
.cfg-preset .cfg-prst-img > img:hover {
	opacity: 0.8;
}
.cfg-preset .cfg-prst-rating {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-preset .cfg-prst-rating .r-star {
	color: #FC0;
    font-size: 22px;
}
.cfg-preset .cfg-prst-rating .r-star.void {
    color: rgba(0, 0, 0, 0.15);
}
.cfg-preset .cfg-prst-stat {
    font-size: 14px;
    color: #6a6d6e;
}
.cfg-prst-stat .rvw-num,
.cfg-prst-stat .vws-num {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px;
}
.cfg-viewer .cfg-icon {
	width: 18px;
    height: 18px;
    vertical-align: top;
}

/*Grid type*/
.cfg-viewer.type-grid .cfg-presets-wrap {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cfg-viewer.type-grid .cfg-preset {
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
	margin: 4px;
	padding: 8px 8px 16px;
	text-align: center;
}
.cfg-viewer.type-grid.grid-cols-4 .cfg-preset {
    max-width: calc(25% - 8px);
}
.cfg-viewer.type-grid.grid-cols-3 .cfg-preset {
    max-width: calc(33.333333% - 8px);
}
.cfg-viewer.type-grid.grid-cols-2 .cfg-preset {
    max-width: calc(50% - 8px);
}
@media (max-width: 767px) {
	.cfg-viewer.type-grid.grid-cols-4 .cfg-preset {
		max-width: calc(33.333333% - 8px);
	}
}
@media (max-width: 639px) {
	.cfg-viewer.type-grid.grid-cols-3 .cfg-preset,
	.cfg-viewer.type-grid.grid-cols-4 .cfg-preset {
		max-width: calc(50% - 8px);
	}
}
@media (max-width: 480px) {
	.cfg-viewer.type-grid.grid-cols-2 .cfg-preset,
	.cfg-viewer.type-grid.grid-cols-3 .cfg-preset,
	.cfg-viewer.type-grid.grid-cols-4 .cfg-preset {
		max-width: 100%;
	}
}
.cfg-viewer.type-grid.grid-cols-auto .cfg-preset {
	-ms-flex: 1;
    flex: 1;
    min-width: 240px;
}
.cfg-viewer.type-grid .cfg-preset > * + * {
	margin: 2px 0 0;
}
.cfg-viewer.type-grid .cfg-prst-title {
	padding: 4px 0;
}
.cfg-viewer.type-grid .cfg-prst-desc {
	padding: 4px 0;
}

/*List type*/
.cfg-viewer.type-list ul.cfg-presets-wrap {
	padding: 0;
}
.cfg-viewer.type-list .cfg-preset {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	-ms-flex-align: center;
    align-items: center;
	margin-bottom: 4px;
	box-shadow: 0 1px 8px -8px rgb(0, 0, 0), 0 8px 2px -8px rgba(0, 0, 0, 0.5);
	box-shadow: none;
}
.cfg-viewer.type-list .extra {
	text-align: center;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    width: auto;
    max-width: 25%;
}
.cfg-viewer.type-list .extra > * + * {
	margin: 2px 0 0;
}
.cfg-viewer.type-list .basic {
	-ms-flex: 1 0 0%;
    flex: 1 0 0%;
    max-width: 100%;
}
.cfg-viewer.type-list .extra,
.cfg-viewer.type-list .basic {
	padding: 0 8px;
}
.cfg-viewer.type-list .extra + .basic  {
	padding-left: 8px;
}
@media (max-width: 479px) {
	.cfg-viewer.type-list .extra {
		text-align: center;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	.cfg-viewer.type-list .basic {
		text-align: center;
	}
}
.cfg-viewer.type-list .cfg-prst-title  {
	margin: 0;
}
.cfg-viewer.type-list .cfg-prst-title + * {
	margin-top: 4px;
}

/*Carousel type*/
.cfg-viewer.type-carousel .cfg-preset {
	text-align: center;
	height: 100%;
}
.cfg-viewer .owl-pagination,
.cfg-viewer .swiper-pagination {
	position: static;
    text-align: center;
    padding: 8px 0 0;
}
.cfg-viewer .owl-controls .owl-page span,
.cfg-viewer .swiper-pagination-bullets span.swiper-pagination-bullet {
	width: 24px;
    height: 10px;
    margin: 0 4px;
    border-radius: 0;
    vertical-align: middle;
    display: inline-block;
    background: #bdeafc;
    opacity: 1;
	box-shadow: none;
}
.cfg-viewer .owl-controls .owl-page.active span,
.cfg-viewer .swiper-pagination-bullets span.swiper-pagination-bullet-active {
    background: #2094c1;
}
.cfg-viewer span.crsl-bttn-prev, 
.cfg-viewer span.crsl-bttn-next {
	position: absolute;
    z-index: 1;
    width: 48px;
    height: 80px;
    line-height: 80px;
    color: #fff;
    background-color: rgba(132, 207, 236, 0.85);
	cursor: pointer;
	transition: left .3s, right .3s, opacity .3s;
}
.cfg-viewer span.crsl-bttn-prev .cfg-icon, 
.cfg-viewer span.crsl-bttn-next .cfg-icon {
	width: 48px;
    height: 48px;
    vertical-align: middle;
}
.cfg-presets-wrap.owl-carousel .owl-buttons .owl-next, 
.cfg-presets-wrap.owl-carousel .owl-buttons .owl-prev,
.cfg-viewer span.crsl-bttn-prev, 
.cfg-viewer span.crsl-bttn-next {
	top: calc(50% - 25px);
}
.cfg-viewer span.crsl-bttn-prev {
	opacity: 0;
	left: -50px;
} 
.cfg-viewer span.crsl-bttn-next {
	opacity: 0;
	right: -50px;
}
.cfg-viewer:hover span.crsl-bttn-prev {
	opacity: 1;
	left: 0;
} 
.cfg-viewer:hover span.crsl-bttn-next {
	opacity: 1;
	right: 0;
}
@media (max-width: 767px) {
	.cfg-viewer span.crsl-bttn-prev, 
	.cfg-viewer span.crsl-bttn-next,
	.cfg-viewer .owl-pagination,
	.cfg-viewer .swiper-pagination {
		display: none !important;
	}
}

/*owl*/
.cfg-viewer .owl-carousel,
.cfg-viewer .owl-wrapper-outer,
.cfg-viewer .owl-controls .owl-page {
	background: transparent;
    padding: 0;
    border: 0;
	margin: 0;
    box-shadow: none;
}
.cfg-viewer .owl-wrapper-outer {
	padding: 0 0 4px;
	overflow: visible;
}
.cfg-viewer .owl-wrapper {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.cfg-presets-wrap.owl-carousel .owl-buttons .owl-next,
.cfg-presets-wrap.owl-carousel .owl-buttons .owl-prev {
	opacity: 1 !important;
    left: -4px !important;
	right: -4px !important;
}

/*swiper*/
.cfg-presets-wrap .swiper-slide { 
	height: auto;
}