#view-container > .view.inv {  
    xborder:1px solid red;
    xposition:relative;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    justify-content: start;
    xheight:100%;
}


#view-container > .view.inv > #gold-container {
    xborder:1px solid red;
    height:5%;
    width:100%;
    xpadding: 10px 20px 5px 20px;
    padding-right:40px;
    display:flex;
    justify-content: end;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    xz-index:1;

    border-style: solid;
	border-image-source: url('../img/border_simple.png');
	border-image-slice: 50;
	border-image-width: 1em;
	border-image-outset: 1;
	border-image-repeat: stretch;
    background-color:rgb(24, 24, 31);
    xpadding:10px;
}

#gold-container > .image-container {
    xborder:1px solid red;
    aspect-ratio: 1/1;
    height:60%;
    margin-left:5px;
    display:flex;
    align-items: center;
    justify-content: center;
}

#gold-container > .image-container > .image {
    xborder:1px solid red;
    aspect-ratio: 1/1;
    height:100%;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

#gold-container > .gold-amount-container {
    xborder:1px solid red;
    display:flex;
    align-items: center;
}

#gold-container > .gold-amount-container > .gold-amount {
    xborder:1px solid red;
    font-family:consolas, monospace;
    color:grey;
    color: #ffc400;
}

#view-container > .view.inv > #gold-container > .gold-anim-container {
    xborder:1px solid red;
    display:flex;
    align-items: center;
    opacity:0;
    min-width:50px;
}

#view-container > .view.inv > #gold-container > .gold-anim-container > .gold-anim {
    xborder:1px solid red;
    font-family:consolas, monospace;
    color: #ffc400;
    padding-left: 10px;
}


#item-viewer-container {
    width:100%;
    height:35%;
    color:grey;
    border-style: solid;
	border-image-source: url('../img/border.png');
	border-image-slice: 150;
	border-image-width: 3em 0em;
	border-image-outset: 0;
	border-image-repeat: round;
    xborder:1px solid red;
    overflow-y: auto;
}

#item-viewer {
    xborder:1px solid red;
    width:100%;
    xflex:1;
    height:100%;
    xoverflow-y:auto;
    color:grey;
    display:flex;
    flex-direction: row;
    xposition: relative;
}

#item-viewer > .details {
    xborder:1px solid cyan;
    flex-direction:column;
    justify-content: start;
    background-color: rgba(0, 0, 0, 0.6);
    width:70%;
    height:100%;
    box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.8);
    overflow-y:scroll;
}

#item-viewer > .details > .name {
    xborder:1px solid red;
    background-color:rgba(0, 0, 0, 0.3);
    width:100%;
    padding: 0px 5px 0px 20px;
    color:rgb(236, 187, 139);
    height:3em;
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}

#item-viewer > .details > .type-container {
    xborder:1px solid red;
    padding: 5px 10px 5px 20px;
    display:flex;
}

#item-viewer > .details > .type-container div:last-child {
    margin-left: auto;
}

#item-viewer > .details > .type-container > .quality-title {
    xborder:1px solid red;
}

#item-viewer > .details > .type-container > .type {
    xborder:1px solid red;
    margin-left:5px;
}



#item-viewer > .details > .type-container > .value-container {
    xborder:1px solid red;
    display:flex;
    font-family: consolas, monospace;
}

#item-viewer > .details > .type-container > .value-container > .image-container {
    xborder:1px solid red;
}

#item-viewer > .details > .type-container > .value-container > .image-container > .image {
    aspect-ratio: 1/1;
    height:1em;
    margin-left:5px;
}

#item-viewer > .details > .type-container > .value-container > .value {
    xborder:1px solid red;
}

#item-viewer > .details > .effects-container{
    xborder:1px solid red;
    padding: 0px 10px 5px 20px;
}


#item-viewer > .details > .effects-container > .effect {
    xborder:1px solid red;
    color: #6969ff;
}

