/*----------------------------------------Index----------------------------------------*/
.community-banner .container {
	/*padding-top: 80px;
	padding-bottom: 60px;*/
}
.community-feature-header-bg {
	background-color: #fff;
	background-image: url(/images/community/community-bg.png);
	background-size: cover;
	background-position: top center;
	padding: 2rem 0;
}
.community-header {
	padding: 2rem 0;
}
.community-header .c-center {
	text-align: center;
}
.community-header-text {
	padding: 0;
	font-weight: bold;
}
.community-header p {
	color: #526B54 !important;
	margin-top: 0px;
	line-height: 30px;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.01rem;
}
.infoart-gallery-header-bg {
	
}
#list-gallery {
	background-color: #f3f3f3;
	min-height: 500px;
}
#list-gallery.section-padding-small-top {
	padding: 2rem 0;
}
.filter-section, #list-gallery-examples, .category-section {
	width: 100%;
}
.filter-section {
	display: inline-block;	
	padding: 0 25px;
}
.filter-button {
	display: inline-block;
	padding: 3px 10px;
	width: auto;
	background: none;
	border: none;
	cursor: pointer;
}
.filter-button .filter-icon {
	color: #e089cd;
	font-size: 16px;
}
.filter-button .filter-title {
	padding: 0 8px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #888;
}
.filter-section .filter-close {
	position: absolute;
	top: 0;
	left: 130px;
	background: none;
	border: none;
	padding: 6px;
	z-index: 1;
	display: none;
}
.filter-section .filter-close-icon {
	font-size: 16px;
}
.filter-button:hover .filter-title {
	color: #e089cd;
}
.filter-section .is-visible {
	display: inline-block;
}
.filter-button.is-visible {
	position: relative;
	padding-right: 28px;
	background: #fff;
	border: 1px solid lightgray;
	border-radius: 8px 8px 0 0;
	border-bottom: none;
	z-index: 1;
	cursor: default;
}
.filter-button.is-visible + .filter-close {
	display: inline-block;
}
.filter-button.is-visible .f-text {
	color: #e089cd;
}
.filter-button.is-visible .filter-icon {
	
}
.filter-button.is-visible span {
}
.filter-content {
	display: none;
	margin-top: -1px;
	width: 100%;
	background: #fff;
	border: 1px solid lightgray;
	border-radius: 0 8px 8px 8px;
}
.filter-form {
	padding: 10px;
}
.filter-category, .filter-type {
	padding-bottom: 25px;
}
.filter-category-btn, .filter-type-btn {
	background: none;
	border: none;
	width: 20%;
	text-align: left;
	font-size: 15px;
	font-weight: 700;
	vertical-align: middle;
}
.filter-type .sub-title {
	margin: 0;
	padding: 0 0 0 10px;
	color: #888;
	font-size: 15px;
	font-weight: 600;
}
.filter-category ul li {
	margin-bottom: 10px;
}
.filter-category-btn:before {
	float: right;
	content: "\f078";
	font-size: 15px;
	font-family: 'Font Awesome 5 Free';
	transition: all .3s;
}
.filter-category-btn.collapsed:before {
	content: "\f054";
}
.filter-types .filter-ul {
	padding-left: 25px;
	border-bottom: 1px solid #888;
	margin-bottom: 15px;
}
.filter-types ul.filter-ul li {
	display: inline-block;
	padding-bottom: 5px;
	list-style-type: none;
	font-size: 16px;
}
@media only screen and (max-width: 600px) {
	.filter-category-btn, .filter-type-btn {
		width: 30%;
	}
	.filter-types ul.filter-ul li {
		width: 50%;
	}
}
@media only screen and (min-width: 600px) {
	.filter-category-btn, .filter-type-btn {
		width: 30%;
	}
	.filter-types ul.filter-ul li {
		width: 49%;
	}
}
@media only screen and (min-width: 900px) {
	.filter-types ul.filter-ul li {
		width: 33%;
	}
}
@media only screen and (min-width: 1000px) {
	.filter-types ul.filter-ul li {
		width: 24%;
	}
}
@media only screen and (min-width: 1200px) {
	.filter-types ul.filter-ul li {
		width: 19%;
	}
}
ul.filter-ul li input {
	width: auto;
	margin: 0;
	vertical-align: middle;
}
.filter-types .filter-ul li label {
	width: 90%;
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	vertical-align: top;
	color: #666;
}
.filter-types .filter-ul label.select-type-label.disabled {
	color: #9d9d9d;
	cursor: not-allowed;
}
.filter-types ul li.show-more, .filter-types ul li.less {
	display: none;
}
.filter-types .more-less-btn {
	background: none;
	border: none;
	font-size: 18px;
	color: #e089cd;
}
.filter-text {
	margin-right: .5rem;
	color: #888;
	font-size: 16px;
	font-weight: bold;
}
.splide.community {
	padding: 0 25px;
}
.splide.community .splide__arrow--prev {
	left: -5px;
}
.splide.community .splide__arrow--next {
	right: -5px;
}
.community-categories {
	display: inline-block;
	margin: 0 2px;
	padding: 5px;
	color: #888;
	font-weight: 600;
	background: #fff;
	border-radius: 8px;
	border: 1px solid lightgray;
	cursor: pointer;
}
.community-categories.active {
	background: #e089cd;
	color: #fff;
}
.community-categories:hover {
	border-color: #e089cd;
}
#explore-title {
	text-align: center;
}
.gallery-types-select {
	font-size: 1em;
	line-height: 1.85714286em;
	color: #888;
	font-weight: 400;
	border-radius: 5px;
	background: #fff;
	padding: 5px;
}
.users-section {
    position: relative;
    padding: 1rem 0 3rem 0;
    min-height: 300px;
}
.users-gallery, .users-info {
	display: block;
	position: relative;
	padding: 1rem;
}
.users-avatar, .users-name {
	margin-right: 1rem;
	display: inline-block;
	vertical-align: top;
}
.users-avatar img {
	border-radius: 50%;
	width: 48px;
  height: 48px;
}
/*----------------------------------------Examples----------------------------------------*/
.example-title {
	font-size: 21px;
}
.example-title a, .community-categories a {
	color: #4B4B4C;
}
.example-masonry-wrapper, .search-template-wrapper {
    padding: 1.5rem 0px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    /*max-width: unset;
    padding-right: 25px;*/
}
.grid {
	margin: 0 auto;
}
.grid:after {
	content: '';
	display: block;
	clear: both;
}
.grid-item { 
	float: left;
	width: 20%;
	margin-bottom: 10px;
	padding: 0 10px;
}
.gallery-examples-grid, .user-examples-grid {
	display: grid;
	grid-gap: .5rem;
	grid-auto-rows: 180px;
	grid-template-columns: repeat(5, [col-start] 20% [col-end]);
}
.user-examples-grid {
	grid-template-columns: repeat(3, [col-start] 33.3% [col-end]);
}
.gallery-examples-grid {
	grid-template-columns: repeat(5, [col-start] 20% [col-end]);
}
@media only screen and (max-width: 600px) {
	.grid-item {
	    width: 100%;
	}	
}
@media only screen and (min-width: 600px) {
	.grid-item {
	    width: 50%;
	}
}
@media only screen and (max-width: 900px) {
	.gallery-examples-grid {
	  	grid-template-columns: repeat(2, [col-start] 50% [col-end]);
	}
}
@media only screen and (min-width: 900px) {
	.gallery-examples-grid {
	  	grid-template-columns: repeat(3, [col-start] 33.3% [col-end]);
	}
	.grid-item {
	    width: 50%;
	}
}
@media only screen and (min-width: 1000px) {
	.gallery-examples-grid {
		grid-template-columns: repeat(3, [col-start] 33.3% [col-end]);
	}
	.grid-item {
	    width: 33.3%;
	}
}
@media only screen and (min-width: 1200px) {
	.gallery-examples-grid {
	  	grid-template-columns: repeat(4, [col-start] 25% [col-end]);
	}
	.grid-item {
	    width: 25%;
	}
}
@media only screen and (min-width: 1600px) {
	.gallery-examples-grid {
	  	grid-template-columns: repeat(5, [col-start] 20% [col-end]);
	}
	.grid-item {
	    width: 20%;
	}
}
#templates .related-templates-masonry-wrapper {
	/*display: none;*/
}
.gallery-item {
	display: inline-block;
	width: 100%;
	padding: 5px;
}
.gallery-examples-item {
	padding: 10px;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	filter: drop-shadow(-2px 1px 2px rgba(0,0,0,0.1));
	-webkit-filter: drop-shadow(-2px 1px 2px rgba(0,0,0,0.1));
	-moz-filter: drop-shadow(-2px 1px 2px rgba(0,0,0,0.1));
	transition: filter .25s ease-in-out;
	overflow: hidden;
	position: relative;
}
.gallery-examples-item:hover {
  	filter: drop-shadow(-2px 1px 2px rgba(0,0,0,0.3));
}
.gallery-examples-item a {
	color: #546A7B;
	display: block;
}
.examples-masonry-content {
    margin-left: -1px !important;
    margin-top: -4px;
    margin-bottom: -5px;
}
.gallery-examples-item:hover .template-button-set {
    -webkit-transform: translateY(16px);
      opacity: 1;
}


