/*main.css*/
body
{
  background-color: rgb(51, 51, 51);
  overflow-y:hidden;
}
.control
{
  opacity:0.5;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;

    text-decoration: none;
}
.btn_base
{
    color: #fff;
    background-color: rgb(60,60,60);
    border-color: black;
}

.btn_dark {
    color: #fff;
    background-color: rgb(40,40,40);
    border-color: black;
}
.panel
{
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#avatar_name
{
  display:block;
  /*colsor: #fff;*/
  text-align:center;
  word-wrap: break-word;
  font-size: 11;
  font-weight: bold;
}
#avatar {
    position: fixed;
    width: 70px;
    left: 0;
    top: 0;
}
#avatar .panel
{
  width: 70px;
}

#avatar.hidden .panel 
{
    display:none;
}

#avatar_panel_container
{
	margin-top: -15px;
}

#avatar.hidden #avatar_panel_container
{
    margin-top: inherit;
}

#avatar_image
{
  width:inherit;
}

#avatar_image.picker_cam:hover
{
  box-sizing: border-box;
  border:5px solid #4ebfff;
  cursor: pointer;
}

#left_panel_container
{
    position: fixed;
    left: 5px;
    top: 55px;
    display: block;
    width: 25px;
}
#top_panel_container
{
  position: fixed;
   top: 5px;
   right:5px;
}
#char_picker
{
    width:100% !important;
    height:100% !important;
}


@media(max-width: 450px)
{
  #avatar
  {
      width:25px;
      height:25px;
  }
  #avatar .panel
  {
    width: 25px;
  }
  #avatar_image
  {
    width: 25px;
  }
  #avatar_name
  {
    display:none;
  }

  #top_panel_container
  {
    top:-9px;
    right:0px;
    height:5px;
  }
  #top_panel
  {
    height:28px;
  }

  #avatar_panel_container
  {
    margin-top:-27px;
    margin-left:0px;
    height:5px;
  }

  #avatar.hidden #avatar_panel_container
  {
    margin-top:-7px;
    margin-left:0px;
    height:5px;
  }

  #avatar_panel
  {
    height:25px;
  }
}


@media(max-width: 200px)
{
    #avatar 
    {
        display:none;
    }
    #top_panel
    {
        display:none;
    }
    #avatar_panel 
    {
        display:none;
    }
}
/*pace-theme-center-simple.css*/
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 200px;
  background: rgb(51, 51, 51);
  border: 1px solid #23372b;

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #446b4c;
}

.pace.pace-inactive {
  display: none;
}


.pace-running > *:not(.pace) {
  opacity: 0.1;
}