#item-viewer > .details > .flavor-container {
    xborder:1px solid red;
    color: #a79a6d;
    padding:10px 10px 10px 20px;
    font-size:0.9em;
    font-family: "Formal";
}



#item-viewer > .image-container {
    border:5px solid rgb(44, 44, 44);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset rgba(0, 0, 0, 0.5) 0px 0px 5px 5px, rgba(0, 0, 0, 0.5) 0px 0px 5px 2px;
    margin-right:5px;
    aspect-ratio:1/1;
    position:relative;
    width:30%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;

    border-style: solid;
	border-image-source: url('../img/border_simple.png');
	border-image-slice: 150;
	border-image-width: 5em;
	border-image-outset: 0;
	border-image-repeat: stretch;
}

#item-viewer > .image-container > .viewer-item {
    xborder:1px solid red;
    position:relative;
    aspect-ratio:1/1;
    xheight:80%;
    width: 80%;
    xwidth:50px;
    xheight:50px;
    
    xmargin-top:30%;

    display:flex;
    flex-direction:column;
    align-items: left;
    justify-content:end ;
}





.viewer-item > .outer-wrap {
	perspective: 200px; /* 800px */
	perspective-origin: 50% 100px;	
    animation:hopperItemViewer 1.5s infinite alternate ease-in-out;
    aspect-ratio:1/1;
    width:100%;
    xheight:100%;
    position:relative;
}

@keyframes hopperItemViewer {
	from { transform: translateY(0px); }
	to { transform: translateY(-3px); }
}

.viewer-item > .outer-wrap > .inner-wrap {
    xborder:1px solid lime;
	xposition: relative;
    width:100%;
    height:100%;
	transform-style: preserve-3d;
    position:relative;
    xanimation: spin 10s infinite linear;
}

.viewer-item > .outer-wrap > .inner-wrap > div {
	position:absolute;
    
    xwidth:100%;
    xheight:100%;
}



.viewer-item > .outer-wrap > .inner-wrap > .image {
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	image-rendering: crisp-edges;

    width: 100%;
	height: 100%;
    ximage-rendering: pixelated;


}

.viewer-item > .outer-wrap > .inner-wrap > .image.front { /*front */
	transform: translateZ(2px);

	xfilter: drop-shadow(0px 0px 4px rgb(57, 222, 255));
	xfilter: drop-shadow(rgba(153, 51, 255, 0.8) 0px 0px 5px);
}


.viewer-item > .outer-wrap > .inner-wrap > .image.back {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	xfilter: FlipH;
	-ms-filter: "FlipH";
	transform: translateZ(-2px) rotateY(180deg) scaleX(-1);
}




.viewer-item > .outer-wrap > .inner-wrap > .item-normal-glow-container {
    xborder:1px solid grey;
    width: 100%;
	height: 100%;
	transform: translateZ(0px);
    display: flex;
    align-items: center;
    justify-content:center ;
}

.viewer-item > .outer-wrap > .inner-wrap > .item-normal-glow-container > .item-normal-glow {
	width: 1px;
	height: 1px;
	border-radius:50%;
	xbox-shadow: 0px 0px 50px 30px rgba(0, 172, 230, 0.7);
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%); 
	filter:saturate(200%) brightness(150%) blur(3px);

    animation:enlarger 1s infinite alternate ease-in-out;
}



.viewer-item > .item-bottom-shadow-container {
    xborder:1px solid lime;
    xposition:absolute;
    margin:auto;
    width:80%;
    aspect-ratio: 1/1;
	margin-top: -30px;	
	transform: perspective(300px) rotateX(80deg) translateZ(-10px);
	xfilter:blur(5px)
}

.viewer-item > .item-bottom-shadow-container > .item-bottom-shadow {
    xborder: 5px solid lime;
	width: 100%;
	height: 100%;
	border-radius:50%;
	background-color:rgba(0,0,0,0.5);
	xmargin: auto auto;

    animation:shrinker 1.5s infinite alternate ease-in-out;
}


