#nc-wrapper>.nc-shortcuts.fake {
    /* top: unset;
    top: calc(-30 * var(--px-to-vh)/ var(--scale)); */
    top: 89.8vh;
    transform: translateY(50%);
    pointer-events: none;
    right: -5vh;
    opacity: 1;
    scale: 0.8;
}





#nc-inventory-header {
    position: relative;
    width: calc(var(--baseWidth) * var(--px-to-vh));
    height: var(--headerHeight);
    border-radius: calc(15 * var(--borderRadiusScale) * var(--px-to-vh)) calc(15 * var(--borderRadiusScale) * var(--px-to-vh)) 0 0;
    background-color:transparent;
    z-index: 3;
    width: 36vh;
    top: 8.2vh;
    right: -40vh;
}

#nc-wrapper>#nc-inventory {
    opacity: 0;
    transition: all calc(0.3s * var(--transitionFactor));
    z-index: 3;
    pointer-events: none;
    background: url('/html/img/assets/bg.png');
    background-position: center;
    background-size: cover;
    width: 110.76vh;
    height: 73.2vh;
    position: relative;
	left: 5vh;
    top: -8vh;
}

#nc-wrapper>#nc-inventory>#nc-inventory-content>.nc-main {
    padding: calc(10 * var(--px-to-vh)) calc(10 * var(--px-to-vh)) 0;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: 100%;
    top: 8vh;
	left: 10vh;
    position: relative;
}
#nc-wrapper>#nc-inventory>#nc-inventory-content {
    position: relative;
    width: calc(var(--baseWidth) * var(--px-to-vh));
    height: calc((var(--baseHeight) * var(--px-to-vh)) - var(--headerHeight) - var(--footerHeight));
    background-color: transparent;
}
#nc-wrapper>#nc-inventory>#nc-inventory-content>.nc-main>.inventory {
    position: relative;
    padding: calc(25 * var(--px-to-vh));
    margin: calc(10 * var(--px-to-vh));
    display: flex;
    justify-content: flex-start;
    width: 50%;
    border-radius: calc(50 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: rgba(var(--contentDataColor), 0.2);
    overflow: hidden;
    transition: opacity calc(0.3s * var(--transitionFactor));
}

#nc-inventory-header>.nc-filter-choices>.nc-filter-indicator {
    position: absolute;
    top: calc(-1 * var(--indicatorTopHeight));
    width: calc((var(--baseHeight) / 10) * var(--px-to-vh));
    height: var(--indicatorTopHeight);
    transform: translateX(calc(-50% + (var(--indicatorWidth) / 2) + (var(--filterIndex) * var(--indicatorWidth))));
    overflow: hidden;
    opacity: 0;
    transition: transform calc(0.3s * var(--transitionFactor));
}

#nc-wrapper>#nc-inventory>#nc-inventory-footer {
    position: relative;
    padding: 0 calc(20 * var(--px-to-vh)) calc(10 * var(--px-to-vh));
    width: calc(var(--baseWidth) * var(--px-to-vh));
    height: var(--footerHeight);
    border-radius: 0 0 calc(15 * var(--borderRadiusScale) * var(--px-to-vh)) calc(15 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: transparent;
    z-index: 3;
    width: 50vh;
    left: 11vh;
    top: 6.2vh;
}


#nc-wrapper > #nc-inventory > #nc-inventory-content > .nc-main > .inventory {
    position: relative;
    padding: calc(25 * var(--px-to-vh));
    margin: calc(10 * var(--px-to-vh));
    display: flex;
    justify-content: flex-start;
    width: 50%;
	
    border-radius: calc(00 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: transparent;
    overflow: hidden;
    transition: opacity calc(0.3s * var(--transitionFactor));
}

#nc-wrapper>#nc-inventory>#nc-inventory-footer>.footer>.nc-weight-info>.text-info::before {
    content: "";
    position: absolute;
    background-color: #16151531;
    width: 0.25vh;
    height: 41vh;
    bottom: 2.5vh;
    border-radius: 3vh;
}


/* .nc-item.ui-draggable-dragging>.item-data, */
#nc-wrapper>#nc-inventory>#nc-inventory-content>.nc-main>.inventory>.nc-items>.nc-item>.item-data {
    position: absolute;
    width: calc(100% - (10 * var(--px-to-vh)));
    height: calc(100% - (17 * var(--px-to-vh)));
    display: flex;
    justify-content: center;
    border-radius: calc(0 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: rgba(0, 0, 0, var(--defaultItemBGOpacity));
    background-repeat: no-repeat;
    background-size: cover;
    transition: all calc(0.1s * var(--transitionFactor));
    overflow: hidden;
    box-shadow: 0 0 0 0.15vh #CE9FFC, 0 0 0.5vh 0vh #7367F0;
}

#nc-wrapper>#nc-inventory>#nc-inventory-content>.nc-main>.inventory>.nc-items>.nc-item>.item-data::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: calc(3 * var(--px-to-vh)) transparent solid;
    border-radius: calc(20 * var(--borderRadiusScale) * var(--px-to-vh));
}

