body {Arial, Helvetica, sans-serif;}

html {
    scroll-behavior: smooth;
}

.ui-page {
    width: 95% !important;
    left: 10px !important;
}

.PlayerNameLable {
    display: block;
    font-size: 2.5em;
}
ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  xheight: 100px;
  xwidth: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #ddd;
}

:checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}


.nav-glyphish-example .ui-btn {
    padding-top: 40px !important;
}

    .nav-glyphish-example .ui-btn:after {
        width: 30px !important;
        height: 30px !important;
        margin-left: -15px !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

#chat:after {
    background:url("/_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat;
    background-size: 24px 22px;
}

#email:after {
    background:url("/_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat;
    background-size: 24px 16px;
    
}

#login:after {
    background:url("../_assets/img/glyphish-icons/30-key.png") 50% 50% no-repeat;
    background-size: 12px 26px;
}

#beer:after {
    background:url("../_assets/img/glyphish-icons/88-beermug.png") 50% 50% no-repeat;
    background-size: 22px 27px;
}

#coffee:after {
    background:url("/_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat;
    background-size: 20px 24px;
}

#skull:after {
    background:url("/_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat;
    background-size: 22px 24px;
}

#phone:after {
    background: url("/_assets/img/glyphish-icons/phone.png") 50% 50% no-repeat;
    background-size: 22px 24px;
}

#tests:after {
    background: url("/_assets/img/glyphish-icons/tests.png") 50% 50% no-repeat;
    background-size: 22px 24px;
}

#gear:after {
    background: url("/_assets/img/glyphish-icons/19-gear.png") 50% 50% no-repeat;
    background-size: 22px 24px;
}

#oom:after {
    background: url("/_assets/img/glyphish-icons/oom.png") 50% 50% no-repeat;
    background-size: 22px 24px;
}

form .error {
    color: #ff0000;
}
.ui-block-e {
    width: 25% !important;
}

.sideByside .ui-block-a {
    padding-right: 6px;
}

.sideByside .ui-block-b {
    padding-left: 6px;
}