#inv-container {
    border:1px solid lime;
    background-color: rgba(0, 0, 0, 0.3);
 
    border-top:5px solid rgba(0,0,0,0.5);
    border-bottom:5px solid rgba(0,0,0,0.5);

    xbox-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.5), 
    inset 0px -5px 5px rgba(0, 0, 0, 0.5);

    width:100%;
    height:50%;

    color:grey;
    display:flex;
    justify-content: center;
    align-items: center;

    overflow-y: scroll;

    xscrollbar-color: red orange;
    xscrollbar-width: thin;

    border-style: solid;
	border-image-source: url('../img/border.png');
	border-image-slice: 150;
	border-image-width: 3em 0em;
	border-image-outset: 0;
	border-image-repeat: round;
}


#inv-grid {
    xborder:1px solid red;
    width:90%;
    max-width:1000px;
    height:100%;

    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    overflow-y: scroll;

}

#inv-grid > .slot {
    xborder:1px solid magenta;
    width:4em;
    height:4em;
    xposition:relative;

    display:flex;
    justify-content: center;
    align-items: center;
}

#inv-grid > .slot.selected {
    xbackground-color: #415971;
    border:1px solid white;
    border-radius:5px;
} 






#inv-grid > .slot > .item {
    xborder:1px solid red;
    position:relative;
    width:85%;
    height:85%;
    pointer-events: none;
    background-color: #0f151b;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 2px solid black;
    box-shadow: 0px 0px 0px 1px rgb(100, 100, 100), 0px 0px 0px 4px rgba(0, 0, 0, 1), inset 0px 0px 5px 5px rgba(0,0,0,0.5), /* vignette */ 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}


#inv-grid > .slot > .item.selected {
    background-color: #3e3e3e;
} 

#inv-grid > .slot > .item > img.image {
    pointer-events: none;
    width:100%;
    height:100%;
    border-radius:5px;
}

#inv-grid > .slot > .item > .status-icon {
    xborder:1px solid red;
    position:absolute;
    top:0;
    right:0;
    xbackground-color:green;
    width:20px;
    height:20px;
    background-image: url('../img/lock.png');
    background-position: center;
    background-repeat: no-repeat;
    xbackground-size: cover;
    background-size: 100% 100%;
    ximage-rendering: pixelated;
    xdisplay:none;
}

/* 
    gold bar 5%
    item viewer 20%
    inv grid 50%
    inv bar 15%

*/

#inv-bar {
    xborder:1px solid grey;
    height:10%;
    background-color: rgba(0, 0, 0, 0.5);
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}

#inv-bar > .button {
    xborder:1px solid grey;
    border-radius:5px;
    height:90%;
    min-width:50px;
    max-width:200px;
    flex:25%;
    background-color: rgba(0, 0, 0, 0.5);
    color:grey;
    padding:10px;
    text-align: center;


    display:flex;
    justify-content: center;
    align-items: center;


    background-image: url('../img/button.png');
    
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    font-size:1em;
    font-family: Georgia, serif;
	text-transform: uppercase;
    color:#ffffff;
    text-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
}

#inv-bar > .button:active {
    xbackground-color: rgba(0, 0, 0, 0.8);
    background-image: url('../img/button_dark.png');
    font-size:0.9em;
} 

.animated-gold-icon {
    xborder:1px solid grey;
    xbackground-color:green;
    position:absolute;
    width:30px;
    height:30px;
    transition: all 0.5s;
    transition-timing-function: ease-out;
    background-image: url('../img/gold_coins.png');
    background-position: center;
    background-repeat: no-repeat;
    xbackground-size: cover;
    background-size: 100% 100%;
    z-index:1;
    filter: drop-shadow(0px 0px 5px rgba(255, 221, 0, 0.9));
    will-change: transform;
}