@import url("https://fonts.googleapis.com/css?family=Kanit");
:root { --mainbg: rgb(16, 15, 13, 0.7); --mainhover: rgb(16, 15, 13, 0.9); --secondbg: rgb(30, 28, 27, 0.9); --mainbg2: rgba(70, 70, 70, 0.4); }
body { cursor: default; background: transparent; height: 100%; width: 100%; overflow: hidden; user-select: none; text-transform: uppercase; font-family: Kanit, sans-serif !important; }
.lineshadow { position: absolute; width: 100%; height: 100%; background: radial-gradient(100% 100% at 50% 50%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.5) 40%); }
.headertext { position: absolute; left: 50%; transform: translate(-50%); top: 5%; color: white; text-shadow: white 0px 0px 50px; font-size: 2.5vw; }
.skindesbox { position: absolute; left: 50%; transform: translate(-50%); top: 12%; }
.squarebox { position: absolute; top: 50%; transform: translate(0px, -50%); width: 10px; height: 10px; color: rgb(0, 174, 255); }
.maincontainer { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5px; }
.mainweaponcontain {position: absolute;left: 3%;top: 50%;transform: translate(0px, -50%);width: 22%;height: 70%;background-color: rgb(14 14 14 / 48%);padding: 2rem;border-radius: 10px;}
.searchbar {position: relative;width: 100%;height: 6%;background-color: rgb(36 36 36);border-radius: 10px;}
.searchinput {position: relative;width: 83%;height: 100%;margin-left: 5%;background: #38383800;border: none;color: #404040;outline: 0px;font-size: 0.9vw;}
.searchinput:focus { outline: none !important; }
.searchinput::placeholder { color: white; }
.searchicon { color: white; font-size: 1.1vw; }
.mainweaponboxout { position: relative; height: 92%; width: 105%; left: 50%; transform: translate(-50%); overflow: hidden; margin-top: 4%; }
.mainweaponbox { position: absolute; height: 100%; width: 100%; overflow: hidden overlay; }
.mainweapon { position: relative; width: 100%; height: 18%; margin-bottom: 1.3vh; }
.mainweaponin {cursor: pointer;display: flex;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 94%;height: 100%;background: rgb(36 36 36 / 90%);border-radius: 10px;overflow: hidden;padding: 1rem;}
.mainweaponin:hover {background: rgb(0 96 179 / 90%)  !important;}
.mainimgbox { position: relative; left: 0%; top: 50%; transform: translate(0%, -50%); width: 26%; height: 100%; background-color: rgb(52, 52, 52); border-radius: 10px; }
.mainimg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; }
.weaponinfobox { position: relative; margin-left: 1rem; height: 100%; width: 70%; }
.mainwepname { position: relative; color: white; margin: 0.5rem 0.3rem; font-size: 1.4vw; font-weight: 500; text-align: left; max-width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mainwepc { position: relative; color: white; margin: 0.5rem 0.3rem; font-size: 0.7vw; font-weight: 500; text-align: left; }
.mainicon {position: absolute;right: 7%;top: 50%;transform: translate(0px, -50%);color: white;background-color: rgb(0 184 255);padding: 0.4rem 0.7rem;border-radius: 10px;}
.skinweaponcontain { position: absolute; right: 3%; top: 50%; transform: translate(0%, -50%); width: 22%; height: 70%; overflow: hidden; background-color: var(--mainbg); border-radius: 10px; padding: 0.5vw 0.7vw; }
.skinheadertext { position: relative; text-transform: uppercase; }
.skincount { position: absolute; right: 4%; top: 3.5%; color: white; font-size: 0.9vw; }
.sorticon { position: absolute; right: 4%; top: 8%; color: rgb(145, 143, 143); font-size: 1vw; }
.second { color: white; font-size: 1.5vw; margin-left: 0.3rem; }
.main { color: white; font-size: 1vw; margin-left: 0.3rem; }
.skinweaponbox { position: relative; height: 87%; width: 100%; overflow-x: hidden; background-color: rgba(30, 28, 27, 0.9); border-radius: 10px; margin-top: 1.5vh; }
.skinrow { position: relative; display: flex; align-items: normal; width: 100%; height: 25%; padding: 0.6rem 0.4rem; }
.skinweabox {cursor: pointer;position: relative;width: 31%;height: 100%;border-radius: 10px;padding: 0.2rem;margin: 0px 0.3rem;/* background-image: linear-gradient(0deg, rgb(0, 204, 255) 0%, rgba(255, 0, 0, 0) 100%); *//* border: 2px solid rgb(0, 217, 255); */}
.imgbox { position: relative; width: 100%; height: 80%; }
.skinimg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; }
.skinname { position: relative; color: white; text-align: center; font-size: 0.8vw; }
.inuseicon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgb(39, 150, 60); font-size: 2.5vw; font-weight: 1000; }
.lockicon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.5); font-size: 2.5vw; }
.bottombox { position: absolute; left: 50%; transform: translate(-50%); bottom: 7%; background-color: var(--mainbg); border-radius: 7px; }
.predes { position: relative; color: white; margin-top: 1.2vh; text-align: center; font-size: 0.7vw; }
.statusrow { position: relative; display: flex; padding: 0px 0.3vw; }
.statusbox { position: relative; width: 8vw; height: 5vh; margin: 0.1vw 0.5vw; }
.statustext { position: relative; width: 100%; color: white; font-size: 0.8vw; }
.statusbar { position: relative; width: 100%; height: 30%; background-color: var(--secondbg); }
.statusbarin { position: absolute; left: 0%; top: 0%; height: 100%; width: 50%; background-color: rgb(0, 119, 255); }
.scrolltext { position: absolute; right: 26%; bottom: 15%; color: white; text-transform: lowercase; display: flex; align-items: center; justify-content: center; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: var(--secondbg); border-radius: 5px; }
::-webkit-scrollbar-thumb { background-color: white; transition: all 0.25s ease 0s; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background-color: white; cursor: pointer; transition: all 0.25s ease 0s; }
.hitframe { display: none; position: absolute; width: 100%; height: 100%; z-index: -999; background-size: 100% 100%; }
.fadeeffect { animation-name: opacityfade; animation-duration: 5s; }
@keyframes opacityfade { 
  0% { opacity: 1; }
  25% { opacity: 0.75; }
  50% { opacity: 0.5; }
  75% { opacity: 0.25; }
  100% { opacity: 0; }
}