/* #Screen {
    display: grid;
    grid-template-columns: 360px 320px;
  } */

.dis-none {
  display: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
ul,
li,
p {
  text-align: right;
}
body {
  font-family: "vazirmatn" !important;
  background-color: rgb(83, 83, 83);
  /* background: hsla(232, 41%, 51%, 1);

  background: linear-gradient(
    180deg,
    hsla(232, 41%, 51%, 1) 0%,
    hsla(236, 14%, 21%, 1) 100%
  );

  background: -moz-linear-gradient(
    180deg,
    hsla(232, 41%, 51%, 1) 0%,
    hsla(236, 14%, 21%, 1) 100%
  );

  background: -webkit-linear-gradient(
    180deg,
    hsla(232, 41%, 51%, 1) 0%,
    hsla(236, 14%, 21%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#4D5BB5", endColorstr="#2F303E", GradientType=1 ); */
}
#Screen {
  display: flex;
  justify-content: center;
}
.btn.focus,
.btn:focus {
  box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25) !important;
}

.btn-style {
  background-color: #0e103d !important;
  color: #f2d7ee !important ;
  font-weight: bold;
}
.btn-style2 {
  background-color: #69306d !important;
  color: #d3bcc0 !important ;
  font-weight: bold;
}

.btn-style3 {
  background-color: #a5668b !important;
  color: #0e103d !important ;
  font-weight: bold;
}

#DocumentationPanel {
  border: solid 1px;
}

#ControlPanel {
  margin: 10px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#DocumentationPanel {
  margin: 10px;
}

#BoardCanvas {
  margin: 10px;
  border: solid 2px;
}

#Score_NextTetro {
  display: flex;
}

#ScorePanel {
  color: #0e103d;
  border-left: solid 1px;
  padding: 20px;
  margin: 10px;
}

#NextTetroPanel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#CurrentNextTetromino {
  display: flex;
  justify-content: space-around;
}
.control-button {
  background-color: bisque;
  color: black;
  border: 1px solid black;
  visibility: hidden;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
}

.play-button {
  background-color: bisque;
  font-size: 16px;
  padding: 5px 5px;
  cursor: pointer;
}

.basicSt {
  border: solid 1px;
  background-color: gray;
}
.supposSt {
  border: solid 1px;
  background-color: cyan;
}
.entangledSt {
  border: solid 1px;
  background-color: yellow;
}