BODY {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

@font-face {
  font-family: "CFont";
  src: url("Shared/Fonts/newfont.ttf");
}
@font-face {
  font-family: "KanitB";
  src: url("Shared/Fonts/Kanit-Bold.ttf");
}
@font-face {
  font-family: "KanitM";
  src: url("Shared/Fonts/Kanit-Medium.ttf");
}
@font-face {
  font-family: "BubbleGum";
  src: url("Shared/Fonts/bubblegum.ttf");
}
@font-face {
  font-family: "alagard";
  src: url("Shared/Fonts/alagard.ttf");
}
#BACKGROUNDLAYERD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: 100% 100%;
  z-index: 0;
}
#BOTTOMEFFECTSD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: 100% 100%;
  z-index: 1;
}
#WRAPPERD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; 
  background-size: 100% 100%;
  z-index: 2;
}
#TOPEFFECTSD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: 100% 100%;
  z-index: 3;
}
#UILAYERD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: 100% 100%;
  z-index: 4;
}

#STAGED {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#PARTICLESD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#TITLED {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 5;
  visibility: visible;
}
#CHARACTERD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 5;
  visibility: visible;
}

#METAD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 5;
  visibility: visible;
}

#MTXD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 6;
  visibility: visible;
}

#LANGUAGESELECTIOND {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 6;
  visibility: visible;
}

#CONFIRMATIOND {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 6;
  visibility: visible;
}

#OKD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 6;
  visibility: visible;
}

#ENDD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 5;
  visibility: visible;
}

#SETTINGSD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 6;
  visibility: visible;
}

#ITEMSD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 11;
  visibility: visible;
}

#BUFFSD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 11;
  visibility: visible;
}


#ITEMLISTD {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 11;
  visibility: visible;
}

#MERCHANTD {
  position: absolute;
  width: 65.31%;
  height: 90.37%;
  left: 17.345%;
  top: 4%;
  visibility: hidden;
  z-index: 10;
}

#DebugH {
  position: absolute;
  width: 66%;
  height: 95%;
  left: 26%;
  top: 7%;
  visibility: hidden;
  z-index: -1;
}
#sdebug {
  cursor: pointer;
}
#TRANSIENTEFFECTSD {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  visibility: visible;
  margin: 0;
  padding: 0;
  z-index: -1;
}

#loadingOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  position: absolute;
  visibility: visible;
  background: #000000;
  text-align: center;
  z-index: 9999;
}
#loadingOverlay > p {
  position: relative;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -9px;
  color: #ffffff;
  font-size: 24px;
}

#loadingBarBg {
  position: absolute;
  top: 70%;
  left: 25%;
  height: 1%;
  width: 50%;
  background-color: rgb(70, 70, 70);
}

#loadingBar {
  width: 1%;
  height: 100%;
  background-color: rgb(255, 255, 255);
}

#SIMPLEINPUTFIELD {
  position: absolute;
  width: 33.3%;
  height: 33%;
  left: 32%;
  top: 10%;
  visibility: hidden;
  z-index: -1;
  font-family: alagard;
  color: white; 
  background-color: #cccccc;
  background: url(Shared/Assets/UI/lilerpopup.png) no-repeat 0 0;
  background-size: 100% 100%;
  border-radius: 4px;
  padding: 12px 12px 12px 12px;
}

#simpleInputFieldDescription
{
  font-size: 3vh;
  margin-top: 5%;
}

#simpleInputFieldText
{
  margin-top: 1%;
}

#simpleInputButton
{
  margin-top: 1%;
  height: 15%;
  width: 30%;
  border-radius: 5px;
  font-size: 100%;
  font-family: alagard;
  color: white;
  border-width: 0px;
  border-bottom: 2px solid #446138;
  background-color: #74AA5D;
}

#simpleInputExitButton
{
  margin-top: 1%;
  height: 15%;
  width: 15%;
  border-radius: 5px;
  font-size: 100%;
  font-family: alagard;
  color: white;
  border-width: 0px;
  border-bottom: 2px solid #6B2D2D;
  background-color: #BE4949;
}

xmp {white-space: pre-wrap }

.languageSelection:Hover{ 
  background: -webkit-linear-gradient(to right, rgba(0,0,0,0),rgba(60,60,60,1),rgba(0,0,0,0));  
  background: -moz-linear-gradient(to right,rgba(0,0,0,0),rgba(60,60,60,1),rgba(0,0,0,0)); 
  background: -o-linear-gradient(to right,rgba(0,0,0,0),rgba(60,60,60,1),rgba(0,0,0,0)); 
  background: linear-gradient(to right,rgba(0,0,0,0),rgba(60,60,60,1),rgba(0,0,0,0)); 
  font-size: 20px;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  margin-top: 0px;
  color: #FFFFFF;
  vertical-align: middle;
}

.languageSelection{ 
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  margin-top: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  color: #CCCCCC;
  vertical-align: middle;
}