/** Widget Common **/
:root {
	--widget-padding-top: 16px;
	--widget-padding-bottom: 16px;
	--widget-padding-left: 16px;
	--widget-padding-right: 16px;

	--widget-border-top: 1px solid #ddd;
	--widget-border-bottom: 1px solid #ddd;
	--widget-border-left: 1px solid #ddd;
	--widget-border-right: 1px solid #ddd;
}

widget-button {
	display: inline-block;
	padding: 5px 18px;
	background: #60A316;
	color: #fff;
}

widget-button:hover {
	background: #000
}

widget-button:active {
	background: #f00
}

/** ContentTitleWidget */
content-title {
	display: block;
	margin-bottom: 20px;
}

content-title h2 {
	font-size: 26px;
	margin: 0px;
}

content-title button {
	float: right
}

/** PostDetailsWidget */
post-details {
	display: block;
	margin-bottom: 10px
}

post-details ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0;
}

post-details li {
	display: inline-block;
	margin-right: 28px;
	font: inherit;
	font-size: 13px;
	color: #888;
	height: 32px;
	line-height: 32px
}

post-details li.author {
	background: url(../img/widget/author.png) no-repeat left center;
	background-size: 16px;
	text-indent: 25px;
	position: relative
}

post-details li.author a {
	color: #000
}

post-details li.author a:hover {
	color: #f00
}

post-details li.date {
	background: url(../img/widget/date.png) no-repeat left center;
	background-size: 16px;
	text-indent: 25px
}

post-details li.views {
	background: url(../img/widget/views.png) no-repeat left center;
	background-size: 16px;
	text-indent: 25px
}

post-details li.likes {
	float: right;
	margin-right: 0;
	line-height: 1;
	background-size: 16px;
	user-select: none;
}

post-details li.likes span {
	margin-left: 28px;
	margin-right: 10px;
	cursor: pointer;
	line-height: 1
}

post-details li.likes span {
	background-color: #ccc;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 55%;
	border-radius: 3px
}

post-details li.likes span.like {
	background-image: url(../img/widget/like.png)
}

post-details li.likes span.dislike {
	background-image: url(../img/widget/dislike.png)
}

post-details li.likes span {
	vertical-align: middle;
	color: #666;
	font-size: 13px;
	width: 32px;
	height: 32px
}

post-details li.likes span:hover {
	background-color: #aaa
}

post-details li.likes span:active {
	background-color: #000
}

post-details li.likes span:disabled {
	cursor: default
}

post-details li.likes span:disabled {
	background-color: #ccc
}

post-details li.likes span.selected {
	background-color: #f00
}


/** PostBasicCommentWidget */
post-comment {
	display: block;
	margin-top: 10px
}

post-comment textarea {
	margin-top: 10px;
	width: calc(100% - 4px)
}

post-comment ul {
	display: none
}

post-comment ul.active {
	display: block;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s
}

post-comment li {
	margin-top: 12px
}

post-comment input.text {
	width: 50%
}


/** RelatedPostWidget */
related-post {
	display: block;
	font-size: 0;
	margin-left: -20px;
	position: relative;
}

related-post:before {
	left: 0;
	right: 0;
	pointer-events: none;
	position: absolute;
	border: 1px solid #fff;
	content: "";
}

related-post post-block {
	display: inline-block;
	width: calc(50% - 20px);
	vertical-align: top;
	min-width: 300px;
	margin-left: 20px;
	padding: 15px 0;
	border-top: 1px solid #ddd;
}

related-post post-block h4 {
	font-weight: bold;
}

related-post post-block h4 a {
	display: block;
	font: inherit;
	color: var(--primary-color);
}

related-post post-block h4 a:hover {
	color: var(--primary-color-hover);
}

related-post post-block image-block {
	display: inline-block;
	margin-right: 20px;
	width: 50%;
	position: relative;
	vertical-align: top
}

related-post post-block image-block img {
	width: 100%;
	user-select: none;
	object-fit: cover;
	height: 120px;
}

related-post post-block text-block {
	display: inline-block;
	width: calc(50% - 20px);
	vertical-align: top;
	font-size: 16px;
	line-height: 1.6;
}

related-post post-block text-block:only-child {
	display: block;
	width: 100%;
}

widget[data-size='one_forth'] related-post post-block {
	width: calc(100% - 20px);
	min-width: calc(100% - 20px);
}

