/**
 * @file
 * This file is a modified version of the library one.
 *
 * Two reasons: BEM syntax and clear separation between front and back ends.
 */

.gridstack--enabled > .box {
  min-width: 8.3333333333%;
  position: absolute;
  padding: 0;
}

.gridstack--enabled > .box[data-gs-width='1'] {
  width: 8.3333333333%;
}

.gridstack--enabled > .box[data-gs-x='1'] {
  left: 8.3333333333%;
}

.gridstack--enabled > .box[data-gs-min-width='1'] {
  min-width: 8.3333333333%;
}

.gridstack--enabled > .box[data-gs-max-width='1'] {
  max-width: 8.3333333333%;
}

.gridstack--enabled > .box[data-gs-width='2'] {
  width: 16.6666666667%;
}

.gridstack--enabled > .box[data-gs-x='2'] {
  left: 16.6666666667%;
}

.gridstack--enabled > .box[data-gs-min-width='2'] {
  min-width: 16.6666666667%;
}

.gridstack--enabled > .box[data-gs-max-width='2'] {
  max-width: 16.6666666667%;
}

.gridstack--enabled > .box[data-gs-width='3'] {
  width: 25%;
}

.gridstack--enabled > .box[data-gs-x='3'] {
  left: 25%;
}

.gridstack--enabled > .box[data-gs-min-width='3'] {
  min-width: 25%;
}

.gridstack--enabled > .box[data-gs-max-width='3'] {
  max-width: 25%;
}

.gridstack--enabled > .box[data-gs-width='4'] {
  width: 33.3333333333%;
}

.gridstack--enabled > .box[data-gs-x='4'] {
  left: 33.3333333333%;
}

.gridstack--enabled > .box[data-gs-min-width='4'] {
  min-width: 33.3333333333%;
}

.gridstack--enabled > .box[data-gs-max-width='4'] {
  max-width: 33.3333333333%;
}

.gridstack--enabled > .box[data-gs-width='5'] {
  width: 41.6666666667%;
}

.gridstack--enabled > .box[data-gs-x='5'] {
  left: 41.6666666667%;
}

.gridstack--enabled > .box[data-gs-min-width='5'] {
  min-width: 41.6666666667%;
}

.gridstack--enabled > .box[data-gs-max-width='5'] {
  max-width: 41.6666666667%;
}

.gridstack--enabled > .box[data-gs-width='6'] {
  width: 50%;
}

.gridstack--enabled > .box[data-gs-x='6'] {
  left: 50%;
}

.gridstack--enabled > .box[data-gs-min-width='6'] {
  min-width: 50%;
}

.gridstack--enabled > .box[data-gs-max-width='6'] {
  max-width: 50%;
}

.gridstack--enabled > .box[data-gs-width='7'] {
  width: 58.3333333333%;
}

.gridstack--enabled > .box[data-gs-x='7'] {
  left: 58.3333333333%;
}

.gridstack--enabled > .box[data-gs-min-width='7'] {
  min-width: 58.3333333333%;
}

.gridstack--enabled > .box[data-gs-max-width='7'] {
  max-width: 58.3333333333%;
}

.gridstack--enabled > .box[data-gs-width='8'] {
  width: 66.6666666667%;
}

.gridstack--enabled > .box[data-gs-x='8'] {
  left: 66.6666666667%;
}

.gridstack--enabled > .box[data-gs-min-width='8'] {
  min-width: 66.6666666667%;
}

.gridstack--enabled > .box[data-gs-max-width='8'] {
  max-width: 66.6666666667%;
}

.gridstack--enabled > .box[data-gs-width='9'] {
  width: 75%;
}

.gridstack--enabled > .box[data-gs-x='9'] {
  left: 75%;
}

.gridstack--enabled > .box[data-gs-min-width='9'] {
  min-width: 75%;
}

.gridstack--enabled > .box[data-gs-max-width='9'] {
  max-width: 75%;
}

.gridstack--enabled > .box[data-gs-width='10'] {
  width: 83.3333333333%;
}

.gridstack--enabled > .box[data-gs-x='10'] {
  left: 83.3333333333%;
}

.gridstack--enabled > .box[data-gs-min-width='10'] {
  min-width: 83.3333333333%;
}

.gridstack--enabled > .box[data-gs-max-width='10'] {
  max-width: 83.3333333333%;
}

.gridstack--enabled > .box[data-gs-width='11'] {
  width: 91.6666666667%;
}

.gridstack--enabled > .box[data-gs-x='11'] {
  left: 91.6666666667%;
}

.gridstack--enabled > .box[data-gs-min-width='11'] {
  min-width: 91.6666666667%;
}

.gridstack--enabled > .box[data-gs-max-width='11'] {
  max-width: 91.6666666667%;
}

.gridstack--enabled > .box[data-gs-width='12'] {
  width: 100%;
}

.gridstack--enabled > .box[data-gs-x='12'] {
  left: 100%;
}

.gridstack--enabled > .box[data-gs-min-width='12'] {
  min-width: 100%;
}

.gridstack--enabled > .box[data-gs-max-width='12'] {
  max-width: 100%;
}

.gridstack--enabled .box__content {
  left: 8px;
  right: 8px;
  bottom: 0;
  width: auto;
  z-index: 0;
}

/** Without margin. */
.gridstack--nomargin > .box > .box__content,
.gridstack--nomargin > .box > .placeholder-content {
  left: 0;
  right: 0;
}

/**
 * Gridstack is disabled by default at 768.
 */
.gridstack--disabled {
  height: auto !important; /* csslint allow: known-properties, important */
}

/** Needed !important to override JS, or unexpected overrides. */
.gridstack--disabled > .box {
  float: none;
  height: auto !important; /* csslint allow: known-properties, important */
  position: relative;
  left: auto !important; /* csslint allow: known-properties, important */
  top: auto !important; /* csslint allow: known-properties, important */
  margin-bottom: 0;
}

.gridstack--disabled .box__content {
  left: auto;
  position: relative;
  right: auto;
}

/** Destroyed. */
.gridstack--destroyed > .gridstack__box.box {
  float: left;
  left: auto;
  position: relative;
}

.gridstack--destroyed > .box  > .box__content {
  position: relative;
}