/* Playspace CSS document */
/* Defines complex playspace layout */

#playspace {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 84vh;
  padding: 0;
}

.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 0;
  height: inherit;
}

#leftcol {
  width: 25%;
  position: relative;
}

#midcol {
  width: 50%;
}

#rightcol {
  width: 25%;
}

.colhead {
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 0 0 1rem;
}

#graphicsboard {
  display: flex;
  flex: 1;
  position: relative;
  margin: 0 1rem 1rem;
}

#staging {
  margin: -2rem 1rem 0 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative;
}

#stageddeck {
  width: 75%;
}

#infoarea {
  width: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  justify-content:space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}