.civsfz-custom-property {
	--civsfz-shadow-color-default: hsl(225, 15%, 30% , 0.7);
	--civsfz-shadow-color-alreadyhave: hsl(180, 80%, 50%, 0.8);
	--civsfz-shadow-color-alreadyhad: hsl(180, 60%, 30%, 0.8);
	--civsfz-background-color-figcaption: hsl(225, 15%, 30% , 0.8);
	--civsfz-background-color-early-access-in: hsl(225, 80%, 40%, 0.8);
	--civsfz-hover-scale: 1.5;
	--civsfz-card-width: 8;
	--civsfz-card-height: 12;
	--civsfz-card-size-unit: 1em;
}

.civsfz-modellist {
	display: flex;
	flex-wrap: wrap;
}

.civsfz-modellist figure {
	margin: 4px;
	transition: transform .3s ease-out;
	cursor: pointer;
}

.civsfz-modelcard {
	position: relative;
	overflow: hidden;
}

.civsfz-modelcard:hover {
	transform: scale(var(--civsfz-hover-scale), var(--civsfz-hover-scale));
	position: relative;
	overflow: visible;
	/* need for z-index */
	z-index: var(--layer-5);
	box-shadow: 0 0 4px 6px var(--civsfz-shadow-color-default);
}

.civsfz-modelcardalreadyhave {
	box-shadow: 0 0 1px 4px var(--civsfz-shadow-color-alreadyhave);
}
.civsfz-modelcardalreadyhave:hover {
	box-shadow: 0 0 4px 6px var(--civsfz-shadow-color-alreadyhave);
}
.civsfz-modelcardalreadyhad {
	box-shadow: 0 0 1px 4px var(--civsfz-shadow-color-alreadyhad);
}
.civsfz-modelcardalreadyhad:hover {
	box-shadow: 0 0 4px 6px var(--civsfz-shadow-color-alreadyhad);
}

/*
.civsfz-bgcolor-base {
	background-color: var(--civsfz-figcaption-background-color);
}
.civsfz-bgcolor-SD1 {
	background-color: var(--civsfz-sd1-background-color);
}
.civsfz-bgcolor-SD2 {
	background-color: var(--civsfz-sd2-background-color);
}
.civsfz-bgcolor-SD3 {
	background-color: var(--civsfz-sd3-background-color);
}
.civsfz-bgcolor-SD35 {
	background-color: var(--civsfz-sd35-background-color);
}
.civsfz-bgcolor-SDXL {
	background-color: var(--civsfz-sdxl-background-color);
}
.civsfz-bgcolor-Pony {
	background-color: var(--civsfz-pony-background-color);
}
.civsfz-bgcolor-Illustrious {
	background-color: var(--civsfz-illustrious-background-color);
}
.civsfz-bgcolor-Flux1 {
	background-color: var(--civsfz-flux1-background-color);
}
*/
.civsfz-modelcard img {
	/*filter: blur(6px);*/
	width:  calc(var(--civsfz-card-width) * var(--civsfz-card-size-unit));
	height: calc(var(--civsfz-card-height) * var(--civsfz-card-size-unit));
	object-fit: cover;
}

.civsfz-modelcard video {
	/*filter: blur(6px);*/
	width:  calc(var(--civsfz-card-width) * var(--civsfz-card-size-unit));
	height: calc(var(--civsfz-card-height) * var(--civsfz-card-size-unit));
	object-fit: cover;
}

.civsfz-modelcard figcaption {
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	word-break: break-word;
	background-color: var(--civsfz-background-color-figcaption);
	/*transition: bottom .3s ease-out;*/
	max-height: 60%;
}

.civsfz-modelcard:hover figcaption {
	bottom: initial;
	max-height: initial;
}

.civsfz-modelcard .civsfz-basemodel {
	position: absolute;
	top: 0px;
	right: 0px;
	word-break: break-word;
	font-size: smaller;
	max-width: 70%;
	text-align: right;
}
.civsfz-modelcard:hover .civsfz-basemodel {
	top: -1.5em;
}
.civsfz-modelcard .civsfz-modeltype  {
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	word-break: break-word;
 	font-size: smaller;
	background-color: var(--civsfz-background-color-figcaption);
 }
