/* Custom fonts */
	@font-face {
		font-family: 'diabloheavy';
		src: url('fonts/diablo_heavy-webfont.woff2') format('woff2'),
			url('fonts/diablo_heavy-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'diablolight';
		src: url('fonts/diablo_light-webfont.woff2') format('woff2'),
			url('fonts/diablo_light-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}




	/* Custom CSS variables */
	:root {
		--itemName-font-size: initial;
		--itemDetail-font-size: initial;
		--itemValue-font-size: initial;
		--itemType-font-size: initial;
		--stash-item-opacity: initial;
	}



	
	/* Page body */
	body {
		min-width: 1065px; 
		font-family: system-ui, arial;
		font-size: 16px; /* clamp(14px, 1vi, 16px); */
		background-color: #0a0a0a;
		color: #f1f1f1f1;
		margin: 0px;
	}
	
	body::-webkit-scrollbar {
		width: 8px;
	}

	body::-webkit-scrollbar-track {
		background: rgba(255,255,255,0.1);
		border-radius: 3px;
		margin-top: 3px;
		margin-bottom: 3px;
	}

	body::-webkit-scrollbar-thumb {
		background: #f1f1f1;
		border-radius: 2px;
		border: 3px solid transparent;
		background-clip: padding-box;
	}

	h1 {
		font-family: diabloheavy;
	}

	h2 {
		font-family: diablolight;
	}
	
	/* Main content wrapper */
	#main {
		position: relative;
		transition: margin-left .5s;
		padding: 0px 10px;
	}


	
	/* Main menu button */
	.menu {
		display: inline-block;
		margin: 20px 0 0 10px;
		cursor: pointer;
	}

	.menu-bar1, .menu-bar3 {
		width: 35px;
		height: 5px;
		background-color: #f1f1f1;
		transition: 0.4s;
	}

	.menu-bar2 {
		width: 35px;
		height: 5px;
		background-color: #f1f1f1;
		margin: 6px 0;
		transition: 0.4s;
	}

	.menu-open .menu-bar1 {
		transform: translate(0, 11px) rotate(-45deg);
	}

	.menu-open .menu-bar2 {opacity: 0;}

	.menu-open .menu-bar3 {
		transform: translate(0, -11px) rotate(45deg);
	}


	
	/* Sticky navbar */
	#topnav {
		background-color: #0a0a0a;
		z-index: 1;
		pointer-events: auto; /* used to prevent interactions with the drag and drop grids */
		clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* Clip to a rectangle - used to prevent interactions with the drag and drop grids */
	}

	.sticky {
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0;
		width: 100%;
	}

	#topnav.stash {
	min-height: 185px;
	}

	#topnav .links {
		display: inline-block;
		color: #f1f1f1;
		margin: 0.5em 0.3em 0.2em 0.3em;
		font-family: diablolight;
		font-weight: bold;
		font-size: clamp(30px, 1.5em, 40px);
		text-decoration: none;
		cursor: pointer;
	}
	
	#topnav .links:hover {
		color: #f1f1f1cc;
		transition: 0.3s;
	}

	#topnav .active {
		color: #b7b7ef;
	}

	#topnav .active:hover {
		color: #b7b7efcc;
		transition: 0.3s;
	}

	.topnav-center {
		display: block;
		text-align: center;
	}

	.topnav-left {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.topnav-search {
		padding-bottom: .5em;
		text-align: center;
		color: #818181;
	}



	/* The side navigation menu */
	.sidenav {
		height: 100%; /* 100% Full-height */
		width: 0; /* 0 width - change this with JavaScript */
		position: fixed; /* Stay in place */
		z-index: 1; /* Stay on top */
		top: 0; /* Stay at the top */
		left: 0;
		background-color: #141414; /* Black*/
		overflow-x: hidden; /* Disable horizontal scroll */ 
		padding-top: 20px; /* Place content 20px from the top */
		transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}
	
	.sidenav .login {
		display: block;
		position: relative;
		text-align: center;
	}
	
	.sidenav .new-items-count {
		display: none;
		text-align: center;
		font-family: diablolight;
		font-size: 120px;
		background-color: #0a0a0a;
		color: transparent;
		text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
		filter: brightness(3);
	}

	.sidenav .new-items-header {
		display: block;
		text-align: center;
		font-family: diablolight;
		font-weight: 700;
		font-size: 30px;
		text-shadow: 1px 1px 10px #0a0a0a;
		padding-bottom: 5px;
	}

	.sidenav .new-items {
		display: block;
		position: relative;
		text-align: center;
		overflow-y: auto;
		height: calc(100vh - 400px);
	}
	
	.sidenav .new-items::-webkit-scrollbar {
		width: 8px;
	}

	.sidenav .new-items::-webkit-scrollbar-track {
		background: rgba(255,255,255,0.1);
		border-radius: 3px;
		margin-top: 3px;
		margin-bottom: 3px;
	}

	.sidenav .new-items::-webkit-scrollbar-thumb {
		background: #f1f1f1;
		border-radius: 2px;
		border: 3px solid transparent;
		background-clip: padding-box;
	}

	.sidenav .footer {
		display: block;
		position: absolute;
		text-align: center;
		width: 250px;
		height: 220px;
		bottom: 0px;
		left: 0px;
		/* background-image: url(../../images/stash_footer_full.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom; */
		background-color: #141414;
		color: #818181;
		font-size: 14px;
	}
 
	.sidenav .avatar {
		position: relative;
	}

	.sidenav .avatar-image {
		width: 100px;
		height: 100px;
		border: 2px solid 212121;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
		-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
		box-shadow: 0 0 8px rgba(0, 0, 0, .8);
		transition: .5s ease;
		backface-visibility: hidden;
	}

	.sidenav .avatar-logout {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
		font-family: diablolight;
		font-size: 15px;
		font-weight: 900;
		color: #f1f1f1;
	}

	.sidenav .avatar:hover .avatar-image {
		opacity: 0.3;
	}
	  
	.sidenav .avatar:hover .avatar-logout {
		opacity: 1;
	}



	/* Button style */
	button {
		-webkit-appearance: none; 
		-moz-appearance: none;
		appearance: none;
		-webkit-padding: 3px;
		padding: 3px .5em 3px .5em;
		border-width: 2px;
		border-radius: 5px;
		border-color: transparent;
		border-style: inset;
		outline: 0;
		margin: 0.3em 0.1em;
		text-align: center;
		width: auto;
		transition: background-color 0.2s ease-in-out;
		background-color: #212121;
		color: #f1f1f1;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		font-size: clamp(14px, 1.5em, 18px);
	}

	button:hover {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow: 0px 0px 5px  #fffc;
	}



	/* Add item / Stash query form */
	.form {
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
	}

	label {
		text-align: right;
	}

	input {
		-webkit-appearance: none; 
		-moz-appearance: none;
		appearance: none;
		-webkit-padding: 3px;
		padding: 3px;
		margin: 0.3em 0.1em;
		border-width: 2px;
		border-radius: 5px;
		border-color: transparent;
		border-style: inset;
		outline: 0;
		font-size: clamp(14px, 1.5em, 18px);
	}

	input:focus {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow:0px 0px 5px #fffc;
	}

	input:hover {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow: 0px 0px 5px  #fffc;
	}

	input, textarea {
		background-color: #212121;
		color: #f1f1f1;
		font-size: clamp(14px, 1.5em, 18px);
	}

	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type=number] {
		-moz-appearance: textfield;
		appearance: textfield;
	}

	select {
		display: inline-block;
		position: relative;
		-webkit-appearance: none; 
		-moz-appearance: none;
		appearance: none;
		-webkit-padding: 3px;
		padding: 3px;
		border-width: 2px;
		border-radius: 5px;
		border-color: transparent;
		border-style: inset;
		outline: 0;
		margin: 0.3em 0.1em;
		background-color: #212121;
		color: #f1f1f1;
		font-size: clamp(14px, 1.5em, 18px);
	}

	select:focus {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow:0px 0px 5px #fffc;
	}

	select:hover {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow: 0px 0px 5px  #fffc;
	}

	option {
		background-color: #212121; 
		color: #818181;
		font-size: clamp(14px, 1.5em, 18px);
	}

	input[type="button"] {
		-webkit-appearance: none; 
		-moz-appearance: none;
		appearance: none;
		-webkit-padding: 3px;
		padding: 3px .5em 3px .5em;
		border-width: 2px;
		border-radius: 5px;
		border-color: transparent;
		border-style: inset;
		outline: 0;
		margin: 0.3em 0.1em;
		text-align: center;
		width: auto;
		transition: background-color 0.2s ease-in-out;
		background-color: #212121;
		color: #f1f1f1;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		font-size: clamp(14px, 1.5em, 18px);
	}

	input[type="button"]:hover {
		-webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow: 0px 0px 5px #fffc;
	}
	
	
	
	/* Styling specific to the add item container in sidenav (Stash 0) */
	.stash-slot-new {
		margin: 3px;
		width: 100px !important;
	}
	
	.stash-slot-list {
		display: inline-block;
		position: relative;
		vertical-align: top;
		background-color: #21212126;
		border-radius: 5px;
		border: 2px solid #0a0a0a;
		width: calc(256px - 4px) !important;
		max-width: none !important;
	}

	.item-name-new,
	.item-detail-new,
	.item-type-new,
	.remove-item-button-new	{
		font-size: 10px !important;
	}

	.item-value-new	{
		font-size: 16px !important;
	}



	/* Stash tab navigation */
	.tabs {
		display: block;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		height: 60px;
	}

	.tab1-inactive,
	.tab2-inactive,
	.tab3-inactive,
	.tab4-inactive {
		display: inline-block;
		position: relative;
		width: 69px;
		height: 60px;
		background: url("../../images/stash_tab_inactive.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position-y: bottom;
		margin-right: 5px;
	}

	.tab1-active,
	.tab2-active,
	.tab3-active,
	.tab4-active {
		display: inline-block;
		position: relative;
		width: 69px;
		height: 60px;
		background: url("../../images/stash_tab_active.png");
		background-size: 100% 100%;
		background-position-y: bottom;
		margin-right: 5px;
	}

	.tab5-inactive {
		display: inline-block;
		position: relative;
		width: 69px;
		height: 60px;
		background: url("../../images/list_tab_inactive.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position-y: bottom;
		margin-right: 5px;
	}

	.tab5-active {
		display: inline-block;
		position: relative;
		width: 69px;
		height: 60px;
		background: url("../../images/list_tab_active.png");
		background-size: 100% 100%;
		background-position-y: bottom;
		margin-right: 5px;
	}




	/* Stash styling */
	.stash-header {
		display: block;
		/* max-width: 1284px; */
		max-width: 1604px; /* New style */
		height: 15px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		background: url("../../images/stash_header.png");
		background-size: 100% 100%;
	}

	.stash-grid {
		position: relative;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: repeat(5, 1fr);
		gap: 1px;
		/* max-width: 1280px; */
		aspect-ratio: 1 / .594; /* new style */
		max-width: 1600px; /* new style */
		margin-left: auto;
		margin-right: auto;
		background: url("../../images/stash_grid.png");
		background-size: 100% 100%;
		padding: 1px;
	}

	.stash-slot {
		display: inline-block;
		position: relative;
		vertical-align: top;
		/* background-color: #21212126; */
		border-radius: 5px;
		border: 2px solid transparent;
		min-height: 70px;
		min-width: 70px;
		/* max-width: 123px; */
		aspect-ratio: 1 / 1.2;
	}

	.stash-slot:hover {
		/* -webkit-box-shadow: 0px 0px 5px  #fffc;
		box-shadow: 0px 0px 5px  #fffc;; */
		background-image: url("../../images/item_hover.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.stash-slot.drop {
		border: 2px solid #5eba7d;
	}

	.stash-item {
		display: flex;
		flex-direction: column;
		position: relative;
		overflow-x: hidden;
		text-align: center;
		/* background: linear-gradient(to bottom, #141414, #212121); */
		/* border: 2px solid #161616; */
		/* border-radius: 3px; */
		/* width: -moz-calc(100% - 4px);
		width: -webkit-calc(100% - 4px);
		width: calc(100% - 4px); */
		width: 100%;
		aspect-ratio: 1 / 1.2;
		touch-action: none;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: grab;
		opacity: var(--stash-item-opacity);
	}

	.stash-item.legendary {
		border-image-source: url('../../images/item-legendary.png');
		border-image-slice: 1 1 fill;
	}

	.stash-item.unique {
		border-image-source: url('../../images/item-unique.png');
		border-image-slice: 1 1 fill;
	}

	.stash-item-overlay:hover,
	.stash-item-overlay:active {
		width: 100%;
		height: 100%;
		background-image: url("../../images/item_hover.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.stash-item.match {
		/* border: 2px solid #d41a1459; */
		opacity: 1;
	}

	.item-name {
		min-height: 2.2em;
		padding: 1.1em .2em 0em;
		font-weight: 900;
		font-family: diablolight;
		text-shadow: 1px 1px 10px #0a0a0a;
		font-size: var(--itemName-font-size);
	}

	.item-detail {
		display: block;
		position: relative;
		font-size: var(--itemDetail-font-size);
		text-shadow: 1px 1px 10px #0a0a0a;
		/* overflow-y: auto; */
		padding: 0.2em;
		margin-bottom: 2em;
		color:#fff9;
	}

	/* div.item-detail::-webkit-scrollbar {
		width: 8px;
	}

	div.item-detail::-webkit-scrollbar-track {
		background: rgba(255,255,255,0.1);
		border-radius: 3px;
		margin-top: 3px;
		margin-bottom: 3px;
	}

	div.item-detail::-webkit-scrollbar-thumb {
		background: #f1f1f1;
		border-radius: 2px;
		border: 3px solid transparent;
		background-clip: padding-box;
	} */

	.item-value {
		padding: 0.2em 0.2em 0.3em 0.2em;
		font-size: var(--itemValue-font-size);
		font-weight: 500;
		text-shadow: 1px 1px 10px #0a0a0a;
		color: #b7b7ef;
	}

	.item-value-seperator {
		color: rgb(255,255,255,0.2);
	}
	
	.item-type {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0.5em 0.2em;
		font-size: var(--itemType-font-size);
		font-family: diablolight;
		text-shadow: 1px 1px 10px #0a0a0a;
	}



	/* Item colorization */
	.legendary {
		color: #f8930a;
	}

	.unique {
		color: #f7c99c;
	}

	.bonus-value {
		color: #b7b7ef;
	}

	.white {
		color: #f1f1f1;
	}


	/* Prized Possessions */
	.stash-table {
		position: relative;
		display: block;
		/* max-width: 1280px; */
		max-width: 1600px; /* New style */
		margin-left: auto;
		margin-right: auto;
	}

	.stash-table table {
		position: relative;
		border-collapse: separate;
		border-spacing: 0 5px;
		margin-top: -5px;
	}

	.stash-table-sticky {
		position: sticky;
		top: 185px;
	}

	.stash-table a {
		color: #818181;
		text-decoration: none;
	}

	.stash-table a:hover {
		color: #f1f1f1;
		cursor: pointer;
	}

	.stash-table th {
		background: linear-gradient(to bottom, #141414, #212121);
		border-bottom: 1px solid #f8930a !important;
		color: #f1f1f1 !important;
	}

	.stash-table th, td {
		text-align: left;
		padding: 10px;
		border: solid 1px transparent;
		border-style: solid none;
		color: #818181;
	}

	td:first-child {
		border-left-style: solid;
		border-top-left-radius: 5px; 
		border-bottom-left-radius: 5px;
	}
	td:last-child {
		border-right-style: solid;
		border-bottom-right-radius: 5px; 
		border-top-right-radius: 5px; 
	}

	th:first-child {
		border-left-style: solid;
		border-top-left-radius: 5px; 
		border-bottom-left-radius: 5px;
	}

	th:last-child {
		border-right-style: solid;
		border-bottom-right-radius: 5px; 
		border-top-right-radius: 5px; 
	}

	.stash-table tr:nth-child(even) {
		background-color: #141414;
	}

	.stash-table tr:nth-child(odd) {
		background-color: #212121;
	}

	tr:first-child td:first-child { border-top-left-radius: 5px; }
	tr:first-child td:last-child { border-top-right-radius: 5px; }
	
	tr:last-child td:first-child { border-bottom-left-radius: 5px; }
	tr:last-child td:last-child { border-bottom-right-radius: 5px; }
	
	tr:first-child td { border-top-style: solid; }
	tr td:first-child { border-left-style: solid; }



	/* Remove item button */
	.remove-item-button {
		Position: absolute;
		right: 0px;  
		padding: 0.1em 0.2em 0.1em 0.2em;
		margin: 0.1em 0.1em 0em 0em;
		text-align: center;
		font-family: diablolight;
		font-weight: bold;
		font-size: clamp(9px, .9vi, 14px);
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.0);
		background: rgba(255, 255, 255, 0.1);
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;
		color: #f1f1f1;
		line-height: 1em;
		height: 1em;
	}

	.remove-item-button:hover {
		background-color: #d41a14;
		color: #fff;
		
	}
	
	
	
	/* Confirmation modal  */
	.confirmation-modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.confirmation-modal-content {
		background-color: #121212;
		padding: 20px;
		border-radius: 5px;
		border: 1px solid #d41a14;
		text-align: center;
	}

	.confirmation-modal-buttons {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}

	.confirmation-modal-buttons button {
		margin: 0 10px;
	}
	
	
	
	/* Message banner for AJAX call results */
	#error-message-container {
		position: relative;
		max-width: 1272px;
		height: 25px;
		margin: .5em auto .5em auto;
		padding: 5px;
		background-color: #d41a1423;
		border-radius: 5px;
		border: 1px solid #d41a14;
	  }
	  
	#error-message-content {
		font-weight: bold;
	}

	#success-message-container {
		position: relative;
		max-width: 1272px;
		height: 25px;
		margin: .5em auto .5em auto;
		padding: 5px;
		background-color: #5eba7d49;
		border-radius: 5px;
		border: 1px solid #5eba7d;
	}
	  
	#success-message-content {
		font-weight: bold;
	}
	  
	#message-close-button {
		position: absolute;
		top: -4px;
		right: 0px;
	}



	/* Text decorations */
	.hover-underline {
		position: relative;
		color: #f1f1f1;
		text-decoration: none;
	}

	.hover-underline:hover {
		color: #f1f1f1;
	}

	.hover-underline::before {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		bottom: 0;
		left: 0;
		background-color: #f1f1f1;
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.hover-underline:hover::before {
		transform: scaleX(1);
	}
	
	
	
	/* Add a fade in effect to an element */
	.fade-in {
		-webkit-animation: fadein .25s; /* Safari, Chrome and Opera v12.1 or higher */
		-moz-animation: fadein .25s; /* Firefox v16 or lower */
		-ms-animation: fadein .25s; /* Internet Explorer */
		-o-animation: fadein .25s; /* Opera v12.1 or lower */
		animation: fadein .25s;
	}

	/* AFade effects */
	@keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Firefox v16 or lower */
	@-moz-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Safari, Chrome and Opera v12.1 or higher */
	@-webkit-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}



	/* Add a fade out effect to an element */
	.fade-out {
		-webkit-animation: fadeout .25s; /* Safari, Chrome and Opera v12.1 or higher */
		-moz-animation: fadeout .25s; /* Firefox v16 or lower */
		-ms-animation: fadeout .25s; /* Internet Explorer */
		-o-animation: fadeout .25s; /* Opera v12.1 or lower */
		animation: fadeout .25s;
	}

	/* AFade effects */
	@keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

	/* Firefox v16 or lower */
	@-moz-keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

	/* Safari, Chrome and Opera v12.1 or higher */
	@-webkit-keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadeout {
		from { opacity: 1; }
		to   { opacity: 0; }
	}

	
	/* Manage light mode theme
	@media screen and (prefers-color-scheme: light) {
		body {
		background-color: f1f1f1;
		color: 0a0a0a;
		}

		.stash-slot {
			background-color: #f2f2f2;
			border: 2px solid #f2f2f2;
			border-radius: 5px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			cursor: grab;
			transition: transform 0.2s ease-in-out;
			display: inline-block;
			min-height: 75px;
			min-width: 75px;
		}

	} */