.button {
  text-align: center;
  font-size: 24px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container {
    position:relative;
    top:16px;
    left:16px;
    background-color:white;
    float:left;
    padding:40px;
    min-width:715px;
  }
  
  .row-even {
    user-select:none;
    position:relative;
    top:-16px;
    left:0;
  }
  .row-odd {
    user-select:none;
    position:relative;
    top:-16px;
    left:36px;
  }
  .col {
    width:24px;
    height:24px;
    display:inline-block;
    padding:16px;
    margin:1px;
    margin-top:4px;
    margin-right:8px;
    user-select:none;
    text-align:center;
    border-radius:32px;
  }
  .field-empty {
    background-color:greenyellow;
    cursor:pointer;
  }
  .field-piece {
    background-color:lightgray;
    cursor:default;
  }
  .field-blocked{
    background-color: gray;
    cursor:default;
  }
  .hidden {
    display: none;
  }
  .dialogbox {
    top:250px;
    left:200px;
    position:fixed;
    z-index:20;
    width:450px;
    height:450px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    padding:12px;
  }
  .disabled {
    opacity:0.6;
    pointer-events:none;
  }
  .text {
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-top:15px;
  }
  .counter {
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  .msgboximg {
    width:300px;
    height:300px;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
  }
  .pieceimg {
    position:relative;
    left:-65px;
    top:-90px;
    pointer-events:none;
    z-index:10;
    display:table;
  }
  .pieceimg-faceright {
    transform:scale(0.56);
  }
  .pieceimg-faceleft {
    transform:scale(0.56) scaleX(-1);
  }
  .marecounter {
    width: 200px;
    float: right;
  }