.civsfz-modelcard:hover .civsfz-modeltype {
	top: -1.5em;
}


.civsfz-modelcard .civsfz-creator-flag {
	position: absolute;
	bottom: 4px;
	right: -3px;
	word-break: break-word;
	/* color: gold; */
	font-size: x-large;
	text-shadow: -3px 3px 2px black;
}
.civsfz-modelcard:hover .civsfz-creator-flag {
	bottom: -1em;
	right: -0.5em;
	opacity: 90%;
	transform:rotate(20deg);
}

.civsfz-modelcard .civsfz-early-access-out {
	position: absolute;
	top: 1.4em;
	right: 0em;
	font-size: smaller;
	background-color: var(--civsfz-early-access-out-background-color);
}
.civsfz-modelcard:hover .civsfz-early-access-out {
	top: -1.5em;
	right: -1.2em;
}
.civsfz-modelcard .civsfz-early-access-in {
	position: absolute;
	top: 1.4em;
	right: 0em;
	word-break: break-word;
	font-size: smaller;
	background-color: var(--civsfz-background-color-early-access-in);
}
.civsfz-modelcard:hover .civsfz-early-access-in {
	top: -1.5em;
	right: -1.2em;
}

.civsfz-nsfw img {
	filter: blur(12px);
}

.civsfz-cardnsfw img {
	filter: blur(6px);
}

.civsfz-nsfw video {
	filter: blur(12px);
}

.civsfz-cardnsfw video {
	filter: blur(6px);
}

#civsfz_tab-element .civsfz-tabbar:first-child {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0em;
	z-index: 2;
}
[id^="civsfz_model-navigation"] .civsfz-navigation-buttons {
	position: -webkit-sticky;
	/* Safari */
	position: sticky;
	top: 3em;
	z-index: 1;
}
[id^="civsfz_model-navigation"] .civsfz-jump-page-control {
	position: -webkit-sticky;
	/* Safari */
	position: sticky;
	bottom: 0px;
	z-index: 1;
}
[id^="civsfz_model-data"] .civsfz-save-buttons {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 3em;
	z-index: 1;
}
[id^="civsfz_model-data"] .civsfz-back-to-top {
	text-align: right;
	position: -webkit-sticky; /* Safari */
	position:sticky;
	top: 7em;
	z-index: 2;
	float: inline-end;
	pointer-events: none;
	height: 0em;
}
.civsfz-sticky-parent {
	display: initial;
}
.civsfz-sticky-element {
	backdrop-filter: brightness(0.35);
	padding: 0.5em 0;
}
/*https: //github.com/gradio-app/gradio/issues/3337#issuecomment-1449589285*/
.civsfz-small-buttons {
	margin: 1.2em 0em 0.55em 0em !important;
	max-width: 2.5em;
	min-width: 2.5em !important;
	height: 2.4em;
}
.civsfz-small-buttons2 {
	margin: 0em 0em 0.0em 0em !important;
	max-width: 2.5em;
	min-width: 2.5em !important;
	height: 2.4em;
}

.civsfz-msg {
	/*align-self: center;*/
	text-align: center;
	background-color: maroon;
	margin: 1.1em 0em 0em 0em !important;
	max-width: 8em;
	min-width: 8em !important;
}

.civsfz-tooltip {
	position: relative;
	display: inline-block;
	/* border-bottom: 1px dotted black; */
}
.civsfz-tooltip .civsfz-tooltiptext {
	visibility: hidden;
	width: max-content;
	max-width: 100%;
	bottom: 100%;
	right: 0%;
	background-color: var(--civsfz-background-color-figcaption);
	text-align: left;
	padding: 2px 5px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	font-size: x-small;
}
.civsfz-tooltip:hover .civsfz-tooltiptext {
	visibility: visible;
}