widget[data-size='one_forth'] related-post post-block image-block {
	width: 40%;
}

widget[data-size='one_forth'] related-post post-block image-block img {
	height: 80px;
}

related-post.style-2 post-block image-block {
	display: block;
	width: 100% !important;
	margin-right: 0px;
	margin-bottom: 10px;
}

related-post.style-2 post-block image-block img {
	height: 180px !important;
}

related-post.style-2 post-block text-block {
	display: block;
	width: 100%;
}

/** RecentPostWidget */
recent-posts {
	display: block;
	font-size: 0px;
	background: #efefef;
	position: relative;
}

recent-posts post-block {
	display: block;
	border-bottom: 1px solid #ccc
}

recent-posts h4 {
	padding: 7px;
	font-weight: normal;
	font-size: 16px
}

recent-posts h4 a {
	color: #039;
	text-decoration: none
}

recent-post-prev,
recent-post-next {
	display: block;
	background-color: #efefef;
	height: 40px;
	position: relative;
}

recent-post-prev:hover,
recent-post-next:hover {
	background-color: #ddd
}

recent-post-prev:active,
recent-post-next:active {
	background-color: #bbb
}

recent-post-prev {
	border-bottom: 1px solid #ccc
}

recent-post-prev::after {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 6px;
	content: "";
	border-left: 2px solid #222;
	border-top: 2px solid #222;
	vertical-align: middle;
	transform: rotate(45deg);
	left: calc(50% - 3px);
	top: calc(50% - 3px);
}

recent-post-next::after {
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 6px;
	content: "";
	border-right: 2px solid #222;
	border-bottom: 2px solid #222;
	vertical-align: middle;
	transform: rotate(45deg);
	right: calc(50% - 3px);
	bottom: calc(50% - 3px);
}

recent-posts blind {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.4);
}

