body {
	background-color: #495e5e;
	margin: 0;
	font-family: sans-serif;
}

button {
	border: none;
	border-radius: 50%;
	background-color: #131e1e;
}

a,
a:visited {
	color: #e96b6b;
	text-decoration: none;
	font-weight: bold;

}

a:active,
a:hover {
	color: #f75353;
}

p {
	font-size: 1.15em;
	margin: 0;
}

small {
	font-weight: lighter;
	font-size: x-small;
}

.main {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui {
	width: 100%;
}

.ui > div {
	position: relative;
	top: -1.5rem;
	display: flex;
	align-items: center;
}

.btn-category-selection,
img.trash {

	min-width: 100px;
	max-width: 100px;
	margin: 0 2px;
	padding: 3px;
	border: 0;
	border-radius: 50%;
	background-color: #131e1e;
}

@media screen and (min-width: 750px) {
	.btn-category-selection,
	img.trash {
		max-width: 4.5%;
		margin: 0 6px;
		padding: 5px;
	}
}

.btn-category-selection:hover,
img.trash:hover {
	background-color: #ab4343;
}

.btn-category-selection > img {
	width: 100%;
}

.clothing-item {
	height: 10vh;
}

#ui-clothing-cat-select,
#ui-clothing-select {
	height: 100%;
	overflow-x: scroll;
	scrollbar-width:none; 
	-ms-overflow-style:none; 
	position:relative
}

#ui-clothing-cat-select::-webkit-scrollbar,
#ui-clothing-select::-webkit-scrollbar { 
	display:none; 
}

#ui-clothing-cat-select::before,
#ui-clothing-cat-select::after {
	content: '';
	height: 500px;
	min-width: 35px;
	position: fixed;
	z-index: 100;
}

#ui-clothing-cat-select::before {
	left: 0;
	background: linear-gradient(90deg, rgb(46, 69, 69) 0%, rgb(73, 94, 94) 10%, rgba(73, 94, 94, 0) 100%);
}

#ui-clothing-cat-select::after {
	right: 0;
	background: linear-gradient(90deg, rgba(73, 94, 94, 0) 0%, rgb(73, 94, 94) 90%, rgb(46, 69, 69) 100%);
}

#ui-clothing-cat-select > button:first-child,
#ui-clothing-select > img:first-child {
	margin-left: auto;
}

#ui-clothing-cat-select > button:last-child,
#ui-clothing-select > img:last-child {
	margin-right: auto;
}

#ui-utility-toggle {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 2%;
	left: 2%;
}

#ui-info-toggle {
	position: absolute;
	top: 2%;
	right: 2%;
}

@media screen and (min-width: 750px) {
	#ui-utility-toggle {
		top: 2.5%;
		left: 7%;
	}

	#ui-info-toggle {
		top: 2.5%;
		right: 7%;
	}
}

#ui-utility-toggle > button,
#ui-info-toggle > button {
	width: 4rem;
	height: 4rem;
	padding: 3px;
	margin: 5px;
}

#ui-utility-toggle > button > img.utility-btn,
#ui-info-toggle > button > img {
	width: 100%;
	height: 100%;
}

#info-popup {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(19, 30, 30, 0.85);
	z-index: 200;
}

#info-popup > #info-msg-box {
	height: 100vh;
	width: 65vw;
	left: 0;
	position: absolute;
	border-radius: 0 5px 5px 0;
	background-color: #495e5e;
	color: whitesmoke;
	padding: 0 50px;
	overflow-y: scroll;
	transition: width 0.5s ease-out;
}

#info-popup > #info-msg-box > h1,
#info-popup > #info-msg-box > h2,
#info-popup > #info-msg-box > h3 {
   margin: 0;
}

#info-popup > #info-msg-box > h1,
#info-popup > #info-msg-box > h2 {
	text-align: center;
}

#info-popup > #info-msg-box > h1 {
	font-variant: small-caps;
	margin-top: 20px;
}

#info-popup > #info-msg-box > h2 {
	margin-bottom: 20px;
	font-weight: 100;
	font-size: 1.25em;
}

#info-popup > #info-msg-box > p {
	text-align: justify;
	padding: 25px;
	line-height: 1.25;
}

.closed,
.closed > * {
	width: 0!important;
	max-width: 0!important;
	padding: 0!important;
	margin: 0!important;
}