@font-face {
    font-family: 'HelveticaNeue';
    font-style: light;
    font-weight: 200;
    src: url( "fonts/HelveticaNeue-Light.ttf" ) format( 'truetype' );
}
@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 300;
    src: url( "fonts/HelveticaNeue.ttf" ) format( 'truetype' );
}
@font-face {
    font-family: 'HelveticaNeue';
    font-style: medium;
    font-weight: 500;
    src: url( "fonts/HelveticaNeue-Medium.ttf" ) format( 'truetype' );
}
@font-face {
    font-family: 'HelveticaNeue';
    font-style: bold;
    font-weight: 700;
    src: url( "fonts/HelveticaNeue-Bold.ttf" ) format( 'truetype' );
}

@font-face {
	font-family: 'BodoniModa';
	src: url( "fonts/BodoniModa-VariableFont_opsz,wght.ttf" ) format( 'truetype' );
}

/* @font-face {
    font-family: 'Chalkduster';
    src:url('fonts/Chalkduster.ttf.woff') format('woff'),
        url('fonts/Chalkduster.ttf.svg#Chalkduster') format('svg'),
        url('fonts/Chalkduster.ttf.eot'),
        url('fonts/Chalkduster.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
} */

:root {
  --color-green: #6bbbae;
  --color-greenBright: #74c5b6;
  --color-pink: #ff3399;
  --color-red: #c60000;
  --color-darkGrey: #63676b;
  --color-medGrey: #a9a9a9;
  --color-lightGrey: #e8e8e8;
  --color-shadowGrey: #e8e8e8;
  --color-logo-black: #1e1d1d;
}


/* =============================================================================
  RESETS
============================================================================= */
html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'BodoniModa';
}

/* =============================================================================
  HTML, BODY
============================================================================= */
html,
body {
  height: 100%;
}

body {
  font-size: 12px;
  font-family: 'BodoniModa',HelveticaNeue,Helvetica,Verdana,sans-serif;
  font-weight: 300;
  color: #000000;
  -webkit-user-select: none;
  user-select: none;
  /* background-color: #ffff00; */
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

input, button, textarea, select {
  font-family: 'HelveticaNeue',Helvetica,Verdana,sans-serif;
  font-weight: 300;
}

#mainSiteContent, #mainSiteContent-unfixed {
	position:fixed; 
	inset:0; 
	width:fit-content; 
	height:fit-content; 
	margin:auto; 
	padding:15px; 
	font:normal normal 18px Arial,sans serif; color:#ffffff;
}
#mainSiteContent-unfixed {
	position:relative;
	width: 90%;
}

#feedbackFormContent {
	position:relative; 
	inset:0; 
	width:70%; 
	height:fit-content; 
	margin:auto; 
	padding:10px 10px 80px 10px; 
	color:#000000;
}

#mainContent {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 1em;
	height: auto;
	min-height: 80%;
}

#adminContainer {
	padding: 2em;
	width: 100%;
	height: aut0;
}

#adminMenu {
	margin-bottom: 3em;

	.nav-link {
		font-family: 'HelveticaNeue';
	}
}
#adminContent {
	width: 90%;

	.pageTitle, .input-wrapper, .category-check-box {
		font-family: 'HelveticaNeue';
	}
	.category-check-box {
		width: 49%;
		float: left;
	}
}

#category-div {
	width: 100%;
	height: 200px;
	overflow-y:auto;
}

#header {
	width: 100%;
	height: 7em;
	padding: 0;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 1.0em;
}

#header a.header-link {
	text-decoration: none;
	padding: 0;
	margin: 0;
}

#footer, #paginationLinks {
	width: 100%;
	height: 3em;
	padding: 2em;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	font-size: 1.2em;
	background-color: #ffffff;
	display: inline-block;
}
#paginationLinks {
	width: 70%;
}

