.vertical-layout
{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.horizontal-layout
{
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.flex-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.box
{
  background: #d9d9d9;
  border: 2px #000;
  pointer-events: all;
  color: black;
  box-shadow: 0 2px 20px black;
}

.window
{
  background: #B5B1B1;
  border: 2px #000;
  pointer-events: all;
  color: black;
  box-shadow: 0 2px 20px black;
  //border-image: url( '/ui/border-ff.png' ) 30  round;
}

.center-child {
  justify-content: center;
  align-items: center;
}

.scroll {
  overflow-y: scroll;
}

.right-top
{
  position: absolute;
  right: 0;
  top: 0;
}

.right
{
  position: absolute;
  right: 0;
  align-self: center;
}

.right-bottom
{
  position: absolute;
  right: 0;
  bottom: 0;
}

.left
{
  position: absolute;
  left: 0;
  align-self: center;
}

.left-bottom
{
  position: absolute;
  left: 0;
  bottom: 0;
}

button
{
  background: #d9d9d9;
  border: 2px #000;
  pointer-events: all;
  color: black;
  box-shadow: 0 2px 20px black;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

  &:hover {
    background: #5A738B;
    cursor: pointer;
  }
}

.btn-primary {
  background: #007bff;
  color: white;
  text-shadow:
          -1px -1px 0 black,
          1px -1px 0 black,
          -1px 1px 0 black,
          1px 1px 0 black;

  &:hover {
    background: #0069d9;
  }
}

.btn-danger {
  background: #dc3545;
  color: white;
  text-shadow:
          -1px -1px 0 black,
          1px -1px 0 black,
          -1px 1px 0 black,
          1px 1px 0 black;

  &:hover {
    background: #c82333;
  }
}

.active {
  background: #5A738B;
}

.btn-mode {
  overflow: hidden;
  white-space: nowrap;
  max-width: 40px;
  font-size: 24px;
  padding: 10px;
  transition: max-width 0.2s linear;

  &:hover {
    max-width: 120px;
  }
}

.btn-mode-active {
  background: #5A738B;
  max-width: 120px;
}