.flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.horz {
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
.flex.vert {
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.flex.center {
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}
.flex.middle {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.flex1 {
  flex-grow: 1;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
}
.flex.nowrap {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex.space {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
.fullscreen {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
@font-face {
  font-family: "Sanchez";
  src: url("/gc/sm/static/css/sanchez.woff");
}
@font-face {
  font-family: "RoundArial";
  src: url("../fonts/ARLRDBD.ttf");
}
@font-face {
  font-family: "Grobold";
  src: url("/gc/sm/static/css/GROBOLD.woff");
}
div.backdrop {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.85);
}
div.dialog {
  max-height: 80%;
  overflow-y: scroll;
  max-width: 320px;
  padding: 2em;
  color: #999999;
  background-color: white;
  border: 1px solid #efefef;
  border-radius: 0.25em;
  text-align: center;
}
/* ----------------------------------------------------
   created with http://www.codeandweb.com/texturepacker 
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:5ee016fd8441edb0c0e4d481b1a085f5:c991a973d856e7e1fee0066f1adb7378:f978d7820acf426d012f7256c061dbf3$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/
.sprite {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(kswebapp.png);
}
.KS_logo {
  width: 176px;
  height: 141px;
  background-position: -1px -1px;
}
.facebook {
  width: 32px;
  height: 32px;
  background-position: -92px -144px;
}
.fb {
  width: 28px;
  height: 32px;
  background-position: -179px -103px;
}
.fbicon {
  width: 24px;
  height: 24px;
  background-position: -194px -137px;
}
.ig {
  width: 47px;
  height: 32px;
  background-position: -1px -144px;
}
.instagram {
  width: 32px;
  height: 32px;
  background-position: -126px -144px;
}
.logo_32 {
  width: 40px;
  height: 32px;
  background-position: -50px -144px;
}
.profile {
  width: 32px;
  height: 32px;
  background-position: -160px -144px;
}
.tw {
  width: 30px;
  height: 32px;
  background-position: -179px -69px;
}
.twitter {
  width: 32px;
  height: 32px;
  background-position: -179px -1px;
}
.x {
  width: 16px;
  height: 16px;
  background-position: -209px -103px;
}
.youtube {
  width: 32px;
  height: 32px;
  background-position: -179px -35px;
}
body {
  margin: 0;
  background-color: #2e2e33;
  background-image: url(/gc/sm/static/images/games/bg.png);
  font-family: Sanchez, Helvetica;
}
#jsEnable {
  height: 15em;
  color: white;
  font-size: 1.2em;
}
a {
  text-decoration: underline;
}
div.input {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  border: 1px solid #efefef;
  color: #262626;
  border-radius: 0.25em;
}
div.input input {
  flex-grow: 1;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  padding: 0.25em;
  outline: 0;
  margin: 0;
  background-color: #fafafa;
  border: 0;
  font-size: 1.2em;
  border: 1px solid transparent;
  border-radius: 0.25em;
}
div.input input:focus {
  border: 1px solid #888888;
}
p.error {
  color: #ed4956;
}
.bold {
  font-weight: bold;
}
.relative {
  position: relative;
}
/* UI */
button[disabled],
button.bluebutton[disabled],
button.text[disabled] {
  background-color: #888888;
  border: 1px solid #888888;
  color: #fafafa;
}
button.text {
  font-size: 1.25em;
  text-align: center;
  display: block;
  cursor: pointer;
  outline: none;
  background-color: #efefef;
  color: #888888;
  border-radius: 0.25em;
  border: 1px solid transparent;
  width: 100%;
  padding: 0.5em;
}
button.text:active {
  border: 1px solid #888888;
  background-color: #fafafa;
}
button > * {
  vertical-align: middle;
  margin: 0 0.25em;
}
button.bluebutton {
  background-color: #3897f0;
  border: 1px solid #3897f0;
  color: white;
  width: 100%;
}
button.bluebutton:active {
  background-color: #4CA9FF;
}
.row {
  margin-bottom: 0.25em;
}
.divider {
  flex-grow: 1;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  background-color: #888888;
  height: 1px;
}
.divider-or {
  margin: 0 1em;
}
.stat > * {
  vertical-align: middle;
}
.stat .key {
  font-weight: bold;
}
.stat .val {
  font-size: 0.8em;
}
/* Login */
#login > * {
  margin: 0.5em;
}
#login a {
  color: #999999;
  font-weight: bold;
}
#fblogin:active {
  opacity: 0.7;
}
/* Accounts */
#accounts {
  width: 80%;
  max-width: 800px;
}
#accounts br {
  padding: 0.5rem;
}
#accounts button,
#accounts .input {
  max-width: 320px;
  margin: 0.5rem auto 0;
}
#accounts #pins {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}
#accounts .row > button {
  display: block;
}
#accounts button.xbutton {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 0.25em;
  margin: 0.25em;
  background-color: transparent;
  outline: 0;
}
#accounts button.xbutton:active {
  border: 1px solid #efefef;
}
button.xbutton .sprite {
  width: 16px;
  height: 16px;
  margin: 0;
}
div.rightbutton {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
}
/* Header */
#title {
  background-color: white;
  color: #888888;
}
#titleKS {
  font-family: Grobold;
  font-size: 1em;
  padding-left: 1em;
}
#titleName {
  font-famliy: Sanchez;
  font-size: 0.8em;
}
#title .iconbutton {
  margin: 0.25em 0.5em;
  border: 1px solid transparent;
  cursor: pointer;
}
#title .iconbutton:active {
  border: 1px solid #efefef;
  border-radius: 0.25em;
}
#dashboardTop {
  background-color: white;
  color: #888888;
  border-top: 1px solid #fafafa;
  padding: 0.25em 0;
  font-family: arial;
}
#dashboardTop .row > * {
  display: inline-block;
  margin-left: 1em;
  font-size: 1em;
  vertical-align: middle;
}
#dashboardTop .graph {
  padding: 1em;
}
#dashboardTop .error {
  margin: 1em;
}
#dashboardTop .info {
  display: block;
  color: indianred;
}
/* confirm dialog */
#confirm button,
#inform button {
  margin: 0.25em;
}
#gross {
  font-size: 0.9em;
  margin: 1em;
  font-family: Arial;
  border-collapse: collapse;
}
#gross caption {
  color: #6678b1;
  font-size: 1.2em;
  font-weight: bold;
}
#gorss tr {
  box-sizing: border-box;
}
#gross tr.title {
  border-bottom: 1px solid #dddddd;
  font-size: 1.2em;
  font-weight: bold;
  color: #6678b1;
}
#gross tr.title td {
  border-top: 2px solid #6678b1;
  border-bottom: 2px solid #6678b1;
}
#gross tr:last-child {
  border-top: 1px solid #dddddd;
  font-weight: bold;
  font-size: 1.2em;
}
#gross tr:last-child td {
  border-top: 2px solid #6678b1;
  border-bottom: 2px solid #6678b1;
  color: #6678b1;
}
#gross td.right {
  text-align: right;
  min-width: 5em;
}
#gross td {
  padding: 0.25em 0.5em;
  color: #666699;
}