recent-posts blind::after {
	position: absolute;
	content: "";
	border: 3px solid #ddd;
	border-radius: 50%;
	border-top: 3px solid #f00;
	width: 32px;
	height: 32px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	top: calc(50% - 16px);
	left: calc(50% - 16px);
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

itemlist.categories-list {
	width: 400px;
	height: 300px;
	border: 1px solid #ddd;
	padding: 5px;
	overflow-y: scroll;
}

/** FeaturePostWidget */
feature-post {
	display: block;
	position: relative;
	font-size: 0px;
}

feature-post image-block {
	display: block;
}

feature-post image-block img {
	width: 100%;
}

feature-post text-block {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

feature-post text-block title-block {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 20px;
}

feature-post text-block category-block {
	display: block;
	font-size: 14px;
	color: #fff;
	margin-bottom: 10px;
}

feature-post text-block description-block {
	display: block;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 15px;
}

search-box {
	display: block;
	position: relative;
	width: 300px;
}

search-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	z-index: 200000;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

search-box li {
	border-top: 1px solid #f8f8f8;
	padding: 10px;
	font-size: 16px;
}

search-box li:hover {
	color: #fff;
	background-color: #eb5424;
}

search-box li:first-child {
	border-top: none;
}

search-box ul:empty {
	display: none;
}

post-box {
	display: table;
	width: 100%;
	background: #f5f5f5;
	padding: 10px;
	border-radius: 4px;
	font-size: 0px;
}

post-box span {
	display: table-cell;
	vertical-align: top;
	height: 26px;
	font-size: 16px;
}

post-box post-remove {
	display: table-cell;
	padding-left: 25px;
	width: 26px;
	height: 26px;
	background-image: url(../img/delete.png);
	opacity: 0.4;
	vertical-align: top;
	background-position: center center;
	background-size: 100%;
}

post-box post-remove:hover {
	opacity: 0.6;
}

post-box post-remove:active {
	opacity: 0.8;
}

/** BasicImageWidget **/
basic-image-widget {
	display: block;
}

basic-image-widget img {
	width: 100%;
}

/** BasicGalleryWidget */


/** PostCategoryWidget */
category-post {
	display: grid;
	font-size: 0;
	position: relative;
	grid-column-gap: 32px;
}

category-post post-block {
	clear: both;
	display: block;
	position: relative;
	margin-bottom: 32px;
}

category-post post-block h4 {
	font-weight: bold;
}

category-post post-block h4 a {
	display: block;
	font: inherit;
	color: var(--primary-color);
}

category-post post-block image-block {
	float: left;
	display: block;
	margin-right: 20px;
	margin-bottom: 15px;
	width: 50%;
	position: relative;
}

category-post post-block image-block img {
	width: 100%;
	user-select: none;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

category-post post-block text-block {
	display: block;
	font-size: 16px;
	line-height: 1.6;
}

category-post post-block text-block::after {
	content: " ";
	clear: both;
	display: block;
}

category-post post-block title-block {
	display: block;
	line-height: 1.6;
	font-size: 19px;
	color: var(--primary-color);
}

category-post post-block h4 a:hover title-block {
	color: var(--primary-color-hover);
}

category-post post-block desc-block {
	margin-top: 15px;
	display: block;
	font-weight: normal;
	line-height: 1.6;
	font-size: 16px;
	color: var(--secondary-color);
}

category-post post-block date-block {
	margin-top: 15px;
	margin-bottom: 5px;
	display: block;
	font-weight: normal;
	font-size: 14px;
	color: var(--secondary-color);
}

/*widget[data-size='one_forth'] category-post post-block {
	width: calc(100% - 20px);
	min-width: calc(100% - 20px);
}*/

/*widget[data-size='one_forth'] category-post ngine-slider post-block {
	width: 100%;
	min-width: 100%;
}

widget[data-size='one_forth'] category-post post-block image-block {
	width: 40%;
}*/

category-post.style-1 post-block image-block {
	display: block;
	float: none;
	width: 100% !important;
	margin-right: 0px;
	margin-bottom: 15px;
}

category-post.style-2 post-block image-block {
	float: right;
	margin-right: 0px;
	margin-left: 20px;
}

/*category-post ngine-slider post-block {
	width: 100%;
	border-top: 1px solid #fff;
	margin-left: 0;
}

category-post ngine-slider {
	width: calc(100% - 20px);
	margin-left: 20px;
}*/


category-post.columns-2 {
	grid-template-columns: 1fr 1fr;
}

category-post.columns-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

category-post.columns-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

category-post.border-column post-block::before {
	position: absolute;
	bottom: 0;
	left: -16px;
	top: 0;
	width: 1px;
	background: #ddd;
	content: "";
}

category-post.columns-2 post-block:nth-of-type(2n + 1)::before {
	display: none;
}

category-post.columns-3 post-block:nth-of-type(3n + 1)::before {
	display: none;
}

category-post.columns-4 post-block:nth-of-type(4n + 1)::before {
	display: none;
}

category-post.border-row post-block::after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16px;
	height: 1px;
	background: #ddd;
	content: "";
}

category-post.columns-1 post-block:last-of-type::after {
	display: none;
}

category-post.columns-2 post-block:nth-last-of-type(-n + 2)::after {
	display: none;
}

category-post.columns-2 post-block:nth-of-type(2n + 1)::after {
	right: -32px;
}

category-post.columns-3 post-block:nth-last-of-type(-n + 3)::after {
	display: none;
}

category-post.columns-3 post-block:nth-of-type(3n + 2)::after {
	left: -32px;
	right: -32px;
}

category-post.columns-4 post-block:nth-last-of-type(-n + 4)::after {
	display: none;
}

category-post.columns-4 post-block:nth-of-type(4n + 2)::after,
category-post.columns-4 post-block:nth-of-type(4n + 3)::after {
	left: -32px;
	right: -32px;
}

/** Media Queries */
@media only screen and (max-width: 1200px) {}

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

	/** PostCategoryWidget */
	category-post {
		display: block !important;
	}

	category-post.columns-2 post-block,
	category-post.columns-3 post-block,
	category-post.columns-4 post-block {
		display: block;
		width: auto;
	}
	
	category-post.border-column post-block::before {
		display: none !important;
	}

	category-post.border-row post-block::after {
		display: none !important;
	}

	category-post.border-row post-block::after {
		left: 0 !important;
		right: 0 !important;
		display: block !important;
	}

	category-post.border-row post-block:last-of-type::after {
		display: none !important;
	}
	
	category-post.border-row post-block:only-of-type::after {
		display: block !important;
	}

	/** PostDetailsWidget */
	post-details li {
		display: block;
	}

	/** RelatedPostWidget */
	related-post {
		margin-left: 0px;
	}

	related-post post-block {
		width: 100%;
		margin-left: 0px;
	}

	itemlist.categories-list {
		width: 100%;
	}

	itemlist.gallery-list {
		width: 100%;
	}

	/*desc-block {
		display: none !important;
	}*/
}