@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Athiti';
    font-weight: 500;
}

::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border-radius: 50px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    transition: .25s all;
    background: #555;
  }

.container {
    display: none;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    width: 53.975vw;
    height: 41.225vw;
    background: url(img/main-container.png);
    background-size: cover;
}

.container .category {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50.5vw;
    height: 2vw;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 4vw auto;
}

.container .category .menu {
    flex: 0 0 auto;
    width: 7.7vw;
    height: 1.6vw;
    margin-left: .45vw;
    background: url(img/main-menubutton.png);
    background-size: cover;
    color: rgba(255, 255, 255, .3);
    font-size: .65vw;
    transition: .25s all;
    line-height: 1.6vw;
    text-transform: uppercase;
    text-align: center;
}

.container .category .menu:hover {
    transform: scale(.9);
    cursor: pointer;
}

.container .category.overflowed {
    justify-content: flex-start !important;
}


.container .category .active {
    background: url(img/main-menubuttonactive.png) !important;
    color: white !important;
}

.container .itemlabel {
    display: none;
    color: white;
    font-size: .6vw;
    text-align: center;
    position: absolute;
    top: 8.1vw;
    transform: translateX(-50%);
    left: 51.5%;
}

.container .itemname {
    display: none;
    color: rgba(255, 255, 255, .5);
    font-size: .73vw;
    text-align: center;
    position: absolute;
    top: 23.2vw;
    transform: translateX(-50%);
    left: 51.5%;
}

.container .itemimg {
    display: none;
    width: 9vw;
    position: absolute;
    transform: translateX(-50%);
    left: 52%;
    top: 11vw;
}

.container .countcontainer {
    position: absolute;
    transform: translateX(-50%);
    left: 52%;
    top: 25vw;
    display: none;
    justify-content: center;
    align-items: center;
}

.container .countcontainer .box {
    position: relative;
    width: 1.3vw;
    transition: .25sall;
    height: 1.3vw;
    background: #1a1a1a;
    text-align: center;
    color: white;
    line-height: 1.3vw;
    border: 1px solid #292929;
}

.container .countcontainer .box:hover {
    cursor: pointer;
    transform: scale(.95);
}

.container .countcontainer .add {
    left: -.8vw;
    background: #da0000 !important;
    filter: drop-shadow(0 0 0.1rem #da0000);
    border: none;
}

.container .countcontainer input[type="number"] {
    border: none;
    background: #0b0b0b;
    text-align: center;
    color: rgba(255, 255, 255, .5);
    width: 4.5vw;
}

.container .countcontainer input[type="number"]:focus {
    outline: none;
}

.container .loadcontainer {
    display: none;
    position: absolute;
    transform: translateX(-50%);
    left: 51.7%;
    top: 26.3vw;
}

.container .loadcontainer span {
    position: relative;
    transform: translateX(-50%);
    left: 37%;
    color: white;
    font-size: .5vw;
}

.container .loadcontainer .loadbarcontainer {
    width: 14vw;
    height: 1vw;
    border: 2px solid #575351;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .loadcontainer .loadbarcontainer .load {
    background: #1a1a1a;
    border: 1px solid #292929;
    width: 92%;
    height: 55%;
}

.container .loadcontainer .loadbarcontainer .load #load {
    width: 0%;
    height: 100%;
    background: #da0000;
    filter: drop-shadow(0 0 0.15rem #da0000);
}

.container .craftbutton {
    display: none;
    position: absolute;
    transform: scale(.9) translateX(-50%);
    left: 50.5%;
    top: 29vw;
    width: 15vw;
    height: 3.5vw;
    background: url(img/main-craftbutton.png);
    background-size: cover;
    transition: .25s all;
}

.container .craftbutton:hover {
    transform: scale(.8) translateX(-50%);
    cursor: pointer;
}

.container .blueprintcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 5px;
    background: #111111;
    width: 7vw;
    height: 1.3vw;
    right: .5vw;
    color: white;
    font-size: .6vw;
    top: 8.2vw;
}

.container .blueprintcontainer .blueprintitem {
    width: 95%;
    height: 70%;
    border-radius: 3px;
    border: 1px solid #292929;
    background: #1a1a1a;
}

.container .blueprintcontainer img {
    display: inline-block;
    width: .7vw;
    margin-left: .3vw;
}

.container .blueprintcontainer span {
    position: relative;
    left: .1vw;
    top: -.1vw;
}

.container .itemlistcontainer {
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    left: 3vw;
    top: 11vw;
    border-radius: 7px;
    background: rgba(17, 17, 17, .8);
    width: 13vw;
    height: 17.5vw;
}

.container .itemlistcontainer #item {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.container .itemlistcontainer .itemlist {
    background: #1a1a1a;
    color: white;
    border: 2px solid #292929;
    margin-top: .5vw;
    border-radius: 5px;
    width: 100%;
    height: 1.8vw;
    transition: .25s all;
}

