body {
    padding-top: 55px;
    padding-bottom: 75px;
}

.add_widget {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    padding:15px 0;
    /*background-color: #000;*/
    position: relative;
    color:#fff;
}

.add_widget .glyphicon {
    position:absolute;
    cursor:pointer;
    top:20px;
}

.label {
    font-size:110%;
    min-height:20px;
}

.glyphicon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.board-lock {
    position: relative;
    color: #9D9D9D;
    top:15px;
    left:-5px;
}
.export-board {
    top:15px;
    position: relative;
    left:1px;
    cursor: pointer;
}
.board-lock.unlocked {
    color:#2ecc71;
}
.board-lock.locked {
    color:#e74c3c;
}

.navbar-ellipses {
    color: #9D9D9D;
    position: relative;
    top: 17px;
    left: 2px;
    display: none;
}

@media (max-width: 500px) {
    .navbar-brand {
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
    }
}

.navbar img.bmac
{
    height:24px;
}

#avatar {
    height:40px;
    margin:5px;
    float:left;
}

#history {
    color:#333;
}

textarea {
/*  // Options: horizontal, vertical, both*/
  resize: vertical;
/*  // Safari fix*/
  overflow: auto;
}

#code-form {
    margin-top:10px;
}

/*** begin text area auto-sizing trick */
.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}
/*** end text area auto-sizing trick */


/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #poker-box { display: none; }
}