.header-logo {
	background-image: url( /assets/imgs/logo-429x62.png );
	height: 4em;
   width: 21em;
	background-position: top left;
	background-size: contain;
	background-repeat: no-repeat;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	-webkit-transform: translate( -50%, -50% );
}
.centered-x {
   position: absolute;
   top: 0%;
   left: 50%;
   transform: translateX( -50% );
   -webkit-transform: translateX( -50% );
}
.centered-y {
	position: absolute;
   top: 50%;
   left: 0%;
   transform: translateY( -50% );
   -webkit-transform: translateY( -50% );
}

.hidden {
	display: none;
}

.pageTitle {
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.error-text, .success-text {
	color: #ff0000;
	font-weight: 200;
	font-family: 'HelveticaNeue';
	font-size: 0.8em;
}
.success-text {
	/*color: var( --color-green );*/
	color: #000000;
}

.bordered {
	border: 1px solid var( --color-medGrey );
}

.radius-1 {
	border-radius: 1.0em;
}

.shadowed-6 {
	box-shadow: 1px 1px 6px var( --color-shadowGrey );
}

.content-wrapper {
	width: 60%;
	position: relative;
	margin: auto;
	display: inline-block;
}

.main-form {
	position: static;
}

.input-wrapper {
	width: 100%;
	margin: 0;
   padding: 0;
   line-height: 1.5;
   list-style: none;
   position: relative;
   /* display: inline-block; */
   text-align: start;
	font-family: 'HelveticaNeue';
}

.input-wrapper .fa {
	position: absolute;
   top: 0.8em;
   left: 0.9em;
   font-size: 0.75em;
   color: var( --color-medGrey );
}

.input-wrapper.outfitItem {
	border:1px solid rgba(175, 175, 175, 0.9);
	border-radius: 5px;
   padding: 0.5em;
}

.site-input, .site-input-text, .site-input-text-7, .site-input-select {
	height: 2.0em;
   width: 100%;
   padding: 0.33em 0.75em 0.33em 0.8em;
   margin-bottom: 0.25em;
   border: 1px solid var( --color-medGrey );
   background-color: #f3f3f3;
}
.site-input-text {
	height: 4.0em;
}
.site-input-text-7 {
	height: 7.0em;
}
.site-input-select {
	height: 10.0em;
   width: 25%;
}

input:focus, textarea:focus, select:focus {
	/* outline-offset: 0px !important; */
	/*border: 1px solid var( --color-medGrey ) !important;*/
   box-shadow: 1px 1px 6px #b0b0b0 !important;
   background-color: #ffffff;
}
input.error:focus {
	border: 1px solid var( --color-red ) !important;
}
.error {
	border: 2px solid var( --color-red ) !important;
}

#additionalFilters {
	height: 3em;
}

.inline {
	display: inline-block;
}

.small-button, .showHideButton, .showHideButtonInline {
	padding: 0em 0.75em;
	height: 1.5em;
	margin-bottom: 0.2em;
	background-color: #1890ff;
	border: none;
	color: #ffffff;
	border-radius: 3px;
	cursor: pointer;
}

.small-button.activated {
	background-color: #20a02a;
}
.small-button.not-activated {
	background-color: #95acc1;
}
.small-button.activated:hover {
	background-color: #95acc1;
}
.small-button.not-activated:hover {
	background-color: #20a02a;
}

