body {
  margin: 0px;
  border-width: 0px;
  padding: 8px;
  font-size: 100%;
  background-color: #F2F1E7;
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: center; /* Safari 6.1+ */
  display: flex;
  justify-content: center;
}

.p4wn-title{
  text-align: center;
  vertical-align: top;
  padding: 0px;
  font-family: Capriola, Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

.p4wn-exit{
  text-align: right;
  vertical-align: middle;
  padding: 0px;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
}

.p4wn-exit a{
  color: black;
}

.p4wn-instructions{
  text-align: justify;
  vertical-align: top;
  padding: 0px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.p4wn-status{
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: bold;
  white-space: nowrap;
}

.p4wn-status-promotion-select{
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  height: 100%; 
}

.p4wn-status-promotion-select:hover{
  background-color: rgb(185,122,87);
}

.p4wn-board table{
  border-spacing: 0px;
}

.p4wn-board td{
  padding: 0px;
}

.p4wn-white-square {
  background-color: #ffffff;
}

.p4wn-black-square {
  background-color: #ded3c9;
}

.p4wn-my-marked-square {
  box-shadow: 
    0.7vmin 0.7vmin 0.7vmin rgb(185,122,87) inset,
    -0.7vmin -0.7vmin 0.7vmin rgb(185,122,87) inset;
}

.p4wn-others-marked-square {
  box-shadow: 
    0.7vmin 0.7vmin 0.7vmin rgb(34,177,76) inset,
    -0.7vmin -0.7vmin 0.7vmin rgb(34,177,76) inset;
}

.p4wn-promoting-square {
  background-color: rgb(185,122,87);
}

.p4wn-coord-num{
  padding: 0px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 1px;
}

.p4wn-coord-alpha{
  padding: 0px;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.p4wn-img {
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.p4wn-board {
  position: relative;
  left: 0px;
  top: 0px;
  border: 10px solid #322013;
  float: left;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.p4wn-log {
  font-family: monospace;
  white-space: pre;
  font-size: smaller;
  overflow: auto;
  /*max-width: 14em;*/
/*********************************************** Begin of modification ***********************************************/
  max-width: 200em;
/***********************************************  End of modification  ***********************************************/
  height: 90%;
  /*border:1px solid blue;*/
}

.p4wn-controls{
  display: grid;
  grid-template-columns: 33% 34% 33%;
}

.p4wn-control-button {
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  font-family: Capriola, Arial, Helvetica, sans-serif;
/*  font-size: 2.5vmin;*/
  white-space: nowrap;
  color: white;
  background-color: #533B2E;
  cursor: pointer;
}

.p4wn-control-button i{
  vertical-align: inherit;
  font-size: inherit;
}

.p4wn-control-button:active{
  background-color: #73513f;
}

.p4wn-control-button:disabled{
  background-color: #222222;
  cursor: not-allowed;
}

.p4wn-log-move {
  padding: 0px 7px;
  cursor: pointer;
}

.p4wn-wrapper{
}