mark {
    background-color: #ff9;
    color: #000;
    font-style: normal;
    font-weight: bold;
}

.hidden {
    display: none;
}
body {
    padding-top: 50px;
}
@media screen and (max-width: 768px) {
    body {
        padding-top: 50px;
    }
}


.draggable {

  /*Button Positioning and Size*/
  width: 2%;
  height: 2%;
  min-height: 20%;
  margin: 1%;
  margin-top: 3%;
  border-radius: 2em;
  padding: 4%;
  font-size: 19px;
  text-align: center;        

  
  /*Button Coloring*/
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
  color: #fff;

  /*Text display options*/
  display:table-cell;
  vertical-align:middle;

  /*Stops Browser Action for Chrome and Safari*/ 
  touch-action: none;
  -webkit-user-select: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#drag-me::before {
  content: "#" attr(id);
  font-weight: bold;
}
#keyboard{
    height: 60%;
    background-color: white;
    position: relative;
}
#touchpad{
    flex: 1 1 0px;
    background-color: grey;
}
.wrapper{
   display: flex;
   flex-direction: column;
   height: calc(100% - 50px);
   width: 100%;
   position: fixed;
}

.navbar-item {
    display: block;
    padding: 5px 5px;
    clear: both;
    font-weight: 400;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    color: white;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

#inputText {
    color: black;
}

#modal-save {
    display: inline-block;
    background-color: green;
}

#modal-close {
    display: inline-block;
    background-color: red;
}