.showHideButton, .showHideButtonInline {
	font-size: 1em;
   padding: 0.2em 0.5em;
   height: 1.75em;
	display: block;
	border-radius: 2px;
	margin-top: 0.2em;
}
.showHideButtonInline { display: Inline; }
.showHideButtonInline.selected { background-color: #000000; }

.site-button, .site-button-add, .delete-button, .account-section-button {
	width: 40%;
	max-width: 25em;
	min-width: 11em;
	padding: 0em 0.33em;
	height: 2.0em;
	background-color: #41a4ff;
	border: none;
	color: #ffffff;
	border-radius: 3px;
	cursor: pointer;
}
.site-button:hover, .small-button:hover, .site-button-add:hover {
	background-color: #1890ff;
}
.site-button-add {
	width: 20%;
	max-width: 10em;
	min-width: 6em;
}
.account-section-button {
	width: 20%;
	max-width: 20em;
	padding: 0.25em 1.0em;
	margin: 0.5em;
	color: #ffffff;
	background-color: #a1a1a1;
	font-family: 'HelveticaNeue';
	font-size: 1em;
	text-decoration: none;
	box-shadow: 2px 2px 5px #bebebe;
	border: 1px solid #1e1d1d
}
.account-section-button:hover {
	background-color: #707070;
	box-shadow: none;
}

.delete-button {
	max-width: 7em;
	min-width: 6em;
	background-color: #ff0000;
	color: #ffffff;
}
.delete-button:hover, .delete-button-x:hover {
	background-color: #c10000;
}

.delete-button-x {
	max-width: 1.5em;
	max-height: 1.5em;
	background-color: #ff0000;
	color: #ffffff;
	border: none;
	border-radius: 3px;
	position:absolute;
	top: 0px;
	right: -15px;
	cursor: pointer;
}

#loginForm {
	position: relative;
	padding: 2em;
	max-width: 100%;
}

.pageMask, .pageMaskWhite {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba( 0,0,0,0.4 );
	display: none;
	z-index: 5000;
}

.pageMaskWhite {
	background: rgba( 255,255,255,0.7 );
}

#messageBox {
	width: 20em;
	max-width: 90%;
	height: auto;
	padding: 1.25em;
	background: rgba( 255, 255, 255, 0.9 );
	border: 1px solid #4c4c4c;
	border-radius: 10px;
	box-shadow: 1px 1px 10px #444444;
	z-index: 5001;
	font-size: 2em;
	text-align: center;
}

#messageText {
	width: 100%;
	height: 100%;
}

#spinner {
	width: 7em;
	height: 7em;
	background-image: url( /assets/imgs/spinner.gif );
	background-size: contain;
	background-repeat: no-repeat;
   z-index: 5001;
}

#closeMessage, #closeContainer {
	position: absolute;
	top: 0.25em;
   right: 0.25em;
   width: 1.25em;
   height: 1.25em;
	background-image: url( /assets/imgs/icon-close-x.png );
	background-size: contain;
	cursor: pointer;
	z-index: 10;
}

#searchResults {
	width: 100%;
	padding: 1em;
	font-size: 1.2em;
}

#resultsTable {
	position: relative;
   margin: auto;
}    

#greeting-container {
	position: absolute;
	top: 0.33em;
	right: 2em;
	color: var( --color-darkGrey );
	font-size: 1.2em;
	text-align: right;
}

#logout, #admin-link {
   padding: 0.25em 0.5em 0em 0.5em;
}

#username-display {
	margin: 0em 0.5em 0.5em 0em;
}

.content-table {
	width: 70%;
}

a.clickable-container, a.clickable-container:hover {
	text-decoration: underline;
	color: var( --color-darkGrey );
}
a.clickable-container:hover {
	color: var( --color-medGrey );
}

a.nav-link, a.nav-link:hover {
	font-size: 1.33em;
	color: var( --color-darkGrey );
	padding: 0.5em 1.0em;
	line-height: 1.8em;
   text-decoration: none;
   font-weight: 300;
}
a.nav-link:hover {
	color: var( --color-medGrey );
}

a.csg-nav-link {
	color:#ff96f8; 
	text-decoration:none;
}
a.csg-nav-link:hover {
	text-decoration:underline;
}

.header-row {
	background-color: var( --color-lightGrey );
	color: #000000;
}

.list-row {
	cursor: pointer;
	font-family: 'HelveticaNeue';
}

.list-row:hover {
	background-color: #d7eef7;
	box-shadow: 1px 3px 6px #bbbbbb;
}

.list-td {
	border-bottom: 1px solid var( --color-lightGrey );
	vertical-align: top;
}


.text-align-right {
	text-align: right;
}

.text-centered {
   text-align: center;
}

