#blog {
	min-height: 100vh;
}

#fullArticleModal .modal-fullscreen {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin-top: 3rem;
    margin-bottom: -3rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#blog .fa-classic,
#blog .fa-regular,
#blog .fa-solid,
#blog .far,
#blog .fas,
#fullArticleModal .fa-classic,
#fullArticleModal .fa-regular,
#fullArticleModal .fa-solid,
#fullArticleModal .far,
#fullArticleModal .fas {
	font-family: "Font Awesome 6 Free" !important;
}

#blog .uk-panel {
	position: relative;
	height: 350px;
}

#blog .uk-slidenav {
	display: none;
}

#blog .uk-panel img {
	border-radius: 25px;
	position: relative;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	height: inherit;
}

#blog .uk-panel::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	-webkit-transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-o-transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
	border-radius: 25px;
	z-index: 0;
	opacity: 0.75;
}

#blog .uk-panel:hover::after {
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	opacity: 1;
	-webkit-transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
	-o-transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
	transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
	backdrop-filter: blur(5px);
}

#blog .uk-panel .blog-top {
	border-top-right-radius: 25px;
}

#blog .uk-panel .blog-bottom {
	border-bottom-left-radius: 25px;
	z-index: 1;
}

#blog .blog-top {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	background-color: var(--color-2);
	z-index: 1;
	border-radius: 25px 25px 0 0;
	padding: 5px;
	text-align: center;
	opacity: 0;
	-webkit-transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#blog .uk-panel:hover .blog-top {
	opacity: 1;
}

#blog .blog-top .blog-time {
	color: var(--color-4);
	padding: 5px 15px 5px 10px;
	margin: 0;
	font-size: 0.75rem;
}

#blog .blog-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 15px;
}

#blog .button i {
	margin-right: 5px;
	font-weight: bold;
	color: var(--color-3);
}

a.fas {
	cursor: pointer;
}

#blog .blog-top .blog-tags {
	color: var(--color-4);
	font-weight: 100;
	margin-bottom: 0px;
	text-transform: uppercase;
	font-size: 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#blog .uk-panel:hover .blog-top .blog-tags {
	display: -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#blog .blog-bottom a.title-wrapper .blog-title,
#blog .blog-bottom a.title-wrapper {
	color: var(--color-3);
	font-weight: 100;
	font-size: 1.1rem;
	margin-bottom: 5px;
	line-height: 1.5;
	transition: line-height 0.3s ease-in-out;
}

#blog .uk-panel:hover .blog-bottom a.title-wrapper .blog-title,
#blog .uk-panel:hover .blog-bottom a.title-wrapper {
	line-height: 2;
	text-decoration: none;
}

#blog .blog-bottom .badge.badge-template {
	color: var(--color-3) !important;
	background-color: var(--color-1) !important;
	letter-spacing: 2px;
	font-weight: 400;
	font-size: 0.75rem;
	font-family: Helvetica, sans-serif;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#blog .blog-bottom .badge.badge-template:hover {
	color: var(--color-2) !important;
	background-color: var(--color-3) !important;
}

#blog .truncate {
	display: -webkit-box;
	max-width: 100%;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#blog .uk-panel:hover .truncate {
	-webkit-line-clamp: 11;
}

#blog .pointer:hover {
	cursor: pointer;
}

#blog .badge {
	--bs-badge-padding-y: 0.3em;
}

#blog .badge:hover {
	text-decoration: none;
}

#blog#removeFiltersButton {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	display: none; /* Initially hidden */
}

#blog#removeFiltersButton.visible {
	opacity: 1;
	display: inline-block;
}


#blog #blogTags .dropdown-menu.show {
	padding: 10px 5px 10px 10px !important;
	max-height: 150px;
	overflow-y: auto;
	border-radius: 10px;
	min-width: 100%;
}

#blog #blogTags .dropdown-menu.show::-webkit-scrollbar {
	width: 10px;
}

#blog #blogTags .dropdown-menu.show::-webkit-scrollbar-track {
	background: var(--color-3);
	border-radius: 0 10px 10px 0;
}

#blog #blogTags .dropdown-menu.show::-webkit-scrollbar-thumb {
	background: var(--color-1-opacity-darker);
	border-radius: 0 10px 10px 0;
}

#blog #blogTags .dropdown-menu.show::-webkit-scrollbar-thumb:hover {
	background: var(--color-1);
}

#blog #blogTags .form-check-label {
	text-transform: capitalize;
	color: var(--color-4);
}

#blog .form-check-input:checked {
	background-color: var(--color-1);
	border-color: var(--color-1);
}

#blog .active > .page-link,
#blog .page-link.active {
	z-index: 3;
	color: var(--bs-pagination-active-color);
	background-color: var(--color-1);
	border-color: var(--color-1);
}

#blog .page-link {
	color: var(--color-1);
}

#blog #blogTags .tag-checkbox {
	margin-right: 5px;
}

#blog .pointer:hover {
	cursor: pointer;
}

#blog .fa-copy,
#blog .fa-share {
	opacity: 0.9 !important;
}

#blog .fa-copy:hover,
#blog .fa-share:hover {
	text-decoration: none !important;
	opacity: 1 !important;
}

#blog #fullArticleModal img {
	max-height: 50vh;
}

@media (max-width: 992px) {
	#blog .modal-title {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		padding: 0 1em;
		line-height: 1;
		font-size: 1.25rem;
	}
}

#fullArticleModal .modal-header .btn-close {
	margin: 0 !important;
}

#fullArticleModal .modal-body::-webkit-scrollbar {
	width: 10px;
}

#fullArticleModal .modal-body::-webkit-scrollbar-track {
	background: transparent;
}

#fullArticleModal .modal-body::-webkit-scrollbar-thumb {
	background: var(--color-1-opacity-darker);
	border-radius: 25px;
}

#fullArticleModal .modal-body::-webkit-scrollbar-thumb:hover {
	background: var(--color-1);
}

body.internal.modal-open::-webkit-scrollbar, body.internal.modal-open::-webkit-scrollbar-track, body.internal.modal-open::-webkit-scrollbar-thumb {
	display: none;
}