#nc-wrapper>#nc-inventory>#nc-inventory-content>.nc-main>.inventory>.nc-items>.nc-item>.item-data::after {
    content: var(--label);
    bottom: calc(var(--baseItemHeight) * .03);
    text-align: center;
  
    padding: 0.2vh 0vh;
    width: 6vh;
    border-radius: 1vh;
    white-space: nowrap;
    overflow: hidden;
}




#nc-inventory-header>.nc-title>.nc-search {
    --searchDimension: calc(var(--headerHeight) * 0.68);
    position: relative;
    margin-left: calc(15 * var(--px-to-vh));
    margin-top: calc(23 * var(--px-to-vh));
    width: 13vh;
    height: var(--searchDimension);
    transition: width calc(.2s * var(--transitionFactor));
    transition-delay: .1s;
    left: -20vh;
    top: 0.7vh;
}

#nc-inventory-header>.nc-title>.nc-search>.nc-search-box {
    position: relative;
    height: var(--searchDimension);
    width: 13vh;
    display: flex;
    border-radius: calc(var(--searchDimension)/ 2);
    background-color: rgba(var(--contentDataColor),0.5);
}
#nc-inventory-header>.nc-title>.nc-search>.nc-search-box>.nc-search-icon {
    position: absolute;
    left: calc(var(--searchDimension) / 2);
    width: 13vh;
    height: var(--searchDimension);
    font-size: calc(var(--searchDimension) * 0.43 / 0.68);
    transform: translateX(-50%);
    transition: transform calc(0.2s * var(--transitionFactor)), font-size calc(0.2s * var(--transitionFactor));
    cursor: pointer;
}
#nc-inventory-header>.nc-title>.nc-search>.nc-search-box>.nc-search-icon>iconify-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
    text-shadow: 0 0  calc(10 * var(--px-to-vh)) #fff;
	transform: translate(-50%,-50%);
	pointer-events: none;
}

#nc-inventory-header>.nc-title>.nc-search>.nc-search-box>input#search {
	padding: 0 calc(var(--searchDimension)/ 2) 0 calc(var(--searchDimension) * 1.05);
	margin: 0;
    width: 13vh;
	color: #fff;
	font-family: 'Noto Sans Thai',sans-serif;
	font-size: calc(var(--searchDimension) * .35 / .68);
	font-weight: 400;
	border: none;
	outline: 0;
	background-color: transparent;
	opacity: 0;
	transition: opacity calc(.2s * var(--transitionFactor));
	pointer-events: none;
}
#nc-inventory-header>.nc-title>.nc-search>.nc-search-box>input#search:focus::placeholder {
	opacity: 1;
}

#nc-inventory-header>.nc-title>.nc-search>.nc-search-box>input#search::-webkit-input-placeholder {
	color: #fff;
}
 


/* หัวข้อ จัดหมวดหมู่ */
#nc-inventory-header>.nc-filter-choices>.nc-filter-indicator {
	position: absolute;
	top: calc(-1 * var(--indicatorTopHeight));
	width: calc((var(--baseHeight)/ 10) * var(--px-to-vh));
	height: var(--indicatorTopHeight);
	transform: translateX(calc(-50% + (var(--indicatorWidth)/ 2) + (var(--filterIndex) * var(--indicatorWidth))));
	overflow: hidden;
	opacity: 0;
	transition: transform calc(.3s * var(--transitionFactor));
    border-radius: calc(15 * var(--borderRadiusScale) * var(--px-to-vh));
}
#nc-inventory-header>.nc-filter-choices>.filter.active>iconify-icon {
	font-size: calc(var(--headerHeight) * .7);
	transform: translate(-50%,calc(-50% + (-1 * var(--indicatorTopHeight)/ 4)));
	opacity: 1;
    transition: .5s;
    border-bottom: transparent;
}

#nc-inventory-header>.nc-filter-choices {
    transform: scale(.85);
    position: absolute;
    bottom: calc(-20 * var(--px-to-vh));
    right: calc(-20 * var(--px-to-vh));
    height: 97%;
    display: flex;
    background-color: rgba(var(--contentDataColor),0.5);
    padding: 0 calc(5 * var(--px-to-vh));
    border-radius: calc(15 * var(--borderRadiusScale) * var(--px-to-vh));
}

#nc-inventory-header > .nc-filter-choices > .filter {
    position: relative;
    display: flex;
    margin: calc(10 * var(--px-to-vh));
    width: calc(60 * var(--px-to-vh));
	padding: 0 calc(5 * var(--px-to-vh));
    justify-content: space-between;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#nc-inventory-header > .nc-filter-choices > .filter:hover {
    cursor: pointer;
}
#nc-inventory-header>.nc-filter-choices>.filter:hover::before {
    opacity: 0;
}
#nc-inventory-header > .nc-filter-choices > .filter::before {
    content: var(--label);
    position: absolute;
    padding: unset;
    top: calc(-2 * var(--px-to-vh));
    left: 50%;
    height: calc(30 * var(--px-to-vh));
    line-height: calc(30 * var(--px-to-vh));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--headerHeight) * 0.35);
    white-space: nowrap;
    border-radius: unset;
    background-color: transparent;
    transform: translateX(-50%);
    transition: all calc(0.5s * var(--transitionFactor));
    opacity: 1;
    z-index: 4;
}