.column-10, .column-20, .column-30, .column-40, .column-50, .column-60, .column-70, .column-80, .column-90 {
	position: relative;
	float: left;
	width: 10%;
	/* white-space: nowrap; */
	height: 100%;
}
.column-20 {
   width: 20%;
}
.column-30 {
   width: 30%;
}
.column-40 {
   width: 40%;
}
.column-50 {
   width: 50%;
}
.column-60 {
   width: 60%;
}
.column-70 {
   width: 70%;
}
.column-80 {
   width: 80%;
}
.column-90 {
   width: 90%;
}

.inlined, .float-right, .float-left {
	display: inline;
}
.float-right{
	float: right;
}
.float-left{
	float: left;
}

.vspace-1, .vspace-1-5, .vspace-2, .vspace-2-5, .vspace-4, .vspace-6 {
	height: 1em;
	width: 100%;
	float: left;
}
.vspace-150 {
   height: 1.5em;
}
.vspace-200 {
	height: 2.0em;
}
.vspace-250 {
   height: 2.5em;
}
.vspace-300 {
   height: 3.0em;
}
.vspace-400 {
	height: 4.0em;
}
.vspace-600 {
	height: 6.0em;
}

.pad-left-05 {
   padding-left: 0.5em;
}
.pad-left-1 {
   padding-left: 1em;
}
.pad-left-150 {
   padding-left: 1.50em;
}
.pad-left-2 {
   padding-left: 2em;
}
.pad-left-250 {
   padding-left: 2.50em;
}
.pad-left-3 {
   padding-left: 3em;
}
.pad-left-4 {
   padding-left: 4em;
}

.pad-right-05 {
   padding-right: 0.5em;
}
.pad-right-1 {
	padding-right: 1em;
}
.pad-right-2 {
	padding-right: 2em;
}
.pad-right-3 {
	padding-right: 3em;
}
.pad-right-4 {
	padding-right: 4em;
}

.padded-050 {
	padding: 0.50em;
}
.padded-075 {
	padding: 0.75em;
}
.padded-100 {
	padding: 1.0em;
}
.padded-200 {
	padding: 2.0em;
}
.padded-300 {
	padding: 3.0em;
}

.margin-bottom-025 {
	margin-bottom: 0.25em;
}
.margin-bottom-050 {
	margin-bottom: 0.50em;
}
.margin-bottom-075 {
	margin-bottom: 0.75em;
}
.margin-bottom-100 {
	margin-bottom: 1.00em;
}
.margin-bottom-125 {
	margin-bottom: 1.25em;
}
.margin-bottom-150 {
	margin-bottom: 1.50em;
}
.margin-bottom-175 {
	margin-bottom: 1.75em;
}
.margin-bottom-200 {
	margin-bottom: 2.00em;
}
.margin-bottom-225 {
	margin-bottom: 2.25em;
}
.margin-bottom-250 {
	margin-bottom: 2.50em;
}
.margin-bottom-275 {
	margin-bottom: 2.75em;
}
.margin-bottom-300 {
	margin-bottom: 3.00em;
}
.margin-bottom-400 {
	margin-bottom: 4.00em;
}
.margin-bottom-500 {
	margin-bottom: 5.00em;
}

.margin-top-025 {
	margin-top: 0.25em;
}
.margin-top-050 {
	margin-top: 0.50em;
}
.margin-top-075 {
	margin-top: 0.75em;
}
.margin-top-100 {
	margin-top: 1.00em;
}
.margin-top-125 {
	margin-top: 1.25em;
}
.margin-top-150 {
	margin-top: 1.50em;
}
.margin-top-175 {
	margin-top: 1.75em;
}
.margin-top-200 {
	margin-top: 2.00em;
}
.margin-top-225 {
	margin-top: 2.25em;
}
.margin-top-250 {
	margin-top: 2.50em;
}
.margin-top-275 {
	margin-top: 2.75em;
}
.margin-top-300 {
	margin-top: 3.00em;
}
.margin-top-400 {
	margin-top: 4.00em;
}
.margin-top-500 {
	margin-top: 5.00em;
}