.gallery-examples-item .moderator {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	border-bottom-left-radius: .5rem;
	padding: 0 .5rem;
	background: rgba(80,160,240,.25);
	color: black;
}
.gallery-examples-item .moderator .select-thumbnailpage {
	margin-right: .5rem;
	width: fit-content;
}
.gallery-examples-item .moderator .status-option {
	display: flex;
	
	.approve {
		margin-left: .5rem;
		padding: 0 .25rem;
		background: rgba(0,200,240,.25);
		
		i { pointer-events: none; }
	}
	.denie {
		padding: 0 .25rem;
		background: rgba(180,0,0,.25);
		
		i { pointer-events: none; }
	}
	.pending {
		padding: 0 .25rem;
		background: rgba(80,80,80,.25);
		
		i { pointer-events: none; }
	}
}
.gallery-examples-item .moderator .status-option[data-status="approved"] {
	background: rgba(0,200,240,.25);
}
.gallery-examples-item .moderator .status-option[data-status="denied"] {
	background: rgba(180,0,0,.25);
}
.gallery-examples-item .moderator .status-option[data-status="pending"] {
	background: rgba(80,80,80,.25);
}
.gallery-examples-item .moderator .status-option[data-status="reported"] {
	background: rgba(80,80,80,.25);
}
.gallery-examples-item .moderator .status-option:before {
	content: 'Before Moderator';
}
.gallery-examples-item .moderator .status-option[data-status="approved"]:before {
	content: 'Approved';
}
.gallery-examples-item .moderator .status-option[data-status="denied"]:before {
	content: 'Denied';
}
.gallery-examples-item .moderator .status-option[data-status="pending"]:before {
	content: 'Pending';
}
.gallery-examples-item .moderator .status-option[data-status="reported"]:before {
	content: 'Reported';
}
.gallery-examples-item .reject-option {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	border-bottom-left-radius: .5rem;
	padding: 0 .5rem;
	background: rgba(0,80,160,.25);
	color: black;
	text-decloration: underline;
	cursor: pointer;
}
.gallery-examples-item .reject-option[data-rejected="true"] {
	background: rgba(160,80,0,.25);
}
.gallery-examples-item .reject-option:after {
	content: 'Reject?';
}
.gallery-examples-item .reject-option[data-rejected="true"]:after {
	content: 'Rejected';
}
.gallery-type {
	font-weight: bold;
	text-decoration: underline;
}
.gallery-name {
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
a.gallery-user {
	font-size: 14px;
	color: #888;
}
a.gallery-user:hover {
	color: #337ab7 !important;
}
.template-details .image-name {
	font-weight: 600;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-template-icon {
	padding: 1rem;
}
.share-examples {
	display: none !important;
}
#list-gallery-examples .splide {
    padding-top: 0;
    padding-bottom: 0;
}
.splide.gallery .gallery-examples-item {
	width: 180px;
}
.share-example-img {
	width: 100%;
	height: 100%;
	max-height: 500px;
	background: #fff;
	object-fit: contain;
}
.load-animate {
   animation : shimmer 2s infinite linear;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
   height: 280px;
}
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
/*----------------------------------------Example Overlay----------------------------------------*/
.share-examples-overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 1032;
	overflow-y: scroll;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 768px) {
	.share-overlay-button {
		padding-left: .2rem;
		right: 0;
	}
}
@media only screen and (max-width: 600px) {
    .share-overlay-container, .preview-template, .template-main-content {
		margin: 0 !important;
	    padding: 0 !important;
	    border-radius: 0 !important;
	}
	.preview-example-content {
		padding: 1rem !important;
	}
	.share-overlay-button {
		width: 10% !important;
		right: 0;
	}
	.close-overlay {
		padding: .5rem !important;
		transform: scale(1.3, 1.3);
	}
	.template-name-title {
		padding-top: 2rem;
    	font-weight: bold;
	}
	.custom-content {
	    font-size: 1.2rem !important;
	}
}
.share-overlay-content {
	position: relative;
	display: inline-block;
	width: 100%;
}
.share-overlay-button {
	position: fixed;
	display: inline-block;
	width: 5%;
	top: 0px;
	float: right;
}
.preview-template {
	position: relative;
	margin: 2rem 1rem;
	background-color: rgb(255,255,255);
    border-radius: 1rem;
    box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.3);
}
.preview-example-content {
	padding: 2rem;
}
.close-overlay {
    padding-top: 2rem;
    z-index: 1;
}
.close-overlay-button {
	background: transparent;
    border: 0;
    padding: 0;
}
.template-top-title {
    display: inline-block;
    width: 100%;
    padding: 0 10px;
}
.template-spinner {
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(217, 217, 217, 0.8);
    border-right: 6px solid rgba(217, 217, 217, 0.8);
    border-bottom: 6px solid rgba(217, 217, 217, 0.8);
    border-top: 6px solid rgba(109, 109, 109, 0.8);
    border-radius: 100%;
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
 }
 @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
 }
 @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
 }
 @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
 }
/*----------------------------------------Not Found Page----------------------------------------*/
.share-templates-header-bg {
	background-blend-mode: normal;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: bottom center;
	padding-top: 60px;
	padding-bottom: 60px;
	background-image: url(/images/infoart/diagram-feature/shape.png), linear-gradient(0deg, rgb(249, 229, 244) 0%, rgb(255, 255, 255) 100%);
}
.share-page-title, .share-page-description {
	color: #666666;
	padding-left: 70px;
	padding-right: 70px;
}
.share-feature-header {
    margin-bottom: 120px;
    text-align: center;
}
.share-feature-header h1 {
    font-weight: 700;
    letter-spacing: -0.18rem;
    font-size: 3rem;
    text-transform: capitalize;
    color: #4B4B4C;
}
/*----------------------------------------Form and Input----------------------------------------*/
input, select, textarea {
    width: 100%;
    font-size: 1.4rem;
    color: #333333;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: transparent;
    line-height: 24px;
    padding: 10px 15px;
    letter-spacing: 0.3px;
}
input:focus, select:focus, textarea:focus{
	outline: none;
}