#nc-inventory-header > .nc-filter-choices > .filter.active::before {
    transition: all .5s;
    background-color: rgba(var(--baseColor),.85);
    box-shadow: 0 0 calc(10 * var(--px-to-vh)) 0 rgba(var(--baseColor),.85);
    padding: 0 calc(10 * var(--px-to-vh)) ;
    border-radius:  calc(30 * var(--px-to-vh));
}

 
#nc-inventory-header>.nc-filter-choices>.filter>* {
    position: absolute;
    top: -78%;
    left: 50%;
    font-size: calc(var(--headerHeight) * 0.4);
    transform: translate(-50%, -50%);
    opacity: .6;
    transition: all calc(0.35s * var(--transitionFactor));
}



#nc-wrapper > #nc-inventory > #nc-inventory-footer > .footer > .info > .nc-weight-bar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(10 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: rgba(var(--contentDataColor), 0.5);
    overflow: hidden;
    z-index: 0;
}














#nc-wrapper > .nc-shortcuts.real > .shortcut {
    width: calc(100% / var(--shortcuts));
    height: 100%;
}
#nc-wrapper > .nc-shortcuts.real {
    --shortcutSize: calc(max(min(var(--defaultShortcutSize), 120), 100) * var(--px-to-vh));
    top: unset;
    right: unset;
    left: 64.2vh;
    bottom: calc(220 * var(--px-to-vh) / var(--scale));
    flex-direction: row;
    width: calc(var(--shortcutSize) * var(--shortcuts));
    height: var(--shortcutSize);
    padding: 0.5vh 0.5vh;
    transform: translateY(30%);
    border-radius: 1.5vh;
   background-image: linear-gradient(180deg, rgb(158, 105, 255) 0%, rgb(158, 105, 255) 25%, rgb(118, 70, 196) 75%, rgb(118, 70, 196) 100%);
/*     box-shadow: 0 0 0 0.2vh #05112e;
    background-image: linear-gradient( 135deg, #ffffff 10%, #ff3b73 100%);
} */

#nc-wrapper > .nc-shortcuts.fake {
    --shortcutSize: calc(max(min(var(--defaultShortcutSize), 120), 100) * var(--px-to-vh));
    top: unset;
    bottom: calc(150 * var(--px-to-vh) / var(--scale));
    width: calc(var(--shortcutSize) * var(--shortcuts));
    height: var(--shortcutSize);
    pointer-events: none;
    padding: 0.5vh 0.5vh;
    transform: translateY(30%);
    border-radius: 1.5vh;
/*     box-shadow: 0 0 0 0.2vh #05112e;
    background-image: linear-gradient( 135deg, #ffffff 10%, #ff3b73 100%); */
}

#nc-wrapper > .nc-shortcuts > .shortcut > .shortcut-data {
    position: relative;
    display: flex;
    width: 95%;
    height: 95%;
    border-radius: calc(10 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: rgba(var(--contentColor), 0.7);
    transition: all calc(0.1s * var(--transitionFactor));
    box-shadow: 0 0 0 0.15vh #4c4848;
}

#nc-wrapper > .nc-shortcuts > .shortcut::after {
    content: var(--index);
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--shortcutSize) * 0.25);
    transform: translate(calc((-0) * var(--shortcutSize) * 0.022), calc((0) * var(--shortcutSize) * 0.005));
    z-index: 2;
    opacity: .2;
}

#nc-wrapper > .nc-shortcuts > .shortcut::before, #nc-wrapper > .nc-shortcuts > .shortcut::after {
    position: absolute;
    top: unset;
    left: unset;
    width: calc(100% * 0.28);
    height: calc(100% * 0.28);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#nc-wrapper > .nc-shortcuts > .shortcut::before {
    content: '';
    border-radius: unset;
    background-color: transparent;
    box-shadow: unset;
    z-index: 1;
}

 
 
#nc-wrapper > #nc-trash {
    /* bottom: 13.5vh; */
    /* position: absolute; */
    padding: calc(12 * var(--px-to-vh));
    left: unset;
    right: 34.5vh;
    width: 16vh;
    height: 48.85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(50 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: transparent;
    transition: background-color calc(0.15s * var(--transitionFactor));
    opacity: 0;
    pointer-events: none;
    /* clip-path: polygon(0 0, 100% 0, 100% 0%, 100% 80%, 95% 100%, 30% 100%, 0 100%, 0% 30%); */
}

#nc-wrapper>#nc-trash>.trash {
    width: 100%;
    height: 100%;
    border-radius: calc(23 * var(--borderRadiusScale) * var(--px-to-vh));
    background-color: rgba(var(--contentDataColor), .5);
    /* background: linear-gradient(185deg, #8d4e55 0%, #7b111d 100%); */
    /* opacity: .8; */
}

#nc-wrapper > #nc-trash > .icon {
    position: absolute;
    color: rgb(255, 255, 255);
    font-size: 4vh;
    opacity: .45;
    transition: opacity calc(0.15s * var(--transitionFactor));
    line-height: 1vh;
}