.margin-left-025 {
	margin-left: 0.25em;
}
.margin-left-050 {
	margin-left: 0.50em;
}
.margin-left-075 {
	margin-left: 0.75em;
}
.margin-left-100 {
	margin-left: 1.00em;
}
.margin-left-150 {
	margin-left: 1.50em;
}
.margin-left-200 {
	margin-left: 2.00em;
}
.margin-left-300 {
	margin-left: 3.00em;
}

.margin-right-0 {
	margin-right: 0em;
}
.margin-right-025 {
	margin-right: 0.25em;
}
.margin-right-050 {
	margin-right: 0.50em;
}
.margin-right-075 {
	margin-right: 0.75em;
}
.margin-right-100 {
	margin-right: 1.00em;
}
.margin-right-200 {
	margin-right: 2.00em;
}
.margin-right-300 {
	margin-right: 3.00em;
}
.margin-right-400 {
	margin-right: 4.00em;
}
.margin-right-500 {
	margin-right: 5.00em;
}

.font-050 {
	font-size: 0.50em;
}
.font-067 {
	font-size: 0.67em;
}
.font-075 {
	font-size: 0.75em;
}
.font-0825 {
	font-size: 0.825em;
}
.font-100 {
	font-size: 1.00em;
}
.font-110 {
	font-size: 1.10em;
}
.font-120 {
	font-size: 1.20em;
}
.font-125 {
	font-size: 1.25em;
}
.font-150 {
	font-size: 1.50em;
}
.font-175 {
	font-size: 1.75em;
}
.font-1825 {
	font-size: 1.825em;
}
.font-200 {
	font-size: 2.00em;
}
.font-225 {
	font-size: 2.25em;
}
.font-250 {
	font-size: 2.50em;
}
.font-275 {
	font-size: 1.75em;
}
.font-2825 {
	font-size: 2.825em;
}
.font-300 {
	font-size: 3.00em;
}

.text-light-grey {
	color: var( --color-lightGrey );
}
.text-dark-grey {
	color: var( --color-darkGrey );
}


/* SCREENS LESS THAN 1280 WIDE */
@media screen and ( max-width: 1280px ) {
	
	#submitDELETEUser {
		margin-top: 4em;
	}
	
	#submitDELETEUser.margin-left-100 {
		margin-left: 0px;
	}

	#mainSiteContent, #mainSiteContent-unfixed {
		font-size: 24px;
	}
}

/* SCREENS LESS THAN 1080 WIDE */
@media screen and ( max-width: 1081px ) {
	#mainSiteContent, #mainSiteContent-unfixed {
		font-size: 30px;
	}

	#adminMenu {
		margin-top: 2em;
		width: 100%;
		padding-right: 0;
	}
}

/* SCREENS LESS THAN 1024 WIDE */
@media screen and ( max-width: 1025px ) {
	
	#header {
   	height: 9em;
	}
	
	.header-logo {
		top: 42% !important;
	}
	
	.content-table {
		width: 100%;
	}
	
	.content-wrapper {
		width: 100%;
	}

	.inlined {
		display: inline;
		float: left;
	}

	a.nav-link, a.nav-link:hover {
		padding: 0.5em 0.5em;
	}
	
	#adminContainer {
		padding: 1em;
	}
	
	#adminContent {
		width: 96%;
	}
	
	.pageTitle {
		position: absolute;
		display: contents;
	}
	
	#greeting-container {
    	top: 5.75em;
    	width: auto;
    	height: 2em;
   }
   
   #logout, #admin-link, #username-display {
   	float: left;
   	margin-top: 0px;
   	margin-bottom: 0px;
   }
   
   #username-display {
		padding-top: 0.25em;
	}
   
	.site-button {
		max-width: 100%;
	}
	
	#searchPriceRange-from, #searchPriceRange-to {
		width: 40%;
	}
	
	#searchResults {
		padding: 0;
	}
	
	.site-input-select {
	   width: 100%;
	}
}

/* SCREENS LESS THAN 640 WIDE */
@media screen and ( max-width: 640px ) {

	#mainSiteContent, #mainSiteContent-unfixed {
		font-size: 36px;
	}

	#feedbackFormContent {
		width:90%; 
	}
}