#wardrobeWornItems{
	display: grid;
	grid-template-columns: 15em 15em 15em;
	grid-auto-rows: 15em;
	justify-content: center;
	grid-gap: 1em;
}

#wardrobeWornItems .emptySlot{
	background: white;
	position: relative;
}

#wardrobeWornItems .emptySlot a{
	opacity: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10;
	position: relative;
}
#wardrobeWornItems .emptySlot .label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: black;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.itemsOverview{
	display: grid;
	grid-template-columns: repeat(auto-fit, 10em);
	grid-auto-rows: 10em;
	justify-content: center;
	grid-gap: 1em;

}

.itemsOverview > img{
	grid-column: 1/ -1;
	width: 100%;
	height: 100%;
	object-fit: scale-down;

}

.itemsOverview .item>a{
	background: rgba(10, 10, 10, 0.8);
	text-decoration: none;
	color: white;
	font-weight: bold;
}

.itemsOverview .item>a:hover {
	opacity: 1;
}

.itemsOverview .item>a:nth-of-type(1) {
	text-align: center;
	z-index: 1000;
	padding: 80% 0% 0% 0%;
	height: 20%;
}

.itemsOverview .item > a:nth-of-type(2){
	writing-mode: vertical-lr;
	text-orientation: upright;
	width: 20%;
	text-align: center;
	z-index: 3000;
}

.itemsOverview .item>a:nth-of-type(3) {
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align: center;
	z-index: 4000;
	right: 0px;
	margin-left: 80%;
	width: 20%;
}

.item.inhibBlock{
	outline: plum 0.25em dotted;
}
.item.inhibBlock img {
	filter: grayscale(80%);
}

.item.owned {
	outline: green 0.25em dotted;
}

.item.insufficientFunds{
	filter: grayscale(80%);

}
.item.insufficientFunds > a{
	color: red;
}

.item.insufficientFunds:hover {
	filter: unset;
	outline: red 0.25em dotted;
}

.item.stored {
	outline: yellow 0.25em dotted;
}

.item.unwanted{
	outline: red solid 0.25em;
	filter: grayscale(80%);
}

.item.wearing{
	outline: green solid 0.25em;
}

.item.warning::after{
	content: '!';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	display: flex;
	color: red;
	font-size: 5em;
	font-weight: bold;
}

.destroyedOverlay, .notOwnedOverlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0.5;
	background: repeating-linear-gradient(45deg, red, red 10px, darkred 10px, darkred 20px);
	pointer-events: none;
}

.insufficientInhibitionOverlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0.5;
	background: repeating-linear-gradient(45deg, white, white 10px, rgb(94, 19, 94) 10px, rgb(94, 19, 94) 20px);
	pointer-events: none;
}

.itemsOverview .item>a:nth-of-type(4) {
	text-align: center;
	z-index: 5000;
	right: 0px;
	height: 15%;
}

.doubleLinkedImage{
	width: 100%;
	height: 100%;
	position: relative;
}

.doubleLinkedImage > .action {
	position: absolute;
	display: block;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0px;
	opacity: 0;
	background: rgba(10, 10, 10, 0.8);
}
.doubleLinkedImage>.action>a {
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	position: absolute;
	left: 0px;top:0px;right:0px;bottom: 0px;
}

.doubleLinkedImage>.action:nth-of-type(1) {
	text-align: center;
	z-index: 1000;
	/*padding: 80% 0% 0% 0%;
	height: 20%;*/
}

.doubleLinkedImage>.action:nth-of-type(2) {
	writing-mode: vertical-lr;
	text-orientation: upright;
	width: 20%;
	text-align: center;
	z-index: 3000;
}

.doubleLinkedImage>.action:hover {
	opacity: 1;
}

.doubleLinkedImage>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.linkedImage{
	width: 100%;
	height: 100%;
	position: relative;
}

.linkedImage > a{
	position: absolute;
	display: block;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0px;
	opacity: 0;
}

.linkedImage > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#wardrobeWornItems .bodysuit {
	grid-column: 1/ 2;
	grid-row: 1/3;
}

#wardrobeWornItems .bra {
	grid-column: 1/ 2;
	grid-row: 1/2;
}

#wardrobeWornItems .clothes {
	grid-column: 2/ 3;
	grid-row: 1/2;
}

#wardrobeWornItems .panties{
	grid-column: 1/ 2;
	grid-row: 2/3;
}

#wardrobeWornItems .shoes {
	grid-column: 2/ 3;
	grid-row: 2/3;
}

.outfitSet, #addOutfitField{
	border: 2px black solid;
	margin: 0.1em;
	border-radius: 0.4em;
	padding: 0.1em 1em;
	background: white;
	color: black;
}

#addOutfitField input{
	color: black;
}

.outfitSet{
	display: grid;
	grid-template-columns: 1fr repeat(4, 5em) repeat(4, auto);
	grid-template-rows: 5em;
	grid-auto-rows: auto;
}

.outfitSet>.itemPreview{
	grid-row: 1;
}

.outfitSet>.itemPreview.clothes{
	grid-column: 2;
}
.outfitSet>.itemPreview.shoes {
	grid-column: 3;
}
.outfitSet>.itemPreview.bra {
	grid-column: 4;
}
.outfitSet>.itemPreview.panties {
	grid-column: 5;
}

.outfitSet > .button{
	margin-top: auto;
	margin-bottom: auto;
}

.outfitSet > .buttonWear{
	grid-column: 6;
}

.outfitSet>.buttonManage{
		grid-column: 7;
	}

.outfitSet>.itemPreview{
	position: relative;
}

.outfitSet>.outfitManagement {
	display: none;
}

.outfitSet>.outfitManagement.visible{
	display: block;
	grid-column: 1/-1;
	grid-row: 2;
	
}



.outfitSet>.itemPreview>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.outfitSet > .buttonRadio{
	display: none;
}



#wardrobe_type_overview_filter{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 0.1em;
}

#wardrobe_type_overview_filter > h2 {
	grid-column: 1 / span 2;
}

#wardrobe_type_overview_filter > span {
	font-weight: bold;
	font-size: 1.1em;
}

#wardrobe_type_overview_filter #reset {
	grid-column: 2;
}






@media (max-width: 1550px) {
	.rightSidebar {
		position: unset;
	}

	.rightSidebar.optional {
		display: none;
	}
}

@media (max-width: 1100px) {
	#wardrobeWornItems {
		grid-template-columns: 15vw 15vw 15vw;
		grid-auto-rows: 15vw;
	}
}

@media (hover:none){
	.itemsOverview {
		grid-template-columns: repeat(auto-fit, 7em);
		grid-auto-rows: 7em;
	}

	.itemsOverview .item>a:nth-of-type(1),.itemsOverview .item>a:nth-of-type(2),.itemsOverview .item>a:nth-of-type(3) {
		z-index: -1000;
	}

	.itemsOverview.shop .item>a:nth-of-type(1){
		z-index: unset;
	}

	.itemsOverview .item>a:nth-of-type(4){
		opacity: 0;
		height: 100%;
	}

}
