* {
     box-sizing: border-box;
 }

 html {
     position: fixed;
     overflow: hidden;
 }

 body {
     margin: 0px;
     position: fixed;
     overflow: hidden;
     width: 100%;
     height: 100%;
 }

 body * {
     -ms-user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }

 .button::selection,
 .panel *::-moz-selection {
     background: transparent;
     color: inherit;
 }

 #header {
     padding: 0 0 30px 0;
     margin: 0 0 -12px 0;
     position: relative;
 }

 #separator {
     border-bottom: 1px solid rgb(30, 30, 30);
     padding: 0 0 0 0;
     margin: 0 0 20px 0px;
     position: relative;
 }

 .panel {
     width: 41%;
     height: auto;
     position: absolute;
     background-color: rgba(180, 180, 180, 0.6);
     opacity: 0.9;
     padding: 20px;
     z-index: 5;
     top: 7%;
     left: 40px;
 }

 h2 {
     float: left;
     font-family: Arial, Helvetica, Verdana, sans-serif;
     font-size: 30px;
     color: #111;
     margin: 0 0 5px 0;
     text-transform: none;
     position: absolute;
     bottom: 0;
     left: 0;
     display: block;
 }

 #logo {
     text-align: right;
 }

 #logo img {
     height: 80px;
     width: 80px;
 }

 #tab:after {
     content: "";
     display: table;
     clear: both;
 }

 .chairtype {
     float: left;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     padding: 0 10px 2px 10px;
     margin: 12px 2px 0 0;
     border-bottom: 3px solid transparent;
     font-size: 12px;
     font-family: Arial, Helvetica, Verdana, sans-serif;
 }

 .chairtype:hover {
     border-color: rgba(30, 30, 30, 0.6);
     cursor: pointer;
 }

 .chairtype.active {
     border-color: rgba(30, 30, 30, 1);
 }

 .optiongroup {
     clear: both;
     margin-bottom: 20px;
 }

 .button {
     width: 71px;
     height: 47px;
     margin: 0px 10px 10px 0;
     outline: 1px solid dimgray;
     float: left;
     cursor: pointer;
     font-size: 11px;
     text-align: center;
     line-height: 40px;
     vertical-align: middle;
 }

 .button:hover {
     outline-color: white;
 }

 .buttonDisabled {
     opacity: 0.5;
 }

 .buttonPlay {
     opacity: 1;
     outline: 3px solid white;
 }

 #canvas {
     width: 145%;
     height: 100vh;
     outline: 0;
     touch-action: none;
 }

 #loader {
     position: fixed;
     top: 50%;
     left: 50%;
 }

 .hidden {
     display: none
 }

 #help {
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: rgba(180, 180, 180, 0.75);
     z-index: 10;
 }

 .help_icon {
     position: absolute;
     width: 200px;
     height: 200px;
 }

 #help_swipe {
     left: 50%;
     top: 50%;
     margin-left: 50px;
     margin-top: -100px;
 }

 #help_play {
     left: 7%;
     top: 20%;
 }

 @media only screen and (max-width: 790px) {
     #header {
         padding: 0 0 0 0;
         margin: 0 0 5px 0;
     }

     .chairtype {
         width: auto;
     }

     .chairtype:first-child {
         margin-bottom: 0;
     }

     .panel {
         width: 100%;
         height: auto;
         position: fixed;
         display: block;
         background-color: rgba(255, 255, 255, 0.8);
         top: 0;
         left: 0;
         padding-bottom: 0px;
     }

     h2 {
         font-size: 18px;
         margin: 0 0 2px 0;
     }

     #logo img {
         height: 25px;
         width: 52px
     }

     .button {
         margin: 0px 5px 5px 0;
     }

     .button:hover {
         outline: 2px solid black;
     }

     .buttonPlay {
         outline: 2px solid black;
     }

     #canvas {
         height: 100vh;
         width: 100%;
         margin-top: 50px;
     }

     #separator {
         margin: 0 0 5px 0px;
     }

     #help_swipe {
         left: 50%;
         top: 50%;
         margin-top: 0;
         margin-left: -100px;
     }

     #help_play {
         left: 50%;
         top: 2%;
         margin-left: -100px;
     }
 }