/* required file for gridstack to work */
@import "gridstack.min.css";

/* Optional styles for demos */
.btn-primary {
  color: #fff;
  background-color: #007bff;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1.5;
  border-radius: .25rem;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

.grid-stack {
  /* background: #FAFAD2; */
  background: #fff;
  margin: 0 auto;
  padding: 0;
  /* border: 1px solid red; */
  /* position: absolute; */
  /* width: 3168px; */
  min-width: 1590px;
  max-width: 3168px;
  width: 100%;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #fff;
  /* box-shadow:2px 2px 2px 1px #b4b6b8; */
  /* box-shadow:none; */
  overflow: hidden !important;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
  background: rgba(0,0,0,0.1);
  inset: 0 2px;
}
.grid-stack.grid-stack-nested {
  background: none;
  /* background-color: red; */
  /* take entire space */
  position: absolute;
  inset: 0; /* TODO change top: if you have content in nested grid */
}