.container .itemlistcontainer .itemlist:hover {
    cursor: pointer;
    transform: scale(.9);
}

.container .itemlistcontainer .itemlist .item-img {
    width: 1.2vw;
    margin-left: .7vw;
    margin-top: .15vw;
}

.container .itemlistcontainer .itemlist .decoration {
    display: none;
    position: absolute;
    margin-top: -.5vw;
    left: -.3vw;
}

.container .itemlistcontainer .itemlist .name {
    position: relative;
    top: -.7vw;
    font-size: .8vw;
}

.container .itemlistcontainer .itemlist .rate {
    font-size: .5vw;
    position: absolute;
    margin-top: .8vw;
    left: 3vw;
}

.container .itemlistcontainer .itemlist .rate .ratenum {
    color: #da0000;
}

.container .materialcontainer {
    display: none;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    right: .6vw;
    top: 11vw;
    border-radius: 7px;
    background: rgba(17, 17, 17, .8);
    width: 13vw;
    height: 17.5vw;
}

.container .materialcontainer #material {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.container .materialcontainer .materiallist {
    background: #1a1a1a;
    color: white;
    border: 2px solid #292929;
    margin-top: .5vw;
    border-radius: 5px;
    width: 100%;
    transition: .25s all;
    height: 1.8vw;
}
.container .materialcontainer .materiallist:hover {
    cursor: pointer;
    transform: scale(.9);
}

.container .materialcontainer .materialreject {
    background: #250000 !important;
    border: 2px solid #870000 !important;
}

.container .materialcontainer .weaponnotreject {
    background: #251e00 !important;
    border: 2px solid #ffd000 !important;
}

.container .materialcontainer .materialnotreject {
    background: #002502 !important;
    border: 2px solid #008707 !important;
}

.container .materialcontainer .materiallist img {
    width: 1.2vw;
    margin-left: .3vw;
    margin-top: .15vw;
}

.container .materialcontainer .materiallist .name {
    position: relative;
    top: -.5vw;
    font-size: .8vw;
}

.container .materialcontainer .materiallist .rate {
    font-size: .5vw;
    position: absolute;
    color: #6d6d6d;
    margin-top: .8vw;
    left: 2.5vw;
}

.container .materialcontainer .materiallist .rate .ratenum {
    color: #39dd00;
}

.container .materialcontainer .materiallist .rate .ratereject {
    color: #da0000;
}

.container .historycontainer {
    display: none;
    position: absolute;
    overflow-y: hidden;
    overflow-x: auto;
    width: 50vw;
    height: 4vw;
    bottom: 1vw;
    left: 2.7vw;
}

.container .historycontainer .historylist {
    display: inline-block;
    margin-left: .5vw;
    width: 4vw;
    height: 4vw;
    color: rgba(255, 255, 255, .3);
    font-size: .5vw;
    background: url(img/main-historysuccess.png);
    background-size: cover;
}

.container .historycontainer .historylist .name {
    position: relative;
    top: .2vw;
    width: 100%;
    text-align: center;
}

.container .historycontainer .historylist img {
    width: 2.5vw;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}

.container .historycontainer .historyfail {
    background: url(img/main-historyfail.png) !important;
    background-size: cover !important;
}

.container .guidecontainer {
    display: none;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: -11.5vw;
    width: 11.4vw;
    height: 14.5vw;
    background: url(img/main-guidecontainer.png);
    background-size: cover;
}

.container .guidecontainer .item {
    display: inline-block;
    position: relative;
    left: 2.3vw;
    top: 1vw;
    width: 2vw;
}

.container .guidecontainer .item-name {
    white-space: nowrap;
    display: inline-block;
    color: white;
    position: absolute;
    transform: translateX(-50%);
    left: 70.5%;
    top: 1.7vw;
    text-align: center;
}

.container .guidecontainer .detail {
    color: rgba(255,255,255,.5);
    font-size: .6vw;
    width: 8.5vw;
    height: 8vw;
    position: absolute;
    left: 2vw;
    top: 5.5vw;
}

.container .guideitemcontainer {
    display: none;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: -11.5vw;
    width: 11.4vw;
    height: 14.5vw;
    background: url(img/main-guideitemcontainer.png);
    background-size: cover;
}

.container .guideitemcontainer .item {
    display: inline-block;
    position: relative;
    top: 1vw;
    left: 7.3vw;
    width: 2vw;
}

.container .guideitemcontainer .item-name {
    white-space: nowrap;
    display: inline-block;
    color: white;
    position: absolute;
    transform: translateX(-50%);
    left: 29.3%;
    top: 1.7vw;
    text-align: center;
}

.container .guideitemcontainer .detail {
    color: rgba(255,255,255,.5);
    font-size: .6vw;
    width: 8.5vw;
    height: 8vw;
    position: absolute;
    left: .9vw;
    top: 5.5vw;
}